ngx-tethys 19.1.12 → 19.1.14

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [19.1.14](https://github.com/atinc/ngx-tethys/compare/19.1.13...19.1.14) (2025-11-12)
+
+
+### Features
+
+* **input-number:** support thyShowStepControls #TINFR-2994 ([#3605](https://github.com/atinc/ngx-tethys/issues/3605)) ([c06a6f8](https://github.com/atinc/ngx-tethys/commit/c06a6f813e619ef63ac99459f8c149439c93bafd)), closes [#TINFR-2994](https://github.com/atinc/ngx-tethys/issues/TINFR-2994)
+
+
+
+## [19.1.13](https://github.com/atinc/ngx-tethys/compare/19.1.12...19.1.13) (2025-11-05)
+
+
+### Features
+
+* **cascader:** support set load state #TINFR-2988 ([#3603](https://github.com/atinc/ngx-tethys/issues/3603)) ([08a9714](https://github.com/atinc/ngx-tethys/commit/08a971403c709f80f29e77abb83da547ed10dd20)), closes [#TINFR-2988](https://github.com/atinc/ngx-tethys/issues/TINFR-2988)
+
+
+
 ## [19.1.12](https://github.com/atinc/ngx-tethys/compare/19.1.11...19.1.12) (2025-11-03)
 
 

package/cascader/cascader.component.d.ts

@@ -144,6 +144,10 @@ export declare class ThyCascader extends TabIndexDisabledControlValueAccessorMix
      * @default 140
      */
     readonly thyWidth: import("@angular/core").InputSignalWithTransform<number, number>;
+    /**
+     * 异步加载 loading 状态，false 表示加载中，true 表示加载完成
+     */
+    readonly thyLoadingDone: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * 初始化时，是否展开面板
      */
@@ -275,6 +279,6 @@ export declare class ThyCascader extends TabIndexDisabledControlValueAccessorMix
     private unsubscribeTriggerResize;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ThyCascader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ThyCascader, "thy-cascader,[thy-cascader]", never, { "thyValueProperty": { "alias": "thyValueProperty"; "required": false; "isSignal": true; }; "thyLabelProperty": { "alias": "thyLabelProperty"; "required": false; "isSignal": true; }; "thyPlaceholder": { "alias": "thyPlaceholder"; "required": false; "isSignal": true; }; "thySize": { "alias": "thySize"; "required": false; "isSignal": true; }; "thyOptions": { "alias": "thyOptions"; "required": false; "isSignal": true; }; "thyCustomOptions": { "alias": "thyCustomOptions"; "required": false; "isSignal": true; }; "thyChangeOn": { "alias": "thyChangeOn"; "required": false; "isSignal": true; }; "thyChangeOnSelect": { "alias": "thyChangeOnSelect"; "required": false; "isSignal": true; }; "thyShowInput": { "alias": "thyShowInput"; "required": false; "isSignal": true; }; "thyOptionRender": { "alias": "thyOptionRender"; "required": false; "isSignal": true; }; "thyLabelRender": { "alias": "thyLabelRender"; "required": false; "isSignal": true; }; "thyLoadData": { "alias": "thyLoadData"; "required": false; "isSignal": true; }; "thyTriggerAction": { "alias": "thyTriggerAction"; "required": false; "isSignal": true; }; "thyExpandTriggerAction": { "alias": "thyExpandTriggerAction"; "required": false; "isSignal": true; }; "thyMenuStyle": { "alias": "thyMenuStyle"; "required": false; "isSignal": true; }; "thySearchListStyle": { "alias": "thySearchListStyle"; "required": false; "isSignal": true; }; "thyMenuClassName": { "alias": "thyMenuClassName"; "required": false; "isSignal": true; }; "thyColumnClassName": { "alias": "thyColumnClassName"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; }; "thyEmptyStateText": { "alias": "thyEmptyStateText"; "required": false; "isSignal": true; }; "thyMultiple": { "alias": "thyMultiple"; "required": false; "isSignal": true; }; "thyMaxTagCount": { "alias": "thyMaxTagCount"; "required": false; "isSignal": true; }; "thyIsOnlySelectLeaf": { "alias": "thyIsOnlySelectLeaf"; "required": false; "isSignal": true; }; "thyWidth": { "alias": "thyWidth"; "required": false; "isSignal": true; }; "thyAutoExpand": { "alias": "thyAutoExpand"; "required": false; "isSignal": true; }; "thyShowSearch": { "alias": "thyShowSearch"; "required": false; "isSignal": true; }; "thyPreset": { "alias": "thyPreset"; "required": false; "isSignal": true; }; "thyHasBackdrop": { "alias": "thyHasBackdrop"; "required": false; "isSignal": true; }; }, { "thyChange": "thyChange"; "thySelectionChange": "thySelectionChange"; "thySelect": "thySelect"; "thyDeselect": "thyDeselect"; "thyClear": "thyClear"; "thyExpandStatusChange": "thyExpandStatusChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThyCascader, "thy-cascader,[thy-cascader]", never, { "thyValueProperty": { "alias": "thyValueProperty"; "required": false; "isSignal": true; }; "thyLabelProperty": { "alias": "thyLabelProperty"; "required": false; "isSignal": true; }; "thyPlaceholder": { "alias": "thyPlaceholder"; "required": false; "isSignal": true; }; "thySize": { "alias": "thySize"; "required": false; "isSignal": true; }; "thyOptions": { "alias": "thyOptions"; "required": false; "isSignal": true; }; "thyCustomOptions": { "alias": "thyCustomOptions"; "required": false; "isSignal": true; }; "thyChangeOn": { "alias": "thyChangeOn"; "required": false; "isSignal": true; }; "thyChangeOnSelect": { "alias": "thyChangeOnSelect"; "required": false; "isSignal": true; }; "thyShowInput": { "alias": "thyShowInput"; "required": false; "isSignal": true; }; "thyOptionRender": { "alias": "thyOptionRender"; "required": false; "isSignal": true; }; "thyLabelRender": { "alias": "thyLabelRender"; "required": false; "isSignal": true; }; "thyLoadData": { "alias": "thyLoadData"; "required": false; "isSignal": true; }; "thyTriggerAction": { "alias": "thyTriggerAction"; "required": false; "isSignal": true; }; "thyExpandTriggerAction": { "alias": "thyExpandTriggerAction"; "required": false; "isSignal": true; }; "thyMenuStyle": { "alias": "thyMenuStyle"; "required": false; "isSignal": true; }; "thySearchListStyle": { "alias": "thySearchListStyle"; "required": false; "isSignal": true; }; "thyMenuClassName": { "alias": "thyMenuClassName"; "required": false; "isSignal": true; }; "thyColumnClassName": { "alias": "thyColumnClassName"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; }; "thyEmptyStateText": { "alias": "thyEmptyStateText"; "required": false; "isSignal": true; }; "thyMultiple": { "alias": "thyMultiple"; "required": false; "isSignal": true; }; "thyMaxTagCount": { "alias": "thyMaxTagCount"; "required": false; "isSignal": true; }; "thyIsOnlySelectLeaf": { "alias": "thyIsOnlySelectLeaf"; "required": false; "isSignal": true; }; "thyWidth": { "alias": "thyWidth"; "required": false; "isSignal": true; }; "thyLoadingDone": { "alias": "thyLoadingDone"; "required": false; "isSignal": true; }; "thyAutoExpand": { "alias": "thyAutoExpand"; "required": false; "isSignal": true; }; "thyShowSearch": { "alias": "thyShowSearch"; "required": false; "isSignal": true; }; "thyPreset": { "alias": "thyPreset"; "required": false; "isSignal": true; }; "thyHasBackdrop": { "alias": "thyHasBackdrop"; "required": false; "isSignal": true; }; }, { "thyChange": "thyChange"; "thySelectionChange": "thySelectionChange"; "thySelect": "thySelect"; "thyDeselect": "thyDeselect"; "thyClear": "thyClear"; "thyExpandStatusChange": "thyExpandStatusChange"; }, never, never, true, never>;
     static ngAcceptInputType_thyDisabled: i1.ThyBooleanInput;
 }

package/cascader/styles/cascader.scss

@@ -19,6 +19,11 @@ $cascader-menu-min-width: 122px;
             cursor: variables.$disabled-cursor;
         }
     }
+    &-loading {
+        height: 180px;
+        display: flex;
+        align-items: center;
+    }
     &-menus {
         font-size: 14px;
         background: variables.$bg-panel;

package/fesm2022/ngx-tethys-cascader.mjs

@@ -22,6 +22,7 @@ import { map, debounceTime, takeUntil, take, delay, distinctUntilChanged, filter
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1$1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { ThyLoading } from 'ngx-tethys/loading';
 
 /**
  * @internal
@@ -845,6 +846,10 @@ class ThyCascader extends TabIndexDisabledControlValueAccessorMixin {
                 return numberAttribute(value, 140);
             }
         });
+        /**
+         * 异步加载 loading 状态，false 表示加载中，true 表示加载完成
+         */
+        this.thyLoadingDone = input(true, { transform: coerceBooleanProperty });
         /**
          * 初始化时，是否展开面板
          */
@@ -1294,14 +1299,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: { 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 }, thyWidth: { classPropertyName: "thyWidth", publicName: "thyWidth", 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: [
+    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 }, thyWidth: { classPropertyName: "thyWidth", publicName: "thyWidth", isSignal: true, isRequired: false, transformFunction: null }, thyLoadingDone: { classPropertyName: "thyLoadingDone", publicName: "thyLoadingDone", 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: "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 }, { propertyName: "virtualScrollViewports", predicate: CdkVirtualScrollViewport, 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()\" [ngStyle]=\"{ 'width.px': thyWidth() }\">\n            @let allOptions = options | cascaderOptions: (isFirst ? thyCascaderService.customOptions : []);\n\n            @if (allOptions.length > 0) {\n              <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"h-100\">\n                <ng-container *cdkVirtualFor=\"let option of allOptions; let index = index; trackBy: trackByFn\">\n                  @if (\n                    thyCascaderService.customOptions &&\n                    thyCascaderService.customOptions.length > 0 &&\n                    isFirst &&\n                    index < thyCascaderService.customOptions.length\n                  ) {\n                    <li\n                      #cascaderOptions\n                      thy-cascader-option\n                      [option]=\"option\"\n                      [multiple]=\"thyMultiple()\"\n                      [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n                      [labelProperty]=\"thyLabelProperty()\"\n                      [active]=\"isActivatedOption(option, 0)\"\n                      [halfSelected]=\"isHalfSelectedOption(option, 0)\"\n                      [selected]=\"isSelectedOption(option, 0)\"\n                      (toggleSelectChange)=\"clickCustomOption(option, 0, $event)\"\n                      (click)=\"clickCustomOption(option, 0, $event)\"\n                      (mouseover)=\"mouseoverOption(option, 0, $event)\"></li>\n                    @if (index === thyCascaderService.customOptions.length - 1) {\n                      <thy-divider class=\"my-1 mx-4\"></thy-divider>\n                    }\n                  } @else {\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                </ng-container>\n              </cdk-virtual-scroll-viewport>\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: ["inputValue", "thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["inputValueChange", "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"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: ThyCascaderOptionsPipe, name: "cascaderOptions" }], 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 }, { propertyName: "virtualScrollViewports", predicate: CdkVirtualScrollViewport, 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    [class.thy-cascader-loading]=\"!thyLoadingDone()\">\n    @if (thyLoadingDone()) {\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()\" [ngStyle]=\"{ 'width.px': thyWidth() }\">\n              @let allOptions = options | cascaderOptions: (isFirst ? thyCascaderService.customOptions : []);\n\n              @if (allOptions.length > 0) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"h-100\">\n                  <ng-container *cdkVirtualFor=\"let option of allOptions; let index = index; trackBy: trackByFn\">\n                    @if (\n                      thyCascaderService.customOptions &&\n                      thyCascaderService.customOptions.length > 0 &&\n                      isFirst &&\n                      index < thyCascaderService.customOptions.length\n                    ) {\n                      <li\n                        #cascaderOptions\n                        thy-cascader-option\n                        [option]=\"option\"\n                        [multiple]=\"thyMultiple()\"\n                        [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n                        [labelProperty]=\"thyLabelProperty()\"\n                        [active]=\"isActivatedOption(option, 0)\"\n                        [halfSelected]=\"isHalfSelectedOption(option, 0)\"\n                        [selected]=\"isSelectedOption(option, 0)\"\n                        (toggleSelectChange)=\"clickCustomOption(option, 0, $event)\"\n                        (click)=\"clickCustomOption(option, 0, $event)\"\n                        (mouseover)=\"mouseoverOption(option, 0, $event)\"></li>\n                      @if (index === thyCascaderService.customOptions.length - 1) {\n                        <thy-divider class=\"my-1 mx-4\"></thy-divider>\n                      }\n                    } @else {\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                  </ng-container>\n                </cdk-virtual-scroll-viewport>\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    } @else {\n      <thy-loading [ngStyle]=\"{ 'width.px': thyWidth() }\" [thyDone]=\"thyLoadingDone()\" thySize=\"sm\"></thy-loading>\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: ["inputValue", "thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["inputValueChange", "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"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: ThyCascaderOptionsPipe, name: "cascaderOptions" }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }], animations: [scaleYMotion] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCascader, decorators: [{
             type: Component,
@@ -1328,8 +1333,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         ThyEmpty,
                         ThyDivider,
                         ScrollingModule,
-                        ThyCascaderOptionsPipe
-                    ], 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()\" [ngStyle]=\"{ 'width.px': thyWidth() }\">\n            @let allOptions = options | cascaderOptions: (isFirst ? thyCascaderService.customOptions : []);\n\n            @if (allOptions.length > 0) {\n              <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"h-100\">\n                <ng-container *cdkVirtualFor=\"let option of allOptions; let index = index; trackBy: trackByFn\">\n                  @if (\n                    thyCascaderService.customOptions &&\n                    thyCascaderService.customOptions.length > 0 &&\n                    isFirst &&\n                    index < thyCascaderService.customOptions.length\n                  ) {\n                    <li\n                      #cascaderOptions\n                      thy-cascader-option\n                      [option]=\"option\"\n                      [multiple]=\"thyMultiple()\"\n                      [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n                      [labelProperty]=\"thyLabelProperty()\"\n                      [active]=\"isActivatedOption(option, 0)\"\n                      [halfSelected]=\"isHalfSelectedOption(option, 0)\"\n                      [selected]=\"isSelectedOption(option, 0)\"\n                      (toggleSelectChange)=\"clickCustomOption(option, 0, $event)\"\n                      (click)=\"clickCustomOption(option, 0, $event)\"\n                      (mouseover)=\"mouseoverOption(option, 0, $event)\"></li>\n                    @if (index === thyCascaderService.customOptions.length - 1) {\n                      <thy-divider class=\"my-1 mx-4\"></thy-divider>\n                    }\n                  } @else {\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                </ng-container>\n              </cdk-virtual-scroll-viewport>\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" }]
+                        ThyCascaderOptionsPipe,
+                        ThyLoading
+                    ], 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    [class.thy-cascader-loading]=\"!thyLoadingDone()\">\n    @if (thyLoadingDone()) {\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()\" [ngStyle]=\"{ 'width.px': thyWidth() }\">\n              @let allOptions = options | cascaderOptions: (isFirst ? thyCascaderService.customOptions : []);\n\n              @if (allOptions.length > 0) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"h-100\">\n                  <ng-container *cdkVirtualFor=\"let option of allOptions; let index = index; trackBy: trackByFn\">\n                    @if (\n                      thyCascaderService.customOptions &&\n                      thyCascaderService.customOptions.length > 0 &&\n                      isFirst &&\n                      index < thyCascaderService.customOptions.length\n                    ) {\n                      <li\n                        #cascaderOptions\n                        thy-cascader-option\n                        [option]=\"option\"\n                        [multiple]=\"thyMultiple()\"\n                        [isOnlySelectLeaf]=\"thyIsOnlySelectLeaf()\"\n                        [labelProperty]=\"thyLabelProperty()\"\n                        [active]=\"isActivatedOption(option, 0)\"\n                        [halfSelected]=\"isHalfSelectedOption(option, 0)\"\n                        [selected]=\"isSelectedOption(option, 0)\"\n                        (toggleSelectChange)=\"clickCustomOption(option, 0, $event)\"\n                        (click)=\"clickCustomOption(option, 0, $event)\"\n                        (mouseover)=\"mouseoverOption(option, 0, $event)\"></li>\n                      @if (index === thyCascaderService.customOptions.length - 1) {\n                        <thy-divider class=\"my-1 mx-4\"></thy-divider>\n                      }\n                    } @else {\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                  </ng-container>\n                </cdk-virtual-scroll-viewport>\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    } @else {\n      <thy-loading [ngStyle]=\"{ 'width.px': thyWidth() }\" [thyDone]=\"thyLoadingDone()\" thySize=\"sm\"></thy-loading>\n    }\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]