@covalent/dynamic-forms 4.16.0-beta.2 → 4.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/esm2020/lib/dynamic-element.component.mjs +11 -11
- package/esm2020/lib/dynamic-elements/dynamic-checkbox/dynamic-checkbox.component.mjs +7 -7
- package/esm2020/lib/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.mjs +10 -10
- package/esm2020/lib/dynamic-elements/dynamic-file-input/dynamic-file-input.component.mjs +12 -12
- package/esm2020/lib/dynamic-elements/dynamic-input/dynamic-input.component.mjs +9 -9
- package/esm2020/lib/dynamic-elements/dynamic-select/dynamic-select.component.mjs +10 -10
- package/esm2020/lib/dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component.mjs +7 -7
- package/esm2020/lib/dynamic-elements/dynamic-slider/dynamic-slider.component.mjs +7 -7
- package/esm2020/lib/dynamic-elements/dynamic-textarea/dynamic-textarea.component.mjs +9 -9
- package/esm2020/lib/dynamic-forms.component.mjs +8 -8
- package/esm2020/lib/dynamic-forms.module.mjs +18 -16
- package/esm2020/lib/services/dynamic-forms.service.mjs +6 -6
- package/fesm2015/covalent-dynamic-forms.mjs +80 -78
- package/fesm2015/covalent-dynamic-forms.mjs.map +1 -1
- package/fesm2020/covalent-dynamic-forms.mjs +80 -78
- package/fesm2020/covalent-dynamic-forms.mjs.map +1 -1
- package/lib/dynamic-element.component.d.ts +3 -3
- package/lib/dynamic-elements/dynamic-checkbox/dynamic-checkbox.component.d.ts +3 -3
- package/lib/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.d.ts +3 -3
- package/lib/dynamic-elements/dynamic-file-input/dynamic-file-input.component.d.ts +3 -3
- package/lib/dynamic-elements/dynamic-input/dynamic-input.component.d.ts +3 -3
- package/lib/dynamic-elements/dynamic-select/dynamic-select.component.d.ts +3 -3
- package/lib/dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component.d.ts +3 -3
- package/lib/dynamic-elements/dynamic-slider/dynamic-slider.component.d.ts +3 -3
- package/lib/dynamic-elements/dynamic-textarea/dynamic-textarea.component.d.ts +3 -3
- package/lib/dynamic-forms.component.d.ts +5 -5
- package/lib/services/dynamic-forms.service.d.ts +2 -2
- package/package.json +15 -7
- /package/{index.d.ts → covalent-dynamic-forms.d.ts} +0 -0
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Component, Injectable, Optional, SkipSelf, Directive, Input, Type, ViewChild, HostBinding, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
|
|
3
|
-
import * as
|
|
3
|
+
import * as i4 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
6
|
-
import {
|
|
7
|
-
import * as
|
|
5
|
+
import * as i3 from '@angular/forms';
|
|
6
|
+
import { FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import * as i1 from '@angular/material/form-field';
|
|
8
8
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i2 from '@angular/material/input';
|
|
10
10
|
import { MatInputModule } from '@angular/material/input';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i2$2 from '@angular/material/select';
|
|
12
12
|
import { MatSelectModule } from '@angular/material/select';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i1$2 from '@angular/material/checkbox';
|
|
14
14
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i1$3 from '@angular/material/slider';
|
|
16
16
|
import { MatSliderModule } from '@angular/material/slider';
|
|
17
|
-
import * as
|
|
17
|
+
import * as i1$1 from '@angular/material/slide-toggle';
|
|
18
18
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
19
|
-
import * as
|
|
19
|
+
import * as i3$1 from '@angular/material/icon';
|
|
20
20
|
import { MatIconModule } from '@angular/material/icon';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i2$1 from '@angular/material/button';
|
|
22
22
|
import { MatButtonModule } from '@angular/material/button';
|
|
23
|
-
import * as
|
|
23
|
+
import * as i2$3 from '@angular/material/datepicker';
|
|
24
24
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
25
|
-
import * as
|
|
25
|
+
import * as i4$1 from '@covalent/core/file';
|
|
26
26
|
import { CovalentFileModule } from '@covalent/core/file';
|
|
27
27
|
import { CdkPortal } from '@angular/cdk/portal';
|
|
28
28
|
import { mixinControlValueAccessor } from '@covalent/core/common';
|
|
29
|
-
import * as
|
|
29
|
+
import * as i3$2 from '@angular/material/core';
|
|
30
30
|
import { Subject, timer } from 'rxjs';
|
|
31
31
|
import { filter, takeUntil } from 'rxjs/operators';
|
|
32
32
|
|
|
@@ -39,11 +39,11 @@ class TdDynamicInputComponent {
|
|
|
39
39
|
this.placeholder = '';
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
TdDynamicInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
43
|
-
TdDynamicInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
42
|
+
TdDynamicInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
+
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 [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"] }] });
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicInputComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
|
-
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
|
|
46
|
+
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"] }]
|
|
47
47
|
}] });
|
|
48
48
|
|
|
49
49
|
class TdDynamicFileInputComponent {
|
|
@@ -59,11 +59,11 @@ class TdDynamicFileInputComponent {
|
|
|
59
59
|
(_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(value);
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
|
-
TdDynamicFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
63
|
-
TdDynamicFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
64
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
62
|
+
TdDynamicFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
+
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 [name]=\"name\"\n [disabled]=\"control?.disabled\"\n readonly\n />\n <mat-hint>{{ hint }}</mat-hint>\n <mat-error>\n <ng-template\n [ngTemplateOutlet]=\"errorMessageTemplate\"\n [ngTemplateOutletContext]=\"{\n control: control,\n errors: control?.errors\n }\"\n ></ng-template>\n </mat-error>\n </mat-form-field>\n <button\n mat-icon-button\n *ngIf=\"control.value\"\n (click)=\"fileInput.clear()\"\n (keyup.enter)=\"fileInput.clear()\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n <td-file-input class=\"td-file-input\" #fileInput [formControl]=\"control\">\n <mat-icon>folder</mat-icon>\n <span>{{ label }}</span>\n </td-file-input>\n</div>\n", styles: [".td-dynamic-file-input-wrapper{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper .td-dynamic-file-input-field{flex:1;box-sizing:border-box}.td-file-input{margin-left:10px}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.TdFileInputComponent, selector: "td-file-input", inputs: ["disabled", "value", "color", "multiple", "accept"], outputs: ["selectFile"] }], directives: [{ type: i4$1.TdFileDropDirective, selector: "[tdFileDrop]", inputs: ["multiple", "disabled"], outputs: ["fileDrop"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFileInputComponent, decorators: [{
|
|
65
65
|
type: Component,
|
|
66
|
-
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
|
|
66
|
+
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 [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"] }]
|
|
67
67
|
}] });
|
|
68
68
|
|
|
69
69
|
class TdDynamicTextareaComponent {
|
|
@@ -75,11 +75,11 @@ class TdDynamicTextareaComponent {
|
|
|
75
75
|
this.placeholder = '';
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
|
-
TdDynamicTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
79
|
-
TdDynamicTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
78
|
+
TdDynamicTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
+
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 [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"] }] });
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicTextareaComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
82
|
-
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
|
|
82
|
+
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"] }]
|
|
83
83
|
}] });
|
|
84
84
|
|
|
85
85
|
class TdDynamicSlideToggleComponent {
|
|
@@ -90,11 +90,11 @@ class TdDynamicSlideToggleComponent {
|
|
|
90
90
|
this.required = false;
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
|
-
TdDynamicSlideToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
94
|
-
TdDynamicSlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
93
|
+
TdDynamicSlideToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
94
|
+
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"] }] });
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSlideToggleComponent, decorators: [{
|
|
96
96
|
type: Component,
|
|
97
|
-
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" }]
|
|
97
|
+
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: [""] }]
|
|
98
98
|
}] });
|
|
99
99
|
|
|
100
100
|
class TdDynamicCheckboxComponent {
|
|
@@ -105,11 +105,11 @@ class TdDynamicCheckboxComponent {
|
|
|
105
105
|
this.required = false;
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
-
TdDynamicCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
109
|
-
TdDynamicCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
108
|
+
TdDynamicCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
109
|
+
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"] }] });
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicCheckboxComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
|
-
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" }]
|
|
112
|
+
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: [""] }]
|
|
113
113
|
}] });
|
|
114
114
|
|
|
115
115
|
class TdDynamicSliderComponent {
|
|
@@ -126,9 +126,9 @@ class TdDynamicSliderComponent {
|
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
|
-
TdDynamicSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
130
|
-
TdDynamicSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
129
|
+
TdDynamicSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
130
|
+
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"] }] });
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSliderComponent, decorators: [{
|
|
132
132
|
type: Component,
|
|
133
133
|
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"] }]
|
|
134
134
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
@@ -142,11 +142,11 @@ class TdDynamicSelectComponent {
|
|
|
142
142
|
this.placeholder = '';
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
|
-
TdDynamicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
146
|
-
TdDynamicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
145
|
+
TdDynamicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
146
|
+
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"] }] });
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicSelectComponent, decorators: [{
|
|
148
148
|
type: Component,
|
|
149
|
-
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
|
|
149
|
+
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"] }]
|
|
150
150
|
}] });
|
|
151
151
|
|
|
152
152
|
class TdDynamicDatepickerComponent {
|
|
@@ -158,11 +158,11 @@ class TdDynamicDatepickerComponent {
|
|
|
158
158
|
this.placeholder = '';
|
|
159
159
|
}
|
|
160
160
|
}
|
|
161
|
-
TdDynamicDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
162
|
-
TdDynamicDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
161
|
+
TdDynamicDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
162
|
+
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]" }] });
|
|
163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicDatepickerComponent, decorators: [{
|
|
164
164
|
type: Component,
|
|
165
|
-
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
|
|
165
|
+
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"] }]
|
|
166
166
|
}] });
|
|
167
167
|
|
|
168
168
|
var TdDynamicType;
|
|
@@ -233,7 +233,7 @@ class TdDynamicFormsService {
|
|
|
233
233
|
*/
|
|
234
234
|
createFormControl(config) {
|
|
235
235
|
const validator = this.createValidators(config);
|
|
236
|
-
return new
|
|
236
|
+
return new FormControl({ value: config.default, disabled: config.disabled }, validator);
|
|
237
237
|
}
|
|
238
238
|
/**
|
|
239
239
|
* Creates form validationdepending [ITdDynamicElementConfig] properties.
|
|
@@ -279,9 +279,9 @@ class TdDynamicFormsService {
|
|
|
279
279
|
return validator;
|
|
280
280
|
}
|
|
281
281
|
}
|
|
282
|
-
TdDynamicFormsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
283
|
-
TdDynamicFormsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
282
|
+
TdDynamicFormsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
283
|
+
TdDynamicFormsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsService });
|
|
284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsService, decorators: [{
|
|
285
285
|
type: Injectable
|
|
286
286
|
}] });
|
|
287
287
|
function DYNAMIC_FORMS_PROVIDER_FACTORY(parent) {
|
|
@@ -307,9 +307,9 @@ class TdDynamicFormsErrorTemplateDirective extends CdkPortal {
|
|
|
307
307
|
this.templateRef = templateRef;
|
|
308
308
|
}
|
|
309
309
|
}
|
|
310
|
-
TdDynamicFormsErrorTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
311
|
-
TdDynamicFormsErrorTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
310
|
+
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 });
|
|
311
|
+
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 });
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsErrorTemplateDirective, decorators: [{
|
|
313
313
|
type: Directive,
|
|
314
314
|
args: [{ selector: '[tdDynamicFormsError]ng-template' }]
|
|
315
315
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { tdDynamicFormsError: [{
|
|
@@ -320,9 +320,9 @@ class TdDynamicElementDirective {
|
|
|
320
320
|
this.viewContainer = viewContainer;
|
|
321
321
|
}
|
|
322
322
|
}
|
|
323
|
-
TdDynamicElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
324
|
-
TdDynamicElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
323
|
+
TdDynamicElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicElementDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
324
|
+
TdDynamicElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdDynamicElementDirective, selector: "[tdDynamicContainer]", ngImport: i0 });
|
|
325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicElementDirective, decorators: [{
|
|
326
326
|
type: Directive,
|
|
327
327
|
args: [{
|
|
328
328
|
selector: '[tdDynamicContainer]',
|
|
@@ -398,16 +398,16 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
|
|
|
398
398
|
}
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
|
-
TdDynamicElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
402
|
-
TdDynamicElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
401
|
+
TdDynamicElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicElementComponent, deps: [{ token: i0.Injector }, { token: TdDynamicFormsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
402
|
+
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: [
|
|
403
403
|
TdDynamicFormsService,
|
|
404
404
|
{
|
|
405
405
|
provide: NG_VALUE_ACCESSOR,
|
|
406
406
|
useExisting: TdDynamicElementComponent,
|
|
407
407
|
multi: true,
|
|
408
408
|
},
|
|
409
|
-
], viewQueries: [{ propertyName: "childElement", first: true, predicate: TdDynamicElementDirective, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<div tdDynamicContainer></div>', isInline: true,
|
|
410
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
409
|
+
], 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]" }] });
|
|
410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicElementComponent, decorators: [{
|
|
411
411
|
type: Component,
|
|
412
412
|
args: [{
|
|
413
413
|
providers: [
|
|
@@ -625,12 +625,12 @@ class TdDynamicFormsComponent {
|
|
|
625
625
|
});
|
|
626
626
|
}
|
|
627
627
|
}
|
|
628
|
-
TdDynamicFormsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
629
|
-
TdDynamicFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
630
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
628
|
+
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 });
|
|
629
|
+
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 });
|
|
630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdDynamicFormsComponent, decorators: [{
|
|
631
631
|
type: Component,
|
|
632
632
|
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"] }]
|
|
633
|
-
}], ctorParameters: function () { return [{ type:
|
|
633
|
+
}], ctorParameters: function () { return [{ type: i3.FormBuilder }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _errorTemplates: [{
|
|
634
634
|
type: ContentChildren,
|
|
635
635
|
args: [TdDynamicFormsErrorTemplateDirective, { descendants: true }]
|
|
636
636
|
}], elements: [{
|
|
@@ -655,8 +655,8 @@ const TD_DYNAMIC_FORMS_ENTRY_COMPONENTS = [
|
|
|
655
655
|
];
|
|
656
656
|
class CovalentDynamicFormsModule {
|
|
657
657
|
}
|
|
658
|
-
CovalentDynamicFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
659
|
-
CovalentDynamicFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
658
|
+
CovalentDynamicFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
659
|
+
CovalentDynamicFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, declarations: [TdDynamicFormsComponent,
|
|
660
660
|
TdDynamicElementComponent,
|
|
661
661
|
TdDynamicElementDirective,
|
|
662
662
|
TdDynamicFormsErrorTemplateDirective,
|
|
@@ -689,19 +689,21 @@ CovalentDynamicFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
689
689
|
TdDynamicSliderComponent,
|
|
690
690
|
TdDynamicSelectComponent,
|
|
691
691
|
TdDynamicDatepickerComponent] });
|
|
692
|
-
CovalentDynamicFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
692
|
+
CovalentDynamicFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, providers: [DYNAMIC_FORMS_PROVIDER], imports: [[
|
|
693
|
+
CommonModule,
|
|
694
|
+
ReactiveFormsModule,
|
|
695
|
+
MatFormFieldModule,
|
|
696
|
+
MatInputModule,
|
|
697
|
+
MatSelectModule,
|
|
698
|
+
MatCheckboxModule,
|
|
699
|
+
MatSliderModule,
|
|
700
|
+
MatSlideToggleModule,
|
|
701
|
+
MatIconModule,
|
|
702
|
+
MatButtonModule,
|
|
703
|
+
MatDatepickerModule,
|
|
704
|
+
CovalentFileModule,
|
|
705
|
+
]] });
|
|
706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentDynamicFormsModule, decorators: [{
|
|
705
707
|
type: NgModule,
|
|
706
708
|
args: [{
|
|
707
709
|
declarations: [
|