@rubeusteam/rb-angular-components 0.0.23 → 0.0.25
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/fesm2022/rubeusteam-rb-angular-components.mjs +244 -46
- package/fesm2022/rubeusteam-rb-angular-components.mjs.map +1 -1
- package/lib/components/rb-change-log-dialog/rb-change-log-dialog.component.d.ts +9 -0
- package/lib/components/rb-columns-sort-setting/rb-columns-sort-setting.component.d.ts +31 -0
- package/lib/components/rb-crud/helpers/resolve-actions.helper.d.ts +5 -0
- package/lib/components/rb-crud/rb-crud.component.d.ts +16 -5
- package/lib/components/rb-filter-panel/rb-filter-panel.component.d.ts +1 -1
- package/lib/interfaces/button.interface.d.ts +9 -1
- package/lib/interfaces/rb-change-log-dialog.interface.d.ts +5 -0
- package/lib/interfaces/rb-conditional-class.interface.d.ts +9 -0
- package/lib/interfaces/rb-crud.interface.d.ts +3 -0
- package/lib/interfaces/rb-dialog.interface.d.ts +1 -0
- package/lib/pipes/rb-conditional-class/rb-conditional-class.pipe.d.ts +9 -0
- package/lib/services/rb-show-index-crud-service/rb-show-index-crud.service.d.ts +8 -0
- package/package.json +2 -2
- package/public-api.d.ts +6 -0
- package/src/lib/styles/_dialog.scss +21 -0
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, Injectable, signal, EventEmitter, effect, Component, Input, Output, ViewChild, Directive
|
|
3
|
-
import * as
|
|
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
4
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
5
5
|
import * as i5$1 from '@angular/material/input';
|
|
6
6
|
import { MatInputModule } from '@angular/material/input';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i5 from '@angular/material/paginator';
|
|
8
8
|
import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i6 from '@angular/material/sort';
|
|
10
10
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i2 from '@angular/common';
|
|
12
12
|
import { CommonModule } from '@angular/common';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i4 from '@angular/material/menu';
|
|
14
14
|
import { MatMenuModule } from '@angular/material/menu';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i3$1 from '@angular/material/icon';
|
|
16
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
17
|
import * as i2$1 from '@angular/material/button';
|
|
18
18
|
import { MatButtonModule } from '@angular/material/button';
|
|
@@ -25,6 +25,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
|
|
|
25
25
|
import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
26
26
|
import * as i1$2 from '@angular/forms';
|
|
27
27
|
import { Validators, ReactiveFormsModule } from '@angular/forms';
|
|
28
|
+
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
28
29
|
|
|
29
30
|
class RbCustomPipe {
|
|
30
31
|
transform(value, type) {
|
|
@@ -164,18 +165,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
164
165
|
}]
|
|
165
166
|
}] });
|
|
166
167
|
|
|
167
|
-
class
|
|
168
|
-
transform(
|
|
169
|
-
|
|
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
|
+
}
|
|
170
193
|
}
|
|
171
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type:
|
|
172
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type:
|
|
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" });
|
|
173
196
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type:
|
|
197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, decorators: [{
|
|
175
198
|
type: Pipe,
|
|
176
199
|
args: [{
|
|
177
|
-
name: '
|
|
178
|
-
standalone: true
|
|
200
|
+
name: 'rbConditionalClass',
|
|
201
|
+
standalone: true,
|
|
202
|
+
pure: true
|
|
179
203
|
}]
|
|
180
204
|
}] });
|
|
181
205
|
|
|
@@ -203,6 +227,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
203
227
|
}]
|
|
204
228
|
}] });
|
|
205
229
|
|
|
230
|
+
function resolveActionsForData(data, actionsMenu) {
|
|
231
|
+
return data.map(row => {
|
|
232
|
+
const resolvedActions = actionsMenu.map(action => {
|
|
233
|
+
const match = action.conditionalSettings?.find(s => row[s.key] === s.expectedValue);
|
|
234
|
+
return {
|
|
235
|
+
...action,
|
|
236
|
+
label: match?.label || action.label,
|
|
237
|
+
icon: match?.icon || action.icon
|
|
238
|
+
};
|
|
239
|
+
});
|
|
240
|
+
return {
|
|
241
|
+
...row,
|
|
242
|
+
resolvedActions
|
|
243
|
+
};
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
class RbShowIndexCrudService {
|
|
248
|
+
showIndex = signal(false);
|
|
249
|
+
setShowIndex(value) {
|
|
250
|
+
this.showIndex.set(value);
|
|
251
|
+
}
|
|
252
|
+
toggle() {
|
|
253
|
+
this.showIndex.update(value => !value);
|
|
254
|
+
}
|
|
255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
256
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, providedIn: 'root' });
|
|
257
|
+
}
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbShowIndexCrudService, decorators: [{
|
|
259
|
+
type: Injectable,
|
|
260
|
+
args: [{
|
|
261
|
+
providedIn: 'root'
|
|
262
|
+
}]
|
|
263
|
+
}] });
|
|
264
|
+
|
|
206
265
|
class ClientFilterService {
|
|
207
266
|
searchText = signal('');
|
|
208
267
|
setSearchText(text) {
|
|
@@ -234,25 +293,35 @@ class RbCrudComponent {
|
|
|
234
293
|
columns = [];
|
|
235
294
|
data = [];
|
|
236
295
|
actionsMenu = [];
|
|
296
|
+
conditionalClasses = [];
|
|
237
297
|
pagination = true;
|
|
238
298
|
pageSize = 10;
|
|
239
299
|
infiniteScroll = false;
|
|
240
300
|
textLineBreakable = false;
|
|
301
|
+
emptyMessageTherm = '';
|
|
302
|
+
emptyMessageSentence = 'um novo cadastro';
|
|
303
|
+
emptyLinkAction = '';
|
|
304
|
+
showIndexService = inject(RbShowIndexCrudService);
|
|
305
|
+
showIndex = this.showIndexService.showIndex;
|
|
241
306
|
actionClick = new EventEmitter();
|
|
242
307
|
// @Output() filterChange = new EventEmitter<any>();
|
|
243
308
|
pageChange = new EventEmitter();
|
|
244
309
|
paginator;
|
|
245
310
|
sort;
|
|
246
311
|
rbTableContainer;
|
|
312
|
+
resolvedData = resolveActionsForData(this.data, this.actionsMenu);
|
|
247
313
|
displayedColumns = [];
|
|
248
|
-
dataSource
|
|
314
|
+
dataSource;
|
|
249
315
|
filterText;
|
|
250
316
|
isOverflowing = false;
|
|
251
317
|
renderingProgressive = false;
|
|
252
318
|
THRESHOLD = 200;
|
|
319
|
+
searchTherm = '';
|
|
253
320
|
constructor(clientFilterService, renderer) {
|
|
254
321
|
this.clientFilterService = clientFilterService;
|
|
255
322
|
this.renderer = renderer;
|
|
323
|
+
const resolved = resolveActionsForData(this.data, this.actionsMenu);
|
|
324
|
+
this.dataSource = new MatTableDataSource([]);
|
|
256
325
|
this.filterText = this.clientFilterService.getSearchText();
|
|
257
326
|
effect(() => {
|
|
258
327
|
this.applyFilter();
|
|
@@ -277,37 +346,32 @@ class RbCrudComponent {
|
|
|
277
346
|
}
|
|
278
347
|
}
|
|
279
348
|
ngOnChanges() {
|
|
349
|
+
const processedData = resolveActionsForData(this.data, this.actionsMenu);
|
|
280
350
|
this.displayedColumns = this.columns.map(col => col.key);
|
|
281
351
|
if (this.actionsMenu.length) {
|
|
282
352
|
this.displayedColumns.push('actions');
|
|
283
353
|
}
|
|
284
|
-
this.renderingControl();
|
|
354
|
+
this.renderingControl(processedData);
|
|
285
355
|
}
|
|
286
|
-
renderingControl() {
|
|
287
|
-
if (
|
|
356
|
+
renderingControl(processedData) {
|
|
357
|
+
if (processedData.length > this.THRESHOLD) {
|
|
288
358
|
this.renderingProgressive = true;
|
|
289
|
-
this.renderFirstPage();
|
|
359
|
+
this.renderFirstPage(processedData);
|
|
290
360
|
setTimeout(() => {
|
|
291
|
-
this.loadFullData();
|
|
361
|
+
this.loadFullData(processedData);
|
|
292
362
|
}, 100);
|
|
293
363
|
}
|
|
294
364
|
else {
|
|
295
|
-
this.dataSource.data =
|
|
365
|
+
this.dataSource.data = processedData;
|
|
296
366
|
this.renderingProgressive = false;
|
|
297
367
|
}
|
|
298
368
|
}
|
|
299
|
-
renderFirstPage() {
|
|
300
|
-
const firstPage =
|
|
301
|
-
this.dataSource =
|
|
302
|
-
this.dataSource.paginator = this.paginator;
|
|
303
|
-
this.dataSource.sort = this.sort;
|
|
304
|
-
this.defineSortRule();
|
|
369
|
+
renderFirstPage(processedData) {
|
|
370
|
+
const firstPage = processedData.slice(0, this.pageSize);
|
|
371
|
+
this.dataSource.data = firstPage;
|
|
305
372
|
}
|
|
306
|
-
loadFullData() {
|
|
307
|
-
this.dataSource =
|
|
308
|
-
this.dataSource.paginator = this.paginator;
|
|
309
|
-
this.dataSource.sort = this.sort;
|
|
310
|
-
this.defineSortRule();
|
|
373
|
+
loadFullData(processedData) {
|
|
374
|
+
this.dataSource.data = processedData;
|
|
311
375
|
this.renderingProgressive = false;
|
|
312
376
|
}
|
|
313
377
|
defineSortRule() {
|
|
@@ -324,6 +388,9 @@ class RbCrudComponent {
|
|
|
324
388
|
onClickCell(action, row) {
|
|
325
389
|
this.actionClick.emit({ action: action, row });
|
|
326
390
|
}
|
|
391
|
+
onClickLink() {
|
|
392
|
+
this.actionClick.emit({ action: this.emptyLinkAction });
|
|
393
|
+
}
|
|
327
394
|
// applyFilter() {
|
|
328
395
|
// this.dataSource.filter = this.filterText().trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
329
396
|
// }
|
|
@@ -334,14 +401,15 @@ class RbCrudComponent {
|
|
|
334
401
|
return currentTerm + ' ' + (typeof value === 'string' ? this.clientFilterService.normalizeText(value) : '');
|
|
335
402
|
};
|
|
336
403
|
const dataStr = Object.keys(data).reduce(accumulator, '').trim();
|
|
404
|
+
this.searchTherm = filter;
|
|
337
405
|
return dataStr.includes(this.clientFilterService.normalizeText(filter));
|
|
338
406
|
};
|
|
339
407
|
this.dataSource.filter = this.filterText();
|
|
340
408
|
}
|
|
341
409
|
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 });
|
|
342
|
-
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: [
|
|
410
|
+
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: [
|
|
343
411
|
{ provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
|
|
344
|
-
], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rbTableContainer", first: true, predicate: ["rbTableContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-crud-container\">\n <div #rbTableContainer class=\"rb-table-container\">\n <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n <!-- Colunas Din\u00E2micas -->\n @for (column of columns; track column.key) {\n <ng-container [matColumnDef]=\"column.key\">\n\n @if(column.sortable === false) {\n <th mat-header-cell *matHeaderCellDef>\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let row\"\n [class.rb-clickable-cell]=\"column.action\"\n [class.rb-break-line-cell]=\"textLineBreakable\"\n (click)=\"column.action ? onClickCell(column.action, row) : null\"\n title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\">\n <!-- Terminar de implementar quando for decidido como ficar\u00E1 quando a informa\u00E7\u00E3o for em array de objetos.\n N\u00E3o deixar como primeira condi\u00E7\u00E3o, para evitar processamento desnecess\u00E1rio no pipe isArray\n @if (column.objCol?.label && (row[column.key] | isArray) && row[column.key].length){\n @for (item of row[column.key]; track $index) {\n <span>{{ item[column.objCol?.label || 'label'] }}</span>\n }\n } @else if -->\n @if (column.pipe) {\n {{ row[column.key] | rbCustomPipe:column.pipe }}\n } @else {\n {{ row[column.key] }}\n }\n </td>\n </ng-container>\n }\n\n <!-- Coluna de A\u00E7\u00F5es -->\n @if (actionsMenu.length) {\n <ng-container matColumnDef=\"actions\" stickyEnd class=\"sticky-column\">\n <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n <td mat-cell *matCellDef=\"let row\" class=\"rb-crud-actions-col\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>{{ 'more_vert' }}</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" panelClass=\"rb-menu-crud\">\n @for (action of actionsMenu; track action.label) {\n <button mat-menu-item\n (click)=\"onActionClick(action, row)\"\n title=\"{{action.label}}\"\n class=\"{{action.color}}\"\n [attr.aria-label]=\"action.label\">\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n {{ action.label }}\n </button>\n }\n </mat-menu>\n </td>\n </ng-container>\n }\n\n <!-- Cabe\u00E7alho e Corpo da Tabela -->\n <thead>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n </thead>\n <tbody>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </tbody>\n </table>\n </div>\n\n @if (dataSource.data.length === 0) {\n <div class=\"empty-message\">\n Nenhum dado dispon\u00EDvel no momento.\n </div>\n }\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n@if (pagination) {\n <mat-paginator #paginator\n class=\"rb-paginator\"\n [pageSize]=\"pageSize\"\n (page)=\"pageChange.emit($event.pageIndex)\"\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[10,25,50,100]\"\n aria-label=\"Selecione a p\u00E1gina\">\n </mat-paginator>\n}\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226)}.rb-crud-container tr{transition:background-color .3s ease-in-out}.rb-crud-container tr:hover{background-color:color-mix(in srgb,var(--mat-sys-primary) 5%,transparent)}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.rb-crud-container th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{background:#fff}.rb-table-container.is-overflowing th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right,.rb-table-container.is-overflowing td.mat-mdc-cell.mdc-data-table__cell.cdk-cell.rb-crud-actions-col.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{box-shadow:-1px 0 3px -1px #0000001a}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}td.rb-clickable-cell{cursor:pointer}td.rb-clickable-cell:hover{text-decoration:underline}td.rb-crud-actions-col{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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" }] });
|
|
412
|
+
], 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 <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\" class=\"rb-crud-actions-col\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" panelClass=\"rb-menu-crud\">\n @for (action of row.resolvedActions; track action.label) {\n <button mat-menu-item\n (click)=\"onActionClick(action, row)\"\n [title]=\"action.label\"\n [attr.aria-label]=\"action.label\"\n [ngClass]=\"action.color\">\n\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\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\n @if (!dataSource?.filteredData?.length) {\n <div class=\"empty-message\">\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 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);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" }] });
|
|
345
413
|
}
|
|
346
414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, decorators: [{
|
|
347
415
|
type: Component,
|
|
@@ -355,16 +423,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
355
423
|
MatIconModule,
|
|
356
424
|
MatButtonModule,
|
|
357
425
|
RbCustomPipe,
|
|
358
|
-
|
|
426
|
+
RbConditionalClassPipe,
|
|
427
|
+
// IsArrayPipe,
|
|
359
428
|
], providers: [
|
|
360
429
|
{ provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
|
|
361
|
-
], template: "<div class=\"rb-crud-container\">\n <div #rbTableContainer class=\"rb-table-container\">\n
|
|
430
|
+
], template: "<div class=\"rb-crud-container\">\n @if (dataSource?.filteredData?.length) {\n <div #rbTableContainer class=\"rb-table-container\">\n <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n <!-- Colunas Din\u00E2micas -->\n @for (column of columns; track column.key; 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\" class=\"rb-crud-actions-col\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" panelClass=\"rb-menu-crud\">\n @for (action of row.resolvedActions; track action.label) {\n <button mat-menu-item\n (click)=\"onActionClick(action, row)\"\n [title]=\"action.label\"\n [attr.aria-label]=\"action.label\"\n [ngClass]=\"action.color\">\n\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\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\n @if (!dataSource?.filteredData?.length) {\n <div class=\"empty-message\">\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 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);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"] }]
|
|
362
431
|
}], ctorParameters: () => [{ type: ClientFilterService }, { type: i0.Renderer2 }], propDecorators: { columns: [{
|
|
363
432
|
type: Input
|
|
364
433
|
}], data: [{
|
|
365
434
|
type: Input
|
|
366
435
|
}], actionsMenu: [{
|
|
367
436
|
type: Input
|
|
437
|
+
}], conditionalClasses: [{
|
|
438
|
+
type: Input
|
|
368
439
|
}], pagination: [{
|
|
369
440
|
type: Input
|
|
370
441
|
}], pageSize: [{
|
|
@@ -373,6 +444,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
373
444
|
type: Input
|
|
374
445
|
}], textLineBreakable: [{
|
|
375
446
|
type: Input
|
|
447
|
+
}], emptyMessageTherm: [{
|
|
448
|
+
type: Input
|
|
449
|
+
}], emptyMessageSentence: [{
|
|
450
|
+
type: Input
|
|
451
|
+
}], emptyLinkAction: [{
|
|
452
|
+
type: Input
|
|
376
453
|
}], actionClick: [{
|
|
377
454
|
type: Output
|
|
378
455
|
}], pageChange: [{
|
|
@@ -463,7 +540,7 @@ class RbCrudToolBarComponent {
|
|
|
463
540
|
this.buttonClick.emit(action);
|
|
464
541
|
}
|
|
465
542
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, deps: [{ token: ClientFilterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
466
|
-
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:
|
|
543
|
+
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 [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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
|
|
467
544
|
}
|
|
468
545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, decorators: [{
|
|
469
546
|
type: Component,
|
|
@@ -474,7 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
474
551
|
MatIconModule,
|
|
475
552
|
MatButtonModule,
|
|
476
553
|
RbDynamicButtonDirective,
|
|
477
|
-
], 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"] }]
|
|
554
|
+
], 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"] }]
|
|
478
555
|
}], ctorParameters: () => [{ type: ClientFilterService }], propDecorators: { searchPlaceholder: [{
|
|
479
556
|
type: Input
|
|
480
557
|
}], buttonSettings: [{
|
|
@@ -506,7 +583,7 @@ class RbDialogComponent {
|
|
|
506
583
|
this.dialogRef.close(action);
|
|
507
584
|
}
|
|
508
585
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
509
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbDialogComponent, isStandalone: true, selector: "rb-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\" >\n @if (data.isMultipleContent) {\n @for (item of data.multipleContent; track $index) {\n @if (item.subtitle) {\n <h3 class=\"rb-font-heading rb-h5\">{{item.subtitle}}</h3>\n }\n @if (item.paragraph) {\n <p class=\"rb-font-body rb-large\">{{item.paragraph}}</p>\n }\n }\n } @else {\n <h3 class=\"rb-font-heading rb-h5\">{{data.subtitle}}</h3>\n <p class=\"rb-font-body rb-large\">{{data.content}}</p>\n }\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n @if (data.buttons?.length) {\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n @for (button of data.buttons; track $index) {\n <button mat-button\n title=\"{{button.label}}\"\n class=\"{{button.color}}\"\n [color]=\"button.color\"\n [attr.aria-label]=\"button.label\"\n [rbDynamicButton]=\"button.directive || null\"\n (click)=\"onClickButton(button.action)\">\n @if (button.icon && button.iconPosition === 'start') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n {{button.label}}\n @if (button.icon && button.iconPosition === 'end') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n </button>\n }\n </mat-dialog-actions>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
586
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbDialogComponent, isStandalone: true, selector: "rb-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\" >\n @if (data.isMultipleContent) {\n @for (item of data.multipleContent; track $index) {\n @if (item.subtitle) {\n <h3 class=\"rb-font-heading rb-h5\">{{item.subtitle}}</h3>\n }\n @if (item.paragraph) {\n <p class=\"rb-font-body rb-large\">{{item.paragraph}}</p>\n }\n }\n } @else {\n <h3 class=\"rb-font-heading rb-h5\">{{data.subtitle}}</h3>\n <p class=\"rb-font-body rb-large\">{{data.content}}</p>\n }\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n @if (data.buttons?.length) {\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n @for (button of data.buttons; track $index) {\n <button mat-button\n title=\"{{button.label}}\"\n class=\"{{button.color}}\"\n [color]=\"button.color\"\n [attr.aria-label]=\"button.label\"\n [rbDynamicButton]=\"button.directive || null\"\n (click)=\"onClickButton(button.action)\">\n @if (button.icon && button.iconPosition === 'start') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n {{button.label}}\n @if (button.icon && button.iconPosition === 'end') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n </button>\n }\n </mat-dialog-actions>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
|
|
510
587
|
}
|
|
511
588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, decorators: [{
|
|
512
589
|
type: Component,
|
|
@@ -568,7 +645,7 @@ class RbFilterDropdownComponent {
|
|
|
568
645
|
// this.clientFilterService.setFilterItems(this.filterItems);
|
|
569
646
|
}
|
|
570
647
|
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 });
|
|
571
|
-
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:
|
|
648
|
+
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: 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"] }] });
|
|
572
649
|
}
|
|
573
650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, decorators: [{
|
|
574
651
|
type: Component,
|
|
@@ -593,11 +670,11 @@ class RbFilterPanelComponent {
|
|
|
593
670
|
this.dropdown.openMenu();
|
|
594
671
|
}
|
|
595
672
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
596
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RbFilterPanelComponent, isStandalone: true, selector: "rb-
|
|
673
|
+
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.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RbFilterDropdownComponent, selector: "rb-filter-dropdown", inputs: ["parentSelectorId", "options"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
|
|
597
674
|
}
|
|
598
675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, decorators: [{
|
|
599
676
|
type: Component,
|
|
600
|
-
args: [{ selector: 'rb-
|
|
677
|
+
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" }]
|
|
601
678
|
}], ctorParameters: () => [], propDecorators: { dropdown: [{
|
|
602
679
|
type: ViewChild,
|
|
603
680
|
args: [RbFilterDropdownComponent]
|
|
@@ -618,13 +695,134 @@ class RbCopyConfirmDialogComponent {
|
|
|
618
695
|
this.dialogRef.close(this.formGroup.value);
|
|
619
696
|
}
|
|
620
697
|
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 });
|
|
621
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCopyConfirmDialogComponent, isStandalone: true, selector: "lib-rb-copy-confirm-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\">\n <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n <mat-label>{{data.labelField}}</mat-label>\n <input matInput autofocus\n type=\"text\"\n [attr.aria-label]=\"data.labelField\"\n formControlName=\"fieldValue\"\n required>\n @if (formGroup.controls['fieldValue'].hasError('required')) {\n <mat-error >\n Campo obrigat\u00F3rio\n </mat-error>\n }\n </mat-form-field>\n\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n <button mat-button mat-dialog-close\n title=\"Cancelar\"\n aria-label=\"Cancelar\"\n class=\"secondary\"\n color=\"accent\"\n [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o duplicar'\"\n type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"Duplicar\"\n aria-label=\"Duplicar\"\n class=\"primary\"\n [color]=\"'primary'\"\n [attr.aria-label]=\"'Duplicar
|
|
698
|
+
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 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.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
|
|
622
699
|
}
|
|
623
700
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, decorators: [{
|
|
624
701
|
type: Component,
|
|
625
|
-
args: [{ selector: 'lib-rb-copy-confirm-dialog', imports: [MatDialogModule, MatButtonModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, MatIconModule, RbDynamicButtonDirective], template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\">\n <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n <mat-label>{{data.labelField}}</mat-label>\n <input matInput autofocus\n type=\"text\"\n [attr.aria-label]=\"data.labelField\"\n formControlName=\"fieldValue\"\n required>\n @if (formGroup.controls['fieldValue'].hasError('required')) {\n <mat-error >\n Campo obrigat\u00F3rio\n </mat-error>\n }\n </mat-form-field>\n\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n <button mat-button mat-dialog-close\n title=\"Cancelar\"\n aria-label=\"Cancelar\"\n class=\"secondary\"\n color=\"accent\"\n [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o duplicar'\"\n type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"Duplicar\"\n aria-label=\"Duplicar\"\n class=\"primary\"\n [color]=\"'primary'\"\n [attr.aria-label]=\"'Duplicar
|
|
702
|
+
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 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" }]
|
|
626
703
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }] });
|
|
627
704
|
|
|
705
|
+
class RbChangeLogDialogComponent {
|
|
706
|
+
data = inject(MAT_DIALOG_DATA);
|
|
707
|
+
dialogRef = inject((MatDialogRef));
|
|
708
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
709
|
+
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.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.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"] }] });
|
|
710
|
+
}
|
|
711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, decorators: [{
|
|
712
|
+
type: Component,
|
|
713
|
+
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" }]
|
|
714
|
+
}] });
|
|
715
|
+
|
|
716
|
+
class RbColumnsSortSettingComponent {
|
|
717
|
+
overlay;
|
|
718
|
+
viewContainerRef;
|
|
719
|
+
cdr;
|
|
720
|
+
parentSelectorId = '#parentDropdownColumnSettingsSelector';
|
|
721
|
+
columns = [];
|
|
722
|
+
offsetX = 0;
|
|
723
|
+
offsetY = 0;
|
|
724
|
+
showIndex = false;
|
|
725
|
+
columnsSettingContainer;
|
|
726
|
+
columnsChange = new EventEmitter();
|
|
727
|
+
showIndexService = inject(RbShowIndexCrudService);
|
|
728
|
+
overlayRef = null;
|
|
729
|
+
editableColumns = [];
|
|
730
|
+
backupColumns = [];
|
|
731
|
+
constructor(overlay, viewContainerRef, cdr) {
|
|
732
|
+
this.overlay = overlay;
|
|
733
|
+
this.viewContainerRef = viewContainerRef;
|
|
734
|
+
this.cdr = cdr;
|
|
735
|
+
console.log("Construtor RbColumnsSortSettingComponent");
|
|
736
|
+
}
|
|
737
|
+
openMenu() {
|
|
738
|
+
if (this.overlayRef) {
|
|
739
|
+
this.closeMenu();
|
|
740
|
+
return;
|
|
741
|
+
}
|
|
742
|
+
this.editableColumns = structuredClone(this.columns);
|
|
743
|
+
this.backupColumns = structuredClone(this.columns);
|
|
744
|
+
const positionStrategy = this.overlay.position()
|
|
745
|
+
.flexibleConnectedTo(document.querySelector(this.parentSelectorId || 'button'))
|
|
746
|
+
.withPositions([
|
|
747
|
+
{
|
|
748
|
+
originX: 'start',
|
|
749
|
+
originY: 'bottom',
|
|
750
|
+
overlayX: 'start',
|
|
751
|
+
overlayY: 'top',
|
|
752
|
+
offsetX: this.offsetX,
|
|
753
|
+
offsetY: this.offsetY,
|
|
754
|
+
},
|
|
755
|
+
]);
|
|
756
|
+
this.overlayRef = this.overlay.create({
|
|
757
|
+
positionStrategy,
|
|
758
|
+
hasBackdrop: true,
|
|
759
|
+
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
760
|
+
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
761
|
+
});
|
|
762
|
+
const portal = new TemplatePortal(this.columnsSettingContainer, this.viewContainerRef);
|
|
763
|
+
this.overlayRef.attach(portal);
|
|
764
|
+
this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
|
|
765
|
+
}
|
|
766
|
+
restore() {
|
|
767
|
+
this.editableColumns = structuredClone(this.backupColumns);
|
|
768
|
+
this.cdr.detectChanges();
|
|
769
|
+
}
|
|
770
|
+
save() {
|
|
771
|
+
this.columnsChange.emit([...this.editableColumns]);
|
|
772
|
+
this.closeMenu();
|
|
773
|
+
}
|
|
774
|
+
closeMenu() {
|
|
775
|
+
this.overlayRef?.dispose();
|
|
776
|
+
this.overlayRef = null;
|
|
777
|
+
}
|
|
778
|
+
drop(event) {
|
|
779
|
+
moveItemInArray(this.editableColumns, event.previousIndex, event.currentIndex);
|
|
780
|
+
}
|
|
781
|
+
showColumn(item) {
|
|
782
|
+
item.hidden = item.hidden ? false : true;
|
|
783
|
+
}
|
|
784
|
+
showIndexControl() {
|
|
785
|
+
this.showIndex = this.showIndex ? false : true;
|
|
786
|
+
this.showIndexService.setShowIndex(this.showIndex);
|
|
787
|
+
}
|
|
788
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
789
|
+
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:-webkit-fill-available;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"] }] });
|
|
790
|
+
}
|
|
791
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, decorators: [{
|
|
792
|
+
type: Component,
|
|
793
|
+
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:-webkit-fill-available;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"] }]
|
|
794
|
+
}], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { parentSelectorId: [{
|
|
795
|
+
type: Input
|
|
796
|
+
}], columns: [{
|
|
797
|
+
type: Input
|
|
798
|
+
}], offsetX: [{
|
|
799
|
+
type: Input
|
|
800
|
+
}], offsetY: [{
|
|
801
|
+
type: Input
|
|
802
|
+
}], showIndex: [{
|
|
803
|
+
type: Input
|
|
804
|
+
}], columnsSettingContainer: [{
|
|
805
|
+
type: ViewChild,
|
|
806
|
+
args: ['columnsSettingContainer']
|
|
807
|
+
}], columnsChange: [{
|
|
808
|
+
type: Output
|
|
809
|
+
}] } });
|
|
810
|
+
|
|
811
|
+
class IsArrayPipe {
|
|
812
|
+
transform(value) {
|
|
813
|
+
return Array.isArray(value);
|
|
814
|
+
}
|
|
815
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
816
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, isStandalone: true, name: "isArray" });
|
|
817
|
+
}
|
|
818
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: IsArrayPipe, decorators: [{
|
|
819
|
+
type: Pipe,
|
|
820
|
+
args: [{
|
|
821
|
+
name: 'isArray',
|
|
822
|
+
standalone: true
|
|
823
|
+
}]
|
|
824
|
+
}] });
|
|
825
|
+
|
|
628
826
|
// export interface CrudFilter {
|
|
629
827
|
// key: string;
|
|
630
828
|
// label: string;
|
|
@@ -641,5 +839,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
641
839
|
* Generated bundle index. Do not edit.
|
|
642
840
|
*/
|
|
643
841
|
|
|
644
|
-
export { RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
|
|
842
|
+
export { IsArrayPipe, RbChangeLogDialogComponent, RbColumnsSortSettingComponent, RbConditionalClassPipe, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
|
|
645
843
|
//# sourceMappingURL=rubeusteam-rb-angular-components.mjs.map
|