ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
938 lines (928 loc) • 102 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, EventEmitter, Output, ViewChild, TemplateRef, Optional, Host, forwardRef, ElementRef, ContentChildren, NgModule } from '@angular/core';
import { Subject, fromEvent, BehaviorSubject, combineLatest, merge } from 'rxjs';
import * as i2 from '@angular/cdk/scrolling';
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
import * as i1$2 from 'ng-zorro-antd/empty';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import * as i1 from 'ng-zorro-antd/core/outlet';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { takeUntil, startWith, switchMap } from 'rxjs/operators';
import * as i1$1 from 'ng-zorro-antd/core/services';
import { NzDestroyService } from 'ng-zorro-antd/core/services';
import * as i5 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'ng-zorro-antd/icon';
import { NzIconModule } from 'ng-zorro-antd/icon';
import * as i4 from 'ng-zorro-antd/core/transition-patch';
import { ɵNzTransitionPatchModule } from 'ng-zorro-antd/core/transition-patch';
import { __decorate } from 'tslib';
import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
import { BACKSPACE, ESCAPE, TAB, SPACE, ENTER, DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import * as i12 from '@angular/cdk/overlay';
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
import * as i2$1 from '@angular/forms';
import { COMPOSITION_BUFFER_MODE, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { slideMotion } from 'ng-zorro-antd/core/animation';
import * as i2$2 from 'ng-zorro-antd/core/config';
import { WithConfig } from 'ng-zorro-antd/core/config';
import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
import * as i1$3 from '@angular/cdk/a11y';
import { A11yModule } from '@angular/cdk/a11y';
import * as i6 from 'ng-zorro-antd/core/no-animation';
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
import * as i3$1 from '@angular/cdk/platform';
import { PlatformModule } from '@angular/cdk/platform';
import * as i5$1 from '@angular/cdk/bidi';
import { BidiModule } from '@angular/cdk/bidi';
import * as i14 from 'ng-zorro-antd/core/overlay';
import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
import { NzI18nModule } from 'ng-zorro-antd/i18n';
/**
* 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 NzOptionGroupComponent {
constructor() {
this.nzLabel = null;
this.changes = new Subject();
}
ngOnChanges() {
this.changes.next();
}
}
NzOptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NzOptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzOptionGroupComponent, selector: "nz-option-group", inputs: { nzLabel: "nzLabel" }, exportAs: ["nzOptionGroup"], usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionGroupComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-option-group',
exportAs: 'nzOptionGroup',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: ` <ng-content></ng-content> `
}]
}], propDecorators: { nzLabel: [{
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 NzOptionItemGroupComponent {
constructor() {
this.nzLabel = null;
}
}
NzOptionItemGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionItemGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NzOptionItemGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzOptionItemGroupComponent, selector: "nz-option-item-group", inputs: { nzLabel: "nzLabel" }, host: { classAttribute: "ant-select-item ant-select-item-group" }, ngImport: i0, template: ` <ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container> `, isInline: true, directives: [{ type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionItemGroupComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-option-item-group',
template: ` <ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container> `,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
class: 'ant-select-item ant-select-item-group'
}
}]
}], ctorParameters: function () { return []; }, propDecorators: { nzLabel: [{
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 NzOptionItemComponent {
constructor(elementRef, ngZone, destroy$) {
this.elementRef = elementRef;
this.ngZone = ngZone;
this.destroy$ = destroy$;
this.selected = false;
this.activated = false;
this.grouped = false;
this.customContent = false;
this.template = null;
this.disabled = false;
this.showState = false;
this.label = null;
this.value = null;
this.activatedValue = null;
this.listOfSelectedValue = [];
this.icon = null;
this.itemClick = new EventEmitter();
this.itemHover = new EventEmitter();
}
ngOnChanges(changes) {
const { value, activatedValue, listOfSelectedValue } = changes;
if (value || listOfSelectedValue) {
this.selected = this.listOfSelectedValue.some(v => this.compareWith(v, this.value));
}
if (value || activatedValue) {
this.activated = this.compareWith(this.activatedValue, this.value);
}
}
ngOnInit() {
this.ngZone.runOutsideAngular(() => {
fromEvent(this.elementRef.nativeElement, 'click')
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
if (!this.disabled) {
this.ngZone.run(() => this.itemClick.emit(this.value));
}
});
fromEvent(this.elementRef.nativeElement, 'mouseenter')
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
if (!this.disabled) {
this.ngZone.run(() => this.itemHover.emit(this.value));
}
});
});
}
}
NzOptionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
NzOptionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzOptionItemComponent, selector: "nz-option-item", inputs: { grouped: "grouped", customContent: "customContent", template: "template", disabled: "disabled", showState: "showState", label: "label", value: "value", activatedValue: "activatedValue", listOfSelectedValue: "listOfSelectedValue", icon: "icon", compareWith: "compareWith" }, outputs: { itemClick: "itemClick", itemHover: "itemHover" }, host: { properties: { "attr.title": "label", "class.ant-select-item-option-grouped": "grouped", "class.ant-select-item-option-selected": "selected && !disabled", "class.ant-select-item-option-disabled": "disabled", "class.ant-select-item-option-active": "activated && !disabled" }, classAttribute: "ant-select-item ant-select-item-option" }, providers: [NzDestroyService], usesOnChanges: true, ngImport: i0, template: `
<div class="ant-select-item-option-content">
<ng-template [ngIf]="customContent" [ngIfElse]="noCustomContent">
<ng-template [ngTemplateOutlet]="template"></ng-template>
</ng-template>
<ng-template #noCustomContent>{{ label }}</ng-template>
</div>
<div *ngIf="showState && selected" class="ant-select-item-option-state" style="user-select: none" unselectable="on">
<i nz-icon nzType="check" class="ant-select-selected-icon" *ngIf="!icon; else icon"></i>
</div>
`, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i4.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionItemComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-option-item',
template: `
<div class="ant-select-item-option-content">
<ng-template [ngIf]="customContent" [ngIfElse]="noCustomContent">
<ng-template [ngTemplateOutlet]="template"></ng-template>
</ng-template>
<ng-template #noCustomContent>{{ label }}</ng-template>
</div>
<div *ngIf="showState && selected" class="ant-select-item-option-state" style="user-select: none" unselectable="on">
<i nz-icon nzType="check" class="ant-select-selected-icon" *ngIf="!icon; else icon"></i>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
class: 'ant-select-item ant-select-item-option',
'[attr.title]': 'label',
'[class.ant-select-item-option-grouped]': 'grouped',
'[class.ant-select-item-option-selected]': 'selected && !disabled',
'[class.ant-select-item-option-disabled]': 'disabled',
'[class.ant-select-item-option-active]': 'activated && !disabled'
},
providers: [NzDestroyService]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.NzDestroyService }]; }, propDecorators: { grouped: [{
type: Input
}], customContent: [{
type: Input
}], template: [{
type: Input
}], disabled: [{
type: Input
}], showState: [{
type: Input
}], label: [{
type: Input
}], value: [{
type: Input
}], activatedValue: [{
type: Input
}], listOfSelectedValue: [{
type: Input
}], icon: [{
type: Input
}], compareWith: [{
type: Input
}], itemClick: [{
type: Output
}], itemHover: [{
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 NzOptionContainerComponent {
constructor() {
this.notFoundContent = undefined;
this.menuItemSelectedIcon = null;
this.dropdownRender = null;
this.activatedValue = null;
this.listOfSelectedValue = [];
this.mode = 'default';
this.matchWidth = true;
this.itemSize = 32;
this.maxItemLength = 8;
this.listOfContainerItem = [];
this.itemClick = new EventEmitter();
this.scrollToBottom = new EventEmitter();
this.scrolledIndex = 0;
}
onItemClick(value) {
this.itemClick.emit(value);
}
onItemHover(value) {
// TODO: keydown.enter won't activate this value
this.activatedValue = value;
}
trackValue(_index, option) {
return option.key;
}
onScrolledIndexChange(index) {
this.scrolledIndex = index;
if (index === this.listOfContainerItem.length - this.maxItemLength) {
this.scrollToBottom.emit();
}
}
scrollToActivatedValue() {
const index = this.listOfContainerItem.findIndex(item => this.compareWith(item.key, this.activatedValue));
if (index < this.scrolledIndex || index >= this.scrolledIndex + this.maxItemLength) {
this.cdkVirtualScrollViewport.scrollToIndex(index || 0);
}
}
ngOnChanges(changes) {
const { listOfContainerItem, activatedValue } = changes;
if (listOfContainerItem || activatedValue) {
this.scrollToActivatedValue();
}
}
ngAfterViewInit() {
setTimeout(() => this.scrollToActivatedValue());
}
}
NzOptionContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NzOptionContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzOptionContainerComponent, selector: "nz-option-container", inputs: { notFoundContent: "notFoundContent", menuItemSelectedIcon: "menuItemSelectedIcon", dropdownRender: "dropdownRender", activatedValue: "activatedValue", listOfSelectedValue: "listOfSelectedValue", compareWith: "compareWith", mode: "mode", matchWidth: "matchWidth", itemSize: "itemSize", maxItemLength: "maxItemLength", listOfContainerItem: "listOfContainerItem" }, outputs: { itemClick: "itemClick", scrollToBottom: "scrollToBottom" }, host: { classAttribute: "ant-select-dropdown" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }], exportAs: ["nzOptionContainer"], usesOnChanges: true, ngImport: i0, template: `
<div>
<div *ngIf="listOfContainerItem.length === 0" class="ant-select-item-empty">
<nz-embed-empty nzComponentName="select" [specificContent]="notFoundContent!"></nz-embed-empty>
</div>
<cdk-virtual-scroll-viewport
[class.full-width]="!matchWidth"
[itemSize]="itemSize"
[maxBufferPx]="itemSize * maxItemLength"
[minBufferPx]="itemSize * maxItemLength"
(scrolledIndexChange)="onScrolledIndexChange($event)"
[style.height.px]="listOfContainerItem.length * itemSize"
[style.max-height.px]="itemSize * maxItemLength"
>
<ng-template
cdkVirtualFor
[cdkVirtualForOf]="listOfContainerItem"
[cdkVirtualForTrackBy]="trackValue"
[cdkVirtualForTemplateCacheSize]="0"
let-item
>
<ng-container [ngSwitch]="item.type">
<nz-option-item-group *ngSwitchCase="'group'" [nzLabel]="item.groupLabel"></nz-option-item-group>
<nz-option-item
*ngSwitchCase="'item'"
[icon]="menuItemSelectedIcon"
[customContent]="item.nzCustomContent"
[template]="item.template"
[grouped]="!!item.groupLabel"
[disabled]="item.nzDisabled"
[showState]="mode === 'tags' || mode === 'multiple'"
[label]="item.nzLabel"
[compareWith]="compareWith"
[activatedValue]="activatedValue"
[listOfSelectedValue]="listOfSelectedValue"
[value]="item.nzValue"
(itemHover)="onItemHover($event)"
(itemClick)="onItemClick($event)"
></nz-option-item>
</ng-container>
</ng-template>
</cdk-virtual-scroll-viewport>
<ng-template [ngTemplateOutlet]="dropdownRender"></ng-template>
</div>
`, isInline: true, components: [{ type: i1$2.NzEmbedEmptyComponent, selector: "nz-embed-empty", inputs: ["nzComponentName", "specificContent"], exportAs: ["nzEmbedEmpty"] }, { type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: NzOptionItemGroupComponent, selector: "nz-option-item-group", inputs: ["nzLabel"] }, { type: NzOptionItemComponent, selector: "nz-option-item", inputs: ["grouped", "customContent", "template", "disabled", "showState", "label", "value", "activatedValue", "listOfSelectedValue", "icon", "compareWith"], outputs: ["itemClick", "itemHover"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionContainerComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-option-container',
exportAs: 'nzOptionContainer',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
template: `
<div>
<div *ngIf="listOfContainerItem.length === 0" class="ant-select-item-empty">
<nz-embed-empty nzComponentName="select" [specificContent]="notFoundContent!"></nz-embed-empty>
</div>
<cdk-virtual-scroll-viewport
[class.full-width]="!matchWidth"
[itemSize]="itemSize"
[maxBufferPx]="itemSize * maxItemLength"
[minBufferPx]="itemSize * maxItemLength"
(scrolledIndexChange)="onScrolledIndexChange($event)"
[style.height.px]="listOfContainerItem.length * itemSize"
[style.max-height.px]="itemSize * maxItemLength"
>
<ng-template
cdkVirtualFor
[cdkVirtualForOf]="listOfContainerItem"
[cdkVirtualForTrackBy]="trackValue"
[cdkVirtualForTemplateCacheSize]="0"
let-item
>
<ng-container [ngSwitch]="item.type">
<nz-option-item-group *ngSwitchCase="'group'" [nzLabel]="item.groupLabel"></nz-option-item-group>
<nz-option-item
*ngSwitchCase="'item'"
[icon]="menuItemSelectedIcon"
[customContent]="item.nzCustomContent"
[template]="item.template"
[grouped]="!!item.groupLabel"
[disabled]="item.nzDisabled"
[showState]="mode === 'tags' || mode === 'multiple'"
[label]="item.nzLabel"
[compareWith]="compareWith"
[activatedValue]="activatedValue"
[listOfSelectedValue]="listOfSelectedValue"
[value]="item.nzValue"
(itemHover)="onItemHover($event)"
(itemClick)="onItemClick($event)"
></nz-option-item>
</ng-container>
</ng-template>
</cdk-virtual-scroll-viewport>
<ng-template [ngTemplateOutlet]="dropdownRender"></ng-template>
</div>
`,
host: { class: 'ant-select-dropdown' }
}]
}], ctorParameters: function () { return []; }, propDecorators: { notFoundContent: [{
type: Input
}], menuItemSelectedIcon: [{
type: Input
}], dropdownRender: [{
type: Input
}], activatedValue: [{
type: Input
}], listOfSelectedValue: [{
type: Input
}], compareWith: [{
type: Input
}], mode: [{
type: Input
}], matchWidth: [{
type: Input
}], itemSize: [{
type: Input
}], maxItemLength: [{
type: Input
}], listOfContainerItem: [{
type: Input
}], itemClick: [{
type: Output
}], scrollToBottom: [{
type: Output
}], cdkVirtualScrollViewport: [{
type: ViewChild,
args: [CdkVirtualScrollViewport, { static: true }]
}] } });
class NzOptionComponent {
constructor(nzOptionGroupComponent, destroy$) {
this.nzOptionGroupComponent = nzOptionGroupComponent;
this.destroy$ = destroy$;
this.changes = new Subject();
this.groupLabel = null;
this.nzLabel = null;
this.nzValue = null;
this.nzDisabled = false;
this.nzHide = false;
this.nzCustomContent = false;
}
ngOnInit() {
if (this.nzOptionGroupComponent) {
this.nzOptionGroupComponent.changes.pipe(startWith(true), takeUntil(this.destroy$)).subscribe(() => {
this.groupLabel = this.nzOptionGroupComponent.nzLabel;
});
}
}
ngOnChanges() {
this.changes.next();
}
}
NzOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionComponent, deps: [{ token: NzOptionGroupComponent, optional: true }, { token: i1$1.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
NzOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzOptionComponent, selector: "nz-option", inputs: { nzLabel: "nzLabel", nzValue: "nzValue", nzDisabled: "nzDisabled", nzHide: "nzHide", nzCustomContent: "nzCustomContent" }, providers: [NzDestroyService], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["nzOption"], usesOnChanges: true, ngImport: i0, template: `
<ng-template>
<ng-content></ng-content>
</ng-template>
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
__decorate([
InputBoolean()
], NzOptionComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean()
], NzOptionComponent.prototype, "nzHide", void 0);
__decorate([
InputBoolean()
], NzOptionComponent.prototype, "nzCustomContent", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzOptionComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-option',
exportAs: 'nzOption',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [NzDestroyService],
template: `
<ng-template>
<ng-content></ng-content>
</ng-template>
`
}]
}], ctorParameters: function () { return [{ type: NzOptionGroupComponent, decorators: [{
type: Optional
}] }, { type: i1$1.NzDestroyService }]; }, propDecorators: { template: [{
type: ViewChild,
args: [TemplateRef, { static: true }]
}], nzLabel: [{
type: Input
}], nzValue: [{
type: Input
}], nzDisabled: [{
type: Input
}], nzHide: [{
type: Input
}], nzCustomContent: [{
type: Input
}] } });
class NzSelectSearchComponent {
constructor(elementRef, renderer, focusMonitor) {
this.elementRef = elementRef;
this.renderer = renderer;
this.focusMonitor = focusMonitor;
this.nzId = null;
this.disabled = false;
this.mirrorSync = false;
this.showInput = true;
this.focusTrigger = false;
this.value = '';
this.autofocus = false;
this.valueChange = new EventEmitter();
this.isComposingChange = new EventEmitter();
}
setCompositionState(isComposing) {
this.isComposingChange.next(isComposing);
}
onValueChange(value) {
this.value = value;
this.valueChange.next(value);
if (this.mirrorSync) {
this.syncMirrorWidth();
}
}
clearInputValue() {
const inputDOM = this.inputElement.nativeElement;
inputDOM.value = '';
this.onValueChange('');
}
syncMirrorWidth() {
const mirrorDOM = this.mirrorElement.nativeElement;
const hostDOM = this.elementRef.nativeElement;
const inputDOM = this.inputElement.nativeElement;
this.renderer.removeStyle(hostDOM, 'width');
mirrorDOM.innerHTML = this.renderer.createText(`${inputDOM.value} `);
this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);
}
focus() {
this.focusMonitor.focusVia(this.inputElement, 'keyboard');
}
blur() {
this.inputElement.nativeElement.blur();
}
ngOnChanges(changes) {
const inputDOM = this.inputElement.nativeElement;
const { focusTrigger, showInput } = changes;
if (showInput) {
if (this.showInput) {
this.renderer.removeAttribute(inputDOM, 'readonly');
}
else {
this.renderer.setAttribute(inputDOM, 'readonly', 'readonly');
}
}
// IE11 cannot input value if focused before removing readonly
if (focusTrigger && focusTrigger.currentValue === true && focusTrigger.previousValue === false) {
inputDOM.focus();
}
}
ngAfterViewInit() {
if (this.mirrorSync) {
this.syncMirrorWidth();
}
if (this.autofocus) {
this.focus();
}
}
}
NzSelectSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzSelectSearchComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
NzSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzSelectSearchComponent, selector: "nz-select-search", inputs: { nzId: "nzId", disabled: "disabled", mirrorSync: "mirrorSync", showInput: "showInput", focusTrigger: "focusTrigger", value: "value", autofocus: "autofocus" }, outputs: { valueChange: "valueChange", isComposingChange: "isComposingChange" }, host: { classAttribute: "ant-select-selection-search" }, providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }, { propertyName: "mirrorElement", first: true, predicate: ["mirrorElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
<input
#inputElement
[attr.id]="nzId"
autocomplete="off"
class="ant-select-selection-search-input"
[ngModel]="value"
[attr.autofocus]="autofocus ? 'autofocus' : null"
[disabled]="disabled"
[style.opacity]="showInput ? null : 0"
(ngModelChange)="onValueChange($event)"
(compositionstart)="setCompositionState(true)"
(compositionend)="setCompositionState(false)"
/>
<span #mirrorElement *ngIf="mirrorSync" class="ant-select-selection-search-mirror"></span>
`, isInline: true, directives: [{ type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzSelectSearchComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-select-search',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<input
#inputElement
[attr.id]="nzId"
autocomplete="off"
class="ant-select-selection-search-input"
[ngModel]="value"
[attr.autofocus]="autofocus ? 'autofocus' : null"
[disabled]="disabled"
[style.opacity]="showInput ? null : 0"
(ngModelChange)="onValueChange($event)"
(compositionstart)="setCompositionState(true)"
(compositionend)="setCompositionState(false)"
/>
<span #mirrorElement *ngIf="mirrorSync" class="ant-select-selection-search-mirror"></span>
`,
host: { class: 'ant-select-selection-search' },
providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.FocusMonitor }]; }, propDecorators: { nzId: [{
type: Input
}], disabled: [{
type: Input
}], mirrorSync: [{
type: Input
}], showInput: [{
type: Input
}], focusTrigger: [{
type: Input
}], value: [{
type: Input
}], autofocus: [{
type: Input
}], valueChange: [{
type: Output
}], isComposingChange: [{
type: Output
}], inputElement: [{
type: ViewChild,
args: ['inputElement', { static: true }]
}], mirrorElement: [{
type: ViewChild,
args: ['mirrorElement', { static: false }]
}] } });
/**
* 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 NzSelectItemComponent {
constructor() {
this.disabled = false;
this.label = null;
this.deletable = false;
this.removeIcon = null;
this.contentTemplateOutletContext = null;
this.contentTemplateOutlet = null;
this.delete = new EventEmitter();
}
onDelete(e) {
e.preventDefault();
e.stopPropagation();
if (!this.disabled) {
this.delete.next(e);
}
}
}
NzSelectItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzSelectItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NzSelectItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzSelectItemComponent, selector: "nz-select-item", inputs: { disabled: "disabled", label: "label", deletable: "deletable", removeIcon: "removeIcon", contentTemplateOutletContext: "contentTemplateOutletContext", contentTemplateOutlet: "contentTemplateOutlet" }, outputs: { delete: "delete" }, host: { properties: { "attr.title": "label", "class.ant-select-selection-item-disabled": "disabled" }, classAttribute: "ant-select-selection-item" }, ngImport: i0, template: `
<ng-container *nzStringTemplateOutlet="contentTemplateOutlet; context: { $implicit: contentTemplateOutletContext }">
<div class="ant-select-selection-item-content" *ngIf="deletable; else labelTemplate">{{ label }}</div>
<ng-template #labelTemplate>{{ label }}</ng-template>
</ng-container>
<span *ngIf="deletable && !disabled" class="ant-select-selection-item-remove" (click)="onDelete($event)">
<i nz-icon nzType="close" *ngIf="!removeIcon; else removeIcon"></i>
</span>
`, isInline: true, directives: [{ type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i4.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzSelectItemComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-select-item',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container *nzStringTemplateOutlet="contentTemplateOutlet; context: { $implicit: contentTemplateOutletContext }">
<div class="ant-select-selection-item-content" *ngIf="deletable; else labelTemplate">{{ label }}</div>
<ng-template #labelTemplate>{{ label }}</ng-template>
</ng-container>
<span *ngIf="deletable && !disabled" class="ant-select-selection-item-remove" (click)="onDelete($event)">
<i nz-icon nzType="close" *ngIf="!removeIcon; else removeIcon"></i>
</span>
`,
host: {
class: 'ant-select-selection-item',
'[attr.title]': 'label',
'[class.ant-select-selection-item-disabled]': 'disabled'
}
}]
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
type: Input
}], label: [{
type: Input
}], deletable: [{
type: Input
}], removeIcon: [{
type: Input
}], contentTemplateOutletContext: [{
type: Input
}], contentTemplateOutlet: [{
type: Input
}], delete: [{
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 NzSelectPlaceholderComponent {
constructor() {
this.placeholder = null;
}
}
NzSelectPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzSelectPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NzSelectPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzSelectPlaceholderComponent, selector: "nz-select-placeholder", inputs: { placeholder: "placeholder" }, host: { classAttribute: "ant-select-selection-placeholder" }, ngImport: i0, template: `
<ng-container *nzStringTemplateOutlet="placeholder">
{{ placeholder }}
</ng-container>
`, isInline: true, directives: [{ type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzSelectPlaceholderComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-select-placeholder',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container *nzStringTemplateOutlet="placeholder">
{{ placeholder }}
</ng-container>
`,
host: { class: 'ant-select-selection-placeholder' }
}]
}], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
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 NzSelectTopControlComponent {
constructor(elementRef, ngZone, noAnimation) {
this.elementRef = elementRef;
this.ngZone = ngZone;
this.noAnimation = noAnimation;
this.nzId = null;
this.showSearch = false;
this.placeHolder = null;
this.open = false;
this.maxTagCount = Infinity;
this.autofocus = false;
this.disabled = false;
this.mode = 'default';
this.customTemplate = null;
this.maxTagPlaceholder = null;
this.removeIcon = null;
this.listOfTopItem = [];
this.tokenSeparators = [];
this.tokenize = new EventEmitter();
this.inputValueChange = new EventEmitter();
this.deleteItem = new EventEmitter();
this.listOfSlicedItem = [];
this.isShowPlaceholder = true;
this.isShowSingleLabel = false;
this.isComposing = false;
this.inputValue = null;
this.destroy$ = new Subject();
}
updateTemplateVariable() {
const isSelectedValueEmpty = this.listOfTopItem.length === 0;
this.isShowPlaceholder = isSelectedValueEmpty && !this.isComposing && !this.inputValue;
this.isShowSingleLabel = !isSelectedValueEmpty && !this.isComposing && !this.inputValue;
}
isComposingChange(isComposing) {
this.isComposing = isComposing;
this.updateTemplateVariable();
}
onInputValueChange(value) {
if (value !== this.inputValue) {
this.inputValue = value;
this.updateTemplateVariable();
this.inputValueChange.emit(value);
this.tokenSeparate(value, this.tokenSeparators);
}
}
tokenSeparate(inputValue, tokenSeparators) {
const includesSeparators = (str, separators) => {
// eslint-disable-next-line @typescript-eslint/prefer-for-of
for (let i = 0; i < separators.length; ++i) {
if (str.lastIndexOf(separators[i]) > 0) {
return true;
}
}
return false;
};
const splitBySeparators = (str, separators) => {
const reg = new RegExp(`[${separators.join()}]`);
const array = str.split(reg).filter(token => token);
return [...new Set(array)];
};
if (inputValue &&
inputValue.length &&
tokenSeparators.length &&
this.mode !== 'default' &&
includesSeparators(inputValue, tokenSeparators)) {
const listOfLabel = splitBySeparators(inputValue, tokenSeparators);
this.tokenize.next(listOfLabel);
}
}
clearInputValue() {
if (this.nzSelectSearchComponent) {
this.nzSelectSearchComponent.clearInputValue();
}
}
focus() {
if (this.nzSelectSearchComponent) {
this.nzSelectSearchComponent.focus();
}
}
blur() {
if (this.nzSelectSearchComponent) {
this.nzSelectSearchComponent.blur();
}
}
trackValue(_index, option) {
return option.nzValue;
}
onDeleteItem(item) {
if (!this.disabled && !item.nzDisabled) {
this.deleteItem.next(item);
}
}
ngOnChanges(changes) {
const { listOfTopItem, maxTagCount, customTemplate, maxTagPlaceholder } = changes;
if (listOfTopItem) {
this.updateTemplateVariable();
}
if (listOfTopItem || maxTagCount || customTemplate || maxTagPlaceholder) {
const listOfSlicedItem = this.listOfTopItem.slice(0, this.maxTagCount).map(o => ({
nzLabel: o.nzLabel,
nzValue: o.nzValue,
nzDisabled: o.nzDisabled,
contentTemplateOutlet: this.customTemplate,
contentTemplateOutletContext: o
}));
if (this.listOfTopItem.length > this.maxTagCount) {
const exceededLabel = `+ ${this.listOfTopItem.length - this.maxTagCount} ...`;
const listOfSelectedValue = this.listOfTopItem.map(item => item.nzValue);
const exceededItem = {
nzLabel: exceededLabel,
nzValue: '$$__nz_exceeded_item',
nzDisabled: true,
contentTemplateOutlet: this.maxTagPlaceholder,
contentTemplateOutletContext: listOfSelectedValue.slice(this.maxTagCount)
};
listOfSlicedItem.push(exceededItem);
}
this.listOfSlicedItem = listOfSlicedItem;
}
}
ngOnInit() {
this.ngZone.runOutsideAngular(() => {
fromEvent(this.elementRef.nativeElement, 'click')
.pipe(takeUntil(this.destroy$))
.subscribe(event => {
// `HTMLElement.focus()` is a native DOM API which doesn't require Angular to run change detection.
if (event.target !== this.nzSelectSearchComponent.inputElement.nativeElement) {
this.nzSelectSearchComponent.focus();
}
});
fromEvent(this.elementRef.nativeElement, 'keydown')
.pipe(takeUntil(this.destroy$))
.subscribe(event => {
if (event.target instanceof HTMLInputElement) {
const inputValue = event.target.value;
if (event.keyCode === BACKSPACE &&
this.mode !== 'default' &&
!inputValue &&
this.listOfTopItem.length > 0) {
event.preventDefault();
// Run change detection only if the user has pressed the `Backspace` key and the following condition is met.
this.ngZone.run(() => this.onDeleteItem(this.listOfTopItem[this.listOfTopItem.length - 1]));
}
}
});
});
}
ngOnDestroy() {
this.destroy$.next();
}
}
NzSelectTopControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzSelectTopControlComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i6.NzNoAnimationDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
NzSelectTopControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: NzSelectTopControlComponent, selector: "nz-select-top-control", inputs: { nzId: "nzId", showSearch: "showSearch", placeHolder: "placeHolder", open: "open", maxTagCount: "maxTagCount", autofocus: "autofocus", disabled: "disabled", mode: "mode", customTemplate: "customTemplate", maxTagPlaceholder: "maxTagPlaceholder", removeIcon: "removeIcon", listOfTopItem: "listOfTopItem", tokenSeparators: "tokenSeparators" }, outputs: { tokenize: "tokenize", inputValueChange: "inputValueChange", deleteItem: "deleteItem" }, host: { classAttribute: "ant-select-selector" }, viewQueries: [{ propertyName: "nzSelectSearchComponent", first: true, predicate: NzSelectSearchComponent, descendants: true }], exportAs: ["nzSelectTopControl"], usesOnChanges: true, ngImport: i0, template: `
<!--single mode-->
<ng-container [ngSwitch]="mode">
<ng-container *ngSwitchCase="'default'">
<nz-select-search
[nzId]="nzId"
[disabled]="disabled"
[value]="inputValue!"
[showInput]="showSearch"
[mirrorSync]="false"
[autofocus]="autofocus"
[focusTrigger]="open"
(isComposingChange)="isComposingChange($event)"
(valueChange)="onInputValueChange($event)"
></nz-select-search>
<nz-select-item
*ngIf="isShowSingleLabel"
[deletable]="false"
[disabled]="false"
[removeIcon]="removeIcon"
[label]="listOfTopItem[0].nzLabel"
[contentTemplateOutlet]="customTemplate"
[contentTemplateOutletContext]="listOfTopItem[0]"
></nz-select-item>
</ng-container>
<ng-container *ngSwitchDefault>
<!--multiple or tags mode-->
<nz-select-item
*ngFor="let item of listOfSlicedItem; trackBy: trackValue"
[removeIcon]="removeIcon"
[label]="item.nzLabel"
[disabled]="item.nzDisabled || disabled"
[contentTemplateOutlet]="item.contentTemplateOutlet"
[deletable]="true"
[contentTemplateOutletContext]="item.contentTemplateOutletContext"
(delete)="onDeleteItem(item.contentTemplateOutletContext)"
></nz-select-item>
<nz-select-search
[nzId]="nzId"
[disabled]="disabled"
[value]="inputValue!"
[autofocus]="autofocus"
[showInput]="true"
[mirrorSync]="true"
[focusTrigger]="open"
(isComposingChange)="isComposingChange($event)"
(valueChange)="onInputValueChange($event)"
></nz-select-search>
</ng-container>
</ng-container>
<nz-select-placeholder *ngIf="isShowPlaceholder" [placeholder]="placeHolder"></nz-select-placeholder>
`, isInline: true, components: [{ type: NzSelectSearchComponent, selector: "nz-select-search", inputs: ["nzId", "disabled", "mirrorSync", "showInput", "focusTrigger", "value", "autofocus"], outputs: ["valueChange", "isComposingChange"] }, { type: NzSelectItemComponent, selector: "nz-select-item", inputs: ["disabled", "label", "deletable", "removeIcon", "contentTemplateOutletContext", "contentTemplateOutlet"], outputs: ["delete"] }, { type: NzSelectPlaceholderComponent, selector: "nz-select-placeholder", inputs: ["placeholder"] }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: NzSelectTopControlComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-select-top-control',
exportAs: 'nzSelectTopControl',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<!--single mode-->
<ng-container [ngSwitch]="mode">
<ng-container *ngSwitchCase="'default'">
<nz-select-search
[nzId]="nzId"
[disabled]="disabled"
[value]="inputValue!"
[showInput]="showSearch"
[mirrorSync]="false"
[autofocus]="autofocus"
[focusTrigger]="open"
(isComposingChange)="isComposingChange($event)"
(valueChange)="onInputValueChange($event)"
></nz-select-search>
<nz-select-item