@piserve-tech/drop-down 1.2.110 → 1.2.112

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

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