@covalent/dynamic-forms
Version:
Teradata UI Platform Dynamic Forms Module
759 lines (748 loc) • 66.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, inject, ChangeDetectorRef, Injectable, Optional, SkipSelf, TemplateRef, ViewContainerRef, Directive, Input, Injector, Type, HostBinding, ViewChild, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { ReactiveFormsModule, UntypedFormControl, Validators, NG_VALUE_ACCESSOR, UntypedFormBuilder } 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 = inject(ChangeDetectorRef);
control;
label = '';
required = false;
name = '';
hint = '';
min;
max;
_handleBlur() {
setTimeout(() => {
this._changeDetectorRef.markForCheck();
});
}
static ɵfac = function TdDynamicSliderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicSliderComponent)(); };
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"] }]
}], null, 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) {
const selection_r1 = ctx.$implicit;
i0.ɵɵproperty("value", selection_r1.value ?? 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() {
const templateRef = inject(TemplateRef);
const viewContainerRef = inject(ViewContainerRef);
super(templateRef, viewContainerRef);
this.templateRef = templateRef;
}
static ɵfac = function TdDynamicFormsErrorTemplateDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicFormsErrorTemplateDirective)(); };
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' }]
}], () => [], { tdDynamicFormsError: [{
type: Input
}] }); })();
class TdDynamicElementDirective {
viewContainer = inject(ViewContainerRef);
static ɵfac = function TdDynamicElementDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicElementDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdDynamicElementDirective, selectors: [["", "tdDynamicContainer", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDynamicElementDirective, [{
type: Directive,
args: [{
selector: '[tdDynamicContainer]',
}]
}], null, null); })();
class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
_injector = inject(Injector);
_dynamicFormsService = inject(TdDynamicFormsService);
_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() {
const _changeDetectorRef = inject(ChangeDetectorRef);
super(_changeDetectorRef);
}
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)(); };
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],
}]
}], () => [], { 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: 74 }); })();
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) {
const element_r1 = i0.ɵɵ