@rubeusteam/rb-angular-components 0.0.0-dev.0

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 (35) hide show
  1. package/README.md +119 -0
  2. package/fesm2022/rubeusteam-rb-angular-components.mjs +851 -0
  3. package/fesm2022/rubeusteam-rb-angular-components.mjs.map +1 -0
  4. package/index.d.ts +5 -0
  5. package/lib/components/rb-change-log-dialog/rb-change-log-dialog.component.d.ts +9 -0
  6. package/lib/components/rb-columns-sort-setting/rb-columns-sort-setting.component.d.ts +31 -0
  7. package/lib/components/rb-content-box/rb-content-box.component.d.ts +5 -0
  8. package/lib/components/rb-copy-confirm-dialog/rb-copy-confirm-dialog.component.d.ts +14 -0
  9. package/lib/components/rb-crud/helpers/resolve-actions.helper.d.ts +6 -0
  10. package/lib/components/rb-crud/rb-crud.component.d.ts +56 -0
  11. package/lib/components/rb-crud-tool-bar/rb-crud-tool-bar.component.d.ts +19 -0
  12. package/lib/components/rb-dialog/rb-dialog.component.d.ts +10 -0
  13. package/lib/components/rb-filter-dropdown/rb-filter-dropdown.component.d.ts +23 -0
  14. package/lib/components/rb-filter-panel/rb-filter-panel.component.d.ts +12 -0
  15. package/lib/directives/rb-dynamic-button/rb-dynamic-button.directive.d.ts +17 -0
  16. package/lib/i18n/paginator-ptbr-intl/paginator-ptbr-intl.service.d.ts +12 -0
  17. package/lib/interfaces/button.interface.d.ts +25 -0
  18. package/lib/interfaces/rb-change-log-dialog.interface.d.ts +5 -0
  19. package/lib/interfaces/rb-conditional-class.interface.d.ts +9 -0
  20. package/lib/interfaces/rb-crud.interface.d.ts +19 -0
  21. package/lib/interfaces/rb-dialog.interface.d.ts +17 -0
  22. package/lib/interfaces/rb-filter.interface.d.ts +11 -0
  23. package/lib/pipes/is-array.pipe.d.ts +7 -0
  24. package/lib/pipes/rb-conditional-class/rb-conditional-class.pipe.d.ts +9 -0
  25. package/lib/pipes/rb-custom/rb-custom.pipe.d.ts +20 -0
  26. package/lib/services/filter/client-filter.service.d.ts +10 -0
  27. package/lib/services/rb-show-index-crud-service/rb-show-index-crud.service.d.ts +8 -0
  28. package/package.json +53 -0
  29. package/public-api.d.ts +19 -0
  30. package/src/lib/styles/README.md +83 -0
  31. package/src/lib/styles/_crud.scss +34 -0
  32. package/src/lib/styles/_dialog.scss +59 -0
  33. package/src/lib/styles/_layout.scss +86 -0
  34. package/src/lib/styles/_typography.scss +62 -0
  35. package/src/lib/styles/index.scss +5 -0
@@ -0,0 +1,851 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Pipe, Injectable, signal, inject, EventEmitter, effect, Component, Input, Output, ViewChild, Directive } from '@angular/core';
3
+ import * as i3 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 i5 from '@angular/material/paginator';
8
+ import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
9
+ import * as i6 from '@angular/material/sort';
10
+ import { MatSort, MatSortModule } from '@angular/material/sort';
11
+ import * as i2 from '@angular/common';
12
+ import { CommonModule } from '@angular/common';
13
+ import * as i4 from '@angular/material/menu';
14
+ import { MatMenuModule } from '@angular/material/menu';
15
+ import * as i3$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 i1 from '@angular/material/form-field';
20
+ import { MatFormFieldModule } from '@angular/material/form-field';
21
+ import * as i1$1 from '@angular/material/dialog';
22
+ import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
23
+ import * as i1$2 from '@angular/cdk/overlay';
24
+ import { OverlayModule } from '@angular/cdk/overlay';
25
+ import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
26
+ import * as i1$3 from '@angular/forms';
27
+ import { Validators, ReactiveFormsModule } from '@angular/forms';
28
+ import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
29
+
30
+ class RbCustomPipe {
31
+ transform(value, type) {
32
+ switch (type) {
33
+ case 'date':
34
+ return this.dateTransform(value);
35
+ case 'datetime':
36
+ return this.dateTimeTransform(value);
37
+ case 'currency':
38
+ return this.currencyTransform(value);
39
+ case 'cpf':
40
+ return this.cpfTransform(value);
41
+ case 'cnpj':
42
+ return this.cnpjTransform(value);
43
+ case 'phone':
44
+ return this.phoneTransform(value);
45
+ case 'cep':
46
+ return this.cepTransform(value);
47
+ case 'mask':
48
+ return this.maskTransform(value);
49
+ case 'relativeTime':
50
+ return this.relativeTimeTransform(value);
51
+ case 'lastModifiedBy':
52
+ return this.lastModifiedTransform(value);
53
+ default:
54
+ return value;
55
+ }
56
+ }
57
+ dateTransform(value, format) {
58
+ if (!value || typeof value !== 'string')
59
+ return '';
60
+ const isoString = value.includes(' ')
61
+ ? value.replace(' ', 'T')
62
+ : `${value}T00:00:00`;
63
+ const date = new Date(isoString);
64
+ if (isNaN(date.getTime()))
65
+ return '';
66
+ return date.toLocaleDateString('pt-BR', {
67
+ timeZone: 'America/Sao_Paulo'
68
+ });
69
+ }
70
+ dateTimeTransform(value) {
71
+ if (!value || typeof value !== 'string')
72
+ return '';
73
+ const isoString = value.includes(' ')
74
+ ? value.replace(' ', 'T')
75
+ : `${value}T00:00:00`;
76
+ const date = new Date(isoString);
77
+ if (isNaN(date.getTime()))
78
+ return '';
79
+ const datePart = new Intl.DateTimeFormat('pt-BR', {
80
+ day: '2-digit',
81
+ month: '2-digit',
82
+ year: 'numeric',
83
+ timeZone: 'America/Sao_Paulo'
84
+ }).format(date);
85
+ const timePart = new Intl.DateTimeFormat('pt-BR', {
86
+ hour: '2-digit',
87
+ minute: '2-digit',
88
+ hour12: false,
89
+ timeZone: 'America/Sao_Paulo'
90
+ }).format(date);
91
+ return `${datePart} às ${timePart}`;
92
+ }
93
+ currencyTransform(value) {
94
+ if (!value)
95
+ return '';
96
+ return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
97
+ }
98
+ cpfTransform(value) {
99
+ if (!value)
100
+ return '';
101
+ return value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
102
+ }
103
+ cnpjTransform(value) {
104
+ if (!value)
105
+ return '';
106
+ return value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5");
107
+ }
108
+ phoneTransform(value) {
109
+ if (!value)
110
+ return '';
111
+ return value.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
112
+ }
113
+ cepTransform(value) {
114
+ if (!value)
115
+ return '';
116
+ return value.replace(/(\d{5})(\d{3})/, "$1-$2");
117
+ }
118
+ maskTransform(value) {
119
+ if (!value)
120
+ return '';
121
+ return '*'.repeat(value.toString().length);
122
+ }
123
+ relativeTimeTransform(value) {
124
+ if (!value)
125
+ return '';
126
+ const date = new Date(value);
127
+ const now = new Date();
128
+ const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
129
+ switch (true) {
130
+ case diff < 60:
131
+ return `${diff} segundos atrás`;
132
+ case diff < 3600:
133
+ return `${Math.floor(diff / 60)} minutos atrás`;
134
+ case diff < 86400:
135
+ return `${Math.floor(diff / 3600)} horas atrás`;
136
+ case diff < 2592000:
137
+ return `${Math.floor(diff / 86400)} dias atrás`;
138
+ case diff < 31536000:
139
+ return `${Math.floor(diff / 2592000)} meses atrás`;
140
+ default:
141
+ return `${Math.floor(diff / 31536000)} anos atrás`;
142
+ }
143
+ }
144
+ lastModifiedTransform(value) {
145
+ if (!value || !value.date)
146
+ return '';
147
+ const formattedDate = new Intl.DateTimeFormat('pt-BR', {
148
+ dateStyle: 'short',
149
+ // timeStyle: 'short',
150
+ timeZone: 'America/Sao_Paulo'
151
+ }).format(new Date(value.date));
152
+ if (!value.author) {
153
+ return `${formattedDate}`;
154
+ }
155
+ return `${formattedDate} por ${value.author}`;
156
+ }
157
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
158
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, isStandalone: true, name: "rbCustomPipe" });
159
+ }
160
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCustomPipe, decorators: [{
161
+ type: Pipe,
162
+ args: [{
163
+ name: 'rbCustomPipe',
164
+ standalone: true
165
+ }]
166
+ }] });
167
+
168
+ class RbConditionalClassPipe {
169
+ transform(cellValue, columnKey, rules) {
170
+ const config = rules.find(r => r.key === columnKey);
171
+ if (!config || !Array.isArray(config.conditions))
172
+ return '';
173
+ return config.conditions
174
+ .filter(condition => this.evaluateCondition(cellValue, condition))
175
+ .map(condition => condition.class)
176
+ .join(' ');
177
+ }
178
+ evaluateCondition(value, condition) {
179
+ const { operator, value: expected } = condition;
180
+ switch (operator) {
181
+ case '==': return value == expected;
182
+ case '===': return value === expected;
183
+ case '!=': return value != expected;
184
+ case '!==': return value !== expected;
185
+ case '<': return value < expected;
186
+ case '>': return value > expected;
187
+ case '<=': return value <= expected;
188
+ case '>=': return value >= expected;
189
+ default:
190
+ console.warn(`Operador '${operator}' não suportado.`);
191
+ return false;
192
+ }
193
+ }
194
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
195
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, isStandalone: true, name: "rbConditionalClass" });
196
+ }
197
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, decorators: [{
198
+ type: Pipe,
199
+ args: [{
200
+ name: 'rbConditionalClass',
201
+ standalone: true,
202
+ pure: true
203
+ }]
204
+ }] });
205
+
206
+ class PaginatorPtbrIntlService extends MatPaginatorIntl {
207
+ itemsPerPageLabel = 'Itens por página:';
208
+ nextPageLabel = 'Próxima';
209
+ previousPageLabel = 'Anterior';
210
+ firstPageLabel = 'Primeira página';
211
+ lastPageLabel = 'Última página';
212
+ getRangeLabel = (page, pageSize, length) => {
213
+ if (length === 0 || pageSize === 0) {
214
+ return `Página 0 de 0`;
215
+ }
216
+ const totalPages = Math.ceil(length / pageSize);
217
+ const currentPage = page + 1;
218
+ return `Página ${currentPage} de ${totalPages}`;
219
+ };
220
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
221
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, providedIn: 'root' });
222
+ }
223
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PaginatorPtbrIntlService, decorators: [{
224
+ type: Injectable,
225
+ args: [{
226
+ providedIn: 'root'
227
+ }]
228
+ }] });
229
+
230
+ class ClientFilterService {
231
+ searchText = signal('');
232
+ setSearchText(text) {
233
+ this.searchText.set(this.normalizeText(text));
234
+ }
235
+ normalizeText(text) {
236
+ return text
237
+ .normalize('NFD')
238
+ .replace(/[\u0300-\u036f]/g, '')
239
+ .toLowerCase()
240
+ .trim();
241
+ }
242
+ getSearchText() {
243
+ return this.searchText;
244
+ }
245
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
246
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, providedIn: 'root' });
247
+ }
248
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ClientFilterService, decorators: [{
249
+ type: Injectable,
250
+ args: [{
251
+ providedIn: 'root'
252
+ }]
253
+ }] });
254
+
255
+ function resolveActionsForRow(row, actionsMenu) {
256
+ const resolvedActions = actionsMenu.map(action => {
257
+ const match = action.conditionalSettings?.find(s => row[s.key] === s.expectedValue);
258
+ return {
259
+ ...action,
260
+ label: match?.label ?? action.label,
261
+ icon: match?.icon ?? action.icon
262
+ };
263
+ });
264
+ return {
265
+ ...row,
266
+ resolvedActions
267
+ };
268
+ }
269
+ function resolveActionsForData(data, actionsMenu) {
270
+ return data.map(row => resolveActionsForRow(row, actionsMenu));
271
+ }
272
+
273
+ class RbShowIndexCrudService {
274
+ showIndex = signal(false);
275
+ setShowIndex(value) {
276
+ this.showIndex.set(value);
277
+ }
278
+ toggle() {
279
+ this.showIndex.update(value => !value);
280
+ }
281
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
282
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, providedIn: 'root' });
283
+ }
284
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, decorators: [{
285
+ type: Injectable,
286
+ args: [{
287
+ providedIn: 'root'
288
+ }]
289
+ }] });
290
+
291
+ class RbCrudComponent {
292
+ clientFilterService;
293
+ renderer;
294
+ columns = [];
295
+ data = [];
296
+ actionsMenu = [];
297
+ conditionalClasses = [];
298
+ pagination = true;
299
+ pageSize = 10;
300
+ infiniteScroll = false;
301
+ textLineBreakable = false;
302
+ emptyMessageTherm = '';
303
+ emptyMessageSentence = 'um novo cadastro';
304
+ emptyLinkAction = '';
305
+ showIndexService = inject(RbShowIndexCrudService);
306
+ showIndex = this.showIndexService.showIndex;
307
+ actionClick = new EventEmitter();
308
+ // @Output() filterChange = new EventEmitter<any>();
309
+ pageChange = new EventEmitter();
310
+ paginator;
311
+ sort;
312
+ rbTableContainer;
313
+ displayedColumns = [];
314
+ dataSource;
315
+ filterText;
316
+ isOverflowing = false;
317
+ displayedActionsMenu = [];
318
+ selectedRow = null;
319
+ renderingProgressive = false;
320
+ THRESHOLD = 200;
321
+ searchTherm = '';
322
+ constructor(clientFilterService, renderer) {
323
+ this.clientFilterService = clientFilterService;
324
+ this.renderer = renderer;
325
+ console.time('constructor');
326
+ this.dataSource = new MatTableDataSource(this.data);
327
+ this.filterText = this.clientFilterService.getSearchText();
328
+ effect(() => {
329
+ this.applyFilter();
330
+ console.log('???? Constructor RB-CRUD effect', Date());
331
+ });
332
+ console.log('-->>> Constructor RB-CRUD finish', Date());
333
+ }
334
+ ngAfterViewInit() {
335
+ console.timeEnd('onchanges');
336
+ // console.timeEnd('render');
337
+ console.log('===== After View', Date());
338
+ this.dataSource.paginator = this.paginator;
339
+ this.dataSource.sort = this.sort;
340
+ this.defineSortRule();
341
+ this.checkOverflow();
342
+ window.addEventListener('resize', () => this.checkOverflow());
343
+ }
344
+ checkOverflow() {
345
+ const el = this.rbTableContainer.nativeElement;
346
+ const isOverflowing = el.scrollWidth > el.clientWidth;
347
+ this.isOverflowing = isOverflowing;
348
+ if (isOverflowing) {
349
+ this.renderer.addClass(el, 'is-overflowing');
350
+ }
351
+ else {
352
+ this.renderer.removeClass(el, 'is-overflowing');
353
+ }
354
+ }
355
+ ngOnChanges() {
356
+ console.time('onchanges');
357
+ console.timeEnd('constructor');
358
+ this.displayedColumns = this.columns.map(col => col.key);
359
+ if (this.actionsMenu.length) {
360
+ this.displayedColumns.push('actions');
361
+ }
362
+ // this.dataSource = new MatTableDataSource(this.data);
363
+ this.dataSource.data = this.data;
364
+ if (this.paginator) {
365
+ this.dataSource.paginator = this.paginator;
366
+ }
367
+ if (this.sort) {
368
+ this.dataSource.sort = this.sort;
369
+ }
370
+ }
371
+ renderFirstPage(processedData) {
372
+ const firstPage = processedData.slice(0, this.pageSize);
373
+ this.dataSource.data = firstPage;
374
+ }
375
+ loadFullData(processedData) {
376
+ this.dataSource.data = processedData;
377
+ this.renderingProgressive = false;
378
+ }
379
+ defineSortRule() {
380
+ this.dataSource.sortingDataAccessor = (item, property) => {
381
+ if (item[property]?.date) {
382
+ return new Date(item[property]?.date || 0).getTime();
383
+ }
384
+ return item[property];
385
+ };
386
+ }
387
+ onActionClick(action, row) {
388
+ this.actionClick.emit({ action: action.action, row });
389
+ }
390
+ onClickCell(action, row) {
391
+ this.actionClick.emit({ action: action, row });
392
+ }
393
+ onClickLink() {
394
+ this.actionClick.emit({ action: this.emptyLinkAction });
395
+ }
396
+ applyFilter() {
397
+ this.dataSource.filterPredicate = (data, filter) => {
398
+ const accumulator = (currentTerm, key) => {
399
+ const value = data[key];
400
+ return currentTerm + ' ' + (typeof value === 'string' ? this.clientFilterService.normalizeText(value) : '');
401
+ };
402
+ const dataStr = Object.keys(data).reduce(accumulator, '').trim();
403
+ this.searchTherm = filter;
404
+ return dataStr.includes(this.clientFilterService.normalizeText(filter));
405
+ };
406
+ this.dataSource.filter = this.filterText();
407
+ }
408
+ openMenu(row) {
409
+ this.selectedRow = row;
410
+ this.displayedActionsMenu = resolveActionsForRow(row, this.actionsMenu).resolvedActions;
411
+ }
412
+ setSearchText(text) {
413
+ this.clientFilterService.setSearchText(text);
414
+ }
415
+ 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 });
416
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudComponent, isStandalone: true, selector: "rb-crud", inputs: { columns: "columns", data: "data", actionsMenu: "actionsMenu", conditionalClasses: "conditionalClasses", pagination: "pagination", pageSize: "pageSize", infiniteScroll: "infiniteScroll", textLineBreakable: "textLineBreakable", emptyMessageTherm: "emptyMessageTherm", emptyMessageSentence: "emptyMessageSentence", emptyLinkAction: "emptyLinkAction" }, outputs: { actionClick: "actionClick", pageChange: "pageChange" }, providers: [
417
+ { provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService },
418
+ ClientFilterService
419
+ ], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rbTableContainer", first: true, predicate: ["rbTableContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-crud-container\">\n <!-- @if (dataSource?.filteredData?.length) { -->\n <div #rbTableContainer class=\"rb-table-container\"\n [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\">\n <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n <!-- Colunas Din\u00E2micas -->\n @for (column of columns; track column.key; let i = $index) {\n <ng-container [matColumnDef]=\"column.key\">\n @if(column.sortable === false) {\n <th mat-header-cell *matHeaderCellDef>\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let row; let il = index\"\n [class.rb-clickable-cell]=\"column.action\"\n [class.rb-break-line-cell]=\"textLineBreakable\"\n (click)=\"column.action ? onClickCell(column.action, row) : null\"\n title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\"\n [class]=\"row[column.conditionalClassKey || column.key] | rbConditionalClass:(column.conditionalClassKey || column.key):conditionalClasses\"\n >\n <!-- Terminar de implementar quando for decidido como ficar\u00E1 quando a informa\u00E7\u00E3o for em array de objetos.\n N\u00E3o deixar como primeira condi\u00E7\u00E3o, para evitar processamento desnecess\u00E1rio no pipe isArray\n @if (column.objCol?.label && (row[column.key] | isArray) && row[column.key].length){\n @for (item of row[column.key]; track $index) {\n <span>{{ item[column.objCol?.label || 'label'] }}</span>\n }\n } @else if -->\n @if(i===0 && showIndex()) {\n <span class=\"rb-crud-float-index\">{{il+1}}</span>\n }\n @if (column.pipe) {\n {{ row[column.key] | rbCustomPipe:column.pipe }}\n } @else {\n {{ row[column.key] }}\n }\n </td>\n </ng-container>\n }\n\n <!-- Coluna de A\u00E7\u00F5es -->\n @if (actionsMenu.length) {\n <ng-container matColumnDef=\"actions\" stickyEnd class=\"sticky-column\">\n <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n <td mat-cell *matCellDef=\"let row; let il = index\" class=\"rb-crud-actions-col\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"actionsMenuRef\"\n (menuOpened)=\"openMenu(row)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </td>\n </ng-container>\n }\n\n\n <!-- Cabe\u00E7alho e Corpo da Tabela -->\n <thead>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n </thead>\n <tbody>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </tbody>\n </table>\n\n <!-- Menu de A\u00E7\u00F5es -->\n <mat-menu #actionsMenuRef=\"matMenu\" class=\"rb-menu-crud\">\n @for (action of displayedActionsMenu; track action.label) {\n\n @if (action.hasDivider) {\n <hr>\n }\n\n <button\n mat-menu-item\n (click)=\"onActionClick(action, selectedRow)\"\n [title]=\"action.label\"\n [attr.aria-label]=\"action.label\"\n [attr.color]=\"action.color\"\n [ngClass]=\"action.class\">\n\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n\n {{ action.label }}\n\n </button>\n\n }\n </mat-menu>\n\n </div>\n <!-- } -->\n\n <!-- @if (!dataSource?.filteredData?.length) { -->\n <div class=\"empty-message\" [style.display]=\"dataSource?.filteredData?.length ? 'none' : 'block'\">\n <h2>Nenhum registro {{emptyMessageTherm ? 'de ' + emptyMessageTherm : ''}} encontrado\n @if(searchTherm.length) {\n para o termo \"{{searchTherm}}\"\n }\n </h2>\n <p>Experimente <span (click)=\"onClickLink()\">adicionar {{emptyMessageSentence}}</span>.</p>\n </div>\n <!-- } -->\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n<!-- @if (pagination && dataSource?.filteredData?.length) { -->\n <mat-paginator #paginator\n [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\"\n class=\"rb-paginator\"\n [pageSize]=\"pageSize\"\n (page)=\"pageChange.emit($event)\"\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[10,25,50,100]\"\n aria-label=\"Selecione a p\u00E1gina\">\n </mat-paginator>\n<!-- } -->\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226);position:relative}.rb-crud-container td.rb-clickable-cell{cursor:pointer}.rb-crud-container td.rb-clickable-cell:hover{text-decoration:underline}.rb-crud-container td.rb-crud-actions-col{background-color:#fff}.rb-crud-container tr,.rb-crud-container tr td.rb-crud-actions-col{transition:background-color .3s ease-in-out}.rb-crud-container tr:not(.mat-mdc-header-row):hover{background-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 5%,transparent)}.rb-crud-container tr:not(.mat-mdc-header-row):hover td.rb-crud-actions-col{background-color:#e6efef}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.rb-crud-container th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{background:#fff}.rb-crud-container span.rb-crud-float-index{position:absolute;top:2px;left:2px;color:var(--mdc-protected-button-label-text-color, var(--mat-sys-primary));background-color:var(--mdc-protected-button-container-color, var(--mat-sys-surface));border-radius:3px;padding:0 3px;box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f}.rb-table-container.is-overflowing th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right,.rb-table-container.is-overflowing td.mat-mdc-cell.mdc-data-table__cell.cdk-cell.rb-crud-actions-col.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{box-shadow:-1px 0 3px -1px #0000001a}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}.empty-message h2{font-family:Roboto;font-weight:500;font-style:Medium;font-size:16px;line-height:23.4px;letter-spacing:0%;text-align:center}.empty-message p{font-family:Roboto;font-weight:400;font-style:Regular;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span{color:var(--mat-sys-primary, #006a6a);font-family:Roboto;font-weight:700;font-style:Bold;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span:hover{text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: RbCustomPipe, name: "rbCustomPipe" }, { kind: "pipe", type: RbConditionalClassPipe, name: "rbConditionalClass" }] });
420
+ }
421
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, decorators: [{
422
+ type: Component,
423
+ args: [{ selector: 'rb-crud', standalone: true, imports: [
424
+ CommonModule,
425
+ MatTableModule,
426
+ MatMenuModule,
427
+ MatInputModule,
428
+ MatPaginatorModule,
429
+ MatSortModule,
430
+ MatIconModule,
431
+ MatButtonModule,
432
+ RbCustomPipe,
433
+ RbConditionalClassPipe,
434
+ ], providers: [
435
+ { provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService },
436
+ ClientFilterService
437
+ ], template: "<div class=\"rb-crud-container\">\n <!-- @if (dataSource?.filteredData?.length) { -->\n <div #rbTableContainer class=\"rb-table-container\"\n [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\">\n <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n <!-- Colunas Din\u00E2micas -->\n @for (column of columns; track column.key; let i = $index) {\n <ng-container [matColumnDef]=\"column.key\">\n @if(column.sortable === false) {\n <th mat-header-cell *matHeaderCellDef>\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let row; let il = index\"\n [class.rb-clickable-cell]=\"column.action\"\n [class.rb-break-line-cell]=\"textLineBreakable\"\n (click)=\"column.action ? onClickCell(column.action, row) : null\"\n title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\"\n [class]=\"row[column.conditionalClassKey || column.key] | rbConditionalClass:(column.conditionalClassKey || column.key):conditionalClasses\"\n >\n <!-- Terminar de implementar quando for decidido como ficar\u00E1 quando a informa\u00E7\u00E3o for em array de objetos.\n N\u00E3o deixar como primeira condi\u00E7\u00E3o, para evitar processamento desnecess\u00E1rio no pipe isArray\n @if (column.objCol?.label && (row[column.key] | isArray) && row[column.key].length){\n @for (item of row[column.key]; track $index) {\n <span>{{ item[column.objCol?.label || 'label'] }}</span>\n }\n } @else if -->\n @if(i===0 && showIndex()) {\n <span class=\"rb-crud-float-index\">{{il+1}}</span>\n }\n @if (column.pipe) {\n {{ row[column.key] | rbCustomPipe:column.pipe }}\n } @else {\n {{ row[column.key] }}\n }\n </td>\n </ng-container>\n }\n\n <!-- Coluna de A\u00E7\u00F5es -->\n @if (actionsMenu.length) {\n <ng-container matColumnDef=\"actions\" stickyEnd class=\"sticky-column\">\n <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n <td mat-cell *matCellDef=\"let row; let il = index\" class=\"rb-crud-actions-col\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"actionsMenuRef\"\n (menuOpened)=\"openMenu(row)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </td>\n </ng-container>\n }\n\n\n <!-- Cabe\u00E7alho e Corpo da Tabela -->\n <thead>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n </thead>\n <tbody>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </tbody>\n </table>\n\n <!-- Menu de A\u00E7\u00F5es -->\n <mat-menu #actionsMenuRef=\"matMenu\" class=\"rb-menu-crud\">\n @for (action of displayedActionsMenu; track action.label) {\n\n @if (action.hasDivider) {\n <hr>\n }\n\n <button\n mat-menu-item\n (click)=\"onActionClick(action, selectedRow)\"\n [title]=\"action.label\"\n [attr.aria-label]=\"action.label\"\n [attr.color]=\"action.color\"\n [ngClass]=\"action.class\">\n\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n\n {{ action.label }}\n\n </button>\n\n }\n </mat-menu>\n\n </div>\n <!-- } -->\n\n <!-- @if (!dataSource?.filteredData?.length) { -->\n <div class=\"empty-message\" [style.display]=\"dataSource?.filteredData?.length ? 'none' : 'block'\">\n <h2>Nenhum registro {{emptyMessageTherm ? 'de ' + emptyMessageTherm : ''}} encontrado\n @if(searchTherm.length) {\n para o termo \"{{searchTherm}}\"\n }\n </h2>\n <p>Experimente <span (click)=\"onClickLink()\">adicionar {{emptyMessageSentence}}</span>.</p>\n </div>\n <!-- } -->\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n<!-- @if (pagination && dataSource?.filteredData?.length) { -->\n <mat-paginator #paginator\n [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\"\n class=\"rb-paginator\"\n [pageSize]=\"pageSize\"\n (page)=\"pageChange.emit($event)\"\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[10,25,50,100]\"\n aria-label=\"Selecione a p\u00E1gina\">\n </mat-paginator>\n<!-- } -->\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226);position:relative}.rb-crud-container td.rb-clickable-cell{cursor:pointer}.rb-crud-container td.rb-clickable-cell:hover{text-decoration:underline}.rb-crud-container td.rb-crud-actions-col{background-color:#fff}.rb-crud-container tr,.rb-crud-container tr td.rb-crud-actions-col{transition:background-color .3s ease-in-out}.rb-crud-container tr:not(.mat-mdc-header-row):hover{background-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 5%,transparent)}.rb-crud-container tr:not(.mat-mdc-header-row):hover td.rb-crud-actions-col{background-color:#e6efef}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.rb-crud-container th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{background:#fff}.rb-crud-container span.rb-crud-float-index{position:absolute;top:2px;left:2px;color:var(--mdc-protected-button-label-text-color, var(--mat-sys-primary));background-color:var(--mdc-protected-button-container-color, var(--mat-sys-surface));border-radius:3px;padding:0 3px;box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f}.rb-table-container.is-overflowing th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right,.rb-table-container.is-overflowing td.mat-mdc-cell.mdc-data-table__cell.cdk-cell.rb-crud-actions-col.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{box-shadow:-1px 0 3px -1px #0000001a}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}.empty-message h2{font-family:Roboto;font-weight:500;font-style:Medium;font-size:16px;line-height:23.4px;letter-spacing:0%;text-align:center}.empty-message p{font-family:Roboto;font-weight:400;font-style:Regular;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span{color:var(--mat-sys-primary, #006a6a);font-family:Roboto;font-weight:700;font-style:Bold;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span:hover{text-decoration:underline;cursor:pointer}\n"] }]
438
+ }], ctorParameters: () => [{ type: ClientFilterService }, { type: i0.Renderer2 }], propDecorators: { columns: [{
439
+ type: Input
440
+ }], data: [{
441
+ type: Input
442
+ }], actionsMenu: [{
443
+ type: Input
444
+ }], conditionalClasses: [{
445
+ type: Input
446
+ }], pagination: [{
447
+ type: Input
448
+ }], pageSize: [{
449
+ type: Input
450
+ }], infiniteScroll: [{
451
+ type: Input
452
+ }], textLineBreakable: [{
453
+ type: Input
454
+ }], emptyMessageTherm: [{
455
+ type: Input
456
+ }], emptyMessageSentence: [{
457
+ type: Input
458
+ }], emptyLinkAction: [{
459
+ type: Input
460
+ }], actionClick: [{
461
+ type: Output
462
+ }], pageChange: [{
463
+ type: Output
464
+ }], paginator: [{
465
+ type: ViewChild,
466
+ args: [MatPaginator]
467
+ }], sort: [{
468
+ type: ViewChild,
469
+ args: [MatSort]
470
+ }], rbTableContainer: [{
471
+ type: ViewChild,
472
+ args: ['rbTableContainer', { static: true }]
473
+ }] } });
474
+
475
+ class RbDynamicButtonDirective {
476
+ el;
477
+ renderer;
478
+ set buttonType(value) {
479
+ const validTypes = ['float', 'confirm', 'cancel', 'menuTrigger'];
480
+ this._buttonType = validTypes.includes(value) ? value : null;
481
+ }
482
+ _buttonType = null;
483
+ buttonTypes = {
484
+ float: {
485
+ directive: 'mat-raised-button',
486
+ classes: ['mdc-button--raised', 'mat-mdc-raised-button']
487
+ },
488
+ confirm: {
489
+ directive: 'mat-flat-button',
490
+ classes: ['mdc-button--unelevated', 'mat-mdc-unelevated-button']
491
+ },
492
+ cancel: {
493
+ directive: 'mat-stroked-button',
494
+ classes: ['mdc-button--outlined', 'mat-mdc-outlined-button']
495
+ },
496
+ menuTrigger: {
497
+ directive: 'mat-icon-button',
498
+ classes: ['mdc-icon-button', 'mat-mdc-icon-button']
499
+ }
500
+ };
501
+ constructor(el, renderer) {
502
+ this.el = el;
503
+ this.renderer = renderer;
504
+ }
505
+ ngOnChanges(changes) {
506
+ if (changes['buttonType']?.currentValue) {
507
+ this.renderButtons(this._buttonType || '');
508
+ }
509
+ }
510
+ renderButtons(key) {
511
+ if (key?.trim() && typeof this.buttonTypes[key] === 'object') {
512
+ this.renderer.setAttribute(this.el.nativeElement, this.buttonTypes[key].directive, '');
513
+ this.buttonTypes[key].classes.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls));
514
+ }
515
+ }
516
+ 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 });
517
+ 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 });
518
+ }
519
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDynamicButtonDirective, decorators: [{
520
+ type: Directive,
521
+ args: [{
522
+ selector: '[rbDynamicButton]'
523
+ }]
524
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { buttonType: [{
525
+ type: Input,
526
+ args: ['rbDynamicButton']
527
+ }] } });
528
+
529
+ class RbCrudToolBarComponent {
530
+ targetCrud;
531
+ searchPlaceholder = 'Digite para pesquisar...';
532
+ buttonSettings = [];
533
+ iconButton = 'add';
534
+ titleButton = 'Adicionar';
535
+ leftButtonSettings = [];
536
+ buttonClick = new EventEmitter();
537
+ searchText = signal('');
538
+ constructor() { }
539
+ onSearchChange(event) {
540
+ const value = event.target.value;
541
+ this.searchText.set(value);
542
+ if (this.targetCrud) {
543
+ this.targetCrud.setSearchText(value);
544
+ }
545
+ }
546
+ onClickButton(action) {
547
+ this.buttonClick.emit(action);
548
+ }
549
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
550
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudToolBarComponent, isStandalone: true, selector: "rb-crud-tool-bar", inputs: { targetCrud: "targetCrud", searchPlaceholder: "searchPlaceholder", buttonSettings: "buttonSettings", iconButton: "iconButton", titleButton: "titleButton", leftButtonSettings: "leftButtonSettings" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"rb-crud-tool-bar-container\">\n <div class=\"rb-flex-line-space-between\">\n <div class=\"rb-flex-align-items-center\">\n @for (btn of buttonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n\n <div class=\"rb-search-box rb-flex-align-items-center\">\n <mat-form-field class=\"rb-search-field\">\n <mat-label>Pesquisar</mat-label>\n <input\n matInput\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n placeholder={{searchPlaceholder}}\n />\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n @for (btn of leftButtonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [attr.id]=\"btn.selector\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base{min-width:40px}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base .mat-icon{vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
551
+ }
552
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, decorators: [{
553
+ type: Component,
554
+ args: [{ selector: 'rb-crud-tool-bar', standalone: true, imports: [
555
+ CommonModule,
556
+ MatFormFieldModule,
557
+ MatInputModule,
558
+ MatIconModule,
559
+ MatButtonModule,
560
+ RbDynamicButtonDirective,
561
+ ], template: "<div class=\"rb-crud-tool-bar-container\">\n <div class=\"rb-flex-line-space-between\">\n <div class=\"rb-flex-align-items-center\">\n @for (btn of buttonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n\n <div class=\"rb-search-box rb-flex-align-items-center\">\n <mat-form-field class=\"rb-search-field\">\n <mat-label>Pesquisar</mat-label>\n <input\n matInput\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n placeholder={{searchPlaceholder}}\n />\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n @for (btn of leftButtonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [attr.id]=\"btn.selector\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base{min-width:40px}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base .mat-icon{vertical-align:middle}\n"] }]
562
+ }], ctorParameters: () => [], propDecorators: { targetCrud: [{
563
+ type: Input
564
+ }], searchPlaceholder: [{
565
+ type: Input
566
+ }], buttonSettings: [{
567
+ type: Input
568
+ }], iconButton: [{
569
+ type: Input
570
+ }], titleButton: [{
571
+ type: Input
572
+ }], leftButtonSettings: [{
573
+ type: Input
574
+ }], buttonClick: [{
575
+ type: Output
576
+ }] } });
577
+
578
+ class RbContentBoxComponent {
579
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbContentBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
580
+ 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"] });
581
+ }
582
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbContentBoxComponent, decorators: [{
583
+ type: Component,
584
+ 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"] }]
585
+ }] });
586
+
587
+ class RbDialogComponent {
588
+ data = inject(MAT_DIALOG_DATA);
589
+ dialogRef = inject((MatDialogRef));
590
+ onClickButton(action) {
591
+ console.log('action', action);
592
+ this.dialogRef.close(action);
593
+ }
594
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
595
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbDialogComponent, isStandalone: true, selector: "rb-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\" >\n @if (data.isMultipleContent) {\n @for (item of data.multipleContent; track $index) {\n @if (item.subtitle) {\n <h3 class=\"rb-font-heading rb-h5\">{{item.subtitle}}</h3>\n }\n @if (item.paragraph) {\n <p class=\"rb-font-body rb-large\">{{item.paragraph}}</p>\n }\n }\n } @else {\n <h3 class=\"rb-font-heading rb-h5\">{{data.subtitle}}</h3>\n <p class=\"rb-font-body rb-large\">{{data.content}}</p>\n }\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n @if (data.buttons?.length) {\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n @for (button of data.buttons; track $index) {\n <button mat-button\n title=\"{{button.label}}\"\n class=\"{{button.color}}\"\n [color]=\"button.color\"\n [attr.aria-label]=\"button.label\"\n [rbDynamicButton]=\"button.directive || null\"\n (click)=\"onClickButton(button.action)\">\n @if (button.icon && button.iconPosition === 'start') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n {{button.label}}\n @if (button.icon && button.iconPosition === 'end') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n </button>\n }\n </mat-dialog-actions>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
596
+ }
597
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, decorators: [{
598
+ type: Component,
599
+ 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" }]
600
+ }] });
601
+
602
+ class RbFilterDropdownComponent {
603
+ overlay;
604
+ clientFilterService;
605
+ viewContainerRef;
606
+ parentSelectorId = '#parentDropdownSelector';
607
+ options = [];
608
+ filterMenu;
609
+ overlayRef = null;
610
+ trackByFn = (index, item) => index;
611
+ searchText = signal('');
612
+ constructor(overlay, clientFilterService, viewContainerRef) {
613
+ this.overlay = overlay;
614
+ this.clientFilterService = clientFilterService;
615
+ this.viewContainerRef = viewContainerRef;
616
+ }
617
+ onSearchChange(event) {
618
+ const value = event.target.value;
619
+ this.searchText.set(value);
620
+ this.clientFilterService.setSearchText(value);
621
+ }
622
+ openMenu() {
623
+ if (this.overlayRef) {
624
+ this.closeMenu();
625
+ return;
626
+ }
627
+ const positionStrategy = this.overlay.position()
628
+ .flexibleConnectedTo(document.querySelector(this.parentSelectorId || 'button'))
629
+ .withPositions([
630
+ {
631
+ originX: 'start',
632
+ originY: 'bottom',
633
+ overlayX: 'start',
634
+ overlayY: 'top',
635
+ },
636
+ ]);
637
+ this.overlayRef = this.overlay.create({
638
+ positionStrategy,
639
+ hasBackdrop: true,
640
+ backdropClass: 'cdk-overlay-transparent-backdrop',
641
+ scrollStrategy: this.overlay.scrollStrategies.close(),
642
+ });
643
+ const portal = new TemplatePortal(this.filterMenu, this.viewContainerRef);
644
+ this.overlayRef.attach(portal);
645
+ this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
646
+ }
647
+ closeMenu() {
648
+ this.overlayRef?.dispose();
649
+ this.overlayRef = null;
650
+ }
651
+ onSelectItem(item) {
652
+ console.log('Selected item:', item);
653
+ // this.filterItems = this.options.filter((item) => item.includes(this.searchText()));
654
+ // this.clientFilterService.setFilterItems(this.filterItems);
655
+ }
656
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, deps: [{ token: i1$2.Overlay }, { token: ClientFilterService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
657
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbFilterDropdownComponent, isStandalone: true, selector: "rb-filter-dropdown", inputs: { parentSelectorId: "parentSelectorId", options: "options" }, viewQueries: [{ propertyName: "filterMenu", first: true, predicate: ["filterMenu"], descendants: true }], ngImport: i0, template: "<ng-template #filterMenu>\n <div class=\"rb-filter-dropdown\">\n <div class=\"rb-filter-dropdown-header\">\n <h5>Adicionar Filtro</h5>\n <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"rb-filter-dropdown-body\">\n <div class=\"rb-filter-seach-bar\">\n <mat-form-field class=\"rb-search-field\">\n <mat-label>Pesquisar</mat-label>\n <input\n matInput\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n placeholder=\"Pesquisar\"\n />\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n </div>\n <div class=\"rb-filter-dropdown-body-items\">\n <pre>{{options | json}}</pre>\n @if (options && options.length) {\n @for (item of options; track trackByFn) {\n <div\n class=\"rb-filter-dropdown-item\"\n (click)=\"onSelectItem(item)\"\n >\n <!-- <mat-checkbox\n [checked]=\"isSelected(item)\"\n (change)=\"onSelectItem(item, $event)\"\n >\n {{ item.label }}\n </mat-checkbox> -->\n </div>\n }\n } @else {\n <div class=\"rb-filter-dropdown-item\">\n Nenhum item encontrado\n <!-- <mat-checkbox disabled>\n <span class=\"rb-filter-dropdown-item-disabled\">\n Nenhum item encontrado\n </span>\n </mat-checkbox> -->\n </div>\n }\n </div>\n\n <!-- <div class=\"rb-filter-dropdown-body-items\">\n <div\n *ngFor=\"let item of filterItems; trackBy: trackByFn\"\n class=\"rb-filter-dropdown-item\"\n (click)=\"onSelectItem(item)\"\n >\n <mat-checkbox\n [checked]=\"isSelected(item)\"\n (change)=\"onSelectItem(item, $event)\"\n >\n {{ item.label }}\n </mat-checkbox>\n </div>\n <div\n *ngIf=\"!filterItems?.length\"\n class=\"rb-filter-dropdown-item\">\n <mat-checkbox disabled>\n <span class=\"rb-filter-dropdown-item-disabled\">\n Nenhum item encontrado\n </span>\n </mat-checkbox>\n </div>\n </div> -->\n </div>\n </div>\n</ng-template>\n", styles: [".rb-filter-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:470px;color:#505353;background-color:#f8faf9;box-shadow:0 4px 8px 3px #006a6a26,0 1px 3px #0014144d}.rb-filter-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }] });
658
+ }
659
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, decorators: [{
660
+ type: Component,
661
+ 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"] }]
662
+ }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: ClientFilterService }, { type: i0.ViewContainerRef }], propDecorators: { parentSelectorId: [{
663
+ type: Input
664
+ }], options: [{
665
+ type: Input
666
+ }], filterMenu: [{
667
+ type: ViewChild,
668
+ args: ['filterMenu']
669
+ }] } });
670
+
671
+ class RbFilterPanelComponent {
672
+ dropdown;
673
+ data = inject(MAT_DIALOG_DATA);
674
+ constructor() { }
675
+ applyFilter() {
676
+ console.log('applyFilter');
677
+ }
678
+ openMenu() {
679
+ this.dropdown.openMenu();
680
+ }
681
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
682
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RbFilterPanelComponent, isStandalone: true, selector: "rb-filter-panel", viewQueries: [{ propertyName: "dropdown", first: true, predicate: RbFilterDropdownComponent, descendants: true }], ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>Filtro</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\" >\n <div class=\"rb-row rb-row rb-flex-row rb-align-items-start rb-justify-content-start\">\n <button mat-button id=\"parentDropdownSelector\"\n title=\"Filtrar\"\n class=\"primary\"\n aria-label=\"Filtrar\"\n [rbDynamicButton]=\"null\"\n (click)=\"openMenu()\">\n <mat-icon>add</mat-icon>\n Adicionar nova condi\u00E7\u00E3o\n </button>\n <rb-filter-dropdown\n [parentSelectorId]=\"'#parentDropdownSelector'\"\n [options]=\"data.filterOptions\"></rb-filter-dropdown>\n\n </div>\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" align=\"end\">\n <button mat-button\n title=\"Filtrar\"\n class=\"primary\"\n aria-label=\"Filtrar\"\n [rbDynamicButton]=\"'confirm'\"\n (click)=\"applyFilter()\">\n Filtrar\n </button>\n </mat-dialog-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RbFilterDropdownComponent, selector: "rb-filter-dropdown", inputs: ["parentSelectorId", "options"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
683
+ }
684
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, decorators: [{
685
+ type: Component,
686
+ args: [{ selector: 'rb-filter-panel', imports: [MatDialogModule, MatButtonModule, MatIconModule, RbFilterDropdownComponent, RbDynamicButtonDirective], template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>Filtro</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\" >\n <div class=\"rb-row rb-row rb-flex-row rb-align-items-start rb-justify-content-start\">\n <button mat-button id=\"parentDropdownSelector\"\n title=\"Filtrar\"\n class=\"primary\"\n aria-label=\"Filtrar\"\n [rbDynamicButton]=\"null\"\n (click)=\"openMenu()\">\n <mat-icon>add</mat-icon>\n Adicionar nova condi\u00E7\u00E3o\n </button>\n <rb-filter-dropdown\n [parentSelectorId]=\"'#parentDropdownSelector'\"\n [options]=\"data.filterOptions\"></rb-filter-dropdown>\n\n </div>\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" align=\"end\">\n <button mat-button\n title=\"Filtrar\"\n class=\"primary\"\n aria-label=\"Filtrar\"\n [rbDynamicButton]=\"'confirm'\"\n (click)=\"applyFilter()\">\n Filtrar\n </button>\n </mat-dialog-actions>\n</div>\n" }]
687
+ }], ctorParameters: () => [], propDecorators: { dropdown: [{
688
+ type: ViewChild,
689
+ args: [RbFilterDropdownComponent]
690
+ }] } });
691
+
692
+ class RbCopyConfirmDialogComponent {
693
+ fb;
694
+ data = inject(MAT_DIALOG_DATA);
695
+ dialogRef = inject((MatDialogRef));
696
+ formGroup;
697
+ constructor(fb) {
698
+ this.fb = fb;
699
+ this.formGroup = this.fb.group({
700
+ fieldValue: [this.data?.fieldValueDafault, Validators.required]
701
+ });
702
+ }
703
+ confirm() {
704
+ this.dialogRef.close(this.formGroup.value);
705
+ }
706
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
707
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCopyConfirmDialogComponent, isStandalone: true, selector: "lib-rb-copy-confirm-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\">\n <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n <mat-label>{{data.labelField}}</mat-label>\n <input matInput autofocus\n type=\"text\"\n [attr.aria-label]=\"data.labelField\"\n formControlName=\"fieldValue\"\n required>\n @if (formGroup.controls['fieldValue'].hasError('required')) {\n <mat-error >\n Campo obrigat\u00F3rio\n </mat-error>\n }\n </mat-form-field>\n\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n <button mat-button mat-dialog-close\n title=\"Cancelar\"\n aria-label=\"Cancelar\"\n class=\"secondary\"\n color=\"accent\"\n [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o' + (data.labelConfirmButton || 'duplicar' ).toLowerCase()\"\n type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"{{data.labelConfirmButton || 'Duplicar'}}\"\n [attr.aria-label]=\"data.labelConfirmButton || 'Duplicar'\"\n class=\"primary\"\n [color]=\"'primary'\"\n [attr.aria-label]=\"(data.labelConfirmButton || 'Duplicar' ) + data.labelField\"\n [rbDynamicButton]=\"'confirm'\"\n type=\"submit\"\n [disabled]=\"formGroup.invalid\"\n (click)=\"confirm()\">\n {{ data.labelConfirmButton || 'Duplicar' }}\n </button>\n </mat-dialog-actions>\n </form>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
708
+ }
709
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, decorators: [{
710
+ type: Component,
711
+ args: [{ selector: 'lib-rb-copy-confirm-dialog', imports: [MatDialogModule, MatButtonModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, MatIconModule, RbDynamicButtonDirective], template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\">\n <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n <mat-label>{{data.labelField}}</mat-label>\n <input matInput autofocus\n type=\"text\"\n [attr.aria-label]=\"data.labelField\"\n formControlName=\"fieldValue\"\n required>\n @if (formGroup.controls['fieldValue'].hasError('required')) {\n <mat-error >\n Campo obrigat\u00F3rio\n </mat-error>\n }\n </mat-form-field>\n\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n <button mat-button mat-dialog-close\n title=\"Cancelar\"\n aria-label=\"Cancelar\"\n class=\"secondary\"\n color=\"accent\"\n [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o' + (data.labelConfirmButton || 'duplicar' ).toLowerCase()\"\n type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"{{data.labelConfirmButton || 'Duplicar'}}\"\n [attr.aria-label]=\"data.labelConfirmButton || 'Duplicar'\"\n class=\"primary\"\n [color]=\"'primary'\"\n [attr.aria-label]=\"(data.labelConfirmButton || 'Duplicar' ) + data.labelField\"\n [rbDynamicButton]=\"'confirm'\"\n type=\"submit\"\n [disabled]=\"formGroup.invalid\"\n (click)=\"confirm()\">\n {{ data.labelConfirmButton || 'Duplicar' }}\n </button>\n </mat-dialog-actions>\n </form>\n</div>\n" }]
712
+ }], ctorParameters: () => [{ type: i1$3.FormBuilder }] });
713
+
714
+ class RbChangeLogDialogComponent {
715
+ data = inject(MAT_DIALOG_DATA);
716
+ dialogRef = inject((MatDialogRef));
717
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
718
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RbChangeLogDialogComponent, isStandalone: true, selector: "rb-rb-change-log-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>Hist\u00F3rico de altera\u00E7\u00F5es</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content bg-white has-crud\" >\n <rb-crud\n [columns]=\"data.columns\"\n [data]=\"data.dataSource\"\n [pagination]=\"false\"\n [textLineBreakable]=\"true\"\n ></rb-crud>\n </mat-dialog-content>\n</div>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RbCrudComponent, selector: "rb-crud", inputs: ["columns", "data", "actionsMenu", "conditionalClasses", "pagination", "pageSize", "infiniteScroll", "textLineBreakable", "emptyMessageTherm", "emptyMessageSentence", "emptyLinkAction"], outputs: ["actionClick", "pageChange"] }] });
719
+ }
720
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, decorators: [{
721
+ type: Component,
722
+ args: [{ selector: 'rb-rb-change-log-dialog', imports: [MatDialogModule, MatButtonModule, MatIconModule, RbCrudComponent], template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>Hist\u00F3rico de altera\u00E7\u00F5es</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content bg-white has-crud\" >\n <rb-crud\n [columns]=\"data.columns\"\n [data]=\"data.dataSource\"\n [pagination]=\"false\"\n [textLineBreakable]=\"true\"\n ></rb-crud>\n </mat-dialog-content>\n</div>\n\n" }]
723
+ }] });
724
+
725
+ class RbColumnsSortSettingComponent {
726
+ overlay;
727
+ viewContainerRef;
728
+ cdr;
729
+ parentSelectorId = '#parentDropdownColumnSettingsSelector';
730
+ columns = [];
731
+ offsetX = 0;
732
+ offsetY = 0;
733
+ showIndex = false;
734
+ columnsSettingContainer;
735
+ columnsChange = new EventEmitter();
736
+ showIndexService = inject(RbShowIndexCrudService);
737
+ overlayRef = null;
738
+ editableColumns = [];
739
+ backupColumns = [];
740
+ constructor(overlay, viewContainerRef, cdr) {
741
+ this.overlay = overlay;
742
+ this.viewContainerRef = viewContainerRef;
743
+ this.cdr = cdr;
744
+ }
745
+ openMenu() {
746
+ if (this.overlayRef) {
747
+ this.closeMenu();
748
+ return;
749
+ }
750
+ this.editableColumns = structuredClone(this.columns);
751
+ this.backupColumns = structuredClone(this.columns);
752
+ const positionStrategy = this.overlay.position()
753
+ .flexibleConnectedTo(document.querySelector(this.parentSelectorId || 'button'))
754
+ .withPositions([
755
+ {
756
+ originX: 'start',
757
+ originY: 'bottom',
758
+ overlayX: 'start',
759
+ overlayY: 'top',
760
+ offsetX: this.offsetX,
761
+ offsetY: this.offsetY,
762
+ },
763
+ ]);
764
+ this.overlayRef = this.overlay.create({
765
+ positionStrategy,
766
+ hasBackdrop: true,
767
+ backdropClass: 'cdk-overlay-transparent-backdrop',
768
+ scrollStrategy: this.overlay.scrollStrategies.close(),
769
+ });
770
+ const portal = new TemplatePortal(this.columnsSettingContainer, this.viewContainerRef);
771
+ this.overlayRef.attach(portal);
772
+ this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
773
+ }
774
+ restore() {
775
+ this.editableColumns = structuredClone(this.backupColumns);
776
+ this.cdr.detectChanges();
777
+ }
778
+ save() {
779
+ this.columnsChange.emit([...this.editableColumns]);
780
+ this.closeMenu();
781
+ }
782
+ closeMenu() {
783
+ this.overlayRef?.dispose();
784
+ this.overlayRef = null;
785
+ }
786
+ drop(event) {
787
+ moveItemInArray(this.editableColumns, event.previousIndex, event.currentIndex);
788
+ }
789
+ showColumn(item) {
790
+ item.hidden = item.hidden ? false : true;
791
+ }
792
+ showIndexControl() {
793
+ this.showIndex = this.showIndex ? false : true;
794
+ this.showIndexService.setShowIndex(this.showIndex);
795
+ }
796
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
797
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbColumnsSortSettingComponent, isStandalone: true, selector: "rb-columns-sort-setting", inputs: { parentSelectorId: "parentSelectorId", columns: "columns", offsetX: "offsetX", offsetY: "offsetY", showIndex: "showIndex" }, outputs: { columnsChange: "columnsChange" }, viewQueries: [{ propertyName: "columnsSettingContainer", first: true, predicate: ["columnsSettingContainer"], descendants: true }], ngImport: i0, template: "<ng-template #columnsSettingContainer>\n <div class=\"rb-pannel-dropdown\">\n <div class=\"rb-pannel-dropdown-header\">\n <h5>Colunas</h5>\n <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"rb-pannel-dropdown-body\">\n <div cdkDropList class=\"rb-pannel-drop-list\" (cdkDropListDropped)=\"drop($event)\">\n @for (item of editableColumns; track item) {\n <div class=\"rb-pannel-drop-item\" cdkDrag [cdkDragDisabled]=\"item.hidden\">\n <div class=\"rb-pannel-drop-content\" >\n <mat-icon class=\"rb-pannel-drop-item-icon\">drag_indicator</mat-icon>\n <div class=\"rb-pannel-drop-item-label\">\n {{ item.label }}\n </div>\n <button mat-icon-button aria-label=\"Exibir coluna\" (click)=\"showColumn(item)\" [disabled]=\"item.blocked\">\n <mat-icon>{{item.hidden ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"rb-pannel-dropdown-footer\">\n <button mat-button\n title=\"\u00CDndices\"\n class=\"primary\"\n aria-label=\"\u00CDndices\"\n [rbDynamicButton]=\"null\"\n (click)=\"showIndexControl()\">\n \u00CDndices\n </button>\n <div class=\"rb-pannel-dropdown-footer-right\">\n <button mat-button\n title=\"Restaurar\"\n class=\"primary\"\n aria-label=\"Restaurar\"\n [rbDynamicButton]=\"'cancel'\"\n (click)=\"restore()\">\n Restaurar\n </button>\n <button mat-button\n title=\"Aplicar\"\n class=\"primary\"\n aria-label=\"Aplicar\"\n [rbDynamicButton]=\"'confirm'\"\n (click)=\"save()\">\n Aplicar\n </button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".rb-pannel-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:600px;border-radius:8px;color:#505353;background-color:#f8faf9;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.rb-pannel-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0;padding:0 16px}.rb-pannel-dropdown-header h5{font-family:Roboto;font-weight:500;font-size:16px;line-height:23.4px;margin-top:0;margin-bottom:0}.rb-pannel-dropdown-body{width:100%}.rb-pannel-drop-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:solid 1px #eee}.rb-pannel-drop-item{background-color:#f8faf9}.rb-pannel-drop-item.cdk-drag-preview{overflow:hidden;box-shadow:0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f}.rb-pannel-drop-item-label{min-width:60%;padding:0 15px;font-weight:500}.rb-pannel-dropdown-footer{width:-webkit-fill-available;display:flex;justify-content:space-between;align-items:center;padding:8px 16px}.rb-pannel-dropdown-footer-right{display:flex;gap:8px}.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled mat-icon.rb-pannel-drop-item-icon,.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled .rb-pannel-drop-item-label{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
798
+ }
799
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, decorators: [{
800
+ type: Component,
801
+ args: [{ selector: 'rb-columns-sort-setting', imports: [CommonModule, OverlayModule, MatIconModule, MatButtonModule, CdkDropList, CdkDrag, RbDynamicButtonDirective], standalone: true, template: "<ng-template #columnsSettingContainer>\n <div class=\"rb-pannel-dropdown\">\n <div class=\"rb-pannel-dropdown-header\">\n <h5>Colunas</h5>\n <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"rb-pannel-dropdown-body\">\n <div cdkDropList class=\"rb-pannel-drop-list\" (cdkDropListDropped)=\"drop($event)\">\n @for (item of editableColumns; track item) {\n <div class=\"rb-pannel-drop-item\" cdkDrag [cdkDragDisabled]=\"item.hidden\">\n <div class=\"rb-pannel-drop-content\" >\n <mat-icon class=\"rb-pannel-drop-item-icon\">drag_indicator</mat-icon>\n <div class=\"rb-pannel-drop-item-label\">\n {{ item.label }}\n </div>\n <button mat-icon-button aria-label=\"Exibir coluna\" (click)=\"showColumn(item)\" [disabled]=\"item.blocked\">\n <mat-icon>{{item.hidden ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"rb-pannel-dropdown-footer\">\n <button mat-button\n title=\"\u00CDndices\"\n class=\"primary\"\n aria-label=\"\u00CDndices\"\n [rbDynamicButton]=\"null\"\n (click)=\"showIndexControl()\">\n \u00CDndices\n </button>\n <div class=\"rb-pannel-dropdown-footer-right\">\n <button mat-button\n title=\"Restaurar\"\n class=\"primary\"\n aria-label=\"Restaurar\"\n [rbDynamicButton]=\"'cancel'\"\n (click)=\"restore()\">\n Restaurar\n </button>\n <button mat-button\n title=\"Aplicar\"\n class=\"primary\"\n aria-label=\"Aplicar\"\n [rbDynamicButton]=\"'confirm'\"\n (click)=\"save()\">\n Aplicar\n </button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".rb-pannel-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:600px;border-radius:8px;color:#505353;background-color:#f8faf9;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.rb-pannel-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0;padding:0 16px}.rb-pannel-dropdown-header h5{font-family:Roboto;font-weight:500;font-size:16px;line-height:23.4px;margin-top:0;margin-bottom:0}.rb-pannel-dropdown-body{width:100%}.rb-pannel-drop-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:solid 1px #eee}.rb-pannel-drop-item{background-color:#f8faf9}.rb-pannel-drop-item.cdk-drag-preview{overflow:hidden;box-shadow:0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f}.rb-pannel-drop-item-label{min-width:60%;padding:0 15px;font-weight:500}.rb-pannel-dropdown-footer{width:-webkit-fill-available;display:flex;justify-content:space-between;align-items:center;padding:8px 16px}.rb-pannel-dropdown-footer-right{display:flex;gap:8px}.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled mat-icon.rb-pannel-drop-item-icon,.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled .rb-pannel-drop-item-label{opacity:.5}\n"] }]
802
+ }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { parentSelectorId: [{
803
+ type: Input
804
+ }], columns: [{
805
+ type: Input
806
+ }], offsetX: [{
807
+ type: Input
808
+ }], offsetY: [{
809
+ type: Input
810
+ }], showIndex: [{
811
+ type: Input
812
+ }], columnsSettingContainer: [{
813
+ type: ViewChild,
814
+ args: ['columnsSettingContainer']
815
+ }], columnsChange: [{
816
+ type: Output
817
+ }] } });
818
+
819
+ class IsArrayPipe {
820
+ transform(value) {
821
+ return Array.isArray(value);
822
+ }
823
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
824
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, isStandalone: true, name: "isArray" });
825
+ }
826
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, decorators: [{
827
+ type: Pipe,
828
+ args: [{
829
+ name: 'isArray',
830
+ standalone: true
831
+ }]
832
+ }] });
833
+
834
+ // export interface CrudFilter {
835
+ // key: string;
836
+ // label: string;
837
+ // type: 'text' | 'select' | 'date';
838
+ // options?: any[]; // Para selects
839
+ // }
840
+
841
+ /*
842
+ * Public API Surface of rb-angular-components
843
+ */
844
+ /* Components */
845
+
846
+ /**
847
+ * Generated bundle index. Do not edit.
848
+ */
849
+
850
+ export { IsArrayPipe, RbChangeLogDialogComponent, RbColumnsSortSettingComponent, RbConditionalClassPipe, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
851
+ //# sourceMappingURL=rubeusteam-rb-angular-components.mjs.map