@koalarx/ui 13.0.12 → 13.0.13

package/folder-page/esm2020/lib/koala.folder-page.module.mjs

@@ -8,20 +8,20 @@ import { KoalaIconModule } from "@koalarx/ui/icon";
 import * as i0 from "@angular/core";
 export class KoalaFolderPageModule {
 }
-KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
+KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule], exports: [FolderComponent] });
-KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, imports: [[
+KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, imports: [[
             CommonModule,
             RouterModule,
             MatButtonModule,
             MatIconModule,
             KoalaIconModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/folder-page/fesm2015/koalarx-ui-folder-page.mjs

@@ -47,9 +47,9 @@ class FolderComponent {
         }
     }
 }
-FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FolderComponent, decorators: [{
+FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FolderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-folder-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"] }]
         }], propDecorators: { titlePage: [{
@@ -77,20 +77,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 
 class KoalaFolderPageModule {
 }
-KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
+KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule], exports: [FolderComponent] });
-KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, imports: [[
+KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, imports: [[
             CommonModule,
             RouterModule,
             MatButtonModule,
             MatIconModule,
             KoalaIconModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/folder-page/fesm2020/koalarx-ui-folder-page.mjs

@@ -46,9 +46,9 @@ class FolderComponent {
         }
     }
 }
-FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FolderComponent, decorators: [{
+FolderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FolderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FolderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: FolderComponent, selector: "koala-folder-page", inputs: { titlePage: "titlePage", titleIcon: "titleIcon", koalaIcon: "koalaIcon", customFolderFontColor: "customFolderFontColor", customFolderBackgroudColor: "customFolderBackgroudColor", navigateHistory: "navigateHistory" }, viewQueries: [{ propertyName: "folder", first: true, predicate: ["folder"], descendants: true, static: true }, { propertyName: "folderTitle", first: true, predicate: ["folderTitle"], descendants: true, static: true }, { propertyName: "folderNavigateHistory", first: true, predicate: ["folderNavigateHistory"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FolderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-folder-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #folder class=\"folder-list\">\n  <h1 #folderTitle>\n    <mat-icon #folderIconTitle *ngIf=\"titleIcon && !koalaIcon\">{{titleIcon}}</mat-icon>\n    <koala-icon *ngIf=\"titleIcon && koalaIcon\" [size]=\"20\" [color]=\"customFolderFontColor\" [icon]=\"getKoalaIcon()\"></koala-icon>\n    {{titlePage}}\n  </h1>\n  <ul #folderNavigateHistory class=\"navigate-history\" *ngIf=\"navigateHistory\">\n    <li *ngFor=\"let item of navigateHistory\">\n      <a [style]=\"'color: ' + customFolderFontColor\" [ngClass]=\"{'disabled': !item.routerLink}\" [routerLink]=\"item.routerLink\">{{item.name}}</a>\n    </li>\n  </ul>\n  <nav class=\"menu-folder\">\n    <ng-content select=\"[menu-page]\"></ng-content>\n  </nav>\n\n  <div class=\"content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n\n</div>\n", styles: [".folder-list{position:relative;background-size:cover;width:100%;height:160px;box-sizing:border-box}.folder-list h1{padding:0;margin:0;position:absolute;top:20px;left:20px;font-size:1.2em;font-family:OpenSans,sans-serif;font-weight:700;display:flex;align-items:center}.folder-list h1 mat-icon,.folder-list h1 koala-icon{margin-right:10px}nav.menu-folder{position:absolute;right:0;top:20px;z-index:4;padding:7px 30px}.content{position:relative;display:block;height:calc(100vh - 155px);overflow-x:hidden;top:85px;margin:0 auto;padding:3px 0}.navigate-history{position:absolute;top:45px;display:flex;align-items:center;list-style:none;padding:5px 20px;margin:0;font-size:0}.navigate-history li a{font-size:12px;text-decoration:none}.navigate-history li a.disabled{cursor:default;opacity:.8;pointer-events:none}.navigate-history li:after{content:\">\";padding:0 5px;font-size:12px;color:inherit}.navigate-history li:last-child:after{content:\"\";padding:0}\n"] }]
         }], propDecorators: { titlePage: [{
@@ -76,20 +76,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 
 class KoalaFolderPageModule {
 }
-KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
+KoalaFolderPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFolderPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, declarations: [FolderComponent], imports: [CommonModule,
         RouterModule,
         MatButtonModule,
         MatIconModule,
         KoalaIconModule], exports: [FolderComponent] });
-KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, imports: [[
+KoalaFolderPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, imports: [[
             CommonModule,
             RouterModule,
             MatButtonModule,
             MatIconModule,
             KoalaIconModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFolderPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/form/esm2020/lib/btn-submit/btn-submit.component.mjs

@@ -24,9 +24,9 @@ export class BtnSubmitComponent {
         }
     }
 }
-BtnSubmitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BtnSubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BtnSubmitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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"], components: [{ type: i1.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"] }, { type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BtnSubmitComponent, decorators: [{
+BtnSubmitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BtnSubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BtnSubmitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.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"], components: [{ type: i1.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"] }, { type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.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: [{

package/form/esm2020/lib/directives/koala-autofocus.directive.mjs

@@ -12,9 +12,9 @@ export class KoalaAutofocusDirective {
         }
     }
 }
-KoalaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-KoalaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: { koalaAutoFocus: "koalaAutoFocus" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaAutofocusDirective, decorators: [{
+KoalaAutofocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+KoalaAutofocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: { koalaAutoFocus: "koalaAutoFocus" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaAutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[koalaAutoFocus]'

package/form/esm2020/lib/dynamic-form/dynamic-form.component.mjs

@@ -566,9 +566,9 @@ export class DynamicFormComponent extends FormAbstract {
         return isValid;
     }
 }
-DynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicFormComponent, deps: [{ token: i1.FormBuilder }, { token: i2.KoalaDynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: { form: "form", formConfig: "formConfig", showFields: "showFields", showFieldsMoreItensConfig: "showFieldsMoreItensConfig", setValues: "setValues", tabIndexStart: "tabIndexStart" }, viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, 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]=\"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\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              [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\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"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i9.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { type: i10.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i10.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { type: i11.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i12.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i13.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i14.FileButtonComponent, selector: "koala-file-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "multiple", "accept", "setFile", "updateFileList", "autoclear"], outputs: ["getFiles"] }, { type: i15.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i3.MatLabel, selector: "mat-label" }, { 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]" }, { type: i17.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"] }, { type: i18.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"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i19.KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: ["koalaAutoFocus"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }, { type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i20.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i21.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i10.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i10.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i10.MatExpansionPanelDescription, selector: "mat-panel-description" }, { type: i10.MatExpansionPanelActionRow, selector: "mat-action-row" }, { type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i11.MatChipRemove, selector: "[matChipRemove]" }, { type: i13.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i15.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }], pipes: { "async": i16.AsyncPipe, "date": i16.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DynamicFormComponent, decorators: [{
+DynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DynamicFormComponent, deps: [{ token: i1.FormBuilder }, { token: i2.KoalaDynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
+DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: { form: "form", formConfig: "formConfig", showFields: "showFields", showFieldsMoreItensConfig: "showFieldsMoreItensConfig", setValues: "setValues", tabIndexStart: "tabIndexStart" }, viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, 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]=\"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\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              [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\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"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.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"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i9.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { type: i10.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i10.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { type: i11.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i12.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i13.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i14.FileButtonComponent, selector: "koala-file-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "multiple", "accept", "setFile", "updateFileList", "autoclear"], outputs: ["getFiles"] }, { type: i15.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i3.MatLabel, selector: "mat-label" }, { 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]" }, { type: i17.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"] }, { type: i18.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"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i19.KoalaAutofocusDirective, selector: "[koalaAutoFocus]", inputs: ["koalaAutoFocus"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }, { type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i20.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i21.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i10.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i10.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i10.MatExpansionPanelDescription, selector: "mat-panel-description" }, { type: i10.MatExpansionPanelActionRow, selector: "mat-action-row" }, { type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i11.MatChipRemove, selector: "[matChipRemove]" }, { type: i13.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i15.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }], pipes: { "async": i16.AsyncPipe, "date": i16.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.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\">\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\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              [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\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.FormBuilder }, { type: i2.KoalaDynamicFormService }]; }, propDecorators: { form: [{

package/form/esm2020/lib/dynamic-form/koala.dynamic-form.service.mjs

@@ -203,9 +203,9 @@ export class KoalaDynamicFormService {
         return value;
     }
 }
-KoalaDynamicFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaDynamicFormService, deps: [{ token: i1.FormBuilder }, { token: i2.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaDynamicFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaDynamicFormService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaDynamicFormService, decorators: [{
+KoalaDynamicFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaDynamicFormService, deps: [{ token: i1.FormBuilder }, { token: i2.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaDynamicFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaDynamicFormService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaDynamicFormService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "any" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.DeviceDetectorService }]; } });

package/form/esm2020/lib/koala.form.module.mjs

@@ -23,8 +23,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "ngx-mask";
 export class KoalaFormModule {
 }
-KoalaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFormModule, declarations: [BtnSubmitComponent,
+KoalaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFormModule, declarations: [BtnSubmitComponent,
         DynamicFormComponent,
         KoalaAutofocusDirective], imports: [CommonModule,
         ReactiveFormsModule,
@@ -55,7 +55,7 @@ KoalaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         MatProgressSpinnerModule,
         BtnSubmitComponent,
         DynamicFormComponent] });
-KoalaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFormModule, imports: [[
+KoalaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFormModule, imports: [[
             CommonModule,
             ReactiveFormsModule,
             FormsModule,
@@ -85,7 +85,7 @@ KoalaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         MatButtonModule,
         MatIconModule,
         MatProgressSpinnerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KoalaFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: KoalaFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [