@rubeusteam/rb-angular-components
Version:
Adição do componente rb-change-log-dialog
556 lines (547 loc) • 74 kB
JavaScript
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 { 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 { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import * as i5 from '@angular/material/sort';
import { MatSort, MatSortModule } from '@angular/material/sort';
import * as i3$2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
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 { MatFormFieldModule } from '@angular/material/form-field';
import * as i1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import * as i1$1 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 { Validators, ReactiveFormsModule } from '@angular/forms';
class RbCustomPipe {
transform(value, type) {
switch (type) {
case 'date':
return this.dateTransform(value);
case 'datetime':
return this.dateTimeTransform(value);
case 'currency':
return this.currencyTransform(value);
case 'cpf':
return this.cpfTransform(value);
case 'cnpj':
return this.cnpjTransform(value);
case 'phone':
return this.phoneTransform(value);
case 'cep':
return this.cepTransform(value);
case 'mask':
return this.maskTransform(value);
case 'relativeTime':
return this.relativeTimeTransform(value);
case 'lastModifiedBy':
return this.lastModifiedTransform(value);
default:
return value;
}
}
dateTransform(value, format) {
if (!value || typeof value !== 'string')
return '';
const isoString = value.includes(' ')
? value.replace(' ', 'T')
: `${value}T00:00:00`;
const date = new Date(isoString);
if (isNaN(date.getTime()))
return '';
return date.toLocaleDateString('pt-BR', {
timeZone: 'America/Sao_Paulo'
});
}
dateTimeTransform(value) {
if (!value || typeof value !== 'string')
return '';
const isoString = value.includes(' ')
? value.replace(' ', 'T')
: `${value}T00:00:00`;
const date = new Date(isoString);
if (isNaN(date.getTime()))
return '';
const datePart = new Intl.DateTimeFormat('pt-BR', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
timeZone: 'America/Sao_Paulo'
}).format(date);
const timePart = new Intl.DateTimeFormat('pt-BR', {
hour: '2-digit',
minute: '2-digit',
hour12: false,
timeZone: 'America/Sao_Paulo'
}).format(date);
return `${datePart} às ${timePart}`;
}
currencyTransform(value) {
if (!value)
return '';
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
}
cpfTransform(value) {
if (!value)
return '';
return value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
}
cnpjTransform(value) {
if (!value)
return '';
return value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5");
}
phoneTransform(value) {
if (!value)
return '';
return value.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
}
cepTransform(value) {
if (!value)
return '';
return value.replace(/(\d{5})(\d{3})/, "$1-$2");
}
maskTransform(value) {
if (!value)
return '';
return '*'.repeat(value.toString().length);
}
relativeTimeTransform(value) {
if (!value)
return '';
const date = new Date(value);
const now = new Date();
const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
switch (true) {
case diff < 60:
return `${diff} segundos atrás`;
case diff < 3600:
return `${Math.floor(diff / 60)} minutos atrás`;
case diff < 86400:
return `${Math.floor(diff / 3600)} horas atrás`;
case diff < 2592000:
return `${Math.floor(diff / 86400)} dias atrás`;
case diff < 31536000:
return `${Math.floor(diff / 2592000)} meses atrás`;
default:
return `${Math.floor(diff / 31536000)} anos atrás`;
}
}
lastModifiedTransform(value) {
if (!value || !value.date)
return '';
const formattedDate = new Intl.DateTimeFormat('pt-BR', {
dateStyle: 'short',
// timeStyle: 'short',
timeZone: 'America/Sao_Paulo'
}).format(new Date(value.date));
if (!value.author) {
return `${formattedDate}`;
}
return `${formattedDate} por ${value.author}`;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, isStandalone: true, name: "rbCustomPipe" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, decorators: [{
type: Pipe,
args: [{
name: 'rbCustomPipe',
standalone: true
}]
}] });
class PaginatorPtbrIntlService extends MatPaginatorIntl {
itemsPerPageLabel = 'Itens por página:';
nextPageLabel = 'Próxima';
previousPageLabel = 'Anterior';
firstPageLabel = 'Primeira página';
lastPageLabel = 'Última página';
getRangeLabel = (page, pageSize, length) => {
if (length === 0 || pageSize === 0) {
return `Página 0 de 0`;
}
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' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class ClientFilterService {
searchText = signal('');
setSearchText(text) {
this.searchText.set(this.normalizeText(text));
}
normalizeText(text) {
return text
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase()
.trim();
}
getSearchText() {
return this.searchText;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class RbCrudComponent {
clientFilterService;
renderer;
columns = [];
data = [];
actionsMenu = [];
pagination = true;
pageSize = 10;
infiniteScroll = false;
textLineBreakable = false;
actionClick = new EventEmitter();
// @Output() filterChange = new EventEmitter<any>();
pageChange = new EventEmitter();
paginator;
sort;
rbTableContainer;
displayedColumns = [];
dataSource = new MatTableDataSource(this.data);
filterText;
isOverflowing = false;
renderingProgressive = false;
THRESHOLD = 200;
constructor(clientFilterService, renderer) {
this.clientFilterService = clientFilterService;
this.renderer = renderer;
this.filterText = this.clientFilterService.getSearchText();
effect(() => {
this.applyFilter();
});
}
ngAfterViewInit() {
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');
}
}
ngOnChanges() {
this.displayedColumns = this.columns.map(col => col.key);
if (this.actionsMenu.length) {
this.displayedColumns.push('actions');
}
this.renderingControl();
}
renderingControl() {
if (this.data.length > this.THRESHOLD) {
this.renderingProgressive = true;
this.renderFirstPage();
setTimeout(() => {
this.loadFullData();
}, 100);
}
else {
this.dataSource.data = this.data;
this.renderingProgressive = false;
}
}
renderFirstPage() {
const firstPage = this.data.slice(0, this.pageSize);
this.dataSource = new MatTableDataSource(firstPage);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.defineSortRule();
}
loadFullData() {
this.dataSource = new MatTableDataSource(this.data);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.defineSortRule();
this.renderingProgressive = false;
}
defineSortRule() {
this.dataSource.sortingDataAccessor = (item, property) => {
if (item[property]?.date) {
return new Date(item[property]?.date || 0).getTime();
}
return item[property];
};
}
onActionClick(action, row) {
this.actionClick.emit({ action: action.action, row });
}
onClickCell(action, row) {
this.actionClick.emit({ action: action, row });
}
// applyFilter() {
// this.dataSource.filter = this.filterText().trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
// }
applyFilter() {
this.dataSource.filterPredicate = (data, filter) => {
const accumulator = (currentTerm, key) => {
const value = data[key];
return currentTerm + ' ' + (typeof value === 'string' ? this.clientFilterService.normalizeText(value) : '');
};
const dataStr = Object.keys(data).reduce(accumulator, '').trim();
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 }, { 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", 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 }, { propertyName: "rbTableContainer", first: true, predicate: ["rbTableContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-crud-container\">\n <div #rbTableContainer 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\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\"\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 <!-- 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 (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\" 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}.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-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}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: 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" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, decorators: [{
type: Component,
args: [{ selector: 'rb-crud', standalone: true, imports: [
CommonModule,
MatTableModule,
MatMenuModule,
MatInputModule,
MatPaginatorModule,
MatSortModule,
MatIconModule,
MatButtonModule,
RbCustomPipe,
// IsArrayPipe,
], providers: [
{ provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
], template: "<div class=\"rb-crud-container\">\n <div #rbTableContainer 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\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\"\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 <!-- 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 (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\" 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}.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-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}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 }, { type: i0.Renderer2 }], propDecorators: { columns: [{
type: Input
}], data: [{
type: Input
}], actionsMenu: [{
type: Input
}], pagination: [{
type: Input
}], pageSize: [{
type: Input
}], infiniteScroll: [{
type: Input
}], textLineBreakable: [{
type: Input
}], actionClick: [{
type: Output
}], pageChange: [{
type: Output
}], paginator: [{
type: ViewChild,
args: [MatPaginator]
}], sort: [{
type: ViewChild,
args: [MatSort]
}], rbTableContainer: [{
type: ViewChild,
args: ['rbTableContainer', { static: true }]
}] } });
class RbDynamicButtonDirective {
el;
renderer;
set buttonType(value) {
const validTypes = ['float', 'confirm', 'cancel', 'menuTrigger'];
this._buttonType = validTypes.includes(value) ? value : null;
}
_buttonType = null;
buttonTypes = {
float: {
directive: 'mat-raised-button',
classes: ['mdc-button--raised', 'mat-mdc-raised-button']
},
confirm: {
directive: 'mat-flat-button',
classes: ['mdc-button--unelevated', 'mat-mdc-unelevated-button']
},
cancel: {
directive: 'mat-stroked-button',
classes: ['mdc-button--outlined', 'mat-mdc-outlined-button']
},
menuTrigger: {
directive: 'mat-icon-button',
classes: ['mdc-icon-button', 'mat-mdc-icon-button']
}
};
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
}
ngOnChanges(changes) {
if (changes['buttonType']?.currentValue) {
this.renderButtons(this._buttonType || '');
}
}
renderButtons(key) {
if (key?.trim() && typeof this.buttonTypes[key] === 'object') {
this.renderer.setAttribute(this.el.nativeElement, this.buttonTypes[key].directive, '');
this.buttonTypes[key].classes.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls));
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDynamicButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: RbDynamicButtonDirective, isStandalone: true, selector: "[rbDynamicButton]", inputs: { buttonType: ["rbDynamicButton", "buttonType"] }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDynamicButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[rbDynamicButton]'
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { buttonType: [{
type: Input,
args: ['rbDynamicButton']
}] } });
class RbCrudToolBarComponent {
clientFilterService;
searchPlaceholder = 'Digite para pesquisar...';
buttonSettings = [];
iconButton = 'add';
titleButton = 'Adicionar';
leftButtonSettings = [];
buttonClick = new EventEmitter();
searchText = signal('');
constructor(clientFilterService) {
this.clientFilterService = clientFilterService;
}
onSearchChange(event) {
const value = event.target.value;
this.searchText.set(value);
this.clientFilterService.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: 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,
args: [{ selector: 'rb-crud-tool-bar', standalone: true, imports: [
CommonModule,
MatFormFieldModule,
MatInputModule,
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: [{
type: Input
}], buttonSettings: [{
type: Input
}], iconButton: [{
type: Input
}], titleButton: [{
type: Input
}], leftButtonSettings: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
class RbContentBoxComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbContentBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RbContentBoxComponent, isStandalone: true, selector: "rb-content-box", ngImport: i0, template: "<div class=\"rb-content-box\">\n <ng-content></ng-content>\n</div>\n", styles: [".rb-content-box{border-radius:8px;justify-content:space-between;padding:32px;background:var(--Palettes-Neutral-100, rgb(255, 255, 255));box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbContentBoxComponent, decorators: [{
type: Component,
args: [{ selector: 'rb-content-box', imports: [], template: "<div class=\"rb-content-box\">\n <ng-content></ng-content>\n</div>\n", styles: [".rb-content-box{border-radius:8px;justify-content:space-between;padding:32px;background:var(--Palettes-Neutral-100, rgb(255, 255, 255));box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}\n"] }]
}] });
class RbDialogComponent {
data = inject(MAT_DIALOG_DATA);
dialogRef = inject((MatDialogRef));
onClickButton(action) {
console.log('action', action);
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: 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,
args: [{ selector: 'rb-dialog', imports: [MatDialogModule, MatButtonModule, 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\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" }]
}] });
class RbFilterDropdownComponent {
overlay;
clientFilterService;
viewContainerRef;
parentSelectorId = '#parentDropdownSelector';
options = [];
filterMenu;
overlayRef = null;
trackByFn = (index, item) => index;
searchText = signal('');
constructor(overlay, clientFilterService, viewContainerRef) {
this.overlay = overlay;
this.clientFilterService = clientFilterService;
this.viewContainerRef = viewContainerRef;
}
onSearchChange(event) {
const value = event.target.value;
this.searchText.set(value);
this.clientFilterService.setSearchText(value);
}
openMenu() {
if (this.overlayRef) {
this.closeMenu();
return;
}
const positionStrategy = this.overlay.position()
.flexibleConnectedTo(document.querySelector(this.parentSelectorId || 'button'))
.withPositions([
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
},
]);
this.overlayRef = this.overlay.create({
positionStrategy,
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
scrollStrategy: this.overlay.scrollStrategies.close(),
});
const portal = new TemplatePortal(this.filterMenu, this.viewContainerRef);
this.overlayRef.attach(portal);
this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
}
closeMenu() {
this.overlayRef?.dispose();
this.overlayRef = null;
}
onSelectItem(item) {
console.log('Selected item:', item);
// 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)=\