@covalent/dynamic-forms - npm Package Compare versions

Comparing version 1.0.0-beta.6 to 1.0.0-beta.7

dynamic-element.component.d.ts

@@ -1,8 +0,13 @@
-import { OnInit } from '@angular/core';
+import { OnInit, SimpleChanges, OnChanges, TemplateRef } from '@angular/core';
 import { ViewContainerRef } from '@angular/core';
 import { ComponentFactoryResolver } from '@angular/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { TemplatePortalDirective } from '@angular/cdk/portal';
 import { TdDynamicElement, TdDynamicType, TdDynamicFormsService } from './services/dynamic-forms.service';
 import { AbstractControlValueAccessor } from './dynamic-elements/abstract-control-value-accesor';
 export declare const ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR: any;
+export declare class TdDynamicFormsErrorTemplate extends TemplatePortalDirective {
+    tdDynamicFormsError: string;
+    constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef);
+}
 export declare class TdDynamicElementDirective {
@@ -12,5 +17,6 @@ viewContainer: ViewContainerRef;
 }
-export declare class TdDynamicElementComponent extends AbstractControlValueAccessor implements ControlValueAccessor, OnInit {
+export declare class TdDynamicElementComponent extends AbstractControlValueAccessor implements ControlValueAccessor, OnInit, OnChanges {
     private _componentFactoryResolver;
     private _dynamicFormsService;
+    private _instance;
     value: any;
@@ -43,2 +49,10 @@ /**
     /**
+     * Sets minLength validation checkup (if supported by element).
+     */
+    minLength: number;
+    /**
+     * Sets maxLength validation checkup (if supported by element).
+     */
+    maxLength: number;
+    /**
      * Sets selections for array elements (if supported by element).
@@ -48,3 +62,2 @@ */
     childElement: TdDynamicElementDirective;
-    readonly flex: any;
     readonly maxAttr: any;
@@ -55,2 +68,6 @@ readonly minAttr: any;
     /**
+     * Reassign any inputs that have changed
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
      * Implemented as part of ControlValueAccessor.
@@ -57,0 +74,0 @@ */

dynamic-element.component.js

@@ -1,24 +0,7 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { Component, Directive, Input, HostBinding } from '@angular/core';
+import * as tslib_1 from "tslib";
+import { Component, Directive, Input, HostBinding, TemplateRef } from '@angular/core';
 import { ViewChild, ViewContainerRef } from '@angular/core';
 import { ComponentFactoryResolver, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
+import { TemplatePortalDirective } from '@angular/cdk/portal';
 import { TdDynamicFormsService } from './services/dynamic-forms.service';
@@ -34,17 +17,33 @@ import { AbstractControlValueAccessor } from './dynamic-elements/abstract-control-value-accesor';
 };
-var TdDynamicElementDirective = (function () {
+var TdDynamicFormsErrorTemplate = /** @class */ (function (_super) {
+    tslib_1.__extends(TdDynamicFormsErrorTemplate, _super);
+    function TdDynamicFormsErrorTemplate(templateRef, viewContainerRef) {
+        return _super.call(this, templateRef, viewContainerRef) || this;
+    }
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], TdDynamicFormsErrorTemplate.prototype, "tdDynamicFormsError", void 0);
+    TdDynamicFormsErrorTemplate = tslib_1.__decorate([
+        Directive({ selector: '[tdDynamicFormsError]ng-template' }),
+        tslib_1.__metadata("design:paramtypes", [TemplateRef, ViewContainerRef])
+    ], TdDynamicFormsErrorTemplate);
+    return TdDynamicFormsErrorTemplate;
+}(TemplatePortalDirective));
+export { TdDynamicFormsErrorTemplate };
+var TdDynamicElementDirective = /** @class */ (function () {
     function TdDynamicElementDirective(viewContainer) {
         this.viewContainer = viewContainer;
     }
+    TdDynamicElementDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[tdDynamicContainer]',
+        }),
+        tslib_1.__metadata("design:paramtypes", [ViewContainerRef])
+    ], TdDynamicElementDirective);
     return TdDynamicElementDirective;
 }());
-TdDynamicElementDirective = __decorate([
-    Directive({
-        selector: '[tdDynamicContainer]',
-    }),
-    __metadata("design:paramtypes", [ViewContainerRef])
-], TdDynamicElementDirective);
 export { TdDynamicElementDirective };
-var TdDynamicElementComponent = (function (_super) {
-    __extends(TdDynamicElementComponent, _super);
+var TdDynamicElementComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(TdDynamicElementComponent, _super);
     function TdDynamicElementComponent(_componentFactoryResolver, _dynamicFormsService) {
@@ -76,2 +75,10 @@ var _this = _super.call(this) || this;
         /**
+         * Sets minLength validation checkup (if supported by element).
+         */
+        _this.minLength = undefined;
+        /**
+         * Sets maxLength validation checkup (if supported by element).
+         */
+        _this.maxLength = undefined;
+        /**
          * Sets selections for array elements (if supported by element).
@@ -84,2 +91,5 @@ */
     Object.defineProperty(TdDynamicElementComponent.prototype, "value", {
+        get: function () {
+            return this._value;
+        },
         set: function (v) {
@@ -95,12 +105,2 @@ if (v !== this._value) {
     });
-    Object.defineProperty(TdDynamicElementComponent.prototype, "flex", {
-        get: function () {
-            if (this.type) {
-                return this._dynamicFormsService.getDefaultElementFlex(this.type);
-            }
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(TdDynamicElementComponent.prototype, "maxAttr", {
@@ -126,11 +126,14 @@ get: function () {
         this.childElement.viewContainer.insert(ref.hostView);
-        ref.instance.control = this.dynamicControl;
-        ref.instance.label = this.label;
-        ref.instance.type = this.type;
-        ref.instance._value = this._value;
-        ref.instance.required = this.required;
-        ref.instance.min = this.min;
-        ref.instance.max = this.max;
-        ref.instance.selections = this.selections;
-        ref.instance.registerOnChange(function (value) {
+        this._instance = ref.instance;
+        this._instance.control = this.dynamicControl;
+        this._instance.label = this.label;
+        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.registerOnChange(function (value) {
             _this.value = value;
@@ -141,3 +144,3 @@ });
             if (!Number.isNaN(value)) {
-                ref.instance.value = value;
+                _this._instance.value = value;
             }
@@ -147,2 +150,12 @@ });
     /**
+     * Reassign any inputs that have changed
+     */
+    TdDynamicElementComponent.prototype.ngOnChanges = function (changes) {
+        if (this._instance) {
+            for (var prop in changes) {
+                this._instance[prop] = changes[prop].currentValue;
+            }
+        }
+    };
+    /**
      * Implemented as part of ControlValueAccessor.
@@ -153,61 +166,64 @@ */
     };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", FormControl)
+    ], TdDynamicElementComponent.prototype, "dynamicControl", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], TdDynamicElementComponent.prototype, "label", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], TdDynamicElementComponent.prototype, "type", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], TdDynamicElementComponent.prototype, "required", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], TdDynamicElementComponent.prototype, "min", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], TdDynamicElementComponent.prototype, "max", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], TdDynamicElementComponent.prototype, "minLength", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], TdDynamicElementComponent.prototype, "maxLength", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], TdDynamicElementComponent.prototype, "selections", void 0);
+    tslib_1.__decorate([
+        ViewChild(TdDynamicElementDirective),
+        tslib_1.__metadata("design:type", TdDynamicElementDirective)
+    ], TdDynamicElementComponent.prototype, "childElement", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.max'),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], TdDynamicElementComponent.prototype, "maxAttr", null);
+    tslib_1.__decorate([
+        HostBinding('attr.min'),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], TdDynamicElementComponent.prototype, "minAttr", null);
+    TdDynamicElementComponent = tslib_1.__decorate([
+        Component({
+            providers: [TdDynamicFormsService, ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR],
+            selector: 'td-dynamic-element',
+            template: '<div tdDynamicContainer></div>',
+        }),
+        tslib_1.__metadata("design:paramtypes", [ComponentFactoryResolver,
+            TdDynamicFormsService])
+    ], TdDynamicElementComponent);
     return TdDynamicElementComponent;
 }(AbstractControlValueAccessor));
-__decorate([
-    Input(),
-    __metadata("design:type", FormControl)
-], TdDynamicElementComponent.prototype, "dynamicControl", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], TdDynamicElementComponent.prototype, "label", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], TdDynamicElementComponent.prototype, "type", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], TdDynamicElementComponent.prototype, "required", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], TdDynamicElementComponent.prototype, "min", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], TdDynamicElementComponent.prototype, "max", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], TdDynamicElementComponent.prototype, "selections", void 0);
-__decorate([
-    ViewChild(TdDynamicElementDirective),
-    __metadata("design:type", TdDynamicElementDirective)
-], TdDynamicElementComponent.prototype, "childElement", void 0);
-__decorate([
-    HostBinding('attr.flex'),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [])
-], TdDynamicElementComponent.prototype, "flex", null);
-__decorate([
-    HostBinding('attr.max'),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [])
-], TdDynamicElementComponent.prototype, "maxAttr", null);
-__decorate([
-    HostBinding('attr.min'),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [])
-], TdDynamicElementComponent.prototype, "minAttr", null);
-TdDynamicElementComponent = __decorate([
-    Component({
-        providers: [TdDynamicFormsService, ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR],
-        selector: 'td-dynamic-element',
-        template: '<div tdDynamicContainer></div>',
-    }),
-    __metadata("design:paramtypes", [ComponentFactoryResolver,
-        TdDynamicFormsService])
-], TdDynamicElementComponent);
 export { TdDynamicElementComponent };
 //# sourceMappingURL=dynamic-element.component.js.map

dynamic-element.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TdDynamicElementComponent"},"multi":true},"TdDynamicElementDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[tdDynamicContainer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"TdDynamicElementComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./dynamic-elements/abstract-control-value-accesor","name":"AbstractControlValueAccessor"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"},{"__symbolic":"reference","name":"ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR"}],"selector":"td-dynamic-element","template":"<div tdDynamicContainer></div>"}]}],"members":{"dynamicControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selections":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","name":"TdDynamicElementDirective"}]}]}],"flex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.flex"]}]}],"maxAttr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.max"]}]}],"minAttr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.min"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"registerOnModelChange":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TdDynamicElementComponent"},"multi":true},"TdDynamicElementDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[tdDynamicContainer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"TdDynamicElementComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./dynamic-elements/abstract-control-value-accesor","name":"AbstractControlValueAccessor"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"},{"__symbolic":"reference","name":"ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR"}],"selector":"td-dynamic-element","template":"<div tdDynamicContainer></div>"}]}],"members":{"dynamicControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selections":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","name":"TdDynamicElementDirective"}]}]}],"flex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.flex"]}]}],"maxAttr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.max"]}]}],"minAttr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.min"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"registerOnModelChange":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TdDynamicElementComponent"},"multi":true},"TdDynamicFormsErrorTemplate":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[tdDynamicFormsError]ng-template"}]}],"members":{"tdDynamicFormsError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"TdDynamicElementDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[tdDynamicContainer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"TdDynamicElementComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./dynamic-elements/abstract-control-value-accesor","name":"AbstractControlValueAccessor"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"},{"__symbolic":"reference","name":"ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR"}],"selector":"td-dynamic-element","template":"<div tdDynamicContainer></div>"}]}],"members":{"dynamicControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selections":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","name":"TdDynamicElementDirective"}]}]}],"maxAttr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.max"]}]}],"minAttr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.min"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"registerOnModelChange":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"TdDynamicElementComponent"},"multi":true},"TdDynamicFormsErrorTemplate":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[tdDynamicFormsError]ng-template"}]}],"members":{"tdDynamicFormsError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"TdDynamicElementDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[tdDynamicContainer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"TdDynamicElementComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./dynamic-elements/abstract-control-value-accesor","name":"AbstractControlValueAccessor"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"},{"__symbolic":"reference","name":"ELEMENT_INPUT_CONTROL_VALUE_ACCESSOR"}],"selector":"td-dynamic-element","template":"<div tdDynamicContainer></div>"}]}],"members":{"dynamicControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selections":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","name":"TdDynamicElementDirective"}]}]}],"maxAttr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.max"]}]}],"minAttr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.min"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"registerOnModelChange":[{"__symbolic":"method"}]}}}}]

dynamic-elements/abstract-control-value-accesor.js

 var noop = function () {
     // empty method
 };
-var AbstractControlValueAccessor = (function () {
+var AbstractControlValueAccessor = /** @class */ (function () {
     function AbstractControlValueAccessor() {
@@ -6,0 +6,0 @@ /**

dynamic-elements/dynamic-checkbox/dynamic-checkbox.component.js

@@ -1,17 +0,2 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import * as tslib_1 from "tslib";
 import { Component, forwardRef } from '@angular/core';
@@ -25,4 +10,4 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 };
-var TdDynamicCheckboxComponent = (function (_super) {
-    __extends(TdDynamicCheckboxComponent, _super);
+var TdDynamicCheckboxComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(TdDynamicCheckboxComponent, _super);
     function TdDynamicCheckboxComponent() {
@@ -34,13 +19,13 @@ var _this = _super !== null && _super.apply(this, arguments) || this;
     }
+    TdDynamicCheckboxComponent = tslib_1.__decorate([
+        Component({
+            providers: [CHECKBOX_INPUT_CONTROL_VALUE_ACCESSOR],
+            selector: 'td-dynamic-checkbox',
+            styles: [" /*# sourceMappingURL=dynamic-checkbox.component.css.map */ "],
+            template: "<div class=\"dynamic-checkbox-wrapper\"> <md-checkbox [(ngModel)]=\"value\" [required]=\"required\" flex> {{label}} </md-checkbox> </div>",
+        })
+    ], TdDynamicCheckboxComponent);
     return TdDynamicCheckboxComponent;
 }(AbstractControlValueAccessor));
-TdDynamicCheckboxComponent = __decorate([
-    Component({
-        providers: [CHECKBOX_INPUT_CONTROL_VALUE_ACCESSOR],
-        selector: 'td-dynamic-checkbox',
-        styles: [""],
-        template: "<div class=\"dynamic-checkbox-wrapper\"> <md-checkbox [(ngModel)]=\"value\" [required]=\"required\" flex> {{label}} </md-checkbox> </div>",
-    })
-], TdDynamicCheckboxComponent);
 export { TdDynamicCheckboxComponent };
 //# sourceMappingURL=dynamic-checkbox.component.js.map

dynamic-elements/dynamic-input/dynamic-input.component.d.ts

@@ -11,2 +11,4 @@ import { ControlValueAccessor, FormControl } from '@angular/forms';
     max: number;
+    minLength: number;
+    maxLength: number;
 }

dynamic-elements/dynamic-input/dynamic-input.component.js

@@ -1,17 +0,2 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import * as tslib_1 from "tslib";
 import { Component, forwardRef } from '@angular/core';
@@ -25,4 +10,4 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 };
-var TdDynamicInputComponent = (function (_super) {
-    __extends(TdDynamicInputComponent, _super);
+var TdDynamicInputComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(TdDynamicInputComponent, _super);
     function TdDynamicInputComponent() {
@@ -35,15 +20,17 @@ var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.max = undefined;
+        _this.minLength = undefined;
+        _this.maxLength = undefined;
         return _this;
     }
+    TdDynamicInputComponent = tslib_1.__decorate([
+        Component({
+            providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR],
+            selector: 'td-dynamic-input',
+            styles: [" /*# sourceMappingURL=dynamic-input.component.css.map */ "],
+            template: "<div class=\"dynamic-input-wrapper\" layout=\"row\"> <md-form-field flex> <input #elementInput mdInput [(ngModel)]=\"value\" [formControl]=\"control\" [placeholder]=\"label\" [type]=\"type\" [required]=\"required\" [attr.min]=\"min\" [attr.max]=\"max\" [attr.minLength]=\"minLength\" [attr.maxLength]=\"maxLength\" flex/> </md-form-field> </div> ",
+        })
+    ], TdDynamicInputComponent);
     return TdDynamicInputComponent;
 }(AbstractControlValueAccessor));
-TdDynamicInputComponent = __decorate([
-    Component({
-        providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR],
-        selector: 'td-dynamic-input',
-        styles: [""],
-        template: "<div class=\"dynamic-input-wrapper\" layout=\"column\"> <md-input-container> <input #elementInput mdInput [(ngModel)]=\"value\" [placeholder]=\"label\" [type]=\"type\" [required]=\"required\" [attr.min]=\"min\" [attr.max]=\"max\" flex> <md-hint align=\"start\"> <span class=\"tc-red-600\"> <span *ngIf=\"control.hasError('max')\">Max: {{max}}</span> <span *ngIf=\"control.hasError('min')\">Min: {{min}}</span> </span> </md-hint> </md-input-container> </div>",
-    })
-], TdDynamicInputComponent);
 export { TdDynamicInputComponent };
 //# sourceMappingURL=dynamic-input.component.js.map

dynamic-elements/dynamic-select/dynamic-select.component.js

@@ -1,17 +0,2 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import * as tslib_1 from "tslib";
 import { Component, forwardRef } from '@angular/core';
@@ -25,4 +10,4 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 };
-var TdDynamicSelectComponent = (function (_super) {
-    __extends(TdDynamicSelectComponent, _super);
+var TdDynamicSelectComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(TdDynamicSelectComponent, _super);
     function TdDynamicSelectComponent() {
@@ -35,13 +20,13 @@ var _this = _super !== null && _super.apply(this, arguments) || this;
     }
+    TdDynamicSelectComponent = tslib_1.__decorate([
+        Component({
+            providers: [SELECT_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR],
+            selector: 'td-dynamic-select',
+            styles: [" /*# sourceMappingURL=dynamic-select.component.css.map */ "],
+            template: "<div class=\"dynamic-select-wrapper\" layout=\"row\"> <md-select [(ngModel)]=\"value\" [placeholder]=\"label\" [required]=\"required\" flex=\"100\"> <md-option *ngFor=\"let selection of selections\" [value]=\"selection.value || selection\">{{selection.label || selection}}</md-option> </md-select> </div> ",
+        })
+    ], TdDynamicSelectComponent);
     return TdDynamicSelectComponent;
 }(AbstractControlValueAccessor));
-TdDynamicSelectComponent = __decorate([
-    Component({
-        providers: [SELECT_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR],
-        selector: 'td-dynamic-select',
-        styles: [""],
-        template: "<div class=\"dynamic-select-wrapper\" layout=\"row\"> <md-select [(ngModel)]=\"value\" [placeholder]=\"label\" [required]=\"required\" flex=\"100\"> <md-option *ngFor=\"let selection of selections\" [value]=\"selection\">{{selection}}</md-option> </md-select> </div>",
-    })
-], TdDynamicSelectComponent);
 export { TdDynamicSelectComponent };
 //# sourceMappingURL=dynamic-select.component.js.map

dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component.js

@@ -1,17 +0,2 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import * as tslib_1 from "tslib";
 import { Component, forwardRef } from '@angular/core';
@@ -25,4 +10,4 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 };
-var TdDynamicSlideToggleComponent = (function (_super) {
-    __extends(TdDynamicSlideToggleComponent, _super);
+var TdDynamicSlideToggleComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(TdDynamicSlideToggleComponent, _super);
     function TdDynamicSlideToggleComponent() {
@@ -34,13 +19,13 @@ var _this = _super !== null && _super.apply(this, arguments) || this;
     }
+    TdDynamicSlideToggleComponent = tslib_1.__decorate([
+        Component({
+            providers: [SLIDE_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR],
+            selector: 'td-dynamic-slide-toggle',
+            styles: [" /*# sourceMappingURL=dynamic-slide-toggle.component.css.map */ "],
+            template: "<div class=\"dynamic-slide-toggle-wrapper\"> <md-slide-toggle [(ngModel)]=\"value\" [required]=\"required\" flex> {{label}} </md-slide-toggle> </div>",
+        })
+    ], TdDynamicSlideToggleComponent);
     return TdDynamicSlideToggleComponent;
 }(AbstractControlValueAccessor));
-TdDynamicSlideToggleComponent = __decorate([
-    Component({
-        providers: [SLIDE_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR],
-        selector: 'td-dynamic-slide-toggle',
-        styles: [""],
-        template: "<div class=\"dynamic-slide-toggle-wrapper\"> <md-slide-toggle [(ngModel)]=\"value\" [required]=\"required\" flex> {{label}} </md-slide-toggle> </div>",
-    })
-], TdDynamicSlideToggleComponent);
 export { TdDynamicSlideToggleComponent };
 //# sourceMappingURL=dynamic-slide-toggle.component.js.map

dynamic-elements/dynamic-slider/dynamic-slider.component.js

@@ -1,17 +0,2 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import * as tslib_1 from "tslib";
 import { Component, forwardRef } from '@angular/core';
@@ -25,4 +10,4 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 };
-var TdDynamicSliderComponent = (function (_super) {
-    __extends(TdDynamicSliderComponent, _super);
+var TdDynamicSliderComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(TdDynamicSliderComponent, _super);
     function TdDynamicSliderComponent() {
@@ -36,13 +21,13 @@ var _this = _super !== null && _super.apply(this, arguments) || this;
     }
+    TdDynamicSliderComponent = tslib_1.__decorate([
+        Component({
+            providers: [SLIDER_INPUT_CONTROL_VALUE_ACCESSOR],
+            selector: 'td-dynamic-slider',
+            styles: [" /*# sourceMappingURL=dynamic-slider.component.css.map */ "],
+            template: "<div class=\"dynamic-slider-wrapper relative push-top-sm\"> <span class=\"mat-form-field-placeholder-wrapper\"> <label class=\"mat-form-field-placeholder mat-float mat-form-field-float td-slider-label\" [class.mat-focused]=\"slider._isActive\"> {{label}} <span *ngIf=\"required\" class=\"mat-placeholder-required\">*</span></label> </span> <div layout=\"row\" layout-align=\"start center\" flex> <md-slider #slider [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\" thumbLabel tickInterval=\"auto\" [required]=\"required\" flex> </md-slider> </div>   </div>",
+        })
+    ], TdDynamicSliderComponent);
     return TdDynamicSliderComponent;
 }(AbstractControlValueAccessor));
-TdDynamicSliderComponent = __decorate([
-    Component({
-        providers: [SLIDER_INPUT_CONTROL_VALUE_ACCESSOR],
-        selector: 'td-dynamic-slider',
-        styles: [".td-slider-label { padding-bottom: 0px !important; top: 0px; } "],
-        template: "<div class=\"dynamic-slider-wrapper relative push-top\" flex layout=\"column\"> <label class=\"mat-input-placeholder mat-float td-slider-label\" [class.mat-focused]=\"slider._isActive\"> {{label}} <span *ngIf=\"required\" class=\"mat-placeholder-required\">*</span></label> <div layout=\"row\" layout-align=\"start center\" flex> <md-slider #slider [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\" thumbLabel tickInterval=\"auto\" [required]=\"required\" flex> </md-slider> </div>   </div>",
-    })
-], TdDynamicSliderComponent);
 export { TdDynamicSliderComponent };
 //# sourceMappingURL=dynamic-slider.component.js.map

dynamic-elements/dynamic-textarea/dynamic-textarea.component.js

@@ -1,17 +0,2 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import * as tslib_1 from "tslib";
 import { Component, forwardRef } from '@angular/core';
@@ -25,4 +10,4 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 };
-var TdDynamicTextareaComponent = (function (_super) {
-    __extends(TdDynamicTextareaComponent, _super);
+var TdDynamicTextareaComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(TdDynamicTextareaComponent, _super);
     function TdDynamicTextareaComponent() {
@@ -34,13 +19,13 @@ var _this = _super !== null && _super.apply(this, arguments) || this;
     }
+    TdDynamicTextareaComponent = tslib_1.__decorate([
+        Component({
+            providers: [TEXTAREA_INPUT_CONTROL_VALUE_ACCESSOR],
+            selector: 'td-dynamic-textarea',
+            styles: [" /*# sourceMappingURL=dynamic-textarea.component.css.map */ "],
+            template: "<div class=\"dynamic-textarea-wrapper\" layout=\"row\"> <md-form-field flex> <textarea #elementInput mdInput [(ngModel)]=\"value\" [placeholder]=\"label\" [required]=\"required\" rows=\"4\" flex> </textarea> </md-form-field> </div>",
+        })
+    ], TdDynamicTextareaComponent);
     return TdDynamicTextareaComponent;
 }(AbstractControlValueAccessor));
-TdDynamicTextareaComponent = __decorate([
-    Component({
-        providers: [TEXTAREA_INPUT_CONTROL_VALUE_ACCESSOR],
-        selector: 'td-dynamic-textarea',
-        styles: [""],
-        template: "<div class=\"dynamic-textarea-wrapper\" layout=\"column\"> <md-input-container> <textarea #elementInput mdInput [(ngModel)]=\"value\" [placeholder]=\"label\" [required]=\"required\" rows=\"4\" flex> </textarea> </md-input-container> </div>",
-    })
-], TdDynamicTextareaComponent);
 export { TdDynamicTextareaComponent };
 //# sourceMappingURL=dynamic-textarea.component.js.map

dynamic-forms.component.d.ts

@@ -1,9 +0,13 @@
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, TemplateRef, QueryList, AfterContentInit } from '@angular/core';
 import { FormGroup, FormBuilder, AbstractControl } from '@angular/forms';
 import { TdDynamicFormsService, ITdDynamicElementConfig } from './services/dynamic-forms.service';
-export declare class TdDynamicFormsComponent {
+import { TdDynamicFormsErrorTemplate } from './dynamic-element.component';
+export declare class TdDynamicFormsComponent implements AfterContentInit {
     private _formBuilder;
     private _dynamicFormsService;
     private _changeDetectorRef;
+    private _renderedElements;
     private _elements;
+    private _templateMap;
+    _errorTemplates: QueryList<TdDynamicFormsErrorTemplate>;
     dynamicForm: FormGroup;
@@ -41,2 +45,17 @@ /**
     constructor(_formBuilder: FormBuilder, _dynamicFormsService: TdDynamicFormsService, _changeDetectorRef: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    /**
+     * Refreshes the form and rerenders all validator/element modifications.
+     */
+    refresh(): void;
+    /**
+     * Getter method for error template references
+     */
+    getErrorTemplateRef(name: string): TemplateRef<any>;
+    /**
+     * Loads error templates and sets them in a map for faster access.
+     */
+    private _updateErrorTemplates();
+    private _rerenderElements();
+    private _clearRemovedElements();
 }

dynamic-forms.component.js

@@ -1,14 +0,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { Component, Input, ChangeDetectorRef } from '@angular/core';
+import * as tslib_1 from "tslib";
+import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, ContentChildren, QueryList } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { TdDynamicFormsService } from './services/dynamic-forms.service';
-var TdDynamicFormsComponent = (function () {
+import { TdDynamicFormsErrorTemplate } from './dynamic-element.component';
+import { timer } from 'rxjs/observable/timer';
+import { toPromise } from 'rxjs/operator/toPromise';
+var TdDynamicFormsComponent = /** @class */ (function () {
     function TdDynamicFormsComponent(_formBuilder, _dynamicFormsService, _changeDetectorRef) {
@@ -18,2 +13,4 @@ this._formBuilder = _formBuilder;
         this._changeDetectorRef = _changeDetectorRef;
+        this._renderedElements = [];
+        this._templateMap = new Map();
         this.dynamicForm = this._formBuilder.group({});
@@ -23,3 +20,3 @@ }
         get: function () {
-            return this._elements;
+            return this._renderedElements;
         },
@@ -32,21 +29,9 @@ /**
         set: function (elements) {
-            var _this = this;
             if (elements) {
-                if (this._elements) {
-                    this._elements.forEach(function (elem) {
-                        _this.dynamicForm.removeControl(elem.name);
-                    });
-                }
-                var duplicates_1 = [];
-                elements.forEach(function (elem) {
-                    _this._dynamicFormsService.validateDynamicElementName(elem.name);
-                    if (duplicates_1.indexOf(elem.name) > -1) {
-                        throw new Error("Dynamic element name: \"" + elem.name + "\" is duplicated");
-                    }
-                    duplicates_1.push(elem.name);
-                    _this.dynamicForm.registerControl(elem.name, _this._dynamicFormsService.createFormControl(elem));
-                });
                 this._elements = elements;
-                this._changeDetectorRef.detectChanges();
             }
+            else {
+                this._elements = [];
+            }
+            this._rerenderElements();
         },
@@ -122,19 +107,92 @@ enumerable: true,
     });
+    TdDynamicFormsComponent.prototype.ngAfterContentInit = function () {
+        this._updateErrorTemplates();
+    };
+    /**
+     * Refreshes the form and rerenders all validator/element modifications.
+     */
+    TdDynamicFormsComponent.prototype.refresh = function () {
+        this._rerenderElements();
+        this._updateErrorTemplates();
+    };
+    /**
+     * Getter method for error template references
+     */
+    TdDynamicFormsComponent.prototype.getErrorTemplateRef = function (name) {
+        return this._templateMap.get(name);
+    };
+    /**
+     * Loads error templates and sets them in a map for faster access.
+     */
+    TdDynamicFormsComponent.prototype._updateErrorTemplates = function () {
+        this._templateMap = new Map();
+        for (var i = 0; i < this._errorTemplates.toArray().length; i++) {
+            this._templateMap.set(this._errorTemplates.toArray()[i].tdDynamicFormsError, this._errorTemplates.toArray()[i].templateRef);
+        }
+    };
+    TdDynamicFormsComponent.prototype._rerenderElements = function () {
+        var _this = this;
+        this._clearRemovedElements();
+        this._renderedElements = [];
+        var duplicates = [];
+        this._elements.forEach(function (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);
+            if (!_this.dynamicForm.get(elem.name)) {
+                _this.dynamicForm.addControl(elem.name, _this._dynamicFormsService.createFormControl(elem));
+            }
+            else {
+                _this.dynamicForm.get(elem.name).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();
+        toPromise.call(timer()).then(function () {
+            // call a markForCheck so elements are rendered correctly in OnPush
+            _this._changeDetectorRef.markForCheck();
+        });
+    };
+    TdDynamicFormsComponent.prototype._clearRemovedElements = function () {
+        var _this = this;
+        for (var i = 0; i < this._renderedElements.length; i++) {
+            for (var j = 0; j < this._elements.length; j++) {
+                // check if the name of the element is still there removed
+                if (this._renderedElements[i].name === this._elements[j].name) {
+                    delete this._renderedElements[i];
+                    break;
+                }
+            }
+        }
+        // remove elements that were removed from the array
+        this._renderedElements.forEach(function (elem) {
+            _this.dynamicForm.removeControl(elem.name);
+        });
+    };
+    tslib_1.__decorate([
+        ContentChildren(TdDynamicFormsErrorTemplate),
+        tslib_1.__metadata("design:type", QueryList)
+    ], TdDynamicFormsComponent.prototype, "_errorTemplates", void 0);
+    tslib_1.__decorate([
+        Input('elements'),
+        tslib_1.__metadata("design:type", Array),
+        tslib_1.__metadata("design:paramtypes", [Array])
+    ], TdDynamicFormsComponent.prototype, "elements", null);
+    TdDynamicFormsComponent = tslib_1.__decorate([
+        Component({
+            selector: 'td-dynamic-forms',
+            template: "<form [formGroup]=\"dynamicForm\" novalidate> <div layout=\"row\" layout-wrap layout-align=\"start center\"> <ng-template let-element ngFor [ngForOf]=\"elements\"> <div class=\"pad-xs\" [style.position]=\"'relative'\" [attr.flex]=\"element.flex ? element.flex : 100\"> <td-dynamic-element #dynamicElement *ngIf=\"dynamicForm.controls[element.name]\" [formControlName]=\"element.name\" [dynamicControl]=\"dynamicForm.controls[element.name]\" [id]=\"element.name\" [label]=\"element.label || element.name\" [type]=\"element.type\" [required]=\"element.required\" [min]=\"element.min\" [max]=\"element.max\" [minLength]=\"element.minLength\" [maxLength]=\"element.maxLength\" [selections]=\"element.selections\"> </td-dynamic-element> <div class=\"tc-red-600 md-caption text-sm\" [style.position]=\"'absolute'\" [style.bottom.px]=\"'10'\" *ngIf=\"getErrorTemplateRef(element.name) && dynamicForm.controls[element.name]?.errors\"> <ng-template [ngTemplateOutlet]=\"getErrorTemplateRef(element.name)\" [ngTemplateOutletContext]=\"{control: dynamicForm.controls[element.name], errors: dynamicForm.controls[element.name]?.errors}\"> </ng-template> </div> </div> </ng-template> </div> <ng-content></ng-content> </form> ",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+        }),
+        tslib_1.__metadata("design:paramtypes", [FormBuilder,
+            TdDynamicFormsService,
+            ChangeDetectorRef])
+    ], TdDynamicFormsComponent);
     return TdDynamicFormsComponent;
 }());
-__decorate([
-    Input('elements'),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], TdDynamicFormsComponent.prototype, "elements", null);
-TdDynamicFormsComponent = __decorate([
-    Component({
-        selector: 'td-dynamic-forms',
-        template: "<form [formGroup]=\"dynamicForm\" novalidate> <div layout=\"row\"  layout-wrap  layout-margin  layout-align=\"start center\"> <ng-template let-element ngFor [ngForOf]=\"elements\"> <td-dynamic-element [formControlName]=\"element.name\" [dynamicControl]=\"dynamicForm.controls[element.name]\" [id]=\"element.name\" [label]=\"element.label || element.name\"  [type]=\"element.type\" [required]=\"element.required\" [min]=\"element.min\" [max]=\"element.max\" [selections]=\"element.selections\"> </td-dynamic-element> </ng-template> </div> <ng-content></ng-content> </form>",
-    }),
-    __metadata("design:paramtypes", [FormBuilder,
-        TdDynamicFormsService,
-        ChangeDetectorRef])
-], TdDynamicFormsComponent);
 export { TdDynamicFormsComponent };
 //# sourceMappingURL=dynamic-forms.component.js.map

dynamic-forms.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TdDynamicFormsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"td-dynamic-forms","templateUrl":"./dynamic-forms.component.html"}]}],"members":{"elements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["elements"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"TdDynamicFormsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"td-dynamic-forms","templateUrl":"./dynamic-forms.component.html"}]}],"members":{"elements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["elements"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"TdDynamicFormsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"td-dynamic-forms","templateUrl":"./dynamic-forms.component.html","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"_errorTemplates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicFormsErrorTemplate"}]}]}],"elements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["elements"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"getErrorTemplateRef":[{"__symbolic":"method"}],"_updateErrorTemplates":[{"__symbolic":"method"}],"_rerenderElements":[{"__symbolic":"method"}],"_clearRemovedElements":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TdDynamicFormsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"td-dynamic-forms","templateUrl":"./dynamic-forms.component.html","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"_errorTemplates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicFormsErrorTemplate"}]}]}],"elements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["elements"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"TdDynamicFormsService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"getErrorTemplateRef":[{"__symbolic":"method"}],"_updateErrorTemplates":[{"__symbolic":"method"}],"_rerenderElements":[{"__symbolic":"method"}],"_clearRemovedElements":[{"__symbolic":"method"}]}}}}]

dynamic-forms.module.js

@@ -1,16 +0,13 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import * as tslib_1 from "tslib";
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MdInputModule, MdSelectModule, MdCheckboxModule, MdSliderModule, MdSlideToggleModule } from '@angular/material';
+import { MdInputModule, MdSelectModule, MdCheckboxModule, MdSliderModule, MdSlideToggleModule, MdIconModule, MdButtonModule } from '@angular/material';
 import { CovalentCommonModule } from '@covalent/core';
+import { CovalentFileModule } from '@covalent/core';
 import { TdDynamicFormsComponent } from './dynamic-forms.component';
-import { TdDynamicElementComponent, TdDynamicElementDirective } from './dynamic-element.component';
+import { TdDynamicElementComponent, TdDynamicElementDirective, TdDynamicFormsErrorTemplate } from './dynamic-element.component';
 import { DYNAMIC_FORMS_PROVIDER } from './services/dynamic-forms.service';
 import { TdDynamicInputComponent } from './dynamic-elements/dynamic-input/dynamic-input.component';
+import { TdDynamicFileInputComponent } from './dynamic-elements/dynamic-file-input/dynamic-file-input.component';
 import { TdDynamicTextareaComponent } from './dynamic-elements/dynamic-textarea/dynamic-textarea.component';
@@ -25,5 +22,7 @@ import { TdDynamicSlideToggleComponent, } from './dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component';
     TdDynamicElementDirective,
+    TdDynamicFormsErrorTemplate,
 ];
 var TD_DYNAMIC_FORMS_ENTRY_COMPONENTS = [
     TdDynamicInputComponent,
+    TdDynamicFileInputComponent,
     TdDynamicTextareaComponent,
@@ -35,34 +34,37 @@ TdDynamicSlideToggleComponent,
 ];
-var CovalentDynamicFormsModule = (function () {
+var CovalentDynamicFormsModule = /** @class */ (function () {
     function CovalentDynamicFormsModule() {
     }
+    CovalentDynamicFormsModule = tslib_1.__decorate([
+        NgModule({
+            declarations: [
+                TD_DYNAMIC_FORMS,
+                TD_DYNAMIC_FORMS_ENTRY_COMPONENTS,
+            ],
+            imports: [
+                CommonModule,
+                ReactiveFormsModule,
+                MdInputModule,
+                MdSelectModule,
+                MdCheckboxModule,
+                MdSliderModule,
+                MdSlideToggleModule,
+                MdIconModule,
+                MdButtonModule,
+                CovalentCommonModule,
+                CovalentFileModule,
+            ],
+            exports: [
+                TD_DYNAMIC_FORMS,
+                TD_DYNAMIC_FORMS_ENTRY_COMPONENTS,
+            ],
+            providers: [
+                DYNAMIC_FORMS_PROVIDER,
+            ],
+            entryComponents: [TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
+        })
+    ], CovalentDynamicFormsModule);
     return CovalentDynamicFormsModule;
 }());
-CovalentDynamicFormsModule = __decorate([
-    NgModule({
-        declarations: [
-            TD_DYNAMIC_FORMS,
-            TD_DYNAMIC_FORMS_ENTRY_COMPONENTS,
-        ],
-        imports: [
-            CommonModule,
-            ReactiveFormsModule,
-            MdInputModule,
-            MdSelectModule,
-            MdCheckboxModule,
-            MdSliderModule,
-            MdSlideToggleModule,
-            CovalentCommonModule,
-        ],
-        exports: [
-            TD_DYNAMIC_FORMS,
-            TD_DYNAMIC_FORMS_ENTRY_COMPONENTS,
-        ],
-        providers: [
-            DYNAMIC_FORMS_PROVIDER,
-        ],
-        entryComponents: [TD_DYNAMIC_FORMS_ENTRY_COMPONENTS],
-    })
-], CovalentDynamicFormsModule);
 export { CovalentDynamicFormsModule };
 //# sourceMappingURL=dynamic-forms.module.js.map

dynamic-forms.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CovalentDynamicFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./dynamic-forms.component","name":"TdDynamicFormsComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementDirective"}],[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdInputModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSelectModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSliderModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"../core","name":"CovalentCommonModule"}],"exports":[[{"__symbolic":"reference","module":"./dynamic-forms.component","name":"TdDynamicFormsComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementDirective"}],[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]],"providers":[{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"DYNAMIC_FORMS_PROVIDER"}],"entryComponents":[[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"CovalentDynamicFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./dynamic-forms.component","name":"TdDynamicFormsComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementDirective"}],[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdInputModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSelectModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSliderModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"../core","name":"CovalentCommonModule"}],"exports":[[{"__symbolic":"reference","module":"./dynamic-forms.component","name":"TdDynamicFormsComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementDirective"}],[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]],"providers":[{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"DYNAMIC_FORMS_PROVIDER"}],"entryComponents":[[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CovalentDynamicFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./dynamic-forms.component","name":"TdDynamicFormsComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementDirective"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicFormsErrorTemplate"}],[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-file-input/dynamic-file-input.component","name":"TdDynamicFileInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdInputModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSelectModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSliderModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdIconModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdButtonModule"},{"__symbolic":"reference","module":"../core","name":"CovalentCommonModule"},{"__symbolic":"reference","module":"../core","name":"CovalentFileModule"}],"exports":[[{"__symbolic":"reference","module":"./dynamic-forms.component","name":"TdDynamicFormsComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementDirective"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicFormsErrorTemplate"}],[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-file-input/dynamic-file-input.component","name":"TdDynamicFileInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]],"providers":[{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"DYNAMIC_FORMS_PROVIDER"}],"entryComponents":[[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-file-input/dynamic-file-input.component","name":"TdDynamicFileInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"CovalentDynamicFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./dynamic-forms.component","name":"TdDynamicFormsComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementDirective"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicFormsErrorTemplate"}],[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-file-input/dynamic-file-input.component","name":"TdDynamicFileInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdInputModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSelectModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSliderModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdIconModule"},{"__symbolic":"reference","module":"@angular/material","name":"MdButtonModule"},{"__symbolic":"reference","module":"../core","name":"CovalentCommonModule"},{"__symbolic":"reference","module":"../core","name":"CovalentFileModule"}],"exports":[[{"__symbolic":"reference","module":"./dynamic-forms.component","name":"TdDynamicFormsComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementComponent"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicElementDirective"},{"__symbolic":"reference","module":"./dynamic-element.component","name":"TdDynamicFormsErrorTemplate"}],[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-file-input/dynamic-file-input.component","name":"TdDynamicFileInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]],"providers":[{"__symbolic":"reference","module":"./services/dynamic-forms.service","name":"DYNAMIC_FORMS_PROVIDER"}],"entryComponents":[[{"__symbolic":"reference","module":"./dynamic-elements/dynamic-input/dynamic-input.component","name":"TdDynamicInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-file-input/dynamic-file-input.component","name":"TdDynamicFileInputComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","name":"TdDynamicTextareaComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","name":"TdDynamicSlideToggleComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","name":"TdDynamicCheckboxComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-slider/dynamic-slider.component","name":"TdDynamicSliderComponent"},{"__symbolic":"reference","module":"./dynamic-elements/dynamic-select/dynamic-select.component","name":"TdDynamicSelectComponent"}]]}]}]}}}]

index.d.ts

 export { CovalentDynamicFormsModule } from './dynamic-forms.module';
-export { ITdDynamicElementConfig, TdDynamicType, TdDynamicElement, DYNAMIC_ELEMENT_NAME_REGEX } from './services/dynamic-forms.service';
-export { TdDynamicElementComponent } from './dynamic-element.component';
+export { ITdDynamicElementConfig, TdDynamicType, ITdDynamicElementValidator, TdDynamicElement, DYNAMIC_ELEMENT_NAME_REGEX } from './services/dynamic-forms.service';
+export { TdDynamicElementComponent, TdDynamicFormsErrorTemplate } from './dynamic-element.component';
 export { TdDynamicFormsComponent } from './dynamic-forms.component';
 export { TdDynamicInputComponent } from './dynamic-elements/dynamic-input/dynamic-input.component';
+export { TdDynamicFileInputComponent } from './dynamic-elements/dynamic-file-input/dynamic-file-input.component';
 export { TdDynamicTextareaComponent } from './dynamic-elements/dynamic-textarea/dynamic-textarea.component';
@@ -7,0 +8,0 @@ export { TdDynamicSlideToggleComponent } from './dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component';

index.js

 export { CovalentDynamicFormsModule } from './dynamic-forms.module';
 export { TdDynamicType, TdDynamicElement, DYNAMIC_ELEMENT_NAME_REGEX } from './services/dynamic-forms.service';
-export { TdDynamicElementComponent } from './dynamic-element.component';
+export { TdDynamicElementComponent, TdDynamicFormsErrorTemplate } from './dynamic-element.component';
 export { TdDynamicFormsComponent } from './dynamic-forms.component';
 export { TdDynamicInputComponent } from './dynamic-elements/dynamic-input/dynamic-input.component';
+export { TdDynamicFileInputComponent } from './dynamic-elements/dynamic-file-input/dynamic-file-input.component';
 export { TdDynamicTextareaComponent } from './dynamic-elements/dynamic-textarea/dynamic-textarea.component';
@@ -7,0 +8,0 @@ export { TdDynamicSlideToggleComponent, } from './dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component';

index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./dynamic-forms.module","export":["CovalentDynamicFormsModule"]},{"from":"./services/dynamic-forms.service","export":["ITdDynamicElementConfig","TdDynamicType","TdDynamicElement","DYNAMIC_ELEMENT_NAME_REGEX"]},{"from":"./dynamic-element.component","export":["TdDynamicElementComponent"]},{"from":"./dynamic-forms.component","export":["TdDynamicFormsComponent"]},{"from":"./dynamic-elements/dynamic-input/dynamic-input.component","export":["TdDynamicInputComponent"]},{"from":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","export":["TdDynamicTextareaComponent"]},{"from":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","export":["TdDynamicSlideToggleComponent"]},{"from":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","export":["TdDynamicCheckboxComponent"]},{"from":"./dynamic-elements/dynamic-slider/dynamic-slider.component","export":["TdDynamicSliderComponent"]},{"from":"./dynamic-elements/dynamic-select/dynamic-select.component","export":["TdDynamicSelectComponent"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./dynamic-forms.module","export":["CovalentDynamicFormsModule"]},{"from":"./services/dynamic-forms.service","export":["ITdDynamicElementConfig","TdDynamicType","TdDynamicElement","DYNAMIC_ELEMENT_NAME_REGEX"]},{"from":"./dynamic-element.component","export":["TdDynamicElementComponent"]},{"from":"./dynamic-forms.component","export":["TdDynamicFormsComponent"]},{"from":"./dynamic-elements/dynamic-input/dynamic-input.component","export":["TdDynamicInputComponent"]},{"from":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","export":["TdDynamicTextareaComponent"]},{"from":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","export":["TdDynamicSlideToggleComponent"]},{"from":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","export":["TdDynamicCheckboxComponent"]},{"from":"./dynamic-elements/dynamic-slider/dynamic-slider.component","export":["TdDynamicSliderComponent"]},{"from":"./dynamic-elements/dynamic-select/dynamic-select.component","export":["TdDynamicSelectComponent"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./dynamic-forms.module","export":["CovalentDynamicFormsModule"]},{"from":"./services/dynamic-forms.service","export":["ITdDynamicElementConfig","TdDynamicType","ITdDynamicElementValidator","TdDynamicElement","DYNAMIC_ELEMENT_NAME_REGEX"]},{"from":"./dynamic-element.component","export":["TdDynamicElementComponent","TdDynamicFormsErrorTemplate"]},{"from":"./dynamic-forms.component","export":["TdDynamicFormsComponent"]},{"from":"./dynamic-elements/dynamic-input/dynamic-input.component","export":["TdDynamicInputComponent"]},{"from":"./dynamic-elements/dynamic-file-input/dynamic-file-input.component","export":["TdDynamicFileInputComponent"]},{"from":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","export":["TdDynamicTextareaComponent"]},{"from":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","export":["TdDynamicSlideToggleComponent"]},{"from":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","export":["TdDynamicCheckboxComponent"]},{"from":"./dynamic-elements/dynamic-slider/dynamic-slider.component","export":["TdDynamicSliderComponent"]},{"from":"./dynamic-elements/dynamic-select/dynamic-select.component","export":["TdDynamicSelectComponent"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./dynamic-forms.module","export":["CovalentDynamicFormsModule"]},{"from":"./services/dynamic-forms.service","export":["ITdDynamicElementConfig","TdDynamicType","ITdDynamicElementValidator","TdDynamicElement","DYNAMIC_ELEMENT_NAME_REGEX"]},{"from":"./dynamic-element.component","export":["TdDynamicElementComponent","TdDynamicFormsErrorTemplate"]},{"from":"./dynamic-forms.component","export":["TdDynamicFormsComponent"]},{"from":"./dynamic-elements/dynamic-input/dynamic-input.component","export":["TdDynamicInputComponent"]},{"from":"./dynamic-elements/dynamic-file-input/dynamic-file-input.component","export":["TdDynamicFileInputComponent"]},{"from":"./dynamic-elements/dynamic-textarea/dynamic-textarea.component","export":["TdDynamicTextareaComponent"]},{"from":"./dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component","export":["TdDynamicSlideToggleComponent"]},{"from":"./dynamic-elements/dynamic-checkbox/dynamic-checkbox.component","export":["TdDynamicCheckboxComponent"]},{"from":"./dynamic-elements/dynamic-slider/dynamic-slider.component","export":["TdDynamicSliderComponent"]},{"from":"./dynamic-elements/dynamic-select/dynamic-select.component","export":["TdDynamicSelectComponent"]}]}]

package.json

 {
   "name": "@covalent/dynamic-forms",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "Teradata UI Platform Dynamic Forms Module",
-  "main": "./dynamic-forms.umd.js",
+  "main": "./bundles/dynamic-forms.umd.js",
   "module": "./index.js",
@@ -17,6 +17,2 @@ "typings": "./index.d.ts",
   },
-  "engines": {
-    "node": ">=6.9",
-    "npm": ">= 3"
-  },
   "repository": {
@@ -41,4 +37,4 @@ "type": "git",
   "dependencies": {
-    "@covalent/core": "1.0.0-beta.6"
+    "@covalent/core": "1.0.0-beta.7"
   }
 }

README.md

@@ -8,3 +8,3 @@ # td-dynamic-forms
 | Name | Type | Description |
-| --- | --- | --- |
+| --- | --- | 650--- |
 | `elements?` | `ITdDynamicElementConfig[]` | JS Object that will render the elements depending on its config. [name] property is required.
@@ -16,2 +16,3 @@ | `form` | `get(): FormGroup` | Getter property for dynamic [FormGroup].
 | `controls` | `get(): {[key: string]: AbstractControl}` | Getter property for [controls] of dynamic [FormGroup].
+| `refresh` | `function` |  Refreshes the form and rerenders all validator/element modifications.
 
@@ -49,4 +50,7 @@
   max?: any;
+  minLength?: string;
+  maxLength?: string;
   selections?: any[];
   default?: any;
+  validators?: ITdDynamicElementValidator[];
 }
@@ -59,4 +63,15 @@ ```
 <td-dynamic-forms [elements]="elements">
+  <ng-template let-element ngFor [ngForOf]="elements">
+    <ng-template let-control="control" [tdDynamicFormsError]="element.name">
+      <span *ngIf="control.touched || !control.pristine">
+        <span *ngIf="control.hasError('required')">Required</span>
+        <span *ngIf="control.hasError('min')">Min value: {{element.min}}</span>
+        <span *ngIf="control.hasError('max')">Max value: {{element.max}}</span>
+        <span *ngIf="control.hasError('minlength')">Min length value: {{element.minLength}}</span>
+        <span *ngIf="control.hasError('maxlength')">Max length value: {{element.minLength}}</span>
+      </span>
+    </ng-template>
+  </ng-template>
 </td-dynamic-forms>
- ```
+```
 
@@ -73,2 +88,13 @@ ```typescript
   }, {
+    name: 'textLength',
+    label: 'Text Length',
+    type: TdDynamicElement.Input,
+    minLength: 4,
+    maxLength: 12,
+  }, {
+    name: 'number',
+    type: TdDynamicType.Number,
+    min: 10,
+    max: 80,
+  }, {
     name: 'slider',
@@ -88,4 +114,8 @@ label: 'Label',
     default: 'A',
+  }, {
+    name: 'file-input',
+    label: 'Label',
+    type: TdDynamicElement.FileInput,
   }];
 }
 ```

services/dynamic-forms.service.d.ts

@@ -17,3 +17,7 @@ import { Provider } from '@angular/core';
     Select,
+    FileInput,
 }
+export interface ITdDynamicElementValidator {
+    validator: ValidatorFn;
+}
 export interface ITdDynamicElementConfig {
@@ -26,4 +30,11 @@ label?: string;
     max?: any;
-    selections?: any[];
+    minLength?: any;
+    maxLength?: any;
+    selections?: string[] | {
+        value: any;
+        label: string;
+    }[];
     default?: any;
+    flex?: number;
+    validators?: ITdDynamicElementValidator[];
 }
@@ -43,7 +54,2 @@ export declare const DYNAMIC_ELEMENT_NAME_REGEX: RegExp;
     /**
-     * Gets default flex for element depending on [TdDynamicElement | TdDynamicType].
-     * Throws error if it does not exists or not supported.
-     */
-    getDefaultElementFlex(element: TdDynamicElement | TdDynamicType): any;
-    /**
      * Creates form control for element depending [ITdDynamicElementConfig] properties.
@@ -50,0 +56,0 @@ */

services/dynamic-forms.service.js

@@ -1,10 +0,6 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import * as tslib_1 from "tslib";
 import { Injectable, SkipSelf, Optional } from '@angular/core';
 import { Validators, FormControl } from '@angular/forms';
 import { TdDynamicInputComponent } from '../dynamic-elements/dynamic-input/dynamic-input.component';
+import { TdDynamicFileInputComponent } from '../dynamic-elements/dynamic-file-input/dynamic-file-input.component';
 import { TdDynamicTextareaComponent } from '../dynamic-elements/dynamic-textarea/dynamic-textarea.component';
@@ -31,5 +27,6 @@ import { TdDynamicSlideToggleComponent } from '../dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component';
     TdDynamicElement[TdDynamicElement["Select"] = 'select'] = "Select";
+    TdDynamicElement[TdDynamicElement["FileInput"] = 'file-input'] = "FileInput";
 })(TdDynamicElement || (TdDynamicElement = {}));
 export var DYNAMIC_ELEMENT_NAME_REGEX = /^[a-zA-Z]+[a-zA-Z0-9-_]*$/;
-var TdDynamicFormsService = (function () {
+var TdDynamicFormsService = /** @class */ (function () {
     function TdDynamicFormsService() {
@@ -69,2 +66,4 @@ }
                 return TdDynamicSelectComponent;
+            case TdDynamicElement.FileInput:
+                return TdDynamicFileInputComponent;
             default:
@@ -75,26 +74,2 @@ throw new Error("Error: type " + element + " does not exist or not supported.");
     /**
-     * Gets default flex for element depending on [TdDynamicElement | TdDynamicType].
-     * Throws error if it does not exists or not supported.
-     */
-    TdDynamicFormsService.prototype.getDefaultElementFlex = function (element) {
-        switch (element) {
-            case TdDynamicType.Text:
-            case TdDynamicType.Number:
-            case TdDynamicElement.Slider:
-            case TdDynamicElement.Input:
-            case TdDynamicElement.Password:
-            case TdDynamicType.Array:
-            case TdDynamicElement.Select:
-                return 45;
-            case TdDynamicElement.Textarea:
-                return 95;
-            case TdDynamicType.Boolean:
-            case TdDynamicElement.Checkbox:
-            case TdDynamicElement.SlideToggle:
-                return 20;
-            default:
-                throw new Error("Error: type " + element + " does not exist or not supported.");
-        }
-    };
-    /**
      * Creates form control for element depending [ITdDynamicElementConfig] properties.
@@ -120,9 +95,21 @@ */
         }
+        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(function (validatorConfig) {
+                validator = Validators.compose([validator, validatorConfig.validator]);
+            });
+        }
         return validator;
     };
+    TdDynamicFormsService = tslib_1.__decorate([
+        Injectable()
+    ], TdDynamicFormsService);
     return TdDynamicFormsService;
 }());
-TdDynamicFormsService = __decorate([
-    Injectable()
-], TdDynamicFormsService);
 export { TdDynamicFormsService };
@@ -129,0 +116,0 @@ export function DYNAMIC_FORMS_PROVIDER_FACTORY(parent) {

services/dynamic-forms.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TdDynamicType":{"Text":"text","Boolean":"boolean","Number":"number","Array":"array"},"TdDynamicElement":{"Input":"input","Password":"password","Textarea":"textarea","Slider":"slider","SlideToggle":"slide-toggle","Checkbox":"checkbox","Select":"select"},"ITdDynamicElementConfig":{"__symbolic":"interface"},"DYNAMIC_ELEMENT_NAME_REGEX":{"__symbolic":"error","message":"Expression form not supported","line":38,"character":50},"TdDynamicFormsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"validateDynamicElementName":[{"__symbolic":"method"}],"getDynamicElement":[{"__symbolic":"method"}],"getDefaultElementFlex":[{"__symbolic":"method"}],"createFormControl":[{"__symbolic":"method"}],"createValidators":[{"__symbolic":"method"}]}},"DYNAMIC_FORMS_PROVIDER_FACTORY":{"__symbolic":"function","parameters":["parent"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"parent"},"right":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TdDynamicFormsService"}}}},"DYNAMIC_FORMS_PROVIDER":{"provide":{"__symbolic":"reference","name":"TdDynamicFormsService"},"deps":[[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}},{"__symbolic":"reference","name":"TdDynamicFormsService"}]],"useFactory":{"__symbolic":"reference","name":"DYNAMIC_FORMS_PROVIDER_FACTORY"}}}},{"__symbolic":"module","version":1,"metadata":{"TdDynamicType":{"Text":"text","Boolean":"boolean","Number":"number","Array":"array"},"TdDynamicElement":{"Input":"input","Password":"password","Textarea":"textarea","Slider":"slider","SlideToggle":"slide-toggle","Checkbox":"checkbox","Select":"select"},"ITdDynamicElementConfig":{"__symbolic":"interface"},"DYNAMIC_ELEMENT_NAME_REGEX":{"__symbolic":"error","message":"Expression form not supported","line":38,"character":50},"TdDynamicFormsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"validateDynamicElementName":[{"__symbolic":"method"}],"getDynamicElement":[{"__symbolic":"method"}],"getDefaultElementFlex":[{"__symbolic":"method"}],"createFormControl":[{"__symbolic":"method"}],"createValidators":[{"__symbolic":"method"}]}},"DYNAMIC_FORMS_PROVIDER_FACTORY":{"__symbolic":"function","parameters":["parent"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"parent"},"right":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TdDynamicFormsService"}}}},"DYNAMIC_FORMS_PROVIDER":{"provide":{"__symbolic":"reference","name":"TdDynamicFormsService"},"deps":[[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}},{"__symbolic":"reference","name":"TdDynamicFormsService"}]],"useFactory":{"__symbolic":"reference","name":"DYNAMIC_FORMS_PROVIDER_FACTORY"}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"TdDynamicType":{"Text":"text","Boolean":"boolean","Number":"number","Array":"array"},"TdDynamicElement":{"Input":"input","Password":"password","Textarea":"textarea","Slider":"slider","SlideToggle":"slide-toggle","Checkbox":"checkbox","Select":"select","FileInput":"file-input"},"ITdDynamicElementValidator":{"__symbolic":"interface"},"ITdDynamicElementConfig":{"__symbolic":"interface"},"DYNAMIC_ELEMENT_NAME_REGEX":{"__symbolic":"error","message":"Expression form not supported","line":48,"character":50},"TdDynamicFormsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"validateDynamicElementName":[{"__symbolic":"method"}],"getDynamicElement":[{"__symbolic":"method"}],"createFormControl":[{"__symbolic":"method"}],"createValidators":[{"__symbolic":"method"}]}},"DYNAMIC_FORMS_PROVIDER_FACTORY":{"__symbolic":"function","parameters":["parent"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"parent"},"right":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TdDynamicFormsService"}}}},"DYNAMIC_FORMS_PROVIDER":{"provide":{"__symbolic":"reference","name":"TdDynamicFormsService"},"deps":[[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}},{"__symbolic":"reference","name":"TdDynamicFormsService"}]],"useFactory":{"__symbolic":"reference","name":"DYNAMIC_FORMS_PROVIDER_FACTORY"}}}},{"__symbolic":"module","version":1,"metadata":{"TdDynamicType":{"Text":"text","Boolean":"boolean","Number":"number","Array":"array"},"TdDynamicElement":{"Input":"input","Password":"password","Textarea":"textarea","Slider":"slider","SlideToggle":"slide-toggle","Checkbox":"checkbox","Select":"select","FileInput":"file-input"},"ITdDynamicElementValidator":{"__symbolic":"interface"},"ITdDynamicElementConfig":{"__symbolic":"interface"},"DYNAMIC_ELEMENT_NAME_REGEX":{"__symbolic":"error","message":"Expression form not supported","line":48,"character":50},"TdDynamicFormsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"validateDynamicElementName":[{"__symbolic":"method"}],"getDynamicElement":[{"__symbolic":"method"}],"createFormControl":[{"__symbolic":"method"}],"createValidators":[{"__symbolic":"method"}]}},"DYNAMIC_FORMS_PROVIDER_FACTORY":{"__symbolic":"function","parameters":["parent"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"parent"},"right":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TdDynamicFormsService"}}}},"DYNAMIC_FORMS_PROVIDER":{"provide":{"__symbolic":"reference","name":"TdDynamicFormsService"},"deps":[[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}},{"__symbolic":"reference","name":"TdDynamicFormsService"}]],"useFactory":{"__symbolic":"reference","name":"DYNAMIC_FORMS_PROVIDER_FACTORY"}}}}]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

296894

increased by79.58%

Number of package files

90

increased by25%

Lines of code

2046

increased by8.71%

Number of lines in readme file

116

increased by34.88%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@covalent/core@1.0.0-beta.7(transitive)

• - Removed@covalent/core@1.0.0-beta.6(transitive)

• Updated@covalent/core@1.0.0-beta.7