@coreui/angular-pro 4.2.31 → 4.2.33

package/fesm2020/coreui-angular-pro.mjs

@@ -7,8 +7,8 @@ import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
 import * as i3 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged, takeUntil, map, debounceTime } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged, takeUntil as takeUntil$1, map, debounceTime } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 import { isValid, format } from 'date-fns';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i2 from '@angular/forms';
@@ -448,12 +448,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['class']
             }] } });
 
-let nextId$1 = 0;
+let nextId$2 = 0;
 class AccordionItemComponent {
     constructor(accordionService) {
         this.accordionService = accordionService;
         this._visible = false;
-        this.contentId = `accordion-item-${nextId$1++}`;
+        this.contentId = `accordion-item-${nextId$2++}`;
         this.itemContext = { $implicit: this.visible };
         this.templates = {};
     }
@@ -8303,10 +8303,10 @@ class MultiSelectOptgroupLabelComponent {
     }
 }
 MultiSelectOptgroupLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectOptgroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectOptgroupLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
+MultiSelectOptgroupLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectOptgroupLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-optgroup-label', template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-multi-select-optgroup-label', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -8332,10 +8332,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
+var _MultiSelectOptionComponent_destroy$;
+/** The next id to use for creating unique DOM IDs. */
+let nextId$1 = 0;
 class MultiSelectOptionComponent {
-    constructor(elementRef, renderer, changeDetectorRef, focusMonitor, multiSelectService) {
+    constructor(elementRef, changeDetectorRef, focusMonitor, multiSelectService) {
         this.elementRef = elementRef;
-        this.renderer = renderer;
         this.changeDetectorRef = changeDetectorRef;
         this.focusMonitor = focusMonitor;
         this.multiSelectService = multiSelectService;
@@ -8344,8 +8346,19 @@ class MultiSelectOptionComponent {
         this.selectedChange = new EventEmitter();
         this.hasContent = true;
         this.dropdownVisible = false;
+        _MultiSelectOptionComponent_destroy$.set(this, new Subject());
+        this._generatedId = `coreui-option-${nextId$1++}`;
+        this._id = this._generatedId;
         this._disabled = false;
         this._selected = false;
+        this.setSubscriptions();
+    }
+    /** The id of the option element. */
+    get id() {
+        return this._id || this._generatedId;
+    }
+    set id(value) {
+        this._id = value;
     }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
@@ -8375,14 +8388,22 @@ class MultiSelectOptionComponent {
             'd-none': !this.visible
         };
     }
+    get role() {
+        return 'option';
+    }
     get tabIndex() {
-        return this.disabled ? '-1' : '0';
+        return this.disabled ? -1 : 0;
     }
     get ariaDisabled() {
         return this.disabled || null;
     }
     get ariaSelected() {
-        return this.selected;
+        return this.selected || undefined;
+    }
+    onKeyDown($event) {
+        if (['Space'].includes($event.code)) {
+            $event.preventDefault();
+        }
     }
     onKeyUp($event) {
         if (this.dropdownVisible) {
@@ -8398,41 +8419,50 @@ class MultiSelectOptionComponent {
         this.selected = this.disabled ? this.selected : !this.selected;
         this.focus('mouse');
     }
-    ngAfterContentInit() {
+    ngAfterViewInit() {
         setTimeout(() => {
-            this.hasContent = !!this.content?.nativeElement.childNodes.length;
+            this.hasContent = !!this.contentDiv?.nativeElement.childNodes.length;
+            if (!this.hasContent) {
+                this.changeDetectorRef.markForCheck();
+            }
         });
-        if (!this.label) {
-            this.label = this.elementRef.nativeElement.innerText || this.value;
+        if (this.label === undefined) {
+            const innerText = this.elementRef.nativeElement.textContent.trim() || this.elementRef.nativeElement.innerText.trim();
+            this.label = innerText || this.value?.trim() || '...';
         }
         if (this.value === undefined) {
-            this.value = this.elementRef.nativeElement.innerText || this.label;
+            this.value = this.label?.trim() || '...';
         }
     }
+    /** Get the label for this element which is required by the FocusableOption interface. */
     getLabel() {
         return (this.label ?? this.value);
     }
     focus(origin = 'program') {
-        if (this.dropdownVisible) {
+        if (this.dropdownVisible && !this.disabled) {
             this.focusMonitor.focusVia(this.elementRef, origin, { preventScroll: false });
             this.changeDetectorRef.markForCheck();
         }
     }
     ngOnDestroy() {
-        this.multiselectVisibleSubscription.unsubscribe();
+        __classPrivateFieldGet(this, _MultiSelectOptionComponent_destroy$, "f").next(true);
+        __classPrivateFieldGet(this, _MultiSelectOptionComponent_destroy$, "f").complete();
     }
-    ngOnInit() {
-        this.multiselectVisibleSubscription = this.multiSelectService.multiSelectVisible$.subscribe(visible => {
+    setSubscriptions() {
+        this.multiSelectService.multiSelectVisible$
+            .pipe(takeUntil(__classPrivateFieldGet(this, _MultiSelectOptionComponent_destroy$, "f")))
+            .subscribe(visible => {
             this.dropdownVisible = visible;
         });
     }
 }
-MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$3.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: { "keyup": "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>\n<div *ngIf=\"!hasContent\">\n  {{label ?? value}}\n</div>\n\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+_MultiSelectOptionComponent_destroy$ = new WeakMap();
+MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible", id: "id", disabled: "disabled", selected: "selected", role: "role" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "id": "this.id", "class": "this.hostClasses", "role": "this.role", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], exportAs: ["cMultiSelectOption"], ngImport: i0, template: "<div #contentDiv><ng-content></ng-content></div>\n<div *ngIf=\"!hasContent\">\n  {{label ?? value}}\n</div>\n\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-option', template: "<div #contentDiv><ng-content></ng-content></div>\n<div *ngIf=\"!hasContent\">\n  {{label ?? value}}\n</div>\n\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$3.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { optionsStyle: [{
+            args: [{ selector: 'c-multi-select-option', exportAs: 'cMultiSelectOption', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #contentDiv><ng-content></ng-content></div>\n<div *ngIf=\"!hasContent\">\n  {{label ?? value}}\n</div>\n\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { optionsStyle: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -8442,9 +8472,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], selectedChange: [{
                 type: Output
-            }], content: [{
+            }], contentDiv: [{
                 type: ViewChild,
                 args: ['contentDiv']
+            }], id: [{
+                type: Input
+            }, {
+                type: HostBinding
             }], disabled: [{
                 type: Input
             }], selected: [{
@@ -8452,6 +8486,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], role: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['role']
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -8464,6 +8503,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], ariaSelected: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }], onKeyUp: [{
                 type: HostListener,
                 args: ['keyup', ['$event']]
@@ -8576,6 +8618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }] } });
 
+var _MultiSelectComponent_destroy$;
 // @ts-ignore
 const observeReferenceModifier = {
     name: 'observeReferenceModifier', enabled: true, phase: 'main', fn({ state }) { },
@@ -8606,17 +8649,22 @@ class MultiSelectComponent {
         this.focusMonitor = focusMonitor;
         this.multiSelectService = multiSelectService;
         this.iterableDiffers = iterableDiffers;
+        _MultiSelectComponent_destroy$.set(this, new Subject());
         this.onChange = (value) => { };
+        this.onTouched = () => { };
         this.cleaner = true;
         this._disabled = false;
         this._multiple = false;
         this.nativeName = '';
         this.nativeId = '';
+        this.options = [];
         this.optionsMaxHeight = 'auto';
         this.optionsStyle = 'checkbox';
         this.placeholder = 'Select...';
         this.search = true;
         this.searchNoResultsLabel = 'no items';
+        this._searchValue = '';
+        this.searchValueChange = new EventEmitter();
         this.selectAll = true;
         this.selectAllLabel = 'Select all options';
         this.selectionType = 'tags';
@@ -8624,6 +8672,8 @@ class MultiSelectComponent {
         this.selectionTypeCounterTextPluralMap = { '=1': 'item selected', 'other': 'items selected' };
         this._value = [''];
         this.valueChange = new EventEmitter();
+        this._virtualScroller = false;
+        this._visibleItems = 10;
         this._visible = false;
         this.visibleChange = new EventEmitter();
         /**
@@ -8633,7 +8683,7 @@ class MultiSelectComponent {
         this.popperjsOptions = {
             strategy: 'fixed', modifiers: [observeReferenceModifier, {
                     name: 'offset', options: {
-                        offset: [0, this.selectionType === 'tags' ? 8 : 10]
+                        offset: () => this.selectionType === 'tags' && this.selectedOptions.length ? [-2, 8] : [-12, 12]
                     }
                 }]
         };
@@ -8641,19 +8691,19 @@ class MultiSelectComponent {
         this._selectedOptions = [];
         this._tabIndex = '-1';
         this.visibleOptions = 0;
-        this._searchValue = '';
         this._subtreeFocused = this.focusOrigin(null);
         this.differ = this.iterableDiffers.find(this._value).create();
     }
     writeValue(value) {
         if (value !== null) {
-            this.value = value;
+            this.value = Array.isArray(value) ? [...value] : [value ?? ''];
         }
     }
     registerOnChange(fn) {
         this.onChange = fn;
     }
     registerOnTouched(fn) {
+        this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
@@ -8673,16 +8723,29 @@ class MultiSelectComponent {
     get multiple() {
         return this._multiple;
     }
+    set searchValue(value) {
+        if (this._searchValue !== value.trimStart()) {
+            this._searchValue = value.trimStart();
+            this.visible = !!this.searchValue.length || this.visible;
+            this.filterOptions(this.searchValue);
+            this.inputElementSize();
+            this.searchValueChange.emit(this._searchValue);
+        }
+    }
+    get searchValue() {
+        return this._searchValue;
+    }
     /**
      * Initial value of multi-select
+     * @type string | string[]
      */
     set value(value) {
         const newValue = Array.isArray(value) ? [...value] : [value ?? ''];
         if (this.differ) {
             const changes = this.differ.diff(newValue);
             if (changes) {
-                this._value = newValue;
-                this.onChange(newValue);
+                this._value = [...newValue];
+                this.onChange([...newValue]);
                 this.selectOptions();
                 // not required here:
                 // this.selectedOptionsUpdate();
@@ -8693,18 +8756,42 @@ class MultiSelectComponent {
     get value() {
         return this.multiple ? [...this._value] : this._value[0]?.toString() ?? '';
     }
+    /**
+     * Enable virtual scroller for the options list.
+     * @type boolean
+     * @default false
+     * todo: virtual scroller implementation
+     */
+    set virtualScroller(value) {
+        this._virtualScroller = coerceBooleanProperty(value);
+    }
+    get virtualScroller() {
+        return this._virtualScroller;
+    }
+    /**
+     * Amount of visible options, if set - overwrites optionsMaxHeight
+     * @type number
+     * @default 10
+     */
+    set visibleItems(value) {
+        this._visibleItems = value || 1;
+        this.optionsMaxHeight = ((42 * value) + 16).toString();
+    }
+    get visibleItems() {
+        return this._visibleItems;
+    }
     /**
      * Toggle the visibility of the dropdown select component.
      * @type boolean
      * @default false
      */
     set visible(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (newValue !== this._visible) {
-            this._visible = newValue;
-            this.multiSelectService.toggleVisible(newValue);
-            if (newValue) {
-                this.listKeyManager.setFirstItemActive();
+        const visible = coerceBooleanProperty(value);
+        if (visible !== this._visible) {
+            this._visible = visible;
+            this.multiSelectService.toggleVisible(visible);
+            if (visible) {
+                this.listKeyManager?.setFirstItemActive();
             }
         }
     }
@@ -8720,7 +8807,7 @@ class MultiSelectComponent {
         return this._selectedOptions;
     }
     get selectedOptionsText() {
-        return this.selectedOptions.map((option) => option.label).join(', ');
+        return this.selectedOptions.map(option => option.label).join(', ');
     }
     get counterText() {
         return `${this.selectedOptions.length} ${this.selectionTypeCounterText}`;
@@ -8746,6 +8833,9 @@ class MultiSelectComponent {
             'is-invalid': this.valid === false
         };
     }
+    get ariaMultiSelectable() {
+        return this.multiple;
+    }
     get tabIndex() {
         return this._tabIndex;
     }
@@ -8755,8 +8845,10 @@ class MultiSelectComponent {
         });
     }
     onKeyUp($event) {
-        if (this.disabled)
+        if (this.disabled) {
             return;
+        }
+        this.onTouched();
         if ($event.key === 'Escape') {
             this.visible = false;
             this.searchValue = '';
@@ -8779,16 +8871,19 @@ class MultiSelectComponent {
         }
     }
     onKeyDown($event) {
-        if (this.disabled)
+        if (this.disabled) {
             return;
+        }
         // avoid setting focus to option while on input element
-        if ($event.target === this.inputElement.nativeElement)
+        if ($event.target === this.inputElement.nativeElement) {
             return;
-        this.listKeyManager.onKeydown($event);
+        }
+        this.listKeyManager?.onKeydown($event);
     }
     onClick($event) {
-        if (this.disabled)
+        if (this.disabled) {
             return;
+        }
         if (!this.visible) {
             this.visible = true;
             this.setFocus('mouse', 'onClick');
@@ -8797,15 +8892,7 @@ class MultiSelectComponent {
             this.visible = false;
             this.setFocus('mouse', 'onClick');
         }
-    }
-    set searchValue(value) {
-        this._searchValue = value.trim();
-        this.visible = !!this.searchValue.length || this.visible;
-        this.filterOptions(this.searchValue);
-        this.inputElementSize();
-    }
-    get searchValue() {
-        return this._searchValue;
+        this.onTouched();
     }
     get subtreeFocused() {
         return this._subtreeFocused;
@@ -8815,8 +8902,9 @@ class MultiSelectComponent {
         this.visible = value === false ? false : this.visible;
     }
     focusOrigin(origin) {
-        if (this.disabled)
+        if (this.disabled) {
             return false;
+        }
         const focused = !!origin;
         this.searchValue = focused ? this.searchValue : '';
         return focused;
@@ -8825,6 +8913,8 @@ class MultiSelectComponent {
         this.tabIndex = '0';
     }
     ngOnDestroy() {
+        __classPrivateFieldGet(this, _MultiSelectComponent_destroy$, "f").next(true);
+        __classPrivateFieldGet(this, _MultiSelectComponent_destroy$, "f").complete();
         this.multiselectSubscribe(false);
         this.setFocusMonitor(false);
     }
@@ -8842,12 +8932,18 @@ class MultiSelectComponent {
     }
     ngAfterContentInit() {
         this.visibleOptions = this.multiSelectOptions.length;
+        this.multiSelectOptions.changes
+            .pipe(takeUntil(__classPrivateFieldGet(this, _MultiSelectComponent_destroy$, "f")))
+            .subscribe(next => {
+            this.visibleOptions = this.multiSelectOptions?.filter((item) => item.visible).length;
+            this.selectOptions();
+        });
     }
     ngAfterViewInit() {
         this.selectOptions();
         this.multiselectSubscribe();
         this.listKeyManager = new FocusKeyManager(this.multiSelectOptions).withHomeAndEnd().withTypeAhead();
-        this.listKeyManager.skipPredicate(item => (!item.visible || item.disabled));
+        this.listKeyManager.skipPredicate(item => (item.disabled || !item.visible));
         this.listKeyManager.setFirstItemActive();
         this.setFocusMonitor(!this.disabled);
         // not required here:
@@ -8858,10 +8954,6 @@ class MultiSelectComponent {
     }
     multiselectSubscribe(subscribe = true) {
         if (subscribe) {
-            this.multiSelectOptionsSubscription = this.multiSelectOptions.changes.subscribe(change => {
-                // console.log('multiSelectOptions change', change)
-                this.selectOptions();
-            });
             this.multiselectVisibleSubscription = this.multiSelectService.multiSelectVisible$.subscribe((visible) => {
                 if (this.isDropdownVisible !== visible) {
                     this.isDropdownVisible = visible;
@@ -8891,7 +8983,6 @@ class MultiSelectComponent {
         }
         else {
             this.multiselectVisibleSubscription?.unsubscribe();
-            this.multiSelectOptionsSubscription?.unsubscribe();
             this.multiselectStateSubscription?.unsubscribe();
         }
     }
@@ -8903,8 +8994,9 @@ class MultiSelectComponent {
     }
     clearAllOptions($event) {
         this.selectedOptions.forEach((option) => {
-            if (!option._disabled)
+            if (!option._disabled) {
                 option.selected = false;
+            }
         });
         this.selectedOptionsUpdate();
         if ($event) {
@@ -8914,8 +9006,9 @@ class MultiSelectComponent {
     }
     selectAllOptions() {
         this.multiSelectOptions.forEach((option, index) => {
-            if (!option.disabled && option.visible)
+            if (!option.disabled && option.visible) {
                 option.selected = true;
+            }
         });
         this.selectedOptionsUpdate();
     }
@@ -8923,8 +9016,9 @@ class MultiSelectComponent {
         this.setFocus('program', 'handleTagRemove');
     }
     setFocus(origin = 'program', methodName) {
-        if (this.disabled)
+        if (this.disabled) {
             return;
+        }
         const element = this.inputElement ?? this.elementRef;
         const preventScroll = origin === 'program';
         this.focusMonitor?.focusVia(element, origin, { preventScroll: preventScroll });
@@ -8933,11 +9027,11 @@ class MultiSelectComponent {
     filterOptions(value) {
         const searchString = value.toLowerCase() ?? '';
         this.multiSelectOptions?.forEach((item, index) => {
-            if (!!searchString) {
-                item.visible = item.label?.toLowerCase().includes(searchString) ?? true;
+            if (this.search === 'external' || !searchString) {
+                item.visible = true;
             }
             else {
-                item.visible = true;
+                item.visible = item.label?.toLowerCase().includes(searchString) ?? true;
             }
         });
         this.visibleOptions = this.multiSelectOptions?.filter((item) => item.visible).length;
@@ -8948,8 +9042,9 @@ class MultiSelectComponent {
         this.updateNativeSelect();
     }
     updateNativeSelect() {
-        if (!this.nativeSelectRef)
+        if (!this.nativeSelectRef) {
             return;
+        }
         const options = this.selectedOptions.map(item => {
             const { selected, value, label } = item;
             return { selected, value, label };
@@ -8972,8 +9067,9 @@ class MultiSelectComponent {
         }
     }
     handleSearchKeyDown($event) {
-        if (this.searchValue.length || this.selectedOptions.length === 0)
+        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();
@@ -9008,13 +9104,14 @@ class MultiSelectComponent {
         }
     }
 }
+_MultiSelectComponent_destroy$ = new WeakMap();
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$3.FocusMonitor }, { token: MultiSelectService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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", size: "size", value: "value", valid: "valid", visible: "visible", popperjsOptions: ["popperOptions", "popperjsOptions"] }, 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: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", options: "options", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", searchValue: "searchValue", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", size: "size", value: "value", valid: "valid", virtualScroller: "virtualScroller", visibleItems: "visibleItems", visible: "visible", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { searchValueChange: "searchValueChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.aria-multiselectable": "this.ariaMultiSelectable", "attr.tabindex": "this.tabIndex" } }, providers: [
         MultiSelectService,
         {
             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
         }
-    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <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 class=\"form-multi-select-search\">{{ 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 class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\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      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\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, overflowY: '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</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{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:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
+    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <c-multi-select-tag\n          *ngFor=\"let option of selectedOptions; index as i\"\n          (remove)=\"handleTagRemove($event)\"\n          [option]=\"option\"\n          tabindex=\"-1\"\n          class=\"form-multi-select-tag\"\n        ></c-multi-select-tag>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n        <span class=\"form-multi-select-search\">{{ 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 class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\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      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\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, overflowY: '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</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{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:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
@@ -9022,7 +9119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         {
                             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <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 class=\"form-multi-select-search\">{{ 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 class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\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      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\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, overflowY: '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</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{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:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <c-multi-select-tag\n          *ngFor=\"let option of selectedOptions; index as i\"\n          (remove)=\"handleTagRemove($event)\"\n          [option]=\"option\"\n          tabindex=\"-1\"\n          class=\"form-multi-select-tag\"\n        ></c-multi-select-tag>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n        <span class=\"form-multi-select-search\">{{ 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 class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\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      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\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, overflowY: '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</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{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:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$3.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }]; }, propDecorators: { cleaner: [{
                 type: Input
             }], disabled: [{
@@ -9033,6 +9130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], nativeId: [{
                 type: Input
+            }], options: [{
+                type: Input
             }], optionsMaxHeight: [{
                 type: Input
             }], optionsStyle: [{
@@ -9043,6 +9142,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], searchNoResultsLabel: [{
                 type: Input
+            }], searchValue: [{
+                type: Input
+            }], searchValueChange: [{
+                type: Output
             }], selectAll: [{
                 type: Input
             }], selectAllLabel: [{
@@ -9061,6 +9164,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }], valid: [{
                 type: Input
+            }], virtualScroller: [{
+                type: Input
+            }], visibleItems: [{
+                type: Input
             }], visible: [{
                 type: Input
             }], visibleChange: [{
@@ -9086,6 +9193,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], ariaMultiSelectable: [{
+                type: HostBinding,
+                args: ['attr.aria-multiselectable']
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -12647,7 +12757,7 @@ class FilterInputDirective {
     setSubscription(subscribe = !__classPrivateFieldGet(this, _FilterInputDirective_valueSubscription, "f")) {
         if (subscribe) {
             __classPrivateFieldSet(this, _FilterInputDirective_valueSubscription, this.value$
-                .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f")))
+                .pipe(distinctUntilChanged(), takeUntil$1(__classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f")))
                 .subscribe(value => {
                 if (__classPrivateFieldGet(this, _FilterInputDirective_value, "f") !== value) {
                     __classPrivateFieldSet(this, _FilterInputDirective_value, value, "f");
@@ -12659,7 +12769,7 @@ class FilterInputDirective {
             __classPrivateFieldSet(this, _FilterInputDirective_inputSubscription, fromEvent(this.elementRef.nativeElement, this.onEvent)
                 .pipe(map(event => {
                 return event.target.value;
-            }), debounceTime(dueTime), takeUntil(__classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f")))
+            }), debounceTime(dueTime), takeUntil$1(__classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f")))
                 .subscribe((value) => {
                 if (value !== __classPrivateFieldGet(this, _FilterInputDirective_value, "f")) {
                     this.value$.next(value);
@@ -12668,6 +12778,7 @@ class FilterInputDirective {
         }
         else {
             __classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f").next(true);
+            __classPrivateFieldGet(this, _FilterInputDirective_destroy$, "f").complete();
         }
     }
 }