ngx-tethys 19.1.0-next.0 → 19.1.0-next.10

package/fesm2022/ngx-tethys-select.mjs

@@ -1,22 +1,23 @@
-import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { isPlatformBrowser, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, NgZone, ElementRef, ChangeDetectorRef, PLATFORM_ID, EventEmitter, forwardRef, numberAttribute, HostListener, ViewChildren, ContentChildren, ViewChild, Input, ContentChild, Output, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { InjectionToken, inject, NgZone, ElementRef, ChangeDetectorRef, PLATFORM_ID, input, viewChild, output, contentChild, numberAttribute, contentChildren, viewChildren, effect, untracked, forwardRef, HostListener, ViewChildren, ContentChildren, ViewChild, Input, ChangeDetectionStrategy, Component, model, signal, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { ThyEmpty, ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyInputDirective, ThyInputModule } from 'ngx-tethys/input';
 import { ThyLoading, ThyLoadingModule } from 'ngx-tethys/loading';
-import { ThySelectControl, ThyStopPropagationDirective, ThyScrollDirective, ThyOptionsContainer, ThyOption, ThySelectOptionGroup, THY_OPTION_PARENT_COMPONENT, ThyOptionModule, ThySharedModule, ThySelectCommonModule } from 'ngx-tethys/shared';
+import { ThySelectOptionGroup, ThySelectControl, ThyStopPropagationDirective, ThyScrollDirective, ThyOptionsContainer, ThyOption, THY_OPTION_PARENT_COMPONENT, ThyOptionModule, ThySharedModule, ThySelectCommonModule } from 'ngx-tethys/shared';
 import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, injectPanelEmptyIcon, ScrollToService, getFlexiblePositions, scaleXMotion, scaleYMotion, scaleMotion } from 'ngx-tethys/core';
-import { ENTER, isFunction, elementMatchClosest, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey, HOME, END, A, helpers, isArray, coerceBooleanProperty } from 'ngx-tethys/util';
+import { ENTER, isFunction, coerceBooleanProperty, elementMatchClosest, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey, HOME, END, A, helpers, isArray } from 'ngx-tethys/util';
 import { Subject, defer, merge, timer, Observable } from 'rxjs';
 import { map, filter, take, switchMap, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { coerceElement } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import { injectLocale } from 'ngx-tethys/i18n';
+import { outputToObservable } from '@angular/core/rxjs-interop';
 import { useHostRenderer } from '@tethys/cdk/dom';
 
 const THY_SELECT_SCROLL_STRATEGY = new InjectionToken('thy-select-scroll-strategy');
@@ -50,42 +51,6 @@ const noop$1 = () => { };
  * @order 10
  */
 class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
-    /**
-     * 下拉选择模式
-     * @type 'multiple' | ''
-     */
-    set thyMode(value) {
-        this.mode = value;
-        this.instanceSelectionModel();
-        this.getPositions();
-        this.setDropDownClass();
-    }
-    get thyMode() {
-        return this.mode;
-    }
-    /**
-     * 操作图标类型
-     * @type primary | success | danger | warning
-     * @default primary
-     */
-    get thySize() {
-        return this.size;
-    }
-    set thySize(value) {
-        this.size = value;
-    }
-    /**
-     * 数据为空时显示的提示文字
-     */
-    set thyEmptyStateText(value) {
-        this.emptyStateText = value;
-    }
-    /**
-     * 搜索结果为空时显示的提示文字
-     */
-    set thyEmptySearchMessageText(value) {
-        this.emptySearchMessageText = value;
-    }
     /**
      * 是否禁用
      * @default false
@@ -96,18 +61,6 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     get thyDisabled() {
         return this.disabled;
     }
-    /**
-     * option 列表
-     * @type ThySelectOptionModel[]
-     */
-    set thyOptions(value) {
-        if (value === null) {
-            value = [];
-        }
-        this.innerOptions = value;
-        this.isReactiveDriven = true;
-        this.buildReactiveOptions();
-    }
     handleKeydown(event) {
         if (!this.disabled) {
             if (event.keyCode === ENTER) {
@@ -136,7 +89,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         }
     }
     get placement() {
-        return this.thyPlacement || this.config.placement;
+        return this.thyPlacement() || this.config.placement;
     }
     constructor() {
         super();
@@ -152,12 +105,15 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.emptyIcon = injectPanelEmptyIcon();
         this.disabled = false;
         this.mode = '';
-        this.emptyStateText = this.locale().empty;
-        this.emptySearchMessageText = this.locale().empty;
         this.scrollTop = 0;
         this.modalValue = null;
         this.defaultOffset = 4;
         this.dropDownMinWidth = null;
+        /**
+         * 设置下拉框的最小宽度，默认值 `match-select`，表示与输入框的宽度一致；`min-width` 表示最小宽度为200px；支持自定义最小宽度，比如传 `{minWidth: 150}` 表示最小宽度为150px
+         * @default match-select
+         */
+        this.thyDropdownWidthMode = input();
         /**
          * 手动聚焦中的标识
          */
@@ -165,74 +121,152 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.destroy$ = new Subject();
         this.optionSelectionChanges = defer(() => {
             if (this.options) {
-                return merge(...this.options.map(option => option.selectionChange));
+                return merge(...this.options.map(option => outputToObservable(option.selectionChange)));
             }
             return this.ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
         });
-        this.isSelectCustom = true;
-        this.isSelect = true;
+        this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
         this.panelOpen = false;
         /**
          * 搜索时回调
          */
-        this.thyOnSearch = new EventEmitter();
+        this.thyOnSearch = output();
         /**
          * 下拉菜单滚动到底部事件，可以用这个事件实现滚动加载
          */
-        this.thyOnScrollToBottom = new EventEmitter();
+        this.thyOnScrollToBottom = output();
         /**
          * 下拉菜单展开和折叠状态事件
          */
-        this.thyOnExpandStatusChange = new EventEmitter();
+        this.thyOnExpandStatusChange = output();
+        /**
+         * 下拉列表是否显示搜索框
+         */
+        this.thyShowSearch = input(false, { transform: coerceBooleanProperty });
         /**
          * 选择框默认文字
          */
-        this.thyPlaceHolder = this.locale().placeholder;
+        this.thyPlaceHolder = input(this.locale().placeholder);
+        /**
+         * 是否使用服务端搜索，当为 true 时，将不再在前端进行过滤
+         */
+        this.thyServerSearch = input(false, { transform: coerceBooleanProperty });
         /**
          * 异步加载 loading 状态，false 表示加载中，true 表示加载完成
          */
-        this.thyLoadState = true;
+        this.thyLoadState = input(true, { transform: coerceBooleanProperty });
         /**
          * 是否自动设置选项第一条为高亮状态
          */
-        this.thyAutoActiveFirstItem = true;
+        this.thyAutoActiveFirstItem = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 下拉选择模式
+         * @type 'multiple' | ''
+         */
+        this.thyMode = input('');
+        /**
+         * 操作图标类型
+         * @type primary | success | danger | warning
+         * @default primary
+         */
+        this.thySize = input();
+        /**
+         * 数据为空时显示的提示文字
+         */
+        this.thyEmptyStateText = input(this.locale().empty, { transform: (value) => value || this.locale().empty });
+        /**
+         * 搜索结果为空时显示的提示文字
+         */
+        this.thyEmptySearchMessageText = input(this.locale().empty, { transform: (value) => value || this.locale().empty });
         /**
          * 滚动加载是否可用，只能当这个参数可以，下面的thyOnScrollToBottom事件才会触发
          */
-        this.thyEnableScrollLoad = false;
+        this.thyEnableScrollLoad = input(false, { transform: coerceBooleanProperty });
         /**
          * 单选( thyMode="" 或者不设置)时，选择框支持清除
          */
-        this.thyAllowClear = false;
+        this.thyAllowClear = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 排序比较函数
+         */
+        this.thySortComparator = input();
+        /**
+         * Footer 模板，默认值为空不显示 Footer
+         */
+        this.thyFooterTemplate = input();
+        /**
+         * 弹出位置
+         * @type ThyPlacement
+         */
+        this.thyPlacement = input();
+        /**
+         * 自定义 Overlay Origin
+         */
+        this.thyOrigin = input();
         /**
          * 自定义 Footer 模板容器 class
          */
-        this.thyFooterClass = 'thy-custom-select-footer';
+        this.thyFooterClass = input('thy-custom-select-footer');
+        /**
+         * @private
+         */
+        this.selectedValueDisplayRef = contentChild('selectedDisplay');
+        /**
+         * 初始化时，是否展开面板
+         */
+        this.thyAutoExpand = input(false, { transform: coerceBooleanProperty });
         /**
          * 是否弹出透明遮罩，如果显示遮罩则会阻止滚动区域滚动
          */
-        this.thyHasBackdrop = false;
+        this.thyHasBackdrop = input(false, { transform: coerceBooleanProperty });
         /**
          * 设置多选时最大显示的标签数量，0 表示不限制
          */
-        this.thyMaxTagCount = 0;
+        this.thyMaxTagCount = input(0, { transform: numberAttribute });
         /**
          * 是否隐藏选择框边框
-         * @default false
          */
-        this.thyBorderless = false;
+        this.thyBorderless = input(false, { transform: coerceBooleanProperty });
         this.isReactiveDriven = false;
         this.optionGroups = [];
+        /**
+         * option 列表
+         */
+        this.thyOptions = input(undefined, {
+            transform: (value) => {
+                if (value === null) {
+                    value = [];
+                }
+                this.innerOptions = value;
+                this.isReactiveDriven = true;
+                this.buildReactiveOptions();
+                return value;
+            }
+        });
         /**
          * 目前只支持多选选中项的展示，默认为空，渲染文字模板，传入tag，渲染展示模板,
          * @default ''｜tag
          */
-        this.thyPreset = '';
+        this.thyPreset = input('');
+        this.panel = viewChild('panel');
+        /**
+         * @private
+         */
+        this.contentGroups = contentChildren(ThySelectOptionGroup);
+        this.viewGroups = viewChildren(ThySelectOptionGroup);
         this.isSearching = false;
         this.groupBy = (item) => item.groupLabel;
         const selectConfig = this.selectConfig;
         this.config = { ...DEFAULT_SELECT_CONFIG, ...selectConfig };
         this.buildScrollStrategy();
+        effect(() => {
+            this.mode = this.thyMode();
+            untracked(() => {
+                this.instanceSelectionModel();
+                this.getPositions();
+                this.setDropDownClass();
+            });
+        });
     }
     writeValue(value) {
         this.modalValue = value;
@@ -294,7 +328,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         }
     }
     getDropdownMinWidth() {
-        const mode = this.thyDropdownWidthMode || this.config.dropdownWidthMode;
+        const mode = this.thyDropdownWidthMode() || this.config.dropdownWidthMode;
         let dropdownMinWidth = null;
         if (mode?.minWidth) {
             dropdownMinWidth = mode.minWidth;
@@ -331,12 +365,12 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                 .asObservable()
                 .pipe(take(1))
                 .subscribe(() => {
-                if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
-                    this.cdkConnectedOverlay.overlayRef.updatePosition();
+                if (this.cdkConnectedOverlay() && this.cdkConnectedOverlay().overlayRef) {
+                    this.cdkConnectedOverlay().overlayRef.updatePosition();
                 }
             });
         });
-        if (this.thyAutoExpand) {
+        if (this.thyAutoExpand()) {
             timer(0).subscribe(() => {
                 this.changeDetectorRef.markForCheck();
                 this.open();
@@ -345,18 +379,20 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         }
     }
     get isHiddenOptions() {
-        return this.options.toArray().every(option => option.hidden);
+        return this.options.toArray().every(option => option.hidden());
     }
     onAttached() {
-        this.cdkConnectedOverlay.positionChange.pipe(take(1)).subscribe(() => {
-            if (this.panel) {
+        this.cdkConnectedOverlay()
+            .positionChange.pipe(take(1))
+            .subscribe(() => {
+            if (this.panel()) {
                 if (this.keyManager.activeItem) {
-                    ScrollToService.scrollToElement(this.keyManager.activeItem.element.nativeElement, this.panel.nativeElement);
+                    ScrollToService.scrollToElement(this.keyManager.activeItem.element.nativeElement, this.panel().nativeElement);
                     this.changeDetectorRef.detectChanges();
                 }
                 else {
                     if (!this.empty) {
-                        ScrollToService.scrollToElement(this.selectionModel.selected[0].element.nativeElement, this.panel.nativeElement);
+                        ScrollToService.scrollToElement(this.selectionModel.selected[0].element.nativeElement, this.panel().nativeElement);
                         this.changeDetectorRef.detectChanges();
                     }
                 }
@@ -371,16 +407,14 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     onOptionsScrolled(elementRef) {
         const scroll = elementRef.nativeElement.scrollTop, height = elementRef.nativeElement.clientHeight, scrollHeight = elementRef.nativeElement.scrollHeight;
         if (scroll + height + 10 >= scrollHeight) {
-            if (this.thyOnScrollToBottom.observers.length > 0) {
-                this.ngZone.run(() => {
-                    this.thyOnScrollToBottom.emit();
-                });
-            }
+            this.ngZone.run(() => {
+                this.thyOnScrollToBottom.emit();
+            });
         }
     }
     onSearchFilter(searchText) {
         searchText = searchText.trim();
-        if (this.thyServerSearch) {
+        if (this.thyServerSearch()) {
             this.isSearching = true;
             this.thyOnSearch.emit(searchText);
         }
@@ -408,7 +442,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     onFocus(event) {
         // thyShowSearch 与 panelOpen 均为 true 时，点击 thySelectControl 需要触发自动聚焦到 input 的逻辑
         // manualFocusing 如果是手动聚焦，不触发自动聚焦到 input 的逻辑
-        if ((this.thyShowSearch && this.panelOpen) ||
+        if ((this.thyShowSearch() && this.panelOpen) ||
             (!this.manualFocusing &&
                 !elementMatchClosest(event?.relatedTarget, ['.thy-select-dropdown', 'thy-custom-select']))) {
             const inputElement = this.elementRef.nativeElement.querySelector('input');
@@ -448,8 +482,8 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     }
     updateCdkConnectedOverlayPositions() {
         setTimeout(() => {
-            if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
-                this.cdkConnectedOverlay.overlayRef.updatePosition();
+            if (this.cdkConnectedOverlay() && this.cdkConnectedOverlay().overlayRef) {
+                this.cdkConnectedOverlay().overlayRef.updatePosition();
             }
         });
     }
@@ -463,12 +497,12 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         return !this.selectionModel || this.selectionModel.isEmpty();
     }
     getItemCount() {
-        const group = this.isReactiveDriven ? this.viewGroups : this.contentGroups;
+        const group = this.isReactiveDriven ? this.viewGroups() : this.contentGroups();
         return this.options.length + group.length;
     }
     toggle(event) {
         if (this.panelOpen) {
-            if (!this.thyShowSearch) {
+            if (!this.thyShowSearch()) {
                 this.close();
             }
         }
@@ -522,7 +556,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                     return;
                 }
                 if (this.empty) {
-                    if (!this.thyAutoActiveFirstItem) {
+                    if (!this.thyAutoActiveFirstItem()) {
                         return;
                     }
                     this.keyManager.setFirstItemActive();
@@ -532,7 +566,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                 }
             }
             else {
-                if (!this.thyAutoActiveFirstItem) {
+                if (!this.thyAutoActiveFirstItem()) {
                     return;
                 }
                 // always set first option active
@@ -554,9 +588,9 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             this.close();
         });
         this.keyManager.change.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            if (this.panelOpen && this.panel) {
+            if (this.panelOpen && this.panel()) {
                 if (this.keyManager.activeItem) {
-                    ScrollToService.scrollToElement(this.keyManager.activeItem.element.nativeElement, this.panel.nativeElement);
+                    ScrollToService.scrollToElement(this.keyManager.activeItem.element.nativeElement, this.panel().nativeElement);
                 }
             }
             else if (!this.panelOpen && !this.isMultiple && this.keyManager.activeItem) {
@@ -608,7 +642,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         }
         else if (this.isMultiple && keyCode === A && event.ctrlKey) {
             event.preventDefault();
-            const hasDeselectedOptions = this.options.some(opt => !opt.disabled && !opt.selected);
+            const hasDeselectedOptions = this.options.some(opt => !opt.disabled && !opt.selected());
             this.options.forEach(option => {
                 if (!option.disabled) {
                     hasDeselectedOptions ? option.select() : option.deselect();
@@ -631,7 +665,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         }
     }
     getPositions() {
-        this.dropDownPositions = getFlexiblePositions(this.thyPlacement || this.config.placement, this.defaultOffset);
+        this.dropDownPositions = getFlexiblePositions(this.thyPlacement() || this.config.placement, this.defaultOffset);
     }
     instanceSelectionModel() {
         if (this.selectionModel) {
@@ -713,8 +747,8 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             this.selectionModel.clear();
         }
         else {
-            if (wasSelected !== option.selected) {
-                option.selected ? this.selectionModel.select(option) : this.selectionModel.deselect(option);
+            if (wasSelected !== option.selected()) {
+                option.selected() ? this.selectionModel.select(option) : this.selectionModel.deselect(option);
             }
             if (isUserInput) {
                 this.keyManager.setActiveItem(option);
@@ -737,15 +771,15 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     sortValues() {
         if (this.isMultiple) {
             const options = this.options.toArray();
-            if (this.thySortComparator) {
+            if (this.thySortComparator()) {
                 this.selectionModel.sort((a, b) => {
-                    return this.thySortComparator(a, b, options);
+                    return this.thySortComparator()(a, b, options);
                 });
             }
         }
     }
     getOriginRectWidth() {
-        return this.thyOrigin ? coerceElement(this.thyOrigin).offsetWidth : this.trigger.nativeElement.offsetWidth;
+        return this.thyOrigin() ? coerceElement(this.thyOrigin()).offsetWidth : this.trigger.nativeElement.offsetWidth;
     }
     subscribeTriggerResize() {
         this.unsubscribeTriggerResize();
@@ -780,7 +814,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySelect, isStandalone: true, selector: "thy-select,thy-custom-select", inputs: { thyDropdownWidthMode: "thyDropdownWidthMode", thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thyPlaceHolder: "thyPlaceHolder", thyServerSearch: ["thyServerSearch", "thyServerSearch", coerceBooleanProperty], thyLoadState: ["thyLoadState", "thyLoadState", coerceBooleanProperty], thyAutoActiveFirstItem: ["thyAutoActiveFirstItem", "thyAutoActiveFirstItem", coerceBooleanProperty], thyMode: "thyMode", thySize: "thySize", thyEmptyStateText: "thyEmptyStateText", thyEmptySearchMessageText: "thyEmptySearchMessageText", thyEnableScrollLoad: ["thyEnableScrollLoad", "thyEnableScrollLoad", coerceBooleanProperty], thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thySortComparator: "thySortComparator", thyFooterTemplate: "thyFooterTemplate", thyPlacement: "thyPlacement", thyOrigin: "thyOrigin", thyFooterClass: "thyFooterClass", thyAutoExpand: ["thyAutoExpand", "thyAutoExpand", coerceBooleanProperty], thyHasBackdrop: ["thyHasBackdrop", "thyHasBackdrop", coerceBooleanProperty], thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyBorderless: ["thyBorderless", "thyBorderless", coerceBooleanProperty], thyOptions: "thyOptions", thyPreset: "thyPreset" }, outputs: { thyOnSearch: "thyOnSearch", thyOnScrollToBottom: "thyOnScrollToBottom", thyOnExpandStatusChange: "thyOnExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabIndex", "class.thy-select-custom": "this.isSelectCustom", "class.thy-select": "this.isSelect", "class.menu-is-opened": "this.panelOpen" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySelect, isStandalone: true, selector: "thy-select,thy-custom-select", inputs: { thyDropdownWidthMode: { classPropertyName: "thyDropdownWidthMode", publicName: "thyDropdownWidthMode", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceHolder: { classPropertyName: "thyPlaceHolder", publicName: "thyPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, thyServerSearch: { classPropertyName: "thyServerSearch", publicName: "thyServerSearch", isSignal: true, isRequired: false, transformFunction: null }, thyLoadState: { classPropertyName: "thyLoadState", publicName: "thyLoadState", isSignal: true, isRequired: false, transformFunction: null }, thyAutoActiveFirstItem: { classPropertyName: "thyAutoActiveFirstItem", publicName: "thyAutoActiveFirstItem", isSignal: true, isRequired: false, transformFunction: null }, thyMode: { classPropertyName: "thyMode", publicName: "thyMode", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyEmptyStateText: { classPropertyName: "thyEmptyStateText", publicName: "thyEmptyStateText", isSignal: true, isRequired: false, transformFunction: null }, thyEmptySearchMessageText: { classPropertyName: "thyEmptySearchMessageText", publicName: "thyEmptySearchMessageText", isSignal: true, isRequired: false, transformFunction: null }, thyEnableScrollLoad: { classPropertyName: "thyEnableScrollLoad", publicName: "thyEnableScrollLoad", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thySortComparator: { classPropertyName: "thySortComparator", publicName: "thySortComparator", isSignal: true, isRequired: false, transformFunction: null }, thyFooterTemplate: { classPropertyName: "thyFooterTemplate", publicName: "thyFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyOrigin: { classPropertyName: "thyOrigin", publicName: "thyOrigin", isSignal: true, isRequired: false, transformFunction: null }, thyFooterClass: { classPropertyName: "thyFooterClass", publicName: "thyFooterClass", isSignal: true, isRequired: false, transformFunction: null }, thyAutoExpand: { classPropertyName: "thyAutoExpand", publicName: "thyAutoExpand", isSignal: true, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyBorderless: { classPropertyName: "thyBorderless", publicName: "thyBorderless", isSignal: true, isRequired: false, transformFunction: null }, thyOptions: { classPropertyName: "thyOptions", publicName: "thyOptions", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnSearch: "thyOnSearch", thyOnScrollToBottom: "thyOnScrollToBottom", thyOnExpandStatusChange: "thyOnExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "keydown": "handleKeydown($event)" }, properties: { "class.thy-select-custom": "true", "class.thy-select": "true", "class.menu-is-opened": "panelOpen", "attr.tabindex": "tabIndex" } }, providers: [
             {
                 provide: THY_OPTION_PARENT_COMPONENT,
                 useExisting: ThySelect
@@ -790,7 +824,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                 useExisting: forwardRef(() => ThySelect),
                 multi: true
             }
-        ], queries: [{ propertyName: "selectedValueDisplayRef", first: true, predicate: ["selectedDisplay"], descendants: true }, { propertyName: "contentOptions", predicate: ThyOption, descendants: true }, { propertyName: "contentGroups", predicate: ThySelectOptionGroup }], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, read: ElementRef }, { propertyName: "viewOptions", predicate: ThyOption, descendants: true }, { propertyName: "viewGroups", predicate: ThySelectOptionGroup, descendants: true }], exportAs: ["thySelect"], usesInheritance: true, ngImport: i0, template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch\"\n  [thyAllowClear]=\"thyAllowClear\"\n  [thySize]=\"thySize\"\n  [thyPlaceholder]=\"thyPlaceHolder\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount\"\n  [thyPreset]=\"thyPreset\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    @if (contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ size }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad\">\n        @if (isReactiveDriven) {\n          <ng-template [ngTemplateOutlet]=\"optionsContainer.optionsTemplate\"></ng-template>\n        }\n        <ng-content></ng-content>\n        @if (isHiddenOptions) {\n          <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            @if (thyLoadState) {\n              <thy-empty [thyMessage]=\"emptySearchMessageText\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState) {\n          <thy-empty [thyMessage]=\"emptyStateText\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate) {\n      <div [class]=\"thyFooterClass ? thyFooterClass : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  @for (option of optionGroups; track $index) {\n    @if (!option.children) {\n      <thy-option\n        [thyDisabled]=\"option.disabled\"\n        [thyLabelText]=\"option.label\"\n        [thyValue]=\"option.value\"\n        [thyRawValue]=\"option\"></thy-option>\n    } @else {\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        @for (sub of option.children; track sub.value) {\n          <thy-option [thyDisabled]=\"sub.disabled\" [thyLabelText]=\"sub.label\" [thyValue]=\"sub.value\" [thyRawValue]=\"sub\"></thy-option>\n        }\n      </thy-option-group>\n    }\n  }\n</thy-options-container>\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: 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: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ThyScrollDirective, selector: "[thyScroll]", inputs: ["thyEnable"], outputs: ["thyOnScrolled"] }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }, { 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: ThyOptionsContainer, selector: "thy-options-container" }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "component", type: ThySelectOptionGroup, selector: "thy-option-group", inputs: ["thyDisabled", "thyGroupLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "selectedValueDisplayRef", first: true, predicate: ["selectedDisplay"], descendants: true, isSignal: true }, { propertyName: "contentGroups", predicate: ThySelectOptionGroup, isSignal: true }, { propertyName: "contentOptions", predicate: ThyOption, descendants: true }], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "viewGroups", predicate: ThySelectOptionGroup, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, static: true }, { propertyName: "viewOptions", predicate: ThyOption, descendants: true }], exportAs: ["thySelect"], usesInheritance: true, ngImport: i0, template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch()\"\n  [thyAllowClear]=\"thyAllowClear()\"\n  [thySize]=\"thySize()\"\n  [thyPlaceholder]=\"thyPlaceHolder()\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef()\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless()\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount()\"\n  [thyPreset]=\"thyPreset()\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin() || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    @if (contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ thySize() }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad()\">\n        @if (isReactiveDriven) {\n          <ng-template [ngTemplateOutlet]=\"optionsContainer.optionsTemplate()\"></ng-template>\n        }\n        <ng-content></ng-content>\n        @if (isHiddenOptions) {\n          <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            @if (thyLoadState()) {\n              <thy-empty [thyMessage]=\"thyEmptySearchMessageText()\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState()) {\n          <thy-empty [thyMessage]=\"thyEmptyStateText()\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate()) {\n      <div [class]=\"thyFooterClass() ? thyFooterClass() : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate()) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate()\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  @for (option of optionGroups; track $index) {\n    @if (!option.children) {\n      <thy-option\n        [thyDisabled]=\"option.disabled\"\n        [thyLabelText]=\"option.label\"\n        [thyValue]=\"option.value\"\n        [thyRawValue]=\"option\"></thy-option>\n    } @else {\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        @for (sub of option.children; track sub.value) {\n          <thy-option [thyDisabled]=\"sub.disabled\" [thyLabelText]=\"sub.label\" [thyValue]=\"sub.value\" [thyRawValue]=\"sub\"></thy-option>\n        }\n      </thy-option-group>\n    }\n  }\n</thy-options-container>\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: 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: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ThyScrollDirective, selector: "[thyScroll]", inputs: ["thyEnable"], outputs: ["thyOnScrolled"] }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }, { 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: ThyOptionsContainer, selector: "thy-options-container" }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "component", type: ThySelectOptionGroup, selector: "thy-option-group", inputs: ["thyDisabled", "thyGroupLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelect, decorators: [{
             type: Component,
@@ -818,108 +852,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         ThySelectOptionGroup,
                         NgTemplateOutlet
                     ], host: {
+                        '[class.thy-select-custom]': 'true',
+                        '[class.thy-select]': 'true',
+                        '[class.menu-is-opened]': 'panelOpen',
                         '[attr.tabindex]': 'tabIndex',
                         '(focus)': 'onFocus($event)',
                         '(blur)': 'onBlur($event)'
-                    }, animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch\"\n  [thyAllowClear]=\"thyAllowClear\"\n  [thySize]=\"thySize\"\n  [thyPlaceholder]=\"thyPlaceHolder\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount\"\n  [thyPreset]=\"thyPreset\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    @if (contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ size }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad\">\n        @if (isReactiveDriven) {\n          <ng-template [ngTemplateOutlet]=\"optionsContainer.optionsTemplate\"></ng-template>\n        }\n        <ng-content></ng-content>\n        @if (isHiddenOptions) {\n          <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            @if (thyLoadState) {\n              <thy-empty [thyMessage]=\"emptySearchMessageText\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState) {\n          <thy-empty [thyMessage]=\"emptyStateText\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate) {\n      <div [class]=\"thyFooterClass ? thyFooterClass : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  @for (option of optionGroups; track $index) {\n    @if (!option.children) {\n      <thy-option\n        [thyDisabled]=\"option.disabled\"\n        [thyLabelText]=\"option.label\"\n        [thyValue]=\"option.value\"\n        [thyRawValue]=\"option\"></thy-option>\n    } @else {\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        @for (sub of option.children; track sub.value) {\n          <thy-option [thyDisabled]=\"sub.disabled\" [thyLabelText]=\"sub.label\" [thyValue]=\"sub.value\" [thyRawValue]=\"sub\"></thy-option>\n        }\n      </thy-option-group>\n    }\n  }\n</thy-options-container>\n" }]
-        }], ctorParameters: () => [], propDecorators: { thyDropdownWidthMode: [{
-                type: Input
-            }], cdkConnectedOverlay: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay, { static: true }]
-            }], isSelectCustom: [{
-                type: HostBinding,
-                args: ['class.thy-select-custom']
-            }], isSelect: [{
-                type: HostBinding,
-                args: ['class.thy-select']
-            }], panelOpen: [{
-                type: HostBinding,
-                args: ['class.menu-is-opened']
-            }], thyOnSearch: [{
-                type: Output
-            }], thyOnScrollToBottom: [{
-                type: Output
-            }], thyOnExpandStatusChange: [{
-                type: Output
-            }], thyShowSearch: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPlaceHolder: [{
-                type: Input
-            }], thyServerSearch: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyLoadState: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAutoActiveFirstItem: [{
+                    }, animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch()\"\n  [thyAllowClear]=\"thyAllowClear()\"\n  [thySize]=\"thySize()\"\n  [thyPlaceholder]=\"thyPlaceHolder()\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef()\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless()\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount()\"\n  [thyPreset]=\"thyPreset()\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin() || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    @if (contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ thySize() }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad()\">\n        @if (isReactiveDriven) {\n          <ng-template [ngTemplateOutlet]=\"optionsContainer.optionsTemplate()\"></ng-template>\n        }\n        <ng-content></ng-content>\n        @if (isHiddenOptions) {\n          <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            @if (thyLoadState()) {\n              <thy-empty [thyMessage]=\"thyEmptySearchMessageText()\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState()) {\n          <thy-empty [thyMessage]=\"thyEmptyStateText()\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate()) {\n      <div [class]=\"thyFooterClass() ? thyFooterClass() : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate()) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate()\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  @for (option of optionGroups; track $index) {\n    @if (!option.children) {\n      <thy-option\n        [thyDisabled]=\"option.disabled\"\n        [thyLabelText]=\"option.label\"\n        [thyValue]=\"option.value\"\n        [thyRawValue]=\"option\"></thy-option>\n    } @else {\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        @for (sub of option.children; track sub.value) {\n          <thy-option [thyDisabled]=\"sub.disabled\" [thyLabelText]=\"sub.label\" [thyValue]=\"sub.value\" [thyRawValue]=\"sub\"></thy-option>\n        }\n      </thy-option-group>\n    }\n  }\n</thy-options-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
-            }], thyMode: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyEmptyStateText: [{
-                type: Input
-            }], thyEmptySearchMessageText: [{
-                type: Input
-            }], thyEnableScrollLoad: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAllowClear: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thySortComparator: [{
-                type: Input
-            }], thyFooterTemplate: [{
-                type: Input
-            }], thyPlacement: [{
-                type: Input
-            }], thyOrigin: [{
-                type: Input
-            }], thyFooterClass: [{
-                type: Input
-            }], selectedValueDisplayRef: [{
-                type: ContentChild,
-                args: ['selectedDisplay']
-            }], thyAutoExpand: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyHasBackdrop: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyMaxTagCount: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyBorderless: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyOptions: [{
-                type: Input
-            }], thyPreset: [{
-                type: Input
             }], trigger: [{
                 type: ViewChild,
                 args: ['trigger', { read: ElementRef, static: true }]
-            }], panel: [{
-                type: ViewChild,
-                args: ['panel', { read: ElementRef }]
             }], contentOptions: [{
                 type: ContentChildren,
                 args: [ThyOption, { descendants: true }]
             }], viewOptions: [{
                 type: ViewChildren,
                 args: [ThyOption]
-            }], contentGroups: [{
-                type: ContentChildren,
-                args: [ThySelectOptionGroup]
-            }], viewGroups: [{
-                type: ViewChildren,
-                args: [ThySelectOptionGroup]
             }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -932,34 +883,31 @@ const noop = () => { };
  * @order 20
  */
 class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin {
-    set thySize(value) {
-        this._size = value;
-    }
     writeValue(obj) {
-        if (obj !== this._innerValue) {
-            this._innerValue = obj;
+        if (obj !== this.innerValue()) {
+            this.innerValue.set(obj);
         }
     }
     setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
+        this.disabled.set(isDisabled);
     }
     constructor() {
         super();
-        this.elementRef = inject(ElementRef);
-        // The internal data model
-        this._innerValue = null;
-        this._disabled = false;
-        this._expandOptions = false;
+        this.selectElement = viewChild('select');
+        this.innerValue = model(null);
+        this.disabled = signal(false);
         this.hostRenderer = useHostRenderer();
-        this._isSelect = true;
-        this.thyAllowClear = false;
+        this.thySize = input();
+        this.name = input();
+        this.thyAllowClear = input(false, { transform: coerceBooleanProperty });
     }
     ngModelChange() {
-        this.onChangeFn(this._innerValue);
+        this.onChangeFn(this.innerValue());
         this.onTouchedFn();
     }
     ngOnInit() {
-        const classes = this._size ? [`thy-select-${this._size}`] : [];
+        const size = this.thySize();
+        const classes = size ? [`thy-select-${size}`] : [];
         this.hostRenderer.updateClass(classes);
     }
     onBlur(event) {
@@ -969,21 +917,21 @@ class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin {
         this.onTouchedFn();
     }
     onFocus(event) {
-        this.selectElement.nativeElement.focus();
+        this.selectElement().nativeElement.focus();
     }
     clearSelectValue(event) {
         event.stopPropagation();
-        this._innerValue = '';
-        this.onChangeFn(this._innerValue);
+        this.innerValue.set('');
+        this.onChangeFn(this.innerValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyNativeSelect, isStandalone: true, selector: "thy-native-select", inputs: { thySize: "thySize", name: "name", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty] }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex", "class.thy-select": "this._isSelect" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyNativeSelect, isStandalone: true, selector: "thy-native-select", inputs: { innerValue: { classPropertyName: "innerValue", publicName: "innerValue", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { innerValue: "innerValueChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "thy-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyNativeSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"_size\"\n  [disabled]=\"_disabled\"\n  [(ngModel)]=\"_innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n@if (thyAllowClear && _innerValue) {\n  <a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\">\n    <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </a>\n}\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+        ], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"thySize()\"\n  [disabled]=\"disabled()\"\n  [(ngModel)]=\"innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear()\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n@if (thyAllowClear() && innerValue()) {\n  <a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\">\n    <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </a>\n}\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNativeSelect, decorators: [{
             type: Component,
@@ -994,24 +942,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true
                         }
                     ], imports: [ThyInputDirective, FormsModule, ThyIcon], host: {
+                        class: 'thy-select',
                         '[attr.tabindex]': 'tabIndex',
                         '(focus)': 'onFocus($event)',
                         '(blur)': 'onBlur($event)'
-                    }, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"_size\"\n  [disabled]=\"_disabled\"\n  [(ngModel)]=\"_innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n@if (thyAllowClear && _innerValue) {\n  <a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\">\n    <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </a>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { selectElement: [{
-                type: ViewChild,
-                args: ['select', { static: true }]
-            }], _isSelect: [{
-                type: HostBinding,
-                args: ['class.thy-select']
-            }], thySize: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], thyAllowClear: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+                    }, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"thySize()\"\n  [disabled]=\"disabled()\"\n  [(ngModel)]=\"innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear()\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n@if (thyAllowClear() && innerValue()) {\n  <a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\">\n    <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </a>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class ThySelectModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }