slick-components 5.0.7 → 5.0.9

package/fesm2015/slick-components.mjs

@@ -54,7 +54,7 @@ class SlickInitService {
         SlickInitService.getParams().errorLog = errorLog;
     }
 }
-SlickInitService.version = "5.0.7";
+SlickInitService.version = "5.0.9";
 /** @nocollapse */ SlickInitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SlickInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 /** @nocollapse */ SlickInitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SlickInitService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SlickInitService, decorators: [{
@@ -6914,10 +6914,8 @@ var SlickMultiSelectSearchTypes;
     SlickMultiSelectSearchTypes[SlickMultiSelectSearchTypes["any"] = 2] = "any";
 })(SlickMultiSelectSearchTypes || (SlickMultiSelectSearchTypes = {}));
 class SlickMultiSelectComponent {
-    constructor(ngZone, slickMultiSelectService, el) {
-        this.ngZone = ngZone;
+    constructor(slickMultiSelectService) {
         this.slickMultiSelectService = slickMultiSelectService;
-        this.el = el;
         this.placeholder = '';
         this.idFieldName = "id";
         this.textFieldName = "text";
@@ -6935,11 +6933,9 @@ class SlickMultiSelectComponent {
         // This is necessary so that the scroll and resize events can add and remove the event properly,
         // as well as getting the correct ES6 function
         this.fnDocumentClick = (e) => this.documentClick(e);
-        this.keyboardActive = false;
         this.expanded = false;
         this.filterText = '';
         this.isAndroid = ((SlickInitService.getPlatform() || '').toLowerCase() === 'android');
-        this.skipClickExpand = false;
         this.propagateChange = (_) => { };
         this.uuid = SlickUtilsService.newGuid();
     }
@@ -6968,9 +6964,6 @@ class SlickMultiSelectComponent {
     // not used, used for touch input
     registerOnTouched() { }
     ngOnChanges(changes) {
-        if (changes.isMobile) {
-            this.isMobile = (this.isMobile.toString().toLowerCase() === 'true') ? true : false;
-        }
         if (changes.singleSelect) {
             this.singleSelect = (this.singleSelect.toString().toLowerCase() === 'true') ? true : false;
         }
@@ -6985,7 +6978,7 @@ class SlickMultiSelectComponent {
         if (changes.items) {
             this.visibleItems = this.slickMultiSelectService.getVisibleItems(this.items, this.selectedIds, this.idFieldName, this.textFieldName);
             this.selectedItems = this.slickMultiSelectService.getSelectedItems(this.items, this.selectedIds, this.idFieldName, this.textFieldName);
-            if (this.selectedTextInputRef && document.activeElement == this.selectedTextInputRef.nativeElement)
+            if (this.filterTextInputRef && document.activeElement == this.filterTextInputRef.nativeElement)
                 this.expand();
         }
     }
@@ -6998,21 +6991,6 @@ class SlickMultiSelectComponent {
         }
         catch (_a) { }
     }
-    onKeyboardIconClicked() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.keyboardActive === true) {
-                this.collapse();
-                this.keyboardActive = false;
-                this.selectedText = '';
-                this.selectedTextInputRef.nativeElement.value = '';
-            }
-            else {
-                this.keyboardActive = true;
-                yield SlickSleepService.sleep();
-                this.selectedTextInputRef.nativeElement.focus();
-            }
-        });
-    }
     expand() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.disabled)
@@ -7024,6 +7002,8 @@ class SlickMultiSelectComponent {
             if (selectedItems && selectedItems.length > 0)
                 selectedItems[0].scrollIntoView({ block: 'nearest' });
             this.expanded = true;
+            yield SlickSleepService.sleep();
+            this.filterTextInputRef.nativeElement.focus();
             // This is necessary, otherwise `this` in the reposition function will be window
             // and not the component.
             // Since angular has no way to use the third parameter, I'm doing this in raw js
@@ -7068,9 +7048,8 @@ class SlickMultiSelectComponent {
             return;
         const clickedInside = SlickUtilsService.checkParentClassExists(e.target, "slick-multi-select_list-item");
         if (!clickedInside) {
-            this.keyboardActive = false;
             this.selectedText = '';
-            this.selectedTextInputRef.nativeElement.value = '';
+            this.filterTextInputRef.nativeElement.value = '';
             this.collapse();
         }
     }
@@ -7087,30 +7066,29 @@ class SlickMultiSelectComponent {
             this.selectedItems = this.slickMultiSelectService.getSelectedItems(this.items, this.selectedIds, this.idFieldName, this.textFieldName);
             this.reposition();
             this.selectedText = '';
-            this.selectedTextInputRef.nativeElement.value = '';
+            this.filterTextInputRef.nativeElement.value = '';
             if (this.singleSelect === true)
                 this.collapse();
         }
     }
-    setFocus(showMobileKeyboard = false) {
-        this.selectedTextInputRef.nativeElement.focus();
-        if (showMobileKeyboard === true)
-            this.keyboardActive = true;
+    setFocus() {
+        this.expand();
     }
     onFocus() {
         return __awaiter(this, void 0, void 0, function* () {
             this.visibleItems = this.slickMultiSelectService.getVisibleItems(this.items, this.selectedIds, this.idFieldName, this.textFieldName);
             this.selectedItems = this.slickMultiSelectService.getSelectedItems(this.items, this.selectedIds, this.idFieldName, this.textFieldName);
             this.filterText = '';
-            this.selectedTextInputRef.nativeElement.focus();
-            // This is kind of hacky, but if onFocus is called by clicking the multiSelect, the onMultiSelectClick event is called as well
-            // That function will expand or collapse, depending on the state.  Since this expands, it thinks it needs to collapse.
-            // So fake it out and tell it NOT to collapse.  BUT, if we came in from tabbing into the field, then it would mess up
-            // the click event.  So only wait for 1/2 second.
-            this.skipClickExpand = true;
             this.expand();
-            yield SlickSleepService.sleep(500);
-            this.skipClickExpand = false;
+        });
+    }
+    expandOnKeyUp(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (e.key.length == 1 || (e.key.length > 1 && /[^a-zA-Z0-9]/.test(e.key))) {
+                this.expand();
+                this.placeholderInputRef.nativeElement.value = '';
+                this.onKeyDown(e);
+            }
         });
     }
     onKeyDown(e) {
@@ -7126,12 +7104,12 @@ class SlickMultiSelectComponent {
                     return false;
                 }
             }
-            e.stopPropagation();
-            e.preventDefault();
+            //e.stopPropagation();
+            //e.preventDefault();
             // If this is android, it won't pass us any key data so just read the entire input element
             if (this.isAndroid === true) {
                 yield SlickSleepService.sleep();
-                this.filterText = this.selectedTextInputRef.nativeElement.value;
+                this.filterText = this.filterTextInputRef.nativeElement.value;
                 this.filterSearch();
                 return;
             }
@@ -7139,30 +7117,34 @@ class SlickMultiSelectComponent {
             if (e.key === 'Tab') {
                 if (this.filterText && this.visibleItems.length > 0) {
                     this.selectItem(this.visibleItems[0].id);
-                    this.filterText = '';
-                    this.selectedIndex = null;
-                    this.collapse();
-                    return false;
                 }
                 this.collapse();
                 this.filterText = '';
                 this.selectedText = '';
-                this.selectedTextInputRef.nativeElement.value = '';
+                this.filterTextInputRef.nativeElement.value = '';
                 this.selectedIndex = null;
-                return true;
+                const currentNode = (this.placeholderInputRef.nativeElement);
+                //find all tab-able elements
+                const allElements = document.querySelectorAll('input, button, a, area, object, select, textarea, [contenteditable]');
+                //Find the current tab index.
+                const currentIndex = Array.from(allElements).findIndex(el => currentNode.isEqualNode(el));
+                //focus the following element
+                const targetIndex = (currentIndex + 1) % allElements.length;
+                allElements[targetIndex].focus();
+                e.preventDefault();
+                return false;
             }
             if (e.key === 'Enter') {
                 if (this.filterText && this.selectedIndex !== null && this.selectedIndex !== undefined) {
                     this.selectItem(this.visibleItems[this.selectedIndex].id);
                     this.filterText = '';
                     this.selectedIndex = null;
-                    this.collapse();
                     return false;
                 }
                 this.collapse();
                 this.filterText = '';
                 this.selectedText = '';
-                this.selectedTextInputRef.nativeElement.value = '';
+                this.filterTextInputRef.nativeElement.value = '';
                 this.selectedIndex = null;
                 return true;
             }
@@ -7170,7 +7152,7 @@ class SlickMultiSelectComponent {
             if (e.key === 'Escape') {
                 this.filterText = '';
                 this.selectedText = '';
-                this.selectedTextInputRef.nativeElement.value = '';
+                this.filterTextInputRef.nativeElement.value = '';
                 this.collapse();
                 return false;
             }
@@ -7179,7 +7161,7 @@ class SlickMultiSelectComponent {
                 this.filterText = this.filterText.substring(0, this.filterText.length - 1);
                 if (this.filterText.length === 0) {
                     this.selectedText = '';
-                    this.selectedTextInputRef.nativeElement.value = '';
+                    this.filterTextInputRef.nativeElement.value = '';
                     this.selectedIndex = null;
                     this.visibleItems = this.slickMultiSelectService.getVisibleItems(this.items, this.selectedIds, this.idFieldName, this.textFieldName);
                     this.selectedItems = this.slickMultiSelectService.getSelectedItems(this.items, this.selectedIds, this.idFieldName, this.textFieldName);
@@ -7228,15 +7210,15 @@ class SlickMultiSelectComponent {
                     this.selectedText = this.visibleItems[0].text;
                     if (this.isAndroid === false) {
                         yield SlickSleepService.sleep();
-                        this.selectedTextInputRef.nativeElement.value = this.selectedText;
-                        this.selectedTextInputRef.nativeElement.setSelectionRange(this.filterText.length, this.selectedText.length);
+                        this.filterTextInputRef.nativeElement.value = this.selectedText;
+                        this.filterTextInputRef.nativeElement.setSelectionRange(this.filterText.length, this.selectedText.length);
                     }
                 }
                 else {
                     this.selectedIndex = null;
                     if (this.isAndroid === false) {
                         this.selectedText = this.filterText;
-                        this.selectedTextInputRef.nativeElement.value = this.selectedText;
+                        this.filterTextInputRef.nativeElement.value = this.selectedText;
                     }
                 }
             }
@@ -7250,8 +7232,8 @@ class SlickMultiSelectComponent {
                     this.selectedText = this.visibleItems[0].text;
                     if (this.isAndroid === false) {
                         yield SlickSleepService.sleep();
-                        this.selectedTextInputRef.nativeElement.value = this.selectedText;
-                        this.selectedTextInputRef.nativeElement.setSelectionRange(this.filterText.length, this.selectedText.length);
+                        this.filterTextInputRef.nativeElement.value = this.selectedText;
+                        this.filterTextInputRef.nativeElement.setSelectionRange(this.filterText.length, this.selectedText.length);
                     }
                 }
                 else {
@@ -7263,11 +7245,6 @@ class SlickMultiSelectComponent {
         });
     }
     onMultiSelectClicked() {
-        if (this.skipClickExpand === true) {
-            this.skipClickExpand = false;
-            return;
-        }
-        this.selectedTextInputRef.nativeElement.focus();
         if (this.expanded === false)
             this.expand();
         else
@@ -7275,8 +7252,7 @@ class SlickMultiSelectComponent {
     }
     onItemClick(item) {
         this.selectItem(item.id);
-        if (this.keyboardActive === true)
-            this.selectedTextInputRef.nativeElement.focus();
+        this.filterTextInputRef.nativeElement.focus();
     }
     onRemoveItem(item) {
         this.selectedIds = this.selectedIds.filter(id => id !== item.id);
@@ -7285,13 +7261,13 @@ class SlickMultiSelectComponent {
         this.propagateChange(this.selectedIds);
     }
 }
-/** @nocollapse */ SlickMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SlickMultiSelectComponent, deps: [{ token: i0.NgZone }, { token: SlickMultiSelectService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SlickMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SlickMultiSelectComponent, selector: "slick-multi-select", inputs: { placeholder: "placeholder", items: "items", idFieldName: "idFieldName", textFieldName: "textFieldName", disabled: "disabled", allowEmpty: "allowEmpty", singleSelect: "singleSelect", width: "width", listWidth: "listWidth", height: "height", showLoadingMessage: "showLoadingMessage", showDebug: "showDebug", tabindex: "tabindex", isMobile: "isMobile", searchType: "searchType" }, outputs: { onExpand: "onExpand", onCollapse: "onCollapse", onSelect: "onSelect" }, providers: [SlickMultiSelectService,
+/** @nocollapse */ SlickMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SlickMultiSelectComponent, deps: [{ token: SlickMultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ SlickMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SlickMultiSelectComponent, selector: "slick-multi-select", inputs: { placeholder: "placeholder", items: "items", idFieldName: "idFieldName", textFieldName: "textFieldName", disabled: "disabled", allowEmpty: "allowEmpty", singleSelect: "singleSelect", width: "width", listWidth: "listWidth", height: "height", showLoadingMessage: "showLoadingMessage", showDebug: "showDebug", tabindex: "tabindex", searchType: "searchType" }, outputs: { onExpand: "onExpand", onCollapse: "onCollapse", onSelect: "onSelect" }, providers: [SlickMultiSelectService,
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => SlickMultiSelectComponent)),
             multi: true,
-        }], viewQueries: [{ propertyName: "containerDiv", first: true, predicate: ["containerDiv"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "selectedTextInputRef", first: true, predicate: ["selectedTextInputRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #containerDiv id=\"slick-multi-select_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" class=\"slick-multi-select\" [class.mobile]=\"isMobile === true\" [class.open]=\"expanded\">\r\n\t<div class=\"slick-multi-select_input-container\">\r\n\t\t<div *ngIf=\"disabled === false\" style=\"cursor: pointer !important; flex-grow: 1;\" [ngClass]=\"{ 'slick-multi-select_mobile': isMobile === true }\" (click)=\"onMultiSelectClicked()\">\r\n\t\t\t<div *ngFor=\"let selectedItem of selectedItems\" class=\"slick-multi-select_selected-item card\"><div class=\"slick-multi-select_remove\" (click)=\"onRemoveItem(selectedItem)\"><i class=\"fas fa-times-circle bg-white text-danger\"></i></div>{{selectedItem.text}}</div>\r\n\t\t\t<input #selectedTextInputRef *ngIf=\"!isMobile\" [attr.tabindex]=\"tabindex\" [ngClass]=\"{'slick-multi-select_show-selected-text': (keyboardActive || (selectedText && selectedText.length > 0)) }\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" ng-disabled='disabled' readonly [placeholder]='placeholder' />\r\n\t\t\t<input #selectedTextInputRef *ngIf=\"isMobile === true\" [ngClass]=\"{'slick-multi-select_show-selected-text': (keyboardActive || (selectedText && selectedText.length > 0)) }\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" />\r\n\t\t</div>\r\n\t\t<div *ngIf=\"disabled === false && isMobile === true\" class=\"slick-multi-select_mobile-container\">\r\n\t\t\t<i class=\"far fa-keyboard\" style=\"cursor: pointer\" (click)=\"onKeyboardIconClicked()\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<div *ngIf=\"disabled === true\" class='input-group'>\r\n\t\t<div *ngFor=\"let selectedItem of selectedItems\" class=\"slick-multi-select_selected-item card\">{{selectedItem.text}}</div>\r\n\t</div>\r\n\r\n\t<ul #multiSelectList id=\"slick-multi-select-list_{{uuid}}\" class='slick-multi-select-list-group dropdown-menu' [style.width]=\"listGroupWidth\" [style.visibility]=\"(expanded === true) ? 'visible' : 'hidden'\" [style.opacity]=\"(expanded === true) ? '1' : '0'\" [style.max-height]=\"height\" [style.width.px]=\"listGroupWidth\" [style.left.px]=\"left\" [style.top.px]=\"top\">\r\n\t\t<li *ngFor=\"let item of visibleItems; let index = index;\" (mouseover)=\"selectedIndex = index\" (click)=\"onItemClick(item)\" class=\"dropdown-item slick-multi-select_list-item\">{{item.text}}</li>\r\n\t</ul>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        }], viewQueries: [{ propertyName: "containerDiv", first: true, predicate: ["containerDiv"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "placeholderInputRef", first: true, predicate: ["placeholderInputRef"], descendants: true }, { propertyName: "filterTextInputRef", first: true, predicate: ["filterTextInputRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #containerDiv id=\"slick-multi-select_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" class=\"slick-multi-select form-control\" [class.open]=\"expanded\">\r\n\t<div class=\"slick-multi-select_input-container\">\r\n\t\t<div *ngIf=\"disabled === false\" style=\"cursor: pointer !important; flex-grow: 1;\" (click)=\"onMultiSelectClicked()\">\r\n\t\t\t<div *ngFor=\"let selectedItem of selectedItems\" class=\"slick-multi-select_selected-item badge bg-primary\"><div class=\"slick-multi-select_remove\" (click)=\"onRemoveItem(selectedItem)\"><i class=\"fas fa-times-circle bg-white text-danger\"></i></div>{{selectedItem.text}}</div>\r\n\t\t\t<input #placeholderInputRef [attr.tabindex]=\"tabindex\" [placeholder]='placeholder' (keyup)=\"expandOnKeyUp($event)\" />\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<div *ngIf=\"disabled === true\" class='input-group'>\r\n\t\t<div *ngFor=\"let selectedItem of selectedItems\" class=\"slick-multi-select_selected-item badge bg-primary\">{{selectedItem.text}}</div>\r\n\t</div>\r\n\r\n\t<ul #multiSelectList id=\"slick-multi-select-list_{{uuid}}\" class='slick-multi-select-list-group dropdown-menu' [style.width]=\"listGroupWidth\" [style.visibility]=\"(expanded === true) ? 'visible' : 'hidden'\" [style.opacity]=\"(expanded === true) ? '1' : '0'\" [style.max-height]=\"height\" [style.width.px]=\"listGroupWidth\" [style.left.px]=\"left\" [style.top.px]=\"top\">\r\n\t\t<li class=\"px-3\">\r\n\t\t\t<input #filterTextInputRef type=\"text\" tabindex=\"-1\" class=\"slick-multi-select_list-item form-control bg-transparent text-body border-bottom\" (keydown)=\"onKeyDown($event)\" />\r\n\t\t</li>\r\n\t\t<li *ngFor=\"let item of visibleItems; let index = index;\" (mouseover)=\"selectedIndex = index\" (click)=\"onItemClick(item)\" class=\"dropdown-item slick-multi-select_list-item px-3\">{{item?.text}}</li>\r\n\t</ul>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SlickMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'slick-multi-select', providers: [SlickMultiSelectService,
@@ -7299,8 +7275,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((() => SlickMultiSelectComponent)),
                             multi: true,
-                        }], template: "<div #containerDiv id=\"slick-multi-select_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" class=\"slick-multi-select\" [class.mobile]=\"isMobile === true\" [class.open]=\"expanded\">\r\n\t<div class=\"slick-multi-select_input-container\">\r\n\t\t<div *ngIf=\"disabled === false\" style=\"cursor: pointer !important; flex-grow: 1;\" [ngClass]=\"{ 'slick-multi-select_mobile': isMobile === true }\" (click)=\"onMultiSelectClicked()\">\r\n\t\t\t<div *ngFor=\"let selectedItem of selectedItems\" class=\"slick-multi-select_selected-item card\"><div class=\"slick-multi-select_remove\" (click)=\"onRemoveItem(selectedItem)\"><i class=\"fas fa-times-circle bg-white text-danger\"></i></div>{{selectedItem.text}}</div>\r\n\t\t\t<input #selectedTextInputRef *ngIf=\"!isMobile\" [attr.tabindex]=\"tabindex\" [ngClass]=\"{'slick-multi-select_show-selected-text': (keyboardActive || (selectedText && selectedText.length > 0)) }\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" ng-disabled='disabled' readonly [placeholder]='placeholder' />\r\n\t\t\t<input #selectedTextInputRef *ngIf=\"isMobile === true\" [ngClass]=\"{'slick-multi-select_show-selected-text': (keyboardActive || (selectedText && selectedText.length > 0)) }\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" />\r\n\t\t</div>\r\n\t\t<div *ngIf=\"disabled === false && isMobile === true\" class=\"slick-multi-select_mobile-container\">\r\n\t\t\t<i class=\"far fa-keyboard\" style=\"cursor: pointer\" (click)=\"onKeyboardIconClicked()\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<div *ngIf=\"disabled === true\" class='input-group'>\r\n\t\t<div *ngFor=\"let selectedItem of selectedItems\" class=\"slick-multi-select_selected-item card\">{{selectedItem.text}}</div>\r\n\t</div>\r\n\r\n\t<ul #multiSelectList id=\"slick-multi-select-list_{{uuid}}\" class='slick-multi-select-list-group dropdown-menu' [style.width]=\"listGroupWidth\" [style.visibility]=\"(expanded === true) ? 'visible' : 'hidden'\" [style.opacity]=\"(expanded === true) ? '1' : '0'\" [style.max-height]=\"height\" [style.width.px]=\"listGroupWidth\" [style.left.px]=\"left\" [style.top.px]=\"top\">\r\n\t\t<li *ngFor=\"let item of visibleItems; let index = index;\" (mouseover)=\"selectedIndex = index\" (click)=\"onItemClick(item)\" class=\"dropdown-item slick-multi-select_list-item\">{{item.text}}</li>\r\n\t</ul>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: SlickMultiSelectService }, { type: i0.ElementRef }]; }, propDecorators: { placeholder: [{
+                        }], template: "<div #containerDiv id=\"slick-multi-select_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" class=\"slick-multi-select form-control\" [class.open]=\"expanded\">\r\n\t<div class=\"slick-multi-select_input-container\">\r\n\t\t<div *ngIf=\"disabled === false\" style=\"cursor: pointer !important; flex-grow: 1;\" (click)=\"onMultiSelectClicked()\">\r\n\t\t\t<div *ngFor=\"let selectedItem of selectedItems\" class=\"slick-multi-select_selected-item badge bg-primary\"><div class=\"slick-multi-select_remove\" (click)=\"onRemoveItem(selectedItem)\"><i class=\"fas fa-times-circle bg-white text-danger\"></i></div>{{selectedItem.text}}</div>\r\n\t\t\t<input #placeholderInputRef [attr.tabindex]=\"tabindex\" [placeholder]='placeholder' (keyup)=\"expandOnKeyUp($event)\" />\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<div *ngIf=\"disabled === true\" class='input-group'>\r\n\t\t<div *ngFor=\"let selectedItem of selectedItems\" class=\"slick-multi-select_selected-item badge bg-primary\">{{selectedItem.text}}</div>\r\n\t</div>\r\n\r\n\t<ul #multiSelectList id=\"slick-multi-select-list_{{uuid}}\" class='slick-multi-select-list-group dropdown-menu' [style.width]=\"listGroupWidth\" [style.visibility]=\"(expanded === true) ? 'visible' : 'hidden'\" [style.opacity]=\"(expanded === true) ? '1' : '0'\" [style.max-height]=\"height\" [style.width.px]=\"listGroupWidth\" [style.left.px]=\"left\" [style.top.px]=\"top\">\r\n\t\t<li class=\"px-3\">\r\n\t\t\t<input #filterTextInputRef type=\"text\" tabindex=\"-1\" class=\"slick-multi-select_list-item form-control bg-transparent text-body border-bottom\" (keydown)=\"onKeyDown($event)\" />\r\n\t\t</li>\r\n\t\t<li *ngFor=\"let item of visibleItems; let index = index;\" (mouseover)=\"selectedIndex = index\" (click)=\"onItemClick(item)\" class=\"dropdown-item slick-multi-select_list-item px-3\">{{item?.text}}</li>\r\n\t</ul>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: SlickMultiSelectService }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], items: [{
                 type: Input
@@ -7326,8 +7302,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], tabindex: [{
                 type: Input
-            }], isMobile: [{
-                type: Input
             }], searchType: [{
                 type: Input
             }], onExpand: [{
@@ -7342,9 +7316,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], multiSelectList: [{
                 type: ViewChild,
                 args: ["multiSelectList"]
-            }], selectedTextInputRef: [{
+            }], placeholderInputRef: [{
                 type: ViewChild,
-                args: ["selectedTextInputRef"]
+                args: ["placeholderInputRef"]
+            }], filterTextInputRef: [{
+                type: ViewChild,
+                args: ["filterTextInputRef"]
             }] } });
 
 class SlickMultiSelectModule {