@fuentis/phoenix-ui 0.0.9-alpha.487 → 0.0.9-alpha.489

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -734,6 +734,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i4$1.HttpClient }] });
 
+function buildAssetDetailsUrl(baseUrl, assetGroupLabelKey, uuid) {
+    const groupSeg = ASSET_GROUP_TO_SEGMENT[assetGroupLabelKey];
+    const typeSeg = ASSET_TYPE_TO_SEGMENT[assetGroupLabelKey];
+    return `${baseUrl}/assets/assets/${groupSeg}/${typeSeg}/${uuid}/details`;
+}
+const ASSET_GROUP_TO_SEGMENT = {
+    // IT
+    GRP_IT_SYSTEM: 'it-assets',
+    GRP_STORAGE_SYSTEM: 'it-assets',
+    GRP_VIRTUALIZATION: 'it-assets',
+    GRP_NETWORK: 'it-assets',
+    GRP_NETWORK_DEVICE: 'it-assets',
+    GRP_SOFTWARE: 'it-assets',
+    GRP_VOLUME: 'it-assets',
+    // Facilities
+    GRP_LOCATION: 'facilities',
+    GRP_INFRASTRUCTURE: 'facilities',
+    GRP_ACCESS_CONTROL: 'facilities',
+    // Business context
+    GRP_BUSINESS_PROCESSES: 'business-context',
+    GRP_ORGANIZATION: 'business-context',
+    GRP_SUPPORT: 'business-context',
+};
+const ASSET_TYPE_TO_SEGMENT = {
+    // --- IT ASSETS ---
+    GRP_IT_SYSTEM: 'it-system',
+    GRP_STORAGE_SYSTEM: 'storage-system',
+    GRP_VIRTUALIZATION: 'virtualization',
+    GRP_NETWORK: 'network',
+    GRP_NETWORK_DEVICE: 'network-device',
+    GRP_SOFTWARE: 'software',
+    GRP_VOLUME: 'volume',
+    // --- FACILITIES ---
+    GRP_LOCATION: 'location',
+    GRP_INFRASTRUCTURE: 'infrastructure',
+    GRP_ACCESS_CONTROL: 'access-control',
+    // --- BUSINESS CONTEXT ---
+    GRP_ORGANIZATION: 'organization',
+    GRP_BUSINESS_PROCESSES: 'business-processes',
+    GRP_SUPPORT: 'support',
+};
+
 class SearchBarComponent {
     translate;
     set nes(nes) {
@@ -815,10 +857,21 @@ class SearchBarComponent {
             this.checkboxes = {};
         }
     }
-    setLinkUrl(url) {
+    setLinkUrl(data) {
         const baseUrl = this.tabs()?.[this.tabIndex]?.linkUrl;
-        if (url && baseUrl) {
-            window.open(baseUrl + url);
+        if (this.tabIndex !== 1) {
+            if (data?.url && baseUrl) {
+                window.open(baseUrl + data.url);
+            }
+        }
+        else {
+            if (!data.scopes) {
+                const url = `scoping/scopes/scope/${data.uuid}/details`;
+                window.open(baseUrl + url);
+            }
+            else {
+                window.open(buildAssetDetailsUrl(baseUrl, data.type.groupLabelKey, data.uuid));
+            }
         }
     }
     onScroll(scrollObj) {
@@ -917,7 +970,7 @@ class SearchBarComponent {
             this.reloadSubscription$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SearchBarComponent, deps: [{ token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nes", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div\n  (click)=\"onParentClick($event)\"\n  class=\"p-input-icon-left ml-1\"\n  #elm\n  [attr.data-cy]=\"'navigation-search-bar'\"\n>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [attr.data-cy]=\"'navigation-search-bar-input'\"\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"onParentClick($event); expand()\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n  styleClass=\"global-search\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    @if(inputText) {\n    <p-tabs [value]=\"tabIndex\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab\n          [value]=\"tab.id\"\n          (click)=\"onTabClick(tab.id)\"\n          [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n        >\n          <span>{{ tab.header }}</span>\n        </p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event.url)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels> </p-tabs\n    >}\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nes", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div\n  (click)=\"onParentClick($event)\"\n  class=\"p-input-icon-left ml-1\"\n  #elm\n  [attr.data-cy]=\"'navigation-search-bar'\"\n>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [attr.data-cy]=\"'navigation-search-bar-input'\"\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"onParentClick($event); expand()\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n  styleClass=\"global-search\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    @if(inputText) {\n    <p-tabs [value]=\"tabIndex\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab\n          [value]=\"tab.id\"\n          (click)=\"onTabClick(tab.id)\"\n          [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n        >\n          <span>{{ tab.header }}</span>\n        </p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels> </p-tabs\n    >}\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }], animations: [
             trigger('openClose', [
                 state('open', style({
                     width: '50vw',
@@ -955,7 +1008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                             })),
                             transition('* <=> *', [animate('0.1s ease-in-out')]),
                         ]),
-                    ], template: "<div\n  (click)=\"onParentClick($event)\"\n  class=\"p-input-icon-left ml-1\"\n  #elm\n  [attr.data-cy]=\"'navigation-search-bar'\"\n>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [attr.data-cy]=\"'navigation-search-bar-input'\"\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"onParentClick($event); expand()\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n  styleClass=\"global-search\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    @if(inputText) {\n    <p-tabs [value]=\"tabIndex\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab\n          [value]=\"tab.id\"\n          (click)=\"onTabClick(tab.id)\"\n          [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n        >\n          <span>{{ tab.header }}</span>\n        </p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event.url)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels> </p-tabs\n    >}\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"] }]
+                    ], template: "<div\n  (click)=\"onParentClick($event)\"\n  class=\"p-input-icon-left ml-1\"\n  #elm\n  [attr.data-cy]=\"'navigation-search-bar'\"\n>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [attr.data-cy]=\"'navigation-search-bar-input'\"\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"onParentClick($event); expand()\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n  styleClass=\"global-search\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGES.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    @if(inputText) {\n    <p-tabs [value]=\"tabIndex\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab\n          [value]=\"tab.id\"\n          (click)=\"onTabClick(tab.id)\"\n          [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n        >\n          <span>{{ tab.header }}</span>\n        </p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels> </p-tabs\n    >}\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.TranslateService }], propDecorators: { nes: [{
                 type: ViewChild,
                 args: ['op']
@@ -1224,7 +1277,7 @@ class TopbarComponent {
             : `url('assets/default-user.png')`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$4.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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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: i6$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$4.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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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: i6$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
@@ -1244,7 +1297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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=\"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" }]
         }], propDecorators: { homeUrl: [{
                 type: Input
             }], user: [{