@coreui/angular-pro 4.0.0-alpha.4 → 4.0.0-alpha.5

package/fesm2020/coreui-angular-pro.mjs

@@ -4340,10 +4340,10 @@ class MultiSelectOptgroupLabelComponent {
     }
 }
 MultiSelectOptgroupLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectOptgroupLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
+MultiSelectOptgroupLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-optgroup-label', template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-multi-select-optgroup-label', template: "<ng-content></ng-content>\r\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -4357,10 +4357,10 @@ class MultiSelectOptgroupComponent {
     }
 }
 MultiSelectOptgroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectOptgroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: { label: "label", disabled: "disabled" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], components: [{ type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MultiSelectOptgroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: { label: "label", disabled: "disabled" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block}\n"], components: [{ type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-optgroup', template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'c-multi-select-optgroup', template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
@@ -4473,10 +4473,10 @@ class MultiSelectOptionComponent {
     }
 }
 MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { disabled: "disabled", selected: "selected", optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div #contentDiv><ng-content></ng-content></div>\n<div *ngIf=\"!hasContent\">\n  {{label ?? value}}\n</div>\n\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.form-multi-select-option.disabled,:host.form-multi-select-option:disabled{pointer-events:all;cursor:default}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { disabled: "disabled", selected: "selected", optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.form-multi-select-option.disabled,:host.form-multi-select-option:disabled{pointer-events:all;cursor:default}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-option', template: "<div #contentDiv><ng-content></ng-content></div>\n<div *ngIf=\"!hasContent\">\n  {{label ?? value}}\n</div>\n\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.form-multi-select-option.disabled,:host.form-multi-select-option:disabled{pointer-events:all;cursor:default}\n"] }]
+            args: [{ selector: 'c-multi-select-option', template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.form-multi-select-option.disabled,:host.form-multi-select-option:disabled{pointer-events:all;cursor:default}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { disabled: [{
                 type: Input
             }], selected: [{
@@ -4555,10 +4555,10 @@ class MultiSelectTagComponent {
     }
 }
 MultiSelectTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectTagComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: { option: "option" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIfElse]=\"elseContent\"\n             [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}</ng-template>\n<ng-template #elseContent>\n  <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\" [disabled]=\"!multiselectVisible\" aria-label=\"Clear\"\n        cButtonClose class=\"form-multi-select-tag-delete close btn btn-xs\" type=\"button\">\n  <span aria-hidden=\"true\" class=\"visually-hidden\">x</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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }] });
+MultiSelectTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: { option: "option" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIfElse]=\"elseContent\"\r\n             [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}</ng-template>\r\n<ng-template #elseContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\" [disabled]=\"!multiselectVisible\" aria-label=\"Clear\"\r\n        cButtonClose class=\"form-multi-select-tag-delete close btn btn-xs\" type=\"button\">\r\n  <span aria-hidden=\"true\" class=\"visually-hidden\">x</span>\r\n</button>\r\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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-tag', template: "<ng-template [ngIfElse]=\"elseContent\"\n             [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}</ng-template>\n<ng-template #elseContent>\n  <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\" [disabled]=\"!multiselectVisible\" aria-label=\"Clear\"\n        cButtonClose class=\"form-multi-select-tag-delete close btn btn-xs\" type=\"button\">\n  <span aria-hidden=\"true\" class=\"visually-hidden\">x</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', template: "<ng-template [ngIfElse]=\"elseContent\"\r\n             [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}</ng-template>\r\n<ng-template #elseContent>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\" [disabled]=\"!multiselectVisible\" aria-label=\"Clear\"\r\n        cButtonClose class=\"form-multi-select-tag-delete close btn btn-xs\" type=\"button\">\r\n  <span aria-hidden=\"true\" class=\"visually-hidden\">x</span>\r\n</button>\r\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
             }], remove: [{
@@ -4576,10 +4576,10 @@ class MultiSelectNativeSelectComponent {
     }
 }
 MultiSelectNativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectNativeSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectNativeSelectComponent, selector: "c-multi-select-native-select", inputs: { form: "form", id: "id", multiple: "multiple", name: "name", options: "options" }, ngImport: i0, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\">\n  <option\n    *ngFor=\"let option of options\"\n    [label]=\"option.label\"\n    [selected]=\"option.selected\"\n    [value]=\"option.value\"\n    tabindex=\"-1\"\n  ></option>\n</select>\n\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MultiSelectNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectNativeSelectComponent, selector: "c-multi-select-native-select", inputs: { form: "form", id: "id", multiple: "multiple", name: "name", options: "options", disabled: "disabled" }, ngImport: i0, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\" [disabled]=\"disabled\">\r\n  <option\r\n    *ngFor=\"let option of options\"\r\n    [label]=\"option.label\"\r\n    [selected]=\"option.selected\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"disabled\"\r\n    tabindex=\"-1\"\r\n  ></option>\r\n</select>\r\n\r\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectNativeSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-native-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\">\n  <option\n    *ngFor=\"let option of options\"\n    [label]=\"option.label\"\n    [selected]=\"option.selected\"\n    [value]=\"option.value\"\n    tabindex=\"-1\"\n  ></option>\n</select>\n\n", styles: [":host{display:none}\n"] }]
+            args: [{ selector: 'c-multi-select-native-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\" [disabled]=\"disabled\">\r\n  <option\r\n    *ngFor=\"let option of options\"\r\n    [label]=\"option.label\"\r\n    [selected]=\"option.selected\"\r\n    [value]=\"option.value\"\r\n    [disabled]=\"disabled\"\r\n    tabindex=\"-1\"\r\n  ></option>\r\n</select>\r\n\r\n", styles: [":host{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
                 type: Input
             }], id: [{
@@ -4590,6 +4590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], options: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 // const flattenArray = (options: IOption[]): IOption[] => {
@@ -4607,7 +4609,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 //   });
 // };
 class MultiSelectComponent {
-    constructor(elementRef, renderer, ngZone, changeDetectorRef, viewContainerRef, focusMonitor, multiSelectService) {
+    constructor(elementRef, renderer, ngZone, changeDetectorRef, viewContainerRef, focusMonitor, multiSelectService
+    // private listenersService: ListenersService
+    ) {
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.ngZone = ngZone;
@@ -4621,7 +4625,7 @@ class MultiSelectComponent {
         this._multiple = false;
         this.nativeName = '';
         this.nativeId = '';
-        this.options = [];
+        // @Input() options = [];
         this.optionsMaxHeight = 'auto';
         this.optionsStyle = 'checkbox';
         this.placeholder = 'Select...';
@@ -4643,7 +4647,11 @@ class MultiSelectComponent {
         this._subtreeFocused = this.focusOrigin(null);
     }
     writeValue(value) {
-        this.onChange(this.value);
+        // console.log('writeValue', value)
+        if (value !== null) {
+            this.value = value;
+            // this.onChange(this.value);
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -4668,8 +4676,9 @@ class MultiSelectComponent {
     set value(value) {
         const newValue = Array.isArray(value) ? [...value] : [value ?? ''];
         if (this._value.toString() !== newValue.toString()) {
+            // console.log('set value', value)
             this._value = newValue;
-            this.writeValue(this.value);
+            this.onChange(newValue);
             this.updateNativeSelect();
             this.valueChange.emit(this.value);
         }
@@ -4700,7 +4709,8 @@ class MultiSelectComponent {
         return {
             'form-multi-select': true,
             'form-multi-select-selection-tags': this.selectionType === 'tags',
-            show: this.visible
+            show: this.visible,
+            disabled: this.disabled
         };
     }
     get tabIndex() {
@@ -4712,36 +4722,42 @@ class MultiSelectComponent {
         });
     }
     onKeyUp($event) {
-        console.log('keyup', $event.key);
-        if ($event.key === 'Escape') {
-            this.visible = false;
-            this.inputValue = '';
-            this.setFocus();
-            // this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'keyboard');
-        }
-        else if ($event.key === 'Enter') {
-            // } else {
-            this.visible = true;
-            if (!this.search) {
+        // console.log('keyup', $event.key);
+        if (!this.disabled) {
+            if ($event.key === 'Escape') {
+                this.visible = false;
+                this.inputValue = '';
                 this.setFocus();
+                // this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'keyboard');
+            }
+            else if ($event.key === 'Enter') {
+                // } else {
+                this.visible = true;
+                if (!this.search) {
+                    this.setFocus();
+                }
             }
         }
     }
     manage($event) {
-        console.log('keydown', $event.key);
-        if ($event.key === 'Enter' && $event.target === this.inputElement.nativeElement) {
-            $event.preventDefault();
+        // console.log('keydown', $event.key);
+        if (!this.disabled) {
+            if ($event.key === 'Enter' && $event.target === this.inputElement.nativeElement) {
+                $event.preventDefault();
+            }
+            this.listKeyManager.onKeydown($event);
         }
-        this.listKeyManager.onKeydown($event);
     }
     onClick($event) {
-        if (!this.visible) {
-            this.visible = !this.visible;
+        if (!this.disabled) {
+            if (!this.visible) {
+                this.visible = !this.visible;
+            }
+            this.setFocus();
         }
-        this.setFocus();
     }
     set inputValue(value) {
-        console.log('inputValue', value);
+        // console.log('inputValue', value);
         this._inputValue = value;
         // this.visible = !!value ?? this.visible;
         this.filterOptions(value);
@@ -4753,7 +4769,7 @@ class MultiSelectComponent {
         return this._subtreeFocused;
     }
     set subtreeFocused(value) {
-        this._subtreeFocused = value;
+        this._subtreeFocused = this.disabled ? false : value;
         this.visible = value === false ? false : this.visible;
     }
     focusOrigin(origin) {
@@ -4774,12 +4790,13 @@ class MultiSelectComponent {
         this.visibleOptions = this.multiSelectOptions.length;
         this.multiSelectOptions.forEach((option, index) => {
             option.optionsStyle = this.optionsStyle;
+            option.selected = option.value !== undefined ? this.value.includes(option.value) || option.selected : option.selected;
         });
-        this._selectedOptions = this.multiSelectOptions.filter((option) => option.selected);
+        this._selectedOptions = this.multiSelectOptions.filter((option) => !!option.selected);
         setTimeout(() => {
             this.value = this._selectedOptions.map(item => item.value);
         });
-        this.value = this._selectedOptions.map(item => item.value);
+        // this.value = this._selectedOptions.map(item => item.value);
         this.listKeyManager = new FocusKeyManager(this.multiSelectOptions).withHomeAndEnd();
         this.listKeyManager.skipPredicate(item => !item.visible);
         this.multiselectSubscribe();
@@ -4788,14 +4805,16 @@ class MultiSelectComponent {
     ngAfterViewInit() {
         // this.setListeners();
         this.focusMonitorSubscription = this.focusMonitor.monitor(this.elementRef, true).subscribe((origin) => this.ngZone.run(() => {
-            this.subtreeFocused = this.focusOrigin(origin);
-            this.changeDetectorRef.markForCheck();
+            if (!this.disabled) {
+                this.subtreeFocused = this.focusOrigin(origin);
+                this.changeDetectorRef.markForCheck();
+            }
         }));
     }
-    handleInputClick($event) {
-        console.log('handleInputClick', $event);
-        // this.visible = !this.visible;
-    }
+    // handleInputClick($event: MouseEvent) {
+    //   console.log('handleInputClick', $event);
+    //   // this.visible = !this.visible;
+    // }
     multiselectSubscribe(subscribe = true) {
         if (subscribe) {
             this.multiselectVisibleSubscription = this.multiSelectService.multiSelectVisible$.subscribe((visible) => {
@@ -4813,7 +4832,7 @@ class MultiSelectComponent {
                         }
                     });
                 }
-                this._selectedOptions = this.multiSelectOptions.filter((option) => option.selected);
+                this._selectedOptions = this.multiSelectOptions.filter((option) => !!option.selected);
                 this.value = this._selectedOptions.map(item => item.value);
             });
         }
@@ -4882,7 +4901,9 @@ class MultiSelectComponent {
                 return;
             }
         }
-        this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'program');
+        if (!this.disabled) {
+            this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'program');
+        }
     }
     filterOptions(value) {
         const searchString = value.toLowerCase() ?? '';
@@ -4914,11 +4935,12 @@ class MultiSelectComponent {
         this.nativeSelectRef.instance.name = this.nativeName;
         this.nativeSelectRef.instance.form = this.nativeId;
         this.nativeSelectRef.instance.options = options;
+        this.nativeSelectRef.instance.disabled = this.disabled;
         this.nativeSelectRef.instance.changeDetectorRef.detectChanges();
     }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$1.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", options: "options", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", value: "value", visible: "visible" }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "manage($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex" } }, providers: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", value: "value", visible: "visible" }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "manage($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex" } }, providers: [
         MultiSelectService,
         // ListenersService,
         {
@@ -4926,7 +4948,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => MultiSelectComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], exportAs: ["cMultiSelect"], ngImport: i0, template: "<div class=\"form-multi-select-selection\">\n  <ng-template [ngIf]=\"selectionType==='tags'\">\n    <c-multi-select-tag (remove)=\"handleTagRemove($event)\" *ngFor=\"let option of selectedOptions; index as i\"\n                        [option]=\"option\" tabindex=\"-1\"></c-multi-select-tag>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType==='text'\">\n    <span class=\"bg-light\">{{selectedOptionsText}}</span>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType==='counter'\">\n    <span>{{counterText}}</span>\n  </ng-template>\n</div>\n\n<input #inputElement\n       [(ngModel)]=\"inputValue\"\n       [disabled]=\"!search\"\n       [placeholder]=\"(selectedOptions.length === 0 && selectionType!=='counter') ? placeholder : ''\"\n       autocomplete=\"off\"\n       class=\"form-multi-select-search ms-1\" tabindex=\"0\"\n       type=\"text\">\n\n<button (click)=\"clearAllOptions($event)\"\n        *ngIf=\"cleaner && selectedOptions.length > 0\"\n        [disabled]=\"!isDropdownVisible\"\n        aria-label=\"Clear all\"\n        cButtonClose\n        class=\"form-multi-select-selection-cleaner\"\n        size=\"sm\">\n</button>\n\n<div #dropdownElement class=\"form-multi-select-dropdown\">\n  <ng-template [ngIf]=\"visibleOptions>0\" [ngIfElse]=\"optionsEmpty\">\n    <button (click)=\"selectAllOptions()\"\n            *ngIf=\"selectAll && multiple\"\n            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      <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\n", styles: [":host{display:block}:host.cdk-focused{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.form-multi-select-selection-tags{padding-top:.0625rem}\n"], components: [{ type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], exportAs: ["cMultiSelect"], ngImport: i0, template: "<div class=\"form-multi-select-selection\">\r\n  <ng-template [ngIf]=\"selectionType==='tags'\">\r\n    <c-multi-select-tag (remove)=\"handleTagRemove($event)\" *ngFor=\"let option of selectedOptions; index as i\"\r\n                        [option]=\"option\" tabindex=\"-1\"></c-multi-select-tag>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType==='text'\">\r\n    <span class=\"bg-light\">{{selectedOptionsText}}</span>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType==='counter'\">\r\n    <span>{{counterText}}</span>\r\n  </ng-template>\r\n</div>\r\n\r\n<input #inputElement\r\n       [(ngModel)]=\"inputValue\"\r\n       [disabled]=\"disabled || !search\"\r\n       [placeholder]=\"(selectedOptions.length === 0 && selectionType!=='counter') ? placeholder : ''\"\r\n       autocomplete=\"off\"\r\n       [ngClass]=\"{'form-multi-select-search ms-1': true, disabled: disabled}\" tabindex=\"{{disabled ? '-1' : '0'}}\"\r\n       type=\"text\">\r\n\r\n<button (click)=\"clearAllOptions($event)\"\r\n        *ngIf=\"cleaner && selectedOptions.length > 0\"\r\n        [disabled]=\"disabled || !isDropdownVisible\"\r\n        aria-label=\"Clear all\"\r\n        cButtonClose\r\n        class=\"form-multi-select-selection-cleaner\"\r\n        size=\"sm\">\r\n</button>\r\n\r\n<div #dropdownElement class=\"form-multi-select-dropdown\">\r\n  <ng-template [ngIf]=\"visibleOptions>0\" [ngIfElse]=\"optionsEmpty\">\r\n    <button (click)=\"selectAllOptions()\"\r\n            *ngIf=\"selectAll && multiple\"\r\n            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      <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\r\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){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 .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}\n"], components: [{ type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
@@ -4937,7 +4959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"form-multi-select-selection\">\n  <ng-template [ngIf]=\"selectionType==='tags'\">\n    <c-multi-select-tag (remove)=\"handleTagRemove($event)\" *ngFor=\"let option of selectedOptions; index as i\"\n                        [option]=\"option\" tabindex=\"-1\"></c-multi-select-tag>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType==='text'\">\n    <span class=\"bg-light\">{{selectedOptionsText}}</span>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType==='counter'\">\n    <span>{{counterText}}</span>\n  </ng-template>\n</div>\n\n<input #inputElement\n       [(ngModel)]=\"inputValue\"\n       [disabled]=\"!search\"\n       [placeholder]=\"(selectedOptions.length === 0 && selectionType!=='counter') ? placeholder : ''\"\n       autocomplete=\"off\"\n       class=\"form-multi-select-search ms-1\" tabindex=\"0\"\n       type=\"text\">\n\n<button (click)=\"clearAllOptions($event)\"\n        *ngIf=\"cleaner && selectedOptions.length > 0\"\n        [disabled]=\"!isDropdownVisible\"\n        aria-label=\"Clear all\"\n        cButtonClose\n        class=\"form-multi-select-selection-cleaner\"\n        size=\"sm\">\n</button>\n\n<div #dropdownElement class=\"form-multi-select-dropdown\">\n  <ng-template [ngIf]=\"visibleOptions>0\" [ngIfElse]=\"optionsEmpty\">\n    <button (click)=\"selectAllOptions()\"\n            *ngIf=\"selectAll && multiple\"\n            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      <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\n", styles: [":host{display:block}:host.cdk-focused{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.form-multi-select-selection-tags{padding-top:.0625rem}\n"] }]
+                    ], template: "<div class=\"form-multi-select-selection\">\r\n  <ng-template [ngIf]=\"selectionType==='tags'\">\r\n    <c-multi-select-tag (remove)=\"handleTagRemove($event)\" *ngFor=\"let option of selectedOptions; index as i\"\r\n                        [option]=\"option\" tabindex=\"-1\"></c-multi-select-tag>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType==='text'\">\r\n    <span class=\"bg-light\">{{selectedOptionsText}}</span>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType==='counter'\">\r\n    <span>{{counterText}}</span>\r\n  </ng-template>\r\n</div>\r\n\r\n<input #inputElement\r\n       [(ngModel)]=\"inputValue\"\r\n       [disabled]=\"disabled || !search\"\r\n       [placeholder]=\"(selectedOptions.length === 0 && selectionType!=='counter') ? placeholder : ''\"\r\n       autocomplete=\"off\"\r\n       [ngClass]=\"{'form-multi-select-search ms-1': true, disabled: disabled}\" tabindex=\"{{disabled ? '-1' : '0'}}\"\r\n       type=\"text\">\r\n\r\n<button (click)=\"clearAllOptions($event)\"\r\n        *ngIf=\"cleaner && selectedOptions.length > 0\"\r\n        [disabled]=\"disabled || !isDropdownVisible\"\r\n        aria-label=\"Clear all\"\r\n        cButtonClose\r\n        class=\"form-multi-select-selection-cleaner\"\r\n        size=\"sm\">\r\n</button>\r\n\r\n<div #dropdownElement class=\"form-multi-select-dropdown\">\r\n  <ng-template [ngIf]=\"visibleOptions>0\" [ngIfElse]=\"optionsEmpty\">\r\n    <button (click)=\"selectAllOptions()\"\r\n            *ngIf=\"selectAll && multiple\"\r\n            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      <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\r\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){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 .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$1.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { cleaner: [{
                 type: Input
             }], disabled: [{
@@ -4948,8 +4970,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], nativeId: [{
                 type: Input
-            }], options: [{
-                type: Input
             }], optionsMaxHeight: [{
                 type: Input
             }], optionsStyle: [{