@fuentis/phoenix-ui 0.0.9-alpha.559 → 0.0.9-alpha.560

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1483,6 +1483,34 @@ class ContexObjectComponent {
     get ctxTags() {
         return this.config?.tags ?? [];
     }
+    /**
+     * Groups tags by their `group` property.
+     * Ungrouped tags are returned as-is.
+     * Grouped tags collapse into one display entry showing the first tag + remaining count.
+     */
+    get displayTags() {
+        const tags = this.ctxTags;
+        const result = [];
+        const seenGroups = new Set();
+        for (const tag of tags) {
+            if (!tag.group) {
+                // Ungrouped tag — show as-is
+                result.push({ tag, groupedTags: [tag], remainingCount: 0 });
+            }
+            else if (!seenGroups.has(tag.group)) {
+                // First occurrence of this group
+                seenGroups.add(tag.group);
+                const allInGroup = tags.filter((t) => t.group === tag.group);
+                result.push({
+                    tag,
+                    groupedTags: allInGroup,
+                    remainingCount: allInGroup.length - 1,
+                });
+            }
+            // Subsequent tags of an already-seen group are skipped
+        }
+        return result;
+    }
     get ctxLabels() {
         return this.config?.labels ?? [];
     }
@@ -1504,7 +1532,7 @@ class ContexObjectComponent {
         return '/' + path.replace(/^\/+/, '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContexObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config", dateFormat: "dateFormat", dateOnlyFormat: "dateOnlyFormat" }, 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      [pTooltip]=\"tooltipContent\"\n      tooltipPosition=\"bottom\"\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    <ng-template #tooltipContent>\n      <div>\n        <span>{{ tag.label ? tag.label + \": \" : \"\" }}</span>\n        <span>{{ tag.text }} </span>\n      </div></ng-template\n    >\n    } @for (label of ctxLabels; track label.text) {\n    <span\n      [style]=\"{\n            'font-size': '11px',\n            padding: '3px 8px',\n            width: 'fit-content',\n          }\"\n    >\n      {{ label.text }}\n    </span>\n    }\n  </div>\n\n  }\n  <!-- Other Info items -->\n  <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n    <span\n      class=\"cursor-pointer ml-3\"\n      (mouseenter)=\"pop.toggle($event)\"\n      (mouseleave)=\"pop.toggle($event)\"\n    >\n      <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n      <span class=\"text-sm\">{{\n        attr.value | date : attr.dateFormat || dateOnlyFormat\n      }}</span>\n    </span>\n    <p-popover #pop [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                    <div class=\"flex gap-2\">\n                      <span> {{ item.value }} </span>\n                      <phoenix-tag\n                        [customColor]=\"item.value2 || ''\"\n                        [content]=\"item.value1 || ''\"\n                      >\n                      </phoenix-tag>\n                    </div>\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\">\n                    {{ item.value1 | date : dateFormat }}\n                  </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  </ng-container>\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}.person-wrap{display:flex;align-items:center;padding:0}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.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: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config", dateFormat: "dateFormat", dateOnlyFormat: "dateOnlyFormat" }, 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 (item of displayTags; track $index) {\n    <div class=\"tag-group-wrapper\">\n        <p-tag\n          [pTooltip]=\"item.remainingCount === 0 ? tagTooltipContent : undefined\"\n          tooltipPosition=\"bottom\"\n          [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n          [severity]=\"$any(item.tag.variant || 'info')\"\n          [icon]=\"item.tag.icon\"\n          [style]=\"{\n                'font-size': '11px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n              }\"\n          [ngStyle]=\"\n                item.tag.color\n                  ? {\n                      'background-color': item.tag.color + '36',\n                      color: item.tag.color,\n                    }\n                  : null\n              \"\n        ></p-tag>\n      <!-- Hover popup showing all tags in the group -->\n      @if (item.remainingCount > 0) {\n      <div class=\"tag-group-popup\">\n        @if (item.tag.label) {\n        <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n        }\n        <div class=\"flex flex-wrap gap-1\">\n          @for (gt of item.groupedTags; track $index) {\n          <p-tag\n            [value]=\"gt.text\"\n            [severity]=\"$any(gt.variant || 'info')\"\n            [icon]=\"gt.icon\"\n            [style]=\"{\n                  'font-size': '11px',\n                  padding: '3px 8px',\n                  width: 'fit-content',\n                }\"\n            [ngStyle]=\"\n                  gt.color\n                    ? {\n                        'background-color': gt.color + '36',\n                        color: gt.color,\n                      }\n                    : null\n                \"\n          ></p-tag>\n          }\n        </div>\n      </div>\n      }\n      <ng-template #tagTooltipContent>\n        <div>\n          <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n          <span>{{ item.tag.text }} </span>\n        </div>\n      </ng-template>\n    </div>\n    } @for (label of ctxLabels; track label.text) {\n    <span\n      [style]=\"{\n            'font-size': '11px',\n            padding: '3px 8px',\n            width: 'fit-content',\n          }\"\n    >\n      {{ label.text }}\n    </span>\n    }\n  </div>\n\n  }\n  <!-- Other Info items -->\n  <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n    <span\n      class=\"cursor-pointer ml-3\"\n      (mouseenter)=\"pop.toggle($event)\"\n      (mouseleave)=\"pop.toggle($event)\"\n    >\n      <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n      <span class=\"text-sm\">{{\n        attr.value | date : attr.dateFormat || dateOnlyFormat\n      }}</span>\n    </span>\n    <p-popover #pop [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                    <div class=\"flex gap-2\">\n                      <span> {{ item.value }} </span>\n                      <phoenix-tag\n                        [customColor]=\"item.value2 || ''\"\n                        [content]=\"item.value1 || ''\"\n                      >\n                      </phoenix-tag>\n                    </div>\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\">\n                    {{ item.value1 | date : dateFormat }}\n                  </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  </ng-container>\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}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-group-popup{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:1000;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:8px 10px;box-shadow:0 4px 12px #0000001f;min-width:120px;white-space:nowrap}.tag-group-wrapper .tag-group-popup .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.tag-group-wrapper:hover .tag-group-popup{display:block}.person-wrap{display:flex;align-items:center;padding:0}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.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: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContexObjectComponent, decorators: [{
             type: Component,
@@ -1517,7 +1545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AvatarModule,
                         PopoverModule,
                         TagComponent,
-                    ], 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      [pTooltip]=\"tooltipContent\"\n      tooltipPosition=\"bottom\"\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    <ng-template #tooltipContent>\n      <div>\n        <span>{{ tag.label ? tag.label + \": \" : \"\" }}</span>\n        <span>{{ tag.text }} </span>\n      </div></ng-template\n    >\n    } @for (label of ctxLabels; track label.text) {\n    <span\n      [style]=\"{\n            'font-size': '11px',\n            padding: '3px 8px',\n            width: 'fit-content',\n          }\"\n    >\n      {{ label.text }}\n    </span>\n    }\n  </div>\n\n  }\n  <!-- Other Info items -->\n  <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n    <span\n      class=\"cursor-pointer ml-3\"\n      (mouseenter)=\"pop.toggle($event)\"\n      (mouseleave)=\"pop.toggle($event)\"\n    >\n      <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n      <span class=\"text-sm\">{{\n        attr.value | date : attr.dateFormat || dateOnlyFormat\n      }}</span>\n    </span>\n    <p-popover #pop [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                    <div class=\"flex gap-2\">\n                      <span> {{ item.value }} </span>\n                      <phoenix-tag\n                        [customColor]=\"item.value2 || ''\"\n                        [content]=\"item.value1 || ''\"\n                      >\n                      </phoenix-tag>\n                    </div>\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\">\n                    {{ item.value1 | date : dateFormat }}\n                  </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  </ng-container>\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}.person-wrap{display:flex;align-items:center;padding:0}.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}\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 (item of displayTags; track $index) {\n    <div class=\"tag-group-wrapper\">\n        <p-tag\n          [pTooltip]=\"item.remainingCount === 0 ? tagTooltipContent : undefined\"\n          tooltipPosition=\"bottom\"\n          [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n          [severity]=\"$any(item.tag.variant || 'info')\"\n          [icon]=\"item.tag.icon\"\n          [style]=\"{\n                'font-size': '11px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n              }\"\n          [ngStyle]=\"\n                item.tag.color\n                  ? {\n                      'background-color': item.tag.color + '36',\n                      color: item.tag.color,\n                    }\n                  : null\n              \"\n        ></p-tag>\n      <!-- Hover popup showing all tags in the group -->\n      @if (item.remainingCount > 0) {\n      <div class=\"tag-group-popup\">\n        @if (item.tag.label) {\n        <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n        }\n        <div class=\"flex flex-wrap gap-1\">\n          @for (gt of item.groupedTags; track $index) {\n          <p-tag\n            [value]=\"gt.text\"\n            [severity]=\"$any(gt.variant || 'info')\"\n            [icon]=\"gt.icon\"\n            [style]=\"{\n                  'font-size': '11px',\n                  padding: '3px 8px',\n                  width: 'fit-content',\n                }\"\n            [ngStyle]=\"\n                  gt.color\n                    ? {\n                        'background-color': gt.color + '36',\n                        color: gt.color,\n                      }\n                    : null\n                \"\n          ></p-tag>\n          }\n        </div>\n      </div>\n      }\n      <ng-template #tagTooltipContent>\n        <div>\n          <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n          <span>{{ item.tag.text }} </span>\n        </div>\n      </ng-template>\n    </div>\n    } @for (label of ctxLabels; track label.text) {\n    <span\n      [style]=\"{\n            'font-size': '11px',\n            padding: '3px 8px',\n            width: 'fit-content',\n          }\"\n    >\n      {{ label.text }}\n    </span>\n    }\n  </div>\n\n  }\n  <!-- Other Info items -->\n  <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n    <span\n      class=\"cursor-pointer ml-3\"\n      (mouseenter)=\"pop.toggle($event)\"\n      (mouseleave)=\"pop.toggle($event)\"\n    >\n      <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n      <span class=\"text-sm\">{{\n        attr.value | date : attr.dateFormat || dateOnlyFormat\n      }}</span>\n    </span>\n    <p-popover #pop [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                    <div class=\"flex gap-2\">\n                      <span> {{ item.value }} </span>\n                      <phoenix-tag\n                        [customColor]=\"item.value2 || ''\"\n                        [content]=\"item.value1 || ''\"\n                      >\n                      </phoenix-tag>\n                    </div>\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\">\n                    {{ item.value1 | date : dateFormat }}\n                  </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  </ng-container>\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}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-group-popup{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:1000;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:8px 10px;box-shadow:0 4px 12px #0000001f;min-width:120px;white-space:nowrap}.tag-group-wrapper .tag-group-popup .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.tag-group-wrapper:hover .tag-group-popup{display:block}.person-wrap{display:flex;align-items:center;padding:0}.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}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], dateFormat: [{