UNPKG

ng-zorro-antd

Version:

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

1,560 lines (1,555 loc) 61 kB
import { __decorate, __metadata } from 'tslib'; import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, BACKSPACE, ESCAPE } from '@angular/cdk/keycodes'; import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay'; import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, Renderer2, Input, Injectable, EventEmitter, forwardRef, Host, Optional, ViewChild, ViewChildren, Output, HostListener, NgModule } from '@angular/core'; import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; import { BehaviorSubject, Subject } from 'rxjs'; import { takeUntil, startWith } from 'rxjs/operators'; import { isNotNil, arraysEqual, DEFAULT_DROPDOWN_POSITIONS, trimComponentName, warnDeprecation, toArray, slideMotion, NzConfigService, NzNoAnimationDirective, InputBoolean, WithConfig, NzAddOnModule, NzHighlightModule, NzNoAnimationModule, NzOverlayModule } from 'ng-zorro-antd/core'; import { NzI18nService } from 'ng-zorro-antd/i18n'; import { CommonModule } from '@angular/common'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzInputModule } from 'ng-zorro-antd/input'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @license * Copyright Alibaba.com All Rights Reserved. * * 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 */ /** * @deprecated Use the prefixed version. * @record */ function CascaderOption() { } if (false) { /** @type {?|undefined} */ CascaderOption.prototype.value; /** @type {?|undefined} */ CascaderOption.prototype.label; /** @type {?|undefined} */ CascaderOption.prototype.title; /** @type {?|undefined} */ CascaderOption.prototype.disabled; /** @type {?|undefined} */ CascaderOption.prototype.loading; /** @type {?|undefined} */ CascaderOption.prototype.isLeaf; /** @type {?|undefined} */ CascaderOption.prototype.parent; /** @type {?|undefined} */ CascaderOption.prototype.children; /* Skipping unhandled member: [key: string]: any;*/ } /** * @deprecated Use the prefixed version. * @record */ function CascaderSearchOption() { } if (false) { /** @type {?} */ CascaderSearchOption.prototype.path; } /** * @record */ function NzShowSearchOptions() { } if (false) { /** @type {?|undefined} */ NzShowSearchOptions.prototype.filter; /** @type {?|undefined} */ NzShowSearchOptions.prototype.sorter; } /** * @param {?} options * @return {?} */ function isShowSearchObject(options) { return typeof options !== 'boolean'; } /** * To avoid circular dependency, provide an interface of `NzCascaderComponent` * for `NzCascaderService`. * @record */ function NzCascaderComponentAsSource() { } if (false) { /** @type {?} */ NzCascaderComponentAsSource.prototype.inputValue; /** @type {?} */ NzCascaderComponentAsSource.prototype.nzShowSearch; /** @type {?} */ NzCascaderComponentAsSource.prototype.nzLabelProperty; /** @type {?} */ NzCascaderComponentAsSource.prototype.nzValueProperty; /** @type {?} */ NzCascaderComponentAsSource.prototype.nzChangeOnSelect; /** * @param {?} option * @param {?} level * @return {?} */ NzCascaderComponentAsSource.prototype.nzChangeOn = function (option, level) { }; /** * @param {?} node * @param {?=} index * @return {?} */ NzCascaderComponentAsSource.prototype.nzLoadData = function (node, index) { }; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @license * Copyright Alibaba.com All Rights Reserved. * * 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 */ /** * @param {?} o * @return {?} */ function isChildOption(o) { return o.isLeaf || !o.children || !o.children.length; } /** * @param {?} o * @return {?} */ function isParentOption(o) { return !!o.children && !!o.children.length && !o.isLeaf; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzCascaderOptionComponent { /** * @param {?} cdr * @param {?} elementRef * @param {?} renderer */ constructor(cdr, elementRef, renderer) { this.cdr = cdr; this.optionTemplate = null; this.activated = false; this.nzLabelProperty = 'label'; renderer.addClass(elementRef.nativeElement, 'ant-cascader-menu-item'); } /** * @return {?} */ get optionLabel() { return this.option[this.nzLabelProperty]; } /** * @return {?} */ markForCheck() { this.cdr.markForCheck(); } } NzCascaderOptionComponent.decorators = [ { type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: '[nz-cascader-option]', exportAs: 'nzCascaderOption', template: "<ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\n <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option, index: columnIndex }\"></ng-template>\n</ng-container>\n<ng-template #defaultOptionTemplate>\n <span [innerHTML]=\"optionLabel | nzHighlight: highlightText: 'g': 'ant-cascader-menu-item-keyword'\"></span>\n</ng-template>\n<span *ngIf=\"!option.isLeaf || option.children?.length || option.loading\"\n class=\"ant-cascader-menu-item-expand-icon\">\n <i nz-icon\n [nzType]=\"option.loading ? 'loading' : 'right'\"></i>\n</span>\n", host: { '[attr.title]': 'option.title || optionLabel', '[class.ant-cascader-menu-item-active]': 'activated', '[class.ant-cascader-menu-item-expand]': '!option.isLeaf', '[class.ant-cascader-menu-item-disabled]': 'option.disabled' } }] } ]; /** @nocollapse */ NzCascaderOptionComponent.ctorParameters = () => [ { type: ChangeDetectorRef }, { type: ElementRef }, { type: Renderer2 } ]; NzCascaderOptionComponent.propDecorators = { optionTemplate: [{ type: Input }], option: [{ type: Input }], activated: [{ type: Input }], highlightText: [{ type: Input }], nzLabelProperty: [{ type: Input }], columnIndex: [{ type: Input }] }; if (false) { /** @type {?} */ NzCascaderOptionComponent.prototype.optionTemplate; /** @type {?} */ NzCascaderOptionComponent.prototype.option; /** @type {?} */ NzCascaderOptionComponent.prototype.activated; /** @type {?} */ NzCascaderOptionComponent.prototype.highlightText; /** @type {?} */ NzCascaderOptionComponent.prototype.nzLabelProperty; /** @type {?} */ NzCascaderOptionComponent.prototype.columnIndex; /** * @type {?} * @private */ NzCascaderOptionComponent.prototype.cdr; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * All data is stored and parsed in NzCascaderService. */ class NzCascaderService { constructor() { /** * Activated options in each column. */ this.activatedOptions = []; /** * An array to store cascader items arranged in different layers. */ this.columns = [[]]; /** * If user has entered searching mode. */ this.inSearchingMode = false; /** * Selected options would be output to user. */ this.selectedOptions = []; this.values = []; // tslint:disable-line:no-any // tslint:disable-line:no-any this.$loading = new BehaviorSubject(false); /** * Emit an event to notify cascader it needs to redraw because activated or * selected options are changed. */ this.$redraw = new Subject(); /** * Emit an event when an option gets selected. * Emit true if a leaf options is selected. */ this.$optionSelected = new Subject(); /** * Emit an event to notify cascader it needs to quit searching mode. * Only emit when user do select a searching option. */ this.$quitSearching = new Subject(); /** * To hold columns before entering searching mode. */ this.columnsSnapshot = [[]]; /** * To hold activated options before entering searching mode. */ this.activatedOptionsSnapshot = []; } /** * Return cascader options in the first layer. * @return {?} */ get nzOptions() { return this.columns[0]; } /** * @return {?} */ ngOnDestroy() { this.$redraw.complete(); this.$quitSearching.complete(); this.$optionSelected.complete(); this.$loading.complete(); } /** * Make sure that value matches what is displayed in the dropdown. * @param {?=} first * @return {?} */ syncOptions(first = false) { /** @type {?} */ const values = this.values; /** @type {?} */ const hasValue = values && values.length; /** @type {?} */ const lastColumnIndex = values.length - 1; /** @type {?} */ const initColumnWithIndex = (/** * @param {?} columnIndex * @return {?} */ (columnIndex) => { /** @type {?} */ const activatedOptionSetter = (/** * @return {?} */ () => { /** @type {?} */ const currentValue = values[columnIndex]; if (!isNotNil(currentValue)) { this.$redraw.next(); return; } /** @type {?} */ const option = this.findOptionWithValue(columnIndex, values[columnIndex]) || (typeof currentValue === 'object' ? currentValue : { [`${this.cascaderComponent.nzValueProperty}`]: currentValue, [`${this.cascaderComponent.nzLabelProperty}`]: currentValue }); this.setOptionActivated(option, columnIndex, false, false); if (columnIndex < lastColumnIndex) { initColumnWithIndex(columnIndex + 1); } else { this.dropBehindColumns(columnIndex); this.selectedOptions = [...this.activatedOptions]; this.$redraw.next(); } }); if (this.isLoaded(columnIndex) || !this.cascaderComponent.nzLoadData) { activatedOptionSetter(); } else { /** @type {?} */ const option = this.activatedOptions[columnIndex - 1] || {}; this.loadChildren(option, columnIndex - 1, activatedOptionSetter); } }); this.activatedOptions = []; this.selectedOptions = []; if (first && this.cascaderComponent.nzLoadData && !hasValue) { // Should also notify the component that value changes. Fix #3480. this.$redraw.next(); return; } else { initColumnWithIndex(0); } } /** * Bind cascader component so this service could use inputs. * @param {?} cascaderComponent * @return {?} */ withComponent(cascaderComponent) { this.cascaderComponent = cascaderComponent; } /** * Reset all options. Rebuild searching options if in searching mode. * @param {?} options * @return {?} */ withOptions(options) { this.columnsSnapshot = this.columns = options && options.length ? [options] : []; if (this.inSearchingMode) { this.prepareSearchOptions(this.cascaderComponent.inputValue); } else if (this.columns.length) { this.syncOptions(); } } /** * Try to set a option as activated. * @param {?} option Cascader option * @param {?} columnIndex Of which column this option is in * @param {?=} performSelect Select * @param {?=} loadingChildren Try to load children asynchronously. * @return {?} */ setOptionActivated(option, columnIndex, performSelect = false, loadingChildren = true) { if (option.disabled) { return; } this.activatedOptions[columnIndex] = option; this.trackAncestorActivatedOptions(columnIndex); this.dropBehindActivatedOptions(columnIndex); /** @type {?} */ const isParent = isParentOption(option); if (isParent) { // Parent option that has children. this.setColumnData((/** @type {?} */ (option.children)), columnIndex + 1, option); } else if (!option.isLeaf && loadingChildren) { // Parent option that should try to load children asynchronously. this.loadChildren(option, columnIndex); } else if (option.isLeaf) { // Leaf option. this.dropBehindColumns(columnIndex); } // Actually perform selection to make an options not only activated but also selected. if (performSelect) { this.setOptionSelected(option, columnIndex); } this.$redraw.next(); } /** * @param {?} option * @param {?} index * @return {?} */ setOptionSelected(option, index) { /** @type {?} */ const changeOn = this.cascaderComponent.nzChangeOn; /** @type {?} */ const shouldPerformSelection = (/** * @param {?} o * @param {?} i * @return {?} */ (o, i) => { return typeof changeOn === 'function' ? changeOn(o, i) : false; }); if (option.isLeaf || this.cascaderComponent.nzChangeOnSelect || shouldPerformSelection(option, index)) { this.selectedOptions = [...this.activatedOptions]; this.prepareEmitValue(); this.$redraw.next(); this.$optionSelected.next({ option, index }); } } /** * @param {?} column * @return {?} */ setOptionDeactivatedSinceColumn(column) { this.dropBehindActivatedOptions(column - 1); this.dropBehindColumns(column); this.$redraw.next(); } /** * Set a searching option as selected, finishing up things. * @param {?} option * @return {?} */ setSearchOptionSelected(option) { this.activatedOptions = [option]; this.selectedOptions = [...option.path]; this.prepareEmitValue(); this.$redraw.next(); this.$optionSelected.next({ option, index: 0 }); setTimeout((/** * @return {?} */ () => { // Reset data and tell UI only to remove input and reset dropdown width style. this.$quitSearching.next(); this.$redraw.next(); this.inSearchingMode = false; this.columns = [...this.columnsSnapshot]; this.activatedOptions = [...this.selectedOptions]; }), 200); } /** * Filter cascader options to reset `columns`. * @param {?} searchValue The string user wants to search. * @return {?} */ prepareSearchOptions(searchValue) { /** @type {?} */ const results = []; // Search results only have one layer. /** @type {?} */ const path = []; /** @type {?} */ const defaultFilter = (/** * @param {?} i * @param {?} p * @return {?} */ (i, p) => { return p.some((/** * @param {?} o * @return {?} */ o => { /** @type {?} */ const label = this.getOptionLabel(o); return !!label && label.indexOf(i) !== -1; })); }); /** @type {?} */ const showSearch = this.cascaderComponent.nzShowSearch; /** @type {?} */ const filter = isShowSearchObject(showSearch) && showSearch.filter ? showSearch.filter : defaultFilter; /** @type {?} */ const sorter = isShowSearchObject(showSearch) && showSearch.sorter ? showSearch.sorter : null; /** @type {?} */ const loopChild = (/** * @param {?} node * @param {?=} forceDisabled * @return {?} */ (node, forceDisabled = false) => { path.push(node); /** @type {?} */ const cPath = Array.from(path); if (filter(searchValue, cPath)) { /** @type {?} */ const disabled = forceDisabled || node.disabled; /** @type {?} */ const option = { disabled, isLeaf: true, path: cPath, [this.cascaderComponent.nzLabelProperty]: cPath.map((/** * @param {?} p * @return {?} */ p => this.getOptionLabel(p))).join(' / ') }; results.push(option); } path.pop(); }); /** @type {?} */ const loopParent = (/** * @param {?} node * @param {?=} forceDisabled * @return {?} */ (node, forceDisabled = false) => { /** @type {?} */ const disabled = forceDisabled || node.disabled; path.push(node); (/** @type {?} */ (node.children)).forEach((/** * @param {?} sNode * @return {?} */ sNode => { if (!sNode.parent) { sNode.parent = node; } if (!sNode.isLeaf) { loopParent(sNode, disabled); } if (sNode.isLeaf || !sNode.children || !sNode.children.length) { loopChild(sNode, disabled); } })); path.pop(); }); if (!this.columnsSnapshot.length) { this.columns = [[]]; return; } this.columnsSnapshot[0].forEach((/** * @param {?} o * @return {?} */ o => (isChildOption(o) ? loopChild(o) : loopParent(o)))); if (sorter) { results.sort((/** * @param {?} a * @param {?} b * @return {?} */ (a, b) => sorter(a.path, b.path, searchValue))); } this.columns = [results]; } /** * Toggle searching mode by UI. It deals with things not directly related to UI. * @param {?} toSearching If this cascader is entering searching mode * @return {?} */ toggleSearchingMode(toSearching) { this.inSearchingMode = toSearching; if (toSearching) { this.activatedOptionsSnapshot = [...this.activatedOptions]; this.activatedOptions = []; this.selectedOptions = []; this.$redraw.next(); } else { // User quit searching mode without selecting an option. this.activatedOptions = [...this.activatedOptionsSnapshot]; this.selectedOptions = [...this.activatedOptions]; this.columns = [...this.columnsSnapshot]; this.syncOptions(); this.$redraw.next(); } } /** * Clear selected options. * @return {?} */ clear() { this.values = []; this.selectedOptions = []; this.activatedOptions = []; this.dropBehindColumns(0); this.prepareEmitValue(); this.$redraw.next(); this.$optionSelected.next(null); } /** * @param {?} o * @return {?} */ getOptionLabel(o) { return (/** @type {?} */ (o[this.cascaderComponent.nzLabelProperty || 'label'])); } // tslint:disable-next-line:no-any /** * @param {?} o * @return {?} */ getOptionValue(o) { return o[this.cascaderComponent.nzValueProperty || 'value']; } /** * Try to insert options into a column. * @private * @param {?} options Options to insert * @param {?} columnIndex Position * @param {?} parent * @return {?} */ setColumnData(options, columnIndex, parent) { /** @type {?} */ const existingOptions = this.columns[columnIndex]; if (!arraysEqual(existingOptions, options)) { options.forEach((/** * @param {?} o * @return {?} */ o => (o.parent = parent))); this.columns[columnIndex] = options; this.dropBehindColumns(columnIndex); } } /** * Set all ancestor options as activated. * @private * @param {?} startIndex * @return {?} */ trackAncestorActivatedOptions(startIndex) { for (let i = startIndex - 1; i >= 0; i--) { if (!this.activatedOptions[i]) { this.activatedOptions[i] = (/** @type {?} */ (this.activatedOptions[i + 1].parent)); } } } /** * @private * @param {?} lastReserveIndex * @return {?} */ dropBehindActivatedOptions(lastReserveIndex) { this.activatedOptions = this.activatedOptions.splice(0, lastReserveIndex + 1); } /** * @private * @param {?} lastReserveIndex * @return {?} */ dropBehindColumns(lastReserveIndex) { if (lastReserveIndex < this.columns.length - 1) { this.columns = this.columns.slice(0, lastReserveIndex + 1); } } /** * Load children of an option asynchronously. * @param {?} option * @param {?} columnIndex * @param {?=} success * @param {?=} failure * @return {?} */ loadChildren(option, // tslint:disable-line:no-any columnIndex, success, failure) { /** @type {?} */ const loadFn = this.cascaderComponent.nzLoadData; if (loadFn) { // If there isn't any option in columns. this.$loading.next(columnIndex < 0); if (typeof option === 'object') { option.loading = true; } loadFn(option, columnIndex).then((/** * @return {?} */ () => { option.loading = false; if (option.children) { this.setColumnData(option.children, columnIndex + 1, option); } if (success) { success(); } this.$loading.next(false); this.$redraw.next(); }), (/** * @return {?} */ () => { option.loading = false; option.isLeaf = true; if (failure) { failure(); } this.$redraw.next(); })); } } /** * @private * @param {?} index * @return {?} */ isLoaded(index) { return this.columns[index] && this.columns[index].length > 0; } /** * Find a option that has a given value in a given column. * @private * @param {?} columnIndex * @param {?} value * @return {?} */ findOptionWithValue(columnIndex, value // tslint:disable-line:no-any ) { /** @type {?} */ const targetColumn = this.columns[columnIndex]; if (targetColumn) { /** @type {?} */ const v = typeof value === 'object' ? this.getOptionValue(value) : value; return (/** @type {?} */ (targetColumn.find((/** * @param {?} o * @return {?} */ o => v === this.getOptionValue(o))))); } return null; } /** * @private * @return {?} */ prepareEmitValue() { this.values = this.selectedOptions.map((/** * @param {?} o * @return {?} */ o => this.getOptionValue(o))); } } NzCascaderService.decorators = [ { type: Injectable } ]; if (false) { /** * Activated options in each column. * @type {?} */ NzCascaderService.prototype.activatedOptions; /** * An array to store cascader items arranged in different layers. * @type {?} */ NzCascaderService.prototype.columns; /** * If user has entered searching mode. * @type {?} */ NzCascaderService.prototype.inSearchingMode; /** * Selected options would be output to user. * @type {?} */ NzCascaderService.prototype.selectedOptions; /** @type {?} */ NzCascaderService.prototype.values; /** @type {?} */ NzCascaderService.prototype.$loading; /** * Emit an event to notify cascader it needs to redraw because activated or * selected options are changed. * @type {?} */ NzCascaderService.prototype.$redraw; /** * Emit an event when an option gets selected. * Emit true if a leaf options is selected. * @type {?} */ NzCascaderService.prototype.$optionSelected; /** * Emit an event to notify cascader it needs to quit searching mode. * Only emit when user do select a searching option. * @type {?} */ NzCascaderService.prototype.$quitSearching; /** * To hold columns before entering searching mode. * @type {?} * @private */ NzCascaderService.prototype.columnsSnapshot; /** * To hold activated options before entering searching mode. * @type {?} * @private */ NzCascaderService.prototype.activatedOptionsSnapshot; /** * @type {?} * @private */ NzCascaderService.prototype.cascaderComponent; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ const defaultDisplayRender = (/** * @param {?} labels * @return {?} */ (labels) => labels.join(' / ')); const ɵ0 = defaultDisplayRender; class NzCascaderComponent { /** * @param {?} cascaderService * @param {?} i18nService * @param {?} nzConfigService * @param {?} cdr * @param {?} elementRef * @param {?} renderer * @param {?=} noAnimation */ constructor(cascaderService, i18nService, nzConfigService, cdr, elementRef, renderer, noAnimation) { this.cascaderService = cascaderService; this.i18nService = i18nService; this.nzConfigService = nzConfigService; this.cdr = cdr; this.noAnimation = noAnimation; this.nzOptionRender = null; this.nzShowInput = true; this.nzShowArrow = true; this.nzAllowClear = true; this.nzAutoFocus = false; this.nzChangeOnSelect = false; this.nzDisabled = false; this.nzExpandTrigger = 'click'; this.nzValueProperty = 'value'; this.nzLabelProperty = 'label'; this.nzMouseEnterDelay = 150; // ms // ms this.nzMouseLeaveDelay = 150; // ms // ms this.nzTriggerAction = (/** @type {?} */ (['click'])); this.nzVisibleChange = new EventEmitter(); this.nzSelectionChange = new EventEmitter(); /** * @deprecated 9.0.0. This api is a duplication of `ngModelChange`. */ this.nzSelect = new EventEmitter(); this.nzClear = new EventEmitter(); this.dropDownPosition = 'bottom'; this.menuVisible = false; this.isLoading = false; this.labelRenderContext = {}; this.onChange = Function.prototype; this.onTouched = Function.prototype; this.positions = [...DEFAULT_DROPDOWN_POSITIONS]; this.isFocused = false; this.$destroy = new Subject(); this.inputString = ''; this.isOpening = false; this.el = elementRef.nativeElement; this.cascaderService.withComponent(this); renderer.addClass(elementRef.nativeElement, 'ant-cascader'); renderer.addClass(elementRef.nativeElement, 'ant-cascader-picker'); } // tslint:disable-line:no-any /** * @return {?} */ get nzOptions() { return this.cascaderService.nzOptions; } /** * @param {?} options * @return {?} */ set nzOptions(options) { this.cascaderService.withOptions(options); } /** * @return {?} */ get inSearchingMode() { return this.cascaderService.inSearchingMode; } /** * @param {?} inputValue * @return {?} */ set inputValue(inputValue) { this.inputString = inputValue; this.toggleSearchingMode(!!inputValue); } /** * @return {?} */ get inputValue() { return this.inputString; } /** * @return {?} */ get menuCls() { return { [`${this.nzMenuClassName}`]: !!this.nzMenuClassName }; } /** * @return {?} */ get menuColumnCls() { return { [`${this.nzColumnClassName}`]: !!this.nzColumnClassName }; } /** * @private * @return {?} */ get hasInput() { return !!this.inputValue; } /** * @private * @return {?} */ get hasValue() { return this.cascaderService.values && this.cascaderService.values.length > 0; } /** * @return {?} */ get showPlaceholder() { return !(this.hasInput || this.hasValue); } /** * @return {?} */ get clearIconVisible() { return this.nzAllowClear && !this.nzDisabled && (this.hasValue || this.hasInput); } /** * @return {?} */ get isLabelRenderTemplate() { return !!this.nzLabelRender; } /** * @return {?} */ ngOnInit() { /** @type {?} */ const srv = this.cascaderService; srv.$redraw.pipe(takeUntil(this.$destroy)).subscribe((/** * @return {?} */ () => { // These operations would not mutate data. this.checkChildren(); this.buildDisplayLabel(); this.reposition(); this.cdr.markForCheck(); })); srv.$loading.pipe(takeUntil(this.$destroy)).subscribe((/** * @param {?} loading * @return {?} */ loading => { this.isLoading = loading; })); srv.$optionSelected.pipe(takeUntil(this.$destroy)).subscribe((/** * @param {?} data * @return {?} */ data => { if (!data) { this.onChange([]); this.nzSelect.emit(null); this.nzSelectionChange.emit([]); } else { const { option, index } = data; /** @type {?} */ const shouldClose = option.isLeaf; if (shouldClose) { this.delaySetMenuVisible(false); } this.onChange(this.cascaderService.values); this.nzSelectionChange.emit(this.cascaderService.selectedOptions); this.nzSelect.emit({ option, index }); this.cdr.markForCheck(); } })); srv.$quitSearching.pipe(takeUntil(this.$destroy)).subscribe((/** * @return {?} */ () => { this.inputString = ''; this.dropdownWidthStyle = ''; })); this.i18nService.localeChange .pipe(startWith(), takeUntil(this.$destroy)) .subscribe((/** * @return {?} */ () => { this.setLocale(); })); this.nzConfigService .getConfigChangeEventForComponent(trimComponentName(this.constructor.name)) .pipe(takeUntil(this.$destroy)) .subscribe((/** * @return {?} */ () => { this.cdr.markForCheck(); })); if (this.nzSelect.observers.length > 0) { warnDeprecation(`nzSelect is deprecated and will be removed in 9.0.0. Please use 'nzSelectionChange' instead.`); } } /** * @return {?} */ ngOnDestroy() { this.$destroy.next(); this.$destroy.complete(); this.clearDelayMenuTimer(); this.clearDelaySelectTimer(); } /** * @param {?} fn * @return {?} */ registerOnChange(fn) { this.onChange = fn; } /** * @param {?} fn * @return {?} */ registerOnTouched(fn) { this.onTouched = fn; } // tslint:disable-next-line:no-any /** * @param {?} value * @return {?} */ writeValue(value) { this.cascaderService.values = toArray(value); this.cascaderService.syncOptions(true); } /** * @param {?} visible * @param {?=} delay * @param {?=} setOpening * @return {?} */ delaySetMenuVisible(visible, delay = 100, setOpening = false) { this.clearDelayMenuTimer(); if (delay) { if (visible && setOpening) { this.isOpening = true; } this.delayMenuTimer = setTimeout((/** * @return {?} */ () => { this.setMenuVisible(visible); this.cdr.detectChanges(); this.clearDelayMenuTimer(); if (visible) { setTimeout((/** * @return {?} */ () => { this.isOpening = false; }), 100); } }), delay); } else { this.setMenuVisible(visible); } } /** * @param {?} visible * @return {?} */ setMenuVisible(visible) { if (this.nzDisabled || this.menuVisible === visible) { return; } if (visible) { this.cascaderService.syncOptions(); } this.menuVisible = visible; this.nzVisibleChange.emit(visible); this.cdr.detectChanges(); } /** * @private * @return {?} */ clearDelayMenuTimer() { if (this.delayMenuTimer) { clearTimeout(this.delayMenuTimer); this.delayMenuTimer = null; } } /** * @param {?=} event * @return {?} */ clearSelection(event) { if (event) { event.preventDefault(); event.stopPropagation(); } this.labelRenderText = ''; this.labelRenderContext = {}; this.inputValue = ''; this.setMenuVisible(false); this.cascaderService.clear(); } // tslint:disable-next-line:no-any /** * @return {?} */ getSubmitValue() { return this.cascaderService.selectedOptions.map((/** * @param {?} o * @return {?} */ o => this.cascaderService.getOptionValue(o))); } /** * @return {?} */ focus() { if (!this.isFocused) { (this.input ? this.input.nativeElement : this.el).focus(); this.isFocused = true; } } /** * @return {?} */ blur() { if (this.isFocused) { (this.input ? this.input.nativeElement : this.el).blur(); this.isFocused = false; } } /** * @return {?} */ handleInputBlur() { this.menuVisible ? this.focus() : this.blur(); } /** * @return {?} */ handleInputFocus() { this.focus(); } /** * @param {?} event * @return {?} */ onKeyDown(event) { /** @type {?} */ const keyCode = event.keyCode; if (keyCode !== DOWN_ARROW && keyCode !== UP_ARROW && keyCode !== LEFT_ARROW && keyCode !== RIGHT_ARROW && keyCode !== ENTER && keyCode !== BACKSPACE && keyCode !== ESCAPE) { return; } // Press any keys above to reopen menu. if (!this.menuVisible && keyCode !== BACKSPACE && keyCode !== ESCAPE) { return this.setMenuVisible(true); } // Make these keys work as default in searching mode. if (this.inSearchingMode && (keyCode === BACKSPACE || keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW)) { return; } // Interact with the component. if (this.menuVisible) { event.preventDefault(); if (keyCode === DOWN_ARROW) { this.moveUpOrDown(false); } else if (keyCode === UP_ARROW) { this.moveUpOrDown(true); } else if (keyCode === LEFT_ARROW) { this.moveLeft(); } else if (keyCode === RIGHT_ARROW) { this.moveRight(); } else if (keyCode === ENTER) { this.onEnter(); } } } /** * @return {?} */ onTriggerClick() { if (this.nzDisabled) { return; } if (this.nzShowSearch) { this.focus(); } if (this.isActionTrigger('click')) { this.delaySetMenuVisible(!this.menuVisible, 100); } this.onTouched(); } /** * @return {?} */ onTriggerMouseEnter() { if (this.nzDisabled || !this.isActionTrigger('hover')) { return; } this.delaySetMenuVisible(true, this.nzMouseEnterDelay, true); } /** * @param {?} event * @return {?} */ onTriggerMouseLeave(event) { if (this.nzDisabled || !this.menuVisible || this.isOpening || !this.isActionTrigger('hover')) { event.preventDefault(); return; } /** @type {?} */ const mouseTarget = (/** @type {?} */ (event.relatedTarget)); /** @type {?} */ const hostEl = this.el; /** @type {?} */ const menuEl = this.menu && ((/** @type {?} */ (this.menu.nativeElement))); if (hostEl.contains(mouseTarget) || (menuEl && menuEl.contains(mouseTarget))) { return; } this.delaySetMenuVisible(false, this.nzMouseLeaveDelay); } /** * @param {?} option * @param {?} columnIndex * @param {?} event * @return {?} */ onOptionMouseEnter(option, columnIndex, event) { event.preventDefault(); if (this.nzExpandTrigger === 'hover') { if (!option.isLeaf) { this.delaySetOptionActivated(option, columnIndex, false); } else { this.cascaderService.setOptionDeactivatedSinceColumn(columnIndex); } } } /** * @param {?} option * @param {?} _columnIndex * @param {?} event * @return {?} */ onOptionMouseLeave(option, _columnIndex, event) { event.preventDefault(); if (this.nzExpandTrigger === 'hover' && !option.isLeaf) { this.clearDelaySelectTimer(); } } /** * @param {?} option * @param {?} columnIndex * @param {?} event * @return {?} */ onOptionClick(option, columnIndex, event) { if (event) { event.preventDefault(); } if (option && option.disabled) { return; } this.el.focus(); this.inSearchingMode ? this.cascaderService.setSearchOptionSelected((/** @type {?} */ (option))) : this.cascaderService.setOptionActivated(option, columnIndex, true); } /** * @private * @param {?} action * @return {?} */ isActionTrigger(action) { return typeof this.nzTriggerAction === 'string' ? this.nzTriggerAction === action : this.nzTriggerAction.indexOf(action) !== -1; } /** * @private * @return {?} */ onEnter() { /** @type {?} */ const columnIndex = Math.max(this.cascaderService.activatedOptions.length - 1, 0); /** @type {?} */ const option = this.cascaderService.activatedOptions[columnIndex]; if (option && !option.disabled) { this.inSearchingMode ? this.cascaderService.setSearchOptionSelected((/** @type {?} */ (option))) : this.cascaderService.setOptionActivated(option, columnIndex, true); } } /** * @private * @param {?} isUp * @return {?} */ moveUpOrDown(isUp) { /** @type {?} */ const columnIndex = Math.max(this.cascaderService.activatedOptions.length - 1, 0); /** @type {?} */ const activeOption = this.cascaderService.activatedOptions[columnIndex]; /** @type {?} */ const options = this.cascaderService.columns[columnIndex] || []; /** @type {?} */ const length = options.length; /** @type {?} */ let nextIndex = -1; if (!activeOption) { // Not selected options in this column nextIndex = isUp ? length : -1; } else { nextIndex = options.indexOf(activeOption); } while (true) { nextIndex = isUp ? nextIndex - 1 : nextIndex + 1; if (nextIndex < 0 || nextIndex >= length) { break; } /** @type {?} */ const nextOption = options[nextIndex]; if (!nextOption || nextOption.disabled) { continue; } this.cascaderService.setOptionActivated(nextOption, columnIndex); break; } } /** * @private * @return {?} */ moveLeft() { /** @type {?} */ const options = this.cascaderService.activatedOptions; if (options.length) { options.pop(); // Remove the last one } } /** * @private * @return {?} */ moveRight() { /** @type {?} */ const length = this.cascaderService.activatedOptions.length; /** @type {?} */ const options = this.cascaderService.columns[length]; if (options && options.length) { /** @type {?} */ const nextOpt = options.find((/** * @param {?} o * @return {?} */ o => !o.disabled)); if (nextOpt) { this.cascaderService.setOptionActivated(nextOpt, length); } } } /** * @private * @return {?} */ clearDelaySelectTimer() { if (this.delaySelectTimer) { clearTimeout(this.delaySelectTimer); this.delaySelectTimer = null; } } /** * @private * @param {?} option * @param {?} columnIndex * @param {?} performSelect * @return {?} */ delaySetOptionActivated(option, columnIndex, performSelect) { this.clearDelaySelectTimer(); this.delaySelectTimer = setTimeout((/** * @return {?} */ () => { this.cascaderService.setOptionActivated(option, columnIndex, performSelect); this.delaySelectTimer = null; }), 150); } /** * @private * @param {?} toSearching * @return {?} */ toggleSearchingMode(toSearching) { if (this.inSearchingMode !== toSearching) { this.cascaderService.toggleSearchingMode(toSearching); this.dropdownWidthStyle = toSearching ? `${this.input.nativeElement.offsetWidth}px` : ''; } if (this.inSearchingMode) { this.cascaderService.prepareSearchOptions(this.inputValue); } } /** * @param {?} option * @param {?} index * @return {?} */ isOptionActivated(option, index) { /** @type {?} */ const activeOpt = this.cascaderService.activatedOptions[index]; return activeOpt === option; } /** * @param {?} isDisabled * @return {?} */ setDisabledState(isDisabled) { if (isDisabled) { this.closeMenu(); } this.nzDisabled = isDisabled; } /** * @return {?} */ closeMenu() { this.blur(); this.clearDelayMenuTimer(); this.setMenuVisible(false); } /** * @param {?} position * @return {?} */ onPositionChange(position) { /** @type {?} */ const newValue = position.connectionPair.originY === 'bottom' ? 'bottom' : 'top'; if (this.dropDownPosition !== newValue) { this.dropDownPosition = newValue; this.cdr.detectChanges(); } } /** * Reposition the cascader panel. When a menu opens, the cascader expands * and may exceed the boundary of browser's window. * @private * @return {?} */ reposition() { if (this.overlay && this.overlay.overlayRef && this.menuVisible) { Promise.resolve().then((/** * @return {?} */ () => { this.overlay.overlayRef.updatePosition(); })); } } /** * When a cascader options is changed, a child needs to know that it should re-render. * @private * @return {?} */ checkChildren() { if (this.cascaderItems) { this.cascaderItems.forEach((/** * @param {?} item * @return {?} */ item => item.markForCheck())); } } /** * @private * @return {?} */ buildDisplayLabel() { /** @type {?} */ const selectedOptions = this.cascaderService.selectedOptions; /** @type {?} */ const labels = selectedOptions.map((/** * @param {?} o * @return {?} */ o => this.cascaderService.getOptionLabel(o))); if (this.isLabelRenderTemplate) { this.labelRenderContext = { labels, selectedOptions }; } else { this.labelRenderText = defaultDisplayRender.call(this, labels, selectedOptions); } } /** * @private * @return {?} */ setLocale() { this.locale = this.i18nService.getLocaleData('global'); this.cdr.markForCheck(); } } NzCascaderComponent.decorators = [ { type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'nz-cascader, [nz-cascader]', exportAs: 'nzCascader', preserveWhitespaces: false, template: "<div\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n #trigger>\n <div *ngIf=\"nzShowInput\">\n <input\n #input\n nz-input\n class=\"ant-cascader-input\"\n [class.ant-cascader-input-disabled]=\"nzDisabled\"\n [class.ant-cascader-input-lg]=\"nzSize === 'large'\"\n [class.ant-cascader-input-sm]=\"nzSize === 'small'\"\n [attr.autoComplete]=\"'off'\"\n [attr.placeholder]=\"showPlaceholder ? (nzPlaceHolder || locale?.placeholder ) : null\"\n [attr.autofocus]=\"nzAutoFocus ? 'autofocus' : null\"\n [readonly]=\"!nzShowSearch\"\n [disabled]=\"nzDisabled\"\n [nzSize]=\"nzSize\"\n [(ngModel)]=\"inputValue\"\n (blur)=\"handleInputBlur()\"\n (focus)=\"handleInputFocus()\"\n (change)=\"$event.stopPropagation()\">\n <i *ngIf=\"clearIconVisible\"\n nz-icon\n nzType=\"close-circle\"\n nzTheme=\"fill\"\n class=\"ant-cascader-picker-clear\"\n (click)=\"clearSelection($event)\"></i>\n <i *ngIf=\"nzShowArrow && !isLoading\"\n nz-icon\n nzType=\"down\"\n class=\"ant-cascader-picker-arrow\"\n [class.ant-cascader-picker-arrow-expand]=\"menuVisible\">\n </i>\n <i *ngIf=\"isLoading\" nz-icon nzType=\"loading\" class=\"ant-cascader-picker-arrow\"></i>\n <span\n class=\"ant-cascader-picker-label\"\n [class.ant-cascader-show-search]=\"!!nzShowSearch\"\n [class.ant-focusd]=\"!!nzShowSearch && isFocused && !inputValue\">\n <ng-container *ngIf=\"!isLabelRenderTemplate; else labelTemplate\">{{ labelRenderText }}</ng-container>\n <ng-template #labelTemplate>\n <ng-template [ngTemplateOutlet]=\"nzLabelRender\" [ngTemplateOutletContext]=\"labelRenderContext\"></ng-template>\n </ng-template>\n </span>\n </div>\n <ng-content></ng-content>\n</div>\n<ng-template\n cdkConnectedOverlay\n nzConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (backdropClick)=\"closeMenu()\"\n (detach)=\"closeMenu()\"\n (positionChange)=\"onPositionChange($event)\"\n [cdkConnectedOverlayOpen]=\"menuVisible\">\n <div\n #menu\n class=\"ant-