@rubeusteam/rb-angular-components 0.0.24 → 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 +223 -36
- package/fesm2022/rubeusteam-rb-angular-components.mjs.map +1 -1
- 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-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 +3 -0
|
@@ -1,16 +1,16 @@
|
|
|
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
15
|
import * as i3$1 from '@angular/material/icon';
|
|
16
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
@@ -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,6 +165,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
164
165
|
}]
|
|
165
166
|
}] });
|
|
166
167
|
|
|
168
|
+
class RbConditionalClassPipe {
|
|
169
|
+
transform(cellValue, columnKey, rules) {
|
|
170
|
+
const config = rules.find(r => r.key === columnKey);
|
|
171
|
+
if (!config || !Array.isArray(config.conditions))
|
|
172
|
+
return '';
|
|
173
|
+
return config.conditions
|
|
174
|
+
.filter(condition => this.evaluateCondition(cellValue, condition))
|
|
175
|
+
.map(condition => condition.class)
|
|
176
|
+
.join(' ');
|
|
177
|
+
}
|
|
178
|
+
evaluateCondition(value, condition) {
|
|
179
|
+
const { operator, value: expected } = condition;
|
|
180
|
+
switch (operator) {
|
|
181
|
+
case '==': return value == expected;
|
|
182
|
+
case '===': return value === expected;
|
|
183
|
+
case '!=': return value != expected;
|
|
184
|
+
case '!==': return value !== expected;
|
|
185
|
+
case '<': return value < expected;
|
|
186
|
+
case '>': return value > expected;
|
|
187
|
+
case '<=': return value <= expected;
|
|
188
|
+
case '>=': return value >= expected;
|
|
189
|
+
default:
|
|
190
|
+
console.warn(`Operador '${operator}' não suportado.`);
|
|
191
|
+
return false;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
195
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, isStandalone: true, name: "rbConditionalClass" });
|
|
196
|
+
}
|
|
197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbConditionalClassPipe, decorators: [{
|
|
198
|
+
type: Pipe,
|
|
199
|
+
args: [{
|
|
200
|
+
name: 'rbConditionalClass',
|
|
201
|
+
standalone: true,
|
|
202
|
+
pure: true
|
|
203
|
+
}]
|
|
204
|
+
}] });
|
|
205
|
+
|
|
167
206
|
class PaginatorPtbrIntlService extends MatPaginatorIntl {
|
|
168
207
|
itemsPerPageLabel = 'Itens por página:';
|
|
169
208
|
nextPageLabel = 'Próxima';
|
|
@@ -188,6 +227,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
188
227
|
}]
|
|
189
228
|
}] });
|
|
190
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
|
+
|
|
191
265
|
class ClientFilterService {
|
|
192
266
|
searchText = signal('');
|
|
193
267
|
setSearchText(text) {
|
|
@@ -219,25 +293,35 @@ class RbCrudComponent {
|
|
|
219
293
|
columns = [];
|
|
220
294
|
data = [];
|
|
221
295
|
actionsMenu = [];
|
|
296
|
+
conditionalClasses = [];
|
|
222
297
|
pagination = true;
|
|
223
298
|
pageSize = 10;
|
|
224
299
|
infiniteScroll = false;
|
|
225
300
|
textLineBreakable = false;
|
|
301
|
+
emptyMessageTherm = '';
|
|
302
|
+
emptyMessageSentence = 'um novo cadastro';
|
|
303
|
+
emptyLinkAction = '';
|
|
304
|
+
showIndexService = inject(RbShowIndexCrudService);
|
|
305
|
+
showIndex = this.showIndexService.showIndex;
|
|
226
306
|
actionClick = new EventEmitter();
|
|
227
307
|
// @Output() filterChange = new EventEmitter<any>();
|
|
228
308
|
pageChange = new EventEmitter();
|
|
229
309
|
paginator;
|
|
230
310
|
sort;
|
|
231
311
|
rbTableContainer;
|
|
312
|
+
resolvedData = resolveActionsForData(this.data, this.actionsMenu);
|
|
232
313
|
displayedColumns = [];
|
|
233
|
-
dataSource
|
|
314
|
+
dataSource;
|
|
234
315
|
filterText;
|
|
235
316
|
isOverflowing = false;
|
|
236
317
|
renderingProgressive = false;
|
|
237
318
|
THRESHOLD = 200;
|
|
319
|
+
searchTherm = '';
|
|
238
320
|
constructor(clientFilterService, renderer) {
|
|
239
321
|
this.clientFilterService = clientFilterService;
|
|
240
322
|
this.renderer = renderer;
|
|
323
|
+
const resolved = resolveActionsForData(this.data, this.actionsMenu);
|
|
324
|
+
this.dataSource = new MatTableDataSource([]);
|
|
241
325
|
this.filterText = this.clientFilterService.getSearchText();
|
|
242
326
|
effect(() => {
|
|
243
327
|
this.applyFilter();
|
|
@@ -262,37 +346,32 @@ class RbCrudComponent {
|
|
|
262
346
|
}
|
|
263
347
|
}
|
|
264
348
|
ngOnChanges() {
|
|
349
|
+
const processedData = resolveActionsForData(this.data, this.actionsMenu);
|
|
265
350
|
this.displayedColumns = this.columns.map(col => col.key);
|
|
266
351
|
if (this.actionsMenu.length) {
|
|
267
352
|
this.displayedColumns.push('actions');
|
|
268
353
|
}
|
|
269
|
-
this.renderingControl();
|
|
354
|
+
this.renderingControl(processedData);
|
|
270
355
|
}
|
|
271
|
-
renderingControl() {
|
|
272
|
-
if (
|
|
356
|
+
renderingControl(processedData) {
|
|
357
|
+
if (processedData.length > this.THRESHOLD) {
|
|
273
358
|
this.renderingProgressive = true;
|
|
274
|
-
this.renderFirstPage();
|
|
359
|
+
this.renderFirstPage(processedData);
|
|
275
360
|
setTimeout(() => {
|
|
276
|
-
this.loadFullData();
|
|
361
|
+
this.loadFullData(processedData);
|
|
277
362
|
}, 100);
|
|
278
363
|
}
|
|
279
364
|
else {
|
|
280
|
-
this.dataSource.data =
|
|
365
|
+
this.dataSource.data = processedData;
|
|
281
366
|
this.renderingProgressive = false;
|
|
282
367
|
}
|
|
283
368
|
}
|
|
284
|
-
renderFirstPage() {
|
|
285
|
-
const firstPage =
|
|
286
|
-
this.dataSource =
|
|
287
|
-
this.dataSource.paginator = this.paginator;
|
|
288
|
-
this.dataSource.sort = this.sort;
|
|
289
|
-
this.defineSortRule();
|
|
369
|
+
renderFirstPage(processedData) {
|
|
370
|
+
const firstPage = processedData.slice(0, this.pageSize);
|
|
371
|
+
this.dataSource.data = firstPage;
|
|
290
372
|
}
|
|
291
|
-
loadFullData() {
|
|
292
|
-
this.dataSource =
|
|
293
|
-
this.dataSource.paginator = this.paginator;
|
|
294
|
-
this.dataSource.sort = this.sort;
|
|
295
|
-
this.defineSortRule();
|
|
373
|
+
loadFullData(processedData) {
|
|
374
|
+
this.dataSource.data = processedData;
|
|
296
375
|
this.renderingProgressive = false;
|
|
297
376
|
}
|
|
298
377
|
defineSortRule() {
|
|
@@ -309,6 +388,9 @@ class RbCrudComponent {
|
|
|
309
388
|
onClickCell(action, row) {
|
|
310
389
|
this.actionClick.emit({ action: action, row });
|
|
311
390
|
}
|
|
391
|
+
onClickLink() {
|
|
392
|
+
this.actionClick.emit({ action: this.emptyLinkAction });
|
|
393
|
+
}
|
|
312
394
|
// applyFilter() {
|
|
313
395
|
// this.dataSource.filter = this.filterText().trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
314
396
|
// }
|
|
@@ -319,14 +401,15 @@ class RbCrudComponent {
|
|
|
319
401
|
return currentTerm + ' ' + (typeof value === 'string' ? this.clientFilterService.normalizeText(value) : '');
|
|
320
402
|
};
|
|
321
403
|
const dataStr = Object.keys(data).reduce(accumulator, '').trim();
|
|
404
|
+
this.searchTherm = filter;
|
|
322
405
|
return dataStr.includes(this.clientFilterService.normalizeText(filter));
|
|
323
406
|
};
|
|
324
407
|
this.dataSource.filter = this.filterText();
|
|
325
408
|
}
|
|
326
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 });
|
|
327
|
-
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: [
|
|
328
411
|
{ provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
|
|
329
|
-
], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rbTableContainer", first: true, predicate: ["rbTableContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-crud-container\">\n <div #rbTableContainer class=\"rb-table-container\">\n <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n <!-- Colunas Din\u00E2micas -->\n @for (column of columns; track column.key) {\n <ng-container [matColumnDef]=\"column.key\">\n\n @if(column.sortable === false) {\n <th mat-header-cell *matHeaderCellDef>\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let row\"\n [class.rb-clickable-cell]=\"column.action\"\n [class.rb-break-line-cell]=\"textLineBreakable\"\n (click)=\"column.action ? onClickCell(column.action, row) : null\"\n title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\">\n <!-- Terminar de implementar quando for decidido como ficar\u00E1 quando a informa\u00E7\u00E3o for em array de objetos.\n N\u00E3o deixar como primeira condi\u00E7\u00E3o, para evitar processamento desnecess\u00E1rio no pipe isArray\n @if (column.objCol?.label && (row[column.key] | isArray) && row[column.key].length){\n @for (item of row[column.key]; track $index) {\n <span>{{ item[column.objCol?.label || 'label'] }}</span>\n }\n } @else if -->\n @if (column.pipe) {\n {{ row[column.key] | rbCustomPipe:column.pipe }}\n } @else {\n {{ row[column.key] }}\n }\n </td>\n </ng-container>\n }\n\n <!-- Coluna de A\u00E7\u00F5es -->\n @if (actionsMenu.length) {\n <ng-container matColumnDef=\"actions\" stickyEnd class=\"sticky-column\">\n <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n <td mat-cell *matCellDef=\"let row\" class=\"rb-crud-actions-col\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>{{ 'more_vert' }}</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" panelClass=\"rb-menu-crud\">\n @for (action of actionsMenu; track action.label) {\n <button mat-menu-item\n (click)=\"onActionClick(action, row)\"\n title=\"{{action.label}}\"\n class=\"{{action.color}}\"\n [attr.aria-label]=\"action.label\">\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n {{ action.label }}\n </button>\n }\n </mat-menu>\n </td>\n </ng-container>\n }\n\n <!-- Cabe\u00E7alho e Corpo da Tabela -->\n <thead>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n </thead>\n <tbody>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </tbody>\n </table>\n </div>\n\n @if (dataSource.data.length === 0) {\n <div class=\"empty-message\">\n Nenhum dado dispon\u00EDvel no momento.\n </div>\n }\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n@if (pagination) {\n <mat-paginator #paginator\n class=\"rb-paginator\"\n [pageSize]=\"pageSize\"\n (page)=\"pageChange.emit($event.pageIndex)\"\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[10,25,50,100]\"\n aria-label=\"Selecione a p\u00E1gina\">\n </mat-paginator>\n}\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226)}.rb-crud-container tr{transition:background-color .3s ease-in-out}.rb-crud-container tr:hover{background-color:color-mix(in srgb,var(--mat-sys-primary) 5%,transparent)}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.rb-crud-container th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{background:#fff}.rb-table-container.is-overflowing th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right,.rb-table-container.is-overflowing td.mat-mdc-cell.mdc-data-table__cell.cdk-cell.rb-crud-actions-col.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{box-shadow:-1px 0 3px -1px #0000001a}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}td.rb-clickable-cell{cursor:pointer}td.rb-clickable-cell:hover{text-decoration:underline}td.rb-crud-actions-col{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: RbCustomPipe, name: "rbCustomPipe" }] });
|
|
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" }] });
|
|
330
413
|
}
|
|
331
414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, decorators: [{
|
|
332
415
|
type: Component,
|
|
@@ -340,16 +423,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
340
423
|
MatIconModule,
|
|
341
424
|
MatButtonModule,
|
|
342
425
|
RbCustomPipe,
|
|
426
|
+
RbConditionalClassPipe,
|
|
343
427
|
// IsArrayPipe,
|
|
344
428
|
], providers: [
|
|
345
429
|
{ provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService }
|
|
346
|
-
], 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"] }]
|
|
347
431
|
}], ctorParameters: () => [{ type: ClientFilterService }, { type: i0.Renderer2 }], propDecorators: { columns: [{
|
|
348
432
|
type: Input
|
|
349
433
|
}], data: [{
|
|
350
434
|
type: Input
|
|
351
435
|
}], actionsMenu: [{
|
|
352
436
|
type: Input
|
|
437
|
+
}], conditionalClasses: [{
|
|
438
|
+
type: Input
|
|
353
439
|
}], pagination: [{
|
|
354
440
|
type: Input
|
|
355
441
|
}], pageSize: [{
|
|
@@ -358,6 +444,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
358
444
|
type: Input
|
|
359
445
|
}], textLineBreakable: [{
|
|
360
446
|
type: Input
|
|
447
|
+
}], emptyMessageTherm: [{
|
|
448
|
+
type: Input
|
|
449
|
+
}], emptyMessageSentence: [{
|
|
450
|
+
type: Input
|
|
451
|
+
}], emptyLinkAction: [{
|
|
452
|
+
type: Input
|
|
361
453
|
}], actionClick: [{
|
|
362
454
|
type: Output
|
|
363
455
|
}], pageChange: [{
|
|
@@ -448,7 +540,7 @@ class RbCrudToolBarComponent {
|
|
|
448
540
|
this.buttonClick.emit(action);
|
|
449
541
|
}
|
|
450
542
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, deps: [{ token: ClientFilterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
451
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudToolBarComponent, isStandalone: true, selector: "rb-crud-tool-bar", inputs: { searchPlaceholder: "searchPlaceholder", buttonSettings: "buttonSettings", iconButton: "iconButton", titleButton: "titleButton", leftButtonSettings: "leftButtonSettings" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"rb-crud-tool-bar-container\">\n <div class=\"rb-flex-line-space-between\">\n <div class=\"rb-flex-align-items-center\">\n @for (btn of buttonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n\n <div class=\"rb-search-box rb-flex-align-items-center\">\n <mat-form-field class=\"rb-search-field\">\n <mat-label>Pesquisar</mat-label>\n <input\n matInput\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n placeholder={{searchPlaceholder}}\n />\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n @for (btn of leftButtonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
|
|
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"] }] });
|
|
452
544
|
}
|
|
453
545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, decorators: [{
|
|
454
546
|
type: Component,
|
|
@@ -459,7 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
459
551
|
MatIconModule,
|
|
460
552
|
MatButtonModule,
|
|
461
553
|
RbDynamicButtonDirective,
|
|
462
|
-
], 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"] }]
|
|
463
555
|
}], ctorParameters: () => [{ type: ClientFilterService }], propDecorators: { searchPlaceholder: [{
|
|
464
556
|
type: Input
|
|
465
557
|
}], buttonSettings: [{
|
|
@@ -553,7 +645,7 @@ class RbFilterDropdownComponent {
|
|
|
553
645
|
// this.clientFilterService.setFilterItems(this.filterItems);
|
|
554
646
|
}
|
|
555
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 });
|
|
556
|
-
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"] }] });
|
|
557
649
|
}
|
|
558
650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, decorators: [{
|
|
559
651
|
type: Component,
|
|
@@ -578,11 +670,11 @@ class RbFilterPanelComponent {
|
|
|
578
670
|
this.dropdown.openMenu();
|
|
579
671
|
}
|
|
580
672
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
581
|
-
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"] }] });
|
|
582
674
|
}
|
|
583
675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, decorators: [{
|
|
584
676
|
type: Component,
|
|
585
|
-
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" }]
|
|
586
678
|
}], ctorParameters: () => [], propDecorators: { dropdown: [{
|
|
587
679
|
type: ViewChild,
|
|
588
680
|
args: [RbFilterDropdownComponent]
|
|
@@ -603,24 +695,119 @@ class RbCopyConfirmDialogComponent {
|
|
|
603
695
|
this.dialogRef.close(this.formGroup.value);
|
|
604
696
|
}
|
|
605
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 });
|
|
606
|
-
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"] }] });
|
|
607
699
|
}
|
|
608
700
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, decorators: [{
|
|
609
701
|
type: Component,
|
|
610
|
-
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" }]
|
|
611
703
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }] });
|
|
612
704
|
|
|
613
705
|
class RbChangeLogDialogComponent {
|
|
614
706
|
data = inject(MAT_DIALOG_DATA);
|
|
615
707
|
dialogRef = inject((MatDialogRef));
|
|
616
708
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
617
|
-
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", "pagination", "pageSize", "infiniteScroll", "textLineBreakable"], outputs: ["actionClick", "pageChange"] }] });
|
|
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"] }] });
|
|
618
710
|
}
|
|
619
711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, decorators: [{
|
|
620
712
|
type: Component,
|
|
621
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" }]
|
|
622
714
|
}] });
|
|
623
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
|
+
|
|
624
811
|
class IsArrayPipe {
|
|
625
812
|
transform(value) {
|
|
626
813
|
return Array.isArray(value);
|
|
@@ -652,5 +839,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
652
839
|
* Generated bundle index. Do not edit.
|
|
653
840
|
*/
|
|
654
841
|
|
|
655
|
-
export { IsArrayPipe, RbChangeLogDialogComponent, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
|
|
842
|
+
export { IsArrayPipe, RbChangeLogDialogComponent, RbColumnsSortSettingComponent, RbConditionalClassPipe, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
|
|
656
843
|
//# sourceMappingURL=rubeusteam-rb-angular-components.mjs.map
|