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

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: [{
@@ -3610,7 +3638,7 @@ class TableComponent {
         navigator.clipboard.writeText(text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [filters]=\"filters\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  ></table-caption>\n  } @else {\n  <div\n    style=\"min-height: 40px; padding: 8px\"\n    class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n  >\n    <div>\n      @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n      <span>\n        {{ selectedItems().length }}\n        {{\n          selectedItems().length === 1\n            ? (\"LABELS.ITEM_SELECTED\" | translate)\n            : (\"LABELS.ITEMS_SELECTED\" | translate)\n        }}\n      </span>\n      }\n    </div>\n\n    <div>\n      @for (action of tableConfiguration.bulkActions; track action?.key ??\n      $index) {\n      <phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"\n          handleActionClick({\n            action: action,\n            selectedItems: selectedItems()\n          });\n          clearSelection()\n        \"\n      ></phoenix-data-table-action>\n      }\n\n      <button\n        [attr.data-cy]=\"'clear-selection-button'\"\n        class=\"p-button p-button-text p-button-plain\"\n        (click)=\"clearSelection()\"\n        aria-label=\"Clear Selection\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  </div>\n  }\n  <div\n    class=\"table-host\"\n    [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [lazy]=\"true\"\n      [rowSelectable]=\"isRowSelectable\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"loadLazyData($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [sortMode]=\"'multiple'\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) { @case\n          (selectionTypeEnum.CHECKBOX) {\n          <th class=\"custom-th\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          } @case (selectionTypeEnum.RADIO_BTN) {\n          <th class=\"custom-th\"></th>\n          } } @for (col of columns; track col.field ?? col.header ?? $index; let\n          colIdx = $index) {\n          <th\n            pResizableColumn\n            class=\"custom-th text-primary font-bold\"\n            [pSortableColumn]=\"col.field\"\n          >\n            {{ col.header | translate }}\n            <p-sortIcon\n              [field]=\"col.field\"\n              [attr.data-cy]=\"'sort-button-' + col.header\"\n            ></p-sortIcon>\n          </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) { @case\n          (selectionTypeEnum.CHECKBOX) {\n          <td class=\"w-2rem\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          } @case (selectionTypeEnum.RADIO_BTN) {\n          <td>\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n          } } @for (col of columns; track col.field ?? col.header ?? $index; let\n          i = $index) {\n          <td\n            (click)=\"isColumnClickable(i) ? onRowClick($event, rowData) : null\"\n            [ngClass]=\"{\n              'text-blue-500 underline cursor-pointer': isColumnClickable(i)\n            }\"\n          >\n            @switch (col.columnType) { @case (columnTypeEnum.TAG) { @if\n            (rowData[col.field]) {\n            <div\n              class=\"border-round-md font-semibold\"\n              [style]=\"{\n                fontSize: '12px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                'background-color':\n                  (rowData[col.field + 'Color'] || '#ccc') + '56',\n                color: rowData[col.field + 'Color']\n              }\"\n            >\n              {{ rowData[col.field]?.name || (rowData[col.field] | translate) }}\n            </div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.LIST_TAG) { @if (rowData[col.field]) {\n            @for (item of rowData[col.field]; track $index) {\n            <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n            } } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.OBJ_TAG) { @if (rowData[col.field]) {\n            <p-tag\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.OBJ_TAG +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [style]=\"{\n                fontSize: '12px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                'background-color': (rowData[col.field].color || '#ccc') + '56',\n                color: rowData[col.field].color\n              }\"\n              [value]=\"rowData[col.field]?.value | translate\"\n            ></p-tag>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.PERSON) { @if (rowData[col.field]) {\n            <p-avatar\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.PERSON +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [label]=\"rowData[col.field]?.name | initials\"\n              class=\"cursor-pointer\"\n              [style]=\"{\n                'background-color': '#9c27b0',\n                color: '#ffffff',\n                'font-size': '0.8rem!important'\n              }\"\n              shape=\"circle\"\n              (click)=\"personPop.toggle($event)\"\n            ></p-avatar>\n\n            <p-popover #personPop [dismissable]=\"true\">\n              <div>\n                <span class=\"text-lg\">{{ rowData[col.field].name }}</span>\n                <span class=\"block text-sm\">\n                  <i class=\"pi pi-envelope mr-1 text-500\"></i>\n                  {{ rowData[col.field].email ?? \" --\" }}\n                </span>\n                <span class=\"block text-sm\">\n                  <i class=\"pi pi-phone text-500\"></i>\n                  {{ rowData[col.field].phone ?? \" --\" }}\n                </span>\n              </div>\n            </p-popover>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.LIST) { @if (rowData[col.field]?.length) {\n            @if (rowData[col.field].length > 1) {\n            <div\n              class=\"cursor-pointer\"\n              (click)=\"listPop.toggle($event)\"\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.LIST +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n            >\n              <span class=\"mr-1\">{{ rowData[col.field][0].name }}</span>\n              <p-chip\n                class=\"text-sm font-semibold p-1 m-0\"\n                [label]=\"'+' + (rowData[col.field].length - 1)\"\n              />\n            </div>\n            } @else {\n            <span>{{ rowData[col.field][0].name }}</span>\n            }\n\n            <p-popover #listPop [dismissable]=\"true\">\n              @for (item of rowData[col.field]; track item.name; let isFirst =\n              $first) { @if (!isFirst) {\n              <ul class=\"list-none m-0 p-0\">\n                <li>{{ item.name }}</li>\n              </ul>\n              } }\n            </p-popover>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.BOOLEAN) { @if (rowData[col.field] |\n            isBoolean) {\n            <i\n              [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.BOOLEAN +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              class=\"pi\"\n              [ngClass]=\"\n                rowData[col.field]\n                  ? 'text-green-500 pi-check-circle'\n                  : 'text-red-500 pi-times-circle'\n              \"\n            ></i>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.TEXT_AREA) { @if (rowData[col.field]) {\n            <div\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.TEXT_AREA +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [pTooltip]=\"rowData[col.field]\"\n              style=\"width: 200px\"\n            >\n              {{\n                rowData[col.field].length > 50\n                  ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                  : rowData[col.field]\n              }}\n            </div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.EMAIL) { @if (rowData[col.field]) {\n            <div\n              class=\"email-cell\"\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.EMAIL +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n            >\n              <span>{{ rowData[col.field] }}</span>\n              <i\n                class=\"pi pi-copy email-copy-icon\"\n                (click)=\"copyToClipboard($event, rowData[col.field])\"\n                [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n              >\n              </i>\n            </div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.TIMEPERIOD) { @if (rowData[col.field]) {\n            <div\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.TIMEPERIOD +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [pTooltip]=\"rowData[col.field] | timePeriod\"\n              style=\"max-width: 200px\"\n            >\n              {{ rowData[col.field] | timePeriod }}\n            </div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @default { @if (col.flag && getNested(rowData,\n            col.flagCodeField)) {\n            <div\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.TEXT +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              class=\"flex align-items-center gap-2\"\n              style=\"max-width: 200px\"\n              [pTooltip]=\"rowData | cell : col : dateFormat\"\n            >\n              <img\n                src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                [class]=\"\n                  'flag flag-' +\n                  (getNested(rowData, col.flagCodeField) || '')\n                    .toString()\n                    .toLowerCase()\n                \"\n                style=\"width: 22px\"\n                alt=\"\"\n              />\n              <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n            </div>\n            } @else { @if (rowData | cell : col : dateFormat) {\n            <div\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.TEXT +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [pTooltip]=\"rowData | cell : col : dateFormat\"\n              style=\"max-width: 200px\"\n              [innerHTML]=\"rowData | cell : col : dateFormat\"\n            ></div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } } }\n          </td>\n          }\n\n          <td class=\"p-0\">\n            @for (action of tableConfiguration.rowActions; track action?.key ??\n            $index) {\n            <phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\n      </ng-template>\n\n      <ng-template #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        <tr style=\"height: 40px\">\n          @for (col of columns; track $index) {\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n          </td>\n          }\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n          </td>\n        </tr>\n      </ng-template> -->\n\n      <ng-template pTemplate=\"emptymessage\">\n        <td class=\"p-2\" colspan=\"100\">\n          <div class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle mr-2\"></i>\n            {{ \"NO_RESULTS_FOUND\" | translate }}\n          </div>\n        </td>\n      </ng-template>\n    </p-table>\n\n    <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n      {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n    </div>\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { 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: SkeletonModule }, { kind: "ngmodule", type: PanelModule }, { 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: "ngmodule", type: ChipModule }, { kind: "component", type: i8$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    ></table-caption>\n  } @else {\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n          <span>\n            {{ selectedItems().length }}\n            {{\n              selectedItems().length === 1\n                ? (\"LABELS.ITEM_SELECTED\" | translate)\n                : (\"LABELS.ITEMS_SELECTED\" | translate)\n            }}\n          </span>\n        }\n      </div>\n\n      <div>\n        @for (\n          action of tableConfiguration.bulkActions;\n          track action?.key ?? $index\n        ) {\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems(),\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        }\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  }\n  <div\n    class=\"table-host\"\n    [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [lazy]=\"true\"\n      [rowSelectable]=\"isRowSelectable\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"loadLazyData($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [sortMode]=\"'multiple'\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <th class=\"custom-th\">\n                <p-tableHeaderCheckbox\n                  [attr.data-cy]=\"'table-header-checkbox'\"\n                ></p-tableHeaderCheckbox>\n              </th>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <th class=\"custom-th\"></th>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let colIdx = $index\n          ) {\n            <th\n              pResizableColumn\n              class=\"custom-th text-primary font-bold\"\n              [pSortableColumn]=\"col.field\"\n            >\n              {{ col.header | translate }}\n              <p-sortIcon\n                [field]=\"col.field\"\n                [attr.data-cy]=\"'sort-button-' + col.header\"\n              ></p-sortIcon>\n            </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <td class=\"w-2rem\">\n                <p-tableCheckbox\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n                  \"\n                  [disabled]=\"\n                    rowData?.canSelect !== undefined\n                      ? !rowData.canSelect\n                      : false\n                  \"\n                  [value]=\"rowData\"\n                ></p-tableCheckbox>\n              </td>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <td>\n                <p-tableRadioButton\n                  [value]=\"rowData\"\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n                  \"\n                ></p-tableRadioButton>\n              </td>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let i = $index\n          ) {\n            <td\n              (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \"\n              [ngClass]=\"{\n                'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n              }\"\n            >\n              @switch (col.columnType) {\n                @case (columnTypeEnum.TAG) {\n                  @if (rowData[col.field]) {\n                    <div\n                      class=\"border-round-md font-semibold\"\n                      [style]=\"{\n                        fontSize: '12px',\n                        padding: '3px 8px',\n                        width: 'fit-content',\n                        'background-color':\n                          (rowData[col.field + 'Color'] || '#ccc') + '56',\n                        color: rowData[col.field + 'Color'],\n                      }\"\n                    >\n                      {{\n                        rowData[col.field]?.name ||\n                          (rowData[col.field] | translate)\n                      }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST_TAG) {\n                  @if (rowData[col.field]) {\n                    @for (item of rowData[col.field]; track $index) {\n                      <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n                    }\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.OBJ_TAG) {\n                  @if (rowData[col.field]) {\n                    <p-tag\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.OBJ_TAG +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [style]=\"{\n                        fontSize: '12px',\n                        padding: '3px 8px',\n                        width: 'fit-content',\n                        'background-color':\n                          (rowData[col.field].color || '#ccc') + '56',\n                        color: rowData[col.field].color,\n                      }\"\n                      [value]=\"rowData[col.field]?.value | translate\"\n                    ></p-tag>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.PERSON) {\n                  @if (rowData[col.field]) {\n                    <p-avatar\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.PERSON +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [label]=\"rowData[col.field]?.name | initials\"\n                      class=\"cursor-pointer\"\n                      [style]=\"{\n                        'background-color': '#9c27b0',\n                        color: '#ffffff',\n                        'font-size': '0.8rem!important',\n                      }\"\n                      shape=\"circle\"\n                      (click)=\"personPop.toggle($event)\"\n                    ></p-avatar>\n\n                    <p-popover #personPop [dismissable]=\"true\">\n                      <div>\n                        <span class=\"text-lg\">{{\n                          rowData[col.field].name\n                        }}</span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-envelope mr-1 text-500\"></i>\n                          {{ rowData[col.field].email ?? \" --\" }}\n                        </span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-phone text-500\"></i>\n                          {{ rowData[col.field].phone ?? \" --\" }}\n                        </span>\n                      </div>\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST) {\n                  @if (rowData[col.field]?.length) {\n                    @if (rowData[col.field].length > 1) {\n                      <div\n                        class=\"cursor-pointer\"\n                        (click)=\"listPop.toggle($event)\"\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.LIST +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                      >\n                        <span class=\"mr-1\">{{\n                          rowData[col.field][0].name\n                        }}</span>\n                        <p-chip\n                          class=\"text-sm font-semibold p-1 m-0\"\n                          [label]=\"'+' + (rowData[col.field].length - 1)\"\n                        />\n                      </div>\n                    } @else {\n                      <span>{{ rowData[col.field][0].name }}</span>\n                    }\n\n                    <p-popover #listPop [dismissable]=\"true\">\n                      @for (\n                        item of rowData[col.field];\n                        track item.name;\n                        let isFirst = $first\n                      ) {\n                        @if (!isFirst) {\n                          <ul class=\"list-none m-0 p-0\">\n                            <li>{{ item.name }}</li>\n                          </ul>\n                        }\n                      }\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.BOOLEAN) {\n                  @if (rowData[col.field] | isBoolean) {\n                    <i\n                      [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.BOOLEAN +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"pi\"\n                      [ngClass]=\"\n                        rowData[col.field]\n                          ? 'text-green-500 pi-check-circle'\n                          : 'text-red-500 pi-times-circle'\n                      \"\n                    ></i>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TEXT_AREA) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT_AREA +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field]\"\n                    >\n                      {{\n                        rowData[col.field].length > (col.maxLength ?? 50)\n                          ? (rowData[col.field]\n                              | slice: 0 : col.maxLength ?? 50) + \"...\"\n                          : rowData[col.field]\n                      }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.EMAIL) {\n                  @if (rowData[col.field]) {\n                    <div\n                      class=\"email-cell\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.EMAIL +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                    >\n                      <span>{{ rowData[col.field] }}</span>\n                      <i\n                        class=\"pi pi-copy email-copy-icon\"\n                        (click)=\"copyToClipboard($event, rowData[col.field])\"\n                        [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n                      >\n                      </i>\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TIMEPERIOD) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TIMEPERIOD +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field] | timePeriod\"\n                      style=\"max-width: 200px\"\n                    >\n                      {{ rowData[col.field] | timePeriod }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @default {\n                  @if (col.flag && getNested(rowData, col.flagCodeField)) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"flex align-items-center gap-2\"\n                      style=\"max-width: 200px\"\n                      [pTooltip]=\"rowData | cell: col : dateFormat\"\n                    >\n                      <img\n                        src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                        [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .toLowerCase()\n                        \"\n                        style=\"width: 22px\"\n                        alt=\"\"\n                      />\n                      <span\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></span>\n                    </div>\n                  } @else {\n                    @if (rowData | cell: col : dateFormat) {\n                      <div\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.TEXT +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                        [pTooltip]=\"rowData | cell: col : dateFormat\"\n                        style=\"max-width: 200px\"\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></div>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"emptyCell\"\n                        [ngTemplateOutletContext]=\"{\n                          dataCy:\n                            'table-row-' +\n                            col.columnType +\n                            '-row-index-' +\n                            rowIndex +\n                            '-col-index-' +\n                            i,\n                        }\"\n                      />\n                    }\n                  }\n                }\n              }\n            </td>\n          }\n\n          <td class=\"p-0\">\n            @for (\n              action of tableConfiguration.rowActions;\n              track action?.key ?? $index\n            ) {\n              <phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [rowData]=\"rowData\"\n                (actionClick)=\"handleActionClick($event)\"\n              ></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\n      </ng-template>\n\n      <ng-template #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        <tr style=\"height: 40px\">\n          @for (col of columns; track $index) {\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n          </td>\n          }\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n          </td>\n        </tr>\n      </ng-template> -->\n\n      <ng-template pTemplate=\"emptymessage\">\n        <td class=\"p-2\" colspan=\"100\">\n          <div class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle mr-2\"></i>\n            {{ \"NO_RESULTS_FOUND\" | translate }}\n          </div>\n        </td>\n      </ng-template>\n    </p-table>\n\n    <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n      {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n    </div>\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { 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: SkeletonModule }, { kind: "ngmodule", type: PanelModule }, { 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: "ngmodule", type: ChipModule }, { kind: "component", type: i8$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3632,7 +3660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TimePeriodPipe,
                         IsBooleanPipe,
                         BadgeModule,
-                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [filters]=\"filters\"\n    [selectedItems]=\"selectedItems()\"\n    (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\"\n    (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"\n  ></table-caption>\n  } @else {\n  <div\n    style=\"min-height: 40px; padding: 8px\"\n    class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n  >\n    <div>\n      @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n      <span>\n        {{ selectedItems().length }}\n        {{\n          selectedItems().length === 1\n            ? (\"LABELS.ITEM_SELECTED\" | translate)\n            : (\"LABELS.ITEMS_SELECTED\" | translate)\n        }}\n      </span>\n      }\n    </div>\n\n    <div>\n      @for (action of tableConfiguration.bulkActions; track action?.key ??\n      $index) {\n      <phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"\n          handleActionClick({\n            action: action,\n            selectedItems: selectedItems()\n          });\n          clearSelection()\n        \"\n      ></phoenix-data-table-action>\n      }\n\n      <button\n        [attr.data-cy]=\"'clear-selection-button'\"\n        class=\"p-button p-button-text p-button-plain\"\n        (click)=\"clearSelection()\"\n        aria-label=\"Clear Selection\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  </div>\n  }\n  <div\n    class=\"table-host\"\n    [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [lazy]=\"true\"\n      [rowSelectable]=\"isRowSelectable\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"loadLazyData($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [sortMode]=\"'multiple'\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) { @case\n          (selectionTypeEnum.CHECKBOX) {\n          <th class=\"custom-th\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          } @case (selectionTypeEnum.RADIO_BTN) {\n          <th class=\"custom-th\"></th>\n          } } @for (col of columns; track col.field ?? col.header ?? $index; let\n          colIdx = $index) {\n          <th\n            pResizableColumn\n            class=\"custom-th text-primary font-bold\"\n            [pSortableColumn]=\"col.field\"\n          >\n            {{ col.header | translate }}\n            <p-sortIcon\n              [field]=\"col.field\"\n              [attr.data-cy]=\"'sort-button-' + col.header\"\n            ></p-sortIcon>\n          </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) { @case\n          (selectionTypeEnum.CHECKBOX) {\n          <td class=\"w-2rem\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          } @case (selectionTypeEnum.RADIO_BTN) {\n          <td>\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n          } } @for (col of columns; track col.field ?? col.header ?? $index; let\n          i = $index) {\n          <td\n            (click)=\"isColumnClickable(i) ? onRowClick($event, rowData) : null\"\n            [ngClass]=\"{\n              'text-blue-500 underline cursor-pointer': isColumnClickable(i)\n            }\"\n          >\n            @switch (col.columnType) { @case (columnTypeEnum.TAG) { @if\n            (rowData[col.field]) {\n            <div\n              class=\"border-round-md font-semibold\"\n              [style]=\"{\n                fontSize: '12px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                'background-color':\n                  (rowData[col.field + 'Color'] || '#ccc') + '56',\n                color: rowData[col.field + 'Color']\n              }\"\n            >\n              {{ rowData[col.field]?.name || (rowData[col.field] | translate) }}\n            </div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.LIST_TAG) { @if (rowData[col.field]) {\n            @for (item of rowData[col.field]; track $index) {\n            <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n            } } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.OBJ_TAG) { @if (rowData[col.field]) {\n            <p-tag\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.OBJ_TAG +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [style]=\"{\n                fontSize: '12px',\n                padding: '3px 8px',\n                width: 'fit-content',\n                'background-color': (rowData[col.field].color || '#ccc') + '56',\n                color: rowData[col.field].color\n              }\"\n              [value]=\"rowData[col.field]?.value | translate\"\n            ></p-tag>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.PERSON) { @if (rowData[col.field]) {\n            <p-avatar\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.PERSON +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [label]=\"rowData[col.field]?.name | initials\"\n              class=\"cursor-pointer\"\n              [style]=\"{\n                'background-color': '#9c27b0',\n                color: '#ffffff',\n                'font-size': '0.8rem!important'\n              }\"\n              shape=\"circle\"\n              (click)=\"personPop.toggle($event)\"\n            ></p-avatar>\n\n            <p-popover #personPop [dismissable]=\"true\">\n              <div>\n                <span class=\"text-lg\">{{ rowData[col.field].name }}</span>\n                <span class=\"block text-sm\">\n                  <i class=\"pi pi-envelope mr-1 text-500\"></i>\n                  {{ rowData[col.field].email ?? \" --\" }}\n                </span>\n                <span class=\"block text-sm\">\n                  <i class=\"pi pi-phone text-500\"></i>\n                  {{ rowData[col.field].phone ?? \" --\" }}\n                </span>\n              </div>\n            </p-popover>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.LIST) { @if (rowData[col.field]?.length) {\n            @if (rowData[col.field].length > 1) {\n            <div\n              class=\"cursor-pointer\"\n              (click)=\"listPop.toggle($event)\"\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.LIST +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n            >\n              <span class=\"mr-1\">{{ rowData[col.field][0].name }}</span>\n              <p-chip\n                class=\"text-sm font-semibold p-1 m-0\"\n                [label]=\"'+' + (rowData[col.field].length - 1)\"\n              />\n            </div>\n            } @else {\n            <span>{{ rowData[col.field][0].name }}</span>\n            }\n\n            <p-popover #listPop [dismissable]=\"true\">\n              @for (item of rowData[col.field]; track item.name; let isFirst =\n              $first) { @if (!isFirst) {\n              <ul class=\"list-none m-0 p-0\">\n                <li>{{ item.name }}</li>\n              </ul>\n              } }\n            </p-popover>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.BOOLEAN) { @if (rowData[col.field] |\n            isBoolean) {\n            <i\n              [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.BOOLEAN +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              class=\"pi\"\n              [ngClass]=\"\n                rowData[col.field]\n                  ? 'text-green-500 pi-check-circle'\n                  : 'text-red-500 pi-times-circle'\n              \"\n            ></i>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.TEXT_AREA) { @if (rowData[col.field]) {\n            <div\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.TEXT_AREA +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [pTooltip]=\"rowData[col.field]\"\n              style=\"width: 200px\"\n            >\n              {{\n                rowData[col.field].length > 50\n                  ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                  : rowData[col.field]\n              }}\n            </div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.EMAIL) { @if (rowData[col.field]) {\n            <div\n              class=\"email-cell\"\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.EMAIL +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n            >\n              <span>{{ rowData[col.field] }}</span>\n              <i\n                class=\"pi pi-copy email-copy-icon\"\n                (click)=\"copyToClipboard($event, rowData[col.field])\"\n                [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n              >\n              </i>\n            </div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @case (columnTypeEnum.TIMEPERIOD) { @if (rowData[col.field]) {\n            <div\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.TIMEPERIOD +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [pTooltip]=\"rowData[col.field] | timePeriod\"\n              style=\"max-width: 200px\"\n            >\n              {{ rowData[col.field] | timePeriod }}\n            </div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } @default { @if (col.flag && getNested(rowData,\n            col.flagCodeField)) {\n            <div\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.TEXT +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              class=\"flex align-items-center gap-2\"\n              style=\"max-width: 200px\"\n              [pTooltip]=\"rowData | cell : col : dateFormat\"\n            >\n              <img\n                src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                [class]=\"\n                  'flag flag-' +\n                  (getNested(rowData, col.flagCodeField) || '')\n                    .toString()\n                    .toLowerCase()\n                \"\n                style=\"width: 22px\"\n                alt=\"\"\n              />\n              <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n            </div>\n            } @else { @if (rowData | cell : col : dateFormat) {\n            <div\n              [attr.data-cy]=\"\n                'table-row-' +\n                columnTypeEnum.TEXT +\n                '-row-index-' +\n                rowIndex +\n                '-col-index-' +\n                i\n              \"\n              [pTooltip]=\"rowData | cell : col : dateFormat\"\n              style=\"max-width: 200px\"\n              [innerHTML]=\"rowData | cell : col : dateFormat\"\n            ></div>\n            } @else {\n            <ng-container\n              [ngTemplateOutlet]=\"emptyCell\"\n              [ngTemplateOutletContext]=\"{\n                dataCy:\n                  'table-row-' +\n                  col.columnType +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n              }\"\n            />\n            } } } }\n          </td>\n          }\n\n          <td class=\"p-0\">\n            @for (action of tableConfiguration.rowActions; track action?.key ??\n            $index) {\n            <phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\n      </ng-template>\n\n      <ng-template #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        <tr style=\"height: 40px\">\n          @for (col of columns; track $index) {\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n          </td>\n          }\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n          </td>\n        </tr>\n      </ng-template> -->\n\n      <ng-template pTemplate=\"emptymessage\">\n        <td class=\"p-2\" colspan=\"100\">\n          <div class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle mr-2\"></i>\n            {{ \"NO_RESULTS_FOUND\" | translate }}\n          </div>\n        </td>\n      </ng-template>\n    </p-table>\n\n    <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n      {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n    </div>\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}\n"] }]
+                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    ></table-caption>\n  } @else {\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n          <span>\n            {{ selectedItems().length }}\n            {{\n              selectedItems().length === 1\n                ? (\"LABELS.ITEM_SELECTED\" | translate)\n                : (\"LABELS.ITEMS_SELECTED\" | translate)\n            }}\n          </span>\n        }\n      </div>\n\n      <div>\n        @for (\n          action of tableConfiguration.bulkActions;\n          track action?.key ?? $index\n        ) {\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems(),\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        }\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  }\n  <div\n    class=\"table-host\"\n    [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [lazy]=\"true\"\n      [rowSelectable]=\"isRowSelectable\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"loadLazyData($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [sortMode]=\"'multiple'\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <th class=\"custom-th\">\n                <p-tableHeaderCheckbox\n                  [attr.data-cy]=\"'table-header-checkbox'\"\n                ></p-tableHeaderCheckbox>\n              </th>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <th class=\"custom-th\"></th>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let colIdx = $index\n          ) {\n            <th\n              pResizableColumn\n              class=\"custom-th text-primary font-bold\"\n              [pSortableColumn]=\"col.field\"\n            >\n              {{ col.header | translate }}\n              <p-sortIcon\n                [field]=\"col.field\"\n                [attr.data-cy]=\"'sort-button-' + col.header\"\n              ></p-sortIcon>\n            </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <td class=\"w-2rem\">\n                <p-tableCheckbox\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n                  \"\n                  [disabled]=\"\n                    rowData?.canSelect !== undefined\n                      ? !rowData.canSelect\n                      : false\n                  \"\n                  [value]=\"rowData\"\n                ></p-tableCheckbox>\n              </td>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <td>\n                <p-tableRadioButton\n                  [value]=\"rowData\"\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n                  \"\n                ></p-tableRadioButton>\n              </td>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let i = $index\n          ) {\n            <td\n              (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \"\n              [ngClass]=\"{\n                'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n              }\"\n            >\n              @switch (col.columnType) {\n                @case (columnTypeEnum.TAG) {\n                  @if (rowData[col.field]) {\n                    <div\n                      class=\"border-round-md font-semibold\"\n                      [style]=\"{\n                        fontSize: '12px',\n                        padding: '3px 8px',\n                        width: 'fit-content',\n                        'background-color':\n                          (rowData[col.field + 'Color'] || '#ccc') + '56',\n                        color: rowData[col.field + 'Color'],\n                      }\"\n                    >\n                      {{\n                        rowData[col.field]?.name ||\n                          (rowData[col.field] | translate)\n                      }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST_TAG) {\n                  @if (rowData[col.field]) {\n                    @for (item of rowData[col.field]; track $index) {\n                      <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n                    }\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.OBJ_TAG) {\n                  @if (rowData[col.field]) {\n                    <p-tag\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.OBJ_TAG +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [style]=\"{\n                        fontSize: '12px',\n                        padding: '3px 8px',\n                        width: 'fit-content',\n                        'background-color':\n                          (rowData[col.field].color || '#ccc') + '56',\n                        color: rowData[col.field].color,\n                      }\"\n                      [value]=\"rowData[col.field]?.value | translate\"\n                    ></p-tag>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.PERSON) {\n                  @if (rowData[col.field]) {\n                    <p-avatar\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.PERSON +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [label]=\"rowData[col.field]?.name | initials\"\n                      class=\"cursor-pointer\"\n                      [style]=\"{\n                        'background-color': '#9c27b0',\n                        color: '#ffffff',\n                        'font-size': '0.8rem!important',\n                      }\"\n                      shape=\"circle\"\n                      (click)=\"personPop.toggle($event)\"\n                    ></p-avatar>\n\n                    <p-popover #personPop [dismissable]=\"true\">\n                      <div>\n                        <span class=\"text-lg\">{{\n                          rowData[col.field].name\n                        }}</span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-envelope mr-1 text-500\"></i>\n                          {{ rowData[col.field].email ?? \" --\" }}\n                        </span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-phone text-500\"></i>\n                          {{ rowData[col.field].phone ?? \" --\" }}\n                        </span>\n                      </div>\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST) {\n                  @if (rowData[col.field]?.length) {\n                    @if (rowData[col.field].length > 1) {\n                      <div\n                        class=\"cursor-pointer\"\n                        (click)=\"listPop.toggle($event)\"\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.LIST +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                      >\n                        <span class=\"mr-1\">{{\n                          rowData[col.field][0].name\n                        }}</span>\n                        <p-chip\n                          class=\"text-sm font-semibold p-1 m-0\"\n                          [label]=\"'+' + (rowData[col.field].length - 1)\"\n                        />\n                      </div>\n                    } @else {\n                      <span>{{ rowData[col.field][0].name }}</span>\n                    }\n\n                    <p-popover #listPop [dismissable]=\"true\">\n                      @for (\n                        item of rowData[col.field];\n                        track item.name;\n                        let isFirst = $first\n                      ) {\n                        @if (!isFirst) {\n                          <ul class=\"list-none m-0 p-0\">\n                            <li>{{ item.name }}</li>\n                          </ul>\n                        }\n                      }\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.BOOLEAN) {\n                  @if (rowData[col.field] | isBoolean) {\n                    <i\n                      [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.BOOLEAN +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"pi\"\n                      [ngClass]=\"\n                        rowData[col.field]\n                          ? 'text-green-500 pi-check-circle'\n                          : 'text-red-500 pi-times-circle'\n                      \"\n                    ></i>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TEXT_AREA) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT_AREA +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field]\"\n                    >\n                      {{\n                        rowData[col.field].length > (col.maxLength ?? 50)\n                          ? (rowData[col.field]\n                              | slice: 0 : col.maxLength ?? 50) + \"...\"\n                          : rowData[col.field]\n                      }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.EMAIL) {\n                  @if (rowData[col.field]) {\n                    <div\n                      class=\"email-cell\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.EMAIL +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                    >\n                      <span>{{ rowData[col.field] }}</span>\n                      <i\n                        class=\"pi pi-copy email-copy-icon\"\n                        (click)=\"copyToClipboard($event, rowData[col.field])\"\n                        [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n                      >\n                      </i>\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TIMEPERIOD) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TIMEPERIOD +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field] | timePeriod\"\n                      style=\"max-width: 200px\"\n                    >\n                      {{ rowData[col.field] | timePeriod }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @default {\n                  @if (col.flag && getNested(rowData, col.flagCodeField)) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"flex align-items-center gap-2\"\n                      style=\"max-width: 200px\"\n                      [pTooltip]=\"rowData | cell: col : dateFormat\"\n                    >\n                      <img\n                        src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                        [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .toLowerCase()\n                        \"\n                        style=\"width: 22px\"\n                        alt=\"\"\n                      />\n                      <span\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></span>\n                    </div>\n                  } @else {\n                    @if (rowData | cell: col : dateFormat) {\n                      <div\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.TEXT +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                        [pTooltip]=\"rowData | cell: col : dateFormat\"\n                        style=\"max-width: 200px\"\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></div>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"emptyCell\"\n                        [ngTemplateOutletContext]=\"{\n                          dataCy:\n                            'table-row-' +\n                            col.columnType +\n                            '-row-index-' +\n                            rowIndex +\n                            '-col-index-' +\n                            i,\n                        }\"\n                      />\n                    }\n                  }\n                }\n              }\n            </td>\n          }\n\n          <td class=\"p-0\">\n            @for (\n              action of tableConfiguration.rowActions;\n              track action?.key ?? $index\n            ) {\n              <phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [rowData]=\"rowData\"\n                (actionClick)=\"handleActionClick($event)\"\n              ></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\n      </ng-template>\n\n      <ng-template #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        <tr style=\"height: 40px\">\n          @for (col of columns; track $index) {\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n          </td>\n          }\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n          </td>\n        </tr>\n      </ng-template> -->\n\n      <ng-template pTemplate=\"emptymessage\">\n        <td class=\"p-2\" colspan=\"100\">\n          <div class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle mr-2\"></i>\n            {{ \"NO_RESULTS_FOUND\" | translate }}\n          </div>\n        </td>\n      </ng-template>\n    </p-table>\n\n    <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n      {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n    </div>\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}\n"] }]
         }], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']
@@ -7821,7 +7849,7 @@ class StatusBarComponent {
         width: 40,
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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=\"p-2 pt-0\">\n  @if (statusBarConfig) {\n  <div class=\"status-bar-wrapper flex\" [ngClass]=\"{ collapsed: isCollapsed }\">\n    @if (description) {\n    <div class=\"description flex\">\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        @for (attr of statusBarConfig.description; track attr.label) {\n        <li class=\"text-sm flex mb-1\">\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          @if (attr.value) {\n          <span>\n            @if (attr.icon) {\n            <i class=\"{{ attr.icon }} mr-1\" style=\"font-size: 0.8em\"></i>\n            } @switch (attr.type) { @case ('DATE') {\n            <span>{{ attr.value | date : dateFormat }}</span>\n            } @default {\n            <span pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\">\n              {{ attr.value | textLength : 20 }}\n            </span>\n            } }\n          </span>\n          } @else {\n          <span>--</span>\n          }\n        </li>\n        }\n      </ul>\n    </div>\n    }\n    <div class=\"status-bar-attributes w-full flex gap-4\">\n      @for (attr of statusBarConfig.attributes; track attr.label) {\n      <div class=\"status-bar-attribute-item\">\n        <phoenix-status-attribute-display\n          [attr]=\"attr\"\n          [dateFormat]=\"dateFormat\"\n          (listItemClick)=\"onListItemClick.emit($event)\"\n        ></phoenix-status-attribute-display>\n      </div>\n      }\n    </div>\n  </div>\n  } @if (enableClosing) {\n  <div class=\"flex justify-content-center\">\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  }\n</div>\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}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.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: "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: ImageModule }, { kind: "component", type: i6$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: StatusAttributeDisplayComponent, selector: "phoenix-status-attribute-display", inputs: ["attr", "dateFormat"], outputs: ["listItemClick"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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=\"p-2 pt-0\">\n  @if (statusBarConfig) {\n    <div class=\"status-bar-wrapper flex\" [ngClass]=\"{ collapsed: isCollapsed }\">\n      @if (description) {\n        <div class=\"description flex\">\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            @for (attr of statusBarConfig.description; track attr.label) {\n              <li class=\"text-sm flex mb-1\">\n                <span class=\"mr-1 text-600 font-semibold\"\n                  >{{ attr.label | translate }}:</span\n                >\n                @if (attr.value) {\n                  <span>\n                    @if (attr.icon) {\n                      <i\n                        class=\"{{ attr.icon }} mr-1\"\n                        style=\"font-size: 0.8em\"\n                      ></i>\n                    }\n                    @switch (attr.type) {\n                      @case (\"DATE\") {\n                        <span>{{ attr.value | date: dateFormat }}</span>\n                      }\n                      @default {\n                        <span\n                          pTooltip=\"{{\n                            attr?.value?.length > 20 ? attr.value : ''\n                          }}\"\n                        >\n                          {{ attr.value | textLength: 20 }}\n                        </span>\n                      }\n                    }\n                  </span>\n                } @else {\n                  <span>--</span>\n                }\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      <div class=\"status-bar-attributes w-full flex gap-5\">\n        @for (attr of statusBarConfig.attributes; track attr.label) {\n          <div class=\"status-bar-attribute-item\">\n            <phoenix-status-attribute-display\n              [attr]=\"attr\"\n              [dateFormat]=\"dateFormat\"\n              (listItemClick)=\"onListItemClick.emit($event)\"\n            ></phoenix-status-attribute-display>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (enableClosing) {\n    <div class=\"flex justify-content-center\">\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  }\n</div>\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}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.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: "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: ImageModule }, { kind: "component", type: i6$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: StatusAttributeDisplayComponent, selector: "phoenix-status-attribute-display", inputs: ["attr", "dateFormat"], outputs: ["listItemClick"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusBarComponent, decorators: [{
             type: Component,
@@ -7835,7 +7863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TextLength,
                         ButtonModule,
                         StatusAttributeDisplayComponent,
-                    ], template: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0\">\n  @if (statusBarConfig) {\n  <div class=\"status-bar-wrapper flex\" [ngClass]=\"{ collapsed: isCollapsed }\">\n    @if (description) {\n    <div class=\"description flex\">\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        @for (attr of statusBarConfig.description; track attr.label) {\n        <li class=\"text-sm flex mb-1\">\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          @if (attr.value) {\n          <span>\n            @if (attr.icon) {\n            <i class=\"{{ attr.icon }} mr-1\" style=\"font-size: 0.8em\"></i>\n            } @switch (attr.type) { @case ('DATE') {\n            <span>{{ attr.value | date : dateFormat }}</span>\n            } @default {\n            <span pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\">\n              {{ attr.value | textLength : 20 }}\n            </span>\n            } }\n          </span>\n          } @else {\n          <span>--</span>\n          }\n        </li>\n        }\n      </ul>\n    </div>\n    }\n    <div class=\"status-bar-attributes w-full flex gap-4\">\n      @for (attr of statusBarConfig.attributes; track attr.label) {\n      <div class=\"status-bar-attribute-item\">\n        <phoenix-status-attribute-display\n          [attr]=\"attr\"\n          [dateFormat]=\"dateFormat\"\n          (listItemClick)=\"onListItemClick.emit($event)\"\n        ></phoenix-status-attribute-display>\n      </div>\n      }\n    </div>\n  </div>\n  } @if (enableClosing) {\n  <div class=\"flex justify-content-center\">\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  }\n</div>\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}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.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=\"p-2 pt-0\">\n  @if (statusBarConfig) {\n    <div class=\"status-bar-wrapper flex\" [ngClass]=\"{ collapsed: isCollapsed }\">\n      @if (description) {\n        <div class=\"description flex\">\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            @for (attr of statusBarConfig.description; track attr.label) {\n              <li class=\"text-sm flex mb-1\">\n                <span class=\"mr-1 text-600 font-semibold\"\n                  >{{ attr.label | translate }}:</span\n                >\n                @if (attr.value) {\n                  <span>\n                    @if (attr.icon) {\n                      <i\n                        class=\"{{ attr.icon }} mr-1\"\n                        style=\"font-size: 0.8em\"\n                      ></i>\n                    }\n                    @switch (attr.type) {\n                      @case (\"DATE\") {\n                        <span>{{ attr.value | date: dateFormat }}</span>\n                      }\n                      @default {\n                        <span\n                          pTooltip=\"{{\n                            attr?.value?.length > 20 ? attr.value : ''\n                          }}\"\n                        >\n                          {{ attr.value | textLength: 20 }}\n                        </span>\n                      }\n                    }\n                  </span>\n                } @else {\n                  <span>--</span>\n                }\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      <div class=\"status-bar-attributes w-full flex gap-5\">\n        @for (attr of statusBarConfig.attributes; track attr.label) {\n          <div class=\"status-bar-attribute-item\">\n            <phoenix-status-attribute-display\n              [attr]=\"attr\"\n              [dateFormat]=\"dateFormat\"\n              (listItemClick)=\"onListItemClick.emit($event)\"\n            ></phoenix-status-attribute-display>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (enableClosing) {\n    <div class=\"flex justify-content-center\">\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  }\n</div>\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}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.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: [{