angular2-multiselect-dropdown
Advanced tools
Comparing version 3.1.1 to 3.2.1
@@ -7,2 +7,3 @@ import { OnInit, OnDestroy, SimpleChanges, OnChanges, ChangeDetectorRef, AfterViewChecked, EventEmitter, ElementRef } from '@angular/core'; | ||
| import { Subscription } from 'rxjs'; | ||
| import { ChangeEvent } from './virtual-scroll'; | ||
| export declare const DROPDOWN_CONTROL_VALUE_ACCESSOR: any; | ||
@@ -16,2 +17,3 @@ export declare const DROPDOWN_CONTROL_VALIDATION: any; | ||
| settings: DropdownSettings; | ||
| loading: boolean; | ||
| onSelect: EventEmitter<any>; | ||
@@ -23,2 +25,3 @@ onDeSelect: EventEmitter<any>; | ||
| onClose: EventEmitter<any>; | ||
| onScrollToEnd: EventEmitter<any>; | ||
| itemTempl: Item; | ||
@@ -82,11 +85,11 @@ badgeTempl: Badge; | ||
| cloneArray(arr: any): any; | ||
| updateGroupInfo(item: any): void; | ||
| transformData(arr: Array<any>, field: any): Array<any>; | ||
| renderChunk(fromPos: any, howMany: any): void; | ||
| onScroll(e: any): void; | ||
| updateView(scrollTop: any): void; | ||
| filterInfiniteList(evt: any): void; | ||
| resetInfiniteSearch(): void; | ||
| onScrollEnd(e: ChangeEvent): void; | ||
| ngOnDestroy(): void; | ||
| selectGroup(item: any): void; | ||
| } | ||
| export declare class AngularMultiSelectModule { | ||
| } |
@@ -33,2 +33,3 @@ import { Component, NgModule, ChangeDetectorRef, ViewEncapsulation, ContentChild, ViewChild, forwardRef, Input, Output, EventEmitter, ElementRef } from '@angular/core'; | ||
| this.onClose = new EventEmitter(); | ||
| this.onScrollToEnd = new EventEmitter(); | ||
| this.isActive = false; | ||
@@ -66,3 +67,4 @@ this.isSelectAll = false; | ||
| position: 'bottom', | ||
| enableFilterSelectAll: true | ||
| enableFilterSelectAll: true, | ||
| selectGroup: false | ||
| }; | ||
@@ -80,10 +82,3 @@ this.filteredList = []; | ||
| } | ||
| this.totalRows = (this.data && this.data.length); | ||
| this.cachedItems = this.data; | ||
| this.screenItemsLen = Math.ceil(this.settings.maxHeight / this.itemHeight); | ||
| this.cachedItemsLen = this.screenItemsLen * 3; | ||
| this.totalHeight = this.itemHeight * this.totalRows; | ||
| this.maxBuffer = this.screenItemsLen * this.itemHeight; | ||
| this.lastScrolled = 0; | ||
| this.renderChunk(0, this.cachedItemsLen / 2); | ||
| this.cachedItems = this.cloneArray(this.data); | ||
| if (this.settings.position == 'top') { | ||
@@ -116,2 +111,3 @@ setTimeout(function () { | ||
| } | ||
| this.cachedItems = this.cloneArray(this.data); | ||
| } | ||
@@ -121,2 +117,5 @@ if (changes.settings && !changes.settings.firstChange) { | ||
| } | ||
| if (changes.loading) { | ||
| console.log(this.loading); | ||
| } | ||
| }; | ||
@@ -169,2 +168,5 @@ AngularMultiSelect.prototype.ngDoCheck = function () { | ||
| } | ||
| if (this.settings.groupBy) { | ||
| this.updateGroupInfo(item); | ||
| } | ||
| }; | ||
@@ -270,7 +272,4 @@ AngularMultiSelect.prototype.validate = function (c) { | ||
| this.searchInput.nativeElement.value = ""; | ||
| this.data = []; | ||
| this.data = this.cachedItems; | ||
| this.totalHeight = this.itemHeight * this.data.length; | ||
| this.totalRows = this.data.length; | ||
| this.updateView(this.scrollTop); | ||
| //this.data = []; | ||
| //this.data = this.cachedItems; | ||
| } | ||
@@ -287,2 +286,7 @@ if (this.searchInput) { | ||
| this.selectedItems = []; | ||
| if (this.settings.groupBy) { | ||
| this.groupedData.forEach(function (obj) { | ||
| obj.selected = true; | ||
| }); | ||
| } | ||
| this.selectedItems = this.data.slice(); | ||
@@ -295,2 +299,7 @@ this.isSelectAll = true; | ||
| else { | ||
| if (this.settings.groupBy) { | ||
| this.groupedData.forEach(function (obj) { | ||
| obj.selected = false; | ||
| }); | ||
| } | ||
| this.selectedItems = []; | ||
@@ -405,56 +414,23 @@ this.isSelectAll = false; | ||
| }; | ||
| /* filterGroupList(evt: any) { | ||
| this.groupedData = this.cloneArray(this.groupCachedItems); | ||
| if (evt.target.value.toString() != '') { | ||
| this.groupedData.forEach((obj: any) => { | ||
| var filteredElems: Array<any> = []; | ||
| obj.value.forEach((el: any) => { | ||
| if (this.settings.searchBy.length > 0) { | ||
| for (var t = 0; t < this.settings.searchBy.length; t++) { | ||
| var key: any = this.settings.searchBy[t]; | ||
| if (el[key] && el[key] != "") { | ||
| if (el[key].toString().toLowerCase().indexOf(evt.target.value.toString().toLowerCase()) >= 0) { | ||
| filteredElems.push(el); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| for (var prop in el) { | ||
| if (el[prop].toString().toLowerCase().indexOf(evt.target.value.toString().toLowerCase()) >= 0) { | ||
| filteredElems.push(el); | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| obj.value.splice(0, obj.value.length); | ||
| filteredElems.forEach(i => { | ||
| obj.value.push(i); | ||
| }); | ||
| }); | ||
| let cnt = 0; | ||
| this.filterLength = 0; | ||
| this.groupedData.forEach((item: any) => { | ||
| item.value.forEach((obj: any) => { | ||
| this.filterLength++; | ||
| if (this.isSelected(obj)) { | ||
| AngularMultiSelect.prototype.updateGroupInfo = function (item) { | ||
| var _this = this; | ||
| this.groupedData.forEach(function (obj) { | ||
| var cnt = 0; | ||
| if (obj.grpTitle && item[_this.settings.groupBy] == obj[_this.settings.groupBy]) { | ||
| if (obj.list) { | ||
| obj.list.forEach(function (el) { | ||
| if (_this.isSelected(el)) { | ||
| cnt++; | ||
| } | ||
| }); | ||
| }); | ||
| if (cnt > 0 && this.filterLength == cnt) { | ||
| this.isFilterSelectAll = true; | ||
| } | ||
| else if (cnt > 0 && this.filterLength != cnt) { | ||
| this.isFilterSelectAll = false; | ||
| } | ||
| } | ||
| else if (evt.target.value.toString() == '' && this.groupCachedItems.length > 0) { | ||
| this.clearSearch(); | ||
| if (obj.list && cnt === obj.list.length) { | ||
| obj.selected = true; | ||
| } | ||
| }*/ | ||
| else { | ||
| obj.selected = false; | ||
| } | ||
| }); | ||
| }; | ||
| AngularMultiSelect.prototype.transformData = function (arr, field) { | ||
@@ -476,33 +452,15 @@ var _this = this; | ||
| obj[_this.settings.labelKey] = x; | ||
| tempArr.push(obj); | ||
| obj[_this.settings.groupBy] = x; | ||
| obj['selected'] = false; | ||
| obj['list'] = []; | ||
| groupedObj[x].forEach(function (item) { | ||
| tempArr.push(JSON.parse(JSON.stringify(item))); | ||
| obj.list.push(item); | ||
| }); | ||
| // tempArr.push({ key: x, value: groupedObj[x] }); | ||
| tempArr.push(obj); | ||
| obj.list.forEach(function (item) { | ||
| tempArr.push(item); | ||
| }); | ||
| }); | ||
| return tempArr; | ||
| }; | ||
| AngularMultiSelect.prototype.renderChunk = function (fromPos, howMany) { | ||
| this.chunkArray = []; | ||
| this.chunkIndex = []; | ||
| var finalItem = fromPos + howMany; | ||
| if (finalItem > this.totalRows) | ||
| finalItem = this.totalRows; | ||
| for (var i = fromPos; i < finalItem; i++) { | ||
| this.chunkIndex.push((i * this.itemHeight) + 'px'); | ||
| this.chunkArray.push(this.data[i]); | ||
| } | ||
| }; | ||
| AngularMultiSelect.prototype.onScroll = function (e) { | ||
| this.scrollTop = e.target.scrollTop; | ||
| this.updateView(this.scrollTop); | ||
| }; | ||
| AngularMultiSelect.prototype.updateView = function (scrollTop) { | ||
| var scrollPos = scrollTop ? scrollTop : 0; | ||
| var first = (scrollPos / this.itemHeight) - this.screenItemsLen; | ||
| var firstTemp = "" + first; | ||
| first = parseInt(firstTemp) < 0 ? 0 : parseInt(firstTemp); | ||
| this.renderChunk(first, this.cachedItemsLen); | ||
| this.lastRepaintY = scrollPos; | ||
| }; | ||
| AngularMultiSelect.prototype.filterInfiniteList = function (evt) { | ||
@@ -525,9 +483,5 @@ var filteredElems = []; | ||
| }); | ||
| //this.cachedItems = this.data; | ||
| //this.totalHeight = this.itemHeight * filteredElems.length; | ||
| //this.totalRows = filteredElems.length; | ||
| this.data = []; | ||
| this.data = filteredElems; | ||
| this.infiniteFilterLength = this.data.length; | ||
| //this.updateView(this.scrollTop); | ||
| } | ||
@@ -548,9 +502,5 @@ if (evt.target.value.toString() != '' && this.settings.groupBy) { | ||
| }); | ||
| //this.cachedItems = this.data; | ||
| //this.totalHeight = this.itemHeight * filteredElems.length; | ||
| //this.totalRows = filteredElems.length; | ||
| this.groupedData = []; | ||
| this.groupedData = filteredElems; | ||
| this.infiniteFilterLength = this.groupedData.length; | ||
| //this.updateView(this.scrollTop); | ||
| } | ||
@@ -560,6 +510,3 @@ else if (evt.target.value.toString() == '' && this.cachedItems.length > 0) { | ||
| this.data = this.cachedItems; | ||
| /*this.totalHeight = this.itemHeight * this.data.length; | ||
| this.totalRows = this.data.length;*/ | ||
| this.infiniteFilterLength = 0; | ||
| // this.updateView(this.scrollTop); | ||
| } | ||
@@ -575,11 +522,31 @@ }; | ||
| }; | ||
| AngularMultiSelect.prototype.onScrollEnd = function (e) { | ||
| this.onScrollToEnd.emit(e); | ||
| }; | ||
| AngularMultiSelect.prototype.ngOnDestroy = function () { | ||
| this.subscription.unsubscribe(); | ||
| }; | ||
| AngularMultiSelect.prototype.selectGroup = function (item) { | ||
| var _this = this; | ||
| if (item.selected) { | ||
| item.selected = false; | ||
| item.list.forEach(function (obj) { | ||
| _this.removeSelected(obj); | ||
| }); | ||
| } | ||
| else { | ||
| item.selected = true; | ||
| item.list.forEach(function (obj) { | ||
| if (!_this.isSelected(obj)) { | ||
| _this.addSelected(obj); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| AngularMultiSelect.decorators = [ | ||
| { type: Component, args: [{ | ||
| selector: 'angular2-multiselect', | ||
| template: "\n <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\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);\">\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\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\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\n </span>\n </div>\n </div>\n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span *ngIf=\"!isActive\" class=\"c-angle-down\">\n <c-icon [name]=\"'angle-down'\"></c-icon>\n </span>\n <span *ngIf=\"isActive\" class=\"c-angle-up\">\n <c-icon [name]=\"'angle-up'\"></c-icon>\n\n </span>\n </div>\n </div>\n <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]=\"{'dropdown-list-top': settings.position == 'top'}\"\n [hidden]=\"!isActive\">\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0\"\n (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div>\n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n <span class=\"c-search\">\n <c-icon [name]=\"'search'\"></c-icon>\n </span>\n <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (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\" (click)=\"resetInfiniteSearch()\">\n <c-icon [name]=\"'clear'\"></c-icon>\n </span>\n\n <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\">\n <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\" (keyup)=\"filterInfiniteList($event)\">\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\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && filterLength > 0\" (click)=\"toggleFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\" />\n <label>\n <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n <label *ngIf=\"filterLength == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">{{settings.noDataLabel}}</label>\n </div>\n <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n </div>\n\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems; let i = index;\">\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\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 ", | ||
| template: "\n <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\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);\">\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\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\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\n </span>\n </div>\n </div>\n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span *ngIf=\"!isActive\" class=\"c-angle-down\">\n <c-icon [name]=\"'angle-down'\"></c-icon>\n </span>\n <span *ngIf=\"isActive\" class=\"c-angle-up\">\n <c-icon [name]=\"'angle-up'\"></c-icon>\n\n </span>\n </div>\n </div>\n <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]=\"{'dropdown-list-top': settings.position == 'top'}\"\n [hidden]=\"!isActive\">\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0\"\n (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\"/>\n </div>\n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n <span class=\"c-search\">\n <c-icon [name]=\"'search'\"></c-icon>\n </span>\n <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (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\" (click)=\"resetInfiniteSearch()\">\n <c-icon [name]=\"'clear'\"></c-icon>\n </span>\n\n <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\">\n <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\" (keyup)=\"filterInfiniteList($event)\">\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\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && filterLength > 0\" (click)=\"toggleFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\" />\n <label>\n <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n <label *ngIf=\"filterLength == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">{{settings.noDataLabel}}</label>\n </div>\n <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n </div>\n\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item.id}}-{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems; let i = index;\">\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"selectGroup(item,i,$event)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\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 ", | ||
| host: { '[class]': 'defaultSettings.classes' }, | ||
| styles: ["\n 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:14px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:2px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative;padding-right:25px}.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:10px}.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:15px;height:15px;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:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 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:#cccccc;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:0px}.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:0px}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:9px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:10px;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:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.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:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{background-color:white}.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:0px;padding:15px 0px;font-size:initial}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}.grp-item{padding-left:30px !important}.grp-title{padding-bottom:0px !important}.grp-title label{margin-bottom:0px !important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none !important}\n "], | ||
| styles: ["\n 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:14px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:2px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative;padding-right:25px}.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:10px}.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:15px;height:15px;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:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 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:#cccccc;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:0px}.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:0px}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:9px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:10px;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:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.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:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{background-color:white}.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:0px;padding:15px 0px;font-size:initial}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}.grp-item{padding-left:30px !important}.grp-title{padding-bottom:0px !important}.grp-title label{margin-bottom:0px !important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none !important}.loading-icon{width:20px;float:right}\n "], | ||
| providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION], | ||
@@ -598,2 +565,3 @@ encapsulation: ViewEncapsulation.None, | ||
| 'settings': [{ type: Input },], | ||
| 'loading': [{ type: Input },], | ||
| 'onSelect': [{ type: Output, args: ['onSelect',] },], | ||
@@ -605,2 +573,3 @@ 'onDeSelect': [{ type: Output, args: ['onDeSelect',] },], | ||
| 'onClose': [{ type: Output, args: ['onClose',] },], | ||
| 'onScrollToEnd': [{ type: Output, args: ['onScrollToEnd',] },], | ||
| 'itemTempl': [{ type: ContentChild, args: [Item,] },], | ||
@@ -607,0 +576,0 @@ 'badgeTempl': [{ type: ContentChild, args: [Badge,] },], |
@@ -1,1 +0,1 @@ | ||
| [{"__symbolic":"module","version":3,"metadata":{"DROPDOWN_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"DROPDOWN_CONTROL_VALIDATION":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"\n <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\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);\">\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\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\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\n </span>\n </div>\n </div>\n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span *ngIf=\"!isActive\" class=\"c-angle-down\">\n <c-icon [name]=\"'angle-down'\"></c-icon>\n </span>\n <span *ngIf=\"isActive\" class=\"c-angle-up\">\n <c-icon [name]=\"'angle-up'\"></c-icon>\n\n </span>\n </div>\n </div>\n <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]=\"{'dropdown-list-top': settings.position == 'top'}\"\n [hidden]=\"!isActive\">\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0\"\n (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div>\n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n <span class=\"c-search\">\n <c-icon [name]=\"'search'\"></c-icon>\n </span>\n <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (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\" (click)=\"resetInfiniteSearch()\">\n <c-icon [name]=\"'clear'\"></c-icon>\n </span>\n\n <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\">\n <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\" (keyup)=\"filterInfiniteList($event)\">\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\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && filterLength > 0\" (click)=\"toggleFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\" />\n <label>\n <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n <label *ngIf=\"filterLength == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">{{settings.noDataLabel}}</label>\n </div>\n <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n </div>\n\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems; let i = index;\">\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\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 ","host":{"[class]":"defaultSettings.classes","$quoted$":["[class]"]},"styles":["\n 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:14px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:2px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative;padding-right:25px}.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:10px}.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:15px;height:15px;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:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 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:#cccccc;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:0px}.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:0px}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:9px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:10px;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:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.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:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{background-color:white}.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:0px;padding:15px 0px;font-size:initial}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}.grp-item{padding-left:30px !important}.grp-title{padding-bottom:0px !important}.grp-title label{margin-bottom:0px !important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none !important}\n "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALIDATION"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onOpen"]}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onClose"]}]}],"itemTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Item"}]}]}],"badgeTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Badge"}]}]}],"searchTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Search"}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchInput"]}]}],"selectedListElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selectedList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./multiselect.service","name":"DataService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}],"toggleFilterSelectAll":[{"__symbolic":"method"}],"toggleInfiniteFilterSelectAll":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"onFilterChange":[{"__symbolic":"method"}],"cloneArray":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"renderChunk":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateView":[{"__symbolic":"method"}],"filterInfiniteList":[{"__symbolic":"method"}],"resetInfiniteSearch":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"ScrollDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"styleDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./menu-item","name":"Item"},{"__symbolic":"reference","module":"./menu-item","name":"TemplateRenderer"},{"__symbolic":"reference","module":"./menu-item","name":"Badge"},{"__symbolic":"reference","module":"./menu-item","name":"Search"},{"__symbolic":"reference","module":"./clickOutside","name":"setPosition"},{"__symbolic":"reference","module":"./virtual-scroll","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"./menu-item","name":"CIcon"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"ScrollDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"styleDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./menu-item","name":"Item"},{"__symbolic":"reference","module":"./menu-item","name":"TemplateRenderer"},{"__symbolic":"reference","module":"./menu-item","name":"Badge"},{"__symbolic":"reference","module":"./menu-item","name":"Search"},{"__symbolic":"reference","module":"./clickOutside","name":"setPosition"},{"__symbolic":"reference","module":"./virtual-scroll","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"./menu-item","name":"CIcon"}],"providers":[{"__symbolic":"reference","module":"./multiselect.service","name":"DataService"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"DROPDOWN_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"DROPDOWN_CONTROL_VALIDATION":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"\n <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\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);\">\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\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\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\n </span>\n </div>\n </div>\n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span *ngIf=\"!isActive\" class=\"c-angle-down\">\n <c-icon [name]=\"'angle-down'\"></c-icon>\n </span>\n <span *ngIf=\"isActive\" class=\"c-angle-up\">\n <c-icon [name]=\"'angle-up'\"></c-icon>\n\n </span>\n </div>\n </div>\n <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]=\"{'dropdown-list-top': settings.position == 'top'}\"\n [hidden]=\"!isActive\">\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0\"\n (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div>\n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n <span class=\"c-search\">\n <c-icon [name]=\"'search'\"></c-icon>\n </span>\n <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (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\" (click)=\"resetInfiniteSearch()\">\n <c-icon [name]=\"'clear'\"></c-icon>\n </span>\n\n <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\">\n <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\" (keyup)=\"filterInfiniteList($event)\">\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\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && filterLength > 0\" (click)=\"toggleFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\" />\n <label>\n <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n <label *ngIf=\"filterLength == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">{{settings.noDataLabel}}</label>\n </div>\n <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n </div>\n\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems; let i = index;\">\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\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 ","host":{"[class]":"defaultSettings.classes"},"styles":["\n 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:14px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:2px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative;padding-right:25px}.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:10px}.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:15px;height:15px;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:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 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:#cccccc;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:0px}.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:0px}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:9px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:10px;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:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.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:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{background-color:white}.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:0px;padding:15px 0px;font-size:initial}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}.grp-item{padding-left:30px !important}.grp-title{padding-bottom:0px !important}.grp-title label{margin-bottom:0px !important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none !important}\n "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALIDATION"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onOpen"]}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onClose"]}]}],"itemTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Item"}]}]}],"badgeTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Badge"}]}]}],"searchTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Search"}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchInput"]}]}],"selectedListElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selectedList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./multiselect.service","name":"DataService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}],"toggleFilterSelectAll":[{"__symbolic":"method"}],"toggleInfiniteFilterSelectAll":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"onFilterChange":[{"__symbolic":"method"}],"cloneArray":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"renderChunk":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateView":[{"__symbolic":"method"}],"filterInfiniteList":[{"__symbolic":"method"}],"resetInfiniteSearch":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"ScrollDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"styleDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./menu-item","name":"Item"},{"__symbolic":"reference","module":"./menu-item","name":"TemplateRenderer"},{"__symbolic":"reference","module":"./menu-item","name":"Badge"},{"__symbolic":"reference","module":"./menu-item","name":"Search"},{"__symbolic":"reference","module":"./clickOutside","name":"setPosition"},{"__symbolic":"reference","module":"./virtual-scroll","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"./menu-item","name":"CIcon"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"ScrollDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"styleDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./menu-item","name":"Item"},{"__symbolic":"reference","module":"./menu-item","name":"TemplateRenderer"},{"__symbolic":"reference","module":"./menu-item","name":"Badge"},{"__symbolic":"reference","module":"./menu-item","name":"Search"},{"__symbolic":"reference","module":"./clickOutside","name":"setPosition"},{"__symbolic":"reference","module":"./virtual-scroll","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"./menu-item","name":"CIcon"}],"providers":[{"__symbolic":"reference","module":"./multiselect.service","name":"DataService"}]}]}]}}}] | ||
| [{"__symbolic":"module","version":3,"metadata":{"DROPDOWN_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"DROPDOWN_CONTROL_VALIDATION":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"\n <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\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);\">\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\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\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\n </span>\n </div>\n </div>\n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span *ngIf=\"!isActive\" class=\"c-angle-down\">\n <c-icon [name]=\"'angle-down'\"></c-icon>\n </span>\n <span *ngIf=\"isActive\" class=\"c-angle-up\">\n <c-icon [name]=\"'angle-up'\"></c-icon>\n\n </span>\n </div>\n </div>\n <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]=\"{'dropdown-list-top': settings.position == 'top'}\"\n [hidden]=\"!isActive\">\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0\"\n (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\"/>\n </div>\n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n <span class=\"c-search\">\n <c-icon [name]=\"'search'\"></c-icon>\n </span>\n <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (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\" (click)=\"resetInfiniteSearch()\">\n <c-icon [name]=\"'clear'\"></c-icon>\n </span>\n\n <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\">\n <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\" (keyup)=\"filterInfiniteList($event)\">\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\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && filterLength > 0\" (click)=\"toggleFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\" />\n <label>\n <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n <label *ngIf=\"filterLength == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">{{settings.noDataLabel}}</label>\n </div>\n <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n </div>\n\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item.id}}-{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems; let i = index;\">\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"selectGroup(item,i,$event)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\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 ","host":{"[class]":"defaultSettings.classes","$quoted$":["[class]"]},"styles":["\n 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:14px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:2px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative;padding-right:25px}.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:10px}.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:15px;height:15px;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:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 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:#cccccc;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:0px}.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:0px}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:9px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:10px;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:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.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:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{background-color:white}.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:0px;padding:15px 0px;font-size:initial}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}.grp-item{padding-left:30px !important}.grp-title{padding-bottom:0px !important}.grp-title label{margin-bottom:0px !important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none !important}.loading-icon{width:20px;float:right}\n "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALIDATION"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onOpen"]}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onClose"]}]}],"onScrollToEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onScrollToEnd"]}]}],"itemTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Item"}]}]}],"badgeTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Badge"}]}]}],"searchTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Search"}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchInput"]}]}],"selectedListElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selectedList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./multiselect.service","name":"DataService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}],"toggleFilterSelectAll":[{"__symbolic":"method"}],"toggleInfiniteFilterSelectAll":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"onFilterChange":[{"__symbolic":"method"}],"cloneArray":[{"__symbolic":"method"}],"updateGroupInfo":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"filterInfiniteList":[{"__symbolic":"method"}],"resetInfiniteSearch":[{"__symbolic":"method"}],"onScrollEnd":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectGroup":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"ScrollDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"styleDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./menu-item","name":"Item"},{"__symbolic":"reference","module":"./menu-item","name":"TemplateRenderer"},{"__symbolic":"reference","module":"./menu-item","name":"Badge"},{"__symbolic":"reference","module":"./menu-item","name":"Search"},{"__symbolic":"reference","module":"./clickOutside","name":"setPosition"},{"__symbolic":"reference","module":"./virtual-scroll","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"./menu-item","name":"CIcon"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"ScrollDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"styleDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./menu-item","name":"Item"},{"__symbolic":"reference","module":"./menu-item","name":"TemplateRenderer"},{"__symbolic":"reference","module":"./menu-item","name":"Badge"},{"__symbolic":"reference","module":"./menu-item","name":"Search"},{"__symbolic":"reference","module":"./clickOutside","name":"setPosition"},{"__symbolic":"reference","module":"./virtual-scroll","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"./menu-item","name":"CIcon"}],"providers":[{"__symbolic":"reference","module":"./multiselect.service","name":"DataService"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"DROPDOWN_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"DROPDOWN_CONTROL_VALIDATION":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"\n <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\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);\">\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\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\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\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)\">\n <c-icon [name]=\"'remove'\"></c-icon>\n </span>\n </div>\n </div>\n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span *ngIf=\"!isActive\" class=\"c-angle-down\">\n <c-icon [name]=\"'angle-down'\"></c-icon>\n </span>\n <span *ngIf=\"isActive\" class=\"c-angle-up\">\n <c-icon [name]=\"'angle-up'\"></c-icon>\n\n </span>\n </div>\n </div>\n <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]=\"{'dropdown-list-top': settings.position == 'top'}\"\n [hidden]=\"!isActive\">\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\" class=\"arrow-2\"></div>\n <div [ngClass]=\"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection && data?.length > 0\"\n (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n <img class=\"loading-icon\" *ngIf=\"loading\" src=\"assets/img/loading.gif\"/>\n </div>\n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\">\n <span class=\"c-search\">\n <c-icon [name]=\"'search'\"></c-icon>\n </span>\n <span *ngIf=\"!settings.lazyLoading\" [hidden]=\"filter == undefined || filter?.length == 0\" class=\"c-clear\" (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\" (click)=\"resetInfiniteSearch()\">\n <c-icon [name]=\"'clear'\"></c-icon>\n </span>\n\n <input class=\"c-input\" *ngIf=\"!settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\">\n <input class=\"c-input\" *ngIf=\"settings.lazyLoading && !searchTempl\" #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\"\n [(ngModel)]=\"filter\" (keyup)=\"filterInfiniteList($event)\">\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\" *ngIf=\"!settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && filterLength > 0\" (click)=\"toggleFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\" />\n <label>\n <span [hidden]=\"isFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n <label *ngIf=\"filterLength == 0\" [hidden]=\"filter == undefined || filter?.length == 0\">{{settings.noDataLabel}}</label>\n </div>\n <div class=\"filter-select-all\" *ngIf=\"settings.lazyLoading && settings.enableFilterSelectAll\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"filter?.length > 0 && infiniteFilterLength > 0\" (click)=\"toggleInfiniteFilterSelectAll()\">\n <input type=\"checkbox\" [checked]=\"isInfiniteFilterSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\n />\n <label>\n <span [hidden]=\"isInfiniteFilterSelectAll\">{{settings.filterSelectAllText}}</span>\n <span [hidden]=\"!isInfiniteFilterSelectAll\">{{settings.filterUnSelectAllText}}</span>\n </label>\n </div>\n </div>\n\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item.id}}-{{item[settings.labelKey]}}</label>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"!settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of data | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </div>\n <div *ngIf=\"!settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"data\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n\n <ul class=\"lazyContainer\">\n <li *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; 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)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n </ul>\n </div>\n <div *ngIf=\"settings.groupBy && settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <virtual-scroll [items]=\"groupedData\" (vsUpdate)=\"viewPortItems = $event\" (vsEnd)=\"onScrollEnd($event)\" [ngStyle]=\"{'height': settings.maxHeight+'px'}\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of viewPortItems; let i = index;\">\n <li *ngIf=\"item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle, 'selected-item': isSelected(item) == true }\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </virtual-scroll>\n </div>\n <div *ngIf=\"settings.groupBy && !settings.lazyLoading && !itemTempl\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul class=\"lazyContainer\">\n <span *ngFor=\"let item of groupedData | listFilter:filter : settings.searchBy; let i = index;\">\n <li (click)=\"onItemClick(item,i,$event)\" *ngIf=\"!item.grpTitle\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && !item.grpTitle\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li *ngIf=\"item.grpTitle && !settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\n </li>\n <li (click)=\"selectGroup(item,i,$event)\" *ngIf=\"item.grpTitle && settings.selectGroup\" [ngClass]=\"{'grp-title': item.grpTitle,'grp-item': !item.grpTitle}\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox && settings.selectGroup\" type=\"checkbox\" [checked]=\"item.selected\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"\n />\n <label>{{item[settings.labelKey]}}</label>\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 ","host":{"[class]":"defaultSettings.classes"},"styles":["\n 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:14px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:2px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative;padding-right:25px}.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:10px}.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:15px;height:15px;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:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;transform:translateY(-50%)}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:9999}.dropdown-list ul{padding:0px;list-style:none;overflow:auto;margin:0px}.dropdown-list ul li{padding:10px 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:#cccccc;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:0px}.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:0px}.list-filter input:focus{outline:none}.list-filter .c-search{position:absolute;top:9px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:10px;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:#f2f2f2}.pure-checkbox input[type=\"checkbox\"]:active+label:before{transition-duration:0s}.pure-checkbox input[type=\"checkbox\"]+label{position:relative;padding-left:2em;vertical-align:middle;user-select:none;cursor:pointer;margin:0px;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform 200ms ease-out}.pure-checkbox input[type=\"checkbox\"]:disabled+label:before{border-color:#cccccc}.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:#cccccc}.pure-checkbox input[type=\"checkbox\"]+label:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#ffffff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{content:'';transform:rotate(-45deg) scale(1);transition:transform 200ms ease-out}.pure-checkbox input[type=\"radio\"]:checked+label:before{background-color:white}.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:0px;padding:15px 0px;font-size:initial}.list-grp{padding:0 15px !important}.list-grp h4{text-transform:capitalize;margin:15px 0px 0px 0px;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px !important}.grp-item{padding-left:30px !important}.grp-title{padding-bottom:0px !important}.grp-title label{margin-bottom:0px !important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:none !important}.loading-icon{width:20px;float:right}\n "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALIDATION"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onOpen"]}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onClose"]}]}],"onScrollToEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onScrollToEnd"]}]}],"itemTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Item"}]}]}],"badgeTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Badge"}]}]}],"searchTempl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"Search"}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchInput"]}]}],"selectedListElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selectedList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./multiselect.service","name":"DataService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}],"toggleFilterSelectAll":[{"__symbolic":"method"}],"toggleInfiniteFilterSelectAll":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"onFilterChange":[{"__symbolic":"method"}],"cloneArray":[{"__symbolic":"method"}],"updateGroupInfo":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"filterInfiniteList":[{"__symbolic":"method"}],"resetInfiniteSearch":[{"__symbolic":"method"}],"onScrollEnd":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectGroup":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"ScrollDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"styleDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./menu-item","name":"Item"},{"__symbolic":"reference","module":"./menu-item","name":"TemplateRenderer"},{"__symbolic":"reference","module":"./menu-item","name":"Badge"},{"__symbolic":"reference","module":"./menu-item","name":"Search"},{"__symbolic":"reference","module":"./clickOutside","name":"setPosition"},{"__symbolic":"reference","module":"./virtual-scroll","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"./menu-item","name":"CIcon"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","module":"./clickOutside","name":"ClickOutsideDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"ScrollDirective"},{"__symbolic":"reference","module":"./clickOutside","name":"styleDirective"},{"__symbolic":"reference","module":"./list-filter","name":"ListFilterPipe"},{"__symbolic":"reference","module":"./menu-item","name":"Item"},{"__symbolic":"reference","module":"./menu-item","name":"TemplateRenderer"},{"__symbolic":"reference","module":"./menu-item","name":"Badge"},{"__symbolic":"reference","module":"./menu-item","name":"Search"},{"__symbolic":"reference","module":"./clickOutside","name":"setPosition"},{"__symbolic":"reference","module":"./virtual-scroll","name":"VirtualScrollComponent"},{"__symbolic":"reference","module":"./menu-item","name":"CIcon"}],"providers":[{"__symbolic":"reference","module":"./multiselect.service","name":"DataService"}]}]}]}}}] |
@@ -26,2 +26,4 @@ export interface DropdownSettings { | ||
| position: string; | ||
| loading?: boolean; | ||
| selectGroup?: boolean; | ||
| } |
| { | ||
| "name": "angular2-multiselect-dropdown", | ||
| "version": "3.1.1", | ||
| "version": "3.2.1", | ||
| "description": "Angular 2 and angular 4 multiselect dropdown component.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -240,2 +240,3 @@ # Angular2 Multiselect Dropdown | ||
| | groupBy | String | Name of the field by which the list should be grouped. | none | | ||
| | selectGroup | Boolean | Select a group at once. GroupBy should be enabled, to use this. | false | | ||
| | searchAutofocus | Boolean | Autofocus search input field| true | | ||
@@ -264,2 +265,4 @@ | labelKey | String | The property name which should be rendered as label in the dropdown| itemName | | ||
| Example : (onClose)="onClose($event)" | ||
| - `onScrollToEnd` - Callback event fired when the dropdown list is scrolled to the end. Usually used with virtual scrolling, to load data on scroll. | ||
| Example : (onScrollToEnd)="fetchMore($event)" | ||
@@ -266,0 +269,0 @@ ## Run locally |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by1.1%
276
Worsened metrics
- Total package byte prevSize
- decreased by-0.05%
10761686
- Lines of code
- decreased by-0.09%
56632
No dependency changes