@fuentis/phoenix-ui 0.0.9-alpha.455 → 0.0.9-alpha.458

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1318,7 +1318,7 @@ class StatusHeaderComponent {
         this.onCloseEvent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StatusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { type: "type", items: "items", name: "name", title: "title", tag: "tag", tags: "tags", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div class=\"flex justify-content-between\">\n  <div class=\"flex align-items-center pt-2 gap-2 w-full\">\n    @if (enableQuickPick) {\n    <phoenix-quick-pick\n      (onBack)=\"onToggleClick('back')\"\n      (onQuickPick)=\"toggleSidePanel()\"\n      (onForward)=\"onToggleClick('forward')\"\n    >\n    </phoenix-quick-pick>\n    }\n\n    <!-- NAME with tooltip and truncation -->\n    @if (name) {\n    <span\n      class=\"text-xl font-semibold\"\n      [pTooltip]=\"name.length > 40 ? name : undefined\"\n      [ngClass]=\"{ 'ml-3': !enableQuickPick && !type }\"\n    >\n      {{ name.length > 60 ? (name | slice : 0 : 60) + \"\u2026\" : name }}\n    </span>\n    }\n\n    <!-- TITLE with tooltip and truncation -->\n    @if (title) {\n    <span\n      class=\"text-base text-gray-500\"\n      [pTooltip]=\"title.length > 20 ? title : undefined\"\n    >\n      {{ title.length > 20 ? (title | slice : 0 : 20) + \"\u2026\" : title }}\n    </span>\n    }\n\n    <!-- Type goes here -->\n    @if (type) {\n    <p-tag\n      [value]=\"type?.text || 'wrong type'\"\n      [style]=\"{\n        border: '2px solid var(--surface-300)',\n        background: 'transparent',\n        color: 'var(--text-color)',\n        'font-size': '11px',\n        padding: '2px 4px',\n        width: 'fit-content',\n        'white-space': 'nowrap'\n      }\"\n    ></p-tag>\n    }\n  </div>\n\n  <div class=\"flex gap-1 align-items-center\">\n    @for (tag of tags; track $index) {\n    <p-tag\n      [value]=\"tag?.value || '--'\"\n      [severity]=\"tag.variant || 'info'\"\n      [icon]=\"tag?.icon || 'pi pi-check'\"\n      [style]=\"{\n        'font-size': '11px',\n        padding: '3px 8px',\n        width: 'fit-content',\n        'white-space': 'nowrap'\n      }\"\n      [ngStyle]=\"\n          tag?.color\n            ? {\n                'background-color': tag.color + '56',\n                color: tag.color,\n              }\n            : null\n        \"\n    ></p-tag>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "ngmodule", type: TranslateModule }, { 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"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { type: "type", items: "items", name: "name", title: "title", tag: "tag", tags: "tags", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div class=\"flex justify-content-between p-3\">\n  <div class=\"flex align-items-center gap-2 w-full\">\n    @if (enableQuickPick) {\n    <phoenix-quick-pick\n      (onBack)=\"onToggleClick('back')\"\n      (onQuickPick)=\"toggleSidePanel()\"\n      (onForward)=\"onToggleClick('forward')\"\n    >\n    </phoenix-quick-pick>\n    }\n\n    <!-- NAME with tooltip and truncation -->\n    @if (name) {\n    <span\n      class=\"text-xl font-semibold\"\n      [pTooltip]=\"name.length > 40 ? name : undefined\"\n      [ngClass]=\"{ 'ml-3': !enableQuickPick && !type }\"\n    >\n      {{ name.length > 60 ? (name | slice : 0 : 60) + \"\u2026\" : name }}\n    </span>\n    }\n\n    <!-- TITLE with tooltip and truncation -->\n    @if (title) {\n    <span\n      class=\"text-base text-gray-500\"\n      [pTooltip]=\"title.length > 20 ? title : undefined\"\n    >\n      {{ title.length > 20 ? (title | slice : 0 : 20) + \"\u2026\" : title }}\n    </span>\n    }\n\n    <!-- Type goes here -->\n    @if (type) {\n    <p-tag\n      [value]=\"type?.text || 'wrong type'\"\n      [style]=\"{\n        border: '2px solid var(--surface-300)',\n        background: 'transparent',\n        color: 'var(--text-color)',\n        'font-size': '11px',\n        padding: '2px 4px',\n        width: 'fit-content',\n        'white-space': 'nowrap'\n      }\"\n    ></p-tag>\n    }\n  </div>\n\n  <div class=\"flex gap-1 align-items-center\">\n    @for (tag of tags; track $index) {\n    <p-tag\n      [value]=\"tag?.value || '--'\"\n      [severity]=\"tag.variant || 'info'\"\n      [icon]=\"tag?.icon || 'pi pi-check'\"\n      [style]=\"{\n        'font-size': '11px',\n        padding: '3px 8px',\n        width: 'fit-content',\n        'white-space': 'nowrap'\n      }\"\n      [ngStyle]=\"\n          tag?.color\n            ? {\n                'background-color': tag.color + '36',\n                color: tag.color,\n              }\n            : null\n        \"\n    ></p-tag>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "ngmodule", type: TranslateModule }, { 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"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StatusHeaderComponent, decorators: [{
             type: Component,
@@ -1331,7 +1331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         TieredMenuModule,
                         QuickPickComponent,
                         TagModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex justify-content-between\">\n  <div class=\"flex align-items-center pt-2 gap-2 w-full\">\n    @if (enableQuickPick) {\n    <phoenix-quick-pick\n      (onBack)=\"onToggleClick('back')\"\n      (onQuickPick)=\"toggleSidePanel()\"\n      (onForward)=\"onToggleClick('forward')\"\n    >\n    </phoenix-quick-pick>\n    }\n\n    <!-- NAME with tooltip and truncation -->\n    @if (name) {\n    <span\n      class=\"text-xl font-semibold\"\n      [pTooltip]=\"name.length > 40 ? name : undefined\"\n      [ngClass]=\"{ 'ml-3': !enableQuickPick && !type }\"\n    >\n      {{ name.length > 60 ? (name | slice : 0 : 60) + \"\u2026\" : name }}\n    </span>\n    }\n\n    <!-- TITLE with tooltip and truncation -->\n    @if (title) {\n    <span\n      class=\"text-base text-gray-500\"\n      [pTooltip]=\"title.length > 20 ? title : undefined\"\n    >\n      {{ title.length > 20 ? (title | slice : 0 : 20) + \"\u2026\" : title }}\n    </span>\n    }\n\n    <!-- Type goes here -->\n    @if (type) {\n    <p-tag\n      [value]=\"type?.text || 'wrong type'\"\n      [style]=\"{\n        border: '2px solid var(--surface-300)',\n        background: 'transparent',\n        color: 'var(--text-color)',\n        'font-size': '11px',\n        padding: '2px 4px',\n        width: 'fit-content',\n        'white-space': 'nowrap'\n      }\"\n    ></p-tag>\n    }\n  </div>\n\n  <div class=\"flex gap-1 align-items-center\">\n    @for (tag of tags; track $index) {\n    <p-tag\n      [value]=\"tag?.value || '--'\"\n      [severity]=\"tag.variant || 'info'\"\n      [icon]=\"tag?.icon || 'pi pi-check'\"\n      [style]=\"{\n        'font-size': '11px',\n        padding: '3px 8px',\n        width: 'fit-content',\n        'white-space': 'nowrap'\n      }\"\n      [ngStyle]=\"\n          tag?.color\n            ? {\n                'background-color': tag.color + '56',\n                color: tag.color,\n              }\n            : null\n        \"\n    ></p-tag>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex justify-content-between p-3\">\n  <div class=\"flex align-items-center gap-2 w-full\">\n    @if (enableQuickPick) {\n    <phoenix-quick-pick\n      (onBack)=\"onToggleClick('back')\"\n      (onQuickPick)=\"toggleSidePanel()\"\n      (onForward)=\"onToggleClick('forward')\"\n    >\n    </phoenix-quick-pick>\n    }\n\n    <!-- NAME with tooltip and truncation -->\n    @if (name) {\n    <span\n      class=\"text-xl font-semibold\"\n      [pTooltip]=\"name.length > 40 ? name : undefined\"\n      [ngClass]=\"{ 'ml-3': !enableQuickPick && !type }\"\n    >\n      {{ name.length > 60 ? (name | slice : 0 : 60) + \"\u2026\" : name }}\n    </span>\n    }\n\n    <!-- TITLE with tooltip and truncation -->\n    @if (title) {\n    <span\n      class=\"text-base text-gray-500\"\n      [pTooltip]=\"title.length > 20 ? title : undefined\"\n    >\n      {{ title.length > 20 ? (title | slice : 0 : 20) + \"\u2026\" : title }}\n    </span>\n    }\n\n    <!-- Type goes here -->\n    @if (type) {\n    <p-tag\n      [value]=\"type?.text || 'wrong type'\"\n      [style]=\"{\n        border: '2px solid var(--surface-300)',\n        background: 'transparent',\n        color: 'var(--text-color)',\n        'font-size': '11px',\n        padding: '2px 4px',\n        width: 'fit-content',\n        'white-space': 'nowrap'\n      }\"\n    ></p-tag>\n    }\n  </div>\n\n  <div class=\"flex gap-1 align-items-center\">\n    @for (tag of tags; track $index) {\n    <p-tag\n      [value]=\"tag?.value || '--'\"\n      [severity]=\"tag.variant || 'info'\"\n      [icon]=\"tag?.icon || 'pi pi-check'\"\n      [style]=\"{\n        'font-size': '11px',\n        padding: '3px 8px',\n        width: 'fit-content',\n        'white-space': 'nowrap'\n      }\"\n      [ngStyle]=\"\n          tag?.color\n            ? {\n                'background-color': tag.color + '36',\n                color: tag.color,\n              }\n            : null\n        \"\n    ></p-tag>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
         }], propDecorators: { onQuickPickClickEmiter: [{
                 type: Output
             }], onToggleClickEmmiter: [{
@@ -1395,7 +1395,7 @@ class ContexObjectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContexObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2 w-full\">\n  @if (ctxBackRoute?.length) {\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-arrow-left\"\n    class=\"p-button-text ml-1\"\n    (click)=\"onBackClick()\"\n  ></button>\n  } @if (ctxType) {\n  <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n  } @if (ctxName) {\n  <span\n    class=\"text-xl font-semibold text-primary\"\n    [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n  >\n    {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n  </span>\n  } @if (ctxTitle) {\n  <span\n    class=\"text-base text-gray-500\"\n    [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n  >\n    {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n  </span>\n  } @if (ctxTags?.length) {\n  <div class=\"flex align-items-center gap-2 ml-3\">\n    @for (tag of ctxTags; track tag.text) {\n    <p-tag\n      [value]=\"tag.text\"\n      [severity]=\"tag.variant || 'info'\"\n      [icon]=\"tag.icon\"\n      [style]=\"{\n        'font-size': '11px',\n        'padding': '3px 8px',\n        'width': 'fit-content',\n      }\"\n      [ngStyle]=\"\n            tag.color\n              ? {\n                  'background-color': tag.color + '66',\n                  color: tag.color,\n                }\n              : null\n          \"\n    ></p-tag>\n    }\n  </div>\n  }\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TranslateModule }, { 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"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2 w-full\">\n  @if (ctxBackRoute?.length) {\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-arrow-left\"\n    class=\"p-button-text ml-1\"\n    (click)=\"onBackClick()\"\n  ></button>\n  } @if (ctxType) {\n  <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n  } @if (ctxName) {\n  <span\n    class=\"text-xl font-semibold text-primary\"\n    [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n  >\n    {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n  </span>\n  } @if (ctxTitle) {\n  <span\n    class=\"text-base text-gray-500\"\n    [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n  >\n    {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n  </span>\n  } @if (ctxTags?.length) {\n  <div class=\"flex align-items-center gap-2 ml-3\">\n    @for (tag of ctxTags; track tag.text) {\n    <p-tag\n      [value]=\"tag.text\"\n      [severity]=\"tag.variant || 'info'\"\n      [icon]=\"tag.icon\"\n      [style]=\"{\n        'font-size': '11px',\n        'padding': '3px 8px',\n        'width': 'fit-content',\n      }\"\n      [ngStyle]=\"\n            tag.color\n              ? {\n                  'background-color': tag.color + '36',\n                  color: tag.color,\n                }\n              : null\n          \"\n    ></p-tag>\n    }\n  </div>\n  }\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TranslateModule }, { 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"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContexObjectComponent, decorators: [{
             type: Component,
@@ -1405,7 +1405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         TranslateModule,
                         TooltipModule,
                         TagModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2 w-full\">\n  @if (ctxBackRoute?.length) {\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-arrow-left\"\n    class=\"p-button-text ml-1\"\n    (click)=\"onBackClick()\"\n  ></button>\n  } @if (ctxType) {\n  <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n  } @if (ctxName) {\n  <span\n    class=\"text-xl font-semibold text-primary\"\n    [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n  >\n    {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n  </span>\n  } @if (ctxTitle) {\n  <span\n    class=\"text-base text-gray-500\"\n    [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n  >\n    {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n  </span>\n  } @if (ctxTags?.length) {\n  <div class=\"flex align-items-center gap-2 ml-3\">\n    @for (tag of ctxTags; track tag.text) {\n    <p-tag\n      [value]=\"tag.text\"\n      [severity]=\"tag.variant || 'info'\"\n      [icon]=\"tag.icon\"\n      [style]=\"{\n        'font-size': '11px',\n        'padding': '3px 8px',\n        'width': 'fit-content',\n      }\"\n      [ngStyle]=\"\n            tag.color\n              ? {\n                  'background-color': tag.color + '66',\n                  color: tag.color,\n                }\n              : null\n          \"\n    ></p-tag>\n    }\n  </div>\n  }\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2 w-full\">\n  @if (ctxBackRoute?.length) {\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-arrow-left\"\n    class=\"p-button-text ml-1\"\n    (click)=\"onBackClick()\"\n  ></button>\n  } @if (ctxType) {\n  <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n  } @if (ctxName) {\n  <span\n    class=\"text-xl font-semibold text-primary\"\n    [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n  >\n    {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n  </span>\n  } @if (ctxTitle) {\n  <span\n    class=\"text-base text-gray-500\"\n    [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n  >\n    {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n  </span>\n  } @if (ctxTags?.length) {\n  <div class=\"flex align-items-center gap-2 ml-3\">\n    @for (tag of ctxTags; track tag.text) {\n    <p-tag\n      [value]=\"tag.text\"\n      [severity]=\"tag.variant || 'info'\"\n      [icon]=\"tag.icon\"\n      [style]=\"{\n        'font-size': '11px',\n        'padding': '3px 8px',\n        'width': 'fit-content',\n      }\"\n      [ngStyle]=\"\n            tag.color\n              ? {\n                  'background-color': tag.color + '36',\n                  color: tag.color,\n                }\n              : null\n          \"\n    ></p-tag>\n    }\n  </div>\n  }\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -7557,7 +7557,7 @@ class StatusAttributeDisplayComponent {
         return (attr?.value?.charAt(0) || '-').toUpperCase();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate)\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n      <i\n        [attr.data-cy]=\"'status-togg-button-item'\"\n        *ngIf=\"attr?.tooltip?.length\"\n        class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1\"\n        (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\"\n      >\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div\n      *ngIf=\"attr?.value; else empty\"\n      [ngSwitch]=\"attr.type\"\n      style=\"white-space: nowrap\"\n    >\n      <!-- STRING -->\n      <ng-container *ngSwitchCase=\"'STRING'\">\n        <!-- If URL exist, render as link -->\n        <a\n          *ngIf=\"attr.url; else plainText\"\n          [href]=\"attr.url\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          class=\"text-blue-500 underline\"\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength : 20 }}\n        </a>\n        <!-- Pnly text if url doesn't exist -->\n        <ng-template #plainText>\n          <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n            {{ attr.value | textLength : 20 }}\n          </span>\n        </ng-template>\n      </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        <i class=\"pi pi-calendar text-blue-900\"></i>\n        {{\n          attr.value\n            ? (attr.value | date : attr.dateFormat ?? dateFormat)\n            : \"--\"\n        }}\n      </span>\n\n      <!-- LINK -->\n      <a\n        *ngSwitchCase=\"'LINK'\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n      >\n        {{ attr.value || \"--\" }}\n      </a>\n\n      <!-- PERSON -->\n      <div\n        class=\"person-wrap flex align-items-center gap-2\"\n        *ngSwitchCase=\"'PERSON'\"\n      >\n        <div class=\"person-avatar\">\n          {{ getPersonInitial(attr) }}\n        </div>\n\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"getPersonTooltip(attr)\"\n        >\n          {{ getPersonDisplayName(attr) }}\n        </div>\n      </div>\n\n      <!-- COUNTRY -->\n      <span *ngSwitchCase=\"'COUNTRY'\">\n        <span class=\"flex align-items-center gap-2\">\n          <img\n            src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n            [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n            style=\"width: 22px\"\n          />\n          <span\n            [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n          >\n            {{ attr.value?.name || attr.value?.code || \"--\" }}\n          </span>\n        </span>\n      </span>\n\n      <!-- LIST -->\n      <ul\n        *ngSwitchCase=\"'LIST'\"\n        class=\"list overflow-x-hidden\"\n        style=\"margin-top: 0.25rem\"\n      >\n        <li\n          *ngFor=\"let item of attr.value\"\n          [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\"\n          (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n        >\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || \"--\" }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div\n    style=\"\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      column-gap: 1rem;\n      row-gap: 0.5rem;\n      align-items: start;\n      width: 100%;\n    \"\n  >\n    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a\n                *ngIf=\"item.value; else empty\"\n                [href]=\"getFullUrl(item.value)\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"text-blue-500 underline\"\n              >\n                {{ item.label || \"Open\" }}\n              </a>\n            </ng-container>\n\n            <!-- STRING type: renders text with truncation and tooltip if too long -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n              <div\n                *ngIf=\"item.value; else empty\"\n                class=\"text-sm\"\n                style=\"\n                  white-space: normal;\n                  word-break: break-word;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n            </ng-container>\n\n            <!-- DATE type: formatted date or fallback -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n              <span *ngIf=\"item.value; else empty\">\n                {{ item.value | date : dateFormat }}\n              </span>\n            </ng-container>\n\n            <!-- PERSON type: shows initial avatar and name if value exists -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n              <ng-container *ngIf=\"item.value; else empty\">\n                <span class=\"person-wrap flex items-center gap-1 truncate\">\n                  <div\n                    class=\"person-avatar small\"\n                    style=\"font-size: 0.875rem; line-height: 1\"\n                  >\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              </ng-container>\n            </ng-container>\n\n            <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"item.value; else empty\">\n                <phoenix-tag\n                  [customColor]=\"item.value1 || ''\"\n                  [content]=\"item.value\"\n                >\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n  <ng-container *ngFor=\"let item of attr?.tooltip\">\n    <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n      <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n        <div>\n          <!-- Label -->\n          <div\n            class=\"font-sm text-600 truncate mb-1\"\n            [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n          >\n            {{ item.label }}\n          </div>\n          <!-- Avatar and person name/date -->\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n            <div>\n              <div\n                class=\"text-blue-800 font-sm\"\n                style=\"\n                  word-break: break-word;\n                  white-space: normal;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n              <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { 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"] }, { 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: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate)\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n      <i\n        [attr.data-cy]=\"'status-togg-button-item'\"\n        *ngIf=\"attr?.tooltip?.length\"\n        class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1\"\n        (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\"\n      >\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div\n      *ngIf=\"attr?.value; else empty\"\n      [ngSwitch]=\"attr.type\"\n      style=\"white-space: nowrap\"\n    >\n      <!-- STRING -->\n      <ng-container *ngSwitchCase=\"'STRING'\">\n        <!-- If URL exist, render as link -->\n        <a\n          *ngIf=\"attr.url; else plainText\"\n          [href]=\"attr.url\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          class=\"text-blue-500 underline\"\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength : 20 }}\n        </a>\n        <!-- Pnly text if url doesn't exist -->\n        <ng-template #plainText>\n          <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n            {{ attr.value | textLength : 20 }}\n          </span>\n        </ng-template>\n      </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        <i class=\"pi pi-calendar text-blue-900\"></i>\n        {{\n          attr.value\n            ? (attr.value | date : attr.dateFormat ?? dateFormat)\n            : \"--\"\n        }}\n      </span>\n\n      <!-- LINK -->\n\n      <a\n        *ngSwitchCase=\"'LINK'\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n      >\n        {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n      </a>\n\n      <!-- PERSON -->\n      <div\n        class=\"person-wrap flex align-items-center gap-2\"\n        *ngSwitchCase=\"'PERSON'\"\n      >\n        <div class=\"person-avatar\">\n          {{ getPersonInitial(attr) }}\n        </div>\n\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"getPersonTooltip(attr)\"\n        >\n          {{ getPersonDisplayName(attr) }}\n        </div>\n      </div>\n\n      <!-- COUNTRY -->\n      <span *ngSwitchCase=\"'COUNTRY'\">\n        <span class=\"flex align-items-center gap-2\">\n          <img\n            src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n            [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n            style=\"width: 22px\"\n          />\n          <span\n            [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n          >\n            {{ attr.value?.name || attr.value?.code || \"--\" }}\n          </span>\n        </span>\n      </span>\n\n      <!-- LIST -->\n      <ul\n        *ngSwitchCase=\"'LIST'\"\n        class=\"list overflow-x-hidden\"\n        style=\"margin-top: 0.25rem\"\n      >\n        <li\n          *ngFor=\"let item of attr.value\"\n          [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\"\n          (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n        >\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || \"--\" }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div\n    style=\"\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      column-gap: 1rem;\n      row-gap: 0.5rem;\n      align-items: start;\n      width: 100%;\n    \"\n  >\n    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a\n                *ngIf=\"item.value; else empty\"\n                [href]=\"getFullUrl(item.value)\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"text-blue-500 underline\"\n              >\n                {{ item.label || \"Open\" }}\n              </a>\n            </ng-container>\n\n            <!-- STRING type: renders text with truncation and tooltip if too long -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n              <div\n                *ngIf=\"item.value; else empty\"\n                class=\"text-sm\"\n                style=\"\n                  white-space: normal;\n                  word-break: break-word;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n            </ng-container>\n\n            <!-- DATE type: formatted date or fallback -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n              <span *ngIf=\"item.value; else empty\">\n                {{ item.value | date : dateFormat }}\n              </span>\n            </ng-container>\n\n            <!-- PERSON type: shows initial avatar and name if value exists -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n              <ng-container *ngIf=\"item.value; else empty\">\n                <span class=\"person-wrap flex items-center gap-1 truncate\">\n                  <div\n                    class=\"person-avatar small\"\n                    style=\"font-size: 0.875rem; line-height: 1\"\n                  >\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              </ng-container>\n            </ng-container>\n\n            <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"item.value; else empty\">\n                <phoenix-tag\n                  [customColor]=\"item.value1 || ''\"\n                  [content]=\"item.value\"\n                >\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n  <ng-container *ngFor=\"let item of attr?.tooltip\">\n    <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n      <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n        <div>\n          <!-- Label -->\n          <div\n            class=\"font-sm text-600 truncate mb-1\"\n            [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n          >\n            {{ item.label }}\n          </div>\n          <!-- Avatar and person name/date -->\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n            <div>\n              <div\n                class=\"text-blue-800 font-sm\"\n                style=\"\n                  word-break: break-word;\n                  white-space: normal;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n              <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { 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"] }, { 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: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
             type: Component,
@@ -7569,7 +7569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         TranslateModule,
                         AvatarModule,
                         TextLength,
-                    ], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate)\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n      <i\n        [attr.data-cy]=\"'status-togg-button-item'\"\n        *ngIf=\"attr?.tooltip?.length\"\n        class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1\"\n        (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\"\n      >\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div\n      *ngIf=\"attr?.value; else empty\"\n      [ngSwitch]=\"attr.type\"\n      style=\"white-space: nowrap\"\n    >\n      <!-- STRING -->\n      <ng-container *ngSwitchCase=\"'STRING'\">\n        <!-- If URL exist, render as link -->\n        <a\n          *ngIf=\"attr.url; else plainText\"\n          [href]=\"attr.url\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          class=\"text-blue-500 underline\"\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength : 20 }}\n        </a>\n        <!-- Pnly text if url doesn't exist -->\n        <ng-template #plainText>\n          <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n            {{ attr.value | textLength : 20 }}\n          </span>\n        </ng-template>\n      </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        <i class=\"pi pi-calendar text-blue-900\"></i>\n        {{\n          attr.value\n            ? (attr.value | date : attr.dateFormat ?? dateFormat)\n            : \"--\"\n        }}\n      </span>\n\n      <!-- LINK -->\n      <a\n        *ngSwitchCase=\"'LINK'\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n      >\n        {{ attr.value || \"--\" }}\n      </a>\n\n      <!-- PERSON -->\n      <div\n        class=\"person-wrap flex align-items-center gap-2\"\n        *ngSwitchCase=\"'PERSON'\"\n      >\n        <div class=\"person-avatar\">\n          {{ getPersonInitial(attr) }}\n        </div>\n\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"getPersonTooltip(attr)\"\n        >\n          {{ getPersonDisplayName(attr) }}\n        </div>\n      </div>\n\n      <!-- COUNTRY -->\n      <span *ngSwitchCase=\"'COUNTRY'\">\n        <span class=\"flex align-items-center gap-2\">\n          <img\n            src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n            [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n            style=\"width: 22px\"\n          />\n          <span\n            [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n          >\n            {{ attr.value?.name || attr.value?.code || \"--\" }}\n          </span>\n        </span>\n      </span>\n\n      <!-- LIST -->\n      <ul\n        *ngSwitchCase=\"'LIST'\"\n        class=\"list overflow-x-hidden\"\n        style=\"margin-top: 0.25rem\"\n      >\n        <li\n          *ngFor=\"let item of attr.value\"\n          [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\"\n          (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n        >\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || \"--\" }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div\n    style=\"\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      column-gap: 1rem;\n      row-gap: 0.5rem;\n      align-items: start;\n      width: 100%;\n    \"\n  >\n    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a\n                *ngIf=\"item.value; else empty\"\n                [href]=\"getFullUrl(item.value)\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"text-blue-500 underline\"\n              >\n                {{ item.label || \"Open\" }}\n              </a>\n            </ng-container>\n\n            <!-- STRING type: renders text with truncation and tooltip if too long -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n              <div\n                *ngIf=\"item.value; else empty\"\n                class=\"text-sm\"\n                style=\"\n                  white-space: normal;\n                  word-break: break-word;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n            </ng-container>\n\n            <!-- DATE type: formatted date or fallback -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n              <span *ngIf=\"item.value; else empty\">\n                {{ item.value | date : dateFormat }}\n              </span>\n            </ng-container>\n\n            <!-- PERSON type: shows initial avatar and name if value exists -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n              <ng-container *ngIf=\"item.value; else empty\">\n                <span class=\"person-wrap flex items-center gap-1 truncate\">\n                  <div\n                    class=\"person-avatar small\"\n                    style=\"font-size: 0.875rem; line-height: 1\"\n                  >\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              </ng-container>\n            </ng-container>\n\n            <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"item.value; else empty\">\n                <phoenix-tag\n                  [customColor]=\"item.value1 || ''\"\n                  [content]=\"item.value\"\n                >\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n  <ng-container *ngFor=\"let item of attr?.tooltip\">\n    <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n      <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n        <div>\n          <!-- Label -->\n          <div\n            class=\"font-sm text-600 truncate mb-1\"\n            [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n          >\n            {{ item.label }}\n          </div>\n          <!-- Avatar and person name/date -->\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n            <div>\n              <div\n                class=\"text-blue-800 font-sm\"\n                style=\"\n                  word-break: break-word;\n                  white-space: normal;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n              <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
+                    ], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n  <div class=\"flex flex-column\">\n    <!-- LABEL + ICON -->\n    <div class=\"flex align-items-start gap-1\">\n      <label\n        class=\"font-semibold text-500\"\n        [ngClass]=\"{\n          'wrap-label': isMultiWordLabel(attr.label | translate),\n          'nowrap-label': !isMultiWordLabel(attr.label | translate)\n        }\"\n      >\n        {{ attr.label | translate }}\n      </label>\n      <i\n        [attr.data-cy]=\"'status-togg-button-item'\"\n        *ngIf=\"attr?.tooltip?.length\"\n        class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n        style=\"font-size: 0.875rem; line-height: 1\"\n        (mouseenter)=\"popover.toggle($event)\"\n        (mouseleave)=\"popover.toggle($event)\"\n      >\n      </i>\n    </div>\n\n    <!-- VALUE -->\n    <div\n      *ngIf=\"attr?.value; else empty\"\n      [ngSwitch]=\"attr.type\"\n      style=\"white-space: nowrap\"\n    >\n      <!-- STRING -->\n      <ng-container *ngSwitchCase=\"'STRING'\">\n        <!-- If URL exist, render as link -->\n        <a\n          *ngIf=\"attr.url; else plainText\"\n          [href]=\"attr.url\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          class=\"text-blue-500 underline\"\n          [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n        >\n          {{ attr.value | textLength : 20 }}\n        </a>\n        <!-- Pnly text if url doesn't exist -->\n        <ng-template #plainText>\n          <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n            {{ attr.value | textLength : 20 }}\n          </span>\n        </ng-template>\n      </ng-container>\n\n      <!-- DATE -->\n      <span *ngSwitchCase=\"'DATE'\">\n        <i class=\"pi pi-calendar text-blue-900\"></i>\n        {{\n          attr.value\n            ? (attr.value | date : attr.dateFormat ?? dateFormat)\n            : \"--\"\n        }}\n      </span>\n\n      <!-- LINK -->\n\n      <a\n        *ngSwitchCase=\"'LINK'\"\n        [href]=\"attr.url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"text-blue-500 underline\"\n      >\n        {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n      </a>\n\n      <!-- PERSON -->\n      <div\n        class=\"person-wrap flex align-items-center gap-2\"\n        *ngSwitchCase=\"'PERSON'\"\n      >\n        <div class=\"person-avatar\">\n          {{ getPersonInitial(attr) }}\n        </div>\n\n        <div\n          class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n          [pTooltip]=\"getPersonTooltip(attr)\"\n        >\n          {{ getPersonDisplayName(attr) }}\n        </div>\n      </div>\n\n      <!-- COUNTRY -->\n      <span *ngSwitchCase=\"'COUNTRY'\">\n        <span class=\"flex align-items-center gap-2\">\n          <img\n            src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n            [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n            style=\"width: 22px\"\n          />\n          <span\n            [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n          >\n            {{ attr.value?.name || attr.value?.code || \"--\" }}\n          </span>\n        </span>\n      </span>\n\n      <!-- LIST -->\n      <ul\n        *ngSwitchCase=\"'LIST'\"\n        class=\"list overflow-x-hidden\"\n        style=\"margin-top: 0.25rem\"\n      >\n        <li\n          *ngFor=\"let item of attr.value\"\n          [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n          class=\"white-space-nowrap mb-1 cursor-pointer\"\n          (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n        >\n          <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n            {{ item.name | textLength : 20 }}\n          </span>\n          <i class=\"pi pi-link ml-1 text-sm\"></i>\n        </li>\n      </ul>\n\n      <!-- DEFAULT -->\n      <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n        {{ attr.value || \"--\" }}\n      </span>\n    </div>\n\n    <ng-template #empty>\n      <span>--</span>\n    </ng-template>\n  </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n  <!-- GRID layout for all tooltip items except DATE_PERSON -->\n  <div\n    style=\"\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      column-gap: 1rem;\n      row-gap: 0.5rem;\n      align-items: start;\n      width: 100%;\n    \"\n  >\n    <ng-container *ngFor=\"let item of attr?.tooltip\">\n      <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n        <!-- Tooltip label -->\n        <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n        <!-- Tooltip value rendering -->\n        <div class=\"text-sm text-left break-words\">\n          <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n            <!-- LINK type: renders as a clickable hyperlink if value exists -->\n            <ng-container *ngSwitchCase=\"'LINK'\">\n              <a\n                *ngIf=\"item.value; else empty\"\n                [href]=\"getFullUrl(item.value)\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"text-blue-500 underline\"\n              >\n                {{ item.label || \"Open\" }}\n              </a>\n            </ng-container>\n\n            <!-- STRING type: renders text with truncation and tooltip if too long -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n              <div\n                *ngIf=\"item.value; else empty\"\n                class=\"text-sm\"\n                style=\"\n                  white-space: normal;\n                  word-break: break-word;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n            </ng-container>\n\n            <!-- DATE type: formatted date or fallback -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n              <span *ngIf=\"item.value; else empty\">\n                {{ item.value | date : dateFormat }}\n              </span>\n            </ng-container>\n\n            <!-- PERSON type: shows initial avatar and name if value exists -->\n            <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n              <ng-container *ngIf=\"item.value; else empty\">\n                <span class=\"person-wrap flex items-center gap-1 truncate\">\n                  <div\n                    class=\"person-avatar small\"\n                    style=\"font-size: 0.875rem; line-height: 1\"\n                  >\n                    {{ item?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <span class=\"truncate\">\n                    {{ item.value }} {{ item.value1 }}\n                  </span>\n                </span>\n              </ng-container>\n            </ng-container>\n\n            <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"item.value; else empty\">\n                <phoenix-tag\n                  [customColor]=\"item.value1 || ''\"\n                  [content]=\"item.value\"\n                >\n                </phoenix-tag>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n  <ng-container *ngFor=\"let item of attr?.tooltip\">\n    <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n      <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n        <div>\n          <!-- Label -->\n          <div\n            class=\"font-sm text-600 truncate mb-1\"\n            [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n          >\n            {{ item.label }}\n          </div>\n          <!-- Avatar and person name/date -->\n          <div class=\"flex items-center gap-2 person-wrap\">\n            <div class=\"person-avatar\">\n              {{ item?.value?.charAt(0)?.toUpperCase() }}\n            </div>\n            <div>\n              <div\n                class=\"text-blue-800 font-sm\"\n                style=\"\n                  word-break: break-word;\n                  white-space: normal;\n                  overflow-wrap: break-word;\n                \"\n              >\n                {{ item.value }}\n              </div>\n              <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- Fallback for empty DATE_PERSON -->\n      <ng-template #emptyDatePerson>\n        <div class=\"text-sm\">--</div>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Shared fallback for missing or empty values -->\n  <ng-template #empty>\n    <span>--</span>\n  </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
         }], propDecorators: { attr: [{
                 type: Input
             }], dateFormat: [{
@@ -7592,7 +7592,7 @@ class StatusBarComponent {
         width: 40,
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<!-- status-bar.component.html -->\n<div class=\"surface-ground mt-2\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper flex flex-nowrap overflow-x-auto gap-2\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <!-- <div class=\"description flex\" *ngIf=\"description\">\n      @if (statusBarConfig.icon) {\n      <div\n        class=\"type-icon flex justify-content-center align-items-center mr-3\"\n        [style.height]=\"iconStyle.height + 20 + 'px'\"\n        [style.width]=\"iconStyle.width + 20 + 'px'\"\n      >\n        <p-image\n          [src]=\"\n            'assets/object_types/white/' +\n            (statusBarConfig.icon || 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n      }\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span\n                *ngSwitchDefault\n                pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n              >\n                {{ attr.value | textLength : 20 }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div> -->\n    <div class=\"w-full flex justify-content-between\">\n      <phoenix-status-attribute-display\n        *ngFor=\"let attr of statusBarConfig.attributes\"\n        [attr]=\"attr\"\n        [dateFormat]=\"dateFormat\"\n        (listItemClick)=\"onListItemClick.emit($event)\"\n      ></phoenix-status-attribute-display>\n    </div>\n  </div>\n\n  <!-- <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div> -->\n</div>\n\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: StatusAttributeDisplayComponent, selector: "phoenix-status-attribute-display", inputs: ["attr", "dateFormat"], outputs: ["listItemClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<!-- status-bar.component.html -->\n<div class=\"surface-ground p-2 pt-0\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper flex flex-nowrap overflow-x-auto gap-2\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <!-- <div class=\"description flex\" *ngIf=\"description\">\n      @if (statusBarConfig.icon) {\n      <div\n        class=\"type-icon flex justify-content-center align-items-center mr-3\"\n        [style.height]=\"iconStyle.height + 20 + 'px'\"\n        [style.width]=\"iconStyle.width + 20 + 'px'\"\n      >\n        <p-image\n          [src]=\"\n            'assets/object_types/white/' +\n            (statusBarConfig.icon || 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n      }\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span\n                *ngSwitchDefault\n                pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n              >\n                {{ attr.value | textLength : 20 }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div> -->\n    <div class=\"w-full flex justify-content-between\">\n      <phoenix-status-attribute-display\n        *ngFor=\"let attr of statusBarConfig.attributes\"\n        [attr]=\"attr\"\n        [dateFormat]=\"dateFormat\"\n        (listItemClick)=\"onListItemClick.emit($event)\"\n      ></phoenix-status-attribute-display>\n    </div>\n  </div>\n\n  <!-- <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div> -->\n</div>\n\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: StatusAttributeDisplayComponent, selector: "phoenix-status-attribute-display", inputs: ["attr", "dateFormat"], outputs: ["listItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StatusBarComponent, decorators: [{
             type: Component,
@@ -7606,7 +7606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         TextLength,
                         ButtonModule,
                         StatusAttributeDisplayComponent,
-                    ], template: "<!-- status-bar.component.html -->\n<div class=\"surface-ground mt-2\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper flex flex-nowrap overflow-x-auto gap-2\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <!-- <div class=\"description flex\" *ngIf=\"description\">\n      @if (statusBarConfig.icon) {\n      <div\n        class=\"type-icon flex justify-content-center align-items-center mr-3\"\n        [style.height]=\"iconStyle.height + 20 + 'px'\"\n        [style.width]=\"iconStyle.width + 20 + 'px'\"\n      >\n        <p-image\n          [src]=\"\n            'assets/object_types/white/' +\n            (statusBarConfig.icon || 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n      }\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span\n                *ngSwitchDefault\n                pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n              >\n                {{ attr.value | textLength : 20 }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div> -->\n    <div class=\"w-full flex justify-content-between\">\n      <phoenix-status-attribute-display\n        *ngFor=\"let attr of statusBarConfig.attributes\"\n        [attr]=\"attr\"\n        [dateFormat]=\"dateFormat\"\n        (listItemClick)=\"onListItemClick.emit($event)\"\n      ></phoenix-status-attribute-display>\n    </div>\n  </div>\n\n  <!-- <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div> -->\n</div>\n\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
+                    ], template: "<!-- status-bar.component.html -->\n<div class=\"surface-ground p-2 pt-0\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper flex flex-nowrap overflow-x-auto gap-2\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <!-- <div class=\"description flex\" *ngIf=\"description\">\n      @if (statusBarConfig.icon) {\n      <div\n        class=\"type-icon flex justify-content-center align-items-center mr-3\"\n        [style.height]=\"iconStyle.height + 20 + 'px'\"\n        [style.width]=\"iconStyle.width + 20 + 'px'\"\n      >\n        <p-image\n          [src]=\"\n            'assets/object_types/white/' +\n            (statusBarConfig.icon || 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n      }\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span\n                *ngSwitchDefault\n                pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n              >\n                {{ attr.value | textLength : 20 }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div> -->\n    <div class=\"w-full flex justify-content-between\">\n      <phoenix-status-attribute-display\n        *ngFor=\"let attr of statusBarConfig.attributes\"\n        [attr]=\"attr\"\n        [dateFormat]=\"dateFormat\"\n        (listItemClick)=\"onListItemClick.emit($event)\"\n      ></phoenix-status-attribute-display>\n    </div>\n  </div>\n\n  <!-- <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div> -->\n</div>\n\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
         }], propDecorators: { statusBarConfig: [{
                 type: Input
             }], iconEnable: [{