@ng-nest/ui 17.0.12 → 18.0.1

package/fesm2022/ng-nest-ui-form.mjs

@@ -1,32 +1,33 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XWithConfig, XInputNumber, XIdentity, XIsEmpty, XConfigService, XIsFunction, XIsChange } from '@ng-nest/ui/core';
+import { input, output, Component, model, inject, ViewContainerRef, signal, viewChild, effect, OutputEmitterRef, ViewEncapsulation, ChangeDetectionStrategy, computed, NgModule } from '@angular/core';
+import { XToCssPixelValue, XToNumber, XToBoolean, XIdentity, XIsEmpty, XIsFunction, XIsChange } from '@ng-nest/ui/core';
 import * as i1 from '@angular/forms';
-import { UntypedFormGroup, UntypedFormControl, Validators, FormControlName, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { XFormProp, XFormInputValidator } from '@ng-nest/ui/base-form';
+import { UntypedFormGroup, UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { XFormControlFunction, XFormInputValidator } from '@ng-nest/ui/base-form';
 import { XRowComponent, XColComponent } from '@ng-nest/ui/layout';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { Subject } from 'rxjs';
-import { takeUntil, map } from 'rxjs/operators';
-import { XI18nService } from '@ng-nest/ui/i18n';
+import { map, takeUntil } from 'rxjs/operators';
+import { XI18nService, zh_CN } from '@ng-nest/ui/i18n';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/cdk/portal';
+import { CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { XInputComponent } from '@ng-nest/ui/input';
-import { XSelectComponent } from '@ng-nest/ui/select';
+import { XAutoCompleteComponent } from '@ng-nest/ui/auto-complete';
 import { XCascadeComponent } from '@ng-nest/ui/cascade';
 import { XCheckboxComponent } from '@ng-nest/ui/checkbox';
 import { XColorPickerComponent } from '@ng-nest/ui/color-picker';
 import { XDatePickerComponent } from '@ng-nest/ui/date-picker';
+import { XFindComponent } from '@ng-nest/ui/find';
 import { XInputNumberComponent } from '@ng-nest/ui/input-number';
 import { XRadioComponent } from '@ng-nest/ui/radio';
 import { XRateComponent } from '@ng-nest/ui/rate';
+import { XSelectComponent } from '@ng-nest/ui/select';
 import { XSliderSelectComponent } from '@ng-nest/ui/slider-select';
 import { XSwitchComponent } from '@ng-nest/ui/switch';
-import * as i2 from '@ng-nest/ui/time-picker';
-import { XTimePickerModule } from '@ng-nest/ui/time-picker';
 import { XTextareaComponent } from '@ng-nest/ui/textarea';
-import { XFindComponent } from '@ng-nest/ui/find';
-import { XAutoCompleteComponent } from '@ng-nest/ui/auto-complete';
+import { XTimePickerComponent, XTimePickerModule } from '@ng-nest/ui/time-picker';
 import { XIconComponent } from '@ng-nest/ui/icon';
 
 /**
@@ -35,77 +36,72 @@ import { XIconComponent } from '@ng-nest/ui/icon';
  * @decorator component
  */
 const XFormPrefix = 'x-form';
-const X_CONFIG_NAME = 'form';
+const X_FORM_CONFIG_NAME = 'form';
 /**
  * Form Property
  */
-class XFormProperty extends XFormProp {
+class XFormProperty extends XFormControlFunction(X_FORM_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 表单 FormGroup
          * @en_US Form FormGroup
+         * @default new UntypedFormGroup({})
          */
-        this.formGroup = new UntypedFormGroup({});
+        this.formGroup = input(new UntypedFormGroup({}));
+        /**
+         * @zh_CN 表单名称
+         * @en_US Form name
+         */
+        this.title = input('');
+        /**
+         * @zh_CN 控件间距
+         * @en_US Control spacing
+         */
+        this.space = input(this.config?.space ?? '1.75rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 控件宽度，24栅格
+         * @en_US Control width, 24 grid
+         */
+        this.span = input(null, { transform: XToNumber });
+        /**
+         * @zh_CN 标签后缀
+         * @en_US Label suffix
+         */
+        this.labelSuffix = input(this.config?.labelSuffix ?? '');
         /**
          * @zh_CN 表单控件
          * @en_US Form control
          */
-        this.controls = [];
+        this.controls = input([]);
         /**
          * @zh_CN 表单宽度
          * @en_US Form width
          */
-        this.width = '100%';
+        this.width = input(this.config?.width ?? '100%', { transform: XToCssPixelValue });
         /**
          * @zh_CN 自定义模板
          * @en_US Custom template
          */
-        this.controlTpl = {};
+        this.controlTpl = input({});
+        /**
+         * @zh_CN 禁用
+         * @en_US Disabled
+         */
+        this.disabled = input(false, { transform: XToBoolean });
         /**
          * @zh_CN Submit
          * @en_US Submit
          */
-        this.xSubmit = new EventEmitter();
+        this.xSubmit = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFormProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XFormProperty, selector: "x-form-property", inputs: { formGroup: "formGroup", title: "title", space: "space", span: "span", labelSuffix: "labelSuffix", controls: "controls", width: "width", controlTpl: "controlTpl" }, outputs: { xSubmit: "xSubmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFormProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XFormProperty, selector: "x-form-property", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null }, labelSuffix: { classPropertyName: "labelSuffix", publicName: "labelSuffix", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, controlTpl: { classPropertyName: "controlTpl", publicName: "controlTpl", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { xSubmit: "xSubmit" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 1),
-    XInputNumber()
-], XFormProperty.prototype, "space", void 0);
-__decorate([
-    XInputNumber()
-], XFormProperty.prototype, "span", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '')
-], XFormProperty.prototype, "labelSuffix", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '100%')
-], XFormProperty.prototype, "width", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFormProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFormProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XFormPrefix}-property`, template: '' }]
-        }], propDecorators: { formGroup: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], space: [{
-                type: Input
-            }], span: [{
-                type: Input
-            }], labelSuffix: [{
-                type: Input
-            }], controls: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], controlTpl: [{
-                type: Input
-            }], xSubmit: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * @zh_CN 控件对象
  * @en_US Control object
@@ -128,15 +124,23 @@ const XControlPrefix = 'x-control';
  * Control Property
  */
 class XControlProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XControlProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XControlProperty, selector: "x-control-property", inputs: { option: "option" }, ngImport: i0, template: '', isInline: true }); }
+    constructor() {
+        /**
+         * @zh_CN 控件对象
+         * @en_US Control object
+         */
+        this.option = model.required({});
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XControlProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XControlProperty, selector: "x-control-property", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { option: "optionChange" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XControlProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XControlProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XControlPrefix}-property`, template: '' }]
-        }], propDecorators: { option: [{
-                type: Input
-            }] } });
+        }] });
+/**
+ * Form control
+ */
 class XFormControl extends UntypedFormControl {
     constructor() {
         super(...arguments);
@@ -225,125 +229,150 @@ class XAutoCompleteControl extends XControl {
 
 class XControlComponent extends XControlProperty {
     constructor() {
-        super(...arguments);
-        this.locale = {};
-        this._sharedProps = ['span', 'direction', 'justify', 'align', 'labelWidth', 'labelAlign'];
-        this._changeProps = ['label', ...this._sharedProps];
-        this._validatorFns = [];
-        this._unSubject = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
+        super();
         this.i18n = inject(XI18nService);
-        this.configService = inject(XConfigService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this._sharedProps = signal(['span', 'direction', 'justify', 'align', 'labelWidth', 'labelAlign']);
+        this.validatorFns = signal([]);
+        this.formControl = signal(null);
+        this._unSubject = new Subject();
+        this.value = signal(null);
+        this.form = inject(XFormComponent, { optional: true });
+        this.locale = toSignal(this.i18n.localeChange.pipe(map((x) => x.form)), { initialValue: zh_CN.form });
+        this.portal = signal(null);
+        this.portalOutlet = viewChild.required(CdkPortalOutlet);
+        effect(() => {
+            this.formControl()?.setValue(this.value());
+        }, { allowSignalWrites: true });
     }
     ngOnInit() {
-        this.option = { ...this.option };
-        this.setProps();
-        if (XIsEmpty(this.option.label))
-            this.option.label = '';
-        this.option.label = `${this.option.label}${this.form.labelSuffix}`;
-        this._control = this.createControl(this.option);
-        this._formControl = new UntypedFormControl(this._control.value, {
-            nonNullable: this._control.nonNullable
-        });
+        this.setOption();
+        this.formControl.set(new UntypedFormControl(this.option().value, {
+            nonNullable: this.option().nonNullable
+        }));
         this.setValidators();
-        this._formControl.statusChanges.pipe(takeUntil(this._unSubject)).subscribe((x) => {
+        this.formControl()
+            .statusChanges.pipe(takeUntil(this._unSubject))
+            .subscribe((x) => {
             this.setMessages(x);
         });
-        this._control.setValidators = () => this.setValidators();
-        this.form.formGroup.addControl(this._control.id, this._formControl);
-        this.option.change = () => {
-            this._changeProps.forEach((x) => {
-                if (this.control.valueAccessor && this.option[x]) {
-                    this.control.valueAccessor[x] = this.option[x];
-                }
-            });
-            this.form.controlComponents[this._control.id].formControlChanges();
-        };
-        this.i18n.localeChange
-            .pipe(map((x) => x.form), takeUntil(this._unSubject))
+        this.formControl()
+            .valueChanges.pipe(takeUntil(this._unSubject))
             .subscribe((x) => {
-            this.locale = x;
-            this.cdr.markForCheck();
+            this.value.set(x);
         });
+        this.option().setValidators = () => this.setValidators();
+        this.form.formGroup().addControl(this.option().id, this.formControl());
     }
     ngAfterViewInit() {
-        Object.assign(this.control.valueAccessor, this._control);
-        this.form.controlTypes[this._control.id] = this._control;
-        this.form.controlComponents[this._control.id] = this.control
-            .valueAccessor;
-        this.form.controlComponents[this._control.id].formControlChanges();
+        this.componentPortal = this.createComponentPortal(this.option());
+        this.componentRef = this.portalOutlet().attachComponentPortal(this.componentPortal);
+        for (let key in this.option()) {
+            if (key in this.componentRef.instance) {
+                const val = this.componentRef.instance[key];
+                if (XIsFunction(val)) {
+                    const valSymbols = Object.getOwnPropertySymbols(val);
+                    if (valSymbols.length !== 1)
+                        break;
+                    const valSymbol = val[valSymbols[0]];
+                    if (valSymbol.hasOwnProperty('transformFn')) {
+                        // input
+                        this.componentRef.setInput(key, this.option()[key]);
+                    }
+                    else {
+                        // signal
+                        val.set(this.option()[key]);
+                    }
+                }
+                else if (val instanceof OutputEmitterRef) {
+                    // output
+                    val.subscribe((x) => this.option()[key](x));
+                }
+            }
+        }
+        // value
+        this.value = this.componentRef.instance['value'];
+        this.form.controlTypes[this.option().id] = this.option();
+        this.form.controlComponents[this.option().id] = this.componentRef.instance;
     }
     ngOnDestroy() {
         this._unSubject.next();
         this._unSubject.unsubscribe();
     }
     setValidators() {
-        this._validatorFns = [];
-        if (this._control.disabled || this.form.disabled) {
-            this._formControl.disable();
+        this.validatorFns.set([]);
+        if (this.option().disabled || this.form.disabled()) {
+            this.formControl().disable();
         }
         else {
-            this._formControl.enable();
+            this.formControl().enable();
         }
-        if (this._control.required && !this.form.disabled) {
-            this._validatorFns = [...this._validatorFns, Validators.required];
+        if (this.option().required && !this.form.disabled()) {
+            this.validatorFns.update((x) => [...x, Validators.required]);
         }
-        if (this._control.pattern) {
+        if (this.option().pattern) {
             this.setPattern();
         }
-        if (XIsFunction(this._control.inputValidator)) {
-            this._validatorFns = [
-                ...this._validatorFns,
-                XFormInputValidator(this._control.inputValidator)
-            ];
+        if (XIsFunction(this.option().inputValidator)) {
+            this.validatorFns.update((x) => [...x, XFormInputValidator(this.option().inputValidator)]);
         }
-        this._formControl.setValidators(this._validatorFns);
-        this._formControl.updateValueAndValidity();
-    }
-    setProps() {
-        for (let prop of this._sharedProps) {
-            if (XIsEmpty(this.option[prop]))
-                this.option[prop] = this.form[prop];
+        this.formControl().setValidators(this.validatorFns());
+        this.formControl().updateValueAndValidity();
+    }
+    setOption() {
+        for (let prop of this._sharedProps()) {
+            if (XIsEmpty(this.option()[prop])) {
+                this.option.update((x) => {
+                    x[prop] = this.form[prop]();
+                    return x;
+                });
+            }
         }
+        if (XIsEmpty(this.option().label)) {
+            this.option.update((x) => {
+                x.label = '';
+                return x;
+            });
+        }
+        this.option.update((x) => {
+            x.label = `${this.option().label}${this.form.labelSuffix()}`;
+            return x;
+        });
     }
     setPattern() {
-        if (Array.isArray(this._control.pattern)) {
-            for (const pt of this._control.pattern) {
-                this._validatorFns = [...this._validatorFns, Validators.pattern(pt)];
+        const pattern = this.option().pattern;
+        if (Array.isArray(pattern)) {
+            for (const pt of pattern) {
+                this.validatorFns.update((x) => [...x, Validators.pattern(pt)]);
             }
         }
         else {
-            this._validatorFns = [
-                ...this._validatorFns,
-                Validators.pattern(this._control.pattern)
-            ];
+            this.validatorFns.update((x) => [...x, Validators.pattern(pattern)]);
         }
     }
     getPatternMsg(pattern) {
-        if (Array.isArray(this._control.pattern)) {
-            return this._control.message[this._control.pattern.findIndex((x) => String(x) === pattern)];
+        const controlPattern = this.option().pattern;
+        if (Array.isArray(controlPattern)) {
+            return this.option().message[controlPattern.findIndex((x) => String(x) === pattern)];
         }
         else {
-            return this._control.message;
+            return this.option().message;
         }
     }
     setMessages(state) {
-        let control = this._formControl;
-        if (state === 'INVALID' && this._formControl.errors !== null) {
+        let control = this.formControl();
+        if (state === 'INVALID' && this.formControl().errors !== null) {
             let messages = [];
             for (const key in control.errors) {
-                const label = this._control.label || this._control.id;
+                const label = this.option().label || this.option().id;
                 if (key === 'required') {
-                    messages = [...messages, `${label} ${this.locale?.required || 'required'}`];
+                    messages = [...messages, `${label} ${this.locale().required || 'required'}`];
                 }
                 else if (key === 'pattern') {
-                    messages = [
-                        ...messages,
-                        `${label} ${this.getPatternMsg(control.errors[key].requiredPattern)}`
-                    ];
+                    messages = [...messages, `${label} ${this.getPatternMsg(control.errors[key].requiredPattern)}`];
                 }
                 else if (key === 'inputValidator') {
-                    messages = [...messages, `${label} ${this._control.message}`];
+                    messages = [...messages, `${label} ${this.option().message}`];
                 }
             }
             control.messages = messages;
@@ -352,50 +381,51 @@ class XControlComponent extends XControlProperty {
             control.messages = [];
         }
     }
-    createControl(option) {
+    createComponentPortal(option) {
         switch (option.control) {
             case 'input':
-                return new XInputControl(option);
+                return new ComponentPortal(XInputComponent, this.viewContainerRef);
             case 'select':
-                return new XSelectControl(option);
+                return new ComponentPortal(XSelectComponent, this.viewContainerRef);
             case 'checkbox':
-                return new XCheckboxControl(option);
+                return new ComponentPortal(XCheckboxComponent, this.viewContainerRef);
             case 'radio':
-                return new XRadioControl(option);
+                return new ComponentPortal(XRadioComponent, this.viewContainerRef);
             case 'switch':
-                return new XSwitchControl(option);
+                return new ComponentPortal(XSwitchComponent, this.viewContainerRef);
             case 'rate':
-                return new XRateControl(option);
+                return new ComponentPortal(XRateComponent, this.viewContainerRef);
             case 'date-picker':
-                return new XDatePickerControl(option);
+                return new ComponentPortal(XDatePickerComponent, this.viewContainerRef);
             case 'time-picker':
-                return new XTimePickerControl(option);
+                return new ComponentPortal(XTimePickerComponent, this.viewContainerRef);
             case 'input-number':
-                return new XInputNumberControl(option);
+                return new ComponentPortal(XInputNumberComponent, this.viewContainerRef);
             case 'slider-select':
-                return new XSliderSelectControl(option);
+                return new ComponentPortal(XSliderSelectComponent, this.viewContainerRef);
             case 'cascade':
-                return new XCascadeControl(option);
+                return new ComponentPortal(XCascadeComponent, this.viewContainerRef);
             case 'color-picker':
-                return new XColorPickerControl(option);
+                return new ComponentPortal(XColorPickerComponent, this.viewContainerRef);
             case 'textarea':
-                return new XTextareaControl(option);
+                return new ComponentPortal(XTextareaComponent, this.viewContainerRef);
             case 'find':
-                return new XFindControl(option);
+                return new ComponentPortal(XFindComponent, this.viewContainerRef);
             case 'auto-complete':
-                return new XAutoCompleteControl(option);
+                return new ComponentPortal(XAutoCompleteComponent, this.viewContainerRef);
             default:
-                return new XInputControl(option);
+                return new ComponentPortal(XInputComponent, this.viewContainerRef);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XControlComponent, isStandalone: true, selector: "x-control", inputs: { option: "option", form: "form" }, viewQueries: [{ propertyName: "control", first: true, predicate: FormControlName, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"x-control\" [formGroup]=\"form.formGroup\">\r\n  @switch (option.control) {\r\n    @case ('input') {\r\n      <x-input [formControlName]=\"option.id\" (clearEmit)=\"option.clearClick && option.clearClick($event)\"></x-input>\r\n    }\r\n    @case ('select') {\r\n      <x-select [formControlName]=\"option.id\"></x-select>\r\n    }\r\n    @case ('cascade') {\r\n      <x-cascade [formControlName]=\"option.id\" (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"></x-cascade>\r\n    }\r\n    @case ('checkbox') {\r\n      <x-checkbox [formControlName]=\"option.id\"></x-checkbox>\r\n    }\r\n    @case ('color-picker') {\r\n      <x-color-picker [formControlName]=\"option.id\"></x-color-picker>\r\n    }\r\n    @case ('date-picker') {\r\n      <x-date-picker\r\n        [formControlName]=\"option.id\"\r\n        (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"\r\n      ></x-date-picker>\r\n    }\r\n    @case ('input-number') {\r\n      <x-input-number [formControlName]=\"option.id\"></x-input-number>\r\n    }\r\n    @case ('radio') {\r\n      <x-radio [formControlName]=\"option.id\"></x-radio>\r\n    }\r\n    @case ('rate') {\r\n      <x-rate [formControlName]=\"option.id\"></x-rate>\r\n    }\r\n    @case ('slider-select') {\r\n      <x-slider-select [formControlName]=\"option.id\"></x-slider-select>\r\n    }\r\n    @case ('switch') {\r\n      <x-switch [formControlName]=\"option.id\"></x-switch>\r\n    }\r\n    @case ('time-picker') {\r\n      <x-time-picker [formControlName]=\"option.id\"></x-time-picker>\r\n    }\r\n    @case ('textarea') {\r\n      <x-textarea\r\n        [formControlName]=\"option.id\"\r\n        (clearEmit)=\"option.clearClick && option.clearClick($event)\"\r\n      ></x-textarea>\r\n    }\r\n    @case ('auto-complete') {\r\n      <x-auto-complete\r\n        [formControlName]=\"option.id\"\r\n        (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"\r\n      ></x-auto-complete>\r\n    }\r\n    @case ('find') {\r\n      <x-find [formControlName]=\"option.id\"></x-find>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".x-control{margin:0;padding:0}.x-control x-input,.x-control x-select,.x-control x-date-picker,.x-control x-time-picker,.x-control x-input-number,.x-control x-slider-select,.x-control x-cascade,.x-control x-color-picker,.x-control x-textarea,.x-control x-auto-complete{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "component", type: XSelectComponent, selector: "x-select" }, { kind: "component", type: XCascadeComponent, selector: "x-cascade" }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: XColorPickerComponent, selector: "x-color-picker" }, { kind: "component", type: XDatePickerComponent, selector: "x-date-picker" }, { kind: "component", type: XInputNumberComponent, selector: "x-input-number" }, { kind: "component", type: XRadioComponent, selector: "x-radio" }, { kind: "component", type: XRateComponent, selector: "x-rate" }, { kind: "component", type: XSliderSelectComponent, selector: "x-slider-select" }, { kind: "component", type: XSwitchComponent, selector: "x-switch" }, { kind: "ngmodule", type: XTimePickerModule }, { kind: "component", type: i2.XTimePickerComponent, selector: "x-time-picker" }, { kind: "component", type: XTextareaComponent, selector: "x-textarea" }, { kind: "component", type: XFindComponent, selector: "x-find" }, { kind: "component", type: XAutoCompleteComponent, selector: "x-auto-complete" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", type: XControlComponent, isStandalone: true, selector: "x-control", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"x-control\" [formGroup]=\"form.formGroup()\">\r\n  <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-control{margin:0;padding:0}.x-control x-input,.x-control x-select,.x-control x-date-picker,.x-control x-time-picker,.x-control x-input-number,.x-control x-slider-select,.x-control x-cascade,.x-control x-color-picker,.x-control x-textarea,.x-control x-auto-complete{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: XTimePickerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-control', standalone: true, imports: [
                         FormsModule,
                         ReactiveFormsModule,
+                        PortalModule,
                         XInputComponent,
                         XSelectComponent,
                         XCascadeComponent,
@@ -411,67 +441,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                         XTextareaComponent,
                         XFindComponent,
                         XAutoCompleteComponent
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-control\" [formGroup]=\"form.formGroup\">\r\n  @switch (option.control) {\r\n    @case ('input') {\r\n      <x-input [formControlName]=\"option.id\" (clearEmit)=\"option.clearClick && option.clearClick($event)\"></x-input>\r\n    }\r\n    @case ('select') {\r\n      <x-select [formControlName]=\"option.id\"></x-select>\r\n    }\r\n    @case ('cascade') {\r\n      <x-cascade [formControlName]=\"option.id\" (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"></x-cascade>\r\n    }\r\n    @case ('checkbox') {\r\n      <x-checkbox [formControlName]=\"option.id\"></x-checkbox>\r\n    }\r\n    @case ('color-picker') {\r\n      <x-color-picker [formControlName]=\"option.id\"></x-color-picker>\r\n    }\r\n    @case ('date-picker') {\r\n      <x-date-picker\r\n        [formControlName]=\"option.id\"\r\n        (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"\r\n      ></x-date-picker>\r\n    }\r\n    @case ('input-number') {\r\n      <x-input-number [formControlName]=\"option.id\"></x-input-number>\r\n    }\r\n    @case ('radio') {\r\n      <x-radio [formControlName]=\"option.id\"></x-radio>\r\n    }\r\n    @case ('rate') {\r\n      <x-rate [formControlName]=\"option.id\"></x-rate>\r\n    }\r\n    @case ('slider-select') {\r\n      <x-slider-select [formControlName]=\"option.id\"></x-slider-select>\r\n    }\r\n    @case ('switch') {\r\n      <x-switch [formControlName]=\"option.id\"></x-switch>\r\n    }\r\n    @case ('time-picker') {\r\n      <x-time-picker [formControlName]=\"option.id\"></x-time-picker>\r\n    }\r\n    @case ('textarea') {\r\n      <x-textarea\r\n        [formControlName]=\"option.id\"\r\n        (clearEmit)=\"option.clearClick && option.clearClick($event)\"\r\n      ></x-textarea>\r\n    }\r\n    @case ('auto-complete') {\r\n      <x-auto-complete\r\n        [formControlName]=\"option.id\"\r\n        (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"\r\n      ></x-auto-complete>\r\n    }\r\n    @case ('find') {\r\n      <x-find [formControlName]=\"option.id\"></x-find>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".x-control{margin:0;padding:0}.x-control x-input,.x-control x-select,.x-control x-date-picker,.x-control x-time-picker,.x-control x-input-number,.x-control x-slider-select,.x-control x-cascade,.x-control x-color-picker,.x-control x-textarea,.x-control x-auto-complete{width:100%}\n"] }]
-        }], propDecorators: { option: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], control: [{
-                type: ViewChild,
-                args: [FormControlName]
-            }] } });
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-control\" [formGroup]=\"form.formGroup()\">\r\n  <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-control{margin:0;padding:0}.x-control x-input,.x-control x-select,.x-control x-date-picker,.x-control x-time-picker,.x-control x-input-number,.x-control x-slider-select,.x-control x-cascade,.x-control x-color-picker,.x-control x-textarea,.x-control x-auto-complete{width:100%}\n"] }]
+        }], ctorParameters: () => [] });
 
 class XFormComponent extends XFormProperty {
     constructor() {
         super(...arguments);
+        this.controlsType = computed(() => {
+            const controls = this.controls();
+            return controls && controls.length > 0 && controls[0].controls ? 'rows' : 'controls';
+        });
         this.controlComponents = {};
         this.controlTypes = {};
         this.formId = Number(Math.random().toString().substring(2, 6) + Date.now()).toString(36);
-        this.configService = inject(XConfigService);
+        this.classMap = computed(() => ({
+            [`${XFormPrefix}-${this.controlsType()}`]: true
+        }));
     }
     ngOnChanges(changes) {
         const { disabled } = changes;
         XIsChange(disabled) && this.setDisabled();
     }
-    ngOnInit() {
-        this.setControls();
-        this.setClassMap();
-    }
     ngAfterViewInit() {
         this.setDisabled();
     }
-    setControls() {
-        if (this.controls && this.controls.length > 0) {
-            this.controlsType = this.controls[0].controls ? 'rows' : 'controls';
-        }
-    }
-    setClassMap() {
-        this.classMap[`${XFormPrefix}-${this.controlsType}`] = true;
-    }
     setDisabled() {
         if (Object.keys(this.controlComponents).length === 0)
             return;
-        if (this.disabled) {
+        if (this.disabled()) {
             for (let key in this.controlComponents) {
                 let [control, type] = [this.controlComponents[key], this.controlTypes[key]];
-                control.disabled = true;
-                control.required = false;
-                delete control.pattern;
+                control.disabledSignal.set(true);
+                control.requiredSignal.set(false);
+                control.patternSignal.set([]);
                 type.setValidators && type.setValidators();
-                control.formControlChanges();
             }
         }
         else {
             for (let key in this.controlComponents) {
                 let [control, type] = [this.controlComponents[key], this.controlTypes[key]];
-                control.disabled = type.disabled;
-                control.required = type.required;
-                control.pattern = type.pattern;
+                control.disabledSignal.set(type.disabled);
+                control.requiredSignal.set(type.required);
+                control.patternSignal.set(type.pattern);
                 type.setValidators && type.setValidators();
-                control.formControlChanges();
             }
         }
-        this.formGroup.updateValueAndValidity();
+        this.formGroup().updateValueAndValidity();
     }
     setValidator() {
         for (let key in this.controlComponents) {
@@ -484,30 +499,30 @@ class XFormComponent extends XFormProperty {
     resetValidator() {
         for (let key in this.controlComponents) {
             let [control] = [this.controlComponents[key]];
-            control.validator = false;
+            control.validatorSignal.set(false);
             control.cdr.detectChanges();
         }
     }
     getValidatorMessages() {
         let result = [];
-        if (this.formGroup.valid)
+        if (this.formGroup().valid)
             return result;
         else {
             const eachControls = (array) => {
                 for (const ctr of array) {
-                    const formCtr = this.formGroup.controls[ctr.id];
+                    const formCtr = this.formGroup().controls[ctr.id];
                     if (formCtr && formCtr.invalid) {
                         result = [...result, ...formCtr.messages];
                     }
                 }
             };
-            if (this.controlsType === 'rows') {
-                for (const row of this.controls) {
+            if (this.controlsType() === 'rows') {
+                for (const row of this.controls()) {
                     eachControls(row.controls);
                 }
             }
             else {
-                eachControls(this.controls);
+                eachControls(this.controls());
             }
         }
         return result;
@@ -516,10 +531,10 @@ class XFormComponent extends XFormProperty {
         this.setValidator();
         this.xSubmit.emit(event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XFormComponent, isStandalone: true, selector: "x-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form\r\n  #form\r\n  class=\"x-form\"\r\n  [class.x-form-has-content]=\"content.innerHTML.trim()\"\r\n  [formGroup]=\"formGroup\"\r\n  [style.width]=\"width\"\r\n  [style.padding-bottom.rem]=\"controlsType === 'controls' ? this.space : 0\"\r\n  [ngClass]=\"classMap\"\r\n  (ngSubmit)=\"onSubmit($event)\"\r\n>\r\n  @switch (controlsType) {\r\n    @case ('controls') {\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: controls }\"> </ng-container>\r\n    }\r\n    @case ('rows') {\r\n      <ng-container *ngTemplateOutlet=\"rowsTemp; context: { rows: controls }\"></ng-container>\r\n    }\r\n  }\r\n  <div class=\"x-form-content\" #content><ng-content></ng-content></div>\r\n</form>\r\n\r\n<ng-template #rowsTemp let-rows=\"rows\">\r\n  @for (row of rows; track row.id) {\r\n    <div class=\"x-form-category\" [hidden]=\"row.hidden\">\r\n      <ng-container *ngTemplateOutlet=\"titleTemp; context: { row: row }\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: row.controls }\"></ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #controlsTemp let-controls=\"controls\">\r\n  <x-row [space]=\"space\">\r\n    @for (control of controls; track control.id) {\r\n      <x-col [style.padding-top.rem]=\"space\" [span]=\"!control.span ? span : control.span\" [hidden]=\"control.hidden\">\r\n        <ng-container *xOutlet=\"controlTpl[control.id]; context: { $option: control }\">\r\n          <x-control [option]=\"control\" [form]=\"this\"></x-control>\r\n        </ng-container>\r\n      </x-col>\r\n    }\r\n  </x-row>\r\n</ng-template>\r\n\r\n<ng-template #titleTemp let-row=\"row\">\r\n  <label class=\"x-form-title\">\r\n    @if (row.icon) {\r\n      <x-icon [type]=\"row.icon\"></x-icon>\r\n    }\r\n    <span>{{ row.title }}</span>\r\n  </label>\r\n</ng-template>\r\n", styles: [".x-form{margin:0;padding:0;display:inline-block;overflow:hidden}.x-form-title{display:inline-flex;align-items:center;font-size:var(--x-font-size-medium)}.x-form-title>x-icon{margin-right:.25rem}.x-form-category{width:100%;overflow:hidden}.x-form-rows>x-row[hidden]{display:none}.x-form-rows>x-row:not(:first-child){margin-top:1.5rem}.x-form x-col[hidden]{display:none}.x-form-has-content .x-form-content{margin-top:1.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: XRowComponent, selector: "x-row" }, { kind: "component", type: XColComponent, selector: "x-col" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XControlComponent, selector: "x-control", inputs: ["option", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XFormComponent, isStandalone: true, selector: "x-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form\r\n  #form\r\n  class=\"x-form\"\r\n  [class.x-form-has-content]=\"content.innerHTML.trim()\"\r\n  [formGroup]=\"formGroup()\"\r\n  [style.width]=\"width()\"\r\n  [style.padding-bottom]=\"controlsType() === 'controls' ? this.space() : '0px'\"\r\n  [ngClass]=\"classMap()\"\r\n  (ngSubmit)=\"onSubmit($event)\"\r\n>\r\n  @switch (controlsType()) {\r\n    @case ('controls') {\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: controls() }\"> </ng-container>\r\n    }\r\n    @case ('rows') {\r\n      <ng-container *ngTemplateOutlet=\"rowsTemp; context: { rows: controls() }\"></ng-container>\r\n    }\r\n  }\r\n  <div class=\"x-form-content\" #content><ng-content></ng-content></div>\r\n</form>\r\n\r\n<ng-template #rowsTemp let-rows=\"rows\">\r\n  @for (row of rows; track row) {\r\n    <div class=\"x-form-category\" [hidden]=\"row.hidden\">\r\n      <ng-container *ngTemplateOutlet=\"titleTemp; context: { row: row }\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: row.controls }\"></ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #controlsTemp let-controls=\"controls\">\r\n  <x-row [space]=\"space()\">\r\n    @for (control of controls; track control) {\r\n      <x-col [style.padding-top]=\"space()\" [span]=\"!control.span ? span() : control.span\" [hidden]=\"control.hidden\">\r\n        <ng-container *xOutlet=\"controlTpl()[control.id]; context: { $option: control }\">\r\n          <x-control [option]=\"control\"></x-control>\r\n        </ng-container>\r\n      </x-col>\r\n    }\r\n  </x-row>\r\n</ng-template>\r\n\r\n<ng-template #titleTemp let-row=\"row\">\r\n  <label class=\"x-form-title\">\r\n    @if (row.icon) {\r\n      <x-icon [type]=\"row.icon\"></x-icon>\r\n    }\r\n    <span>{{ row.title }}</span>\r\n  </label>\r\n</ng-template>\r\n", styles: [".x-form{margin:0;padding:0;display:inline-block;overflow:hidden}.x-form-title{display:inline-flex;align-items:center;font-size:var(--x-font-size-medium)}.x-form-title>x-icon{margin-right:.25rem}.x-form-category{width:100%;overflow:hidden}.x-form-rows>x-row[hidden]{display:none}.x-form-rows>x-row:not(:first-child){margin-top:1.5rem}.x-form x-col[hidden]{display:none}.x-form-has-content .x-form-content{margin-top:1.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: XRowComponent, selector: "x-row" }, { kind: "component", type: XColComponent, selector: "x-col" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XControlComponent, selector: "x-control" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFormComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XFormPrefix}`, standalone: true, imports: [
                         NgClass,
@@ -531,15 +546,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                         XOutletDirective,
                         XIconComponent,
                         XControlComponent
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\r\n  #form\r\n  class=\"x-form\"\r\n  [class.x-form-has-content]=\"content.innerHTML.trim()\"\r\n  [formGroup]=\"formGroup\"\r\n  [style.width]=\"width\"\r\n  [style.padding-bottom.rem]=\"controlsType === 'controls' ? this.space : 0\"\r\n  [ngClass]=\"classMap\"\r\n  (ngSubmit)=\"onSubmit($event)\"\r\n>\r\n  @switch (controlsType) {\r\n    @case ('controls') {\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: controls }\"> </ng-container>\r\n    }\r\n    @case ('rows') {\r\n      <ng-container *ngTemplateOutlet=\"rowsTemp; context: { rows: controls }\"></ng-container>\r\n    }\r\n  }\r\n  <div class=\"x-form-content\" #content><ng-content></ng-content></div>\r\n</form>\r\n\r\n<ng-template #rowsTemp let-rows=\"rows\">\r\n  @for (row of rows; track row.id) {\r\n    <div class=\"x-form-category\" [hidden]=\"row.hidden\">\r\n      <ng-container *ngTemplateOutlet=\"titleTemp; context: { row: row }\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: row.controls }\"></ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #controlsTemp let-controls=\"controls\">\r\n  <x-row [space]=\"space\">\r\n    @for (control of controls; track control.id) {\r\n      <x-col [style.padding-top.rem]=\"space\" [span]=\"!control.span ? span : control.span\" [hidden]=\"control.hidden\">\r\n        <ng-container *xOutlet=\"controlTpl[control.id]; context: { $option: control }\">\r\n          <x-control [option]=\"control\" [form]=\"this\"></x-control>\r\n        </ng-container>\r\n      </x-col>\r\n    }\r\n  </x-row>\r\n</ng-template>\r\n\r\n<ng-template #titleTemp let-row=\"row\">\r\n  <label class=\"x-form-title\">\r\n    @if (row.icon) {\r\n      <x-icon [type]=\"row.icon\"></x-icon>\r\n    }\r\n    <span>{{ row.title }}</span>\r\n  </label>\r\n</ng-template>\r\n", styles: [".x-form{margin:0;padding:0;display:inline-block;overflow:hidden}.x-form-title{display:inline-flex;align-items:center;font-size:var(--x-font-size-medium)}.x-form-title>x-icon{margin-right:.25rem}.x-form-category{width:100%;overflow:hidden}.x-form-rows>x-row[hidden]{display:none}.x-form-rows>x-row:not(:first-child){margin-top:1.5rem}.x-form x-col[hidden]{display:none}.x-form-has-content .x-form-content{margin-top:1.5rem}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\r\n  #form\r\n  class=\"x-form\"\r\n  [class.x-form-has-content]=\"content.innerHTML.trim()\"\r\n  [formGroup]=\"formGroup()\"\r\n  [style.width]=\"width()\"\r\n  [style.padding-bottom]=\"controlsType() === 'controls' ? this.space() : '0px'\"\r\n  [ngClass]=\"classMap()\"\r\n  (ngSubmit)=\"onSubmit($event)\"\r\n>\r\n  @switch (controlsType()) {\r\n    @case ('controls') {\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: controls() }\"> </ng-container>\r\n    }\r\n    @case ('rows') {\r\n      <ng-container *ngTemplateOutlet=\"rowsTemp; context: { rows: controls() }\"></ng-container>\r\n    }\r\n  }\r\n  <div class=\"x-form-content\" #content><ng-content></ng-content></div>\r\n</form>\r\n\r\n<ng-template #rowsTemp let-rows=\"rows\">\r\n  @for (row of rows; track row) {\r\n    <div class=\"x-form-category\" [hidden]=\"row.hidden\">\r\n      <ng-container *ngTemplateOutlet=\"titleTemp; context: { row: row }\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: row.controls }\"></ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #controlsTemp let-controls=\"controls\">\r\n  <x-row [space]=\"space()\">\r\n    @for (control of controls; track control) {\r\n      <x-col [style.padding-top]=\"space()\" [span]=\"!control.span ? span() : control.span\" [hidden]=\"control.hidden\">\r\n        <ng-container *xOutlet=\"controlTpl()[control.id]; context: { $option: control }\">\r\n          <x-control [option]=\"control\"></x-control>\r\n        </ng-container>\r\n      </x-col>\r\n    }\r\n  </x-row>\r\n</ng-template>\r\n\r\n<ng-template #titleTemp let-row=\"row\">\r\n  <label class=\"x-form-title\">\r\n    @if (row.icon) {\r\n      <x-icon [type]=\"row.icon\"></x-icon>\r\n    }\r\n    <span>{{ row.title }}</span>\r\n  </label>\r\n</ng-template>\r\n", styles: [".x-form{margin:0;padding:0;display:inline-block;overflow:hidden}.x-form-title{display:inline-flex;align-items:center;font-size:var(--x-font-size-medium)}.x-form-title>x-icon{margin-right:.25rem}.x-form-category{width:100%;overflow:hidden}.x-form-rows>x-row[hidden]{display:none}.x-form-rows>x-row:not(:first-child){margin-top:1.5rem}.x-form x-col[hidden]{display:none}.x-form-has-content .x-form-content{margin-top:1.5rem}\n"] }]
         }] });
 
 class XFormModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XFormModule, imports: [XFormComponent, XControlComponent], exports: [XFormComponent, XControlComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFormModule, imports: [XFormComponent, XControlComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XFormModule, imports: [XFormComponent, XControlComponent], exports: [XFormComponent, XControlComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFormModule, imports: [XFormComponent, XControlComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XFormModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XFormComponent, XControlComponent],