@koalarx/ui 12.4.1 → 12.4.2

package/form/fesm2015/koalarx-ui-form.js

@@ -0,0 +1,1465 @@
+import * as i0 from '@angular/core';
+import { Component, Input, Injectable, ChangeDetectionStrategy, ViewChild, Directive, ElementRef, NgModule } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { KoalaLanguageHelper, maskOptions } from '@koalarx/ui/core';
+import * as i1 from '@angular/forms';
+import { Validators, FormBuilder, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { koala } from '@koalarx/utils';
+import * as i2 from 'ngx-device-detector';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { __awaiter } from 'tslib';
+import { debounceTime } from 'rxjs/operators';
+import { KlDelay } from '@koalarx/utils/dist/utils/KlDelay';
+import { CommonModule } from '@angular/common';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { NgxMaskModule } from 'ngx-mask';
+import { CurrencyMaskModule } from 'ng2-currency-mask';
+import { KoalaButtonModule } from '@koalarx/ui/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { KoalaFileButtonModule } from '@koalarx/ui/file-button';
+import { MatChipsModule } from '@angular/material/chips';
+
+class BtnSubmitComponent {
+    constructor() {
+        this.color = 'primary';
+        this.btnLabel = KoalaLanguageHelper.getBtnLabel();
+        this.btnSubmitDisabled = false;
+        this.disabled = new BehaviorSubject(false);
+    }
+    ngOnInit() {
+        if (!this.btnLabel) {
+            this.btnLabel = KoalaLanguageHelper.getBtnLabel();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.btnSubmitDisabled) {
+            this.disabled.next(changes.btnSubmitDisabled.currentValue);
+        }
+    }
+}
+BtnSubmitComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'koala-submit',
+                template: "<button\n\t*ngIf=\"!iconButton else btnIcon\"\n\t[color]=\"color\"\n\t[disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\tmat-raised-button\n\ttype=\"submit\">\n  <span>{{btnLabel}}</span>\n  <mat-spinner *ngIf=\"loader | async\" diameter=\"20\"></mat-spinner>\n</button>\n<ng-template #btnIcon>\n  <button\n\t  [color]=\"color\"\n\t  [disabled]=\"(disabled | async) || fg.invalid || fg.pending\"\n\t  class=\"koala-icon-button\"\n\t  mat-icon-button\n\t  type=\"submit\">\n    <mat-spinner *ngIf=\"loader | async\" [color]=\"color\" diameter=\"20\"></mat-spinner>\n    <mat-icon *ngIf=\"!(loader | async)\">{{icon}}</mat-icon>\n  </button>\n</ng-template>\n",
+                styles: [".mat-spinner{display:inline-block;margin-left:8px}.koala-button{padding:2px 8px}.koala-icon-button mat-spinner{position:relative;display:inline-flex;margin:0}\n"]
+            },] }
+];
+BtnSubmitComponent.propDecorators = {
+    fg: [{ type: Input }],
+    color: [{ type: Input }],
+    btnLabel: [{ type: Input }],
+    btnSubmitDisabled: [{ type: Input }],
+    loader: [{ type: Input }],
+    iconButton: [{ type: Input }],
+    icon: [{ type: Input }],
+    iconColor: [{ type: Input }]
+};
+
+var DynamicFormTypeFieldEnum;
+(function (DynamicFormTypeFieldEnum) {
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["text"] = 1] = "text";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["password"] = 2] = "password";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["cpf"] = 3] = "cpf";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["cnpj"] = 4] = "cnpj";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["datetime"] = 5] = "datetime";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["email"] = 6] = "email";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["phone"] = 7] = "phone";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["number"] = 8] = "number";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["valueList"] = 9] = "valueList";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["textarea"] = 10] = "textarea";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["time"] = 11] = "time";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["hoursAndMinutes"] = 12] = "hoursAndMinutes";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["checkbox"] = 13] = "checkbox";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["select"] = 14] = "select";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["coin"] = 15] = "coin";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["percent"] = 16] = "percent";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["moreItems"] = 17] = "moreItems";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["id"] = 18] = "id";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["textLogs"] = 19] = "textLogs";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["file"] = 20] = "file";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["autocomplete"] = 21] = "autocomplete";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["color"] = 22] = "color";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["dynamicForm"] = 23] = "dynamicForm";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["date"] = 24] = "date";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["radio"] = 25] = "radio";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["float"] = 26] = "float";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["stringNumber"] = 27] = "stringNumber";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["selectMultipleNative"] = 28] = "selectMultipleNative";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["month"] = 29] = "month";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["competenceDate"] = 30] = "competenceDate";
+    DynamicFormTypeFieldEnum[DynamicFormTypeFieldEnum["stringWithCustomMasc"] = 31] = "stringWithCustomMasc";
+})(DynamicFormTypeFieldEnum || (DynamicFormTypeFieldEnum = {}));
+
+class FieldBase {
+    constructor(label, name, type, formConfig, fb, deviceService) {
+        this.formConfig = formConfig;
+        this.fb = fb;
+        this.deviceService = deviceService;
+        this.fieldConfig = {
+            label,
+            name,
+            type
+        };
+        this.appearance().grid();
+    }
+    hide(hide = true) {
+        this.fieldConfig.show = !hide;
+        return this;
+    }
+    focus() {
+        this.fieldConfig.focus = true;
+        return this;
+    }
+    syncValidator(validators) {
+        this.fieldConfig.syncValidators = validators;
+        return this;
+    }
+    asyncValidator(validators) {
+        this.fieldConfig.asyncValidators = validators;
+        return this;
+    }
+    disabled(disabled = true) {
+        this.fieldConfig.disabled = disabled;
+        return this;
+    }
+    required(required = true) {
+        this.fieldConfig.required = required;
+        return this;
+    }
+    textHint(hint) {
+        this.fieldConfig.textHint = hint;
+        return this;
+    }
+    min(min) {
+        this.fieldConfig.min = min;
+        return this;
+    }
+    max(max) {
+        this.fieldConfig.max = max;
+        return this;
+    }
+    minLength(min) {
+        this.fieldConfig.minLength = min;
+        return this;
+    }
+    maxLength(max) {
+        this.fieldConfig.maxLength = max;
+        return this;
+    }
+    multiple(multiple = true) {
+        this.fieldConfig.multiple = multiple;
+    }
+    valueChanges(fn) {
+        this.fieldConfig.valueChanges = fn;
+        return this;
+    }
+    setValue(value) {
+        this.fieldConfig.value = value;
+        return this;
+    }
+    appearance(type = "outline", floatLabel = "always") {
+        this.fieldConfig.appearance = type;
+        this.fieldConfig.floatLabel = floatLabel;
+        return this;
+    }
+    grid(size = 12, width = 100) {
+        var _a;
+        if (this.deviceService.isMobile()) {
+            size = 12;
+        }
+        for (let colSize = 12; colSize >= 1; colSize--) {
+            this.fieldConfig.class = (_a = this.fieldConfig.class) === null || _a === void 0 ? void 0 : _a.replace('col-' + colSize, '');
+        }
+        this.addClass('col-' + size);
+        this.addFieldClass('w-' + width);
+        return this;
+    }
+    setOptions(options) {
+        this.fieldConfig.opcoesSelect = options;
+        return this;
+    }
+    addClass(className) {
+        var _a, _b;
+        if (this.deviceService.isMobile() &&
+            className.indexOf('col-') >= 0 &&
+            className.indexOf('col-12') === 0) {
+            className = className.replace('col-1', 'col-12')
+                .replace('col-2', 'col-12')
+                .replace('col-3', 'col-12')
+                .replace('col-4', 'col-12')
+                .replace('col-5', 'col-12')
+                .replace('col-6', 'col-12')
+                .replace('col-7', 'col-12')
+                .replace('col-8', 'col-12')
+                .replace('col-9', 'col-12')
+                .replace('col-10', 'col-12')
+                .replace('col-11', 'col-12');
+        }
+        this.fieldConfig.class = koala(`${(_b = (_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.class) !== null && _b !== void 0 ? _b : ''} ${className}`)
+            .string()
+            .split(' ')
+            .clearEmptyValues()
+            .toString(' ')
+            .getValue();
+        return this;
+    }
+    addFieldClass(className) {
+        var _a, _b;
+        this.fieldConfig.fieldClass = koala(`${(_b = (_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.fieldClass) !== null && _b !== void 0 ? _b : ''} ${className}`)
+            .string()
+            .split(' ')
+            .clearEmptyValues()
+            .toString(' ')
+            .getValue();
+        return this;
+    }
+    setCustomMasc(mask) {
+        this.fieldConfig.customMasc = mask;
+        return this;
+    }
+    generate() {
+        let getLastConfig = (this.formConfig.formConfig.length > 0) ?
+            this.formConfig.formConfig[this.formConfig.formConfig.length - 1] :
+            null;
+        if ((getLastConfig === null || getLastConfig === void 0 ? void 0 : getLastConfig.type) === DynamicFormTypeFieldEnum.moreItems && (getLastConfig === null || getLastConfig === void 0 ? void 0 : getLastConfig.name) !== 'endMoreItems') {
+            this.formConfig.formConfig[this.formConfig.formConfig.length - 1].moreItemsConfig.formConfig.push(this.fieldConfig);
+        }
+        else {
+            if ((getLastConfig === null || getLastConfig === void 0 ? void 0 : getLastConfig.name) === 'endMoreItems') {
+                this.formConfig.formConfig.splice(this.formConfig.formConfig.length - 1, 1);
+            }
+            this.formConfig.formConfig.push(this.fieldConfig);
+        }
+        return new DynamicFormBuilder(this.fb, this.deviceService, this.formConfig.formConfig);
+    }
+}
+
+class AutocompleteBuilder extends FieldBase {
+    constructor(label, name, formConfig, fb, deviceService) {
+        super(label, name, DynamicFormTypeFieldEnum.autocomplete, formConfig, fb, deviceService);
+    }
+    service(service) {
+        this.service$ = service;
+        return this;
+    }
+    defaultValueOnClean(value) {
+        this.fieldConfig.autocompleteDefaultValueOnClear = value;
+        return this;
+    }
+    loadOptions(type, onDemandFilter) {
+        this.fieldConfig.autocompleteType = type;
+        if (type === "all") {
+            const options$ = new BehaviorSubject([]);
+            this.service$.subscribe(options => options$.next(options));
+            this.fieldConfig.autocompleteOptions = options$;
+        }
+        else {
+            this.fieldConfig.autocompleteFilter = onDemandFilter;
+        }
+        return this;
+    }
+    colorChipConfig(fn) {
+        this.fieldConfig.autocompleteMultipleConfig = new BehaviorSubject(null);
+        fn(this.fieldConfig.autocompleteMultipleConfig);
+        return this;
+    }
+}
+
+class FieldBuilder extends FieldBase {
+    constructor(label, name, type, formConfig, fb, deviceService) {
+        super(label, name, type, formConfig, fb, deviceService);
+    }
+}
+
+class MoreItemsBuilder {
+    constructor(label, name, btnAddLabel, min, max, formConfig, fb, deviceService) {
+        this.label = label;
+        this.name = name;
+        this.btnAddLabel = btnAddLabel;
+        this.min = min;
+        this.max = max;
+        this.formConfig = formConfig;
+        this.fb = fb;
+        this.deviceService = deviceService;
+    }
+    build() {
+        let getLastConfig = (this.formConfig.formConfig.length > 0) ?
+            this.formConfig.formConfig[this.formConfig.formConfig.length - 1] :
+            null;
+        this.fieldConfig = {
+            label: this.label,
+            name: this.name,
+            type: DynamicFormTypeFieldEnum.moreItems,
+            moreItemsIconBackgroundColor: '#fff',
+            moreItemsIconFontColor: '#212121',
+            moreItemsMinItems: this.min,
+            moreItemsMaxItems: this.max,
+            moreItemsButtonIconAddlabel: this.btnAddLabel,
+            moreItemsConfig: {
+                form: this.fb.group({}),
+                formConfig: [],
+                setValues: new BehaviorSubject([])
+            }
+        };
+        if ((getLastConfig === null || getLastConfig === void 0 ? void 0 : getLastConfig.type) === DynamicFormTypeFieldEnum.moreItems && (getLastConfig === null || getLastConfig === void 0 ? void 0 : getLastConfig.name) !== 'endMoreItems') {
+            let formConfigMoreItems = getLastConfig.moreItemsConfig.formConfig;
+            if (formConfigMoreItems.length > 0) {
+                let lastIndexMoreItems = 0;
+                formConfigMoreItems.forEach((item, index) => {
+                    if (item.type === DynamicFormTypeFieldEnum.moreItems)
+                        lastIndexMoreItems = index;
+                });
+                formConfigMoreItems[lastIndexMoreItems].moreItemsConfig.formConfig.push(this.fieldConfig);
+            }
+            else {
+                this.formConfig.formConfig[this.formConfig.formConfig.length - 1].moreItemsConfig.formConfig.push(this.fieldConfig);
+            }
+        }
+        else {
+            if ((getLastConfig === null || getLastConfig === void 0 ? void 0 : getLastConfig.name) === 'endMoreItems') {
+                this.formConfig.formConfig.splice(this.formConfig.formConfig.length - 1, 1);
+            }
+            this.formConfig.formConfig.push(this.fieldConfig);
+        }
+        return new DynamicFormBuilder(this.fb, this.deviceService, this.formConfig.formConfig);
+    }
+}
+
+class DynamicFormBuilder {
+    constructor(fb, deviceService, configInMemory) {
+        this.fb = fb;
+        this.deviceService = deviceService;
+        this.config = {
+            form: fb.group({}),
+            formConfig: configInMemory !== null && configInMemory !== void 0 ? configInMemory : [],
+            setValues: new BehaviorSubject(null),
+            showFields: new BehaviorSubject(null)
+        };
+    }
+    field(label, name, type) {
+        switch (type) {
+            case "id":
+            case "text":
+            case "textarea":
+            case "number":
+            case "stringNumber":
+            case "cnpj":
+            case "cpf":
+            case "coin":
+            case "color":
+            case "date":
+            case "datetime":
+            case "email":
+            case "float":
+            case "password":
+            case "percent":
+            case "phone":
+            case "time":
+            case "hoursAndMinutes":
+            case "textLogs":
+            case "valueList":
+            case "checkbox":
+            case "radio":
+            case "select":
+            case "selectMultipleNative":
+            case "month":
+            case "competenceDate":
+            case "stringWithCustomMasc":
+                return new FieldBuilder(label, name, DynamicFormTypeFieldEnum[type], this.config, this.fb, this.deviceService);
+        }
+    }
+    autocomplete(label, name) {
+        return new AutocompleteBuilder(label, name, this.config, this.fb, this.deviceService);
+    }
+    simpleMoreItems(label, name, btnAddLabel, min, max) {
+        return new MoreItemsBuilder(label, name, btnAddLabel, min, max, this.config, this.fb, this.deviceService);
+    }
+    autofill(object) {
+        if (object) {
+            const setValues = [];
+            Object.keys(object).forEach(indexName => {
+                var _a;
+                const arrField = koala(this.config.formConfig).array().filter(indexName, 'name').getValue();
+                const field = (_a = arrField[0]) !== null && _a !== void 0 ? _a : null;
+                if (typeof object[indexName] !== "object" ||
+                    field.type === DynamicFormTypeFieldEnum.autocomplete ||
+                    field.type === DynamicFormTypeFieldEnum.selectMultipleNative) {
+                    if ((field === null || field === void 0 ? void 0 : field.type) === DynamicFormTypeFieldEnum.textLogs) {
+                        field.textObs = object[indexName];
+                    }
+                    else {
+                        setValues.push({
+                            name: indexName,
+                            value: object[indexName]
+                        });
+                    }
+                }
+                else {
+                    if (field.type === DynamicFormTypeFieldEnum.moreItems) {
+                        const setValuesMoreItems = [];
+                        const objectMoreItems = object[indexName];
+                        objectMoreItems.forEach(objectItem => {
+                            const moreItemValues = [];
+                            Object.keys(objectItem).forEach(objectIndexName => {
+                                moreItemValues.push({
+                                    name: objectIndexName,
+                                    value: objectItem[objectIndexName]
+                                });
+                            });
+                            setValuesMoreItems.push(new BehaviorSubject(moreItemValues));
+                        });
+                        field.moreItemsConfig.setValues.next(setValuesMoreItems);
+                    }
+                    else if (field.type === DynamicFormTypeFieldEnum.dynamicForm) {
+                        const dynamicFormObject = object[indexName];
+                        const dynamicFormSetValues = [];
+                        Object.keys(dynamicFormObject).forEach(dynamicFormIndexName => {
+                            var _a;
+                            const arrDynamicField = koala(field.dynamicFormConfig.formConfig).array().filter(indexName, 'name').getValue();
+                            const dynamicField = (_a = arrDynamicField[0]) !== null && _a !== void 0 ? _a : null;
+                            if ((dynamicField === null || dynamicField === void 0 ? void 0 : dynamicField.type) === DynamicFormTypeFieldEnum.textLogs) {
+                                dynamicField.textObs = object[indexName];
+                            }
+                            else {
+                                dynamicFormSetValues.push({
+                                    name: dynamicFormIndexName,
+                                    value: dynamicFormObject[dynamicFormIndexName]
+                                });
+                            }
+                        });
+                        field.dynamicFormConfig.setValues.next(dynamicFormSetValues);
+                    }
+                    else {
+                        this.autofill(object[indexName]);
+                    }
+                }
+            });
+            this.config.setValues.next(setValues);
+        }
+        return this;
+    }
+    literalConfig(config) {
+        this.config.formConfig.push(config);
+        if (config.type === DynamicFormTypeFieldEnum.moreItems)
+            this.generateMoreItems();
+        return this;
+    }
+    generate() {
+        this.config.formConfig = this.config.formConfig.filter(config => config.name !== 'endMoreItems');
+        return this.config;
+    }
+    generateMoreItems() {
+        this.config.formConfig.push({
+            name: 'endMoreItems',
+            type: DynamicFormTypeFieldEnum.moreItems
+        });
+        return new DynamicFormBuilder(this.fb, this.deviceService, this.config.formConfig);
+    }
+}
+
+function DateMinValidator(min) {
+    return (control) => {
+        if (control.value && typeof min === 'string') {
+            if (new Date(control.value) < new Date(min)) {
+                return { dateMin: true };
+            }
+        }
+        return null;
+    };
+}
+
+function DateMaxValidator(max) {
+    return (control) => {
+        if (control.value && typeof max === 'string') {
+            if (new Date(control.value) > new Date(max)) {
+                return { dateMax: true };
+            }
+        }
+        return null;
+    };
+}
+
+class KoalaDynamicFormService {
+    constructor(fb, deviceService) {
+        this.fb = fb;
+        this.deviceService = deviceService;
+    }
+    build() {
+        return new DynamicFormBuilder(this.fb, this.deviceService);
+    }
+    updateValidator(formGroup, name, type, value) {
+        if (type === 'required' && typeof value !== 'boolean') {
+            throw new Error(`Type required cannot be a ${typeof value}`);
+        }
+        else if ((type === 'min' || type === 'max') && typeof value === "boolean") {
+            throw new Error(`Type ${type} cannot be a boolean`);
+        }
+        const formArray = formGroup.get('formData');
+        const control = formArray.controls.find(control => control.get('name').value === name);
+        if (control) {
+            const currentRequired = control.get('required').value;
+            const currentMin = control.get('min').value;
+            const currentMax = control.get('max').value;
+            const validators = [];
+            control.get('value').clearValidators();
+            control.get('value').setErrors(null);
+            if ((type === "required" && value) || currentRequired) {
+                validators.push(Validators.required);
+                control.get('value').setErrors({ required: true });
+            }
+            if ((type === "min" || currentMin)) {
+                if (typeof value === "number") {
+                    validators.push(Validators.min((type === "min" ? value : currentMin)));
+                    control.get('value').setErrors({ min: true });
+                }
+                else if (typeof value === "string") {
+                    validators.push(DateMinValidator((type === "min" ? value : currentMin)));
+                    control.get('value').setErrors({ dateMin: true });
+                }
+            }
+            if ((type === "max" || currentMax)) {
+                if (typeof value === "number") {
+                    validators.push(Validators.max((type === "max" ? value : currentMax)));
+                    control.get('value').setErrors({ max: true });
+                }
+                else if (typeof value === "string") {
+                    validators.push(DateMaxValidator((type === "max" ? value : currentMax)));
+                    control.get('value').setErrors({ dateMax: true });
+                }
+            }
+            if (type === "required") {
+                control.get('required').setValue(value);
+            }
+            else if (type === "min") {
+                control.get('min').setValue(value);
+            }
+            else if (type === "max") {
+                control.get('max').setValue(value);
+            }
+            control.get('value').setValidators(validators);
+            control.get('value').updateValueAndValidity();
+        }
+    }
+    emitData(form) {
+        const data = {};
+        const formArray = form.get('formData');
+        formArray === null || formArray === void 0 ? void 0 : formArray.controls.forEach(control => {
+            var _a;
+            if (control.get('show').value.getValue() !== false) {
+                let value = control.get('value').value;
+                if (control.get('type').value === DynamicFormTypeFieldEnum.valueList) {
+                    if (value === null || value === undefined) {
+                        value = '';
+                    }
+                    value = koala(value).string().split().getValue();
+                }
+                else if (control.get('type').value === DynamicFormTypeFieldEnum.moreItems) {
+                    const moreItems = control.get('moreItemsConfig').value;
+                    value = [];
+                    moreItems.forEach(item => {
+                        value.push(this.emitData(item.form));
+                    });
+                }
+                else if (control.get('type').value === DynamicFormTypeFieldEnum.autocomplete) {
+                    if (control.get('multiple').value) {
+                        const options = control.get('autocompleteSelectedValue').value;
+                        value = options === null || options === void 0 ? void 0 : options.map(item => item === null || item === void 0 ? void 0 : item.value);
+                    }
+                    else {
+                        value = (((_a = control.get('autocompleteSelectedValue').value) === null || _a === void 0 ? void 0 : _a.value) ?
+                            control.get('autocompleteSelectedValue').value.value :
+                            control.get('autocompleteSelectedValue').value);
+                    }
+                }
+                else if (control.get('type').value === DynamicFormTypeFieldEnum.dynamicForm) {
+                    const dynamicFormConfig = control.get('dynamicFormConfig').value;
+                    value = this.emitData(dynamicFormConfig.getValue().form);
+                }
+                else if (control.get('type').value === DynamicFormTypeFieldEnum.number) {
+                    value = parseInt(value);
+                }
+                else if ((control.get('type').value === DynamicFormTypeFieldEnum.float ||
+                    control.get('type').value === DynamicFormTypeFieldEnum.percent) && typeof value === "string") {
+                    value = parseFloat(value.replace(/,/g, '.'));
+                }
+                else if (control.get('type').value === DynamicFormTypeFieldEnum.coin &&
+                    typeof value === "string") {
+                    value = koala(value).string().unmaskCoin().getValue();
+                }
+                data[control.get('name').value] = value;
+            }
+        });
+        return data;
+    }
+    resetForm(form) {
+        const formArray = form.get('formData');
+        formArray.controls.forEach(control => {
+            if (control.get('type').value === DynamicFormTypeFieldEnum.moreItems) {
+                control.get('moreItemsConfig').setValue([]);
+            }
+            else {
+                control.get('value').reset();
+            }
+        });
+    }
+    setValuesInMoreItemsForm(subject, values) {
+        const valuesMoreItems = [];
+        values.forEach(itemValue => {
+            valuesMoreItems.push(new BehaviorSubject(itemValue));
+        });
+        subject.next(valuesMoreItems);
+    }
+    autocompleteFilterOnServer(request, nameConfig, indexNameByValue) {
+        return new Observable(observe => {
+            request().then(response => {
+                const options = [];
+                response.forEach(item => {
+                    var _a;
+                    let value = '';
+                    if ((indexNameByValue === null || indexNameByValue === void 0 ? void 0 : indexNameByValue.indexOf(' > ')) >= 0) {
+                        value = this.getValueByStringPath(indexNameByValue, item);
+                    }
+                    else if (indexNameByValue) {
+                        value = item[indexNameByValue];
+                    }
+                    else {
+                        value = item;
+                    }
+                    options.push({
+                        name: koala(item).object().toString(nameConfig.propsByName, ((_a = nameConfig.delimiter) !== null && _a !== void 0 ? _a : ' ')).getValue(),
+                        value
+                    });
+                });
+                observe.next(options);
+            });
+        });
+    }
+    showFields(subject, names, show, clearCurrentValue = false) {
+        const fields = [];
+        names.forEach(name => {
+            fields.push({
+                name,
+                show,
+                clearCurrentValue
+            });
+        });
+        subject.next(fields);
+    }
+    getValueByStringPath(indexNameByValue, item) {
+        let value;
+        const partsIndex = indexNameByValue.split(' > ');
+        let partIndex = 0;
+        do {
+            if (!value) {
+                value = item[partsIndex[partIndex]];
+            }
+            else {
+                value = value[partsIndex[partIndex]];
+            }
+            partIndex++;
+        } while (partIndex < partsIndex.length);
+        return value;
+    }
+}
+KoalaDynamicFormService.ɵprov = i0.ɵɵdefineInjectable({ factory: function KoalaDynamicFormService_Factory() { return new KoalaDynamicFormService(i0.ɵɵinject(i1.FormBuilder), i0.ɵɵinject(i2.DeviceDetectorService)); }, token: KoalaDynamicFormService, providedIn: "any" });
+KoalaDynamicFormService.decorators = [
+    { type: Injectable, args: [{ providedIn: "any" },] }
+];
+KoalaDynamicFormService.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: DeviceDetectorService }
+];
+
+class ValidationHelper {
+    static validateCpf(value) {
+        function calcChecker1(digits) {
+            let sum = null;
+            for (let j = 0; j < 9; ++j) {
+                sum += digits.toString().charAt(j) * (10 - j);
+            }
+            const lastSumChecker1 = sum % 11;
+            return lastSumChecker1 < 2 ? 0 : 11 - lastSumChecker1;
+        }
+        function calcChecker2(cpfWithChecker1) {
+            let sum = null;
+            for (let k = 0; k < 10; ++k) {
+                sum += cpfWithChecker1.toString().charAt(k) * (11 - k);
+            }
+            const lastSumChecker2 = sum % 11;
+            return lastSumChecker2 < 2 ? 0 : 11 - lastSumChecker2;
+        }
+        const cleanCPF = value.replace(/\.|\-|\s/g, '');
+        const firstNineDigits = cleanCPF.substring(0, 9);
+        const checker = cleanCPF.substring(9, 11);
+        if (cleanCPF.length !== 11) {
+            return false;
+        }
+        // Checking if all digits are equal
+        for (let i = 0; i < 10; i++) {
+            if ('' + firstNineDigits + checker === Array(12).join(`${i}`)) {
+                return false;
+            }
+        }
+        const checker1 = calcChecker1(firstNineDigits);
+        const checker2 = calcChecker2(firstNineDigits + '' + checker1);
+        return checker.toString() === checker1.toString() + checker2.toString();
+    }
+    static validateCnpj(value) {
+        value = value.replace(/[^\d]+/g, '');
+        if (value === '') {
+            return false;
+        }
+        if (value.length !== 14) {
+            return false;
+        }
+        // Elimina CNPJs invalidos conhecidos
+        if (value === '00000000000000' ||
+            value === '11111111111111' ||
+            value === '22222222222222' ||
+            value === '33333333333333' ||
+            value === '44444444444444' ||
+            value === '55555555555555' ||
+            value === '66666666666666' ||
+            value === '77777777777777' ||
+            value === '88888888888888' ||
+            value === '99999999999999') {
+            return false;
+        }
+        // Valida DVs
+        let tamanho = value.length - 2;
+        let numeros = value.substring(0, tamanho);
+        const digitos = value.substring(tamanho);
+        let soma = 0;
+        let pos = tamanho - 7;
+        for (let i = tamanho; i >= 1; i--) {
+            soma += parseInt(numeros.charAt(tamanho - i), 10) * pos--;
+            if (pos < 2) {
+                pos = 9;
+            }
+        }
+        let resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
+        if (resultado !== parseInt(digitos.charAt(0), 10)) {
+            return false;
+        }
+        tamanho = tamanho + 1;
+        numeros = value.substring(0, tamanho);
+        soma = 0;
+        pos = tamanho - 7;
+        for (let i = tamanho; i >= 1; i--) {
+            soma += parseInt(numeros.charAt(tamanho - i), 10) * pos--;
+            if (pos < 2) {
+                pos = 9;
+            }
+        }
+        resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
+        return !(resultado !== parseInt(digitos.charAt(1), 10));
+    }
+}
+
+function CpfValidator(control) {
+    if (control.value) {
+        if (control.value.length <= 14 && !ValidationHelper.validateCpf(control.value)) {
+            return { cpfInvalid: true };
+        }
+    }
+    return null;
+}
+
+function CnpjValidator(control) {
+    if (control.value) {
+        if (control.value.length > 14 && !ValidationHelper.validateCnpj(control.value)) {
+            return { cnpjInvalid: true };
+        }
+    }
+    return null;
+}
+
+function AutocompleteSelectedValidator(control) {
+    if (control.value &&
+        control.value.hasOwnProperty('value') &&
+        control.value.hasOwnProperty('name') &&
+        Object.keys(control.value).length === 2) {
+        return null;
+    }
+    return { autocompleteSelected: true };
+}
+
+class KoalaDynamicFormValidatorResultHelper {
+    static generate(errorMessage) {
+        return {
+            customError: {
+                message: errorMessage
+            }
+        };
+    }
+}
+
+class ShowInvalidFields {
+    constructor() {
+    }
+    isErrorState(control, form) {
+        const isSubmitted = form && form.submitted;
+        return !!(control && control.invalid && (control.errors || control.dirty || control.touched || isSubmitted));
+    }
+}
+
+class FormAbstract {
+    constructor(formAbstract) {
+        this.formAbstract = formAbstract;
+        this.loader = new BehaviorSubject(false);
+        this.btnSubmitDisabled = false;
+        this.getData = new BehaviorSubject(false);
+    }
+    selecionarAutocomplete(controlName, obj, indexName) {
+        if (obj) {
+            let value = indexName ? obj[indexName] : obj;
+            if (Array.isArray(obj)) {
+                value = [];
+                obj.forEach(item => {
+                    value.push(indexName ? item[indexName] : item);
+                });
+            }
+            this.formAbstract().get(controlName).setValue(value);
+        }
+        else {
+            this.formAbstract().get(controlName).setValue('');
+        }
+    }
+    btnClickGetData() {
+        this.getData.next(true);
+    }
+    enableShowInvalidFields() {
+        this.showInvalidFields = new ShowInvalidFields();
+    }
+    loading(show = true, btnLabel) {
+        this.btnSubmitDisabled = show;
+        this.loader.next(show);
+        if (show) {
+            this.btnLabel = btnLabel ? btnLabel : 'Enviando Dados...';
+        }
+        else {
+            this.btnLabel = btnLabel ? btnLabel : 'Enviar';
+        }
+    }
+}
+
+class DynamicFormComponent extends FormAbstract {
+    constructor(fb, dynamicFormService) {
+        super(() => this.form);
+        this.fb = fb;
+        this.dynamicFormService = dynamicFormService;
+        this.tabIndexStart = 1;
+        this.typeField = DynamicFormTypeFieldEnum;
+        this.hoursAndMinutesMask = '00:000';
+        this.errorMessage = KoalaLanguageHelper;
+    }
+    ngOnInit() {
+        var _a;
+        if (!this.form.get('formData')) {
+            this.form.addControl('formData', this.fb.array([]));
+        }
+        this.controls = this.form.get('formData');
+        (_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.forEach((config, indexConfig) => {
+            const newFormGroup = this.newControl(config);
+            if (config.asyncValidators) {
+                newFormGroup.get('value').setAsyncValidators(config.asyncValidators);
+            }
+            newFormGroup.get('value').updateValueAndValidity();
+            if (config.type === DynamicFormTypeFieldEnum.dynamicForm) {
+                const formGroupDynamicFormsSubject = newFormGroup.get('dynamicFormConfig').value;
+                formGroupDynamicFormsSubject.subscribe(formGroupConfig => {
+                    if (formGroupConfig) {
+                        formGroupConfig.form.valueChanges.subscribe(() => {
+                            if (formGroupConfig.form.valid && (config.valueChanges || this.showFieldsMoreItensConfig)) {
+                                const value = this.dynamicFormService.emitData(formGroupConfig.form);
+                                newFormGroup.get('value').setValue(value);
+                            }
+                        });
+                    }
+                });
+            }
+            if (config.valueChanges ||
+                config.type === DynamicFormTypeFieldEnum.autocomplete ||
+                config.type === DynamicFormTypeFieldEnum.dynamicForm ||
+                this.showFieldsMoreItensConfig) {
+                if (config.type === DynamicFormTypeFieldEnum.autocomplete) {
+                    const autocompleteOptionsSubject = newFormGroup.get('autocompleteOptions').value;
+                    if (autocompleteOptionsSubject) {
+                        autocompleteOptionsSubject.subscribe(options => newFormGroup.get('autocompleteOptionsFiltered').value.next(options));
+                    }
+                }
+                newFormGroup.get('value')
+                    .valueChanges
+                    .pipe(debounceTime(300))
+                    .subscribe((value) => __awaiter(this, void 0, void 0, function* () {
+                    var _a, _b, _c, _d;
+                    yield this.setConfigDynamicForm(newFormGroup);
+                    if (config.type === DynamicFormTypeFieldEnum.autocomplete) {
+                        if (value && (value.hasOwnProperty('value') &&
+                            value.hasOwnProperty('name') &&
+                            Object.keys(value).length === 2) || (Array.isArray(value) &&
+                            value.length > 0 &&
+                            newFormGroup.get('multiple').value)) {
+                            if (newFormGroup.get('multiple').value) {
+                                if (Array.isArray(value)) {
+                                    for (const itemValue of value.values()) {
+                                        newFormGroup.get('autocompleteSelectedValue').value.push(itemValue);
+                                    }
+                                }
+                                else {
+                                    newFormGroup.get('autocompleteSelectedValue').value.push(value);
+                                }
+                                if ((_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                                    this.autocompleteInput.nativeElement.value = '';
+                                }
+                            }
+                            else {
+                                newFormGroup.get('autocompleteSelectedValue').setValue(value);
+                            }
+                        }
+                        else if (!newFormGroup.get('multiple').value) {
+                            newFormGroup.get('autocompleteSelectedValue').setValue((_c = (_b = koala(this.formConfig)
+                                .array()
+                                .filter(newFormGroup.get('name').value, 'name')
+                                .getValue()[0]) === null || _b === void 0 ? void 0 : _b.autocompleteDefaultValueOnClear) !== null && _c !== void 0 ? _c : null);
+                        }
+                        if (config.type === DynamicFormTypeFieldEnum.autocomplete) {
+                            if (config.autocompleteType === 'all') {
+                                const autocompleteOptionsSubject = newFormGroup.get('autocompleteOptions').value;
+                                newFormGroup.get('autocompleteOptionsFiltered').value.next(this.autocompleteFilter(autocompleteOptionsSubject.value, value));
+                            }
+                            else if (config.autocompleteType === 'onDemand' && typeof value !== "object") {
+                                const loader = newFormGroup.get('autocompleteLoading').value;
+                                loader.next(true);
+                                config.autocompleteFilter(value).subscribe(options => {
+                                    newFormGroup.get('autocompleteOptionsFiltered').value.next(options);
+                                    loader.next(false);
+                                });
+                            }
+                        }
+                    }
+                    if (config.valueChanges) {
+                        if (config.type === DynamicFormTypeFieldEnum.autocomplete) {
+                            config.valueChanges((newFormGroup.get('multiple').value ?
+                                newFormGroup.get('autocompleteSelectedValue').value.map(item => item.value) :
+                                (_d = newFormGroup.get('autocompleteSelectedValue').value) === null || _d === void 0 ? void 0 : _d.value));
+                        }
+                        else {
+                            config.valueChanges(value);
+                        }
+                    }
+                }));
+            }
+            this.controls.push(newFormGroup);
+            if (config.moreItemsConfig) {
+                if (config.moreItemsMinItems > 0) {
+                    for (let min = 0; min < config.moreItemsMinItems; min++) {
+                        if (min <= config.moreItemsMaxItems) {
+                            this.addMoreItem(indexConfig);
+                        }
+                    }
+                }
+                if (config.moreItemsConfig.setValues) {
+                    config.moreItemsConfig
+                        .setValues
+                        .subscribe((values) => __awaiter(this, void 0, void 0, function* () {
+                        if (values.length > 0) {
+                            values.forEach((itemValue, indexValue) => {
+                                if (!this.controls.controls[indexConfig].get('moreItemsConfig').value[indexValue]) {
+                                    this.addMoreItem(indexConfig);
+                                }
+                                setTimeout(() => {
+                                    this.setValuesOnFields(itemValue, this.controls.controls[indexConfig].get('moreItemsConfig').value[indexValue].form);
+                                }, 300);
+                            });
+                        }
+                    }));
+                }
+            }
+        });
+        if (this.showFields) {
+            this.changeVisibilityFields(this.showFields, this.form);
+        }
+        if (this.setValues) {
+            this.setValuesOnFields(this.setValues, this.form);
+        }
+    }
+    hoursAndMinutesApplyMask(index, event) {
+        var _a;
+        const control = (_a = this.controls) === null || _a === void 0 ? void 0 : _a.controls[index];
+        const type = control === null || control === void 0 ? void 0 : control.get('type').value;
+        if (type === DynamicFormTypeFieldEnum.hoursAndMinutes) {
+            const value = control === null || control === void 0 ? void 0 : control.get('value').value;
+            if (event.key == 'Backspace' && value.length < 6) {
+                this.hoursAndMinutesMask = '00:000';
+            }
+            else if (event.key != 'Backspace' && value.length >= 6) {
+                this.hoursAndMinutesMask = '000:00';
+            }
+        }
+    }
+    passwordView(index) {
+        var _a;
+        const control = (_a = this.controls) === null || _a === void 0 ? void 0 : _a.controls[index];
+        const hidePassword = !(control === null || control === void 0 ? void 0 : control.get('hidePassword').value);
+        control === null || control === void 0 ? void 0 : control.get('hidePassword').setValue(hidePassword);
+        control === null || control === void 0 ? void 0 : control.get('type').setValue(hidePassword ?
+            DynamicFormTypeFieldEnum.password :
+            DynamicFormTypeFieldEnum.text);
+    }
+    addMoreItem(propIndex) {
+        if (this.controls.controls[propIndex].get('moreItemsConfig').value.length < this.controls.controls[propIndex].get('moreItemsMaxItems').value) {
+            const formGroup = this.fb.group({});
+            this.controls.controls[propIndex].get('moreItemsConfig').value.push({
+                form: formGroup,
+                formConfig: this.formConfig[propIndex].moreItemsConfig.formConfig,
+                showFields: new BehaviorSubject([]),
+                showFieldsMoreItensConfig: this.formConfig[propIndex].moreItemsConfig.showFieldsConfig
+            });
+            this.controls.controls[propIndex].get('moreItemsExpanded').setValue(this.controls.controls[propIndex].get('moreItemsConfig').value.length - 1);
+            const formArrayMoreItems = this.controls.controls[propIndex].get('moreItemsFormGroup');
+            formArrayMoreItems.push(formGroup);
+        }
+    }
+    removeMoreItem(propIndex, removeIndex) {
+        const expandedItemIndex = removeIndex - 1;
+        this.controls.controls[propIndex].get('moreItemsConfig').value.splice(removeIndex, 1);
+        setTimeout(() => {
+            this.controls.controls[propIndex].get('moreItemsExpanded').setValue((expandedItemIndex < 0) ? 0 : expandedItemIndex);
+        }, 50);
+    }
+    clearAutocomplete(propIndex) {
+        var _a, _b;
+        if (this.controls.controls[propIndex].get('multiple').value) {
+            this.controls.controls[propIndex].get('autocompleteSelectedValue').setValue([]);
+            this.controls.controls[propIndex].get('value').setValue(null);
+        }
+        else {
+            this.controls.controls[propIndex].get('autocompleteSelectedValue').setValue((_a = this.formConfig[propIndex].autocompleteDefaultValueOnClear) !== null && _a !== void 0 ? _a : null);
+            this.controls.controls[propIndex].get('value').setValue((_b = this.formConfig[propIndex].autocompleteDefaultValueOnClear) !== null && _b !== void 0 ? _b : null);
+        }
+    }
+    display(option) {
+        return option ? option.name : undefined;
+    }
+    removeOptionOnAutocomplete(propIndex, option) {
+        const value = this.controls.controls[propIndex].get('autocompleteSelectedValue').value.filter(item => item !== option);
+        this.controls.controls[propIndex].get('autocompleteSelectedValue').setValue(value);
+        if (value.length === 0) {
+            this.controls.controls[propIndex].get('autocompleteSelectedValue').setValue([]);
+            this.controls.controls[propIndex].get('value').setValue(null);
+        }
+        else if (this.formConfig[propIndex].valueChanges) {
+            this.formConfig[propIndex].valueChanges(value.map(item => item.value));
+        }
+    }
+    getColorChip(config) {
+        return config.color;
+    }
+    newControl(config) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+        let validators = (_a = config.syncValidators) !== null && _a !== void 0 ? _a : [];
+        let value = (_b = config.value) !== null && _b !== void 0 ? _b : '';
+        let valueSelectedAutocomplete = (config.multiple ? [] : ((_c = config.autocompleteDefaultValueOnClear) !== null && _c !== void 0 ? _c : null));
+        if (config.required === true)
+            validators.push(Validators.required);
+        if (config.min && typeof config.min === "number")
+            validators.push(Validators.min(config.min));
+        if (config.max && typeof config.max === "number")
+            validators.push(Validators.max(config.max));
+        if (config.type === DynamicFormTypeFieldEnum.date ||
+            config.type === DynamicFormTypeFieldEnum.datetime ||
+            config.type === DynamicFormTypeFieldEnum.time) {
+            if (config.min && typeof config.min === "string") {
+                validators.push(DateMinValidator(config.min));
+            }
+            if (config.max && typeof config.max === "string") {
+                validators.push(DateMaxValidator(config.max));
+            }
+        }
+        if (config.minLength)
+            validators.push(Validators.minLength(config.minLength));
+        if (config.maxLength)
+            validators.push(Validators.maxLength(config.maxLength));
+        if (config.type === DynamicFormTypeFieldEnum.cpf) {
+            validators.push(CpfValidator);
+        }
+        else if (config.type === DynamicFormTypeFieldEnum.cnpj) {
+            validators.push(CnpjValidator);
+        }
+        else if (config.type === DynamicFormTypeFieldEnum.email) {
+            validators.push(Validators.email);
+        }
+        else if (config.type === DynamicFormTypeFieldEnum.autocomplete) {
+            if (value) {
+                valueSelectedAutocomplete = value;
+                value = (config.multiple ? valueSelectedAutocomplete[0] : value);
+            }
+            if (config.required === true) {
+                validators.push(AutocompleteSelectedValidator);
+            }
+        }
+        else if (config.type === DynamicFormTypeFieldEnum.checkbox) {
+            value = (_d = config.value) !== null && _d !== void 0 ? _d : false;
+        }
+        if (config.type === DynamicFormTypeFieldEnum.hoursAndMinutes &&
+            value.length >= 6) {
+            this.hoursAndMinutesMask = '000:00';
+        }
+        if (config.dynamicFormConfig) {
+            const cloneDynamicFormConfig = {};
+            Object.assign(cloneDynamicFormConfig, config.dynamicFormConfig);
+            cloneDynamicFormConfig.form = config.dynamicFormConfig.form;
+            config.dynamicFormConfig = cloneDynamicFormConfig;
+        }
+        if (config.show === false) {
+            validators = [];
+        }
+        const field = this.fb.group({
+            show: [new BehaviorSubject((_e = config.show) !== null && _e !== void 0 ? _e : true)],
+            label: [config.label],
+            name: [config.name],
+            type: [config.type],
+            fileButtonConfig: [{
+                    icon: (_g = (_f = config === null || config === void 0 ? void 0 : config.fileButtonConfig) === null || _f === void 0 ? void 0 : _f.icon) !== null && _g !== void 0 ? _g : 'attach_file',
+                    text: (_j = (_h = config === null || config === void 0 ? void 0 : config.fileButtonConfig) === null || _h === void 0 ? void 0 : _h.text) !== null && _j !== void 0 ? _j : 'Clique para anexar arquivos',
+                    backgroundColor: (_l = (_k = config === null || config === void 0 ? void 0 : config.fileButtonConfig) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : 'white',
+                    color: (_o = (_m = config === null || config === void 0 ? void 0 : config.fileButtonConfig) === null || _m === void 0 ? void 0 : _m.color) !== null && _o !== void 0 ? _o : 'blue',
+                    accept: (_q = (_p = config === null || config === void 0 ? void 0 : config.fileButtonConfig) === null || _p === void 0 ? void 0 : _p.accept) !== null && _q !== void 0 ? _q : '*'
+                }],
+            dynamicFormConfig: [new BehaviorSubject(config.dynamicFormConfig)],
+            dynamicFormGroup: this.fb.array([]),
+            appearance: [config.appearance],
+            floatLabel: [config.floatLabel],
+            placeholder: [config.placeholder],
+            class: [config.class],
+            fieldClass: [config.fieldClass],
+            textHint: [config.textHint],
+            required: [(_r = config.required) !== null && _r !== void 0 ? _r : false],
+            min: [(_s = config.min) !== null && _s !== void 0 ? _s : 0],
+            max: [(_t = config.max) !== null && _t !== void 0 ? _t : 99999999999],
+            minLength: [(_u = config.minLength) !== null && _u !== void 0 ? _u : 0],
+            maxLength: [(_v = config.maxLength) !== null && _v !== void 0 ? _v : 255],
+            disabled: [(_w = config.disabled) !== null && _w !== void 0 ? _w : false],
+            focus: [(_x = config.focus) !== null && _x !== void 0 ? _x : false],
+            multiple: [(_y = config.multiple) !== null && _y !== void 0 ? _y : false],
+            opcoesSelect: [(_z = config.opcoesSelect) !== null && _z !== void 0 ? _z : []],
+            hidePassword: config.type === DynamicFormTypeFieldEnum.password ? true : null,
+            moreItemsButtonIconAddlabel: [config.moreItemsButtonIconAddlabel],
+            moreItemsMinItems: [(_0 = config.moreItemsMinItems) !== null && _0 !== void 0 ? _0 : 0],
+            moreItemsMaxItems: [(_1 = config.moreItemsMaxItems) !== null && _1 !== void 0 ? _1 : 100],
+            moreItemsIcon: [config.moreItemsIcon],
+            moreItemsIconFontColor: [config.moreItemsIconFontColor],
+            moreItemsIconBackgroundColor: [config.moreItemsIconBackgroundColor],
+            moreItemsExpanded: [''],
+            moreItemsConfig: [[]],
+            moreItemsFormGroup: this.fb.array([]),
+            autocompleteLoading: [new BehaviorSubject(false)],
+            autocompleteOptions: [config.autocompleteOptions],
+            autocompleteMultipleConfig: [config.autocompleteMultipleConfig],
+            autocompleteOptionsFiltered: [new BehaviorSubject([])],
+            autocompleteSelectedValue: [valueSelectedAutocomplete],
+            textLogs: [config === null || config === void 0 ? void 0 : config.textObs],
+            customMasc: [config === null || config === void 0 ? void 0 : config.customMasc],
+            value: [{ value, disabled: config.disabled }, validators, config.asyncValidators]
+        });
+        if (config.autocompleteType === "onDemand") {
+            const loader = field.get('autocompleteLoading').value;
+            loader.next(true);
+            config.autocompleteFilter('').subscribe(options => {
+                field.get('autocompleteOptionsFiltered').value.next(options);
+                loader.next(false);
+            });
+        }
+        return field;
+    }
+    setValuesOnFields(subject, form) {
+        subject.subscribe(item => {
+            if (item) {
+                const formArray = form.get('formData');
+                for (const prop of item.values()) {
+                    this.setValueByProp(formArray, prop);
+                }
+            }
+        });
+    }
+    changeVisibilityFields(subject, form) {
+        subject.pipe(debounceTime(5)).subscribe(item => {
+            var _a, _b, _c;
+            if (item) {
+                const formArray = form.get('formData');
+                for (const prop of item.values()) {
+                    for (const [indexControl, control] of formArray.controls.entries()) {
+                        if (control.get('name').value === prop.name) {
+                            control.get('show').value.next(prop.show);
+                            const config = (_a = this.formConfig[indexControl]) !== null && _a !== void 0 ? _a : null;
+                            if (prop.show) {
+                                let validators = [];
+                                if (config) {
+                                    if (config.type === DynamicFormTypeFieldEnum.dynamicForm) {
+                                        const formArrayMoreItems = control.get('dynamicFormGroup');
+                                        formArrayMoreItems.push((_b = config === null || config === void 0 ? void 0 : config.dynamicFormConfig) === null || _b === void 0 ? void 0 : _b.form);
+                                    }
+                                    else {
+                                        validators = (_c = config.syncValidators) !== null && _c !== void 0 ? _c : [];
+                                        if (config.required === true) {
+                                            validators.push(Validators.required);
+                                        }
+                                        if (config.type === DynamicFormTypeFieldEnum.cpf) {
+                                            validators.push(CpfValidator);
+                                        }
+                                        else if (config.type === DynamicFormTypeFieldEnum.cnpj) {
+                                            validators.push(CnpjValidator);
+                                        }
+                                        else if (config.type === DynamicFormTypeFieldEnum.email) {
+                                            validators.push(Validators.email);
+                                        }
+                                        else if (config.required === true &&
+                                            config.type === DynamicFormTypeFieldEnum.autocomplete) {
+                                            validators.push(AutocompleteSelectedValidator);
+                                        }
+                                        if (config.min && typeof config.min === "number")
+                                            validators.push(Validators.min(config.min));
+                                        if (config.max && typeof config.max === "number")
+                                            validators.push(Validators.max(config.max));
+                                        if (config.type === DynamicFormTypeFieldEnum.date ||
+                                            config.type === DynamicFormTypeFieldEnum.datetime ||
+                                            config.type === DynamicFormTypeFieldEnum.time) {
+                                            if (config.min && typeof config.min === "string") {
+                                                validators.push(DateMinValidator(config.min));
+                                            }
+                                            if (config.max && typeof config.max === "string") {
+                                                validators.push(DateMaxValidator(config.max));
+                                            }
+                                        }
+                                        if (config.minLength)
+                                            validators.push(Validators.minLength(config.minLength));
+                                        if (config.maxLength)
+                                            validators.push(Validators.maxLength(config.maxLength));
+                                        control.get('value').setValidators(validators);
+                                        if (config.asyncValidators) {
+                                            control.get('value').setAsyncValidators(config.asyncValidators);
+                                        }
+                                    }
+                                    control.get('value').updateValueAndValidity();
+                                    if (prop.clearCurrentValue) {
+                                        control.get('value').setValue(null);
+                                    }
+                                }
+                            }
+                            else {
+                                control.get('value').clearValidators();
+                                control.get('value').clearAsyncValidators();
+                                control.setErrors(null);
+                                control.get('value').setValue(null);
+                                control.get('value').updateValueAndValidity();
+                                if (config.type === DynamicFormTypeFieldEnum.dynamicForm) {
+                                    const formGroup = control;
+                                    formGroup.removeControl('dynamicFormGroup');
+                                    formGroup.addControl('dynamicFormGroup', this.fb.array([]));
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+        });
+    }
+    autocompleteFilter(arr, value) {
+        return arr.filter(filter => {
+            if (typeof value === 'string') {
+                if (filter) {
+                    let find = true;
+                    value.toLowerCase()
+                        .split(' ')
+                        .forEach(part => {
+                        if (filter.name.toLowerCase().indexOf(part) < 0) {
+                            find = false;
+                            return false;
+                        }
+                    });
+                    return find;
+                }
+            }
+            else {
+                return true;
+            }
+        });
+    }
+    setValueByProp(formArray, prop) {
+        if (formArray) {
+            if (prop.name.indexOf(' > ') >= 0) {
+                let dynamicFormSubject;
+                const arrPropName = prop.name.split(' > ');
+                let indexPropName = 0;
+                do {
+                    const control = formArray.controls.find(control => control.get('name').value === arrPropName[indexPropName]);
+                    if (indexPropName === arrPropName.length - 2) {
+                        dynamicFormSubject = control.get('dynamicFormConfig').value;
+                        const dynamicForm = dynamicFormSubject.getValue();
+                        if (dynamicForm.formConfig.find(fc => fc.name === arrPropName[arrPropName.length - 1])) {
+                            if (dynamicForm.setValues) {
+                                dynamicForm.setValues.next(koala(dynamicForm.setValues.getValue()).array().merge([{
+                                        name: arrPropName[arrPropName.length - 1],
+                                        value: prop.value
+                                    }]).getValue());
+                            }
+                            else {
+                                dynamicForm.setValues = new BehaviorSubject([{
+                                        name: arrPropName[arrPropName.length - 1],
+                                        value: prop.value
+                                    }]);
+                            }
+                        }
+                    }
+                    indexPropName++;
+                } while (indexPropName < arrPropName.length - 1);
+            }
+            else {
+                for (const control of formArray.controls.values()) {
+                    if (control.get('name').value === prop.name) {
+                        control.get('value').setValue(prop.value);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    setConfigDynamicForm(newFormGroup) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.showFieldsMoreItensConfig) {
+                const value = newFormGroup.get('value').value;
+                const configs = this.showFieldsMoreItensConfig
+                    .filter(config => config.nameField === newFormGroup.get('name').value)
+                    .sort(config => {
+                    if (config.fnShow(value)) {
+                        return 1;
+                    }
+                    return -1;
+                });
+                for (const config of configs) {
+                    if (config) {
+                        if (config.dynamicFormConfig && config.fnShow(value)) {
+                            const controlDynamicFormConfig = this.controls
+                                .controls
+                                .find(control => config.fieldsToShow.indexOf(control.get('name').value) >= 0);
+                            const dynamicFormConfigSubject = controlDynamicFormConfig.get('dynamicFormConfig').value;
+                            dynamicFormConfigSubject.next(null);
+                            yield KlDelay.waitFor(1);
+                            dynamicFormConfigSubject.next(config.dynamicFormConfig(value));
+                        }
+                        this.dynamicFormService.showFields(this.showFields, config.fieldsToShow, config.fnShow(value), config.clearCurrentValue);
+                    }
+                }
+            }
+        });
+    }
+}
+DynamicFormComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'koala-dynamic-form',
+                template: "<div [formGroup]=\"form\" class=\"p-relative w-100\">\n  <div *ngFor=\"let propriedade of controls?.controls; let i = index;\"\n       [ngClass]=\"(propriedade.get('show').value | async) ? propriedade.get('class').value : 'd-none'\"\n       formArrayName=\"formData\">\n\t  <div *ngIf=\"propriedade.get('show').value | async\">\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.text ||\n\t             propriedade.get('type').value == typeField.password ||\n\t             propriedade.get('type').value == typeField.cpf ||\n\t             propriedade.get('type').value == typeField.cnpj ||\n\t             propriedade.get('type').value == typeField.datetime ||\n\t             propriedade.get('type').value == typeField.email ||\n\t             propriedade.get('type').value == typeField.number ||\n\t             propriedade.get('type').value == typeField.stringNumber ||\n\t             propriedade.get('type').value == typeField.time ||\n\t             propriedade.get('type').value == typeField.date ||\n\t             propriedade.get('type').value == typeField.hoursAndMinutes ||\n\t             propriedade.get('type').value == typeField.phone ||\n\t             propriedade.get('type').value == typeField.percent ||\n\t             propriedade.get('type').value == typeField.color ||\n\t             propriedade.get('type').value == typeField.month ||\n\t             propriedade.get('type').value == typeField.competenceDate ||\n               propriedade.get('type').value == typeField.stringWithCustomMasc\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <input\n\t\t      [dropSpecialCharacters]=\"false\"\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      (keyup)=\"hoursAndMinutesApplyMask(i, $event)\"\n\t\t      [required]=\"propriedade.get('required').value\"\n\t\t      [tabIndex]=\"tabIndexStart + i\"\n\t\t      [mask]=\"((propriedade.get('type').value == typeField.competenceDate) ? '00/0000' : null) ||\n\t\t              ((propriedade.get('type').value == typeField.phone) ? '(00)0000-0000?0' : null) ||\n\t\t              ((propriedade.get('type').value == typeField.stringNumber) ? '0{'+propriedade.get('maxLength').value+'}' : null) ||\n                  ((propriedade.get('type').value == typeField.cpf) ? '000.000.000-00' : null) ||\n                  ((propriedade.get('type').value == typeField.cnpj) ? '00.000.000/0000-00' : null) ||\n                  ((propriedade.get('type').value == typeField.percent) ? 'percent' : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.hoursAndMinutes) ? hoursAndMinutesMask : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.stringWithCustomMasc) ? propriedade.get('customMasc').value : null)\"\n\t\t      [validation]=\"\n\t                    (propriedade.get('type').value == typeField.cpf && propriedade.get('value').errors?.cpfInvalid) ||\n\t                    (propriedade.get('type').value == typeField.cnpj && propriedade.get('value').errors?.cnpjInvalid)\"\n\t\t      [type]=\"((propriedade.get('type').value == typeField.cpf ||\n                    propriedade.get('type').value == typeField.cnpj ||\n                    propriedade.get('type').value == typeField.phone ||\n                    propriedade.get('type').value == typeField.percent\n                  )) ? 'tel' : (\n                    propriedade.get('type').value == typeField.month ?\n                    'month' : (\n                    propriedade.get('type').value == typeField.date ?\n                    'date' : (\n                    propriedade.get('type').value == typeField.datetime ?\n                    'datetime-local' : (\n                    propriedade.get('type').value == typeField.email ?\n                    'email' : (\n                    propriedade.get('type').value == typeField.number ?\n                    'number' : (\n                    propriedade.get('type').value == typeField.time ?\n                    'time' : (\n                    propriedade.get('type').value == typeField.password ?\n                    'password' : (\n                    propriedade.get('type').value == typeField.color ?\n                    'color' : 'text'))))))))\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          separatorLimit=\"0\"\n\t\t      showMaskTyped\n          autocomplete=\"off\"\n\t\t      formControlName=\"value\"\n\t\t      matInput/>\n\t      <button\n\t\t      (click)=\"passwordView(i)\"\n\t\t      *ngIf=\"propriedade.get('hidePassword').value !== null\"\n\t\t      [attr.aria-label]=\"'Hide password'\"\n\t\t      [attr.aria-pressed]=\"propriedade.get('hidePassword').value\"\n\t\t      mat-icon-button matSuffix tabindex=\"-1\" type=\"button\">\n\t        <mat-icon>{{propriedade.get('hidePassword').value ? 'visibility_off' : 'visibility'}}</mat-icon>\n\t      </button>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.cpfInvalid\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.cnpjInvalid\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.email\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.dateMin\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getDateMinMessage()}}\n          {{propriedade.get('min').value | date:\"shortDate\"}}.\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.dateMax\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getDateMaxMessage()}}\n          {{propriedade.get('max').value | date:\"shortDate\"}}.\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.coin\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <input\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          autocomplete=\"off\"\n\t\t      currencyMask\n\t\t      formControlName=\"value\"\n\t\t      matInput\n\t\t      type=\"tel\"/>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n      <mat-form-field\n        *ngIf=\"propriedade.get('type').value == typeField.float\"\n        [appearance]=\"propriedade.get('appearance').value\"\n        [floatLabel]=\"propriedade.get('floatLabel').value\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-label>{{propriedade.get('label').value}}</mat-label>\n        <input\n          [koalaAutoFocus]=\"propriedade.get('focus').value\"\n          [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          autocomplete=\"off\"\n          currencyMask\n          [options]=\"{prefix: ''}\"\n          formControlName=\"value\"\n          matInput\n          type=\"tel\"/>\n        <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n          <mat-icon>info</mat-icon>\n          {{propriedade.get('textHint').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n      </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.valueList ||\n\t             propriedade.get('type').value == typeField.textarea\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <textarea\n          #textarea\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"3\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t      formControlName=\"value\"\n\t\t      matInput>\n        </textarea>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n          {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t\t  <mat-form-field\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.textLogs\"\n\t\t\t  [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t  [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <div [innerHTML]=\"propriedade.get('textLogs').value\" class=\"text-obs\"></div>\n\t      <textarea\n          #textarea\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"3\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t      formControlName=\"value\"\n\t\t      matInput>\n\t      </textarea>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n          {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.select\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <mat-select [multiple]=\"propriedade.get('multiple').value\" [required]=\"propriedade.get('required').value\"\n                    [tabIndex]=\"tabIndexStart + i\" formControlName=\"value\">\n\t        <mat-option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n\t          {{options.name}}\n\t        </mat-option>\n\t      </mat-select>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n      <mat-form-field\n        class=\"select-multiple-native\"\n        *ngIf=\"propriedade.get('type').value == typeField.selectMultipleNative\"\n        [appearance]=\"propriedade.get('appearance').value\"\n        [floatLabel]=\"propriedade.get('floatLabel').value\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-label>{{propriedade.get('label').value}}</mat-label>\n        <select\n          matNativeControl\n          formControlName=\"value\"\n          multiple\n          [tabIndex]=\"tabIndexStart + i\"\n          [required]=\"propriedade.get('required').value\">\n          <option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n            {{options.name}}\n          </option>\n        </select>\n        <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n          <mat-icon>info</mat-icon>\n          {{propriedade.get('textHint').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n      </mat-form-field>\n\t    <div\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.checkbox\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-checkbox\n          [tabIndex]=\"tabIndexStart + i\"\n\t\t      formControlName=\"value\"\n\t\t      value=\"true\">\n\t        {{propriedade.get('label').value}}\n\t      </mat-checkbox>\n\t    </div>\n\t\t  <div\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.moreItems\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\"\n\t\t\t  class=\"more-items-content\">\n\t\t\t  <fieldset>\n\t\t\t\t  <legend>\n\t\t\t\t\t  <koala-button\n\t\t\t\t\t\t  (click)=\"addMoreItem(i)\"\n\t\t\t\t\t\t  [disabled]=\"propriedade.get('moreItemsConfig').value.length === propriedade.get('moreItemsMaxItems').value\"\n\t\t\t\t\t\t  [tooltip]=\"propriedade.get('moreItemsButtonIconAddlabel').value\"\n\t\t\t\t\t\t  [backgroundColor]=\"propriedade.get('moreItemsIconBackgroundColor').value\"\n              [color]=\"propriedade.get('moreItemsIconFontColor').value\"\n\t\t\t\t\t\t  class=\"btn-add-more-items\"\n\t\t\t\t\t\t  icon=\"add\">\n\t\t\t\t\t  </koala-button>\n\t\t\t\t\t  {{propriedade.get('label').value}} (Min.: {{propriedade.get('moreItemsMinItems').value}}\n\t\t\t\t\t                                     | M\u00E1x.: {{propriedade.get('moreItemsMaxItems').value}})\n\t\t\t\t  </legend>\n\t\t\t\t  <mat-accordion class=\"items\" multi>\n\t\t\t\t\t  <mat-expansion-panel\n\t\t\t\t\t\t  *ngFor=\"let item of propriedade.get('moreItemsConfig').value.slice().reverse(); index as indexMoreItems\"\n\t\t\t\t\t\t  expanded>\n\t\t\t\t\t\t  <mat-expansion-panel-header>\n\t\t\t\t\t\t\t\t<mat-panel-title class=\"titleForm\">#\n\t\t\t\t\t\t\t\t\t{{propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems + 1}}</mat-panel-title>\n\t\t\t\t\t\t\t\t<mat-panel-description class=\"titleForm\">\n\t\t\t\t\t\t\t\t\t{{propriedade.get('label').value}}\n\t\t\t\t\t\t\t\t\t<mat-icon>{{propriedade.get('moreItemsIcon').value}}</mat-icon>\n\t\t\t\t\t\t\t\t</mat-panel-description>\n\t\t\t\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t\t\t  [showFieldsMoreItensConfig]=\"item.showFieldsMoreItensConfig\"\n\t\t\t\t\t\t\t  [showFields]=\"item.showFields\"\n\t\t\t\t\t\t\t  [formConfig]=\"item.formConfig\"\n\t\t\t\t\t\t\t  [form]=\"item.form\"\n                [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t\t\t  </koala-dynamic-form>\n\t\t\t\t\t    <mat-action-row\n\t\t\t\t\t\t    *ngIf=\"propriedade.get('moreItemsConfig').value.length > propriedade.get('moreItemsMinItems').value\">\n\t\t\t\t\t      <button\n\t\t\t\t\t\t      (click)=\"removeMoreItem(i, propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems)\"\n\t\t\t\t\t\t      mat-icon-button>\n\t\t\t\t\t\t      <mat-icon>delete</mat-icon>\n\t\t\t\t\t      </button>\n\t\t\t\t\t    </mat-action-row>\n\t\t\t\t\t  </mat-expansion-panel>\n\t\t\t\t  </mat-accordion>\n\t\t\t  </fieldset>\n\t\t  </div>\n\t\t  <mat-form-field\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.autocomplete\"\n\t\t\t  [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t  [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}} {{propriedade.get('multiple').value &&\n\t      propriedade.get('required').value ? '*' : ''}}</mat-label>\n\t\t\t  <div *ngIf=\"propriedade.get('multiple').value else single\">\n\t        <mat-chip-list #chipList>\n\t          <mat-chip\n\t\t          (removed)=\"removeOptionOnAutocomplete(i, option)\"\n\t\t          *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n\t\t          [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n\t\t          [removable]=\"true\"\n\t\t          [selectable]=\"true\">\n\t            {{display(option)}}\n\t\t          <mat-icon matChipRemove>cancel</mat-icon>\n\t          </mat-chip>\n\t          <input\n\t\t          #autocompleteInput\n              [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t          [required]=\"propriedade.get('required').value\"\n\t\t          [matAutocomplete]=\"auto\"\n\t\t          [matChipInputFor]=\"chipList\"\n              [tabIndex]=\"tabIndexStart + i\"\n\t\t          formControlName=\"value\"\n\t\t          matInput\n\t\t          type=\"text\"\n\t\t          placeholder=\"Selecione um ou mais op\u00E7\u00F5es...\">\n\t        </mat-chip-list>\n\t      </div>\n\t      <ng-template #single>\n\t\t      <input\n\t\t\t      [matAutocomplete]=\"auto\"\n            [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t\t      [required]=\"propriedade.get('required').value\"\n            [tabIndex]=\"tabIndexStart + i\"\n\t\t\t      formControlName=\"value\"\n\t\t\t      matInput\n\t\t\t      placeholder=\"Selecione uma op\u00E7\u00E3o...\"\n\t\t\t      type=\"text\">\n\t      </ng-template>\n\t      <mat-spinner *ngIf=\"propriedade.get('autocompleteLoading').value | async\" color=\"primary\"\n\t                   matSuffix></mat-spinner>\n\t      <button\n\t\t      (click)=\"clearAutocomplete(i)\"\n\t\t      *ngIf=\"\n\t          !(propriedade.get('autocompleteLoading').value | async) &&\n\t          !propriedade.get('disabled').value\"\n\t\t      color=\"warn\"\n\t\t      mat-icon-button\n\t\t      matSuffix\n\t\t      type=\"button\">\n\t        <mat-icon>close</mat-icon>\n\t      </button>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required || propriedade.get('value').errors?.autocompleteSelected\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getAutocompleteMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t      <mat-autocomplete\n\t\t      #auto=\"matAutocomplete\"\n\t\t      [displayWith]=\"display\" autoActiveFirstOption>\n\t\t      <div *ngIf=\"(propriedade.get('autocompleteOptionsFiltered').value | async) as options\">\n\t\t        <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n\t\t          {{option.name}}\n\t\t        </mat-option>\n\t\t      </div>\n\t      </mat-autocomplete>\n\t    </mat-form-field>\n\t\t  <div *ngIf=\"propriedade.get('type').value == typeField.file\">\n\t\t\t  <koala-file-button\n\t\t\t\t  (getFiles)=\"propriedade.get('value').setValue($event)\"\n\t\t\t\t  [accept]=\"propriedade.get('fileButtonConfig').value.accept\"\n\t\t\t\t  [backgroundColor]=\"propriedade.get('fileButtonConfig').value.backgroundColor\"\n\t\t\t\t  [color]=\"propriedade.get('fileButtonConfig').value.color\"\n\t\t\t\t  [disabled]=\"propriedade.get('disabled').value\"\n\t\t\t\t  [icon]=\"propriedade.get('fileButtonConfig').value.icon\"\n\t\t\t\t  [multiple]=\"propriedade.get('multiple').value\"\n\t\t\t\t  [text]=\"propriedade.get('fileButtonConfig').value.text\">\n\t\t\t  </koala-file-button>\n\t\t  </div>\n\t\t  <div *ngIf=\"\n\t\t    propriedade.get('type').value == typeField.dynamicForm &&\n\t\t\t\t(propriedade.get('dynamicFormConfig').value | async) as dynamicFormConfig\">\n\t\t\t  <fieldset *ngIf=\"propriedade.get('label').value else dynamicFormWithoutLabel\">\n\t\t\t\t  <legend>{{propriedade.get('label').value}}</legend>\n\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t  [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t  [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t  [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t  [showFields]=\"dynamicFormConfig.showFields\"\n            [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t  </koala-dynamic-form>\n\t\t\t  </fieldset>\n\t\t\t  <ng-template #dynamicFormWithoutLabel>\n\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t  [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t  [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t  [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t  [showFields]=\"dynamicFormConfig.showFields\"\n            [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t  </koala-dynamic-form>\n\t\t\t  </ng-template>\n\t\t  </div>\n      <div\n        class=\"radio-btn-group\"\n        *ngIf=\"propriedade.get('type').value == typeField.radio\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-radio-group formControlName=\"value\">\n          <label *ngIf=\"propriedade.get('label').value\">{{propriedade.get('label').value}}</label>\n          <mat-radio-button\n            [tabIndex]=\"tabIndexStart + i\"\n            *ngFor=\"let options of propriedade.get('opcoesSelect').value\"\n            [value]=\"options.value\">\n            {{options.name}}\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\t  </div>\n  </div>\n  <ng-content select=\"[btn-submit]\"></ng-content>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".more-items-content fieldset{border:1px solid #cccccc;padding:16px}.more-items-content fieldset legend{font-family:\"Josefin Sans\",sans-serif;font-size:11px;font-weight:bold;padding:0 8px}.more-items-content .items .titleForm{color:#616161}.more-items-content .items .mat-expansion-panel-header-title,.more-items-content .items .mat-expansion-panel-header-description{flex-basis:0}.more-items-content .items .mat-expansion-panel-header-description{align-items:center;justify-content:space-between}.more-items-content .items .mat-form-field+.mat-form-field{margin-left:8px}.radio-btn-group label{position:relative;display:block;padding:10px 0}.text-obs{background:#eeeeee;border-radius:5px;color:#212121;font-family:OpenSansLight,sans-serif;height:150px;margin:0 auto 10px;overflow-y:auto;padding:10px;position:relative;width:calc(100% - 27px)}.select-multiple-native{margin-bottom:15px}.select-multiple-native select{width:100%;height:150px;background:transparent;border:none}.select-multiple-native select:focus,.select-multiple-native select:active{outline:none}.select-multiple-native select option{padding:5px 10px;font-family:JosefinSans,sans-serif}.select-multiple-native select option:checked{background:#f1f1f1!important}\n"]
+            },] }
+];
+DynamicFormComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: KoalaDynamicFormService }
+];
+DynamicFormComponent.propDecorators = {
+    form: [{ type: Input }],
+    formConfig: [{ type: Input }],
+    showFields: [{ type: Input }],
+    showFieldsMoreItensConfig: [{ type: Input }],
+    setValues: [{ type: Input }],
+    tabIndexStart: [{ type: Input }],
+    autocompleteInput: [{ type: ViewChild, args: ['autocompleteInput',] }]
+};
+
+class KoalaAutofocusDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterContentInit() {
+        if (this.koalaAutoFocus) {
+            setTimeout(() => {
+                this.el.nativeElement.focus();
+            }, 500);
+        }
+    }
+}
+KoalaAutofocusDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[koalaAutoFocus]'
+            },] }
+];
+KoalaAutofocusDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+KoalaAutofocusDirective.propDecorators = {
+    koalaAutoFocus: [{ type: Input }]
+};
+
+class KoalaFormModule {
+}
+KoalaFormModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    BtnSubmitComponent,
+                    DynamicFormComponent,
+                    KoalaAutofocusDirective
+                ],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    FormsModule,
+                    CurrencyMaskModule,
+                    NgxMaskModule.forRoot(maskOptions),
+                    KoalaFileButtonModule,
+                    MatInputModule,
+                    MatSelectModule,
+                    MatRadioModule,
+                    MatCheckboxModule,
+                    MatAutocompleteModule,
+                    MatButtonModule,
+                    MatIconModule,
+                    MatExpansionModule,
+                    MatChipsModule,
+                    KoalaButtonModule,
+                    MatProgressSpinnerModule
+                ],
+                exports: [
+                    ReactiveFormsModule,
+                    FormsModule,
+                    KoalaAutofocusDirective,
+                    NgxMaskModule,
+                    KoalaFileButtonModule,
+                    MatInputModule,
+                    MatSelectModule,
+                    MatRadioModule,
+                    MatCheckboxModule,
+                    MatAutocompleteModule,
+                    MatButtonModule,
+                    MatIconModule,
+                    MatProgressSpinnerModule,
+                    BtnSubmitComponent,
+                    DynamicFormComponent
+                ]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutocompleteSelectedValidator, BtnSubmitComponent, CnpjValidator, CpfValidator, DynamicFormComponent, DynamicFormTypeFieldEnum, FormAbstract, KoalaAutofocusDirective, KoalaDynamicFormService, KoalaDynamicFormValidatorResultHelper, KoalaFormModule, ShowInvalidFields, ValidationHelper };
+//# sourceMappingURL=koalarx-ui-form.js.map