UNPKG

ng-zorro-antd

Version:

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

2 lines 19.3 kB
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/cdk/keycodes"),require("@angular/cdk/overlay"),require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("ng-zorro-antd/core"),require("ng-zorro-antd/tree"),require("@angular/common"),require("ng-zorro-antd/empty"),require("ng-zorro-antd/icon")):"function"==typeof define&&define.amd?define("ng-zorro-antd/tree-select",["exports","@angular/cdk/keycodes","@angular/cdk/overlay","@angular/core","@angular/forms","rxjs","rxjs/operators","ng-zorro-antd/core","ng-zorro-antd/tree","@angular/common","ng-zorro-antd/empty","ng-zorro-antd/icon"],n):n(((e=e||self)["ng-zorro-antd"]=e["ng-zorro-antd"]||{},e["ng-zorro-antd"]["tree-select"]={}),e.ng.cdk.keycodes,e.ng.cdk.overlay,e.ng.core,e.ng.forms,e.rxjs,e.rxjs.operators,e["ng-zorro-antd"].core,e["ng-zorro-antd"].tree,e.ng.common,e["ng-zorro-antd"].empty,e["ng-zorro-antd"].icon)}(this,function(e,n,t,o,i,l,a,r,s,c,p,d){"use strict";var u=function(e,n){return(u=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)n.hasOwnProperty(t)&&(e[t]=n[t])})(e,n)};function h(e,n){function t(){this.constructor=e}u(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}function y(e,n,t,o){var i,l=arguments.length,a=l<3?n:null===o?o=Object.getOwnPropertyDescriptor(n,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,n,t,o);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(l<3?i(a):l>3?i(n,t,a):i(n,t))||a);return l>3&&a&&Object.defineProperty(n,t,a),a}function z(e,n){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,n)}function g(e,n){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var o,i,l=t.call(e),a=[];try{for(;(void 0===n||n-- >0)&&!(o=l.next()).done;)a.push(o.value)}catch(e){i={error:e}}finally{try{o&&!o.done&&(t=l.return)&&t.call(l)}finally{if(i)throw i.error}}return a}function f(){for(var e=[],n=0;n<arguments.length;n++)e=e.concat(g(arguments[n]));return e}var m=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return h(n,e),n.decorators=[{type:o.Injectable}],n}(r.NzTreeBaseService);function v(e){return e.get(m)}var C=function(e){function s(n,t,i,l,a,r){var s=e.call(this,n)||this;return s.nzConfigService=t,s.renderer=i,s.cdr=l,s.elementRef=a,s.noAnimation=r,s.nzAllowClear=!0,s.nzShowExpand=!0,s.nzShowLine=!1,s.nzCheckable=!1,s.nzShowSearch=!1,s.nzDisabled=!1,s.nzAsyncData=!1,s.nzMultiple=!1,s.nzDefaultExpandAll=!1,s.nzCheckStrictly=!1,s.nzNodes=[],s.nzOpen=!1,s.nzPlaceHolder="",s.nzDisplayWith=function(e){return e.title},s.nzOpenChange=new o.EventEmitter,s.nzCleared=new o.EventEmitter,s.nzRemoved=new o.EventEmitter,s.nzExpandChange=new o.EventEmitter,s.nzTreeClick=new o.EventEmitter,s.nzTreeCheckBoxChange=new o.EventEmitter,s.isComposing=!1,s.isDestroy=!0,s.isNotFound=!1,s.inputValue="",s.dropDownPosition="bottom",s.selectedNodes=[],s.expandedKeys=[],s.value=[],s.onTouched=function(){return null},s.renderer.addClass(s.elementRef.nativeElement,"ant-select"),s}return h(s,e),Object.defineProperty(s.prototype,"nzDefaultExpandedKeys",{get:function(){return this.expandedKeys},set:function(e){r.warnDeprecation("'nzDefaultExpandedKeys' would be removed in 9.0.0. Please use 'nzExpandedKeys' instead."),this.expandedKeys=e},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"nzExpandedKeys",{get:function(){return this.expandedKeys},set:function(e){this.expandedKeys=e},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"treeTemplate",{get:function(){return this.nzTreeTemplate||this.nzTreeTemplateChild},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"placeHolderDisplay",{get:function(){return this.inputValue||this.isComposing||this.selectedNodes.length?"none":"block"},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"searchDisplay",{get:function(){return this.nzOpen?"block":"none"},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"isMultiple",{get:function(){return this.nzMultiple||this.nzCheckable},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"selectedValueDisplay",{get:function(){var e=!1,n=1;return this.nzShowSearch&&this.nzOpen?(e=!(this.inputValue||this.isComposing))&&(n=.4):e=!0,{display:e?"block":"none",opacity:""+n}},enumerable:!0,configurable:!0}),s.prototype.ngOnInit=function(){this.isDestroy=!1,this.selectionChangeSubscription=this.subscribeSelectionChange()},s.prototype.ngOnDestroy=function(){this.isDestroy=!0,this.closeDropDown(),this.selectionChangeSubscription.unsubscribe()},s.prototype.setDisabledState=function(e){this.nzDisabled=e,this.closeDropDown()},s.prototype.ngOnChanges=function(e){e.hasOwnProperty("nzNodes")&&this.updateSelectedNodes(!0)},s.prototype.writeValue=function(e){var n=this;r.isNotNil(e)?(this.isMultiple&&Array.isArray(e)?this.value=e:this.value=[e],this.updateSelectedNodes(!0)):(this.value=[],this.selectedNodes.forEach(function(e){n.removeSelected(e,!1)}),this.selectedNodes=[]),this.cdr.markForCheck()},s.prototype.registerOnChange=function(e){this.onChange=e},s.prototype.registerOnTouched=function(e){this.onTouched=e},s.prototype.trigger=function(){this.nzDisabled||!this.nzDisabled&&this.nzOpen?this.closeDropDown():(this.openDropdown(),(this.nzShowSearch||this.isMultiple)&&this.focusOnInput())},s.prototype.openDropdown=function(){this.nzDisabled||(this.nzOpen=!0,this.nzOpenChange.emit(this.nzOpen),this.updateCdkConnectedOverlayStatus(),this.updatePosition())},s.prototype.closeDropDown=function(){this.onTouched(),this.nzOpen=!1,this.nzOpenChange.emit(this.nzOpen),this.cdr.markForCheck()},s.prototype.onKeyDownInput=function(e){var t=e.keyCode,o=e.target;if(this.isMultiple&&!o.value&&t===n.BACKSPACE&&(e.preventDefault(),this.selectedNodes.length)){var i=this.selectedNodes[this.selectedNodes.length-1];this.removeSelected(i),this.nzTreeService.triggerEventChange$.next({eventName:"removeSelect",node:i})}},s.prototype.onExpandedKeysChange=function(e){this.nzExpandChange.emit(e),this.expandedKeys=f(e.keys)},s.prototype.setInputValue=function(e){this.inputValue=e,this.updateInputWidth(),this.updatePosition()},s.prototype.removeSelected=function(e,n,t){void 0===n&&(n=!0),e.isSelected=!1,e.isChecked=!1,this.nzCheckable?this.nzTreeService.conduct(e):this.nzTreeService.setSelectedNodeList(e,this.nzMultiple),n&&this.nzRemoved.emit(e),t&&t.stopPropagation&&t.stopPropagation()},s.prototype.focusOnInput=function(){var e=this;setTimeout(function(){e.inputElement&&e.inputElement.nativeElement.focus()})},s.prototype.subscribeSelectionChange=function(){var e=this;return l.merge(this.nzTreeClick.pipe(a.tap(function(n){var t=n.node;!e.nzCheckable||t.isDisabled||t.isDisableCheckbox||(t.isChecked=!t.isChecked,e.nzTreeService.conduct(t)),e.nzCheckable&&(t.isSelected=!1)}),a.filter(function(n){var t=n.node;return e.nzCheckable?!t.isDisabled&&!t.isDisableCheckbox:!t.isDisabled&&t.isSelectable})),this.nzCheckable?this.nzTreeCheckBoxChange:l.of(),this.nzCleared,this.nzRemoved).subscribe(function(){e.updateSelectedNodes();var n=e.selectedNodes.map(function(e){return e.key});e.value=f(n),(e.nzShowSearch||e.isMultiple)&&(e.inputValue="",e.isNotFound=!1),e.isMultiple?(e.onChange(n),e.focusOnInput(),e.updatePosition()):(e.closeDropDown(),e.onChange(n.length?n[0]:null))})},s.prototype.updateSelectedNodes=function(e){if(void 0===e&&(e=!1),e){var n=this.coerceTreeNodes(this.nzNodes);this.nzTreeService.isMultiple=this.isMultiple,this.nzTreeService.initTree(n),this.nzCheckable?this.nzTreeService.calcCheckedKeys(this.value,n):this.nzTreeService.calcSelectedKeys(this.value,n,this.isMultiple)}this.selectedNodes=f(this.nzCheckable?this.getCheckedNodeList():this.getSelectedNodeList())},s.prototype.updatePosition=function(){var e=this;setTimeout(function(){e.cdkConnectedOverlay&&e.cdkConnectedOverlay.overlayRef&&e.cdkConnectedOverlay.overlayRef.updatePosition()})},s.prototype.onPositionChange=function(e){this.dropDownPosition=e.connectionPair.originY},s.prototype.updateInputWidth=function(){this.isMultiple&&this.inputElement&&(this.inputValue||this.isComposing?this.renderer.setStyle(this.inputElement.nativeElement,"width",this.inputElement.nativeElement.scrollWidth+"px"):this.renderer.removeStyle(this.inputElement.nativeElement,"width"))},s.prototype.onClearSelection=function(e){var n=this;e.stopPropagation(),e.preventDefault(),this.selectedNodes.forEach(function(e){n.removeSelected(e,!1)}),this.nzCleared.emit()},s.prototype.setSearchValues=function(e){var n=this;Promise.resolve().then(function(){n.isNotFound=(n.nzShowSearch||n.isMultiple)&&!!n.inputValue&&0===e.matchedKeys.length})},s.prototype.updateCdkConnectedOverlayStatus=function(){this.triggerWidth=this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect().width},s.prototype.trackValue=function(e,n){return n.key},s.decorators=[{type:o.Component,args:[{selector:"nz-tree-select",exportAs:"nzTreeSelect",animations:[r.slideMotion,r.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 [@.disabled]="noAnimation?.nzNoAnimation"\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 [nzHideUnMatched]="nzHideUnMatched"\n [nzShowIcon]="nzShowIcon"\n [nzCheckable]="nzCheckable"\n [nzAsyncData]="nzAsyncData"\n [nzShowExpand]="nzShowExpand"\n [nzShowLine]="nzShowLine"\n [nzExpandedIcon]="nzExpandedIcon"\n [nzExpandAll]="nzDefaultExpandAll"\n [nzExpandedKeys]="expandedKeys"\n [nzCheckedKeys]="nzCheckable ? value : []"\n [nzSelectedKeys]="!nzCheckable ? value : []"\n [nzTreeTemplate]="treeTemplate"\n [nzCheckStrictly]="nzCheckStrictly"\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 [@.disabled]="noAnimation?.nzNoAnimation"\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 nzType="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 nzType="close-circle" class="ant-select-clear-icon" nzTheme="fill"></i>\n </span>\n <span *ngIf="!isMultiple" class="ant-select-arrow">\n <i nz-icon nzType="down" class="ant-select-arrow-icon"></i>\n </span>\n</div>',providers:[m,{provide:r.NzTreeHigherOrderServiceToken,useFactory:v,deps:[[new o.Self,o.Injector]]},{provide:i.NG_VALUE_ACCESSOR,useExisting:o.forwardRef(function(){return s}),multi:!0}],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:["\n .ant-select-dropdown {\n top: 100%;\n left: 0;\n position: relative;\n width: 100%;\n margin-top: 4px;\n margin-bottom: 4px;\n overflow: auto;\n }\n "]}]}],s.ctorParameters=function(){return[{type:m},{type:r.NzConfigService},{type:o.Renderer2},{type:o.ChangeDetectorRef},{type:o.ElementRef},{type:r.NzNoAnimationDirective,decorators:[{type:o.Host},{type:o.Optional}]}]},s.propDecorators={nzAllowClear:[{type:o.Input}],nzShowExpand:[{type:o.Input}],nzShowLine:[{type:o.Input}],nzDropdownMatchSelectWidth:[{type:o.Input}],nzCheckable:[{type:o.Input}],nzHideUnMatched:[{type:o.Input}],nzShowIcon:[{type:o.Input}],nzShowSearch:[{type:o.Input}],nzDisabled:[{type:o.Input}],nzAsyncData:[{type:o.Input}],nzMultiple:[{type:o.Input}],nzDefaultExpandAll:[{type:o.Input}],nzCheckStrictly:[{type:o.Input}],nzExpandedIcon:[{type:o.Input}],nzNotFoundContent:[{type:o.Input}],nzNodes:[{type:o.Input}],nzOpen:[{type:o.Input}],nzSize:[{type:o.Input}],nzPlaceHolder:[{type:o.Input}],nzDropdownStyle:[{type:o.Input}],nzDefaultExpandedKeys:[{type:o.Input}],nzExpandedKeys:[{type:o.Input}],nzDisplayWith:[{type:o.Input}],nzMaxTagCount:[{type:o.Input}],nzMaxTagPlaceholder:[{type:o.Input}],nzOpenChange:[{type:o.Output}],nzCleared:[{type:o.Output}],nzRemoved:[{type:o.Output}],nzExpandChange:[{type:o.Output}],nzTreeClick:[{type:o.Output}],nzTreeCheckBoxChange:[{type:o.Output}],inputElement:[{type:o.ViewChild,args:["inputElement",{static:!1}]}],treeRef:[{type:o.ViewChild,args:["treeRef",{static:!1}]}],cdkOverlayOrigin:[{type:o.ViewChild,args:[t.CdkOverlayOrigin,{static:!0}]}],cdkConnectedOverlay:[{type:o.ViewChild,args:[t.CdkConnectedOverlay,{static:!1}]}],nzTreeTemplate:[{type:o.Input}],nzTreeTemplateChild:[{type:o.ContentChild,args:["nzTreeTemplate",{static:!0}]}]},y([r.InputBoolean(),z("design:type",Boolean)],s.prototype,"nzAllowClear",void 0),y([r.InputBoolean(),z("design:type",Boolean)],s.prototype,"nzShowExpand",void 0),y([r.InputBoolean(),z("design:type",Boolean)],s.prototype,"nzShowLine",void 0),y([r.InputBoolean(),r.WithConfig(!0),z("design:type",Boolean)],s.prototype,"nzDropdownMatchSelectWidth",void 0),y([r.InputBoolean(),z("design:type",Boolean)],s.prototype,"nzCheckable",void 0),y([r.InputBoolean(),r.WithConfig(!1),z("design:type",Boolean)],s.prototype,"nzHideUnMatched",void 0),y([r.InputBoolean(),r.WithConfig(!1),z("design:type",Boolean)],s.prototype,"nzShowIcon",void 0),y([r.InputBoolean(),z("design:type",Boolean)],s.prototype,"nzShowSearch",void 0),y([r.InputBoolean(),z("design:type",Object)],s.prototype,"nzDisabled",void 0),y([r.InputBoolean(),z("design:type",Object)],s.prototype,"nzAsyncData",void 0),y([r.InputBoolean(),z("design:type",Object)],s.prototype,"nzMultiple",void 0),y([r.InputBoolean(),z("design:type",Object)],s.prototype,"nzDefaultExpandAll",void 0),y([r.InputBoolean(),z("design:type",Object)],s.prototype,"nzCheckStrictly",void 0),y([r.WithConfig("default"),z("design:type",String)],s.prototype,"nzSize",void 0),s}(r.NzTreeBase);var S=function(){function e(){}return e.decorators=[{type:o.NgModule,args:[{imports:[c.CommonModule,t.OverlayModule,i.FormsModule,s.NzTreeModule,d.NzIconModule,p.NzEmptyModule,r.NzOverlayModule,r.NzNoAnimationModule],declarations:[C],exports:[C]}]}],e}();e.NzTreeSelectComponent=C,e.NzTreeSelectModule=S,e.NzTreeSelectService=m,e.higherOrderServiceFactory=v,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ng-zorro-antd-tree-select.umd.min.js.map