@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.
- package/package.json +6 -6
- package/src/lib/styles/README.md +83 -0
- package/src/lib/styles/_crud.scss +22 -0
- package/src/lib/styles/_dialog.scss +38 -0
- package/src/lib/styles/_layout.scss +86 -0
- package/src/lib/styles/_typography.scss +62 -0
- package/src/lib/styles/index.scss +4 -0
- package/fesm2022/rubeusteam-rb-angular-components.mjs +0 -580
- package/fesm2022/rubeusteam-rb-angular-components.mjs.map +0 -1
- package/index.d.ts +0 -5
- package/lib/components/rb-content-box/rb-content-box.component.d.ts +0 -5
- package/lib/components/rb-copy-confirm-dialog/rb-copy-confirm-dialog.component.d.ts +0 -14
- package/lib/components/rb-crud/rb-crud.component.d.ts +0 -34
- package/lib/components/rb-crud-tool-bar/rb-crud-tool-bar.component.d.ts +0 -19
- package/lib/components/rb-dialog/rb-dialog.component.d.ts +0 -10
- package/lib/components/rb-filter-dropdown/rb-filter-dropdown.component.d.ts +0 -23
- package/lib/components/rb-filter-panel/rb-filter-panel.component.d.ts +0 -12
- package/lib/directives/rb-dynamic-button/rb-dynamic-button.directive.d.ts +0 -17
- package/lib/i18n/paginator-ptbr-intl/paginator-ptbr-intl.service.d.ts +0 -12
- package/lib/interfaces/button.interface.d.ts +0 -15
- package/lib/interfaces/rb-crud.interface.d.ts +0 -11
- package/lib/interfaces/rb-dialog.interface.d.ts +0 -16
- package/lib/interfaces/rb-filter.interface.d.ts +0 -11
- package/lib/pipes/rb-custom/rb-custom.pipe.d.ts +0 -20
- package/lib/services/filter/client-filter.service.d.ts +0 -10
- 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
|