ngx-config-form/fesm2015/ngx-config-form.js

use configuration to generate form

import { Input, EventEmitter, Component, Output, forwardRef, NgModule } from '@angular/core';
import { Subscription, BehaviorSubject, of } from 'rxjs';
import { filter, debounceTime, switchMap, map, first } from 'rxjs/operators';
import { FormControl, FormGroup, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { __awaiter } from 'tslib';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @abstract
 */
class BaseInput {
    constructor() {
        this.isShowErrorMsg = true;
        // private sbObs: Subscription[] = [];
        this.sbObs = new Subscription();
        this.ObjectUtil = Object;
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set cfForm(v) {
        this._cfForm = v;
        this.cfFormSetting = v.cfFormSetting;
        this.cfFormGroup = v.cfFormGroup;
    }
    /**
     * @return {?}
     */
    get cfForm() {
        return this._cfForm;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        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 {?}
     */
    ngOnDestroy() {
        this.sbObs.unsubscribe();
    }
    /**
     * @private
     * @return {?}
     */
    setNotify() {
        // set value
        this.sbObs.add(this.elem.statusChanges
            .pipe(filter((/**
         * @param {?} a
         * @return {?}
         */
        a => a === 'VALID'))).subscribe((/**
         * @param {?} a
         * @return {?}
         */
        a => {
            this.cfForm.notifyValueChange(this.propName, this.elem.value);
        })));
        // send error message
        this.sbObs.add(this.elem.statusChanges
            .subscribe((/**
         * @param {?} a
         * @return {?}
         */
        a => {
            /** @type {?} */
            const isValid = a === 'VALID';
            /** @type {?} */
            const vKey = `${this.propName}_${this.cfFormSetting[this.propName].items[0].name}`;
            if (!isValid && this.elem.errors) {
                /** @type {?} */
                const errorInfo = {};
                for (const key of Object.keys(this.elem.errors)) {
                    errorInfo[key] = {
                        msg: this.elemValidators[key].msg,
                        dirty: this.elem.dirty,
                    };
                }
                this.cfForm.notifyValidatedInfo(vKey, false, errorInfo);
            }
            if (isValid) {
                this.cfForm.notifyValidatedInfo(vKey, true);
            }
        })));
    }
}
BaseInput.propDecorators = {
    cfForm: [{ type: Input }],
    isShowErrorMsg: [{ type: Input }]
};

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

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ButtonComponent {
    constructor() {
        this.buttonClass = '';
        this.isDebug = 'N';
        this.type = 'button';
        this.isProcessing = false;
        this.click = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
    /**
     * @param {?} event
     * @return {?}
     */
    clickIt(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: 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 = () => [];
ButtonComponent.propDecorators = {
    cfFormGroup: [{ type: Input }],
    buttonClass: [{ type: Input }],
    isDebug: [{ type: Input }],
    type: [{ type: Input }],
    isProcessing: [{ type: Input }],
    click: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const USER_PROFILE_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef((/**
     * @return {?}
     */
    () => FormComponent)),
    multi: true
};
class FormComponent {
    /**
     * @param {?} fb
     */
    constructor(fb) {
        this.fb = fb;
        this.isReady = false;
        this.errorPropName = '_errMsg_';
        this.autocomplete = 'off';
        this.cfFormSetting = {};
        this.formClass = '';
        this.isDebug = false;
        this.cfFormReady = new EventEmitter();
        this.data$ = new BehaviorSubject(this.data);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.initFormGroupSetting();
    }
    /**
     * @param {?} originObj
     * @return {?}
     */
    writeValue(originObj) {
        if (!originObj) {
            return;
        }
        this.data = originObj;
        this.setFormGroupValue();
        this.setReady();
    }
    /**
     * @private
     * @return {?}
     */
    setReady() {
        this.isReady = true;
        this.cfFormReady.emit();
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
    }
    /**
     * @param {?} key
     * @param {?} value
     * @return {?}
     */
    notifyValueChange(key, value) {
        if (!this.onChange) {
            return;
        }
        /** @type {?} */
        let v = value;
        /** @type {?} */
        const 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 {?}
     */
    notifyValidatedInfo(key, isValid, info) {
        if (!this.onChange) {
            return;
        }
        if (isValid) {
            /** @type {?} */
            const obj = this.data[this.errorPropName] || {};
            delete obj[key];
            this.data[this.errorPropName] = obj;
        }
        else {
            /** @type {?} */
            const obj = this.data[this.errorPropName] || {};
            /** @type {?} */
            const oErrorObj = obj[key] || {};
            obj[key] = info;
            this.data[this.errorPropName] = obj;
        }
        this.onChange(this.data);
    }
    /**
     * @return {?}
     */
    onReady() {
        return this.cfFormReady;
    }
    /**
     * @private
     * @return {?}
     */
    initFormGroupSetting() {
        for (const propName of Object.keys(this.cfFormSetting)) {
            /** @type {?} */
            const setting = this.cfFormSetting[propName];
            /** @type {?} */
            const g = {};
            for (const item of setting.items) {
                /** @type {?} */
                const itemValidatorInfo = this.getValidators(item.validators);
                g[item.name] = ['', itemValidatorInfo.validatorFns, itemValidatorInfo.asyncValidatorFns];
            }
            /** @type {?} */
            const fbG = this.fb.group(g);
            /** @type {?} */
            const groupValidatorInfo = this.getValidators(setting.validators);
            fbG.setValidators(groupValidatorInfo.validatorFns);
            fbG.setAsyncValidators(groupValidatorInfo.asyncValidatorFns);
            this.cfFormGroup.setControl(propName, fbG);
        }
    }
    /**
     * @private
     * @return {?}
     */
    setFormGroupValue() {
        for (const propName of Object.keys(this.cfFormSetting)) {
            /** @type {?} */
            const setting = this.cfFormSetting[propName];
            for (const item of setting.items) {
                /** @type {?} */
                let value = this.data[item.name] || item.value || '';
                if (setting.converter) {
                    value = setting.converter.to(value);
                }
                /** @type {?} */
                const c = this.cfFormGroup.get([propName, item.name]);
                c.setValue(value);
            }
        }
    }
    /**
     * @private
     * @param {?} validators
     * @return {?}
     */
    getValidators(validators) {
        /** @type {?} */
        const validatorFns = [];
        /** @type {?} */
        const asyncValidatorFns = [];
        for (const key of Object.keys(validators)) {
            /** @type {?} */
            const v = validators[key];
            if (v.isPromiseOrObservable) {
                asyncValidatorFns.push((/** @type {?} */ (v.validator)));
            }
            else {
                validatorFns.push((/** @type {?} */ (v.validator)));
            }
        }
        return { validatorFns, asyncValidatorFns };
    }
}
FormComponent.decorators = [
    { type: 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 = () => [
    { type: FormBuilder }
];
FormComponent.propDecorators = {
    autocomplete: [{ type: Input }],
    cfFormSetting: [{ type: Input }],
    cfFormGroup: [{ type: Input }],
    formClass: [{ type: Input }],
    isDebug: [{ type: Input }],
    cfFormReady: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CheckboxComponent extends BaseInput {
    constructor() {
        super();
        this.isMultiple = true;
        this.result = [];
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        const _super = Object.create(null, {
            ngOnInit: { get: () => super.ngOnInit }
        });
        return __awaiter(this, void 0, void 0, function* () {
            _super.ngOnInit.call(this);
            this.cfForm.onReady().subscribe((/**
             * @return {?}
             */
            () => {
                this.setData();
            }));
        });
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        super.ngOnDestroy();
    }
    /**
     * @private
     * @return {?}
     */
    setData() {
        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 {?}
     */
    chagne(event, cb, value) {
        event.preventDefault();
        event.stopPropagation();
        /** @type {?} */
        const 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 {?} */
        const v = this.result.filter((/**
         * @param {?} a
         * @return {?}
         */
        a => a)).join(',');
        this.elem.setValue(v);
        this.elem.markAsDirty();
    }
}
CheckboxComponent.decorators = [
    { type: 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 = () => [];
CheckboxComponent.propDecorators = {
    propName: [{ type: Input }],
    isMultiple: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ConfirmPasswordComponent extends BaseInput {
    constructor() {
        super();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        super.ngOnInit();
        this.groupElemValidators = this.cfFormSetting[this.propName].validators;
        this.setComponentNotify();
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        super.ngOnDestroy();
        this.ob.unsubscribe();
    }
    /**
     * @private
     * @return {?}
     */
    setComponentNotify() {
        this.ob = this.groupElem.statusChanges
            .subscribe((/**
         * @param {?} a
         * @return {?}
         */
        a => {
            /** @type {?} */
            const isValid = a === 'VALID';
            /** @type {?} */
            const vKey = `${this.propName}_`;
            if (!isValid && this.groupElem.errors) {
                /** @type {?} */
                const errorObj = {};
                for (const key of Object.keys(this.groupElem.errors)) {
                    errorObj[key] = {
                        msg: this.groupElemValidators[key].msg,
                        dirty: this.groupElem.dirty,
                    };
                }
                this.cfForm.notifyValidatedInfo(vKey, false, errorObj);
            }
            if (isValid) {
                this.cfForm.notifyValidatedInfo(vKey, true);
            }
        }));
    }
}
ConfirmPasswordComponent.decorators = [
    { type: 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 = () => [];
ConfirmPasswordComponent.propDecorators = {
    propName: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class HiddenComponent extends BaseInput {
    constructor() {
        super();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        super.ngOnInit();
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        super.ngOnDestroy();
    }
}
HiddenComponent.decorators = [
    { type: 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 = () => [];
HiddenComponent.propDecorators = {
    propName: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class RadioComponent extends BaseInput {
    constructor() {
        super();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        super.ngOnInit();
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        super.ngOnDestroy();
    }
}
RadioComponent.decorators = [
    { type: 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 = () => [];
RadioComponent.propDecorators = {
    propName: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SelectComponent extends BaseInput {
    constructor() {
        super();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        super.ngOnInit();
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        super.ngOnDestroy();
    }
}
SelectComponent.decorators = [
    { type: 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 = () => [];
SelectComponent.propDecorators = {
    propName: [{ type: Input }],
    inputClass: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TextComponent extends BaseInput {
    constructor() {
        super();
        this.isReadOnly = false;
        this.type = 'text';
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        super.ngOnInit();
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        super.ngOnDestroy();
    }
}
TextComponent.decorators = [
    { type: 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 = () => [];
TextComponent.propDecorators = {
    isReadOnly: [{ type: Input }],
    type: [{ type: Input }],
    inputClass: [{ type: Input }],
    propName: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TextareaComponent extends BaseInput {
    constructor() {
        super();
        this.rows = 3;
        this.isReadOnly = false;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        super.ngOnInit();
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        super.ngOnDestroy();
    }
}
TextareaComponent.decorators = [
    { type: 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 = () => [];
TextareaComponent.propDecorators = {
    rows: [{ type: Input }],
    isReadOnly: [{ type: Input }],
    inputClass: [{ type: Input }],
    propName: [{ type: Input }]
};

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

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
// @dynamic
class CfValidators {
    /**
     * @param {?} passwordName
     * @param {?} confirmPasswordName
     * @return {?}
     */
    static confirmPassword(passwordName, confirmPasswordName) {
        return (/**
         * @param {?} c
         * @return {?}
         */
        (c) => {
            if (!c.dirty) {
                return null;
            }
            /** @type {?} */
            const password = c.get(passwordName);
            /** @type {?} */
            const confirmPassword = c.get(confirmPasswordName);
            if (password.value === confirmPassword.value) {
                return null;
            }
            /** @type {?} */
            const errObj = { confirmPassword: true };
            return errObj;
        });
    }
    /**
     * @param {...?} childrenNames
     * @return {?}
     */
    static groupRequired(...childrenNames) {
        return (/**
         * @param {?} c
         * @return {?}
         */
        (c) => {
            if (!c.dirty) {
                return null;
            }
            /** @type {?} */
            const arr = [];
            for (const name of childrenNames) {
                arr.push(c.get(name));
            }
            /** @type {?} */
            const emptyElemCount = arr.filter((/**
             * @param {?} a
             * @return {?}
             */
            a => !a.value)).length;
            if (emptyElemCount === 0) {
                return null;
            }
            /** @type {?} */
            const errObj = { groupRequired: true };
            return errObj;
        });
    }
    /**
     * @param {?} errClassName
     * @param {?} regExp
     * @return {?}
     */
    static pattern(errClassName, regExp) {
        return (/**
         * @param {?} c
         * @return {?}
         */
        (c) => {
            if (!c.dirty) {
                return null;
            }
            if (!c.value) {
                return null;
            }
            /** @type {?} */
            const isValid = regExp.test(c.value);
            if (isValid) {
                return null;
            }
            /** @type {?} */
            const errObj = {};
            errObj[errClassName] = true;
            return errObj;
        });
    }
    /**
     * @param {?} errClassName
     * @param {?} debounce
     * @param {?} fn
     * @return {?}
     */
    static AsyncValidate(errClassName, debounce, fn) {
        return (/**
         * @param {?} c
         * @return {?}
         */
        (c) => {
            if (!c.dirty) {
                return of(null);
            }
            /** @type {?} */
            const $ob = c.valueChanges.pipe(debounceTime(debounce), switchMap((/**
             * @param {?} v
             * @return {?}
             */
            (v) => __awaiter(this, void 0, void 0, function* () { return yield fn(v); }))), map((/**
             * @param {?} isValid
             * @return {?}
             */
            isValid => {
                if (isValid) {
                    return null;
                }
                /** @type {?} */
                const errObj = {};
                errObj[errClassName] = true;
                return errObj;
            })), first());
            return $ob;
        });
    }
}

export { BaseInput, CfValidators, NgxConfigFormModule, Utils, CheckboxComponent as ɵa, ConfirmPasswordComponent as ɵb, HiddenComponent as ɵc, RadioComponent as ɵd, SelectComponent as ɵe, TextComponent as ɵf, TextareaComponent as ɵg, ButtonComponent as ɵh, FormComponent as ɵi };
//# sourceMappingURL=ngx-config-form.js.map