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

package/fesm2022/ngx-tethys-shared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, Input, Directive, ElementRef, NgZone, Renderer2, EventEmitter, Output, ContentChildren, KeyValueDiffers, TemplateRef, ChangeDetectorRef, NgModule, HostBinding, numberAttribute, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, HostListener, ViewEncapsulation } from '@angular/core';
+import { input, inject, ViewContainerRef, effect, Directive, ElementRef, NgZone, Renderer2, output, computed, ContentChildren, KeyValueDiffers, TemplateRef, ChangeDetectorRef, NgModule, Input, model, signal, linkedSignal, numberAttribute, viewChild, untracked, ChangeDetectionStrategy, Component, InjectionToken, HostListener, ViewEncapsulation } from '@angular/core';
 import { reqAnimFrame, TabIndexDisabledControlValueAccessorMixin, ThyTranslate, mixinDisabled, MixinBase } from 'ngx-tethys/core';
 import { coerceBooleanProperty, keycodes, isTemplateRef, isUndefinedOrNull, ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
@@ -14,35 +14,34 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from 'ngx-tethys/grid';
 import { ThyGridModule } from 'ngx-tethys/grid';
+import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
+import { injectLocale } from 'ngx-tethys/i18n';
+import { outputToObservable } from '@angular/core/rxjs-interop';
 
 /**
  * @private
  */
 class ThyTranscludeDirective {
-    set thyTransclude(templateRef) {
-        this._ngTransclude = templateRef;
-        if (templateRef) {
-            this.viewRef.createEmbeddedView(templateRef);
-        }
-    }
-    get thyTransclude() {
-        return this._ngTransclude;
-    }
     constructor() {
+        this.thyTransclude = input();
         const viewRef = inject(ViewContainerRef);
         this.viewRef = viewRef;
+        effect(() => {
+            const transclude = this.thyTransclude();
+            if (transclude) {
+                this.viewRef.createEmbeddedView(transclude);
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTranscludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyTranscludeDirective, isStandalone: true, selector: "[thyTransclude]", inputs: { thyTransclude: "thyTransclude" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyTranscludeDirective, isStandalone: true, selector: "[thyTransclude]", inputs: { thyTransclude: { classPropertyName: "thyTransclude", publicName: "thyTransclude", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTranscludeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyTransclude]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyTransclude: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * 自动聚焦指令
@@ -54,50 +53,43 @@ class ThyAutofocusDirective {
         this.ngZone = inject(NgZone);
         // 自动选择，用于只读的 input 输入框，方便复制粘贴
         this._autoSelect = false;
-    }
-    /**
-     * 是否自动聚焦
-     * @default false
-     */
-    set thyAutofocus(value) {
-        if (value) {
-            // Note: this is being run outside of the Angular zone because `element.focus()` doesn't require
-            // running change detection.
-            this.ngZone.runOutsideAngular(() => 
-            // Note: `element.focus()` causes re-layout and this may lead to frame drop on slower devices.
-            // https://gist.github.com/paulirish/5d52fb081b3570c81e3a#setting-focus
-            // `setTimeout` is a macrotask and macrotasks are executed within the current rendering frame.
-            // Animation tasks are executed within the next rendering frame.
-            reqAnimFrame(() => {
-                this.elementRef.nativeElement.focus();
-                if (this._autoSelect && this.elementRef.nativeElement.select) {
-                    this.elementRef.nativeElement.select();
-                }
-            }));
-        }
-    }
-    /**
-     * 是否自动选择
-     * @default false
-     */
-    set thyAutoSelect(value) {
-        this._autoSelect = value;
+        /**
+         * 是否自动聚焦
+         * @default false
+         */
+        this.thyAutofocus = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 是否自动选择
+         * @default false
+         */
+        this.thyAutoSelect = input(false, { transform: coerceBooleanProperty });
+        effect(() => {
+            if (this.thyAutofocus()) {
+                // Note: this is being run outside of the Angular zone because `element.focus()` doesn't require
+                // running change detection.
+                this.ngZone.runOutsideAngular(() => 
+                // Note: `element.focus()` causes re-layout and this may lead to frame drop on slower devices.
+                // https://gist.github.com/paulirish/5d52fb081b3570c81e3a#setting-focus
+                // `setTimeout` is a macrotask and macrotasks are executed within the current rendering frame.
+                // Animation tasks are executed within the next rendering frame.
+                reqAnimFrame(() => {
+                    this.elementRef.nativeElement.focus();
+                    if (this.thyAutoSelect() && this.elementRef.nativeElement.select) {
+                        this.elementRef.nativeElement.select();
+                    }
+                }));
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyAutofocusDirective, isStandalone: true, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: { thyAutofocus: ["thyAutofocus", "thyAutofocus", coerceBooleanProperty], thyAutoSelect: ["thyAutoSelect", "thyAutoSelect", coerceBooleanProperty] }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyAutofocusDirective, isStandalone: true, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: { thyAutofocus: { classPropertyName: "thyAutofocus", publicName: "thyAutofocus", isSignal: true, isRequired: false, transformFunction: null }, thyAutoSelect: { classPropertyName: "thyAutoSelect", publicName: "thyAutoSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyAutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[thyAutofocus],textarea[thyAutofocus]'
                 }]
-        }], propDecorators: { thyAutofocus: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyAutoSelect: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * 与 (keydown.enter) 区别是支持组合键，当按 Ctrl + Enter 或者 Command + Enter 也会触发
@@ -108,7 +100,7 @@ class ThyEnterDirective {
         this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
-        this.thyEnter = new EventEmitter();
+        this.thyEnter = output();
         this.onKeydown = (event) => {
             const keyCode = event.which || event.keyCode;
             if (keyCode === keycodes.ENTER) {
@@ -134,9 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: '[thyEnter]'
                 }]
-        }], propDecorators: { thyEnter: [{
-                type: Output
-            }] } });
+        }] });
 
 /**
  * @name thyCtrlEnter
@@ -146,7 +136,7 @@ class ThyCtrlEnterDirective {
         this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
-        this.thyCtrlEnter = new EventEmitter();
+        this.thyCtrlEnter = output();
         this.onKeydown = (event) => {
             const keyCode = event.which || event.keyCode;
             if ((event.ctrlKey || event.metaKey) && keyCode === keycodes.ENTER) {
@@ -173,97 +163,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: '[thyCtrlEnter]'
                 }]
-        }], propDecorators: { thyCtrlEnter: [{
-                type: Output
-            }] } });
+        }] });
 
 /**
  * @name thyShow
  */
 class ThyShowDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.ngZone = inject(NgZone);
-        this.thyShowChange = new EventEmitter();
-        this.hostRenderer = useHostRenderer();
-    }
     unListenDocument() {
         if (this.unListenEvent) {
             this.unListenEvent();
             this.unListenEvent = null;
         }
     }
-    set thyShow(condition) {
-        if (condition) {
-            this.hostRenderer.setStyle('display', 'block');
-            this.ngZone.runOutsideAngular(() => setTimeout(() => {
-                this.unListenEvent = this.renderer.listen('document', 'click', event => {
-                    if (!this.elementRef.nativeElement.contains(event.target)) {
-                        if (this.thyShowChange.observers.length) {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.ngZone = inject(NgZone);
+        this.thyShowChange = output();
+        this.hostRenderer = useHostRenderer();
+        this.thyShow = input(false, { transform: coerceBooleanProperty });
+        effect(() => {
+            if (this.thyShow()) {
+                this.hostRenderer.setStyle('display', 'block');
+                this.ngZone.runOutsideAngular(() => setTimeout(() => {
+                    this.unListenEvent = this.renderer.listen('document', 'click', event => {
+                        if (!this.elementRef.nativeElement.contains(event.target)) {
                             this.ngZone.run(() => this.thyShowChange.emit(false));
+                            this.unListenDocument();
                         }
-                        this.unListenDocument();
-                    }
-                });
-            }));
-        }
-        else {
-            this.hostRenderer.setStyle('display', 'none');
-            this.unListenDocument();
-        }
+                    });
+                }));
+            }
+            else {
+                this.hostRenderer.setStyle('display', 'none');
+                this.unListenDocument();
+            }
+        });
     }
     ngOnDestroy() {
         this.unListenDocument();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyShowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyShowDirective, isStandalone: true, selector: "[thyShow]", inputs: { thyShow: ["thyShow", "thyShow", coerceBooleanProperty] }, outputs: { thyShowChange: "thyShowChange" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyShowDirective, isStandalone: true, selector: "[thyShow]", inputs: { thyShow: { classPropertyName: "thyShow", publicName: "thyShow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyShowChange: "thyShowChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyShowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyShow]'
                 }]
-        }], propDecorators: { thyShowChange: [{
-                type: Output
-            }], thyShow: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * 阻止事件冒泡
  * @name thyStopPropagation
  */
 class ThyStopPropagationDirective {
-    set thyStopPropagation(value) {
-        if (value === false || value === 'false') {
-            this._shouldStopPropagation = false;
-        }
-        else {
-            this._shouldStopPropagation = true;
-            if (!value || value === true || value === 'true') {
-                this._eventName = 'click';
-            }
-            else {
-                this._eventName = value;
-            }
-        }
-        this._changes$.next();
-    }
     constructor() {
-        this._eventName = 'click';
-        this._shouldStopPropagation = true;
+        this.thyStopPropagation = input(true);
+        this._eventName = computed(() => {
+            const stopPropagation = this.thyStopPropagation();
+            if (stopPropagation !== false) {
+                if (!stopPropagation || stopPropagation === true || stopPropagation === 'true') {
+                    return 'click';
+                }
+                else {
+                    return stopPropagation;
+                }
+            }
+        });
+        this._shouldStopPropagation = computed(() => {
+            const stopPropagation = this.thyStopPropagation();
+            return stopPropagation === false || stopPropagation === 'false' ? false : true;
+        });
         this._changes$ = new Subject();
         this._destroy$ = new Subject();
         const _host = inject(ElementRef);
         const _ngZone = inject(NgZone);
+        effect(() => {
+            this._changes$.next(this.thyStopPropagation());
+        });
         this._changes$
             .pipe(
         // Note: we start the stream immediately since the `thyStopPropagation` setter may never be reached.
-        startWith(null), switchMap(() => new Observable(subscriber => _ngZone.runOutsideAngular(() => fromEvent(_host.nativeElement, this._eventName).subscribe(subscriber)))), takeUntil(this._destroy$))
+        startWith(null), switchMap(() => new Observable(subscriber => _ngZone.runOutsideAngular(() => fromEvent(_host.nativeElement, this._eventName()).subscribe(subscriber)))), takeUntil(this._destroy$))
             .subscribe(event => {
-            if (this._shouldStopPropagation) {
+            if (this._shouldStopPropagation()) {
                 event.stopPropagation();
             }
         });
@@ -272,16 +256,14 @@ class ThyStopPropagationDirective {
         this._destroy$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyStopPropagationDirective, isStandalone: true, selector: "[thyStopPropagation]", inputs: { thyStopPropagation: "thyStopPropagation" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyStopPropagationDirective, isStandalone: true, selector: "[thyStopPropagation]", inputs: { thyStopPropagation: { classPropertyName: "thyStopPropagation", publicName: "thyStopPropagation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStopPropagationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyStopPropagation]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyStopPropagation: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * @name thyContextMenu
@@ -291,7 +273,7 @@ class ThyContextMenuDirective {
         this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
-        this.thyContextMenu = new EventEmitter();
+        this.thyContextMenu = output();
         this.rightClick = (event) => {
             event.preventDefault();
             this.ngZone.run(() => {
@@ -315,9 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: '[thyContextMenu]'
                 }]
-        }], propDecorators: { thyContextMenu: [{
-                type: Output
-            }] } });
+        }] });
 
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
 /**
@@ -328,11 +308,10 @@ class ThyScrollDirective {
         this.elementRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
         this._destroyed = new Subject();
-        this._enable = true;
-        this._initialled = false;
         this._elementScrolled = new Observable((observer) => this.ngZone.runOutsideAngular(() => fromEvent(this.elementRef.nativeElement, 'scroll', passiveEventListenerOptions)
             .pipe(takeUntil(this._destroyed))
             .subscribe(observer)));
+        this.thyEnable = input(true, { transform: coerceBooleanProperty });
         /**
          * @description
          *
@@ -352,12 +331,10 @@ class ThyScrollDirective {
          * }
          * ```
          */
-        this.thyOnScrolled = new EventEmitter();
-    }
-    set thyEnable(value) {
-        this._enable = value;
-        if (this._initialled) {
-            if (this._enable && this._subscription === null) {
+        this.thyOnScrolled = output();
+        effect(() => {
+            const thyEnable = this.thyEnable();
+            if (thyEnable && !this._subscription) {
                 this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));
             }
             else {
@@ -366,14 +343,9 @@ class ThyScrollDirective {
                     this._subscription = null;
                 }
             }
-        }
-    }
-    ngOnInit() {
-        if (this._enable) {
-            this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));
-        }
-        this._initialled = true;
+        });
     }
+    ngOnInit() { }
     ngOnDestroy() {
         this._destroyed.next();
         this._destroyed.complete();
@@ -382,19 +354,14 @@ class ThyScrollDirective {
         return this.elementRef;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyScrollDirective, isStandalone: true, selector: "[thyScroll]", inputs: { thyEnable: ["thyEnable", "thyEnable", coerceBooleanProperty] }, outputs: { thyOnScrolled: "thyOnScrolled" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyScrollDirective, isStandalone: true, selector: "[thyScroll]", inputs: { thyEnable: { classPropertyName: "thyEnable", publicName: "thyEnable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnScrolled: "thyOnScrolled" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyScroll]'
                 }]
-        }], propDecorators: { thyEnable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyOnScrolled: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * @private
@@ -448,23 +415,26 @@ class ThyStringOrTemplateOutletDirective {
     constructor() {
         this.viewContainerRef = inject(ViewContainerRef);
         this.renderer = inject(Renderer2);
-    }
-    ngOnChanges(changes) {
-        if (changes['thyStringOrTemplateOutlet']) {
+        this.thyStringOrTemplateOutletContext = input();
+        this.thyStringOrTemplateOutlet = input();
+        effect(() => {
             this.updateView();
-        }
-        else if (this.viewRef && changes['thyStringOrTemplateOutletContext'] && this.thyStringOrTemplateOutletContext) {
-            this.viewRef.context = this.thyStringOrTemplateOutletContext;
-        }
+        });
+        effect(() => {
+            if (this.viewRef && this.thyStringOrTemplateOutletContext()) {
+                this.viewRef.context = this.thyStringOrTemplateOutletContext();
+            }
+        });
     }
     updateView() {
+        const thyStringOrTemplateOutlet = this.thyStringOrTemplateOutlet();
         this.clear();
-        if (this.thyStringOrTemplateOutlet) {
-            if (isTemplateRef(this.thyStringOrTemplateOutlet)) {
-                this.viewRef = this.viewContainerRef.createEmbeddedView(this.thyStringOrTemplateOutlet, this.thyStringOrTemplateOutletContext);
+        if (thyStringOrTemplateOutlet) {
+            if (isTemplateRef(thyStringOrTemplateOutlet)) {
+                this.viewRef = this.viewContainerRef.createEmbeddedView(thyStringOrTemplateOutlet, this.thyStringOrTemplateOutletContext());
             }
             else {
-                this.textNode = this.renderer.createText(this.thyStringOrTemplateOutlet + '');
+                this.textNode = this.renderer.createText(thyStringOrTemplateOutlet + '');
                 const element = this.viewContainerRef.element.nativeElement;
                 this.renderer.insertBefore(element.parentNode, this.textNode, element);
             }
@@ -480,7 +450,7 @@ class ThyStringOrTemplateOutletDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStringOrTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyStringOrTemplateOutletDirective, isStandalone: true, selector: "[thyStringOrTemplateOutlet]", inputs: { thyStringOrTemplateOutletContext: "thyStringOrTemplateOutletContext", thyStringOrTemplateOutlet: "thyStringOrTemplateOutlet" }, exportAs: ["thyStringOrTemplateOutlet"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyStringOrTemplateOutletDirective, isStandalone: true, selector: "[thyStringOrTemplateOutlet]", inputs: { thyStringOrTemplateOutletContext: { classPropertyName: "thyStringOrTemplateOutletContext", publicName: "thyStringOrTemplateOutletContext", isSignal: true, isRequired: false, transformFunction: null }, thyStringOrTemplateOutlet: { classPropertyName: "thyStringOrTemplateOutlet", publicName: "thyStringOrTemplateOutlet", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["thyStringOrTemplateOutlet"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStringOrTemplateOutletDirective, decorators: [{
             type: Directive,
@@ -488,11 +458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: '[thyStringOrTemplateOutlet]',
                     exportAs: 'thyStringOrTemplateOutlet'
                 }]
-        }], propDecorators: { thyStringOrTemplateOutletContext: [{
-                type: Input
-            }], thyStringOrTemplateOutlet: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 function hasInput(componentRef, inputKey) {
     return componentRef['_tNode'].inputs?.[inputKey];
@@ -509,37 +475,43 @@ class ThyViewOutletDirective {
         /**
          * 组件或者模板 TemplateRef
          */
-        this.thyViewOutlet = null;
-    }
-    ngOnChanges(changes) {
-        const { viewContainerRef: viewContainerRef } = this;
-        if (changes['thyViewOutlet']) {
+        this.thyViewOutlet = input(null);
+        /**
+         * 组件和模板上下文传递数据
+         */
+        this.thyViewOutletContext = input();
+        effect(() => {
+            const thyViewOutlet = this.thyViewOutlet();
+            const { viewContainerRef: viewContainerRef } = this;
             viewContainerRef.clear();
             this.componentRef = undefined;
             this.embeddedViewRef = undefined;
-            if (this.thyViewOutlet) {
-                if (this.thyViewOutlet instanceof TemplateRef) {
-                    this.embeddedViewRef = viewContainerRef.createEmbeddedView(this.thyViewOutlet, this.thyViewOutletContext);
+            if (thyViewOutlet) {
+                if (thyViewOutlet instanceof TemplateRef) {
+                    this.embeddedViewRef = viewContainerRef.createEmbeddedView(thyViewOutlet, this.thyViewOutletContext());
                 }
                 else {
-                    this.componentRef = viewContainerRef.createComponent(this.thyViewOutlet, {
+                    this.componentRef = viewContainerRef.createComponent(thyViewOutlet, {
                         index: viewContainerRef.length
                     });
                 }
             }
-        }
-        if (changes['thyViewOutletContext']) {
+        });
+        effect(() => {
+            const thyViewOutletContext = this.thyViewOutletContext();
             let updatedKeys = [];
-            if (changes['thyViewOutletContext'].isFirstChange()) {
-                this.keyValueDiffer = this.keyValueDiffers.find(this.thyViewOutletContext).create();
-                this.keyValueDiffer.diff(this.thyViewOutletContext);
-                updatedKeys = Object.keys(this.thyViewOutletContext);
-            }
-            else {
-                const diffChanges = this.keyValueDiffer.diff(this.thyViewOutletContext);
-                diffChanges?.forEachChangedItem(item => {
-                    updatedKeys.push(item.key);
-                });
+            if (thyViewOutletContext) {
+                if (!this.keyValueDiffer) {
+                    this.keyValueDiffer = this.keyValueDiffers.find(this.thyViewOutletContext()).create();
+                    this.keyValueDiffer.diff(thyViewOutletContext);
+                    updatedKeys = Object.keys(thyViewOutletContext);
+                }
+                else {
+                    const diffChanges = this.keyValueDiffer.diff(this.thyViewOutletContext());
+                    diffChanges?.forEachChangedItem(item => {
+                        updatedKeys.push(item.key);
+                    });
+                }
             }
             if (this.componentRef) {
                 this.updateContext(this.componentRef.instance, updatedKeys);
@@ -549,32 +521,28 @@ class ThyViewOutletDirective {
                 this.updateContext(this.embeddedViewRef.context, updatedKeys);
                 this.embeddedViewRef.markForCheck();
             }
-        }
+        });
     }
     updateContext(context, updatedKeys) {
         updatedKeys.forEach(key => {
             // 兼容组件输入属性没有通过 @Input，设置了 @Input 采用 setInput，否则直接赋值，setInput 会触发 Angular 组件的 onChanges
             if (this.componentRef && hasInput(this.componentRef, key)) {
-                this.componentRef.setInput(key, this.thyViewOutletContext[key]);
+                this.componentRef.setInput(key, this.thyViewOutletContext()[key]);
             }
             else {
-                context[key] = this.thyViewOutletContext[key];
+                context[key] = this.thyViewOutletContext()[key];
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyViewOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyViewOutletDirective, isStandalone: true, selector: "[thyViewOutlet]", inputs: { thyViewOutlet: "thyViewOutlet", thyViewOutletContext: "thyViewOutletContext" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyViewOutletDirective, isStandalone: true, selector: "[thyViewOutlet]", inputs: { thyViewOutlet: { classPropertyName: "thyViewOutlet", publicName: "thyViewOutlet", isSignal: true, isRequired: false, transformFunction: null }, thyViewOutletContext: { classPropertyName: "thyViewOutletContext", publicName: "thyViewOutletContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyViewOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyViewOutlet]'
                 }]
-        }], propDecorators: { thyViewOutlet: [{
-                type: Input
-            }], thyViewOutletContext: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class ThySharedModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -639,33 +607,6 @@ const noop = () => { };
  * @private
  */
 class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixin {
-    get _isNoText() {
-        return this._isFormCheckInline && !this._labelText;
-    }
-    /**
-     * 是否同一行展示
-     * @default false
-     */
-    set thyInline(value) {
-        this._isFormCheckInline = value;
-    }
-    /**
-     * Label 展示文本
-     */
-    set thyLabelText(value) {
-        this._labelText = value;
-    }
-    /**
-     * Label 文本多语言 key
-     */
-    set thyLabelTextTranslateKey(value) {
-        if (value) {
-            this._labelText = this.thyTranslate.instant(value);
-        }
-        else {
-            this._labelText = '';
-        }
-    }
     /**
      * 是否禁用
      * @default false
@@ -709,8 +650,28 @@ class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixi
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this._isFormCheck = true;
-        this._isFormCheckInline = false;
         this._isChecked = false;
+        /**
+         * 是否同一行展示
+         * @default false
+         */
+        this.thyInline = input(false, { transform: coerceBooleanProperty });
+        /**
+         * Label 展示文本
+         */
+        this.thyLabelText = input();
+        /**
+         * Label 文本多语言 key
+         */
+        this.thyLabelTextTranslateKey = input();
+        this._labelText = computed(() => {
+            const labelTextTranslateKey = this.thyLabelTextTranslateKey();
+            const labelText = this.thyLabelText();
+            return labelTextTranslateKey ? this.thyTranslate.instant(labelTextTranslateKey) : labelText || '';
+        });
+        this._isNoText = computed(() => {
+            return this.thyInline() && !this._labelText();
+        });
         this.disabled = false;
     }
     change() {
@@ -722,30 +683,19 @@ class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixi
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormCheckBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyFormCheckBaseComponent, isStandalone: true, inputs: { thyInline: ["thyInline", "thyInline", coerceBooleanProperty], thyLabelText: "thyLabelText", thyLabelTextTranslateKey: "thyLabelTextTranslateKey", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { properties: { "class.form-check": "this._isFormCheck", "class.form-check-inline": "this._isFormCheckInline", "class.form-check-checked": "this._isChecked", "class.form-check-inline-no-label-text": "this._isNoText" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyFormCheckBaseComponent, isStandalone: true, inputs: { thyInline: { classPropertyName: "thyInline", publicName: "thyInline", isSignal: true, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, thyLabelTextTranslateKey: { classPropertyName: "thyLabelTextTranslateKey", publicName: "thyLabelTextTranslateKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty } }, host: { properties: { "class.form-check": "_isFormCheck", "class.form-check-inline": "thyInline()", "class.form-check-checked": "_isChecked", "class.form-check-inline-no-label-text": "_isNoText()" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormCheckBaseComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [], propDecorators: { _isFormCheck: [{
-                type: HostBinding,
-                args: ['class.form-check']
-            }], _isFormCheckInline: [{
-                type: HostBinding,
-                args: ['class.form-check-inline']
-            }], _isChecked: [{
-                type: HostBinding,
-                args: ['class.form-check-checked']
-            }], _isNoText: [{
-                type: HostBinding,
-                args: ['class.form-check-inline-no-label-text']
-            }], thyInline: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyLabelText: [{
-                type: Input
-            }], thyLabelTextTranslateKey: [{
-                type: Input
-            }], thyDisabled: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class.form-check]': '_isFormCheck',
+                        '[class.form-check-inline]': 'thyInline()',
+                        '[class.form-check-checked]': '_isChecked',
+                        '[class.form-check-inline-no-label-text]': '_isNoText()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
             }] } });
@@ -756,205 +706,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThySelectControl {
     constructor() {
         this.renderer = inject(Renderer2);
-        this.inputValue = '';
-        this.isComposing = false;
-        this.panelOpened = false;
-        this.isMultiple = false;
-        this.showSearch = false;
-        this.disabled = false;
+        this.inputValue = model('');
+        this.isComposing = signal(false);
+        this.isFirstPanelOpenedChange = true;
         this.hostRenderer = useHostRenderer();
-        this.thyAllowClear = false;
-        this.thyPlaceholder = '';
-        this.thyMaxTagCount = 0;
-        this.thyBorderless = false;
-        this.thyPreset = '';
-        this.thyOnSearch = new EventEmitter();
-        this.thyOnRemove = new EventEmitter();
-        this.thyOnClear = new EventEmitter();
-        this.thyOnBlur = new EventEmitter();
-    }
-    get thyPanelOpened() {
-        return this.panelOpened;
-    }
-    set thyPanelOpened(value) {
-        this.panelOpened = value;
-        if (this.panelOpened && this.thyShowSearch) {
-            Promise.resolve(null).then(() => {
-                this.inputElement.nativeElement.focus();
-            });
-        }
-        if (!this.panelOpened && this.thyShowSearch) {
-            new Promise(resolve => setTimeout(resolve, 100)).then(() => {
-                this.inputValue = '';
-                this.updateWidth();
-                this.thyOnSearch.emit(this.inputValue);
-            });
-        }
-        this.setSelectControlClass();
-    }
-    get thyIsMultiple() {
-        return this.isMultiple;
-    }
-    set thyIsMultiple(value) {
-        this.isMultiple = value;
-        this.setSelectControlClass();
-    }
-    get thyShowSearch() {
-        return this.showSearch;
-    }
-    set thyShowSearch(value) {
-        this.showSearch = value;
-        this.setSelectControlClass();
-    }
-    get thySelectedOptions() {
-        return this.selectedOptions;
-    }
-    set thySelectedOptions(value) {
-        let sameValue = false;
-        const oldValue = this.selectedOptions;
-        if (this.isMultiple) {
-            if (oldValue instanceof Array && value instanceof Array && oldValue.length === value.length) {
-                sameValue = value.every((option, index) => option.thyValue === oldValue[index].thyValue);
+        this.thyPanelOpened = input(false, { transform: coerceBooleanProperty });
+        this.thyIsMultiple = input(false, { transform: coerceBooleanProperty });
+        this.thyShowSearch = input(false, { transform: coerceBooleanProperty });
+        this.thySelectedOptions = input();
+        this.previousSelectedOptions = linkedSignal({
+            source: () => this.thySelectedOptions(),
+            computation: (source, previous) => previous?.source
+        });
+        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
+        this.customDisplayTemplate = input(undefined);
+        this.thyAllowClear = input(false, { transform: coerceBooleanProperty });
+        this.thyPlaceholder = input('');
+        this.thySize = input();
+        this.tagSize = computed(() => {
+            const value = this.thySize();
+            if (value === 'xs' || value === 'sm') {
+                return 'sm';
             }
-        }
-        else {
-            if (oldValue && value) {
-                sameValue = oldValue.thyValue === value.thyValue;
+            else if (value === 'lg') {
+                return 'lg';
             }
-        }
-        this.selectedOptions = value;
-        if (this.panelOpened && this.thyShowSearch) {
-            if (!sameValue) {
-                Promise.resolve(null).then(() => {
-                    this.inputValue = '';
-                    this.updateWidth();
-                });
+            else {
+                return 'md';
             }
-            //等待组件渲染好再聚焦
-            setTimeout(() => {
-                if (this.panelOpened) {
-                    this.inputElement.nativeElement.focus();
+        });
+        this.thyMaxTagCount = input(0, { transform: numberAttribute });
+        this.thyBorderless = input(false, { transform: coerceBooleanProperty });
+        this.thyPreset = input('');
+        this.thyOnSearch = output();
+        this.thyOnRemove = output();
+        this.thyOnClear = output();
+        this.thyOnBlur = output();
+        this.inputElement = viewChild('inputElement');
+        this.locale = injectLocale('shared');
+        this.isSelectedValue = computed(() => {
+            return ((!this.thyIsMultiple() && !isUndefinedOrNull(this.thySelectedOptions())) ||
+                (this.thyIsMultiple() && this.thySelectedOptions().length > 0));
+        });
+        this.showClearIcon = computed(() => {
+            return this.thyAllowClear() && this.isSelectedValue();
+        });
+        this.maxSelectedTags = computed(() => {
+            const selectedOptions = this.thySelectedOptions();
+            if (this.thyMaxTagCount() > 0 && selectedOptions instanceof Array && selectedOptions.length > this.thyMaxTagCount()) {
+                return selectedOptions.slice(0, this.thyMaxTagCount() - 1);
+            }
+            return selectedOptions;
+        });
+        this.collapsedSelectedTags = computed(() => {
+            const selectedOptions = this.thySelectedOptions();
+            const maxTagCount = this.thyMaxTagCount();
+            if (maxTagCount && selectedOptions instanceof Array && selectedOptions.length > maxTagCount) {
+                return selectedOptions.slice(maxTagCount - 1, selectedOptions.length);
+            }
+            return [];
+        });
+        this.selectedValueStyle = computed(() => {
+            let showSelectedValue = false;
+            if (this.thyShowSearch()) {
+                if (this.thyPanelOpened()) {
+                    showSelectedValue = !(this.isComposing() || this.inputValue());
+                }
+                else {
+                    showSelectedValue = true;
                 }
-            }, 200);
-        }
-    }
-    get thyDisabled() {
-        return this.disabled;
-    }
-    set thyDisabled(value) {
-        this.disabled = value;
-        this.setSelectControlClass();
-    }
-    get thySize() {
-        return this.size;
-    }
-    set thySize(value) {
-        this.size = value;
-        this.setSelectControlClass();
-        if (value === 'xs' || value === 'sm') {
-            this.tagSize = 'sm';
-        }
-        else if (value === 'lg') {
-            this.tagSize = 'lg';
-        }
-        else {
-            this.tagSize = 'md';
-        }
-    }
-    get selectedValueStyle() {
-        let showSelectedValue = false;
-        if (this.showSearch) {
-            if (this.panelOpened) {
-                showSelectedValue = !(this.isComposing || this.inputValue);
             }
             else {
                 showSelectedValue = true;
             }
-        }
-        else {
-            showSelectedValue = true;
-        }
-        return { display: showSelectedValue ? 'flex' : 'none' };
-    }
-    get placeholderStyle() {
-        let placeholder = true;
-        if (this.isSelectedValue) {
-            placeholder = false;
-        }
-        if (!this.thyPlaceholder) {
-            placeholder = false;
-        }
-        if (this.isComposing || this.inputValue) {
-            placeholder = false;
-        }
-        return { display: placeholder ? 'block' : 'none' };
-    }
-    get selectedValue() {
-        return this.thySelectedOptions;
-    }
-    get multipleSelectedValue() {
-        return this.thySelectedOptions;
-    }
-    get maxSelectedTags() {
-        if (this.thyMaxTagCount > 0 && this.thySelectedOptions instanceof Array && this.thySelectedOptions.length > this.thyMaxTagCount) {
-            return this.thySelectedOptions.slice(0, this.thyMaxTagCount - 1);
-        }
-        return this.thySelectedOptions;
-    }
-    get showClearIcon() {
-        return this.thyAllowClear && this.isSelectedValue;
-    }
-    get isSelectedValue() {
-        return ((!this.isMultiple && !isUndefinedOrNull(this.thySelectedOptions)) ||
-            (this.isMultiple && this.thySelectedOptions.length > 0));
-    }
-    ngOnInit() {
-        this.setSelectControlClass();
+            return { display: showSelectedValue ? 'flex' : 'none' };
+        });
+        this.placeholderStyle = computed(() => {
+            let placeholder = true;
+            if (this.isSelectedValue()) {
+                placeholder = false;
+            }
+            if (!this.thyPlaceholder()) {
+                placeholder = false;
+            }
+            if (this.isComposing() || this.inputValue()) {
+                placeholder = false;
+            }
+            return { display: placeholder ? 'block' : 'none' };
+        });
+        effect(() => {
+            const panelOpened = this.thyPanelOpened();
+            if (this.isFirstPanelOpenedChange) {
+                this.isFirstPanelOpenedChange = false;
+                return;
+            }
+            if (panelOpened) {
+                untracked(() => {
+                    if (this.thyShowSearch()) {
+                        Promise.resolve(null).then(() => {
+                            this.inputElement()?.nativeElement.focus();
+                        });
+                    }
+                });
+            }
+            else {
+                untracked(() => {
+                    if (this.thyShowSearch()) {
+                        new Promise(resolve => setTimeout(resolve, 100)).then(() => {
+                            this.inputValue.set('');
+                            this.updateWidth();
+                            this.thyOnSearch.emit(this.inputValue());
+                        });
+                    }
+                });
+            }
+        });
+        effect(() => {
+            this.setSelectControlClass();
+        });
+        effect(() => {
+            const oldValue = this.previousSelectedOptions();
+            const value = this.thySelectedOptions();
+            if (value) {
+                let sameValue = false;
+                untracked(() => {
+                    if (this.thyIsMultiple()) {
+                        if (oldValue instanceof Array && value instanceof Array && oldValue.length === value.length) {
+                            sameValue = value.every((option, index) => option.thyValue === oldValue[index].thyValue);
+                        }
+                    }
+                    else {
+                        if (oldValue && value) {
+                            sameValue = oldValue.thyValue === value.thyValue;
+                        }
+                    }
+                    if (this.thyPanelOpened() && this.thyShowSearch()) {
+                        if (!sameValue) {
+                            Promise.resolve(null).then(() => {
+                                this.inputValue.set('');
+                                this.updateWidth();
+                            });
+                        }
+                        //等待组件渲染好再聚焦
+                        setTimeout(() => {
+                            if (this.thyPanelOpened()) {
+                                this.inputElement()?.nativeElement.focus();
+                            }
+                        }, 200);
+                    }
+                });
+            }
+        });
     }
+    ngOnInit() { }
     setSelectControlClass() {
-        const modeType = this.isMultiple ? 'multiple' : 'single';
+        const modeType = this.thyIsMultiple() ? 'multiple' : 'single';
         const selectControlClass = {
             [`form-control`]: true,
-            [`form-control-${this.thySize}`]: !!this.thySize,
+            [`form-control-${this.thySize()}`]: !!this.thySize(),
             [`form-control-custom`]: true,
             [`select-control`]: true,
             [`select-control-${modeType}`]: true,
-            [`select-control-show-search`]: this.showSearch,
-            [`panel-is-opened`]: this.panelOpened,
-            [`disabled`]: this.disabled
+            [`select-control-show-search`]: this.thyShowSearch(),
+            [`panel-is-opened`]: this.thyPanelOpened(),
+            [`disabled`]: this.thyDisabled()
         };
         this.hostRenderer.updateClassByMap(selectControlClass);
         this.searchInputControlClass = {
             [`form-control`]: true,
-            [`form-control-${this.thySize}`]: !!this.thySize,
+            [`form-control-${this.thySize()}`]: !!this.thySize(),
             [`search-input-field`]: true,
-            [`hidden`]: !this.thyShowSearch
+            [`hidden`]: !this.thyShowSearch(),
+            [`disabled`]: this.thyDisabled()
         };
     }
     setInputValue(value) {
-        if (value !== this.inputValue) {
-            this.inputValue = value;
+        if (value !== this.inputValue()) {
+            this.inputValue.set(value);
             this.updateWidth();
-            this.thyOnSearch.emit(this.inputValue);
+            this.thyOnSearch.emit(this.inputValue());
         }
     }
     handleBackspace(event) {
         if (event.isComposing) {
             return;
         }
-        if (!this.inputValue?.length && this.selectedOptions instanceof Array) {
-            if (this.selectedOptions.length > 0) {
-                this.removeHandle(this.selectedOptions[this.selectedOptions.length - 1], event);
+        const selectedOptions = this.thySelectedOptions();
+        if (!this.inputValue()?.length && selectedOptions instanceof Array) {
+            if (selectedOptions.length > 0) {
+                this.removeHandle(selectedOptions[selectedOptions.length - 1], event);
             }
         }
     }
     updateWidth() {
-        if (this.isMultiple && this.thyShowSearch) {
-            if (this.inputValue || this.isComposing) {
-                this.renderer.setStyle(this.inputElement.nativeElement, 'width', `${this.inputElement.nativeElement.scrollWidth}px`);
+        if (this.thyIsMultiple() && this.thyShowSearch()) {
+            if (this.inputValue() || this.isComposing()) {
+                this.renderer.setStyle(this.inputElement()?.nativeElement, 'width', `${this.inputElement()?.nativeElement.scrollWidth}px`);
             }
             else {
-                this.renderer.removeStyle(this.inputElement.nativeElement, 'width');
+                this.renderer.removeStyle(this.inputElement()?.nativeElement, 'width');
             }
         }
     }
@@ -964,6 +914,9 @@ class ThySelectControl {
     clearHandle($event) {
         this.thyOnClear.emit($event);
     }
+    compositionChange(isComposing) {
+        this.isComposing.set(isComposing);
+    }
     trackValue(_index, option) {
         return option.thyValue;
     }
@@ -971,56 +924,14 @@ class ThySelectControl {
         this.thyOnBlur.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { thyPanelOpened: ["thyPanelOpened", "thyPanelOpened", coerceBooleanProperty], thyIsMultiple: ["thyIsMultiple", "thyIsMultiple", coerceBooleanProperty], thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thySelectedOptions: "thySelectedOptions", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], customDisplayTemplate: "customDisplayTemplate", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyPlaceholder: "thyPlaceholder", thySize: "thySize", thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyBorderless: ["thyBorderless", "thyBorderless", coerceBooleanProperty], thyPreset: "thyPreset" }, outputs: { thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"isComposing = true\"\n    (compositionend)=\"isComposing = false\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle\">\n      {{ thyPlaceholder }}\n    </div>\n  }\n  @if (isMultiple) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset === 'tag') {\n        @for (item of maxSelectedTags; track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!disabled) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of maxSelectedTags; track trackValue($index, item)) {\n          <div\n            thyFlexItem\n            thyTag\n            class=\"choice-item\"\n            [ngClass]=\"{ disabled: disabled === true }\"\n            [thySize]=\"tagSize\"\n            >\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate) {\n                {{ item.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!disabled) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (thyMaxTagCount && multipleSelectedValue.length > thyMaxTagCount) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize\"\n          [ngClass]=\"{ disabled: disabled === true }\">\n          <div class=\"text-truncate\">+{{ multipleSelectedValue.length - thyMaxTagCount + 1 }}...</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle\">\n        @if (!customDisplayTemplate) {\n          <span class=\"text-truncate\">{{ selectedValue?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: selectedValue.thyRawValue || selectedValue.thyValue || selectedValue\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i2.ThyFlex, selector: "[thyFlex]", inputs: ["thyDirection", "thyWrap", "thyJustifyContent", "thyAlignItems", "thyGap"] }, { kind: "directive", type: i2.ThyFlexItem, selector: "[thyFlexItem]", inputs: ["thyFlexItem", "thyGrow", "thyShrink", "thyBasis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, thyPanelOpened: { classPropertyName: "thyPanelOpened", publicName: "thyPanelOpened", isSignal: true, isRequired: false, transformFunction: null }, thyIsMultiple: { classPropertyName: "thyIsMultiple", publicName: "thyIsMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thySelectedOptions: { classPropertyName: "thySelectedOptions", publicName: "thySelectedOptions", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, customDisplayTemplate: { classPropertyName: "customDisplayTemplate", publicName: "customDisplayTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", 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 }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyBorderless: { classPropertyName: "thyBorderless", publicName: "thyBorderless", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange", thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless()" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"compositionChange(true)\"\n    (compositionend)=\"compositionChange(false)\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue()\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled()\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue()) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle()\">\n      {{ thyPlaceholder() }}\n    </div>\n  }\n  @if (thyIsMultiple()) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset() === 'tag') {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem thyTag class=\"choice-item\" [ngClass]=\"{ disabled: thyDisabled() === true }\" [thySize]=\"tagSize()\">\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate()) {\n                {{ item?.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (thyMaxTagCount() && thySelectedOptions()?.length > thyMaxTagCount()) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize()\"\n          [ngClass]=\"{ disabled: thyDisabled() === true }\"\n          [thyTooltip]=\"maxTagTooltip\">\n          <div class=\"text-truncate\">+{{ thySelectedOptions()?.length - thyMaxTagCount() + 1 }}</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue()) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle()\">\n        @if (!customDisplayTemplate()) {\n          <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate()\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n\n<ng-template #maxTagTooltip>\n  @let lastIndex = collapsedSelectedTags().length - 1;\n  @for (item of collapsedSelectedTags(); track trackValue($index, item)) {\n    {{ item.thyLabelText }}\n    @if ($index !== lastIndex) {\n      {{ locale().comma }}\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i2.ThyFlex, selector: "[thyFlex]", inputs: ["thyDirection", "thyWrap", "thyJustifyContent", "thyAlignItems", "thyGap"] }, { kind: "directive", type: i2.ThyFlexItem, selector: "[thyFlexItem]", inputs: ["thyFlexItem", "thyGrow", "thyShrink", "thyBasis"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectControl, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-select-control,[thySelectControl]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass, NgStyle, ThyTag, NgTemplateOutlet, ThyIcon, ThyGridModule], host: {
-                        '[class.select-control-borderless]': 'thyBorderless'
-                    }, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"isComposing = true\"\n    (compositionend)=\"isComposing = false\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle\">\n      {{ thyPlaceholder }}\n    </div>\n  }\n  @if (isMultiple) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset === 'tag') {\n        @for (item of maxSelectedTags; track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!disabled) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of maxSelectedTags; track trackValue($index, item)) {\n          <div\n            thyFlexItem\n            thyTag\n            class=\"choice-item\"\n            [ngClass]=\"{ disabled: disabled === true }\"\n            [thySize]=\"tagSize\"\n            >\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate) {\n                {{ item.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!disabled) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (thyMaxTagCount && multipleSelectedValue.length > thyMaxTagCount) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize\"\n          [ngClass]=\"{ disabled: disabled === true }\">\n          <div class=\"text-truncate\">+{{ multipleSelectedValue.length - thyMaxTagCount + 1 }}...</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle\">\n        @if (!customDisplayTemplate) {\n          <span class=\"text-truncate\">{{ selectedValue?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: selectedValue.thyRawValue || selectedValue.thyValue || selectedValue\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n" }]
-        }], propDecorators: { thyPanelOpened: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyIsMultiple: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyShowSearch: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thySelectedOptions: [{
-                type: Input
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], customDisplayTemplate: [{
-                type: Input
-            }], thyAllowClear: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPlaceholder: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyMaxTagCount: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyBorderless: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPreset: [{
-                type: Input
-            }], thyOnSearch: [{
-                type: Output
-            }], thyOnRemove: [{
-                type: Output
-            }], thyOnClear: [{
-                type: Output
-            }], thyOnBlur: [{
-                type: Output
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['inputElement']
-            }] } });
+            args: [{ selector: 'thy-select-control,[thySelectControl]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass, NgStyle, ThyTag, NgTemplateOutlet, ThyIcon, ThyGridModule, ThyTooltipDirective], host: {
+                        '[class.select-control-borderless]': 'thyBorderless()'
+                    }, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"compositionChange(true)\"\n    (compositionend)=\"compositionChange(false)\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue()\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled()\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue()) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle()\">\n      {{ thyPlaceholder() }}\n    </div>\n  }\n  @if (thyIsMultiple()) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset() === 'tag') {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem thyTag class=\"choice-item\" [ngClass]=\"{ disabled: thyDisabled() === true }\" [thySize]=\"tagSize()\">\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate()) {\n                {{ item?.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (thyMaxTagCount() && thySelectedOptions()?.length > thyMaxTagCount()) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize()\"\n          [ngClass]=\"{ disabled: thyDisabled() === true }\"\n          [thyTooltip]=\"maxTagTooltip\">\n          <div class=\"text-truncate\">+{{ thySelectedOptions()?.length - thyMaxTagCount() + 1 }}</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue()) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle()\">\n        @if (!customDisplayTemplate()) {\n          <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate()\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n\n<ng-template #maxTagTooltip>\n  @let lastIndex = collapsedSelectedTags().length - 1;\n  @for (item of collapsedSelectedTags(); track trackValue($index, item)) {\n    {{ item.thyLabelText }}\n    @if ($index !== lastIndex) {\n      {{ locale().comma }}\n    }\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * @license
@@ -1059,39 +970,26 @@ let _uniqueIdCounter = 0;
 class ThyListOption {
     constructor() {
         this.element = inject(ElementRef);
-        this.changeDetector = inject(ChangeDetectorRef);
         this.parentSelectionList = inject(THY_LIST_OPTION_PARENT_COMPONENT, { optional: true });
-        this._role = 'option';
-        this._tabIndex = -1;
-        this.id = `thy-list-option-${_uniqueIdCounter++}`;
-    }
-    get _isListOption() {
-        return this.parentSelectionList.layout === 'list';
-    }
-    get _parentLayout() {
-        return this.parentSelectionList.layout === 'grid';
-    }
-    set thyDisabled(value) {
-        this.disabled = value;
+        this.role = 'option';
+        this.tabIndex = -1;
+        this.isMultiple = computed(() => this.parentSelectionList.multiple());
+        this.isListOption = computed(() => this.parentSelectionList.layout() === 'list');
+        this.isGridOption = computed(() => this.parentSelectionList.layout() === 'grid');
+        this.id = input(`thy-list-option-${_uniqueIdCounter++}`);
+        this.thyValue = input(undefined);
+        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
     }
     /** Whether the option is selected. */
     get selected() {
         return this.parentSelectionList.isSelected(this);
     }
     onClick(event) {
-        if (this.parentSelectionList.multiple || !this.parentSelectionList.isSelected(this)) {
+        if (this.parentSelectionList.multiple() || !this.parentSelectionList.isSelected(this)) {
             this.parentSelectionList.toggleOption(this, event);
             this.parentSelectionList.setActiveOption(this);
         }
     }
-    // @HostListener('focus', ['$event'])
-    // onFocus(event: Event) {
-    //     this.parentSelectionList.setFocusedOption(this, event);
-    // }
-    /** Allows for programmatic focusing of the option. */
-    // focus(origin?: FocusOrigin): void {
-    //     this.element.nativeElement.focus();
-    // }
     setActiveStyles() {
         this.element.nativeElement.classList.add('hover');
         this.parentSelectionList.scrollIntoView(this);
@@ -1107,37 +1005,19 @@ class ThyListOption {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: "id", thyValue: "thyValue", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.thy-list-option": "this._isListOption", "class.thy-grid-option": "this._parentLayout", "attr.role": "this._role", "attr.tabindex": "this._tabIndex", "class.disabled": "this.disabled", "class.active": "this.selected" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (parentSelectionList.multiple && parentSelectionList.layout === 'list') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (parentSelectionList.layout === 'grid') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.disabled": "thyDisabled()", "class.thy-list-option": "isListOption()", "class.thy-grid-option": "isGridOption()", "class.active": "selected", "attr.role": "role", "attr.tabindex": "tabIndex" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (isMultiple() && isListOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (isGridOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ 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: ThyListOption, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-list-option,[thy-list-option]', imports: [ThyIcon], template: "<ng-content></ng-content>\n@if (parentSelectionList.multiple && parentSelectionList.layout === 'list') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (parentSelectionList.layout === 'grid') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n" }]
-        }], propDecorators: { _isListOption: [{
-                type: HostBinding,
-                args: [`class.thy-list-option`]
-            }], _parentLayout: [{
-                type: HostBinding,
-                args: [`class.thy-grid-option`]
-            }], _role: [{
-                type: HostBinding,
-                args: [`attr.role`]
-            }], _tabIndex: [{
-                type: HostBinding,
-                args: [`attr.tabindex`]
-            }], id: [{
-                type: Input
-            }], thyValue: [{
-                type: Input
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], disabled: [{
-                type: HostBinding,
-                args: [`class.disabled`]
-            }], selected: [{
-                type: HostBinding,
-                args: [`class.active`]
-            }], onClick: [{
+            args: [{ selector: 'thy-list-option,[thy-list-option]', imports: [ThyIcon], host: {
+                        '[class.disabled]': 'thyDisabled()',
+                        '[class.thy-list-option]': 'isListOption()',
+                        '[class.thy-grid-option]': 'isGridOption()',
+                        '[class.active]': 'selected',
+                        '[attr.role]': 'role',
+                        '[attr.tabindex]': 'tabIndex'
+                    }, template: "<ng-content></ng-content>\n@if (isMultiple() && isListOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (isGridOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n" }]
+        }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -1179,35 +1059,26 @@ class ThyOptionVisibleChangeEvent {
  * @order 20
  */
 class ThyOption extends SelectOptionBase {
-    set thyDisabled(value) {
-        this._disabled = value;
-    }
-    get thyDisabled() {
-        return this._disabled;
-    }
+    // 继承至 Highlightable，无法修改为 Signal
     get disabled() {
-        return this.hidden || this._disabled;
-    }
-    get hidden() {
-        return this._hidden;
+        return this.hidden() || this.thyDisabled();
     }
     get tabIndex() {
         return this.disabled ? '-1' : '0';
     }
-    get selected() {
-        return this._selected;
-    }
     constructor() {
         super();
         this.element = inject(ElementRef);
         this.parent = inject(THY_OPTION_PARENT_COMPONENT, { optional: true });
         this.cdr = inject(ChangeDetectorRef);
-        this._selected = false;
-        this._hidden = false;
-        this._disabled = false;
-        this._isOptionItem = true;
-        this.selectionChange = new EventEmitter();
-        this.visibleChange = new EventEmitter();
+        this.thyShowOptionCustom = input();
+        this.thySearchKey = input();
+        this.template = viewChild(TemplateRef);
+        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
+        this.hidden = signal(false);
+        this.selected = signal(false);
+        this.selectionChange = output();
+        this.visibleChange = output();
     }
     getHostElement() {
         return this.element.nativeElement;
@@ -1223,44 +1094,46 @@ class ThyOption extends SelectOptionBase {
     }
     selectViaInteraction() {
         if (!this.disabled) {
-            this._selected = this.parent.isMultiple ? !this._selected : true;
+            const selected = this.parent.isMultiple ? !this.selected() : true;
+            this.selected.set(selected);
             this.cdr.markForCheck();
             this.emitSelectionChangeEvent(true);
         }
     }
     select(event) {
         if (!this.disabled) {
-            if (!this._selected) {
-                this._selected = true;
+            if (!this.selected()) {
+                this.selected.set(true);
                 this.emitSelectionChangeEvent();
                 this.cdr.markForCheck();
             }
         }
     }
     deselect() {
-        if (this._selected || this.disabled) {
-            this._selected = false;
+        if (this.selected() || this.disabled) {
+            this.selected.set(false);
             this.emitSelectionChangeEvent();
             this.cdr.markForCheck();
         }
     }
     hideOption() {
-        if (!this._hidden) {
-            this._hidden = true;
+        if (!this.hidden()) {
+            this.hidden.set(true);
             this.visibleChange.emit({ option: this });
             this.cdr.markForCheck();
         }
     }
     showOption() {
-        if (this._hidden) {
-            this._hidden = false;
+        if (this.hidden()) {
+            this.hidden.set(false);
             this.visibleChange.emit({ option: this });
             this.cdr.markForCheck();
         }
     }
     matchSearchText(searchText) {
-        if (this.thySearchKey) {
-            if (this.thySearchKey.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
+        const thySearchKey = this.thySearchKey();
+        if (thySearchKey) {
+            if (thySearchKey.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
                 return true;
             }
             else {
@@ -1292,46 +1165,23 @@ class ThyOption extends SelectOptionBase {
     }
     ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: "thyValue", thyRawValue: "thyRawValue", thyLabelText: "thyLabelText", thyShowOptionCustom: "thyShowOptionCustom", thySearchKey: "thySearchKey", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, outputs: { selectionChange: "selectionChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.thy-option-item": "this._isOptionItem", "class.disabled": "this.thyDisabled", "class.hidden": "this.hidden", "attr.tabindex": "this.tabIndex", "class.active": "this.selected" } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (thyShowOptionCustom) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: false, isRequired: false, transformFunction: null }, thyRawValue: { classPropertyName: "thyRawValue", publicName: "thyRawValue", isSignal: false, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: false, isRequired: false, transformFunction: null }, thyShowOptionCustom: { classPropertyName: "thyShowOptionCustom", publicName: "thyShowOptionCustom", isSignal: true, isRequired: false, transformFunction: null }, thySearchKey: { classPropertyName: "thySearchKey", publicName: "thySearchKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.disabled": "thyDisabled()", "class.hidden": "hidden()", "attr.tabindex": "tabIndex", "class.active": "selected()" }, classAttribute: "thy-option-item" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (thyShowOptionCustom()) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOption, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyIcon], template: "@if (thyShowOptionCustom) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n" }]
+            args: [{ selector: 'thy-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyIcon], host: {
+                        class: 'thy-option-item',
+                        '[class.disabled]': 'thyDisabled()',
+                        '[class.hidden]': 'hidden()',
+                        '[attr.tabindex]': `tabIndex`,
+                        '[class.active]': 'selected()'
+                    }, template: "@if (thyShowOptionCustom()) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { thyValue: [{
                 type: Input
             }], thyRawValue: [{
                 type: Input
             }], thyLabelText: [{
                 type: Input
-            }], thyShowOptionCustom: [{
-                type: Input
-            }], thySearchKey: [{
-                type: Input
-            }], _isOptionItem: [{
-                type: HostBinding,
-                args: ['class.thy-option-item']
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }, {
-                type: HostBinding,
-                args: [`class.disabled`]
-            }], hidden: [{
-                type: HostBinding,
-                args: ['class.hidden']
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], selected: [{
-                type: HostBinding,
-                args: [`class.active`]
-            }], selectionChange: [{
-                type: Output
-            }], visibleChange: [{
-                type: Output
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -1347,19 +1197,17 @@ class ThySelectOptionGroup {
     constructor() {
         this._ngZone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
-        this._hidden = false;
-        this._isOptionGroup = true;
+        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
+        this.hidden = signal(false);
+        this.thyGroupLabel = input(undefined);
         this._destroy$ = new Subject();
         this.optionVisibleChanges = defer(() => {
             if (this.options) {
-                return merge(...this.options.map(option => option.visibleChange));
+                return merge(...this.options.map(option => outputToObservable(option.visibleChange)));
             }
             return this._ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionVisibleChanges));
         });
     }
-    get hidden() {
-        return this._hidden;
-    }
     ngAfterContentInit() {
         this.options.changes.pipe(startWith(null), takeUntil(this._destroy$)).subscribe(() => {
             this._resetOptions();
@@ -1367,10 +1215,10 @@ class ThySelectOptionGroup {
     }
     _resetOptions() {
         const changedOrDestroyed$ = merge(this.options.changes, this._destroy$);
-        merge(...this.options.map(option => option.visibleChange))
+        merge(...this.options.map(option => outputToObservable(option.visibleChange)))
             .pipe(takeUntil(changedOrDestroyed$), debounceTime(10), map((event) => {
             const hasOption = this.options.find(option => {
-                if (!option.hidden) {
+                if (!option.hidden()) {
                     return true;
                 }
             });
@@ -1382,7 +1230,7 @@ class ThySelectOptionGroup {
             }
         }))
             .subscribe((data) => {
-            this._hidden = data;
+            this.hidden.set(data);
             this.cdr.markForCheck();
         });
     }
@@ -1391,35 +1239,27 @@ class ThySelectOptionGroup {
         this._destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyGroupLabel: "thyGroupLabel" }, host: { properties: { "class.disabled": "this.thyDisabled", "class.thy-option-item-group": "this._isOptionGroup", "class.thy-select-option-group-hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: ThyOption }], ngImport: i0, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel }}</span>\n<ng-content></ng-content>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyGroupLabel: { classPropertyName: "thyGroupLabel", publicName: "thyGroupLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "thyDisabled()", "class.thy-select-option-group-hidden": "hidden()" }, classAttribute: "thy-option-item-group" }, queries: [{ propertyName: "options", predicate: ThyOption }], ngImport: i0, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel() }}</span>\n<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectOptionGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-option-group', template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel }}</span>\n<ng-content></ng-content>\n" }]
-        }], propDecorators: { thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }, {
-                type: HostBinding,
-                args: [`class.disabled`]
-            }], _isOptionGroup: [{
-                type: HostBinding,
-                args: ['class.thy-option-item-group']
-            }], hidden: [{
-                type: HostBinding,
-                args: ['class.thy-select-option-group-hidden']
-            }], thyGroupLabel: [{
-                type: Input
-            }], options: [{
+            args: [{ selector: 'thy-option-group', host: {
+                        class: 'thy-option-item-group',
+                        '[class.disabled]': 'thyDisabled()',
+                        '[class.thy-select-option-group-hidden]': 'hidden()'
+                    }, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel() }}</span>\n<ng-content></ng-content>\n" }]
+        }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [ThyOption]
             }] } });
 
 class ThyOptionsContainer {
-    constructor() { }
+    constructor() {
+        this.optionsTemplate = viewChild('options');
+    }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOptionsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyOptionsContainer, isStandalone: true, selector: "thy-options-container", viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["options"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: ThyOptionsContainer, isStandalone: true, selector: "thy-options-container", viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["options"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <ng-template #options>
             <ng-content></ng-content>
         </ng-template>
@@ -1436,10 +1276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [], propDecorators: { optionsTemplate: [{
-                type: ViewChild,
-                args: ['options']
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * @license