(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/forms'), require('@angular/common')) :
    typeof define === 'function' && define.amd ? define('ngx-config-form', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/forms', '@angular/common'], factory) :
    (global = global || self, factory(global['ngx-config-form'] = {}, global.ng.core, global.rxjs, global.rxjs.operators, global.ng.forms, global.ng.common));
}(this, function (exports, core, rxjs, operators, forms, common) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    var extendStatics = function(d, b) {
        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 extendStatics(d, b);
    };

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    function __awaiter(thisArg, _arguments, P, generator) {
        return new (P || (P = Promise))(function (resolve, reject) {
            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
            step((generator = generator.apply(thisArg, _arguments || [])).next());
        });
    }

    function __generator(thisArg, body) {
        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
        function verb(n) { return function (v) { return step([n, v]); }; }
        function step(op) {
            if (f) throw new TypeError("Generator is already executing.");
            while (_) try {
                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
                if (y = 0, t) op = [op[0] & 2, t.value];
                switch (op[0]) {
                    case 0: case 1: t = op; break;
                    case 4: _.label++; return { value: op[1], done: false };
                    case 5: _.label++; y = op[1]; op = [0]; continue;
                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
                    default:
                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                        if (t[2]) _.ops.pop();
                        _.trys.pop(); continue;
                }
                op = body.call(thisArg, _);
            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
        }
    }

    function __values(o) {
        var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
        if (m) return m.call(o);
        return {
            next: function () {
                if (o && i >= o.length) o = void 0;
                return { value: o && o[i++], done: !o };
            }
        };
    }

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /**
     * @abstract
     */
    var BaseInput = /** @class */ (function () {
        function BaseInput() {
            this.isShowErrorMsg = true;
            // private sbObs: Subscription[] = [];
            this.sbObs = new rxjs.Subscription();
            this.ObjectUtil = Object;
        }
        Object.defineProperty(BaseInput.prototype, "cfForm", {
            get: /**
             * @return {?}
             */
            function () {
                return this._cfForm;
            },
            set: /**
             * @param {?} v
             * @return {?}
             */
            function (v) {
                this._cfForm = v;
                this.cfFormSetting = v.cfFormSetting;
                this.cfFormGroup = v.cfFormGroup;
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        BaseInput.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            this.groupElem = this.cfFormGroup.get(this.propName);
            this.elem = this.cfFormGroup.get([this.propName, this.cfFormSetting[this.propName].items[0].name]);
            this.elemValidators = this.cfFormSetting[this.propName].items[0].validators;
            this.setNotify();
        };
        /**
         * @return {?}
         */
        BaseInput.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            this.sbObs.unsubscribe();
        };
        /**
         * @private
         * @return {?}
         */
        BaseInput.prototype.setNotify = /**
         * @private
         * @return {?}
         */
        function () {
            var _this = this;
            // set value
            this.sbObs.add(this.elem.statusChanges
                .pipe(operators.filter((/**
             * @param {?} a
             * @return {?}
             */
            function (a) { return a === 'VALID'; }))).subscribe((/**
             * @param {?} a
             * @return {?}
             */
            function (a) {
                _this.cfForm.notifyValueChange(_this.propName, _this.elem.value);
            })));
            // send error message
            this.sbObs.add(this.elem.statusChanges
                .subscribe((/**
             * @param {?} a
             * @return {?}
             */
            function (a) {
                var e_1, _a;
                /** @type {?} */
                var isValid = a === 'VALID';
                /** @type {?} */
                var vKey = _this.propName + "_" + _this.cfFormSetting[_this.propName].items[0].name;
                if (!isValid && _this.elem.errors) {
                    /** @type {?} */
                    var errorInfo = {};
                    try {
                        for (var _b = __values(Object.keys(_this.elem.errors)), _c = _b.next(); !_c.done; _c = _b.next()) {
                            var key = _c.value;
                            errorInfo[key] = {
                                msg: _this.elemValidators[key].msg,
                                dirty: _this.elem.dirty,
                            };
                        }
                    }
                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
                    finally {
                        try {
                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                        }
                        finally { if (e_1) throw e_1.error; }
                    }
                    _this.cfForm.notifyValidatedInfo(vKey, false, errorInfo);
                }
                if (isValid) {
                    _this.cfForm.notifyValidatedInfo(vKey, true);
                }
            })));
        };
        BaseInput.propDecorators = {
            cfForm: [{ type: core.Input }],
            isShowErrorMsg: [{ type: core.Input }]
        };
        return BaseInput;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var Utils = /** @class */ (function () {
        function Utils() {
        }
        /**
         * @param {?} info
         * @return {?}
         */
        Utils.getErrorMsgs = /**
         * @param {?} info
         * @return {?}
         */
        function (info) {
            /** @type {?} */
            var obj = info['_errMsg_'];
            /** @type {?} */
            var arr = [];
            if (obj) {
                Object.keys(obj).forEach((/**
                 * @param {?} prop
                 * @return {?}
                 */
                function (prop) {
                    Object.keys(obj[prop]).forEach((/**
                     * @param {?} propChild
                     * @return {?}
                     */
                    function (propChild) {
                        /** @type {?} */
                        var item = obj[prop][propChild];
                        if (item.dirty) {
                            arr.push(item['msg']);
                        }
                    }));
                }));
            }
            return arr;
        };
        /**
         * @param {?} formGroup
         * @return {?}
         */
        Utils.validateAllFormFields = /**
         * @param {?} formGroup
         * @return {?}
         */
        function (formGroup) {
            Object.keys(formGroup.controls).forEach((/**
             * @param {?} field
             * @return {?}
             */
            function (field) {
                /** @type {?} */
                var control = formGroup.get(field);
                if (control instanceof forms.FormControl) {
                    control.markAsDirty({ onlySelf: true });
                    control.markAsTouched({ onlySelf: true });
                    control.updateValueAndValidity({ onlySelf: true, emitEvent: true });
                }
                else if (control instanceof forms.FormGroup) {
                    Utils.validateAllFormFields(control);
                }
            }));
        };
        return Utils;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var ButtonComponent = /** @class */ (function () {
        function ButtonComponent() {
            this.buttonClass = '';
            this.isDebug = 'N';
            this.type = 'button';
            this.isProcessing = false;
            this.click = new core.EventEmitter();
        }
        /**
         * @return {?}
         */
        ButtonComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
        };
        /**
         * @param {?} event
         * @return {?}
         */
        ButtonComponent.prototype.clickIt = /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            if (!this.cfFormGroup.dirty) {
                return;
            }
            if (this.cfFormGroup.invalid) {
                return;
            }
            if (this.isProcessing) {
                return;
            }
            this.click.emit(event);
        };
        ButtonComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-button',
                        template: "<button [type]=\"type\"\n  [class]=\"buttonClass\"\n  [ngClass]=\"{'disabled': !(cfFormGroup.dirty && cfFormGroup.valid) || isProcessing}\"\n  (click)=\"clickIt($event)\">\n  <ng-content></ng-content>\n</button>\n\n<div *ngIf=\"isDebug==='Y'\" class=\"tt\">\n  <hr />\n  cfFormGroup.value : {{cfFormGroup.value | json}} <br />\n  <hr />\n</div>\n",
                        styles: [".tt{background-color:gray;position:fixed;bottom:0;left:0;width:100%;z-index:10000}"]
                    }] }
        ];
        /** @nocollapse */
        ButtonComponent.ctorParameters = function () { return []; };
        ButtonComponent.propDecorators = {
            cfFormGroup: [{ type: core.Input }],
            buttonClass: [{ type: core.Input }],
            isDebug: [{ type: core.Input }],
            type: [{ type: core.Input }],
            isProcessing: [{ type: core.Input }],
            click: [{ type: core.Output }]
        };
        return ButtonComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /** @type {?} */
    var USER_PROFILE_VALUE_ACCESSOR = {
        provide: forms.NG_VALUE_ACCESSOR,
        useExisting: core.forwardRef((/**
         * @return {?}
         */
        function () { return FormComponent; })),
        multi: true
    };
    var FormComponent = /** @class */ (function () {
        function FormComponent(fb) {
            this.fb = fb;
            this.isReady = false;
            this.errorPropName = '_errMsg_';
            this.autocomplete = 'off';
            this.cfFormSetting = {};
            this.formClass = '';
            this.isDebug = false;
            this.cfFormReady = new core.EventEmitter();
            this.data$ = new rxjs.BehaviorSubject(this.data);
        }
        /**
         * @return {?}
         */
        FormComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            this.initFormGroupSetting();
        };
        /**
         * @param {?} originObj
         * @return {?}
         */
        FormComponent.prototype.writeValue = /**
         * @param {?} originObj
         * @return {?}
         */
        function (originObj) {
            if (!originObj) {
                return;
            }
            this.data = originObj;
            this.setFormGroupValue();
            this.setReady();
        };
        /**
         * @private
         * @return {?}
         */
        FormComponent.prototype.setReady = /**
         * @private
         * @return {?}
         */
        function () {
            this.isReady = true;
            this.cfFormReady.emit();
        };
        /**
         * @param {?} fn
         * @return {?}
         */
        FormComponent.prototype.registerOnChange = /**
         * @param {?} fn
         * @return {?}
         */
        function (fn) {
            this.onChange = fn;
        };
        /**
         * @param {?} fn
         * @return {?}
         */
        FormComponent.prototype.registerOnTouched = /**
         * @param {?} fn
         * @return {?}
         */
        function (fn) {
            this.onTouched = fn;
        };
        /**
         * @param {?} isDisabled
         * @return {?}
         */
        FormComponent.prototype.setDisabledState = /**
         * @param {?} isDisabled
         * @return {?}
         */
        function (isDisabled) {
        };
        /**
         * @param {?} key
         * @param {?} value
         * @return {?}
         */
        FormComponent.prototype.notifyValueChange = /**
         * @param {?} key
         * @param {?} value
         * @return {?}
         */
        function (key, value) {
            if (!this.onChange) {
                return;
            }
            /** @type {?} */
            var v = value;
            /** @type {?} */
            var setting = this.cfFormSetting[key];
            if (setting.converter) {
                v = setting.converter.from(value);
            }
            this.data[key] = v;
            this.data$.next(this.data);
            this.onChange(this.data);
        };
        /**
         * @param {?} key
         * @param {?} isValid
         * @param {?=} info
         * @return {?}
         */
        FormComponent.prototype.notifyValidatedInfo = /**
         * @param {?} key
         * @param {?} isValid
         * @param {?=} info
         * @return {?}
         */
        function (key, isValid, info) {
            if (!this.onChange) {
                return;
            }
            if (isValid) {
                /** @type {?} */
                var obj = this.data[this.errorPropName] || {};
                delete obj[key];
                this.data[this.errorPropName] = obj;
            }
            else {
                /** @type {?} */
                var obj = this.data[this.errorPropName] || {};
                /** @type {?} */
                var oErrorObj = obj[key] || {};
                obj[key] = info;
                this.data[this.errorPropName] = obj;
            }
            this.onChange(this.data);
        };
        /**
         * @return {?}
         */
        FormComponent.prototype.onReady = /**
         * @return {?}
         */
        function () {
            return this.cfFormReady;
        };
        /**
         * @private
         * @return {?}
         */
        FormComponent.prototype.initFormGroupSetting = /**
         * @private
         * @return {?}
         */
        function () {
            var e_1, _a, e_2, _b;
            try {
                for (var _c = __values(Object.keys(this.cfFormSetting)), _d = _c.next(); !_d.done; _d = _c.next()) {
                    var propName = _d.value;
                    /** @type {?} */
                    var setting = this.cfFormSetting[propName];
                    /** @type {?} */
                    var g = {};
                    try {
                        for (var _e = __values(setting.items), _f = _e.next(); !_f.done; _f = _e.next()) {
                            var item = _f.value;
                            /** @type {?} */
                            var itemValidatorInfo = this.getValidators(item.validators);
                            g[item.name] = ['', itemValidatorInfo.validatorFns, itemValidatorInfo.asyncValidatorFns];
                        }
                    }
                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
                    finally {
                        try {
                            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
                        }
                        finally { if (e_2) throw e_2.error; }
                    }
                    /** @type {?} */
                    var fbG = this.fb.group(g);
                    /** @type {?} */
                    var groupValidatorInfo = this.getValidators(setting.validators);
                    fbG.setValidators(groupValidatorInfo.validatorFns);
                    fbG.setAsyncValidators(groupValidatorInfo.asyncValidatorFns);
                    this.cfFormGroup.setControl(propName, fbG);
                }
            }
            catch (e_1_1) { e_1 = { error: e_1_1 }; }
            finally {
                try {
                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                }
                finally { if (e_1) throw e_1.error; }
            }
        };
        /**
         * @private
         * @return {?}
         */
        FormComponent.prototype.setFormGroupValue = /**
         * @private
         * @return {?}
         */
        function () {
            var e_3, _a, e_4, _b;
            try {
                for (var _c = __values(Object.keys(this.cfFormSetting)), _d = _c.next(); !_d.done; _d = _c.next()) {
                    var propName = _d.value;
                    /** @type {?} */
                    var setting = this.cfFormSetting[propName];
                    try {
                        for (var _e = __values(setting.items), _f = _e.next(); !_f.done; _f = _e.next()) {
                            var item = _f.value;
                            /** @type {?} */
                            var value = this.data[item.name] || item.value || '';
                            if (setting.converter) {
                                value = setting.converter.to(value);
                            }
                            /** @type {?} */
                            var c = this.cfFormGroup.get([propName, item.name]);
                            c.setValue(value);
                        }
                    }
                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
                    finally {
                        try {
                            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
                        }
                        finally { if (e_4) throw e_4.error; }
                    }
                }
            }
            catch (e_3_1) { e_3 = { error: e_3_1 }; }
            finally {
                try {
                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                }
                finally { if (e_3) throw e_3.error; }
            }
        };
        /**
         * @private
         * @param {?} validators
         * @return {?}
         */
        FormComponent.prototype.getValidators = /**
         * @private
         * @param {?} validators
         * @return {?}
         */
        function (validators) {
            var e_5, _a;
            /** @type {?} */
            var validatorFns = [];
            /** @type {?} */
            var asyncValidatorFns = [];
            try {
                for (var _b = __values(Object.keys(validators)), _c = _b.next(); !_c.done; _c = _b.next()) {
                    var key = _c.value;
                    /** @type {?} */
                    var v = validators[key];
                    if (v.isPromiseOrObservable) {
                        asyncValidatorFns.push((/** @type {?} */ (v.validator)));
                    }
                    else {
                        validatorFns.push((/** @type {?} */ (v.validator)));
                    }
                }
            }
            catch (e_5_1) { e_5 = { error: e_5_1 }; }
            finally {
                try {
                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                }
                finally { if (e_5) throw e_5.error; }
            }
            return { validatorFns: validatorFns, asyncValidatorFns: asyncValidatorFns };
        };
        FormComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-form',
                        template: "  <form *ngIf=\"isReady\"\n    [class]=\"formClass\" \n    [formGroup]=\"cfFormGroup\"\n    [autocomplete]=\"autocomplete\"\n    novalidate>\n\n    <ng-content></ng-content>\n\n    <!-- <div class=\"form-row\">\n        <div class=\"form-group col-sm-10\">\n          <a href=\"#\" class=\"btn btn-primary\" (click)=\"submit($event)\" [ngClass]=\"{'disabled': !(cfFormGroup.dirty && cfFormGroup.valid)}\">Submit</a>\n          <a href=\"#\" class=\"btn btn-danger\" (click)=\"delete($event)\" [ngClass]=\"{'d-none': id===0}\">Delete</a>\n          <a href=\"#\" class=\"btn btn-secondary\" (click)=\"goBack($event)\">Back</a>\n        </div>\n    </div> -->\n\n    <div *ngIf=\"isDebug\">\n       \n      <hr /> \n      cfFormGroup.value => {{cfFormGroup.value | json}} <br />\n      cfFormGroup.valid => {{cfFormGroup.valid | json}} <br />\n      cfFormGroup.touched  => {{cfFormGroup.touched | json}} <br />\n      cfFormGroup.dirty => {{cfFormGroup.dirty | json}}\n      <hr />\n\n    </div>\n\n  </form>\n\n\n\n\n\n  <!-- <form>\n    <div class=\"form-group row\">\n      <label for=\"inputEmail3\" class=\"col-sm-2 col-form-label\">Email</label>\n      <div class=\"col-sm-10\">\n        <input type=\"email\" class=\"form-control is-invalid\" id=\"inputEmail3\" placeholder=\"Email\">\n        <small id=\"emailHelp\" class=\"form-text text-muted\">We'll never share your email with anyone else.</small>\n        <small id=\"emailHelp\" class=\"form-text text-danger\">We'll never share your email with anyone else.</small>\n      </div>\n    </div>\n    <div class=\"form-group row\">\n      <label for=\"inputPassword3\" class=\"col-sm-2 col-form-label\">Password</label>\n      <div class=\"col-sm-10\">\n        <input type=\"password\" class=\"form-control\" id=\"inputPassword3\" placeholder=\"Password\">\n      </div>\n    </div>\n    \n    <fieldset class=\"form-group\">\n      <div class=\"row\">\n        <legend class=\"col-form-legend col-sm-2\">Radios</legend>\n        <div class=\"col-sm-10\">\n          <div class=\"form-check\">\n            <label class=\"form-check-label\">\n              <input class=\"form-check-input\" type=\"radio\" name=\"gridRadios\" id=\"gridRadios1\" value=\"option1\" checked> Option one is this and that&mdash;be sure to include why it's great\n            </label>\n          </div>\n          <div class=\"form-check\">\n            <label class=\"form-check-label\">\n              <input class=\"form-check-input\" type=\"radio\" name=\"gridRadios\" id=\"gridRadios2\" value=\"option2\"> Option two can be something else and selecting it will deselect option one\n            </label>\n          </div>\n          <div class=\"form-check disabled\">\n            <label class=\"form-check-label\">\n              <input class=\"form-check-input\" type=\"radio\" name=\"gridRadios\" id=\"gridRadios3\" value=\"option3\" disabled> Option three is disabled\n            </label>\n          </div>\n          <small id=\"emailHelp\" class=\"form-text text-muted\">We'll never share your email with anyone else.</small>\n          <small id=\"emailHelp\" class=\"form-text text-danger\">We'll never share your email with anyone else.</small>\n        </div>\n\n      </div>\n    </fieldset>\n\n    <div class=\"form-group row\">\n      <div class=\"col-sm-2\">Checkbox</div>\n      <div class=\"col-sm-10\">\n        <div class=\"form-check\">\n          <label class=\"form-check-label\">\n            <input class=\"form-check-input\" type=\"checkbox\"> Check me out\n          </label>\n        </div>\n        <div class=\"form-check\">\n          <label class=\"form-check-label\">\n            <input class=\"form-check-input\" type=\"checkbox\"> Check me out\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"form-group row\">\n      <div class=\"col-sm-2\">Example select</div>\n      <div class=\"col-sm-10\">\n        <select class=\"form-control is-invalid\" id=\"exampleFormControlSelect1\">\n          <option>1</option>\n          <option>2</option>\n          <option>3</option>\n          <option>4</option>\n          <option>5</option>\n        </select>\n        <small id=\"emailHelp\" class=\"form-text text-muted\">We'll never share your email with anyone else.</small>\n        <small id=\"emailHelp\" class=\"form-text text-danger\">We'll never share your email with anyone else.</small>\n      </div>\n    </div>\n    <div class=\"form-group row\">\n      <div class=\"col-sm-2\">Example multiple select</div>\n      <div class=\"col-sm-10\">\n        <select multiple class=\"form-control\" id=\"exampleFormControlSelect2\">\n          <option>1</option>\n          <option>2</option>\n          <option>3</option>\n          <option>4</option>\n          <option>5</option>\n        </select>\n        <small id=\"emailHelp\" class=\"form-text text-muted\">We'll never share your email with anyone else.</small>\n        <small id=\"emailHelp\" class=\"form-text text-danger\">We'll never share your email with anyone else.</small>\n      </div>\n    </div>\n    <div class=\"form-group row\">\n      <div class=\"col-sm-2\">Example textarea</div>\n      <div class=\"col-sm-10\">\n        <textarea class=\"form-control\" id=\"exampleFormControlTextarea1\" rows=\"5\"></textarea>\n        <small id=\"emailHelp\" class=\"form-text text-muted\">We'll never share your email with anyone else.</small>\n        <small id=\"emailHelp\" class=\"form-text text-danger\">We'll never share your email with anyone else.</small>\n      </div>\n    </div>\n\n    <div class=\"form-group row\">\n      <div class=\"col-sm-10\">\n        <a href=\"#\" class=\"btn btn-primary\">Submit</a>\n        <a href=\"#\" class=\"btn btn-secondary\">Reset</a>\n        <a href=\"#\" class=\"btn btn-secondary\" (click)=\"goBack($event)\">Back</a>\n      </div>\n    </div>\n\n\n  </form> -->\n",
                        providers: [USER_PROFILE_VALUE_ACCESSOR],
                        styles: [""]
                    }] }
        ];
        /** @nocollapse */
        FormComponent.ctorParameters = function () { return [
            { type: forms.FormBuilder }
        ]; };
        FormComponent.propDecorators = {
            autocomplete: [{ type: core.Input }],
            cfFormSetting: [{ type: core.Input }],
            cfFormGroup: [{ type: core.Input }],
            formClass: [{ type: core.Input }],
            isDebug: [{ type: core.Input }],
            cfFormReady: [{ type: core.Output }]
        };
        return FormComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var CheckboxComponent = /** @class */ (function (_super) {
        __extends(CheckboxComponent, _super);
        function CheckboxComponent() {
            var _this = _super.call(this) || this;
            _this.isMultiple = true;
            _this.result = [];
            return _this;
        }
        /**
         * @return {?}
         */
        CheckboxComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            return __awaiter(this, void 0, void 0, function () {
                var _this = this;
                return __generator(this, function (_a) {
                    _super.prototype.ngOnInit.call(this);
                    this.cfForm.onReady().subscribe((/**
                     * @return {?}
                     */
                    function () {
                        _this.setData();
                    }));
                    return [2 /*return*/];
                });
            });
        };
        /**
         * @return {?}
         */
        CheckboxComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnDestroy.call(this);
        };
        /**
         * @private
         * @return {?}
         */
        CheckboxComponent.prototype.setData = /**
         * @private
         * @return {?}
         */
        function () {
            if (this.elem.value) {
                this.result = this.elem.value.toString().split(',');
            }
            this.defaultValue = this.cfFormSetting[this.propName].items[0].value;
        };
        /**
         * @param {?} event
         * @param {?} cb
         * @param {?} value
         * @return {?}
         */
        CheckboxComponent.prototype.chagne = /**
         * @param {?} event
         * @param {?} cb
         * @param {?} value
         * @return {?}
         */
        function (event, cb, value) {
            event.preventDefault();
            event.stopPropagation();
            /** @type {?} */
            var index = this.result.indexOf(value);
            if (cb.checked && index === -1) {
                this.result.push(value);
            }
            if (!cb.checked && index !== -1) {
                this.result.splice(index, 1);
            }
            if (!this.isMultiple && cb.checked) {
                this.result = [];
                this.result.push(value);
            }
            if (this.result.length === 0) {
                this.result = this.defaultValue.split(',');
            }
            /** @type {?} */
            var v = this.result.filter((/**
             * @param {?} a
             * @return {?}
             */
            function (a) { return a; })).join(',');
            this.elem.setValue(v);
            this.elem.markAsDirty();
        };
        CheckboxComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-inputs-checkbox',
                        template: "<ng-container [formGroup]=\"cfFormGroup\">\n  <ng-container [formGroupName]=\"propName\">\n    <ng-container *ngFor=\"let item of cfFormSetting[propName].items\">\n      <ng-container *ngIf=\"{ \n        elem: cfFormGroup.get([propName, item.name]) \n      }; let info\">\n        <label [for]=\"item.name\" *ngIf=\"item.args['alias']\">{{item.args['alias']}}</label>\n        <div class=\"d-block cbList\">\n          <div class=\"form-check form-check-inline\" *ngFor=\"let c of item.args['options'];let i=index\">\n            <label class=\"form-check-label\">\n              <input type=\"checkbox\"\n                class=\"form-check-input\" \n                name=\"{{item.name}}-{{i}}\"\n                #cb\n                [checked]=\"info.elem.value && info.elem.value.indexOf(c.value)!==-1\"\n                (change)=\"chagne($event, cb, c.value)\">\n                {{c.text}}\n            </label>\n          </div>\n        </div>\n        <input type=\"hidden\" [formControlName]=\"item.name\"/>\n\n        <small class=\"form-text text-muted\" *ngIf=\"item.args['murmur']\">\n          {{item.args['murmur']}}\n        </small>\n        \n        <ng-container *ngIf=\"isShowErrorMsg && info.elem.dirty && info.elem.errors\">\n          <small class=\"form-text text-danger\" *ngFor=\"let vName of ObjectUtil.keys(info.elem.errors)\">\n            {{item.validators[vName].msg}}\n          </small>\n        </ng-container>\n\n        <!-- <hr />\n        item.args.options : {{item.args.options | json}} <br />\n        info.elem.dirty : {{ info.elem.dirty  | json }} <br />\n        info.elem.errors: {{ info.elem.errors | json }} <br />\n        info.elem.value: {{ info.elem.value | json }}\n        <hr /> -->\n\n      </ng-container>\n    </ng-container> \n  </ng-container>\n</ng-container>\n",
                        styles: [".cbList{margin-bottom:-.5rem}"]
                    }] }
        ];
        /** @nocollapse */
        CheckboxComponent.ctorParameters = function () { return []; };
        CheckboxComponent.propDecorators = {
            propName: [{ type: core.Input }],
            isMultiple: [{ type: core.Input }]
        };
        return CheckboxComponent;
    }(BaseInput));

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var ConfirmPasswordComponent = /** @class */ (function (_super) {
        __extends(ConfirmPasswordComponent, _super);
        function ConfirmPasswordComponent() {
            return _super.call(this) || this;
        }
        /**
         * @return {?}
         */
        ConfirmPasswordComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnInit.call(this);
            this.groupElemValidators = this.cfFormSetting[this.propName].validators;
            this.setComponentNotify();
        };
        /**
         * @return {?}
         */
        ConfirmPasswordComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnDestroy.call(this);
            this.ob.unsubscribe();
        };
        /**
         * @private
         * @return {?}
         */
        ConfirmPasswordComponent.prototype.setComponentNotify = /**
         * @private
         * @return {?}
         */
        function () {
            var _this = this;
            this.ob = this.groupElem.statusChanges
                .subscribe((/**
             * @param {?} a
             * @return {?}
             */
            function (a) {
                var e_1, _a;
                /** @type {?} */
                var isValid = a === 'VALID';
                /** @type {?} */
                var vKey = _this.propName + "_";
                if (!isValid && _this.groupElem.errors) {
                    /** @type {?} */
                    var errorObj = {};
                    try {
                        for (var _b = __values(Object.keys(_this.groupElem.errors)), _c = _b.next(); !_c.done; _c = _b.next()) {
                            var key = _c.value;
                            errorObj[key] = {
                                msg: _this.groupElemValidators[key].msg,
                                dirty: _this.groupElem.dirty,
                            };
                        }
                    }
                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
                    finally {
                        try {
                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                        }
                        finally { if (e_1) throw e_1.error; }
                    }
                    _this.cfForm.notifyValidatedInfo(vKey, false, errorObj);
                }
                if (isValid) {
                    _this.cfForm.notifyValidatedInfo(vKey, true);
                }
            }));
        };
        ConfirmPasswordComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-inputs-confirm-password',
                        template: "<ng-container [formGroup]=\"cfFormGroup\">\n  <ng-container [formGroupName]=\"propName\">\n    <ng-container *ngIf=\"{ \n      elem: cfFormGroup.get(propName) \n    }; let gInfo\">\n\n      <ng-container *ngFor=\"let item of cfFormSetting[propName].items\">\n        <ng-container *ngIf=\"{ \n          elem: cfFormGroup.get([propName, item.name]) \n        }; let info\">\n\n          <div class=\"form-group\">\n            <label [for]=\"item.name\" *ngIf=\"item.args['alias']\">{{item.args['alias']}}</label>\n            <input type=\"password\" \n              class=\"form-control\" \n              [formControlName]=\"item.name\"\n              [id]=\"item.name\"\n              [placeholder]=\"item.args['placeholder']\"\n              [ngClass]=\"{'is-invalid': info.elem.dirty && info.elem.errors && info.elem.invalid }\">\n              \n            <small class=\"form-text text-muted\" *ngIf=\"item.args['murmur']\">\n              {{item.args['murmur']}}\n            </small>\n\n            <ng-container *ngIf=\"info.elem.dirty && info.elem.errors && info.elem.invalid\">\n              <small class=\"form-text text-danger\" *ngFor=\"let vName of ObjectUtil.keys(info.elem.errors)\">\n                {{item.validators[vName].msg}}\n              </small>\n            </ng-container>\n\n          </div>\n\n          <!-- <hr />\n          info.elem.dirty : {{ info.elem.dirty  | json }} <br />\n          info.elem.errors: {{ info.elem.errors | json }} <br />\n          info.elem.value: {{ info.elem.value | json }}\n          <hr /> -->\n\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"isShowErrorMsg && gInfo.elem.dirty && gInfo.elem.errors && gInfo.elem.invalid\">\n        <small class=\"form-text text-danger\" *ngFor=\"let vName of ObjectUtil.keys(gInfo.elem.errors)\">\n          {{cfFormSetting[propName].validators[vName].msg}}\n        </small>\n      </ng-container>\n\n       <!-- <hr />\n        gInfo.elem.invalid: {{ gInfo.elem.invalid | json }} <br />\n        gInfo.elem.dirty: {{ gInfo.elem.dirty | json }} <br />\n        gInfo.elem.errors: {{ gInfo.elem.errors | json }} <br />\n        gInfo.elem.value: {{ gInfo.elem.value | json }}\n      <hr /> -->\n\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n\n",
                        styles: [""]
                    }] }
        ];
        /** @nocollapse */
        ConfirmPasswordComponent.ctorParameters = function () { return []; };
        ConfirmPasswordComponent.propDecorators = {
            propName: [{ type: core.Input }]
        };
        return ConfirmPasswordComponent;
    }(BaseInput));

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var HiddenComponent = /** @class */ (function (_super) {
        __extends(HiddenComponent, _super);
        function HiddenComponent() {
            return _super.call(this) || this;
        }
        /**
         * @return {?}
         */
        HiddenComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnInit.call(this);
        };
        /**
         * @return {?}
         */
        HiddenComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnDestroy.call(this);
        };
        HiddenComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-inputs-hidden',
                        template: "<ng-container [formGroup]=\"cfFormGroup\">\n  <ng-container [formGroupName]=\"propName\">\n    <ng-container *ngFor=\"let item of cfFormSetting[propName].items\">\n      <ng-container *ngIf=\"{ \n        elem: cfFormGroup.get([propName, item.name]) \n      }; let info\">\n        \n        <input type=\"hidden\" [formControlName]=\"item.name\" >\n\n        <!-- <small class=\"form-text text-muted\" *ngIf=\"item.args['murmur']\">\n          {{item.args['murmur']}}\n        </small> -->\n        \n        <ng-container *ngIf=\"isShowErrorMsg && info.elem.dirty && info.elem.errors\">\n          <small class=\"form-text text-danger\" *ngFor=\"let vName of ObjectUtil.keys(info.elem.errors)\">\n            {{item.validators[vName].msg}}\n          </small>\n        </ng-container>\n      \n        <!-- <hr />\n        info.elem.dirty : {{ info.elem.dirty  | json }} <br />\n        info.elem.errors: {{ info.elem.errors | json }} <br />\n        info.elem.value: {{ info.elem.value | json }}\n        <hr /> -->\n\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-container>",
                        styles: [""]
                    }] }
        ];
        /** @nocollapse */
        HiddenComponent.ctorParameters = function () { return []; };
        HiddenComponent.propDecorators = {
            propName: [{ type: core.Input }]
        };
        return HiddenComponent;
    }(BaseInput));

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var RadioComponent = /** @class */ (function (_super) {
        __extends(RadioComponent, _super);
        function RadioComponent() {
            return _super.call(this) || this;
        }
        /**
         * @return {?}
         */
        RadioComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnInit.call(this);
        };
        /**
         * @return {?}
         */
        RadioComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnDestroy.call(this);
        };
        RadioComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-inputs-radio',
                        template: "<ng-container [formGroup]=\"cfFormGroup\">\n  <ng-container [formGroupName]=\"propName\">\n    <ng-container *ngFor=\"let item of cfFormSetting[propName].items\">\n      <ng-container *ngIf=\"{ \n        elem: cfFormGroup.get([propName, item.name]) \n      }; let info\">\n\n        <label [for]=\"item.name\" *ngIf=\"item.args['alias']\">{{item.args['alias']}}</label>\n        <div class=\"d-block rl-list\">\n          <div class=\"form-check form-check-inline\" *ngFor=\"let c of item.args['options']\">\n            <label class=\"form-check-label\">\n              <input type=\"radio\"\n                class=\"form-check-input\" \n                name=\"{{item.name}}\"\n                value=\"{{c.value}}\"\n                [formControlName]=\"item.name\"\n                [checked]=\"(info.elem.value===c.value)\">\n                {{c.text}}\n            </label>\n          </div>\n        </div>\n\n        <small class=\"form-text text-muted\" *ngIf=\"item.args['murmur']\">\n          {{item.args['murmur']}}\n        </small>\n\n        <ng-container *ngIf=\"isShowErrorMsg && info.elem.dirty && info.elem.errors\">\n          <small class=\"form-text text-danger\" *ngFor=\"let vName of ObjectUtil.keys(info.elem.errors)\">\n            {{item.validators[vName].msg}}\n          </small>\n        </ng-container>\n\n        <!-- <hr />\n        info.elem.dirty : {{ info.elem.dirty  | json }} <br />\n        info.elem.errors: {{ info.elem.errors | json }} <br />\n        info.elem.value: {{ info.elem.value | json }}\n        <hr /> -->\n\n      </ng-container>\n    </ng-container> \n  </ng-container>\n</ng-container>",
                        styles: [".rl-list{margin-bottom:-.5rem}"]
                    }] }
        ];
        /** @nocollapse */
        RadioComponent.ctorParameters = function () { return []; };
        RadioComponent.propDecorators = {
            propName: [{ type: core.Input }]
        };
        return RadioComponent;
    }(BaseInput));

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var SelectComponent = /** @class */ (function (_super) {
        __extends(SelectComponent, _super);
        function SelectComponent() {
            return _super.call(this) || this;
        }
        /**
         * @return {?}
         */
        SelectComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnInit.call(this);
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnDestroy.call(this);
        };
        SelectComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-inputs-select',
                        template: "<ng-container [formGroup]=\"cfFormGroup\">\n  <ng-container [formGroupName]=\"propName\">\n    <ng-container *ngFor=\"let item of cfFormSetting[propName].items\">\n      <ng-container *ngIf=\"{ \n        elem: cfFormGroup.get([propName, item.name]) \n      }; let info\">\n        <label [for]=\"item.name\" *ngIf=\"item.args['alias']\">{{item.args['alias']}}</label>\n        <select \n          [class]=\"inputClass\" \n          [id]=\"item.name\"\n          [formControlName]=\"item.name\"\n          [ngClass]=\"{ 'is-invalid': info.elem.dirty && info.elem.errors }\">\n          <option *ngFor=\"let c of item.args['options']\" [value]=\"c.value\">{{c.text}}</option>\n        </select>\n\n        <small class=\"form-text text-muted\" *ngIf=\"item.args['murmur']\">\n          {{item.args['murmur']}}\n        </small>\n\n        <ng-container *ngIf=\"isShowErrorMsg && info.elem.dirty && info.elem.errors\">\n          <small class=\"form-text text-danger\" *ngFor=\"let vName of ObjectUtil.keys(info.elem.errors)\">\n            {{item.validators[vName].msg}}\n          </small>\n        </ng-container>\n\n        <!-- <hr />\n        info.elem.dirty : {{ info.elem.dirty  | json }} <br />\n        info.elem.errors: {{ info.elem.errors | json }} <br />\n        info.elem.value: {{ info.elem.value | json }}\n        <hr /> -->\n\n      </ng-container>\n    </ng-container> \n  </ng-container>\n</ng-container>",
                        styles: [""]
                    }] }
        ];
        /** @nocollapse */
        SelectComponent.ctorParameters = function () { return []; };
        SelectComponent.propDecorators = {
            propName: [{ type: core.Input }],
            inputClass: [{ type: core.Input }]
        };
        return SelectComponent;
    }(BaseInput));

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var TextComponent = /** @class */ (function (_super) {
        __extends(TextComponent, _super);
        function TextComponent() {
            var _this = _super.call(this) || this;
            _this.isReadOnly = false;
            _this.type = 'text';
            return _this;
        }
        /**
         * @return {?}
         */
        TextComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnInit.call(this);
        };
        /**
         * @return {?}
         */
        TextComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnDestroy.call(this);
        };
        TextComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-inputs-text',
                        template: "<ng-container [formGroup]=\"cfFormGroup\">\n  <ng-container [formGroupName]=\"propName\">\n    <ng-container *ngFor=\"let item of cfFormSetting[propName].items\">\n      <ng-container *ngIf=\"{ \n        elem: cfFormGroup.get([propName, item.name]) \n      }; let info\">\n        <label [for]=\"item.name\" *ngIf=\"item.args['alias']\">{{item.args['alias']}}</label>\n        <input \n          [type]=\"type\" \n          [class]=\"inputClass\" \n          [id]=\"item.name\" \n          [placeholder]=\"item.args['placeholder']\"\n          [formControlName]=\"item.name\" \n          [ngClass]=\"{ 'is-invalid': info.elem.dirty && info.elem.errors }\"\n          [readonly]=\"isReadOnly\"\n        >\n        <small class=\"form-text text-muted\" *ngIf=\"item.args['murmur']\">\n          {{item.args['murmur']}}\n        </small>\n        \n        <ng-container *ngIf=\"isShowErrorMsg && info.elem.dirty && info.elem.errors\">\n          <small class=\"form-text text-danger\" *ngFor=\"let vName of ObjectUtil.keys(info.elem.errors)\">\n            {{item.validators[vName].msg}}\n          </small>\n        </ng-container>\n\n          <!-- <hr />\n          errorKeys: {{ObjectUtil.keys(info.elem.errors || {})}} <br />\n          info.elem.dirty && info.elem.errors: {{(info.elem.dirty && info.elem.errors) | json}} <br />\n          info.elem.dirty : {{ info.elem.dirty  | json }} <br />\n          info.elem.errors: {{ info.elem.errors | json }} <br />\n          info.elem.value: {{ info.elem.value | json }}\n          <hr /> -->\n          \n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-container>",
                        styles: [""]
                    }] }
        ];
        /** @nocollapse */
        TextComponent.ctorParameters = function () { return []; };
        TextComponent.propDecorators = {
            isReadOnly: [{ type: core.Input }],
            type: [{ type: core.Input }],
            inputClass: [{ type: core.Input }],
            propName: [{ type: core.Input }]
        };
        return TextComponent;
    }(BaseInput));

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var TextareaComponent = /** @class */ (function (_super) {
        __extends(TextareaComponent, _super);
        function TextareaComponent() {
            var _this = _super.call(this) || this;
            _this.rows = 3;
            _this.isReadOnly = false;
            return _this;
        }
        /**
         * @return {?}
         */
        TextareaComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnInit.call(this);
        };
        /**
         * @return {?}
         */
        TextareaComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            _super.prototype.ngOnDestroy.call(this);
        };
        TextareaComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'cf-inputs-textarea',
                        template: "<ng-container [formGroup]=\"cfFormGroup\">\n  <ng-container [formGroupName]=\"propName\">\n    <ng-container *ngFor=\"let item of cfFormSetting[propName].items\">\n      <ng-container *ngIf=\"{ \n        elem: cfFormGroup.get([propName, item.name]) \n      }; let info\">\n        <label [for]=\"item.name\" *ngIf=\"item.args['alias']\">{{item.args['alias']}}</label>\n        <textarea\n          [class]=\"inputClass\"\n          [id]=\"item.name\" \n          [placeholder]=\"item.args['placeholder']\"\n          [formControlName]=\"item.name\" \n          [ngClass]=\"{ 'is-invalid': info.elem.dirty && info.elem.errors }\"\n          [readonly]=\"isReadOnly\"\n          [rows]=\"rows\"\n          ></textarea>\n        <small class=\"form-text text-muted\" *ngIf=\"item.args['murmur']\">\n          {{item.args['murmur']}}\n        </small>\n        \n        <ng-container *ngIf=\"isShowErrorMsg && info.elem.dirty && info.elem.errors\">\n          <small class=\"form-text text-danger\" *ngFor=\"let vName of ObjectUtil.keys(info.elem.errors)\">\n            {{item.validators[vName].msg}}\n          </small>\n        </ng-container>\n\n          <!-- <hr />\n          errorKeys: {{ObjectUtil.keys(info.elem.errors || {})}} <br />\n          info.elem.dirty && info.elem.errors: {{(info.elem.dirty && info.elem.errors) | json}} <br />\n          info.elem.dirty : {{ info.elem.dirty  | json }} <br />\n          info.elem.errors: {{ info.elem.errors | json }} <br />\n          info.elem.value: {{ info.elem.value | json }}\n          <hr /> -->\n          \n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-container>",
                        styles: [""]
                    }] }
        ];
        /** @nocollapse */
        TextareaComponent.ctorParameters = function () { return []; };
        TextareaComponent.propDecorators = {
            rows: [{ type: core.Input }],
            isReadOnly: [{ type: core.Input }],
            inputClass: [{ type: core.Input }],
            propName: [{ type: core.Input }]
        };
        return TextareaComponent;
    }(BaseInput));

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NgxConfigFormModule = /** @class */ (function () {
        function NgxConfigFormModule() {
        }
        NgxConfigFormModule.decorators = [
            { type: core.NgModule, args: [{
                        declarations: [
                            CheckboxComponent,
                            ConfirmPasswordComponent,
                            HiddenComponent,
                            RadioComponent,
                            SelectComponent,
                            TextComponent,
                            TextareaComponent,
                            ButtonComponent,
                            FormComponent
                        ],
                        imports: [
                            common.CommonModule,
                            forms.ReactiveFormsModule,
                            forms.FormsModule
                        ],
                        exports: [
                            CheckboxComponent,
                            ConfirmPasswordComponent,
                            HiddenComponent,
                            RadioComponent,
                            SelectComponent,
                            TextComponent,
                            TextareaComponent,
                            ButtonComponent,
                            FormComponent
                        ]
                    },] }
        ];
        return NgxConfigFormModule;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    // @dynamic
    var   
    // @dynamic
    CfValidators = /** @class */ (function () {
        function CfValidators() {
        }
        /**
         * @param {?} passwordName
         * @param {?} confirmPasswordName
         * @return {?}
         */
        CfValidators.confirmPassword = /**
         * @param {?} passwordName
         * @param {?} confirmPasswordName
         * @return {?}
         */
        function (passwordName, confirmPasswordName) {
            return (/**
             * @param {?} c
             * @return {?}
             */
            function (c) {
                if (!c.dirty) {
                    return null;
                }
                /** @type {?} */
                var password = c.get(passwordName);
                /** @type {?} */
                var confirmPassword = c.get(confirmPasswordName);
                if (password.value === confirmPassword.value) {
                    return null;
                }
                /** @type {?} */
                var errObj = { confirmPassword: true };
                return errObj;
            });
        };
        /**
         * @param {...?} childrenNames
         * @return {?}
         */
        CfValidators.groupRequired = /**
         * @param {...?} childrenNames
         * @return {?}
         */
        function () {
            var childrenNames = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                childrenNames[_i] = arguments[_i];
            }
            return (/**
             * @param {?} c
             * @return {?}
             */
            function (c) {
                var e_1, _a;
                if (!c.dirty) {
                    return null;
                }
                /** @type {?} */
                var arr = [];
                try {
                    for (var childrenNames_1 = __values(childrenNames), childrenNames_1_1 = childrenNames_1.next(); !childrenNames_1_1.done; childrenNames_1_1 = childrenNames_1.next()) {
                        var name_1 = childrenNames_1_1.value;
                        arr.push(c.get(name_1));
                    }
                }
                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                finally {
                    try {
                        if (childrenNames_1_1 && !childrenNames_1_1.done && (_a = childrenNames_1.return)) _a.call(childrenNames_1);
                    }
                    finally { if (e_1) throw e_1.error; }
                }
                /** @type {?} */
                var emptyElemCount = arr.filter((/**
                 * @param {?} a
                 * @return {?}
                 */
                function (a) { return !a.value; })).length;
                if (emptyElemCount === 0) {
                    return null;
                }
                /** @type {?} */
                var errObj = { groupRequired: true };
                return errObj;
            });
        };
        /**
         * @param {?} errClassName
         * @param {?} regExp
         * @return {?}
         */
        CfValidators.pattern = /**
         * @param {?} errClassName
         * @param {?} regExp
         * @return {?}
         */
        function (errClassName, regExp) {
            return (/**
             * @param {?} c
             * @return {?}
             */
            function (c) {
                if (!c.dirty) {
                    return null;
                }
                if (!c.value) {
                    return null;
                }
                /** @type {?} */
                var isValid = regExp.test(c.value);
                if (isValid) {
                    return null;
                }
                /** @type {?} */
                var errObj = {};
                errObj[errClassName] = true;
                return errObj;
            });
        };
        /**
         * @param {?} errClassName
         * @param {?} debounce
         * @param {?} fn
         * @return {?}
         */
        CfValidators.AsyncValidate = /**
         * @param {?} errClassName
         * @param {?} debounce
         * @param {?} fn
         * @return {?}
         */
        function (errClassName, debounce, fn) {
            var _this = this;
            return (/**
             * @param {?} c
             * @return {?}
             */
            function (c) {
                if (!c.dirty) {
                    return rxjs.of(null);
                }
                /** @type {?} */
                var $ob = c.valueChanges.pipe(operators.debounceTime(debounce), operators.switchMap((/**
                 * @param {?} v
                 * @return {?}
                 */
                function (v) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0: return [4 /*yield*/, fn(v)];
                        case 1: return [2 /*return*/, _a.sent()];
                    }
                }); }); })), operators.map((/**
                 * @param {?} isValid
                 * @return {?}
                 */
                function (isValid) {
                    if (isValid) {
                        return null;
                    }
                    /** @type {?} */
                    var errObj = {};
                    errObj[errClassName] = true;
                    return errObj;
                })), operators.first());
                return $ob;
            });
        };
        return CfValidators;
    }());

    exports.BaseInput = BaseInput;
    exports.CfValidators = CfValidators;
    exports.NgxConfigFormModule = NgxConfigFormModule;
    exports.Utils = Utils;
    exports.ɵa = CheckboxComponent;
    exports.ɵb = ConfirmPasswordComponent;
    exports.ɵc = HiddenComponent;
    exports.ɵd = RadioComponent;
    exports.ɵe = SelectComponent;
    exports.ɵf = TextComponent;
    exports.ɵg = TextareaComponent;
    exports.ɵh = ButtonComponent;
    exports.ɵi = FormComponent;

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

}));
//# sourceMappingURL=ngx-config-form.umd.js.map