angular-custom-selector/bundles/angular-custom-selector.umd.min.js

```bash NOTE*** This library was generated using Angular CLI version 9.0.0. Therefore, it is recommended that you use a compatible version of Angular to ensure proper functionality ```

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@progress/kendo-angular-treeview"),require("@progress/kendo-angular-buttons")):"function"==typeof define&&define.amd?define("angular-custom-selector",["exports","@angular/core","@angular/common","@angular/forms","@progress/kendo-angular-treeview","@progress/kendo-angular-buttons"],t):t((e=e||self)["angular-custom-selector"]={},e.ng.core,e.ng.common,e.ng.forms,e.kendoAngularTreeview,e.kendoAngularButtons)}(this,(function(e,t,o,n,i,s){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */function a(e,t,o,n){var i,s=arguments.length,a=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,n);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a}var l=function(){function e(){this.type="single",this.selectedId=null,this.selectedName="Select",this.enableAllNodes=!1,this.disabled=!1,this.onChange=new t.EventEmitter,this.onFetchedData=new t.EventEmitter,this.dataHierarchy={data:[],flatData:[]}}return e.prototype.ngOnInit=function(){this.dataHierarchy.data=this.data,function e(t,o){return t.map((function(t){t.items.length>0?(o.push(t),e(t.items,o)):o.push(t)}))}(this.data,this.dataHierarchy.flatData)},e.prototype.onFetched=function(e){this.onFetchedData.emit(e),this.dataHierarchy=e},e.prototype.updateLocationState=function(e){this.onChange.emit(e)},a([t.Input()],e.prototype,"type",void 0),a([t.Input()],e.prototype,"labelText",void 0),a([t.Input()],e.prototype,"selectedId",void 0),a([t.Input()],e.prototype,"selectedName",void 0),a([t.Input()],e.prototype,"enableAllNodes",void 0),a([t.Input()],e.prototype,"disabled",void 0),a([t.Input()],e.prototype,"data",void 0),a([t.Input()],e.prototype,"hoverText",void 0),a([t.Input()],e.prototype,"displayName",void 0),a([t.Input()],e.prototype,"searchKey",void 0),a([t.Output()],e.prototype,"onChange",void 0),a([t.Output()],e.prototype,"onFetchedData",void 0),e=a([t.Component({selector:"angular-custom-selector",template:'<single-selector *ngIf="type == \'single\'" labelText="{{labelText}}" class="location-selector-view" [dataHierarchy]="dataHierarchy"\r\n[enableAllNodes]="enableAllNodes" selectedId="{{selectedId}}" hoverText="{{hoverText}}"\r\nselectedName="{{selectedName}}" isIncludeFloatLocation="true" [enableAllNodes]="enableAllNodes"\r\n(onData)="onFetched($event)" [selectorDisabled]="disabled"\r\n(onChange)="updateLocationState($event)" [displayName]="displayName" [searchKey]="searchKey" >\r\n</single-selector>\r\n\r\n<multi-selector *ngIf="type == \'multi\'" labelText="{{labelText}}" class="location-selector-view" [dataHierarchy]="dataHierarchy"\r\n[enableAllNodes]="enableAllNodes" selectedId="{{selectedId}}" hoverText="{{hoverText}}"\r\nselectedName="{{selectedName}}" isIncludeFloatLocation="true" [enableAllNodes]="enableAllNodes"\r\n(onLocationsData)="onFetched($event)" [selectorDisabled]="disabled"\r\n(onChange)="updateLocationState($event)" [displayName]="displayName" [searchKey]="searchKey" >\r\n</multi-selector>'})],e)}(),r=function(){function e(e){this.cdRef=e,this.isDisableParent=!1,this.closeEvent=new t.EventEmitter,this.onChange=new t.EventEmitter,this.enableAllNodes=!1,this.searchKey="name",this.checkedKeys=[]}return e.prototype.ngOnChanges=function(e){this.checkDefaultValue(e.checkedKeys.currentValue,this.data)},e.prototype.ngOnInit=function(){this.checkDefaultValue(this.checkedKeys,this.data),this.onChange.emit(this.checkedKeys),this.enableAllNodes&&this.enableAll(this.data)},e.prototype.ngAfterContentInit=function(){this.addExpandListItem(this.data)},e.prototype.ngAfterViewInit=function(){this.cdRef.detectChanges()},e.prototype.checkDefaultValue=function(e,t){for(var o=0;o<t.length;o++)e.indexOf(t[o].id)>-1?t[o].isSelectable?(t[o].isSelected=!0,this.checkDefaultValue(e,t[o].items)):t[o].isSelected=!1:(t[o].isSelected=!1,this.checkDefaultValue(e,t[o].items))},e.prototype.handleCheck=function(e){e.isSelected=!e.isSelected,this.handleChildCheck(e.items,e.isSelected),this.checkedKeys=[],this.checkedKeys=this.getCheckedKeys(this.data,this.checkedKeys),this.onChange.emit(this.checkedKeys)},e.prototype.handleChildCheck=function(e,t){for(var o=0;o<e.length;o++)e[o].isSelectable?(e[o].isSelected=t,this.handleChildCheck(e[o].items,t)):this.handleChildCheck(e[o].items,t)},e.prototype.enableAll=function(e){var t=this;e.map((function(e){e.isSelectable=!0,t.enableAll(e.items)}))},e.prototype.unCheckAll=function(e){for(var t=0;t<e.length;t++)e[t].isSelectable&&(e[t].isSelected=!1,this.unCheckAll(e[t].items))},e.prototype.getCheckedKeys=function(e,t){for(var o=0;o<e.length;o++)e[o].isSelected&&t.push(e[o].id),t=this.getCheckedKeys(e[o].items,t);return t},e.prototype.showClick=function(e){this.closeEvent.emit(e)},e.prototype.addExpandListItem=function(e){var t=this;e.forEach((function(e){e.hasChild&&t.addExpandListItem(e.items)}))},e.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},a([t.Input()],e.prototype,"expandedKeys",void 0),a([t.Input()],e.prototype,"selectedId",void 0),a([t.Input()],e.prototype,"isDisableParent",void 0),a([t.Input()],e.prototype,"data",void 0),a([t.Output()],e.prototype,"closeEvent",void 0),a([t.Output()],e.prototype,"onChange",void 0),a([t.Input()],e.prototype,"displayName",void 0),a([t.Input()],e.prototype,"enableAllNodes",void 0),a([t.Input()],e.prototype,"searchKey",void 0),a([t.Input()],e.prototype,"checkedKeys",void 0),e=a([t.Component({selector:"multi-selector-tree-view",template:'<kendo-treeview [nodes]="data" textField={{searchKey}} childrenField="items" \r\n[(expandedKeys)]="expandedKeys" expandBy="id" \r\n[filterable]="true"     \r\n  filterInputPlaceholder="Search" kendoTreeViewExpandable   \r\n      kendoTreeViewHierarchyBinding>\r\n      <ng-template kendoTreeViewNodeTemplate let-dataItem>\r\n        <input [(ngModel)]="dataItem.isSelected" (click)="handleCheck(dataItem)" [disabled]="!dataItem.isSelectable"  class="k-checkbox" type="checkbox"\r\n        kendoCheckBox /><span class="selectoritem" (click)="handleCheck(dataItem)"   [ngClass]="{\'disableNode\': dataItem.isSelectable === false,\'itemactive\' : selectedId == dataItem.id}">        \r\n        {{ dataItem[displayName] }}  \r\n        </span>    \r\n      </ng-template>\r\n</kendo-treeview>\r\n',styles:[":host ::ng-deep .k-checkbox{border-color:#000}:host ::ng-deep .k-textbox{width:100%;margin-bottom:8px}:host ::ng-deep .k-in.k-state-focused{box-shadow:none!important}:host ::ng-deep .selectoritem:hover{background-color:#005151;border-radius:3px;color:#fff;font-weight:500;cursor:default}:host ::ng-deep .k-treeview .k-icon{font-size:20px}:host ::ng-deep .k-treeview .k-in{padding:0;width:100%}:host ::ng-deep .selectoritem{padding:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}:host ::ng-deep .disableNode{opacity:.6;pointer-events:none}:host ::ng-deep .itemactive{color:#005151;font-weight:500}"]})],e)}(),d=function(){function e(e){this.elementRef=e,this.expandedKeys=[],this.selectorOpened=!1,this.selectedName="Select",this.selectedId=0,this.isIncludeFloatLocation=!0,this.includeInactive=!1,this.enableAllNodes=!1,this.checkedKeys=[],this.selectorDisabled=!1,this.onData=new t.EventEmitter,this.onChange=new t.EventEmitter,this.selectedItems=[]}return e.prototype.ngOnInit=function(){this.onData.emit(this.dataHierarchy),this.addExpandListItem(this.dataHierarchy.data),this.setDefaultValue(this.checkedKeys,this.dataHierarchy.data)},e.prototype.onGlobalClick=function(e){this.elementRef.nativeElement.contains(e.target)||(this.selectorOpened=!1)},e.prototype.closeDropDown=function(){this.selectorOpened=!1},e.prototype.onItemSelected=function(e){this.selectorOpened=!1},e.prototype.setDefaultValue=function(e,t){for(var o=0;o<t.length;o++)e.indexOf(t[o].id)>-1?t[o].isSelectable&&(this.selectedItems.push(t[o]),this.setDefaultValue(e,t[o].items)):this.setDefaultValue(e,t[o].items)},e.prototype.addExpandListItem=function(e){var t=this;e.forEach((function(e){e.items&&e.items.length>0&&(t.expandedKeys.push(e.id),t.addExpandListItem(e.items))}))},e.prototype.handleChange=function(e){this.checkedKeys=e;var t=this.dataHierarchy.flatData.filter((function(t){return-1!==e.indexOf(t.id)}));this.selectedItems=t,this.onChange.emit(this.selectedItems)},e.prototype.locationClick=function(){this.selectorOpened=!this.selectorOpened},e.prototype.onRemove=function(e){var t=this.selectedItems.findIndex((function(t){return t.id===e.id})),o=this.checkedKeys.findIndex((function(t){return t==e.id}));this.checkedKeys.splice(o,1),this.selectedItems.splice(t,1),this.onChange.emit(this.selectedItems)},e.ctorParameters=function(){return[{type:t.ElementRef}]},a([t.Input()],e.prototype,"selectedName",void 0),a([t.Input()],e.prototype,"selectedId",void 0),a([t.Input()],e.prototype,"labelText",void 0),a([t.Input()],e.prototype,"hoverText",void 0),a([t.Input()],e.prototype,"isIncludeFloatLocation",void 0),a([t.Input()],e.prototype,"includeInactive",void 0),a([t.Input()],e.prototype,"enableAllNodes",void 0),a([t.Input()],e.prototype,"dataHierarchy",void 0),a([t.Input()],e.prototype,"checkedKeys",void 0),a([t.Input()],e.prototype,"selectorDisabled",void 0),a([t.Input()],e.prototype,"displayName",void 0),a([t.Input()],e.prototype,"searchKey",void 0),a([t.Output()],e.prototype,"onData",void 0),a([t.Output()],e.prototype,"onChange",void 0),a([t.HostListener("document:mousedown",["$event"])],e.prototype,"onGlobalClick",null),e=a([t.Component({selector:"multi-selector",template:'<div class="row align-items-center" (click)="closeDropDown()">\r\n  <div class="col-md-12">\r\n    <label *ngIf="labelText?.length > 0">{{labelText}}</label>\r\n\r\n    <div #menu class="d-flex justify-content-between location-selector-form"\r\n      [ngClass]="{\'disableSelector\':selectorDisabled,\'location-selector-focus\' : selectorOpened}" id="ddlLocationy"\r\n      (click)="locationClick()" [title]="hoverText" (click)="$event.stopPropagation()">\r\n      <div >\r\n        <span *ngIf="selectorDisabled && selectedItems.length<1">\r\n          {{selectedName}}\r\n        </span>\r\n        <span *ngIf="!selectorDisabled && selectedItems.length<1">\r\n          Select\r\n        </span>\r\n\r\n        <kendo-chip *ngFor="let selectedItem of selectedItems.slice(0,3)"\r\n          [label]="selectedItem[displayName]" removable="true"  removeIcon="k-icon k-i-close"\r\n          (remove)="onRemove(selectedItem);">\r\n        </kendo-chip>\r\n      </div>\r\n      <div class="d-flex flex-column align-items-center ml-1">\r\n        <em class="fas fa-chevron-down"></em>\r\n        <span *ngIf="selectedItems?.length >3">+{{selectedItems?.length-3}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class="location-tree-wrapper p-2" *ngIf="selectorOpened" (click)="$event.stopPropagation()">\r\n      <multi-selector-tree-view [data]="dataHierarchy.data" [enableAllNodes]="enableAllNodes"\r\n        [expandedKeys]="expandedKeys" [displayName]="displayName" \r\n        [selectedId]="selectedId" [checkedKeys]="checkedKeys" (onChange)="handleChange($event)"\r\n        (closeEvent)="onItemSelected($event)" [searchKey]="searchKey" >\r\n      </multi-selector-tree-view>\r\n    </div>\r\n  </div>\r\n</div>',styles:[":host ::ng-deep .location-selector-form{align-items:center;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;color:#495057;cursor:pointer;display:block;font-size:.9rem;height:auto;font-weight:400;line-height:1.5;padding:.2rem .4rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:300px}:host ::ng-deep .location-selector-focus{background-color:#fff;box-shadow:0 0 0 .2rem rgba(0,81,81,.1);color:#495057;outline:0}:host ::ng-deep .location-tree-wrapper{position:absolute;z-index:10}:host ::ng-deep .disableSelector{opacity:.6;pointer-events:none}.k-chip{color:#fff;margin:2px;background-color:#005151;float:left;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.k-chip:last-child{max-width:230px}"]})],e)}(),c=function(){function e(){}return e=a([t.NgModule({declarations:[r,d],imports:[o.CommonModule,i.TreeViewModule,n.FormsModule,s.ButtonsModule],exports:[d],entryComponents:[d]})],e)}(),p=function(){function e(){this.enableAllNodes=!1,this.searchKey="name",this.closeEvent=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.enableAllNodes&&this.enableAll(this.data)},e.prototype.ngAfterContentInit=function(){this.addExpandListItem(this.data)},e.prototype.showClick=function(e){this.closeEvent.emit(e)},e.prototype.addExpandListItem=function(e){var t=this;e.forEach((function(e){e.hasChild&&t.addExpandListItem(e.items)}))},e.prototype.enableAll=function(e){var t=this;e.map((function(e){e.isSelectable=!0,t.enableAll(e.items)}))},a([t.Input()],e.prototype,"expandedKeys",void 0),a([t.Input()],e.prototype,"selectedId",void 0),a([t.Input()],e.prototype,"displayName",void 0),a([t.Input()],e.prototype,"enableAllNodes",void 0),a([t.Input()],e.prototype,"searchKey",void 0),a([t.Input()],e.prototype,"data",void 0),a([t.Output()],e.prototype,"closeEvent",void 0),e=a([t.Component({selector:"single-selector-tree-view",template:'<kendo-treeview [nodes]="data" [textField]="searchKey" childrenField="items" [(expandedKeys)]="expandedKeys"\r\n  expandBy="id" [filterable]="true" filterInputPlaceholder="Search" kendoTreeViewExpandable\r\n  kendoTreeViewHierarchyBinding>\r\n  <ng-template kendoTreeViewNodeTemplate let-dataItem>\r\n    <span class="selectoritem" (click)="showClick(dataItem)"\r\n      [ngClass]="{\'disableNode\': dataItem.isSelectable === false,\'itemactive\' : selectedId == dataItem.id}">\r\n      {{ dataItem[displayName] }}\r\n    </span>\r\n  </ng-template>\r\n</kendo-treeview>',styles:[":host ::ng-deep .k-checkbox{border-color:#000}:host ::ng-deep .k-textbox{width:100%;margin-bottom:8px}:host ::ng-deep .k-in.k-state-focused{box-shadow:none!important}:host ::ng-deep .selectoritem:hover{background-color:#005151;border-radius:3px;color:#fff;font-weight:500;cursor:default}:host ::ng-deep .k-treeview .k-icon{font-size:20px}:host ::ng-deep .k-treeview .k-in{padding:0;width:100%}:host ::ng-deep .selectoritem{padding:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}:host ::ng-deep .disableNode{opacity:.6;pointer-events:none}:host ::ng-deep .itemactive{color:#005151;font-weight:500}"]})],e)}(),h=function(){function e(e){this.elementRef=e,this.expandedKeys=[],this.selectorOpened=!1,this.disableSelector=!1,this.selectedName="Select",this.selectedId=0,this.isIncludeFloatLocation=!0,this.enableAllNodes=!1,this.selectableTypes=[],this.selectorDisabled=!1,this.onChange=new t.EventEmitter,this.onData=new t.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;this.onData.emit(this.dataHierarchy),this.dataHierarchy.data.length>0&&null==this.dataHierarchy.data[0].items?(this.disableSelector=!0,this.selectedName="No branches available"):null==this.selectedName&&null!=this.selectedId&&(this.selectedName=this.dataHierarchy.flatData.find((function(t){return t.id==e.selectedId})).locationName),this.addExpandListItem(this.dataHierarchy.data),this.setDropDownState()},e.prototype.setDropDownState=function(){this.disableSelector=this.selectorDisabled},e.prototype.onGlobalClick=function(e){this.elementRef.nativeElement.contains(e.target)||(this.selectorOpened=!1)},e.prototype.closeDropDown=function(){this.selectorOpened=!1},e.prototype.onItemSelected=function(e){this.selectorOpened=!1,this.onChange.emit(e),this.selectedName=e.name},e.prototype.addExpandListItem=function(e){var t=this;e.forEach((function(e){e.items&&e.items.length>0&&(t.expandedKeys.push(e.id),t.addExpandListItem(e.items))}))},e.prototype.itemClick=function(){this.selectorDisabled||(this.selectorOpened=!this.selectorOpened)},e.ctorParameters=function(){return[{type:t.ElementRef}]},a([t.Input()],e.prototype,"selectedName",void 0),a([t.Input()],e.prototype,"selectedId",void 0),a([t.Input()],e.prototype,"displayName",void 0),a([t.Input()],e.prototype,"searchKey",void 0),a([t.Input()],e.prototype,"labelText",void 0),a([t.Input()],e.prototype,"hoverText",void 0),a([t.Input()],e.prototype,"isIncludeFloatLocation",void 0),a([t.Input()],e.prototype,"enableAllNodes",void 0),a([t.Input()],e.prototype,"selectableTypes",void 0),a([t.Input()],e.prototype,"selectorDisabled",void 0),a([t.Input()],e.prototype,"dataHierarchy",void 0),a([t.Output()],e.prototype,"onChange",void 0),a([t.Output()],e.prototype,"onData",void 0),a([t.HostListener("document:mousedown",["$event"])],e.prototype,"onGlobalClick",null),e=a([t.Component({selector:"single-selector",template:'<div class="row align-items-center" (click)="closeDropDown()">\r\n  <div class="col-md-12">\r\n    <label *ngIf="labelText?.length > 0">{{labelText}}</label>\r\n\r\n    <div #menu class="d-flex justify-content-between location-selector-form"\r\n      [ngClass]="{\'disableSelector\':selectorDisabled,\'location-selector-focus\' : selectorOpened}" id="ddlLocationy"\r\n      (click)="itemClick()" (click)="$event.stopPropagation()" [title]="hoverText">\r\n      <div class="selected-location">{{selectedName}}</div>\r\n      <div><em class="fas fa-chevron-down"></em></div>\r\n    </div>\r\n    <div class="location-tree-wrapper p-2" *ngIf="selectorOpened" (click)="$event.stopPropagation()">\r\n      <single-selector-tree-view [data]="dataHierarchy.data" [expandedKeys]="expandedKeys" [enableAllNodes]="enableAllNodes"\r\n        [selectedId]="selectedId" (closeEvent)="onItemSelected($event)" [displayName]="displayName" [searchKey]="searchKey" >\r\n      </single-selector-tree-view>\r\n    </div>\r\n  </div>\r\n</div>',styles:[":host ::ng-deep .location-selector-form{cursor:pointer;display:block;width:300px;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:.9rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host ::ng-deep .location-selector-focus{color:#495057;background-color:#fff;outline:0;box-shadow:0 0 0 .2rem rgba(0,81,81,.1)}:host ::ng-deep .location-tree-wrapper{position:absolute;z-index:10}:host ::ng-deep .disableSelector{opacity:.6;cursor:default}.selected-location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:350px}"]})],e)}(),u=function(){function e(){}return e=a([t.NgModule({declarations:[p,h],imports:[o.CommonModule,i.TreeViewModule],exports:[h],entryComponents:[h]})],e)}(),m=function(){function e(){}return e=a([t.NgModule({declarations:[l],imports:[u,c,o.CommonModule],exports:[l]})],e)}();e.AngularCustomSelectorComponent=l,e.AngularCustomSelectorModule=m,e.ɵa=u,e.ɵb=p,e.ɵc=h,e.ɵd=c,e.ɵe=r,e.ɵf=d,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=angular-custom-selector.umd.min.js.map