@fuentis/phoenix-ui 0.0.9-alpha.363 → 0.0.9-alpha.366

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -208,7 +208,6 @@ class SidebarItemComponent {
             severity="secondary"
             styleClass="w-full p-2"
             (click)="onSliderItemsClick({ type: 'CREATE' })"
-            [disabled]="true"
           />
         </ng-template>
       </p-menu>
@@ -338,7 +337,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             severity="secondary"
             styleClass="w-full p-2"
             (click)="onSliderItemsClick({ type: 'CREATE' })"
-            [disabled]="true"
           />
         </ng-template>
       </p-menu>
@@ -1151,7 +1149,7 @@ class TopbarComponent {
             : `url('assets/default-user.png')`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, 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 class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\">\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 [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      }\" severity=\"info\" [value]=\"shortModuleName\" />\n\n    <!-- <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n    <span class=\"text-xl text-400 mt-2\">\n      {{ shortModuleName }}\n    </span> -->\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 [tabs]=\"searchConfig()\"></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button data-cy=\"theme-switch-button\" (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\" variant=\"outlined\" />\n\n    <p-button data-cy=\"side-panel-togg-button\" data-cy=\"side-panel-togg-button\" (onClick)=\"op.toggle($event)\"\n      icon=\"pi pi-th-large\" variant=\"outlined\" />\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button data-cy=\"side-panel-togg-button\" data-cy=\"side-panel-togg-button\" (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-question-circle\" variant=\"outlined\" />\n\n    <!-- User Icon -->\n    <pho-user [user]=\"user\" (actionEmmiter)=\"onUserPopoverAction.emit($event)\" />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer styleClass=\"w-25rem\" position=\"right\" [(visible)]=\"isSidebarVisible\" [closable]=\"false\">\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 (onClick)=\"isSidebarVisible = false\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" />\n    </div>\n  </ng-template>\n  <div class=\"p-1\">\n    <div class=\"flex flex-wrap gap-4\">\n      <!-- first -->\n      <div class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 (onClick)=\"goToTicketCenter()\" [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n            variant=\"outlined\" size=\"small\" />\n        </div>\n      </div>\n\n      <!-- second -->\n      <div class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': extIncident?.disabled }\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"no-underline\" [href]=\"extIncident?.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <p-button [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\" variant=\"outlined\" size=\"small\"\n              icon=\"pi pi-copy\" (onClick)=\"copyToClipboard($event, extIncident?.url)\"\n              [disabled]=\"extIncident?.disabled\" />\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 class=\"\" [href]=\"footerConfig.guideUrl\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <span class=\"flex align-items-center\">\n            {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n            <span style=\"text-decoration: none\">\n              <i style=\"font-size: 15px\" class=\"pi pi-graduation-cap p-2 no-underline\"></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 *ngFor=\"let module of moduleGroup.items.slice(0, -1)\"\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            <a class=\"text-primary flex flex-column align-items-center gap-2\" [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\" [attr.data-cy]=\"'side-panel-menu-item-' + module.label\">\n              <div 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                <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>", 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$3.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: "component", type: i5.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5$1.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: i7$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, 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 class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\">\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 [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      }\" severity=\"info\" [value]=\"shortModuleName\" />\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 [tabs]=\"searchConfig()\"></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button data-cy=\"theme-switch-button\" (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\" variant=\"outlined\" />\n\n    <p-button data-cy=\"side-panel-togg-button\" data-cy=\"side-panel-togg-button\" (onClick)=\"op.toggle($event)\"\n      icon=\"pi pi-th-large\" variant=\"outlined\" />\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button data-cy=\"side-panel-togg-button\" data-cy=\"side-panel-togg-button\" (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-question-circle\" variant=\"outlined\" />\n\n    <!-- User Icon -->\n    <pho-user [user]=\"user\" (actionEmmiter)=\"onUserPopoverAction.emit($event)\" />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer styleClass=\"w-25rem\" position=\"right\" [(visible)]=\"isSidebarVisible\" [closable]=\"false\">\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 (onClick)=\"isSidebarVisible = false\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" />\n    </div>\n  </ng-template>\n  <div class=\"p-1\">\n    <div class=\"flex flex-wrap gap-4\">\n      <!-- first -->\n      <div class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 (onClick)=\"goToTicketCenter()\" [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n            variant=\"outlined\" size=\"small\" />\n        </div>\n      </div>\n\n      <!-- second -->\n      <div class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': extIncident?.disabled }\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"no-underline\" [href]=\"extIncident?.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <p-button [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\" variant=\"outlined\" size=\"small\"\n              icon=\"pi pi-copy\" (onClick)=\"copyToClipboard($event, extIncident?.url)\"\n              [disabled]=\"extIncident?.disabled\" />\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 class=\"\" [href]=\"footerConfig.guideUrl\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <span class=\"flex align-items-center\">\n            {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n            <span style=\"text-decoration: none\">\n              <i style=\"font-size: 15px\" class=\"pi pi-graduation-cap p-2 no-underline\"></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 *ngFor=\"let module of moduleGroup.items.slice(0, -1)\"\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            <a class=\"text-primary flex flex-column align-items-center gap-2\" [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\" [attr.data-cy]=\"'side-panel-menu-item-' + module.label\">\n              <div 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                <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>", 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$3.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: "component", type: i5.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5$1.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: i7$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
@@ -1170,7 +1168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         TagModule,
                         PopoverModule,
                         ToastModule,
-                    ], encapsulation: ViewEncapsulation.None, providers: [MessageService], template: "<div class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\">\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 [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      }\" severity=\"info\" [value]=\"shortModuleName\" />\n\n    <!-- <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n    <span class=\"text-xl text-400 mt-2\">\n      {{ shortModuleName }}\n    </span> -->\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 [tabs]=\"searchConfig()\"></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button data-cy=\"theme-switch-button\" (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\" variant=\"outlined\" />\n\n    <p-button data-cy=\"side-panel-togg-button\" data-cy=\"side-panel-togg-button\" (onClick)=\"op.toggle($event)\"\n      icon=\"pi pi-th-large\" variant=\"outlined\" />\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button data-cy=\"side-panel-togg-button\" data-cy=\"side-panel-togg-button\" (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-question-circle\" variant=\"outlined\" />\n\n    <!-- User Icon -->\n    <pho-user [user]=\"user\" (actionEmmiter)=\"onUserPopoverAction.emit($event)\" />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer styleClass=\"w-25rem\" position=\"right\" [(visible)]=\"isSidebarVisible\" [closable]=\"false\">\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 (onClick)=\"isSidebarVisible = false\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" />\n    </div>\n  </ng-template>\n  <div class=\"p-1\">\n    <div class=\"flex flex-wrap gap-4\">\n      <!-- first -->\n      <div class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 (onClick)=\"goToTicketCenter()\" [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n            variant=\"outlined\" size=\"small\" />\n        </div>\n      </div>\n\n      <!-- second -->\n      <div class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': extIncident?.disabled }\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"no-underline\" [href]=\"extIncident?.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <p-button [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\" variant=\"outlined\" size=\"small\"\n              icon=\"pi pi-copy\" (onClick)=\"copyToClipboard($event, extIncident?.url)\"\n              [disabled]=\"extIncident?.disabled\" />\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 class=\"\" [href]=\"footerConfig.guideUrl\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <span class=\"flex align-items-center\">\n            {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n            <span style=\"text-decoration: none\">\n              <i style=\"font-size: 15px\" class=\"pi pi-graduation-cap p-2 no-underline\"></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 *ngFor=\"let module of moduleGroup.items.slice(0, -1)\"\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            <a class=\"text-primary flex flex-column align-items-center gap-2\" [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\" [attr.data-cy]=\"'side-panel-menu-item-' + module.label\">\n              <div 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                <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>" }]
+                    ], encapsulation: ViewEncapsulation.None, providers: [MessageService], template: "<div class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\">\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 [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      }\" severity=\"info\" [value]=\"shortModuleName\" />\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 [tabs]=\"searchConfig()\"></pho-search-bar>\n\n    <!-- ToggleDarkmode -->\n    <p-button data-cy=\"theme-switch-button\" (onClick)=\"onDarkModeSelectEmit()\"\n      [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\" variant=\"outlined\" />\n\n    <p-button data-cy=\"side-panel-togg-button\" data-cy=\"side-panel-togg-button\" (onClick)=\"op.toggle($event)\"\n      icon=\"pi pi-th-large\" variant=\"outlined\" />\n    <!-- Side Panel (Opens Sidebar) -->\n    <p-button data-cy=\"side-panel-togg-button\" data-cy=\"side-panel-togg-button\" (onClick)=\"openSidebarPanel()\"\n      icon=\"pi pi-question-circle\" variant=\"outlined\" />\n\n    <!-- User Icon -->\n    <pho-user [user]=\"user\" (actionEmmiter)=\"onUserPopoverAction.emit($event)\" />\n  </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer styleClass=\"w-25rem\" position=\"right\" [(visible)]=\"isSidebarVisible\" [closable]=\"false\">\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 (onClick)=\"isSidebarVisible = false\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" />\n    </div>\n  </ng-template>\n  <div class=\"p-1\">\n    <div class=\"flex flex-wrap gap-4\">\n      <!-- first -->\n      <div class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 (onClick)=\"goToTicketCenter()\" [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n            variant=\"outlined\" size=\"small\" />\n        </div>\n      </div>\n\n      <!-- second -->\n      <div class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n        [ngClass]=\"{ 'opacity-30 pointer-events-none': extIncident?.disabled }\">\n        <div style=\"width: 30px; height: 30px\"\n          class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\">\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 class=\"no-underline\" [href]=\"extIncident?.url\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <p-button [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\" variant=\"outlined\" size=\"small\"\n              icon=\"pi pi-copy\" (onClick)=\"copyToClipboard($event, extIncident?.url)\"\n              [disabled]=\"extIncident?.disabled\" />\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 class=\"\" [href]=\"footerConfig.guideUrl\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <span class=\"flex align-items-center\">\n            {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n            <span style=\"text-decoration: none\">\n              <i style=\"font-size: 15px\" class=\"pi pi-graduation-cap p-2 no-underline\"></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 *ngFor=\"let module of moduleGroup.items.slice(0, -1)\"\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            <a class=\"text-primary flex flex-column align-items-center gap-2\" [href]=\"module.url || '#'\"\n              style=\"text-decoration: none; cursor: pointer\" [attr.data-cy]=\"'side-panel-menu-item-' + module.label\">\n              <div 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                <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>" }]
         }], propDecorators: { homeUrl: [{
                 type: Input
             }], user: [{
@@ -2206,6 +2204,7 @@ class TableCaptionComponent {
         if (!this.tableConfiguration || !this.columns)
             return;
         this.FILTER_KEY = `filters_${this.tableConfiguration.key}`;
+        console.log('Table key:', this.tableConfiguration.key, 'Filter key:', this.FILTER_KEY);
         this.initializeSelectedColumns();
         if (this.tableConfiguration.hasColumns) {
             this.COLUMN_KEY = `columns_${this.tableConfiguration.key}`;
@@ -2568,22 +2567,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 /**
- * @todo Add option to pass custom color to status tag ->
- *       modify response to match columnName + Color (e.g. actualRiskColor).
- * @todo Check DATE format consistency -> there is a cell-pipe for that.
- * @todo Add filter persistence in localStorage.
- * @todo Fix frozen columns behavior.
- *
- * @todo Unauthorized API population for multi-select filters:
- *  - Entities
- *  - Catalogs
- *  - Statuses
- *  - Responsibles
- *  - Types
- *  - CIA attributes
+ * Splits table actions into context-specific arrays (global, row, bulk, more).
+ * This controls where buttons will appear (toolbar, row menu, etc.).
  */
-/// Splits actions into context-specific arrays (global, row, bulk, more)
-/// This controls button positioning in the table toolbar and rows.
 function resolveActions(value) {
     const transformed = {
         globalActions: [],
@@ -2606,24 +2592,23 @@ function resolveActions(value) {
             case tableButtonContext.MORE:
                 transformed.moreActions.push(a);
                 break;
-            default:
-                break;
+            default: break;
         }
     });
-    // Default global filter enabled unless explicitly set
+    // Enable global filter by default (unless explicitly disabled)
     transformed.globalFilter =
         transformed.globalFilter === undefined ? true : transformed.globalFilter;
     return transformed;
 }
+/* ----------------------------- Helpers ----------------------------- */
 /**
- * Utility to safely access nested object properties (dot notation supported).
- * - If the field exists directly -> return it or its `key` prop.
- * - If dot notation -> traverse path until the end.
+ * Safely retrieves nested object property using dot notation.
+ * Example: "user.address.city" → row.user.address.city
  */
 function getNestedValue(obj, path) {
     try {
         if (obj && Object.prototype.hasOwnProperty.call(obj, path)) {
-            return obj[path]?.key || obj[path];
+            return obj[path]?.key ?? obj[path];
         }
         const keys = path.split('.');
         let current = obj;
@@ -2635,18 +2620,54 @@ function getNestedValue(obj, path) {
                 return undefined;
             }
         }
-        return current?.key || current;
+        return current?.key ?? current;
     }
     catch {
         return undefined;
     }
 }
 /**
- * Converts raw row values into display-friendly strings,
- * respecting column type (DATE, LIST, TAG, BOOLEAN, etc).
- * Used by both PDF and CSV export functions.
+ * Sanitizes text:
+ * - Removes HTML tags
+ * - Replaces &nbsp; and non-breaking spaces
+ * - Normalizes Unicode (keeps German umlauts and Serbian letters)
  */
-function getDisplayValue(row, col, columnTypeMap, columnTypeEnum) {
+function sanitizeText(v) {
+    const s = (v ?? '').toString();
+    const noHtml = s.replace(/<[^>]*>/g, '');
+    return noHtml
+        .replace(/&nbsp;/g, ' ')
+        .replace(/\u00A0/g, ' ')
+        .normalize('NFKC')
+        .trim();
+}
+/**
+ * Checks if a CSV value must be quoted (contains delimiter, quotes or newlines).
+ */
+function needsQuotesCSV(value, delimiter) {
+    const pattern = new RegExp(`[\"\\n${delimiter === ',' ? ',' : ';'}]`);
+    return pattern.test(value);
+}
+/**
+ * Formats a date value using Angular DatePipe and the provided locale.
+ */
+function formatDateValue(val, pattern, locale) {
+    try {
+        const d = new Date(val);
+        if (!isNaN(d.getTime())) {
+            const dp = new DatePipe(locale || 'en-US');
+            return dp.transform(d, pattern) ?? '';
+        }
+    }
+    catch { }
+    return String(val ?? '');
+}
+/* ------------------------- Display resolver ------------------------ */
+/**
+ * Converts raw row values into human-readable strings for export.
+ * Handles various column types: DATE, LIST, BOOLEAN, etc.
+ */
+function getDisplayValue(row, col, columnTypeMap, columnTypeEnum, t, locale = 'en-US') {
     const field = col.field;
     const type = columnTypeMap[field] || col.columnType;
     const val = getNestedValue(row, field);
@@ -2654,19 +2675,9 @@ function getDisplayValue(row, col, columnTypeMap, columnTypeEnum) {
         return '';
     switch (type) {
         case columnTypeEnum.DATE:
-        case columnTypeEnum.DATE_WITHOUT_TIME: {
-            try {
-                const d = new Date(val);
-                if (!isNaN(d.getTime())) {
-                    const dp = new DatePipe('en-US');
-                    return (dp.transform(d, type === columnTypeEnum.DATE_WITHOUT_TIME
-                        ? 'dd.MM.yyyy'
-                        : 'dd.MM.yyyy HH:mm') ?? '');
-                }
-            }
-            catch { }
-            return String(val);
-        }
+            return formatDateValue(val, 'dd.MM.yyyy HH:mm', locale);
+        case columnTypeEnum.DATE_WITHOUT_TIME:
+            return formatDateValue(val, 'dd.MM.yyyy', locale);
         case columnTypeEnum.TAG:
             return (val?.name ?? val)?.toString();
         case columnTypeEnum.LIST_TAG:
@@ -2676,8 +2687,12 @@ function getDisplayValue(row, col, columnTypeMap, columnTypeEnum) {
                 : String(val);
         case columnTypeEnum.OBJ_TAG:
             return (val?.value ?? val)?.toString();
-        case columnTypeEnum.BOOLEAN:
-            return (val === true || val === 'true') ? '✓' : '✗';
+        case columnTypeEnum.BOOLEAN: {
+            // Translate YES/NO if translation function is provided
+            const yes = t ? t('ACTION.YES') : 'Yes';
+            const no = t ? t('ACTION.NO') : 'No';
+            return (val === true || val === 'true') ? yes : no;
+        }
         case columnTypeEnum.TEXT_AREA:
         case columnTypeEnum.TEXT:
         case columnTypeEnum.TIMEPERIOD:
@@ -2691,15 +2706,17 @@ function getDisplayValue(row, col, columnTypeMap, columnTypeEnum) {
 }
 /**
  * Exports table rows to a PDF file.
- * - Uses only the currently visible columns.
- * - Translates headers via provided translation function.
- * - Uses jsPDF + autoTable for table rendering.
+ * - Uses jsPDF + autoTable
+ * - Respects only visible columns
+ * - Translates headers with provided translation function
  */
-function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileName = 'table.pdf') {
+function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileName = 'table.pdf', options = {}) {
     if (!columns?.length)
         return;
-    const head = [columns.map(c => t(c.header))];
-    const body = (rows ?? []).map(row => columns.map(col => getDisplayValue(row, col, columnTypeMap, columnTypeEnum)));
+    const locale = options.locale || 'en-US';
+    const head = [columns.map(c => sanitizeText(t(c.header)))];
+    const body = (rows ?? []).map(row => columns.map(col => sanitizeText(getDisplayValue(row, col, columnTypeMap, columnTypeEnum, t, locale))));
+    // jsPDF default font supports Latin-1 (English, German, Serbian Latin characters).
     const doc = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'A4' });
     autoTable(doc, {
         head,
@@ -2709,24 +2726,29 @@ function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileNa
     });
     doc.save(fileName);
 }
+/* -------------------------- Export: CSV ---------------------------- */
 /**
  * Exports table rows to a CSV file.
- * - Uses only the currently visible columns.
- * - Translates headers via provided translation function.
- * - Escapes values with quotes if they contain special characters.
+ * - Includes only visible columns
+ * - Translates headers via provided translation function
+ * - Escapes quotes and adds UTF-8 BOM (so Excel reads special chars correctly)
  */
-function exportRowsToCsv(columns, rows, columnTypeMap, columnTypeEnum, t, fileName = 'table.csv') {
+function exportRowsToCsv(columns, rows, columnTypeMap, columnTypeEnum, t, fileName = 'table.csv', options = {}) {
     if (!columns?.length)
         return;
-    const headers = columns.map(c => t(c.header));
+    const locale = options.locale || 'en-US';
+    const delimiter = options.delimiter || ',';
+    const headers = columns.map(c => sanitizeText(t(c.header)));
     const lines = (rows ?? []).map(row => columns.map(col => {
-        const v = getDisplayValue(row, col, columnTypeMap, columnTypeEnum);
-        const needsQuotes = /[",\n;]/.test(v);
-        const safe = v.replace(/"/g, '""');
-        return needsQuotes ? `"${safe}"` : safe;
-    }).join(','));
-    const csv = [headers.join(','), ...lines].join('\n');
-    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const raw = getDisplayValue(row, col, columnTypeMap, columnTypeEnum, t, locale);
+        const v = sanitizeText(raw);
+        const safe = v.replace(/"/g, '""'); // escape double quotes
+        return needsQuotesCSV(v, delimiter) ? `"${safe}"` : safe;
+    }).join(delimiter));
+    const csv = [headers.join(delimiter), ...lines].join('\n');
+    // Add UTF-8 BOM → Excel correctly recognizes UTF-8 (handles č, ć, š, đ, ž, ä, ö, ü, ß, etc.)
+    const BOM = '\uFEFF';
+    const blob = new Blob([BOM + csv], { type: 'text/csv;charset=utf-8;' });
     const a = document.createElement('a');
     const url = URL.createObjectURL(blob);
     a.href = url;
@@ -2736,6 +2758,20 @@ function exportRowsToCsv(columns, rows, columnTypeMap, columnTypeEnum, t, fileNa
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
 }
+/* --------------------------- File name ----------------------------- */
+/**
+ * Builds a file name with pattern: tableKey_YYYY-MM-DD_HH-mm.ext
+ * Example: risks_2025-09-10_14-32.csv
+ */
+function buildFileName(baseKey, ext) {
+    const now = new Date();
+    const yyyy = now.getFullYear();
+    const MM = String(now.getMonth() + 1).padStart(2, '0');
+    const dd = String(now.getDate()).padStart(2, '0');
+    const hh = String(now.getHours()).padStart(2, '0');
+    const mm = String(now.getMinutes()).padStart(2, '0');
+    return `${baseKey}_${yyyy}-${MM}-${dd}_${hh}-${mm}.${ext}`;
+}
 
 const DEFAULT_MORE_ACTIONS = {
     context: tableButtonContext.MORE,
@@ -3001,12 +3037,16 @@ class TableComponent {
     }
     handleActionClick(event) {
         if (event?.action?.key === 'EXPORT_PDF') {
-            const file = this.tableConfiguration?.key ? `${this.tableConfiguration.key}.pdf` : 'table.pdf';
+            const file = this.tableConfiguration?.key
+                ? buildFileName(this.tableConfiguration.key, 'pdf')
+                : buildFileName('table', 'pdf');
             exportRowsToPdf(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), file);
             return;
         }
         if (event?.action?.key === 'EXPORT_CSV') {
-            const file = this.tableConfiguration?.key ? `${this.tableConfiguration.key}.csv` : 'table.csv';
+            const file = this.tableConfiguration?.key
+                ? buildFileName(this.tableConfiguration.key, 'csv')
+                : buildFileName('table', 'csv');
             exportRowsToCsv(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), file);
             return;
         }