@stemy/ngx-dynamic-form 12.0.4 → 12.0.6

package/fesm2015/stemy-ngx-dynamic-form.js

@@ -1,7 +1,10 @@
-import { InjectionToken, Directive, Inject, HostBinding, Injectable, Type, ComponentFactoryResolver, Injector, EventEmitter, ChangeDetectorRef, ElementRef, Renderer2, Input, Output, HostListener, ViewContainerRef, TemplateRef, ContentChild, ContentChildren, Component, ViewChildren, ViewChild, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, Inject, HostBinding, Injectable, EventEmitter, Input, Output, HostListener, ContentChild, ContentChildren, Component, ViewEncapsulation, ViewChildren, ViewChild, NgModule } from '@angular/core';
+import * as i2$1 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@stemy/ngx-utils';
 import { API_SERVICE, LANGUAGE_SERVICE, TOASTER_SERVICE, ObjectUtils, ReflectUtils, UniqueUtils, TimerUtils, FileUtils, FactoryDependencies, StringUtils, ArrayUtils, NgxUtilsModule } from '@stemy/ngx-utils';
-import { __decorate } from 'tslib';
+import * as i2 from '@angular/common';
 import { DatePipe, CommonModule } from '@angular/common';
 import { first } from 'rxjs/operators';
 
@@ -41,18 +44,26 @@ class FormControlComponent {
         return true;
     }
 }
-FormControlComponent.decorators = [
-    { type: Directive }
-];
-FormControlComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [API_SERVICE,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [DYNAMIC_FORM,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [LANGUAGE_SERVICE,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TOASTER_SERVICE,] }] }
-];
-FormControlComponent.propDecorators = {
-    inputClass: [{ type: HostBinding, args: ["class.form-input",] }]
-};
+FormControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormControlComponent, deps: [{ token: API_SERVICE }, { token: DYNAMIC_FORM }, { token: LANGUAGE_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Directive });
+FormControlComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FormControlComponent, host: { properties: { "class.form-input": "this.inputClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormControlComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DYNAMIC_FORM]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LANGUAGE_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOASTER_SERVICE]
+                }] }]; }, propDecorators: { inputClass: [{
+                type: HostBinding,
+                args: ["class.form-input"]
+            }] } });
 function createValidator(control) {
     const data = control.data || {};
     const validators = [data.validator].concat(data.validators || []).filter(ObjectUtils.isDefined).map(v => {
@@ -468,7 +479,6 @@ const emptyArray = [];
 const emptyTester = () => {
     return Promise.resolve(false);
 };
-const ɵ0 = emptyTester;
 function defaultSerializer(id, parent) {
     const control = parent.getControl(id);
     return !control ? Promise.resolve(parent.model[id]) : control.serialize();
@@ -647,16 +657,27 @@ class DynamicFormService {
         return vcr.createComponent(factory).instance;
     }
 }
-DynamicFormService.decorators = [
-    { type: Injectable }
-];
-DynamicFormService.ctorParameters = () => [
-    { type: Array, decorators: [{ type: Inject, args: [FORM_CONTROL_PROVIDER,] }] },
-    { type: Type, decorators: [{ type: Inject, args: [FORM_GROUP_TYPE,] }] },
-    { type: ComponentFactoryResolver },
-    { type: Injector }
-];
+DynamicFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormService, deps: [{ token: FORM_CONTROL_PROVIDER }, { token: FORM_GROUP_TYPE }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FORM_CONTROL_PROVIDER]
+                }] }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [FORM_GROUP_TYPE]
+                }] }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; } });
 
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 class FormUtilities {
     static checkField(expression = `true`) {
         // @dynamic
@@ -759,7 +780,10 @@ class FormUtilities {
     }
 }
 __decorate([
-    FactoryDependencies(DatePipe)
+    FactoryDependencies(DatePipe),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [DatePipe, String, String]),
+    __metadata("design:returntype", Function)
 ], FormUtilities, "serializeDate", null);
 
 class OpenApiService {
@@ -881,12 +905,14 @@ class OpenApiService {
         return validators;
     }
 }
-OpenApiService.decorators = [
-    { type: Injectable }
-];
-OpenApiService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [API_SERVICE,] }] }
-];
+OpenApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OpenApiService, deps: [{ token: API_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
+OpenApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OpenApiService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OpenApiService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_SERVICE]
+                }] }]; } });
 
 class AsyncSubmitDirective {
     constructor(toaster, cdr, elem, renderer) {
@@ -953,27 +979,36 @@ class AsyncSubmitDirective {
         });
     }
 }
-AsyncSubmitDirective.decorators = [
-    { type: Directive, args: [{
-                selector: "[async-submit]",
-                exportAs: "async-submit"
-            },] }
-];
-AsyncSubmitDirective.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [TOASTER_SERVICE,] }] },
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: Renderer2 }
-];
-AsyncSubmitDirective.propDecorators = {
-    method: [{ type: Input, args: ["async-submit",] }],
-    form: [{ type: Input }],
-    onSuccess: [{ type: Output }],
-    onError: [{ type: Output }],
-    isDisabled: [{ type: HostBinding, args: ["class.disabled",] }],
-    isLoading: [{ type: HostBinding, args: ["class.loading",] }],
-    click: [{ type: HostListener, args: ["click",] }]
-};
+AsyncSubmitDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AsyncSubmitDirective, deps: [{ token: TOASTER_SERVICE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+AsyncSubmitDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AsyncSubmitDirective, selector: "[async-submit]", inputs: { method: ["async-submit", "method"], form: "form" }, outputs: { onSuccess: "onSuccess", onError: "onError" }, host: { listeners: { "click": "click()" }, properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, exportAs: ["async-submit"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AsyncSubmitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[async-submit]",
+                    exportAs: "async-submit"
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TOASTER_SERVICE]
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { method: [{
+                type: Input,
+                args: ["async-submit"]
+            }], form: [{
+                type: Input
+            }], onSuccess: [{
+                type: Output
+            }], onError: [{
+                type: Output
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ["class.disabled"]
+            }], isLoading: [{
+                type: HostBinding,
+                args: ["class.loading"]
+            }], click: [{
+                type: HostListener,
+                args: ["click"]
+            }] } });
 
 class DynamicFormControlDirective {
     constructor(vcr, forms) {
@@ -992,27 +1027,29 @@ class DynamicFormControlDirective {
         this.comp.control = this.control;
     }
 }
-DynamicFormControlDirective.decorators = [
-    { type: Directive, args: [{
-                selector: "[form-control]",
-            },] }
-];
-DynamicFormControlDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: DynamicFormService }
-];
-DynamicFormControlDirective.propDecorators = {
-    control: [{ type: Input, args: ["form-control",] }]
-};
+DynamicFormControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormControlDirective, deps: [{ token: i0.ViewContainerRef }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicFormControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormControlDirective, selector: "[form-control]", inputs: { control: ["form-control", "control"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[form-control]",
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: DynamicFormService }]; }, propDecorators: { control: [{
+                type: Input,
+                args: ["form-control"]
+            }] } });
 
 class DynamicFormTemplateDirective {
     constructor(template) {
         this.template = template;
     }
 }
-DynamicFormTemplateDirective.decorators = [
-    { type: Directive, args: [{
-                selector: `ng-template[control],
+DynamicFormTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicFormTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormTemplateDirective, selector: "ng-template[control],\n                ng-template[label],\n                ng-template[input],\n                ng-template[prefix],\n                ng-template[suffix],\n                ng-template[setPrefix],\n                ng-template[setSuffix],\n                ng-template[formPrefix],\n                ng-template[formSuffix],\n                ng-template[innerFormPrefix],\n                ng-template[innerFormSuffix]", inputs: { control: "control", label: "label", input: "input", prefix: "prefix", suffix: "suffix", setPrefix: "setPrefix", setSuffix: "setSuffix", formPrefix: "formPrefix", formSuffix: "formSuffix", innerFormPrefix: "innerFormPrefix", innerFormSuffix: "innerFormSuffix" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `ng-template[control],
                 ng-template[label],
                 ng-template[input],
                 ng-template[prefix],
@@ -1023,24 +1060,30 @@ DynamicFormTemplateDirective.decorators = [
                 ng-template[formSuffix],
                 ng-template[innerFormPrefix],
                 ng-template[innerFormSuffix]`
-            },] }
-];
-DynamicFormTemplateDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-DynamicFormTemplateDirective.propDecorators = {
-    control: [{ type: Input }],
-    label: [{ type: Input }],
-    input: [{ type: Input }],
-    prefix: [{ type: Input }],
-    suffix: [{ type: Input }],
-    setPrefix: [{ type: Input }],
-    setSuffix: [{ type: Input }],
-    formPrefix: [{ type: Input }],
-    formSuffix: [{ type: Input }],
-    innerFormPrefix: [{ type: Input }],
-    innerFormSuffix: [{ type: Input }]
-};
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { control: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], input: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], setPrefix: [{
+                type: Input
+            }], setSuffix: [{
+                type: Input
+            }], formPrefix: [{
+                type: Input
+            }], formSuffix: [{
+                type: Input
+            }], innerFormPrefix: [{
+                type: Input
+            }], innerFormSuffix: [{
+                type: Input
+            }] } });
 
 class DynamicFormGroupDirective {
     constructor(vcr, forms) {
@@ -1064,19 +1107,19 @@ class DynamicFormGroupDirective {
         this.comp.control = this.control;
     }
 }
-DynamicFormGroupDirective.decorators = [
-    { type: Directive, args: [{
-                selector: "[form-group]",
-            },] }
-];
-DynamicFormGroupDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: DynamicFormService }
-];
-DynamicFormGroupDirective.propDecorators = {
-    control: [{ type: Input, args: ["form-group",] }],
-    visible: [{ type: Input }]
-};
+DynamicFormGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormGroupDirective, deps: [{ token: i0.ViewContainerRef }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicFormGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormGroupDirective, selector: "[form-group]", inputs: { control: ["form-group", "control"], visible: "visible" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[form-group]",
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: DynamicFormService }]; }, propDecorators: { control: [{
+                type: Input,
+                args: ["form-group"]
+            }], visible: [{
+                type: Input
+            }] } });
 
 class DynamicFormBaseComponent {
     constructor(cdr, formService) {
@@ -1127,41 +1170,69 @@ class DynamicFormBaseComponent {
         }, {});
     }
 }
-DynamicFormBaseComponent.decorators = [
-    { type: Directive }
-];
-DynamicFormBaseComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DynamicFormService }
-];
-DynamicFormBaseComponent.propDecorators = {
-    name: [{ type: Input }],
-    testId: [{ type: Input }],
-    readonly: [{ type: Input }],
-    updateOn: [{ type: Input }],
-    classes: [{ type: Input }],
-    parent: [{ type: Input }],
-    wrapperTemplate: [{ type: Input }],
-    fieldSetTemplate: [{ type: Input }],
-    controlTemplate: [{ type: Input }],
-    controlTemplates: [{ type: Input }],
-    labelTemplates: [{ type: Input }],
-    inputTemplates: [{ type: Input }],
-    prefixTemplates: [{ type: Input }],
-    suffixTemplates: [{ type: Input }],
-    setPrefixTemplates: [{ type: Input }],
-    setSuffixTemplates: [{ type: Input }],
-    onChange: [{ type: Output }],
-    onStatusChange: [{ type: Output }],
-    onInit: [{ type: Output }],
-    onSubmit: [{ type: Output }],
-    prefixTemplate: [{ type: ContentChild, args: ["prefixTemplate",] }],
-    suffixTemplate: [{ type: ContentChild, args: ["suffixTemplate",] }],
-    templates: [{ type: ContentChildren, args: [DynamicFormTemplateDirective,] }],
-    cWrapperTemplate: [{ type: ContentChild, args: ["wrapperTemplate",] }],
-    cFieldSetTemplate: [{ type: ContentChild, args: ["fieldSetTemplate",] }],
-    cControlTemplate: [{ type: ContentChild, args: ["controlTemplate",] }]
-};
+DynamicFormBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormBaseComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicFormBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormBaseComponent, inputs: { name: "name", testId: "testId", readonly: "readonly", updateOn: "updateOn", classes: "classes", parent: "parent", wrapperTemplate: "wrapperTemplate", fieldSetTemplate: "fieldSetTemplate", controlTemplate: "controlTemplate", controlTemplates: "controlTemplates", labelTemplates: "labelTemplates", inputTemplates: "inputTemplates", prefixTemplates: "prefixTemplates", suffixTemplates: "suffixTemplates", setPrefixTemplates: "setPrefixTemplates", setSuffixTemplates: "setSuffixTemplates" }, outputs: { onChange: "onChange", onStatusChange: "onStatusChange", onInit: "onInit", onSubmit: "onSubmit" }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ["prefixTemplate"], descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: ["suffixTemplate"], descendants: true }, { propertyName: "cWrapperTemplate", first: true, predicate: ["wrapperTemplate"], descendants: true }, { propertyName: "cFieldSetTemplate", first: true, predicate: ["fieldSetTemplate"], descendants: true }, { propertyName: "cControlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "templates", predicate: DynamicFormTemplateDirective }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DynamicFormService }]; }, propDecorators: { name: [{
+                type: Input
+            }], testId: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], updateOn: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], parent: [{
+                type: Input
+            }], wrapperTemplate: [{
+                type: Input
+            }], fieldSetTemplate: [{
+                type: Input
+            }], controlTemplate: [{
+                type: Input
+            }], controlTemplates: [{
+                type: Input
+            }], labelTemplates: [{
+                type: Input
+            }], inputTemplates: [{
+                type: Input
+            }], prefixTemplates: [{
+                type: Input
+            }], suffixTemplates: [{
+                type: Input
+            }], setPrefixTemplates: [{
+                type: Input
+            }], setSuffixTemplates: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], onStatusChange: [{
+                type: Output
+            }], onInit: [{
+                type: Output
+            }], onSubmit: [{
+                type: Output
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: ["prefixTemplate"]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: ["suffixTemplate"]
+            }], templates: [{
+                type: ContentChildren,
+                args: [DynamicFormTemplateDirective]
+            }], cWrapperTemplate: [{
+                type: ContentChild,
+                args: ["wrapperTemplate"]
+            }], cFieldSetTemplate: [{
+                type: ContentChild,
+                args: ["fieldSetTemplate"]
+            }], cControlTemplate: [{
+                type: ContentChild,
+                args: ["controlTemplate"]
+            }] } });
 
 class DynamicFormComponent extends DynamicFormBaseComponent {
     constructor(cdr, forms) {
@@ -1229,34 +1300,45 @@ class DynamicFormComponent extends DynamicFormBaseComponent {
         return this.group.getControl(id);
     }
 }
-DynamicFormComponent.decorators = [
-    { type: Component, args: [{
-                moduleId: module.id,
-                selector: "dynamic-form, [dynamic-form]",
-                template: "<ng-template #defaultFieldSetTemplate let-id=\"id\" let-controls=\"controls\" let-fieldSet=\"fieldSet\">\r\n    <div [ngClass]=\"['form-fields', 'form-fields-' + id, fieldSet.classes]\">\r\n        <ng-container [ngxTemplateOutlet]=\"setPrefixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n        <div *ngIf=\"fieldSet.title\" [ngClass]=\"['form-title', fieldSet.titleClasses || '']\">\r\n            {{ group.prefix + fieldSet.title | translate }}\r\n        </div>\r\n        <ng-template #subControls>\r\n            <ng-container *ngFor=\"let control of controls\" [form-group]=\"control\" [visible]=\"control.visible\">\r\n\r\n            </ng-container>\r\n        </ng-template>\r\n        <div *ngIf=\"fieldSet.setClasses; else subControls\" [ngClass]=\"fieldSet.setClasses\">\r\n            <div *ngIf=\"fieldSet.controlClasses; else subControls\" [ngClass]=\"fieldSet.controlClasses\">\r\n                <ng-container [ngTemplateOutlet]=\"subControls\"></ng-container>\r\n            </div>\r\n        </div>\r\n        <ng-container [ngxTemplateOutlet]=\"setSuffixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #fieldSetsTemplate>\r\n    <ng-container *ngFor=\"let fs of formControls | groupBy:'data.fieldSet'\"\r\n                  [ngxTemplateOutlet]=\"fieldSetTemplate || defaultFieldSetTemplate\"\r\n                  [context]=\"{form: this, id: fs.group, controls: fs.items, fieldSet: group.formFields[fs.group] || defaultFieldSet}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #defaultWrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n                  [ngTemplateOutletContext]=\"{form: form, fieldSetsTemplate: fieldSetsTemplate}\"></ng-container>\r\n    <form class=\"dynamic-form\" [ngClass]=\"form.classes || ''\" [formGroup]=\"group\" (submit)=\"onFormSubmit()\">\r\n        <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n        <ng-content></ng-content>\r\n        <div *ngIf=\"form.status == 'PENDING'\" class=\"dynamic-form-validator\">\r\n            {{ group.prefix + 'message.pending' | translate }}\r\n        </div>\r\n        <button [ngStyle]=\"{display: 'none'}\">Submit</button>\r\n    </form>\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n                  [ngTemplateOutletContext]=\"{form: form, fieldSetsTemplate: fieldSetsTemplate}\"></ng-container>\r\n</ng-template>\r\n<ng-template #loadingTemplate>\r\n    <div *ngIf=\"status == 'LOADING'\" class=\"dynamic-form-loader\">\r\n        {{ group.prefix + 'message.loading' | translate }}\r\n    </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this, fieldSetsTemplate: fieldSetsTemplate}\"\r\n              *ngIf=\"status !== 'LOADING'; else loadingTemplate\">\r\n</ng-container>\r\n",
-                providers: [
-                    {
-                        provide: DynamicFormBaseComponent,
-                        useExisting: DynamicFormComponent
-                    },
-                    {
-                        provide: DYNAMIC_FORM,
-                        useExisting: DynamicFormComponent
-                    }
-                ]
-            },] }
-];
-DynamicFormComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DynamicFormService }
-];
-DynamicFormComponent.propDecorators = {
-    group: [{ type: Input }],
-    controls: [{ type: Input }],
-    serializers: [{ type: Input }],
-    fieldSets: [{ type: Input }],
-    data: [{ type: Input }]
-};
+DynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
+DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormComponent, selector: "dynamic-form, [dynamic-form]", inputs: { group: "group", controls: "controls", serializers: "serializers", fieldSets: "fieldSets", data: "data" }, providers: [
+        {
+            provide: DynamicFormBaseComponent,
+            useExisting: DynamicFormComponent
+        },
+        {
+            provide: DYNAMIC_FORM,
+            useExisting: DynamicFormComponent
+        }
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultFieldSetTemplate let-id=\"id\" let-controls=\"controls\" let-fieldSet=\"fieldSet\">\r\n    <div [ngClass]=\"['form-fields', 'form-fields-' + id, fieldSet.classes]\">\r\n        <ng-container [ngxTemplateOutlet]=\"setPrefixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n        <div *ngIf=\"fieldSet.title\" [ngClass]=\"['form-title', fieldSet.titleClasses || '']\">\r\n            {{ group.prefix + fieldSet.title | translate }}\r\n        </div>\r\n        <ng-template #subControls>\r\n            <ng-container *ngFor=\"let control of controls\" [form-group]=\"control\" [visible]=\"control.visible\">\r\n\r\n            </ng-container>\r\n        </ng-template>\r\n        <div *ngIf=\"fieldSet.setClasses; else subControls\" [ngClass]=\"fieldSet.setClasses\">\r\n            <div *ngIf=\"fieldSet.controlClasses; else subControls\" [ngClass]=\"fieldSet.controlClasses\">\r\n                <ng-container [ngTemplateOutlet]=\"subControls\"></ng-container>\r\n            </div>\r\n        </div>\r\n        <ng-container [ngxTemplateOutlet]=\"setSuffixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #fieldSetsTemplate>\r\n    <ng-container *ngFor=\"let fs of formControls | groupBy:'data.fieldSet'\"\r\n                  [ngxTemplateOutlet]=\"fieldSetTemplate || defaultFieldSetTemplate\"\r\n                  [context]=\"{form: this, id: fs.group, controls: fs.items, fieldSet: group.formFields[fs.group] || defaultFieldSet}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #defaultWrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n                  [ngTemplateOutletContext]=\"{form: form, fieldSetsTemplate: fieldSetsTemplate}\"></ng-container>\r\n    <form class=\"dynamic-form\" [ngClass]=\"form.classes || ''\" [formGroup]=\"group\" (submit)=\"onFormSubmit()\">\r\n        <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n        <ng-content></ng-content>\r\n        <div *ngIf=\"form.status == 'PENDING'\" class=\"dynamic-form-validator\">\r\n            {{ group.prefix + 'message.pending' | translate }}\r\n        </div>\r\n        <button [ngStyle]=\"{display: 'none'}\">Submit</button>\r\n    </form>\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n                  [ngTemplateOutletContext]=\"{form: form, fieldSetsTemplate: fieldSetsTemplate}\"></ng-container>\r\n</ng-template>\r\n<ng-template #loadingTemplate>\r\n    <div *ngIf=\"status == 'LOADING'\" class=\"dynamic-form-loader\">\r\n        {{ group.prefix + 'message.loading' | translate }}\r\n    </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this, fieldSetsTemplate: fieldSetsTemplate}\"\r\n              *ngIf=\"status !== 'LOADING'; else loadingTemplate\">\r\n</ng-container>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicFormGroupDirective, selector: "[form-group]", inputs: ["form-group", "visible"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i3.TranslatePipe, "groupBy": i3.GroupByPipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    encapsulation: ViewEncapsulation.None,
+                    selector: "dynamic-form, [dynamic-form]",
+                    templateUrl: "./dynamic-form.component.html",
+                    providers: [
+                        {
+                            provide: DynamicFormBaseComponent,
+                            useExisting: DynamicFormComponent
+                        },
+                        {
+                            provide: DYNAMIC_FORM,
+                            useExisting: DynamicFormComponent
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DynamicFormService }]; }, propDecorators: { group: [{
+                type: Input
+            }], controls: [{
+                type: Input
+            }], serializers: [{
+                type: Input
+            }], fieldSets: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
 
 const statusPriority = ["LOADING", "PENDING", "DISABLED", "INVALID"];
 class DynamicFormsComponent extends DynamicFormBaseComponent {
@@ -1364,37 +1446,53 @@ class DynamicFormsComponent extends DynamicFormBaseComponent {
         });
     }
 }
-DynamicFormsComponent.decorators = [
-    { type: Component, args: [{
-                moduleId: module.id,
-                selector: "dynamic-forms, [dynamic-forms]",
-                template: "<ng-template #configTemplate let-formTemplate=\"formTemplate\" let-form=\"form\" let-config=\"config\" let-configTemplate>\r\n    <div [ngClass]=\"config.classes || ''\">\r\n        <ng-container [ngTemplateOutlet]=\"formPrefixTemplates[config.id]\"\r\n                      [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n        <ng-template #singleFormTemplate>\r\n            <div dynamic-form\r\n                 [hidden]=\"!config.group?.visible\"\r\n                 [ngClass]=\"config.formClasses || ''\"\r\n                 [name]=\"config.name || form.name\"\r\n                 [testId]=\"testId + '-' + (config.testId || config.name || name)\"\r\n                 [readonly]=\"form.readonly\"\r\n                 [updateOn]=\"form.updateOn\"\r\n                 [classes]=\"config.innerFormClasses\"\r\n                 [parent]=\"form\"\r\n\r\n                 [wrapperTemplate]=\"form.wrapperTemplate\"\r\n                 [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n                 [controlTemplates]=\"form.controlTemplates\"\r\n\r\n                 [controlTemplate]=\"form.controlTemplate\"\r\n                 [labelTemplates]=\"form.labelTemplates\"\r\n                 [inputTemplates]=\"form.inputTemplates\"\r\n                 [prefixTemplates]=\"form.prefixTemplates\"\r\n                 [suffixTemplates]=\"form.suffixTemplates\"\r\n                 [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n                 [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n                 [group]=\"config.group\"\r\n                 [fieldSets]=\"config.fieldSets\">\r\n                <ng-template #prefixTemplate let-subForm=\"form\">\r\n                    <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n                                  [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #suffixTemplate let-subForm=\"form\">\r\n                    <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n                                  [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n        <div dynamic-forms\r\n             [ngClass]=\"config.formClasses || ''\"\r\n             [name]=\"config.name || name\"\r\n             [testId]=\"testId + '-' + (config.testId || config.name || name)\"\r\n             [readonly]=\"form.readonly\"\r\n             [updateOn]=\"form.updateOn\"\r\n             [classes]=\"config.innerFormClasses\"\r\n             [parent]=\"form\"\r\n\r\n             [wrapperTemplate]=\"form.wrapperTemplate\"\r\n             [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n             [controlTemplates]=\"form.controlTemplates\"\r\n\r\n             [controlTemplate]=\"form.controlTemplate\"\r\n             [labelTemplates]=\"form.labelTemplates\"\r\n             [inputTemplates]=\"form.inputTemplates\"\r\n             [prefixTemplates]=\"form.prefixTemplates\"\r\n             [suffixTemplates]=\"form.suffixTemplates\"\r\n             [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n             [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n             [data]=\"config.data\"\r\n             [containerTemplate]=\"form.containerTemplate\"\r\n             [formPrefixTemplates]=\"form.formPrefixTemplates\"\r\n             [formSuffixTemplates]=\"form.formSuffixTemplates\"\r\n             [innerFormPrefixTemplates]=\"form.innerFormPrefixTemplates\"\r\n             [innerFormSuffixTemplates]=\"form.innerFormSuffixTemplates\"\r\n\r\n             *ngIf=\"config.multi; else singleFormTemplate\">\r\n            <ng-template #prefixTemplate let-subForm=\"form\">\r\n                <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n                              [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n            </ng-template>\r\n            <ng-template #suffixTemplate let-subForm=\"form\">\r\n                <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n                              [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <ng-container [ngTemplateOutlet]=\"formSuffixTemplates[config.id]\"\r\n                      [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template let-form=\"form\" let-configTemplate=\"configTemplate\" #defaultContainerTemplate>\r\n    <div class=\"dynamic-forms\" [ngClass]=\"classes || ''\">\r\n        <ng-container *ngFor=\"let config of form.configs\"\r\n                      [ngTemplateOutlet]=\"configTemplate\"\r\n                      [ngTemplateOutletContext]=\"{form: form, config: config}\"></ng-container>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"containerTemplate || defaultContainerTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this, configTemplate: configTemplate, defaultContainerTemplate: defaultContainerTemplate}\">\r\n</ng-container>\r\n<ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n",
-                providers: [
-                    {
-                        provide: DynamicFormBaseComponent,
-                        useExisting: DynamicFormsComponent
-                    },
-                    {
-                        provide: DYNAMIC_FORM,
-                        useExisting: DynamicFormsComponent
-                    }
-                ]
-            },] }
-];
-DynamicFormsComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DynamicFormService }
-];
-DynamicFormsComponent.propDecorators = {
-    data: [{ type: Input }],
-    containerTemplate: [{ type: Input }],
-    formPrefixTemplates: [{ type: Input }],
-    formSuffixTemplates: [{ type: Input }],
-    innerFormPrefixTemplates: [{ type: Input }],
-    innerFormSuffixTemplates: [{ type: Input }],
-    cContainerTemplate: [{ type: ContentChild, args: ["containerTemplate",] }],
-    forms: [{ type: ViewChildren, args: [DynamicFormBaseComponent,] }]
-};
+DynamicFormsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
+DynamicFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormsComponent, selector: "dynamic-forms, [dynamic-forms]", inputs: { data: "data", containerTemplate: "containerTemplate", formPrefixTemplates: "formPrefixTemplates", formSuffixTemplates: "formSuffixTemplates", innerFormPrefixTemplates: "innerFormPrefixTemplates", innerFormSuffixTemplates: "innerFormSuffixTemplates" }, providers: [
+        {
+            provide: DynamicFormBaseComponent,
+            useExisting: DynamicFormsComponent
+        },
+        {
+            provide: DYNAMIC_FORM,
+            useExisting: DynamicFormsComponent
+        }
+    ], queries: [{ propertyName: "cContainerTemplate", first: true, predicate: ["containerTemplate"], descendants: true }], viewQueries: [{ propertyName: "forms", predicate: DynamicFormBaseComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #configTemplate let-formTemplate=\"formTemplate\" let-form=\"form\" let-config=\"config\" let-configTemplate>\r\n    <div [ngClass]=\"config.classes || ''\">\r\n        <ng-container [ngTemplateOutlet]=\"formPrefixTemplates[config.id]\"\r\n                      [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n        <ng-template #singleFormTemplate>\r\n            <div dynamic-form\r\n                 [hidden]=\"!config.group?.visible\"\r\n                 [ngClass]=\"config.formClasses || ''\"\r\n                 [name]=\"config.name || form.name\"\r\n                 [testId]=\"testId + '-' + (config.testId || config.name || name)\"\r\n                 [readonly]=\"form.readonly\"\r\n                 [updateOn]=\"form.updateOn\"\r\n                 [classes]=\"config.innerFormClasses\"\r\n                 [parent]=\"form\"\r\n\r\n                 [wrapperTemplate]=\"form.wrapperTemplate\"\r\n                 [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n                 [controlTemplates]=\"form.controlTemplates\"\r\n\r\n                 [controlTemplate]=\"form.controlTemplate\"\r\n                 [labelTemplates]=\"form.labelTemplates\"\r\n                 [inputTemplates]=\"form.inputTemplates\"\r\n                 [prefixTemplates]=\"form.prefixTemplates\"\r\n                 [suffixTemplates]=\"form.suffixTemplates\"\r\n                 [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n                 [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n                 [group]=\"config.group\"\r\n                 [fieldSets]=\"config.fieldSets\">\r\n                <ng-template #prefixTemplate let-subForm=\"form\">\r\n                    <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n                                  [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #suffixTemplate let-subForm=\"form\">\r\n                    <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n                                  [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n        <div dynamic-forms\r\n             [ngClass]=\"config.formClasses || ''\"\r\n             [name]=\"config.name || name\"\r\n             [testId]=\"testId + '-' + (config.testId || config.name || name)\"\r\n             [readonly]=\"form.readonly\"\r\n             [updateOn]=\"form.updateOn\"\r\n             [classes]=\"config.innerFormClasses\"\r\n             [parent]=\"form\"\r\n\r\n             [wrapperTemplate]=\"form.wrapperTemplate\"\r\n             [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n             [controlTemplates]=\"form.controlTemplates\"\r\n\r\n             [controlTemplate]=\"form.controlTemplate\"\r\n             [labelTemplates]=\"form.labelTemplates\"\r\n             [inputTemplates]=\"form.inputTemplates\"\r\n             [prefixTemplates]=\"form.prefixTemplates\"\r\n             [suffixTemplates]=\"form.suffixTemplates\"\r\n             [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n             [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n             [data]=\"config.data\"\r\n             [containerTemplate]=\"form.containerTemplate\"\r\n             [formPrefixTemplates]=\"form.formPrefixTemplates\"\r\n             [formSuffixTemplates]=\"form.formSuffixTemplates\"\r\n             [innerFormPrefixTemplates]=\"form.innerFormPrefixTemplates\"\r\n             [innerFormSuffixTemplates]=\"form.innerFormSuffixTemplates\"\r\n\r\n             *ngIf=\"config.multi; else singleFormTemplate\">\r\n            <ng-template #prefixTemplate let-subForm=\"form\">\r\n                <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n                              [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n            </ng-template>\r\n            <ng-template #suffixTemplate let-subForm=\"form\">\r\n                <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n                              [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <ng-container [ngTemplateOutlet]=\"formSuffixTemplates[config.id]\"\r\n                      [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template let-form=\"form\" let-configTemplate=\"configTemplate\" #defaultContainerTemplate>\r\n    <div class=\"dynamic-forms\" [ngClass]=\"classes || ''\">\r\n        <ng-container *ngFor=\"let config of form.configs\"\r\n                      [ngTemplateOutlet]=\"configTemplate\"\r\n                      [ngTemplateOutletContext]=\"{form: form, config: config}\"></ng-container>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"containerTemplate || defaultContainerTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this, configTemplate: configTemplate, defaultContainerTemplate: defaultContainerTemplate}\">\r\n</ng-container>\r\n<ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n", components: [{ type: DynamicFormComponent, selector: "dynamic-form, [dynamic-form]", inputs: ["group", "controls", "serializers", "fieldSets", "data"] }, { type: DynamicFormsComponent, selector: "dynamic-forms, [dynamic-forms]", inputs: ["data", "containerTemplate", "formPrefixTemplates", "formSuffixTemplates", "innerFormPrefixTemplates", "innerFormSuffixTemplates"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    encapsulation: ViewEncapsulation.None,
+                    selector: "dynamic-forms, [dynamic-forms]",
+                    templateUrl: "./dynamic-forms.component.html",
+                    providers: [
+                        {
+                            provide: DynamicFormBaseComponent,
+                            useExisting: DynamicFormsComponent
+                        },
+                        {
+                            provide: DYNAMIC_FORM,
+                            useExisting: DynamicFormsComponent
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DynamicFormService }]; }, propDecorators: { data: [{
+                type: Input
+            }], containerTemplate: [{
+                type: Input
+            }], formPrefixTemplates: [{
+                type: Input
+            }], formSuffixTemplates: [{
+                type: Input
+            }], innerFormPrefixTemplates: [{
+                type: Input
+            }], innerFormSuffixTemplates: [{
+                type: Input
+            }], cContainerTemplate: [{
+                type: ContentChild,
+                args: ["containerTemplate"]
+            }], forms: [{
+                type: ViewChildren,
+                args: [DynamicFormBaseComponent]
+            }] } });
 
 class DynamicFormGroupComponent {
     constructor(form) {
@@ -1406,19 +1504,22 @@ class DynamicFormGroupComponent {
         return ["form-group", "form-group-" + this.control.id, this.control.data.classes, this.control.errors && this.control.touched ? "form-group-invalid" : ""].join(" ");
     }
 }
-DynamicFormGroupComponent.decorators = [
-    { type: Component, args: [{
-                moduleId: module.id,
-                selector: "div[dynamic-form-group]",
-                template: "<ng-template #labelTemplate>\r\n    <label [ngClass]=\"'control-label control-label-' + control.data.labelAlign\" [attr.for]=\"control.formId\">\r\n        {{ control.label | translate: control.model }}\r\n    </label>\r\n</ng-template>\r\n<ng-template #errorTemplate>\r\n    <div class=\"error-message\" *ngIf=\"control.errors && control.touched\">\r\n        <span class=\"help-block\" *ngFor=\"let error of control.errors | entries\">\r\n            {{ error.key | translate: error.value }}\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #inputTemplate let-control=\"control\">\r\n    <ng-container [form-control]=\"control\"></ng-container>\r\n</ng-template>\r\n<ng-template #defaultControlTemplate\r\n             let-context\r\n             let-control=\"control\"\r\n             let-data=\"control.data\"\r\n             let-labelTemplate=\"labelTemplate\"\r\n             let-inputTemplate=\"inputTemplate\"\r\n             let-prefixTemplate=\"prefixTemplate\"\r\n             let-suffixTemplate=\"suffixTemplate\"\r\n             let-errorTemplate=\"errorTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container *ngIf=\"control.label && data.labelAlign == 'left'\"\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\">\r\n    </ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container *ngIf=\"control.label && data.labelAlign == 'right'\"\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\">\r\n    </ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngxTemplateOutlet]=\"form.controlTemplates[control.id] || form.controlTemplate || defaultControlTemplate\"\r\n              [context]=\"{\r\n                    control: control,\r\n                    labelTemplate: form.labelTemplates[control.id] || labelTemplate,\r\n                    inputTemplate: form.inputTemplates[control.id] || inputTemplate,\r\n                    prefixTemplate: form.prefixTemplates[control.id],\r\n                    suffixTemplate: form.suffixTemplates[control.id],\r\n                    errorTemplate: errorTemplate\r\n                  }\">\r\n</ng-container>\r\n"
-            },] }
-];
-DynamicFormGroupComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [DYNAMIC_FORM,] }] }
-];
-DynamicFormGroupComponent.propDecorators = {
-    classes: [{ type: HostBinding, args: ["class",] }]
-};
+DynamicFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormGroupComponent, deps: [{ token: DYNAMIC_FORM }], target: i0.ɵɵFactoryTarget.Component });
+DynamicFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormGroupComponent, selector: "div[dynamic-form-group]", host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-template #labelTemplate>\r\n    <label [ngClass]=\"'control-label control-label-' + control.data.labelAlign\" [attr.for]=\"control.formId\">\r\n        {{ control.label | translate: control.model }}\r\n    </label>\r\n</ng-template>\r\n<ng-template #errorTemplate>\r\n    <div class=\"error-message\" *ngIf=\"control.errors && control.touched\">\r\n        <span class=\"help-block\" *ngFor=\"let error of control.errors | entries\">\r\n            {{ error.key | translate: error.value }}\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #inputTemplate let-control=\"control\">\r\n    <ng-container [form-control]=\"control\"></ng-container>\r\n</ng-template>\r\n<ng-template #defaultControlTemplate\r\n             let-context\r\n             let-control=\"control\"\r\n             let-data=\"control.data\"\r\n             let-labelTemplate=\"labelTemplate\"\r\n             let-inputTemplate=\"inputTemplate\"\r\n             let-prefixTemplate=\"prefixTemplate\"\r\n             let-suffixTemplate=\"suffixTemplate\"\r\n             let-errorTemplate=\"errorTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container *ngIf=\"control.label && data.labelAlign == 'left'\"\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\">\r\n    </ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container *ngIf=\"control.label && data.labelAlign == 'right'\"\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\">\r\n    </ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngxTemplateOutlet]=\"form.controlTemplates[control.id] || form.controlTemplate || defaultControlTemplate\"\r\n              [context]=\"{\r\n                    control: control,\r\n                    labelTemplate: form.labelTemplates[control.id] || labelTemplate,\r\n                    inputTemplate: form.inputTemplates[control.id] || inputTemplate,\r\n                    prefixTemplate: form.prefixTemplates[control.id],\r\n                    suffixTemplate: form.suffixTemplates[control.id],\r\n                    errorTemplate: errorTemplate\r\n                  }\">\r\n</ng-container>\r\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicFormControlDirective, selector: "[form-control]", inputs: ["form-control"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }], pipes: { "translate": i3.TranslatePipe, "entries": i3.EntriesPipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    encapsulation: ViewEncapsulation.None,
+                    selector: "div[dynamic-form-group]",
+                    templateUrl: "./dynamic-form-group.component.html"
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DYNAMIC_FORM]
+                }] }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ["class"]
+            }] } });
 
 class DynamicFormFileComponent extends FormControlComponent {
     // Acceptor for provider
@@ -1514,13 +1615,16 @@ class DynamicFormFileComponent extends FormControlComponent {
         return this.api.url(`${this.data.baseUrl}${url}`);
     }
 }
-DynamicFormFileComponent.decorators = [
-    { type: Component, args: [{
-                selector: "dynamic-form-file",
-                template: "<div class=\"upload\">\r\n    <input type=\"file\"\r\n           multiple=\"multiple\"\r\n           [attr.data-testid]=\"testId\"\r\n           [attr.accept]=\"data.accept\"\r\n           (change)=\"onSelect($event.target)\" />\r\n    <ul class=\"images\" *ngIf=\"!data.multi\">\r\n        <li class=\"image\" *ngIf=\"value\" [ngStyle]=\"{backgroundImage: getUrl(value)}\">\r\n            <a class=\"btn btn-delete\" (click)=\"delete()\"></a>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"images\" *ngIf=\"data.multi\">\r\n        <li class=\"image\" *ngFor=\"let image of value; let i = index\" [ngStyle]=\"{backgroundImage: getUrl(image)}\">\r\n            <a class=\"btn btn-delete\" (click)=\"delete(i)\"></a>\r\n        </li>\r\n    </ul>\r\n</div>\r\n",
-                styles: [".upload{display:inline-block}.upload ul{display:inline-flex;list-style:none;margin:10px 0 0;padding:0}.upload ul li{height:100px;width:100px;background:repeating-linear-gradient(45deg,gray,gray 10px,lightgray 10px,lightgray 20px) center center;background-size:cover;border:1px gray solid;margin-right:5px;position:relative}.upload .btn-delete{background:linear-gradient(to bottom,#c8607a,#a64d5a);border-color:#a64d5a;color:#fff;position:absolute;padding:0;right:5px;top:5px;width:20px;height:20px}.upload .btn-delete:before{color:#fff;display:block;position:absolute;top:0;right:6px;content:\"x\"}\n"]
-            },] }
-];
+DynamicFormFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DynamicFormFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormFileComponent, selector: "dynamic-form-file", usesInheritance: true, ngImport: i0, template: "<div class=\"upload\">\r\n    <input type=\"file\"\r\n           multiple=\"multiple\"\r\n           [attr.data-testid]=\"testId\"\r\n           [attr.accept]=\"data.accept\"\r\n           (change)=\"onSelect($event.target)\" />\r\n    <ul class=\"images\" *ngIf=\"!data.multi\">\r\n        <li class=\"image\" *ngIf=\"value\" [ngStyle]=\"{backgroundImage: getUrl(value)}\">\r\n            <a class=\"btn btn-delete\" (click)=\"delete()\"></a>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"images\" *ngIf=\"data.multi\">\r\n        <li class=\"image\" *ngFor=\"let image of value; let i = index\" [ngStyle]=\"{backgroundImage: getUrl(image)}\">\r\n            <a class=\"btn btn-delete\" (click)=\"delete(i)\"></a>\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".upload{display:inline-block}.upload ul{display:inline-flex;list-style:none;margin:10px 0 0;padding:0}.upload ul li{height:100px;width:100px;background:repeating-linear-gradient(45deg,gray,gray 10px,lightgray 10px,lightgray 20px) center center;background-size:cover;border:1px gray solid;margin-right:5px;position:relative}.upload .btn-delete{background:linear-gradient(to bottom,#c8607a,#a64d5a);border-color:#a64d5a;color:#fff;position:absolute;padding:0;right:5px;top:5px;width:20px;height:20px}.upload .btn-delete:before{color:#fff;display:block;position:absolute;top:0;right:6px;content:\"x\"}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormFileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "dynamic-form-file",
+                    styleUrls: ["./dynamic-form-file.component.scss"],
+                    templateUrl: "./dynamic-form-file.component.html"
+                }]
+        }] });
 
 class DynamicFormInputComponent extends FormControlComponent {
     // Acceptor for provider
@@ -1570,16 +1674,19 @@ class DynamicFormInputComponent extends FormControlComponent {
         this.control.onBlur();
     }
 }
-DynamicFormInputComponent.decorators = [
-    { type: Component, args: [{
-                moduleId: module.id,
-                selector: "dynamic-form-input",
-                template: "<ng-container [ngSwitch]=\"data.type\">\r\n    <ng-container *ngSwitchCase=\"'textarea'\">\r\n        <textarea class=\"form-control\"\r\n                  rows=\"5\"\r\n                  [attr.autocomplete]=\"data.autocomplete\"\r\n                  [attr.data-testid]=\"testId\"\r\n                  [id]=\"control.formId\"\r\n                  [name]=\"control.formId\"\r\n                  [ngClass]=\"{disabled: control.disabled}\"\r\n                  [disabled]=\"control.disabled\"\r\n                  [ngModel]=\"value\"\r\n                  (ngModelChange)=\"control.setValue($event)\"\r\n                  (blur)=\"control.onBlur()\"\r\n                  (focus)=\"control.onFocus()\">{{ data.placeholder | translate }}</textarea>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n        <input class=\"form-control\"\r\n               type=\"date\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [attr.data-testid]=\"testId\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value | date: 'y-MM-dd'\"\r\n               (ngModelChange)=\"onDateChange($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n        <input class=\"form-control\"\r\n               type=\"number\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [attr.data-testid]=\"testId\"\r\n               [min]=\"data.min\"\r\n               [max]=\"data.max\"\r\n               [step]=\"data.step\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"onNumberBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n        <input class=\"form-control\"\r\n               type=\"checkbox\"\r\n               [attr.data-testid]=\"testId\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'text'\">\r\n        <input class=\"form-control\"\r\n               type=\"text\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [attr.data-testid]=\"testId\"\r\n               [minlength]=\"data.min\"\r\n               [maxlength]=\"data.max\"\r\n               [placeholder]=\"data.placeholder | translate\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"data.useLanguage ? (value | translate) : value\"\r\n               (ngModelChange)=\"onTextChange($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n        <input class=\"form-control\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [attr.data-testid]=\"testId\"\r\n               [minlength]=\"data.min\"\r\n               [maxlength]=\"data.max\"\r\n               [placeholder]=\"data.placeholder | translate\"\r\n               [type]=\"data.type\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n</ng-container>\r\n"
-            },] }
-];
-DynamicFormInputComponent.propDecorators = {
-    isChecked: [{ type: HostBinding, args: ["class.checked",] }]
-};
+DynamicFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DynamicFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormInputComponent, selector: "dynamic-form-input", host: { properties: { "class.checked": "this.isChecked" } }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"data.type\">\r\n    <ng-container *ngSwitchCase=\"'textarea'\">\r\n        <textarea class=\"form-control\"\r\n                  rows=\"5\"\r\n                  [attr.autocomplete]=\"data.autocomplete\"\r\n                  [attr.data-testid]=\"testId\"\r\n                  [id]=\"control.formId\"\r\n                  [name]=\"control.formId\"\r\n                  [ngClass]=\"{disabled: control.disabled}\"\r\n                  [disabled]=\"control.disabled\"\r\n                  [ngModel]=\"value\"\r\n                  (ngModelChange)=\"control.setValue($event)\"\r\n                  (blur)=\"control.onBlur()\"\r\n                  (focus)=\"control.onFocus()\">{{ data.placeholder | translate }}</textarea>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n        <input class=\"form-control\"\r\n               type=\"date\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [attr.data-testid]=\"testId\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value | date: 'y-MM-dd'\"\r\n               (ngModelChange)=\"onDateChange($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n        <input class=\"form-control\"\r\n               type=\"number\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [attr.data-testid]=\"testId\"\r\n               [min]=\"data.min\"\r\n               [max]=\"data.max\"\r\n               [step]=\"data.step\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"onNumberBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n        <input class=\"form-control\"\r\n               type=\"checkbox\"\r\n               [attr.data-testid]=\"testId\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'text'\">\r\n        <input class=\"form-control\"\r\n               type=\"text\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [attr.data-testid]=\"testId\"\r\n               [minlength]=\"data.min\"\r\n               [maxlength]=\"data.max\"\r\n               [placeholder]=\"data.placeholder | translate\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"data.useLanguage ? (value | translate) : value\"\r\n               (ngModelChange)=\"onTextChange($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n        <input class=\"form-control\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [attr.data-testid]=\"testId\"\r\n               [minlength]=\"data.min\"\r\n               [maxlength]=\"data.max\"\r\n               [placeholder]=\"data.placeholder | translate\"\r\n               [type]=\"data.type\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n</ng-container>\r\n", directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": i3.TranslatePipe, "date": i2.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    encapsulation: ViewEncapsulation.None,
+                    selector: "dynamic-form-input",
+                    templateUrl: "./dynamic-form-input.component.html"
+                }]
+        }], propDecorators: { isChecked: [{
+                type: HostBinding,
+                args: ["class.checked"]
+            }] } });
 
 class DynamicFormSelectComponent extends FormControlComponent {
     // Acceptor for provider
@@ -1643,13 +1750,16 @@ class DynamicFormSelectComponent extends FormControlComponent {
         return option.id == id;
     }
 }
-DynamicFormSelectComponent.decorators = [
-    { type: Component, args: [{
-                moduleId: module.id,
-                selector: "dynamic-form-select",
-                template: "<ng-template #selectTemplate let-selected=\"selected\">\r\n    <select class=\"form-control\"\r\n            [attr.data-testid]=\"testId\"\r\n            [multiple]=\"data.multi\"\r\n            [id]=\"control.formId\"\r\n            [name]=\"control.formId\"\r\n            [ngClass]=\"{disabled: control.disabled}\"\r\n            [disabled]=\"control.disabled\"\r\n            [ngModel]=\"data.multi ? value : [value]\"\r\n            (ngModelChange)=\"onSelectChange($event)\"\r\n            (blur)=\"control.onBlur()\"\r\n            (focus)=\"control.onFocus()\">\r\n        <option *ngFor=\"let option of meta.options\" [value]=\"option.id\" [disabled]=\"option.selectable == false\">\r\n            {{ option.label | translate }}\r\n        </option>\r\n    </select>\r\n    <label class=\"form-control-description\" [attr.for]=\"control.formId\" *ngIf=\"!data.multi && selected?.description\">\r\n        {{ selected?.description | translate }}\r\n    </label>\r\n</ng-template>\r\n<ng-container [ngSwitch]=\"data.type\">\r\n    <ng-container *ngSwitchCase=\"'radio'\">\r\n        <ul class=\"radio-group\">\r\n            <li *ngFor=\"let option of meta.options\" class=\"radio\">\r\n                <label [ngClass]=\"{checked: value == option.id}\">\r\n                    <input type=\"radio\"\r\n                           [attr.data-testid]=\"testId + '-' + option.id\"\r\n                           [id]=\"control.formId + '-' + option.id\"\r\n                           [name]=\"control.formId + '-' + option.id\"\r\n                           [ngClass]=\"{disabled: control.disabled}\"\r\n                           [disabled]=\"control.disabled || option.selectable == false\"\r\n                           [value]=\"option.id\"\r\n                           [ngModel]=\"value\"\r\n                           (ngModelChange)=\"onSelectChange(option.id)\"\r\n                           (blur)=\"control.onBlur()\"\r\n                           (focus)=\"control.onFocus()\">\r\n                    {{ option.label | translate }}\r\n                </label>\r\n            </li>\r\n        </ul>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n        <ul class=\"checkbox-group\">\r\n            <li *ngFor=\"let option of meta.options\" class=\"checkbox\">\r\n                <label [ngClass]=\"{checked: checkValue(option)}\">\r\n                    <input type=\"checkbox\"\r\n                           [attr.data-testid]=\"testId + '-' + option.id\"\r\n                           [id]=\"control.formId + '-' + option.id\"\r\n                           [name]=\"control.formId + '-' + option.id\"\r\n                           [ngClass]=\"{disabled: control.disabled}\"\r\n                           [disabled]=\"control.disabled || option.selectable == false\"\r\n                           [ngModel]=\"checkValue(option)\"\r\n                           (ngModelChange)=\"onSelectChange(option.id)\"\r\n                           (blur)=\"control.onBlur()\"\r\n                           (focus)=\"control.onFocus()\">\r\n                    {{ option.label | translate }}\r\n                </label>\r\n            </li>\r\n        </ul>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"selectTemplate\" [ngTemplateOutletContext]=\"{selected: meta?.options | find:findOption:value}\">\r\n\r\n    </ng-container>\r\n</ng-container>\r\n"
-            },] }
-];
+DynamicFormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DynamicFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormSelectComponent, selector: "dynamic-form-select", usesInheritance: true, ngImport: i0, template: "<ng-template #selectTemplate let-selected=\"selected\">\r\n    <select class=\"form-control\"\r\n            [attr.data-testid]=\"testId\"\r\n            [multiple]=\"data.multi\"\r\n            [id]=\"control.formId\"\r\n            [name]=\"control.formId\"\r\n            [ngClass]=\"{disabled: control.disabled}\"\r\n            [disabled]=\"control.disabled\"\r\n            [ngModel]=\"data.multi ? value : [value]\"\r\n            (ngModelChange)=\"onSelectChange($event)\"\r\n            (blur)=\"control.onBlur()\"\r\n            (focus)=\"control.onFocus()\">\r\n        <option *ngFor=\"let option of meta.options\" [value]=\"option.id\" [disabled]=\"option.selectable == false\">\r\n            {{ option.label | translate }}\r\n        </option>\r\n    </select>\r\n    <label class=\"form-control-description\" [attr.for]=\"control.formId\" *ngIf=\"!data.multi && selected?.description\">\r\n        {{ selected?.description | translate }}\r\n    </label>\r\n</ng-template>\r\n<ng-container [ngSwitch]=\"data.type\">\r\n    <ng-container *ngSwitchCase=\"'radio'\">\r\n        <ul class=\"radio-group\">\r\n            <li *ngFor=\"let option of meta.options\" class=\"radio\">\r\n                <label [ngClass]=\"{checked: value == option.id}\">\r\n                    <input type=\"radio\"\r\n                           [attr.data-testid]=\"testId + '-' + option.id\"\r\n                           [id]=\"control.formId + '-' + option.id\"\r\n                           [name]=\"control.formId + '-' + option.id\"\r\n                           [ngClass]=\"{disabled: control.disabled}\"\r\n                           [disabled]=\"control.disabled || option.selectable == false\"\r\n                           [value]=\"option.id\"\r\n                           [ngModel]=\"value\"\r\n                           (ngModelChange)=\"onSelectChange(option.id)\"\r\n                           (blur)=\"control.onBlur()\"\r\n                           (focus)=\"control.onFocus()\">\r\n                    {{ option.label | translate }}\r\n                </label>\r\n            </li>\r\n        </ul>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n        <ul class=\"checkbox-group\">\r\n            <li *ngFor=\"let option of meta.options\" class=\"checkbox\">\r\n                <label [ngClass]=\"{checked: checkValue(option)}\">\r\n                    <input type=\"checkbox\"\r\n                           [attr.data-testid]=\"testId + '-' + option.id\"\r\n                           [id]=\"control.formId + '-' + option.id\"\r\n                           [name]=\"control.formId + '-' + option.id\"\r\n                           [ngClass]=\"{disabled: control.disabled}\"\r\n                           [disabled]=\"control.disabled || option.selectable == false\"\r\n                           [ngModel]=\"checkValue(option)\"\r\n                           (ngModelChange)=\"onSelectChange(option.id)\"\r\n                           (blur)=\"control.onBlur()\"\r\n                           (focus)=\"control.onFocus()\">\r\n                    {{ option.label | translate }}\r\n                </label>\r\n            </li>\r\n        </ul>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"selectTemplate\" [ngTemplateOutletContext]=\"{selected: meta?.options | find:findOption:value}\">\r\n\r\n    </ng-container>\r\n</ng-container>\r\n", directives: [{ type: i2$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i3.TranslatePipe, "find": i3.FindPipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    encapsulation: ViewEncapsulation.None,
+                    selector: "dynamic-form-select",
+                    templateUrl: "./dynamic-form-select.component.html"
+                }]
+        }] });
 
 class DynamicFormStaticComponent extends FormControlComponent {
     // Acceptor for provider
@@ -1661,13 +1771,16 @@ class DynamicFormStaticComponent extends FormControlComponent {
         return Promise.resolve();
     }
 }
-DynamicFormStaticComponent.decorators = [
-    { type: Component, args: [{
-                moduleId: module.id,
-                selector: "dynamic-form-static",
-                template: "<unordered-list [listStyle]=\"data.style\" [ngClass]=\"{disabled: control.disabled}\"\r\n                [data]=\"!data.properties ? {value: value} : data.properties | remap: value\">\r\n    <ng-template [type]=\"!data.properties ? 'key' : null\" selector=\"level == 0\" let-item=\"item\"></ng-template>\r\n    <ng-template type=\"value\" selector=\"valueType == 'date'\" let-item=\"item\">\r\n        {{ item.value | date }}\r\n    </ng-template>\r\n</unordered-list>\r\n"
-            },] }
-];
+DynamicFormStaticComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormStaticComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DynamicFormStaticComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormStaticComponent, selector: "dynamic-form-static", usesInheritance: true, ngImport: i0, template: "<unordered-list [listStyle]=\"data.style\" [ngClass]=\"{disabled: control.disabled}\"\r\n                [data]=\"!data.properties ? {value: value} : data.properties | remap: value\">\r\n    <ng-template [type]=\"!data.properties ? 'key' : null\" selector=\"level == 0\" let-item=\"item\"></ng-template>\r\n    <ng-template type=\"value\" selector=\"valueType == 'date'\" let-item=\"item\">\r\n        {{ item.value | date }}\r\n    </ng-template>\r\n</unordered-list>\r\n", components: [{ type: i3.UnorderedListComponent, selector: "unordered-list", inputs: ["keyPrefix", "listStyle", "path", "level", "templates", "data"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.UnorderedListTemplateDirective, selector: "ng-template[type][selector]", inputs: ["type", "selector"] }], pipes: { "remap": i3.RemapPipe, "date": i2.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormStaticComponent, decorators: [{
+            type: Component,
+            args: [{
+                    encapsulation: ViewEncapsulation.None,
+                    selector: "dynamic-form-static",
+                    templateUrl: "./dynamic-form-static.component.html"
+                }]
+        }] });
 
 class DynamicFormModelComponent extends FormControlComponent {
     // Acceptor for provider
@@ -1679,16 +1792,19 @@ class DynamicFormModelComponent extends FormControlComponent {
         return Promise.resolve();
     }
 }
-DynamicFormModelComponent.decorators = [
-    { type: Component, args: [{
-                moduleId: module.id,
-                selector: "dynamic-form-model",
-                template: "<dynamic-form [testId]=\"form.testId + '-' + control.id\"\r\n              [name]=\"data.name || form.name\"\r\n              [group]=\"control\"\r\n              [data]=\"value\"\r\n              [updateOn]=\"control.updateOn\"\r\n              [parent]=\"form\"\r\n\r\n              [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n              [controlTemplates]=\"form.controlTemplates\"\r\n\r\n              [controlTemplate]=\"form.controlTemplate\"\r\n              [labelTemplates]=\"form.labelTemplates\"\r\n              [inputTemplates]=\"form.inputTemplates\"\r\n              [prefixTemplates]=\"form.prefixTemplates\"\r\n              [suffixTemplates]=\"form.suffixTemplates\"\r\n              [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n              [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n              #subForm>\r\n    <ng-template #wrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n        <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n    </ng-template>\r\n</dynamic-form>\r\n"
-            },] }
-];
-DynamicFormModelComponent.propDecorators = {
-    subForm: [{ type: ViewChild, args: ["subForm",] }]
-};
+DynamicFormModelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormModelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DynamicFormModelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormModelComponent, selector: "dynamic-form-model", viewQueries: [{ propertyName: "subForm", first: true, predicate: ["subForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dynamic-form [testId]=\"form.testId + '-' + control.id\"\r\n              [name]=\"data.name || form.name\"\r\n              [group]=\"control\"\r\n              [data]=\"value\"\r\n              [updateOn]=\"control.updateOn\"\r\n              [parent]=\"form\"\r\n\r\n              [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n              [controlTemplates]=\"form.controlTemplates\"\r\n\r\n              [controlTemplate]=\"form.controlTemplate\"\r\n              [labelTemplates]=\"form.labelTemplates\"\r\n              [inputTemplates]=\"form.inputTemplates\"\r\n              [prefixTemplates]=\"form.prefixTemplates\"\r\n              [suffixTemplates]=\"form.suffixTemplates\"\r\n              [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n              [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n              #subForm>\r\n    <ng-template #wrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n        <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n    </ng-template>\r\n</dynamic-form>\r\n", components: [{ type: DynamicFormComponent, selector: "dynamic-form, [dynamic-form]", inputs: ["group", "controls", "serializers", "fieldSets", "data"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DynamicFormModelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    encapsulation: ViewEncapsulation.None,
+                    selector: "dynamic-form-model",
+                    templateUrl: "./dynamic-form-model.component.html"
+                }]
+        }], propDecorators: { subForm: [{
+                type: ViewChild,
+                args: ["subForm"]
+            }] } });
 
 // --- Components ---
 const components = [
@@ -1728,35 +1844,71 @@ class NgxDynamicFormModule {
         };
     }
 }
-NgxDynamicFormModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    ...components,
-                    ...directives,
-                    ...pipes
-                ],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    NgxUtilsModule
-                ],
-                exports: [
-                    ...components,
-                    ...directives,
-                    ...pipes,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    NgxUtilsModule
-                ],
-                entryComponents: components,
-                providers: pipes
-            },] }
-];
+NgxDynamicFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxDynamicFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFormsComponent,
+        DynamicFormComponent,
+        DynamicFormGroupComponent,
+        DynamicFormFileComponent,
+        DynamicFormInputComponent,
+        DynamicFormSelectComponent,
+        DynamicFormStaticComponent,
+        DynamicFormModelComponent, AsyncSubmitDirective,
+        DynamicFormControlDirective,
+        DynamicFormGroupDirective,
+        DynamicFormTemplateDirective], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxUtilsModule], exports: [DynamicFormsComponent,
+        DynamicFormComponent,
+        DynamicFormGroupComponent,
+        DynamicFormFileComponent,
+        DynamicFormInputComponent,
+        DynamicFormSelectComponent,
+        DynamicFormStaticComponent,
+        DynamicFormModelComponent, AsyncSubmitDirective,
+        DynamicFormControlDirective,
+        DynamicFormGroupDirective,
+        DynamicFormTemplateDirective, FormsModule,
+        ReactiveFormsModule,
+        NgxUtilsModule] });
+NgxDynamicFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDynamicFormModule, providers: pipes, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgxUtilsModule
+        ], FormsModule,
+        ReactiveFormsModule,
+        NgxUtilsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDynamicFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...components,
+                        ...directives,
+                        ...pipes
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgxUtilsModule
+                    ],
+                    exports: [
+                        ...components,
+                        ...directives,
+                        ...pipes,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgxUtilsModule
+                    ],
+                    entryComponents: components,
+                    providers: pipes
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DYNAMIC_FORM, DynamicFormBaseComponent, DynamicFormComponent, DynamicFormControl, DynamicFormControlDirective, DynamicFormFileComponent, DynamicFormGroup, DynamicFormGroupComponent, DynamicFormGroupDirective, DynamicFormInputComponent, DynamicFormModelComponent, DynamicFormSelectComponent, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormsComponent, FORM_CONTROL_PROVIDER, FormControlComponent, FormFieldSet, FormFile, FormInput, FormModel, FormSelect, FormSerializable, FormStatic, FormUtilities, NgxDynamicFormModule, OpenApiService, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormFieldSets, getFormSerializer, provideFormControl, provideFormGroup, FORM_GROUP_TYPE as ɵa, components as ɵb, directives as ɵc, pipes as ɵd };
+export { AsyncSubmitDirective, DYNAMIC_FORM, DynamicFormBaseComponent, DynamicFormComponent, DynamicFormControl, DynamicFormControlDirective, DynamicFormFileComponent, DynamicFormGroup, DynamicFormGroupComponent, DynamicFormGroupDirective, DynamicFormInputComponent, DynamicFormModelComponent, DynamicFormSelectComponent, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormsComponent, FORM_CONTROL_PROVIDER, FormControlComponent, FormFieldSet, FormFile, FormInput, FormModel, FormSelect, FormSerializable, FormStatic, FormUtilities, NgxDynamicFormModule, OpenApiService, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormFieldSets, getFormSerializer, provideFormControl, provideFormGroup };
 //# sourceMappingURL=stemy-ngx-dynamic-form.js.map