@coreui/angular-pro 4.2.18 → 4.2.20

package/fesm2015/coreui-angular-pro.mjs

@@ -8421,9 +8421,9 @@ class MultiSelectOptionComponent {
         var _a;
         return ((_a = this.label) !== null && _a !== void 0 ? _a : this.value);
     }
-    focus(origin) {
+    focus(origin = 'program') {
         if (this.dropdownVisible) {
-            this.focusMonitor.focusVia(this.elementRef, origin !== null && origin !== void 0 ? origin : 'program', { preventScroll: false });
+            this.focusMonitor.focusVia(this.elementRef, origin, { preventScroll: false });
             this.changeDetectorRef.markForCheck();
         }
     }
@@ -8785,20 +8785,20 @@ class MultiSelectComponent {
         if ($event.key === 'Escape') {
             this.visible = false;
             this.searchValue = '';
-            this.setFocus();
+            this.setFocus('keyboard', 'onKeyUp');
             return;
         }
         if (['Enter', ' ', 'ArrowDown'].includes($event.key) && [(_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.nativeElement, this.elementRef.nativeElement].includes($event.target)) {
             this.visible = true;
             if (!this.search) {
-                this.setFocus();
+                this.setFocus('keyboard', 'onKeyUp');
             }
             return;
         }
         if ($event.key === 'Tab' && $event.target === this.elementRef.nativeElement) {
             this.visible = true;
             if (!this.search) {
-                this.setFocus();
+                this.setFocus('keyboard', 'onKeyUp');
             }
             return;
         }
@@ -8816,11 +8816,11 @@ class MultiSelectComponent {
             return;
         if (!this.visible) {
             this.visible = true;
-            this.setFocus();
+            this.setFocus('mouse', 'onClick');
         }
         else if ([this.dropdown.nativeElement].includes($event.target)) {
             this.visible = false;
-            this.setFocus();
+            this.setFocus('mouse', 'onClick');
         }
     }
     set searchValue(value) {
@@ -8854,15 +8854,13 @@ class MultiSelectComponent {
         this.setFocusMonitor(false);
     }
     ngOnChanges(changes) {
-        var _a;
         if (changes['value']) {
-            if (changes['value'].currentValue.length === 0) {
+            const valueChanges = changes['value'];
+            if (valueChanges.currentValue.length === 0) {
                 this.clearAllOptions();
             }
             else {
-                (_a = this.multiSelectOptions) === null || _a === void 0 ? void 0 : _a.forEach((option, index) => {
-                    this.selectOption(option, changes['value'].currentValue.includes(option.value));
-                });
+                this.selectOptions();
             }
             this.selectedOptionsUpdate();
         }
@@ -8887,6 +8885,7 @@ class MultiSelectComponent {
         var _a, _b, _c;
         if (subscribe) {
             this.multiSelectOptionsSubscription = this.multiSelectOptions.changes.subscribe(change => {
+                // console.log('multiSelectOptions change', change)
                 this.selectOptions();
             });
             this.multiselectVisibleSubscription = this.multiSelectService.multiSelectVisible$.subscribe((visible) => {
@@ -8904,7 +8903,7 @@ class MultiSelectComponent {
                     // close dropdown for single select (!multiple)
                     this.visible = false;
                     this.searchValue = '';
-                    this.setFocus();
+                    this.setFocus('program', 'multiselectSubscribe');
                 }
                 // todo?
                 // if (!!option) {
@@ -8922,7 +8921,7 @@ class MultiSelectComponent {
         var _a;
         (_a = this.multiSelectOptions) === null || _a === void 0 ? void 0 : _a.forEach((option, index) => {
             option.optionsStyle = this.optionsStyle;
-            option.selected = option.value !== undefined ? this.value.includes(option.value) || option.selected : option.selected;
+            option.selected = option.value !== undefined ? this.value.includes(option.value) : !!option.selected;
         });
     }
     clearAllOptions($event) {
@@ -8931,7 +8930,10 @@ class MultiSelectComponent {
                 option.selected = false;
         });
         this.selectedOptionsUpdate();
-        this.setFocus();
+        if ($event) {
+            this.searchValue = '';
+            this.setFocus('program', 'clearAllOptions');
+        }
     }
     selectAllOptions() {
         this.multiSelectOptions.forEach((option, index) => {
@@ -8941,13 +8943,16 @@ class MultiSelectComponent {
         this.selectedOptionsUpdate();
     }
     handleTagRemove($event) {
-        this.setFocus();
+        this.setFocus('program', 'handleTagRemove');
     }
-    setFocus() {
+    setFocus(origin = 'program', methodName) {
         var _a, _b;
         if (this.disabled)
             return;
-        (_a = this.focusMonitor) === null || _a === void 0 ? void 0 : _a.focusVia((_b = this.inputElement) !== null && _b !== void 0 ? _b : this.elementRef, 'program');
+        const element = (_a = this.inputElement) !== null && _a !== void 0 ? _a : this.elementRef;
+        const preventScroll = origin === 'program';
+        (_b = this.focusMonitor) === null || _b === void 0 ? void 0 : _b.focusVia(element, origin, { preventScroll: preventScroll });
+        // console.log('setFocus', origin, methodName, 'preventScroll:', preventScroll );
     }
     filterOptions(value) {
         var _a, _b, _c;
@@ -9002,11 +9007,7 @@ class MultiSelectComponent {
         }
     }
     selectOption(option, selected) {
-        this.multiSelectOptions.forEach(item => {
-            if (item === option) {
-                option.selected = selected;
-            }
-        });
+        option.selected = selected;
         this.selectedOptionsUpdate();
     }
     selectedOptionsUpdate() {
@@ -9022,6 +9023,7 @@ class MultiSelectComponent {
         var _a, _b, _c;
         if (monitor && !this.disabled) {
             this.focusMonitorSubscription = (_a = this.focusMonitor) === null || _a === void 0 ? void 0 : _a.monitor(this.elementRef, true).subscribe((origin) => {
+                // console.log('focusMonitorSubscription', this.elementRef, origin);
                 this.ngZone.run(() => {
                     var _a;
                     this.subtreeFocused = this.focusOrigin(origin);
@@ -9041,7 +9043,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         {
             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
         }
-    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\n                            (remove)=\"handleTagRemove($event)\"\n                            [option]=\"option\"\n                            tabindex=\"-1\">\n        </c-multi-select-tag>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\n        <ng-template #pluralMap>\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\n        </ng-template>\n      </ng-template>\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\n      autocomplete=\"off\"\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\n        {{ selectAllLabel }}\n      </button>\n      <div #multiselectOptionsDiv\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\n           class=\"form-multi-select-options\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
+    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\r\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\r\n    <div class=\"form-multi-select-selection\">\r\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\r\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\r\n                            (remove)=\"handleTagRemove($event)\"\r\n                            [option]=\"option\"\r\n                            tabindex=\"-1\">\r\n        </c-multi-select-tag>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\r\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\r\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\r\n        <ng-template #pluralMap>\r\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\r\n        </ng-template>\r\n      </ng-template>\r\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\r\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\r\n      <!--      </ng-template>-->\r\n    </div>\r\n\r\n    <input\r\n      #inputElement\r\n      (keydown)=\"handleSearchKeyDown($event)\"\r\n      [(ngModel)]=\"searchValue\"\r\n      [disabled]=\"disabled || !search\"\r\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\r\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\r\n      autocomplete=\"off\"\r\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\r\n      type=\"text\"\r\n    >\r\n\r\n    <button\r\n      (click)=\"clearAllOptions($event)\"\r\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\r\n      [disabled]=\"disabled || !isDropdownVisible\"\r\n      aria-label=\"Clear all\"\r\n      class=\"form-multi-select-selection-cleaner\"\r\n    ></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\r\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\r\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\r\n        {{ selectAllLabel }}\r\n      </button>\r\n      <div #multiselectOptionsDiv\r\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\r\n           class=\"form-multi-select-options\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #optionsEmpty>\r\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\r\n    </ng-template>\r\n  </div>\r\n</c-dropdown>\r\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }, { kind: "pipe", type: i1$1.I18nPluralPipe, name: "i18nPlural" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
@@ -9049,7 +9051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         {
                             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\n    <div class=\"form-multi-select-selection\">\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\n                            (remove)=\"handleTagRemove($event)\"\n                            [option]=\"option\"\n                            tabindex=\"-1\">\n        </c-multi-select-tag>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\n      </ng-template>\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\n        <ng-template #pluralMap>\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\n        </ng-template>\n      </ng-template>\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\n      <!--      </ng-template>-->\n    </div>\n\n    <input\n      #inputElement\n      (keydown)=\"handleSearchKeyDown($event)\"\n      [(ngModel)]=\"searchValue\"\n      [disabled]=\"disabled || !search\"\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\n      autocomplete=\"off\"\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\n      type=\"text\"\n    >\n\n    <button\n      (click)=\"clearAllOptions($event)\"\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\n      [disabled]=\"disabled || !isDropdownVisible\"\n      aria-label=\"Clear all\"\n      class=\"form-multi-select-selection-cleaner\"\n    ></button>\n  </div>\n\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\n        {{ selectAllLabel }}\n      </button>\n      <div #multiselectOptionsDiv\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\n           class=\"form-multi-select-options\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n    <ng-template #optionsEmpty>\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n    </ng-template>\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"picker\" [ngClass]=\"multiselectClasses\"\r\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\r\n  <div [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle #dropdownToggle=\"cDropdownToggle\">\r\n    <div class=\"form-multi-select-selection\">\r\n      <ng-template [ngIf]=\"selectionType === 'tags'\">\r\n        <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\r\n                            (remove)=\"handleTagRemove($event)\"\r\n                            [option]=\"option\"\r\n                            tabindex=\"-1\">\r\n        </c-multi-select-tag>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\r\n        <span class=\"form-multi-select-search\">{{ selectedOptionsText }}</span>\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"selectionType === 'counter'\">\r\n        <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\r\n        <ng-template #pluralMap>\r\n          <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\r\n        </ng-template>\r\n      </ng-template>\r\n      <!--      <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">-->\r\n      <!--        <span class=\"form-multi-select-search\">{{ placeholder }}</span>-->\r\n      <!--      </ng-template>-->\r\n    </div>\r\n\r\n    <input\r\n      #inputElement\r\n      (keydown)=\"handleSearchKeyDown($event)\"\r\n      [(ngModel)]=\"searchValue\"\r\n      [disabled]=\"disabled || !search\"\r\n      [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\r\n      [attr.placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : null\"\r\n      autocomplete=\"off\"\r\n      tabindex=\"{{ disabled ? '-1' : '0' }}\"\r\n      type=\"text\"\r\n    >\r\n\r\n    <button\r\n      (click)=\"clearAllOptions($event)\"\r\n      *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\r\n      [disabled]=\"disabled || !isDropdownVisible\"\r\n      aria-label=\"Clear all\"\r\n      class=\"form-multi-select-selection-cleaner\"\r\n    ></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"!disabled\" class=\"\" cDropdownMenu #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\">\r\n    <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\r\n      <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\r\n        {{ selectAllLabel }}\r\n      </button>\r\n      <div #multiselectOptionsDiv\r\n           [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\r\n           class=\"form-multi-select-options\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #optionsEmpty>\r\n      <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\r\n    </ng-template>\r\n  </div>\r\n</c-dropdown>\r\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){width:.1rem;margin-inline-start:0}:host .form-multi-select-search[size]{display:inline}:host .form-multi-select-selection-tags .form-multi-select-search{height:1.5rem}:host-context(.dark-theme)::ng-deep .form-multi-select-optgroup-label{color:var(--cui-form-multi-select-disabled-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$3.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }]; }, propDecorators: { cleaner: [{
                 type: Input
             }], disabled: [{