@ng-nest/ui 17.0.1 → 17.0.3

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

@@ -1,53 +1,33 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ChangeDetectorRef, inject, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
-import * as i1 from '@ng-nest/ui/core';
-import { XWithConfig, XInputNumber, XIdentity, XIsEmpty, XIsFunction, XIsChange } from '@ng-nest/ui/core';
-import * as i4 from '@angular/forms';
+import { XWithConfig, XInputNumber, XIdentity, XIsEmpty, XConfigService, 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, XBaseFormModule } from '@ng-nest/ui/base-form';
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4$1 from '@ng-nest/ui/layout';
-import { XLayoutModule } from '@ng-nest/ui/layout';
-import * as i5$1 from '@ng-nest/ui/icon';
-import { XIconModule } from '@ng-nest/ui/icon';
-import * as i6$1 from '@ng-nest/ui/outlet';
-import { XOutletModule } from '@ng-nest/ui/outlet';
+import { XFormProp, 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 * as i2 from '@ng-nest/ui/i18n';
-import { XI18nModule } from '@ng-nest/ui/i18n';
-import * as i5 from '@ng-nest/ui/input';
-import { XInputModule } from '@ng-nest/ui/input';
-import * as i6 from '@ng-nest/ui/select';
-import { XSelectModule } from '@ng-nest/ui/select';
-import * as i7 from '@ng-nest/ui/cascade';
-import { XCascadeModule } from '@ng-nest/ui/cascade';
-import * as i8 from '@ng-nest/ui/checkbox';
-import { XCheckboxModule } from '@ng-nest/ui/checkbox';
-import * as i9 from '@ng-nest/ui/color-picker';
-import { XColorPickerModule } from '@ng-nest/ui/color-picker';
-import * as i10 from '@ng-nest/ui/date-picker';
-import { XDatePickerModule } from '@ng-nest/ui/date-picker';
-import * as i11 from '@ng-nest/ui/input-number';
-import { XInputNumberModule } from '@ng-nest/ui/input-number';
-import * as i12 from '@ng-nest/ui/radio';
-import { XRadioModule } from '@ng-nest/ui/radio';
-import * as i13 from '@ng-nest/ui/rate';
-import { XRateModule } from '@ng-nest/ui/rate';
-import * as i14 from '@ng-nest/ui/slider-select';
-import { XSliderSelectModule } from '@ng-nest/ui/slider-select';
-import * as i15 from '@ng-nest/ui/switch';
-import { XSwitchModule } from '@ng-nest/ui/switch';
-import * as i16 from '@ng-nest/ui/time-picker';
+import { XI18nService } from '@ng-nest/ui/i18n';
+import { XInputComponent } from '@ng-nest/ui/input';
+import { XSelectComponent } from '@ng-nest/ui/select';
+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 { XInputNumberComponent } from '@ng-nest/ui/input-number';
+import { XRadioComponent } from '@ng-nest/ui/radio';
+import { XRateComponent } from '@ng-nest/ui/rate';
+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 * as i17 from '@ng-nest/ui/textarea';
-import { XTextareaModule } from '@ng-nest/ui/textarea';
-import * as i18 from '@ng-nest/ui/find';
-import { XFindModule } from '@ng-nest/ui/find';
-import * as i19 from '@ng-nest/ui/auto-complete';
-import { XAutoCompleteModule } from '@ng-nest/ui/auto-complete';
+import { XTextareaComponent } from '@ng-nest/ui/textarea';
+import { XFindComponent } from '@ng-nest/ui/find';
+import { XAutoCompleteComponent } from '@ng-nest/ui/auto-complete';
+import { XIconComponent } from '@ng-nest/ui/icon';
 
 /**
  * Form
@@ -88,8 +68,8 @@ class XFormProperty extends XFormProp {
          */
         this.xSubmit = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XFormProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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: "17.0.7", ngImport: i0, type: XFormProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", 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 }); }
 }
 __decorate([
     XWithConfig(X_CONFIG_NAME, 1),
@@ -104,7 +84,7 @@ __decorate([
 __decorate([
     XWithConfig(X_CONFIG_NAME, '100%')
 ], XFormProperty.prototype, "width", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XFormProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XFormProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XFormPrefix}-property`, template: '' }]
         }], propDecorators: { formGroup: [{
@@ -148,10 +128,10 @@ const XControlPrefix = 'x-control';
  * Control Property
  */
 class XControlProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XControlProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XControlProperty, selector: "x-control-property", inputs: { option: "option" }, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XControlProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: XControlProperty, selector: "x-control-property", inputs: { option: "option" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XControlProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XControlProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XControlPrefix}-property`, template: '' }]
         }], propDecorators: { option: [{
@@ -244,18 +224,16 @@ class XAutoCompleteControl extends XControl {
 }
 
 class XControlComponent extends XControlProperty {
-    constructor(
-    // @Host() @Optional() public form: XFormComponent,
-    cdr, configService, i18n) {
-        super();
-        this.cdr = cdr;
-        this.configService = configService;
-        this.i18n = i18n;
+    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);
+        this.i18n = inject(XI18nService);
+        this.configService = inject(XConfigService);
     }
     ngOnInit() {
         this.option = { ...this.option };
@@ -264,7 +242,9 @@ class XControlComponent extends XControlProperty {
             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._formControl = new UntypedFormControl(this._control.value, {
+            nonNullable: this._control.nonNullable
+        });
         this.setValidators();
         this._formControl.statusChanges.pipe(takeUntil(this._unSubject)).subscribe((x) => {
             this.setMessages(x);
@@ -289,7 +269,8 @@ class XControlComponent extends XControlProperty {
     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] = this.control
+            .valueAccessor;
         this.form.controlComponents[this._control.id].formControlChanges();
     }
     ngOnDestroy() {
@@ -311,7 +292,10 @@ class XControlComponent extends XControlProperty {
             this.setPattern();
         }
         if (XIsFunction(this._control.inputValidator)) {
-            this._validatorFns = [...this._validatorFns, XFormInputValidator(this._control.inputValidator)];
+            this._validatorFns = [
+                ...this._validatorFns,
+                XFormInputValidator(this._control.inputValidator)
+            ];
         }
         this._formControl.setValidators(this._validatorFns);
         this._formControl.updateValueAndValidity();
@@ -329,7 +313,10 @@ class XControlComponent extends XControlProperty {
             }
         }
         else {
-            this._validatorFns = [...this._validatorFns, Validators.pattern(this._control.pattern)];
+            this._validatorFns = [
+                ...this._validatorFns,
+                Validators.pattern(this._control.pattern)
+            ];
         }
     }
     getPatternMsg(pattern) {
@@ -350,7 +337,10 @@ class XControlComponent extends XControlProperty {
                     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}`];
@@ -398,13 +388,31 @@ class XControlComponent extends XControlProperty {
                 return new XInputControl(option);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XControlComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i2.XI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XControlComponent, 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  <ng-container [ngSwitch]=\"option.control\">\r\n    <ng-container *ngSwitchCase=\"'input'\">\r\n      <x-input [formControlName]=\"option.id\" (clearEmit)=\"option.clearClick && option.clearClick($event)\"></x-input>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'select'\">\r\n      <x-select [formControlName]=\"option.id\"></x-select>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'cascade'\">\r\n      <x-cascade [formControlName]=\"option.id\" (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"></x-cascade>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox [formControlName]=\"option.id\"></x-checkbox>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'color-picker'\">\r\n      <x-color-picker [formControlName]=\"option.id\"></x-color-picker>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date-picker'\">\r\n      <x-date-picker [formControlName]=\"option.id\" (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"></x-date-picker>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'input-number'\">\r\n      <x-input-number [formControlName]=\"option.id\"></x-input-number>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'radio'\">\r\n      <x-radio [formControlName]=\"option.id\"></x-radio>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rate'\">\r\n      <x-rate [formControlName]=\"option.id\"></x-rate>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'slider-select'\">\r\n      <x-slider-select [formControlName]=\"option.id\"></x-slider-select>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'switch'\">\r\n      <x-switch [formControlName]=\"option.id\"></x-switch>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'time-picker'\">\r\n      <x-time-picker [formControlName]=\"option.id\"></x-time-picker>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'textarea'\">\r\n      <x-textarea [formControlName]=\"option.id\" (clearEmit)=\"option.clearClick && option.clearClick($event)\"></x-textarea>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'auto-complete'\">\r\n      <x-auto-complete [formControlName]=\"option.id\" (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"></x-auto-complete>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'find'\">\r\n      <x-find [formControlName]=\"option.id\"></x-find>\r\n    </ng-container>\r\n  </ng-container>\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: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.XInputComponent, selector: "x-input" }, { kind: "component", type: i6.XSelectComponent, selector: "x-select" }, { kind: "component", type: i7.XCascadeComponent, selector: "x-cascade" }, { kind: "component", type: i8.XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: i9.XColorPickerComponent, selector: "x-color-picker" }, { kind: "component", type: i10.XDatePickerComponent, selector: "x-date-picker" }, { kind: "component", type: i11.XInputNumberComponent, selector: "x-input-number" }, { kind: "component", type: i12.XRadioComponent, selector: "x-radio" }, { kind: "component", type: i13.XRateComponent, selector: "x-rate" }, { kind: "component", type: i14.XSliderSelectComponent, selector: "x-slider-select" }, { kind: "component", type: i15.XSwitchComponent, selector: "x-switch" }, { kind: "component", type: i16.XTimePickerComponent, selector: "x-time-picker" }, { kind: "component", type: i17.XTextareaComponent, selector: "x-textarea" }, { kind: "component", type: i18.XFindComponent, selector: "x-find" }, { kind: "component", type: i19.XAutoCompleteComponent, selector: "x-auto-complete" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-control', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-control\" [formGroup]=\"form.formGroup\">\r\n  <ng-container [ngSwitch]=\"option.control\">\r\n    <ng-container *ngSwitchCase=\"'input'\">\r\n      <x-input [formControlName]=\"option.id\" (clearEmit)=\"option.clearClick && option.clearClick($event)\"></x-input>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'select'\">\r\n      <x-select [formControlName]=\"option.id\"></x-select>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'cascade'\">\r\n      <x-cascade [formControlName]=\"option.id\" (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"></x-cascade>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox [formControlName]=\"option.id\"></x-checkbox>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'color-picker'\">\r\n      <x-color-picker [formControlName]=\"option.id\"></x-color-picker>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date-picker'\">\r\n      <x-date-picker [formControlName]=\"option.id\" (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"></x-date-picker>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'input-number'\">\r\n      <x-input-number [formControlName]=\"option.id\"></x-input-number>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'radio'\">\r\n      <x-radio [formControlName]=\"option.id\"></x-radio>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rate'\">\r\n      <x-rate [formControlName]=\"option.id\"></x-rate>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'slider-select'\">\r\n      <x-slider-select [formControlName]=\"option.id\"></x-slider-select>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'switch'\">\r\n      <x-switch [formControlName]=\"option.id\"></x-switch>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'time-picker'\">\r\n      <x-time-picker [formControlName]=\"option.id\"></x-time-picker>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'textarea'\">\r\n      <x-textarea [formControlName]=\"option.id\" (clearEmit)=\"option.clearClick && option.clearClick($event)\"></x-textarea>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'auto-complete'\">\r\n      <x-auto-complete [formControlName]=\"option.id\" (nodeEmit)=\"option.nodeClick && option.nodeClick($event)\"></x-auto-complete>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'find'\">\r\n      <x-find [formControlName]=\"option.id\"></x-find>\r\n    </ng-container>\r\n  </ng-container>\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: () => [{ type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: i2.XI18nService }], propDecorators: { option: [{
+            args: [{ selector: 'x-control', standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        XInputComponent,
+                        XSelectComponent,
+                        XCascadeComponent,
+                        XCheckboxComponent,
+                        XColorPickerComponent,
+                        XDatePickerComponent,
+                        XInputNumberComponent,
+                        XRadioComponent,
+                        XRateComponent,
+                        XSliderSelectComponent,
+                        XSwitchComponent,
+                        XTimePickerModule,
+                        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
@@ -414,13 +422,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
             }] } });
 
 class XFormComponent extends XFormProperty {
-    constructor(cdr, configService) {
-        super();
-        this.cdr = cdr;
-        this.configService = configService;
+    constructor() {
+        super(...arguments);
         this.controlComponents = {};
         this.controlTypes = {};
         this.formId = Number(Math.random().toString().substring(2, 6) + Date.now()).toString(36);
+        this.configService = inject(XConfigService);
     }
     ngOnChanges(changes) {
         const { disabled } = changes;
@@ -509,69 +516,34 @@ class XFormComponent extends XFormProperty {
         this.setValidator();
         this.xSubmit.emit(event);
     }
-    trackByControl(_index, item) {
-        return item.id;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: XFormComponent, 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  <ng-container [ngSwitch]=\"controlsType\">\r\n    <ng-container *ngSwitchCase=\"'controls'\">\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: controls }\"> </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rows'\">\r\n      <ng-container *ngTemplateOutlet=\"rowsTemp; context: { rows: controls }\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\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  <ng-container *ngFor=\"let row of rows\">\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  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #controlsTemp let-controls=\"controls\">\r\n  <x-row [space]=\"space\">\r\n    <x-col\r\n      [style.padding-top.rem]=\"space\"\r\n      [span]=\"!control.span ? span : control.span\"\r\n      *ngFor=\"let control of controls; trackBy: trackByControl\"\r\n      [hidden]=\"control.hidden\"\r\n    >\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  </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    <x-icon *ngIf=\"row.icon\" [type]=\"row.icon\"></x-icon>\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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.XRowComponent, selector: "x-row" }, { kind: "component", type: i4$1.XColComponent, selector: "x-col" }, { kind: "component", type: i5$1.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i6$1.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { 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: "17.0.7", ngImport: i0, type: XFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XFormPrefix}`, 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  <ng-container [ngSwitch]=\"controlsType\">\r\n    <ng-container *ngSwitchCase=\"'controls'\">\r\n      <ng-container *ngTemplateOutlet=\"controlsTemp; context: { controls: controls }\"> </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'rows'\">\r\n      <ng-container *ngTemplateOutlet=\"rowsTemp; context: { rows: controls }\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\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  <ng-container *ngFor=\"let row of rows\">\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  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #controlsTemp let-controls=\"controls\">\r\n  <x-row [space]=\"space\">\r\n    <x-col\r\n      [style.padding-top.rem]=\"space\"\r\n      [span]=\"!control.span ? span : control.span\"\r\n      *ngFor=\"let control of controls; trackBy: trackByControl\"\r\n      [hidden]=\"control.hidden\"\r\n    >\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  </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    <x-icon *ngIf=\"row.icon\" [type]=\"row.icon\"></x-icon>\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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.XConfigService }] });
+            args: [{ selector: `${XFormPrefix}`, standalone: true, imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        XRowComponent,
+                        XColComponent,
+                        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"] }]
+        }] });
 
-const modules = [
-    XLayoutModule,
-    XIconModule,
-    XInputModule,
-    XSelectModule,
-    XCascadeModule,
-    XCheckboxModule,
-    XColorPickerModule,
-    XDatePickerModule,
-    XInputNumberModule,
-    XRadioModule,
-    XRateModule,
-    XSliderSelectModule,
-    XSwitchModule,
-    XTimePickerModule,
-    XTextareaModule,
-    XFindModule,
-    XAutoCompleteModule,
-    XOutletModule,
-    XBaseFormModule,
-    XI18nModule
-];
 class XFormModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: XFormModule, declarations: [XFormComponent, XControlComponent, XFormProperty, XControlProperty], imports: [CommonModule, FormsModule, ReactiveFormsModule, XLayoutModule,
-            XIconModule,
-            XInputModule,
-            XSelectModule,
-            XCascadeModule,
-            XCheckboxModule,
-            XColorPickerModule,
-            XDatePickerModule,
-            XInputNumberModule,
-            XRadioModule,
-            XRateModule,
-            XSliderSelectModule,
-            XSwitchModule,
-            XTimePickerModule,
-            XTextareaModule,
-            XFindModule,
-            XAutoCompleteModule,
-            XOutletModule,
-            XBaseFormModule,
-            XI18nModule], exports: [XFormComponent, XControlComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, modules] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: XFormModule, imports: [XFormComponent, XControlComponent], exports: [XFormComponent, XControlComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XFormModule, imports: [XFormComponent, XControlComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: XFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: XFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [XFormComponent, XControlComponent, XFormProperty, XControlProperty],
                     exports: [XFormComponent, XControlComponent],
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, ...modules]
+                    imports: [XFormComponent, XControlComponent]
                 }]
         }] });