UNPKG

ng-zorro-antd

Version:

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

1,261 lines (1,253 loc) 56.2 kB
import { __decorate, __metadata } from 'tslib'; import { Platform, PlatformModule } from '@angular/cdk/platform'; import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling'; import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Input, Output, Directive, TemplateRef, Renderer2, NgZone, ElementRef, ContentChildren, ContentChild, Host, Optional, NgModule } from '@angular/core'; import { Subject, merge, fromEvent, EMPTY } from 'rxjs'; import { takeUntil, startWith, flatMap, switchMap } from 'rxjs/operators'; import { isNotNil, InputBoolean, measureScrollbar, NzConfigService, WithConfig, InputNumber, NzUpdateHostClassService, toBoolean, NzAddOnModule } from 'ng-zorro-antd/core'; import { NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzDropdownMenuComponent, NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzSpinModule } from 'ng-zorro-antd/spin'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @record */ function NzThItemInterface() { } if (false) { /** @type {?} */ NzThItemInterface.prototype.text; /** @type {?} */ NzThItemInterface.prototype.value; /** @type {?} */ NzThItemInterface.prototype.checked; } class NzThComponent { /** * @param {?} cdr * @param {?} i18n */ constructor(cdr, i18n) { this.cdr = cdr; this.i18n = i18n; this.hasFilterValue = false; this.filterVisible = false; this.multipleFilterList = []; this.singleFilterList = []; /* tslint:disable-next-line:no-any */ this.locale = (/** @type {?} */ ({})); this.nzWidthChange$ = new Subject(); this.destroy$ = new Subject(); this.hasDefaultFilter = false; /* tslint:disable-next-line:no-any */ this.nzSelections = []; this.nzChecked = false; this.nzDisabled = false; this.nzIndeterminate = false; this.nzFilterMultiple = true; this.nzSort = null; this.nzFilters = []; this.nzExpand = false; this.nzShowCheckbox = false; this.nzCustomFilter = false; this.nzShowSort = false; this.nzShowFilter = false; this.nzShowRowSelection = false; this.nzCheckedChange = new EventEmitter(); this.nzSortChange = new EventEmitter(); this.nzSortChangeWithKey = new EventEmitter(); /* tslint:disable-next-line:no-any */ this.nzFilterChange = new EventEmitter(); } /** * @return {?} */ updateSortValue() { if (this.nzShowSort) { if (this.nzSort === 'ascend') { this.setSortValue('descend'); } else if (this.nzSort === 'descend') { this.setSortValue(null); } else { this.setSortValue('ascend'); } } } /** * @param {?} value * @return {?} */ setSortValue(value) { this.nzSort = value; this.nzSortChangeWithKey.emit({ key: this.nzSortKey, value: this.nzSort }); this.nzSortChange.emit(this.nzSort); } /** * @return {?} */ get filterList() { return this.multipleFilterList.filter((/** * @param {?} item * @return {?} */ item => item.checked)).map((/** * @param {?} item * @return {?} */ item => item.value)); } /* tslint:disable-next-line:no-any */ /** * @return {?} */ get filterValue() { /** @type {?} */ const checkedFilter = this.singleFilterList.find((/** * @param {?} item * @return {?} */ item => item.checked)); return checkedFilter ? checkedFilter.value : null; } /** * @return {?} */ updateFilterStatus() { if (this.nzFilterMultiple) { this.hasFilterValue = this.filterList.length > 0; } else { this.hasFilterValue = isNotNil(this.filterValue); } } /** * @return {?} */ search() { this.updateFilterStatus(); if (this.nzFilterMultiple) { this.nzFilterChange.emit(this.filterList); } else { this.nzFilterChange.emit(this.filterValue); } } /** * @return {?} */ reset() { this.initMultipleFilterList(true); this.initSingleFilterList(true); this.hasFilterValue = false; } /** * @param {?} filter * @return {?} */ checkMultiple(filter) { filter.checked = !filter.checked; } /** * @param {?} filter * @return {?} */ checkSingle(filter) { this.singleFilterList.forEach((/** * @param {?} item * @return {?} */ item => (item.checked = item === filter))); } /** * @return {?} */ hideDropDown() { this.nzDropdownMenuComponent.setVisibleStateWhen(false); this.filterVisible = false; } /** * @param {?} value * @return {?} */ dropDownVisibleChange(value) { this.filterVisible = value; if (!value) { this.search(); } } /** * @param {?=} force * @return {?} */ initMultipleFilterList(force) { this.multipleFilterList = this.nzFilters.map((/** * @param {?} item * @return {?} */ item => { /** @type {?} */ const checked = force ? false : !!item.byDefault; if (checked) { this.hasDefaultFilter = true; } return { text: item.text, value: item.value, checked }; })); this.checkDefaultFilters(); } /** * @param {?=} force * @return {?} */ initSingleFilterList(force) { this.singleFilterList = this.nzFilters.map((/** * @param {?} item * @return {?} */ item => { /** @type {?} */ const checked = force ? false : !!item.byDefault; if (checked) { this.hasDefaultFilter = true; } return { text: item.text, value: item.value, checked }; })); this.checkDefaultFilters(); } /** * @return {?} */ checkDefaultFilters() { if (!this.nzFilters || this.nzFilters.length === 0 || !this.hasDefaultFilter) { return; } this.updateFilterStatus(); } /** * @return {?} */ marForCheck() { this.cdr.markForCheck(); } /** * @return {?} */ ngOnInit() { this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe((/** * @return {?} */ () => { this.locale = this.i18n.getLocaleData('Table'); this.cdr.markForCheck(); })); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { if (changes.nzFilters) { this.initMultipleFilterList(); this.initSingleFilterList(); this.updateFilterStatus(); } if (changes.nzWidth) { this.nzWidthChange$.next(this.nzWidth); } } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } } NzThComponent.decorators = [ { type: Component, args: [{ // tslint:disable-next-line:component-selector selector: 'th:not(.nz-disable-th):not([mat-sort-header]):not([mat-header-cell])', preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #checkboxTemplate>\n <label nz-checkbox\n [class.ant-table-selection-select-all-custom]=\"nzShowRowSelection\"\n [(ngModel)]=\"nzChecked\"\n [nzDisabled]=\"nzDisabled\"\n [nzIndeterminate]=\"nzIndeterminate\"\n (ngModelChange)=\"nzCheckedChange.emit($event)\">\n </label>\n</ng-template>\n<span class=\"ant-table-header-column\">\n <div [class.ant-table-column-sorters]=\"nzShowSort\" (click)=\"updateSortValue()\">\n <span class=\"ant-table-column-title\">\n <ng-container *ngIf=\"nzShowCheckbox && !nzShowRowSelection\">\n <ng-template [ngTemplateOutlet]=\"checkboxTemplate\"></ng-template>\n </ng-container>\n <div class=\"ant-table-selection\" *ngIf=\"nzShowRowSelection\">\n <ng-container *ngIf=\"nzShowCheckbox\">\n <ng-template [ngTemplateOutlet]=\"checkboxTemplate\"></ng-template>\n </ng-container>\n <div nz-dropdown class=\"ant-table-selection-down\" nzPlacement=\"bottomLeft\" [nzDropdownMenu]=\"selectionMenu\">\n <i nz-icon nzType=\"down\"></i>\n </div>\n <nz-dropdown-menu #selectionMenu=\"nzDropdownMenu\">\n <ul nz-menu class=\"ant-table-selection-menu\">\n <li nz-menu-item\n *ngFor=\"let selection of nzSelections\"\n (click)=\"selection.onSelect()\">{{selection.text}}</li>\n </ul>\n </nz-dropdown-menu>\n </div>\n <ng-content></ng-content>\n </span>\n <ng-content select=\"nz-dropdown\"></ng-content>\n <div class=\"ant-table-column-sorter\" *ngIf=\"nzShowSort\">\n <div class=\"ant-table-column-sorter-inner ant-table-column-sorter-inner-full\">\n <i nz-icon\n nzType=\"caret-up\"\n class=\"ant-table-column-sorter-up\"\n [class.on]=\"nzSort == 'ascend'\"\n [class.off]=\"nzSort != 'ascend'\"></i>\n <i nz-icon\n nzType=\"caret-down\"\n class=\"ant-table-column-sorter-down\"\n [class.on]=\"nzSort == 'descend'\"\n [class.off]=\"nzSort != 'descend'\"></i>\n </div>\n </div>\n </div>\n</span>\n<ng-content select=\"[nz-dropdown]\"></ng-content>\n<ng-content select=\"[nz-th-extra]\"></ng-content>\n\n<ng-container *ngIf=\"nzShowFilter\">\n <i nz-icon\n nz-dropdown\n nzType=\"filter\"\n nzTheme=\"fill\"\n nzTrigger=\"click\"\n nzTableFilter\n [nzClickHide]=\"false\"\n [nzDropdownMenu]=\"filterMenu\"\n [class.ant-table-filter-selected]=\"hasFilterValue\"\n [class.ant-table-filter-open]=\"filterVisible\"\n (nzVisibleChange)=\"dropDownVisibleChange($event)\"></i>\n <nz-dropdown-menu #filterMenu=\"nzDropdownMenu\">\n <ul nz-menu>\n <ng-container *ngIf=\"nzFilterMultiple\">\n <li nz-menu-item *ngFor=\"let filter of multipleFilterList\" (click)=\"checkMultiple(filter)\">\n <label nz-checkbox [ngModel]=\"filter.checked\" (ngModelChange)=\"checkMultiple(filter)\"></label>\n <span>{{filter.text}}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"!nzFilterMultiple\">\n <li nz-menu-item *ngFor=\"let filter of singleFilterList\" (click)=\"checkSingle(filter)\">\n <label nz-radio [ngModel]=\"filter.checked\" (ngModelChange)=\"checkSingle(filter)\">{{filter.text}}</label>\n </li>\n </ng-container>\n </ul>\n <div class=\"ant-table-filter-dropdown-btns\">\n <a class=\"ant-table-filter-dropdown-link confirm\" (click)=\"hideDropDown()\">\n <span>{{ locale.filterConfirm }}</span>\n </a>\n <a class=\"ant-table-filter-dropdown-link clear\" (click)=\"reset();hideDropDown()\">\n <span>{{ locale.filterReset }}</span>\n </a>\n </div>\n </nz-dropdown-menu>\n</ng-container>\n", host: { '[class.ant-table-column-has-actions]': 'nzShowFilter || nzShowSort || nzCustomFilter', '[class.ant-table-column-has-filters]': 'nzShowFilter || nzCustomFilter', '[class.ant-table-column-has-sorters]': 'nzShowSort', '[class.ant-table-selection-column-custom]': 'nzShowRowSelection', '[class.ant-table-selection-column]': 'nzShowCheckbox', '[class.ant-table-expand-icon-th]': 'nzExpand', '[class.ant-table-th-left-sticky]': 'nzLeft', '[class.ant-table-th-right-sticky]': 'nzRight', '[class.ant-table-column-sort]': `nzSort === 'descend' || nzSort === 'ascend'`, '[style.left]': 'nzLeft', '[style.right]': 'nzRight', '[style.text-align]': 'nzAlign' } }] } ]; /** @nocollapse */ NzThComponent.ctorParameters = () => [ { type: ChangeDetectorRef }, { type: NzI18nService } ]; NzThComponent.propDecorators = { nzDropdownMenuComponent: [{ type: ViewChild, args: [NzDropdownMenuComponent, { static: false },] }], nzSelections: [{ type: Input }], nzChecked: [{ type: Input }], nzDisabled: [{ type: Input }], nzIndeterminate: [{ type: Input }], nzSortKey: [{ type: Input }], nzFilterMultiple: [{ type: Input }], nzWidth: [{ type: Input }], nzLeft: [{ type: Input }], nzRight: [{ type: Input }], nzAlign: [{ type: Input }], nzSort: [{ type: Input }], nzFilters: [{ type: Input }], nzExpand: [{ type: Input }], nzShowCheckbox: [{ type: Input }], nzCustomFilter: [{ type: Input }], nzShowSort: [{ type: Input }], nzShowFilter: [{ type: Input }], nzShowRowSelection: [{ type: Input }], nzCheckedChange: [{ type: Output }], nzSortChange: [{ type: Output }], nzSortChangeWithKey: [{ type: Output }], nzFilterChange: [{ type: Output }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzThComponent.prototype, "nzExpand", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzThComponent.prototype, "nzShowCheckbox", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzThComponent.prototype, "nzCustomFilter", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzThComponent.prototype, "nzShowSort", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzThComponent.prototype, "nzShowFilter", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzThComponent.prototype, "nzShowRowSelection", void 0); if (false) { /** @type {?} */ NzThComponent.prototype.hasFilterValue; /** @type {?} */ NzThComponent.prototype.filterVisible; /** @type {?} */ NzThComponent.prototype.multipleFilterList; /** @type {?} */ NzThComponent.prototype.singleFilterList; /** @type {?} */ NzThComponent.prototype.locale; /** @type {?} */ NzThComponent.prototype.nzWidthChange$; /** * @type {?} * @private */ NzThComponent.prototype.destroy$; /** * @type {?} * @private */ NzThComponent.prototype.hasDefaultFilter; /** @type {?} */ NzThComponent.prototype.nzDropdownMenuComponent; /** @type {?} */ NzThComponent.prototype.nzSelections; /** @type {?} */ NzThComponent.prototype.nzChecked; /** @type {?} */ NzThComponent.prototype.nzDisabled; /** @type {?} */ NzThComponent.prototype.nzIndeterminate; /** @type {?} */ NzThComponent.prototype.nzSortKey; /** @type {?} */ NzThComponent.prototype.nzFilterMultiple; /** @type {?} */ NzThComponent.prototype.nzWidth; /** @type {?} */ NzThComponent.prototype.nzLeft; /** @type {?} */ NzThComponent.prototype.nzRight; /** @type {?} */ NzThComponent.prototype.nzAlign; /** @type {?} */ NzThComponent.prototype.nzSort; /** @type {?} */ NzThComponent.prototype.nzFilters; /** @type {?} */ NzThComponent.prototype.nzExpand; /** @type {?} */ NzThComponent.prototype.nzShowCheckbox; /** @type {?} */ NzThComponent.prototype.nzCustomFilter; /** @type {?} */ NzThComponent.prototype.nzShowSort; /** @type {?} */ NzThComponent.prototype.nzShowFilter; /** @type {?} */ NzThComponent.prototype.nzShowRowSelection; /** @type {?} */ NzThComponent.prototype.nzCheckedChange; /** @type {?} */ NzThComponent.prototype.nzSortChange; /** @type {?} */ NzThComponent.prototype.nzSortChangeWithKey; /** @type {?} */ NzThComponent.prototype.nzFilterChange; /** * @type {?} * @private */ NzThComponent.prototype.cdr; /** * @type {?} * @private */ NzThComponent.prototype.i18n; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzVirtualScrollDirective { /* tslint:disable-next-line:no-any */ /** * @param {?} templateRef */ constructor(templateRef) { this.templateRef = templateRef; } } NzVirtualScrollDirective.decorators = [ { type: Directive, args: [{ selector: '[nz-virtual-scroll]', exportAs: 'nzVirtualScroll' },] } ]; /** @nocollapse */ NzVirtualScrollDirective.ctorParameters = () => [ { type: TemplateRef } ]; if (false) { /** @type {?} */ NzVirtualScrollDirective.prototype.templateRef; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @template T */ // tslint:disable-next-line no-any class NzTableComponent { /** * @param {?} nzConfigService * @param {?} renderer * @param {?} ngZone * @param {?} cdr * @param {?} i18n * @param {?} platform * @param {?} elementRef */ constructor(nzConfigService, renderer, ngZone, cdr, i18n, platform, elementRef) { this.nzConfigService = nzConfigService; this.renderer = renderer; this.ngZone = ngZone; this.cdr = cdr; this.i18n = i18n; this.platform = platform; /** * public data for ngFor tr */ this.data = []; this.locale = {}; // tslint:disable-line:no-any this.lastScrollLeft = 0; this.headerBottomStyle = {}; this.destroy$ = new Subject(); this.nzPageSizeOptions = [10, 20, 30, 40, 50]; this.nzVirtualScroll = false; this.nzVirtualItemSize = 0; this.nzVirtualMaxBufferPx = 200; this.nzVirtualMinBufferPx = 100; this.nzLoadingDelay = 0; this.nzTotal = 0; this.nzWidthConfig = []; this.nzPageIndex = 1; this.nzPageSize = 10; this.nzData = []; this.nzPaginationPosition = 'bottom'; this.nzScroll = { x: null, y: null }; this.nzFrontPagination = true; this.nzTemplateMode = false; this.nzShowPagination = true; this.nzLoading = false; this.nzPageSizeChange = new EventEmitter(); this.nzPageIndexChange = new EventEmitter(); /* tslint:disable-next-line:no-any */ this.nzCurrentPageDataChange = new EventEmitter(); renderer.addClass(elementRef.nativeElement, 'ant-table-wrapper'); } /** * @return {?} */ get itemRender() { return this.nzItemRender || this.itemRenderChild; } /** * @return {?} */ get tableBodyNativeElement() { return this.tableBodyElement && this.tableBodyElement.nativeElement; } /** * @return {?} */ get tableHeaderNativeElement() { return this.tableHeaderElement && this.tableHeaderElement.nativeElement; } /** * @return {?} */ get cdkVirtualScrollNativeElement() { return this.cdkVirtualScrollElement && this.cdkVirtualScrollElement.nativeElement; } /** * @return {?} */ get mixTableBodyNativeElement() { return this.tableBodyNativeElement || this.cdkVirtualScrollNativeElement; } /** * @param {?} size * @param {?} index * @return {?} */ emitPageSizeOrIndex(size, index) { if (this.nzPageSize !== size || this.nzPageIndex !== index) { if (this.nzPageSize !== size) { this.nzPageSize = size; this.nzPageSizeChange.emit(this.nzPageSize); } if (this.nzPageIndex !== index) { this.nzPageIndex = index; this.nzPageIndexChange.emit(this.nzPageIndex); } this.updateFrontPaginationDataIfNeeded(this.nzPageSize !== size); } } /** * @param {?} e * @return {?} */ syncScrollTable(e) { if (e.currentTarget === e.target) { /** @type {?} */ const target = (/** @type {?} */ (e.target)); if (target.scrollLeft !== this.lastScrollLeft && this.nzScroll && this.nzScroll.x) { if (target === this.mixTableBodyNativeElement && this.tableHeaderNativeElement) { this.tableHeaderNativeElement.scrollLeft = target.scrollLeft; } else if (target === this.tableHeaderNativeElement && this.mixTableBodyNativeElement) { this.mixTableBodyNativeElement.scrollLeft = target.scrollLeft; } this.setScrollPositionClassName(); } this.lastScrollLeft = target.scrollLeft; } } /** * @return {?} */ setScrollPositionClassName() { if (this.mixTableBodyNativeElement && this.nzScroll && this.nzScroll.x) { if (this.mixTableBodyNativeElement.scrollWidth === this.mixTableBodyNativeElement.clientWidth && this.mixTableBodyNativeElement.scrollWidth !== 0) { this.setScrollName(); } else if (this.mixTableBodyNativeElement.scrollLeft === 0) { this.setScrollName('left'); } else if (this.mixTableBodyNativeElement.scrollWidth === this.mixTableBodyNativeElement.scrollLeft + this.mixTableBodyNativeElement.clientWidth) { this.setScrollName('right'); } else { this.setScrollName('middle'); } } } /** * @param {?=} position * @return {?} */ setScrollName(position) { /** @type {?} */ const prefix = 'ant-table-scroll-position'; /** @type {?} */ const classList = ['left', 'right', 'middle']; classList.forEach((/** * @param {?} name * @return {?} */ name => { this.renderer.removeClass(this.tableMainElement.nativeElement, `${prefix}-${name}`); })); if (position) { this.renderer.addClass(this.tableMainElement.nativeElement, `${prefix}-${position}`); } } /** * @return {?} */ fitScrollBar() { if (this.nzScroll.y) { /** @type {?} */ const scrollbarWidth = measureScrollbar('vertical'); /** @type {?} */ const scrollbarWidthOfHeader = measureScrollbar('horizontal', 'ant-table'); // Add negative margin bottom for scroll bar overflow bug if (scrollbarWidthOfHeader > 0) { this.headerBottomStyle = { marginBottom: `-${scrollbarWidthOfHeader}px`, paddingBottom: '0px', overflowX: 'scroll', overflowY: `${scrollbarWidth === 0 ? 'hidden' : 'scroll'}` }; this.cdr.markForCheck(); } } } /** * @param {?=} isPageSizeOrDataChange * @return {?} */ updateFrontPaginationDataIfNeeded(isPageSizeOrDataChange = false) { /** @type {?} */ let data = this.nzData || []; if (this.nzFrontPagination) { this.nzTotal = data.length; if (isPageSizeOrDataChange) { /** @type {?} */ const maxPageIndex = Math.ceil(data.length / this.nzPageSize) || 1; /** @type {?} */ const pageIndex = this.nzPageIndex > maxPageIndex ? maxPageIndex : this.nzPageIndex; if (pageIndex !== this.nzPageIndex) { this.nzPageIndex = pageIndex; Promise.resolve().then((/** * @return {?} */ () => this.nzPageIndexChange.emit(pageIndex))); } } data = data.slice((this.nzPageIndex - 1) * this.nzPageSize, this.nzPageIndex * this.nzPageSize); } this.data = [...data]; this.nzCurrentPageDataChange.emit(this.data); } /** * @return {?} */ ngOnInit() { this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe((/** * @return {?} */ () => { this.locale = this.i18n.getLocaleData('Table'); this.cdr.markForCheck(); })); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { if (changes.nzScroll) { if (changes.nzScroll.currentValue) { this.nzScroll = changes.nzScroll.currentValue; } else { this.nzScroll = { x: null, y: null }; } this.fitScrollBar(); this.setScrollPositionClassName(); } if (changes.nzData) { if (this.platform.isBrowser) { setTimeout((/** * @return {?} */ () => this.setScrollPositionClassName())); } } if (changes.nzPageIndex || changes.nzPageSize || changes.nzFrontPagination || changes.nzData) { this.updateFrontPaginationDataIfNeeded(!!(changes.nzPageSize || changes.nzData)); } } /** * @return {?} */ ngAfterViewInit() { if (!this.platform.isBrowser) { return; } setTimeout((/** * @return {?} */ () => this.setScrollPositionClassName())); this.ngZone.runOutsideAngular((/** * @return {?} */ () => { merge(this.tableHeaderNativeElement ? fromEvent(this.tableHeaderNativeElement, 'scroll') : EMPTY, this.mixTableBodyNativeElement ? fromEvent(this.mixTableBodyNativeElement, 'scroll') : EMPTY) .pipe(takeUntil(this.destroy$)) .subscribe((/** * @param {?} data * @return {?} */ (data) => { this.syncScrollTable(data); })); fromEvent(window, 'resize') .pipe(startWith(true), takeUntil(this.destroy$)) .subscribe((/** * @return {?} */ () => { this.fitScrollBar(); this.setScrollPositionClassName(); })); })); } /** * @return {?} */ ngAfterContentInit() { this.listOfNzThComponent.changes .pipe(startWith(true), flatMap((/** * @return {?} */ () => merge(this.listOfNzThComponent.changes, ...this.listOfNzThComponent.map((/** * @param {?} th * @return {?} */ th => th.nzWidthChange$))))), takeUntil(this.destroy$)) .subscribe((/** * @return {?} */ () => { this.cdr.markForCheck(); })); } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } } NzTableComponent.decorators = [ { type: Component, args: [{ selector: 'nz-table', exportAs: 'nzTable', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #renderItemTemplate let-type let-page=\"page\">\n <a class=\"ant-pagination-item-link\" *ngIf=\"type==='pre'\"><i nz-icon nzType=\"left\"></i></a>\n <a class=\"ant-pagination-item-link\" *ngIf=\"type==='next'\"><i nz-icon nzType=\"right\"></i></a>\n <a *ngIf=\"type=='page'\">{{ page }}</a>\n</ng-template>\n<ng-template #colGroupTemplate>\n <colgroup>\n <col [style.width]=\"width\" [style.minWidth]=\"width\" *ngFor=\"let width of nzWidthConfig\">\n <ng-container *ngFor=\"let th of listOfNzThComponent\">\n <col [style.width]=\"th.nzWidth\" [style.minWidth]=\"th.nzWidth\" *ngIf=\"th.nzWidth\">\n </ng-container>\n </colgroup>\n</ng-template>\n<ng-template #headerTemplate>\n <ng-template [ngTemplateOutlet]=\"colGroupTemplate\"></ng-template>\n <thead class=\"ant-table-thead\" *ngIf=\"!nzScroll.y\">\n <ng-template [ngTemplateOutlet]=\"nzTheadComponent?.templateRef\"></ng-template>\n </thead>\n</ng-template>\n<ng-template #tableInnerTemplate>\n <div #tableHeaderElement\n *ngIf=\"nzScroll.y\"\n [ngStyle]=\"headerBottomStyle\"\n class=\"ant-table-header ant-table-hide-scrollbar\">\n <table [class.ant-table-fixed]=\"nzScroll.x\" [style.width]=\"nzScroll.x\">\n <ng-template [ngTemplateOutlet]=\"colGroupTemplate\"></ng-template>\n <thead class=\"ant-table-thead\" *ngIf=\"nzScroll.y\">\n <ng-template [ngTemplateOutlet]=\"nzTheadComponent?.templateRef\"></ng-template>\n </thead>\n </table>\n </div>\n <div #tableBodyElement *ngIf=\"!nzVirtualScroll;else scrollViewTpl\"\n class=\"ant-table-body\"\n [style.maxHeight]=\"nzScroll.y\"\n [style.overflow-y]=\"nzScroll.y ? 'scroll' : ''\"\n [style.overflow-x]=\"nzScroll.x ? 'auto' : ''\">\n <table [class.ant-table-fixed]=\"nzScroll.x\" [style.width]=\"nzScroll.x\">\n <ng-template [ngIf]=\"!nzVirtualScroll\" [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n <ng-content></ng-content>\n </table>\n </div>\n <ng-template #scrollViewTpl>\n <cdk-virtual-scroll-viewport\n class=\"ant-table-body\"\n [hidden]=\"!data.length\"\n [itemSize]=\"nzVirtualItemSize\"\n [maxBufferPx]=\"nzVirtualMaxBufferPx\"\n [minBufferPx]=\"nzVirtualMinBufferPx\"\n [style.height]=\"nzScroll.y\">\n <table [class.ant-table-fixed]=\"nzScroll.x\" [style.width]=\"nzScroll.x\">\n <ng-template [ngIf]=\"nzVirtualScroll\" [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n <tbody>\n <ng-container *cdkVirtualFor=\"let item of data; let i = index; trackBy:nzVirtualForTrackBy;\">\n <ng-template [ngTemplateOutlet]=\"nzVirtualScrollDirective?.templateRef\" [ngTemplateOutletContext]=\"{$implicit:item, index:i}\"></ng-template>\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </ng-template>\n <div class=\"ant-table-placeholder\" *ngIf=\"data.length === 0 && !nzLoading && !nzTemplateMode\">\n <nz-embed-empty [nzComponentName]=\"'table'\" [specificContent]=\"nzNoResult\"></nz-embed-empty>\n </div>\n <div class=\"ant-table-footer\" *ngIf=\"nzFooter\">\n <ng-container *nzStringTemplateOutlet=\"nzFooter\">{{ nzFooter }}</ng-container>\n </div>\n</ng-template>\n<ng-template #paginationTemplate>\n <nz-pagination *ngIf=\"nzShowPagination && data.length\"\n [nzInTable]=\"true\"\n [nzShowSizeChanger]=\"nzShowSizeChanger\"\n [nzPageSizeOptions]=\"nzPageSizeOptions\"\n [nzItemRender]=\"itemRender\"\n [nzShowQuickJumper]=\"nzShowQuickJumper\"\n [nzHideOnSinglePage]=\"nzHideOnSinglePage\"\n [nzShowTotal]=\"nzShowTotal\"\n [nzSize]=\"nzSize === 'default' ? 'default' : 'small'\"\n [nzPageSize]=\"nzPageSize\"\n [nzTotal]=\"nzTotal\"\n [nzSimple]=\"nzSimple\"\n [nzPageIndex]=\"nzPageIndex\"\n (nzPageSizeChange)=\"emitPageSizeOrIndex($event,nzPageIndex)\"\n (nzPageIndexChange)=\"emitPageSizeOrIndex(nzPageSize,$event)\">\n </nz-pagination>\n</ng-template>\n<nz-spin [nzDelay]=\"nzLoadingDelay\" [nzSpinning]=\"nzLoading\" [nzIndicator]=\"nzLoadingIndicator\">\n <ng-container *ngIf=\"nzPaginationPosition === 'both' || nzPaginationPosition === 'top'\">\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n </ng-container>\n <div #tableMainElement\n class=\"ant-table\"\n [class.ant-table-fixed-header]=\"nzScroll.x || nzScroll.y\"\n [class.ant-table-bordered]=\"nzBordered\"\n [class.ant-table-default]=\"nzSize === 'default'\"\n [class.ant-table-middle]=\"nzSize === 'middle'\"\n [class.ant-table-small]=\"nzSize === 'small'\">\n <div class=\"ant-table-title\" *ngIf=\"nzTitle\">\n <ng-container *nzStringTemplateOutlet=\"nzTitle\">{{ nzTitle }}</ng-container>\n </div>\n <div class=\"ant-table-content\">\n <ng-container *ngIf=\"nzScroll.x || nzScroll.y; else tableInnerTemplate\">\n <div class=\"ant-table-scroll\">\n <ng-template [ngTemplateOutlet]=\"tableInnerTemplate\"></ng-template>\n </div>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"nzPaginationPosition === 'both' || nzPaginationPosition === 'bottom'\">\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n </ng-container>\n</nz-spin>\n", host: { '[class.ant-table-empty]': 'data.length === 0 && !nzTemplateMode' }, styles: [` nz-table { display: block; } cdk-virtual-scroll-viewport.ant-table-body { overflow-y: scroll; } `] }] } ]; /** @nocollapse */ NzTableComponent.ctorParameters = () => [ { type: NzConfigService }, { type: Renderer2 }, { type: NgZone }, { type: ChangeDetectorRef }, { type: NzI18nService }, { type: Platform }, { type: ElementRef } ]; NzTableComponent.propDecorators = { listOfNzThComponent: [{ type: ContentChildren, args: [NzThComponent, { descendants: true },] }], tableHeaderElement: [{ type: ViewChild, args: ['tableHeaderElement', { static: false, read: ElementRef },] }], tableBodyElement: [{ type: ViewChild, args: ['tableBodyElement', { static: false, read: ElementRef },] }], tableMainElement: [{ type: ViewChild, args: ['tableMainElement', { static: false, read: ElementRef },] }], cdkVirtualScrollElement: [{ type: ViewChild, args: [CdkVirtualScrollViewport, { static: false, read: ElementRef },] }], cdkVirtualScrollViewport: [{ type: ViewChild, args: [CdkVirtualScrollViewport, { static: false, read: CdkVirtualScrollViewport },] }], nzVirtualScrollDirective: [{ type: ContentChild, args: [NzVirtualScrollDirective, { static: false },] }], nzSize: [{ type: Input }], nzShowTotal: [{ type: Input }], nzPageSizeOptions: [{ type: Input }], nzVirtualScroll: [{ type: Input }], nzVirtualItemSize: [{ type: Input }], nzVirtualMaxBufferPx: [{ type: Input }], nzVirtualMinBufferPx: [{ type: Input }], nzVirtualForTrackBy: [{ type: Input }], nzLoadingDelay: [{ type: Input }], nzLoadingIndicator: [{ type: Input }], nzTotal: [{ type: Input }], nzTitle: [{ type: Input }], nzFooter: [{ type: Input }], nzNoResult: [{ type: Input }], nzWidthConfig: [{ type: Input }], nzPageIndex: [{ type: Input }], nzPageSize: [{ type: Input }], nzData: [{ type: Input }], nzPaginationPosition: [{ type: Input }], nzScroll: [{ type: Input }], nzItemRender: [{ type: Input }], itemRenderChild: [{ type: ViewChild, args: ['renderItemTemplate', { static: true },] }], nzFrontPagination: [{ type: Input }], nzTemplateMode: [{ type: Input }], nzBordered: [{ type: Input }], nzShowPagination: [{ type: Input }], nzLoading: [{ type: Input }], nzShowSizeChanger: [{ type: Input }], nzHideOnSinglePage: [{ type: Input }], nzShowQuickJumper: [{ type: Input }], nzSimple: [{ type: Input }], nzPageSizeChange: [{ type: Output }], nzPageIndexChange: [{ type: Output }], nzCurrentPageDataChange: [{ type: Output }] }; __decorate([ WithConfig('default'), __metadata("design:type", String) ], NzTableComponent.prototype, "nzSize", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTableComponent.prototype, "nzVirtualScroll", void 0); __decorate([ InputNumber(), __metadata("design:type", Object) ], NzTableComponent.prototype, "nzVirtualItemSize", void 0); __decorate([ InputNumber(), __metadata("design:type", Object) ], NzTableComponent.prototype, "nzVirtualMaxBufferPx", void 0); __decorate([ InputNumber(), __metadata("design:type", Object) ], NzTableComponent.prototype, "nzVirtualMinBufferPx", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTableComponent.prototype, "nzFrontPagination", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTableComponent.prototype, "nzTemplateMode", void 0); __decorate([ WithConfig(false), InputBoolean(), __metadata("design:type", Boolean) ], NzTableComponent.prototype, "nzBordered", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTableComponent.prototype, "nzShowPagination", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTableComponent.prototype, "nzLoading", void 0); __decorate([ WithConfig(false), InputBoolean(), __metadata("design:type", Boolean) ], NzTableComponent.prototype, "nzShowSizeChanger", void 0); __decorate([ WithConfig(false), InputBoolean(), __metadata("design:type", Boolean) ], NzTableComponent.prototype, "nzHideOnSinglePage", void 0); __decorate([ WithConfig(false), InputBoolean(), __metadata("design:type", Boolean) ], NzTableComponent.prototype, "nzShowQuickJumper", void 0); __decorate([ WithConfig(false), InputBoolean(), __metadata("design:type", Boolean) ], NzTableComponent.prototype, "nzSimple", void 0); if (false) { /** * public data for ngFor tr * @type {?} */ NzTableComponent.prototype.data; /** @type {?} */ NzTableComponent.prototype.locale; /** @type {?} */ NzTableComponent.prototype.nzTheadComponent; /** @type {?} */ NzTableComponent.prototype.lastScrollLeft; /** @type {?} */ NzTableComponent.prototype.headerBottomStyle; /** * @type {?} * @private */ NzTableComponent.prototype.destroy$; /** @type {?} */ NzTableComponent.prototype.listOfNzThComponent; /** @type {?} */ NzTableComponent.prototype.tableHeaderElement; /** @type {?} */ NzTableComponent.prototype.tableBodyElement; /** @type {?} */ NzTableComponent.prototype.tableMainElement; /** @type {?} */ NzTableComponent.prototype.cdkVirtualScrollElement; /** @type {?} */ NzTableComponent.prototype.cdkVirtualScrollViewport; /** @type {?} */ NzTableComponent.prototype.nzVirtualScrollDirective; /** @type {?} */ NzTableComponent.prototype.nzSize; /** @type {?} */ NzTableComponent.prototype.nzShowTotal; /** @type {?} */ NzTableComponent.prototype.nzPageSizeOptions; /** @type {?} */ NzTableComponent.prototype.nzVirtualScroll; /** @type {?} */ NzTableComponent.prototype.nzVirtualItemSize; /** @type {?} */ NzTableComponent.prototype.nzVirtualMaxBufferPx; /** @type {?} */ NzTableComponent.prototype.nzVirtualMinBufferPx; /** @type {?} */ NzTableComponent.prototype.nzVirtualForTrackBy; /** @type {?} */ NzTableComponent.prototype.nzLoadingDelay; /** @type {?} */ NzTableComponent.prototype.nzLoadingIndicator; /** @type {?} */ NzTableComponent.prototype.nzTotal; /** @type {?} */ NzTableComponent.prototype.nzTitle; /** @type {?} */ NzTableComponent.prototype.nzFooter; /** @type {?} */ NzTableComponent.prototype.nzNoResult; /** @type {?} */ NzTableComponent.prototype.nzWidthConfig; /** @type {?} */ NzTableComponent.prototype.nzPageIndex; /** @type {?} */ NzTableComponent.prototype.nzPageSize; /** @type {?} */ NzTableComponent.prototype.nzData; /** @type {?} */ NzTableComponent.prototype.nzPaginationPosition; /** @type {?} */ NzTableComponent.prototype.nzScroll; /** @type {?} */ NzTableComponent.prototype.nzItemRender; /** @type {?} */ NzTableComponent.prototype.itemRenderChild; /** @type {?} */ NzTableComponent.prototype.nzFrontPagination; /** @type {?} */ NzTableComponent.prototype.nzTemplateMode; /** @type {?} */ NzTableComponent.prototype.nzBordered; /** @type {?} */ NzTableComponent.prototype.nzShowPagination; /** @type {?} */ NzTableComponent.prototype.nzLoading; /** @type {?} */ NzTableComponent.prototype.nzShowSizeChanger; /** @type {?} */ NzTableComponent.prototype.nzHideOnSinglePage; /** @type {?} */ NzTableComponent.prototype.nzShowQuickJumper; /** @type {?} */ NzTableComponent.prototype.nzSimple; /** @type {?} */ NzTableComponent.prototype.nzPageSizeChange; /** @type {?} */ NzTableComponent.prototype.nzPageIndexChange; /** @type {?} */ NzTableComponent.prototype.nzCurrentPageDataChange; /** @type {?} */ NzTableComponent.prototype.nzConfigService; /** * @type {?} * @private */ NzTableComponent.prototype.renderer; /** * @type {?} * @private */ NzTableComponent.prototype.ngZone; /** * @type {?} * @private */ NzTableComponent.prototype.cdr; /** * @type {?} * @private */ NzTableComponent.prototype.i18n; /** * @type {?} * @private */ NzTableComponent.prototype.platform; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTbodyDirective { /** * @param {?} nzTableComponent */ constructor(nzTableComponent) { this.nzTableComponent = nzTableComponent; } } NzTbodyDirective.decorators = [ { type: Directive, args: [{ // tslint:disable-next-line:directive-selector selector: 'tbody', host: { '[class.ant-table-tbody]': 'nzTableComponent' } },] } ]; /** @nocollapse */ NzTbodyDirective.ctorParameters = () => [ { type: NzTableComponent, decorators: [{ type: Host }, { type: Optional }] } ]; if (false) { /** @type {?} */ NzTbodyDirective.prototype.nzTableComponent; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTdComponent { /** * @param {?} elementRef * @param {?} nzUpdateHostClassService */ constructor(elementRef, nzUpdateHostClassService) { this.elementRef = elementRef; this.nzUpdateHostClassService = nzUpdateHostClassService; this.nzChecked = false; this.nzDisabled = false; this.nzIndeterminate = false; this.nzExpand = false; this.nzShowExpand = false; this.nzShowCheckbox = false; this.nzBreakWord = false; this.nzCheckedChange = new EventEmitter(); this.nzExpandChange = new EventEmitter(); } /** * @param {?} e * @return {?} */ expandChange(e) { e.stopPropagation(); this.nzExpand = !this.nzExpand; this.nzExpandChange.emit(this.nzExpand); } /** * @return {?} */ setClassMap() { this.nzUpdateHostClassService.updateHostClass(this.elementRef.nativeElement, { [`ant-table-row-expand-icon-cell`]: this.nzShowExpand && !isNotNil(this.nzIndentSize), [`ant-table-selection-column`]: this.nzShowCheckbox, [`ant-table-td-left-sticky`]: isNotNil(this.nzLeft), [`ant-table-td-right-sticky`]: isNotNil(this.nzRight) }); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { if (changes.nzIndentSize || changes.nzShowExpand || changes.nzShowCheckbox || changes.nzRight || changes.nzLeft) { this.setClassMap(); } } } NzTdComponent.decorators = [ { type: Component, args: [{ // tslint:disable-next-line:component-selector selector: 'td:not(.nz-disable-td):not([mat-cell])', changeDetection: ChangeDetectionStrategy.OnPush, providers: [NzUpdateHostClassService], preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, template: "<span class=\"ant-table-row-indent\" *ngIf=\"nzIndentSize >= 0\" [style.padding-left.px]=\"nzIndentSize\"></span>\n<label *ngIf=\"nzShowCheckbox\"\n nz-checkbox\n [nzDisabled]=\"nzDisabled\"\n [(ngModel)]=\"nzChecked\"\n [nzIndeterminate]=\"nzIndeterminate\"\n (ngModelChange)=\"nzCheckedChange.emit($event)\">\n</label>\n<span *ngIf=\"!nzShowExpand && nzIndentSize >= 0\"\n class=\"ant-table-row-expand-icon ant-table-row-spaced\">\n</span>\n<span *ngIf=\"nzShowExpand\"\n class=\"ant-table-row-expand-icon\"\n [class.ant-table-row-expanded]=\"nzExpand\"\n [class.ant-table-row-collapsed]=\"!nzExpand\"\n (click)=\"expandChange($event)\">\n</span>\n<ng-content></ng-content>", host: { '[style.left]': 'nzLeft', '[style.right]': 'nzRight', '[style.text-align]': 'nzAlign', '[style.word-break]': `nzBreakWord ? 'break-all' : ''` } }] } ]; /** @nocollapse */ NzTdComponent.ctorParameters = () => [ { type: ElementRef }, { type: NzUpdateHostClassService } ]; NzTdComponent.propDecorators = { nzChecked: [{ type: Input }], nzDisabled: [{ type: Input }], nzIndeterminate: [{ type: Input }], nzLeft: [{ type: Input }], nzRight: [{ type: Input }], nzAlign: [{ type: Input }], nzIndentSize: [{ type: Input }], nzExpand: [{ type: Input }], nzShowExpand: [{ type: Input }], nzShowCheckbox: [{ type: Input }], nzBreakWord: [{ type: Input }], nzCheckedChange: [{ type: Output }], nzExpandChange: [{ type: Output }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTdComponent.prototype, "nzExpand", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTdComponent.prototype, "nzShowExpand", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTdComponent.prototype, "nzShowCheckbox", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTdComponent.prototype, "nzBreakWord", void 0); if (false) { /** @type {?} */ NzTdComponent.prototype.nzChecked; /** @type {?} */ NzTdComponent.prototype.nzDisabled; /** @type {?} */ NzTdComponent.prototype.nzIndeterminate; /** @type {?} */ NzTdComponent.prototype.nzLeft; /** @type {?} */ NzTdComponent.prototype.nzRight; /** @type {?} */ NzTdComponent.prototype.nzAlign; /** @type {?} */ NzTdComponent.prototype.nzIndentSize; /** @type {?} */ NzTdComponent.prototype.nzExpand; /** @type {?} */ NzTdComponent.prototype.nzShowExpand; /** @type {?} */ NzTdComponent.prototype.nzShowCheckbox; /** @type {?} */ NzTdComponent.prototype.nzBreakWord; /** @type {?} */ NzTdComponent.prototype.nzCheckedChange; /** @type {?} */ NzTdComponent.prototype.nzExpandChange; /** * @type {?} * @private */ NzTdComponent.prototype.elementRef; /** * @type {?} * @private */ NzTdComponent.prototype.nzUpdateHostClassService; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTheadComponent { // tslint:disable-next-line:no-any /** * @param {?} nzTableComponent * @param {?} elementRef * @param {?} renderer */ constructor(nzTableComponent, elementRef, renderer) { this.nzTableComponent = nzTableComponent; this.elementRef = elementRef; this.renderer = renderer; this.destroy$ = new Subject(); this.nzSingleSort = false; this.nzSortChange = new EventEmitter(); if (this.nzTableComponent) { this.nzTableComponent.nzTheadComponent = this; } } /** * @return {?} */ ngAfterContentInit() { this.listOfNzThComponent.changes .pipe(startWith(true), switchMap((/** * @return {?} */ () => merge(...this.listOfNzThComponent.map((/** * @param {?} th * @return {?} */ th => th.nzSortChangeWithKey))))), takeUntil(this.destroy$)) .subscribe((/** * @param {?} data * @return {?} */ (data) => { this.nzSortChange.emit(data); if (this.nzSingleSort) { this.listOfNzThComponent.forEach((/** * @param {?} th * @return {?} */