@duoduo-oba/ng-devui/bundles/ng-devui-tree-select.umd.min.js

DevUI components based on Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("ng-devui/tree"),require("rxjs/operators"),require("ng-devui/i18n"),require("@angular/common"),require("ng-devui/checkbox"),require("ng-devui/loading"),require("ng-devui/utils")):"function"==typeof define&&define.amd?define("ng-devui/tree-select",["exports","@angular/core","@angular/forms","ng-devui/tree","rxjs/operators","ng-devui/i18n","@angular/common","ng-devui/checkbox","ng-devui/loading","ng-devui/utils"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"]["tree-select"]={}),e.ng.core,e.ng.forms,e["ng-devui"].tree,e.rxjs.operators,e["ng-devui"].i18n,e.ng.common,e["ng-devui"].checkbox,e["ng-devui"].loading,e["ng-devui"].utils)}(this,(function(e,t,n,i,r,o,s,l,a,p){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */var d=function(){return(d=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function c(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,o=n.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(i=o.next()).done;)s.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return s}var u={iconParentClose:'\n    <span style="width: 14px; display: inline-block; content: \'\';">\n      <svg\n        width="16px"\n        height="16px"\n        viewBox="0 0 16 16"\n        version="1.1"\n        xmlns="http://www.w3.org/2000/svg"\n        xmlns:xlink="http://www.w3.org/1999/xlink"\n      >\n        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n          <path\n            d="M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,\n            13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M7,7 L4,7 L4,9 L7,9 L7,12 L9,12 L9,9 L12,9 L12,7 L9,7 L9,4 L7,4 L7,7 Z"\n            fill="#5E6678"\n            fill-rule="nonzero"\n          ></path>\n        </g>\n      </svg>\n    </span>\n  ',iconParentOpen:'\n    <span style="width: 14px; display: inline-block; content: \'\';">\n      <svg\n        width="16px"\n        height="16px"\n        viewBox="0 0 16 16"\n        version="1.1"\n        xmlns="http://www.w3.org/2000/svg"\n        xmlns:xlink="http://www.w3.org/1999/xlink"\n      >\n        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n          <path\n            d="M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,\n            13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M12,7 L4,7 L4,9 L12,9 L12,7 Z"\n            fill="#5E6678"\n            fill-rule="nonzero"\n          ></path>\n        </g>\n      </svg>\n    </span>\n  ',iconLeaf:"\n    <span style=\"width: 14px; display: inline-block; content: '';\"></span>\n  "},h=d({},u),v=function(){function e(e,n,i){this.renderer=e,this.changeDetectorRef=n,this.i18n=i,this.placeholder="",this.disabled=!1,this.expandTree=!1,this.multiple=!1,this.treeNodeIdKey="id",this.treeNodeChildrenKey="children",this.disabledKey="disabled",this.leafOnly=!1,this.delimiter=", ",this.iconParentOpen=h.iconParentOpen,this.iconParentClose=h.iconParentClose,this.iconLeaf=h.iconLeaf,this.closeOnNodeSelected=!0,this.width=null,this.searchable=!1,this.appendTo="body",this.treeNodeTitleKey="title",this.allowUnselect=!0,this.valueChanged=new t.EventEmitter,this._treeData=[],this.searchString=null,this.noRecord=!1,this._isOpen=!1,this._sourceTree=[],this.readyEvent=function(e){},this.onChange=function(e){return null},this.onTouch=function(){return null}}return Object.defineProperty(e.prototype,"allowClear",{get:function(){return!this.disabled&&!this.multiple&&this.allowUnselect&&this._allowClear&&!!this.selectedValue},set:function(e){this._allowClear=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"treeData",{get:function(){return this._treeData},set:function(e){this._sourceTree=e,this.refreshTree(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isOpen",{get:function(){return this._isOpen},set:function(e){this._isOpen!==e&&(this._isOpen=e,this.changeDetectorRef.detectChanges())},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){this.changeDetectorRef.detectChanges(),this.readyEvent(this),this.searchable&&this.registerSearchListener()},e.prototype.ngOnChanges=function(e){},e.prototype.ngOnDestroy=function(){this.i18nSubscription&&this.i18nSubscription.unsubscribe()},e.prototype.ngOnInit=function(){this.setI18nText()},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouch=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype.writeValue=function(e){this.value=this.multiple?Object.assign([],e):e,this.refreshTree(this.treeData),this.changeDetectorRef.detectChanges(),this.visualizeSelectedItems()},e.prototype.toggle=function(){var e=this;this.timer&&clearTimeout(this.timer);var t=!this.timer;this.timer=setTimeout((function(){e.timer=null}),200),t&&(this.isOpen=!this.isOpen)},e.prototype.setI18nText=function(){var e=this;this.i18nCommonText=this.i18n.getI18nText().common,this.i18nSubscription=this.i18n.langChange().subscribe((function(t){e.i18nCommonText=t.common}))},e.prototype.expandAllNodes=function(e){var t=this;return Array.isArray(e)?e.map((function(e){return t.expandAllNodes(e)})):e instanceof Object?(e.hasOwnProperty(this.treeNodeChildrenKey)&&(e.open=!0,e[this.treeNodeChildrenKey]=this.expandAllNodes(e[this.treeNodeChildrenKey])),e):void 0},e.prototype.prepareTree=function(e,t){var n,i=this;if(void 0===t&&(t=!1),Array.isArray(e))return e.map((function(e){return i.prepareTree(e,t)}));if(e){var r=!1;if(e.hasOwnProperty(this.treeNodeChildrenKey)&&(e.open=!!t||e.open,e[this.treeNodeChildrenKey]=this.prepareTree(e[this.treeNodeChildrenKey],t),this.multiple&&(r=(n=c(this.resolveParentNode(e[this.treeNodeChildrenKey]),2))[0],e.halfChecked=n[1])),e.hasOwnProperty(this.treeNodeIdKey)){var o=e[this.treeNodeIdKey];if(this.multiple){var s=this.nodeSelected(o);if(e.isActive=!1,e.isChecked=s||r,!this.leafOnly&&!s&&r){var l={};l[this.treeNodeIdKey]=e[this.treeNodeIdKey],l[this.treeNodeTitleKey]=e[this.treeNodeTitleKey],this.value.push(l)}}else e.isChecked=!1,e.isActive=this.nodeSelected(o),e.isActive&&(this.currentActiveNode=e)}return e}},e.prototype.nodeSelected=function(e){var t=this;return!!this.value&&(this.multiple&&Array.isArray(this.value)?this.value.map((function(e){return e[t.treeNodeIdKey]})).indexOf(e)>-1:this.value[this.treeNodeIdKey]&&e===this.value[this.treeNodeIdKey])},e.prototype.resolveParentNode=function(e){var t=e.filter((function(e){return e.isChecked})).length,n=e.filter((function(e){return e.isChecked||e.halfChecked})).length;return[t>0&&e.length===t,n>0&&e.length>t]},e.prototype.refreshTree=function(e){this._treeData=Object.assign([],this.prepareTree(e,this.expandTree))},e.prototype.onOperableNodeChecked=function(e){var t,n=this;this.multiple&&(this.value=(t=e,n.leafOnly?t.filter((function(e){return!e.data.isParent})).map((function(e){return e.data.originItem})):t.map((function(e){return e.data.originItem}))),this.emitEvents())},e.prototype.onOperableNodeSelected=function(e){if(!this.multiple){if(this.leafOnly&&e.data.isParent)return;e.data.isActive?(this.currentActiveNode=e.data.originItem,this.value=e.data.originItem,this.closeOnNodeSelected&&(this.isOpen=!1)):this.allowUnselect?(this.currentActiveNode=null,this.value=null):(e.data.isActive=!0,this.closeOnNodeSelected&&(this.isOpen=!1)),this.emitEvents()}},e.prototype.emitEvents=function(){this.visualizeSelectedItems(),this.onChange(this.value),this.valueChanged.emit(this.selectedValue()),this.onTouch()},e.prototype.visualizeSelectedItems=function(){this.multiple?this.visualizeMultipleValue():this.visualizeSingleValue()},e.prototype.visualizeMultipleValue=function(){var e=this;if(this.tree&&this.tree.treeFactory){var t=this.selectedValue().map((function(t){return t[e.treeNodeTitleKey]})).join(this.delimiter);this.renderer.setAttribute(this.selectHost.nativeElement,"value",t)}else this.emptyInput()},e.prototype.visualizeSingleValue=function(){if(this.value&&this.value[this.treeNodeTitleKey]){var e=this.value[this.treeNodeTitleKey];this.renderer.setAttribute(this.selectHost.nativeElement,"value",e)}else this.emptyInput()},e.prototype.emptyInput=function(){this.renderer.setAttribute(this.selectHost.nativeElement,"value","")},e.prototype.selectedValue=function(){return this.value},e.prototype.responsePopperChange=function(e){e&&this.searchable&&this.focusSearchInput()},e.prototype.focusSearchInput=function(){this.searchInput.nativeElement&&this.searchInput.nativeElement.focus()},e.prototype.search=function(e){var t=this.tree.treeFactory.searchTree(e,!0);"boolean"==typeof t?this.noRecord=t:Array.isArray(t)&&(this.noRecord=t.every((function(e){return!e}))),this.popper.update()},e.prototype.registerSearchListener=function(){var e=this;this.searchInputModel.valueChanges.pipe(r.debounceTime(500),r.distinctUntilChanged()).subscribe((function(t){e.search(t)}))},e.prototype.scrollToSelected=function(){if(!this.multiple){var e=this.optionsContainer.nativeElement.querySelector(".tree-node.operable-tree-node.selected"),t=this.optionsContainer.nativeElement.parentNode;if(e&&t){var n=e.offsetTop;t.scrollTo({top:n-t.scrollTop})}}},e.prototype.clearValue=function(){this.treeData&&this.treeData.length>0&&!this.disabled&&!this.multiple&&this.selectedValue&&(this.tree.treeFactory.deactivateAllNodes(),this.currentActiveNode=null,this.value=null,this.emitEvents())},e.prototype.onNodeToggled=function(){this.popper&&this.popper.update()},e.decorators=[{type:t.Component,args:[{selector:"d-tree-select",template:'<div class="devui-tree-select">\r\n  <popper-component [(open)]="isOpen" [fluidPopper]="!width" (openChange)="responsePopperChange($event)" [appendTo]="appendTo" #popper>\r\n    <input\r\n      #selectHost\r\n      class="devui-select-input devui-input devui-form-control devui-tree-select-input"\r\n      (click)="toggle()"\r\n      [placeholder]="placeholder"\r\n      autocomplete="off"\r\n      [disabled]="disabled"\r\n      readonly\r\n      popper-activator\r\n    />\r\n    <div popper-prepend class="devui-tree-select devui-search-container" *ngIf="searchable">\r\n      <input class="devui-input" [(ngModel)]="searchString" #searchInputModel="ngModel" #searchInput />\r\n    </div>\r\n    <div class="devui-tree-select devui-options-container" #optionsContainer popper-container [ngStyle]="{ width: width }">\r\n      <d-operable-tree\r\n        #tree\r\n        [style.display]="treeData && treeData.length > 0 && !noRecord ? \'block\' : \'none\'"\r\n        [tree]="treeData"\r\n        [treeNodeIdKey]="treeNodeIdKey"\r\n        [treeNodeChildrenKey]="treeNodeChildrenKey"\r\n        [checkboxDisabledKey]="disabledKey"\r\n        [checkboxInput]="checkboxInput"\r\n        [checkable]="multiple"\r\n        [canActivateNode]="!multiple"\r\n        [canActivateParentNode]="!leafOnly"\r\n        (nodeChecked)="onOperableNodeChecked($event)"\r\n        (nodeSelected)="onOperableNodeSelected($event)"\r\n        (nodeToggled)="onNodeToggled()"\r\n        [iconParentOpen]="iconParentOpen"\r\n        [iconParentClose]="iconParentClose"\r\n        [iconLeaf]="iconLeaf"\r\n        [treeNodeTitleKey]="treeNodeTitleKey"\r\n        [iconTemplatePosition]="iconTemplatePosition"\r\n        class="devui-tree"\r\n      >\r\n        <ng-template *ngIf="iconTemplateInput || iconTemplatePassThrough" #iconTemplate let-node="node">\r\n          <ng-template [ngTemplateOutlet]="iconTemplateInput || iconTemplatePassThrough" [ngTemplateOutletContext]="{ node: node }">\r\n          </ng-template>\r\n        </ng-template>\r\n      </d-operable-tree>\r\n      <div *ngIf="!treeData || treeData.length <= 0" class="devui-no-data-tip">\r\n        {{ i18nCommonText?.noData }}\r\n      </div>\r\n      <div *ngIf="noRecord" class="devui-no-data-tip">\r\n        {{ i18nCommonText?.noRecordsFound }}\r\n      </div>\r\n    </div>\r\n  </popper-component>\r\n  <div\r\n    [ngClass]="{ disabled: disabled, clear: allowClear }"\r\n    (click)="$event.stopPropagation(); $event.preventDefault(); clearValue()"\r\n  ></div>\r\n  <span class="devui-select-chevron-icon" [class.open]="isOpen" [ngClass]="{ disabled: disabled, clear: allowClear }">\r\n    <svg width="14px" height="14px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">\r\n      <g id="chevron_down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n        <polygon id="chevron_down" points="4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462"></polygon>\r\n      </g>\r\n    </svg>\r\n  </span>\r\n</div>\r\n',exportAs:"select",providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return e})),multi:!0}],styles:[".devui-tree-select{position:relative;width:100%}.devui-tree-select input.devui-select-input{cursor:pointer;display:inline-block;width:100%;color:#252b3a;text-overflow:ellipsis}.devui-tree-select input.devui-select-input.devui-tree-select-input{padding:5px 2em 5px 10px}.devui-tree-select:hover .clear{position:absolute;height:14px;width:14px;right:12px;top:calc((100% - 14px)/ 2);cursor:pointer}.devui-tree-select:hover .clear::after,.devui-tree-select:hover .clear::before{position:absolute;content:'';height:14px;width:1px;background-color:#252b3a;left:50%}.devui-tree-select:hover .clear::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.devui-tree-select:hover .clear::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.devui-tree-select:hover .clear:hover::after,.devui-tree-select:hover .clear:hover::before{background-color:#252b3a}.devui-tree-select .devui-select-chevron-icon{right:12px;top:calc((100% - 14px)/ 2);position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.devui-tree-select .devui-select-chevron-icon svg{-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.devui-tree-select .devui-select-chevron-icon.open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.devui-tree-select .devui-select-chevron-icon.clear{opacity:0}.devui-tree-select .devui-select-chevron-icon.disabled{opacity:.3}.devui-tree-select .devui-select-chevron-icon ::ng-deep g{fill:#252b3a}.devui-tree-select:not(:hover) .devui-select-chevron-icon:not(.disabled){opacity:1;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.devui-tree-select.devui-options-container{width:100%;color:#252b3a;padding:5px 0}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node .devui-tree-node__content{margin-left:10px}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node .active{background-color:transparent}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node.selected{position:relative;-webkit-width:-webkit-fit-content;-moz-width:-moz-fit-content;width:fit-content;min-width:calc(100% - 1.2em)}.devui-tree-select.devui-options-container .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node.selected::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f2f5fc;z-index:-1}.devui-tree-select.devui-options-container .devui-no-data-tip{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:not-allowed;padding:5px 12px;opacity:.3}.devui-tree-select.devui-search-container{padding:5px}:host{display:inline-block;width:100%}"]}]}],e.ctorParameters=function(){return[{type:t.Renderer2},{type:t.ChangeDetectorRef},{type:o.I18nService}]},e.propDecorators={allowClear:[{type:t.Input}],treeData:[{type:t.Input}],placeholder:[{type:t.Input}],disabled:[{type:t.Input}],expandTree:[{type:t.Input}],multiple:[{type:t.Input}],treeNodeIdKey:[{type:t.Input}],treeNodeChildrenKey:[{type:t.Input}],disabledKey:[{type:t.Input}],leafOnly:[{type:t.Input}],delimiter:[{type:t.Input}],iconParentOpen:[{type:t.Input}],iconParentClose:[{type:t.Input}],iconLeaf:[{type:t.Input}],closeOnNodeSelected:[{type:t.Input}],width:[{type:t.Input}],searchable:[{type:t.Input}],appendTo:[{type:t.Input}],treeNodeTitleKey:[{type:t.Input}],allowUnselect:[{type:t.Input}],iconTemplatePosition:[{type:t.Input}],iconTemplateInput:[{type:t.Input}],selectHost:[{type:t.ViewChild,args:["selectHost",{static:!0}]}],optionsContainer:[{type:t.ViewChild,args:["optionsContainer",{static:!0}]}],tree:[{type:t.ViewChild,args:["tree",{static:!0}]}],searchInput:[{type:t.ViewChild,args:["searchInput",{static:!1}]}],searchInputModel:[{type:t.ViewChild,args:["searchInputModel",{static:!1}]}],popper:[{type:t.ViewChild,args:["popper",{static:!0}]}],iconTemplatePassThrough:[{type:t.ContentChild,args:["iconTemplate",{static:!1}]}],valueChanged:[{type:t.Output}],readyEvent:[{type:t.Input}]},e}();var f=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[s.CommonModule,n.FormsModule,l.CheckBoxModule,a.LoadingModule,i.TreeModule,p.PopperModule],exports:[v],declarations:[v],providers:[]}]}],e}();e.DefaultIcons=u,e.TreeSelectComponent=v,e.TreeSelectModule=f,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-tree-select.umd.min.js.map