model-form/bundles/model-form.umd.js

Dynamic Form Builder for Anuglar 5 and the WAR Framework

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms'], factory) :
    (factory((global.ng = global.ng || {}, global.ng.modelForm = global.ng.modelForm || {}),global.ng.core,global.ng.common,global.ng.forms));
}(this, (function (exports,_angular_core,_angular_common,_angular_forms) { 'use strict';

var InputComponent = (function () {
    function InputComponent() {
    }
    InputComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-input',
                    template: "\n  <div class=\"dynamic-field form-input form-group\" [formGroup]=\"group\">\n    <label>{{map.name}}</label>\n    <input type=\"text\" [formControlName]=\"map.name\" />\n  </div>\n  ",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    InputComponent.ctorParameters = function () { return []; };
    return InputComponent;
}());

var EmailComponent = (function () {
    function EmailComponent() {
    }
    EmailComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-email',
                    template: "\n  <div class=\"dynamic-field form-input form-group\" [formGroup]=\"group\">\n    <label>{{map.name}}</label>\n    <input type=\"text\" [formControlName]=\"map.name\" />\n  </div>\n  ",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    EmailComponent.ctorParameters = function () { return []; };
    return EmailComponent;
}());

var NumberComponent = (function () {
    function NumberComponent() {
    }
    NumberComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-number',
                    template: "\n  <div class=\"dynamic-field form-input form-group\" [formGroup]=\"group\">\n    <label>{{map.name}}</label>\n    <input type=\"text\" [formControlName]=\"map.name\" />\n  </div>\n  ",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    NumberComponent.ctorParameters = function () { return []; };
    return NumberComponent;
}());

var SwitchComponent = (function () {
    function SwitchComponent() {
    }
    SwitchComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-switch',
                    template: "\n  <div class=\"dynamic-field form-input form-group\" [formGroup]=\"group\">\n    <label>{{map.name}}</label>\n    <input type=\"text\" [formControlName]=\"map.name\" />\n  </div>\n  ",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    SwitchComponent.ctorParameters = function () { return []; };
    return SwitchComponent;
}());

var TextComponent = (function () {
    function TextComponent() {
    }
    TextComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-text',
                    template: "\n  <div class=\"dynamic-field form-input form-group\" [formGroup]=\"group\">\n    <label>{{map.name}}</label>\n    <input type=\"text\" [formControlName]=\"map.name\" />\n  </div>\n  ",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    TextComponent.ctorParameters = function () { return []; };
    return TextComponent;
}());

/** Form Fields **/
var components = {
    string: InputComponent,
    text: TextComponent,
    integer: NumberComponent,
    date: InputComponent,
    array: InputComponent,
    bool: SwitchComponent,
    email: EmailComponent,
    json: TextComponent
};
var ModelFieldDirective = (function () {
    function ModelFieldDirective(resolver, container) {
        this.resolver = resolver;
        this.container = container;
    }
    ModelFieldDirective.prototype.ngOnInit = function () {
        var comp = components[this.map.type];
        var factory = this.resolver.resolveComponentFactory(comp);
        this.component = this.container.createComponent(factory);
        this.component.instance.map = this.map;
        this.component.instance.model = this.model;
        this.component.instance.group = this.group;
    };
    ModelFieldDirective.decorators = [
        { type: _angular_core.Directive, args: [{
                    selector: '[modelField]'
                },] },
    ];
    /** @nocollapse */
    ModelFieldDirective.ctorParameters = function () { return [
        { type: _angular_core.ComponentFactoryResolver, },
        { type: _angular_core.ViewContainerRef, },
    ]; };
    ModelFieldDirective.propDecorators = {
        "map": [{ type: _angular_core.Input },],
        "model": [{ type: _angular_core.Input },],
        "group": [{ type: _angular_core.Input },],
    };
    return ModelFieldDirective;
}());

var ModelFormComponent = (function () {
    function ModelFormComponent(fb) {
        this.fb = fb;
        this.map = [];
        this.submitted = new _angular_core.EventEmitter();
    }
    ModelFormComponent.prototype.ngOnInit = function () { this.form = this.createGroup(); };
    ModelFormComponent.prototype.createGroup = function () {
        var _this = this;
        var group = this.fb.group({});
        this.map.forEach(function (c) { return group.addControl(c.name, _this.fb.control('')); });
        return group;
    };
    ModelFormComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-form',
                    template: "\n\t\t<form class=\"model-form compact\" [formGroup]=\"form\" (ngSubmit)=\"submitted.emit(form.value)\">\n\t\t\t<section class=\"form-block\">\n\t\t\t\t<ng-container modelField></ng-container>\n\t\t\t</section>\n\t\t</form>\n\t",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    ModelFormComponent.ctorParameters = function () { return [
        { type: _angular_forms.FormBuilder, },
    ]; };
    ModelFormComponent.propDecorators = {
        "map": [{ type: _angular_core.Input },],
        "model": [{ type: _angular_core.Input },],
        "submitted": [{ type: _angular_core.Output },],
    };
    return ModelFormComponent;
}());

var RadioComponent = (function () {
    function RadioComponent() {
    }
    RadioComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-radio',
                    template: "\n  <div class=\"dynamic-field form-input form-group\" [formGroup]=\"group\">\n    <label>{{map.name}}</label>\n    <input type=\"text\" [formControlName]=\"map.name\" />\n  </div>\n  ",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    RadioComponent.ctorParameters = function () { return []; };
    return RadioComponent;
}());

var SelectComponent = (function () {
    function SelectComponent() {
    }
    SelectComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-select',
                    template: "\n  <div class=\"dynamic-field form-input form-group\" [formGroup]=\"group\">\n    <label>{{map.name}}</label>\n    <input type=\"text\" [formControlName]=\"map.name\" />\n  </div>\n  ",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    SelectComponent.ctorParameters = function () { return []; };
    return SelectComponent;
}());

var SubmitComponent = (function () {
    function SubmitComponent() {
    }
    SubmitComponent.decorators = [
        { type: _angular_core.Component, args: [{
                    selector: 'model-submit',
                    template: "\n    <div class=\"dynamic-field form-button\" [formGroup]=\"group\">\n        <button class=\"btn btn-primary\" type=\"submit\">{{map.name}}</button>\n    </div>\n  ",
                    styles: []
                },] },
    ];
    /** @nocollapse */
    SubmitComponent.ctorParameters = function () { return []; };
    return SubmitComponent;
}());

/** Model Form **/
/** Form Fields **/
var ModelFormModule = (function () {
    function ModelFormModule() {
    }
    ModelFormModule.decorators = [
        { type: _angular_core.NgModule, args: [{
                    imports: [
                        _angular_common.CommonModule,
                        _angular_forms.ReactiveFormsModule
                    ],
                    exports: [
                        ModelFormComponent
                    ],
                    declarations: [
                        ModelFormComponent,
                        ModelFieldDirective,
                        InputComponent,
                        EmailComponent,
                        NumberComponent,
                        RadioComponent,
                        SelectComponent,
                        SubmitComponent,
                        SwitchComponent,
                        TextComponent
                    ],
                    entryComponents: [
                        InputComponent,
                        EmailComponent,
                        NumberComponent,
                        RadioComponent,
                        SelectComponent,
                        SubmitComponent,
                        SwitchComponent,
                        TextComponent
                    ]
                },] },
    ];
    /** @nocollapse */
    ModelFormModule.ctorParameters = function () { return []; };
    return ModelFormModule;
}());

/** Model Form **/

/**
 * @module
 * @description
 * Entry point for all public APIs of the Angular Module
 */

exports.ModelFormModule = ModelFormModule;
exports.ModelFieldDirective = ModelFieldDirective;
exports.ModelFormComponent = ModelFormComponent;
exports.InputComponent = InputComponent;
exports.EmailComponent = EmailComponent;
exports.NumberComponent = NumberComponent;
exports.RadioComponent = RadioComponent;
exports.SelectComponent = SelectComponent;
exports.SubmitComponent = SubmitComponent;
exports.SwitchComponent = SwitchComponent;
exports.TextComponent = TextComponent;

Object.defineProperty(exports, '__esModule', { value: true });

})));