/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import PerfectScrollbar from 'perfect-scrollbar'; import ResizeObserver from 'resize-observer-polyfill'; import { Subject, fromEvent } from 'rxjs'; import { auditTime, takeUntil } from 'rxjs/operators'; import { PLATFORM_ID } from '@angular/core'; import { isPlatformBrowser } from '@angular/common'; import { NgZone, Inject, Optional, ElementRef, Directive, Input, Output, EventEmitter, KeyValueDiffers } from '@angular/core'; import { Geometry, Position } from './perfect-scrollbar.interfaces'; import { PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfig, PerfectScrollbarEvents } from './perfect-scrollbar.interfaces'; var PerfectScrollbarDirective = /** @class */ (function () { function PerfectScrollbarDirective(zone, differs, elementRef, platformId, defaults) { this.zone = zone; this.differs = differs; this.elementRef = elementRef; this.platformId = platformId; this.defaults = defaults; this.instance = null; this.ro = null; this.timeout = null; this.animation = null; this.configDiff = null; this.ngDestroy = new Subject(); this.disabled = false; this.psScrollY = new EventEmitter(); this.psScrollX = new EventEmitter(); this.psScrollUp = new EventEmitter(); this.psScrollDown = new EventEmitter(); this.psScrollLeft = new EventEmitter(); this.psScrollRight = new EventEmitter(); this.psYReachEnd = new EventEmitter(); this.psYReachStart = new EventEmitter(); this.psXReachEnd = new EventEmitter(); this.psXReachStart = new EventEmitter(); } /** * @return {?} */ PerfectScrollbarDirective.prototype.ngOnInit = /** * @return {?} */ function () { var _this = this; if (!this.disabled && isPlatformBrowser(this.platformId)) { /** @type {?} */ var config_1 = new PerfectScrollbarConfig(this.defaults); config_1.assign(this.config); // Custom configuration this.zone.runOutsideAngular((/** * @return {?} */ function () { _this.instance = new PerfectScrollbar(_this.elementRef.nativeElement, config_1); })); if (!this.configDiff) { this.configDiff = this.differs.find(this.config || {}).create(); this.configDiff.diff(this.config || {}); } this.zone.runOutsideAngular((/** * @return {?} */ function () { _this.ro = new ResizeObserver((/** * @return {?} */ function () { _this.update(); })); if (_this.elementRef.nativeElement.children[0]) { _this.ro.observe(_this.elementRef.nativeElement.children[0]); } _this.ro.observe(_this.elementRef.nativeElement); })); this.zone.runOutsideAngular((/** * @return {?} */ function () { PerfectScrollbarEvents.forEach((/** * @param {?} eventName * @return {?} */ function (eventName) { /** @type {?} */ var eventType = eventName.replace(/([A-Z])/g, (/** * @param {?} c * @return {?} */ function (c) { return "-" + c.toLowerCase(); })); fromEvent(_this.elementRef.nativeElement, eventType) .pipe(auditTime(20), takeUntil(_this.ngDestroy)) .subscribe((/** * @param {?} event * @return {?} */ function (event) { _this[eventName].emit(event); })); })); })); } }; /** * @return {?} */ PerfectScrollbarDirective.prototype.ngOnDestroy = /** * @return {?} */ function () { var _this = this; if (isPlatformBrowser(this.platformId)) { this.ngDestroy.next(); this.ngDestroy.complete(); if (this.ro) { this.ro.disconnect(); } if (this.timeout && typeof window !== 'undefined') { window.clearTimeout(this.timeout); } this.zone.runOutsideAngular((/** * @return {?} */ function () { if (_this.instance) { _this.instance.destroy(); } })); this.instance = null; } }; /** * @return {?} */ PerfectScrollbarDirective.prototype.ngDoCheck = /** * @return {?} */ function () { if (!this.disabled && this.configDiff && isPlatformBrowser(this.platformId)) { /** @type {?} */ var changes = this.configDiff.diff(this.config || {}); if (changes) { this.ngOnDestroy(); this.ngOnInit(); } } }; /** * @param {?} changes * @return {?} */ PerfectScrollbarDirective.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if (changes['disabled'] && !changes['disabled'].isFirstChange() && isPlatformBrowser(this.platformId)) { if (changes['disabled'].currentValue !== changes['disabled'].previousValue) { if (changes['disabled'].currentValue === true) { this.ngOnDestroy(); } else if (changes['disabled'].currentValue === false) { this.ngOnInit(); } } } }; /** * @return {?} */ PerfectScrollbarDirective.prototype.ps = /** * @return {?} */ function () { return this.instance; }; /** * @return {?} */ PerfectScrollbarDirective.prototype.update = /** * @return {?} */ function () { var _this = this; if (typeof window !== 'undefined') { if (this.timeout) { window.clearTimeout(this.timeout); } this.timeout = window.setTimeout((/** * @return {?} */ function () { if (!_this.disabled && _this.configDiff) { try { _this.zone.runOutsideAngular((/** * @return {?} */ function () { if (_this.instance) { _this.instance.update(); } })); } catch (error) { // Update can be finished after destroy so catch errors } } }), 0); } }; /** * @param {?=} prefix * @return {?} */ PerfectScrollbarDirective.prototype.geometry = /** * @param {?=} prefix * @return {?} */ function (prefix) { if (prefix === void 0) { prefix = 'scroll'; } return new Geometry(this.elementRef.nativeElement[prefix + 'Left'], this.elementRef.nativeElement[prefix + 'Top'], this.elementRef.nativeElement[prefix + 'Width'], this.elementRef.nativeElement[prefix + 'Height']); }; /** * @param {?=} absolute * @return {?} */ PerfectScrollbarDirective.prototype.position = /** * @param {?=} absolute * @return {?} */ function (absolute) { if (absolute === void 0) { absolute = false; } if (!absolute && this.instance) { return new Position(this.instance.reach.x || 0, this.instance.reach.y || 0); } else { return new Position(this.elementRef.nativeElement.scrollLeft, this.elementRef.nativeElement.scrollTop); } }; /** * @param {?=} direction * @return {?} */ PerfectScrollbarDirective.prototype.scrollable = /** * @param {?=} direction * @return {?} */ function (direction) { if (direction === void 0) { direction = 'any'; } /** @type {?} */ var element = this.elementRef.nativeElement; if (direction === 'any') { return element.classList.contains('ps--active-x') || element.classList.contains('ps--active-y'); } else if (direction === 'both') { return element.classList.contains('ps--active-x') && element.classList.contains('ps--active-y'); } else { return element.classList.contains('ps--active-' + direction); } }; /** * @param {?} x * @param {?=} y * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.scrollTo = /** * @param {?} x * @param {?=} y * @param {?=} speed * @return {?} */ function (x, y, speed) { if (!this.disabled) { if (y == null && speed == null) { this.animateScrolling('scrollTop', x, speed); } else { if (x != null) { this.animateScrolling('scrollLeft', x, speed); } if (y != null) { this.animateScrolling('scrollTop', y, speed); } } } }; /** * @param {?} x * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.scrollToX = /** * @param {?} x * @param {?=} speed * @return {?} */ function (x, speed) { this.animateScrolling('scrollLeft', x, speed); }; /** * @param {?} y * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.scrollToY = /** * @param {?} y * @param {?=} speed * @return {?} */ function (y, speed) { this.animateScrolling('scrollTop', y, speed); }; /** * @param {?=} offset * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.scrollToTop = /** * @param {?=} offset * @param {?=} speed * @return {?} */ function (offset, speed) { this.animateScrolling('scrollTop', (offset || 0), speed); }; /** * @param {?=} offset * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.scrollToLeft = /** * @param {?=} offset * @param {?=} speed * @return {?} */ function (offset, speed) { this.animateScrolling('scrollLeft', (offset || 0), speed); }; /** * @param {?=} offset * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.scrollToRight = /** * @param {?=} offset * @param {?=} speed * @return {?} */ function (offset, speed) { /** @type {?} */ var left = this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.clientWidth; this.animateScrolling('scrollLeft', left - (offset || 0), speed); }; /** * @param {?=} offset * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.scrollToBottom = /** * @param {?=} offset * @param {?=} speed * @return {?} */ function (offset, speed) { /** @type {?} */ var top = this.elementRef.nativeElement.scrollHeight - this.elementRef.nativeElement.clientHeight; this.animateScrolling('scrollTop', top - (offset || 0), speed); }; /** * @param {?} qs * @param {?=} offset * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.scrollToElement = /** * @param {?} qs * @param {?=} offset * @param {?=} speed * @return {?} */ function (qs, offset, speed) { /** @type {?} */ var element = this.elementRef.nativeElement.querySelector(qs); if (element) { /** @type {?} */ var elementPos = element.getBoundingClientRect(); /** @type {?} */ var scrollerPos = this.elementRef.nativeElement.getBoundingClientRect(); if (this.elementRef.nativeElement.classList.contains('ps--active-x')) { /** @type {?} */ var currentPos = this.elementRef.nativeElement['scrollLeft']; /** @type {?} */ var position = elementPos.left - scrollerPos.left + currentPos; this.animateScrolling('scrollLeft', position + (offset || 0), speed); } if (this.elementRef.nativeElement.classList.contains('ps--active-y')) { /** @type {?} */ var currentPos = this.elementRef.nativeElement['scrollTop']; /** @type {?} */ var position = elementPos.top - scrollerPos.top + currentPos; this.animateScrolling('scrollTop', position + (offset || 0), speed); } } }; /** * @private * @param {?} target * @param {?} value * @param {?=} speed * @return {?} */ PerfectScrollbarDirective.prototype.animateScrolling = /** * @private * @param {?} target * @param {?} value * @param {?=} speed * @return {?} */ function (target, value, speed) { var _this = this; if (this.animation) { window.cancelAnimationFrame(this.animation); this.animation = null; } if (!speed || typeof window === 'undefined') { this.elementRef.nativeElement[target] = value; } else if (value !== this.elementRef.nativeElement[target]) { /** @type {?} */ var newValue_1 = 0; /** @type {?} */ var scrollCount_1 = 0; /** @type {?} */ var oldTimestamp_1 = performance.now(); /** @type {?} */ var oldValue_1 = this.elementRef.nativeElement[target]; /** @type {?} */ var cosParameter_1 = (oldValue_1 - value) / 2; /** @type {?} */ var step_1 = (/** * @param {?} newTimestamp * @return {?} */ function (newTimestamp) { scrollCount_1 += Math.PI / (speed / (newTimestamp - oldTimestamp_1)); newValue_1 = Math.round(value + cosParameter_1 + cosParameter_1 * Math.cos(scrollCount_1)); // Only continue animation if scroll position has not changed if (_this.elementRef.nativeElement[target] === oldValue_1) { if (scrollCount_1 >= Math.PI) { _this.animateScrolling(target, value, 0); } else { _this.elementRef.nativeElement[target] = newValue_1; // On a zoomed out page the resulting offset may differ oldValue_1 = _this.elementRef.nativeElement[target]; oldTimestamp_1 = newTimestamp; _this.animation = window.requestAnimationFrame(step_1); } } }); window.requestAnimationFrame(step_1); } }; PerfectScrollbarDirective.decorators = [ { type: Directive, args: [{ selector: '[perfectScrollbar]', exportAs: 'ngxPerfectScrollbar' },] } ]; /** @nocollapse */ PerfectScrollbarDirective.ctorParameters = function () { return [ { type: NgZone }, { type: KeyValueDiffers }, { type: ElementRef }, { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [PERFECT_SCROLLBAR_CONFIG,] }] } ]; }; PerfectScrollbarDirective.propDecorators = { disabled: [{ type: Input }], config: [{ type: Input, args: ['perfectScrollbar',] }], psScrollY: [{ type: Output }], psScrollX: [{ type: Output }], psScrollUp: [{ type: Output }], psScrollDown: [{ type: Output }], psScrollLeft: [{ type: Output }], psScrollRight: [{ type: Output }], psYReachEnd: [{ type: Output }], psYReachStart: [{ type: Output }], psXReachEnd: [{ type: Output }], psXReachStart: [{ type: Output }] }; return PerfectScrollbarDirective; }()); export { PerfectScrollbarDirective }; if (false) { /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.instance; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.ro; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.timeout; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.animation; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.configDiff; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.ngDestroy; /** @type {?} */ PerfectScrollbarDirective.prototype.disabled; /** @type {?} */ PerfectScrollbarDirective.prototype.config; /** @type {?} */ PerfectScrollbarDirective.prototype.psScrollY; /** @type {?} */ PerfectScrollbarDirective.prototype.psScrollX; /** @type {?} */ PerfectScrollbarDirective.prototype.psScrollUp; /** @type {?} */ PerfectScrollbarDirective.prototype.psScrollDown; /** @type {?} */ PerfectScrollbarDirective.prototype.psScrollLeft; /** @type {?} */ PerfectScrollbarDirective.prototype.psScrollRight; /** @type {?} */ PerfectScrollbarDirective.prototype.psYReachEnd; /** @type {?} */ PerfectScrollbarDirective.prototype.psYReachStart; /** @type {?} */ PerfectScrollbarDirective.prototype.psXReachEnd; /** @type {?} */ PerfectScrollbarDirective.prototype.psXReachStart; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.zone; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.differs; /** @type {?} */ PerfectScrollbarDirective.prototype.elementRef; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.platformId; /** * @type {?} * @private */ PerfectScrollbarDirective.prototype.defaults; } //# sourceMappingURL=perfect-scrollbar.directive.js.map