@rubeusteam/rb-angular-components 0.0.1-dev.1 → 0.0.2-dev.1
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 +749 -29
- package/fesm2022/rubeusteam-rb-angular-components.mjs.map +1 -1
- package/lib/components/rb-header/rb-header.component.d.ts +42 -0
- package/lib/components/rb-help-panel/rb-help-panel.component.d.ts +28 -0
- package/lib/components/rb-sidebar-navigation/rb-sidebar-navigation.component.d.ts +81 -0
- package/lib/directives/rb-overflow-tooltip/rb-overflow-tooltip.directive.d.ts +14 -0
- package/lib/interfaces/rb-header.interface.d.ts +19 -0
- package/lib/interfaces/rb-help-panel.interface.d.ts +17 -0
- package/lib/interfaces/rb-sidebar-navigation.interface.d.ts +19 -0
- package/package.json +2 -2
- package/public-api.d.ts +7 -0
- package/src/lib/styles/README.md +0 -83
- package/src/lib/styles/_crud.scss +0 -34
- package/src/lib/styles/_dialog.scss +0 -59
- package/src/lib/styles/_layout.scss +0 -86
- package/src/lib/styles/_typography.scss +0 -62
- package/src/lib/styles/index.scss +0 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, Injectable, signal, inject, EventEmitter, effect, Component, Input, Output, ViewChild, Directive } from '@angular/core';
|
|
2
|
+
import { Pipe, Injectable, signal, inject, EventEmitter, effect, Component, Input, Output, ViewChild, Directive, ElementRef, ViewEncapsulation, DestroyRef } from '@angular/core';
|
|
3
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';
|
|
@@ -8,24 +8,32 @@ import * as i5 from '@angular/material/paginator';
|
|
|
8
8
|
import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
9
9
|
import * as i6 from '@angular/material/sort';
|
|
10
10
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
11
|
-
import * as
|
|
12
|
-
import { CommonModule } from '@angular/common';
|
|
11
|
+
import * as i1 from '@angular/common';
|
|
12
|
+
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
13
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';
|
|
17
|
-
import * as i2
|
|
17
|
+
import * as i2 from '@angular/material/button';
|
|
18
18
|
import { MatButtonModule } from '@angular/material/button';
|
|
19
|
-
import * as i1 from '@angular/material/form-field';
|
|
19
|
+
import * as i1$1 from '@angular/material/form-field';
|
|
20
20
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
21
|
-
import * as i1$
|
|
21
|
+
import * as i1$2 from '@angular/material/dialog';
|
|
22
22
|
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
|
|
23
|
-
import * as i1$
|
|
23
|
+
import * as i1$3 from '@angular/cdk/overlay';
|
|
24
24
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
25
25
|
import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
26
|
-
import * as i1$
|
|
27
|
-
import { Validators, ReactiveFormsModule } from '@angular/forms';
|
|
26
|
+
import * as i1$4 from '@angular/forms';
|
|
27
|
+
import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
28
28
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
29
|
+
import * as i2$1 from '@angular/router';
|
|
30
|
+
import { Router, NavigationEnd, RouterModule } from '@angular/router';
|
|
31
|
+
import * as i3$2 from '@angular/material/tooltip';
|
|
32
|
+
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
33
|
+
import { filter, Subject } from 'rxjs';
|
|
34
|
+
import * as i1$5 from '@angular/platform-browser';
|
|
35
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
36
|
+
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
|
|
29
37
|
|
|
30
38
|
class RbCustomPipe {
|
|
31
39
|
transform(value, type) {
|
|
@@ -329,14 +337,9 @@ class RbCrudComponent {
|
|
|
329
337
|
this.filterText = this.clientFilterService.getSearchText();
|
|
330
338
|
effect(() => {
|
|
331
339
|
this.applyFilter();
|
|
332
|
-
console.log('???? Constructor RB-CRUD effect', Date());
|
|
333
340
|
});
|
|
334
|
-
console.log('-->>> Constructor RB-CRUD finish', Date());
|
|
335
341
|
}
|
|
336
342
|
ngAfterViewInit() {
|
|
337
|
-
console.timeEnd('onchanges');
|
|
338
|
-
// console.timeEnd('render');
|
|
339
|
-
console.log('===== After View', Date());
|
|
340
343
|
this.dataSource.paginator = this.paginator;
|
|
341
344
|
this.dataSource.sort = this.sort;
|
|
342
345
|
this.defineSortRule();
|
|
@@ -427,7 +430,7 @@ class RbCrudComponent {
|
|
|
427
430
|
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: [
|
|
428
431
|
{ provide: MatPaginatorIntl, useClass: PaginatorPtbrIntlService },
|
|
429
432
|
ClientFilterService
|
|
430
|
-
], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rbTableContainer", first: true, predicate: ["rbTableContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-crud-container\">\n <!-- @if (dataSource?.filteredData?.length) { -->\n <div #rbTableContainer class=\"rb-table-container\"\n [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\">\n <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n <!-- Colunas Din\u00E2micas -->\n @for (column of columns; track column.key; let i = $index) {\n <ng-container [matColumnDef]=\"column.key\">\n @if(column.sortable === false) {\n <th mat-header-cell *matHeaderCellDef>\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let row; let il = index\"\n [class.rb-clickable-cell]=\"column.action\"\n [class.rb-break-line-cell]=\"textLineBreakable\"\n (click)=\"column.action ? onClickCell(column.action, row) : null\"\n title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\"\n [class]=\"row[column.conditionalClassKey || column.key] | rbConditionalClass:(column.conditionalClassKey || column.key):conditionalClasses\"\n >\n <!-- Terminar de implementar quando for decidido como ficar\u00E1 quando a informa\u00E7\u00E3o for em array de objetos.\n N\u00E3o deixar como primeira condi\u00E7\u00E3o, para evitar processamento desnecess\u00E1rio no pipe isArray\n @if (column.objCol?.label && (row[column.key] | isArray) && row[column.key].length){\n @for (item of row[column.key]; track $index) {\n <span>{{ item[column.objCol?.label || 'label'] }}</span>\n }\n } @else if -->\n @if(i===0 && showIndex()) {\n <span class=\"rb-crud-float-index\">{{il+1}}</span>\n }\n @if (column.pipe) {\n {{ row[column.key] | rbCustomPipe:column.pipe }}\n } @else {\n {{ row[column.key] }}\n }\n </td>\n </ng-container>\n }\n\n <!-- Coluna de A\u00E7\u00F5es -->\n @if (actionsMenu.length) {\n <ng-container matColumnDef=\"actions\" stickyEnd class=\"sticky-column\">\n <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n <td mat-cell *matCellDef=\"let row; let il = index\" class=\"rb-crud-actions-col\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"actionsMenuRef\"\n (menuOpened)=\"openMenu(row)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </td>\n </ng-container>\n }\n\n\n <!-- Cabe\u00E7alho e Corpo da Tabela -->\n <thead>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n </thead>\n <tbody>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </tbody>\n </table>\n\n <!-- Menu de A\u00E7\u00F5es -->\n <mat-menu #actionsMenuRef=\"matMenu\" class=\"rb-menu-crud\">\n @for (action of displayedActionsMenu; track action.label) {\n @if (resolvePropertyValue(action.visible, selectedRow)) {\n @if (action.hasDivider) {\n <hr>\n }\n\n <button\n mat-menu-item\n (click)=\"onActionClick(action, selectedRow)\"\n [title]=\"action.label\"\n [attr.aria-label]=\"action.label\"\n [attr.color]=\"action.color\"\n [disabled]=\"resolvePropertyValue(action.disabled, selectedRow, false)\"\n [ngClass]=\"action.class\">\n\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n\n {{ action.label }}\n\n </button>\n }\n }\n </mat-menu>\n\n </div>\n <!-- } -->\n\n <!-- @if (!dataSource?.filteredData?.length) { -->\n <div class=\"empty-message\" [style.display]=\"dataSource?.filteredData?.length ? 'none' : 'block'\">\n <h2>Nenhum registro {{emptyMessageTherm ? 'de ' + emptyMessageTherm : ''}} encontrado\n @if(searchTherm.length) {\n para o termo \"{{searchTherm}}\"\n }\n </h2>\n <p>Experimente <span (click)=\"onClickLink()\">adicionar {{emptyMessageSentence}}</span>.</p>\n </div>\n <!-- } -->\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n<!-- @if (pagination && dataSource?.filteredData?.length) { -->\n <mat-paginator #paginator\n [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\"\n class=\"rb-paginator\"\n [pageSize]=\"pageSize\"\n (page)=\"pageChange.emit($event)\"\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[10,25,50,100]\"\n aria-label=\"Selecione a p\u00E1gina\">\n </mat-paginator>\n<!-- } -->\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226);position:relative}.rb-crud-container td.rb-clickable-cell{cursor:pointer}.rb-crud-container td.rb-clickable-cell:hover{text-decoration:underline}.rb-crud-container td.rb-crud-actions-col{background-color:#fff}.rb-crud-container tr,.rb-crud-container tr td.rb-crud-actions-col{transition:background-color .3s ease-in-out}.rb-crud-container tr:not(.mat-mdc-header-row):hover{background-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 5%,transparent)}.rb-crud-container tr:not(.mat-mdc-header-row):hover td.rb-crud-actions-col{background-color:#e6efef}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.rb-crud-container th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{background:#fff}.rb-crud-container span.rb-crud-float-index{position:absolute;top:2px;left:2px;color:var(--mdc-protected-button-label-text-color, var(--mat-sys-primary));background-color:var(--mdc-protected-button-container-color, var(--mat-sys-surface));border-radius:3px;padding:0 3px;box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f}.rb-table-container.is-overflowing th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right,.rb-table-container.is-overflowing td.mat-mdc-cell.mdc-data-table__cell.cdk-cell.rb-crud-actions-col.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{box-shadow:-1px 0 3px -1px #0000001a}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}.empty-message h2{font-family:Roboto;font-weight:500;font-style:Medium;font-size:16px;line-height:23.4px;letter-spacing:0%;text-align:center}.empty-message p{font-family:Roboto;font-weight:400;font-style:Regular;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span{color:var(--mat-sys-primary, #006a6a);font-family:Roboto;font-weight:700;font-style:Bold;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span:hover{text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: RbCustomPipe, name: "rbCustomPipe" }, { kind: "pipe", type: RbConditionalClassPipe, name: "rbConditionalClass" }] });
|
|
433
|
+
], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rbTableContainer", first: true, predicate: ["rbTableContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-crud-container\">\n <!-- @if (dataSource?.filteredData?.length) { -->\n <div #rbTableContainer class=\"rb-table-container\"\n [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\">\n <table mat-table [dataSource]=\"dataSource\" matSort class=\"rb-table\">\n <!-- Colunas Din\u00E2micas -->\n @for (column of columns; track column.key; let i = $index) {\n <ng-container [matColumnDef]=\"column.key\">\n @if(column.sortable === false) {\n <th mat-header-cell *matHeaderCellDef>\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let row; let il = index\"\n [class.rb-clickable-cell]=\"column.action\"\n [class.rb-break-line-cell]=\"textLineBreakable\"\n (click)=\"column.action ? onClickCell(column.action, row) : null\"\n title=\"{{ column.pipe ? (row[column.key] | rbCustomPipe:column.pipe) : row[column.key] }}\"\n [class]=\"row[column.conditionalClassKey || column.key] | rbConditionalClass:(column.conditionalClassKey || column.key):conditionalClasses\"\n >\n <!-- Terminar de implementar quando for decidido como ficar\u00E1 quando a informa\u00E7\u00E3o for em array de objetos.\n N\u00E3o deixar como primeira condi\u00E7\u00E3o, para evitar processamento desnecess\u00E1rio no pipe isArray\n @if (column.objCol?.label && (row[column.key] | isArray) && row[column.key].length){\n @for (item of row[column.key]; track $index) {\n <span>{{ item[column.objCol?.label || 'label'] }}</span>\n }\n } @else if -->\n @if(i===0 && showIndex()) {\n <span class=\"rb-crud-float-index\">{{il+1}}</span>\n }\n @if (column.pipe) {\n {{ row[column.key] | rbCustomPipe:column.pipe }}\n } @else {\n {{ row[column.key] }}\n }\n </td>\n </ng-container>\n }\n\n <!-- Coluna de A\u00E7\u00F5es -->\n @if (actionsMenu.length) {\n <ng-container matColumnDef=\"actions\" stickyEnd class=\"sticky-column\">\n <th mat-header-cell *matHeaderCellDef> A\u00E7\u00F5es </th>\n <td mat-cell *matCellDef=\"let row; let il = index\" class=\"rb-crud-actions-col\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"actionsMenuRef\"\n (menuOpened)=\"openMenu(row)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </td>\n </ng-container>\n }\n\n\n <!-- Cabe\u00E7alho e Corpo da Tabela -->\n <thead>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n </thead>\n <tbody>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </tbody>\n </table>\n\n <!-- Menu de A\u00E7\u00F5es -->\n <mat-menu #actionsMenuRef=\"matMenu\" class=\"rb-menu-crud\">\n @for (action of displayedActionsMenu; track action.label) {\n @if (resolvePropertyValue(action.visible, selectedRow)) {\n @if (action.hasDivider) {\n <hr>\n }\n\n <button\n mat-menu-item\n (click)=\"onActionClick(action, selectedRow)\"\n [title]=\"action.label\"\n [attr.aria-label]=\"action.label\"\n [attr.color]=\"action.color\"\n [disabled]=\"resolvePropertyValue(action.disabled, selectedRow, false)\"\n [ngClass]=\"action.class\">\n\n @if (action.icon) {\n <mat-icon>{{ action.icon }}</mat-icon>\n }\n\n {{ action.label }}\n\n </button>\n }\n }\n </mat-menu>\n\n </div>\n <!-- } -->\n\n <!-- @if (!dataSource?.filteredData?.length) { -->\n <div class=\"empty-message\" [style.display]=\"dataSource?.filteredData?.length ? 'none' : 'block'\">\n <h2>Nenhum registro {{emptyMessageTherm ? 'de ' + emptyMessageTherm : ''}} encontrado\n @if(searchTherm.length) {\n para o termo \"{{searchTherm}}\"\n }\n </h2>\n <p>Experimente <span (click)=\"onClickLink()\">adicionar {{emptyMessageSentence}}</span>.</p>\n </div>\n <!-- } -->\n</div>\n\n<!-- Pagina\u00E7\u00E3o -->\n<!-- @if (pagination && dataSource?.filteredData?.length) { -->\n <mat-paginator #paginator\n [style.display]=\"dataSource?.filteredData?.length ? 'block' : 'none'\"\n class=\"rb-paginator\"\n [pageSize]=\"pageSize\"\n (page)=\"pageChange.emit($event)\"\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[10,25,50,100]\"\n aria-label=\"Selecione a p\u00E1gina\">\n </mat-paginator>\n<!-- } -->\n", styles: ["@charset \"UTF-8\";.rb-crud-container{display:flex;flex-direction:column;max-width:100%;overflow:auto;max-height:inherit;margin-top:32px;--mat-table-header-container-height: 48px;--mat-table-row-item-height: 48px;--mat-table-row-item-container-height: 48px}.rb-crud-container th{padding:0 8px;border-bottom:1px solid transparent}.rb-crud-container td{padding:0 8px;border-bottom:1px solid rgb(225,227,226);position:relative}.rb-crud-container td.rb-clickable-cell{cursor:pointer}.rb-crud-container td.rb-clickable-cell:hover{text-decoration:underline}.rb-crud-container td.rb-crud-actions-col{background-color:#fff}.rb-crud-container tr,.rb-crud-container tr td.rb-crud-actions-col{transition:background-color .3s ease-in-out}.rb-crud-container tr:not(.mat-mdc-header-row):hover{background-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 5%,transparent)}.rb-crud-container tr:not(.mat-mdc-header-row):hover td.rb-crud-actions-col{background-color:#e6efef}.rb-crud-container td:not(.rb-break-line-cell){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.rb-crud-container .mat-row{height:36px}.rb-crud-container .rb-table-container{display:flex;flex-direction:column;max-height:100%}.rb-crud-container tbody.mdc-data-table__content{flex:1;overflow-y:auto}.rb-crud-container .mat-mdc-header-cell{vertical-align:top}.rb-crud-container th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{background:#fff}.rb-crud-container span.rb-crud-float-index{position:absolute;top:2px;left:2px;color:var(--mdc-protected-button-label-text-color, var(--mat-sys-primary));background-color:var(--mdc-protected-button-container-color, var(--mat-sys-surface));border-radius:3px;padding:0 3px;box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f}.rb-table-container.is-overflowing th.mat-mdc-header-cell.mdc-data-table__header-cell.cdk-header-cell.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right,.rb-table-container.is-overflowing td.mat-mdc-cell.mdc-data-table__cell.cdk-cell.rb-crud-actions-col.cdk-column-actions.mat-column-actions.mat-mdc-table-sticky.mat-mdc-table-sticky-border-elem-right{box-shadow:-1px 0 3px -1px #0000001a}.mat-mdc-table.rb-table{background-color:#fff}mat-paginator.mat-mdc-paginator.rb-paginator{background-color:#fff}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.rb-paginator{padding-top:16px}.empty-message h2{font-family:Roboto;font-weight:500;font-style:Medium;font-size:16px;line-height:23.4px;letter-spacing:0%;text-align:center}.empty-message p{font-family:Roboto;font-weight:400;font-style:Regular;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span{color:var(--mat-sys-primary, #006a6a);font-family:Roboto;font-weight:700;font-style:Bold;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:center}.empty-message p span:hover{text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: RbCustomPipe, name: "rbCustomPipe" }, { kind: "pipe", type: RbConditionalClassPipe, name: "rbConditionalClass" }] });
|
|
431
434
|
}
|
|
432
435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudComponent, decorators: [{
|
|
433
436
|
type: Component,
|
|
@@ -558,7 +561,7 @@ class RbCrudToolBarComponent {
|
|
|
558
561
|
this.buttonClick.emit(action);
|
|
559
562
|
}
|
|
560
563
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
561
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudToolBarComponent, isStandalone: true, selector: "rb-crud-tool-bar", inputs: { targetCrud: "targetCrud", searchPlaceholder: "searchPlaceholder", buttonSettings: "buttonSettings", iconButton: "iconButton", titleButton: "titleButton", leftButtonSettings: "leftButtonSettings" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"rb-crud-tool-bar-container\">\n <div class=\"rb-flex-line-space-between\">\n <div class=\"rb-flex-align-items-center\">\n @for (btn of buttonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n\n <div class=\"rb-search-box rb-flex-align-items-center\">\n <mat-form-field class=\"rb-search-field\">\n <mat-label>Pesquisar</mat-label>\n <input\n matInput\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n placeholder={{searchPlaceholder}}\n />\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n @for (btn of leftButtonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [attr.id]=\"btn.selector\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base{min-width:40px}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base .mat-icon{vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2
|
|
564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCrudToolBarComponent, isStandalone: true, selector: "rb-crud-tool-bar", inputs: { targetCrud: "targetCrud", searchPlaceholder: "searchPlaceholder", buttonSettings: "buttonSettings", iconButton: "iconButton", titleButton: "titleButton", leftButtonSettings: "leftButtonSettings" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"rb-crud-tool-bar-container\">\n <div class=\"rb-flex-line-space-between\">\n <div class=\"rb-flex-align-items-center\">\n @for (btn of buttonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n\n <div class=\"rb-search-box rb-flex-align-items-center\">\n <mat-form-field class=\"rb-search-field\">\n <mat-label>Pesquisar</mat-label>\n <input\n matInput\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n placeholder={{searchPlaceholder}}\n />\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n @for (btn of leftButtonSettings; track btn.label) {\n <button mat-button\n title=\"{{btn.label}}\"\n class=\"{{btn.color}}\"\n color=\"{{btn.color}}\"\n [attr.aria-label]=\"btn.label\"\n [attr.id]=\"btn.selector\"\n [rbDynamicButton]=\"btn.directive || null\"\n (click)=\"onClickButton(btn)\">\n @if (btn.icon) {\n <mat-icon>{{ btn.icon }}</mat-icon>\n }\n {{ btn.label }}\n </button>\n }\n </div>\n </div>\n</div>\n\n", styles: [".rb-search-box{display:flex;align-items:center;justify-content:flex-end}.rb-flex-line-space-between{display:flex;justify-content:space-between;flex-wrap:wrap}.rb-flex-align-items-center{display:flex;align-items:center;flex-wrap:wrap;gap:8px}::ng-deep .rb-search-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}::ng-deep .rb-search-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:0}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base{min-width:40px}::ng-deep button.mdc-button.mat-mdc-button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base .mat-icon{vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.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.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"] }] });
|
|
562
565
|
}
|
|
563
566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCrudToolBarComponent, decorators: [{
|
|
564
567
|
type: Component,
|
|
@@ -603,7 +606,7 @@ class RbDialogComponent {
|
|
|
603
606
|
this.dialogRef.close(action);
|
|
604
607
|
}
|
|
605
608
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
606
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbDialogComponent, isStandalone: true, selector: "rb-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\" >\n @if (data.isMultipleContent) {\n @for (item of data.multipleContent; track $index) {\n @if (item.subtitle) {\n <h3 class=\"rb-font-heading rb-h5\">{{item.subtitle}}</h3>\n }\n @if (item.paragraph) {\n <p class=\"rb-font-body rb-large\">{{item.paragraph}}</p>\n }\n }\n } @else {\n <h3 class=\"rb-font-heading rb-h5\">{{data.subtitle}}</h3>\n <p class=\"rb-font-body rb-large\">{{data.content}}</p>\n }\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n @if (data.buttons?.length) {\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n @for (button of data.buttons; track $index) {\n <button mat-button\n title=\"{{button.label}}\"\n class=\"{{button.color}}\"\n [color]=\"button.color\"\n [attr.aria-label]=\"button.label\"\n [rbDynamicButton]=\"button.directive || null\"\n (click)=\"onClickButton(button.action)\">\n @if (button.icon && button.iconPosition === 'start') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n {{button.label}}\n @if (button.icon && button.iconPosition === 'end') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n </button>\n }\n </mat-dialog-actions>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$
|
|
609
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbDialogComponent, isStandalone: true, selector: "rb-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\" >\n @if (data.isMultipleContent) {\n @for (item of data.multipleContent; track $index) {\n @if (item.subtitle) {\n <h3 class=\"rb-font-heading rb-h5\">{{item.subtitle}}</h3>\n }\n @if (item.paragraph) {\n <p class=\"rb-font-body rb-large\">{{item.paragraph}}</p>\n }\n }\n } @else {\n <h3 class=\"rb-font-heading rb-h5\">{{data.subtitle}}</h3>\n <p class=\"rb-font-body rb-large\">{{data.content}}</p>\n }\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n @if (data.buttons?.length) {\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n @for (button of data.buttons; track $index) {\n <button mat-button\n title=\"{{button.label}}\"\n class=\"{{button.color}}\"\n [color]=\"button.color\"\n [attr.aria-label]=\"button.label\"\n [rbDynamicButton]=\"button.directive || null\"\n (click)=\"onClickButton(button.action)\">\n @if (button.icon && button.iconPosition === 'start') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n {{button.label}}\n @if (button.icon && button.iconPosition === 'end') {\n <mat-icon>{{button.icon}}</mat-icon>\n }\n </button>\n }\n </mat-dialog-actions>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
|
|
607
610
|
}
|
|
608
611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbDialogComponent, decorators: [{
|
|
609
612
|
type: Component,
|
|
@@ -664,13 +667,13 @@ class RbFilterDropdownComponent {
|
|
|
664
667
|
// this.filterItems = this.options.filter((item) => item.includes(this.searchText()));
|
|
665
668
|
// this.clientFilterService.setFilterItems(this.filterItems);
|
|
666
669
|
}
|
|
667
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, deps: [{ token: i1$
|
|
668
|
-
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:
|
|
670
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, deps: [{ token: i1$3.Overlay }, { token: ClientFilterService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
671
|
+
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: i1.JsonPipe, name: "json" }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }] });
|
|
669
672
|
}
|
|
670
673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterDropdownComponent, decorators: [{
|
|
671
674
|
type: Component,
|
|
672
675
|
args: [{ selector: 'rb-filter-dropdown', imports: [CommonModule, OverlayModule, PortalModule, MatIconModule, MatInputModule], standalone: true, template: "<ng-template #filterMenu>\n <div class=\"rb-filter-dropdown\">\n <div class=\"rb-filter-dropdown-header\">\n <h5>Adicionar Filtro</h5>\n <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"rb-filter-dropdown-body\">\n <div class=\"rb-filter-seach-bar\">\n <mat-form-field class=\"rb-search-field\">\n <mat-label>Pesquisar</mat-label>\n <input\n matInput\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n placeholder=\"Pesquisar\"\n />\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n </div>\n <div class=\"rb-filter-dropdown-body-items\">\n <pre>{{options | json}}</pre>\n @if (options && options.length) {\n @for (item of options; track trackByFn) {\n <div\n class=\"rb-filter-dropdown-item\"\n (click)=\"onSelectItem(item)\"\n >\n <!-- <mat-checkbox\n [checked]=\"isSelected(item)\"\n (change)=\"onSelectItem(item, $event)\"\n >\n {{ item.label }}\n </mat-checkbox> -->\n </div>\n }\n } @else {\n <div class=\"rb-filter-dropdown-item\">\n Nenhum item encontrado\n <!-- <mat-checkbox disabled>\n <span class=\"rb-filter-dropdown-item-disabled\">\n Nenhum item encontrado\n </span>\n </mat-checkbox> -->\n </div>\n }\n </div>\n\n <!-- <div class=\"rb-filter-dropdown-body-items\">\n <div\n *ngFor=\"let item of filterItems; trackBy: trackByFn\"\n class=\"rb-filter-dropdown-item\"\n (click)=\"onSelectItem(item)\"\n >\n <mat-checkbox\n [checked]=\"isSelected(item)\"\n (change)=\"onSelectItem(item, $event)\"\n >\n {{ item.label }}\n </mat-checkbox>\n </div>\n <div\n *ngIf=\"!filterItems?.length\"\n class=\"rb-filter-dropdown-item\">\n <mat-checkbox disabled>\n <span class=\"rb-filter-dropdown-item-disabled\">\n Nenhum item encontrado\n </span>\n </mat-checkbox>\n </div>\n </div> -->\n </div>\n </div>\n</ng-template>\n", styles: [".rb-filter-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:470px;color:#505353;background-color:#f8faf9;box-shadow:0 4px 8px 3px #006a6a26,0 1px 3px #0014144d}.rb-filter-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0}\n"] }]
|
|
673
|
-
}], ctorParameters: () => [{ type: i1$
|
|
676
|
+
}], ctorParameters: () => [{ type: i1$3.Overlay }, { type: ClientFilterService }, { type: i0.ViewContainerRef }], propDecorators: { parentSelectorId: [{
|
|
674
677
|
type: Input
|
|
675
678
|
}], options: [{
|
|
676
679
|
type: Input
|
|
@@ -690,7 +693,7 @@ class RbFilterPanelComponent {
|
|
|
690
693
|
this.dropdown.openMenu();
|
|
691
694
|
}
|
|
692
695
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
693
|
-
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$
|
|
696
|
+
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$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.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"] }] });
|
|
694
697
|
}
|
|
695
698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbFilterPanelComponent, decorators: [{
|
|
696
699
|
type: Component,
|
|
@@ -714,19 +717,19 @@ class RbCopyConfirmDialogComponent {
|
|
|
714
717
|
confirm() {
|
|
715
718
|
this.dialogRef.close(this.formGroup.value);
|
|
716
719
|
}
|
|
717
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, deps: [{ token: i1$
|
|
718
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCopyConfirmDialogComponent, isStandalone: true, selector: "lib-rb-copy-confirm-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\">\n <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n <mat-label>{{data.labelField}}</mat-label>\n <input matInput autofocus\n type=\"text\"\n [attr.aria-label]=\"data.labelField\"\n formControlName=\"fieldValue\"\n required>\n @if (formGroup.controls['fieldValue'].hasError('required')) {\n <mat-error >\n Campo obrigat\u00F3rio\n </mat-error>\n }\n </mat-form-field>\n\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n <button mat-button mat-dialog-close\n title=\"Cancelar\"\n aria-label=\"Cancelar\"\n class=\"secondary\"\n color=\"accent\"\n [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o' + (data.labelConfirmButton || 'duplicar' ).toLowerCase()\"\n type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"{{data.labelConfirmButton || 'Duplicar'}}\"\n [attr.aria-label]=\"data.labelConfirmButton || 'Duplicar'\"\n class=\"primary\"\n [color]=\"'primary'\"\n [attr.aria-label]=\"(data.labelConfirmButton || 'Duplicar' ) + data.labelField\"\n [rbDynamicButton]=\"'confirm'\"\n type=\"submit\"\n [disabled]=\"formGroup.invalid\"\n (click)=\"confirm()\">\n {{ data.labelConfirmButton || 'Duplicar' }}\n </button>\n </mat-dialog-actions>\n </form>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$
|
|
720
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, deps: [{ token: i1$4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
721
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbCopyConfirmDialogComponent, isStandalone: true, selector: "lib-rb-copy-confirm-dialog", ngImport: i0, template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\">\n <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n <mat-label>{{data.labelField}}</mat-label>\n <input matInput autofocus\n type=\"text\"\n [attr.aria-label]=\"data.labelField\"\n formControlName=\"fieldValue\"\n required>\n @if (formGroup.controls['fieldValue'].hasError('required')) {\n <mat-error >\n Campo obrigat\u00F3rio\n </mat-error>\n }\n </mat-form-field>\n\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n <button mat-button mat-dialog-close\n title=\"Cancelar\"\n aria-label=\"Cancelar\"\n class=\"secondary\"\n color=\"accent\"\n [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o' + (data.labelConfirmButton || 'duplicar' ).toLowerCase()\"\n type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"{{data.labelConfirmButton || 'Duplicar'}}\"\n [attr.aria-label]=\"data.labelConfirmButton || 'Duplicar'\"\n class=\"primary\"\n [color]=\"'primary'\"\n [attr.aria-label]=\"(data.labelConfirmButton || 'Duplicar' ) + data.labelField\"\n [rbDynamicButton]=\"'confirm'\"\n type=\"submit\"\n [disabled]=\"formGroup.invalid\"\n (click)=\"confirm()\">\n {{ data.labelConfirmButton || 'Duplicar' }}\n </button>\n </mat-dialog-actions>\n </form>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.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"] }] });
|
|
719
722
|
}
|
|
720
723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbCopyConfirmDialogComponent, decorators: [{
|
|
721
724
|
type: Component,
|
|
722
725
|
args: [{ selector: 'lib-rb-copy-confirm-dialog', imports: [MatDialogModule, MatButtonModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, MatIconModule, RbDynamicButtonDirective], template: "<div class=\"rb-dialog\">\n <!-- Cabe\u00E7alho -->\n <div class=\"rb-dialog-header\">\n <h2>{{data.title}}</h2>\n <button mat-icon-button mat-dialog-close aria-label=\"Fechar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <form (submit)=\"confirm()\" [formGroup]=\"formGroup\">\n\n <!-- Conte\u00FAdo -->\n <mat-dialog-content class=\"rb-dialog-content\">\n <mat-form-field appearance=\"fill\" class=\"rb-form-field width-100\">\n <mat-label>{{data.labelField}}</mat-label>\n <input matInput autofocus\n type=\"text\"\n [attr.aria-label]=\"data.labelField\"\n formControlName=\"fieldValue\"\n required>\n @if (formGroup.controls['fieldValue'].hasError('required')) {\n <mat-error >\n Campo obrigat\u00F3rio\n </mat-error>\n }\n </mat-form-field>\n\n </mat-dialog-content>\n\n <!-- A\u00E7\u00F5es -->\n <mat-dialog-actions class=\"rb-dialog-actions\" [align]=\"data.actionsAlign || 'end'\">\n <button mat-button mat-dialog-close\n title=\"Cancelar\"\n aria-label=\"Cancelar\"\n class=\"secondary\"\n color=\"accent\"\n [attr.aria-label]=\"'Cancelar a\u00E7\u00E3o' + (data.labelConfirmButton || 'duplicar' ).toLowerCase()\"\n type=\"button\"\n [rbDynamicButton]=\"'cancel'\">\n Cancelar\n </button>\n <button mat-button\n title=\"{{data.labelConfirmButton || 'Duplicar'}}\"\n [attr.aria-label]=\"data.labelConfirmButton || 'Duplicar'\"\n class=\"primary\"\n [color]=\"'primary'\"\n [attr.aria-label]=\"(data.labelConfirmButton || 'Duplicar' ) + data.labelField\"\n [rbDynamicButton]=\"'confirm'\"\n type=\"submit\"\n [disabled]=\"formGroup.invalid\"\n (click)=\"confirm()\">\n {{ data.labelConfirmButton || 'Duplicar' }}\n </button>\n </mat-dialog-actions>\n </form>\n</div>\n" }]
|
|
723
|
-
}], ctorParameters: () => [{ type: i1$
|
|
726
|
+
}], ctorParameters: () => [{ type: i1$4.FormBuilder }] });
|
|
724
727
|
|
|
725
728
|
class RbChangeLogDialogComponent {
|
|
726
729
|
data = inject(MAT_DIALOG_DATA);
|
|
727
730
|
dialogRef = inject((MatDialogRef));
|
|
728
731
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
729
|
-
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$
|
|
732
|
+
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$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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"] }] });
|
|
730
733
|
}
|
|
731
734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbChangeLogDialogComponent, decorators: [{
|
|
732
735
|
type: Component,
|
|
@@ -804,13 +807,13 @@ class RbColumnsSortSettingComponent {
|
|
|
804
807
|
this.showIndex = this.showIndex ? false : true;
|
|
805
808
|
this.showIndexService.setShowIndex(this.showIndex);
|
|
806
809
|
}
|
|
807
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, deps: [{ token: i1$
|
|
808
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbColumnsSortSettingComponent, isStandalone: true, selector: "rb-columns-sort-setting", inputs: { parentSelectorId: "parentSelectorId", columns: "columns", offsetX: "offsetX", offsetY: "offsetY", showIndex: "showIndex" }, outputs: { columnsChange: "columnsChange" }, viewQueries: [{ propertyName: "columnsSettingContainer", first: true, predicate: ["columnsSettingContainer"], descendants: true }], ngImport: i0, template: "<ng-template #columnsSettingContainer>\n <div class=\"rb-pannel-dropdown\">\n <div class=\"rb-pannel-dropdown-header\">\n <h5>Colunas</h5>\n <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"rb-pannel-dropdown-body\">\n <div cdkDropList class=\"rb-pannel-drop-list\" (cdkDropListDropped)=\"drop($event)\">\n @for (item of editableColumns; track item) {\n <div class=\"rb-pannel-drop-item\" cdkDrag [cdkDragDisabled]=\"item.hidden\">\n <div class=\"rb-pannel-drop-content\" >\n <mat-icon class=\"rb-pannel-drop-item-icon\">drag_indicator</mat-icon>\n <div class=\"rb-pannel-drop-item-label\">\n {{ item.label }}\n </div>\n <button mat-icon-button aria-label=\"Exibir coluna\" (click)=\"showColumn(item)\" [disabled]=\"item.blocked\">\n <mat-icon>{{item.hidden ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"rb-pannel-dropdown-footer\">\n <button mat-button\n title=\"\u00CDndices\"\n class=\"primary\"\n aria-label=\"\u00CDndices\"\n [rbDynamicButton]=\"null\"\n (click)=\"showIndexControl()\">\n \u00CDndices\n </button>\n <div class=\"rb-pannel-dropdown-footer-right\">\n <button mat-button\n title=\"Restaurar\"\n class=\"primary\"\n aria-label=\"Restaurar\"\n [rbDynamicButton]=\"'cancel'\"\n (click)=\"restore()\">\n Restaurar\n </button>\n <button mat-button\n title=\"Aplicar\"\n class=\"primary\"\n aria-label=\"Aplicar\"\n [rbDynamicButton]=\"'confirm'\"\n (click)=\"save()\">\n Aplicar\n </button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".rb-pannel-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:600px;border-radius:8px;color:#505353;background-color:#f8faf9;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.rb-pannel-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0;padding:0 16px}.rb-pannel-dropdown-header h5{font-family:Roboto;font-weight:500;font-size:16px;line-height:23.4px;margin-top:0;margin-bottom:0}.rb-pannel-dropdown-body{width:100%}.rb-pannel-drop-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:solid 1px #eee}.rb-pannel-drop-item{background-color:#f8faf9}.rb-pannel-drop-item.cdk-drag-preview{overflow:hidden;box-shadow:0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f}.rb-pannel-drop-item-label{min-width:60%;padding:0 15px;font-weight:500}.rb-pannel-dropdown-footer{width:-webkit-fill-available;display:flex;justify-content:space-between;align-items:center;padding:8px 16px}.rb-pannel-dropdown-footer-right{display:flex;gap:8px}.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled mat-icon.rb-pannel-drop-item-icon,.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled .rb-pannel-drop-item-label{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2
|
|
810
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
811
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbColumnsSortSettingComponent, isStandalone: true, selector: "rb-columns-sort-setting", inputs: { parentSelectorId: "parentSelectorId", columns: "columns", offsetX: "offsetX", offsetY: "offsetY", showIndex: "showIndex" }, outputs: { columnsChange: "columnsChange" }, viewQueries: [{ propertyName: "columnsSettingContainer", first: true, predicate: ["columnsSettingContainer"], descendants: true }], ngImport: i0, template: "<ng-template #columnsSettingContainer>\n <div class=\"rb-pannel-dropdown\">\n <div class=\"rb-pannel-dropdown-header\">\n <h5>Colunas</h5>\n <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"rb-pannel-dropdown-body\">\n <div cdkDropList class=\"rb-pannel-drop-list\" (cdkDropListDropped)=\"drop($event)\">\n @for (item of editableColumns; track item) {\n <div class=\"rb-pannel-drop-item\" cdkDrag [cdkDragDisabled]=\"item.hidden\">\n <div class=\"rb-pannel-drop-content\" >\n <mat-icon class=\"rb-pannel-drop-item-icon\">drag_indicator</mat-icon>\n <div class=\"rb-pannel-drop-item-label\">\n {{ item.label }}\n </div>\n <button mat-icon-button aria-label=\"Exibir coluna\" (click)=\"showColumn(item)\" [disabled]=\"item.blocked\">\n <mat-icon>{{item.hidden ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"rb-pannel-dropdown-footer\">\n <button mat-button\n title=\"\u00CDndices\"\n class=\"primary\"\n aria-label=\"\u00CDndices\"\n [rbDynamicButton]=\"null\"\n (click)=\"showIndexControl()\">\n \u00CDndices\n </button>\n <div class=\"rb-pannel-dropdown-footer-right\">\n <button mat-button\n title=\"Restaurar\"\n class=\"primary\"\n aria-label=\"Restaurar\"\n [rbDynamicButton]=\"'cancel'\"\n (click)=\"restore()\">\n Restaurar\n </button>\n <button mat-button\n title=\"Aplicar\"\n class=\"primary\"\n aria-label=\"Aplicar\"\n [rbDynamicButton]=\"'confirm'\"\n (click)=\"save()\">\n Aplicar\n </button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".rb-pannel-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:600px;border-radius:8px;color:#505353;background-color:#f8faf9;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.rb-pannel-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0;padding:0 16px}.rb-pannel-dropdown-header h5{font-family:Roboto;font-weight:500;font-size:16px;line-height:23.4px;margin-top:0;margin-bottom:0}.rb-pannel-dropdown-body{width:100%}.rb-pannel-drop-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:solid 1px #eee}.rb-pannel-drop-item{background-color:#f8faf9}.rb-pannel-drop-item.cdk-drag-preview{overflow:hidden;box-shadow:0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f}.rb-pannel-drop-item-label{min-width:60%;padding:0 15px;font-weight:500}.rb-pannel-dropdown-footer{width:-webkit-fill-available;display:flex;justify-content:space-between;align-items:center;padding:8px 16px}.rb-pannel-dropdown-footer-right{display:flex;gap:8px}.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled mat-icon.rb-pannel-drop-item-icon,.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled .rb-pannel-drop-item-label{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.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"] }] });
|
|
809
812
|
}
|
|
810
813
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbColumnsSortSettingComponent, decorators: [{
|
|
811
814
|
type: Component,
|
|
812
815
|
args: [{ selector: 'rb-columns-sort-setting', imports: [CommonModule, OverlayModule, MatIconModule, MatButtonModule, CdkDropList, CdkDrag, RbDynamicButtonDirective], standalone: true, template: "<ng-template #columnsSettingContainer>\n <div class=\"rb-pannel-dropdown\">\n <div class=\"rb-pannel-dropdown-header\">\n <h5>Colunas</h5>\n <button mat-icon-button aria-label=\"Fechar di\u00E1logo\" (click)=\"closeMenu()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"rb-pannel-dropdown-body\">\n <div cdkDropList class=\"rb-pannel-drop-list\" (cdkDropListDropped)=\"drop($event)\">\n @for (item of editableColumns; track item) {\n <div class=\"rb-pannel-drop-item\" cdkDrag [cdkDragDisabled]=\"item.hidden\">\n <div class=\"rb-pannel-drop-content\" >\n <mat-icon class=\"rb-pannel-drop-item-icon\">drag_indicator</mat-icon>\n <div class=\"rb-pannel-drop-item-label\">\n {{ item.label }}\n </div>\n <button mat-icon-button aria-label=\"Exibir coluna\" (click)=\"showColumn(item)\" [disabled]=\"item.blocked\">\n <mat-icon>{{item.hidden ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"rb-pannel-dropdown-footer\">\n <button mat-button\n title=\"\u00CDndices\"\n class=\"primary\"\n aria-label=\"\u00CDndices\"\n [rbDynamicButton]=\"null\"\n (click)=\"showIndexControl()\">\n \u00CDndices\n </button>\n <div class=\"rb-pannel-dropdown-footer-right\">\n <button mat-button\n title=\"Restaurar\"\n class=\"primary\"\n aria-label=\"Restaurar\"\n [rbDynamicButton]=\"'cancel'\"\n (click)=\"restore()\">\n Restaurar\n </button>\n <button mat-button\n title=\"Aplicar\"\n class=\"primary\"\n aria-label=\"Aplicar\"\n [rbDynamicButton]=\"'confirm'\"\n (click)=\"save()\">\n Aplicar\n </button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".rb-pannel-dropdown{display:flex;flex-direction:column;align-items:flex-start;width:400px;max-height:600px;border-radius:8px;color:#505353;background-color:#f8faf9;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.rb-pannel-dropdown-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:56px;color:#505353;background-color:#eff1f0;padding:0 16px}.rb-pannel-dropdown-header h5{font-family:Roboto;font-weight:500;font-size:16px;line-height:23.4px;margin-top:0;margin-bottom:0}.rb-pannel-dropdown-body{width:100%}.rb-pannel-drop-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 12px;border-bottom:solid 1px #eee}.rb-pannel-drop-item{background-color:#f8faf9}.rb-pannel-drop-item.cdk-drag-preview{overflow:hidden;box-shadow:0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f}.rb-pannel-drop-item-label{min-width:60%;padding:0 15px;font-weight:500}.rb-pannel-dropdown-footer{width:-webkit-fill-available;display:flex;justify-content:space-between;align-items:center;padding:8px 16px}.rb-pannel-dropdown-footer-right{display:flex;gap:8px}.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled mat-icon.rb-pannel-drop-item-icon,.cdk-drag.rb-pannel-drop-item.cdk-drag-disabled .rb-pannel-drop-item-label{opacity:.5}\n"] }]
|
|
813
|
-
}], ctorParameters: () => [{ type: i1$
|
|
816
|
+
}], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { parentSelectorId: [{
|
|
814
817
|
type: Input
|
|
815
818
|
}], columns: [{
|
|
816
819
|
type: Input
|
|
@@ -827,6 +830,627 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
827
830
|
type: Output
|
|
828
831
|
}] } });
|
|
829
832
|
|
|
833
|
+
class RbOverflowTooltipDirective {
|
|
834
|
+
elementRef = inject(ElementRef);
|
|
835
|
+
tooltip = inject(MatTooltip);
|
|
836
|
+
resizeObserver;
|
|
837
|
+
mutationObserver;
|
|
838
|
+
rbOverflowTooltip = '';
|
|
839
|
+
ngAfterViewInit() {
|
|
840
|
+
this.updateTooltip();
|
|
841
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
842
|
+
this.resizeObserver = new ResizeObserver(() => this.updateTooltip());
|
|
843
|
+
this.resizeObserver.observe(this.elementRef.nativeElement);
|
|
844
|
+
}
|
|
845
|
+
if (typeof MutationObserver !== 'undefined') {
|
|
846
|
+
this.mutationObserver = new MutationObserver(() => this.updateTooltip());
|
|
847
|
+
this.mutationObserver.observe(this.elementRef.nativeElement, {
|
|
848
|
+
characterData: true,
|
|
849
|
+
childList: true,
|
|
850
|
+
subtree: true
|
|
851
|
+
});
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
ngOnDestroy() {
|
|
855
|
+
this.resizeObserver?.disconnect();
|
|
856
|
+
this.mutationObserver?.disconnect();
|
|
857
|
+
}
|
|
858
|
+
updateTooltip() {
|
|
859
|
+
const element = this.elementRef.nativeElement;
|
|
860
|
+
this.tooltip.message = element.scrollWidth > element.clientWidth
|
|
861
|
+
? this.rbOverflowTooltip
|
|
862
|
+
: '';
|
|
863
|
+
}
|
|
864
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbOverflowTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
865
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: RbOverflowTooltipDirective, isStandalone: true, selector: "[rbOverflowTooltip]", inputs: { rbOverflowTooltip: "rbOverflowTooltip" }, host: { listeners: { "mouseenter": "updateTooltip()", "focusin": "updateTooltip()" } }, ngImport: i0 });
|
|
866
|
+
}
|
|
867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbOverflowTooltipDirective, decorators: [{
|
|
868
|
+
type: Directive,
|
|
869
|
+
args: [{
|
|
870
|
+
selector: '[rbOverflowTooltip]',
|
|
871
|
+
standalone: true,
|
|
872
|
+
host: {
|
|
873
|
+
'(mouseenter)': 'updateTooltip()',
|
|
874
|
+
'(focusin)': 'updateTooltip()'
|
|
875
|
+
}
|
|
876
|
+
}]
|
|
877
|
+
}], propDecorators: { rbOverflowTooltip: [{
|
|
878
|
+
type: Input
|
|
879
|
+
}] } });
|
|
880
|
+
|
|
881
|
+
class RbSidebarNavigationComponent {
|
|
882
|
+
router = inject(Router);
|
|
883
|
+
elementRef = inject(ElementRef);
|
|
884
|
+
routerSubscription;
|
|
885
|
+
logoUrl = '';
|
|
886
|
+
logoTextUrl = '';
|
|
887
|
+
logoName = '';
|
|
888
|
+
_items = [];
|
|
889
|
+
set items(value) {
|
|
890
|
+
this._items = this.sortItems(value || []);
|
|
891
|
+
this.scrollToActiveItem(false);
|
|
892
|
+
}
|
|
893
|
+
get items() {
|
|
894
|
+
return this._items;
|
|
895
|
+
}
|
|
896
|
+
initiallyFixed = false;
|
|
897
|
+
// Secondary Menu Inputs
|
|
898
|
+
_secondaryItems = [];
|
|
899
|
+
selectedSecondaryItemId = null;
|
|
900
|
+
secondaryTitle = '';
|
|
901
|
+
set secondaryItems(value) {
|
|
902
|
+
this._secondaryItems = this.sortItems(value || []);
|
|
903
|
+
this.selectedSecondaryItemId = this._secondaryItems[0]?.id ?? null;
|
|
904
|
+
if (this._secondaryItems.length > 0) {
|
|
905
|
+
this.closePrimaryForSecondaryMenu();
|
|
906
|
+
}
|
|
907
|
+
}
|
|
908
|
+
get secondaryItems() {
|
|
909
|
+
return this._secondaryItems;
|
|
910
|
+
}
|
|
911
|
+
// Customization Inputs
|
|
912
|
+
backgroundColor = '#F8F9FA';
|
|
913
|
+
textColor = '#505353';
|
|
914
|
+
activeTextColor = '#004F4F';
|
|
915
|
+
hoverBackgroundColor = 'rgba(0, 0, 0, 0.05)';
|
|
916
|
+
// Dynamic Width Customization Inputs (defaults to 320px)
|
|
917
|
+
_width = '320px';
|
|
918
|
+
set width(value) {
|
|
919
|
+
if (value !== undefined && value !== null && value !== '') {
|
|
920
|
+
this._width = value;
|
|
921
|
+
}
|
|
922
|
+
}
|
|
923
|
+
get width() {
|
|
924
|
+
return this._width;
|
|
925
|
+
}
|
|
926
|
+
set sidebarWidth(value) {
|
|
927
|
+
if (value !== undefined && value !== null && value !== '') {
|
|
928
|
+
this._width = value;
|
|
929
|
+
}
|
|
930
|
+
}
|
|
931
|
+
get sidebarWidth() {
|
|
932
|
+
return this._width;
|
|
933
|
+
}
|
|
934
|
+
_secondaryWidth = '320px';
|
|
935
|
+
set secondaryWidth(value) {
|
|
936
|
+
if (value !== undefined && value !== null && value !== '') {
|
|
937
|
+
this._secondaryWidth = value;
|
|
938
|
+
}
|
|
939
|
+
}
|
|
940
|
+
get secondaryWidth() {
|
|
941
|
+
return this._secondaryWidth;
|
|
942
|
+
}
|
|
943
|
+
set secondarySidebarWidth(value) {
|
|
944
|
+
if (value !== undefined && value !== null && value !== '') {
|
|
945
|
+
this._secondaryWidth = value;
|
|
946
|
+
}
|
|
947
|
+
}
|
|
948
|
+
get secondarySidebarWidth() {
|
|
949
|
+
return this._secondaryWidth;
|
|
950
|
+
}
|
|
951
|
+
_closedWidth = '64px';
|
|
952
|
+
set closedWidth(value) {
|
|
953
|
+
if (value !== undefined && value !== null && value !== '') {
|
|
954
|
+
this._closedWidth = value;
|
|
955
|
+
}
|
|
956
|
+
}
|
|
957
|
+
get closedWidth() {
|
|
958
|
+
return this._closedWidth;
|
|
959
|
+
}
|
|
960
|
+
_sectionGap = '4px';
|
|
961
|
+
set sectionGap(value) {
|
|
962
|
+
if (value !== undefined && value !== null && value !== '') {
|
|
963
|
+
this._sectionGap = value;
|
|
964
|
+
}
|
|
965
|
+
}
|
|
966
|
+
get sectionGap() {
|
|
967
|
+
return this._sectionGap;
|
|
968
|
+
}
|
|
969
|
+
get formattedWidth() {
|
|
970
|
+
return this.formatCssUnit(this.width, '320px');
|
|
971
|
+
}
|
|
972
|
+
get formattedSecondaryWidth() {
|
|
973
|
+
return this.formatCssUnit(this.secondaryWidth, '320px');
|
|
974
|
+
}
|
|
975
|
+
get formattedClosedWidth() {
|
|
976
|
+
return this.formatCssUnit(this.closedWidth, '64px');
|
|
977
|
+
}
|
|
978
|
+
get formattedSectionGap() {
|
|
979
|
+
return this.formatCssUnit(this.sectionGap, '4px');
|
|
980
|
+
}
|
|
981
|
+
formatCssUnit(val, defaultValue) {
|
|
982
|
+
if (val === undefined || val === null || val === '') {
|
|
983
|
+
return defaultValue;
|
|
984
|
+
}
|
|
985
|
+
if (typeof val === 'number' || (!isNaN(Number(val)) && String(val).trim() !== '')) {
|
|
986
|
+
return `${val}px`;
|
|
987
|
+
}
|
|
988
|
+
return String(val);
|
|
989
|
+
}
|
|
990
|
+
// Icon for bottom toggle button, can be customized
|
|
991
|
+
toggleIcon = 'last_page';
|
|
992
|
+
itemClick = new EventEmitter();
|
|
993
|
+
logoClick = new EventEmitter();
|
|
994
|
+
isFixed = false;
|
|
995
|
+
isHovered = false;
|
|
996
|
+
isOverlayActive = false;
|
|
997
|
+
hoverTimeout;
|
|
998
|
+
overlayCloseTimeout;
|
|
999
|
+
get hasSecondary() {
|
|
1000
|
+
return this.secondaryItems && this.secondaryItems.length > 0;
|
|
1001
|
+
}
|
|
1002
|
+
closePrimaryForSecondaryMenu() {
|
|
1003
|
+
this.clearHoverTimeout();
|
|
1004
|
+
this.clearOverlayCloseTimeout();
|
|
1005
|
+
this.isFixed = false;
|
|
1006
|
+
this.isHovered = false;
|
|
1007
|
+
this.isOverlayActive = false;
|
|
1008
|
+
}
|
|
1009
|
+
sortItems(items) {
|
|
1010
|
+
if (!items || items.length === 0)
|
|
1011
|
+
return [];
|
|
1012
|
+
const clonedItems = [...items];
|
|
1013
|
+
const result = [];
|
|
1014
|
+
let currentSection = [];
|
|
1015
|
+
const sortSection = (section) => {
|
|
1016
|
+
section.sort((a, b) => {
|
|
1017
|
+
const usageA = a.usageCount || 0;
|
|
1018
|
+
const usageB = b.usageCount || 0;
|
|
1019
|
+
if (usageA !== usageB) {
|
|
1020
|
+
return usageB - usageA;
|
|
1021
|
+
}
|
|
1022
|
+
const labelA = a.label || '';
|
|
1023
|
+
const labelB = b.label || '';
|
|
1024
|
+
return labelA.localeCompare(labelB);
|
|
1025
|
+
});
|
|
1026
|
+
section.forEach(item => {
|
|
1027
|
+
if (item.children && item.children.length > 0) {
|
|
1028
|
+
item.children = this.sortItems(item.children);
|
|
1029
|
+
}
|
|
1030
|
+
});
|
|
1031
|
+
return section;
|
|
1032
|
+
};
|
|
1033
|
+
for (const item of clonedItems) {
|
|
1034
|
+
if (item.isSectionTitle) {
|
|
1035
|
+
if (currentSection.length > 0) {
|
|
1036
|
+
result.push(...sortSection(currentSection));
|
|
1037
|
+
currentSection = [];
|
|
1038
|
+
}
|
|
1039
|
+
result.push(item);
|
|
1040
|
+
}
|
|
1041
|
+
else {
|
|
1042
|
+
currentSection.push(item);
|
|
1043
|
+
}
|
|
1044
|
+
}
|
|
1045
|
+
if (currentSection.length > 0) {
|
|
1046
|
+
result.push(...sortSection(currentSection));
|
|
1047
|
+
}
|
|
1048
|
+
return result;
|
|
1049
|
+
}
|
|
1050
|
+
ngOnInit() {
|
|
1051
|
+
// If there is a secondary menu, the primary menu cannot be "fixed open" by default because it would permanently cover the secondary menu.
|
|
1052
|
+
if (this.hasSecondary) {
|
|
1053
|
+
this.isFixed = false;
|
|
1054
|
+
}
|
|
1055
|
+
else {
|
|
1056
|
+
this.isFixed = this.initiallyFixed;
|
|
1057
|
+
}
|
|
1058
|
+
this.routerSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
|
|
1059
|
+
this.scrollToActiveItem(true);
|
|
1060
|
+
});
|
|
1061
|
+
}
|
|
1062
|
+
ngAfterViewInit() {
|
|
1063
|
+
this.scrollToActiveItem(false);
|
|
1064
|
+
}
|
|
1065
|
+
get isOpen() {
|
|
1066
|
+
return this.isFixed || this.isHovered;
|
|
1067
|
+
}
|
|
1068
|
+
set isOpen(value) {
|
|
1069
|
+
const wasOpen = this.isOpen;
|
|
1070
|
+
this.isHovered = value && !this.isFixed;
|
|
1071
|
+
if (this.isHovered) {
|
|
1072
|
+
this.isOverlayActive = true;
|
|
1073
|
+
}
|
|
1074
|
+
if (wasOpen !== this.isOpen) {
|
|
1075
|
+
this.scrollToActiveItem(true);
|
|
1076
|
+
}
|
|
1077
|
+
}
|
|
1078
|
+
onMouseEnter() {
|
|
1079
|
+
if (this.isFixed)
|
|
1080
|
+
return;
|
|
1081
|
+
this.clearHoverTimeout();
|
|
1082
|
+
this.clearOverlayCloseTimeout();
|
|
1083
|
+
this.hoverTimeout = setTimeout(() => {
|
|
1084
|
+
this.hoverTimeout = undefined;
|
|
1085
|
+
this.isOpen = true;
|
|
1086
|
+
}, 1000);
|
|
1087
|
+
}
|
|
1088
|
+
onMouseLeave() {
|
|
1089
|
+
this.clearHoverTimeout();
|
|
1090
|
+
if (this.isFixed)
|
|
1091
|
+
return;
|
|
1092
|
+
const wasHovered = this.isHovered;
|
|
1093
|
+
this.isHovered = false;
|
|
1094
|
+
if (wasHovered) {
|
|
1095
|
+
this.finishOverlayAfterClosingTransition();
|
|
1096
|
+
this.scrollToActiveItem(true);
|
|
1097
|
+
}
|
|
1098
|
+
else {
|
|
1099
|
+
this.isOverlayActive = false;
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
1102
|
+
ngOnDestroy() {
|
|
1103
|
+
this.clearHoverTimeout();
|
|
1104
|
+
this.clearOverlayCloseTimeout();
|
|
1105
|
+
if (this.routerSubscription) {
|
|
1106
|
+
this.routerSubscription.unsubscribe();
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
toggleFixed() {
|
|
1110
|
+
this.clearHoverTimeout();
|
|
1111
|
+
const wasOpen = this.isOpen;
|
|
1112
|
+
if (wasOpen) {
|
|
1113
|
+
const wasOverlay = this.isHovered || this.isOverlayActive;
|
|
1114
|
+
this.isFixed = false;
|
|
1115
|
+
this.isHovered = false;
|
|
1116
|
+
if (wasOverlay) {
|
|
1117
|
+
this.finishOverlayAfterClosingTransition();
|
|
1118
|
+
}
|
|
1119
|
+
else {
|
|
1120
|
+
this.clearOverlayCloseTimeout();
|
|
1121
|
+
this.isOverlayActive = false;
|
|
1122
|
+
}
|
|
1123
|
+
}
|
|
1124
|
+
else {
|
|
1125
|
+
this.clearOverlayCloseTimeout();
|
|
1126
|
+
this.isFixed = true;
|
|
1127
|
+
this.isHovered = false;
|
|
1128
|
+
this.isOverlayActive = false;
|
|
1129
|
+
}
|
|
1130
|
+
if (wasOpen !== this.isOpen) {
|
|
1131
|
+
this.scrollToActiveItem(true);
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
1134
|
+
finishOverlayAfterClosingTransition() {
|
|
1135
|
+
this.clearOverlayCloseTimeout();
|
|
1136
|
+
this.overlayCloseTimeout = setTimeout(() => {
|
|
1137
|
+
this.isOverlayActive = false;
|
|
1138
|
+
this.overlayCloseTimeout = undefined;
|
|
1139
|
+
}, 300);
|
|
1140
|
+
}
|
|
1141
|
+
clearHoverTimeout() {
|
|
1142
|
+
if (this.hoverTimeout) {
|
|
1143
|
+
clearTimeout(this.hoverTimeout);
|
|
1144
|
+
this.hoverTimeout = undefined;
|
|
1145
|
+
}
|
|
1146
|
+
}
|
|
1147
|
+
clearOverlayCloseTimeout() {
|
|
1148
|
+
if (this.overlayCloseTimeout) {
|
|
1149
|
+
clearTimeout(this.overlayCloseTimeout);
|
|
1150
|
+
this.overlayCloseTimeout = undefined;
|
|
1151
|
+
}
|
|
1152
|
+
}
|
|
1153
|
+
onLogoClicked() {
|
|
1154
|
+
if (this.items && this.items.length > 0) {
|
|
1155
|
+
this.logoClick.emit(this.items[0]);
|
|
1156
|
+
}
|
|
1157
|
+
else {
|
|
1158
|
+
this.logoClick.emit();
|
|
1159
|
+
}
|
|
1160
|
+
}
|
|
1161
|
+
onItemClicked(item) {
|
|
1162
|
+
if (this.secondaryItems.some(secondaryItem => secondaryItem.id === item.id)) {
|
|
1163
|
+
this.selectedSecondaryItemId = item.id;
|
|
1164
|
+
}
|
|
1165
|
+
if (item.action) {
|
|
1166
|
+
item.action();
|
|
1167
|
+
}
|
|
1168
|
+
this.itemClick.emit(item);
|
|
1169
|
+
this.scrollToActiveItem(true);
|
|
1170
|
+
}
|
|
1171
|
+
toggleItem(item) {
|
|
1172
|
+
if (item.children && item.children.length > 0) {
|
|
1173
|
+
item.expanded = !item.expanded;
|
|
1174
|
+
if (!this.isOpen) {
|
|
1175
|
+
this.isFixed = true; // Open the sidebar to see the children
|
|
1176
|
+
this.isHovered = false;
|
|
1177
|
+
}
|
|
1178
|
+
this.scrollToActiveItem(true);
|
|
1179
|
+
}
|
|
1180
|
+
else {
|
|
1181
|
+
this.onItemClicked(item);
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
isChildActive(item) {
|
|
1185
|
+
if (!item.children)
|
|
1186
|
+
return false;
|
|
1187
|
+
// Check if any child route is currently active
|
|
1188
|
+
return item.children.some(child => child.route && this.router.isActive(child.route, {
|
|
1189
|
+
paths: 'subset',
|
|
1190
|
+
queryParams: 'ignored',
|
|
1191
|
+
fragment: 'ignored',
|
|
1192
|
+
matrixParams: 'ignored'
|
|
1193
|
+
}));
|
|
1194
|
+
}
|
|
1195
|
+
isParentActive(item) {
|
|
1196
|
+
if (!item.children || item.children.length === 0)
|
|
1197
|
+
return false;
|
|
1198
|
+
// Highlight parent if the sidebar is closed OR if the submenu is closed, AND a child is active
|
|
1199
|
+
return (!this.isOpen || !item.expanded) && this.isChildActive(item);
|
|
1200
|
+
}
|
|
1201
|
+
isSecondaryItemActive(item) {
|
|
1202
|
+
const routeActive = this.isRouteActive(item);
|
|
1203
|
+
const hasActiveRoute = this.secondaryItems.some(secondaryItem => this.isRouteActive(secondaryItem));
|
|
1204
|
+
if (hasActiveRoute) {
|
|
1205
|
+
return routeActive;
|
|
1206
|
+
}
|
|
1207
|
+
return item.id === this.selectedSecondaryItemId;
|
|
1208
|
+
}
|
|
1209
|
+
isRouteActive(item) {
|
|
1210
|
+
return !!item.route && this.router.isActive(item.route, {
|
|
1211
|
+
paths: 'subset',
|
|
1212
|
+
queryParams: 'ignored',
|
|
1213
|
+
fragment: 'ignored',
|
|
1214
|
+
matrixParams: 'ignored'
|
|
1215
|
+
});
|
|
1216
|
+
}
|
|
1217
|
+
getSectionTitleLabel(item) {
|
|
1218
|
+
if (!item || !item.label)
|
|
1219
|
+
return '';
|
|
1220
|
+
return item.label;
|
|
1221
|
+
}
|
|
1222
|
+
getNavItemLabel(item) {
|
|
1223
|
+
if (!item || !item.label)
|
|
1224
|
+
return '';
|
|
1225
|
+
return item.label;
|
|
1226
|
+
}
|
|
1227
|
+
getSubmenuItemLabel(item) {
|
|
1228
|
+
if (!item || !item.label)
|
|
1229
|
+
return '';
|
|
1230
|
+
return item.label;
|
|
1231
|
+
}
|
|
1232
|
+
scrollToActiveItem(smooth = true) {
|
|
1233
|
+
setTimeout(() => {
|
|
1234
|
+
this.performScrollToActiveItem(smooth);
|
|
1235
|
+
}, 0);
|
|
1236
|
+
setTimeout(() => {
|
|
1237
|
+
this.performScrollToActiveItem(smooth);
|
|
1238
|
+
}, 150);
|
|
1239
|
+
setTimeout(() => {
|
|
1240
|
+
this.performScrollToActiveItem(smooth);
|
|
1241
|
+
}, 320);
|
|
1242
|
+
}
|
|
1243
|
+
performScrollToActiveItem(smooth = true) {
|
|
1244
|
+
if (!this.elementRef)
|
|
1245
|
+
return;
|
|
1246
|
+
const navContainer = this.elementRef.nativeElement.querySelector('.rb-sidebar__nav');
|
|
1247
|
+
if (!navContainer)
|
|
1248
|
+
return;
|
|
1249
|
+
const activeElement = navContainer.querySelector('.rb-sidebar__nav-link--active, .rb-sidebar__submenu-link--active');
|
|
1250
|
+
if (!activeElement)
|
|
1251
|
+
return;
|
|
1252
|
+
const containerRect = navContainer.getBoundingClientRect();
|
|
1253
|
+
const activeRect = activeElement.getBoundingClientRect();
|
|
1254
|
+
const isVisible = (activeRect.top >= containerRect.top &&
|
|
1255
|
+
activeRect.bottom <= containerRect.bottom);
|
|
1256
|
+
if (!isVisible) {
|
|
1257
|
+
const targetScrollTop = activeElement.offsetTop - (navContainer.clientHeight / 2) + (activeElement.clientHeight / 2);
|
|
1258
|
+
navContainer.scrollTo({
|
|
1259
|
+
top: Math.max(0, targetScrollTop),
|
|
1260
|
+
behavior: smooth ? 'smooth' : 'auto'
|
|
1261
|
+
});
|
|
1262
|
+
}
|
|
1263
|
+
}
|
|
1264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbSidebarNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbSidebarNavigationComponent, isStandalone: true, selector: "rb-sidebar-navigation", inputs: { logoUrl: "logoUrl", logoTextUrl: "logoTextUrl", logoName: "logoName", items: "items", initiallyFixed: "initiallyFixed", secondaryTitle: "secondaryTitle", secondaryItems: "secondaryItems", backgroundColor: "backgroundColor", textColor: "textColor", activeTextColor: "activeTextColor", hoverBackgroundColor: "hoverBackgroundColor", width: "width", sidebarWidth: "sidebarWidth", secondaryWidth: "secondaryWidth", secondarySidebarWidth: "secondarySidebarWidth", closedWidth: "closedWidth", sectionGap: "sectionGap", toggleIcon: "toggleIcon" }, outputs: { itemClick: "itemClick", logoClick: "logoClick" }, ngImport: i0, template: "<div class=\"rb-sidebar-wrapper\" \n [class.has-secondary]=\"hasSecondary\"\n [class.is-fixed]=\"isFixed\"\n [class.is-hovered]=\"isHovered\"\n [style.--rb-sidebar-bg]=\"backgroundColor\"\n [style.--rb-sidebar-text-color]=\"textColor\"\n [style.--rb-sidebar-active-text-color]=\"activeTextColor\"\n [style.--rb-sidebar-hover-bg]=\"hoverBackgroundColor\"\n [style.--rb-sidebar-width-open]=\"formattedWidth\"\n [style.--rb-secondary-sidebar-width]=\"formattedSecondaryWidth\"\n [style.--rb-sidebar-width-closed]=\"formattedClosedWidth\"\n [style.--rb-sidebar-section-gap]=\"formattedSectionGap\"\n>\n <aside\n class=\"rb-sidebar rb-sidebar--primary\"\n [ngClass]=\"{ \n 'rb-sidebar--open': isOpen, \n 'rb-sidebar--closed': !isOpen, \n 'rb-sidebar--fixed': isFixed,\n 'rb-sidebar--overlay': isOverlayActive\n }\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <div class=\"rb-sidebar__header\" (click)=\"onLogoClicked()\" role=\"button\" tabindex=\"0\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoName || 'Logo'\" class=\"rb-sidebar__logo-icon\" />\n }\n @if (logoTextUrl) {\n <img [src]=\"logoTextUrl\" alt=\"Rubeus\" class=\"rb-sidebar__logo-wordmark\" />\n } @else if (logoName) {\n <span class=\"rb-sidebar__logo-name\">{{ logoName }}</span>\n }\n </div>\n\n <nav class=\"rb-sidebar__nav\">\n <ul class=\"rb-sidebar__nav-list\">\n @for (item of items; track item.id) {\n <li\n class=\"rb-sidebar__nav-item\"\n [class.rb-sidebar__nav-item--section]=\"item.isSectionTitle\"\n [class.rb-sidebar__nav-item--section-without-title]=\"item.hasDivider && !item.isSectionTitle\"\n >\n @if (item.hasDivider || item.isSectionTitle) {\n <div class=\"rb-sidebar__section-divider\"></div>\n }\n @if (item.isSectionTitle) {\n @if (item.label) {\n <div class=\"rb-sidebar__section-title\">\n <span\n class=\"rb-sidebar__section-label\"\n matTooltip\n [rbOverflowTooltip]=\"item.label\"\n >{{ getSectionTitleLabel(item) }}</span>\n </div>\n }\n } @else {\n @if (item.route && (!item.children || item.children.length === 0)) {\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"rb-sidebar__nav-link--active\"\n [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n class=\"rb-sidebar__nav-link\"\n (click)=\"onItemClicked(item)\"\n >\n <i class=\"material-symbols-outlined rb-sidebar__nav-icon\">{{ item.icon }}</i>\n <span\n class=\"rb-sidebar__nav-label\"\n matTooltip\n [rbOverflowTooltip]=\"item.label\"\n >{{ getNavItemLabel(item) }}</span>\n </a>\n } @else {\n <div\n class=\"rb-sidebar__nav-link\"\n [class.rb-sidebar__nav-link--active]=\"isParentActive(item)\"\n (click)=\"toggleItem(item)\"\n role=\"button\"\n tabindex=\"0\"\n >\n <i class=\"material-symbols-outlined rb-sidebar__nav-icon\">{{ item.icon }}</i>\n <span\n class=\"rb-sidebar__nav-label\"\n matTooltip\n [rbOverflowTooltip]=\"item.label\"\n >{{ getNavItemLabel(item) }}</span>\n @if (item.children && item.children.length > 0) {\n <i class=\"material-symbols-outlined rb-sidebar__nav-caret\" [class.rotate]=\"item.expanded\">arrow_drop_down</i>\n }\n </div>\n @if (item.children && item.children.length > 0 && item.expanded && isOpen) {\n <ul class=\"rb-sidebar__submenu\">\n @for (child of item.children; track child.id) {\n <li class=\"rb-sidebar__submenu-item\">\n @if (child.route) {\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"rb-sidebar__submenu-link--active\"\n [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n class=\"rb-sidebar__submenu-link\"\n (click)=\"onItemClicked(child)\"\n >\n <span\n class=\"rb-sidebar__submenu-label\"\n matTooltip\n [rbOverflowTooltip]=\"child.label\"\n >{{ getSubmenuItemLabel(child) }}</span>\n </a>\n } @else {\n <div\n class=\"rb-sidebar__submenu-link\"\n (click)=\"onItemClicked(child)\"\n role=\"button\"\n tabindex=\"0\"\n >\n <span\n class=\"rb-sidebar__submenu-label\"\n matTooltip\n [rbOverflowTooltip]=\"child.label\"\n >{{ getSubmenuItemLabel(child) }}</span>\n </div>\n }\n </li>\n }\n </ul>\n }\n }\n }\n </li>\n }\n </ul>\n </nav>\n\n <div class=\"rb-sidebar__footer\">\n <button class=\"rb-sidebar__toggle-btn\" (click)=\"toggleFixed()\" aria-label=\"Alternar menu lateral\">\n <i class=\"material-symbols-outlined rb-sidebar__toggle-icon\">{{ toggleIcon }}</i>\n </button>\n </div>\n </aside>\n\n <!-- Secondary Sidebar -->\n @if (hasSecondary) {\n <aside class=\"rb-sidebar rb-sidebar--secondary\">\n <div class=\"rb-sidebar__header\">\n <span class=\"rb-sidebar__secondary-title\">{{ secondaryTitle }}</span>\n </div>\n <nav class=\"rb-sidebar__nav\">\n <ul class=\"rb-sidebar__nav-list\">\n @for (item of secondaryItems; track item.id) {\n <li class=\"rb-sidebar__nav-item\">\n @if (item.route) {\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"rb-sidebar__nav-link--active\"\n [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n class=\"rb-sidebar__secondary-link\"\n [class.rb-sidebar__nav-link--active]=\"isSecondaryItemActive(item)\"\n (click)=\"onItemClicked(item)\"\n >\n <span class=\"rb-sidebar__secondary-label\">{{ item.label }}</span>\n </a>\n } @else {\n <div\n class=\"rb-sidebar__secondary-link\"\n [class.rb-sidebar__nav-link--active]=\"isSecondaryItemActive(item)\"\n (click)=\"onItemClicked(item)\"\n role=\"button\"\n tabindex=\"0\"\n >\n <span class=\"rb-sidebar__secondary-label\">{{ item.label }}</span>\n </div>\n }\n </li>\n }\n </ul>\n </nav>\n </aside>\n }\n</div>\n", styles: [":host{display:block;height:100%;flex-shrink:0}.rb-sidebar-wrapper{display:flex;height:100%;position:relative;background-color:transparent;flex-shrink:0;overflow:visible;transition:width .3s cubic-bezier(.4,0,.2,1);will-change:width}.rb-sidebar-wrapper:not(.has-secondary){width:var(--rb-sidebar-width-closed, 64px)}.rb-sidebar-wrapper:not(.has-secondary).is-fixed{width:var(--rb-sidebar-width-open, 320px)}.rb-sidebar-wrapper:not(.has-secondary):not(.is-fixed){width:var(--rb-sidebar-width-closed, 64px)}.rb-sidebar-wrapper.has-secondary{box-sizing:border-box;width:var(--rb-secondary-sidebar-width, 320px);overflow:hidden;background-color:var(--rb-sidebar-bg, #F8F9FA)}.rb-sidebar-wrapper.has-secondary .rb-sidebar--primary{position:absolute;left:0;top:0;bottom:0;z-index:10;box-shadow:none;border-right:1px solid var(--Border-Neutral-Secondary, #C5C7C6)}.rb-sidebar-wrapper.has-secondary .rb-sidebar--primary.rb-sidebar--closed{width:var(--rb-sidebar-width-closed, 64px)}.rb-sidebar-wrapper.has-secondary .rb-sidebar--primary.rb-sidebar--open{width:var(--rb-sidebar-width-open, 320px)}.rb-sidebar{height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--rb-sidebar-bg, #F8F9FA);overflow:hidden;border-right:1px solid var(--Border-Neutral-Secondary, #C5C7C6);box-sizing:border-box}.rb-sidebar:not(.rb-sidebar--secondary){width:var(--rb-sidebar-width-closed, 64px);min-width:var(--rb-sidebar-width-closed, 64px);transition:width .3s ease}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--open{width:var(--rb-sidebar-width-open, 320px)}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed{width:var(--rb-sidebar-width-closed, 64px)}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__logo-name,.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__logo-wordmark,.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__nav-label,.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__nav-caret{opacity:0;pointer-events:none}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__logo-name,.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__logo-wordmark{visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__section-title{opacity:0;pointer-events:none;max-height:0;padding-top:0;padding-bottom:0;margin:0;border:none}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--overlay:not(.rb-sidebar--fixed){position:absolute;top:0;left:0;bottom:0;z-index:100}.rb-sidebar--secondary{position:absolute;left:0;top:0;bottom:0;z-index:1;width:var(--rb-secondary-sidebar-width, 320px);box-sizing:border-box;padding-left:var(--rb-sidebar-width-closed, 64px);border-right:1px solid var(--Border-Neutral-Secondary, #C5C7C6);animation:rb-secondary-sidebar-enter .3s cubic-bezier(.4,0,.2,1) both}.rb-sidebar--secondary .rb-sidebar__header{pointer-events:none}.rb-sidebar__header{display:flex;align-items:center;padding:8px 12px 8px 16.5px;height:var(--rb-sidebar-header-height, 48px);cursor:pointer;box-sizing:border-box;white-space:nowrap;gap:8px;outline:none;-webkit-tap-highlight-color:transparent}.rb-sidebar__logo-icon{height:27.8px;width:31px;object-fit:contain;flex-shrink:0}.rb-sidebar__logo-wordmark{width:79.47px;height:18.07px;object-fit:contain;flex-shrink:0}.rb-sidebar__logo-name{font-weight:600;font-size:1.1rem;color:var(--rb-sidebar-text-color, #505353);transition:opacity .3s ease;opacity:1;width:max-content;max-width:calc(var(--rb-sidebar-width-open, 320px) - 80px);flex-shrink:0;white-space:normal;word-break:break-word;line-height:28px}.rb-sidebar__secondary-title{overflow:hidden;color:var(--rb-sidebar-text-color, #505353);font-size:16px;font-weight:500;line-height:24px;text-overflow:ellipsis;white-space:nowrap}.rb-sidebar__nav{flex:1;overflow-y:auto;overflow-x:hidden;padding-top:0}.rb-sidebar__nav::-webkit-scrollbar{width:12px;background-color:var(--rb-sidebar-bg, #F8F9FA)}.rb-sidebar__nav::-webkit-scrollbar-track{background-color:var(--rb-sidebar-bg, #F8F9FA)}.rb-sidebar__nav::-webkit-scrollbar-thumb{background-color:#757877;background-clip:content-box;border:4px solid transparent;border-radius:8px}.rb-sidebar__nav::-webkit-scrollbar-button,.rb-sidebar__nav::-webkit-scrollbar-button:single-button,.rb-sidebar__nav::-webkit-scrollbar-button:vertical:start:decrement,.rb-sidebar__nav::-webkit-scrollbar-button:vertical:end:increment{appearance:none;display:none;width:0;height:0;background:transparent}.rb-sidebar--closed .rb-sidebar__nav{overflow-y:hidden;scrollbar-width:none}.rb-sidebar--closed .rb-sidebar__nav::-webkit-scrollbar{display:none}.rb-sidebar__nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}.rb-sidebar__nav-item{margin:0}.rb-sidebar__section-title{padding:0 16px;font-size:16px;font-weight:500;font-style:normal;letter-spacing:.15px;font-family:Roboto;line-height:24px;color:var(--rb-sidebar-text-color, #2E3131);transition:max-height .3s ease,padding .3s ease,margin .3s ease,opacity .3s ease;white-space:nowrap;opacity:1;height:48px;max-height:48px;display:flex;align-items:center;width:100%;min-width:0;box-sizing:border-box;overflow:hidden}.rb-sidebar__section-label{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rb-sidebar__section-divider{height:1px;width:100%;background-color:var(--Border-Neutral-Secondary, #C5C7C6);margin:4px 0 0}.rb-sidebar__nav-item--section-without-title>.rb-sidebar__section-divider{margin:var(--rb-sidebar-section-gap, 4px) 0}.rb-sidebar__nav-link,.rb-sidebar__secondary-link{display:flex;padding:12px 16px 12px 20px;justify-content:flex-start;align-items:flex-start;gap:8px;align-self:stretch;cursor:pointer;text-decoration:none;color:var(--rb-sidebar-text-color, #555);transition:background-color .2s,color .2s;box-sizing:border-box;white-space:normal;word-break:break-word;overflow:hidden}.rb-sidebar__nav-link:hover,.rb-sidebar__secondary-link:hover{background:var(--surfaces-surface-tint-4, rgba(0, 106, 106, .04))}.rb-sidebar__nav-link:active,.rb-sidebar__secondary-link:active{background:var(--surfaces-surface-tint-12, rgba(0, 106, 106, .12))}.rb-sidebar__nav-link--active,.rb-sidebar__secondary-link--active{background:var(--surfaces-surface-tint-4, rgba(0, 106, 106, .04));color:var(--rb-sidebar-active-text-color, #0056b3);font-weight:500}.rb-sidebar--closed .rb-sidebar__nav-link{height:48px;flex-shrink:0}.rb-sidebar__nav-icon{font-size:24px;flex-shrink:0;width:24px;text-align:center;line-height:24px}.rb-sidebar__nav-label,.rb-sidebar__secondary-label{font-size:.95rem;line-height:24px;transition:opacity .3s ease;opacity:1;width:auto;min-width:0;max-width:none;flex:1 1 auto;white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis}.rb-sidebar__footer{display:flex;align-items:center;padding:12px;justify-content:flex-start;position:relative;min-height:64px;box-sizing:border-box}.rb-sidebar__toggle-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--rb-sidebar-text-color, #555);position:absolute;top:12px;left:12px;transition:background-color .2s,left .3s ease}.rb-sidebar__toggle-btn:hover{background-color:var(--rb-sidebar-hover-bg, rgba(0, 0, 0, .05))}.rb-sidebar__toggle-btn:disabled{opacity:.5;cursor:not-allowed}.rb-sidebar--open .rb-sidebar__toggle-btn{left:calc(100% - 52px)}.rb-sidebar__toggle-icon{font-size:24px;transition:transform .3s ease}.rb-sidebar--open .rb-sidebar__toggle-icon{transform:rotate(180deg)}.rb-sidebar__nav-caret{margin-left:auto;font-size:20px;transition:transform .3s ease,opacity .3s ease;opacity:1;line-height:24px;flex-shrink:0}.rb-sidebar__nav-caret.rotate{transform:rotate(180deg)}.rb-sidebar__submenu{list-style:none;padding:0;margin:0}.rb-sidebar__submenu-item{margin:0}.rb-sidebar__submenu-link{display:flex;padding:12px 16px 12px 20px;margin-left:32px;justify-content:flex-start;align-items:flex-start;gap:8px;align-self:stretch;border-left:1px solid var(--Border-Neutral-Secondary, #C5C7C6);cursor:pointer;text-decoration:none;color:var(--rb-sidebar-text-color, #555);transition:background-color .2s,color .2s;box-sizing:border-box;white-space:normal;word-break:break-word;overflow:hidden}.rb-sidebar__submenu-link:hover{background:var(--surfaces-surface-tint-4, rgba(0, 106, 106, .04))}.rb-sidebar__submenu-link:active{background:var(--surfaces-surface-tint-12, rgba(0, 106, 106, .12))}.rb-sidebar__submenu-link--active{background:var(--surfaces-surface-tint-4, rgba(0, 106, 106, .04));color:var(--rb-sidebar-active-text-color, #0056b3);font-weight:500}.rb-sidebar__submenu-label{font-size:.95rem;line-height:24px;width:auto;min-width:0;max-width:none;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes rb-secondary-sidebar-enter{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion: reduce){.rb-sidebar-wrapper{transition:none}.rb-sidebar:not(.rb-sidebar--secondary),.rb-sidebar__logo-name,.rb-sidebar__logo-wordmark,.rb-sidebar__nav-label,.rb-sidebar__nav-caret,.rb-sidebar__section-title,.rb-sidebar__toggle-btn,.rb-sidebar__toggle-icon{transition:none}.rb-sidebar--secondary{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RbOverflowTooltipDirective, selector: "[rbOverflowTooltip]", inputs: ["rbOverflowTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1266
|
+
}
|
|
1267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbSidebarNavigationComponent, decorators: [{
|
|
1268
|
+
type: Component,
|
|
1269
|
+
args: [{ selector: 'rb-sidebar-navigation', standalone: true, imports: [CommonModule, RouterModule, MatTooltipModule, RbOverflowTooltipDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"rb-sidebar-wrapper\" \n [class.has-secondary]=\"hasSecondary\"\n [class.is-fixed]=\"isFixed\"\n [class.is-hovered]=\"isHovered\"\n [style.--rb-sidebar-bg]=\"backgroundColor\"\n [style.--rb-sidebar-text-color]=\"textColor\"\n [style.--rb-sidebar-active-text-color]=\"activeTextColor\"\n [style.--rb-sidebar-hover-bg]=\"hoverBackgroundColor\"\n [style.--rb-sidebar-width-open]=\"formattedWidth\"\n [style.--rb-secondary-sidebar-width]=\"formattedSecondaryWidth\"\n [style.--rb-sidebar-width-closed]=\"formattedClosedWidth\"\n [style.--rb-sidebar-section-gap]=\"formattedSectionGap\"\n>\n <aside\n class=\"rb-sidebar rb-sidebar--primary\"\n [ngClass]=\"{ \n 'rb-sidebar--open': isOpen, \n 'rb-sidebar--closed': !isOpen, \n 'rb-sidebar--fixed': isFixed,\n 'rb-sidebar--overlay': isOverlayActive\n }\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <div class=\"rb-sidebar__header\" (click)=\"onLogoClicked()\" role=\"button\" tabindex=\"0\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoName || 'Logo'\" class=\"rb-sidebar__logo-icon\" />\n }\n @if (logoTextUrl) {\n <img [src]=\"logoTextUrl\" alt=\"Rubeus\" class=\"rb-sidebar__logo-wordmark\" />\n } @else if (logoName) {\n <span class=\"rb-sidebar__logo-name\">{{ logoName }}</span>\n }\n </div>\n\n <nav class=\"rb-sidebar__nav\">\n <ul class=\"rb-sidebar__nav-list\">\n @for (item of items; track item.id) {\n <li\n class=\"rb-sidebar__nav-item\"\n [class.rb-sidebar__nav-item--section]=\"item.isSectionTitle\"\n [class.rb-sidebar__nav-item--section-without-title]=\"item.hasDivider && !item.isSectionTitle\"\n >\n @if (item.hasDivider || item.isSectionTitle) {\n <div class=\"rb-sidebar__section-divider\"></div>\n }\n @if (item.isSectionTitle) {\n @if (item.label) {\n <div class=\"rb-sidebar__section-title\">\n <span\n class=\"rb-sidebar__section-label\"\n matTooltip\n [rbOverflowTooltip]=\"item.label\"\n >{{ getSectionTitleLabel(item) }}</span>\n </div>\n }\n } @else {\n @if (item.route && (!item.children || item.children.length === 0)) {\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"rb-sidebar__nav-link--active\"\n [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n class=\"rb-sidebar__nav-link\"\n (click)=\"onItemClicked(item)\"\n >\n <i class=\"material-symbols-outlined rb-sidebar__nav-icon\">{{ item.icon }}</i>\n <span\n class=\"rb-sidebar__nav-label\"\n matTooltip\n [rbOverflowTooltip]=\"item.label\"\n >{{ getNavItemLabel(item) }}</span>\n </a>\n } @else {\n <div\n class=\"rb-sidebar__nav-link\"\n [class.rb-sidebar__nav-link--active]=\"isParentActive(item)\"\n (click)=\"toggleItem(item)\"\n role=\"button\"\n tabindex=\"0\"\n >\n <i class=\"material-symbols-outlined rb-sidebar__nav-icon\">{{ item.icon }}</i>\n <span\n class=\"rb-sidebar__nav-label\"\n matTooltip\n [rbOverflowTooltip]=\"item.label\"\n >{{ getNavItemLabel(item) }}</span>\n @if (item.children && item.children.length > 0) {\n <i class=\"material-symbols-outlined rb-sidebar__nav-caret\" [class.rotate]=\"item.expanded\">arrow_drop_down</i>\n }\n </div>\n @if (item.children && item.children.length > 0 && item.expanded && isOpen) {\n <ul class=\"rb-sidebar__submenu\">\n @for (child of item.children; track child.id) {\n <li class=\"rb-sidebar__submenu-item\">\n @if (child.route) {\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"rb-sidebar__submenu-link--active\"\n [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n class=\"rb-sidebar__submenu-link\"\n (click)=\"onItemClicked(child)\"\n >\n <span\n class=\"rb-sidebar__submenu-label\"\n matTooltip\n [rbOverflowTooltip]=\"child.label\"\n >{{ getSubmenuItemLabel(child) }}</span>\n </a>\n } @else {\n <div\n class=\"rb-sidebar__submenu-link\"\n (click)=\"onItemClicked(child)\"\n role=\"button\"\n tabindex=\"0\"\n >\n <span\n class=\"rb-sidebar__submenu-label\"\n matTooltip\n [rbOverflowTooltip]=\"child.label\"\n >{{ getSubmenuItemLabel(child) }}</span>\n </div>\n }\n </li>\n }\n </ul>\n }\n }\n }\n </li>\n }\n </ul>\n </nav>\n\n <div class=\"rb-sidebar__footer\">\n <button class=\"rb-sidebar__toggle-btn\" (click)=\"toggleFixed()\" aria-label=\"Alternar menu lateral\">\n <i class=\"material-symbols-outlined rb-sidebar__toggle-icon\">{{ toggleIcon }}</i>\n </button>\n </div>\n </aside>\n\n <!-- Secondary Sidebar -->\n @if (hasSecondary) {\n <aside class=\"rb-sidebar rb-sidebar--secondary\">\n <div class=\"rb-sidebar__header\">\n <span class=\"rb-sidebar__secondary-title\">{{ secondaryTitle }}</span>\n </div>\n <nav class=\"rb-sidebar__nav\">\n <ul class=\"rb-sidebar__nav-list\">\n @for (item of secondaryItems; track item.id) {\n <li class=\"rb-sidebar__nav-item\">\n @if (item.route) {\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"rb-sidebar__nav-link--active\"\n [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n class=\"rb-sidebar__secondary-link\"\n [class.rb-sidebar__nav-link--active]=\"isSecondaryItemActive(item)\"\n (click)=\"onItemClicked(item)\"\n >\n <span class=\"rb-sidebar__secondary-label\">{{ item.label }}</span>\n </a>\n } @else {\n <div\n class=\"rb-sidebar__secondary-link\"\n [class.rb-sidebar__nav-link--active]=\"isSecondaryItemActive(item)\"\n (click)=\"onItemClicked(item)\"\n role=\"button\"\n tabindex=\"0\"\n >\n <span class=\"rb-sidebar__secondary-label\">{{ item.label }}</span>\n </div>\n }\n </li>\n }\n </ul>\n </nav>\n </aside>\n }\n</div>\n", styles: [":host{display:block;height:100%;flex-shrink:0}.rb-sidebar-wrapper{display:flex;height:100%;position:relative;background-color:transparent;flex-shrink:0;overflow:visible;transition:width .3s cubic-bezier(.4,0,.2,1);will-change:width}.rb-sidebar-wrapper:not(.has-secondary){width:var(--rb-sidebar-width-closed, 64px)}.rb-sidebar-wrapper:not(.has-secondary).is-fixed{width:var(--rb-sidebar-width-open, 320px)}.rb-sidebar-wrapper:not(.has-secondary):not(.is-fixed){width:var(--rb-sidebar-width-closed, 64px)}.rb-sidebar-wrapper.has-secondary{box-sizing:border-box;width:var(--rb-secondary-sidebar-width, 320px);overflow:hidden;background-color:var(--rb-sidebar-bg, #F8F9FA)}.rb-sidebar-wrapper.has-secondary .rb-sidebar--primary{position:absolute;left:0;top:0;bottom:0;z-index:10;box-shadow:none;border-right:1px solid var(--Border-Neutral-Secondary, #C5C7C6)}.rb-sidebar-wrapper.has-secondary .rb-sidebar--primary.rb-sidebar--closed{width:var(--rb-sidebar-width-closed, 64px)}.rb-sidebar-wrapper.has-secondary .rb-sidebar--primary.rb-sidebar--open{width:var(--rb-sidebar-width-open, 320px)}.rb-sidebar{height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--rb-sidebar-bg, #F8F9FA);overflow:hidden;border-right:1px solid var(--Border-Neutral-Secondary, #C5C7C6);box-sizing:border-box}.rb-sidebar:not(.rb-sidebar--secondary){width:var(--rb-sidebar-width-closed, 64px);min-width:var(--rb-sidebar-width-closed, 64px);transition:width .3s ease}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--open{width:var(--rb-sidebar-width-open, 320px)}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed{width:var(--rb-sidebar-width-closed, 64px)}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__logo-name,.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__logo-wordmark,.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__nav-label,.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__nav-caret{opacity:0;pointer-events:none}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__logo-name,.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__logo-wordmark{visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--closed .rb-sidebar__section-title{opacity:0;pointer-events:none;max-height:0;padding-top:0;padding-bottom:0;margin:0;border:none}.rb-sidebar:not(.rb-sidebar--secondary).rb-sidebar--overlay:not(.rb-sidebar--fixed){position:absolute;top:0;left:0;bottom:0;z-index:100}.rb-sidebar--secondary{position:absolute;left:0;top:0;bottom:0;z-index:1;width:var(--rb-secondary-sidebar-width, 320px);box-sizing:border-box;padding-left:var(--rb-sidebar-width-closed, 64px);border-right:1px solid var(--Border-Neutral-Secondary, #C5C7C6);animation:rb-secondary-sidebar-enter .3s cubic-bezier(.4,0,.2,1) both}.rb-sidebar--secondary .rb-sidebar__header{pointer-events:none}.rb-sidebar__header{display:flex;align-items:center;padding:8px 12px 8px 16.5px;height:var(--rb-sidebar-header-height, 48px);cursor:pointer;box-sizing:border-box;white-space:nowrap;gap:8px;outline:none;-webkit-tap-highlight-color:transparent}.rb-sidebar__logo-icon{height:27.8px;width:31px;object-fit:contain;flex-shrink:0}.rb-sidebar__logo-wordmark{width:79.47px;height:18.07px;object-fit:contain;flex-shrink:0}.rb-sidebar__logo-name{font-weight:600;font-size:1.1rem;color:var(--rb-sidebar-text-color, #505353);transition:opacity .3s ease;opacity:1;width:max-content;max-width:calc(var(--rb-sidebar-width-open, 320px) - 80px);flex-shrink:0;white-space:normal;word-break:break-word;line-height:28px}.rb-sidebar__secondary-title{overflow:hidden;color:var(--rb-sidebar-text-color, #505353);font-size:16px;font-weight:500;line-height:24px;text-overflow:ellipsis;white-space:nowrap}.rb-sidebar__nav{flex:1;overflow-y:auto;overflow-x:hidden;padding-top:0}.rb-sidebar__nav::-webkit-scrollbar{width:12px;background-color:var(--rb-sidebar-bg, #F8F9FA)}.rb-sidebar__nav::-webkit-scrollbar-track{background-color:var(--rb-sidebar-bg, #F8F9FA)}.rb-sidebar__nav::-webkit-scrollbar-thumb{background-color:#757877;background-clip:content-box;border:4px solid transparent;border-radius:8px}.rb-sidebar__nav::-webkit-scrollbar-button,.rb-sidebar__nav::-webkit-scrollbar-button:single-button,.rb-sidebar__nav::-webkit-scrollbar-button:vertical:start:decrement,.rb-sidebar__nav::-webkit-scrollbar-button:vertical:end:increment{appearance:none;display:none;width:0;height:0;background:transparent}.rb-sidebar--closed .rb-sidebar__nav{overflow-y:hidden;scrollbar-width:none}.rb-sidebar--closed .rb-sidebar__nav::-webkit-scrollbar{display:none}.rb-sidebar__nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}.rb-sidebar__nav-item{margin:0}.rb-sidebar__section-title{padding:0 16px;font-size:16px;font-weight:500;font-style:normal;letter-spacing:.15px;font-family:Roboto;line-height:24px;color:var(--rb-sidebar-text-color, #2E3131);transition:max-height .3s ease,padding .3s ease,margin .3s ease,opacity .3s ease;white-space:nowrap;opacity:1;height:48px;max-height:48px;display:flex;align-items:center;width:100%;min-width:0;box-sizing:border-box;overflow:hidden}.rb-sidebar__section-label{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rb-sidebar__section-divider{height:1px;width:100%;background-color:var(--Border-Neutral-Secondary, #C5C7C6);margin:4px 0 0}.rb-sidebar__nav-item--section-without-title>.rb-sidebar__section-divider{margin:var(--rb-sidebar-section-gap, 4px) 0}.rb-sidebar__nav-link,.rb-sidebar__secondary-link{display:flex;padding:12px 16px 12px 20px;justify-content:flex-start;align-items:flex-start;gap:8px;align-self:stretch;cursor:pointer;text-decoration:none;color:var(--rb-sidebar-text-color, #555);transition:background-color .2s,color .2s;box-sizing:border-box;white-space:normal;word-break:break-word;overflow:hidden}.rb-sidebar__nav-link:hover,.rb-sidebar__secondary-link:hover{background:var(--surfaces-surface-tint-4, rgba(0, 106, 106, .04))}.rb-sidebar__nav-link:active,.rb-sidebar__secondary-link:active{background:var(--surfaces-surface-tint-12, rgba(0, 106, 106, .12))}.rb-sidebar__nav-link--active,.rb-sidebar__secondary-link--active{background:var(--surfaces-surface-tint-4, rgba(0, 106, 106, .04));color:var(--rb-sidebar-active-text-color, #0056b3);font-weight:500}.rb-sidebar--closed .rb-sidebar__nav-link{height:48px;flex-shrink:0}.rb-sidebar__nav-icon{font-size:24px;flex-shrink:0;width:24px;text-align:center;line-height:24px}.rb-sidebar__nav-label,.rb-sidebar__secondary-label{font-size:.95rem;line-height:24px;transition:opacity .3s ease;opacity:1;width:auto;min-width:0;max-width:none;flex:1 1 auto;white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis}.rb-sidebar__footer{display:flex;align-items:center;padding:12px;justify-content:flex-start;position:relative;min-height:64px;box-sizing:border-box}.rb-sidebar__toggle-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--rb-sidebar-text-color, #555);position:absolute;top:12px;left:12px;transition:background-color .2s,left .3s ease}.rb-sidebar__toggle-btn:hover{background-color:var(--rb-sidebar-hover-bg, rgba(0, 0, 0, .05))}.rb-sidebar__toggle-btn:disabled{opacity:.5;cursor:not-allowed}.rb-sidebar--open .rb-sidebar__toggle-btn{left:calc(100% - 52px)}.rb-sidebar__toggle-icon{font-size:24px;transition:transform .3s ease}.rb-sidebar--open .rb-sidebar__toggle-icon{transform:rotate(180deg)}.rb-sidebar__nav-caret{margin-left:auto;font-size:20px;transition:transform .3s ease,opacity .3s ease;opacity:1;line-height:24px;flex-shrink:0}.rb-sidebar__nav-caret.rotate{transform:rotate(180deg)}.rb-sidebar__submenu{list-style:none;padding:0;margin:0}.rb-sidebar__submenu-item{margin:0}.rb-sidebar__submenu-link{display:flex;padding:12px 16px 12px 20px;margin-left:32px;justify-content:flex-start;align-items:flex-start;gap:8px;align-self:stretch;border-left:1px solid var(--Border-Neutral-Secondary, #C5C7C6);cursor:pointer;text-decoration:none;color:var(--rb-sidebar-text-color, #555);transition:background-color .2s,color .2s;box-sizing:border-box;white-space:normal;word-break:break-word;overflow:hidden}.rb-sidebar__submenu-link:hover{background:var(--surfaces-surface-tint-4, rgba(0, 106, 106, .04))}.rb-sidebar__submenu-link:active{background:var(--surfaces-surface-tint-12, rgba(0, 106, 106, .12))}.rb-sidebar__submenu-link--active{background:var(--surfaces-surface-tint-4, rgba(0, 106, 106, .04));color:var(--rb-sidebar-active-text-color, #0056b3);font-weight:500}.rb-sidebar__submenu-label{font-size:.95rem;line-height:24px;width:auto;min-width:0;max-width:none;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes rb-secondary-sidebar-enter{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion: reduce){.rb-sidebar-wrapper{transition:none}.rb-sidebar:not(.rb-sidebar--secondary),.rb-sidebar__logo-name,.rb-sidebar__logo-wordmark,.rb-sidebar__nav-label,.rb-sidebar__nav-caret,.rb-sidebar__section-title,.rb-sidebar__toggle-btn,.rb-sidebar__toggle-icon{transition:none}.rb-sidebar--secondary{animation:none}}\n"] }]
|
|
1270
|
+
}], propDecorators: { logoUrl: [{
|
|
1271
|
+
type: Input
|
|
1272
|
+
}], logoTextUrl: [{
|
|
1273
|
+
type: Input
|
|
1274
|
+
}], logoName: [{
|
|
1275
|
+
type: Input
|
|
1276
|
+
}], items: [{
|
|
1277
|
+
type: Input
|
|
1278
|
+
}], initiallyFixed: [{
|
|
1279
|
+
type: Input
|
|
1280
|
+
}], secondaryTitle: [{
|
|
1281
|
+
type: Input
|
|
1282
|
+
}], secondaryItems: [{
|
|
1283
|
+
type: Input
|
|
1284
|
+
}], backgroundColor: [{
|
|
1285
|
+
type: Input
|
|
1286
|
+
}], textColor: [{
|
|
1287
|
+
type: Input
|
|
1288
|
+
}], activeTextColor: [{
|
|
1289
|
+
type: Input
|
|
1290
|
+
}], hoverBackgroundColor: [{
|
|
1291
|
+
type: Input
|
|
1292
|
+
}], width: [{
|
|
1293
|
+
type: Input
|
|
1294
|
+
}], sidebarWidth: [{
|
|
1295
|
+
type: Input
|
|
1296
|
+
}], secondaryWidth: [{
|
|
1297
|
+
type: Input
|
|
1298
|
+
}], secondarySidebarWidth: [{
|
|
1299
|
+
type: Input
|
|
1300
|
+
}], closedWidth: [{
|
|
1301
|
+
type: Input
|
|
1302
|
+
}], sectionGap: [{
|
|
1303
|
+
type: Input
|
|
1304
|
+
}], toggleIcon: [{
|
|
1305
|
+
type: Input
|
|
1306
|
+
}], itemClick: [{
|
|
1307
|
+
type: Output
|
|
1308
|
+
}], logoClick: [{
|
|
1309
|
+
type: Output
|
|
1310
|
+
}] } });
|
|
1311
|
+
|
|
1312
|
+
class RbHeaderComponent {
|
|
1313
|
+
sanitizer;
|
|
1314
|
+
changeDetectorRef;
|
|
1315
|
+
document = inject(DOCUMENT);
|
|
1316
|
+
destroyRef = inject(DestroyRef);
|
|
1317
|
+
pageTitle = '';
|
|
1318
|
+
userProfile;
|
|
1319
|
+
appsList = [];
|
|
1320
|
+
backgroundColor = '#F8FAF9';
|
|
1321
|
+
profileMenu = [];
|
|
1322
|
+
onHelpClick = new EventEmitter();
|
|
1323
|
+
onAppsClick = new EventEmitter();
|
|
1324
|
+
onViewAllAppsClick = new EventEmitter();
|
|
1325
|
+
onProfileMenuItemClick = new EventEmitter();
|
|
1326
|
+
onLogoutClick = new EventEmitter();
|
|
1327
|
+
onProfileMenuClick = new EventEmitter();
|
|
1328
|
+
isAppsMenuOpen = false;
|
|
1329
|
+
isProfileMenuOpen = false;
|
|
1330
|
+
appsMenuRef;
|
|
1331
|
+
appsButtonRef;
|
|
1332
|
+
appsContainerRef;
|
|
1333
|
+
profileButtonRef;
|
|
1334
|
+
profileMenuRef;
|
|
1335
|
+
constructor(sanitizer, changeDetectorRef) {
|
|
1336
|
+
this.sanitizer = sanitizer;
|
|
1337
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
1338
|
+
this.document.addEventListener('pointerdown', this.handleDocumentPointerDown, true);
|
|
1339
|
+
this.destroyRef.onDestroy(() => {
|
|
1340
|
+
this.document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true);
|
|
1341
|
+
});
|
|
1342
|
+
}
|
|
1343
|
+
get rubeusApps() {
|
|
1344
|
+
return this.appsList.filter(app => app.isRubeusApp !== false);
|
|
1345
|
+
}
|
|
1346
|
+
get nonRubeusApps() {
|
|
1347
|
+
return this.appsList.filter(app => app.isRubeusApp === false);
|
|
1348
|
+
}
|
|
1349
|
+
getSafeSvg(svgString) {
|
|
1350
|
+
return svgString ? this.sanitizer.bypassSecurityTrustHtml(svgString) : null;
|
|
1351
|
+
}
|
|
1352
|
+
handleDocumentPointerDown = (event) => {
|
|
1353
|
+
const target = event.target;
|
|
1354
|
+
let menuStateChanged = false;
|
|
1355
|
+
if (!target) {
|
|
1356
|
+
return;
|
|
1357
|
+
}
|
|
1358
|
+
if (this.isAppsMenuOpen) {
|
|
1359
|
+
const clickedInsideAppsContainer = this.appsContainerRef?.nativeElement.contains(target);
|
|
1360
|
+
if (!clickedInsideAppsContainer) {
|
|
1361
|
+
this.isAppsMenuOpen = false;
|
|
1362
|
+
menuStateChanged = true;
|
|
1363
|
+
}
|
|
1364
|
+
}
|
|
1365
|
+
if (this.isProfileMenuOpen) {
|
|
1366
|
+
const clickedInsideProfile = this.profileButtonRef?.nativeElement.contains(target);
|
|
1367
|
+
const clickedInsideProfileMenu = this.profileMenuRef?.nativeElement.contains(target);
|
|
1368
|
+
if (!clickedInsideProfile && !clickedInsideProfileMenu) {
|
|
1369
|
+
this.isProfileMenuOpen = false;
|
|
1370
|
+
menuStateChanged = true;
|
|
1371
|
+
}
|
|
1372
|
+
}
|
|
1373
|
+
if (menuStateChanged) {
|
|
1374
|
+
this.changeDetectorRef.detectChanges();
|
|
1375
|
+
}
|
|
1376
|
+
};
|
|
1377
|
+
handleAppsClick() {
|
|
1378
|
+
this.isAppsMenuOpen = !this.isAppsMenuOpen;
|
|
1379
|
+
this.onAppsClick.emit();
|
|
1380
|
+
}
|
|
1381
|
+
handleAppSelect(app) {
|
|
1382
|
+
if (app.action) {
|
|
1383
|
+
app.action();
|
|
1384
|
+
}
|
|
1385
|
+
else if (app.url) {
|
|
1386
|
+
window.location.href = app.url; // Or use Router if it's an internal link
|
|
1387
|
+
}
|
|
1388
|
+
this.isAppsMenuOpen = false;
|
|
1389
|
+
}
|
|
1390
|
+
handleViewAllAppsClick() {
|
|
1391
|
+
this.onViewAllAppsClick.emit();
|
|
1392
|
+
this.isAppsMenuOpen = false;
|
|
1393
|
+
}
|
|
1394
|
+
handleHelpClick() {
|
|
1395
|
+
this.onHelpClick.emit();
|
|
1396
|
+
}
|
|
1397
|
+
handleProfileClick() {
|
|
1398
|
+
this.isProfileMenuOpen = !this.isProfileMenuOpen;
|
|
1399
|
+
this.onProfileMenuClick.emit();
|
|
1400
|
+
}
|
|
1401
|
+
handleProfileMenuItemClick(item) {
|
|
1402
|
+
this.onProfileMenuItemClick.emit(item);
|
|
1403
|
+
this.isProfileMenuOpen = false;
|
|
1404
|
+
}
|
|
1405
|
+
handleLogoutClick() {
|
|
1406
|
+
this.onLogoutClick.emit();
|
|
1407
|
+
this.isProfileMenuOpen = false;
|
|
1408
|
+
}
|
|
1409
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHeaderComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1410
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbHeaderComponent, isStandalone: true, selector: "rb-header", inputs: { pageTitle: "pageTitle", userProfile: "userProfile", appsList: "appsList", backgroundColor: "backgroundColor", profileMenu: "profileMenu" }, outputs: { onHelpClick: "onHelpClick", onAppsClick: "onAppsClick", onViewAllAppsClick: "onViewAllAppsClick", onProfileMenuItemClick: "onProfileMenuItemClick", onLogoutClick: "onLogoutClick", onProfileMenuClick: "onProfileMenuClick" }, viewQueries: [{ propertyName: "appsMenuRef", first: true, predicate: ["appsMenuRef"], descendants: true }, { propertyName: "appsButtonRef", first: true, predicate: ["appsButtonRef"], descendants: true }, { propertyName: "appsContainerRef", first: true, predicate: ["appsContainerRef"], descendants: true }, { propertyName: "profileButtonRef", first: true, predicate: ["profileButtonRef"], descendants: true }, { propertyName: "profileMenuRef", first: true, predicate: ["profileMenuRef"], descendants: true }], ngImport: i0, template: "<header class=\"rb-header\" [style.--rb-header-bg]=\"backgroundColor\">\n <div class=\"rb-header__left\">\n <!-- Page Title -->\n @if (pageTitle) {\n <h1 class=\"rb-header__title\" [title]=\"pageTitle\">{{ pageTitle }}</h1>\n }\n </div>\n\n <div class=\"rb-header__right\">\n <!-- Apps Button and Menu -->\n <div class=\"rb-header__apps-container\" #appsContainerRef>\n <button mat-icon-button class=\"rb-header__apps-btn\" #appsButtonRef (click)=\"handleAppsClick()\" aria-label=\"Aplicativos\" title=\"Aplicativos\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18C4 17.45 4.19583 16.9792 4.5875 16.5875C4.97917 16.1958 5.45 16 6 16C6.55 16 7.02083 16.1958 7.4125 16.5875C7.80417 16.9792 8 17.45 8 18C8 18.55 7.80417 19.0208 7.4125 19.4125C7.02083 19.8042 6.55 20 6 20ZM12 20C11.45 20 10.9792 19.8042 10.5875 19.4125C10.1958 19.0208 10 18.55 10 18C10 17.45 10.1958 16.9792 10.5875 16.5875C10.9792 16.1958 11.45 16 12 16C12.55 16 13.0208 16.1958 13.4125 16.5875C13.8042 16.9792 14 17.45 14 18C14 18.55 13.8042 19.0208 13.4125 19.4125C13.0208 19.8042 12.55 20 12 20ZM18 20C17.45 20 16.9792 19.8042 16.5875 19.4125C16.1958 19.0208 16 18.55 16 18C16 17.45 16.1958 16.9792 16.5875 16.5875C16.9792 16.1958 17.45 16 18 16C18.55 16 19.0208 16.1958 19.4125 16.5875C19.8042 16.9792 20 17.45 20 18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20ZM6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14ZM6 8C5.45 8 4.97917 7.80417 4.5875 7.4125C4.19583 7.02083 4 6.55 4 6C4 5.45 4.19583 4.97917 4.5875 4.5875C4.97917 4.19583 5.45 4 6 4C6.55 4 7.02083 4.19583 7.4125 4.5875C7.80417 4.97917 8 5.45 8 6C8 6.55 7.80417 7.02083 7.4125 7.4125C7.02083 7.80417 6.55 8 6 8ZM12 8C11.45 8 10.9792 7.80417 10.5875 7.4125C10.1958 7.02083 10 6.55 10 6C10 5.45 10.1958 4.97917 10.5875 4.5875C10.9792 4.19583 11.45 4 12 4C12.55 4 13.0208 4.19583 13.4125 4.5875C13.8042 4.97917 14 5.45 14 6C14 6.55 13.8042 7.02083 13.4125 7.4125C13.0208 7.80417 12.55 8 12 8ZM18 8C17.45 8 16.9792 7.80417 16.5875 7.4125C16.1958 7.02083 16 6.55 16 6C16 5.45 16.1958 4.97917 16.5875 4.5875C16.9792 4.19583 17.45 4 18 4C18.55 4 19.0208 4.19583 19.4125 4.5875C19.8042 4.97917 20 5.45 20 6C20 6.55 19.8042 7.02083 19.4125 7.4125C19.0208 7.80417 18.55 8 18 8Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n\n @if (isAppsMenuOpen) {\n <div class=\"rb-header__apps-menu\" #appsMenuRef>\n \n <!-- Rubeus Apps -->\n @if (rubeusApps.length > 0) {\n <div class=\"rb-header__apps-card\">\n <div class=\"rb-header__apps-grid\">\n @for (app of rubeusApps; track app.name) {\n <button type=\"button\" class=\"rb-header__app-item\" (click)=\"handleAppSelect(app)\">\n <div class=\"rb-header__app-icon-wrapper\">\n @if (app.iconUrl) {\n <img [src]=\"app.iconUrl\" [alt]=\"app.name\" />\n }\n @if (app.iconSvg) {\n <div [innerHTML]=\"getSafeSvg(app.iconSvg)\"></div>\n }\n @if (!app.iconUrl && !app.iconSvg) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"></rect><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"></rect><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"></rect><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"></rect></svg>\n }\n </div>\n <span class=\"rb-header__app-name\">{{ app.name }}</span>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Non-Rubeus Apps -->\n @if (nonRubeusApps.length > 0) {\n <div class=\"rb-header__apps-card\">\n <div class=\"rb-header__apps-grid\">\n @for (app of nonRubeusApps; track app.name) {\n <button type=\"button\" class=\"rb-header__app-item\" (click)=\"handleAppSelect(app)\">\n <div class=\"rb-header__app-icon-wrapper\">\n @if (app.iconUrl) {\n <img [src]=\"app.iconUrl\" [alt]=\"app.name\" />\n }\n @if (app.iconSvg) {\n <div [innerHTML]=\"getSafeSvg(app.iconSvg)\"></div>\n }\n @if (!app.iconUrl && !app.iconSvg) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"></rect><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"></rect><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"></rect><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"></rect></svg>\n }\n </div>\n <span class=\"rb-header__app-name\">{{ app.name }}</span>\n </button>\n }\n </div>\n </div>\n }\n\n <div class=\"rb-header__apps-footer\">\n <button mat-button [rbDynamicButton]=\"'cancel'\" color=\"primary\" type=\"button\" class=\"rb-header__view-all-apps primary\" (click)=\"handleViewAllAppsClick()\">\n Ver todos os aplicativos\n </button>\n </div>\n </div>\n }\n </div>\n\n <!-- Help Button -->\n <button mat-icon-button class=\"rb-header__icon-btn\" (click)=\"handleHelpClick()\" aria-label=\"Ajuda\" title=\"Ajuda\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M11.96 16.8C12.24 16.8 12.4767 16.7033 12.67 16.51C12.8633 16.3167 12.96 16.08 12.96 15.8C12.96 15.52 12.8633 15.2833 12.67 15.09C12.4767 14.8967 12.24 14.8 11.96 14.8C11.68 14.8 11.4433 14.8967 11.25 15.09C11.0567 15.2833 10.96 15.52 10.96 15.8C10.96 16.08 11.0567 16.3167 11.25 16.51C11.4433 16.7033 11.68 16.8 11.96 16.8ZM11.24 13.72H12.72C12.72 13.28 12.77 12.9333 12.87 12.68C12.97 12.4267 13.2533 12.08 13.72 11.64C14.0667 11.2933 14.34 10.9633 14.54 10.65C14.74 10.3367 14.84 9.96 14.84 9.52C14.84 8.77333 14.5667 8.2 14.02 7.8C13.4733 7.4 12.8267 7.2 12.08 7.2C11.32 7.2 10.7033 7.4 10.23 7.8C9.75667 8.2 9.42667 8.68 9.24 9.24L10.56 9.76C10.6267 9.52 10.7767 9.26 11.01 8.98C11.2433 8.7 11.6 8.56 12.08 8.56C12.5067 8.56 12.8267 8.67667 13.04 8.91C13.2533 9.14333 13.36 9.4 13.36 9.68C13.36 9.94667 13.28 10.1967 13.12 10.43C12.96 10.6633 12.76 10.88 12.52 11.08C11.9333 11.6 11.5733 11.9933 11.44 12.26C11.3067 12.5267 11.24 13.0133 11.24 13.72ZM12 20C10.8933 20 9.85333 19.79 8.88 19.37C7.90667 18.95 7.06 18.38 6.34 17.66C5.62 16.94 5.05 16.0933 4.63 15.12C4.21 14.1467 4 13.1067 4 12C4 10.8933 4.21 9.85333 4.63 8.88C5.05 7.90667 5.62 7.06 6.34 6.34C7.06 5.62 7.90667 5.05 8.88 4.63C9.85333 4.21 10.8933 4 12 4C13.1067 4 14.1467 4.21 15.12 4.63C16.0933 5.05 16.94 5.62 17.66 6.34C18.38 7.06 18.95 7.90667 19.37 8.88C19.79 9.85333 20 10.8933 20 12C20 13.1067 19.79 14.1467 19.37 15.12C18.95 16.0933 18.38 16.94 17.66 17.66C16.94 18.38 16.0933 18.95 15.12 19.37C14.1467 19.79 13.1067 20 12 20Z\" fill=\"#8E9191\"/>\n <path d=\"M11.9601 14.8C12.24 14.8 12.4769 14.8965 12.6702 15.0898C12.8635 15.2831 12.9601 15.52 12.9601 15.8C12.9601 16.0799 12.8635 16.3168 12.6702 16.5101C12.4769 16.7034 12.24 16.7999 11.9601 16.8C11.6801 16.8 11.4432 16.7034 11.2499 16.5101C11.0566 16.3168 10.9601 16.08 10.9601 15.8C10.9601 15.52 11.0566 15.2831 11.2499 15.0898C11.4432 14.8965 11.6801 14.8 11.9601 14.8ZM12.0796 7.19995C12.8263 7.19995 13.4735 7.39995 14.0202 7.79995C14.5667 8.19994 14.8397 8.77369 14.8397 9.52026C14.8397 9.96013 14.7397 10.3367 14.5397 10.65C14.3398 10.9632 14.0667 11.2932 13.7202 11.6398C13.2538 12.0796 12.9703 12.4263 12.8702 12.6796C12.7702 12.933 12.7202 13.2803 12.7202 13.7203H11.2397C11.2397 13.0138 11.3065 12.5268 11.4397 12.2601C11.5731 11.9934 11.9335 11.5996 12.5202 11.0796C12.7601 10.8797 12.9603 10.6629 13.1202 10.4296C13.2801 10.1964 13.3601 9.94617 13.3601 9.67964C13.36 9.39976 13.253 9.14335 13.0397 8.91011C12.8264 8.67677 12.5063 8.56011 12.0796 8.56011C11.5999 8.56017 11.2433 8.69987 11.0101 8.97964C10.7767 9.25964 10.6267 9.52011 10.5601 9.76011L9.23975 9.23979C9.42639 8.67991 9.75638 8.1999 10.2296 7.79995C10.7029 7.40001 11.3197 7.20001 12.0796 7.19995Z\" fill=\"white\"/>\n </svg>\n </button>\n\n <div class=\"rb-header__divider\"></div>\n\n <!-- Profile -->\n @if (userProfile) {\n <div class=\"rb-header__profile-wrapper\">\n <div class=\"rb-header__profile\" #profileButtonRef [class.rb-header__profile--open]=\"isProfileMenuOpen\" (click)=\"handleProfileClick()\">\n <div class=\"rb-header__profile-avatar-container\">\n @if (userProfile.avatarUrl) {\n <img [src]=\"userProfile.avatarUrl\" [alt]=\"userProfile.name\" class=\"rb-header__profile-avatar\" />\n } @else {\n <div class=\"rb-header__profile-avatar rb-header__profile-avatar--placeholder\"></div>\n }\n </div>\n <div class=\"rb-header__profile-info\">\n <span class=\"rb-header__profile-name\">{{ userProfile.name }}</span>\n <span class=\"rb-header__profile-base\">{{ userProfile.base }}</span>\n </div>\n <svg class=\"rb-header__profile-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <path d=\"M9 11.25L5.25 7.5H12.75L9 11.25Z\" fill=\"#505353\"/>\n </svg>\n </div>\n\n <!-- Profile Menu -->\n @if (isProfileMenuOpen) {\n <div class=\"rb-header__profile-menu\" #profileMenuRef>\n <!-- Dynamic Items -->\n @for (item of profileMenu; track item.id || item.label) {\n <div class=\"rb-header__profile-menu-item\" (click)=\"handleProfileMenuItemClick(item)\">\n @if (item.iconSvg || item.iconUrl) {\n <div class=\"rb-header__profile-menu-icon\">\n @if (item.iconUrl) {\n <img [src]=\"item.iconUrl\" [alt]=\"item.label\" />\n }\n @if (item.iconSvg) {\n <div [innerHTML]=\"getSafeSvg(item.iconSvg)\"></div>\n }\n </div>\n }\n <span class=\"rb-header__profile-menu-label\">{{ item.label }}</span>\n </div>\n }\n\n <!-- Default Logout Item -->\n <div class=\"rb-header__profile-menu-item rb-header__profile-menu-item--logout\" (click)=\"handleLogoutClick()\">\n <div class=\"rb-header__profile-menu-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M10.09 15.59L11.5 17L16.5 12L11.5 7L10.09 8.41L12.67 11H3V13H12.67L10.09 15.59ZM19 3H5C3.89 3 3 3.9 3 5V9H5V5H19V19H5V15H3V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"rb-header__profile-menu-label\">Sair</span>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</header>\n", styles: [".rb-header{display:flex;width:100%;min-height:48px;padding:0 0 0 12px;justify-content:space-between;align-items:center;gap:8px;border-bottom:.5px solid var(--border-neutral-secondary, #C5C7C6);background:var(--rb-header-bg, var(--background-neutral-secondary, #F8FAF9));font-family:var(--font-family-base, \"Inter\", sans-serif);box-sizing:border-box}.rb-header__left{display:flex;align-items:center;gap:16px}.rb-header__right{display:flex;align-items:center}.rb-header__title{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;color:var(--text-neutral-subtle, #505353);text-overflow:ellipsis;font-family:var(--typescale-body-medium-font-family, Roboto);font-size:var(--typescale-body-medium-font-size, 14px);font-style:normal;font-weight:400;line-height:var(--typescale-body-medium-line-height, 20px);letter-spacing:var(--typescale-body-medium-tracking, .25px)}.rb-header__icon-btn,.rb-header__apps-btn{--mat-icon-button-state-layer-color: var(--color-primary, #006A6A);--mat-icon-button-hover-state-layer-opacity: .08}.rb-header__icon-btn{flex-shrink:0}.rb-header__icon-btn svg{width:24px;height:24px;flex-shrink:0}.rb-header__apps-container{position:relative;display:flex;align-items:center}.rb-header__apps-btn{flex-shrink:0;color:var(--icon-neutral-secondary, #747878)}.rb-header__apps-menu{position:absolute;top:calc(100% + 4px);right:0;width:380px;height:auto;min-height:300px;max-height:400px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;padding:16px;border-radius:8px;background:var(--Background-Neutral-Tertiary, #EFF1F0);box-shadow:0 1px 2px #006a6a4d,0 2px 6px 2px #00141426;z-index:100;overflow-y:auto;overflow-x:hidden}.rb-header__apps-menu::-webkit-scrollbar{width:8px}.rb-header__apps-menu::-webkit-scrollbar-track{background:transparent;margin-block:16px}.rb-header__apps-menu::-webkit-scrollbar-thumb{border-radius:100px;background:var(--Border-Inverse-Tertiary, #757877);background-clip:content-box;border:2px solid transparent}.rb-header__apps-card{display:flex;width:348px;height:auto;flex-shrink:0;box-sizing:border-box;padding:16px;flex-direction:column;align-items:flex-start;gap:8px;border-radius:8px;background:var(--Background-Neutral-Secondary, #F8FAF9)}.rb-header__apps-card+.rb-header__apps-card{margin-top:8px}.rb-header__apps-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:8px}.rb-header__app-item{display:flex;flex-direction:column;width:100px;min-height:88px;padding:2px 4px;justify-content:flex-start;align-items:center;gap:4px;box-sizing:border-box;border:0;border-radius:8px;background:transparent;color:inherit;font-family:inherit;cursor:pointer;text-align:center;transition:background-color .2s ease-in-out}.rb-header__app-item:hover,.rb-header__app-item:focus-visible{padding-bottom:8px;background:var(--Background-Neutral-Tertiary, #EFF1F0)}.rb-header__app-item:hover .rb-header__app-name,.rb-header__app-item:focus-visible .rb-header__app-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:40px;white-space:normal}.rb-header__app-icon-wrapper{display:flex;align-items:center;justify-content:center;width:48px;height:48px;transition:transform .2s}.rb-header__app-icon-wrapper img,.rb-header__app-icon-wrapper svg{max-width:100%;max-height:100%}.rb-header__app-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;width:100%;max-height:20px;overflow:hidden;color:var(--Text-Neutral-Primary, #191C1C);text-align:center;text-overflow:ellipsis;font-family:var(--Typescale-Body-Medium-Font-family, Roboto);font-size:var(--Typescale-Body-Medium-Font-size, 14px);font-style:normal;font-weight:400;line-height:var(--Typescale-Body-Medium-Line-height, 20px);letter-spacing:var(--Typescale-Body-Medium-Tracking, .25px)}.rb-header__apps-footer{display:flex;flex-shrink:0;justify-content:center;margin:16px 0 8px}.rb-header__view-all-apps{--mdc-outlined-button-container-color: transparent;--mdc-outlined-button-label-text-color: var(--Text-Brand-Primary, #004F4F);--mdc-outlined-button-label-text-font: var(--Typescale-Label-Large-Font-family, Roboto);--mdc-outlined-button-label-text-size: var(--Typescale-Label-Large-Font-size, 14px);--mdc-outlined-button-label-text-tracking: var(--Typescale-Label-Large-Tracking, .1px);--mdc-outlined-button-label-text-weight: 500;--mdc-outlined-button-container-height: 40px;--mdc-outlined-button-container-shape: 100px;--mdc-outlined-button-outline-color: var(--Border-Neutral-Secondary, #C5C7C6);--mdc-outlined-button-outline-width: 1px;--mat-outlined-button-horizontal-padding: 24px;--mat-outlined-button-state-layer-color: #006A6A;--mat-outlined-button-hover-state-layer-opacity: 0;--mat-outlined-button-focus-state-layer-opacity: 0;--mat-outlined-button-pressed-state-layer-opacity: 0;--mat-outlined-button-ripple-color: rgba(0, 106, 106, .12);background:transparent;box-shadow:none;border-radius:100px;border:1px solid var(--Border-Neutral-Secondary, #C5C7C6);color:var(--Text-Brand-Primary, #004F4F);cursor:pointer;font-family:var(--Typescale-Label-Large-Font-family, Roboto);font-size:var(--Typescale-Label-Large-Font-size, 14px);font-style:normal;font-weight:500;line-height:var(--Typescale-Label-Large-Line-height, 20px);letter-spacing:var(--Typescale-Label-Large-Tracking, .1px);transition:background-color .2s ease-in-out}.rb-header__view-all-apps:hover,.rb-header__view-all-apps:focus-visible{background:var(--surface-tint-8, rgba(0, 106, 106, .08));box-shadow:none}.rb-header__view-all-apps:active{background:var(--surface-tint-12, rgba(0, 106, 106, .12));box-shadow:none}.rb-header__divider{display:flex;width:1px;margin-inline:4px;padding:16px 0;flex-direction:column;align-items:center;align-self:stretch;background:#e1e3e2;background-clip:content-box}.rb-header__profile-wrapper{position:relative;display:flex;flex:1 0 0}.rb-header__profile{display:flex;height:48px;padding:4px 16px;align-items:center;flex:1 0 0;cursor:pointer;box-sizing:border-box;position:relative;border-top:2px solid transparent;border-bottom:2px solid transparent;transition:background-color .2s}.rb-header__profile:after{content:\"\";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:var(--border-brand-primary, #005C5C);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.rb-header__profile:hover,.rb-header__profile--open{background:var(--surface-tint-8, rgba(0, 106, 106, .08))}.rb-header__profile--open:after{transform:scaleX(1)}.rb-header__profile--open .rb-header__profile-icon{transform:rotate(180deg)}.rb-header__profile-avatar-container{display:flex;align-items:center}.rb-header__profile-avatar{width:36px;height:36px;border-radius:36px;object-fit:cover;margin-right:12px}.rb-header__profile-avatar--placeholder{background:#d3d3d3 50%/cover no-repeat}.rb-header__profile-info{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start}.rb-header__profile-name{display:-webkit-box;max-width:100px;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;color:var(--text-neutral-secondary, #2E3131);text-overflow:ellipsis;font-family:var(--typescale-body-medium-font-family, Roboto);font-size:var(--typescale-body-medium-font-size, 14px);font-style:normal;font-weight:400;line-height:var(--typescale-body-medium-line-height, 20px);letter-spacing:var(--typescale-body-medium-tracking, .25px)}.rb-header__profile-base{display:-webkit-box;max-width:100px;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;color:var(--text-neutral-subtle, #505353);text-overflow:ellipsis;font-family:var(--typescale-body-medium-font-family, Roboto);font-size:var(--typescale-body-medium-font-size, 14px);font-style:normal;font-weight:400;line-height:var(--typescale-body-medium-line-height, 20px);letter-spacing:var(--typescale-body-medium-tracking, .25px)}.rb-header__profile-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;transition:transform .3s ease}.rb-header__profile-menu{position:absolute;top:48px;right:0;display:flex;flex-direction:column;width:100%;min-width:112px;max-width:280px;padding:8px 0;align-items:flex-start;border-radius:4px;background:var(--background-neutral-secondary, #F8FAF9);box-shadow:0 4px 8px 3px var(--shadow-15, rgba(0, 0, 0, .15)),0 1px 3px 0 var(--shadow-30, rgba(0, 0, 0, .3));z-index:1000}.rb-header__profile-menu-item{display:flex;flex-direction:row;align-items:center;align-self:stretch;padding:12px 16px;gap:12px;cursor:pointer;transition:background-color .2s}.rb-header__profile-menu-item:hover{background:var(--surface-tint-4, rgba(0, 106, 106, .04))}.rb-header__profile-menu-item--logout .rb-header__profile-menu-label,.rb-header__profile-menu-item--logout .rb-header__profile-menu-icon{color:var(--text-semantic-error-on-subtle, #7E0007)}.rb-header__profile-menu-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--icon-neutral-secondary, #747878)}.rb-header__profile-menu-icon svg,.rb-header__profile-menu-icon img{width:100%;height:100%;object-fit:contain}.rb-header__profile-menu-label{flex:1;color:var(--text-neutral-primary, #191C1C);font-family:var(--body-large-font, Roboto);font-size:var(--body-large-size, 16px);font-style:normal;font-weight:400;line-height:var(--body-large-line-height, 24px);letter-spacing:var(--body-large-tracking, .5px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: RbDynamicButtonDirective, selector: "[rbDynamicButton]", inputs: ["rbDynamicButton"] }] });
|
|
1411
|
+
}
|
|
1412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHeaderComponent, decorators: [{
|
|
1413
|
+
type: Component,
|
|
1414
|
+
args: [{ selector: 'rb-header', standalone: true, imports: [CommonModule, MatButtonModule, RbDynamicButtonDirective], template: "<header class=\"rb-header\" [style.--rb-header-bg]=\"backgroundColor\">\n <div class=\"rb-header__left\">\n <!-- Page Title -->\n @if (pageTitle) {\n <h1 class=\"rb-header__title\" [title]=\"pageTitle\">{{ pageTitle }}</h1>\n }\n </div>\n\n <div class=\"rb-header__right\">\n <!-- Apps Button and Menu -->\n <div class=\"rb-header__apps-container\" #appsContainerRef>\n <button mat-icon-button class=\"rb-header__apps-btn\" #appsButtonRef (click)=\"handleAppsClick()\" aria-label=\"Aplicativos\" title=\"Aplicativos\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18C4 17.45 4.19583 16.9792 4.5875 16.5875C4.97917 16.1958 5.45 16 6 16C6.55 16 7.02083 16.1958 7.4125 16.5875C7.80417 16.9792 8 17.45 8 18C8 18.55 7.80417 19.0208 7.4125 19.4125C7.02083 19.8042 6.55 20 6 20ZM12 20C11.45 20 10.9792 19.8042 10.5875 19.4125C10.1958 19.0208 10 18.55 10 18C10 17.45 10.1958 16.9792 10.5875 16.5875C10.9792 16.1958 11.45 16 12 16C12.55 16 13.0208 16.1958 13.4125 16.5875C13.8042 16.9792 14 17.45 14 18C14 18.55 13.8042 19.0208 13.4125 19.4125C13.0208 19.8042 12.55 20 12 20ZM18 20C17.45 20 16.9792 19.8042 16.5875 19.4125C16.1958 19.0208 16 18.55 16 18C16 17.45 16.1958 16.9792 16.5875 16.5875C16.9792 16.1958 17.45 16 18 16C18.55 16 19.0208 16.1958 19.4125 16.5875C19.8042 16.9792 20 17.45 20 18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20ZM6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14ZM6 8C5.45 8 4.97917 7.80417 4.5875 7.4125C4.19583 7.02083 4 6.55 4 6C4 5.45 4.19583 4.97917 4.5875 4.5875C4.97917 4.19583 5.45 4 6 4C6.55 4 7.02083 4.19583 7.4125 4.5875C7.80417 4.97917 8 5.45 8 6C8 6.55 7.80417 7.02083 7.4125 7.4125C7.02083 7.80417 6.55 8 6 8ZM12 8C11.45 8 10.9792 7.80417 10.5875 7.4125C10.1958 7.02083 10 6.55 10 6C10 5.45 10.1958 4.97917 10.5875 4.5875C10.9792 4.19583 11.45 4 12 4C12.55 4 13.0208 4.19583 13.4125 4.5875C13.8042 4.97917 14 5.45 14 6C14 6.55 13.8042 7.02083 13.4125 7.4125C13.0208 7.80417 12.55 8 12 8ZM18 8C17.45 8 16.9792 7.80417 16.5875 7.4125C16.1958 7.02083 16 6.55 16 6C16 5.45 16.1958 4.97917 16.5875 4.5875C16.9792 4.19583 17.45 4 18 4C18.55 4 19.0208 4.19583 19.4125 4.5875C19.8042 4.97917 20 5.45 20 6C20 6.55 19.8042 7.02083 19.4125 7.4125C19.0208 7.80417 18.55 8 18 8Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n\n @if (isAppsMenuOpen) {\n <div class=\"rb-header__apps-menu\" #appsMenuRef>\n \n <!-- Rubeus Apps -->\n @if (rubeusApps.length > 0) {\n <div class=\"rb-header__apps-card\">\n <div class=\"rb-header__apps-grid\">\n @for (app of rubeusApps; track app.name) {\n <button type=\"button\" class=\"rb-header__app-item\" (click)=\"handleAppSelect(app)\">\n <div class=\"rb-header__app-icon-wrapper\">\n @if (app.iconUrl) {\n <img [src]=\"app.iconUrl\" [alt]=\"app.name\" />\n }\n @if (app.iconSvg) {\n <div [innerHTML]=\"getSafeSvg(app.iconSvg)\"></div>\n }\n @if (!app.iconUrl && !app.iconSvg) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"></rect><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"></rect><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"></rect><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"></rect></svg>\n }\n </div>\n <span class=\"rb-header__app-name\">{{ app.name }}</span>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Non-Rubeus Apps -->\n @if (nonRubeusApps.length > 0) {\n <div class=\"rb-header__apps-card\">\n <div class=\"rb-header__apps-grid\">\n @for (app of nonRubeusApps; track app.name) {\n <button type=\"button\" class=\"rb-header__app-item\" (click)=\"handleAppSelect(app)\">\n <div class=\"rb-header__app-icon-wrapper\">\n @if (app.iconUrl) {\n <img [src]=\"app.iconUrl\" [alt]=\"app.name\" />\n }\n @if (app.iconSvg) {\n <div [innerHTML]=\"getSafeSvg(app.iconSvg)\"></div>\n }\n @if (!app.iconUrl && !app.iconSvg) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"></rect><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"></rect><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"></rect><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"></rect></svg>\n }\n </div>\n <span class=\"rb-header__app-name\">{{ app.name }}</span>\n </button>\n }\n </div>\n </div>\n }\n\n <div class=\"rb-header__apps-footer\">\n <button mat-button [rbDynamicButton]=\"'cancel'\" color=\"primary\" type=\"button\" class=\"rb-header__view-all-apps primary\" (click)=\"handleViewAllAppsClick()\">\n Ver todos os aplicativos\n </button>\n </div>\n </div>\n }\n </div>\n\n <!-- Help Button -->\n <button mat-icon-button class=\"rb-header__icon-btn\" (click)=\"handleHelpClick()\" aria-label=\"Ajuda\" title=\"Ajuda\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M11.96 16.8C12.24 16.8 12.4767 16.7033 12.67 16.51C12.8633 16.3167 12.96 16.08 12.96 15.8C12.96 15.52 12.8633 15.2833 12.67 15.09C12.4767 14.8967 12.24 14.8 11.96 14.8C11.68 14.8 11.4433 14.8967 11.25 15.09C11.0567 15.2833 10.96 15.52 10.96 15.8C10.96 16.08 11.0567 16.3167 11.25 16.51C11.4433 16.7033 11.68 16.8 11.96 16.8ZM11.24 13.72H12.72C12.72 13.28 12.77 12.9333 12.87 12.68C12.97 12.4267 13.2533 12.08 13.72 11.64C14.0667 11.2933 14.34 10.9633 14.54 10.65C14.74 10.3367 14.84 9.96 14.84 9.52C14.84 8.77333 14.5667 8.2 14.02 7.8C13.4733 7.4 12.8267 7.2 12.08 7.2C11.32 7.2 10.7033 7.4 10.23 7.8C9.75667 8.2 9.42667 8.68 9.24 9.24L10.56 9.76C10.6267 9.52 10.7767 9.26 11.01 8.98C11.2433 8.7 11.6 8.56 12.08 8.56C12.5067 8.56 12.8267 8.67667 13.04 8.91C13.2533 9.14333 13.36 9.4 13.36 9.68C13.36 9.94667 13.28 10.1967 13.12 10.43C12.96 10.6633 12.76 10.88 12.52 11.08C11.9333 11.6 11.5733 11.9933 11.44 12.26C11.3067 12.5267 11.24 13.0133 11.24 13.72ZM12 20C10.8933 20 9.85333 19.79 8.88 19.37C7.90667 18.95 7.06 18.38 6.34 17.66C5.62 16.94 5.05 16.0933 4.63 15.12C4.21 14.1467 4 13.1067 4 12C4 10.8933 4.21 9.85333 4.63 8.88C5.05 7.90667 5.62 7.06 6.34 6.34C7.06 5.62 7.90667 5.05 8.88 4.63C9.85333 4.21 10.8933 4 12 4C13.1067 4 14.1467 4.21 15.12 4.63C16.0933 5.05 16.94 5.62 17.66 6.34C18.38 7.06 18.95 7.90667 19.37 8.88C19.79 9.85333 20 10.8933 20 12C20 13.1067 19.79 14.1467 19.37 15.12C18.95 16.0933 18.38 16.94 17.66 17.66C16.94 18.38 16.0933 18.95 15.12 19.37C14.1467 19.79 13.1067 20 12 20Z\" fill=\"#8E9191\"/>\n <path d=\"M11.9601 14.8C12.24 14.8 12.4769 14.8965 12.6702 15.0898C12.8635 15.2831 12.9601 15.52 12.9601 15.8C12.9601 16.0799 12.8635 16.3168 12.6702 16.5101C12.4769 16.7034 12.24 16.7999 11.9601 16.8C11.6801 16.8 11.4432 16.7034 11.2499 16.5101C11.0566 16.3168 10.9601 16.08 10.9601 15.8C10.9601 15.52 11.0566 15.2831 11.2499 15.0898C11.4432 14.8965 11.6801 14.8 11.9601 14.8ZM12.0796 7.19995C12.8263 7.19995 13.4735 7.39995 14.0202 7.79995C14.5667 8.19994 14.8397 8.77369 14.8397 9.52026C14.8397 9.96013 14.7397 10.3367 14.5397 10.65C14.3398 10.9632 14.0667 11.2932 13.7202 11.6398C13.2538 12.0796 12.9703 12.4263 12.8702 12.6796C12.7702 12.933 12.7202 13.2803 12.7202 13.7203H11.2397C11.2397 13.0138 11.3065 12.5268 11.4397 12.2601C11.5731 11.9934 11.9335 11.5996 12.5202 11.0796C12.7601 10.8797 12.9603 10.6629 13.1202 10.4296C13.2801 10.1964 13.3601 9.94617 13.3601 9.67964C13.36 9.39976 13.253 9.14335 13.0397 8.91011C12.8264 8.67677 12.5063 8.56011 12.0796 8.56011C11.5999 8.56017 11.2433 8.69987 11.0101 8.97964C10.7767 9.25964 10.6267 9.52011 10.5601 9.76011L9.23975 9.23979C9.42639 8.67991 9.75638 8.1999 10.2296 7.79995C10.7029 7.40001 11.3197 7.20001 12.0796 7.19995Z\" fill=\"white\"/>\n </svg>\n </button>\n\n <div class=\"rb-header__divider\"></div>\n\n <!-- Profile -->\n @if (userProfile) {\n <div class=\"rb-header__profile-wrapper\">\n <div class=\"rb-header__profile\" #profileButtonRef [class.rb-header__profile--open]=\"isProfileMenuOpen\" (click)=\"handleProfileClick()\">\n <div class=\"rb-header__profile-avatar-container\">\n @if (userProfile.avatarUrl) {\n <img [src]=\"userProfile.avatarUrl\" [alt]=\"userProfile.name\" class=\"rb-header__profile-avatar\" />\n } @else {\n <div class=\"rb-header__profile-avatar rb-header__profile-avatar--placeholder\"></div>\n }\n </div>\n <div class=\"rb-header__profile-info\">\n <span class=\"rb-header__profile-name\">{{ userProfile.name }}</span>\n <span class=\"rb-header__profile-base\">{{ userProfile.base }}</span>\n </div>\n <svg class=\"rb-header__profile-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n <path d=\"M9 11.25L5.25 7.5H12.75L9 11.25Z\" fill=\"#505353\"/>\n </svg>\n </div>\n\n <!-- Profile Menu -->\n @if (isProfileMenuOpen) {\n <div class=\"rb-header__profile-menu\" #profileMenuRef>\n <!-- Dynamic Items -->\n @for (item of profileMenu; track item.id || item.label) {\n <div class=\"rb-header__profile-menu-item\" (click)=\"handleProfileMenuItemClick(item)\">\n @if (item.iconSvg || item.iconUrl) {\n <div class=\"rb-header__profile-menu-icon\">\n @if (item.iconUrl) {\n <img [src]=\"item.iconUrl\" [alt]=\"item.label\" />\n }\n @if (item.iconSvg) {\n <div [innerHTML]=\"getSafeSvg(item.iconSvg)\"></div>\n }\n </div>\n }\n <span class=\"rb-header__profile-menu-label\">{{ item.label }}</span>\n </div>\n }\n\n <!-- Default Logout Item -->\n <div class=\"rb-header__profile-menu-item rb-header__profile-menu-item--logout\" (click)=\"handleLogoutClick()\">\n <div class=\"rb-header__profile-menu-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M10.09 15.59L11.5 17L16.5 12L11.5 7L10.09 8.41L12.67 11H3V13H12.67L10.09 15.59ZM19 3H5C3.89 3 3 3.9 3 5V9H5V5H19V19H5V15H3V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"rb-header__profile-menu-label\">Sair</span>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</header>\n", styles: [".rb-header{display:flex;width:100%;min-height:48px;padding:0 0 0 12px;justify-content:space-between;align-items:center;gap:8px;border-bottom:.5px solid var(--border-neutral-secondary, #C5C7C6);background:var(--rb-header-bg, var(--background-neutral-secondary, #F8FAF9));font-family:var(--font-family-base, \"Inter\", sans-serif);box-sizing:border-box}.rb-header__left{display:flex;align-items:center;gap:16px}.rb-header__right{display:flex;align-items:center}.rb-header__title{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;color:var(--text-neutral-subtle, #505353);text-overflow:ellipsis;font-family:var(--typescale-body-medium-font-family, Roboto);font-size:var(--typescale-body-medium-font-size, 14px);font-style:normal;font-weight:400;line-height:var(--typescale-body-medium-line-height, 20px);letter-spacing:var(--typescale-body-medium-tracking, .25px)}.rb-header__icon-btn,.rb-header__apps-btn{--mat-icon-button-state-layer-color: var(--color-primary, #006A6A);--mat-icon-button-hover-state-layer-opacity: .08}.rb-header__icon-btn{flex-shrink:0}.rb-header__icon-btn svg{width:24px;height:24px;flex-shrink:0}.rb-header__apps-container{position:relative;display:flex;align-items:center}.rb-header__apps-btn{flex-shrink:0;color:var(--icon-neutral-secondary, #747878)}.rb-header__apps-menu{position:absolute;top:calc(100% + 4px);right:0;width:380px;height:auto;min-height:300px;max-height:400px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;padding:16px;border-radius:8px;background:var(--Background-Neutral-Tertiary, #EFF1F0);box-shadow:0 1px 2px #006a6a4d,0 2px 6px 2px #00141426;z-index:100;overflow-y:auto;overflow-x:hidden}.rb-header__apps-menu::-webkit-scrollbar{width:8px}.rb-header__apps-menu::-webkit-scrollbar-track{background:transparent;margin-block:16px}.rb-header__apps-menu::-webkit-scrollbar-thumb{border-radius:100px;background:var(--Border-Inverse-Tertiary, #757877);background-clip:content-box;border:2px solid transparent}.rb-header__apps-card{display:flex;width:348px;height:auto;flex-shrink:0;box-sizing:border-box;padding:16px;flex-direction:column;align-items:flex-start;gap:8px;border-radius:8px;background:var(--Background-Neutral-Secondary, #F8FAF9)}.rb-header__apps-card+.rb-header__apps-card{margin-top:8px}.rb-header__apps-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:8px}.rb-header__app-item{display:flex;flex-direction:column;width:100px;min-height:88px;padding:2px 4px;justify-content:flex-start;align-items:center;gap:4px;box-sizing:border-box;border:0;border-radius:8px;background:transparent;color:inherit;font-family:inherit;cursor:pointer;text-align:center;transition:background-color .2s ease-in-out}.rb-header__app-item:hover,.rb-header__app-item:focus-visible{padding-bottom:8px;background:var(--Background-Neutral-Tertiary, #EFF1F0)}.rb-header__app-item:hover .rb-header__app-name,.rb-header__app-item:focus-visible .rb-header__app-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:40px;white-space:normal}.rb-header__app-icon-wrapper{display:flex;align-items:center;justify-content:center;width:48px;height:48px;transition:transform .2s}.rb-header__app-icon-wrapper img,.rb-header__app-icon-wrapper svg{max-width:100%;max-height:100%}.rb-header__app-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;width:100%;max-height:20px;overflow:hidden;color:var(--Text-Neutral-Primary, #191C1C);text-align:center;text-overflow:ellipsis;font-family:var(--Typescale-Body-Medium-Font-family, Roboto);font-size:var(--Typescale-Body-Medium-Font-size, 14px);font-style:normal;font-weight:400;line-height:var(--Typescale-Body-Medium-Line-height, 20px);letter-spacing:var(--Typescale-Body-Medium-Tracking, .25px)}.rb-header__apps-footer{display:flex;flex-shrink:0;justify-content:center;margin:16px 0 8px}.rb-header__view-all-apps{--mdc-outlined-button-container-color: transparent;--mdc-outlined-button-label-text-color: var(--Text-Brand-Primary, #004F4F);--mdc-outlined-button-label-text-font: var(--Typescale-Label-Large-Font-family, Roboto);--mdc-outlined-button-label-text-size: var(--Typescale-Label-Large-Font-size, 14px);--mdc-outlined-button-label-text-tracking: var(--Typescale-Label-Large-Tracking, .1px);--mdc-outlined-button-label-text-weight: 500;--mdc-outlined-button-container-height: 40px;--mdc-outlined-button-container-shape: 100px;--mdc-outlined-button-outline-color: var(--Border-Neutral-Secondary, #C5C7C6);--mdc-outlined-button-outline-width: 1px;--mat-outlined-button-horizontal-padding: 24px;--mat-outlined-button-state-layer-color: #006A6A;--mat-outlined-button-hover-state-layer-opacity: 0;--mat-outlined-button-focus-state-layer-opacity: 0;--mat-outlined-button-pressed-state-layer-opacity: 0;--mat-outlined-button-ripple-color: rgba(0, 106, 106, .12);background:transparent;box-shadow:none;border-radius:100px;border:1px solid var(--Border-Neutral-Secondary, #C5C7C6);color:var(--Text-Brand-Primary, #004F4F);cursor:pointer;font-family:var(--Typescale-Label-Large-Font-family, Roboto);font-size:var(--Typescale-Label-Large-Font-size, 14px);font-style:normal;font-weight:500;line-height:var(--Typescale-Label-Large-Line-height, 20px);letter-spacing:var(--Typescale-Label-Large-Tracking, .1px);transition:background-color .2s ease-in-out}.rb-header__view-all-apps:hover,.rb-header__view-all-apps:focus-visible{background:var(--surface-tint-8, rgba(0, 106, 106, .08));box-shadow:none}.rb-header__view-all-apps:active{background:var(--surface-tint-12, rgba(0, 106, 106, .12));box-shadow:none}.rb-header__divider{display:flex;width:1px;margin-inline:4px;padding:16px 0;flex-direction:column;align-items:center;align-self:stretch;background:#e1e3e2;background-clip:content-box}.rb-header__profile-wrapper{position:relative;display:flex;flex:1 0 0}.rb-header__profile{display:flex;height:48px;padding:4px 16px;align-items:center;flex:1 0 0;cursor:pointer;box-sizing:border-box;position:relative;border-top:2px solid transparent;border-bottom:2px solid transparent;transition:background-color .2s}.rb-header__profile:after{content:\"\";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:var(--border-brand-primary, #005C5C);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.rb-header__profile:hover,.rb-header__profile--open{background:var(--surface-tint-8, rgba(0, 106, 106, .08))}.rb-header__profile--open:after{transform:scaleX(1)}.rb-header__profile--open .rb-header__profile-icon{transform:rotate(180deg)}.rb-header__profile-avatar-container{display:flex;align-items:center}.rb-header__profile-avatar{width:36px;height:36px;border-radius:36px;object-fit:cover;margin-right:12px}.rb-header__profile-avatar--placeholder{background:#d3d3d3 50%/cover no-repeat}.rb-header__profile-info{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start}.rb-header__profile-name{display:-webkit-box;max-width:100px;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;color:var(--text-neutral-secondary, #2E3131);text-overflow:ellipsis;font-family:var(--typescale-body-medium-font-family, Roboto);font-size:var(--typescale-body-medium-font-size, 14px);font-style:normal;font-weight:400;line-height:var(--typescale-body-medium-line-height, 20px);letter-spacing:var(--typescale-body-medium-tracking, .25px)}.rb-header__profile-base{display:-webkit-box;max-width:100px;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;color:var(--text-neutral-subtle, #505353);text-overflow:ellipsis;font-family:var(--typescale-body-medium-font-family, Roboto);font-size:var(--typescale-body-medium-font-size, 14px);font-style:normal;font-weight:400;line-height:var(--typescale-body-medium-line-height, 20px);letter-spacing:var(--typescale-body-medium-tracking, .25px)}.rb-header__profile-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;transition:transform .3s ease}.rb-header__profile-menu{position:absolute;top:48px;right:0;display:flex;flex-direction:column;width:100%;min-width:112px;max-width:280px;padding:8px 0;align-items:flex-start;border-radius:4px;background:var(--background-neutral-secondary, #F8FAF9);box-shadow:0 4px 8px 3px var(--shadow-15, rgba(0, 0, 0, .15)),0 1px 3px 0 var(--shadow-30, rgba(0, 0, 0, .3));z-index:1000}.rb-header__profile-menu-item{display:flex;flex-direction:row;align-items:center;align-self:stretch;padding:12px 16px;gap:12px;cursor:pointer;transition:background-color .2s}.rb-header__profile-menu-item:hover{background:var(--surface-tint-4, rgba(0, 106, 106, .04))}.rb-header__profile-menu-item--logout .rb-header__profile-menu-label,.rb-header__profile-menu-item--logout .rb-header__profile-menu-icon{color:var(--text-semantic-error-on-subtle, #7E0007)}.rb-header__profile-menu-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--icon-neutral-secondary, #747878)}.rb-header__profile-menu-icon svg,.rb-header__profile-menu-icon img{width:100%;height:100%;object-fit:contain}.rb-header__profile-menu-label{flex:1;color:var(--text-neutral-primary, #191C1C);font-family:var(--body-large-font, Roboto);font-size:var(--body-large-size, 16px);font-style:normal;font-weight:400;line-height:var(--body-large-line-height, 24px);letter-spacing:var(--body-large-tracking, .5px)}\n"] }]
|
|
1415
|
+
}], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { pageTitle: [{
|
|
1416
|
+
type: Input
|
|
1417
|
+
}], userProfile: [{
|
|
1418
|
+
type: Input
|
|
1419
|
+
}], appsList: [{
|
|
1420
|
+
type: Input
|
|
1421
|
+
}], backgroundColor: [{
|
|
1422
|
+
type: Input
|
|
1423
|
+
}], profileMenu: [{
|
|
1424
|
+
type: Input
|
|
1425
|
+
}], onHelpClick: [{
|
|
1426
|
+
type: Output
|
|
1427
|
+
}], onAppsClick: [{
|
|
1428
|
+
type: Output
|
|
1429
|
+
}], onViewAllAppsClick: [{
|
|
1430
|
+
type: Output
|
|
1431
|
+
}], onProfileMenuItemClick: [{
|
|
1432
|
+
type: Output
|
|
1433
|
+
}], onLogoutClick: [{
|
|
1434
|
+
type: Output
|
|
1435
|
+
}], onProfileMenuClick: [{
|
|
1436
|
+
type: Output
|
|
1437
|
+
}], appsMenuRef: [{
|
|
1438
|
+
type: ViewChild,
|
|
1439
|
+
args: ['appsMenuRef']
|
|
1440
|
+
}], appsButtonRef: [{
|
|
1441
|
+
type: ViewChild,
|
|
1442
|
+
args: ['appsButtonRef']
|
|
1443
|
+
}], appsContainerRef: [{
|
|
1444
|
+
type: ViewChild,
|
|
1445
|
+
args: ['appsContainerRef']
|
|
1446
|
+
}], profileButtonRef: [{
|
|
1447
|
+
type: ViewChild,
|
|
1448
|
+
args: ['profileButtonRef']
|
|
1449
|
+
}], profileMenuRef: [{
|
|
1450
|
+
type: ViewChild,
|
|
1451
|
+
args: ['profileMenuRef']
|
|
1452
|
+
}] } });
|
|
1453
|
+
|
|
830
1454
|
class IsArrayPipe {
|
|
831
1455
|
transform(value) {
|
|
832
1456
|
return Array.isArray(value);
|
|
@@ -849,6 +1473,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
849
1473
|
// options?: any[]; // Para selects
|
|
850
1474
|
// }
|
|
851
1475
|
|
|
1476
|
+
class RbHelpPanelComponent {
|
|
1477
|
+
destroyRef = inject(DestroyRef);
|
|
1478
|
+
isOpen = false;
|
|
1479
|
+
panelTitle = 'JivoChat';
|
|
1480
|
+
routeContext;
|
|
1481
|
+
integrationProvider;
|
|
1482
|
+
onClose = new EventEmitter();
|
|
1483
|
+
onClickKnowledgeBase = new EventEmitter();
|
|
1484
|
+
onClickCommunity = new EventEmitter();
|
|
1485
|
+
onClickNews = new EventEmitter();
|
|
1486
|
+
onClickMyTickets = new EventEmitter();
|
|
1487
|
+
onClickChat = new EventEmitter();
|
|
1488
|
+
searchQuery = '';
|
|
1489
|
+
articles = [];
|
|
1490
|
+
isLoading = false;
|
|
1491
|
+
searchSubject = new Subject();
|
|
1492
|
+
ngOnInit() {
|
|
1493
|
+
this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), switchMap(query => {
|
|
1494
|
+
this.isLoading = true;
|
|
1495
|
+
if (query.trim() === '') {
|
|
1496
|
+
return this.integrationProvider ? this.integrationProvider.fetchInitialArticles(this.routeContext) : [];
|
|
1497
|
+
}
|
|
1498
|
+
return this.integrationProvider ? this.integrationProvider.searchArticles(query) : [];
|
|
1499
|
+
}), takeUntilDestroyed(this.destroyRef)).subscribe({
|
|
1500
|
+
next: (results) => {
|
|
1501
|
+
this.articles = results;
|
|
1502
|
+
this.isLoading = false;
|
|
1503
|
+
},
|
|
1504
|
+
error: (err) => {
|
|
1505
|
+
console.error('Error fetching articles', err);
|
|
1506
|
+
this.isLoading = false;
|
|
1507
|
+
}
|
|
1508
|
+
});
|
|
1509
|
+
}
|
|
1510
|
+
ngOnChanges(changes) {
|
|
1511
|
+
if (changes['isOpen']?.currentValue === true) {
|
|
1512
|
+
this.loadInitialArticles();
|
|
1513
|
+
}
|
|
1514
|
+
}
|
|
1515
|
+
loadInitialArticles() {
|
|
1516
|
+
if (this.integrationProvider) {
|
|
1517
|
+
this.isLoading = true;
|
|
1518
|
+
this.searchQuery = '';
|
|
1519
|
+
this.integrationProvider.fetchInitialArticles(this.routeContext).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
|
|
1520
|
+
next: (results) => {
|
|
1521
|
+
this.articles = results;
|
|
1522
|
+
this.isLoading = false;
|
|
1523
|
+
},
|
|
1524
|
+
error: (err) => {
|
|
1525
|
+
console.error('Error loading initial articles', err);
|
|
1526
|
+
this.isLoading = false;
|
|
1527
|
+
}
|
|
1528
|
+
});
|
|
1529
|
+
}
|
|
1530
|
+
}
|
|
1531
|
+
onSearchChange(query) {
|
|
1532
|
+
this.searchQuery = query;
|
|
1533
|
+
this.searchSubject.next(query);
|
|
1534
|
+
}
|
|
1535
|
+
handleClose() {
|
|
1536
|
+
this.isOpen = false;
|
|
1537
|
+
this.onClose.emit();
|
|
1538
|
+
}
|
|
1539
|
+
openArticle(article) {
|
|
1540
|
+
if (article.url) {
|
|
1541
|
+
window.open(article.url, '_blank');
|
|
1542
|
+
}
|
|
1543
|
+
}
|
|
1544
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHelpPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1545
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RbHelpPanelComponent, isStandalone: true, selector: "rb-help-panel", inputs: { isOpen: "isOpen", panelTitle: "panelTitle", routeContext: "routeContext", integrationProvider: "integrationProvider" }, outputs: { onClose: "onClose", onClickKnowledgeBase: "onClickKnowledgeBase", onClickCommunity: "onClickCommunity", onClickNews: "onClickNews", onClickMyTickets: "onClickMyTickets", onClickChat: "onClickChat" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rb-help-panel\" [class.rb-help-panel--open]=\"isOpen\">\n <div class=\"rb-help-panel__header\">\n <h3 class=\"rb-help-panel__title\">{{ panelTitle }}</h3>\n <button mat-icon-button class=\"rb-help-panel__close\" (click)=\"handleClose()\" aria-label=\"Fechar painel de ajuda\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"rb-help-panel__content\">\n <div class=\"rb-help-panel__search\">\n <div class=\"rb-help-panel__search-wrapper\">\n <svg class=\"rb-help-panel__search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.9167 9.66667H10.2583L10.025 9.44167C10.8417 8.49167 11.3333 7.25833 11.3333 5.91667C11.3333 2.925 8.90833 0.5 5.91667 0.5C2.925 0.5 0.5 2.925 0.5 5.91667C0.5 8.90833 2.925 11.3333 5.91667 11.3333C7.25833 11.3333 8.49167 10.8417 9.44167 10.025L9.66667 10.2583V10.9167L13.8333 15.075L15.075 13.8333L10.9167 9.66667ZM5.91667 9.66667C3.84167 9.66667 2.16667 7.99167 2.16667 5.91667C2.16667 3.84167 3.84167 2.16667 5.91667 2.16667C7.99167 2.16667 9.66667 3.84167 9.66667 5.91667C9.66667 7.99167 7.99167 9.66667 5.91667 9.66667Z\" fill=\"#666666\"/>\n </svg>\n <input \n type=\"text\" \n placeholder=\"Pesquisar\" \n [ngModel]=\"searchQuery\" \n (ngModelChange)=\"onSearchChange($event)\"\n class=\"rb-help-panel__search-input\"\n >\n </div>\n </div>\n <div class=\"rb-help-panel__divider\"></div>\n\n <div class=\"rb-help-panel__articles\">\n @if (isLoading) {\n <div class=\"rb-help-panel__loading\">Carregando...</div>\n }\n \n @for (article of articles; track article.id) {\n <div class=\"rb-help-panel__article-item\" (click)=\"openArticle(article)\">\n <span class=\"rb-help-panel__article-title\">{{ article.title }}</span>\n </div>\n }\n\n @if (!isLoading && articles.length === 0) {\n <div class=\"rb-help-panel__no-results\">\n Nenhum artigo encontrado.\n </div>\n }\n </div>\n </div>\n \n <div class=\"rb-help-panel__divider\"></div>\n\n <div class=\"rb-help-panel__footer\">\n <div class=\"rb-help-panel__footer-title\">Ainda com d\u00FAvidas?</div>\n \n <div class=\"rb-help-panel__quick-links\">\n <button class=\"rb-help-panel__quick-link-card\" (click)=\"onClickKnowledgeBase.emit()\">\n <div class=\"rb-help-panel__quick-link-icon\">\n <ng-container *ngTemplateOutlet=\"usersIcon\"></ng-container>\n </div>\n <div class=\"rb-help-panel__quick-link-bg\">\n <span>Base de conhecimento</span>\n </div>\n </button>\n \n <button class=\"rb-help-panel__quick-link-card\" (click)=\"onClickCommunity.emit()\">\n <div class=\"rb-help-panel__quick-link-icon\">\n <ng-container *ngTemplateOutlet=\"usersIcon\"></ng-container>\n </div>\n <div class=\"rb-help-panel__quick-link-bg\">\n <span>Comunidade</span>\n </div>\n </button>\n \n <button class=\"rb-help-panel__quick-link-card\" (click)=\"onClickNews.emit()\">\n <div class=\"rb-help-panel__quick-link-icon\">\n <ng-container *ngTemplateOutlet=\"usersIcon\"></ng-container>\n </div>\n <div class=\"rb-help-panel__quick-link-bg\">\n <span>Novidades</span>\n </div>\n </button>\n </div>\n \n <div class=\"rb-help-panel__footer-divider\"></div>\n\n <div class=\"rb-help-panel__actions\">\n <button class=\"rb-help-panel__action-btn rb-help-panel__action-btn--outline\" (click)=\"onClickMyTickets.emit()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z\" fill=\"#006A63\"/>\n </svg>\n Meus atendimentos\n </button>\n \n <button class=\"rb-help-panel__action-btn rb-help-panel__action-btn--primary\" (click)=\"onClickChat.emit()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z\" fill=\"white\"/>\n </svg>\n Chat online\n </button>\n </div>\n </div>\n</div>\n\n@if (isOpen) {\n <div class=\"rb-help-panel__overlay\" (click)=\"handleClose()\"></div>\n}\n\n<ng-template #usersIcon>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Right user -->\n <circle cx=\"18.5\" cy=\"10\" r=\"2.5\" stroke=\"#FFFFFF\" stroke-width=\"1.5\"/>\n <path d=\"M16 18c0-2.21 1.79-4 4-4h.5c2.21 0 4 1.79 4 4\" stroke=\"#FFFFFF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Left user -->\n <circle cx=\"5.5\" cy=\"10\" r=\"2.5\" stroke=\"#FFFFFF\" stroke-width=\"1.5\"/>\n <path d=\"M8 18c0-2.21-1.79-4-4-4H3.5c-2.21 0-4 1.79-4 4\" stroke=\"#FFFFFF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Center user -->\n <circle cx=\"12\" cy=\"7\" r=\"3\" fill=\"#3B596A\" stroke=\"#FFFFFF\" stroke-width=\"2\"/>\n <path d=\"M6 18c0-2.76 2.24-5 5-5h2c2.76 0 5 2.24 5 5v1H6v-1z\" fill=\"#3B596A\" stroke=\"#FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n</ng-template>\n", styles: [".rb-help-panel{position:fixed;top:0;right:-400px;width:100%;max-width:400px;height:100vh;background-color:#f8faf9;box-shadow:-2px 0 8px #0000001a;display:flex;flex-direction:column;transition:right .3s ease-in-out;z-index:1050}.rb-help-panel--open{right:0}.rb-help-panel__header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background-color:#eff1f0;border-bottom:1px solid #EAEAEA}.rb-help-panel__title{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--Text-Neutral-Subtle, #505353);text-overflow:ellipsis;font-family:var(--Typescale-Title-Medium-Font-family, Roboto);font-size:var(--Typescale-Title-Medium-Font-size, 16px);font-style:normal;font-weight:500;line-height:var(--Typescale-Title-Medium-Line-height, 24px);letter-spacing:var(--Typescale-Title-Medium-Tracking, .15px)}.rb-help-panel__close{color:var(--icon-neutral-secondary, #666666)}.rb-help-panel__content{flex:1;display:flex;flex-direction:column;overflow:hidden}.rb-help-panel__search{padding:16px;background-color:#f8faf9}.rb-help-panel__search-wrapper{position:relative;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;width:368px;height:56px;background:var(--surfaces-surface-gray-4, rgba(0, 0, 0, .04));border-radius:4px 4px 0 0;border-bottom:1px solid #005C5C;transition:border-bottom .2s ease}.rb-help-panel__search-wrapper:focus-within{border-bottom:2px solid #005C5C}.rb-help-panel__search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none}.rb-help-panel__search-input{width:100%;height:100%;padding:0 16px 0 48px;border:none;background-color:transparent;font-size:16px;color:#333;box-sizing:border-box}.rb-help-panel__search-input:focus{outline:none}.rb-help-panel__articles{flex:1;overflow-y:auto;padding:0;background-color:#f8faf9}.rb-help-panel__loading,.rb-help-panel__no-results{padding:20px;text-align:center;color:#666;font-size:14px}.rb-help-panel__article-item{padding:16px 20px;border-bottom:1px solid #EAEAEA;cursor:pointer;transition:background-color .2s}.rb-help-panel__article-item:hover{background-color:#f0f4f4}.rb-help-panel__article-title{font-size:14px;color:#333}.rb-help-panel__footer{padding:20px;background-color:#f8faf9}.rb-help-panel__footer-title{font-size:14px;color:#333;margin-bottom:16px}.rb-help-panel__quick-links{display:flex;justify-content:space-between;gap:8px;margin-bottom:20px}.rb-help-panel__quick-link-card{position:relative;flex:1;margin-top:28px;background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));transition:transform .2s}.rb-help-panel__quick-link-card:hover{transform:translateY(-2px)}.rb-help-panel__quick-link-bg{width:100%;background:#fff;border-radius:8px;padding:32px 8px 16px;mask-image:radial-gradient(circle at 50% 0,transparent 28px,black 29px);-webkit-mask-image:radial-gradient(circle at 50% 0,transparent 28px,black 29px);display:flex;align-items:center;justify-content:center;min-height:90px;box-sizing:border-box}.rb-help-panel__quick-link-bg span{font-size:14px;color:#333;text-align:center;line-height:1.2}.rb-help-panel__quick-link-icon{position:absolute;top:-24px;left:50%;transform:translate(-50%);width:48px;height:48px;border-radius:50%;background-color:#3b596a;display:flex;align-items:center;justify-content:center;z-index:1}.rb-help-panel__actions{display:flex;gap:12px}.rb-help-panel__divider{height:1px;background-color:#eaeaea;width:100%;flex-shrink:0}.rb-help-panel__footer-divider{height:1px;background-color:#eaeaea;margin:20px -20px;flex-shrink:0}.rb-help-panel__action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:20px;font-family:var(--font-plain, Roboto, \"Helvetica Neue\", sans-serif);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s}.rb-help-panel__action-btn--outline{background-color:transparent;border:1px solid #006A63;color:#006a63}.rb-help-panel__action-btn--outline:hover{background-color:#f0f4f4}.rb-help-panel__action-btn--primary{background-color:#006a63;border:1px solid #006A63;color:#fff}.rb-help-panel__action-btn--primary:hover{background-color:#005650}.rb-help-panel__overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;z-index:1040}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
|
|
1546
|
+
}
|
|
1547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHelpPanelComponent, decorators: [{
|
|
1548
|
+
type: Component,
|
|
1549
|
+
args: [{ selector: 'rb-help-panel', standalone: true, imports: [CommonModule, FormsModule, MatButtonModule], template: "<div class=\"rb-help-panel\" [class.rb-help-panel--open]=\"isOpen\">\n <div class=\"rb-help-panel__header\">\n <h3 class=\"rb-help-panel__title\">{{ panelTitle }}</h3>\n <button mat-icon-button class=\"rb-help-panel__close\" (click)=\"handleClose()\" aria-label=\"Fechar painel de ajuda\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"rb-help-panel__content\">\n <div class=\"rb-help-panel__search\">\n <div class=\"rb-help-panel__search-wrapper\">\n <svg class=\"rb-help-panel__search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.9167 9.66667H10.2583L10.025 9.44167C10.8417 8.49167 11.3333 7.25833 11.3333 5.91667C11.3333 2.925 8.90833 0.5 5.91667 0.5C2.925 0.5 0.5 2.925 0.5 5.91667C0.5 8.90833 2.925 11.3333 5.91667 11.3333C7.25833 11.3333 8.49167 10.8417 9.44167 10.025L9.66667 10.2583V10.9167L13.8333 15.075L15.075 13.8333L10.9167 9.66667ZM5.91667 9.66667C3.84167 9.66667 2.16667 7.99167 2.16667 5.91667C2.16667 3.84167 3.84167 2.16667 5.91667 2.16667C7.99167 2.16667 9.66667 3.84167 9.66667 5.91667C9.66667 7.99167 7.99167 9.66667 5.91667 9.66667Z\" fill=\"#666666\"/>\n </svg>\n <input \n type=\"text\" \n placeholder=\"Pesquisar\" \n [ngModel]=\"searchQuery\" \n (ngModelChange)=\"onSearchChange($event)\"\n class=\"rb-help-panel__search-input\"\n >\n </div>\n </div>\n <div class=\"rb-help-panel__divider\"></div>\n\n <div class=\"rb-help-panel__articles\">\n @if (isLoading) {\n <div class=\"rb-help-panel__loading\">Carregando...</div>\n }\n \n @for (article of articles; track article.id) {\n <div class=\"rb-help-panel__article-item\" (click)=\"openArticle(article)\">\n <span class=\"rb-help-panel__article-title\">{{ article.title }}</span>\n </div>\n }\n\n @if (!isLoading && articles.length === 0) {\n <div class=\"rb-help-panel__no-results\">\n Nenhum artigo encontrado.\n </div>\n }\n </div>\n </div>\n \n <div class=\"rb-help-panel__divider\"></div>\n\n <div class=\"rb-help-panel__footer\">\n <div class=\"rb-help-panel__footer-title\">Ainda com d\u00FAvidas?</div>\n \n <div class=\"rb-help-panel__quick-links\">\n <button class=\"rb-help-panel__quick-link-card\" (click)=\"onClickKnowledgeBase.emit()\">\n <div class=\"rb-help-panel__quick-link-icon\">\n <ng-container *ngTemplateOutlet=\"usersIcon\"></ng-container>\n </div>\n <div class=\"rb-help-panel__quick-link-bg\">\n <span>Base de conhecimento</span>\n </div>\n </button>\n \n <button class=\"rb-help-panel__quick-link-card\" (click)=\"onClickCommunity.emit()\">\n <div class=\"rb-help-panel__quick-link-icon\">\n <ng-container *ngTemplateOutlet=\"usersIcon\"></ng-container>\n </div>\n <div class=\"rb-help-panel__quick-link-bg\">\n <span>Comunidade</span>\n </div>\n </button>\n \n <button class=\"rb-help-panel__quick-link-card\" (click)=\"onClickNews.emit()\">\n <div class=\"rb-help-panel__quick-link-icon\">\n <ng-container *ngTemplateOutlet=\"usersIcon\"></ng-container>\n </div>\n <div class=\"rb-help-panel__quick-link-bg\">\n <span>Novidades</span>\n </div>\n </button>\n </div>\n \n <div class=\"rb-help-panel__footer-divider\"></div>\n\n <div class=\"rb-help-panel__actions\">\n <button class=\"rb-help-panel__action-btn rb-help-panel__action-btn--outline\" (click)=\"onClickMyTickets.emit()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z\" fill=\"#006A63\"/>\n </svg>\n Meus atendimentos\n </button>\n \n <button class=\"rb-help-panel__action-btn rb-help-panel__action-btn--primary\" (click)=\"onClickChat.emit()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z\" fill=\"white\"/>\n </svg>\n Chat online\n </button>\n </div>\n </div>\n</div>\n\n@if (isOpen) {\n <div class=\"rb-help-panel__overlay\" (click)=\"handleClose()\"></div>\n}\n\n<ng-template #usersIcon>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Right user -->\n <circle cx=\"18.5\" cy=\"10\" r=\"2.5\" stroke=\"#FFFFFF\" stroke-width=\"1.5\"/>\n <path d=\"M16 18c0-2.21 1.79-4 4-4h.5c2.21 0 4 1.79 4 4\" stroke=\"#FFFFFF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Left user -->\n <circle cx=\"5.5\" cy=\"10\" r=\"2.5\" stroke=\"#FFFFFF\" stroke-width=\"1.5\"/>\n <path d=\"M8 18c0-2.21-1.79-4-4-4H3.5c-2.21 0-4 1.79-4 4\" stroke=\"#FFFFFF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <!-- Center user -->\n <circle cx=\"12\" cy=\"7\" r=\"3\" fill=\"#3B596A\" stroke=\"#FFFFFF\" stroke-width=\"2\"/>\n <path d=\"M6 18c0-2.76 2.24-5 5-5h2c2.76 0 5 2.24 5 5v1H6v-1z\" fill=\"#3B596A\" stroke=\"#FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n</ng-template>\n", styles: [".rb-help-panel{position:fixed;top:0;right:-400px;width:100%;max-width:400px;height:100vh;background-color:#f8faf9;box-shadow:-2px 0 8px #0000001a;display:flex;flex-direction:column;transition:right .3s ease-in-out;z-index:1050}.rb-help-panel--open{right:0}.rb-help-panel__header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background-color:#eff1f0;border-bottom:1px solid #EAEAEA}.rb-help-panel__title{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--Text-Neutral-Subtle, #505353);text-overflow:ellipsis;font-family:var(--Typescale-Title-Medium-Font-family, Roboto);font-size:var(--Typescale-Title-Medium-Font-size, 16px);font-style:normal;font-weight:500;line-height:var(--Typescale-Title-Medium-Line-height, 24px);letter-spacing:var(--Typescale-Title-Medium-Tracking, .15px)}.rb-help-panel__close{color:var(--icon-neutral-secondary, #666666)}.rb-help-panel__content{flex:1;display:flex;flex-direction:column;overflow:hidden}.rb-help-panel__search{padding:16px;background-color:#f8faf9}.rb-help-panel__search-wrapper{position:relative;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;width:368px;height:56px;background:var(--surfaces-surface-gray-4, rgba(0, 0, 0, .04));border-radius:4px 4px 0 0;border-bottom:1px solid #005C5C;transition:border-bottom .2s ease}.rb-help-panel__search-wrapper:focus-within{border-bottom:2px solid #005C5C}.rb-help-panel__search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none}.rb-help-panel__search-input{width:100%;height:100%;padding:0 16px 0 48px;border:none;background-color:transparent;font-size:16px;color:#333;box-sizing:border-box}.rb-help-panel__search-input:focus{outline:none}.rb-help-panel__articles{flex:1;overflow-y:auto;padding:0;background-color:#f8faf9}.rb-help-panel__loading,.rb-help-panel__no-results{padding:20px;text-align:center;color:#666;font-size:14px}.rb-help-panel__article-item{padding:16px 20px;border-bottom:1px solid #EAEAEA;cursor:pointer;transition:background-color .2s}.rb-help-panel__article-item:hover{background-color:#f0f4f4}.rb-help-panel__article-title{font-size:14px;color:#333}.rb-help-panel__footer{padding:20px;background-color:#f8faf9}.rb-help-panel__footer-title{font-size:14px;color:#333;margin-bottom:16px}.rb-help-panel__quick-links{display:flex;justify-content:space-between;gap:8px;margin-bottom:20px}.rb-help-panel__quick-link-card{position:relative;flex:1;margin-top:28px;background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));transition:transform .2s}.rb-help-panel__quick-link-card:hover{transform:translateY(-2px)}.rb-help-panel__quick-link-bg{width:100%;background:#fff;border-radius:8px;padding:32px 8px 16px;mask-image:radial-gradient(circle at 50% 0,transparent 28px,black 29px);-webkit-mask-image:radial-gradient(circle at 50% 0,transparent 28px,black 29px);display:flex;align-items:center;justify-content:center;min-height:90px;box-sizing:border-box}.rb-help-panel__quick-link-bg span{font-size:14px;color:#333;text-align:center;line-height:1.2}.rb-help-panel__quick-link-icon{position:absolute;top:-24px;left:50%;transform:translate(-50%);width:48px;height:48px;border-radius:50%;background-color:#3b596a;display:flex;align-items:center;justify-content:center;z-index:1}.rb-help-panel__actions{display:flex;gap:12px}.rb-help-panel__divider{height:1px;background-color:#eaeaea;width:100%;flex-shrink:0}.rb-help-panel__footer-divider{height:1px;background-color:#eaeaea;margin:20px -20px;flex-shrink:0}.rb-help-panel__action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:20px;font-family:var(--font-plain, Roboto, \"Helvetica Neue\", sans-serif);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s}.rb-help-panel__action-btn--outline{background-color:transparent;border:1px solid #006A63;color:#006a63}.rb-help-panel__action-btn--outline:hover{background-color:#f0f4f4}.rb-help-panel__action-btn--primary{background-color:#006a63;border:1px solid #006A63;color:#fff}.rb-help-panel__action-btn--primary:hover{background-color:#005650}.rb-help-panel__overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;z-index:1040}\n"] }]
|
|
1550
|
+
}], propDecorators: { isOpen: [{
|
|
1551
|
+
type: Input
|
|
1552
|
+
}], panelTitle: [{
|
|
1553
|
+
type: Input
|
|
1554
|
+
}], routeContext: [{
|
|
1555
|
+
type: Input
|
|
1556
|
+
}], integrationProvider: [{
|
|
1557
|
+
type: Input
|
|
1558
|
+
}], onClose: [{
|
|
1559
|
+
type: Output
|
|
1560
|
+
}], onClickKnowledgeBase: [{
|
|
1561
|
+
type: Output
|
|
1562
|
+
}], onClickCommunity: [{
|
|
1563
|
+
type: Output
|
|
1564
|
+
}], onClickNews: [{
|
|
1565
|
+
type: Output
|
|
1566
|
+
}], onClickMyTickets: [{
|
|
1567
|
+
type: Output
|
|
1568
|
+
}], onClickChat: [{
|
|
1569
|
+
type: Output
|
|
1570
|
+
}] } });
|
|
1571
|
+
|
|
852
1572
|
/*
|
|
853
1573
|
* Public API Surface of rb-angular-components
|
|
854
1574
|
*/
|
|
@@ -858,5 +1578,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
858
1578
|
* Generated bundle index. Do not edit.
|
|
859
1579
|
*/
|
|
860
1580
|
|
|
861
|
-
export { IsArrayPipe, RbChangeLogDialogComponent, RbColumnsSortSettingComponent, RbConditionalClassPipe, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent };
|
|
1581
|
+
export { IsArrayPipe, RbChangeLogDialogComponent, RbColumnsSortSettingComponent, RbConditionalClassPipe, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent, RbHeaderComponent, RbHelpPanelComponent, RbOverflowTooltipDirective, RbSidebarNavigationComponent };
|
|
862
1582
|
//# sourceMappingURL=rubeusteam-rb-angular-components.mjs.map
|