@fuentis/phoenix-ui 0.0.9-alpha.84 → 0.0.9-alpha.85
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.
|
@@ -4844,7 +4844,7 @@ class StatusBarComponent {
|
|
|
4844
4844
|
width: 60,
|
|
4845
4845
|
};
|
|
4846
4846
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4847
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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: "\n<p>{{ statusBarConfig.icon }}</p>\n<div class=\"surface-0\">\n <div *ngIf=\"statusBarConfig\" class=\"status-bar-wrapper\" [ngClass]=\"{ collapsed: isCollapsed }\">\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n <!-- <div *ngIf=\"iconEnable\" class=\"mr-3 flex justify-content-center align-items-center\" style=\"width: 60px; height: 60px\">\n <p-image\n [src]=\"'/assets/object_types/white/' + (statusBarConfig.icon || 'UNDEFINED') + '.svg'\"\n width=\"40\"\n height=\"40\"\n ></p-image>\n </div> -->\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n *ngIf=\"iconEnable\"\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 <ul>\n <li class=\"text-sm flex mb-1\" *ngFor=\"let attr of statusBarConfig.description\">\n <span class=\"text-600 mr-1\">{{ attr.label | translate }}:</span>\n <span *ngIf=\"attr.value; else empty\">\n <i *ngIf=\"attr.icon\" class=\"{{ attr.icon }} mr-1\" style=\"font-size: 0.8em\"></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{ attr.value | date: dateFormat }}</span>\n <span *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <!-- Attributes -->\n <div class=\"flex flex-wrap gap-4 mt-3\" *ngIf=\"statusBarConfig.attributes?.length\">\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\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\">\n <span>{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip\"\n class=\"pi pi-info-circle text-blue-500 ml-2\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div *ngIf=\"attr?.value; else empty\" [style.color]=\"attr.color\" class=\"text-xl mt-2\">\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 style=\"min-width: 100px\" class=\"m-2 text-500 font-semibold\">\n {{ item?.label }}:\n </span>\n <span style=\"min-width: 100px\" class=\"m-2 font-medium\">\n {{ item?.value }}\n </span>\n <span style=\"min-width: 100px\" class=\"ml-1 mt-2 mb-2 mr-1\">\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 *ngIf=\"attr?.value; else empty\" class=\"flex align-items-center mt-2\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date: dateFormat }}\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\">{{ attr.label | translate }}</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 | date: dateFormat + ' | HH:mm' }}\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 class=\"list\" *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\">\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"\n !item?.disabled ? onListItemClick.emit(item) : ''\n \"\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\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center mt-2\" *ngIf=\"enableClosing\">\n <button (click)=\"isCollapsed = !isCollapsed\" class=\"p-button p-button-text\">\n <i class=\"pi\" [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"></i>\n </button>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>", styles: [":host ::ng-deep .status-bar-wrapper{display:flex;padding:10px 10px 10px 0;overflow:hidden;transition:.4s cubic-bezier(.86,0,.07,1)}:host ::ng-deep .description{flex-grow:1;min-width:300px;max-width:350px;margin-left:10px}:host ::ng-deep .attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}:host ::ng-deep .attribute:last-child{margin-right:0}:host ::ng-deep ul{list-style:none;padding:0;margin:0}:host ::ng-deep .type-icon{background-color:#e94260;border-radius:3px}:host ::ng-deep label{display:inline-block;margin-right:5px;margin-bottom:7px}:host ::ng-deep .list{overflow:auto;height:57px}:host ::ng-deep .list li{cursor:pointer;color:var(--blue-500)}:host ::ng-deep .list li:hover{color:#e94260}:host ::ng-deep .toggler{position:relative}:host ::ng-deep .toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}:host ::ng-deep .toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}:host ::ng-deep .toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}:host ::ng-deep .toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}:host ::ng-deep .disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}:host ::ng-deep .collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}:host ::ng-deep .person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}:host ::ng-deep .person-wrap p{margin:0}:host ::ng-deep .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%}:host ::ng-deep .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$1.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" }] });
|
|
4847
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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: "\n<div class=\"surface-0\">\n <div *ngIf=\"statusBarConfig\" class=\"status-bar-wrapper\" [ngClass]=\"{ collapsed: isCollapsed }\">\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 <ul>\n <li class=\"text-sm flex mb-1\" *ngFor=\"let attr of statusBarConfig.description\">\n <span class=\"text-600 mr-1\">{{ attr.label | translate }}:</span>\n <span *ngIf=\"attr.value; else empty\">\n <i *ngIf=\"attr.icon\" class=\"{{ attr.icon }} mr-1\" style=\"font-size: 0.8em\"></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{ attr.value | date: dateFormat }}</span>\n <span *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <!-- Attributes -->\n <div class=\"flex flex-wrap gap-4 mt-3\" *ngIf=\"statusBarConfig.attributes?.length\">\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\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\">\n <span>{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip\"\n class=\"pi pi-info-circle text-blue-500 ml-2\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div *ngIf=\"attr?.value; else empty\" [style.color]=\"attr.color\" class=\"text-xl mt-2\">\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 style=\"min-width: 100px\" class=\"m-2 text-500 font-semibold\">\n {{ item?.label }}:\n </span>\n <span style=\"min-width: 100px\" class=\"m-2 font-medium\">\n {{ item?.value }}\n </span>\n <span style=\"min-width: 100px\" class=\"ml-1 mt-2 mb-2 mr-1\">\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 *ngIf=\"attr?.value; else empty\" class=\"flex align-items-center mt-2\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date: dateFormat }}\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\">{{ attr.label | translate }}</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 | date: dateFormat + ' | HH:mm' }}\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 class=\"list\" *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\">\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"\n !item?.disabled ? onListItemClick.emit(item) : ''\n \"\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\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center mt-2\" *ngIf=\"enableClosing\">\n <button (click)=\"isCollapsed = !isCollapsed\" class=\"p-button p-button-text\">\n <i class=\"pi\" [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"></i>\n </button>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>", styles: [":host ::ng-deep .status-bar-wrapper{display:flex;padding:10px 10px 10px 0;overflow:hidden;transition:.4s cubic-bezier(.86,0,.07,1)}:host ::ng-deep .description{flex-grow:1;min-width:300px;max-width:350px;margin-left:10px}:host ::ng-deep .attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}:host ::ng-deep .attribute:last-child{margin-right:0}:host ::ng-deep ul{list-style:none;padding:0;margin:0}:host ::ng-deep .type-icon{background-color:#e94260;border-radius:3px}:host ::ng-deep label{display:inline-block;margin-right:5px;margin-bottom:7px}:host ::ng-deep .list{overflow:auto;height:57px}:host ::ng-deep .list li{cursor:pointer;color:var(--blue-500)}:host ::ng-deep .list li:hover{color:#e94260}:host ::ng-deep .toggler{position:relative}:host ::ng-deep .toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}:host ::ng-deep .toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}:host ::ng-deep .toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}:host ::ng-deep .toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}:host ::ng-deep .disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}:host ::ng-deep .collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}:host ::ng-deep .person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}:host ::ng-deep .person-wrap p{margin:0}:host ::ng-deep .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%}:host ::ng-deep .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$1.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" }] });
|
|
4848
4848
|
}
|
|
4849
4849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
4850
4850
|
type: Component,
|
|
@@ -4859,7 +4859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
4859
4859
|
DatePipe,
|
|
4860
4860
|
TextLength,
|
|
4861
4861
|
FirstLetterPipe
|
|
4862
|
-
], template: "\n<p>{{ statusBarConfig.icon }}</p>\n<div class=\"surface-0\">\n <div *ngIf=\"statusBarConfig\" class=\"status-bar-wrapper\" [ngClass]=\"{ collapsed: isCollapsed }\">\n <div class=\"description flex\" *ngIf=\"description\">\n <!-- Entity icon -->\n <!-- <div *ngIf=\"iconEnable\" class=\"mr-3 flex justify-content-center align-items-center\" style=\"width: 60px; height: 60px\">\n <p-image\n [src]=\"'/assets/object_types/white/' + (statusBarConfig.icon || 'UNDEFINED') + '.svg'\"\n width=\"40\"\n height=\"40\"\n ></p-image>\n </div> -->\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n *ngIf=\"iconEnable\"\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 <ul>\n <li class=\"text-sm flex mb-1\" *ngFor=\"let attr of statusBarConfig.description\">\n <span class=\"text-600 mr-1\">{{ attr.label | translate }}:</span>\n <span *ngIf=\"attr.value; else empty\">\n <i *ngIf=\"attr.icon\" class=\"{{ attr.icon }} mr-1\" style=\"font-size: 0.8em\"></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{ attr.value | date: dateFormat }}</span>\n <span *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <!-- Attributes -->\n <div class=\"flex flex-wrap gap-4 mt-3\" *ngIf=\"statusBarConfig.attributes?.length\">\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\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\">\n <span>{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip\"\n class=\"pi pi-info-circle text-blue-500 ml-2\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div *ngIf=\"attr?.value; else empty\" [style.color]=\"attr.color\" class=\"text-xl mt-2\">\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 style=\"min-width: 100px\" class=\"m-2 text-500 font-semibold\">\n {{ item?.label }}:\n </span>\n <span style=\"min-width: 100px\" class=\"m-2 font-medium\">\n {{ item?.value }}\n </span>\n <span style=\"min-width: 100px\" class=\"ml-1 mt-2 mb-2 mr-1\">\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 *ngIf=\"attr?.value; else empty\" class=\"flex align-items-center mt-2\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date: dateFormat }}\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\">{{ attr.label | translate }}</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 | date: dateFormat + ' | HH:mm' }}\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 class=\"list\" *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\">\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"\n !item?.disabled ? onListItemClick.emit(item) : ''\n \"\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\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center mt-2\" *ngIf=\"enableClosing\">\n <button (click)=\"isCollapsed = !isCollapsed\" class=\"p-button p-button-text\">\n <i class=\"pi\" [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"></i>\n </button>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>", styles: [":host ::ng-deep .status-bar-wrapper{display:flex;padding:10px 10px 10px 0;overflow:hidden;transition:.4s cubic-bezier(.86,0,.07,1)}:host ::ng-deep .description{flex-grow:1;min-width:300px;max-width:350px;margin-left:10px}:host ::ng-deep .attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}:host ::ng-deep .attribute:last-child{margin-right:0}:host ::ng-deep ul{list-style:none;padding:0;margin:0}:host ::ng-deep .type-icon{background-color:#e94260;border-radius:3px}:host ::ng-deep label{display:inline-block;margin-right:5px;margin-bottom:7px}:host ::ng-deep .list{overflow:auto;height:57px}:host ::ng-deep .list li{cursor:pointer;color:var(--blue-500)}:host ::ng-deep .list li:hover{color:#e94260}:host ::ng-deep .toggler{position:relative}:host ::ng-deep .toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}:host ::ng-deep .toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}:host ::ng-deep .toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}:host ::ng-deep .toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}:host ::ng-deep .disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}:host ::ng-deep .collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}:host ::ng-deep .person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}:host ::ng-deep .person-wrap p{margin:0}:host ::ng-deep .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%}:host ::ng-deep .person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
|
|
4862
|
+
], template: "\n<div class=\"surface-0\">\n <div *ngIf=\"statusBarConfig\" class=\"status-bar-wrapper\" [ngClass]=\"{ collapsed: isCollapsed }\">\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 <ul>\n <li class=\"text-sm flex mb-1\" *ngFor=\"let attr of statusBarConfig.description\">\n <span class=\"text-600 mr-1\">{{ attr.label | translate }}:</span>\n <span *ngIf=\"attr.value; else empty\">\n <i *ngIf=\"attr.icon\" class=\"{{ attr.icon }} mr-1\" style=\"font-size: 0.8em\"></i>\n <ng-container [ngSwitch]=\"attr.type\">\n <span *ngSwitchCase=\"'DATE'\">{{ attr.value | date: dateFormat }}</span>\n <span *ngSwitchDefault>{{ attr.value }}</span>\n </ng-container>\n </span>\n </li>\n </ul>\n </div>\n\n <!-- Attributes -->\n <div class=\"flex flex-wrap gap-4 mt-3\" *ngIf=\"statusBarConfig.attributes?.length\">\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\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\">\n <span>{{ attr.label | translate }}</span>\n <i\n *ngIf=\"attr?.tooltip\"\n class=\"pi pi-info-circle text-blue-500 ml-2\"\n (mouseenter)=\"details.toggle($event)\"\n (mouseleave)=\"details.toggle($event)\"\n ></i>\n </div>\n <div *ngIf=\"attr?.value; else empty\" [style.color]=\"attr.color\" class=\"text-xl mt-2\">\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 style=\"min-width: 100px\" class=\"m-2 text-500 font-semibold\">\n {{ item?.label }}:\n </span>\n <span style=\"min-width: 100px\" class=\"m-2 font-medium\">\n {{ item?.value }}\n </span>\n <span style=\"min-width: 100px\" class=\"ml-1 mt-2 mb-2 mr-1\">\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 *ngIf=\"attr?.value; else empty\" class=\"flex align-items-center mt-2\">\n <i class=\"pi pi-calendar mr-1\"></i>\n {{ attr.value | date: dateFormat }}\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\">{{ attr.label | translate }}</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 | date: dateFormat + ' | HH:mm' }}\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 class=\"list\" *ngIf=\"attr?.value && attr?.value?.length > 0; else empty\">\n <li\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1\"\n *ngFor=\"let item of attr.value\"\n (click)=\"\n !item?.disabled ? onListItemClick.emit(item) : ''\n \"\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\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Collapse/Expand button -->\n <div class=\"flex justify-content-center mt-2\" *ngIf=\"enableClosing\">\n <button (click)=\"isCollapsed = !isCollapsed\" class=\"p-button p-button-text\">\n <i class=\"pi\" [ngClass]=\"isCollapsed ? 'pi-angle-down' : 'pi-angle-up'\"></i>\n </button>\n </div>\n</div>\n\n<!-- Template used when a value is missing -->\n<ng-template #empty>\n <span>--</span>\n</ng-template>", styles: [":host ::ng-deep .status-bar-wrapper{display:flex;padding:10px 10px 10px 0;overflow:hidden;transition:.4s cubic-bezier(.86,0,.07,1)}:host ::ng-deep .description{flex-grow:1;min-width:300px;max-width:350px;margin-left:10px}:host ::ng-deep .attribute{margin-left:10px;margin-right:10px;flex-grow:1;max-width:250px;min-width:150px}:host ::ng-deep .attribute:last-child{margin-right:0}:host ::ng-deep ul{list-style:none;padding:0;margin:0}:host ::ng-deep .type-icon{background-color:#e94260;border-radius:3px}:host ::ng-deep label{display:inline-block;margin-right:5px;margin-bottom:7px}:host ::ng-deep .list{overflow:auto;height:57px}:host ::ng-deep .list li{cursor:pointer;color:var(--blue-500)}:host ::ng-deep .list li:hover{color:#e94260}:host ::ng-deep .toggler{position:relative}:host ::ng-deep .toggler button{border:1px solid var(--gray-300);background:none;border-radius:7px;padding:2px 7px 0;cursor:pointer}:host ::ng-deep .toggler button .pi{padding:0!important;font-size:.8rem;color:var(--blue-500)}:host ::ng-deep .toggler:after{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(90deg,#cecece 10%,#fff);position:absolute;top:50%;left:27px}:host ::ng-deep .toggler:before{content:\"\";display:block;height:1px;width:30px;background:linear-gradient(280deg,#cecece 10%,#fff);position:absolute;top:50%;left:-29px}:host ::ng-deep .disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}:host ::ng-deep .collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}:host ::ng-deep .person-wrap{display:flex;align-items:center;padding:5px 5px 5px 0;width:150px}:host ::ng-deep .person-wrap p{margin:0}:host ::ng-deep .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%}:host ::ng-deep .person-wrap .person-name :first-child{font-size:1.2rem}\n"] }]
|
|
4863
4863
|
}], propDecorators: { statusBarConfig: [{
|
|
4864
4864
|
type: Input
|
|
4865
4865
|
}], iconEnable: [{
|