special-forms 16.2.1 → 17.0.0

package/fesm2022/special-forms.mjs

@@ -34,1075 +34,1069 @@ import * as i1$3 from '@angular/platform-browser';
 import * as i3$2 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
 
-class ErrorMessagePipe {
-    transform(errorsObj, errorMessages, control) {
-        const errors = errorsObj ? Object.keys(errorsObj) : [];
-        const error = errors[0];
-        const message = errorMessages[error] || error;
-        if (control) {
-            control.setErrors(errorsObj);
-        }
-        return message;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ErrorMessagePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: "errorMessage",
-                    standalone: true
-                }]
+class ErrorMessagePipe {
+    transform(errorsObj, errorMessages, control) {
+        const errors = errorsObj ? Object.keys(errorsObj) : [];
+        const error = errors[0];
+        const message = errorMessages[error] || error;
+        if (control) {
+            control.setErrors(errorsObj);
+        }
+        return message;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ErrorMessagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "errorMessage",
+                    standalone: true
+                }]
         }] });
 
-class TextByFunctionPipe {
-    transform(value, field) {
-        if (field instanceof Function) {
-            return field(value);
-        }
-        else if (value instanceof Object) {
-            return value[field];
-        }
-        else {
-            return value;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: TextByFunctionPipe, isStandalone: true, name: "textByFunction" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TextByFunctionPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'textByFunction', standalone: true }]
+class TextByFunctionPipe {
+    transform(value, field) {
+        if (field instanceof Function) {
+            return field(value);
+        }
+        else if (value instanceof Object) {
+            return value[field];
+        }
+        else {
+            return value;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: TextByFunctionPipe, isStandalone: true, name: "textByFunction" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextByFunctionPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'textByFunction', standalone: true }]
         }] });
 
-class FormControlsListPipe {
-    transform(controls) {
-        if (!controls)
-            return [];
-        return Object.values(controls)
-            .filter((control) => !control.hidden)
-            .map((control) => control);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: FormControlsListPipe, isStandalone: true, name: "controlsList" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FormControlsListPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'controlsList', standalone: true }]
+class FormControlsListPipe {
+    transform(controls) {
+        if (!controls)
+            return [];
+        return Object.values(controls)
+            .filter((control) => !control.hidden)
+            .map((control) => control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: FormControlsListPipe, isStandalone: true, name: "controlsList" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormControlsListPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'controlsList', standalone: true }]
         }] });
 
-class SpecialAutocompleteComponent {
-    constructor() {
-        this.subs = new Subscription();
-        this.configValue = (item) => {
-            if (!item)
-                return '';
-            const fieldName = this.settings.fieldName;
-            return fieldName instanceof Function ? fieldName(item) : item[fieldName];
-        };
-    }
-    ngOnInit() {
-        this.init();
-    }
-    get settings() {
-        return this.control.settings;
-    }
-    init() {
-        this.subs.add(this.control.valueChanges.pipe(debounceTime(500)).subscribe((value) => {
-            if (typeof value === 'string') {
-                this.settings.getData(value, this.control);
-            }
-        }));
-    }
-    optionSelected(data) {
-        this.control.setValue(data.option.value);
-        if (this.settings.onSelect)
-            this.settings.onSelect(data.option.value);
-    }
-    iconClick(event) {
-        if (this.settings.iconAction) {
-            this.settings.iconAction(this.control.value);
-            event.stopPropagation();
-        }
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialAutocompleteComponent, isStandalone: true, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatInputModule,
-                        CommonModule,
-                        MatAutocompleteModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                        TextByFunctionPipe,
-                    ], template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
+class SpecialAutocompleteComponent {
+    constructor() {
+        this.subs = new Subscription();
+        this.configValue = (item) => {
+            if (!item)
+                return '';
+            const fieldName = this.settings.fieldName;
+            return fieldName instanceof Function ? fieldName(item) : item[fieldName];
+        };
+    }
+    ngOnInit() {
+        this.init();
+    }
+    get settings() {
+        return this.control.settings;
+    }
+    init() {
+        this.subs.add(this.control.valueChanges.pipe(debounceTime(500)).subscribe((value) => {
+            if (typeof value === 'string') {
+                this.settings.getData(value, this.control);
+            }
+        }));
+    }
+    optionSelected(data) {
+        this.control.setValue(data.option.value);
+        if (this.settings.onSelect)
+            this.settings.onSelect(data.option.value);
+    }
+    iconClick(event) {
+        if (this.settings.iconAction) {
+            this.settings.iconAction(this.control.value);
+            event.stopPropagation();
+        }
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialAutocompleteComponent, isStandalone: true, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatInputModule,
+                        CommonModule,
+                        MatAutocompleteModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipe,
+                        TextByFunctionPipe,
+                    ], template: "<mat-form-field\r\n  class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label\r\n    *ngIf=\"control.label\"\r\n  >\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <input\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    [required]=\"control.required\"\r\n    [readonly]=\"control.readOnly\"\r\n    [placeholder]=\"control.placeholder\"\r\n    matInput\r\n    [formControl]=\"control\"\r\n    [matAutocomplete]=\"auto\"\r\n  />\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"configValue\"\r\n    (optionSelected)=\"optionSelected($event)\"\r\n  >\r\n    <mat-option\r\n      *ngFor=\"let option of settings?.source | async\"\r\n      [value]=\"option\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"option | textByFunction: settings.fieldImage\"\r\n        />\r\n        <span>\r\n          {{ option | textByFunction: settings.fieldName }}\r\n        </span>\r\n      </div>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-hint>{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
             }] } });
 
-class SpecialInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    onEnterClick() {
-        if (this.settings.onEnter) {
-            this.settings.onEnter(this.control.value);
-        }
-    }
-    onBlurAction() {
-        if (this.settings.onBlur) {
-            this.settings.onBlur(this.control.value);
-        }
-    }
-    get settings() {
-        return this.control.settings;
-    }
-    iconClick(event) {
-        if (this.settings.iconAction) {
-            this.settings.iconAction(this.control.value);
-            event.stopPropagation();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialInputComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <input\r\n    matInput\r\n    (blur)=\"onBlurAction()\"\r\n    (keydown.enter)=\"onEnterClick()\"\r\n    [inputMask]=\"settings?.mask\"\r\n    autocomplete=\"off\"\r\n    [type]=\"settings?.type || 'text'\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  />\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <button\r\n    *ngIf=\"settings?.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$2.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialInputComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        InputMaskModule,
-                        CommonModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <input\r\n    matInput\r\n    (blur)=\"onBlurAction()\"\r\n    (keydown.enter)=\"onEnterClick()\"\r\n    [inputMask]=\"settings?.mask\"\r\n    autocomplete=\"off\"\r\n    [type]=\"settings?.type || 'text'\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  />\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <button\r\n    *ngIf=\"settings?.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
+class SpecialInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    onEnterClick() {
+        if (this.settings.onEnter) {
+            this.settings.onEnter(this.control.value);
+        }
+    }
+    onBlurAction() {
+        if (this.settings.onBlur) {
+            this.settings.onBlur(this.control.value);
+        }
+    }
+    get settings() {
+        return this.control.settings;
+    }
+    iconClick(event) {
+        if (this.settings.iconAction) {
+            this.settings.iconAction(this.control.value);
+            event.stopPropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialInputComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <input\r\n    matInput\r\n    (blur)=\"onBlurAction()\"\r\n    (keydown.enter)=\"onEnterClick()\"\r\n    [inputMask]=\"settings?.mask\"\r\n    autocomplete=\"off\"\r\n    [type]=\"settings?.type || 'text'\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  />\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <button\r\n    *ngIf=\"settings?.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$2.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialInputComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        InputMaskModule,
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipe,
+                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <input\r\n    matInput\r\n    (blur)=\"onBlurAction()\"\r\n    (keydown.enter)=\"onEnterClick()\"\r\n    [inputMask]=\"settings?.mask\"\r\n    autocomplete=\"off\"\r\n    [type]=\"settings?.type || 'text'\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  />\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <button\r\n    *ngIf=\"settings?.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
             }] } });
 
-class SpecialDropdownComponent {
-    get settings() {
-        return this.control.settings;
-    }
-    iconClick(event) {
-        if (this.settings.iconAction) {
-            this.settings.iconAction(this.control.value);
-            event.stopPropagation();
-        }
-    }
-    optionSelected(value) {
-        if (this.settings.onSelect)
-            this.settings.onSelect(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialDropdownComponent, isStandalone: true, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        MatSelectModule,
-                        ReactiveFormsModule,
-                        ErrorMessagePipe,
-                        MatIconModule,
-                        MatButtonModule,
-                        TextByFunctionPipe,
-                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { control: [{
-                type: Input
+class SpecialDropdownComponent {
+    get settings() {
+        return this.control.settings;
+    }
+    iconClick(event) {
+        if (this.settings.iconAction) {
+            this.settings.iconAction(this.control.value);
+            event.stopPropagation();
+        }
+    }
+    optionSelected(value) {
+        console.log(value);
+        if (this.settings.onSelect)
+            this.settings.onSelect(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialDropdownComponent, isStandalone: true, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        ErrorMessagePipe,
+                        MatIconModule,
+                        MatButtonModule,
+                        TextByFunctionPipe,
+                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">\r\n    {{ control.label }}\r\n  </mat-label>\r\n  <mat-select\r\n    [formControl]=\"control\"\r\n    [required]=\"control.required\"\r\n    (selectionChange)=\"optionSelected($event.value)\"\r\n    [placeholder]=\"control.placeholder\"\r\n  >\r\n    <mat-option *ngIf=\"!control.required\" [value]=\"null\">\r\n      {{ control.placeholder || control.settings.notSelectedText }}\r\n    </mat-option>\r\n    <mat-option\r\n      *ngFor=\"let item of control.settings.source | async\"\r\n      [value]=\"item[control.settings.fieldId]\"\r\n    >\r\n      {{ item | textByFunction: control.settings.fieldName }}\r\n    </mat-option>\r\n  </mat-select>\r\n  <button\r\n    *ngIf=\"settings.icon\"\r\n    mat-icon-button\r\n    matSuffix\r\n    (click)=\"iconClick($event)\"\r\n  >\r\n    <mat-icon>\r\n      {{ settings.icon }}\r\n    </mat-icon>\r\n  </button>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n  <mat-hint *ngIf=\"control.tooltip\">{{ control.tooltip }}</mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { control: [{
+                type: Input
             }] } });
 
-class SpecialDatepickerComponent {
-    constructor() { }
-    get startAt() {
-        return this.control.settings?.startAt || new Date();
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialDatepickerComponent, isStandalone: true, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <input\r\n    matInput\r\n    autocomplete=\"off\"\r\n    [readonly]=\"control.readOnly\"\r\n    [matDatepicker]=\"picker\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  />\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\r\n  </mat-datepicker>\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatInputModule,
-                        MatDatepickerModule,
-                        CommonModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                        MatNativeDateModule,
-                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <input\r\n    matInput\r\n    autocomplete=\"off\"\r\n    [readonly]=\"control.readOnly\"\r\n    [matDatepicker]=\"picker\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  />\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\r\n  </mat-datepicker>\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
+class SpecialDatepickerComponent {
+    constructor() { }
+    get settings() {
+        return this.control.settings;
+    }
+    get startAt() {
+        return this.settings?.startAt || new Date();
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialDatepickerComponent, isStandalone: true, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <input\r\n    matInput\r\n    autocomplete=\"off\"\r\n    [readonly]=\"control.readOnly\"\r\n    [matDatepicker]=\"picker\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  />\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\r\n  </mat-datepicker>\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatInputModule,
+                        MatDatepickerModule,
+                        CommonModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipe,
+                        MatNativeDateModule,
+                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-datepicker w-full mb-3  {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <input\r\n    matInput\r\n    autocomplete=\"off\"\r\n    [readonly]=\"control.readOnly\"\r\n    [matDatepicker]=\"picker\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  />\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\r\n  </mat-datepicker>\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
             }] } });
 
-class SpecialMultipleAutocompleteComponent {
-    constructor() {
-        this.subs = new Subscription();
-        this.internalControl = new FormControl();
-        this.configValue = (item) => {
-            if (!item)
-                return '';
-            const fieldName = this.control.settings.fieldName;
-            return fieldName instanceof Function ? fieldName(item) : item[fieldName];
-        };
-    }
-    ngOnInit() {
-        this.init();
-    }
-    get settings() {
-        return this.control.settings;
-    }
-    init() {
-        this.subs.add(this.internalControl.valueChanges
-            .pipe(debounceTime(500))
-            .subscribe((value) => {
-            if (typeof value === 'string') {
-                this.control.settings.getData(value, this.control);
-            }
-        }));
-    }
-    optionSelected(data) {
-        const newItem = data.option.value;
-        this.internalControl.reset();
-        this.control.setValue([
-            ...(this.control.value || []).filter((item) => item[this.control.settings.fieldId] !==
-                newItem[this.control.settings.fieldId]),
-            newItem,
-        ]);
-        if (this.settings.onSelect)
-            this.settings.onSelect(newItem);
-    }
-    iconClick(event) {
-        if (this.settings.iconAction) {
-            this.settings.iconAction(this.control.value);
-            event.stopPropagation();
-        }
-    }
-    remove(value) {
-        let currentValues = Array.from(this.control.value);
-        const index = currentValues.indexOf(value);
-        if (index > -1) {
-            currentValues.splice(index, 1);
-            const value = currentValues;
-            this.control.markAsDirty();
-            this.control.setValue(value);
-        }
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialMultipleAutocompleteComponent, isStandalone: true, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i9.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatInputModule,
-                        CommonModule,
-                        MatAutocompleteModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                        TextByFunctionPipe,
-                        MatChipsModule,
-                    ], template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
+class SpecialMultipleAutocompleteComponent {
+    constructor() {
+        this.subs = new Subscription();
+        this.internalControl = new FormControl();
+        this.configValue = (item) => {
+            if (!item)
+                return '';
+            const fieldName = this.control.settings.fieldName;
+            return fieldName instanceof Function ? fieldName(item) : item[fieldName];
+        };
+    }
+    ngOnInit() {
+        this.init();
+    }
+    get settings() {
+        return this.control.settings;
+    }
+    init() {
+        this.subs.add(this.internalControl.valueChanges
+            .pipe(debounceTime(500))
+            .subscribe((value) => {
+            if (typeof value === 'string') {
+                this.control.settings.getData(value, this.control);
+            }
+        }));
+    }
+    optionSelected(data) {
+        const newItem = data.option.value;
+        this.internalControl.reset();
+        this.control.setValue([
+            ...(this.control.value || []).filter((item) => item[this.control.settings.fieldId] !==
+                newItem[this.control.settings.fieldId]),
+            newItem,
+        ]);
+        if (this.settings.onSelect)
+            this.settings.onSelect(newItem);
+    }
+    iconClick(event) {
+        if (this.settings.iconAction) {
+            this.settings.iconAction(this.control.value);
+            event.stopPropagation();
+        }
+    }
+    remove(value) {
+        let currentValues = Array.from(this.control.value);
+        const index = currentValues.indexOf(value);
+        if (index > -1) {
+            currentValues.splice(index, 1);
+            const value = currentValues;
+            this.control.markAsDirty();
+            this.control.setValue(value);
+        }
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialMultipleAutocompleteComponent, isStandalone: true, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i9.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatInputModule,
+                        CommonModule,
+                        MatAutocompleteModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipe,
+                        TextByFunctionPipe,
+                        MatChipsModule,
+                    ], template: "<div\r\n  class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n  [id]=\"control.elementId\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n  >\r\n    <mat-label *ngIf=\"control.label\">\r\n      {{ control.label }}\r\n    </mat-label>\r\n    <input\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [required]=\"control.required && !control.value?.length\"\r\n      [readonly]=\"control.readOnly\"\r\n      [placeholder]=\"control.placeholder\"\r\n      matInput\r\n      [formControl]=\"internalControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"configValue\"\r\n      (optionSelected)=\"optionSelected($event)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let option of settings?.source | async\"\r\n        [value]=\"option\"\r\n      >\r\n        <div class=\"flex items-center\">\r\n          <img\r\n            *ngIf=\"settings.fieldImage\"\r\n            class=\"w-8 pr-2\"\r\n            alt=\"\"\r\n            [src]=\"option | textByFunction: settings.fieldImage\"\r\n          />\r\n          <span>\r\n            {{ option | textByFunction: settings.fieldName }}\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }}</mat-icon>\r\n    <button\r\n      *ngIf=\"settings.icon\"\r\n      mat-icon-button\r\n      matSuffix\r\n      (click)=\"iconClick($event)\"\r\n    >\r\n      <mat-icon>\r\n        {{ settings.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <mat-hint>{{ control.tooltip }}</mat-hint>\r\n    <mat-error>\r\n      {{ control.errors | errorMessage: control.errorMessages }}\r\n    </mat-error>\r\n  </mat-form-field>\r\n\r\n  <mat-chip-listbox>\r\n    <mat-chip\r\n      *ngFor=\"let chip of control.value\"\r\n      [removable]=\"true\"\r\n      (removed)=\"remove(chip)\"\r\n    >\r\n      <div class=\"flex items-center\">\r\n        <img\r\n          *ngIf=\"settings.fieldImage\"\r\n          class=\"w-8 pr-2\"\r\n          alt=\"\"\r\n          [src]=\"chip | textByFunction: settings.fieldImage\"\r\n        />\r\n        {{ chip | textByFunction: settings.fieldName }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </div>\r\n    </mat-chip>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
             }] } });
 
-class SpecialCheckboxComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialCheckboxComponent, isStandalone: true, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <mat-checkbox\r\n    [required]=\"control.required\"\r\n    [ngModel]=\"control.value\"\r\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\r\n    [indeterminate]=\"control.settings.indeterminate\"\r\n    [labelPosition]=\"control.settings.labelPosition\"\r\n    [color]=\"control.settings.color\"\r\n    [disabled]=\"control.disabled\"\r\n  >\r\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\r\n    {{ control.placeholder }}\r\n  </mat-checkbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2$1.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        MatCheckboxModule,
-                        CommonModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                    ], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <mat-checkbox\r\n    [required]=\"control.required\"\r\n    [ngModel]=\"control.value\"\r\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\r\n    [indeterminate]=\"control.settings.indeterminate\"\r\n    [labelPosition]=\"control.settings.labelPosition\"\r\n    [color]=\"control.settings.color\"\r\n    [disabled]=\"control.disabled\"\r\n  >\r\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\r\n    {{ control.placeholder }}\r\n  </mat-checkbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
+class SpecialCheckboxComponent {
+    get settings() {
+        return this.control.settings;
+    }
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialCheckboxComponent, isStandalone: true, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <mat-checkbox\r\n    [required]=\"control.required\"\r\n    [ngModel]=\"control.value\"\r\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\r\n    [indeterminate]=\"settings.indeterminate\"\r\n    [labelPosition]=\"settings.labelPosition\"\r\n    [color]=\"settings.color\"\r\n    [disabled]=\"control.disabled\"\r\n  >\r\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\r\n    {{ control.placeholder }}\r\n  </mat-checkbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        MatCheckboxModule,
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipe,
+                    ], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-checkbox w-full mb-3 flex flex-col {{ control.styleClasses }}\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <mat-checkbox\r\n    [required]=\"control.required\"\r\n    [ngModel]=\"control.value\"\r\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\r\n    [indeterminate]=\"settings.indeterminate\"\r\n    [labelPosition]=\"settings.labelPosition\"\r\n    [color]=\"settings.color\"\r\n    [disabled]=\"control.disabled\"\r\n  >\r\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\r\n    {{ control.placeholder }}\r\n  </mat-checkbox>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
             }] } });
 
-class SpecialTextAreaComponent {
-    constructor() {
-        this.onBlur = new EventEmitter();
-        this.onEnter = new EventEmitter();
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialTextAreaComponent, isStandalone: true, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <textarea\r\n    cdkTextareaAutosize\r\n    #autosize=\"cdkTextareaAutosize\"\r\n    cdkAutosizeMinRows=\"1\"\r\n    cdkAutosizeMaxRows=\"5\"\r\n    matInput\r\n    (blur)=\"onBlur.emit(control.value)\"\r\n    (keydown.enter)=\"onEnter.emit(control.value)\"\r\n    [type]=\"control.settings?.type || 'text'\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  ></textarea>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        InputMaskModule,
-                        CommonModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <textarea\r\n    cdkTextareaAutosize\r\n    #autosize=\"cdkTextareaAutosize\"\r\n    cdkAutosizeMinRows=\"1\"\r\n    cdkAutosizeMaxRows=\"5\"\r\n    matInput\r\n    (blur)=\"onBlur.emit(control.value)\"\r\n    (keydown.enter)=\"onEnter.emit(control.value)\"\r\n    [type]=\"control.settings?.type || 'text'\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  ></textarea>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
-            }], onBlur: [{
-                type: Output
-            }], onEnter: [{
-                type: Output
+class SpecialTextAreaComponent {
+    constructor() {
+        this.onBlur = new EventEmitter();
+        this.onEnter = new EventEmitter();
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialTextAreaComponent, isStandalone: true, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <textarea\r\n    cdkTextareaAutosize\r\n    #autosize=\"cdkTextareaAutosize\"\r\n    cdkAutosizeMinRows=\"1\"\r\n    cdkAutosizeMaxRows=\"5\"\r\n    matInput\r\n    (blur)=\"onBlur.emit(control.value)\"\r\n    (keydown.enter)=\"onEnter.emit(control.value)\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  ></textarea>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        InputMaskModule,
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipe,
+                    ], template: "<mat-form-field\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n>\r\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\r\n  <textarea\r\n    cdkTextareaAutosize\r\n    #autosize=\"cdkTextareaAutosize\"\r\n    cdkAutosizeMinRows=\"1\"\r\n    cdkAutosizeMaxRows=\"5\"\r\n    matInput\r\n    (blur)=\"onBlur.emit(control.value)\"\r\n    (keydown.enter)=\"onEnter.emit(control.value)\"\r\n    [readonly]=\"control.readOnly\"\r\n    [required]=\"control.required\"\r\n    [placeholder]=\"control.placeholder\"\r\n    [formControl]=\"control\"\r\n  ></textarea>\r\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\r\n  <mat-hint>\r\n    {{ control.tooltip }}\r\n  </mat-hint>\r\n  <mat-error>\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </mat-error>\r\n</mat-form-field>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], onBlur: [{
+                type: Output
+            }], onEnter: [{
+                type: Output
             }] } });
 
-class SpecialUploadComponent {
-    set controlSetter(control) {
-        this.control = control;
-        this.previewImages = control.value;
-    }
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.previewImages = [];
-    }
-    ngOnInit() { }
-    onSelectMultiple(event) {
-        this.previewImages = [
-            ...this.previewImages,
-            ...event.addedFiles.map((file) => ({
-                lastModified: file.lastModified,
-                url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
-            })),
-        ];
-        this.control.setValue([
-            ...(this.control.value || []),
-            ...event.addedFiles.map(this.fixFileName),
-        ]);
-        this.onselectFile(this.control.value);
-        this.control.markAsDirty();
-    }
-    onSelectOne(event) {
-        this.previewImages = event.addedFiles.map((file) => ({
-            lastModified: file.lastModified,
-            url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
-        }));
-        this.control.setValue(event.addedFiles.map(this.fixFileName));
-        this.onselectFile(this.control.value);
-        this.control.markAsDirty();
-    }
-    onselectFile(value) {
-        if (this.control.settings?.onSelectFile) {
-            this.control.settings.onSelectFile(value);
-        }
-    }
-    fixFileName(file) {
-        return Object.defineProperty(file, 'name', {
-            writable: true,
-            value: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
-        });
-    }
-    clean() {
-        this.previewImages = [];
-    }
-    onRemove(file) {
-        this.control.setValue(this.control.value.filter((fl) => fl.lastModified !== file.lastModified));
-        this.previewImages = this.previewImages.filter((fl) => fl.lastModified !== file.lastModified);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialUploadComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\r\n>\r\n  <ngx-dropzone\r\n    class=\"special-upload__dropzone\"\r\n    [ngClass]=\"{\r\n      'special-upload--error-dashed':\r\n        !!control.errors && (control.dirty || control.touched)\r\n    }\"\r\n    [multiple]=\"control.settings?.multiple\"\r\n    [accept]=\"\r\n      control.settings?.accept\r\n        ? control.settings?.accept\r\n        : 'image/png, .jpeg, .jpg, image/gif'\r\n    \"\r\n    (change)=\"\r\n      control.settings?.multiple\r\n        ? onSelectMultiple($event)\r\n        : onSelectOne($event)\r\n    \"\r\n  >\r\n    <ngx-dropzone-label\r\n      [ngClass]=\"{\r\n        'special-upload--error':\r\n          !!control.errors && (control.dirty || control.touched)\r\n      }\"\r\n    >\r\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\r\n        >{{ control.icon }}\r\n      </mat-icon>\r\n      <h2 class=\"text-base font-bold\">\r\n        {{ control.label }}\r\n      </h2>\r\n      <h3 class=\"text-base\">\r\n        {{ control.placeholder }}\r\n      </h3>\r\n    </ngx-dropzone-label>\r\n    <ngx-dropzone-preview\r\n      *ngFor=\"let file of previewImages\"\r\n      [removable]=\"true\"\r\n      (removed)=\"onRemove(file)\"\r\n    >\r\n      <ngx-dropzone-label class=\"special-upload__card\">\r\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\r\n      </ngx-dropzone-label>\r\n    </ngx-dropzone-preview>\r\n  </ngx-dropzone>\r\n  <div\r\n    class=\"special-upload--error mt-2\"\r\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\r\n  >\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i2$2.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "directive", type: i2$2.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i2$2.NgxDropzonePreviewComponent, selector: "ngx-dropzone-preview", inputs: ["file", "removable"], outputs: ["removed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialUploadComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        NgxDropzoneModule,
-                        CommonModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        ErrorMessagePipe,
-                    ], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\r\n>\r\n  <ngx-dropzone\r\n    class=\"special-upload__dropzone\"\r\n    [ngClass]=\"{\r\n      'special-upload--error-dashed':\r\n        !!control.errors && (control.dirty || control.touched)\r\n    }\"\r\n    [multiple]=\"control.settings?.multiple\"\r\n    [accept]=\"\r\n      control.settings?.accept\r\n        ? control.settings?.accept\r\n        : 'image/png, .jpeg, .jpg, image/gif'\r\n    \"\r\n    (change)=\"\r\n      control.settings?.multiple\r\n        ? onSelectMultiple($event)\r\n        : onSelectOne($event)\r\n    \"\r\n  >\r\n    <ngx-dropzone-label\r\n      [ngClass]=\"{\r\n        'special-upload--error':\r\n          !!control.errors && (control.dirty || control.touched)\r\n      }\"\r\n    >\r\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\r\n        >{{ control.icon }}\r\n      </mat-icon>\r\n      <h2 class=\"text-base font-bold\">\r\n        {{ control.label }}\r\n      </h2>\r\n      <h3 class=\"text-base\">\r\n        {{ control.placeholder }}\r\n      </h3>\r\n    </ngx-dropzone-label>\r\n    <ngx-dropzone-preview\r\n      *ngFor=\"let file of previewImages\"\r\n      [removable]=\"true\"\r\n      (removed)=\"onRemove(file)\"\r\n    >\r\n      <ngx-dropzone-label class=\"special-upload__card\">\r\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\r\n      </ngx-dropzone-label>\r\n    </ngx-dropzone-preview>\r\n  </ngx-dropzone>\r\n  <div\r\n    class=\"special-upload--error mt-2\"\r\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\r\n  >\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; }, propDecorators: { controlSetter: [{
-                type: Input,
-                args: ['control']
+class SpecialUploadComponent {
+    set controlSetter(control) {
+        this.control = control;
+        this.previewImages = control.value;
+    }
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.previewImages = [];
+    }
+    ngOnInit() { }
+    onSelectMultiple(event) {
+        this.previewImages = [
+            ...this.previewImages,
+            ...event.addedFiles.map((file) => ({
+                lastModified: file.lastModified,
+                url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
+            })),
+        ];
+        this.control.setValue([
+            ...(this.control.value || []),
+            ...event.addedFiles.map(this.fixFileName),
+        ]);
+        this.onselectFile(this.control.value);
+        this.control.markAsDirty();
+    }
+    onSelectOne(event) {
+        this.previewImages = event.addedFiles.map((file) => ({
+            lastModified: file.lastModified,
+            url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
+        }));
+        this.control.setValue(event.addedFiles.map(this.fixFileName));
+        this.onselectFile(this.control.value);
+        this.control.markAsDirty();
+    }
+    onselectFile(value) {
+        if (this.control.settings?.onSelectFile) {
+            this.control.settings.onSelectFile(value);
+        }
+    }
+    fixFileName(file) {
+        return Object.defineProperty(file, 'name', {
+            writable: true,
+            value: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
+        });
+    }
+    clean() {
+        this.previewImages = [];
+    }
+    onRemove(file) {
+        this.control.setValue(this.control.value.filter((fl) => fl.lastModified !== file.lastModified));
+        this.previewImages = this.previewImages.filter((fl) => fl.lastModified !== file.lastModified);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialUploadComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\r\n>\r\n  <ngx-dropzone\r\n    class=\"special-upload__dropzone\"\r\n    [ngClass]=\"{\r\n      'special-upload--error-dashed':\r\n        !!control.errors && (control.dirty || control.touched)\r\n    }\"\r\n    [multiple]=\"control.settings?.multiple\"\r\n    [accept]=\"\r\n      control.settings?.accept\r\n        ? control.settings?.accept\r\n        : 'image/png, .jpeg, .jpg, image/gif'\r\n    \"\r\n    (change)=\"\r\n      control.settings?.multiple\r\n        ? onSelectMultiple($event)\r\n        : onSelectOne($event)\r\n    \"\r\n  >\r\n    <ngx-dropzone-label\r\n      [ngClass]=\"{\r\n        'special-upload--error':\r\n          !!control.errors && (control.dirty || control.touched)\r\n      }\"\r\n    >\r\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\r\n        >{{ control.icon }}\r\n      </mat-icon>\r\n      <h2 class=\"text-base font-bold\">\r\n        {{ control.label }}\r\n      </h2>\r\n      <h3 class=\"text-base\">\r\n        {{ control.placeholder }}\r\n      </h3>\r\n    </ngx-dropzone-label>\r\n    <ngx-dropzone-preview\r\n      *ngFor=\"let file of previewImages\"\r\n      [removable]=\"true\"\r\n      (removed)=\"onRemove(file)\"\r\n    >\r\n      <ngx-dropzone-label class=\"special-upload__card\">\r\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\r\n      </ngx-dropzone-label>\r\n    </ngx-dropzone-preview>\r\n  </ngx-dropzone>\r\n  <div\r\n    class=\"special-upload--error mt-2\"\r\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\r\n  >\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i2$2.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "directive", type: i2$2.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i2$2.NgxDropzonePreviewComponent, selector: "ngx-dropzone-preview", inputs: ["file", "removable"], outputs: ["removed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialUploadComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        NgxDropzoneModule,
+                        CommonModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipe,
+                    ], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  [id]=\"control.elementId\"\r\n  class=\"special-upload w-full mb-3 {{ control.styleClasses }}\"\r\n>\r\n  <ngx-dropzone\r\n    class=\"special-upload__dropzone\"\r\n    [ngClass]=\"{\r\n      'special-upload--error-dashed':\r\n        !!control.errors && (control.dirty || control.touched)\r\n    }\"\r\n    [multiple]=\"control.settings?.multiple\"\r\n    [accept]=\"\r\n      control.settings?.accept\r\n        ? control.settings?.accept\r\n        : 'image/png, .jpeg, .jpg, image/gif'\r\n    \"\r\n    (change)=\"\r\n      control.settings?.multiple\r\n        ? onSelectMultiple($event)\r\n        : onSelectOne($event)\r\n    \"\r\n  >\r\n    <ngx-dropzone-label\r\n      [ngClass]=\"{\r\n        'special-upload--error':\r\n          !!control.errors && (control.dirty || control.touched)\r\n      }\"\r\n    >\r\n      <mat-icon class=\"special-upload__icon\" *ngIf=\"control.icon\"\r\n        >{{ control.icon }}\r\n      </mat-icon>\r\n      <h2 class=\"text-base font-bold\">\r\n        {{ control.label }}\r\n      </h2>\r\n      <h3 class=\"text-base\">\r\n        {{ control.placeholder }}\r\n      </h3>\r\n    </ngx-dropzone-label>\r\n    <ngx-dropzone-preview\r\n      *ngFor=\"let file of previewImages\"\r\n      [removable]=\"true\"\r\n      (removed)=\"onRemove(file)\"\r\n    >\r\n      <ngx-dropzone-label class=\"special-upload__card\">\r\n        <img class=\"special-upload__card--image\" [src]=\"file?.url\" alt=\"\" />\r\n      </ngx-dropzone-label>\r\n    </ngx-dropzone-preview>\r\n  </ngx-dropzone>\r\n  <div\r\n    class=\"special-upload--error mt-2\"\r\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\r\n  >\r\n    {{ control.errors | errorMessage: control.errorMessages }}\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:100%;height:100%;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { controlSetter: [{
+                type: Input,
+                args: ['control']
             }] } });
 
-class SpecialLabelComponent {
-    constructor() { }
-    ngOnInit() { }
-    get settings() {
-        return this.control.settings || { isLink: false };
-    }
-    onLink() {
-        if (this.settings.isLink && this.settings.onClickLink) {
-            this.settings.onClickLink(this.control.value);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialLabelComponent, isStandalone: true, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\r\n    control.value | textByFunction: settings.stylesPipe\r\n  }}\"\r\n  [id]=\"control.elementId\"\r\n>\r\n  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\r\n    {{ control.label }}\r\n  </div>\r\n  <div\r\n    class=\"special-label__text\"\r\n    [ngClass]=\"{\r\n      'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink\r\n    }\"\r\n    (click)=\"onLink()\"\r\n  >\r\n    {{ control.value | textByFunction: control.settings.pipe }}\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialLabelComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipe], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\r\n    control.value | textByFunction: settings.stylesPipe\r\n  }}\"\r\n  [id]=\"control.elementId\"\r\n>\r\n  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\r\n    {{ control.label }}\r\n  </div>\r\n  <div\r\n    class=\"special-label__text\"\r\n    [ngClass]=\"{\r\n      'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink\r\n    }\"\r\n    (click)=\"onLink()\"\r\n  >\r\n    {{ control.value | textByFunction: control.settings.pipe }}\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
+class SpecialLabelComponent {
+    constructor() { }
+    ngOnInit() { }
+    get settings() {
+        return this.control.settings || { isLink: false };
+    }
+    onLink() {
+        if (this.settings.isLink && this.settings.onClickLink) {
+            this.settings.onClickLink(this.control.value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialLabelComponent, isStandalone: true, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\r\n    control.value | textByFunction: settings.stylesPipe\r\n  }}\"\r\n  [id]=\"control.elementId\"\r\n>\r\n  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\r\n    {{ control.label }}\r\n  </div>\r\n  <div\r\n    class=\"special-label__text\"\r\n    [ngClass]=\"{\r\n      'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink\r\n    }\"\r\n    (click)=\"onLink()\"\r\n  >\r\n    {{ control.value | textByFunction: control.settings.pipe }}\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialLabelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipe], template: "<div\r\n  *ngIf=\"control && !control.hidden\"\r\n  class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\r\n    control.value | textByFunction: settings.stylesPipe\r\n  }}\"\r\n  [id]=\"control.elementId\"\r\n>\r\n  <div *ngIf=\"!!control.label\" class=\"special-label__title font-bold\">\r\n    {{ control.label }}\r\n  </div>\r\n  <div\r\n    class=\"special-label__text\"\r\n    [ngClass]=\"{\r\n      'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink\r\n    }\"\r\n    (click)=\"onLink()\"\r\n  >\r\n    {{ control.value | textByFunction: control.settings.pipe }}\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
             }] } });
 
-var EControlTypes;
-(function (EControlTypes) {
-    EControlTypes["pkey"] = "PRIMARY-KEY";
-    EControlTypes["input"] = "INPUT";
-    EControlTypes["richText"] = "RICH-TEXT";
-    EControlTypes["textArea"] = "TEXT-AREA";
-    EControlTypes["dropdown"] = "DROPDOWN";
-    EControlTypes["date"] = "DATE";
-    EControlTypes["checkbox"] = "CHECKBOX";
-    EControlTypes["upload"] = "UPLOAD";
-    EControlTypes["autocomplete"] = "AUTOCOMPLETE";
-    EControlTypes["multiple"] = "MULTIPLE-AUTOCOMPLETE";
-    EControlTypes["array"] = "ARRAY";
-    EControlTypes["form"] = "FORM";
-    EControlTypes["label"] = "LABEL";
-    EControlTypes["default"] = "DEFAULT";
+var EControlTypes;
+(function (EControlTypes) {
+    EControlTypes["pkey"] = "PRIMARY-KEY";
+    EControlTypes["input"] = "INPUT";
+    EControlTypes["richText"] = "RICH-TEXT";
+    EControlTypes["textArea"] = "TEXT-AREA";
+    EControlTypes["dropdown"] = "DROPDOWN";
+    EControlTypes["date"] = "DATE";
+    EControlTypes["checkbox"] = "CHECKBOX";
+    EControlTypes["upload"] = "UPLOAD";
+    EControlTypes["autocomplete"] = "AUTOCOMPLETE";
+    EControlTypes["multiple"] = "MULTIPLE-AUTOCOMPLETE";
+    EControlTypes["array"] = "ARRAY";
+    EControlTypes["form"] = "FORM";
+    EControlTypes["label"] = "LABEL";
+    EControlTypes["default"] = "DEFAULT";
 })(EControlTypes || (EControlTypes = {}));
 
-class SpecialRichtextComponent {
-    set control(control) {
-        this.formControl = control;
-        if (control.settings.colorPresets)
-            this.colorPresets = control.settings.colorPresets;
-        this.editor = new Editor();
-    }
-    constructor() {
-        this.colorPresets = ['red', 'yellow', 'green', 'blue', 'black'];
-        this.toolbar = [
-            // default value
-            ['bold', 'italic'],
-            ['underline', 'strike'],
-            ['code', 'blockquote'],
-            ['ordered_list', 'bullet_list'],
-            [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
-            ['link', 'image'],
-            ['text_color', 'background_color'],
-            ['align_left', 'align_center', 'align_right', 'align_justify'],
-            ['horizontal_rule', 'format_clear'],
-        ];
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this.editor.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialRichtextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialRichtextComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"special-richtext w-full mb-3 {{ formControl.styleClasses }}\"\r\n  [id]=\"formControl.elementId\"\r\n  *ngIf=\"formControl && !formControl.hidden\"\r\n>\r\n  <ngx-editor-menu\r\n    [colorPresets]=\"colorPresets\"\r\n    [toolbar]=\"toolbar\"\r\n    [editor]=\"editor\"\r\n  >\r\n  </ngx-editor-menu>\r\n  <ngx-editor\r\n    [editor]=\"editor\"\r\n    [formControl]=\"formControl\"\r\n    [disabled]=\"false\"\r\n    [placeholder]=\"formControl.placeholder\"\r\n  ></ngx-editor>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i3$2.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i3$2.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialRichtextComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, ReactiveFormsModule, NgxEditorModule], template: "<div\r\n  class=\"special-richtext w-full mb-3 {{ formControl.styleClasses }}\"\r\n  [id]=\"formControl.elementId\"\r\n  *ngIf=\"formControl && !formControl.hidden\"\r\n>\r\n  <ngx-editor-menu\r\n    [colorPresets]=\"colorPresets\"\r\n    [toolbar]=\"toolbar\"\r\n    [editor]=\"editor\"\r\n  >\r\n  </ngx-editor-menu>\r\n  <ngx-editor\r\n    [editor]=\"editor\"\r\n    [formControl]=\"formControl\"\r\n    [disabled]=\"false\"\r\n    [placeholder]=\"formControl.placeholder\"\r\n  ></ngx-editor>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
-                type: Input
+class SpecialRichtextComponent {
+    set control(control) {
+        this.formControl = control;
+        if (control.settings.colorPresets)
+            this.colorPresets = control.settings.colorPresets;
+        this.editor = new Editor();
+    }
+    constructor() {
+        this.colorPresets = ['red', 'yellow', 'green', 'blue', 'black'];
+        this.toolbar = [
+            // default value
+            ['bold', 'italic'],
+            ['underline', 'strike'],
+            ['code', 'blockquote'],
+            ['ordered_list', 'bullet_list'],
+            [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
+            ['link', 'image'],
+            ['text_color', 'background_color'],
+            ['align_left', 'align_center', 'align_right', 'align_justify'],
+            ['horizontal_rule', 'format_clear'],
+        ];
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.editor.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialRichtextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialRichtextComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"special-richtext w-full mb-3 {{ formControl.styleClasses }}\"\r\n  [id]=\"formControl.elementId\"\r\n  *ngIf=\"formControl && !formControl.hidden\"\r\n>\r\n  <div class=\"text-md font-medium pl-2 mb-2\" *ngIf=\"formControl.label\">\r\n    {{ formControl.label }}\r\n  </div>\r\n  <ngx-editor-menu\r\n    [colorPresets]=\"colorPresets\"\r\n    [toolbar]=\"toolbar\"\r\n    [editor]=\"editor\"\r\n  >\r\n  </ngx-editor-menu>\r\n  <ngx-editor\r\n    [editor]=\"editor\"\r\n    [formControl]=\"formControl\"\r\n    [required]=\"formControl.required\"\r\n    [disabled]=\"false\"\r\n    [placeholder]=\"formControl.placeholder\"\r\n  ></ngx-editor>\r\n  <div class=\"px-5 mt-2\">\r\n    <ng-container *ngIf=\"formControl.dirty; else tooltipRef\">\r\n      <div\r\n        class=\"text-sm text-rose-500\"\r\n        *ngIf=\"\r\n          formControl.errors\r\n            | errorMessage : formControl.errorMessages as error;\r\n          else tooltipRef\r\n        \"\r\n      >\r\n        {{ error }}\r\n      </div>\r\n    </ng-container>\r\n    <ng-template #tooltipRef>\r\n      <div class=\"text-sm font-medium\">{{ formControl.tooltip }}</div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i3$2.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i3$2.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialRichtextComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        NgxEditorModule,
+                        ErrorMessagePipe,
+                    ], template: "<div\r\n  class=\"special-richtext w-full mb-3 {{ formControl.styleClasses }}\"\r\n  [id]=\"formControl.elementId\"\r\n  *ngIf=\"formControl && !formControl.hidden\"\r\n>\r\n  <div class=\"text-md font-medium pl-2 mb-2\" *ngIf=\"formControl.label\">\r\n    {{ formControl.label }}\r\n  </div>\r\n  <ngx-editor-menu\r\n    [colorPresets]=\"colorPresets\"\r\n    [toolbar]=\"toolbar\"\r\n    [editor]=\"editor\"\r\n  >\r\n  </ngx-editor-menu>\r\n  <ngx-editor\r\n    [editor]=\"editor\"\r\n    [formControl]=\"formControl\"\r\n    [required]=\"formControl.required\"\r\n    [disabled]=\"false\"\r\n    [placeholder]=\"formControl.placeholder\"\r\n  ></ngx-editor>\r\n  <div class=\"px-5 mt-2\">\r\n    <ng-container *ngIf=\"formControl.dirty; else tooltipRef\">\r\n      <div\r\n        class=\"text-sm text-rose-500\"\r\n        *ngIf=\"\r\n          formControl.errors\r\n            | errorMessage : formControl.errorMessages as error;\r\n          else tooltipRef\r\n        \"\r\n      >\r\n        {{ error }}\r\n      </div>\r\n    </ng-container>\r\n    <ng-template #tooltipRef>\r\n      <div class=\"text-sm font-medium\">{{ formControl.tooltip }}</div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
             }] } });
 
-class SpecialFormComponent {
-    set control(form) {
-        this.form = form;
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialFormComponent, selector: "sp-form", inputs: { form: ["control", "form"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"form && !form.hidden\"\r\n  [id]=\"form.elementId\"\r\n  class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n>\r\n  <div\r\n    *ngIf=\"form\"\r\n    [class]=\"\r\n      form.label\r\n        ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\r\n        : 'container'\r\n    \"\r\n  >\r\n    <h1 *ngIf=\"!!form.label\" class=\"font-bold py-3\">{{ form.label }}</h1>\r\n    <div class=\"w-full flex flex-wrap\">\r\n      <ng-template\r\n        *ngFor=\"let control of form.controls | controlsList\"\r\n        controlRender\r\n        [control]=\"control\"\r\n      ></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return FormControlsRenderDirective; }), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(function () { return FormControlsListPipe; }), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"form && !form.hidden\"\r\n  [id]=\"form.elementId\"\r\n  class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n>\r\n  <div\r\n    *ngIf=\"form\"\r\n    [class]=\"\r\n      form.label\r\n        ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\r\n        : 'container'\r\n    \"\r\n  >\r\n    <h1 *ngIf=\"!!form.label\" class=\"font-bold py-3\">{{ form.label }}</h1>\r\n    <div class=\"w-full flex flex-wrap\">\r\n      <ng-template\r\n        *ngFor=\"let control of form.controls | controlsList\"\r\n        controlRender\r\n        [control]=\"control\"\r\n      ></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { form: [{
-                type: Input,
-                args: ['control']
-            }] } });
-class SpecialArrayComponent {
-    set control(formArray) {
-        this.formArray = formArray;
-    }
-    get withFormHeader() {
-        return this.formArray.settings.withFormHeader;
-    }
-    get settings() {
-        return this.formArray.settings;
-    }
-    constructor() { }
-    ngOnInit() { }
-    removeItem(index) {
-        this.formArray.removeAt(index);
-    }
-    addItem() {
-        this.formArray.addItem();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SpecialArrayComponent, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i7$1.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i0.forwardRef(function () { return FormControlsRenderDirective; }), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(function () { return FormControlsListPipe; }), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialArrayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { formArray: [{
-                type: Input,
-                args: ['control']
-            }] } });
-class FormControlsRenderDirective {
-    set controlSetter(control) {
-        this.viewContainer.clear();
-        const component = this.componentsBuffer[control.type];
-        if (component) {
-            const componentRef = this.viewContainer.createComponent(component);
-            componentRef.instance.control = control;
-        }
-    }
-    constructor(viewContainer) {
-        this.viewContainer = viewContainer;
-        this.componentsBuffer = {
-            [EControlTypes.autocomplete]: SpecialAutocompleteComponent,
-            [EControlTypes.checkbox]: SpecialCheckboxComponent,
-            [EControlTypes.date]: SpecialDatepickerComponent,
-            [EControlTypes.dropdown]: SpecialDropdownComponent,
-            [EControlTypes.array]: SpecialArrayComponent,
-            [EControlTypes.input]: SpecialInputComponent,
-            [EControlTypes.multiple]: SpecialMultipleAutocompleteComponent,
-            [EControlTypes.textArea]: SpecialTextAreaComponent,
-            [EControlTypes.label]: SpecialLabelComponent,
-            [EControlTypes.upload]: SpecialUploadComponent,
-            [EControlTypes.form]: SpecialFormComponent,
-            [EControlTypes.richText]: SpecialRichtextComponent,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FormControlsRenderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: FormControlsRenderDirective, selector: "[controlRender]", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FormControlsRenderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[controlRender]`,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { controlSetter: [{
-                type: Input,
-                args: ['control']
+class SpecialFormComponent {
+    set control(form) {
+        this.form = form;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialFormComponent, selector: "sp-form", inputs: { form: ["control", "form"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"form && !form.hidden\"\r\n  [id]=\"form.elementId\"\r\n  class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n>\r\n  <div\r\n    *ngIf=\"form\"\r\n    [class]=\"\r\n      form.label\r\n        ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\r\n        : 'container'\r\n    \"\r\n  >\r\n    <h1 *ngIf=\"!!form.label\" class=\"font-bold py-3\">{{ form.label }}</h1>\r\n    <div class=\"w-full flex flex-wrap\">\r\n      <ng-template\r\n        *ngFor=\"let control of form.controls | controlsList\"\r\n        controlRender\r\n        [control]=\"control\"\r\n      ></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1$1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"form && !form.hidden\"\r\n  [id]=\"form.elementId\"\r\n  class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n>\r\n  <div\r\n    *ngIf=\"form\"\r\n    [class]=\"\r\n      form.label\r\n        ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\r\n        : 'container'\r\n    \"\r\n  >\r\n    <h1 *ngIf=\"!!form.label\" class=\"font-bold py-3\">{{ form.label }}</h1>\r\n    <div class=\"w-full flex flex-wrap\">\r\n      <ng-template\r\n        *ngFor=\"let control of form.controls | controlsList\"\r\n        controlRender\r\n        [control]=\"control\"\r\n      ></ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { form: [{
+                type: Input,
+                args: ['control']
+            }] } });
+class SpecialArrayComponent {
+    set control(formArray) {
+        this.formArray = formArray;
+    }
+    get withFormHeader() {
+        return this.formArray.settings.withFormHeader;
+    }
+    get settings() {
+        return this.formArray.settings;
+    }
+    constructor() { }
+    ngOnInit() { }
+    removeItem(index) {
+        this.formArray.removeAt(index);
+    }
+    addItem() {
+        this.formArray.addItem();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SpecialArrayComponent, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => i7$1.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialArrayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"formArray && !formArray.hidden\"\r\n  [id]=\"formArray.elementId\"\r\n  class=\"special-form-array w-full box-border p-2 {{ formArray.styleClasses }}\"\r\n>\r\n  <div class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\">\r\n    <h1 *ngIf=\"!!formArray.label\" class=\"font-bold py-3\">\r\n      {{ formArray.label }}\r\n    </h1>\r\n    <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n      <div\r\n        *ngIf=\"formArray.form\"\r\n        [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n        class=\"grid gap-4 grid-cols-12\"\r\n      >\r\n        <ng-container *ngIf=\"!withFormHeader; else FORMHEADERREF\">\r\n          <h2\r\n            [class]=\"item.styleClasses\"\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n          >\r\n            {{ item.label }}\r\n          </h2>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          ></div>\r\n        </ng-container>\r\n        <ng-template #FORMHEADERREF>\r\n          <ng-template\r\n            *ngFor=\"let item of formArray.form.controls | controlsList\"\r\n            controlRender\r\n            [control]=\"item\"\r\n          ></ng-template>\r\n          <div\r\n            *ngIf=\"settings.withActionButtons\"\r\n            class=\"\r\n              col-start-7 col-end-13\r\n              md:col-start-13 md:col-end-16\r\n              pb-5\r\n              my-auto\r\n              ml-auto\r\n              md:m-auto\r\n            \"\r\n          >\r\n            <button\r\n              mat-flat-button\r\n              color=\"primary\"\r\n              [disabled]=\"formArray.form.invalid\"\r\n              (click)=\"addItem()\"\r\n            >\r\n              {{settings.addActionLabel || 'Add'}}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n      <div\r\n        class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\"\r\n        *ngFor=\"let formGroup of formArray.controls; let i = index\"\r\n      >\r\n        <ng-template\r\n          *ngFor=\"let item of formGroup.controls | controlsList\"\r\n          controlRender\r\n          [control]=\"item\"\r\n        ></ng-template>\r\n        <div\r\n          class=\"\r\n            col-start-7 col-end-13\r\n            md:col-start-13 md:col-end-16\r\n            pb-5\r\n            my-auto\r\n            ml-auto\r\n            md:m-auto\r\n          \"\r\n        >\r\n          <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n            {{ settings.removeActionLabel || \"Remove\" }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formArray: [{
+                type: Input,
+                args: ['control']
+            }] } });
+class FormControlsRenderDirective {
+    set controlSetter(control) {
+        this.viewContainer.clear();
+        const component = this.componentsBuffer[control.type];
+        if (component) {
+            const componentRef = this.viewContainer.createComponent(component);
+            componentRef.instance.control = control;
+        }
+    }
+    constructor(viewContainer) {
+        this.viewContainer = viewContainer;
+        this.componentsBuffer = {
+            [EControlTypes.autocomplete]: SpecialAutocompleteComponent,
+            [EControlTypes.checkbox]: SpecialCheckboxComponent,
+            [EControlTypes.date]: SpecialDatepickerComponent,
+            [EControlTypes.dropdown]: SpecialDropdownComponent,
+            [EControlTypes.array]: SpecialArrayComponent,
+            [EControlTypes.input]: SpecialInputComponent,
+            [EControlTypes.multiple]: SpecialMultipleAutocompleteComponent,
+            [EControlTypes.textArea]: SpecialTextAreaComponent,
+            [EControlTypes.label]: SpecialLabelComponent,
+            [EControlTypes.upload]: SpecialUploadComponent,
+            [EControlTypes.form]: SpecialFormComponent,
+            [EControlTypes.richText]: SpecialRichtextComponent,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormControlsRenderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: FormControlsRenderDirective, selector: "[controlRender]", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormControlsRenderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[controlRender]`,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { controlSetter: [{
+                type: Input,
+                args: ['control']
             }] } });
 
-class SpecialFormModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
-            FormControlsRenderDirective,
-            SpecialFormComponent], imports: [CommonModule,
-            FormControlsListPipe,
-            MatButtonModule,
-            SpecialRichtextComponent,
-            SpecialDropdownComponent,
-            SpecialInputComponent,
-            SpecialAutocompleteComponent,
-            SpecialDatepickerComponent,
-            SpecialLabelComponent,
-            SpecialMultipleAutocompleteComponent,
-            SpecialCheckboxComponent,
-            SpecialTextAreaComponent,
-            SpecialUploadComponent], exports: [SpecialArrayComponent,
-            FormControlsRenderDirective,
-            SpecialFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
-            MatButtonModule,
-            SpecialRichtextComponent,
-            SpecialDropdownComponent,
-            SpecialInputComponent,
-            SpecialAutocompleteComponent,
-            SpecialDatepickerComponent,
-            SpecialLabelComponent,
-            SpecialMultipleAutocompleteComponent,
-            SpecialCheckboxComponent,
-            SpecialTextAreaComponent,
-            SpecialUploadComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SpecialArrayComponent,
-                        FormControlsRenderDirective,
-                        SpecialFormComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormControlsListPipe,
-                        MatButtonModule,
-                        SpecialRichtextComponent,
-                        SpecialDropdownComponent,
-                        SpecialInputComponent,
-                        SpecialAutocompleteComponent,
-                        SpecialDatepickerComponent,
-                        SpecialLabelComponent,
-                        SpecialMultipleAutocompleteComponent,
-                        SpecialCheckboxComponent,
-                        SpecialTextAreaComponent,
-                        SpecialUploadComponent,
-                    ],
-                    exports: [
-                        SpecialArrayComponent,
-                        FormControlsRenderDirective,
-                        SpecialFormComponent,
-                    ],
-                }]
+class SpecialFormModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
+            FormControlsRenderDirective,
+            SpecialFormComponent], imports: [CommonModule,
+            FormControlsListPipe,
+            MatButtonModule,
+            SpecialRichtextComponent,
+            SpecialDropdownComponent,
+            SpecialInputComponent,
+            SpecialAutocompleteComponent,
+            SpecialDatepickerComponent,
+            SpecialLabelComponent,
+            SpecialMultipleAutocompleteComponent,
+            SpecialCheckboxComponent,
+            SpecialTextAreaComponent,
+            SpecialUploadComponent], exports: [SpecialArrayComponent,
+            FormControlsRenderDirective,
+            SpecialFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
+            MatButtonModule,
+            SpecialRichtextComponent,
+            SpecialDropdownComponent,
+            SpecialInputComponent,
+            SpecialAutocompleteComponent,
+            SpecialDatepickerComponent,
+            SpecialLabelComponent,
+            SpecialMultipleAutocompleteComponent,
+            SpecialCheckboxComponent,
+            SpecialTextAreaComponent,
+            SpecialUploadComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SpecialArrayComponent,
+                        FormControlsRenderDirective,
+                        SpecialFormComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormControlsListPipe,
+                        MatButtonModule,
+                        SpecialRichtextComponent,
+                        SpecialDropdownComponent,
+                        SpecialInputComponent,
+                        SpecialAutocompleteComponent,
+                        SpecialDatepickerComponent,
+                        SpecialLabelComponent,
+                        SpecialMultipleAutocompleteComponent,
+                        SpecialCheckboxComponent,
+                        SpecialTextAreaComponent,
+                        SpecialUploadComponent,
+                    ],
+                    exports: [
+                        SpecialArrayComponent,
+                        FormControlsRenderDirective,
+                        SpecialFormComponent,
+                    ],
+                }]
         }] });
 
-class SpecialFormControl extends FormControl {
-    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, length, placeholder, readOnly, required, tooltip, errorMessages, disabled, }) {
-        super(defaultValue, validators, asyncValidators);
-        this.name = name;
-        this.placeholder = placeholder;
-        this.label = label;
-        this.tooltip = tooltip;
-        this.icon = icon;
-        this.elementId = elementId;
-        this.settings = settings;
-        this.type = type;
-        this.styleClasses = styleClasses;
-        this.hidden = hidden;
-        this.length = length;
-        this.readOnly = readOnly;
-        this.required = required;
-        this.errorMessages = errorMessages;
-        disabled ? this.disable() : this.enable();
-    }
-    markAsDirty(opts) {
-        super.markAsDirty(opts);
-        this.updateValueAndValidity();
-    }
-    markAsPristine(opts) {
-        super.markAsPristine(opts);
-        this.updateValueAndValidity();
-    }
-    markAsTouched(opts) {
-        super.markAsTouched(opts);
-        this.updateValueAndValidity();
-    }
-    markAsUntouched(opts) {
-        super.markAsUntouched(opts);
-        this.updateValueAndValidity();
-    }
-    markAllAsTouched() {
-        super.markAllAsTouched();
-        this.updateValueAndValidity();
-    }
-    setReadOnly(status = true) {
-        this.readOnly = status;
-    }
-    setDisabled(status = true) {
-        status ? this.disable() : this.enable();
-    }
-    setHidden(status = true) {
-        this.hidden = status;
-    }
-}
-class SpecialFormGroup extends FormGroup {
-    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, length, placeholder, readOnly, required, tooltip, disabled, }, controls) {
-        super(controls, validators, asyncValidators);
-        this.name = name;
-        this.placeholder = placeholder;
-        this.label = label;
-        this.tooltip = tooltip;
-        this.icon = icon;
-        this.elementId = elementId;
-        this.settings = settings;
-        this.type = type;
-        this.styleClasses = styleClasses;
-        this.hidden = hidden;
-        this.length = length;
-        this.readOnly = readOnly;
-        this.required = required;
-        this.defaultValue = defaultValue;
-        disabled ? this.disable() : this.enable();
-    }
-    getDirty() {
-        this.markAsDirty();
-        Object.values(this.controls).forEach((control) => {
-            if (control instanceof SpecialFormControl) {
-                control.markAsDirty();
-            }
-            else if (control instanceof SpecialFormGroup) {
-                control.getDirty();
-            }
-            else if (control instanceof SpecialFormArray) {
-                control.getDirty();
-            }
-        });
-    }
-    specialReset(value = {}) {
-        const aux = {};
-        Object.entries(this.controls).map(([key, control]) => {
-            if (control instanceof SpecialFormControl) {
-                aux[key] = control.defaultValue;
-            }
-            else if (control instanceof SpecialFormArray) {
-                control.clear();
-            }
-        });
-        this.reset({ ...aux, ...value });
-    }
-    setReadOnly(status = true) {
-        Object.values(this.controls).map((value) => {
-            if (value instanceof SpecialFormControl ||
-                value instanceof SpecialFormArray ||
-                value instanceof SpecialFormGroup) {
-                value.setReadOnly(status);
-            }
-        });
-    }
-    setReadOnlyByFields(fieldsObject) {
-        Object.entries(fieldsObject).map(([key, value]) => {
-            const control = this.controls[key];
-            if (control instanceof SpecialFormControl) {
-                control.readOnly = value;
-            }
-        });
-    }
-    setHiddenByFields(fields) {
-        Object.entries(fields).map(([key, value]) => {
-            const control = this.controls[key];
-            if (control instanceof SpecialFormControl) {
-                control.hidden = value;
-            }
-        });
-    }
-    setDisabled(status) {
-        Object.values(this.controls).map((value) => {
-            if (value instanceof SpecialFormControl ||
-                value instanceof SpecialFormArray ||
-                value instanceof SpecialFormGroup) {
-                value.setDisabled(status);
-            }
-        });
-    }
-    setDisabledByFields(fieldsObject) {
-        Object.entries(fieldsObject).map((entries) => {
-            if (this.controls[entries[0]] instanceof SpecialFormControl) {
-                entries[1]
-                    ? this.controls[entries[0]].enable()
-                    : this.controls[entries[0]].disable();
-            }
-        });
-    }
-    /**
-     * donde value es el objeto semilla y detailForm es un arreglo de form key para dar un marco al formarray
-     */
-    setFormValue(value) {
-        this.specialReset(value);
-        Object.entries(this.controls)
-            .filter(([_key, control]) => control instanceof SpecialFormArray)
-            .map(([key, control]) => {
-            control.fillFormArray(value[key]);
-        });
-    }
-    /**
-     * Método que retorna
-     */
-    getIdPkey() {
-        return Object.values(this.controls).find((control) => control instanceof SpecialFormControl && control.type === 'PRIMARY-KEY');
-    }
-}
-class SpecialFormArray extends FormArray {
-    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, placeholder, readOnly, required, tooltip, errorMessages, disabled, }, formCreation, controls) {
-        super(controls, validators, asyncValidators);
-        this.formCreation = formCreation;
-        this.form = this.formCreation();
-        this.name = name;
-        this.placeholder = placeholder;
-        this.label = label;
-        this.tooltip = tooltip;
-        this.icon = icon;
-        this.elementId = elementId;
-        this.settings = settings;
-        this.type = type;
-        this.styleClasses = styleClasses;
-        this.hidden = hidden;
-        this.readOnly = readOnly;
-        this.required = required;
-        this.defaultValue = defaultValue;
-        this.errorMessages = errorMessages;
-        disabled ? this.disable() : this.enable();
-    }
-    fillFormArray(data) {
-        this.form.reset();
-        this.clear();
-        data.forEach((item) => {
-            const form = this.formCreation(item);
-            this.push(form);
-        });
-    }
-    addItem() {
-        const form = this.formCreation(this.form.value);
-        this.form.specialReset();
-        this.push(form);
-        this.markAsDirty();
-    }
-    specialPush(index) {
-        const form = this.formCreation(this.form.value);
-        if (!index)
-            this.push(form);
-        else
-            this.controls[index].reset(this.form.value);
-    }
-    specialInsert(index = 0) {
-        const form = this.formCreation(this.form.value);
-        this.insert(index, form);
-    }
-    specialEdit(index, newValue) {
-        this.controls[index].reset({ ...this.controls[index].value, ...newValue });
-        this.markAsDirty();
-    }
-    /**
-     * Vuelve todos los controles del formArray de lectura o de sololectura
-     * @param status
-     */
-    setReadOnly(status) {
-        this.readOnly = status;
-        this.controls.forEach((control) => {
-            if (control instanceof SpecialFormGroup) {
-                control.setReadOnly(status);
-            }
-        });
-    }
-    /**
-     * Vuelve todos los controles del formArray habilitados o deshabilitados
-     * @param status
-     */
-    setDisabled(status) {
-        status ? this.disable() : this.enable();
-        this.controls.forEach((control) => {
-            if (control instanceof SpecialFormGroup) {
-                control.setDisabled(status);
-            }
-        });
-    }
-    /**
-     * Permite editar un control especifico.
-     * @param index
-     */
-    editControl(index) {
-        this.form.reset(this.controls[index].value);
-    }
-    getDirty() {
-        this.markAsDirty();
-        this.form.getDirty();
-        this.controls.forEach((item) => {
-            item.getDirty();
-        });
-    }
-    recursiveFillForm(form, data) {
-        Object.entries(form.controls).map(([key, control]) => {
-            if (control instanceof FormControl) {
-                control.setValue(data[key]);
-            }
-            else if (control instanceof FormArray) {
-                data[key].forEach(() => { });
-            }
-            else if (control instanceof FormGroup) {
-                control.reset(data[key]);
-            }
-        });
-        return form;
-    }
+class SpecialFormControl extends FormControl {
+    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, length, placeholder, readOnly, required, tooltip, errorMessages, disabled, }) {
+        super(defaultValue, validators, asyncValidators);
+        this.name = name;
+        this.placeholder = placeholder;
+        this.label = label;
+        this.tooltip = tooltip;
+        this.icon = icon;
+        this.elementId = elementId;
+        this.settings = settings;
+        this.type = type;
+        this.styleClasses = styleClasses;
+        this.hidden = hidden;
+        this.length = length;
+        this.readOnly = readOnly;
+        this.required = required;
+        this.errorMessages = errorMessages;
+        disabled ? this.disable() : this.enable();
+    }
+    setReadOnly(status = true) {
+        this.readOnly = status;
+    }
+    setDisabled(status = true) {
+        status ? this.disable() : this.enable();
+    }
+    setHidden(status = true) {
+        this.hidden = status;
+    }
+}
+class SpecialFormGroup extends FormGroup {
+    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, length, placeholder, readOnly, required, tooltip, disabled, }, controls) {
+        super(controls, validators, asyncValidators);
+        this.name = name;
+        this.placeholder = placeholder;
+        this.label = label;
+        this.tooltip = tooltip;
+        this.icon = icon;
+        this.elementId = elementId;
+        this.settings = settings;
+        this.type = type;
+        this.styleClasses = styleClasses;
+        this.hidden = hidden;
+        this.length = length;
+        this.readOnly = readOnly;
+        this.required = required;
+        this.defaultValue = defaultValue;
+        disabled ? this.disable() : this.enable();
+    }
+    getDirty() {
+        this.markAsDirty();
+        Object.values(this.controls).forEach((control) => {
+            if (control instanceof SpecialFormControl) {
+                control.markAsDirty();
+            }
+            else if (control instanceof SpecialFormGroup) {
+                control.getDirty();
+            }
+            else if (control instanceof SpecialFormArray) {
+                control.getDirty();
+            }
+        });
+    }
+    specialReset(value = {}) {
+        const aux = {};
+        Object.entries(this.controls).map(([key, control]) => {
+            if (control instanceof SpecialFormControl) {
+                aux[key] = control.defaultValue;
+            }
+            else if (control instanceof SpecialFormArray) {
+                control.clear();
+            }
+        });
+        this.reset({ ...aux, ...value });
+    }
+    setReadOnly(status = true) {
+        Object.values(this.controls).map((value) => {
+            if (value instanceof SpecialFormControl ||
+                value instanceof SpecialFormArray ||
+                value instanceof SpecialFormGroup) {
+                value.setReadOnly(status);
+            }
+        });
+    }
+    setReadOnlyByFields(fieldsObject) {
+        Object.entries(fieldsObject).map(([key, value]) => {
+            const control = this.controls[key];
+            if (control instanceof SpecialFormControl) {
+                control.readOnly = value;
+            }
+        });
+    }
+    setHiddenByFields(fields) {
+        Object.entries(fields).map(([key, value]) => {
+            const control = this.controls[key];
+            if (control instanceof SpecialFormControl) {
+                control.hidden = value;
+            }
+        });
+    }
+    setDisabled(status) {
+        Object.values(this.controls).map((value) => {
+            if (value instanceof SpecialFormControl ||
+                value instanceof SpecialFormArray ||
+                value instanceof SpecialFormGroup) {
+                value.setDisabled(status);
+            }
+        });
+    }
+    setDisabledByFields(fieldsObject) {
+        Object.entries(fieldsObject).map((entries) => {
+            if (this.controls[entries[0]] instanceof SpecialFormControl) {
+                entries[1]
+                    ? this.controls[entries[0]].enable()
+                    : this.controls[entries[0]].disable();
+            }
+        });
+    }
+    /**
+     * donde value es el objeto semilla y detailForm es un arreglo de form key para dar un marco al formarray
+     */
+    setFormValue(value) {
+        this.specialReset(value);
+        Object.entries(this.controls)
+            .filter(([_key, control]) => control instanceof SpecialFormArray)
+            .map(([key, control]) => {
+            control.fillFormArray(value[key]);
+        });
+    }
+    /**
+     * Método que retorna
+     */
+    getIdPkey() {
+        return Object.values(this.controls).find((control) => control instanceof SpecialFormControl && control.type === 'PRIMARY-KEY');
+    }
+}
+class SpecialFormArray extends FormArray {
+    constructor({ name, settings, type, validators, asyncValidators, elementId, styleClasses, defaultValue, hidden, icon, label, placeholder, readOnly, required, tooltip, errorMessages, disabled, }, formCreation, controls) {
+        super(controls, validators, asyncValidators);
+        this.formCreation = formCreation;
+        this.form = this.formCreation();
+        this.name = name;
+        this.placeholder = placeholder;
+        this.label = label;
+        this.tooltip = tooltip;
+        this.icon = icon;
+        this.elementId = elementId;
+        this.settings = settings;
+        this.type = type;
+        this.styleClasses = styleClasses;
+        this.hidden = hidden;
+        this.readOnly = readOnly;
+        this.required = required;
+        this.defaultValue = defaultValue;
+        this.errorMessages = errorMessages;
+        disabled ? this.disable() : this.enable();
+    }
+    fillFormArray(data) {
+        this.form.reset();
+        this.clear();
+        data.forEach((item) => {
+            const form = this.formCreation(item);
+            this.push(form);
+        });
+    }
+    addItem() {
+        const form = this.formCreation(this.form.value);
+        this.form.specialReset();
+        this.push(form);
+        this.markAsDirty();
+    }
+    specialPush(index) {
+        const form = this.formCreation(this.form.value);
+        if (!index)
+            this.push(form);
+        else
+            this.controls[index].reset(this.form.value);
+    }
+    specialInsert(index = 0) {
+        const form = this.formCreation(this.form.value);
+        this.insert(index, form);
+    }
+    specialEdit(index, newValue) {
+        this.controls[index].reset({ ...this.controls[index].value, ...newValue });
+        this.markAsDirty();
+    }
+    /**
+     * Vuelve todos los controles del formArray de lectura o de sololectura
+     * @param status
+     */
+    setReadOnly(status) {
+        this.readOnly = status;
+        this.controls.forEach((control) => {
+            if (control instanceof SpecialFormGroup) {
+                control.setReadOnly(status);
+            }
+        });
+    }
+    /**
+     * Vuelve todos los controles del formArray habilitados o deshabilitados
+     * @param status
+     */
+    setDisabled(status) {
+        status ? this.disable() : this.enable();
+        this.controls.forEach((control) => {
+            if (control instanceof SpecialFormGroup) {
+                control.setDisabled(status);
+            }
+        });
+    }
+    /**
+     * Permite editar un control especifico.
+     * @param index
+     */
+    editControl(index) {
+        this.form.reset(this.controls[index].value);
+    }
+    getDirty() {
+        this.markAsDirty();
+        this.form.getDirty();
+        this.controls.forEach((item) => {
+            item.getDirty();
+        });
+    }
+    recursiveFillForm(form, data) {
+        Object.entries(form.controls).map(([key, control]) => {
+            if (control instanceof FormControl) {
+                control.setValue(data[key]);
+            }
+            else if (control instanceof FormArray) {
+                data[key].forEach(() => { });
+            }
+            else if (control instanceof FormGroup) {
+                control.reset(data[key]);
+            }
+        });
+        return form;
+    }
 }
 
-class SpecialFormBuilderService {
-    constructor() {
-        this.defectField = {
-            asyncValidators: null,
-            validators: null,
-            defaultValue: null,
-            elementId: '',
-            hidden: false,
-            icon: '',
-            label: '',
-            disabled: false,
-            length: 0,
-            placeholder: '',
-            readOnly: false,
-            required: false,
-            styleClasses: '',
-            errorMessages: {},
-            tooltip: '',
-        };
-        this.inputDefectField = {
-            ...this.defectField,
-            settings: {},
-            type: EControlTypes.input,
-            name: '',
-        };
-        this.formDefectField = {
-            ...this.defectField,
-            settings: {
-                formFields: {},
-            },
-            type: EControlTypes.form,
-            name: '',
-        };
-        this.arrayDefectField = {
-            ...this.defectField,
-            settings: {
-                formFields: {},
-            },
-            type: EControlTypes.array,
-            name: '',
-        };
-    }
-    control(field) {
-        const formField = {
-            ...this.inputDefectField,
-            ...field,
-        };
-        const { control } = this.setFormControl(formField);
-        return control;
-    }
-    group(fields, parentField = {}) {
-        return this.formGenerator(this.fieldDataToArray(fields), parentField);
-    }
-    array() { }
-    fieldDataToArray(fields) {
-        return Object.entries(fields).map(([name, field]) => this.setDefectFieldOptions(name, field));
-    }
-    setDefectFieldOptions(name, field) {
-        return {
-            ...this.inputDefectField,
-            ...field,
-            name,
-        };
-    }
-    formGenerator(fields, parentField = {}) {
-        const formField = {
-            ...this.formDefectField,
-            ...parentField,
-        };
-        const structure = fields
-            .map((field) => this.getControlAndNameByType(field))
-            .reduce((prev, { name, control }) => ({
-            ...prev,
-            [name]: control,
-        }), {});
-        return new SpecialFormGroup(formField, structure);
-    }
-    getControlAndNameByType(field) {
-        switch (field.type) {
-            case EControlTypes.array:
-                return this.setFormArray(field);
-            case EControlTypes.form:
-                return this.setFormGroup(field);
-            default:
-                return this.setFormControl(field);
-        }
-    }
-    setFormGroup(field) {
-        const control = this.formGenerator(this.fieldDataToArray(field.settings.formFields), field);
-        return { control, name: field.name };
-    }
-    setFormArray(field) {
-        const auxForm = (value = {}) => {
-            const auxForm = this.formGenerator(this.fieldDataToArray(field.settings.formFields), {});
-            auxForm.reset(value);
-            return auxForm;
-        };
-        if (field.required) {
-            field.validators = this.setValidatorsArray(field.validators, [
-                this.arrayLengthRequired,
-            ]);
-        }
-        return {
-            name: field.name,
-            control: new SpecialFormArray(field, auxForm, []),
-        };
-    }
-    setFormControl(field) {
-        const validators = [];
-        if (field.required)
-            validators.push(this.setRequiredValidator(field));
-        if (field.length)
-            validators.push(Validators.maxLength(field.length));
-        field.validators = this.setValidatorsArray(field.validators, validators);
-        return {
-            name: field.name,
-            control: new SpecialFormControl(field),
-        };
-    }
-    setRequiredValidator(field) {
-        if (field.type !== EControlTypes.autocomplete) {
-            return Validators.required;
-        }
-        return (control) => !!control.value && control.value instanceof Object
-            ? null
-            : { required: true };
-    }
-    setValidatorsArray(validators, newValidators) {
-        if (!validators) {
-            return newValidators;
-        }
-        return validators instanceof Array
-            ? [...validators, ...newValidators]
-            : [validators, ...newValidators];
-    }
-    arrayLengthRequired(control) {
-        if (control.value.length) {
-            return {};
-        }
-        return { noItems: 'NO_SELECTED_ITEM' };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormBuilderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SpecialFormBuilderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
+class SpecialFormBuilderService {
+    constructor() {
+        this.defectField = {
+            asyncValidators: null,
+            validators: null,
+            defaultValue: null,
+            elementId: '',
+            hidden: false,
+            icon: '',
+            label: '',
+            disabled: false,
+            length: 0,
+            placeholder: '',
+            readOnly: false,
+            required: false,
+            styleClasses: '',
+            errorMessages: {},
+            tooltip: '',
+        };
+        this.inputDefectField = {
+            ...this.defectField,
+            settings: {},
+            type: EControlTypes.input,
+            name: '',
+        };
+        this.formDefectField = {
+            ...this.defectField,
+            settings: {
+                formFields: {},
+            },
+            type: EControlTypes.form,
+            name: '',
+        };
+        this.arrayDefectField = {
+            ...this.defectField,
+            settings: {
+                formFields: {},
+            },
+            type: EControlTypes.array,
+            name: '',
+        };
+    }
+    control(field) {
+        const formField = {
+            ...this.inputDefectField,
+            ...field,
+        };
+        const { control } = this.setFormControl(formField);
+        return control;
+    }
+    group(fields, parentField = {}) {
+        return this.formGenerator(this.fieldDataToArray(fields), parentField);
+    }
+    array() { }
+    fieldDataToArray(fields) {
+        return Object.entries(fields).map(([name, field]) => this.setDefectFieldOptions(name, field));
+    }
+    setDefectFieldOptions(name, field) {
+        return {
+            ...this.inputDefectField,
+            ...field,
+            name,
+        };
+    }
+    formGenerator(fields, parentField = {}) {
+        const formField = {
+            ...this.formDefectField,
+            ...parentField,
+        };
+        const structure = fields
+            .map((field) => this.getControlAndNameByType(field))
+            .reduce((prev, { name, control }) => ({
+            ...prev,
+            [name]: control,
+        }), {});
+        return new SpecialFormGroup(formField, structure);
+    }
+    getControlAndNameByType(field) {
+        switch (field.type) {
+            case EControlTypes.array:
+                return this.setFormArray(field);
+            case EControlTypes.form:
+                return this.setFormGroup(field);
+            default:
+                return this.setFormControl(field);
+        }
+    }
+    setFormGroup(field) {
+        const control = this.formGenerator(this.fieldDataToArray(field.settings.formFields), field);
+        return { control, name: field.name };
+    }
+    setFormArray(field) {
+        const auxForm = (value = {}) => {
+            const auxForm = this.formGenerator(this.fieldDataToArray(field.settings.formFields), {});
+            auxForm.reset(value);
+            return auxForm;
+        };
+        if (field.required) {
+            field.validators = this.setValidatorsArray(field.validators, [
+                this.arrayLengthRequired,
+            ]);
+        }
+        return {
+            name: field.name,
+            control: new SpecialFormArray(field, auxForm, []),
+        };
+    }
+    setFormControl(field) {
+        const validators = [];
+        if (field.required)
+            validators.push(this.setRequiredValidator(field));
+        if (field.length)
+            validators.push(Validators.maxLength(field.length));
+        field.validators = this.setValidatorsArray(field.validators, validators);
+        return {
+            name: field.name,
+            control: new SpecialFormControl(field),
+        };
+    }
+    setRequiredValidator(field) {
+        if (field.type !== EControlTypes.autocomplete) {
+            return Validators.required;
+        }
+        return (control) => !!control.value && control.value instanceof Object
+            ? null
+            : { required: true };
+    }
+    setValidatorsArray(validators, newValidators) {
+        if (!validators) {
+            return newValidators;
+        }
+        return validators instanceof Array
+            ? [...validators, ...newValidators]
+            : [validators, ...newValidators];
+    }
+    arrayLengthRequired(control) {
+        if (control.value.length) {
+            return {};
+        }
+        return { noItems: 'NO_SELECTED_ITEM' };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormBuilderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SpecialFormBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
-class ErrorStateMatcherService {
-    isErrorState(control) {
-        return control && control.invalid && control.dirty;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ErrorStateMatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ErrorStateMatcherService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ErrorStateMatcherService, decorators: [{
-            type: Injectable
+class ErrorStateMatcherService {
+    isErrorState(control) {
+        return control && control.invalid && control.dirty;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ErrorStateMatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ErrorStateMatcherService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ErrorStateMatcherService, decorators: [{
+            type: Injectable
         }] });
 
-class ISpecialControl {
+class ISpecialControl {
 }
 
-const currencyInputMask = createMask({
-    alias: 'numeric',
-    groupSeparator: ',',
-    autoUnmask: true,
-    digits: 2,
-    digitsOptional: false,
-    prefix: '$ ',
-    placeholder: '0',
+const currencyInputMask = createMask({
+    alias: 'numeric',
+    groupSeparator: ',',
+    autoUnmask: true,
+    digits: 2,
+    digitsOptional: false,
+    prefix: '$ ',
+    placeholder: '0',
 });
 
 const numberMask = (max = 1000) => createMask({ alias: 'numeric', min: 0, max });
 
-/*
- * Public API Surface of special-forms
+/*
+ * Public API Surface of special-forms
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { EControlTypes, ErrorMessagePipe, ErrorStateMatcherService, FormControlsListPipe, FormControlsRenderDirective, ISpecialControl, SpecialArrayComponent, SpecialAutocompleteComponent, SpecialCheckboxComponent, SpecialDatepickerComponent, SpecialDropdownComponent, SpecialFormArray, SpecialFormBuilderService, SpecialFormComponent, SpecialFormControl, SpecialFormGroup, SpecialFormModule, SpecialInputComponent, SpecialLabelComponent, SpecialMultipleAutocompleteComponent, SpecialRichtextComponent, SpecialTextAreaComponent, SpecialUploadComponent, TextByFunctionPipe, currencyInputMask, numberMask };