ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-input.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, Input, HostBinding, Directive, forwardRef, NgZone, EventEmitter, ViewChild, ContentChild, Output, ViewEncapsulation, Component, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { inject, ElementRef, Renderer2, input, effect, HostBinding, Directive, forwardRef, NgZone, output, contentChild, signal, ViewEncapsulation, Component, DestroyRef, computed, ChangeDetectionStrategy, viewChild, NgModule } from '@angular/core';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -11,6 +11,7 @@ import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { ThyTranslate, useHostFocusControl, mixinInitialized, mixinTabIndex, mixinDisabled, AbstractControlValueAccessor } from 'ngx-tethys/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { of, Observable, Subject } from 'rxjs';
+import { MutationObserverFactory } from '@angular/cdk/observers';
 import { ThyDividerModule } from 'ngx-tethys/divider';
 
 const inputGroupSizeMap$1 = {
@@ -25,38 +26,36 @@ const inputGroupSizeMap$1 = {
  * @order 10
  */
 class ThyInputDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.render = inject(Renderer2);
-        this.control = inject(NgControl, { optional: true, self: true });
-        this.isFormControl = true;
-        this.initialized = false;
-        this.hostRenderer = useHostRenderer();
-    }
-    /**
-     * 输入框大小
-     * @type 'xs' | 'sm' | 'md' | 'default' | 'lg'
-     * @default default
-     */
-    set thySize(size) {
-        if (size && inputGroupSizeMap$1[size]) {
-            this.hostRenderer.updateClass(inputGroupSizeMap$1[size]);
-        }
-        else {
-            this.hostRenderer.updateClass([]);
-        }
-    }
     get ngControl() {
         return this.control;
     }
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    ngOnInit() {
-        this.initialized = true;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.render = inject(Renderer2);
+        this.control = inject(NgControl, { optional: true, self: true });
+        this.isFormControl = true;
+        this.hostRenderer = useHostRenderer();
+        /**
+         * 输入框大小
+         * @type 'xs' | 'sm' | 'md' | 'default' | 'lg'
+         * @default default
+         */
+        this.thySize = input(undefined);
+        effect(() => {
+            const size = this.thySize();
+            if (size && inputGroupSizeMap$1[size]) {
+                this.hostRenderer.updateClass(inputGroupSizeMap$1[size]);
+            }
+            else {
+                this.hostRenderer.updateClass([]);
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyInputDirective, isStandalone: true, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: { thySize: "thySize" }, host: { properties: { "class.form-control": "this.isFormControl" } }, exportAs: ["thyInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyInputDirective, isStandalone: true, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: { thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.form-control": "this.isFormControl" } }, exportAs: ["thyInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputDirective, decorators: [{
             type: Directive,
@@ -64,11 +63,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: 'input[thyInput], select[thyInput], textarea[thyInput]',
                     exportAs: 'thyInput'
                 }]
-        }], propDecorators: { isFormControl: [{
+        }], ctorParameters: () => [], propDecorators: { isFormControl: [{
                 type: HostBinding,
                 args: ['class.form-control']
-            }], thySize: [{
-                type: Input
             }] } });
 
 const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
@@ -90,45 +87,69 @@ class ThyInput {
         /**
          * Placeholder
          */
-        this.placeholder = '';
+        this.placeholder = input('');
+        /**
+         * 输入框大小
+         * @type 'xs' | 'sm' | 'md' | 'default' | 'lg'
+         * @default default
+         */
+        this.thySize = input();
         /**
          * 是否自动聚焦
          */
-        this.thyAutofocus = false;
+        this.thyAutofocus = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 输入框类型
+         * @type 'number' | 'input'
+         */
+        this.thyType = input();
+        /**
+         * @deprecated please use thyType
+         */
+        this._type = input(undefined, { alias: 'type' });
+        /**
+         * 输入 Label 文本
+         */
+        this.thyLabelText = input(undefined);
         /**
          * 是否只读
          */
-        this.readonly = false;
+        this.readonly = input(false, { transform: coerceBooleanProperty });
         /**
          * focus 聚焦事件
          */
-        this.focus = new EventEmitter();
+        this.focus = output();
         /**
          * blur 失焦事件
          */
-        this.blur = new EventEmitter();
-        this._type = 'text';
-        this.focused = false;
-        this.disabled = false;
+        this.blur = output();
+        /**
+         * 后置模板
+         */
+        this.appendTemplate = contentChild('append');
+        /**
+         * 前置模板
+         */
+        this.prependTemplate = contentChild('prepend');
+        this.type = signal(undefined);
+        this.value = signal('');
+        this.showLabel = signal(false);
+        this.focused = signal(false);
+        this.disabled = signal(false);
         this.onTouchedCallback = noop$1;
         this.onChangeCallback = noop$1;
-    }
-    /**
-     * 输入框类型
-     * @type 'number' | 'input'
-     */
-    set thyType(value) {
-        this.type = value;
+        this.isPasswordType = signal(false);
+        effect(() => {
+            this.type.set(this.thyType() || this._type());
+        });
     }
     ngOnInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            if (this.isPassword(this.type)) {
-                this.appendTemplate = this.eyeTemplate;
-            }
+            this.isPasswordType.set(this.isPassword(this.type()));
         });
     }
     writeValue(value) {
-        this.value = value;
+        this.value.set(value);
     }
     registerOnChange(fn) {
         this.onChangeCallback = fn;
@@ -137,14 +158,14 @@ class ThyInput {
         this.onTouchedCallback = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.disabled.set(isDisabled);
     }
     onModelChange() {
-        this.onChangeCallback(this.value);
+        this.onChangeCallback(this.value());
     }
     onInputFocus(event) {
-        this.focused = true;
-        this.showLabel = true;
+        this.focused.set(true);
+        this.showLabel.set(true);
         this.focus.emit(event);
     }
     onInputBlur(event) {
@@ -152,56 +173,27 @@ class ThyInput {
         if (this.elementRef.nativeElement.onblur) {
             this.elementRef.nativeElement.onblur(event);
         }
-        this.focused = false;
-        this.showLabel = false;
+        this.focused.set(false);
+        this.showLabel.set(false);
         this.blur.emit(event);
     }
     isPassword(value) {
         return value === password;
     }
     togglePasswordType() {
-        this.type = this.isPassword(this.type) ? 'text' : 'password';
+        this.type.set(this.isPassword(this.type()) ? 'text' : 'password');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyInput, isStandalone: true, selector: "thy-input", inputs: { placeholder: "placeholder", thySize: "thySize", thyAutofocus: ["thyAutofocus", "thyAutofocus", coerceBooleanProperty], thyType: "thyType", type: "type", thyLabelText: "thyLabelText", readonly: ["readonly", "readonly", coerceBooleanProperty] }, outputs: { focus: "focus", blur: "blur" }, host: { properties: { "class.form-control-active": "focused", "class.disabled": "disabled" }, classAttribute: "thy-input form-control" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "appendTemplate", first: true, predicate: ["append"], descendants: true }, { propertyName: "prependTemplate", first: true, predicate: ["prepend"], descendants: true }], viewQueries: [{ propertyName: "eyeTemplate", first: true, predicate: ["eye"], descendants: true, static: true }], ngImport: i0, template: "@if (prependTemplate) {\n  <div #prepend class=\"input-prepend\">\n    <ng-template *ngTemplateOutlet=\"prependTemplate\"></ng-template>\n  </div>\n}\n<input\n  #input\n  thyInput\n  [thySize]=\"thySize\"\n  [thyAutofocus]=\"thyAutofocus\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  (ngModelChange)=\"onModelChange()\"\n  (focus)=\"onInputFocus($event)\"\n  (blur)=\"onInputBlur($event)\"\n  [readonly]=\"readonly\"\n  />\n<span class=\"input-label input-label-{{ thySize }}\" [class.active]=\"showLabel\">{{ thyLabelText }}</span>\n@if (appendTemplate) {\n  <div #append class=\"input-append\">\n    <ng-template *ngTemplateOutlet=\"appendTemplate\"></ng-template>\n  </div>\n}\n\n<ng-template #eye>\n  <a href=\"javascript:;\" class=\"link-secondary input-password-icon\" (click)=\"togglePasswordType()\">\n    @if (isPassword(type)) {\n      <thy-icon thyIconName=\"eye\"></thy-icon>\n    }\n    @if (!isPassword(type)) {\n      <thy-icon thyIconName=\"eye-invisible\"></thy-icon>\n    }\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { 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: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyInput, isStandalone: true, selector: "thy-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyAutofocus: { classPropertyName: "thyAutofocus", publicName: "thyAutofocus", isSignal: true, isRequired: false, transformFunction: null }, thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, _type: { classPropertyName: "_type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focus: "focus", blur: "blur" }, host: { properties: { "class.form-control-active": "focused()", "class.disabled": "disabled()" }, classAttribute: "thy-input form-control" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "appendTemplate", first: true, predicate: ["append"], descendants: true, isSignal: true }, { propertyName: "prependTemplate", first: true, predicate: ["prepend"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (prependTemplate()) {\n  <div #prepend class=\"input-prepend\">\n    <ng-template *ngTemplateOutlet=\"prependTemplate()\"></ng-template>\n  </div>\n}\n<input\n  #input\n  thyInput\n  [thySize]=\"thySize()\"\n  [thyAutofocus]=\"thyAutofocus()\"\n  [type]=\"type()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [(ngModel)]=\"value\"\n  (ngModelChange)=\"onModelChange()\"\n  (focus)=\"onInputFocus($event)\"\n  (blur)=\"onInputBlur($event)\"\n  [readonly]=\"readonly()\"\n  />\n<span class=\"input-label input-label-{{ thySize() }}\" [class.active]=\"showLabel()\">{{ thyLabelText() }}</span>\n\n@if (isPasswordType() || appendTemplate()) {\n  <div #append class=\"input-append\">\n    @if (isPasswordType()) {\n      <a href=\"javascript:;\" class=\"link-secondary input-password-icon\" (click)=\"togglePasswordType()\">\n        @if (isPassword(type())) {\n          <thy-icon thyIconName=\"eye\"></thy-icon>\n        }\n        @if (!isPassword(type())) {\n          <thy-icon thyIconName=\"eye-invisible\"></thy-icon>\n        }\n      </a>\n    } @else {\n      <ng-template *ngTemplateOutlet=\"appendTemplate()\"></ng-template>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { 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: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInput, decorators: [{
             type: Component,
             args: [{ selector: 'thy-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, host: {
                         class: 'thy-input form-control',
-                        '[class.form-control-active]': 'focused',
-                        '[class.disabled]': 'disabled'
-                    }, imports: [NgTemplateOutlet, ThyInputDirective, ThyAutofocusDirective, FormsModule, ThyIcon], template: "@if (prependTemplate) {\n  <div #prepend class=\"input-prepend\">\n    <ng-template *ngTemplateOutlet=\"prependTemplate\"></ng-template>\n  </div>\n}\n<input\n  #input\n  thyInput\n  [thySize]=\"thySize\"\n  [thyAutofocus]=\"thyAutofocus\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  (ngModelChange)=\"onModelChange()\"\n  (focus)=\"onInputFocus($event)\"\n  (blur)=\"onInputBlur($event)\"\n  [readonly]=\"readonly\"\n  />\n<span class=\"input-label input-label-{{ thySize }}\" [class.active]=\"showLabel\">{{ thyLabelText }}</span>\n@if (appendTemplate) {\n  <div #append class=\"input-append\">\n    <ng-template *ngTemplateOutlet=\"appendTemplate\"></ng-template>\n  </div>\n}\n\n<ng-template #eye>\n  <a href=\"javascript:;\" class=\"link-secondary input-password-icon\" (click)=\"togglePasswordType()\">\n    @if (isPassword(type)) {\n      <thy-icon thyIconName=\"eye\"></thy-icon>\n    }\n    @if (!isPassword(type)) {\n      <thy-icon thyIconName=\"eye-invisible\"></thy-icon>\n    }\n  </a>\n</ng-template>\n" }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyAutofocus: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyType: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], thyLabelText: [{
-                type: Input
-            }], readonly: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], focus: [{
-                type: Output
-            }], blur: [{
-                type: Output
-            }], appendTemplate: [{
-                type: ContentChild,
-                args: ['append']
-            }], prependTemplate: [{
-                type: ContentChild,
-                args: ['prepend']
-            }], eyeTemplate: [{
-                type: ViewChild,
-                args: ['eye', { static: true }]
-            }] } });
+                        '[class.form-control-active]': 'focused()',
+                        '[class.disabled]': 'disabled()'
+                    }, imports: [NgTemplateOutlet, ThyInputDirective, ThyAutofocusDirective, FormsModule, ThyIcon], template: "@if (prependTemplate()) {\n  <div #prepend class=\"input-prepend\">\n    <ng-template *ngTemplateOutlet=\"prependTemplate()\"></ng-template>\n  </div>\n}\n<input\n  #input\n  thyInput\n  [thySize]=\"thySize()\"\n  [thyAutofocus]=\"thyAutofocus()\"\n  [type]=\"type()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [(ngModel)]=\"value\"\n  (ngModelChange)=\"onModelChange()\"\n  (focus)=\"onInputFocus($event)\"\n  (blur)=\"onInputBlur($event)\"\n  [readonly]=\"readonly()\"\n  />\n<span class=\"input-label input-label-{{ thySize() }}\" [class.active]=\"showLabel()\">{{ thyLabelText() }}</span>\n\n@if (isPasswordType() || appendTemplate()) {\n  <div #append class=\"input-append\">\n    @if (isPasswordType()) {\n      <a href=\"javascript:;\" class=\"link-secondary input-password-icon\" (click)=\"togglePasswordType()\">\n        @if (isPassword(type())) {\n          <thy-icon thyIconName=\"eye\"></thy-icon>\n        }\n        @if (!isPassword(type())) {\n          <thy-icon thyIconName=\"eye-invisible\"></thy-icon>\n        }\n      </a>\n    } @else {\n      <ng-template *ngTemplateOutlet=\"appendTemplate()\"></ng-template>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 const inputGroupSizeMap = {
     sm: ['input-group-sm'],
@@ -217,52 +209,105 @@ class ThyInputGroup {
     constructor() {
         this.thyTranslate = inject(ThyTranslate);
         this.ngZone = inject(NgZone);
-        this.cdr = inject(ChangeDetectorRef);
         this.hostRenderer = useHostRenderer();
         this.hostFocusControl = useHostFocusControl();
         this.destroyRef = inject(DestroyRef);
-        this.disabled = false;
-    }
-    /**
-     * 输入框上添加的后置文本
-     */
-    set thyAppendText(value) {
-        this.appendText = value;
-    }
-    /**
-     * 输入框上添加的后置文本多语言 Key
-     */
-    set thyAppendTextTranslateKey(value) {
-        if (value) {
-            this.appendText = this.thyTranslate.instant(value);
-        }
-    }
-    /**
-     * 输入框上添加的前置文本
-     */
-    set thyPrependText(value) {
-        this.prependText = value;
-    }
-    /**
-     * 输入框上添加的前置文本多语言 Key
-     */
-    set thyPrependTextTranslateKey(value) {
-        if (value) {
-            this.prependText = this.thyTranslate.instant(value);
-        }
-    }
-    /**
-     * 输入框分组大小
-     * @type 'sm' | 'lg' | 'md' | ''
-     * @default ''
-     */
-    set thySize(size) {
-        if (size && inputGroupSizeMap[size]) {
-            this.hostRenderer.updateClass(inputGroupSizeMap[size]);
-        }
-        else {
-            this.hostRenderer.updateClass([]);
-        }
+        this.isTextareaSuffix = signal(false);
+        this.hasScrollbar = signal(false);
+        this.disabled = signal(false);
+        /**
+         * 输入框上添加的后置文本
+         */
+        this.thyAppendText = input();
+        /**
+         * 输入框上添加的后置文本多语言 Key
+         */
+        this.thyAppendTextTranslateKey = input();
+        /**
+         * 输入框上添加的前置文本
+         */
+        this.thyPrependText = input();
+        /**
+         * 输入框上添加的前置文本多语言 Key
+         */
+        this.thyPrependTextTranslateKey = input();
+        this.prependText = computed(() => {
+            const prependTextTranslateKey = this.thyPrependTextTranslateKey();
+            if (prependTextTranslateKey) {
+                return this.thyTranslate.instant(prependTextTranslateKey);
+            }
+            return this.thyPrependText();
+        });
+        this.appendText = computed(() => {
+            const appendTextTranslateKey = this.thyAppendTextTranslateKey();
+            if (appendTextTranslateKey) {
+                return this.thyTranslate.instant(appendTextTranslateKey);
+            }
+            return this.thyAppendText();
+        });
+        /**
+         * 输入框分组大小
+         * @type 'sm' | 'lg' | 'md' | ''
+         * @default ''
+         */
+        this.thySize = input();
+        /**
+         * 后置模板
+         */
+        this.appendTemplate = contentChild('append');
+        /**
+         * 前置模板
+         */
+        this.prependTemplate = contentChild('prepend');
+        /**
+         * 前缀
+         */
+        this.prefixTemplate = contentChild('prefix');
+        /**
+         * 后缀
+         */
+        this.suffixTemplate = contentChild('suffix');
+        /**
+         * @private
+         */
+        this.inputDirective = contentChild(ThyInputDirective);
+        effect(() => {
+            const size = this.thySize();
+            if (size && inputGroupSizeMap[size]) {
+                this.hostRenderer.updateClass(inputGroupSizeMap[size]);
+            }
+            else {
+                this.hostRenderer.updateClass([]);
+            }
+        });
+        effect(() => {
+            const inputDirective = this.inputDirective();
+            if (inputDirective?.nativeElement) {
+                this.isTextareaSuffix.set(inputDirective?.nativeElement?.tagName === 'TEXTAREA');
+                if (this.isTextareaSuffix()) {
+                    this.determineHasScrollbar();
+                }
+            }
+        });
+        effect(() => {
+            const inputDirective = this.inputDirective();
+            this.disabledObservable?.disconnect();
+            if (inputDirective?.nativeElement) {
+                this.disabledObservable = new MutationObserverFactory().create(mutations => {
+                    for (const mutation of mutations) {
+                        if (mutation.type === 'attributes' && mutation.attributeName === 'disabled') {
+                            this.disabled.set(!!inputDirective.nativeElement.hasAttribute('disabled'));
+                        }
+                    }
+                });
+                if (this.disabledObservable) {
+                    this.disabledObservable.observe(inputDirective.nativeElement, {
+                        attributes: true,
+                        attributeFilter: ['disabled']
+                    });
+                }
+            }
+        });
     }
     ngOnInit() {
         this.hostFocusControl.focusChanged = (origin) => {
@@ -274,23 +319,15 @@ class ThyInputGroup {
             }
         };
     }
-    ngAfterContentChecked() {
-        this.disabled = !!this.inputDirective?.nativeElement?.hasAttribute('disabled');
-        this.isTextareaSuffix = this.inputDirective?.nativeElement?.tagName === 'TEXTAREA';
-        if (this.isTextareaSuffix) {
-            this.determineHasScrollbar();
-        }
-    }
     determineHasScrollbar() {
         this.ngZone.runOutsideAngular(() => {
-            this.resizeObserver(this.inputDirective.nativeElement)
+            this.resizeObserver(this.inputDirective().nativeElement)
                 .pipe(throttleTime(100), takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
-                const hasScrollbar = this.inputDirective.nativeElement.scrollHeight > this.inputDirective.nativeElement.clientHeight;
-                if (this.hasScrollbar !== hasScrollbar) {
+                const hasScrollbar = this.inputDirective().nativeElement.scrollHeight > this.inputDirective().nativeElement.clientHeight;
+                if (this.hasScrollbar() !== hasScrollbar) {
                     this.ngZone.run(() => {
-                        this.hasScrollbar = hasScrollbar;
-                        this.cdr.detectChanges();
+                        this.hasScrollbar.set(hasScrollbar);
                     });
                 }
             });
@@ -313,47 +350,20 @@ class ThyInputGroup {
         this.hostFocusControl.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyInputGroup, isStandalone: true, selector: "thy-input-group", inputs: { thyAppendText: "thyAppendText", thyAppendTextTranslateKey: "thyAppendTextTranslateKey", thyPrependText: "thyPrependText", thyPrependTextTranslateKey: "thyPrependTextTranslateKey", thySize: "thySize" }, host: { properties: { "class.form-control": "prefixTemplate || suffixTemplate", "class.thy-input-group-with-prefix": "prefixTemplate", "class.thy-input-group-with-suffix": "suffixTemplate", "class.thy-input-group-with-textarea-suffix": "isTextareaSuffix", "class.thy-input-group-with-scroll-bar": "isTextareaSuffix && hasScrollbar", "class.disabled": "this.disabled" }, classAttribute: "thy-input-group" }, queries: [{ propertyName: "appendTemplate", first: true, predicate: ["append"], descendants: true }, { propertyName: "prependTemplate", first: true, predicate: ["prepend"], descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: ["prefix"], descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: ["suffix"], descendants: true }, { propertyName: "inputDirective", first: true, predicate: ThyInputDirective, descendants: true }], ngImport: i0, template: "@if (prependText) {\n  <div class=\"input-group-prepend\">\n    <span class=\"input-group-text\">{{ prependText }}</span>\n  </div>\n}\n@if (prependTemplate) {\n  <div class=\"input-group-prepend\">\n    <ng-template *ngTemplateOutlet=\"prependTemplate\"></ng-template>\n  </div>\n}\n\n@if (prefixTemplate) {\n  <div class=\"input-group-prefix\">\n    <ng-template *ngTemplateOutlet=\"prefixTemplate\"></ng-template>\n  </div>\n}\n\n<ng-content></ng-content>\n\n@if (appendText) {\n  <div class=\"input-group-append\">\n    <span class=\"input-group-text\">{{ appendText }}</span>\n  </div>\n}\n@if (appendTemplate) {\n  <div class=\"input-group-append\">\n    <ng-template *ngTemplateOutlet=\"appendTemplate\"></ng-template>\n  </div>\n}\n\n@if (suffixTemplate) {\n  <div class=\"input-group-suffix\">\n    <ng-template *ngTemplateOutlet=\"suffixTemplate\"></ng-template>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyInputGroup, isStandalone: true, selector: "thy-input-group", inputs: { thyAppendText: { classPropertyName: "thyAppendText", publicName: "thyAppendText", isSignal: true, isRequired: false, transformFunction: null }, thyAppendTextTranslateKey: { classPropertyName: "thyAppendTextTranslateKey", publicName: "thyAppendTextTranslateKey", isSignal: true, isRequired: false, transformFunction: null }, thyPrependText: { classPropertyName: "thyPrependText", publicName: "thyPrependText", isSignal: true, isRequired: false, transformFunction: null }, thyPrependTextTranslateKey: { classPropertyName: "thyPrependTextTranslateKey", publicName: "thyPrependTextTranslateKey", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.form-control": "prefixTemplate() || suffixTemplate()", "class.thy-input-group-with-prefix": "prefixTemplate()", "class.thy-input-group-with-suffix": "suffixTemplate()", "class.thy-input-group-with-textarea-suffix": "isTextareaSuffix()", "class.thy-input-group-with-scroll-bar": "isTextareaSuffix() && hasScrollbar()", "class.disabled": "disabled()" }, classAttribute: "thy-input-group" }, queries: [{ propertyName: "appendTemplate", first: true, predicate: ["append"], descendants: true, isSignal: true }, { propertyName: "prependTemplate", first: true, predicate: ["prepend"], descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ["prefix"], descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ["suffix"], descendants: true, isSignal: true }, { propertyName: "inputDirective", first: true, predicate: ThyInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (prependText()) {\n  <div class=\"input-group-prepend\">\n    <span class=\"input-group-text\">{{ prependText() }}</span>\n  </div>\n}\n@if (prependTemplate()) {\n  <div class=\"input-group-prepend\">\n    <ng-template *ngTemplateOutlet=\"prependTemplate()\"></ng-template>\n  </div>\n}\n\n@if (prefixTemplate()) {\n  <div class=\"input-group-prefix\">\n    <ng-template *ngTemplateOutlet=\"prefixTemplate()\"></ng-template>\n  </div>\n}\n\n<ng-content></ng-content>\n\n@if (appendText()) {\n  <div class=\"input-group-append\">\n    <span class=\"input-group-text\">{{ appendText() }}</span>\n  </div>\n}\n@if (appendTemplate()) {\n  <div class=\"input-group-append\">\n    <ng-template *ngTemplateOutlet=\"appendTemplate()\"></ng-template>\n  </div>\n}\n\n@if (suffixTemplate()) {\n  <div class=\"input-group-suffix\">\n    <ng-template *ngTemplateOutlet=\"suffixTemplate()\"></ng-template>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputGroup, decorators: [{
             type: Component,
             args: [{ selector: 'thy-input-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'thy-input-group',
-                        '[class.form-control]': 'prefixTemplate || suffixTemplate',
-                        '[class.thy-input-group-with-prefix]': 'prefixTemplate',
-                        '[class.thy-input-group-with-suffix]': 'suffixTemplate',
-                        '[class.thy-input-group-with-textarea-suffix]': 'isTextareaSuffix',
-                        '[class.thy-input-group-with-scroll-bar]': 'isTextareaSuffix && hasScrollbar'
-                    }, imports: [NgTemplateOutlet], template: "@if (prependText) {\n  <div class=\"input-group-prepend\">\n    <span class=\"input-group-text\">{{ prependText }}</span>\n  </div>\n}\n@if (prependTemplate) {\n  <div class=\"input-group-prepend\">\n    <ng-template *ngTemplateOutlet=\"prependTemplate\"></ng-template>\n  </div>\n}\n\n@if (prefixTemplate) {\n  <div class=\"input-group-prefix\">\n    <ng-template *ngTemplateOutlet=\"prefixTemplate\"></ng-template>\n  </div>\n}\n\n<ng-content></ng-content>\n\n@if (appendText) {\n  <div class=\"input-group-append\">\n    <span class=\"input-group-text\">{{ appendText }}</span>\n  </div>\n}\n@if (appendTemplate) {\n  <div class=\"input-group-append\">\n    <ng-template *ngTemplateOutlet=\"appendTemplate\"></ng-template>\n  </div>\n}\n\n@if (suffixTemplate) {\n  <div class=\"input-group-suffix\">\n    <ng-template *ngTemplateOutlet=\"suffixTemplate\"></ng-template>\n  </div>\n}\n" }]
-        }], propDecorators: { disabled: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }], thyAppendText: [{
-                type: Input
-            }], thyAppendTextTranslateKey: [{
-                type: Input
-            }], thyPrependText: [{
-                type: Input
-            }], thyPrependTextTranslateKey: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], appendTemplate: [{
-                type: ContentChild,
-                args: ['append']
-            }], prependTemplate: [{
-                type: ContentChild,
-                args: ['prepend']
-            }], prefixTemplate: [{
-                type: ContentChild,
-                args: ['prefix']
-            }], suffixTemplate: [{
-                type: ContentChild,
-                args: ['suffix']
-            }], inputDirective: [{
-                type: ContentChild,
-                args: [ThyInputDirective]
-            }] } });
+                        '[class.form-control]': 'prefixTemplate() || suffixTemplate()',
+                        '[class.thy-input-group-with-prefix]': 'prefixTemplate()',
+                        '[class.thy-input-group-with-suffix]': 'suffixTemplate()',
+                        '[class.thy-input-group-with-textarea-suffix]': 'isTextareaSuffix()',
+                        '[class.thy-input-group-with-scroll-bar]': 'isTextareaSuffix() && hasScrollbar()',
+                        '[class.disabled]': 'disabled()'
+                    }, imports: [NgTemplateOutlet], template: "@if (prependText()) {\n  <div class=\"input-group-prepend\">\n    <span class=\"input-group-text\">{{ prependText() }}</span>\n  </div>\n}\n@if (prependTemplate()) {\n  <div class=\"input-group-prepend\">\n    <ng-template *ngTemplateOutlet=\"prependTemplate()\"></ng-template>\n  </div>\n}\n\n@if (prefixTemplate()) {\n  <div class=\"input-group-prefix\">\n    <ng-template *ngTemplateOutlet=\"prefixTemplate()\"></ng-template>\n  </div>\n}\n\n<ng-content></ng-content>\n\n@if (appendText()) {\n  <div class=\"input-group-append\">\n    <span class=\"input-group-text\">{{ appendText() }}</span>\n  </div>\n}\n@if (appendTemplate()) {\n  <div class=\"input-group-append\">\n    <ng-template *ngTemplateOutlet=\"appendTemplate()\"></ng-template>\n  </div>\n}\n\n@if (suffixTemplate()) {\n  <div class=\"input-group-suffix\">\n    <ng-template *ngTemplateOutlet=\"suffixTemplate()\"></ng-template>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 const CUSTOM_INPUT_SEARCH_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -368,94 +378,100 @@ const _MixinBase = mixinInitialized(mixinTabIndex(mixinDisabled(AbstractControlV
  * @order 30
  */
 class ThyInputSearch extends _MixinBase {
-    /**
-     * 是否自动聚焦
-     * @default false
-     */
-    set thySearchFocus(value) {
-        this.autoFocus = value;
-        this.focused = value;
-    }
-    /**
-     * 搜索图标位置，当传入 after 时，搜索图标在输入框后方显示，有内容时显示为关闭按钮
-     * @type
-     */
-    set thyIconPosition(value) {
-        this.iconPosition = value || 'before';
-        this.updateClasses();
-    }
     constructor() {
         super();
-        this.cdr = inject(ChangeDetectorRef);
         this.elementRef = inject(ElementRef);
+        this.inputElement = viewChild('input');
         this.hostRenderer = useHostRenderer();
         this.hostFocusControl = useHostFocusControl();
-        this.disabled = false;
-        this.autoFocus = false;
-        this.iconPosition = 'before';
-        this.focused = false;
+        this.disabled = signal(false);
+        this.searchText = signal('');
+        this.focused = signal(false);
         /**
          * 搜索框 name 属性
          */
-        this.name = '';
+        this.name = input('');
         /**
          * 搜索框 Placeholder
          */
-        this.placeholder = '';
+        this.placeholder = input('');
+        /**
+         * 搜索框风格
+         * @type 'default' | 'ellipse' | 'transparent'
+         * @default default
+         */
+        this.thyTheme = input();
+        /**
+         * 是否自动聚焦
+         * @default false
+         */
+        this.autoFocus = input(false, { alias: 'thySearchFocus', transform: coerceBooleanProperty });
+        /**
+         * 搜索图标位置，当传入 after 时，搜索图标在输入框后方显示，有内容时显示为关闭按钮
+         * @type ThyInputSearchIconPosition
+         */
+        this.iconPosition = input('before', {
+            alias: 'thyIconPosition',
+            transform: (value) => value || 'before'
+        });
+        /**
+         * 输入框大小
+         * @type 'xs' | 'sm' | 'md' | 'default' | 'lg'
+         */
+        this.thySize = input();
         /**
          * @deprecated please use thyClear
          */
-        this.clear = new EventEmitter();
+        this.clear = output();
         /**
          * 清除搜索事件
          */
-        this.thyClear = new EventEmitter();
+        this.thyClear = output();
+        effect(() => {
+            this.focused.set(this.autoFocus());
+        });
+        effect(() => {
+            const iconPosition = this.iconPosition();
+            this.hostRenderer.updateClass([`thy-input-search-${iconPosition}`]);
+        });
     }
     ngOnInit() {
         super.ngOnInit();
-        this.updateClasses(true);
         this.hostFocusControl.focusChanged = (origin) => {
-            if (this.disabled) {
+            if (this.disabled()) {
                 return;
             }
             if (origin) {
-                if (!this.focused) {
-                    this.inputElement.nativeElement.focus();
+                if (!this.focused()) {
+                    this.inputElement().nativeElement.focus();
                 }
             }
             else {
-                if (this.focused) {
-                    this.focused = false;
+                if (this.focused()) {
+                    this.focused.set(false);
                     this.onTouchedFn();
                 }
             }
-            this.cdr.markForCheck();
         };
     }
-    updateClasses(forceUpdate = false) {
-        if (this.initialized || forceUpdate) {
-            this.hostRenderer.updateClass([`thy-input-search-${this.iconPosition}`]);
-        }
-    }
     writeValue(value) {
-        this.searchText = value;
-        this.cdr.markForCheck();
+        this.searchText.set(value);
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.disabled.set(isDisabled);
     }
     searchModelChange() {
-        this.onChangeFn(this.searchText);
+        this.onChangeFn(this.searchText());
     }
     clearSearchText(event) {
         const element = this.elementRef.nativeElement.querySelector('.input-search-control');
         element.focus();
         event.stopPropagation();
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
-        this.searchText = '';
-        this.onChangeFn(this.searchText);
+        this.searchText.set('');
+        this.onChangeFn(this.searchText());
         this.clear.emit(event);
         this.thyClear.emit(event);
     }
@@ -463,39 +479,19 @@ class ThyInputSearch extends _MixinBase {
         this.hostFocusControl.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyInputSearch, isStandalone: true, selector: "thy-input-search", inputs: { name: "name", placeholder: "placeholder", thyTheme: "thyTheme", thySearchFocus: ["thySearchFocus", "thySearchFocus", coerceBooleanProperty], thyIconPosition: "thyIconPosition", thySize: "thySize" }, outputs: { clear: "clear", thyClear: "thyClear" }, host: { properties: { "class.thy-input-search-ellipse": "thyTheme === \"ellipse\"", "class.thy-input-search-transparent": "thyTheme === \"transparent\"", "class.thy-input-search-before-with-clear": "searchText && iconPosition === \"before\"", "class.form-control-active": "focused", "attr.tabindex": "tabIndex" }, classAttribute: "thy-input form-control thy-input-search" }, providers: [CUSTOM_INPUT_SEARCH_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (iconPosition === 'before') {\n  <thy-icon class=\"input-prepend\" thyIconName=\"search\"></thy-icon>\n}\n<input\n  class=\"input-search-control\"\n  #input\n  thyInput\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  [thyAutofocus]=\"autoFocus\"\n  [(ngModel)]=\"searchText\"\n  (ngModelChange)=\"searchModelChange()\"\n  (focus)=\"!focused ? (focused = true) : null\"\n  [thySize]=\"thySize\"\n  tabindex=\"-1\" />\n@if (iconPosition === 'after') {\n  <div class=\"input-append input-append-divider\">\n    @if (searchText) {\n      <a class=\"close\" href=\"javascript:;\" (click)=\"clearSearchText($event)\">\n        <thy-icon thyIconName=\"close\"></thy-icon>\n      </a>\n    } @else {\n      <thy-icon class=\"text-placeholder\" thyIconName=\"search\"></thy-icon>\n    }\n  </div>\n}\n\n@if (searchText && iconPosition === 'before') {\n  <a class=\"close input-append\" href=\"javascript:;\" (click)=\"clearSearchText($event)\">\n    <thy-icon thyIconName=\"close\"></thy-icon>\n  </a>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyInputSearch, isStandalone: true, selector: "thy-input-search", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, thyTheme: { classPropertyName: "thyTheme", publicName: "thyTheme", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "thySearchFocus", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "thyIconPosition", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear", thyClear: "thyClear" }, host: { properties: { "class.thy-input-search-ellipse": "thyTheme() === \"ellipse\"", "class.thy-input-search-transparent": "thyTheme() === \"transparent\"", "class.thy-input-search-before-with-clear": "searchText() && iconPosition() === \"before\"", "class.form-control-active": "focused()", "attr.tabindex": "tabIndex" }, classAttribute: "thy-input form-control thy-input-search" }, providers: [CUSTOM_INPUT_SEARCH_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (iconPosition() === 'before') {\n  <thy-icon class=\"input-prepend\" thyIconName=\"search\"></thy-icon>\n}\n<input\n  class=\"input-search-control\"\n  #input\n  thyInput\n  [name]=\"name()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [thyAutofocus]=\"autoFocus()\"\n  [(ngModel)]=\"searchText\"\n  (ngModelChange)=\"searchModelChange()\"\n  (focus)=\"!focused() ? (focused.set(true)) : null\"\n  [thySize]=\"thySize()\"\n  tabindex=\"-1\" />\n@if (iconPosition() === 'after') {\n  <div class=\"input-append input-append-divider\">\n    @if (searchText()) {\n      <a class=\"close\" href=\"javascript:;\" (click)=\"clearSearchText($event)\">\n        <thy-icon thyIconName=\"close\"></thy-icon>\n      </a>\n    } @else {\n      <thy-icon class=\"text-placeholder\" thyIconName=\"search\"></thy-icon>\n    }\n  </div>\n}\n\n@if (searchText() && iconPosition() === 'before') {\n  <a class=\"close input-append\" href=\"javascript:;\" (click)=\"clearSearchText($event)\">\n    <thy-icon thyIconName=\"close\"></thy-icon>\n  </a>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputSearch, decorators: [{
             type: Component,
             args: [{ selector: 'thy-input-search', providers: [CUSTOM_INPUT_SEARCH_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'thy-input form-control thy-input-search',
-                        '[class.thy-input-search-ellipse]': 'thyTheme === "ellipse"',
-                        '[class.thy-input-search-transparent]': 'thyTheme === "transparent"',
-                        '[class.thy-input-search-before-with-clear]': 'searchText && iconPosition === "before"',
-                        '[class.form-control-active]': 'focused',
+                        '[class.thy-input-search-ellipse]': 'thyTheme() === "ellipse"',
+                        '[class.thy-input-search-transparent]': 'thyTheme() === "transparent"',
+                        '[class.thy-input-search-before-with-clear]': 'searchText() && iconPosition() === "before"',
+                        '[class.form-control-active]': 'focused()',
                         '[attr.tabindex]': 'tabIndex'
-                    }, imports: [ThyIcon, ThyInputDirective, ThyAutofocusDirective, FormsModule], template: "@if (iconPosition === 'before') {\n  <thy-icon class=\"input-prepend\" thyIconName=\"search\"></thy-icon>\n}\n<input\n  class=\"input-search-control\"\n  #input\n  thyInput\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  [thyAutofocus]=\"autoFocus\"\n  [(ngModel)]=\"searchText\"\n  (ngModelChange)=\"searchModelChange()\"\n  (focus)=\"!focused ? (focused = true) : null\"\n  [thySize]=\"thySize\"\n  tabindex=\"-1\" />\n@if (iconPosition === 'after') {\n  <div class=\"input-append input-append-divider\">\n    @if (searchText) {\n      <a class=\"close\" href=\"javascript:;\" (click)=\"clearSearchText($event)\">\n        <thy-icon thyIconName=\"close\"></thy-icon>\n      </a>\n    } @else {\n      <thy-icon class=\"text-placeholder\" thyIconName=\"search\"></thy-icon>\n    }\n  </div>\n}\n\n@if (searchText && iconPosition === 'before') {\n  <a class=\"close input-append\" href=\"javascript:;\" (click)=\"clearSearchText($event)\">\n    <thy-icon thyIconName=\"close\"></thy-icon>\n  </a>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { inputElement: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }], name: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], thyTheme: [{
-                type: Input
-            }], thySearchFocus: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyIconPosition: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], clear: [{
-                type: Output
-            }], thyClear: [{
-                type: Output
-            }] } });
+                    }, imports: [ThyIcon, ThyInputDirective, ThyAutofocusDirective, FormsModule], template: "@if (iconPosition() === 'before') {\n  <thy-icon class=\"input-prepend\" thyIconName=\"search\"></thy-icon>\n}\n<input\n  class=\"input-search-control\"\n  #input\n  thyInput\n  [name]=\"name()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [thyAutofocus]=\"autoFocus()\"\n  [(ngModel)]=\"searchText\"\n  (ngModelChange)=\"searchModelChange()\"\n  (focus)=\"!focused() ? (focused.set(true)) : null\"\n  [thySize]=\"thySize()\"\n  tabindex=\"-1\" />\n@if (iconPosition() === 'after') {\n  <div class=\"input-append input-append-divider\">\n    @if (searchText()) {\n      <a class=\"close\" href=\"javascript:;\" (click)=\"clearSearchText($event)\">\n        <thy-icon thyIconName=\"close\"></thy-icon>\n      </a>\n    } @else {\n      <thy-icon class=\"text-placeholder\" thyIconName=\"search\"></thy-icon>\n    }\n  </div>\n}\n\n@if (searchText() && iconPosition() === 'before') {\n  <a class=\"close input-append\" href=\"javascript:;\" (click)=\"clearSearchText($event)\">\n    <thy-icon thyIconName=\"close\"></thy-icon>\n  </a>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * 输入框输入文字展示
@@ -503,59 +499,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @order 40
  */
 class ThyInputCount {
-    /**
-     * 输入框组件，如果不传默认会读取外层 thy-input-group 下的 thyInput 指令
-     * @type ThyInputDirective
-     */
-    set thyInput(value) {
-        this.hasInput = true;
-        this.thyInput$.next(value);
-    }
     constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.inputGroup = inject(ThyInputGroup, { optional: true });
         this.destroyRef = inject(DestroyRef);
         this.hasInput = false;
-        this.inputLength = 0;
+        /**
+         * 输入框组件，如果不传默认会读取外层 thy-input-group 下的 thyInput 指令
+         * @type ThyInputDirective
+         */
+        this.thyInput = input();
+        this.maxLength = signal(undefined);
+        this.inputLength = signal(0);
         this.thyInput$ = new Subject();
         this.setup();
+        effect(() => {
+            const input = this.thyInput();
+            if (input) {
+                this.hasInput = true;
+                this.thyInput$.next(input);
+            }
+        });
     }
     setup() {
         this.thyInput$
             .pipe(filter(input => {
             return !!input;
         }), tap(input => {
-            this.maxLength = input.nativeElement.getAttribute('maxlength');
-            this.changeDetectorRef.markForCheck();
+            this.maxLength.set(input.nativeElement.getAttribute('maxlength'));
         }), takeUntilDestroyed(this.destroyRef), switchMap(input => {
             return input.ngControl.valueChanges;
         }), tap(value => {
-            this.inputLength = value?.length || 0;
-            this.changeDetectorRef.markForCheck();
+            this.inputLength.set(value?.length || 0);
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
     ngOnInit() {
-        if (!this.hasInput && this.inputGroup && this.inputGroup.inputDirective) {
-            this.thyInput$.next(this.inputGroup.inputDirective);
+        const inputDirective = this.inputGroup.inputDirective();
+        if (!this.hasInput && this.inputGroup && inputDirective) {
+            this.thyInput$.next(inputDirective);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputCount, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyInputCount, isStandalone: true, selector: "thy-input-count", inputs: { thyInput: "thyInput" }, host: { classAttribute: "thy-input-count text-muted" }, ngImport: i0, template: '{{inputLength}} / {{maxLength}}', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyInputCount, isStandalone: true, selector: "thy-input-count", inputs: { thyInput: { classPropertyName: "thyInput", publicName: "thyInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-input-count text-muted" }, ngImport: i0, template: '{{inputLength()}} / {{maxLength()}}', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputCount, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-input-count',
-                    template: '{{inputLength}} / {{maxLength}}',
+                    template: '{{inputLength()}} / {{maxLength()}}',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'thy-input-count text-muted'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyInput: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class ThyInputModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }