@coreui/angular-pro 4.0.0-alpha.5 → 4.0.0-alpha.6

package/fesm2020/coreui-angular-pro.mjs

@@ -4349,27 +4349,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 args: ['class']
             }] } });
 
-class MultiSelectOptgroupComponent {
-    get hostClasses() {
-        return {
-            'form-multi-select-options': true
-        };
-    }
-}
-MultiSelectOptgroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectOptgroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: { label: "label", disabled: "disabled" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block}\n"], components: [{ type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c-multi-select-optgroup', template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 class MultiSelectService {
     constructor() {
         this.multiSelectState = new BehaviorSubject({});
@@ -4391,17 +4370,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class MultiSelectOptionComponent {
-    constructor(elementRef, renderer, focusMonitor, multiSelectService) {
+    constructor(elementRef, renderer, changeDetectorRef, focusMonitor, multiSelectService) {
         this.elementRef = elementRef;
         this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
         this.focusMonitor = focusMonitor;
         this.multiSelectService = multiSelectService;
-        this._disabled = false;
-        this._selected = false;
         this.optionsStyle = 'checkbox';
         this.visible = true;
         this.selectedChange = new EventEmitter();
         this.hasContent = true;
+        this.dropdownVisible = false;
+        this._disabled = false;
+        this._selected = false;
     }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
@@ -4415,9 +4396,6 @@ class MultiSelectOptionComponent {
             this._selected = newValue;
             this.selectedChange.emit(newValue);
             this.multiSelectService.toggleOption(this);
-            if (newValue) {
-                this.focus();
-            }
         }
     }
     get selected() {
@@ -4441,14 +4419,16 @@ class MultiSelectOptionComponent {
     get ariaSelected() {
         return this.selected;
     }
-    onKeyUp($event) {
-        if ($event.key === 'Enter' || $event.code === 'Space') {
+    onKeyDown($event) {
+        if (['Enter', ' '].includes($event.key)) {
             $event.preventDefault();
             this.selected = this.disabled ? this.selected : !this.selected;
+            this.focus('keyboard');
         }
     }
     onClick() {
         this.selected = this.disabled ? this.selected : !this.selected;
+        this.focus('mouse');
     }
     ngAfterContentInit() {
         setTimeout(() => {
@@ -4461,27 +4441,30 @@ class MultiSelectOptionComponent {
             this.value = this.elementRef.nativeElement.innerText || this.label;
         }
     }
-    setActiveStyles() {
-    }
-    setInactiveStyles() {
-    }
     getLabel() {
         return (this.label ?? this.value);
     }
     focus(origin) {
-        this.focusMonitor.focusVia(this.elementRef, 'program');
+        if (this.dropdownVisible) {
+            this.focusMonitor.focusVia(this.elementRef, origin ?? 'program', { preventScroll: false });
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.multiselectVisibleSubscription.unsubscribe();
+    }
+    ngOnInit() {
+        this.multiselectVisibleSubscription = this.multiSelectService.multiSelectVisible$.subscribe(visible => {
+            this.dropdownVisible = visible;
+        });
     }
 }
-MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { disabled: "disabled", selected: "selected", optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.form-multi-select-option.disabled,:host.form-multi-select-option:disabled{pointer-events:all;cursor:default}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$1.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible", disabled: "disabled", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-option', template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.form-multi-select-option.disabled,:host.form-multi-select-option:disabled{pointer-events:all;cursor:default}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], optionsStyle: [{
+            args: [{ selector: 'c-multi-select-option', template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$1.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { optionsStyle: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -4494,6 +4477,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }], content: [{
                 type: ViewChild,
                 args: ['contentDiv']
+            }], disabled: [{
+                type: Input
+            }], selected: [{
+                type: Input
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -4509,7 +4496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }], ariaSelected: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
-            }], onKeyUp: [{
+            }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], onClick: [{
@@ -4517,6 +4504,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
+class MultiSelectOptgroupComponent {
+    constructor() {
+        this._disabled = false;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    get hostClasses() {
+        return {
+            'form-multi-select-options': true
+        };
+    }
+    ngAfterContentInit() {
+        this.updateMultiSelectOptions();
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.updateMultiSelectOptions();
+        }
+    }
+    updateMultiSelectOptions() {
+        this.multiSelectOptions?.forEach((option) => {
+            option.disabled = this.disabled;
+        });
+    }
+}
+MultiSelectOptgroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectOptgroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: { label: "label", disabled: "disabled" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block}\n"], components: [{ type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-multi-select-optgroup', template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiSelectOptions: [{
+                type: ContentChildren,
+                args: [MultiSelectOptionComponent, { descendants: true }]
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class MultiSelectTagComponent {
     constructor(multiSelectService) {
         this.multiSelectService = multiSelectService;
@@ -4576,10 +4609,10 @@ class MultiSelectNativeSelectComponent {
     }
 }
 MultiSelectNativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectNativeSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectNativeSelectComponent, selector: "c-multi-select-native-select", inputs: { form: "form", id: "id", multiple: "multiple", name: "name", options: "options", disabled: "disabled" }, ngImport: i0, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\" [disabled]=\"disabled\">\r\n  <option\r\n    *ngFor=\"let option of options\"\r\n    [label]=\"option.label\"\r\n    [selected]=\"option.selected\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"disabled\"\r\n    tabindex=\"-1\"\r\n  ></option>\r\n</select>\r\n\r\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MultiSelectNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectNativeSelectComponent, selector: "c-multi-select-native-select", inputs: { form: "form", id: "id", multiple: "multiple", name: "name", options: "options", disabled: "disabled" }, ngImport: i0, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\" [disabled]=\"disabled\">\n  <option\n    *ngFor=\"let option of options\"\n    [label]=\"option.label\"\n    [attr.selected]=\"option.selected ? '' : null\"\n    [value]=\"option.value\"\n    [disabled]=\"disabled\"\n    tabindex=\"-1\"\n  ></option>\n</select>\n\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectNativeSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-native-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\" [disabled]=\"disabled\">\r\n  <option\r\n    *ngFor=\"let option of options\"\r\n    [label]=\"option.label\"\r\n    [selected]=\"option.selected\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"disabled\"\r\n    tabindex=\"-1\"\r\n  ></option>\r\n</select>\r\n\r\n", styles: [":host{display:none}\n"] }]
+            args: [{ selector: 'c-multi-select-native-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\" [disabled]=\"disabled\">\n  <option\n    *ngFor=\"let option of options\"\n    [label]=\"option.label\"\n    [attr.selected]=\"option.selected ? '' : null\"\n    [value]=\"option.value\"\n    [disabled]=\"disabled\"\n    tabindex=\"-1\"\n  ></option>\n</select>\n\n", styles: [":host{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
                 type: Input
             }], id: [{
@@ -4594,20 +4627,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }] } });
 
-// const flattenArray = (options: IOption[]): IOption[] => {
-//   return options.reduce((acc: IOption[], val: IOption) => {
-//     return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
-//   }, []);
-// };
-//
-// const getSelectedOptions = (options: IOption[]) => {
-//   return flattenArray(options).filter((option: IOption) => {
-//     if (option.selected) {
-//       return option;
-//     }
-//     return;
-//   });
-// };
 class MultiSelectComponent {
     constructor(elementRef, renderer, ngZone, changeDetectorRef, viewContainerRef, focusMonitor, multiSelectService
     // private listenersService: ListenersService
@@ -4635,6 +4654,7 @@ class MultiSelectComponent {
         this.selectAllLabel = 'Select all options';
         this.selectionType = 'tags';
         this.selectionTypeCounterText = 'item(s) selected';
+        this.selectionTypeCounterTextPluralMap = { '=1': 'item selected', 'other': 'items selected' };
         this._value = [''];
         this.valueChange = new EventEmitter();
         this._visible = false;
@@ -4643,14 +4663,12 @@ class MultiSelectComponent {
         this._selectedOptions = [];
         this._tabIndex = '-1';
         this.visibleOptions = 0;
-        this._inputValue = '';
+        this._searchValue = '';
         this._subtreeFocused = this.focusOrigin(null);
     }
     writeValue(value) {
-        // console.log('writeValue', value)
         if (value !== null) {
             this.value = value;
-            // this.onChange(this.value);
         }
     }
     registerOnChange(fn) {
@@ -4676,7 +4694,6 @@ class MultiSelectComponent {
     set value(value) {
         const newValue = Array.isArray(value) ? [...value] : [value ?? ''];
         if (this._value.toString() !== newValue.toString()) {
-            // console.log('set value', value)
             this._value = newValue;
             this.onChange(newValue);
             this.updateNativeSelect();
@@ -4691,11 +4708,19 @@ class MultiSelectComponent {
         if (newValue !== this._visible) {
             this._visible = newValue;
             this.multiSelectService.toggleVisible(newValue);
+            if (newValue) {
+                this.listKeyManager.setFirstItemActive();
+            }
         }
     }
     get visible() {
         return this._visible;
     }
+    set selectedOptions(value) {
+        this._selectedOptions = value;
+        this.value = this.selectedOptions.map(item => item.value);
+        this.inputElementSize();
+    }
     get selectedOptions() {
         return this._selectedOptions;
     }
@@ -4705,6 +4730,10 @@ class MultiSelectComponent {
     get counterText() {
         return `${this.selectedOptions.length} ${this.selectionTypeCounterText}`;
     }
+    get counterTextType() {
+        return typeof this.selectionTypeCounterTextPluralMap ?? typeof this.selectionTypeCounterText;
+    }
+    ;
     get hostClasses() {
         return {
             'form-multi-select': true,
@@ -4718,52 +4747,53 @@ class MultiSelectComponent {
     }
     set tabIndex(value) {
         setTimeout(() => {
-            this._tabIndex = this._disabled || this.search ? '-1' : value === null ? null : '0';
+            this._tabIndex = this.disabled || this.search ? '-1' : value === null ? null : '0';
         });
     }
     onKeyUp($event) {
-        // console.log('keyup', $event.key);
-        if (!this.disabled) {
-            if ($event.key === 'Escape') {
-                this.visible = false;
-                this.inputValue = '';
+        if (this.disabled)
+            return;
+        if ($event.key === 'Escape') {
+            this.visible = false;
+            this.searchValue = '';
+            this.setFocus();
+            return;
+        }
+        if (['Enter', ' ', 'ArrowDown'].includes($event.key) && [this.inputElement?.nativeElement ?? this.elementRef.nativeElement].includes($event.target)) {
+            this.visible = true;
+            if (!this.search) {
                 this.setFocus();
-                // this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'keyboard');
-            }
-            else if ($event.key === 'Enter') {
-                // } else {
-                this.visible = true;
-                if (!this.search) {
-                    this.setFocus();
-                }
             }
+            return;
         }
-    }
-    manage($event) {
-        // console.log('keydown', $event.key);
-        if (!this.disabled) {
-            if ($event.key === 'Enter' && $event.target === this.inputElement.nativeElement) {
-                $event.preventDefault();
+        if ($event.key === 'Tab' && $event.target === this.elementRef.nativeElement) {
+            this.visible = true;
+            if (!this.search) {
+                this.setFocus();
             }
-            this.listKeyManager.onKeydown($event);
+            return;
         }
     }
+    onKeyDown($event) {
+        if (this.disabled)
+            return;
+        this.listKeyManager.onKeydown($event);
+    }
     onClick($event) {
-        if (!this.disabled) {
-            if (!this.visible) {
-                this.visible = !this.visible;
-            }
-            this.setFocus();
+        if (this.disabled)
+            return;
+        if (!this.visible) {
+            this.visible = true;
         }
     }
-    set inputValue(value) {
-        // console.log('inputValue', value);
-        this._inputValue = value;
-        // this.visible = !!value ?? this.visible;
-        this.filterOptions(value);
+    set searchValue(value) {
+        this._searchValue = value.trim();
+        this.visible = !!this.searchValue.length || this.visible;
+        this.filterOptions(this.searchValue);
+        this.inputElementSize();
     }
-    get inputValue() {
-        return this._inputValue;
+    get searchValue() {
+        return this._searchValue;
     }
     get subtreeFocused() {
         return this._subtreeFocused;
@@ -4774,7 +4804,7 @@ class MultiSelectComponent {
     }
     focusOrigin(origin) {
         const focused = !!origin;
-        this.inputValue = focused ? this.inputValue : '';
+        this.searchValue = focused ? this.searchValue : '';
         return focused;
     }
     ngOnInit() {
@@ -4792,13 +4822,11 @@ class MultiSelectComponent {
             option.optionsStyle = this.optionsStyle;
             option.selected = option.value !== undefined ? this.value.includes(option.value) || option.selected : option.selected;
         });
-        this._selectedOptions = this.multiSelectOptions.filter((option) => !!option.selected);
-        setTimeout(() => {
-            this.value = this._selectedOptions.map(item => item.value);
-        });
-        // this.value = this._selectedOptions.map(item => item.value);
-        this.listKeyManager = new FocusKeyManager(this.multiSelectOptions).withHomeAndEnd();
-        this.listKeyManager.skipPredicate(item => !item.visible);
+        this.selectedOptionsUpdate();
+        this.inputElementSize();
+        this.listKeyManager = new FocusKeyManager(this.multiSelectOptions).withHomeAndEnd().withTypeAhead();
+        this.listKeyManager.skipPredicate(item => (!item.visible || item.disabled));
+        this.listKeyManager.setFirstItemActive();
         this.multiselectSubscribe();
         this.createNativeSelect();
     }
@@ -4810,11 +4838,8 @@ class MultiSelectComponent {
                 this.changeDetectorRef.markForCheck();
             }
         }));
+        this.inputElementSize();
     }
-    // handleInputClick($event: MouseEvent) {
-    //   console.log('handleInputClick', $event);
-    //   // this.visible = !this.visible;
-    // }
     multiselectSubscribe(subscribe = true) {
         if (subscribe) {
             this.multiselectVisibleSubscription = this.multiSelectService.multiSelectVisible$.subscribe((visible) => {
@@ -4823,17 +4848,14 @@ class MultiSelectComponent {
             });
             this.multiselectStateSubscription = this.multiSelectService.multiSelectState$.subscribe((option) => {
                 if (option.selected === true && !this.multiple) {
-                    const selectedOptions = this.multiSelectOptions
-                        .toArray()
-                        .filter((item) => item.selected);
+                    const selectedOptions = this.multiSelectOptions.toArray().filter((item) => item.selected);
                     selectedOptions.reverse().forEach((item) => {
                         if (item !== option) {
                             item.selected = false;
                         }
                     });
                 }
-                this._selectedOptions = this.multiSelectOptions.filter((option) => !!option.selected);
-                this.value = this._selectedOptions.map(item => item.value);
+                this.selectedOptionsUpdate();
             });
         }
         else {
@@ -4843,7 +4865,7 @@ class MultiSelectComponent {
         }
     }
     clearAllOptions($event) {
-        this._selectedOptions.forEach((option) => {
+        this.selectedOptions.forEach((option) => {
             if (!option._disabled)
                 option.selected = false;
         });
@@ -4885,26 +4907,30 @@ class MultiSelectComponent {
     //   };
     //   this.listenersService.setListeners(configForHost);
     // }
-    clearListeners() {
-        // this.listenersService.clearListeners();
-    }
+    // private clearListeners() {
+    //   this.listenersService.clearListeners();
+    // }
     handleTagRemove($event) {
         this.setFocus();
     }
     setFocus() {
-        const firstSelectedOption = this.selectedOptions.find((item) => item.selected) ??
-            this.multiSelectOptions.find((item, index) => index === 0);
-        if (firstSelectedOption && this.isDropdownVisible) {
-            this.listKeyManager.setActiveItem(firstSelectedOption);
-            this.changeDetectorRef.markForCheck();
-            if (!this.search) {
-                return;
-            }
-        }
-        if (!this.disabled) {
-            this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'program');
-        }
-    }
+        if (this.disabled)
+            return;
+        this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'program');
+    }
+    // setFirstSelectedOptionActive() {
+    //   const firstSelectedOption = this.selectedOptions.find((item) => item.selected) ??
+    //     this.multiSelectOptions.find((item, index) => index === 0);
+    //   if (firstSelectedOption && this.isDropdownVisible) {
+    //     // this.listKeyManager.setFocusOrigin('keyboard');
+    //     this.listKeyManager.setActiveItem(firstSelectedOption);
+    //     this.changeDetectorRef.markForCheck();
+    //   } else {
+    //     // this.listKeyManager.setFocusOrigin('keyboard');
+    //     this.listKeyManager.setFirstItemActive();
+    //     this.changeDetectorRef.markForCheck();
+    //   }
+    // }
     filterOptions(value) {
         const searchString = value.toLowerCase() ?? '';
         this.multiSelectOptions?.forEach((item, index) => {
@@ -4919,8 +4945,7 @@ class MultiSelectComponent {
     }
     createNativeSelect() {
         this.viewContainerRef.clear();
-        const nativeSelectRef = this.viewContainerRef.createComponent(MultiSelectNativeSelectComponent);
-        this.nativeSelectRef = nativeSelectRef;
+        this.nativeSelectRef = this.viewContainerRef.createComponent(MultiSelectNativeSelectComponent);
         this.updateNativeSelect();
     }
     updateNativeSelect() {
@@ -4930,17 +4955,46 @@ class MultiSelectComponent {
             const { selected, value, label } = item;
             return { selected, value, label };
         });
-        // const nativeSelectRef = this.nativeSelectRef;
         this.nativeSelectRef.instance.multiple = this.multiple;
         this.nativeSelectRef.instance.name = this.nativeName;
         this.nativeSelectRef.instance.form = this.nativeId;
-        this.nativeSelectRef.instance.options = options;
+        this.nativeSelectRef.instance.options = [...options];
         this.nativeSelectRef.instance.disabled = this.disabled;
         this.nativeSelectRef.instance.changeDetectorRef.detectChanges();
     }
+    inputElementSize() {
+        if (this.inputElement) {
+            if (this.selectedOptions.length > 0 || this.selectionType === 'counter') {
+                this.renderer.setAttribute(this.inputElement.nativeElement, 'size', (this.searchValue.length + 2).toString());
+            }
+            else {
+                this.renderer.removeAttribute(this.inputElement.nativeElement, 'size');
+            }
+        }
+    }
+    handleSearchKeyDown($event) {
+        if (this.searchValue.length || this.selectedOptions.length === 0)
+            return;
+        if (['Backspace', 'Delete'].includes($event.key)) {
+            $event.stopPropagation();
+            const last = this.selectedOptions.filter(option => !option.disabled).pop();
+            this.selectOption(last, false);
+        }
+    }
+    selectOption(option, selected) {
+        this.multiSelectOptions.forEach(item => {
+            if (item === option) {
+                option.selected = selected;
+            }
+        });
+        this.selectedOptionsUpdate();
+    }
+    selectedOptionsUpdate() {
+        this.selectedOptions = this.multiSelectOptions.filter((option) => !!option.selected);
+    }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$1.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", value: "value", visible: "visible" }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "manage($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex" } }, providers: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", value: "value", visible: "visible" }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex" } }, providers: [
         MultiSelectService,
         // ListenersService,
         {
@@ -4948,7 +5002,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => MultiSelectComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], exportAs: ["cMultiSelect"], ngImport: i0, template: "<div class=\"form-multi-select-selection\">\r\n  <ng-template [ngIf]=\"selectionType==='tags'\">\r\n    <c-multi-select-tag (remove)=\"handleTagRemove($event)\" *ngFor=\"let option of selectedOptions; index as i\"\r\n                        [option]=\"option\" tabindex=\"-1\"></c-multi-select-tag>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType==='text'\">\r\n    <span class=\"bg-light\">{{selectedOptionsText}}</span>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType==='counter'\">\r\n    <span>{{counterText}}</span>\r\n  </ng-template>\r\n</div>\r\n\r\n<input #inputElement\r\n       [(ngModel)]=\"inputValue\"\r\n       [disabled]=\"disabled || !search\"\r\n       [placeholder]=\"(selectedOptions.length === 0 && selectionType!=='counter') ? placeholder : ''\"\r\n       autocomplete=\"off\"\r\n       [ngClass]=\"{'form-multi-select-search ms-1': true, disabled: disabled}\" tabindex=\"{{disabled ? '-1' : '0'}}\"\r\n       type=\"text\">\r\n\r\n<button (click)=\"clearAllOptions($event)\"\r\n        *ngIf=\"cleaner && selectedOptions.length > 0\"\r\n        [disabled]=\"disabled || !isDropdownVisible\"\r\n        aria-label=\"Clear all\"\r\n        cButtonClose\r\n        class=\"form-multi-select-selection-cleaner\"\r\n        size=\"sm\">\r\n</button>\r\n\r\n<div #dropdownElement class=\"form-multi-select-dropdown\">\r\n  <ng-template [ngIf]=\"visibleOptions>0\" [ngIfElse]=\"optionsEmpty\">\r\n    <button (click)=\"selectAllOptions()\"\r\n            *ngIf=\"selectAll && multiple\"\r\n            class=\"form-multi-select-all\">\r\n      {{selectAllLabel}}\r\n    </button>\r\n    <div #multiselectOptionsDiv\r\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, 'overflow': 'scroll'} : {}\"\r\n         class=\"form-multi-select-options\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #optionsEmpty>\r\n    <div class=\"form-multi-select-options-empty\">{{searchNoResultsLabel}}</div>\r\n  </ng-template>\r\n</div>\r\n\r\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}\n"], components: [{ type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], exportAs: ["cMultiSelect"], ngImport: i0, template: "<div class=\"form-multi-select-selection\">\n  <ng-template [ngIf]=\"selectionType === 'tags'\">\n    <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\n                        (remove)=\"handleTagRemove($event)\"\n                        [option]=\"option\"\n                        tabindex=\"-1\">\n    </c-multi-select-tag>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n    <span>{{ selectedOptionsText }}</span>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType === 'counter'\">\n    <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\n    <ng-template #pluralMap>\n      <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\n    </ng-template>\n  </ng-template>\n  <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">\n    <span>{{ placeholder }}</span>\n  </ng-template>\n</div>\n\n<input\n  #inputElement\n  (keydown)=\"handleSearchKeyDown($event)\"\n  *ngIf=\"search && !disabled\"\n  [(ngModel)]=\"searchValue\"\n  [disabled]=\"disabled || !search\"\n  [ngClass]=\"{ 'form-multi-select-search': true, disabled: disabled }\"\n  [placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : ''\"\n  autocomplete=\"off\"\n  tabindex=\"{{ disabled ? '-1' : '0' }}\"\n  type=\"text\"\n>\n\n<button\n  (click)=\"clearAllOptions($event)\"\n  *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\n  [disabled]=\"disabled || !isDropdownVisible\"\n  aria-label=\"Clear all\"\n  cButtonClose\n  class=\"form-multi-select-selection-cleaner\"\n  size=\"sm\"\n></button>\n\n<div #dropdownElement *ngIf=\"!disabled\" class=\"form-multi-select-dropdown\">\n  <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\n    <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\n      {{ selectAllLabel }}\n    </button>\n    <div #multiselectOptionsDiv\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\n         class=\"form-multi-select-options\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n  <ng-template #optionsEmpty>\n    <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}:host .form-multi-select-search[size]{display:inline}\n"], components: [{ type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "i18nPlural": i2.I18nPluralPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
@@ -4959,7 +5013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"form-multi-select-selection\">\r\n  <ng-template [ngIf]=\"selectionType==='tags'\">\r\n    <c-multi-select-tag (remove)=\"handleTagRemove($event)\" *ngFor=\"let option of selectedOptions; index as i\"\r\n                        [option]=\"option\" tabindex=\"-1\"></c-multi-select-tag>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType==='text'\">\r\n    <span class=\"bg-light\">{{selectedOptionsText}}</span>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType==='counter'\">\r\n    <span>{{counterText}}</span>\r\n  </ng-template>\r\n</div>\r\n\r\n<input #inputElement\r\n       [(ngModel)]=\"inputValue\"\r\n       [disabled]=\"disabled || !search\"\r\n       [placeholder]=\"(selectedOptions.length === 0 && selectionType!=='counter') ? placeholder : ''\"\r\n       autocomplete=\"off\"\r\n       [ngClass]=\"{'form-multi-select-search ms-1': true, disabled: disabled}\" tabindex=\"{{disabled ? '-1' : '0'}}\"\r\n       type=\"text\">\r\n\r\n<button (click)=\"clearAllOptions($event)\"\r\n        *ngIf=\"cleaner && selectedOptions.length > 0\"\r\n        [disabled]=\"disabled || !isDropdownVisible\"\r\n        aria-label=\"Clear all\"\r\n        cButtonClose\r\n        class=\"form-multi-select-selection-cleaner\"\r\n        size=\"sm\">\r\n</button>\r\n\r\n<div #dropdownElement class=\"form-multi-select-dropdown\">\r\n  <ng-template [ngIf]=\"visibleOptions>0\" [ngIfElse]=\"optionsEmpty\">\r\n    <button (click)=\"selectAllOptions()\"\r\n            *ngIf=\"selectAll && multiple\"\r\n            class=\"form-multi-select-all\">\r\n      {{selectAllLabel}}\r\n    </button>\r\n    <div #multiselectOptionsDiv\r\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, 'overflow': 'scroll'} : {}\"\r\n         class=\"form-multi-select-options\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #optionsEmpty>\r\n    <div class=\"form-multi-select-options-empty\">{{searchNoResultsLabel}}</div>\r\n  </ng-template>\r\n</div>\r\n\r\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}\n"] }]
+                    ], template: "<div class=\"form-multi-select-selection\">\n  <ng-template [ngIf]=\"selectionType === 'tags'\">\n    <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\n                        (remove)=\"handleTagRemove($event)\"\n                        [option]=\"option\"\n                        tabindex=\"-1\">\n    </c-multi-select-tag>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n    <span>{{ selectedOptionsText }}</span>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType === 'counter'\">\n    <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\n    <ng-template #pluralMap>\n      <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\n    </ng-template>\n  </ng-template>\n  <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">\n    <span>{{ placeholder }}</span>\n  </ng-template>\n</div>\n\n<input\n  #inputElement\n  (keydown)=\"handleSearchKeyDown($event)\"\n  *ngIf=\"search && !disabled\"\n  [(ngModel)]=\"searchValue\"\n  [disabled]=\"disabled || !search\"\n  [ngClass]=\"{ 'form-multi-select-search': true, disabled: disabled }\"\n  [placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : ''\"\n  autocomplete=\"off\"\n  tabindex=\"{{ disabled ? '-1' : '0' }}\"\n  type=\"text\"\n>\n\n<button\n  (click)=\"clearAllOptions($event)\"\n  *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\n  [disabled]=\"disabled || !isDropdownVisible\"\n  aria-label=\"Clear all\"\n  cButtonClose\n  class=\"form-multi-select-selection-cleaner\"\n  size=\"sm\"\n></button>\n\n<div #dropdownElement *ngIf=\"!disabled\" class=\"form-multi-select-dropdown\">\n  <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\n    <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\n      {{ selectAllLabel }}\n    </button>\n    <div #multiselectOptionsDiv\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\n         class=\"form-multi-select-options\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n  <ng-template #optionsEmpty>\n    <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}:host .form-multi-select-search[size]{display:inline}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$1.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { cleaner: [{
                 type: Input
             }], disabled: [{
@@ -4988,6 +5042,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], selectionTypeCounterText: [{
                 type: Input
+            }], selectionTypeCounterTextPluralMap: [{
+                type: Input
             }], value: [{
                 type: Input
             }], valueChange: [{
@@ -5014,7 +5070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }], onKeyUp: [{
                 type: HostListener,
                 args: ['keyup', ['$event']]
-            }], manage: [{
+            }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], onClick: [{