@koalarx/ui 14.0.7 → 14.0.9

package/form/fesm2020/koalarx-ui-form.mjs

@@ -44,1544 +44,1545 @@ import * as i19 from '@koalarx/ui/button';
 import { KoalaButtonModule } from '@koalarx/ui/button';
 import { maskOptions } from '@koalarx/ui/common';
 
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: BtnSubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BtnSubmitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: BtnSubmitComponent, selector: "koala-submit", inputs: { fg: "fg", color: "color", btnLabel: "btnLabel", btnSubmitDisabled: "btnSubmitDisabled", loader: "loader", iconButton: "iconButton", icon: "icon", iconColor: "iconColor" }, usesOnChanges: true, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: 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"] }]
-        }], 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
+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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BtnSubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BtnSubmitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BtnSubmitComponent, selector: "koala-submit", inputs: { fg: "fg", color: "color", btnLabel: "btnLabel", btnSubmitDisabled: "btnSubmitDisabled", loader: "loader", iconButton: "iconButton", icon: "icon", iconColor: "iconColor" }, usesOnChanges: true, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: 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"] }]
+        }], 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";
+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;
-        return this;
-    }
-    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) {
-        if (this.deviceService.isMobile()) {
-            size = 12;
-        }
-        for (let colSize = 12; colSize >= 1; colSize--) {
-            this.fieldConfig.class = this.fieldConfig.class?.replace('col-' + colSize, '');
-        }
-        this.addClass('col-' + size);
-        this.addFieldClass('w-' + width);
-        return this;
-    }
-    setOptions(options) {
-        this.fieldConfig.opcoesSelect = options;
-        return this;
-    }
-    addClass(className) {
-        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(`${this.fieldConfig?.class ?? ''} ${className}`)
-            .string()
-            .split(' ')
-            .clearEmptyValues()
-            .toString(' ')
-            .getValue();
-        return this;
-    }
-    addFieldClass(className) {
-        this.fieldConfig.fieldClass = koala(`${this.fieldConfig?.fieldClass ?? ''} ${className}`)
-            .string()
-            .split(' ')
-            .clearEmptyValues()
-            .toString(' ')
-            .getValue();
-        return this;
-    }
-    setCustomMasc(mask, config) {
-        this.fieldConfig.customMasc = mask;
-        this.fieldConfig.customMascThousandSeparator = config?.thousandSeparator;
-        this.fieldConfig.customMascSuffix = config?.suffix;
-        this.fieldConfig.customMascPrefix = config?.prefix;
-        return this;
-    }
-    generate() {
-        let getLastConfig = (this.formConfig.formConfig.length > 0) ?
-            this.formConfig.formConfig[this.formConfig.formConfig.length - 1] :
-            null;
-        if (getLastConfig?.type === DynamicFormTypeFieldEnum.moreItems && getLastConfig?.name !== 'endMoreItems') {
-            this.formConfig.formConfig[this.formConfig.formConfig.length - 1].moreItemsConfig.formConfig.push(this.fieldConfig);
-        }
-        else {
-            if (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 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;
+        return this;
+    }
+    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) {
+        if (this.deviceService.isMobile()) {
+            size = 12;
+        }
+        for (let colSize = 12; colSize >= 1; colSize--) {
+            this.fieldConfig.class = this.fieldConfig.class?.replace('col-' + colSize, '');
+        }
+        this.addClass('col-' + size);
+        this.addFieldClass('w-' + width);
+        return this;
+    }
+    setOptions(options) {
+        this.fieldConfig.opcoesSelect = options;
+        return this;
+    }
+    addClass(className) {
+        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(`${this.fieldConfig?.class ?? ''} ${className}`)
+            .string()
+            .split(' ')
+            .clearEmptyValues()
+            .toString(' ')
+            .getValue();
+        return this;
+    }
+    addFieldClass(className) {
+        this.fieldConfig.fieldClass = koala(`${this.fieldConfig?.fieldClass ?? ''} ${className}`)
+            .string()
+            .split(' ')
+            .clearEmptyValues()
+            .toString(' ')
+            .getValue();
+        return this;
+    }
+    setCustomMasc(mask, config) {
+        this.fieldConfig.customMasc = mask;
+        this.fieldConfig.customMascThousandSeparator = config?.thousandSeparator;
+        this.fieldConfig.customMascSuffix = config?.suffix;
+        this.fieldConfig.customMascPrefix = config?.prefix;
+        return this;
+    }
+    generate() {
+        let getLastConfig = (this.formConfig.formConfig.length > 0) ?
+            this.formConfig.formConfig[this.formConfig.formConfig.length - 1] :
+            null;
+        if (getLastConfig?.type === DynamicFormTypeFieldEnum.moreItems && getLastConfig?.name !== 'endMoreItems') {
+            this.formConfig.formConfig[this.formConfig.formConfig.length - 1].moreItemsConfig.formConfig.push(this.fieldConfig);
+        }
+        else {
+            if (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;
-    }
-    addOption(active = true) {
-        this.fieldConfig.autocompleteAddOption = active;
-        return this;
-    }
+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;
+    }
+    addOption(active = true) {
+        this.fieldConfig.autocompleteAddOption = active;
+        return this;
+    }
 }
 
-class FieldBuilder extends FieldBase {
-    constructor(label, name, type, formConfig, fb, deviceService) {
-        super(label, name, type, formConfig, fb, deviceService);
-    }
+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?.type === DynamicFormTypeFieldEnum.moreItems && 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?.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 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?.type === DynamicFormTypeFieldEnum.moreItems && 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?.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 ?? [],
-            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 => {
-                const arrField = koala(this.config.formConfig).array().filter(indexName, 'name', { comparator: "=" }).getValue();
-                if (arrField.length === 1) {
-                    const field = arrField[0] ?? null;
-                    if (typeof object[indexName] !== "object" ||
-                        field.type === DynamicFormTypeFieldEnum.autocomplete ||
-                        field.type === DynamicFormTypeFieldEnum.selectMultipleNative) {
-                        if (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 => {
-                                const arrDynamicField = koala(field.dynamicFormConfig.formConfig).array().filter(indexName, 'name').getValue();
-                                const dynamicField = arrDynamicField[0] ?? null;
-                                if (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);
-    }
+class DynamicFormBuilder {
+    constructor(fb, deviceService, configInMemory) {
+        this.fb = fb;
+        this.deviceService = deviceService;
+        this.config = {
+            form: fb.group({}),
+            formConfig: 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 => {
+                const arrField = koala(this.config.formConfig).array().filter(indexName, 'name', { comparator: "=" }).getValue();
+                if (arrField.length === 1) {
+                    const field = arrField[0] ?? null;
+                    if (typeof object[indexName] !== "object" ||
+                        field.type === DynamicFormTypeFieldEnum.autocomplete ||
+                        field.type === DynamicFormTypeFieldEnum.selectMultipleNative) {
+                        if (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 => {
+                                const arrDynamicField = koala(field.dynamicFormConfig.formConfig).array().filter(indexName, 'name').getValue();
+                                const dynamicField = arrDynamicField[0] ?? null;
+                                if (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(tabIndexStart = 0) {
+        this.config.formConfig = this.config.formConfig.filter(config => config.name !== 'endMoreItems');
+        this.config.tabIndexStart = tabIndexStart;
+        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 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;
-    };
+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 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) {
-                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();
-        }
-    }
-    disableFields(formGroup, disabled, fields) {
-        const formArray = formGroup.get('formData');
-        fields.forEach(field => {
-            const controlValue = formArray.controls.find(control => field === control.get('name').value)?.get('value');
-            if (controlValue && disabled) {
-                controlValue.disable();
-            }
-            else if (controlValue && !disabled) {
-                controlValue.enable();
-            }
-            const controlDisabled = formArray.controls.find(control => field === control.get('name').value)?.get('disabled');
-            controlDisabled.setValue(disabled);
-        });
-    }
-    emitData(form) {
-        const data = {};
-        const formArray = form.get('formData');
-        formArray?.controls.forEach(control => {
-            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?.map(item => item?.value);
-                    }
-                    else {
-                        value = (control.get('autocompleteSelectedValue').value?.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 = unmaskCoin(value);
-                }
-                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 => {
-                    let value = '';
-                    if (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, (nameConfig.delimiter ?? ' ')).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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: KoalaDynamicFormService, deps: [{ token: i1.UntypedFormBuilder }, { token: i2$1.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaDynamicFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: KoalaDynamicFormService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: KoalaDynamicFormService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: "any" }]
+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 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) {
+                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();
+        }
+    }
+    disableFields(formGroup, disabled, fields) {
+        const formArray = formGroup.get('formData');
+        fields.forEach(field => {
+            const controlValue = formArray.controls.find(control => field === control.get('name').value)?.get('value');
+            if (controlValue && disabled) {
+                controlValue.disable();
+            }
+            else if (controlValue && !disabled) {
+                controlValue.enable();
+            }
+            const controlDisabled = formArray.controls.find(control => field === control.get('name').value)?.get('disabled');
+            controlDisabled.setValue(disabled);
+        });
+    }
+    emitData(form) {
+        const data = {};
+        const formArray = form.get('formData');
+        formArray?.controls.forEach(control => {
+            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?.map(item => item?.value);
+                    }
+                    else {
+                        value = (control.get('autocompleteSelectedValue').value?.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 = unmaskCoin(value);
+                }
+                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 => {
+                    let value = '';
+                    if (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, (nameConfig.delimiter ?? ' ')).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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDynamicFormService, deps: [{ token: i1.UntypedFormBuilder }, { token: i2$1.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaDynamicFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDynamicFormService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaDynamicFormService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "any" }]
         }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: i2$1.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));
-    }
+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 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 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 };
+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 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 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 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 KoalaAutofocusDirective {
-    constructor(el) {
-        this.el = el;
-    }
-    ngAfterContentInit() {
-        if (this.koalaAutoFocus) {
-            setTimeout(() => {
-                this.el.nativeElement.focus();
-            }, 500);
-        }
-    }
-}
-KoalaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: KoalaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-KoalaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.11", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: { koalaAutoFocus: "koalaAutoFocus" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: KoalaAutofocusDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[koalaAutoFocus]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { koalaAutoFocus: [{
-                type: Input
+class KoalaAutofocusDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterContentInit() {
+        if (this.koalaAutoFocus) {
+            setTimeout(() => {
+                this.el.nativeElement.focus();
+            }, 500);
+        }
+    }
+}
+KoalaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+KoalaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: { koalaAutoFocus: "koalaAutoFocus" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaAutofocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[koalaAutoFocus]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { koalaAutoFocus: [{
+                type: Input
             }] } });
 
-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;
-        this.formId = randomString(25, {
-            lowercase: true,
-            uppercase: true,
-            numbers: false,
-            specialCharacters: false
-        });
-    }
-    ngOnInit() {
-        if (!this.form.get('formData')) {
-            this.form.addControl('formData', this.fb.array([]));
-        }
-        this.controls = this.form.get('formData');
-        this.formConfig?.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(async (value) => {
-                    await this.setConfigDynamicForm(newFormGroup);
-                    if (config.type === DynamicFormTypeFieldEnum.autocomplete) {
-                        if (value && (value.hasOwnProperty('value') &&
-                            value.hasOwnProperty('name') &&
-                            Object.keys(value).length === 2) || (Array.isArray(value) &&
-                            newFormGroup.get('multiple').value)) {
-                            if (newFormGroup.get('multiple').value) {
-                                if (Array.isArray(value)) {
-                                    newFormGroup.get('autocompleteSelectedValue').setValue(value);
-                                    newFormGroup.get('value').setValue(value[value.length - 1], { emitEvent: false });
-                                }
-                                else {
-                                    if (this.validateAutocompleteSelect(newFormGroup.get('autocompleteSelectedValue').value, value)) {
-                                        newFormGroup.get('autocompleteSelectedValue').value.push(value);
-                                    }
-                                }
-                                const autocompleteInput = document.querySelector(`#${this.formId} input#autocomplete-${newFormGroup.get('name')?.value}`);
-                                if (autocompleteInput) {
-                                    autocompleteInput.value = '';
-                                }
-                            }
-                            else {
-                                newFormGroup.get('autocompleteSelectedValue').setValue(value);
-                            }
-                        }
-                        else if (!newFormGroup.get('multiple').value) {
-                            newFormGroup.get('autocompleteSelectedValue').setValue(koala(this.formConfig)
-                                .array()
-                                .filter(newFormGroup.get('name').value, 'name')
-                                .getValue()[0]?.autocompleteDefaultValueOnClear ?? 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) :
-                                newFormGroup.get('autocompleteSelectedValue').value?.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(async (values) => {
-                        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);
-        }
-    }
-    isValidNewAutocompleteOption(value) {
-        return !!value && typeof value === 'string';
-    }
-    hoursAndMinutesApplyMask(index, event) {
-        const control = this.controls?.controls[index];
-        const type = control?.get('type').value;
-        if (type === DynamicFormTypeFieldEnum.hoursAndMinutes) {
-            const value = 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) {
-        const control = this.controls?.controls[index];
-        const hidePassword = !control?.get('hidePassword').value;
-        control?.get('hidePassword').setValue(hidePassword);
-        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) {
-        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(this.formConfig[propIndex].autocompleteDefaultValueOnClear ?? null);
-            this.controls.controls[propIndex].get('value').setValue(this.formConfig[propIndex].autocompleteDefaultValueOnClear ?? 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;
-    }
-    getAutocompleteOptions(propriedade) {
-        return propriedade.get('autocompleteOptionsFiltered').value;
-    }
-    getDynamicFormConfig(propriedade) {
-        return propriedade.get('dynamicFormConfig').value;
-    }
-    getRandomString() {
-        return randomString(20, {
-            lowercase: true,
-            numbers: true,
-            specialCharacters: false,
-            uppercase: true
-        });
-    }
-    newControl(config) {
-        let validators = config.syncValidators ?? [];
-        let value = config.value ?? '';
-        let valueSelectedAutocomplete = (config.multiple ? [] : (config.autocompleteDefaultValueOnClear ?? 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 = config.value ?? 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(config.show ?? true)],
-            label: [config.label],
-            name: [config.name],
-            type: [config.type],
-            fileButtonConfig: [{
-                    icon: config?.fileButtonConfig?.icon ?? 'attach_file',
-                    text: config?.fileButtonConfig?.text ?? 'Clique para anexar arquivos',
-                    backgroundColor: config?.fileButtonConfig?.backgroundColor ?? 'white',
-                    color: config?.fileButtonConfig?.color ?? 'blue',
-                    accept: config?.fileButtonConfig?.accept ?? '*'
-                }],
-            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: [config.required ?? false],
-            min: [config.min ?? 0],
-            max: [config.max ?? 99999999999],
-            minLength: [config.minLength ?? 0],
-            maxLength: [config.maxLength ?? 255],
-            disabled: [config.disabled ?? false],
-            focus: [config.focus ?? false],
-            multiple: [config.multiple ?? false],
-            opcoesSelect: [config.opcoesSelect ?? []],
-            hidePassword: config.type === DynamicFormTypeFieldEnum.password ? true : null,
-            moreItemsButtonIconAddlabel: [config.moreItemsButtonIconAddlabel],
-            moreItemsMinItems: [config.moreItemsMinItems ?? 0],
-            moreItemsMaxItems: [config.moreItemsMaxItems ?? 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],
-            autocompleteAddOption: [config.autocompleteAddOption],
-            textLogs: [config?.textObs],
-            customMasc: [config?.customMasc],
-            customMascThousandSeparator: [config?.customMascThousandSeparator ?? ''],
-            customMascSuffix: [config?.customMascSuffix ?? ''],
-            customMascPrefix: [config?.customMascPrefix ?? ''],
-            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 => {
-            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 = this.formConfig[indexControl] ?? null;
-                            if (prop.show) {
-                                let validators = [];
-                                if (config) {
-                                    if (config.type === DynamicFormTypeFieldEnum.dynamicForm) {
-                                        const formArrayMoreItems = control.get('dynamicFormGroup');
-                                        formArrayMoreItems.push(config?.dynamicFormConfig?.form);
-                                    }
-                                    else {
-                                        validators = config.syncValidators ?? [];
-                                        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;
-                    }
-                }
-            }
-        }
-    }
-    async setConfigDynamicForm(newFormGroup) {
-        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);
-                        await delay(1);
-                        dynamicFormConfigSubject.next(config.dynamicFormConfig(value));
-                    }
-                    this.dynamicFormService.showFields(this.showFields, config.fieldsToShow, config.fnShow(value), config.clearCurrentValue);
-                }
-            }
-        }
-    }
-    validateAutocompleteSelect(selectedValues, value) {
-        let isValid = true;
-        for (const selectedItem of selectedValues.values()) {
-            if (selectedItem.name === value.name) {
-                isValid = false;
-                break;
-            }
-        }
-        return isValid;
-    }
-}
-DynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: DynamicFormComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: KoalaDynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: { form: "form", formConfig: "formConfig", showFields: "showFields", showFieldsMoreItensConfig: "showFieldsMoreItensConfig", setValues: "setValues", tabIndexStart: "tabIndexStart" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"p-relative w-100\" [id]=\"formId\">\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          [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n          [suffix]=\"propriedade.get('customMascSuffix').value\"\n          [prefix]=\"propriedade.get('customMascPrefix').value\"\n          separatorLimit=\"0\"\n          [autocomplete]=\"getRandomString()\"\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]=\"getRandomString()\"\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]=\"getRandomString()\"\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          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n\t\t      [cdkAutosizeMaxRows]=\"8\"\n\t\t      [cdkAutosizeMinRows]=\"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          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n\t\t      [cdkAutosizeMaxRows]=\"8\"\n\t\t      [cdkAutosizeMinRows]=\"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            <mat-chip\n              (removed)=\"removeOptionOnAutocomplete(i, option)\"\n              *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n              [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n              [removable]=\"true\"\n              [selectable]=\"true\">\n              {{display(option)}}\n              <mat-icon *ngIf=\"!propriedade.get('disabled').value\" matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\t          <input\n              [id]=\"'autocomplete-' + propriedade.get('name').value\"\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              [autocomplete]=\"getRandomString()\"\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            [autocomplete]=\"getRandomString()\"\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          <mat-option\n            *ngIf=\"propriedade.get('autocompleteAddOption').value && isValidNewAutocompleteOption(propriedade.get('value').value)\"\n            [value]=\"{\n              value: {id: 0, name: propriedade.get('value').value},\n              name: propriedade.get('value').value\n            }\">\n            Add <b>{{propriedade.get('value').value}}</b>...\n          </mat-option>\n\t\t      <div *ngIf=\"(getAutocompleteOptions(propriedade) | 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(getDynamicFormConfig(propriedade) | 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", 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:700;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"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i4$1.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { kind: "directive", type: i5.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i6.FileButtonComponent, selector: "koala-file-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "multiple", "accept", "setFile", "updateFileList", "autoclear"], outputs: ["getFiles"] }, { kind: "directive", type: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i8.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i17.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i17.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i17.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i17.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i17.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i17.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i18.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i18.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i19.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { kind: "directive", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: ["koalaAutoFocus"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: DynamicFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'koala-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\" class=\"p-relative w-100\" [id]=\"formId\">\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          [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n          [suffix]=\"propriedade.get('customMascSuffix').value\"\n          [prefix]=\"propriedade.get('customMascPrefix').value\"\n          separatorLimit=\"0\"\n          [autocomplete]=\"getRandomString()\"\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]=\"getRandomString()\"\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]=\"getRandomString()\"\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          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n\t\t      [cdkAutosizeMaxRows]=\"8\"\n\t\t      [cdkAutosizeMinRows]=\"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          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n\t\t      [cdkAutosizeMaxRows]=\"8\"\n\t\t      [cdkAutosizeMinRows]=\"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            <mat-chip\n              (removed)=\"removeOptionOnAutocomplete(i, option)\"\n              *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n              [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n              [removable]=\"true\"\n              [selectable]=\"true\">\n              {{display(option)}}\n              <mat-icon *ngIf=\"!propriedade.get('disabled').value\" matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\t          <input\n              [id]=\"'autocomplete-' + propriedade.get('name').value\"\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              [autocomplete]=\"getRandomString()\"\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            [autocomplete]=\"getRandomString()\"\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          <mat-option\n            *ngIf=\"propriedade.get('autocompleteAddOption').value && isValidNewAutocompleteOption(propriedade.get('value').value)\"\n            [value]=\"{\n              value: {id: 0, name: propriedade.get('value').value},\n              name: propriedade.get('value').value\n            }\">\n            Add <b>{{propriedade.get('value').value}}</b>...\n          </mat-option>\n\t\t      <div *ngIf=\"(getAutocompleteOptions(propriedade) | 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(getDynamicFormConfig(propriedade) | 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", 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:700;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"] }]
-        }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: KoalaDynamicFormService }]; }, propDecorators: { form: [{
-                type: Input
-            }], formConfig: [{
-                type: Input
-            }], showFields: [{
-                type: Input
-            }], showFieldsMoreItensConfig: [{
-                type: Input
-            }], setValues: [{
-                type: Input
-            }], tabIndexStart: [{
-                type: Input
+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;
+        this.formId = randomString(25, {
+            lowercase: true,
+            uppercase: true,
+            numbers: false,
+            specialCharacters: false
+        });
+    }
+    ngOnInit() {
+        if (!this.form.get('formData')) {
+            this.form.addControl('formData', this.fb.array([]));
+        }
+        this.controls = this.form.get('formData');
+        this.formConfig?.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(async (value) => {
+                    await this.setConfigDynamicForm(newFormGroup);
+                    if (config.type === DynamicFormTypeFieldEnum.autocomplete) {
+                        if (value && (value.hasOwnProperty('value') &&
+                            value.hasOwnProperty('name') &&
+                            Object.keys(value).length === 2) || (Array.isArray(value) &&
+                            newFormGroup.get('multiple').value)) {
+                            if (newFormGroup.get('multiple').value) {
+                                if (Array.isArray(value)) {
+                                    newFormGroup.get('autocompleteSelectedValue').setValue(value);
+                                    newFormGroup.get('value').setValue(value[value.length - 1], { emitEvent: false });
+                                }
+                                else {
+                                    if (this.validateAutocompleteSelect(newFormGroup.get('autocompleteSelectedValue').value, value)) {
+                                        newFormGroup.get('autocompleteSelectedValue').value.push(value);
+                                    }
+                                }
+                                const autocompleteInput = document.querySelector(`#${this.formId} input#autocomplete-${newFormGroup.get('name')?.value}`);
+                                if (autocompleteInput) {
+                                    autocompleteInput.value = '';
+                                }
+                            }
+                            else {
+                                newFormGroup.get('autocompleteSelectedValue').setValue(value);
+                            }
+                        }
+                        else if (!newFormGroup.get('multiple').value) {
+                            newFormGroup.get('autocompleteSelectedValue').setValue(koala(this.formConfig)
+                                .array()
+                                .filter(newFormGroup.get('name').value, 'name')
+                                .getValue()[0]?.autocompleteDefaultValueOnClear ?? 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) :
+                                newFormGroup.get('autocompleteSelectedValue').value?.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(async (values) => {
+                        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);
+        }
+    }
+    isValidNewAutocompleteOption(value) {
+        return !!value && typeof value === 'string';
+    }
+    hoursAndMinutesApplyMask(index, event) {
+        const control = this.controls?.controls[index];
+        const type = control?.get('type').value;
+        if (type === DynamicFormTypeFieldEnum.hoursAndMinutes) {
+            const value = 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) {
+        const control = this.controls?.controls[index];
+        const hidePassword = !control?.get('hidePassword').value;
+        control?.get('hidePassword').setValue(hidePassword);
+        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) {
+        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(this.formConfig[propIndex].autocompleteDefaultValueOnClear ?? null);
+            this.controls.controls[propIndex].get('value').setValue(this.formConfig[propIndex].autocompleteDefaultValueOnClear ?? 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;
+    }
+    getAutocompleteOptions(propriedade) {
+        return propriedade.get('autocompleteOptionsFiltered').value;
+    }
+    getDynamicFormConfig(propriedade) {
+        return propriedade.get('dynamicFormConfig').value;
+    }
+    getRandomString() {
+        return randomString(20, {
+            lowercase: true,
+            numbers: true,
+            specialCharacters: false,
+            uppercase: true
+        });
+    }
+    newControl(config) {
+        let validators = config.syncValidators ?? [];
+        let value = config.value ?? '';
+        let valueSelectedAutocomplete = (config.multiple ? [] : (config.autocompleteDefaultValueOnClear ?? 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 = config.value ?? 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(config.show ?? true)],
+            label: [config.label],
+            name: [config.name],
+            type: [config.type],
+            fileButtonConfig: [{
+                    icon: config?.fileButtonConfig?.icon ?? 'attach_file',
+                    text: config?.fileButtonConfig?.text ?? 'Clique para anexar arquivos',
+                    backgroundColor: config?.fileButtonConfig?.backgroundColor ?? 'white',
+                    color: config?.fileButtonConfig?.color ?? 'blue',
+                    accept: config?.fileButtonConfig?.accept ?? '*'
+                }],
+            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: [config.required ?? false],
+            min: [config.min ?? 0],
+            max: [config.max ?? 99999999999],
+            minLength: [config.minLength ?? 0],
+            maxLength: [config.maxLength ?? 255],
+            disabled: [config.disabled ?? false],
+            focus: [config.focus ?? false],
+            multiple: [config.multiple ?? false],
+            opcoesSelect: [config.opcoesSelect ?? []],
+            hidePassword: config.type === DynamicFormTypeFieldEnum.password ? true : null,
+            moreItemsButtonIconAddlabel: [config.moreItemsButtonIconAddlabel],
+            moreItemsMinItems: [config.moreItemsMinItems ?? 0],
+            moreItemsMaxItems: [config.moreItemsMaxItems ?? 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],
+            autocompleteAddOption: [config.autocompleteAddOption],
+            textLogs: [config?.textObs],
+            customMasc: [config?.customMasc],
+            customMascThousandSeparator: [config?.customMascThousandSeparator ?? ''],
+            customMascSuffix: [config?.customMascSuffix ?? ''],
+            customMascPrefix: [config?.customMascPrefix ?? ''],
+            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 => {
+            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 = this.formConfig[indexControl] ?? null;
+                            if (prop.show) {
+                                let validators = [];
+                                if (config) {
+                                    if (config.type === DynamicFormTypeFieldEnum.dynamicForm) {
+                                        const formArrayMoreItems = control.get('dynamicFormGroup');
+                                        formArrayMoreItems.push(config?.dynamicFormConfig?.form);
+                                    }
+                                    else {
+                                        validators = config.syncValidators ?? [];
+                                        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;
+                    }
+                }
+            }
+        }
+    }
+    async setConfigDynamicForm(newFormGroup) {
+        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);
+                        await delay(1);
+                        dynamicFormConfigSubject.next(config.dynamicFormConfig(value));
+                    }
+                    this.dynamicFormService.showFields(this.showFields, config.fieldsToShow, config.fnShow(value), config.clearCurrentValue);
+                }
+            }
+        }
+    }
+    validateAutocompleteSelect(selectedValues, value) {
+        let isValid = true;
+        for (const selectedItem of selectedValues.values()) {
+            if (selectedItem.name === value.name) {
+                isValid = false;
+                break;
+            }
+        }
+        return isValid;
+    }
+}
+DynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicFormComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: KoalaDynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
+DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: { form: "form", formConfig: "formConfig", showFields: "showFields", showFieldsMoreItensConfig: "showFieldsMoreItensConfig", setValues: "setValues", tabIndexStart: "tabIndexStart" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"p-relative w-100\" [id]=\"formId\">\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          [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n          [suffix]=\"propriedade.get('customMascSuffix').value\"\n          [prefix]=\"propriedade.get('customMascPrefix').value\"\n          separatorLimit=\"0\"\n          [autocomplete]=\"getRandomString()\"\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]=\"getRandomString()\"\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]=\"getRandomString()\"\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          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n\t\t      [cdkAutosizeMaxRows]=\"8\"\n\t\t      [cdkAutosizeMinRows]=\"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          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n\t\t      [cdkAutosizeMaxRows]=\"8\"\n\t\t      [cdkAutosizeMinRows]=\"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            <mat-chip\n              (removed)=\"removeOptionOnAutocomplete(i, option)\"\n              *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n              [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n              [removable]=\"true\"\n              [selectable]=\"true\">\n              {{display(option)}}\n              <mat-icon *ngIf=\"!propriedade.get('disabled').value\" matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\t          <input\n              [id]=\"'autocomplete-' + propriedade.get('name').value\"\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              [autocomplete]=\"getRandomString()\"\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            [autocomplete]=\"getRandomString()\"\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          <mat-option\n            *ngIf=\"propriedade.get('autocompleteAddOption').value && isValidNewAutocompleteOption(propriedade.get('value').value)\"\n            [value]=\"{\n              value: {id: 0, name: propriedade.get('value').value},\n              name: propriedade.get('value').value\n            }\">\n            Add <b>{{propriedade.get('value').value}}</b>...\n          </mat-option>\n\t\t      <div *ngIf=\"(getAutocompleteOptions(propriedade) | 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(getDynamicFormConfig(propriedade) | 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", 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:700;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"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i4$1.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { kind: "directive", type: i5.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i6.FileButtonComponent, selector: "koala-file-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "multiple", "accept", "setFile", "updateFileList", "autoclear"], outputs: ["getFiles"] }, { kind: "directive", type: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i8.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i17.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i17.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i17.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i17.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i17.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i17.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i18.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i18.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i19.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { kind: "directive", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: ["koalaAutoFocus"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'koala-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\" class=\"p-relative w-100\" [id]=\"formId\">\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          [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n          [suffix]=\"propriedade.get('customMascSuffix').value\"\n          [prefix]=\"propriedade.get('customMascPrefix').value\"\n          separatorLimit=\"0\"\n          [autocomplete]=\"getRandomString()\"\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]=\"getRandomString()\"\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]=\"getRandomString()\"\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          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n\t\t      [cdkAutosizeMaxRows]=\"8\"\n\t\t      [cdkAutosizeMinRows]=\"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          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n\t\t      [cdkAutosizeMaxRows]=\"8\"\n\t\t      [cdkAutosizeMinRows]=\"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            <mat-chip\n              (removed)=\"removeOptionOnAutocomplete(i, option)\"\n              *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n              [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n              [removable]=\"true\"\n              [selectable]=\"true\">\n              {{display(option)}}\n              <mat-icon *ngIf=\"!propriedade.get('disabled').value\" matChipRemove>cancel</mat-icon>\n            </mat-chip>\n\t          <input\n              [id]=\"'autocomplete-' + propriedade.get('name').value\"\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              [autocomplete]=\"getRandomString()\"\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            [autocomplete]=\"getRandomString()\"\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          <mat-option\n            *ngIf=\"propriedade.get('autocompleteAddOption').value && isValidNewAutocompleteOption(propriedade.get('value').value)\"\n            [value]=\"{\n              value: {id: 0, name: propriedade.get('value').value},\n              name: propriedade.get('value').value\n            }\">\n            Add <b>{{propriedade.get('value').value}}</b>...\n          </mat-option>\n\t\t      <div *ngIf=\"(getAutocompleteOptions(propriedade) | 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(getDynamicFormConfig(propriedade) | 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", 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:700;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"] }]
+        }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: KoalaDynamicFormService }]; }, propDecorators: { form: [{
+                type: Input
+            }], formConfig: [{
+                type: Input
+            }], showFields: [{
+                type: Input
+            }], showFieldsMoreItensConfig: [{
+                type: Input
+            }], setValues: [{
+                type: Input
+            }], tabIndexStart: [{
+                type: Input
             }] } });
 
-class KoalaFormModule {
-}
-KoalaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: KoalaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.11", ngImport: i0, type: KoalaFormModule, declarations: [BtnSubmitComponent,
-        DynamicFormComponent,
-        KoalaAutofocusDirective], imports: [CommonModule,
-        ReactiveFormsModule,
-        FormsModule,
-        CurrencyMaskModule, i5.NgxMaskModule, 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] });
-KoalaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: KoalaFormModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        FormsModule,
-        CurrencyMaskModule,
-        NgxMaskModule.forRoot(maskOptions),
-        KoalaFileButtonModule,
-        MatInputModule,
-        MatSelectModule,
-        MatRadioModule,
-        MatCheckboxModule,
-        MatAutocompleteModule,
-        MatButtonModule,
-        MatIconModule,
-        MatExpansionModule,
-        MatChipsModule,
-        KoalaButtonModule,
-        MatProgressSpinnerModule, ReactiveFormsModule,
-        FormsModule,
-        NgxMaskModule,
-        KoalaFileButtonModule,
-        MatInputModule,
-        MatSelectModule,
-        MatRadioModule,
-        MatCheckboxModule,
-        MatAutocompleteModule,
-        MatButtonModule,
-        MatIconModule,
-        MatProgressSpinnerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: 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
-                    ]
-                }]
+class KoalaFormModule {
+}
+KoalaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: KoalaFormModule, declarations: [BtnSubmitComponent,
+        DynamicFormComponent,
+        KoalaAutofocusDirective], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        CurrencyMaskModule, i5.NgxMaskModule, 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] });
+KoalaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaFormModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        CurrencyMaskModule,
+        NgxMaskModule.forRoot(maskOptions),
+        KoalaFileButtonModule,
+        MatInputModule,
+        MatSelectModule,
+        MatRadioModule,
+        MatCheckboxModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatIconModule,
+        MatExpansionModule,
+        MatChipsModule,
+        KoalaButtonModule,
+        MatProgressSpinnerModule, ReactiveFormsModule,
+        FormsModule,
+        NgxMaskModule,
+        KoalaFileButtonModule,
+        MatInputModule,
+        MatSelectModule,
+        MatRadioModule,
+        MatCheckboxModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatIconModule,
+        MatProgressSpinnerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: 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.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AutocompleteSelectedValidator, BtnSubmitComponent, CnpjValidator, CpfValidator, DynamicFormComponent, DynamicFormTypeFieldEnum, FormAbstract, KoalaAutofocusDirective, KoalaDynamicFormService, KoalaDynamicFormValidatorResultHelper, KoalaFormModule, ShowInvalidFields, ValidationHelper };