@fuentis/phoenix-ui 0.0.9-alpha.209 → 0.0.9-alpha.211
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5821,7 +5821,7 @@ class StatusBarComponent {
|
|
|
5821
5821
|
return '/' + path.replace(/^\/+/, '');
|
|
5822
5822
|
}
|
|
5823
5823
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5824
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n @if (statusBarConfig.icon) {\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\n\n <!-- Descriptive data -->\n\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"mr-1 text-600 font-semibold\"\n >{{ attr.label | translate }}:</span\n >\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span\n *ngSwitchDefault\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <span class=\"font-semibold text-600\">{{ attr.label }}</span>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"tagPopover.toggle($event)\"\n (mouseleave)=\"tagPopover.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-1\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #tagPopover>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"text-sm\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <span class=\"\" style=\"min-width: 100px\">\n <phoenix-tag\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"stringPopover.toggle($event)\"\n (mouseleave)=\"stringPopover.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 29 }}\n </div>\n </div>\n </div>\n <p-popover #stringPopover>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"text-sm\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <span class=\"\" style=\"min-width: 100px\">\n <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n <!-- LINK -->\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 text-sm underline cursor-pointer\"\n >\n {{ item.label || \"Open\" }}\n </a>\n\n <!-- STRING -->\n <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n {{ item.value }}\n </span>\n\n <!-- TAG (default or explicitly specified) -->\n <phoenix-tag\n *ngSwitchDefault\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </ng-container>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column font-semibold text-600\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n <i\n *ngIf=\"\n attr?.value !== undefined &&\n attr?.value !== null &&\n attr?.value !== '--'\n \"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-2\">\n <div class=\"font-sm white-space-nowrap mb-1\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-sm ml-1\">\n {{ item.value }}\n </div>\n <div class=\"text-sm\">\n {{ item.value1 }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label class=\"font-semibold text-600\">{{\n attr.label | translate\n }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n <span\n pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\"\n >\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <p-button\n [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n size=\"small\"\n variant=\"outlined\"\n (click)=\"isCollapsed = !isCollapsed\"\n />\n </div>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i7.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
5824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n @if (statusBarConfig.icon) {\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\n\n <!-- Descriptive data -->\n\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"mr-1 text-600 font-semibold\"\n >{{ attr.label | translate }}:</span\n >\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span\n *ngSwitchDefault\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <span class=\"font-semibold text-600\">{{ attr.label }}</span>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"tagPopover.toggle($event)\"\n (mouseleave)=\"tagPopover.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-1\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #tagPopover>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"text-sm\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <span class=\"\" style=\"min-width: 100px\">\n <phoenix-tag\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <ng-container *ngIf=\"attr.url; else normalLabel\">\n <a\n class=\"font-semibold text-blue-600 cursor-pointer underline\"\n (click)=\"onListItemClick.emit(attr)\"\n >\n {{ attr.label }}\n </a>\n </ng-container>\n \n <ng-template #normalLabel>\n <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n </ng-template>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"stringPopover.toggle($event)\"\n (mouseleave)=\"stringPopover.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 29 }}\n </div>\n </div>\n </div>\n <p-popover #stringPopover>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"text-sm\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <span class=\"\" style=\"min-width: 100px\">\n <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n <!-- LINK -->\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 text-sm underline cursor-pointer\"\n >\n {{ item.label || \"Open\" }}\n </a>\n\n <!-- STRING -->\n <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n {{ item.value }}\n </span>\n\n <!-- TAG (default or explicitly specified) -->\n <phoenix-tag\n *ngSwitchDefault\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </ng-container>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column font-semibold text-600\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n <i\n *ngIf=\"\n attr?.value !== undefined &&\n attr?.value !== null &&\n attr?.value !== '--'\n \"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-2\">\n <div class=\"font-sm white-space-nowrap mb-1\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-sm ml-1\">\n {{ item.value }}\n </div>\n <div class=\"text-sm\">\n {{ item.value1 }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label class=\"font-semibold text-600\">{{\n attr.label | translate\n }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n <span\n pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\"\n >\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <p-button\n [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n size=\"small\"\n variant=\"outlined\"\n (click)=\"isCollapsed = !isCollapsed\"\n />\n </div>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i7.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
5825
5825
|
}
|
|
5826
5826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
5827
5827
|
type: Component,
|
|
@@ -5837,7 +5837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5837
5837
|
FirstLetterPipe,
|
|
5838
5838
|
ButtonModule,
|
|
5839
5839
|
PopoverModule,
|
|
5840
|
-
], template: "<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n @if (statusBarConfig.icon) {\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\n\n <!-- Descriptive data -->\n\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"mr-1 text-600 font-semibold\"\n >{{ attr.label | translate }}:</span\n >\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span\n *ngSwitchDefault\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <span class=\"font-semibold text-600\">{{ attr.label }}</span>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"tagPopover.toggle($event)\"\n (mouseleave)=\"tagPopover.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-1\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #tagPopover>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"text-sm\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <span class=\"\" style=\"min-width: 100px\">\n <phoenix-tag\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"stringPopover.toggle($event)\"\n (mouseleave)=\"stringPopover.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 29 }}\n </div>\n </div>\n </div>\n <p-popover #stringPopover>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"text-sm\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <span class=\"\" style=\"min-width: 100px\">\n <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n <!-- LINK -->\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 text-sm underline cursor-pointer\"\n >\n {{ item.label || \"Open\" }}\n </a>\n\n <!-- STRING -->\n <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n {{ item.value }}\n </span>\n\n <!-- TAG (default or explicitly specified) -->\n <phoenix-tag\n *ngSwitchDefault\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </ng-container>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column font-semibold text-600\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n <i\n *ngIf=\"\n attr?.value !== undefined &&\n attr?.value !== null &&\n attr?.value !== '--'\n \"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-2\">\n <div class=\"font-sm white-space-nowrap mb-1\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-sm ml-1\">\n {{ item.value }}\n </div>\n <div class=\"text-sm\">\n {{ item.value1 }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label class=\"font-semibold text-600\">{{\n attr.label | translate\n }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n <span\n pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\"\n >\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <p-button\n [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n size=\"small\"\n variant=\"outlined\"\n (click)=\"isCollapsed = !isCollapsed\"\n />\n </div>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
|
|
5840
|
+
], template: "<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n @if (statusBarConfig.icon) {\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\n\n <!-- Descriptive data -->\n\n <ul>\n <li\n class=\"text-sm flex mb-1\"\n *ngFor=\"let attr of statusBarConfig.description\"\n >\n <span class=\"mr-1 text-600 font-semibold\"\n >{{ attr.label | translate }}:</span\n >\n <span *ngIf=\"attr.value; else empty\">\n <i\n *ngIf=\"attr.icon\"\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{\n attr.value | date : dateFormat\n }}</span>\n <span\n *ngSwitchDefault\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <span class=\"font-semibold text-600\">{{ attr.label }}</span>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"tagPopover.toggle($event)\"\n (mouseleave)=\"tagPopover.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-1\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #tagPopover>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"text-sm\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <span class=\"\" style=\"min-width: 100px\">\n <phoenix-tag\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <ng-container *ngIf=\"attr.url; else normalLabel\">\n <a\n class=\"font-semibold text-blue-600 cursor-pointer underline\"\n (click)=\"onListItemClick.emit(attr)\"\n >\n {{ attr.label }}\n </a>\n </ng-container>\n \n <ng-template #normalLabel>\n <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n </ng-template>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"stringPopover.toggle($event)\"\n (mouseleave)=\"stringPopover.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 29 }}\n </div>\n </div>\n </div>\n <p-popover #stringPopover>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"text-sm\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <span class=\"\" style=\"min-width: 100px\">\n <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n <!-- LINK -->\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 text-sm underline cursor-pointer\"\n >\n {{ item.label || \"Open\" }}\n </a>\n\n <!-- STRING -->\n <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n {{ item.value }}\n </span>\n\n <!-- TAG (default or explicitly specified) -->\n <phoenix-tag\n *ngSwitchDefault\n [customColor]=\"item.value1 || ''\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </ng-container>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column font-semibold text-600\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <label class=\"font-semibold text-600\">{{ attr.label }}</label>\n <i\n *ngIf=\"\n attr?.value !== undefined &&\n attr?.value !== null &&\n attr?.value !== '--'\n \"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 20 ? attr.value : '' }}\"\n >\n {{ attr.value | textLength : 20 }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-2\">\n <div class=\"font-sm white-space-nowrap mb-1\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-sm ml-1\">\n {{ item.value }}\n </div>\n <div class=\"text-sm\">\n {{ item.value1 }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label class=\"font-semibold text-600\">{{\n attr.label | translate\n }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n <span\n pTooltip=\"{{ item?.name?.length > 20 ? item.name : '' }}\"\n >\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center\" *ngIf=\"enableClosing\">\n <div class=\"toggler\">\n <p-button\n [icon]=\"isCollapsed ? 'pi pi-angle-down' : 'pi pi-angle-up'\"\n size=\"small\"\n variant=\"outlined\"\n (click)=\"isCollapsed = !isCollapsed\"\n />\n </div>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:7px}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
|
|
5841
5841
|
}], propDecorators: { statusBarConfig: [{
|
|
5842
5842
|
type: Input
|
|
5843
5843
|
}], iconEnable: [{
|