@delon/abc 20.1.1 → 21.0.0-next.1

package/fesm2022/se.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, numberAttribute, Input, ChangeDetectorRef, DestroyRef, TemplateRef, ViewChild, ContentChild, NgModule } from '@angular/core';
-import { BehaviorSubject, filter } from 'rxjs';
-import { AlainConfigService } from '@delon/util/config';
+import { inject, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, input, numberAttribute, booleanAttribute, DestroyRef, Injector, contentChild, viewChild, signal, linkedSignal, TemplateRef, effect, runInInjectionContext, afterNextRender, NgModule } from '@angular/core';
 import { NzStringTemplateOutletDirective, NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { CdkObserveContent } from '@angular/cdk/observers';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Validators, RequiredValidator, NgModel, FormControlName } from '@angular/forms';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgModel, FormControlName, Validators, RequiredValidator } from '@angular/forms';
+import { map, filter } from 'rxjs';
 import { ResponsiveService } from '@delon/theme';
 import { isEmpty } from '@delon/util/browser';
-import { helpMotion } from 'ng-zorro-antd/core/animation';
+import { withAnimationCheck } from 'ng-zorro-antd/core/animation';
 import { NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { NzIconDirective, NzIconModule } from 'ng-zorro-antd/icon';
 import { NzTooltipDirective, NzTooltipModule } from 'ng-zorro-antd/tooltip';
@@ -16,386 +15,367 @@ import { CommonModule } from '@angular/common';
 
 class SETitleComponent {
     parentComp = inject(SEContainerComponent, { host: true, optional: true });
-    el = inject(ElementRef).nativeElement;
-    ren = inject(Renderer2);
     constructor() {
         if (this.parentComp == null) {
             throw new Error(`[se-title] must include 'se-container' component`);
         }
     }
-    setClass() {
-        const { el } = this;
-        const gutter = this.parentComp.gutter;
-        this.ren.setStyle(el, 'padding-left', `${gutter / 2}px`);
-        this.ren.setStyle(el, 'padding-right', `${gutter / 2}px`);
-    }
-    ngOnInit() {
-        this.setClass();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SETitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SETitleComponent, isStandalone: true, selector: "se-title, [se-title]", host: { properties: { "class.se__title": "true" } }, exportAs: ["seTitle"], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    paddingValue = computed(() => this.parentComp._gutter() / 2, ...(ngDevMode ? [{ debugName: "paddingValue" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SETitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SETitleComponent, isStandalone: true, selector: "se-title, [se-title]", host: { properties: { "style.padding-left.px": "paddingValue()", "style.padding-right.px": "paddingValue()" }, classAttribute: "se__title" }, exportAs: ["seTitle"], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SETitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SETitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'se-title, [se-title]',
                     exportAs: 'seTitle',
                     template: '<ng-content />',
                     host: {
-                        '[class.se__title]': 'true'
+                        class: 'se__title',
+                        '[style.padding-left.px]': 'paddingValue()',
+                        '[style.padding-right.px]': 'paddingValue()'
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
         }], ctorParameters: () => [] });
 class SEContainerComponent {
-    cogSrv = inject(AlainConfigService);
-    errorNotify$ = new BehaviorSubject(null);
-    colInCon;
-    col;
-    labelWidth;
-    noColon = false;
-    title;
-    get gutter() {
-        return this.nzLayout === 'horizontal' ? this._gutter : 0;
-    }
-    set gutter(value) {
-        this._gutter = value;
-    }
-    _gutter;
-    get nzLayout() {
-        return this._nzLayout;
-    }
-    set nzLayout(value) {
-        this._nzLayout = value;
-        if (value === 'inline') {
-            this.size = 'compact';
-        }
-    }
-    _nzLayout;
-    size;
-    firstVisual;
-    ingoreDirty;
-    line = false;
-    set errors(val) {
-        this.setErrors(val);
-    }
-    get margin() {
-        return -(this.gutter / 2);
-    }
-    get errorNotify() {
-        return this.errorNotify$.pipe(filter(v => v != null));
-    }
-    constructor() {
-        this.cogSrv.attach(this, 'se', {
-            size: 'default',
-            nzLayout: 'horizontal',
-            gutter: 32,
-            col: 2,
-            labelWidth: 150,
-            firstVisual: false,
-            ingoreDirty: false
-        });
-    }
-    setErrors(errors) {
-        for (const error of errors) {
-            this.errorNotify$.next(error);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SEContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SEContainerComponent, isStandalone: true, selector: "se-container, [se-container]", inputs: { colInCon: ["se-container", "colInCon", (v) => (v == null ? null : numberAttribute(v))], col: ["col", "col", (v) => (v == null ? null : numberAttribute(v))], labelWidth: ["labelWidth", "labelWidth", (v) => (v == null ? null : numberAttribute(v))], noColon: ["noColon", "noColon", booleanAttribute], title: "title", gutter: ["gutter", "gutter", numberAttribute], nzLayout: "nzLayout", size: "size", firstVisual: ["firstVisual", "firstVisual", booleanAttribute], ingoreDirty: ["ingoreDirty", "ingoreDirty", booleanAttribute], line: ["line", "line", booleanAttribute], errors: "errors" }, host: { properties: { "class.ant-row": "true", "class.se__container": "true", "class.se__horizontal": "nzLayout === 'horizontal'", "class.se__vertical": "nzLayout === 'vertical'", "class.se__inline": "nzLayout === 'inline'", "class.se__compact": "size === 'compact'", "style.margin-left.px": "margin", "style.margin-right.px": "margin" } }, exportAs: ["seContainer"], ngImport: i0, template: `
-    @if (title) {
+    colInCon = input(null, { ...(ngDevMode ? { debugName: "colInCon" } : {}), transform: (v) => (v == null ? null : numberAttribute(v)),
+        alias: 'se-container' });
+    labelWidth = input(150, { ...(ngDevMode ? { debugName: "labelWidth" } : {}), transform: (v) => (v == null ? null : numberAttribute(v)) });
+    col = input(2, { ...(ngDevMode ? { debugName: "col" } : {}), transform: (v) => (v == null ? null : numberAttribute(v)) });
+    noColon = input(false, { ...(ngDevMode ? { debugName: "noColon" } : {}), transform: booleanAttribute });
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    gutter = input(32, { ...(ngDevMode ? { debugName: "gutter" } : {}), transform: numberAttribute });
+    nzLayout = input('horizontal', ...(ngDevMode ? [{ debugName: "nzLayout" }] : []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    firstVisual = input(false, { ...(ngDevMode ? { debugName: "firstVisual" } : {}), transform: booleanAttribute });
+    ingoreDirty = input(false, { ...(ngDevMode ? { debugName: "ingoreDirty" } : {}), transform: booleanAttribute });
+    line = input(false, { ...(ngDevMode ? { debugName: "line" } : {}), transform: booleanAttribute });
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    _gutter = computed(() => (this.nzLayout() === 'horizontal' ? this.gutter() : 0), ...(ngDevMode ? [{ debugName: "_gutter" }] : []));
+    _size = computed(() => (this.nzLayout() === 'inline' ? 'compact' : this.size()), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    margin = computed(() => -(this._gutter() / 2), ...(ngDevMode ? [{ debugName: "margin" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SEContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SEContainerComponent, isStandalone: true, selector: "se-container, [se-container]", inputs: { colInCon: { classPropertyName: "colInCon", publicName: "se-container", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: false, transformFunction: null }, noColon: { classPropertyName: "noColon", publicName: "noColon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, gutter: { classPropertyName: "gutter", publicName: "gutter", isSignal: true, isRequired: false, transformFunction: null }, nzLayout: { classPropertyName: "nzLayout", publicName: "nzLayout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, firstVisual: { classPropertyName: "firstVisual", publicName: "firstVisual", isSignal: true, isRequired: false, transformFunction: null }, ingoreDirty: { classPropertyName: "ingoreDirty", publicName: "ingoreDirty", isSignal: true, isRequired: false, transformFunction: null }, line: { classPropertyName: "line", publicName: "line", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.se__horizontal": "nzLayout() === 'horizontal'", "class.se__vertical": "nzLayout() === 'vertical'", "class.se__inline": "nzLayout() === 'inline'", "class.se__compact": "_size() === 'compact'", "style.margin-left.px": "margin()", "style.margin-right.px": "margin()" }, classAttribute: "ant-row se__container" }, exportAs: ["seContainer"], ngImport: i0, template: `
+    @let tit = title();
+    @if (tit) {
       <div se-title>
-        <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
+        <ng-container *nzStringTemplateOutlet="tit">{{ tit }}</ng-container>
       </div>
     }
     <ng-content />
   `, isInline: true, dependencies: [{ kind: "component", type: SETitleComponent, selector: "se-title, [se-title]", exportAs: ["seTitle"] }, { kind: "directive", type: NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SEContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SEContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'se-container, [se-container]',
                     exportAs: 'seContainer',
                     template: `
-    @if (title) {
+    @let tit = title();
+    @if (tit) {
       <div se-title>
-        <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
+        <ng-container *nzStringTemplateOutlet="tit">{{ tit }}</ng-container>
       </div>
     }
     <ng-content />
   `,
                     host: {
-                        '[class.ant-row]': `true`,
-                        '[class.se__container]': `true`,
-                        '[class.se__horizontal]': `nzLayout === 'horizontal'`,
-                        '[class.se__vertical]': `nzLayout === 'vertical'`,
-                        '[class.se__inline]': `nzLayout === 'inline'`,
-                        '[class.se__compact]': `size === 'compact'`,
-                        '[style.margin-left.px]': `margin`,
-                        '[style.margin-right.px]': `margin`
+                        class: 'ant-row se__container',
+                        '[class.se__horizontal]': `nzLayout() === 'horizontal'`,
+                        '[class.se__vertical]': `nzLayout() === 'vertical'`,
+                        '[class.se__inline]': `nzLayout() === 'inline'`,
+                        '[class.se__compact]': `_size() === 'compact'`,
+                        '[style.margin-left.px]': `margin()`,
+                        '[style.margin-right.px]': `margin()`
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [SETitleComponent, NzStringTemplateOutletDirective]
                 }]
-        }], ctorParameters: () => [], propDecorators: { colInCon: [{
-                type: Input,
-                args: [{ alias: 'se-container', transform: (v) => (v == null ? null : numberAttribute(v)) }]
-            }], col: [{
-                type: Input,
-                args: [{ transform: (v) => (v == null ? null : numberAttribute(v)) }]
-            }], labelWidth: [{
-                type: Input,
-                args: [{ transform: (v) => (v == null ? null : numberAttribute(v)) }]
-            }], noColon: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], title: [{
-                type: Input
-            }], gutter: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], nzLayout: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], firstVisual: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], ingoreDirty: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], line: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], errors: [{
-                type: Input
-            }] } });
+        }], propDecorators: { colInCon: [{ type: i0.Input, args: [{ isSignal: true, alias: "se-container", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: false }] }], noColon: [{ type: i0.Input, args: [{ isSignal: true, alias: "noColon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], gutter: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutter", required: false }] }], nzLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzLayout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], firstVisual: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstVisual", required: false }] }], ingoreDirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "ingoreDirty", required: false }] }], line: [{ type: i0.Input, args: [{ isSignal: true, alias: "line", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
 
 const prefixCls = `se`;
 let nextUniqueId = 0;
 class SEComponent {
     parentComp = inject(SEContainerComponent, { host: true, optional: true });
-    el = inject(ElementRef).nativeElement;
     rep = inject(ResponsiveService);
-    ren = inject(Renderer2);
-    cdr = inject(ChangeDetectorRef);
     statusSrv = inject(NzFormStatusService);
     destroy$ = inject(DestroyRef);
-    ngModel;
-    formControlName;
-    contentElement;
-    clsMap = [];
-    inited = false;
+    injector = inject(Injector);
+    ngModel = contentChild(NgModel, ...(ngDevMode ? [{ debugName: "ngModel" }] : []));
+    formControlName = contentChild(FormControlName, ...(ngDevMode ? [{ debugName: "formControlName" }] : []));
+    ngControl = computed(() => this.ngModel() ?? this.formControlName(), ...(ngDevMode ? [{ debugName: "ngControl" }] : []));
+    contentElement = viewChild.required('contentElement');
     onceFlag = false;
-    errorData = {};
-    isBindModel = false;
-    invalid = false;
-    _labelWidth = null;
-    _noColon = null;
-    _error;
+    bindModel$;
+    empty = signal(false, ...(ngDevMode ? [{ debugName: "empty" }] : []));
     // #region fields
-    optional = null;
-    optionalHelp = null;
-    optionalHelpColor;
-    set error(val) {
-        this.errorData = typeof val === 'string' || val instanceof TemplateRef ? { '': val } : val;
-    }
-    extra;
-    label;
-    col;
-    required = false;
-    controlClass = '';
-    line;
-    labelWidth;
-    noColon;
-    hideLabel = false;
-    set id(value) {
-        this._id = value;
-        this._autoId = false;
-    }
-    _id = `_se-${++nextUniqueId}`;
-    _autoId = true;
+    optional = input(...(ngDevMode ? [undefined, { debugName: "optional" }] : []));
+    optionalHelp = input(...(ngDevMode ? [undefined, { debugName: "optionalHelp" }] : []));
+    optionalHelpColor = input(...(ngDevMode ? [undefined, { debugName: "optionalHelpColor" }] : []));
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
+    extra = input(...(ngDevMode ? [undefined, { debugName: "extra" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    col = input(null, { ...(ngDevMode ? { debugName: "col" } : {}), transform: (v) => (v == null ? null : numberAttribute(v)) });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    controlClass = input(...(ngDevMode ? [undefined, { debugName: "controlClass" }] : []));
+    line = input(null, { ...(ngDevMode ? { debugName: "line" } : {}), transform: (v) => (v == null ? null : booleanAttribute(v)) });
+    labelWidth = input(null, { ...(ngDevMode ? { debugName: "labelWidth" } : {}), transform: (v) => (v == null ? null : numberAttribute(v)) });
+    noColon = input(null, { ...(ngDevMode ? { debugName: "noColon" } : {}), transform: (v) => (v == null ? null : booleanAttribute(v)) });
+    hideLabel = input(false, { ...(ngDevMode ? { debugName: "hideLabel" } : {}), transform: booleanAttribute });
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
     // #endregion
-    get paddingValue() {
-        return this.parentComp.gutter / 2;
-    }
-    get showErr() {
-        return this.invalid && !!this._error && !this.compact;
-    }
-    get compact() {
-        return this.parentComp.size === 'compact';
-    }
-    get ngControl() {
-        return this.ngModel ?? this.formControlName;
-    }
+    invalid = signal(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    showErr = computed(() => this.invalid() && !!this.errorText() && !this.compact(), ...(ngDevMode ? [{ debugName: "showErr" }] : []));
+    errorType = linkedSignal(() => this.error(), ...(ngDevMode ? [{ debugName: "errorType" }] : []));
+    errorData = computed(() => {
+        const err = this.errorType();
+        return typeof err === 'string' || err instanceof TemplateRef ? { '': err } : err;
+    }, ...(ngDevMode ? [{ debugName: "errorData" }] : []));
+    errorText = signal(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
+    _required = linkedSignal(() => this.required() === true, ...(ngDevMode ? [{ debugName: "_required" }] : []));
+    paddingValue = computed(() => this.parentComp._gutter() / 2, ...(ngDevMode ? [{ debugName: "paddingValue" }] : []));
+    compact = computed(() => this.parentComp._size() === 'compact', ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    _id = linkedSignal(() => this.id(), ...(ngDevMode ? [{ debugName: "_id" }] : []));
+    _noColon = computed(() => {
+        const noColon = this.noColon();
+        return noColon != null ? noColon : this.parentComp.noColon();
+    }, ...(ngDevMode ? [{ debugName: "_noColon" }] : []));
+    _labelWidth = computed(() => {
+        const parent = this.parentComp;
+        const labelWidth = this.labelWidth();
+        return parent.nzLayout() === 'horizontal' ? (labelWidth != null ? labelWidth : parent.labelWidth()) : null;
+    }, ...(ngDevMode ? [{ debugName: "_labelWidth" }] : []));
+    cls = computed(() => {
+        const parent = this.parentComp;
+        const parentCol = parent.colInCon() ?? parent.col();
+        const col = this.col();
+        const repCls = parent.nzLayout() === 'horizontal' ? this.rep.genCls(col != null ? col : parentCol, parentCol) : [];
+        const ret = [];
+        ret.push(`ant-form-item`, ...repCls, `${prefixCls}__item`);
+        if (this.line() || parent.line()) {
+            ret.push(`${prefixCls}__line`);
+        }
+        return ret;
+    }, ...(ngDevMode ? [{ debugName: "cls" }] : []));
+    nzValidateAnimationEnter = withAnimationCheck(() => 'ant-form-validate_animation-enter');
+    nzValidateAnimationLeave = withAnimationCheck(() => 'ant-form-validate_animation-leave');
     constructor() {
         if (this.parentComp == null) {
             throw new Error(`[se] must include 'se-container' component`);
         }
-        this.parentComp.errorNotify
-            .pipe(takeUntilDestroyed(), filter(w => this.inited && this.ngControl != null && this.ngControl.name === w.name))
+        toObservable(this.parentComp.errors)
+            .pipe(takeUntilDestroyed(), map(ls => ls.find(w => this.ngControl()?.name === w.name)), filter(w => w != null))
             .subscribe(item => {
-            this.error = item.error;
-            this.updateStatus(this.ngControl.invalid);
+            this.errorType.set(item.error);
+            this.updateStatus();
         });
-    }
-    setClass() {
-        const { el, ren, clsMap, col, cdr, line, labelWidth, rep, noColon } = this;
-        const parent = this.parentComp;
-        this._noColon = noColon != null ? noColon : parent.noColon;
-        this._labelWidth = parent.nzLayout === 'horizontal' ? (labelWidth != null ? labelWidth : parent.labelWidth) : null;
-        clsMap.forEach(cls => ren.removeClass(el, cls));
-        clsMap.length = 0;
-        const parentCol = parent.colInCon ?? parent.col;
-        const repCls = parent.nzLayout === 'horizontal' ? rep.genCls(col != null ? col : parentCol, parentCol) : [];
-        clsMap.push(`ant-form-item`, ...repCls, `${prefixCls}__item`);
-        if (line || parent.line) {
-            clsMap.push(`${prefixCls}__line`);
-        }
-        clsMap.forEach(cls => ren.addClass(el, cls));
-        cdr.detectChanges();
-        return this;
-    }
-    bindModel() {
-        if (!this.ngControl || this.isBindModel)
-            return;
-        this.isBindModel = true;
-        this.ngControl
-            .statusChanges.pipe(takeUntilDestroyed(this.destroy$))
-            .subscribe(res => this.updateStatus(res === 'INVALID'));
-        if (this._autoId) {
-            const controlAccessor = this.ngControl.valueAccessor;
-            const control = (controlAccessor?.elementRef ?? controlAccessor?._elementRef)?.nativeElement;
-            if (control) {
-                if (control.id) {
-                    this._id = control.id;
+        effect(() => this.checkContent());
+        effect(() => {
+            const control = this.ngControl();
+            if (!control)
+                return;
+            this.bindModel$?.unsubscribe();
+            this.bindModel$ = control
+                .statusChanges.pipe(takeUntilDestroyed(this.destroy$))
+                .subscribe(res => this.updateStatus(res === 'INVALID'));
+            // set unique id
+            let id = this.id() ?? `_se-${++nextUniqueId}`;
+            const controlAccessor = this.ngControl()?.valueAccessor;
+            const controlEl = (controlAccessor?.elementRef ?? controlAccessor?._elementRef)?.nativeElement;
+            if (controlEl) {
+                if (controlEl.id) {
+                    this._id.set(controlEl.id);
                 }
                 else {
-                    control.id = this._id;
+                    controlEl.id = id;
                 }
             }
-        }
-        // auto required
-        if (this.required !== true) {
-            let required = this.ngControl?.control?.hasValidator(Validators.required);
-            if (required !== true) {
-                const rawValidators = this.ngControl?._rawValidators;
-                required = rawValidators.find(w => w instanceof RequiredValidator) != null;
+            // auto required
+            if (this.required() !== true) {
+                let required = control?.control?.hasValidator(Validators.required);
+                if (required !== true) {
+                    const rawValidators = control?._rawValidators;
+                    required = rawValidators.find(w => w instanceof RequiredValidator) != null;
+                }
+                this._required.set(required);
             }
-            this.required = required;
-            this.cdr.detectChanges();
-        }
+        });
+        effect(() => {
+            this.onceFlag = this.parentComp.firstVisual();
+            if (!this.onceFlag)
+                return;
+            runInInjectionContext(this.injector, () => {
+                afterNextRender(() => {
+                    this.updateStatus();
+                    this.onceFlag = false;
+                });
+            });
+        });
     }
     updateStatus(invalid) {
-        if (this.ngControl?.disabled || this.ngControl?.isDisabled) {
+        const control = this.ngControl();
+        if (!control || control.disabled || control.isDisabled)
             return;
-        }
-        this.invalid =
-            !this.onceFlag && invalid && this.parentComp.ingoreDirty === false && !this.ngControl?.dirty ? false : invalid;
-        const errors = this.ngControl?.errors;
+        if (invalid == null)
+            invalid = control.invalid;
+        this.invalid.set(!this.onceFlag && invalid && this.parentComp.ingoreDirty() === false && !control?.dirty ? false : invalid);
+        const errors = control?.errors;
         if (errors != null && Object.keys(errors).length > 0) {
             const key = Object.keys(errors)[0] ?? '';
-            const err = this.errorData[key];
-            this._error = err != null ? err : (this.errorData[''] ?? '');
+            const err = this.errorData()?.[key];
+            this.errorText.set(err != null ? err : (this.errorData()?.[''] ?? ''));
         }
-        this.statusSrv.formStatusChanges.next({ status: this.invalid ? 'error' : '', hasFeedback: false });
-        this.cdr.detectChanges();
+        this.statusSrv.formStatusChanges.next({ status: this.invalid() ? 'error' : '', hasFeedback: false });
     }
     checkContent() {
-        const el = this.contentElement.nativeElement;
-        const cls = `${prefixCls}__item-empty`;
-        if (isEmpty(el)) {
-            this.ren.addClass(el, cls);
-        }
-        else {
-            this.ren.removeClass(el, cls);
-        }
-    }
-    ngAfterContentInit() {
-        this.checkContent();
-    }
-    ngOnChanges() {
-        this.onceFlag = this.parentComp.firstVisual;
-        if (this.inited) {
-            this.setClass().bindModel();
-        }
+        const el = this.contentElement().nativeElement;
+        this.empty.set(isEmpty(el));
     }
-    ngAfterViewInit() {
-        this.setClass().bindModel();
-        this.inited = true;
-        if (this.onceFlag) {
-            Promise.resolve().then(() => {
-                this.updateStatus(this.ngControl.invalid);
-                this.onceFlag = false;
-            });
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SEComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SEComponent, isStandalone: true, selector: "se", inputs: { optional: "optional", optionalHelp: "optionalHelp", optionalHelpColor: "optionalHelpColor", error: "error", extra: "extra", label: "label", col: ["col", "col", (v) => (v == null ? null : numberAttribute(v))], required: ["required", "required", booleanAttribute], controlClass: "controlClass", line: ["line", "line", (v) => (v == null ? null : booleanAttribute(v))], labelWidth: ["labelWidth", "labelWidth", (v) => (v == null ? null : numberAttribute(v))], noColon: ["noColon", "noColon", (v) => (v == null ? null : booleanAttribute(v))], hideLabel: ["hideLabel", "hideLabel", booleanAttribute], id: "id" }, host: { properties: { "style.padding-left.px": "paddingValue", "style.padding-right.px": "paddingValue", "class.se__hide-label": "hideLabel", "class.ant-form-item-has-error": "invalid", "class.ant-form-item-with-help": "showErr" } }, providers: [NzFormStatusService], queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true, static: true }, { propertyName: "formControlName", first: true, predicate: FormControlName, descendants: true, static: true }], viewQueries: [{ propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, static: true }], exportAs: ["se"], usesOnChanges: true, ngImport: i0, template: "<div class=\"ant-form-item-label\" [class.se__nolabel]=\"hideLabel || !label\" [style.width.px]=\"_labelWidth\">\n  @if (label) {\n    <label [attr.for]=\"_id\" class=\"se__label\" [class.ant-form-item-required]=\"required\" [class.se__no-colon]=\"_noColon\">\n      <span class=\"se__label-text\">\n        <ng-container *nzStringTemplateOutlet=\"label\">{{ label }}</ng-container>\n      </span>\n      @if (optional || optionalHelp) {\n        <span class=\"se__label-optional\" [class.se__label-optional-no-text]=\"!optional\">\n          <ng-container *nzStringTemplateOutlet=\"optional\">{{ optional }}</ng-container>\n          @if (optionalHelp) {\n            <nz-icon\n              nz-tooltip\n              [nzTooltipTitle]=\"optionalHelp\"\n              [nzTooltipColor]=\"optionalHelpColor\"\n              nzType=\"question-circle\"\n            />\n          }\n        </span>\n      }\n    </label>\n  }\n</div>\n<div class=\"ant-form-item-control se__control\">\n  <div class=\"ant-form-item-control-input {{ controlClass }}\">\n    <div class=\"ant-form-item-control-input-content\" (cdkObserveContent)=\"checkContent()\" #contentElement>\n      <ng-content />\n    </div>\n  </div>\n  @if (showErr) {\n    <div @helpMotion class=\"ant-form-item-explain ant-form-item-explain-connected\">\n      <div role=\"alert\" class=\"ant-form-item-explain-error\">\n        <ng-container *nzStringTemplateOutlet=\"_error\">{{ _error }}</ng-container>\n      </div>\n    </div>\n  }\n  @if (extra && !compact) {\n    <div class=\"ant-form-item-extra\">\n      <ng-container *nzStringTemplateOutlet=\"extra\">{{ extra }}</ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "directive", type: NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "directive", type: NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], animations: [helpMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SEComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SEComponent, isStandalone: true, selector: "se", inputs: { optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalHelp: { classPropertyName: "optionalHelp", publicName: "optionalHelp", isSignal: true, isRequired: false, transformFunction: null }, optionalHelpColor: { classPropertyName: "optionalHelpColor", publicName: "optionalHelpColor", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, extra: { classPropertyName: "extra", publicName: "extra", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", isSignal: true, isRequired: false, transformFunction: null }, line: { classPropertyName: "line", publicName: "line", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, noColon: { classPropertyName: "noColon", publicName: "noColon", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.padding-left.px": "paddingValue()", "style.padding-right.px": "paddingValue()", "class.se__hide-label": "hideLabel()", "class.ant-form-item-has-error": "invalid()", "class.ant-form-item-with-help": "showErr()", "class.se__item-empty": "empty()", "class": "cls()" } }, providers: [NzFormStatusService], queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true, isSignal: true }, { propertyName: "formControlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, isSignal: true }], exportAs: ["se"], ngImport: i0, template: `
+    @let _label = label();
+    <div class="ant-form-item-label" [class.se__nolabel]="hideLabel() || !_label" [style.width.px]="_labelWidth()">
+      @if (_label) {
+        <label
+          [attr.for]="_id()"
+          class="se__label"
+          [class.ant-form-item-required]="_required()"
+          [class.se__no-colon]="_noColon()"
+        >
+          <span class="se__label-text">
+            <ng-container *nzStringTemplateOutlet="_label">{{ _label }}</ng-container>
+          </span>
+          @let _optional = optional();
+          @let _optionalHelp = optionalHelp();
+          @if (_optional || _optionalHelp) {
+            <span class="se__label-optional" [class.se__label-optional-no-text]="!_optional">
+              <ng-container *nzStringTemplateOutlet="_optional">{{ _optional }}</ng-container>
+              @if (_optionalHelp) {
+                <nz-icon
+                  nz-tooltip
+                  [nzTooltipTitle]="_optionalHelp"
+                  [nzTooltipColor]="optionalHelpColor()"
+                  nzType="question-circle"
+                />
+              }
+            </span>
+          }
+        </label>
+      }
+    </div>
+    <div class="ant-form-item-control se__control">
+      <div class="ant-form-item-control-input" [class]="controlClass()">
+        <div class="ant-form-item-control-input-content" (cdkObserveContent)="checkContent()" #contentElement>
+          <ng-content />
+        </div>
+      </div>
+      @if (showErr()) {
+        <div
+          [animate.enter]="nzValidateAnimationEnter()"
+          [animate.leave]="nzValidateAnimationLeave()"
+          class="ant-form-item-explain ant-form-item-explain-connected"
+        >
+          <div role="alert" class="ant-form-item-explain-error">
+            <ng-container *nzStringTemplateOutlet="errorText()">{{ errorText() }}</ng-container>
+          </div>
+        </div>
+      }
+      @let _extra = extra();
+      @if (_extra && !compact()) {
+        <div class="ant-form-item-extra">
+          <ng-container *nzStringTemplateOutlet="_extra">{{ _extra }}</ng-container>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "directive", type: NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "directive", type: NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SEComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SEComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'se', exportAs: 'se', host: {
-                        '[style.padding-left.px]': 'paddingValue',
-                        '[style.padding-right.px]': 'paddingValue',
-                        '[class.se__hide-label]': 'hideLabel',
-                        '[class.ant-form-item-has-error]': 'invalid',
-                        '[class.ant-form-item-with-help]': 'showErr'
-                    }, providers: [NzFormStatusService], animations: [helpMotion], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NzStringTemplateOutletDirective, NzTooltipDirective, NzIconDirective, CdkObserveContent], template: "<div class=\"ant-form-item-label\" [class.se__nolabel]=\"hideLabel || !label\" [style.width.px]=\"_labelWidth\">\n  @if (label) {\n    <label [attr.for]=\"_id\" class=\"se__label\" [class.ant-form-item-required]=\"required\" [class.se__no-colon]=\"_noColon\">\n      <span class=\"se__label-text\">\n        <ng-container *nzStringTemplateOutlet=\"label\">{{ label }}</ng-container>\n      </span>\n      @if (optional || optionalHelp) {\n        <span class=\"se__label-optional\" [class.se__label-optional-no-text]=\"!optional\">\n          <ng-container *nzStringTemplateOutlet=\"optional\">{{ optional }}</ng-container>\n          @if (optionalHelp) {\n            <nz-icon\n              nz-tooltip\n              [nzTooltipTitle]=\"optionalHelp\"\n              [nzTooltipColor]=\"optionalHelpColor\"\n              nzType=\"question-circle\"\n            />\n          }\n        </span>\n      }\n    </label>\n  }\n</div>\n<div class=\"ant-form-item-control se__control\">\n  <div class=\"ant-form-item-control-input {{ controlClass }}\">\n    <div class=\"ant-form-item-control-input-content\" (cdkObserveContent)=\"checkContent()\" #contentElement>\n      <ng-content />\n    </div>\n  </div>\n  @if (showErr) {\n    <div @helpMotion class=\"ant-form-item-explain ant-form-item-explain-connected\">\n      <div role=\"alert\" class=\"ant-form-item-explain-error\">\n        <ng-container *nzStringTemplateOutlet=\"_error\">{{ _error }}</ng-container>\n      </div>\n    </div>\n  }\n  @if (extra && !compact) {\n    <div class=\"ant-form-item-extra\">\n      <ng-container *nzStringTemplateOutlet=\"extra\">{{ extra }}</ng-container>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { ngModel: [{
-                type: ContentChild,
-                args: [NgModel, { static: true }]
-            }], formControlName: [{
-                type: ContentChild,
-                args: [FormControlName, { static: true }]
-            }], contentElement: [{
-                type: ViewChild,
-                args: ['contentElement', { static: true }]
-            }], optional: [{
-                type: Input
-            }], optionalHelp: [{
-                type: Input
-            }], optionalHelpColor: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], extra: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], col: [{
-                type: Input,
-                args: [{ transform: (v) => (v == null ? null : numberAttribute(v)) }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], controlClass: [{
-                type: Input
-            }], line: [{
-                type: Input,
-                args: [{ transform: (v) => (v == null ? null : booleanAttribute(v)) }]
-            }], labelWidth: [{
-                type: Input,
-                args: [{ transform: (v) => (v == null ? null : numberAttribute(v)) }]
-            }], noColon: [{
-                type: Input,
-                args: [{ transform: (v) => (v == null ? null : booleanAttribute(v)) }]
-            }], hideLabel: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], id: [{
-                type: Input
-            }] } });
+            args: [{
+                    selector: 'se',
+                    exportAs: 'se',
+                    template: `
+    @let _label = label();
+    <div class="ant-form-item-label" [class.se__nolabel]="hideLabel() || !_label" [style.width.px]="_labelWidth()">
+      @if (_label) {
+        <label
+          [attr.for]="_id()"
+          class="se__label"
+          [class.ant-form-item-required]="_required()"
+          [class.se__no-colon]="_noColon()"
+        >
+          <span class="se__label-text">
+            <ng-container *nzStringTemplateOutlet="_label">{{ _label }}</ng-container>
+          </span>
+          @let _optional = optional();
+          @let _optionalHelp = optionalHelp();
+          @if (_optional || _optionalHelp) {
+            <span class="se__label-optional" [class.se__label-optional-no-text]="!_optional">
+              <ng-container *nzStringTemplateOutlet="_optional">{{ _optional }}</ng-container>
+              @if (_optionalHelp) {
+                <nz-icon
+                  nz-tooltip
+                  [nzTooltipTitle]="_optionalHelp"
+                  [nzTooltipColor]="optionalHelpColor()"
+                  nzType="question-circle"
+                />
+              }
+            </span>
+          }
+        </label>
+      }
+    </div>
+    <div class="ant-form-item-control se__control">
+      <div class="ant-form-item-control-input" [class]="controlClass()">
+        <div class="ant-form-item-control-input-content" (cdkObserveContent)="checkContent()" #contentElement>
+          <ng-content />
+        </div>
+      </div>
+      @if (showErr()) {
+        <div
+          [animate.enter]="nzValidateAnimationEnter()"
+          [animate.leave]="nzValidateAnimationLeave()"
+          class="ant-form-item-explain ant-form-item-explain-connected"
+        >
+          <div role="alert" class="ant-form-item-explain-error">
+            <ng-container *nzStringTemplateOutlet="errorText()">{{ errorText() }}</ng-container>
+          </div>
+        </div>
+      }
+      @let _extra = extra();
+      @if (_extra && !compact()) {
+        <div class="ant-form-item-extra">
+          <ng-container *nzStringTemplateOutlet="_extra">{{ _extra }}</ng-container>
+        </div>
+      }
+    </div>
+  `,
+                    host: {
+                        '[style.padding-left.px]': 'paddingValue()',
+                        '[style.padding-right.px]': 'paddingValue()',
+                        '[class.se__hide-label]': 'hideLabel()',
+                        '[class.ant-form-item-has-error]': 'invalid()',
+                        '[class.ant-form-item-with-help]': 'showErr()',
+                        '[class.se__item-empty]': 'empty()',
+                        '[class]': 'cls()'
+                    },
+                    providers: [NzFormStatusService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [NzStringTemplateOutletDirective, NzTooltipDirective, NzIconDirective, CdkObserveContent]
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngModel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgModel), { isSignal: true }] }], formControlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }], contentElement: [{ type: i0.ViewChild, args: ['contentElement', { isSignal: true }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalHelp", required: false }] }], optionalHelpColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalHelpColor", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], extra: [{ type: i0.Input, args: [{ isSignal: true, alias: "extra", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlClass", required: false }] }], line: [{ type: i0.Input, args: [{ isSignal: true, alias: "line", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], noColon: [{ type: i0.Input, args: [{ isSignal: true, alias: "noColon", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 const COMPONENTS = [SEContainerComponent, SEComponent, SETitleComponent];
 class SEModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SEModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SEModule, imports: [CommonModule, NzTooltipModule, NzIconModule, NzOutletModule, SEContainerComponent, SEComponent, SETitleComponent], exports: [SEContainerComponent, SEComponent, SETitleComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SEModule, imports: [CommonModule, NzTooltipModule, NzIconModule, NzOutletModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SEModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: SEModule, imports: [CommonModule, NzTooltipModule, NzIconModule, NzOutletModule, SEContainerComponent, SEComponent, SETitleComponent], exports: [SEContainerComponent, SEComponent, SETitleComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SEModule, imports: [CommonModule, NzTooltipModule, NzIconModule, NzOutletModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SEModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SEModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, NzTooltipModule, NzIconModule, NzOutletModule, ...COMPONENTS],