@rubeusteam/rb-angular-components 0.0.2-dev.4 → 0.0.2-dev.6

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.
@@ -1267,11 +1267,11 @@ class RbSidebarNavigationComponent {
1267
1267
  }
1268
1268
  }
1269
1269
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbSidebarNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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 });
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 mat-icon-button class=\"rb-sidebar__toggle-btn\" (click)=\"toggleFixed()\" aria-label=\"Alternar menu lateral\"><i class=\"material-symbols-outlined rb-sidebar__toggle-icon\">{{ toggleIcon }}</i></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{--mat-icon-button-state-layer-color: var(--color-primary, #006A6A);--mat-icon-button-hover-state-layer-opacity: .08;display:inline-flex!important;align-items:center;justify-content:center;position:absolute!important;top:12px;left:12px;width:40px;height:40px;padding:0!important;color:var(--rb-sidebar-text-color, #555);transition:left .3s ease}.rb-sidebar__toggle-btn:disabled{opacity:.5;cursor:not-allowed}.rb-sidebar--open .rb-sidebar__toggle-btn{left:calc(100% - 52px)!important}.rb-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;line-height:24px;font-size:24px;text-align:center;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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: RbOverflowTooltipDirective, selector: "[rbOverflowTooltip]", inputs: ["rbOverflowTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
1271
1271
  }
1272
1272
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbSidebarNavigationComponent, decorators: [{
1273
1273
  type: Component,
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"] }]
1274
+ args: [{ selector: 'rb-sidebar-navigation', standalone: true, imports: [CommonModule, RouterModule, MatTooltipModule, MatButtonModule, 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 mat-icon-button class=\"rb-sidebar__toggle-btn\" (click)=\"toggleFixed()\" aria-label=\"Alternar menu lateral\"><i class=\"material-symbols-outlined rb-sidebar__toggle-icon\">{{ toggleIcon }}</i></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{--mat-icon-button-state-layer-color: var(--color-primary, #006A6A);--mat-icon-button-hover-state-layer-opacity: .08;display:inline-flex!important;align-items:center;justify-content:center;position:absolute!important;top:12px;left:12px;width:40px;height:40px;padding:0!important;color:var(--rb-sidebar-text-color, #555);transition:left .3s ease}.rb-sidebar__toggle-btn:disabled{opacity:.5;cursor:not-allowed}.rb-sidebar--open .rb-sidebar__toggle-btn{left:calc(100% - 52px)!important}.rb-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;line-height:24px;font-size:24px;text-align:center;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"] }]
1275
1275
  }], propDecorators: { logoUrl: [{
1276
1276
  type: Input
1277
1277
  }], logoTextUrl: [{
@@ -1329,6 +1329,14 @@ class RbHeaderComponent {
1329
1329
  showBaseSwitch = false;
1330
1330
  showCrmButton = false;
1331
1331
  showCrmApp = false;
1332
+ rubeusAccountUrl;
1333
+ set accountUrl(value) {
1334
+ this.rubeusAccountUrl = value;
1335
+ }
1336
+ get accountUrl() {
1337
+ return this.rubeusAccountUrl;
1338
+ }
1339
+ rubeusAccountTarget = '_blank';
1332
1340
  onHelpClick = new EventEmitter();
1333
1341
  onAppsClick = new EventEmitter();
1334
1342
  onViewAllAppsClick = new EventEmitter();
@@ -1423,27 +1431,38 @@ class RbHeaderComponent {
1423
1431
  this.onLogoutClick.emit();
1424
1432
  this.isProfileMenuOpen = false;
1425
1433
  }
1434
+ get isBaseSwitchEnabled() {
1435
+ return this.showBaseSwitch || !!this.rubeusAccountUrl;
1436
+ }
1426
1437
  handleAccountClick() {
1427
1438
  this.onAccountClick.emit();
1428
1439
  this.isProfileMenuOpen = false;
1429
1440
  }
1430
1441
  handleBaseRowClick() {
1431
- if (this.showBaseSwitch) {
1442
+ if (this.isBaseSwitchEnabled) {
1443
+ if (this.rubeusAccountUrl) {
1444
+ if (this.rubeusAccountTarget === '_self') {
1445
+ window.location.href = this.rubeusAccountUrl;
1446
+ }
1447
+ else {
1448
+ window.open(this.rubeusAccountUrl, this.rubeusAccountTarget);
1449
+ }
1450
+ }
1432
1451
  this.onSwitchBaseClick.emit();
1433
1452
  this.isProfileMenuOpen = false;
1434
1453
  }
1435
1454
  }
1436
1455
  handleGoToCrmClick(event) {
1437
- event.stopPropagation();
1456
+ event?.stopPropagation();
1438
1457
  this.onGoToCrmClick.emit();
1439
1458
  this.isProfileMenuOpen = false;
1440
1459
  }
1441
1460
  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 });
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"] }] });
1461
+ 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", rubeusAccountUrl: "rubeusAccountUrl", accountUrl: "accountUrl", rubeusAccountTarget: "rubeusAccountTarget" }, 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 || rubeusAccountUrl) {\n @if (isBaseSwitchEnabled) {\n <button\n type=\"button\"\n class=\"rb-header__profile-menu-item rb-header__profile-base-row\"\n (click)=\"handleBaseRowClick()\"\n [title]=\"userProfile.base\"\n >\n <span class=\"rb-header__profile-menu-label\">{{ userProfile?.base }}</span>\n <mat-icon class=\"rb-header__profile-base-icon\" aria-hidden=\"true\">swap_vert</mat-icon>\n </button>\n } @else {\n <div\n class=\"rb-header__profile-menu-item rb-header__profile-base-row rb-header__profile-menu-item--static\"\n >\n <span class=\"rb-header__profile-menu-label\">{{ userProfile?.base }}</span>\n </div>\n }\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 <button\n type=\"button\"\n class=\"rb-header__profile-menu-item\"\n (click)=\"handleProfileMenuItemClick(item)\"\n >\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 </button>\n }\n\n @if (profileMenu.length > 0) {\n <div class=\"rb-header__profile-menu-divider\"></div>\n }\n\n <!-- Default Logout Item -->\n <button\n type=\"button\"\n class=\"rb-header__profile-menu-item rb-header__profile-menu-item--logout\"\n (click)=\"handleLogoutClick()\"\n >\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 </button>\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;width:100%;padding:12px 16px;gap:12px;border:0;background:transparent;font:inherit;text-align:left;box-sizing:border-box;cursor:pointer;transition:background-color .2s}.rb-header__profile-menu-item:hover,.rb-header__profile-menu-item:focus-visible{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-base-row{justify-content:space-between}.rb-header__profile-base-icon,.rb-header__profile-crm-icon{font-size:18px;width:18px;height:18px;flex-shrink:0;color:var(--icon-neutral-secondary, #747878);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:color .2s}.rb-header__profile-base-row:not(.rb-header__profile-menu-item--static):hover .rb-header__profile-base-icon,.rb-header__profile-base-row:not(.rb-header__profile-menu-item--static):hover .rb-header__profile-crm-icon,.rb-header__profile-base-row:not(.rb-header__profile-menu-item--static):focus-visible .rb-header__profile-base-icon,.rb-header__profile-base-row:not(.rb-header__profile-menu-item--static):focus-visible .rb-header__profile-crm-icon{color:var(--color-primary, #006A6A)}.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"] }] });
1443
1462
  }
1444
1463
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHeaderComponent, decorators: [{
1445
1464
  type: Component,
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"] }]
1465
+ 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 || rubeusAccountUrl) {\n @if (isBaseSwitchEnabled) {\n <button\n type=\"button\"\n class=\"rb-header__profile-menu-item rb-header__profile-base-row\"\n (click)=\"handleBaseRowClick()\"\n [title]=\"userProfile.base\"\n >\n <span class=\"rb-header__profile-menu-label\">{{ userProfile?.base }}</span>\n <mat-icon class=\"rb-header__profile-base-icon\" aria-hidden=\"true\">swap_vert</mat-icon>\n </button>\n } @else {\n <div\n class=\"rb-header__profile-menu-item rb-header__profile-base-row rb-header__profile-menu-item--static\"\n >\n <span class=\"rb-header__profile-menu-label\">{{ userProfile?.base }}</span>\n </div>\n }\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 <button\n type=\"button\"\n class=\"rb-header__profile-menu-item\"\n (click)=\"handleProfileMenuItemClick(item)\"\n >\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 </button>\n }\n\n @if (profileMenu.length > 0) {\n <div class=\"rb-header__profile-menu-divider\"></div>\n }\n\n <!-- Default Logout Item -->\n <button\n type=\"button\"\n class=\"rb-header__profile-menu-item rb-header__profile-menu-item--logout\"\n (click)=\"handleLogoutClick()\"\n >\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 </button>\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;width:100%;padding:12px 16px;gap:12px;border:0;background:transparent;font:inherit;text-align:left;box-sizing:border-box;cursor:pointer;transition:background-color .2s}.rb-header__profile-menu-item:hover,.rb-header__profile-menu-item:focus-visible{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-base-row{justify-content:space-between}.rb-header__profile-base-icon,.rb-header__profile-crm-icon{font-size:18px;width:18px;height:18px;flex-shrink:0;color:var(--icon-neutral-secondary, #747878);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:color .2s}.rb-header__profile-base-row:not(.rb-header__profile-menu-item--static):hover .rb-header__profile-base-icon,.rb-header__profile-base-row:not(.rb-header__profile-menu-item--static):hover .rb-header__profile-crm-icon,.rb-header__profile-base-row:not(.rb-header__profile-menu-item--static):focus-visible .rb-header__profile-base-icon,.rb-header__profile-base-row:not(.rb-header__profile-menu-item--static):focus-visible .rb-header__profile-crm-icon{color:var(--color-primary, #006A6A)}.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"] }]
1447
1466
  }], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { pageTitle: [{
1448
1467
  type: Input
1449
1468
  }], userProfile: [{
@@ -1460,6 +1479,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
1460
1479
  type: Input
1461
1480
  }], showCrmApp: [{
1462
1481
  type: Input
1482
+ }], rubeusAccountUrl: [{
1483
+ type: Input
1484
+ }], accountUrl: [{
1485
+ type: Input
1486
+ }], rubeusAccountTarget: [{
1487
+ type: Input
1463
1488
  }], onHelpClick: [{
1464
1489
  type: Output
1465
1490
  }], onAppsClick: [{
@@ -1585,10 +1610,17 @@ class RbHelpPanelComponent {
1585
1610
  ngOnInit() {
1586
1611
  this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), switchMap(query => {
1587
1612
  this.isLoading = true;
1588
- if (query.trim() === '') {
1613
+ const termo = query.trim();
1614
+ if (termo === '') {
1589
1615
  return this.integrationProvider ? this.integrationProvider.fetchInitialArticles(this.routeContext) : [];
1590
1616
  }
1591
- return this.integrationProvider ? this.integrationProvider.searchArticles(query) : [];
1617
+ if (!this.integrationProvider) {
1618
+ return [];
1619
+ }
1620
+ // A busca do Zendesk é full-text (corpo, labels, etc.) e devolve artigos
1621
+ // que não citam o termo no título — filtramos aqui para que só apareça
1622
+ // o que de fato bate com o que a pessoa digitou.
1623
+ return this.integrationProvider.searchArticles(termo).pipe(map(resultados => this.filtrarPorTitulo(resultados, termo)));
1592
1624
  }), takeUntilDestroyed(this.destroyRef)).subscribe({
1593
1625
  next: (results) => {
1594
1626
  this.articles = results;
@@ -1663,12 +1695,16 @@ class RbHelpPanelComponent {
1663
1695
  window.open(url, '_blank', 'noopener');
1664
1696
  }
1665
1697
  }
1698
+ filtrarPorTitulo(artigos, termo) {
1699
+ const alvo = termo.toLocaleLowerCase();
1700
+ return artigos.filter(artigo => artigo.title?.toLocaleLowerCase().includes(alvo));
1701
+ }
1666
1702
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHelpPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1667
- 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", showKnowledgeBase: "showKnowledgeBase", showCommunity: "showCommunity", showNews: "showNews", showMyTickets: "showMyTickets", showChat: "showChat" }, 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 @if (showKnowledgeBase) {\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\n @if (showCommunity) {\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\n @if (showNews) {\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 }\n </div>\n\n <div class=\"rb-help-panel__footer-divider\"></div>\n\n <div class=\"rb-help-panel__actions\">\n @if (showMyTickets) {\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\n @if (showChat) {\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 }\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"] }] });
1703
+ 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", showKnowledgeBase: "showKnowledgeBase", showCommunity: "showCommunity", showNews: "showNews", showMyTickets: "showMyTickets", showChat: "showChat" }, 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 @if (searchQuery.trim()) {\n <p class=\"rb-help-panel__no-results-title\">Nenhum artigo encontrado para o termo \"{{ searchQuery }}\".</p>\n <p class=\"rb-help-panel__no-results-hint\">Experimente redefinir sua pesquisa.</p>\n } @else {\n Nenhum artigo encontrado.\n }\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 @if (showKnowledgeBase) {\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\n @if (showCommunity) {\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\n @if (showNews) {\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 }\n </div>\n\n <div class=\"rb-help-panel__footer-divider\"></div>\n\n <div class=\"rb-help-panel__actions\">\n @if (showMyTickets) {\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\n @if (showChat) {\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 }\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__no-results-title{margin:0 0 4px;font-weight:700}.rb-help-panel__no-results-hint{margin:0;font-weight:400}.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"] }] });
1668
1704
  }
1669
1705
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RbHelpPanelComponent, decorators: [{
1670
1706
  type: Component,
1671
- 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 @if (showKnowledgeBase) {\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\n @if (showCommunity) {\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\n @if (showNews) {\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 }\n </div>\n\n <div class=\"rb-help-panel__footer-divider\"></div>\n\n <div class=\"rb-help-panel__actions\">\n @if (showMyTickets) {\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\n @if (showChat) {\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 }\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"] }]
1707
+ 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 @if (searchQuery.trim()) {\n <p class=\"rb-help-panel__no-results-title\">Nenhum artigo encontrado para o termo \"{{ searchQuery }}\".</p>\n <p class=\"rb-help-panel__no-results-hint\">Experimente redefinir sua pesquisa.</p>\n } @else {\n Nenhum artigo encontrado.\n }\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 @if (showKnowledgeBase) {\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\n @if (showCommunity) {\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\n @if (showNews) {\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 }\n </div>\n\n <div class=\"rb-help-panel__footer-divider\"></div>\n\n <div class=\"rb-help-panel__actions\">\n @if (showMyTickets) {\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\n @if (showChat) {\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 }\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__no-results-title{margin:0 0 4px;font-weight:700}.rb-help-panel__no-results-hint{margin:0;font-weight:400}.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"] }]
1672
1708
  }], propDecorators: { isOpen: [{
1673
1709
  type: Input
1674
1710
  }], panelTitle: [{