angular-custom-selector/fesm5/angular-custom-selector.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 ```

import { __decorate } from 'tslib';
import { EventEmitter, Input, Output, Component, ChangeDetectorRef, ElementRef, HostListener, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TreeViewModule } from '@progress/kendo-angular-treeview';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

function getFlatData(data, flattedData) {
    return data.map(function (parent) {
        if (parent.items.length > 0) {
            flattedData.push(parent);
            getFlatData(parent.items, flattedData);
        }
        else {
            flattedData.push(parent);
        }
    });
}

var AngularCustomSelectorComponent = /** @class */ (function () {
    function AngularCustomSelectorComponent() {
        this.type = "single";
        this.selectedId = null;
        this.selectedName = 'Select';
        this.enableAllNodes = false;
        this.disabled = false;
        this.onChange = new EventEmitter();
        this.onFetchedData = new EventEmitter();
        this.dataHierarchy = { data: [], flatData: [] };
    }
    AngularCustomSelectorComponent.prototype.ngOnInit = function () {
        this.dataHierarchy.data = this.data;
        getFlatData(this.data, this.dataHierarchy.flatData);
    };
    AngularCustomSelectorComponent.prototype.onFetched = function (data) {
        this.onFetchedData.emit(data);
        this.dataHierarchy = data;
    };
    AngularCustomSelectorComponent.prototype.updateLocationState = function (dataItem) {
        this.onChange.emit(dataItem);
    };
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "type", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "labelText", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "selectedId", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "selectedName", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "enableAllNodes", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "disabled", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "data", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "hoverText", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "displayName", void 0);
    __decorate([
        Input()
    ], AngularCustomSelectorComponent.prototype, "searchKey", void 0);
    __decorate([
        Output()
    ], AngularCustomSelectorComponent.prototype, "onChange", void 0);
    __decorate([
        Output()
    ], AngularCustomSelectorComponent.prototype, "onFetchedData", void 0);
    AngularCustomSelectorComponent = __decorate([
        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>"
        })
    ], AngularCustomSelectorComponent);
    return AngularCustomSelectorComponent;
}());

var MultiSelectorTreeViewComponent = /** @class */ (function () {
    function MultiSelectorTreeViewComponent(cdRef) {
        this.cdRef = cdRef;
        this.isDisableParent = false;
        this.closeEvent = new EventEmitter();
        this.onChange = new EventEmitter();
        this.enableAllNodes = false;
        this.searchKey = "name";
        this.checkedKeys = [];
    }
    MultiSelectorTreeViewComponent.prototype.ngOnChanges = function (changes) {
        this.checkDefaultValue(changes.checkedKeys.currentValue, this.data);
    };
    MultiSelectorTreeViewComponent.prototype.ngOnInit = function () {
        this.checkDefaultValue(this.checkedKeys, this.data);
        this.onChange.emit(this.checkedKeys);
        if (this.enableAllNodes) {
            this.enableAll(this.data);
        }
    };
    MultiSelectorTreeViewComponent.prototype.ngAfterContentInit = function () {
        this.addExpandListItem(this.data);
    };
    MultiSelectorTreeViewComponent.prototype.ngAfterViewInit = function () {
        this.cdRef.detectChanges();
    };
    MultiSelectorTreeViewComponent.prototype.checkDefaultValue = function (checkedKeys, items) {
        for (var i = 0; i < items.length; i++) {
            if (checkedKeys.indexOf(items[i].id) > -1) {
                if (items[i].isSelectable) {
                    items[i].isSelected = true;
                    this.checkDefaultValue(checkedKeys, items[i].items);
                }
                else {
                    items[i].isSelected = false;
                }
            }
            else {
                items[i].isSelected = false;
                this.checkDefaultValue(checkedKeys, items[i].items);
            }
        }
    };
    MultiSelectorTreeViewComponent.prototype.handleCheck = function (dataItem) {
        dataItem.isSelected = !dataItem.isSelected;
        this.handleChildCheck(dataItem.items, dataItem.isSelected);
        this.checkedKeys = [];
        this.checkedKeys = this.getCheckedKeys(this.data, this.checkedKeys);
        this.onChange.emit(this.checkedKeys);
    };
    MultiSelectorTreeViewComponent.prototype.handleChildCheck = function (childItems, isSelected) {
        for (var i = 0; i < childItems.length; i++) {
            if (childItems[i].isSelectable) {
                childItems[i].isSelected = isSelected;
                this.handleChildCheck(childItems[i].items, isSelected);
            }
            else {
                this.handleChildCheck(childItems[i].items, isSelected);
            }
        }
    };
    MultiSelectorTreeViewComponent.prototype.enableAll = function (data) {
        var _this = this;
        data.map(function (item) {
            item.isSelectable = true;
            _this.enableAll(item.items);
        });
    };
    MultiSelectorTreeViewComponent.prototype.unCheckAll = function (items) {
        for (var i = 0; i < items.length; i++) {
            if (items[i].isSelectable) {
                items[i].isSelected = false;
                this.unCheckAll(items[i].items);
            }
        }
    };
    MultiSelectorTreeViewComponent.prototype.getCheckedKeys = function (items, keys) {
        for (var i = 0; i < items.length; i++) {
            if (items[i].isSelected) {
                keys.push(items[i].id);
            }
            keys = this.getCheckedKeys(items[i].items, keys);
        }
        return keys;
    };
    MultiSelectorTreeViewComponent.prototype.showClick = function (dataItem) {
        this.closeEvent.emit(dataItem);
    };
    MultiSelectorTreeViewComponent.prototype.addExpandListItem = function (treeItem) {
        var _this = this;
        treeItem.forEach(function (item) {
            if (item.hasChild) {
                _this.addExpandListItem(item.items);
            }
        });
    };
    MultiSelectorTreeViewComponent.ctorParameters = function () { return [
        { type: ChangeDetectorRef }
    ]; };
    __decorate([
        Input()
    ], MultiSelectorTreeViewComponent.prototype, "expandedKeys", void 0);
    __decorate([
        Input()
    ], MultiSelectorTreeViewComponent.prototype, "selectedId", void 0);
    __decorate([
        Input()
    ], MultiSelectorTreeViewComponent.prototype, "isDisableParent", void 0);
    __decorate([
        Input()
    ], MultiSelectorTreeViewComponent.prototype, "data", void 0);
    __decorate([
        Output()
    ], MultiSelectorTreeViewComponent.prototype, "closeEvent", void 0);
    __decorate([
        Output()
    ], MultiSelectorTreeViewComponent.prototype, "onChange", void 0);
    __decorate([
        Input()
    ], MultiSelectorTreeViewComponent.prototype, "displayName", void 0);
    __decorate([
        Input()
    ], MultiSelectorTreeViewComponent.prototype, "enableAllNodes", void 0);
    __decorate([
        Input()
    ], MultiSelectorTreeViewComponent.prototype, "searchKey", void 0);
    __decorate([
        Input()
    ], MultiSelectorTreeViewComponent.prototype, "checkedKeys", void 0);
    MultiSelectorTreeViewComponent = __decorate([
        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}"]
        })
    ], MultiSelectorTreeViewComponent);
    return MultiSelectorTreeViewComponent;
}());

var MultiSelectorComponent = /** @class */ (function () {
    function MultiSelectorComponent(elementRef) {
        this.elementRef = elementRef;
        this.expandedKeys = [];
        this.selectorOpened = false;
        this.selectedName = "Select";
        this.selectedId = 0;
        this.isIncludeFloatLocation = true;
        this.includeInactive = false;
        this.enableAllNodes = false;
        this.checkedKeys = [];
        this.selectorDisabled = false;
        this.onData = new EventEmitter();
        this.onChange = new EventEmitter();
        this.selectedItems = [];
    }
    MultiSelectorComponent.prototype.ngOnInit = function () {
        this.onData.emit(this.dataHierarchy);
        this.addExpandListItem(this.dataHierarchy.data);
        this.setDefaultValue(this.checkedKeys, this.dataHierarchy.data);
    };
    MultiSelectorComponent.prototype.onGlobalClick = function (event) {
        if (!this.elementRef.nativeElement.contains(event.target)) {
            // clicked outside => close dropdown list
            this.selectorOpened = false;
        }
    };
    MultiSelectorComponent.prototype.closeDropDown = function () {
        this.selectorOpened = false;
    };
    MultiSelectorComponent.prototype.onItemSelected = function (data) {
        this.selectorOpened = false;
    };
    MultiSelectorComponent.prototype.setDefaultValue = function (checkedKeys, items) {
        for (var i = 0; i < items.length; i++) {
            if (checkedKeys.indexOf(items[i].id) > -1) {
                if (items[i].isSelectable) {
                    this.selectedItems.push(items[i]);
                    this.setDefaultValue(checkedKeys, items[i].items);
                }
            }
            else {
                this.setDefaultValue(checkedKeys, items[i].items);
            }
        }
    };
    MultiSelectorComponent.prototype.addExpandListItem = function (treeItem) {
        var _this = this;
        treeItem.forEach(function (item) {
            if (item.items && item.items.length > 0) {
                _this.expandedKeys.push(item.id);
                _this.addExpandListItem(item.items);
            }
        });
    };
    MultiSelectorComponent.prototype.handleChange = function (data) {
        this.checkedKeys = data;
        var locationsFlatArray = this.dataHierarchy.flatData;
        var selectedLocatonsArray = locationsFlatArray.filter(function (item) { return data.indexOf(item.id) !== -1; });
        this.selectedItems = selectedLocatonsArray;
        this.onChange.emit(this.selectedItems);
    };
    MultiSelectorComponent.prototype.locationClick = function () {
        this.selectorOpened = !this.selectorOpened;
    };
    MultiSelectorComponent.prototype.onRemove = function (item) {
        var index = this.selectedItems.findIndex(function (c) { return c.id === item.id; });
        var checkedKeyIndex = this.checkedKeys.findIndex(function (k) { return k == item.id; });
        this.checkedKeys.splice(checkedKeyIndex, 1);
        this.selectedItems.splice(index, 1);
        this.onChange.emit(this.selectedItems);
    };
    MultiSelectorComponent.ctorParameters = function () { return [
        { type: ElementRef }
    ]; };
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "selectedName", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "selectedId", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "labelText", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "hoverText", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "isIncludeFloatLocation", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "includeInactive", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "enableAllNodes", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "dataHierarchy", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "checkedKeys", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "selectorDisabled", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "displayName", void 0);
    __decorate([
        Input()
    ], MultiSelectorComponent.prototype, "searchKey", void 0);
    __decorate([
        Output()
    ], MultiSelectorComponent.prototype, "onData", void 0);
    __decorate([
        Output()
    ], MultiSelectorComponent.prototype, "onChange", void 0);
    __decorate([
        HostListener('document:mousedown', ['$event'])
    ], MultiSelectorComponent.prototype, "onGlobalClick", null);
    MultiSelectorComponent = __decorate([
        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}"]
        })
    ], MultiSelectorComponent);
    return MultiSelectorComponent;
}());

var MultiSelectorModule = /** @class */ (function () {
    function MultiSelectorModule() {
    }
    MultiSelectorModule = __decorate([
        NgModule({
            declarations: [
                MultiSelectorTreeViewComponent,
                MultiSelectorComponent
            ],
            imports: [
                CommonModule,
                TreeViewModule,
                FormsModule,
                ButtonsModule
            ],
            exports: [
                MultiSelectorComponent
            ],
            entryComponents: [MultiSelectorComponent],
        })
    ], MultiSelectorModule);
    return MultiSelectorModule;
}());

var SingleSelectorTreeViewComponent = /** @class */ (function () {
    function SingleSelectorTreeViewComponent() {
        this.enableAllNodes = false;
        this.searchKey = "name";
        this.closeEvent = new EventEmitter();
    }
    SingleSelectorTreeViewComponent.prototype.ngOnInit = function () {
        if (this.enableAllNodes) {
            this.enableAll(this.data);
        }
    };
    SingleSelectorTreeViewComponent.prototype.ngAfterContentInit = function () {
        this.addExpandListItem(this.data);
    };
    SingleSelectorTreeViewComponent.prototype.showClick = function (dataItem) {
        this.closeEvent.emit(dataItem);
    };
    SingleSelectorTreeViewComponent.prototype.addExpandListItem = function (treeItem) {
        var _this = this;
        treeItem.forEach(function (item) {
            if (item.hasChild) {
                _this.addExpandListItem(item.items);
            }
        });
    };
    SingleSelectorTreeViewComponent.prototype.enableAll = function (data) {
        var _this = this;
        data.map(function (item) {
            item.isSelectable = true;
            _this.enableAll(item.items);
        });
    };
    __decorate([
        Input()
    ], SingleSelectorTreeViewComponent.prototype, "expandedKeys", void 0);
    __decorate([
        Input()
    ], SingleSelectorTreeViewComponent.prototype, "selectedId", void 0);
    __decorate([
        Input()
    ], SingleSelectorTreeViewComponent.prototype, "displayName", void 0);
    __decorate([
        Input()
    ], SingleSelectorTreeViewComponent.prototype, "enableAllNodes", void 0);
    __decorate([
        Input()
    ], SingleSelectorTreeViewComponent.prototype, "searchKey", void 0);
    __decorate([
        Input()
    ], SingleSelectorTreeViewComponent.prototype, "data", void 0);
    __decorate([
        Output()
    ], SingleSelectorTreeViewComponent.prototype, "closeEvent", void 0);
    SingleSelectorTreeViewComponent = __decorate([
        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}"]
        })
    ], SingleSelectorTreeViewComponent);
    return SingleSelectorTreeViewComponent;
}());

var SingleSelectorComponent = /** @class */ (function () {
    function SingleSelectorComponent(elementRef) {
        this.elementRef = elementRef;
        this.expandedKeys = [];
        this.selectorOpened = false;
        this.disableSelector = false;
        this.selectedName = "Select";
        this.selectedId = 0;
        this.isIncludeFloatLocation = true;
        this.enableAllNodes = false;
        this.selectableTypes = []; // an array of location types to be made selectable
        this.selectorDisabled = false;
        this.onChange = new EventEmitter();
        this.onData = new EventEmitter();
    }
    SingleSelectorComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.onData.emit(this.dataHierarchy);
        if (this.dataHierarchy.data.length > 0 && this.dataHierarchy.data[0].items == null) {
            this.disableSelector = true;
            this.selectedName = "No branches available";
        }
        else if (this.selectedName == null && this.selectedId != null) {
            // if a location name is not passed in as an input, we set it using the id
            this.selectedName = this.dataHierarchy.flatData.find(function (l) { return l.id == _this.selectedId; }).locationName;
        }
        this.addExpandListItem(this.dataHierarchy.data);
        this.setDropDownState();
    };
    SingleSelectorComponent.prototype.setDropDownState = function () {
        this.disableSelector = this.selectorDisabled;
    };
    SingleSelectorComponent.prototype.onGlobalClick = function (event) {
        if (!this.elementRef.nativeElement.contains(event.target)) {
            // clicked outside => close dropdown list
            this.selectorOpened = false;
        }
    };
    SingleSelectorComponent.prototype.closeDropDown = function () {
        this.selectorOpened = false;
    };
    SingleSelectorComponent.prototype.onItemSelected = function (data) {
        this.selectorOpened = false;
        this.onChange.emit(data);
        this.selectedName = data.name;
    };
    SingleSelectorComponent.prototype.addExpandListItem = function (treeItem) {
        var _this = this;
        treeItem.forEach(function (item) {
            if (item.items && item.items.length > 0) {
                _this.expandedKeys.push(item.id);
                _this.addExpandListItem(item.items);
            }
        });
    };
    SingleSelectorComponent.prototype.itemClick = function () {
        if (!this.selectorDisabled) {
            this.selectorOpened = !this.selectorOpened;
        }
    };
    SingleSelectorComponent.ctorParameters = function () { return [
        { type: ElementRef }
    ]; };
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "selectedName", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "selectedId", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "displayName", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "searchKey", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "labelText", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "hoverText", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "isIncludeFloatLocation", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "enableAllNodes", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "selectableTypes", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "selectorDisabled", void 0);
    __decorate([
        Input()
    ], SingleSelectorComponent.prototype, "dataHierarchy", void 0);
    __decorate([
        Output()
    ], SingleSelectorComponent.prototype, "onChange", void 0);
    __decorate([
        Output()
    ], SingleSelectorComponent.prototype, "onData", void 0);
    __decorate([
        HostListener('document:mousedown', ['$event'])
    ], SingleSelectorComponent.prototype, "onGlobalClick", null);
    SingleSelectorComponent = __decorate([
        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}"]
        })
    ], SingleSelectorComponent);
    return SingleSelectorComponent;
}());

var SingleSelectorModule = /** @class */ (function () {
    function SingleSelectorModule() {
    }
    SingleSelectorModule = __decorate([
        NgModule({
            declarations: [
                SingleSelectorTreeViewComponent,
                SingleSelectorComponent,
            ],
            imports: [
                CommonModule,
                TreeViewModule
            ],
            exports: [
                SingleSelectorComponent
            ],
            entryComponents: [SingleSelectorComponent],
        })
    ], SingleSelectorModule);
    return SingleSelectorModule;
}());

var AngularCustomSelectorModule = /** @class */ (function () {
    function AngularCustomSelectorModule() {
    }
    AngularCustomSelectorModule = __decorate([
        NgModule({
            declarations: [AngularCustomSelectorComponent],
            imports: [
                SingleSelectorModule,
                MultiSelectorModule,
                CommonModule
            ],
            exports: [AngularCustomSelectorComponent]
        })
    ], AngularCustomSelectorModule);
    return AngularCustomSelectorModule;
}());

/*
 * Public API Surface of angular-custom-selector
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AngularCustomSelectorComponent, AngularCustomSelectorModule, SingleSelectorModule as ɵa, SingleSelectorTreeViewComponent as ɵb, SingleSelectorComponent as ɵc, MultiSelectorModule as ɵd, MultiSelectorTreeViewComponent as ɵe, MultiSelectorComponent as ɵf };
//# sourceMappingURL=angular-custom-selector.js.map