special-forms 0.0.1

package/fesm2015/special-forms.mjs

@@ -0,0 +1,1292 @@
+import * as i0 from '@angular/core';
+import { Pipe, Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, Directive, Injectable } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@ngneat/input-mask';
+import { InputMaskModule } from '@ngneat/input-mask';
+import * as i1$1 from '@angular/material/form-field';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i7 from '@angular/forms';
+import { ReactiveFormsModule, FormControl, FormsModule, FormGroup, FormArray, Validators } from '@angular/forms';
+import * as i7$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i4 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { debounceTime } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import * as i3$2 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i9 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i2$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2$2 from '@angular/cdk/text-field';
+import * as i1$2 from '@angular/platform-browser';
+import * as i2$3 from 'ngx-dropzone';
+import { NgxDropzoneModule } from 'ngx-dropzone';
+import { EControlTypes as EControlTypes$1 } from '@lib/core/aux-data/control-types.enum';
+
+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;
+    }
+}
+ErrorMessagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ErrorMessagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: ErrorMessagePipe, name: "errorMessage" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ErrorMessagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "errorMessage",
+                }]
+        }] });
+
+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();
+        }
+    }
+}
+SpecialInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialInputComponent, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control\"\n  [id]=\"control.elementId\"\n  class=\"w-full {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'standard'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    (blur)=\"onBlurAction()\"\n    (keydown.enter)=\"onEnterClick()\"\n    [inputMask]=\"settings?.mask\"\n    autocomplete=\"off\"\n    [type]=\"settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <button\n    *ngIf=\"settings?.icon\"\n    mat-icon-button\n    matSuffix\n    (click)=\"iconClick($event)\"\n  >\n    <mat-icon>\n      {{ settings.icon }}\n    </mat-icon>\n  </button>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i2.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  *ngIf=\"control\"\n  [id]=\"control.elementId\"\n  class=\"w-full {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'standard'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    (blur)=\"onBlurAction()\"\n    (keydown.enter)=\"onEnterClick()\"\n    [inputMask]=\"settings?.mask\"\n    autocomplete=\"off\"\n    [type]=\"settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <button\n    *ngIf=\"settings?.icon\"\n    mat-icon-button\n    matSuffix\n    (click)=\"iconClick($event)\"\n  >\n    <mat-icon>\n      {{ settings.icon }}\n    </mat-icon>\n  </button>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
+                type: Input
+            }] } });
+
+class ErrorMessagePipeModule {
+}
+ErrorMessagePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ErrorMessagePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ErrorMessagePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: ErrorMessagePipeModule, declarations: [ErrorMessagePipe], imports: [CommonModule], exports: [ErrorMessagePipe] });
+ErrorMessagePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ErrorMessagePipeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ErrorMessagePipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ErrorMessagePipe],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [ErrorMessagePipe],
+                }]
+        }] });
+
+class TextByFunctionPipe {
+    transform(value, field) {
+        if (field instanceof Function) {
+            return field(value);
+        }
+        else if (value instanceof Object) {
+            return value[field];
+        }
+        else {
+            return value;
+        }
+    }
+}
+TextByFunctionPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TextByFunctionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: TextByFunctionPipe, name: "textByFunction" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TextByFunctionPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'textByFunction' }]
+        }] });
+
+class TextByFunctionPipeModule {
+}
+TextByFunctionPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TextByFunctionPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TextByFunctionPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: TextByFunctionPipeModule, declarations: [TextByFunctionPipe], imports: [CommonModule], exports: [TextByFunctionPipe] });
+TextByFunctionPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TextByFunctionPipeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TextByFunctionPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TextByFunctionPipe],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [TextByFunctionPipe],
+                }]
+        }] });
+
+class SpecialInputModule {
+}
+SpecialInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialInputModule, declarations: [SpecialInputComponent], imports: [InputMaskModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule], exports: [SpecialInputComponent] });
+SpecialInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialInputModule, imports: [InputMaskModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialInputComponent],
+                    imports: [
+                        InputMaskModule,
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipeModule
+                    ],
+                    exports: [SpecialInputComponent],
+                }]
+        }] });
+
+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);
+    }
+}
+SpecialDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialDropdownComponent, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\r\n  *ngIf=\"control\"\r\n  [id]=\"control.elementId\"\r\n  class=\"w-full {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'standard'\"\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: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\r\n  *ngIf=\"control\"\r\n  [id]=\"control.elementId\"\r\n  class=\"w-full {{ control.styleClasses }}\"\r\n  [appearance]=\"control.label ? 'outline' : 'standard'\"\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 SpecialDropdownModule {
+}
+SpecialDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialDropdownModule, declarations: [SpecialDropdownComponent], imports: [CommonModule,
+        MatSelectModule,
+        ReactiveFormsModule,
+        ErrorMessagePipeModule,
+        MatIconModule,
+        MatButtonModule,
+        TextByFunctionPipeModule], exports: [SpecialDropdownComponent] });
+SpecialDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDropdownModule, imports: [CommonModule,
+        MatSelectModule,
+        ReactiveFormsModule,
+        ErrorMessagePipeModule,
+        MatIconModule,
+        MatButtonModule,
+        TextByFunctionPipeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialDropdownComponent],
+                    imports: [
+                        CommonModule,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        ErrorMessagePipeModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        TextByFunctionPipeModule
+                    ],
+                    exports: [SpecialDropdownComponent],
+                }]
+        }] });
+
+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();
+    }
+}
+SpecialAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialAutocompleteComponent, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<ng-container *ngIf=\"control && !control.hidden\">\r\n  <mat-form-field\r\n    class=\"w-full {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'standard'\"\r\n  >\r\n    <mat-label\r\n      [ngClass]=\"{ 'is-link': control.label }\"\r\n      class=\"control-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      class=\"autocomplete-options\"\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</ng-container>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i2.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: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"control && !control.hidden\">\r\n  <mat-form-field\r\n    class=\"w-full {{ control.styleClasses }}\"\r\n    [appearance]=\"control.label ? 'outline' : 'standard'\"\r\n  >\r\n    <mat-label\r\n      [ngClass]=\"{ 'is-link': control.label }\"\r\n      class=\"control-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      class=\"autocomplete-options\"\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</ng-container>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
+                type: Input
+            }] } });
+
+class SpecialAutocompleteModule {
+}
+SpecialAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialAutocompleteModule, declarations: [SpecialAutocompleteComponent], imports: [MatInputModule,
+        CommonModule,
+        MatAutocompleteModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule,
+        TextByFunctionPipeModule], exports: [SpecialAutocompleteComponent] });
+SpecialAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialAutocompleteModule, imports: [MatInputModule,
+        CommonModule,
+        MatAutocompleteModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule,
+        TextByFunctionPipeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialAutocompleteComponent],
+                    imports: [
+                        MatInputModule,
+                        CommonModule,
+                        MatAutocompleteModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipeModule,
+                        TextByFunctionPipeModule,
+                    ],
+                    exports: [SpecialAutocompleteComponent],
+                }]
+        }] });
+
+class SpecialDatepickerComponent {
+    constructor() { }
+    get startAt() {
+        var _a;
+        return ((_a = this.control.settings) === null || _a === void 0 ? void 0 : _a.startAt) || new Date();
+    }
+    ngOnInit() { }
+}
+SpecialDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialDatepickerComponent, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control\"\n  [id]=\"control.elementId\"\n  class=\"w-full {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'standard'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    autocomplete=\"off\"\n    [readonly]=\"control.readOnly\"\n    [matDatepicker]=\"picker\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\n  </mat-datepicker>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i2.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: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  *ngIf=\"control\"\n  [id]=\"control.elementId\"\n  class=\"w-full {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'standard'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <input\n    matInput\n    autocomplete=\"off\"\n    [readonly]=\"control.readOnly\"\n    [matDatepicker]=\"picker\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\n  </mat-datepicker>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
+                type: Input
+            }] } });
+
+class SpecialDatepickerModule {
+}
+SpecialDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialDatepickerModule, declarations: [SpecialDatepickerComponent], imports: [MatInputModule,
+        MatDatepickerModule,
+        CommonModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule,
+        MatNativeDateModule], exports: [SpecialDatepickerComponent] });
+SpecialDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDatepickerModule, imports: [MatInputModule,
+        MatDatepickerModule,
+        CommonModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule,
+        MatNativeDateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialDatepickerComponent],
+                    imports: [
+                        MatInputModule,
+                        MatDatepickerModule,
+                        CommonModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipeModule,
+                        MatNativeDateModule
+                    ],
+                    exports: [SpecialDatepickerComponent],
+                }]
+        }] });
+
+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();
+    }
+}
+SpecialMultipleAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialMultipleAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialMultipleAutocompleteComponent, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "<div\r\n  class=\"w-full {{ control.styleClasses }}\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [id]=\"control.elementId\"\r\n    [appearance]=\"control.label ? 'outline' : 'standard'\"\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      class=\"autocomplete-options\"\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 object-contain\"\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-list>\r\n    <mat-chip\r\n      class=\"chip-style\"\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 object-contain\"\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-list>\r\n</div>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i2.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: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"w-full {{ control.styleClasses }}\"\r\n  *ngIf=\"control && !control.hidden\"\r\n>\r\n  <mat-form-field\r\n    class=\"w-full\"\r\n    [id]=\"control.elementId\"\r\n    [appearance]=\"control.label ? 'outline' : 'standard'\"\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      class=\"autocomplete-options\"\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 object-contain\"\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-list>\r\n    <mat-chip\r\n      class=\"chip-style\"\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 object-contain\"\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-list>\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
+                type: Input
+            }] } });
+
+class SpecialMultipleAutocompleteModule {
+}
+SpecialMultipleAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialMultipleAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialMultipleAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialMultipleAutocompleteModule, declarations: [SpecialMultipleAutocompleteComponent], imports: [MatInputModule,
+        CommonModule,
+        MatAutocompleteModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule,
+        TextByFunctionPipeModule,
+        MatChipsModule], exports: [SpecialMultipleAutocompleteComponent] });
+SpecialMultipleAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialMultipleAutocompleteModule, imports: [MatInputModule,
+        CommonModule,
+        MatAutocompleteModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule,
+        TextByFunctionPipeModule,
+        MatChipsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialMultipleAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialMultipleAutocompleteComponent],
+                    imports: [
+                        MatInputModule,
+                        CommonModule,
+                        MatAutocompleteModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipeModule,
+                        TextByFunctionPipeModule,
+                        MatChipsModule,
+                    ],
+                    exports: [SpecialMultipleAutocompleteComponent],
+                }]
+        }] });
+
+class SpecialCheckboxComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+SpecialCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialCheckboxComponent, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "<div\n  *ngIf=\"control\"\n  [id]=\"control.elementId\"\n  class=\"w-full flex flex-col {{ control.styleClasses }}\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <mat-checkbox\n    [ngModel]=\"control.value\"\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\n    [indeterminate]=\"control.settings.indeterminate\"\n    [labelPosition]=\"control.settings.labelPosition\"\n    [disabled]=\"control.disabled\"\n  >\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\n    {{ control.placeholder }}\n  </mat-checkbox>\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"control\"\n  [id]=\"control.elementId\"\n  class=\"w-full flex flex-col {{ control.styleClasses }}\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <mat-checkbox\n    [ngModel]=\"control.value\"\n    (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\n    [indeterminate]=\"control.settings.indeterminate\"\n    [labelPosition]=\"control.settings.labelPosition\"\n    [disabled]=\"control.disabled\"\n  >\n    <mat-icon *ngIf=\"control.icon\" matSuffix>{{ control.icon }} </mat-icon>\n    {{ control.placeholder }}\n  </mat-checkbox>\n</div>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
+                type: Input
+            }] } });
+
+class SpecialCheckboxModule {
+}
+SpecialCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialCheckboxModule, declarations: [SpecialCheckboxComponent], imports: [FormsModule,
+        MatCheckboxModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule], exports: [SpecialCheckboxComponent] });
+SpecialCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialCheckboxModule, imports: [FormsModule,
+        MatCheckboxModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialCheckboxComponent],
+                    imports: [
+                        FormsModule,
+                        MatCheckboxModule,
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipeModule
+                    ],
+                    exports: [SpecialCheckboxComponent],
+                }]
+        }] });
+
+class SpecialTextAreaComponent {
+    constructor() {
+        this.onBlur = new EventEmitter();
+        this.onEnter = new EventEmitter();
+    }
+    ngOnInit() { }
+}
+SpecialTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialTextAreaComponent, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"control\"\n  [id]=\"control.elementId\"\n  class=\"w-full {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'standard'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <textarea\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    cdkAutosizeMinRows=\"1\"\n    cdkAutosizeMaxRows=\"5\"\n    matInput\n    (blur)=\"onBlur.emit(control.value)\"\n    (keydown.enter)=\"onEnter.emit(control.value)\"\n    [type]=\"control.settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  ></textarea>\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i2.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  *ngIf=\"control\"\n  [id]=\"control.elementId\"\n  class=\"w-full {{ control.styleClasses }}\"\n  [appearance]=\"control.label ? 'outline' : 'standard'\"\n>\n  <mat-label *ngIf=\"control.label\">{{ control.label }}</mat-label>\n  <textarea\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    cdkAutosizeMinRows=\"1\"\n    cdkAutosizeMaxRows=\"5\"\n    matInput\n    (blur)=\"onBlur.emit(control.value)\"\n    (keydown.enter)=\"onEnter.emit(control.value)\"\n    [type]=\"control.settings?.type || 'text'\"\n    [readonly]=\"control.readOnly\"\n    [required]=\"control.required\"\n    [placeholder]=\"control.placeholder\"\n    [formControl]=\"control\"\n  ></textarea>\n  <mat-icon *ngIf=\"control.icon\" matPrefix>{{ control.icon }} </mat-icon>\n  <mat-hint>\n    {{ control.tooltip }}\n  </mat-hint>\n  <mat-error>\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
+                type: Input
+            }], onBlur: [{
+                type: Output
+            }], onEnter: [{
+                type: Output
+            }] } });
+
+class SpecialTextAreaModule {
+}
+SpecialTextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialTextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialTextAreaModule, declarations: [SpecialTextAreaComponent], imports: [InputMaskModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule], exports: [SpecialTextAreaComponent] });
+SpecialTextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialTextAreaModule, imports: [InputMaskModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialTextAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialTextAreaComponent],
+                    imports: [
+                        InputMaskModule,
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipeModule,
+                    ],
+                    exports: [SpecialTextAreaComponent],
+                }]
+        }] });
+
+class SpecialUploadComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.onSelect = new EventEmitter();
+        this.previewImages = [];
+    }
+    set controlSetter(control) {
+        this.control = control;
+        this.previewImages = control.value;
+    }
+    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.onSelect.emit(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.onSelect.emit(this.control.value);
+        this.control.markAsDirty();
+    }
+    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);
+    }
+}
+SpecialUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialUploadComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+SpecialUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialUploadComponent, selector: "sp-upload", inputs: { controlSetter: ["control", "controlSetter"] }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<div class=\"special_upload mb-2\">\n  <ngx-dropzone\n    class=\"special_upload__dropzone\"\n    [ngClass]=\"{\n      'special_upload--error-dashed':\n        !!control.errors && (control.dirty || control.touched)\n    }\"\n    [multiple]=\"control.settings?.multiple\"\n    [accept]=\"\n      control.settings?.accept\n        ? control.settings?.accept\n        : 'image/png, .jpeg, .jpg, image/gif'\n    \"\n    (change)=\"\n      control.settings?.multiple\n        ? onSelectMultiple($event)\n        : onSelectOne($event)\n    \"\n  >\n    <ngx-dropzone-label\n      [ngClass]=\"{\n        'special_upload--error':\n          !!control.errors && (control.dirty || control.touched)\n      }\"\n    >\n      <mat-icon class=\"special_upload__icon\"*ngIf=\"control.icon\">{{ control.icon }} </mat-icon>\n      <h2 class=\"text-base font-bold\">\n        {{ control.label }}\n      </h2>\n      <h3 class=\"text-base\">\n        {{ control.placeholder }}\n      </h3>\n    </ngx-dropzone-label>\n    <ngx-dropzone-preview\n      *ngFor=\"let file of previewImages\"\n      [removable]=\"true\"\n      (removed)=\"onRemove(file)\"\n    >\n      <ngx-dropzone-label class=\"special_upload__card\">\n        <img class=\"special_upload__card--image\" [src]=\"file?.url\" alt=\"\" />\n      </ngx-dropzone-label>\n    </ngx-dropzone-preview>\n  </ngx-dropzone>\n  <div\n    class=\"special_upload--error mt-2\"\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\n  >\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </div>\n</div>\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:2rem}: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: "component", type: i2$3.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$3.NgxDropzoneLabelDirective, selector: "ngx-dropzone-label" }, { kind: "component", type: i2$3.NgxDropzonePreviewComponent, selector: "ngx-dropzone-preview", inputs: ["file", "removable"], outputs: ["removed"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-upload', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"special_upload mb-2\">\n  <ngx-dropzone\n    class=\"special_upload__dropzone\"\n    [ngClass]=\"{\n      'special_upload--error-dashed':\n        !!control.errors && (control.dirty || control.touched)\n    }\"\n    [multiple]=\"control.settings?.multiple\"\n    [accept]=\"\n      control.settings?.accept\n        ? control.settings?.accept\n        : 'image/png, .jpeg, .jpg, image/gif'\n    \"\n    (change)=\"\n      control.settings?.multiple\n        ? onSelectMultiple($event)\n        : onSelectOne($event)\n    \"\n  >\n    <ngx-dropzone-label\n      [ngClass]=\"{\n        'special_upload--error':\n          !!control.errors && (control.dirty || control.touched)\n      }\"\n    >\n      <mat-icon class=\"special_upload__icon\"*ngIf=\"control.icon\">{{ control.icon }} </mat-icon>\n      <h2 class=\"text-base font-bold\">\n        {{ control.label }}\n      </h2>\n      <h3 class=\"text-base\">\n        {{ control.placeholder }}\n      </h3>\n    </ngx-dropzone-label>\n    <ngx-dropzone-preview\n      *ngFor=\"let file of previewImages\"\n      [removable]=\"true\"\n      (removed)=\"onRemove(file)\"\n    >\n      <ngx-dropzone-label class=\"special_upload__card\">\n        <img class=\"special_upload__card--image\" [src]=\"file?.url\" alt=\"\" />\n      </ngx-dropzone-label>\n    </ngx-dropzone-preview>\n  </ngx-dropzone>\n  <div\n    class=\"special_upload--error mt-2\"\n    *ngIf=\"!!control.errors && (control.dirty || control.touched)\"\n  >\n    {{ control.errors | errorMessage: control.errorMessages }}\n  </div>\n</div>\n", styles: [":host{display:contents}:host .special-upload{margin-bottom:2rem}: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$2.DomSanitizer }]; }, propDecorators: { controlSetter: [{
+                type: Input,
+                args: ['control']
+            }], onSelect: [{
+                type: Output
+            }] } });
+
+class SpecialUploadModule {
+}
+SpecialUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialUploadModule, declarations: [SpecialUploadComponent], imports: [FormsModule,
+        NgxDropzoneModule,
+        CommonModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule], exports: [SpecialUploadComponent] });
+SpecialUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialUploadModule, imports: [FormsModule,
+        NgxDropzoneModule,
+        CommonModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        ErrorMessagePipeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialUploadComponent],
+                    imports: [
+                        FormsModule,
+                        NgxDropzoneModule,
+                        CommonModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        ErrorMessagePipeModule
+                    ],
+                    exports: [SpecialUploadComponent],
+                }]
+        }] });
+
+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);
+        }
+    }
+}
+SpecialLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialLabelComponent, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "<div class=\"px-2 {{control.styleClasses}} {{ control.value | textByFunction: settings.stylesPipe}}\">\n  <div *ngIf=\"!!control.label\" class=\"font-bold\">{{control.label}}</div>\n  <div [ngClass]=\"{'cursor-pointer text-blue-600 hover:text-blue-700':settings.isLink }\" (click)=\"onLink()\">\n    {{ control.value | textByFunction: control.settings.pipe}}\n  </div>\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"px-2 {{control.styleClasses}} {{ control.value | textByFunction: settings.stylesPipe}}\">\n  <div *ngIf=\"!!control.label\" class=\"font-bold\">{{control.label}}</div>\n  <div [ngClass]=\"{'cursor-pointer text-blue-600 hover:text-blue-700':settings.isLink }\" (click)=\"onLink()\">\n    {{ control.value | textByFunction: control.settings.pipe}}\n  </div>\n</div>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { control: [{
+                type: Input
+            }] } });
+
+class SpecialLabelModule {
+}
+SpecialLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialLabelModule, declarations: [SpecialLabelComponent], imports: [InputMaskModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        TextByFunctionPipeModule,
+        ErrorMessagePipeModule], exports: [SpecialLabelComponent] });
+SpecialLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialLabelModule, imports: [InputMaskModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        TextByFunctionPipeModule,
+        ErrorMessagePipeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecialLabelComponent],
+                    imports: [
+                        InputMaskModule,
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        TextByFunctionPipeModule,
+                        ErrorMessagePipeModule
+                    ],
+                    exports: [SpecialLabelComponent],
+                }]
+        }] });
+
+class FormControlsListPipe {
+    transform(controls) {
+        if (!controls)
+            return [];
+        return Object.values(controls)
+            .filter((control) => !control.hidden)
+            .map((control) => control);
+    }
+}
+FormControlsListPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FormControlsListPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: FormControlsListPipe, name: "controlsList" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormControlsListPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'controlsList' }]
+        }] });
+
+class SpecialFormComponent {
+    set control(form) {
+        this.form = form;
+    }
+    ngOnInit() { }
+}
+SpecialFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialFormComponent, selector: "sp-form", inputs: { form: ["control", "form"] }, ngImport: i0, template: "<div class=\"w-full box-border p-2\">\n  <div\n    *ngIf=\"form\"\n    [class]=\"\n      form.label\n        ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\n        : 'container'\n    \"\n  >\n    <h1 *ngIf=\"!!form.label\" class=\"font-bold py-3\">{{ form.label }}</h1>\n    <div class=\"w-full flex flex-wrap\">\n      <ng-template\n        *ngFor=\"let control of form.controls | controlsList\"\n        controlRender\n        [control]=\"control\"\n      ></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.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: "14.1.3", ngImport: i0, type: SpecialFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full box-border p-2\">\n  <div\n    *ngIf=\"form\"\n    [class]=\"\n      form.label\n        ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\n        : 'container'\n    \"\n  >\n    <h1 *ngIf=\"!!form.label\" class=\"font-bold py-3\">{{ form.label }}</h1>\n    <div class=\"w-full flex flex-wrap\">\n      <ng-template\n        *ngFor=\"let control of form.controls | controlsList\"\n        controlRender\n        [control]=\"control\"\n      ></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { form: [{
+                type: Input,
+                args: ['control']
+            }] } });
+class SpecialArrayComponent {
+    constructor() { }
+    set control(formArray) {
+        this.formArray = formArray;
+    }
+    get withFormHeader() {
+        return this.formArray.settings.withFormHeader;
+    }
+    get settings() {
+        return this.formArray.settings;
+    }
+    ngOnInit() { }
+    removeItem(index) {
+        this.formArray.removeAt(index);
+    }
+    addItem() {
+        this.formArray.addItem();
+    }
+}
+SpecialArrayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecialArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: SpecialArrayComponent, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "<div class=\"w-full box-border p-2\">\r\n  <div\r\n    *ngIf=\"formArray\"\r\n    class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\"\r\n  >\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-solid\">\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              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            Remove\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <table class=\"form-array-container__table\">\r\n    <thead *ngIf=\"formArray.form\">\r\n      <tr\r\n        *ngIf=\"headerForm; else HEADERFORMREF\"\r\n        class=\"form-array-container__table-header\"\r\n      >\r\n        <th\r\n          class=\"header-cell\"\r\n          *ngFor=\"let control of formArray.form | controlsList\"\r\n        >\r\n          {{ control.label | translate }}\r\n        </th>\r\n        <th *ngIf=\"!formArray.readOnly\"></th>\r\n      </tr>\r\n      <ng-template #HEADERFORMREF>\r\n        <tr class=\"table-form-header\">\r\n          <th\r\n            class=\"header-cell\"\r\n            [ngSwitch]=\"control.type\"\r\n            *ngFor=\"let control of formArray.form | controlsList\"\r\n          >\r\n            <sp-form-control-selector\r\n              [control]=\"control\"\r\n            ></sp-form-control-selector>\r\n          </th>\r\n          <th class=\"header-cell\" *ngIf=\"!formArray.readOnly\">\r\n            <ng-container *ngTemplateOutlet=\"ADDBUTTON\"></ng-container>\r\n          </th>\r\n        </tr>\r\n      </ng-template>\r\n    </thead> -->\r\n\r\n<!-- [ngStyle]=\"{'max-height':'calc(100vh - '+maxHeight+'px)' }\"> -->\r\n<!-- <tbody>\r\n      <tr *ngFor=\"let formGroup of formArray.controls; let i = index\">\r\n        <td [ngSwitch]=\"control.type\" *ngFor=\"let control of formGroup.controls | controlsList\">\r\n          <sp-form-control-selector\r\n            [control]=\"control\"\r\n          ></sp-form-control-selector>\r\n        </td>\r\n        <td *ngIf=\"!formArray.readOnly\">\r\n          <bmb-button\r\n            [icon]=\"'delete_outline'\"\r\n            [type]=\"'Raised'\"\r\n            [size]=\"'XLarge'\"\r\n            [bdrColor]=\"'error-500'\"\r\n            [tColor]=\"'error-500'\"\r\n            (onClick)=\"deleteItem(i)\"\r\n          >\r\n          </bmb-button>\r\n        </td>\r\n      </tr>\r\n    </tbody> -->\r\n<!-- </table> -->\r\n\r\n<!-- <ng-template #TABLET>\r\n  <div class=\"mt-1\">\r\n    <ng-container *ngIf=\"headerFormEnable\">\r\n      <div class=\"card-form-container\">\r\n        <automatic-forms [form]=\"formArray.form\" [enableButtons]=\"false\">\r\n        </automatic-forms>\r\n        <ng-container *ngTemplateOutlet=\"ADDBUTTON\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n    <ng-content select=\"[header]\"></ng-content>\r\n  </div>\r\n  <div class=\"accordion-container\">\r\n    <mat-accordion>\r\n      <mat-expansion-panel\r\n        class=\"mat-elevation-z1\"\r\n        *ngFor=\"let item of formArray.controls; let i = index\"\r\n      >\r\n        <mat-expansion-panel-header\r\n          class=\"expanded-header\"\r\n          collapsedHeight=\"3rem\"\r\n          expandedHeight=\"3rem\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"cardHeaderTemplate; context: { $implicit: item }\"\r\n          >\r\n          </ng-container>\r\n          <mat-icon\r\n            *ngIf=\"!formArray.readOnly\"\r\n            class=\"mobile-delete\"\r\n            (click)=\"deleteItem(i)\"\r\n            color=\"warn\"\r\n          >\r\n            delete_outline\r\n          </mat-icon>\r\n        </mat-expansion-panel-header>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"cardBodyTemplate; context: { $implicit: item }\"\r\n        >\r\n        </ng-container>\r\n      </mat-expansion-panel>\r\n    </mat-accordion>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"text-error\" *ngIf=\"formArray.dirty && formArray.invalid\">\r\n  {{ formArray.errors | errorMessage | translate }}\r\n</div>\r\n\r\n<ng-template #ADDBUTTON>\r\n  <div class=\"add-item-btn\">\r\n    <bmb-button\r\n      [icon]=\"'add'\"\r\n      [type]=\"'Raised'\"\r\n      [bdrColor]=\"'aux-success'\"\r\n      [size]=\"'XLarge'\"\r\n      [tColor]=\"'aux-success'\"\r\n      [disabled]=\"!formArray.form.valid || !formArray.form.dirty\"\r\n      (onClick)=\"addItemAction()\"\r\n    >\r\n    </bmb-button>\r\n  </div>\r\n</ng-template> -->\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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: "14.1.3", ngImport: i0, type: SpecialArrayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full box-border p-2\">\r\n  <div\r\n    *ngIf=\"formArray\"\r\n    class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\"\r\n  >\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-solid\">\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              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            Remove\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <table class=\"form-array-container__table\">\r\n    <thead *ngIf=\"formArray.form\">\r\n      <tr\r\n        *ngIf=\"headerForm; else HEADERFORMREF\"\r\n        class=\"form-array-container__table-header\"\r\n      >\r\n        <th\r\n          class=\"header-cell\"\r\n          *ngFor=\"let control of formArray.form | controlsList\"\r\n        >\r\n          {{ control.label | translate }}\r\n        </th>\r\n        <th *ngIf=\"!formArray.readOnly\"></th>\r\n      </tr>\r\n      <ng-template #HEADERFORMREF>\r\n        <tr class=\"table-form-header\">\r\n          <th\r\n            class=\"header-cell\"\r\n            [ngSwitch]=\"control.type\"\r\n            *ngFor=\"let control of formArray.form | controlsList\"\r\n          >\r\n            <sp-form-control-selector\r\n              [control]=\"control\"\r\n            ></sp-form-control-selector>\r\n          </th>\r\n          <th class=\"header-cell\" *ngIf=\"!formArray.readOnly\">\r\n            <ng-container *ngTemplateOutlet=\"ADDBUTTON\"></ng-container>\r\n          </th>\r\n        </tr>\r\n      </ng-template>\r\n    </thead> -->\r\n\r\n<!-- [ngStyle]=\"{'max-height':'calc(100vh - '+maxHeight+'px)' }\"> -->\r\n<!-- <tbody>\r\n      <tr *ngFor=\"let formGroup of formArray.controls; let i = index\">\r\n        <td [ngSwitch]=\"control.type\" *ngFor=\"let control of formGroup.controls | controlsList\">\r\n          <sp-form-control-selector\r\n            [control]=\"control\"\r\n          ></sp-form-control-selector>\r\n        </td>\r\n        <td *ngIf=\"!formArray.readOnly\">\r\n          <bmb-button\r\n            [icon]=\"'delete_outline'\"\r\n            [type]=\"'Raised'\"\r\n            [size]=\"'XLarge'\"\r\n            [bdrColor]=\"'error-500'\"\r\n            [tColor]=\"'error-500'\"\r\n            (onClick)=\"deleteItem(i)\"\r\n          >\r\n          </bmb-button>\r\n        </td>\r\n      </tr>\r\n    </tbody> -->\r\n<!-- </table> -->\r\n\r\n<!-- <ng-template #TABLET>\r\n  <div class=\"mt-1\">\r\n    <ng-container *ngIf=\"headerFormEnable\">\r\n      <div class=\"card-form-container\">\r\n        <automatic-forms [form]=\"formArray.form\" [enableButtons]=\"false\">\r\n        </automatic-forms>\r\n        <ng-container *ngTemplateOutlet=\"ADDBUTTON\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n    <ng-content select=\"[header]\"></ng-content>\r\n  </div>\r\n  <div class=\"accordion-container\">\r\n    <mat-accordion>\r\n      <mat-expansion-panel\r\n        class=\"mat-elevation-z1\"\r\n        *ngFor=\"let item of formArray.controls; let i = index\"\r\n      >\r\n        <mat-expansion-panel-header\r\n          class=\"expanded-header\"\r\n          collapsedHeight=\"3rem\"\r\n          expandedHeight=\"3rem\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"cardHeaderTemplate; context: { $implicit: item }\"\r\n          >\r\n          </ng-container>\r\n          <mat-icon\r\n            *ngIf=\"!formArray.readOnly\"\r\n            class=\"mobile-delete\"\r\n            (click)=\"deleteItem(i)\"\r\n            color=\"warn\"\r\n          >\r\n            delete_outline\r\n          </mat-icon>\r\n        </mat-expansion-panel-header>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"cardBodyTemplate; context: { $implicit: item }\"\r\n        >\r\n        </ng-container>\r\n      </mat-expansion-panel>\r\n    </mat-accordion>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"text-error\" *ngIf=\"formArray.dirty && formArray.invalid\">\r\n  {{ formArray.errors | errorMessage | translate }}\r\n</div>\r\n\r\n<ng-template #ADDBUTTON>\r\n  <div class=\"add-item-btn\">\r\n    <bmb-button\r\n      [icon]=\"'add'\"\r\n      [type]=\"'Raised'\"\r\n      [bdrColor]=\"'aux-success'\"\r\n      [size]=\"'XLarge'\"\r\n      [tColor]=\"'aux-success'\"\r\n      [disabled]=\"!formArray.form.valid || !formArray.form.dirty\"\r\n      (onClick)=\"addItemAction()\"\r\n    >\r\n    </bmb-button>\r\n  </div>\r\n</ng-template> -->\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { formArray: [{
+                type: Input,
+                args: ['control']
+            }] } });
+class FormControlsRenderDirective {
+    constructor(viewContainer) {
+        this.viewContainer = viewContainer;
+        this.componentsBuffer = {
+            [EControlTypes$1.autocomplete]: SpecialAutocompleteComponent,
+            [EControlTypes$1.checkbox]: SpecialCheckboxComponent,
+            [EControlTypes$1.date]: SpecialDatepickerComponent,
+            [EControlTypes$1.dropdown]: SpecialDropdownComponent,
+            [EControlTypes$1.array]: SpecialArrayComponent,
+            [EControlTypes$1.input]: SpecialInputComponent,
+            [EControlTypes$1.multiple]: SpecialMultipleAutocompleteComponent,
+            [EControlTypes$1.textArea]: SpecialTextAreaComponent,
+            [EControlTypes$1.label]: SpecialLabelComponent,
+            [EControlTypes$1.upload]: SpecialUploadComponent,
+            [EControlTypes$1.form]: SpecialFormComponent,
+        };
+    }
+    set controlSetter(control) {
+        this.viewContainer.clear();
+        const component = this.componentsBuffer[control.type];
+        if (component) {
+            const componentRef = this.viewContainer.createComponent(component);
+            componentRef.instance.control = control;
+        }
+    }
+}
+FormControlsRenderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormControlsRenderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+FormControlsRenderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: FormControlsRenderDirective, selector: "[controlRender]", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormControlsRenderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[controlRender]`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { controlSetter: [{
+                type: Input,
+                args: ['control']
+            }] } });
+
+class FormControlsListPipeModule {
+}
+FormControlsListPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormControlsListPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormControlsListPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: FormControlsListPipeModule, declarations: [FormControlsListPipe], imports: [CommonModule], exports: [FormControlsListPipe] });
+FormControlsListPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormControlsListPipeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormControlsListPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FormControlsListPipe],
+                    imports: [CommonModule],
+                    exports: [FormControlsListPipe],
+                }]
+        }] });
+
+class SpecialFormModule {
+}
+SpecialFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecialFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
+        FormControlsRenderDirective,
+        SpecialFormComponent], imports: [CommonModule,
+        FormControlsListPipeModule,
+        MatButtonModule,
+        SpecialDropdownModule,
+        SpecialInputModule,
+        SpecialAutocompleteModule,
+        SpecialDatepickerModule,
+        SpecialLabelModule,
+        SpecialMultipleAutocompleteModule,
+        SpecialCheckboxModule,
+        SpecialTextAreaModule,
+        SpecialUploadModule], exports: [SpecialArrayComponent,
+        FormControlsRenderDirective,
+        SpecialFormComponent] });
+SpecialFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
+        FormControlsListPipeModule,
+        MatButtonModule,
+        SpecialDropdownModule,
+        SpecialInputModule,
+        SpecialAutocompleteModule,
+        SpecialDatepickerModule,
+        SpecialLabelModule,
+        SpecialMultipleAutocompleteModule,
+        SpecialCheckboxModule,
+        SpecialTextAreaModule,
+        SpecialUploadModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SpecialArrayComponent,
+                        FormControlsRenderDirective,
+                        SpecialFormComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormControlsListPipeModule,
+                        MatButtonModule,
+                        SpecialDropdownModule,
+                        SpecialInputModule,
+                        SpecialAutocompleteModule,
+                        SpecialDatepickerModule,
+                        SpecialLabelModule,
+                        SpecialMultipleAutocompleteModule,
+                        SpecialCheckboxModule,
+                        SpecialTextAreaModule,
+                        SpecialUploadModule,
+                    ],
+                    exports: [
+                        SpecialArrayComponent,
+                        FormControlsRenderDirective,
+                        SpecialFormComponent,
+                    ],
+                }]
+        }] });
+
+var EControlTypes;
+(function (EControlTypes) {
+    EControlTypes["pkey"] = "PRIMARY-KEY";
+    EControlTypes["input"] = "INPUT";
+    EControlTypes["textArea"] = "TEXT-AREA";
+    EControlTypes["dropdown"] = "DROPDOWN";
+    EControlTypes["date"] = "DATE";
+    EControlTypes["time"] = "TIME";
+    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 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();
+    }
+    unpristineRequired() {
+        Object.values(this.controls).forEach((control) => {
+            if (control instanceof SpecialFormControl) {
+                control.markAsDirty();
+            }
+            else if (control instanceof SpecialFormGroup) {
+                control.unpristineRequired();
+            }
+            else if (control instanceof SpecialFormArray) {
+                control.unpristineRequired();
+            }
+        });
+    }
+    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(Object.assign(Object.assign({}, 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(Object.assign(Object.assign({}, 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);
+    }
+    unpristineRequired() {
+        this.markAsDirty();
+        this.controls.forEach((item) => {
+            item.unpristineRequired();
+        });
+    }
+    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 = Object.assign(Object.assign({}, this.defectField), { settings: {}, type: EControlTypes.input, name: '' });
+        this.formDefectField = Object.assign(Object.assign({}, this.defectField), { settings: {
+                formFields: {},
+            }, type: EControlTypes.form, name: '' });
+        this.arrayDefectField = Object.assign(Object.assign({}, this.defectField), { settings: {
+                formFields: {},
+            }, type: EControlTypes.array, name: '' });
+    }
+    control(field) {
+        const formField = Object.assign(Object.assign({}, 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 Object.assign(Object.assign(Object.assign({}, this.inputDefectField), field), { name });
+    }
+    formGenerator(fields, parentField = {}) {
+        const formField = Object.assign(Object.assign({}, this.formDefectField), parentField);
+        const structure = fields
+            .map((field) => this.getControlAndNameByType(field))
+            .reduce((prev, { name, control }) => (Object.assign(Object.assign({}, 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' };
+    }
+}
+SpecialFormBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SpecialFormBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormBuilderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/*
+ * Public API Surface of special-forms
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormControlsRenderDirective, SpecialArrayComponent, SpecialAutocompleteComponent, SpecialAutocompleteModule, SpecialCheckboxComponent, SpecialCheckboxModule, SpecialDatepickerComponent, SpecialDatepickerModule, SpecialDropdownComponent, SpecialDropdownModule, SpecialFormBuilderService, SpecialFormComponent, SpecialFormModule, SpecialInputComponent, SpecialInputModule, SpecialLabelComponent, SpecialLabelModule, SpecialMultipleAutocompleteComponent, SpecialMultipleAutocompleteModule, SpecialTextAreaComponent, SpecialTextAreaModule, SpecialUploadComponent, SpecialUploadModule };
+//# sourceMappingURL=special-forms.mjs.map