@stemy/ngx-dynamic-form 12.0.4 → 12.0.5

package/bundles/stemy-ngx-dynamic-form.umd.js

@@ -2,7 +2,30 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@stemy/ngx-utils'), require('@angular/common'), require('rxjs/operators')) :
     typeof define === 'function' && define.amd ? define('@stemy/ngx-dynamic-form', ['exports', '@angular/core', '@angular/forms', '@stemy/ngx-utils', '@angular/common', 'rxjs/operators'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.stemy = global.stemy || {}, global.stemy["ngx-dynamic-form"] = {}), global.ng.core, global.ng.forms, global["@stemy/ngx-utils"], global.ng.common, global.rxjs.operators));
-})(this, (function (exports, core, forms, ngxUtils, common, operators) { 'use strict';
+})(this, (function (exports, i0, i2, i3, i2$1, operators) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -58,7 +81,7 @@
             }
         return t;
     }
-    function __decorate(decorators, target, key, desc) {
+    function __decorate$1(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);
@@ -71,7 +94,7 @@
     function __param(paramIndex, decorator) {
         return function (target, key) { decorator(target, key, paramIndex); };
     }
-    function __metadata(metadataKey, metadataValue) {
+    function __metadata$1(metadataKey, metadataValue) {
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
             return Reflect.metadata(metadataKey, metadataValue);
     }
@@ -313,9 +336,9 @@
         return value;
     }
 
-    var FORM_GROUP_TYPE = new core.InjectionToken("form-group-provider");
-    var FORM_CONTROL_PROVIDER = new core.InjectionToken("form-control-provider");
-    var DYNAMIC_FORM = new core.InjectionToken("dynamic-form-base");
+    var FORM_GROUP_TYPE = new i0.InjectionToken("form-group-provider");
+    var FORM_CONTROL_PROVIDER = new i0.InjectionToken("form-control-provider");
+    var DYNAMIC_FORM = new i0.InjectionToken("dynamic-form-base");
     var FormControlComponent = /** @class */ (function () {
         function FormControlComponent(api, form, language, toaster) {
             this.api = api;
@@ -370,22 +393,32 @@
         });
         return FormControlComponent;
     }());
-    FormControlComponent.decorators = [
-        { type: core.Directive }
-    ];
-    FormControlComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.API_SERVICE,] }] },
-        { type: undefined, decorators: [{ type: core.Inject, args: [DYNAMIC_FORM,] }] },
-        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.LANGUAGE_SERVICE,] }] },
-        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.TOASTER_SERVICE,] }] }
-    ]; };
-    FormControlComponent.propDecorators = {
-        inputClass: [{ type: core.HostBinding, args: ["class.form-input",] }]
-    };
+    FormControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormControlComponent, deps: [{ token: i3.API_SERVICE }, { token: DYNAMIC_FORM }, { token: i3.LANGUAGE_SERVICE }, { token: i3.TOASTER_SERVICE }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    FormControlComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FormControlComponent, host: { properties: { "class.form-input": "this.inputClass" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormControlComponent, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.API_SERVICE]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [DYNAMIC_FORM]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.LANGUAGE_SERVICE]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.TOASTER_SERVICE]
+                        }] }];
+        }, propDecorators: { inputClass: [{
+                    type: i0.HostBinding,
+                    args: ["class.form-input"]
+                }] } });
     function createValidator(control) {
         var data = control.data || {};
-        var validators = [data.validator].concat(data.validators || []).filter(ngxUtils.ObjectUtils.isDefined).map(function (v) {
-            return ngxUtils.ReflectUtils.resolve(v, control.injector);
+        var validators = [data.validator].concat(data.validators || []).filter(i3.ObjectUtils.isDefined).map(function (v) {
+            return i3.ReflectUtils.resolve(v, control.injector);
         });
         return function (ctrl) { return new Promise(function (resolve) {
             var control = ctrl;
@@ -396,16 +429,16 @@
                 }
                 var validate = validators.map(function (v) { return v(control); });
                 var metaValidator = control.meta.validator;
-                if (ngxUtils.ObjectUtils.isFunction(metaValidator)) {
+                if (i3.ObjectUtils.isFunction(metaValidator)) {
                     validate.push(metaValidator(control));
                 }
                 Promise.all(validate).then(function (results) {
-                    results = results.filter(function (error) { return ngxUtils.ObjectUtils.isObject(error) || ngxUtils.ObjectUtils.isString(error); });
+                    results = results.filter(function (error) { return i3.ObjectUtils.isObject(error) || i3.ObjectUtils.isString(error); });
                     var result = null;
                     if (results.length > 0) {
                         result = {};
                         results.forEach(function (error) {
-                            if (ngxUtils.ObjectUtils.isString(error)) {
+                            if (i3.ObjectUtils.isString(error)) {
                                 result[error] = {};
                                 return;
                             }
@@ -422,7 +455,7 @@
             if (control === void 0) { control = null; }
             this.form = form;
             this.control = control;
-            this.formId = ngxUtils.UniqueUtils.uuid();
+            this.formId = i3.UniqueUtils.uuid();
             this.meta = {};
             this.hidden = false;
             this.dummyData = {};
@@ -496,7 +529,7 @@
         DynamicFormControlHelper.prototype.createTester = function (test, defaultFunc) {
             if (defaultFunc === void 0) { defaultFunc = null; }
             var tester = this.data[test]
-                ? ngxUtils.ReflectUtils.resolve(this.data[test], this.form.injector)
+                ? i3.ReflectUtils.resolve(this.data[test], this.form.injector)
                 : (defaultFunc || (function () { return Promise.resolve(false); }));
             return function (control) { return tester(control); };
         };
@@ -517,7 +550,7 @@
             _this.helper.findProvider(_this);
             _this.initialized = false;
             _this.loading = false;
-            _this.changeTimer = ngxUtils.TimerUtils.createTimeout();
+            _this.changeTimer = i3.TimerUtils.createTimeout();
             _this.statusChanges.subscribe(function () {
                 var root = _this.form.root;
                 root.onStatusChange.emit(root);
@@ -631,11 +664,11 @@
             configurable: true
         });
         DynamicFormGroup.createFormControls = function (group, controls) {
-            if (!controls && ngxUtils.ObjectUtils.isObject(group.model)) {
+            if (!controls && i3.ObjectUtils.isObject(group.model)) {
                 var props = Object.keys(group.model);
                 controls = props.map(function (id) {
                     return getFormControl(group.model, id);
-                }).filter(ngxUtils.ObjectUtils.isDefined);
+                }).filter(i3.ObjectUtils.isDefined);
             }
             if (!controls)
                 return [];
@@ -654,7 +687,7 @@
             });
         };
         DynamicFormGroup.createFormSerializers = function (group, serializers) {
-            if (!serializers && ngxUtils.ObjectUtils.isObject(group.model)) {
+            if (!serializers && i3.ObjectUtils.isObject(group.model)) {
                 var props = Object.keys(group.model);
                 serializers = props.reduce(function (result, id) {
                     var serializer = getFormSerializer(group.model, id);
@@ -670,7 +703,7 @@
                 var serializer = serializers[id] || defaultSerializer;
                 return !serializer ? null : {
                     id: id,
-                    func: ngxUtils.ReflectUtils.resolve(serializer, group.injector)
+                    func: i3.ReflectUtils.resolve(serializer, group.injector)
                 };
             });
         };
@@ -747,7 +780,7 @@
                     root.onInit.emit(root);
                     root.onStatusChange.emit(root);
                     // https://github.com/angular/angular/issues/14542
-                    var statusTimer = ngxUtils.TimerUtils.createInterval();
+                    var statusTimer = i3.TimerUtils.createInterval();
                     statusTimer.set(function () {
                         if (_this.status == "PENDING")
                             return;
@@ -791,7 +824,7 @@
             var data = control.data;
             if (!data || !data.reload)
                 return Promise.resolve(null);
-            var reload = ngxUtils.ObjectUtils.isArray(data.reload) ? data.reload : [data.reload];
+            var reload = i3.ObjectUtils.isArray(data.reload) ? data.reload : [data.reload];
             return Promise.all(reload.map(function (id) {
                 var nextControl = _this.getControl(id);
                 if (!nextControl || controls.has(nextControl))
@@ -805,7 +838,7 @@
             }));
         };
         return DynamicFormGroup;
-    }(forms.FormGroup));
+    }(i2.FormGroup));
     var DynamicFormControl = /** @class */ (function (_super) {
         __extends(DynamicFormControl, _super);
         function DynamicFormControl(control, group) {
@@ -929,25 +962,24 @@
             this.markAsTouched({ onlySelf: true });
         };
         return DynamicFormControl;
-    }(forms.FormControl));
+    }(i2.FormControl));
     // --- Decorator functions ---
     var emptyArray = [];
     var emptyTester = function () {
         return Promise.resolve(false);
     };
-    var ɵ0 = emptyTester;
     function defaultSerializer(id, parent) {
         var control = parent.getControl(id);
         return !control ? Promise.resolve(parent.model[id]) : control.serialize();
     }
     function FormSerializable(serializer) {
         return function (target, propertyKey) {
-            ngxUtils.ReflectUtils.defineMetadata("dynamicFormSerializer", serializer || defaultSerializer, target, propertyKey);
+            i3.ReflectUtils.defineMetadata("dynamicFormSerializer", serializer || defaultSerializer, target, propertyKey);
         };
     }
     function FormInput(data) {
         return function (target, propertyKey) {
-            var meta = ngxUtils.ReflectUtils.getOwnMetadata("design:type", target, propertyKey);
+            var meta = i3.ReflectUtils.getOwnMetadata("design:type", target, propertyKey);
             var type = meta ? meta.name : "";
             var inputType = propertyKey.indexOf("password") < 0 ? "text" : "password";
             switch (type) {
@@ -986,7 +1018,7 @@
             var sets = getFormFieldSets(target);
             data.classes = data.classes || "";
             sets[data.id] = data;
-            ngxUtils.ReflectUtils.defineMetadata("dynamicFormFieldSets", sets, target);
+            i3.ReflectUtils.defineMetadata("dynamicFormFieldSets", sets, target);
         };
     }
     function provideFormGroup(component) {
@@ -1009,22 +1041,22 @@
         };
     }
     function defineFormControl(target, propertyKey, control) {
-        ngxUtils.ReflectUtils.defineMetadata("dynamicFormControl", control, target, propertyKey);
+        i3.ReflectUtils.defineMetadata("dynamicFormControl", control, target, propertyKey);
     }
     function getFormFieldSets(target) {
-        return ngxUtils.ReflectUtils.getMetadata("dynamicFormFieldSets", target) || {};
+        return i3.ReflectUtils.getMetadata("dynamicFormFieldSets", target) || {};
     }
     function getFormControl(target, propertyKey) {
-        return ngxUtils.ReflectUtils.getMetadata("dynamicFormControl", target, propertyKey);
+        return i3.ReflectUtils.getMetadata("dynamicFormControl", target, propertyKey);
     }
     function getFormSerializer(target, propertyKey) {
-        return ngxUtils.ReflectUtils.getMetadata("dynamicFormSerializer", target, propertyKey);
+        return i3.ReflectUtils.getMetadata("dynamicFormSerializer", target, propertyKey);
     }
     function createFormControl(id, type, data) {
         data = data || {};
-        data.label = ngxUtils.ObjectUtils.isNullOrUndefined(data.label) ? id : data.label;
+        data.label = i3.ObjectUtils.isNullOrUndefined(data.label) ? id : data.label;
         data.labelAlign = data.labelAlign || "left";
-        data.fieldSet = data.fieldSet || ngxUtils.UniqueUtils.uuid();
+        data.fieldSet = data.fieldSet || i3.UniqueUtils.uuid();
         data.classes = data.classes || "";
         data.readonly = data.readonly || emptyTester;
         data.hidden = data.hidden || emptyTester;
@@ -1071,8 +1103,8 @@
         data = control.data;
         data.accept = data.accept || ".jpg,.jpeg,.png";
         data.multi = data.multi || false;
-        data.baseUrl = ngxUtils.ObjectUtils.isString(data.baseUrl) ? data.baseUrl : "assets/";
-        data.uploadUrl = ngxUtils.ObjectUtils.isString(data.uploadUrl) ? data.uploadUrl : "assets";
+        data.baseUrl = i3.ObjectUtils.isString(data.baseUrl) ? data.baseUrl : "assets/";
+        data.uploadUrl = i3.ObjectUtils.isString(data.uploadUrl) ? data.uploadUrl : "assets";
         data.createUploadData = data.createUploadData || (function (file) {
             var form = new FormData();
             form.append("file", file);
@@ -1100,7 +1132,7 @@
                 }));
             }
             // Sort providers
-            providers.sort(function (a, b) { return ngxUtils.ObjectUtils.compare(a.priority, b.priority); });
+            providers.sort(function (a, b) { return i3.ObjectUtils.compare(a.priority, b.priority); });
             return providers[0];
         };
         DynamicFormService.prototype.createComponent = function (vcr, provider) {
@@ -1117,16 +1149,34 @@
         };
         return DynamicFormService;
     }());
-    DynamicFormService.decorators = [
-        { type: core.Injectable }
-    ];
-    DynamicFormService.ctorParameters = function () { return [
-        { type: Array, decorators: [{ type: core.Inject, args: [FORM_CONTROL_PROVIDER,] }] },
-        { type: core.Type, decorators: [{ type: core.Inject, args: [FORM_GROUP_TYPE,] }] },
-        { type: core.ComponentFactoryResolver },
-        { type: core.Injector }
-    ]; };
+    DynamicFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormService, deps: [{ token: FORM_CONTROL_PROVIDER }, { token: FORM_GROUP_TYPE }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DynamicFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FORM_CONTROL_PROVIDER]
+                        }] }, { type: i0__namespace.Type, decorators: [{
+                            type: i0.Inject,
+                            args: [FORM_GROUP_TYPE]
+                        }] }, { type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.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);
+    };
     var FormUtilities = /** @class */ (function () {
         function FormUtilities() {
         }
@@ -1134,7 +1184,7 @@
             if (expression === void 0) { expression = "true"; }
             // @dynamic
             var lambda = function (control) {
-                return Promise.resolve(ngxUtils.ObjectUtils.evaluate(expression, { control: control }));
+                return Promise.resolve(i3.ObjectUtils.evaluate(expression, { control: control }));
             };
             return lambda;
         };
@@ -1158,13 +1208,13 @@
         };
         FormUtilities.validateRequired = function (control) {
             var value = control.value;
-            return Promise.resolve(!ngxUtils.ObjectUtils.isNumber(value) && !value ? "error.required" : null);
+            return Promise.resolve(!i3.ObjectUtils.isNumber(value) && !value ? "error.required" : null);
         };
         FormUtilities.validateMinLength = function (length) {
             // @dynamic
             var lambda = function (control) {
                 var value = control.value;
-                if (!ngxUtils.ObjectUtils.isString(value) || value.length < length) {
+                if (!i3.ObjectUtils.isString(value) || value.length < length) {
                     return Promise.resolve({ "error.min-length": { length: length } });
                 }
                 return Promise.resolve(null);
@@ -1175,7 +1225,7 @@
             // @dynamic
             var lambda = function (control) {
                 var value = control.value;
-                if (!ngxUtils.ObjectUtils.isString(value) || value.length > length) {
+                if (!i3.ObjectUtils.isString(value) || value.length > length) {
                     return Promise.resolve({ "error.max-length": { length: length } });
                 }
                 return Promise.resolve(null);
@@ -1208,9 +1258,9 @@
         };
         FormUtilities.serializeFile = function (id, parent) {
             var value = parent.model[id];
-            if (ngxUtils.ObjectUtils.isBlob(value))
+            if (i3.ObjectUtils.isBlob(value))
                 return Promise.resolve(value);
-            return Promise.resolve(!ngxUtils.ObjectUtils.isString(value) || !value.startsWith("data:") ? null : ngxUtils.FileUtils.dataToBlob(value));
+            return Promise.resolve(!i3.ObjectUtils.isString(value) || !value.startsWith("data:") ? null : i3.FileUtils.dataToBlob(value));
         };
         FormUtilities.serializeNumber = function (id, parent) {
             var value = parent.model[id];
@@ -1226,7 +1276,7 @@
             // @dynamic
             var lambda = function (id, parent) {
                 var value = parent.model[id];
-                if (!ngxUtils.ObjectUtils.isDate(value))
+                if (!i3.ObjectUtils.isDate(value))
                     return Promise.resolve(value || defaultValue);
                 return Promise.resolve(!format ? value : date.transform(value, format));
             };
@@ -1235,7 +1285,10 @@
         return FormUtilities;
     }());
     __decorate([
-        ngxUtils.FactoryDependencies(common.DatePipe)
+        i3.FactoryDependencies(i2$1.DatePipe),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [i2$1.DatePipe, String, String]),
+        __metadata("design:returntype", Function)
     ], FormUtilities, "serializeDate", null);
 
     var OpenApiService = /** @class */ (function () {
@@ -1304,7 +1357,7 @@
             };
         };
         OpenApiService.prototype.getFormInputData = function (property, schema) {
-            var type = ngxUtils.StringUtils.has(property.id, "password", "Password") ? "password" : property.type;
+            var type = i3.StringUtils.has(property.id, "password", "Password") ? "password" : property.type;
             switch (property.type) {
                 case "boolean":
                     type = "checkbox";
@@ -1362,19 +1415,23 @@
         };
         return OpenApiService;
     }());
-    OpenApiService.decorators = [
-        { type: core.Injectable }
-    ];
-    OpenApiService.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.API_SERVICE,] }] }
-    ]; };
+    OpenApiService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OpenApiService, deps: [{ token: i3.API_SERVICE }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    OpenApiService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OpenApiService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OpenApiService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.API_SERVICE]
+                        }] }];
+        } });
 
     var AsyncSubmitDirective = /** @class */ (function () {
         function AsyncSubmitDirective(toaster, cdr, elem, renderer) {
             this.toaster = toaster;
             this.cdr = cdr;
-            this.onSuccess = new core.EventEmitter();
-            this.onError = new core.EventEmitter();
+            this.onSuccess = new i0.EventEmitter();
+            this.onError = new i0.EventEmitter();
             if (elem.nativeElement.tagName !== "BUTTON")
                 return;
             renderer.setAttribute(elem.nativeElement, "type", "button");
@@ -1446,27 +1503,38 @@
         };
         return AsyncSubmitDirective;
     }());
-    AsyncSubmitDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[async-submit]",
-                    exportAs: "async-submit"
-                },] }
-    ];
-    AsyncSubmitDirective.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.TOASTER_SERVICE,] }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ElementRef },
-        { type: core.Renderer2 }
-    ]; };
-    AsyncSubmitDirective.propDecorators = {
-        method: [{ type: core.Input, args: ["async-submit",] }],
-        form: [{ type: core.Input }],
-        onSuccess: [{ type: core.Output }],
-        onError: [{ type: core.Output }],
-        isDisabled: [{ type: core.HostBinding, args: ["class.disabled",] }],
-        isLoading: [{ type: core.HostBinding, args: ["class.loading",] }],
-        click: [{ type: core.HostListener, args: ["click",] }]
-    };
+    AsyncSubmitDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AsyncSubmitDirective, deps: [{ token: i3.TOASTER_SERVICE }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AsyncSubmitDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AsyncSubmitDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[async-submit]",
+                        exportAs: "async-submit"
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.TOASTER_SERVICE]
+                        }] }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }];
+        }, propDecorators: { method: [{
+                    type: i0.Input,
+                    args: ["async-submit"]
+                }], form: [{
+                    type: i0.Input
+                }], onSuccess: [{
+                    type: i0.Output
+                }], onError: [{
+                    type: i0.Output
+                }], isDisabled: [{
+                    type: i0.HostBinding,
+                    args: ["class.disabled"]
+                }], isLoading: [{
+                    type: i0.HostBinding,
+                    args: ["class.loading"]
+                }], click: [{
+                    type: i0.HostListener,
+                    args: ["click"]
+                }] } });
 
     var DynamicFormControlDirective = /** @class */ (function () {
         function DynamicFormControlDirective(vcr, forms) {
@@ -1490,18 +1558,17 @@
         };
         return DynamicFormControlDirective;
     }());
-    DynamicFormControlDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[form-control]",
-                },] }
-    ];
-    DynamicFormControlDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: DynamicFormService }
-    ]; };
-    DynamicFormControlDirective.propDecorators = {
-        control: [{ type: core.Input, args: ["form-control",] }]
-    };
+    DynamicFormControlDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormControlDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: DynamicFormService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DynamicFormControlDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormControlDirective, selector: "[form-control]", inputs: { control: ["form-control", "control"] }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormControlDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[form-control]",
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: DynamicFormService }]; }, propDecorators: { control: [{
+                    type: i0.Input,
+                    args: ["form-control"]
+                }] } });
 
     var DynamicFormTemplateDirective = /** @class */ (function () {
         function DynamicFormTemplateDirective(template) {
@@ -1509,27 +1576,36 @@
         }
         return DynamicFormTemplateDirective;
     }());
-    DynamicFormTemplateDirective.decorators = [
-        { type: core.Directive, args: [{
-                    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]"
-                },] }
-    ];
-    DynamicFormTemplateDirective.ctorParameters = function () { return [
-        { type: core.TemplateRef }
-    ]; };
-    DynamicFormTemplateDirective.propDecorators = {
-        control: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        input: [{ type: core.Input }],
-        prefix: [{ type: core.Input }],
-        suffix: [{ type: core.Input }],
-        setPrefix: [{ type: core.Input }],
-        setSuffix: [{ type: core.Input }],
-        formPrefix: [{ type: core.Input }],
-        formSuffix: [{ type: core.Input }],
-        innerFormPrefix: [{ type: core.Input }],
-        innerFormSuffix: [{ type: core.Input }]
-    };
+    DynamicFormTemplateDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormTemplateDirective, deps: [{ token: i0__namespace.TemplateRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DynamicFormTemplateDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormTemplateDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        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]"
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.TemplateRef }]; }, propDecorators: { control: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], input: [{
+                    type: i0.Input
+                }], prefix: [{
+                    type: i0.Input
+                }], suffix: [{
+                    type: i0.Input
+                }], setPrefix: [{
+                    type: i0.Input
+                }], setSuffix: [{
+                    type: i0.Input
+                }], formPrefix: [{
+                    type: i0.Input
+                }], formSuffix: [{
+                    type: i0.Input
+                }], innerFormPrefix: [{
+                    type: i0.Input
+                }], innerFormSuffix: [{
+                    type: i0.Input
+                }] } });
 
     var DynamicFormGroupDirective = /** @class */ (function () {
         function DynamicFormGroupDirective(vcr, forms) {
@@ -1558,19 +1634,19 @@
         };
         return DynamicFormGroupDirective;
     }());
-    DynamicFormGroupDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[form-group]",
-                },] }
-    ];
-    DynamicFormGroupDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: DynamicFormService }
-    ]; };
-    DynamicFormGroupDirective.propDecorators = {
-        control: [{ type: core.Input, args: ["form-group",] }],
-        visible: [{ type: core.Input }]
-    };
+    DynamicFormGroupDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormGroupDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: DynamicFormService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DynamicFormGroupDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormGroupDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[form-group]",
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }, { type: DynamicFormService }]; }, propDecorators: { control: [{
+                    type: i0.Input,
+                    args: ["form-group"]
+                }], visible: [{
+                    type: i0.Input
+                }] } });
 
     var DynamicFormBaseComponent = /** @class */ (function () {
         function DynamicFormBaseComponent(cdr, formService) {
@@ -1582,17 +1658,17 @@
             this.inputTemplates = {};
             this.prefixTemplates = {};
             this.suffixTemplates = {};
-            this.onChange = new core.EventEmitter();
-            this.onStatusChange = new core.EventEmitter();
-            this.onInit = new core.EventEmitter();
-            this.onSubmit = new core.EventEmitter();
+            this.onChange = new i0.EventEmitter();
+            this.onStatusChange = new i0.EventEmitter();
+            this.onInit = new i0.EventEmitter();
+            this.onSubmit = new i0.EventEmitter();
             this.injector = formService.injector;
             this.cdr = cdr;
         }
         Object.defineProperty(DynamicFormBaseComponent.prototype, "root", {
             get: function () {
                 var form = this;
-                while (ngxUtils.ObjectUtils.isDefined(form.parent)) {
+                while (i3.ObjectUtils.isDefined(form.parent)) {
                     form = form.parent;
                 }
                 return form;
@@ -1617,7 +1693,7 @@
             this.setSuffixTemplates = this.filterTemplates(this.setSuffixTemplates, "setSuffix");
         };
         DynamicFormBaseComponent.prototype.filterTemplates = function (templates, type) {
-            if (ngxUtils.ObjectUtils.isObject(templates) && Object.keys(templates).length > 0)
+            if (i3.ObjectUtils.isObject(templates) && Object.keys(templates).length > 0)
                 return templates;
             return this.templates.filter(function (t) { return !!t[type]; }).reduce(function (result, directive) {
                 result[directive[type]] = directive.template;
@@ -1626,41 +1702,69 @@
         };
         return DynamicFormBaseComponent;
     }());
-    DynamicFormBaseComponent.decorators = [
-        { type: core.Directive }
-    ];
-    DynamicFormBaseComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: DynamicFormService }
-    ]; };
-    DynamicFormBaseComponent.propDecorators = {
-        name: [{ type: core.Input }],
-        testId: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        updateOn: [{ type: core.Input }],
-        classes: [{ type: core.Input }],
-        parent: [{ type: core.Input }],
-        wrapperTemplate: [{ type: core.Input }],
-        fieldSetTemplate: [{ type: core.Input }],
-        controlTemplate: [{ type: core.Input }],
-        controlTemplates: [{ type: core.Input }],
-        labelTemplates: [{ type: core.Input }],
-        inputTemplates: [{ type: core.Input }],
-        prefixTemplates: [{ type: core.Input }],
-        suffixTemplates: [{ type: core.Input }],
-        setPrefixTemplates: [{ type: core.Input }],
-        setSuffixTemplates: [{ type: core.Input }],
-        onChange: [{ type: core.Output }],
-        onStatusChange: [{ type: core.Output }],
-        onInit: [{ type: core.Output }],
-        onSubmit: [{ type: core.Output }],
-        prefixTemplate: [{ type: core.ContentChild, args: ["prefixTemplate",] }],
-        suffixTemplate: [{ type: core.ContentChild, args: ["suffixTemplate",] }],
-        templates: [{ type: core.ContentChildren, args: [DynamicFormTemplateDirective,] }],
-        cWrapperTemplate: [{ type: core.ContentChild, args: ["wrapperTemplate",] }],
-        cFieldSetTemplate: [{ type: core.ContentChild, args: ["fieldSetTemplate",] }],
-        cControlTemplate: [{ type: core.ContentChild, args: ["controlTemplate",] }]
-    };
+    DynamicFormBaseComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormBaseComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DynamicFormService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DynamicFormBaseComponent.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormBaseComponent, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: DynamicFormService }]; }, propDecorators: { name: [{
+                    type: i0.Input
+                }], testId: [{
+                    type: i0.Input
+                }], readonly: [{
+                    type: i0.Input
+                }], updateOn: [{
+                    type: i0.Input
+                }], classes: [{
+                    type: i0.Input
+                }], parent: [{
+                    type: i0.Input
+                }], wrapperTemplate: [{
+                    type: i0.Input
+                }], fieldSetTemplate: [{
+                    type: i0.Input
+                }], controlTemplate: [{
+                    type: i0.Input
+                }], controlTemplates: [{
+                    type: i0.Input
+                }], labelTemplates: [{
+                    type: i0.Input
+                }], inputTemplates: [{
+                    type: i0.Input
+                }], prefixTemplates: [{
+                    type: i0.Input
+                }], suffixTemplates: [{
+                    type: i0.Input
+                }], setPrefixTemplates: [{
+                    type: i0.Input
+                }], setSuffixTemplates: [{
+                    type: i0.Input
+                }], onChange: [{
+                    type: i0.Output
+                }], onStatusChange: [{
+                    type: i0.Output
+                }], onInit: [{
+                    type: i0.Output
+                }], onSubmit: [{
+                    type: i0.Output
+                }], prefixTemplate: [{
+                    type: i0.ContentChild,
+                    args: ["prefixTemplate"]
+                }], suffixTemplate: [{
+                    type: i0.ContentChild,
+                    args: ["suffixTemplate"]
+                }], templates: [{
+                    type: i0.ContentChildren,
+                    args: [DynamicFormTemplateDirective]
+                }], cWrapperTemplate: [{
+                    type: i0.ContentChild,
+                    args: ["wrapperTemplate"]
+                }], cFieldSetTemplate: [{
+                    type: i0.ContentChild,
+                    args: ["fieldSetTemplate"]
+                }], cControlTemplate: [{
+                    type: i0.ContentChild,
+                    args: ["controlTemplate"]
+                }] } });
 
     var DynamicFormComponent = /** @class */ (function (_super) {
         __extends(DynamicFormComponent, _super);
@@ -1743,34 +1847,45 @@
         };
         return DynamicFormComponent;
     }(DynamicFormBaseComponent));
-    DynamicFormComponent.decorators = [
-        { type: core.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 = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: DynamicFormService }
-    ]; };
-    DynamicFormComponent.propDecorators = {
-        group: [{ type: core.Input }],
-        controls: [{ type: core.Input }],
-        serializers: [{ type: core.Input }],
-        fieldSets: [{ type: core.Input }],
-        data: [{ type: core.Input }]
-    };
+    DynamicFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DynamicFormService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicFormComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicFormGroupDirective, selector: "[form-group]", inputs: ["form-group", "visible"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i3__namespace.TranslatePipe, "groupBy": i3__namespace.GroupByPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        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__namespace.ChangeDetectorRef }, { type: DynamicFormService }]; }, propDecorators: { group: [{
+                    type: i0.Input
+                }], controls: [{
+                    type: i0.Input
+                }], serializers: [{
+                    type: i0.Input
+                }], fieldSets: [{
+                    type: i0.Input
+                }], data: [{
+                    type: i0.Input
+                }] } });
 
     var statusPriority = ["LOADING", "PENDING", "DISABLED", "INVALID"];
     var DynamicFormsComponent = /** @class */ (function (_super) {
@@ -1831,20 +1946,20 @@
                     results.forEach(function (data, ix) {
                         var config = _this.data[ix];
                         var path = null;
-                        if (ngxUtils.ObjectUtils.isArray(config.path) && config.path.length > 0) {
+                        if (i3.ObjectUtils.isArray(config.path) && config.path.length > 0) {
                             path = config.path;
                         }
-                        else if (ngxUtils.ObjectUtils.isString(config.path) && config.path.length > 0) {
+                        else if (i3.ObjectUtils.isString(config.path) && config.path.length > 0) {
                             path = config.path.split(".");
                         }
-                        else if (ngxUtils.ObjectUtils.isNumber(config.path)) {
+                        else if (i3.ObjectUtils.isNumber(config.path)) {
                             path = [config.path];
                         }
                         if (!path) {
-                            result = ngxUtils.ObjectUtils.assign(result, data);
+                            result = i3.ObjectUtils.assign(result, data);
                             return;
                         }
-                        result = ngxUtils.ObjectUtils.mapToPath(result, data, path.map(function (p) { return "" + p; }));
+                        result = i3.ObjectUtils.mapToPath(result, data, path.map(function (p) { return "" + p; }));
                     });
                     resolve(result);
                 }, reject);
@@ -1862,7 +1977,7 @@
             this.cdr.detectChanges();
             if (!this.forms)
                 return false;
-            return ngxUtils.ObjectUtils.isDefined(this.forms.find(check));
+            return i3.ObjectUtils.isDefined(this.forms.find(check));
         };
         DynamicFormsComponent.prototype.getFromValue = function (check) {
             if (!this.forms)
@@ -1870,7 +1985,7 @@
             var value = null;
             this.forms.find(function (f) {
                 value = check(f);
-                return ngxUtils.ObjectUtils.isDefined(value);
+                return i3.ObjectUtils.isDefined(value);
             });
             return value;
         };
@@ -1881,7 +1996,7 @@
                     return c;
                 var config = c;
                 var group = new DynamicFormGroup(_this, {
-                    id: config.id || ngxUtils.UniqueUtils.uuid(),
+                    id: config.id || i3.UniqueUtils.uuid(),
                     type: "model",
                     data: config.controlData
                 });
@@ -1894,37 +2009,53 @@
         };
         return DynamicFormsComponent;
     }(DynamicFormBaseComponent));
-    DynamicFormsComponent.decorators = [
-        { type: core.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 = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: DynamicFormService }
-    ]; };
-    DynamicFormsComponent.propDecorators = {
-        data: [{ type: core.Input }],
-        containerTemplate: [{ type: core.Input }],
-        formPrefixTemplates: [{ type: core.Input }],
-        formSuffixTemplates: [{ type: core.Input }],
-        innerFormPrefixTemplates: [{ type: core.Input }],
-        innerFormSuffixTemplates: [{ type: core.Input }],
-        cContainerTemplate: [{ type: core.ContentChild, args: ["containerTemplate",] }],
-        forms: [{ type: core.ViewChildren, args: [DynamicFormBaseComponent,] }]
-    };
+    DynamicFormsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DynamicFormService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicFormsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        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__namespace.ChangeDetectorRef }, { type: DynamicFormService }]; }, propDecorators: { data: [{
+                    type: i0.Input
+                }], containerTemplate: [{
+                    type: i0.Input
+                }], formPrefixTemplates: [{
+                    type: i0.Input
+                }], formSuffixTemplates: [{
+                    type: i0.Input
+                }], innerFormPrefixTemplates: [{
+                    type: i0.Input
+                }], innerFormSuffixTemplates: [{
+                    type: i0.Input
+                }], cContainerTemplate: [{
+                    type: i0.ContentChild,
+                    args: ["containerTemplate"]
+                }], forms: [{
+                    type: i0.ViewChildren,
+                    args: [DynamicFormBaseComponent]
+                }] } });
 
     var DynamicFormGroupComponent = /** @class */ (function () {
         function DynamicFormGroupComponent(form) {
@@ -1941,19 +2072,24 @@
         });
         return DynamicFormGroupComponent;
     }());
-    DynamicFormGroupComponent.decorators = [
-        { type: core.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 = function () { return [
-        { type: undefined, decorators: [{ type: core.Inject, args: [DYNAMIC_FORM,] }] }
-    ]; };
-    DynamicFormGroupComponent.propDecorators = {
-        classes: [{ type: core.HostBinding, args: ["class",] }]
-    };
+    DynamicFormGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormGroupComponent, deps: [{ token: DYNAMIC_FORM }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicFormGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormGroupComponent, selector: "div[dynamic-form-group]", host: { properties: { "class": "this.classes" } }, ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DynamicFormControlDirective, selector: "[form-control]", inputs: ["form-control"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }], pipes: { "translate": i3__namespace.TranslatePipe, "entries": i3__namespace.EntriesPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        selector: "div[dynamic-form-group]",
+                        templateUrl: "./dynamic-form-group.component.html"
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [DYNAMIC_FORM]
+                        }] }];
+        }, propDecorators: { classes: [{
+                    type: i0.HostBinding,
+                    args: ["class"]
+                }] } });
 
     var DynamicFormFileComponent = /** @class */ (function (_super) {
         __extends(DynamicFormFileComponent, _super);
@@ -1978,14 +2114,14 @@
         DynamicFormFileComponent.prototype.processFiles = function (fileList) {
             var files = [];
             var accept = this.data.accept;
-            var types = ngxUtils.ObjectUtils.isString(accept) && accept.length > 0 ? accept.toLowerCase().split(",") : null;
+            var types = i3.ObjectUtils.isString(accept) && accept.length > 0 ? accept.toLowerCase().split(",") : null;
             if (fileList.length == 0)
                 return;
             for (var i = 0; i < fileList.length; i++) {
                 var file = fileList.item(i);
                 var type = file.type.toLowerCase();
-                var ext = ngxUtils.FileUtils.getExtension(file);
-                if (types && !ngxUtils.ArrayUtils.has(types, type, ext))
+                var ext = i3.FileUtils.getExtension(file);
+                if (types && !i3.ArrayUtils.has(types, type, ext))
                     continue;
                 files.push(file);
             }
@@ -2003,7 +2139,7 @@
             var promises = [];
             files.forEach(function (file, ix) {
                 if (_this.data.asDataUrl) {
-                    promises.push(ngxUtils.FileUtils.readFileAsDataURL(file));
+                    promises.push(i3.FileUtils.readFileAsDataURL(file));
                     return;
                 }
                 if (_this.data.asFile) {
@@ -2034,7 +2170,7 @@
             return "url('" + this.getImgUrl(image) + "')";
         };
         DynamicFormFileComponent.prototype.getImgUrl = function (image) {
-            if (ngxUtils.ObjectUtils.isBlob(image)) {
+            if (i3.ObjectUtils.isBlob(image)) {
                 var cache = this.fileImageCache.find(function (t) { return t.file == image; });
                 if (!cache) {
                     cache = { file: image, url: URL.createObjectURL(image) };
@@ -2043,7 +2179,7 @@
                 return cache.url;
             }
             var url = !image ? null : image.imageUrl || image;
-            if (!ngxUtils.ObjectUtils.isString(url))
+            if (!i3.ObjectUtils.isString(url))
                 return null;
             if (url.startsWith("data:"))
                 return url;
@@ -2055,13 +2191,16 @@
         };
         return DynamicFormFileComponent;
     }(FormControlComponent));
-    DynamicFormFileComponent.decorators = [
-        { type: core.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormFileComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicFormFileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormFileComponent, selector: "dynamic-form-file", usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormFileComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "dynamic-form-file",
+                        styleUrls: ["./dynamic-form-file.component.scss"],
+                        templateUrl: "./dynamic-form-file.component.html"
+                    }]
+            }] });
 
     var DynamicFormInputComponent = /** @class */ (function (_super) {
         __extends(DynamicFormInputComponent, _super);
@@ -2096,7 +2235,7 @@
                 this.control.setValue(value);
                 return;
             }
-            var translations = ngxUtils.ObjectUtils.isArray(this.value) ? Array.from(this.value) : [];
+            var translations = i3.ObjectUtils.isArray(this.value) ? Array.from(this.value) : [];
             var translation = translations.find(function (t) { return t.lang == _this.language.editLanguage; });
             if (translation) {
                 translation.translation = value;
@@ -2111,26 +2250,29 @@
         };
         DynamicFormInputComponent.prototype.onNumberBlur = function () {
             var value = this.value;
-            if (ngxUtils.ObjectUtils.isNumber(this.data.max) && this.data.max < value) {
+            if (i3.ObjectUtils.isNumber(this.data.max) && this.data.max < value) {
                 this.control.setValue(this.data.max);
             }
-            else if (ngxUtils.ObjectUtils.isNumber(this.data.min) && this.data.min > value) {
+            else if (i3.ObjectUtils.isNumber(this.data.min) && this.data.min > value) {
                 this.control.setValue(this.data.min);
             }
             this.control.onBlur();
         };
         return DynamicFormInputComponent;
     }(FormControlComponent));
-    DynamicFormInputComponent.decorators = [
-        { type: core.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: core.HostBinding, args: ["class.checked",] }]
-    };
+    DynamicFormInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormInputComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicFormInputComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i2__namespace$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i2__namespace$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2__namespace$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i2__namespace$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": i3__namespace.TranslatePipe, "date": i2__namespace.DatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormInputComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        selector: "dynamic-form-input",
+                        templateUrl: "./dynamic-form-input.component.html"
+                    }]
+            }], propDecorators: { isChecked: [{
+                    type: i0.HostBinding,
+                    args: ["class.checked"]
+                }] } });
 
     var DynamicFormSelectComponent = /** @class */ (function (_super) {
         __extends(DynamicFormSelectComponent, _super);
@@ -2148,7 +2290,7 @@
                 return Promise.reject("Radio group doesn't support multi select!");
             }
             return new Promise(function (resolve) {
-                var getOptions = ngxUtils.ReflectUtils.resolve(data.options, control.form.injector);
+                var getOptions = i3.ReflectUtils.resolve(data.options, control.form.injector);
                 getOptions(control).then(function (options) {
                     if (data.emptyOption)
                         options.unshift({ id: null, label: "" });
@@ -2166,14 +2308,14 @@
             control.setValue(options[0].id);
         };
         DynamicFormSelectComponent.prototype.onSelectChange = function (value) {
-            var isArray = ngxUtils.ObjectUtils.isArray(value);
+            var isArray = i3.ObjectUtils.isArray(value);
             var current = this.value;
             if (this.data.multi) {
                 if (isArray) {
                     this.control.setValue(value);
                     return;
                 }
-                if (ngxUtils.ObjectUtils.isArray(current)) {
+                if (i3.ObjectUtils.isArray(current)) {
                     this.control.setValue(current.indexOf(value) < 0
                         ? current.concat([value])
                         : current.filter(function (c) { return c !== value; }));
@@ -2192,20 +2334,23 @@
         };
         DynamicFormSelectComponent.prototype.checkValue = function (option) {
             var value = this.value;
-            return ngxUtils.ObjectUtils.isArray(value) ? value.indexOf(option.id) >= 0 : option.id == value;
+            return i3.ObjectUtils.isArray(value) ? value.indexOf(option.id) >= 0 : option.id == value;
         };
         DynamicFormSelectComponent.prototype.findOption = function (option, index, id) {
             return option.id == id;
         };
         return DynamicFormSelectComponent;
     }(FormControlComponent));
-    DynamicFormSelectComponent.decorators = [
-        { type: core.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormSelectComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicFormSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormSelectComponent, selector: "dynamic-form-select", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2__namespace$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__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i3__namespace.TranslatePipe, "find": i3__namespace.FindPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormSelectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        selector: "dynamic-form-select",
+                        templateUrl: "./dynamic-form-select.component.html"
+                    }]
+            }] });
 
     var DynamicFormStaticComponent = /** @class */ (function (_super) {
         __extends(DynamicFormStaticComponent, _super);
@@ -2222,13 +2367,16 @@
         };
         return DynamicFormStaticComponent;
     }(FormControlComponent));
-    DynamicFormStaticComponent.decorators = [
-        { type: core.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormStaticComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicFormStaticComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DynamicFormStaticComponent, selector: "dynamic-form-static", usesInheritance: true, ngImport: i0__namespace, 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__namespace.UnorderedListComponent, selector: "unordered-list", inputs: ["keyPrefix", "listStyle", "path", "level", "templates", "data"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.UnorderedListTemplateDirective, selector: "ng-template[type][selector]", inputs: ["type", "selector"] }], pipes: { "remap": i3__namespace.RemapPipe, "date": i2__namespace.DatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormStaticComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        selector: "dynamic-form-static",
+                        templateUrl: "./dynamic-form-static.component.html"
+                    }]
+            }] });
 
     var DynamicFormModelComponent = /** @class */ (function (_super) {
         __extends(DynamicFormModelComponent, _super);
@@ -2245,16 +2393,19 @@
         };
         return DynamicFormModelComponent;
     }(FormControlComponent));
-    DynamicFormModelComponent.decorators = [
-        { type: core.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: core.ViewChild, args: ["subForm",] }]
-    };
+    DynamicFormModelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormModelComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicFormModelComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DynamicFormModelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        selector: "dynamic-form-model",
+                        templateUrl: "./dynamic-form-model.component.html"
+                    }]
+            }], propDecorators: { subForm: [{
+                    type: i0.ViewChild,
+                    args: ["subForm"]
+                }] } });
 
     // --- Components ---
     var components = [
@@ -2297,24 +2448,60 @@
         };
         return NgxDynamicFormModule;
     }());
-    NgxDynamicFormModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: __spreadArray(__spreadArray(__spreadArray([], __read(components)), __read(directives)), __read(pipes)),
-                    imports: [
-                        common.CommonModule,
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        ngxUtils.NgxUtilsModule
-                    ],
-                    exports: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(components)), __read(directives)), __read(pipes)), [
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        ngxUtils.NgxUtilsModule
-                    ]),
-                    entryComponents: components,
-                    providers: pipes
-                },] }
-    ];
+    NgxDynamicFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDynamicFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    NgxDynamicFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDynamicFormModule, declarations: [DynamicFormsComponent,
+            DynamicFormComponent,
+            DynamicFormGroupComponent,
+            DynamicFormFileComponent,
+            DynamicFormInputComponent,
+            DynamicFormSelectComponent,
+            DynamicFormStaticComponent,
+            DynamicFormModelComponent, AsyncSubmitDirective,
+            DynamicFormControlDirective,
+            DynamicFormGroupDirective,
+            DynamicFormTemplateDirective], imports: [i2$1.CommonModule,
+            i2.FormsModule,
+            i2.ReactiveFormsModule,
+            i3.NgxUtilsModule], exports: [DynamicFormsComponent,
+            DynamicFormComponent,
+            DynamicFormGroupComponent,
+            DynamicFormFileComponent,
+            DynamicFormInputComponent,
+            DynamicFormSelectComponent,
+            DynamicFormStaticComponent,
+            DynamicFormModelComponent, AsyncSubmitDirective,
+            DynamicFormControlDirective,
+            DynamicFormGroupDirective,
+            DynamicFormTemplateDirective, i2.FormsModule,
+            i2.ReactiveFormsModule,
+            i3.NgxUtilsModule] });
+    NgxDynamicFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDynamicFormModule, providers: pipes, imports: [[
+                i2$1.CommonModule,
+                i2.FormsModule,
+                i2.ReactiveFormsModule,
+                i3.NgxUtilsModule
+            ], i2.FormsModule,
+            i2.ReactiveFormsModule,
+            i3.NgxUtilsModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDynamicFormModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: __spreadArray(__spreadArray(__spreadArray([], __read(components)), __read(directives)), __read(pipes)),
+                        imports: [
+                            i2$1.CommonModule,
+                            i2.FormsModule,
+                            i2.ReactiveFormsModule,
+                            i3.NgxUtilsModule
+                        ],
+                        exports: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(components)), __read(directives)), __read(pipes)), [
+                            i2.FormsModule,
+                            i2.ReactiveFormsModule,
+                            i3.NgxUtilsModule
+                        ]),
+                        entryComponents: components,
+                        providers: pipes
+                    }]
+            }] });
 
     /**
      * Generated bundle index. Do not edit.
@@ -2361,10 +2548,6 @@
     exports.getFormSerializer = getFormSerializer;
     exports.provideFormControl = provideFormControl;
     exports.provideFormGroup = provideFormGroup;
-    exports["ɵa"] = FORM_GROUP_TYPE;
-    exports["ɵb"] = components;
-    exports["ɵc"] = directives;
-    exports["ɵd"] = pipes;
 
     Object.defineProperty(exports, '__esModule', { value: true });