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

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 (10) hide show
  1. package/fesm2022/rubeusteam-rb-angular-components.mjs +187 -30
  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-help-panel/rb-help-panel.component.d.ts +34 -2
  5. package/lib/components/rb-sidebar-navigation/rb-sidebar-navigation.component.d.ts +8 -5
  6. package/lib/interfaces/rb-header.interface.d.ts +1 -0
  7. package/lib/interfaces/rb-help-panel.interface.d.ts +19 -0
  8. package/lib/services/rb-zendesk-help/rb-zendesk-help.service.d.ts +27 -0
  9. package/package.json +1 -1
  10. package/public-api.d.ts +1 -0
package/fesm2022/rubeusteam-rb-angular-components.mjs CHANGED
@@ -27,13 +27,14 @@ 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';
36
- import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
35
+ import { Subject, of } from 'rxjs';
36
+ import { debounceTime, distinctUntilChanged, switchMap, map, catchError } from 'rxjs/operators';
37
+ import { HttpClient } from '@angular/common/http';
37
38
 
38
39
  class RbCustomPipe {
39
40
  transform(value, type) {
@@ -881,14 +882,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
881
882
  class RbSidebarNavigationComponent {
882
883
  router = inject(Router);
883
884
  elementRef = inject(ElementRef);
884
- routerSubscription;
885
885
  logoUrl = '';
886
886
  logoTextUrl = '';
887
887
  logoName = '';
888
888
  _items = [];
889
889
  set items(value) {
890
890
  this._items = this.sortItems(value || []);
891
- this.scrollToActiveItem(false);
892
891
  }
893
892
  get items() {
894
893
  return this._items;
@@ -991,6 +990,7 @@ class RbSidebarNavigationComponent {
991
990
  toggleIcon = 'last_page';
992
991
  itemClick = new EventEmitter();
993
992
  logoClick = new EventEmitter();
993
+ stateChange = new EventEmitter();
994
994
  isFixed = false;
995
995
  isHovered = false;
996
996
  isOverlayActive = false;
@@ -1000,11 +1000,19 @@ class RbSidebarNavigationComponent {
1000
1000
  return this.secondaryItems && this.secondaryItems.length > 0;
1001
1001
  }
1002
1002
  closePrimaryForSecondaryMenu() {
1003
+ const wasOpen = this.isOpen;
1003
1004
  this.clearHoverTimeout();
1004
1005
  this.clearOverlayCloseTimeout();
1005
1006
  this.isFixed = false;
1006
1007
  this.isHovered = false;
1007
1008
  this.isOverlayActive = false;
1009
+ if (wasOpen) {
1010
+ this.scrollToActiveItem(true);
1011
+ this.emitStateChange();
1012
+ }
1013
+ }
1014
+ emitStateChange() {
1015
+ this.stateChange.emit({ isOpen: this.isOpen, isFixed: this.isFixed });
1008
1016
  }
1009
1017
  sortItems(items) {
1010
1018
  if (!items || items.length === 0)
@@ -1055,12 +1063,6 @@ class RbSidebarNavigationComponent {
1055
1063
  else {
1056
1064
  this.isFixed = this.initiallyFixed;
1057
1065
  }
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
1066
  }
1065
1067
  get isOpen() {
1066
1068
  return this.isFixed || this.isHovered;
@@ -1072,7 +1074,10 @@ class RbSidebarNavigationComponent {
1072
1074
  this.isOverlayActive = true;
1073
1075
  }
1074
1076
  if (wasOpen !== this.isOpen) {
1075
- this.scrollToActiveItem(true);
1077
+ if (!this.isOpen) {
1078
+ this.scrollToActiveItem(true);
1079
+ }
1080
+ this.emitStateChange();
1076
1081
  }
1077
1082
  }
1078
1083
  onMouseEnter() {
@@ -1094,6 +1099,7 @@ class RbSidebarNavigationComponent {
1094
1099
  if (wasHovered) {
1095
1100
  this.finishOverlayAfterClosingTransition();
1096
1101
  this.scrollToActiveItem(true);
1102
+ this.emitStateChange();
1097
1103
  }
1098
1104
  else {
1099
1105
  this.isOverlayActive = false;
@@ -1102,9 +1108,6 @@ class RbSidebarNavigationComponent {
1102
1108
  ngOnDestroy() {
1103
1109
  this.clearHoverTimeout();
1104
1110
  this.clearOverlayCloseTimeout();
1105
- if (this.routerSubscription) {
1106
- this.routerSubscription.unsubscribe();
1107
- }
1108
1111
  }
1109
1112
  toggleFixed() {
1110
1113
  this.clearHoverTimeout();
@@ -1127,9 +1130,10 @@ class RbSidebarNavigationComponent {
1127
1130
  this.isHovered = false;
1128
1131
  this.isOverlayActive = false;
1129
1132
  }
1130
- if (wasOpen !== this.isOpen) {
1133
+ if (wasOpen && !this.isOpen) {
1131
1134
  this.scrollToActiveItem(true);
1132
1135
  }
1136
+ this.emitStateChange();
1133
1137
  }
1134
1138
  finishOverlayAfterClosingTransition() {
1135
1139
  this.clearOverlayCloseTimeout();
@@ -1166,7 +1170,6 @@ class RbSidebarNavigationComponent {
1166
1170
  item.action();
1167
1171
  }
1168
1172
  this.itemClick.emit(item);
1169
- this.scrollToActiveItem(true);
1170
1173
  }
1171
1174
  toggleItem(item) {
1172
1175
  if (item.children && item.children.length > 0) {
@@ -1175,7 +1178,6 @@ class RbSidebarNavigationComponent {
1175
1178
  this.isFixed = true; // Open the sidebar to see the children
1176
1179
  this.isHovered = false;
1177
1180
  }
1178
- this.scrollToActiveItem(true);
1179
1181
  }
1180
1182
  else {
1181
1183
  this.onItemClicked(item);
@@ -1186,7 +1188,7 @@ class RbSidebarNavigationComponent {
1186
1188
  return false;
1187
1189
  // Check if any child route is currently active
1188
1190
  return item.children.some(child => child.route && this.router.isActive(child.route, {
1189
- paths: 'subset',
1191
+ paths: 'exact',
1190
1192
  queryParams: 'ignored',
1191
1193
  fragment: 'ignored',
1192
1194
  matrixParams: 'ignored'
@@ -1208,7 +1210,7 @@ class RbSidebarNavigationComponent {
1208
1210
  }
1209
1211
  isRouteActive(item) {
1210
1212
  return !!item.route && this.router.isActive(item.route, {
1211
- paths: 'subset',
1213
+ paths: 'exact',
1212
1214
  queryParams: 'ignored',
1213
1215
  fragment: 'ignored',
1214
1216
  matrixParams: 'ignored'
@@ -1254,7 +1256,10 @@ class RbSidebarNavigationComponent {
1254
1256
  const isVisible = (activeRect.top >= containerRect.top &&
1255
1257
  activeRect.bottom <= containerRect.bottom);
1256
1258
  if (!isVisible) {
1257
- const targetScrollTop = activeElement.offsetTop - (navContainer.clientHeight / 2) + (activeElement.clientHeight / 2);
1259
+ const targetScrollTop = navContainer.scrollTop
1260
+ + activeRect.top
1261
+ - containerRect.top
1262
+ - ((navContainer.clientHeight - activeElement.clientHeight) / 2);
1258
1263
  navContainer.scrollTo({
1259
1264
  top: Math.max(0, targetScrollTop),
1260
1265
  behavior: smooth ? 'smooth' : 'auto'
@@ -1262,11 +1267,11 @@ class RbSidebarNavigationComponent {
1262
1267
  }
1263
1268
  }
1264
1269
  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 });
1270
+ 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
1271
  }
1267
1272
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbSidebarNavigationComponent, decorators: [{
1268
1273
  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"] }]
1274
+ 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
1275
  }], propDecorators: { logoUrl: [{
1271
1276
  type: Input
1272
1277
  }], logoTextUrl: [{
@@ -1307,6 +1312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1307
1312
  type: Output
1308
1313
  }], logoClick: [{
1309
1314
  type: Output
1315
+ }], stateChange: [{
1316
+ type: Output
1310
1317
  }] } });
1311
1318
 
1312
1319
  class RbHeaderComponent {
@@ -1319,12 +1326,18 @@ class RbHeaderComponent {
1319
1326
  appsList = [];
1320
1327
  backgroundColor = '#F8FAF9';
1321
1328
  profileMenu = [];
1329
+ showBaseSwitch = false;
1330
+ showCrmButton = false;
1331
+ showCrmApp = false;
1322
1332
  onHelpClick = new EventEmitter();
1323
1333
  onAppsClick = new EventEmitter();
1324
1334
  onViewAllAppsClick = new EventEmitter();
1325
1335
  onProfileMenuItemClick = new EventEmitter();
1326
1336
  onLogoutClick = new EventEmitter();
1327
1337
  onProfileMenuClick = new EventEmitter();
1338
+ onSwitchBaseClick = new EventEmitter();
1339
+ onGoToCrmClick = new EventEmitter();
1340
+ onAccountClick = new EventEmitter();
1328
1341
  isAppsMenuOpen = false;
1329
1342
  isProfileMenuOpen = false;
1330
1343
  appsMenuRef;
@@ -1391,6 +1404,10 @@ class RbHeaderComponent {
1391
1404
  this.onViewAllAppsClick.emit();
1392
1405
  this.isAppsMenuOpen = false;
1393
1406
  }
1407
+ handleCrmAppClick() {
1408
+ this.onGoToCrmClick.emit();
1409
+ this.isAppsMenuOpen = false;
1410
+ }
1394
1411
  handleHelpClick() {
1395
1412
  this.onHelpClick.emit();
1396
1413
  }
@@ -1406,12 +1423,27 @@ class RbHeaderComponent {
1406
1423
  this.onLogoutClick.emit();
1407
1424
  this.isProfileMenuOpen = false;
1408
1425
  }
1426
+ handleAccountClick() {
1427
+ this.onAccountClick.emit();
1428
+ this.isProfileMenuOpen = false;
1429
+ }
1430
+ handleBaseRowClick() {
1431
+ if (this.showBaseSwitch) {
1432
+ this.onSwitchBaseClick.emit();
1433
+ this.isProfileMenuOpen = false;
1434
+ }
1435
+ }
1436
+ handleGoToCrmClick(event) {
1437
+ event.stopPropagation();
1438
+ this.onGoToCrmClick.emit();
1439
+ this.isProfileMenuOpen = false;
1440
+ }
1409
1441
  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"] }] });
1442
+ 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\">Plataforma Rubeus</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
1443
  }
1412
1444
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHeaderComponent, decorators: [{
1413
1445
  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"] }]
1446
+ 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\">Plataforma Rubeus</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
1447
  }], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { pageTitle: [{
1416
1448
  type: Input
1417
1449
  }], userProfile: [{
@@ -1422,6 +1454,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1422
1454
  type: Input
1423
1455
  }], profileMenu: [{
1424
1456
  type: Input
1457
+ }], showBaseSwitch: [{
1458
+ type: Input
1459
+ }], showCrmButton: [{
1460
+ type: Input
1461
+ }], showCrmApp: [{
1462
+ type: Input
1425
1463
  }], onHelpClick: [{
1426
1464
  type: Output
1427
1465
  }], onAppsClick: [{
@@ -1434,6 +1472,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1434
1472
  type: Output
1435
1473
  }], onProfileMenuClick: [{
1436
1474
  type: Output
1475
+ }], onSwitchBaseClick: [{
1476
+ type: Output
1477
+ }], onGoToCrmClick: [{
1478
+ type: Output
1479
+ }], onAccountClick: [{
1480
+ type: Output
1437
1481
  }], appsMenuRef: [{
1438
1482
  type: ViewChild,
1439
1483
  args: ['appsMenuRef']
@@ -1473,12 +1517,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1473
1517
  // options?: any[]; // Para selects
1474
1518
  // }
1475
1519
 
1520
+ /**
1521
+ * URLs em uso no CRM (ui/lib/BarraPrincipal). Sobrescreva pelo input `links`
1522
+ * quando a aplicação consumidora apontar para outra central.
1523
+ */
1524
+ const RB_HELP_PANEL_DEFAULT_LINKS = {
1525
+ knowledgeBase: 'https://crmrubeus.zendesk.com/hc/pt-br/categories/360000249231-Base-de-conhecimento',
1526
+ community: 'https://crmrubeus.zendesk.com/hc/pt-br/community/topics',
1527
+ news: 'https://crmrubeus.zendesk.com/hc/pt-br/categories/360000306971/',
1528
+ myTickets: 'https://suporte.rubeus.com.br/detalhes'
1529
+ };
1530
+
1476
1531
  class RbHelpPanelComponent {
1477
1532
  destroyRef = inject(DestroyRef);
1478
1533
  isOpen = false;
1479
1534
  panelTitle = 'JivoChat';
1480
1535
  routeContext;
1481
1536
  integrationProvider;
1537
+ /**
1538
+ * Sobrescreve, por chave, os destinos dos atalhos da central.
1539
+ * O que não vier aqui cai em `RB_HELP_PANEL_DEFAULT_LINKS`.
1540
+ */
1541
+ links = {};
1542
+ /**
1543
+ * Permissão `fullUser` ("Acesso ao suporte") do usuário logado.
1544
+ * Sem ela o botão de chat fica desabilitado — é a mesma regra que o CRM
1545
+ * aplica na barra de ajuda, e o backend a revalida antes de emitir o JWT
1546
+ * do widget.
1547
+ */
1548
+ hasSupportAccess = false;
1549
+ /** Texto do tooltip quando o chat está bloqueado por permissão. */
1550
+ chatBlockedTooltip = 'Disponível apenas para usuários com acesso ao suporte';
1482
1551
  onClose = new EventEmitter();
1483
1552
  onClickKnowledgeBase = new EventEmitter();
1484
1553
  onClickCommunity = new EventEmitter();
@@ -1489,6 +1558,20 @@ class RbHelpPanelComponent {
1489
1558
  articles = [];
1490
1559
  isLoading = false;
1491
1560
  searchSubject = new Subject();
1561
+ /** Destinos efetivos dos atalhos, com os defaults preenchendo o que faltar. */
1562
+ get resolvedLinks() {
1563
+ return { ...RB_HELP_PANEL_DEFAULT_LINKS, ...this.links };
1564
+ }
1565
+ /**
1566
+ * Libera o chat apenas com permissão afirmativa. A checagem é por valor
1567
+ * permitido — e não pela ausência de `'0'` — para que valor faltante,
1568
+ * nulo ou de usuário inativo negue o acesso em vez de liberá-lo.
1569
+ */
1570
+ get canUseChat() {
1571
+ return this.hasSupportAccess === true
1572
+ || this.hasSupportAccess === 1
1573
+ || this.hasSupportAccess === '1';
1574
+ }
1492
1575
  ngOnInit() {
1493
1576
  this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), switchMap(query => {
1494
1577
  this.isLoading = true;
@@ -1537,16 +1620,45 @@ class RbHelpPanelComponent {
1537
1620
  this.onClose.emit();
1538
1621
  }
1539
1622
  openArticle(article) {
1540
- if (article.url) {
1541
- window.open(article.url, '_blank');
1623
+ this.openLink(article.url);
1624
+ }
1625
+ openKnowledgeBase() {
1626
+ this.openLink(this.resolvedLinks.knowledgeBase);
1627
+ this.onClickKnowledgeBase.emit();
1628
+ }
1629
+ openCommunity() {
1630
+ this.openLink(this.resolvedLinks.community);
1631
+ this.onClickCommunity.emit();
1632
+ }
1633
+ openNews() {
1634
+ this.openLink(this.resolvedLinks.news);
1635
+ this.onClickNews.emit();
1636
+ }
1637
+ openMyTickets() {
1638
+ this.openLink(this.resolvedLinks.myTickets);
1639
+ this.onClickMyTickets.emit();
1640
+ }
1641
+ /**
1642
+ * O chat é aberto pelo SDK do provedor, que vive na aplicação consumidora —
1643
+ * aqui só aplicamos a permissão e avisamos o host.
1644
+ */
1645
+ openChat() {
1646
+ if (!this.canUseChat) {
1647
+ return;
1648
+ }
1649
+ this.onClickChat.emit();
1650
+ }
1651
+ openLink(url) {
1652
+ if (url) {
1653
+ window.open(url, '_blank', 'noopener');
1542
1654
  }
1543
1655
  }
1544
1656
  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"] }] });
1657
+ 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", links: "links", hasSupportAccess: "hasSupportAccess", chatBlockedTooltip: "chatBlockedTooltip" }, 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)=\"openKnowledgeBase()\">\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)=\"openCommunity()\">\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)=\"openNews()\">\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)=\"openMyTickets()\">\n <mat-icon>person</mat-icon>\n Meus atendimentos\n </button>\n \n <button\n mat-flat-button\n class=\"rb-help-panel__action-btn rb-help-panel__action-btn--primary\"\n [disabled]=\"!canUseChat\"\n [attr.title]=\"canUseChat ? null : chatBlockedTooltip\"\n (click)=\"openChat()\">\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__action-btn--primary:disabled{--mdc-filled-button-disabled-container-color: #E3E5E4;--mdc-filled-button-disabled-label-text-color: #7A7A7A;background-color:#e3e5e4;color:#7a7a7a;cursor:not-allowed}.rb-help-panel__action-btn--primary:disabled:hover{background-color:#e3e5e4}.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
1658
  }
1547
1659
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHelpPanelComponent, decorators: [{
1548
1660
  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"] }]
1661
+ 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)=\"openKnowledgeBase()\">\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)=\"openCommunity()\">\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)=\"openNews()\">\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)=\"openMyTickets()\">\n <mat-icon>person</mat-icon>\n Meus atendimentos\n </button>\n \n <button\n mat-flat-button\n class=\"rb-help-panel__action-btn rb-help-panel__action-btn--primary\"\n [disabled]=\"!canUseChat\"\n [attr.title]=\"canUseChat ? null : chatBlockedTooltip\"\n (click)=\"openChat()\">\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__action-btn--primary:disabled{--mdc-filled-button-disabled-container-color: #E3E5E4;--mdc-filled-button-disabled-label-text-color: #7A7A7A;background-color:#e3e5e4;color:#7a7a7a;cursor:not-allowed}.rb-help-panel__action-btn--primary:disabled:hover{background-color:#e3e5e4}.rb-help-panel__overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;z-index:1040}\n"] }]
1550
1662
  }], propDecorators: { isOpen: [{
1551
1663
  type: Input
1552
1664
  }], panelTitle: [{
@@ -1555,6 +1667,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1555
1667
  type: Input
1556
1668
  }], integrationProvider: [{
1557
1669
  type: Input
1670
+ }], links: [{
1671
+ type: Input
1672
+ }], hasSupportAccess: [{
1673
+ type: Input
1674
+ }], chatBlockedTooltip: [{
1675
+ type: Input
1558
1676
  }], onClose: [{
1559
1677
  type: Output
1560
1678
  }], onClickKnowledgeBase: [{
@@ -1569,6 +1687,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1569
1687
  type: Output
1570
1688
  }] } });
1571
1689
 
1690
+ /**
1691
+ * Help Center consultado pelo CRM (ui/lib/BarraPrincipal/Controladores/AcoesZendesk.js).
1692
+ */
1693
+ const RB_ZENDESK_HELP_CENTER_URL = 'https://crmrubeus.zendesk.com';
1694
+ /**
1695
+ * Provedor de artigos do painel de ajuda apontando para o Help Center da Rubeus.
1696
+ *
1697
+ * Os dois endpoints são públicos e não exigem autenticação, como no CRM.
1698
+ * Em caso de falha a lista volta vazia, preservando o comportamento do
1699
+ * `errorGetArtigo` da barra atual — o painel não quebra por indisponibilidade
1700
+ * da central.
1701
+ */
1702
+ class RbZendeskHelpService {
1703
+ http = inject(HttpClient);
1704
+ /**
1705
+ * @param routeContext slug da rota atual, usado como label do artigo.
1706
+ * No CRM equivale a `DGlobal.acaoCliente.nomeURL.split('/')[0]`.
1707
+ */
1708
+ fetchInitialArticles(routeContext) {
1709
+ return this.http.get(`${RB_ZENDESK_HELP_CENTER_URL}/api/v2/help_center/pt-br/articles.json`, { params: { label_names: routeContext ?? '' } }).pipe(map(resposta => this.paraArtigos(resposta?.articles)), catchError(() => of([])));
1710
+ }
1711
+ searchArticles(query) {
1712
+ return this.http.get(`${RB_ZENDESK_HELP_CENTER_URL}/api/v2/help_center/articles/search.json`, { params: { query } }).pipe(map(resposta => this.paraArtigos(resposta?.results)), catchError(() => of([])));
1713
+ }
1714
+ paraArtigos(artigos) {
1715
+ return (artigos ?? []).map(artigo => ({
1716
+ id: artigo.id,
1717
+ title: artigo.title,
1718
+ url: artigo.html_url
1719
+ }));
1720
+ }
1721
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbZendeskHelpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1722
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbZendeskHelpService, providedIn: 'root' });
1723
+ }
1724
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbZendeskHelpService, decorators: [{
1725
+ type: Injectable,
1726
+ args: [{ providedIn: 'root' }]
1727
+ }] });
1728
+
1572
1729
  /*
1573
1730
  * Public API Surface of rb-angular-components
1574
1731
  */
@@ -1578,5 +1735,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1578
1735
  * Generated bundle index. Do not edit.
1579
1736
  */
1580
1737
 
1581
- export { IsArrayPipe, RbChangeLogDialogComponent, RbColumnsSortSettingComponent, RbConditionalClassPipe, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent, RbHeaderComponent, RbHelpPanelComponent, RbOverflowTooltipDirective, RbSidebarNavigationComponent };
1738
+ export { IsArrayPipe, RB_HELP_PANEL_DEFAULT_LINKS, RB_ZENDESK_HELP_CENTER_URL, RbChangeLogDialogComponent, RbColumnsSortSettingComponent, RbConditionalClassPipe, RbContentBoxComponent, RbCopyConfirmDialogComponent, RbCrudComponent, RbCrudToolBarComponent, RbCustomPipe, RbDialogComponent, RbDynamicButtonDirective, RbFilterDropdownComponent, RbFilterPanelComponent, RbHeaderComponent, RbHelpPanelComponent, RbOverflowTooltipDirective, RbSidebarNavigationComponent, RbZendeskHelpService };
1582
1739
  //# sourceMappingURL=rubeusteam-rb-angular-components.mjs.map