cmat 0.0.7 → 0.0.8

package/fesm2022/cmat-components-cascade.mjs

@@ -1,32 +1,33 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, EventEmitter, forwardRef, HostBinding, Input, Output, ViewChild, Inject } from '@angular/core';
-import * as i3$1 from '@angular/material/bottom-sheet';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Self, HostBinding, Input, ViewChild, Inject } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl } from '@angular/forms';
+import * as i4 from '@angular/material/bottom-sheet';
 import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
-import { NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
-import * as i2$2 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i1$1 from '@angular/material/button';
+import * as i9 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i2$2 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { isUndefined, isNull } from 'lodash-es';
-import { NgClass } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i2$1 from '@angular/cdk/layout';
+import * as i3$1 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
+import * as i2$1 from '@angular/cdk/overlay';
+import { OverlayConfig, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import * as i8 from '@angular/cdk/portal';
+import { PortalModule } from '@angular/cdk/portal';
+import { NgClass } from '@angular/common';
+import * as i7 from '@angular/material/form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import { Subject } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
 import { cmatAnimations } from 'cmat/animations';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayConfig, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
-import * as i7 from '@angular/cdk/portal';
-import { PortalModule } from '@angular/cdk/portal';
 
 class CmatCascadeMenuComponent {
     constructor(root) {
@@ -35,45 +36,102 @@ class CmatCascadeMenuComponent {
     trackByFn(index, item) {
         return index || item;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatCascadeMenuComponent, deps: [{ token: CmatCascadeListComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatCascadeMenuComponent, isStandalone: true, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"], ngImport: i0, template: "@for (menuItem of root.steps; track trackByFn(step, menuItem); let step = $index) {\n  <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\n    >\n    @for (listItem of menuItem; track trackByFn(i, listItem); let i = $index) {\n      <mat-list-item class=\"menu-item\"\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\n        (click)=\"root.selectHandle($event, step, i);\">\n        <div matLine>{{listItem.label}}</div>\n        @if (listItem.children && listItem.children.length) {\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\n          ></mat-icon>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\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: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [cmatAnimations], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatCascadeMenuComponent, deps: [{ token: CmatCascadeListComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatCascadeMenuComponent, isStandalone: true, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"], ngImport: i0, template: "@for (menuItem of root.steps; track trackByFn(step, menuItem); let step = $index) {\n  <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\n    >\n    @for (listItem of menuItem; track trackByFn(i, listItem); let i = $index) {\n      <mat-list-item class=\"menu-item\"\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\n        (click)=\"root.selectHandle($event, step, i);\">\n        <div matLine>{{listItem.label}}</div>\n        @if (listItem.children && listItem.children.length) {\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\n          ></mat-icon>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\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: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [cmatAnimations], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatCascadeMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatCascadeMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-cascade-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeMenu', animations: [cmatAnimations], standalone: true, imports: [MatListModule, MatIconModule], template: "@for (menuItem of root.steps; track trackByFn(step, menuItem); let step = $index) {\n  <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\n    >\n    @for (listItem of menuItem; track trackByFn(i, listItem); let i = $index) {\n      <mat-list-item class=\"menu-item\"\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\n        (click)=\"root.selectHandle($event, step, i);\">\n        <div matLine>{{listItem.label}}</div>\n        @if (listItem.children && listItem.children.length) {\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\n          ></mat-icon>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\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"] }]
         }], ctorParameters: () => [{ type: CmatCascadeListComponent, decorators: [{
                     type: Optional
                 }] }] });
 
+/* eslint-disable @typescript-eslint/member-ordering */
 let NEXT_ID = 0;
 class CmatCascadeListComponent {
-    constructor(_overlay, _breakpointObserver, _bottomSheet) {
+    constructor(ngControl, _overlay, _breakpointObserver, _bottomSheet, _changeDetectorRef) {
+        this.ngControl = ngControl;
         this._overlay = _overlay;
         this._breakpointObserver = _breakpointObserver;
         this._bottomSheet = _bottomSheet;
+        this._changeDetectorRef = _changeDetectorRef;
         /* 组件 id */
         this.id = `cmat-cascade-list-${NEXT_ID++}`;
-        this.disabled = false;
-        this.placeholder = '请选择';
         this.clearable = false;
         this.fullLevels = true;
         this.changeOnSelect = false;
-        this.modelChange = new EventEmitter();
         this.steps = [];
         this.menuVisible = false;
         this.currentLabels = [];
-        this._touchUi = false;
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.touched = false;
+        this.controlType = 'cmat-cascade-list';
         this._unsubscribeAll = new Subject();
+        // Whether the cascade dropdownlist UI is in touch mode.
+        this._touchUi = false;
+        this._placeholder = '请选择';
+        this._required = false;
+        this._disabled = false;
         this.onTouched = () => { };
         this.controlChange = () => { };
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
     }
-    // Whether the cascade dropdownlist UI is in touch mode.
     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();
+    }
+    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;
+    }
+    get errorState() {
+        if (this.ngControl == null)
+            return false;
+        return (this.touched && this.ngControl?.invalid) ?? false;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() { return this._required; }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
     ngOnInit() {
         const config = new OverlayConfig({
             hasBackdrop: true,
@@ -97,6 +155,9 @@ class CmatCascadeListComponent {
                 }
             ])
         });
+        this._breakpointObserver.observe(Breakpoints.Handset).pipe(takeUntil(this._unsubscribeAll), map((match) => match.matches)).subscribe((matches) => {
+            this.touchUi !== matches && !matches && this.bottomSheetRef && this.bottomSheetRef.dismiss();
+        });
         this.overlayRef = this._overlay.create(config);
         this.overlayRef.backdropClick().subscribe(() => {
             this.overlayRef.detach();
@@ -104,16 +165,25 @@ class CmatCascadeListComponent {
     }
     ngOnChanges(changes) {
         if (changes['options']) {
-            this.options = changes['options'].currentValue;
+            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();
         this._unsubscribeAll.next(void 0);
         this._unsubscribeAll.complete();
     }
     writeValue(value) {
-        this.model = value;
+        this.value = value;
+        this.steps = [];
+        this._init();
     }
     registerOnChange(fn) {
         this.controlChange = fn;
@@ -121,9 +191,24 @@ class CmatCascadeListComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    setDescribedByIds(ids) {
+        if (ids.length) {
+            this._inputElement.nativeElement.setAttribute('aria-describedby', ids.join(' '));
+        }
+        else {
+            this._inputElement.nativeElement.removeAttribute('aria-describedby');
+        }
+    }
+    onContainerClick() {
+        if (!this.focused) {
+            this._inputElement.nativeElement.focus();
+        }
+    }
     clickHandle(event) {
-        event.stopPropagation();
-        if (this.disabled) {
+        if (this.disabled || this.options.length === 0) {
             return;
         }
         const element = event.target;
@@ -135,64 +220,28 @@ class CmatCascadeListComponent {
             if (this.overlayRef && this.overlayRef.hasAttached()) {
                 this.overlayRef.detach();
             }
-            this.openBottomSheet();
+            this._openBottomSheet();
         }
         else {
             this.overlayRef.attach(this.menuTemplate);
         }
     }
-    changeLabels() {
-        this.inputValue = '';
-        const nextValue = [];
-        this.steps.forEach((items) => {
-            const steps = items.filter((item) => item.active);
-            nextValue.push(steps[0]);
-        });
-        this.currentLabels = nextValue;
-        this._setInputValue();
-        const next = nextValue.map((item) => item.value);
-        this.model = next;
-        this.modelChange.emit(next);
-        this.controlChange();
-    }
-    clearValue(isFirst, event) {
+    clearValue(event) {
         if (event) {
             event.stopPropagation();
         }
         this.currentLabels = [];
-        if (!isFirst || (this.model && !this.model.length) || !this.model) {
-            const step1 = this.options.map((option) => ({
-                ...option,
-                active: false
-            }));
-            this.steps = [step1];
-        }
-        //this.menuVisible = false;
-        this.inputValue = '';
-        if (event) {
-            this.modelChange.emit([]);
-        }
+        this.steps = [];
+        const step1 = this.options.map((option) => ({
+            ...option,
+            active: false
+        }));
+        this.steps = [step1];
+        this.value = null;
+        this._changeDetectorRef.markForCheck();
     }
-    initSteps(index, options) {
-        const step = [];
-        options.map((item) => {
-            if (this.model[index] === item.value) {
-                if (!isUndefined(item.children))
-                    options = item.children;
-                step.push(({
-                    ...item,
-                    active: true
-                }));
-            }
-            else {
-                step.push(item);
-            }
-        });
-        this.steps.push(step);
-        index += 1;
-        if (index < this.model.length) {
-            this.initSteps(index, options);
-        }
+    showClearIcon() {
+        return !!(this.clearable && this.currentLabels.length > 0 && !this.disabled);
     }
     selectHandle(event, step, index) {
         event.stopPropagation();
@@ -210,7 +259,7 @@ class CmatCascadeListComponent {
         if (next && Array.isArray(next) && next.length) {
             // change on select (props)
             if (this.changeOnSelect) {
-                this.changeLabels();
+                this._changeLabels();
             }
             const nativeNext = next.map((item) => ({
                 ...item,
@@ -219,7 +268,7 @@ class CmatCascadeListComponent {
             return this.steps.push(nativeNext);
         }
         // last step
-        this.changeLabels();
+        this._changeLabels();
         if (this.overlayRef && this.overlayRef.hasAttached()) {
             this.overlayRef.detach();
         }
@@ -227,66 +276,103 @@ class CmatCascadeListComponent {
             this.bottomSheetRef.dismiss();
         }
     }
-    showClearIcon() {
-        return !!(this.clearable && this.currentLabels.length);
+    onFocusIn() {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+    }
+    onFocusOut(event) {
+        if (!this._inputElement.nativeElement.contains(event.relatedTarget)) {
+            this.touched = true;
+            this.focused = false;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    _initSteps(index, options) {
+        const step = [];
+        options.map((item) => {
+            if (this.value[index].value === item.value) {
+                if (!isUndefined(item.children))
+                    options = item.children;
+                step.push(({
+                    ...item,
+                    active: true
+                }));
+            }
+            else {
+                step.push(item);
+            }
+        });
+        this.steps.push(step);
+        index += 1;
+        if (index < this.value.length) {
+            this._initSteps(index, options);
+        }
+    }
+    _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;
     }
-    openBottomSheet() {
+    _openBottomSheet() {
         this.bottomSheetRef = this._bottomSheet.open(CmatCascadeBottomSheetComponent, {
             data: this
         });
     }
     _init() {
-        this.clearValue(true);
-        if (this.model && this.model.length) {
-            const val = this.model.map((v) => {
-                const item = this.options.filter((i) => i.value === v)[0];
+        this.currentLabels = [];
+        if (this.value && 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)[0];
                 if (!isUndefined(item.children))
-                    this.options = item.children;
+                    options = item.children;
                 return item;
             });
-            this.currentLabels = val.filter(v => !!v);
+            this.currentLabels = val.filter((v) => !!v);
             this._setInputValue();
-            this.initSteps(0, this.options);
+            this._initSteps(0, this.options);
         }
-        this._breakpointObserver.observe(Breakpoints.Handset).pipe(takeUntil(this._unsubscribeAll), map((match) => match.matches)).subscribe((matches) => {
-            this.touchUi !== matches && !matches && this.bottomSheetRef && this.bottomSheetRef.dismiss();
-        });
+        this._changeDetectorRef.markForCheck();
     }
     _setInputValue() {
+        this._inputElement.nativeElement.value = '';
         if (this.fullLevels) {
             this.currentLabels.map((value, i) => {
-                this.inputValue += `${value.label}${i < this.currentLabels.length - 1 ? ' / ' : ''}`;
+                this._inputElement.nativeElement.value += `${value.label}${i < this.currentLabels.length - 1 ? ' / ' : ''}`;
             });
         }
         else {
-            this.inputValue = this.currentLabels[this.currentLabels.length - 1].label;
+            this._inputElement.nativeElement.value = this.currentLabels[this.currentLabels.length - 1].label ?? '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatCascadeListComponent, deps: [{ token: i1.Overlay }, { token: i2$1.BreakpointObserver }, { token: i3$1.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatCascadeListComponent, isStandalone: true, selector: "cmat-cascade-list", inputs: { id: "id", disabled: "disabled", placeholder: "placeholder", label: "label", options: "options", clearable: "clearable", fullLevels: "fullLevels", changeOnSelect: "changeOnSelect", model: "model", touchUi: "touchUi" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "this.id" } }, providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CmatCascadeListComponent),
-                multi: true
-            }], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, static: true }, { propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }], exportAs: ["cmatCascadeList"], usesOnChanges: true, ngImport: i0, template: "<span role=\"presentation\" class=\"cmat-cascade-list\" [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\"\n  cdk-overlay-origin>\n  <mat-form-field>\n    @if (label) {\n      <mat-label>{{label}}</mat-label>\n    }\n    <input (click)=\"clickHandle($event)\" [value]=\"inputValue || ''\" matInput readonly\n      [placeholder]=\"currentLabels.length ? '' : placeholder\">\n\n    @if (showClearIcon()) {\n      <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\"\n        (click)=\"clearValue(false,$event)\">\n        <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\n      </button>\n    }\n    @if (!showClearIcon()) {\n      <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\n    }\n  </mat-form-field>\n</span>\n\n<ng-template cdk-portal #menuTemplate=\"cdkPortal\">\n  <cmat-cascade-menu></cmat-cascade-menu>\n</ng-template>", styles: [".cmat-cascade-list{position:relative;display:inline-block;width:100%;line-height:2}.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: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i7.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatCascadeListComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i2$1.Overlay }, { token: i3$1.BreakpointObserver }, { token: i4.MatBottomSheet }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatCascadeListComponent, isStandalone: true, selector: "cmat-cascade-list", inputs: { id: "id", options: "options", clearable: "clearable", fullLevels: "fullLevels", changeOnSelect: "changeOnSelect", 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\" [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\"\n  cdk-overlay-origin>\n  <input (click)=\"clickHandle($event)\" matInput readonly #inputElement [required]='required' (focusin)=\"onFocusIn()\"\n    (focusout)=\"onFocusOut($event)\" [placeholder]=\"currentLabels.length>0 ? '' : placeholder\">\n\n  @if (showClearIcon()) {\n  <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearValue($event)\">\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\n  </button>\n  }\n  @else {\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\n  }\n</span>\n\n<ng-template cdk-portal #menuTemplate=\"cdkPortal\">\n  <cmat-cascade-menu></cmat-cascade-menu>\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: i3.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: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i8.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatCascadeListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatCascadeListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-cascade-list', providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CmatCascadeListComponent),
-                            multi: true
-                        }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeList', standalone: true, imports: [MatFormFieldModule, MatIconModule, NgClass, CmatCascadeMenuComponent, MatInputModule, OverlayModule, PortalModule], template: "<span role=\"presentation\" class=\"cmat-cascade-list\" [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\"\n  cdk-overlay-origin>\n  <mat-form-field>\n    @if (label) {\n      <mat-label>{{label}}</mat-label>\n    }\n    <input (click)=\"clickHandle($event)\" [value]=\"inputValue || ''\" matInput readonly\n      [placeholder]=\"currentLabels.length ? '' : placeholder\">\n\n    @if (showClearIcon()) {\n      <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\"\n        (click)=\"clearValue(false,$event)\">\n        <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\n      </button>\n    }\n    @if (!showClearIcon()) {\n      <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\n    }\n  </mat-form-field>\n</span>\n\n<ng-template cdk-portal #menuTemplate=\"cdkPortal\">\n  <cmat-cascade-menu></cmat-cascade-menu>\n</ng-template>", styles: [".cmat-cascade-list{position:relative;display:inline-block;width:100%;line-height:2}.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: () => [{ type: i1.Overlay }, { type: i2$1.BreakpointObserver }, { type: i3$1.MatBottomSheet }], propDecorators: { id: [{
+            args: [{ selector: 'cmat-cascade-list', providers: [{ provide: MatFormFieldControl, useExisting: CmatCascadeListComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeList', standalone: true, imports: [MatIconModule, NgClass, CmatCascadeMenuComponent, MatInputModule, OverlayModule, PortalModule, MatButtonModule], template: "<span role=\"presentation\" class=\"cmat-cascade-list\" [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\"\n  cdk-overlay-origin>\n  <input (click)=\"clickHandle($event)\" matInput readonly #inputElement [required]='required' (focusin)=\"onFocusIn()\"\n    (focusout)=\"onFocusOut($event)\" [placeholder]=\"currentLabels.length>0 ? '' : placeholder\">\n\n  @if (showClearIcon()) {\n  <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearValue($event)\">\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\n  </button>\n  }\n  @else {\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\n  }\n</span>\n\n<ng-template cdk-portal #menuTemplate=\"cdkPortal\">\n  <cmat-cascade-menu></cmat-cascade-menu>\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: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i2$1.Overlay }, { type: i3$1.BreakpointObserver }, { type: i4.MatBottomSheet }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
             }, {
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], label: [{
-                type: Input
             }], options: [{
                 type: Input,
                 args: [{ required: true }]
@@ -296,19 +382,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }], changeOnSelect: [{
                 type: Input
-            }], model: [{
-                type: Input,
-                args: [{ required: true }]
-            }], modelChange: [{
-                type: Output
             }], 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: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 class CmatCascadeBottomSheetComponent {
@@ -338,10 +430,10 @@ class CmatCascadeBottomSheetComponent {
     trackByFn(index, item) {
         return index || item;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatCascadeBottomSheetComponent, deps: [{ token: MAT_BOTTOM_SHEET_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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)\">\n  <div class=\"sheet-header flex items-center\">\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\n    <button type=\"button\" mat-icon-button (click)=\"root.bottomSheetRef.dismiss()\">\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\n    </button>\n  </div>\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\n    @for (menuItem of root.steps; track trackByFn(step, menuItem); let step = $index) {\n      <mat-tab\n        [label]=\"labels[step] || '\u9009\u62E9'\">\n        <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n          @for (listItem of menuItem; track trackByFn(i, listItem); let i = $index) {\n            <mat-list-item class=\"menu-item\"\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled,listItem.label);\">\n              <div matLine>{{listItem.label}}</div>\n            </mat-list-item>\n          }\n        </mat-list>\n      </mat-tab>\n    }\n  </mat-tab-group>\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$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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: "17.3.7", ngImport: i0, type: CmatCascadeBottomSheetComponent, deps: [{ token: MAT_BOTTOM_SHEET_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", 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)\">\n  <div class=\"sheet-header flex items-center\">\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\n    <button type=\"button\" mat-icon-button (click)=\"root.bottomSheetRef.dismiss()\">\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\n    </button>\n  </div>\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\n    @for (menuItem of root.steps; track trackByFn(step, menuItem); let step = $index) {\n      <mat-tab\n        [label]=\"labels[step] || '\u9009\u62E9'\">\n        <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n          @for (listItem of menuItem; track trackByFn(i, listItem); let i = $index) {\n            <mat-list-item class=\"menu-item\"\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled,listItem.label);\">\n              <div matLine>{{listItem.label}}</div>\n            </mat-list-item>\n          }\n        </mat-list>\n      </mat-tab>\n    }\n  </mat-tab-group>\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: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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: "17.2.4", ngImport: i0, type: CmatCascadeBottomSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatCascadeBottomSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-cascade-bottom-sheet', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeBottomSheet', standalone: true, imports: [MatButtonModule, MatTabsModule, MatListModule, MatIconModule], template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\n  <div class=\"sheet-header flex items-center\">\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\n    <button type=\"button\" mat-icon-button (click)=\"root.bottomSheetRef.dismiss()\">\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\n    </button>\n  </div>\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\n    @for (menuItem of root.steps; track trackByFn(step, menuItem); let step = $index) {\n      <mat-tab\n        [label]=\"labels[step] || '\u9009\u62E9'\">\n        <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\n          @for (listItem of menuItem; track trackByFn(i, listItem); let i = $index) {\n            <mat-list-item class=\"menu-item\"\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled,listItem.label);\">\n              <div matLine>{{listItem.label}}</div>\n            </mat-list-item>\n          }\n        </mat-list>\n      </mat-tab>\n    }\n  </mat-tab-group>\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: () => [{ type: CmatCascadeListComponent, decorators: [{