@covalent/dynamic-forms 11.0.0-beta.1 → 11.0.0-beta.3

package/fesm2022/covalent-dynamic-forms.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, Optional, SkipSelf, Directive, Input, Type, HostBinding, ViewChild, ChangeDetectionStrategy, ContentChildren, NgModule } 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 } 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';
@@ -239,7 +239,7 @@ function TdDynamicSliderComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } }
 class TdDynamicSliderComponent {
-    _changeDetectorRef;
+    _changeDetectorRef = inject(ChangeDetectorRef);
     control;
     label = '';
     required = false;
@@ -247,15 +247,12 @@ class TdDynamicSliderComponent {
     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 ɵ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);
@@ -284,7 +281,7 @@ class TdDynamicSliderComponent {
 (() => { (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); })();
+    }], 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 });
@@ -536,25 +533,24 @@ const _TdDynamicElementMixinBase = mixinControlValueAccessor(TdDynamicElementBas
 class TdDynamicFormsErrorTemplateDirective extends CdkPortal {
     templateRef;
     tdDynamicFormsError;
-    constructor(templateRef, viewContainerRef) {
+    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)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    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' }]
-    }], () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], { tdDynamicFormsError: [{
+    }], () => [], { 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)); };
+    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, [{
@@ -562,10 +558,10 @@ class TdDynamicElementDirective {
         args: [{
                 selector: '[tdDynamicContainer]',
             }]
-    }], () => [{ type: i0.ViewContainerRef }], null); })();
+    }], null, null); })();
 class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
-    _injector;
-    _dynamicFormsService;
+    _injector = inject(Injector);
+    _dynamicFormsService = inject(TdDynamicFormsService);
     _instance;
     /**
      * Sets form control of the element.
@@ -635,10 +631,9 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
     get minAttr() {
         return this.min;
     }
-    constructor(_injector, _dynamicFormsService, _changeDetectorRef) {
+    constructor() {
+        const _changeDetectorRef = inject(ChangeDetectorRef);
         super(_changeDetectorRef);
-        this._injector = _injector;
-        this._dynamicFormsService = _dynamicFormsService;
     }
     ngOnInit() {
         const component = this.type instanceof Type
@@ -681,7 +676,7 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
             }
         }
     }
-    static ɵfac = function TdDynamicElementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicElementComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(TdDynamicFormsService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    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) {
@@ -715,7 +710,7 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
                 template: '<div tdDynamicContainer></div>',
                 imports: [TdDynamicElementDirective],
             }]
-    }], () => [{ type: i0.Injector }, { type: TdDynamicFormsService }, { type: i0.ChangeDetectorRef }], { dynamicControl: [{
+    }], () => [], { dynamicControl: [{
             type: Input
         }], label: [{
             type: Input
@@ -755,7 +750,7 @@ class TdDynamicElementComponent extends _TdDynamicElementMixinBase {
             type: HostBinding,
             args: ['attr.min']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicElementComponent, { className: "TdDynamicElementComponent", filePath: "lib/dynamic-element.component.ts", lineNumber: 69 }); })();
+(() => { (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) {
@@ -777,9 +772,9 @@ function TdDynamicFormsComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.dynamicForm.controls[element_r1.name]);
 } }
 class TdDynamicFormsComponent {
-    _formBuilder;
-    _dynamicFormsService;
-    _changeDetectorRef;
+    _formBuilder = inject(UntypedFormBuilder);
+    _dynamicFormsService = inject(TdDynamicFormsService);
+    _changeDetectorRef = inject(ChangeDetectorRef);
     _renderedElements = [];
     _elements;
     _templateMap = new Map();
@@ -850,10 +845,7 @@ class TdDynamicFormsComponent {
         }
         return {};
     }
-    constructor(_formBuilder, _dynamicFormsService, _changeDetectorRef) {
-        this._formBuilder = _formBuilder;
-        this._dynamicFormsService = _dynamicFormsService;
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
         this.dynamicForm = this._formBuilder.group({});
     }
     ngAfterContentInit() {
@@ -943,7 +935,7 @@ class TdDynamicFormsComponent {
             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 ɵfac = function TdDynamicFormsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDynamicFormsComponent)(); };
     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) {
@@ -965,13 +957,13 @@ class TdDynamicFormsComponent {
 (() => { (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: [{
+    }], () => [], { _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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDynamicFormsComponent, { className: "TdDynamicFormsComponent", filePath: "lib/dynamic-forms.component.ts", lineNumber: 40 }); })();
 
 const TD_DYNAMIC_FORMS = [
     TdDynamicFormsComponent,