ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,343 lines (1,323 loc) • 95.1 kB
JavaScript
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
import { CommonModule } from '@angular/common';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, Input, Output, Directive, Renderer2, Injectable, Optional, ViewChild, NgZone, TemplateRef, ContentChild, ContentChildren, ViewChildren, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzResizeObserver, NzResizeObserversModule } from 'ng-zorro-antd/core/resize-observers';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n';
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';
import { arraysEqual, InputBoolean, isNil, measureScrollbar } from 'ng-zorro-antd/core/util';
import { Subject, ReplaySubject, BehaviorSubject, combineLatest, merge, fromEvent, EMPTY, of } from 'rxjs';
import { takeUntil, map, startWith, delay, switchMap, filter, distinctUntilChanged, debounceTime, skip, mergeMap } from 'rxjs/operators';
import { __decorate, __metadata } from 'tslib';
import { NzResizeService } from 'ng-zorro-antd/core/services';
import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
/**
* 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
*/
class NzFilterTriggerComponent {
constructor(cdr, elementRef) {
this.cdr = cdr;
this.elementRef = elementRef;
this.nzActive = false;
this.nzVisible = false;
this.nzHasBackdrop = false;
this.nzVisibleChange = new EventEmitter();
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-filter-trigger-container');
}
onVisibleChange(visible) {
this.nzVisible = visible;
this.nzVisibleChange.next(visible);
}
onFilterClick($event) {
$event.stopPropagation();
}
hide() {
this.nzVisible = false;
this.cdr.markForCheck();
}
show() {
this.nzVisible = true;
this.cdr.markForCheck();
}
}
NzFilterTriggerComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-filter-trigger',
exportAs: `nzFilterTrigger`,
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
template: `
<span
nz-dropdown
class="ant-table-filter-trigger"
nzTrigger="click"
nzPlacement="bottomRight"
[nzHasBackdrop]="nzHasBackdrop"
[nzClickHide]="false"
[nzDropdownMenu]="nzDropdownMenu"
[class.active]="nzActive"
[class.ant-table-filter-open]="nzVisible"
[nzVisible]="nzVisible"
(nzVisibleChange)="onVisibleChange($event)"
(click)="onFilterClick($event)"
>
<ng-content></ng-content>
</span>
`,
host: {
'[class.ant-table-filter-trigger-container-open]': 'nzVisible'
}
},] }
];
NzFilterTriggerComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ElementRef }
];
NzFilterTriggerComponent.propDecorators = {
nzActive: [{ type: Input }],
nzDropdownMenu: [{ type: Input }],
nzVisible: [{ type: Input }],
nzHasBackdrop: [{ type: Input }],
nzVisibleChange: [{ type: Output }]
};
/**
* 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
*/
class NzTableFilterComponent {
constructor(cdr, i18n, elementRef) {
this.cdr = cdr;
this.i18n = i18n;
this.elementRef = elementRef;
this.contentTemplate = null;
this.customFilter = false;
this.extraTemplate = null;
this.filterMultiple = true;
this.listOfFilter = [];
this.filterChange = new EventEmitter();
this.destroy$ = new Subject();
this.isChecked = false;
this.isVisible = false;
this.listOfParsedFilter = [];
this.listOfChecked = [];
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-filter-column');
}
trackByValue(_, item) {
return item.value;
}
check(filter) {
if (this.filterMultiple) {
this.listOfParsedFilter = this.listOfParsedFilter.map(item => {
if (item === filter) {
return Object.assign(Object.assign({}, item), { checked: !filter.checked });
}
else {
return item;
}
});
filter.checked = !filter.checked;
}
else {
this.listOfParsedFilter = this.listOfParsedFilter.map(item => {
return Object.assign(Object.assign({}, item), { checked: item === filter });
});
}
this.isChecked = this.getCheckedStatus(this.listOfParsedFilter);
}
confirm() {
this.isVisible = false;
this.emitFilterData();
}
reset() {
this.isVisible = false;
this.listOfParsedFilter = this.parseListOfFilter(this.listOfFilter, true);
this.isChecked = this.getCheckedStatus(this.listOfParsedFilter);
this.emitFilterData();
}
onVisibleChange(value) {
this.isVisible = value;
if (!value) {
this.emitFilterData();
}
else {
this.listOfChecked = this.listOfParsedFilter.filter(item => item.checked).map(item => item.value);
}
}
emitFilterData() {
const listOfChecked = this.listOfParsedFilter.filter(item => item.checked).map(item => item.value);
if (!arraysEqual(this.listOfChecked, listOfChecked)) {
if (this.filterMultiple) {
this.filterChange.emit(listOfChecked);
}
else {
this.filterChange.emit(listOfChecked.length > 0 ? listOfChecked[0] : null);
}
}
}
parseListOfFilter(listOfFilter, reset) {
return listOfFilter.map(item => {
const checked = reset ? false : !!item.byDefault;
return { text: item.text, value: item.value, checked };
});
}
getCheckedStatus(listOfParsedFilter) {
return listOfParsedFilter.some(item => item.checked);
}
ngOnInit() {
this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
this.locale = this.i18n.getLocaleData('Table');
this.cdr.markForCheck();
});
}
ngOnChanges(changes) {
const { listOfFilter } = changes;
if (listOfFilter && this.listOfFilter && this.listOfFilter.length) {
this.listOfParsedFilter = this.parseListOfFilter(this.listOfFilter);
this.isChecked = this.getCheckedStatus(this.listOfParsedFilter);
}
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzTableFilterComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-table-filter',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<span class="ant-table-filter-column-title">
<ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
</span>
<ng-container *ngIf="!customFilter; else extraTemplate">
<nz-filter-trigger
[nzVisible]="isVisible"
[nzActive]="isChecked"
[nzDropdownMenu]="filterMenu"
(nzVisibleChange)="onVisibleChange($event)"
>
<i nz-icon nzType="filter" nzTheme="fill"></i>
</nz-filter-trigger>
<nz-dropdown-menu #filterMenu="nzDropdownMenu">
<div class="ant-table-filter-dropdown">
<ul nz-menu>
<li nz-menu-item [nzSelected]="f.checked" *ngFor="let f of listOfParsedFilter; trackBy: trackByValue" (click)="check(f)">
<label nz-radio *ngIf="!filterMultiple" [ngModel]="f.checked" (ngModelChange)="check(f)"></label>
<label nz-checkbox *ngIf="filterMultiple" [ngModel]="f.checked" (ngModelChange)="check(f)"></label>
<span>{{ f.text }}</span>
</li>
</ul>
<div class="ant-table-filter-dropdown-btns">
<button nz-button nzType="link" nzSize="small" (click)="reset()" [disabled]="!isChecked">{{ locale.filterReset }}</button>
<button nz-button nzType="primary" nzSize="small" (click)="confirm()">{{ locale.filterConfirm }}</button>
</div>
</div>
</nz-dropdown-menu>
</ng-container>
`
},] }
];
NzTableFilterComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: NzI18nService },
{ type: ElementRef }
];
NzTableFilterComponent.propDecorators = {
contentTemplate: [{ type: Input }],
customFilter: [{ type: Input }],
extraTemplate: [{ type: Input }],
filterMultiple: [{ type: Input }],
listOfFilter: [{ type: Input }],
filterChange: [{ type: Output }]
};
/**
* 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
*/
class NzRowExpandButtonDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.expand = false;
this.spaceMode = false;
this.expandChange = new EventEmitter();
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-row-expand-icon');
}
onHostClick() {
if (!this.spaceMode) {
this.expand = !this.expand;
this.expandChange.next(this.expand);
}
}
}
NzRowExpandButtonDirective.decorators = [
{ type: Directive, args: [{
selector: 'button[nz-row-expand-button]',
host: {
'[type]': `'button'`,
'[class.ant-table-row-expand-icon-expanded]': `!spaceMode && expand === true`,
'[class.ant-table-row-expand-icon-collapsed]': `!spaceMode && expand === false`,
'[class.ant-table-row-expand-icon-spaced]': 'spaceMode',
'(click)': 'onHostClick()'
}
},] }
];
NzRowExpandButtonDirective.ctorParameters = () => [
{ type: ElementRef }
];
NzRowExpandButtonDirective.propDecorators = {
expand: [{ type: Input }],
spaceMode: [{ type: Input }],
expandChange: [{ type: Output }]
};
/**
* 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
*/
class NzRowIndentDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.indentSize = 0;
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-row-indent');
}
}
NzRowIndentDirective.decorators = [
{ type: Directive, args: [{
selector: 'nz-row-indent',
host: {
'[style.padding-left.px]': 'indentSize'
}
},] }
];
NzRowIndentDirective.ctorParameters = () => [
{ type: ElementRef }
];
NzRowIndentDirective.propDecorators = {
indentSize: [{ type: Input }]
};
/**
* 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
*/
class NzTableSelectionComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.listOfSelections = [];
this.checked = false;
this.disabled = false;
this.indeterminate = false;
this.showCheckbox = false;
this.showRowSelection = false;
this.checkedChange = new EventEmitter();
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-selection');
}
onCheckedChange(checked) {
this.checked = checked;
this.checkedChange.emit(checked);
}
}
NzTableSelectionComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-table-selection',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<label
*ngIf="showCheckbox"
nz-checkbox
[class.ant-table-selection-select-all-custom]="showRowSelection"
[ngModel]="checked"
[nzDisabled]="disabled"
[nzIndeterminate]="indeterminate"
(ngModelChange)="onCheckedChange($event)"
></label>
<div class="ant-table-selection-extra" *ngIf="showRowSelection">
<span nz-dropdown class="ant-table-selection-down" nzPlacement="bottomLeft" [nzDropdownMenu]="selectionMenu">
<i nz-icon nzType="down"></i>
</span>
<nz-dropdown-menu #selectionMenu="nzDropdownMenu">
<ul nz-menu class="ant-table-selection-menu">
<li nz-menu-item *ngFor="let selection of listOfSelections" (click)="selection.onSelect()">
{{ selection.text }}
</li>
</ul>
</nz-dropdown-menu>
</div>
`
},] }
];
NzTableSelectionComponent.ctorParameters = () => [
{ type: ElementRef }
];
NzTableSelectionComponent.propDecorators = {
listOfSelections: [{ type: Input }],
checked: [{ type: Input }],
disabled: [{ type: Input }],
indeterminate: [{ type: Input }],
showCheckbox: [{ type: Input }],
showRowSelection: [{ type: Input }],
checkedChange: [{ type: Output }]
};
/**
* 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
*/
class NzTableSortersComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.sortDirections = ['ascend', 'descend', null];
this.sortOrder = null;
this.contentTemplate = null;
this.isUp = false;
this.isDown = false;
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-column-sorters');
}
ngOnChanges(changes) {
const { sortDirections } = changes;
if (sortDirections) {
this.isUp = this.sortDirections.indexOf('ascend') !== -1;
this.isDown = this.sortDirections.indexOf('descend') !== -1;
}
}
}
NzTableSortersComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-table-sorters',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<span><ng-template [ngTemplateOutlet]="contentTemplate"></ng-template></span>
<span class="ant-table-column-sorter" [class.ant-table-column-sorter-full]="isDown && isUp">
<span class="ant-table-column-sorter-inner">
<i nz-icon nzType="caret-up" *ngIf="isUp" class="ant-table-column-sorter-up" [class.active]="sortOrder == 'ascend'"></i>
<i nz-icon nzType="caret-down" *ngIf="isDown" class="ant-table-column-sorter-down" [class.active]="sortOrder == 'descend'"></i>
</span>
</span>
`
},] }
];
NzTableSortersComponent.ctorParameters = () => [
{ type: ElementRef }
];
NzTableSortersComponent.propDecorators = {
sortDirections: [{ type: Input }],
sortOrder: [{ type: Input }],
contentTemplate: [{ type: Input }]
};
/**
* 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
*/
class NzCellFixedDirective {
constructor(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
this.nzRight = false;
this.nzLeft = false;
this.colspan = null;
this.colSpan = null;
this.changes$ = new Subject();
this.isAutoLeft = false;
this.isAutoRight = false;
this.isFixedLeft = false;
this.isFixedRight = false;
this.isFixed = false;
}
setAutoLeftWidth(autoLeft) {
this.renderer.setStyle(this.elementRef.nativeElement, 'left', autoLeft);
}
setAutoRightWidth(autoRight) {
this.renderer.setStyle(this.elementRef.nativeElement, 'right', autoRight);
}
setIsFirstRight(isFirstRight) {
this.setFixClass(isFirstRight, 'ant-table-cell-fix-right-first');
}
setIsLastLeft(isLastLeft) {
this.setFixClass(isLastLeft, 'ant-table-cell-fix-left-last');
}
setFixClass(flag, className) {
// the setFixClass function may call many times, so remove it first.
this.renderer.removeClass(this.elementRef.nativeElement, className);
if (flag) {
this.renderer.addClass(this.elementRef.nativeElement, className);
}
}
ngOnChanges() {
this.setIsFirstRight(false);
this.setIsLastLeft(false);
this.isAutoLeft = this.nzLeft === '' || this.nzLeft === true;
this.isAutoRight = this.nzRight === '' || this.nzRight === true;
this.isFixedLeft = this.nzLeft !== false;
this.isFixedRight = this.nzRight !== false;
this.isFixed = this.isFixedLeft || this.isFixedRight;
const validatePx = (value) => {
if (typeof value === 'string' && value !== '') {
return value;
}
else {
return null;
}
};
this.setAutoLeftWidth(validatePx(this.nzLeft));
this.setAutoRightWidth(validatePx(this.nzRight));
this.changes$.next();
}
}
NzCellFixedDirective.decorators = [
{ type: Directive, args: [{
selector: 'td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]',
host: {
'[class.ant-table-cell-fix-right]': `isFixedRight`,
'[class.ant-table-cell-fix-left]': `isFixedLeft`,
'[style.position]': `isFixed? 'sticky' : null`
}
},] }
];
NzCellFixedDirective.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
NzCellFixedDirective.propDecorators = {
nzRight: [{ type: Input }],
nzLeft: [{ type: Input }],
colspan: [{ type: Input }],
colSpan: [{ type: Input }]
};
/**
* 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
*/
class NzTableStyleService {
constructor() {
this.theadTemplate$ = new ReplaySubject(1);
this.hasFixLeft$ = new ReplaySubject(1);
this.hasFixRight$ = new ReplaySubject(1);
this.hostWidth$ = new ReplaySubject(1);
this.columnCount$ = new ReplaySubject(1);
this.showEmpty$ = new ReplaySubject(1);
this.noResult$ = new ReplaySubject(1);
this.listOfThWidthConfigPx$ = new BehaviorSubject([]);
this.tableWidthConfigPx$ = new BehaviorSubject([]);
this.manualWidthConfigPx$ = combineLatest([this.tableWidthConfigPx$, this.listOfThWidthConfigPx$]).pipe(map(([widthConfig, listOfWidth]) => (widthConfig.length ? widthConfig : listOfWidth)));
this.listOfAutoWidthPx$ = new ReplaySubject(1);
this.listOfListOfThWidthPx$ = merge(
/** init with manual width **/
this.manualWidthConfigPx$, combineLatest([this.listOfAutoWidthPx$, this.manualWidthConfigPx$]).pipe(map(([autoWidth, manualWidth]) => {
/** use autoWidth until column length match **/
if (autoWidth.length === manualWidth.length) {
return autoWidth.map((width, index) => {
if (width === '0px') {
return manualWidth[index] || null;
}
else {
return manualWidth[index] || width;
}
});
}
else {
return manualWidth;
}
})));
this.listOfMeasureColumn$ = new ReplaySubject(1);
this.listOfListOfThWidth$ = this.listOfAutoWidthPx$.pipe(map(list => list.map(width => parseInt(width, 10))));
this.enableAutoMeasure$ = new ReplaySubject(1);
}
setTheadTemplate(template) {
this.theadTemplate$.next(template);
}
setHasFixLeft(hasFixLeft) {
this.hasFixLeft$.next(hasFixLeft);
}
setHasFixRight(hasFixRight) {
this.hasFixRight$.next(hasFixRight);
}
setTableWidthConfig(widthConfig) {
this.tableWidthConfigPx$.next(widthConfig);
}
setListOfTh(listOfTh) {
let columnCount = 0;
listOfTh.forEach(th => {
columnCount += (th.colspan && +th.colspan) || (th.colSpan && +th.colSpan) || 1;
});
const listOfThPx = listOfTh.map(item => item.nzWidth);
this.columnCount$.next(columnCount);
this.listOfThWidthConfigPx$.next(listOfThPx);
}
setListOfMeasureColumn(listOfTh) {
const listOfKeys = [];
listOfTh.forEach(th => {
const length = (th.colspan && +th.colspan) || (th.colSpan && +th.colSpan) || 1;
for (let i = 0; i < length; i++) {
listOfKeys.push(`measure_key_${i}`);
}
});
this.listOfMeasureColumn$.next(listOfKeys);
}
setListOfAutoWidth(listOfAutoWidth) {
this.listOfAutoWidthPx$.next(listOfAutoWidth.map(width => `${width}px`));
}
setShowEmpty(showEmpty) {
this.showEmpty$.next(showEmpty);
}
setNoResult(noResult) {
this.noResult$.next(noResult);
}
setScroll(scrollX, scrollY) {
const enableAutoMeasure = !!(scrollX || scrollY);
if (!enableAutoMeasure) {
this.setListOfAutoWidth([]);
}
this.enableAutoMeasure$.next(enableAutoMeasure);
}
}
NzTableStyleService.decorators = [
{ type: Injectable }
];
NzTableStyleService.ctorParameters = () => [];
/**
* 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
*/
class NzTableCellDirective {
constructor(nzTableStyleService) {
this.isInsideTable = false;
this.isInsideTable = !!nzTableStyleService;
}
}
NzTableCellDirective.decorators = [
{ type: Directive, args: [{
selector: 'th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])',
host: {
'[class.ant-table-cell]': 'isInsideTable'
}
},] }
];
NzTableCellDirective.ctorParameters = () => [
{ type: NzTableStyleService, decorators: [{ type: Optional }] }
];
/**
* 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
*/
class NzTdAddOnComponent {
constructor() {
this.nzChecked = false;
this.nzDisabled = false;
this.nzIndeterminate = false;
this.nzIndentSize = 0;
this.nzShowExpand = false;
this.nzShowCheckbox = false;
this.nzExpand = false;
this.nzCheckedChange = new EventEmitter();
this.nzExpandChange = new EventEmitter();
this.isNzShowExpandChanged = false;
this.isNzShowCheckboxChanged = false;
}
onCheckedChange(checked) {
this.nzChecked = checked;
this.nzCheckedChange.emit(checked);
}
onExpandChange(expand) {
this.nzExpand = expand;
this.nzExpandChange.emit(expand);
}
ngOnChanges(changes) {
const isFirstChange = (value) => value && value.firstChange && value.currentValue !== undefined;
const { nzExpand, nzChecked, nzShowExpand, nzShowCheckbox } = changes;
if (nzShowExpand) {
this.isNzShowExpandChanged = true;
}
if (nzShowCheckbox) {
this.isNzShowCheckboxChanged = true;
}
if (isFirstChange(nzExpand) && !this.isNzShowExpandChanged) {
this.nzShowExpand = true;
}
if (isFirstChange(nzChecked) && !this.isNzShowCheckboxChanged) {
this.nzShowCheckbox = true;
}
}
}
NzTdAddOnComponent.decorators = [
{ type: Component, args: [{
selector: 'td[nzChecked], td[nzDisabled], td[nzIndeterminate], td[nzIndentSize], td[nzExpand], td[nzShowExpand], td[nzShowCheckbox]',
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
template: `
<ng-container *ngIf="nzShowExpand || nzIndentSize > 0">
<nz-row-indent [indentSize]="nzIndentSize"></nz-row-indent>
<button nz-row-expand-button [expand]="nzExpand" (expandChange)="onExpandChange($event)" [spaceMode]="!nzShowExpand"></button>
</ng-container>
<label
nz-checkbox
*ngIf="nzShowCheckbox"
[nzDisabled]="nzDisabled"
[ngModel]="nzChecked"
[nzIndeterminate]="nzIndeterminate"
(ngModelChange)="onCheckedChange($event)"
>
</label>
<ng-content></ng-content>
`,
host: {
'[class.ant-table-cell-with-append]': `nzShowExpand || nzIndentSize > 0`,
'[class.ant-table-selection-column]': `nzShowCheckbox`
}
},] }
];
NzTdAddOnComponent.propDecorators = {
nzChecked: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzIndeterminate: [{ type: Input }],
nzIndentSize: [{ type: Input }],
nzShowExpand: [{ type: Input }],
nzShowCheckbox: [{ type: Input }],
nzExpand: [{ type: Input }],
nzCheckedChange: [{ type: Output }],
nzExpandChange: [{ type: Output }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzTdAddOnComponent.prototype, "nzShowExpand", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzTdAddOnComponent.prototype, "nzShowCheckbox", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzTdAddOnComponent.prototype, "nzExpand", void 0);
class NzThAddOnComponent {
constructor(cdr) {
this.cdr = cdr;
this.manualClickOrder$ = new Subject();
this.calcOperatorChange$ = new Subject();
this.nzFilterValue = null;
this.sortOrder = null;
this.sortDirections = ['ascend', 'descend', null];
this.sortOrderChange$ = new Subject();
this.destroy$ = new Subject();
this.isNzShowSortChanged = false;
this.isNzShowFilterChanged = false;
this.nzFilterMultiple = true;
this.nzSortOrder = null;
this.nzSortPriority = false;
this.nzSortDirections = ['ascend', 'descend', null];
this.nzFilters = [];
this.nzSortFn = null;
this.nzFilterFn = null;
this.nzShowSort = false;
this.nzShowFilter = false;
this.nzCustomFilter = false;
this.nzCheckedChange = new EventEmitter();
this.nzSortOrderChange = new EventEmitter();
this.nzFilterChange = new EventEmitter();
}
getNextSortDirection(sortDirections, current) {
const index = sortDirections.indexOf(current);
if (index === sortDirections.length - 1) {
return sortDirections[0];
}
else {
return sortDirections[index + 1];
}
}
emitNextSortValue() {
if (this.nzShowSort) {
const nextOrder = this.getNextSortDirection(this.sortDirections, this.sortOrder);
this.setSortOrder(nextOrder);
this.manualClickOrder$.next(this);
}
}
setSortOrder(order) {
this.sortOrderChange$.next(order);
}
clearSortOrder() {
if (this.sortOrder !== null) {
this.setSortOrder(null);
}
}
onFilterValueChange(value) {
this.nzFilterChange.emit(value);
this.nzFilterValue = value;
this.updateCalcOperator();
}
updateCalcOperator() {
this.calcOperatorChange$.next();
}
ngOnInit() {
this.sortOrderChange$.pipe(takeUntil(this.destroy$)).subscribe(order => {
if (this.sortOrder !== order) {
this.sortOrder = order;
this.nzSortOrderChange.emit(order);
}
this.updateCalcOperator();
this.cdr.markForCheck();
});
}
ngOnChanges(changes) {
const { nzSortDirections, nzFilters, nzSortOrder, nzSortFn, nzFilterFn, nzSortPriority, nzFilterMultiple, nzShowSort, nzShowFilter } = changes;
if (nzSortDirections) {
if (this.nzSortDirections && this.nzSortDirections.length) {
this.sortDirections = this.nzSortDirections;
}
}
if (nzSortOrder) {
this.sortOrder = this.nzSortOrder;
this.setSortOrder(this.nzSortOrder);
}
if (nzShowSort) {
this.isNzShowSortChanged = true;
}
if (nzShowFilter) {
this.isNzShowFilterChanged = true;
}
const isFirstChange = (value) => value && value.firstChange && value.currentValue !== undefined;
if ((isFirstChange(nzSortOrder) || isFirstChange(nzSortFn)) && !this.isNzShowSortChanged) {
this.nzShowSort = true;
}
if (isFirstChange(nzFilters) && !this.isNzShowFilterChanged) {
this.nzShowFilter = true;
}
if ((nzFilters || nzFilterMultiple) && this.nzShowFilter) {
const listOfValue = this.nzFilters.filter(item => item.byDefault).map(item => item.value);
this.nzFilterValue = this.nzFilterMultiple ? listOfValue : listOfValue[0] || null;
}
if (nzSortFn || nzFilterFn || nzSortPriority || nzFilters) {
this.updateCalcOperator();
}
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzThAddOnComponent.decorators = [
{ type: Component, args: [{
selector: 'th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<nz-table-filter
*ngIf="nzShowFilter || nzCustomFilter; else notFilterTemplate"
[contentTemplate]="notFilterTemplate"
[extraTemplate]="extraTemplate"
[customFilter]="nzCustomFilter"
[filterMultiple]="nzFilterMultiple"
[listOfFilter]="nzFilters"
(filterChange)="onFilterValueChange($event)"
></nz-table-filter>
<ng-template #notFilterTemplate>
<ng-template [ngTemplateOutlet]="nzShowSort ? sortTemplate : contentTemplate"></ng-template>
</ng-template>
<ng-template #extraTemplate>
<ng-content select="[nz-th-extra]"></ng-content>
<ng-content select="nz-filter-trigger"></ng-content>
</ng-template>
<ng-template #sortTemplate>
<nz-table-sorters [sortOrder]="sortOrder" [sortDirections]="sortDirections" [contentTemplate]="contentTemplate"></nz-table-sorters>
</ng-template>
<ng-template #contentTemplate>
<ng-content></ng-content>
</ng-template>
`,
host: {
'[class.ant-table-column-has-sorters]': 'nzShowSort',
'[class.ant-table-column-sort]': `sortOrder === 'descend' || sortOrder === 'ascend'`,
'(click)': 'emitNextSortValue()'
}
},] }
];
NzThAddOnComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NzThAddOnComponent.propDecorators = {
nzColumnKey: [{ type: Input }],
nzFilterMultiple: [{ type: Input }],
nzSortOrder: [{ type: Input }],
nzSortPriority: [{ type: Input }],
nzSortDirections: [{ type: Input }],
nzFilters: [{ type: Input }],
nzSortFn: [{ type: Input }],
nzFilterFn: [{ type: Input }],
nzShowSort: [{ type: Input }],
nzShowFilter: [{ type: Input }],
nzCustomFilter: [{ type: Input }],
nzCheckedChange: [{ type: Output }],
nzSortOrderChange: [{ type: Output }],
nzFilterChange: [{ type: Output }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzThAddOnComponent.prototype, "nzShowSort", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzThAddOnComponent.prototype, "nzShowFilter", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzThAddOnComponent.prototype, "nzCustomFilter", void 0);
/**
* 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
*/
class NzThMeasureDirective {
constructor(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
this.changes$ = new Subject();
this.nzWidth = null;
this.colspan = null;
this.colSpan = null;
this.rowspan = null;
this.rowSpan = null;
}
ngOnChanges(changes) {
const { nzWidth, colspan, rowspan, colSpan, rowSpan } = changes;
if (colspan || colSpan) {
const col = this.colspan || this.colSpan;
if (!isNil(col)) {
this.renderer.setAttribute(this.elementRef.nativeElement, 'colspan', `${col}`);
}
else {
this.renderer.removeAttribute(this.elementRef.nativeElement, 'colspan');
}
}
if (rowspan || rowSpan) {
const row = this.rowspan || this.rowSpan;
if (!isNil(row)) {
this.renderer.setAttribute(this.elementRef.nativeElement, 'rowspan', `${row}`);
}
else {
this.renderer.removeAttribute(this.elementRef.nativeElement, 'rowspan');
}
}
if (nzWidth || colspan) {
this.changes$.next();
}
}
}
NzThMeasureDirective.decorators = [
{ type: Directive, args: [{
selector: 'th'
},] }
];
NzThMeasureDirective.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
NzThMeasureDirective.propDecorators = {
nzWidth: [{ type: Input }],
colspan: [{ type: Input }],
colSpan: [{ type: Input }],
rowspan: [{ type: Input }],
rowSpan: [{ type: Input }]
};
class NzThSelectionComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.nzSelections = [];
this.nzChecked = false;
this.nzDisabled = false;
this.nzIndeterminate = false;
this.nzShowCheckbox = false;
this.nzShowRowSelection = false;
this.nzCheckedChange = new EventEmitter();
this.isNzShowExpandChanged = false;
this.isNzShowCheckboxChanged = false;
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-selection-column');
}
onCheckedChange(checked) {
this.nzChecked = checked;
this.nzCheckedChange.emit(checked);
}
ngOnChanges(changes) {
const isFirstChange = (value) => value && value.firstChange && value.currentValue !== undefined;
const { nzChecked, nzSelections, nzShowExpand, nzShowCheckbox } = changes;
if (nzShowExpand) {
this.isNzShowExpandChanged = true;
}
if (nzShowCheckbox) {
this.isNzShowCheckboxChanged = true;
}
if (isFirstChange(nzSelections) && !this.isNzShowExpandChanged) {
this.nzShowRowSelection = true;
}
if (isFirstChange(nzChecked) && !this.isNzShowCheckboxChanged) {
this.nzShowCheckbox = true;
}
}
}
NzThSelectionComponent.decorators = [
{ type: Component, args: [{
selector: 'th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<nz-table-selection
[checked]="nzChecked"
[disabled]="nzDisabled"
[indeterminate]="nzIndeterminate"
[listOfSelections]="nzSelections"
[showCheckbox]="nzShowCheckbox"
[showRowSelection]="nzShowRowSelection"
(checkedChange)="onCheckedChange($event)"
></nz-table-selection>
<ng-content></ng-content>
`
},] }
];
NzThSelectionComponent.ctorParameters = () => [
{ type: ElementRef }
];
NzThSelectionComponent.propDecorators = {
nzSelections: [{ type: Input }],
nzChecked: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzIndeterminate: [{ type: Input }],
nzShowCheckbox: [{ type: Input }],
nzShowRowSelection: [{ type: Input }],
nzCheckedChange: [{ type: Output }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzThSelectionComponent.prototype, "nzShowCheckbox", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzThSelectionComponent.prototype, "nzShowRowSelection", void 0);
/**
* 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
*/
class NzCellAlignDirective {
constructor() {
this.nzAlign = null;
}
}
NzCellAlignDirective.decorators = [
{ type: Directive, args: [{
selector: 'th[nzAlign],td[nzAlign]',
host: {
'[style.text-align]': 'nzAlign'
}
},] }
];
NzCellAlignDirective.propDecorators = {
nzAlign: [{ type: Input }]
};
/**
* 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
*/
class NzCellEllipsisDirective {
constructor() {
this.nzEllipsis = true;
}
}
NzCellEllipsisDirective.decorators = [
{ type: Directive, args: [{
selector: 'th[nzEllipsis],td[nzEllipsis]',
host: {
'[class.ant-table-cell-ellipsis]': 'nzEllipsis'
}
},] }
];
NzCellEllipsisDirective.propDecorators = {
nzEllipsis: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCellEllipsisDirective.prototype, "nzEllipsis", void 0);
/**
* 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
*/
class NzCellBreakWordDirective {
constructor() {
this.nzBreakWord = true;
}
}
NzCellBreakWordDirective.decorators = [
{ type: Directive, args: [{
selector: 'th[nzBreakWord],td[nzBreakWord]',
host: {
'[style.word-break]': `nzBreakWord ? 'break-all' : ''`
}
},] }
];
NzCellBreakWordDirective.propDecorators = {
nzBreakWord: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzCellBreakWordDirective.prototype, "nzBreakWord", void 0);
/**
* 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
*/
class NzTableContentComponent {
constructor() {
this.tableLayout = 'auto';
this.theadTemplate = null;
this.contentTemplate = null;
this.listOfColWidth = [];
this.scrollX = null;
}
}
NzTableContentComponent.decorators = [
{ type: Component, args: [{
selector: 'table[nz-table-content]',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<col [style.width]="width" [style.minWidth]="width" *ngFor="let width of listOfColWidth" />
<thead class="ant-table-thead" *ngIf="theadTemplate">
<ng-template [ngTemplateOutlet]="theadTemplate"></ng-template>
</thead>
<ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
<ng-content></ng-content>
`,
host: {
'[style.table-layout]': 'tableLayout',
'[class.ant-table-fixed]': 'scrollX',
'[style.width]': 'scrollX',
'[style.min-width]': `scrollX ? '100%': null`
}
},] }
];
NzTableContentComponent.propDecorators = {
tableLayout: [{ type: Input }],
theadTemplate: [{ type: Input }],
contentTemplate: [{ type: Input }],
listOfColWidth: [{ type: Input }],
scrollX: [{ type: Input }]
};
/**
* 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
*/
class NzTableFixedRowComponent {
constructor(nzTableStyleService, renderer) {
this.nzTableStyleService = nzTableStyleService;
this.renderer = renderer;
this.hostWidth$ = new BehaviorSubject(null);
this.enableAutoMeasure$ = new BehaviorSubject(false);
this.destroy$ = new Subject();
}
ngOnInit() {
if (this.nzTableStyleService) {
const { enableAutoMeasure$, hostWidth$ } = this.nzTableStyleService;
enableAutoMeasure$.pipe(takeUntil(this.destroy$)).subscribe(this.enableAutoMeasure$);
hostWidth$.subscribe(this.hostWidth$);
}
}
ngAfterViewInit() {
this.nzTableStyleService.columnCount$.pipe(takeUntil(this.destroy$)).subscribe(count => {
this.renderer.setAttribute(this.tdElement.nativeElement, 'colspan', `${count}`);
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzTableFixedRowComponent.decorators = [
{ type: Component, args: [{
selector: 'tr[nz-table-fixed-row], tr[nzExpand]',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<td class="nz-disable-td ant-table-cell" #tdElement>
<div
class="ant-table-expanded-row-fixed"
*ngIf="enableAutoMeasure$ | async; else contentTemplate"
style="position: sticky; left: 0px; overflow: hidden;"
[style.width.px]="hostWidth$ | async"
>
<ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
</div>
</td>
<ng-template #contentTemplate><ng-content></ng-content></ng-template>
`
},] }
];
NzTableFixedRowComponent.ctorParameters = () => [
{ type: NzTableStyleService },
{ type: Renderer2 }
];
NzTableFixedRowComponent.propDecorators = {
tdElement: [{ type: ViewChild, args: ['tdElement',] }]
};
/**
* 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
*/
class NzTableInnerDefaultComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.tableLayout = 'auto';
this.listOfColWidth = [];
this.theadTemplate = null;
this.contentTemplate = null;
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-container');
}
}
NzTableInnerDefaultComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-table-inner-default',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<div class="ant-table-content">
<table
nz-table-content
[contentTemplate]="contentTemplate"
[tableLayout]="tableLayout"
[listOfColWidth]="listOfColWidth"
[theadTemplate]="theadTemplate"
></table>
</div>
`
},] }
];
NzTableInnerDefaultComponent.ctorParameters = () => [
{ type: ElementRef }
];
NzTableInnerDefaultComponent.propDecorators = {
tableLayout: [{ type: Input }],
listOfColWidth: [{ type: Input }],
theadTemplate: [{ type: Input }],
contentTemplate: [{ type: Input }]
};
/**
* 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
*/
class NzTableInnerScrollComponent {
constructor(renderer, ngZone, platform, resizeService, elementRef) {
this.renderer = renderer;
this.ngZone = ngZone;
this.platform = platform;
this.resizeService = resizeService;
this.elementRef = elementRef;
this.data = [];
this.scrollX = null;
this.scrollY = null;
this.contentTemplate = null;
this.widthConfig = [];
this.listOfColWidth = [];
this.theadTemplate = null;
this.virtualTemplate = null;
this.virtualItemSize = 0;
this.virtualMaxBufferPx = 200;
this.virtualMinBufferPx = 100;
this.virtualForTrackBy = index => index;
this.headerStyleMap = {};
this.bodyStyleMap = {};
this.verticalScrollBarWidth = 0;
this.noDateVirtualHeight = '182px';
this.data$ = new Subject();
this.scroll$ = new Subject();
this.destroy$ = new Subject();
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-table-container');
}
setScrollPositionClassName(clear = false) {
const { scrollWidth, scrollLeft, clientWidth } = this.tableBodyElement.nativeElement;
const leftClassName = 'ant-table-ping-left';
const rightClassName = 'ant-table-ping-right';
if ((scrollWidth === clientWidth && scrollWidth !== 0) || clear) {
this.renderer.removeClass(this.tableMainElement, leftClassName);
this.renderer.removeClass(this.tableMainElement, rightClassName);
}
else if (scrollLeft === 0) {
this.renderer.removeClass(this.tableMainElement, leftClassName);
this.renderer.addClass(this.tableMainElement, rightClassName);
}
else if (scrollWidth === scrollLeft + clientWidth) {
this.renderer.removeClass(this.tableMainElement, rightClassName);
this.renderer.addClass(this.tableMainElement, leftClassName);
}
else {
this.renderer.addClass(this.tableMainElement, leftClassName);
this.renderer.addClass(this.tableMainElement, rightClassName);
}
}
ngOnChanges(changes) {
const { scrollX, scrollY, data } = changes;
if (scrollX || scrollY) {
const hasVerticalScrollBar = this.verticalScrollBarWidth !== 0;
this.headerStyleMap = {
overflowX: 'hidden',
overflowY: this.scrollY && hasVerticalScrollBar ? 'scroll' : 'hidden'
};
this.bodyStyleMap = {
overflowY: this.scrollY ? 'scroll' : 'hidden',
overflowX: this.scrollX ? 'auto' : null,
maxHeight: this.scrollY
};
this.scroll$.next();
}
if (data) {
this.data$.next();
}
}
ngAfterViewInit() {
if (this.platform.isBrowser) {
this.ngZone.runOutsideAngular(() => {
const scrollEvent$ = this.scroll$.pipe(startWith(null), delay(0), switchMap(() => fromEvent(this.tableBodyElement.nativeElement, 'scroll').pipe(startWith(true))), takeUntil(this.destroy$));
const resize$ = this.resizeService.subscribe().pipe(takeUntil(this.destroy$));
const data$ = this.data$.pipe(takeUntil(this.destroy$));
const setClassName$ = merge(scrollEvent$, resize$, data$, this.scroll$).pipe(startWith(true), delay(0), takeUntil(this.destroy$));
setClassName$.subscribe(() => this.setScrollPositionClassName());
scrollEvent$
.pipe(filter(() => !!this.scrollY))
.subscribe(() => (this.tableHeaderElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft));
});
}
}
ngOnDestroy() {
this.setScrollPositionClassName(true);
this.destroy$.next();
this.destroy$.complete();
}
}
NzTableInnerScrollComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-table-inner-scroll',
changeDetection: ChangeDetectionStrategy.OnPush,
en