@fuentis/phoenix-ui 0.0.9-alpha.134 → 0.0.9-alpha.136
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.
|
@@ -5261,7 +5261,7 @@ class StatusBarComponent {
|
|
|
5261
5261
|
width: 60,
|
|
5262
5262
|
};
|
|
5263
5263
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5264
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", 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: "<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity 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 ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n\n <!-- Descriptive data -->\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\">{{ attr.label | translate }}:</span>\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 *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <span class=\"font-medium\">{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-1\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #details>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"m-2 text-500 font-semibold\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <!-- <span class=\"m-2 font-medium\" style=\"min-width: 100px\">\n {{ item?.value }}\n </span> -->\n <span class=\"ml-1 mt-2 mb-2 mr-1\" style=\"min-width: 100px\">\n <phoenix-tag\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute\">\n <div class=\"flex flex-column\">\n <label>{{ attr.label | translate }}</label>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n >\n {{ attr.value | translate | textLength : 150 }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0) }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n *ngIf=\"attr?.value; else empty\"\n class=\"flex align-items-center mt-2\"\n >\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE_LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n <div class=\"attribute\">\n <label class=\"white-space-nowrap\">{{\n attr.label | translate\n }}</label>\n <i\n *ngIf=\"attr?.value\"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n <div *ngIf=\"attr?.value; else empty\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n <div class=\"mb-2 text-600\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"mr-2 align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-bold\">\n {{ item.value }}\n </div>\n <div>\n {{ item.value1 | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label>{{ attr.label | translate }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n {{ item.name | textLength : 20 }}\n <i class=\"pi pi-link\" class=\"mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\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<!-- Template used when a value is missing -->\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;flex-grow:1;max-width:250px;min-width:150px}.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:7px}.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.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: i5$2.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: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.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: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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"] }] });
|
|
5264
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", 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: "<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity 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 ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n\n <!-- Descriptive data -->\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\">{{ attr.label | translate }}:</span>\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 *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <span class=\"font-medium\">{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-1\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #details>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <!-- <span class=\"m-2 font-medium\" style=\"min-width: 100px\">\n {{ item?.value }}\n </span> -->\n <span class=\"mt-2 mb-2\" style=\"min-width: 100px\">\n <phoenix-tag\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute\">\n <div class=\"flex flex-column\">\n <label>{{ attr.label | translate }}</label>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n >\n {{ attr.value | translate | textLength : 150 }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0) }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n *ngIf=\"attr?.value; else empty\"\n class=\"flex align-items-center mt-2\"\n >\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE_LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n <div class=\"attribute\">\n <label class=\"white-space-nowrap\">{{\n attr.label | translate\n }}</label>\n <i\n *ngIf=\"attr?.value\"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n <div *ngIf=\"attr?.value; else empty\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n <div class=\"mb-2 text-600\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"mr-2 align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-bold\">\n {{ item.value }}\n </div>\n <div>\n {{ item.value1 | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label>{{ attr.label | translate }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n {{ item.name | textLength : 20 }}\n <i class=\"pi pi-link\" class=\"mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\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<!-- Template used when a value is missing -->\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;flex-grow:1;max-width:250px;min-width:150px}.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:7px}.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.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: i5$2.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: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.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: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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"] }] });
|
|
5265
5265
|
}
|
|
5266
5266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
5267
5267
|
type: Component,
|
|
@@ -5277,7 +5277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
5277
5277
|
TextLength,
|
|
5278
5278
|
FirstLetterPipe,
|
|
5279
5279
|
ButtonModule,
|
|
5280
|
-
], template: "<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity 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 ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n\n <!-- Descriptive data -->\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\">{{ attr.label | translate }}:</span>\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 *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <span class=\"font-medium\">{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-1\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #details>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"m-2 text-500 font-semibold\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <!-- <span class=\"m-2 font-medium\" style=\"min-width: 100px\">\n {{ item?.value }}\n </span> -->\n <span class=\"ml-1 mt-2 mb-2 mr-1\" style=\"min-width: 100px\">\n <phoenix-tag\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute\">\n <div class=\"flex flex-column\">\n <label>{{ attr.label | translate }}</label>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n >\n {{ attr.value | translate | textLength : 150 }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0) }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n *ngIf=\"attr?.value; else empty\"\n class=\"flex align-items-center mt-2\"\n >\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE_LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n <div class=\"attribute\">\n <label class=\"white-space-nowrap\">{{\n attr.label | translate\n }}</label>\n <i\n *ngIf=\"attr?.value\"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n <div *ngIf=\"attr?.value; else empty\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n <div class=\"mb-2 text-600\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"mr-2 align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-bold\">\n {{ item.value }}\n </div>\n <div>\n {{ item.value1 | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label>{{ attr.label | translate }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n {{ item.name | textLength : 20 }}\n <i class=\"pi pi-link\" class=\"mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\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<!-- Template used when a value is missing -->\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;flex-grow:1;max-width:250px;min-width:150px}.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:7px}.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"] }]
|
|
5280
|
+
], template: "<div class=\"surface-ground p-3\">\n <div\n *ngIf=\"statusBarConfig\"\n class=\"status-bar-wrapper overflow-x-auto\"\n [ngClass]=\"{ collapsed: isCollapsed }\"\n >\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity 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 ? statusBarConfig.icon : 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n\n <!-- Descriptive data -->\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\">{{ attr.label | translate }}:</span>\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 *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <div *ngFor=\"let attr of statusBarConfig.attributes\" class=\"attribute\">\n <!-- <div class=\"font-semibold\">{{ attr.label | translate }}</div> -->\n <div class=\"mt-1\">\n <ng-container [ngSwitch]=\"attr.type\">\n <!-- TAG -->\n <ng-container *ngSwitchCase=\"StatusColType.TAG\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n <div class=\"flex align-items-center gap-2\">\n <span class=\"font-medium\">{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div\n *ngIf=\"attr?.value; else empty\"\n [style.color]=\"attr.color\"\n class=\"text-xl mt-1\"\n >\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #details>\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <div class=\"flex justify-content-between\">\n <span class=\"mt-2 mb-2 mr-2 text-500 font-semibold\" style=\"min-width: 100px\">\n {{ item?.label }}:\n </span>\n <!-- <span class=\"m-2 font-medium\" style=\"min-width: 100px\">\n {{ item?.value }}\n </span> -->\n <span class=\"mt-2 mb-2\" style=\"min-width: 100px\">\n <phoenix-tag\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </span>\n </div>\n </ng-container>\n </p-popover>\n </ng-container>\n\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"StatusColType.STRING\">\n <div class=\"attribute\">\n <div class=\"flex flex-column\">\n <label>{{ attr.label | translate }}</label>\n <div\n *ngIf=\"attr?.value; else empty\"\n pTooltip=\"{{ attr?.value?.length > 150 ? attr.value : '' }}\"\n >\n {{ attr.value | translate | textLength : 150 }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- PERSON -->\n <ng-container *ngSwitchCase=\"StatusColType.PERSON\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n class=\"person-wrap\"\n *ngIf=\"attr?.value || attr?.value1; else empty\"\n >\n <div class=\"person-avatar\">\n {{ attr?.value?.charAt(0) }}\n </div>\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n pTooltip=\"{{ attr?.value }} {{ attr?.value1 }}\"\n >\n {{ attr?.value }} {{ attr?.value1 }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE\">\n <div class=\"attribute flex justify-content-center\">\n <div class=\"flex flex-column\">\n {{ attr.label | translate }}\n <div\n *ngIf=\"attr?.value; else empty\"\n class=\"flex align-items-center mt-2\"\n >\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- DATE_LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.DATE_LIST\">\n <div class=\"attribute\">\n <label class=\"white-space-nowrap\">{{\n attr.label | translate\n }}</label>\n <i\n *ngIf=\"attr?.value\"\n class=\"pi pi-info-circle text-blue-500 mr-1\"\n (mouseenter)=\"overlayPanel.toggle($event)\"\n (mouseleave)=\"overlayPanel.toggle($event)\"\n ></i>\n <div *ngIf=\"attr?.value; else empty\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value }}\n </div>\n </div>\n </div>\n\n <p-popover #overlayPanel>\n <!-- Created by -->\n\n <div *ngFor=\"let item of attr.tooltip\" class=\"mb-4\">\n <div class=\"mb-2 text-600\">\n {{ item.label | translate }}\n </div>\n <div class=\"flex\">\n <div class=\"mr-2 align-self-center\">\n <p-avatar\n shape=\"circle\"\n [label]=\"item.value ? (item.value | firstLetter) : ''\"\n ></p-avatar>\n </div>\n <div>\n <div class=\"text-blue-800 font-bold\">\n {{ item.value }}\n </div>\n <div>\n {{ item.value1 | date : dateFormat + \" | HH:mm\" }}\n </div>\n </div>\n </div>\n </div>\n </p-popover>\n </ng-container>\n\n <!-- LIST -->\n <ng-container *ngSwitchCase=\"StatusColType.LIST\">\n <div class=\"attribute flex justify-content-center\">\n <div>\n <label>{{ attr.label | translate }}</label>\n <ul\n class=\"list\"\n *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\"\n >\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"!item?.disabled ? onListItemClick.emit(item) : ''\"\n >\n {{ item.name | textLength : 20 }}\n <i class=\"pi pi-link\" class=\"mt-1\"></i>\n </li>\n </ul>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\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<!-- Template used when a value is missing -->\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;flex-grow:1;max-width:250px;min-width:150px}.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:7px}.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"] }]
|
|
5281
5281
|
}], propDecorators: { statusBarConfig: [{
|
|
5282
5282
|
type: Input
|
|
5283
5283
|
}], iconEnable: [{
|