@coreui/angular-pro 5.1.4 → 5.1.5

package/fesm2022/coreui-angular-pro.mjs

@@ -10016,7 +10016,7 @@ const observeReferenceResizeModifier = {
         const RO_PROP = '__popperjsRO__';
         const { reference } = state.elements;
         let resizeObserver = new ResizeObserver((entries) => {
-            if (entries.find(entry => entry.target === reference)) {
+            if (entries.find((entry) => entry.target === reference)) {
                 instance.update();
             }
         });
@@ -10173,8 +10173,8 @@ class MultiSelectComponent {
          * @type IPluralMap
          * @default { '=1': 'item selected', 'other': 'items selected' }
          */
-        this.selectionTypeCounterTextPluralMap = { '=1': 'item selected', 'other': 'items selected' };
-        this.#value = [];
+        this.selectionTypeCounterTextPluralMap = { '=1': 'item selected', other: 'items selected' };
+        this.#value = signal([]);
         /**
          * Emits valueChange
          * @type TValue | TValue[]
@@ -10194,6 +10194,7 @@ class MultiSelectComponent {
          * @default 196
          */
         this.itemMinWidth = 196;
+        this.minWidth = signal(this.itemMinWidth);
         this._visible = false;
         /**
          * Emits visibleChange
@@ -10208,7 +10209,7 @@ class MultiSelectComponent {
         this._subtreeFocused = this.focusOrigin(null);
         this.userOptions = this.multiSelectService.getUserOptions();
         this.activeOption = null;
-        this.differ = this.iterableDiffers.find(this.#value).create();
+        this.differ = this.iterableDiffers.find(this.#value()).create();
         this.multiSelectService.setSelectionModel(this.multiple);
         this.optionsArray$ = this.multiSelectService.getOptionsArray();
     }
@@ -10217,7 +10218,7 @@ class MultiSelectComponent {
     #options;
     #optionsContent;
     writeValue(value) {
-        if ((value !== undefined && value !== null)) {
+        if (value !== undefined && value !== null) {
             this.value = Array.isArray(value) ? [...value] : [value];
         }
         else {
@@ -10309,22 +10310,22 @@ class MultiSelectComponent {
     }
     /**
      * Initial value of multi-select
-     * @type TValue | TValue[]
+     * @type (TValue | TValue[])
      */
     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.value$.next([...newValue]);
-                this.onChange(this.value);
-                // this.valueChange.emit(this.value);
-            }
+        // if (this.differ) {
+        const changes = this.differ?.diff(newValue);
+        if (changes) {
+            this.#value.set([...newValue]);
+            this.value$.next([...newValue]);
+            this.onChange(this.value);
+            // this.valueChange.emit(this.value);
         }
+        // }
     }
     get value() {
-        const value = this.multiSelectService.selectionModel?.selected ?? [...this.#value];
+        const value = this.multiSelectService.selectionModel?.selected ?? [...this.#value()];
         return this.multiple ? [...value] : value[0];
     }
     #value;
@@ -10346,7 +10347,7 @@ class MultiSelectComponent {
      */
     set visibleItems(value) {
         this._visibleItems = value > 0 ? value : 8;
-        this.optionsMaxHeight = ((this.itemSize * this._visibleItems) + 16).toString();
+        this.optionsMaxHeight = (this.itemSize * this._visibleItems + 16).toString();
     }
     get visibleItems() {
         return this._visibleItems;
@@ -10381,7 +10382,7 @@ class MultiSelectComponent {
         const currOptions = {
             ...options,
             modifiers: [
-                ...prevModifiers.filter(prevModifier => !currModifiers.find(currModifier => currModifier.name === prevModifier.name)),
+                ...prevModifiers.filter((prevModifier) => !currModifiers.find((currModifier) => currModifier.name === prevModifier.name)),
                 ...currModifiers
             ]
         };
@@ -10395,7 +10396,7 @@ class MultiSelectComponent {
         return [...this.optionsSelected.values()];
     }
     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}`;
@@ -10403,7 +10404,6 @@ class MultiSelectComponent {
     get counterTextType() {
         return typeof (this.selectionTypeCounterTextPluralMap ?? this.selectionTypeCounterText);
     }
-    ;
     get counterPlaceholderText() {
         if (this.selectedOptions.length === 0 || this.selectionType !== 'counter') {
             return null;
@@ -10456,7 +10456,8 @@ class MultiSelectComponent {
             this.setFocus('keyboard', 'onKeyUp');
             return;
         }
-        if (['Enter', 'Space', 'ArrowDown'].includes($event.code) && [this.inputElement?.nativeElement, this.elementRef.nativeElement].includes($event.target)) {
+        if (['Enter', 'Space', 'ArrowDown'].includes($event.code) &&
+            [this.inputElement?.nativeElement, this.elementRef.nativeElement].includes($event.target)) {
             $event.stopPropagation();
             this.visible = true;
             if (!this.search) {
@@ -10480,12 +10481,16 @@ class MultiSelectComponent {
             if (this.visible && this.subtreeFocused) {
                 if (targetTagName === 'C-MULTI-SELECT-OPTION') {
                     if (this.tabTarget === 'C-MULTI-SELECT-OPTION') {
-                        if ($event.shiftKey && this.focusKeyManager.activeItem?.value === this.options.filter(option => option.visible && !option.disabled).slice(0)[0].value) {
+                        if ($event.shiftKey &&
+                            this.focusKeyManager.activeItem?.value ===
+                                this.options.filter((option) => option.visible && !option.disabled).slice(0)[0].value) {
                             this.setFocus('keyboard', 'onKeyUp');
                             this.tabTarget = targetTagName;
                             return;
                         }
-                        if (!$event.shiftKey && this.focusKeyManager.activeItem?.value === this.options.filter(option => option.visible && !option.disabled).slice(-1)[0].value) {
+                        if (!$event.shiftKey &&
+                            this.focusKeyManager.activeItem?.value ===
+                                this.options.filter((option) => option.visible && !option.disabled).slice(-1)[0].value) {
                             this.setFocus('keyboard', 'onKeyUp');
                             this.tabTarget = targetTagName;
                             this.updateActiveItem(0);
@@ -10572,21 +10577,23 @@ class MultiSelectComponent {
     }
     ngOnInit() {
         this.multiSelectService.selectionModel.changed
-            .pipe(filter(() => !this.multiple), delay(0), tap(change => {
+            .pipe(filter(() => !this.multiple), delay(0), tap((change) => {
             if (change.added.length > 0) {
                 // close dropdown for single select (!multiple)
                 this.visible = false;
                 this.searchValue = '';
             }
-        }), skip(1), tap(change => {
+        }), skip(1), tap((change) => {
             this.setFocus('program', 'selectionModel.changed (single)');
         }), takeUntilDestroyed(this.#destroyRef))
             .subscribe();
-        this.#optionsReady$.pipe(filter(() => !this.virtualScroller), delay(0), tap(() => {
+        this.#optionsReady$
+            .pipe(filter(() => !this.virtualScroller), delay(0), tap(() => {
             this.setFocusKeyManager([...this.multiSelectOptionsContent, ...this.multiSelectOptionsView]);
-        }), takeUntilDestroyed(this.#destroyRef)).subscribe();
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe();
         this.multiSelectService.selectionModel.changed
-            .pipe(tap(change => {
+            .pipe(tap((change) => {
             const { added } = { ...change };
             if (added.length > 0 && this.clearSearchOnSelect) {
                 this.searchValue = '';
@@ -10598,10 +10605,10 @@ class MultiSelectComponent {
         // delay(0),
         combineLatestWith(this.#optionsReady$), tap(([change, ready]) => {
             const { removed } = { ...change };
-            removed.forEach(value => {
+            removed.forEach((value) => {
                 this.optionsSelected.delete(value);
             });
-            this.multiSelectService.selectionModel.selected.forEach(key => {
+            this.multiSelectService.selectionModel.selected.forEach((key) => {
                 const value = this.#options.get(key);
                 if (value) {
                     this.optionsSelected.set(key, value);
@@ -10614,20 +10621,18 @@ class MultiSelectComponent {
         }), takeUntilDestroyed(this.#destroyRef))
             .subscribe();
         // set initial values
-        this.multiSelectService.selectionModel.select(...this.#value);
-        this.value$
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(value => {
+        this.multiSelectService.selectionModel.select(...this.#value());
+        this.value$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((value) => {
             if (!value.length) {
                 this.clearAllOptions();
                 return;
             }
-            value.forEach(value => {
+            value.forEach((value) => {
                 this.multiSelectService.selectionModel.select(value);
             });
         });
         this.value$
-            .pipe(debounceTime(100), tap(value => {
+            .pipe(debounceTime(100), distinctUntilChanged(), tap((value) => {
             this.valueChange.emit(this.value);
         }), takeUntilDestroyed(this.#destroyRef))
             .subscribe();
@@ -10636,15 +10641,15 @@ class MultiSelectComponent {
             this.visibleOptions.set(options.some((item) => item.visible) || userOptions.some((item) => item.visible));
             this.activeOption = null;
             if (this.virtualScroller) {
-                this.multiSelectOptionsContent?.forEach(option => {
+                this.multiSelectOptionsContent?.forEach((option) => {
                     option.active = false;
                 });
                 this.scrollViewport?.setRenderedRange({ start: 0, end: this.visibleItems });
                 this.scrollViewport?.scrollToIndex(0);
             }
             else {
-                this.multiSelectOptionsContent?.forEach(option => {
-                    const found = options.find(item => item.value === option.value);
+                this.multiSelectOptionsContent?.forEach((option) => {
+                    const found = options.find((item) => item.value === option.value);
                     option.visible = found?.visible ?? false;
                     option.active = false;
                 });
@@ -10679,17 +10684,21 @@ class MultiSelectComponent {
     }
     makeOptions(options) {
         if (this.search === 'external' && this.searchValue.length) {
-            this.#options.forEach((value, key) => {
-                value.visible = false;
+            this.#options.forEach((option, key) => {
+                option.visible = false;
             });
         }
-        options.forEach(option => {
+        options.forEach((option) => {
             const key = option.value;
             const value = {
                 value: option.value ?? option.label,
                 label: option.label ?? option.value?.toString(),
                 disabled: option.disabled === true,
-                visible: this.search === 'external' ? true : option.custom && option.selected ? option.visible : option.visible !== false,
+                visible: this.search === 'external'
+                    ? true
+                    : option.custom && option.selected
+                        ? option.visible
+                        : option.visible !== false,
                 text: option.text ?? option.label ?? option.value?.toString(),
                 selected: option.selected,
                 custom: option.custom
@@ -10710,7 +10719,7 @@ class MultiSelectComponent {
     // });
     addUserOption() {
         if (this.allowCreateOptions) {
-            if (this.userOptions().some(option => option.value === this.searchValue)) {
+            if (this.userOptions().some((option) => option.value === this.searchValue)) {
                 return;
             }
             if (this.#options.get(this.searchValue)) {
@@ -10724,7 +10733,7 @@ class MultiSelectComponent {
                 custom: true,
                 selected: true
             };
-            this.searchValue = (this.clearSearchOnSelect || this.allowCreateOptions) ? '' : this.searchValue;
+            this.searchValue = this.clearSearchOnSelect || this.allowCreateOptions ? '' : this.searchValue;
             this.multiSelectService.addUserOption(userOption);
             this.multiSelectService.selectionModel.select(userOption.value);
             this.optionsSelected.set(userOption.value, userOption);
@@ -10738,18 +10747,21 @@ class MultiSelectComponent {
         this.setVirtualScroller();
         this.multiSelectOptionsContent?.changes
             .pipe(delay(0), distinctUntilChanged((previous, current) => {
-            const prev = previous.toArray().map(option => option.value);
-            const curr = current.toArray().map(option => option.value);
+            const prev = previous.toArray().map((option) => option.value);
+            const curr = current.toArray().map((option) => option.value);
             if (this.virtualScroller) {
                 return JSON.stringify(prev) === JSON.stringify(curr);
             }
             return JSON.stringify(this.#optionsContent) === JSON.stringify(curr);
-        }), tap(changes => {
-            this.#optionsContent = changes.toArray().map(option => option.value);
+        }), tap((changes) => {
+            this.#optionsContent = changes.toArray().map((option) => option.value);
         }), takeUntilDestroyed(this.#destroyRef))
-            .subscribe(next => {
+            .subscribe((next) => {
             this.visibleOptions.set(this.multiSelectOptionsContent?.some((option) => option.visible));
             if (this.visibleOptions()) {
+                if (!this.virtualScroller) {
+                    this.#options.clear();
+                }
                 this.makeOptions(this.multiSelectOptionsContent.toArray());
             }
         });
@@ -10784,6 +10796,10 @@ class MultiSelectComponent {
                 }
                 else {
                     if (this.virtualScroller) {
+                        {
+                            const dropdownMinWidth = parseInt(this.dropdownMenu.nativeElement.style.minWidth, 10);
+                            this.minWidth.set(this.itemMinWidth > dropdownMinWidth ? this.itemMinWidth : dropdownMinWidth);
+                        }
                         this.scrollViewport?.setRenderedRange({ start: 0, end: this.visibleItems });
                         this.scrollViewport?.scrollToIndex(0);
                     }
@@ -10795,7 +10811,9 @@ class MultiSelectComponent {
     }
     clearAllOptions($event) {
         setTimeout(() => {
-            const enabledOptions = Array.from(this.optionsSelected.values()).filter(option => !option.disabled).map(option => option.value);
+            const enabledOptions = Array.from(this.optionsSelected.values())
+                .filter((option) => !option.disabled)
+                .map((option) => option.value);
             this.multiSelectService.selectionModel.deselect(...enabledOptions);
             this.removeAllUserOptions();
             this.searchValue = '';
@@ -10805,7 +10823,9 @@ class MultiSelectComponent {
         });
     }
     selectAllOptions() {
-        const enabledOptions = Array.from(this.#options.values()).filter(option => option.visible && !option.disabled).map(option => option.value);
+        const enabledOptions = Array.from(this.#options.values())
+            .filter((option) => option.visible && !option.disabled)
+            .map((option) => option.value);
         this.multiSelectService.selectionModel.select(...enabledOptions);
         this.inputElementSize();
     }
@@ -10854,7 +10874,7 @@ class MultiSelectComponent {
         if (!this.nativeSelectRef || !this.nativeId) {
             return;
         }
-        const options = Array.from(this.optionsSelected).map(item => {
+        const options = Array.from(this.optionsSelected).map((item) => {
             const { selected, value, label } = item[1];
             return { selected, value, label };
         });
@@ -10891,7 +10911,7 @@ class MultiSelectComponent {
         }
         if (['Backspace', 'Delete'].includes($event.key)) {
             $event.stopPropagation();
-            const last = this.selectedOptions.filter(option => !option.disabled).pop();
+            const last = this.selectedOptions.filter((option) => !option.disabled).pop();
             if (last) {
                 this.multiSelectService.selectionModel.deselect(last.value);
             }
@@ -10910,7 +10930,8 @@ class MultiSelectComponent {
             //     takeUntilDestroyed(this.#destroyRef)
             //   )
             //   .subscribe();
-            this.focusMonitorSubscription = this.focusMonitor?.monitor(this.elementRef, true)
+            this.focusMonitorSubscription = this.focusMonitor
+                ?.monitor(this.elementRef, true)
                 .pipe(
             // to avoid focus lost on speed scrolling with virtualScroll
             debounceTime(100), takeUntilDestroyed(this.#destroyRef))
@@ -10930,19 +10951,19 @@ class MultiSelectComponent {
         if (!this.scrollViewport) {
             this.scrollViewport = scrollViewport;
         }
-        const availableOptions = this.options.filter(option => option.visible);
+        const availableOptions = this.options.filter((option) => option.visible);
         const firstVisibleOption = availableOptions[scrolledIndex];
-        const activeOptionIndex = availableOptions.findIndex(option => option.value === this.activeOption?.value);
+        const activeOptionIndex = availableOptions.findIndex((option) => option.value === this.activeOption?.value);
         const optionsArray = this.multiSelectOptionsContent.toArray();
         if (scrolledIndex > activeOptionIndex) {
-            const firstVisibleItem = optionsArray.find(option => option.value === firstVisibleOption?.value);
+            const firstVisibleItem = optionsArray.find((option) => option.value === firstVisibleOption?.value);
             if (firstVisibleItem && scrolledIndex) {
                 this.focusKeyManager.setActiveItem(firstVisibleItem);
             }
             return;
         }
         if (scrolledIndex + this.visibleItems - 2 <= activeOptionIndex) {
-            const lastVisibleItem = optionsArray.findIndex(option => option.value === firstVisibleOption.value);
+            const lastVisibleItem = optionsArray.findIndex((option) => option.value === firstVisibleOption.value);
             if (lastVisibleItem > -1) {
                 this.focusKeyManager.setActiveItem(lastVisibleItem + this.visibleItems - 2);
             }
@@ -10981,14 +11002,12 @@ class MultiSelectComponent {
             return [...option.elementRef.nativeElement.parentElement.children]?.indexOf(option.elementRef.nativeElement);
         };
         const optionsChange$ = this.multiSelectOptionsContent.changes;
-        const sortedOptions$ = optionsChange$.pipe(map(options => options.toArray()), filter(options => options.length > 0), map(options => options.sort((a, b) => indexOfOption(a) - indexOfOption(b))), takeUntilDestroyed(this.#destroyRef));
-        sortedOptions$
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(sortedOptions => {
+        const sortedOptions$ = optionsChange$.pipe(map((options) => options.toArray()), filter((options) => options.length > 0), map((options) => options.sort((a, b) => indexOfOption(a) - indexOfOption(b))), takeUntilDestroyed(this.#destroyRef));
+        sortedOptions$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((sortedOptions) => {
             return this.multiSelectOptionsContent.reset(sortedOptions);
         });
         this.scrollViewportView.changes
-            .pipe(take(1), map(changes => changes.toArray()[0]), tap((scrollViewport) => {
+            .pipe(take(1), map((changes) => changes.toArray()[0]), tap((scrollViewport) => {
             if (!this.scrollViewport) {
                 this.scrollViewport = scrollViewport;
                 const cdkVirtualScrollContentWrapper = this.scrollViewport.getElementRef().nativeElement?.firstElementChild;
@@ -10996,8 +11015,8 @@ class MultiSelectComponent {
                     const style = getComputedStyle(cdkVirtualScrollContentWrapper, null) ?? undefined;
                     const padding = parseInt(style?.getPropertyValue('padding-left') ?? '12px') * 3;
                     const observer = new MutationObserver((mutationRecords) => {
-                        mutationRecords.forEach(child => {
-                            child.addedNodes.forEach(node => {
+                        mutationRecords.forEach((child) => {
+                            child.addedNodes.forEach((node) => {
                                 if (node.nodeName === 'C-MULTI-SELECT-OPTION') {
                                     const width = node.offsetWidth;
                                     if (width > this.itemMinWidth) {
@@ -11029,16 +11048,14 @@ class MultiSelectComponent {
         this.focusKeyManager = new FocusKeyManager(focusableOptions)
             .withHomeAndEnd()
             .withPageUpDown()
-            .skipPredicate((option) => (option.disabled || !option.visible));
+            .skipPredicate((option) => option.disabled || !option.visible);
         if (!this._virtualScroller) {
             this.focusKeyManager.withTypeAhead(300);
         }
         this.focusKeyManager.tabOut
             .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => { }))
             .subscribe();
-        this.focusKeyManager.change
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(change => {
+        this.focusKeyManager.change.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((change) => {
             if (change < 0) {
                 this.activeOption ? this.focusKeyManager.setActiveItem(this.activeOption) : this.setFirstItemActive();
             }
@@ -11056,21 +11073,26 @@ class MultiSelectComponent {
         // }
     }
     get firstFocusableItem() {
-        return this.multiSelectOptionsContent?.find(option => option.visible && !option.disabled) ?? this.multiSelectOptionsView?.find(option => option.visible && !option.disabled);
+        return (this.multiSelectOptionsContent?.find((option) => option.visible && !option.disabled) ??
+            this.multiSelectOptionsView?.find((option) => option.visible && !option.disabled));
     }
     setFirstItemActive() {
         const firstFocusableItem = this.firstFocusableItem;
-        firstFocusableItem ? this.focusKeyManager?.setActiveItem(firstFocusableItem) : this.focusKeyManager?.setFirstItemActive();
+        firstFocusableItem
+            ? this.focusKeyManager?.setActiveItem(firstFocusableItem)
+            : this.focusKeyManager?.setFirstItemActive();
         this.activeOption = this.focusKeyManager?.activeItem ?? null;
     }
     updateActiveItem(item) {
         const firstFocusableItem = this.firstFocusableItem ?? item;
-        firstFocusableItem ? this.focusKeyManager?.updateActiveItem(firstFocusableItem) : this.focusKeyManager?.updateActiveItem(0);
+        firstFocusableItem
+            ? this.focusKeyManager?.updateActiveItem(firstFocusableItem)
+            : this.focusKeyManager?.updateActiveItem(0);
         if (this.focusKeyManager?.activeItem) {
-            this.multiSelectOptionsContent?.forEach(option => {
+            this.multiSelectOptionsContent?.forEach((option) => {
                 option.active = false;
             });
-            this.multiSelectOptionsView?.forEach(option => {
+            this.multiSelectOptionsView?.forEach((option) => {
                 option.active = false;
             });
             this.focusKeyManager.activeItem.active = true;
@@ -11087,9 +11109,11 @@ class MultiSelectComponent {
             I18nPluralPipe,
             MultiSelectService,
             {
-                provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiSelectComponent),
+                multi: true
             }
-        ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperOptions\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n       class=\"form-multi-select-input-group\">\n    <span\n      [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n      @if (selectionType === 'tags') {\n        @if (optionsSelected$ | async; as optionTags) {\n          @for (option of optionTags; track option.value; let i = $index) {\n            <c-multi-select-tag\n              (remove)=\"handleTagRemove($event)\"\n              [disabled]=\"option.disabled ?? false\"\n              [label]=\"option.label ?? option.value?.toString()\"\n              [option]=\"option\"\n              [value]=\"option.value\"\n              class=\"form-multi-select-tag text-truncate\"\n              tabindex=\"-1\"\n            />\n          }\n        }\n      } @else if (selectionType === 'text' && !!selectedOptions.length) {\n        @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!search) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n        </span>\n      }\n      @if (search) {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n          [disabled]=\"disabled || !search\"\n          [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ disabled ? -1 : 0 }}\"\n          type=\"text\"\n        >\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button (click)=\"handleIndicatorClick($event)\"\n              [disabled]=\"disabled\"\n              class=\"form-multi-select-indicator\"\n              type=\"button\">\n      </button>\n    </div>\n  </div>\n  @if (!disabled) {\n    <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n         class=\"form-multi-select-dropdown\" role=\"menu\">\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll && multiple && !virtualScroller) {\n          <button\n            (click)=\"selectAllOptions()\"\n            class=\"form-multi-select-all\"\n            type=\"button\"\n            tabindex=\"0\"\n          >\n            {{ selectAllLabel }}\n          </button>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || isLoading()) {\n        <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n      }\n      @if (isLoading()) {\n        <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @defer (on immediate) {\n    @if ((optionsArray$ | async); as optionsArray) {\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSize\"\n        [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n        maxBufferPx=\"{{itemSize * visibleItems}}\"\n        minBufferPx=\"{{itemSize * visibleItems}}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n          [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }] }); }
+        ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperOptions\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n       class=\"form-multi-select-input-group\">\n    <span\n      [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n      @if (selectionType === 'tags') {\n        @if (optionsSelected$ | async; as optionTags) {\n          @for (option of optionTags; track option.value; let i = $index) {\n            <c-multi-select-tag\n              (remove)=\"handleTagRemove($event)\"\n              [disabled]=\"option.disabled ?? false\"\n              [label]=\"option.label ?? option.value?.toString()\"\n              [option]=\"option\"\n              [value]=\"option.value\"\n              class=\"form-multi-select-tag text-truncate\"\n              tabindex=\"-1\"\n            />\n          }\n        }\n      } @else if (selectionType === 'text' && !!selectedOptions.length) {\n        @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!search) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n        </span>\n      }\n      @if (search) {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n          [disabled]=\"disabled || !search\"\n          [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ disabled ? -1 : 0 }}\"\n          type=\"text\"\n        >\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button (click)=\"handleIndicatorClick($event)\"\n              [disabled]=\"disabled\"\n              class=\"form-multi-select-indicator\"\n              type=\"button\">\n      </button>\n    </div>\n  </div>\n  @if (!disabled) {\n    <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n         class=\"form-multi-select-dropdown\" role=\"menu\">\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll && multiple && !virtualScroller) {\n          <button\n            (click)=\"selectAllOptions()\"\n            class=\"form-multi-select-all\"\n            type=\"button\"\n            tabindex=\"0\"\n          >\n            {{ selectAllLabel }}\n          </button>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || isLoading()) {\n        <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n      }\n      @if (isLoading()) {\n        <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @defer (on immediate) {\n    @if ((optionsArray$ | async); as optionsArray) {\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSize\"\n        [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': minWidth(), overflowX: 'hidden' } : { 'minWidth.px': minWidth(), overflowX: 'hidden'}\"\n        maxBufferPx=\"{{itemSize * visibleItems}}\"\n        minBufferPx=\"{{itemSize * visibleItems}}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n          [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -11097,7 +11121,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         I18nPluralPipe,
                         MultiSelectService,
                         {
-                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: true
                         }
                     ], standalone: true, imports: [
                         AsyncPipe,
@@ -11117,7 +11143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         DropdownMenuDirective,
                         DropdownToggleDirective,
                         ElementCoverComponent
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperOptions\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n       class=\"form-multi-select-input-group\">\n    <span\n      [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n      @if (selectionType === 'tags') {\n        @if (optionsSelected$ | async; as optionTags) {\n          @for (option of optionTags; track option.value; let i = $index) {\n            <c-multi-select-tag\n              (remove)=\"handleTagRemove($event)\"\n              [disabled]=\"option.disabled ?? false\"\n              [label]=\"option.label ?? option.value?.toString()\"\n              [option]=\"option\"\n              [value]=\"option.value\"\n              class=\"form-multi-select-tag text-truncate\"\n              tabindex=\"-1\"\n            />\n          }\n        }\n      } @else if (selectionType === 'text' && !!selectedOptions.length) {\n        @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!search) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n        </span>\n      }\n      @if (search) {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n          [disabled]=\"disabled || !search\"\n          [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ disabled ? -1 : 0 }}\"\n          type=\"text\"\n        >\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button (click)=\"handleIndicatorClick($event)\"\n              [disabled]=\"disabled\"\n              class=\"form-multi-select-indicator\"\n              type=\"button\">\n      </button>\n    </div>\n  </div>\n  @if (!disabled) {\n    <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n         class=\"form-multi-select-dropdown\" role=\"menu\">\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll && multiple && !virtualScroller) {\n          <button\n            (click)=\"selectAllOptions()\"\n            class=\"form-multi-select-all\"\n            type=\"button\"\n            tabindex=\"0\"\n          >\n            {{ selectAllLabel }}\n          </button>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || isLoading()) {\n        <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n      }\n      @if (isLoading()) {\n        <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @defer (on immediate) {\n    @if ((optionsArray$ | async); as optionsArray) {\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSize\"\n        [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n        maxBufferPx=\"{{itemSize * visibleItems}}\"\n        minBufferPx=\"{{itemSize * visibleItems}}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n          [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperOptions\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n       class=\"form-multi-select-input-group\">\n    <span\n      [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n      @if (selectionType === 'tags') {\n        @if (optionsSelected$ | async; as optionTags) {\n          @for (option of optionTags; track option.value; let i = $index) {\n            <c-multi-select-tag\n              (remove)=\"handleTagRemove($event)\"\n              [disabled]=\"option.disabled ?? false\"\n              [label]=\"option.label ?? option.value?.toString()\"\n              [option]=\"option\"\n              [value]=\"option.value\"\n              class=\"form-multi-select-tag text-truncate\"\n              tabindex=\"-1\"\n            />\n          }\n        }\n      } @else if (selectionType === 'text' && !!selectedOptions.length) {\n        @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!search) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n        </span>\n      }\n      @if (search) {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n          [disabled]=\"disabled || !search\"\n          [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ disabled ? -1 : 0 }}\"\n          type=\"text\"\n        >\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button (click)=\"handleIndicatorClick($event)\"\n              [disabled]=\"disabled\"\n              class=\"form-multi-select-indicator\"\n              type=\"button\">\n      </button>\n    </div>\n  </div>\n  @if (!disabled) {\n    <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n         class=\"form-multi-select-dropdown\" role=\"menu\">\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll && multiple && !virtualScroller) {\n          <button\n            (click)=\"selectAllOptions()\"\n            class=\"form-multi-select-all\"\n            type=\"button\"\n            tabindex=\"0\"\n          >\n            {{ selectAllLabel }}\n          </button>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || isLoading()) {\n        <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n      }\n      @if (isLoading()) {\n        <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @defer (on immediate) {\n    @if ((optionsArray$ | async); as optionsArray) {\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSize\"\n        [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': minWidth(), overflowX: 'hidden' } : { 'minWidth.px': minWidth(), overflowX: 'hidden'}\"\n        maxBufferPx=\"{{itemSize * visibleItems}}\"\n        minBufferPx=\"{{itemSize * visibleItems}}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n          [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$2.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }], propDecorators: { allowCreateOptions: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -11212,7 +11238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 args: ['inputElement']
             }], dropdownMenu: [{
                 type: ViewChild,
-                args: ['dropdownMenu']
+                args: [DropdownMenuDirective, { read: ElementRef }]
             }], dropdown: [{
                 type: ViewChild,
                 args: [DropdownComponent, { read: ElementRef }]