@piserve-tech/drop-down 1.2.110 → 1.2.111

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

@@ -0,0 +1,259 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { v4 } from 'uuid';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class DropdownService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class DropdownComponent {
+    set items(value) {
+        this._items = value || [];
+        this.originalItems = this._items.slice();
+        this._filteredItems = this._items.slice(); // use a separate variable for rendering
+        this.cdr.markForCheck();
+    }
+    get items() {
+        return this._items;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.selectedItems = [];
+        this.placeholder = "";
+        this.selectedValues = "";
+        this.customButtons = [];
+        this.showBorder = true;
+        this.disable = false;
+        this.buttonClick = new EventEmitter();
+        this.selectedItemsChange = new EventEmitter();
+        this.onDropdownScroll = new EventEmitter();
+        this.onCreateNew = new EventEmitter();
+        this.onSearch = new EventEmitter();
+        //subLabel
+        this.showSubLabel = false;
+        this.dropdownId = v4();
+        this.dropdownOpened = false;
+        this.selectedItemName = "";
+        this.selectedItemImage = "";
+        this.originalItems = [];
+        this.searchTerm = "";
+        this.initialized = false;
+        this.searchText = "";
+        this._filteredItems = [];
+        this._items = [];
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        if (changes["selectedItems"]) {
+            const item = changes["selectedItems"]["currentValue"];
+            this.selectedItems = item;
+            this.selectedItemName = this.selectedItems[0]?.label;
+            this.selectedItemImage = this.selectedItems[0]?.image;
+        }
+        if (changes["items"]) {
+            this.initialize();
+            this.originalItems = this.items.slice();
+            this.cdr.markForCheck();
+        }
+        if (changes["selectedValues"]) {
+            this.selectedItemName = this.selectedValues;
+        }
+    }
+    initialize() {
+        setTimeout(() => {
+            if (this.selectedItems && this.selectedItems.length > 0) {
+                if (!this.multiple) {
+                    this.searchText = "";
+                    this.selectedItemName = this.selectedItems[0]?.label;
+                    this.selectedItemImage = this.selectedItems[0]?.image;
+                }
+            }
+        }, 1000);
+        const uniqueItems = this.items.filter((selected, index, self) => index === self.findIndex((t) => t.value === selected.value));
+        this.items = uniqueItems;
+    }
+    openDropdown() {
+        this.dropdownOpened = !this.dropdownOpened;
+        const inputId = `searchInput-${this.dropdownId}`;
+        const inputEl = document.getElementById(inputId);
+        setTimeout(() => {
+            inputEl?.focus();
+        }, 0);
+    }
+    dropdownScroll(event) {
+        if (this.onDropdownScroll.observed) {
+            this.onDropdownScroll.emit(event);
+            this.cdr.markForCheck();
+        }
+    }
+    selectItem(item) {
+        if (this.multiple) {
+            if (!this.selectedItems.includes(item)) {
+                this.selectedItems.push(item);
+                this.selectedItemsChange.emit(this.selectedItems);
+            }
+            else {
+                this.selectedItems = this.selectedItems.filter((selected) => selected !== item);
+                this.selectedItemsChange.emit(this.selectedItems);
+            }
+        }
+        else {
+            this.searchText = "";
+            this.selectedItems[0] = item;
+            this.selectedItemName = this.selectedItems[0]?.label;
+            this.selectedItemImage = this.selectedItems[0]?.image;
+            this.dropdownOpened = false;
+            this.selectedItemsChange.emit(this.selectedItems);
+        }
+    }
+    unselectItem(item) {
+        this.selectedItems = this.selectedItems.filter((selected) => selected !== item);
+        this.selectedItemsChange.emit(this.selectedItems);
+    }
+    unselectAll() {
+        this.selectedItems = [];
+        this.selectedItemName = "";
+        this.selectedItemImage = "";
+        this.selectedItemsChange.emit(this.selectedItems);
+        this.cdr.markForCheck();
+    }
+    onDocumentClick(event) {
+        const isClickInsideDropdown = this.dropdown.nativeElement.contains(event.target);
+        if (!isClickInsideDropdown) {
+            this.dropdownOpened = false;
+        }
+    }
+    createNew() {
+        this.onCreateNew.emit();
+        this.dropdownOpened = false;
+    }
+    search(event) {
+        const keyCode = event.keyCode;
+        this.dropdownOpened = true;
+        this.searchTerm = event.target.value.toLowerCase();
+        if (!this.onSearch.observed) {
+            if (this.searchTerm.trim() === "") {
+                if (!this.multiple) {
+                    this.unselectAll();
+                }
+                this._filteredItems = this.originalItems.slice();
+            }
+            else {
+                const lowerCaseSearchTerm = this.searchTerm.toLowerCase();
+                this._filteredItems = this.originalItems.filter((item) => item.label.toLowerCase().includes(lowerCaseSearchTerm) ||
+                    (item.value &&
+                        item.value.toLowerCase().includes(lowerCaseSearchTerm)));
+            }
+        }
+        else {
+            this.onSearch.emit(this.searchTerm);
+        }
+    }
+    handleButtonClick(action) {
+        action();
+        this.buttonClick.emit();
+    }
+    highlightMatch(text) {
+        const search = this.searchText?.trim() || this.searchTerm?.trim();
+        if (!search || !text)
+            return text;
+        const index = text.toLowerCase().indexOf(search.toLowerCase());
+        if (index === -1)
+            return text;
+        const before = text.substring(0, index);
+        const match = text.substring(index, index + search.length);
+        const after = text.substring(index + search.length);
+        return `${before}<span class="highlight-text">${match}</span>${after}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], 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", selectedItems: "selectedItems", placeholder: "placeholder", showCreateNew: "showCreateNew", selectedValues: "selectedValues", customButtons: "customButtons", showBorder: "showBorder", disable: "disable", showSubLabel: "showSubLabel", items: "items" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  #dropdown\r\n  class=\"dropdown\"\r\n  [ngClass]=\"{\r\n    opened: showBorder && dropdownOpened,\r\n    closed: showBorder && !dropdownOpened,\r\n    'dropdown-disabled': disable\r\n  }\"\r\n>\r\n  <div\r\n    class=\"dropdown-field\"\r\n    id=\"division\"\r\n    [ngClass]=\"{\r\n      opened: showBorder && dropdownOpened,\r\n      closed: showBorder && !dropdownOpened,\r\n    }\"\r\n    (click)=\"openDropdown()\"\r\n  >\r\n    <!-- <div *ngIf=\"selectedValues !== '' && !selectedItemName\" class=\"selected\">\r\n      {{ selectedValues }}\r\n    </div> -->\r\n    <div class=\"flexSection\">\r\n      <div class=\"dataSection\" *ngIf=\"!selectedItem && multiple\">\r\n        <div class=\"selected selectedList\">\r\n          <ng-container *ngFor=\"let selectedItem of selectedItems\">\r\n            <div class=\"selected-item\">\r\n              <img\r\n                *ngIf=\"selectedItem?.image\"\r\n                class=\"multiSelected-icon-size\"\r\n                [src]=\"selectedItem?.image\"\r\n                alt=\"image\"\r\n              />\r\n              <span>{{ selectedItem.label }}</span>\r\n              <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\"\r\n                >&times;</span\r\n              >\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"input-field\">\r\n            <input\r\n              [id]=\"'searchInput-' + dropdownId\"\r\n              class=\"dropdown_text inline-input\"\r\n              [(ngModel)]=\"searchText\"\r\n              [placeholder]=\"placeholder\"\r\n              (input)=\"search($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"dataSection single-input\" *ngIf=\"!multiple\">\r\n        <div class=\"input-field\">\r\n          <div class=\"input-with-icon\">\r\n            <img\r\n              *ngIf=\"selectedItemImage\"\r\n              class=\"selected-icon-size\"\r\n              [src]=\"selectedItemImage\"\r\n              alt=\"image\"\r\n            />\r\n            <input\r\n              [id]=\"'searchInput-' + dropdownId\"\r\n              class=\"dropdown_text inline-input\"\r\n              [placeholder]=\"placeholder\"\r\n              [(ngModel)]=\"selectedItemName\"\r\n              (input)=\"search($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iconSection\">\r\n        <div class=\"dropdown-icons-container\">\r\n          <div>\r\n            <span\r\n              (click)=\"unselectAll()\"\r\n              *ngIf=\"selectedItems.length > 0 && multiple\"\r\n              class=\"deselect\"\r\n              >&times;\r\n            </span>\r\n          </div>\r\n          <div\r\n            class=\"dropdown-down-arrow\"\r\n            [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\"\r\n          >\r\n            <svg\r\n              width=\"1em\"\r\n              viewBox=\"0 0 24 25\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              class=\"down-arrow-img\"\r\n            >\r\n              <g id=\"Down Arrow\">\r\n                <g id=\"Group\">\r\n                  <path\r\n                    id=\"Path\"\r\n                    d=\"M6 9.13741L12 15.229L18 9.13741\"\r\n                    stroke=\"#8E9AA0\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </g>\r\n              </g>\r\n            </svg>\r\n          </div>\r\n          <div\r\n            class=\"dropdown-up-arrow\"\r\n            [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\"\r\n          >\r\n            <svg\r\n              width=\"1em\"\r\n              viewBox=\"0 0 24 25\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              class=\"up-arrow-img\"\r\n            >\r\n              <path\r\n                d=\"M18 15.229L12 9.1374L6 15.229\"\r\n                stroke=\"#8E9AA0\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    #dropdownItems\r\n    class=\"dropdown-items\"\r\n    *ngIf=\"dropdownOpened\"\r\n    (scroll)=\"dropdownScroll($event)\"\r\n  >\r\n    <div (click)=\"createNew()\">\r\n      <a class=\"create_button\" *ngIf=\"showCreateNew\">Create new</a>\r\n    </div>\r\n    <ng-container *ngIf=\"items.length > 0; else noDataAvailable\">\r\n      <ng-container *ngIf=\"multiple; else singleSelection\">\r\n        <a\r\n          [ngClass]=\"{\r\n            compact: !item?.image && !item?.subLabel,\r\n            expanded: item?.image || item?.subLabel\r\n          }\"\r\n          class=\"items d-block\"\r\n          *ngFor=\"let item of _filteredItems\"\r\n          (click)=\"selectItem(item)\"\r\n        >\r\n          <div class=\"dropdown-item\">\r\n            <div class=\"item-details\">\r\n              <div class=\"content-wrapper\">\r\n                <img\r\n                  *ngIf=\"item?.image\"\r\n                  [src]=\"item?.image\"\r\n                  alt=\"Item Image\"\r\n                  class=\"item-image icon-size\"\r\n                />\r\n                <div class=\"text-content\">\r\n                  <div\r\n                    class=\"item-label\"\r\n                    [innerHTML]=\"highlightMatch(item.label)\"\r\n                  ></div>\r\n                  <div *ngIf=\"showSubLabel\" class=\"item-sublabel\">\r\n                    {{ item?.subLabel }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            <div\r\n                class=\"dropdown_buttons\"\r\n                [class.empty]=\"customButtons.length === 0\"\r\n              >\r\n                <button\r\n                  *ngFor=\"let button of customButtons\"\r\n                  (click)=\"handleButtonClick(button.action)\"\r\n                >\r\n                  <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <ng-template #singleSelection>\r\n        <a\r\n          class=\"items d-block\"\r\n          [ngClass]=\"{\r\n            compact: !item?.image && !item?.subLabel,\r\n            expanded: item?.image || item?.subLabel\r\n          }\"\r\n          *ngFor=\"let item of _filteredItems\"\r\n          (click)=\"selectItem(item)\"\r\n        >\r\n          <div class=\"dropdown-item\">\r\n            <div class=\"item-details\">\r\n              <div class=\"content-wrapper\">\r\n                <img\r\n                  *ngIf=\"item?.image\"\r\n                  [src]=\"item?.image\"\r\n                  alt=\"Item Image\"\r\n                  class=\"item-image icon-size\"\r\n                />\r\n                <div class=\"text-content\">\r\n                  <div\r\n                    class=\"item-label\"\r\n                    [innerHTML]=\"highlightMatch(item.label)\"\r\n                  ></div>\r\n                  <div *ngIf=\"showSubLabel\" class=\"item-sublabel\">\r\n                    {{ item?.subLabel }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div\r\n                class=\"dropdown_buttons\"\r\n                [class.empty]=\"customButtons.length === 0\"\r\n              >\r\n                <button\r\n                  *ngFor=\"let button of customButtons\"\r\n                  (click)=\"handleButtonClick(button.action)\"\r\n                >\r\n                  <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </a>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- \"No data available\" message if the drop down is empty -->\r\n    <ng-template #noDataAvailable>\r\n      <div class=\"items\">No data available</div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap;max-height:80px;overflow-y:auto;overflow-x:hidden}.dropdown .dropdown-field .selected .selected-item{background:#e3e3da;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-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:30px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:35px}}.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:auto;position:absolute!important;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040;transition:transform .3s ease-out;scroll-behavior:smooth;cursor:pointer}@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;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;height:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.icon-size{width:30px;height:30px;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;justify-content:space-between}.dropdown-down-arrow,.dropdown-up-arrow,.deselect{width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}.dropdown-down-arrow{cursor:pointer}.dropdown-down-arrow.opened{display:none}.dropdown-down-arrow.closed{display:block}.dropdown-up-arrow{cursor:pointer}.dropdown-up-arrow.closed{display:none}.close-icon{margin-left:8px;margin-right:5px}.iconSection{display:flex;flex-direction:row-reverse;padding:1px;position:relative;justify-content:center;align-items:center}.dropdown-icons-container{display:flex;gap:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.content-wrapper{display:flex;align-items:center;gap:8px;flex:1}.text-content{display:flex;flex-direction:column}.item-label{font-size:14px;font-weight:400;line-height:1.3}.item-sublabel{font-size:11px;color:#666;line-height:1.2}.dropdown_buttons{display:flex;gap:4px}.dropdown_buttons.empty:after{content:\"\";display:inline-block;width:4px;height:1px}.compact{line-height:32px}.expanded{line-height:41px}.input-field{width:100%}.input-with-icon{display:flex;align-items:center;gap:8px;width:100%}.selected-icon-size{width:20px;height:20px;flex-shrink:0}.dropdown_text.inline-input{flex:1;border:none;outline:none;padding:0;background:transparent;font-family:inherit;font-size:inherit;color:inherit}.single-input{width:80%;white-space:nowrap}.item-label{font-size:14px;line-height:1.4;color:#333}.highlight-text{font-weight:600;background-repeat:no-repeat;background-size:100% .3em;background-position:0 88%;padding:.1em .05em;border-radius:2px;color:#1a1a1a;transition:all .2s ease-in-out}.dropdown .dropdown-field .input-field .dropdown_text{background:#fff!important}.dropdown.dropdown-disabled .dropdown-field .input-field .dropdown_text,.dropdown.dropdown-disabled .dropdown-field{background:#e9ecef!important;pointer-events:none}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, 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", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #dropdown\r\n  class=\"dropdown\"\r\n  [ngClass]=\"{\r\n    opened: showBorder && dropdownOpened,\r\n    closed: showBorder && !dropdownOpened,\r\n    'dropdown-disabled': disable\r\n  }\"\r\n>\r\n  <div\r\n    class=\"dropdown-field\"\r\n    id=\"division\"\r\n    [ngClass]=\"{\r\n      opened: showBorder && dropdownOpened,\r\n      closed: showBorder && !dropdownOpened,\r\n    }\"\r\n    (click)=\"openDropdown()\"\r\n  >\r\n    <!-- <div *ngIf=\"selectedValues !== '' && !selectedItemName\" class=\"selected\">\r\n      {{ selectedValues }}\r\n    </div> -->\r\n    <div class=\"flexSection\">\r\n      <div class=\"dataSection\" *ngIf=\"!selectedItem && multiple\">\r\n        <div class=\"selected selectedList\">\r\n          <ng-container *ngFor=\"let selectedItem of selectedItems\">\r\n            <div class=\"selected-item\">\r\n              <img\r\n                *ngIf=\"selectedItem?.image\"\r\n                class=\"multiSelected-icon-size\"\r\n                [src]=\"selectedItem?.image\"\r\n                alt=\"image\"\r\n              />\r\n              <span>{{ selectedItem.label }}</span>\r\n              <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\"\r\n                >&times;</span\r\n              >\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"input-field\">\r\n            <input\r\n              [id]=\"'searchInput-' + dropdownId\"\r\n              class=\"dropdown_text inline-input\"\r\n              [(ngModel)]=\"searchText\"\r\n              [placeholder]=\"placeholder\"\r\n              (input)=\"search($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"dataSection single-input\" *ngIf=\"!multiple\">\r\n        <div class=\"input-field\">\r\n          <div class=\"input-with-icon\">\r\n            <img\r\n              *ngIf=\"selectedItemImage\"\r\n              class=\"selected-icon-size\"\r\n              [src]=\"selectedItemImage\"\r\n              alt=\"image\"\r\n            />\r\n            <input\r\n              [id]=\"'searchInput-' + dropdownId\"\r\n              class=\"dropdown_text inline-input\"\r\n              [placeholder]=\"placeholder\"\r\n              [(ngModel)]=\"selectedItemName\"\r\n              (input)=\"search($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iconSection\">\r\n        <div class=\"dropdown-icons-container\">\r\n          <div>\r\n            <span\r\n              (click)=\"unselectAll()\"\r\n              *ngIf=\"selectedItems.length > 0 && multiple\"\r\n              class=\"deselect\"\r\n              >&times;\r\n            </span>\r\n          </div>\r\n          <div\r\n            class=\"dropdown-down-arrow\"\r\n            [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\"\r\n          >\r\n            <svg\r\n              width=\"1em\"\r\n              viewBox=\"0 0 24 25\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              class=\"down-arrow-img\"\r\n            >\r\n              <g id=\"Down Arrow\">\r\n                <g id=\"Group\">\r\n                  <path\r\n                    id=\"Path\"\r\n                    d=\"M6 9.13741L12 15.229L18 9.13741\"\r\n                    stroke=\"#8E9AA0\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </g>\r\n              </g>\r\n            </svg>\r\n          </div>\r\n          <div\r\n            class=\"dropdown-up-arrow\"\r\n            [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\"\r\n          >\r\n            <svg\r\n              width=\"1em\"\r\n              viewBox=\"0 0 24 25\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              class=\"up-arrow-img\"\r\n            >\r\n              <path\r\n                d=\"M18 15.229L12 9.1374L6 15.229\"\r\n                stroke=\"#8E9AA0\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    #dropdownItems\r\n    class=\"dropdown-items\"\r\n    *ngIf=\"dropdownOpened\"\r\n    (scroll)=\"dropdownScroll($event)\"\r\n  >\r\n    <div (click)=\"createNew()\">\r\n      <a class=\"create_button\" *ngIf=\"showCreateNew\">Create new</a>\r\n    </div>\r\n    <ng-container *ngIf=\"items.length > 0; else noDataAvailable\">\r\n      <ng-container *ngIf=\"multiple; else singleSelection\">\r\n        <a\r\n          [ngClass]=\"{\r\n            compact: !item?.image && !item?.subLabel,\r\n            expanded: item?.image || item?.subLabel\r\n          }\"\r\n          class=\"items d-block\"\r\n          *ngFor=\"let item of _filteredItems\"\r\n          (click)=\"selectItem(item)\"\r\n        >\r\n          <div class=\"dropdown-item\">\r\n            <div class=\"item-details\">\r\n              <div class=\"content-wrapper\">\r\n                <img\r\n                  *ngIf=\"item?.image\"\r\n                  [src]=\"item?.image\"\r\n                  alt=\"Item Image\"\r\n                  class=\"item-image icon-size\"\r\n                />\r\n                <div class=\"text-content\">\r\n                  <div\r\n                    class=\"item-label\"\r\n                    [innerHTML]=\"highlightMatch(item.label)\"\r\n                  ></div>\r\n                  <div *ngIf=\"showSubLabel\" class=\"item-sublabel\">\r\n                    {{ item?.subLabel }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            <div\r\n                class=\"dropdown_buttons\"\r\n                [class.empty]=\"customButtons.length === 0\"\r\n              >\r\n                <button\r\n                  *ngFor=\"let button of customButtons\"\r\n                  (click)=\"handleButtonClick(button.action)\"\r\n                >\r\n                  <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <ng-template #singleSelection>\r\n        <a\r\n          class=\"items d-block\"\r\n          [ngClass]=\"{\r\n            compact: !item?.image && !item?.subLabel,\r\n            expanded: item?.image || item?.subLabel\r\n          }\"\r\n          *ngFor=\"let item of _filteredItems\"\r\n          (click)=\"selectItem(item)\"\r\n        >\r\n          <div class=\"dropdown-item\">\r\n            <div class=\"item-details\">\r\n              <div class=\"content-wrapper\">\r\n                <img\r\n                  *ngIf=\"item?.image\"\r\n                  [src]=\"item?.image\"\r\n                  alt=\"Item Image\"\r\n                  class=\"item-image icon-size\"\r\n                />\r\n                <div class=\"text-content\">\r\n                  <div\r\n                    class=\"item-label\"\r\n                    [innerHTML]=\"highlightMatch(item.label)\"\r\n                  ></div>\r\n                  <div *ngIf=\"showSubLabel\" class=\"item-sublabel\">\r\n                    {{ item?.subLabel }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div\r\n                class=\"dropdown_buttons\"\r\n                [class.empty]=\"customButtons.length === 0\"\r\n              >\r\n                <button\r\n                  *ngFor=\"let button of customButtons\"\r\n                  (click)=\"handleButtonClick(button.action)\"\r\n                >\r\n                  <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </a>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- \"No data available\" message if the drop down is empty -->\r\n    <ng-template #noDataAvailable>\r\n      <div class=\"items\">No data available</div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{background:#fff;border-radius:6px}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}.dropdown .dropdown-field .selected.selectedList{display:flex;flex-wrap:wrap;max-height:80px;overflow-y:auto;overflow-x:hidden}.dropdown .dropdown-field .selected .selected-item{background:#e3e3da;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-style:normal}@media (max-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;margin-left:3px;padding-left:2px}}@media (max-width: 420px){.dropdown .dropdown-field .input-field .dropdown_text{width:53%;margin-left:3px;padding-left:2px}}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:25px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:30px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:35px}}.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:auto;position:absolute!important;top:100%;left:0;width:100%;background:#fff;z-index:9999999;border:solid 1px #dbdbdb;box-shadow:0 4px 4px -5px #00000040;transition:transform .3s ease-out;scroll-behavior:smooth;cursor:pointer}@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;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;height:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}.space{width:10px}.icon-size{width:30px;height:30px;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;justify-content:space-between}.dropdown-down-arrow,.dropdown-up-arrow,.deselect{width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}.dropdown-down-arrow{cursor:pointer}.dropdown-down-arrow.opened{display:none}.dropdown-down-arrow.closed{display:block}.dropdown-up-arrow{cursor:pointer}.dropdown-up-arrow.closed{display:none}.close-icon{margin-left:8px;margin-right:5px}.iconSection{display:flex;flex-direction:row-reverse;padding:1px;position:relative;justify-content:center;align-items:center}.dropdown-icons-container{display:flex;gap:10px}.item-details{display:flex;align-items:center;justify-content:space-between}.content-wrapper{display:flex;align-items:center;gap:8px;flex:1}.text-content{display:flex;flex-direction:column}.item-label{font-size:14px;font-weight:400;line-height:1.3}.item-sublabel{font-size:11px;color:#666;line-height:1.2}.dropdown_buttons{display:flex;gap:4px}.dropdown_buttons.empty:after{content:\"\";display:inline-block;width:4px;height:1px}.compact{line-height:32px}.expanded{line-height:41px}.input-field{width:100%}.input-with-icon{display:flex;align-items:center;gap:8px;width:100%}.selected-icon-size{width:20px;height:20px;flex-shrink:0}.dropdown_text.inline-input{flex:1;border:none;outline:none;padding:0;background:transparent;font-family:inherit;font-size:inherit;color:inherit}.single-input{width:80%;white-space:nowrap}.item-label{font-size:14px;line-height:1.4;color:#333}.highlight-text{font-weight:600;background-repeat:no-repeat;background-size:100% .3em;background-position:0 88%;padding:.1em .05em;border-radius:2px;color:#1a1a1a;transition:all .2s ease-in-out}.dropdown .dropdown-field .input-field .dropdown_text{background:#fff!important}.dropdown.dropdown-disabled .dropdown-field .input-field .dropdown_text,.dropdown.dropdown-disabled .dropdown-field{background:#e9ecef!important;pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { multiple: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showCreateNew: [{
+                type: Input
+            }], selectedValues: [{
+                type: Input
+            }], customButtons: [{
+                type: Input
+            }], showBorder: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], selectedItemsChange: [{
+                type: Output
+            }], onDropdownScroll: [{
+                type: Output
+            }], onCreateNew: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }], showSubLabel: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], dropdownitems: [{
+                type: ViewChild,
+                args: ["dropdownItems"]
+            }], dropdown: [{
+                type: ViewChild,
+                args: ["dropdown"]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ["document:click", ["$event"]]
+            }] } });
+
+class DropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [FormsModule,
+            CommonModule], exports: [DropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, imports: [FormsModule,
+            CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DropdownComponent
+                    ],
+                    imports: [
+                        FormsModule,
+                        CommonModule,
+                    ],
+                    exports: [
+                        DropdownComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of dropdown
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownComponent, DropdownModule, DropdownService };
+//# sourceMappingURL=piserve-tech-drop-down.mjs.map

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

@@ -0,0 +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';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class DropdownService {\r\n\r\n  constructor() { }\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  HostListener,\r\n  Input,\r\n  OnInit,\r\n  Output,\r\n  SimpleChanges,\r\n  ViewChild,\r\n  ViewEncapsulation,\r\n} from \"@angular/core\";\r\nimport { DropdownItem } from \"./dropdown.model\";\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\n@Component({\r\n  selector: \"lib-dropdown\",\r\n  templateUrl: \"./dropdown.component.html\",\r\n  styleUrls: [\"./dropdown.component.scss\"],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class DropdownComponent implements OnInit {\r\n  @Input() multiple!: boolean;\r\n  @Input() selectedItems: any[] = [];\r\n  @Input() placeholder: String = \"\";\r\n  @Input() showCreateNew!: boolean;\r\n  @Input() selectedValues: string = \"\";\r\n  @Input() customButtons: {\r\n    label: string;\r\n    icon: string;\r\n    color: string;\r\n    action: () => void;\r\n  }[] = [];\r\n  @Input() showBorder: boolean = true;\r\n  @Input() disable: boolean = false;\r\n  @Output() buttonClick: EventEmitter<Event> = new EventEmitter<Event>();\r\n  @Output() selectedItemsChange: EventEmitter<any[]> = new EventEmitter<\r\n    any[]\r\n  >();\r\n  @Output() onDropdownScroll: EventEmitter<Event> = new EventEmitter<Event>();\r\n  @Output() onCreateNew: EventEmitter<Event> = new EventEmitter<Event>();\r\n  @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();\r\n  //subLabel\r\n  @Input() showSubLabel: boolean = false;\r\n  dropdownId = uuidv4();\r\n  dropdownOpened: boolean = false;\r\n  selectedItem: any;\r\n  selectedItemName: string = \"\";\r\n  selectedItemImage: string = \"\";\r\n  originalItems: DropdownItem[] = [];\r\n  searchTerm: string = \"\";\r\n  initialized: boolean = false;\r\n  searchText: string = \"\";\r\n  _filteredItems: DropdownItem[] = [];\r\n\r\n  private _items: DropdownItem[] = [];\r\n\r\n  @Input()\r\n  set items(value: DropdownItem[]) {\r\n    this._items = value || [];\r\n    this.originalItems = this._items.slice();\r\n    this._filteredItems = this._items.slice(); // use a separate variable for rendering\r\n    this.cdr.markForCheck();\r\n  }\r\n  get items(): DropdownItem[] {\r\n    return this._items;\r\n  }\r\n\r\n  constructor(private cdr: ChangeDetectorRef) {}\r\n\r\n  ngOnInit(): void {}\r\n\r\n\r\n\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    if (changes[\"selectedItems\"]) {\r\n      const item = changes[\"selectedItems\"][\"currentValue\"];\r\n      this.selectedItems = item;\r\n      this.selectedItemName = this.selectedItems[0]?.label;\r\n      this.selectedItemImage = this.selectedItems[0]?.image;\r\n    }\r\n    if (changes[\"items\"]) {\r\n      this.initialize();\r\n      this.originalItems = this.items.slice();\r\n      this.cdr.markForCheck();\r\n    }\r\n    if (changes[\"selectedValues\"]) {\r\n      this.selectedItemName = this.selectedValues;\r\n    }\r\n  }\r\n\r\n  initialize() {\r\n    setTimeout(() => {\r\n      if (this.selectedItems && this.selectedItems.length > 0) {\r\n        if (!this.multiple) {\r\n          this.searchText = \"\";\r\n          this.selectedItemName = this.selectedItems[0]?.label;\r\n          this.selectedItemImage = this.selectedItems[0]?.image;\r\n        }\r\n      }\r\n    }, 1000);\r\n    const uniqueItems = this.items.filter(\r\n      (selected, index, self) =>\r\n        index === self.findIndex((t) => t.value === selected.value)\r\n    );\r\n\r\n    this.items = uniqueItems;\r\n  }\r\n\r\n  openDropdown() {\r\n    this.dropdownOpened = !this.dropdownOpened;\r\n     const inputId = `searchInput-${this.dropdownId}`;\r\n    const inputEl = document.getElementById(inputId);\r\n     setTimeout(() => {\r\n      inputEl?.focus();\r\n    }, 0);\r\n    \r\n  }\r\n\r\n  @ViewChild(\"dropdownItems\") dropdownitems!: ElementRef<any>;\r\n  dropdownScroll(event: any): void {\r\n    if (this.onDropdownScroll.observed) {\r\n      this.onDropdownScroll.emit(event);\r\n      this.cdr.markForCheck();\r\n    }\r\n  }\r\n\r\n  selectItem(item: any) {\r\n    if (this.multiple) {\r\n      if (!this.selectedItems.includes(item)) {\r\n        this.selectedItems.push(item);\r\n        this.selectedItemsChange.emit(this.selectedItems);\r\n      } else {\r\n        this.selectedItems = this.selectedItems.filter(\r\n          (selected: any) => selected !== item\r\n        );\r\n        this.selectedItemsChange.emit(this.selectedItems);\r\n      }\r\n    } else {\r\n      this.searchText = \"\";\r\n      this.selectedItems[0] = item;\r\n      this.selectedItemName = this.selectedItems[0]?.label;\r\n      this.selectedItemImage = this.selectedItems[0]?.image;\r\n      this.dropdownOpened = false;\r\n      this.selectedItemsChange.emit(this.selectedItems);\r\n    }\r\n  }\r\n\r\n  unselectItem(item: any): void {\r\n    this.selectedItems = this.selectedItems.filter(\r\n      (selected: any) => selected !== item\r\n    );\r\n    this.selectedItemsChange.emit(this.selectedItems);\r\n  }\r\n\r\n  unselectAll() {\r\n    this.selectedItems = [];\r\n    this.selectedItemName = \"\";\r\n    this.selectedItemImage = \"\";\r\n    this.selectedItemsChange.emit(this.selectedItems);\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  @ViewChild(\"dropdown\") dropdown!: ElementRef;\r\n  @HostListener(\"document:click\", [\"$event\"])\r\n  onDocumentClick(event: Event): void {\r\n    const isClickInsideDropdown = this.dropdown.nativeElement.contains(\r\n      event.target\r\n    );\r\n\r\n    if (!isClickInsideDropdown) {\r\n      this.dropdownOpened = false;\r\n    }\r\n  }\r\n\r\n  createNew() {\r\n    this.onCreateNew.emit();\r\n    this.dropdownOpened = false;\r\n  }\r\n\r\n  search(event: any): void {\r\n    const keyCode = event.keyCode;\r\n    this.dropdownOpened = true;\r\n    this.searchTerm = event.target.value.toLowerCase();\r\n    if (!this.onSearch.observed) {\r\n      if (this.searchTerm.trim() === \"\") {\r\n        if (!this.multiple) {\r\n          this.unselectAll();\r\n        }\r\n        this._filteredItems = this.originalItems.slice();\r\n      } else {\r\n        const lowerCaseSearchTerm = this.searchTerm.toLowerCase();\r\n        this._filteredItems = this.originalItems.filter(\r\n          (item) =>\r\n            item.label.toLowerCase().includes(lowerCaseSearchTerm) ||\r\n            (item.value &&\r\n              item.value.toLowerCase().includes(lowerCaseSearchTerm))\r\n        );\r\n      }\r\n    } else {\r\n      this.onSearch.emit(this.searchTerm);\r\n    }\r\n  }\r\n\r\n  handleButtonClick(action: () => void): void {\r\n    action();\r\n    this.buttonClick.emit();\r\n  }\r\n\r\n  highlightMatch(text: string): string {\r\n    const search = this.searchText?.trim() || this.searchTerm?.trim();\r\n    if (!search || !text) return text;\r\n\r\n    const index = text.toLowerCase().indexOf(search.toLowerCase());\r\n    if (index === -1) return text;\r\n\r\n    const before = text.substring(0, index);\r\n    const match = text.substring(index, index + search.length);\r\n    const after = text.substring(index + search.length);\r\n\r\n    return `${before}<span class=\"highlight-text\">${match}</span>${after}`;\r\n  }\r\n}\r\n","<div\r\n  #dropdown\r\n  class=\"dropdown\"\r\n  [ngClass]=\"{\r\n    opened: showBorder && dropdownOpened,\r\n    closed: showBorder && !dropdownOpened,\r\n    'dropdown-disabled': disable\r\n  }\"\r\n>\r\n  <div\r\n    class=\"dropdown-field\"\r\n    id=\"division\"\r\n    [ngClass]=\"{\r\n      opened: showBorder && dropdownOpened,\r\n      closed: showBorder && !dropdownOpened,\r\n    }\"\r\n    (click)=\"openDropdown()\"\r\n  >\r\n    <!-- <div *ngIf=\"selectedValues !== '' && !selectedItemName\" class=\"selected\">\r\n      {{ selectedValues }}\r\n    </div> -->\r\n    <div class=\"flexSection\">\r\n      <div class=\"dataSection\" *ngIf=\"!selectedItem && multiple\">\r\n        <div class=\"selected selectedList\">\r\n          <ng-container *ngFor=\"let selectedItem of selectedItems\">\r\n            <div class=\"selected-item\">\r\n              <img\r\n                *ngIf=\"selectedItem?.image\"\r\n                class=\"multiSelected-icon-size\"\r\n                [src]=\"selectedItem?.image\"\r\n                alt=\"image\"\r\n              />\r\n              <span>{{ selectedItem.label }}</span>\r\n              <span (click)=\"unselectItem(selectedItem)\" class=\"close-icon\"\r\n                >&times;</span\r\n              >\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"input-field\">\r\n            <input\r\n              [id]=\"'searchInput-' + dropdownId\"\r\n              class=\"dropdown_text inline-input\"\r\n              [(ngModel)]=\"searchText\"\r\n              [placeholder]=\"placeholder\"\r\n              (input)=\"search($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"dataSection single-input\" *ngIf=\"!multiple\">\r\n        <div class=\"input-field\">\r\n          <div class=\"input-with-icon\">\r\n            <img\r\n              *ngIf=\"selectedItemImage\"\r\n              class=\"selected-icon-size\"\r\n              [src]=\"selectedItemImage\"\r\n              alt=\"image\"\r\n            />\r\n            <input\r\n              [id]=\"'searchInput-' + dropdownId\"\r\n              class=\"dropdown_text inline-input\"\r\n              [placeholder]=\"placeholder\"\r\n              [(ngModel)]=\"selectedItemName\"\r\n              (input)=\"search($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iconSection\">\r\n        <div class=\"dropdown-icons-container\">\r\n          <div>\r\n            <span\r\n              (click)=\"unselectAll()\"\r\n              *ngIf=\"selectedItems.length > 0 && multiple\"\r\n              class=\"deselect\"\r\n              >&times;\r\n            </span>\r\n          </div>\r\n          <div\r\n            class=\"dropdown-down-arrow\"\r\n            [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\"\r\n          >\r\n            <svg\r\n              width=\"1em\"\r\n              viewBox=\"0 0 24 25\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              class=\"down-arrow-img\"\r\n            >\r\n              <g id=\"Down Arrow\">\r\n                <g id=\"Group\">\r\n                  <path\r\n                    id=\"Path\"\r\n                    d=\"M6 9.13741L12 15.229L18 9.13741\"\r\n                    stroke=\"#8E9AA0\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </g>\r\n              </g>\r\n            </svg>\r\n          </div>\r\n          <div\r\n            class=\"dropdown-up-arrow\"\r\n            [ngClass]=\"{ opened: dropdownOpened, closed: !dropdownOpened }\"\r\n          >\r\n            <svg\r\n              width=\"1em\"\r\n              viewBox=\"0 0 24 25\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              class=\"up-arrow-img\"\r\n            >\r\n              <path\r\n                d=\"M18 15.229L12 9.1374L6 15.229\"\r\n                stroke=\"#8E9AA0\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    #dropdownItems\r\n    class=\"dropdown-items\"\r\n    *ngIf=\"dropdownOpened\"\r\n    (scroll)=\"dropdownScroll($event)\"\r\n  >\r\n    <div (click)=\"createNew()\">\r\n      <a class=\"create_button\" *ngIf=\"showCreateNew\">Create new</a>\r\n    </div>\r\n    <ng-container *ngIf=\"items.length > 0; else noDataAvailable\">\r\n      <ng-container *ngIf=\"multiple; else singleSelection\">\r\n        <a\r\n          [ngClass]=\"{\r\n            compact: !item?.image && !item?.subLabel,\r\n            expanded: item?.image || item?.subLabel\r\n          }\"\r\n          class=\"items d-block\"\r\n          *ngFor=\"let item of _filteredItems\"\r\n          (click)=\"selectItem(item)\"\r\n        >\r\n          <div class=\"dropdown-item\">\r\n            <div class=\"item-details\">\r\n              <div class=\"content-wrapper\">\r\n                <img\r\n                  *ngIf=\"item?.image\"\r\n                  [src]=\"item?.image\"\r\n                  alt=\"Item Image\"\r\n                  class=\"item-image icon-size\"\r\n                />\r\n                <div class=\"text-content\">\r\n                  <div\r\n                    class=\"item-label\"\r\n                    [innerHTML]=\"highlightMatch(item.label)\"\r\n                  ></div>\r\n                  <div *ngIf=\"showSubLabel\" class=\"item-sublabel\">\r\n                    {{ item?.subLabel }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            <div\r\n                class=\"dropdown_buttons\"\r\n                [class.empty]=\"customButtons.length === 0\"\r\n              >\r\n                <button\r\n                  *ngFor=\"let button of customButtons\"\r\n                  (click)=\"handleButtonClick(button.action)\"\r\n                >\r\n                  <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <ng-template #singleSelection>\r\n        <a\r\n          class=\"items d-block\"\r\n          [ngClass]=\"{\r\n            compact: !item?.image && !item?.subLabel,\r\n            expanded: item?.image || item?.subLabel\r\n          }\"\r\n          *ngFor=\"let item of _filteredItems\"\r\n          (click)=\"selectItem(item)\"\r\n        >\r\n          <div class=\"dropdown-item\">\r\n            <div class=\"item-details\">\r\n              <div class=\"content-wrapper\">\r\n                <img\r\n                  *ngIf=\"item?.image\"\r\n                  [src]=\"item?.image\"\r\n                  alt=\"Item Image\"\r\n                  class=\"item-image icon-size\"\r\n                />\r\n                <div class=\"text-content\">\r\n                  <div\r\n                    class=\"item-label\"\r\n                    [innerHTML]=\"highlightMatch(item.label)\"\r\n                  ></div>\r\n                  <div *ngIf=\"showSubLabel\" class=\"item-sublabel\">\r\n                    {{ item?.subLabel }}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div\r\n                class=\"dropdown_buttons\"\r\n                [class.empty]=\"customButtons.length === 0\"\r\n              >\r\n                <button\r\n                  *ngFor=\"let button of customButtons\"\r\n                  (click)=\"handleButtonClick(button.action)\"\r\n                >\r\n                  <i [class]=\"button.icon\" [style.color]=\"button.color\"></i>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </a>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n    <!-- \"No data available\" message if the drop down is empty -->\r\n    <ng-template #noDataAvailable>\r\n      <div class=\"items\">No data available</div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { DropdownComponent } from './dropdown.component';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    DropdownComponent\r\n  ],\r\n  imports: [\r\n    FormsModule,\r\n    CommonModule,\r\n  ],\r\n  exports: [\r\n    DropdownComponent\r\n  ]\r\n})\r\nexport class DropdownModule { }\r\n","/*\r\n * Public API Surface of dropdown\r\n */\r\n\r\nexport * from './lib/dropdown.service';\r\nexport * from './lib/dropdown.component';\r\nexport * from './lib/dropdown.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["uuidv4"],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@piserve-tech/drop-down" />
+export * from './public-api';

package/lib/dropdown.component.d.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnInit, SimpleChanges } from "@angular/core";
+import { DropdownItem } from "./dropdown.model";
+import * as i0 from "@angular/core";
+export declare class DropdownComponent implements OnInit {
+    private cdr;
+    multiple: boolean;
+    selectedItems: any[];
+    placeholder: String;
+    showCreateNew: boolean;
+    selectedValues: string;
+    customButtons: {
+        label: string;
+        icon: string;
+        color: string;
+        action: () => void;
+    }[];
+    showBorder: boolean;
+    disable: boolean;
+    buttonClick: EventEmitter<Event>;
+    selectedItemsChange: EventEmitter<any[]>;
+    onDropdownScroll: EventEmitter<Event>;
+    onCreateNew: EventEmitter<Event>;
+    onSearch: EventEmitter<string>;
+    showSubLabel: boolean;
+    dropdownId: string;
+    dropdownOpened: boolean;
+    selectedItem: any;
+    selectedItemName: string;
+    selectedItemImage: string;
+    originalItems: DropdownItem[];
+    searchTerm: string;
+    initialized: boolean;
+    searchText: string;
+    _filteredItems: DropdownItem[];
+    private _items;
+    set items(value: DropdownItem[]);
+    get items(): DropdownItem[];
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    initialize(): void;
+    openDropdown(): void;
+    dropdownitems: ElementRef<any>;
+    dropdownScroll(event: any): void;
+    selectItem(item: any): void;
+    unselectItem(item: any): void;
+    unselectAll(): void;
+    dropdown: ElementRef;
+    onDocumentClick(event: Event): void;
+    createNew(): void;
+    search(event: any): void;
+    handleButtonClick(action: () => void): void;
+    highlightMatch(text: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "lib-dropdown", never, { "multiple": { "alias": "multiple"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "showCreateNew": { "alias": "showCreateNew"; "required": false; }; "selectedValues": { "alias": "selectedValues"; "required": false; }; "customButtons": { "alias": "customButtons"; "required": false; }; "showBorder": { "alias": "showBorder"; "required": false; }; "disable": { "alias": "disable"; "required": false; }; "showSubLabel": { "alias": "showSubLabel"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "buttonClick": "buttonClick"; "selectedItemsChange": "selectedItemsChange"; "onDropdownScroll": "onDropdownScroll"; "onCreateNew": "onCreateNew"; "onSearch": "onSearch"; }, never, never, false, never>;
+}

package/{src/lib/dropdown.model.ts → lib/dropdown.model.d.ts}

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

package/lib/dropdown.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./dropdown.component";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/common";
+export declare class DropdownModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DropdownModule, [typeof i1.DropdownComponent], [typeof i2.FormsModule, typeof i3.CommonModule], [typeof i1.DropdownComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DropdownModule>;
+}

package/lib/dropdown.service.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class DropdownService {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DropdownService>;
+}

package/package.json

@@ -1,16 +1,29 @@
-{
-  "name": "@piserve-tech/drop-down",
-  "version": "1.2.110",
-  "peerDependencies": {
-    "@angular/common": "^16.2.0",
-    "@angular/core": "^16.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://penta.internal.piserve.com/form-builder/library-dropdown"
-  }
-}
+{
+  "name": "@piserve-tech/drop-down",
+  "version": "1.2.111",
+  "peerDependencies": {
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://penta.internal.piserve.com/form-builder/library-dropdown"
+  },
+  "module": "fesm2022/piserve-tech-drop-down.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/piserve-tech-drop-down.mjs",
+      "esm": "./esm2022/piserve-tech-drop-down.mjs",
+      "default": "./fesm2022/piserve-tech-drop-down.mjs"
+    }
+  }
+}

package/{src/public-api.ts → public-api.d.ts}

@@ -1,7 +1,3 @@
-/*
- * Public API Surface of dropdown
- */
-
-export * from './lib/dropdown.service';
-export * from './lib/dropdown.component';
-export * from './lib/dropdown.module';
+export * from './lib/dropdown.service';
+export * from './lib/dropdown.component';
+export * from './lib/dropdown.module';

package/assets/images/down_arrow.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Down Arrow">
-<g id="Group">
-<path id="Path" d="M6 9.13741L12 15.229L18 9.13741" stroke="#8E9AA0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</g>
-</svg>

package/assets/images/edit.svg

@@ -1,8 +0,0 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<g id="Group 78">
-<path id="Path" fill-rule="evenodd" clip-rule="evenodd" d="M3.90685 12.0417H0.958008V9.09284C0.958008 8.79057 1.07803 8.50068 1.29181 8.28701L8.2861 1.29272C8.49977 1.07864 8.7898 0.958344 9.09226 0.958344C9.39471 0.958344 9.68475 1.07864 9.89841 1.29272L11.707 3.10127C11.921 3.31493 12.0413 3.60497 12.0413 3.90743C12.0413 4.20988 11.921 4.49992 11.707 4.71358L4.71268 11.7079C4.49884 11.9214 4.20905 12.0415 3.90685 12.0417Z" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Path_2" d="M7.19482 3.03896L9.96566 5.80979" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</g>
-</svg>

package/assets/images/view.svg

@@ -1,8 +0,0 @@
-<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<g id="Group_2">
-<path id="Path" d="M9.15028 4.91C10.0611 5.78825 10.0611 7.214 9.15028 8.09375C8.2395 8.972 6.76094 8.972 5.84861 8.09375C4.93783 7.2155 4.93783 5.78975 5.84861 4.91C6.76094 4.03025 8.23872 4.03025 9.15028 4.91" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Path_2" fill-rule="evenodd" clip-rule="evenodd" d="M0.5 6.5C0.5 6.00575 0.618222 5.51675 0.846889 5.066V5.066C2.02522 2.74325 4.62922 1.25 7.5 1.25C10.3708 1.25 12.9748 2.74325 14.1531 5.066V5.066C14.3818 5.51675 14.5 6.00575 14.5 6.5C14.5 6.99425 14.3818 7.48325 14.1531 7.934V7.934C12.9748 10.2567 10.3708 11.75 7.5 11.75C4.62922 11.75 2.02522 10.2567 0.846889 7.934V7.934C0.618222 7.48325 0.5 6.99425 0.5 6.5Z" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</g>
-</svg>

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/dropdown",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}