@fuentis/phoenix-ui 0.0.9-alpha.621 → 0.0.9-alpha.622

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1188,6 +1188,7 @@ class TopbarComponent {
     topbarModulesMenu = [];
     darkModeSelector;
     urlConfig;
+    defaultIncidentUrl = 'https://fuentis.atlassian.net/servicedesk/customer/portal/1';
     footerConfig = {
         companyName: 'fuentis',
         companyUrl: 'https://fuentis.com/',
@@ -1219,6 +1220,9 @@ class TopbarComponent {
             window.location.href = this.homeUrl;
         }
     }
+    openIncidentReport() {
+        window.open(this.urlConfig?.url || this.defaultIncidentUrl, '_blank');
+    }
     goToTicketCenter() {
         window.open('https://fuentis.atlassian.net/servicedesk/customer/portal/1', '_blank');
     }
@@ -1244,7 +1248,7 @@ class TopbarComponent {
             : `url('assets/default-user.png')`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: { classPropertyName: "homeUrl", publicName: "homeUrl", isSignal: false, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, shortModuleName: { classPropertyName: "shortModuleName", publicName: "shortModuleName", isSignal: false, isRequired: false, transformFunction: null }, hidelogo: { classPropertyName: "hidelogo", publicName: "hidelogo", isSignal: false, isRequired: false, transformFunction: null }, topbarModulesMenu: { classPropertyName: "topbarModulesMenu", publicName: "topbarModulesMenu", isSignal: false, isRequired: false, transformFunction: null }, darkModeSelector: { classPropertyName: "darkModeSelector", publicName: "darkModeSelector", isSignal: false, isRequired: false, transformFunction: null }, urlConfig: { classPropertyName: "urlConfig", publicName: "urlConfig", isSignal: false, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: false, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, providers: [MessageService], ngImport: i0, template: "<div\n  class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n  <!-- Title -->\n  <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n    @if (!hidelogo) {\n    <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n    }\n    <!-- <p-tag\n      [style]=\"{\n        marginLeft: '5px',\n        marginBottom: '8px',\n        padding: '2px 6px',\n        fontSize: '9px',\n        border: '1px solid var(--text-color)',\n        background: 'transparent',\n        color: 'var(--text-color)'\n      }\"\n      severity=\"info\"\n      [value]=\"shortModuleName\"\n    /> -->\n  </div>\n  <!-- children -->\n  <ng-content></ng-content>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Search Bar -->\n    <pho-search-bar\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n      [tabs]=\"searchConfig()\"\n    ></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n      data-cy=\"theme-switch-button\"\n      (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n      variant=\"outlined\"\n    />\n\n    <p-button\n      data-cy=\"side-panel-togg-button\"\n      data-cy=\"side-panel-togg-button\"\n      (onClick)=\"op.toggle($event)\"\n      icon=\"pi pi-th-large\"\n      variant=\"outlined\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button\n      data-cy=\"side-panel-togg-button\"\n      data-cy=\"side-panel-togg-button\"\n      (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-question-circle\"\n      variant=\"outlined\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n\n    <!-- User Icon -->\n    <pho-user\n      [user]=\"user\"\n      (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-25rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <ng-template #header>\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <div class=\"flex\">\n        <span class=\"font-bold text-xl\">\n          {{ \"ACTION.HELP_CENTER\" | translate }}\n        </span>\n      </div>\n\n      <p-button\n        (onClick)=\"isSidebarVisible = false\"\n        icon=\"pi pi-times\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n      />\n    </div>\n  </ng-template>\n  <div class=\"p-1\">\n    <div class=\"flex flex-wrap gap-4\">\n      <!-- first -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <p-button\n            (onClick)=\"goToTicketCenter()\"\n            [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n            variant=\"outlined\"\n            size=\"small\"\n          />\n        </div>\n      </div>\n\n      <!-- second -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.CALL_US\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n        </div>\n      </div>\n\n      <!-- third -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <a href=\"mailto:support&#64;fuentis.com\">\n            {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n          </a>\n        </div>\n      </div>\n\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': urlConfig?.disabled }\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n\n        <div class=\"w-full flex align-items-center gap-2\">\n          <a\n            class=\"no-underline\"\n            [href]=\"urlConfig?.url || '#'\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            <p-button\n              [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\"\n              variant=\"outlined\"\n              size=\"small\"\n              icon=\"pi pi-copy\"\n              (onClick)=\"copyToClipboard($event, urlConfig?.url)\"\n              [disabled]=\"urlConfig?.disabled || !urlConfig?.url\"\n            />\n          </a>\n        </div>\n      </div>\n    </div>\n    <!-- External Incident Report card -->\n\n    <div class=\"mt-5 p-3\">\n      <h4 class=\"\">\n        {{ \"ACTION.BROWSE\" | translate }} <br />\n        <a\n          class=\"\"\n          [href]=\"footerConfig.guideUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n            <span style=\"text-decoration: none\">\n              <i\n                style=\"font-size: 15px\"\n                class=\"pi pi-graduation-cap p-2 no-underline\"\n              ></i>\n            </span>\n\n            <!-- <i\n            style=\"font-size: 11px\"\n            class=\"pi pi-external-link p-2 no-underline\"\n          ></i> -->\n          </span>\n        </a>\n      </h4>\n    </div>\n  </div>\n  <ng-template #footer>\n    <div class=\"text-xs text-center text-600\">\n      {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n    </div>\n  </ng-template>\n</p-drawer>\n\n<!-- <p-popover #op>\n  <div class=\"w-22rem\">\n    <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n      <div class=\"grid\">\n        <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n            [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n          >\n            <a\n              class=\"text-primary flex flex-column align-items-center gap-2\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n              [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n            >\n              <div\n                class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <span class=\"text-sm text-center\">{{\n                module.label | translate\n              }}</span>\n            </a>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</p-popover> -->\n<p-toast></p-toast>\n\n<!-- wait for restructure of the topbar modules menu -->\n<p-popover #op>\n  <div class=\"w-25rem\">\n    <ng-container *ngFor=\"let item of topbarModulesMenu\">\n      <div\n        class=\"p-0 m-0 hover:surface-100 cursor-pointer p-2\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': item?.disabled }\"\n      >\n        <a\n          class=\"text-primary flex align-items-center\"\n          [href]=\"item.url || '#'\"\n          style=\"text-decoration: none; cursor: pointer\"\n          [attr.data-cy]=\"'side-panel-menu-item-' + item.title\"\n        >\n          <div\n            class=\"w-3rem h-3rem border-round-md flex justify-content-center align-items-center border-200 border-1\"\n            style=\"margin-right: 10px\"\n          >\n            <img *ngIf=\"item.icon\" [src]=\"item.icon\" class=\"w-2rem\" />\n          </div>\n          <div class=\"\">\n            <div class=\"font-semibold\">\n              {{ item.title | translate }}\n            </div>\n            <div class=\"text-sm max-w-17rem text-600\">\n              {{ item.description | translate }}\n            </div>\n          </div>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</p-popover>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["tabs"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["actionEmmiter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i5$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: { classPropertyName: "homeUrl", publicName: "homeUrl", isSignal: false, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, shortModuleName: { classPropertyName: "shortModuleName", publicName: "shortModuleName", isSignal: false, isRequired: false, transformFunction: null }, hidelogo: { classPropertyName: "hidelogo", publicName: "hidelogo", isSignal: false, isRequired: false, transformFunction: null }, topbarModulesMenu: { classPropertyName: "topbarModulesMenu", publicName: "topbarModulesMenu", isSignal: false, isRequired: false, transformFunction: null }, darkModeSelector: { classPropertyName: "darkModeSelector", publicName: "darkModeSelector", isSignal: false, isRequired: false, transformFunction: null }, urlConfig: { classPropertyName: "urlConfig", publicName: "urlConfig", isSignal: false, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: false, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, providers: [MessageService], ngImport: i0, template: "<div\n  class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n  <!-- Title -->\n  <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n    @if (!hidelogo) {\n    <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n    }\n    <!-- <p-tag\n      [style]=\"{\n        marginLeft: '5px',\n        marginBottom: '8px',\n        padding: '2px 6px',\n        fontSize: '9px',\n        border: '1px solid var(--text-color)',\n        background: 'transparent',\n        color: 'var(--text-color)'\n      }\"\n      severity=\"info\"\n      [value]=\"shortModuleName\"\n    /> -->\n  </div>\n  <!-- children -->\n  <ng-content></ng-content>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Search Bar -->\n    <pho-search-bar\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n      [tabs]=\"searchConfig()\"\n    ></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n      data-cy=\"theme-switch-button\"\n      (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n      variant=\"outlined\"\n    />\n\n    <p-button\n      data-cy=\"side-panel-togg-button\"\n      data-cy=\"side-panel-togg-button\"\n      (onClick)=\"op.toggle($event)\"\n      icon=\"pi pi-th-large\"\n      variant=\"outlined\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button\n      data-cy=\"side-panel-togg-button\"\n      data-cy=\"side-panel-togg-button\"\n      (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-question-circle\"\n      variant=\"outlined\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n\n    <!-- User Icon -->\n    <pho-user\n      [user]=\"user\"\n      (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-25rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <ng-template #header>\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <div class=\"flex\">\n        <span class=\"font-bold text-xl\">\n          {{ \"ACTION.HELP_CENTER\" | translate }}\n        </span>\n      </div>\n\n      <p-button\n        (onClick)=\"isSidebarVisible = false\"\n        icon=\"pi pi-times\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n      />\n    </div>\n  </ng-template>\n  <div class=\"p-1\">\n    <div class=\"flex flex-wrap gap-4\">\n      <!-- first -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <p-button\n            (onClick)=\"goToTicketCenter()\"\n            [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n            variant=\"outlined\"\n            size=\"small\"\n          />\n        </div>\n      </div>\n\n      <!-- second -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.CALL_US\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n        </div>\n      </div>\n\n      <!-- third -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <a href=\"mailto:support&#64;fuentis.com\">\n            {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n          </a>\n        </div>\n      </div>\n\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': urlConfig?.disabled }\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n\n        <div class=\"pho-hover-link inline-flex align-items-center gap-2\">\n          <span\n            class=\"text-primary font-medium cursor-pointer\"\n            (click)=\"openIncidentReport()\"\n            >{{ \"HELP_CENTER.REPORT_INCIDENT_ACTION\" | translate }}</span\n          >\n          <i\n            class=\"pi pi-copy pho-hover-link__copy cursor-pointer text-sm\"\n            [pTooltip]=\"'TOASTER.COPY_LINK' | translate\"\n            tooltipPosition=\"top\"\n            (click)=\"copyToClipboard($event, urlConfig?.url || defaultIncidentUrl)\"\n          ></i>\n        </div>\n      </div>\n    </div>\n    <!-- External Incident Report card -->\n\n    <div class=\"mt-5 p-3\">\n      <h4 class=\"\">\n        {{ \"ACTION.BROWSE\" | translate }} <br />\n        <a\n          class=\"\"\n          [href]=\"footerConfig.guideUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n            <span style=\"text-decoration: none\">\n              <i\n                style=\"font-size: 15px\"\n                class=\"pi pi-graduation-cap p-2 no-underline\"\n              ></i>\n            </span>\n\n            <!-- <i\n            style=\"font-size: 11px\"\n            class=\"pi pi-external-link p-2 no-underline\"\n          ></i> -->\n          </span>\n        </a>\n      </h4>\n    </div>\n  </div>\n  <ng-template #footer>\n    <div class=\"text-xs text-center text-600\">\n      {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n    </div>\n  </ng-template>\n</p-drawer>\n\n<!-- <p-popover #op>\n  <div class=\"w-22rem\">\n    <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n      <div class=\"grid\">\n        <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n            [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n          >\n            <a\n              class=\"text-primary flex flex-column align-items-center gap-2\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n              [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n            >\n              <div\n                class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <span class=\"text-sm text-center\">{{\n                module.label | translate\n              }}</span>\n            </a>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</p-popover> -->\n<p-toast></p-toast>\n\n<!-- wait for restructure of the topbar modules menu -->\n<p-popover #op>\n  <div class=\"w-25rem\">\n    <ng-container *ngFor=\"let item of topbarModulesMenu\">\n      <div\n        class=\"p-0 m-0 hover:surface-100 cursor-pointer p-2\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': item?.disabled }\"\n      >\n        <a\n          class=\"text-primary flex align-items-center\"\n          [href]=\"item.url || '#'\"\n          style=\"text-decoration: none; cursor: pointer\"\n          [attr.data-cy]=\"'side-panel-menu-item-' + item.title\"\n        >\n          <div\n            class=\"w-3rem h-3rem border-round-md flex justify-content-center align-items-center border-200 border-1\"\n            style=\"margin-right: 10px\"\n          >\n            <img *ngIf=\"item.icon\" [src]=\"item.icon\" class=\"w-2rem\" />\n          </div>\n          <div class=\"\">\n            <div class=\"font-semibold\">\n              {{ item.title | translate }}\n            </div>\n            <div class=\"text-sm max-w-17rem text-600\">\n              {{ item.description | translate }}\n            </div>\n          </div>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</p-popover>\n", styles: [".pho-hover-link__copy{opacity:.4;transition:opacity .15s ease-in-out,transform .15s ease-in-out,color .15s ease-in-out}.pho-hover-link:hover .pho-hover-link__copy{opacity:1;color:var(--primary-color);transform:scale(1.15)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["tabs"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["actionEmmiter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i5$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
@@ -1264,7 +1268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         PopoverModule,
                         ToastModule,
                         TooltipModule,
-                    ], encapsulation: ViewEncapsulation.None, providers: [MessageService], template: "<div\n  class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n  <!-- Title -->\n  <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n    @if (!hidelogo) {\n    <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n    }\n    <!-- <p-tag\n      [style]=\"{\n        marginLeft: '5px',\n        marginBottom: '8px',\n        padding: '2px 6px',\n        fontSize: '9px',\n        border: '1px solid var(--text-color)',\n        background: 'transparent',\n        color: 'var(--text-color)'\n      }\"\n      severity=\"info\"\n      [value]=\"shortModuleName\"\n    /> -->\n  </div>\n  <!-- children -->\n  <ng-content></ng-content>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Search Bar -->\n    <pho-search-bar\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n      [tabs]=\"searchConfig()\"\n    ></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n      data-cy=\"theme-switch-button\"\n      (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n      variant=\"outlined\"\n    />\n\n    <p-button\n      data-cy=\"side-panel-togg-button\"\n      data-cy=\"side-panel-togg-button\"\n      (onClick)=\"op.toggle($event)\"\n      icon=\"pi pi-th-large\"\n      variant=\"outlined\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button\n      data-cy=\"side-panel-togg-button\"\n      data-cy=\"side-panel-togg-button\"\n      (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-question-circle\"\n      variant=\"outlined\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n\n    <!-- User Icon -->\n    <pho-user\n      [user]=\"user\"\n      (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-25rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <ng-template #header>\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <div class=\"flex\">\n        <span class=\"font-bold text-xl\">\n          {{ \"ACTION.HELP_CENTER\" | translate }}\n        </span>\n      </div>\n\n      <p-button\n        (onClick)=\"isSidebarVisible = false\"\n        icon=\"pi pi-times\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n      />\n    </div>\n  </ng-template>\n  <div class=\"p-1\">\n    <div class=\"flex flex-wrap gap-4\">\n      <!-- first -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <p-button\n            (onClick)=\"goToTicketCenter()\"\n            [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n            variant=\"outlined\"\n            size=\"small\"\n          />\n        </div>\n      </div>\n\n      <!-- second -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.CALL_US\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n        </div>\n      </div>\n\n      <!-- third -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <a href=\"mailto:support&#64;fuentis.com\">\n            {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n          </a>\n        </div>\n      </div>\n\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': urlConfig?.disabled }\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n\n        <div class=\"w-full flex align-items-center gap-2\">\n          <a\n            class=\"no-underline\"\n            [href]=\"urlConfig?.url || '#'\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            <p-button\n              [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\"\n              variant=\"outlined\"\n              size=\"small\"\n              icon=\"pi pi-copy\"\n              (onClick)=\"copyToClipboard($event, urlConfig?.url)\"\n              [disabled]=\"urlConfig?.disabled || !urlConfig?.url\"\n            />\n          </a>\n        </div>\n      </div>\n    </div>\n    <!-- External Incident Report card -->\n\n    <div class=\"mt-5 p-3\">\n      <h4 class=\"\">\n        {{ \"ACTION.BROWSE\" | translate }} <br />\n        <a\n          class=\"\"\n          [href]=\"footerConfig.guideUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n            <span style=\"text-decoration: none\">\n              <i\n                style=\"font-size: 15px\"\n                class=\"pi pi-graduation-cap p-2 no-underline\"\n              ></i>\n            </span>\n\n            <!-- <i\n            style=\"font-size: 11px\"\n            class=\"pi pi-external-link p-2 no-underline\"\n          ></i> -->\n          </span>\n        </a>\n      </h4>\n    </div>\n  </div>\n  <ng-template #footer>\n    <div class=\"text-xs text-center text-600\">\n      {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n    </div>\n  </ng-template>\n</p-drawer>\n\n<!-- <p-popover #op>\n  <div class=\"w-22rem\">\n    <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n      <div class=\"grid\">\n        <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n            [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n          >\n            <a\n              class=\"text-primary flex flex-column align-items-center gap-2\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n              [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n            >\n              <div\n                class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <span class=\"text-sm text-center\">{{\n                module.label | translate\n              }}</span>\n            </a>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</p-popover> -->\n<p-toast></p-toast>\n\n<!-- wait for restructure of the topbar modules menu -->\n<p-popover #op>\n  <div class=\"w-25rem\">\n    <ng-container *ngFor=\"let item of topbarModulesMenu\">\n      <div\n        class=\"p-0 m-0 hover:surface-100 cursor-pointer p-2\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': item?.disabled }\"\n      >\n        <a\n          class=\"text-primary flex align-items-center\"\n          [href]=\"item.url || '#'\"\n          style=\"text-decoration: none; cursor: pointer\"\n          [attr.data-cy]=\"'side-panel-menu-item-' + item.title\"\n        >\n          <div\n            class=\"w-3rem h-3rem border-round-md flex justify-content-center align-items-center border-200 border-1\"\n            style=\"margin-right: 10px\"\n          >\n            <img *ngIf=\"item.icon\" [src]=\"item.icon\" class=\"w-2rem\" />\n          </div>\n          <div class=\"\">\n            <div class=\"font-semibold\">\n              {{ item.title | translate }}\n            </div>\n            <div class=\"text-sm max-w-17rem text-600\">\n              {{ item.description | translate }}\n            </div>\n          </div>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</p-popover>\n" }]
+                    ], encapsulation: ViewEncapsulation.None, providers: [MessageService], template: "<div\n  class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n  <!-- Title -->\n  <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n    @if (!hidelogo) {\n    <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n    }\n    <!-- <p-tag\n      [style]=\"{\n        marginLeft: '5px',\n        marginBottom: '8px',\n        padding: '2px 6px',\n        fontSize: '9px',\n        border: '1px solid var(--text-color)',\n        background: 'transparent',\n        color: 'var(--text-color)'\n      }\"\n      severity=\"info\"\n      [value]=\"shortModuleName\"\n    /> -->\n  </div>\n  <!-- children -->\n  <ng-content></ng-content>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Search Bar -->\n    <pho-search-bar\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n      [tabs]=\"searchConfig()\"\n    ></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n      data-cy=\"theme-switch-button\"\n      (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n      variant=\"outlined\"\n    />\n\n    <p-button\n      data-cy=\"side-panel-togg-button\"\n      data-cy=\"side-panel-togg-button\"\n      (onClick)=\"op.toggle($event)\"\n      icon=\"pi pi-th-large\"\n      variant=\"outlined\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button\n      data-cy=\"side-panel-togg-button\"\n      data-cy=\"side-panel-togg-button\"\n      (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-question-circle\"\n      variant=\"outlined\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n\n    <!-- User Icon -->\n    <pho-user\n      [user]=\"user\"\n      (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n      [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n      tooltipPosition=\"bottom\"\n      showDelay=\"500\"\n    />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n  styleClass=\"w-25rem\"\n  position=\"right\"\n  [(visible)]=\"isSidebarVisible\"\n  [closable]=\"false\"\n>\n  <ng-template #header>\n    <div class=\"flex align-items-center justify-content-between w-full\">\n      <div class=\"flex\">\n        <span class=\"font-bold text-xl\">\n          {{ \"ACTION.HELP_CENTER\" | translate }}\n        </span>\n      </div>\n\n      <p-button\n        (onClick)=\"isSidebarVisible = false\"\n        icon=\"pi pi-times\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n      />\n    </div>\n  </ng-template>\n  <div class=\"p-1\">\n    <div class=\"flex flex-wrap gap-4\">\n      <!-- first -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <p-button\n            (onClick)=\"goToTicketCenter()\"\n            [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n            variant=\"outlined\"\n            size=\"small\"\n          />\n        </div>\n      </div>\n\n      <!-- second -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.CALL_US\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n        </div>\n      </div>\n\n      <!-- third -->\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <a href=\"mailto:support&#64;fuentis.com\">\n            {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n          </a>\n        </div>\n      </div>\n\n      <div\n        class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': urlConfig?.disabled }\"\n      >\n        <div\n          style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n        >\n          <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n        </div>\n\n        <div>\n          <div class=\"text-xl font-semibold mb-1\">\n            {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n          </div>\n          <div class=\"text-sm mb-2\">\n            {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n          </div>\n        </div>\n\n        <div class=\"pho-hover-link inline-flex align-items-center gap-2\">\n          <span\n            class=\"text-primary font-medium cursor-pointer\"\n            (click)=\"openIncidentReport()\"\n            >{{ \"HELP_CENTER.REPORT_INCIDENT_ACTION\" | translate }}</span\n          >\n          <i\n            class=\"pi pi-copy pho-hover-link__copy cursor-pointer text-sm\"\n            [pTooltip]=\"'TOASTER.COPY_LINK' | translate\"\n            tooltipPosition=\"top\"\n            (click)=\"copyToClipboard($event, urlConfig?.url || defaultIncidentUrl)\"\n          ></i>\n        </div>\n      </div>\n    </div>\n    <!-- External Incident Report card -->\n\n    <div class=\"mt-5 p-3\">\n      <h4 class=\"\">\n        {{ \"ACTION.BROWSE\" | translate }} <br />\n        <a\n          class=\"\"\n          [href]=\"footerConfig.guideUrl\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          <span class=\"flex align-items-center\">\n            {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n            <span style=\"text-decoration: none\">\n              <i\n                style=\"font-size: 15px\"\n                class=\"pi pi-graduation-cap p-2 no-underline\"\n              ></i>\n            </span>\n\n            <!-- <i\n            style=\"font-size: 11px\"\n            class=\"pi pi-external-link p-2 no-underline\"\n          ></i> -->\n          </span>\n        </a>\n      </h4>\n    </div>\n  </div>\n  <ng-template #footer>\n    <div class=\"text-xs text-center text-600\">\n      {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n    </div>\n  </ng-template>\n</p-drawer>\n\n<!-- <p-popover #op>\n  <div class=\"w-22rem\">\n    <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n      <div class=\"grid\">\n        <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n          <div\n            *ngFor=\"let module of moduleGroup.items\"\n            class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n            [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n          >\n            <a\n              class=\"text-primary flex flex-column align-items-center gap-2\"\n              [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\"\n              [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n            >\n              <div\n                class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n                [style.backgroundColor]=\"\n                  moduleGroup.showIconBackground\n                    ? module.disabled\n                      ? '#ccc'\n                      : '#e74360'\n                    : 'transparent'\n                \"\n              >\n                <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n              </div>\n              <span class=\"text-sm text-center\">{{\n                module.label | translate\n              }}</span>\n            </a>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</p-popover> -->\n<p-toast></p-toast>\n\n<!-- wait for restructure of the topbar modules menu -->\n<p-popover #op>\n  <div class=\"w-25rem\">\n    <ng-container *ngFor=\"let item of topbarModulesMenu\">\n      <div\n        class=\"p-0 m-0 hover:surface-100 cursor-pointer p-2\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': item?.disabled }\"\n      >\n        <a\n          class=\"text-primary flex align-items-center\"\n          [href]=\"item.url || '#'\"\n          style=\"text-decoration: none; cursor: pointer\"\n          [attr.data-cy]=\"'side-panel-menu-item-' + item.title\"\n        >\n          <div\n            class=\"w-3rem h-3rem border-round-md flex justify-content-center align-items-center border-200 border-1\"\n            style=\"margin-right: 10px\"\n          >\n            <img *ngIf=\"item.icon\" [src]=\"item.icon\" class=\"w-2rem\" />\n          </div>\n          <div class=\"\">\n            <div class=\"font-semibold\">\n              {{ item.title | translate }}\n            </div>\n            <div class=\"text-sm max-w-17rem text-600\">\n              {{ item.description | translate }}\n            </div>\n          </div>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</p-popover>\n", styles: [".pho-hover-link__copy{opacity:.4;transition:opacity .15s ease-in-out,transform .15s ease-in-out,color .15s ease-in-out}.pho-hover-link:hover .pho-hover-link__copy{opacity:1;color:var(--primary-color);transform:scale(1.15)}\n"] }]
         }], propDecorators: { homeUrl: [{
                 type: Input
             }], user: [{