ngx-perfect-scrollbar.es5.js 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887
  1. import { fromEvent, Subject, merge } from 'rxjs';
  2. import { auditTime, takeUntil, distinctUntilChanged, mapTo } from 'rxjs/operators';
  3. import { InjectionToken, Directive, NgZone, KeyValueDiffers, ElementRef, Inject, PLATFORM_ID, Optional, Input, Output, EventEmitter, Component, ViewEncapsulation, ChangeDetectorRef, HostBinding, ViewChild, NgModule } from '@angular/core';
  4. import { isPlatformBrowser, CommonModule } from '@angular/common';
  5. import PerfectScrollbar from 'perfect-scrollbar';
  6. import ResizeObserver from 'resize-observer-polyfill';
  7. /**
  8. * @fileoverview added by tsickle
  9. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  10. */
  11. /** @type {?} */
  12. var PERFECT_SCROLLBAR_CONFIG = new InjectionToken('PERFECT_SCROLLBAR_CONFIG');
  13. var Geometry = /** @class */ (function () {
  14. function Geometry(x, y, w, h) {
  15. this.x = x;
  16. this.y = y;
  17. this.w = w;
  18. this.h = h;
  19. }
  20. return Geometry;
  21. }());
  22. var Position = /** @class */ (function () {
  23. function Position(x, y) {
  24. this.x = x;
  25. this.y = y;
  26. }
  27. return Position;
  28. }());
  29. /** @type {?} */
  30. var PerfectScrollbarEvents = [
  31. 'psScrollY',
  32. 'psScrollX',
  33. 'psScrollUp',
  34. 'psScrollDown',
  35. 'psScrollLeft',
  36. 'psScrollRight',
  37. 'psYReachEnd',
  38. 'psYReachStart',
  39. 'psXReachEnd',
  40. 'psXReachStart'
  41. ];
  42. var PerfectScrollbarConfig = /** @class */ (function () {
  43. function PerfectScrollbarConfig(config) {
  44. if (config === void 0) { config = {}; }
  45. this.assign(config);
  46. }
  47. /**
  48. * @param {?=} config
  49. * @return {?}
  50. */
  51. PerfectScrollbarConfig.prototype.assign = /**
  52. * @param {?=} config
  53. * @return {?}
  54. */
  55. function (config) {
  56. if (config === void 0) { config = {}; }
  57. for (var key in config) {
  58. this[(/** @type {?} */ (key))] = config[(/** @type {?} */ (key))];
  59. }
  60. };
  61. return PerfectScrollbarConfig;
  62. }());
  63. /**
  64. * @fileoverview added by tsickle
  65. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  66. */
  67. var PerfectScrollbarDirective = /** @class */ (function () {
  68. function PerfectScrollbarDirective(zone, differs, elementRef, platformId, defaults) {
  69. this.zone = zone;
  70. this.differs = differs;
  71. this.elementRef = elementRef;
  72. this.platformId = platformId;
  73. this.defaults = defaults;
  74. this.instance = null;
  75. this.ro = null;
  76. this.timeout = null;
  77. this.animation = null;
  78. this.configDiff = null;
  79. this.ngDestroy = new Subject();
  80. this.disabled = false;
  81. this.psScrollY = new EventEmitter();
  82. this.psScrollX = new EventEmitter();
  83. this.psScrollUp = new EventEmitter();
  84. this.psScrollDown = new EventEmitter();
  85. this.psScrollLeft = new EventEmitter();
  86. this.psScrollRight = new EventEmitter();
  87. this.psYReachEnd = new EventEmitter();
  88. this.psYReachStart = new EventEmitter();
  89. this.psXReachEnd = new EventEmitter();
  90. this.psXReachStart = new EventEmitter();
  91. }
  92. /**
  93. * @return {?}
  94. */
  95. PerfectScrollbarDirective.prototype.ngOnInit = /**
  96. * @return {?}
  97. */
  98. function () {
  99. var _this = this;
  100. if (!this.disabled && isPlatformBrowser(this.platformId)) {
  101. /** @type {?} */
  102. var config_1 = new PerfectScrollbarConfig(this.defaults);
  103. config_1.assign(this.config); // Custom configuration
  104. this.zone.runOutsideAngular((/**
  105. * @return {?}
  106. */
  107. function () {
  108. _this.instance = new PerfectScrollbar(_this.elementRef.nativeElement, config_1);
  109. }));
  110. if (!this.configDiff) {
  111. this.configDiff = this.differs.find(this.config || {}).create();
  112. this.configDiff.diff(this.config || {});
  113. }
  114. this.zone.runOutsideAngular((/**
  115. * @return {?}
  116. */
  117. function () {
  118. _this.ro = new ResizeObserver((/**
  119. * @return {?}
  120. */
  121. function () {
  122. _this.update();
  123. }));
  124. if (_this.elementRef.nativeElement.children[0]) {
  125. _this.ro.observe(_this.elementRef.nativeElement.children[0]);
  126. }
  127. _this.ro.observe(_this.elementRef.nativeElement);
  128. }));
  129. this.zone.runOutsideAngular((/**
  130. * @return {?}
  131. */
  132. function () {
  133. PerfectScrollbarEvents.forEach((/**
  134. * @param {?} eventName
  135. * @return {?}
  136. */
  137. function (eventName) {
  138. /** @type {?} */
  139. var eventType = eventName.replace(/([A-Z])/g, (/**
  140. * @param {?} c
  141. * @return {?}
  142. */
  143. function (c) { return "-" + c.toLowerCase(); }));
  144. fromEvent(_this.elementRef.nativeElement, eventType)
  145. .pipe(auditTime(20), takeUntil(_this.ngDestroy))
  146. .subscribe((/**
  147. * @param {?} event
  148. * @return {?}
  149. */
  150. function (event) {
  151. _this[eventName].emit(event);
  152. }));
  153. }));
  154. }));
  155. }
  156. };
  157. /**
  158. * @return {?}
  159. */
  160. PerfectScrollbarDirective.prototype.ngOnDestroy = /**
  161. * @return {?}
  162. */
  163. function () {
  164. var _this = this;
  165. if (isPlatformBrowser(this.platformId)) {
  166. this.ngDestroy.next();
  167. this.ngDestroy.complete();
  168. if (this.ro) {
  169. this.ro.disconnect();
  170. }
  171. if (this.timeout && typeof window !== 'undefined') {
  172. window.clearTimeout(this.timeout);
  173. }
  174. this.zone.runOutsideAngular((/**
  175. * @return {?}
  176. */
  177. function () {
  178. if (_this.instance) {
  179. _this.instance.destroy();
  180. }
  181. }));
  182. this.instance = null;
  183. }
  184. };
  185. /**
  186. * @return {?}
  187. */
  188. PerfectScrollbarDirective.prototype.ngDoCheck = /**
  189. * @return {?}
  190. */
  191. function () {
  192. if (!this.disabled && this.configDiff && isPlatformBrowser(this.platformId)) {
  193. /** @type {?} */
  194. var changes = this.configDiff.diff(this.config || {});
  195. if (changes) {
  196. this.ngOnDestroy();
  197. this.ngOnInit();
  198. }
  199. }
  200. };
  201. /**
  202. * @param {?} changes
  203. * @return {?}
  204. */
  205. PerfectScrollbarDirective.prototype.ngOnChanges = /**
  206. * @param {?} changes
  207. * @return {?}
  208. */
  209. function (changes) {
  210. if (changes['disabled'] && !changes['disabled'].isFirstChange() && isPlatformBrowser(this.platformId)) {
  211. if (changes['disabled'].currentValue !== changes['disabled'].previousValue) {
  212. if (changes['disabled'].currentValue === true) {
  213. this.ngOnDestroy();
  214. }
  215. else if (changes['disabled'].currentValue === false) {
  216. this.ngOnInit();
  217. }
  218. }
  219. }
  220. };
  221. /**
  222. * @return {?}
  223. */
  224. PerfectScrollbarDirective.prototype.ps = /**
  225. * @return {?}
  226. */
  227. function () {
  228. return this.instance;
  229. };
  230. /**
  231. * @return {?}
  232. */
  233. PerfectScrollbarDirective.prototype.update = /**
  234. * @return {?}
  235. */
  236. function () {
  237. var _this = this;
  238. if (typeof window !== 'undefined') {
  239. if (this.timeout) {
  240. window.clearTimeout(this.timeout);
  241. }
  242. this.timeout = window.setTimeout((/**
  243. * @return {?}
  244. */
  245. function () {
  246. if (!_this.disabled && _this.configDiff) {
  247. try {
  248. _this.zone.runOutsideAngular((/**
  249. * @return {?}
  250. */
  251. function () {
  252. if (_this.instance) {
  253. _this.instance.update();
  254. }
  255. }));
  256. }
  257. catch (error) {
  258. // Update can be finished after destroy so catch errors
  259. }
  260. }
  261. }), 0);
  262. }
  263. };
  264. /**
  265. * @param {?=} prefix
  266. * @return {?}
  267. */
  268. PerfectScrollbarDirective.prototype.geometry = /**
  269. * @param {?=} prefix
  270. * @return {?}
  271. */
  272. function (prefix) {
  273. if (prefix === void 0) { prefix = 'scroll'; }
  274. return new Geometry(this.elementRef.nativeElement[prefix + 'Left'], this.elementRef.nativeElement[prefix + 'Top'], this.elementRef.nativeElement[prefix + 'Width'], this.elementRef.nativeElement[prefix + 'Height']);
  275. };
  276. /**
  277. * @param {?=} absolute
  278. * @return {?}
  279. */
  280. PerfectScrollbarDirective.prototype.position = /**
  281. * @param {?=} absolute
  282. * @return {?}
  283. */
  284. function (absolute) {
  285. if (absolute === void 0) { absolute = false; }
  286. if (!absolute && this.instance) {
  287. return new Position(this.instance.reach.x || 0, this.instance.reach.y || 0);
  288. }
  289. else {
  290. return new Position(this.elementRef.nativeElement.scrollLeft, this.elementRef.nativeElement.scrollTop);
  291. }
  292. };
  293. /**
  294. * @param {?=} direction
  295. * @return {?}
  296. */
  297. PerfectScrollbarDirective.prototype.scrollable = /**
  298. * @param {?=} direction
  299. * @return {?}
  300. */
  301. function (direction) {
  302. if (direction === void 0) { direction = 'any'; }
  303. /** @type {?} */
  304. var element = this.elementRef.nativeElement;
  305. if (direction === 'any') {
  306. return element.classList.contains('ps--active-x') ||
  307. element.classList.contains('ps--active-y');
  308. }
  309. else if (direction === 'both') {
  310. return element.classList.contains('ps--active-x') &&
  311. element.classList.contains('ps--active-y');
  312. }
  313. else {
  314. return element.classList.contains('ps--active-' + direction);
  315. }
  316. };
  317. /**
  318. * @param {?} x
  319. * @param {?=} y
  320. * @param {?=} speed
  321. * @return {?}
  322. */
  323. PerfectScrollbarDirective.prototype.scrollTo = /**
  324. * @param {?} x
  325. * @param {?=} y
  326. * @param {?=} speed
  327. * @return {?}
  328. */
  329. function (x, y, speed) {
  330. if (!this.disabled) {
  331. if (y == null && speed == null) {
  332. this.animateScrolling('scrollTop', x, speed);
  333. }
  334. else {
  335. if (x != null) {
  336. this.animateScrolling('scrollLeft', x, speed);
  337. }
  338. if (y != null) {
  339. this.animateScrolling('scrollTop', y, speed);
  340. }
  341. }
  342. }
  343. };
  344. /**
  345. * @param {?} x
  346. * @param {?=} speed
  347. * @return {?}
  348. */
  349. PerfectScrollbarDirective.prototype.scrollToX = /**
  350. * @param {?} x
  351. * @param {?=} speed
  352. * @return {?}
  353. */
  354. function (x, speed) {
  355. this.animateScrolling('scrollLeft', x, speed);
  356. };
  357. /**
  358. * @param {?} y
  359. * @param {?=} speed
  360. * @return {?}
  361. */
  362. PerfectScrollbarDirective.prototype.scrollToY = /**
  363. * @param {?} y
  364. * @param {?=} speed
  365. * @return {?}
  366. */
  367. function (y, speed) {
  368. this.animateScrolling('scrollTop', y, speed);
  369. };
  370. /**
  371. * @param {?=} offset
  372. * @param {?=} speed
  373. * @return {?}
  374. */
  375. PerfectScrollbarDirective.prototype.scrollToTop = /**
  376. * @param {?=} offset
  377. * @param {?=} speed
  378. * @return {?}
  379. */
  380. function (offset, speed) {
  381. this.animateScrolling('scrollTop', (offset || 0), speed);
  382. };
  383. /**
  384. * @param {?=} offset
  385. * @param {?=} speed
  386. * @return {?}
  387. */
  388. PerfectScrollbarDirective.prototype.scrollToLeft = /**
  389. * @param {?=} offset
  390. * @param {?=} speed
  391. * @return {?}
  392. */
  393. function (offset, speed) {
  394. this.animateScrolling('scrollLeft', (offset || 0), speed);
  395. };
  396. /**
  397. * @param {?=} offset
  398. * @param {?=} speed
  399. * @return {?}
  400. */
  401. PerfectScrollbarDirective.prototype.scrollToRight = /**
  402. * @param {?=} offset
  403. * @param {?=} speed
  404. * @return {?}
  405. */
  406. function (offset, speed) {
  407. /** @type {?} */
  408. var left = this.elementRef.nativeElement.scrollWidth -
  409. this.elementRef.nativeElement.clientWidth;
  410. this.animateScrolling('scrollLeft', left - (offset || 0), speed);
  411. };
  412. /**
  413. * @param {?=} offset
  414. * @param {?=} speed
  415. * @return {?}
  416. */
  417. PerfectScrollbarDirective.prototype.scrollToBottom = /**
  418. * @param {?=} offset
  419. * @param {?=} speed
  420. * @return {?}
  421. */
  422. function (offset, speed) {
  423. /** @type {?} */
  424. var top = this.elementRef.nativeElement.scrollHeight -
  425. this.elementRef.nativeElement.clientHeight;
  426. this.animateScrolling('scrollTop', top - (offset || 0), speed);
  427. };
  428. /**
  429. * @param {?} qs
  430. * @param {?=} offset
  431. * @param {?=} speed
  432. * @return {?}
  433. */
  434. PerfectScrollbarDirective.prototype.scrollToElement = /**
  435. * @param {?} qs
  436. * @param {?=} offset
  437. * @param {?=} speed
  438. * @return {?}
  439. */
  440. function (qs, offset, speed) {
  441. /** @type {?} */
  442. var element = this.elementRef.nativeElement.querySelector(qs);
  443. if (element) {
  444. /** @type {?} */
  445. var elementPos = element.getBoundingClientRect();
  446. /** @type {?} */
  447. var scrollerPos = this.elementRef.nativeElement.getBoundingClientRect();
  448. if (this.elementRef.nativeElement.classList.contains('ps--active-x')) {
  449. /** @type {?} */
  450. var currentPos = this.elementRef.nativeElement['scrollLeft'];
  451. /** @type {?} */
  452. var position = elementPos.left - scrollerPos.left + currentPos;
  453. this.animateScrolling('scrollLeft', position + (offset || 0), speed);
  454. }
  455. if (this.elementRef.nativeElement.classList.contains('ps--active-y')) {
  456. /** @type {?} */
  457. var currentPos = this.elementRef.nativeElement['scrollTop'];
  458. /** @type {?} */
  459. var position = elementPos.top - scrollerPos.top + currentPos;
  460. this.animateScrolling('scrollTop', position + (offset || 0), speed);
  461. }
  462. }
  463. };
  464. /**
  465. * @private
  466. * @param {?} target
  467. * @param {?} value
  468. * @param {?=} speed
  469. * @return {?}
  470. */
  471. PerfectScrollbarDirective.prototype.animateScrolling = /**
  472. * @private
  473. * @param {?} target
  474. * @param {?} value
  475. * @param {?=} speed
  476. * @return {?}
  477. */
  478. function (target, value, speed) {
  479. var _this = this;
  480. if (this.animation) {
  481. window.cancelAnimationFrame(this.animation);
  482. this.animation = null;
  483. }
  484. if (!speed || typeof window === 'undefined') {
  485. this.elementRef.nativeElement[target] = value;
  486. }
  487. else if (value !== this.elementRef.nativeElement[target]) {
  488. /** @type {?} */
  489. var newValue_1 = 0;
  490. /** @type {?} */
  491. var scrollCount_1 = 0;
  492. /** @type {?} */
  493. var oldTimestamp_1 = performance.now();
  494. /** @type {?} */
  495. var oldValue_1 = this.elementRef.nativeElement[target];
  496. /** @type {?} */
  497. var cosParameter_1 = (oldValue_1 - value) / 2;
  498. /** @type {?} */
  499. var step_1 = (/**
  500. * @param {?} newTimestamp
  501. * @return {?}
  502. */
  503. function (newTimestamp) {
  504. scrollCount_1 += Math.PI / (speed / (newTimestamp - oldTimestamp_1));
  505. newValue_1 = Math.round(value + cosParameter_1 + cosParameter_1 * Math.cos(scrollCount_1));
  506. // Only continue animation if scroll position has not changed
  507. if (_this.elementRef.nativeElement[target] === oldValue_1) {
  508. if (scrollCount_1 >= Math.PI) {
  509. _this.animateScrolling(target, value, 0);
  510. }
  511. else {
  512. _this.elementRef.nativeElement[target] = newValue_1;
  513. // On a zoomed out page the resulting offset may differ
  514. oldValue_1 = _this.elementRef.nativeElement[target];
  515. oldTimestamp_1 = newTimestamp;
  516. _this.animation = window.requestAnimationFrame(step_1);
  517. }
  518. }
  519. });
  520. window.requestAnimationFrame(step_1);
  521. }
  522. };
  523. PerfectScrollbarDirective.decorators = [
  524. { type: Directive, args: [{
  525. selector: '[perfectScrollbar]',
  526. exportAs: 'ngxPerfectScrollbar'
  527. },] }
  528. ];
  529. /** @nocollapse */
  530. PerfectScrollbarDirective.ctorParameters = function () { return [
  531. { type: NgZone },
  532. { type: KeyValueDiffers },
  533. { type: ElementRef },
  534. { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
  535. { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [PERFECT_SCROLLBAR_CONFIG,] }] }
  536. ]; };
  537. PerfectScrollbarDirective.propDecorators = {
  538. disabled: [{ type: Input }],
  539. config: [{ type: Input, args: ['perfectScrollbar',] }],
  540. psScrollY: [{ type: Output }],
  541. psScrollX: [{ type: Output }],
  542. psScrollUp: [{ type: Output }],
  543. psScrollDown: [{ type: Output }],
  544. psScrollLeft: [{ type: Output }],
  545. psScrollRight: [{ type: Output }],
  546. psYReachEnd: [{ type: Output }],
  547. psYReachStart: [{ type: Output }],
  548. psXReachEnd: [{ type: Output }],
  549. psXReachStart: [{ type: Output }]
  550. };
  551. return PerfectScrollbarDirective;
  552. }());
  553. /**
  554. * @fileoverview added by tsickle
  555. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  556. */
  557. var PerfectScrollbarComponent = /** @class */ (function () {
  558. function PerfectScrollbarComponent(zone, cdRef, platformId) {
  559. this.zone = zone;
  560. this.cdRef = cdRef;
  561. this.platformId = platformId;
  562. this.states = {};
  563. this.indicatorX = false;
  564. this.indicatorY = false;
  565. this.interaction = false;
  566. this.scrollPositionX = 0;
  567. this.scrollPositionY = 0;
  568. this.scrollDirectionX = 0;
  569. this.scrollDirectionY = 0;
  570. this.usePropagationX = false;
  571. this.usePropagationY = false;
  572. this.allowPropagationX = false;
  573. this.allowPropagationY = false;
  574. this.stateTimeout = null;
  575. this.ngDestroy = new Subject();
  576. this.stateUpdate = new Subject();
  577. this.disabled = false;
  578. this.usePSClass = true;
  579. this.autoPropagation = false;
  580. this.scrollIndicators = false;
  581. this.psScrollY = new EventEmitter();
  582. this.psScrollX = new EventEmitter();
  583. this.psScrollUp = new EventEmitter();
  584. this.psScrollDown = new EventEmitter();
  585. this.psScrollLeft = new EventEmitter();
  586. this.psScrollRight = new EventEmitter();
  587. this.psYReachEnd = new EventEmitter();
  588. this.psYReachStart = new EventEmitter();
  589. this.psXReachEnd = new EventEmitter();
  590. this.psXReachStart = new EventEmitter();
  591. }
  592. /**
  593. * @return {?}
  594. */
  595. PerfectScrollbarComponent.prototype.ngOnInit = /**
  596. * @return {?}
  597. */
  598. function () {
  599. var _this = this;
  600. if (isPlatformBrowser(this.platformId)) {
  601. this.stateUpdate
  602. .pipe(takeUntil(this.ngDestroy), distinctUntilChanged((/**
  603. * @param {?} a
  604. * @param {?} b
  605. * @return {?}
  606. */
  607. function (a, b) { return (a === b && !_this.stateTimeout); })))
  608. .subscribe((/**
  609. * @param {?} state
  610. * @return {?}
  611. */
  612. function (state) {
  613. if (_this.stateTimeout && typeof window !== 'undefined') {
  614. window.clearTimeout(_this.stateTimeout);
  615. _this.stateTimeout = null;
  616. }
  617. if (state === 'x' || state === 'y') {
  618. _this.interaction = false;
  619. if (state === 'x') {
  620. _this.indicatorX = false;
  621. _this.states.left = false;
  622. _this.states.right = false;
  623. if (_this.autoPropagation && _this.usePropagationX) {
  624. _this.allowPropagationX = false;
  625. }
  626. }
  627. else if (state === 'y') {
  628. _this.indicatorY = false;
  629. _this.states.top = false;
  630. _this.states.bottom = false;
  631. if (_this.autoPropagation && _this.usePropagationY) {
  632. _this.allowPropagationY = false;
  633. }
  634. }
  635. }
  636. else {
  637. if (state === 'left' || state === 'right') {
  638. _this.states.left = false;
  639. _this.states.right = false;
  640. _this.states[state] = true;
  641. if (_this.autoPropagation && _this.usePropagationX) {
  642. _this.indicatorX = true;
  643. }
  644. }
  645. else if (state === 'top' || state === 'bottom') {
  646. _this.states.top = false;
  647. _this.states.bottom = false;
  648. _this.states[state] = true;
  649. if (_this.autoPropagation && _this.usePropagationY) {
  650. _this.indicatorY = true;
  651. }
  652. }
  653. if (_this.autoPropagation && typeof window !== 'undefined') {
  654. _this.stateTimeout = window.setTimeout((/**
  655. * @return {?}
  656. */
  657. function () {
  658. _this.indicatorX = false;
  659. _this.indicatorY = false;
  660. _this.stateTimeout = null;
  661. if (_this.interaction && (_this.states.left || _this.states.right)) {
  662. _this.allowPropagationX = true;
  663. }
  664. if (_this.interaction && (_this.states.top || _this.states.bottom)) {
  665. _this.allowPropagationY = true;
  666. }
  667. _this.cdRef.markForCheck();
  668. }), 500);
  669. }
  670. }
  671. _this.cdRef.markForCheck();
  672. _this.cdRef.detectChanges();
  673. }));
  674. this.zone.runOutsideAngular((/**
  675. * @return {?}
  676. */
  677. function () {
  678. if (_this.directiveRef) {
  679. /** @type {?} */
  680. var element = _this.directiveRef.elementRef.nativeElement;
  681. fromEvent(element, 'wheel')
  682. .pipe(takeUntil(_this.ngDestroy))
  683. .subscribe((/**
  684. * @param {?} event
  685. * @return {?}
  686. */
  687. function (event) {
  688. if (!_this.disabled && _this.autoPropagation) {
  689. /** @type {?} */
  690. var scrollDeltaX = event.deltaX;
  691. /** @type {?} */
  692. var scrollDeltaY = event.deltaY;
  693. _this.checkPropagation(event, scrollDeltaX, scrollDeltaY);
  694. }
  695. }));
  696. fromEvent(element, 'touchmove')
  697. .pipe(takeUntil(_this.ngDestroy))
  698. .subscribe((/**
  699. * @param {?} event
  700. * @return {?}
  701. */
  702. function (event) {
  703. if (!_this.disabled && _this.autoPropagation) {
  704. /** @type {?} */
  705. var scrollPositionX = event.touches[0].clientX;
  706. /** @type {?} */
  707. var scrollPositionY = event.touches[0].clientY;
  708. /** @type {?} */
  709. var scrollDeltaX = scrollPositionX - _this.scrollPositionX;
  710. /** @type {?} */
  711. var scrollDeltaY = scrollPositionY - _this.scrollPositionY;
  712. _this.checkPropagation(event, scrollDeltaX, scrollDeltaY);
  713. _this.scrollPositionX = scrollPositionX;
  714. _this.scrollPositionY = scrollPositionY;
  715. }
  716. }));
  717. merge(fromEvent(element, 'ps-scroll-x')
  718. .pipe(mapTo('x')), fromEvent(element, 'ps-scroll-y')
  719. .pipe(mapTo('y')), fromEvent(element, 'ps-x-reach-end')
  720. .pipe(mapTo('right')), fromEvent(element, 'ps-y-reach-end')
  721. .pipe(mapTo('bottom')), fromEvent(element, 'ps-x-reach-start')
  722. .pipe(mapTo('left')), fromEvent(element, 'ps-y-reach-start')
  723. .pipe(mapTo('top')))
  724. .pipe(takeUntil(_this.ngDestroy))
  725. .subscribe((/**
  726. * @param {?} state
  727. * @return {?}
  728. */
  729. function (state) {
  730. if (!_this.disabled && (_this.autoPropagation || _this.scrollIndicators)) {
  731. _this.stateUpdate.next(state);
  732. }
  733. }));
  734. }
  735. }));
  736. window.setTimeout((/**
  737. * @return {?}
  738. */
  739. function () {
  740. PerfectScrollbarEvents.forEach((/**
  741. * @param {?} eventName
  742. * @return {?}
  743. */
  744. function (eventName) {
  745. if (_this.directiveRef) {
  746. _this.directiveRef[eventName] = _this[eventName];
  747. }
  748. }));
  749. }), 0);
  750. }
  751. };
  752. /**
  753. * @return {?}
  754. */
  755. PerfectScrollbarComponent.prototype.ngOnDestroy = /**
  756. * @return {?}
  757. */
  758. function () {
  759. if (isPlatformBrowser(this.platformId)) {
  760. this.ngDestroy.next();
  761. this.ngDestroy.unsubscribe();
  762. if (this.stateTimeout && typeof window !== 'undefined') {
  763. window.clearTimeout(this.stateTimeout);
  764. }
  765. }
  766. };
  767. /**
  768. * @return {?}
  769. */
  770. PerfectScrollbarComponent.prototype.ngDoCheck = /**
  771. * @return {?}
  772. */
  773. function () {
  774. if (isPlatformBrowser(this.platformId)) {
  775. if (!this.disabled && this.autoPropagation && this.directiveRef) {
  776. /** @type {?} */
  777. var element = this.directiveRef.elementRef.nativeElement;
  778. this.usePropagationX = element.classList.contains('ps--active-x');
  779. this.usePropagationY = element.classList.contains('ps--active-y');
  780. }
  781. }
  782. };
  783. /**
  784. * @private
  785. * @param {?} event
  786. * @param {?} deltaX
  787. * @param {?} deltaY
  788. * @return {?}
  789. */
  790. PerfectScrollbarComponent.prototype.checkPropagation = /**
  791. * @private
  792. * @param {?} event
  793. * @param {?} deltaX
  794. * @param {?} deltaY
  795. * @return {?}
  796. */
  797. function (event, deltaX, deltaY) {
  798. this.interaction = true;
  799. /** @type {?} */
  800. var scrollDirectionX = (deltaX < 0) ? -1 : 1;
  801. /** @type {?} */
  802. var scrollDirectionY = (deltaY < 0) ? -1 : 1;
  803. if ((this.usePropagationX && this.usePropagationY) ||
  804. (this.usePropagationX && (!this.allowPropagationX ||
  805. (this.scrollDirectionX !== scrollDirectionX))) ||
  806. (this.usePropagationY && (!this.allowPropagationY ||
  807. (this.scrollDirectionY !== scrollDirectionY)))) {
  808. event.preventDefault();
  809. event.stopPropagation();
  810. }
  811. if (!!deltaX) {
  812. this.scrollDirectionX = scrollDirectionX;
  813. }
  814. if (!!deltaY) {
  815. this.scrollDirectionY = scrollDirectionY;
  816. }
  817. this.stateUpdate.next('interaction');
  818. this.cdRef.detectChanges();
  819. };
  820. PerfectScrollbarComponent.decorators = [
  821. { type: Component, args: [{
  822. selector: 'perfect-scrollbar',
  823. exportAs: 'ngxPerfectScrollbar',
  824. template: "<div style=\"position: static;\" [class.ps]=\"usePSClass\" [perfectScrollbar]=\"config\" [disabled]=\"disabled\">\n <div class=\"ps-content\">\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"scrollIndicators\" class=\"ps-overlay\" [class.ps-at-top]=\"states.top\" [class.ps-at-left]=\"states.left\" [class.ps-at-right]=\"states.right\" [class.ps-at-bottom]=\"states.bottom\">\n <div class=\"ps-indicator-top\" [class.ps-indicator-show]=\"indicatorY && interaction\"></div>\n <div class=\"ps-indicator-left\" [class.ps-indicator-show]=\"indicatorX && interaction\"></div>\n <div class=\"ps-indicator-right\" [class.ps-indicator-show]=\"indicatorX && interaction\"></div>\n <div class=\"ps-indicator-bottom\" [class.ps-indicator-show]=\"indicatorY && interaction\"></div>\n </div>\n</div>\n",
  825. encapsulation: ViewEncapsulation.None,
  826. styles: ["/*\n TODO: Remove important flags after this bug if fixed:\n https://github.com/angular/flex-layout/issues/381\n*/\n\nperfect-scrollbar {\n position: relative;\n\n display: block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n}\n\nperfect-scrollbar[hidden] {\n display: none;\n}\n\nperfect-scrollbar[fxflex] {\n display: flex;\n flex-direction: column;\n height: auto;\n min-width: 0;\n min-height: 0;\n\n -webkit-box-direction: column;\n -webkit-box-orient: column;\n}\n\nperfect-scrollbar[fxflex] > .ps {\n -ms-flex: 1 1 auto;\n\n flex: 1 1 auto;\n width: auto;\n height: auto;\n min-width: 0;\n min-height: 0;\n\n -webkit-box-flex: 1;\n}\n\nperfect-scrollbar[fxlayout] > .ps,\nperfect-scrollbar[fxlayout] > .ps > .ps-content {\n display: flex;\n\n -ms-flex: 1 1 auto;\n\n flex: 1 1 auto;\n flex-direction: inherit;\n align-items: inherit;\n align-content: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n\n -webkit-box-align: inherit;\n -webkit-box-direction: inherit;\n -webkit-box-flex: 1;\n -webkit-box-orient: inherit;\n -webkit-box-pack: inherit;\n}\n\nperfect-scrollbar[fxlayout='row'] > .ps,\nperfect-scrollbar[fxlayout='row'] > .ps > .ps-content, {\n flex-direction: row !important;\n\n -webkit-box-direction: row !important;\n -webkit-box-orient: row !important;\n}\n\nperfect-scrollbar[fxlayout='column'] > .ps,\nperfect-scrollbar[fxlayout='column'] > .ps > .ps-content {\n flex-direction: column !important;\n\n -webkit-box-direction: column !important;\n -webkit-box-orient: column !important;\n}\n\nperfect-scrollbar > .ps {\n position: static;\n\n display: block;\n width: inherit;\n height: inherit;\n max-width: inherit;\n max-height: inherit;\n}\n\nperfect-scrollbar > .ps textarea {\n -ms-overflow-style: scrollbar;\n}\n\nperfect-scrollbar > .ps > .ps-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n display: block;\n overflow: hidden;\n\n pointer-events: none;\n}\n\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-top,\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-left,\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-right,\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-bottom {\n position: absolute;\n\n opacity: 0;\n\n transition: opacity 300ms ease-in-out;\n}\n\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-top,\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-bottom {\n left: 0;\n\n min-width: 100%;\n min-height: 24px;\n}\n\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-left,\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-right {\n top: 0;\n\n min-width: 24px;\n min-height: 100%;\n}\n\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-top {\n top: 0;\n}\n\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-left {\n left: 0;\n}\n\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-right {\n right: 0;\n}\n\nperfect-scrollbar > .ps > .ps-overlay .ps-indicator-bottom {\n bottom: 0;\n}\n\nperfect-scrollbar > .ps.ps--active-y > .ps__rail-y {\n top: 0 !important;\n right: 0 !important;\n left: auto !important;\n\n width: 10px;\n\n cursor: default;\n\n transition:\n width 200ms linear,\n opacity 200ms linear,\n background-color 200ms linear;\n}\n\nperfect-scrollbar > .ps.ps--active-y > .ps__rail-y:hover,\nperfect-scrollbar > .ps.ps--active-y > .ps__rail-y.ps--clicking {\n width: 15px;\n}\n\nperfect-scrollbar > .ps.ps--active-x > .ps__rail-x {\n top: auto !important;\n bottom: 0 !important;\n left: 0 !important;\n\n height: 10px;\n\n cursor: default;\n\n transition:\n height 200ms linear,\n opacity 200ms linear,\n background-color 200ms linear;\n}\n\nperfect-scrollbar > .ps.ps--active-x > .ps__rail-x:hover,\nperfect-scrollbar > .ps.ps--active-x > .ps__rail-x.ps--clicking {\n height: 15px;\n}\n\nperfect-scrollbar > .ps.ps--active-x.ps--active-y > .ps__rail-y {\n margin: 0 0 10px;\n}\n\nperfect-scrollbar > .ps.ps--active-x.ps--active-y > .ps__rail-x {\n margin: 0 10px 0 0;\n}\n\nperfect-scrollbar > .ps.ps--scrolling-y > .ps__rail-y,\nperfect-scrollbar > .ps.ps--scrolling-x > .ps__rail-x {\n opacity: 0.9;\n\n background-color: #eee;\n}\n\nperfect-scrollbar.ps-show-always > .ps.ps--active-y > .ps__rail-y,\nperfect-scrollbar.ps-show-always > .ps.ps--active-x > .ps__rail-x {\n opacity: 0.6;\n}\n\nperfect-scrollbar.ps-show-active > .ps.ps--active-y > .ps-overlay:not(.ps-at-top) .ps-indicator-top {\n opacity: 1;\n\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);\n}\n\nperfect-scrollbar.ps-show-active > .ps.ps--active-y > .ps-overlay:not(.ps-at-bottom) .ps-indicator-bottom {\n opacity: 1;\n\n background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);\n}\n\nperfect-scrollbar.ps-show-active > .ps.ps--active-x > .ps-overlay:not(.ps-at-left) .ps-indicator-left {\n opacity: 1;\n\n background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);\n}\n\nperfect-scrollbar.ps-show-active > .ps.ps--active-x > .ps-overlay:not(.ps-at-right) .ps-indicator-right {\n opacity: 1;\n\n background: linear-gradient(to left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);\n}\n\nperfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-y > .ps-overlay.ps-at-top .ps-indicator-top {\n background: linear-gradient(to bottom, rgba(170, 170, 170, 0.5) 0%, rgba(170, 170, 170, 0) 100%);\n}\n\nperfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-y > .ps-overlay.ps-at-bottom .ps-indicator-bottom {\n background: linear-gradient(to top, rgba(170, 170, 170, 0.5) 0%, rgba(170, 170, 170, 0) 100%);\n}\n\nperfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-x > .ps-overlay.ps-at-left .ps-indicator-left {\n background: linear-gradient(to right, rgba(170, 170, 170, 0.5) 0%, rgba(170, 170, 170, 0) 100%);\n}\n\nperfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-x > .ps-overlay.ps-at-right .ps-indicator-right {\n background: linear-gradient(to left, rgba(170, 170, 170, 0.5) 0%, rgba(170, 170, 170, 0) 100%);\n}\n\nperfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-y > .ps-overlay.ps-at-top .ps-indicator-top.ps-indicator-show,\nperfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-y > .ps-overlay.ps-at-bottom .ps-indicator-bottom.ps-indicator-show,\nperfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-x > .ps-overlay.ps-at-left .ps-indicator-left.ps-indicator-show,\nperfect-scrollbar.ps-show-active.ps-show-limits > .ps.ps--active-x > .ps-overlay.ps-at-right .ps-indicator-right.ps-indicator-show {\n opacity: 1;\n}\n", "/*\n * Container style\n */\n.ps {\n overflow: hidden !important;\n overflow-anchor: none;\n -ms-overflow-style: none;\n touch-action: auto;\n -ms-touch-action: auto;\n}\n\n/*\n * Scrollbar rail styles\n */\n.ps__rail-x {\n display: none;\n opacity: 0;\n transition: background-color .2s linear, opacity .2s linear;\n -webkit-transition: background-color .2s linear, opacity .2s linear;\n height: 15px;\n /* there must be 'bottom' or 'top' for ps__rail-x */\n bottom: 0px;\n /* please don't change 'position' */\n position: absolute;\n}\n\n.ps__rail-y {\n display: none;\n opacity: 0;\n transition: background-color .2s linear, opacity .2s linear;\n -webkit-transition: background-color .2s linear, opacity .2s linear;\n width: 15px;\n /* there must be 'right' or 'left' for ps__rail-y */\n right: 0;\n /* please don't change 'position' */\n position: absolute;\n}\n\n.ps--active-x > .ps__rail-x,\n.ps--active-y > .ps__rail-y {\n display: block;\n background-color: transparent;\n}\n\n.ps:hover > .ps__rail-x,\n.ps:hover > .ps__rail-y,\n.ps--focus > .ps__rail-x,\n.ps--focus > .ps__rail-y,\n.ps--scrolling-x > .ps__rail-x,\n.ps--scrolling-y > .ps__rail-y {\n opacity: 0.6;\n}\n\n.ps .ps__rail-x:hover,\n.ps .ps__rail-y:hover,\n.ps .ps__rail-x:focus,\n.ps .ps__rail-y:focus,\n.ps .ps__rail-x.ps--clicking,\n.ps .ps__rail-y.ps--clicking {\n background-color: #eee;\n opacity: 0.9;\n}\n\n/*\n * Scrollbar thumb styles\n */\n.ps__thumb-x {\n background-color: #aaa;\n border-radius: 6px;\n transition: background-color .2s linear, height .2s ease-in-out;\n -webkit-transition: background-color .2s linear, height .2s ease-in-out;\n height: 6px;\n /* there must be 'bottom' for ps__thumb-x */\n bottom: 2px;\n /* please don't change 'position' */\n position: absolute;\n}\n\n.ps__thumb-y {\n background-color: #aaa;\n border-radius: 6px;\n transition: background-color .2s linear, width .2s ease-in-out;\n -webkit-transition: background-color .2s linear, width .2s ease-in-out;\n width: 6px;\n /* there must be 'right' for ps__thumb-y */\n right: 2px;\n /* please don't change 'position' */\n position: absolute;\n}\n\n.ps__rail-x:hover > .ps__thumb-x,\n.ps__rail-x:focus > .ps__thumb-x,\n.ps__rail-x.ps--clicking .ps__thumb-x {\n background-color: #999;\n height: 11px;\n}\n\n.ps__rail-y:hover > .ps__thumb-y,\n.ps__rail-y:focus > .ps__thumb-y,\n.ps__rail-y.ps--clicking .ps__thumb-y {\n background-color: #999;\n width: 11px;\n}\n\n/* MS supports */\n@supports (-ms-overflow-style: none) {\n .ps {\n overflow: auto !important;\n }\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .ps {\n overflow: auto !important;\n }\n}\n"]
  827. }] }
  828. ];
  829. /** @nocollapse */
  830. PerfectScrollbarComponent.ctorParameters = function () { return [
  831. { type: NgZone },
  832. { type: ChangeDetectorRef },
  833. { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
  834. ]; };
  835. PerfectScrollbarComponent.propDecorators = {
  836. disabled: [{ type: Input }],
  837. usePSClass: [{ type: Input }],
  838. autoPropagation: [{ type: HostBinding, args: ['class.ps-show-limits',] }, { type: Input }],
  839. scrollIndicators: [{ type: HostBinding, args: ['class.ps-show-active',] }, { type: Input }],
  840. config: [{ type: Input }],
  841. psScrollY: [{ type: Output }],
  842. psScrollX: [{ type: Output }],
  843. psScrollUp: [{ type: Output }],
  844. psScrollDown: [{ type: Output }],
  845. psScrollLeft: [{ type: Output }],
  846. psScrollRight: [{ type: Output }],
  847. psYReachEnd: [{ type: Output }],
  848. psYReachStart: [{ type: Output }],
  849. psXReachEnd: [{ type: Output }],
  850. psXReachStart: [{ type: Output }],
  851. directiveRef: [{ type: ViewChild, args: [PerfectScrollbarDirective, { static: true },] }]
  852. };
  853. return PerfectScrollbarComponent;
  854. }());
  855. /**
  856. * @fileoverview added by tsickle
  857. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  858. */
  859. var PerfectScrollbarModule = /** @class */ (function () {
  860. function PerfectScrollbarModule() {
  861. }
  862. PerfectScrollbarModule.decorators = [
  863. { type: NgModule, args: [{
  864. imports: [CommonModule],
  865. declarations: [PerfectScrollbarComponent, PerfectScrollbarDirective],
  866. exports: [CommonModule, PerfectScrollbarComponent, PerfectScrollbarDirective]
  867. },] }
  868. ];
  869. return PerfectScrollbarModule;
  870. }());
  871. /**
  872. * @fileoverview added by tsickle
  873. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  874. */
  875. /**
  876. * @fileoverview added by tsickle
  877. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  878. */
  879. export { Geometry, PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarComponent, PerfectScrollbarConfig, PerfectScrollbarDirective, PerfectScrollbarModule, Position };
  880. //# sourceMappingURL=ngx-perfect-scrollbar.es5.js.map