@rubeusteam/rb-angular-components 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/package.json +6 -6
  2. package/src/lib/styles/README.md +83 -0
  3. package/src/lib/styles/_crud.scss +22 -0
  4. package/src/lib/styles/_dialog.scss +38 -0
  5. package/src/lib/styles/_layout.scss +86 -0
  6. package/src/lib/styles/_typography.scss +62 -0
  7. package/src/lib/styles/index.scss +4 -0
  8. package/fesm2022/rubeusteam-rb-angular-components.mjs +0 -580
  9. package/fesm2022/rubeusteam-rb-angular-components.mjs.map +0 -1
  10. package/index.d.ts +0 -5
  11. package/lib/components/rb-content-box/rb-content-box.component.d.ts +0 -5
  12. package/lib/components/rb-copy-confirm-dialog/rb-copy-confirm-dialog.component.d.ts +0 -14
  13. package/lib/components/rb-crud/rb-crud.component.d.ts +0 -34
  14. package/lib/components/rb-crud-tool-bar/rb-crud-tool-bar.component.d.ts +0 -19
  15. package/lib/components/rb-dialog/rb-dialog.component.d.ts +0 -10
  16. package/lib/components/rb-filter-dropdown/rb-filter-dropdown.component.d.ts +0 -23
  17. package/lib/components/rb-filter-panel/rb-filter-panel.component.d.ts +0 -12
  18. package/lib/directives/rb-dynamic-button/rb-dynamic-button.directive.d.ts +0 -17
  19. package/lib/i18n/paginator-ptbr-intl/paginator-ptbr-intl.service.d.ts +0 -12
  20. package/lib/interfaces/button.interface.d.ts +0 -15
  21. package/lib/interfaces/rb-crud.interface.d.ts +0 -11
  22. package/lib/interfaces/rb-dialog.interface.d.ts +0 -16
  23. package/lib/interfaces/rb-filter.interface.d.ts +0 -11
  24. package/lib/pipes/rb-custom/rb-custom.pipe.d.ts +0 -20
  25. package/lib/services/filter/client-filter.service.d.ts +0 -10
  26. package/public-api.d.ts +0 -13
@@ -1,580 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Pipe, Injectable, signal, EventEmitter, effect, Component, Input, Output, ViewChild, Directive, inject } from '@angular/core';
3
- import * as i2 from '@angular/material/table';
4
- import { MatTableDataSource, MatTableModule } from '@angular/material/table';
5
- import * as i5$1 from '@angular/material/input';
6
- import { MatInputModule } from '@angular/material/input';
7
- import * as i4 from '@angular/material/paginator';
8
- import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
9
- import * as i5 from '@angular/material/sort';
10
- import { MatSort, MatSortModule } from '@angular/material/sort';
11
- import * as i3$1 from '@angular/common';
12
- import { CommonModule } from '@angular/common';
13
- import * as i3 from '@angular/material/menu';
14
- import { MatMenuModule } from '@angular/material/menu';
15
- import * as i4$1 from '@angular/material/icon';
16
- import { MatIconModule } from '@angular/material/icon';
17
- import * as i2$1 from '@angular/material/button';
18
- import { MatButtonModule } from '@angular/material/button';
19
- import * as i2$2 from '@angular/material/form-field';
20
- import { MatFormFieldModule } from '@angular/material/form-field';
21
- import * as i1 from '@angular/material/dialog';
22
- import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
23
- import * as i1$1 from '@angular/cdk/overlay';
24
- import { OverlayModule } from '@angular/cdk/overlay';
25
- import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
26
- import * as i1$2 from '@angular/forms';
27
- import { Validators, ReactiveFormsModule } from '@angular/forms';
28
-
29
- class RbCustomPipe {
30
- transform(value, type) {
31
- switch (type) {
32
- case 'date':
33
- return this.dateTransform(value);
34
- case 'datetime':
35
- return this.dateTimeTransform(value);
36
- case 'currency':
37
- return this.currencyTransform(value);
38
- case 'cpf':
39
- return this.cpfTransform(value);
40
- case 'cnpj':
41
- return this.cnpjTransform(value);
42
- case 'phone':
43
- return this.phoneTransform(value);
44
- case 'cep':
45
- return this.cepTransform(value);
46
- case 'mask':
47
- return this.maskTransform(value);
48
- case 'relativeTime':
49
- return this.relativeTimeTransform(value);
50
- case 'lastModifiedBy':
51
- return this.lastModifiedTransform(value);
52
- default:
53
- return value;
54
- }
55
- }
56
- dateTransform(value, format) {
57
- if (!value || typeof value !== 'string')
58
- return '';
59
- const isoString = value.includes(' ')
60
- ? value.replace(' ', 'T')
61
- : `${value}T00:00:00`;
62
- const date = new Date(isoString);
63
- if (isNaN(date.getTime()))
64
- return '';
65
- return date.toLocaleDateString('pt-BR', {
66
- timeZone: 'America/Sao_Paulo'
67
- });
68
- }
69
- dateTimeTransform(value) {
70
- if (!value || typeof value !== 'string')
71
- return '';
72
- const isoString = value.includes(' ')
73
- ? value.replace(' ', 'T')
74
- : `${value}T00:00:00`;
75
- const date = new Date(isoString);
76
- if (isNaN(date.getTime()))
77
- return '';
78
- const datePart = new Intl.DateTimeFormat('pt-BR', {
79
- day: '2-digit',
80
- month: '2-digit',
81
- year: 'numeric',
82
- timeZone: 'America/Sao_Paulo'
83
- }).format(date);
84
- const timePart = new Intl.DateTimeFormat('pt-BR', {
85
- hour: '2-digit',
86
- minute: '2-digit',
87
- hour12: false,
88
- timeZone: 'America/Sao_Paulo'
89
- }).format(date);
90
- return `${datePart} às ${timePart}`;
91
- }
92
- currencyTransform(value) {
93
- if (!value)
94
- return '';
95
- return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
96
- }
97
- cpfTransform(value) {
98
- if (!value)
99
- return '';
100
- return value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
101
- }
102
- cnpjTransform(value) {
103
- if (!value)
104
- return '';
105
- return value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5");
106
- }
107
- phoneTransform(value) {
108
- if (!value)
109
- return '';
110
- return value.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
111
- }
112
- cepTransform(value) {
113
- if (!value)
114
- return '';
115
- return value.replace(/(\d{5})(\d{3})/, "$1-$2");
116
- }
117
- maskTransform(value) {
118
- if (!value)
119
- return '';
120
- return '*'.repeat(value.toString().length);
121
- }
122
- relativeTimeTransform(value) {
123
- if (!value)
124
- return '';
125
- const date = new Date(value);
126
- const now = new Date();
127
- const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
128
- switch (true) {
129
- case diff < 60:
130
- return `${diff} segundos atrás`;
131
- case diff < 3600:
132
- return `${Math.floor(diff / 60)} minutos atrás`;
133
- case diff < 86400:
134
- return `${Math.floor(diff / 3600)} horas atrás`;
135
- case diff < 2592000:
136
- return `${Math.floor(diff / 86400)} dias atrás`;
137
- case diff < 31536000:
138
- return `${Math.floor(diff / 2592000)} meses atrás`;
139
- default:
140
- return `${Math.floor(diff / 31536000)} anos atrás`;
141
- }
142
- }
143
- lastModifiedTransform(value) {
144
- if (!value || !value.date)
145
- return '';
146
- const formattedDate = new Intl.DateTimeFormat('pt-BR', {
147
- dateStyle: 'short',
148
- // timeStyle: 'short',
149
- timeZone: 'America/Sao_Paulo'
150
- }).format(new Date(value.date));
151
- if (!value.author) {
152
- return `${formattedDate}`;
153
- }
154
- return `${formattedDate} por ${value.author}`;
155
- }
156
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
157
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, isStandalone: true, name: "rbCustomPipe" });
158
- }
159
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, decorators: [{
160
- type: Pipe,
161
- args: [{
162
- name: 'rbCustomPipe',
163
- standalone: true
164
- }]
165
- }] });
166
-
167
- class PaginatorPtbrIntlService extends MatPaginatorIntl {
168
- itemsPerPageLabel = 'Itens por página:';
169
- nextPageLabel = 'Próxima';
170
- previousPageLabel = 'Anterior';
171
- firstPageLabel = 'Primeira página';
172
- lastPageLabel = 'Última página';
173
- getRangeLabel = (page, pageSize, length) => {
174
- if (length === 0) {
175
- return `Página 0 de ${length}`;
176
- }
177
- const start = page * pageSize + 1;
178
- const totalPages = ((length / pageSize) + (length % pageSize > 0 ? 1 : 0)).toFixed(0);
179
- return `Página ${start} de ${totalPages}`;
180
- };
181
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
182
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, providedIn: 'root' });
183
- }
184
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, decorators: [{
185
- type: Injectable,
186
- args: [{
187
- providedIn: 'root'
188
- }]
189
- }] });
190
-
191
- class ClientFilterService {
192
- searchText = signal('');
193
- setSearchText(text) {
194
- this.searchText.set(this.normalizeText(text));
195
- }
196
- normalizeText(text) {
197
- return text
198
- .normalize('NFD')
199
- .replace(/[\u0300-\u036f]/g, '')
200
- .toLowerCase()
201
- .trim();
202
- }
203
- getSearchText() {
204
- return this.searchText;
205
- }
206
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
207
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, providedIn: 'root' });
208
- }
209
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, decorators: [{
210
- type: Injectable,
211
- args: [{
212
- providedIn: 'root'
213
- }]
214
- }] });
215
-
216
- class RbCrudComponent {
217
- clientFilterService;
218
- columns = [];
219
- data = [];
220
- actionsMenu = [];
221
- pagination = true;
222
- pageSize = 10;
223
- infiniteScroll = false;
224
- textLineBreakable = false;
225
- actionClick = new EventEmitter();
226
- // @Output() filterChange = new EventEmitter<any>();
227
- pageChange = new EventEmitter();
228
- paginator;
229
- sort;
230
- displayedColumns = [];
231
- dataSource = new MatTableDataSource(this.data);
232
- filterText;
233
- constructor(clientFilterService) {
234
- this.clientFilterService = clientFilterService;
235
- this.filterText = this.clientFilterService.getSearchText();
236
- effect(() => {
237
- this.applyFilter();
238
- });
239
- }
240
- ngAfterViewInit() {
241
- this.dataSource.paginator = this.paginator;
242
- this.dataSource.sort = this.sort;
243
- this.defineSortRule();
244
- }
245
- ngOnChanges() {
246
- this.dataSource.data = this.data;
247
- this.displayedColumns = this.columns.map(col => col.key);
248
- if (this.actionsMenu.length) {
249
- this.displayedColumns.push('actions');
250
- }
251
- }
252
- defineSortRule() {
253
- this.dataSource.sortingDataAccessor = (item, property) => {
254
- if (item[property]?.date) {
255
- return new Date(item[property]?.date || 0).getTime();
256
- }
257
- return item[property];
258
- };
259
- }
260
- onActionClick(action, row) {
261
- this.actionClick.emit({ action: action.action, row });
262
- }
263
- onClickCell(action, row) {
264
- this.actionClick.emit({ action: action, row });
265
- }
266
- // applyFilter() {
267
- // this.dataSource.filter = this.filterText().trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
268
- // }
269
- applyFilter() {
270
- this.dataSource.filterPredicate = (data, filter) => {
271
- const accumulator = (currentTerm, key) => {
272
- const value = data[key];
273
- return currentTerm + ' ' + (typeof value === 'string' ? this.clientFilterService.normalizeText(value) : '');
274
- };
275
- const dataStr = Object.keys(data).reduce(accumulator, '').trim();
276
- return dataStr.includes(this.clientFilterService.normalizeText(filter));
277
- };
278
- this.dataSource.filter = this.filterText();
279
- }
280
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, deps: [{ token: ClientFilterService }], target: i0.ɵɵFactoryTarget.Component });
281
- 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: [
282
- { provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
283
- ], 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\">\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}\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" }] });
284
- }
285
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, decorators: [{
286
- type: Component,
287
- args: [{ selector: 'rb-crud', standalone: true, imports: [
288
- CommonModule,
289
- MatTableModule,
290
- MatMenuModule,
291
- MatInputModule,
292
- MatPaginatorModule,
293
- MatSortModule,
294
- MatIconModule,
295
- MatButtonModule,
296
- RbCustomPipe,
297
- ], providers: [
298
- { provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
299
- ], 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\">\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}\n"] }]
300
- }], ctorParameters: () => [{ type: ClientFilterService }], propDecorators: { columns: [{
301
- type: Input
302
- }], data: [{
303
- type: Input
304
- }], actionsMenu: [{
305
- type: Input
306
- }], pagination: [{
307
- type: Input
308
- }], pageSize: [{
309
- type: Input
310
- }], infiniteScroll: [{
311
- type: Input
312
- }], textLineBreakable: [{
313
- type: Input
314
- }], actionClick: [{
315
- type: Output
316
- }], pageChange: [{
317
- type: Output
318
- }], paginator: [{
319
- type: ViewChild,
320
- args: [MatPaginator]
321
- }], sort: [{
322
- type: ViewChild,
323
- args: [MatSort]
324
- }] } });
325
-
326
- class RbDynamicButtonDirective {
327
- el;
328
- renderer;
329
- set buttonType(value) {
330
- const validTypes = ['float', 'confirm', 'cancel', 'menuTrigger'];
331
- this._buttonType = validTypes.includes(value) ? value : null;
332
- }
333
- _buttonType = null;
334
- buttonTypes = {
335
- float: {
336
- directive: 'mat-raised-button',
337
- classes: ['mdc-button--raised', 'mat-mdc-raised-button']
338
- },
339
- confirm: {
340
- directive: 'mat-flat-button',
341
- classes: ['mdc-button--unelevated', 'mat-mdc-unelevated-button']
342
- },
343
- cancel: {
344
- directive: 'mat-stroked-button',
345
- classes: ['mdc-button--outlined', 'mat-mdc-outlined-button']
346
- },
347
- menuTrigger: {
348
- directive: 'mat-icon-button',
349
- classes: ['mdc-icon-button', 'mat-mdc-icon-button']
350
- }
351
- };
352
- constructor(el, renderer) {
353
- this.el = el;
354
- this.renderer = renderer;
355
- }
356
- ngOnChanges(changes) {
357
- if (changes['buttonType']?.currentValue) {
358
- this.renderButtons(this._buttonType || '');
359
- }
360
- }
361
- renderButtons(key) {
362
- if (key?.trim() && typeof this.buttonTypes[key] === 'object') {
363
- this.renderer.setAttribute(this.el.nativeElement, this.buttonTypes[key].directive, '');
364
- this.buttonTypes[key].classes.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls));
365
- }
366
- }
367
- 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 });
368
- 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 });
369
- }
370
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDynamicButtonDirective, decorators: [{
371
- type: Directive,
372
- args: [{
373
- selector: '[rbDynamicButton]'
374
- }]
375
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { buttonType: [{
376
- type: Input,
377
- args: ['rbDynamicButton']
378
- }] } });
379
-
380
- class RbCrudToolBarComponent {
381
- clientFilterService;
382
- searchPlaceholder = 'Digite para pesquisar...';
383
- buttonSettings = [];
384
- iconButton = 'add';
385
- titleButton = 'Adicionar';
386
- leftButtonSettings = [];
387
- buttonClick = new EventEmitter();
388
- searchText = signal('');
389
- constructor(clientFilterService) {
390
- this.clientFilterService = clientFilterService;
391
- }
392
- onSearchChange(event) {
393
- const value = event.target.value;
394
- this.searchText.set(value);
395
- this.clientFilterService.setSearchText(value);
396
- }
397
- onClickButton(action) {
398
- this.buttonClick.emit(action);
399
- }
400
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, deps: [{ token: ClientFilterService }], target: i0.ɵɵFactoryTarget.Component });
401
- 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"] }] });
402
- }
403
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, decorators: [{
404
- type: Component,
405
- args: [{ selector: 'rb-crud-tool-bar', standalone: true, imports: [
406
- CommonModule,
407
- MatFormFieldModule,
408
- MatInputModule,
409
- MatIconModule,
410
- MatButtonModule,
411
- RbDynamicButtonDirective,
412
- ], 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"] }]
413
- }], ctorParameters: () => [{ type: ClientFilterService }], propDecorators: { searchPlaceholder: [{
414
- type: Input
415
- }], buttonSettings: [{
416
- type: Input
417
- }], iconButton: [{
418
- type: Input
419
- }], titleButton: [{
420
- type: Input
421
- }], leftButtonSettings: [{
422
- type: Input
423
- }], buttonClick: [{
424
- type: Output
425
- }] } });
426
-
427
- class RbContentBoxComponent {
428
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbContentBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
429
- 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"] });
430
- }
431
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbContentBoxComponent, decorators: [{
432
- type: Component,
433
- 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"] }]
434
- }] });
435
-
436
- class RbDialogComponent {
437
- data = inject(MAT_DIALOG_DATA);
438
- dialogRef = inject((MatDialogRef));
439
- onClickButton(action) {
440
- console.log('action', action);
441
- this.dialogRef.close(action);
442
- }
443
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
444
- 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 [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"] }] });
445
- }
446
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, decorators: [{
447
- type: Component,
448
- 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 [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" }]
449
- }] });
450
-
451
- class RbFilterDropdownComponent {
452
- overlay;
453
- clientFilterService;
454
- viewContainerRef;
455
- parentSelectorId = '#parentDropdownSelector';
456
- options = [];
457
- filterMenu;
458
- overlayRef = null;
459
- trackByFn = (index, item) => index;
460
- searchText = signal('');
461
- constructor(overlay, clientFilterService, viewContainerRef) {
462
- this.overlay = overlay;
463
- this.clientFilterService = clientFilterService;
464
- this.viewContainerRef = viewContainerRef;
465
- }
466
- onSearchChange(event) {
467
- const value = event.target.value;
468
- this.searchText.set(value);
469
- this.clientFilterService.setSearchText(value);
470
- }
471
- openMenu() {
472
- if (this.overlayRef) {
473
- this.closeMenu();
474
- return;
475
- }
476
- const positionStrategy = this.overlay.position()
477
- .flexibleConnectedTo(document.querySelector(this.parentSelectorId || 'button'))
478
- .withPositions([
479
- {
480
- originX: 'start',
481
- originY: 'bottom',
482
- overlayX: 'start',
483
- overlayY: 'top',
484
- },
485
- ]);
486
- this.overlayRef = this.overlay.create({
487
- positionStrategy,
488
- hasBackdrop: true,
489
- backdropClass: 'cdk-overlay-transparent-backdrop',
490
- scrollStrategy: this.overlay.scrollStrategies.close(),
491
- });
492
- const portal = new TemplatePortal(this.filterMenu, this.viewContainerRef);
493
- this.overlayRef.attach(portal);
494
- this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
495
- }
496
- closeMenu() {
497
- this.overlayRef?.dispose();
498
- this.overlayRef = null;
499
- }
500
- onSelectItem(item) {
501
- console.log('Selected item:', item);
502
- // this.filterItems = this.options.filter((item) => item.includes(this.searchText()));
503
- // this.clientFilterService.setFilterItems(this.filterItems);
504
- }
505
- 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 });
506
- 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"] }] });
507
- }
508
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, decorators: [{
509
- type: Component,
510
- 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"] }]
511
- }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: ClientFilterService }, { type: i0.ViewContainerRef }], propDecorators: { parentSelectorId: [{
512
- type: Input
513
- }], options: [{
514
- type: Input
515
- }], filterMenu: [{
516
- type: ViewChild,
517
- args: ['filterMenu']
518
- }] } });
519
-
520
- class RbFilterPanelComponent {
521
- dropdown;
522
- data = inject(MAT_DIALOG_DATA);
523
- constructor() { }
524
- applyFilter() {
525
- console.log('applyFilter');
526
- }
527
- openMenu() {
528
- this.dropdown.openMenu();
529
- }
530
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
531
- 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"] }] });
532
- }
533
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, decorators: [{
534
- type: Component,
535
- 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" }]
536
- }], ctorParameters: () => [], propDecorators: { dropdown: [{
537
- type: ViewChild,
538
- args: [RbFilterDropdownComponent]
539
- }] } });
540
-
541
- class RbCopyConfirmDialogComponent {
542
- fb;
543
- data = inject(MAT_DIALOG_DATA);
544
- dialogRef = inject((MatDialogRef));
545
- formGroup;
546
- constructor(fb) {
547
- this.fb = fb;
548
- this.formGroup = this.fb.group({
549
- fieldValue: [this.data?.fieldValueDafault, Validators.required]
550
- });
551
- }
552
- confirm() {
553
- this.dialogRef.close(this.formGroup.value);
554
- }
555
- 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 });
556
- 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 type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"Duplicar\"\n aria-label=\"Duplicar\"\n class=\"primary\"\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"] }] });
557
- }
558
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, decorators: [{
559
- type: Component,
560
- 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 type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"Duplicar\"\n aria-label=\"Duplicar\"\n class=\"primary\"\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" }]
561
- }], ctorParameters: () => [{ type: i1$2.FormBuilder }] });
562
-
563
- // export interface CrudFilter {
564
- // key: string;
565
- // label: string;
566
- // type: 'text' | 'select' | 'date';
567
- // options?: any[]; // Para selects
568
- // }
569
-
570
- /*
571
- * Public API Surface of rb-angular-components
572
- */
573
- /* Components */
574
-
575
- /**
576
- * Generated bundle index. Do not edit.
577
- */
578
-
579
- export { RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
580
- //# sourceMappingURL=rubeusteam-rb-angular-components.mjs.map