ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-cascader.mjs

@@ -1,7 +1,7 @@
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { NgTemplateOutlet, NgClass, isPlatformBrowser, NgStyle, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, Injectable, TemplateRef, inject, PLATFORM_ID, ChangeDetectorRef, ElementRef, NgZone, forwardRef, numberAttribute, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, Injectable, inject, PLATFORM_ID, ChangeDetectorRef, ElementRef, NgZone, TemplateRef, numberAttribute, viewChildren, viewChild, effect, forwardRef, Input, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ThyCheckbox, ThyCheckboxModule } from 'ngx-tethys/checkbox';
@@ -14,8 +14,8 @@ import { ThyRadio } from 'ngx-tethys/radio';
 import { coerceBooleanProperty, isEmpty, isArray, get, isUndefinedOrNull, helpers, set, elementMatchClosest } from 'ngx-tethys/util';
 import { ThyBreadcrumb, ThyBreadcrumbItem } from 'ngx-tethys/breadcrumb';
 import { useHostRenderer } from '@tethys/cdk/dom';
-import { TabIndexDisabledControlValueAccessorMixin, EXPANDED_DROPDOWN_POSITIONS, ScrollToService, ThyClickDispatcher, injectPanelEmptyIcon, DebounceTimeWrapper, scaleYMotion } from 'ngx-tethys/core';
-import { Subject, timer, BehaviorSubject, Observable } from 'rxjs';
+import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, injectPanelEmptyIcon, EXPANDED_DROPDOWN_POSITIONS, ScrollToService, DebounceTimeWrapper, scaleYMotion } from 'ngx-tethys/core';
+import { Subject, BehaviorSubject, timer, Observable } from 'rxjs';
 import { map, debounceTime, takeUntil, take, distinctUntilChanged, filter } from 'rxjs/operators';
 import { ThyDivider } from 'ngx-tethys/divider';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -25,134 +25,78 @@ import { injectLocale } from 'ngx-tethys/i18n';
  * @internal
  */
 class ThyCascaderOptionComponent {
-    get disabled() {
-        return this.option.disabled;
-    }
-    get expand() {
-        return this.option && !this.option.isLeaf;
-    }
     constructor() {
-        this.multiple = false;
-        this.isOnlySelectLeaf = true;
-        this.class = 'd-flex';
-        this.item = true;
-        this.active = false;
-        this.halfSelected = false;
-        this.selected = false;
-        this.labelProperty = 'label';
-        this.toggleSelectChange = new EventEmitter();
+        this.option = input();
+        this.multiple = input(false, { transform: coerceBooleanProperty });
+        this.isOnlySelectLeaf = input(true, { transform: coerceBooleanProperty });
+        this.optionRender = input();
+        this.active = input(false, { transform: coerceBooleanProperty });
+        this.halfSelected = input(false, { transform: coerceBooleanProperty });
+        this.selected = input(false, { transform: coerceBooleanProperty });
+        this.disabled = computed(() => this.option().disabled);
+        this.expand = computed(() => this.option() && !this.option().isLeaf);
+        this.labelProperty = input('label');
+        this.toggleSelectChange = output();
     }
     ngOnInit() { }
     toggleOption(value) {
         this.toggleSelectChange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCascaderOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCascaderOptionComponent, isStandalone: true, selector: "[thy-cascader-option]", inputs: { option: "option", multiple: ["multiple", "multiple", coerceBooleanProperty], isOnlySelectLeaf: ["isOnlySelectLeaf", "isOnlySelectLeaf", coerceBooleanProperty], optionRender: "optionRender", active: ["active", "active", coerceBooleanProperty], halfSelected: ["halfSelected", "halfSelected", coerceBooleanProperty], selected: ["selected", "selected", coerceBooleanProperty], labelProperty: "labelProperty" }, outputs: { toggleSelectChange: "toggleSelectChange" }, host: { properties: { "class": "this.class", "class.thy-cascader-menu-item": "this.item", "class.thy-cascader-menu-item-active": "this.active", "class.thy-cascader-menu-item-disabled": "this.disabled", "class.thy-cascader-menu-item-expand": "this.expand" } }, ngImport: i0, template: "@if (!option.readonly) {\n  <div thyStopPropagation>\n    @if (multiple) {\n      <label class=\"mr-2\" thyCheckbox [disabled]=\"option.disabled\" [name]=\"option.value || option._id\"\n      [thyIndeterminate]=\"halfSelected\" [(ngModel)]=\"selected\" (ngModelChange)=\"toggleOption($event)\"></label>\n    }\n    @if (!multiple && !isOnlySelectLeaf) {\n      <label class=\"mr-2\" thyRadio [disabled]=\"option.disabled\"\n      [name]=\"option.value || option._id\" [(ngModel)]=\"selected\" (ngModelChange)=\"toggleOption($event)\"></label>\n    }\n  </div>\n}\n\n\n@if (!optionRender) {\n  <span thyFlexibleText [thyTooltipContent]=\"option[labelProperty] || ''\"> {{ option[labelProperty] || '' }}</span>\n} @else {\n  <ng-template [ngTemplateOutlet]=\"optionRender\" [ngTemplateOutletContext]=\"{ option }\"></ng-template>\n}\n\n@if (!option.isLeaf || (option.children && option.children.length) || option.loading) {\n  <span\n    class=\"wtf wtf-angle-right thy-cascader-menu-item-expand-icon\">\n  </span>\n}\n", dependencies: [{ kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "component", type: ThyRadio, selector: "[thy-radio],[thyRadio]", inputs: ["thyValue"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCascaderOptionComponent, isStandalone: true, selector: "[thy-cascader-option]", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isOnlySelectLeaf: { classPropertyName: "isOnlySelectLeaf", publicName: "isOnlySelectLeaf", isSignal: true, isRequired: false, transformFunction: null }, optionRender: { classPropertyName: "optionRender", publicName: "optionRender", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, halfSelected: { classPropertyName: "halfSelected", publicName: "halfSelected", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, labelProperty: { classPropertyName: "labelProperty", publicName: "labelProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSelectChange: "toggleSelectChange" }, host: { properties: { "class.thy-cascader-menu-item-active": "active()", "class.thy-cascader-menu-item-disabled": "disabled()", "class.thy-cascader-menu-item-expand": "expand()" }, classAttribute: "d-flex thy-cascader-menu-item" }, ngImport: i0, template: "@if (!option().readonly) {\n  <div thyStopPropagation>\n    @if (multiple()) {\n      <label\n        class=\"mr-2\"\n        thyCheckbox\n        [disabled]=\"option().disabled\"\n        [name]=\"option().value || option()._id\"\n        [thyIndeterminate]=\"halfSelected()\"\n        [ngModel]=\"selected()\"\n        (ngModelChange)=\"toggleOption($event)\"></label>\n    }\n    @if (!multiple() && !isOnlySelectLeaf()) {\n      <label\n        class=\"mr-2\"\n        thyRadio\n        [disabled]=\"option().disabled\"\n        [name]=\"option().value || option()._id\"\n        [ngModel]=\"selected()\"\n        (ngModelChange)=\"toggleOption($event)\"></label>\n    }\n  </div>\n}\n\n@if (!optionRender()) {\n  <span thyFlexibleText [thyTooltipContent]=\"option()[labelProperty()] || ''\"> {{ option()[labelProperty()] || '' }}</span>\n} @else {\n  <ng-template [ngTemplateOutlet]=\"optionRender()\" [ngTemplateOutletContext]=\"{ option: option() }\"></ng-template>\n}\n\n@if (!option().isLeaf || (option().children && option().children.length) || option().loading) {\n  <span class=\"wtf wtf-angle-right thy-cascader-menu-item-expand-icon\"> </span>\n}\n", dependencies: [{ kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "component", type: ThyRadio, selector: "[thy-radio],[thyRadio]", inputs: ["thyValue"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCascaderOptionComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: '[thy-cascader-option]', imports: [ThyFlexibleText, ThyCheckbox, ThyRadio, FormsModule, ThyStopPropagationDirective, NgTemplateOutlet], template: "@if (!option.readonly) {\n  <div thyStopPropagation>\n    @if (multiple) {\n      <label class=\"mr-2\" thyCheckbox [disabled]=\"option.disabled\" [name]=\"option.value || option._id\"\n      [thyIndeterminate]=\"halfSelected\" [(ngModel)]=\"selected\" (ngModelChange)=\"toggleOption($event)\"></label>\n    }\n    @if (!multiple && !isOnlySelectLeaf) {\n      <label class=\"mr-2\" thyRadio [disabled]=\"option.disabled\"\n      [name]=\"option.value || option._id\" [(ngModel)]=\"selected\" (ngModelChange)=\"toggleOption($event)\"></label>\n    }\n  </div>\n}\n\n\n@if (!optionRender) {\n  <span thyFlexibleText [thyTooltipContent]=\"option[labelProperty] || ''\"> {{ option[labelProperty] || '' }}</span>\n} @else {\n  <ng-template [ngTemplateOutlet]=\"optionRender\" [ngTemplateOutletContext]=\"{ option }\"></ng-template>\n}\n\n@if (!option.isLeaf || (option.children && option.children.length) || option.loading) {\n  <span\n    class=\"wtf wtf-angle-right thy-cascader-menu-item-expand-icon\">\n  </span>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { option: [{
-                type: Input
-            }], multiple: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], isOnlySelectLeaf: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], optionRender: [{
-                type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], item: [{
-                type: HostBinding,
-                args: ['class.thy-cascader-menu-item']
-            }], active: [{
-                type: HostBinding,
-                args: ['class.thy-cascader-menu-item-active']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], halfSelected: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], selected: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], disabled: [{
-                type: HostBinding,
-                args: ['class.thy-cascader-menu-item-disabled']
-            }], expand: [{
-                type: HostBinding,
-                args: ['class.thy-cascader-menu-item-expand']
-            }], labelProperty: [{
-                type: Input
-            }], toggleSelectChange: [{
-                type: Output
-            }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: '[thy-cascader-option]', imports: [ThyFlexibleText, ThyCheckbox, ThyRadio, FormsModule, ThyStopPropagationDirective, NgTemplateOutlet], host: {
+                        class: 'd-flex thy-cascader-menu-item',
+                        '[class.thy-cascader-menu-item-active]': 'active()',
+                        '[class.thy-cascader-menu-item-disabled]': 'disabled()',
+                        '[class.thy-cascader-menu-item-expand]': 'expand()'
+                    }, template: "@if (!option().readonly) {\n  <div thyStopPropagation>\n    @if (multiple()) {\n      <label\n        class=\"mr-2\"\n        thyCheckbox\n        [disabled]=\"option().disabled\"\n        [name]=\"option().value || option()._id\"\n        [thyIndeterminate]=\"halfSelected()\"\n        [ngModel]=\"selected()\"\n        (ngModelChange)=\"toggleOption($event)\"></label>\n    }\n    @if (!multiple() && !isOnlySelectLeaf()) {\n      <label\n        class=\"mr-2\"\n        thyRadio\n        [disabled]=\"option().disabled\"\n        [name]=\"option().value || option()._id\"\n        [ngModel]=\"selected()\"\n        (ngModelChange)=\"toggleOption($event)\"></label>\n    }\n  </div>\n}\n\n@if (!optionRender()) {\n  <span thyFlexibleText [thyTooltipContent]=\"option()[labelProperty()] || ''\"> {{ option()[labelProperty()] || '' }}</span>\n} @else {\n  <ng-template [ngTemplateOutlet]=\"optionRender()\" [ngTemplateOutletContext]=\"{ option: option() }\"></ng-template>\n}\n\n@if (!option().isLeaf || (option().children && option().children.length) || option().loading) {\n  <span class=\"wtf wtf-angle-right thy-cascader-menu-item-expand-icon\"> </span>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * @internal
  */
 class ThyCascaderSearchOptionComponent {
     toggleClick($event) {
-        if (this.multiple) {
+        if (this.multiple()) {
             return;
         }
-        this.toggleSelectChange.emit(this.option);
+        this.toggleSelectChange.emit(this.option());
     }
     constructor() {
-        this.multiple = false;
-        this.isOnlySelectLeaf = true;
-        this.className = 'thy-cascader-search-list-item px-4 d-flex align-items-center cursor-pointer';
-        this.active = false;
-        this.toggleSelectChange = new EventEmitter();
+        this.option = input();
+        this.multiple = input(false, { transform: coerceBooleanProperty });
+        this.isOnlySelectLeaf = input(true, { transform: coerceBooleanProperty });
+        this.active = input(false, { transform: coerceBooleanProperty });
+        this.optionRender = input(undefined);
+        this.toggleSelectChange = output();
     }
     ngOnInit() { }
     clickCheckbox(event) {
         // 已选中的在搜索情况下不能取消选择
-        if (this.active) {
+        if (this.active()) {
             event.preventDefault();
             event.stopPropagation();
         }
     }
     toggleOption(value) {
-        this.toggleSelectChange.emit(this.option);
+        this.toggleSelectChange.emit(this.option());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCascaderSearchOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCascaderSearchOptionComponent, isStandalone: true, selector: "[thy-cascader-search-option]", inputs: { option: "option", multiple: ["multiple", "multiple", coerceBooleanProperty], isOnlySelectLeaf: ["isOnlySelectLeaf", "isOnlySelectLeaf", coerceBooleanProperty], active: ["active", "active", coerceBooleanProperty], optionRender: "optionRender" }, outputs: { toggleSelectChange: "toggleSelectChange" }, host: { listeners: { "click": "toggleClick($event)" }, properties: { "class.multiple": "this.multiple", "class": "this.className", "class.active": "this.active" } }, ngImport: i0, template: "@if (multiple) {\n  <label\n    class=\"mr-1\"\n    thyCheckbox\n    [disabled]=\"option.thyRowValue[option.thyRowValue.length - 1].disabled\"\n    [ngModel]=\"active\"\n    (click)=\"clickCheckbox($event)\"\n    (ngModelChange)=\"toggleOption($event)\"\n    [thyLabelText]=\"''\"></label>\n}\n\n<thy-breadcrumb thySeparator=\"slash\">\n  @for (label of option.labelList; track $index; let i = $index) {\n    <thy-breadcrumb-item [ngClass]=\"{ 'text-muted': !(option.thyRowValue[i].isLeaf && isOnlySelectLeaf) }\">\n      @if (!optionRender) {\n        <span class=\"option-label-item\" thyFlexibleText [thyTooltipContent]=\"label\">{{ label }}</span>\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"optionRender\" [ngTemplateOutletContext]=\"{ option: option.thyRowValue[i] }\"> </ng-template>\n      }\n    </thy-breadcrumb-item>\n  }\n</thy-breadcrumb>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "component", type: ThyBreadcrumb, selector: "thy-breadcrumb", inputs: ["thyIcon", "thySeparator", "thyItems", "thyMaxCount", "thyExpandable"], exportAs: ["ThyBreadcrumb"] }, { kind: "component", type: ThyBreadcrumbItem, selector: "thy-breadcrumb-item,[thyBreadcrumbItem]", exportAs: ["ThyBreadcrumbItem"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCascaderSearchOptionComponent, isStandalone: true, selector: "[thy-cascader-search-option]", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isOnlySelectLeaf: { classPropertyName: "isOnlySelectLeaf", publicName: "isOnlySelectLeaf", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, optionRender: { classPropertyName: "optionRender", publicName: "optionRender", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSelectChange: "toggleSelectChange" }, host: { listeners: { "click": "toggleClick($event)" }, properties: { "class.multiple": "multiple()", "class.active": "active()" }, classAttribute: "thy-cascader-search-list-item px-4 d-flex align-items-center cursor-pointer" }, ngImport: i0, template: "@if (multiple()) {\n  <label\n    class=\"mr-1\"\n    thyCheckbox\n    [disabled]=\"option().thyRowValue[option().thyRowValue.length - 1].disabled\"\n    [ngModel]=\"active()\"\n    (click)=\"clickCheckbox($event)\"\n    (ngModelChange)=\"toggleOption($event)\"\n    [thyLabelText]=\"''\"></label>\n}\n\n<thy-breadcrumb thySeparator=\"slash\">\n  @for (label of option().labelList; track $index; let i = $index) {\n    <thy-breadcrumb-item [ngClass]=\"{ 'text-muted': !(option().thyRowValue[i].isLeaf && isOnlySelectLeaf()) }\">\n      @if (!optionRender()) {\n        <span class=\"option-label-item\" thyFlexibleText [thyTooltipContent]=\"label\">{{ label }}</span>\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"optionRender()\" [ngTemplateOutletContext]=\"{ option: option().thyRowValue[i] }\"> </ng-template>\n      }\n    </thy-breadcrumb-item>\n  }\n</thy-breadcrumb>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "component", type: ThyBreadcrumb, selector: "thy-breadcrumb", inputs: ["thyIcon", "thySeparator", "thyItems", "thyMaxCount", "thyExpandable"], exportAs: ["ThyBreadcrumb"] }, { kind: "component", type: ThyBreadcrumbItem, selector: "thy-breadcrumb-item,[thyBreadcrumbItem]", exportAs: ["ThyBreadcrumbItem"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCascaderSearchOptionComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: '[thy-cascader-search-option]', imports: [NgClass, ThyFlexibleText, ThyCheckbox, ThyBreadcrumb, ThyBreadcrumbItem, FormsModule, NgTemplateOutlet], template: "@if (multiple) {\n  <label\n    class=\"mr-1\"\n    thyCheckbox\n    [disabled]=\"option.thyRowValue[option.thyRowValue.length - 1].disabled\"\n    [ngModel]=\"active\"\n    (click)=\"clickCheckbox($event)\"\n    (ngModelChange)=\"toggleOption($event)\"\n    [thyLabelText]=\"''\"></label>\n}\n\n<thy-breadcrumb thySeparator=\"slash\">\n  @for (label of option.labelList; track $index; let i = $index) {\n    <thy-breadcrumb-item [ngClass]=\"{ 'text-muted': !(option.thyRowValue[i].isLeaf && isOnlySelectLeaf) }\">\n      @if (!optionRender) {\n        <span class=\"option-label-item\" thyFlexibleText [thyTooltipContent]=\"label\">{{ label }}</span>\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"optionRender\" [ngTemplateOutletContext]=\"{ option: option.thyRowValue[i] }\"> </ng-template>\n      }\n    </thy-breadcrumb-item>\n  }\n</thy-breadcrumb>\n" }]
-        }], ctorParameters: () => [], propDecorators: { option: [{
-                type: Input
-            }], multiple: [{
-                type: HostBinding,
-                args: ['class.multiple']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], isOnlySelectLeaf: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }], active: [{
-                type: HostBinding,
-                args: ['class.active']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], optionRender: [{
-                type: Input
-            }], toggleClick: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: '[thy-cascader-search-option]', imports: [NgClass, ThyFlexibleText, ThyCheckbox, ThyBreadcrumb, ThyBreadcrumbItem, FormsModule, NgTemplateOutlet], host: {
+                        class: 'thy-cascader-search-list-item px-4 d-flex align-items-center cursor-pointer',
+                        '[class.multiple]': 'multiple()',
+                        '[class.active]': 'active()'
+                    }, template: "@if (multiple()) {\n  <label\n    class=\"mr-1\"\n    thyCheckbox\n    [disabled]=\"option().thyRowValue[option().thyRowValue.length - 1].disabled\"\n    [ngModel]=\"active()\"\n    (click)=\"clickCheckbox($event)\"\n    (ngModelChange)=\"toggleOption($event)\"\n    [thyLabelText]=\"''\"></label>\n}\n\n<thy-breadcrumb thySeparator=\"slash\">\n  @for (label of option().labelList; track $index; let i = $index) {\n    <thy-breadcrumb-item [ngClass]=\"{ 'text-muted': !(option().thyRowValue[i].isLeaf && isOnlySelectLeaf()) }\">\n      @if (!optionRender()) {\n        <span class=\"option-label-item\" thyFlexibleText [thyTooltipContent]=\"label\">{{ label }}</span>\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"optionRender()\" [ngTemplateOutletContext]=\"{ option: option().thyRowValue[i] }\"> </ng-template>\n      }\n    </thy-breadcrumb-item>\n  }\n</thy-breadcrumb>\n" }]
+        }], ctorParameters: () => [], propDecorators: { toggleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
-            }], toggleSelectChange: [{
-                type: Output
             }] } });
 
 const defaultDisplayRender = (label) => label.join(' / ');
@@ -712,72 +656,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @name thy-cascader
  */
 class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
-    /**
-     * 数据项
-     * @type ThyCascaderOption[]
-     * @default []
-     */
-    set thyOptions(options) {
-        const columns = options && options.length ? [options] : [];
-        this.thyCascaderService.initColumns(columns);
-        if (this.thyCascaderService.defaultValue && columns.length) {
-            this.thyCascaderService.initOptions(0);
-        }
-    }
-    /**
-     * 自定义选项
-     * @type ThyCascaderOption[]
-     * @default []
-     */
-    set thyCustomOptions(options) {
-        this.thyCascaderService.customOptions = (options || []).map(item => ({ ...item }));
-    }
-    get thyCustomOptions() {
-        return this.thyCascaderService.customOptions;
-    }
-    /**
-     * 用户自定义模板
-     * @type TemplateRef
-     */
-    set thyLabelRender(value) {
-        this.labelRenderTpl = value;
-        this.isLabelRenderTemplate = value instanceof TemplateRef;
-        this.thyCascaderService.setCascaderOptions({ isLabelRenderTemplate: this.isLabelRenderTemplate });
-    }
-    get thyLabelRender() {
-        return this.labelRenderTpl;
-    }
-    /**
-     * 用于动态加载选项
-     */
-    set thyLoadData(value) {
-        this.thyCascaderService.setCascaderOptions({ loadData: value });
-    }
-    get thyLoadData() {
-        return this.thyCascaderService?.cascaderOptions?.loadData;
-    }
-    /**
-     * 自定义浮层类名
-     * @type string
-     */
-    set thyMenuClassName(value) {
-        this.menuClassName = value;
-        this.setMenuClass();
-    }
-    get thyMenuClassName() {
-        return this.menuClassName;
-    }
-    /**
-     * 自定义浮层列类名
-     * @type string
-     */
-    set thyColumnClassName(value) {
-        this.columnClassName = value;
-        this.setMenuClass();
-    }
-    get thyColumnClassName() {
-        return this.columnClassName;
-    }
     /**
      * 是否只读
      * @default false
@@ -788,27 +666,8 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
     get thyDisabled() {
         return this.disabled;
     }
-    /**
-     * 空状态下的展示文字
-     * @default 暂无可选项
-     */
-    set thyEmptyStateText(value) {
-        this.emptyStateText = value;
-    }
-    /**
-     * 是否多选
-     * @type boolean
-     * @default false
-     */
-    set thyMultiple(value) {
-        this.isMultiple = value;
-        this.thyCascaderService.setCascaderOptions({ isMultiple: value });
-    }
-    get thyMultiple() {
-        return this.isMultiple;
-    }
     get selected() {
-        return this.thyMultiple ? this.thyCascaderService.selectionModel.selected : this.thyCascaderService.selectionModel.selected[0];
+        return this.thyMultiple() ? this.thyCascaderService.selectionModel.selected : this.thyCascaderService.selectionModel.selected[0];
     }
     get searchResultList() {
         return this.thyCascaderService.searchResultList;
@@ -819,22 +678,231 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
     get columns() {
         return this.thyCascaderService.columns;
     }
+    constructor() {
+        super();
+        this.platformId = inject(PLATFORM_ID);
+        this.cdr = inject(ChangeDetectorRef);
+        this.elementRef = inject(ElementRef);
+        this.thyClickDispatcher = inject(ThyClickDispatcher);
+        this.ngZone = inject(NgZone);
+        this.thyCascaderService = inject(ThyCascaderService);
+        this.locale = injectLocale('cascader');
+        this.emptyIcon = injectPanelEmptyIcon();
+        /**
+         * 选项的实际值的属性名
+         */
+        this.thyValueProperty = input('value');
+        /**
+         * 选项的显示值的属性名
+         */
+        this.thyLabelProperty = input('label');
+        /**
+         * 描述输入字段预期值的简短的提示信息
+         */
+        this.thyPlaceholder = input(this.locale().placeholder);
+        /**
+         * 控制大小（5种）
+         * @type 'xs' ｜ 'sm' | 'md' | 'lg' | ''
+         */
+        this.thySize = input('');
+        /**
+         * 数据项
+         * @type ThyCascaderOption[]
+         */
+        this.thyOptions = input([]);
+        /**
+         * 自定义选项
+         * @type ThyCascaderOption[]
+         */
+        this.thyCustomOptions = input([]);
+        /**
+         * 点击父级菜单选项时，可通过该函数判断是否允许值的变化
+         */
+        this.thyChangeOn = input();
+        /**
+         * 点击项时，表单是否动态展示数据项
+         * @type boolean
+         */
+        this.thyChangeOnSelect = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 显示输入框
+         * @type boolean
+         */
+        this.thyShowInput = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 用户自定义选项模板
+         * @type TemplateRef
+         */
+        this.thyOptionRender = input();
+        /**
+         * 用户自定义模板
+         * @type TemplateRef
+         */
+        this.thyLabelRender = input();
+        this.isLabelRenderTemplate = computed(() => {
+            return this.thyLabelRender() instanceof TemplateRef;
+        });
+        /**
+        /**
+         * 用于动态加载选项
+         */
+        this.thyLoadData = input();
+        /**
+         * 控制触发状态, 支持 `click` | `hover`
+         * @type ThyCascaderTriggerType | ThyCascaderTriggerType[]
+         */
+        this.thyTriggerAction = input(['click']);
+        /**
+         * 鼠标经过下方列表项时，是否自动展开列表，支持 `click` | `hover`
+         * @type ThyCascaderExpandTrigger | ThyCascaderExpandTrigger[]
+         */
+        this.thyExpandTriggerAction = input(['click']);
+        /**
+         * 自定义浮层样式
+         */
+        this.thyMenuStyle = input();
+        /**
+         * 自定义搜索样式
+         */
+        this.thySearchListStyle = input();
+        /**
+         * 自定义浮层类名
+         * @type string
+         */
+        this.thyMenuClassName = input();
+        /**
+         * 自定义浮层列类名
+         * @type string
+         */
+        this.thyColumnClassName = input();
+        this.menuColumnCls = computed(() => {
+            return {
+                [`${this.prefixCls}-menu`]: true,
+                [`${this.thyColumnClassName()}`]: this.thyColumnClassName()
+            };
+        });
+        this.disabled = false;
+        /**
+         * 空状态下的展示文字
+         * @default 暂无可选项
+         */
+        this.thyEmptyStateText = input();
+        /**
+         * 是否多选
+         * @type boolean
+         */
+        this.thyMultiple = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 设置多选时最大显示的标签数量，0 表示不限制
+         * @type number
+         */
+        this.thyMaxTagCount = input(0, { transform: numberAttribute });
+        /**
+         * 是否仅允许选择叶子项
+         * @default true
+         */
+        this.thyIsOnlySelectLeaf = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 初始化时，是否展开面板
+         */
+        this.thyAutoExpand = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 是否支持搜索
+         */
+        this.thyShowSearch = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 多选选中项的展示方式，默认为空，渲染文字模板，传入tag，渲染展示模板,
+         */
+        this.thyPreset = input('');
+        /**
+         * 是否有幕布
+         */
+        this.thyHasBackdrop = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 值发生变化时触发，返回选择项的值
+         * @type EventEmitter<any[]>
+         */
+        this.thyChange = output();
+        /**
+         * 值发生变化时触发，返回选择项列表
+         * @type EventEmitter<ThyCascaderOption[]>
+         */
+        this.thySelectionChange = output();
+        /**
+         * 选择选项时触发
+         */
+        this.thySelect = output();
+        /**
+         * @private 暂无实现
+         */
+        this.thyDeselect = output();
+        /**
+         * 清空选项时触发
+         */
+        this.thyClear = output();
+        /**
+         * 下拉选项展开和折叠状态事件
+         */
+        this.thyExpandStatusChange = output();
+        this.cascaderOptions = viewChildren('cascaderOptions', { read: ElementRef });
+        this.cascaderOptionContainers = viewChildren('cascaderOptionContainers', { read: ElementRef });
+        this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
+        this.trigger = viewChild('trigger');
+        this.input = viewChild('input');
+        this.menu = viewChild('menu');
+        this.dropDownPosition = 'bottom';
+        this.menuVisible = false;
+        this.prefixCls = 'thy-cascader';
+        this.destroy$ = new Subject();
+        this.hostRenderer = useHostRenderer();
+        this.menuMinWidth = 122;
+        this.searchText$ = new BehaviorSubject('');
+        this.isShowSearchPanel = false;
+        /**
+         * 解决搜索&多选的情况下，点击搜索项会导致 panel 闪烁
+         * 由于点击后，thySelectedOptions变化，导致 thySelectControl
+         * 又会触发 searchFilter 函数，即 resetSearch 会执行
+         * 会导致恢复级联状态再变为搜索状态
+         */
+        this.isSelectingSearchState = false;
+        this.selectOption = (option, index) => {
+            const isOnlySelectLeaf = this.thyIsOnlySelectLeaf();
+            if ((option.isLeaf || !isOnlySelectLeaf) && !this.thyMultiple()) {
+                this.afterChangeFn = () => {
+                    this.setMenuVisible(false);
+                    this.onTouchedFn();
+                };
+            }
+            this.thySelect.emit({ option, index });
+            const isOptionCanSelect = this.thyChangeOnSelect() && !this.thyMultiple();
+            if (option.isLeaf || !isOnlySelectLeaf || isOptionCanSelect || this.shouldPerformSelection(option, index)) {
+                this.thyCascaderService.selectOption(option, index);
+            }
+        };
+        effect(() => {
+            const options = this.thyOptions();
+            const columns = options && options.length ? [options] : [];
+            this.thyCascaderService.initColumns(columns);
+            if (this.thyCascaderService.defaultValue && columns.length) {
+                this.thyCascaderService.initOptions(0);
+            }
+        });
+        effect(() => {
+            this.thyCascaderService.customOptions = (this.thyCustomOptions() || []).map(item => ({ ...item }));
+        });
+        effect(() => {
+            this.setCascaderOptions();
+        });
+        effect(() => {
+            this.setMenuClass();
+        });
+    }
     ngOnInit() {
         this.setClassMap();
-        this.setMenuClass();
-        this.setMenuColumnClass();
         this.setLabelClass();
         this.initPosition();
         this.initSearch();
-        const options = {
-            labelProperty: this.thyLabelProperty,
-            valueProperty: this.thyValueProperty,
-            isMultiple: this.isMultiple,
-            isOnlySelectLeaf: this.thyIsOnlySelectLeaf,
-            isLabelRenderTemplate: this.isLabelRenderTemplate,
-            loadData: this.thyLoadData
-        };
-        this.thyCascaderService.setCascaderOptions(options);
+        this.setCascaderOptions();
         this.thyCascaderService.cascaderValueChange().subscribe(options => {
             if (!options.isValueEqual) {
                 this.onChangeFn(options.value);
@@ -855,7 +923,7 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
                 .pipe(takeUntil(this.destroy$))
                 .subscribe(event => {
                 if (!this.elementRef.nativeElement.contains(event.target) &&
-                    !this.menu?.nativeElement.contains(event.target) &&
+                    !this.menu()?.nativeElement.contains(event.target) &&
                     this.menuVisible) {
                     this.ngZone.run(() => {
                         this.closeMenu();
@@ -866,17 +934,23 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
         }
     }
     ngAfterContentInit() {
-        if (this.thyAutoExpand) {
+        if (this.thyAutoExpand()) {
             timer(0).subscribe(() => {
                 this.cdr.markForCheck();
                 this.setMenuVisible(true);
             });
         }
     }
-    ngOnChanges(changes) {
-        if (changes['thyIsOnlySelectLeaf']) {
-            this.thyCascaderService.setCascaderOptions({ isOnlySelectLeaf: changes['thyIsOnlySelectLeaf'].currentValue });
-        }
+    setCascaderOptions() {
+        const options = {
+            labelProperty: this.thyLabelProperty(),
+            valueProperty: this.thyValueProperty(),
+            isMultiple: this.thyMultiple(),
+            isOnlySelectLeaf: this.thyIsOnlySelectLeaf(),
+            isLabelRenderTemplate: this.isLabelRenderTemplate(),
+            loadData: this.thyLoadData()
+        };
+        this.thyCascaderService.setCascaderOptions(options);
     }
     initPosition() {
         const cascaderPosition = EXPANDED_DROPDOWN_POSITIONS.map(item => {
@@ -886,7 +960,7 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
     }
     writeValue(value) {
         this.thyCascaderService.writeCascaderValue(value);
-        if (this.isMultiple) {
+        if (this.thyMultiple()) {
             this.cdr.detectChanges();
         }
     }
@@ -911,17 +985,19 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
     }
     attached() {
         this.cdr.detectChanges();
-        this.cdkConnectedOverlay.positionChange.pipe(take(1), takeUntil(this.destroy$)).subscribe(() => {
+        this.cdkConnectedOverlay()
+            .positionChange.pipe(take(1), takeUntil(this.destroy$))
+            .subscribe(() => {
             this.scrollActiveElementIntoView();
         });
     }
     scrollActiveElementIntoView() {
         if (!isEmpty(this.thyCascaderService.selectedOptions)) {
-            const activeOptions = this.cascaderOptions
+            const activeOptions = this.cascaderOptions()
                 .filter(item => item.nativeElement.classList.contains('thy-cascader-menu-item-active'))
                 // for multiple mode
-                .slice(-this.cascaderOptionContainers.length);
-            this.cascaderOptionContainers.forEach((item, index) => {
+                .slice(-this.cascaderOptionContainers().length);
+            this.cascaderOptionContainers().forEach((item, index) => {
                 if (index <= activeOptions.length - 1) {
                     ScrollToService.scrollToElement(activeOptions[index].nativeElement, item.nativeElement);
                     this.cdr.detectChanges();
@@ -936,7 +1012,7 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
             this.setClassMap();
             this.setMenuClass();
             if (this.menuVisible) {
-                this.triggerRect = this.trigger.nativeElement.getBoundingClientRect();
+                this.triggerRect = this.trigger().nativeElement.getBoundingClientRect();
                 this.subscribeTriggerResize();
             }
             else {
@@ -945,31 +1021,16 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
             this.thyExpandStatusChange.emit(menuVisible);
         }
     }
-    get menuCls() {
-        return this._menuCls;
-    }
     setMenuClass() {
-        this._menuCls = {
+        this.menuCls = {
             [`${this.prefixCls}-menus`]: true,
             [`${this.prefixCls}-menus-hidden`]: !this.menuVisible,
-            [`${this.thyMenuClassName}`]: this.thyMenuClassName,
+            [`${this.thyMenuClassName()}`]: this.thyMenuClassName(),
             [`w-100`]: this.columns.length === 0
         };
     }
-    get menuColumnCls() {
-        return this._menuColumnCls;
-    }
-    setMenuColumnClass() {
-        this._menuColumnCls = {
-            [`${this.prefixCls}-menu`]: true,
-            [`${this.thyColumnClassName}`]: this.thyColumnClassName
-        };
-    }
-    get labelCls() {
-        return this._labelCls;
-    }
     setLabelClass() {
-        this._labelCls = {
+        this.labelCls = {
             [`${this.prefixCls}-picker-label`]: true,
             [`${this.prefixCls}-show-search`]: false,
             [`${this.prefixCls}-focused`]: false,
@@ -980,29 +1041,32 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
         const classMap = {
             [`${this.prefixCls}`]: true,
             [`${this.prefixCls}-picker`]: true,
-            [`${this.prefixCls}-${this.thySize}`]: true,
+            [`${this.prefixCls}-${this.thySize()}`]: true,
             [`${this.prefixCls}-picker-disabled`]: this.disabled,
             [`${this.prefixCls}-picker-open`]: this.menuVisible
         };
         this.hostRenderer.updateClassByMap(classMap);
     }
     isClickTriggerAction() {
-        if (typeof this.thyTriggerAction === 'string') {
-            return this.thyTriggerAction === 'click';
+        const thyTriggerAction = this.thyTriggerAction();
+        if (typeof thyTriggerAction === 'string') {
+            return thyTriggerAction === 'click';
         }
-        return this.thyTriggerAction.indexOf('click') !== -1;
+        return thyTriggerAction.indexOf('click') !== -1;
     }
     isHoverTriggerAction() {
-        if (typeof this.thyTriggerAction === 'string') {
-            return this.thyTriggerAction === 'hover';
+        const thyTriggerAction = this.thyTriggerAction();
+        if (typeof thyTriggerAction === 'string') {
+            return thyTriggerAction === 'hover';
         }
-        return this.thyTriggerAction.indexOf('hover') !== -1;
+        return thyTriggerAction.indexOf('hover') !== -1;
     }
     isHoverExpandTriggerAction() {
-        if (typeof this.thyExpandTriggerAction === 'string') {
-            return this.thyExpandTriggerAction === 'hover';
+        const thyExpandTriggerAction = this.thyExpandTriggerAction();
+        if (typeof thyExpandTriggerAction === 'string') {
+            return thyExpandTriggerAction === 'hover';
         }
-        return this.thyExpandTriggerAction.indexOf('hover') !== -1;
+        return thyExpandTriggerAction.indexOf('hover') !== -1;
     }
     toggleClick($event) {
         if (this.disabled) {
@@ -1041,11 +1105,11 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
     clickOption(option, index, event) {
         this.thyCascaderService.removeCustomOption();
         this.thyCascaderService.clickOption(option, index, event, this.selectOption);
-        if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
+        if (this.cdkConnectedOverlay() && this.cdkConnectedOverlay().overlayRef) {
             // Make sure to calculate and update the position after the submenu is opened
             this.cdr.detectChanges();
             // Update the position to prevent the submenu from appearing off-screen
-            this.cdkConnectedOverlay.overlayRef.updatePosition();
+            this.cdkConnectedOverlay().overlayRef.updatePosition();
             this.cdr.markForCheck();
         }
     }
@@ -1053,10 +1117,10 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
         if (event) {
             event.preventDefault();
         }
-        if (option && option.disabled && !this.isMultiple) {
+        if (option && option.disabled && !this.thyMultiple()) {
             return;
         }
-        if (!this.isHoverExpandTriggerAction() && !(option && option.disabled && this.isMultiple)) {
+        if (!this.isHoverExpandTriggerAction() && !(option && option.disabled && this.thyMultiple())) {
             return;
         }
         this.setActiveOption(option, index, false);
@@ -1090,7 +1154,8 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
         this.thyCascaderService.removeSelectedItem(event?.item);
     }
     shouldPerformSelection(option, level) {
-        return typeof this.thyChangeOn === 'function' ? this.thyChangeOn(option, level) === true : false;
+        const thyChangeOn = this.thyChangeOn();
+        return typeof thyChangeOn === 'function' ? thyChangeOn(option, level) === true : false;
     }
     clearSelection($event) {
         if ($event) {
@@ -1102,136 +1167,6 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
         };
         this.thyCascaderService.clearSelection();
     }
-    constructor() {
-        super();
-        this.platformId = inject(PLATFORM_ID);
-        this.cdr = inject(ChangeDetectorRef);
-        this.elementRef = inject(ElementRef);
-        this.thyClickDispatcher = inject(ThyClickDispatcher);
-        this.ngZone = inject(NgZone);
-        this.thyCascaderService = inject(ThyCascaderService);
-        this.locale = injectLocale('cascader');
-        this.emptyIcon = injectPanelEmptyIcon();
-        /**
-         * 选项的实际值的属性名
-         */
-        this.thyValueProperty = 'value';
-        /**
-         * 选项的显示值的属性名
-         */
-        this.thyLabelProperty = 'label';
-        /**
-         * 描述输入字段预期值的简短的提示信息
-         */
-        this.thyPlaceholder = this.locale().placeholder;
-        /**
-         * 控制大小（5种）
-         * @type 'xs' ｜ 'sm' | 'md' | 'lg' | ''
-         */
-        this.thySize = '';
-        /**
-         * 点击项时，表单是否动态展示数据项
-         * @type boolean
-         */
-        this.thyChangeOnSelect = false;
-        /**
-         * 显示输入框
-         * @type boolean
-         */
-        this.thyShowInput = true;
-        /**
-         * 控制触发状态, 支持 `click` | `hover`
-         * @type ThyCascaderTriggerType | ThyCascaderTriggerType[]
-         */
-        this.thyTriggerAction = ['click'];
-        /**
-         * 鼠标经过下方列表项时，是否自动展开列表，支持 `click` | `hover`
-         * @type ThyCascaderExpandTrigger | ThyCascaderExpandTrigger[]
-         */
-        this.thyExpandTriggerAction = ['click'];
-        this.disabled = false;
-        /**
-         * 设置多选时最大显示的标签数量，0 表示不限制
-         * @type number
-         */
-        this.thyMaxTagCount = 0;
-        /**
-         * 是否仅允许选择叶子项
-         * @default true
-         */
-        this.thyIsOnlySelectLeaf = true;
-        /**
-         * 是否支持搜索
-         * @default false
-         */
-        this.thyShowSearch = false;
-        /**
-         * 多选选中项的展示方式，默认为空，渲染文字模板，传入tag，渲染展示模板,
-         * @default ''｜tag
-         */
-        this.thyPreset = '';
-        /**
-         * 是否有幕布
-         */
-        this.thyHasBackdrop = true;
-        /**
-         * 值发生变化时触发，返回选择项的值
-         * @type EventEmitter<any[]>
-         */
-        this.thyChange = new EventEmitter();
-        /**
-         * 值发生变化时触发，返回选择项列表
-         * @type EventEmitter<ThyCascaderOption[]>
-         */
-        this.thySelectionChange = new EventEmitter();
-        /**
-         * 选择选项时触发
-         */
-        this.thySelect = new EventEmitter();
-        /**
-         * @private 暂无实现
-         */
-        this.thyDeselect = new EventEmitter();
-        /**
-         * 清空选项时触发
-         */
-        this.thyClear = new EventEmitter();
-        /**
-         * 下拉选项展开和折叠状态事件
-         */
-        this.thyExpandStatusChange = new EventEmitter();
-        this.dropDownPosition = 'bottom';
-        this.menuVisible = false;
-        this.isLabelRenderTemplate = false;
-        this.emptyStateText = this.locale().empty;
-        this.prefixCls = 'thy-cascader';
-        this.destroy$ = new Subject();
-        this.hostRenderer = useHostRenderer();
-        this.isMultiple = false;
-        this.menuMinWidth = 122;
-        this.searchText$ = new BehaviorSubject('');
-        this.isShowSearchPanel = false;
-        /**
-         * 解决搜索&多选的情况下，点击搜索项会导致 panel 闪烁
-         * 由于点击后，thySelectedOptions变化，导致 thySelectControl
-         * 又会触发 searchFilter 函数，即 resetSearch 会执行
-         * 会导致恢复级联状态再变为搜索状态
-         */
-        this.isSelectingSearchState = false;
-        this.selectOption = (option, index) => {
-            if ((option.isLeaf || !this.thyIsOnlySelectLeaf) && !this.thyMultiple) {
-                this.afterChangeFn = () => {
-                    this.setMenuVisible(false);
-                    this.onTouchedFn();
-                };
-            }
-            this.thySelect.emit({ option, index });
-            const isOptionCanSelect = this.thyChangeOnSelect && !this.isMultiple;
-            if (option.isLeaf || !this.thyIsOnlySelectLeaf || isOptionCanSelect || this.shouldPerformSelection(option, index)) {
-                this.thyCascaderService.selectOption(option, index);
-            }
-        };
-    }
     trackByFn(index, item) {
         return item?.value || item?._id || index;
     }
@@ -1263,7 +1198,7 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
     selectSearchResult(selectOptionData) {
         const { thyRowValue: selectedOptions } = selectOptionData;
         if (selectOptionData.selected) {
-            if (!this.isMultiple) {
+            if (!this.thyMultiple()) {
                 this.closeMenu();
             }
             return;
@@ -1271,7 +1206,7 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
         selectedOptions.forEach((item, index) => {
             this.setActiveOption(item, index, index === selectedOptions.length - 1);
         });
-        if (this.isMultiple) {
+        if (this.thyMultiple()) {
             this.isSelectingSearchState = true;
             selectOptionData.selected = true;
             const originSearchResultList = this.searchResultList;
@@ -1293,12 +1228,12 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
                 const resize = new ResizeObserver((entries) => {
                     observer.next(null);
                 });
-                resize.observe(this.trigger.nativeElement);
+                resize.observe(this.trigger().nativeElement);
             }).subscribe(() => {
                 this.ngZone.run(() => {
-                    this.triggerRect = this.trigger.nativeElement.getBoundingClientRect();
-                    if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
-                        this.cdkConnectedOverlay.overlayRef.updatePosition();
+                    this.triggerRect = this.trigger().nativeElement.getBoundingClientRect();
+                    if (this.cdkConnectedOverlay() && this.cdkConnectedOverlay().overlayRef) {
+                        this.cdkConnectedOverlay().overlayRef.updatePosition();
                     }
                     this.cdr.markForCheck();
                 });
@@ -1317,14 +1252,14 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCascader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCascader, isStandalone: true, selector: "thy-cascader,[thy-cascader]", inputs: { thyValueProperty: "thyValueProperty", thyLabelProperty: "thyLabelProperty", thyPlaceholder: "thyPlaceholder", thySize: "thySize", thyOptions: "thyOptions", thyCustomOptions: "thyCustomOptions", thyChangeOn: "thyChangeOn", thyChangeOnSelect: ["thyChangeOnSelect", "thyChangeOnSelect", coerceBooleanProperty], thyShowInput: ["thyShowInput", "thyShowInput", coerceBooleanProperty], thyOptionRender: "thyOptionRender", thyLabelRender: "thyLabelRender", thyLoadData: "thyLoadData", thyTriggerAction: "thyTriggerAction", thyExpandTriggerAction: "thyExpandTriggerAction", thyMenuStyle: "thyMenuStyle", thySearchListStyle: "thySearchListStyle", thyMenuClassName: "thyMenuClassName", thyColumnClassName: "thyColumnClassName", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyEmptyStateText: "thyEmptyStateText", thyMultiple: ["thyMultiple", "thyMultiple", coerceBooleanProperty], thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyIsOnlySelectLeaf: ["thyIsOnlySelectLeaf", "thyIsOnlySelectLeaf", coerceBooleanProperty], thyAutoExpand: ["thyAutoExpand", "thyAutoExpand", coerceBooleanProperty], thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thyPreset: "thyPreset", thyHasBackdrop: ["thyHasBackdrop", "thyHasBackdrop", coerceBooleanProperty] }, outputs: { thyChange: "thyChange", thySelectionChange: "thySelectionChange", thySelect: "thySelect", thyDeselect: "thyDeselect", thyClear: "thyClear", thyExpandStatusChange: "thyExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "toggleClick($event)", "mouseenter": "toggleMouseEnter($event)", "mouseleave": "toggleMouseLeave($event)" }, properties: { "attr.tabindex": "tabIndex" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyCascader, isStandalone: true, selector: "thy-cascader,[thy-cascader]", inputs: { thyValueProperty: { classPropertyName: "thyValueProperty", publicName: "thyValueProperty", isSignal: true, isRequired: false, transformFunction: null }, thyLabelProperty: { classPropertyName: "thyLabelProperty", publicName: "thyLabelProperty", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyOptions: { classPropertyName: "thyOptions", publicName: "thyOptions", isSignal: true, isRequired: false, transformFunction: null }, thyCustomOptions: { classPropertyName: "thyCustomOptions", publicName: "thyCustomOptions", isSignal: true, isRequired: false, transformFunction: null }, thyChangeOn: { classPropertyName: "thyChangeOn", publicName: "thyChangeOn", isSignal: true, isRequired: false, transformFunction: null }, thyChangeOnSelect: { classPropertyName: "thyChangeOnSelect", publicName: "thyChangeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, thyShowInput: { classPropertyName: "thyShowInput", publicName: "thyShowInput", isSignal: true, isRequired: false, transformFunction: null }, thyOptionRender: { classPropertyName: "thyOptionRender", publicName: "thyOptionRender", isSignal: true, isRequired: false, transformFunction: null }, thyLabelRender: { classPropertyName: "thyLabelRender", publicName: "thyLabelRender", isSignal: true, isRequired: false, transformFunction: null }, thyLoadData: { classPropertyName: "thyLoadData", publicName: "thyLoadData", isSignal: true, isRequired: false, transformFunction: null }, thyTriggerAction: { classPropertyName: "thyTriggerAction", publicName: "thyTriggerAction", isSignal: true, isRequired: false, transformFunction: null }, thyExpandTriggerAction: { classPropertyName: "thyExpandTriggerAction", publicName: "thyExpandTriggerAction", isSignal: true, isRequired: false, transformFunction: null }, thyMenuStyle: { classPropertyName: "thyMenuStyle", publicName: "thyMenuStyle", isSignal: true, isRequired: false, transformFunction: null }, thySearchListStyle: { classPropertyName: "thySearchListStyle", publicName: "thySearchListStyle", isSignal: true, isRequired: false, transformFunction: null }, thyMenuClassName: { classPropertyName: "thyMenuClassName", publicName: "thyMenuClassName", isSignal: true, isRequired: false, transformFunction: null }, thyColumnClassName: { classPropertyName: "thyColumnClassName", publicName: "thyColumnClassName", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyEmptyStateText: { classPropertyName: "thyEmptyStateText", publicName: "thyEmptyStateText", isSignal: true, isRequired: false, transformFunction: null }, thyMultiple: { classPropertyName: "thyMultiple", publicName: "thyMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyIsOnlySelectLeaf: { classPropertyName: "thyIsOnlySelectLeaf", publicName: "thyIsOnlySelectLeaf", isSignal: true, isRequired: false, transformFunction: null }, thyAutoExpand: { classPropertyName: "thyAutoExpand", publicName: "thyAutoExpand", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyChange: "thyChange", thySelectionChange: "thySelectionChange", thySelect: "thySelect", thyDeselect: "thyDeselect", thyClear: "thyClear", thyExpandStatusChange: "thyExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "toggleClick($event)", "mouseenter": "toggleMouseEnter($event)", "mouseleave": "toggleMouseLeave($event)" }, properties: { "attr.tabindex": "tabIndex" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyCascader),
                 multi: true
             },
             ThyCascaderService
-        ], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "cascaderOptions", predicate: ["cascaderOptions"], descendants: true, read: ElementRef }, { propertyName: "cascaderOptionContainers", predicate: ["cascaderOptionContainers"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" #trigger>\n  @if (thyShowInput) {\n    <div\n      thySelectControl\n      [thyShowSearch]=\"thyShowSearch\"\n      [thySize]=\"thySize\"\n      [thyAllowClear]=\"true\"\n      [thySelectedOptions]=\"selected\"\n      [thyMaxTagCount]=\"thyMaxTagCount\"\n      (thyOnRemove)=\"removeSelectedItem($event)\"\n      (thyOnClear)=\"clearSelection($event)\"\n      (thyOnBlur)=\"onBlur($event)\"\n      (thyOnSearch)=\"searchFilter($event)\"\n      [thyDisabled]=\"disabled\"\n      [thyIsMultiple]=\"thyMultiple\"\n      [thyPanelOpened]=\"menuVisible\"\n      [thyPlaceholder]=\"thyPlaceholder\"\n      [customDisplayTemplate]=\"customDisplayTemplate\"\n      [thyPreset]=\"thyPreset\">\n      <ng-template #customDisplayTemplate let-value>\n        @if (!isLabelRenderTemplate) {\n          <span [ngClass]=\"labelCls\">{{ value.labelText }}</span>\n        } @else {\n          <span [ngClass]=\"labelCls\">\n            <ng-template [ngTemplateOutlet]=\"thyLabelRender\" [ngTemplateOutletContext]=\"value.labelRenderContext\"></ng-template>\n          </span>\n        }\n      </ng-template>\n    </div>\n  }\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop\"\n  cdkConnectedOverlayBackdropClass=\"thy-cascader-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayMinWidth]=\"menuMinWidth\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-cascader-menus\"\n  (backdropClick)=\"closeMenu()\"\n  (detach)=\"closeMenu()\"\n  (attach)=\"attached()\"\n  (positionChange)=\"positionChange($event)\"\n  [cdkConnectedOverlayOpen]=\"menuVisible\">\n  <div\n    [attr.tabindex]=\"-1\"\n    #menu\n    [ngClass]=\"menuCls\"\n    [ngStyle]=\"thyMenuStyle\"\n    (mouseleave)=\"toggleMouseLeave($event)\"\n    [@scaleYMotion]=\"'enter'\">\n    @if (!isShowSearchPanel) {\n      @if (columns.length > 0) {\n        @for (options of columns; track $index; let i = $index; let isFirst = $first) {\n          <ul #cascaderOptionContainers [ngClass]=\"menuColumnCls\">\n            @if (thyCustomOptions && thyCustomOptions.length > 0 && isFirst) {\n              @for (customOpt of thyCustomOptions; track trackByFn($index, customOpt)) {\n                <li\n                  #cascaderOptions\n                  thy-cascader-option\n                  [option]=\"customOpt\"\n                  [multiple]=\"thyMultiple\"\n                  [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf\"\n                  [labelProperty]=\"thyLabelProperty\"\n                  [active]=\"isActivatedOption(customOpt, 0)\"\n                  [halfSelected]=\"isHalfSelectedOption(customOpt, 0)\"\n                  [selected]=\"isSelectedOption(customOpt, 0)\"\n                  (toggleSelectChange)=\"clickCustomOption(customOpt, 0, $event)\"\n                  (click)=\"clickCustomOption(customOpt, 0, $event)\"\n                  (mouseover)=\"mouseoverOption(customOpt, 0, $event)\"></li>\n              }\n              <thy-divider class=\"my-1 mx-4\"></thy-divider>\n            }\n            @for (option of options; track trackByFn($index, option)) {\n              <li\n                #cascaderOptions\n                thy-cascader-option\n                [option]=\"option\"\n                [multiple]=\"thyMultiple\"\n                [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf\"\n                [labelProperty]=\"thyLabelProperty\"\n                [active]=\"isActivatedOption(option, i)\"\n                [halfSelected]=\"isHalfSelectedOption(option, i)\"\n                [selected]=\"isSelectedOption(option, i)\"\n                [optionRender]=\"thyOptionRender\"\n                (toggleSelectChange)=\"clickOption(option, i, $event)\"\n                (click)=\"clickOption(option, i, $event)\"\n                (mouseover)=\"mouseoverOption(option, i, $event)\"></li>\n            }\n          </ul>\n        }\n      } @else {\n        <div class=\"thy-cascader-empty-container\" [ngStyle]=\"{ 'width.px': triggerRect?.width }\">\n          <thy-empty class=\"thy-select-empty-content\" thySize=\"sm\" [thyMessage]=\"emptyStateText\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        </div>\n      }\n    }\n    @if (isShowSearchPanel) {\n      @if (searchResultList.length) {\n        <ul class=\"thy-cascader-search-list py-3\" [ngStyle]=\"thySearchListStyle\">\n          @for (item of searchResultList; track $index) {\n            <li\n              thy-cascader-search-option\n              [multiple]=\"thyMultiple\"\n              [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf\"\n              [option]=\"item\"\n              [active]=\"item.selected\"\n              [optionRender]=\"thyOptionRender\"\n              (toggleSelectChange)=\"selectSearchResult($event)\"></li>\n          }\n        </ul>\n      } @else {\n        <div class=\"thy-cascader-empty-container\" [ngStyle]=\"{ 'width.px': triggerRect?.width }\">\n          <thy-empty class=\"thy-select-empty-content\" thySize=\"sm\" [thyMessage]=\"emptyStateText\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThySelectControl, selector: "thy-select-control,[thySelectControl]", inputs: ["thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyCascaderOptionComponent, selector: "[thy-cascader-option]", inputs: ["option", "multiple", "isOnlySelectLeaf", "optionRender", "active", "halfSelected", "selected", "labelProperty"], outputs: ["toggleSelectChange"] }, { kind: "component", type: ThyCascaderSearchOptionComponent, selector: "[thy-cascader-search-option]", inputs: ["option", "multiple", "isOnlySelectLeaf", "active", "optionRender"], outputs: ["toggleSelectChange"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], animations: [scaleYMotion] }); }
+        ], viewQueries: [{ propertyName: "cascaderOptions", predicate: ["cascaderOptions"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cascaderOptionContainers", predicate: ["cascaderOptionContainers"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" #trigger>\n  @if (thyShowInput()) {\n    <div\n      thySelectControl\n      [thyShowSearch]=\"thyShowSearch()\"\n      [thySize]=\"thySize()\"\n      [thyAllowClear]=\"true\"\n      [thySelectedOptions]=\"selected\"\n      [thyMaxTagCount]=\"thyMaxTagCount()\"\n      (thyOnRemove)=\"removeSelectedItem($event)\"\n      (thyOnClear)=\"clearSelection($event)\"\n      (thyOnBlur)=\"onBlur($event)\"\n      (thyOnSearch)=\"searchFilter($event)\"\n      [thyDisabled]=\"disabled\"\n      [thyIsMultiple]=\"thyMultiple()\"\n      [thyPanelOpened]=\"menuVisible\"\n      [thyPlaceholder]=\"thyPlaceholder()\"\n      [customDisplayTemplate]=\"customDisplayTemplate\"\n      [thyPreset]=\"thyPreset()\">\n      <ng-template #customDisplayTemplate let-value>\n        @if (!isLabelRenderTemplate()) {\n          <span [ngClass]=\"labelCls\">{{ value.labelText }}</span>\n        } @else {\n          <span [ngClass]=\"labelCls\">\n            <ng-template [ngTemplateOutlet]=\"thyLabelRender()\" [ngTemplateOutletContext]=\"value.labelRenderContext\"></ng-template>\n          </span>\n        }\n      </ng-template>\n    </div>\n  }\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop()\"\n  cdkConnectedOverlayBackdropClass=\"thy-cascader-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayMinWidth]=\"menuMinWidth\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-cascader-menus\"\n  (backdropClick)=\"closeMenu()\"\n  (detach)=\"closeMenu()\"\n  (attach)=\"attached()\"\n  (positionChange)=\"positionChange($event)\"\n  [cdkConnectedOverlayOpen]=\"menuVisible\">\n  <div\n    [attr.tabindex]=\"-1\"\n    #menu\n    [ngClass]=\"menuCls\"\n    [ngStyle]=\"thyMenuStyle()\"\n    (mouseleave)=\"toggleMouseLeave($event)\"\n    [@scaleYMotion]=\"'enter'\">\n    @if (!isShowSearchPanel) {\n      @if (columns.length > 0) {\n        @for (options of columns; track $index; let i = $index; let isFirst = $first) {\n          <ul #cascaderOptionContainers [ngClass]=\"menuColumnCls()\">\n            @if (thyCascaderService.customOptions && thyCascaderService.customOptions.length > 0 && isFirst) {\n              @for (customOpt of thyCascaderService.customOptions; track trackByFn($index, customOpt)) {\n                <li\n                  #cascaderOptions\n                  thy-cascader-option\n                  [option]=\"customOpt\"\n                  [multiple]=\"thyMultiple()\"\n                  [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n                  [labelProperty]=\"thyLabelProperty()\"\n                  [active]=\"isActivatedOption(customOpt, 0)\"\n                  [halfSelected]=\"isHalfSelectedOption(customOpt, 0)\"\n                  [selected]=\"isSelectedOption(customOpt, 0)\"\n                  (toggleSelectChange)=\"clickCustomOption(customOpt, 0, $event)\"\n                  (click)=\"clickCustomOption(customOpt, 0, $event)\"\n                  (mouseover)=\"mouseoverOption(customOpt, 0, $event)\"></li>\n              }\n              <thy-divider class=\"my-1 mx-4\"></thy-divider>\n            }\n            @for (option of options; track trackByFn($index, option)) {\n              <li\n                #cascaderOptions\n                thy-cascader-option\n                [option]=\"option\"\n                [multiple]=\"thyMultiple()\"\n                [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n                [labelProperty]=\"thyLabelProperty()\"\n                [active]=\"isActivatedOption(option, i)\"\n                [halfSelected]=\"isHalfSelectedOption(option, i)\"\n                [selected]=\"isSelectedOption(option, i)\"\n                [optionRender]=\"thyOptionRender()\"\n                (toggleSelectChange)=\"clickOption(option, i, $event)\"\n                (click)=\"clickOption(option, i, $event)\"\n                (mouseover)=\"mouseoverOption(option, i, $event)\"></li>\n            }\n          </ul>\n        }\n      } @else {\n        <div class=\"thy-cascader-empty-container\" [ngStyle]=\"{ 'width.px': triggerRect?.width }\">\n          <thy-empty\n            class=\"thy-select-empty-content\"\n            thySize=\"sm\"\n            [thyMessage]=\"thyEmptyStateText()\"\n            [thyIconName]=\"emptyIcon()\"></thy-empty>\n        </div>\n      }\n    }\n    @if (isShowSearchPanel) {\n      @if (searchResultList.length) {\n        <ul class=\"thy-cascader-search-list py-3\" [ngStyle]=\"thySearchListStyle()\">\n          @for (item of searchResultList; track $index) {\n            <li\n              thy-cascader-search-option\n              [multiple]=\"thyMultiple()\"\n              [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n              [option]=\"item\"\n              [active]=\"item.selected\"\n              [optionRender]=\"thyOptionRender()\"\n              (toggleSelectChange)=\"selectSearchResult($event)\"></li>\n          }\n        </ul>\n      } @else {\n        <div class=\"thy-cascader-empty-container\" [ngStyle]=\"{ 'width.px': triggerRect?.width }\">\n          <thy-empty\n            class=\"thy-select-empty-content\"\n            thySize=\"sm\"\n            [thyMessage]=\"thyEmptyStateText()\"\n            [thyIconName]=\"emptyIcon()\"></thy-empty>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThySelectControl, selector: "thy-select-control,[thySelectControl]", inputs: ["thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyCascaderOptionComponent, selector: "[thy-cascader-option]", inputs: ["option", "multiple", "isOnlySelectLeaf", "optionRender", "active", "halfSelected", "selected", "labelProperty"], outputs: ["toggleSelectChange"] }, { kind: "component", type: ThyCascaderSearchOptionComponent, selector: "[thy-cascader-search-option]", inputs: ["option", "multiple", "isOnlySelectLeaf", "active", "optionRender"], outputs: ["toggleSelectChange"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], animations: [scaleYMotion] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCascader, decorators: [{
             type: Component,
@@ -1350,100 +1285,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         ThyCascaderSearchOptionComponent,
                         ThyEmpty,
                         ThyDivider
-                    ], animations: [scaleYMotion], template: "<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" #trigger>\n  @if (thyShowInput) {\n    <div\n      thySelectControl\n      [thyShowSearch]=\"thyShowSearch\"\n      [thySize]=\"thySize\"\n      [thyAllowClear]=\"true\"\n      [thySelectedOptions]=\"selected\"\n      [thyMaxTagCount]=\"thyMaxTagCount\"\n      (thyOnRemove)=\"removeSelectedItem($event)\"\n      (thyOnClear)=\"clearSelection($event)\"\n      (thyOnBlur)=\"onBlur($event)\"\n      (thyOnSearch)=\"searchFilter($event)\"\n      [thyDisabled]=\"disabled\"\n      [thyIsMultiple]=\"thyMultiple\"\n      [thyPanelOpened]=\"menuVisible\"\n      [thyPlaceholder]=\"thyPlaceholder\"\n      [customDisplayTemplate]=\"customDisplayTemplate\"\n      [thyPreset]=\"thyPreset\">\n      <ng-template #customDisplayTemplate let-value>\n        @if (!isLabelRenderTemplate) {\n          <span [ngClass]=\"labelCls\">{{ value.labelText }}</span>\n        } @else {\n          <span [ngClass]=\"labelCls\">\n            <ng-template [ngTemplateOutlet]=\"thyLabelRender\" [ngTemplateOutletContext]=\"value.labelRenderContext\"></ng-template>\n          </span>\n        }\n      </ng-template>\n    </div>\n  }\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop\"\n  cdkConnectedOverlayBackdropClass=\"thy-cascader-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayMinWidth]=\"menuMinWidth\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-cascader-menus\"\n  (backdropClick)=\"closeMenu()\"\n  (detach)=\"closeMenu()\"\n  (attach)=\"attached()\"\n  (positionChange)=\"positionChange($event)\"\n  [cdkConnectedOverlayOpen]=\"menuVisible\">\n  <div\n    [attr.tabindex]=\"-1\"\n    #menu\n    [ngClass]=\"menuCls\"\n    [ngStyle]=\"thyMenuStyle\"\n    (mouseleave)=\"toggleMouseLeave($event)\"\n    [@scaleYMotion]=\"'enter'\">\n    @if (!isShowSearchPanel) {\n      @if (columns.length > 0) {\n        @for (options of columns; track $index; let i = $index; let isFirst = $first) {\n          <ul #cascaderOptionContainers [ngClass]=\"menuColumnCls\">\n            @if (thyCustomOptions && thyCustomOptions.length > 0 && isFirst) {\n              @for (customOpt of thyCustomOptions; track trackByFn($index, customOpt)) {\n                <li\n                  #cascaderOptions\n                  thy-cascader-option\n                  [option]=\"customOpt\"\n                  [multiple]=\"thyMultiple\"\n                  [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf\"\n                  [labelProperty]=\"thyLabelProperty\"\n                  [active]=\"isActivatedOption(customOpt, 0)\"\n                  [halfSelected]=\"isHalfSelectedOption(customOpt, 0)\"\n                  [selected]=\"isSelectedOption(customOpt, 0)\"\n                  (toggleSelectChange)=\"clickCustomOption(customOpt, 0, $event)\"\n                  (click)=\"clickCustomOption(customOpt, 0, $event)\"\n                  (mouseover)=\"mouseoverOption(customOpt, 0, $event)\"></li>\n              }\n              <thy-divider class=\"my-1 mx-4\"></thy-divider>\n            }\n            @for (option of options; track trackByFn($index, option)) {\n              <li\n                #cascaderOptions\n                thy-cascader-option\n                [option]=\"option\"\n                [multiple]=\"thyMultiple\"\n                [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf\"\n                [labelProperty]=\"thyLabelProperty\"\n                [active]=\"isActivatedOption(option, i)\"\n                [halfSelected]=\"isHalfSelectedOption(option, i)\"\n                [selected]=\"isSelectedOption(option, i)\"\n                [optionRender]=\"thyOptionRender\"\n                (toggleSelectChange)=\"clickOption(option, i, $event)\"\n                (click)=\"clickOption(option, i, $event)\"\n                (mouseover)=\"mouseoverOption(option, i, $event)\"></li>\n            }\n          </ul>\n        }\n      } @else {\n        <div class=\"thy-cascader-empty-container\" [ngStyle]=\"{ 'width.px': triggerRect?.width }\">\n          <thy-empty class=\"thy-select-empty-content\" thySize=\"sm\" [thyMessage]=\"emptyStateText\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        </div>\n      }\n    }\n    @if (isShowSearchPanel) {\n      @if (searchResultList.length) {\n        <ul class=\"thy-cascader-search-list py-3\" [ngStyle]=\"thySearchListStyle\">\n          @for (item of searchResultList; track $index) {\n            <li\n              thy-cascader-search-option\n              [multiple]=\"thyMultiple\"\n              [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf\"\n              [option]=\"item\"\n              [active]=\"item.selected\"\n              [optionRender]=\"thyOptionRender\"\n              (toggleSelectChange)=\"selectSearchResult($event)\"></li>\n          }\n        </ul>\n      } @else {\n        <div class=\"thy-cascader-empty-container\" [ngStyle]=\"{ 'width.px': triggerRect?.width }\">\n          <thy-empty class=\"thy-select-empty-content\" thySize=\"sm\" [thyMessage]=\"emptyStateText\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { thyValueProperty: [{
-                type: Input
-            }], thyLabelProperty: [{
-                type: Input
-            }], thyPlaceholder: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyOptions: [{
-                type: Input
-            }], thyCustomOptions: [{
-                type: Input
-            }], thyChangeOn: [{
-                type: Input
-            }], thyChangeOnSelect: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyShowInput: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyOptionRender: [{
-                type: Input
-            }], thyLabelRender: [{
-                type: Input
-            }], thyLoadData: [{
-                type: Input
-            }], thyTriggerAction: [{
-                type: Input
-            }], thyExpandTriggerAction: [{
-                type: Input
-            }], thyMenuStyle: [{
-                type: Input
-            }], thySearchListStyle: [{
-                type: Input
-            }], thyMenuClassName: [{
-                type: Input
-            }], thyColumnClassName: [{
-                type: Input
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyEmptyStateText: [{
-                type: Input
-            }], thyMultiple: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyMaxTagCount: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyIsOnlySelectLeaf: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAutoExpand: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyShowSearch: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPreset: [{
-                type: Input
-            }], thyHasBackdrop: [{
+                    ], animations: [scaleYMotion], template: "<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" #trigger>\n  @if (thyShowInput()) {\n    <div\n      thySelectControl\n      [thyShowSearch]=\"thyShowSearch()\"\n      [thySize]=\"thySize()\"\n      [thyAllowClear]=\"true\"\n      [thySelectedOptions]=\"selected\"\n      [thyMaxTagCount]=\"thyMaxTagCount()\"\n      (thyOnRemove)=\"removeSelectedItem($event)\"\n      (thyOnClear)=\"clearSelection($event)\"\n      (thyOnBlur)=\"onBlur($event)\"\n      (thyOnSearch)=\"searchFilter($event)\"\n      [thyDisabled]=\"disabled\"\n      [thyIsMultiple]=\"thyMultiple()\"\n      [thyPanelOpened]=\"menuVisible\"\n      [thyPlaceholder]=\"thyPlaceholder()\"\n      [customDisplayTemplate]=\"customDisplayTemplate\"\n      [thyPreset]=\"thyPreset()\">\n      <ng-template #customDisplayTemplate let-value>\n        @if (!isLabelRenderTemplate()) {\n          <span [ngClass]=\"labelCls\">{{ value.labelText }}</span>\n        } @else {\n          <span [ngClass]=\"labelCls\">\n            <ng-template [ngTemplateOutlet]=\"thyLabelRender()\" [ngTemplateOutletContext]=\"value.labelRenderContext\"></ng-template>\n          </span>\n        }\n      </ng-template>\n    </div>\n  }\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop()\"\n  cdkConnectedOverlayBackdropClass=\"thy-cascader-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayMinWidth]=\"menuMinWidth\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-cascader-menus\"\n  (backdropClick)=\"closeMenu()\"\n  (detach)=\"closeMenu()\"\n  (attach)=\"attached()\"\n  (positionChange)=\"positionChange($event)\"\n  [cdkConnectedOverlayOpen]=\"menuVisible\">\n  <div\n    [attr.tabindex]=\"-1\"\n    #menu\n    [ngClass]=\"menuCls\"\n    [ngStyle]=\"thyMenuStyle()\"\n    (mouseleave)=\"toggleMouseLeave($event)\"\n    [@scaleYMotion]=\"'enter'\">\n    @if (!isShowSearchPanel) {\n      @if (columns.length > 0) {\n        @for (options of columns; track $index; let i = $index; let isFirst = $first) {\n          <ul #cascaderOptionContainers [ngClass]=\"menuColumnCls()\">\n            @if (thyCascaderService.customOptions && thyCascaderService.customOptions.length > 0 && isFirst) {\n              @for (customOpt of thyCascaderService.customOptions; track trackByFn($index, customOpt)) {\n                <li\n                  #cascaderOptions\n                  thy-cascader-option\n                  [option]=\"customOpt\"\n                  [multiple]=\"thyMultiple()\"\n                  [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n                  [labelProperty]=\"thyLabelProperty()\"\n                  [active]=\"isActivatedOption(customOpt, 0)\"\n                  [halfSelected]=\"isHalfSelectedOption(customOpt, 0)\"\n                  [selected]=\"isSelectedOption(customOpt, 0)\"\n                  (toggleSelectChange)=\"clickCustomOption(customOpt, 0, $event)\"\n                  (click)=\"clickCustomOption(customOpt, 0, $event)\"\n                  (mouseover)=\"mouseoverOption(customOpt, 0, $event)\"></li>\n              }\n              <thy-divider class=\"my-1 mx-4\"></thy-divider>\n            }\n            @for (option of options; track trackByFn($index, option)) {\n              <li\n                #cascaderOptions\n                thy-cascader-option\n                [option]=\"option\"\n                [multiple]=\"thyMultiple()\"\n                [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n                [labelProperty]=\"thyLabelProperty()\"\n                [active]=\"isActivatedOption(option, i)\"\n                [halfSelected]=\"isHalfSelectedOption(option, i)\"\n                [selected]=\"isSelectedOption(option, i)\"\n                [optionRender]=\"thyOptionRender()\"\n                (toggleSelectChange)=\"clickOption(option, i, $event)\"\n                (click)=\"clickOption(option, i, $event)\"\n                (mouseover)=\"mouseoverOption(option, i, $event)\"></li>\n            }\n          </ul>\n        }\n      } @else {\n        <div class=\"thy-cascader-empty-container\" [ngStyle]=\"{ 'width.px': triggerRect?.width }\">\n          <thy-empty\n            class=\"thy-select-empty-content\"\n            thySize=\"sm\"\n            [thyMessage]=\"thyEmptyStateText()\"\n            [thyIconName]=\"emptyIcon()\"></thy-empty>\n        </div>\n      }\n    }\n    @if (isShowSearchPanel) {\n      @if (searchResultList.length) {\n        <ul class=\"thy-cascader-search-list py-3\" [ngStyle]=\"thySearchListStyle()\">\n          @for (item of searchResultList; track $index) {\n            <li\n              thy-cascader-search-option\n              [multiple]=\"thyMultiple()\"\n              [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n              [option]=\"item\"\n              [active]=\"item.selected\"\n              [optionRender]=\"thyOptionRender()\"\n              (toggleSelectChange)=\"selectSearchResult($event)\"></li>\n          }\n        </ul>\n      } @else {\n        <div class=\"thy-cascader-empty-container\" [ngStyle]=\"{ 'width.px': triggerRect?.width }\">\n          <thy-empty\n            class=\"thy-select-empty-content\"\n            thySize=\"sm\"\n            [thyMessage]=\"thyEmptyStateText()\"\n            [thyIconName]=\"emptyIcon()\"></thy-empty>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
-            }], thyChange: [{
-                type: Output
-            }], thySelectionChange: [{
-                type: Output
-            }], thySelect: [{
-                type: Output
-            }], thyDeselect: [{
-                type: Output
-            }], thyClear: [{
-                type: Output
-            }], thyExpandStatusChange: [{
-                type: Output
-            }], cascaderOptions: [{
-                type: ViewChildren,
-                args: ['cascaderOptions', { read: ElementRef }]
-            }], cascaderOptionContainers: [{
-                type: ViewChildren,
-                args: ['cascaderOptionContainers', { read: ElementRef }]
-            }], cdkConnectedOverlay: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay, { static: true }]
-            }], trigger: [{
-                type: ViewChild,
-                args: ['trigger', { read: ElementRef, static: true }]
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
-            }], menu: [{
-                type: ViewChild,
-                args: ['menu']
             }], toggleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]