UNPKG

ng-zorro-antd

Version:

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

1,416 lines (1,408 loc) 53.6 kB
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Directive, ElementRef, Renderer2, Optional, Self, EventEmitter, ViewChild, ContentChild, TemplateRef, Output, NgZone, ChangeDetectorRef, ContentChildren, NgModule } from '@angular/core'; import { __decorate, __metadata } from 'tslib'; import { InputBoolean, pxToNumber, NzDomEventService, toNumber, PREFIX, NzUpdateHostClassService, NzConfigService, WithConfig, NzAddOnModule } from 'ng-zorro-antd/core'; import { Subject, of, merge, Subscription } from 'rxjs'; import { RouterLink, RouterLinkWithHref, NavigationEnd, Router } from '@angular/router'; import { ObserversModule } from '@angular/cdk/observers'; import { Platform, PlatformModule } from '@angular/cdk/platform'; import { CommonModule } from '@angular/common'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { Directionality } from '@angular/cdk/bidi'; import { takeUntil, finalize, startWith, filter } from 'rxjs/operators'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTabBodyComponent { constructor() { this.active = false; this.forceRender = false; } } NzTabBodyComponent.decorators = [ { type: Component, args: [{ selector: '[nz-tab-body]', exportAs: 'nzTabBody', preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"active || forceRender\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</ng-container>", host: { '[class.ant-tabs-tabpane-active]': 'active', '[class.ant-tabs-tabpane-inactive]': '!active' } }] } ]; NzTabBodyComponent.propDecorators = { content: [{ type: Input }], active: [{ type: Input }], forceRender: [{ type: Input }] }; if (false) { /** @type {?} */ NzTabBodyComponent.prototype.content; /** @type {?} */ NzTabBodyComponent.prototype.active; /** @type {?} */ NzTabBodyComponent.prototype.forceRender; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTabLabelDirective { /** * @param {?} elementRef * @param {?} renderer */ constructor(elementRef, renderer) { this.elementRef = elementRef; this.disabled = false; renderer.addClass(elementRef.nativeElement, 'ant-tabs-tab'); } /** * @return {?} */ getOffsetLeft() { return this.elementRef.nativeElement.offsetLeft; } /** * @return {?} */ getOffsetWidth() { return this.elementRef.nativeElement.offsetWidth; } /** * @return {?} */ getOffsetTop() { return this.elementRef.nativeElement.offsetTop; } /** * @return {?} */ getOffsetHeight() { return this.elementRef.nativeElement.offsetHeight; } } NzTabLabelDirective.decorators = [ { type: Directive, args: [{ selector: '[nz-tab-label]', exportAs: 'nzTabLabel', host: { '[class.ant-tabs-tab-disabled]': 'disabled' } },] } ]; /** @nocollapse */ NzTabLabelDirective.ctorParameters = () => [ { type: ElementRef }, { type: Renderer2 } ]; NzTabLabelDirective.propDecorators = { disabled: [{ type: Input }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabLabelDirective.prototype, "disabled", void 0); if (false) { /** @type {?} */ NzTabLabelDirective.prototype.disabled; /** @type {?} */ NzTabLabelDirective.prototype.elementRef; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * This component is for catching `routerLink` directive. */ class NzTabLinkDirective { /** * @param {?=} routerLink * @param {?=} routerLinkWithHref */ constructor(routerLink, routerLinkWithHref) { this.routerLink = routerLink; this.routerLinkWithHref = routerLinkWithHref; } } NzTabLinkDirective.decorators = [ { type: Directive, args: [{ selector: 'a[nz-tab-link]', exportAs: 'nzTabLink' },] } ]; /** @nocollapse */ NzTabLinkDirective.ctorParameters = () => [ { type: RouterLink, decorators: [{ type: Optional }, { type: Self }] }, { type: RouterLinkWithHref, decorators: [{ type: Optional }, { type: Self }] } ]; if (false) { /** @type {?} */ NzTabLinkDirective.prototype.routerLink; /** @type {?} */ NzTabLinkDirective.prototype.routerLinkWithHref; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Decorates the `ng-template` tags and reads out the template from it. */ class NzTabDirective { } NzTabDirective.decorators = [ { type: Directive, args: [{ selector: '[nz-tab]', exportAs: 'nzTab' },] } ]; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTabComponent { /** * @param {?} elementRef * @param {?} renderer */ constructor(elementRef, renderer) { this.elementRef = elementRef; this.renderer = renderer; this.position = null; this.origin = null; this.isActive = false; this.stateChanges = new Subject(); this.nzForceRender = false; this.nzDisabled = false; this.nzClick = new EventEmitter(); this.nzSelect = new EventEmitter(); this.nzDeselect = new EventEmitter(); this.renderer.addClass(elementRef.nativeElement, 'ant-tabs-tabpane'); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { if (changes.nzTitle || changes.nzForceRender || changes.nzDisabled) { this.stateChanges.next(); } } /** * @return {?} */ ngOnDestroy() { this.stateChanges.complete(); } } NzTabComponent.decorators = [ { type: Component, args: [{ selector: 'nz-tab', exportAs: 'nzTab', preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #titleTpl>\n <ng-content select=\"[nz-tab-link]\"></ng-content>\n</ng-template>\n<ng-template #bodyTpl>\n <ng-content></ng-content>\n</ng-template>" }] } ]; /** @nocollapse */ NzTabComponent.ctorParameters = () => [ { type: ElementRef }, { type: Renderer2 } ]; NzTabComponent.propDecorators = { content: [{ type: ViewChild, args: ['bodyTpl', { static: true },] }], title: [{ type: ViewChild, args: ['titleTpl', { static: true },] }], template: [{ type: ContentChild, args: [NzTabDirective, { static: false, read: TemplateRef },] }], linkDirective: [{ type: ContentChild, args: [NzTabLinkDirective, { static: false },] }], nzTitle: [{ type: Input }], nzRouterIdentifier: [{ type: Input }], nzForceRender: [{ type: Input }], nzDisabled: [{ type: Input }], nzClick: [{ type: Output }], nzSelect: [{ type: Output }], nzDeselect: [{ type: Output }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabComponent.prototype, "nzForceRender", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabComponent.prototype, "nzDisabled", void 0); if (false) { /** @type {?} */ NzTabComponent.prototype.position; /** @type {?} */ NzTabComponent.prototype.origin; /** @type {?} */ NzTabComponent.prototype.isActive; /** @type {?} */ NzTabComponent.prototype.stateChanges; /** @type {?} */ NzTabComponent.prototype.content; /** @type {?} */ NzTabComponent.prototype.title; /** @type {?} */ NzTabComponent.prototype.template; /** @type {?} */ NzTabComponent.prototype.linkDirective; /** @type {?} */ NzTabComponent.prototype.nzTitle; /** @type {?} */ NzTabComponent.prototype.nzRouterIdentifier; /** @type {?} */ NzTabComponent.prototype.nzForceRender; /** @type {?} */ NzTabComponent.prototype.nzDisabled; /** @type {?} */ NzTabComponent.prototype.nzClick; /** @type {?} */ NzTabComponent.prototype.nzSelect; /** @type {?} */ NzTabComponent.prototype.nzDeselect; /** @type {?} */ NzTabComponent.prototype.elementRef; /** * @type {?} * @private */ NzTabComponent.prototype.renderer; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTabsInkBarDirective { /** * @param {?} renderer * @param {?} elementRef * @param {?} ngZone */ constructor(renderer, elementRef, ngZone) { this.renderer = renderer; this.elementRef = elementRef; this.ngZone = ngZone; this.nzAnimated = false; this.nzPositionMode = 'horizontal'; renderer.addClass(elementRef.nativeElement, 'ant-tabs-ink-bar'); } /** * @param {?} element * @return {?} */ alignToElement(element) { if (typeof requestAnimationFrame !== 'undefined') { this.ngZone.runOutsideAngular((/** * @return {?} */ () => { requestAnimationFrame((/** * @return {?} */ () => this.setStyles(element))); })); } else { this.setStyles(element); } } /** * @param {?} element * @return {?} */ setStyles(element) { /** when horizontal remove height style and add transform left **/ if (this.nzPositionMode === 'horizontal') { this.renderer.removeStyle(this.elementRef.nativeElement, 'height'); this.renderer.setStyle(this.elementRef.nativeElement, 'transform', `translate3d(${this.getLeftPosition(element)}, 0px, 0px)`); this.renderer.setStyle(this.elementRef.nativeElement, 'width', this.getElementWidth(element)); } else { /** when vertical remove width style and add transform top **/ this.renderer.removeStyle(this.elementRef.nativeElement, 'width'); this.renderer.setStyle(this.elementRef.nativeElement, 'transform', `translate3d(0px, ${this.getTopPosition(element)}, 0px)`); this.renderer.setStyle(this.elementRef.nativeElement, 'height', this.getElementHeight(element)); } } /** * @param {?} element * @return {?} */ getLeftPosition(element) { return element ? element.offsetLeft + 'px' : '0'; } /** * @param {?} element * @return {?} */ getElementWidth(element) { return element ? element.offsetWidth + 'px' : '0'; } /** * @param {?} element * @return {?} */ getTopPosition(element) { return element ? element.offsetTop + 'px' : '0'; } /** * @param {?} element * @return {?} */ getElementHeight(element) { return element ? element.offsetHeight + 'px' : '0'; } } NzTabsInkBarDirective.decorators = [ { type: Directive, args: [{ selector: '[nz-tabs-ink-bar]', exportAs: 'nzTabsInkBar', host: { '[class.ant-tabs-ink-bar-animated]': 'nzAnimated', '[class.ant-tabs-ink-bar-no-animated]': '!nzAnimated' } },] } ]; /** @nocollapse */ NzTabsInkBarDirective.ctorParameters = () => [ { type: Renderer2 }, { type: ElementRef }, { type: NgZone } ]; NzTabsInkBarDirective.propDecorators = { nzAnimated: [{ type: Input }], nzPositionMode: [{ type: Input }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabsInkBarDirective.prototype, "nzAnimated", void 0); if (false) { /** @type {?} */ NzTabsInkBarDirective.prototype.nzAnimated; /** @type {?} */ NzTabsInkBarDirective.prototype.nzPositionMode; /** * @type {?} * @private */ NzTabsInkBarDirective.prototype.renderer; /** * @type {?} * @private */ NzTabsInkBarDirective.prototype.elementRef; /** * @type {?} * @private */ NzTabsInkBarDirective.prototype.ngZone; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ const EXAGGERATED_OVERSCROLL = 64; class NzTabsNavComponent { /** * @param {?} elementRef * @param {?} ngZone * @param {?} renderer * @param {?} cdr * @param {?} platform * @param {?} nzDomEventService * @param {?} dir */ constructor(elementRef, ngZone, renderer, cdr, platform, nzDomEventService, dir) { this.elementRef = elementRef; this.ngZone = ngZone; this.renderer = renderer; this.cdr = cdr; this.platform = platform; this.nzDomEventService = nzDomEventService; this.dir = dir; this._tabPositionMode = 'horizontal'; this._scrollDistance = 0; this._selectedIndex = 0; this.destroy$ = new Subject(); this.showPaginationControls = false; this.disableScrollAfter = true; this.disableScrollBefore = true; this.selectedIndexChanged = false; this.realignInkBar = null; this.nzOnNextClick = new EventEmitter(); this.nzOnPrevClick = new EventEmitter(); this.nzAnimated = true; this.nzHideBar = false; this.nzShowPagination = true; this.nzType = 'line'; } /** * @param {?} value * @return {?} */ set nzPositionMode(value) { this._tabPositionMode = value; this.alignInkBarToSelectedTab(); if (this.nzShowPagination) { Promise.resolve().then((/** * @return {?} */ () => { this.updatePagination(); })); } } /** * @return {?} */ get nzPositionMode() { return this._tabPositionMode; } /** * @param {?} value * @return {?} */ set selectedIndex(value) { this.selectedIndexChanged = this._selectedIndex !== value; this._selectedIndex = value; } /** * @return {?} */ get selectedIndex() { return this._selectedIndex; } /** * @return {?} */ onContentChanges() { /** @type {?} */ const textContent = this.elementRef.nativeElement.textContent; // We need to diff the text content of the header, because the MutationObserver callback // will fire even if the text content didn't change which is inefficient and is prone // to infinite loops if a poorly constructed expression is passed in (see #14249). if (textContent !== this.currentTextContent) { this.currentTextContent = textContent; this.ngZone.run((/** * @return {?} */ () => { if (this.nzShowPagination) { this.updatePagination(); } this.alignInkBarToSelectedTab(); this.cdr.markForCheck(); })); } } /** * @param {?} scrollDir * @return {?} */ scrollHeader(scrollDir) { if (scrollDir === 'before' && !this.disableScrollBefore) { this.nzOnPrevClick.emit(); } else if (scrollDir === 'after' && !this.disableScrollAfter) { this.nzOnNextClick.emit(); } // Move the scroll distance one-third the length of the tab list's viewport. this.scrollDistance += ((scrollDir === 'before' ? -1 : 1) * this.viewWidthHeightPix) / 3; } /** * @return {?} */ ngAfterContentChecked() { if (this.tabLabelCount !== this.listOfNzTabLabelDirective.length) { if (this.nzShowPagination) { this.updatePagination(); } this.tabLabelCount = this.listOfNzTabLabelDirective.length; this.cdr.markForCheck(); } if (this.selectedIndexChanged) { this.scrollToLabel(this._selectedIndex); if (this.nzShowPagination) { this.checkScrollingControls(); } this.alignInkBarToSelectedTab(); this.selectedIndexChanged = false; this.cdr.markForCheck(); } if (this.scrollDistanceChanged) { if (this.nzShowPagination) { this.updateTabScrollPosition(); } this.scrollDistanceChanged = false; this.cdr.markForCheck(); } } /** * @return {?} */ ngAfterContentInit() { this.realignInkBar = this.ngZone.runOutsideAngular((/** * @return {?} */ () => { /** @type {?} */ const dirChange = this.dir ? this.dir.change : of(null); /** @type {?} */ const resize = typeof window !== 'undefined' ? this.nzDomEventService.registerResizeListener().pipe(takeUntil(this.destroy$), finalize((/** * @return {?} */ () => this.nzDomEventService.unregisterResizeListener()))) : of(null); return merge(dirChange, resize) .pipe(startWith(null)) .subscribe((/** * @return {?} */ () => { if (this.nzShowPagination) { this.updatePagination(); } this.alignInkBarToSelectedTab(); })); })); } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); if (this.realignInkBar) { this.realignInkBar.unsubscribe(); } } /** * @return {?} */ updateTabScrollPosition() { /** @type {?} */ const scrollDistance = this.scrollDistance; if (this.nzPositionMode === 'horizontal') { /** @type {?} */ const translateX = this.getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance; this.renderer.setStyle(this.navListElement.nativeElement, 'transform', `translate3d(${translateX}px, 0, 0)`); } else { this.renderer.setStyle(this.navListElement.nativeElement, 'transform', `translate3d(0,${-scrollDistance}px, 0)`); } } /** * @return {?} */ updatePagination() { this.checkPaginationEnabled(); this.checkScrollingControls(); this.updateTabScrollPosition(); } /** * @return {?} */ checkPaginationEnabled() { /** @type {?} */ const isEnabled = this.tabListScrollWidthHeightPix > this.tabListScrollOffSetWidthHeight; if (!isEnabled) { this.scrollDistance = 0; } if (isEnabled !== this.showPaginationControls) { this.cdr.markForCheck(); } this.showPaginationControls = isEnabled; } /** * @param {?} labelIndex * @return {?} */ scrollToLabel(labelIndex) { /** @type {?} */ const selectedLabel = this.listOfNzTabLabelDirective ? this.listOfNzTabLabelDirective.toArray()[labelIndex] : null; if (selectedLabel) { // The view length is the visible width of the tab labels. /** @type {?} */ let labelBeforePos; /** @type {?} */ let labelAfterPos; if (this.nzPositionMode === 'horizontal') { if (this.getLayoutDirection() === 'ltr') { labelBeforePos = selectedLabel.getOffsetLeft(); labelAfterPos = labelBeforePos + selectedLabel.getOffsetWidth(); } else { labelAfterPos = this.navListElement.nativeElement.offsetWidth - selectedLabel.getOffsetLeft(); labelBeforePos = labelAfterPos - selectedLabel.getOffsetWidth(); } } else { labelBeforePos = selectedLabel.getOffsetTop(); labelAfterPos = labelBeforePos + selectedLabel.getOffsetHeight(); } /** @type {?} */ const beforeVisiblePos = this.scrollDistance; /** @type {?} */ const afterVisiblePos = this.scrollDistance + this.viewWidthHeightPix; if (labelBeforePos < beforeVisiblePos) { // Scroll header to move label to the before direction this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL; } else if (labelAfterPos > afterVisiblePos) { // Scroll header to move label to the after direction this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL; } } } /** * @return {?} */ checkScrollingControls() { // Check if the pagination arrows should be activated. this.disableScrollBefore = this.scrollDistance === 0; this.disableScrollAfter = this.scrollDistance === this.getMaxScrollDistance(); this.cdr.markForCheck(); } /** * Determines what is the maximum length in pixels that can be set for the scroll distance. This * is equal to the difference in width between the tab list container and tab header container. * * This is an expensive call that forces a layout reflow to compute box and scroll metrics and * should be called sparingly. * @return {?} */ getMaxScrollDistance() { return this.tabListScrollWidthHeightPix - this.viewWidthHeightPix || 0; } /** * Sets the distance in pixels that the tab header should be transformed in the X-axis. * @param {?} v * @return {?} */ set scrollDistance(v) { this._scrollDistance = Math.max(0, Math.min(this.getMaxScrollDistance(), v)); // Mark that the scroll distance has changed so that after the view is checked, the CSS // transformation can move the header. this.scrollDistanceChanged = true; this.checkScrollingControls(); } /** * @return {?} */ get scrollDistance() { return this._scrollDistance; } /** * @return {?} */ get viewWidthHeightPix() { /** @type {?} */ let PAGINATION_PIX = 0; if (this.showPaginationControls) { PAGINATION_PIX = this.navContainerScrollPaddingPix; } if (this.nzPositionMode === 'horizontal') { return this.navContainerElement.nativeElement.offsetWidth - PAGINATION_PIX; } else { return this.navContainerElement.nativeElement.offsetHeight - PAGINATION_PIX; } } /** * @return {?} */ get navContainerScrollPaddingPix() { if (this.platform.isBrowser) { /** @type {?} */ const navContainer = this.navContainerElement.nativeElement; // tslint:disable: no-any /** @type {?} */ const originStyle = window.getComputedStyle ? window.getComputedStyle(navContainer) : ((/** @type {?} */ (navContainer))).currentStyle; if (this.nzPositionMode === 'horizontal') { return pxToNumber(originStyle.paddingLeft) + pxToNumber(originStyle.paddingRight); } else { return pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom); } } else { return 0; } } /** * @return {?} */ get tabListScrollWidthHeightPix() { if (this.nzPositionMode === 'horizontal') { return this.navListElement.nativeElement.scrollWidth; } else { return this.navListElement.nativeElement.scrollHeight; } } /** * @return {?} */ get tabListScrollOffSetWidthHeight() { if (this.nzPositionMode === 'horizontal') { return this.scrollListElement.nativeElement.offsetWidth; } else { return this.elementRef.nativeElement.offsetHeight; } } /** * @return {?} */ getLayoutDirection() { return this.dir && this.dir.value === 'rtl' ? 'rtl' : 'ltr'; } /** * @return {?} */ alignInkBarToSelectedTab() { if (this.nzType === 'line') { /** @type {?} */ const selectedLabelWrapper = this.listOfNzTabLabelDirective && this.listOfNzTabLabelDirective.length ? this.listOfNzTabLabelDirective.toArray()[this.selectedIndex].elementRef.nativeElement : null; if (this.nzTabsInkBarDirective) { this.nzTabsInkBarDirective.alignToElement(selectedLabelWrapper); } } } } NzTabsNavComponent.decorators = [ { type: Component, args: [{ selector: '[nz-tabs-nav]', exportAs: 'nzTabsNav', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div style=\"float:right;\" *ngIf=\"nzTabBarExtraContent\" class=\"ant-tabs-extra-content\">\n <ng-template [ngTemplateOutlet]=\"nzTabBarExtraContent\"></ng-template>\n</div>\n<div class=\"ant-tabs-nav-container\"\n [class.ant-tabs-nav-container-scrolling]=\"showPaginationControls\"\n #navContainerElement>\n <span class=\"ant-tabs-tab-prev\"\n (click)=\"scrollHeader('before')\"\n [class.ant-tabs-tab-btn-disabled]=\"disableScrollBefore\"\n [class.ant-tabs-tab-arrow-show]=\"showPaginationControls\">\n <span class=\"ant-tabs-tab-prev-icon\">\n <i nz-icon [nzType]=\"nzPositionMode === 'horizontal' ? 'left' : 'up'\" class=\"ant-tabs-tab-prev-icon-target\"></i>\n </span>\n </span>\n <span class=\"ant-tabs-tab-next\"\n (click)=\"scrollHeader('after')\"\n [class.ant-tabs-tab-btn-disabled]=\"disableScrollAfter\"\n [class.ant-tabs-tab-arrow-show]=\"showPaginationControls\">\n <span class=\"ant-tabs-tab-next-icon\">\n <i nz-icon [nzType]=\"nzPositionMode === 'horizontal' ? 'right' : 'down'\" class=\"ant-tabs-tab-next-icon-target\"></i>\n </span>\n </span>\n <div class=\"ant-tabs-nav-wrap\">\n <div class=\"ant-tabs-nav-scroll\" #scrollListElement>\n <div class=\"ant-tabs-nav\"\n [class.ant-tabs-nav-animated]=\"nzAnimated\"\n #navListElement\n (cdkObserveContent)=\"onContentChanges()\">\n <div>\n <ng-content></ng-content>\n </div>\n <div nz-tabs-ink-bar [hidden]=\"nzHideBar\" [nzAnimated]=\"nzAnimated\" [nzPositionMode]=\"nzPositionMode\" style=\"display: block;\"></div>\n </div>\n </div>\n </div>\n</div>" }] } ]; /** @nocollapse */ NzTabsNavComponent.ctorParameters = () => [ { type: ElementRef }, { type: NgZone }, { type: Renderer2 }, { type: ChangeDetectorRef }, { type: Platform }, { type: NzDomEventService }, { type: Directionality, decorators: [{ type: Optional }] } ]; NzTabsNavComponent.propDecorators = { listOfNzTabLabelDirective: [{ type: ContentChildren, args: [NzTabLabelDirective,] }], nzTabsInkBarDirective: [{ type: ViewChild, args: [NzTabsInkBarDirective, { static: true },] }], navContainerElement: [{ type: ViewChild, args: ['navContainerElement', { static: true },] }], navListElement: [{ type: ViewChild, args: ['navListElement', { static: true },] }], scrollListElement: [{ type: ViewChild, args: ['scrollListElement', { static: true },] }], nzOnNextClick: [{ type: Output }], nzOnPrevClick: [{ type: Output }], nzTabBarExtraContent: [{ type: Input }], nzAnimated: [{ type: Input }], nzHideBar: [{ type: Input }], nzShowPagination: [{ type: Input }], nzType: [{ type: Input }], nzPositionMode: [{ type: Input }], selectedIndex: [{ type: Input }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabsNavComponent.prototype, "nzAnimated", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabsNavComponent.prototype, "nzHideBar", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabsNavComponent.prototype, "nzShowPagination", void 0); if (false) { /** * @type {?} * @private */ NzTabsNavComponent.prototype._tabPositionMode; /** * @type {?} * @private */ NzTabsNavComponent.prototype._scrollDistance; /** * @type {?} * @private */ NzTabsNavComponent.prototype._selectedIndex; /** * Cached text content of the header. * @type {?} * @private */ NzTabsNavComponent.prototype.currentTextContent; /** * @type {?} * @private */ NzTabsNavComponent.prototype.destroy$; /** @type {?} */ NzTabsNavComponent.prototype.showPaginationControls; /** @type {?} */ NzTabsNavComponent.prototype.disableScrollAfter; /** @type {?} */ NzTabsNavComponent.prototype.disableScrollBefore; /** @type {?} */ NzTabsNavComponent.prototype.selectedIndexChanged; /** @type {?} */ NzTabsNavComponent.prototype.realignInkBar; /** @type {?} */ NzTabsNavComponent.prototype.tabLabelCount; /** @type {?} */ NzTabsNavComponent.prototype.scrollDistanceChanged; /** @type {?} */ NzTabsNavComponent.prototype.listOfNzTabLabelDirective; /** @type {?} */ NzTabsNavComponent.prototype.nzTabsInkBarDirective; /** @type {?} */ NzTabsNavComponent.prototype.navContainerElement; /** @type {?} */ NzTabsNavComponent.prototype.navListElement; /** @type {?} */ NzTabsNavComponent.prototype.scrollListElement; /** @type {?} */ NzTabsNavComponent.prototype.nzOnNextClick; /** @type {?} */ NzTabsNavComponent.prototype.nzOnPrevClick; /** @type {?} */ NzTabsNavComponent.prototype.nzTabBarExtraContent; /** @type {?} */ NzTabsNavComponent.prototype.nzAnimated; /** @type {?} */ NzTabsNavComponent.prototype.nzHideBar; /** @type {?} */ NzTabsNavComponent.prototype.nzShowPagination; /** @type {?} */ NzTabsNavComponent.prototype.nzType; /** @type {?} */ NzTabsNavComponent.prototype.elementRef; /** * @type {?} * @private */ NzTabsNavComponent.prototype.ngZone; /** * @type {?} * @private */ NzTabsNavComponent.prototype.renderer; /** * @type {?} * @private */ NzTabsNavComponent.prototype.cdr; /** * @type {?} * @private */ NzTabsNavComponent.prototype.platform; /** * @type {?} * @private */ NzTabsNavComponent.prototype.nzDomEventService; /** * @type {?} * @private */ NzTabsNavComponent.prototype.dir; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @record */ function NzAnimatedInterface() { } if (false) { /** @type {?} */ NzAnimatedInterface.prototype.inkBar; /** @type {?} */ NzAnimatedInterface.prototype.tabPane; } class NzTabChangeEvent { } if (false) { /** @type {?} */ NzTabChangeEvent.prototype.index; /** @type {?} */ NzTabChangeEvent.prototype.tab; } class NzTabSetComponent { /** * @param {?} nzConfigService * @param {?} renderer * @param {?} nzUpdateHostClassService * @param {?} elementRef * @param {?} cdr * @param {?} router */ constructor(nzConfigService, renderer, nzUpdateHostClassService, elementRef, cdr, router) { this.nzConfigService = nzConfigService; this.renderer = renderer; this.nzUpdateHostClassService = nzUpdateHostClassService; this.elementRef = elementRef; this.cdr = cdr; this.router = router; this.indexToSelect = 0; this.el = this.elementRef.nativeElement; this._selectedIndex = null; /** * Subscription to tabs being added/removed. */ this.tabsSubscription = Subscription.EMPTY; /** * Subscription to changes in the tab labels. */ this.tabLabelSubscription = Subscription.EMPTY; this.destroy$ = new Subject(); this.tabPositionMode = 'horizontal'; this.nzHideAll = false; this.nzTabPosition = 'top'; this.nzLinkRouter = false; this.nzLinkExact = true; this.nzOnNextClick = new EventEmitter(); this.nzOnPrevClick = new EventEmitter(); this.nzSelectChange = new EventEmitter(true); this.nzSelectedIndexChange = new EventEmitter(); } /** * @param {?} value * @return {?} */ set nzSelectedIndex(value) { this.indexToSelect = value ? toNumber(value, null) : null; } /** * @return {?} */ get nzSelectedIndex() { return this._selectedIndex; } /** * @return {?} */ get inkBarAnimated() { return this.nzAnimated === true || ((/** @type {?} */ (this.nzAnimated))).inkBar === true; } /** * @return {?} */ get tabPaneAnimated() { return this.nzAnimated === true || ((/** @type {?} */ (this.nzAnimated))).tabPane === true; } /** * @param {?} value * @return {?} */ setPosition(value) { if (this.tabContent) { if (value === 'bottom') { this.renderer.insertBefore(this.el, this.tabContent.nativeElement, this.nzTabsNavComponent.elementRef.nativeElement); } else { this.renderer.insertBefore(this.el, this.nzTabsNavComponent.elementRef.nativeElement, this.tabContent.nativeElement); } } } /** * @return {?} */ setClassMap() { this.nzUpdateHostClassService.updateHostClass(this.el, { [`ant-tabs`]: true, [`ant-tabs-vertical`]: this.nzTabPosition === 'left' || this.nzTabPosition === 'right', [`ant-tabs-${this.nzTabPosition}`]: this.nzTabPosition, [`ant-tabs-no-animation`]: this.nzAnimated === false || ((/** @type {?} */ (this.nzAnimated))).tabPane === false, [`ant-tabs-${this.nzType}`]: this.nzType, [`ant-tabs-large`]: this.nzSize === 'large', [`ant-tabs-small`]: this.nzSize === 'small' }); } /** * @param {?} index * @param {?} disabled * @return {?} */ clickLabel(index, disabled) { if (!disabled) { /** @type {?} */ const tabs = this.listOfNzTabComponent.toArray(); this.nzSelectedIndex = index; tabs[index].nzClick.emit(); } } /** * @param {?} index * @return {?} */ createChangeEvent(index) { /** @type {?} */ const event = new NzTabChangeEvent(); event.index = index; if (this.listOfNzTabComponent && this.listOfNzTabComponent.length) { event.tab = this.listOfNzTabComponent.toArray()[index]; this.listOfNzTabComponent.forEach((/** * @param {?} item * @param {?} i * @return {?} */ (item, i) => { if (i !== index) { item.nzDeselect.emit(); } })); event.tab.nzSelect.emit(); } return event; } /** * Clamps the given index to the bounds of 0 and the tabs length. * @private * @param {?} index * @return {?} */ clampTabIndex(index) { // Note the `|| 0`, which ensures that values like NaN can't get through // and which would otherwise throw the component into an infinite loop // (since Math.max(NaN, 0) === NaN). return Math.min(this.listOfNzTabComponent.length - 1, Math.max(index || 0, 0)); } /** * @private * @return {?} */ subscribeToTabLabels() { if (this.tabLabelSubscription) { this.tabLabelSubscription.unsubscribe(); } this.tabLabelSubscription = merge(...this.listOfNzTabComponent.map((/** * @param {?} tab * @return {?} */ tab => tab.stateChanges))).subscribe((/** * @return {?} */ () => this.cdr.markForCheck())); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { if (changes.nzTabPosition) { if (this.nzTabPosition === 'top' || this.nzTabPosition === 'bottom') { this.tabPositionMode = 'horizontal'; } else { this.tabPositionMode = 'vertical'; } this.setPosition(this.nzTabPosition); } if (changes.nzType) { if (this.nzType === 'card') { this.nzAnimated = false; } } if (changes.nzSize || changes.nzAnimated || changes.nzTabPosition || changes.nzType) { this.setClassMap(); } } /** * @return {?} */ ngOnInit() { this.setClassMap(); } /** * @return {?} */ ngAfterContentChecked() { if (this.listOfNzTabComponent && this.listOfNzTabComponent.length) { // Don't clamp the `indexToSelect` immediately in the setter because it can happen that // the amount of tabs changes before the actual change detection runs. /** @type {?} */ const indexToSelect = (this.indexToSelect = this.clampTabIndex(this.indexToSelect)); // If there is a change in selected index, emit a change event. Should not trigger if // the selected index has not yet been initialized. if (this._selectedIndex !== indexToSelect) { /** @type {?} */ const isFirstRun = this._selectedIndex == null; if (!isFirstRun) { this.nzSelectChange.emit(this.createChangeEvent(indexToSelect)); } // Changing these values after change detection has run // since the checked content may contain references to them. Promise.resolve().then((/** * @return {?} */ () => { this.listOfNzTabComponent.forEach((/** * @param {?} tab * @param {?} index * @return {?} */ (tab, index) => (tab.isActive = index === indexToSelect))); if (!isFirstRun) { this.nzSelectedIndexChange.emit(indexToSelect); } })); } // Setup the position for each tab and optionally setup an origin on the next selected tab. this.listOfNzTabComponent.forEach((/** * @param {?} tab * @param {?} index * @return {?} */ (tab, index) => { tab.position = index - indexToSelect; // If there is already a selected tab, then set up an origin for the next selected tab // if it doesn't have one already. if (this._selectedIndex != null && tab.position === 0 && !tab.origin) { tab.origin = indexToSelect - this._selectedIndex; } })); if (this._selectedIndex !== indexToSelect) { this._selectedIndex = indexToSelect; this.cdr.markForCheck(); } } } /** * @return {?} */ ngAfterContentInit() { this.subscribeToTabLabels(); // Subscribe to changes in the amount of tabs, in order to be // able to re-render the content as new tabs are added or removed. this.tabsSubscription = this.listOfNzTabComponent.changes.subscribe((/** * @return {?} */ () => { /** @type {?} */ const indexToSelect = this.clampTabIndex(this.indexToSelect); // Maintain the previously-selected tab if a new tab is added or removed and there is no // explicit change that selects a different tab. if (indexToSelect === this._selectedIndex) { /** @type {?} */ const tabs = this.listOfNzTabComponent.toArray(); for (let i = 0; i < tabs.length; i++) { if (tabs[i].isActive) { // Assign both to the `_indexToSelect` and `_selectedIndex` so we don't fire a changed // event, otherwise the consumer may end up in an infinite loop in some edge cases like // adding a tab within the `selectedIndexChange` event. this.indexToSelect = this._selectedIndex = i; break; } } } this.subscribeToTabLabels(); this.cdr.markForCheck(); })); } /** * @return {?} */ ngOnDestroy() { this.tabsSubscription.unsubscribe(); this.tabLabelSubscription.unsubscribe(); this.destroy$.next(); this.destroy$.complete(); } /** * @return {?} */ ngAfterViewInit() { this.setPosition(this.nzTabPosition); if (this.nzLinkRouter) { if (!this.router) { throw new Error(`${PREFIX} you should import 'RouterModule' if you want to use 'nzLinkRouter'!`); } this.router.events .pipe(takeUntil(this.destroy$), filter((/** * @param {?} e * @return {?} */ e => e instanceof NavigationEnd)), startWith(true)) .subscribe((/** * @return {?} */ () => { this.updateRouterActive(); this.cdr.markForCheck(); })); } } /** * @private * @return {?} */ updateRouterActive() { if (this.router.navigated) { /** @type {?} */ const index = this.findShouldActiveTabIndex(); if (index !== this._selectedIndex) { this.nzSelectedIndex = index; this.nzSelectedIndexChange.emit(index); } this.nzHideAll = index === -1; } } /** * @private * @return {?} */ findShouldActiveTabIndex() { /** @type {?} */ const tabs = this.listOfNzTabComponent.toArray(); /** @type {?} */ const isActive = this.isLinkActive(this.router); return tabs.findIndex((/** * @param {?} tab * @return {?} */ tab => { /** @type {?} */ const c = tab.linkDirective; return c ? isActive(c.routerLink) || isActive(c.routerLinkWithHref) : false; })); } /** * @private * @param {?} router * @return {?} */ isLinkActive(router) { return (/** * @param {?=} link * @return {?} */ (link) => (link ? router.isActive(link.urlTree, this.nzLinkExact) : false)); } } NzTabSetComponent.decorators = [ { type: Component, args: [{ selector: 'nz-tabset', exportAs: 'nzTabset', preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [NzUpdateHostClassService], template: "<ng-container *ngIf=\"listOfNzTabComponent\">\n <div nz-tabs-nav\n role=\"tablist\"\n tabindex=\"0\"\n class=\"ant-tabs-bar\"\n [class.ant-tabs-card-bar]=\"nzType === 'card'\"\n [class.ant-tabs-top-bar]=\"nzTabPosition === 'top'\"\n [class.ant-tabs-bottom-bar]=\"nzTabPosition === 'bottom'\"\n [class.ant-tabs-left-bar]=\"nzTabPosition === 'left'\"\n [class.ant-tabs-right-bar]=\"nzTabPosition === 'right'\"\n [class.ant-tabs-small-bar]=\"nzSize === 'small'\"\n [class.ant-tabs-default-bar]=\"nzSize === 'default'\"\n [class.ant-tabs-large-bar]=\"nzSize === 'large'\"\n [nzType]=\"nzType\"\n [nzShowPagination]=\"nzShowPagination\"\n [nzPositionMode]=\"tabPositionMode\"\n [nzAnimated]=\"inkBarAnimated\"\n [ngStyle]=\"nzTabBarStyle\"\n [nzHideBar]=\"nzHideAll\"\n [nzTabBarExtraContent]=\"nzTabBarExtraContent\"\n [selectedIndex]=\"nzSelectedIndex\"\n (nzOnNextClick)=\"nzOnNextClick.emit()\"\n (nzOnPrevClick)=\"nzOnPrevClick.emit()\">\n <div nz-tab-label\n role=\"tab\"\n [style.margin-right.px]=\"nzTabBarGutter\"\n [class.ant-tabs-tab-active]=\"(nzSelectedIndex == i) && !nzHideAll\"\n [disabled]=\"tab.nzDisabled\"\n (click)=\"clickLabel(i,tab.nzDisabled)\"\n *ngFor=\"let tab of listOfNzTabComponent; let i = index\">\n <ng-container *nzStringTemplateOutlet=\"tab.nzTitle || tab.title\">{{ tab.nzTitle }}</ng-container>\n </div>\n </div>\n <div #tabContent\n class=\"ant-tabs-content\"\n [class.ant-tabs-top-content]=\"nzTabPosition === 'top'\"\n [class.ant-tabs-bottom-content]=\"nzTabPosition === 'bottom'\"\n [class.ant-tabs-left-content]=\"nzTabPosition === 'left'\"\n [class.ant-tabs-right-content]=\"nzTabPosition === 'right'\"\n [class.ant-tabs-content-animated]=\"tabPaneAnimated\"\n [class.ant-tabs-card-content]=\"nzType === 'card'\"\n [class.ant-tabs-content-no-animated]=\"!tabPaneAnimated\"\n [style.margin-left.%]=\"(tabPositionMode === 'horizontal') && tabPaneAnimated && (-(nzSelectedIndex || 0 ) * 100)\">\n <div nz-tab-body\n class=\"ant-tabs-tabpane\"\n *ngFor=\"let tab of listOfNzTabComponent; let i = index\"\n [active]=\"(nzSelectedIndex == i) && !nzHideAll\"\n [forceRender]=\"tab.nzForceRender\"\n [content]=\"tab.template || tab.content\">\n </div>\n </div>\n</ng-container>", styles: [` nz-tabset { display: block; } `] }] } ]; /** @nocollapse */ NzTabSetComponent.ctorParameters = () => [ { type: NzConfigService }, { type: Renderer2 }, { type: NzUpdateHostClassService }, { type: ElementRef }, { type: ChangeDetectorRef }, { type: Router, decorators: [{ type: Optional }] } ]; NzTabSetComponent.propDecorators = { listOfNzTabComponent: [{ type: ContentChildren, args: [NzTabComponent,] }], nzTabsNavComponent: [{ type: ViewChild, args: [NzTabsNavComponent, { static: false },] }], tabContent: [{ type: ViewChild, args: ['tabContent', { static: false },] }], nzTabBarExtraContent: [{ type: Input }], nzShowPagination: [{ type: Input }], nzAnimated: [{ type: Input }], nzHideAll: [{ type: Input }], nzTabPosition: [{ type: Input }], nzSize: [{ type: Input }], nzTabBarGutter: [{ type: Input }], nzTabBarStyle: [{ type: Input }], nzType: [{ type: Input }], nzLinkRouter: [{ type: Input }], nzLinkExact: [{ type: Input }], nzOnNextClick: [{ type: Output }], nzOnPrevClick: [{ type: Output }], nzSelectChange: [{ type: Output }], nzSelectedIndexChange: [{ type: Output }], nzSelectedIndex: [{ type: Input }] }; __decorate([ WithConfig(true), __metadata("design:type", Boolean) ], NzTabSetComponent.prototype, "nzShowPagination", void 0); __decorate([ WithConfig(true), __metadata("design:type", Object) ], NzTabSetComponent.prototype, "nzAnimated", void 0); __decorate([ WithConfig('default'), __metadata("design:type", String) ], NzTabSetComponent.prototype, "nzSize", void 0); __decorate([ WithConfig(), __metadata("design:type", Number) ], NzTabSetComponent.prototype, "nzTabBarGutter", void 0); __decorate([ WithConfig('line'), __metadata("design:type", String) ], NzTabSetComponent.prototype, "nzType", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabSetComponent.prototype, "nzLinkRouter", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTabSetComponent.prototype, "nzLinkExact", void 0); if (false) { /** * @type {?} * @private */ NzTabSetComponent.prototype.indexToSelect; /** * @type {?} * @private */ NzTabSetComponent.prototype.el; /** * @type {?} * @private */ NzTabSetComponent.prototype._selectedIndex; /** * Subscription to tabs being added/removed. * @type {?} * @private */ NzTabSetComponent.prototype.tabsSubscription; /** * Subscription to changes in the tab labels. * @type {?} * @private */ NzTabSetComponent.prototype.tabLabel