@fuentis/phoenix-ui 0.0.9-alpha.208 → 0.0.9-alpha.211

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -931,6 +931,7 @@ var tableButtonContext;
 var tableColumnType;
 (function (tableColumnType) {
     tableColumnType["TEXT"] = "TEXT";
+    tableColumnType["TIMEPERIOD"] = "TIMEPERIOD";
     tableColumnType["RICH_TEXT"] = "RICH_TEXT";
     tableColumnType["TEXT_AREA"] = "TEXT_AREA";
     tableColumnType["DATE"] = "DATE";
@@ -1885,6 +1886,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ name: 'initials' }]
         }] });
 
+function timePeriodFromMS(milliseconds, lang = 'en') {
+    const weeks = Math.floor(milliseconds / (7 * 24 * 60 * 60 * 1000));
+    milliseconds %= 7 * 24 * 60 * 60 * 1000;
+    const days = Math.floor(milliseconds / (24 * 60 * 60 * 1000));
+    milliseconds %= 24 * 60 * 60 * 1000;
+    const hours = Math.floor(milliseconds / (60 * 60 * 1000));
+    milliseconds %= 60 * 60 * 1000;
+    const minutes = Math.floor(milliseconds / (60 * 1000));
+    let result = '';
+    switch (lang) {
+        case 'de':
+            if (weeks > 0)
+                result += `${weeks}w `;
+            if (days > 0)
+                result += `${days}t `;
+            if (hours > 0)
+                result += `${hours}s `;
+            if (minutes > 0)
+                result += `${minutes}m`;
+            break;
+        case 'sr':
+            if (weeks > 0)
+                result += `${weeks}n `;
+            if (days > 0)
+                result += `${days}d `;
+            if (hours > 0)
+                result += `${hours}č `;
+            if (minutes > 0)
+                result += `${minutes}m`;
+            break;
+        default: // 'en' or fallback
+            if (weeks > 0)
+                result += `${weeks}w `;
+            if (days > 0)
+                result += `${days}d `;
+            if (hours > 0)
+                result += `${hours}h `;
+            if (minutes > 0)
+                result += `${minutes}m`;
+            break;
+    }
+    return result.trim();
+}
+
+class TimePeriodPipe {
+    transform(value) {
+        return timePeriodFromMS(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimePeriodPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TimePeriodPipe, isStandalone: true, name: "timePeriod" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimePeriodPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'timePeriod'
+                }]
+        }] });
+
 class TableComponent {
     // This setter initializes the dataset and triggers the initial lazy load.
     set data(value) {
@@ -2102,7 +2161,7 @@ class TableComponent {
         this.bulkMode = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [selectedColumnsInput]=\"selectedColumns\"\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    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\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>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <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  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\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        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\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        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton [value]=\"rowData\"></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\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)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\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\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-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\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\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\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    Total records: {{ totalRecords }}\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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "selectedColumnsInput", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [selectedColumnsInput]=\"selectedColumns\"\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    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\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>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <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  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\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        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\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        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton [value]=\"rowData\"></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\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)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\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\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-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\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\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\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    Total records: {{ totalRecords }}\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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "selectedColumnsInput", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2121,7 +2180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         OverlayPanelModule,
                         ChipModule,
                         InitialsPipe,
-                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [selectedColumnsInput]=\"selectedColumns\"\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    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\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>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <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  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\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        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\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        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton [value]=\"rowData\"></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\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)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\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\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-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\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\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\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    Total records: {{ totalRecords }}\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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
+                        TimePeriodPipe
+                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [selectedColumnsInput]=\"selectedColumns\"\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    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\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>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <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  </ng-template>\n\n  <p-table\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\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        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n        </th>\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        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton [value]=\"rowData\"></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\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)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\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\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-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\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\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\n                  }\"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <div\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\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    Total records: {{ totalRecords }}\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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -4674,50 +4734,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ] }]
         }] });
 
-function timePeriodFromMS(milliseconds, lang = 'en') {
-    const weeks = Math.floor(milliseconds / (7 * 24 * 60 * 60 * 1000));
-    milliseconds %= 7 * 24 * 60 * 60 * 1000;
-    const days = Math.floor(milliseconds / (24 * 60 * 60 * 1000));
-    milliseconds %= 24 * 60 * 60 * 1000;
-    const hours = Math.floor(milliseconds / (60 * 60 * 1000));
-    milliseconds %= 60 * 60 * 1000;
-    const minutes = Math.floor(milliseconds / (60 * 1000));
-    let result = '';
-    switch (lang) {
-        case 'de':
-            if (weeks > 0)
-                result += `${weeks}w `;
-            if (days > 0)
-                result += `${days}t `;
-            if (hours > 0)
-                result += `${hours}s `;
-            if (minutes > 0)
-                result += `${minutes}m`;
-            break;
-        case 'sr':
-            if (weeks > 0)
-                result += `${weeks}n `;
-            if (days > 0)
-                result += `${days}d `;
-            if (hours > 0)
-                result += `${hours}č `;
-            if (minutes > 0)
-                result += `${minutes}m`;
-            break;
-        default: // 'en' or fallback
-            if (weeks > 0)
-                result += `${weeks}w `;
-            if (days > 0)
-                result += `${days}d `;
-            if (hours > 0)
-                result += `${hours}h `;
-            if (minutes > 0)
-                result += `${minutes}m`;
-            break;
-    }
-    return result.trim();
-}
-
 class MetaTimeperiodComponent {
     control;
     parentForm;
@@ -5805,7 +5821,7 @@ class StatusBarComponent {
         return '/' + path.replace(/^\/+/, '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: "<div class=\"surface-ground p-3\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper overflow-x-auto\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <div class=\"description flex\" *ngIf=\"description\">\n      <!-- Entity icon -->\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 ? statusBarConfig.icon : 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n      }\n\n      <!-- Descriptive data -->\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span\n                *ngSwitchDefault\n                pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n              >\n                {{ attr.value | textLength : 20 }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n      <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n      <div class=\"mt-1\">\n        <ng-container [ngSwitch]=\"attr.type\">\n          <!-- TAG -->\n          <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <span class=\"font-semibold text-600\">{{ attr.label }}</span>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"tagPopover.toggle($event)\"\n                    (mouseleave)=\"tagPopover.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  [style.color]=\"attr.color\"\n                  class=\"text-xl mt-1\"\n                >\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #tagPopover>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"text-sm\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"\" style=\"min-width: 100px\">\n                    <phoenix-tag\n                      [customColor]=\"item.value1 || ''\"\n                      [content]=\"item.value\"\n                    ></phoenix-tag>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- STRING -->\n          <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"stringPopover.toggle($event)\"\n                    (mouseleave)=\"stringPopover.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | textLength : 29 }}\n                </div>\n              </div>\n            </div>\n            <p-popover #stringPopover>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"text-sm\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"\" style=\"min-width: 100px\">\n                    <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n                      <!-- LINK -->\n                      <a\n                        *ngSwitchCase=\"'LINK'\"\n                        [href]=\"getFullUrl(item.value)\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        class=\"text-blue-500 text-sm underline cursor-pointer\"\n                      >\n                        {{ item.label || \"Open\" }}\n                      </a>\n\n                      <!-- STRING -->\n                      <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n                        {{ item.value }}\n                      </span>\n\n                      <!-- TAG (default or explicitly specified) -->\n                      <phoenix-tag\n                        *ngSwitchDefault\n                        [customColor]=\"item.value1 || ''\"\n                        [content]=\"item.value\"\n                      ></phoenix-tag>\n                    </ng-container>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- PERSON -->\n          <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column font-semibold text-600\">\n                {{ attr.label | translate }}\n                <div\n                  class=\"person-wrap\"\n                  *ngIf=\"attr?.value || attr?.value1; else empty\"\n                >\n                  <div class=\"person-avatar\">\n                    {{ attr?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <div\n                    class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n                    pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n                  >\n                    {{ attr?.value }} {{ attr?.value1 }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- DATE -->\n          <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"\n                      attr?.value !== undefined &&\n                      attr?.value !== null &&\n                      attr?.value !== '--'\n                    \"\n                    class=\"pi pi-info-circle text-blue-500 mr-1\"\n                    (mouseenter)=\"overlayPanel.toggle($event)\"\n                    (mouseleave)=\"overlayPanel.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | textLength : 20 }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #overlayPanel>\n              <!-- Created by -->\n\n              <div *ngFor=\"let item of attr.tooltip\" class=\"mb-2\">\n                <div class=\"font-sm white-space-nowrap mb-1\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"align-self-center\">\n                    <p-avatar\n                      shape=\"circle\"\n                      [label]=\"item.value ? (item.value | firstLetter) : ''\"\n                    ></p-avatar>\n                  </div>\n                  <div>\n                    <div class=\"text-blue-800 font-sm ml-1\">\n                      {{ item.value }}\n                    </div>\n                    <div class=\"text-sm\">\n                      {{ item.value1 }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </p-popover>\n          </ng-container>\n\n          <!-- LIST -->\n          <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n            <div class=\"attribute flex justify-content-center\">\n              <div>\n                <label class=\"font-semibold text-600\">{{\n                  attr.label | translate\n                }}</label>\n                <ul\n                  class=\"list\"\n                  *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n                >\n                  <li\n                    [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n                    class=\"white-space-nowrap mb-1\"\n                    *ngFor=\"let item of attr.value\"\n                    (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n                  >\n                    <span\n                      pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\"\n                    >\n                      {{ item.name | textLength : 20 }}\n                    </span>\n                    <i class=\"pi pi-link mt-1\"></i>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapse/Expand button -->\n  <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.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:7px}.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:5px 5px 5px 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%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i7.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.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: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: "<div class=\"surface-ground p-3\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper overflow-x-auto\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <div class=\"description flex\" *ngIf=\"description\">\n      <!-- Entity icon -->\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 ? statusBarConfig.icon : 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n      }\n\n      <!-- Descriptive data -->\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span\n                *ngSwitchDefault\n                pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n              >\n                {{ attr.value | textLength : 20 }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n      <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n      <div class=\"mt-1\">\n        <ng-container [ngSwitch]=\"attr.type\">\n          <!-- TAG -->\n          <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <span class=\"font-semibold text-600\">{{ attr.label }}</span>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"tagPopover.toggle($event)\"\n                    (mouseleave)=\"tagPopover.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  [style.color]=\"attr.color\"\n                  class=\"text-xl mt-1\"\n                >\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #tagPopover>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"text-sm\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"\" style=\"min-width: 100px\">\n                    <phoenix-tag\n                      [customColor]=\"item.value1 || ''\"\n                      [content]=\"item.value\"\n                    ></phoenix-tag>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- STRING -->\n          <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <ng-container *ngIf=\"attr.url; else normalLabel\">\n                    <a\n                      class=\"font-semibold text-blue-600 cursor-pointer underline\"\n                      (click)=\"onListItemClick.emit(attr)\"\n                    >\n                      {{ attr.label }}\n                    </a>\n                  </ng-container>\n                  \n                  <ng-template #normalLabel>\n                    <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n                  </ng-template>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"stringPopover.toggle($event)\"\n                    (mouseleave)=\"stringPopover.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | textLength : 29 }}\n                </div>\n              </div>\n            </div>\n            <p-popover #stringPopover>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"text-sm\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"\" style=\"min-width: 100px\">\n                    <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n                      <!-- LINK -->\n                      <a\n                        *ngSwitchCase=\"'LINK'\"\n                        [href]=\"getFullUrl(item.value)\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        class=\"text-blue-500 text-sm underline cursor-pointer\"\n                      >\n                        {{ item.label || \"Open\" }}\n                      </a>\n\n                      <!-- STRING -->\n                      <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n                        {{ item.value }}\n                      </span>\n\n                      <!-- TAG (default or explicitly specified) -->\n                      <phoenix-tag\n                        *ngSwitchDefault\n                        [customColor]=\"item.value1 || ''\"\n                        [content]=\"item.value\"\n                      ></phoenix-tag>\n                    </ng-container>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- PERSON -->\n          <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column font-semibold text-600\">\n                {{ attr.label | translate }}\n                <div\n                  class=\"person-wrap\"\n                  *ngIf=\"attr?.value || attr?.value1; else empty\"\n                >\n                  <div class=\"person-avatar\">\n                    {{ attr?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <div\n                    class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n                    pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n                  >\n                    {{ attr?.value }} {{ attr?.value1 }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- DATE -->\n          <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"\n                      attr?.value !== undefined &&\n                      attr?.value !== null &&\n                      attr?.value !== '--'\n                    \"\n                    class=\"pi pi-info-circle text-blue-500 mr-1\"\n                    (mouseenter)=\"overlayPanel.toggle($event)\"\n                    (mouseleave)=\"overlayPanel.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | textLength : 20 }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #overlayPanel>\n              <!-- Created by -->\n\n              <div *ngFor=\"let item of attr.tooltip\" class=\"mb-2\">\n                <div class=\"font-sm white-space-nowrap mb-1\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"align-self-center\">\n                    <p-avatar\n                      shape=\"circle\"\n                      [label]=\"item.value ? (item.value | firstLetter) : ''\"\n                    ></p-avatar>\n                  </div>\n                  <div>\n                    <div class=\"text-blue-800 font-sm ml-1\">\n                      {{ item.value }}\n                    </div>\n                    <div class=\"text-sm\">\n                      {{ item.value1 }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </p-popover>\n          </ng-container>\n\n          <!-- LIST -->\n          <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n            <div class=\"attribute flex justify-content-center\">\n              <div>\n                <label class=\"font-semibold text-600\">{{\n                  attr.label | translate\n                }}</label>\n                <ul\n                  class=\"list\"\n                  *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n                >\n                  <li\n                    [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n                    class=\"white-space-nowrap mb-1\"\n                    *ngFor=\"let item of attr.value\"\n                    (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n                  >\n                    <span\n                      pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\"\n                    >\n                      {{ item.name | textLength : 20 }}\n                    </span>\n                    <i class=\"pi pi-link mt-1\"></i>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapse/Expand button -->\n  <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.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:7px}.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:5px 5px 5px 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%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i7.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.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: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusBarComponent, decorators: [{
             type: Component,
@@ -5821,7 +5837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FirstLetterPipe,
                         ButtonModule,
                         PopoverModule,
-                    ], template: "<div class=\"surface-ground p-3\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper overflow-x-auto\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <div class=\"description flex\" *ngIf=\"description\">\n      <!-- Entity icon -->\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 ? statusBarConfig.icon : 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n      }\n\n      <!-- Descriptive data -->\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span\n                *ngSwitchDefault\n                pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n              >\n                {{ attr.value | textLength : 20 }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n      <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n      <div class=\"mt-1\">\n        <ng-container [ngSwitch]=\"attr.type\">\n          <!-- TAG -->\n          <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <span class=\"font-semibold text-600\">{{ attr.label }}</span>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"tagPopover.toggle($event)\"\n                    (mouseleave)=\"tagPopover.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  [style.color]=\"attr.color\"\n                  class=\"text-xl mt-1\"\n                >\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #tagPopover>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"text-sm\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"\" style=\"min-width: 100px\">\n                    <phoenix-tag\n                      [customColor]=\"item.value1 || ''\"\n                      [content]=\"item.value\"\n                    ></phoenix-tag>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- STRING -->\n          <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"stringPopover.toggle($event)\"\n                    (mouseleave)=\"stringPopover.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | textLength : 29 }}\n                </div>\n              </div>\n            </div>\n            <p-popover #stringPopover>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"text-sm\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"\" style=\"min-width: 100px\">\n                    <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n                      <!-- LINK -->\n                      <a\n                        *ngSwitchCase=\"'LINK'\"\n                        [href]=\"getFullUrl(item.value)\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        class=\"text-blue-500 text-sm underline cursor-pointer\"\n                      >\n                        {{ item.label || \"Open\" }}\n                      </a>\n\n                      <!-- STRING -->\n                      <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n                        {{ item.value }}\n                      </span>\n\n                      <!-- TAG (default or explicitly specified) -->\n                      <phoenix-tag\n                        *ngSwitchDefault\n                        [customColor]=\"item.value1 || ''\"\n                        [content]=\"item.value\"\n                      ></phoenix-tag>\n                    </ng-container>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- PERSON -->\n          <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column font-semibold text-600\">\n                {{ attr.label | translate }}\n                <div\n                  class=\"person-wrap\"\n                  *ngIf=\"attr?.value || attr?.value1; else empty\"\n                >\n                  <div class=\"person-avatar\">\n                    {{ attr?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <div\n                    class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n                    pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n                  >\n                    {{ attr?.value }} {{ attr?.value1 }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- DATE -->\n          <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"\n                      attr?.value !== undefined &&\n                      attr?.value !== null &&\n                      attr?.value !== '--'\n                    \"\n                    class=\"pi pi-info-circle text-blue-500 mr-1\"\n                    (mouseenter)=\"overlayPanel.toggle($event)\"\n                    (mouseleave)=\"overlayPanel.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | textLength : 20 }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #overlayPanel>\n              <!-- Created by -->\n\n              <div *ngFor=\"let item of attr.tooltip\" class=\"mb-2\">\n                <div class=\"font-sm white-space-nowrap mb-1\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"align-self-center\">\n                    <p-avatar\n                      shape=\"circle\"\n                      [label]=\"item.value ? (item.value | firstLetter) : ''\"\n                    ></p-avatar>\n                  </div>\n                  <div>\n                    <div class=\"text-blue-800 font-sm ml-1\">\n                      {{ item.value }}\n                    </div>\n                    <div class=\"text-sm\">\n                      {{ item.value1 }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </p-popover>\n          </ng-container>\n\n          <!-- LIST -->\n          <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n            <div class=\"attribute flex justify-content-center\">\n              <div>\n                <label class=\"font-semibold text-600\">{{\n                  attr.label | translate\n                }}</label>\n                <ul\n                  class=\"list\"\n                  *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n                >\n                  <li\n                    [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n                    class=\"white-space-nowrap mb-1\"\n                    *ngFor=\"let item of attr.value\"\n                    (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n                  >\n                    <span\n                      pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\"\n                    >\n                      {{ item.name | textLength : 20 }}\n                    </span>\n                    <i class=\"pi pi-link mt-1\"></i>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapse/Expand button -->\n  <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.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:7px}.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:5px 5px 5px 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%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
+                    ], template: "<div class=\"surface-ground p-3\">\n  <div\n    *ngIf=\"statusBarConfig\"\n    class=\"status-bar-wrapper overflow-x-auto\"\n    [ngClass]=\"{ collapsed: isCollapsed }\"\n  >\n    <div class=\"description flex\" *ngIf=\"description\">\n      <!-- Entity icon -->\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 ? statusBarConfig.icon : 'UNDEFINED') +\n            '.svg'\n          \"\n          [height]=\"iconStyle.height.toString()\"\n          [width]=\"iconStyle.width.toString()\"\n        ></p-image>\n      </div>\n      }\n\n      <!-- Descriptive data -->\n\n      <ul>\n        <li\n          class=\"text-sm flex mb-1\"\n          *ngFor=\"let attr of statusBarConfig.description\"\n        >\n          <span class=\"mr-1 text-600 font-semibold\"\n            >{{ attr.label | translate }}:</span\n          >\n          <span *ngIf=\"attr.value; else empty\">\n            <i\n              *ngIf=\"attr.icon\"\n              class=\"{{ attr.icon }} mr-1\"\n              style=\"font-size: 0.8em\"\n            ></i>\n            <ng-container [ngSwitch]=\"attr.type\">\n              <span *ngSwitchCase=\"'DATE'\">{{\n                attr.value | date : dateFormat\n              }}</span>\n              <span\n                *ngSwitchDefault\n                pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n              >\n                {{ attr.value | textLength : 20 }}\n              </span>\n            </ng-container>\n          </span>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n      <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n      <div class=\"mt-1\">\n        <ng-container [ngSwitch]=\"attr.type\">\n          <!-- TAG -->\n          <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <span class=\"font-semibold text-600\">{{ attr.label }}</span>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"tagPopover.toggle($event)\"\n                    (mouseleave)=\"tagPopover.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  [style.color]=\"attr.color\"\n                  class=\"text-xl mt-1\"\n                >\n                  {{ attr.value }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #tagPopover>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"text-sm\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"\" style=\"min-width: 100px\">\n                    <phoenix-tag\n                      [customColor]=\"item.value1 || ''\"\n                      [content]=\"item.value\"\n                    ></phoenix-tag>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- STRING -->\n          <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <ng-container *ngIf=\"attr.url; else normalLabel\">\n                    <a\n                      class=\"font-semibold text-blue-600 cursor-pointer underline\"\n                      (click)=\"onListItemClick.emit(attr)\"\n                    >\n                      {{ attr.label }}\n                    </a>\n                  </ng-container>\n                  \n                  <ng-template #normalLabel>\n                    <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n                  </ng-template>\n                  <i\n                    *ngIf=\"attr?.tooltip?.length\"\n                    class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n                    (mouseenter)=\"stringPopover.toggle($event)\"\n                    (mouseleave)=\"stringPopover.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | textLength : 29 }}\n                </div>\n              </div>\n            </div>\n            <p-popover #stringPopover>\n              <ng-container *ngFor=\"let item of attr?.tooltip\">\n                <div class=\"flex justify-content-between\">\n                  <span class=\"text-sm\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"\" style=\"min-width: 100px\">\n                    <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n                      <!-- LINK -->\n                      <a\n                        *ngSwitchCase=\"'LINK'\"\n                        [href]=\"getFullUrl(item.value)\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        class=\"text-blue-500 text-sm underline cursor-pointer\"\n                      >\n                        {{ item.label || \"Open\" }}\n                      </a>\n\n                      <!-- STRING -->\n                      <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n                        {{ item.value }}\n                      </span>\n\n                      <!-- TAG (default or explicitly specified) -->\n                      <phoenix-tag\n                        *ngSwitchDefault\n                        [customColor]=\"item.value1 || ''\"\n                        [content]=\"item.value\"\n                      ></phoenix-tag>\n                    </ng-container>\n                  </span>\n                </div>\n              </ng-container>\n            </p-popover>\n          </ng-container>\n\n          <!-- PERSON -->\n          <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column font-semibold text-600\">\n                {{ attr.label | translate }}\n                <div\n                  class=\"person-wrap\"\n                  *ngIf=\"attr?.value || attr?.value1; else empty\"\n                >\n                  <div class=\"person-avatar\">\n                    {{ attr?.value?.charAt(0)?.toUpperCase() }}\n                  </div>\n                  <div\n                    class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n                    pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n                  >\n                    {{ attr?.value }} {{ attr?.value1 }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- DATE -->\n          <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n            <div class=\"attribute flex justify-content-center\">\n              <div class=\"flex flex-column\">\n                <div class=\"flex align-items-center gap-2\">\n                  <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"\n                      attr?.value !== undefined &&\n                      attr?.value !== null &&\n                      attr?.value !== '--'\n                    \"\n                    class=\"pi pi-info-circle text-blue-500 mr-1\"\n                    (mouseenter)=\"overlayPanel.toggle($event)\"\n                    (mouseleave)=\"overlayPanel.toggle($event)\"\n                  ></i>\n                </div>\n                <div\n                  *ngIf=\"attr?.value; else empty\"\n                  pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n                >\n                  {{ attr.value | textLength : 20 }}\n                </div>\n              </div>\n            </div>\n\n            <p-popover #overlayPanel>\n              <!-- Created by -->\n\n              <div *ngFor=\"let item of attr.tooltip\" class=\"mb-2\">\n                <div class=\"font-sm white-space-nowrap mb-1\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"align-self-center\">\n                    <p-avatar\n                      shape=\"circle\"\n                      [label]=\"item.value ? (item.value | firstLetter) : ''\"\n                    ></p-avatar>\n                  </div>\n                  <div>\n                    <div class=\"text-blue-800 font-sm ml-1\">\n                      {{ item.value }}\n                    </div>\n                    <div class=\"text-sm\">\n                      {{ item.value1 }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </p-popover>\n          </ng-container>\n\n          <!-- LIST -->\n          <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n            <div class=\"attribute flex justify-content-center\">\n              <div>\n                <label class=\"font-semibold text-600\">{{\n                  attr.label | translate\n                }}</label>\n                <ul\n                  class=\"list\"\n                  *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n                >\n                  <li\n                    [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n                    class=\"white-space-nowrap mb-1\"\n                    *ngFor=\"let item of attr.value\"\n                    (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n                  >\n                    <span\n                      pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\"\n                    >\n                      {{ item.name | textLength : 20 }}\n                    </span>\n                    <i class=\"pi pi-link mt-1\"></i>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Collapse/Expand button -->\n  <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n    <div class=\"toggler\">\n      <p-button\n        [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n        size=\"small\"\n        variant=\"outlined\"\n        (click)=\"isCollapsed = !isCollapsed\"\n      />\n    </div>\n  </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n  <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.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:7px}.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:5px 5px 5px 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%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
         }], propDecorators: { statusBarConfig: [{
                 type: Input
             }], iconEnable: [{