ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-form.mjs

@@ -4,7 +4,7 @@ import { ThyInputModule } from 'ngx-tethys/input';
 import { ThyTooltipDirective, ThyTooltipModule } from 'ngx-tethys/tooltip';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Optional, Inject, Injectable, inject, ElementRef, Renderer2, NgZone, ContentChildren, HostBinding, Input, Directive, ViewEncapsulation, Component, ContentChild, ChangeDetectionStrategy, EventEmitter, HostListener, Output, forwardRef, NgModule } from '@angular/core';
+import { InjectionToken, Optional, Inject, Injectable, inject, ElementRef, Renderer2, NgZone, input, effect, ContentChildren, HostBinding, Directive, Input, ViewEncapsulation, Component, signal, computed, ContentChild, ChangeDetectionStrategy, output, HostListener, forwardRef, NgModule } from '@angular/core';
 import { NgForm, FormGroupDirective, ControlContainer, NgControl, NG_ASYNC_VALIDATORS, Validators, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { helpers, isUndefinedOrNull, keycodes, coerceBooleanProperty as coerceBooleanProperty$1 } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
@@ -411,30 +411,11 @@ var ThyEnterKeyMode;
  * @order 10
  */
 class ThyFormDirective {
-    /**
-     * 布局，默认水平居中 horizontal，其他2种布局待开发
-     * @type horizontal | vertical | inline
-     * @default horizontal
-     */
-    set thyLayout(value) {
-        if (value) {
-            this.layout = value;
-            if (this.initialized) {
-                this.updateClasses();
-            }
-        }
-    }
-    get thyLayout() {
-        return this.layout;
-    }
     get isHorizontal() {
         return this.layout === 'horizontal';
     }
-    /**
-     * 表单验证规则配置项 （更多内容查看：thyFormValidatorConfig）
-     */
-    set thyFormValidatorConfig(config) {
-        this.validator.setValidatorConfig(config);
+    get layout() {
+        return this.thyLayout() || this.config.layout;
     }
     constructor() {
         this.ngForm = inject(ControlContainer);
@@ -443,17 +424,46 @@ class ThyFormDirective {
         this.ngZone = inject(NgZone);
         this.validator = inject(ThyFormValidatorService);
         this.config = inject(THY_FORM_CONFIG);
-        this.initialized = false;
         this.hostRenderer = useHostRenderer();
+        /**
+         * 布局，默认水平居中 horizontal，其他2种布局待开发
+         * @type horizontal | vertical | inline
+         * @default horizontal
+         */
+        this.thyLayout = input(undefined);
+        /**
+         * Enter 键提交模式。`submit`: Textarea 需要 Ctrl | Command + Enter 提交，其他元素直接 Enter 提交； `alwaysSubmit`: 不管是什么元素 Enter 都提交； `forbidSubmit`: Enter 不提交
+         * @type submit | alwaysSubmit | forbidSubmit
+         * @default submit
+         */
+        this.thyEnterKeyMode = input(undefined);
+        /**
+         * 表单验证规则配置项 （更多内容查看：thyFormValidatorConfig）
+         */
+        this.thyFormValidatorConfig = input();
         this.wasValidated = false;
-        this.layout = this.config.layout;
+        effect(() => {
+            this.updateClasses();
+        });
+        effect(() => {
+            const config = this.thyFormValidatorConfig();
+            if (config) {
+                this.validator.setValidatorConfig(config);
+            }
+        });
+        // TODO:: replace ngAfterViewInit with afterNextRender
+        // afterNextRender(() => {
+        //     this.validator.initialize(this.ngForm as NgForm, this.elementRef.nativeElement);
+        //     this.validator.initializeFormControlsValidation(this.controls.toArray());
+        //     this.controls.changes.subscribe(controls => {
+        //         this.validator.initializeFormControlsValidation(this.controls.toArray());
+        //     });
+        // });
     }
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
             this._unsubscribe = this.renderer.listen(this.elementRef.nativeElement, 'keydown', this.onKeydown.bind(this));
         });
-        this.updateClasses();
-        this.initialized = true;
     }
     ngAfterViewInit() {
         this.validator.initialize(this.ngForm, this.elementRef.nativeElement);
@@ -473,9 +483,7 @@ class ThyFormDirective {
         }
     }
     updateClasses() {
-        this.hostRenderer.updateClassByMap({
-            [`thy-form-${this.thyLayout}`]: true
-        });
+        this.hostRenderer.updateClassByMap({ [`thy-form-${this.layout}`]: true });
     }
     submitRunInZone($event) {
         this.ngZone.run(() => {
@@ -486,7 +494,8 @@ class ThyFormDirective {
         const currentInput = document.activeElement;
         const key = $event.which || $event.keyCode;
         if (key === keycodes.ENTER && currentInput.tagName) {
-            if (!this.thyEnterKeyMode || this.thyEnterKeyMode === ThyEnterKeyMode.submit) {
+            const thyEnterKeyMode = this.thyEnterKeyMode();
+            if (!thyEnterKeyMode || thyEnterKeyMode === ThyEnterKeyMode.submit) {
                 // TEXTAREA或包含[contenteditable]属性的元素 Ctrl + Enter 或者 Command + Enter 阻止默认行为并提交
                 if (currentInput.tagName === 'TEXTAREA' || coerceBooleanProperty(currentInput.getAttribute('contenteditable'))) {
                     if ($event.ctrlKey || $event.metaKey) {
@@ -500,7 +509,7 @@ class ThyFormDirective {
                     this.submitRunInZone($event);
                 }
             }
-            else if (this.thyEnterKeyMode === ThyEnterKeyMode.alwaysSubmit) {
+            else if (thyEnterKeyMode === ThyEnterKeyMode.alwaysSubmit) {
                 $event.preventDefault();
                 this.submitRunInZone($event);
             }
@@ -516,32 +525,17 @@ class ThyFormDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyFormDirective, isStandalone: true, selector: "[thyForm],[thy-form]", inputs: { thyLayout: "thyLayout", thyEnterKeyMode: "thyEnterKeyMode", thyFormValidatorConfig: "thyFormValidatorConfig" }, host: { properties: { "class.was-validated": "this.wasValidated" }, classAttribute: "thy-form" }, providers: [ThyFormValidatorService], queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], exportAs: ["thyForm"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyFormDirective, isStandalone: true, selector: "[thyForm],[thy-form]", inputs: { thyLayout: { classPropertyName: "thyLayout", publicName: "thyLayout", isSignal: true, isRequired: false, transformFunction: null }, thyEnterKeyMode: { classPropertyName: "thyEnterKeyMode", publicName: "thyEnterKeyMode", isSignal: true, isRequired: false, transformFunction: null }, thyFormValidatorConfig: { classPropertyName: "thyFormValidatorConfig", publicName: "thyFormValidatorConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.was-validated": "this.wasValidated" }, classAttribute: "thy-form" }, providers: [ThyFormValidatorService], queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], exportAs: ["thyForm"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[thyForm],[thy-form]',
-                    providers: [ThyFormValidatorService],
-                    exportAs: 'thyForm',
-                    host: {
-                        class: 'thy-form'
-                    }
-                }]
-        }], ctorParameters: () => [], propDecorators: { thyLayout: [{
-                type: Input
-            }], thyEnterKeyMode: [{
-                type: Input
-            }], thyFormValidatorConfig: [{
-                type: Input
-            }], wasValidated: [{
+            args: [{ selector: '[thyForm],[thy-form]', providers: [ThyFormValidatorService], exportAs: 'thyForm', host: { class: 'thy-form' } }]
+        }], ctorParameters: () => [], propDecorators: { wasValidated: [{
                 type: HostBinding,
                 args: ['class.was-validated']
             }], controls: [{
                 type: ContentChildren,
-                args: [NgControl, {
-                        descendants: true
-                    }]
+                args: [NgControl, { descendants: true }]
             }] } });
 
 /**
@@ -551,7 +545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class ThyFormGroupError {
     constructor() {
         this.thyParentForm = inject(ThyFormDirective, { optional: true });
-        this.thyShowFirst = true;
+        this.thyShowFirst = input(true, { transform: coerceBooleanProperty$1 });
         this.isHorizontal = true;
     }
     /**
@@ -562,7 +556,7 @@ class ThyFormGroupError {
     }
     get thyErrors() {
         const errors = this.errors || this.thyParentForm.validator.errors;
-        return errors && errors.length > 0 && this.thyShowFirst ? [errors[0]] : errors;
+        return errors && errors.length > 0 && this.thyShowFirst() ? [errors[0]] : errors;
     }
     get _isFormGroup() {
         return this.thyErrors && this.thyErrors.length > 0;
@@ -573,15 +567,12 @@ class ThyFormGroupError {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormGroupError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyFormGroupError, isStandalone: true, selector: "thy-form-group-error", inputs: { thyShowFirst: ["thyShowFirst", "thyShowFirst", coerceBooleanProperty$1], thyErrors: "thyErrors" }, host: { properties: { "class.form-group": "this._isFormGroup", "class.row": "this.isHorizontal" } }, ngImport: i0, template: "<div [ngClass]=\"{ 'col-sm-10 offset-sm-2 col-form-control': isHorizontal }\">\n  @for (error of thyErrors; track $index) {\n    <thy-alert thyType=\"danger\" [thyMessage]=\"error\"></thy-alert>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyAlert, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyFormGroupError, isStandalone: true, selector: "thy-form-group-error", inputs: { thyShowFirst: { classPropertyName: "thyShowFirst", publicName: "thyShowFirst", isSignal: true, isRequired: false, transformFunction: null }, thyErrors: { classPropertyName: "thyErrors", publicName: "thyErrors", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.form-group": "this._isFormGroup", "class.row": "this.isHorizontal" } }, ngImport: i0, template: "<div [ngClass]=\"{ 'col-sm-10 offset-sm-2 col-form-control': isHorizontal }\">\n  @for (error of thyErrors; track $index) {\n    <thy-alert thyType=\"danger\" [thyMessage]=\"error\"></thy-alert>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyAlert, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormGroupError, decorators: [{
             type: Component,
             args: [{ selector: 'thy-form-group-error', encapsulation: ViewEncapsulation.None, imports: [NgClass, ThyAlert], template: "<div [ngClass]=\"{ 'col-sm-10 offset-sm-2 col-form-control': isHorizontal }\">\n  @for (error of thyErrors; track $index) {\n    <thy-alert thyType=\"danger\" [thyMessage]=\"error\"></thy-alert>\n  }\n</div>\n" }]
-        }], propDecorators: { thyShowFirst: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyErrors: [{
+        }], propDecorators: { thyErrors: [{
                 type: Input
             }], _isFormGroup: [{
                 type: HostBinding,
@@ -636,7 +627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }] } });
 
 const internalIconMap = {
-    date: 'wtf wtf-schedule-o'
+    date: 'calendar'
 };
 /**
  * 表单分组组件
@@ -647,124 +638,100 @@ class ThyFormGroup {
     constructor() {
         this.thyParentForm = inject(ThyFormDirective, { optional: true });
         this.thyTranslate = inject(ThyTranslate);
-        this.labelRequired = false;
-        this.labelPaddingTopClear = false;
-        this.tipMode = 'default';
-        this._rowFill = false;
-        this._isFormGroup = true;
-        this.isHorizontal = true;
-        this.hasFeedback = false;
-    }
-    /**
-     * Label 文本
-     */
-    set thyLabelText(value) {
-        this.labelText = value;
-    }
-    /**
-     * Label 文本多语言 Key
-     */
-    set thyLabelTextTranslateKey(value) {
-        if (value) {
-            this.labelText = this.thyTranslate.instant(value);
-        }
-        else {
-            this.labelText = '';
-        }
-    }
-    /**
-     * Label 是否显示必填项样式
-     */
-    set thyLabelRequired(value) {
-        this.labelRequired = value;
-    }
-    set thyLabelPaddingTopClear(value) {
-        this.labelPaddingTopClear = value;
-    }
-    /**
-     * 反馈图标，比如日期输入框显示日期的图标，常用输入 date 表示时间 wtf wtf-schedule-o
-     */
-    set thyFeedbackIcon(value) {
-        this.hasFeedback = true;
-        if (internalIconMap[value]) {
-            this.feedbackIcon = internalIconMap[value];
-            this.feedbackSvgIconName = null;
-        }
-        else {
-            this.feedbackSvgIconName = value;
-            this.feedbackIcon = null;
-        }
-    }
-    /**
-     * 提示文字的显示模式，`label`模式表示在 label 后通过图标+Tooltip 提示, `default`模式在 Form Control 下方直接显示
-     * @type default | label
-     * @default default
-     */
-    set thyTipsMode(mode) {
-        this.tipMode = mode;
-    }
-    /**
-     * 提示文案
-     */
-    set thyTips(value) {
-        this.tips = value;
-    }
-    /**
-     * 提示文案的多语言 Key
-     */
-    set thyTipsTranslateKey(value) {
-        this.tips = this.thyTranslate.instant(value);
-    }
-    /**
-     * 是否填充整行, 没有 Label 文本，只有输入框
-     * @default false
-     */
-    set thyRowFill(value) {
-        this._rowFill = value;
+        this.isHorizontalSignal = signal(true);
+        /**
+         * Label 文本
+         */
+        this.thyLabelText = input();
+        /**
+         * Label 文本多语言 Key
+         */
+        this.thyLabelTextTranslateKey = input();
+        this.labelTextSignal = computed(() => {
+            const labelTextTranslateKey = this.thyLabelTextTranslateKey();
+            const labelText = this.thyLabelText();
+            if (labelText) {
+                return labelText;
+            }
+            else if (labelTextTranslateKey) {
+                return this.thyTranslate.instant(labelTextTranslateKey);
+            }
+            return '';
+        });
+        /**
+         * Label 是否显示必填项样式
+         */
+        this.thyLabelRequired = input(false, {
+            transform: coerceBooleanProperty$1
+        });
+        /**
+         * 清楚 Label padding 间距
+         */
+        this.thyLabelPaddingTopClear = input(false, {
+            transform: coerceBooleanProperty$1
+        });
+        /**
+         * 反馈图标，比如日期输入框显示日期的图标，常用输入 date 表示时间 wtf wtf-schedule-o
+         */
+        this.thyFeedbackIcon = input('', {
+            transform: (value) => {
+                if (internalIconMap[value]) {
+                    return internalIconMap[value];
+                }
+                return value;
+            }
+        });
+        /**
+         * 提示文字的显示模式，`label`模式表示在 label 后通过图标+Tooltip 提示, `default`模式在 Form Control 下方直接显示
+         * @type default | label
+         * @default default
+         */
+        this.thyTipsMode = input('default');
+        /**
+         * 提示文案
+         */
+        this.thyTips = input('');
+        /**
+         * 提示文案的多语言 Key
+         */
+        this.thyTipsTranslateKey = input('');
+        this.tipsSignal = computed(() => {
+            const key = this.thyTipsTranslateKey();
+            const tips = this.thyTips();
+            if (key) {
+                return this.thyTranslate.instant(key);
+            }
+            if (tips) {
+                return tips;
+            }
+            return '';
+        });
+        /**
+         * 是否填充整行, 没有 Label 文本，只有输入框
+         * @default false
+         */
+        this.thyRowFill = input(false, { transform: coerceBooleanProperty$1 });
+        // effect(() => {
+        //     const isHorizontal = this.thyParentForm ? this.thyParentForm.isHorizontal : true;
+        //     this.isHorizontal.set(isHorizontal);
+        // });
     }
     ngOnInit() {
-        this.isHorizontal = this.thyParentForm ? this.thyParentForm.isHorizontal : true;
+        const isHorizontal = this.thyParentForm ? this.thyParentForm.isHorizontal : true;
+        this.isHorizontalSignal.set(isHorizontal);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyFormGroup, isStandalone: true, selector: "thy-form-group", inputs: { thyLabelText: "thyLabelText", thyLabelTextTranslateKey: "thyLabelTextTranslateKey", thyLabelRequired: ["thyLabelRequired", "thyLabelRequired", coerceBooleanProperty$1], thyLabelPaddingTopClear: ["thyLabelPaddingTopClear", "thyLabelPaddingTopClear", coerceBooleanProperty$1], thyFeedbackIcon: "thyFeedbackIcon", thyTipsMode: "thyTipsMode", thyTips: "thyTips", thyTipsTranslateKey: "thyTipsTranslateKey", thyRowFill: ["thyRowFill", "thyRowFill", coerceBooleanProperty$1] }, host: { properties: { "class.row-fill": "this._rowFill", "class.form-group": "this._isFormGroup", "class.row": "this.isHorizontal", "class.has-feedback": "this.hasFeedback" } }, queries: [{ propertyName: "contentTemplateRef", first: true, predicate: ["formGroup"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "@if (contentTemplate || contentTemplateRef) {\n  <ng-container [ngTemplateOutlet]=\"contentTemplate || contentTemplateRef\"></ng-container>\n  @if (feedbackSvgIconName) {\n    <thy-icon class=\"form-control-feedback\" [thyIconName]=\"feedbackSvgIconName\"></thy-icon>\n  } @else {\n    @if (feedbackIcon) {\n      <span class=\"form-control-feedback {{ feedbackIcon }}\"></span>\n    }\n  }\n} @else {\n  @if (!(!isHorizontal && !labelText)) {\n    <label\n      class=\"form-label \"\n    [ngClass]=\"{\n      'col-sm-2 col-form-label': isHorizontal,\n      'pt-0': labelPaddingTopClear\n    }\"\n      >\n      <span\n      [ngClass]=\"{\n        'label-required': labelRequired\n      }\"\n        >{{ labelText }}</span\n        >\n        @if (tipMode === 'label' && tips) {\n          <thy-icon class=\"label-tips-icon\" thyIconName=\"question-circle\" [thyTooltip]=\"tips\"></thy-icon>\n        }\n      </label>\n    }\n    <div [ngClass]=\"{ 'col-sm-10 col-form-control': isHorizontal, 'position-relative': !isHorizontal }\">\n      <ng-content></ng-content>\n      @if (feedbackSvgIconName) {\n        <thy-icon class=\"form-control-feedback\" [thyIconName]=\"feedbackSvgIconName\"></thy-icon>\n      } @else {\n        @if (feedbackIcon) {\n          <span class=\"form-control-feedback {{ feedbackIcon }}\"></span>\n        }\n      }\n      @if (tipMode === 'default' && tips) {\n        <span class=\"form-text text-desc\">{{ tips }}</span>\n      }\n    </div>\n  }\n\n", dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyFormGroup, isStandalone: true, selector: "thy-form-group", inputs: { thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, thyLabelTextTranslateKey: { classPropertyName: "thyLabelTextTranslateKey", publicName: "thyLabelTextTranslateKey", isSignal: true, isRequired: false, transformFunction: null }, thyLabelRequired: { classPropertyName: "thyLabelRequired", publicName: "thyLabelRequired", isSignal: true, isRequired: false, transformFunction: null }, thyLabelPaddingTopClear: { classPropertyName: "thyLabelPaddingTopClear", publicName: "thyLabelPaddingTopClear", isSignal: true, isRequired: false, transformFunction: null }, thyFeedbackIcon: { classPropertyName: "thyFeedbackIcon", publicName: "thyFeedbackIcon", isSignal: true, isRequired: false, transformFunction: null }, thyTipsMode: { classPropertyName: "thyTipsMode", publicName: "thyTipsMode", isSignal: true, isRequired: false, transformFunction: null }, thyTips: { classPropertyName: "thyTips", publicName: "thyTips", isSignal: true, isRequired: false, transformFunction: null }, thyTipsTranslateKey: { classPropertyName: "thyTipsTranslateKey", publicName: "thyTipsTranslateKey", isSignal: true, isRequired: false, transformFunction: null }, thyRowFill: { classPropertyName: "thyRowFill", publicName: "thyRowFill", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.row-fill": "thyRowFill()", "class.row": "isHorizontalSignal()", "class.has-feedback": "thyFeedbackIcon()" }, classAttribute: "form-group" }, queries: [{ propertyName: "contentTemplateRef", first: true, predicate: ["formGroup"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "@let tips = tipsSignal();\n@let labelText = labelTextSignal();\n@let isHorizontal = isHorizontalSignal();\n@let feedbackIcon = thyFeedbackIcon();\n@if (contentTemplate || contentTemplateRef) {\n  <ng-container [ngTemplateOutlet]=\"contentTemplate || contentTemplateRef\"></ng-container>\n  @if (feedbackIcon) {\n    <thy-icon class=\"form-control-feedback\" [thyIconName]=\"feedbackIcon\"></thy-icon>\n  }\n} @else {\n  @if (!(!isHorizontal && !labelText)) {\n    <label\n      class=\"form-label \"\n    [ngClass]=\"{\n      'col-sm-2 col-form-label': isHorizontal,\n      'pt-0': thyLabelPaddingTopClear()\n    }\"\n      >\n      <span\n      [ngClass]=\"{\n        'label-required': thyLabelRequired()\n      }\"\n        >{{ labelText }}</span\n        >\n        @if (thyTipsMode() === 'label' && tips) {\n          <thy-icon class=\"label-tips-icon\" thyIconName=\"question-circle\" [thyTooltip]=\"tips\"></thy-icon>\n        }\n      </label>\n    }\n    <div [ngClass]=\"{ 'col-sm-10 col-form-control': isHorizontal, 'position-relative': !isHorizontal }\">\n      <ng-content></ng-content>\n      @if (feedbackIcon) {\n        <thy-icon class=\"form-control-feedback\" [thyIconName]=\"feedbackIcon\"></thy-icon>\n      }\n      @if (thyTipsMode() === 'default' && tips) {\n        <span class=\"form-text text-desc\">{{ tips }}</span>\n      }\n    </div>\n  }\n\n", dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ThyIcon, NgClass, ThyTooltipDirective], template: "@if (contentTemplate || contentTemplateRef) {\n  <ng-container [ngTemplateOutlet]=\"contentTemplate || contentTemplateRef\"></ng-container>\n  @if (feedbackSvgIconName) {\n    <thy-icon class=\"form-control-feedback\" [thyIconName]=\"feedbackSvgIconName\"></thy-icon>\n  } @else {\n    @if (feedbackIcon) {\n      <span class=\"form-control-feedback {{ feedbackIcon }}\"></span>\n    }\n  }\n} @else {\n  @if (!(!isHorizontal && !labelText)) {\n    <label\n      class=\"form-label \"\n    [ngClass]=\"{\n      'col-sm-2 col-form-label': isHorizontal,\n      'pt-0': labelPaddingTopClear\n    }\"\n      >\n      <span\n      [ngClass]=\"{\n        'label-required': labelRequired\n      }\"\n        >{{ labelText }}</span\n        >\n        @if (tipMode === 'label' && tips) {\n          <thy-icon class=\"label-tips-icon\" thyIconName=\"question-circle\" [thyTooltip]=\"tips\"></thy-icon>\n        }\n      </label>\n    }\n    <div [ngClass]=\"{ 'col-sm-10 col-form-control': isHorizontal, 'position-relative': !isHorizontal }\">\n      <ng-content></ng-content>\n      @if (feedbackSvgIconName) {\n        <thy-icon class=\"form-control-feedback\" [thyIconName]=\"feedbackSvgIconName\"></thy-icon>\n      } @else {\n        @if (feedbackIcon) {\n          <span class=\"form-control-feedback {{ feedbackIcon }}\"></span>\n        }\n      }\n      @if (tipMode === 'default' && tips) {\n        <span class=\"form-text text-desc\">{{ tips }}</span>\n      }\n    </div>\n  }\n\n" }]
-        }], propDecorators: { _rowFill: [{
-                type: HostBinding,
-                args: ['class.row-fill']
-            }], _isFormGroup: [{
-                type: HostBinding,
-                args: ['class.form-group']
-            }], isHorizontal: [{
-                type: HostBinding,
-                args: ['class.row']
-            }], hasFeedback: [{
-                type: HostBinding,
-                args: ['class.has-feedback']
-            }], thyLabelText: [{
-                type: Input
-            }], thyLabelTextTranslateKey: [{
-                type: Input
-            }], thyLabelRequired: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyLabelPaddingTopClear: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyFeedbackIcon: [{
-                type: Input
-            }], thyTipsMode: [{
-                type: Input
-            }], thyTips: [{
-                type: Input
-            }], thyTipsTranslateKey: [{
-                type: Input
-            }], thyRowFill: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], contentTemplateRef: [{
+            args: [{ selector: 'thy-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ThyIcon, NgClass, ThyTooltipDirective], host: {
+                        class: 'form-group',
+                        '[class.row-fill]': 'thyRowFill()',
+                        '[class.row]': 'isHorizontalSignal()',
+                        '[class.has-feedback]': 'thyFeedbackIcon()'
+                    }, template: "@let tips = tipsSignal();\n@let labelText = labelTextSignal();\n@let isHorizontal = isHorizontalSignal();\n@let feedbackIcon = thyFeedbackIcon();\n@if (contentTemplate || contentTemplateRef) {\n  <ng-container [ngTemplateOutlet]=\"contentTemplate || contentTemplateRef\"></ng-container>\n  @if (feedbackIcon) {\n    <thy-icon class=\"form-control-feedback\" [thyIconName]=\"feedbackIcon\"></thy-icon>\n  }\n} @else {\n  @if (!(!isHorizontal && !labelText)) {\n    <label\n      class=\"form-label \"\n    [ngClass]=\"{\n      'col-sm-2 col-form-label': isHorizontal,\n      'pt-0': thyLabelPaddingTopClear()\n    }\"\n      >\n      <span\n      [ngClass]=\"{\n        'label-required': thyLabelRequired()\n      }\"\n        >{{ labelText }}</span\n        >\n        @if (thyTipsMode() === 'label' && tips) {\n          <thy-icon class=\"label-tips-icon\" thyIconName=\"question-circle\" [thyTooltip]=\"tips\"></thy-icon>\n        }\n      </label>\n    }\n    <div [ngClass]=\"{ 'col-sm-10 col-form-control': isHorizontal, 'position-relative': !isHorizontal }\">\n      <ng-content></ng-content>\n      @if (feedbackIcon) {\n        <thy-icon class=\"form-control-feedback\" [thyIconName]=\"feedbackIcon\"></thy-icon>\n      }\n      @if (thyTipsMode() === 'default' && tips) {\n        <span class=\"form-text text-desc\">{{ tips }}</span>\n      }\n    </div>\n  }\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { contentTemplateRef: [{
                 type: ContentChild,
                 args: ['formGroup']
             }], contentTemplate: [{
@@ -783,7 +750,7 @@ class ThyFormSubmitDirective {
         /**
          * Form 验证通过的提交函数
          */
-        this.thyFormSubmit = new EventEmitter();
+        this.thyFormSubmit = output();
     }
     ngOnInit() {
         this.thyFormDirective.onSubmitSuccess = ($event) => {
@@ -801,9 +768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: '[thyFormSubmit],[thy-form-submit]'
                 }]
-        }], propDecorators: { thyFormSubmit: [{
-                type: Output
-            }], onSubmit: [{
+        }], propDecorators: { onSubmit: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -819,10 +784,17 @@ class ThyFormGroupFooter {
         this.defaultConfig = inject(THY_FORM_CONFIG);
         this._isFormGroup = true;
         this.isHorizontal = true;
+        /**
+         * 对齐方式
+         * @type left | right | center
+         * @default left
+         */
+        this.thyAlign = input(undefined);
         this.footerClassMap = {};
     }
     get align() {
-        return !!this.thyAlign ? this.thyAlign : this.defaultConfig.footerAlign;
+        const thyAlign = this.thyAlign();
+        return !!thyAlign ? thyAlign : this.defaultConfig.footerAlign;
     }
     ngOnInit() {
         if (this.thyParentForm) {
@@ -838,7 +810,7 @@ class ThyFormGroupFooter {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormGroupFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyFormGroupFooter, isStandalone: true, selector: "thy-form-group-footer", inputs: { thyAlign: "thyAlign" }, host: { properties: { "class.form-group": "this._isFormGroup", "class.row": "this.isHorizontal" } }, queries: [{ propertyName: "description", first: true, predicate: ["description"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"footerClassMap\">\n  <div class=\"btn-pair form-footer-actions\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (description) {\n    <div class=\"form-footer-description\">\n      <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyFormGroupFooter, isStandalone: true, selector: "thy-form-group-footer", inputs: { thyAlign: { classPropertyName: "thyAlign", publicName: "thyAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.form-group": "this._isFormGroup", "class.row": "this.isHorizontal" } }, queries: [{ propertyName: "description", first: true, predicate: ["description"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"footerClassMap\">\n  <div class=\"btn-pair form-footer-actions\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (description) {\n    <div class=\"form-footer-description\">\n      <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormGroupFooter, decorators: [{
             type: Component,
@@ -852,8 +824,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], description: [{
                 type: ContentChild,
                 args: ['description']
-            }], thyAlign: [{
-                type: Input
             }] } });
 
 /**
@@ -865,9 +835,10 @@ class ThyUniqueCheckValidator {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.thyForm = inject(ThyFormDirective, { optional: true });
+        this.thyUniqueCheck = input(undefined);
     }
     validate(ctrl) {
-        return this.thyUniqueCheck(ctrl.value).pipe(map((failed) => {
+        return this.thyUniqueCheck()(ctrl.value).pipe(map((failed) => {
             setTimeout(() => {
                 if (failed && this.thyForm && this.elementRef.nativeElement.name) {
                     this.thyForm.validator.validateControl(this.elementRef.nativeElement.name);
@@ -877,29 +848,15 @@ class ThyUniqueCheckValidator {
         }), catchError(() => of(null)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyUniqueCheckValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyUniqueCheckValidator, isStandalone: true, selector: "[thyUniqueCheck]", inputs: { thyUniqueCheck: "thyUniqueCheck" }, providers: [
-            {
-                provide: NG_ASYNC_VALIDATORS,
-                useExisting: ThyUniqueCheckValidator,
-                multi: true
-            }
-        ], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyUniqueCheckValidator, isStandalone: true, selector: "[thyUniqueCheck]", inputs: { thyUniqueCheck: { classPropertyName: "thyUniqueCheck", publicName: "thyUniqueCheck", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: ThyUniqueCheckValidator, multi: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyUniqueCheckValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyUniqueCheck]',
-                    providers: [
-                        {
-                            provide: NG_ASYNC_VALIDATORS,
-                            useExisting: ThyUniqueCheckValidator,
-                            multi: true
-                        }
-                    ]
+                    providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: ThyUniqueCheckValidator, multi: true }]
                 }]
-        }], propDecorators: { thyUniqueCheck: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * @name min
@@ -987,11 +944,17 @@ function confirmValidator(value) {
  * @order 25
  */
 class ThyConfirmValidatorDirective {
+    constructor() {
+        /**
+         * 表单控件的校验值
+         */
+        this.confirm = input(undefined);
+    }
     validate(control) {
-        return confirmValidator(this.confirm)(control);
+        return confirmValidator(this.confirm())(control);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyConfirmValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyConfirmValidatorDirective, isStandalone: true, selector: "[confirm]", inputs: { confirm: "confirm" }, providers: [{ provide: NG_VALIDATORS, useExisting: ThyConfirmValidatorDirective, multi: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyConfirmValidatorDirective, isStandalone: true, selector: "[confirm]", inputs: { confirm: { classPropertyName: "confirm", publicName: "confirm", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALIDATORS, useExisting: ThyConfirmValidatorDirective, multi: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyConfirmValidatorDirective, decorators: [{
             type: Directive,
@@ -1000,9 +963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: '[confirm]',
                     providers: [{ provide: NG_VALIDATORS, useExisting: ThyConfirmValidatorDirective, multi: true }]
                 }]
-        }], propDecorators: { confirm: [{
-                type: Input
-            }] } });
+        }] });
 
 class ThyFormModule {
     static forRoot(config) {