@coreui/angular-pro 4.5.6 → 4.5.7

package/fesm2022/coreui-angular-pro.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, ChangeDetectionStrategy, inject, DestroyRef, signal, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Pipe, ViewChildren, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, ChangeDetectionStrategy, inject, DestroyRef, signal, effect, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$2 from '@angular/common';
 import { NgTemplateOutlet, NgIf, NgClass, NgForOf, AsyncPipe, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, DOCUMENT, CommonModule, I18nPluralPipe, isPlatformBrowser } from '@angular/common';
@@ -9,7 +9,7 @@ import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
 import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter, tap, combineLatestWith, distinctUntilChanged, delay, debounceTime, map, take } from 'rxjs/operators';
+import { filter, distinctUntilChanged, tap, debounceTime, map, delay, combineLatestWith, take } from 'rxjs/operators';
 import { isValid, format } from 'date-fns';
 import * as i1$3 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -8393,9 +8393,6 @@ class MultiSelectOptionComponent {
         this.focusMonitor = focusMonitor;
         this.multiSelectService = multiSelectService;
         this.#destroyRef = inject(DestroyRef);
-        this.#active$ = new Subject();
-        this.#selected$ = new Subject();
-        this.#value$ = new Subject();
         /**
          * Option style
          * @type ('checkbox' | 'text')
@@ -8409,24 +8406,37 @@ class MultiSelectOptionComponent {
          */
         this.visible = true;
         this.#disabled = false;
-        this.#selected = false;
+        this.#selected = signal(undefined);
+        this.#selectedEffect = effect(() => {
+            const value = this.#value();
+            const selected = this.#selected();
+            if (value && selected !== undefined) {
+                selected ? this.multiSelectService.selectionModel?.select(value) : this.multiSelectService.selectionModel?.deselect(value);
+                this.ariaSelected = selected;
+                this.selectedChange.emit(selected);
+                this.changeDetectorRef.markForCheck();
+            }
+        });
         /**
          * Emits option selected change
          * @type boolean
          */
         this.selectedChange = new EventEmitter();
+        this.#value = signal(undefined);
         this.hasContent = true;
-        this.#dropdownVisible = false;
-        this.#active = false;
+        this.#dropdownVisible = signal(false);
+        // get active() {
+        //   return this.#active() && this.visible;
+        // }
+        this.#active = signal(false);
+        this.#activeEffect = effect(() => {
+            this.tabIndex = this.#active() && this.visible ? 0 : -1;
+        });
         this.#focused = false;
         this.focusChange = new EventEmitter();
         this.#tabIndex = -1;
         this.#ariaSelected = undefined;
-        this.setSubscriptions();
     }
-    #active$;
-    #selected$;
-    #value$;
     /**
      * Option disabled.
      * @type boolean
@@ -8445,43 +8455,44 @@ class MultiSelectOptionComponent {
      * @default false
      */
     set selected(value) {
-        const selected = coerceBooleanProperty(value);
-        if (this.#selected !== selected) {
-            this.#selected = selected;
-            this.#selected$.next(selected);
+        if (value !== undefined) {
+            const selected = coerceBooleanProperty(value);
+            if (this.#selected() !== selected) {
+                this.#selected.set(selected);
+            }
         }
     }
     get selected() {
-        return this.#selected;
+        return this.#selected();
     }
     #selected;
+    #selectedEffect;
     /**
      * Option value.
      * @type string
      * @default undefined
      */
     set value(value) {
-        if (this.#value !== value) {
-            this.#value = value;
-            this.#value$.next(value);
+        if (this.#value() !== value) {
+            this.#value.set(value);
         }
     }
     get value() {
-        return this.#value;
+        return this.#value();
     }
     #value;
     #dropdownVisible;
     set active(value) {
         const active = coerceBooleanProperty(value) && this.visible && !this.disabled;
-        if (this.#active !== active) {
-            this.#active = active;
-            this.#active$.next(active);
+        if (this.#active() !== active) {
+            this.#active.set(active);
         }
     }
-    get active() {
-        return this.#active && this.visible;
-    }
+    // get active() {
+    //   return this.#active() && this.visible;
+    // }
     #active;
+    #activeEffect;
     #focused;
     get role() {
         return 'option';
@@ -8489,11 +8500,11 @@ class MultiSelectOptionComponent {
     get hostClasses() {
         return {
             'form-multi-select-option': true,
-            'form-multi-selected': this.selected,
+            'form-multi-selected': this.#selected(),
             [`form-multi-select-option-with-${this.optionsStyle}`]: !!this.optionsStyle,
             disabled: this.disabled,
             'd-none': !this.visible,
-            active: this.active,
+            active: this.#active(),
             focused: this.#focused
         };
     }
@@ -8502,7 +8513,9 @@ class MultiSelectOptionComponent {
         return (this.disabled || !this.visible) ? -1 : this.#tabIndex;
     }
     set tabIndex(tabindex) {
-        this.#tabIndex = tabindex;
+        setTimeout(() => {
+            this.#tabIndex = tabindex;
+        });
     }
     #tabIndex;
     get ariaDisabled() {
@@ -8532,21 +8545,22 @@ class MultiSelectOptionComponent {
         this.#focused = true;
     }
     onKeyUp($event) {
-        if (this.#dropdownVisible) {
+        if (this.#dropdownVisible()) {
             if (['Enter', 'Space'].includes($event.code)) {
                 $event.stopImmediatePropagation();
                 $event.preventDefault();
-                this.selected = this.disabled ? this.selected : !this.selected;
+                this.selected = this.disabled ? this.#selected() : !this.#selected();
                 this.focus('keyboard');
             }
         }
     }
     onClick($event) {
         $event.stopPropagation();
-        this.selected = this.disabled ? this.selected : !this.selected;
+        this.selected = this.disabled ? this.#selected() : !this.#selected();
         this.focus('mouse');
     }
     ngAfterViewInit() {
+        this.setSubscriptions();
         setTimeout(() => {
             this.hasContent = !!this.contentDiv?.nativeElement.childNodes.length;
             if (!this.hasContent) {
@@ -8563,17 +8577,19 @@ class MultiSelectOptionComponent {
         if (this.value === undefined) {
             this.value = this.label?.trim() || '...';
         }
-        setTimeout(() => {
+        if (!this.changeDetectorRef.destroyed) {
+            // setTimeout(() => {
             this.selected = this.isSelected(this.value);
             this.changeDetectorRef.markForCheck();
-        });
+            // });
+        }
     }
     /** 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 && !this.disabled) {
+        if (this.#dropdownVisible() && !this.disabled) {
             this.focusMonitor.focusVia(this.elementRef.nativeElement, origin, { preventScroll: false });
             this.multiSelectService.focusChange(this);
             this.changeDetectorRef.markForCheck();
@@ -8582,70 +8598,24 @@ class MultiSelectOptionComponent {
     }
     setSubscriptions() {
         this.multiSelectService.multiSelectVisible$
-            .pipe(takeUntilDestroyed())
-            .subscribe(visible => {
-            this.#dropdownVisible = visible;
-        });
-        this.#selected$
-            .pipe(tap(selected => {
-            if (selected) {
-                if (this.value && !this.isSelected(this.value)) {
-                    this.multiSelectService.selectionModel?.select(this.value);
-                }
-            }
-            else {
-                if (this.value && this.isSelected(this.value)) {
-                    this.multiSelectService.selectionModel?.deselect(this.value);
-                }
-            }
-        }), 
-        // delay(0),
-        combineLatestWith(this.#value$), takeUntilDestroyed())
-            .subscribe(([selected, value]) => {
-            if (selected) {
-                if (!this.isSelected(this.value)) {
-                    this.multiSelectService.selectionModel?.select(this.value);
-                }
-            }
-            else {
-                if (this.isSelected(this.value)) {
-                    this.multiSelectService.selectionModel?.deselect(this.value);
-                }
-            }
-            this.ariaSelected = selected;
-            this.selectedChange.emit(selected);
-            this.changeDetectorRef.markForCheck();
-        });
-        setTimeout(() => {
-            if (!this.changeDetectorRef.destroyed) {
-                this.multiSelectService.selectionModel.changed
-                    .pipe(filter(change => {
-                    return change.added.includes(this.value) || change.removed.includes(this.value);
-                }), tap(change => {
-                    this.#selected = change.added.includes(this.value);
-                    this.changeDetectorRef.markForCheck();
-                }), takeUntilDestroyed(this.#destroyRef))
-                    .subscribe();
-            }
-        });
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(this.#dropdownVisible.set);
         this.multiSelectService.multiSelectFocus$
-            .pipe(distinctUntilChanged(), takeUntilDestroyed())
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.#destroyRef))
             .subscribe((option) => {
             this.active = this.value === option.value;
         });
-        this.#active$
-            .pipe(distinctUntilChanged(), delay(0), takeUntilDestroyed())
-            .subscribe(active => {
-            this.tabIndex = active ? 0 : -1;
-        });
-        this.#value$
-            .pipe(distinctUntilChanged(), delay(0), takeUntilDestroyed())
-            .subscribe(value => {
-            this.#selected = this.isSelected(value);
-        });
+        if (!this.changeDetectorRef.destroyed) {
+            this.multiSelectService.selectionModel.changed
+                .pipe(filter(change => change.added.includes(this.value) || change.removed.includes(this.value)), tap(change => {
+                this.selected = change.added.includes(this.value);
+                this.changeDetectorRef.markForCheck();
+            }), takeUntilDestroyed(this.#destroyRef))
+                .subscribe();
+        }
     }
     isSelected(value = this.value) {
-        return this.multiSelectService.selectionModel?.isSelected(value) ?? this.selected ?? false;
+        return (this.#selected() || this.multiSelectService.selectionModel?.isSelected(value)) ?? false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$5.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: MultiSelectOptionComponent, isStandalone: true, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", text: "text", visible: "visible", disabled: "disabled", selected: "selected", value: "value", active: "active", role: "role" }, outputs: { selectedChange: "selectedChange", focusChange: "focusChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocus()", "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "role": "this.role", "class": "this.hostClasses", "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>\n  <ng-content></ng-content>\n</div>\n<div *ngIf=\"!hasContent\">\n  {{text ?? label ?? value}}\n</div>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}:host.active{border-radius:var(--cui-form-multi-select-option-indicator-border-radius, .375rem);box-shadow:0 0 .125rem 0 var(--cui-gray-400)}:host.focused,:host :focus-visible{box-shadow:0 0 0 .125rem #321fdb40;outline:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -8804,11 +8774,11 @@ class MultiSelectTagComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MultiSelectTagComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: MultiSelectTagComponent, isStandalone: true, selector: "c-multi-select-tag", inputs: { option: "option", disabled: "disabled", label: "label", value: "value" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<!--<ng-template [ngIfElse]=\"elseContent\"-->\n<!--             [ngIf]=\"!!option\">{{label ?? value ?? '???'}}-->\n<!--</ng-template>-->\n<!--<ng-template #elseContent>-->\n<!--  <ng-content></ng-content>-->\n<!--</ng-template>-->\n{{label ?? value ?? '???'}}\n<button (click)=\"handleRemove($event)\" *ngIf=\"!disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? true) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: MultiSelectTagComponent, isStandalone: true, selector: "c-multi-select-tag", inputs: { option: "option", disabled: "disabled", label: "label", value: "value" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "{{label ?? value ?? '???'}}\n<button (click)=\"handleRemove($event)\" *ngIf=\"!disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? true) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MultiSelectTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-tag', standalone: true, imports: [NgIf, AsyncPipe], template: "<!--<ng-template [ngIfElse]=\"elseContent\"-->\n<!--             [ngIf]=\"!!option\">{{label ?? value ?? '???'}}-->\n<!--</ng-template>-->\n<!--<ng-template #elseContent>-->\n<!--  <ng-content></ng-content>-->\n<!--</ng-template>-->\n{{label ?? value ?? '???'}}\n<button (click)=\"handleRemove($event)\" *ngIf=\"!disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? true) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"] }]
+            args: [{ selector: 'c-multi-select-tag', standalone: true, imports: [NgIf, AsyncPipe], template: "{{label ?? value ?? '???'}}\n<button (click)=\"handleRemove($event)\" *ngIf=\"!disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? true) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"] }]
         }], ctorParameters: function () { return [{ type: MultiSelectService }]; }, propDecorators: { option: [{
                 type: Input
             }], disabled: [{
@@ -9056,6 +9026,7 @@ class MultiSelectComponent {
         this._subtreeFocused = this.focusOrigin(null);
         this.activeOption = null;
         this.differ = this.iterableDiffers.find(this.#value).create();
+        this.multiSelectService.setSelectionModel(this.multiple);
     }
     #destroy$;
     #optionsReady$;
@@ -9124,6 +9095,7 @@ class MultiSelectComponent {
      */
     set multiple(value) {
         this._multiple = coerceBooleanProperty(value);
+        this.multiSelectService.setSelectionModel(this._multiple);
     }
     get multiple() {
         return this._multiple;
@@ -9395,7 +9367,6 @@ class MultiSelectComponent {
         return !!origin;
     }
     ngOnInit() {
-        this.multiSelectService.setSelectionModel(this.multiple);
         this.multiSelectService.selectionModel.changed
             .pipe(filter(() => !this.multiple), delay(0), tap(change => {
             if (change.added.length) {
@@ -9827,7 +9798,7 @@ class MultiSelectComponent {
             {
                 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]=\"popperjsOptions\"\n            class=\"picker\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle>\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <ng-container *ngIf=\"(optionsSelected$ | async) as optionTags\">\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            *ngFor=\"let option of optionTags; index as i\"\n            [disabled]=\"option.disabled ?? false\"\n            [label]=\"option.label ?? option.value\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag\"\n            tabindex=\"-1\">\n          </c-multi-select-tag>\n        </ng-container>\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      (valueChange)=\"handleSearchValueChange($event)\"\n      [attr.placeholder]=\"optionsSelected.size === 0 && selectionType !== 'counter' ? placeholder : null\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [ngModel]=\"searchValue\"\n      [value]=\"searchValue\"\n      autocomplete=\"off\"\n      cMultiSelectSearch\n      size=\"3\"\n      tabindex=\"{{ disabled ? -1 : 0 }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && optionsSelected.size > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" *ngIf=\"!disabled\" [visible]=\"dropdown.visible\" cDropdownMenu>\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"(visibleOptions() && options.length > 0) || loading\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n              tabindex=\"0\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n    <ng-template [ngIf]=\"loading\">\n      <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n    </ng-template>\n  </div>\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  <cdk-virtual-scroll-viewport\n    #scrollViewport\n    (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n    *ngIf=\"optionsArray$ | async as optionsArray\"\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  >\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    </ng-container>\n  </cdk-virtual-scroll-viewport>\n\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\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\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", 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-block}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}: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-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPluralPipe, name: "i18nPlural" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { 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", "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: 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: ["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]=\"popperjsOptions\"\n            class=\"picker\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle>\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <ng-container *ngIf=\"(optionsSelected$ | async) as optionTags\">\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            *ngFor=\"let option of optionTags; index as i\"\n            [disabled]=\"option.disabled ?? false\"\n            [label]=\"option.label ?? option.value\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag\"\n            tabindex=\"-1\">\n          </c-multi-select-tag>\n        </ng-container>\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      (valueChange)=\"handleSearchValueChange($event)\"\n      [attr.placeholder]=\"optionsSelected.size === 0 && selectionType !== 'counter' ? placeholder : null\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [ngModel]=\"searchValue\"\n      [value]=\"searchValue\"\n      autocomplete=\"off\"\n      cMultiSelectSearch\n      size=\"3\"\n      tabindex=\"{{ disabled ? -1 : 0 }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && optionsSelected.size > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" *ngIf=\"!disabled\" [visible]=\"dropdown.visible\" cDropdownMenu>\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"(visibleOptions() && options.length > 0) || loading\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n              tabindex=\"0\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n    <ng-template [ngIf]=\"loading\">\n      <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n    </ng-template>\n  </div>\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  <cdk-virtual-scroll-viewport\n    #scrollViewport\n    (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n    *ngIf=\"optionsArray$ | async as optionsArray\"\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  >\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    </ng-container>\n  </cdk-virtual-scroll-viewport>\n\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\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\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", 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-block}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}: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}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPluralPipe, name: "i18nPlural" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { 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", "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: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -9855,7 +9826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                         DropdownToggleDirective,
                         DropdownMenuDirective,
                         ElementCoverComponent
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperjsOptions\"\n            class=\"picker\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle>\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <ng-container *ngIf=\"(optionsSelected$ | async) as optionTags\">\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            *ngFor=\"let option of optionTags; index as i\"\n            [disabled]=\"option.disabled ?? false\"\n            [label]=\"option.label ?? option.value\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag\"\n            tabindex=\"-1\">\n          </c-multi-select-tag>\n        </ng-container>\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      (valueChange)=\"handleSearchValueChange($event)\"\n      [attr.placeholder]=\"optionsSelected.size === 0 && selectionType !== 'counter' ? placeholder : null\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [ngModel]=\"searchValue\"\n      [value]=\"searchValue\"\n      autocomplete=\"off\"\n      cMultiSelectSearch\n      size=\"3\"\n      tabindex=\"{{ disabled ? -1 : 0 }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && optionsSelected.size > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" *ngIf=\"!disabled\" [visible]=\"dropdown.visible\" cDropdownMenu>\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"(visibleOptions() && options.length > 0) || loading\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n              tabindex=\"0\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n    <ng-template [ngIf]=\"loading\">\n      <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n    </ng-template>\n  </div>\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  <cdk-virtual-scroll-viewport\n    #scrollViewport\n    (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n    *ngIf=\"optionsArray$ | async as optionsArray\"\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  >\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    </ng-container>\n  </cdk-virtual-scroll-viewport>\n\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\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\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", 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-block}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}: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-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperjsOptions\"\n            class=\"picker\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle>\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <ng-container *ngIf=\"(optionsSelected$ | async) as optionTags\">\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            *ngFor=\"let option of optionTags; index as i\"\n            [disabled]=\"option.disabled ?? false\"\n            [label]=\"option.label ?? option.value\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag\"\n            tabindex=\"-1\">\n          </c-multi-select-tag>\n        </ng-container>\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      (valueChange)=\"handleSearchValueChange($event)\"\n      [attr.placeholder]=\"optionsSelected.size === 0 && selectionType !== 'counter' ? placeholder : null\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [ngModel]=\"searchValue\"\n      [value]=\"searchValue\"\n      autocomplete=\"off\"\n      cMultiSelectSearch\n      size=\"3\"\n      tabindex=\"{{ disabled ? -1 : 0 }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && optionsSelected.size > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n  <div #dropdownMenu=\"cDropdownMenu\" *ngIf=\"!disabled\" [visible]=\"dropdown.visible\" cDropdownMenu>\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"(visibleOptions() && options.length > 0) || loading\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n              tabindex=\"0\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n    <ng-template [ngIf]=\"loading\">\n      <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n    </ng-template>\n  </div>\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  <cdk-virtual-scroll-viewport\n    #scrollViewport\n    (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n    *ngIf=\"optionsArray$ | async as optionsArray\"\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  >\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    </ng-container>\n  </cdk-virtual-scroll-viewport>\n\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\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\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", 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-block}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}: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}: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$5.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }]; }, propDecorators: { allowCreateOptions: [{
                 type: Input
             }], cleaner: [{