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

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -215,7 +215,7 @@ class SearchCardComponent {
         this.onSelectFilterEvent.emit(data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: "searchData", tab: "tab", mocekedFilters: "mocekedFilters", checkboxes: "checkboxes" }, outputs: { onScrollEvent: "onScrollEvent", onSelectLinkEvent: "onSelectLinkEvent", onSelectFilterEvent: "onSelectFilterEvent" }, ngImport: i0, template: "<ng-container>\n  <div class=\"flex h-20rem\">\n    <div\n      class=\"overflow-y-auto\"\n      [style.width.vw]=\"35\"\n      (scroll)=\"onScroll($event)\"\n      *ngIf=\"searchData?.length > 0; else message\"\n    >\n      <ng-container *ngFor=\"let link of searchData\">\n        <div\n          class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n          (click)=\"setLinkUrl(link)\"\n        >\n          <p-image\n            class=\"border-round-sm p-2 mt-1\"\n            [src]=\"\n              'assets/layout/images/object_types/pink/full/' +\n              link.type.labelKey +\n              '.svg'\n            \"\n            height=\"24\"\n            width=\"27\"\n          ></p-image>\n          <div class=\"flex flex-column justify-content-around ml-2\">\n            <span\n              [pTooltip]=\"link.name\"\n              tooltipPosition=\"bottom\"\n              class=\"mt-1 font-light text-lg\"\n            >\n              <small class=\"mr-2 font-light text-lg\"\n                >{{ link.title | slice : 0 : 50\n                }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n              >\n\n              {{ link.name | slice : 0 : 50\n              }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n              <small class=\"font-light text-base text-400\">{{\n                link.type?.labelKeyVal | slice : 0 : 20\n              }}</small>\n            </span>\n            <div class=\"flex\">\n              <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n                >{{ \"COMMON.ENTITY\" | translate }}:&nbsp;{{\n                  link.entity.name | slice : 0 : 50\n                }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n              <span\n                [pTooltip]=\"link.asset.name\"\n                *ngIf=\"link?.asset?.name\"\n                class=\"ml-2 mb-1 text-sm\"\n                >{{ \"COMMON.ASSET\" | translate }}:&nbsp;{{\n                  link.asset.name | slice : 0 : 50\n                }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <ng-container\n      *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n    >\n      <p-divider layout=\"vertical\"></p-divider>\n      <div\n        class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n      >\n        <ng-container *ngFor=\"let item of mocekedFilters\">\n          <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n            >{{ item.title | translate }}\n          </span>\n          <div class=\"h-25rem flex flex-column justify-content-start\">\n            <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n              <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n                <p-checkbox\n                  [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n                  [binary]=\"true\"\n                  [inputId]=\"checkbox?.name\"\n                  (onChange)=\"onClick($event, checkbox?.labelKey)\"\n                ></p-checkbox>\n\n                <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n                  \"LABELS.\" + checkbox.name | translate\n                }}</label>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n<ng-template #message>\n  <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n    {{ \"MESSAGE.NO_RESULTS_FOUND\" | translate }}\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { 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: DividerModule }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: "searchData", tab: "tab", mocekedFilters: "mocekedFilters", checkboxes: "checkboxes" }, outputs: { onScrollEvent: "onScrollEvent", onSelectLinkEvent: "onSelectLinkEvent", onSelectFilterEvent: "onSelectFilterEvent" }, ngImport: i0, template: "<ng-container>\n  <div class=\"flex h-20rem\">\n    <div\n      class=\"overflow-y-auto\"\n      [style.width.vw]=\"35\"\n      (scroll)=\"onScroll($event)\"\n      *ngIf=\"searchData?.length > 0; else message\"\n    >\n      <ng-container *ngFor=\"let link of searchData\">\n        <div\n          class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n          (click)=\"setLinkUrl(link)\"\n        >\n          <p-image\n            class=\"border-round-sm p-2 mt-1\"\n            [src]=\"\n              'assets/layout/images/object_types/pink/full/' +\n              link.type.labelKey +\n              '.svg'\n            \"\n            height=\"24\"\n            width=\"27\"\n          ></p-image>\n          <div class=\"flex flex-column justify-content-around ml-2\">\n            <span\n              [pTooltip]=\"link.name\"\n              tooltipPosition=\"bottom\"\n              class=\"mt-1 font-light text-lg\"\n            >\n              <small class=\"mr-2 font-light text-lg\"\n                >{{ link.title | slice : 0 : 50\n                }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n              >\n\n              {{ link.name | slice : 0 : 50\n              }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n              <small class=\"font-light text-base text-400\">{{\n                link.type?.labelKeyVal | slice : 0 : 20\n              }}</small>\n            </span>\n            <div class=\"flex\">\n              <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n                >{{ \"COMMON.ENTITY\" | translate }}:&nbsp;{{\n                  link.entity.name | slice : 0 : 50\n                }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n              <span\n                [pTooltip]=\"link.asset.name\"\n                *ngIf=\"link?.asset?.name\"\n                class=\"ml-2 mb-1 text-sm\"\n                >{{ \"COMMON.ASSET\" | translate }}:&nbsp;{{\n                  link.asset.name | slice : 0 : 50\n                }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <ng-container\n      *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n    >\n      <p-divider layout=\"vertical\"></p-divider>\n      <div\n        class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n      >\n        <ng-container *ngFor=\"let item of mocekedFilters\">\n          <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n            >{{ item.title | translate }}\n          </span>\n          <div class=\"h-25rem flex flex-column justify-content-start\">\n            <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n              <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n                <p-checkbox\n                  [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n                  [binary]=\"true\"\n                  [inputId]=\"checkbox?.name\"\n                  (onChange)=\"onClick($event, checkbox?.labelKey)\"\n                ></p-checkbox>\n\n                <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n                  checkbox.name | translate\n                }}</label>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n<ng-template #message>\n  <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n    {{ \"MESSAGE.NO_RESULTS_FOUND\" | translate }}\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { 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: DividerModule }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchCardComponent, decorators: [{
             type: Component,
@@ -227,7 +227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         CheckboxModule,
                         FormsModule,
                         ImageModule,
-                    ], template: "<ng-container>\n  <div class=\"flex h-20rem\">\n    <div\n      class=\"overflow-y-auto\"\n      [style.width.vw]=\"35\"\n      (scroll)=\"onScroll($event)\"\n      *ngIf=\"searchData?.length > 0; else message\"\n    >\n      <ng-container *ngFor=\"let link of searchData\">\n        <div\n          class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n          (click)=\"setLinkUrl(link)\"\n        >\n          <p-image\n            class=\"border-round-sm p-2 mt-1\"\n            [src]=\"\n              'assets/layout/images/object_types/pink/full/' +\n              link.type.labelKey +\n              '.svg'\n            \"\n            height=\"24\"\n            width=\"27\"\n          ></p-image>\n          <div class=\"flex flex-column justify-content-around ml-2\">\n            <span\n              [pTooltip]=\"link.name\"\n              tooltipPosition=\"bottom\"\n              class=\"mt-1 font-light text-lg\"\n            >\n              <small class=\"mr-2 font-light text-lg\"\n                >{{ link.title | slice : 0 : 50\n                }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n              >\n\n              {{ link.name | slice : 0 : 50\n              }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n              <small class=\"font-light text-base text-400\">{{\n                link.type?.labelKeyVal | slice : 0 : 20\n              }}</small>\n            </span>\n            <div class=\"flex\">\n              <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n                >{{ \"COMMON.ENTITY\" | translate }}:&nbsp;{{\n                  link.entity.name | slice : 0 : 50\n                }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n              <span\n                [pTooltip]=\"link.asset.name\"\n                *ngIf=\"link?.asset?.name\"\n                class=\"ml-2 mb-1 text-sm\"\n                >{{ \"COMMON.ASSET\" | translate }}:&nbsp;{{\n                  link.asset.name | slice : 0 : 50\n                }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <ng-container\n      *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n    >\n      <p-divider layout=\"vertical\"></p-divider>\n      <div\n        class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n      >\n        <ng-container *ngFor=\"let item of mocekedFilters\">\n          <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n            >{{ item.title | translate }}\n          </span>\n          <div class=\"h-25rem flex flex-column justify-content-start\">\n            <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n              <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n                <p-checkbox\n                  [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n                  [binary]=\"true\"\n                  [inputId]=\"checkbox?.name\"\n                  (onChange)=\"onClick($event, checkbox?.labelKey)\"\n                ></p-checkbox>\n\n                <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n                  \"LABELS.\" + checkbox.name | translate\n                }}</label>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n<ng-template #message>\n  <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n    {{ \"MESSAGE.NO_RESULTS_FOUND\" | translate }}\n  </div>\n</ng-template>\n" }]
+                    ], template: "<ng-container>\n  <div class=\"flex h-20rem\">\n    <div\n      class=\"overflow-y-auto\"\n      [style.width.vw]=\"35\"\n      (scroll)=\"onScroll($event)\"\n      *ngIf=\"searchData?.length > 0; else message\"\n    >\n      <ng-container *ngFor=\"let link of searchData\">\n        <div\n          class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n          (click)=\"setLinkUrl(link)\"\n        >\n          <p-image\n            class=\"border-round-sm p-2 mt-1\"\n            [src]=\"\n              'assets/layout/images/object_types/pink/full/' +\n              link.type.labelKey +\n              '.svg'\n            \"\n            height=\"24\"\n            width=\"27\"\n          ></p-image>\n          <div class=\"flex flex-column justify-content-around ml-2\">\n            <span\n              [pTooltip]=\"link.name\"\n              tooltipPosition=\"bottom\"\n              class=\"mt-1 font-light text-lg\"\n            >\n              <small class=\"mr-2 font-light text-lg\"\n                >{{ link.title | slice : 0 : 50\n                }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n              >\n\n              {{ link.name | slice : 0 : 50\n              }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n              <small class=\"font-light text-base text-400\">{{\n                link.type?.labelKeyVal | slice : 0 : 20\n              }}</small>\n            </span>\n            <div class=\"flex\">\n              <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n                >{{ \"COMMON.ENTITY\" | translate }}:&nbsp;{{\n                  link.entity.name | slice : 0 : 50\n                }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n              <span\n                [pTooltip]=\"link.asset.name\"\n                *ngIf=\"link?.asset?.name\"\n                class=\"ml-2 mb-1 text-sm\"\n                >{{ \"COMMON.ASSET\" | translate }}:&nbsp;{{\n                  link.asset.name | slice : 0 : 50\n                }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n              >\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <ng-container\n      *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n    >\n      <p-divider layout=\"vertical\"></p-divider>\n      <div\n        class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n      >\n        <ng-container *ngFor=\"let item of mocekedFilters\">\n          <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n            >{{ item.title | translate }}\n          </span>\n          <div class=\"h-25rem flex flex-column justify-content-start\">\n            <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n              <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n                <p-checkbox\n                  [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n                  [binary]=\"true\"\n                  [inputId]=\"checkbox?.name\"\n                  (onChange)=\"onClick($event, checkbox?.labelKey)\"\n                ></p-checkbox>\n\n                <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n                  checkbox.name | translate\n                }}</label>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n<ng-template #message>\n  <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n    {{ \"MESSAGE.NO_RESULTS_FOUND\" | translate }}\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { searchData: [{
                 type: Input
             }], tab: [{
@@ -367,8 +367,9 @@ class SearchBarComponent {
         }
     }
     setLinkUrl(url) {
-        if (url) {
-            window.open(url);
+        const baseUrl = this.tabs()?.[this.tabIndex]?.linkUrl;
+        if (url && baseUrl) {
+            window.open(baseUrl + url);
         }
     }
     onScroll(scrollObj) {
@@ -442,10 +443,8 @@ class SearchBarComponent {
             const lablesArr = [];
             this.searchData?.forEach((item) => {
                 if (!lablesArr.includes(item.type.labelKey)) {
-                    const str = this.translate.currentLang;
-                    const label = 'labelKeyVal' + str.charAt(0).toUpperCase() + str.slice(1);
                     this.mocekedFilters[0].checkboxes.push({
-                        name: item.type[label],
+                        name: item.type?.labelKeyVal,
                         labelKey: item.type.labelKey,
                         value: false,
                     });
@@ -462,7 +461,7 @@ class SearchBarComponent {
             this.reloadSubscription$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchBarComponent, deps: [{ token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nes", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div (click)=\"onParentClick($event)\" class=\"p-input-icon-left ml-1\" #elm>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"onParentClick($event)\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw' }\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGE.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    <p-tabs value=\"0\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab [value]=\"tab.id\" (valueChange)=\"tabChange($event)\">{{\n          tab.header\n        }}</p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event?.url)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels>\n    </p-tabs>\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nes", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div (click)=\"onParentClick($event)\" class=\"p-input-icon-left ml-1\" #elm>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"onParentClick($event); isOpen = true\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw' }\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGE.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    @if(inputText) {\n    <p-tabs [value]=\"tabIndex\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab [value]=\"tab.id\" (valueChange)=\"tabChange($event)\">{{\n          tab.header\n        }}</p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event?.url)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels> </p-tabs\n    >}\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }], animations: [
             trigger('openClose', [
                 state('open', style({
                     width: '50vw',
@@ -500,7 +499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                             })),
                             transition('* <=> *', [animate('0.1s ease-in-out')]),
                         ]),
-                    ], template: "<div (click)=\"onParentClick($event)\" class=\"p-input-icon-left ml-1\" #elm>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"onParentClick($event)\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw' }\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGE.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    <p-tabs value=\"0\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab [value]=\"tab.id\" (valueChange)=\"tabChange($event)\">{{\n          tab.header\n        }}</p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event?.url)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels>\n    </p-tabs>\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}\n"] }]
+                    ], template: "<div (click)=\"onParentClick($event)\" class=\"p-input-icon-left ml-1\" #elm>\n  <p-iconfield>\n    <p-inputicon styleClass=\"pi pi-search\" />\n    <input\n      [@openClose]=\"isOpen ? 'open' : 'closed'\"\n      type=\"text\"\n      pInputText\n      placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n      (input)=\"valueChanges.next($event)\"\n      (focus)=\"onParentClick($event); isOpen = true\"\n    />\n  </p-iconfield>\n</div>\n<p-popover\n  [dismissable]=\"true\"\n  [showTransitionOptions]=\"'.2s ease-out'\"\n  [autoZIndex]=\"true\"\n  #op\n  [style]=\"{ width: '50vw' }\"\n  (onHide)=\"isOpen = false\"\n>\n  <div\n    *ngIf=\"!inputText\"\n    class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n  >\n    <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n    <span class=\"text-sm\">{{ \"MESSAGE.START_TYPING\" | translate }}</span>\n  </div>\n\n  <ng-template pTemplate=\"content\">\n    @if(inputText) {\n    <p-tabs [value]=\"tabIndex\">\n      <p-tablist>\n        @for (tab of tabs(); track tab.id) {\n        <p-tab [value]=\"tab.id\" (valueChange)=\"tabChange($event)\">{{\n          tab.header\n        }}</p-tab>\n        }\n      </p-tablist>\n      <p-tabpanels>\n        @for (tab of tabs(); track tab.id) {\n        <p-tabpanel [value]=\"tab.id\">\n          <pho-serach-card\n            [tab]=\"tab.id\"\n            [mocekedFilters]=\"mocekedFilters\"\n            [searchData]=\"searchData\"\n            [checkboxes]=\"checkboxes\"\n            (onScrollEvent)=\"onScroll($event)\"\n            (onSelectLinkEvent)=\"setLinkUrl($event?.url)\"\n            (onSelectFilterEvent)=\"onClick($event)\"\n          >\n          </pho-serach-card>\n        </p-tabpanel>\n        }\n      </p-tabpanels> </p-tabs\n    >}\n  </ng-template>\n</p-popover>\n", styles: [".p-popover:after,.p-popover:before{content:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i3$1.TranslateService }], propDecorators: { nes: [{
                 type: ViewChild,
                 args: ['op']
@@ -5570,7 +5569,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 +5585,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: [{