@rubeusteam/rb-angular-components 0.0.1-9.1 → 0.0.1-dev.0

package/fesm2022/rubeusteam-rb-angular-components.mjs

@@ -1,30 +1,31 @@
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, signal, EventEmitter, effect, Component, Input, Output, ViewChild, Directive, inject } from '@angular/core';
-import * as i2 from '@angular/material/table';
+import { Pipe, Injectable, signal, inject, EventEmitter, effect, Component, Input, Output, ViewChild, Directive } from '@angular/core';
+import * as i3 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i5$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/material/paginator';
+import * as i5 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i5 from '@angular/material/sort';
+import * as i6 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i3$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/material/menu';
+import * as i4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4$1 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$2 from '@angular/material/form-field';
+import * as i1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i1 from '@angular/material/dialog';
+import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
-import * as i1$1 from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import * as i1$2 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { Validators, ReactiveFormsModule } from '@angular/forms';
+import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 
 class RbCustomPipe {
     transform(value, type) {
@@ -164,6 +165,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
+class RbConditionalClassPipe {
+    transform(cellValue, columnKey, rules) {
+        const config = rules.find(r => r.key === columnKey);
+        if (!config || !Array.isArray(config.conditions))
+            return '';
+        return config.conditions
+            .filter(condition => this.evaluateCondition(cellValue, condition))
+            .map(condition => condition.class)
+            .join(' ');
+    }
+    evaluateCondition(value, condition) {
+        const { operator, value: expected } = condition;
+        switch (operator) {
+            case '==': return value == expected;
+            case '===': return value === expected;
+            case '!=': return value != expected;
+            case '!==': return value !== expected;
+            case '<': return value < expected;
+            case '>': return value > expected;
+            case '<=': return value <= expected;
+            case '>=': return value >= expected;
+            default:
+                console.warn(`Operador '${operator}' não suportado.`);
+                return false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, isStandalone: true, name: "rbConditionalClass" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rbConditionalClass',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
 class PaginatorPtbrIntlService extends MatPaginatorIntl {
     itemsPerPageLabel = 'Itens por página:';
     nextPageLabel = 'Próxima';
@@ -171,12 +210,12 @@ class PaginatorPtbrIntlService extends MatPaginatorIntl {
     firstPageLabel = 'Primeira página';
     lastPageLabel = 'Última página';
     getRangeLabel = (page, pageSize, length) => {
-        if (length === 0) {
-            return `Página 0 de ${length}`;
+        if (length === 0 || pageSize === 0) {
+            return `Página 0 de 0`;
         }
-        const start = page + 1;
-        const totalPages = ((length / pageSize) + (length % pageSize > 0 ? 1 : 0)).toFixed(0);
-        return `Página ${start} de ${totalPages}`;
+        const totalPages = Math.ceil(length / pageSize);
+        const currentPage = page + 1;
+        return `Página ${currentPage} de ${totalPages}`;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, providedIn: 'root' });
@@ -213,41 +252,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
+function resolveActionsForRow(row, actionsMenu) {
+    const resolvedActions = actionsMenu.map(action => {
+        const match = action.conditionalSettings?.find(s => row[s.key] === s.expectedValue);
+        return {
+            ...action,
+            label: match?.label ?? action.label,
+            icon: match?.icon ?? action.icon,
+            disabled: match?.disabled ?? action.disabled,
+            visible: match?.visible ?? action.visible
+        };
+    });
+    return {
+        ...row,
+        resolvedActions
+    };
+}
+function resolveActionsForData(data, actionsMenu) {
+    return data.map(row => resolveActionsForRow(row, actionsMenu));
+}
+
+class RbShowIndexCrudService {
+    showIndex = signal(false);
+    setShowIndex(value) {
+        this.showIndex.set(value);
+    }
+    toggle() {
+        this.showIndex.update(value => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class RbCrudComponent {
     clientFilterService;
+    renderer;
     columns = [];
     data = [];
     actionsMenu = [];
+    conditionalClasses = [];
     pagination = true;
     pageSize = 10;
     infiniteScroll = false;
     textLineBreakable = false;
+    emptyMessageTherm = '';
+    emptyMessageSentence = 'um novo cadastro';
+    emptyLinkAction = '';
+    showIndexService = inject(RbShowIndexCrudService);
+    showIndex = this.showIndexService.showIndex;
     actionClick = new EventEmitter();
     // @Output() filterChange = new EventEmitter<any>();
     pageChange = new EventEmitter();
     paginator;
     sort;
+    rbTableContainer;
     displayedColumns = [];
-    dataSource = new MatTableDataSource(this.data);
+    dataSource;
     filterText;
-    constructor(clientFilterService) {
+    isOverflowing = false;
+    displayedActionsMenu = [];
+    selectedRow = null;
+    renderingProgressive = false;
+    THRESHOLD = 200;
+    searchTherm = '';
+    constructor(clientFilterService, renderer) {
         this.clientFilterService = clientFilterService;
+        this.renderer = renderer;
+        console.time('constructor');
+        this.dataSource = new MatTableDataSource(this.data);
         this.filterText = this.clientFilterService.getSearchText();
         effect(() => {
             this.applyFilter();
+            console.log('???? Constructor RB-CRUD effect', Date());
         });
+        console.log('-->>> Constructor RB-CRUD finish', Date());
     }
     ngAfterViewInit() {
+        console.timeEnd('onchanges');
+        // console.timeEnd('render');
+        console.log('===== After View', Date());
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
         this.defineSortRule();
+        this.checkOverflow();
+        window.addEventListener('resize', () => this.checkOverflow());
+    }
+    checkOverflow() {
+        const el = this.rbTableContainer.nativeElement;
+        const isOverflowing = el.scrollWidth > el.clientWidth;
+        this.isOverflowing = isOverflowing;
+        if (isOverflowing) {
+            this.renderer.addClass(el, 'is-overflowing');
+        }
+        else {
+            this.renderer.removeClass(el, 'is-overflowing');
+        }
+    }
+    resolvePropertyValue(fn, row, defaultValue = true) {
+        if (fn === undefined) {
+            return defaultValue;
+        }
+        if (typeof fn === 'function') {
+            return fn(row);
+        }
+        return fn;
     }
     ngOnChanges() {
-        this.dataSource.data = this.data;
+        console.time('onchanges');
+        console.timeEnd('constructor');
         this.displayedColumns = this.columns.map(col => col.key);
         if (this.actionsMenu.length) {
             this.displayedColumns.push('actions');
         }
+        // this.dataSource = new MatTableDataSource(this.data);
+        this.dataSource.data = this.data;
+        if (this.paginator) {
+            this.dataSource.paginator = this.paginator;
+        }
+        if (this.sort) {
+            this.dataSource.sort = this.sort;
+        }
+    }
+    renderFirstPage(processedData) {
+        const firstPage = processedData.slice(0, this.pageSize);
+        this.dataSource.data = firstPage;
+    }
+    loadFullData(processedData) {
+        this.dataSource.data = processedData;
+        this.renderingProgressive = false;
     }
     defineSortRule() {
         this.dataSource.sortingDataAccessor = (item, property) => {
@@ -263,9 +401,9 @@ class RbCrudComponent {
     onClickCell(action, row) {
         this.actionClick.emit({ action: action, row });
     }
-    // applyFilter() {
-    //   this.dataSource.filter = this.filterText().trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-    // }
+    onClickLink() {
+        this.actionClick.emit({ action: this.emptyLinkAction });
+    }
     applyFilter() {
         this.dataSource.filterPredicate = (data, filter) => {
             const accumulator = (currentTerm, key) => {
@@ -273,14 +411,23 @@ class RbCrudComponent {
                 return currentTerm + ' ' + (typeof value === 'string' ? this.clientFilterService.normalizeText(value) : '');
             };
             const dataStr = Object.keys(data).reduce(accumulator, '').trim();
+            this.searchTherm = filter;
             return dataStr.includes(this.clientFilterService.normalizeText(filter));
         };
         this.dataSource.filter = this.filterText();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, deps: [{ token: ClientFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudComponent, isStandalone: true, selector: "rb-crud", inputs: { columns: "columns", data: "data", actionsMenu: "actionsMenu", pagination: "pagination", pageSize: "pageSize", infiniteScroll: "infiniteScroll", textLineBreakable: "textLineBreakable" }, outputs: { actionClick: "actionClick", pageChange: "pageChange" }, providers: [
-            { provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
-        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-crud-container\">\n  <div class=\"rb-table-container\">\n    <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n      <!-- Colunas Din\u00E2micas -->\n      @for (column of columns; track column.key) {\n        <ng-container [matColumnDef]=\"column.key\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header>\n            {{ column.label }}\n          </th>\n          <td mat-cell *matCellDef=\"let row\"\n          [class.rb-clickable-cell]=\"column.action\"\n          [class.rb-break-line-cell]=\"textLineBreakable\"\n          (click)=\"column.action ? onClickCell(column.action, row) : null\"\n          title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\">\n            @if (column.pipe) {\n              {{ row[column.key] | rbCustomPipe:column.pipe }}\n            } @else {\n              {{ row[column.key] }}\n            }\n          </td>\n        </ng-container>\n      }\n\n      <!-- Coluna de A\u00E7\u00F5es -->\n      @if (actionsMenu.length) {\n        <ng-container matColumnDef=\"actions\" stickyEnd>\n          <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"rb-crud-actions-col\">\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>{{ 'more_vert' }}</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\" panelClass=\"rb-menu-crud\">\n              @for (action of actionsMenu; track action.label) {\n                <button mat-menu-item\n                (click)=\"onActionClick(action, row)\"\n                title=\"{{action.label}}\"\n                class=\"{{action.color}}\"\n                [attr.aria-label]=\"action.label\">\n                  @if (action.icon) {\n                    <mat-icon>{{ action.icon }}</mat-icon>\n                  }\n                  {{ action.label }}\n                </button>\n              }\n            </mat-menu>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Cabe\u00E7alho e Corpo da Tabela -->\n      <thead>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      </thead>\n      <tbody>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </tbody>\n    </table>\n  </div>\n\n  @if (dataSource.data.length === 0) {\n    <div class=\"empty-message\">\n      Nenhum dado dispon\u00EDvel no momento.\n    </div>\n  }\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n@if (pagination) {\n  <mat-paginator #paginator\n    class=\"rb-paginator\"\n    [pageSize]=\"pageSize\"\n    (page)=\"pageChange.emit($event.pageIndex)\"\n    [showFirstLastButtons]=\"true\"\n    [pageSizeOptions]=\"[10,25,50,100]\"\n    aria-label=\"Selecione a p\u00E1gina\">\n  </mat-paginator>\n}\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226)}.rb-crud-container tr{transition:background-color .3s ease-in-out}.rb-crud-container tr:hover{background-color:color-mix(in srgb,var(--mat-sys-primary) 5%,transparent)}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}td.rb-clickable-cell{cursor:pointer}td.rb-clickable-cell:hover{text-decoration:underline}td.rb-crud-actions-col{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: RbCustomPipe, name: "rbCustomPipe" }] });
+    openMenu(row) {
+        this.selectedRow = row;
+        this.displayedActionsMenu = resolveActionsForRow(row, this.actionsMenu).resolvedActions;
+    }
+    setSearchText(text) {
+        this.clientFilterService.setSearchText(text);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, deps: [{ token: ClientFilterService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudComponent, isStandalone: true, selector: "rb-crud", inputs: { columns: "columns", data: "data", actionsMenu: "actionsMenu", conditionalClasses: "conditionalClasses", pagination: "pagination", pageSize: "pageSize", infiniteScroll: "infiniteScroll", textLineBreakable: "textLineBreakable", emptyMessageTherm: "emptyMessageTherm", emptyMessageSentence: "emptyMessageSentence", emptyLinkAction: "emptyLinkAction" }, outputs: { actionClick: "actionClick", pageChange: "pageChange" }, providers: [
+            { provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService },
+            ClientFilterService
+        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rbTableContainer", first: true, predicate: ["rbTableContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-crud-container\">\n  <!-- @if (dataSource?.filteredData?.length) { -->\n    <div #rbTableContainer class=\"rb-table-container\"\n    [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\">\n      <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n        <!-- Colunas Din\u00E2micas -->\n        @for (column of columns; track column.key; let i = $index) {\n          <ng-container [matColumnDef]=\"column.key\">\n            @if(column.sortable === false) {\n              <th mat-header-cell *matHeaderCellDef>\n                {{ column.label }}\n              </th>\n            } @else {\n              <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{ column.label }}\n              </th>\n            }\n            <td mat-cell *matCellDef=\"let row; let il = index\"\n            [class.rb-clickable-cell]=\"column.action\"\n            [class.rb-break-line-cell]=\"textLineBreakable\"\n            (click)=\"column.action ? onClickCell(column.action, row) : null\"\n            title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\"\n            [class]=\"row[column.conditionalClassKey || column.key] | rbConditionalClass:(column.conditionalClassKey || column.key):conditionalClasses\"\n            >\n              <!-- Terminar de implementar quando for decidido como ficar\u00E1 quando a informa\u00E7\u00E3o for em array de objetos.\n              N\u00E3o deixar como primeira condi\u00E7\u00E3o, para evitar processamento desnecess\u00E1rio no pipe isArray\n              @if (column.objCol?.label && (row[column.key] | isArray) && row[column.key].length){\n                @for (item of row[column.key]; track $index) {\n                  <span>{{ item[column.objCol?.label || 'label']  }}</span>\n                }\n              } @else if  -->\n              @if(i===0 && showIndex()) {\n                <span class=\"rb-crud-float-index\">{{il+1}}</span>\n              }\n              @if (column.pipe) {\n                {{ row[column.key] | rbCustomPipe:column.pipe }}\n              } @else {\n                {{ row[column.key] }}\n              }\n            </td>\n          </ng-container>\n        }\n\n        <!-- Coluna de A\u00E7\u00F5es -->\n        @if (actionsMenu.length) {\n          <ng-container matColumnDef=\"actions\" stickyEnd class=\"sticky-column\">\n            <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n            <td mat-cell *matCellDef=\"let row; let il = index\" class=\"rb-crud-actions-col\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"actionsMenuRef\"\n                (menuOpened)=\"openMenu(row)\">\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </td>\n          </ng-container>\n        }\n\n\n        <!-- Cabe\u00E7alho e Corpo da Tabela -->\n        <thead>\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        </thead>\n        <tbody>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </tbody>\n      </table>\n\n       <!-- Menu de A\u00E7\u00F5es -->\n      <mat-menu #actionsMenuRef=\"matMenu\" class=\"rb-menu-crud\">\n        @for (action of displayedActionsMenu; track action.label) {\n          @if (resolvePropertyValue(action.visible, selectedRow)) {\n            @if (action.hasDivider) {\n              <hr>\n            }\n\n            <button\n              mat-menu-item\n              (click)=\"onActionClick(action, selectedRow)\"\n              [title]=\"action.label\"\n              [attr.aria-label]=\"action.label\"\n              [attr.color]=\"action.color\"\n              [disabled]=\"resolvePropertyValue(action.disabled, selectedRow, false)\"\n              [ngClass]=\"action.class\">\n\n              @if (action.icon) {\n                <mat-icon>{{ action.icon }}</mat-icon>\n              }\n\n              {{ action.label }}\n\n            </button>\n          }\n      }\n      </mat-menu>\n\n    </div>\n  <!-- } -->\n\n  <!-- @if (!dataSource?.filteredData?.length) { -->\n    <div class=\"empty-message\" [style.display]=\"dataSource?.filteredData?.length ? 'none' : 'block'\">\n      <h2>Nenhum registro {{emptyMessageTherm ? 'de ' + emptyMessageTherm : ''}} encontrado\n        @if(searchTherm.length) {\n          para o termo \"{{searchTherm}}\"\n        }\n      </h2>\n      <p>Experimente <span (click)=\"onClickLink()\">adicionar {{emptyMessageSentence}}</span>.</p>\n    </div>\n  <!-- } -->\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n<!-- @if (pagination && dataSource?.filteredData?.length) { -->\n  <mat-paginator #paginator\n    [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\"\n    class=\"rb-paginator\"\n    [pageSize]=\"pageSize\"\n    (page)=\"pageChange.emit($event)\"\n    [showFirstLastButtons]=\"true\"\n    [pageSizeOptions]=\"[10,25,50,100]\"\n    aria-label=\"Selecione a p\u00E1gina\">\n  </mat-paginator>\n<!-- } -->\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226);position:relative}.rb-crud-container td.rb-clickable-cell{cursor:pointer}.rb-crud-container td.rb-clickable-cell:hover{text-decoration:underline}.rb-crud-container td.rb-crud-actions-col{background-color:#fff}.rb-crud-container tr,.rb-crud-container tr td.rb-crud-actions-col{transition:background-color .3s ease-in-out}.rb-crud-container tr:not(.mat-mdc-header-row):hover{background-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 5%,transparent)}.rb-crud-container tr:not(.mat-mdc-header-row):hover td.rb-crud-actions-col{background-color:#e6efef}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.rb-crud-container th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{background:#fff}.rb-crud-container span.rb-crud-float-index{position:absolute;top:2px;left:2px;color:var(--mdc-protected-button-label-text-color, var(--mat-sys-primary));background-color:var(--mdc-protected-button-container-color, var(--mat-sys-surface));border-radius:3px;padding:0 3px;box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f}.rb-table-container.is-overflowing th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right,.rb-table-container.is-overflowing td.mat-mdc-cell.mdc-data-table__cell.cdk-cell.rb-crud-actions-col.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{box-shadow:-1px 0 3px -1px #0000001a}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}.empty-message h2{font-family:Roboto;font-weight:500;font-style:Medium;font-size:16px;line-height:23.4px;letter-spacing:0%;text-align:center}.empty-message p{font-family:Roboto;font-weight:400;font-style:Regular;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span{color:var(--mat-sys-primary, #006a6a);font-family:Roboto;font-weight:700;font-style:Bold;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span:hover{text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: RbCustomPipe, name: "rbCustomPipe" }, { kind: "pipe", type: RbConditionalClassPipe, name: "rbConditionalClass" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, decorators: [{
             type: Component,
@@ -294,15 +441,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         MatIconModule,
                         MatButtonModule,
                         RbCustomPipe,
+                        RbConditionalClassPipe,
                     ], providers: [
-                        { provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
-                    ], template: "<div class=\"rb-crud-container\">\n  <div class=\"rb-table-container\">\n    <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n      <!-- Colunas Din\u00E2micas -->\n      @for (column of columns; track column.key) {\n        <ng-container [matColumnDef]=\"column.key\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header>\n            {{ column.label }}\n          </th>\n          <td mat-cell *matCellDef=\"let row\"\n          [class.rb-clickable-cell]=\"column.action\"\n          [class.rb-break-line-cell]=\"textLineBreakable\"\n          (click)=\"column.action ? onClickCell(column.action, row) : null\"\n          title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\">\n            @if (column.pipe) {\n              {{ row[column.key] | rbCustomPipe:column.pipe }}\n            } @else {\n              {{ row[column.key] }}\n            }\n          </td>\n        </ng-container>\n      }\n\n      <!-- Coluna de A\u00E7\u00F5es -->\n      @if (actionsMenu.length) {\n        <ng-container matColumnDef=\"actions\" stickyEnd>\n          <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"rb-crud-actions-col\">\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>{{ 'more_vert' }}</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\" panelClass=\"rb-menu-crud\">\n              @for (action of actionsMenu; track action.label) {\n                <button mat-menu-item\n                (click)=\"onActionClick(action, row)\"\n                title=\"{{action.label}}\"\n                class=\"{{action.color}}\"\n                [attr.aria-label]=\"action.label\">\n                  @if (action.icon) {\n                    <mat-icon>{{ action.icon }}</mat-icon>\n                  }\n                  {{ action.label }}\n                </button>\n              }\n            </mat-menu>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Cabe\u00E7alho e Corpo da Tabela -->\n      <thead>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      </thead>\n      <tbody>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </tbody>\n    </table>\n  </div>\n\n  @if (dataSource.data.length === 0) {\n    <div class=\"empty-message\">\n      Nenhum dado dispon\u00EDvel no momento.\n    </div>\n  }\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n@if (pagination) {\n  <mat-paginator #paginator\n    class=\"rb-paginator\"\n    [pageSize]=\"pageSize\"\n    (page)=\"pageChange.emit($event.pageIndex)\"\n    [showFirstLastButtons]=\"true\"\n    [pageSizeOptions]=\"[10,25,50,100]\"\n    aria-label=\"Selecione a p\u00E1gina\">\n  </mat-paginator>\n}\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226)}.rb-crud-container tr{transition:background-color .3s ease-in-out}.rb-crud-container tr:hover{background-color:color-mix(in srgb,var(--mat-sys-primary) 5%,transparent)}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}td.rb-clickable-cell{cursor:pointer}td.rb-clickable-cell:hover{text-decoration:underline}td.rb-crud-actions-col{background-color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: ClientFilterService }], propDecorators: { columns: [{
+                        { provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService },
+                        ClientFilterService
+                    ], template: "<div class=\"rb-crud-container\">\n  <!-- @if (dataSource?.filteredData?.length) { -->\n    <div #rbTableContainer class=\"rb-table-container\"\n    [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\">\n      <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n        <!-- Colunas Din\u00E2micas -->\n        @for (column of columns; track column.key; let i = $index) {\n          <ng-container [matColumnDef]=\"column.key\">\n            @if(column.sortable === false) {\n              <th mat-header-cell *matHeaderCellDef>\n                {{ column.label }}\n              </th>\n            } @else {\n              <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{ column.label }}\n              </th>\n            }\n            <td mat-cell *matCellDef=\"let row; let il = index\"\n            [class.rb-clickable-cell]=\"column.action\"\n            [class.rb-break-line-cell]=\"textLineBreakable\"\n            (click)=\"column.action ? onClickCell(column.action, row) : null\"\n            title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\"\n            [class]=\"row[column.conditionalClassKey || column.key] | rbConditionalClass:(column.conditionalClassKey || column.key):conditionalClasses\"\n            >\n              <!-- Terminar de implementar quando for decidido como ficar\u00E1 quando a informa\u00E7\u00E3o for em array de objetos.\n              N\u00E3o deixar como primeira condi\u00E7\u00E3o, para evitar processamento desnecess\u00E1rio no pipe isArray\n              @if (column.objCol?.label && (row[column.key] | isArray) && row[column.key].length){\n                @for (item of row[column.key]; track $index) {\n                  <span>{{ item[column.objCol?.label || 'label']  }}</span>\n                }\n              } @else if  -->\n              @if(i===0 && showIndex()) {\n                <span class=\"rb-crud-float-index\">{{il+1}}</span>\n              }\n              @if (column.pipe) {\n                {{ row[column.key] | rbCustomPipe:column.pipe }}\n              } @else {\n                {{ row[column.key] }}\n              }\n            </td>\n          </ng-container>\n        }\n\n        <!-- Coluna de A\u00E7\u00F5es -->\n        @if (actionsMenu.length) {\n          <ng-container matColumnDef=\"actions\" stickyEnd class=\"sticky-column\">\n            <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n            <td mat-cell *matCellDef=\"let row; let il = index\" class=\"rb-crud-actions-col\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"actionsMenuRef\"\n                (menuOpened)=\"openMenu(row)\">\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </td>\n          </ng-container>\n        }\n\n\n        <!-- Cabe\u00E7alho e Corpo da Tabela -->\n        <thead>\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        </thead>\n        <tbody>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </tbody>\n      </table>\n\n       <!-- Menu de A\u00E7\u00F5es -->\n      <mat-menu #actionsMenuRef=\"matMenu\" class=\"rb-menu-crud\">\n        @for (action of displayedActionsMenu; track action.label) {\n          @if (resolvePropertyValue(action.visible, selectedRow)) {\n            @if (action.hasDivider) {\n              <hr>\n            }\n\n            <button\n              mat-menu-item\n              (click)=\"onActionClick(action, selectedRow)\"\n              [title]=\"action.label\"\n              [attr.aria-label]=\"action.label\"\n              [attr.color]=\"action.color\"\n              [disabled]=\"resolvePropertyValue(action.disabled, selectedRow, false)\"\n              [ngClass]=\"action.class\">\n\n              @if (action.icon) {\n                <mat-icon>{{ action.icon }}</mat-icon>\n              }\n\n              {{ action.label }}\n\n            </button>\n          }\n      }\n      </mat-menu>\n\n    </div>\n  <!-- } -->\n\n  <!-- @if (!dataSource?.filteredData?.length) { -->\n    <div class=\"empty-message\" [style.display]=\"dataSource?.filteredData?.length ? 'none' : 'block'\">\n      <h2>Nenhum registro {{emptyMessageTherm ? 'de ' + emptyMessageTherm : ''}} encontrado\n        @if(searchTherm.length) {\n          para o termo \"{{searchTherm}}\"\n        }\n      </h2>\n      <p>Experimente <span (click)=\"onClickLink()\">adicionar {{emptyMessageSentence}}</span>.</p>\n    </div>\n  <!-- } -->\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n<!-- @if (pagination && dataSource?.filteredData?.length) { -->\n  <mat-paginator #paginator\n    [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\"\n    class=\"rb-paginator\"\n    [pageSize]=\"pageSize\"\n    (page)=\"pageChange.emit($event)\"\n    [showFirstLastButtons]=\"true\"\n    [pageSizeOptions]=\"[10,25,50,100]\"\n    aria-label=\"Selecione a p\u00E1gina\">\n  </mat-paginator>\n<!-- } -->\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226);position:relative}.rb-crud-container td.rb-clickable-cell{cursor:pointer}.rb-crud-container td.rb-clickable-cell:hover{text-decoration:underline}.rb-crud-container td.rb-crud-actions-col{background-color:#fff}.rb-crud-container tr,.rb-crud-container tr td.rb-crud-actions-col{transition:background-color .3s ease-in-out}.rb-crud-container tr:not(.mat-mdc-header-row):hover{background-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 5%,transparent)}.rb-crud-container tr:not(.mat-mdc-header-row):hover td.rb-crud-actions-col{background-color:#e6efef}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.rb-crud-container th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{background:#fff}.rb-crud-container span.rb-crud-float-index{position:absolute;top:2px;left:2px;color:var(--mdc-protected-button-label-text-color, var(--mat-sys-primary));background-color:var(--mdc-protected-button-container-color, var(--mat-sys-surface));border-radius:3px;padding:0 3px;box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f}.rb-table-container.is-overflowing th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right,.rb-table-container.is-overflowing td.mat-mdc-cell.mdc-data-table__cell.cdk-cell.rb-crud-actions-col.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{box-shadow:-1px 0 3px -1px #0000001a}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}.empty-message h2{font-family:Roboto;font-weight:500;font-style:Medium;font-size:16px;line-height:23.4px;letter-spacing:0%;text-align:center}.empty-message p{font-family:Roboto;font-weight:400;font-style:Regular;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span{color:var(--mat-sys-primary, #006a6a);font-family:Roboto;font-weight:700;font-style:Bold;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span:hover{text-decoration:underline;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: ClientFilterService }, { type: i0.Renderer2 }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
                 type: Input
             }], actionsMenu: [{
                 type: Input
+            }], conditionalClasses: [{
+                type: Input
             }], pagination: [{
                 type: Input
             }], pageSize: [{
@@ -311,6 +462,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Input
             }], textLineBreakable: [{
                 type: Input
+            }], emptyMessageTherm: [{
+                type: Input
+            }], emptyMessageSentence: [{
+                type: Input
+            }], emptyLinkAction: [{
+                type: Input
             }], actionClick: [{
                 type: Output
             }], pageChange: [{
@@ -321,6 +478,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }], sort: [{
                 type: ViewChild,
                 args: [MatSort]
+            }], rbTableContainer: [{
+                type: ViewChild,
+                args: ['rbTableContainer', { static: true }]
             }] } });
 
 class RbDynamicButtonDirective {
@@ -378,7 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }] } });
 
 class RbCrudToolBarComponent {
-    clientFilterService;
+    targetCrud;
     searchPlaceholder = 'Digite para pesquisar...';
     buttonSettings = [];
     iconButton = 'add';
@@ -386,19 +546,19 @@ class RbCrudToolBarComponent {
     leftButtonSettings = [];
     buttonClick = new EventEmitter();
     searchText = signal('');
-    constructor(clientFilterService) {
-        this.clientFilterService = clientFilterService;
-    }
+    constructor() { }
     onSearchChange(event) {
         const value = event.target.value;
         this.searchText.set(value);
-        this.clientFilterService.setSearchText(value);
+        if (this.targetCrud) {
+            this.targetCrud.setSearchText(value);
+        }
     }
     onClickButton(action) {
         this.buttonClick.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, deps: [{ token: ClientFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudToolBarComponent, isStandalone: true, selector: "rb-crud-tool-bar", inputs: { searchPlaceholder: "searchPlaceholder", buttonSettings: "buttonSettings", iconButton: "iconButton", titleButton: "titleButton", leftButtonSettings: "leftButtonSettings" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"rb-crud-tool-bar-container\">\n  <div class=\"rb-flex-line-space-between\">\n    <div class=\"rb-flex-align-items-center\">\n      @for (btn of buttonSettings; track btn.label) {\n        <button mat-button\n        title=\"{{btn.label}}\"\n        class=\"{{btn.color}}\"\n        color=\"{{btn.color}}\"\n        [attr.aria-label]=\"btn.label\"\n        [rbDynamicButton]=\"btn.directive || null\"\n        (click)=\"onClickButton(btn)\">\n          @if (btn.icon) {\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          }\n          {{ btn.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"rb-search-box rb-flex-align-items-center\">\n      <mat-form-field class=\"rb-search-field\">\n        <mat-label>Pesquisar</mat-label>\n        <input\n        matInput\n        [value]=\"searchText()\"\n        (input)=\"onSearchChange($event)\"\n        placeholder={{searchPlaceholder}}\n        />\n        <mat-icon matPrefix>search</mat-icon>\n      </mat-form-field>\n      @for (btn of leftButtonSettings; track btn.label) {\n        <button mat-button\n        title=\"{{btn.label}}\"\n        class=\"{{btn.color}}\"\n        color=\"{{btn.color}}\"\n        [attr.aria-label]=\"btn.label\"\n        [rbDynamicButton]=\"btn.directive || null\"\n        (click)=\"onClickButton(btn)\">\n          @if (btn.icon) {\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          }\n          {{ btn.label }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudToolBarComponent, isStandalone: true, selector: "rb-crud-tool-bar", inputs: { targetCrud: "targetCrud", searchPlaceholder: "searchPlaceholder", buttonSettings: "buttonSettings", iconButton: "iconButton", titleButton: "titleButton", leftButtonSettings: "leftButtonSettings" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"rb-crud-tool-bar-container\">\n  <div class=\"rb-flex-line-space-between\">\n    <div class=\"rb-flex-align-items-center\">\n      @for (btn of buttonSettings; track btn.label) {\n        <button mat-button\n        title=\"{{btn.label}}\"\n        class=\"{{btn.color}}\"\n        color=\"{{btn.color}}\"\n        [attr.aria-label]=\"btn.label\"\n        [rbDynamicButton]=\"btn.directive || null\"\n        (click)=\"onClickButton(btn)\">\n          @if (btn.icon) {\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          }\n          {{ btn.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"rb-search-box rb-flex-align-items-center\">\n      <mat-form-field class=\"rb-search-field\">\n        <mat-label>Pesquisar</mat-label>\n        <input\n        matInput\n        [value]=\"searchText()\"\n        (input)=\"onSearchChange($event)\"\n        placeholder={{searchPlaceholder}}\n        />\n        <mat-icon matPrefix>search</mat-icon>\n      </mat-form-field>\n      @for (btn of leftButtonSettings; track btn.label) {\n        <button mat-button\n        title=\"{{btn.label}}\"\n        class=\"{{btn.color}}\"\n        color=\"{{btn.color}}\"\n        [attr.aria-label]=\"btn.label\"\n        [attr.id]=\"btn.selector\"\n        [rbDynamicButton]=\"btn.directive || null\"\n        (click)=\"onClickButton(btn)\">\n          @if (btn.icon) {\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          }\n          {{ btn.label }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base{min-width:40px}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base .mat-icon{vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, decorators: [{
             type: Component,
@@ -409,8 +569,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         MatIconModule,
                         MatButtonModule,
                         RbDynamicButtonDirective,
-                    ], template: "<div class=\"rb-crud-tool-bar-container\">\n  <div class=\"rb-flex-line-space-between\">\n    <div class=\"rb-flex-align-items-center\">\n      @for (btn of buttonSettings; track btn.label) {\n        <button mat-button\n        title=\"{{btn.label}}\"\n        class=\"{{btn.color}}\"\n        color=\"{{btn.color}}\"\n        [attr.aria-label]=\"btn.label\"\n        [rbDynamicButton]=\"btn.directive || null\"\n        (click)=\"onClickButton(btn)\">\n          @if (btn.icon) {\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          }\n          {{ btn.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"rb-search-box rb-flex-align-items-center\">\n      <mat-form-field class=\"rb-search-field\">\n        <mat-label>Pesquisar</mat-label>\n        <input\n        matInput\n        [value]=\"searchText()\"\n        (input)=\"onSearchChange($event)\"\n        placeholder={{searchPlaceholder}}\n        />\n        <mat-icon matPrefix>search</mat-icon>\n      </mat-form-field>\n      @for (btn of leftButtonSettings; track btn.label) {\n        <button mat-button\n        title=\"{{btn.label}}\"\n        class=\"{{btn.color}}\"\n        color=\"{{btn.color}}\"\n        [attr.aria-label]=\"btn.label\"\n        [rbDynamicButton]=\"btn.directive || null\"\n        (click)=\"onClickButton(btn)\">\n          @if (btn.icon) {\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          }\n          {{ btn.label }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}\n"] }]
-        }], ctorParameters: () => [{ type: ClientFilterService }], propDecorators: { searchPlaceholder: [{
+                    ], template: "<div class=\"rb-crud-tool-bar-container\">\n  <div class=\"rb-flex-line-space-between\">\n    <div class=\"rb-flex-align-items-center\">\n      @for (btn of buttonSettings; track btn.label) {\n        <button mat-button\n        title=\"{{btn.label}}\"\n        class=\"{{btn.color}}\"\n        color=\"{{btn.color}}\"\n        [attr.aria-label]=\"btn.label\"\n        [rbDynamicButton]=\"btn.directive || null\"\n        (click)=\"onClickButton(btn)\">\n          @if (btn.icon) {\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          }\n          {{ btn.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"rb-search-box rb-flex-align-items-center\">\n      <mat-form-field class=\"rb-search-field\">\n        <mat-label>Pesquisar</mat-label>\n        <input\n        matInput\n        [value]=\"searchText()\"\n        (input)=\"onSearchChange($event)\"\n        placeholder={{searchPlaceholder}}\n        />\n        <mat-icon matPrefix>search</mat-icon>\n      </mat-form-field>\n      @for (btn of leftButtonSettings; track btn.label) {\n        <button mat-button\n        title=\"{{btn.label}}\"\n        class=\"{{btn.color}}\"\n        color=\"{{btn.color}}\"\n        [attr.aria-label]=\"btn.label\"\n        [attr.id]=\"btn.selector\"\n        [rbDynamicButton]=\"btn.directive || null\"\n        (click)=\"onClickButton(btn)\">\n          @if (btn.icon) {\n            <mat-icon>{{ btn.icon }}</mat-icon>\n          }\n          {{ btn.label }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base{min-width:40px}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base .mat-icon{vertical-align:middle}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { targetCrud: [{
+                type: Input
+            }], searchPlaceholder: [{
                 type: Input
             }], buttonSettings: [{
                 type: Input
@@ -441,7 +603,7 @@ class RbDialogComponent {
         this.dialogRef.close(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbDialogComponent, isStandalone: true, selector: "rb-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>{{data.title}}</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Conte\u00FAdo -->\n  <mat-dialog-content class=\"rb-dialog-content\" >\n    @if (data.isMultipleContent) {\n      @for (item of data.multipleContent; track $index) {\n        @if (item.subtitle) {\n          <h3 class=\"rb-font-heading rb-h5\">{{item.subtitle}}</h3>\n        }\n        @if (item.paragraph) {\n          <p class=\"rb-font-body rb-large\">{{item.paragraph}}</p>\n        }\n      }\n    } @else {\n      <h3 class=\"rb-font-heading rb-h5\">{{data.subtitle}}</h3>\n      <p class=\"rb-font-body rb-large\">{{data.content}}</p>\n    }\n  </mat-dialog-content>\n\n  <!-- A\u00E7\u00F5es -->\n  @if (data.buttons?.length) {\n    <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n      @for (button of data.buttons; track $index) {\n        <button mat-button\n        title=\"{{button.label}}\"\n        class=\"{{button.color}}\"\n        [color]=\"button.color\"\n        [attr.aria-label]=\"button.label\"\n        [rbDynamicButton]=\"button.directive || null\"\n        (click)=\"onClickButton(button.action)\">\n          @if (button.icon && button.iconPosition === 'start') {\n            <mat-icon>{{button.icon}}</mat-icon>\n          }\n          {{button.label}}\n          @if (button.icon && button.iconPosition === 'end') {\n            <mat-icon>{{button.icon}}</mat-icon>\n          }\n        </button>\n      }\n    </mat-dialog-actions>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbDialogComponent, isStandalone: true, selector: "rb-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>{{data.title}}</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Conte\u00FAdo -->\n  <mat-dialog-content class=\"rb-dialog-content\" >\n    @if (data.isMultipleContent) {\n      @for (item of data.multipleContent; track $index) {\n        @if (item.subtitle) {\n          <h3 class=\"rb-font-heading rb-h5\">{{item.subtitle}}</h3>\n        }\n        @if (item.paragraph) {\n          <p class=\"rb-font-body rb-large\">{{item.paragraph}}</p>\n        }\n      }\n    } @else {\n      <h3 class=\"rb-font-heading rb-h5\">{{data.subtitle}}</h3>\n      <p class=\"rb-font-body rb-large\">{{data.content}}</p>\n    }\n  </mat-dialog-content>\n\n  <!-- A\u00E7\u00F5es -->\n  @if (data.buttons?.length) {\n    <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n      @for (button of data.buttons; track $index) {\n        <button mat-button\n        title=\"{{button.label}}\"\n        class=\"{{button.color}}\"\n        [color]=\"button.color\"\n        [attr.aria-label]=\"button.label\"\n        [rbDynamicButton]=\"button.directive || null\"\n        (click)=\"onClickButton(button.action)\">\n          @if (button.icon && button.iconPosition === 'start') {\n            <mat-icon>{{button.icon}}</mat-icon>\n          }\n          {{button.label}}\n          @if (button.icon && button.iconPosition === 'end') {\n            <mat-icon>{{button.icon}}</mat-icon>\n          }\n        </button>\n      }\n    </mat-dialog-actions>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, decorators: [{
             type: Component,
@@ -502,13 +664,13 @@ class RbFilterDropdownComponent {
         // this.filterItems = this.options.filter((item) => item.includes(this.searchText()));
         // this.clientFilterService.setFilterItems(this.filterItems);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, deps: [{ token: i1$1.Overlay }, { token: ClientFilterService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbFilterDropdownComponent, isStandalone: true, selector: "rb-filter-dropdown", inputs: { parentSelectorId: "parentSelectorId", options: "options" }, viewQueries: [{ propertyName: "filterMenu", first: true, predicate: ["filterMenu"], descendants: true }], ngImport: i0, template: "<ng-template #filterMenu>\n  <div class=\"rb-filter-dropdown\">\n    <div class=\"rb-filter-dropdown-header\">\n      <h5>Adicionar Filtro</h5>\n      <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <div class=\"rb-filter-dropdown-body\">\n      <div class=\"rb-filter-seach-bar\">\n        <mat-form-field class=\"rb-search-field\">\n          <mat-label>Pesquisar</mat-label>\n          <input\n          matInput\n          [value]=\"searchText()\"\n          (input)=\"onSearchChange($event)\"\n          placeholder=\"Pesquisar\"\n          />\n          <mat-icon matPrefix>search</mat-icon>\n        </mat-form-field>\n      </div>\n      <div class=\"rb-filter-dropdown-body-items\">\n        <pre>{{options | json}}</pre>\n        @if (options && options.length) {\n          @for (item of options; track trackByFn) {\n            <div\n              class=\"rb-filter-dropdown-item\"\n              (click)=\"onSelectItem(item)\"\n            >\n              <!-- <mat-checkbox\n                [checked]=\"isSelected(item)\"\n                (change)=\"onSelectItem(item, $event)\"\n              >\n                {{ item.label }}\n              </mat-checkbox> -->\n            </div>\n          }\n        } @else {\n          <div class=\"rb-filter-dropdown-item\">\n            Nenhum item encontrado\n            <!-- <mat-checkbox disabled>\n              <span class=\"rb-filter-dropdown-item-disabled\">\n                Nenhum item encontrado\n              </span>\n            </mat-checkbox> -->\n          </div>\n        }\n      </div>\n\n      <!-- <div class=\"rb-filter-dropdown-body-items\">\n        <div\n          *ngFor=\"let item of filterItems; trackBy: trackByFn\"\n          class=\"rb-filter-dropdown-item\"\n          (click)=\"onSelectItem(item)\"\n        >\n          <mat-checkbox\n            [checked]=\"isSelected(item)\"\n            (change)=\"onSelectItem(item, $event)\"\n          >\n            {{ item.label }}\n          </mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"!filterItems?.length\"\n          class=\"rb-filter-dropdown-item\">\n          <mat-checkbox disabled>\n            <span class=\"rb-filter-dropdown-item-disabled\">\n              Nenhum item encontrado\n            </span>\n          </mat-checkbox>\n        </div>\n      </div> -->\n    </div>\n  </div>\n</ng-template>\n", styles: [".rb-filter-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:470px;color:#505353;background-color:#f8faf9;box-shadow:0 4px 8px 3px #006a6a26,0 1px 3px #0014144d}.rb-filter-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, deps: [{ token: i1$2.Overlay }, { token: ClientFilterService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbFilterDropdownComponent, isStandalone: true, selector: "rb-filter-dropdown", inputs: { parentSelectorId: "parentSelectorId", options: "options" }, viewQueries: [{ propertyName: "filterMenu", first: true, predicate: ["filterMenu"], descendants: true }], ngImport: i0, template: "<ng-template #filterMenu>\n  <div class=\"rb-filter-dropdown\">\n    <div class=\"rb-filter-dropdown-header\">\n      <h5>Adicionar Filtro</h5>\n      <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <div class=\"rb-filter-dropdown-body\">\n      <div class=\"rb-filter-seach-bar\">\n        <mat-form-field class=\"rb-search-field\">\n          <mat-label>Pesquisar</mat-label>\n          <input\n          matInput\n          [value]=\"searchText()\"\n          (input)=\"onSearchChange($event)\"\n          placeholder=\"Pesquisar\"\n          />\n          <mat-icon matPrefix>search</mat-icon>\n        </mat-form-field>\n      </div>\n      <div class=\"rb-filter-dropdown-body-items\">\n        <pre>{{options | json}}</pre>\n        @if (options && options.length) {\n          @for (item of options; track trackByFn) {\n            <div\n              class=\"rb-filter-dropdown-item\"\n              (click)=\"onSelectItem(item)\"\n            >\n              <!-- <mat-checkbox\n                [checked]=\"isSelected(item)\"\n                (change)=\"onSelectItem(item, $event)\"\n              >\n                {{ item.label }}\n              </mat-checkbox> -->\n            </div>\n          }\n        } @else {\n          <div class=\"rb-filter-dropdown-item\">\n            Nenhum item encontrado\n            <!-- <mat-checkbox disabled>\n              <span class=\"rb-filter-dropdown-item-disabled\">\n                Nenhum item encontrado\n              </span>\n            </mat-checkbox> -->\n          </div>\n        }\n      </div>\n\n      <!-- <div class=\"rb-filter-dropdown-body-items\">\n        <div\n          *ngFor=\"let item of filterItems; trackBy: trackByFn\"\n          class=\"rb-filter-dropdown-item\"\n          (click)=\"onSelectItem(item)\"\n        >\n          <mat-checkbox\n            [checked]=\"isSelected(item)\"\n            (change)=\"onSelectItem(item, $event)\"\n          >\n            {{ item.label }}\n          </mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"!filterItems?.length\"\n          class=\"rb-filter-dropdown-item\">\n          <mat-checkbox disabled>\n            <span class=\"rb-filter-dropdown-item-disabled\">\n              Nenhum item encontrado\n            </span>\n          </mat-checkbox>\n        </div>\n      </div> -->\n    </div>\n  </div>\n</ng-template>\n", styles: [".rb-filter-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:470px;color:#505353;background-color:#f8faf9;box-shadow:0 4px 8px 3px #006a6a26,0 1px 3px #0014144d}.rb-filter-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rb-filter-dropdown', imports: [CommonModule, OverlayModule, PortalModule, MatIconModule, MatInputModule], standalone: true, template: "<ng-template #filterMenu>\n  <div class=\"rb-filter-dropdown\">\n    <div class=\"rb-filter-dropdown-header\">\n      <h5>Adicionar Filtro</h5>\n      <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <div class=\"rb-filter-dropdown-body\">\n      <div class=\"rb-filter-seach-bar\">\n        <mat-form-field class=\"rb-search-field\">\n          <mat-label>Pesquisar</mat-label>\n          <input\n          matInput\n          [value]=\"searchText()\"\n          (input)=\"onSearchChange($event)\"\n          placeholder=\"Pesquisar\"\n          />\n          <mat-icon matPrefix>search</mat-icon>\n        </mat-form-field>\n      </div>\n      <div class=\"rb-filter-dropdown-body-items\">\n        <pre>{{options | json}}</pre>\n        @if (options && options.length) {\n          @for (item of options; track trackByFn) {\n            <div\n              class=\"rb-filter-dropdown-item\"\n              (click)=\"onSelectItem(item)\"\n            >\n              <!-- <mat-checkbox\n                [checked]=\"isSelected(item)\"\n                (change)=\"onSelectItem(item, $event)\"\n              >\n                {{ item.label }}\n              </mat-checkbox> -->\n            </div>\n          }\n        } @else {\n          <div class=\"rb-filter-dropdown-item\">\n            Nenhum item encontrado\n            <!-- <mat-checkbox disabled>\n              <span class=\"rb-filter-dropdown-item-disabled\">\n                Nenhum item encontrado\n              </span>\n            </mat-checkbox> -->\n          </div>\n        }\n      </div>\n\n      <!-- <div class=\"rb-filter-dropdown-body-items\">\n        <div\n          *ngFor=\"let item of filterItems; trackBy: trackByFn\"\n          class=\"rb-filter-dropdown-item\"\n          (click)=\"onSelectItem(item)\"\n        >\n          <mat-checkbox\n            [checked]=\"isSelected(item)\"\n            (change)=\"onSelectItem(item, $event)\"\n          >\n            {{ item.label }}\n          </mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"!filterItems?.length\"\n          class=\"rb-filter-dropdown-item\">\n          <mat-checkbox disabled>\n            <span class=\"rb-filter-dropdown-item-disabled\">\n              Nenhum item encontrado\n            </span>\n          </mat-checkbox>\n        </div>\n      </div> -->\n    </div>\n  </div>\n</ng-template>\n", styles: [".rb-filter-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:470px;color:#505353;background-color:#f8faf9;box-shadow:0 4px 8px 3px #006a6a26,0 1px 3px #0014144d}.rb-filter-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: ClientFilterService }, { type: i0.ViewContainerRef }], propDecorators: { parentSelectorId: [{
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: ClientFilterService }, { type: i0.ViewContainerRef }], propDecorators: { parentSelectorId: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -528,11 +690,11 @@ class RbFilterPanelComponent {
         this.dropdown.openMenu();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RbFilterPanelComponent, isStandalone: true, selector: "rb-rb-filter-panel", viewQueries: [{ propertyName: "dropdown", first: true, predicate: RbFilterDropdownComponent, descendants: true }], ngImport: i0, template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>Filtro</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Conte\u00FAdo -->\n  <mat-dialog-content class=\"rb-dialog-content\" >\n    <div class=\"rb-row rb-row rb-flex-row rb-align-items-start rb-justify-content-start\">\n      <button mat-button id=\"parentDropdownSelector\"\n        title=\"Filtrar\"\n        class=\"primary\"\n        aria-label=\"Filtrar\"\n        [rbDynamicButton]=\"null\"\n        (click)=\"openMenu()\">\n        <mat-icon>add</mat-icon>\n        Adicionar nova condi\u00E7\u00E3o\n      </button>\n      <rb-filter-dropdown\n      [parentSelectorId]=\"'#parentDropdownSelector'\"\n      [options]=\"data.filterOptions\"></rb-filter-dropdown>\n\n    </div>\n  </mat-dialog-content>\n\n  <!-- A\u00E7\u00F5es -->\n    <mat-dialog-actions class=\"rb-dialog-actions\" align=\"end\">\n      <button mat-button\n        title=\"Filtrar\"\n        class=\"primary\"\n        aria-label=\"Filtrar\"\n        [rbDynamicButton]=\"'confirm'\"\n        (click)=\"applyFilter()\">\n        Filtrar\n      </button>\n    </mat-dialog-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RbFilterDropdownComponent, selector: "rb-filter-dropdown", inputs: ["parentSelectorId", "options"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RbFilterPanelComponent, isStandalone: true, selector: "rb-filter-panel", viewQueries: [{ propertyName: "dropdown", first: true, predicate: RbFilterDropdownComponent, descendants: true }], ngImport: i0, template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>Filtro</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Conte\u00FAdo -->\n  <mat-dialog-content class=\"rb-dialog-content\" >\n    <div class=\"rb-row rb-row rb-flex-row rb-align-items-start rb-justify-content-start\">\n      <button mat-button id=\"parentDropdownSelector\"\n        title=\"Filtrar\"\n        class=\"primary\"\n        aria-label=\"Filtrar\"\n        [rbDynamicButton]=\"null\"\n        (click)=\"openMenu()\">\n        <mat-icon>add</mat-icon>\n        Adicionar nova condi\u00E7\u00E3o\n      </button>\n      <rb-filter-dropdown\n      [parentSelectorId]=\"'#parentDropdownSelector'\"\n      [options]=\"data.filterOptions\"></rb-filter-dropdown>\n\n    </div>\n  </mat-dialog-content>\n\n  <!-- A\u00E7\u00F5es -->\n    <mat-dialog-actions class=\"rb-dialog-actions\" align=\"end\">\n      <button mat-button\n        title=\"Filtrar\"\n        class=\"primary\"\n        aria-label=\"Filtrar\"\n        [rbDynamicButton]=\"'confirm'\"\n        (click)=\"applyFilter()\">\n        Filtrar\n      </button>\n    </mat-dialog-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RbFilterDropdownComponent, selector: "rb-filter-dropdown", inputs: ["parentSelectorId", "options"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rb-rb-filter-panel', imports: [MatDialogModule, MatButtonModule, MatIconModule, RbFilterDropdownComponent, RbDynamicButtonDirective], template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>Filtro</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Conte\u00FAdo -->\n  <mat-dialog-content class=\"rb-dialog-content\" >\n    <div class=\"rb-row rb-row rb-flex-row rb-align-items-start rb-justify-content-start\">\n      <button mat-button id=\"parentDropdownSelector\"\n        title=\"Filtrar\"\n        class=\"primary\"\n        aria-label=\"Filtrar\"\n        [rbDynamicButton]=\"null\"\n        (click)=\"openMenu()\">\n        <mat-icon>add</mat-icon>\n        Adicionar nova condi\u00E7\u00E3o\n      </button>\n      <rb-filter-dropdown\n      [parentSelectorId]=\"'#parentDropdownSelector'\"\n      [options]=\"data.filterOptions\"></rb-filter-dropdown>\n\n    </div>\n  </mat-dialog-content>\n\n  <!-- A\u00E7\u00F5es -->\n    <mat-dialog-actions class=\"rb-dialog-actions\" align=\"end\">\n      <button mat-button\n        title=\"Filtrar\"\n        class=\"primary\"\n        aria-label=\"Filtrar\"\n        [rbDynamicButton]=\"'confirm'\"\n        (click)=\"applyFilter()\">\n        Filtrar\n      </button>\n    </mat-dialog-actions>\n</div>\n" }]
+            args: [{ selector: 'rb-filter-panel', imports: [MatDialogModule, MatButtonModule, MatIconModule, RbFilterDropdownComponent, RbDynamicButtonDirective], template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>Filtro</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Conte\u00FAdo -->\n  <mat-dialog-content class=\"rb-dialog-content\" >\n    <div class=\"rb-row rb-row rb-flex-row rb-align-items-start rb-justify-content-start\">\n      <button mat-button id=\"parentDropdownSelector\"\n        title=\"Filtrar\"\n        class=\"primary\"\n        aria-label=\"Filtrar\"\n        [rbDynamicButton]=\"null\"\n        (click)=\"openMenu()\">\n        <mat-icon>add</mat-icon>\n        Adicionar nova condi\u00E7\u00E3o\n      </button>\n      <rb-filter-dropdown\n      [parentSelectorId]=\"'#parentDropdownSelector'\"\n      [options]=\"data.filterOptions\"></rb-filter-dropdown>\n\n    </div>\n  </mat-dialog-content>\n\n  <!-- A\u00E7\u00F5es -->\n    <mat-dialog-actions class=\"rb-dialog-actions\" align=\"end\">\n      <button mat-button\n        title=\"Filtrar\"\n        class=\"primary\"\n        aria-label=\"Filtrar\"\n        [rbDynamicButton]=\"'confirm'\"\n        (click)=\"applyFilter()\">\n        Filtrar\n      </button>\n    </mat-dialog-actions>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: [RbFilterDropdownComponent]
@@ -552,13 +714,133 @@ class RbCopyConfirmDialogComponent {
     confirm() {
         this.dialogRef.close(this.formGroup.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCopyConfirmDialogComponent, isStandalone: true, selector: "lib-rb-copy-confirm-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>{{data.title}}</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n    <!-- Conte\u00FAdo -->\n    <mat-dialog-content class=\"rb-dialog-content\">\n      <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n        <mat-label>{{data.labelField}}</mat-label>\n        <input matInput autofocus\n        type=\"text\"\n        [attr.aria-label]=\"data.labelField\"\n        formControlName=\"fieldValue\"\n        required>\n        @if (formGroup.controls['fieldValue'].hasError('required')) {\n          <mat-error >\n            Campo obrigat\u00F3rio\n          </mat-error>\n        }\n      </mat-form-field>\n\n    </mat-dialog-content>\n\n    <!-- A\u00E7\u00F5es -->\n    <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n      <button mat-button mat-dialog-close\n      title=\"Cancelar\"\n      aria-label=\"Cancelar\"\n      class=\"secondary\"\n      color=\"accent\"\n      [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o duplicar'\"\n      type=\"button\"\n      [rbDynamicButton]=\"'cancel'\">\n        Cancelar\n      </button>\n      <button mat-button\n      title=\"Duplicar\"\n      aria-label=\"Duplicar\"\n      class=\"primary\"\n      [color]=\"'primary'\"\n      [attr.aria-label]=\"'Duplicar ' + data.labelField\"\n      [rbDynamicButton]=\"'confirm'\"\n      type=\"submit\"\n      [disabled]=\"formGroup.invalid\"\n      (click)=\"confirm()\">\n        Duplicar\n      </button>\n    </mat-dialog-actions>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCopyConfirmDialogComponent, isStandalone: true, selector: "lib-rb-copy-confirm-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>{{data.title}}</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n    <!-- Conte\u00FAdo -->\n    <mat-dialog-content class=\"rb-dialog-content\">\n      <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n        <mat-label>{{data.labelField}}</mat-label>\n        <input matInput autofocus\n        type=\"text\"\n        [attr.aria-label]=\"data.labelField\"\n        formControlName=\"fieldValue\"\n        required>\n        @if (formGroup.controls['fieldValue'].hasError('required')) {\n          <mat-error >\n            Campo obrigat\u00F3rio\n          </mat-error>\n        }\n      </mat-form-field>\n\n    </mat-dialog-content>\n\n    <!-- A\u00E7\u00F5es -->\n    <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n      <button mat-button mat-dialog-close\n      title=\"Cancelar\"\n      aria-label=\"Cancelar\"\n      class=\"secondary\"\n      color=\"accent\"\n      [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o' + (data.labelConfirmButton || 'duplicar' ).toLowerCase()\"\n      type=\"button\"\n      [rbDynamicButton]=\"'cancel'\">\n        Cancelar\n      </button>\n      <button mat-button\n      title=\"{{data.labelConfirmButton || 'Duplicar'}}\"\n      [attr.aria-label]=\"data.labelConfirmButton || 'Duplicar'\"\n      class=\"primary\"\n      [color]=\"'primary'\"\n      [attr.aria-label]=\"(data.labelConfirmButton || 'Duplicar' ) + data.labelField\"\n      [rbDynamicButton]=\"'confirm'\"\n      type=\"submit\"\n      [disabled]=\"formGroup.invalid\"\n      (click)=\"confirm()\">\n        {{ data.labelConfirmButton || 'Duplicar' }}\n      </button>\n    </mat-dialog-actions>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-rb-copy-confirm-dialog', imports: [MatDialogModule, MatButtonModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, MatIconModule, RbDynamicButtonDirective], template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>{{data.title}}</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n    <!-- Conte\u00FAdo -->\n    <mat-dialog-content class=\"rb-dialog-content\">\n      <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n        <mat-label>{{data.labelField}}</mat-label>\n        <input matInput autofocus\n        type=\"text\"\n        [attr.aria-label]=\"data.labelField\"\n        formControlName=\"fieldValue\"\n        required>\n        @if (formGroup.controls['fieldValue'].hasError('required')) {\n          <mat-error >\n            Campo obrigat\u00F3rio\n          </mat-error>\n        }\n      </mat-form-field>\n\n    </mat-dialog-content>\n\n    <!-- A\u00E7\u00F5es -->\n    <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n      <button mat-button mat-dialog-close\n      title=\"Cancelar\"\n      aria-label=\"Cancelar\"\n      class=\"secondary\"\n      color=\"accent\"\n      [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o duplicar'\"\n      type=\"button\"\n      [rbDynamicButton]=\"'cancel'\">\n        Cancelar\n      </button>\n      <button mat-button\n      title=\"Duplicar\"\n      aria-label=\"Duplicar\"\n      class=\"primary\"\n      [color]=\"'primary'\"\n      [attr.aria-label]=\"'Duplicar ' + data.labelField\"\n      [rbDynamicButton]=\"'confirm'\"\n      type=\"submit\"\n      [disabled]=\"formGroup.invalid\"\n      (click)=\"confirm()\">\n        Duplicar\n      </button>\n    </mat-dialog-actions>\n  </form>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }] });
+            args: [{ selector: 'lib-rb-copy-confirm-dialog', imports: [MatDialogModule, MatButtonModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, MatIconModule, RbDynamicButtonDirective], template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>{{data.title}}</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n    <!-- Conte\u00FAdo -->\n    <mat-dialog-content class=\"rb-dialog-content\">\n      <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n        <mat-label>{{data.labelField}}</mat-label>\n        <input matInput autofocus\n        type=\"text\"\n        [attr.aria-label]=\"data.labelField\"\n        formControlName=\"fieldValue\"\n        required>\n        @if (formGroup.controls['fieldValue'].hasError('required')) {\n          <mat-error >\n            Campo obrigat\u00F3rio\n          </mat-error>\n        }\n      </mat-form-field>\n\n    </mat-dialog-content>\n\n    <!-- A\u00E7\u00F5es -->\n    <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n      <button mat-button mat-dialog-close\n      title=\"Cancelar\"\n      aria-label=\"Cancelar\"\n      class=\"secondary\"\n      color=\"accent\"\n      [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o' + (data.labelConfirmButton || 'duplicar' ).toLowerCase()\"\n      type=\"button\"\n      [rbDynamicButton]=\"'cancel'\">\n        Cancelar\n      </button>\n      <button mat-button\n      title=\"{{data.labelConfirmButton || 'Duplicar'}}\"\n      [attr.aria-label]=\"data.labelConfirmButton || 'Duplicar'\"\n      class=\"primary\"\n      [color]=\"'primary'\"\n      [attr.aria-label]=\"(data.labelConfirmButton || 'Duplicar' ) + data.labelField\"\n      [rbDynamicButton]=\"'confirm'\"\n      type=\"submit\"\n      [disabled]=\"formGroup.invalid\"\n      (click)=\"confirm()\">\n        {{ data.labelConfirmButton || 'Duplicar' }}\n      </button>\n    </mat-dialog-actions>\n  </form>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }] });
+
+class RbChangeLogDialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RbChangeLogDialogComponent, isStandalone: true, selector: "rb-rb-change-log-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>Hist\u00F3rico de altera\u00E7\u00F5es</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Conte\u00FAdo -->\n  <mat-dialog-content class=\"rb-dialog-content bg-white has-crud\" >\n    <rb-crud\n      [columns]=\"data.columns\"\n      [data]=\"data.dataSource\"\n      [pagination]=\"false\"\n      [textLineBreakable]=\"true\"\n    ></rb-crud>\n  </mat-dialog-content>\n</div>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RbCrudComponent, selector: "rb-crud", inputs: ["columns", "data", "actionsMenu", "conditionalClasses", "pagination", "pageSize", "infiniteScroll", "textLineBreakable", "emptyMessageTherm", "emptyMessageSentence", "emptyLinkAction"], outputs: ["actionClick", "pageChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rb-rb-change-log-dialog', imports: [MatDialogModule, MatButtonModule, MatIconModule, RbCrudComponent], template: "<div class=\"rb-dialog\">\n  <!-- Cabe\u00E7alho -->\n  <div class=\"rb-dialog-header\">\n    <h2>Hist\u00F3rico de altera\u00E7\u00F5es</h2>\n    <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Conte\u00FAdo -->\n  <mat-dialog-content class=\"rb-dialog-content bg-white has-crud\" >\n    <rb-crud\n      [columns]=\"data.columns\"\n      [data]=\"data.dataSource\"\n      [pagination]=\"false\"\n      [textLineBreakable]=\"true\"\n    ></rb-crud>\n  </mat-dialog-content>\n</div>\n\n" }]
+        }] });
+
+class RbColumnsSortSettingComponent {
+    overlay;
+    viewContainerRef;
+    cdr;
+    parentSelectorId = '#parentDropdownColumnSettingsSelector';
+    columns = [];
+    offsetX = 0;
+    offsetY = 0;
+    showIndex = false;
+    columnsSettingContainer;
+    columnsChange = new EventEmitter();
+    showIndexService = inject(RbShowIndexCrudService);
+    overlayRef = null;
+    editableColumns = [];
+    backupColumns = [];
+    constructor(overlay, viewContainerRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.cdr = cdr;
+    }
+    openMenu() {
+        if (this.overlayRef) {
+            this.closeMenu();
+            return;
+        }
+        this.editableColumns = structuredClone(this.columns);
+        this.backupColumns = structuredClone(this.columns);
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(document.querySelector(this.parentSelectorId || 'button'))
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetX: this.offsetX,
+                offsetY: this.offsetY,
+            },
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+        });
+        const portal = new TemplatePortal(this.columnsSettingContainer, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
+    }
+    restore() {
+        this.editableColumns = structuredClone(this.backupColumns);
+        this.cdr.detectChanges();
+    }
+    save() {
+        this.columnsChange.emit([...this.editableColumns]);
+        this.closeMenu();
+    }
+    closeMenu() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    drop(event) {
+        moveItemInArray(this.editableColumns, event.previousIndex, event.currentIndex);
+    }
+    showColumn(item) {
+        item.hidden = item.hidden ? false : true;
+    }
+    showIndexControl() {
+        this.showIndex = this.showIndex ? false : true;
+        this.showIndexService.setShowIndex(this.showIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbColumnsSortSettingComponent, isStandalone: true, selector: "rb-columns-sort-setting", inputs: { parentSelectorId: "parentSelectorId", columns: "columns", offsetX: "offsetX", offsetY: "offsetY", showIndex: "showIndex" }, outputs: { columnsChange: "columnsChange" }, viewQueries: [{ propertyName: "columnsSettingContainer", first: true, predicate: ["columnsSettingContainer"], descendants: true }], ngImport: i0, template: "<ng-template #columnsSettingContainer>\n  <div class=\"rb-pannel-dropdown\">\n    <div class=\"rb-pannel-dropdown-header\">\n      <h5>Colunas</h5>\n      <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <div class=\"rb-pannel-dropdown-body\">\n      <div cdkDropList class=\"rb-pannel-drop-list\" (cdkDropListDropped)=\"drop($event)\">\n        @for (item of editableColumns; track item) {\n          <div class=\"rb-pannel-drop-item\" cdkDrag [cdkDragDisabled]=\"item.hidden\">\n            <div class=\"rb-pannel-drop-content\" >\n              <mat-icon class=\"rb-pannel-drop-item-icon\">drag_indicator</mat-icon>\n              <div class=\"rb-pannel-drop-item-label\">\n                {{ item.label }}\n              </div>\n              <button mat-icon-button aria-label=\"Exibir coluna\" (click)=\"showColumn(item)\" [disabled]=\"item.blocked\">\n                <mat-icon>{{item.hidden ? 'visibility_off' : 'visibility'}}</mat-icon>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"rb-pannel-dropdown-footer\">\n      <button mat-button\n        title=\"\u00CDndices\"\n        class=\"primary\"\n        aria-label=\"\u00CDndices\"\n        [rbDynamicButton]=\"null\"\n        (click)=\"showIndexControl()\">\n        \u00CDndices\n      </button>\n      <div class=\"rb-pannel-dropdown-footer-right\">\n        <button mat-button\n        title=\"Restaurar\"\n        class=\"primary\"\n        aria-label=\"Restaurar\"\n        [rbDynamicButton]=\"'cancel'\"\n        (click)=\"restore()\">\n          Restaurar\n        </button>\n        <button mat-button\n        title=\"Aplicar\"\n        class=\"primary\"\n        aria-label=\"Aplicar\"\n        [rbDynamicButton]=\"'confirm'\"\n        (click)=\"save()\">\n          Aplicar\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".rb-pannel-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:600px;border-radius:8px;color:#505353;background-color:#f8faf9;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.rb-pannel-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0;padding:0 16px}.rb-pannel-dropdown-header h5{font-family:Roboto;font-weight:500;font-size:16px;line-height:23.4px;margin-top:0;margin-bottom:0}.rb-pannel-dropdown-body{width:100%}.rb-pannel-drop-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:solid 1px #eee}.rb-pannel-drop-item{background-color:#f8faf9}.rb-pannel-drop-item.cdk-drag-preview{overflow:hidden;box-shadow:0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f}.rb-pannel-drop-item-label{min-width:60%;padding:0 15px;font-weight:500}.rb-pannel-dropdown-footer{width:-webkit-fill-available;display:flex;justify-content:space-between;align-items:center;padding:8px 16px}.rb-pannel-dropdown-footer-right{display:flex;gap:8px}.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled mat-icon.rb-pannel-drop-item-icon,.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled .rb-pannel-drop-item-label{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rb-columns-sort-setting', imports: [CommonModule, OverlayModule, MatIconModule, MatButtonModule, CdkDropList, CdkDrag, RbDynamicButtonDirective], standalone: true, template: "<ng-template #columnsSettingContainer>\n  <div class=\"rb-pannel-dropdown\">\n    <div class=\"rb-pannel-dropdown-header\">\n      <h5>Colunas</h5>\n      <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <div class=\"rb-pannel-dropdown-body\">\n      <div cdkDropList class=\"rb-pannel-drop-list\" (cdkDropListDropped)=\"drop($event)\">\n        @for (item of editableColumns; track item) {\n          <div class=\"rb-pannel-drop-item\" cdkDrag [cdkDragDisabled]=\"item.hidden\">\n            <div class=\"rb-pannel-drop-content\" >\n              <mat-icon class=\"rb-pannel-drop-item-icon\">drag_indicator</mat-icon>\n              <div class=\"rb-pannel-drop-item-label\">\n                {{ item.label }}\n              </div>\n              <button mat-icon-button aria-label=\"Exibir coluna\" (click)=\"showColumn(item)\" [disabled]=\"item.blocked\">\n                <mat-icon>{{item.hidden ? 'visibility_off' : 'visibility'}}</mat-icon>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"rb-pannel-dropdown-footer\">\n      <button mat-button\n        title=\"\u00CDndices\"\n        class=\"primary\"\n        aria-label=\"\u00CDndices\"\n        [rbDynamicButton]=\"null\"\n        (click)=\"showIndexControl()\">\n        \u00CDndices\n      </button>\n      <div class=\"rb-pannel-dropdown-footer-right\">\n        <button mat-button\n        title=\"Restaurar\"\n        class=\"primary\"\n        aria-label=\"Restaurar\"\n        [rbDynamicButton]=\"'cancel'\"\n        (click)=\"restore()\">\n          Restaurar\n        </button>\n        <button mat-button\n        title=\"Aplicar\"\n        class=\"primary\"\n        aria-label=\"Aplicar\"\n        [rbDynamicButton]=\"'confirm'\"\n        (click)=\"save()\">\n          Aplicar\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".rb-pannel-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:600px;border-radius:8px;color:#505353;background-color:#f8faf9;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.rb-pannel-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0;padding:0 16px}.rb-pannel-dropdown-header h5{font-family:Roboto;font-weight:500;font-size:16px;line-height:23.4px;margin-top:0;margin-bottom:0}.rb-pannel-dropdown-body{width:100%}.rb-pannel-drop-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:solid 1px #eee}.rb-pannel-drop-item{background-color:#f8faf9}.rb-pannel-drop-item.cdk-drag-preview{overflow:hidden;box-shadow:0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f}.rb-pannel-drop-item-label{min-width:60%;padding:0 15px;font-weight:500}.rb-pannel-dropdown-footer{width:-webkit-fill-available;display:flex;justify-content:space-between;align-items:center;padding:8px 16px}.rb-pannel-dropdown-footer-right{display:flex;gap:8px}.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled mat-icon.rb-pannel-drop-item-icon,.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled .rb-pannel-drop-item-label{opacity:.5}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { parentSelectorId: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], offsetX: [{
+                type: Input
+            }], offsetY: [{
+                type: Input
+            }], showIndex: [{
+                type: Input
+            }], columnsSettingContainer: [{
+                type: ViewChild,
+                args: ['columnsSettingContainer']
+            }], columnsChange: [{
+                type: Output
+            }] } });
+
+class IsArrayPipe {
+    transform(value) {
+        return Array.isArray(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, isStandalone: true, name: "isArray" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isArray',
+                    standalone: true
+                }]
+        }] });
 
 // export interface CrudFilter {
 //   key: string;
@@ -576,5 +858,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
+export { IsArrayPipe, RbChangeLogDialogComponent, RbColumnsSortSettingComponent, RbConditionalClassPipe, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
 //# sourceMappingURL=rubeusteam-rb-angular-components.mjs.map