UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

565 lines (557 loc) 17.8 kB
import { __spread, __assign, __decorate, __metadata } from 'tslib'; import { Platform, PlatformModule } from '@angular/cdk/platform'; import { DOCUMENT, CommonModule } from '@angular/common'; import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Inject, NgZone, Renderer2, ViewChild, Input, Output, NgModule } from '@angular/core'; import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { NzScrollService, SCROLL_SERVICE_PROVIDER } from 'ng-zorro-antd/core/services'; import { shallowEqual, getStyleAsText, InputNumber } from 'ng-zorro-antd/core/util'; import { Subscription, ReplaySubject, Subject, merge, fromEvent } from 'rxjs'; import { takeUntil, map, auditTime } from 'rxjs/operators'; /** * @fileoverview added by tsickle * Generated from: respond-events.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @license * Copyright Alibaba.com All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ /** @enum {string} */ var AffixRespondEvents = { resize: "resize", scroll: "scroll", touchstart: "touchstart", touchmove: "touchmove", touchend: "touchend", pageshow: "pageshow", load: "LOAD", }; /** * @fileoverview added by tsickle * Generated from: utils.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @license * Copyright Alibaba.com All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ /** * @record */ function SimpleRect() { } if (false) { /** @type {?} */ SimpleRect.prototype.top; /** @type {?} */ SimpleRect.prototype.left; /** @type {?|undefined} */ SimpleRect.prototype.width; /** @type {?|undefined} */ SimpleRect.prototype.height; /** @type {?|undefined} */ SimpleRect.prototype.bottom; } /** * @param {?} target * @return {?} */ function isTargetWindow(target) { return typeof window !== 'undefined' && target === window; } /** * @param {?} target * @return {?} */ function getTargetRect(target) { return !isTargetWindow(target) ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } /** * @fileoverview added by tsickle * Generated from: affix.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var NZ_CONFIG_COMPONENT_NAME = 'affix'; /** @type {?} */ var NZ_AFFIX_CLS_PREFIX = 'ant-affix'; /** @type {?} */ var NZ_AFFIX_DEFAULT_SCROLL_TIME = 20; var NzAffixComponent = /** @class */ (function () { function NzAffixComponent(el, doc, nzConfigService, scrollSrv, ngZone, platform, renderer) { this.nzConfigService = nzConfigService; this.scrollSrv = scrollSrv; this.ngZone = ngZone; this.platform = platform; this.renderer = renderer; this.nzChange = new EventEmitter(); this.positionChangeSubscription = Subscription.EMPTY; this.offsetChanged$ = new ReplaySubject(1); this.destroy$ = new Subject(); // The wrapper would stay at the original position as a placeholder. this.placeholderNode = el.nativeElement; this.document = doc; } Object.defineProperty(NzAffixComponent.prototype, "target", { get: /** * @private * @return {?} */ function () { /** @type {?} */ var el = this.nzTarget; return (typeof el === 'string' ? this.document.querySelector(el) : el) || window; }, enumerable: true, configurable: true }); /** * @param {?} changes * @return {?} */ NzAffixComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { var nzOffsetBottom = changes.nzOffsetBottom, nzOffsetTop = changes.nzOffsetTop, nzTarget = changes.nzTarget; if (nzOffsetBottom || nzOffsetTop) { this.offsetChanged$.next(); } if (nzTarget) { this.registerListeners(); } }; /** * @return {?} */ NzAffixComponent.prototype.ngAfterViewInit = /** * @return {?} */ function () { this.registerListeners(); }; /** * @return {?} */ NzAffixComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.removeListeners(); }; /** * @private * @return {?} */ NzAffixComponent.prototype.registerListeners = /** * @private * @return {?} */ function () { var _this = this; this.removeListeners(); this.positionChangeSubscription = this.ngZone.runOutsideAngular((/** * @return {?} */ function () { return merge.apply(void 0, __spread(Object.keys(AffixRespondEvents).map((/** * @param {?} evName * @return {?} */ function (evName) { return fromEvent(_this.target, evName); })), [_this.offsetChanged$.pipe(takeUntil(_this.destroy$), map((/** * @return {?} */ function () { return ({}); })))])).pipe(auditTime(NZ_AFFIX_DEFAULT_SCROLL_TIME)) .subscribe((/** * @param {?} e * @return {?} */ function (e) { return _this.updatePosition((/** @type {?} */ (e))); })); })); this.timeout = setTimeout((/** * @return {?} */ function () { return _this.updatePosition((/** @type {?} */ ({}))); })); }; /** * @private * @return {?} */ NzAffixComponent.prototype.removeListeners = /** * @private * @return {?} */ function () { clearTimeout(this.timeout); this.positionChangeSubscription.unsubscribe(); this.destroy$.next(); this.destroy$.complete(); }; /** * @param {?} element * @param {?} target * @return {?} */ NzAffixComponent.prototype.getOffset = /** * @param {?} element * @param {?} target * @return {?} */ function (element, target) { /** @type {?} */ var elemRect = element.getBoundingClientRect(); /** @type {?} */ var targetRect = getTargetRect((/** @type {?} */ (target))); /** @type {?} */ var scrollTop = this.scrollSrv.getScroll(target, true); /** @type {?} */ var scrollLeft = this.scrollSrv.getScroll(target, false); /** @type {?} */ var docElem = this.document.body; /** @type {?} */ var clientTop = docElem.clientTop || 0; /** @type {?} */ var clientLeft = docElem.clientLeft || 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height }; }; /** * @private * @param {?} e * @param {?=} affixStyle * @return {?} */ NzAffixComponent.prototype.setAffixStyle = /** * @private * @param {?} e * @param {?=} affixStyle * @return {?} */ function (e, affixStyle) { /** @type {?} */ var originalAffixStyle = this.affixStyle; /** @type {?} */ var isWindow = this.target === window; if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) { return; } if (shallowEqual(originalAffixStyle, affixStyle)) { return; } /** @type {?} */ var fixed = !!affixStyle; /** @type {?} */ var wrapEl = this.fixedEl.nativeElement; this.renderer.setStyle(wrapEl, 'cssText', getStyleAsText(affixStyle)); this.affixStyle = affixStyle; if (fixed) { wrapEl.classList.add(NZ_AFFIX_CLS_PREFIX); } else { wrapEl.classList.remove(NZ_AFFIX_CLS_PREFIX); } if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) { this.nzChange.emit(fixed); } }; /** * @private * @param {?=} placeholderStyle * @return {?} */ NzAffixComponent.prototype.setPlaceholderStyle = /** * @private * @param {?=} placeholderStyle * @return {?} */ function (placeholderStyle) { /** @type {?} */ var originalPlaceholderStyle = this.placeholderStyle; if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) { return; } this.renderer.setStyle(this.placeholderNode, 'cssText', getStyleAsText(placeholderStyle)); this.placeholderStyle = placeholderStyle; }; /** * @private * @param {?} e * @return {?} */ NzAffixComponent.prototype.syncPlaceholderStyle = /** * @private * @param {?} e * @return {?} */ function (e) { if (!this.affixStyle) { return; } this.renderer.setStyle(this.placeholderNode, 'cssText', ''); this.placeholderStyle = undefined; /** @type {?} */ var styleObj = { width: this.placeholderNode.offsetWidth, height: this.fixedEl.nativeElement.offsetHeight }; this.setAffixStyle(e, __assign(__assign({}, this.affixStyle), styleObj)); this.setPlaceholderStyle(styleObj); }; /** * @param {?} e * @return {?} */ NzAffixComponent.prototype.updatePosition = /** * @param {?} e * @return {?} */ function (e) { if (!this.platform.isBrowser) { return; } /** @type {?} */ var targetNode = this.target; /** @type {?} */ var offsetTop = this.nzOffsetTop; /** @type {?} */ var scrollTop = this.scrollSrv.getScroll(targetNode, true); /** @type {?} */ var elemOffset = this.getOffset(this.placeholderNode, (/** @type {?} */ (targetNode))); /** @type {?} */ var fixedNode = this.fixedEl.nativeElement; /** @type {?} */ var elemSize = { width: fixedNode.offsetWidth, height: fixedNode.offsetHeight }; /** @type {?} */ var offsetMode = { top: false, bottom: false }; // Default to `offsetTop=0`. if (typeof offsetTop !== 'number' && typeof this.nzOffsetBottom !== 'number') { offsetMode.top = true; offsetTop = 0; } else { offsetMode.top = typeof offsetTop === 'number'; offsetMode.bottom = typeof this.nzOffsetBottom === 'number'; } /** @type {?} */ var targetRect = getTargetRect((/** @type {?} */ (targetNode))); /** @type {?} */ var targetInnerHeight = ((/** @type {?} */ (targetNode))).innerHeight || ((/** @type {?} */ (targetNode))).clientHeight; if (scrollTop >= elemOffset.top - ((/** @type {?} */ (offsetTop))) && offsetMode.top) { /** @type {?} */ var width = elemOffset.width; /** @type {?} */ var top_1 = targetRect.top + ((/** @type {?} */ (offsetTop))); this.setAffixStyle(e, { position: 'fixed', top: top_1, left: targetRect.left + elemOffset.left, width: width }); this.setPlaceholderStyle({ width: width, height: elemSize.height }); } else if (scrollTop <= elemOffset.top + elemSize.height + ((/** @type {?} */ (this.nzOffsetBottom))) - targetInnerHeight && offsetMode.bottom) { /** @type {?} */ var targetBottomOffset = targetNode === window ? 0 : window.innerHeight - (/** @type {?} */ (targetRect.bottom)); /** @type {?} */ var width = elemOffset.width; this.setAffixStyle(e, { position: 'fixed', bottom: targetBottomOffset + ((/** @type {?} */ (this.nzOffsetBottom))), left: targetRect.left + elemOffset.left, width: width }); this.setPlaceholderStyle({ width: width, height: elemOffset.height }); } else { if (e.type === AffixRespondEvents.resize && this.affixStyle && this.affixStyle.position === 'fixed' && this.placeholderNode.offsetWidth) { this.setAffixStyle(e, __assign(__assign({}, this.affixStyle), { width: this.placeholderNode.offsetWidth })); } else { this.setAffixStyle(e); } this.setPlaceholderStyle(); } if (e.type === 'resize') { this.syncPlaceholderStyle(e); } }; NzAffixComponent.decorators = [ { type: Component, args: [{ selector: 'nz-affix', exportAs: 'nzAffix', template: "\n <div #fixedEl>\n <ng-content></ng-content>\n </div>\n ", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None }] } ]; /** @nocollapse */ NzAffixComponent.ctorParameters = function () { return [ { type: ElementRef }, { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }, { type: NzConfigService }, { type: NzScrollService }, { type: NgZone }, { type: Platform }, { type: Renderer2 } ]; }; NzAffixComponent.propDecorators = { fixedEl: [{ type: ViewChild, args: ['fixedEl', { static: true },] }], nzTarget: [{ type: Input }], nzOffsetTop: [{ type: Input }], nzOffsetBottom: [{ type: Input }], nzChange: [{ type: Output }] }; __decorate([ WithConfig(NZ_CONFIG_COMPONENT_NAME, null), InputNumber(), __metadata("design:type", Object) ], NzAffixComponent.prototype, "nzOffsetTop", void 0); __decorate([ WithConfig(NZ_CONFIG_COMPONENT_NAME, null), InputNumber(), __metadata("design:type", Object) ], NzAffixComponent.prototype, "nzOffsetBottom", void 0); return NzAffixComponent; }()); if (false) { /** @type {?} */ NzAffixComponent.ngAcceptInputType_nzOffsetTop; /** @type {?} */ NzAffixComponent.ngAcceptInputType_nzOffsetBottom; /** * @type {?} * @private */ NzAffixComponent.prototype.fixedEl; /** @type {?} */ NzAffixComponent.prototype.nzTarget; /** @type {?} */ NzAffixComponent.prototype.nzOffsetTop; /** @type {?} */ NzAffixComponent.prototype.nzOffsetBottom; /** @type {?} */ NzAffixComponent.prototype.nzChange; /** * @type {?} * @private */ NzAffixComponent.prototype.placeholderNode; /** * @type {?} * @private */ NzAffixComponent.prototype.affixStyle; /** * @type {?} * @private */ NzAffixComponent.prototype.placeholderStyle; /** * @type {?} * @private */ NzAffixComponent.prototype.positionChangeSubscription; /** * @type {?} * @private */ NzAffixComponent.prototype.offsetChanged$; /** * @type {?} * @private */ NzAffixComponent.prototype.destroy$; /** * @type {?} * @private */ NzAffixComponent.prototype.timeout; /** * @type {?} * @private */ NzAffixComponent.prototype.document; /** @type {?} */ NzAffixComponent.prototype.nzConfigService; /** * @type {?} * @private */ NzAffixComponent.prototype.scrollSrv; /** * @type {?} * @private */ NzAffixComponent.prototype.ngZone; /** * @type {?} * @private */ NzAffixComponent.prototype.platform; /** * @type {?} * @private */ NzAffixComponent.prototype.renderer; } /** * @fileoverview added by tsickle * Generated from: affix.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzAffixModule = /** @class */ (function () { function NzAffixModule() { } NzAffixModule.decorators = [ { type: NgModule, args: [{ declarations: [NzAffixComponent], exports: [NzAffixComponent], imports: [CommonModule, PlatformModule], providers: [SCROLL_SERVICE_PROVIDER] },] } ]; return NzAffixModule; }()); /** * @fileoverview added by tsickle * Generated from: public-api.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * Generated from: ng-zorro-antd-affix.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzAffixComponent, NzAffixModule }; //# sourceMappingURL=ng-zorro-antd-affix.js.map