@fuentis/phoenix-ui 0.0.9-alpha.248 → 0.0.9-alpha.249
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.
|
@@ -983,7 +983,7 @@ class StatusHeaderComponent {
|
|
|
983
983
|
this.onCloseEvent.emit();
|
|
984
984
|
}
|
|
985
985
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
986
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { type: "type", name: "name", title: "title", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div
|
|
986
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { type: "type", name: "name", title: "title", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n @if (enableQuickPick) {\n <phoenix-quick-pick (onBack)=\"onToggleClick('back')\" (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"></phoenix-quick-pick>\n }\n\n @if (type) {\n <span class=\"text-xl font-semibold text-gray-500\">{{ type }} : </span>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span class=\"text-xl font-semibold\" [pTooltip]=\"name.length > 40 ? name : undefined\">\n {{ name.length > 60 ? (name | slice: 0:60) + '\u2026' : name }}\n </span>\n }\n\n\n <!-- TITLE with tooltip and truncation -->\n @if (title) {\n <span class=\"text-base text-gray-500\" [pTooltip]=\"title.length > 20 ? title : undefined\">\n {{ title.length > 20 ? (title | slice: 0:20) + '\u2026' : title }}\n </span>\n }\n\n</div>", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "ngmodule", type: TranslateModule }, { 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: TieredMenuModule }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
987
987
|
}
|
|
988
988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusHeaderComponent, decorators: [{
|
|
989
989
|
type: Component,
|
|
@@ -995,7 +995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
995
995
|
TooltipModule,
|
|
996
996
|
TieredMenuModule,
|
|
997
997
|
QuickPickComponent,
|
|
998
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
998
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2\">\n @if (enableQuickPick) {\n <phoenix-quick-pick (onBack)=\"onToggleClick('back')\" (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"></phoenix-quick-pick>\n }\n\n @if (type) {\n <span class=\"text-xl font-semibold text-gray-500\">{{ type }} : </span>\n }\n\n <!-- NAME with tooltip and truncation -->\n @if (name) {\n <span class=\"text-xl font-semibold\" [pTooltip]=\"name.length > 40 ? name : undefined\">\n {{ name.length > 60 ? (name | slice: 0:60) + '\u2026' : name }}\n </span>\n }\n\n\n <!-- TITLE with tooltip and truncation -->\n @if (title) {\n <span class=\"text-base text-gray-500\" [pTooltip]=\"title.length > 20 ? title : undefined\">\n {{ title.length > 20 ? (title | slice: 0:20) + '\u2026' : title }}\n </span>\n }\n\n</div>", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
|
|
999
999
|
}], propDecorators: { onQuickPickClickEmiter: [{
|
|
1000
1000
|
type: Output
|
|
1001
1001
|
}], onToggleClickEmmiter: [{
|
|
@@ -6004,7 +6004,7 @@ class StatusAttributeDisplayComponent {
|
|
|
6004
6004
|
return label ? label.trim().split(/\s+/).length > 2 : false;
|
|
6005
6005
|
}
|
|
6006
6006
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6007
|
-
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: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
6007
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label class=\"font-semibold text-600\" [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\">\n {{ attr.label | translate }}\n </label>\n <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\">\n </i>\n </div>\n\n <!-- VALUE -->\n <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n <!-- STRING -->\n <span\n *ngSwitchCase=\"'STRING'\"\n [pTooltip]=\"attr.value?.length > 20 && !attr.tooltip ? attr.value : null\"\n >\n {{ attr.value | textLength: 20 }}\n </span>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n </span>\n\n <!-- LINK -->\n <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n {{ attr.value || '--' }}\n </a>\n\n <!-- PERSON -->\n <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0)?.toUpperCase() || '-' }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20\n ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n : undefined\"\n >\n <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n }}\u2026\n </ng-container>\n <ng-template #fullText>\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n }}\n </ng-template>\n </div>\n </div>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || '--' }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \">\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">\n {{ item.label }}:\n </div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\">\n {{ item.label || 'Open' }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div *ngIf=\"item.value; else empty\" class=\"text-sm\"\n style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date: dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-2 truncate\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n </phoenix-tag>\n </ng-container>\n </ng-container>\n\n </ng-container>\n </div>\n\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
6008
6008
|
}
|
|
6009
6009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
|
|
6010
6010
|
type: Component,
|
|
@@ -6017,7 +6017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6017
6017
|
AvatarModule,
|
|
6018
6018
|
FirstLetterPipe,
|
|
6019
6019
|
TextLength
|
|
6020
|
-
], 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
|
|
6020
|
+
], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-center gap-1\">\n <label class=\"font-semibold text-600\" [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\">\n {{ attr.label | translate }}\n </label>\n <i *ngIf=\"attr?.tooltip?.length\" class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1;\" (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\">\n </i>\n </div>\n\n <!-- VALUE -->\n <div *ngIf=\"attr?.value; else empty\" [ngSwitch]=\"attr.type\" style=\"white-space: nowrap;\">\n <!-- STRING -->\n <span\n *ngSwitchCase=\"'STRING'\"\n [pTooltip]=\"attr.value?.length > 20 && !attr.tooltip ? attr.value : null\"\n >\n {{ attr.value | textLength: 20 }}\n </span>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n {{ attr.value ? (attr.value | date: dateFormat) : '--' }}\n </span>\n\n <!-- LINK -->\n <a *ngSwitchCase=\"'LINK'\" [href]=\"attr.url\" target=\"_blank\" rel=\"noopener\" class=\"text-blue-500 underline\">\n {{ attr.value || '--' }}\n </a>\n\n <!-- PERSON -->\n <div class=\"person-wrap flex align-items-center gap-2\" *ngSwitchCase=\"'PERSON'\">\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0)?.toUpperCase() || '-' }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20\n ? ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n : undefined\"\n >\n <ng-container *ngIf=\"((attr?.value || '') + ' ' + (attr?.value1 || '')).trim().length > 20; else fullText\">\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim() | slice: 0:20\n }}\u2026\n </ng-container>\n <ng-template #fullText>\n {{\n ((attr?.value || '') + ' ' + (attr?.value1 || '')).trim()\n }}\n </ng-template>\n </div>\n </div>\n\n <!-- LIST -->\n <ul *ngSwitchCase=\"'LIST'\" class=\"list\" style=\"margin-top: 0.25rem;\">\n <li *ngFor=\"let item of attr.value\" [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\" (click)=\"!item?.disabled ? listItemClick.emit(item) : null\">\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || '--' }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \">\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">\n {{ item.label }}:\n </div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item.type || statusTooltipType.TAG\">\n\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a *ngIf=\"item.value; else empty\" [href]=\"getFullUrl(item.value)\" target=\"_blank\" rel=\"noopener\"\n class=\"text-blue-500 underline\">\n {{ item.label || 'Open' }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div *ngIf=\"item.value; else empty\" class=\"text-sm\"\n style=\"white-space: normal; word-break: break-word; overflow-wrap: break-word;\">\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date: dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-2 truncate\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\" [pTooltip]=\"item.value + ' ' + item.value1\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <phoenix-tag [customColor]=\"item.value1 || ''\" [content]=\"item.value\">\n </phoenix-tag>\n </ng-container>\n </ng-container>\n\n </ng-container>\n </div>\n\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div class=\"font-sm text-600 truncate mb-1\" [pTooltip]=\"item.label.length > 20 ? item.label : undefined\">\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div class=\"text-blue-800 font-sm\">{{ item.value }}</div>\n <div class=\"text-sm\">{{ item.value1 | date: dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}\n"] }]
|
|
6021
6021
|
}], propDecorators: { attr: [{
|
|
6022
6022
|
type: Input
|
|
6023
6023
|
}], dateFormat: [{
|
|
@@ -6040,7 +6040,7 @@ class StatusBarComponent {
|
|
|
6040
6040
|
width: 40,
|
|
6041
6041
|
};
|
|
6042
6042
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6043
|
-
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"] }] });
|
|
6043
|
+
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}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.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"] }] });
|
|
6044
6044
|
}
|
|
6045
6045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
6046
6046
|
type: Component,
|
|
@@ -6056,7 +6056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6056
6056
|
FirstLetterPipe,
|
|
6057
6057
|
ButtonModule,
|
|
6058
6058
|
StatusAttributeDisplayComponent
|
|
6059
|
-
], 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"] }]
|
|
6059
|
+
], 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}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}\n"] }]
|
|
6060
6060
|
}], propDecorators: { statusBarConfig: [{
|
|
6061
6061
|
type: Input
|
|
6062
6062
|
}], iconEnable: [{
|