@covalent/dynamic-forms 6.4.0 → 6.4.1

package/fesm2022/covalent-dynamic-forms.mjs

@@ -1,814 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Injectable, Optional, SkipSelf, Directive, Input, Type, ViewChild, HostBinding, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { UntypedFormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i4$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i2$2 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/material/slider';
-import { MatSliderModule } from '@angular/material/slider';
-import * as i2$1 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i5$2 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i7 from '@covalent/core/file';
-import { CovalentFileModule } from '@covalent/core/file';
-import * as i5$1 from '@angular/material/core';
-import { CdkPortal } from '@angular/cdk/portal';
-import { mixinControlValueAccessor } from '@covalent/core/common';
-import { Subject, timer } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
-
-class TdDynamicInputComponent {
-    control;
-    label = '';
-    hint = '';
-    type;
-    required = false;
-    name = '';
-    min;
-    max;
-    minLength;
-    maxLength;
-    errorMessageTemplate;
-    placeholder = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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      [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"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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      [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 {
-    control;
-    required = false;
-    label = '';
-    name = '';
-    hint = '';
-    errorMessageTemplate;
-    placeholder = '';
-    _handlefileDrop(value) {
-        this.control?.setValue(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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    [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      [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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.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"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.TdFileDropDirective, selector: "[tdFileDrop]", inputs: ["multiple", "disabled"], outputs: ["fileDrop"] }, { kind: "component", type: i7.TdFileInputComponent, selector: "td-file-input", inputs: ["disabled", "value", "color", "multiple", "accept"], outputs: ["selectFile"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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    [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      [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 {
-    control;
-    label = '';
-    hint = '';
-    name = '';
-    required = false;
-    errorMessageTemplate;
-    placeholder = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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      [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"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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      [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 {
-    control;
-    label = '';
-    name = '';
-    hint = '';
-    required = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.MatSlideToggleRequiredValidator, selector: "mat-slide-toggle[required][formControlName],             mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]" }, { kind: "component", type: i2$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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" }]
-        }] });
-
-class TdDynamicCheckboxComponent {
-    control;
-    label = '';
-    name = '';
-    hint = '';
-    required = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2$2.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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" }]
-        }] });
-
-class TdDynamicSliderComponent {
-    _changeDetectorRef;
-    control;
-    label = '';
-    required = false;
-    name = '';
-    hint = '';
-    min;
-    max;
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
-    }
-    _handleBlur() {
-        setTimeout(() => {
-            this._changeDetectorRef.markForCheck();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicSliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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>\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      thumbLabel\n      tickInterval=\"auto\"\n      (blur)=\"_handleBlur()\"\n    >\n      <input\n        [attr.name]=\"name\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [formControl]=\"control\"\n        [required]=\"required\"\n        matSliderThumb\n      />\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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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>\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      thumbLabel\n      tickInterval=\"auto\"\n      (blur)=\"_handleBlur()\"\n    >\n      <input\n        [attr.name]=\"name\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [formControl]=\"control\"\n        [required]=\"required\"\n        matSliderThumb\n      />\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 {
-    control;
-    label = '';
-    hint = '';
-    name = '';
-    required = false;
-    selections;
-    multiple;
-    errorMessageTemplate;
-    placeholder = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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 {
-    control;
-    label = '';
-    hint = '';
-    name = '';
-    type;
-    required = false;
-    min;
-    max;
-    errorMessageTemplate;
-    placeholder = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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 UntypedFormControl({ 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;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicFormsService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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 {
-    _changeDetectorRef;
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
-    }
-}
-/* tslint:disable-next-line */
-const _TdDynamicElementMixinBase = mixinControlValueAccessor(TdDynamicElementBase);
-class TdDynamicFormsErrorTemplateDirective extends CdkPortal {
-    templateRef;
-    tdDynamicFormsError;
-    constructor(templateRef, viewContainerRef) {
-        super(templateRef, viewContainerRef);
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicFormsErrorTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: TdDynamicFormsErrorTemplateDirective, selector: "[tdDynamicFormsError]ng-template", inputs: { tdDynamicFormsError: "tdDynamicFormsError" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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 {
-    viewContainer;
-    constructor(viewContainer) {
-        this.viewContainer = viewContainer;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicElementDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: TdDynamicElementDirective, selector: "[tdDynamicContainer]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tdDynamicContainer]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
-class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
-    _injector;
-    _dynamicFormsService;
-    _instance;
-    /**
-     * Sets form control of the element.
-     */
-    dynamicControl;
-    /**
-     * Sets label to be displayed.
-     */
-    label = '';
-    /**
-     * Sets hint to be displayed.
-     */
-    hint = '';
-    /**
-     * Sets name to be displayed as attribute.
-     */
-    name = '';
-    /**
-     * Sets type or element of element to be rendered.
-     * Throws error if does not exist or no supported.
-     */
-    type;
-    /**
-     * Sets required validation checkup (if supported by element).
-     */
-    required;
-    /**
-     * Sets min validation checkup (if supported by element).
-     */
-    min;
-    /**
-     * Sets max validation checkup (if supported by element).
-     */
-    max;
-    /**
-     * Sets minLength validation checkup (if supported by element).
-     */
-    minLength;
-    /**
-     * Sets maxLength validation checkup (if supported by element).
-     */
-    maxLength;
-    /**
-     * Sets selections for array elements (if supported by element).
-     */
-    selections;
-    /**
-     * Sets multiple property for array elements (if supported by element).
-     */
-    multiple;
-    /**
-     * Sets any additional properties on custom component.
-     */
-    customConfig;
-    /**
-     * Sets error message template so it can be injected into dynamic components.
-     */
-    errorMessageTemplate;
-    /**
-     * Sets the placeholder message
-     */
-    placeholder = '';
-    childElement;
-    get maxAttr() {
-        return this.max;
-    }
-    get minAttr() {
-        return this.min;
-    }
-    constructor(_injector, _dynamicFormsService, _changeDetectorRef) {
-        super(_changeDetectorRef);
-        this._injector = _injector;
-        this._dynamicFormsService = _dynamicFormsService;
-    }
-    ngOnInit() {
-        const component = this.type instanceof Type
-            ? this.type
-            : this._dynamicFormsService.getDynamicElement(this.type);
-        const ref = this.childElement.viewContainer.createComponent(component, {
-            injector: this._injector,
-        });
-        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;
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicElementComponent, deps: [{ token: i0.Injector }, { token: TdDynamicFormsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: 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, dependencies: [{ kind: "directive", type: TdDynamicElementDirective, selector: "[tdDynamicContainer]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicElementComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        TdDynamicFormsService,
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: TdDynamicElementComponent,
-                            multi: true,
-                        },
-                    ],
-                    selector: 'td-dynamic-element',
-                    template: '<div tdDynamicContainer></div>',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { 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 {
-    _formBuilder;
-    _dynamicFormsService;
-    _changeDetectorRef;
-    _renderedElements = [];
-    _elements;
-    _templateMap = new Map();
-    _destroy$ = new Subject();
-    _destroyControl$ = new Subject();
-    _errorTemplates;
-    dynamicForm;
-    /**
-     * 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 {};
-    }
-    constructor(_formBuilder, _dynamicFormsService, _changeDetectorRef) {
-        this._formBuilder = _formBuilder;
-        this._dynamicFormsService = _dynamicFormsService;
-        this._changeDetectorRef = _changeDetectorRef;
-        this.dynamicForm = this._formBuilder.group({});
-    }
-    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() {
-        this._templateMap = new Map();
-        for (const errorTemplate of this._errorTemplates.toArray()) {
-            this._templateMap.set(errorTemplate.tdDynamicFormsError ?? '', 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();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdDynamicFormsComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: TdDynamicFormsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TdDynamicElementComponent, selector: "td-dynamic-element", inputs: ["dynamicControl", "label", "hint", "name", "type", "required", "min", "max", "minLength", "maxLength", "selections", "multiple", "customConfig", "errorMessageTemplate", "placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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: i2.UntypedFormBuilder }, { 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 {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentDynamicFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", 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] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", 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: "16.1.7", 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