UNPKG

ng-zorro-antd

Version:

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

641 lines (634 loc) 25.9 kB
import { __decorate, __metadata } from 'tslib'; import { BACKSPACE } from '@angular/cdk/keycodes'; import { merge, of } from 'rxjs'; import { filter, tap } from 'rxjs/operators'; import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay'; import { CommonModule } from '@angular/common'; import { Injectable, forwardRef, ChangeDetectorRef, Component, ElementRef, EventEmitter, Host, Injector, Input, Optional, Output, Renderer2, Self, ViewChild, NgModule } from '@angular/core'; import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; import { NzTreeBaseService, isNotNil, slideMotion, zoomMotion, InputBoolean, NzNoAnimationDirective, NzTreeHigherOrderServiceToken, NzTreeNode, NzNoAnimationModule, NzOverlayModule } from 'ng-zorro-antd/core'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzTreeModule } from 'ng-zorro-antd/tree'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTreeSelectService extends NzTreeBaseService { } NzTreeSelectService.decorators = [ { type: Injectable } ]; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @param {?} injector * @return {?} */ function higherOrderServiceFactory(injector) { return injector.get(NzTreeSelectService); } class NzTreeSelectComponent { /** * @param {?} renderer * @param {?} cdr * @param {?} nzTreeService * @param {?} elementRef * @param {?=} noAnimation */ constructor(renderer, cdr, nzTreeService, elementRef, noAnimation) { this.renderer = renderer; this.cdr = cdr; this.nzTreeService = nzTreeService; this.elementRef = elementRef; this.noAnimation = noAnimation; this.nzAllowClear = true; this.nzShowExpand = true; this.nzShowLine = false; this.nzDropdownMatchSelectWidth = true; this.nzCheckable = false; this.nzShowSearch = false; this.nzDisabled = false; this.nzAsyncData = false; this.nzMultiple = false; this.nzDefaultExpandAll = false; this.nzNodes = []; this.nzOpen = false; this.nzSize = 'default'; this.nzPlaceHolder = ''; this.nzDefaultExpandedKeys = []; this.nzDisplayWith = (/** * @param {?} node * @return {?} */ (node) => node.title); this.nzOpenChange = new EventEmitter(); this.nzCleared = new EventEmitter(); this.nzRemoved = new EventEmitter(); this.nzExpandChange = new EventEmitter(); this.nzTreeClick = new EventEmitter(); this.nzTreeCheckBoxChange = new EventEmitter(); this.isComposing = false; this.isDestroy = true; this.isNotFound = false; this.inputValue = ''; this.dropDownPosition = 'bottom'; this.selectedNodes = []; this.value = []; this.onTouched = (/** * @return {?} */ () => null); this.renderer.addClass(this.elementRef.nativeElement, 'ant-select'); } /** * @return {?} */ get placeHolderDisplay() { return this.inputValue || this.isComposing || this.selectedNodes.length ? 'none' : 'block'; } /** * @return {?} */ get searchDisplay() { return this.nzOpen ? 'block' : 'none'; } /** * @return {?} */ get isMultiple() { return this.nzMultiple || this.nzCheckable; } /** * @return {?} */ get selectedValueDisplay() { /** @type {?} */ let showSelectedValue = false; /** @type {?} */ let opacity = 1; if (!this.nzShowSearch) { showSelectedValue = true; } else { if (this.nzOpen) { showSelectedValue = !(this.inputValue || this.isComposing); if (showSelectedValue) { opacity = 0.4; } } else { showSelectedValue = true; } } return { display: showSelectedValue ? 'block' : 'none', opacity: `${opacity}` }; } /** * @return {?} */ ngOnInit() { this.isDestroy = false; this.selectionChangeSubscription = this.subscribeSelectionChange(); } /** * @return {?} */ ngOnDestroy() { this.isDestroy = true; this.closeDropDown(); this.selectionChangeSubscription.unsubscribe(); } /** * @param {?} isDisabled * @return {?} */ setDisabledState(isDisabled) { this.nzDisabled = isDisabled; this.closeDropDown(); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { if (changes.hasOwnProperty('nzNodes')) { this.updateSelectedNodes(true); } } /** * @param {?} value * @return {?} */ writeValue(value) { if (isNotNil(value)) { if (this.isMultiple && Array.isArray(value)) { this.value = value; } else { this.value = [(/** @type {?} */ (value))]; } this.updateSelectedNodes(true); } else { this.value = []; this.selectedNodes.forEach((/** * @param {?} node * @return {?} */ node => { this.removeSelected(node, false); })); this.selectedNodes = []; } this.cdr.markForCheck(); } /** * @param {?} fn * @return {?} */ registerOnChange(fn) { this.onChange = fn; } /** * @param {?} fn * @return {?} */ registerOnTouched(fn) { this.onTouched = fn; } /** * @return {?} */ trigger() { if (this.nzDisabled || (!this.nzDisabled && this.nzOpen)) { this.closeDropDown(); } else { this.openDropdown(); if (this.nzShowSearch || this.isMultiple) { this.focusOnInput(); } } } /** * @return {?} */ openDropdown() { if (!this.nzDisabled) { this.nzOpen = true; this.nzOpenChange.emit(this.nzOpen); this.updateCdkConnectedOverlayStatus(); this.updatePosition(); } } /** * @return {?} */ closeDropDown() { this.onTouched(); this.nzOpen = false; this.nzOpenChange.emit(this.nzOpen); this.cdr.markForCheck(); } /** * @param {?} e * @return {?} */ onKeyDownInput(e) { /** @type {?} */ const keyCode = e.keyCode; /** @type {?} */ const eventTarget = (/** @type {?} */ (e.target)); if (this.isMultiple && !eventTarget.value && keyCode === BACKSPACE) { e.preventDefault(); if (this.selectedNodes.length) { /** @type {?} */ const removeNode = this.selectedNodes[this.selectedNodes.length - 1]; this.removeSelected(removeNode); (/** @type {?} */ ((/** @type {?} */ (this.nzTreeService)).triggerEventChange$)).next({ eventName: 'removeSelect', node: removeNode }); } } } /** * @param {?} value * @return {?} */ onExpandedKeysChange(value) { this.nzExpandChange.emit(value); this.nzDefaultExpandedKeys = [...(/** @type {?} */ (value.keys))]; } /** * @param {?} value * @return {?} */ setInputValue(value) { this.inputValue = value; this.updateInputWidth(); this.updatePosition(); } /** * @param {?} node * @param {?=} emit * @param {?=} event * @return {?} */ removeSelected(node, emit = true, event) { node.isSelected = false; node.isChecked = false; if (this.nzCheckable) { this.nzTreeService.conduct(node); } else { this.nzTreeService.setSelectedNodeList(node, this.nzMultiple); } if (emit) { this.nzRemoved.emit(node); } // Do not trigger the popup if (event && event.stopPropagation) { event.stopPropagation(); } } /** * @return {?} */ focusOnInput() { setTimeout((/** * @return {?} */ () => { if (this.inputElement) { this.inputElement.nativeElement.focus(); } })); } /** * @return {?} */ subscribeSelectionChange() { return merge(this.nzTreeClick.pipe(tap((/** * @param {?} event * @return {?} */ (event) => { /** @type {?} */ const node = (/** @type {?} */ (event.node)); if (this.nzCheckable && !node.isDisabled && !node.isDisableCheckbox) { node.isChecked = !node.isChecked; this.nzTreeService.conduct(node); } if (this.nzCheckable) { node.isSelected = false; } })), filter((/** * @param {?} event * @return {?} */ (event) => { /** @type {?} */ const node = (/** @type {?} */ (event.node)); return this.nzCheckable ? !node.isDisabled && !node.isDisableCheckbox : !node.isDisabled; }))), this.nzCheckable ? this.nzTreeCheckBoxChange : of(), this.nzCleared, this.nzRemoved).subscribe((/** * @return {?} */ () => { this.updateSelectedNodes(); /** @type {?} */ const value = this.selectedNodes.map((/** * @param {?} node * @return {?} */ node => (/** @type {?} */ (node.key)))); this.value = [...value]; if (this.nzShowSearch || this.isMultiple) { this.inputValue = ''; this.isNotFound = false; } if (this.isMultiple) { this.onChange(value); this.focusOnInput(); this.updatePosition(); } else { this.closeDropDown(); this.onChange(value.length ? value[0] : null); } })); } /** * @param {?=} init * @return {?} */ updateSelectedNodes(init = false) { if (init) { /** @type {?} */ let nodes; this.nzTreeService.isMultiple = this.isMultiple; if (!this.nzTreeService.isArrayOfNzTreeNode(this.nzNodes)) { // has not been new NzTreeNode nodes = this.nzNodes.map((/** * @param {?} item * @return {?} */ item => new NzTreeNode(item, undefined, this.nzTreeService))); } else { nodes = this.nzNodes.map((/** * @param {?} item * @return {?} */ item => new NzTreeNode(Object.assign({}, item.origin), undefined, this.nzTreeService))); } this.nzTreeService.initTree(nodes); if (this.nzCheckable) { this.nzTreeService.calcCheckedKeys(this.value, nodes); } else { this.nzTreeService.calcSelectedKeys(this.value, nodes, this.isMultiple); } } this.selectedNodes = [ ...(this.nzCheckable ? this.nzTreeService.getCheckedNodeList() : this.nzTreeService.getSelectedNodeList()) ]; } /** * @return {?} */ updatePosition() { setTimeout((/** * @return {?} */ () => { if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) { this.cdkConnectedOverlay.overlayRef.updatePosition(); } })); } /** * @param {?} position * @return {?} */ onPositionChange(position) { this.dropDownPosition = position.connectionPair.originY; } /** * @return {?} */ updateInputWidth() { if (this.isMultiple && this.inputElement) { if (this.inputValue || this.isComposing) { this.renderer.setStyle(this.inputElement.nativeElement, 'width', `${this.inputElement.nativeElement.scrollWidth}px`); } else { this.renderer.removeStyle(this.inputElement.nativeElement, 'width'); } } } /** * @param {?} $event * @return {?} */ onClearSelection($event) { $event.stopPropagation(); $event.preventDefault(); this.selectedNodes.forEach((/** * @param {?} node * @return {?} */ node => { this.removeSelected(node, false); })); this.nzCleared.emit(); } /** * @param {?} $event * @return {?} */ setSearchValues($event) { Promise.resolve().then((/** * @return {?} */ () => { this.isNotFound = (this.nzShowSearch || this.isMultiple) && !!this.inputValue && (/** @type {?} */ ($event.matchedKeys)).length === 0; })); } /** * @return {?} */ updateCdkConnectedOverlayStatus() { this.triggerWidth = this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect().width; } /** * @param {?} _index * @param {?} option * @return {?} */ trackValue(_index, option) { return (/** @type {?} */ (option.key)); } } NzTreeSelectComponent.decorators = [ { type: Component, args: [{ selector: 'nz-tree-select', exportAs: 'nzTreeSelect', animations: [slideMotion, zoomMotion], template: "<ng-template #inputTemplate>\n <input\n #inputElement\n autocomplete=\"off\"\n class=\"ant-select-search__field\"\n (compositionstart)=\"isComposing = true\"\n (compositionend)=\"isComposing = false\"\n (keydown)=\"onKeyDownInput($event)\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"setInputValue($event)\"\n [disabled]=\"nzDisabled\">\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n nzConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"cdkOverlayOrigin\"\n [cdkConnectedOverlayOpen]=\"nzOpen\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayMinWidth]=\"nzDropdownMatchSelectWidth? null : triggerWidth\"\n [cdkConnectedOverlayWidth]=\"nzDropdownMatchSelectWidth? triggerWidth : null\"\n (backdropClick)=\"closeDropDown()\"\n (detach)=\"closeDropDown()\"\n (positionChange)=\"onPositionChange($event)\">\n <div class=\"ant-select-dropdown ant-select-tree-dropdown\"\n [@slideMotion]=\"nzOpen ? dropDownPosition : 'void'\"\n [nzNoAnimation]=\"noAnimation?.nzNoAnimation\"\n [class.ant-select-dropdown--single]=\"!nzMultiple\"\n [class.ant-select-dropdown--multiple]=\"nzMultiple\"\n [class.ant-select-dropdown-placement-bottomLeft]=\"dropDownPosition === 'bottom'\"\n [class.ant-select-dropdown-placement-topLeft]=\"dropDownPosition === 'top'\"\n [ngStyle]=\"nzDropdownStyle\">\n <nz-tree\n #treeRef\n [hidden]=\"isNotFound\"\n nzNoAnimation\n nzSelectMode\n [nzData]=\"nzNodes\"\n [nzMultiple]=\"nzMultiple\"\n [nzSearchValue]=\"inputValue\"\n [nzCheckable]=\"nzCheckable\"\n [nzAsyncData]=\"nzAsyncData\"\n [nzShowExpand]=\"nzShowExpand\"\n [nzShowLine]=\"nzShowLine\"\n [nzExpandedIcon]=\"nzExpandedIcon\"\n [nzExpandAll]=\"nzDefaultExpandAll\"\n [nzExpandedKeys]=\"nzDefaultExpandedKeys\"\n [nzCheckedKeys]=\"nzCheckable ? value : []\"\n [nzSelectedKeys]=\"!nzCheckable ? value : []\"\n (nzExpandChange)=\"onExpandedKeysChange($event)\"\n (nzClick)=\"nzTreeClick.emit($event)\"\n (nzCheckedKeysChange)=\"updateSelectedNodes()\"\n (nzSelectedKeysChange)=\"updateSelectedNodes()\"\n (nzCheckBoxChange)=\"nzTreeCheckBoxChange.emit($event)\"\n (nzSearchValueChange)=\"setSearchValues($event)\">\n </nz-tree>\n <span *ngIf=\"nzNodes.length === 0 || isNotFound\" class=\"ant-select-not-found\">\n <nz-embed-empty [nzComponentName]=\"'tree-select'\" [specificContent]=\"nzNotFoundContent\"></nz-embed-empty>\n </span>\n </div>\n</ng-template>\n\n<div\n cdkOverlayOrigin\n class=\"ant-select-selection\"\n [class.ant-select-selection--single]=\"!isMultiple\"\n [class.ant-select-selection--multiple]=\"isMultiple\"\n tabindex=\"0\">\n <ng-container *ngIf=\"!isMultiple\">\n <div class=\"ant-select-selection__rendered\">\n <div\n *ngIf=\"nzPlaceHolder && selectedNodes.length === 0\"\n [style.display]=\"placeHolderDisplay\"\n class=\"ant-select-selection__placeholder\">\n {{ nzPlaceHolder }}\n </div>\n\n <div\n *ngIf=\"selectedNodes.length === 1\"\n class=\"ant-select-selection-selected-value\"\n [attr.title]=\"nzDisplayWith(selectedNodes[0])\"\n [ngStyle]=\"selectedValueDisplay\">\n {{ nzDisplayWith(selectedNodes[0]) }}\n </div>\n\n <div\n *ngIf=\"nzShowSearch\"\n [style.display]=\"searchDisplay\"\n class=\"ant-select-search ant-select-search--inline\">\n <div class=\"ant-select-search__field__wrap\">\n <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n <span class=\"ant-select-search__field__mirror\">{{inputValue}}&nbsp;</span>\n </div>\n </div>\n\n </div>\n </ng-container>\n <ng-container *ngIf=\"isMultiple\">\n <ul class=\"ant-select-selection__rendered\">\n <div\n *ngIf=\"nzPlaceHolder && selectedNodes.length === 0\"\n [style.display]=\"placeHolderDisplay\"\n class=\"ant-select-selection__placeholder\">\n {{ nzPlaceHolder }}\n </div>\n <ng-container *ngFor=\"let node of selectedNodes | slice: 0 : nzMaxTagCount; trackBy:trackValue\">\n <li\n [@zoomMotion]\n [nzNoAnimation]=\"noAnimation?.nzNoAnimation\"\n [attr.title]=\"nzDisplayWith(node)\"\n [class.ant-select-selection__choice__disabled]=\"node.isDisabled\"\n class=\"ant-select-selection__choice\">\n <span *ngIf=\"!node.isDisabled\" class=\"ant-select-selection__choice__remove\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"removeSelected(node, true, $event)\">\n <i nz-icon type=\"close\" class=\"ant-select-remove-icon\"></i>\n </span>\n <span class=\"ant-select-selection__choice__content\">{{ nzDisplayWith(node) }}</span>\n </li>\n </ng-container>\n <li [@zoomMotion]\n *ngIf=\"selectedNodes.length > nzMaxTagCount\"\n class=\"ant-select-selection__choice\">\n <div class=\"ant-select-selection__choice__content\">\n <ng-container *ngIf=\"nzMaxTagPlaceholder\">\n <ng-template\n [ngTemplateOutlet]=\"nzMaxTagPlaceholder\"\n [ngTemplateOutletContext]=\"{ $implicit: selectedNodes | slice: nzMaxTagCount}\">\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!nzMaxTagPlaceholder\">\n + {{ selectedNodes.length - nzMaxTagCount }} ...\n </ng-container>\n </div>\n </li>\n <li class=\"ant-select-search ant-select-search--inline\">\n <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n </li>\n </ul>\n </ng-container>\n <span *ngIf=\"nzAllowClear\" class=\"ant-select-selection__clear\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClearSelection($event)\">\n <i nz-icon type=\"close-circle\" class=\"ant-select-clear-icon\" theme=\"fill\"></i>\n </span>\n <span *ngIf=\"!isMultiple\" class=\"ant-select-arrow\">\n <i nz-icon type=\"down\" class=\"ant-select-arrow-icon\"></i>\n </span>\n</div>", providers: [ NzTreeSelectService, { provide: NzTreeHigherOrderServiceToken, useFactory: higherOrderServiceFactory, deps: [[new Self(), Injector]] }, { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((/** * @return {?} */ () => NzTreeSelectComponent)), multi: true } ], host: { '[class.ant-select-lg]': 'nzSize==="large"', '[class.ant-select-sm]': 'nzSize==="small"', '[class.ant-select-enabled]': '!nzDisabled', '[class.ant-select-disabled]': 'nzDisabled', '[class.ant-select-allow-clear]': 'nzAllowClear', '[class.ant-select-open]': 'nzOpen', '(click)': 'trigger()' }, styles: [` .ant-select-dropdown { top: 100%; left: 0; position: relative; width: 100%; margin-top: 4px; margin-bottom: 4px; overflow: auto; } `] }] } ]; /** @nocollapse */ NzTreeSelectComponent.ctorParameters = () => [ { type: Renderer2 }, { type: ChangeDetectorRef }, { type: NzTreeSelectService }, { type: ElementRef }, { type: NzNoAnimationDirective, decorators: [{ type: Host }, { type: Optional }] } ]; NzTreeSelectComponent.propDecorators = { nzAllowClear: [{ type: Input }], nzShowExpand: [{ type: Input }], nzShowLine: [{ type: Input }], nzExpandedIcon: [{ type: Input }], nzDropdownMatchSelectWidth: [{ type: Input }], nzCheckable: [{ type: Input }], nzShowSearch: [{ type: Input }], nzDisabled: [{ type: Input }], nzAsyncData: [{ type: Input }], nzMultiple: [{ type: Input }], nzDefaultExpandAll: [{ type: Input }], nzNotFoundContent: [{ type: Input }], nzNodes: [{ type: Input }], nzOpen: [{ type: Input }], nzSize: [{ type: Input }], nzPlaceHolder: [{ type: Input }], nzDropdownStyle: [{ type: Input }], nzDefaultExpandedKeys: [{ type: Input }], nzDisplayWith: [{ type: Input }], nzMaxTagCount: [{ type: Input }], nzMaxTagPlaceholder: [{ type: Input }], nzOpenChange: [{ type: Output }], nzCleared: [{ type: Output }], nzRemoved: [{ type: Output }], nzExpandChange: [{ type: Output }], nzTreeClick: [{ type: Output }], nzTreeCheckBoxChange: [{ type: Output }], inputElement: [{ type: ViewChild, args: ['inputElement',] }], treeRef: [{ type: ViewChild, args: ['treeRef',] }], cdkOverlayOrigin: [{ type: ViewChild, args: [CdkOverlayOrigin,] }], cdkConnectedOverlay: [{ type: ViewChild, args: [CdkConnectedOverlay,] }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzAllowClear", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzShowExpand", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzShowLine", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzDropdownMatchSelectWidth", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzCheckable", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzShowSearch", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzDisabled", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzAsyncData", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzMultiple", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTreeSelectComponent.prototype, "nzDefaultExpandAll", void 0); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTreeSelectModule { } NzTreeSelectModule.decorators = [ { type: NgModule, args: [{ imports: [ CommonModule, OverlayModule, FormsModule, NzTreeModule, NzIconModule, NzEmptyModule, NzOverlayModule, NzNoAnimationModule ], declarations: [NzTreeSelectComponent], exports: [NzTreeSelectComponent] },] } ]; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { higherOrderServiceFactory, NzTreeSelectComponent, NzTreeSelectModule, NzTreeSelectService }; //# sourceMappingURL=ng-zorro-antd-tree-select.js.map