@fuentis/phoenix-ui 0.0.9-alpha.602 → 0.0.9-alpha.604
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.
|
@@ -1390,6 +1390,7 @@ var StatusTooltipType;
|
|
|
1390
1390
|
StatusTooltipType["LINK"] = "LINK";
|
|
1391
1391
|
StatusTooltipType["DATE"] = "DATE";
|
|
1392
1392
|
StatusTooltipType["DATE_ONLY"] = "DATE_ONLY";
|
|
1393
|
+
StatusTooltipType["COPY_TO_CLIPBOARD"] = "COPY_TO_CLIPBOARD";
|
|
1393
1394
|
StatusTooltipType["DATE_PERSON"] = "DATE_PERSON";
|
|
1394
1395
|
})(StatusTooltipType || (StatusTooltipType = {}));
|
|
1395
1396
|
|
|
@@ -7940,7 +7941,22 @@ class StatusAttributeDisplayComponent {
|
|
|
7940
7941
|
attr;
|
|
7941
7942
|
dateFormat = 'dd.MM.yyyy | HH:mm';
|
|
7942
7943
|
listItemClick = new EventEmitter();
|
|
7944
|
+
messageService = inject(MessageService);
|
|
7945
|
+
translateService = inject(TranslateService);
|
|
7943
7946
|
statusTooltipType = StatusTooltipType;
|
|
7947
|
+
copyToClipboard(value) {
|
|
7948
|
+
if (!value)
|
|
7949
|
+
return;
|
|
7950
|
+
this.messageService.add({
|
|
7951
|
+
severity: 'success',
|
|
7952
|
+
summary: this.translateService.instant('TOASTER.SUCCESS'),
|
|
7953
|
+
detail: this.translateService.instant('TOASTER.LINK_COPIED'),
|
|
7954
|
+
life: 3000,
|
|
7955
|
+
});
|
|
7956
|
+
navigator.clipboard.writeText(value).catch((err) => {
|
|
7957
|
+
console.error('Could not copy text: ', err);
|
|
7958
|
+
});
|
|
7959
|
+
}
|
|
7944
7960
|
getFullUrl(path) {
|
|
7945
7961
|
if (path.startsWith('http'))
|
|
7946
7962
|
return path;
|
|
@@ -7966,7 +7982,7 @@ class StatusAttributeDisplayComponent {
|
|
|
7966
7982
|
return (attr?.value?.charAt(0) || '-').toUpperCase();
|
|
7967
7983
|
}
|
|
7968
7984
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7969
|
-
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.DATE_ONLY) {\n <span>\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n item.value\n ? (item.value | date : 'dd.MM.yyyy')\n : \"--\"\n }}\n </span>\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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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$2.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
7985
|
+
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 @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 {{ attr.value ? (attr.value | date: \"dd.MM.yyyy\") : \"--\" }}\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]=\"\n attr.value?.name?.length > 20 ? attr.value?.name : null\n \"\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 @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.COPY_TO_CLIPBOARD) {\n <div class=\"flex\">\n <i\n class=\"pi pi-copy text-blue-900\"\n (click)=\"copyToClipboard(item?.value1)\"\n ></i>\n <span>\n {{ item?.value ? item.value : \"--\" }}\n </span>\n </div>\n }\n\n @case (statusTooltipType.DATE_ONLY) {\n <span>\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{ item.value ? (item.value | date: \"dd.MM.yyyy\") : \"--\" }}\n </span>\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>\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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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$2.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
7970
7986
|
}
|
|
7971
7987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
|
|
7972
7988
|
type: Component,
|
|
@@ -7978,7 +7994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7978
7994
|
TranslateModule,
|
|
7979
7995
|
AvatarModule,
|
|
7980
7996
|
TextLength,
|
|
7981
|
-
], 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.DATE_ONLY) {\n <span>\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n item.value\n ? (item.value | date : 'dd.MM.yyyy')\n : \"--\"\n }}\n </span>\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"] }]
|
|
7997
|
+
], 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 @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 {{ attr.value ? (attr.value | date: \"dd.MM.yyyy\") : \"--\" }}\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]=\"\n attr.value?.name?.length > 20 ? attr.value?.name : null\n \"\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 @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.COPY_TO_CLIPBOARD) {\n <div class=\"flex\">\n <i\n class=\"pi pi-copy text-blue-900\"\n (click)=\"copyToClipboard(item?.value1)\"\n ></i>\n <span>\n {{ item?.value ? item.value : \"--\" }}\n </span>\n </div>\n }\n\n @case (statusTooltipType.DATE_ONLY) {\n <span>\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{ item.value ? (item.value | date: \"dd.MM.yyyy\") : \"--\" }}\n </span>\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>\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"] }]
|
|
7982
7998
|
}], propDecorators: { attr: [{
|
|
7983
7999
|
type: Input
|
|
7984
8000
|
}], dateFormat: [{
|