@covalent/dynamic-forms
Version:
Teradata UI Platform Dynamic Forms Module
1,057 lines • 67.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Injectable, Optional, SkipSelf, Directive, Input, Type, ViewChild, HostBinding, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { ReactiveFormsModule, UntypedFormControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3$1 from '@angular/material/form-field';
import { MatFormField, MatLabel, MatError, MatHint, MatFormFieldModule } from '@angular/material/form-field';
import * as i4 from '@angular/material/input';
import { MatInput, MatInputModule } from '@angular/material/input';
import { MatIcon } from '@angular/material/icon';
import * as i3 from '@covalent/core/file';
import { CovalentFileModule } from '@covalent/core/file';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatSlider, MatSliderThumb } from '@angular/material/slider';
import { MatSelect, MatOption } from '@angular/material/select';
import * as i5 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { CdkPortal } from '@angular/cdk/portal';
import { mixinControlValueAccessor } from '@covalent/core/common';
import { Subject, timer } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
const _c0$5 = (a0, a1) => ({ control: a0, errors: a1 });
function TdDynamicInputComponent_ng_template_9_Template(rf, ctx) { }
class TdDynamicInputComponent {
control;
label = '';
hint = '';
type;
required = false;
name = '';
min;
max;
minLength;
maxLength;
errorMessageTemplate;
placeholder = '';
static ɵfac = function TdDynamicInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicInputComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicInputComponent, selectors: [["td-dynamic-input"]], decls: 10, vars: 16, consts: [["elementInput", ""], [1, "td-dynamic-input-wrapper"], [1, "td-dynamic-input-field"], ["matInput", "", 3, "formControl", "placeholder", "type", "required", "name"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function TdDynamicInputComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 1)(1, "mat-form-field", 2)(2, "mat-label");
i0.ɵɵtext(3);
i0.ɵɵelementEnd();
i0.ɵɵelement(4, "input", 3, 0);
i0.ɵɵelementStart(6, "mat-hint");
i0.ɵɵtext(7);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(8, "mat-error");
i0.ɵɵtemplate(9, TdDynamicInputComponent_ng_template_9_Template, 0, 0, "ng-template", 4);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.label);
i0.ɵɵadvance();
i0.ɵɵproperty("formControl", ctx.control)("placeholder", ctx.placeholder)("type", ctx.type)("required", ctx.required)("name", ctx.name);
i0.ɵɵattribute("min", ctx.min)("max", ctx.max)("minLength", ctx.minLength)("maxLength", ctx.maxLength);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.hint);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(13, _c0$5, ctx.control, ctx.control.errors));
} }, dependencies: [CommonModule, i1.NgTemplateOutlet, ReactiveFormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.RequiredValidator, i2.FormControlDirective, MatFormField, MatInput, MatLabel, MatError, MatHint], styles: [".td-dynamic-input-wrapper[_ngcontent-%COMP%]{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper[_ngcontent-%COMP%] .td-dynamic-input-field[_ngcontent-%COMP%]{flex:1;box-sizing:border-box}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicInputComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-input', imports: [CommonModule, ReactiveFormsModule, MatFormField, MatInput, MatLabel, MatError, MatHint], 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"] }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicInputComponent, { className: "TdDynamicInputComponent", filePath: "lib/dynamic-elements/dynamic-input/dynamic-input.component.ts", lineNumber: 13 }); })();
const _c0$4 = (a0, a1) => ({ control: a0, errors: a1 });
function TdDynamicFileInputComponent_ng_template_8_Template(rf, ctx) { }
function TdDynamicFileInputComponent_button_9_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "button", 7);
i0.ɵɵlistener("click", function TdDynamicFileInputComponent_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); i0.ɵɵnextContext(); const fileInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(fileInput_r2.clear()); })("keyup.enter", function TdDynamicFileInputComponent_button_9_Template_button_keyup_enter_0_listener() { i0.ɵɵrestoreView(_r3); i0.ɵɵnextContext(); const fileInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(fileInput_r2.clear()); });
i0.ɵɵelementStart(1, "mat-icon");
i0.ɵɵtext(2, "cancel");
i0.ɵɵelementEnd()();
} }
class TdDynamicFileInputComponent {
control;
required = false;
label = '';
name = '';
hint = '';
errorMessageTemplate;
placeholder = '';
_handlefileDrop(value) {
this.control?.setValue(value);
}
static ɵfac = function TdDynamicFileInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicFileInputComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicFileInputComponent, selectors: [["td-dynamic-file-input"]], decls: 16, vars: 15, consts: [["fileInput", ""], [1, "td-dynamic-file-input-wrapper"], ["tdFileDrop", "", 1, "td-dynamic-file-input-field", 3, "fileDrop", "click", "keyup.enter", "keyup.delete", "keyup.backspace", "disabled"], ["matInput", "", "readonly", "", 3, "value", "placeholder", "name", "disabled"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["mat-icon-button", "", 3, "click", "keyup.enter", 4, "ngIf"], [1, "td-file-input", 3, "formControl"], ["mat-icon-button", "", 3, "click", "keyup.enter"]], template: function TdDynamicFileInputComponent_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 1)(1, "mat-form-field", 2);
i0.ɵɵlistener("fileDrop", function TdDynamicFileInputComponent_Template_mat_form_field_fileDrop_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx._handlefileDrop($event)); })("click", function TdDynamicFileInputComponent_Template_mat_form_field_click_1_listener() { i0.ɵɵrestoreView(_r1); const fileInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(!ctx.control.disabled && fileInput_r2.inputElement.click()); })("keyup.enter", function TdDynamicFileInputComponent_Template_mat_form_field_keyup_enter_1_listener() { i0.ɵɵrestoreView(_r1); const fileInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(!ctx.control.disabled && fileInput_r2.inputElement.click()); })("keyup.delete", function TdDynamicFileInputComponent_Template_mat_form_field_keyup_delete_1_listener() { i0.ɵɵrestoreView(_r1); const fileInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(fileInput_r2.clear()); })("keyup.backspace", function TdDynamicFileInputComponent_Template_mat_form_field_keyup_backspace_1_listener() { i0.ɵɵrestoreView(_r1); const fileInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(fileInput_r2.clear()); });
i0.ɵɵelementStart(2, "mat-label");
i0.ɵɵtext(3);
i0.ɵɵelementEnd();
i0.ɵɵelement(4, "input", 3);
i0.ɵɵelementStart(5, "mat-hint");
i0.ɵɵtext(6);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(7, "mat-error");
i0.ɵɵtemplate(8, TdDynamicFileInputComponent_ng_template_8_Template, 0, 0, "ng-template", 4);
i0.ɵɵelementEnd()();
i0.ɵɵtemplate(9, TdDynamicFileInputComponent_button_9_Template, 3, 0, "button", 5);
i0.ɵɵelementStart(10, "td-file-input", 6, 0)(12, "mat-icon");
i0.ɵɵtext(13, "folder");
i0.ɵɵelementEnd();
i0.ɵɵelementStart(14, "span");
i0.ɵɵtext(15);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx.control.disabled);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx.label);
i0.ɵɵadvance();
i0.ɵɵproperty("value", ctx.control.value == null ? null : ctx.control.value.name)("placeholder", ctx.placeholder)("name", ctx.name)("disabled", ctx.control.disabled);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx.hint);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(12, _c0$4, ctx.control, ctx.control.errors));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.control.value);
i0.ɵɵadvance();
i0.ɵɵproperty("formControl", ctx.control);
i0.ɵɵadvance(5);
i0.ɵɵtextInterpolate(ctx.label);
} }, dependencies: [CommonModule, i1.NgIf, i1.NgTemplateOutlet, ReactiveFormsModule, i2.NgControlStatus, i2.FormControlDirective, MatFormField, MatInput, MatLabel, MatError, MatHint, MatIcon, CovalentFileModule, i3.TdFileDropDirective, i3.TdFileInputComponent], styles: [".td-dynamic-file-input-wrapper[_ngcontent-%COMP%]{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper[_ngcontent-%COMP%] .td-dynamic-file-input-field[_ngcontent-%COMP%]{flex:1;box-sizing:border-box}.td-file-input[_ngcontent-%COMP%]{margin-left:10px}.td-file-input[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%]{margin-right:8px}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicFileInputComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-file-input', imports: [CommonModule, ReactiveFormsModule, MatFormField, MatInput, MatLabel, MatError, MatHint, MatIcon, CovalentFileModule], 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}.td-file-input mat-icon{margin-right:8px}\n"] }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicFileInputComponent, { className: "TdDynamicFileInputComponent", filePath: "lib/dynamic-elements/dynamic-file-input/dynamic-file-input.component.ts", lineNumber: 15 }); })();
const _c0$3 = (a0, a1) => ({ control: a0, errors: a1 });
function TdDynamicTextareaComponent_ng_template_9_Template(rf, ctx) { }
class TdDynamicTextareaComponent {
control;
label = '';
hint = '';
name = '';
required = false;
errorMessageTemplate;
placeholder = '';
static ɵfac = function TdDynamicTextareaComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicTextareaComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicTextareaComponent, selectors: [["td-dynamic-textarea"]], decls: 10, vars: 11, consts: [["elementInput", ""], [1, "td-dynamic-textarea-wrapper"], [1, "td-dynamic-textarea-field"], ["matInput", "", "rows", "4", 3, "formControl", "placeholder", "required", "name"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function TdDynamicTextareaComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 1)(1, "mat-form-field", 2)(2, "mat-label");
i0.ɵɵtext(3);
i0.ɵɵelementEnd();
i0.ɵɵelement(4, "textarea", 3, 0);
i0.ɵɵelementStart(6, "mat-hint");
i0.ɵɵtext(7);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(8, "mat-error");
i0.ɵɵtemplate(9, TdDynamicTextareaComponent_ng_template_9_Template, 0, 0, "ng-template", 4);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.label);
i0.ɵɵadvance();
i0.ɵɵproperty("formControl", ctx.control)("placeholder", ctx.placeholder)("required", ctx.required)("name", ctx.name);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.hint);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(8, _c0$3, ctx.control, ctx.control.errors));
} }, dependencies: [CommonModule, i1.NgTemplateOutlet, ReactiveFormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.RequiredValidator, i2.FormControlDirective, MatInput, MatLabel, MatError, MatHint, MatFormField], styles: [".td-dynamic-textarea-wrapper[_ngcontent-%COMP%]{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-textarea-wrapper[_ngcontent-%COMP%] .td-dynamic-textarea-field[_ngcontent-%COMP%]{flex:1;box-sizing:border-box}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicTextareaComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-textarea', imports: [CommonModule, ReactiveFormsModule, MatInput, MatLabel, MatError, MatHint, MatFormField], 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"] }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicTextareaComponent, { className: "TdDynamicTextareaComponent", filePath: "lib/dynamic-elements/dynamic-textarea/dynamic-textarea.component.ts", lineNumber: 13 }); })();
class TdDynamicSlideToggleComponent {
control;
label = '';
name = '';
hint = '';
required = false;
static ɵfac = function TdDynamicSlideToggleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicSlideToggleComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicSlideToggleComponent, selectors: [["td-dynamic-slide-toggle"]], decls: 5, vars: 5, consts: [[1, "td-dynamic-slide-toggle-wrapper"], ["color", "primary", 3, "formControl", "required"], [1, "mat-hint", "td-dynamic-element-hint"]], template: function TdDynamicSlideToggleComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 0)(1, "mat-slide-toggle", 1);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "span", 2);
i0.ɵɵtext(4);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("formControl", ctx.control)("required", ctx.required);
i0.ɵɵattribute("name", ctx.name);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx.hint);
} }, dependencies: [ReactiveFormsModule, i2.NgControlStatus, i2.RequiredValidator, i2.FormControlDirective, MatSlideToggle], encapsulation: 2 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicSlideToggleComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-slide-toggle', imports: [ReactiveFormsModule, MatSlideToggle], template: "<div class=\"td-dynamic-slide-toggle-wrapper\">\n <mat-slide-toggle\n [formControl]=\"control\"\n [attr.name]=\"name\"\n [required]=\"required\"\n color=\"primary\"\n >\n {{ label }}\n </mat-slide-toggle>\n <span class=\"mat-hint td-dynamic-element-hint\">{{ hint }}</span>\n</div>\n" }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicSlideToggleComponent, { className: "TdDynamicSlideToggleComponent", filePath: "lib/dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component.ts", lineNumber: 11 }); })();
class TdDynamicCheckboxComponent {
control;
label = '';
name = '';
hint = '';
required = false;
static ɵfac = function TdDynamicCheckboxComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicCheckboxComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicCheckboxComponent, selectors: [["td-dynamic-checkbox"]], decls: 5, vars: 5, consts: [[1, "td-dynamic-checkbox-wrapper"], [3, "formControl", "name", "required"], [1, "mat-hint", "td-dynamic-element-hint"]], template: function TdDynamicCheckboxComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 0)(1, "mat-checkbox", 1);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "span", 2);
i0.ɵɵtext(4);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("formControl", ctx.control)("name", ctx.name)("required", ctx.required);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx.hint);
} }, dependencies: [ReactiveFormsModule, i2.NgControlStatus, i2.RequiredValidator, i2.FormControlDirective, MatCheckbox], encapsulation: 2 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicCheckboxComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-checkbox', imports: [ReactiveFormsModule, MatCheckbox], 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" }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicCheckboxComponent, { className: "TdDynamicCheckboxComponent", filePath: "lib/dynamic-elements/dynamic-checkbox/dynamic-checkbox.component.ts", lineNumber: 11 }); })();
function TdDynamicSliderComponent_span_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 9);
i0.ɵɵtext(1, "*");
i0.ɵɵelementEnd();
} }
class TdDynamicSliderComponent {
_changeDetectorRef;
control;
label = '';
required = false;
name = '';
hint = '';
min;
max;
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
_handleBlur() {
setTimeout(() => {
this._changeDetectorRef.markForCheck();
});
}
static ɵfac = function TdDynamicSliderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicSliderComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicSliderComponent, selectors: [["td-dynamic-slider"]], decls: 11, vars: 8, consts: [["slider", ""], [1, "td-dynamic-slider-wrapper", "mat-form-field", "mat-form-field-can-float", "mat-form-field-should-float"], [1, "mat-form-field-label-wrapper"], [1, "mat-form-field-label", "mat-primary", "td-slider-label"], ["class", "mat-form-field-required-marker", 4, "ngIf"], [1, "td-dynamic-slider-field"], ["thumbLabel", "", "tickInterval", "auto", 1, "td-dynamic-slider", 3, "blur"], ["matSliderThumb", "", 3, "min", "max", "formControl", "required"], [1, "mat-hint", "td-dynamic-element-hint"], [1, "mat-form-field-required-marker"]], template: function TdDynamicSliderComponent_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 1)(1, "span", 2)(2, "label", 3);
i0.ɵɵtext(3);
i0.ɵɵtemplate(4, TdDynamicSliderComponent_span_4_Template, 2, 0, "span", 4);
i0.ɵɵelementEnd()();
i0.ɵɵelementStart(5, "div", 5)(6, "mat-slider", 6, 0);
i0.ɵɵlistener("blur", function TdDynamicSliderComponent_Template_mat_slider_blur_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx._handleBlur()); });
i0.ɵɵelement(8, "input", 7);
i0.ɵɵelementEnd()();
i0.ɵɵelementStart(9, "span", 8);
i0.ɵɵtext(10);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.required && !(ctx.control == null ? null : ctx.control.disabled));
i0.ɵɵadvance(4);
i0.ɵɵproperty("min", ctx.min)("max", ctx.max)("formControl", ctx.control)("required", ctx.required);
i0.ɵɵattribute("name", ctx.name);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx.hint);
} }, dependencies: [CommonModule, i1.NgIf, ReactiveFormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.RequiredValidator, i2.FormControlDirective, MatSlider, MatSliderThumb], styles: ["[_nghost-%COMP%] .td-dynamic-slider-wrapper[_ngcontent-%COMP%]{display:block}.td-dynamic-slider-field[_ngcontent-%COMP%]{position:relative;flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-slider-field[_ngcontent-%COMP%] .td-dynamic-slider[_ngcontent-%COMP%]{flex:1}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicSliderComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-slider', imports: [CommonModule, ReactiveFormsModule, MatSlider, MatSliderThumb], 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"] }]
}], () => [{ type: i0.ChangeDetectorRef }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicSliderComponent, { className: "TdDynamicSliderComponent", filePath: "lib/dynamic-elements/dynamic-slider/dynamic-slider.component.ts", lineNumber: 12 }); })();
const _c0$2 = (a0, a1) => ({ control: a0, errors: a1 });
function TdDynamicSelectComponent_mat_option_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-option", 5);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
let tmp_2_0;
const selection_r1 = ctx.$implicit;
i0.ɵɵproperty("value", (tmp_2_0 = selection_r1.value) !== null && tmp_2_0 !== undefined ? tmp_2_0 : selection_r1);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", selection_r1.label || selection_r1, " ");
} }
function TdDynamicSelectComponent_ng_template_9_Template(rf, ctx) { }
class TdDynamicSelectComponent {
control;
label = '';
hint = '';
name = '';
required = false;
selections;
multiple;
errorMessageTemplate;
placeholder = '';
static ɵfac = function TdDynamicSelectComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicSelectComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicSelectComponent, selectors: [["td-dynamic-select"]], decls: 10, vars: 13, consts: [[1, "td-dynamic-select-wrapper"], [1, "td-dynamic-select-field"], [3, "formControl", "placeholder", "required", "multiple"], [3, "value", 4, "ngFor", "ngForOf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "value"]], template: function TdDynamicSelectComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 0)(1, "mat-form-field", 1)(2, "mat-label");
i0.ɵɵtext(3);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(4, "mat-select", 2);
i0.ɵɵtemplate(5, TdDynamicSelectComponent_mat_option_5_Template, 2, 2, "mat-option", 3);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(6, "mat-hint");
i0.ɵɵtext(7);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(8, "mat-error");
i0.ɵɵtemplate(9, TdDynamicSelectComponent_ng_template_9_Template, 0, 0, "ng-template", 4);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.label);
i0.ɵɵadvance();
i0.ɵɵproperty("formControl", ctx.control)("placeholder", ctx.placeholder)("required", ctx.required)("multiple", ctx.multiple);
i0.ɵɵattribute("name", ctx.name);
i0.ɵɵadvance();
i0.ɵɵproperty("ngForOf", ctx.selections);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx.hint);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(10, _c0$2, ctx.control, ctx.control.errors));
} }, dependencies: [CommonModule, i1.NgForOf, i1.NgTemplateOutlet, ReactiveFormsModule, i2.NgControlStatus, i2.RequiredValidator, i2.FormControlDirective, MatFormField, MatSelect, MatOption, MatLabel, MatError, MatHint], styles: [".td-dynamic-select-wrapper[_ngcontent-%COMP%]{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-select-wrapper[_ngcontent-%COMP%] .td-dynamic-select-field[_ngcontent-%COMP%]{flex:1;box-sizing:border-box}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicSelectComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-select', imports: [CommonModule, ReactiveFormsModule, MatFormField, MatSelect, MatOption, MatLabel, MatError, MatHint], 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"] }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicSelectComponent, { className: "TdDynamicSelectComponent", filePath: "lib/dynamic-elements/dynamic-select/dynamic-select.component.ts", lineNumber: 13 }); })();
const _c0$1 = (a0, a1) => ({ control: a0, errors: a1 });
function TdDynamicDatepickerComponent_ng_template_9_Template(rf, ctx) { }
class TdDynamicDatepickerComponent {
control;
label = '';
hint = '';
name = '';
type;
required = false;
min;
max;
errorMessageTemplate;
placeholder = '';
static ɵfac = function TdDynamicDatepickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicDatepickerComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicDatepickerComponent, selectors: [["td-dynamic-datepicker"]], decls: 13, vars: 15, consts: [["elementInput", ""], ["dynamicDatePicker", ""], [1, "td-dynamic-datepicker-wrapper"], [1, "td-dynamic-datepicker-field"], ["matInput", "", 3, "matDatepicker", "formControl", "placeholder", "required", "name", "min", "max"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matSuffix", "", 3, "for"]], template: function TdDynamicDatepickerComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 2)(1, "mat-form-field", 3)(2, "mat-label");
i0.ɵɵtext(3);
i0.ɵɵelementEnd();
i0.ɵɵelement(4, "input", 4, 0);
i0.ɵɵelementStart(6, "mat-hint");
i0.ɵɵtext(7);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(8, "mat-error");
i0.ɵɵtemplate(9, TdDynamicDatepickerComponent_ng_template_9_Template, 0, 0, "ng-template", 5);
i0.ɵɵelementEnd();
i0.ɵɵelement(10, "mat-datepicker-toggle", 6)(11, "mat-datepicker", null, 1);
i0.ɵɵelementEnd()();
} if (rf & 2) {
const dynamicDatePicker_r1 = i0.ɵɵreference(12);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.label);
i0.ɵɵadvance();
i0.ɵɵproperty("matDatepicker", dynamicDatePicker_r1)("formControl", ctx.control)("placeholder", ctx.placeholder)("required", ctx.required)("name", ctx.name)("min", ctx.min)("max", ctx.max);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.hint);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx.errorMessageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(12, _c0$1, ctx.control, ctx.control.errors));
i0.ɵɵadvance();
i0.ɵɵproperty("for", dynamicDatePicker_r1);
} }, dependencies: [CommonModule, i1.NgTemplateOutlet, ReactiveFormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.RequiredValidator, i2.FormControlDirective, MatFormFieldModule, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatHint, i3$1.MatError, i3$1.MatSuffix, MatInputModule, i4.MatInput, MatDatepickerModule, i5.MatDatepicker, i5.MatDatepickerInput, i5.MatDatepickerToggle], styles: [".td-dynamic-datepicker-wrapper[_ngcontent-%COMP%]{flex-direction:row;display:flex;box-sizing:border-box}.td-dynamic-datepicker-wrapper[_ngcontent-%COMP%] .td-dynamic-datepicker-field[_ngcontent-%COMP%]{flex:1;box-sizing:border-box}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicDatepickerComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-datepicker', imports: [
CommonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
], 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"] }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicDatepickerComponent, { className: "TdDynamicDatepickerComponent", filePath: "lib/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.ts", lineNumber: 20 }); })();
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 = function TdDynamicFormsService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicFormsService)(); };
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TdDynamicFormsService, factory: TdDynamicFormsService.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicFormsService, [{
type: Injectable
}], null, null); })();
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 = function TdDynamicFormsErrorTemplateDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicFormsErrorTemplateDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdDynamicFormsErrorTemplateDirective, selectors: [["ng-template", "tdDynamicFormsError", ""]], inputs: { tdDynamicFormsError: "tdDynamicFormsError" }, features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicFormsErrorTemplateDirective, [{
type: Directive,
args: [{ selector: '[tdDynamicFormsError]ng-template' }]
}], () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], { tdDynamicFormsError: [{
type: Input
}] }); })();
class TdDynamicElementDirective {
viewContainer;
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
static ɵfac = function TdDynamicElementDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicElementDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdDynamicElementDirective, selectors: [["", "tdDynamicContainer", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicElementDirective, [{
type: Directive,
args: [{
selector: '[tdDynamicContainer]',
}]
}], () => [{ type: i0.ViewContainerRef }], null); })();
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 = function TdDynamicElementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicElementComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TdDynamicFormsService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicElementComponent, selectors: [["td-dynamic-element"]], viewQuery: function TdDynamicElementComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(TdDynamicElementDirective, 7);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childElement = _t.first);
} }, hostVars: 2, hostBindings: function TdDynamicElementComponent_HostBindings(rf, ctx) { if (rf & 2) {
i0.ɵɵattribute("max", ctx.maxAttr)("min", ctx.minAttr);
} }, inputs: { dynamicControl: "dynamicControl", label: "label", hint: "hint", name: "name", type: "type", required: "required", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", selections: "selections", multiple: "multiple", customConfig: "customConfig", errorMessageTemplate: "errorMessageTemplate", placeholder: "placeholder" }, features: [i0.ɵɵProvidersFeature([
TdDynamicFormsService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: TdDynamicElementComponent,
multi: true,
},
]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 0, consts: [["tdDynamicContainer", ""]], template: function TdDynamicElementComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "div", 0);
} }, dependencies: [TdDynamicElementDirective], encapsulation: 2 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicElementComponent, [{
type: Component,
args: [{
providers: [
TdDynamicFormsService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: TdDynamicElementComponent,
multi: true,
},
],
selector: 'td-dynamic-element',
template: '<div tdDynamicContainer></div>',
imports: [TdDynamicElementDirective],
}]
}], () => [{ type: i0.Injector }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }], { 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']
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicElementComponent, { className: "TdDynamicElementComponent", filePath: "lib/dynamic-element.component.ts", lineNumber: 69 }); })();
const _c0 = ["*"];
function TdDynamicFormsComponent_ng_template_2_td_dynamic_element_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "td-dynamic-element", 6, 0);
} if (rf & 2) {
let tmp_11_0;
const element_r1 = i0.ɵɵnextContext().$implicit;
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵproperty("formControlName", element_r1.name)("dynamicControl", ctx_r1.dynamicForm.controls[element_r1.name])("id", element_r1.name)("name", element_r1.name)("label", element_r1.label || element_r1.name)("hint", element_r1.hint)("type", element_r1.type)("required", (tmp_11_0 = element_r1.required) !== null && tmp_11_0 !== undefined ? tmp_11_0 : false)("min", element_r1.min)("max", element_r1.max)("minLength", element_r1.minLength)("maxLength", element_r1.maxLength)("selections", element_r1.selections)("multiple", element_r1.multiple)("customConfig", element_r1.customConfig)("errorMessageTemplate", ctx_r1.getErrorTemplateRef(element_r1.name))("placeholder", element_r1.placeholder);
} }
function TdDynamicFormsComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 4);
i0.ɵɵtemplate(1, TdDynamicFormsComponent_ng_template_2_td_dynamic_element_1_Template, 2, 17, "td-dynamic-element", 5);
i0.ɵɵelementEnd();
} if (rf & 2) {
const element_r1 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵstyleProp("max-width", element_r1.flex ? element_r1.flex : 100, "%")("flex", "1 1 " + (element_r1.flex ? element_r1.flex : 100) + "%")("-ms-flex", "1 1 " + (element_r1.flex ? element_r1.flex : 100) + "%")("-webkit-box-flex", 1);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.dynamicForm.controls[element_r1.name]);
} }
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 = function TdDynamicFormsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicFormsComponent)(i0.ɵɵdirectiveInject(i2.UntypedFormBuilder), i0.ɵɵdirectiveInject(TdDynamicFormsService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDynamicFormsComponent, selectors: [["td-dynamic-forms"]], contentQueries: function TdDynamicFormsComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, TdDynamicFormsErrorTemplateDirective, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._errorTemplates = _t);
} }, inputs: { elements: "elements" }, ngContentSelectors: _c0, decls: 4, vars: 2, consts: [["dynamicElement", ""], ["novalidate", "", 3, "formGroup"], [1, "td-dynamic-form-wrapper"], ["ngFor", "", 3, "ngForOf"], [1, "td-dynamic-element-wrapper"], [3, "formControlName", "dynamicControl", "id", "name", "label", "hint", "type", "required", "min", "max", "minLength", "maxLength", "selections", "multiple", "customConfig", "errorMessageTemplate", "placeholder", 4, "ngIf"], [3, "formControlName", "dynamicControl", "id", "name", "label", "hint", "type", "required", "min", "max", "minLength", "maxLength", "selections", "multiple", "customConfig", "errorMessageTemplate", "placeholder"]], template: function TdDynamicFormsComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵelementStart(0, "form", 1)(1, "div", 2);
i0.ɵɵtemplate(2, TdDynamicFormsComponent_ng_template_2_Template, 2, 9, "ng-template", 3);
i0.ɵɵelementEnd();
i0.ɵɵprojection(3);
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵproperty("formGroup", ctx.dynamicForm);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngForOf", ctx.elements);
} }, dependencies: [CommonModule, i1.NgForOf, i1.NgIf, TdDynamicElementComponent, ReactiveFormsModule, i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.RequiredValidator, i2.FormGroupDirective, i2.FormControlName], styles: [".td-dynamic-form-wrapper[_ngcontent-%COMP%]{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[_ngcontent-%COMP%] .mat-form-field-infix{width:auto}.td-dynamic-form-wrapper[_ngcontent-%COMP%] .td-dynamic-element-hint{font-size:75%;display:block}.td-dynamic-form-wrapper[_ngcontent-%COMP%] .td-dynamic-element-wrapper[_ngcontent-%COMP%]{max-height:100%;box-sizing:border-box;position:relative;padding:4px 4px 8px}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicFormsComponent, [{
type: Component,
args: [{ selector: 'td-dynamic-forms', imports: [CommonModule, TdDynamicElementComponent, ReactiveFormsModule], 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"] }]
}], () => [{ type: i2.UntypedFormBuilder }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }], { _errorTemplates: [{
type: ContentChildren,
args: [TdDynamicFormsErrorTemplateDirective, { descendants: true }]
}], elements: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicFormsComponent, { className: "TdDynamicFormsComponent", filePath: "lib/dynamic-forms.component.ts", lineNumber: 36 }); })();
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 = function CovalentDynamicFormsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentDynamicFormsModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentDynamicFormsModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [DYNAMIC_FORMS_PROVIDER], imports: [TdDynamicFormsComponent,
TdDynamicInputComponent,
TdDynamicFileInputComponent,
TdDynamicTextareaComponent,
TdDynamicSlideToggleComponent,
TdDynamicCheckboxComponent,
TdDynamicSliderComponent,
TdDynamicSelectComponent,
TdDynamicDatepickerComponent] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentDynamicFormsModule, [{
type: NgModule,
args: [{
imports: [
TdDynamicFormsComponent,
TdDynamicElementComponent,
TdDynamicElementDirective,
TdDynamicFormsErrorTemplateDirective,
TdDynamicInputComponent,
TdDynamicFileInputComponent,
TdDynamicTextareaComponent,
TdDynamicSlideToggleComponent,
TdDynamicCheckboxComponent,
TdDynamicSliderComponent,
TdDynamicSelectComponent,
TdDynamicDatepickerComponent,
],
exports: [...TD_DYNAMIC_FORMS, ...TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
providers: [DYNAMIC_FORMS_PROVIDER],
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentDynamicFormsModule, { imports: [TdDynamicFormsComponent,
TdDynamicElementComponent,
TdDynamicElementDirective,
TdDynamicFormsErrorTemplateDirective,
TdDynamicInputComponent,
TdDynamicFileInputComponent,
TdDynamicTextareaComponent,
TdDynamicSlideToggleComponent,
TdDynamicCheckboxComponent,
TdDynamicSliderComponent,
TdDynamicSelectComponent,
TdDynamicDatepickerComponent], exports: [TdDynamicFormsComponent,
TdDynamicElementComponent,
TdDynamicElementDirective,
TdDynamicFormsErrorTemplateDirective, TdDynamicInputComponent,
TdDynamicFileInputComponent,
TdDynamicTextareaComponent,
TdDynamicSlideToggleComponent,
TdDynamicCheckboxComponent,
TdDynamicSliderComponent,
TdDynamicSelectComponent,
TdDynamicDatepickerComponent] }); })();
/**
* 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