slick-components 5.0.1 → 5.0.3

package/fesm2020/slick-components.mjs

@@ -53,7 +53,7 @@ class SlickInitService {
         SlickInitService.getParams().errorLog = errorLog;
     }
 }
-SlickInitService.version = "5.0.1";
+SlickInitService.version = "5.0.3";
 /** @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: [{
@@ -3349,7 +3349,7 @@ class SlickDropDownComponent {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => SlickDropDownComponent)),
             multi: true,
-        }], viewQueries: [{ propertyName: "containerDiv", first: true, predicate: ["containerDiv"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "selectedTextInputRef", first: true, predicate: ["selectedTextInputRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "HTML\r\n\r\n<div *ngIf=\"!compact\" #containerDiv class=\"slick-drop-down form-control d-flex flex-fill align-items-center position-relative\" [slick-validation-indicator]=\"validationIndicator\" [slickValidationType]=\"validationIndicatorType\" id=\"slick-drop-down_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" [class.open]=\"expanded\" (click)=\"onDropdownClicked($event)\">\r\n    <div *ngIf=\"icon\" class=\"slick-drop-down_icon p-0\" style=\"position: absolute;\"><i class=\"px-1\" [ngClass]=\"icon\"></i></div>\r\n    <input #selectedTextInputRef *ngIf=\"!disabled\" class='form-control ps-2 pe-4' [class.ps-4]=\"!!icon\" [(ngModel)]=\"selectedText\" [attr.tabindex]=\"tabindex\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onDropdownClicked($event)\" [readonly]=\"!isMobile\" [placeholder]='placeholder' />\r\n    <input #selectedTextInputRef *ngIf=\"disabled\" class='form-control ps-2 pe-4' [class.ps-4]=\"!!icon\" disabled=\"disabled\" [ngModel]=\"selectedText\" tabindex=\"-1\" [readonly]=\"true\" [placeholder]='placeholder' />\r\n    <div style=\"position: absolute; right: 0;\">\r\n        <i class=\"fas fa-caret-down me-2\" style=\"pointer-events: none\"></i>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"compact\" #containerDiv class=\"slick-drop-down slick-drop-down-compact form-control d-flex flex-fill align-items-center\" id=\"slick-drop-down_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" [class.open]=\"expanded\" (click)=\"onDropdownClicked($event)\">\r\n    <input #selectedTextInputRef *ngIf=\"!disabled\" class='form-control me-2' [(ngModel)]=\"selectedText\" [attr.tabindex]=\"tabindex\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onDropdownClicked($event)\" [readonly]=\"!isMobile\" [placeholder]='placeholder' />\r\n    <input #selectedTextInputRef *ngIf=\"disabled\" class='form-control me-2' [ngModel]=\"selectedText\" tabindex=\"-1\" [readonly]=\"true\" [placeholder]='placeholder' />\r\n    <div>\r\n        <i class=\"fas fa-caret-down me-2\" style=\"pointer-events: none\"></i>\r\n    </div>\r\n</div>\r\n\r\n\r\n<ul *ngIf=\"isVisible\" #dropdownList id=\"slick-drop-down_{{uuid}}\" class='slick-drop-down-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    <li *ngFor=\"let item of visibleItems; let index = index;\" (click)=\"onItemClick(item)\" [class.active]=\"item.id === selectedItem?.id\" [class.card-header]=\"selectedIndex === index\" class=\"dropdown-item\">{{item.text}}</li>\r\n</ul>\r\n", 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"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SlickValidationIndicatorDirective, selector: "[slick-validation-indicator]", inputs: ["slick-validation-indicator", "slickValidationType"] }] });
+        }], viewQueries: [{ propertyName: "containerDiv", first: true, predicate: ["containerDiv"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "selectedTextInputRef", first: true, predicate: ["selectedTextInputRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!compact\" #containerDiv class=\"slick-drop-down form-control d-flex flex-fill align-items-center position-relative\" [slick-validation-indicator]=\"validationIndicator\" [slickValidationType]=\"validationIndicatorType\" id=\"slick-drop-down_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" [class.open]=\"expanded\" (click)=\"onDropdownClicked($event)\">\r\n    <div *ngIf=\"icon\" class=\"slick-drop-down_icon p-0\" style=\"position: absolute;\"><i class=\"px-1\" [ngClass]=\"icon\"></i></div>\r\n    <input #selectedTextInputRef *ngIf=\"!disabled\" class='form-control ps-2 pe-4' [class.ps-4]=\"!!icon\" [(ngModel)]=\"selectedText\" [attr.tabindex]=\"tabindex\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onDropdownClicked($event)\" [readonly]=\"!isMobile\" [placeholder]='placeholder' />\r\n    <input #selectedTextInputRef *ngIf=\"disabled\" class='form-control ps-2 pe-4' [class.ps-4]=\"!!icon\" disabled=\"disabled\" [ngModel]=\"selectedText\" tabindex=\"-1\" [readonly]=\"true\" [placeholder]='placeholder' />\r\n    <div style=\"position: absolute; right: 0;\">\r\n        <i class=\"fas fa-caret-down me-2\" style=\"pointer-events: none\"></i>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"compact\" #containerDiv class=\"slick-drop-down slick-drop-down-compact form-control d-flex flex-fill align-items-center\" id=\"slick-drop-down_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" [class.open]=\"expanded\" (click)=\"onDropdownClicked($event)\">\r\n    <input #selectedTextInputRef *ngIf=\"!disabled\" class='form-control me-2' [(ngModel)]=\"selectedText\" [attr.tabindex]=\"tabindex\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onDropdownClicked($event)\" [readonly]=\"!isMobile\" [placeholder]='placeholder' />\r\n    <input #selectedTextInputRef *ngIf=\"disabled\" class='form-control me-2' [ngModel]=\"selectedText\" tabindex=\"-1\" [readonly]=\"true\" [placeholder]='placeholder' />\r\n    <div>\r\n        <i class=\"fas fa-caret-down me-2\" style=\"pointer-events: none\"></i>\r\n    </div>\r\n</div>\r\n\r\n\r\n<ul *ngIf=\"isVisible\" #dropdownList id=\"slick-drop-down_{{uuid}}\" class='slick-drop-down-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    <li *ngFor=\"let item of visibleItems; let index = index;\" (click)=\"onItemClick(item)\" [class.active]=\"item.id === selectedItem?.id\" [class.card-header]=\"selectedIndex === index\" class=\"dropdown-item\">{{item.text}}</li>\r\n</ul>\r\n", 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"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SlickValidationIndicatorDirective, selector: "[slick-validation-indicator]", inputs: ["slick-validation-indicator", "slickValidationType"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SlickDropDownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'slick-drop-down', providers: [SlickDropDownService, SlickLogService,
@@ -3357,7 +3357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((() => SlickDropDownComponent)),
                             multi: true,
-                        }], template: "HTML\r\n\r\n<div *ngIf=\"!compact\" #containerDiv class=\"slick-drop-down form-control d-flex flex-fill align-items-center position-relative\" [slick-validation-indicator]=\"validationIndicator\" [slickValidationType]=\"validationIndicatorType\" id=\"slick-drop-down_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" [class.open]=\"expanded\" (click)=\"onDropdownClicked($event)\">\r\n    <div *ngIf=\"icon\" class=\"slick-drop-down_icon p-0\" style=\"position: absolute;\"><i class=\"px-1\" [ngClass]=\"icon\"></i></div>\r\n    <input #selectedTextInputRef *ngIf=\"!disabled\" class='form-control ps-2 pe-4' [class.ps-4]=\"!!icon\" [(ngModel)]=\"selectedText\" [attr.tabindex]=\"tabindex\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onDropdownClicked($event)\" [readonly]=\"!isMobile\" [placeholder]='placeholder' />\r\n    <input #selectedTextInputRef *ngIf=\"disabled\" class='form-control ps-2 pe-4' [class.ps-4]=\"!!icon\" disabled=\"disabled\" [ngModel]=\"selectedText\" tabindex=\"-1\" [readonly]=\"true\" [placeholder]='placeholder' />\r\n    <div style=\"position: absolute; right: 0;\">\r\n        <i class=\"fas fa-caret-down me-2\" style=\"pointer-events: none\"></i>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"compact\" #containerDiv class=\"slick-drop-down slick-drop-down-compact form-control d-flex flex-fill align-items-center\" id=\"slick-drop-down_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" [class.open]=\"expanded\" (click)=\"onDropdownClicked($event)\">\r\n    <input #selectedTextInputRef *ngIf=\"!disabled\" class='form-control me-2' [(ngModel)]=\"selectedText\" [attr.tabindex]=\"tabindex\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onDropdownClicked($event)\" [readonly]=\"!isMobile\" [placeholder]='placeholder' />\r\n    <input #selectedTextInputRef *ngIf=\"disabled\" class='form-control me-2' [ngModel]=\"selectedText\" tabindex=\"-1\" [readonly]=\"true\" [placeholder]='placeholder' />\r\n    <div>\r\n        <i class=\"fas fa-caret-down me-2\" style=\"pointer-events: none\"></i>\r\n    </div>\r\n</div>\r\n\r\n\r\n<ul *ngIf=\"isVisible\" #dropdownList id=\"slick-drop-down_{{uuid}}\" class='slick-drop-down-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    <li *ngFor=\"let item of visibleItems; let index = index;\" (click)=\"onItemClick(item)\" [class.active]=\"item.id === selectedItem?.id\" [class.card-header]=\"selectedIndex === index\" class=\"dropdown-item\">{{item.text}}</li>\r\n</ul>\r\n" }]
+                        }], template: "<div *ngIf=\"!compact\" #containerDiv class=\"slick-drop-down form-control d-flex flex-fill align-items-center position-relative\" [slick-validation-indicator]=\"validationIndicator\" [slickValidationType]=\"validationIndicatorType\" id=\"slick-drop-down_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" [class.open]=\"expanded\" (click)=\"onDropdownClicked($event)\">\r\n    <div *ngIf=\"icon\" class=\"slick-drop-down_icon p-0\" style=\"position: absolute;\"><i class=\"px-1\" [ngClass]=\"icon\"></i></div>\r\n    <input #selectedTextInputRef *ngIf=\"!disabled\" class='form-control ps-2 pe-4' [class.ps-4]=\"!!icon\" [(ngModel)]=\"selectedText\" [attr.tabindex]=\"tabindex\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onDropdownClicked($event)\" [readonly]=\"!isMobile\" [placeholder]='placeholder' />\r\n    <input #selectedTextInputRef *ngIf=\"disabled\" class='form-control ps-2 pe-4' [class.ps-4]=\"!!icon\" disabled=\"disabled\" [ngModel]=\"selectedText\" tabindex=\"-1\" [readonly]=\"true\" [placeholder]='placeholder' />\r\n    <div style=\"position: absolute; right: 0;\">\r\n        <i class=\"fas fa-caret-down me-2\" style=\"pointer-events: none\"></i>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"compact\" #containerDiv class=\"slick-drop-down slick-drop-down-compact form-control d-flex flex-fill align-items-center\" id=\"slick-drop-down_{{uuid}}\" attr.data-uuid=\"{{uuid}}\" [class.open]=\"expanded\" (click)=\"onDropdownClicked($event)\">\r\n    <input #selectedTextInputRef *ngIf=\"!disabled\" class='form-control me-2' [(ngModel)]=\"selectedText\" [attr.tabindex]=\"tabindex\" (keyup)=\"onKeyUp($event)\" (keydown)=\"onKeyDown($event)\" (focus)=\"onDropdownClicked($event)\" [readonly]=\"!isMobile\" [placeholder]='placeholder' />\r\n    <input #selectedTextInputRef *ngIf=\"disabled\" class='form-control me-2' [ngModel]=\"selectedText\" tabindex=\"-1\" [readonly]=\"true\" [placeholder]='placeholder' />\r\n    <div>\r\n        <i class=\"fas fa-caret-down me-2\" style=\"pointer-events: none\"></i>\r\n    </div>\r\n</div>\r\n\r\n\r\n<ul *ngIf=\"isVisible\" #dropdownList id=\"slick-drop-down_{{uuid}}\" class='slick-drop-down-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    <li *ngFor=\"let item of visibleItems; let index = index;\" (click)=\"onItemClick(item)\" [class.active]=\"item.id === selectedItem?.id\" [class.card-header]=\"selectedIndex === index\" class=\"dropdown-item\">{{item.text}}</li>\r\n</ul>\r\n" }]
         }], ctorParameters: function () { return [{ type: SlickDropDownService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], items: [{
@@ -6927,9 +6927,22 @@ class SlickMultiSelectComponent {
         await SlickSleepService.sleep(500);
         this.skipClickExpand = false;
     }
-    async onKeyUp(e) {
+    async onKeyDown(e) {
+        console.log(e, e.key);
+        if (e.key !== 'Tab' &&
+            e.key !== 'Enter' &&
+            e.key !== 'Escape' &&
+            e.key !== 'Backspace' &&
+            e.key !== 'ArrowUp' &&
+            e.key !== 'ArrowDown') {
+            // If F1 is pressed, key length will be 2
+            if (e.key.length > 1 || e.ctrlKey || e.altKey) {
+                return false;
+            }
+        }
         e.stopPropagation();
         e.preventDefault();
+        console.log(this.isAndroid);
         // If this is android, it won't pass us any key data so just read the entire input element
         if (this.isAndroid === true) {
             await SlickSleepService.sleep();
@@ -6938,11 +6951,12 @@ class SlickMultiSelectComponent {
             return;
         }
         // Tab/enter
-        if (e.which === 9 || e.which === 13) {
+        if (e.key === 'Tab' || 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();
@@ -6953,7 +6967,7 @@ class SlickMultiSelectComponent {
             return true;
         }
         // Esc
-        if (e.which === 27) {
+        if (e.key === 'Escape') {
             this.filterText = '';
             this.selectedText = '';
             this.selectedTextInputRef.nativeElement.value = '';
@@ -6961,7 +6975,7 @@ class SlickMultiSelectComponent {
             return false;
         }
         // Backspace
-        if (e.which === 8 && this.filterText) {
+        if (e.key === 'Backspace' && this.filterText) {
             this.filterText = this.filterText.substring(0, this.filterText.length - 1);
             if (this.filterText.length === 0) {
                 this.selectedText = '';
@@ -6975,7 +6989,7 @@ class SlickMultiSelectComponent {
             return false;
         }
         // Arrowup
-        if (e.which === 38) {
+        if (e.key === 'ArrowUp') {
             if (this.selectedIndex === null || this.selectedIndex === undefined)
                 this.selectedIndex = 0;
             if (this.selectedIndex > 0)
@@ -6983,7 +6997,7 @@ class SlickMultiSelectComponent {
             return false;
         }
         // Arrowdown
-        if (e.which === 40) {
+        if (e.key === 'ArrowDown') {
             if (this.selectedIndex === null || this.selectedIndex === undefined)
                 this.selectedIndex = -1;
             if (!this.expanded || !this.visibleItems)
@@ -6995,7 +7009,7 @@ class SlickMultiSelectComponent {
         // If F1 is pressed, key length will be 2
         if (e.key.length > 1 || e.ctrlKey || e.altKey)
             return false;
-        if (e.which >= 32 && e.which <= 126) {
+        if (e.key >= ' ' && e.key <= '~') {
             this.filterText += e.key;
             this.filterSearch();
         }
@@ -7071,7 +7085,7 @@ class SlickMultiSelectComponent {
             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)) }\" (keyup)=\"onKeyUp($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)) }\" (keyup)=\"onKeyUp($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.card-header]=\"selectedIndex === index\" 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: "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.card-header]=\"selectedIndex === index\" 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SlickMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'slick-multi-select', providers: [SlickMultiSelectService,
@@ -7079,7 +7093,7 @@ 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)) }\" (keyup)=\"onKeyUp($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)) }\" (keyup)=\"onKeyUp($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.card-header]=\"selectedIndex === index\" class=\"dropdown-item slick-multi-select_list-item\">{{item.text}}</li>\r\n\t</ul>\r\n</div>" }]
+                        }], 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.card-header]=\"selectedIndex === index\" 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: [{
                 type: Input
             }], items: [{