npm - @piserve-tech/drop-down - Versions diffs - 1.2.59 → 1.2.60 - Mend

@piserve-tech/drop-down 1.2.59 → 1.2.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/esm2022/lib/dropdown.component.mjs +18 -17
package/esm2022/lib/dropdown.model.mjs +2 -0
package/fesm2022/piserve-tech-drop-down.mjs +17 -16
package/fesm2022/piserve-tech-drop-down.mjs.map +1 -1
package/lib/dropdown.component.d.ts +7 -10
package/lib/dropdown.model.d.ts +6 -0
package/package.json +1 -1

package/esm2022/lib/dropdown.component.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, Input, Output, ViewChild, } from "@angular/core";
+import { Component, EventEmitter, HostListener, Input, Output, ViewChild, ViewEncapsulation, } from "@angular/core";
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@angular/common";
@@ -12,18 +12,24 @@ export class DropdownComponent {
         this.showBorder = true;
         this.buttonClick = new EventEmitter();
         this.selectedItemsChange = new EventEmitter();
-        this.onScroll = new EventEmitter();
+        this.onDropdownScroll = new EventEmitter();
         this.onCreateNew = new EventEmitter();
         this.onSearch = new EventEmitter();
+        //subLabel
+        this.showSubLabel = false;
         this.dropdownOpened = false;
         this.selectedItemName = "";
         this.selectedItemImage = "";
         this.originalItems = [];
         this.searchTerm = "";
         this.initialized = false;
+        this.searchText = '';
     }
     ngOnInit() {
         this.initialize();
+    }
+    initialize() {
+        this.originalItems = this.items.slice();
         setTimeout(() => {
             if (this.selectedItems && this.selectedItems.length > 0) {
                 if (!this.multiple)
@@ -33,23 +39,16 @@ export class DropdownComponent {
         const uniqueItems = this.items.filter((selected, index, self) => index === self.findIndex((t) => (t.value === selected.value)));
         this.items = uniqueItems;
     }
-    initialize() {
-        this.originalItems = this.items.slice();
-    }
     openDropdown() {
         this.dropdownOpened = !this.dropdownOpened;
     }
-    onDropdownScroll(event) {
-        if (this.onScroll) {
-            const dropdownElement = this.dropdownitems.nativeElement;
-            const scrollPosition = dropdownElement.scrollTop + dropdownElement.clientHeight;
-            const totalHeight = dropdownElement.scrollHeight;
-            if (scrollPosition >= totalHeight) {
-                this.onScroll.emit();
-            }
+    dropdownScroll(event) {
+        if (this.scrollable) {
+            this.onDropdownScroll.emit(event);
         }
     }
     selectItem(item) {
+        this.searchText = '';
         if (this.multiple) {
             if (!this.selectedItems.includes(item)) {
                 this.selectedItems.push(item);
@@ -119,11 +118,11 @@ export class DropdownComponent {
         this.buttonClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { multiple: "multiple", scrollable: "scrollable", selectedItems: "selectedItems", placeholder: "placeholder", items: "items", showCreateNew: "showCreateNew", selectedValues: "selectedValues", customButtons: "customButtons", showBorder: "showBorder" }, outputs: { buttonClick: "buttonClick", selectedItemsChange: "selectedItemsChange", onScroll: "onScroll", onCreateNew: "onCreateNew", onSearch: "onSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownitems", first: true, predicate: ["dropdownItems"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{\n    opened: showBorder && dropdownOpened,\n    closed: showBorder && !dropdownOpened,\n  }\">\n  <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n      opened: showBorder && dropdownOpened,\n      closed: showBorder && !dropdownOpened,\n    }\" (click)=\"openDropdown()\">\n    <div *ngIf=\"selectedValues !== ''\" class=\"selected\">\n      {{ selectedValues }}\n    </div>\n    <div *ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div *ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n          <div *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n            <img *ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n            <span>{{ selectedItem.label }}</span>&nbsp;\n            <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">&times;</span>\n          </div>\n          <div class=\"remaining-items\" *ngIf=\"selectedItems.length > 3\">\n            +{{ selectedItems.length - 3 }} more\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div>\n          <span (click)=\"unselectAll()\" *ngIf=\"\n            (selectedItems.length > 0 || selectedItemName != '') && multiple\n            \" class=\"deselect\">&times;\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div class=\"input-field\">\n          <div *ngIf=\"multiple\">\n            <input class=\"dropdown_text\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n          </div>\n          <div *ngIf=\"!multiple\">\n            <img *ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n            <input class=\"dropdown_text\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n            (keyup)=\"search($event)\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n            <g id=\"Down Arrow\">\n              <g id=\"Group\">\n                <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n            <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #dropdownItems class=\"dropdown-items\" *ngIf=\"dropdownOpened\" (scroll)=\"onDropdownScroll($event)\">\n    <div  (click)=\"createNew()\" >\n      <a class=\"create_button \"*ngIf=\"showCreateNew\">Create new</a>\n    </div>\n    <ng-container *ngIf=\"multiple; else singleSelection\">\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <div>\n              <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n              <span class=\"item-label\">{{ item?.label }}</span>\n            </div>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-container>\n\n    <ng-template #singleSelection>\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n            <span class=\"item-label\">{{ item?.label }}</span>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-template>\n  </div>\n</div>", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:2px;border-radius:5px;font-size:small}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:2px;font-size:smaller;display:block}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:2px;margin-left:3px;margin-right:3px;outline:none;box-sizing:border-box;font-weight:500;font-family:Poppins;font-size:14px;font-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:15px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}.dropdown .dropdown-field.closed{border:1px solid #d8d8d8}.dropdown .dropdown-field.opened{border-bottom:1px solid #d8d8d8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:7px}}.dropdown .dropdown-items .create_button{text-decoration:none;line-height:41px;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{padding-left:8px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}.dropdown .dropdown-items .items:hover{background:#ebedef;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:1px #d8d8d8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.icon-size{width:25px;height:20px;margin-right:7px}.smallSpace{width:3px}.selected-icon-size{width:25px;height:20px;margin-left:10px}@media (max-width: 576px){.selected-icon-size{width:21px;height:15px;margin-right:7px;margin-bottom:1px}}.multiSelected-icon-size{width:25px;height:20px;margin-left:1px;margin-bottom:1px;margin-right:3px}.flexSection{display:flex}.dataSection{width:calc(100% - 20px)}.iconSection{width:20px;padding:1px}.down-arrow,.up-arrow,.deselect{width:20px;height:20px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.down-arrow{cursor:pointer}.down-arrow.opened{display:none}.down-arrow.closed{display:block}.up-arrow{cursor:pointer}.up-arrow.closed{display:none}.iconSection{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { multiple: "multiple", scrollable: "scrollable", selectedItems: "selectedItems", placeholder: "placeholder", items: "items", showCreateNew: "showCreateNew", selectedValues: "selectedValues", customButtons: "customButtons", showBorder: "showBorder", showSubLabel: "showSubLabel" }, outputs: { buttonClick: "buttonClick", selectedItemsChange: "selectedItemsChange", onDropdownScroll: "onDropdownScroll", onCreateNew: "onCreateNew", onSearch: "onSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownitems", first: true, predicate: ["dropdownItems"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{\n    opened: showBorder && dropdownOpened,\n    closed: showBorder && !dropdownOpened,\n  }\">\n  <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n      opened: showBorder && dropdownOpened,\n      closed: showBorder && !dropdownOpened,\n    }\" (click)=\"openDropdown()\">\n    <div *ngIf=\"selectedValues !== ''\" class=\"selected\">\n      {{ selectedValues }}\n    </div>\n    <div *ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div *ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n          <div *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n            <img *ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n            <span>{{ selectedItem.label }}</span>&nbsp;\n            <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">&times;</span>\n          </div>\n          <div class=\"remaining-items\" *ngIf=\"selectedItems.length > 3\">\n            +{{ selectedItems.length - 3 }} more\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div>\n          <span (click)=\"unselectAll()\" *ngIf=\"\n            (selectedItems.length > 0 || selectedItemName != '') && multiple\n            \" class=\"deselect\">&times;\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div class=\"input-field\">\n          <div *ngIf=\"multiple\">\n            <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n          </div>\n          <div *ngIf=\"!multiple\">\n            <img *ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n            <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n            (keyup)=\"search($event)\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n            <g id=\"Down Arrow\">\n              <g id=\"Group\">\n                <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n            <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #dropdownItems class=\"dropdown-items\" *ngIf=\"dropdownOpened\" (scroll)=\"dropdownScroll($event)\">\n    <div  (click)=\"createNew()\" >\n      <a class=\"create_button \"*ngIf=\"showCreateNew\">Create new</a>\n    </div>\n    <ng-container *ngIf=\"multiple; else singleSelection\">\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <div>\n              <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n              <span class=\"item-label\">{{ item?.label }}</span> <br />\n              <small *ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n            </div>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-container>\n\n    <ng-template #singleSelection>\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n            <span class=\"item-label\">{{ item?.label }}</span><br />\n            <small *ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-template>\n  </div>\n</div>", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:2px;border-radius:5px;font-size:small}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:2px;font-size:smaller;display:block}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:2px;margin-left:3px;margin-right:3px;outline:none;box-sizing:border-box;font-weight:500;font-family:Poppins;font-size:14px;font-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:15px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}.dropdown .dropdown-field.closed{border:1px solid #d8d8d8}.dropdown .dropdown-field.opened{border-bottom:1px solid #d8d8d8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:7px}}.dropdown .dropdown-items .create_button{text-decoration:none;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{padding-left:8px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}.dropdown .dropdown-items .items:hover{background:#ebedef;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:1px #d8d8d8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.icon-size{width:25px;height:20px;margin-right:7px}.smallSpace{width:3px}.selected-icon-size{width:25px;height:20px;margin-left:10px}@media (max-width: 576px){.selected-icon-size{width:21px;height:15px;margin-right:7px;margin-bottom:1px}}.multiSelected-icon-size{width:25px;height:20px;margin-left:1px;margin-bottom:1px;margin-right:3px}.flexSection{display:flex}.dataSection{width:calc(100% - 20px)}.iconSection{width:20px;padding:1px}.down-arrow,.up-arrow,.deselect{width:20px;height:20px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.down-arrow{cursor:pointer}.down-arrow.opened{display:none}.down-arrow.closed{display:block}.up-arrow{cursor:pointer}.up-arrow.closed{display:none}.iconSection{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-dropdown", template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{\n    opened: showBorder && dropdownOpened,\n    closed: showBorder && !dropdownOpened,\n  }\">\n  <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n      opened: showBorder && dropdownOpened,\n      closed: showBorder && !dropdownOpened,\n    }\" (click)=\"openDropdown()\">\n    <div *ngIf=\"selectedValues !== ''\" class=\"selected\">\n      {{ selectedValues }}\n    </div>\n    <div *ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div *ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n          <div *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n            <img *ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n            <span>{{ selectedItem.label }}</span>&nbsp;\n            <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">&times;</span>\n          </div>\n          <div class=\"remaining-items\" *ngIf=\"selectedItems.length > 3\">\n            +{{ selectedItems.length - 3 }} more\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div>\n          <span (click)=\"unselectAll()\" *ngIf=\"\n            (selectedItems.length > 0 || selectedItemName != '') && multiple\n            \" class=\"deselect\">&times;\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div class=\"input-field\">\n          <div *ngIf=\"multiple\">\n            <input class=\"dropdown_text\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n          </div>\n          <div *ngIf=\"!multiple\">\n            <img *ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n            <input class=\"dropdown_text\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n            (keyup)=\"search($event)\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n            <g id=\"Down Arrow\">\n              <g id=\"Group\">\n                <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n            <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #dropdownItems class=\"dropdown-items\" *ngIf=\"dropdownOpened\" (scroll)=\"onDropdownScroll($event)\">\n    <div  (click)=\"createNew()\" >\n      <a class=\"create_button \"*ngIf=\"showCreateNew\">Create new</a>\n    </div>\n    <ng-container *ngIf=\"multiple; else singleSelection\">\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <div>\n              <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n              <span class=\"item-label\">{{ item?.label }}</span>\n            </div>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-container>\n\n    <ng-template #singleSelection>\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n            <span class=\"item-label\">{{ item?.label }}</span>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-template>\n  </div>\n</div>", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:2px;border-radius:5px;font-size:small}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:2px;font-size:smaller;display:block}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:2px;margin-left:3px;margin-right:3px;outline:none;box-sizing:border-box;font-weight:500;font-family:Poppins;font-size:14px;font-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:15px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}.dropdown .dropdown-field.closed{border:1px solid #d8d8d8}.dropdown .dropdown-field.opened{border-bottom:1px solid #d8d8d8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:7px}}.dropdown .dropdown-items .create_button{text-decoration:none;line-height:41px;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{padding-left:8px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}.dropdown .dropdown-items .items:hover{background:#ebedef;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:1px #d8d8d8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.icon-size{width:25px;height:20px;margin-right:7px}.smallSpace{width:3px}.selected-icon-size{width:25px;height:20px;margin-left:10px}@media (max-width: 576px){.selected-icon-size{width:21px;height:15px;margin-right:7px;margin-bottom:1px}}.multiSelected-icon-size{width:25px;height:20px;margin-left:1px;margin-bottom:1px;margin-right:3px}.flexSection{display:flex}.dataSection{width:calc(100% - 20px)}.iconSection{width:20px;padding:1px}.down-arrow,.up-arrow,.deselect{width:20px;height:20px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.down-arrow{cursor:pointer}.down-arrow.opened{display:none}.down-arrow.closed{display:block}.up-arrow{cursor:pointer}.up-arrow.closed{display:none}.iconSection{display:flex;flex-direction:row-reverse}\n"] }]
+            args: [{ selector: "lib-dropdown", encapsulation: ViewEncapsulation.None, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{\n    opened: showBorder && dropdownOpened,\n    closed: showBorder && !dropdownOpened,\n  }\">\n  <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n      opened: showBorder && dropdownOpened,\n      closed: showBorder && !dropdownOpened,\n    }\" (click)=\"openDropdown()\">\n    <div *ngIf=\"selectedValues !== ''\" class=\"selected\">\n      {{ selectedValues }}\n    </div>\n    <div *ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div *ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n          <div *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n            <img *ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n            <span>{{ selectedItem.label }}</span>&nbsp;\n            <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">&times;</span>\n          </div>\n          <div class=\"remaining-items\" *ngIf=\"selectedItems.length > 3\">\n            +{{ selectedItems.length - 3 }} more\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div>\n          <span (click)=\"unselectAll()\" *ngIf=\"\n            (selectedItems.length > 0 || selectedItemName != '') && multiple\n            \" class=\"deselect\">&times;\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div class=\"input-field\">\n          <div *ngIf=\"multiple\">\n            <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n          </div>\n          <div *ngIf=\"!multiple\">\n            <img *ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n            <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n            (keyup)=\"search($event)\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n            <g id=\"Down Arrow\">\n              <g id=\"Group\">\n                <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n            <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #dropdownItems class=\"dropdown-items\" *ngIf=\"dropdownOpened\" (scroll)=\"dropdownScroll($event)\">\n    <div  (click)=\"createNew()\" >\n      <a class=\"create_button \"*ngIf=\"showCreateNew\">Create new</a>\n    </div>\n    <ng-container *ngIf=\"multiple; else singleSelection\">\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <div>\n              <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n              <span class=\"item-label\">{{ item?.label }}</span> <br />\n              <small *ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n            </div>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-container>\n\n    <ng-template #singleSelection>\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n            <span class=\"item-label\">{{ item?.label }}</span><br />\n            <small *ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-template>\n  </div>\n</div>", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:2px;border-radius:5px;font-size:small}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:2px;font-size:smaller;display:block}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:2px;margin-left:3px;margin-right:3px;outline:none;box-sizing:border-box;font-weight:500;font-family:Poppins;font-size:14px;font-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:15px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}.dropdown .dropdown-field.closed{border:1px solid #d8d8d8}.dropdown .dropdown-field.opened{border-bottom:1px solid #d8d8d8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:7px}}.dropdown .dropdown-items .create_button{text-decoration:none;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{padding-left:8px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}.dropdown .dropdown-items .items:hover{background:#ebedef;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:1px #d8d8d8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.icon-size{width:25px;height:20px;margin-right:7px}.smallSpace{width:3px}.selected-icon-size{width:25px;height:20px;margin-left:10px}@media (max-width: 576px){.selected-icon-size{width:21px;height:15px;margin-right:7px;margin-bottom:1px}}.multiSelected-icon-size{width:25px;height:20px;margin-left:1px;margin-bottom:1px;margin-right:3px}.flexSection{display:flex}.dataSection{width:calc(100% - 20px)}.iconSection{width:20px;padding:1px}.down-arrow,.up-arrow,.deselect{width:20px;height:20px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.down-arrow{cursor:pointer}.down-arrow.opened{display:none}.down-arrow.closed{display:block}.up-arrow{cursor:pointer}.up-arrow.closed{display:none}.iconSection{display:flex;flex-direction:row-reverse}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { multiple: [{
                 type: Input
             }], scrollable: [{
@@ -146,12 +145,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], selectedItemsChange: [{
                 type: Output
-            }], onScroll: [{
+            }], onDropdownScroll: [{
                 type: Output
             }], onCreateNew: [{
                 type: Output
             }], onSearch: [{
                 type: Output
+            }], showSubLabel: [{
+                type: Input
             }], dropdownitems: [{
                 type: ViewChild,
                 args: ["dropdownItems"]
@@ -162,4 +163,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: HostListener,
                 args: ["document:click", ["$event"]]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZHJvcGRvd24vc3JjL2xpYi9kcm9wZG93bi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9kcm9wZG93bi9zcmMvbGliL2Ryb3Bkb3duLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQzs7OztBQWF2QixNQUFNLE9BQU8saUJBQWlCO0lBZ0M1QjtRQTVCUyxrQkFBYSxHQUFVLEVBQUUsQ0FBQztRQUMxQixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUN6QixVQUFLLEdBQW1CLEVBQUUsQ0FBQztRQUUzQixtQkFBYyxHQUFXLEVBQUUsQ0FBQztRQUM1QixrQkFBYSxHQUtoQixFQUFFLENBQUM7UUFDQSxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzFCLGdCQUFXLEdBQXdCLElBQUksWUFBWSxFQUFTLENBQUM7UUFDN0Qsd0JBQW1CLEdBQXdCLElBQUksWUFBWSxFQUVsRSxDQUFDO1FBQ00sYUFBUSxHQUF3QixJQUFJLFlBQVksRUFBUyxDQUFDO1FBQzFELGdCQUFXLEdBQXdCLElBQUksWUFBWSxFQUFTLENBQUM7UUFDN0QsYUFBUSxHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO1FBRXRFLG1CQUFjLEdBQVksS0FBSyxDQUFDO1FBRWhDLHFCQUFnQixHQUFXLEVBQUUsQ0FBQztRQUM5QixzQkFBaUIsR0FBVyxFQUFFLENBQUM7UUFDL0Isa0JBQWEsR0FBbUIsRUFBRSxDQUFDO1FBQ25DLGVBQVUsR0FBVyxFQUFFLENBQUM7UUFDeEIsZ0JBQVcsR0FBWSxLQUFLLENBQUM7SUFFYixDQUFDO0lBRWpCLFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxF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QXJCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBTUcsVUFBVTtzQkFBbEIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLG1CQUFtQjtzQkFBNUIsTUFBTTtnQkFHRyxRQUFRO3NCQUFqQixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csUUFBUTtzQkFBakIsTUFBTTtnQkFtQ3FCLGFBQWE7c0JBQXhDLFNBQVM7dUJBQUMsZUFBZTtnQkFnREgsUUFBUTtzQkFBOUIsU0FBUzt1QkFBQyxVQUFVO2dCQUVyQixlQUFlO3NCQURkLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdExpc3RlbmVyLFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW50ZXJmYWNlIERyb3Bkb3duSXRlbSB7XG4gIHZhbHVlOiBzdHJpbmc7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIGltYWdlOiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJsaWItZHJvcGRvd25cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9kcm9wZG93bi5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vZHJvcGRvd24uY29tcG9uZW50LnNjc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIERyb3Bkb3duQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKSBtdWx0aXBsZSE6IGJvb2xlYW47XG4gIEBJbnB1dCgpIHNjcm9sbGFibGUhOiBib29sZWFuO1xuICBASW5wdXQoKSBzZWxlY3RlZEl0ZW1zOiBhbnlbXSA9IFtdO1xuICBASW5wdXQoKSBwbGFjZWhvbGRlcjogU3RyaW5nID0gXCJcIjtcbiAgQElucHV0KCkgaXRlbXM6IERyb3Bkb3duSXRlbVtdID0gW107XG4gIEBJbnB1dCgpIHNob3dDcmVhdGVOZXchOiBib29sZWFuO1xuICBASW5wdXQoKSBzZWxlY3RlZFZhbHVlczogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGN1c3RvbUJ1dHRvbnM6IHtcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIGljb246IHN0cmluZztcbiAgICBjb2xvcjogc3RyaW5nO1xuICAgIGFjdGlvbjogKCkgPT4gdm9pZDtcbiAgfVtdID0gW107XG4gIEBJbnB1dCgpIHNob3dCb3JkZXI6IGJvb2xlYW4gPSB0cnVlO1xuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2s6IEV2ZW50RW1pdHRlcjxFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgc2VsZWN0ZWRJdGVtc0NoYW5nZTogRXZlbnRFbWl0dGVyPGFueVtdPiA9IG5ldyBFdmVudEVtaXR0ZXI8XG4gICAgYW55W11cbiAgPigpO1xuICBAT3V0cHV0KCkgb25TY3JvbGw6IEV2ZW50RW1pdHRlcjxFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgb25DcmVhdGVOZXc6IEV2ZW50RW1pdHRlcjxFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgb25TZWFyY2g6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgZHJvcGRvd25PcGVuZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgc2VsZWN0ZWRJdGVtOiBhbnk7XG4gIHNlbGVjdGVkSXRlbU5hbWU6IHN0cmluZyA9IFwiXCI7XG4gIHNlbGVjdGVkSXRlbUltYWdlOiBzdHJpbmcgPSBcIlwiO1xuICBvcmlnaW5hbEl0ZW1zOiBEcm9wZG93bkl0ZW1bXSA9IFtdO1xuICBzZWFyY2hUZXJtOiBzdHJpbmcgPSBcIlwiO1xuICBpbml0aWFsaXplZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pbml0aWFsaXplKCk7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5zZWxlY3RlZEl0ZW1zICYmIHRoaXMuc2VsZWN0ZWRJdGVtcy5sZW5ndGggPiAwKSB7XG4gICAgICAgIGlmICghdGhpcy5tdWx0aXBsZSkgdGhpcy5zZWxlY3RJdGVtKHRoaXMuc2VsZWN0ZWRJdGVtc1swXSk7XG4gICAgICB9XG4gICAgfSwgMTAwMCk7XG4gICAgY29uc3QgdW5pcXVlSXRlbXMgPSB0aGlzLml0ZW1zLmZpbHRlcigoc2VsZWN0ZWQsIGluZGV4LCBzZWxmKSA9PlxuICAgICAgaW5kZXggPT09IHNlbGYuZmluZEluZGV4KCh0KSA9PiAoXG4gICAgICAgIHQudmFsdWUgPT09IHNlbGVjdGVkLnZhbHVlXG4gICAgICApKVxuICAgICk7XG4gICAgdGhpcy5pdGVtcyA9IHVuaXF1ZUl0ZW1zO1xuICB9XG5cbiAgaW5pdGlhbGl6ZSgpIHtcbiAgICB0aGlzLm9yaWdpbmFsSXRlbXMgPSB0aGlzLml0ZW1zLnNsaWNlKCk7XG4gIH1cblxuICBvcGVuRHJvcGRvd24oKSB7XG4gICAgdGhpcy5kcm9wZG93bk9wZW5lZCA9ICF0aGlzLmRyb3Bkb3duT3BlbmVkO1xuICB9XG5cbiAgQFZpZXdDaGlsZChcImRyb3Bkb3duSXRlbXNcIikgZHJvcGRvd25pdGVtcyE6IEVsZW1lbnRSZWY7XG4gIG9uRHJvcGRvd25TY3JvbGwoZXZlbnQ6IGFueSk6IHZvaWQge1xuICAgIGlmICh0aGlzLm9uU2Nyb2xsKSB7XG4gICAgICBjb25zdCBkcm9wZG93bkVsZW1lbnQ6IEhUTUxFbGVtZW50ID0gdGhpcy5kcm9wZG93bml0ZW1zLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICBjb25zdCBzY3JvbGxQb3NpdGlvbiA9XG4gICAgICAgIGRyb3Bkb3duRWxlbWVudC5zY3JvbGxUb3AgKyBkcm9wZG93bkVsZW1lbnQuY2xpZW50SGVpZ2h0O1xuICAgICAgY29uc3QgdG90YWxIZWlnaHQgPSBkcm9wZG93bkVsZW1lbnQuc2Nyb2xsSGVpZ2h0O1xuXG4gICAgICBpZiAoc2Nyb2xsUG9zaXRpb24gPj0gdG90YWxIZWlnaHQpIHtcbiAgICAgICAgdGhpcy5vblNjcm9sbC5lbWl0KCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgc2VsZWN0SXRlbShpdGVtOiBhbnkpIHsgXG4gICAgaWYgKHRoaXMubXVsdGlwbGUpIHtcbiAgICAgIGlmICghdGhpcy5zZWxlY3RlZEl0ZW1zLmluY2x1ZGVzKGl0ZW0pKSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtcy5wdXNoKGl0ZW0pO1xuICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbXNDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkSXRlbXMpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zID0gdGhpcy5zZWxlY3RlZEl0ZW1zLmZpbHRlcihcbiAgICAgICAgICAoc2VsZWN0ZWQ6IGFueSkgPT4gc2VsZWN0ZWQgIT09IGl0ZW1cbiAgICAgICAgKTtcbiAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZEl0ZW1zKTtcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zWzBdID0gaXRlbTtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtTmFtZSA9IHRoaXMuc2VsZWN0ZWRJdGVtc1swXT8ubGFiZWw7XG4gICAgICB0aGlzLnNlbGVjdGVkSXRlbUltYWdlID0gdGhpcy5zZWxlY3RlZEl0ZW1zWzBdPy5pbWFnZTtcbiAgICAgIHRoaXMuZHJvcGRvd25PcGVuZWQgPSBmYWxzZTtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtc0NoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRJdGVtcyk7ICAgICAgXG4gICAgfVxuICB9XG5cbiAgdW5zZWxlY3RJdGVtKGl0ZW06IGFueSk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRJdGVtcyA9IHRoaXMuc2VsZWN0ZWRJdGVtcy5maWx0ZXIoXG4gICAgICAoc2VsZWN0ZWQ6IGFueSkgPT4gc2VsZWN0ZWQgIT09IGl0ZW1cbiAgICApO1xuICAgIHRoaXMuc2VsZWN0ZWRJdGVtc0NoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRJdGVtcyk7XG4gIH1cblxuICB1bnNlbGVjdEFsbCgpIHtcbiAgICB0aGlzLnNlbGVjdGVkSXRlbXMgPSBbXTtcbiAgICB0aGlzLnNlbGVjdGVkSXRlbU5hbWUgPSBcIlwiO1xuICAgIHRoaXMuc2VsZWN0ZWRJdGVtc0NoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRJdGVtcyk7XG4gICAgLy8gdGhpcy5pdGVtcyA9IHRoaXMub3JpZ2luYWxJdGVtcy5zbGljZSgpO1xuICB9XG5cbiAgQFZpZXdDaGlsZChcImRyb3Bkb3duXCIpIGRyb3Bkb3duITogRWxlbWVudFJlZjtcbiAgQEhvc3RMaXN0ZW5lcihcImRvY3VtZW50OmNsaWNrXCIsIFtcIiRldmVudFwiXSlcbiAgb25Eb2N1bWVudENsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IGlzQ2xpY2tJbnNpZGVEcm9wZG93biA9IHRoaXMuZHJvcGRvd24ubmF0aXZlRWxlbWVudC5jb250YWlucyhcbiAgICAgIGV2ZW50LnRhcmdldFxuICAgICk7XG4gICAgaWYgKCFpc0NsaWNrSW5zaWRlRHJvcGRvd24pIHtcbiAgICAgIHRoaXMuZHJvcGRvd25PcGVuZWQgPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBjcmVhdGVOZXcoKSB7XG4gICAgdGhpcy5vbkNyZWF0ZU5ldy5lbWl0KCk7XG4gICAgdGhpcy5kcm9wZG93bk9wZW5lZCA9IGZhbHNlO1xuICB9XG5cbiAgc2VhcmNoKGV2ZW50OiBhbnkpOiB2b2lkIHtcbiAgICBjb25zdCBrZXlDb2RlID0gZXZlbnQua2V5Q29kZTtcbiAgICB0aGlzLmRyb3Bkb3duT3BlbmVkID0gdHJ1ZTtcbiAgICBpZiAoa2V5Q29kZSA9PT0gOCAmJiAhdGhpcy5tdWx0aXBsZSkge1xuICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zID0gW107XG4gICAgICB0aGlzLnNlbGVjdGVkSXRlbU5hbWUgPSBcIlwiO1xuICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1JbWFnZSA9IFwiXCI7XG4gICAgICB0aGlzLml0ZW1zID0gdGhpcy5vcmlnaW5hbEl0ZW1zLnNsaWNlKCk7XG4gICAgICB0aGlzLnNlbGVjdGVkSXRlbXNDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkSXRlbXMpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNlYXJjaFRlcm0gPSBldmVudC50YXJnZXQudmFsdWUudG9Mb3dlckNhc2UoKTtcbiAgICAgIGlmICghdGhpcy5vblNlYXJjaC5vYnNlcnZlcnMubGVuZ3RoKSB7XG4gICAgICAgIGlmICh0aGlzLnNlYXJjaFRlcm0udHJpbSgpID09PSBcIlwiKSB7XG4gICAgICAgICAgdGhpcy5pdGVtcyA9IHRoaXMub3JpZ2luYWxJdGVtcy5zbGljZSgpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHRoaXMuaXRlbXMgPSB0aGlzLm9yaWdpbmFsSXRlbXMuZmlsdGVyKFxuICAgICAgICAgICAgKGl0ZW0pID0+XG4gICAgICAgICAgICAgIGl0ZW0ubGFiZWwudG9Mb3dlckNhc2UoKS5pbmNsdWRlcyh0aGlzLnNlYXJjaFRlcm0pIHx8XG4gICAgICAgICAgICAgIChpdGVtLnZhbHVlICYmIGl0ZW0udmFsdWUudG9Mb3dlckNhc2UoKS5pbmNsdWRlcyh0aGlzLnNlYXJjaFRlcm0pKVxuICAgICAgICAgICk7XG4gICAgICAgIH1cbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMub25TZWFyY2guZW1pdCh0aGlzLnNlYXJjaFRlcm0pO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIGhhbmRsZUJ1dHRvbkNsaWNrKGFjdGlvbjogKCkgPT4gdm9pZCk6IHZvaWQge1xuICAgIGFjdGlvbigpO1xuICAgIHRoaXMuYnV0dG9uQ2xpY2suZW1pdCgpO1xuICB9XG59XG4iLCI8ZGl2ICNkcm9wZG93biBjbGFzcz1cImRyb3Bkb3duXCIgW25nQ2xhc3NdPVwie1xuICAgIG9wZW5lZDogc2hvd0JvcmRlciAmJiBkcm9wZG93bk9wZW5lZCxcbiAgICBjbG9zZWQ6IHNob3dCb3JkZXIgJiYgIWRyb3Bkb3duT3BlbmVkLFxuICB9XCI+XG4gIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1maWVsZFwiIGlkPVwiZGl2aXNpb25cIiBbbmdDbGFzc109XCJ7XG4gICAgICBvcGVuZWQ6IHNob3dCb3JkZXIgJiYgZHJvcGRvd25PcGVuZWQsXG4gICAgICBjbG9zZWQ6IHNob3dCb3JkZXIgJiYgIWRyb3Bkb3duT3BlbmVkLFxuICAgIH1cIiAoY2xpY2spPVwib3BlbkRyb3Bkb3duKClcIj5cbiAgICA8ZGl2ICpuZ0lmPVwic2VsZWN0ZWRWYWx1ZXMgIT09ICcnXCIgY2xhc3M9XCJzZWxlY3RlZFwiPlxuICAgICAge3sgc2VsZWN0ZWRWYWx1ZXMgfX1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ0lmPVwiIXNlbGVjdGVkSXRlbSAmJiBtdWx0aXBsZVwiIGNsYXNzPVwiZmxleFNlY3Rpb25cIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJkYXRhU2VjdGlvblwiPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwiIXNlbGVjdGVkSXRlbSAmJiBtdWx0aXBsZVwiIGNsYXNzPVwic2VsZWN0ZWQgc2VsZWN0ZWRMaXN0XCI+XG4gICAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgc2VsZWN0ZWRJdGVtIG9mIHNlbGVjdGVkSXRlbXMuc2xpY2UoMCwgMylcIiBjbGFzcz1cInNlbGVjdGVkLWl0ZW1cIj5cbiAgICAgICAgICAgIDxpbWcgKm5nSWY9XCJzZWxlY3RlZEl0ZW0/LmltYWdlXCIgY2xhc3M9XCJtdWx0aVNlbGVjdGVkLWljb24tc2l6ZVwiIFtzcmNdPVwic2VsZWN0ZWRJdGVtPy5pbWFnZVwiIGFsdD1cImltYWdlXCIgLz5cbiAgICAgICAgICAgIDxzcGFuPnt7IHNlbGVjdGVkSXRlbS5sYWJlbCB9fTwvc3Bhbj4mbmJzcDtcbiAgICAgICAgICAgIDxzcGFuIChjbGljayk9XCJ1bnNlbGVjdEl0ZW0oc2VsZWN0ZWRJdGVtKVwiIGNsYXNzPVwiY2xvc2UtaWNvblwiPiZ0aW1lczs8L3NwYW4+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInJlbWFpbmluZy1pdGVtc1wiICpuZ0lmPVwic2VsZWN0ZWRJdGVtcy5sZW5ndGggPiAzXCI+XG4gICAgICAgICAgICAre3sgc2VsZWN0ZWRJdGVtcy5sZW5ndGggLSAzIH19IG1vcmVcbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJpY29uU2VjdGlvblwiPlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxzcGFuIChjbGljayk9XCJ1bnNlbGVjdEFsbCgpXCIgKm5nSWY9XCJcbiAgICAgICAgICAgIChzZWxlY3RlZEl0ZW1zLmxlbmd0aCA+IDAgfHwgc2VsZWN0ZWRJdGVtTmFtZSAhPSAnJykgJiYgbXVsdGlwbGVcbiAgICAgICAgICAgIFwiIGNsYXNzPVwiZGVzZWxlY3RcIj4mdGltZXM7XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJmbGV4U2VjdGlvblwiPlxuICAgICAgPGRpdiBjbGFzcz1cImRhdGFTZWN0aW9uXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpbnB1dC1maWVsZFwiPlxuICAgICAgICAgIDxkaXYgKm5nSWY9XCJtdWx0aXBsZVwiPlxuICAgICAgICAgICAgPGlucHV0IGNsYXNzPVwiZHJvcGRvd25fdGV4dFwiIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiIChrZXl1cCk9XCJzZWFyY2goJGV2ZW50KVwiIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cIiFtdWx0aXBsZVwiPlxuICAgICAgICAgICAgPGltZyAqbmdJZj1cInNlbGVjdGVkSXRlbUltYWdlXCIgY2xhc3M9XCJzZWxlY3RlZC1pY29uLXNpemVcIiBbc3JjXT1cInNlbGVjdGVkSXRlbUltYWdlXCIgYWx0PVwiaW1hZ2VcIiAvPlxuICAgICAgICAgICAgPGlucHV0IGNsYXNzPVwiZHJvcGRvd25fdGV4dFwiIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiIFsobmdNb2RlbCldPVwic2VsZWN0ZWRJdGVtTmFtZVwiXG4gICAgICAgICAgICAoa2V5dXApPVwic2VhcmNoKCRldmVudClcIiAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImljb25TZWN0aW9uXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkb3duLWFycm93XCIgW25nQ2xhc3NdPVwieyBvcGVuZWQ6IGRyb3Bkb3duT3BlbmVkLCBjbG9zZWQ6ICFkcm9wZG93bk9wZW5lZCB9XCI+XG4gICAgICAgICAgPHN2ZyB3aWR0aD1cIjFlbVwiIHZpZXdCb3g9XCIwIDAgMjQgMjVcIiBmaWxsPVwibm9uZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiBjbGFzcz1cImRvd24tYXJyb3ctaW1nXCI+XG4gICAgICAgICAgICA8ZyBpZD1cIkRvd24gQXJyb3dcIj5cbiAgICAgICAgICAgICAgPGcgaWQ9XCJHcm91cFwiPlxuICAgICAgICAgICAgICAgIDxwYXRoIGlkPVwiUGF0aFwiIGQ9XCJNNiA5LjEzNzQxTDEyIDE1LjIyOUwxOCA5LjEzNzQxXCIgc3Ryb2tlPVwiIzhFOUFBMFwiIHN0cm9rZS13aWR0aD1cIjEuNVwiXG4gICAgICAgICAgICAgICAgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgLz5cbiAgICAgICAgICAgICAgPC9nPlxuICAgICAgICAgICAgPC9nPlxuICAgICAgICAgIDwvc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInVwLWFycm93XCIgW25nQ2xhc3NdPVwieyBvcGVuZWQ6IGRyb3Bkb3duT3BlbmVkLCBjbG9zZWQ6ICFkcm9wZG93bk9wZW5lZCB9XCI+XG4gICAgICAgICAgPHN2ZyB3aWR0aD1cIjFlbVwiIHZpZXdCb3g9XCIwIDAgMjQgMjVcIiBmaWxsPVwibm9uZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiBjbGFzcz1cInVwLWFycm93LWltZ1wiPlxuICAgICAgICAgICAgPHBhdGggZD1cIk0xOCAxNS4yMjlMMTIgOS4xMzc0TDYgMTUuMjI5XCIgc3Ryb2tlPVwiIzhFOUFBMFwiIHN0cm9rZS13aWR0aD1cIjEuNVwiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIlxuICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIiAvPlxuICAgICAgICAgIDwvc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cblxuICA8ZGl2ICNkcm9wZG93bkl0ZW1zIGNsYXNzPVwiZHJvcGRvd24taXRlbXNcIiAqbmdJZj1cImRyb3Bkb3duT3BlbmVkXCIgKHNjcm9sbCk9XCJvbkRyb3Bkb3duU2Nyb2xsKCRldmVudClcIj5cbiAgICA8ZGl2ICAoY2xpY2spPVwiY3JlYXRlTmV3KClcIiA+XG4gICAgICA8YSBjbGFzcz1cImNyZWF0ZV9idXR0b24gXCIqbmdJZj1cInNob3dDcmVhdGVOZXdcIj5DcmVhdGUgbmV3PC9hPlxuICAgIDwvZGl2PlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJtdWx0aXBsZTsgZWxzZSBzaW5nbGVTZWxlY3Rpb25cIj5cbiAgICAgIDxhIGNsYXNzPVwiaXRlbXMgZC1ibG9ja1wiICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zXCIgKGNsaWNrKT1cInNlbGVjdEl0ZW0oaXRlbSlcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRyb3Bkb3duLWl0ZW1cIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaXRlbS1kZXRhaWxzXCI+XG4gICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICA8aW1nICpuZ0lmPVwiaXRlbT8uaW1hZ2VcIiBbc3JjXT1cIml0ZW0/LmltYWdlXCIgYWx0PVwiSXRlbSBJbWFnZVwiIGNsYXNzPVwiaXRlbS1pbWFnZSBpY29uLXNpemVcIiAvPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIml0ZW0tbGFiZWxcIj57eyBpdGVtPy5sYWJlbCB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNwYWNlXCIgKm5nSWY9XCJpdGVtPy5sYWJlbFwiPjwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRyb3Bkb3duX2J1dHRvbnNcIj5cbiAgICAgICAgICAgICAgPGJ1dHRvbiAqbmdGb3I9XCJsZXQgYnV0dG9uIG9mIGN1c3RvbUJ1dHRvbnNcIiAoY2xpY2spPVwiaGFuZGxlQnV0dG9uQ2xpY2soYnV0dG9uLmFjdGlvbilcIj5cbiAgICAgICAgICAgICAgICA8aSBbY2xhc3NdPVwiYnV0dG9uLmljb25cIiBbc3R5bGUuY29sb3JdPVwiYnV0dG9uLmNvbG9yXCI+PC9pPlxuICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvYT5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDxuZy10ZW1wbGF0ZSAjc2luZ2xlU2VsZWN0aW9uPlxuICAgICAgPGEgY2xhc3M9XCJpdGVtcyBkLWJsb2NrXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIiAoY2xpY2spPVwic2VsZWN0SXRlbShpdGVtKVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd24taXRlbVwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJpdGVtLWRldGFpbHNcIj5cbiAgICAgICAgICAgIDxpbWcgKm5nSWY9XCJpdGVtPy5pbWFnZVwiIFtzcmNdPVwiaXRlbT8uaW1hZ2VcIiBhbHQ9XCJJdGVtIEltYWdlXCIgY2xhc3M9XCJpdGVtLWltYWdlIGljb24tc2l6ZVwiIC8+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cIml0ZW0tbGFiZWxcIj57eyBpdGVtPy5sYWJlbCB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzcGFjZVwiICpuZ0lmPVwiaXRlbT8ubGFiZWxcIj48L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bl9idXR0b25zXCI+XG4gICAgICAgICAgICAgIDxidXR0b24gKm5nRm9yPVwibGV0IGJ1dHRvbiBvZiBjdXN0b21CdXR0b25zXCIgKGNsaWNrKT1cImhhbmRsZUJ1dHRvbkNsaWNrKGJ1dHRvbi5hY3Rpb24pXCI+XG4gICAgICAgICAgICAgICAgPGkgW2NsYXNzXT1cImJ1dHRvbi5pY29uXCIgW3N0eWxlLmNvbG9yXT1cImJ1dHRvbi5jb2xvclwiPjwvaT5cbiAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2E+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgPC9kaXY+XG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZHJvcGRvd24vc3JjL2xpYi9kcm9wZG93bi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9kcm9wZG93bi9zcmMvbGliL2Ryb3Bkb3duLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDVCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7Ozs7QUFVdkIsTUFBTSxPQUFPLGlCQUFpQjtJQW1DNUI7UUEvQlMsa0JBQWEsR0FBVSxFQUFFLENBQUM7UUFDMUIsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFDekIsVUFBSyxHQUFtQixFQUFFLENBQUM7UUFFM0IsbUJBQWMsR0FBVyxFQUFFLENBQUM7UUFDNUIsa0JBQWEsR0FLaEIsRUFBRSxDQUFDO1FBQ0EsZUFBVSxHQUFZLElBQUksQ0FBQztRQUMxQixnQkFBVyxHQUF3QixJQUFJLFlBQVksRUFBUyxDQUFDO1FBQzdELHdCQUFtQixHQUF3QixJQUFJLFlBQVksRUFFbEUsQ0FBQztRQUNNLHFCQUFnQixHQUF3QixJQUFJLFlBQVksRUFBUyxDQUFDO1FBQ2xFLGdCQUFXLEdBQXdCLElBQUksWUFBWSxFQUFTLENBQUM7UUFDN0QsYUFBUSxHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO1FBQ3RFLFVBQVU7UUFDRCxpQkFBWSxHQUFZLEtBQUssQ0FBQztRQUV2QyxtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUVoQyxxQkFBZ0IsR0FBVyxFQUFFLENBQUM7UUFDOUIsc0JBQWlCLEdBQVcsRUFBRSxDQUFDO1FBQy9CLGtCQUFhLEdBQW1CLEVBQUUsQ0FBQztRQUNuQyxlQUFVLEdBQVcsRUFBRSxDQUFDO1FBQ3hCLGdCQUFXLEdBQVks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QkFBYixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQU1HLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0ksV0FBVztzQkFBcEIsTUFBTTtnQkFDRyxtQkFBbUI7c0JBQTVCLE1BQU07Z0JBR0csZ0JBQWdCO3NCQUF6QixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csUUFBUTtzQkFBakIsTUFBTTtnQkFFRSxZQUFZO3NCQUFwQixLQUFLO2dCQXFDc0IsYUFBYTtzQkFBeEMsU0FBUzt1QkFBQyxlQUFlO2dCQTBDSCxRQUFRO3NCQUE5QixTQUFTO3VCQUFDLFVBQVU7Z0JBRXJCLGVBQWU7c0JBRGQsWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgVmlld0NoaWxkLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IERyb3Bkb3duSXRlbSB9IGZyb20gXCIuL2Ryb3Bkb3duLm1vZGVsXCI7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImxpYi1kcm9wZG93blwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL2Ryb3Bkb3duLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsczogW1wiLi9kcm9wZG93bi5jb21wb25lbnQuc2Nzc1wiXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBEcm9wZG93bkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KCkgbXVsdGlwbGUhOiBib29sZWFuO1xuICBASW5wdXQoKSBzY3JvbGxhYmxlITogYm9vbGVhbjtcbiAgQElucHV0KCkgc2VsZWN0ZWRJdGVtczogYW55W10gPSBbXTtcbiAgQElucHV0KCkgcGxhY2Vob2xkZXI6IFN0cmluZyA9IFwiXCI7XG4gIEBJbnB1dCgpIGl0ZW1zOiBEcm9wZG93bkl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBzaG93Q3JlYXRlTmV3ITogYm9vbGVhbjtcbiAgQElucHV0KCkgc2VsZWN0ZWRWYWx1ZXM6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBjdXN0b21CdXR0b25zOiB7XG4gICAgbGFiZWw6IHN0cmluZztcbiAgICBpY29uOiBzdHJpbmc7XG4gICAgY29sb3I6IHN0cmluZztcbiAgICBhY3Rpb246ICgpID0+IHZvaWQ7XG4gIH1bXSA9IFtdO1xuICBASW5wdXQoKSBzaG93Qm9yZGVyOiBib29sZWFuID0gdHJ1ZTtcbiAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrOiBFdmVudEVtaXR0ZXI8RXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcbiAgQE91dHB1dCgpIHNlbGVjdGVkSXRlbXNDaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnlbXT4gPSBuZXcgRXZlbnRFbWl0dGVyPFxuICAgIGFueVtdXG4gID4oKTtcbiAgQE91dHB1dCgpIG9uRHJvcGRvd25TY3JvbGw6IEV2ZW50RW1pdHRlcjxFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgb25DcmVhdGVOZXc6IEV2ZW50RW1pdHRlcjxFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgb25TZWFyY2g6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gIC8vc3ViTGFiZWxcbiAgQElucHV0KCkgc2hvd1N1YkxhYmVsOiBib29sZWFuID0gZmFsc2U7XG5cbiAgZHJvcGRvd25PcGVuZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgc2VsZWN0ZWRJdGVtOiBhbnk7XG4gIHNlbGVjdGVkSXRlbU5hbWU6IHN0cmluZyA9IFwiXCI7XG4gIHNlbGVjdGVkSXRlbUltYWdlOiBzdHJpbmcgPSBcIlwiO1xuICBvcmlnaW5hbEl0ZW1zOiBEcm9wZG93bkl0ZW1bXSA9IFtdO1xuICBzZWFyY2hUZXJtOiBzdHJpbmcgPSBcIlwiO1xuICBpbml0aWFsaXplZDogYm9vbGVhbiA9IGZhbHNlO1xuICBzZWFyY2hUZXh0OiBzdHJpbmcgPSAnJztcbiAgXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pbml0aWFsaXplKCk7ICAgIFxuICB9XG5cbiAgaW5pdGlhbGl6ZSgpIHtcbiAgICB0aGlzLm9yaWdpbmFsSXRlbXMgPSB0aGlzLml0ZW1zLnNsaWNlKCk7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5zZWxlY3RlZEl0ZW1zICYmIHRoaXMuc2VsZWN0ZWRJdGVtcy5sZW5ndGggPiAwKSB7XG4gICAgICAgIGlmICghdGhpcy5tdWx0aXBsZSkgdGhpcy5zZWxlY3RJdGVtKHRoaXMuc2VsZWN0ZWRJdGVtc1swXSk7XG4gICAgICB9XG4gICAgfSwgMTAwMCk7XG4gICAgY29uc3QgdW5pcXVlSXRlbXMgPSB0aGlzLml0ZW1zLmZpbHRlcigoc2VsZWN0ZWQsIGluZGV4LCBzZWxmKSA9PlxuICAgICAgaW5kZXggPT09IHNlbGYuZmluZEluZGV4KCh0KSA9PiAoXG4gICAgICAgIHQudmFsdWUgPT09IHNlbGVjdGVkLnZhbHVlXG4gICAgICApKVxuICAgICk7XG4gICAgXG4gICAgdGhpcy5pdGVtcyA9IHVuaXF1ZUl0ZW1zO1xuICB9XG5cbiAgb3BlbkRyb3Bkb3duKCkge1xuICAgIHRoaXMuZHJvcGRvd25PcGVuZWQgPSAhdGhpcy5kcm9wZG93bk9wZW5lZDtcbiAgfVxuXG4gIEBWaWV3Q2hpbGQoXCJkcm9wZG93bkl0ZW1zXCIpIGRyb3Bkb3duaXRlbXMhOiBFbGVtZW50UmVmPGFueT47XG4gIGRyb3Bkb3duU2Nyb2xsKGV2ZW50OiBhbnkpOiB2b2lkIHsgICAgXG4gICAgaWYgKHRoaXMuc2Nyb2xsYWJsZSkge1xuICAgICAgICB0aGlzLm9uRHJvcGRvd25TY3JvbGwuZW1pdChldmVudCk7XG4gICAgfVxuICB9XG5cbiAgc2VsZWN0SXRlbShpdGVtOiBhbnkpIHsgXG4gICAgdGhpcy5zZWFyY2hUZXh0ID0gJyc7XG4gICAgaWYgKHRoaXMubXVsdGlwbGUpIHtcbiAgICAgIGlmICghdGhpcy5zZWxlY3RlZEl0ZW1zLmluY2x1ZGVzKGl0ZW0pKSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtcy5wdXNoKGl0ZW0pO1xuICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbXNDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkSXRlbXMpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zID0gdGhpcy5zZWxlY3RlZEl0ZW1zLmZpbHRlcihcbiAgICAgICAgICAoc2VsZWN0ZWQ6IGFueSkgPT4gc2VsZWN0ZWQgIT09IGl0ZW1cbiAgICAgICAgKTtcbiAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZEl0ZW1zKTtcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zWzBdID0gaXRlbTtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtTmFtZSA9IHRoaXMuc2VsZWN0ZWRJdGVtc1swXT8ubGFiZWw7XG4gICAgICB0aGlzLnNlbGVjdGVkSXRlbUltYWdlID0gdGhpcy5zZWxlY3RlZEl0ZW1zWzBdPy5pbWFnZTtcbiAgICAgIHRoaXMuZHJvcGRvd25PcGVuZWQgPSBmYWxzZTtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtc0NoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRJdGVtcyk7ICAgICAgXG4gICAgfVxuICB9XG5cbiAgdW5zZWxlY3RJdGVtKGl0ZW06IGFueSk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRJdGVtcyA9IHRoaXMuc2VsZWN0ZWRJdGVtcy5maWx0ZXIoXG4gICAgICAoc2VsZWN0ZWQ6IGFueSkgPT4gc2VsZWN0ZWQgIT09IGl0ZW1cbiAgICApO1xuICAgIHRoaXMuc2VsZWN0ZWRJdGVtc0NoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRJdGVtcyk7XG4gIH1cblxuICB1bnNlbGVjdEFsbCgpIHtcbiAgICB0aGlzLnNlbGVjdGVkSXRlbXMgPSBbXTtcbiAgICB0aGlzLnNlbGVjdGVkSXRlbU5hbWUgPSBcIlwiO1xuICAgIHRoaXMuc2VsZWN0ZWRJdGVtc0NoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRJdGVtcyk7XG4gICAgLy8gdGhpcy5pdGVtcyA9IHRoaXMub3JpZ2luYWxJdGVtcy5zbGljZSgpO1xuICB9XG5cbiAgQFZpZXdDaGlsZChcImRyb3Bkb3duXCIpIGRyb3Bkb3duITogRWxlbWVudFJlZjtcbiAgQEhvc3RMaXN0ZW5lcihcImRvY3VtZW50OmNsaWNrXCIsIFtcIiRldmVudFwiXSlcbiAgb25Eb2N1bWVudENsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IGlzQ2xpY2tJbnNpZGVEcm9wZG93biA9IHRoaXMuZHJvcGRvd24ubmF0aXZlRWxlbWVudC5jb250YWlucyhcbiAgICAgIGV2ZW50LnRhcmdldFxuICAgICk7XG4gICAgaWYgKCFpc0NsaWNrSW5zaWRlRHJvcGRvd24pIHtcbiAgICAgIHRoaXMuZHJvcGRvd25PcGVuZWQgPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBjcmVhdGVOZXcoKSB7XG4gICAgdGhpcy5vbkNyZWF0ZU5ldy5lbWl0KCk7XG4gICAgdGhpcy5kcm9wZG93bk9wZW5lZCA9IGZhbHNlO1xuICB9XG5cbiAgc2VhcmNoKGV2ZW50OiBhbnkpOiB2b2lkIHtcbiAgICBjb25zdCBrZXlDb2RlID0gZXZlbnQua2V5Q29kZTtcbiAgICB0aGlzLmRyb3Bkb3duT3BlbmVkID0gdHJ1ZTtcbiAgICBpZiAoa2V5Q29kZSA9PT0gOCAmJiAhdGhpcy5tdWx0aXBsZSkge1xuICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zID0gW107XG4gICAgICB0aGlzLnNlbGVjdGVkSXRlbU5hbWUgPSBcIlwiO1xuICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1JbWFnZSA9IFwiXCI7XG4gICAgICB0aGlzLml0ZW1zID0gdGhpcy5vcmlnaW5hbEl0ZW1zLnNsaWNlKCk7XG4gICAgICB0aGlzLnNlbGVjdGVkSXRlbXNDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkSXRlbXMpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNlYXJjaFRlcm0gPSBldmVudC50YXJnZXQudmFsdWUudG9Mb3dlckNhc2UoKTtcbiAgICAgIGlmICghdGhpcy5vblNlYXJjaC5vYnNlcnZlcnMubGVuZ3RoKSB7XG4gICAgICAgIGlmICh0aGlzLnNlYXJjaFRlcm0udHJpbSgpID09PSBcIlwiKSB7XG4gICAgICAgICAgdGhpcy5pdGVtcyA9IHRoaXMub3JpZ2luYWxJdGVtcy5zbGljZSgpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHRoaXMuaXRlbXMgPSB0aGlzLm9yaWdpbmFsSXRlbXMuZmlsdGVyKFxuICAgICAgICAgICAgKGl0ZW0pID0+XG4gICAgICAgICAgICAgIGl0ZW0ubGFiZWwudG9Mb3dlckNhc2UoKS5pbmNsdWRlcyh0aGlzLnNlYXJjaFRlcm0pIHx8XG4gICAgICAgICAgICAgIChpdGVtLnZhbHVlICYmIGl0ZW0udmFsdWUudG9Mb3dlckNhc2UoKS5pbmNsdWRlcyh0aGlzLnNlYXJjaFRlcm0pKVxuICAgICAgICAgICk7XG4gICAgICAgIH1cbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMub25TZWFyY2guZW1pdCh0aGlzLnNlYXJjaFRlcm0pO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIGhhbmRsZUJ1dHRvbkNsaWNrKGFjdGlvbjogKCkgPT4gdm9pZCk6IHZvaWQge1xuICAgIGFjdGlvbigpO1xuICAgIHRoaXMuYnV0dG9uQ2xpY2suZW1pdCgpO1xuICB9XG59XG4iLCI8ZGl2ICNkcm9wZG93biBjbGFzcz1cImRyb3Bkb3duXCIgW25nQ2xhc3NdPVwie1xuICAgIG9wZW5lZDogc2hvd0JvcmRlciAmJiBkcm9wZG93bk9wZW5lZCxcbiAgICBjbG9zZWQ6IHNob3dCb3JkZXIgJiYgIWRyb3Bkb3duT3BlbmVkLFxuICB9XCI+XG4gIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1maWVsZFwiIGlkPVwiZGl2aXNpb25cIiBbbmdDbGFzc109XCJ7XG4gICAgICBvcGVuZWQ6IHNob3dCb3JkZXIgJiYgZHJvcGRvd25PcGVuZWQsXG4gICAgICBjbG9zZWQ6IHNob3dCb3JkZXIgJiYgIWRyb3Bkb3duT3BlbmVkLFxuICAgIH1cIiAoY2xpY2spPVwib3BlbkRyb3Bkb3duKClcIj5cbiAgICA8ZGl2ICpuZ0lmPVwic2VsZWN0ZWRWYWx1ZXMgIT09ICcnXCIgY2xhc3M9XCJzZWxlY3RlZFwiPlxuICAgICAge3sgc2VsZWN0ZWRWYWx1ZXMgfX1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ0lmPVwiIXNlbGVjdGVkSXRlbSAmJiBtdWx0aXBsZVwiIGNsYXNzPVwiZmxleFNlY3Rpb25cIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJkYXRhU2VjdGlvblwiPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwiIXNlbGVjdGVkSXRlbSAmJiBtdWx0aXBsZVwiIGNsYXNzPVwic2VsZWN0ZWQgc2VsZWN0ZWRMaXN0XCI+XG4gICAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgc2VsZWN0ZWRJdGVtIG9mIHNlbGVjdGVkSXRlbXMuc2xpY2UoMCwgMylcIiBjbGFzcz1cInNlbGVjdGVkLWl0ZW1cIj5cbiAgICAgICAgICAgIDxpbWcgKm5nSWY9XCJzZWxlY3RlZEl0ZW0/LmltYWdlXCIgY2xhc3M9XCJtdWx0aVNlbGVjdGVkLWljb24tc2l6ZVwiIFtzcmNdPVwic2VsZWN0ZWRJdGVtPy5pbWFnZVwiIGFsdD1cImltYWdlXCIgLz5cbiAgICAgICAgICAgIDxzcGFuPnt7IHNlbGVjdGVkSXRlbS5sYWJlbCB9fTwvc3Bhbj4mbmJzcDtcbiAgICAgICAgICAgIDxzcGFuIChjbGljayk9XCJ1bnNlbGVjdEl0ZW0oc2VsZWN0ZWRJdGVtKVwiIGNsYXNzPVwiY2xvc2UtaWNvblwiPiZ0aW1lczs8L3NwYW4+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInJlbWFpbmluZy1pdGVtc1wiICpuZ0lmPVwic2VsZWN0ZWRJdGVtcy5sZW5ndGggPiAzXCI+XG4gICAgICAgICAgICAre3sgc2VsZWN0ZWRJdGVtcy5sZW5ndGggLSAzIH19IG1vcmVcbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJpY29uU2VjdGlvblwiPlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxzcGFuIChjbGljayk9XCJ1bnNlbGVjdEFsbCgpXCIgKm5nSWY9XCJcbiAgICAgICAgICAgIChzZWxlY3RlZEl0ZW1zLmxlbmd0aCA+IDAgfHwgc2VsZWN0ZWRJdGVtTmFtZSAhPSAnJykgJiYgbXVsdGlwbGVcbiAgICAgICAgICAgIFwiIGNsYXNzPVwiZGVzZWxlY3RcIj4mdGltZXM7XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJmbGV4U2VjdGlvblwiPlxuICAgICAgPGRpdiBjbGFzcz1cImRhdGFTZWN0aW9uXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpbnB1dC1maWVsZFwiPlxuICAgICAgICAgIDxkaXYgKm5nSWY9XCJtdWx0aXBsZVwiPlxuICAgICAgICAgICAgPGlucHV0IGNsYXNzPVwiZHJvcGRvd25fdGV4dFwiIFsobmdNb2RlbCldPVwic2VhcmNoVGV4dFwiIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiIChrZXl1cCk9XCJzZWFyY2goJGV2ZW50KVwiIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cIiFtdWx0aXBsZVwiPlxuICAgICAgICAgICAgPGltZyAqbmdJZj1cInNlbGVjdGVkSXRlbUltYWdlXCIgY2xhc3M9XCJzZWxlY3RlZC1pY29uLXNpemVcIiBbc3JjXT1cInNlbGVjdGVkSXRlbUltYWdlXCIgYWx0PVwiaW1hZ2VcIiAvPlxuICAgICAgICAgICAgPGlucHV0IGNsYXNzPVwiZHJvcGRvd25fdGV4dFwiIFsobmdNb2RlbCldPVwic2VhcmNoVGV4dFwiIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiIFsobmdNb2RlbCldPVwic2VsZWN0ZWRJdGVtTmFtZVwiXG4gICAgICAgICAgICAoa2V5dXApPVwic2VhcmNoKCRldmVudClcIiAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImljb25TZWN0aW9uXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkb3duLWFycm93XCIgW25nQ2xhc3NdPVwieyBvcGVuZWQ6IGRyb3Bkb3duT3BlbmVkLCBjbG9zZWQ6ICFkcm9wZG93bk9wZW5lZCB9XCI+XG4gICAgICAgICAgPHN2ZyB3aWR0aD1cIjFlbVwiIHZpZXdCb3g9XCIwIDAgMjQgMjVcIiBmaWxsPVwibm9uZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiBjbGFzcz1cImRvd24tYXJyb3ctaW1nXCI+XG4gICAgICAgICAgICA8ZyBpZD1cIkRvd24gQXJyb3dcIj5cbiAgICAgICAgICAgICAgPGcgaWQ9XCJHcm91cFwiPlxuICAgICAgICAgICAgICAgIDxwYXRoIGlkPVwiUGF0aFwiIGQ9XCJNNiA5LjEzNzQxTDEyIDE1LjIyOUwxOCA5LjEzNzQxXCIgc3Ryb2tlPVwiIzhFOUFBMFwiIHN0cm9rZS13aWR0aD1cIjEuNVwiXG4gICAgICAgICAgICAgICAgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgLz5cbiAgICAgICAgICAgICAgPC9nPlxuICAgICAgICAgICAgPC9nPlxuICAgICAgICAgIDwvc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInVwLWFycm93XCIgW25nQ2xhc3NdPVwieyBvcGVuZWQ6IGRyb3Bkb3duT3BlbmVkLCBjbG9zZWQ6ICFkcm9wZG93bk9wZW5lZCB9XCI+XG4gICAgICAgICAgPHN2ZyB3aWR0aD1cIjFlbVwiIHZpZXdCb3g9XCIwIDAgMjQgMjVcIiBmaWxsPVwibm9uZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiBjbGFzcz1cInVwLWFycm93LWltZ1wiPlxuICAgICAgICAgICAgPHBhdGggZD1cIk0xOCAxNS4yMjlMMTIgOS4xMzc0TDYgMTUuMjI5XCIgc3Ryb2tlPVwiIzhFOUFBMFwiIHN0cm9rZS13aWR0aD1cIjEuNVwiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIlxuICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIiAvPlxuICAgICAgICAgIDwvc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cblxuICA8ZGl2ICNkcm9wZG93bkl0ZW1zIGNsYXNzPVwiZHJvcGRvd24taXRlbXNcIiAqbmdJZj1cImRyb3Bkb3duT3BlbmVkXCIgKHNjcm9sbCk9XCJkcm9wZG93blNjcm9sbCgkZXZlbnQpXCI+XG4gICAgPGRpdiAgKGNsaWNrKT1cImNyZWF0ZU5ldygpXCIgPlxuICAgICAgPGEgY2xhc3M9XCJjcmVhdGVfYnV0dG9uIFwiKm5nSWY9XCJzaG93Q3JlYXRlTmV3XCI+Q3JlYXRlIG5ldzwvYT5cbiAgICA8L2Rpdj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibXVsdGlwbGU7IGVsc2Ugc2luZ2xlU2VsZWN0aW9uXCI+XG4gICAgICA8YSBjbGFzcz1cIml0ZW1zIGQtYmxvY2tcIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtc1wiIChjbGljayk9XCJzZWxlY3RJdGVtKGl0ZW0pXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1pdGVtXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cIml0ZW0tZGV0YWlsc1wiPlxuICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgPGltZyAqbmdJZj1cIml0ZW0/LmltYWdlXCIgW3NyY109XCJpdGVtPy5pbWFnZVwiIGFsdD1cIkl0ZW0gSW1hZ2VcIiBjbGFzcz1cIml0ZW0taW1hZ2UgaWNvbi1zaXplXCIgLz5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJpdGVtLWxhYmVsXCI+e3sgaXRlbT8ubGFiZWwgfX08L3NwYW4+IDxiciAvPlxuICAgICAgICAgICAgICA8c21hbGwgKm5nSWY9XCJzaG93U3ViTGFiZWxcIj57eyBpdGVtPy5zdWJMYWJlbCB9fTwvc21hbGw+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzcGFjZVwiICpuZ0lmPVwiaXRlbT8ubGFiZWxcIj48L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bl9idXR0b25zXCI+XG4gICAgICAgICAgICAgIDxidXR0b24gKm5nRm9yPVwibGV0IGJ1dHRvbiBvZiBjdXN0b21CdXR0b25zXCIgKGNsaWNrKT1cImhhbmRsZUJ1dHRvbkNsaWNrKGJ1dHRvbi5hY3Rpb24pXCI+XG4gICAgICAgICAgICAgICAgPGkgW2NsYXNzXT1cImJ1dHRvbi5pY29uXCIgW3N0eWxlLmNvbG9yXT1cImJ1dHRvbi5jb2xvclwiPjwvaT5cbiAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2E+XG4gICAgPC9uZy1jb250YWluZXI+XG5cbiAgICA8bmctdGVtcGxhdGUgI3NpbmdsZVNlbGVjdGlvbj5cbiAgICAgIDxhIGNsYXNzPVwiaXRlbXMgZC1ibG9ja1wiICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zXCIgKGNsaWNrKT1cInNlbGVjdEl0ZW0oaXRlbSlcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRyb3Bkb3duLWl0ZW1cIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaXRlbS1kZXRhaWxzXCI+XG4gICAgICAgICAgICA8aW1nICpuZ0lmPVwiaXRlbT8uaW1hZ2VcIiBbc3JjXT1cIml0ZW0/LmltYWdlXCIgYWx0PVwiSXRlbSBJbWFnZVwiIGNsYXNzPVwiaXRlbS1pbWFnZSBpY29uLXNpemVcIiAvPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJpdGVtLWxhYmVsXCI+e3sgaXRlbT8ubGFiZWwgfX08L3NwYW4+PGJyIC8+XG4gICAgICAgICAgICA8c21hbGwgKm5nSWY9XCJzaG93U3ViTGFiZWxcIj57eyBpdGVtPy5zdWJMYWJlbCB9fTwvc21hbGw+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3BhY2VcIiAqbmdJZj1cIml0ZW0/LmxhYmVsXCI+PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd25fYnV0dG9uc1wiPlxuICAgICAgICAgICAgICA8YnV0dG9uICpuZ0Zvcj1cImxldCBidXR0b24gb2YgY3VzdG9tQnV0dG9uc1wiIChjbGljayk9XCJoYW5kbGVCdXR0b25DbGljayhidXR0b24uYWN0aW9uKVwiPlxuICAgICAgICAgICAgICAgIDxpIFtjbGFzc109XCJidXR0b24uaWNvblwiIFtzdHlsZS5jb2xvcl09XCJidXR0b24uY29sb3JcIj48L2k+XG4gICAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9hPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIDwvZGl2PlxuPC9kaXY+Il19

package/esm2022/lib/dropdown.model.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24ubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9kcm9wZG93bi9zcmMvbGliL2Ryb3Bkb3duLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIERyb3Bkb3duSXRlbSB7XG4gICAgdmFsdWU6IHN0cmluZztcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIGltYWdlOiBzdHJpbmc7XG4gICAgc3ViTGFiZWw/OiBzdHJpbmdcbiAgfVxuICAiXX0=

package/fesm2022/piserve-tech-drop-down.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
@@ -27,18 +27,24 @@ class DropdownComponent {
         this.showBorder = true;
         this.buttonClick = new EventEmitter();
         this.selectedItemsChange = new EventEmitter();
-        this.onScroll = new EventEmitter();
+        this.onDropdownScroll = new EventEmitter();
         this.onCreateNew = new EventEmitter();
         this.onSearch = new EventEmitter();
+        //subLabel
+        this.showSubLabel = false;
         this.dropdownOpened = false;
         this.selectedItemName = "";
         this.selectedItemImage = "";
         this.originalItems = [];
         this.searchTerm = "";
         this.initialized = false;
+        this.searchText = '';
     }
     ngOnInit() {
         this.initialize();
+    }
+    initialize() {
+        this.originalItems = this.items.slice();
         setTimeout(() => {
             if (this.selectedItems && this.selectedItems.length > 0) {
                 if (!this.multiple)
@@ -48,23 +54,16 @@ class DropdownComponent {
         const uniqueItems = this.items.filter((selected, index, self) => index === self.findIndex((t) => (t.value === selected.value)));
         this.items = uniqueItems;
     }
-    initialize() {
-        this.originalItems = this.items.slice();
-    }
     openDropdown() {
         this.dropdownOpened = !this.dropdownOpened;
     }
-    onDropdownScroll(event) {
-        if (this.onScroll) {
-            const dropdownElement = this.dropdownitems.nativeElement;
-            const scrollPosition = dropdownElement.scrollTop + dropdownElement.clientHeight;
-            const totalHeight = dropdownElement.scrollHeight;
-            if (scrollPosition >= totalHeight) {
-                this.onScroll.emit();
-            }
+    dropdownScroll(event) {
+        if (this.scrollable) {
+            this.onDropdownScroll.emit(event);
         }
     }
     selectItem(item) {
+        this.searchText = '';
         if (this.multiple) {
             if (!this.selectedItems.includes(item)) {
                 this.selectedItems.push(item);
@@ -134,11 +133,11 @@ class DropdownComponent {
         this.buttonClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { multiple: "multiple", scrollable: "scrollable", selectedItems: "selectedItems", placeholder: "placeholder", items: "items", showCreateNew: "showCreateNew", selectedValues: "selectedValues", customButtons: "customButtons", showBorder: "showBorder" }, outputs: { buttonClick: "buttonClick", selectedItemsChange: "selectedItemsChange", onScroll: "onScroll", onCreateNew: "onCreateNew", onSearch: "onSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownitems", first: true, predicate: ["dropdownItems"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{\n    opened: showBorder && dropdownOpened,\n    closed: showBorder && !dropdownOpened,\n  }\">\n  <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n      opened: showBorder && dropdownOpened,\n      closed: showBorder && !dropdownOpened,\n    }\" (click)=\"openDropdown()\">\n    <div *ngIf=\"selectedValues !== ''\" class=\"selected\">\n      {{ selectedValues }}\n    </div>\n    <div *ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div *ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n          <div *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n            <img *ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n            <span>{{ selectedItem.label }}</span>&nbsp;\n            <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">&times;</span>\n          </div>\n          <div class=\"remaining-items\" *ngIf=\"selectedItems.length > 3\">\n            +{{ selectedItems.length - 3 }} more\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div>\n          <span (click)=\"unselectAll()\" *ngIf=\"\n            (selectedItems.length > 0 || selectedItemName != '') && multiple\n            \" class=\"deselect\">&times;\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div class=\"input-field\">\n          <div *ngIf=\"multiple\">\n            <input class=\"dropdown_text\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n          </div>\n          <div *ngIf=\"!multiple\">\n            <img *ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n            <input class=\"dropdown_text\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n            (keyup)=\"search($event)\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n            <g id=\"Down Arrow\">\n              <g id=\"Group\">\n                <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n            <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #dropdownItems class=\"dropdown-items\" *ngIf=\"dropdownOpened\" (scroll)=\"onDropdownScroll($event)\">\n    <div  (click)=\"createNew()\" >\n      <a class=\"create_button \"*ngIf=\"showCreateNew\">Create new</a>\n    </div>\n    <ng-container *ngIf=\"multiple; else singleSelection\">\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <div>\n              <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n              <span class=\"item-label\">{{ item?.label }}</span>\n            </div>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-container>\n\n    <ng-template #singleSelection>\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n            <span class=\"item-label\">{{ item?.label }}</span>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-template>\n  </div>\n</div>", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:2px;border-radius:5px;font-size:small}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:2px;font-size:smaller;display:block}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:2px;margin-left:3px;margin-right:3px;outline:none;box-sizing:border-box;font-weight:500;font-family:Poppins;font-size:14px;font-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:15px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}.dropdown .dropdown-field.closed{border:1px solid #d8d8d8}.dropdown .dropdown-field.opened{border-bottom:1px solid #d8d8d8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:7px}}.dropdown .dropdown-items .create_button{text-decoration:none;line-height:41px;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{padding-left:8px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}.dropdown .dropdown-items .items:hover{background:#ebedef;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:1px #d8d8d8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.icon-size{width:25px;height:20px;margin-right:7px}.smallSpace{width:3px}.selected-icon-size{width:25px;height:20px;margin-left:10px}@media (max-width: 576px){.selected-icon-size{width:21px;height:15px;margin-right:7px;margin-bottom:1px}}.multiSelected-icon-size{width:25px;height:20px;margin-left:1px;margin-bottom:1px;margin-right:3px}.flexSection{display:flex}.dataSection{width:calc(100% - 20px)}.iconSection{width:20px;padding:1px}.down-arrow,.up-arrow,.deselect{width:20px;height:20px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.down-arrow{cursor:pointer}.down-arrow.opened{display:none}.down-arrow.closed{display:block}.up-arrow{cursor:pointer}.up-arrow.closed{display:none}.iconSection{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { multiple: "multiple", scrollable: "scrollable", selectedItems: "selectedItems", placeholder: "placeholder", items: "items", showCreateNew: "showCreateNew", selectedValues: "selectedValues", customButtons: "customButtons", showBorder: "showBorder", showSubLabel: "showSubLabel" }, outputs: { buttonClick: "buttonClick", selectedItemsChange: "selectedItemsChange", onDropdownScroll: "onDropdownScroll", onCreateNew: "onCreateNew", onSearch: "onSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownitems", first: true, predicate: ["dropdownItems"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{\n    opened: showBorder && dropdownOpened,\n    closed: showBorder && !dropdownOpened,\n  }\">\n  <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n      opened: showBorder && dropdownOpened,\n      closed: showBorder && !dropdownOpened,\n    }\" (click)=\"openDropdown()\">\n    <div *ngIf=\"selectedValues !== ''\" class=\"selected\">\n      {{ selectedValues }}\n    </div>\n    <div *ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div *ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n          <div *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n            <img *ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n            <span>{{ selectedItem.label }}</span>&nbsp;\n            <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">&times;</span>\n          </div>\n          <div class=\"remaining-items\" *ngIf=\"selectedItems.length > 3\">\n            +{{ selectedItems.length - 3 }} more\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div>\n          <span (click)=\"unselectAll()\" *ngIf=\"\n            (selectedItems.length > 0 || selectedItemName != '') && multiple\n            \" class=\"deselect\">&times;\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div class=\"input-field\">\n          <div *ngIf=\"multiple\">\n            <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n          </div>\n          <div *ngIf=\"!multiple\">\n            <img *ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n            <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n            (keyup)=\"search($event)\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n            <g id=\"Down Arrow\">\n              <g id=\"Group\">\n                <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n            <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #dropdownItems class=\"dropdown-items\" *ngIf=\"dropdownOpened\" (scroll)=\"dropdownScroll($event)\">\n    <div  (click)=\"createNew()\" >\n      <a class=\"create_button \"*ngIf=\"showCreateNew\">Create new</a>\n    </div>\n    <ng-container *ngIf=\"multiple; else singleSelection\">\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <div>\n              <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n              <span class=\"item-label\">{{ item?.label }}</span> <br />\n              <small *ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n            </div>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-container>\n\n    <ng-template #singleSelection>\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n            <span class=\"item-label\">{{ item?.label }}</span><br />\n            <small *ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-template>\n  </div>\n</div>", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:2px;border-radius:5px;font-size:small}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:2px;font-size:smaller;display:block}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:2px;margin-left:3px;margin-right:3px;outline:none;box-sizing:border-box;font-weight:500;font-family:Poppins;font-size:14px;font-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:15px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}.dropdown .dropdown-field.closed{border:1px solid #d8d8d8}.dropdown .dropdown-field.opened{border-bottom:1px solid #d8d8d8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:7px}}.dropdown .dropdown-items .create_button{text-decoration:none;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{padding-left:8px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}.dropdown .dropdown-items .items:hover{background:#ebedef;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:1px #d8d8d8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.icon-size{width:25px;height:20px;margin-right:7px}.smallSpace{width:3px}.selected-icon-size{width:25px;height:20px;margin-left:10px}@media (max-width: 576px){.selected-icon-size{width:21px;height:15px;margin-right:7px;margin-bottom:1px}}.multiSelected-icon-size{width:25px;height:20px;margin-left:1px;margin-bottom:1px;margin-right:3px}.flexSection{display:flex}.dataSection{width:calc(100% - 20px)}.iconSection{width:20px;padding:1px}.down-arrow,.up-arrow,.deselect{width:20px;height:20px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.down-arrow{cursor:pointer}.down-arrow.opened{display:none}.down-arrow.closed{display:block}.up-arrow{cursor:pointer}.up-arrow.closed{display:none}.iconSection{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-dropdown", template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{\n    opened: showBorder && dropdownOpened,\n    closed: showBorder && !dropdownOpened,\n  }\">\n  <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n      opened: showBorder && dropdownOpened,\n      closed: showBorder && !dropdownOpened,\n    }\" (click)=\"openDropdown()\">\n    <div *ngIf=\"selectedValues !== ''\" class=\"selected\">\n      {{ selectedValues }}\n    </div>\n    <div *ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div *ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n          <div *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n            <img *ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n            <span>{{ selectedItem.label }}</span>&nbsp;\n            <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">&times;</span>\n          </div>\n          <div class=\"remaining-items\" *ngIf=\"selectedItems.length > 3\">\n            +{{ selectedItems.length - 3 }} more\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div>\n          <span (click)=\"unselectAll()\" *ngIf=\"\n            (selectedItems.length > 0 || selectedItemName != '') && multiple\n            \" class=\"deselect\">&times;\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div class=\"input-field\">\n          <div *ngIf=\"multiple\">\n            <input class=\"dropdown_text\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n          </div>\n          <div *ngIf=\"!multiple\">\n            <img *ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n            <input class=\"dropdown_text\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n            (keyup)=\"search($event)\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n            <g id=\"Down Arrow\">\n              <g id=\"Group\">\n                <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n            <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #dropdownItems class=\"dropdown-items\" *ngIf=\"dropdownOpened\" (scroll)=\"onDropdownScroll($event)\">\n    <div  (click)=\"createNew()\" >\n      <a class=\"create_button \"*ngIf=\"showCreateNew\">Create new</a>\n    </div>\n    <ng-container *ngIf=\"multiple; else singleSelection\">\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <div>\n              <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n              <span class=\"item-label\">{{ item?.label }}</span>\n            </div>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-container>\n\n    <ng-template #singleSelection>\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n            <span class=\"item-label\">{{ item?.label }}</span>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-template>\n  </div>\n</div>", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:2px;border-radius:5px;font-size:small}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:2px;font-size:smaller;display:block}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:2px;margin-left:3px;margin-right:3px;outline:none;box-sizing:border-box;font-weight:500;font-family:Poppins;font-size:14px;font-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:15px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}.dropdown .dropdown-field.closed{border:1px solid #d8d8d8}.dropdown .dropdown-field.opened{border-bottom:1px solid #d8d8d8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:7px}}.dropdown .dropdown-items .create_button{text-decoration:none;line-height:41px;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{padding-left:8px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}.dropdown .dropdown-items .items:hover{background:#ebedef;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:1px #d8d8d8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.icon-size{width:25px;height:20px;margin-right:7px}.smallSpace{width:3px}.selected-icon-size{width:25px;height:20px;margin-left:10px}@media (max-width: 576px){.selected-icon-size{width:21px;height:15px;margin-right:7px;margin-bottom:1px}}.multiSelected-icon-size{width:25px;height:20px;margin-left:1px;margin-bottom:1px;margin-right:3px}.flexSection{display:flex}.dataSection{width:calc(100% - 20px)}.iconSection{width:20px;padding:1px}.down-arrow,.up-arrow,.deselect{width:20px;height:20px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.down-arrow{cursor:pointer}.down-arrow.opened{display:none}.down-arrow.closed{display:block}.up-arrow{cursor:pointer}.up-arrow.closed{display:none}.iconSection{display:flex;flex-direction:row-reverse}\n"] }]
+            args: [{ selector: "lib-dropdown", encapsulation: ViewEncapsulation.None, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{\n    opened: showBorder && dropdownOpened,\n    closed: showBorder && !dropdownOpened,\n  }\">\n  <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n      opened: showBorder && dropdownOpened,\n      closed: showBorder && !dropdownOpened,\n    }\" (click)=\"openDropdown()\">\n    <div *ngIf=\"selectedValues !== ''\" class=\"selected\">\n      {{ selectedValues }}\n    </div>\n    <div *ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div *ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n          <div *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n            <img *ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n            <span>{{ selectedItem.label }}</span>&nbsp;\n            <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">&times;</span>\n          </div>\n          <div class=\"remaining-items\" *ngIf=\"selectedItems.length > 3\">\n            +{{ selectedItems.length - 3 }} more\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div>\n          <span (click)=\"unselectAll()\" *ngIf=\"\n            (selectedItems.length > 0 || selectedItemName != '') && multiple\n            \" class=\"deselect\">&times;\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"flexSection\">\n      <div class=\"dataSection\">\n        <div class=\"input-field\">\n          <div *ngIf=\"multiple\">\n            <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n          </div>\n          <div *ngIf=\"!multiple\">\n            <img *ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n            <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n            (keyup)=\"search($event)\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"iconSection\">\n        <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n            <g id=\"Down Arrow\">\n              <g id=\"Group\">\n                <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n          <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n            <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div #dropdownItems class=\"dropdown-items\" *ngIf=\"dropdownOpened\" (scroll)=\"dropdownScroll($event)\">\n    <div  (click)=\"createNew()\" >\n      <a class=\"create_button \"*ngIf=\"showCreateNew\">Create new</a>\n    </div>\n    <ng-container *ngIf=\"multiple; else singleSelection\">\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <div>\n              <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n              <span class=\"item-label\">{{ item?.label }}</span> <br />\n              <small *ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n            </div>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-container>\n\n    <ng-template #singleSelection>\n      <a class=\"items d-block\" *ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n        <div class=\"dropdown-item\">\n          <div class=\"item-details\">\n            <img *ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n            <span class=\"item-label\">{{ item?.label }}</span><br />\n            <small *ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n            <div class=\"space\" *ngIf=\"item?.label\"></div>\n            <div class=\"dropdown_buttons\">\n              <button *ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n                <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </a>\n    </ng-template>\n  </div>\n</div>", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:2px;border-radius:5px;font-size:small}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:2px;font-size:smaller;display:block}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:2px;margin-left:3px;margin-right:3px;outline:none;box-sizing:border-box;font-weight:500;font-family:Poppins;font-size:14px;font-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;font-size:12px;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:15px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}.dropdown .dropdown-field.closed{border:1px solid #d8d8d8}.dropdown .dropdown-field.opened{border-bottom:1px solid #d8d8d8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:3px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:7px}}.dropdown .dropdown-items .create_button{text-decoration:none;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{padding-left:8px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{padding-left:8px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{padding-left:8px;font-size:small}}.dropdown .dropdown-items .items:hover{background:#ebedef;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:1px #d8d8d8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.icon-size{width:25px;height:20px;margin-right:7px}.smallSpace{width:3px}.selected-icon-size{width:25px;height:20px;margin-left:10px}@media (max-width: 576px){.selected-icon-size{width:21px;height:15px;margin-right:7px;margin-bottom:1px}}.multiSelected-icon-size{width:25px;height:20px;margin-left:1px;margin-bottom:1px;margin-right:3px}.flexSection{display:flex}.dataSection{width:calc(100% - 20px)}.iconSection{width:20px;padding:1px}.down-arrow,.up-arrow,.deselect{width:20px;height:20px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.down-arrow{cursor:pointer}.down-arrow.opened{display:none}.down-arrow.closed{display:block}.up-arrow{cursor:pointer}.up-arrow.closed{display:none}.iconSection{display:flex;flex-direction:row-reverse}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { multiple: [{
                 type: Input
             }], scrollable: [{
@@ -161,12 +160,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], selectedItemsChange: [{
                 type: Output
-            }], onScroll: [{
+            }], onDropdownScroll: [{
                 type: Output
             }], onCreateNew: [{
                 type: Output
             }], onSearch: [{
                 type: Output
+            }], showSubLabel: [{
+                type: Input
             }], dropdownitems: [{
                 type: ViewChild,
                 args: ["dropdownItems"]

package/fesm2022/piserve-tech-drop-down.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"piserve-tech-drop-down.mjs","sources":["../../../projects/dropdown/src/lib/dropdown.service.ts","../../../projects/dropdown/src/lib/dropdown.component.ts","../../../projects/dropdown/src/lib/dropdown.component.html","../../../projects/dropdown/src/lib/dropdown.module.ts","../../../projects/dropdown/src/public-api.ts","../../../projects/dropdown/src/piserve-tech-drop-down.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DropdownService {\n\n constructor() { }\n}\n","import {\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from \"@angular/core\";\n\ninterface DropdownItem {\n value: string;\n label: string;\n image: string;\n}\n\n@Component({\n selector: \"lib-dropdown\",\n templateUrl: \"./dropdown.component.html\",\n styleUrls: [\"./dropdown.component.scss\"],\n})\nexport class DropdownComponent implements OnInit {\n\n @Input() multiple!: boolean;\n @Input() scrollable!: boolean;\n @Input() selectedItems: any[] = [];\n @Input() placeholder: String = \"\";\n @Input() items: DropdownItem[] = [];\n @Input() showCreateNew!: boolean;\n @Input() selectedValues: string = '';\n @Input() customButtons: {\n label: string;\n icon: string;\n color: string;\n action: () => void;\n }[] = [];\n @Input() showBorder: boolean = true;\n @Output() buttonClick: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() selectedItemsChange: EventEmitter<any[]> = new EventEmitter<\n any[]\n >();\n @Output() onScroll: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() onCreateNew: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();\n\n dropdownOpened: boolean = false;\n selectedItem: any;\n selectedItemName: string = \"\";\n selectedItemImage: string = \"\";\n originalItems: DropdownItem[] = [];\n searchTerm: string = \"\";\n initialized: boolean = false;\n\n constructor() { }\n\n ngOnInit(): void {\n this.initialize();\n setTimeout(() => {\n if (this.selectedItems && this.selectedItems.length > 0) {\n if (!this.multiple) this.selectItem(this.selectedItems[0]);\n }\n }, 1000);\n const uniqueItems = this.items.filter((selected, index, self) =>\n index === self.findIndex((t) => (\n t.value === selected.value\n ))\n );\n this.items = uniqueItems;\n }\n\n initialize() {\n this.originalItems = this.items.slice();\n }\n\n openDropdown() {\n this.dropdownOpened = !this.dropdownOpened;\n }\n\n @ViewChild(\"dropdownItems\") dropdownitems!: ElementRef;\n onDropdownScroll(event: any): void {\n if (this.onScroll) {\n const dropdownElement: HTMLElement = this.dropdownitems.nativeElement;\n const scrollPosition =\n dropdownElement.scrollTop + dropdownElement.clientHeight;\n const totalHeight = dropdownElement.scrollHeight;\n\n if (scrollPosition >= totalHeight) {\n this.onScroll.emit();\n }\n }\n }\n\n selectItem(item: any) { \n if (this.multiple) {\n if (!this.selectedItems.includes(item)) {\n this.selectedItems.push(item);\n this.selectedItemsChange.emit(this.selectedItems);\n } else {\n this.selectedItems = this.selectedItems.filter(\n (selected: any) => selected !== item\n );\n this.selectedItemsChange.emit(this.selectedItems);\n }\n } else {\n this.selectedItems[0] = item;\n this.selectedItemName = this.selectedItems[0]?.label;\n this.selectedItemImage = this.selectedItems[0]?.image;\n this.dropdownOpened = false;\n this.selectedItemsChange.emit(this.selectedItems); \n }\n }\n\n unselectItem(item: any): void {\n this.selectedItems = this.selectedItems.filter(\n (selected: any) => selected !== item\n );\n this.selectedItemsChange.emit(this.selectedItems);\n }\n\n unselectAll() {\n this.selectedItems = [];\n this.selectedItemName = \"\";\n this.selectedItemsChange.emit(this.selectedItems);\n // this.items = this.originalItems.slice();\n }\n\n @ViewChild(\"dropdown\") dropdown!: ElementRef;\n @HostListener(\"document:click\", [\"$event\"])\n onDocumentClick(event: Event): void {\n const isClickInsideDropdown = this.dropdown.nativeElement.contains(\n event.target\n );\n if (!isClickInsideDropdown) {\n this.dropdownOpened = false;\n }\n }\n\n createNew() {\n this.onCreateNew.emit();\n this.dropdownOpened = false;\n }\n\n search(event: any): void {\n const keyCode = event.keyCode;\n this.dropdownOpened = true;\n if (keyCode === 8 && !this.multiple) {\n this.selectedItems = [];\n this.selectedItemName = \"\";\n this.selectedItemImage = \"\";\n this.items = this.originalItems.slice();\n this.selectedItemsChange.emit(this.selectedItems);\n } else {\n this.searchTerm = event.target.value.toLowerCase();\n if (!this.onSearch.observers.length) {\n if (this.searchTerm.trim() === \"\") {\n this.items = this.originalItems.slice();\n } else {\n this.items = this.originalItems.filter(\n (item) =>\n item.label.toLowerCase().includes(this.searchTerm) \|\|\n (item.value && item.value.toLowerCase().includes(this.searchTerm))\n );\n }\n } else {\n this.onSearch.emit(this.searchTerm);\n }\n }\n }\n\n handleButtonClick(action: () => void): void {\n action();\n this.buttonClick.emit();\n }\n}\n","<div #dropdown class=\"dropdown\" [ngClass]=\"{\n opened: showBorder && dropdownOpened,\n closed: showBorder && !dropdownOpened,\n }\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n opened: showBorder && dropdownOpened,\n closed: showBorder && !dropdownOpened,\n }\" (click)=\"openDropdown()\">\n <div ngIf=\"selectedValues !== ''\" class=\"selected\">\n {{ selectedValues }}\n </div>\n <div ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n <div class=\"dataSection\">\n <div ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n <div ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n <img ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n <span>{{ selectedItem.label }}</span> \n <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">×</span>\n </div>\n <div class=\"remaining-items\" ngIf=\"selectedItems.length > 3\">\n +{{ selectedItems.length - 3 }} more\n </div>\n </div>\n </div>\n <div class=\"iconSection\">\n <div>\n <span (click)=\"unselectAll()\" ngIf=\"\n (selectedItems.length > 0 \|\| selectedItemName != '') && multiple\n \" class=\"deselect\">×\n </span>\n </div>\n </div>\n </div>\n <div class=\"flexSection\">\n <div class=\"dataSection\">\n <div class=\"input-field\">\n <div ngIf=\"multiple\">\n <input class=\"dropdown_text\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n </div>\n <div ngIf=\"!multiple\">\n <img ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n <input class=\"dropdown_text\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n </div>\n </div>\n <div class=\"iconSection\">\n <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div #dropdownItems class=\"dropdown-items\" ngIf=\"dropdownOpened\" (scroll)=\"onDropdownScroll($event)\">\n <div (click)=\"createNew()\" >\n <a class=\"create_button \"ngIf=\"showCreateNew\">Create new</a>\n </div>\n <ng-container ngIf=\"multiple; else singleSelection\">\n <a class=\"items d-block\" ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n <div class=\"dropdown-item\">\n <div class=\"item-details\">\n <div>\n <img ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n <span class=\"item-label\">{{ item?.label }}</span>\n </div>\n <div class=\"space\" ngIf=\"item?.label\"></div>\n <div class=\"dropdown_buttons\">\n <button ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n </button>\n </div>\n </div>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a class=\"items d-block\" ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n <div class=\"dropdown-item\">\n <div class=\"item-details\">\n <img ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n <span class=\"item-label\">{{ item?.label }}</span>\n <div class=\"space\" ngIf=\"item?.label\"></div>\n <div class=\"dropdown_buttons\">\n <button ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n </button>\n </div>\n </div>\n </div>\n </a>\n </ng-template>\n </div>\n</div>","import { NgModule } from '@angular/core';\nimport { DropdownComponent } from './dropdown.component';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\n\n\n@NgModule({\n declarations: [\n DropdownComponent\n ],\n imports: [\n FormsModule,\n CommonModule,\n ],\n exports: [\n DropdownComponent\n ]\n})\nexport class DropdownModule { }\n","/\n * Public API Surface of dropdown\n /\n\nexport from './lib/dropdown.service';\nexport * from './lib/dropdown.component';\nexport * from './lib/dropdown.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"piserve-tech-drop-down.mjs","sources":["../../../projects/dropdown/src/lib/dropdown.service.ts","../../../projects/dropdown/src/lib/dropdown.component.ts","../../../projects/dropdown/src/lib/dropdown.component.html","../../../projects/dropdown/src/lib/dropdown.module.ts","../../../projects/dropdown/src/public-api.ts","../../../projects/dropdown/src/piserve-tech-drop-down.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DropdownService {\n\n constructor() { }\n}\n","import {\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from \"@angular/core\";\nimport { DropdownItem } from \"./dropdown.model\";\n\n\n@Component({\n selector: \"lib-dropdown\",\n templateUrl: \"./dropdown.component.html\",\n styleUrls: [\"./dropdown.component.scss\"],\n encapsulation: ViewEncapsulation.None\n})\nexport class DropdownComponent implements OnInit {\n\n @Input() multiple!: boolean;\n @Input() scrollable!: boolean;\n @Input() selectedItems: any[] = [];\n @Input() placeholder: String = \"\";\n @Input() items: DropdownItem[] = [];\n @Input() showCreateNew!: boolean;\n @Input() selectedValues: string = '';\n @Input() customButtons: {\n label: string;\n icon: string;\n color: string;\n action: () => void;\n }[] = [];\n @Input() showBorder: boolean = true;\n @Output() buttonClick: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() selectedItemsChange: EventEmitter<any[]> = new EventEmitter<\n any[]\n >();\n @Output() onDropdownScroll: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() onCreateNew: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();\n //subLabel\n @Input() showSubLabel: boolean = false;\n\n dropdownOpened: boolean = false;\n selectedItem: any;\n selectedItemName: string = \"\";\n selectedItemImage: string = \"\";\n originalItems: DropdownItem[] = [];\n searchTerm: string = \"\";\n initialized: boolean = false;\n searchText: string = '';\n \n constructor() { }\n\n ngOnInit(): void {\n this.initialize(); \n }\n\n initialize() {\n this.originalItems = this.items.slice();\n setTimeout(() => {\n if (this.selectedItems && this.selectedItems.length > 0) {\n if (!this.multiple) this.selectItem(this.selectedItems[0]);\n }\n }, 1000);\n const uniqueItems = this.items.filter((selected, index, self) =>\n index === self.findIndex((t) => (\n t.value === selected.value\n ))\n );\n \n this.items = uniqueItems;\n }\n\n openDropdown() {\n this.dropdownOpened = !this.dropdownOpened;\n }\n\n @ViewChild(\"dropdownItems\") dropdownitems!: ElementRef<any>;\n dropdownScroll(event: any): void { \n if (this.scrollable) {\n this.onDropdownScroll.emit(event);\n }\n }\n\n selectItem(item: any) { \n this.searchText = '';\n if (this.multiple) {\n if (!this.selectedItems.includes(item)) {\n this.selectedItems.push(item);\n this.selectedItemsChange.emit(this.selectedItems);\n } else {\n this.selectedItems = this.selectedItems.filter(\n (selected: any) => selected !== item\n );\n this.selectedItemsChange.emit(this.selectedItems);\n }\n } else {\n this.selectedItems[0] = item;\n this.selectedItemName = this.selectedItems[0]?.label;\n this.selectedItemImage = this.selectedItems[0]?.image;\n this.dropdownOpened = false;\n this.selectedItemsChange.emit(this.selectedItems); \n }\n }\n\n unselectItem(item: any): void {\n this.selectedItems = this.selectedItems.filter(\n (selected: any) => selected !== item\n );\n this.selectedItemsChange.emit(this.selectedItems);\n }\n\n unselectAll() {\n this.selectedItems = [];\n this.selectedItemName = \"\";\n this.selectedItemsChange.emit(this.selectedItems);\n // this.items = this.originalItems.slice();\n }\n\n @ViewChild(\"dropdown\") dropdown!: ElementRef;\n @HostListener(\"document:click\", [\"$event\"])\n onDocumentClick(event: Event): void {\n const isClickInsideDropdown = this.dropdown.nativeElement.contains(\n event.target\n );\n if (!isClickInsideDropdown) {\n this.dropdownOpened = false;\n }\n }\n\n createNew() {\n this.onCreateNew.emit();\n this.dropdownOpened = false;\n }\n\n search(event: any): void {\n const keyCode = event.keyCode;\n this.dropdownOpened = true;\n if (keyCode === 8 && !this.multiple) {\n this.selectedItems = [];\n this.selectedItemName = \"\";\n this.selectedItemImage = \"\";\n this.items = this.originalItems.slice();\n this.selectedItemsChange.emit(this.selectedItems);\n } else {\n this.searchTerm = event.target.value.toLowerCase();\n if (!this.onSearch.observers.length) {\n if (this.searchTerm.trim() === \"\") {\n this.items = this.originalItems.slice();\n } else {\n this.items = this.originalItems.filter(\n (item) =>\n item.label.toLowerCase().includes(this.searchTerm) \|\|\n (item.value && item.value.toLowerCase().includes(this.searchTerm))\n );\n }\n } else {\n this.onSearch.emit(this.searchTerm);\n }\n }\n }\n\n handleButtonClick(action: () => void): void {\n action();\n this.buttonClick.emit();\n }\n}\n","<div #dropdown class=\"dropdown\" [ngClass]=\"{\n opened: showBorder && dropdownOpened,\n closed: showBorder && !dropdownOpened,\n }\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{\n opened: showBorder && dropdownOpened,\n closed: showBorder && !dropdownOpened,\n }\" (click)=\"openDropdown()\">\n <div ngIf=\"selectedValues !== ''\" class=\"selected\">\n {{ selectedValues }}\n </div>\n <div ngIf=\"!selectedItem && multiple\" class=\"flexSection\">\n <div class=\"dataSection\">\n <div ngIf=\"!selectedItem && multiple\" class=\"selected selectedList\">\n <div ngFor=\"let selectedItem of selectedItems.slice(0, 3)\" class=\"selected-item\">\n <img ngIf=\"selectedItem?.image\" class=\"multiSelected-icon-size\" [src]=\"selectedItem?.image\" alt=\"image\" />\n <span>{{ selectedItem.label }}</span> \n <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\">×</span>\n </div>\n <div class=\"remaining-items\" ngIf=\"selectedItems.length > 3\">\n +{{ selectedItems.length - 3 }} more\n </div>\n </div>\n </div>\n <div class=\"iconSection\">\n <div>\n <span (click)=\"unselectAll()\" ngIf=\"\n (selectedItems.length > 0 \|\| selectedItemName != '') && multiple\n \" class=\"deselect\">×\n </span>\n </div>\n </div>\n </div>\n <div class=\"flexSection\">\n <div class=\"dataSection\">\n <div class=\"input-field\">\n <div ngIf=\"multiple\">\n <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" (keyup)=\"search($event)\" />\n </div>\n <div ngIf=\"!multiple\">\n <img ngIf=\"selectedItemImage\" class=\"selected-icon-size\" [src]=\"selectedItemImage\" alt=\"image\" />\n <input class=\"dropdown_text\" [(ngModel)]=\"searchText\" [placeholder]=\"placeholder\" [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n </div>\n </div>\n <div class=\"iconSection\">\n <div class=\"down-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"down-arrow-img\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path id=\"Path\" d=\"M6 9.13741L12 15.229L18 9.13741\" stroke=\"#8E9AA0\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\">\n <svg width=\"1em\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div #dropdownItems class=\"dropdown-items\" ngIf=\"dropdownOpened\" (scroll)=\"dropdownScroll($event)\">\n <div (click)=\"createNew()\" >\n <a class=\"create_button \"ngIf=\"showCreateNew\">Create new</a>\n </div>\n <ng-container ngIf=\"multiple; else singleSelection\">\n <a class=\"items d-block\" ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n <div class=\"dropdown-item\">\n <div class=\"item-details\">\n <div>\n <img ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n <span class=\"item-label\">{{ item?.label }}</span> <br />\n <small ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n </div>\n <div class=\"space\" ngIf=\"item?.label\"></div>\n <div class=\"dropdown_buttons\">\n <button ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n </button>\n </div>\n </div>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a class=\"items d-block\" ngFor=\"let item of items\" (click)=\"selectItem(item)\">\n <div class=\"dropdown-item\">\n <div class=\"item-details\">\n <img ngIf=\"item?.image\" [src]=\"item?.image\" alt=\"Item Image\" class=\"item-image icon-size\" />\n <span class=\"item-label\">{{ item?.label }}</span><br />\n <small ngIf=\"showSubLabel\">{{ item?.subLabel }}</small>\n <div class=\"space\" ngIf=\"item?.label\"></div>\n <div class=\"dropdown_buttons\">\n <button ngFor=\"let button of customButtons\" (click)=\"handleButtonClick(button.action)\">\n <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\n </button>\n </div>\n </div>\n </div>\n </a>\n </ng-template>\n </div>\n</div>","import { NgModule } from '@angular/core';\nimport { DropdownComponent } from './dropdown.component';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\n\n\n@NgModule({\n declarations: [\n DropdownComponent\n ],\n imports: [\n FormsModule,\n CommonModule,\n ],\n exports: [\n DropdownComponent\n ]\n})\nexport class DropdownModule { }\n","/\n * Public API Surface of dropdown\n /\n\nexport from './lib/dropdown.service';\nexport * from './lib/dropdown.component';\nexport * from './lib/dropdown.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;MAKa,eAAe,CAAA;AAE1B,IAAA,WAAA,GAAA,GAAiB;+GAFN,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;AAAf,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,cAFd,MAAM,EAAA,CAAA,CAAA,EAAA;;4FAEP,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA,CAAA;;;MCgBY,iBAAiB,CAAA;AAmC5B,IAAA,WAAA,GAAA;QA/BS,IAAa,CAAA,aAAA,GAAU,EAAE,CAAC;QAC1B,IAAW,CAAA,WAAA,GAAW,EAAE,CAAC;QACzB,IAAK,CAAA,KAAA,GAAmB,EAAE,CAAC;QAE3B,IAAc,CAAA,cAAA,GAAW,EAAE,CAAC;QAC5B,IAAa,CAAA,aAAA,GAKhB,EAAE,CAAC;QACA,IAAU,CAAA,UAAA,GAAY,IAAI,CAAC;AAC1B,QAAA,IAAA,CAAA,WAAW,GAAwB,IAAI,YAAY,EAAS,CAAC;AAC7D,QAAA,IAAA,CAAA,mBAAmB,GAAwB,IAAI,YAAY,EAElE,CAAC;AACM,QAAA,IAAA,CAAA,gBAAgB,GAAwB,IAAI,YAAY,EAAS,CAAC;AAClE,QAAA,IAAA,CAAA,WAAW,GAAwB,IAAI,YAAY,EAAS,CAAC;AAC7D,QAAA,IAAA,CAAA,QAAQ,GAAyB,IAAI,YAAY,EAAU,CAAC;;QAE7D,IAAY,CAAA,YAAA,GAAY,KAAK,CAAC;QAEvC,IAAc,CAAA,cAAA,GAAY,KAAK,CAAC;QAEhC,IAAgB,CAAA,gBAAA,GAAW,EAAE,CAAC;QAC9B,IAAiB,CAAA,iBAAA,GAAW,EAAE,CAAC;QAC/B,IAAa,CAAA,aAAA,GAAmB,EAAE,CAAC;QACnC,IAAU,CAAA,UAAA,GAAW,EAAE,CAAC;QACxB,IAAW,CAAA,WAAA,GAAY,KAAK,CAAC;QAC7B,IAAU,CAAA,UAAA,GAAW,EAAE,CAAC;KAEP;IAEjB,QAAQ,GAAA;QACN,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,UAAU,GAAA;QACR,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACxC,UAAU,CAAC,MAAK;YACd,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;gBACvD,IAAI,CAAC,IAAI,CAAC,QAAQ;oBAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAC5D,aAAA;SACF,EAAE,IAAI,CAAC,CAAC;AACT,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAC1D,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MACzB,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAC3B,CAAC,CACH,CAAC;AAEF,QAAA,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;KAC1B;IAED,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;AAGD,IAAA,cAAc,CAAC,KAAU,EAAA;QACvB,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACrC,SAAA;KACF;AAED,IAAA,UAAU,CAAC,IAAS,EAAA;AAClB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACtC,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC9B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACnD,aAAA;AAAM,iBAAA;AACL,gBAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAC5C,CAAC,QAAa,KAAK,QAAQ,KAAK,IAAI,CACrC,CAAC;gBACF,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACnD,aAAA;AACF,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;YACrD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;AACtD,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACnD,SAAA;KACF;AAED,IAAA,YAAY,CAAC,IAAS,EAAA;AACpB,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAC5C,CAAC,QAAa,KAAK,QAAQ,KAAK,IAAI,CACrC,CAAC;QACF,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACnD;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;KAEnD;AAID,IAAA,eAAe,CAAC,KAAY,EAAA;AAC1B,QAAA,MAAM,qBAAqB,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAChE,KAAK,CAAC,MAAM,CACb,CAAC;QACF,IAAI,CAAC,qBAAqB,EAAE;AAC1B,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;AAC7B,SAAA;KACF;IAED,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;AAED,IAAA,MAAM,CAAC,KAAU,EAAA;AACf,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9B,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACnC,YAAA,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;AAC3B,YAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;YACxC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACnD,SAAA;AAAM,aAAA;YACL,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,EAAE;gBACnC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;AACzC,iBAAA;AAAM,qBAAA;oBACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CACpC,CAAC,IAAI,KACH,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;AAClD,yBAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CACrE,CAAC;AACH,iBAAA;AACF,aAAA;AAAM,iBAAA;gBACL,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACrC,aAAA;AACF,SAAA;KACF;AAED,IAAA,iBAAiB,CAAC,MAAkB,EAAA;AAClC,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;+GArJU,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,gxBCpB9B,0pKA6GM,EAAA,MAAA,EAAA,CAAA,2oIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;4FDzFO,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;+BACE,cAAc,EAAA,aAAA,EAGT,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,0pKAAA,EAAA,MAAA,EAAA,CAAA,2oIAAA,CAAA,EAAA,CAAA;0EAI5B,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBAMG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACI,WAAW,EAAA,CAAA;sBAApB,MAAM;gBACG,mBAAmB,EAAA,CAAA;sBAA5B,MAAM;gBAGG,gBAAgB,EAAA,CAAA;sBAAzB,MAAM;gBACG,WAAW,EAAA,CAAA;sBAApB,MAAM;gBACG,QAAQ,EAAA,CAAA;sBAAjB,MAAM;gBAEE,YAAY,EAAA,CAAA;sBAApB,KAAK;gBAqCsB,aAAa,EAAA,CAAA;sBAAxC,SAAS;uBAAC,eAAe,CAAA;gBA0CH,QAAQ,EAAA,CAAA;sBAA9B,SAAS;uBAAC,UAAU,CAAA;gBAErB,eAAe,EAAA,CAAA;sBADd,YAAY;uBAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAA;;;MEzG/B,cAAc,CAAA;+GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAd,cAAc,EAAA,YAAA,EAAA,CAVvB,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAGjB,WAAW;AACX,YAAA,YAAY,aAGZ,iBAAiB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAPvB,WAAW;YACX,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAMH,cAAc,EAAA,UAAA,EAAA,CAAA;kBAZ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,iBAAiB;AAClB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,WAAW;wBACX,YAAY;AACb,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,iBAAiB;AAClB,qBAAA;AACF,iBAAA,CAAA;;;AClBD;;AAEG;;ACFH;;AAEG;;;;"}

package/lib/dropdown.component.d.ts CHANGED Viewed

@@ -1,10 +1,6 @@
 import { ElementRef, EventEmitter, OnInit } from "@angular/core";
+import { DropdownItem } from "./dropdown.model";
 import * as i0 from "@angular/core";
-interface DropdownItem {
-    value: string;
-    label: string;
-    image: string;
-}
 export declare class DropdownComponent implements OnInit {
     multiple: boolean;
     scrollable: boolean;
@@ -22,9 +18,10 @@ export declare class DropdownComponent implements OnInit {
     showBorder: boolean;
     buttonClick: EventEmitter<Event>;
     selectedItemsChange: EventEmitter<any[]>;
-    onScroll: EventEmitter<Event>;
+    onDropdownScroll: EventEmitter<Event>;
     onCreateNew: EventEmitter<Event>;
     onSearch: EventEmitter<string>;
+    showSubLabel: boolean;
     dropdownOpened: boolean;
     selectedItem: any;
     selectedItemName: string;
@@ -32,12 +29,13 @@ export declare class DropdownComponent implements OnInit {
     originalItems: DropdownItem[];
     searchTerm: string;
     initialized: boolean;
+    searchText: string;
     constructor();
     ngOnInit(): void;
     initialize(): void;
     openDropdown(): void;
-    dropdownitems: ElementRef;
-    onDropdownScroll(event: any): void;
+    dropdownitems: ElementRef<any>;
+    dropdownScroll(event: any): void;
     selectItem(item: any): void;
     unselectItem(item: any): void;
     unselectAll(): void;
@@ -47,6 +45,5 @@ export declare class DropdownComponent implements OnInit {
     search(event: any): void;
     handleButtonClick(action: () => void): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "lib-dropdown", never, { "multiple": { "alias": "multiple"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "items": { "alias": "items"; "required": false; }; "showCreateNew": { "alias": "showCreateNew"; "required": false; }; "selectedValues": { "alias": "selectedValues"; "required": false; }; "customButtons": { "alias": "customButtons"; "required": false; }; "showBorder": { "alias": "showBorder"; "required": false; }; }, { "buttonClick": "buttonClick"; "selectedItemsChange": "selectedItemsChange"; "onScroll": "onScroll"; "onCreateNew": "onCreateNew"; "onSearch": "onSearch"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "lib-dropdown", never, { "multiple": { "alias": "multiple"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "items": { "alias": "items"; "required": false; }; "showCreateNew": { "alias": "showCreateNew"; "required": false; }; "selectedValues": { "alias": "selectedValues"; "required": false; }; "customButtons": { "alias": "customButtons"; "required": false; }; "showBorder": { "alias": "showBorder"; "required": false; }; "showSubLabel": { "alias": "showSubLabel"; "required": false; }; }, { "buttonClick": "buttonClick"; "selectedItemsChange": "selectedItemsChange"; "onDropdownScroll": "onDropdownScroll"; "onCreateNew": "onCreateNew"; "onSearch": "onSearch"; }, never, never, false, never>;
 }
-export {};

package/lib/dropdown.model.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export interface DropdownItem {
+    value: string;
+    label: string;
+    image: string;
+    subLabel?: string;
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@piserve-tech/drop-down",
-  "version": "1.2.59",
+  "version": "1.2.60",
   "peerDependencies": {
     "@angular/common": "^16.2.0",
     "@angular/core": "^16.2.0"