angular2-multiselect-dropdown - npm Package Compare versions

Comparing version 2.7.0 to 2.8.0

angular2-multiselect-dropdown.umd.js

 /**
  * angular2-multiselect-dropdown - Angular 2 and angular 4 multiselect dropdown component.
- * @version v2.7.0
+ * @version v2.8.0
  * @author undefined
@@ -212,4 +212,5 @@ * @link undefined
 var AngularMultiSelect = /** @class */ (function () {
-    function AngularMultiSelect(_elementRef) {
+    function AngularMultiSelect(_elementRef, cdr) {
         this._elementRef = _elementRef;
+        this.cdr = cdr;
         this.onSelect = new core_1.EventEmitter();
@@ -242,3 +243,5 @@ this.onDeSelect = new core_1.EventEmitter();
             lazyLoading: false,
-            labelKey: 'itemName'
+            labelKey: 'itemName',
+            primaryKey: 'id',
+            position: 'bottom'
         };
@@ -249,2 +252,3 @@ this.onTouchedCallback = noop;
     AngularMultiSelect.prototype.ngOnInit = function () {
+        var _this = this;
         this.settings = Object.assign(this.defaultSettings, this.settings);
@@ -262,2 +266,8 @@ if (this.settings.groupBy) {
         this.renderChunk(0, this.cachedItemsLen / 2);
+        if (this.settings.position == 'top') {
+            setTimeout(function () {
+                _this.selectedListHeight = { val: 0 };
+                _this.selectedListHeight.val = _this.selectedListElem.nativeElement.clientHeight;
+            });
+        }
     };
@@ -274,3 +284,3 @@ AngularMultiSelect.prototype.ngOnChanges = function (changes) {
         if (changes.settings && !changes.settings.firstChange) {
-            this.settings = Object.assign({}, this.defaultSettings, this.settings);
+            this.settings = Object.assign(this.defaultSettings, this.settings);
         }
@@ -290,2 +300,8 @@ };
     };
+    AngularMultiSelect.prototype.ngAfterViewChecked = function () {
+        if (this.selectedListElem.nativeElement.clientHeight && this.settings.position == 'top' && this.selectedListHeight) {
+            this.selectedListHeight.val = this.selectedListElem.nativeElement.clientHeight;
+            this.cdr.detectChanges();
+        }
+    };
     AngularMultiSelect.prototype.onItemClick = function (item, index, evt) {
@@ -364,8 +380,9 @@ if (this.settings.disabled) {
     AngularMultiSelect.prototype.trackByFn = function (index, item) {
-        return item.id;
+        return item[this.settings.primaryKey];
     };
     AngularMultiSelect.prototype.isSelected = function (clickedItem) {
+        var _this = this;
         var found = false;
         this.selectedItems && this.selectedItems.forEach(function (item) {
-            if (clickedItem.id === item.id) {
+            if (clickedItem[_this.settings.primaryKey] === item[_this.settings.primaryKey]) {
                 found = true;
@@ -390,3 +407,3 @@ }
         this.selectedItems && this.selectedItems.forEach(function (item) {
-            if (clickedItem.id === item.id) {
+            if (clickedItem[_this.settings.primaryKey] === item[_this.settings.primaryKey]) {
                 _this.selectedItems.splice(_this.selectedItems.indexOf(item), 1);
@@ -560,2 +577,6 @@ }
     ], AngularMultiSelect.prototype, "searchInput", void 0);
+    __decorate([
+        core_1.ViewChild('selectedList'),
+        __metadata("design:type", core_1.ElementRef)
+    ], AngularMultiSelect.prototype, "selectedListElem", void 0);
     AngularMultiSelect = __decorate([
@@ -569,3 +590,3 @@ core_1.Component({
         }),
-        __metadata("design:paramtypes", [core_1.ElementRef])
+        __metadata("design:paramtypes", [core_1.ElementRef, core_1.ChangeDetectorRef])
     ], AngularMultiSelect);
@@ -581,4 +602,4 @@ return AngularMultiSelect;
             imports: [common_1.CommonModule, forms_1.FormsModule],
-            declarations: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, clickOutside_1.ScrollDirective, clickOutside_1.styleDirective, list_filter_1.ListFilterPipe, menu_item_1.Item, menu_item_1.TemplateRenderer, menu_item_1.Badge],
-            exports: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, clickOutside_1.ScrollDirective, clickOutside_1.styleDirective, list_filter_1.ListFilterPipe, menu_item_1.Item, menu_item_1.TemplateRenderer, menu_item_1.Badge]
+            declarations: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, clickOutside_1.ScrollDirective, clickOutside_1.styleDirective, list_filter_1.ListFilterPipe, menu_item_1.Item, menu_item_1.TemplateRenderer, menu_item_1.Badge, clickOutside_1.setPosition],
+            exports: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, clickOutside_1.ScrollDirective, clickOutside_1.styleDirective, list_filter_1.ListFilterPipe, menu_item_1.Item, menu_item_1.TemplateRenderer, menu_item_1.Badge, clickOutside_1.setPosition]
         })
@@ -692,2 +713,29 @@ ], AngularMultiSelectModule);
 exports.styleDirective = styleDirective;
+var setPosition = /** @class */ (function () {
+    function setPosition(el) {
+        this.el = el;
+    }
+    setPosition.prototype.ngOnInit = function () {
+        if (this.height) {
+            this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
+        }
+    };
+    setPosition.prototype.ngOnChanges = function () {
+        if (this.height) {
+            this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
+        }
+    };
+    __decorate([
+        core_1.Input('setPosition'),
+        __metadata("design:type", Number)
+    ], setPosition.prototype, "height", void 0);
+    setPosition = __decorate([
+        core_1.Directive({
+            selector: '[setPosition]'
+        }),
+        __metadata("design:paramtypes", [core_1.ElementRef])
+    ], setPosition);
+    return setPosition;
+}());
+exports.setPosition = setPosition;
 
@@ -750,8 +798,2 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var ListItem = /** @class */ (function () {
-    function ListItem() {
-    }
-    return ListItem;
-}());
-exports.ListItem = ListItem;
 var MyException = /** @class */ (function () {
@@ -776,3 +818,3 @@ function MyException(status, body) {
 // module
-exports.push([module.i, ".cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px;\n  width: calc(100% - 20px); }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    margin-top: 2px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .countplaceholder {\n  position: absolute;\n  right: 30px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  position: relative; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type=\"checkbox\"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type=\"checkbox\"]:focus + label:before,\n.pure-checkbox input[type=\"checkbox\"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type=\"checkbox\"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type=\"checkbox\"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:before {\n  box-sizing: content-box;\n  content: '';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  box-sizing: content-box;\n  content: '';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before\n.pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  content: '';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:before {\n  background-color: white; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type=\"radio\"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:before {\n  background: #0079FE; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n", ""]);
+exports.push([module.i, ".cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px;\n  width: calc(100% - 20px); }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    margin-top: 2px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .countplaceholder {\n  position: absolute;\n  right: 30px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  position: relative; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up, .arrow-down {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.arrow-down {\n  bottom: -14px;\n  top: unset;\n  transform: rotate(180deg); }\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px; }\n\n.arrow-down.arrow-2 {\n  top: unset;\n  bottom: -16px; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type=\"checkbox\"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type=\"checkbox\"]:focus + label:before,\n.pure-checkbox input[type=\"checkbox\"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type=\"checkbox\"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type=\"checkbox\"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:before {\n  box-sizing: content-box;\n  content: '';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  box-sizing: content-box;\n  content: '';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before\n.pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  content: '';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:before {\n  background-color: white; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type=\"radio\"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:before {\n  background: #0079FE; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n", ""]);
 
@@ -868,3 +910,3 @@ // exports
 
-module.exports = "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"selected-list\">\r\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\r\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\r\n            <span *ngIf=\"settings.singleSelection\">\r\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\r\n                    {{item[settings.labelKey]}}\r\n                </span>\r\n            </span>\r\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\r\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\r\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\r\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\r\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\r\n                    </span>\r\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\r\n                </div>\r\n            </div> \r\n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\r\n        </div>      \r\n    </div>\r\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\r\n    <div class=\"arrow-up arrow-2\"></div>\r\n    <div class=\"arrow-up\"></div>\r\n    <div class=\"list-area\">\r\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\r\n            <label>\r\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\r\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\r\n            <span class=\"fa fa-search\"></span>\r\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\r\n        </div> \r\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\r\n            <span class=\"fa fa-search\"></span>\r\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\r\n        </div>\r\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\r\n        <span *ngIf=\"itemTempl\">\r\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\r\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\r\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\r\n\r\n            \r\n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </div>\r\n        </span>\r\n    </ul>\r\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\r\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\r\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\r\n        <span *ngIf=\"itemTempl\" >\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n        <span *ngIf=\"!itemTempl\" >\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n    </ul>\r\n    </div>\r\n    <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\r\n    </div>\r\n    </div>\r\n</div>"
+module.exports = "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"selected-list\" #selectedList>\r\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\r\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\r\n            <span *ngIf=\"settings.singleSelection\">\r\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);\">\r\n                    {{item[settings.labelKey]}}\r\n                </span>\r\n            </span>\r\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\r\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\r\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\r\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\r\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\r\n                    </span>\r\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\r\n                </div>\r\n            </div>\r\n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\r\n        </div>\r\n    </div>\r\n    <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]= \"{'dropdown-list-top': settings.position == 'top'}\" [hidden]=\"!isActive\">\r\n        <div [ngClass]= \"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"  class=\"arrow-2\"></div>\r\n        <div [ngClass]= \"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\r\n        <div class=\"list-area\">\r\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\"\r\n                (click)=\"toggleSelectAll()\">\r\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\r\n                />\r\n                <label>\r\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\r\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n            </div>\r\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\r\n                <span class=\"fa fa-search\"></span>\r\n                <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\r\n            </div>\r\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\r\n                <span class=\"fa fa-search\"></span>\r\n                <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\r\n            </div>\r\n            <ul *ngIf=\"!settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" class=\"lazyContainer\">\r\n                <span *ngIf=\"itemTempl\">\r\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n                <span *ngIf=\"!itemTempl && !settings.lazyLoading\">\r\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n                <span *ngIf=\"!itemTempl && settings.lazyLoading\">\r\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\r\n\r\n            \r\n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </div>\r\n        </span>\r\n            </ul>\r\n            <div *ngIf=\"settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\r\n                <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\r\n                    <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\r\n                    <span *ngIf=\"itemTempl\">\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n                    <span *ngIf=\"!itemTempl\">\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n                </ul>\r\n            </div>\r\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\r\n        </div>\r\n    </div>\r\n</div>"
 
@@ -871,0 +913,0 @@ /***/ }),

angular2-multiselect-dropdown.umd.min.js

 /**
  * angular2-multiselect-dropdown - Angular 2 and angular 4 multiselect dropdown component.
- * @version v2.7.0
+ * @version v2.8.0
  * @author undefined
@@ -8,3 +8,3 @@ * @link undefined
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=12)}([function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(){}return i([o.ContentChild(o.TemplateRef),s("design:type",o.TemplateRef)],e.prototype,"template",void 0),e=i([o.Component({selector:"c-item",template:""}),s("design:paramtypes",[])],e)}();t.Item=l;var r=function(){function e(){}return i([o.ContentChild(o.TemplateRef),s("design:type",o.TemplateRef)],e.prototype,"template",void 0),e=i([o.Component({selector:"c-badge",template:""}),s("design:paramtypes",[])],e)}();t.Badge=r;var c=function(){function e(e){this.viewContainer=e}return e.prototype.ngOnInit=function(){this.view=this.viewContainer.createEmbeddedView(this.data.template,{$implicit:this.data,item:this.item})},e.prototype.ngOnDestroy=function(){this.view.destroy()},i([o.Input(),s("design:type",Object)],e.prototype,"data",void 0),i([o.Input(),s("design:type",Object)],e.prototype,"item",void 0),e=i([o.Component({selector:"c-templateRenderer",template:""}),s("design:paramtypes",[o.ViewContainerRef])],e)}();t.TemplateRenderer=c},function(t,n){t.exports=e},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=n(11),r=n(10),c=n(5),a=n(3),p=n(4),d=n(0);t.DROPDOWN_CONTROL_VALUE_ACCESSOR={provide:l.NG_VALUE_ACCESSOR,useExisting:o.forwardRef(function(){return u}),multi:!0},t.DROPDOWN_CONTROL_VALIDATION={provide:l.NG_VALIDATORS,useExisting:o.forwardRef(function(){return u}),multi:!0};var h=function(){},u=function(){function e(e){this._elementRef=e,this.onSelect=new o.EventEmitter,this.onDeSelect=new o.EventEmitter,this.onSelectAll=new o.EventEmitter,this.onDeSelectAll=new o.EventEmitter,this.onOpen=new o.EventEmitter,this.onClose=new o.EventEmitter,this.isActive=!1,this.isSelectAll=!1,this.chunkIndex=[],this.cachedItems=[],this.itemHeight=41.6,this.defaultSettings={singleSelection:!1,text:"Select",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",enableSearchFilter:!1,maxHeight:300,badgeShowLimit:999999999999,classes:"",disabled:!1,searchPlaceholderText:"Search",showCheckbox:!0,noDataLabel:"No Data Available",searchAutofocus:!0,lazyLoading:!1,labelKey:"itemName"},this.onTouchedCallback=h,this.onChangeCallback=h}return e.prototype.ngOnInit=function(){this.settings=Object.assign(this.defaultSettings,this.settings),this.settings.groupBy&&(this.groupedData=this.transformData(this.data,this.settings.groupBy)),this.totalRows=this.data&&this.data.length,this.cachedItems=this.data,this.screenItemsLen=Math.ceil(this.settings.maxHeight/this.itemHeight),this.cachedItemsLen=3*this.screenItemsLen,this.totalHeight=this.itemHeight*this.totalRows,this.maxBuffer=this.screenItemsLen*this.itemHeight,this.lastScrolled=0,this.renderChunk(0,this.cachedItemsLen/2)},e.prototype.ngOnChanges=function(e){e.data&&!e.data.firstChange&&this.settings.groupBy&&(this.groupedData=this.transformData(this.data,this.settings.groupBy),0==this.data.length&&(this.selectedItems=[])),e.settings&&!e.settings.firstChange&&(this.settings=Object.assign({},this.defaultSettings,this.settings))},e.prototype.ngDoCheck=function(){this.selectedItems&&(0==this.selectedItems.length||0==this.data.length||this.selectedItems.length<this.data.length)&&(this.isSelectAll=!1)},e.prototype.ngAfterViewInit=function(){this.settings.lazyLoading&&this._elementRef.nativeElement.getElementsByClassName("lazyContainer")[0].addEventListener("scroll",this.onScroll.bind(this))},e.prototype.onItemClick=function(e,t,n){if(this.settings.disabled)return!1;var i=this.isSelected(e),s=this.selectedItems.length<this.settings.limitSelection;i?(this.removeSelected(e),this.onDeSelect.emit(e)):this.settings.limitSelection?s&&(this.addSelected(e),this.onSelect.emit(e)):(this.addSelected(e),this.onSelect.emit(e)),(this.isSelectAll||this.data.length>this.selectedItems.length)&&(this.isSelectAll=!1),this.data.length==this.selectedItems.length&&(this.isSelectAll=!0)},e.prototype.validate=function(e){return null},e.prototype.writeValue=function(e){if(void 0!==e&&null!==e)if(this.settings.singleSelection)try{if(e.length>1)throw this.selectedItems=[e[0]],new c.MyException(404,{msg:"Single Selection Mode, Selected Items cannot have more than one item."});this.selectedItems=e}catch(e){console.error(e.body.msg)}else this.settings.limitSelection?this.selectedItems=e.splice(0,this.settings.limitSelection):this.selectedItems=e,this.selectedItems.length===this.data.length&&this.data.length>0&&(this.isSelectAll=!0);else this.selectedItems=[]},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.trackByFn=function(e,t){return t.id},e.prototype.isSelected=function(e){var t=!1;return this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&(t=!0)}),t},e.prototype.addSelected=function(e){this.settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e),this.closeDropdown()):this.selectedItems.push(e),this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems)},e.prototype.removeSelected=function(e){var t=this;this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&t.selectedItems.splice(t.selectedItems.indexOf(n),1)}),this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems)},e.prototype.toggleDropdown=function(e){var t=this;if(this.settings.disabled)return!1;this.isActive=!this.isActive,this.isActive?(this.settings.searchAutofocus&&this.settings.enableSearchFilter&&setTimeout(function(){t.searchInput.nativeElement.focus()},0),this.onOpen.emit(!0)):this.onClose.emit(!1),e.preventDefault()},e.prototype.closeDropdown=function(){this.searchInput&&this.settings.lazyLoading&&(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.searchInput&&(this.searchInput.nativeElement.value=""),this.filter="",this.isActive=!1,this.onClose.emit(!1)},e.prototype.toggleSelectAll=function(){this.isSelectAll?(this.selectedItems=[],this.isSelectAll=!1,this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems),this.onDeSelectAll.emit(this.selectedItems)):(this.selectedItems=[],this.selectedItems=this.data.slice(),this.isSelectAll=!0,this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems),this.onSelectAll.emit(this.selectedItems))},e.prototype.transformData=function(e,t){var n=e.reduce(function(e,n){return e[n[t]]?e[n[t]].push(n):e[n[t]]=[n],e},{}),i=[];return Object.keys(n).map(function(e){i.push({key:e,value:n[e]})}),i},e.prototype.renderChunk=function(e,t){this.chunkArray=[],this.chunkIndex=[];var n=e+t;n>this.totalRows&&(n=this.totalRows);for(var i=e;i<n;i++)this.chunkIndex.push(i*this.itemHeight+"px"),this.chunkArray.push(this.data[i])},e.prototype.onScroll=function(e){this.scrollTop=e.target.scrollTop,this.updateView(this.scrollTop)},e.prototype.updateView=function(e){var t=e||0,n=t/this.itemHeight-this.screenItemsLen,i=""+n;n=parseInt(i)<0?0:parseInt(i),this.renderChunk(n,this.cachedItemsLen),this.lastRepaintY=t},e.prototype.filterInfiniteList=function(e){var t=[];this.data=this.cachedItems.slice(),""!=e.target.value.toString()?(this.data.filter(function(n){for(var i in n)if(n[i].toString().toLowerCase().indexOf(e.target.value.toString().toLowerCase())>=0){t.push(n);break}}),this.totalHeight=this.itemHeight*t.length,this.totalRows=t.length,this.data=[],this.data=t,this.updateView(this.scrollTop)):""==e.target.value.toString()&&this.cachedItems.length>0&&(this.data=[],this.data=this.cachedItems,this.totalHeight=this.itemHeight*this.data.length,this.totalRows=this.data.length,this.updateView(this.scrollTop))},i([o.Input(),s("design:type",Array)],e.prototype,"data",void 0),i([o.Input(),s("design:type",Object)],e.prototype,"settings",void 0),i([o.Output("onSelect"),s("design:type",o.EventEmitter)],e.prototype,"onSelect",void 0),i([o.Output("onDeSelect"),s("design:type",o.EventEmitter)],e.prototype,"onDeSelect",void 0),i([o.Output("onSelectAll"),s("design:type",o.EventEmitter)],e.prototype,"onSelectAll",void 0),i([o.Output("onDeSelectAll"),s("design:type",o.EventEmitter)],e.prototype,"onDeSelectAll",void 0),i([o.Output("onOpen"),s("design:type",o.EventEmitter)],e.prototype,"onOpen",void 0),i([o.Output("onClose"),s("design:type",o.EventEmitter)],e.prototype,"onClose",void 0),i([o.ContentChild(d.Item),s("design:type",d.Item)],e.prototype,"itemTempl",void 0),i([o.ContentChild(d.Badge),s("design:type",d.Badge)],e.prototype,"badgeTempl",void 0),i([o.ViewChild("searchInput"),s("design:type",o.ElementRef)],e.prototype,"searchInput",void 0),e=i([o.Component({selector:"angular2-multiselect",template:n(8),host:{"[class]":"defaultSettings.classes"},styles:[n(9)],providers:[t.DROPDOWN_CONTROL_VALUE_ACCESSOR,t.DROPDOWN_CONTROL_VALIDATION]}),s("design:paramtypes",[o.ElementRef])],e)}();t.AngularMultiSelect=u;var f=function(){function e(){}return e=i([o.NgModule({imports:[r.CommonModule,l.FormsModule],declarations:[u,a.ClickOutsideDirective,a.ScrollDirective,a.styleDirective,p.ListFilterPipe,d.Item,d.TemplateRenderer,d.Badge],exports:[u,a.ClickOutsideDirective,a.ScrollDirective,a.styleDirective,p.ListFilterPipe,d.Item,d.TemplateRenderer,d.Badge]})],e)}();t.AngularMultiSelectModule=f},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(e){this._elementRef=e,this.clickOutside=new o.EventEmitter}return e.prototype.onClick=function(e,t){if(t){this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e)}},i([o.Output(),s("design:type",Object)],e.prototype,"clickOutside",void 0),i([o.HostListener("document:click",["$event","$event.target"]),o.HostListener("document:touchstart",["$event","$event.target"]),s("design:type",Function),s("design:paramtypes",[MouseEvent,HTMLElement]),s("design:returntype",void 0)],e.prototype,"onClick",null),e=i([o.Directive({selector:"[clickOutside]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.ClickOutsideDirective=l;var r=function(){function e(e){this._elementRef=e,this.scroll=new o.EventEmitter}return e.prototype.onClick=function(e,t){this.scroll.emit(e)},i([o.Output(),s("design:type",Object)],e.prototype,"scroll",void 0),i([o.HostListener("scroll",["$event"]),s("design:type",Function),s("design:paramtypes",[MouseEvent,HTMLElement]),s("design:returntype",void 0)],e.prototype,"onClick",null),e=i([o.Directive({selector:"[scroll]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.ScrollDirective=r;var c=function(){function e(e){this.el=e}return e.prototype.ngOnInit=function(){this.el.nativeElement.style.top=this.styleVal},e.prototype.ngOnChanges=function(){this.el.nativeElement.style.top=this.styleVal},i([o.Input("styleProp"),s("design:type",Number)],e.prototype,"styleVal",void 0),e=i([o.Directive({selector:"[styleProp]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.styleDirective=c},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l};Object.defineProperty(t,"__esModule",{value:!0});var s=n(1),o=function(){function e(){}return e.prototype.transform=function(e,t){var n=this;return e&&t?e.filter(function(e){return n.applyFilter(e,t)}):e},e.prototype.applyFilter=function(e,t){var n=!1;for(var i in e)t?e[i].toString().toLowerCase().indexOf(t.toLowerCase())>=0&&(n=!0):n=!0;return n},e=i([s.Pipe({name:"listFilter",pure:!1})],e)}();t.ListFilterPipe=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){}return e}();t.ListItem=i;var s=function(){function e(e,t){this.status=e,this.body=t}return e}();t.MyException=s},function(e,t,n){t=e.exports=n(7)(void 0),t.push([e.i,'.cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px;\n  width: calc(100% - 20px); }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    margin-top: 2px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .countplaceholder {\n  position: absolute;\n  right: 30px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  position: relative; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type="checkbox"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type="checkbox"]:focus + label:before,\n.pure-checkbox input[type="checkbox"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type="checkbox"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type="checkbox"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type="checkbox"] + label:before {\n  box-sizing: content-box;\n  content: \'\';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  box-sizing: content-box;\n  content: \'\';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="checkbox"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"]:disabled:focus + label:before\n.pure-checkbox input[type="checkbox"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  content: \'\';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="radio"]:checked + label:before {\n  background-color: white; }\n\n.pure-checkbox input[type="radio"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type="radio"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:before {\n  background: #0079FE; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n',""])},function(e,t){function n(e,t){var n=e[1]||"",s=e[3];if(!s)return n;if(t&&"function"==typeof btoa){var o=i(s);return[n].concat(s.sources.map(function(e){return"/*# sourceURL="+s.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},s=0;s<this.length;s++){var o=this[s][0];"number"==typeof o&&(i[o]=!0)}for(s=0;s<e.length;s++){var l=e[s];"number"==typeof l[0]&&i[l[0]]||(n&&!l[2]?l[2]=n:n&&(l[2]="("+l[2]+") and ("+n+")"),t.push(l))}},t}},function(e,t){e.exports='<div class="cuppa-dropdown" (clickOutside)="closeDropdown()">\r\n    <div class="selected-list">\r\n        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{\'disabled\': settings.disabled}">\r\n            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>\r\n            <span *ngIf="settings.singleSelection">\r\n                <span *ngFor="let item of selectedItems;trackBy: trackByFn;">\r\n                    {{item[settings.labelKey]}}\r\n                </span>\r\n            </span>\r\n            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">\r\n                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">\r\n                    <span *ngIf="!badgeTempl" class="c-label">{{item[settings.labelKey]}}</span>\r\n                    <span *ngIf="badgeTempl" class="c-label">\r\n                        <c-templateRenderer [data]="badgeTempl" [item]="item"></c-templateRenderer>\r\n                    </span>\r\n                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)"></span>\r\n                </div>\r\n            </div> \r\n            <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class="fa" [ngClass]="{\'fa-angle-down\': !isActive,\'fa-angle-up\':isActive}"></span>\r\n        </div>      \r\n    </div>\r\n    <div class="dropdown-list" [hidden]="!isActive">\r\n    <div class="arrow-up arrow-2"></div>\r\n    <div class="arrow-up"></div>\r\n    <div class="list-area">\r\n        <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>\r\n            <label>\r\n                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>\r\n                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class="list-filter" *ngIf="settings.enableSearchFilter && !settings.lazyLoading">\r\n            <span class="fa fa-search"></span>\r\n            <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter">\r\n        </div> \r\n        <div class="list-filter" *ngIf="settings.enableSearchFilter && settings.lazyLoading">\r\n            <span class="fa fa-search"></span>\r\n            <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" (keyup)="filterInfiniteList($event)">\r\n        </div>\r\n    <ul *ngIf="!settings.groupBy" [style.maxHeight] = "settings.maxHeight+\'px\'" class="lazyContainer" >\r\n        <span *ngIf="itemTempl">\r\n            <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n        <span *ngIf="!itemTempl && !settings.lazyLoading" >\r\n        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n        <span *ngIf="!itemTempl && settings.lazyLoading" >\r\n            <div [ngStyle]="{\'height\':totalHeight+\'px\'}" style="position: relative;">\r\n\r\n            \r\n        <li *ngFor="let item of chunkArray | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" style="position: absolute;width: 100%;" class="pure-checkbox" [styleProp]="chunkIndex[i]">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </div>\r\n        </span>\r\n    </ul>\r\n    <div *ngIf="settings.groupBy" [style.maxHeight] = "settings.maxHeight+\'px\'" style="overflow: auto;">\r\n    <ul *ngFor="let obj of groupedData ; let i = index;" class="list-grp">\r\n        <h4 *ngIf="(obj.value | listFilter:filter ).length > 0">{{obj.key}}</h4>\r\n        <span *ngIf="itemTempl" >\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n        <span *ngIf="!itemTempl" >\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n    </ul>\r\n    </div>\r\n    <h5 class="list-message" *ngIf="data?.length == 0">{{settings.noDataLabel}}</h5>\r\n    </div>\r\n    </div>\r\n</div>'},function(e,t,n){var i=n(6);e.exports="string"==typeof i?i:i.toString()},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);t.AngularMultiSelect=i.AngularMultiSelect;var s=n(3);t.ClickOutsideDirective=s.ClickOutsideDirective;var o=n(4);t.ListFilterPipe=o.ListFilterPipe;var l=n(0);t.Item=l.Item;var r=n(0);t.TemplateRenderer=r.TemplateRenderer;var c=n(2);t.AngularMultiSelectModule=c.AngularMultiSelectModule}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=12)}([function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(){}return i([o.ContentChild(o.TemplateRef),s("design:type",o.TemplateRef)],e.prototype,"template",void 0),e=i([o.Component({selector:"c-item",template:""}),s("design:paramtypes",[])],e)}();t.Item=l;var r=function(){function e(){}return i([o.ContentChild(o.TemplateRef),s("design:type",o.TemplateRef)],e.prototype,"template",void 0),e=i([o.Component({selector:"c-badge",template:""}),s("design:paramtypes",[])],e)}();t.Badge=r;var c=function(){function e(e){this.viewContainer=e}return e.prototype.ngOnInit=function(){this.view=this.viewContainer.createEmbeddedView(this.data.template,{$implicit:this.data,item:this.item})},e.prototype.ngOnDestroy=function(){this.view.destroy()},i([o.Input(),s("design:type",Object)],e.prototype,"data",void 0),i([o.Input(),s("design:type",Object)],e.prototype,"item",void 0),e=i([o.Component({selector:"c-templateRenderer",template:""}),s("design:paramtypes",[o.ViewContainerRef])],e)}();t.TemplateRenderer=c},function(t,n){t.exports=e},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=n(11),r=n(10),c=n(5),a=n(3),p=n(4),d=n(0);t.DROPDOWN_CONTROL_VALUE_ACCESSOR={provide:l.NG_VALUE_ACCESSOR,useExisting:o.forwardRef(function(){return u}),multi:!0},t.DROPDOWN_CONTROL_VALIDATION={provide:l.NG_VALIDATORS,useExisting:o.forwardRef(function(){return u}),multi:!0};var h=function(){},u=function(){function e(e,t){this._elementRef=e,this.cdr=t,this.onSelect=new o.EventEmitter,this.onDeSelect=new o.EventEmitter,this.onSelectAll=new o.EventEmitter,this.onDeSelectAll=new o.EventEmitter,this.onOpen=new o.EventEmitter,this.onClose=new o.EventEmitter,this.isActive=!1,this.isSelectAll=!1,this.chunkIndex=[],this.cachedItems=[],this.itemHeight=41.6,this.defaultSettings={singleSelection:!1,text:"Select",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",enableSearchFilter:!1,maxHeight:300,badgeShowLimit:999999999999,classes:"",disabled:!1,searchPlaceholderText:"Search",showCheckbox:!0,noDataLabel:"No Data Available",searchAutofocus:!0,lazyLoading:!1,labelKey:"itemName",primaryKey:"id",position:"bottom"},this.onTouchedCallback=h,this.onChangeCallback=h}return e.prototype.ngOnInit=function(){var e=this;this.settings=Object.assign(this.defaultSettings,this.settings),this.settings.groupBy&&(this.groupedData=this.transformData(this.data,this.settings.groupBy)),this.totalRows=this.data&&this.data.length,this.cachedItems=this.data,this.screenItemsLen=Math.ceil(this.settings.maxHeight/this.itemHeight),this.cachedItemsLen=3*this.screenItemsLen,this.totalHeight=this.itemHeight*this.totalRows,this.maxBuffer=this.screenItemsLen*this.itemHeight,this.lastScrolled=0,this.renderChunk(0,this.cachedItemsLen/2),"top"==this.settings.position&&setTimeout(function(){e.selectedListHeight={val:0},e.selectedListHeight.val=e.selectedListElem.nativeElement.clientHeight})},e.prototype.ngOnChanges=function(e){e.data&&!e.data.firstChange&&this.settings.groupBy&&(this.groupedData=this.transformData(this.data,this.settings.groupBy),0==this.data.length&&(this.selectedItems=[])),e.settings&&!e.settings.firstChange&&(this.settings=Object.assign(this.defaultSettings,this.settings))},e.prototype.ngDoCheck=function(){this.selectedItems&&(0==this.selectedItems.length||0==this.data.length||this.selectedItems.length<this.data.length)&&(this.isSelectAll=!1)},e.prototype.ngAfterViewInit=function(){this.settings.lazyLoading&&this._elementRef.nativeElement.getElementsByClassName("lazyContainer")[0].addEventListener("scroll",this.onScroll.bind(this))},e.prototype.ngAfterViewChecked=function(){this.selectedListElem.nativeElement.clientHeight&&"top"==this.settings.position&&this.selectedListHeight&&(this.selectedListHeight.val=this.selectedListElem.nativeElement.clientHeight,this.cdr.detectChanges())},e.prototype.onItemClick=function(e,t,n){if(this.settings.disabled)return!1;var i=this.isSelected(e),s=this.selectedItems.length<this.settings.limitSelection;i?(this.removeSelected(e),this.onDeSelect.emit(e)):this.settings.limitSelection?s&&(this.addSelected(e),this.onSelect.emit(e)):(this.addSelected(e),this.onSelect.emit(e)),(this.isSelectAll||this.data.length>this.selectedItems.length)&&(this.isSelectAll=!1),this.data.length==this.selectedItems.length&&(this.isSelectAll=!0)},e.prototype.validate=function(e){return null},e.prototype.writeValue=function(e){if(void 0!==e&&null!==e)if(this.settings.singleSelection)try{if(e.length>1)throw this.selectedItems=[e[0]],new c.MyException(404,{msg:"Single Selection Mode, Selected Items cannot have more than one item."});this.selectedItems=e}catch(e){console.error(e.body.msg)}else this.settings.limitSelection?this.selectedItems=e.splice(0,this.settings.limitSelection):this.selectedItems=e,this.selectedItems.length===this.data.length&&this.data.length>0&&(this.isSelectAll=!0);else this.selectedItems=[]},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.trackByFn=function(e,t){return t[this.settings.primaryKey]},e.prototype.isSelected=function(e){var t=this,n=!1;return this.selectedItems&&this.selectedItems.forEach(function(i){e[t.settings.primaryKey]===i[t.settings.primaryKey]&&(n=!0)}),n},e.prototype.addSelected=function(e){this.settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e),this.closeDropdown()):this.selectedItems.push(e),this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems)},e.prototype.removeSelected=function(e){var t=this;this.selectedItems&&this.selectedItems.forEach(function(n){e[t.settings.primaryKey]===n[t.settings.primaryKey]&&t.selectedItems.splice(t.selectedItems.indexOf(n),1)}),this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems)},e.prototype.toggleDropdown=function(e){var t=this;if(this.settings.disabled)return!1;this.isActive=!this.isActive,this.isActive?(this.settings.searchAutofocus&&this.settings.enableSearchFilter&&setTimeout(function(){t.searchInput.nativeElement.focus()},0),this.onOpen.emit(!0)):this.onClose.emit(!1),e.preventDefault()},e.prototype.closeDropdown=function(){this.searchInput&&this.settings.lazyLoading&&(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.searchInput&&(this.searchInput.nativeElement.value=""),this.filter="",this.isActive=!1,this.onClose.emit(!1)},e.prototype.toggleSelectAll=function(){this.isSelectAll?(this.selectedItems=[],this.isSelectAll=!1,this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems),this.onDeSelectAll.emit(this.selectedItems)):(this.selectedItems=[],this.selectedItems=this.data.slice(),this.isSelectAll=!0,this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems),this.onSelectAll.emit(this.selectedItems))},e.prototype.transformData=function(e,t){var n=e.reduce(function(e,n){return e[n[t]]?e[n[t]].push(n):e[n[t]]=[n],e},{}),i=[];return Object.keys(n).map(function(e){i.push({key:e,value:n[e]})}),i},e.prototype.renderChunk=function(e,t){this.chunkArray=[],this.chunkIndex=[];var n=e+t;n>this.totalRows&&(n=this.totalRows);for(var i=e;i<n;i++)this.chunkIndex.push(i*this.itemHeight+"px"),this.chunkArray.push(this.data[i])},e.prototype.onScroll=function(e){this.scrollTop=e.target.scrollTop,this.updateView(this.scrollTop)},e.prototype.updateView=function(e){var t=e||0,n=t/this.itemHeight-this.screenItemsLen,i=""+n;n=parseInt(i)<0?0:parseInt(i),this.renderChunk(n,this.cachedItemsLen),this.lastRepaintY=t},e.prototype.filterInfiniteList=function(e){var t=[];this.data=this.cachedItems.slice(),""!=e.target.value.toString()?(this.data.filter(function(n){for(var i in n)if(n[i].toString().toLowerCase().indexOf(e.target.value.toString().toLowerCase())>=0){t.push(n);break}}),this.totalHeight=this.itemHeight*t.length,this.totalRows=t.length,this.data=[],this.data=t,this.updateView(this.scrollTop)):""==e.target.value.toString()&&this.cachedItems.length>0&&(this.data=[],this.data=this.cachedItems,this.totalHeight=this.itemHeight*this.data.length,this.totalRows=this.data.length,this.updateView(this.scrollTop))},i([o.Input(),s("design:type",Array)],e.prototype,"data",void 0),i([o.Input(),s("design:type",Object)],e.prototype,"settings",void 0),i([o.Output("onSelect"),s("design:type",o.EventEmitter)],e.prototype,"onSelect",void 0),i([o.Output("onDeSelect"),s("design:type",o.EventEmitter)],e.prototype,"onDeSelect",void 0),i([o.Output("onSelectAll"),s("design:type",o.EventEmitter)],e.prototype,"onSelectAll",void 0),i([o.Output("onDeSelectAll"),s("design:type",o.EventEmitter)],e.prototype,"onDeSelectAll",void 0),i([o.Output("onOpen"),s("design:type",o.EventEmitter)],e.prototype,"onOpen",void 0),i([o.Output("onClose"),s("design:type",o.EventEmitter)],e.prototype,"onClose",void 0),i([o.ContentChild(d.Item),s("design:type",d.Item)],e.prototype,"itemTempl",void 0),i([o.ContentChild(d.Badge),s("design:type",d.Badge)],e.prototype,"badgeTempl",void 0),i([o.ViewChild("searchInput"),s("design:type",o.ElementRef)],e.prototype,"searchInput",void 0),i([o.ViewChild("selectedList"),s("design:type",o.ElementRef)],e.prototype,"selectedListElem",void 0),e=i([o.Component({selector:"angular2-multiselect",template:n(8),host:{"[class]":"defaultSettings.classes"},styles:[n(9)],providers:[t.DROPDOWN_CONTROL_VALUE_ACCESSOR,t.DROPDOWN_CONTROL_VALIDATION]}),s("design:paramtypes",[o.ElementRef,o.ChangeDetectorRef])],e)}();t.AngularMultiSelect=u;var g=function(){function e(){}return e=i([o.NgModule({imports:[r.CommonModule,l.FormsModule],declarations:[u,a.ClickOutsideDirective,a.ScrollDirective,a.styleDirective,p.ListFilterPipe,d.Item,d.TemplateRenderer,d.Badge,a.setPosition],exports:[u,a.ClickOutsideDirective,a.ScrollDirective,a.styleDirective,p.ListFilterPipe,d.Item,d.TemplateRenderer,d.Badge,a.setPosition]})],e)}();t.AngularMultiSelectModule=g},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(e){this._elementRef=e,this.clickOutside=new o.EventEmitter}return e.prototype.onClick=function(e,t){if(t){this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e)}},i([o.Output(),s("design:type",Object)],e.prototype,"clickOutside",void 0),i([o.HostListener("document:click",["$event","$event.target"]),o.HostListener("document:touchstart",["$event","$event.target"]),s("design:type",Function),s("design:paramtypes",[MouseEvent,HTMLElement]),s("design:returntype",void 0)],e.prototype,"onClick",null),e=i([o.Directive({selector:"[clickOutside]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.ClickOutsideDirective=l;var r=function(){function e(e){this._elementRef=e,this.scroll=new o.EventEmitter}return e.prototype.onClick=function(e,t){this.scroll.emit(e)},i([o.Output(),s("design:type",Object)],e.prototype,"scroll",void 0),i([o.HostListener("scroll",["$event"]),s("design:type",Function),s("design:paramtypes",[MouseEvent,HTMLElement]),s("design:returntype",void 0)],e.prototype,"onClick",null),e=i([o.Directive({selector:"[scroll]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.ScrollDirective=r;var c=function(){function e(e){this.el=e}return e.prototype.ngOnInit=function(){this.el.nativeElement.style.top=this.styleVal},e.prototype.ngOnChanges=function(){this.el.nativeElement.style.top=this.styleVal},i([o.Input("styleProp"),s("design:type",Number)],e.prototype,"styleVal",void 0),e=i([o.Directive({selector:"[styleProp]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.styleDirective=c;var a=function(){function e(e){this.el=e}return e.prototype.ngOnInit=function(){this.height&&(this.el.nativeElement.style.bottom=parseInt(this.height+15+"")+"px")},e.prototype.ngOnChanges=function(){this.height&&(this.el.nativeElement.style.bottom=parseInt(this.height+15+"")+"px")},i([o.Input("setPosition"),s("design:type",Number)],e.prototype,"height",void 0),e=i([o.Directive({selector:"[setPosition]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.setPosition=a},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l};Object.defineProperty(t,"__esModule",{value:!0});var s=n(1),o=function(){function e(){}return e.prototype.transform=function(e,t){var n=this;return e&&t?e.filter(function(e){return n.applyFilter(e,t)}):e},e.prototype.applyFilter=function(e,t){var n=!1;for(var i in e)t?e[i].toString().toLowerCase().indexOf(t.toLowerCase())>=0&&(n=!0):n=!0;return n},e=i([s.Pipe({name:"listFilter",pure:!1})],e)}();t.ListFilterPipe=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){this.status=e,this.body=t}return e}();t.MyException=i},function(e,t,n){t=e.exports=n(7)(void 0),t.push([e.i,'.cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px;\n  width: calc(100% - 20px); }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    margin-top: 2px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .countplaceholder {\n  position: absolute;\n  right: 30px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  position: relative; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up, .arrow-down {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.arrow-down {\n  bottom: -14px;\n  top: unset;\n  transform: rotate(180deg); }\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px; }\n\n.arrow-down.arrow-2 {\n  top: unset;\n  bottom: -16px; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type="checkbox"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type="checkbox"]:focus + label:before,\n.pure-checkbox input[type="checkbox"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type="checkbox"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type="checkbox"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type="checkbox"] + label:before {\n  box-sizing: content-box;\n  content: \'\';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  box-sizing: content-box;\n  content: \'\';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="checkbox"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"]:disabled:focus + label:before\n.pure-checkbox input[type="checkbox"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  content: \'\';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="radio"]:checked + label:before {\n  background-color: white; }\n\n.pure-checkbox input[type="radio"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type="radio"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:before {\n  background: #0079FE; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n',""])},function(e,t){function n(e,t){var n=e[1]||"",s=e[3];if(!s)return n;if(t&&"function"==typeof btoa){var o=i(s);return[n].concat(s.sources.map(function(e){return"/*# sourceURL="+s.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},s=0;s<this.length;s++){var o=this[s][0];"number"==typeof o&&(i[o]=!0)}for(s=0;s<e.length;s++){var l=e[s];"number"==typeof l[0]&&i[l[0]]||(n&&!l[2]?l[2]=n:n&&(l[2]="("+l[2]+") and ("+n+")"),t.push(l))}},t}},function(e,t){e.exports='<div class="cuppa-dropdown" (clickOutside)="closeDropdown()">\r\n    <div class="selected-list" #selectedList>\r\n        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{\'disabled\': settings.disabled}">\r\n            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>\r\n            <span *ngIf="settings.singleSelection">\r\n                <span *ngFor="let item of selectedItems;trackBy: trackByFn.bind(this);">\r\n                    {{item[settings.labelKey]}}\r\n                </span>\r\n            </span>\r\n            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">\r\n                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn.bind(this);let k = index" [hidden]="k > settings.badgeShowLimit-1">\r\n                    <span *ngIf="!badgeTempl" class="c-label">{{item[settings.labelKey]}}</span>\r\n                    <span *ngIf="badgeTempl" class="c-label">\r\n                        <c-templateRenderer [data]="badgeTempl" [item]="item"></c-templateRenderer>\r\n                    </span>\r\n                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)"></span>\r\n                </div>\r\n            </div>\r\n            <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class="fa" [ngClass]="{\'fa-angle-down\': !isActive,\'fa-angle-up\':isActive}"></span>\r\n        </div>\r\n    </div>\r\n    <div [setPosition]="selectedListHeight?.val" class="dropdown-list" [ngClass]= "{\'dropdown-list-top\': settings.position == \'top\'}" [hidden]="!isActive">\r\n        <div [ngClass]= "{\'arrow-up\': settings.position == \'bottom\', \'arrow-down\': settings.position == \'top\'}"  class="arrow-2"></div>\r\n        <div [ngClass]= "{\'arrow-up\': settings.position == \'bottom\', \'arrow-down\': settings.position == \'top\'}"></div>\r\n        <div class="list-area">\r\n            <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection"\r\n                (click)="toggleSelectAll()">\r\n                <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"\r\n                />\r\n                <label>\r\n                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>\r\n                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n            </div>\r\n            <div class="list-filter" *ngIf="settings.enableSearchFilter && !settings.lazyLoading">\r\n                <span class="fa fa-search"></span>\r\n                <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter">\r\n            </div>\r\n            <div class="list-filter" *ngIf="settings.enableSearchFilter && settings.lazyLoading">\r\n                <span class="fa fa-search"></span>\r\n                <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" (keyup)="filterInfiniteList($event)">\r\n            </div>\r\n            <ul *ngIf="!settings.groupBy" [style.maxHeight]="settings.maxHeight+\'px\'" class="lazyContainer">\r\n                <span *ngIf="itemTempl">\r\n            <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n                <span *ngIf="!itemTempl && !settings.lazyLoading">\r\n        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n                <span *ngIf="!itemTempl && settings.lazyLoading">\r\n            <div [ngStyle]="{\'height\':totalHeight+\'px\'}" style="position: relative;">\r\n\r\n            \r\n        <li *ngFor="let item of chunkArray | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" style="position: absolute;width: 100%;" class="pure-checkbox" [styleProp]="chunkIndex[i]">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </div>\r\n        </span>\r\n            </ul>\r\n            <div *ngIf="settings.groupBy" [style.maxHeight]="settings.maxHeight+\'px\'" style="overflow: auto;">\r\n                <ul *ngFor="let obj of groupedData ; let i = index;" class="list-grp">\r\n                    <h4 *ngIf="(obj.value | listFilter:filter ).length > 0">{{obj.key}}</h4>\r\n                    <span *ngIf="itemTempl">\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n                    <span *ngIf="!itemTempl">\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n                </ul>\r\n            </div>\r\n            <h5 class="list-message" *ngIf="data?.length == 0">{{settings.noDataLabel}}</h5>\r\n        </div>\r\n    </div>\r\n</div>'},function(e,t,n){var i=n(6);e.exports="string"==typeof i?i:i.toString()},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);t.AngularMultiSelect=i.AngularMultiSelect;var s=n(3);t.ClickOutsideDirective=s.ClickOutsideDirective;var o=n(4);t.ListFilterPipe=o.ListFilterPipe;var l=n(0);t.Item=l.Item;var r=n(0);t.TemplateRenderer=r.TemplateRenderer;var c=n(2);t.AngularMultiSelectModule=c.AngularMultiSelectModule}])});
 //# sourceMappingURL=angular2-multiselect-dropdown.umd.min.js.map

clickOutside.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, EventEmitter } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit, OnChanges } from '@angular/core';
 export declare class ClickOutsideDirective {
@@ -21,1 +21,8 @@ private _elementRef;
 }
+export declare class setPosition implements OnInit, OnChanges {
+    el: ElementRef;
+    height: number;
+    constructor(el: ElementRef);
+    ngOnInit(): void;
+    ngOnChanges(): void;
+}

clickOutside.js

@@ -81,2 +81,31 @@ import { Directive, ElementRef, Output, EventEmitter, HostListener, Input } from '@angular/core';
 export { styleDirective };
+var setPosition = /** @class */ (function () {
+    function setPosition(el) {
+        this.el = el;
+    }
+    setPosition.prototype.ngOnInit = function () {
+        if (this.height) {
+            this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
+        }
+    };
+    setPosition.prototype.ngOnChanges = function () {
+        if (this.height) {
+            this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
+        }
+    };
+    setPosition.decorators = [
+        { type: Directive, args: [{
+                    selector: '[setPosition]'
+                },] },
+    ];
+    /** @nocollapse */
+    setPosition.ctorParameters = function () { return [
+        { type: ElementRef, },
+    ]; };
+    setPosition.propDecorators = {
+        'height': [{ type: Input, args: ['setPosition',] },],
+    };
+    return setPosition;
+}());
+export { setPosition };
 //# sourceMappingURL=clickOutside.js.map

clickOutside.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event","$event.target"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchstart",["$event","$event.target"]]}]}]}},"ScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[scroll]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"scroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll",["$event"]]}]}]}},"styleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[styleProp]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"styleVal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["styleProp"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event","$event.target"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchstart",["$event","$event.target"]]}]}]}},"ScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[scroll]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"scroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll",["$event"]]}]}]}},"styleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[styleProp]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"styleVal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["styleProp"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event","$event.target"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchstart",["$event","$event.target"]]}]}]}},"ScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[scroll]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"scroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll",["$event"]]}]}]}},"styleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[styleProp]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"styleVal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["styleProp"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"setPosition":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[setPosition]"}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["setPosition"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event","$event.target"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchstart",["$event","$event.target"]]}]}]}},"ScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[scroll]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"scroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll",["$event"]]}]}]}},"styleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[styleProp]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"styleVal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["styleProp"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"setPosition":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[setPosition]"}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["setPosition"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]

index.umd.js

 /**
  * angular2-multiselect-dropdown - Angular 2 and angular 4 multiselect dropdown component.
- * @version v2.7.0
+ * @version v2.8.0
  * @author undefined
@@ -212,4 +212,5 @@ * @link undefined
 var AngularMultiSelect = /** @class */ (function () {
-    function AngularMultiSelect(_elementRef) {
+    function AngularMultiSelect(_elementRef, cdr) {
         this._elementRef = _elementRef;
+        this.cdr = cdr;
         this.onSelect = new core_1.EventEmitter();
@@ -242,3 +243,5 @@ this.onDeSelect = new core_1.EventEmitter();
             lazyLoading: false,
-            labelKey: 'itemName'
+            labelKey: 'itemName',
+            primaryKey: 'id',
+            position: 'bottom'
         };
@@ -249,2 +252,3 @@ this.onTouchedCallback = noop;
     AngularMultiSelect.prototype.ngOnInit = function () {
+        var _this = this;
         this.settings = Object.assign(this.defaultSettings, this.settings);
@@ -262,2 +266,8 @@ if (this.settings.groupBy) {
         this.renderChunk(0, this.cachedItemsLen / 2);
+        if (this.settings.position == 'top') {
+            setTimeout(function () {
+                _this.selectedListHeight = { val: 0 };
+                _this.selectedListHeight.val = _this.selectedListElem.nativeElement.clientHeight;
+            });
+        }
     };
@@ -274,3 +284,3 @@ AngularMultiSelect.prototype.ngOnChanges = function (changes) {
         if (changes.settings && !changes.settings.firstChange) {
-            this.settings = Object.assign({}, this.defaultSettings, this.settings);
+            this.settings = Object.assign(this.defaultSettings, this.settings);
         }
@@ -290,2 +300,8 @@ };
     };
+    AngularMultiSelect.prototype.ngAfterViewChecked = function () {
+        if (this.selectedListElem.nativeElement.clientHeight && this.settings.position == 'top' && this.selectedListHeight) {
+            this.selectedListHeight.val = this.selectedListElem.nativeElement.clientHeight;
+            this.cdr.detectChanges();
+        }
+    };
     AngularMultiSelect.prototype.onItemClick = function (item, index, evt) {
@@ -364,8 +380,9 @@ if (this.settings.disabled) {
     AngularMultiSelect.prototype.trackByFn = function (index, item) {
-        return item.id;
+        return item[this.settings.primaryKey];
     };
     AngularMultiSelect.prototype.isSelected = function (clickedItem) {
+        var _this = this;
         var found = false;
         this.selectedItems && this.selectedItems.forEach(function (item) {
-            if (clickedItem.id === item.id) {
+            if (clickedItem[_this.settings.primaryKey] === item[_this.settings.primaryKey]) {
                 found = true;
@@ -390,3 +407,3 @@ }
         this.selectedItems && this.selectedItems.forEach(function (item) {
-            if (clickedItem.id === item.id) {
+            if (clickedItem[_this.settings.primaryKey] === item[_this.settings.primaryKey]) {
                 _this.selectedItems.splice(_this.selectedItems.indexOf(item), 1);
@@ -560,2 +577,6 @@ }
     ], AngularMultiSelect.prototype, "searchInput", void 0);
+    __decorate([
+        core_1.ViewChild('selectedList'),
+        __metadata("design:type", core_1.ElementRef)
+    ], AngularMultiSelect.prototype, "selectedListElem", void 0);
     AngularMultiSelect = __decorate([
@@ -569,3 +590,3 @@ core_1.Component({
         }),
-        __metadata("design:paramtypes", [core_1.ElementRef])
+        __metadata("design:paramtypes", [core_1.ElementRef, core_1.ChangeDetectorRef])
     ], AngularMultiSelect);
@@ -581,4 +602,4 @@ return AngularMultiSelect;
             imports: [common_1.CommonModule, forms_1.FormsModule],
-            declarations: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, clickOutside_1.ScrollDirective, clickOutside_1.styleDirective, list_filter_1.ListFilterPipe, menu_item_1.Item, menu_item_1.TemplateRenderer, menu_item_1.Badge],
-            exports: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, clickOutside_1.ScrollDirective, clickOutside_1.styleDirective, list_filter_1.ListFilterPipe, menu_item_1.Item, menu_item_1.TemplateRenderer, menu_item_1.Badge]
+            declarations: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, clickOutside_1.ScrollDirective, clickOutside_1.styleDirective, list_filter_1.ListFilterPipe, menu_item_1.Item, menu_item_1.TemplateRenderer, menu_item_1.Badge, clickOutside_1.setPosition],
+            exports: [AngularMultiSelect, clickOutside_1.ClickOutsideDirective, clickOutside_1.ScrollDirective, clickOutside_1.styleDirective, list_filter_1.ListFilterPipe, menu_item_1.Item, menu_item_1.TemplateRenderer, menu_item_1.Badge, clickOutside_1.setPosition]
         })
@@ -692,2 +713,29 @@ ], AngularMultiSelectModule);
 exports.styleDirective = styleDirective;
+var setPosition = /** @class */ (function () {
+    function setPosition(el) {
+        this.el = el;
+    }
+    setPosition.prototype.ngOnInit = function () {
+        if (this.height) {
+            this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
+        }
+    };
+    setPosition.prototype.ngOnChanges = function () {
+        if (this.height) {
+            this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
+        }
+    };
+    __decorate([
+        core_1.Input('setPosition'),
+        __metadata("design:type", Number)
+    ], setPosition.prototype, "height", void 0);
+    setPosition = __decorate([
+        core_1.Directive({
+            selector: '[setPosition]'
+        }),
+        __metadata("design:paramtypes", [core_1.ElementRef])
+    ], setPosition);
+    return setPosition;
+}());
+exports.setPosition = setPosition;
 
@@ -750,8 +798,2 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-var ListItem = /** @class */ (function () {
-    function ListItem() {
-    }
-    return ListItem;
-}());
-exports.ListItem = ListItem;
 var MyException = /** @class */ (function () {
@@ -776,3 +818,3 @@ function MyException(status, body) {
 // module
-exports.push([module.i, ".cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px;\n  width: calc(100% - 20px); }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    margin-top: 2px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .countplaceholder {\n  position: absolute;\n  right: 30px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  position: relative; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type=\"checkbox\"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type=\"checkbox\"]:focus + label:before,\n.pure-checkbox input[type=\"checkbox\"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type=\"checkbox\"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type=\"checkbox\"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:before {\n  box-sizing: content-box;\n  content: '';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  box-sizing: content-box;\n  content: '';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before\n.pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  content: '';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:before {\n  background-color: white; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type=\"radio\"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:before {\n  background: #0079FE; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n", ""]);
+exports.push([module.i, ".cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px;\n  width: calc(100% - 20px); }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    margin-top: 2px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .countplaceholder {\n  position: absolute;\n  right: 30px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  position: relative; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up, .arrow-down {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.arrow-down {\n  bottom: -14px;\n  top: unset;\n  transform: rotate(180deg); }\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px; }\n\n.arrow-down.arrow-2 {\n  top: unset;\n  bottom: -16px; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type=\"checkbox\"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type=\"checkbox\"]:focus + label:before,\n.pure-checkbox input[type=\"checkbox\"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type=\"checkbox\"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type=\"checkbox\"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:before {\n  box-sizing: content-box;\n  content: '';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  box-sizing: content-box;\n  content: '';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before\n.pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type=\"checkbox\"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  content: '';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:before {\n  background-color: white; }\n\n.pure-checkbox input[type=\"radio\"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type=\"radio\"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:before {\n  background: #0079FE; }\n\n.pure-checkbox input[type=\"checkbox\"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n", ""]);
 
@@ -868,3 +910,3 @@ // exports
 
-module.exports = "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"selected-list\">\r\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\r\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\r\n            <span *ngIf=\"settings.singleSelection\">\r\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\r\n                    {{item[settings.labelKey]}}\r\n                </span>\r\n            </span>\r\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\r\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\r\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\r\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\r\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\r\n                    </span>\r\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\r\n                </div>\r\n            </div> \r\n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\r\n        </div>      \r\n    </div>\r\n    <div class=\"dropdown-list\" [hidden]=\"!isActive\">\r\n    <div class=\"arrow-up arrow-2\"></div>\r\n    <div class=\"arrow-up\"></div>\r\n    <div class=\"list-area\">\r\n        <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\r\n            <label>\r\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\r\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\r\n            <span class=\"fa fa-search\"></span>\r\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\r\n        </div> \r\n        <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\r\n            <span class=\"fa fa-search\"></span>\r\n            <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\r\n        </div>\r\n    <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\r\n        <span *ngIf=\"itemTempl\">\r\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n        <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\r\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n        <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\r\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\r\n\r\n            \r\n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </div>\r\n        </span>\r\n    </ul>\r\n    <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\r\n    <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\r\n        <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\r\n        <span *ngIf=\"itemTempl\" >\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n        <span *ngIf=\"!itemTempl\" >\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n    </ul>\r\n    </div>\r\n    <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\r\n    </div>\r\n    </div>\r\n</div>"
+module.exports = "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"selected-list\" #selectedList>\r\n        <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\r\n            <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\r\n            <span *ngIf=\"settings.singleSelection\">\r\n                <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);\">\r\n                    {{item[settings.labelKey]}}\r\n                </span>\r\n            </span>\r\n            <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\r\n                <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\r\n                    <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\r\n                    <span *ngIf=\"badgeTempl\" class=\"c-label\">\r\n                        <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\r\n                    </span>\r\n                    <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\r\n                </div>\r\n            </div>\r\n            <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\r\n        </div>\r\n    </div>\r\n    <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]= \"{'dropdown-list-top': settings.position == 'top'}\" [hidden]=\"!isActive\">\r\n        <div [ngClass]= \"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"  class=\"arrow-2\"></div>\r\n        <div [ngClass]= \"{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}\"></div>\r\n        <div class=\"list-area\">\r\n            <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\"\r\n                (click)=\"toggleSelectAll()\">\r\n                <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"\r\n                />\r\n                <label>\r\n                <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\r\n                <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n            </div>\r\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\r\n                <span class=\"fa fa-search\"></span>\r\n                <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\r\n            </div>\r\n            <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\r\n                <span class=\"fa fa-search\"></span>\r\n                <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\r\n            </div>\r\n            <ul *ngIf=\"!settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" class=\"lazyContainer\">\r\n                <span *ngIf=\"itemTempl\">\r\n            <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n                <span *ngIf=\"!itemTempl && !settings.lazyLoading\">\r\n        <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n                <span *ngIf=\"!itemTempl && settings.lazyLoading\">\r\n            <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\r\n\r\n            \r\n        <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </div>\r\n        </span>\r\n            </ul>\r\n            <div *ngIf=\"settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\r\n                <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\r\n                    <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\r\n                    <span *ngIf=\"itemTempl\">\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n                    <span *ngIf=\"!itemTempl\">\r\n        <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\r\n            <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n                </ul>\r\n            </div>\r\n            <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\r\n        </div>\r\n    </div>\r\n</div>"
 
@@ -871,0 +913,0 @@ /***/ }),

index.umd.min.js

 /**
  * angular2-multiselect-dropdown - Angular 2 and angular 4 multiselect dropdown component.
- * @version v2.7.0
+ * @version v2.8.0
  * @author undefined
@@ -8,3 +8,3 @@ * @link undefined
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=13)}([function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(){}return i([o.ContentChild(o.TemplateRef),s("design:type",o.TemplateRef)],e.prototype,"template",void 0),e=i([o.Component({selector:"c-item",template:""}),s("design:paramtypes",[])],e)}();t.Item=l;var r=function(){function e(){}return i([o.ContentChild(o.TemplateRef),s("design:type",o.TemplateRef)],e.prototype,"template",void 0),e=i([o.Component({selector:"c-badge",template:""}),s("design:paramtypes",[])],e)}();t.Badge=r;var c=function(){function e(e){this.viewContainer=e}return e.prototype.ngOnInit=function(){this.view=this.viewContainer.createEmbeddedView(this.data.template,{$implicit:this.data,item:this.item})},e.prototype.ngOnDestroy=function(){this.view.destroy()},i([o.Input(),s("design:type",Object)],e.prototype,"data",void 0),i([o.Input(),s("design:type",Object)],e.prototype,"item",void 0),e=i([o.Component({selector:"c-templateRenderer",template:""}),s("design:paramtypes",[o.ViewContainerRef])],e)}();t.TemplateRenderer=c},function(t,n){t.exports=e},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=n(11),r=n(10),c=n(5),a=n(3),p=n(4),d=n(0);t.DROPDOWN_CONTROL_VALUE_ACCESSOR={provide:l.NG_VALUE_ACCESSOR,useExisting:o.forwardRef(function(){return u}),multi:!0},t.DROPDOWN_CONTROL_VALIDATION={provide:l.NG_VALIDATORS,useExisting:o.forwardRef(function(){return u}),multi:!0};var h=function(){},u=function(){function e(e){this._elementRef=e,this.onSelect=new o.EventEmitter,this.onDeSelect=new o.EventEmitter,this.onSelectAll=new o.EventEmitter,this.onDeSelectAll=new o.EventEmitter,this.onOpen=new o.EventEmitter,this.onClose=new o.EventEmitter,this.isActive=!1,this.isSelectAll=!1,this.chunkIndex=[],this.cachedItems=[],this.itemHeight=41.6,this.defaultSettings={singleSelection:!1,text:"Select",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",enableSearchFilter:!1,maxHeight:300,badgeShowLimit:999999999999,classes:"",disabled:!1,searchPlaceholderText:"Search",showCheckbox:!0,noDataLabel:"No Data Available",searchAutofocus:!0,lazyLoading:!1,labelKey:"itemName"},this.onTouchedCallback=h,this.onChangeCallback=h}return e.prototype.ngOnInit=function(){this.settings=Object.assign(this.defaultSettings,this.settings),this.settings.groupBy&&(this.groupedData=this.transformData(this.data,this.settings.groupBy)),this.totalRows=this.data&&this.data.length,this.cachedItems=this.data,this.screenItemsLen=Math.ceil(this.settings.maxHeight/this.itemHeight),this.cachedItemsLen=3*this.screenItemsLen,this.totalHeight=this.itemHeight*this.totalRows,this.maxBuffer=this.screenItemsLen*this.itemHeight,this.lastScrolled=0,this.renderChunk(0,this.cachedItemsLen/2)},e.prototype.ngOnChanges=function(e){e.data&&!e.data.firstChange&&this.settings.groupBy&&(this.groupedData=this.transformData(this.data,this.settings.groupBy),0==this.data.length&&(this.selectedItems=[])),e.settings&&!e.settings.firstChange&&(this.settings=Object.assign({},this.defaultSettings,this.settings))},e.prototype.ngDoCheck=function(){this.selectedItems&&(0==this.selectedItems.length||0==this.data.length||this.selectedItems.length<this.data.length)&&(this.isSelectAll=!1)},e.prototype.ngAfterViewInit=function(){this.settings.lazyLoading&&this._elementRef.nativeElement.getElementsByClassName("lazyContainer")[0].addEventListener("scroll",this.onScroll.bind(this))},e.prototype.onItemClick=function(e,t,n){if(this.settings.disabled)return!1;var i=this.isSelected(e),s=this.selectedItems.length<this.settings.limitSelection;i?(this.removeSelected(e),this.onDeSelect.emit(e)):this.settings.limitSelection?s&&(this.addSelected(e),this.onSelect.emit(e)):(this.addSelected(e),this.onSelect.emit(e)),(this.isSelectAll||this.data.length>this.selectedItems.length)&&(this.isSelectAll=!1),this.data.length==this.selectedItems.length&&(this.isSelectAll=!0)},e.prototype.validate=function(e){return null},e.prototype.writeValue=function(e){if(void 0!==e&&null!==e)if(this.settings.singleSelection)try{if(e.length>1)throw this.selectedItems=[e[0]],new c.MyException(404,{msg:"Single Selection Mode, Selected Items cannot have more than one item."});this.selectedItems=e}catch(e){console.error(e.body.msg)}else this.settings.limitSelection?this.selectedItems=e.splice(0,this.settings.limitSelection):this.selectedItems=e,this.selectedItems.length===this.data.length&&this.data.length>0&&(this.isSelectAll=!0);else this.selectedItems=[]},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.trackByFn=function(e,t){return t.id},e.prototype.isSelected=function(e){var t=!1;return this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&(t=!0)}),t},e.prototype.addSelected=function(e){this.settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e),this.closeDropdown()):this.selectedItems.push(e),this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems)},e.prototype.removeSelected=function(e){var t=this;this.selectedItems&&this.selectedItems.forEach(function(n){e.id===n.id&&t.selectedItems.splice(t.selectedItems.indexOf(n),1)}),this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems)},e.prototype.toggleDropdown=function(e){var t=this;if(this.settings.disabled)return!1;this.isActive=!this.isActive,this.isActive?(this.settings.searchAutofocus&&this.settings.enableSearchFilter&&setTimeout(function(){t.searchInput.nativeElement.focus()},0),this.onOpen.emit(!0)):this.onClose.emit(!1),e.preventDefault()},e.prototype.closeDropdown=function(){this.searchInput&&this.settings.lazyLoading&&(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.searchInput&&(this.searchInput.nativeElement.value=""),this.filter="",this.isActive=!1,this.onClose.emit(!1)},e.prototype.toggleSelectAll=function(){this.isSelectAll?(this.selectedItems=[],this.isSelectAll=!1,this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems),this.onDeSelectAll.emit(this.selectedItems)):(this.selectedItems=[],this.selectedItems=this.data.slice(),this.isSelectAll=!0,this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems),this.onSelectAll.emit(this.selectedItems))},e.prototype.transformData=function(e,t){var n=e.reduce(function(e,n){return e[n[t]]?e[n[t]].push(n):e[n[t]]=[n],e},{}),i=[];return Object.keys(n).map(function(e){i.push({key:e,value:n[e]})}),i},e.prototype.renderChunk=function(e,t){this.chunkArray=[],this.chunkIndex=[];var n=e+t;n>this.totalRows&&(n=this.totalRows);for(var i=e;i<n;i++)this.chunkIndex.push(i*this.itemHeight+"px"),this.chunkArray.push(this.data[i])},e.prototype.onScroll=function(e){this.scrollTop=e.target.scrollTop,this.updateView(this.scrollTop)},e.prototype.updateView=function(e){var t=e||0,n=t/this.itemHeight-this.screenItemsLen,i=""+n;n=parseInt(i)<0?0:parseInt(i),this.renderChunk(n,this.cachedItemsLen),this.lastRepaintY=t},e.prototype.filterInfiniteList=function(e){var t=[];this.data=this.cachedItems.slice(),""!=e.target.value.toString()?(this.data.filter(function(n){for(var i in n)if(n[i].toString().toLowerCase().indexOf(e.target.value.toString().toLowerCase())>=0){t.push(n);break}}),this.totalHeight=this.itemHeight*t.length,this.totalRows=t.length,this.data=[],this.data=t,this.updateView(this.scrollTop)):""==e.target.value.toString()&&this.cachedItems.length>0&&(this.data=[],this.data=this.cachedItems,this.totalHeight=this.itemHeight*this.data.length,this.totalRows=this.data.length,this.updateView(this.scrollTop))},i([o.Input(),s("design:type",Array)],e.prototype,"data",void 0),i([o.Input(),s("design:type",Object)],e.prototype,"settings",void 0),i([o.Output("onSelect"),s("design:type",o.EventEmitter)],e.prototype,"onSelect",void 0),i([o.Output("onDeSelect"),s("design:type",o.EventEmitter)],e.prototype,"onDeSelect",void 0),i([o.Output("onSelectAll"),s("design:type",o.EventEmitter)],e.prototype,"onSelectAll",void 0),i([o.Output("onDeSelectAll"),s("design:type",o.EventEmitter)],e.prototype,"onDeSelectAll",void 0),i([o.Output("onOpen"),s("design:type",o.EventEmitter)],e.prototype,"onOpen",void 0),i([o.Output("onClose"),s("design:type",o.EventEmitter)],e.prototype,"onClose",void 0),i([o.ContentChild(d.Item),s("design:type",d.Item)],e.prototype,"itemTempl",void 0),i([o.ContentChild(d.Badge),s("design:type",d.Badge)],e.prototype,"badgeTempl",void 0),i([o.ViewChild("searchInput"),s("design:type",o.ElementRef)],e.prototype,"searchInput",void 0),e=i([o.Component({selector:"angular2-multiselect",template:n(8),host:{"[class]":"defaultSettings.classes"},styles:[n(9)],providers:[t.DROPDOWN_CONTROL_VALUE_ACCESSOR,t.DROPDOWN_CONTROL_VALIDATION]}),s("design:paramtypes",[o.ElementRef])],e)}();t.AngularMultiSelect=u;var f=function(){function e(){}return e=i([o.NgModule({imports:[r.CommonModule,l.FormsModule],declarations:[u,a.ClickOutsideDirective,a.ScrollDirective,a.styleDirective,p.ListFilterPipe,d.Item,d.TemplateRenderer,d.Badge],exports:[u,a.ClickOutsideDirective,a.ScrollDirective,a.styleDirective,p.ListFilterPipe,d.Item,d.TemplateRenderer,d.Badge]})],e)}();t.AngularMultiSelectModule=f},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(e){this._elementRef=e,this.clickOutside=new o.EventEmitter}return e.prototype.onClick=function(e,t){if(t){this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e)}},i([o.Output(),s("design:type",Object)],e.prototype,"clickOutside",void 0),i([o.HostListener("document:click",["$event","$event.target"]),o.HostListener("document:touchstart",["$event","$event.target"]),s("design:type",Function),s("design:paramtypes",[MouseEvent,HTMLElement]),s("design:returntype",void 0)],e.prototype,"onClick",null),e=i([o.Directive({selector:"[clickOutside]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.ClickOutsideDirective=l;var r=function(){function e(e){this._elementRef=e,this.scroll=new o.EventEmitter}return e.prototype.onClick=function(e,t){this.scroll.emit(e)},i([o.Output(),s("design:type",Object)],e.prototype,"scroll",void 0),i([o.HostListener("scroll",["$event"]),s("design:type",Function),s("design:paramtypes",[MouseEvent,HTMLElement]),s("design:returntype",void 0)],e.prototype,"onClick",null),e=i([o.Directive({selector:"[scroll]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.ScrollDirective=r;var c=function(){function e(e){this.el=e}return e.prototype.ngOnInit=function(){this.el.nativeElement.style.top=this.styleVal},e.prototype.ngOnChanges=function(){this.el.nativeElement.style.top=this.styleVal},i([o.Input("styleProp"),s("design:type",Number)],e.prototype,"styleVal",void 0),e=i([o.Directive({selector:"[styleProp]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.styleDirective=c},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l};Object.defineProperty(t,"__esModule",{value:!0});var s=n(1),o=function(){function e(){}return e.prototype.transform=function(e,t){var n=this;return e&&t?e.filter(function(e){return n.applyFilter(e,t)}):e},e.prototype.applyFilter=function(e,t){var n=!1;for(var i in e)t?e[i].toString().toLowerCase().indexOf(t.toLowerCase())>=0&&(n=!0):n=!0;return n},e=i([s.Pipe({name:"listFilter",pure:!1})],e)}();t.ListFilterPipe=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(){}return e}();t.ListItem=i;var s=function(){function e(e,t){this.status=e,this.body=t}return e}();t.MyException=s},function(e,t,n){t=e.exports=n(7)(void 0),t.push([e.i,'.cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px;\n  width: calc(100% - 20px); }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    margin-top: 2px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .countplaceholder {\n  position: absolute;\n  right: 30px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  position: relative; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type="checkbox"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type="checkbox"]:focus + label:before,\n.pure-checkbox input[type="checkbox"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type="checkbox"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type="checkbox"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type="checkbox"] + label:before {\n  box-sizing: content-box;\n  content: \'\';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  box-sizing: content-box;\n  content: \'\';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="checkbox"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"]:disabled:focus + label:before\n.pure-checkbox input[type="checkbox"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  content: \'\';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="radio"]:checked + label:before {\n  background-color: white; }\n\n.pure-checkbox input[type="radio"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type="radio"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:before {\n  background: #0079FE; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n',""])},function(e,t){function n(e,t){var n=e[1]||"",s=e[3];if(!s)return n;if(t&&"function"==typeof btoa){var o=i(s);return[n].concat(s.sources.map(function(e){return"/*# sourceURL="+s.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},s=0;s<this.length;s++){var o=this[s][0];"number"==typeof o&&(i[o]=!0)}for(s=0;s<e.length;s++){var l=e[s];"number"==typeof l[0]&&i[l[0]]||(n&&!l[2]?l[2]=n:n&&(l[2]="("+l[2]+") and ("+n+")"),t.push(l))}},t}},function(e,t){e.exports='<div class="cuppa-dropdown" (clickOutside)="closeDropdown()">\r\n    <div class="selected-list">\r\n        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{\'disabled\': settings.disabled}">\r\n            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>\r\n            <span *ngIf="settings.singleSelection">\r\n                <span *ngFor="let item of selectedItems;trackBy: trackByFn;">\r\n                    {{item[settings.labelKey]}}\r\n                </span>\r\n            </span>\r\n            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">\r\n                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">\r\n                    <span *ngIf="!badgeTempl" class="c-label">{{item[settings.labelKey]}}</span>\r\n                    <span *ngIf="badgeTempl" class="c-label">\r\n                        <c-templateRenderer [data]="badgeTempl" [item]="item"></c-templateRenderer>\r\n                    </span>\r\n                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)"></span>\r\n                </div>\r\n            </div> \r\n            <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class="fa" [ngClass]="{\'fa-angle-down\': !isActive,\'fa-angle-up\':isActive}"></span>\r\n        </div>      \r\n    </div>\r\n    <div class="dropdown-list" [hidden]="!isActive">\r\n    <div class="arrow-up arrow-2"></div>\r\n    <div class="arrow-up"></div>\r\n    <div class="list-area">\r\n        <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>\r\n            <label>\r\n                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>\r\n                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n        </div>   \r\n        <div class="list-filter" *ngIf="settings.enableSearchFilter && !settings.lazyLoading">\r\n            <span class="fa fa-search"></span>\r\n            <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter">\r\n        </div> \r\n        <div class="list-filter" *ngIf="settings.enableSearchFilter && settings.lazyLoading">\r\n            <span class="fa fa-search"></span>\r\n            <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" (keyup)="filterInfiniteList($event)">\r\n        </div>\r\n    <ul *ngIf="!settings.groupBy" [style.maxHeight] = "settings.maxHeight+\'px\'" class="lazyContainer" >\r\n        <span *ngIf="itemTempl">\r\n            <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n        <span *ngIf="!itemTempl && !settings.lazyLoading" >\r\n        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n        <span *ngIf="!itemTempl && settings.lazyLoading" >\r\n            <div [ngStyle]="{\'height\':totalHeight+\'px\'}" style="position: relative;">\r\n\r\n            \r\n        <li *ngFor="let item of chunkArray | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" style="position: absolute;width: 100%;" class="pure-checkbox" [styleProp]="chunkIndex[i]">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </div>\r\n        </span>\r\n    </ul>\r\n    <div *ngIf="settings.groupBy" [style.maxHeight] = "settings.maxHeight+\'px\'" style="overflow: auto;">\r\n    <ul *ngFor="let obj of groupedData ; let i = index;" class="list-grp">\r\n        <h4 *ngIf="(obj.value | listFilter:filter ).length > 0">{{obj.key}}</h4>\r\n        <span *ngIf="itemTempl" >\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n        <span *ngIf="!itemTempl" >\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n    </ul>\r\n    </div>\r\n    <h5 class="list-message" *ngIf="data?.length == 0">{{settings.noDataLabel}}</h5>\r\n    </div>\r\n    </div>\r\n</div>'},function(e,t,n){var i=n(6);e.exports="string"==typeof i?i:i.toString()},function(e,n){e.exports=t},function(e,t){e.exports=n},,function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);t.AngularMultiSelect=i.AngularMultiSelect;var s=n(3);t.ClickOutsideDirective=s.ClickOutsideDirective;var o=n(4);t.ListFilterPipe=o.ListFilterPipe;var l=n(0);t.Item=l.Item;var r=n(0);t.TemplateRenderer=r.TemplateRenderer;var c=n(2);t.AngularMultiSelectModule=c.AngularMultiSelectModule}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=13)}([function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(){}return i([o.ContentChild(o.TemplateRef),s("design:type",o.TemplateRef)],e.prototype,"template",void 0),e=i([o.Component({selector:"c-item",template:""}),s("design:paramtypes",[])],e)}();t.Item=l;var r=function(){function e(){}return i([o.ContentChild(o.TemplateRef),s("design:type",o.TemplateRef)],e.prototype,"template",void 0),e=i([o.Component({selector:"c-badge",template:""}),s("design:paramtypes",[])],e)}();t.Badge=r;var c=function(){function e(e){this.viewContainer=e}return e.prototype.ngOnInit=function(){this.view=this.viewContainer.createEmbeddedView(this.data.template,{$implicit:this.data,item:this.item})},e.prototype.ngOnDestroy=function(){this.view.destroy()},i([o.Input(),s("design:type",Object)],e.prototype,"data",void 0),i([o.Input(),s("design:type",Object)],e.prototype,"item",void 0),e=i([o.Component({selector:"c-templateRenderer",template:""}),s("design:paramtypes",[o.ViewContainerRef])],e)}();t.TemplateRenderer=c},function(t,n){t.exports=e},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=n(11),r=n(10),c=n(5),a=n(3),p=n(4),d=n(0);t.DROPDOWN_CONTROL_VALUE_ACCESSOR={provide:l.NG_VALUE_ACCESSOR,useExisting:o.forwardRef(function(){return u}),multi:!0},t.DROPDOWN_CONTROL_VALIDATION={provide:l.NG_VALIDATORS,useExisting:o.forwardRef(function(){return u}),multi:!0};var h=function(){},u=function(){function e(e,t){this._elementRef=e,this.cdr=t,this.onSelect=new o.EventEmitter,this.onDeSelect=new o.EventEmitter,this.onSelectAll=new o.EventEmitter,this.onDeSelectAll=new o.EventEmitter,this.onOpen=new o.EventEmitter,this.onClose=new o.EventEmitter,this.isActive=!1,this.isSelectAll=!1,this.chunkIndex=[],this.cachedItems=[],this.itemHeight=41.6,this.defaultSettings={singleSelection:!1,text:"Select",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",enableSearchFilter:!1,maxHeight:300,badgeShowLimit:999999999999,classes:"",disabled:!1,searchPlaceholderText:"Search",showCheckbox:!0,noDataLabel:"No Data Available",searchAutofocus:!0,lazyLoading:!1,labelKey:"itemName",primaryKey:"id",position:"bottom"},this.onTouchedCallback=h,this.onChangeCallback=h}return e.prototype.ngOnInit=function(){var e=this;this.settings=Object.assign(this.defaultSettings,this.settings),this.settings.groupBy&&(this.groupedData=this.transformData(this.data,this.settings.groupBy)),this.totalRows=this.data&&this.data.length,this.cachedItems=this.data,this.screenItemsLen=Math.ceil(this.settings.maxHeight/this.itemHeight),this.cachedItemsLen=3*this.screenItemsLen,this.totalHeight=this.itemHeight*this.totalRows,this.maxBuffer=this.screenItemsLen*this.itemHeight,this.lastScrolled=0,this.renderChunk(0,this.cachedItemsLen/2),"top"==this.settings.position&&setTimeout(function(){e.selectedListHeight={val:0},e.selectedListHeight.val=e.selectedListElem.nativeElement.clientHeight})},e.prototype.ngOnChanges=function(e){e.data&&!e.data.firstChange&&this.settings.groupBy&&(this.groupedData=this.transformData(this.data,this.settings.groupBy),0==this.data.length&&(this.selectedItems=[])),e.settings&&!e.settings.firstChange&&(this.settings=Object.assign(this.defaultSettings,this.settings))},e.prototype.ngDoCheck=function(){this.selectedItems&&(0==this.selectedItems.length||0==this.data.length||this.selectedItems.length<this.data.length)&&(this.isSelectAll=!1)},e.prototype.ngAfterViewInit=function(){this.settings.lazyLoading&&this._elementRef.nativeElement.getElementsByClassName("lazyContainer")[0].addEventListener("scroll",this.onScroll.bind(this))},e.prototype.ngAfterViewChecked=function(){this.selectedListElem.nativeElement.clientHeight&&"top"==this.settings.position&&this.selectedListHeight&&(this.selectedListHeight.val=this.selectedListElem.nativeElement.clientHeight,this.cdr.detectChanges())},e.prototype.onItemClick=function(e,t,n){if(this.settings.disabled)return!1;var i=this.isSelected(e),s=this.selectedItems.length<this.settings.limitSelection;i?(this.removeSelected(e),this.onDeSelect.emit(e)):this.settings.limitSelection?s&&(this.addSelected(e),this.onSelect.emit(e)):(this.addSelected(e),this.onSelect.emit(e)),(this.isSelectAll||this.data.length>this.selectedItems.length)&&(this.isSelectAll=!1),this.data.length==this.selectedItems.length&&(this.isSelectAll=!0)},e.prototype.validate=function(e){return null},e.prototype.writeValue=function(e){if(void 0!==e&&null!==e)if(this.settings.singleSelection)try{if(e.length>1)throw this.selectedItems=[e[0]],new c.MyException(404,{msg:"Single Selection Mode, Selected Items cannot have more than one item."});this.selectedItems=e}catch(e){console.error(e.body.msg)}else this.settings.limitSelection?this.selectedItems=e.splice(0,this.settings.limitSelection):this.selectedItems=e,this.selectedItems.length===this.data.length&&this.data.length>0&&(this.isSelectAll=!0);else this.selectedItems=[]},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.trackByFn=function(e,t){return t[this.settings.primaryKey]},e.prototype.isSelected=function(e){var t=this,n=!1;return this.selectedItems&&this.selectedItems.forEach(function(i){e[t.settings.primaryKey]===i[t.settings.primaryKey]&&(n=!0)}),n},e.prototype.addSelected=function(e){this.settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e),this.closeDropdown()):this.selectedItems.push(e),this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems)},e.prototype.removeSelected=function(e){var t=this;this.selectedItems&&this.selectedItems.forEach(function(n){e[t.settings.primaryKey]===n[t.settings.primaryKey]&&t.selectedItems.splice(t.selectedItems.indexOf(n),1)}),this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems)},e.prototype.toggleDropdown=function(e){var t=this;if(this.settings.disabled)return!1;this.isActive=!this.isActive,this.isActive?(this.settings.searchAutofocus&&this.settings.enableSearchFilter&&setTimeout(function(){t.searchInput.nativeElement.focus()},0),this.onOpen.emit(!0)):this.onClose.emit(!1),e.preventDefault()},e.prototype.closeDropdown=function(){this.searchInput&&this.settings.lazyLoading&&(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.searchInput&&(this.searchInput.nativeElement.value=""),this.filter="",this.isActive=!1,this.onClose.emit(!1)},e.prototype.toggleSelectAll=function(){this.isSelectAll?(this.selectedItems=[],this.isSelectAll=!1,this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems),this.onDeSelectAll.emit(this.selectedItems)):(this.selectedItems=[],this.selectedItems=this.data.slice(),this.isSelectAll=!0,this.onChangeCallback(this.selectedItems),this.onTouchedCallback(this.selectedItems),this.onSelectAll.emit(this.selectedItems))},e.prototype.transformData=function(e,t){var n=e.reduce(function(e,n){return e[n[t]]?e[n[t]].push(n):e[n[t]]=[n],e},{}),i=[];return Object.keys(n).map(function(e){i.push({key:e,value:n[e]})}),i},e.prototype.renderChunk=function(e,t){this.chunkArray=[],this.chunkIndex=[];var n=e+t;n>this.totalRows&&(n=this.totalRows);for(var i=e;i<n;i++)this.chunkIndex.push(i*this.itemHeight+"px"),this.chunkArray.push(this.data[i])},e.prototype.onScroll=function(e){this.scrollTop=e.target.scrollTop,this.updateView(this.scrollTop)},e.prototype.updateView=function(e){var t=e||0,n=t/this.itemHeight-this.screenItemsLen,i=""+n;n=parseInt(i)<0?0:parseInt(i),this.renderChunk(n,this.cachedItemsLen),this.lastRepaintY=t},e.prototype.filterInfiniteList=function(e){var t=[];this.data=this.cachedItems.slice(),""!=e.target.value.toString()?(this.data.filter(function(n){for(var i in n)if(n[i].toString().toLowerCase().indexOf(e.target.value.toString().toLowerCase())>=0){t.push(n);break}}),this.totalHeight=this.itemHeight*t.length,this.totalRows=t.length,this.data=[],this.data=t,this.updateView(this.scrollTop)):""==e.target.value.toString()&&this.cachedItems.length>0&&(this.data=[],this.data=this.cachedItems,this.totalHeight=this.itemHeight*this.data.length,this.totalRows=this.data.length,this.updateView(this.scrollTop))},i([o.Input(),s("design:type",Array)],e.prototype,"data",void 0),i([o.Input(),s("design:type",Object)],e.prototype,"settings",void 0),i([o.Output("onSelect"),s("design:type",o.EventEmitter)],e.prototype,"onSelect",void 0),i([o.Output("onDeSelect"),s("design:type",o.EventEmitter)],e.prototype,"onDeSelect",void 0),i([o.Output("onSelectAll"),s("design:type",o.EventEmitter)],e.prototype,"onSelectAll",void 0),i([o.Output("onDeSelectAll"),s("design:type",o.EventEmitter)],e.prototype,"onDeSelectAll",void 0),i([o.Output("onOpen"),s("design:type",o.EventEmitter)],e.prototype,"onOpen",void 0),i([o.Output("onClose"),s("design:type",o.EventEmitter)],e.prototype,"onClose",void 0),i([o.ContentChild(d.Item),s("design:type",d.Item)],e.prototype,"itemTempl",void 0),i([o.ContentChild(d.Badge),s("design:type",d.Badge)],e.prototype,"badgeTempl",void 0),i([o.ViewChild("searchInput"),s("design:type",o.ElementRef)],e.prototype,"searchInput",void 0),i([o.ViewChild("selectedList"),s("design:type",o.ElementRef)],e.prototype,"selectedListElem",void 0),e=i([o.Component({selector:"angular2-multiselect",template:n(8),host:{"[class]":"defaultSettings.classes"},styles:[n(9)],providers:[t.DROPDOWN_CONTROL_VALUE_ACCESSOR,t.DROPDOWN_CONTROL_VALIDATION]}),s("design:paramtypes",[o.ElementRef,o.ChangeDetectorRef])],e)}();t.AngularMultiSelect=u;var g=function(){function e(){}return e=i([o.NgModule({imports:[r.CommonModule,l.FormsModule],declarations:[u,a.ClickOutsideDirective,a.ScrollDirective,a.styleDirective,p.ListFilterPipe,d.Item,d.TemplateRenderer,d.Badge,a.setPosition],exports:[u,a.ClickOutsideDirective,a.ScrollDirective,a.styleDirective,p.ListFilterPipe,d.Item,d.TemplateRenderer,d.Badge,a.setPosition]})],e)}();t.AngularMultiSelectModule=g},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l},s=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),l=function(){function e(e){this._elementRef=e,this.clickOutside=new o.EventEmitter}return e.prototype.onClick=function(e,t){if(t){this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e)}},i([o.Output(),s("design:type",Object)],e.prototype,"clickOutside",void 0),i([o.HostListener("document:click",["$event","$event.target"]),o.HostListener("document:touchstart",["$event","$event.target"]),s("design:type",Function),s("design:paramtypes",[MouseEvent,HTMLElement]),s("design:returntype",void 0)],e.prototype,"onClick",null),e=i([o.Directive({selector:"[clickOutside]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.ClickOutsideDirective=l;var r=function(){function e(e){this._elementRef=e,this.scroll=new o.EventEmitter}return e.prototype.onClick=function(e,t){this.scroll.emit(e)},i([o.Output(),s("design:type",Object)],e.prototype,"scroll",void 0),i([o.HostListener("scroll",["$event"]),s("design:type",Function),s("design:paramtypes",[MouseEvent,HTMLElement]),s("design:returntype",void 0)],e.prototype,"onClick",null),e=i([o.Directive({selector:"[scroll]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.ScrollDirective=r;var c=function(){function e(e){this.el=e}return e.prototype.ngOnInit=function(){this.el.nativeElement.style.top=this.styleVal},e.prototype.ngOnChanges=function(){this.el.nativeElement.style.top=this.styleVal},i([o.Input("styleProp"),s("design:type",Number)],e.prototype,"styleVal",void 0),e=i([o.Directive({selector:"[styleProp]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.styleDirective=c;var a=function(){function e(e){this.el=e}return e.prototype.ngOnInit=function(){this.height&&(this.el.nativeElement.style.bottom=parseInt(this.height+15+"")+"px")},e.prototype.ngOnChanges=function(){this.height&&(this.el.nativeElement.style.bottom=parseInt(this.height+15+"")+"px")},i([o.Input("setPosition"),s("design:type",Number)],e.prototype,"height",void 0),e=i([o.Directive({selector:"[setPosition]"}),s("design:paramtypes",[o.ElementRef])],e)}();t.setPosition=a},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var s,o=arguments.length,l=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(l=(o<3?s(l):o>3?s(t,n,l):s(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l};Object.defineProperty(t,"__esModule",{value:!0});var s=n(1),o=function(){function e(){}return e.prototype.transform=function(e,t){var n=this;return e&&t?e.filter(function(e){return n.applyFilter(e,t)}):e},e.prototype.applyFilter=function(e,t){var n=!1;for(var i in e)t?e[i].toString().toLowerCase().indexOf(t.toLowerCase())>=0&&(n=!0):n=!0;return n},e=i([s.Pipe({name:"listFilter",pure:!1})],e)}();t.ListFilterPipe=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){this.status=e,this.body=t}return e}();t.MyException=i},function(e,t,n){t=e.exports=n(7)(void 0),t.push([e.i,'.cuppa-dropdown {\n  position: relative; }\n\n.c-btn {\n  display: inline-block;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 14px;\n  color: #333; }\n\n.c-btn.disabled {\n  background: #ccc; }\n\n.c-btn:focus {\n  outline: none; }\n\n.selected-list .c-list {\n  float: left;\n  padding: 0px;\n  margin: 0px;\n  width: calc(100% - 20px); }\n  .selected-list .c-list .c-token {\n    list-style: none;\n    padding: 0px 5px;\n    background: #0079FE;\n    color: #fff;\n    border-radius: 2px;\n    margin-right: 4px;\n    margin-top: 2px;\n    float: left; }\n    .selected-list .c-list .c-token .c-label {\n      display: block;\n      float: left;\n      /*width: 50px;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;*/ }\n    .selected-list .c-list .c-token .fa-remove {\n      margin-left: 1px;\n      font-size: 12px;\n      z-index: 100000000; }\n\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n  font-size: 15pt;\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .countplaceholder {\n  position: absolute;\n  right: 30px;\n  top: 50%;\n  transform: translateY(-50%); }\n\n.selected-list .c-btn {\n  width: 100%;\n  box-shadow: 0px 1px 5px #959595;\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  position: relative; }\n\n.dropdown-list {\n  position: absolute;\n  padding-top: 14px;\n  width: 100%;\n  z-index: 9999; }\n  .dropdown-list ul {\n    padding: 0px;\n    list-style: none;\n    overflow: auto;\n    margin: 0px; }\n    .dropdown-list ul li {\n      padding: 10px 10px;\n      cursor: pointer;\n      text-align: left; }\n    .dropdown-list ul li:first-child {\n      padding-top: 10px; }\n    .dropdown-list ul li:last-child {\n      padding-bottom: 10px; }\n    .dropdown-list ul li:hover {\n      background: #f5f5f5; }\n  .dropdown-list ::-webkit-scrollbar {\n    width: 8px; }\n  .dropdown-list ::-webkit-scrollbar-thumb {\n    background: #cccccc;\n    border-radius: 5px; }\n  .dropdown-list ::-webkit-scrollbar-track {\n    background: #f2f2f2; }\n\n.arrow-up, .arrow-down {\n  width: 0;\n  height: 0;\n  border-left: 13px solid transparent;\n  border-right: 13px solid transparent;\n  border-bottom: 15px solid #fff;\n  margin-left: 15px;\n  position: absolute;\n  top: 0; }\n\n.arrow-down {\n  bottom: -14px;\n  top: unset;\n  transform: rotate(180deg); }\n\n.arrow-2 {\n  border-bottom: 15px solid #ccc;\n  top: -1px; }\n\n.arrow-down.arrow-2 {\n  top: unset;\n  bottom: -16px; }\n\n.list-area {\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  background: #fff;\n  margin: 0px;\n  box-shadow: 0px 1px 5px #959595; }\n\n.select-all {\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  text-align: left; }\n\n.list-filter {\n  border-bottom: 1px solid #ccc;\n  position: relative; }\n  .list-filter input {\n    border: 0px;\n    width: 100%;\n    height: 35px;\n    padding: 0px 0px 0px 35px; }\n  .list-filter input:focus {\n    outline: none; }\n  .list-filter .fa {\n    position: absolute;\n    top: 10px;\n    left: 13px;\n    color: #888; }\n\n.pure-checkbox input[type="checkbox"] {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px; }\n\n.pure-checkbox input[type="checkbox"]:focus + label:before,\n.pure-checkbox input[type="checkbox"]:hover + label:before {\n  border-color: #0079FE;\n  background-color: #f2f2f2; }\n\n.pure-checkbox input[type="checkbox"]:active + label:before {\n  transition-duration: 0s; }\n\n.pure-checkbox input[type="checkbox"] + label {\n  position: relative;\n  padding-left: 2em;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  margin: 0px;\n  color: #000;\n  font-weight: 300; }\n\n.pure-checkbox input[type="checkbox"] + label:before {\n  box-sizing: content-box;\n  content: \'\';\n  color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 14px;\n  height: 14px;\n  margin-top: -9px;\n  border: 2px solid #0079FE;\n  text-align: center;\n  transition: all 0.4s ease; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  box-sizing: content-box;\n  content: \'\';\n  background-color: #0079FE;\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  transform: scale(0);\n  transform-origin: 50%;\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="checkbox"]:disabled + label:before {\n  border-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"]:disabled:focus + label:before\n.pure-checkbox input[type="checkbox"]:disabled:hover + label:before {\n  background-color: inherit; }\n\n.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {\n  background-color: #cccccc; }\n\n.pure-checkbox input[type="checkbox"] + label:after {\n  background-color: transparent;\n  top: 50%;\n  left: 4px;\n  width: 8px;\n  height: 3px;\n  margin-top: -4px;\n  border-style: solid;\n  border-color: #ffffff;\n  border-width: 0 0 3px 3px;\n  border-image: none;\n  transform: rotate(-45deg) scale(0); }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  content: \'\';\n  transform: rotate(-45deg) scale(1);\n  transition: transform 200ms ease-out; }\n\n.pure-checkbox input[type="radio"]:checked + label:before {\n  background-color: white; }\n\n.pure-checkbox input[type="radio"]:checked + label:after {\n  transform: scale(1); }\n\n.pure-checkbox input[type="radio"] + label:before {\n  border-radius: 50%; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:before {\n  background: #0079FE; }\n\n.pure-checkbox input[type="checkbox"]:checked + label:after {\n  transform: rotate(-45deg) scale(1); }\n\n.list-message {\n  text-align: center; }\n\n.list-grp {\n  padding: 0 15px !important; }\n\n.list-grp h4 {\n  text-transform: capitalize;\n  margin: 15px 0px 0px 0px;\n  font-size: 14px;\n  font-weight: 700; }\n\n.list-grp > li {\n  padding-left: 15px !important; }\n',""])},function(e,t){function n(e,t){var n=e[1]||"",s=e[3];if(!s)return n;if(t&&"function"==typeof btoa){var o=i(s);return[n].concat(s.sources.map(function(e){return"/*# sourceURL="+s.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},s=0;s<this.length;s++){var o=this[s][0];"number"==typeof o&&(i[o]=!0)}for(s=0;s<e.length;s++){var l=e[s];"number"==typeof l[0]&&i[l[0]]||(n&&!l[2]?l[2]=n:n&&(l[2]="("+l[2]+") and ("+n+")"),t.push(l))}},t}},function(e,t){e.exports='<div class="cuppa-dropdown" (clickOutside)="closeDropdown()">\r\n    <div class="selected-list" #selectedList>\r\n        <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{\'disabled\': settings.disabled}">\r\n            <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>\r\n            <span *ngIf="settings.singleSelection">\r\n                <span *ngFor="let item of selectedItems;trackBy: trackByFn.bind(this);">\r\n                    {{item[settings.labelKey]}}\r\n                </span>\r\n            </span>\r\n            <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">\r\n                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn.bind(this);let k = index" [hidden]="k > settings.badgeShowLimit-1">\r\n                    <span *ngIf="!badgeTempl" class="c-label">{{item[settings.labelKey]}}</span>\r\n                    <span *ngIf="badgeTempl" class="c-label">\r\n                        <c-templateRenderer [data]="badgeTempl" [item]="item"></c-templateRenderer>\r\n                    </span>\r\n                    <span class="fa fa-remove" (click)="onItemClick(item,k,$event)"></span>\r\n                </div>\r\n            </div>\r\n            <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\r\n            <span class="fa" [ngClass]="{\'fa-angle-down\': !isActive,\'fa-angle-up\':isActive}"></span>\r\n        </div>\r\n    </div>\r\n    <div [setPosition]="selectedListHeight?.val" class="dropdown-list" [ngClass]= "{\'dropdown-list-top\': settings.position == \'top\'}" [hidden]="!isActive">\r\n        <div [ngClass]= "{\'arrow-up\': settings.position == \'bottom\', \'arrow-down\': settings.position == \'top\'}"  class="arrow-2"></div>\r\n        <div [ngClass]= "{\'arrow-up\': settings.position == \'bottom\', \'arrow-down\': settings.position == \'top\'}"></div>\r\n        <div class="list-area">\r\n            <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection"\r\n                (click)="toggleSelectAll()">\r\n                <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"\r\n                />\r\n                <label>\r\n                <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>\r\n                <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>\r\n            </label>\r\n            </div>\r\n            <div class="list-filter" *ngIf="settings.enableSearchFilter && !settings.lazyLoading">\r\n                <span class="fa fa-search"></span>\r\n                <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter">\r\n            </div>\r\n            <div class="list-filter" *ngIf="settings.enableSearchFilter && settings.lazyLoading">\r\n                <span class="fa fa-search"></span>\r\n                <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" (keyup)="filterInfiniteList($event)">\r\n            </div>\r\n            <ul *ngIf="!settings.groupBy" [style.maxHeight]="settings.maxHeight+\'px\'" class="lazyContainer">\r\n                <span *ngIf="itemTempl">\r\n            <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n                <span *ngIf="!itemTempl && !settings.lazyLoading">\r\n        <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n                <span *ngIf="!itemTempl && settings.lazyLoading">\r\n            <div [ngStyle]="{\'height\':totalHeight+\'px\'}" style="position: relative;">\r\n\r\n            \r\n        <li *ngFor="let item of chunkArray | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" style="position: absolute;width: 100%;" class="pure-checkbox" [styleProp]="chunkIndex[i]">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </div>\r\n        </span>\r\n            </ul>\r\n            <div *ngIf="settings.groupBy" [style.maxHeight]="settings.maxHeight+\'px\'" style="overflow: auto;">\r\n                <ul *ngFor="let obj of groupedData ; let i = index;" class="list-grp">\r\n                    <h4 *ngIf="(obj.value | listFilter:filter ).length > 0">{{obj.key}}</h4>\r\n                    <span *ngIf="itemTempl">\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label></label>\r\n            <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>\r\n        </li>\r\n        </span>\r\n                    <span *ngIf="!itemTempl">\r\n        <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">\r\n            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>\r\n            <label>{{item[settings.labelKey]}}</label>\r\n        </li>\r\n        </span>\r\n                </ul>\r\n            </div>\r\n            <h5 class="list-message" *ngIf="data?.length == 0">{{settings.noDataLabel}}</h5>\r\n        </div>\r\n    </div>\r\n</div>'},function(e,t,n){var i=n(6);e.exports="string"==typeof i?i:i.toString()},function(e,n){e.exports=t},function(e,t){e.exports=n},,function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);t.AngularMultiSelect=i.AngularMultiSelect;var s=n(3);t.ClickOutsideDirective=s.ClickOutsideDirective;var o=n(4);t.ListFilterPipe=o.ListFilterPipe;var l=n(0);t.Item=l.Item;var r=n(0);t.TemplateRenderer=r.TemplateRenderer;var c=n(2);t.AngularMultiSelectModule=c.AngularMultiSelectModule}])});
 //# sourceMappingURL=index.umd.min.js.map

list-filter.d.ts

 import { PipeTransform } from '@angular/core';
-import { ListItem } from './multiselect.model';
 export declare class ListFilterPipe implements PipeTransform {
-    transform(items: ListItem[], filter: any): ListItem[];
+    transform(items: any[], filter: any): any[];
     applyFilter(item: any, filter: any): boolean;
 }

multiselect.component.d.ts

@@ -1,4 +0,3 @@
-import { OnInit, SimpleChanges, OnChanges, EventEmitter, ElementRef } from '@angular/core';
+import { OnInit, SimpleChanges, OnChanges, ChangeDetectorRef, AfterViewChecked, EventEmitter, ElementRef } from '@angular/core';
 import { ControlValueAccessor, Validator, FormControl } from '@angular/forms';
-import { ListItem } from './multiselect.model';
 import { DropdownSettings } from './multiselect.interface';
@@ -8,10 +7,11 @@ import { Item, Badge } from './menu-item';
 export declare const DROPDOWN_CONTROL_VALIDATION: any;
-export declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChanges, Validator {
+export declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChanges, Validator, AfterViewChecked {
     _elementRef: ElementRef;
-    data: Array<ListItem>;
+    private cdr;
+    data: Array<any>;
     settings: DropdownSettings;
-    onSelect: EventEmitter<ListItem>;
-    onDeSelect: EventEmitter<ListItem>;
-    onSelectAll: EventEmitter<Array<ListItem>>;
-    onDeSelectAll: EventEmitter<Array<ListItem>>;
+    onSelect: EventEmitter<any>;
+    onDeSelect: EventEmitter<any>;
+    onSelectAll: EventEmitter<Array<any>>;
+    onDeSelectAll: EventEmitter<Array<any>>;
     onOpen: EventEmitter<any>;
@@ -22,6 +22,7 @@ onClose: EventEmitter<any>;
     searchInput: ElementRef;
-    selectedItems: Array<ListItem>;
+    selectedListElem: ElementRef;
+    selectedItems: Array<any>;
     isActive: boolean;
     isSelectAll: boolean;
-    groupedData: Array<ListItem>;
+    groupedData: Array<any>;
     filter: any;
@@ -41,5 +42,6 @@ chunkArray: any[];
     lastRepaintY: any;
+    selectedListHeight: any;
     defaultSettings: DropdownSettings;
     parseError: boolean;
-    constructor(_elementRef: ElementRef);
+    constructor(_elementRef: ElementRef, cdr: ChangeDetectorRef);
     ngOnInit(): void;
@@ -49,3 +51,4 @@ ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
-    onItemClick(item: ListItem, index: number, evt: Event): boolean;
+    ngAfterViewChecked(): void;
+    onItemClick(item: any, index: number, evt: Event): boolean;
     validate(c: FormControl): any;
@@ -57,10 +60,10 @@ private onTouchedCallback;
     registerOnTouched(fn: any): void;
-    trackByFn(index: number, item: ListItem): Number;
-    isSelected(clickedItem: ListItem): boolean;
-    addSelected(item: ListItem): void;
-    removeSelected(clickedItem: ListItem): void;
+    trackByFn(index: number, item: any): any;
+    isSelected(clickedItem: any): boolean;
+    addSelected(item: any): void;
+    removeSelected(clickedItem: any): void;
     toggleDropdown(evt: any): boolean;
     closeDropdown(): void;
     toggleSelectAll(): void;
-    transformData(arr: Array<ListItem>, field: any): Array<ListItem>;
+    transformData(arr: Array<any>, field: any): Array<any>;
     renderChunk(fromPos: any, howMany: any): void;
@@ -67,0 +70,0 @@ onScroll(e: any): void;

multiselect.component.js

@@ -1,6 +0,6 @@
-import { Component, NgModule, ContentChild, ViewChild, forwardRef, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import { Component, NgModule, ChangeDetectorRef, ContentChild, ViewChild, forwardRef, Input, Output, EventEmitter, ElementRef } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MyException } from './multiselect.model';
-import { ClickOutsideDirective, ScrollDirective, styleDirective } from './clickOutside';
+import { ClickOutsideDirective, ScrollDirective, styleDirective, setPosition } from './clickOutside';
 import { ListFilterPipe } from './list-filter';
@@ -21,4 +21,5 @@ import { Item, Badge, TemplateRenderer } from './menu-item';
 var AngularMultiSelect = /** @class */ (function () {
-    function AngularMultiSelect(_elementRef) {
+    function AngularMultiSelect(_elementRef, cdr) {
         this._elementRef = _elementRef;
+        this.cdr = cdr;
         this.onSelect = new EventEmitter();
@@ -51,3 +52,5 @@ this.onDeSelect = new EventEmitter();
             lazyLoading: false,
-            labelKey: 'itemName'
+            labelKey: 'itemName',
+            primaryKey: 'id',
+            position: 'bottom'
         };
@@ -58,2 +61,3 @@ this.onTouchedCallback = noop;
     AngularMultiSelect.prototype.ngOnInit = function () {
+        var _this = this;
         this.settings = Object.assign(this.defaultSettings, this.settings);
@@ -71,2 +75,8 @@ if (this.settings.groupBy) {
         this.renderChunk(0, this.cachedItemsLen / 2);
+        if (this.settings.position == 'top') {
+            setTimeout(function () {
+                _this.selectedListHeight = { val: 0 };
+                _this.selectedListHeight.val = _this.selectedListElem.nativeElement.clientHeight;
+            });
+        }
     };
@@ -83,3 +93,3 @@ AngularMultiSelect.prototype.ngOnChanges = function (changes) {
         if (changes.settings && !changes.settings.firstChange) {
-            this.settings = Object.assign({}, this.defaultSettings, this.settings);
+            this.settings = Object.assign(this.defaultSettings, this.settings);
         }
@@ -99,2 +109,8 @@ };
     };
+    AngularMultiSelect.prototype.ngAfterViewChecked = function () {
+        if (this.selectedListElem.nativeElement.clientHeight && this.settings.position == 'top' && this.selectedListHeight) {
+            this.selectedListHeight.val = this.selectedListElem.nativeElement.clientHeight;
+            this.cdr.detectChanges();
+        }
+    };
     AngularMultiSelect.prototype.onItemClick = function (item, index, evt) {
@@ -173,8 +189,9 @@ if (this.settings.disabled) {
     AngularMultiSelect.prototype.trackByFn = function (index, item) {
-        return item.id;
+        return item[this.settings.primaryKey];
     };
     AngularMultiSelect.prototype.isSelected = function (clickedItem) {
+        var _this = this;
         var found = false;
         this.selectedItems && this.selectedItems.forEach(function (item) {
-            if (clickedItem.id === item.id) {
+            if (clickedItem[_this.settings.primaryKey] === item[_this.settings.primaryKey]) {
                 found = true;
@@ -199,3 +216,3 @@ }
         this.selectedItems && this.selectedItems.forEach(function (item) {
-            if (clickedItem.id === item.id) {
+            if (clickedItem[_this.settings.primaryKey] === item[_this.settings.primaryKey]) {
                 _this.selectedItems.splice(_this.selectedItems.indexOf(item), 1);
@@ -328,5 +345,5 @@ }
                     selector: 'angular2-multiselect',
-                    template: "\n      <div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\">\n          <div class=\"selected-list\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item[settings.labelKey]}}\n                      </span>\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;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=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                      </div>\n                  </div> \n                  <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up arrow-2\"></div>\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\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 && !settings.lazyLoading\">\n                  <span class=\"fa fa-search\"></span>\n                  <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n              </div> \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n                  <span class=\"fa fa-search\"></span>\n                  <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n              </div>\n          <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n              <span *ngIf=\"itemTempl\">\n                  <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n                  <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n              <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </div>\n              </span>\n          </ul>\n          <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n          <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n              <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n              <span *ngIf=\"itemTempl\" >\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl\" >\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);\">\n                          {{item[settings.labelKey]}}\n                      </span>\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=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                      </div>\n                  </div>\n                  <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>\n          </div>\n          <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]= \"{'dropdown-list-top': settings.position == 'top'}\" [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\"\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 && !settings.lazyLoading\">\n                      <span class=\"fa fa-search\"></span>\n                      <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n                  </div>\n                  <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n                      <span class=\"fa fa-search\"></span>\n                      <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n                  </div>\n                  <ul *ngIf=\"!settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" class=\"lazyContainer\">\n                      <span *ngIf=\"itemTempl\">\n                  <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n                      <span *ngIf=\"!itemTempl && !settings.lazyLoading\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </span>\n                      <span *ngIf=\"!itemTempl && settings.lazyLoading\">\n                  <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n              <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </div>\n              </span>\n                  </ul>\n                  <div *ngIf=\"settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n                      <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n                          <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n                          <span *ngIf=\"itemTempl\">\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n                          <span *ngIf=\"!itemTempl\">\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{position:absolute;right:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer;display:flex;position:relative}.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 ul li:hover{background:#f5f5f5}.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{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-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#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{border-color:#0079FE;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;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;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:before{background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.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}\n    "],
+                    styles: ["\n      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{position:absolute;right:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer;display:flex;position:relative}.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 ul li:hover{background:#f5f5f5}.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;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#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{border-color:#0079FE;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;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;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:before{background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.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}\n    "],
                     providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION]
@@ -338,2 +355,3 @@ },] },
         { type: ElementRef, },
+        { type: ChangeDetectorRef, },
     ]; };
@@ -352,2 +370,3 @@ AngularMultiSelect.propDecorators = {
         'searchInput': [{ type: ViewChild, args: ['searchInput',] },],
+        'selectedListElem': [{ type: ViewChild, args: ['selectedList',] },],
     };
@@ -363,4 +382,4 @@ return AngularMultiSelect;
                     imports: [CommonModule, FormsModule],
-                    declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge],
-                    exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge]
+                    declarations: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, setPosition],
+                    exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, setPosition]
                 },] },
@@ -367,0 +386,0 @@ ];

multiselect.component.metadata.json

@@ -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\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item[settings.labelKey]}}\n                      </span>\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;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=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                      </div>\n                  </div> \n                  <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up arrow-2\"></div>\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\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 && !settings.lazyLoading\">\n                  <span class=\"fa fa-search\"></span>\n                  <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n              </div> \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n                  <span class=\"fa fa-search\"></span>\n                  <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n              </div>\n          <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n              <span *ngIf=\"itemTempl\">\n                  <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n                  <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n              <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </div>\n              </span>\n          </ul>\n          <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n          <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n              <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n              <span *ngIf=\"itemTempl\" >\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl\" >\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{position:absolute;right:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer;display:flex;position:relative}.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 ul li:hover{background:#f5f5f5}.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{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-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#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{border-color:#0079FE;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;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;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:before{background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.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}\n    "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALIDATION"}]}]}],"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"}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__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"}],"transformData":[{"__symbolic":"method"}],"renderChunk":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateView":[{"__symbolic":"method"}],"filterInfiniteList":[{"__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"}],"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":"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\">\n              <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n                          {{item[settings.labelKey]}}\n                      </span>\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;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=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                      </div>\n                  </div> \n                  <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>      \n          </div>\n          <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n          <div class=\"arrow-up arrow-2\"></div>\n          <div class=\"arrow-up\"></div>\n          <div class=\"list-area\">\n              <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\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 && !settings.lazyLoading\">\n                  <span class=\"fa fa-search\"></span>\n                  <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n              </div> \n              <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n                  <span class=\"fa fa-search\"></span>\n                  <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n              </div>\n          <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n              <span *ngIf=\"itemTempl\">\n                  <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n                  <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n              <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </div>\n              </span>\n          </ul>\n          <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n          <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n              <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n              <span *ngIf=\"itemTempl\" >\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n              <span *ngIf=\"!itemTempl\" >\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{position:absolute;right:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer;display:flex;position:relative}.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 ul li:hover{background:#f5f5f5}.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{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-2{border-bottom:15px solid #ccc;top:-1px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0px;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#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{border-color:#0079FE;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;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;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:before{background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.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}\n    "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALIDATION"}]}]}],"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"}]}]}],"searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__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"}],"transformData":[{"__symbolic":"method"}],"renderChunk":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateView":[{"__symbolic":"method"}],"filterInfiniteList":[{"__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"}],"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":"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}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);\">\n                          {{item[settings.labelKey]}}\n                      </span>\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=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                      </div>\n                  </div>\n                  <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>\n          </div>\n          <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]= \"{'dropdown-list-top': settings.position == 'top'}\" [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\"\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 && !settings.lazyLoading\">\n                      <span class=\"fa fa-search\"></span>\n                      <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n                  </div>\n                  <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n                      <span class=\"fa fa-search\"></span>\n                      <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n                  </div>\n                  <ul *ngIf=\"!settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" class=\"lazyContainer\">\n                      <span *ngIf=\"itemTempl\">\n                  <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n                      <span *ngIf=\"!itemTempl && !settings.lazyLoading\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </span>\n                      <span *ngIf=\"!itemTempl && settings.lazyLoading\">\n                  <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n              <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </div>\n              </span>\n                  </ul>\n                  <div *ngIf=\"settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n                      <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n                          <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n                          <span *ngIf=\"itemTempl\">\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n                          <span *ngIf=\"!itemTempl\">\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{position:absolute;right:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer;display:flex;position:relative}.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 ul li:hover{background:#f5f5f5}.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;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#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{border-color:#0079FE;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;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;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:before{background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.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}\n    "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALIDATION"}]}]}],"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"}]}]}],"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"}]}],"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"}],"transformData":[{"__symbolic":"method"}],"renderChunk":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateView":[{"__symbolic":"method"}],"filterInfiniteList":[{"__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":"./clickOutside","name":"setPosition"}],"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":"./clickOutside","name":"setPosition"}]}]}]}}},{"__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}\">\n                  <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n                  <span *ngIf=\"settings.singleSelection\">\n                      <span *ngFor=\"let item of selectedItems;trackBy: trackByFn.bind(this);\">\n                          {{item[settings.labelKey]}}\n                      </span>\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=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n                      </div>\n                  </div>\n                  <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n                  <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n              </div>\n          </div>\n          <div [setPosition]=\"selectedListHeight?.val\" class=\"dropdown-list\" [ngClass]= \"{'dropdown-list-top': settings.position == 'top'}\" [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\"\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 && !settings.lazyLoading\">\n                      <span class=\"fa fa-search\"></span>\n                      <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n                  </div>\n                  <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n                      <span class=\"fa fa-search\"></span>\n                      <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n                  </div>\n                  <ul *ngIf=\"!settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" class=\"lazyContainer\">\n                      <span *ngIf=\"itemTempl\">\n                  <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n                      <span *ngIf=\"!itemTempl && !settings.lazyLoading\">\n              <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </span>\n                      <span *ngIf=\"!itemTempl && settings.lazyLoading\">\n                  <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n            \n              <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label>{{item[settings.labelKey]}}</label>\n              </li>\n              </div>\n              </span>\n                  </ul>\n                  <div *ngIf=\"settings.groupBy\" [style.maxHeight]=\"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n                      <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n                          <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n                          <span *ngIf=\"itemTempl\">\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n                  <label></label>\n                  <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n              </li>\n              </span>\n                          <span *ngIf=\"!itemTempl\">\n              <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n                  <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\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      .cuppa-dropdown{position:relative}.c-btn{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px;color:#333}.c-btn.disabled{background:#ccc}.c-btn:focus{outline:none}.selected-list .c-list{float:left;padding:0px;margin:0px;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:0px 5px;background:#0079FE;color:#fff;border-radius:2px;margin-right:4px;margin-top:2px;float:left}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .fa-remove{margin-left:1px;font-size:12px;z-index:100000000}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.selected-list .countplaceholder{position:absolute;right:30px;top:50%;transform:translateY(-50%)}.selected-list .c-btn{width:100%;box-shadow:0px 1px 5px #959595;padding:10px;cursor:pointer;display:flex;position:relative}.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 ul li:hover{background:#f5f5f5}.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;box-shadow:0px 1px 5px #959595}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative}.list-filter input{border:0px;width:100%;height:35px;padding:0px 0px 0px 35px}.list-filter input:focus{outline:none}.list-filter .fa{position:absolute;top:10px;left:13px;color:#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{border-color:#0079FE;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;color:#000;font-weight:300}.pure-checkbox input[type=\"checkbox\"]+label:before{box-sizing:content-box;content:'';color:#0079FE;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #0079FE;text-align:center;transition:all 0.4s ease}.pure-checkbox input[type=\"checkbox\"]+label:after{box-sizing:content-box;content:'';background-color:#0079FE;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:before{background:#0079FE}.pure-checkbox input[type=\"checkbox\"]:checked+label:after{transform:rotate(-45deg) scale(1)}.list-message{text-align:center}.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}\n    "],"providers":[{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"DROPDOWN_CONTROL_VALIDATION"}]}]}],"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"}]}]}],"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"}]}],"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"}],"transformData":[{"__symbolic":"method"}],"renderChunk":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateView":[{"__symbolic":"method"}],"filterInfiniteList":[{"__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":"./clickOutside","name":"setPosition"}],"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":"./clickOutside","name":"setPosition"}]}]}]}}}]

multiselect.interface.d.ts

@@ -20,2 +20,4 @@ export interface DropdownSettings {
     labelKey?: String;
+    primaryKey: string;
+    position: string;
 }

multiselect.model.d.ts

@@ -1,5 +0,1 @@
-export declare class ListItem {
-    id: Number;
-    itemName: String;
-}
 export declare class MyException {
@@ -6,0 +2,0 @@ status: number;

multiselect.model.js

@@ -1,7 +0,1 @@
-var ListItem = /** @class */ (function () {
-    function ListItem() {
-    }
-    return ListItem;
-}());
-export { ListItem };
 var MyException = /** @class */ (function () {
@@ -8,0 +2,0 @@ function MyException(status, body) {

multiselect.model.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ListItem":{"__symbolic":"class"},"MyException":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"any"}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"ListItem":{"__symbolic":"class"},"MyException":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"any"}]}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MyException":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"any"}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"MyException":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"any"}]}]}}}}]

package.json

 {
   "name": "angular2-multiselect-dropdown",
-  "version": "2.7.0",
+  "version": "2.8.0",
     "description": "Angular 2 and angular 4 multiselect dropdown component.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -223,4 +223,7 @@ # Angular2 Multiselect Dropdown
 | labelKey | String | The property name which should be rendered as label in the dropdown| itemName |
+| primaryKey | String | The property by which the object is identified. Default is 'id'.| id |
+| position | String | Set the position of the dropdown list to 'top' or 'bottom'| bottom |
 
 
+
 ### Callback Methods
@@ -227,0 +230,0 @@ - `onSelect` - Return the selected item on selection.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

645807

increased by5.93%

Lines of code

2901

increased by5.53%

Number of lines in readme file

251

increased by1.21%

No dependency changes