@piserve-tech/drop-down 1.2.108 → 1.2.110

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

@@ -1,259 +0,0 @@
-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\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            />\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 && multiple\"\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-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            />\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 && multiple\"\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-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

@@ -1 +0,0 @@
-{"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  }\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            />\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 && multiple\"\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

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

package/lib/dropdown.component.d.ts

@@ -1,56 +0,0 @@
-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/lib/dropdown.module.d.ts

@@ -1,9 +0,0 @@
-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

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