@rubeusteam/rb-angular-components 0.0.2-dev.1 → 0.0.2-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/fesm2022/rubeusteam-rb-angular-components.mjs +69 -26
  2. package/fesm2022/rubeusteam-rb-angular-components.mjs.map +1 -1
  3. package/lib/components/rb-header/rb-header.component.d.ts +11 -1
  4. package/lib/components/rb-sidebar-navigation/rb-sidebar-navigation.component.d.ts +8 -5
  5. package/lib/interfaces/rb-header.interface.d.ts +1 -0
  6. package/package.json +1 -1
package/fesm2022/rubeusteam-rb-angular-components.mjs CHANGED
@@ -27,12 +27,12 @@ import * as i1$4 from '@angular/forms';
27
27
  import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
28
28
  import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
29
29
  import * as i2$1 from '@angular/router';
30
- import { Router, NavigationEnd, RouterModule } from '@angular/router';
30
+ import { Router, RouterModule } from '@angular/router';
31
31
  import * as i3$2 from '@angular/material/tooltip';
32
32
  import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
33
- import { filter, Subject } from 'rxjs';
34
33
  import * as i1$5 from '@angular/platform-browser';
35
34
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
35
+ import { Subject } from 'rxjs';
36
36
  import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
37
37
 
38
38
  class RbCustomPipe {
@@ -881,14 +881,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
881
881
  class RbSidebarNavigationComponent {
882
882
  router = inject(Router);
883
883
  elementRef = inject(ElementRef);
884
- routerSubscription;
885
884
  logoUrl = '';
886
885
  logoTextUrl = '';
887
886
  logoName = '';
888
887
  _items = [];
889
888
  set items(value) {
890
889
  this._items = this.sortItems(value || []);
891
- this.scrollToActiveItem(false);
892
890
  }
893
891
  get items() {
894
892
  return this._items;
@@ -991,6 +989,7 @@ class RbSidebarNavigationComponent {
991
989
  toggleIcon = 'last_page';
992
990
  itemClick = new EventEmitter();
993
991
  logoClick = new EventEmitter();
992
+ stateChange = new EventEmitter();
994
993
  isFixed = false;
995
994
  isHovered = false;
996
995
  isOverlayActive = false;
@@ -1000,11 +999,19 @@ class RbSidebarNavigationComponent {
1000
999
  return this.secondaryItems && this.secondaryItems.length > 0;
1001
1000
  }
1002
1001
  closePrimaryForSecondaryMenu() {
1002
+ const wasOpen = this.isOpen;
1003
1003
  this.clearHoverTimeout();
1004
1004
  this.clearOverlayCloseTimeout();
1005
1005
  this.isFixed = false;
1006
1006
  this.isHovered = false;
1007
1007
  this.isOverlayActive = false;
1008
+ if (wasOpen) {
1009
+ this.scrollToActiveItem(true);
1010
+ this.emitStateChange();
1011
+ }
1012
+ }
1013
+ emitStateChange() {
1014
+ this.stateChange.emit({ isOpen: this.isOpen, isFixed: this.isFixed });
1008
1015
  }
1009
1016
  sortItems(items) {
1010
1017
  if (!items || items.length === 0)
@@ -1055,12 +1062,6 @@ class RbSidebarNavigationComponent {
1055
1062
  else {
1056
1063
  this.isFixed = this.initiallyFixed;
1057
1064
  }
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
  }
1065
1066
  get isOpen() {
1066
1067
  return this.isFixed || this.isHovered;
@@ -1072,7 +1073,10 @@ class RbSidebarNavigationComponent {
1072
1073
  this.isOverlayActive = true;
1073
1074
  }
1074
1075
  if (wasOpen !== this.isOpen) {
1075
- this.scrollToActiveItem(true);
1076
+ if (!this.isOpen) {
1077
+ this.scrollToActiveItem(true);
1078
+ }
1079
+ this.emitStateChange();
1076
1080
  }
1077
1081
  }
1078
1082
  onMouseEnter() {
@@ -1094,6 +1098,7 @@ class RbSidebarNavigationComponent {
1094
1098
  if (wasHovered) {
1095
1099
  this.finishOverlayAfterClosingTransition();
1096
1100
  this.scrollToActiveItem(true);
1101
+ this.emitStateChange();
1097
1102
  }
1098
1103
  else {
1099
1104
  this.isOverlayActive = false;
@@ -1102,9 +1107,6 @@ class RbSidebarNavigationComponent {
1102
1107
  ngOnDestroy() {
1103
1108
  this.clearHoverTimeout();
1104
1109
  this.clearOverlayCloseTimeout();
1105
- if (this.routerSubscription) {
1106
- this.routerSubscription.unsubscribe();
1107
- }
1108
1110
  }
1109
1111
  toggleFixed() {
1110
1112
  this.clearHoverTimeout();
@@ -1127,9 +1129,10 @@ class RbSidebarNavigationComponent {
1127
1129
  this.isHovered = false;
1128
1130
  this.isOverlayActive = false;
1129
1131
  }
1130
- if (wasOpen !== this.isOpen) {
1132
+ if (wasOpen && !this.isOpen) {
1131
1133
  this.scrollToActiveItem(true);
1132
1134
  }
1135
+ this.emitStateChange();
1133
1136
  }
1134
1137
  finishOverlayAfterClosingTransition() {
1135
1138
  this.clearOverlayCloseTimeout();
@@ -1166,7 +1169,6 @@ class RbSidebarNavigationComponent {
1166
1169
  item.action();
1167
1170
  }
1168
1171
  this.itemClick.emit(item);
1169
- this.scrollToActiveItem(true);
1170
1172
  }
1171
1173
  toggleItem(item) {
1172
1174
  if (item.children && item.children.length > 0) {
@@ -1175,7 +1177,6 @@ class RbSidebarNavigationComponent {
1175
1177
  this.isFixed = true; // Open the sidebar to see the children
1176
1178
  this.isHovered = false;
1177
1179
  }
1178
- this.scrollToActiveItem(true);
1179
1180
  }
1180
1181
  else {
1181
1182
  this.onItemClicked(item);
@@ -1186,7 +1187,7 @@ class RbSidebarNavigationComponent {
1186
1187
  return false;
1187
1188
  // Check if any child route is currently active
1188
1189
  return item.children.some(child => child.route && this.router.isActive(child.route, {
1189
- paths: 'subset',
1190
+ paths: 'exact',
1190
1191
  queryParams: 'ignored',
1191
1192
  fragment: 'ignored',
1192
1193
  matrixParams: 'ignored'
@@ -1208,7 +1209,7 @@ class RbSidebarNavigationComponent {
1208
1209
  }
1209
1210
  isRouteActive(item) {
1210
1211
  return !!item.route && this.router.isActive(item.route, {
1211
- paths: 'subset',
1212
+ paths: 'exact',
1212
1213
  queryParams: 'ignored',
1213
1214
  fragment: 'ignored',
1214
1215
  matrixParams: 'ignored'
@@ -1254,7 +1255,10 @@ class RbSidebarNavigationComponent {
1254
1255
  const isVisible = (activeRect.top >= containerRect.top &&
1255
1256
  activeRect.bottom <= containerRect.bottom);
1256
1257
  if (!isVisible) {
1257
- const targetScrollTop = activeElement.offsetTop - (navContainer.clientHeight / 2) + (activeElement.clientHeight / 2);
1258
+ const targetScrollTop = navContainer.scrollTop
1259
+ + activeRect.top
1260
+ - containerRect.top
1261
+ - ((navContainer.clientHeight - activeElement.clientHeight) / 2);
1258
1262
  navContainer.scrollTo({
1259
1263
  top: Math.max(0, targetScrollTop),
1260
1264
  behavior: smooth ? 'smooth' : 'auto'
@@ -1262,11 +1266,11 @@ class RbSidebarNavigationComponent {
1262
1266
  }
1263
1267
  }
1264
1268
  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 });
1269
+ 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", stateChange: "stateChange" }, 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: true }\"\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: true }\"\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: true }\"\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
1270
  }
1267
1271
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbSidebarNavigationComponent, decorators: [{
1268
1272
  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"] }]
1273
+ 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: true }\"\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: true }\"\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: true }\"\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
1274
  }], propDecorators: { logoUrl: [{
1271
1275
  type: Input
1272
1276
  }], logoTextUrl: [{
@@ -1307,6 +1311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1307
1311
  type: Output
1308
1312
  }], logoClick: [{
1309
1313
  type: Output
1314
+ }], stateChange: [{
1315
+ type: Output
1310
1316
  }] } });
1311
1317
 
1312
1318
  class RbHeaderComponent {
@@ -1319,12 +1325,18 @@ class RbHeaderComponent {
1319
1325
  appsList = [];
1320
1326
  backgroundColor = '#F8FAF9';
1321
1327
  profileMenu = [];
1328
+ showBaseSwitch = false;
1329
+ showCrmButton = false;
1330
+ showCrmApp = false;
1322
1331
  onHelpClick = new EventEmitter();
1323
1332
  onAppsClick = new EventEmitter();
1324
1333
  onViewAllAppsClick = new EventEmitter();
1325
1334
  onProfileMenuItemClick = new EventEmitter();
1326
1335
  onLogoutClick = new EventEmitter();
1327
1336
  onProfileMenuClick = new EventEmitter();
1337
+ onSwitchBaseClick = new EventEmitter();
1338
+ onGoToCrmClick = new EventEmitter();
1339
+ onAccountClick = new EventEmitter();
1328
1340
  isAppsMenuOpen = false;
1329
1341
  isProfileMenuOpen = false;
1330
1342
  appsMenuRef;
@@ -1391,6 +1403,10 @@ class RbHeaderComponent {
1391
1403
  this.onViewAllAppsClick.emit();
1392
1404
  this.isAppsMenuOpen = false;
1393
1405
  }
1406
+ handleCrmAppClick() {
1407
+ this.onGoToCrmClick.emit();
1408
+ this.isAppsMenuOpen = false;
1409
+ }
1394
1410
  handleHelpClick() {
1395
1411
  this.onHelpClick.emit();
1396
1412
  }
@@ -1406,12 +1422,27 @@ class RbHeaderComponent {
1406
1422
  this.onLogoutClick.emit();
1407
1423
  this.isProfileMenuOpen = false;
1408
1424
  }
1425
+ handleAccountClick() {
1426
+ this.onAccountClick.emit();
1427
+ this.isProfileMenuOpen = false;
1428
+ }
1429
+ handleBaseRowClick() {
1430
+ if (this.showBaseSwitch) {
1431
+ this.onSwitchBaseClick.emit();
1432
+ this.isProfileMenuOpen = false;
1433
+ }
1434
+ }
1435
+ handleGoToCrmClick(event) {
1436
+ event.stopPropagation();
1437
+ this.onGoToCrmClick.emit();
1438
+ this.isProfileMenuOpen = false;
1439
+ }
1409
1440
  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"] }] });
1441
+ 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", showBaseSwitch: "showBaseSwitch", showCrmButton: "showCrmButton", showCrmApp: "showCrmApp" }, outputs: { onHelpClick: "onHelpClick", onAppsClick: "onAppsClick", onViewAllAppsClick: "onViewAllAppsClick", onProfileMenuItemClick: "onProfileMenuItemClick", onLogoutClick: "onLogoutClick", onProfileMenuClick: "onProfileMenuClick", onSwitchBaseClick: "onSwitchBaseClick", onGoToCrmClick: "onGoToCrmClick", onAccountClick: "onAccountClick" }, 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 || showCrmApp) {\n <div class=\"rb-header__apps-card\">\n <div class=\"rb-header__apps-grid\">\n @if (showCrmApp) {\n <button type=\"button\" class=\"rb-header__app-item\" (click)=\"handleCrmAppClick()\">\n <div class=\"rb-header__app-item-inner\">\n <div class=\"rb-header__app-icon-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"31\" height=\"28\" viewBox=\"0 0 31 28\" fill=\"none\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30.6535 12.5201L24.2317 1.38599C23.7697 0.554396 22.8458 0 21.8756 0H9.07824C8.10805 0 7.18405 0.508197 6.72206 1.38599L0.346498 12.5201C-0.115499 13.3517 -0.115499 14.3681 0.346498 15.2459L6.76826 26.38C7.23025 27.2116 8.15425 27.766 9.12444 27.766H21.9218C22.892 27.766 23.8159 27.2578 24.2779 26.38L30.6535 15.2459C31.1155 14.3681 31.1155 13.3517 30.6535 12.5201ZM27.0499 14.9225L22.1528 23.4232C21.7832 24.07 21.0902 24.4858 20.351 24.4858H10.6028C9.86364 24.4858 9.17064 24.07 8.80104 23.4232L3.95007 14.9225C3.58048 14.2757 3.58048 13.4903 3.95007 12.8435L8.80104 4.34277C9.17064 3.69598 9.86364 3.28018 10.6028 3.28018H20.351C21.0902 3.28018 21.7832 3.69598 22.1528 4.34277L27.0499 12.8435C27.4195 13.4903 27.4195 14.2757 27.0499 14.9225Z\" fill=\"#01A1A1\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.5779 16.1866C22.7549 15.8786 22.5326 15.4944 22.1773 15.4944H19.4585C19.2927 15.4944 19.1396 15.5832 19.0574 15.7272L18.0388 17.5097C17.9002 17.7407 17.623 17.9255 17.3458 17.9255H13.6498C13.3726 17.9255 13.0954 17.7869 12.9568 17.5097L11.9382 15.7272C11.856 15.5832 11.7029 15.4944 11.5371 15.4944H8.81829C8.46304 15.4944 8.24071 15.8786 8.41775 16.1866L10.8778 20.4665C11.155 20.9285 11.617 21.2057 12.1252 21.2057H18.8704C19.3786 21.2057 19.8406 20.9285 20.1178 20.4665L22.5779 16.1866ZM20.0716 7.29956L22.4986 11.522C22.6757 11.83 22.4533 12.2142 22.0981 12.2142H19.4257C19.2599 12.2142 19.1068 12.1254 19.0245 11.9814L18.0388 10.2563C17.9002 9.97914 17.623 9.84054 17.3458 9.84054H13.6498C13.3726 9.84054 13.0954 10.0253 12.9568 10.2563L11.9711 11.9814C11.8888 12.1254 11.7357 12.2142 11.5699 12.2142H8.85132C8.49607 12.2142 8.27374 11.83 8.45078 11.522L10.8778 7.29956C11.155 6.83756 11.617 6.56036 12.1252 6.56036H18.8242C19.3324 6.56036 19.7944 6.83756 20.0716 7.29956Z\" fill=\"#FF0031\"/>\n </svg>\n </div>\n <span class=\"rb-header__app-name\">CRM</span>\n </div>\n </button>\n }\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-item-inner\">\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 </div>\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-item-inner\">\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 </div>\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 <!-- Identification (also acts as the account button) -->\n <button\n type=\"button\"\n class=\"rb-header__profile-menu-identification\"\n (click)=\"handleAccountClick()\"\n >\n <span class=\"rb-header__profile-menu-identification-name\">{{ userProfile.name }}</span>\n @if (userProfile.email) {\n <span class=\"rb-header__profile-menu-identification-email\">{{ userProfile.email }}</span>\n }\n </button>\n\n <!-- Base Switch / CRM Row -->\n @if (showBaseSwitch || showCrmButton) {\n <div\n class=\"rb-header__profile-menu-item rb-header__profile-base-row\"\n [class.rb-header__profile-menu-item--static]=\"!showBaseSwitch\"\n (click)=\"handleBaseRowClick()\"\n >\n <span class=\"rb-header__profile-menu-label\">{{ userProfile?.base }}</span>\n @if (showCrmButton) {\n <button\n type=\"button\"\n class=\"rb-header__profile-crm-btn\"\n (click)=\"handleGoToCrmClick($event)\"\n aria-label=\"Ir para o CRM\"\n title=\"Ir para o CRM\"\n >\n <mat-icon class=\"rb-header__profile-crm-icon\">swap_vert</mat-icon>\n </button>\n }\n </div>\n <div class=\"rb-header__profile-menu-divider\"></div>\n }\n\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 @if (profileMenu.length > 0) {\n <div class=\"rb-header__profile-menu-divider\"></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{position:relative;display:flex;width:100px;min-height:88px;padding:0;box-sizing:border-box;border:0;border-radius:8px;background:transparent;color:inherit;font-family:inherit;cursor:pointer;text-align:center}.rb-header__app-item:hover,.rb-header__app-item:focus-visible{z-index:1}.rb-header__app-item:hover .rb-header__app-item-inner,.rb-header__app-item:focus-visible .rb-header__app-item-inner{position:absolute;top:0;left:0;right:0;height:auto;min-height:100%;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-item-inner{display:flex;flex-direction:column;width:100%;height:100%;padding:2px 4px;justify-content:flex-start;align-items:center;gap:4px;box-sizing:border-box;border-radius:8px;background:transparent;transition:background-color .2s ease-in-out}.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:240px;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-divider{width:100%;height:1px;margin:4px 0;background:var(--border-neutral-secondary, #C5C7C6);flex-shrink:0}.rb-header__profile-menu-identification{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;width:100%;padding:12px 16px;gap:2px;border:0;border-bottom:1px solid var(--border-neutral-secondary, #C5C7C6);background:transparent;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}.rb-header__profile-menu-identification:hover,.rb-header__profile-menu-identification:focus-visible{background:var(--surface-tint-4, rgba(0, 106, 106, .04))}.rb-header__profile-menu-identification-name{max-width:100%;overflow:hidden;color:var(--text-neutral-primary, #191C1C);text-overflow:ellipsis;font-family:var(--body-large-font, Roboto);font-size:var(--body-large-size, 16px);font-style:normal;font-weight:500;line-height:var(--body-large-line-height, 24px);letter-spacing:var(--body-large-tracking, .5px)}.rb-header__profile-menu-identification-email{max-width:100%;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-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-item--static{cursor:default}.rb-header__profile-menu-item--static:hover{background:transparent}.rb-header__profile-crm-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--icon-neutral-secondary, #747878);cursor:pointer;transition:background-color .2s}.rb-header__profile-crm-btn:hover,.rb-header__profile-crm-btn:focus-visible{background:var(--surface-tint-8, rgba(0, 106, 106, .08));color:var(--color-primary, #006A6A)}.rb-header__profile-crm-icon{font-size:18px;width:18px;height:18px;transform:rotate(45deg)}.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-Secondary, #2E3131);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: "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"] }] });
1411
1442
  }
1412
1443
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHeaderComponent, decorators: [{
1413
1444
  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"] }]
1445
+ args: [{ selector: 'rb-header', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, 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 || showCrmApp) {\n <div class=\"rb-header__apps-card\">\n <div class=\"rb-header__apps-grid\">\n @if (showCrmApp) {\n <button type=\"button\" class=\"rb-header__app-item\" (click)=\"handleCrmAppClick()\">\n <div class=\"rb-header__app-item-inner\">\n <div class=\"rb-header__app-icon-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"31\" height=\"28\" viewBox=\"0 0 31 28\" fill=\"none\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M30.6535 12.5201L24.2317 1.38599C23.7697 0.554396 22.8458 0 21.8756 0H9.07824C8.10805 0 7.18405 0.508197 6.72206 1.38599L0.346498 12.5201C-0.115499 13.3517 -0.115499 14.3681 0.346498 15.2459L6.76826 26.38C7.23025 27.2116 8.15425 27.766 9.12444 27.766H21.9218C22.892 27.766 23.8159 27.2578 24.2779 26.38L30.6535 15.2459C31.1155 14.3681 31.1155 13.3517 30.6535 12.5201ZM27.0499 14.9225L22.1528 23.4232C21.7832 24.07 21.0902 24.4858 20.351 24.4858H10.6028C9.86364 24.4858 9.17064 24.07 8.80104 23.4232L3.95007 14.9225C3.58048 14.2757 3.58048 13.4903 3.95007 12.8435L8.80104 4.34277C9.17064 3.69598 9.86364 3.28018 10.6028 3.28018H20.351C21.0902 3.28018 21.7832 3.69598 22.1528 4.34277L27.0499 12.8435C27.4195 13.4903 27.4195 14.2757 27.0499 14.9225Z\" fill=\"#01A1A1\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.5779 16.1866C22.7549 15.8786 22.5326 15.4944 22.1773 15.4944H19.4585C19.2927 15.4944 19.1396 15.5832 19.0574 15.7272L18.0388 17.5097C17.9002 17.7407 17.623 17.9255 17.3458 17.9255H13.6498C13.3726 17.9255 13.0954 17.7869 12.9568 17.5097L11.9382 15.7272C11.856 15.5832 11.7029 15.4944 11.5371 15.4944H8.81829C8.46304 15.4944 8.24071 15.8786 8.41775 16.1866L10.8778 20.4665C11.155 20.9285 11.617 21.2057 12.1252 21.2057H18.8704C19.3786 21.2057 19.8406 20.9285 20.1178 20.4665L22.5779 16.1866ZM20.0716 7.29956L22.4986 11.522C22.6757 11.83 22.4533 12.2142 22.0981 12.2142H19.4257C19.2599 12.2142 19.1068 12.1254 19.0245 11.9814L18.0388 10.2563C17.9002 9.97914 17.623 9.84054 17.3458 9.84054H13.6498C13.3726 9.84054 13.0954 10.0253 12.9568 10.2563L11.9711 11.9814C11.8888 12.1254 11.7357 12.2142 11.5699 12.2142H8.85132C8.49607 12.2142 8.27374 11.83 8.45078 11.522L10.8778 7.29956C11.155 6.83756 11.617 6.56036 12.1252 6.56036H18.8242C19.3324 6.56036 19.7944 6.83756 20.0716 7.29956Z\" fill=\"#FF0031\"/>\n </svg>\n </div>\n <span class=\"rb-header__app-name\">CRM</span>\n </div>\n </button>\n }\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-item-inner\">\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 </div>\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-item-inner\">\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 </div>\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 <!-- Identification (also acts as the account button) -->\n <button\n type=\"button\"\n class=\"rb-header__profile-menu-identification\"\n (click)=\"handleAccountClick()\"\n >\n <span class=\"rb-header__profile-menu-identification-name\">{{ userProfile.name }}</span>\n @if (userProfile.email) {\n <span class=\"rb-header__profile-menu-identification-email\">{{ userProfile.email }}</span>\n }\n </button>\n\n <!-- Base Switch / CRM Row -->\n @if (showBaseSwitch || showCrmButton) {\n <div\n class=\"rb-header__profile-menu-item rb-header__profile-base-row\"\n [class.rb-header__profile-menu-item--static]=\"!showBaseSwitch\"\n (click)=\"handleBaseRowClick()\"\n >\n <span class=\"rb-header__profile-menu-label\">{{ userProfile?.base }}</span>\n @if (showCrmButton) {\n <button\n type=\"button\"\n class=\"rb-header__profile-crm-btn\"\n (click)=\"handleGoToCrmClick($event)\"\n aria-label=\"Ir para o CRM\"\n title=\"Ir para o CRM\"\n >\n <mat-icon class=\"rb-header__profile-crm-icon\">swap_vert</mat-icon>\n </button>\n }\n </div>\n <div class=\"rb-header__profile-menu-divider\"></div>\n }\n\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 @if (profileMenu.length > 0) {\n <div class=\"rb-header__profile-menu-divider\"></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{position:relative;display:flex;width:100px;min-height:88px;padding:0;box-sizing:border-box;border:0;border-radius:8px;background:transparent;color:inherit;font-family:inherit;cursor:pointer;text-align:center}.rb-header__app-item:hover,.rb-header__app-item:focus-visible{z-index:1}.rb-header__app-item:hover .rb-header__app-item-inner,.rb-header__app-item:focus-visible .rb-header__app-item-inner{position:absolute;top:0;left:0;right:0;height:auto;min-height:100%;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-item-inner{display:flex;flex-direction:column;width:100%;height:100%;padding:2px 4px;justify-content:flex-start;align-items:center;gap:4px;box-sizing:border-box;border-radius:8px;background:transparent;transition:background-color .2s ease-in-out}.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:240px;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-divider{width:100%;height:1px;margin:4px 0;background:var(--border-neutral-secondary, #C5C7C6);flex-shrink:0}.rb-header__profile-menu-identification{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;width:100%;padding:12px 16px;gap:2px;border:0;border-bottom:1px solid var(--border-neutral-secondary, #C5C7C6);background:transparent;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}.rb-header__profile-menu-identification:hover,.rb-header__profile-menu-identification:focus-visible{background:var(--surface-tint-4, rgba(0, 106, 106, .04))}.rb-header__profile-menu-identification-name{max-width:100%;overflow:hidden;color:var(--text-neutral-primary, #191C1C);text-overflow:ellipsis;font-family:var(--body-large-font, Roboto);font-size:var(--body-large-size, 16px);font-style:normal;font-weight:500;line-height:var(--body-large-line-height, 24px);letter-spacing:var(--body-large-tracking, .5px)}.rb-header__profile-menu-identification-email{max-width:100%;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-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-item--static{cursor:default}.rb-header__profile-menu-item--static:hover{background:transparent}.rb-header__profile-crm-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--icon-neutral-secondary, #747878);cursor:pointer;transition:background-color .2s}.rb-header__profile-crm-btn:hover,.rb-header__profile-crm-btn:focus-visible{background:var(--surface-tint-8, rgba(0, 106, 106, .08));color:var(--color-primary, #006A6A)}.rb-header__profile-crm-icon{font-size:18px;width:18px;height:18px;transform:rotate(45deg)}.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-Secondary, #2E3131);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
1446
  }], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { pageTitle: [{
1416
1447
  type: Input
1417
1448
  }], userProfile: [{
@@ -1422,6 +1453,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1422
1453
  type: Input
1423
1454
  }], profileMenu: [{
1424
1455
  type: Input
1456
+ }], showBaseSwitch: [{
1457
+ type: Input
1458
+ }], showCrmButton: [{
1459
+ type: Input
1460
+ }], showCrmApp: [{
1461
+ type: Input
1425
1462
  }], onHelpClick: [{
1426
1463
  type: Output
1427
1464
  }], onAppsClick: [{
@@ -1434,6 +1471,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1434
1471
  type: Output
1435
1472
  }], onProfileMenuClick: [{
1436
1473
  type: Output
1474
+ }], onSwitchBaseClick: [{
1475
+ type: Output
1476
+ }], onGoToCrmClick: [{
1477
+ type: Output
1478
+ }], onAccountClick: [{
1479
+ type: Output
1437
1480
  }], appsMenuRef: [{
1438
1481
  type: ViewChild,
1439
1482
  args: ['appsMenuRef']
@@ -1542,11 +1585,11 @@ class RbHelpPanelComponent {
1542
1585
  }
1543
1586
  }
1544
1587
  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"] }] });
1588
+ 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 <mat-icon>close</mat-icon>\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\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 mat-stroked-button class=\"rb-help-panel__action-btn rb-help-panel__action-btn--outline\" (click)=\"onClickMyTickets.emit()\">\n <mat-icon>person</mat-icon>\n Meus atendimentos\n </button>\n \n <button mat-flat-button class=\"rb-help-panel__action-btn rb-help-panel__action-btn--primary\" (click)=\"onClickChat.emit()\">\n <mat-icon>chat_bubble</mat-icon>\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;flex-shrink:0;box-sizing:border-box;width:100%;height:56px;padding:4px 16px 4px 32px;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;min-width: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{--mat-icon-button-state-layer-color: var(--color-primary, #006A6A);--mat-icon-button-hover-state-layer-opacity: .08;flex-shrink:0;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;justify-content:flex-end;align-items:center;gap:8px}.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:0 0 auto;width:auto;height:40px;padding:0 24px;border-radius:100px;font-family:var(--Typescale-Label-Large-Font-family, Roboto, \"Helvetica Neue\", sans-serif);font-size:var(--Typescale-Label-Large-Font-size, 14px);font-weight:500;line-height:var(--Typescale-Label-Large-Line-height, 20px);letter-spacing:var(--Typescale-Label-Large-Tracking, .1px);white-space:nowrap;cursor:pointer;transition:background-color .2s}.rb-help-panel__action-btn mat-icon{width:18px;height:18px;font-size:18px}.rb-help-panel__action-btn--outline{--mdc-outlined-button-container-height: 40px;--mdc-outlined-button-container-shape: 100px;--mdc-outlined-button-label-text-color: #006A63;--mdc-outlined-button-outline-color: #006A63;--mat-outlined-button-horizontal-padding: 24px;background-color:transparent;color:#006a63}.rb-help-panel__action-btn--outline:hover{background-color:#f0f4f4}.rb-help-panel__action-btn--primary{--mdc-filled-button-container-height: 40px;--mdc-filled-button-container-shape: 100px;--mdc-filled-button-container-color: #006A63;--mdc-filled-button-label-text-color: #FFFFFF;--mat-filled-button-horizontal-padding: 24px;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.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"] }] });
1546
1589
  }
1547
1590
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHelpPanelComponent, decorators: [{
1548
1591
  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"] }]
1592
+ args: [{ selector: 'rb-help-panel', standalone: true, imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule], 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 <mat-icon>close</mat-icon>\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\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 mat-stroked-button class=\"rb-help-panel__action-btn rb-help-panel__action-btn--outline\" (click)=\"onClickMyTickets.emit()\">\n <mat-icon>person</mat-icon>\n Meus atendimentos\n </button>\n \n <button mat-flat-button class=\"rb-help-panel__action-btn rb-help-panel__action-btn--primary\" (click)=\"onClickChat.emit()\">\n <mat-icon>chat_bubble</mat-icon>\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;flex-shrink:0;box-sizing:border-box;width:100%;height:56px;padding:4px 16px 4px 32px;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;min-width: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{--mat-icon-button-state-layer-color: var(--color-primary, #006A6A);--mat-icon-button-hover-state-layer-opacity: .08;flex-shrink:0;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;justify-content:flex-end;align-items:center;gap:8px}.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:0 0 auto;width:auto;height:40px;padding:0 24px;border-radius:100px;font-family:var(--Typescale-Label-Large-Font-family, Roboto, \"Helvetica Neue\", sans-serif);font-size:var(--Typescale-Label-Large-Font-size, 14px);font-weight:500;line-height:var(--Typescale-Label-Large-Line-height, 20px);letter-spacing:var(--Typescale-Label-Large-Tracking, .1px);white-space:nowrap;cursor:pointer;transition:background-color .2s}.rb-help-panel__action-btn mat-icon{width:18px;height:18px;font-size:18px}.rb-help-panel__action-btn--outline{--mdc-outlined-button-container-height: 40px;--mdc-outlined-button-container-shape: 100px;--mdc-outlined-button-label-text-color: #006A63;--mdc-outlined-button-outline-color: #006A63;--mat-outlined-button-horizontal-padding: 24px;background-color:transparent;color:#006a63}.rb-help-panel__action-btn--outline:hover{background-color:#f0f4f4}.rb-help-panel__action-btn--primary{--mdc-filled-button-container-height: 40px;--mdc-filled-button-container-shape: 100px;--mdc-filled-button-container-color: #006A63;--mdc-filled-button-label-text-color: #FFFFFF;--mat-filled-button-horizontal-padding: 24px;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
1593
  }], propDecorators: { isOpen: [{
1551
1594
  type: Input
1552
1595
  }], panelTitle: [{