@covalent/dynamic-forms 0.0.1

package/fesm2015/covalent-dynamic-forms.mjs

@@ -0,0 +1,787 @@
+import * as i0 from '@angular/core';
+import { Component, Injectable, Optional, SkipSelf, Directive, Input, Type, forwardRef, ViewChild, HostBinding, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+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$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 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 i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2$3 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i4$1 from '@covalent/core/file';
+import { CovalentFileModule } from '@covalent/core/file';
+import { CdkPortal } from '@angular/cdk/portal';
+import { Subject, timer } from 'rxjs';
+import * as i3$2 from '@angular/material/core';
+import { filter, takeUntil } from 'rxjs/operators';
+
+const noop = () => {
+    // empty method
+};
+/** Mixin to augment a component with ngModel support. */
+function mixinControlValueAccessor(base, initialValue) {
+    return class extends base {
+        constructor(...args) {
+            super(...args);
+            this._value = initialValue instanceof Array
+                ? Object.assign([], initialValue)
+                : initialValue;
+            this.onChange = (_) => noop;
+            this.onTouched = () => noop;
+            this._subjectValueChanges = new Subject();
+            this.valueChanges = this._subjectValueChanges.asObservable();
+        }
+        set value(v) {
+            if (v !== this._value) {
+                this._value = v;
+                this.onChange(v);
+                this._changeDetectorRef.markForCheck();
+                this._subjectValueChanges.next(v);
+            }
+        }
+        get value() {
+            return this._value;
+        }
+        writeValue(value) {
+            this.value = value;
+            this._changeDetectorRef.markForCheck();
+        }
+        registerOnChange(fn) {
+            this.onChange = fn;
+        }
+        registerOnTouched(fn) {
+            this.onTouched = fn;
+        }
+    };
+}
+
+class TdDynamicInputComponent {
+    constructor() {
+        this.label = '';
+        this.hint = '';
+        this.required = false;
+        this.name = '';
+        this.placeholder = '';
+    }
+}
+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]=\"{\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"] }]
+        }] });
+
+class TdDynamicFileInputComponent {
+    constructor() {
+        this.required = false;
+        this.label = '';
+        this.name = '';
+        this.hint = '';
+        this.placeholder = '';
+    }
+    _handlefileDrop(value) {
+        var _a;
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(value);
+    }
+}
+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: ["color", "multiple", "accept", "disabled", "value"], 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]=\"{\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"] }]
+        }] });
+
+class TdDynamicTextareaComponent {
+    constructor() {
+        this.label = '';
+        this.hint = '';
+        this.name = '';
+        this.required = false;
+        this.placeholder = '';
+    }
+}
+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]=\"{\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() {
+        this.label = '';
+        this.name = '';
+        this.hint = '';
+        this.required = false;
+    }
+}
+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\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() {
+        this.label = '';
+        this.name = '';
+        this.hint = '';
+        this.required = false;
+    }
+}
+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: [""] }]
+        }] });
+
+class TdDynamicSliderComponent {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this.label = '';
+        this.required = false;
+        this.name = '';
+        this.hint = '';
+    }
+    _handleBlur() {
+        setTimeout(() => {
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+}
+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\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 }]; } });
+
+class TdDynamicSelectComponent {
+    constructor() {
+        this.label = '';
+        this.hint = '';
+        this.name = '';
+        this.required = false;
+        this.placeholder = '';
+    }
+}
+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\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"] }]
+        }] });
+
+class TdDynamicDatepickerComponent {
+    constructor() {
+        this.label = '';
+        this.hint = '';
+        this.name = '';
+        this.required = false;
+        this.placeholder = '';
+    }
+}
+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]=\"{\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) {
+    TdDynamicType["Text"] = "text";
+    TdDynamicType["Boolean"] = "boolean";
+    TdDynamicType["Number"] = "number";
+    TdDynamicType["Array"] = "array";
+    TdDynamicType["Date"] = "date";
+})(TdDynamicType || (TdDynamicType = {}));
+var TdDynamicElement;
+(function (TdDynamicElement) {
+    TdDynamicElement["Input"] = "input";
+    TdDynamicElement["Datepicker"] = "datepicker";
+    TdDynamicElement["Password"] = "password";
+    TdDynamicElement["Textarea"] = "textarea";
+    TdDynamicElement["Slider"] = "slider";
+    TdDynamicElement["SlideToggle"] = "slide-toggle";
+    TdDynamicElement["Checkbox"] = "checkbox";
+    TdDynamicElement["Select"] = "select";
+    TdDynamicElement["FileInput"] = "file-input";
+})(TdDynamicElement || (TdDynamicElement = {}));
+const DYNAMIC_ELEMENT_NAME_REGEX = /^[^0-9][^@]*$/;
+class TdDynamicFormsService {
+    /**
+     * Method to validate if the [name] is a proper element name.
+     * Throws error if name is not valid.
+     */
+    validateDynamicElementName(name) {
+        if (!DYNAMIC_ELEMENT_NAME_REGEX.test(name)) {
+            throw new Error('Dynamic element name: "${name}" is not valid.');
+        }
+    }
+    /**
+     * Gets component to be rendered depending on [TdDynamicElement | TdDynamicType]
+     * Throws error if it does not exists or not supported.
+     */
+    getDynamicElement(element) {
+        switch (element) {
+            case TdDynamicType.Text:
+            case TdDynamicType.Number:
+            case TdDynamicElement.Input:
+            case TdDynamicElement.Password:
+                return TdDynamicInputComponent;
+            case TdDynamicElement.Textarea:
+                return TdDynamicTextareaComponent;
+            case TdDynamicType.Boolean:
+            case TdDynamicElement.SlideToggle:
+                return TdDynamicSlideToggleComponent;
+            case TdDynamicElement.Checkbox:
+                return TdDynamicCheckboxComponent;
+            case TdDynamicElement.Slider:
+                return TdDynamicSliderComponent;
+            case TdDynamicType.Array:
+            case TdDynamicElement.Select:
+                return TdDynamicSelectComponent;
+            case TdDynamicElement.FileInput:
+                return TdDynamicFileInputComponent;
+            case TdDynamicElement.Datepicker:
+            case TdDynamicType.Date:
+                return TdDynamicDatepickerComponent;
+            default:
+                throw new Error(`Error: type ${element} does not exist or not supported.`);
+        }
+    }
+    /**
+     * Creates form control for element depending [ITdDynamicElementConfig] properties.
+     */
+    createFormControl(config) {
+        const validator = this.createValidators(config);
+        return new FormControl({ value: config.default, disabled: config.disabled }, validator);
+    }
+    /**
+     * Creates form validationdepending [ITdDynamicElementConfig] properties.
+     */
+    createValidators(config) {
+        let validator = null;
+        if (config.required) {
+            validator = Validators.required;
+        }
+        if (config.max || config.max === 0) {
+            validator = Validators.compose([
+                validator,
+                Validators.max(parseFloat(config.max)),
+            ]);
+        }
+        if (config.min || config.min === 0) {
+            validator = Validators.compose([
+                validator,
+                Validators.min(parseFloat(config.min)),
+            ]);
+        }
+        if (config.maxLength || config.maxLength === 0) {
+            validator = Validators.compose([
+                validator,
+                Validators.maxLength(parseFloat(config.maxLength)),
+            ]);
+        }
+        if (config.minLength || config.minLength === 0) {
+            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,
+                ]);
+            });
+        }
+        return validator;
+    }
+}
+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
+        }] });
+function DYNAMIC_FORMS_PROVIDER_FACTORY(parent) {
+    return parent || new TdDynamicFormsService();
+}
+const DYNAMIC_FORMS_PROVIDER = {
+    // If there is already a service available, use that. Otherwise, provide a new one.
+    provide: TdDynamicFormsService,
+    deps: [[new Optional(), new SkipSelf(), TdDynamicFormsService]],
+    useFactory: DYNAMIC_FORMS_PROVIDER_FACTORY,
+};
+
+class TdDynamicElementBase {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+    }
+}
+/* tslint:disable-next-line */
+const _TdDynamicElementMixinBase = mixinControlValueAccessor(TdDynamicElementBase);
+class TdDynamicFormsErrorTemplateDirective extends CdkPortal {
+    constructor(templateRef, viewContainerRef) {
+        super(templateRef, viewContainerRef);
+        this.templateRef = templateRef;
+    }
+}
+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' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { tdDynamicFormsError: [{
+                type: Input
+            }] } });
+class TdDynamicElementDirective {
+    constructor(viewContainer) {
+        this.viewContainer = viewContainer;
+    }
+}
+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]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
+    constructor(_componentFactoryResolver, _dynamicFormsService, _changeDetectorRef) {
+        super(_changeDetectorRef);
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._dynamicFormsService = _dynamicFormsService;
+        /**
+         * Sets label to be displayed.
+         */
+        this.label = '';
+        /**
+         * Sets hint to be displayed.
+         */
+        this.hint = '';
+        /**
+         * Sets name to be displayed as attribute.
+         */
+        this.name = '';
+        /**
+         * Sets the placeholder message
+         */
+        this.placeholder = '';
+    }
+    get maxAttr() {
+        return this.max;
+    }
+    get minAttr() {
+        return this.min;
+    }
+    ngOnInit() {
+        const component = this.type instanceof Type
+            ? this.type
+            : this._dynamicFormsService.getDynamicElement(this.type);
+        const ref = this._componentFactoryResolver
+            .resolveComponentFactory(component)
+            .create(this.childElement.viewContainer.injector);
+        this.childElement.viewContainer.insert(ref.hostView);
+        this._instance = ref.instance;
+        this._instance.control = this.dynamicControl;
+        this._instance.label = this.label;
+        this._instance.hint = this.hint;
+        this._instance.name = this.name;
+        this._instance.type = this.type;
+        this._instance.value = this.value;
+        this._instance.required = this.required;
+        this._instance.min = this.min;
+        this._instance.max = this.max;
+        this._instance.minLength = this.minLength;
+        this._instance.maxLength = this.maxLength;
+        this._instance.selections = this.selections;
+        this._instance.multiple = this.multiple;
+        this._instance.errorMessageTemplate = this.errorMessageTemplate;
+        this._instance.placeholder = this.placeholder;
+        if (this.customConfig) {
+            Object.getOwnPropertyNames(this.customConfig).forEach((name) => {
+                if (this.customConfig) {
+                    this._instance[name] = this.customConfig[name];
+                }
+            });
+        }
+    }
+    /**
+     * Reassign any inputs that have changed
+     */
+    ngOnChanges(changes) {
+        if (this._instance) {
+            for (const prop of Object.keys(changes)) {
+                this._instance[prop] = changes[prop].currentValue;
+            }
+        }
+    }
+}
+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),
+                            multi: true,
+                        },
+                    ],
+                    selector: 'td-dynamic-element',
+                    template: '<div tdDynamicContainer></div>',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dynamicControl: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], selections: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], customConfig: [{
+                type: Input
+            }], errorMessageTemplate: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], childElement: [{
+                type: ViewChild,
+                args: [TdDynamicElementDirective, { static: true }]
+            }], maxAttr: [{
+                type: HostBinding,
+                args: ['attr.max']
+            }], minAttr: [{
+                type: HostBinding,
+                args: ['attr.min']
+            }] } });
+
+class TdDynamicFormsComponent {
+    constructor(_formBuilder, _dynamicFormsService, _changeDetectorRef) {
+        this._formBuilder = _formBuilder;
+        this._dynamicFormsService = _dynamicFormsService;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._renderedElements = [];
+        this._templateMap = new Map();
+        this._destroy$ = new Subject();
+        this._destroyControl$ = new Subject();
+        this.dynamicForm = this._formBuilder.group({});
+    }
+    /**
+     * elements: ITdDynamicElementConfig[]
+     * JS Object that will render the elements depending on its config.
+     * [name] property is required.
+     */
+    set elements(elements) {
+        if (elements) {
+            this._elements = elements;
+        }
+        else {
+            this._elements = [];
+        }
+        this._rerenderElements();
+    }
+    get elements() {
+        return this._renderedElements;
+    }
+    /**
+     * Getter property for dynamic [FormGroup].
+     */
+    get form() {
+        return this.dynamicForm;
+    }
+    /**
+     * Getter property for [valid] of dynamic [FormGroup].
+     */
+    get valid() {
+        if (this.dynamicForm) {
+            return this.dynamicForm.valid;
+        }
+        return false;
+    }
+    /**
+     * Getter property for [value] of dynamic [FormGroup].
+     */
+    get value() {
+        if (this.dynamicForm) {
+            return this.dynamicForm.value;
+        }
+        return {};
+    }
+    /**
+     * Getter property for [errors] of dynamic [FormGroup].
+     */
+    get errors() {
+        if (this.dynamicForm) {
+            const errors = {};
+            for (const name of Object.keys(this.dynamicForm.controls)) {
+                errors[name] = this.dynamicForm.controls[name].errors;
+            }
+            return errors;
+        }
+        return {};
+    }
+    /**
+     * Getter property for [controls] of dynamic [FormGroup].
+     */
+    get controls() {
+        if (this.dynamicForm) {
+            return this.dynamicForm.controls;
+        }
+        return {};
+    }
+    ngAfterContentInit() {
+        this._updateErrorTemplates();
+    }
+    ngOnDestroy() {
+        this._destroy$.next(0);
+        this._destroy$.complete();
+        this._destroyControl$.complete();
+    }
+    /**
+     * Refreshes the form and rerenders all validator/element modifications.
+     */
+    refresh() {
+        this._rerenderElements();
+        this._updateErrorTemplates();
+    }
+    /**
+     * Getter method for error template references
+     */
+    getErrorTemplateRef(name) {
+        return this._templateMap.get(name);
+    }
+    /**
+     * 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((_a = errorTemplate.tdDynamicFormsError) !== null && _a !== void 0 ? _a : '', errorTemplate.templateRef);
+        }
+    }
+    _rerenderElements() {
+        this._clearRemovedElements();
+        this._renderedElements = [];
+        const duplicates = [];
+        this._elements.forEach((elem) => {
+            this._dynamicFormsService.validateDynamicElementName(elem.name);
+            if (duplicates.indexOf(elem.name) > -1) {
+                throw new Error(`Dynamic element name: "${elem.name}" is duplicated`);
+            }
+            duplicates.push(elem.name);
+            const dynamicElement = this.dynamicForm.get(elem.name);
+            if (!dynamicElement) {
+                this.dynamicForm.addControl(elem.name, this._dynamicFormsService.createFormControl(elem));
+                this._subscribeToControlStatusChanges(elem.name);
+            }
+            else {
+                dynamicElement.setValue(elem.default);
+                dynamicElement.markAsPristine();
+                dynamicElement.markAsUntouched();
+                if (elem.disabled) {
+                    dynamicElement.disable();
+                }
+                else {
+                    dynamicElement.enable();
+                }
+                dynamicElement.setValidators(this._dynamicFormsService.createValidators(elem));
+            }
+            // copy objects so they are only changes when calling this method
+            this._renderedElements.push(Object.assign({}, elem));
+        });
+        // call a change detection since the whole form might change
+        this._changeDetectorRef.detectChanges();
+        timer(0)
+            .toPromise()
+            .then(() => {
+            // call a markForCheck so elements are rendered correctly in OnPush
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    _clearRemovedElements() {
+        this._renderedElements = this._renderedElements.filter((renderedElement) => !this._elements.some((element) => element.name === renderedElement.name));
+        // remove elements that were removed from the array
+        this._renderedElements.forEach((elem) => {
+            this._destroyControl$.next(elem.name);
+            this.dynamicForm.removeControl(elem.name);
+        });
+    }
+    // Updates component when manually adding errors to controls
+    _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(() => {
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+}
+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 ?? 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
+            }] } });
+
+const TD_DYNAMIC_FORMS = [
+    TdDynamicFormsComponent,
+    TdDynamicElementComponent,
+    TdDynamicElementDirective,
+    TdDynamicFormsErrorTemplateDirective,
+];
+const TD_DYNAMIC_FORMS_ENTRY_COMPONENTS = [
+    TdDynamicInputComponent,
+    TdDynamicFileInputComponent,
+    TdDynamicTextareaComponent,
+    TdDynamicSlideToggleComponent,
+    TdDynamicCheckboxComponent,
+    TdDynamicSliderComponent,
+    TdDynamicSelectComponent,
+    TdDynamicDatepickerComponent,
+];
+class CovalentDynamicFormsModule {
+}
+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,
+            MatInputModule,
+            MatSelectModule,
+            MatCheckboxModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatIconModule,
+            MatButtonModule,
+            MatDatepickerModule,
+            CovalentFileModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    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: [...TD_DYNAMIC_FORMS, ...TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
+                    providers: [DYNAMIC_FORMS_PROVIDER],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CovalentDynamicFormsModule, DYNAMIC_ELEMENT_NAME_REGEX, DYNAMIC_FORMS_PROVIDER, DYNAMIC_FORMS_PROVIDER_FACTORY, TdDynamicCheckboxComponent, TdDynamicDatepickerComponent, TdDynamicElement, TdDynamicElementBase, TdDynamicElementComponent, TdDynamicElementDirective, TdDynamicFileInputComponent, TdDynamicFormsComponent, TdDynamicFormsErrorTemplateDirective, TdDynamicFormsService, TdDynamicInputComponent, TdDynamicSelectComponent, TdDynamicSlideToggleComponent, TdDynamicSliderComponent, TdDynamicTextareaComponent, TdDynamicType, _TdDynamicElementMixinBase };
+//# sourceMappingURL=covalent-dynamic-forms.mjs.map