UNPKG

ng-zorro-antd

Version:

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

978 lines (966 loc) 169 kB
import * as i0 from '@angular/core'; import { EventEmitter, ElementRef, booleanAttribute, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, Injectable, inject, NgZone, ViewChildren, ContentChild, ContentChildren, NgModule } from '@angular/core'; import { __esDecorate, __runInitializers } from 'tslib'; import { takeUntil, map, distinctUntilChanged, debounceTime, skip, filter, switchMap, startWith, delay, mergeMap } from 'rxjs/operators'; import * as i1 from 'ng-zorro-antd/core/config'; import { WithConfig } from 'ng-zorro-antd/core/config'; import * as i2 from 'ng-zorro-antd/core/services'; import { NzDestroyService } from 'ng-zorro-antd/core/services'; import { fromEventOutsideAngular, arraysEqual, isNil, measureScrollbar } from 'ng-zorro-antd/core/util'; import * as i4 from 'ng-zorro-antd/dropdown'; import { NzDropDownModule, NzDropDownDirective } from 'ng-zorro-antd/dropdown'; import { NgTemplateOutlet, AsyncPipe } from '@angular/common'; import * as i6 from '@angular/forms'; import { FormsModule } from '@angular/forms'; import { Subject, ReplaySubject, BehaviorSubject, combineLatest, merge, EMPTY, of } from 'rxjs'; import * as i7 from 'ng-zorro-antd/button'; import { NzButtonModule } from 'ng-zorro-antd/button'; import * as i5 from 'ng-zorro-antd/checkbox'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import * as i2$1 from 'ng-zorro-antd/icon'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzRadioComponent } from 'ng-zorro-antd/radio'; import * as i1$1 from 'ng-zorro-antd/i18n'; import * as i3 from 'ng-zorro-antd/menu'; import * as i8 from 'ng-zorro-antd/core/transition-patch'; import * as i9 from 'ng-zorro-antd/core/wave'; import * as i3$1 from '@angular/cdk/scrolling'; import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import * as i1$3 from 'ng-zorro-antd/empty'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import * as i1$2 from 'ng-zorro-antd/cdk/resize-observer'; import * as i1$4 from '@angular/cdk/platform'; import * as i6$1 from 'ng-zorro-antd/pagination'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzSpinComponent } from 'ng-zorro-antd/spin'; import * as i1$5 from 'ng-zorro-antd/core/outlet'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import * as i5$1 from '@angular/cdk/bidi'; const NZ_CONFIG_MODULE_NAME$2 = 'filterTrigger'; let NzFilterTriggerComponent = (() => { let _nzBackdrop_decorators; let _nzBackdrop_initializers = []; let _nzBackdrop_extraInitializers = []; return class NzFilterTriggerComponent { static { const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0; _nzBackdrop_decorators = [WithConfig()]; __esDecorate(null, null, _nzBackdrop_decorators, { kind: "field", name: "nzBackdrop", static: false, private: false, access: { has: obj => "nzBackdrop" in obj, get: obj => obj.nzBackdrop, set: (obj, value) => { obj.nzBackdrop = value; } }, metadata: _metadata }, _nzBackdrop_initializers, _nzBackdrop_extraInitializers); if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata }); } nzConfigService; cdr; destroy$; _nzModuleName = NZ_CONFIG_MODULE_NAME$2; nzActive = false; nzDropdownMenu; nzVisible = false; nzBackdrop = __runInitializers(this, _nzBackdrop_initializers, false); nzVisibleChange = (__runInitializers(this, _nzBackdrop_extraInitializers), new EventEmitter()); nzDropdown; onVisibleChange(visible) { this.nzVisible = visible; this.nzVisibleChange.next(visible); } hide() { this.nzVisible = false; this.cdr.markForCheck(); } show() { this.nzVisible = true; this.cdr.markForCheck(); } constructor(nzConfigService, cdr, destroy$) { this.nzConfigService = nzConfigService; this.cdr = cdr; this.destroy$ = destroy$; } ngOnInit() { fromEventOutsideAngular(this.nzDropdown.nativeElement, 'click') .pipe(takeUntil(this.destroy$)) .subscribe(event => { event.stopPropagation(); }); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzFilterTriggerComponent, deps: [{ token: i1.NzConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzFilterTriggerComponent, isStandalone: true, selector: "nz-filter-trigger", inputs: { nzActive: "nzActive", nzDropdownMenu: "nzDropdownMenu", nzVisible: "nzVisible", nzBackdrop: ["nzBackdrop", "nzBackdrop", booleanAttribute] }, outputs: { nzVisibleChange: "nzVisibleChange" }, providers: [NzDestroyService], viewQueries: [{ propertyName: "nzDropdown", first: true, predicate: NzDropDownDirective, descendants: true, read: ElementRef, static: true }], exportAs: ["nzFilterTrigger"], ngImport: i0, template: ` <span nz-dropdown class="ant-table-filter-trigger" nzTrigger="click" nzPlacement="bottomRight" [nzBackdrop]="nzBackdrop" [nzClickHide]="false" [nzDropdownMenu]="nzDropdownMenu" [class.active]="nzActive" [class.ant-table-filter-open]="nzVisible" [nzVisible]="nzVisible" (nzVisibleChange)="onVisibleChange($event)" > <ng-content></ng-content> </span> `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }; })(); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: 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" [nzBackdrop]="nzBackdrop" [nzClickHide]="false" [nzDropdownMenu]="nzDropdownMenu" [class.active]="nzActive" [class.ant-table-filter-open]="nzVisible" [nzVisible]="nzVisible" (nzVisibleChange)="onVisibleChange($event)" > <ng-content></ng-content> </span> `, providers: [NzDestroyService], imports: [NzDropDownModule] }] }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.NzDestroyService }], propDecorators: { nzActive: [{ type: Input }], nzDropdownMenu: [{ type: Input }], nzVisible: [{ type: Input }], nzBackdrop: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzVisibleChange: [{ type: Output }], nzDropdown: [{ type: ViewChild, args: [NzDropDownDirective, { static: true, read: ElementRef }] }] } }); /** * 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 { cdr; i18n; contentTemplate = null; customFilter = false; extraTemplate = null; filterMultiple = true; listOfFilter = []; filterChange = new EventEmitter(); destroy$ = new Subject(); locale; isChecked = false; isVisible = false; listOfParsedFilter = []; listOfChecked = []; check(filter) { if (this.filterMultiple) { this.listOfParsedFilter = this.listOfParsedFilter.map(item => { if (item === filter) { return { ...item, checked: !filter.checked }; } else { return item; } }); filter.checked = !filter.checked; } else { this.listOfParsedFilter = this.listOfParsedFilter.map(item => ({ ...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); } constructor(cdr, i18n) { this.cdr = cdr; this.i18n = i18n; } 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(true); this.destroy$.complete(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NzI18nService }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzTableFilterComponent, isStandalone: true, selector: "nz-table-filter", inputs: { contentTemplate: "contentTemplate", customFilter: "customFilter", extraTemplate: "extraTemplate", filterMultiple: "filterMultiple", listOfFilter: "listOfFilter" }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "ant-table-filter-column" }, usesOnChanges: true, ngImport: i0, template: ` <span class="ant-table-column-title"> <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template> </span> @if (!customFilter) { <nz-filter-trigger [nzVisible]="isVisible" [nzActive]="isChecked" [nzDropdownMenu]="filterMenu" (nzVisibleChange)="onVisibleChange($event)" > <nz-icon nzType="filter" nzTheme="fill" /> </nz-filter-trigger> <nz-dropdown-menu #filterMenu="nzDropdownMenu"> <div class="ant-table-filter-dropdown"> <ul nz-menu> @for (f of listOfParsedFilter; track f.value) { <li nz-menu-item [nzSelected]="f.checked" (click)="check(f)"> @if (!filterMultiple) { <label nz-radio [ngModel]="f.checked" (ngModelChange)="check(f)"></label> } @else { <label nz-checkbox [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> } @else { <ng-container [ngTemplateOutlet]="extraTemplate"></ng-container> } `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NzFilterTriggerComponent, selector: "nz-filter-trigger", inputs: ["nzActive", "nzDropdownMenu", "nzVisible", "nzBackdrop"], outputs: ["nzVisibleChange"], exportAs: ["nzFilterTrigger"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2$1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "component", type: NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i5.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i7.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i8.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i9.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableFilterComponent, decorators: [{ type: Component, args: [{ selector: 'nz-table-filter', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: ` <span class="ant-table-column-title"> <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template> </span> @if (!customFilter) { <nz-filter-trigger [nzVisible]="isVisible" [nzActive]="isChecked" [nzDropdownMenu]="filterMenu" (nzVisibleChange)="onVisibleChange($event)" > <nz-icon nzType="filter" nzTheme="fill" /> </nz-filter-trigger> <nz-dropdown-menu #filterMenu="nzDropdownMenu"> <div class="ant-table-filter-dropdown"> <ul nz-menu> @for (f of listOfParsedFilter; track f.value) { <li nz-menu-item [nzSelected]="f.checked" (click)="check(f)"> @if (!filterMultiple) { <label nz-radio [ngModel]="f.checked" (ngModelChange)="check(f)"></label> } @else { <label nz-checkbox [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> } @else { <ng-container [ngTemplateOutlet]="extraTemplate"></ng-container> } `, host: { class: 'ant-table-filter-column' }, imports: [ NgTemplateOutlet, NzFilterTriggerComponent, NzIconModule, NzDropDownModule, NzRadioComponent, NzCheckboxModule, FormsModule, NzButtonModule ] }] }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.NzI18nService }], 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 { expand = false; spaceMode = false; expandChange = new EventEmitter(); onHostClick() { if (!this.spaceMode) { this.expand = !this.expand; this.expandChange.next(this.expand); } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRowExpandButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzRowExpandButtonDirective, isStandalone: true, selector: "button[nz-row-expand-button]", inputs: { expand: "expand", spaceMode: "spaceMode" }, outputs: { expandChange: "expandChange" }, host: { listeners: { "click": "onHostClick()" }, properties: { "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" }, classAttribute: "ant-table-row-expand-icon" }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRowExpandButtonDirective, decorators: [{ type: Directive, args: [{ selector: 'button[nz-row-expand-button]', host: { class: 'ant-table-row-expand-icon', '[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()' } }] }], 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 { indentSize = 0; static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRowIndentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzRowIndentDirective, isStandalone: true, selector: "nz-row-indent", inputs: { indentSize: "indentSize" }, host: { properties: { "style.padding-left.px": "indentSize" }, classAttribute: "ant-table-row-indent" }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRowIndentDirective, decorators: [{ type: Directive, args: [{ selector: 'nz-row-indent', host: { class: 'ant-table-row-indent', '[style.padding-left.px]': 'indentSize' } }] }], 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 { listOfSelections = []; checked = false; disabled = false; indeterminate = false; label = null; showCheckbox = false; showRowSelection = false; checkedChange = new EventEmitter(); onCheckedChange(checked) { this.checked = checked; this.checkedChange.emit(checked); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzTableSelectionComponent, isStandalone: true, selector: "nz-table-selection", inputs: { listOfSelections: "listOfSelections", checked: "checked", disabled: "disabled", indeterminate: "indeterminate", label: "label", showCheckbox: "showCheckbox", showRowSelection: "showRowSelection" }, outputs: { checkedChange: "checkedChange" }, host: { classAttribute: "ant-table-selection" }, ngImport: i0, template: ` @if (showCheckbox) { <label nz-checkbox [class.ant-table-selection-select-all-custom]="showRowSelection" [ngModel]="checked" [nzDisabled]="disabled" [nzIndeterminate]="indeterminate" [attr.aria-label]="label" (ngModelChange)="onCheckedChange($event)" ></label> } @if (showRowSelection) { <div class="ant-table-selection-extra"> <span nz-dropdown class="ant-table-selection-down" nzPlacement="bottomLeft" [nzDropdownMenu]="selectionMenu"> <nz-icon nzType="down" /> </span> <nz-dropdown-menu #selectionMenu="nzDropdownMenu"> <ul nz-menu class="ant-table-selection-menu"> @for (selection of listOfSelections; track selection) { <li nz-menu-item (click)="selection.onSelect()"> {{ selection.text }} </li> } </ul> </nz-dropdown-menu> </div> } `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i5.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i3.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i3.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2$1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableSelectionComponent, decorators: [{ type: Component, args: [{ selector: 'nz-table-selection', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: ` @if (showCheckbox) { <label nz-checkbox [class.ant-table-selection-select-all-custom]="showRowSelection" [ngModel]="checked" [nzDisabled]="disabled" [nzIndeterminate]="indeterminate" [attr.aria-label]="label" (ngModelChange)="onCheckedChange($event)" ></label> } @if (showRowSelection) { <div class="ant-table-selection-extra"> <span nz-dropdown class="ant-table-selection-down" nzPlacement="bottomLeft" [nzDropdownMenu]="selectionMenu"> <nz-icon nzType="down" /> </span> <nz-dropdown-menu #selectionMenu="nzDropdownMenu"> <ul nz-menu class="ant-table-selection-menu"> @for (selection of listOfSelections; track selection) { <li nz-menu-item (click)="selection.onSelect()"> {{ selection.text }} </li> } </ul> </nz-dropdown-menu> </div> } `, host: { class: 'ant-table-selection' }, imports: [FormsModule, NzCheckboxModule, NzDropDownModule, NzIconModule] }] }], propDecorators: { listOfSelections: [{ type: Input }], checked: [{ type: Input }], disabled: [{ type: Input }], indeterminate: [{ type: Input }], label: [{ 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 { sortDirections = ['ascend', 'descend', null]; sortOrder = null; contentTemplate = null; isUp = false; isDown = false; ngOnChanges(changes) { const { sortDirections } = changes; if (sortDirections) { this.isUp = this.sortDirections.indexOf('ascend') !== -1; this.isDown = this.sortDirections.indexOf('descend') !== -1; } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableSortersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzTableSortersComponent, isStandalone: true, selector: "nz-table-sorters", inputs: { sortDirections: "sortDirections", sortOrder: "sortOrder", contentTemplate: "contentTemplate" }, host: { classAttribute: "ant-table-column-sorters" }, usesOnChanges: true, ngImport: i0, template: ` <span class="ant-table-column-title"><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"> @if (isUp) { <nz-icon nzType="caret-up" class="ant-table-column-sorter-up" [class.active]="sortOrder === 'ascend'" /> } @if (isDown) { <nz-icon nzType="caret-down" class="ant-table-column-sorter-down" [class.active]="sortOrder === 'descend'" /> } </span> </span> `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2$1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableSortersComponent, decorators: [{ type: Component, args: [{ selector: 'nz-table-sorters', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: ` <span class="ant-table-column-title"><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"> @if (isUp) { <nz-icon nzType="caret-up" class="ant-table-column-sorter-up" [class.active]="sortOrder === 'ascend'" /> } @if (isDown) { <nz-icon nzType="caret-down" class="ant-table-column-sorter-down" [class.active]="sortOrder === 'descend'" /> } </span> </span> `, host: { class: 'ant-table-column-sorters' }, imports: [NzIconModule, NgTemplateOutlet] }] }], 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 { renderer; elementRef; nzRight = false; nzLeft = false; colspan = null; colSpan = null; changes$ = new Subject(); isAutoLeft = false; isAutoRight = false; isFixedLeft = false; isFixedRight = false; 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); } } constructor(renderer, elementRef) { this.renderer = renderer; this.elementRef = elementRef; } 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(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCellFixedDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzCellFixedDirective, isStandalone: true, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: { nzRight: "nzRight", nzLeft: "nzLeft", colspan: "colspan", colSpan: "colSpan" }, host: { properties: { "class.ant-table-cell-fix-right": "isFixedRight", "class.ant-table-cell-fix-left": "isFixedLeft", "style.position": "isFixed? 'sticky' : null" } }, usesOnChanges: true, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: 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` } }] }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], 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 { theadTemplate$ = new ReplaySubject(1); tfootTemplate$ = new ReplaySubject(1); tfootFixed$ = new ReplaySubject(1); hasFixLeft$ = new ReplaySubject(1); hasFixRight$ = new ReplaySubject(1); hostWidth$ = new ReplaySubject(1); columnCount$ = new ReplaySubject(1); showEmpty$ = new ReplaySubject(1); noResult$ = new ReplaySubject(1); listOfThWidthConfigPx$ = new BehaviorSubject([]); tableWidthConfigPx$ = new BehaviorSubject([]); manualWidthConfigPx$ = combineLatest([this.tableWidthConfigPx$, this.listOfThWidthConfigPx$]).pipe(map(([widthConfig, listOfWidth]) => (widthConfig.length ? widthConfig : listOfWidth))); listOfAutoWidthPx$ = new ReplaySubject(1); 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; } }))); listOfMeasureColumn$ = new ReplaySubject(1); listOfListOfThWidth$ = this.listOfAutoWidthPx$.pipe(map(list => list.map(width => parseInt(width, 10)))); enableAutoMeasure$ = new ReplaySubject(1); setTheadTemplate(template) { this.theadTemplate$.next(template); } setTfootTemplate(template) { this.tfootTemplate$.next(template); } setTfootFixed(fixed) { this.tfootFixed$.next(fixed); } 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); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableStyleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableStyleService }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableStyleService, decorators: [{ type: Injectable }] }); /** * 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 { isInsideTable = !!inject(NzTableStyleService, { optional: true }); static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzTableCellDirective, isStandalone: true, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])", host: { properties: { "class.ant-table-cell": "isInsideTable" } }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: 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' } }] }] }); /** * 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 NzTableDataService { destroy$ = new Subject(); pageIndex$ = new BehaviorSubject(1); frontPagination$ = new BehaviorSubject(true); pageSize$ = new BehaviorSubject(10); listOfData$ = new BehaviorSubject([]); listOfCustomColumn$ = new BehaviorSubject([]); pageIndexDistinct$ = this.pageIndex$.pipe(distinctUntilChanged()); pageSizeDistinct$ = this.pageSize$.pipe(distinctUntilChanged()); listOfCalcOperator$ = new BehaviorSubject([]); queryParams$ = combineLatest([ this.pageIndexDistinct$, this.pageSizeDistinct$, this.listOfCalcOperator$ ]).pipe(debounceTime(0), skip(1), map(([pageIndex, pageSize, listOfCalc]) => ({ pageIndex, pageSize, sort: listOfCalc .filter(item => item.sortFn) .map(item => ({ key: item.key, value: item.sortOrder })), filter: listOfCalc .filter(item => item.filterFn) .map(item => ({ key: item.key, value: item.filterValue })) }))); listOfDataAfterCalc$ = combineLatest([this.listOfData$, this.listOfCalcOperator$]).pipe(map(([listOfData, listOfCalcOperator]) => { let listOfDataAfterCalc = [...listOfData]; const listOfFilterOperator = listOfCalcOperator.filter(item => { const { filterValue, filterFn } = item; const isReset = filterValue === null || filterValue === undefined || (Array.isArray(filterValue) && filterValue.length === 0); return !isReset && typeof filterFn === 'function'; }); for (const item of listOfFilterOperator) { const { filterFn, filterValue } = item; listOfDataAfterCalc = listOfDataAfterCalc.filter(data => filterFn(filterValue, data)); } const listOfSortOperator = listOfCalcOperator .filter(item => item.sortOrder !== null && typeof item.sortFn === 'function') .sort((a, b) => +b.sortPriority - +a.sortPriority); if (listOfCalcOperator.length) { listOfDataAfterCalc.sort((record1, record2) => { for (const item of listOfSortOperator) { const { sortFn, sortOrder } = item; if (sortFn && sortOrder) { const compareResult = sortFn(record1, record2, sortOrder); if (compareResult !== 0) { return sortOrder === 'ascend' ? compareResult : -compareResult; } } } return 0; }); } return listOfDataAfterCalc; })); listOfFrontEndCurrentPageData$ = combineLatest([ this.pageIndexDistinct$, this.pageSizeDistinct$, this.listOfDataAfterCalc$ ]).pipe(takeUntil(this.destroy$), filter(value => { const [pageIndex, pageSize, listOfData] = value; const maxPageIndex = Math.ceil(listOfData.length / pageSize) || 1; return pageIndex <= maxPageIndex; }), map(([pageIndex, pageSize, listOfData]) => listOfData.slice((pageIndex - 1) * pageSize, pageIndex * pageSize))); listOfCurrentPageData$ = this.frontPagination$.pipe(switchMap(pagination => (pagination ? this.listOfFrontEndCurrentPageData$ : this.listOfDataAfterCalc$))); total$ = this.frontPagination$.pipe(switchMap(pagination => (pagination ? this.listOfDataAfterCalc$ : this.listOfData$)), map(list => list.length), distinctUntilChanged()); updatePageSize(size) { this.pageSize$.next(size); } updateFrontPagination(pagination) { this.frontPagination$.next(pagination); } updatePageIndex(index) { this.pageIndex$.next(index); } updateListOfData(list) { this.listOfData$.next(list); } updateListOfCustomColumn(list) { this.listOfCustomColumn$.next(list); } ngOnDestroy() { this.destroy$.next(true); this.destroy$.complete(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableDataService }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTableDataService, decorators: [{ type: Injectable }] }); /** * 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 NzCustomColumnDirective { el; renderer; nzTableDataService; nzCellControl = null; destroy$ = new Subject(); constructor(el, renderer, nzTableDataService) { this.el = el; this.renderer = renderer; this.nzTableDataService = nzTableDataService; } ngOnInit() { this.nzTableDataService.listOfCustomColumn$.pipe(takeUntil(this.destroy$)).subscribe(item => { if (item.length) { item.forEach((v, i) => { if (v.value === this.nzCellControl) { if (!v.default) { this.renderer.setStyle(this.el.nativeElement, 'display', 'none'); } else { this.renderer.setStyle(this.el.nativeElement, 'display', 'block'); } this.renderer.setStyle(this.el.nativeElement, 'order', i); if (!v?.fixWidth) { this.renderer.setStyle(this.el.nativeElement, 'flex', `1 1 ${v.width}px`); } else { this.renderer.setStyle(this.el.nativeElement, 'flex', `1 0 ${v.width}px`); } } }); } }); } ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCustomColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NzTableDataService }], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzCustomColumnDirective, isStandalone: true, selector: "td[nzCellControl],th[nzCellControl]", inputs: { nzCellControl: "nzCellControl" }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCustomColumnDirective, decorators: [{ type: Directive, args: [{ selector: 'td[nzCellControl],th[nzCellControl]' }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NzTableDataService }], propDecorators: { nzCellControl: [{ 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 */ /* eslint-disable @angular-eslint/component-selector */ class NzTdAddOnComponent { nzChecked = false; nzDisabled = false; nzIndeterminate = false; nzLabel = null; nzIndentSize = 0; nzShowExpand = false; nzShowCheckbox = false; nzExpand = false; nzExpandIcon = null; nzCheckedChange = new EventEmitter(); nzExpandChange = new EventEmitter(); isNzShowExpandChanged = false; 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 (