@kris701/ez-ui 1.4.11 → 1.4.12

package/fesm2022/kris701-ez-ui.mjs

@@ -5,7 +5,7 @@ import { EventEmitter, Output, Input, Component, signal, ContentChild, ViewChild
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@taiga-ui/core';
-import { TuiIcon, TuiInput, TuiButton, TuiTitle, TuiLoader, TuiDialog, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiLink, TuiHint, TuiCheckbox, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
+import { TuiIcon, TuiInput, TuiButton, TuiTitle, TuiLoader, TuiDialog, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiCheckbox, TuiLabel, TuiLink, TuiHint, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
 import * as i4$1 from '@taiga-ui/kit';
 import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiChip, TuiMultiSelect, TuiInputChip, TuiTree, TuiInputNumber, TuiPassword, TuiSelect, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, tuiCreateDefaultDayRangePeriods, TuiButtonSelect, TuiInputDateDirective, TuiCalendarRange, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
 import * as i3$3 from '@taiga-ui/addon-mobile';
@@ -19,7 +19,7 @@ import * as i2$2 from '@taiga-ui/layout';
 import { TuiHeader, TuiBlockStatus, TuiElasticContainer, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 import { marked } from 'marked';
 import Compressor from 'compressorjs';
-import { TuiAutoFocus } from '@taiga-ui/cdk';
+import { TuiAutoFocus, TuiMapperPipe } from '@taiga-ui/cdk';
 import * as i5 from '@taiga-ui/cdk/directives/item';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i3$2 from '@taiga-ui/addon-table';
@@ -3293,9 +3293,15 @@ class EzUITreeMultiSelect {
     ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
     showClear = true;
     map = new Map();
+    visMap = new Map();
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
             this.selected = changes['selected'].currentValue;
+            let newMap = new Map();
+            if (this.selected)
+                for (let item of this.selected)
+                    newMap.set(item, true);
+            this.map = newMap;
         }
     }
     stringify = (value) => value.label;
@@ -3304,7 +3310,7 @@ class EzUITreeMultiSelect {
             this.expandAllRec(option);
     }
     expandAllRec(from) {
-        this.map.set(from, true);
+        this.visMap.set(from, true);
         if (from.children && from.children.length > 0)
             for (let child of from.children)
                 this.expandAllRec(child);
@@ -3314,7 +3320,7 @@ class EzUITreeMultiSelect {
             this.collapseAllRec(option);
     }
     collapseAllRec(from) {
-        this.map.set(from, false);
+        this.visMap.set(from, false);
         if (from.children && from.children.length > 0)
             for (let child of from.children)
                 this.collapseAllRec(child);
@@ -3323,7 +3329,7 @@ class EzUITreeMultiSelect {
         let newMap = new Map();
         for (let option of this.options)
             this.expandSearchRec(option, newMap);
-        this.map = newMap;
+        this.visMap = newMap;
     }
     expandSearchRec(from, newMap) {
         let expanded = false;
@@ -3341,15 +3347,52 @@ class EzUITreeMultiSelect {
         }
         return expanded;
     }
+    onChecked(node, value) {
+        flatten(node).filter(x => x.selectable != false).forEach((item) => {
+            this.map.set(item, value);
+        });
+        this.map = new Map(this.map.entries());
+        let newSelected = [];
+        for (let key of this.map.keys())
+            if (this.map.get(key) == true)
+                newSelected.push(key);
+        this.selected = newSelected;
+        this.selectedChange.emit(this.selected);
+    }
+    getValue = (item, map) => {
+        let result = null;
+        const flat = flatten(item);
+        const key = flat[0];
+        if (key) {
+            result = !!map.get(key);
+        }
+        for (const item of flat) {
+            if (result !== !!map.get(item)) {
+                return null;
+            }
+        }
+        return result;
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITreeMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITreeMultiSelect, isStandalone: true, selector: "ezui-treemultiselect", inputs: { icon: "icon", label: "label", size: "size", options: "options", disabled: "disabled", selected: "selected", enableSearch: "enableSearch", showClear: "showClear" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputChip tuiSelectLike [(ngModel)]="selected" [placeholder]="size == 's' ? label : ''" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
+			<input
+				tuiInputChip
+				tuiSelectLike
+				[(ngModel)]="selected"
+				[placeholder]="size == 's' ? label : ''"
+				(ngModelChange)="selectedChange.emit(this.selected)"
+				[disabled]="disabled"
+			/>
 			<tui-input-chip *tuiItem/>
-			<tui-data-list *tuiDropdown tuiMultiSelectGroup >
+			<div
+				*tuiDropdown
+				tuiMultiSelectGroup
+				style="padding:.25rem;"
+			>
 				@if(enableSearch){
 					<tui-textfield tuiTextfieldSize="s" iconStart="search" style="margin-bottom:5px">
 						<input tuiInput tuiAutoFocus #field [(ngModel)]="searchValue" (click)="field.focus()" (ngModelChange)="searchChange()"/>
@@ -3367,33 +3410,39 @@ class EzUITreeMultiSelect {
 						[content]="treeContent"
 						[tuiTreeController]="false"
 						[value]="root"
-						[map]="map"
+						[map]="visMap"
 					/>
 				}
-			</tui-data-list>
+			</div>
 		</tui-textfield>
 
-		<ng-template #treeContent let-node="node" let-value>
-			<div class="wrapper">
-				<button
-					tuiOption
-					[value]="value"
-					[disabled]="value.selectable === false"
-					[style.opacity]="!enableSearch || (searchValue() == '' || value.label.toLowerCase().includes(searchValue().toLowerCase())) ? (value.selectable === false ? 0.5 : 1) : 0.2"
-				>
-					@if(itemTemplate){
-						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value  }"></ng-container>
-					}
-					@else {
-						@if (value.icon) {
-							<tui-icon class="t-icon" [icon]="value.icon"/>
-						}
-						{{ value.label }}
+		<ng-template #treeContent let-item>
+			@let isDisabled = item.selectable === false && (!item.children || item.children.length == 0);
+			<label
+				tuiLabel
+				[class]="{'wrapper':true, 'wrapperActive':!isDisabled}"
+				[style.opacity]="!enableSearch || (searchValue() == '' || item.label.toLowerCase().includes(searchValue().toLowerCase())) ? (isDisabled ? 0.8 : 1) : 0.2"
+			>
+				<input
+					size="s"
+					tuiCheckbox
+					type="checkbox"
+					[disabled]="isDisabled"
+					[ngModel]="item | tuiMapper: getValue : map"
+					(ngModelChange)="onChecked(item, $event)"
+				/>
+				@if(itemTemplate){
+					<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+				}
+				@else {
+					@if (item.icon) {
+						<tui-icon class="t-icon" [icon]="item.icon"/>
 					}
-				</button>
-			</div>
+					<small>{{ item.label }}</small>
+				}
+			</label>
 		</ng-template>
-    `, isInline: true, styles: [".toolbar{display:flex;flex-direction:row;gap:5px}.wrapper{display:flex;align-items:center;width:100%}.wrapper button{width:100%}.t-icon:before{font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i5.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "component", type: i3$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i4$1.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i4$1.TuiInputChipComponent, selector: "tui-input-chip", inputs: ["editable"] }, { kind: "directive", type: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i4$1.TuiTreeComponent, selector: "tui-tree", inputs: ["value", "trackBy", "content"] }, { kind: "directive", type: i4$1.TuiTreeChildren, selector: "tui-tree[childrenHandler]", inputs: ["childrenHandler"] }, { kind: "directive", type: i4$1.TuiTreeControllerDirective, selector: "[tuiTreeController][map]", inputs: ["tuiTreeController", "map"], outputs: ["toggled"], exportAs: ["tuiTreeController"] }] });
+    `, isInline: true, styles: [".toolbar{display:flex;flex-direction:row;gap:5px}.wrapper{display:flex;flex-direction:row;align-items:center;width:100%!important;margin:3px;padding:2px;border-radius:var(--tui-radius-s)}.wrapper input{line-height:100%!important}.wrapperActive{cursor:pointer}.wrapperActive:hover{background:var(--tui-background-neutral-1)}.t-icon:before{font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "directive", type: i5.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "component", type: i3$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i4$1.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i4$1.TuiInputChipComponent, selector: "tui-input-chip", inputs: ["editable"] }, { kind: "directive", type: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i4$1.TuiTreeComponent, selector: "tui-tree", inputs: ["value", "trackBy", "content"] }, { kind: "directive", type: i4$1.TuiTreeChildren, selector: "tui-tree[childrenHandler]", inputs: ["childrenHandler"] }, { kind: "directive", type: i4$1.TuiTreeControllerDirective, selector: "[tuiTreeController][map]", inputs: ["tuiTreeController", "map"], outputs: ["toggled"], exportAs: ["tuiTreeController"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITreeMultiSelect, decorators: [{
             type: Component,
@@ -3413,15 +3462,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiInput,
                         TuiIcon,
                         TuiButton,
-                        TuiTree
+                        TuiTree,
+                        TuiLabel,
+                        TuiCheckbox,
+                        TuiMapperPipe
                     ], template: `
 		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputChip tuiSelectLike [(ngModel)]="selected" [placeholder]="size == 's' ? label : ''" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
+			<input
+				tuiInputChip
+				tuiSelectLike
+				[(ngModel)]="selected"
+				[placeholder]="size == 's' ? label : ''"
+				(ngModelChange)="selectedChange.emit(this.selected)"
+				[disabled]="disabled"
+			/>
 			<tui-input-chip *tuiItem/>
-			<tui-data-list *tuiDropdown tuiMultiSelectGroup >
+			<div
+				*tuiDropdown
+				tuiMultiSelectGroup
+				style="padding:.25rem;"
+			>
 				@if(enableSearch){
 					<tui-textfield tuiTextfieldSize="s" iconStart="search" style="margin-bottom:5px">
 						<input tuiInput tuiAutoFocus #field [(ngModel)]="searchValue" (click)="field.focus()" (ngModelChange)="searchChange()"/>
@@ -3439,33 +3502,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						[content]="treeContent"
 						[tuiTreeController]="false"
 						[value]="root"
-						[map]="map"
+						[map]="visMap"
 					/>
 				}
-			</tui-data-list>
+			</div>
 		</tui-textfield>
 
-		<ng-template #treeContent let-node="node" let-value>
-			<div class="wrapper">
-				<button
-					tuiOption
-					[value]="value"
-					[disabled]="value.selectable === false"
-					[style.opacity]="!enableSearch || (searchValue() == '' || value.label.toLowerCase().includes(searchValue().toLowerCase())) ? (value.selectable === false ? 0.5 : 1) : 0.2"
-				>
-					@if(itemTemplate){
-						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value  }"></ng-container>
-					}
-					@else {
-						@if (value.icon) {
-							<tui-icon class="t-icon" [icon]="value.icon"/>
-						}
-						{{ value.label }}
+		<ng-template #treeContent let-item>
+			@let isDisabled = item.selectable === false && (!item.children || item.children.length == 0);
+			<label
+				tuiLabel
+				[class]="{'wrapper':true, 'wrapperActive':!isDisabled}"
+				[style.opacity]="!enableSearch || (searchValue() == '' || item.label.toLowerCase().includes(searchValue().toLowerCase())) ? (isDisabled ? 0.8 : 1) : 0.2"
+			>
+				<input
+					size="s"
+					tuiCheckbox
+					type="checkbox"
+					[disabled]="isDisabled"
+					[ngModel]="item | tuiMapper: getValue : map"
+					(ngModelChange)="onChecked(item, $event)"
+				/>
+				@if(itemTemplate){
+					<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+				}
+				@else {
+					@if (item.icon) {
+						<tui-icon class="t-icon" [icon]="item.icon"/>
 					}
-				</button>
-			</div>
+					<small>{{ item.label }}</small>
+				}
+			</label>
 		</ng-template>
-    `, styles: [".toolbar{display:flex;flex-direction:row;gap:5px}.wrapper{display:flex;align-items:center;width:100%}.wrapper button{width:100%}.t-icon:before{font-size:1rem}\n"] }]
+    `, styles: [".toolbar{display:flex;flex-direction:row;gap:5px}.wrapper{display:flex;flex-direction:row;align-items:center;width:100%!important;margin:3px;padding:2px;border-radius:var(--tui-radius-s)}.wrapper input{line-height:100%!important}.wrapperActive{cursor:pointer}.wrapperActive:hover{background:var(--tui-background-neutral-1)}.t-icon:before{font-size:1rem}\n"] }]
         }], propDecorators: { itemTemplate: [{
                 type: ContentChild,
                 args: ['itemTemplate', { static: false }]
@@ -3488,6 +3557,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }], showClear: [{
                 type: Input
             }] } });
+function flatten(item) {
+    return item.children
+        ? item.children.map(flatten).reduce((arr, item) => [...arr, ...item], [])
+        : [item];
+}
 
 class EzUINumberInput {
     icon = '';
@@ -4257,11 +4331,12 @@ class EzUITreeSelect {
 
 		<ng-template #treeContent let-node="node" let-value>
 			<div class="wrapper">
+				@let isDisabled = value.selectable === false || (value.children && value.children.length > 0);
 				<button
 					tuiOption
 					[value]="value"
-					[disabled]="value.selectable === false"
-					[style.opacity]="!enableSearch || (searchValue() == '' || value.label.toLowerCase().includes(searchValue().toLowerCase())) ? (value.selectable === false ? 0.5 : 1) : 0.2"
+					[disabled]="isDisabled"
+					[style.opacity]="!enableSearch || (searchValue() == '' || value.label.toLowerCase().includes(searchValue().toLowerCase())) ? (isDisabled ? 0.8 : 1) : 0.2"
 				>
 					@if(itemTemplate){
 						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value  }"></ng-container>
@@ -4334,11 +4409,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 		<ng-template #treeContent let-node="node" let-value>
 			<div class="wrapper">
+				@let isDisabled = value.selectable === false || (value.children && value.children.length > 0);
 				<button
 					tuiOption
 					[value]="value"
-					[disabled]="value.selectable === false"
-					[style.opacity]="!enableSearch || (searchValue() == '' || value.label.toLowerCase().includes(searchValue().toLowerCase())) ? (value.selectable === false ? 0.5 : 1) : 0.2"
+					[disabled]="isDisabled"
+					[style.opacity]="!enableSearch || (searchValue() == '' || value.label.toLowerCase().includes(searchValue().toLowerCase())) ? (isDisabled ? 0.8 : 1) : 0.2"
 				>
 					@if(itemTemplate){
 						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value  }"></ng-container>