@fuentis/phoenix-ui 0.0.9-alpha.159 → 0.0.9-alpha.162
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.
|
@@ -5544,7 +5544,6 @@ var StatusColType;
|
|
|
5544
5544
|
StatusColType["STRING"] = "STRING";
|
|
5545
5545
|
StatusColType["PERSON"] = "PERSON";
|
|
5546
5546
|
StatusColType["DATE"] = "DATE";
|
|
5547
|
-
StatusColType["DATE_LIST"] = "DATE_LIST";
|
|
5548
5547
|
StatusColType["LIST"] = "LIST";
|
|
5549
5548
|
})(StatusColType || (StatusColType = {}));
|
|
5550
5549
|
|
|
@@ -5562,7 +5561,7 @@ class StatusBarComponent {
|
|
|
5562
5561
|
width: 60,
|
|
5563
5562
|
};
|
|
5564
5563
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5565
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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)=\"tagPopover.toggle($event)\"\n (mouseleave)=\"tagPopover.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 #tagPopover>\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=\"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 <div class=\"flex align-items-center gap-2\">\n <label>{{ attr.label | translate }}</label>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"stringPopover.toggle($event)\"\n (mouseleave)=\"stringPopover.toggle($event)\"\n ></i>\n </div>\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\n <p-popover #stringPopover>\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=\"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 <!-- 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 }}\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$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: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { 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"] }] });
|
|
5564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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)=\"tagPopover.toggle($event)\"\n (mouseleave)=\"tagPopover.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 #tagPopover>\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=\"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 <p-popover #stringPopover>\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=\"mt-2 mb-2\" style=\"min-width: 100px\">\n <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n <!-- LINK -->\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"item.value\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline cursor-pointer\"\n >\n {{ item.value }}\n </a>\n \n <!-- STRING -->\n <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n {{ item.value }}\n </span>\n \n <!-- TAG (default or explicitly specified) -->\n <phoenix-tag\n *ngSwitchDefault\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </ng-container>\n </span>\n </div>\n </ng-container>\n </p-popover>\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\">\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 }}\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$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: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: TextLength, name: "textLength" }, { kind: "pipe", type: FirstLetterPipe, name: "firstLetter" }, { 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"] }] });
|
|
5566
5565
|
}
|
|
5567
5566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
5568
5567
|
type: Component,
|
|
@@ -5577,7 +5576,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5577
5576
|
TextLength,
|
|
5578
5577
|
FirstLetterPipe,
|
|
5579
5578
|
ButtonModule,
|
|
5580
|
-
], 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)=\"tagPopover.toggle($event)\"\n (mouseleave)=\"tagPopover.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 #tagPopover>\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=\"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 <div class=\"flex align-items-center gap-2\">\n <label>{{ attr.label | translate }}</label>\n <i\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n (mouseenter)=\"stringPopover.toggle($event)\"\n (mouseleave)=\"stringPopover.toggle($event)\"\n ></i>\n </div>\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\n <p-popover #stringPopover>\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=\"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 <!-- 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 }}\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"] }]
|
|
5579
|
+
PopoverModule
|
|
5580
|
+
], 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)=\"tagPopover.toggle($event)\"\n (mouseleave)=\"tagPopover.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 #tagPopover>\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=\"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 <p-popover #stringPopover>\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=\"mt-2 mb-2\" style=\"min-width: 100px\">\n <ng-container [ngSwitch]=\"item.type || 'TAG'\">\n <!-- LINK -->\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"item.value\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline cursor-pointer\"\n >\n {{ item.value }}\n </a>\n \n <!-- STRING -->\n <span *ngSwitchCase=\"'STRING'\" class=\"text-sm\">\n {{ item.value }}\n </span>\n \n <!-- TAG (default or explicitly specified) -->\n <phoenix-tag\n *ngSwitchDefault\n [customColor]=\"item.value1\"\n [content]=\"item.value\"\n ></phoenix-tag>\n </ng-container>\n </span>\n </div>\n </ng-container>\n </p-popover>\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\">\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 }}\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"] }]
|
|
5581
5581
|
}], propDecorators: { statusBarConfig: [{
|
|
5582
5582
|
type: Input
|
|
5583
5583
|
}], iconEnable: [{
|