@koalarx/ui 12.7.8 → 12.7.9

package/dialog/bundles/koalarx-ui-dialog.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/dialog'), require('@angular/material/button'), require('@angular/material/icon'), require('ngx-device-detector'), require('@koalarx/utils/operators/string')) :
-    typeof define === 'function' && define.amd ? define('@koalarx/ui/dialog', ['exports', '@angular/core', '@angular/common', '@angular/material/dialog', '@angular/material/button', '@angular/material/icon', 'ngx-device-detector', '@koalarx/utils/operators/string'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.koalarx = global.koalarx || {}, global.koalarx.ui = global.koalarx.ui || {}, global.koalarx.ui.dialog = {}), global.ng.core, global.ng.common, global.ng.material.dialog, global.ng.material.button, global.ng.material.icon, global.i2, global.string));
-})(this, (function (exports, i0, common, i1, button, icon, i2, string) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/dialog'), require('@angular/material/button'), require('@angular/material/icon'), require('ngx-device-detector'), require('@koalarx/utils/operators/string'), require('ngx-device-detector/lib/device-detector.service')) :
+    typeof define === 'function' && define.amd ? define('@koalarx/ui/dialog', ['exports', '@angular/core', '@angular/common', '@angular/material/dialog', '@angular/material/button', '@angular/material/icon', 'ngx-device-detector', '@koalarx/utils/operators/string', 'ngx-device-detector/lib/device-detector.service'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.koalarx = global.koalarx || {}, global.koalarx.ui = global.koalarx.ui || {}, global.koalarx.ui.dialog = {}), global.ng.core, global.ng.common, global.ng.material.dialog, global.ng.material.button, global.ng.material.icon, global.i2, global.string, global.i2));
+})(this, (function (exports, i0, common, i1, button, icon, ngxDeviceDetector, string, i2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -122,7 +122,7 @@
     ];
     KoalaDialogService.ctorParameters = function () { return [
         { type: i1.MatDialog },
-        { type: i2.DeviceDetectorService }
+        { type: ngxDeviceDetector.DeviceDetectorService }
     ]; };
 
     /**

package/dialog/bundles/koalarx-ui-dialog.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-dialog.umd.js","sources":["../../../projects/dialog/src/lib/dialog.component.ts","../../../projects/dialog/src/lib/koala.dialog.module.ts","../../../projects/dialog/src/lib/koala.dialog.service.ts","../../../projects/dialog/src/koalarx-ui-dialog.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\n@Component({\n  selector: 'koala-dialog',\n  templateUrl: 'dialog.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DialogComponent {\n  @Input() titleDialog?: string;\n  @Input() iconTitleDialog?: string;\n  @Input() triggerDialogClose?: string;\n  @Input() btnCloseLabel?: string;\n  @Input() btnCloseColor: ThemePalette;\n}\n","import { NgModule } from '@angular/core';\nimport { DialogComponent } from './dialog.component';\nimport { CommonModule } from '@angular/common';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\n\n@NgModule({\n  declarations: [\n    DialogComponent\n  ],\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatButtonModule,\n    MatDialogModule\n  ],\n  exports: [\n    DialogComponent\n  ]\n})\nexport class KoalaDialogModule {\n}\n","import { Injectable } from '@angular/core';\nimport { MatDialog } from '@angular/material/dialog';\nimport { KoalaDialogTemplateInterface } from './koala.dialog-template.interface';\nimport { ComponentType } from '@angular/cdk/overlay';\nimport { DeviceDetectorService } from \"ngx-device-detector\";\nimport { randomString } from \"@koalarx/utils/operators/string\";\n\nexport type KoalaDialogSizeType = 'auto' | 'small' | 'normal' | 'big' | 'mobile';\n\n@Injectable({providedIn: \"any\"})\nexport class KoalaDialogService {\n\n  constructor(\n    private dialog: MatDialog,\n    private deviceService: DeviceDetectorService) {\n  }\n\n  public open<T>(\n    dialogComponent: ComponentType<T>,\n    size: KoalaDialogSizeType,\n    data?: any,\n    triggerBeforeClosed: string | boolean | object = false,\n    beforeClosed?: (event?: any) => void\n  ) {\n    const dialogRef = this.dialog.open(dialogComponent, this.dialogTemplate(data)[this.deviceService.isMobile() ? 'mobile' : size])\n    dialogRef.afterOpened().subscribe(() => {\n      history.pushState(null, '', location.href);\n      return false;\n    });\n    dialogRef.beforeClosed().subscribe(event => {\n      if ((triggerBeforeClosed && event === triggerBeforeClosed) ||\n        (typeof triggerBeforeClosed == 'object' && typeof event == 'object')\n      ) {\n        if (beforeClosed) {\n          beforeClosed(event);\n        }\n      }\n    });\n    dialogRef.keydownEvents().subscribe(event => {\n      if (event.key === 'Escape') {\n        dialogRef.close({closeOnNavigation: true})\n      }\n    });\n  }\n\n  private dialogTemplate(data: any = null): KoalaDialogTemplateInterface {\n    let dialogElementId = \"dialog-\" + randomString(10);\n\n    return {\n      auto: {id: dialogElementId, panelClass: ['koala-dialog', 'auto'], disableClose: true, data},\n      small: {id: dialogElementId, panelClass: ['koala-dialog', 'small'], disableClose: true, data},\n      normal: {id: dialogElementId, panelClass: ['koala-dialog', 'normal'], disableClose: true, data},\n      big: {id: dialogElementId, panelClass: ['koala-dialog', 'big'], disableClose: true, data},\n      fullScreen: {id: dialogElementId, panelClass: ['koala-dialog'], disableClose: true, data},\n      mobile: {\n        id: dialogElementId,\n        autoFocus: false,\n        panelClass: [\"koala-dialog\", 'mobile'],\n        width: '100vw',\n        maxWidth: '100vw',\n        maxHeight: '90vh',\n        data\n      }\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["Component","ChangeDetectionStrategy","Input","NgModule","CommonModule","MatIconModule","MatButtonModule","MatDialogModule","randomString","Injectable","MatDialog","DeviceDetectorService"],"mappings":"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"}
+{"version":3,"file":"koalarx-ui-dialog.umd.js","sources":["../../../projects/dialog/src/lib/dialog.component.ts","../../../projects/dialog/src/lib/koala.dialog.module.ts","../../../projects/dialog/src/lib/koala.dialog.service.ts","../../../projects/dialog/src/koalarx-ui-dialog.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\n@Component({\n  selector: 'koala-dialog',\n  templateUrl: 'dialog.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DialogComponent {\n  @Input() titleDialog?: string;\n  @Input() iconTitleDialog?: string;\n  @Input() triggerDialogClose?: string;\n  @Input() btnCloseLabel?: string;\n  @Input() btnCloseColor: ThemePalette;\n}\n","import { NgModule } from '@angular/core';\nimport { DialogComponent } from './dialog.component';\nimport { CommonModule } from '@angular/common';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\n\n@NgModule({\n  declarations: [\n    DialogComponent\n  ],\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatButtonModule,\n    MatDialogModule\n  ],\n  exports: [\n    DialogComponent\n  ]\n})\nexport class KoalaDialogModule {\n}\n","import { Injectable } from '@angular/core';\nimport { MatDialog } from '@angular/material/dialog';\nimport { KoalaDialogTemplateInterface } from './koala.dialog-template.interface';\nimport { ComponentType } from '@angular/cdk/overlay';\nimport { DeviceDetectorService } from \"ngx-device-detector\";\nimport { randomString } from \"@koalarx/utils/operators/string\";\n\nexport type KoalaDialogSizeType = 'auto' | 'small' | 'normal' | 'big' | 'mobile';\n\n@Injectable({providedIn: \"any\"})\nexport class KoalaDialogService {\n\n  constructor(\n    private dialog: MatDialog,\n    private deviceService: DeviceDetectorService) {\n  }\n\n  public open<T>(\n    dialogComponent: ComponentType<T>,\n    size: KoalaDialogSizeType,\n    data?: any,\n    triggerBeforeClosed: string | boolean | object = false,\n    beforeClosed?: (event?: any) => void\n  ) {\n    const dialogRef = this.dialog.open(dialogComponent, this.dialogTemplate(data)[this.deviceService.isMobile() ? 'mobile' : size])\n    dialogRef.afterOpened().subscribe(() => {\n      history.pushState(null, '', location.href);\n      return false;\n    });\n    dialogRef.beforeClosed().subscribe(event => {\n      if ((triggerBeforeClosed && event === triggerBeforeClosed) ||\n        (typeof triggerBeforeClosed == 'object' && typeof event == 'object')\n      ) {\n        if (beforeClosed) {\n          beforeClosed(event);\n        }\n      }\n    });\n    dialogRef.keydownEvents().subscribe(event => {\n      if (event.key === 'Escape') {\n        dialogRef.close({closeOnNavigation: true})\n      }\n    });\n  }\n\n  private dialogTemplate(data: any = null): KoalaDialogTemplateInterface {\n    let dialogElementId = \"dialog-\" + randomString(10);\n\n    return {\n      auto: {id: dialogElementId, panelClass: ['koala-dialog', 'auto'], disableClose: true, data},\n      small: {id: dialogElementId, panelClass: ['koala-dialog', 'small'], disableClose: true, data},\n      normal: {id: dialogElementId, panelClass: ['koala-dialog', 'normal'], disableClose: true, data},\n      big: {id: dialogElementId, panelClass: ['koala-dialog', 'big'], disableClose: true, data},\n      fullScreen: {id: dialogElementId, panelClass: ['koala-dialog'], disableClose: true, data},\n      mobile: {\n        id: dialogElementId,\n        autoFocus: false,\n        panelClass: [\"koala-dialog\", 'mobile'],\n        width: '100vw',\n        maxWidth: '100vw',\n        maxHeight: '90vh',\n        data\n      }\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["Component","ChangeDetectionStrategy","Input","NgModule","CommonModule","MatIconModule","MatButtonModule","MatDialogModule","randomString","Injectable","MatDialog","DeviceDetectorService"],"mappings":"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"}

package/dialog/esm2015/lib/koala.dialog.service.js

@@ -4,7 +4,7 @@ import { DeviceDetectorService } from "ngx-device-detector";
 import { randomString } from "@koalarx/utils/operators/string";
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/material/dialog";
-import * as i2 from "ngx-device-detector";
+import * as i2 from "ngx-device-detector/lib/device-detector.service";
 export class KoalaDialogService {
     constructor(dialog, deviceService) {
         this.dialog = dialog;

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

@@ -5,9 +5,9 @@ import * as i1 from '@angular/material/dialog';
 import { MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2 from 'ngx-device-detector';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { randomString } from '@koalarx/utils/operators/string';
+import * as i2 from 'ngx-device-detector/lib/device-detector.service';
 
 class DialogComponent {
 }

package/form/bundles/koalarx-ui-form.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@koalarx/ui/core'), require('@angular/forms'), require('@koalarx/utils'), require('ngx-device-detector'), require('@koalarx/utils/operators/string'), require('rxjs/operators'), require('@koalarx/utils/operators/delay'), require('@angular/common'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/radio'), require('@angular/material/checkbox'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('ngx-mask'), require('@koalarx/ui/common'), require('ng2-currency-mask'), require('@koalarx/ui/button'), require('@angular/material/expansion'), require('@koalarx/ui/file-button'), require('@angular/material/chips')) :
-    typeof define === 'function' && define.amd ? define('@koalarx/ui/form', ['exports', '@angular/core', 'rxjs', '@koalarx/ui/core', '@angular/forms', '@koalarx/utils', 'ngx-device-detector', '@koalarx/utils/operators/string', 'rxjs/operators', '@koalarx/utils/operators/delay', '@angular/common', '@angular/material/input', '@angular/material/select', '@angular/material/radio', '@angular/material/checkbox', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/icon', '@angular/material/progress-spinner', 'ngx-mask', '@koalarx/ui/common', 'ng2-currency-mask', '@koalarx/ui/button', '@angular/material/expansion', '@koalarx/ui/file-button', '@angular/material/chips'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.koalarx = global.koalarx || {}, global.koalarx.ui = global.koalarx.ui || {}, global.koalarx.ui.form = {}), global.ng.core, global.rxjs, global.core, global.ng.forms, global.utils, global.i2, global.string, global.rxjs.operators, global.delay, global.ng.common, global.ng.material.input, global.ng.material.select, global.ng.material.radio, global.ng.material.checkbox, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.icon, global.ng.material.progressSpinner, global["ngx-mask"], global.common$1, global.ng2CurrencyMask, global.button, global.ng.material.expansion, global.fileButton, global.ng.material.chips));
-})(this, (function (exports, i0, rxjs, core, i1, utils, i2, string, operators, delay, common, input, select, radio, checkbox, autocomplete, button, icon, progressSpinner, ngxMask, common$1, ng2CurrencyMask, button$1, expansion, fileButton, chips) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@koalarx/ui/core'), require('@angular/forms'), require('@koalarx/utils'), require('ngx-device-detector'), require('@koalarx/utils/operators/string'), require('ngx-device-detector/lib/device-detector.service'), require('rxjs/operators'), require('@koalarx/utils/operators/delay'), require('@angular/common'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/radio'), require('@angular/material/checkbox'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('ngx-mask'), require('@koalarx/ui/common'), require('ng2-currency-mask'), require('@koalarx/ui/button'), require('@angular/material/expansion'), require('@koalarx/ui/file-button'), require('@angular/material/chips')) :
+    typeof define === 'function' && define.amd ? define('@koalarx/ui/form', ['exports', '@angular/core', 'rxjs', '@koalarx/ui/core', '@angular/forms', '@koalarx/utils', 'ngx-device-detector', '@koalarx/utils/operators/string', 'ngx-device-detector/lib/device-detector.service', 'rxjs/operators', '@koalarx/utils/operators/delay', '@angular/common', '@angular/material/input', '@angular/material/select', '@angular/material/radio', '@angular/material/checkbox', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/icon', '@angular/material/progress-spinner', 'ngx-mask', '@koalarx/ui/common', 'ng2-currency-mask', '@koalarx/ui/button', '@angular/material/expansion', '@koalarx/ui/file-button', '@angular/material/chips'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.koalarx = global.koalarx || {}, global.koalarx.ui = global.koalarx.ui || {}, global.koalarx.ui.form = {}), global.ng.core, global.rxjs, global.core, global.ng.forms, global.utils, global.ngxDeviceDetector, global.string, global.i2, global.rxjs.operators, global.delay, global.ng.common, global.ng.material.input, global.ng.material.select, global.ng.material.radio, global.ng.material.checkbox, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.icon, global.ng.material.progressSpinner, global["ngx-mask"], global.common$1, global.ng2CurrencyMask, global.button, global.ng.material.expansion, global.fileButton, global.ng.material.chips));
+})(this, (function (exports, i0, rxjs, core, i1, utils, ngxDeviceDetector, string, i2, operators, delay, common, input, select, radio, checkbox, autocomplete, button, icon, progressSpinner, ngxMask, common$1, ng2CurrencyMask, button$1, expansion, fileButton, chips) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1019,7 +1019,7 @@
     ];
     KoalaDynamicFormService.ctorParameters = function () { return [
         { type: i1.FormBuilder },
-        { type: i2.DeviceDetectorService }
+        { type: ngxDeviceDetector.DeviceDetectorService }
     ]; };
 
     var ValidationHelper = /** @class */ (function () {
@@ -1825,7 +1825,7 @@
     DynamicFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'koala-dynamic-form',
-                    template: "<div [formGroup]=\"form\" class=\"p-relative w-100\">\n  <div *ngFor=\"let propriedade of controls?.controls; let i = index;\"\n       [ngClass]=\"(propriedade.get('show').value | async) ? propriedade.get('class').value : 'd-none'\"\n       formArrayName=\"formData\">\n\t  <div *ngIf=\"propriedade.get('show').value | async\">\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.text ||\n\t             propriedade.get('type').value == typeField.password ||\n\t             propriedade.get('type').value == typeField.cpf ||\n\t             propriedade.get('type').value == typeField.cnpj ||\n\t             propriedade.get('type').value == typeField.datetime ||\n\t             propriedade.get('type').value == typeField.email ||\n\t             propriedade.get('type').value == typeField.number ||\n\t             propriedade.get('type').value == typeField.stringNumber ||\n\t             propriedade.get('type').value == typeField.time ||\n\t             propriedade.get('type').value == typeField.date ||\n\t             propriedade.get('type').value == typeField.hoursAndMinutes ||\n\t             propriedade.get('type').value == typeField.phone ||\n\t             propriedade.get('type').value == typeField.percent ||\n\t             propriedade.get('type').value == typeField.color ||\n\t             propriedade.get('type').value == typeField.month ||\n\t             propriedade.get('type').value == typeField.competenceDate ||\n               propriedade.get('type').value == typeField.stringWithCustomMasc\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <input\n\t\t      [dropSpecialCharacters]=\"false\"\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      (keyup)=\"hoursAndMinutesApplyMask(i, $event)\"\n\t\t      [required]=\"propriedade.get('required').value\"\n\t\t      [tabIndex]=\"tabIndexStart + i\"\n\t\t      [mask]=\"((propriedade.get('type').value == typeField.competenceDate) ? '00/0000' : null) ||\n\t\t              ((propriedade.get('type').value == typeField.phone) ? '(00)0000-0000?0' : null) ||\n\t\t              ((propriedade.get('type').value == typeField.stringNumber) ? '0{'+propriedade.get('maxLength').value+'}' : null) ||\n                  ((propriedade.get('type').value == typeField.cpf) ? '000.000.000-00' : null) ||\n                  ((propriedade.get('type').value == typeField.cnpj) ? '00.000.000/0000-00' : null) ||\n                  ((propriedade.get('type').value == typeField.percent) ? 'percent' : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.hoursAndMinutes) ? hoursAndMinutesMask : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.stringWithCustomMasc) ? propriedade.get('customMasc').value : null)\"\n\t\t      [validation]=\"\n\t                    (propriedade.get('type').value == typeField.cpf && propriedade.get('value').errors?.cpfInvalid) ||\n\t                    (propriedade.get('type').value == typeField.cnpj && propriedade.get('value').errors?.cnpjInvalid)\"\n\t\t      [type]=\"((propriedade.get('type').value == typeField.cpf ||\n                    propriedade.get('type').value == typeField.cnpj ||\n                    propriedade.get('type').value == typeField.phone ||\n                    propriedade.get('type').value == typeField.percent\n                  )) ? 'tel' : (\n                    propriedade.get('type').value == typeField.month ?\n                    'month' : (\n                    propriedade.get('type').value == typeField.date ?\n                    'date' : (\n                    propriedade.get('type').value == typeField.datetime ?\n                    'datetime-local' : (\n                    propriedade.get('type').value == typeField.email ?\n                    'email' : (\n                    propriedade.get('type').value == typeField.number ?\n                    'number' : (\n                    propriedade.get('type').value == typeField.time ?\n                    'time' : (\n                    propriedade.get('type').value == typeField.password ?\n                    'password' : (\n                    propriedade.get('type').value == typeField.color ?\n                    'color' : 'text'))))))))\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n          [suffix]=\"propriedade.get('customMascSuffix').value\"\n          [prefix]=\"propriedade.get('customMascPrefix').value\"\n          separatorLimit=\"0\"\n          autocomplete=\"off\"\n\t\t      formControlName=\"value\"\n\t\t      matInput/>\n\t      <button\n\t\t      (click)=\"passwordView(i)\"\n\t\t      *ngIf=\"propriedade.get('hidePassword').value !== null\"\n\t\t      [attr.aria-label]=\"'Hide password'\"\n\t\t      [attr.aria-pressed]=\"propriedade.get('hidePassword').value\"\n\t\t      mat-icon-button matSuffix tabindex=\"-1\" type=\"button\">\n\t        <mat-icon>{{propriedade.get('hidePassword').value ? 'visibility_off' : 'visibility'}}</mat-icon>\n\t      </button>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.cpfInvalid\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.cnpjInvalid\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.email\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.dateMin\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getDateMinMessage()}}\n          {{propriedade.get('min').value | date:\"shortDate\"}}.\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.dateMax\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getDateMaxMessage()}}\n          {{propriedade.get('max').value | date:\"shortDate\"}}.\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.coin\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <input\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          autocomplete=\"off\"\n\t\t      currencyMask\n\t\t      formControlName=\"value\"\n\t\t      matInput\n\t\t      type=\"tel\"/>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n      <mat-form-field\n        *ngIf=\"propriedade.get('type').value == typeField.float\"\n        [appearance]=\"propriedade.get('appearance').value\"\n        [floatLabel]=\"propriedade.get('floatLabel').value\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-label>{{propriedade.get('label').value}}</mat-label>\n        <input\n          [koalaAutoFocus]=\"propriedade.get('focus').value\"\n          [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          autocomplete=\"off\"\n          currencyMask\n          [options]=\"{prefix: ''}\"\n          formControlName=\"value\"\n          matInput\n          type=\"tel\"/>\n        <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n          <mat-icon>info</mat-icon>\n          {{propriedade.get('textHint').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n      </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.valueList ||\n\t             propriedade.get('type').value == typeField.textarea\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <textarea\n          #textarea\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"3\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t      formControlName=\"value\"\n\t\t      matInput>\n        </textarea>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n          {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t\t  <mat-form-field\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.textLogs\"\n\t\t\t  [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t  [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <div [innerHTML]=\"propriedade.get('textLogs').value\" class=\"text-obs\"></div>\n\t      <textarea\n          #textarea\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"3\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t      formControlName=\"value\"\n\t\t      matInput>\n\t      </textarea>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n          {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.select\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <mat-select [multiple]=\"propriedade.get('multiple').value\" [required]=\"propriedade.get('required').value\"\n                    [tabIndex]=\"tabIndexStart + i\" formControlName=\"value\">\n\t        <mat-option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n\t          {{options.name}}\n\t        </mat-option>\n\t      </mat-select>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n      <mat-form-field\n        class=\"select-multiple-native\"\n        *ngIf=\"propriedade.get('type').value == typeField.selectMultipleNative\"\n        [appearance]=\"propriedade.get('appearance').value\"\n        [floatLabel]=\"propriedade.get('floatLabel').value\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-label>{{propriedade.get('label').value}}</mat-label>\n        <select\n          matNativeControl\n          formControlName=\"value\"\n          multiple\n          [tabIndex]=\"tabIndexStart + i\"\n          [required]=\"propriedade.get('required').value\">\n          <option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n            {{options.name}}\n          </option>\n        </select>\n        <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n          <mat-icon>info</mat-icon>\n          {{propriedade.get('textHint').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n      </mat-form-field>\n\t    <div\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.checkbox\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-checkbox\n          [tabIndex]=\"tabIndexStart + i\"\n\t\t      formControlName=\"value\"\n\t\t      value=\"true\">\n\t        {{propriedade.get('label').value}}\n\t      </mat-checkbox>\n\t    </div>\n\t\t  <div\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.moreItems\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\"\n\t\t\t  class=\"more-items-content\">\n\t\t\t  <fieldset>\n\t\t\t\t  <legend>\n\t\t\t\t\t  <koala-button\n\t\t\t\t\t\t  (click)=\"addMoreItem(i)\"\n\t\t\t\t\t\t  [disabled]=\"propriedade.get('moreItemsConfig').value.length === propriedade.get('moreItemsMaxItems').value\"\n\t\t\t\t\t\t  [tooltip]=\"propriedade.get('moreItemsButtonIconAddlabel').value\"\n\t\t\t\t\t\t  [backgroundColor]=\"propriedade.get('moreItemsIconBackgroundColor').value\"\n              [color]=\"propriedade.get('moreItemsIconFontColor').value\"\n\t\t\t\t\t\t  class=\"btn-add-more-items\"\n\t\t\t\t\t\t  icon=\"add\">\n\t\t\t\t\t  </koala-button>\n\t\t\t\t\t  {{propriedade.get('label').value}} (Min.: {{propriedade.get('moreItemsMinItems').value}}\n\t\t\t\t\t                                     | M\u00E1x.: {{propriedade.get('moreItemsMaxItems').value}})\n\t\t\t\t  </legend>\n\t\t\t\t  <mat-accordion class=\"items\" multi>\n\t\t\t\t\t  <mat-expansion-panel\n\t\t\t\t\t\t  *ngFor=\"let item of propriedade.get('moreItemsConfig').value.slice().reverse(); index as indexMoreItems\"\n\t\t\t\t\t\t  expanded>\n\t\t\t\t\t\t  <mat-expansion-panel-header>\n\t\t\t\t\t\t\t\t<mat-panel-title class=\"titleForm\">#\n\t\t\t\t\t\t\t\t\t{{propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems + 1}}</mat-panel-title>\n\t\t\t\t\t\t\t\t<mat-panel-description class=\"titleForm\">\n\t\t\t\t\t\t\t\t\t{{propriedade.get('label').value}}\n\t\t\t\t\t\t\t\t\t<mat-icon>{{propriedade.get('moreItemsIcon').value}}</mat-icon>\n\t\t\t\t\t\t\t\t</mat-panel-description>\n\t\t\t\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t\t\t  [showFieldsMoreItensConfig]=\"item.showFieldsMoreItensConfig\"\n\t\t\t\t\t\t\t  [showFields]=\"item.showFields\"\n\t\t\t\t\t\t\t  [formConfig]=\"item.formConfig\"\n\t\t\t\t\t\t\t  [form]=\"item.form\"\n                [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t\t\t  </koala-dynamic-form>\n\t\t\t\t\t    <mat-action-row\n\t\t\t\t\t\t    *ngIf=\"propriedade.get('moreItemsConfig').value.length > propriedade.get('moreItemsMinItems').value\">\n\t\t\t\t\t      <button\n\t\t\t\t\t\t      (click)=\"removeMoreItem(i, propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems)\"\n\t\t\t\t\t\t      mat-icon-button>\n\t\t\t\t\t\t      <mat-icon>delete</mat-icon>\n\t\t\t\t\t      </button>\n\t\t\t\t\t    </mat-action-row>\n\t\t\t\t\t  </mat-expansion-panel>\n\t\t\t\t  </mat-accordion>\n\t\t\t  </fieldset>\n\t\t  </div>\n\t\t  <mat-form-field\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.autocomplete\"\n\t\t\t  [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t  [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}} {{propriedade.get('multiple').value &&\n\t      propriedade.get('required').value ? '*' : ''}}</mat-label>\n\t\t\t  <div *ngIf=\"propriedade.get('multiple').value else single\">\n\t        <mat-chip-list #chipList>\n\t          <mat-chip\n\t\t          (removed)=\"removeOptionOnAutocomplete(i, option)\"\n\t\t          *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n\t\t          [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n\t\t          [removable]=\"true\"\n\t\t          [selectable]=\"true\">\n\t            {{display(option)}}\n\t\t          <mat-icon matChipRemove>cancel</mat-icon>\n\t          </mat-chip>\n\t          <input\n\t\t          #autocompleteInput\n              [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t          [required]=\"propriedade.get('required').value\"\n\t\t          [matAutocomplete]=\"auto\"\n\t\t          [matChipInputFor]=\"chipList\"\n              [tabIndex]=\"tabIndexStart + i\"\n\t\t          formControlName=\"value\"\n\t\t          matInput\n\t\t          type=\"text\"\n\t\t          placeholder=\"Selecione um ou mais op\u00E7\u00F5es...\">\n\t        </mat-chip-list>\n\t      </div>\n\t      <ng-template #single>\n\t\t      <input\n\t\t\t      [matAutocomplete]=\"auto\"\n            [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t\t      [required]=\"propriedade.get('required').value\"\n            [tabIndex]=\"tabIndexStart + i\"\n\t\t\t      formControlName=\"value\"\n\t\t\t      matInput\n\t\t\t      placeholder=\"Selecione uma op\u00E7\u00E3o...\"\n\t\t\t      type=\"text\">\n\t      </ng-template>\n\t      <mat-spinner *ngIf=\"propriedade.get('autocompleteLoading').value | async\" color=\"primary\"\n\t                   matSuffix></mat-spinner>\n\t      <button\n\t\t      (click)=\"clearAutocomplete(i)\"\n\t\t      *ngIf=\"\n\t          !(propriedade.get('autocompleteLoading').value | async) &&\n\t          !propriedade.get('disabled').value\"\n\t\t      color=\"warn\"\n\t\t      mat-icon-button\n\t\t      matSuffix\n\t\t      type=\"button\">\n\t        <mat-icon>close</mat-icon>\n\t      </button>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required || propriedade.get('value').errors?.autocompleteSelected\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getAutocompleteMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t      <mat-autocomplete\n\t\t      #auto=\"matAutocomplete\"\n\t\t      [displayWith]=\"display\" autoActiveFirstOption>\n\t\t      <div *ngIf=\"(propriedade.get('autocompleteOptionsFiltered').value | async) as options\">\n\t\t        <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n\t\t          {{option.name}}\n\t\t        </mat-option>\n\t\t      </div>\n\t      </mat-autocomplete>\n\t    </mat-form-field>\n\t\t  <div *ngIf=\"propriedade.get('type').value == typeField.file\">\n\t\t\t  <koala-file-button\n\t\t\t\t  (getFiles)=\"propriedade.get('value').setValue($event)\"\n\t\t\t\t  [accept]=\"propriedade.get('fileButtonConfig').value.accept\"\n\t\t\t\t  [backgroundColor]=\"propriedade.get('fileButtonConfig').value.backgroundColor\"\n\t\t\t\t  [color]=\"propriedade.get('fileButtonConfig').value.color\"\n\t\t\t\t  [disabled]=\"propriedade.get('disabled').value\"\n\t\t\t\t  [icon]=\"propriedade.get('fileButtonConfig').value.icon\"\n\t\t\t\t  [multiple]=\"propriedade.get('multiple').value\"\n\t\t\t\t  [text]=\"propriedade.get('fileButtonConfig').value.text\">\n\t\t\t  </koala-file-button>\n\t\t  </div>\n\t\t  <div *ngIf=\"\n\t\t    propriedade.get('type').value == typeField.dynamicForm &&\n\t\t\t\t(propriedade.get('dynamicFormConfig').value | async) as dynamicFormConfig\">\n\t\t\t  <fieldset *ngIf=\"propriedade.get('label').value else dynamicFormWithoutLabel\">\n\t\t\t\t  <legend>{{propriedade.get('label').value}}</legend>\n\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t  [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t  [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t  [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t  [showFields]=\"dynamicFormConfig.showFields\"\n            [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t  </koala-dynamic-form>\n\t\t\t  </fieldset>\n\t\t\t  <ng-template #dynamicFormWithoutLabel>\n\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t  [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t  [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t  [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t  [showFields]=\"dynamicFormConfig.showFields\"\n            [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t  </koala-dynamic-form>\n\t\t\t  </ng-template>\n\t\t  </div>\n      <div\n        class=\"radio-btn-group\"\n        *ngIf=\"propriedade.get('type').value == typeField.radio\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-radio-group formControlName=\"value\">\n          <label *ngIf=\"propriedade.get('label').value\">{{propriedade.get('label').value}}</label>\n          <mat-radio-button\n            [tabIndex]=\"tabIndexStart + i\"\n            *ngFor=\"let options of propriedade.get('opcoesSelect').value\"\n            [value]=\"options.value\">\n            {{options.name}}\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\t  </div>\n  </div>\n  <ng-content select=\"[btn-submit]\"></ng-content>\n</div>\n",
+                    template: "<div [formGroup]=\"form\" class=\"p-relative w-100\">\n  <div *ngFor=\"let propriedade of controls?.controls; let i = index;\"\n       [ngClass]=\"(propriedade.get('show').value | async) ? propriedade.get('class').value : 'd-none'\"\n       formArrayName=\"formData\">\n\t  <div *ngIf=\"propriedade.get('show').value | async\">\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.text ||\n\t             propriedade.get('type').value == typeField.password ||\n\t             propriedade.get('type').value == typeField.cpf ||\n\t             propriedade.get('type').value == typeField.cnpj ||\n\t             propriedade.get('type').value == typeField.datetime ||\n\t             propriedade.get('type').value == typeField.email ||\n\t             propriedade.get('type').value == typeField.number ||\n\t             propriedade.get('type').value == typeField.stringNumber ||\n\t             propriedade.get('type').value == typeField.time ||\n\t             propriedade.get('type').value == typeField.date ||\n\t             propriedade.get('type').value == typeField.hoursAndMinutes ||\n\t             propriedade.get('type').value == typeField.phone ||\n\t             propriedade.get('type').value == typeField.percent ||\n\t             propriedade.get('type').value == typeField.color ||\n\t             propriedade.get('type').value == typeField.month ||\n\t             propriedade.get('type').value == typeField.competenceDate ||\n               propriedade.get('type').value == typeField.stringWithCustomMasc\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <input\n\t\t      [dropSpecialCharacters]=\"false\"\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      (keyup)=\"hoursAndMinutesApplyMask(i, $event)\"\n\t\t      [required]=\"propriedade.get('required').value\"\n\t\t      [tabIndex]=\"tabIndexStart + i\"\n\t\t      [mask]=\"((propriedade.get('type').value == typeField.competenceDate) ? '00/0000' : null) ||\n\t\t              ((propriedade.get('type').value == typeField.phone) ? '(00)0000-0000?0' : null) ||\n\t\t              ((propriedade.get('type').value == typeField.stringNumber) ? '0{'+propriedade.get('maxLength').value+'}' : null) ||\n                  ((propriedade.get('type').value == typeField.cpf) ? '000.000.000-00' : null) ||\n                  ((propriedade.get('type').value == typeField.cnpj) ? '00.000.000/0000-00' : null) ||\n                  ((propriedade.get('type').value == typeField.percent) ? 'percent' : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.hoursAndMinutes) ? hoursAndMinutesMask : null) ||\n\t\t\t\t\t\t\t\t\t((propriedade.get('type').value == typeField.stringWithCustomMasc) ? propriedade.get('customMasc').value : null)\"\n\t\t      [validation]=\"\n\t                    (propriedade.get('type').value == typeField.cpf && propriedade.get('value').errors?.cpfInvalid) ||\n\t                    (propriedade.get('type').value == typeField.cnpj && propriedade.get('value').errors?.cnpjInvalid)\"\n\t\t      [type]=\"((propriedade.get('type').value == typeField.cpf ||\n                    propriedade.get('type').value == typeField.cnpj ||\n                    propriedade.get('type').value == typeField.phone ||\n                    propriedade.get('type').value == typeField.percent\n                  )) ? 'tel' : (\n                    propriedade.get('type').value == typeField.month ?\n                    'month' : (\n                    propriedade.get('type').value == typeField.date ?\n                    'date' : (\n                    propriedade.get('type').value == typeField.datetime ?\n                    'datetime-local' : (\n                    propriedade.get('type').value == typeField.email ?\n                    'email' : (\n                    propriedade.get('type').value == typeField.number ?\n                    'number' : (\n                    propriedade.get('type').value == typeField.time ?\n                    'time' : (\n                    propriedade.get('type').value == typeField.password ?\n                    'password' : (\n                    propriedade.get('type').value == typeField.color ?\n                    'color' : 'text'))))))))\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          [thousandSeparator]=\"propriedade.get('customMascThousandSeparator').value\"\n          [suffix]=\"propriedade.get('customMascSuffix').value\"\n          [prefix]=\"propriedade.get('customMascPrefix').value\"\n          separatorLimit=\"0\"\n          autocomplete=\"off\"\n\t\t      formControlName=\"value\"\n\t\t      matInput/>\n\t      <button\n\t\t      (click)=\"passwordView(i)\"\n\t\t      *ngIf=\"propriedade.get('hidePassword').value !== null\"\n\t\t      [attr.aria-label]=\"'Hide password'\"\n\t\t      [attr.aria-pressed]=\"propriedade.get('hidePassword').value\"\n\t\t      mat-icon-button matSuffix tabindex=\"-1\" type=\"button\">\n\t        <mat-icon>{{propriedade.get('hidePassword').value ? 'visibility_off' : 'visibility'}}</mat-icon>\n\t      </button>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.cpfInvalid\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.cnpjInvalid\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.email\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getInvalidMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.dateMin\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getDateMinMessage()}}\n          {{propriedade.get('min').value | date:\"shortDate\"}}.\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.dateMax\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getDateMaxMessage()}}\n          {{propriedade.get('max').value | date:\"shortDate\"}}.\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.coin\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <input\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          autocomplete=\"off\"\n\t\t      currencyMask\n\t\t      formControlName=\"value\"\n\t\t      matInput\n\t\t      type=\"tel\"/>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n      <mat-form-field\n        *ngIf=\"propriedade.get('type').value == typeField.float\"\n        [appearance]=\"propriedade.get('appearance').value\"\n        [floatLabel]=\"propriedade.get('floatLabel').value\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-label>{{propriedade.get('label').value}}</mat-label>\n        <input\n          [koalaAutoFocus]=\"propriedade.get('focus').value\"\n          [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [min]=\"propriedade.get('min').value\"\n          [max]=\"propriedade.get('max').value\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n          autocomplete=\"off\"\n          currencyMask\n          [options]=\"{prefix: ''}\"\n          formControlName=\"value\"\n          matInput\n          type=\"tel\"/>\n        <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n          <mat-icon>info</mat-icon>\n          {{propriedade.get('textHint').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.min\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinMessage(propriedade.get('min').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.max\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxMessage(propriedade.get('max').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n      </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.valueList ||\n\t             propriedade.get('type').value == typeField.textarea\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <textarea\n          #textarea\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"3\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t      formControlName=\"value\"\n\t\t      matInput>\n        </textarea>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n          {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t\t  <mat-form-field\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.textLogs\"\n\t\t\t  [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t  [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <div [innerHTML]=\"propriedade.get('textLogs').value\" class=\"text-obs\"></div>\n\t      <textarea\n          #textarea\n\t\t      [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t      [mat-autosize]=\"true\"\n\t\t      [matAutosizeMaxRows]=\"8\"\n\t\t      [matAutosizeMinRows]=\"3\"\n\t\t      [required]=\"propriedade.get('required').value\"\n          [tabIndex]=\"tabIndexStart + i\"\n          [minLength]=\"propriedade.get('minLength').value\"\n          [maxLength]=\"propriedade.get('maxLength').value\"\n\t\t      formControlName=\"value\"\n\t\t      matInput>\n\t      </textarea>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n        <mat-hint align=\"end\" *ngIf=\"propriedade.get('maxLength').value\">\n          {{textarea.value.length}}/{{propriedade.get('maxLength').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.minLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMinLengthMessage(propriedade.get('minLength').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.maxLength\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getMaxLengthMessage(propriedade.get('maxLength').value)}}\n        </mat-error>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n\t    <mat-form-field\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.select\"\n\t\t    [appearance]=\"propriedade.get('appearance').value\"\n\t\t    [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}}</mat-label>\n\t      <mat-select [multiple]=\"propriedade.get('multiple').value\" [required]=\"propriedade.get('required').value\"\n                    [tabIndex]=\"tabIndexStart + i\" formControlName=\"value\">\n\t        <mat-option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n\t          {{options.name}}\n\t        </mat-option>\n\t      </mat-select>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t    </mat-form-field>\n      <mat-form-field\n        class=\"select-multiple-native\"\n        *ngIf=\"propriedade.get('type').value == typeField.selectMultipleNative\"\n        [appearance]=\"propriedade.get('appearance').value\"\n        [floatLabel]=\"propriedade.get('floatLabel').value\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-label>{{propriedade.get('label').value}}</mat-label>\n        <select\n          matNativeControl\n          formControlName=\"value\"\n          multiple\n          [tabIndex]=\"tabIndexStart + i\"\n          [required]=\"propriedade.get('required').value\">\n          <option *ngFor=\"let options of propriedade.get('opcoesSelect').value\" [value]=\"options.value\">\n            {{options.name}}\n          </option>\n        </select>\n        <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n          <mat-icon>info</mat-icon>\n          {{propriedade.get('textHint').value}}\n        </mat-hint>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.required\">\n          <mat-icon>error</mat-icon>\n          {{errorMessage.getRequiredMessage(propriedade.get('label').value)}}\n        </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n      </mat-form-field>\n\t    <div\n\t\t    *ngIf=\"propriedade.get('type').value == typeField.checkbox\"\n\t\t    [formGroupName]=\"i\"\n\t\t    [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-checkbox\n          [tabIndex]=\"tabIndexStart + i\"\n\t\t      formControlName=\"value\"\n\t\t      value=\"true\">\n\t        {{propriedade.get('label').value}}\n\t      </mat-checkbox>\n\t    </div>\n\t\t  <div\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.moreItems\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\"\n\t\t\t  class=\"more-items-content\">\n\t\t\t  <fieldset>\n\t\t\t\t  <legend>\n\t\t\t\t\t  <koala-button\n\t\t\t\t\t\t  (click)=\"addMoreItem(i)\"\n\t\t\t\t\t\t  [disabled]=\"propriedade.get('moreItemsConfig').value.length === propriedade.get('moreItemsMaxItems').value\"\n\t\t\t\t\t\t  [tooltip]=\"propriedade.get('moreItemsButtonIconAddlabel').value\"\n\t\t\t\t\t\t  [backgroundColor]=\"propriedade.get('moreItemsIconBackgroundColor').value\"\n              [color]=\"propriedade.get('moreItemsIconFontColor').value\"\n\t\t\t\t\t\t  class=\"btn-add-more-items\"\n\t\t\t\t\t\t  icon=\"add\">\n\t\t\t\t\t  </koala-button>\n\t\t\t\t\t  {{propriedade.get('label').value}} (Min.: {{propriedade.get('moreItemsMinItems').value}}\n\t\t\t\t\t                                     | M\u00E1x.: {{propriedade.get('moreItemsMaxItems').value}})\n\t\t\t\t  </legend>\n\t\t\t\t  <mat-accordion class=\"items\" multi>\n\t\t\t\t\t  <mat-expansion-panel\n\t\t\t\t\t\t  *ngFor=\"let item of propriedade.get('moreItemsConfig').value.slice().reverse(); index as indexMoreItems\"\n\t\t\t\t\t\t  expanded>\n\t\t\t\t\t\t  <mat-expansion-panel-header>\n\t\t\t\t\t\t\t\t<mat-panel-title class=\"titleForm\">#\n\t\t\t\t\t\t\t\t\t{{propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems + 1}}</mat-panel-title>\n\t\t\t\t\t\t\t\t<mat-panel-description class=\"titleForm\">\n\t\t\t\t\t\t\t\t\t{{propriedade.get('label').value}}\n\t\t\t\t\t\t\t\t\t<mat-icon>{{propriedade.get('moreItemsIcon').value}}</mat-icon>\n\t\t\t\t\t\t\t\t</mat-panel-description>\n\t\t\t\t\t\t\t</mat-expansion-panel-header>\n\t\t\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t\t\t  [showFieldsMoreItensConfig]=\"item.showFieldsMoreItensConfig\"\n\t\t\t\t\t\t\t  [showFields]=\"item.showFields\"\n\t\t\t\t\t\t\t  [formConfig]=\"item.formConfig\"\n\t\t\t\t\t\t\t  [form]=\"item.form\"\n                [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t\t\t  </koala-dynamic-form>\n\t\t\t\t\t    <mat-action-row\n\t\t\t\t\t\t    *ngIf=\"propriedade.get('moreItemsConfig').value.length > propriedade.get('moreItemsMinItems').value\">\n\t\t\t\t\t      <button\n\t\t\t\t\t\t      (click)=\"removeMoreItem(i, propriedade.get('moreItemsConfig').value.length - 1 - indexMoreItems)\"\n\t\t\t\t\t\t      mat-icon-button>\n\t\t\t\t\t\t      <mat-icon>delete</mat-icon>\n\t\t\t\t\t      </button>\n\t\t\t\t\t    </mat-action-row>\n\t\t\t\t\t  </mat-expansion-panel>\n\t\t\t\t  </mat-accordion>\n\t\t\t  </fieldset>\n\t\t  </div>\n\t\t  <mat-form-field\n\t\t\t  *ngIf=\"propriedade.get('type').value == typeField.autocomplete\"\n\t\t\t  [appearance]=\"propriedade.get('appearance').value\"\n\t\t\t  [floatLabel]=\"propriedade.get('floatLabel').value\"\n\t\t\t  [formGroupName]=\"i\"\n\t\t\t  [ngClass]=\"propriedade.get('fieldClass').value\">\n\t      <mat-label>{{propriedade.get('label').value}} {{propriedade.get('multiple').value &&\n\t      propriedade.get('required').value ? '*' : ''}}</mat-label>\n\t\t\t  <div *ngIf=\"propriedade.get('multiple').value else single\">\n\t        <mat-chip-list #chipList>\n\t          <mat-chip\n\t\t          (removed)=\"removeOptionOnAutocomplete(i, option)\"\n\t\t          *ngFor=\"let option of propriedade.get('autocompleteSelectedValue').value\"\n\t\t          [color]=\"getColorChip(propriedade.get('autocompleteMultipleConfig').value | async)\"\n\t\t          [removable]=\"true\"\n\t\t          [selectable]=\"true\">\n\t            {{display(option)}}\n\t\t          <mat-icon matChipRemove>cancel</mat-icon>\n\t          </mat-chip>\n\t          <input\n\t\t          #autocompleteInput\n              [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t          [required]=\"propriedade.get('required').value\"\n\t\t          [matAutocomplete]=\"auto\"\n\t\t          [matChipInputFor]=\"chipList\"\n              [tabIndex]=\"tabIndexStart + i\"\n\t\t          formControlName=\"value\"\n\t\t          matInput\n\t\t          type=\"text\"\n\t\t          placeholder=\"Selecione um ou mais op\u00E7\u00F5es...\">\n\t        </mat-chip-list>\n\t      </div>\n\t      <ng-template #single>\n\t\t      <input\n\t\t\t      [matAutocomplete]=\"auto\"\n            [koalaAutoFocus]=\"propriedade.get('focus').value\"\n\t\t\t      [required]=\"propriedade.get('required').value\"\n            [tabIndex]=\"tabIndexStart + i\"\n            autocomplete=\"off\"\n\t\t\t      formControlName=\"value\"\n\t\t\t      matInput\n\t\t\t      placeholder=\"Selecione uma op\u00E7\u00E3o...\"\n\t\t\t      type=\"text\">\n\t      </ng-template>\n\t      <mat-spinner *ngIf=\"propriedade.get('autocompleteLoading').value | async\" color=\"primary\"\n\t                   matSuffix></mat-spinner>\n\t      <button\n\t\t      (click)=\"clearAutocomplete(i)\"\n\t\t      *ngIf=\"\n\t          !(propriedade.get('autocompleteLoading').value | async) &&\n\t          !propriedade.get('disabled').value\"\n\t\t      color=\"warn\"\n\t\t      mat-icon-button\n\t\t      matSuffix\n\t\t      type=\"button\">\n\t        <mat-icon>close</mat-icon>\n\t      </button>\n\t      <mat-hint *ngIf=\"propriedade.get('textHint').value\">\n\t        <mat-icon>info</mat-icon>\n\t\t      {{propriedade.get('textHint').value}}\n\t      </mat-hint>\n\t      <mat-error *ngIf=\"propriedade.get('value').errors?.required || propriedade.get('value').errors?.autocompleteSelected\">\n\t        <mat-icon>error</mat-icon>\n          {{errorMessage.getAutocompleteMessage(propriedade.get('label').value)}}\n\t      </mat-error>\n        <mat-error *ngIf=\"propriedade.get('value').errors?.customError\">\n          <mat-icon>error</mat-icon>\n          {{propriedade.get('value').errors?.customError.message}}.\n        </mat-error>\n\t      <mat-autocomplete\n\t\t      #auto=\"matAutocomplete\"\n\t\t      [displayWith]=\"display\" autoActiveFirstOption>\n\t\t      <div *ngIf=\"(propriedade.get('autocompleteOptionsFiltered').value | async) as options\">\n\t\t        <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n\t\t          {{option.name}}\n\t\t        </mat-option>\n\t\t      </div>\n\t      </mat-autocomplete>\n\t    </mat-form-field>\n\t\t  <div *ngIf=\"propriedade.get('type').value == typeField.file\">\n\t\t\t  <koala-file-button\n\t\t\t\t  (getFiles)=\"propriedade.get('value').setValue($event)\"\n\t\t\t\t  [accept]=\"propriedade.get('fileButtonConfig').value.accept\"\n\t\t\t\t  [backgroundColor]=\"propriedade.get('fileButtonConfig').value.backgroundColor\"\n\t\t\t\t  [color]=\"propriedade.get('fileButtonConfig').value.color\"\n\t\t\t\t  [disabled]=\"propriedade.get('disabled').value\"\n\t\t\t\t  [icon]=\"propriedade.get('fileButtonConfig').value.icon\"\n\t\t\t\t  [multiple]=\"propriedade.get('multiple').value\"\n\t\t\t\t  [text]=\"propriedade.get('fileButtonConfig').value.text\">\n\t\t\t  </koala-file-button>\n\t\t  </div>\n\t\t  <div *ngIf=\"\n\t\t    propriedade.get('type').value == typeField.dynamicForm &&\n\t\t\t\t(propriedade.get('dynamicFormConfig').value | async) as dynamicFormConfig\">\n\t\t\t  <fieldset *ngIf=\"propriedade.get('label').value else dynamicFormWithoutLabel\">\n\t\t\t\t  <legend>{{propriedade.get('label').value}}</legend>\n\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t  [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t  [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t  [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t  [showFields]=\"dynamicFormConfig.showFields\"\n            [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t  </koala-dynamic-form>\n\t\t\t  </fieldset>\n\t\t\t  <ng-template #dynamicFormWithoutLabel>\n\t\t\t\t  <koala-dynamic-form\n\t\t\t\t\t  [formConfig]=\"dynamicFormConfig.formConfig\"\n\t\t\t\t\t  [form]=\"dynamicFormConfig.form\"\n\t\t\t\t\t  [setValues]=\"dynamicFormConfig.setValues\"\n\t\t\t\t\t  [showFields]=\"dynamicFormConfig.showFields\"\n            [tabIndexStart]=\"tabIndexStart + i\">\n\t\t\t\t  </koala-dynamic-form>\n\t\t\t  </ng-template>\n\t\t  </div>\n      <div\n        class=\"radio-btn-group\"\n        *ngIf=\"propriedade.get('type').value == typeField.radio\"\n        [formGroupName]=\"i\"\n        [ngClass]=\"propriedade.get('fieldClass').value\">\n        <mat-radio-group formControlName=\"value\">\n          <label *ngIf=\"propriedade.get('label').value\">{{propriedade.get('label').value}}</label>\n          <mat-radio-button\n            [tabIndex]=\"tabIndexStart + i\"\n            *ngFor=\"let options of propriedade.get('opcoesSelect').value\"\n            [value]=\"options.value\">\n            {{options.name}}\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\t  </div>\n  </div>\n  <ng-content select=\"[btn-submit]\"></ng-content>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".more-items-content fieldset{border:1px solid #cccccc;padding:16px}.more-items-content fieldset legend{font-family:\"Josefin Sans\",sans-serif;font-size:11px;font-weight:bold;padding:0 8px}.more-items-content .items .titleForm{color:#616161}.more-items-content .items .mat-expansion-panel-header-title,.more-items-content .items .mat-expansion-panel-header-description{flex-basis:0}.more-items-content .items .mat-expansion-panel-header-description{align-items:center;justify-content:space-between}.more-items-content .items .mat-form-field+.mat-form-field{margin-left:8px}.radio-btn-group label{position:relative;display:block;padding:10px 0}.text-obs{background:#eeeeee;border-radius:5px;color:#212121;font-family:OpenSansLight,sans-serif;height:150px;margin:0 auto 10px;overflow-y:auto;padding:10px;position:relative;width:calc(100% - 27px)}.select-multiple-native{margin-bottom:15px}.select-multiple-native select{width:100%;height:150px;background:transparent;border:none}.select-multiple-native select:focus,.select-multiple-native select:active{outline:none}.select-multiple-native select option{padding:5px 10px;font-family:JosefinSans,sans-serif}.select-multiple-native select option:checked{background:#f1f1f1!important}\n"]
                 },] }