@fuentis/phoenix-ui 0.0.9-alpha.136 → 0.0.9-alpha.138
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.
|
@@ -3,7 +3,7 @@ import { Input, ViewEncapsulation, Component, EventEmitter, Output, ViewChild, C
|
|
|
3
3
|
import * as i3 from 'primeng/button';
|
|
4
4
|
import { ButtonModule } from 'primeng/button';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
6
|
-
import { CommonModule, LowerCasePipe
|
|
6
|
+
import { CommonModule, LowerCasePipe } from '@angular/common';
|
|
7
7
|
import * as i1 from '@angular/router';
|
|
8
8
|
import { RouterLink, RouterLinkActive, RouterModule, Router, NavigationEnd } from '@angular/router';
|
|
9
9
|
import * as i3$2 from '@ngx-translate/core';
|
|
@@ -410,6 +410,7 @@ class TopbarComponent {
|
|
|
410
410
|
copyrightText: '© ' + new Date().getFullYear() + ' fuentis. All Rights Reserved.',
|
|
411
411
|
};
|
|
412
412
|
onDarkModeSelect = new EventEmitter();
|
|
413
|
+
onUserPopoverAction = new EventEmitter();
|
|
413
414
|
openSidebarPanel() {
|
|
414
415
|
this.isSidebarVisible = true;
|
|
415
416
|
}
|
|
@@ -431,7 +432,7 @@ class TopbarComponent {
|
|
|
431
432
|
: `url('assets/default-user.png')`;
|
|
432
433
|
}
|
|
433
434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: "homeUrl", user: "user", shortModuleName: "shortModuleName", topbarModulesMenu: "topbarModulesMenu", darkModeSelector: "darkModeSelector", footerConfig: "footerConfig" }, outputs: { onDarkModeSelect: "onDarkModeSelect" }, ngImport: i0, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user
|
|
435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: "homeUrl", user: "user", shortModuleName: "shortModuleName", topbarModulesMenu: "topbarModulesMenu", darkModeSelector: "darkModeSelector", footerConfig: "footerConfig" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, ngImport: i0, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-20rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <div class=\"flex flex-column h-full\">\n <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n <ng-container\n *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n >\n <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label }}</h4>\n\n <div class=\"grid\">\n <!-- If layout is 'full', it takes up the entire row -->\n <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n >\n <a\n class=\"text-primary flex align-items-center gap-3\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-3rem h-3rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <div>\n <h4 class=\"mb-0 mt-0\">{{ module.label }}</h4>\n <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n {{ module.fullName || \"\" }}\n </p>\n </div>\n </a>\n </div>\n </ng-container>\n\n <!-- If layout is 'grid', modules are arranged in a 3-column grid -->\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{ module.label }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between module groups (except after the last one) -->\n <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n </ng-container>\n\n <!-- Footer links -->\n <div class=\"mt-auto p-2\">\n <p-divider class=\"mt-2 mb-2\"></p-divider>\n <div class=\"flex justify-content-between pb-3\">\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle p-2\"></i>\n {{ footerConfig.guideLabel }}\n </span>\n </a>\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.companyUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-globe p-2\"></i> {{ footerConfig.companyName }}\n </span>\n </a>\n </div>\n\n <div class=\"text-500 text-sm pl-2\">\n {{ footerConfig.copyrightText }}\n </div>\n </div>\n </div>\n</p-drawer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["expandable", "placeholder", "message"], outputs: ["searchQueryChange"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["logout", "editSettings"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i3$3.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
435
436
|
}
|
|
436
437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
437
438
|
type: Component,
|
|
@@ -444,7 +445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
444
445
|
DrawerModule,
|
|
445
446
|
DividerModule,
|
|
446
447
|
ButtonModule,
|
|
447
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user
|
|
448
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-20rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <div class=\"flex flex-column h-full\">\n <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n <ng-container\n *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n >\n <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label }}</h4>\n\n <div class=\"grid\">\n <!-- If layout is 'full', it takes up the entire row -->\n <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n >\n <a\n class=\"text-primary flex align-items-center gap-3\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-3rem h-3rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <div>\n <h4 class=\"mb-0 mt-0\">{{ module.label }}</h4>\n <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n {{ module.fullName || \"\" }}\n </p>\n </div>\n </a>\n </div>\n </ng-container>\n\n <!-- If layout is 'grid', modules are arranged in a 3-column grid -->\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{ module.label }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between module groups (except after the last one) -->\n <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n </ng-container>\n\n <!-- Footer links -->\n <div class=\"mt-auto p-2\">\n <p-divider class=\"mt-2 mb-2\"></p-divider>\n <div class=\"flex justify-content-between pb-3\">\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle p-2\"></i>\n {{ footerConfig.guideLabel }}\n </span>\n </a>\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.companyUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-globe p-2\"></i> {{ footerConfig.companyName }}\n </span>\n </a>\n </div>\n\n <div class=\"text-500 text-sm pl-2\">\n {{ footerConfig.copyrightText }}\n </div>\n </div>\n </div>\n</p-drawer>\n" }]
|
|
448
449
|
}], propDecorators: { homeUrl: [{
|
|
449
450
|
type: Input
|
|
450
451
|
}], user: [{
|
|
@@ -459,6 +460,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
459
460
|
type: Input
|
|
460
461
|
}], onDarkModeSelect: [{
|
|
461
462
|
type: Output
|
|
463
|
+
}], onUserPopoverAction: [{
|
|
464
|
+
type: Output
|
|
462
465
|
}] } });
|
|
463
466
|
|
|
464
467
|
class QuickPickComponent {
|
|
@@ -547,6 +550,7 @@ class ShellComponent {
|
|
|
547
550
|
isSidebarOpen;
|
|
548
551
|
darkModeSelector = { mode: 'dark' };
|
|
549
552
|
onDarkModeSelect = new EventEmitter();
|
|
553
|
+
onUserAction = new EventEmitter();
|
|
550
554
|
toggleSidebar() {
|
|
551
555
|
this.isSidebarOpen = !this.isSidebarOpen;
|
|
552
556
|
}
|
|
@@ -554,11 +558,11 @@ class ShellComponent {
|
|
|
554
558
|
this.onDarkModeSelect.emit(this.darkModeSelector);
|
|
555
559
|
}
|
|
556
560
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap\">\n <ng-content> </ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig"], outputs: ["onDarkModeSelect"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
561
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserAction: "onUserAction" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap\">\n <ng-content> </ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
558
562
|
}
|
|
559
563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ShellComponent, decorators: [{
|
|
560
564
|
type: Component,
|
|
561
|
-
args: [{ selector: 'pho-shell', imports: [SidebarComponent, TopbarComponent, CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap\">\n <ng-content> </ng-content>\n </div>\n</div>\n" }]
|
|
565
|
+
args: [{ selector: 'pho-shell', imports: [SidebarComponent, TopbarComponent, CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-columns': '16rem 1fr',\n 'grid-template-rows': '3.5rem 1fr',\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar()\"\n ></pho-sidebar>\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap\">\n <ng-content> </ng-content>\n </div>\n</div>\n" }]
|
|
562
566
|
}], propDecorators: { config: [{
|
|
563
567
|
type: Input
|
|
564
568
|
}], isSidebarOpen: [{
|
|
@@ -567,6 +571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
567
571
|
type: Input
|
|
568
572
|
}], onDarkModeSelect: [{
|
|
569
573
|
type: Output
|
|
574
|
+
}], onUserAction: [{
|
|
575
|
+
type: Output
|
|
570
576
|
}] } });
|
|
571
577
|
|
|
572
578
|
var tableActionType;
|
|
@@ -5261,7 +5267,7 @@ class StatusBarComponent {
|
|
|
5261
5267
|
width: 60,
|
|
5262
5268
|
};
|
|
5263
5269
|
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=\"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"] }] });
|
|
5270
|
+
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 }}\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
5271
|
}
|
|
5266
5272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
5267
5273
|
type: Component,
|
|
@@ -5273,11 +5279,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
|
|
|
5273
5279
|
AvatarModule,
|
|
5274
5280
|
PopoverModule,
|
|
5275
5281
|
TagComponent,
|
|
5276
|
-
DatePipe,
|
|
5277
5282
|
TextLength,
|
|
5278
5283
|
FirstLetterPipe,
|
|
5279
5284
|
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=\"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"] }]
|
|
5285
|
+
], 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 }}\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
5286
|
}], propDecorators: { statusBarConfig: [{
|
|
5282
5287
|
type: Input
|
|
5283
5288
|
}], iconEnable: [{
|