cmat 0.0.87 → 0.0.88

package/fesm2022/cmat-components-cascade.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, signal, Input, ViewChild, HostBinding } from '@angular/core';
-import { FormControl, NgControl } from '@angular/forms';
-import { MAT_BOTTOM_SHEET_DATA, MatBottomSheet } from '@angular/material/bottom-sheet';
+import { inject, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, input, viewChild, DestroyRef, effect, Input } from '@angular/core';
+import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef, MatBottomSheet } from '@angular/material/bottom-sheet';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
@@ -10,15 +9,15 @@ import * as i3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import { isUndefined, isNull, isNil } from 'lodash-es';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import * as i3$1 from '@angular/cdk/overlay';
-import { Overlay, OverlayConfig, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i4$1 from '@angular/cdk/portal';
-import { PortalModule } from '@angular/cdk/portal';
+import { CdkPortal, PortalModule } from '@angular/cdk/portal';
 import { NgClass } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl } from '@angular/forms';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import * as i2$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -27,135 +26,191 @@ import { map } from 'rxjs/operators';
 
 class CmatCascadeBottomSheetComponent {
     constructor() {
-        this.root = inject(MAT_BOTTOM_SHEET_DATA);
-        this.selected = new FormControl(0);
-        this.labels = [];
-        this.root.steps.forEach((items) => {
-            const steps = items.filter((item) => item.active);
-            if (steps[0] && !isUndefined(steps[0].label)) {
-                this.labels.push(steps[0].label);
-            }
-        });
+        this.data = inject(MAT_BOTTOM_SHEET_DATA);
+        this.selectedTab = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+        this.labels = computed(() => {
+            return this.data.steps().map((step) => {
+                const activeItem = step.find((item) => item.active);
+                return activeItem?.label ?? '选择';
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        this._bottomSheetRef = inject((MatBottomSheetRef));
+        this.resetTabIndex();
+    }
+    resetTabIndex() {
+        const hasValue = this.data.currentLabels().length > 0;
+        this.selectedTab.set(hasValue ? this.data.currentLabels().length - 1 : 0);
     }
     clickHandle(event) {
         event.stopPropagation();
     }
-    select(disabled, label) {
+    dismiss() {
+        this._bottomSheetRef.dismiss();
+    }
+    select(disabled) {
         if (!disabled) {
-            if (!isNull(this.selected.value)) {
-                this.labels[this.selected.value] = label;
-                this.labels = this.labels.slice(0, this.selected.value + 1);
+            const currentIndex = this.selectedTab();
+            if (currentIndex < this.data.steps().length - 1) {
+                this.selectedTab.set(currentIndex + 1);
             }
-            this.selected.setValue(this.root.steps.length - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatCascadeBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatCascadeBottomSheetComponent, isStandalone: true, selector: "cmat-cascade-bottom-sheet", exportAs: ["cmatCascadeBottomSheet"], ngImport: i0, template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\r\n  <div class=\"sheet-header flex items-center\">\r\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\r\n    <button type=\"button\" matIconButton  (click)=\"root.bottomSheetRef.dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\r\n    @for (menuItem of root.steps; track step; let step = $index) {\r\n      <mat-tab\r\n        [label]=\"labels[step] || '\u9009\u62E9'\">\r\n        <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\">\r\n          @for (listItem of menuItem; track i; let i = $index) {\r\n            <mat-list-item class=\"menu-item\"\r\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled ?? false, listItem.label ?? '');\">\r\n              <div matLine>{{listItem.label}}</div>\r\n            </mat-list-item>\r\n          }\r\n        </mat-list>\r\n      </mat-tab>\r\n    }\r\n  </mat-tab-group>\r\n</div>", styles: [".cmat-cascade-bottom-sheet{padding:0;margin:-8px -16px}.cmat-cascade-bottom-sheet .sheet-header{display:flex;flex:1 1 0%;align-items:center;font-size:1rem;border-bottom-width:1px;padding:12px 16px}.cmat-cascade-bottom-sheet .sheet-header .sheet-title{margin:0;padding:0;letter-spacing:.05rem;text-align:center;flex-grow:1}.cmat-cascade-bottom-sheet .menu-list{vertical-align:top;box-sizing:border-box;margin:0;padding:0;width:100%;overflow:hidden;position:relative;height:204px}.cmat-cascade-bottom-sheet .menu-item{padding:0 16px;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important;font-size:14px;line-height:3em}.cmat-cascade-bottom-sheet .menu-item.disabled{cursor:not-allowed!important;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCascadeBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatCascadeBottomSheetComponent, isStandalone: true, selector: "cmat-cascade-bottom-sheet", exportAs: ["cmatCascadeBottomSheet"], ngImport: i0, template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\r\n  <div class=\"sheet-header flex items-center\">\r\n    <p class=\"sheet-title\">{{data.placeholder}}</p>\r\n    <button type=\"button\" matIconButton (click)=\"dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-tab-group [selectedIndex]=\"selectedTab()\" (selectedIndexChange)=\"selectedTab.set($event)\">\r\n    @for (menuItem of data.steps(); track $index; let step = $index) {\r\n      <mat-tab [label]=\"labels()[step]\">\r\n        <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\">\r\n          @for (listItem of menuItem; track listItem.value; let i = $index) {\r\n            <mat-list-item class=\"menu-item\"\r\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n              (click)=\"data.selectHandle($event, step, i); select(listItem.disabled);\">\r\n              <div matLine>{{listItem.label}}</div>\r\n            </mat-list-item>\r\n          }\r\n        </mat-list>\r\n      </mat-tab>\r\n    }\r\n  </mat-tab-group>\r\n</div>", styles: [".cmat-cascade-bottom-sheet{padding:0;margin:-8px -16px}.cmat-cascade-bottom-sheet .sheet-header{display:flex;flex:1 1 0%;align-items:center;font-size:1rem;border-bottom-width:1px;padding:12px 16px}.cmat-cascade-bottom-sheet .sheet-header .sheet-title{margin:0;padding:0;letter-spacing:.05rem;text-align:center;flex-grow:1}.cmat-cascade-bottom-sheet .menu-list{vertical-align:top;box-sizing:border-box;margin:0;padding:0;width:100%;overflow:hidden;position:relative;height:204px}.cmat-cascade-bottom-sheet .menu-item{padding:0 16px;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important;font-size:14px;line-height:3em}.cmat-cascade-bottom-sheet .menu-item.disabled{cursor:not-allowed!important;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatCascadeBottomSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCascadeBottomSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-cascade-bottom-sheet', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeBottomSheet', imports: [MatButtonModule, MatTabsModule, MatListModule, MatIconModule], template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\r\n  <div class=\"sheet-header flex items-center\">\r\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\r\n    <button type=\"button\" matIconButton  (click)=\"root.bottomSheetRef.dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\r\n    @for (menuItem of root.steps; track step; let step = $index) {\r\n      <mat-tab\r\n        [label]=\"labels[step] || '\u9009\u62E9'\">\r\n        <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\">\r\n          @for (listItem of menuItem; track i; let i = $index) {\r\n            <mat-list-item class=\"menu-item\"\r\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled ?? false, listItem.label ?? '');\">\r\n              <div matLine>{{listItem.label}}</div>\r\n            </mat-list-item>\r\n          }\r\n        </mat-list>\r\n      </mat-tab>\r\n    }\r\n  </mat-tab-group>\r\n</div>", styles: [".cmat-cascade-bottom-sheet{padding:0;margin:-8px -16px}.cmat-cascade-bottom-sheet .sheet-header{display:flex;flex:1 1 0%;align-items:center;font-size:1rem;border-bottom-width:1px;padding:12px 16px}.cmat-cascade-bottom-sheet .sheet-header .sheet-title{margin:0;padding:0;letter-spacing:.05rem;text-align:center;flex-grow:1}.cmat-cascade-bottom-sheet .menu-list{vertical-align:top;box-sizing:border-box;margin:0;padding:0;width:100%;overflow:hidden;position:relative;height:204px}.cmat-cascade-bottom-sheet .menu-item{padding:0 16px;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important;font-size:14px;line-height:3em}.cmat-cascade-bottom-sheet .menu-item.disabled{cursor:not-allowed!important;pointer-events:none}\n"] }]
+            args: [{ selector: 'cmat-cascade-bottom-sheet', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeBottomSheet', imports: [MatButtonModule, MatTabsModule, MatListModule, MatIconModule], template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\r\n  <div class=\"sheet-header flex items-center\">\r\n    <p class=\"sheet-title\">{{data.placeholder}}</p>\r\n    <button type=\"button\" matIconButton (click)=\"dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-tab-group [selectedIndex]=\"selectedTab()\" (selectedIndexChange)=\"selectedTab.set($event)\">\r\n    @for (menuItem of data.steps(); track $index; let step = $index) {\r\n      <mat-tab [label]=\"labels()[step]\">\r\n        <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\">\r\n          @for (listItem of menuItem; track listItem.value; let i = $index) {\r\n            <mat-list-item class=\"menu-item\"\r\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n              (click)=\"data.selectHandle($event, step, i); select(listItem.disabled);\">\r\n              <div matLine>{{listItem.label}}</div>\r\n            </mat-list-item>\r\n          }\r\n        </mat-list>\r\n      </mat-tab>\r\n    }\r\n  </mat-tab-group>\r\n</div>", styles: [".cmat-cascade-bottom-sheet{padding:0;margin:-8px -16px}.cmat-cascade-bottom-sheet .sheet-header{display:flex;flex:1 1 0%;align-items:center;font-size:1rem;border-bottom-width:1px;padding:12px 16px}.cmat-cascade-bottom-sheet .sheet-header .sheet-title{margin:0;padding:0;letter-spacing:.05rem;text-align:center;flex-grow:1}.cmat-cascade-bottom-sheet .menu-list{vertical-align:top;box-sizing:border-box;margin:0;padding:0;width:100%;overflow:hidden;position:relative;height:204px}.cmat-cascade-bottom-sheet .menu-item{padding:0 16px;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important;font-size:14px;line-height:3em}.cmat-cascade-bottom-sheet .menu-item.disabled{cursor:not-allowed!important;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class CmatCascadeMenuComponent {
     constructor() {
         this.root = inject(CmatCascadeListComponent, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatCascadeMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatCascadeMenuComponent, isStandalone: true, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"], ngImport: i0, template: "@for (menuItem of root.steps; track step; let step = $index) {\r\n  <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\"\r\n    >\r\n    @for (listItem of menuItem; track i; let i = $index) {\r\n      <mat-list-item class=\"menu-item\"\r\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n        (click)=\"root.selectHandle($event, step, i);\">\r\n        <div matLine>{{listItem.label}}</div>\r\n        @if (listItem.children && listItem.children.length) {\r\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\r\n          ></mat-icon>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n}", styles: ["cmat-cascade-menu{height:200px;z-index:2007;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;white-space:nowrap}cmat-cascade-menu .menu-list{display:inline-block;border-right-width:1px;box-sizing:border-box;margin:0;padding:.5rem;overflow:hidden;position:relative;height:200px;min-width:200px;vertical-align:top}cmat-cascade-menu .menu-list:last-child{border-right-width:0px}cmat-cascade-menu .menu-item{line-height:3rem;padding:0 16px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important}cmat-cascade-menu .menu-item.disabled{cursor:not-allowed!important}cmat-cascade-menu .menu-item .item-icon{position:absolute;justify-items:center;top:50%;bottom:50%;right:0;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCascadeMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatCascadeMenuComponent, isStandalone: true, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"], ngImport: i0, template: "@for (menuItem of root.steps(); track $index; let step = $index) {\r\n  <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\">\r\n    @for (listItem of menuItem; track listItem.value; let i = $index) {\r\n      <mat-list-item class=\"menu-item\"\r\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n        (click)=\"root.selectHandle($event, step, i);\">\r\n        <div matLine>{{listItem.label}}</div>\r\n        @if (listItem.children && listItem.children.length) {\r\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"></mat-icon>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n}", styles: ["cmat-cascade-menu{height:200px;z-index:2007;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;white-space:nowrap}cmat-cascade-menu .menu-list{display:inline-block;border-right-width:1px;box-sizing:border-box;margin:0;padding:.5rem;overflow:hidden;position:relative;height:200px;min-width:200px;vertical-align:top}cmat-cascade-menu .menu-list:last-child{border-right-width:0px}cmat-cascade-menu .menu-item{line-height:3rem;padding:0 16px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important}cmat-cascade-menu .menu-item.disabled{cursor:not-allowed!important}cmat-cascade-menu .menu-item .item-icon{position:absolute;justify-items:center;top:50%;bottom:50%;right:0;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatCascadeMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCascadeMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-cascade-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeMenu', imports: [MatListModule, MatIconModule], template: "@for (menuItem of root.steps; track step; let step = $index) {\r\n  <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\"\r\n    >\r\n    @for (listItem of menuItem; track i; let i = $index) {\r\n      <mat-list-item class=\"menu-item\"\r\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n        (click)=\"root.selectHandle($event, step, i);\">\r\n        <div matLine>{{listItem.label}}</div>\r\n        @if (listItem.children && listItem.children.length) {\r\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\r\n          ></mat-icon>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n}", styles: ["cmat-cascade-menu{height:200px;z-index:2007;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;white-space:nowrap}cmat-cascade-menu .menu-list{display:inline-block;border-right-width:1px;box-sizing:border-box;margin:0;padding:.5rem;overflow:hidden;position:relative;height:200px;min-width:200px;vertical-align:top}cmat-cascade-menu .menu-list:last-child{border-right-width:0px}cmat-cascade-menu .menu-item{line-height:3rem;padding:0 16px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important}cmat-cascade-menu .menu-item.disabled{cursor:not-allowed!important}cmat-cascade-menu .menu-item .item-icon{position:absolute;justify-items:center;top:50%;bottom:50%;right:0;transform:translateY(-50%)}\n"] }]
+            args: [{ selector: 'cmat-cascade-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeMenu', imports: [MatListModule, MatIconModule], template: "@for (menuItem of root.steps(); track $index; let step = $index) {\r\n  <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\">\r\n    @for (listItem of menuItem; track listItem.value; let i = $index) {\r\n      <mat-list-item class=\"menu-item\"\r\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n        (click)=\"root.selectHandle($event, step, i);\">\r\n        <div matLine>{{listItem.label}}</div>\r\n        @if (listItem.children && listItem.children.length) {\r\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"></mat-icon>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n}", styles: ["cmat-cascade-menu{height:200px;z-index:2007;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;white-space:nowrap}cmat-cascade-menu .menu-list{display:inline-block;border-right-width:1px;box-sizing:border-box;margin:0;padding:.5rem;overflow:hidden;position:relative;height:200px;min-width:200px;vertical-align:top}cmat-cascade-menu .menu-list:last-child{border-right-width:0px}cmat-cascade-menu .menu-item{line-height:3rem;padding:0 16px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important}cmat-cascade-menu .menu-item.disabled{cursor:not-allowed!important}cmat-cascade-menu .menu-item .item-icon{position:absolute;justify-items:center;top:50%;bottom:50%;right:0;transform:translateY(-50%)}\n"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/member-ordering */
 let NEXT_ID = 0;
 class CmatCascadeListComponent {
+    get placeholder() {
+        return this._placeholderSignal();
+    }
+    set placeholder(value) {
+        this._placeholderSignal.set(value);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        if (this.ngControl?.disabled != null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabledSignal();
+    }
+    set disabled(value) {
+        this._disabledSignal.set(coerceBooleanProperty(value));
+        this.stateChanges.next();
+    }
+    get required() {
+        return this._requiredSignal();
+    }
+    set required(value) {
+        this._requiredSignal.set(coerceBooleanProperty(value));
+    }
+    get empty() {
+        return !this._value();
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get errorState() {
+        if (this.ngControl == null) {
+            return false;
+        }
+        return (this.touched && this.ngControl.invalid) ?? false;
+    }
+    ;
     constructor() {
+        this.id = `cmat-cascade-list-${NEXT_ID++}`;
+        this.options = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.clearable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+        this.fullLevels = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullLevels" }] : /* istanbul ignore next */ []));
+        this.changeOnSelect = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "changeOnSelect" }] : /* istanbul ignore next */ []));
+        this.allowLabelValue = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowLabelValue" }] : /* istanbul ignore next */ []));
+        this.touchUi = input(false, { ...(ngDevMode ? { debugName: "touchUi" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+        this.overlayOrigin = viewChild.required(CdkOverlayOrigin);
+        this.menuTemplate = viewChild.required(CdkPortal);
+        this._inputElement = viewChild('inputElement', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_inputElement" }] : /* istanbul ignore next */ []));
+        this._placeholderSignal = signal('请选择', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_placeholderSignal" }] : /* istanbul ignore next */ []));
+        this._disabledSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disabledSignal" }] : /* istanbul ignore next */ []));
+        this._requiredSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_requiredSignal" }] : /* istanbul ignore next */ []));
         this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.stateChanges = new Subject();
+        this.controlType = 'cmat-cascade-list';
         this._overlay = inject(Overlay);
         this._breakpointObserver = inject(BreakpointObserver);
         this._bottomSheet = inject(MatBottomSheet);
         this._destroyRef = inject(DestroyRef);
-        /* 组件 id */
-        this.id = `cmat-cascade-list-${NEXT_ID++}`;
-        this.clearable = false;
-        this.fullLevels = true;
-        this.changeOnSelect = false;
-        this.allowLabelValue = false;
-        this.steps = [];
-        this.menuVisible = false;
-        this.currentLabels = [];
-        this.stateChanges = new Subject();
-        this.focused = false;
-        this.touched = false;
-        this.controlType = 'cmat-cascade-list';
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
-        this._touchUi = false;
-        this._placeholder = '请选择';
-        this._required = false;
-        this._disabled = false;
+        this._value = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        this._focused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+        this._touched = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
+        this.currentLabels = computed(() => {
+            const value = this._value();
+            const opts = this.options();
+            if (!value?.length || !opts.length) {
+                return [];
+            }
+            return this._findLabelsByValue(value, opts);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentLabels" }] : /* istanbul ignore next */ []));
+        this.steps = computed(() => {
+            const labels = this.currentLabels();
+            const opts = this.options();
+            if (!labels.length) {
+                const step1 = opts.map(item => ({ ...item, active: false }));
+                return [step1];
+            }
+            return this._buildStepsFromLabels(labels, opts);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.showClearIcon = computed(() => {
+            return this.clearable() && this.currentLabels().length > 0 && !this.disabled;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showClearIcon" }] : /* istanbul ignore next */ []));
+        this.menuVisible = computed(() => {
+            return !this.touchUi() && (this.overlayRef?.hasAttached() ?? false);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuVisible" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
+        this._onChange = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.controlChange = () => { };
+        this._onTouched = () => { };
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
-    }
-    get touchUi() {
-        return this._touchUi;
-    }
-    set touchUi(value) {
-        this._touchUi = coerceBooleanProperty(value);
-    }
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.stateChanges.next();
+        effect(() => {
+            const labels = this.currentLabels();
+            if (this._inputElement()?.nativeElement.value !== this._getLabelText(labels)) {
+                this._updateInputValue(labels);
+            }
+        });
     }
     get value() {
-        return this._value;
-    }
-    set value(value) {
-        if (value !== this.value) {
-            this._value = value;
-            this._setInputValue();
-            this.stateChanges.next();
-            this.controlChange(value);
-        }
-    }
-    get empty() {
-        return !this._value;
+        return this._value();
     }
-    get errorState() {
-        if (this.ngControl == null)
-            return false;
-        return (this.touched && this.ngControl?.invalid) ?? false;
+    set value(val) {
+        this._value.set(val);
     }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
+    get focused() {
+        return this._focused();
     }
-    get required() { return this._required; }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
+    set focused(val) {
+        this._focused.set(val);
         this.stateChanges.next();
     }
-    get disabled() {
-        if (!isNil(this.ngControl?.disabled)) {
-            return this.ngControl.disabled;
-        }
-        return this._disabled;
+    get touched() {
+        return this._touched();
     }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
+    set touched(val) {
+        this._touched.set(val);
     }
     ngOnInit() {
         const config = new OverlayConfig({
@@ -164,261 +219,217 @@ class CmatCascadeListComponent {
             scrollStrategy: this._overlay.scrollStrategies.reposition(),
             positionStrategy: this._overlay
                 .position()
-                .flexibleConnectedTo(this.overlayOrigin.elementRef)
+                .flexibleConnectedTo(this.overlayOrigin().elementRef)
                 .withPositions([
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top'
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom'
-                }
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
             ])
         });
-        this._breakpointObserver.observe(Breakpoints.Handset).pipe(takeUntilDestroyed(this._destroyRef), map((match) => match.matches)).subscribe((matches) => {
-            this.touchUi !== matches && !matches && this.bottomSheetRef?.dismiss();
+        this._breakpointObserver.observe(Breakpoints.Handset).pipe(takeUntilDestroyed(this._destroyRef), map(match => match.matches)).subscribe((matches) => {
+            if (this.touchUi() !== matches) {
+                if (!matches && this.bottomSheetRef) {
+                    // 从移动切换到桌面：关闭 BottomSheet
+                    this.bottomSheetRef.dismiss();
+                    // 可选：自动打开 Overlay
+                    if (this.focused) {
+                        setTimeout(() => this.overlayRef.attach(this.menuTemplate()));
+                    }
+                }
+                else if (matches && this.overlayRef?.hasAttached()) {
+                    // 从桌面切换到移动：关闭 Overlay
+                    this.overlayRef.detach();
+                    // 可选：自动打开 BottomSheet
+                    this._openBottomSheet();
+                }
+            }
         });
         this.overlayRef = this._overlay.create(config);
         this.overlayRef.backdropClick().subscribe(() => {
             this.overlayRef.detach();
         });
     }
-    ngOnChanges(changes) {
-        if (changes['options']) {
-            if ((this.value && !this.value.length) || !this.value) {
-                const step1 = this.options.map((option) => ({
-                    ...option,
-                    active: false
-                }));
-                this.steps = [step1];
-            }
-            this._init();
-        }
-    }
     ngOnDestroy() {
         this.stateChanges.complete();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
     }
     writeValue(value) {
-        this.value = value;
-        this.steps = [];
-        this._init();
+        this._value.set(value);
     }
     registerOnChange(fn) {
-        this.controlChange = fn;
+        this._onChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this._disabledSignal.set(isDisabled);
     }
     setDescribedByIds(ids) {
         if (ids.length) {
-            this._inputElement.nativeElement.setAttribute('aria-describedby', ids.join(' '));
+            this._inputElement()?.nativeElement.setAttribute('aria-describedby', ids.join(' '));
         }
         else {
-            this._inputElement.nativeElement.removeAttribute('aria-describedby');
+            this._inputElement()?.nativeElement.removeAttribute('aria-describedby');
         }
     }
     onContainerClick() {
         if (!this.focused) {
-            this._inputElement.nativeElement.focus();
+            this._inputElement()?.nativeElement.focus();
         }
     }
     clickHandle(event) {
-        if (this.disabled || this.options.length === 0) {
+        if (this.disabled || this.options().length === 0) {
             return;
         }
         const element = event.target;
-        const isSelfTrigger = ['SPAN', 'I', 'INPUT'].find(v => v === element.tagName);
-        if (!isSelfTrigger) {
+        const cascadeListElement = this._inputElement()?.nativeElement.closest('.cmat-cascade-list');
+        if (!cascadeListElement?.contains(element)) {
             return;
         }
-        if (this.touchUi) {
+        if (this.touchUi()) {
             if (this.overlayRef?.hasAttached()) {
                 this.overlayRef.detach();
             }
             this._openBottomSheet();
         }
         else {
-            this.overlayRef.attach(this.menuTemplate);
+            this.overlayRef.attach(this.menuTemplate());
         }
     }
     clearValue(event) {
         if (event) {
             event.stopPropagation();
+            event.preventDefault();
         }
-        this.currentLabels = [];
-        this.steps = [];
-        const step1 = this.options.map((option) => ({
-            ...option,
-            active: false
-        }));
-        this.steps = [step1];
-        this.value = null;
-        this.refreshVersion.update(value => value + 1);
-    }
-    showClearIcon() {
-        return !!(this.clearable && this.currentLabels.length > 0 && !this.disabled);
+        this._value.set(null);
+        this._onChange(null);
+        this._onTouched();
     }
     selectHandle(event, step, index) {
         event.stopPropagation();
-        if (this.steps[step][index].disabled) {
+        const currentSteps = this.steps();
+        const selectedItem = currentSteps[step][index];
+        if (selectedItem.disabled) {
             return;
         }
-        this.steps[step] = this.steps[step].map((item, i) => ({
-            ...item,
-            active: i === index
-        }));
-        this.steps.length = step + 1;
-        const next = this.steps[step][index].children;
-        if (next && Array.isArray(next) && next.length) {
-            if (this.changeOnSelect) {
-                this._changeLabels();
-            }
-            const nativeNext = next.map((item) => ({
-                ...item,
-                active: false
-            }));
-            this.steps.push(nativeNext);
+        this._value.update((values) => {
+            const newValues = values ? values.slice(0, step) : [];
+            newValues.push({
+                value: selectedItem.value,
+                label: selectedItem.label
+            });
+            return newValues;
+        });
+        this._onChange(this._value());
+        this._onTouched();
+        if (selectedItem.children?.length && !this.changeOnSelect()) {
             return;
         }
-        this._changeLabels();
         if (this.overlayRef?.hasAttached()) {
             this.overlayRef.detach();
         }
-        if (this.touchUi) {
+        if (this.touchUi() && this.bottomSheetRef) {
             this.bottomSheetRef.dismiss();
         }
     }
     onFocusIn() {
         if (!this.focused) {
             this.focused = true;
-            this.stateChanges.next();
         }
     }
     onFocusOut(event) {
-        if (!this._inputElement.nativeElement.contains(event.relatedTarget)) {
+        const relatedTarget = event.relatedTarget;
+        const isMenuClick = relatedTarget?.closest('.cmat-cascade-menu, .cmat-cascade-bottom-sheet');
+        if (!isMenuClick && !this._inputElement()?.nativeElement.contains(relatedTarget)) {
             this.touched = true;
             this.focused = false;
-            this.onTouched();
-            this.stateChanges.next();
+            this._onTouched();
         }
     }
-    _initSteps(index, options) {
-        const step = [];
-        options.map((item) => {
-            if (this.value?.[index] &&
-                (this.value[index].value === item.value || (this.allowLabelValue && this.value[index].label === item.label))) {
-                if (!isUndefined(item.children))
-                    options = item.children;
-                step.push(({
-                    ...item,
-                    active: true
-                }));
+    _findLabelsByValue(value, options) {
+        const result = [];
+        let currentOptions = options;
+        for (const val of value) {
+            const found = this.allowLabelValue()
+                ? currentOptions.find(item => item.value === val.value || item.label === val.label)
+                : currentOptions.find(item => item.value === val.value);
+            if (found) {
+                result.push(found);
+                currentOptions = found.children ?? [];
             }
             else {
-                step.push(item);
+                break;
             }
-        });
-        this.steps.push(step);
-        index += 1;
-        if (this.value && index < this.value.length) {
-            this._initSteps(index, options);
         }
+        return result;
     }
-    _changeLabels() {
-        const nextValue = [];
-        this.steps.forEach((items) => {
-            const steps = items.filter((item) => item.active);
-            nextValue.push(steps[0]);
-        });
-        this.currentLabels = nextValue;
-        const next = nextValue.map((item) => {
-            return {
-                value: item.value,
-                label: item.label
-            };
-        });
-        this.value = next;
+    _buildStepsFromLabels(labels, rootOptions) {
+        const steps = [];
+        let currentOptions = rootOptions;
+        for (const label of labels) {
+            const stepItems = currentOptions.map(item => ({
+                ...item,
+                active: item.value === label.value
+            }));
+            steps.push(stepItems);
+            currentOptions = label.children ?? [];
+        }
+        if (currentOptions.length > 0) {
+            steps.push(currentOptions.map(item => ({ ...item, active: false })));
+        }
+        return steps;
+    }
+    _updateInputValue(labels) {
+        if (!this._inputElement) {
+            return;
+        }
+        let text;
+        if (this.fullLevels()) {
+            text = labels.map((l, i) => `${l.label}${i < labels.length - 1 ? ' / ' : ''}`).join('');
+        }
+        else {
+            text = labels[labels.length - 1]?.label ?? '';
+        }
+        this._inputElement().nativeElement.value = text;
     }
     _openBottomSheet() {
+        const data = {
+            options: this.options(),
+            steps: this.steps,
+            currentLabels: this.currentLabels,
+            selectHandle: this.selectHandle.bind(this),
+            changeOnSelect: this.changeOnSelect(),
+            placeholder: this.placeholder
+        };
         this.bottomSheetRef = this._bottomSheet.open(CmatCascadeBottomSheetComponent, {
-            data: this
+            data
         });
     }
-    _init() {
-        this.currentLabels = [];
-        if (this.value?.length && this.options.length > 0) {
-            let options = this.options;
-            const val = this.value.map((v) => {
-                const item = options.filter((i) => i.value === v.value || (this.allowLabelValue && i.label === v.label))?.[0];
-                if (!isUndefined(item?.children))
-                    options = item.children;
-                return item;
-            });
-            this.currentLabels = val.filter((v) => !!v);
-            this._setInputValue();
-            this._initSteps(0, this.options);
+    _getLabelText(labels) {
+        if (this.fullLevels()) {
+            return labels.map((l, i) => `${l.label}${i < labels.length - 1 ? ' / ' : ''}`).join('');
         }
-        this.refreshVersion.update(value => value + 1);
+        return labels[labels.length - 1]?.label ?? '';
     }
-    _setInputValue() {
-        this._inputElement.nativeElement.value = '';
-        if (this.fullLevels) {
-            this.currentLabels.map((value, i) => {
-                this._inputElement.nativeElement.value += `${value.label}${i < this.currentLabels.length - 1 ? ' / ' : ''}`;
-            });
-        }
-        else {
-            this._inputElement.nativeElement.value = this.currentLabels[this.currentLabels.length - 1].label ?? '';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatCascadeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatCascadeListComponent, isStandalone: true, selector: "cmat-cascade-list", inputs: { id: "id", options: "options", clearable: "clearable", fullLevels: "fullLevels", changeOnSelect: "changeOnSelect", allowLabelValue: "allowLabelValue", touchUi: "touchUi", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, host: { properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatCascadeListComponent }], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, static: true }, { propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }, { propertyName: "_inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], exportAs: ["cmatCascadeList"], usesOnChanges: true, ngImport: i0, template: "<span role=\"presentation\" class=\"cmat-cascade-list\" cdk-overlay-origin [attr.data-refresh]=\"refreshVersion()\"\r\n  [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\">\r\n  <input #inputElement matInput readonly [required]='required' [placeholder]=\"currentLabels.length>0 ? '' : placeholder\" (click)=\"clickHandle($event)\"\r\n    (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n\r\n  @if (showClearIcon()) {\r\n  <button type=\"button\" matSuffix matIconButton  aria-label=\"Clear\" (click)=\"clearValue($event)\">\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n  </button>\r\n  }\r\n  @else {\r\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  }\r\n</span>\r\n\r\n<ng-template #menuTemplate=\"cdkPortal\" cdkPortal>\r\n  <cmat-cascade-menu></cmat-cascade-menu>\r\n</ng-template>\r\n", styles: ["cmat-cascade-list{width:100%}.cmat-cascade-list{position:relative;display:flex;width:100%;line-height:2;align-items:center}.cmat-cascade-list mat-form-field{width:100%}.cmat-cascade-list input{cursor:pointer}.cmat-cascade-list.disabled .cascade-label{z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CmatCascadeMenuComponent, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4$1.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCascadeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatCascadeListComponent, isStandalone: true, selector: "cmat-cascade-list", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, fullLevels: { classPropertyName: "fullLevels", publicName: "fullLevels", isSignal: true, isRequired: false, transformFunction: null }, changeOnSelect: { classPropertyName: "changeOnSelect", publicName: "changeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, allowLabelValue: { classPropertyName: "allowLabelValue", publicName: "allowLabelValue", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatCascadeListComponent }], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "menuTemplate", first: true, predicate: CdkPortal, descendants: true, isSignal: true }, { propertyName: "_inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], exportAs: ["cmatCascadeList"], ngImport: i0, template: "<span role=\"presentation\" class=\"cmat-cascade-list\" cdk-overlay-origin\r\n  [ngClass]=\"{'opened': menuVisible(), 'disabled': disabled, 'error-state': errorState}\">\r\n  <input #inputElement matInput readonly [required]='required' [placeholder]=\"currentLabels().length>0 ? '' : placeholder\" (click)=\"clickHandle($event)\"\r\n    (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n\r\n  @if (showClearIcon()) {\r\n  <button type=\"button\" matSuffix matIconButton aria-label=\"Clear\" (click)=\"clearValue($event)\">\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n  </button>\r\n  }\r\n  @else {\r\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  }\r\n</span>\r\n\r\n<ng-template #menuTemplate=\"cdkPortal\" cdkPortal>\r\n  <cmat-cascade-menu></cmat-cascade-menu>\r\n</ng-template>", styles: ["cmat-cascade-list{width:100%}.cmat-cascade-list{position:relative;display:flex;width:100%;line-height:2;align-items:center}.cmat-cascade-list mat-form-field{width:100%}.cmat-cascade-list input{cursor:pointer}.cmat-cascade-list.disabled .cascade-label{z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CmatCascadeMenuComponent, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4$1.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatCascadeListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatCascadeListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-cascade-list', providers: [{ provide: MatFormFieldControl, useExisting: CmatCascadeListComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeList', imports: [MatIconModule, NgClass, CmatCascadeMenuComponent, MatInputModule, OverlayModule, PortalModule, MatButtonModule], template: "<span role=\"presentation\" class=\"cmat-cascade-list\" cdk-overlay-origin [attr.data-refresh]=\"refreshVersion()\"\r\n  [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\">\r\n  <input #inputElement matInput readonly [required]='required' [placeholder]=\"currentLabels.length>0 ? '' : placeholder\" (click)=\"clickHandle($event)\"\r\n    (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n\r\n  @if (showClearIcon()) {\r\n  <button type=\"button\" matSuffix matIconButton  aria-label=\"Clear\" (click)=\"clearValue($event)\">\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n  </button>\r\n  }\r\n  @else {\r\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  }\r\n</span>\r\n\r\n<ng-template #menuTemplate=\"cdkPortal\" cdkPortal>\r\n  <cmat-cascade-menu></cmat-cascade-menu>\r\n</ng-template>\r\n", styles: ["cmat-cascade-list{width:100%}.cmat-cascade-list{position:relative;display:flex;width:100%;line-height:2;align-items:center}.cmat-cascade-list mat-form-field{width:100%}.cmat-cascade-list input{cursor:pointer}.cmat-cascade-list.disabled .cascade-label{z-index:2}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }, {
-                type: Input
-            }], options: [{
-                type: Input,
-                args: [{ required: true }]
-            }], clearable: [{
-                type: Input
-            }], fullLevels: [{
-                type: Input
-            }], changeOnSelect: [{
-                type: Input
-            }], allowLabelValue: [{
+            args: [{ selector: 'cmat-cascade-list', providers: [{ provide: MatFormFieldControl, useExisting: CmatCascadeListComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeList', imports: [MatIconModule, NgClass, CmatCascadeMenuComponent, MatInputModule,
+                        OverlayModule, PortalModule, MatButtonModule], host: {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[attr.id]': 'id',
+                    }, template: "<span role=\"presentation\" class=\"cmat-cascade-list\" cdk-overlay-origin\r\n  [ngClass]=\"{'opened': menuVisible(), 'disabled': disabled, 'error-state': errorState}\">\r\n  <input #inputElement matInput readonly [required]='required' [placeholder]=\"currentLabels().length>0 ? '' : placeholder\" (click)=\"clickHandle($event)\"\r\n    (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n\r\n  @if (showClearIcon()) {\r\n  <button type=\"button\" matSuffix matIconButton aria-label=\"Clear\" (click)=\"clearValue($event)\">\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n  </button>\r\n  }\r\n  @else {\r\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  }\r\n</span>\r\n\r\n<ng-template #menuTemplate=\"cdkPortal\" cdkPortal>\r\n  <cmat-cascade-menu></cmat-cascade-menu>\r\n</ng-template>", styles: ["cmat-cascade-list{width:100%}.cmat-cascade-list{position:relative;display:flex;width:100%;line-height:2;align-items:center}.cmat-cascade-list mat-form-field{width:100%}.cmat-cascade-list input{cursor:pointer}.cmat-cascade-list.disabled .cascade-label{z-index:2}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], fullLevels: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullLevels", required: false }] }], changeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeOnSelect", required: false }] }], allowLabelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowLabelValue", required: false }] }], touchUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUi", required: false }] }], overlayOrigin: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }], menuTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortal), { isSignal: true }] }], _inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], placeholder: [{
                 type: Input
-            }], overlayOrigin: [{
-                type: ViewChild,
-                args: [CdkOverlayOrigin, { static: true }]
-            }], menuTemplate: [{
-                type: ViewChild,
-                args: ['menuTemplate', { static: true }]
-            }], _inputElement: [{
-                type: ViewChild,
-                args: ['inputElement', { static: true }]
-            }], touchUi: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], value: [{
+            }], disabled: [{
                 type: Input
             }], required: [{
                 type: Input
-            }], disabled: [{
+            }], value: [{
                 type: Input
             }] } });