@covalent/dynamic-forms 4.0.0-beta.2 → 4.1.0-develop.2

package/fesm2015/covalent-dynamic-forms.mjs

@@ -8,212 +8,79 @@ import * as i1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i2$3 from '@angular/material/select';
+import * as i2$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i1$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$2 from '@angular/material/slider';
+import * as i1$3 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import * as i1$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i6 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/button';
+import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$1 from '@angular/material/datepicker';
+import * as i2$3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { mixinControlValueAccessor, CovalentCommonModule } from '@covalent/core/common';
-import * as i2$1 from '@covalent/core/file';
+import * as i4$1 from '@covalent/core/file';
 import { CovalentFileModule } from '@covalent/core/file';
-import { TemplatePortalDirective } from '@angular/cdk/portal';
-import * as i5$1 from '@angular/material/core';
+import { CdkPortal } from '@angular/cdk/portal';
+import { mixinControlValueAccessor } from '@covalent/core/common';
+import * as i3$2 from '@angular/material/core';
 import { Subject, timer } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
-function TdDynamicInputComponent_ng_template_9_Template(rf, ctx) { }
-const _c0$5 = function (a0, a1) { return { control: a0, errors: a1 }; };
 class TdDynamicInputComponent {
     constructor() {
         this.label = '';
         this.hint = '';
-        this.type = undefined;
-        this.required = undefined;
+        this.required = false;
         this.name = '';
-        this.min = undefined;
-        this.max = undefined;
-        this.minLength = undefined;
-        this.maxLength = undefined;
-        this.errorMessageTemplate = undefined;
         this.placeholder = '';
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicInputComponent.ɵfac = function TdDynamicInputComponent_Factory(t) { return new (t || TdDynamicInputComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicInputComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicInputComponent, selectors: [["td-dynamic-input"]], decls: 10, vars: 16, consts: [[1, "td-dynamic-input-wrapper"], [1, "td-dynamic-input-field"], ["matInput", "", 3, "formControl", "placeholder", "type", "required"], ["elementInput", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function TdDynamicInputComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelementStart(1, "mat-form-field", 1);
-            i0.ɵɵelementStart(2, "mat-label");
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "input", 2, 3);
-            i0.ɵɵelementStart(6, "mat-hint");
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "mat-error");
-            i0.ɵɵtemplate(9, TdDynamicInputComponent_ng_template_9_Template, 0, 0, "ng-template", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.label);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("formControl", ctx.control)("placeholder", ctx.placeholder)("type", ctx.type)("required", ctx.required);
-            i0.ɵɵattribute("name", ctx.name)("min", ctx.min)("max", ctx.max)("minLength", ctx.minLength)("maxLength", ctx.maxLength);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.hint);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(13, _c0$5, ctx.control, ctx.control == null ? null : ctx.control.errors));
-        }
-    }, directives: [i1.MatFormField, i1.MatLabel, i2.MatInput, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i3.RequiredValidator, i1.MatHint, i1.MatError, i4.NgTemplateOutlet], styles: [".td-dynamic-input-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper[_ngcontent-%COMP%]   .td-dynamic-input-field[_ngcontent-%COMP%]{-ms-flex:1;flex:1;box-sizing:border-box}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicInputComponent, [{
+TdDynamicInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicInputComponent, selector: "td-dynamic-input", ngImport: i0, template: "<div class=\"td-dynamic-input-wrapper\">\n  <mat-form-field class=\"td-dynamic-input-field\">\n    <mat-label>{{ label }}</mat-label>\n    <input\n      #elementInput\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [type]=\"type\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      [attr.min]=\"min\"\n      [attr.max]=\"max\"\n      [attr.minLength]=\"minLength\"\n      [attr.maxLength]=\"maxLength\"\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-input-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{flex:1;box-sizing:border-box}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dynamic-input', template: "<div class=\"td-dynamic-input-wrapper\">\n  <mat-form-field class=\"td-dynamic-input-field\">\n    <mat-label>{{ label }}</mat-label>\n    <input\n      #elementInput\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [type]=\"type\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      [attr.min]=\"min\"\n      [attr.max]=\"max\"\n      [attr.minLength]=\"minLength\"\n      [attr.maxLength]=\"maxLength\"\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{ control: control, errors: control?.errors }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-ms-flex:1;flex:1;box-sizing:border-box}\n"] }]
-        }], null, null);
-})();
+            args: [{ selector: 'td-dynamic-input', template: "<div class=\"td-dynamic-input-wrapper\">\n  <mat-form-field class=\"td-dynamic-input-field\">\n    <mat-label>{{ label }}</mat-label>\n    <input\n      #elementInput\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [type]=\"type\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      [attr.min]=\"min\"\n      [attr.max]=\"max\"\n      [attr.minLength]=\"minLength\"\n      [attr.maxLength]=\"maxLength\"\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-input-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{flex:1;box-sizing:border-box}\n"] }]
+        }] });
 
-function TdDynamicFileInputComponent_ng_template_8_Template(rf, ctx) { }
-function TdDynamicFileInputComponent_button_9_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r4 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 7);
-        i0.ɵɵlistener("click", function TdDynamicFileInputComponent_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); i0.ɵɵnextContext(); const _r2 = i0.ɵɵreference(11); return _r2.clear(); })("keyup.enter", function TdDynamicFileInputComponent_button_9_Template_button_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r4); i0.ɵɵnextContext(); const _r2 = i0.ɵɵreference(11); return _r2.clear(); });
-        i0.ɵɵelementStart(1, "mat-icon");
-        i0.ɵɵtext(2, "cancel");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-    }
-}
-const _c0$4 = function (a0, a1) { return { control: a0, errors: a1 }; };
 class TdDynamicFileInputComponent {
     constructor() {
-        this.required = undefined;
+        this.required = false;
         this.label = '';
         this.name = '';
         this.hint = '';
-        this.errorMessageTemplate = undefined;
         this.placeholder = '';
     }
     _handlefileDrop(value) {
-        this.control.setValue(value);
+        var _a;
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(value);
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicFileInputComponent.ɵfac = function TdDynamicFileInputComponent_Factory(t) { return new (t || TdDynamicFileInputComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicFileInputComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicFileInputComponent, selectors: [["td-dynamic-file-input"]], decls: 16, vars: 15, consts: [[1, "td-dynamic-file-input-wrapper"], ["tdFileDrop", "", "floatLabel", "never", 1, "td-dynamic-file-input-field", 3, "disabled", "fileDrop", "click", "keyup.enter", "keyup.delete", "keyup.backspace"], ["matInput", "", "readonly", "", 3, "value", "placeholder", "disabled"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["mat-icon-button", "", 3, "click", "keyup.enter", 4, "ngIf"], [1, "td-file-input", 3, "formControl"], ["fileInput", ""], ["mat-icon-button", "", 3, "click", "keyup.enter"]], template: function TdDynamicFileInputComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            const _r6 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelementStart(1, "mat-form-field", 1);
-            i0.ɵɵlistener("fileDrop", function TdDynamicFileInputComponent_Template_mat_form_field_fileDrop_1_listener($event) { return ctx._handlefileDrop($event); })("click", function TdDynamicFileInputComponent_Template_mat_form_field_click_1_listener() { i0.ɵɵrestoreView(_r6); const _r2 = i0.ɵɵreference(11); return !(ctx.control == null ? null : ctx.control.disabled) && _r2.inputElement.click(); })("keyup.enter", function TdDynamicFileInputComponent_Template_mat_form_field_keyup_enter_1_listener() { i0.ɵɵrestoreView(_r6); const _r2 = i0.ɵɵreference(11); return !(ctx.control == null ? null : ctx.control.disabled) && _r2.inputElement.click(); })("keyup.delete", function TdDynamicFileInputComponent_Template_mat_form_field_keyup_delete_1_listener() { i0.ɵɵrestoreView(_r6); const _r2 = i0.ɵɵreference(11); return _r2.clear(); })("keyup.backspace", function TdDynamicFileInputComponent_Template_mat_form_field_keyup_backspace_1_listener() { i0.ɵɵrestoreView(_r6); const _r2 = i0.ɵɵreference(11); return _r2.clear(); });
-            i0.ɵɵelementStart(2, "mat-label");
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "input", 2);
-            i0.ɵɵelementStart(5, "mat-hint");
-            i0.ɵɵtext(6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "mat-error");
-            i0.ɵɵtemplate(8, TdDynamicFileInputComponent_ng_template_8_Template, 0, 0, "ng-template", 3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(9, TdDynamicFileInputComponent_button_9_Template, 3, 0, "button", 4);
-            i0.ɵɵelementStart(10, "td-file-input", 5, 6);
-            i0.ɵɵelementStart(12, "mat-icon");
-            i0.ɵɵtext(13, "folder");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "span");
-            i0.ɵɵtext(15);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("disabled", ctx.control == null ? null : ctx.control.disabled);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.label);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("value", ctx.control == null ? null : ctx.control.value == null ? null : ctx.control.value.name)("placeholder", ctx.placeholder)("disabled", ctx.control == null ? null : ctx.control.disabled);
-            i0.ɵɵattribute("name", ctx.name);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.hint);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(12, _c0$4, ctx.control, ctx.control == null ? null : ctx.control.errors));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.control.value);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("formControl", ctx.control);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.label);
-        }
-    }, directives: [i1.MatFormField, i2$1.TdFileDropDirective, i1.MatLabel, i2.MatInput, i1.MatHint, i1.MatError, i4.NgTemplateOutlet, i4.NgIf, i5.MatButton, i6.MatIcon, i2$1.TdFileInputComponent, i3.NgControlStatus, i3.FormControlDirective], styles: [".td-dynamic-file-input-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper[_ngcontent-%COMP%]   .td-dynamic-file-input-field[_ngcontent-%COMP%]{-ms-flex:1;flex:1;box-sizing:border-box}.td-file-input[_ngcontent-%COMP%]{margin-left:10px}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicFileInputComponent, [{
+TdDynamicFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicFileInputComponent, selector: "td-dynamic-file-input", ngImport: i0, template: "<div class=\"td-dynamic-file-input-wrapper\">\n  <mat-form-field\n    tdFileDrop\n    class=\"td-dynamic-file-input-field\"\n    floatLabel=\"never\"\n    [disabled]=\"control?.disabled\"\n    (fileDrop)=\"_handlefileDrop($event)\"\n    (click)=\"!control?.disabled && fileInput.inputElement.click()\"\n    (keyup.enter)=\"!control?.disabled && fileInput.inputElement.click()\"\n    (keyup.delete)=\"fileInput.clear()\"\n    (keyup.backspace)=\"fileInput.clear()\"\n  >\n    <mat-label>{{ label }}</mat-label>\n    <input\n      matInput\n      [value]=\"control?.value?.name\"\n      [placeholder]=\"placeholder\"\n      [attr.name]=\"name\"\n      [disabled]=\"control?.disabled\"\n      readonly\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n  <button\n    mat-icon-button\n    *ngIf=\"control.value\"\n    (click)=\"fileInput.clear()\"\n    (keyup.enter)=\"fileInput.clear()\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  <td-file-input class=\"td-file-input\" #fileInput [formControl]=\"control\">\n    <mat-icon>folder</mat-icon>\n    <span>{{ label }}</span>\n  </td-file-input>\n</div>\n", styles: [".td-dynamic-file-input-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper .td-dynamic-file-input-field{flex:1;box-sizing:border-box}.td-file-input{margin-left:10px}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.TdFileInputComponent, selector: "td-file-input", inputs: ["disabled", "value", "color", "multiple", "accept"], outputs: ["selectFile"] }], directives: [{ type: i4$1.TdFileDropDirective, selector: "[tdFileDrop]", inputs: ["multiple", "disabled"], outputs: ["fileDrop"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dynamic-file-input', template: "<div class=\"td-dynamic-file-input-wrapper\">\n  <mat-form-field\n    tdFileDrop\n    class=\"td-dynamic-file-input-field\"\n    floatLabel=\"never\"\n    [disabled]=\"control?.disabled\"\n    (fileDrop)=\"_handlefileDrop($event)\"\n    (click)=\"!control?.disabled && fileInput.inputElement.click()\"\n    (keyup.enter)=\"!control?.disabled && fileInput.inputElement.click()\"\n    (keyup.delete)=\"fileInput.clear()\"\n    (keyup.backspace)=\"fileInput.clear()\"\n  >\n    <mat-label>{{ label }}</mat-label>\n    <input\n      matInput\n      [value]=\"control?.value?.name\"\n      [placeholder]=\"placeholder\"\n      [attr.name]=\"name\"\n      [disabled]=\"control?.disabled\"\n      readonly\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{ control: control, errors: control?.errors }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n  <button mat-icon-button *ngIf=\"control.value\" (click)=\"fileInput.clear()\" (keyup.enter)=\"fileInput.clear()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n  <td-file-input class=\"td-file-input\" #fileInput [formControl]=\"control\">\n    <mat-icon>folder</mat-icon>\n    <span>{{ label }}</span>\n  </td-file-input>\n</div>\n", styles: [".td-dynamic-file-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper .td-dynamic-file-input-field{-ms-flex:1;flex:1;box-sizing:border-box}.td-file-input{margin-left:10px}\n"] }]
-        }], null, null);
-})();
+            args: [{ selector: 'td-dynamic-file-input', template: "<div class=\"td-dynamic-file-input-wrapper\">\n  <mat-form-field\n    tdFileDrop\n    class=\"td-dynamic-file-input-field\"\n    floatLabel=\"never\"\n    [disabled]=\"control?.disabled\"\n    (fileDrop)=\"_handlefileDrop($event)\"\n    (click)=\"!control?.disabled && fileInput.inputElement.click()\"\n    (keyup.enter)=\"!control?.disabled && fileInput.inputElement.click()\"\n    (keyup.delete)=\"fileInput.clear()\"\n    (keyup.backspace)=\"fileInput.clear()\"\n  >\n    <mat-label>{{ label }}</mat-label>\n    <input\n      matInput\n      [value]=\"control?.value?.name\"\n      [placeholder]=\"placeholder\"\n      [attr.name]=\"name\"\n      [disabled]=\"control?.disabled\"\n      readonly\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n  <button\n    mat-icon-button\n    *ngIf=\"control.value\"\n    (click)=\"fileInput.clear()\"\n    (keyup.enter)=\"fileInput.clear()\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n  <td-file-input class=\"td-file-input\" #fileInput [formControl]=\"control\">\n    <mat-icon>folder</mat-icon>\n    <span>{{ label }}</span>\n  </td-file-input>\n</div>\n", styles: [".td-dynamic-file-input-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper .td-dynamic-file-input-field{flex:1;box-sizing:border-box}.td-file-input{margin-left:10px}\n"] }]
+        }] });
 
-function TdDynamicTextareaComponent_ng_template_9_Template(rf, ctx) { }
-const _c0$3 = function (a0, a1) { return { control: a0, errors: a1 }; };
 class TdDynamicTextareaComponent {
     constructor() {
         this.label = '';
         this.hint = '';
         this.name = '';
-        this.required = undefined;
-        this.errorMessageTemplate = undefined;
+        this.required = false;
         this.placeholder = '';
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicTextareaComponent.ɵfac = function TdDynamicTextareaComponent_Factory(t) { return new (t || TdDynamicTextareaComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicTextareaComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicTextareaComponent, selectors: [["td-dynamic-textarea"]], decls: 10, vars: 11, consts: [[1, "td-dynamic-textarea-wrapper"], [1, "td-dynamic-textarea-field"], ["matInput", "", "rows", "4", 3, "formControl", "placeholder", "required"], ["elementInput", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function TdDynamicTextareaComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelementStart(1, "mat-form-field", 1);
-            i0.ɵɵelementStart(2, "mat-label");
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "textarea", 2, 3);
-            i0.ɵɵelementStart(6, "mat-hint");
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "mat-error");
-            i0.ɵɵtemplate(9, TdDynamicTextareaComponent_ng_template_9_Template, 0, 0, "ng-template", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.label);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("formControl", ctx.control)("placeholder", ctx.placeholder)("required", ctx.required);
-            i0.ɵɵattribute("name", ctx.name);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.hint);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(8, _c0$3, ctx.control, ctx.control == null ? null : ctx.control.errors));
-        }
-    }, directives: [i1.MatFormField, i1.MatLabel, i2.MatInput, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i3.RequiredValidator, i1.MatHint, i1.MatError, i4.NgTemplateOutlet], styles: [".td-dynamic-textarea-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-textarea-wrapper[_ngcontent-%COMP%]   .td-dynamic-textarea-field[_ngcontent-%COMP%]{-ms-flex:1;flex:1;box-sizing:border-box}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicTextareaComponent, [{
+TdDynamicTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicTextareaComponent, selector: "td-dynamic-textarea", ngImport: i0, template: "<div class=\"td-dynamic-textarea-wrapper\">\n  <mat-form-field class=\"td-dynamic-textarea-field\">\n    <mat-label>{{ label }}</mat-label>\n    <textarea\n      #elementInput\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      rows=\"4\"\n    ></textarea>\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-textarea-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-textarea-wrapper .td-dynamic-textarea-field{flex:1;box-sizing:border-box}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dynamic-textarea', template: "<div class=\"td-dynamic-textarea-wrapper\">\n  <mat-form-field class=\"td-dynamic-textarea-field\">\n    <mat-label>{{ label }}</mat-label>\n    <textarea\n      #elementInput\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      rows=\"4\"\n    ></textarea>\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{ control: control, errors: control?.errors }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-textarea-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-textarea-wrapper .td-dynamic-textarea-field{-ms-flex:1;flex:1;box-sizing:border-box}\n"] }]
-        }], null, null);
-})();
+            args: [{ selector: 'td-dynamic-textarea', template: "<div class=\"td-dynamic-textarea-wrapper\">\n  <mat-form-field class=\"td-dynamic-textarea-field\">\n    <mat-label>{{ label }}</mat-label>\n    <textarea\n      #elementInput\n      matInput\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      rows=\"4\"\n    ></textarea>\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-textarea-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-textarea-wrapper .td-dynamic-textarea-field{flex:1;box-sizing:border-box}\n"] }]
+        }] });
 
 class TdDynamicSlideToggleComponent {
     constructor() {
@@ -223,34 +90,12 @@ class TdDynamicSlideToggleComponent {
         this.required = false;
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicSlideToggleComponent.ɵfac = function TdDynamicSlideToggleComponent_Factory(t) { return new (t || TdDynamicSlideToggleComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicSlideToggleComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicSlideToggleComponent, selectors: [["td-dynamic-slide-toggle"]], decls: 5, vars: 5, consts: [[1, "td-dynamic-slide-toggle-wrapper"], [3, "formControl", "required"], [1, "mat-hint", "td-dynamic-element-hint"]], template: function TdDynamicSlideToggleComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelementStart(1, "mat-slide-toggle", 1);
-            i0.ɵɵtext(2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "span", 2);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("formControl", ctx.control)("required", ctx.required);
-            i0.ɵɵattribute("name", ctx.name);
-            i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.hint);
-        }
-    }, directives: [i1$1.MatSlideToggle, i1$1.MatSlideToggleRequiredValidator, i3.NgControlStatus, i3.FormControlDirective, i3.RequiredValidator], styles: [""] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicSlideToggleComponent, [{
+TdDynamicSlideToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicSlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicSlideToggleComponent, selector: "td-dynamic-slide-toggle", ngImport: i0, template: "<div class=\"td-dynamic-slide-toggle-wrapper\">\n  <mat-slide-toggle\n    [formControl]=\"control\"\n    [attr.name]=\"name\"\n    [required]=\"required\"\n  >\n    {{ label }}\n  </mat-slide-toggle>\n  <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n", styles: [""], components: [{ type: i1$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i1$1.MatSlideToggleRequiredValidator, selector: "mat-slide-toggle[required][formControlName],             mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSlideToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dynamic-slide-toggle', template: "<div class=\"td-dynamic-slide-toggle-wrapper\">\n  <mat-slide-toggle [formControl]=\"control\" [attr.name]=\"name\" [required]=\"required\">\n    {{ label }}\n  </mat-slide-toggle>\n  <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n", styles: [""] }]
-        }], null, null);
-})();
+            args: [{ selector: 'td-dynamic-slide-toggle', template: "<div class=\"td-dynamic-slide-toggle-wrapper\">\n  <mat-slide-toggle\n    [formControl]=\"control\"\n    [attr.name]=\"name\"\n    [required]=\"required\"\n  >\n    {{ label }}\n  </mat-slide-toggle>\n  <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n", styles: [""] }]
+        }] });
 
 class TdDynamicCheckboxComponent {
     constructor() {
@@ -260,50 +105,20 @@ class TdDynamicCheckboxComponent {
         this.required = false;
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicCheckboxComponent.ɵfac = function TdDynamicCheckboxComponent_Factory(t) { return new (t || TdDynamicCheckboxComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicCheckboxComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicCheckboxComponent, selectors: [["td-dynamic-checkbox"]], decls: 5, vars: 5, consts: [[1, "td-dynamic-checkbox-wrapper"], [3, "formControl", "name", "required"], [1, "mat-hint", "td-dynamic-element-hint"]], template: function TdDynamicCheckboxComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelementStart(1, "mat-checkbox", 1);
-            i0.ɵɵtext(2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "span", 2);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("formControl", ctx.control)("name", ctx.name)("required", ctx.required);
-            i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.hint);
-        }
-    }, directives: [i1$2.MatCheckbox, i1$2.MatCheckboxRequiredValidator, i3.NgControlStatus, i3.FormControlDirective, i3.RequiredValidator], styles: [""] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicCheckboxComponent, [{
+TdDynamicCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicCheckboxComponent, selector: "td-dynamic-checkbox", ngImport: i0, template: "<div class=\"td-dynamic-checkbox-wrapper\">\n  <mat-checkbox [formControl]=\"control\" [name]=\"name\" [required]=\"required\">\n    {{ label }}\n  </mat-checkbox>\n  <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n", styles: [""], components: [{ type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1$2.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-dynamic-checkbox', template: "<div class=\"td-dynamic-checkbox-wrapper\">\n  <mat-checkbox [formControl]=\"control\" [name]=\"name\" [required]=\"required\">\n    {{ label }}\n  </mat-checkbox>\n  <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n", styles: [""] }]
-        }], null, null);
-})();
+        }] });
 
-function TdDynamicSliderComponent_span_4_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "span", 8);
-        i0.ɵɵtext(1, "*");
-        i0.ɵɵelementEnd();
-    }
-}
 class TdDynamicSliderComponent {
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
         this.label = '';
-        this.required = undefined;
+        this.required = false;
         this.name = '';
         this.hint = '';
-        this.min = undefined;
-        this.max = undefined;
     }
     _handleBlur() {
         setTimeout(() => {
@@ -311,170 +126,44 @@ class TdDynamicSliderComponent {
         });
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicSliderComponent.ɵfac = function TdDynamicSliderComponent_Factory(t) { return new (t || TdDynamicSliderComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicSliderComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicSliderComponent, selectors: [["td-dynamic-slider"]], decls: 10, vars: 10, consts: [[1, "td-dynamic-slider-wrapper", "mat-form-field", "mat-form-field-can-float", "mat-form-field-should-float"], [1, "mat-form-field-label-wrapper"], [1, "mat-form-field-label", "mat-primary", "td-slider-label"], ["class", "mat-form-field-required-marker", 4, "ngIf"], [1, "td-dynamic-slider-field"], ["thumbLabel", "", "tickInterval", "auto", 1, "td-dynamic-slider", 3, "formControl", "min", "max", "required", "blur"], ["slider", ""], [1, "mat-hint", "td-dynamic-element-hint"], [1, "mat-form-field-required-marker"]], template: function TdDynamicSliderComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelementStart(1, "span", 1);
-            i0.ɵɵelementStart(2, "label", 2);
-            i0.ɵɵtext(3);
-            i0.ɵɵtemplate(4, TdDynamicSliderComponent_span_4_Template, 2, 0, "span", 3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 4);
-            i0.ɵɵelementStart(6, "mat-slider", 5, 6);
-            i0.ɵɵlistener("blur", function TdDynamicSliderComponent_Template_mat_slider_blur_6_listener() { return ctx._handleBlur(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "span", 7);
-            i0.ɵɵtext(9);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            const _r1 = i0.ɵɵreference(7);
-            i0.ɵɵclassProp("mat-focused", _r1._isActive);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.required && !(ctx.control == null ? null : ctx.control.disabled));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("formControl", ctx.control)("min", ctx.min)("max", ctx.max)("required", ctx.required);
-            i0.ɵɵattribute("name", ctx.name);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.hint);
-        }
-    }, directives: [i4.NgIf, i2$2.MatSlider, i3.NgControlStatus, i3.FormControlDirective, i3.RequiredValidator], styles: ["[_nghost-%COMP%]   .td-dynamic-slider-wrapper[_ngcontent-%COMP%]{display:block}.td-dynamic-slider-field[_ngcontent-%COMP%]{position:relative;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-slider-field[_ngcontent-%COMP%]   .td-dynamic-slider[_ngcontent-%COMP%]{-ms-flex:1;flex:1}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicSliderComponent, [{
+TdDynamicSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicSliderComponent, selector: "td-dynamic-slider", ngImport: i0, template: "<div\n  class=\"td-dynamic-slider-wrapper mat-form-field mat-form-field-can-float mat-form-field-should-float\"\n  [class.mat-focused]=\"slider._isActive\"\n>\n  <span class=\"mat-form-field-label-wrapper\">\n    <label class=\"mat-form-field-label mat-primary td-slider-label\">\n      {{ label }}\n      <span\n        *ngIf=\"required && !control?.disabled\"\n        class=\"mat-form-field-required-marker\"\n        >*</span\n      >\n    </label>\n  </span>\n  <div class=\"td-dynamic-slider-field\">\n    <mat-slider\n      #slider\n      class=\"td-dynamic-slider\"\n      [formControl]=\"control\"\n      [attr.name]=\"name\"\n      [min]=\"min\"\n      [max]=\"max\"\n      thumbLabel\n      tickInterval=\"auto\"\n      [required]=\"required\"\n      (blur)=\"_handleBlur()\"\n    ></mat-slider>\n  </div>\n  <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n", styles: [":host .td-dynamic-slider-wrapper{display:block}.td-dynamic-slider-field{position:relative;flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-slider-field .td-dynamic-slider{flex:1}\n"], components: [{ type: i1$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dynamic-slider', template: "<div\n  class=\"td-dynamic-slider-wrapper mat-form-field mat-form-field-can-float mat-form-field-should-float\"\n  [class.mat-focused]=\"slider._isActive\"\n>\n  <span class=\"mat-form-field-label-wrapper\">\n    <label class=\"mat-form-field-label mat-primary td-slider-label\">\n      {{ label }}\n      <span *ngIf=\"required && !control?.disabled\" class=\"mat-form-field-required-marker\">*</span>\n    </label>\n  </span>\n  <div class=\"td-dynamic-slider-field\">\n    <mat-slider\n      #slider\n      class=\"td-dynamic-slider\"\n      [formControl]=\"control\"\n      [attr.name]=\"name\"\n      [min]=\"min\"\n      [max]=\"max\"\n      thumbLabel\n      tickInterval=\"auto\"\n      [required]=\"required\"\n      (blur)=\"_handleBlur()\"\n    ></mat-slider>\n  </div>\n  <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n", styles: [":host .td-dynamic-slider-wrapper{display:block}.td-dynamic-slider-field{position:relative;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-slider-field .td-dynamic-slider{-ms-flex:1;flex:1}\n"] }]
-        }], function () { return [{ type: i0.ChangeDetectorRef }]; }, null);
-})();
+            args: [{ selector: 'td-dynamic-slider', template: "<div\n  class=\"td-dynamic-slider-wrapper mat-form-field mat-form-field-can-float mat-form-field-should-float\"\n  [class.mat-focused]=\"slider._isActive\"\n>\n  <span class=\"mat-form-field-label-wrapper\">\n    <label class=\"mat-form-field-label mat-primary td-slider-label\">\n      {{ label }}\n      <span\n        *ngIf=\"required && !control?.disabled\"\n        class=\"mat-form-field-required-marker\"\n        >*</span\n      >\n    </label>\n  </span>\n  <div class=\"td-dynamic-slider-field\">\n    <mat-slider\n      #slider\n      class=\"td-dynamic-slider\"\n      [formControl]=\"control\"\n      [attr.name]=\"name\"\n      [min]=\"min\"\n      [max]=\"max\"\n      thumbLabel\n      tickInterval=\"auto\"\n      [required]=\"required\"\n      (blur)=\"_handleBlur()\"\n    ></mat-slider>\n  </div>\n  <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n", styles: [":host .td-dynamic-slider-wrapper{display:block}.td-dynamic-slider-field{position:relative;flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-slider-field .td-dynamic-slider{flex:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
-function TdDynamicSelectComponent_mat_option_5_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "mat-option", 5);
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const selection_r2 = ctx.$implicit;
-        i0.ɵɵproperty("value", selection_r2.value || selection_r2);
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", selection_r2.label || selection_r2, " ");
-    }
-}
-function TdDynamicSelectComponent_ng_template_9_Template(rf, ctx) { }
-const _c0$2 = function (a0, a1) { return { control: a0, errors: a1 }; };
 class TdDynamicSelectComponent {
     constructor() {
         this.label = '';
         this.hint = '';
         this.name = '';
-        this.required = undefined;
-        this.selections = undefined;
-        this.multiple = undefined;
-        this.errorMessageTemplate = undefined;
+        this.required = false;
         this.placeholder = '';
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicSelectComponent.ɵfac = function TdDynamicSelectComponent_Factory(t) { return new (t || TdDynamicSelectComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicSelectComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicSelectComponent, selectors: [["td-dynamic-select"]], decls: 10, vars: 13, consts: [[1, "td-dynamic-select-wrapper"], [1, "td-dynamic-select-field"], [3, "formControl", "placeholder", "required", "multiple"], [3, "value", 4, "ngFor", "ngForOf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "value"]], template: function TdDynamicSelectComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelementStart(1, "mat-form-field", 1);
-            i0.ɵɵelementStart(2, "mat-label");
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "mat-select", 2);
-            i0.ɵɵtemplate(5, TdDynamicSelectComponent_mat_option_5_Template, 2, 2, "mat-option", 3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "mat-hint");
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "mat-error");
-            i0.ɵɵtemplate(9, TdDynamicSelectComponent_ng_template_9_Template, 0, 0, "ng-template", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.label);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("formControl", ctx.control)("placeholder", ctx.placeholder)("required", ctx.required)("multiple", ctx.multiple);
-            i0.ɵɵattribute("name", ctx.name);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.selections);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.hint);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(10, _c0$2, ctx.control, ctx.control == null ? null : ctx.control.errors));
-        }
-    }, directives: [i1.MatFormField, i1.MatLabel, i2$3.MatSelect, i3.NgControlStatus, i3.FormControlDirective, i3.RequiredValidator, i4.NgForOf, i5$1.MatOption, i1.MatHint, i1.MatError, i4.NgTemplateOutlet], styles: [".td-dynamic-select-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-select-wrapper[_ngcontent-%COMP%]   .td-dynamic-select-field[_ngcontent-%COMP%]{-ms-flex:1;flex:1;box-sizing:border-box}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicSelectComponent, [{
+TdDynamicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicSelectComponent, selector: "td-dynamic-select", ngImport: i0, template: "<div class=\"td-dynamic-select-wrapper\">\n  <mat-form-field class=\"td-dynamic-select-field\">\n    <mat-label>{{ label }}</mat-label>\n    <mat-select\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      [multiple]=\"multiple\"\n    >\n      <mat-option\n        *ngFor=\"let selection of selections\"\n        [value]=\"selection.value || selection\"\n      >\n        {{ selection.label || selection }}\n      </mat-option>\n    </mat-select>\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-select-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-select-wrapper .td-dynamic-select-field{flex:1;box-sizing:border-box}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1.MatLabel, selector: "mat-label" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dynamic-select', template: "<div class=\"td-dynamic-select-wrapper\">\n  <mat-form-field class=\"td-dynamic-select-field\">\n    <mat-label>{{ label }}</mat-label>\n    <mat-select\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      [multiple]=\"multiple\"\n    >\n      <mat-option *ngFor=\"let selection of selections\" [value]=\"selection.value || selection\">\n        {{ selection.label || selection }}\n      </mat-option>\n    </mat-select>\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{ control: control, errors: control?.errors }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-select-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-select-wrapper .td-dynamic-select-field{-ms-flex:1;flex:1;box-sizing:border-box}\n"] }]
-        }], null, null);
-})();
+            args: [{ selector: 'td-dynamic-select', template: "<div class=\"td-dynamic-select-wrapper\">\n  <mat-form-field class=\"td-dynamic-select-field\">\n    <mat-label>{{ label }}</mat-label>\n    <mat-select\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [attr.name]=\"name\"\n      [multiple]=\"multiple\"\n    >\n      <mat-option\n        *ngFor=\"let selection of selections\"\n        [value]=\"selection.value || selection\"\n      >\n        {{ selection.label || selection }}\n      </mat-option>\n    </mat-select>\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-select-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-select-wrapper .td-dynamic-select-field{flex:1;box-sizing:border-box}\n"] }]
+        }] });
 
-function TdDynamicDatepickerComponent_ng_template_9_Template(rf, ctx) { }
-const _c0$1 = function (a0, a1) { return { control: a0, errors: a1 }; };
 class TdDynamicDatepickerComponent {
     constructor() {
         this.label = '';
         this.hint = '';
         this.name = '';
-        this.type = undefined;
-        this.required = undefined;
-        this.min = undefined;
-        this.max = undefined;
-        this.errorMessageTemplate = undefined;
+        this.required = false;
         this.placeholder = '';
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicDatepickerComponent.ɵfac = function TdDynamicDatepickerComponent_Factory(t) { return new (t || TdDynamicDatepickerComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicDatepickerComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicDatepickerComponent, selectors: [["td-dynamic-datepicker"]], decls: 13, vars: 15, consts: [[1, "td-dynamic-datepicker-wrapper"], [1, "td-dynamic-datepicker-field"], ["matInput", "", 3, "matDatepicker", "formControl", "placeholder", "required", "name", "min", "max"], ["elementInput", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matSuffix", "", 3, "for"], ["dynamicDatePicker", ""]], template: function TdDynamicDatepickerComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelementStart(1, "mat-form-field", 1);
-            i0.ɵɵelementStart(2, "mat-label");
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "input", 2, 3);
-            i0.ɵɵelementStart(6, "mat-hint");
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "mat-error");
-            i0.ɵɵtemplate(9, TdDynamicDatepickerComponent_ng_template_9_Template, 0, 0, "ng-template", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(10, "mat-datepicker-toggle", 5);
-            i0.ɵɵelement(11, "mat-datepicker", null, 6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            const _r2 = i0.ɵɵreference(12);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.label);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("matDatepicker", _r2)("formControl", ctx.control)("placeholder", ctx.placeholder)("required", ctx.required)("name", ctx.name)("min", ctx.min)("max", ctx.max);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.hint);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(12, _c0$1, ctx.control, ctx.control == null ? null : ctx.control.errors));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("for", _r2);
-        }
-    }, directives: [i1.MatFormField, i1.MatLabel, i2.MatInput, i3$1.MatDatepickerInput, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i3.RequiredValidator, i1.MatHint, i1.MatError, i4.NgTemplateOutlet, i3$1.MatDatepickerToggle, i1.MatSuffix, i3$1.MatDatepicker], styles: [".td-dynamic-datepicker-wrapper[_ngcontent-%COMP%]{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-datepicker-wrapper[_ngcontent-%COMP%]   .td-dynamic-datepicker-field[_ngcontent-%COMP%]{-ms-flex:1;flex:1;box-sizing:border-box}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicDatepickerComponent, [{
+TdDynamicDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicDatepickerComponent, selector: "td-dynamic-datepicker", ngImport: i0, template: "<div class=\"td-dynamic-datepicker-wrapper\">\n  <mat-form-field class=\"td-dynamic-datepicker-field\">\n    <mat-label>{{ label }}</mat-label>\n    <input\n      #elementInput\n      matInput\n      [matDatepicker]=\"dynamicDatePicker\"\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [name]=\"name\"\n      [min]=\"min\"\n      [max]=\"max\"\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n    <mat-datepicker-toggle\n      matSuffix\n      [for]=\"dynamicDatePicker\"\n    ></mat-datepicker-toggle>\n    <mat-datepicker #dynamicDatePicker></mat-datepicker>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-datepicker-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-datepicker-wrapper .td-dynamic-datepicker-field{flex:1;box-sizing:border-box}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dynamic-datepicker', template: "<div class=\"td-dynamic-datepicker-wrapper\">\n  <mat-form-field class=\"td-dynamic-datepicker-field\">\n    <mat-label>{{ label }}</mat-label>\n    <input\n      #elementInput\n      matInput\n      [matDatepicker]=\"dynamicDatePicker\"\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [name]=\"name\"\n      [min]=\"min\"\n      [max]=\"max\"\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{ control: control, errors: control?.errors }\"\n      ></ng-template>\n    </mat-error>\n    <mat-datepicker-toggle matSuffix [for]=\"dynamicDatePicker\"></mat-datepicker-toggle>\n    <mat-datepicker #dynamicDatePicker></mat-datepicker>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-datepicker-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-datepicker-wrapper .td-dynamic-datepicker-field{-ms-flex:1;flex:1;box-sizing:border-box}\n"] }]
-        }], null, null);
-})();
+            args: [{ selector: 'td-dynamic-datepicker', template: "<div class=\"td-dynamic-datepicker-wrapper\">\n  <mat-form-field class=\"td-dynamic-datepicker-field\">\n    <mat-label>{{ label }}</mat-label>\n    <input\n      #elementInput\n      matInput\n      [matDatepicker]=\"dynamicDatePicker\"\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [name]=\"name\"\n      [min]=\"min\"\n      [max]=\"max\"\n    />\n    <mat-hint>{{ hint }}</mat-hint>\n    <mat-error>\n      <ng-template\n        [ngTemplateOutlet]=\"errorMessageTemplate\"\n        [ngTemplateOutletContext]=\"{\n          control: control,\n          errors: control?.errors\n        }\"\n      ></ng-template>\n    </mat-error>\n    <mat-datepicker-toggle\n      matSuffix\n      [for]=\"dynamicDatePicker\"\n    ></mat-datepicker-toggle>\n    <mat-datepicker #dynamicDatePicker></mat-datepicker>\n  </mat-form-field>\n</div>\n", styles: [".td-dynamic-datepicker-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-datepicker-wrapper .td-dynamic-datepicker-field{flex:1;box-sizing:border-box}\n"] }]
+        }] });
 
 var TdDynamicType;
 (function (TdDynamicType) {
@@ -496,7 +185,7 @@ var TdDynamicElement;
     TdDynamicElement["Select"] = "select";
     TdDynamicElement["FileInput"] = "file-input";
 })(TdDynamicElement || (TdDynamicElement = {}));
-const DYNAMIC_ELEMENT_NAME_REGEX = /^[^0-9][^\@]*$/;
+const DYNAMIC_ELEMENT_NAME_REGEX = /^[^0-9][^@]*$/;
 class TdDynamicFormsService {
     /**
      * Method to validate if the [name] is a proper element name.
@@ -550,38 +239,51 @@ class TdDynamicFormsService {
      * Creates form validationdepending [ITdDynamicElementConfig] properties.
      */
     createValidators(config) {
-        let validator;
+        let validator = null;
         if (config.required) {
             validator = Validators.required;
         }
         if (config.max || config.max === 0) {
-            validator = Validators.compose([validator, Validators.max(parseFloat(config.max))]);
+            validator = Validators.compose([
+                validator,
+                Validators.max(parseFloat(config.max)),
+            ]);
         }
         if (config.min || config.min === 0) {
-            validator = Validators.compose([validator, Validators.min(parseFloat(config.min))]);
+            validator = Validators.compose([
+                validator,
+                Validators.min(parseFloat(config.min)),
+            ]);
         }
         if (config.maxLength || config.maxLength === 0) {
-            validator = Validators.compose([validator, Validators.maxLength(parseFloat(config.maxLength))]);
+            validator = Validators.compose([
+                validator,
+                Validators.maxLength(parseFloat(config.maxLength)),
+            ]);
         }
         if (config.minLength || config.minLength === 0) {
-            validator = Validators.compose([validator, Validators.minLength(parseFloat(config.minLength))]);
+            validator = Validators.compose([
+                validator,
+                Validators.minLength(parseFloat(config.minLength)),
+            ]);
         }
         // Add provided custom validators to the validator function
         if (config.validators) {
             config.validators.forEach((validatorConfig) => {
-                validator = Validators.compose([validator, validatorConfig.validator]);
+                validator = Validators.compose([
+                    validator,
+                    validatorConfig.validator,
+                ]);
             });
         }
         return validator;
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicFormsService.ɵfac = function TdDynamicFormsService_Factory(t) { return new (t || TdDynamicFormsService)(); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicFormsService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TdDynamicFormsService, factory: TdDynamicFormsService.ɵfac });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicFormsService, [{
+TdDynamicFormsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TdDynamicFormsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsService, decorators: [{
             type: Injectable
-        }], null, null);
-})();
+        }] });
 function DYNAMIC_FORMS_PROVIDER_FACTORY(parent) {
     return parent || new TdDynamicFormsService();
 }
@@ -599,37 +301,33 @@ class TdDynamicElementBase {
 }
 /* tslint:disable-next-line */
 const _TdDynamicElementMixinBase = mixinControlValueAccessor(TdDynamicElementBase);
-class TdDynamicFormsErrorTemplateDirective extends TemplatePortalDirective {
+class TdDynamicFormsErrorTemplateDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
         this.templateRef = templateRef;
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicFormsErrorTemplateDirective.ɵfac = function TdDynamicFormsErrorTemplateDirective_Factory(t) { return new (t || TdDynamicFormsErrorTemplateDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicFormsErrorTemplateDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdDynamicFormsErrorTemplateDirective, selectors: [["ng-template", "tdDynamicFormsError", ""]], inputs: { tdDynamicFormsError: "tdDynamicFormsError" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicFormsErrorTemplateDirective, [{
+TdDynamicFormsErrorTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsErrorTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdDynamicFormsErrorTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicFormsErrorTemplateDirective, selector: "[tdDynamicFormsError]ng-template", inputs: { tdDynamicFormsError: "tdDynamicFormsError" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsErrorTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[tdDynamicFormsError]ng-template' }]
-        }], function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, { tdDynamicFormsError: [{
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { tdDynamicFormsError: [{
                 type: Input
-            }] });
-})();
+            }] } });
 class TdDynamicElementDirective {
     constructor(viewContainer) {
         this.viewContainer = viewContainer;
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicElementDirective.ɵfac = function TdDynamicElementDirective_Factory(t) { return new (t || TdDynamicElementDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicElementDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdDynamicElementDirective, selectors: [["", "tdDynamicContainer", ""]] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicElementDirective, [{
+TdDynamicElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicElementDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdDynamicElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicElementDirective, selector: "[tdDynamicContainer]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicElementDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdDynamicContainer]',
                 }]
-        }], function () { return [{ type: i0.ViewContainerRef }]; }, null);
-})();
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
 class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
     constructor(_componentFactoryResolver, _dynamicFormsService, _changeDetectorRef) {
         super(_changeDetectorRef);
@@ -647,43 +345,6 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
          * Sets name to be displayed as attribute.
          */
         this.name = '';
-        /**
-         * Sets type or element of element to be rendered.
-         * Throws error if does not exist or no supported.
-         */
-        this.type = undefined;
-        /**
-         * Sets required validation checkup (if supported by element).
-         */
-        this.required = undefined;
-        /**
-         * Sets min validation checkup (if supported by element).
-         */
-        this.min = undefined;
-        /**
-         * Sets max validation checkup (if supported by element).
-         */
-        this.max = undefined;
-        /**
-         * Sets minLength validation checkup (if supported by element).
-         */
-        this.minLength = undefined;
-        /**
-         * Sets maxLength validation checkup (if supported by element).
-         */
-        this.maxLength = undefined;
-        /**
-         * Sets selections for array elements (if supported by element).
-         */
-        this.selections = undefined;
-        /**
-         * Sets multiple property for array elements (if supported by element).
-         */
-        this.multiple = undefined;
-        /**
-         * Sets error message template so it can be injected into dynamic components.
-         */
-        this.errorMessageTemplate = undefined;
         /**
          * Sets the placeholder message
          */
@@ -696,7 +357,9 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
         return this.min;
     }
     ngOnInit() {
-        const component = this.type instanceof Type ? this.type : this._dynamicFormsService.getDynamicElement(this.type);
+        const component = this.type instanceof Type
+            ? this.type
+            : this._dynamicFormsService.getDynamicElement(this.type);
         const ref = this._componentFactoryResolver
             .resolveComponentFactory(component)
             .create(this.childElement.viewContainer.injector);
@@ -719,7 +382,9 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
         this._instance.placeholder = this.placeholder;
         if (this.customConfig) {
             Object.getOwnPropertyNames(this.customConfig).forEach((name) => {
-                this._instance[name] = this.customConfig[name];
+                if (this.customConfig) {
+                    this._instance[name] = this.customConfig[name];
+                }
             });
         }
     }
@@ -734,47 +399,30 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicElementComponent.ɵfac = function TdDynamicElementComponent_Factory(t) { return new (t || TdDynamicElementComponent)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(TdDynamicFormsService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicElementComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicElementComponent, selectors: [["td-dynamic-element"]], viewQuery: function TdDynamicElementComponent_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(TdDynamicElementDirective, 7);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childElement = _t.first);
-        }
-    }, hostVars: 2, hostBindings: function TdDynamicElementComponent_HostBindings(rf, ctx) {
-        if (rf & 2) {
-            i0.ɵɵattribute("max", ctx.maxAttr)("min", ctx.minAttr);
-        }
-    }, inputs: { dynamicControl: "dynamicControl", label: "label", hint: "hint", name: "name", type: "type", required: "required", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", selections: "selections", multiple: "multiple", customConfig: "customConfig", errorMessageTemplate: "errorMessageTemplate", placeholder: "placeholder" }, features: [i0.ɵɵProvidersFeature([
-            TdDynamicFormsService,
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => TdDynamicElementComponent)),
-                multi: true,
-            },
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 0, consts: [["tdDynamicContainer", ""]], template: function TdDynamicElementComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelement(0, "div", 0);
-        }
-    }, directives: [TdDynamicElementDirective], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicElementComponent, [{
+TdDynamicElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicElementComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: TdDynamicFormsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicElementComponent, selector: "td-dynamic-element", inputs: { dynamicControl: "dynamicControl", label: "label", hint: "hint", name: "name", type: "type", required: "required", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", selections: "selections", multiple: "multiple", customConfig: "customConfig", errorMessageTemplate: "errorMessageTemplate", placeholder: "placeholder" }, host: { properties: { "attr.max": "this.maxAttr", "attr.min": "this.minAttr" } }, providers: [
+        TdDynamicFormsService,
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TdDynamicElementComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "childElement", first: true, predicate: TdDynamicElementDirective, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<div tdDynamicContainer></div>', isInline: true, directives: [{ type: TdDynamicElementDirective, selector: "[tdDynamicContainer]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicElementComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
                         TdDynamicFormsService,
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef((() => TdDynamicElementComponent)),
+                            useExisting: forwardRef(() => TdDynamicElementComponent),
                             multi: true,
                         },
                     ],
                     selector: 'td-dynamic-element',
                     template: '<div tdDynamicContainer></div>',
                 }]
-        }], function () { return [{ type: i0.ComponentFactoryResolver }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }]; }, { dynamicControl: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dynamicControl: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -813,34 +461,8 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
             }], minAttr: [{
                 type: HostBinding,
                 args: ['attr.min']
-            }] });
-})();
+            }] } });
 
-function TdDynamicFormsComponent_ng_template_2_td_dynamic_element_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "td-dynamic-element", 5, 6);
-    }
-    if (rf & 2) {
-        const element_r1 = i0.ɵɵnextContext().$implicit;
-        const ctx_r2 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("formControlName", element_r1.name)("dynamicControl", ctx_r2.dynamicForm.controls[element_r1.name])("id", element_r1.name)("name", element_r1.name)("label", element_r1.label || element_r1.name)("hint", element_r1.hint)("type", element_r1.type)("required", element_r1.required)("min", element_r1.min)("max", element_r1.max)("minLength", element_r1.minLength)("maxLength", element_r1.maxLength)("selections", element_r1.selections)("multiple", element_r1.multiple)("customConfig", element_r1.customConfig)("errorMessageTemplate", ctx_r2.getErrorTemplateRef(element_r1.name))("placeholder", element_r1.placeholder);
-    }
-}
-function TdDynamicFormsComponent_ng_template_2_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 3);
-        i0.ɵɵtemplate(1, TdDynamicFormsComponent_ng_template_2_td_dynamic_element_1_Template, 2, 17, "td-dynamic-element", 4);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const element_r1 = ctx.$implicit;
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵstyleProp("max-width", element_r1.flex ? element_r1.flex : 100, "%")("flex", "1 1 " + (element_r1.flex ? element_r1.flex : 100) + "%")("-ms-flex", "1 1 " + (element_r1.flex ? element_r1.flex : 100) + "%")("-webkit-box-flex", 1);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r0.dynamicForm.controls[element_r1.name]);
-    }
-}
-const _c0 = ["*"];
 class TdDynamicFormsComponent {
     constructor(_formBuilder, _dynamicFormsService, _changeDetectorRef) {
         this._formBuilder = _formBuilder;
@@ -919,7 +541,7 @@ class TdDynamicFormsComponent {
         this._updateErrorTemplates();
     }
     ngOnDestroy() {
-        this._destroy$.next();
+        this._destroy$.next(0);
         this._destroy$.complete();
         this._destroyControl$.complete();
     }
@@ -940,9 +562,10 @@ class TdDynamicFormsComponent {
      * Loads error templates and sets them in a map for faster access.
      */
     _updateErrorTemplates() {
+        var _a;
         this._templateMap = new Map();
         for (const errorTemplate of this._errorTemplates.toArray()) {
-            this._templateMap.set(errorTemplate.tdDynamicFormsError, errorTemplate.templateRef);
+            this._templateMap.set((_a = errorTemplate.tdDynamicFormsError) !== null && _a !== void 0 ? _a : '', errorTemplate.templateRef);
         }
     }
     _rerenderElements() {
@@ -977,7 +600,7 @@ class TdDynamicFormsComponent {
         });
         // call a change detection since the whole form might change
         this._changeDetectorRef.detectChanges();
-        timer()
+        timer(0)
             .toPromise()
             .then(() => {
             // call a markForCheck so elements are rendered correctly in OnPush
@@ -996,48 +619,24 @@ class TdDynamicFormsComponent {
     _subscribeToControlStatusChanges(elementName) {
         const control = this.controls[elementName];
         const controlDestroyed$ = this._destroyControl$.pipe(filter((destroyedElementName) => destroyedElementName === elementName));
-        control.statusChanges.pipe(takeUntil(this._destroy$), takeUntil(controlDestroyed$)).subscribe(() => {
+        control.statusChanges
+            .pipe(takeUntil(this._destroy$), takeUntil(controlDestroyed$))
+            .subscribe(() => {
             this._changeDetectorRef.markForCheck();
         });
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdDynamicFormsComponent.ɵfac = function TdDynamicFormsComponent_Factory(t) { return new (t || TdDynamicFormsComponent)(i0.ɵɵdirectiveInject(i3.FormBuilder), i0.ɵɵdirectiveInject(TdDynamicFormsService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-/** @nocollapse */ /** @nocollapse */ TdDynamicFormsComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdDynamicFormsComponent, selectors: [["td-dynamic-forms"]], contentQueries: function TdDynamicFormsComponent_ContentQueries(rf, ctx, dirIndex) {
-        if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, TdDynamicFormsErrorTemplateDirective, 5);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._errorTemplates = _t);
-        }
-    }, inputs: { elements: "elements" }, ngContentSelectors: _c0, decls: 4, vars: 2, consts: [["novalidate", "", 3, "formGroup"], [1, "td-dynamic-form-wrapper"], ["ngFor", "", 3, "ngForOf"], [1, "td-dynamic-element-wrapper"], [3, "formControlName", "dynamicControl", "id", "name", "label", "hint", "type", "required", "min", "max", "minLength", "maxLength", "selections", "multiple", "customConfig", "errorMessageTemplate", "placeholder", 4, "ngIf"], [3, "formControlName", "dynamicControl", "id", "name", "label", "hint", "type", "required", "min", "max", "minLength", "maxLength", "selections", "multiple", "customConfig", "errorMessageTemplate", "placeholder"], ["dynamicElement", ""]], template: function TdDynamicFormsComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "form", 0);
-            i0.ɵɵelementStart(1, "div", 1);
-            i0.ɵɵtemplate(2, TdDynamicFormsComponent_ng_template_2_Template, 2, 9, "ng-template", 2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵprojection(3);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("formGroup", ctx.dynamicForm);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngForOf", ctx.elements);
-        }
-    }, directives: [i3.ɵNgNoValidate, i3.NgControlStatusGroup, i3.FormGroupDirective, i4.NgForOf, i4.NgIf, TdDynamicElementComponent, i3.NgControlStatus, i3.FormControlName, i3.RequiredValidator], styles: [".td-dynamic-form-wrapper[_ngcontent-%COMP%]{-ms-flex-flow:row wrap;flex-flow:row wrap;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:flex-start}.td-dynamic-form-wrapper[_ngcontent-%COMP%]     .mat-form-field-infix{width:auto}.td-dynamic-form-wrapper[_ngcontent-%COMP%]     .td-dynamic-element-hint{font-size:75%;display:block}.td-dynamic-form-wrapper[_ngcontent-%COMP%]   .td-dynamic-element-wrapper[_ngcontent-%COMP%]{max-height:100%;box-sizing:border-box;position:relative;padding:4px 4px 8px}"], changeDetection: 0 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicFormsComponent, [{
+TdDynamicFormsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsComponent, deps: [{ token: i3.FormBuilder }, { token: TdDynamicFormsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdDynamicFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicFormsComponent, selector: "td-dynamic-forms", inputs: { elements: "elements" }, queries: [{ propertyName: "_errorTemplates", predicate: TdDynamicFormsErrorTemplateDirective, descendants: true }], ngImport: i0, template: "<form [formGroup]=\"dynamicForm\" novalidate>\n  <div class=\"td-dynamic-form-wrapper\">\n    <ng-template let-element ngFor [ngForOf]=\"elements\">\n      <div\n        class=\"td-dynamic-element-wrapper\"\n        [style.max-width.%]=\"element.flex ? element.flex : 100\"\n        [style.flex]=\"'1 1 ' + (element.flex ? element.flex : 100) + '%'\"\n        [style.-ms-flex]=\"'1 1 ' + (element.flex ? element.flex : 100) + '%'\"\n        [style.-webkit-box-flex]=\"1\"\n      >\n        <td-dynamic-element\n          #dynamicElement\n          *ngIf=\"dynamicForm.controls[element.name]\"\n          [formControlName]=\"element.name\"\n          [dynamicControl]=\"dynamicForm.controls[element.name]\"\n          [id]=\"element.name\"\n          [name]=\"element.name\"\n          [label]=\"element.label || element.name\"\n          [hint]=\"element.hint\"\n          [type]=\"element.type\"\n          [required]=\"element.required ?? false\"\n          [min]=\"element.min\"\n          [max]=\"element.max\"\n          [minLength]=\"element.minLength\"\n          [maxLength]=\"element.maxLength\"\n          [selections]=\"element.selections\"\n          [multiple]=\"element.multiple\"\n          [customConfig]=\"element.customConfig\"\n          [errorMessageTemplate]=\"getErrorTemplateRef(element.name)\"\n          [placeholder]=\"element.placeholder\"\n        ></td-dynamic-element>\n      </div>\n    </ng-template>\n  </div>\n  <ng-content></ng-content>\n</form>\n", styles: [".td-dynamic-form-wrapper{flex-flow:row wrap;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}.td-dynamic-form-wrapper ::ng-deep .mat-form-field-infix{width:auto}.td-dynamic-form-wrapper ::ng-deep .td-dynamic-element-hint{font-size:75%;display:block}.td-dynamic-form-wrapper .td-dynamic-element-wrapper{max-height:100%;box-sizing:border-box;position:relative;padding:4px 4px 8px}\n"], components: [{ type: TdDynamicElementComponent, selector: "td-dynamic-element", inputs: ["dynamicControl", "label", "hint", "name", "type", "required", "min", "max", "minLength", "maxLength", "selections", "multiple", "customConfig", "errorMessageTemplate", "placeholder"] }], directives: [{ type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dynamic-forms', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"dynamicForm\" novalidate>\n  <div class=\"td-dynamic-form-wrapper\">\n    <ng-template let-element ngFor [ngForOf]=\"elements\">\n      <div\n        class=\"td-dynamic-element-wrapper\"\n        [style.max-width.%]=\"element.flex ? element.flex : 100\"\n        [style.flex]=\"'1 1 ' + (element.flex ? element.flex : 100) + '%'\"\n        [style.-ms-flex]=\"'1 1 ' + (element.flex ? element.flex : 100) + '%'\"\n        [style.-webkit-box-flex]=\"1\"\n      >\n        <td-dynamic-element\n          #dynamicElement\n          *ngIf=\"dynamicForm.controls[element.name]\"\n          [formControlName]=\"element.name\"\n          [dynamicControl]=\"dynamicForm.controls[element.name]\"\n          [id]=\"element.name\"\n          [name]=\"element.name\"\n          [label]=\"element.label || element.name\"\n          [hint]=\"element.hint\"\n          [type]=\"element.type\"\n          [required]=\"element.required\"\n          [min]=\"element.min\"\n          [max]=\"element.max\"\n          [minLength]=\"element.minLength\"\n          [maxLength]=\"element.maxLength\"\n          [selections]=\"element.selections\"\n          [multiple]=\"element.multiple\"\n          [customConfig]=\"element.customConfig\"\n          [errorMessageTemplate]=\"getErrorTemplateRef(element.name)\"\n          [placeholder]=\"element.placeholder\"\n        ></td-dynamic-element>\n      </div>\n    </ng-template>\n  </div>\n  <ng-content></ng-content>\n</form>\n", styles: [".td-dynamic-form-wrapper{-ms-flex-flow:row wrap;flex-flow:row wrap;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:start;justify-content:flex-start}.td-dynamic-form-wrapper ::ng-deep .mat-form-field-infix{width:auto}.td-dynamic-form-wrapper ::ng-deep .td-dynamic-element-hint{font-size:75%;display:block}.td-dynamic-form-wrapper .td-dynamic-element-wrapper{max-height:100%;box-sizing:border-box;position:relative;padding:4px 4px 8px}\n"] }]
-        }], function () { return [{ type: i3.FormBuilder }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }]; }, { _errorTemplates: [{
+            args: [{ selector: 'td-dynamic-forms', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"dynamicForm\" novalidate>\n  <div class=\"td-dynamic-form-wrapper\">\n    <ng-template let-element ngFor [ngForOf]=\"elements\">\n      <div\n        class=\"td-dynamic-element-wrapper\"\n        [style.max-width.%]=\"element.flex ? element.flex : 100\"\n        [style.flex]=\"'1 1 ' + (element.flex ? element.flex : 100) + '%'\"\n        [style.-ms-flex]=\"'1 1 ' + (element.flex ? element.flex : 100) + '%'\"\n        [style.-webkit-box-flex]=\"1\"\n      >\n        <td-dynamic-element\n          #dynamicElement\n          *ngIf=\"dynamicForm.controls[element.name]\"\n          [formControlName]=\"element.name\"\n          [dynamicControl]=\"dynamicForm.controls[element.name]\"\n          [id]=\"element.name\"\n          [name]=\"element.name\"\n          [label]=\"element.label || element.name\"\n          [hint]=\"element.hint\"\n          [type]=\"element.type\"\n          [required]=\"element.required ?? false\"\n          [min]=\"element.min\"\n          [max]=\"element.max\"\n          [minLength]=\"element.minLength\"\n          [maxLength]=\"element.maxLength\"\n          [selections]=\"element.selections\"\n          [multiple]=\"element.multiple\"\n          [customConfig]=\"element.customConfig\"\n          [errorMessageTemplate]=\"getErrorTemplateRef(element.name)\"\n          [placeholder]=\"element.placeholder\"\n        ></td-dynamic-element>\n      </div>\n    </ng-template>\n  </div>\n  <ng-content></ng-content>\n</form>\n", styles: [".td-dynamic-form-wrapper{flex-flow:row wrap;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}.td-dynamic-form-wrapper ::ng-deep .mat-form-field-infix{width:auto}.td-dynamic-form-wrapper ::ng-deep .td-dynamic-element-hint{font-size:75%;display:block}.td-dynamic-form-wrapper .td-dynamic-element-wrapper{max-height:100%;box-sizing:border-box;position:relative;padding:4px 4px 8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.FormBuilder }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _errorTemplates: [{
                 type: ContentChildren,
                 args: [TdDynamicFormsErrorTemplateDirective, { descendants: true }]
             }], elements: [{
-                type: Input,
-                args: ['elements']
-            }] });
-})();
+                type: Input
+            }] } });
 
 const TD_DYNAMIC_FORMS = [
     TdDynamicFormsComponent,
@@ -1057,9 +656,41 @@ const TD_DYNAMIC_FORMS_ENTRY_COMPONENTS = [
 ];
 class CovalentDynamicFormsModule {
 }
-/** @nocollapse */ /** @nocollapse */ CovalentDynamicFormsModule.ɵfac = function CovalentDynamicFormsModule_Factory(t) { return new (t || CovalentDynamicFormsModule)(); };
-/** @nocollapse */ /** @nocollapse */ CovalentDynamicFormsModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentDynamicFormsModule });
-/** @nocollapse */ /** @nocollapse */ CovalentDynamicFormsModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [DYNAMIC_FORMS_PROVIDER], imports: [[
+CovalentDynamicFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentDynamicFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, declarations: [TdDynamicFormsComponent,
+        TdDynamicElementComponent,
+        TdDynamicElementDirective,
+        TdDynamicFormsErrorTemplateDirective,
+        TdDynamicInputComponent,
+        TdDynamicFileInputComponent,
+        TdDynamicTextareaComponent,
+        TdDynamicSlideToggleComponent,
+        TdDynamicCheckboxComponent,
+        TdDynamicSliderComponent,
+        TdDynamicSelectComponent,
+        TdDynamicDatepickerComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatIconModule,
+        MatButtonModule,
+        MatDatepickerModule,
+        CovalentFileModule], exports: [TdDynamicFormsComponent,
+        TdDynamicElementComponent,
+        TdDynamicElementDirective,
+        TdDynamicFormsErrorTemplateDirective, TdDynamicInputComponent,
+        TdDynamicFileInputComponent,
+        TdDynamicTextareaComponent,
+        TdDynamicSlideToggleComponent,
+        TdDynamicCheckboxComponent,
+        TdDynamicSliderComponent,
+        TdDynamicSelectComponent,
+        TdDynamicDatepickerComponent] });
+CovalentDynamicFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, providers: [DYNAMIC_FORMS_PROVIDER], imports: [[
             CommonModule,
             ReactiveFormsModule,
             MatFormFieldModule,
@@ -1071,14 +702,25 @@ class CovalentDynamicFormsModule {
             MatIconModule,
             MatButtonModule,
             MatDatepickerModule,
-            CovalentCommonModule,
             CovalentFileModule,
         ]] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentDynamicFormsModule, [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TD_DYNAMIC_FORMS, TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
+                    declarations: [
+                        TdDynamicFormsComponent,
+                        TdDynamicElementComponent,
+                        TdDynamicElementDirective,
+                        TdDynamicFormsErrorTemplateDirective,
+                        TdDynamicInputComponent,
+                        TdDynamicFileInputComponent,
+                        TdDynamicTextareaComponent,
+                        TdDynamicSlideToggleComponent,
+                        TdDynamicCheckboxComponent,
+                        TdDynamicSliderComponent,
+                        TdDynamicSelectComponent,
+                        TdDynamicDatepickerComponent,
+                    ],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
@@ -1091,49 +733,12 @@ class CovalentDynamicFormsModule {
                         MatIconModule,
                         MatButtonModule,
                         MatDatepickerModule,
-                        CovalentCommonModule,
                         CovalentFileModule,
                     ],
-                    exports: [TD_DYNAMIC_FORMS, TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
+                    exports: [...TD_DYNAMIC_FORMS, ...TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
                     providers: [DYNAMIC_FORMS_PROVIDER],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentDynamicFormsModule, { declarations: [TdDynamicFormsComponent,
-            TdDynamicElementComponent,
-            TdDynamicElementDirective,
-            TdDynamicFormsErrorTemplateDirective, TdDynamicInputComponent,
-            TdDynamicFileInputComponent,
-            TdDynamicTextareaComponent,
-            TdDynamicSlideToggleComponent,
-            TdDynamicCheckboxComponent,
-            TdDynamicSliderComponent,
-            TdDynamicSelectComponent,
-            TdDynamicDatepickerComponent], imports: [CommonModule,
-            ReactiveFormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatSelectModule,
-            MatCheckboxModule,
-            MatSliderModule,
-            MatSlideToggleModule,
-            MatIconModule,
-            MatButtonModule,
-            MatDatepickerModule,
-            CovalentCommonModule,
-            CovalentFileModule], exports: [TdDynamicFormsComponent,
-            TdDynamicElementComponent,
-            TdDynamicElementDirective,
-            TdDynamicFormsErrorTemplateDirective, TdDynamicInputComponent,
-            TdDynamicFileInputComponent,
-            TdDynamicTextareaComponent,
-            TdDynamicSlideToggleComponent,
-            TdDynamicCheckboxComponent,
-            TdDynamicSliderComponent,
-            TdDynamicSelectComponent,
-            TdDynamicDatepickerComponent] });
-})();
+        }] });
 
 /**
  * Generated bundle index. Do not edit.