@fuentis/phoenix-ui 0.0.9-alpha.229 → 0.0.9-alpha.231
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.
|
@@ -5881,7 +5881,7 @@ class StatusAttributeDisplayComponent {
|
|
|
5881
5881
|
return label ? label.trim().split(/\s+/).length > 2 : false;
|
|
5882
5882
|
}
|
|
5883
5883
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5884
|
-
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 *ngSwitchCase=\"'STRING'\">\n {{ attr.value || '--' }}\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.value ? getFullUrl(attr.value) : '#'\" target=\"_blank\" rel=\"noopener\"\n 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 class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"(attr?.value + ' ' + attr?.value1) || '--'\">\n {{ attr?.value || '--' }} {{ attr?.value1 || '' }}\n </div>\n </div>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span\n [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>\n\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"display: grid; grid-template-columns: max-content auto; column-gap: 1rem; row-gap: 0.5rem; align-items: center;\">\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 truncate\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\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 <span *ngIf=\"item.value; else empty\" class=\"block truncate\"\n [pTooltip]=\"item.value.length > 30 ? item.value : undefined\">\n {{ item.value.length > 30 ? (item.value | slice:0:30) + '\u2026' : item.value }}\n </span>\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\n [customColor]=\"item.value1 || ''\"\n [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\"\n [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}\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: 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
5884
|
+
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 *ngSwitchCase=\"'STRING'\">\n {{ attr.value || '--' }}\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\"\n 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 class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"(attr?.value + ' ' + attr?.value1) || '--'\">\n {{ attr?.value || '--' }} {{ attr?.value1 || '' }}\n </div>\n </div>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span\n [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>\n\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"display: grid; grid-template-columns: max-content auto; column-gap: 1rem; row-gap: 0.5rem; align-items: center;\">\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 truncate\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\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 <span *ngIf=\"item.value; else empty\" class=\"block truncate\"\n [pTooltip]=\"item.value.length > 30 ? item.value : undefined\">\n {{ item.value.length > 30 ? (item.value | slice:0:30) + '\u2026' : item.value }}\n </span>\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\n [customColor]=\"item.value1 || ''\"\n [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\"\n [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}\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: 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
5885
5885
|
}
|
|
5886
5886
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
|
|
5887
5887
|
type: Component,
|
|
@@ -5894,7 +5894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5894
5894
|
AvatarModule,
|
|
5895
5895
|
FirstLetterPipe,
|
|
5896
5896
|
TextLength
|
|
5897
|
-
], 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 *ngSwitchCase=\"'STRING'\">\n {{ attr.value || '--' }}\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.
|
|
5897
|
+
], 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 *ngSwitchCase=\"'STRING'\">\n {{ attr.value || '--' }}\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\"\n 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 class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"(attr?.value + ' ' + attr?.value1) || '--'\">\n {{ attr?.value || '--' }} {{ attr?.value1 || '' }}\n </div>\n </div>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span\n [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>\n\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"display: grid; grid-template-columns: max-content auto; column-gap: 1rem; row-gap: 0.5rem; align-items: center;\">\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 truncate\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\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 <span *ngIf=\"item.value; else empty\" class=\"block truncate\"\n [pTooltip]=\"item.value.length > 30 ? item.value : undefined\">\n {{ item.value.length > 30 ? (item.value | slice:0:30) + '\u2026' : item.value }}\n </span>\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\n [customColor]=\"item.value1 || ''\"\n [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\"\n [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}\n"] }]
|
|
5898
5898
|
}], propDecorators: { attr: [{
|
|
5899
5899
|
type: Input
|
|
5900
5900
|
}], dateFormat: [{
|
|
@@ -5917,7 +5917,7 @@ class StatusBarComponent {
|
|
|
5917
5917
|
width: 40,
|
|
5918
5918
|
};
|
|
5919
5919
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5920
|
-
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: "<!-- status-bar.component.html -->\n<div class=\"surface-ground p-3\">\n <div
|
|
5920
|
+
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: "<!-- status-bar.component.html -->\n<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper flex flex-nowrap overflow-x-auto gap-2\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\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 || 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\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 <div class=\"w-full flex justify-content-around\">\n <phoenix-status-attribute-display\n class=\"mt-1\"\n *ngFor=\"let attr of statusBarConfig.attributes\"\n [attr]=\"attr\"\n [dateFormat]=\"dateFormat\"\n (listItemClick)=\"onListItemClick.emit($event)\"\n ></phoenix-status-attribute-display>\n </div>\n </div>\n\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<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;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}\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: i2$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: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TextLength, name: "textLength" }, { 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"] }, { kind: "component", type: StatusAttributeDisplayComponent, selector: "phoenix-status-attribute-display", inputs: ["attr", "dateFormat"], outputs: ["listItemClick"] }] });
|
|
5921
5921
|
}
|
|
5922
5922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
5923
5923
|
type: Component,
|
|
@@ -5933,7 +5933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5933
5933
|
FirstLetterPipe,
|
|
5934
5934
|
ButtonModule,
|
|
5935
5935
|
StatusAttributeDisplayComponent
|
|
5936
|
-
], template: "<!-- status-bar.component.html -->\n<div class=\"surface-ground p-3\">\n <div
|
|
5936
|
+
], template: "<!-- status-bar.component.html -->\n<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper flex flex-nowrap overflow-x-auto gap-2\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\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 || 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\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 <div class=\"w-full flex justify-content-around\">\n <phoenix-status-attribute-display\n class=\"mt-1\"\n *ngFor=\"let attr of statusBarConfig.attributes\"\n [attr]=\"attr\"\n [dateFormat]=\"dateFormat\"\n (listItemClick)=\"onListItemClick.emit($event)\"\n ></phoenix-status-attribute-display>\n </div>\n </div>\n\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<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;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}\n"] }]
|
|
5937
5937
|
}], propDecorators: { statusBarConfig: [{
|
|
5938
5938
|
type: Input
|
|
5939
5939
|
}], iconEnable: [{
|