special-forms 1.0.1 → 1.1.0

package/dist/special-forms/fesm2020/special-forms.mjs

@@ -671,79 +671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                 }]
         }] });
 
-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 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 FormControlsRenderDirective {
-    constructor(viewContainer) {
-        this.viewContainer = viewContainer;
-        this.componentsBuffer = {};
-    }
-    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: { componentsBuffer: ["components", "componentsBuffer"], 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: { componentsBuffer: [{
-                type: Input,
-                args: ['components']
-            }], controlSetter: [{
-                type: Input,
-                args: ['control']
-            }] } });
-
-class ControlsRenderDirectiveModule {
-}
-ControlsRenderDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ControlsRenderDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ControlsRenderDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: ControlsRenderDirectiveModule, declarations: [FormControlsRenderDirective], imports: [CommonModule], exports: [FormControlsRenderDirective] });
-ControlsRenderDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ControlsRenderDirectiveModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ControlsRenderDirectiveModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FormControlsRenderDirective],
-                    imports: [CommonModule],
-                    exports: [FormControlsRenderDirective],
-                }]
-        }] });
-
 class SpecialLabelComponent {
     constructor() { }
     ngOnInit() { }
@@ -765,28 +692,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                 type: Input
             }] } });
 
-class SpecialFormComponent {
-    constructor() {
-        this.componentsBuffer = ComponentsBuffer;
+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        [components]=\"componentsBuffer\"\n      ></ng-template>\n    </div>\n  </div>\n</div>\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: FormControlsRenderDirective, selector: "[controlRender]", inputs: ["components", "control"] }, { kind: "pipe", type: FormControlsListPipe, name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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        [components]=\"componentsBuffer\"\n      ></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}\n"] }]
+            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() {
-        this.componentsBuffer = ComponentsBuffer;
-    }
+    constructor() { }
     set control(formArray) {
         this.formArray = formArray;
     }
@@ -805,95 +780,72 @@ class SpecialArrayComponent {
     }
 }
 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            [components]=\"componentsBuffer\"\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          [components]=\"componentsBuffer\"\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: 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: 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: FormControlsRenderDirective, selector: "[controlRender]", inputs: ["components", "control"] }, { kind: "pipe", type: FormControlsListPipe, name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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            [components]=\"componentsBuffer\"\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          [components]=\"componentsBuffer\"\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"] }]
+            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']
             }] } });
-const 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,
-};
-
-class SpecialArrayModule {
+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;
+        }
+    }
 }
-SpecialArrayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialArrayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpecialArrayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: SpecialArrayModule, declarations: [SpecialArrayComponent], imports: [CommonModule,
-        FormControlsListPipeModule,
-        MatButtonModule,
-        ControlsRenderDirectiveModule], exports: [SpecialArrayComponent] });
-SpecialArrayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialArrayModule, imports: [CommonModule,
-        FormControlsListPipeModule,
-        MatButtonModule,
-        ControlsRenderDirectiveModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialArrayModule, decorators: [{
-            type: NgModule,
+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: [{
-                    declarations: [SpecialArrayComponent],
-                    imports: [
-                        CommonModule,
-                        FormControlsListPipeModule,
-                        MatButtonModule,
-                        ControlsRenderDirectiveModule,
-                    ],
-                    exports: [SpecialArrayComponent],
+                    selector: `[controlRender]`,
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { controlSetter: [{
+                type: Input,
+                args: ['control']
+            }] } });
 
-class SpecialLabelModule {
+class FormControlsListPipeModule {
 }
-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: [{
+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: [SpecialLabelComponent],
-                    imports: [
-                        InputMaskModule,
-                        CommonModule,
-                        MatInputModule,
-                        MatIconModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        TextByFunctionPipeModule,
-                        ErrorMessagePipeModule
-                    ],
-                    exports: [SpecialLabelComponent],
+                    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: [SpecialFormComponent], imports: [CommonModule,
-        ControlsRenderDirectiveModule,
+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,
@@ -904,10 +856,10 @@ SpecialFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         SpecialMultipleAutocompleteModule,
         SpecialCheckboxModule,
         SpecialTextAreaModule,
-        SpecialUploadModule,
-        SpecialArrayModule], exports: [SpecialFormComponent] });
+        SpecialUploadModule], exports: [SpecialArrayComponent,
+        FormControlsRenderDirective,
+        SpecialFormComponent] });
 SpecialFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
-        ControlsRenderDirectiveModule,
         FormControlsListPipeModule,
         MatButtonModule,
         SpecialDropdownModule,
@@ -918,15 +870,17 @@ SpecialFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
         SpecialMultipleAutocompleteModule,
         SpecialCheckboxModule,
         SpecialTextAreaModule,
-        SpecialUploadModule,
-        SpecialArrayModule] });
+        SpecialUploadModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SpecialFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SpecialFormComponent],
+                    declarations: [
+                        SpecialArrayComponent,
+                        FormControlsRenderDirective,
+                        SpecialFormComponent,
+                    ],
                     imports: [
                         CommonModule,
-                        ControlsRenderDirectiveModule,
                         FormControlsListPipeModule,
                         MatButtonModule,
                         SpecialDropdownModule,
@@ -938,9 +892,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         SpecialCheckboxModule,
                         SpecialTextAreaModule,
                         SpecialUploadModule,
-                        SpecialArrayModule,
                     ],
-                    exports: [SpecialFormComponent],
+                    exports: [
+                        SpecialArrayComponent,
+                        FormControlsRenderDirective,
+                        SpecialFormComponent,
+                    ],
                 }]
         }] });
 
@@ -1358,5 +1315,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FormControlsRenderDirective, SpecialArrayComponent, SpecialArrayModule, SpecialAutocompleteComponent, SpecialAutocompleteModule, SpecialCheckboxComponent, SpecialCheckboxModule, SpecialDatepickerComponent, SpecialDatepickerModule, SpecialDropdownComponent, SpecialDropdownModule, SpecialFormBuilderService, SpecialFormComponent, SpecialFormModule, SpecialInputComponent, SpecialInputModule, SpecialLabelComponent, SpecialLabelModule, SpecialMultipleAutocompleteComponent, SpecialMultipleAutocompleteModule, SpecialTextAreaComponent, SpecialTextAreaModule, SpecialUploadComponent, SpecialUploadModule };
+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