@coreui/angular-pro 4.4.11 → 4.4.13

package/fesm2020/coreui-angular-pro.mjs

@@ -8915,7 +8915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
-var _MultiSelectComponent_destroy$, _MultiSelectComponent_optionsReady$, _MultiSelectComponent_options, _MultiSelectComponent_value;
+var _MultiSelectComponent_destroy$, _MultiSelectComponent_optionsReady$, _MultiSelectComponent_options, _MultiSelectComponent_optionsContent, _MultiSelectComponent_value;
 // @ts-ignore
 const observeReferenceModifier = {
     name: 'observeReferenceModifier', enabled: true, phase: 'main', fn({ state }) { },
@@ -8953,6 +8953,7 @@ class MultiSelectComponent {
         this.optionsSelected$ = new BehaviorSubject([]);
         this.optionsSelected = new Map();
         this.value$ = new BehaviorSubject([]);
+        _MultiSelectComponent_optionsContent.set(this, []);
         this.onChange = (value) => { };
         this.onTouched = () => { };
         /**
@@ -9135,6 +9136,7 @@ class MultiSelectComponent {
      */
     set options(options) {
         if (Array.isArray(options)) {
+            __classPrivateFieldGet(this, _MultiSelectComponent_options, "f").clear();
             this.makeOptions(options);
         }
     }
@@ -9218,7 +9220,9 @@ class MultiSelectComponent {
         const visible = coerceBooleanProperty(value);
         if (visible !== this._visible) {
             this._visible = visible;
-            this.multiSelectService.toggleVisible(visible);
+            setTimeout(() => {
+                this.multiSelectService.toggleVisible(visible);
+            });
             if (!visible) {
                 // this.searchValue = '';
             }
@@ -9523,7 +9527,12 @@ class MultiSelectComponent {
             .pipe(takeUntil$1(__classPrivateFieldGet(this, _MultiSelectComponent_destroy$, "f")), delay(0), distinctUntilChanged((previous, current) => {
             const prev = previous.toArray().map(option => option.value);
             const curr = current.toArray().map(option => option.value);
-            return JSON.stringify(prev) === JSON.stringify(curr);
+            if (this.virtualScroller) {
+                return JSON.stringify(prev) === JSON.stringify(curr);
+            }
+            return JSON.stringify(__classPrivateFieldGet(this, _MultiSelectComponent_optionsContent, "f")) === JSON.stringify(curr);
+        }), tap(changes => {
+            __classPrivateFieldSet(this, _MultiSelectComponent_optionsContent, changes.toArray().map(option => option.value), "f");
         }))
             .subscribe(next => {
             this.visibleOptions = this.multiSelectOptionsContent?.filter((option) => option.visible).length;
@@ -9728,6 +9737,7 @@ class MultiSelectComponent {
         // if no template found, get defaultMultiSelectOptionTemplate from view
         if (!this.templates['multiSelectOptionTemplate']) {
             this.multiSelectOptionsContent = this.multiSelectOptionsView;
+            this.multiSelectOptionsContent.notifyOnChanges();
         }
         // multiSelectOptionsContent gets out of order on changes
         // do sort() and reset()
@@ -9818,14 +9828,14 @@ class MultiSelectComponent {
         this.activeOption = this.listKeyManager?.activeItem ?? null;
     }
 }
-_MultiSelectComponent_destroy$ = new WeakMap(), _MultiSelectComponent_optionsReady$ = new WeakMap(), _MultiSelectComponent_options = new WeakMap(), _MultiSelectComponent_value = new WeakMap();
+_MultiSelectComponent_destroy$ = new WeakMap(), _MultiSelectComponent_optionsReady$ = new WeakMap(), _MultiSelectComponent_options = new WeakMap(), _MultiSelectComponent_optionsContent = new WeakMap(), _MultiSelectComponent_value = new WeakMap();
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$5.FocusMonitor }, { token: MultiSelectService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiSelectComponent, isStandalone: true, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeFormId: "nativeFormId", nativeId: "nativeId", nativeName: "nativeName", options: "options", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", searchValue: "searchValue", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", size: "size", value: "value", valid: "valid", virtualScroller: "virtualScroller", visibleItems: "visibleItems", itemSize: "itemSize", itemMinWidth: "itemMinWidth", visible: "visible", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { searchValueChange: "searchValueChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.aria-multiselectable": "this.ariaMultiSelectable", "attr.tabindex": "this.tabIndex" } }, providers: [
         MultiSelectService,
         {
             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
         }
-    ], queries: [{ propertyName: "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\"\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 > 0 && options.length > 0\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container\n        *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\"></ng-container>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n\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  >\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    [selected]=\"option.selected\"\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"] }] });
+    ], 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\"\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 > 0 && options.length > 0\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container\n        *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\"></ng-container>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n\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  >\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
@@ -9851,7 +9861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         DropdownComponent,
                         DropdownToggleDirective,
                         DropdownMenuDirective,
-                    ], 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\"\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 > 0 && options.length > 0\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container\n        *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\"></ng-container>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n\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  >\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    [selected]=\"option.selected\"\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\"\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 > 0 && options.length > 0\">\n      <button (click)=\"selectAllOptions()\"\n              *ngIf=\"selectAll && multiple && !virtualScroller\"\n              class=\"form-multi-select-all\"\n      >\n        {{ selectAllLabel }}\n      </button>\n      <ng-container\n        *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\"></ng-container>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n\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  >\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"] }]
         }], 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: { cleaner: [{
                 type: Input
             }], disabled: [{