@fuentis/phoenix-ui 0.0.9-alpha.262 → 0.0.9-alpha.263
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.
|
@@ -6024,7 +6024,7 @@ class StatusAttributeDisplayComponent {
|
|
|
6024
6024
|
return label ? label.trim().split(/\s+/).length > 2 : false;
|
|
6025
6025
|
}
|
|
6026
6026
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6027
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label class=\"font-semibold text-600\" [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\">\n {{ attr.label | translate }}\n </label>\n <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\">\n </i>\n </div>\n\n <!-- VALUE -->\n <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n <!-- STRING -->\n <span\n *ngSwitchCase=\"'STRING'\"\n [pTooltip]=\"attr.value?.length > 20 && !attr.tooltip ? attr.value : null\"\n >\n {{ attr.value | textLength: 20 }}\n </span>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n </span>\n\n <!-- LINK -->\n <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n {{ attr.value || '--' }}\n </a>\n\n <!-- PERSON -->\n <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\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 || '')).trim().length > 20\n ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n : undefined\"\n >\n <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n }}\u2026\n </ng-container>\n <ng-template #fullText>\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n }}\n </ng-template>\n </div>\n </div>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || '--' }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \">\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">\n {{ item.label }}:\n </div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\">\n {{ item.label || 'Open' }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div *ngIf=\"item.value; else empty\" class=\"text-sm\"\n style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date: dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-2 truncate\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n </phoenix-tag>\n </ng-container>\n </ng-container>\n\n </ng-container>\n </div>\n\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", 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;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding: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}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}\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.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { 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: PopoverModule }, { kind: "component", type: i5.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
6027
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label class=\"font-semibold text-600\" [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\">\n {{ attr.label | translate }}\n </label>\n <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\">\n </i>\n </div>\n\n <!-- VALUE -->\n <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a *ngIf=\"attr.url; else plainText\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength: 20 }}\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength: 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n </span>\n\n <!-- LINK -->\n <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n {{ attr.value || '--' }}\n </a>\n\n <!-- PERSON -->\n <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\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 || '')).trim().length > 20\n ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n : undefined\"\n >\n <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n }}\u2026\n </ng-container>\n <ng-template #fullText>\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n }}\n </ng-template>\n </div>\n </div>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || '--' }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \">\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">\n {{ item.label }}:\n </div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\">\n {{ item.label || 'Open' }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div *ngIf=\"item.value; else empty\" class=\"text-sm\"\n style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date: dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-2 truncate\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n </phoenix-tag>\n </ng-container>\n </ng-container>\n\n </ng-container>\n </div>\n\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", 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;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding: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}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}\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.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { 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: PopoverModule }, { kind: "component", type: i5.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
6028
6028
|
}
|
|
6029
6029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
|
|
6030
6030
|
type: Component,
|
|
@@ -6037,7 +6037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6037
6037
|
AvatarModule,
|
|
6038
6038
|
FirstLetterPipe,
|
|
6039
6039
|
TextLength
|
|
6040
|
-
], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label class=\"font-semibold text-600\" [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\">\n {{ attr.label | translate }}\n </label>\n <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\">\n </i>\n </div>\n\n <!-- VALUE -->\n <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n <!-- STRING -->\n
|
|
6040
|
+
], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label class=\"font-semibold text-600\" [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\">\n {{ attr.label | translate }}\n </label>\n <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\">\n </i>\n </div>\n\n <!-- VALUE -->\n <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a *ngIf=\"attr.url; else plainText\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength: 20 }}\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength: 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n </span>\n\n <!-- LINK -->\n <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n {{ attr.value || '--' }}\n </a>\n\n <!-- PERSON -->\n <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\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 || '')).trim().length > 20\n ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n : undefined\"\n >\n <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n }}\u2026\n </ng-container>\n <ng-template #fullText>\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n }}\n </ng-template>\n </div>\n </div>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || '--' }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \">\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">\n {{ item.label }}:\n </div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\">\n {{ item.label || 'Open' }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div *ngIf=\"item.value; else empty\" class=\"text-sm\"\n style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date: dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-2 truncate\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n </phoenix-tag>\n </ng-container>\n </ng-container>\n\n </ng-container>\n </div>\n\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", 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;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding: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}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}\n"] }]
|
|
6041
6041
|
}], propDecorators: { attr: [{
|
|
6042
6042
|
type: Input
|
|
6043
6043
|
}], dateFormat: [{
|