@fuentis/phoenix-ui 0.0.9-alpha.166 → 0.0.9-alpha.167

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -5570,7 +5570,7 @@ class StatusBarComponent {
         return '/' + path.replace(/^\/+/, '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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      <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      <!-- 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\">{{ attr.label | translate }}:</span>\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 *ngSwitchDefault pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\">\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-medium\">{{ 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=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"mt-2 mb-2\" 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>{{ 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=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"mt-2 mb-2\" 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 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\">\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) }}\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>{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"attr?.value !== undefined && attr?.value !== null && attr?.value !== '--'\"\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-4\">\n                <div class=\"mb-2 text-600\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"mr-2 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-bold\">\n                      {{ item.value }}\n                    </div>\n                    <div>\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>{{ attr.label | translate }}</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 pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\">\n                      {{ attr.value | textLength : 20 }}\n                    </span>\n                    <i class=\"pi pi-link\" class=\"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: "14.0.0", version: "19.2.11", 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      <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      <!-- 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\">{{ attr.label | translate }}:</span>\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 *ngSwitchDefault pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\">\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-medium\">{{ 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=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"mt-2 mb-2\" 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>{{ 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=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"mt-2 mb-2\" 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 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\">\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) }}\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>{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"attr?.value !== undefined && attr?.value !== null && attr?.value !== '--'\"\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-4\">\n                <div class=\"mb-2 text-600\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"mr-2 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-bold\">\n                      {{ item.value }}\n                    </div>\n                    <div>\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>{{ attr.label | translate }}</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 pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\">\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.11", ngImport: i0, type: StatusBarComponent, decorators: [{
             type: Component,
@@ -5586,7 +5586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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      <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      <!-- 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\">{{ attr.label | translate }}:</span>\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 *ngSwitchDefault pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\">\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-medium\">{{ 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=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"mt-2 mb-2\" 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>{{ 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=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"mt-2 mb-2\" 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 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\">\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) }}\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>{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"attr?.value !== undefined && attr?.value !== null && attr?.value !== '--'\"\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-4\">\n                <div class=\"mb-2 text-600\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"mr-2 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-bold\">\n                      {{ item.value }}\n                    </div>\n                    <div>\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>{{ attr.label | translate }}</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 pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\">\n                      {{ attr.value | textLength : 20 }}\n                    </span>\n                    <i class=\"pi pi-link\" class=\"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      <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      <!-- 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\">{{ attr.label | translate }}:</span>\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 *ngSwitchDefault pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\">\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-medium\">{{ 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=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"mt-2 mb-2\" 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>{{ 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=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n                    {{ item?.label }}:\n                  </span>\n                  <span class=\"mt-2 mb-2\" 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 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\">\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) }}\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>{{ attr.label }}</label>\n                  <i\n                    *ngIf=\"attr?.value !== undefined && attr?.value !== null && attr?.value !== '--'\"\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-4\">\n                <div class=\"mb-2 text-600\">\n                  {{ item.label | translate }}\n                </div>\n                <div class=\"flex\">\n                  <div class=\"mr-2 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-bold\">\n                      {{ item.value }}\n                    </div>\n                    <div>\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>{{ attr.label | translate }}</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 pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\">\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: [{