angular-multiselect3 10.0.0 → 11.0.3

package/fesm2022/{angular-multiselect.mjs → angular-multiselect3.mjs}

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Input, Output, HostListener, Injectable, Pipe, TemplateRef, Component, ContentChild, ViewEncapsulation, PLATFORM_ID, ElementRef, Inject, Optional, ViewChild, NgModule, forwardRef } from '@angular/core';
-import * as i3 from '@angular/forms';
+import { EventEmitter, Directive, Output, HostListener, Pipe, TemplateRef, Component, ContentChild, Input, ViewEncapsulation, PLATFORM_ID, ElementRef, Inject, Optional, ViewChild, NgModule, Injectable, forwardRef } from '@angular/core';
+import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
-import * as i2 from '@angular/common';
-import { isPlatformServer, CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
+import * as i3 from '@angular/common';
+import { isPlatformServer, CommonModule, DOCUMENT } from '@angular/common';
+import { Subject, merge, fromEvent } from 'rxjs';
 import * as tween from '@tweenjs/tween.js';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 
@@ -17,42 +17,6 @@ class MyException {
     }
 }
 
-class ClickOutsideDirective {
-    _elementRef;
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-    enabled;
-    clickOutside = new EventEmitter();
-    onClick(event, targetElement) {
-        console.log('clicked outside');
-        if (!targetElement || !this.enabled) {
-            return;
-        }
-        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
-        if (!clickedInside) {
-            this.clickOutside.emit(event);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: { enabled: "enabled" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:pointerdown": "onClick($event,$event.target)", "document:touchstart": "onClick($event,$event.target)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickOutside]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enabled: [{
-                type: Input
-            }], clickOutside: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:pointerdown', ['$event', '$event.target']]
-            }, {
-                type: HostListener,
-                args: ['document:touchstart', ['$event', '$event.target']]
-            }] } });
 class ScrollDirective {
     scroll = new EventEmitter();
     onClick(event, targetElement) {
@@ -73,39 +37,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['scroll', ['$event']]
             }] } });
 
-class DataService {
-    filteredData = [];
-    subject = new Subject();
-    setData(data) {
-        this.filteredData = data;
-        this.subject.next(data);
-    }
-    getData() {
-        return this.subject.asObservable();
-    }
-    getFilteredData() {
-        if (this.filteredData && this.filteredData.length > 0) {
-            return this.filteredData;
-        }
-        else {
-            return [];
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataService, decorators: [{
-            type: Injectable
-        }] });
-
 class ListFilterPipe {
-    ds;
     filteredList = [];
-    constructor(ds) {
-        this.ds = ds;
-    }
     transform(items, filter, searchBy) {
-        if (!items || !filter || filter == "") {
+        if (!items || !filter || filter == '') {
             return items;
         }
         this.filteredList = items.filter((item) => this.applyFilter(item, filter, searchBy));
@@ -119,8 +54,11 @@ class ListFilterPipe {
             }
             else {
                 for (var t = 0; t < searchBy.length; t++) {
-                    if (filter && item[searchBy[t]] && item[searchBy[t]] != "") {
-                        if (item[searchBy[t]].toString().toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
+                    if (filter && item[searchBy[t]] && item[searchBy[t]] != '') {
+                        if (item[searchBy[t]]
+                            .toString()
+                            .toLowerCase()
+                            .indexOf(filter.toLowerCase()) >= 0) {
                             found = true;
                         }
                     }
@@ -134,7 +72,10 @@ class ListFilterPipe {
             else {
                 for (var prop in item) {
                     if (filter && item[prop]) {
-                        if (item[prop].toString().toLowerCase().indexOf(filter.toLowerCase()) >= 0) {
+                        if (item[prop]
+                            .toString()
+                            .toLowerCase()
+                            .indexOf(filter.toLowerCase()) >= 0) {
                             found = true;
                         }
                     }
@@ -143,16 +84,16 @@ class ListFilterPipe {
         }
         return found;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, name: "listFilter" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'listFilter',
-                    pure: true
+                    pure: true,
                 }]
-        }], ctorParameters: () => [{ type: DataService }] });
+        }] });
 
 class Item {
     template;
@@ -363,7 +304,7 @@ class CIcon {
 		l-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z"
         />
       </g>
-    </svg>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+    </svg>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CIcon, decorators: [{
             type: Component,
@@ -1659,6 +1600,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+class ClickOutsideService {
+    _document;
+    // tslint:disable-next-line:variable-name
+    _items = new Set();
+    // tslint:disable-next-line:variable-name
+    _click$ = new Subject();
+    // tslint:disable-next-line:variable-name
+    _docSub;
+    constructor(_document) {
+        this._document = _document;
+    }
+    register(item) {
+        this._items.add(item);
+        if (this._items.size === 1) {
+            this._subscribeToDocument();
+        }
+    }
+    unregister(item) {
+        this._items.delete(item);
+        if (this._items.size === 0) {
+            this._unsubscribe();
+        }
+    }
+    onClick() {
+        // return observable of document click/pointer events
+        return this._click$.asObservable();
+    }
+    _subscribeToDocument() {
+        if (this._docSub) {
+            return;
+        }
+        // listen to touchstart / pointerdown / mousedown and forward events
+        this._docSub = merge(fromEvent(this._document.defaultView, 'touchstart'), fromEvent(this._document.defaultView, 'pointerdown')).subscribe((event) => this._click$.next(event));
+    }
+    _unsubscribe() {
+        if (this._docSub) {
+            this._docSub.unsubscribe();
+            this._docSub = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ClickOutsideService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
 const DROPDOWN_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => AngularMultiSelect),
@@ -1674,6 +1665,7 @@ class AngularMultiSelect {
     _elementRef;
     cdr;
     filterPipe;
+    _service;
     data;
     settings;
     loading;
@@ -1745,7 +1737,7 @@ class AngularMultiSelect {
     dropDownTop = '';
     dropDownBottom = 'unset';
     dropDownLeft = 0;
-    id = Math.random().toString(36).substring(2);
+    id = window.crypto.randomUUID();
     defaultSettings = {
         singleSelection: false,
         text: 'Select',
@@ -1783,10 +1775,11 @@ class AngularMultiSelect {
     virtualScroollInit = false;
     virtualScroller;
     isDisabledItemPresent = false;
-    constructor(_elementRef, cdr, filterPipe) {
+    constructor(_elementRef, cdr, filterPipe, _service) {
         this._elementRef = _elementRef;
         this.cdr = cdr;
         this.filterPipe = filterPipe;
+        this._service = _service;
         this.searchTerm$
             .asObservable()
             .pipe(debounceTime(1000), distinctUntilChanged(), tap((term) => term))
@@ -1795,6 +1788,7 @@ class AngularMultiSelect {
         });
     }
     ngOnInit() {
+        this._service.register(this.id);
         this.settings = Object.assign(this.defaultSettings, this.settings);
         this.cachedItems = this.cloneArray(this.data);
         if (this.settings.position == 'top') {
@@ -1808,6 +1802,16 @@ class AngularMultiSelect {
             this.calculateDropdownDirection();
         });
         this.virtualScroollInit = false;
+        this.subscription = this._service
+            .onClick()
+            .subscribe((event) => {
+            if (!event.target ||
+                !this.isActive ||
+                this._elementRef.nativeElement.contains(event.target)) {
+                return;
+            }
+            this.closeDropdownOnClickOut();
+        });
     }
     onKeyUp(evt) {
         this.searchTerm$.next(evt.target.value);
@@ -2427,6 +2431,7 @@ class AngularMultiSelect {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
+        this._service.unregister(this.id);
     }
     selectGroup(item) {
         if (item.disabled) {
@@ -2553,13 +2558,13 @@ class AngularMultiSelect {
         }
         this.onFilterChange(this.filteredList);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ListFilterPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AngularMultiSelect, selector: "angular2-multiselect", inputs: { data: "data", settings: "settings", loading: "loading" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose", onScrollToEnd: "onScrollToEnd", onFilterSelectAll: "onFilterSelectAll", onFilterDeSelectAll: "onFilterDeSelectAll", onAddFilterNewItem: "onAddFilterNewItem", onGroupSelect: "onGroupSelect", onGroupDeSelect: "onGroupDeSelect" }, host: { listeners: { "document:keyup.escape": "onEscapeDown($event)", "window:scroll": "onScroll($event)" }, properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }, { propertyName: "searchTempl", first: true, predicate: Search, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "selectedListElem", first: true, predicate: ["selectedList"], descendants: true }, { propertyName: "dropdownListElem", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "cuppaDropdown", first: true, predicate: ["cuppaDropdown"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdownOnClickOut()\" [enabled]=\"isActive\" #cuppaDropdown>\n  <div class=\"selected-list\" #selectedList>\n    <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\" [attr.tabindex]=\"0\">\n\n      <span *ngIf=\"selectedItems?.length == 0\">{{ settings.text }}</span>\n      <span *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{ item[settings.labelKey] }}\n                </span>\n            </span>\n      <span class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{ item[settings.labelKey] }}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                        <c-icon name=\"remove\"/>\n                    </span>\n                </div>\n            </span>\n      <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n        <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\"\n             [hidden]=\"k > settings.badgeShowLimit-1\">\n\n          @if (badgeTempl) {\n            <span class=\"c-label\"><c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer></span>\n          } @else {\n            <span class=\"c-label\">{{ item[settings.labelKey] }}</span>\n\n          }\n\n          <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </span>\n        </div>\n      </div>\n      <span class=\"countplaceholder\"\n            *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{ selectedItems?.length - settings.badgeShowLimit }}</span>\n      <span class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\"\n            (click)=\"clearSelection($event);$event.stopPropagation()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </span>\n      @if (isActive) {\n        <span class=\"c-angle-up\"><c-icon [name]=\"'angle-up'\"></c-icon></span>\n      } @else {\n        <span class=\"c-angle-down\"><c-icon [name]=\"'angle-down'\"></c-icon></span>\n      }\n    </div>\n  </div>\n  <div #dropdownList class=\"dropdown-list animated fadeIn\"\n       [ngClass]=\"{'tagToBody': settings.tagToBody}\"\n       [style.width.px]=\"dropDownWidth\"\n       [style.top]=\"dropDownTop\"\n       [style.bottom]=\"dropDownBottom\"\n       [style.left.px]=\"dropDownLeft\"\n       [hidden]=\"!isActive\">\n    <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"\n         class=\"arrow-2\"></div>\n    <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n    <div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n      <div class=\"pure-checkbox select-all\"\n           *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0 && !isDisabledItemPresent\"\n      >\n        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\"\n               [disabled]=\"settings.limitSelection == selectedItems?.length\"\n               [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n        <label [for]=\"id\">\n          <span [hidden]=\"isSelectAll\">{{ settings.selectAllText }}</span>\n          <span [hidden]=\"!isSelectAll\">{{ settings.unSelectAllText }}</span>\n        </label>\n      </div>\n      <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\"/>\n      <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n        <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\"\n              (click)=\"clearSearch()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n        <span *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\"\n              (click)=\"resetInfiniteSearch()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n\n        <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput\n               type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" aria-labelledby=\"searchIcon\">\n        <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput\n               type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" aria-labelledby=\"searchIcon\">\n        <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\"\n               [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" aria-labelledby=\"searchIcon\">\n        <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n        [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n        <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n      </div>\n      <div class=\"filter-select-all\"\n           *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n        <div class=\"pure-checkbox select-all\"\n             *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\"\n             (click)=\"toggleFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isFilterSelectAll\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\" aria-labelledby=\"optionName\"\n                 aria-label=\"option\"/>\n          <label>\n            <span [hidden]=\"isFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n        <div class=\"pure-checkbox select-all\"\n             *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\"\n             (click)=\"toggleFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                 aria-labelledby=\"option\"/>\n          <label>\n            <span [hidden]=\"isFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n      </div>\n      <div class=\"filter-select-all\"\n           *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\"\n             (click)=\"toggleInfiniteFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                 aria-labelledby=\"option\"/>\n          <label>\n            <span [hidden]=\"isInfiniteFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isInfiniteFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n      </div>\n      <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n        <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n          <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{ settings.addNewButtonText }}</button>\n        </div>\n      </div>\n\n      <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n          <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                   aria-labelledby=\"option\"/>\n            <label>{{ item[settings.labelKey] }}</label>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading -->\n      <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n          <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\"\n              [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label>{{ item[settings.labelKey] }}</label>\n          </li>\n        </ul>\n      </div>\n      <!-- custom template -->\n      <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n          <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading and custom template -->\n      <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n          <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\"\n              [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading, group By and custom template -->\n      <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"isSelected(item)\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <!-- group By and custom template -->\n      <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"item.selected\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label>{{ item[settings.labelKey] }}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\"\n                                        [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\"\n                                        class=\"pure-checkbox\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\"\n                                               [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        />\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <!-- lazy loading, group By -->\n      <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\"\n                          [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n          <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n              (vsStart)=\"onScrollEnd($event)\"\n              (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\"\n                                [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\"\n                                       type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                       [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                />\n                                <label>{{ item[settings.labelKey] }}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\"\n                                [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\"\n                                       [checked]=\"isSelected(item)\"\n                                       [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                />\n                                <label>{{ item[settings.labelKey] }}</label>\n                            </li>\n                        </span>\n          </ul>\n        </virtual-scroller>\n      </div>\n      <!-- group By -->\n      <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"item.selected\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label>{{ item[settings.labelKey] }}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\"\n                                        [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\"\n                                        class=\"pure-checkbox\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\"\n                                               [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        />\n                                        <label>{{ val[settings.labelKey] }}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{ settings.noDataLabel }}</h5>\n    </div>\n  </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.cuppa-dropdown{position:relative}.c-btn{display:inline-block;border-width:1px;line-height:1.25;border-radius:3px;font-size:.85rem;padding:5px 10px;cursor:pointer;align-items:center;min-height:38px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0;margin:0;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:4px 22px 4px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .c-remove{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:8px}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .c-angle-down,.selected-list .c-angle-up{width:12px;height:12px;position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.selected-list .countplaceholder{position:absolute;right:45px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:5px 10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list.tagToBody{position:fixed}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:99999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up,.arrow-down{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-down{bottom:-14px;top:unset;transform:rotate(180deg)}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.arrow-down.arrow-2{top:unset;bottom:-16px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative;padding-left:35px;height:35px}.list-filter input{border:0px;width:100%;height:100%;padding:0}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:4px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:4px;right:10px;width:15px;height:15px}.list-filter .c-clear svg{fill:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{background-color:none}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]:disabled+label{color:#ccc}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;text-align:center;transition:all .4s ease;border-radius:3px}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:3px;width:9px;height:4px;margin-top:-5px;border-style:solid;border-width:0 0 2px 2px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center;margin:0;padding:15px 0;font-size:initial}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.grp-item{padding-left:30px!important}.grp-title{padding-bottom:0!important}.grp-title label{margin-bottom:0!important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none!important}.loading-icon{width:20px;position:absolute;right:10px;top:23px;z-index:1}.nodata-label{width:100%;text-align:center;padding:10px 0 0}.btn-container{text-align:center;padding:5px}.clear-all{width:8px;position:absolute;top:50%;right:30px;transform:translateY(-50%)}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.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: i0.forwardRef(() => i3.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i3.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => VirtualScrollerComponent), selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: i0.forwardRef(() => ClickOutsideDirective), selector: "[clickOutside]", inputs: ["enabled"], outputs: ["clickOutside"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item"] }, { kind: "component", type: i0.forwardRef(() => CIcon), selector: "c-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ListFilterPipe }, { token: ClickOutsideService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AngularMultiSelect, selector: "angular2-multiselect", inputs: { data: "data", settings: "settings", loading: "loading" }, outputs: { onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll", onOpen: "onOpen", onClose: "onClose", onScrollToEnd: "onScrollToEnd", onFilterSelectAll: "onFilterSelectAll", onFilterDeSelectAll: "onFilterDeSelectAll", onAddFilterNewItem: "onAddFilterNewItem", onGroupSelect: "onGroupSelect", onGroupDeSelect: "onGroupDeSelect" }, host: { listeners: { "document:keyup.escape": "onEscapeDown($event)", "window:scroll": "onScroll($event)" }, properties: { "class": "defaultSettings.classes" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], queries: [{ propertyName: "itemTempl", first: true, predicate: Item, descendants: true }, { propertyName: "badgeTempl", first: true, predicate: Badge, descendants: true }, { propertyName: "searchTempl", first: true, predicate: Search, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "selectedListElem", first: true, predicate: ["selectedList"], descendants: true }, { propertyName: "dropdownListElem", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "cuppaDropdown", first: true, predicate: ["cuppaDropdown"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cuppa-dropdown\" #cuppaDropdown>\n  <div class=\"selected-list\" #selectedList>\n    <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\" [attr.tabindex]=\"0\">\n\n      <span *ngIf=\"selectedItems?.length == 0\">{{ settings.text }}</span>\n      <span *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{ item[settings.labelKey] }}\n                </span>\n            </span>\n      <span class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{ item[settings.labelKey] }}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                        <c-icon name=\"remove\"/>\n                    </span>\n                </div>\n            </span>\n      <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n        <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\"\n             [hidden]=\"k > settings.badgeShowLimit-1\">\n\n          @if (badgeTempl) {\n            <span class=\"c-label\"><c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer></span>\n          } @else {\n            <span class=\"c-label\">{{ item[settings.labelKey] }}</span>\n\n          }\n\n          <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </span>\n        </div>\n      </div>\n      <span class=\"countplaceholder\"\n            *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{ selectedItems?.length - settings.badgeShowLimit }}</span>\n      <span class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\"\n            (click)=\"clearSelection($event);$event.stopPropagation()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </span>\n      @if (isActive) {\n        <span class=\"c-angle-up\"><c-icon [name]=\"'angle-up'\"></c-icon></span>\n      } @else {\n        <span class=\"c-angle-down\"><c-icon [name]=\"'angle-down'\"></c-icon></span>\n      }\n    </div>\n  </div>\n  <div #dropdownList class=\"dropdown-list animated fadeIn\"\n       [ngClass]=\"{'tagToBody': settings.tagToBody}\"\n       [style.width.px]=\"dropDownWidth\"\n       [style.top]=\"dropDownTop\"\n       [style.bottom]=\"dropDownBottom\"\n       [style.left.px]=\"dropDownLeft\"\n       [hidden]=\"!isActive\">\n    <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"\n         class=\"arrow-2\"></div>\n    <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n    <div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n      <div class=\"pure-checkbox select-all\"\n           *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0 && !isDisabledItemPresent\"\n      >\n        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\"\n               [disabled]=\"settings.limitSelection == selectedItems?.length\"\n               [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n        <label [for]=\"id\">\n          <span [hidden]=\"isSelectAll\">{{ settings.selectAllText }}</span>\n          <span [hidden]=\"!isSelectAll\">{{ settings.unSelectAllText }}</span>\n        </label>\n      </div>\n      <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\"/>\n      <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n        <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\"\n              (click)=\"clearSearch()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n        <span *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\"\n              (click)=\"resetInfiniteSearch()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n\n        <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput\n               type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" aria-labelledby=\"searchIcon\">\n        <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput\n               type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" aria-labelledby=\"searchIcon\">\n        <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\"\n               [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" aria-labelledby=\"searchIcon\">\n        <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n        [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n        <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n      </div>\n      <div class=\"filter-select-all\"\n           *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n        <div class=\"pure-checkbox select-all\"\n             *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\"\n             (click)=\"toggleFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isFilterSelectAll\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\" aria-labelledby=\"optionName\"\n                 aria-label=\"option\"/>\n          <label>\n            <span [hidden]=\"isFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n        <div class=\"pure-checkbox select-all\"\n             *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\"\n             (click)=\"toggleFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                 aria-labelledby=\"option\"/>\n          <label>\n            <span [hidden]=\"isFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n      </div>\n      <div class=\"filter-select-all\"\n           *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\"\n             (click)=\"toggleInfiniteFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                 aria-labelledby=\"option\"/>\n          <label>\n            <span [hidden]=\"isInfiniteFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isInfiniteFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n      </div>\n      <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n        <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n          <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{ settings.addNewButtonText }}</button>\n        </div>\n      </div>\n\n      <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n          <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                   aria-labelledby=\"option\"/>\n            <label>{{ item[settings.labelKey] }}</label>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading -->\n      <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n          <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\"\n              [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label>{{ item[settings.labelKey] }}</label>\n          </li>\n        </ul>\n      </div>\n      <!-- custom template -->\n      <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n          <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading and custom template -->\n      <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n          <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\"\n              [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading, group By and custom template -->\n      <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"isSelected(item)\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <!-- group By and custom template -->\n      <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"item.selected\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label>{{ item[settings.labelKey] }}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\"\n                                        [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\"\n                                        class=\"pure-checkbox\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\"\n                                               [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        />\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <!-- lazy loading, group By -->\n      <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\"\n                          [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n          <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n              (vsStart)=\"onScrollEnd($event)\"\n              (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\"\n                                [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\"\n                                       type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                       [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                />\n                                <label>{{ item[settings.labelKey] }}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\"\n                                [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\"\n                                       [checked]=\"isSelected(item)\"\n                                       [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                />\n                                <label>{{ item[settings.labelKey] }}</label>\n                            </li>\n                        </span>\n          </ul>\n        </virtual-scroller>\n      </div>\n      <!-- group By -->\n      <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"item.selected\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label>{{ item[settings.labelKey] }}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\"\n                                        [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\"\n                                        class=\"pure-checkbox\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\"\n                                               [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        />\n                                        <label>{{ val[settings.labelKey] }}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{ settings.noDataLabel }}</h5>\n    </div>\n  </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.cuppa-dropdown{position:relative}.c-btn{display:inline-block;border-width:1px;line-height:1.25;border-radius:3px;font-size:.85rem;padding:5px 10px;cursor:pointer;align-items:center;min-height:38px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0;margin:0;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:4px 22px 4px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .c-remove{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:8px}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .c-angle-down,.selected-list .c-angle-up{width:12px;height:12px;position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.selected-list .countplaceholder{position:absolute;right:45px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:5px 10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list.tagToBody{position:fixed}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:99999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up,.arrow-down{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-down{bottom:-14px;top:unset;transform:rotate(180deg)}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.arrow-down.arrow-2{top:unset;bottom:-16px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative;padding-left:35px;height:35px}.list-filter input{border:0px;width:100%;height:100%;padding:0}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:4px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:4px;right:10px;width:15px;height:15px}.list-filter .c-clear svg{fill:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{background-color:none}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]:disabled+label{color:#ccc}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;text-align:center;transition:all .4s ease;border-radius:3px}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:3px;width:9px;height:4px;margin-top:-5px;border-style:solid;border-width:0 0 2px 2px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center;margin:0;padding:15px 0;font-size:initial}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.grp-item{padding-left:30px!important}.grp-title{padding-bottom:0!important}.grp-title label{margin-bottom:0!important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none!important}.loading-icon{width:20px;position:absolute;right:10px;top:23px;z-index:1}.nodata-label{width:100%;text-align:center;padding:10px 0 0}.btn-container{text-align:center;padding:5px}.clear-all{width:8px;position:absolute;top:50%;right:30px;transform:translateY(-50%)}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i4.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: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => VirtualScrollerComponent), selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "enableUnequalChildrenSizes", "useMarginInsteadOfTranslate", "modifyOverflowStyleOfParentScroll", "stripedTable", "scrollbarWidth", "scrollbarHeight", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight", "ssrViewportWidth", "ssrViewportHeight", "bufferAmount", "scrollAnimationTime", "resizeBypassRefreshThreshold", "scrollThrottlingTime", "scrollDebounceTime", "checkResizeInterval", "items", "compareItems", "horizontal", "parentScroll"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "component", type: i0.forwardRef(() => TemplateRenderer), selector: "c-templateRenderer", inputs: ["data", "item"] }, { kind: "component", type: i0.forwardRef(() => CIcon), selector: "c-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'angular2-multiselect', host: { '[class]': 'defaultSettings.classes' }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], encapsulation: ViewEncapsulation.None, template: "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdownOnClickOut()\" [enabled]=\"isActive\" #cuppaDropdown>\n  <div class=\"selected-list\" #selectedList>\n    <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\" [attr.tabindex]=\"0\">\n\n      <span *ngIf=\"selectedItems?.length == 0\">{{ settings.text }}</span>\n      <span *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{ item[settings.labelKey] }}\n                </span>\n            </span>\n      <span class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{ item[settings.labelKey] }}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                        <c-icon name=\"remove\"/>\n                    </span>\n                </div>\n            </span>\n      <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n        <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\"\n             [hidden]=\"k > settings.badgeShowLimit-1\">\n\n          @if (badgeTempl) {\n            <span class=\"c-label\"><c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer></span>\n          } @else {\n            <span class=\"c-label\">{{ item[settings.labelKey] }}</span>\n\n          }\n\n          <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </span>\n        </div>\n      </div>\n      <span class=\"countplaceholder\"\n            *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{ selectedItems?.length - settings.badgeShowLimit }}</span>\n      <span class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\"\n            (click)=\"clearSelection($event);$event.stopPropagation()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </span>\n      @if (isActive) {\n        <span class=\"c-angle-up\"><c-icon [name]=\"'angle-up'\"></c-icon></span>\n      } @else {\n        <span class=\"c-angle-down\"><c-icon [name]=\"'angle-down'\"></c-icon></span>\n      }\n    </div>\n  </div>\n  <div #dropdownList class=\"dropdown-list animated fadeIn\"\n       [ngClass]=\"{'tagToBody': settings.tagToBody}\"\n       [style.width.px]=\"dropDownWidth\"\n       [style.top]=\"dropDownTop\"\n       [style.bottom]=\"dropDownBottom\"\n       [style.left.px]=\"dropDownLeft\"\n       [hidden]=\"!isActive\">\n    <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"\n         class=\"arrow-2\"></div>\n    <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n    <div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n      <div class=\"pure-checkbox select-all\"\n           *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0 && !isDisabledItemPresent\"\n      >\n        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\"\n               [disabled]=\"settings.limitSelection == selectedItems?.length\"\n               [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n        <label [for]=\"id\">\n          <span [hidden]=\"isSelectAll\">{{ settings.selectAllText }}</span>\n          <span [hidden]=\"!isSelectAll\">{{ settings.unSelectAllText }}</span>\n        </label>\n      </div>\n      <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\"/>\n      <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n        <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\"\n              (click)=\"clearSearch()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n        <span *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\"\n              (click)=\"resetInfiniteSearch()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n\n        <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput\n               type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" aria-labelledby=\"searchIcon\">\n        <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput\n               type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" aria-labelledby=\"searchIcon\">\n        <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\"\n               [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" aria-labelledby=\"searchIcon\">\n        <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n        [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n        <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n      </div>\n      <div class=\"filter-select-all\"\n           *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n        <div class=\"pure-checkbox select-all\"\n             *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\"\n             (click)=\"toggleFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isFilterSelectAll\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\" aria-labelledby=\"optionName\"\n                 aria-label=\"option\"/>\n          <label>\n            <span [hidden]=\"isFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n        <div class=\"pure-checkbox select-all\"\n             *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\"\n             (click)=\"toggleFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                 aria-labelledby=\"option\"/>\n          <label>\n            <span [hidden]=\"isFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n      </div>\n      <div class=\"filter-select-all\"\n           *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\"\n             (click)=\"toggleInfiniteFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                 aria-labelledby=\"option\"/>\n          <label>\n            <span [hidden]=\"isInfiniteFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isInfiniteFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n      </div>\n      <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n        <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n          <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{ settings.addNewButtonText }}</button>\n        </div>\n      </div>\n\n      <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n          <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                   aria-labelledby=\"option\"/>\n            <label>{{ item[settings.labelKey] }}</label>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading -->\n      <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n          <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\"\n              [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label>{{ item[settings.labelKey] }}</label>\n          </li>\n        </ul>\n      </div>\n      <!-- custom template -->\n      <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n          <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading and custom template -->\n      <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n          <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\"\n              [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading, group By and custom template -->\n      <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"isSelected(item)\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <!-- group By and custom template -->\n      <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"item.selected\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label>{{ item[settings.labelKey] }}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\"\n                                        [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\"\n                                        class=\"pure-checkbox\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\"\n                                               [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        />\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <!-- lazy loading, group By -->\n      <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\"\n                          [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n          <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n              (vsStart)=\"onScrollEnd($event)\"\n              (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\"\n                                [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\"\n                                       type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                       [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                />\n                                <label>{{ item[settings.labelKey] }}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\"\n                                [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\"\n                                       [checked]=\"isSelected(item)\"\n                                       [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                />\n                                <label>{{ item[settings.labelKey] }}</label>\n                            </li>\n                        </span>\n          </ul>\n        </virtual-scroller>\n      </div>\n      <!-- group By -->\n      <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"item.selected\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label>{{ item[settings.labelKey] }}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\"\n                                        [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\"\n                                        class=\"pure-checkbox\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\"\n                                               [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        />\n                                        <label>{{ val[settings.labelKey] }}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{ settings.noDataLabel }}</h5>\n    </div>\n  </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.cuppa-dropdown{position:relative}.c-btn{display:inline-block;border-width:1px;line-height:1.25;border-radius:3px;font-size:.85rem;padding:5px 10px;cursor:pointer;align-items:center;min-height:38px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0;margin:0;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:4px 22px 4px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .c-remove{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:8px}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .c-angle-down,.selected-list .c-angle-up{width:12px;height:12px;position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.selected-list .countplaceholder{position:absolute;right:45px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:5px 10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list.tagToBody{position:fixed}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:99999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up,.arrow-down{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-down{bottom:-14px;top:unset;transform:rotate(180deg)}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.arrow-down.arrow-2{top:unset;bottom:-16px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative;padding-left:35px;height:35px}.list-filter input{border:0px;width:100%;height:100%;padding:0}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:4px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:4px;right:10px;width:15px;height:15px}.list-filter .c-clear svg{fill:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{background-color:none}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]:disabled+label{color:#ccc}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;text-align:center;transition:all .4s ease;border-radius:3px}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:3px;width:9px;height:4px;margin-top:-5px;border-style:solid;border-width:0 0 2px 2px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center;margin:0;padding:15px 0;font-size:initial}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.grp-item{padding-left:30px!important}.grp-title{padding-bottom:0!important}.grp-title label{margin-bottom:0!important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none!important}.loading-icon{width:20px;position:absolute;right:10px;top:23px;z-index:1}.nodata-label{width:100%;text-align:center;padding:10px 0 0}.btn-container{text-align:center;padding:5px}.clear-all{width:8px;position:absolute;top:50%;right:30px;transform:translateY(-50%)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ListFilterPipe }], propDecorators: { data: [{
+            args: [{ selector: 'angular2-multiselect', host: { '[class]': 'defaultSettings.classes' }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], encapsulation: ViewEncapsulation.None, template: "<div class=\"cuppa-dropdown\" #cuppaDropdown>\n  <div class=\"selected-list\" #selectedList>\n    <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\" [attr.tabindex]=\"0\">\n\n      <span *ngIf=\"selectedItems?.length == 0\">{{ settings.text }}</span>\n      <span *ngIf=\"settings.singleSelection && !badgeTempl\">\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    {{ item[settings.labelKey] }}\n                </span>\n            </span>\n      <span class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && settings.singleSelection && badgeTempl \">\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\">\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{ item[settings.labelKey] }}</span>\n\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n                    </span>\n                    <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                        <c-icon name=\"remove\"/>\n                    </span>\n                </div>\n            </span>\n      <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n        <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\"\n             [hidden]=\"k > settings.badgeShowLimit-1\">\n\n          @if (badgeTempl) {\n            <span class=\"c-label\"><c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer></span>\n          } @else {\n            <span class=\"c-label\">{{ item[settings.labelKey] }}</span>\n\n          }\n\n          <span class=\"c-remove\" (click)=\"onItemClick(item,k,$event);$event.stopPropagation()\">\n                        <c-icon [name]=\"'remove'\"></c-icon>\n                    </span>\n        </div>\n      </div>\n      <span class=\"countplaceholder\"\n            *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{ selectedItems?.length - settings.badgeShowLimit }}</span>\n      <span class=\"c-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\"\n            (click)=\"clearSelection($event);$event.stopPropagation()\">\n                <c-icon [name]=\"'remove'\"></c-icon>\n            </span>\n      @if (isActive) {\n        <span class=\"c-angle-up\"><c-icon [name]=\"'angle-up'\"></c-icon></span>\n      } @else {\n        <span class=\"c-angle-down\"><c-icon [name]=\"'angle-down'\"></c-icon></span>\n      }\n    </div>\n  </div>\n  <div #dropdownList class=\"dropdown-list animated fadeIn\"\n       [ngClass]=\"{'tagToBody': settings.tagToBody}\"\n       [style.width.px]=\"dropDownWidth\"\n       [style.top]=\"dropDownTop\"\n       [style.bottom]=\"dropDownBottom\"\n       [style.left.px]=\"dropDownLeft\"\n       [hidden]=\"!isActive\">\n    <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"\n         class=\"arrow-2\"></div>\n    <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n    <div class=\"list-area\" [ngClass]=\"{'single-select-mode': settings.singleSelection }\">\n      <div class=\"pure-checkbox select-all\"\n           *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0 && !isDisabledItemPresent\"\n      >\n        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\"\n               [disabled]=\"settings.limitSelection == selectedItems?.length\"\n               [id]=\"id\" (change)=\"toggleSelectAll($event)\"/>\n        <label [for]=\"id\">\n          <span [hidden]=\"isSelectAll\">{{ settings.selectAllText }}</span>\n          <span [hidden]=\"!isSelectAll\">{{ settings.unSelectAllText }}</span>\n        </label>\n      </div>\n      <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\"/>\n      <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n                <span class=\"c-search\" id=\"searchIcon\">\n                    <c-icon [name]=\"'search'\"></c-icon>\n                </span>\n        <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\"\n              (click)=\"clearSearch()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n        <span *ngIf=\"settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\"\n              (click)=\"resetInfiniteSearch()\">\n                    <c-icon [name]=\"'clear'\"></c-icon>\n                </span>\n\n        <input class=\"c-input\" *ngIf=\"settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput\n               type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"filterGroupedList()\" aria-labelledby=\"searchIcon\">\n        <input class=\"c-input\" *ngIf=\"!settings.groupBy && !settings.lazyLoading && !searchTempl\" #searchInput\n               type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"filteritems($event)\" aria-labelledby=\"searchIcon\">\n        <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\"\n               [placeholder]=\"settings.searchPlaceholderText\"\n               [(ngModel)]=\"filter\" (keyup)=\"onKeyUp($event)\" aria-labelledby=\"searchIcon\">\n        <!--            <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl && settings.groupBy\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n        [(ngModel)]=\"filter\" (keyup)=\"filterGroupList($event)\">-->\n        <c-templateRenderer *ngIf=\"searchTempl\" [data]=\"searchTempl\" [item]=\"item\"></c-templateRenderer>\n      </div>\n      <div class=\"filter-select-all\"\n           *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent\">\n        <div class=\"pure-checkbox select-all\"\n             *ngIf=\"!settings.groupBy && filter?.length > 0 && filterLength > 0  && !settings.singleSelection\"\n             (click)=\"toggleFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isFilterSelectAll\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\" aria-labelledby=\"optionName\"\n                 aria-label=\"option\"/>\n          <label>\n            <span [hidden]=\"isFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n        <div class=\"pure-checkbox select-all\"\n             *ngIf=\"settings.groupBy && filter?.length > 0 && groupedData?.length > 0  && !settings.singleSelection\"\n             (click)=\"toggleFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isFilterSelectAll && filter?.length > 0\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                 aria-labelledby=\"option\"/>\n          <label>\n            <span [hidden]=\"isFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n      </div>\n      <div class=\"filter-select-all\"\n           *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll && !isDisabledItemPresent && !settings.singleSelection\">\n        <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\"\n             (click)=\"toggleInfiniteFilterSelectAll()\">\n          <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\"\n                 [disabled]=\"settings.limitSelection == selectedItems?.length\"\n                 aria-labelledby=\"option\"/>\n          <label>\n            <span [hidden]=\"isInfiniteFilterSelectAll\">{{ settings.filterSelectAllText }}</span>\n            <span [hidden]=\"!isInfiniteFilterSelectAll\">{{ settings.filterUnSelectAllText }}</span>\n          </label>\n        </div>\n      </div>\n      <div class=\"filter-select-all\" *ngIf=\"filter?.length\">\n        <div class=\"btn-container\" *ngIf=\"settings.addNewItemOnFilter\">\n          <button class=\"c-btn btn-iceblue\" (click)=\"addFilterNewItem()\">{{ settings.addNewButtonText }}</button>\n        </div>\n      </div>\n\n      <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n          <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                   aria-labelledby=\"option\"/>\n            <label>{{ item[settings.labelKey] }}</label>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading -->\n      <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n          <li *ngFor=\"let item of scroll.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\"\n              [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label>{{ item[settings.labelKey] }}</label>\n          </li>\n        </ul>\n      </div>\n      <!-- custom template -->\n      <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n          <li *ngFor=\"let item of data; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\" [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading and custom template -->\n      <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll2 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" class=\"lazyContainer\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n          <li *ngFor=\"let item of scroll2.viewPortItems; let i = index;\" (click)=\"onItemClick(item,i,$event)\"\n              class=\"pure-checkbox\"\n              [ngClass]=\"{'selected-item': isSelected(item) == true }\">\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n            />\n            <label></label>\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n          </li>\n        </ul>\n      </div>\n      <!-- lazy loading, group By and custom template -->\n      <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul virtualScroller #scroll3 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n            (vsStart)=\"onScrollEnd($event)\"\n            (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                    <span *ngFor=\"let item of scroll3.viewPortItems; let i = index;\">\n                        <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"isSelected(item)\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                        <li *ngIf=\"item.grpTitle\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label></label>\n                            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <!-- group By and custom template -->\n      <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl != undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData; let i = index;\">\n                        <li (click)=\"selectGroup(item)\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"item.selected\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label>{{ item[settings.labelKey] }}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\"\n                                        [ngClass]=\"{'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\"\n                                        class=\"pure-checkbox\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\"\n                                               [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        />\n                                        <label></label>\n                                        <c-templateRenderer [data]=\"itemTempl\" [item]=\"val\"></c-templateRenderer>\n                                    </li>\n                                </span>\n                            </ul>\n\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <!-- lazy loading, group By -->\n      <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <virtual-scroller [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\"\n                          [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n          <ul virtualScroller #scroll4 [enableUnequalChildrenSizes]=\"randomSize\" [items]=\"virtualdata\"\n              (vsStart)=\"onScrollEnd($event)\"\n              (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\" class=\"lazyContainer\">\n                        <span *ngFor=\"let item of scroll4.viewPortItems; let i = index;\">\n                            <li *ngIf=\"item.grpTitle\"\n                                [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle && !settings.singleSelection\"\n                                       type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                       [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                />\n                                <label>{{ item[settings.labelKey] }}</label>\n                            </li>\n                            <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\"\n                                [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection, 'selected-item': isSelected(item) == true }\"\n                                class=\"pure-checkbox\">\n                                <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\"\n                                       [checked]=\"isSelected(item)\"\n                                       [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                                />\n                                <label>{{ item[settings.labelKey] }}</label>\n                            </li>\n                        </span>\n          </ul>\n        </virtual-scroller>\n      </div>\n      <!-- group By -->\n      <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl == undefined\"\n           [style.maxHeight]=\"settings.maxHeight+'px'\"\n           style=\"overflow: auto;\">\n        <ul class=\"lazyContainer\">\n                    <span *ngFor=\"let item of groupedData ; let i = index;\">\n                        <li (click)=\"selectGroup(item)\"\n                            [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle && !settings.singleSelection}\"\n                            class=\"pure-checkbox\">\n                            <input *ngIf=\"settings.showCheckbox && !settings.singleSelection\" type=\"checkbox\"\n                                   [checked]=\"item.selected\"\n                                   [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(item)) || item.disabled\"\n                            />\n                            <label>{{ item[settings.labelKey] }}</label>\n                            <ul class=\"lazyContainer\">\n                                <span *ngFor=\"let val of item.list ; let j = index;\">\n                                    <li (click)=\"onItemClick(val,j,$event); $event.stopPropagation()\"\n                                        [ngClass]=\"{'selected-item': isSelected(val) == true,'grp-title': val.grpTitle,'grp-item': !val.grpTitle && !settings.singleSelection}\"\n                                        class=\"pure-checkbox\">\n                                        <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(val)\"\n                                               [disabled]=\"(settings.limitSelection == selectedItems?.length && !isSelected(val)) || val.disabled\"\n                                        />\n                                        <label>{{ val[settings.labelKey] }}</label>\n                                    </li>\n                                </span>\n                            </ul>\n                        </li>\n                    </span>\n        </ul>\n      </div>\n      <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{ settings.noDataLabel }}</h5>\n    </div>\n  </div>\n</div>\n", styles: ["virtual-scroll{display:block;width:100%}.cuppa-dropdown{position:relative}.c-btn{display:inline-block;border-width:1px;line-height:1.25;border-radius:3px;font-size:.85rem;padding:5px 10px;cursor:pointer;align-items:center;min-height:38px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0;margin:0;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:4px 22px 4px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .c-remove{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:8px}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .c-angle-down,.selected-list .c-angle-up{width:12px;height:12px;position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.selected-list .countplaceholder{position:absolute;right:45px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:5px 10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list.tagToBody{position:fixed}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:99999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-up,.arrow-down{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-down{bottom:-14px;top:unset;transform:rotate(180deg)}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.arrow-down.arrow-2{top:unset;bottom:-16px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative;padding-left:35px;height:35px}.list-filter input{border:0px;width:100%;height:100%;padding:0}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:4px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:4px;right:10px;width:15px;height:15px}.list-filter .c-clear svg{fill:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{background-color:none}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]:disabled+label{color:#ccc}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;text-align:center;transition:all .4s ease;border-radius:3px}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:\"\";position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{background-color:transparent;top:50%;left:3px;width:9px;height:4px;margin-top:-5px;border-style:solid;border-width:0 0 2px 2px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:checked+label:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center;margin:0;padding:15px 0;font-size:initial}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.grp-item{padding-left:30px!important}.grp-title{padding-bottom:0!important}.grp-title label{margin-bottom:0!important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none!important}.loading-icon{width:20px;position:absolute;right:10px;top:23px;z-index:1}.nodata-label{width:100%;text-align:center;padding:10px 0 0}.btn-container{text-align:center;padding:5px}.clear-all{width:8px;position:absolute;top:50%;right:30px;transform:translateY(-50%)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ListFilterPipe }, { type: ClickOutsideService }], propDecorators: { data: [{
                 type: Input
             }], settings: [{
                 type: Input
@@ -2634,22 +2639,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 class AngularMultiSelectModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, declarations: [AngularMultiSelect, ClickOutsideDirective,
-            ScrollDirective,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, declarations: [AngularMultiSelect, ScrollDirective,
             ListFilterPipe,
             Item,
             TemplateRenderer,
             Badge,
             Search,
-            CIcon], imports: [CommonModule, FormsModule, VirtualScrollerModule], exports: [AngularMultiSelect, ClickOutsideDirective,
-            ScrollDirective,
+            CIcon], imports: [CommonModule, FormsModule, VirtualScrollerModule], exports: [AngularMultiSelect, ScrollDirective,
             ListFilterPipe,
             Item,
             TemplateRenderer,
             Badge,
             Search,
             CIcon] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, providers: [DataService, ListFilterPipe], imports: [CommonModule, FormsModule, VirtualScrollerModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, providers: [ListFilterPipe, ClickOutsideService], imports: [CommonModule, FormsModule, VirtualScrollerModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularMultiSelectModule, decorators: [{
             type: NgModule,
@@ -2657,7 +2660,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     imports: [CommonModule, FormsModule, VirtualScrollerModule],
                     declarations: [
                         AngularMultiSelect,
-                        ClickOutsideDirective,
                         ScrollDirective,
                         ListFilterPipe,
                         Item,
@@ -2668,7 +2670,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     exports: [
                         AngularMultiSelect,
-                        ClickOutsideDirective,
                         ScrollDirective,
                         ListFilterPipe,
                         Item,
@@ -2677,7 +2678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         Search,
                         CIcon,
                     ],
-                    providers: [DataService, ListFilterPipe],
+                    providers: [ListFilterPipe, ClickOutsideService],
                 }]
         }] });
 
@@ -2685,5 +2686,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularMultiSelect, AngularMultiSelectModule, Badge, CIcon, ClickOutsideDirective, Item, ListFilterPipe, ScrollDirective, Search, TemplateRenderer };
-//# sourceMappingURL=angular-multiselect.mjs.map
+export { AngularMultiSelect, AngularMultiSelectModule, Badge, CIcon, Item, ListFilterPipe, ScrollDirective, Search, TemplateRenderer };
+//# sourceMappingURL=angular-multiselect3.mjs.map