@koalarx/ui 13.2.8 → 14.0.0

package/list/fesm2015/koalarx-ui-list.mjs

@@ -1,8 +1,8 @@
-import * as i13 from '@angular/material/paginator';
+import * as i15 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
-import * as i11 from '@koalarx/ui/dynamic-component';
+import * as i9 from '@koalarx/ui/dynamic-component';
 import { KoalaDynamicComponent, KoalaDynamicComponentModule } from '@koalarx/ui/dynamic-component';
 import { Observable, BehaviorSubject, merge } from 'rxjs';
 import { first, startWith, switchMap, debounceTime, map } from 'rxjs/operators';
@@ -10,28 +10,28 @@ import { __awaiter } from 'tslib';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i2 from '@koalarx/ui/form';
 import { FormAbstract, KoalaFormModule } from '@koalarx/ui/form';
-import * as i8 from '@angular/material/table';
+import * as i12 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { delay } from '@koalarx/utils/operators/delay';
 import { randomString } from '@koalarx/utils/operators/string';
 import * as i1 from '@angular/forms';
-import { FormControl } from '@angular/forms';
-import * as i10 from '@angular/material/sort';
+import { UntypedFormControl } from '@angular/forms';
+import * as i13 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { koala } from '@koalarx/utils';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i3 from 'ngx-device-detector';
-import * as i4 from '@angular/material/button';
-import * as i5 from '@angular/material/icon';
-import * as i6 from '@angular/material/checkbox';
-import * as i7 from '@angular/material/progress-spinner';
-import * as i9 from '@koalarx/ui/button';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/material/checkbox';
+import * as i6 from '@angular/material/button';
+import * as i7 from '@angular/material/icon';
+import * as i8 from '@angular/material/progress-spinner';
+import * as i10 from '@koalarx/ui/button';
 import { KoalaButtonModule } from '@koalarx/ui/button';
-import * as i12 from '@angular/material/menu';
+import * as i11 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i14 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i15 from '@angular/material/tooltip';
+import * as i14 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { KoalaFolderPageModule } from '@koalarx/ui/folder-page';
 
@@ -58,9 +58,9 @@ class PaginationProvider extends MatPaginatorIntl {
         this.changes.next();
     }
 }
-PaginationProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginationProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PaginationProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginationProvider });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginationProvider, decorators: [{
+PaginationProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PaginationProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PaginationProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PaginationProvider });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PaginationProvider, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -175,9 +175,9 @@ class KoalaListService {
         return new ListBuilder();
     }
 }
-KoalaListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KoalaListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KoalaListService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KoalaListService, decorators: [{
+KoalaListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: KoalaListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: KoalaListService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: KoalaListService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "any" }]
         }] });
@@ -400,7 +400,7 @@ class ListComponent extends ListAbstract {
                 return item;
             });
             if ((_o = this.filterFormConfig) === null || _o === void 0 ? void 0 : _o.checkAndSearch) {
-                this.formFilter.addControl(this.filterFormConfig.checkAndSearch.formControlName, new FormControl((_p = this.filterFormConfig.checkAndSearch.isChecked) !== null && _p !== void 0 ? _p : false));
+                this.formFilter.addControl(this.filterFormConfig.checkAndSearch.formControlName, new UntypedFormControl((_p = this.filterFormConfig.checkAndSearch.isChecked) !== null && _p !== void 0 ? _p : false));
             }
         }
         if (this.config.getSelectionList)
@@ -485,15 +485,15 @@ class ListComponent extends ListAbstract {
         this.limitOptions = (_h = this.config.limitOptions) !== null && _h !== void 0 ? _h : this.limitOptions;
     }
 }
-ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, deps: [{ token: i1.FormBuilder }, { token: i2.KoalaDynamicFormService }, { token: i3.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ListComponent, selector: "koala-list", inputs: { config: "config" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" [ngClass]=\"customClass\">\n  <div *ngIf=\"filterFormConfig\" class=\"list-filter\">\n    <form (ngSubmit)=\"filterSubmit()\" [formGroup]=\"formFilter\">\n      <div class=\"main\">\n        <koala-dynamic-form\n          *ngIf=\"filterFormConfig.main\"\n          [form]=\"filterFormConfig.main.form\"\n          [formConfig]=\"filterFormConfig.main.formConfig\"\n          [setValues]=\"filterFormConfig.main.setValues\"\n          [showFields]=\"filterFormConfig.main.showFields\">\n        </koala-dynamic-form>\n        <ul>\n          <li *ngIf=\"filterFormConfig.advanced\" class=\"option\">\n            <button (click)=\"toogleFilter()\" color=\"primary\" mat-icon-button matTooltip=\"Filtro Avan\u00E7ado\"\n                    matTooltipPosition=\"below\" type=\"button\">\n              <mat-icon>tune</mat-icon>\n            </button>\n          </li>\n          <li *ngIf=\"filterFormConfig.checkAndSearch\" class=\"checkbox-filter\">\n            <mat-checkbox (click)=\"filterSubmit()\"\n                          [formControlName]=\"filterFormConfig.checkAndSearch.formControlName\">\n              {{filterFormConfig.checkAndSearch.label}}\n            </mat-checkbox>\n          </li>\n          <li class=\"option\">\n            <koala-submit\n              [btnSubmitDisabled]=\"btnSubmitDisabled\"\n              [fg]=\"formFilter\"\n              [iconButton]=\"true\"\n              [loader]=\"loader\"\n              icon=\"search\">\n            </koala-submit>\n          </li>\n        </ul>\n      </div>\n      <div *ngIf=\"filterFormConfig.advanced\" [ngClass]=\"{'show': showAdvancedFilter}\" class=\"advanced\">\n        <div class=\"container-filter\">\n          <koala-dynamic-form\n            [form]=\"filterFormConfig.advanced.form\"\n            [formConfig]=\"filterFormConfig.advanced.formConfig\"\n            [setValues]=\"filterFormConfig.advanced.setValues\"\n            [showFields]=\"filterFormConfig.advanced.showFields\">\n          </koala-dynamic-form>\n        </div>\n      </div>\n    </form>\n  </div>\n  <nav class=\"menu-list\">\n    <ul class=\"menu\">\n      <li *ngIf=\"selection.hasValue()\">\n        <ng-content select=\"[itemsSelectList]\"></ng-content>\n      </li>\n      <li *ngIf=\"selection.hasValue()\" class=\"text-center\">|</li>\n      <li>\n        <ng-content select=\"[itemsList]\"></ng-content>\n      </li>\n    </ul>\n  </nav>\n  <div *ngIf=\"loader | async\" class=\"spinner-container\" [ngClass]=\"{\n    'no-filter': !filterFormConfig\n  }\">\n    <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n  </div>\n  <div class=\"list\">\n    <table\n      *ngIf=\"!emptyListComponent || (emptyListComponent && dataSource?.data?.length > 0) else emptyList\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"columnSort\"\n      [id]=\"tableId\"\n      multiTemplateDataRows\n      class=\"table-hover\"\n      mat-table\n      matSort\n      [matSortDirection]=\"sortDirection\" matSortDisableClear>\n      <ng-container matColumnDef=\"select\">\n        <th *matHeaderCellDef mat-header-cell>\n          <mat-checkbox (change)=\"$event ? selectAll() : null\"\n                        [checked]=\"selection.hasValue() && allSelected$ | async\"\n                        [indeterminate]=\"selection.hasValue() && !(allSelected$ | async)\">\n          </mat-checkbox>\n        </th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <mat-checkbox *ngIf=\"disabledCheckboxItemList ? !disabledCheckboxItemList(item) : true\"\n                        (change)=\"$event ? selection.toggle(item) : null\"\n                        (click)=\"$event.stopPropagation(); selectItem();\"\n                        [checked]=\"selection.isSelected(item)\">\n          </mat-checkbox>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"collapseButton\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <koala-button\n            *ngIf=\"btnCollapseSubListConfig.show(item)\"\n            (click)=\"expandedElement = expandedElement === item ? null : item\"\n            [koalaIcon]=\"btnCollapseSubListConfig.koalaIcon\"\n            [icon]=\"btnCollapseSubListConfig.icon\"\n            [tooltip]=\"btnCollapseSubListConfig.tooltip\"\n            [color]=\"btnCollapseSubListConfig.iconColor\"\n            [backgroundColor]=\"btnCollapseSubListConfig.backgroundColor\"\n            [koalaIconSize]=\"22\">\n          </koala-button>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngFor=\"let itemList of itemsList\" [matColumnDef]=\"itemList.columnDef\">\n        <th *matHeaderCellDef [mat-sort-header]=\"itemList.sortHeader\" [disabled]=\"!itemList.sortHeader\" mat-header-cell>{{itemList.label}}</th>\n        <td (dblclick)=\"itemList.dblClick(item)\" *matCellDef=\"let item\" mat-cell>\n\t        <koala-dynamic-component *ngIf=\"itemList.itemComponent else itemText\"\n\t                                 [dynamicComponent]=\"itemList.itemComponent(item)\"></koala-dynamic-component>\n\t        <ng-template #itemText>\n\t          {{itemList.itemNameProperty(item)}}\n\t        </ng-template>\n        </td>\n        <td *matFooterCellDef mat-footer-cell>\n          <koala-dynamic-component *ngIf=\"itemList.footer?.itemComponent else itemFooterText\"\n                                   [dynamicComponent]=\"itemList.footer?.itemComponent(responseRequest)\"></koala-dynamic-component>\n          <ng-template #itemFooterText>\n            {{itemList.footer?.itemNameProperty(responseRequest)}}\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"koalaListDetails\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" [attr.colspan]=\"columnsToShowInList.length\" mat-cell>\n          <div class=\"item-detail\" [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\">\n            <koala-list [config]=\"subListConfig(item)\"></koala-list>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"options\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <div *ngIf=\"haveOptionsOnItemLine(item)\">\n            <button [matMenuTriggerFor]=\"options\" mat-icon-button type=\"button\">\n              <i class='material-icons'>more_vert</i>\n            </button>\n            <mat-menu #options=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n\t            <div *ngFor=\"let option of itemsMenuListOptions\">\n\t              <button\n\t\t              (click)=\"option.action(item)\"\n\t\t              *ngIf=\"option.havePermission && (\n\t\t                !option.showByItemList ||\n\t\t                option.showByItemList(item)\n\t                )\"\n\t\t              mat-menu-item>\n\t                <mat-icon>{{option.icon}}</mat-icon>\n\t                <span>{{option.name}}</span>\n\t              </button>\n\t            </div>\n            </mat-menu>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <tr *matHeaderRowDef=\"columnsToShowInList; sticky: true\" mat-header-row></tr>\n      <tr *matRowDef=\"let item; columns: columnsToShowInList;\" mat-row></tr>\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\">\n        <tr mat-row *matRowDef=\"let row; columns: ['koalaListDetails']\" class=\"item-detail-row\"></tr>\n      </ng-container>\n      <ng-container *ngIf=\"hasFooter()\">\n        <tr *matFooterRowDef=\"columnsToShowInList; sticky: true\" mat-footer-row></tr>\n      </ng-container>\n    </table>\n    <ng-template #emptyList>\n      <koala-dynamic-component *ngIf=\"!(filterError$ | async) else errorList\" [dynamicComponent]=\"emptyListComponent\"></koala-dynamic-component>\n      <ng-template #errorList>\n        <koala-dynamic-component [dynamicComponent]=\"errorListComponent\"></koala-dynamic-component>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div *ngIf=\"!hidePaginator\" class=\"content-paginator\">\n    <mat-paginator\n      [length]=\"qtdListResult\"\n      [pageSizeOptions]=\"limitOptions\"\n      [pageSize]=\"pageSize\"\n      showFirstLastButtons>\n    </mat-paginator>\n  </div>\n</div>\n", styles: [".list-container{border-radius:10px;margin:0 auto;overflow-x:hidden;width:calc(100% - 40px);position:relative}.list-container .spinner-container{position:absolute;width:100%;height:calc(100vh - 320px);top:100px;left:0;background:rgba(0,0,0,.15);z-index:2;display:flex;align-items:center;justify-content:center}.list-container .spinner-container.no-filter{top:40px}.list-container .list{display:block;height:calc(100vh - 320px);overflow-y:auto;position:relative;top:0;width:100%;z-index:1}.list-container .list table:not(.table-not-selection) .mat-header-cell:first-child,.list-container .list .mat-header-cell:last-child,.list-container .list .mat-header-cell.mat-column-collapseButton{width:5%}.list-container .list .mat-header-cell:last-child{text-align:center}.list-container .list .mat-header-row,.list-container .list .mat-row,.list-container .list .mat-footer-row{height:35px}.list-container .list .mat-row .mat-icon-button{height:35px;line-height:35px;width:35px}.list-container .list tr.detail-row:not(.expanded-row){height:0}.list-container .list .element-detail{display:flex;overflow:hidden}.list-container .list table{position:relative;width:100%;font-family:OpenSans,sans-serif;font-size:1em}.list-container .list table.table-hover tr{cursor:pointer;transition:.2s}.list-container .list table th:first-child,.list-container .list table td:first-child{padding:0 8px 0 20px}.list-container .list table th{font-size:.7em;padding:0 8px;font-family:OpenSans,sans-serif;line-height:1em}.list-container .list table td{font-size:.8em;padding:0 8px;font-family:OpenSans,sans-serif}.list-container .list table th:last-child,.list-container .list table td:last-child{padding:0 20px 0 8px}.list-container .list .mat-list-item-content,.list-container .list .mat-list-item-content .mat-list-text{padding:0}.list-container .list-filter{box-shadow:0 1px 3px #0000004d;height:60px;position:relative;z-index:3}.list-container .list-filter .main{display:flex;justify-content:space-between;font-size:1.05em;height:60px;overflow:hidden;padding-left:2.5px;position:relative;width:100%}.list-container .list-filter .main koala-dynamic-form{width:100%}.list-container .list-filter .main mat-form-field{display:inline-block}.list-container .list-filter .main .mat-form-field-appearance-fill .mat-form-field-flex{background:transparent}.list-container .list-filter .main .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.list-container .list-filter .main .mat-form-field-underline,.list-container .list-filter .main .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper,.list-container .list-filter .main .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter ul{display:flex;align-items:center;font-size:0;list-style:none;margin:0;padding:0 15px 0 0;position:relative;text-align:right}.list-container .list-filter ul li{display:inline-block;font-size:14px;padding:5px;position:relative}.list-container .list-filter ul li.option button{transition:.2s}.list-container .list-filter ul li.option button:hover{background:rgba(0,0,0,.1)}.list-container .list-filter ul li.checkbox-filter{text-align:center}.list-container .list-filter ul li.checkbox-filter .checkbox-inline{top:-5px}.list-container .list-filter ul li.checkbox-filter input[type=checkbox]{margin-left:0}.list-container .list-filter ul li.checkbox-filter label{padding:0!important;width:auto}.list-container .list-filter .advanced{border-top:1px solid #dddddd;box-shadow:0 3px 10px #0000004d;height:0;overflow-x:hidden;overflow-y:auto;position:absolute;top:60px;transition:.2s;width:100%;z-index:1}.list-container .list-filter .advanced .container-filter{padding:15px}.list-container .list-filter .advanced.show{height:360px}.list-container nav.menu-list{height:40px;margin:0;padding:3px 0;position:relative;transition:.2s;width:100%;z-index:2;box-sizing:border-box}.list-container nav.menu-list ul.menu{float:left;font-size:0;list-style:none;margin:0;padding:0 10px;position:relative;text-align:left}.list-container nav.menu-list ul.menu li{color:#616161;display:inline-block;font-size:16px;padding:0 4px}.list-container nav.menu-list ul.menu li button.mat-button,.list-container nav.menu-list ul.menu li button.koala-icon-button{display:inline-block}.list-container .content-paginator mat-paginator .mat-paginator-container{height:40px!important;min-height:40px!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-page-size-select{height:40px;margin-top:0!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-range-label{margin-top:3px}.list-container .content-paginator{position:relative;background:transparent!important;z-index:2;box-shadow:-3px 1px 3px #0000004d}.list-container .item-detail{overflow:hidden}.list-container tr.item-detail-row{height:0!important}.list-container tr.item-detail-row .list-container{width:100%!important}.list-container tr.item-detail-row .list-container .list{height:auto!important;max-height:250px!important}.list-container tr.item-detail-row .list-container nav.menu-list{display:none}@media (max-width: 900px){.list-container{width:100%;box-shadow:none!important;padding:15px 10px 15px 15px;box-sizing:border-box}.list-container .list{height:auto;overflow:unset}.list-container .list-filter .main{justify-content:flex-end}}\n"], components: [{ type: i2.DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { 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.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: i2.BtnSubmitComponent, selector: "koala-submit", inputs: ["fg", "color", "btnLabel", "btnSubmitDisabled", "loader", "iconButton", "icon", "iconColor"] }, { type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i9.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i11.KoalaDynamicComponentFactory, selector: "koala-dynamic-component", inputs: ["dynamicComponent"] }, { type: ListComponent, selector: "koala-list", inputs: ["config"] }, { type: i12.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i8.MatCellDef, selector: "[matCellDef]" }, { type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }], pipes: { "async": i14.AsyncPipe }, animations: [
+ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ListComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.KoalaDynamicFormService }, { token: i3.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ListComponent, selector: "koala-list", inputs: { config: "config" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" [ngClass]=\"customClass\">\n  <div *ngIf=\"filterFormConfig\" class=\"list-filter\">\n    <form (ngSubmit)=\"filterSubmit()\" [formGroup]=\"formFilter\">\n      <div class=\"main\">\n        <koala-dynamic-form\n          *ngIf=\"filterFormConfig.main\"\n          [form]=\"filterFormConfig.main.form\"\n          [formConfig]=\"filterFormConfig.main.formConfig\"\n          [setValues]=\"filterFormConfig.main.setValues\"\n          [showFields]=\"filterFormConfig.main.showFields\">\n        </koala-dynamic-form>\n        <ul>\n          <li *ngIf=\"filterFormConfig.advanced\" class=\"option\">\n            <button (click)=\"toogleFilter()\" color=\"primary\" mat-icon-button matTooltip=\"Filtro Avan\u00E7ado\"\n                    matTooltipPosition=\"below\" type=\"button\">\n              <mat-icon>tune</mat-icon>\n            </button>\n          </li>\n          <li *ngIf=\"filterFormConfig.checkAndSearch\" class=\"checkbox-filter\">\n            <mat-checkbox (click)=\"filterSubmit()\"\n                          [formControlName]=\"filterFormConfig.checkAndSearch.formControlName\">\n              {{filterFormConfig.checkAndSearch.label}}\n            </mat-checkbox>\n          </li>\n          <li class=\"option\">\n            <koala-submit\n              [btnSubmitDisabled]=\"btnSubmitDisabled\"\n              [fg]=\"formFilter\"\n              [iconButton]=\"true\"\n              [loader]=\"loader\"\n              icon=\"search\">\n            </koala-submit>\n          </li>\n        </ul>\n      </div>\n      <div *ngIf=\"filterFormConfig.advanced\" [ngClass]=\"{'show': showAdvancedFilter}\" class=\"advanced\">\n        <div class=\"container-filter\">\n          <koala-dynamic-form\n            [form]=\"filterFormConfig.advanced.form\"\n            [formConfig]=\"filterFormConfig.advanced.formConfig\"\n            [setValues]=\"filterFormConfig.advanced.setValues\"\n            [showFields]=\"filterFormConfig.advanced.showFields\">\n          </koala-dynamic-form>\n        </div>\n      </div>\n    </form>\n  </div>\n  <nav class=\"menu-list\">\n    <ul class=\"menu\">\n      <li *ngIf=\"selection.hasValue()\">\n        <ng-content select=\"[itemsSelectList]\"></ng-content>\n      </li>\n      <li *ngIf=\"selection.hasValue()\" class=\"text-center\">|</li>\n      <li>\n        <ng-content select=\"[itemsList]\"></ng-content>\n      </li>\n    </ul>\n  </nav>\n  <div *ngIf=\"loader | async\" class=\"spinner-container\" [ngClass]=\"{\n    'no-filter': !filterFormConfig\n  }\">\n    <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n  </div>\n  <div class=\"list\">\n    <table\n      *ngIf=\"!emptyListComponent || (emptyListComponent && dataSource?.data?.length > 0) else emptyList\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"columnSort\"\n      [id]=\"tableId\"\n      multiTemplateDataRows\n      class=\"table-hover\"\n      mat-table\n      matSort\n      [matSortDirection]=\"sortDirection\" matSortDisableClear>\n      <ng-container matColumnDef=\"select\">\n        <th *matHeaderCellDef mat-header-cell>\n          <mat-checkbox (change)=\"$event ? selectAll() : null\"\n                        [checked]=\"selection.hasValue() && allSelected$ | async\"\n                        [indeterminate]=\"selection.hasValue() && !(allSelected$ | async)\">\n          </mat-checkbox>\n        </th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <mat-checkbox *ngIf=\"disabledCheckboxItemList ? !disabledCheckboxItemList(item) : true\"\n                        (change)=\"$event ? selection.toggle(item) : null\"\n                        (click)=\"$event.stopPropagation(); selectItem();\"\n                        [checked]=\"selection.isSelected(item)\">\n          </mat-checkbox>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"collapseButton\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <koala-button\n            *ngIf=\"btnCollapseSubListConfig.show(item)\"\n            (click)=\"expandedElement = expandedElement === item ? null : item\"\n            [koalaIcon]=\"btnCollapseSubListConfig.koalaIcon\"\n            [icon]=\"btnCollapseSubListConfig.icon\"\n            [tooltip]=\"btnCollapseSubListConfig.tooltip\"\n            [color]=\"btnCollapseSubListConfig.iconColor\"\n            [backgroundColor]=\"btnCollapseSubListConfig.backgroundColor\"\n            [koalaIconSize]=\"22\">\n          </koala-button>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngFor=\"let itemList of itemsList\" [matColumnDef]=\"itemList.columnDef\">\n        <th *matHeaderCellDef [mat-sort-header]=\"itemList.sortHeader\" [disabled]=\"!itemList.sortHeader\" mat-header-cell>{{itemList.label}}</th>\n        <td (dblclick)=\"itemList.dblClick(item)\" *matCellDef=\"let item\" mat-cell>\n\t        <koala-dynamic-component *ngIf=\"itemList.itemComponent else itemText\"\n\t                                 [dynamicComponent]=\"itemList.itemComponent(item)\"></koala-dynamic-component>\n\t        <ng-template #itemText>\n\t          {{itemList.itemNameProperty(item)}}\n\t        </ng-template>\n        </td>\n        <td *matFooterCellDef mat-footer-cell>\n          <koala-dynamic-component *ngIf=\"itemList.footer?.itemComponent else itemFooterText\"\n                                   [dynamicComponent]=\"itemList.footer?.itemComponent(responseRequest)\"></koala-dynamic-component>\n          <ng-template #itemFooterText>\n            {{itemList.footer?.itemNameProperty(responseRequest)}}\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"koalaListDetails\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" [attr.colspan]=\"columnsToShowInList.length\" mat-cell>\n          <div class=\"item-detail\" [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\">\n            <koala-list [config]=\"subListConfig(item)\"></koala-list>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"options\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <div *ngIf=\"haveOptionsOnItemLine(item)\">\n            <button [matMenuTriggerFor]=\"options\" mat-icon-button type=\"button\">\n              <i class='material-icons'>more_vert</i>\n            </button>\n            <mat-menu #options=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n\t            <div *ngFor=\"let option of itemsMenuListOptions\">\n\t              <button\n\t\t              (click)=\"option.action(item)\"\n\t\t              *ngIf=\"option.havePermission && (\n\t\t                !option.showByItemList ||\n\t\t                option.showByItemList(item)\n\t                )\"\n\t\t              mat-menu-item>\n\t                <mat-icon>{{option.icon}}</mat-icon>\n\t                <span>{{option.name}}</span>\n\t              </button>\n\t            </div>\n            </mat-menu>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <tr *matHeaderRowDef=\"columnsToShowInList; sticky: true\" mat-header-row></tr>\n      <tr *matRowDef=\"let item; columns: columnsToShowInList;\" mat-row></tr>\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\">\n        <tr mat-row *matRowDef=\"let row; columns: ['koalaListDetails']\" class=\"item-detail-row\"></tr>\n      </ng-container>\n      <ng-container *ngIf=\"hasFooter()\">\n        <tr *matFooterRowDef=\"columnsToShowInList; sticky: true\" mat-footer-row></tr>\n      </ng-container>\n    </table>\n    <ng-template #emptyList>\n      <koala-dynamic-component *ngIf=\"!(filterError$ | async) else errorList\" [dynamicComponent]=\"emptyListComponent\"></koala-dynamic-component>\n      <ng-template #errorList>\n        <koala-dynamic-component [dynamicComponent]=\"errorListComponent\"></koala-dynamic-component>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div *ngIf=\"!hidePaginator\" class=\"content-paginator\">\n    <mat-paginator\n      [length]=\"qtdListResult\"\n      [pageSizeOptions]=\"limitOptions\"\n      [pageSize]=\"pageSize\"\n      showFirstLastButtons>\n    </mat-paginator>\n  </div>\n</div>\n", styles: [".list-container{border-radius:10px;margin:0 auto;overflow-x:hidden;width:calc(100% - 40px);position:relative}.list-container .spinner-container{position:absolute;width:100%;height:calc(100vh - 320px);top:100px;left:0;background:rgba(0,0,0,.15);z-index:2;display:flex;align-items:center;justify-content:center}.list-container .spinner-container.no-filter{top:40px}.list-container .list{display:block;height:calc(100vh - 320px);overflow-y:auto;position:relative;top:0;width:100%;z-index:1}.list-container .list table:not(.table-not-selection) .mat-header-cell:first-child,.list-container .list .mat-header-cell:last-child,.list-container .list .mat-header-cell.mat-column-collapseButton{width:5%}.list-container .list .mat-header-cell:last-child{text-align:center}.list-container .list .mat-header-row,.list-container .list .mat-row,.list-container .list .mat-footer-row{height:35px}.list-container .list .mat-row .mat-icon-button{height:35px;line-height:35px;width:35px}.list-container .list tr.detail-row:not(.expanded-row){height:0}.list-container .list .element-detail{display:flex;overflow:hidden}.list-container .list table{position:relative;width:100%;font-family:OpenSans,sans-serif;font-size:1em}.list-container .list table.table-hover tr{cursor:pointer;transition:.2s}.list-container .list table th:first-child,.list-container .list table td:first-child{padding:0 8px 0 20px}.list-container .list table th{font-size:.7em;padding:0 8px;font-family:OpenSans,sans-serif;line-height:1em}.list-container .list table td{font-size:.8em;padding:0 8px;font-family:OpenSans,sans-serif}.list-container .list table th:last-child,.list-container .list table td:last-child{padding:0 20px 0 8px}.list-container .list .mat-list-item-content,.list-container .list .mat-list-item-content .mat-list-text{padding:0}.list-container .list-filter{box-shadow:0 1px 3px #0000004d;height:60px;position:relative;z-index:3}.list-container .list-filter .main{display:flex;justify-content:space-between;font-size:1.05em;height:60px;overflow:hidden;padding-left:2.5px;position:relative;width:100%}.list-container .list-filter .main koala-dynamic-form{width:100%}.list-container .list-filter .main mat-form-field{display:inline-block}.list-container .list-filter .main .mat-form-field-appearance-fill .mat-form-field-flex{background:transparent}.list-container .list-filter .main .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.list-container .list-filter .main .mat-form-field-underline,.list-container .list-filter .main .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper,.list-container .list-filter .main .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter ul{display:flex;align-items:center;font-size:0;list-style:none;margin:0;padding:0 15px 0 0;position:relative;text-align:right}.list-container .list-filter ul li{display:inline-block;font-size:14px;padding:5px;position:relative}.list-container .list-filter ul li.option button{transition:.2s}.list-container .list-filter ul li.option button:hover{background:rgba(0,0,0,.1)}.list-container .list-filter ul li.checkbox-filter{text-align:center}.list-container .list-filter ul li.checkbox-filter .checkbox-inline{top:-5px}.list-container .list-filter ul li.checkbox-filter input[type=checkbox]{margin-left:0}.list-container .list-filter ul li.checkbox-filter label{padding:0!important;width:auto}.list-container .list-filter .advanced{border-top:1px solid #dddddd;box-shadow:0 3px 10px #0000004d;height:0;overflow-x:hidden;overflow-y:auto;position:absolute;top:60px;transition:.2s;width:100%;z-index:1}.list-container .list-filter .advanced .container-filter{padding:15px}.list-container .list-filter .advanced.show{height:360px}.list-container nav.menu-list{height:40px;margin:0;padding:3px 0;position:relative;transition:.2s;width:100%;z-index:2;box-sizing:border-box}.list-container nav.menu-list ul.menu{float:left;font-size:0;list-style:none;margin:0;padding:0 10px;position:relative;text-align:left}.list-container nav.menu-list ul.menu li{color:#616161;display:inline-block;font-size:16px;padding:0 4px}.list-container nav.menu-list ul.menu li button.mat-button,.list-container nav.menu-list ul.menu li button.koala-icon-button{display:inline-block}.list-container .content-paginator mat-paginator .mat-paginator-container{height:40px!important;min-height:40px!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-page-size-select{height:40px;margin-top:0!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-range-label{margin-top:3px}.list-container .content-paginator{position:relative;background:transparent!important;z-index:2;box-shadow:-3px 1px 3px #0000004d}.list-container .item-detail{overflow:hidden}.list-container tr.item-detail-row{height:0!important}.list-container tr.item-detail-row .list-container{width:100%!important}.list-container tr.item-detail-row .list-container .list{height:auto!important;max-height:250px!important}.list-container tr.item-detail-row .list-container nav.menu-list{display:none}@media (max-width: 900px){.list-container{width:100%;box-shadow:none!important;padding:15px 10px 15px 15px;box-sizing:border-box}.list-container .list{height:auto;overflow:visible;overflow:initial}.list-container .list-filter .main{justify-content:flex-end}}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2.BtnSubmitComponent, selector: "koala-submit", inputs: ["fg", "color", "btnLabel", "btnSubmitDisabled", "loader", "iconButton", "icon", "iconColor"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { kind: "component", type: i9.KoalaDynamicComponentFactory, selector: "koala-dynamic-component", inputs: ["dynamicComponent"] }, { kind: "component", type: i10.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i12.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i12.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i14.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ListComponent, selector: "koala-list", inputs: ["config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
         trigger('detailExpand', [
             state('collapsed', style({ height: '0px', minHeight: '0' })),
             state('expanded', style({ height: '*' })),
             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-list', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('detailExpand', [
@@ -501,8 +501,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<div class=\"list-container\" [ngClass]=\"customClass\">\n  <div *ngIf=\"filterFormConfig\" class=\"list-filter\">\n    <form (ngSubmit)=\"filterSubmit()\" [formGroup]=\"formFilter\">\n      <div class=\"main\">\n        <koala-dynamic-form\n          *ngIf=\"filterFormConfig.main\"\n          [form]=\"filterFormConfig.main.form\"\n          [formConfig]=\"filterFormConfig.main.formConfig\"\n          [setValues]=\"filterFormConfig.main.setValues\"\n          [showFields]=\"filterFormConfig.main.showFields\">\n        </koala-dynamic-form>\n        <ul>\n          <li *ngIf=\"filterFormConfig.advanced\" class=\"option\">\n            <button (click)=\"toogleFilter()\" color=\"primary\" mat-icon-button matTooltip=\"Filtro Avan\u00E7ado\"\n                    matTooltipPosition=\"below\" type=\"button\">\n              <mat-icon>tune</mat-icon>\n            </button>\n          </li>\n          <li *ngIf=\"filterFormConfig.checkAndSearch\" class=\"checkbox-filter\">\n            <mat-checkbox (click)=\"filterSubmit()\"\n                          [formControlName]=\"filterFormConfig.checkAndSearch.formControlName\">\n              {{filterFormConfig.checkAndSearch.label}}\n            </mat-checkbox>\n          </li>\n          <li class=\"option\">\n            <koala-submit\n              [btnSubmitDisabled]=\"btnSubmitDisabled\"\n              [fg]=\"formFilter\"\n              [iconButton]=\"true\"\n              [loader]=\"loader\"\n              icon=\"search\">\n            </koala-submit>\n          </li>\n        </ul>\n      </div>\n      <div *ngIf=\"filterFormConfig.advanced\" [ngClass]=\"{'show': showAdvancedFilter}\" class=\"advanced\">\n        <div class=\"container-filter\">\n          <koala-dynamic-form\n            [form]=\"filterFormConfig.advanced.form\"\n            [formConfig]=\"filterFormConfig.advanced.formConfig\"\n            [setValues]=\"filterFormConfig.advanced.setValues\"\n            [showFields]=\"filterFormConfig.advanced.showFields\">\n          </koala-dynamic-form>\n        </div>\n      </div>\n    </form>\n  </div>\n  <nav class=\"menu-list\">\n    <ul class=\"menu\">\n      <li *ngIf=\"selection.hasValue()\">\n        <ng-content select=\"[itemsSelectList]\"></ng-content>\n      </li>\n      <li *ngIf=\"selection.hasValue()\" class=\"text-center\">|</li>\n      <li>\n        <ng-content select=\"[itemsList]\"></ng-content>\n      </li>\n    </ul>\n  </nav>\n  <div *ngIf=\"loader | async\" class=\"spinner-container\" [ngClass]=\"{\n    'no-filter': !filterFormConfig\n  }\">\n    <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n  </div>\n  <div class=\"list\">\n    <table\n      *ngIf=\"!emptyListComponent || (emptyListComponent && dataSource?.data?.length > 0) else emptyList\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"columnSort\"\n      [id]=\"tableId\"\n      multiTemplateDataRows\n      class=\"table-hover\"\n      mat-table\n      matSort\n      [matSortDirection]=\"sortDirection\" matSortDisableClear>\n      <ng-container matColumnDef=\"select\">\n        <th *matHeaderCellDef mat-header-cell>\n          <mat-checkbox (change)=\"$event ? selectAll() : null\"\n                        [checked]=\"selection.hasValue() && allSelected$ | async\"\n                        [indeterminate]=\"selection.hasValue() && !(allSelected$ | async)\">\n          </mat-checkbox>\n        </th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <mat-checkbox *ngIf=\"disabledCheckboxItemList ? !disabledCheckboxItemList(item) : true\"\n                        (change)=\"$event ? selection.toggle(item) : null\"\n                        (click)=\"$event.stopPropagation(); selectItem();\"\n                        [checked]=\"selection.isSelected(item)\">\n          </mat-checkbox>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"collapseButton\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <koala-button\n            *ngIf=\"btnCollapseSubListConfig.show(item)\"\n            (click)=\"expandedElement = expandedElement === item ? null : item\"\n            [koalaIcon]=\"btnCollapseSubListConfig.koalaIcon\"\n            [icon]=\"btnCollapseSubListConfig.icon\"\n            [tooltip]=\"btnCollapseSubListConfig.tooltip\"\n            [color]=\"btnCollapseSubListConfig.iconColor\"\n            [backgroundColor]=\"btnCollapseSubListConfig.backgroundColor\"\n            [koalaIconSize]=\"22\">\n          </koala-button>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngFor=\"let itemList of itemsList\" [matColumnDef]=\"itemList.columnDef\">\n        <th *matHeaderCellDef [mat-sort-header]=\"itemList.sortHeader\" [disabled]=\"!itemList.sortHeader\" mat-header-cell>{{itemList.label}}</th>\n        <td (dblclick)=\"itemList.dblClick(item)\" *matCellDef=\"let item\" mat-cell>\n\t        <koala-dynamic-component *ngIf=\"itemList.itemComponent else itemText\"\n\t                                 [dynamicComponent]=\"itemList.itemComponent(item)\"></koala-dynamic-component>\n\t        <ng-template #itemText>\n\t          {{itemList.itemNameProperty(item)}}\n\t        </ng-template>\n        </td>\n        <td *matFooterCellDef mat-footer-cell>\n          <koala-dynamic-component *ngIf=\"itemList.footer?.itemComponent else itemFooterText\"\n                                   [dynamicComponent]=\"itemList.footer?.itemComponent(responseRequest)\"></koala-dynamic-component>\n          <ng-template #itemFooterText>\n            {{itemList.footer?.itemNameProperty(responseRequest)}}\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"koalaListDetails\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" [attr.colspan]=\"columnsToShowInList.length\" mat-cell>\n          <div class=\"item-detail\" [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\">\n            <koala-list [config]=\"subListConfig(item)\"></koala-list>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"options\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <div *ngIf=\"haveOptionsOnItemLine(item)\">\n            <button [matMenuTriggerFor]=\"options\" mat-icon-button type=\"button\">\n              <i class='material-icons'>more_vert</i>\n            </button>\n            <mat-menu #options=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n\t            <div *ngFor=\"let option of itemsMenuListOptions\">\n\t              <button\n\t\t              (click)=\"option.action(item)\"\n\t\t              *ngIf=\"option.havePermission && (\n\t\t                !option.showByItemList ||\n\t\t                option.showByItemList(item)\n\t                )\"\n\t\t              mat-menu-item>\n\t                <mat-icon>{{option.icon}}</mat-icon>\n\t                <span>{{option.name}}</span>\n\t              </button>\n\t            </div>\n            </mat-menu>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <tr *matHeaderRowDef=\"columnsToShowInList; sticky: true\" mat-header-row></tr>\n      <tr *matRowDef=\"let item; columns: columnsToShowInList;\" mat-row></tr>\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\">\n        <tr mat-row *matRowDef=\"let row; columns: ['koalaListDetails']\" class=\"item-detail-row\"></tr>\n      </ng-container>\n      <ng-container *ngIf=\"hasFooter()\">\n        <tr *matFooterRowDef=\"columnsToShowInList; sticky: true\" mat-footer-row></tr>\n      </ng-container>\n    </table>\n    <ng-template #emptyList>\n      <koala-dynamic-component *ngIf=\"!(filterError$ | async) else errorList\" [dynamicComponent]=\"emptyListComponent\"></koala-dynamic-component>\n      <ng-template #errorList>\n        <koala-dynamic-component [dynamicComponent]=\"errorListComponent\"></koala-dynamic-component>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div *ngIf=\"!hidePaginator\" class=\"content-paginator\">\n    <mat-paginator\n      [length]=\"qtdListResult\"\n      [pageSizeOptions]=\"limitOptions\"\n      [pageSize]=\"pageSize\"\n      showFirstLastButtons>\n    </mat-paginator>\n  </div>\n</div>\n", styles: [".list-container{border-radius:10px;margin:0 auto;overflow-x:hidden;width:calc(100% - 40px);position:relative}.list-container .spinner-container{position:absolute;width:100%;height:calc(100vh - 320px);top:100px;left:0;background:rgba(0,0,0,.15);z-index:2;display:flex;align-items:center;justify-content:center}.list-container .spinner-container.no-filter{top:40px}.list-container .list{display:block;height:calc(100vh - 320px);overflow-y:auto;position:relative;top:0;width:100%;z-index:1}.list-container .list table:not(.table-not-selection) .mat-header-cell:first-child,.list-container .list .mat-header-cell:last-child,.list-container .list .mat-header-cell.mat-column-collapseButton{width:5%}.list-container .list .mat-header-cell:last-child{text-align:center}.list-container .list .mat-header-row,.list-container .list .mat-row,.list-container .list .mat-footer-row{height:35px}.list-container .list .mat-row .mat-icon-button{height:35px;line-height:35px;width:35px}.list-container .list tr.detail-row:not(.expanded-row){height:0}.list-container .list .element-detail{display:flex;overflow:hidden}.list-container .list table{position:relative;width:100%;font-family:OpenSans,sans-serif;font-size:1em}.list-container .list table.table-hover tr{cursor:pointer;transition:.2s}.list-container .list table th:first-child,.list-container .list table td:first-child{padding:0 8px 0 20px}.list-container .list table th{font-size:.7em;padding:0 8px;font-family:OpenSans,sans-serif;line-height:1em}.list-container .list table td{font-size:.8em;padding:0 8px;font-family:OpenSans,sans-serif}.list-container .list table th:last-child,.list-container .list table td:last-child{padding:0 20px 0 8px}.list-container .list .mat-list-item-content,.list-container .list .mat-list-item-content .mat-list-text{padding:0}.list-container .list-filter{box-shadow:0 1px 3px #0000004d;height:60px;position:relative;z-index:3}.list-container .list-filter .main{display:flex;justify-content:space-between;font-size:1.05em;height:60px;overflow:hidden;padding-left:2.5px;position:relative;width:100%}.list-container .list-filter .main koala-dynamic-form{width:100%}.list-container .list-filter .main mat-form-field{display:inline-block}.list-container .list-filter .main .mat-form-field-appearance-fill .mat-form-field-flex{background:transparent}.list-container .list-filter .main .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.list-container .list-filter .main .mat-form-field-underline,.list-container .list-filter .main .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper,.list-container .list-filter .main .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter ul{display:flex;align-items:center;font-size:0;list-style:none;margin:0;padding:0 15px 0 0;position:relative;text-align:right}.list-container .list-filter ul li{display:inline-block;font-size:14px;padding:5px;position:relative}.list-container .list-filter ul li.option button{transition:.2s}.list-container .list-filter ul li.option button:hover{background:rgba(0,0,0,.1)}.list-container .list-filter ul li.checkbox-filter{text-align:center}.list-container .list-filter ul li.checkbox-filter .checkbox-inline{top:-5px}.list-container .list-filter ul li.checkbox-filter input[type=checkbox]{margin-left:0}.list-container .list-filter ul li.checkbox-filter label{padding:0!important;width:auto}.list-container .list-filter .advanced{border-top:1px solid #dddddd;box-shadow:0 3px 10px #0000004d;height:0;overflow-x:hidden;overflow-y:auto;position:absolute;top:60px;transition:.2s;width:100%;z-index:1}.list-container .list-filter .advanced .container-filter{padding:15px}.list-container .list-filter .advanced.show{height:360px}.list-container nav.menu-list{height:40px;margin:0;padding:3px 0;position:relative;transition:.2s;width:100%;z-index:2;box-sizing:border-box}.list-container nav.menu-list ul.menu{float:left;font-size:0;list-style:none;margin:0;padding:0 10px;position:relative;text-align:left}.list-container nav.menu-list ul.menu li{color:#616161;display:inline-block;font-size:16px;padding:0 4px}.list-container nav.menu-list ul.menu li button.mat-button,.list-container nav.menu-list ul.menu li button.koala-icon-button{display:inline-block}.list-container .content-paginator mat-paginator .mat-paginator-container{height:40px!important;min-height:40px!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-page-size-select{height:40px;margin-top:0!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-range-label{margin-top:3px}.list-container .content-paginator{position:relative;background:transparent!important;z-index:2;box-shadow:-3px 1px 3px #0000004d}.list-container .item-detail{overflow:hidden}.list-container tr.item-detail-row{height:0!important}.list-container tr.item-detail-row .list-container{width:100%!important}.list-container tr.item-detail-row .list-container .list{height:auto!important;max-height:250px!important}.list-container tr.item-detail-row .list-container nav.menu-list{display:none}@media (max-width: 900px){.list-container{width:100%;box-shadow:none!important;padding:15px 10px 15px 15px;box-sizing:border-box}.list-container .list{height:auto;overflow:unset}.list-container .list-filter .main{justify-content:flex-end}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.KoalaDynamicFormService }, { type: i3.DeviceDetectorService }]; }, propDecorators: { config: [{
+                    ], template: "<div class=\"list-container\" [ngClass]=\"customClass\">\n  <div *ngIf=\"filterFormConfig\" class=\"list-filter\">\n    <form (ngSubmit)=\"filterSubmit()\" [formGroup]=\"formFilter\">\n      <div class=\"main\">\n        <koala-dynamic-form\n          *ngIf=\"filterFormConfig.main\"\n          [form]=\"filterFormConfig.main.form\"\n          [formConfig]=\"filterFormConfig.main.formConfig\"\n          [setValues]=\"filterFormConfig.main.setValues\"\n          [showFields]=\"filterFormConfig.main.showFields\">\n        </koala-dynamic-form>\n        <ul>\n          <li *ngIf=\"filterFormConfig.advanced\" class=\"option\">\n            <button (click)=\"toogleFilter()\" color=\"primary\" mat-icon-button matTooltip=\"Filtro Avan\u00E7ado\"\n                    matTooltipPosition=\"below\" type=\"button\">\n              <mat-icon>tune</mat-icon>\n            </button>\n          </li>\n          <li *ngIf=\"filterFormConfig.checkAndSearch\" class=\"checkbox-filter\">\n            <mat-checkbox (click)=\"filterSubmit()\"\n                          [formControlName]=\"filterFormConfig.checkAndSearch.formControlName\">\n              {{filterFormConfig.checkAndSearch.label}}\n            </mat-checkbox>\n          </li>\n          <li class=\"option\">\n            <koala-submit\n              [btnSubmitDisabled]=\"btnSubmitDisabled\"\n              [fg]=\"formFilter\"\n              [iconButton]=\"true\"\n              [loader]=\"loader\"\n              icon=\"search\">\n            </koala-submit>\n          </li>\n        </ul>\n      </div>\n      <div *ngIf=\"filterFormConfig.advanced\" [ngClass]=\"{'show': showAdvancedFilter}\" class=\"advanced\">\n        <div class=\"container-filter\">\n          <koala-dynamic-form\n            [form]=\"filterFormConfig.advanced.form\"\n            [formConfig]=\"filterFormConfig.advanced.formConfig\"\n            [setValues]=\"filterFormConfig.advanced.setValues\"\n            [showFields]=\"filterFormConfig.advanced.showFields\">\n          </koala-dynamic-form>\n        </div>\n      </div>\n    </form>\n  </div>\n  <nav class=\"menu-list\">\n    <ul class=\"menu\">\n      <li *ngIf=\"selection.hasValue()\">\n        <ng-content select=\"[itemsSelectList]\"></ng-content>\n      </li>\n      <li *ngIf=\"selection.hasValue()\" class=\"text-center\">|</li>\n      <li>\n        <ng-content select=\"[itemsList]\"></ng-content>\n      </li>\n    </ul>\n  </nav>\n  <div *ngIf=\"loader | async\" class=\"spinner-container\" [ngClass]=\"{\n    'no-filter': !filterFormConfig\n  }\">\n    <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n  </div>\n  <div class=\"list\">\n    <table\n      *ngIf=\"!emptyListComponent || (emptyListComponent && dataSource?.data?.length > 0) else emptyList\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"columnSort\"\n      [id]=\"tableId\"\n      multiTemplateDataRows\n      class=\"table-hover\"\n      mat-table\n      matSort\n      [matSortDirection]=\"sortDirection\" matSortDisableClear>\n      <ng-container matColumnDef=\"select\">\n        <th *matHeaderCellDef mat-header-cell>\n          <mat-checkbox (change)=\"$event ? selectAll() : null\"\n                        [checked]=\"selection.hasValue() && allSelected$ | async\"\n                        [indeterminate]=\"selection.hasValue() && !(allSelected$ | async)\">\n          </mat-checkbox>\n        </th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <mat-checkbox *ngIf=\"disabledCheckboxItemList ? !disabledCheckboxItemList(item) : true\"\n                        (change)=\"$event ? selection.toggle(item) : null\"\n                        (click)=\"$event.stopPropagation(); selectItem();\"\n                        [checked]=\"selection.isSelected(item)\">\n          </mat-checkbox>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"collapseButton\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <koala-button\n            *ngIf=\"btnCollapseSubListConfig.show(item)\"\n            (click)=\"expandedElement = expandedElement === item ? null : item\"\n            [koalaIcon]=\"btnCollapseSubListConfig.koalaIcon\"\n            [icon]=\"btnCollapseSubListConfig.icon\"\n            [tooltip]=\"btnCollapseSubListConfig.tooltip\"\n            [color]=\"btnCollapseSubListConfig.iconColor\"\n            [backgroundColor]=\"btnCollapseSubListConfig.backgroundColor\"\n            [koalaIconSize]=\"22\">\n          </koala-button>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container *ngFor=\"let itemList of itemsList\" [matColumnDef]=\"itemList.columnDef\">\n        <th *matHeaderCellDef [mat-sort-header]=\"itemList.sortHeader\" [disabled]=\"!itemList.sortHeader\" mat-header-cell>{{itemList.label}}</th>\n        <td (dblclick)=\"itemList.dblClick(item)\" *matCellDef=\"let item\" mat-cell>\n\t        <koala-dynamic-component *ngIf=\"itemList.itemComponent else itemText\"\n\t                                 [dynamicComponent]=\"itemList.itemComponent(item)\"></koala-dynamic-component>\n\t        <ng-template #itemText>\n\t          {{itemList.itemNameProperty(item)}}\n\t        </ng-template>\n        </td>\n        <td *matFooterCellDef mat-footer-cell>\n          <koala-dynamic-component *ngIf=\"itemList.footer?.itemComponent else itemFooterText\"\n                                   [dynamicComponent]=\"itemList.footer?.itemComponent(responseRequest)\"></koala-dynamic-component>\n          <ng-template #itemFooterText>\n            {{itemList.footer?.itemNameProperty(responseRequest)}}\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"koalaListDetails\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" [attr.colspan]=\"columnsToShowInList.length\" mat-cell>\n          <div class=\"item-detail\" [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\">\n            <koala-list [config]=\"subListConfig(item)\"></koala-list>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"options\">\n        <th *matHeaderCellDef mat-header-cell></th>\n        <td *matCellDef=\"let item\" mat-cell>\n          <div *ngIf=\"haveOptionsOnItemLine(item)\">\n            <button [matMenuTriggerFor]=\"options\" mat-icon-button type=\"button\">\n              <i class='material-icons'>more_vert</i>\n            </button>\n            <mat-menu #options=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n\t            <div *ngFor=\"let option of itemsMenuListOptions\">\n\t              <button\n\t\t              (click)=\"option.action(item)\"\n\t\t              *ngIf=\"option.havePermission && (\n\t\t                !option.showByItemList ||\n\t\t                option.showByItemList(item)\n\t                )\"\n\t\t              mat-menu-item>\n\t                <mat-icon>{{option.icon}}</mat-icon>\n\t                <span>{{option.name}}</span>\n\t              </button>\n\t            </div>\n            </mat-menu>\n          </div>\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n\n      <tr *matHeaderRowDef=\"columnsToShowInList; sticky: true\" mat-header-row></tr>\n      <tr *matRowDef=\"let item; columns: columnsToShowInList;\" mat-row></tr>\n      <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\">\n        <tr mat-row *matRowDef=\"let row; columns: ['koalaListDetails']\" class=\"item-detail-row\"></tr>\n      </ng-container>\n      <ng-container *ngIf=\"hasFooter()\">\n        <tr *matFooterRowDef=\"columnsToShowInList; sticky: true\" mat-footer-row></tr>\n      </ng-container>\n    </table>\n    <ng-template #emptyList>\n      <koala-dynamic-component *ngIf=\"!(filterError$ | async) else errorList\" [dynamicComponent]=\"emptyListComponent\"></koala-dynamic-component>\n      <ng-template #errorList>\n        <koala-dynamic-component [dynamicComponent]=\"errorListComponent\"></koala-dynamic-component>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div *ngIf=\"!hidePaginator\" class=\"content-paginator\">\n    <mat-paginator\n      [length]=\"qtdListResult\"\n      [pageSizeOptions]=\"limitOptions\"\n      [pageSize]=\"pageSize\"\n      showFirstLastButtons>\n    </mat-paginator>\n  </div>\n</div>\n", styles: [".list-container{border-radius:10px;margin:0 auto;overflow-x:hidden;width:calc(100% - 40px);position:relative}.list-container .spinner-container{position:absolute;width:100%;height:calc(100vh - 320px);top:100px;left:0;background:rgba(0,0,0,.15);z-index:2;display:flex;align-items:center;justify-content:center}.list-container .spinner-container.no-filter{top:40px}.list-container .list{display:block;height:calc(100vh - 320px);overflow-y:auto;position:relative;top:0;width:100%;z-index:1}.list-container .list table:not(.table-not-selection) .mat-header-cell:first-child,.list-container .list .mat-header-cell:last-child,.list-container .list .mat-header-cell.mat-column-collapseButton{width:5%}.list-container .list .mat-header-cell:last-child{text-align:center}.list-container .list .mat-header-row,.list-container .list .mat-row,.list-container .list .mat-footer-row{height:35px}.list-container .list .mat-row .mat-icon-button{height:35px;line-height:35px;width:35px}.list-container .list tr.detail-row:not(.expanded-row){height:0}.list-container .list .element-detail{display:flex;overflow:hidden}.list-container .list table{position:relative;width:100%;font-family:OpenSans,sans-serif;font-size:1em}.list-container .list table.table-hover tr{cursor:pointer;transition:.2s}.list-container .list table th:first-child,.list-container .list table td:first-child{padding:0 8px 0 20px}.list-container .list table th{font-size:.7em;padding:0 8px;font-family:OpenSans,sans-serif;line-height:1em}.list-container .list table td{font-size:.8em;padding:0 8px;font-family:OpenSans,sans-serif}.list-container .list table th:last-child,.list-container .list table td:last-child{padding:0 20px 0 8px}.list-container .list .mat-list-item-content,.list-container .list .mat-list-item-content .mat-list-text{padding:0}.list-container .list-filter{box-shadow:0 1px 3px #0000004d;height:60px;position:relative;z-index:3}.list-container .list-filter .main{display:flex;justify-content:space-between;font-size:1.05em;height:60px;overflow:hidden;padding-left:2.5px;position:relative;width:100%}.list-container .list-filter .main koala-dynamic-form{width:100%}.list-container .list-filter .main mat-form-field{display:inline-block}.list-container .list-filter .main .mat-form-field-appearance-fill .mat-form-field-flex{background:transparent}.list-container .list-filter .main .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.list-container .list-filter .main .mat-form-field-underline,.list-container .list-filter .main .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper,.list-container .list-filter .main .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter ul{display:flex;align-items:center;font-size:0;list-style:none;margin:0;padding:0 15px 0 0;position:relative;text-align:right}.list-container .list-filter ul li{display:inline-block;font-size:14px;padding:5px;position:relative}.list-container .list-filter ul li.option button{transition:.2s}.list-container .list-filter ul li.option button:hover{background:rgba(0,0,0,.1)}.list-container .list-filter ul li.checkbox-filter{text-align:center}.list-container .list-filter ul li.checkbox-filter .checkbox-inline{top:-5px}.list-container .list-filter ul li.checkbox-filter input[type=checkbox]{margin-left:0}.list-container .list-filter ul li.checkbox-filter label{padding:0!important;width:auto}.list-container .list-filter .advanced{border-top:1px solid #dddddd;box-shadow:0 3px 10px #0000004d;height:0;overflow-x:hidden;overflow-y:auto;position:absolute;top:60px;transition:.2s;width:100%;z-index:1}.list-container .list-filter .advanced .container-filter{padding:15px}.list-container .list-filter .advanced.show{height:360px}.list-container nav.menu-list{height:40px;margin:0;padding:3px 0;position:relative;transition:.2s;width:100%;z-index:2;box-sizing:border-box}.list-container nav.menu-list ul.menu{float:left;font-size:0;list-style:none;margin:0;padding:0 10px;position:relative;text-align:left}.list-container nav.menu-list ul.menu li{color:#616161;display:inline-block;font-size:16px;padding:0 4px}.list-container nav.menu-list ul.menu li button.mat-button,.list-container nav.menu-list ul.menu li button.koala-icon-button{display:inline-block}.list-container .content-paginator mat-paginator .mat-paginator-container{height:40px!important;min-height:40px!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-page-size-select{height:40px;margin-top:0!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-range-label{margin-top:3px}.list-container .content-paginator{position:relative;background:transparent!important;z-index:2;box-shadow:-3px 1px 3px #0000004d}.list-container .item-detail{overflow:hidden}.list-container tr.item-detail-row{height:0!important}.list-container tr.item-detail-row .list-container{width:100%!important}.list-container tr.item-detail-row .list-container .list{height:auto!important;max-height:250px!important}.list-container tr.item-detail-row .list-container nav.menu-list{display:none}@media (max-width: 900px){.list-container{width:100%;box-shadow:none!important;padding:15px 10px 15px 15px;box-sizing:border-box}.list-container .list{height:auto;overflow:visible;overflow:initial}.list-container .list-filter .main{justify-content:flex-end}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: i2.KoalaDynamicFormService }, { type: i3.DeviceDetectorService }]; }, propDecorators: { config: [{
                 type: Input
             }], paginator: [{
                 type: ViewChild,
@@ -514,8 +514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
 class KoalaListModule {
 }
-KoalaListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KoalaListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KoalaListModule, declarations: [ListComponent], imports: [CommonModule,
+KoalaListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: KoalaListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: KoalaListModule, declarations: [ListComponent], imports: [CommonModule,
         KoalaFolderPageModule,
         KoalaFormModule,
         KoalaDynamicComponentModule,
@@ -525,22 +525,20 @@ KoalaListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         MatSortModule,
         MatTooltipModule,
         MatPaginatorModule], exports: [ListComponent] });
-KoalaListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KoalaListModule, providers: [{
+KoalaListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: KoalaListModule, providers: [{
             provide: MatPaginatorIntl,
             useClass: PaginationProvider
-        }], imports: [[
-            CommonModule,
-            KoalaFolderPageModule,
-            KoalaFormModule,
-            KoalaDynamicComponentModule,
-            KoalaButtonModule,
-            MatMenuModule,
-            MatTableModule,
-            MatSortModule,
-            MatTooltipModule,
-            MatPaginatorModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KoalaListModule, decorators: [{
+        }], imports: [CommonModule,
+        KoalaFolderPageModule,
+        KoalaFormModule,
+        KoalaDynamicComponentModule,
+        KoalaButtonModule,
+        MatMenuModule,
+        MatTableModule,
+        MatSortModule,
+        MatTooltipModule,
+        MatPaginatorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: KoalaListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [