@fuentis/phoenix-ui 0.0.9-alpha.577 → 0.0.9-alpha.578
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.
|
@@ -7643,6 +7643,7 @@ var StatusColType;
|
|
|
7643
7643
|
StatusColType["PERSON"] = "PERSON";
|
|
7644
7644
|
StatusColType["LINK"] = "LINK";
|
|
7645
7645
|
StatusColType["DATE"] = "DATE";
|
|
7646
|
+
StatusColType["DATE_ONLY"] = "DATE_ONLY";
|
|
7646
7647
|
StatusColType["LIST"] = "LIST";
|
|
7647
7648
|
StatusColType["COUNTRY"] = "COUNTRY";
|
|
7648
7649
|
})(StatusColType || (StatusColType = {}));
|
|
@@ -7677,7 +7678,7 @@ class StatusAttributeDisplayComponent {
|
|
|
7677
7678
|
return (attr?.value?.charAt(0) || '-').toUpperCase();
|
|
7678
7679
|
}
|
|
7679
7680
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7680
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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-start gap-1\">\n <label\n class=\"font-semibold text-500\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n >\n </i>\n </div>\n\n <!-- VALUE -->\n <div\n *ngIf=\"attr?.value; else empty\"\n [ngSwitch]=\"attr.type\"\n style=\"white-space: nowrap\"\n >\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a\n *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 <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n\n <!-- LINK -->\n\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n\n <!-- PERSON -->\n <div\n class=\"person-wrap flex align-items-center gap-2\"\n *ngSwitchCase=\"'PERSON'\"\n >\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul\n *ngSwitchCase=\"'LIST'\"\n class=\"list overflow-x-hidden\"\n style=\"margin-top: 0.25rem\"\n >\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 [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</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n 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 >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\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\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\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-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\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 <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\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\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\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\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </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</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.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: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%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.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}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\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: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.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: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
7681
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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-start gap-1\">\n <label\n class=\"font-semibold text-500\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n\n @if (attr?.tooltip?.length) {\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n ></i>\n }\n </div>\n\n <!-- VALUE -->\n @if (attr?.value) {\n <!-- removed [ngSwitch]=\"attr.type\" because @switch handles it -->\n <div style=\"white-space: nowrap\">\n @switch (attr.type) {\n\n @case ('STRING') {\n @if (attr.url) {\n <a\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 <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n } @else {\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n }\n }\n\n @case ('DATE') {\n <span>\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n }\n\n @case ('DATE_ONLY') {\n <span>\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : 'dd.MM.yyyy')\n : \"--\"\n }}\n </span>\n }\n\n @case ('LINK') {\n <a\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n }\n\n @case ('PERSON') {\n <div class=\"person-wrap flex align-items-center gap-2\">\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n }\n\n @case ('COUNTRY') {\n <span>\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n }\n\n @case ('LIST') {\n <ul class=\"list overflow-x-hidden\" style=\"margin-top: 0.25rem\">\n @for (item of attr.value; track $index) {\n <li\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 [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 }\n </ul>\n }\n\n @default {\n <span [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n }\n }\n </div>\n } @else {\n <span>--</span>\n }\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <div\n 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 >\n @for (item of attr?.tooltip; track $index) {\n @if (item.type !== statusTooltipType.DATE_PERSON) {\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <div class=\"text-sm text-left break-words\">\n @switch (item?.type || statusTooltipType.TAG) {\n\n @case ('LINK') {\n @if (item.value) {\n <a\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n } @else {\n <span>--</span>\n }\n }\n\n @case (statusTooltipType.STRING) {\n @if (item.value) {\n <div\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n } @else {\n <span>--</span>\n }\n }\n\n @case (statusTooltipType.DATE) {\n @if (item.value) {\n <span>{{ item.value | date : dateFormat }}</span>\n } @else {\n <span>--</span>\n }\n }\n\n @case (statusTooltipType.PERSON) {\n @if (item.value) {\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n } @else {\n <span>--</span>\n }\n }\n\n @default {\n @if (item.value) {\n <div class=\"flex gap-2\">\n <span>{{ item.value }}</span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n ></phoenix-tag>\n </div>\n } @else {\n <span>--</span>\n }\n }\n }\n </div>\n }\n }\n </div>\n\n @for (item of attr?.tooltip; track $index) {\n @if (item.type === statusTooltipType.DATE_PERSON) {\n @if (item.value) {\n <div>\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"text-sm\">--</div>\n }\n }\n }\n</p-popover>", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.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: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%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.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}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.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: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
7681
7682
|
}
|
|
7682
7683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
|
|
7683
7684
|
type: Component,
|
|
@@ -7689,7 +7690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7689
7690
|
TranslateModule,
|
|
7690
7691
|
AvatarModule,
|
|
7691
7692
|
TextLength,
|
|
7692
|
-
], 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-start gap-1\">\n <label\n class=\"font-semibold text-500\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n >\n </i>\n </div>\n\n <!-- VALUE -->\n <div\n *ngIf=\"attr?.value; else empty\"\n [ngSwitch]=\"attr.type\"\n style=\"white-space: nowrap\"\n >\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a\n *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 <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n\n <!-- LINK -->\n\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n\n <!-- PERSON -->\n <div\n class=\"person-wrap flex align-items-center gap-2\"\n *ngSwitchCase=\"'PERSON'\"\n >\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul\n *ngSwitchCase=\"'LIST'\"\n class=\"list overflow-x-hidden\"\n style=\"margin-top: 0.25rem\"\n >\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 [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</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n 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 >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\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\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\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-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\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 <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\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\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\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\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </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</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.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: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%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.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}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
|
|
7693
|
+
], 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-start gap-1\">\n <label\n class=\"font-semibold text-500\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n\n @if (attr?.tooltip?.length) {\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n ></i>\n }\n </div>\n\n <!-- VALUE -->\n @if (attr?.value) {\n <!-- removed [ngSwitch]=\"attr.type\" because @switch handles it -->\n <div style=\"white-space: nowrap\">\n @switch (attr.type) {\n\n @case ('STRING') {\n @if (attr.url) {\n <a\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 <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n } @else {\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n }\n }\n\n @case ('DATE') {\n <span>\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n }\n\n @case ('DATE_ONLY') {\n <span>\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : 'dd.MM.yyyy')\n : \"--\"\n }}\n </span>\n }\n\n @case ('LINK') {\n <a\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n }\n\n @case ('PERSON') {\n <div class=\"person-wrap flex align-items-center gap-2\">\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n }\n\n @case ('COUNTRY') {\n <span>\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n }\n\n @case ('LIST') {\n <ul class=\"list overflow-x-hidden\" style=\"margin-top: 0.25rem\">\n @for (item of attr.value; track $index) {\n <li\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 [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 }\n </ul>\n }\n\n @default {\n <span [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n }\n }\n </div>\n } @else {\n <span>--</span>\n }\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <div\n 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 >\n @for (item of attr?.tooltip; track $index) {\n @if (item.type !== statusTooltipType.DATE_PERSON) {\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <div class=\"text-sm text-left break-words\">\n @switch (item?.type || statusTooltipType.TAG) {\n\n @case ('LINK') {\n @if (item.value) {\n <a\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n } @else {\n <span>--</span>\n }\n }\n\n @case (statusTooltipType.STRING) {\n @if (item.value) {\n <div\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n } @else {\n <span>--</span>\n }\n }\n\n @case (statusTooltipType.DATE) {\n @if (item.value) {\n <span>{{ item.value | date : dateFormat }}</span>\n } @else {\n <span>--</span>\n }\n }\n\n @case (statusTooltipType.PERSON) {\n @if (item.value) {\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n } @else {\n <span>--</span>\n }\n }\n\n @default {\n @if (item.value) {\n <div class=\"flex gap-2\">\n <span>{{ item.value }}</span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n ></phoenix-tag>\n </div>\n } @else {\n <span>--</span>\n }\n }\n }\n </div>\n }\n }\n </div>\n\n @for (item of attr?.tooltip; track $index) {\n @if (item.type === statusTooltipType.DATE_PERSON) {\n @if (item.value) {\n <div>\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"text-sm\">--</div>\n }\n }\n }\n</p-popover>", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.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: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%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.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}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
|
|
7693
7694
|
}], propDecorators: { attr: [{
|
|
7694
7695
|
type: Input
|
|
7695
7696
|
}], dateFormat: [{
|