ng-prime-tools 1.1.29 → 1.1.31
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.
|
@@ -6102,6 +6102,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
6102
6102
|
}]
|
|
6103
6103
|
}] });
|
|
6104
6104
|
|
|
6105
|
+
class PTMenuFancyComponent {
|
|
6106
|
+
constructor() {
|
|
6107
|
+
this.config = {
|
|
6108
|
+
icon: {
|
|
6109
|
+
code: 'pi pi-ellipsis-v',
|
|
6110
|
+
color: '#000',
|
|
6111
|
+
fontSize: '15px',
|
|
6112
|
+
},
|
|
6113
|
+
menuDirection: 'right',
|
|
6114
|
+
};
|
|
6115
|
+
this.cardMenuConfig = {
|
|
6116
|
+
noBorder: true,
|
|
6117
|
+
margin: '0',
|
|
6118
|
+
padding: '5px',
|
|
6119
|
+
};
|
|
6120
|
+
this.isOpen = false;
|
|
6121
|
+
}
|
|
6122
|
+
static { this.DEFAULT_TEXT_COLOR = '#000'; }
|
|
6123
|
+
static { this.DEFAULT_TEXT_FONT_SIZE = '15px'; }
|
|
6124
|
+
static { this.DEFAULT_ICON_COLOR = '#000'; }
|
|
6125
|
+
static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
|
|
6126
|
+
static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
|
|
6127
|
+
static { this.openMenuInstance = null; }
|
|
6128
|
+
toggleMenu() {
|
|
6129
|
+
if (PTMenuFancyComponent.openMenuInstance &&
|
|
6130
|
+
PTMenuFancyComponent.openMenuInstance !== this) {
|
|
6131
|
+
PTMenuFancyComponent.openMenuInstance.closeMenu();
|
|
6132
|
+
}
|
|
6133
|
+
this.isOpen = !this.isOpen;
|
|
6134
|
+
PTMenuFancyComponent.openMenuInstance = this.isOpen ? this : null;
|
|
6135
|
+
}
|
|
6136
|
+
closeMenu() {
|
|
6137
|
+
this.isOpen = false;
|
|
6138
|
+
if (PTMenuFancyComponent.openMenuInstance === this) {
|
|
6139
|
+
PTMenuFancyComponent.openMenuInstance = null;
|
|
6140
|
+
}
|
|
6141
|
+
}
|
|
6142
|
+
getMenuItemIconClass(item) {
|
|
6143
|
+
if (typeof item.icon === 'string') {
|
|
6144
|
+
return item.icon.trim();
|
|
6145
|
+
}
|
|
6146
|
+
return item.icon?.code?.trim() || '';
|
|
6147
|
+
}
|
|
6148
|
+
getMenuItemIconStyles(item) {
|
|
6149
|
+
if (typeof item.icon !== 'string') {
|
|
6150
|
+
return {
|
|
6151
|
+
color: item.icon?.color || PTMenuFancyComponent.DEFAULT_ICON_COLOR,
|
|
6152
|
+
fontSize: item.icon?.fontSize || PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
|
|
6153
|
+
};
|
|
6154
|
+
}
|
|
6155
|
+
return {
|
|
6156
|
+
color: PTMenuFancyComponent.DEFAULT_ICON_COLOR,
|
|
6157
|
+
fontSize: PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
|
|
6158
|
+
};
|
|
6159
|
+
}
|
|
6160
|
+
getIconClass() {
|
|
6161
|
+
return (this.config.icon?.code?.trim() || PTMenuFancyComponent.DEFAULT_ICON_CODE);
|
|
6162
|
+
}
|
|
6163
|
+
getIconStyles() {
|
|
6164
|
+
return {
|
|
6165
|
+
color: this.config.color ||
|
|
6166
|
+
this.config.icon?.color ||
|
|
6167
|
+
PTMenuFancyComponent.DEFAULT_ICON_COLOR,
|
|
6168
|
+
fontSize: this.config.fontSize ||
|
|
6169
|
+
this.config.icon?.fontSize ||
|
|
6170
|
+
PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
|
|
6171
|
+
};
|
|
6172
|
+
}
|
|
6173
|
+
getTextStyles(item) {
|
|
6174
|
+
return {
|
|
6175
|
+
color: item.color || PTMenuFancyComponent.DEFAULT_TEXT_COLOR,
|
|
6176
|
+
fontSize: item.fontSize || PTMenuFancyComponent.DEFAULT_TEXT_FONT_SIZE,
|
|
6177
|
+
};
|
|
6178
|
+
}
|
|
6179
|
+
isItemDisabled(item) {
|
|
6180
|
+
return !!item?.disabled || !!item?.isHeader || !item?.action;
|
|
6181
|
+
}
|
|
6182
|
+
onItemClick(item) {
|
|
6183
|
+
if (this.isItemDisabled(item)) {
|
|
6184
|
+
return;
|
|
6185
|
+
}
|
|
6186
|
+
this.closeMenu();
|
|
6187
|
+
item.action?.();
|
|
6188
|
+
}
|
|
6189
|
+
onDocumentClick(event) {
|
|
6190
|
+
const target = event.target;
|
|
6191
|
+
if (!(target instanceof Element)) {
|
|
6192
|
+
this.closeMenu();
|
|
6193
|
+
return;
|
|
6194
|
+
}
|
|
6195
|
+
const clickedInsideOwnMenu = target.closest('.pt-menu-fancy') === this.getHostElement(target);
|
|
6196
|
+
if (!clickedInsideOwnMenu) {
|
|
6197
|
+
this.closeMenu();
|
|
6198
|
+
}
|
|
6199
|
+
}
|
|
6200
|
+
getHostElement(target) {
|
|
6201
|
+
const nearestMenu = target.closest('.pt-menu-fancy');
|
|
6202
|
+
if (!nearestMenu) {
|
|
6203
|
+
return null;
|
|
6204
|
+
}
|
|
6205
|
+
// Only the currently active menu should remain open.
|
|
6206
|
+
return PTMenuFancyComponent.openMenuInstance === this ? nearestMenu : null;
|
|
6207
|
+
}
|
|
6208
|
+
ngOnDestroy() {
|
|
6209
|
+
this.closeMenu();
|
|
6210
|
+
}
|
|
6211
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMenuFancyComponent, isStandalone: false, selector: "pt-menu-fancy", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n [ngClass]=\"{\n open: isOpen,\n 'menu-left': config.menuDirection === 'left',\n 'menu-right': config.menuDirection === 'right'\n }\"\n class=\"pt-menu-fancy\"\n >\n <i\n class=\"menu-icon\"\n (click)=\"toggleMenu()\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n\n @if (isOpen) {\n <div class=\"menu-dropdown\">\n <pt-card [config]=\"cardMenuConfig\">\n @for (item of config.menuItems; track item) {\n <div\n class=\"menu-item\"\n [class.menu-item-disabled]=\"isItemDisabled(item)\"\n [class.menu-item-header]=\"item.isHeader\"\n (click)=\"onItemClick(item)\"\n >\n @if (getMenuItemIconClass(item)) {\n <i\n [ngClass]=\"getMenuItemIconClass(item)\"\n [ngStyle]=\"getMenuItemIconStyles(item)\"\n ></i>\n }\n <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n </div>\n }\n </pt-card>\n </div>\n }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
|
|
6213
|
+
}
|
|
6214
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, decorators: [{
|
|
6215
|
+
type: Component,
|
|
6216
|
+
args: [{ selector: 'pt-menu-fancy', standalone: false, template: "<div\n [ngClass]=\"{\n open: isOpen,\n 'menu-left': config.menuDirection === 'left',\n 'menu-right': config.menuDirection === 'right'\n }\"\n class=\"pt-menu-fancy\"\n >\n <i\n class=\"menu-icon\"\n (click)=\"toggleMenu()\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n\n @if (isOpen) {\n <div class=\"menu-dropdown\">\n <pt-card [config]=\"cardMenuConfig\">\n @for (item of config.menuItems; track item) {\n <div\n class=\"menu-item\"\n [class.menu-item-disabled]=\"isItemDisabled(item)\"\n [class.menu-item-header]=\"item.isHeader\"\n (click)=\"onItemClick(item)\"\n >\n @if (getMenuItemIconClass(item)) {\n <i\n [ngClass]=\"getMenuItemIconClass(item)\"\n [ngStyle]=\"getMenuItemIconStyles(item)\"\n ></i>\n }\n <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n </div>\n }\n </pt-card>\n </div>\n }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"] }]
|
|
6217
|
+
}], propDecorators: { config: [{
|
|
6218
|
+
type: Input
|
|
6219
|
+
}], onDocumentClick: [{
|
|
6220
|
+
type: HostListener,
|
|
6221
|
+
args: ['document:click', ['$event']]
|
|
6222
|
+
}] } });
|
|
6223
|
+
|
|
6105
6224
|
class PTNotificationComponent {
|
|
6106
6225
|
constructor() {
|
|
6107
6226
|
/**
|
|
@@ -7462,11 +7581,11 @@ class PTNavbarMenuComponent {
|
|
|
7462
7581
|
};
|
|
7463
7582
|
}
|
|
7464
7583
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7465
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime", notifications: "notifications", notificationConfig: "notificationConfig", notificationTotalRecords: "notificationTotalRecords", notificationTotalUnreadRecords: "notificationTotalUnreadRecords", notificationPage: "notificationPage", notificationRows: "notificationRows", notificationLoading: "notificationLoading", releaseNotes: "releaseNotes", releaseNotesConfig: "releaseNotesConfig", releaseNotesLoading: "releaseNotesLoading", releaseNotesHasMore: "releaseNotesHasMore", releaseNotesPageSize: "releaseNotesPageSize", releaseNotesTotalUnreadRecords: "releaseNotesTotalUnreadRecords" }, outputs: { toggleSidebar: "toggleSidebar", notificationAction: "notificationAction", notificationClick: "notificationClick", notificationPanelOpened: "notificationPanelOpened", notificationPanelClosed: "notificationPanelClosed", notificationGlobalAction: "notificationGlobalAction", notificationViewAll: "notificationViewAll", notificationLoadMore: "notificationLoadMore", releaseNoteClick: "releaseNoteClick", releaseNoteAction: "releaseNoteAction", releaseNoteGlobalAction: "releaseNoteGlobalAction", releaseNotesViewAll: "releaseNotesViewAll", releaseNotesLoadMore: "releaseNotesLoadMore" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <div class=\"navbar-left\">\n <a class=\"logo-link\" routerLink=\"/\">\n @if (getLogoUrl()) {\n <img\n class=\"navbar-logo\"\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n />\n }\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a class=\"toggle-btn\" (click)=\"toggleMenu()\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n @if (hasDateTime()) {\n <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n\n @if (isFixedMode()) {\n <input\n class=\"dt-input\"\n type=\"datetime-local\"\n step=\"1\"\n [value]=\"manualDateTimeLocal\"\n (input)=\"onManualDateTimeChange($any($event.target).value)\"\n />\n }\n </div>\n </div>\n }\n\n <div class=\"pt-navbar-actions\">\n <pt-release-notes\n [releases]=\"releaseNotes\"\n [config]=\"releaseNotesConfig\"\n [loading]=\"releaseNotesLoading\"\n [hasMore]=\"releaseNotesHasMore\"\n [pageSize]=\"releaseNotesPageSize\"\n [totalUnreadRecords]=\"releaseNotesTotalUnreadRecords\"\n (releaseClick)=\"onReleaseNoteClick($event)\"\n (action)=\"onReleaseNoteAction($event)\"\n (globalAction)=\"onReleaseNoteGlobalAction($event)\"\n (viewAll)=\"onReleaseNotesViewAll()\"\n (loadMore)=\"onReleaseNotesLoadMore($event)\"\n ></pt-release-notes>\n\n <pt-notification\n [notifications]=\"notifications\"\n [config]=\"notificationConfig\"\n [totalRecords]=\"notificationTotalRecords\"\n [totalUnreadRecords]=\"notificationTotalUnreadRecords\"\n [page]=\"notificationPage\"\n [rows]=\"notificationRows\"\n [loading]=\"notificationLoading\"\n (notificationClick)=\"onNotificationClick($event)\"\n (action)=\"onNotificationAction($event)\"\n (globalAction)=\"onNotificationGlobalAction($event)\"\n (viewAll)=\"onNotificationViewAll()\"\n (panelOpened)=\"onNotificationPanelOpened()\"\n (panelClosed)=\"onNotificationPanelClosed()\"\n (loadMore)=\"onNotificationLoadMore($event)\"\n ></pt-notification>\n @if (hasUser()) {\n <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n @if (showProfileLeftOfAvatar()) {\n <div\n class=\"navbar-user-profile-left\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <button\n type=\"button\"\n class=\"navbar-user-trigger\"\n (click)=\"toggleUserMenu()\"\n >\n <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n @if (isInitialsAvatar()) {\n <span>\n {{ getUserInitials() }}\n </span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n </button>\n\n @if (isUserMenuOpen) {\n <div class=\"navbar-user-menu\">\n <div class=\"navbar-user-menu-header\">\n <div\n class=\"navbar-user-menu-avatar\"\n [ngStyle]=\"getUserAvatarStyles()\"\n >\n @if (isInitialsAvatar()) {\n <span>\n {{ getUserInitials() }}\n </span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n\n <div class=\"navbar-user-menu-identity\">\n <div class=\"navbar-user-menu-name\">\n {{ getUserFullName() }}\n </div>\n\n @if (showProfileInMenu()) {\n <div\n class=\"navbar-user-menu-profile\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <div class=\"navbar-user-menu-username\">\n {{ getUsername() }}\n </div>\n </div>\n </div>\n\n @if (hasUserMenuItems()) {\n <div class=\"navbar-user-menu-separator\"></div>\n\n @for (item of getUserMenuItems(); track item) {\n @if (item.separatorBefore) {\n <div class=\"navbar-user-menu-separator\"></div>\n }\n\n <button\n type=\"button\"\n [class]=\"getUserMenuItemClasses(item)\"\n [disabled]=\"item.disabled\"\n (click)=\"onUserMenuItemClick(item)\"\n >\n @if (getUserMenuItemIcon(item)) {\n <i [class]=\"getUserMenuItemIcon(item)\"></i>\n }\n\n <span>\n {{ item.text }}\n </span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;box-sizing:border-box;padding-right:16px;padding-left:16px;border-bottom:1px solid var(--pt-navbar-border, #e5e7eb);background-color:var(--pt-navbar-bg, #ffffff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:16px}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;min-width:0;color:inherit;text-decoration:none}.pt-nav-bar-menu .navbar-logo{display:block;margin-left:0;margin-right:16px;object-fit:contain}.pt-nav-bar-menu .navbar-title{min-width:0;color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;margin-left:8px;padding:0;border-radius:10px;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f5f9)}.pt-nav-bar-menu .toggle-btn>i{line-height:1}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{color:var(--pt-navbar-toggle-color, #333333);font-size:1.35rem}.pt-nav-bar-menu .navbar-middle{display:flex;align-items:center;min-width:0;flex:1 1 auto;padding:0 16px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;max-width:100%;flex:0 0 auto;white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap;line-height:1}.pt-nav-bar-menu .navbar-datetime .dt-input{height:34px;padding:0 9px;border:1px solid var(--pt-navbar-input-border, #d1d5db);border-radius:8px;background:var(--pt-navbar-input-bg, #ffffff);color:var(--pt-navbar-input-text, #333333);font-size:12px;outline:none;box-sizing:border-box}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .pt-navbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 0 auto;white-space:nowrap}.pt-nav-bar-menu pt-release-notes,.pt-nav-bar-menu pt-notification{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:10px;margin-left:4px;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{display:inline-flex;align-items:center;justify-content:center;max-width:170px;min-height:34px;padding:0 14px;border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;background:var(--pt-navbar-user-profile-bg, #eff6ff);color:var(--pt-navbar-user-profile-text, #334155);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;font-weight:700;line-height:1}.pt-nav-bar-menu .navbar-user-trigger{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:999px;background:transparent;cursor:pointer;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-navbar-user-focus-shadow, rgba(37, 99, 235, .14))}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);box-sizing:border-box;font-size:.92rem;font-weight:800;letter-spacing:.04em;line-height:1;text-transform:uppercase}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;padding:.75rem;border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10005}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0;flex:1 1 auto}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;margin:.4rem 0;background:var(--pt-navbar-user-menu-separator, #e5e7eb)}.pt-nav-bar-menu .navbar-user-menu-item{display:flex;align-items:center;gap:.55rem;width:100%;min-height:38px;padding:.5rem .55rem;border:none;border-radius:9px;background:transparent;color:var(--pt-navbar-user-menu-item-text, #334155);box-sizing:border-box;cursor:pointer;text-align:left;font-size:.86rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-nav-bar-menu .navbar-user-menu-item:hover:not(:disabled){background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover:not(:disabled){background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}.pt-nav-bar-menu .navbar-user-menu-item i{width:18px;flex:0 0 18px;text-align:center}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}.pt-nav-bar-menu .navbar-left{flex:1 1 auto}.pt-nav-bar-menu .navbar-middle{order:3;width:100%;flex:1 0 100%;padding:4px 0 0;justify-content:center}.pt-nav-bar-menu .pt-navbar-actions{flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:650px){.pt-nav-bar-menu{gap:8px}.pt-nav-bar-menu .navbar-title{display:none}.pt-nav-bar-menu .toggle-btn{margin-left:0}.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .pt-navbar-actions{gap:4px}}@media(max-width:520px){.pt-nav-bar-menu{padding-right:8px;padding-left:8px}.pt-nav-bar-menu .navbar-datetime .dt-value{font-size:.8rem!important}.pt-nav-bar-menu .navbar-user-menu{position:fixed;top:60px;right:8px;width:240px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTNotificationComponent, selector: "pt-notification", inputs: ["notifications", "config", "totalRecords", "totalUnreadRecords", "page", "rows", "loading"], outputs: ["notificationClick", "action", "globalAction", "viewAll", "panelOpened", "panelClosed", "loadMore"] }, { kind: "component", type: PTReleaseNotesComponent, selector: "pt-release-notes", inputs: ["releases", "config", "loading", "hasMore", "pageSize", "totalUnreadRecords"], outputs: ["releaseClick", "action", "globalAction", "viewAll", "loadMore", "panelOpened", "panelClosed"] }] }); }
|
|
7584
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime", notifications: "notifications", notificationConfig: "notificationConfig", notificationTotalRecords: "notificationTotalRecords", notificationTotalUnreadRecords: "notificationTotalUnreadRecords", notificationPage: "notificationPage", notificationRows: "notificationRows", notificationLoading: "notificationLoading", releaseNotes: "releaseNotes", releaseNotesConfig: "releaseNotesConfig", releaseNotesLoading: "releaseNotesLoading", releaseNotesHasMore: "releaseNotesHasMore", releaseNotesPageSize: "releaseNotesPageSize", releaseNotesTotalUnreadRecords: "releaseNotesTotalUnreadRecords" }, outputs: { toggleSidebar: "toggleSidebar", notificationAction: "notificationAction", notificationClick: "notificationClick", notificationPanelOpened: "notificationPanelOpened", notificationPanelClosed: "notificationPanelClosed", notificationGlobalAction: "notificationGlobalAction", notificationViewAll: "notificationViewAll", notificationLoadMore: "notificationLoadMore", releaseNoteClick: "releaseNoteClick", releaseNoteAction: "releaseNoteAction", releaseNoteGlobalAction: "releaseNoteGlobalAction", releaseNotesViewAll: "releaseNotesViewAll", releaseNotesLoadMore: "releaseNotesLoadMore" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <div class=\"navbar-left\">\n <a class=\"logo-link\" routerLink=\"/\">\n @if (getLogoUrl()) {\n <img\n class=\"navbar-logo\"\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n />\n }\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a class=\"toggle-btn\" (click)=\"toggleMenu()\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n @if (hasDateTime()) {\n <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n\n @if (isFixedMode()) {\n <input\n class=\"dt-input\"\n type=\"datetime-local\"\n step=\"1\"\n [value]=\"manualDateTimeLocal\"\n (input)=\"onManualDateTimeChange($any($event.target).value)\"\n />\n }\n </div>\n </div>\n }\n\n <div class=\"pt-navbar-actions\">\n <!-- ====================================================== -->\n <!-- CONFIGURABLE NAVBAR MENUS -->\n <!-- ====================================================== -->\n @for (menu of navBarMenuConfig.menus ?? []; track $index) {\n <pt-menu-fancy [config]=\"menu\"></pt-menu-fancy>\n }\n\n <!-- ====================================================== -->\n <!-- RELEASE NOTES -->\n <!-- ====================================================== -->\n <pt-release-notes\n [releases]=\"releaseNotes\"\n [config]=\"releaseNotesConfig\"\n [loading]=\"releaseNotesLoading\"\n [hasMore]=\"releaseNotesHasMore\"\n [pageSize]=\"releaseNotesPageSize\"\n [totalUnreadRecords]=\"releaseNotesTotalUnreadRecords\"\n (releaseClick)=\"onReleaseNoteClick($event)\"\n (action)=\"onReleaseNoteAction($event)\"\n (globalAction)=\"onReleaseNoteGlobalAction($event)\"\n (viewAll)=\"onReleaseNotesViewAll()\"\n (loadMore)=\"onReleaseNotesLoadMore($event)\"\n ></pt-release-notes>\n\n <!-- ====================================================== -->\n <!-- NOTIFICATIONS -->\n <!-- ====================================================== -->\n <pt-notification\n [notifications]=\"notifications\"\n [config]=\"notificationConfig\"\n [totalRecords]=\"notificationTotalRecords\"\n [totalUnreadRecords]=\"notificationTotalUnreadRecords\"\n [page]=\"notificationPage\"\n [rows]=\"notificationRows\"\n [loading]=\"notificationLoading\"\n (notificationClick)=\"onNotificationClick($event)\"\n (action)=\"onNotificationAction($event)\"\n (globalAction)=\"onNotificationGlobalAction($event)\"\n (viewAll)=\"onNotificationViewAll()\"\n (panelOpened)=\"onNotificationPanelOpened()\"\n (panelClosed)=\"onNotificationPanelClosed()\"\n (loadMore)=\"onNotificationLoadMore($event)\"\n ></pt-notification>\n\n <!-- ====================================================== -->\n <!-- USER PROFILE -->\n <!-- ====================================================== -->\n @if (hasUser()) {\n <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n @if (showProfileLeftOfAvatar()) {\n <div\n class=\"navbar-user-profile-left\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <button\n type=\"button\"\n class=\"navbar-user-trigger\"\n (click)=\"toggleUserMenu()\"\n >\n <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n @if (isInitialsAvatar()) {\n <span>\n {{ getUserInitials() }}\n </span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n </button>\n\n @if (isUserMenuOpen) {\n <div class=\"navbar-user-menu\">\n <div class=\"navbar-user-menu-header\">\n <div\n class=\"navbar-user-menu-avatar\"\n [ngStyle]=\"getUserAvatarStyles()\"\n >\n @if (isInitialsAvatar()) {\n <span>\n {{ getUserInitials() }}\n </span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n\n <div class=\"navbar-user-menu-identity\">\n <div class=\"navbar-user-menu-name\">\n {{ getUserFullName() }}\n </div>\n\n @if (showProfileInMenu()) {\n <div\n class=\"navbar-user-menu-profile\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <div class=\"navbar-user-menu-username\">\n {{ getUsername() }}\n </div>\n </div>\n </div>\n\n @if (hasUserMenuItems()) {\n <div class=\"navbar-user-menu-separator\"></div>\n\n @for (item of getUserMenuItems(); track item) {\n @if (item.separatorBefore) {\n <div class=\"navbar-user-menu-separator\"></div>\n }\n\n <button\n type=\"button\"\n [class]=\"getUserMenuItemClasses(item)\"\n [disabled]=\"item.disabled\"\n (click)=\"onUserMenuItemClick(item)\"\n >\n @if (getUserMenuItemIcon(item)) {\n <i [class]=\"getUserMenuItemIcon(item)\"></i>\n }\n\n <span>\n {{ item.text }}\n </span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;box-sizing:border-box;padding-right:16px;padding-left:16px;border-bottom:1px solid var(--pt-navbar-border, #e5e7eb);background-color:var(--pt-navbar-bg, #ffffff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:16px}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;min-width:0;color:inherit;text-decoration:none}.pt-nav-bar-menu .navbar-logo{display:block;margin-left:0;margin-right:16px;object-fit:contain}.pt-nav-bar-menu .navbar-title{min-width:0;color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;margin-left:8px;padding:0;border-radius:10px;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f5f9)}.pt-nav-bar-menu .toggle-btn>i{line-height:1}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{color:var(--pt-navbar-toggle-color, #333333);font-size:1.35rem}.pt-nav-bar-menu .navbar-middle{display:flex;align-items:center;min-width:0;flex:1 1 auto;padding:0 16px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;max-width:100%;flex:0 0 auto;white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap;line-height:1}.pt-nav-bar-menu .navbar-datetime .dt-input{height:34px;padding:0 9px;border:1px solid var(--pt-navbar-input-border, #d1d5db);border-radius:8px;background:var(--pt-navbar-input-bg, #ffffff);color:var(--pt-navbar-input-text, #333333);font-size:12px;outline:none;box-sizing:border-box}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .pt-navbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 0 auto;white-space:nowrap}.pt-nav-bar-menu pt-menu-fancy,.pt-nav-bar-menu pt-release-notes,.pt-nav-bar-menu pt-notification{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:10px;margin-left:4px;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{display:inline-flex;align-items:center;justify-content:center;max-width:170px;min-height:34px;padding:0 14px;border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;background:var(--pt-navbar-user-profile-bg, #eff6ff);color:var(--pt-navbar-user-profile-text, #334155);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;font-weight:700;line-height:1}.pt-nav-bar-menu .navbar-user-trigger{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:999px;background:transparent;cursor:pointer;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-navbar-user-focus-shadow, rgba(37, 99, 235, .14))}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);box-sizing:border-box;font-size:.92rem;font-weight:800;letter-spacing:.04em;line-height:1;text-transform:uppercase}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;padding:.75rem;border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10005}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0;flex:1 1 auto}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;margin:.4rem 0;background:var(--pt-navbar-user-menu-separator, #e5e7eb)}.pt-nav-bar-menu .navbar-user-menu-item{display:flex;align-items:center;gap:.55rem;width:100%;min-height:38px;padding:.5rem .55rem;border:none;border-radius:9px;background:transparent;color:var(--pt-navbar-user-menu-item-text, #334155);box-sizing:border-box;cursor:pointer;text-align:left;font-size:.86rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-nav-bar-menu .navbar-user-menu-item:hover:not(:disabled){background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover:not(:disabled){background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}.pt-nav-bar-menu .navbar-user-menu-item i{width:18px;flex:0 0 18px;text-align:center}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}.pt-nav-bar-menu .navbar-left{flex:1 1 auto}.pt-nav-bar-menu .navbar-middle{order:3;width:100%;flex:1 0 100%;padding:4px 0 0;justify-content:center}.pt-nav-bar-menu .pt-navbar-actions{flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:650px){.pt-nav-bar-menu{gap:8px}.pt-nav-bar-menu .navbar-title{display:none}.pt-nav-bar-menu .toggle-btn{margin-left:0}.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .pt-navbar-actions{gap:4px}}@media(max-width:520px){.pt-nav-bar-menu{padding-right:8px;padding-left:8px}.pt-nav-bar-menu .navbar-datetime .dt-value{font-size:.8rem!important}.pt-nav-bar-menu .navbar-user-menu{position:fixed;top:60px;right:8px;width:240px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }, { kind: "component", type: PTNotificationComponent, selector: "pt-notification", inputs: ["notifications", "config", "totalRecords", "totalUnreadRecords", "page", "rows", "loading"], outputs: ["notificationClick", "action", "globalAction", "viewAll", "panelOpened", "panelClosed", "loadMore"] }, { kind: "component", type: PTReleaseNotesComponent, selector: "pt-release-notes", inputs: ["releases", "config", "loading", "hasMore", "pageSize", "totalUnreadRecords"], outputs: ["releaseClick", "action", "globalAction", "viewAll", "loadMore", "panelOpened", "panelClosed"] }] }); }
|
|
7466
7585
|
}
|
|
7467
7586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
|
|
7468
7587
|
type: Component,
|
|
7469
|
-
args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <div class=\"navbar-left\">\n <a class=\"logo-link\" routerLink=\"/\">\n @if (getLogoUrl()) {\n <img\n class=\"navbar-logo\"\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n />\n }\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a class=\"toggle-btn\" (click)=\"toggleMenu()\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n @if (hasDateTime()) {\n <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n\n @if (isFixedMode()) {\n <input\n class=\"dt-input\"\n type=\"datetime-local\"\n step=\"1\"\n [value]=\"manualDateTimeLocal\"\n (input)=\"onManualDateTimeChange($any($event.target).value)\"\n />\n }\n </div>\n </div>\n }\n\n <div class=\"pt-navbar-actions\">\n <pt-release-notes\n [releases]=\"releaseNotes\"\n [config]=\"releaseNotesConfig\"\n [loading]=\"releaseNotesLoading\"\n [hasMore]=\"releaseNotesHasMore\"\n [pageSize]=\"releaseNotesPageSize\"\n [totalUnreadRecords]=\"releaseNotesTotalUnreadRecords\"\n (releaseClick)=\"onReleaseNoteClick($event)\"\n (action)=\"onReleaseNoteAction($event)\"\n (globalAction)=\"onReleaseNoteGlobalAction($event)\"\n (viewAll)=\"onReleaseNotesViewAll()\"\n (loadMore)=\"onReleaseNotesLoadMore($event)\"\n ></pt-release-notes>\n\n <pt-notification\n [notifications]=\"notifications\"\n [config]=\"notificationConfig\"\n [totalRecords]=\"notificationTotalRecords\"\n [totalUnreadRecords]=\"notificationTotalUnreadRecords\"\n [page]=\"notificationPage\"\n [rows]=\"notificationRows\"\n [loading]=\"notificationLoading\"\n (notificationClick)=\"onNotificationClick($event)\"\n (action)=\"onNotificationAction($event)\"\n (globalAction)=\"onNotificationGlobalAction($event)\"\n (viewAll)=\"onNotificationViewAll()\"\n (panelOpened)=\"onNotificationPanelOpened()\"\n (panelClosed)=\"onNotificationPanelClosed()\"\n (loadMore)=\"onNotificationLoadMore($event)\"\n ></pt-notification>\n @if (hasUser()) {\n <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n @if (showProfileLeftOfAvatar()) {\n <div\n class=\"navbar-user-profile-left\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <button\n type=\"button\"\n class=\"navbar-user-trigger\"\n (click)=\"toggleUserMenu()\"\n >\n <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n @if (isInitialsAvatar()) {\n <span>\n {{ getUserInitials() }}\n </span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n </button>\n\n @if (isUserMenuOpen) {\n <div class=\"navbar-user-menu\">\n <div class=\"navbar-user-menu-header\">\n <div\n class=\"navbar-user-menu-avatar\"\n [ngStyle]=\"getUserAvatarStyles()\"\n >\n @if (isInitialsAvatar()) {\n <span>\n {{ getUserInitials() }}\n </span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n\n <div class=\"navbar-user-menu-identity\">\n <div class=\"navbar-user-menu-name\">\n {{ getUserFullName() }}\n </div>\n\n @if (showProfileInMenu()) {\n <div\n class=\"navbar-user-menu-profile\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <div class=\"navbar-user-menu-username\">\n {{ getUsername() }}\n </div>\n </div>\n </div>\n\n @if (hasUserMenuItems()) {\n <div class=\"navbar-user-menu-separator\"></div>\n\n @for (item of getUserMenuItems(); track item) {\n @if (item.separatorBefore) {\n <div class=\"navbar-user-menu-separator\"></div>\n }\n\n <button\n type=\"button\"\n [class]=\"getUserMenuItemClasses(item)\"\n [disabled]=\"item.disabled\"\n (click)=\"onUserMenuItemClick(item)\"\n >\n @if (getUserMenuItemIcon(item)) {\n <i [class]=\"getUserMenuItemIcon(item)\"></i>\n }\n\n <span>\n {{ item.text }}\n </span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;box-sizing:border-box;padding-right:16px;padding-left:16px;border-bottom:1px solid var(--pt-navbar-border, #e5e7eb);background-color:var(--pt-navbar-bg, #ffffff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:16px}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;min-width:0;color:inherit;text-decoration:none}.pt-nav-bar-menu .navbar-logo{display:block;margin-left:0;margin-right:16px;object-fit:contain}.pt-nav-bar-menu .navbar-title{min-width:0;color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;margin-left:8px;padding:0;border-radius:10px;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f5f9)}.pt-nav-bar-menu .toggle-btn>i{line-height:1}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{color:var(--pt-navbar-toggle-color, #333333);font-size:1.35rem}.pt-nav-bar-menu .navbar-middle{display:flex;align-items:center;min-width:0;flex:1 1 auto;padding:0 16px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;max-width:100%;flex:0 0 auto;white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap;line-height:1}.pt-nav-bar-menu .navbar-datetime .dt-input{height:34px;padding:0 9px;border:1px solid var(--pt-navbar-input-border, #d1d5db);border-radius:8px;background:var(--pt-navbar-input-bg, #ffffff);color:var(--pt-navbar-input-text, #333333);font-size:12px;outline:none;box-sizing:border-box}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .pt-navbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 0 auto;white-space:nowrap}.pt-nav-bar-menu pt-release-notes,.pt-nav-bar-menu pt-notification{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:10px;margin-left:4px;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{display:inline-flex;align-items:center;justify-content:center;max-width:170px;min-height:34px;padding:0 14px;border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;background:var(--pt-navbar-user-profile-bg, #eff6ff);color:var(--pt-navbar-user-profile-text, #334155);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;font-weight:700;line-height:1}.pt-nav-bar-menu .navbar-user-trigger{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:999px;background:transparent;cursor:pointer;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-navbar-user-focus-shadow, rgba(37, 99, 235, .14))}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);box-sizing:border-box;font-size:.92rem;font-weight:800;letter-spacing:.04em;line-height:1;text-transform:uppercase}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;padding:.75rem;border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10005}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0;flex:1 1 auto}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;margin:.4rem 0;background:var(--pt-navbar-user-menu-separator, #e5e7eb)}.pt-nav-bar-menu .navbar-user-menu-item{display:flex;align-items:center;gap:.55rem;width:100%;min-height:38px;padding:.5rem .55rem;border:none;border-radius:9px;background:transparent;color:var(--pt-navbar-user-menu-item-text, #334155);box-sizing:border-box;cursor:pointer;text-align:left;font-size:.86rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-nav-bar-menu .navbar-user-menu-item:hover:not(:disabled){background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover:not(:disabled){background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}.pt-nav-bar-menu .navbar-user-menu-item i{width:18px;flex:0 0 18px;text-align:center}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}.pt-nav-bar-menu .navbar-left{flex:1 1 auto}.pt-nav-bar-menu .navbar-middle{order:3;width:100%;flex:1 0 100%;padding:4px 0 0;justify-content:center}.pt-nav-bar-menu .pt-navbar-actions{flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:650px){.pt-nav-bar-menu{gap:8px}.pt-nav-bar-menu .navbar-title{display:none}.pt-nav-bar-menu .toggle-btn{margin-left:0}.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .pt-navbar-actions{gap:4px}}@media(max-width:520px){.pt-nav-bar-menu{padding-right:8px;padding-left:8px}.pt-nav-bar-menu .navbar-datetime .dt-value{font-size:.8rem!important}.pt-nav-bar-menu .navbar-user-menu{position:fixed;top:60px;right:8px;width:240px}}\n"] }]
|
|
7588
|
+
args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <div class=\"navbar-left\">\n <a class=\"logo-link\" routerLink=\"/\">\n @if (getLogoUrl()) {\n <img\n class=\"navbar-logo\"\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n />\n }\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a class=\"toggle-btn\" (click)=\"toggleMenu()\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n @if (hasDateTime()) {\n <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n\n @if (isFixedMode()) {\n <input\n class=\"dt-input\"\n type=\"datetime-local\"\n step=\"1\"\n [value]=\"manualDateTimeLocal\"\n (input)=\"onManualDateTimeChange($any($event.target).value)\"\n />\n }\n </div>\n </div>\n }\n\n <div class=\"pt-navbar-actions\">\n <!-- ====================================================== -->\n <!-- CONFIGURABLE NAVBAR MENUS -->\n <!-- ====================================================== -->\n @for (menu of navBarMenuConfig.menus ?? []; track $index) {\n <pt-menu-fancy [config]=\"menu\"></pt-menu-fancy>\n }\n\n <!-- ====================================================== -->\n <!-- RELEASE NOTES -->\n <!-- ====================================================== -->\n <pt-release-notes\n [releases]=\"releaseNotes\"\n [config]=\"releaseNotesConfig\"\n [loading]=\"releaseNotesLoading\"\n [hasMore]=\"releaseNotesHasMore\"\n [pageSize]=\"releaseNotesPageSize\"\n [totalUnreadRecords]=\"releaseNotesTotalUnreadRecords\"\n (releaseClick)=\"onReleaseNoteClick($event)\"\n (action)=\"onReleaseNoteAction($event)\"\n (globalAction)=\"onReleaseNoteGlobalAction($event)\"\n (viewAll)=\"onReleaseNotesViewAll()\"\n (loadMore)=\"onReleaseNotesLoadMore($event)\"\n ></pt-release-notes>\n\n <!-- ====================================================== -->\n <!-- NOTIFICATIONS -->\n <!-- ====================================================== -->\n <pt-notification\n [notifications]=\"notifications\"\n [config]=\"notificationConfig\"\n [totalRecords]=\"notificationTotalRecords\"\n [totalUnreadRecords]=\"notificationTotalUnreadRecords\"\n [page]=\"notificationPage\"\n [rows]=\"notificationRows\"\n [loading]=\"notificationLoading\"\n (notificationClick)=\"onNotificationClick($event)\"\n (action)=\"onNotificationAction($event)\"\n (globalAction)=\"onNotificationGlobalAction($event)\"\n (viewAll)=\"onNotificationViewAll()\"\n (panelOpened)=\"onNotificationPanelOpened()\"\n (panelClosed)=\"onNotificationPanelClosed()\"\n (loadMore)=\"onNotificationLoadMore($event)\"\n ></pt-notification>\n\n <!-- ====================================================== -->\n <!-- USER PROFILE -->\n <!-- ====================================================== -->\n @if (hasUser()) {\n <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n @if (showProfileLeftOfAvatar()) {\n <div\n class=\"navbar-user-profile-left\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <button\n type=\"button\"\n class=\"navbar-user-trigger\"\n (click)=\"toggleUserMenu()\"\n >\n <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n @if (isInitialsAvatar()) {\n <span>\n {{ getUserInitials() }}\n </span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n </button>\n\n @if (isUserMenuOpen) {\n <div class=\"navbar-user-menu\">\n <div class=\"navbar-user-menu-header\">\n <div\n class=\"navbar-user-menu-avatar\"\n [ngStyle]=\"getUserAvatarStyles()\"\n >\n @if (isInitialsAvatar()) {\n <span>\n {{ getUserInitials() }}\n </span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n\n <div class=\"navbar-user-menu-identity\">\n <div class=\"navbar-user-menu-name\">\n {{ getUserFullName() }}\n </div>\n\n @if (showProfileInMenu()) {\n <div\n class=\"navbar-user-menu-profile\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <div class=\"navbar-user-menu-username\">\n {{ getUsername() }}\n </div>\n </div>\n </div>\n\n @if (hasUserMenuItems()) {\n <div class=\"navbar-user-menu-separator\"></div>\n\n @for (item of getUserMenuItems(); track item) {\n @if (item.separatorBefore) {\n <div class=\"navbar-user-menu-separator\"></div>\n }\n\n <button\n type=\"button\"\n [class]=\"getUserMenuItemClasses(item)\"\n [disabled]=\"item.disabled\"\n (click)=\"onUserMenuItemClick(item)\"\n >\n @if (getUserMenuItemIcon(item)) {\n <i [class]=\"getUserMenuItemIcon(item)\"></i>\n }\n\n <span>\n {{ item.text }}\n </span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;box-sizing:border-box;padding-right:16px;padding-left:16px;border-bottom:1px solid var(--pt-navbar-border, #e5e7eb);background-color:var(--pt-navbar-bg, #ffffff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:16px}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;min-width:0;color:inherit;text-decoration:none}.pt-nav-bar-menu .navbar-logo{display:block;margin-left:0;margin-right:16px;object-fit:contain}.pt-nav-bar-menu .navbar-title{min-width:0;color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;margin-left:8px;padding:0;border-radius:10px;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f5f9)}.pt-nav-bar-menu .toggle-btn>i{line-height:1}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{color:var(--pt-navbar-toggle-color, #333333);font-size:1.35rem}.pt-nav-bar-menu .navbar-middle{display:flex;align-items:center;min-width:0;flex:1 1 auto;padding:0 16px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;max-width:100%;flex:0 0 auto;white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap;line-height:1}.pt-nav-bar-menu .navbar-datetime .dt-input{height:34px;padding:0 9px;border:1px solid var(--pt-navbar-input-border, #d1d5db);border-radius:8px;background:var(--pt-navbar-input-bg, #ffffff);color:var(--pt-navbar-input-text, #333333);font-size:12px;outline:none;box-sizing:border-box}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .pt-navbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 0 auto;white-space:nowrap}.pt-nav-bar-menu pt-menu-fancy,.pt-nav-bar-menu pt-release-notes,.pt-nav-bar-menu pt-notification{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:10px;margin-left:4px;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{display:inline-flex;align-items:center;justify-content:center;max-width:170px;min-height:34px;padding:0 14px;border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;background:var(--pt-navbar-user-profile-bg, #eff6ff);color:var(--pt-navbar-user-profile-text, #334155);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;font-weight:700;line-height:1}.pt-nav-bar-menu .navbar-user-trigger{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:999px;background:transparent;cursor:pointer;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-navbar-user-focus-shadow, rgba(37, 99, 235, .14))}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);box-sizing:border-box;font-size:.92rem;font-weight:800;letter-spacing:.04em;line-height:1;text-transform:uppercase}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;padding:.75rem;border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10005}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0;flex:1 1 auto}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;margin:.4rem 0;background:var(--pt-navbar-user-menu-separator, #e5e7eb)}.pt-nav-bar-menu .navbar-user-menu-item{display:flex;align-items:center;gap:.55rem;width:100%;min-height:38px;padding:.5rem .55rem;border:none;border-radius:9px;background:transparent;color:var(--pt-navbar-user-menu-item-text, #334155);box-sizing:border-box;cursor:pointer;text-align:left;font-size:.86rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-nav-bar-menu .navbar-user-menu-item:hover:not(:disabled){background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover:not(:disabled){background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}.pt-nav-bar-menu .navbar-user-menu-item i{width:18px;flex:0 0 18px;text-align:center}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}.pt-nav-bar-menu .navbar-left{flex:1 1 auto}.pt-nav-bar-menu .navbar-middle{order:3;width:100%;flex:1 0 100%;padding:4px 0 0;justify-content:center}.pt-nav-bar-menu .pt-navbar-actions{flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:650px){.pt-nav-bar-menu{gap:8px}.pt-nav-bar-menu .navbar-title{display:none}.pt-nav-bar-menu .toggle-btn{margin-left:0}.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .pt-navbar-actions{gap:4px}}@media(max-width:520px){.pt-nav-bar-menu{padding-right:8px;padding-left:8px}.pt-nav-bar-menu .navbar-datetime .dt-value{font-size:.8rem!important}.pt-nav-bar-menu .navbar-user-menu{position:fixed;top:60px;right:8px;width:240px}}\n"] }]
|
|
7470
7589
|
}], propDecorators: { navBarMenuConfig: [{
|
|
7471
7590
|
type: Input
|
|
7472
7591
|
}], serverDateTime: [{
|
|
@@ -7528,107 +7647,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
7528
7647
|
args: ['document:click']
|
|
7529
7648
|
}] } });
|
|
7530
7649
|
|
|
7531
|
-
class PTMenuFancyComponent {
|
|
7532
|
-
constructor() {
|
|
7533
|
-
this.config = {
|
|
7534
|
-
icon: { code: 'pi pi-ellipsis-v', color: '#000', fontSize: '15px' },
|
|
7535
|
-
menuDirection: 'right',
|
|
7536
|
-
};
|
|
7537
|
-
this.cardMenuConfig = {
|
|
7538
|
-
noBorder: true,
|
|
7539
|
-
margin: '0',
|
|
7540
|
-
padding: '5px',
|
|
7541
|
-
};
|
|
7542
|
-
this.isOpen = false;
|
|
7543
|
-
}
|
|
7544
|
-
static { this.DEFAULT_TEXT_COLOR = '#000'; }
|
|
7545
|
-
static { this.DEFAULT_TEXT_FONT_SIZE = '15px'; }
|
|
7546
|
-
static { this.DEFAULT_ICON_COLOR = '#000'; }
|
|
7547
|
-
static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
|
|
7548
|
-
static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
|
|
7549
|
-
static { this.openMenuInstance = null; }
|
|
7550
|
-
toggleMenu() {
|
|
7551
|
-
if (PTMenuFancyComponent.openMenuInstance &&
|
|
7552
|
-
PTMenuFancyComponent.openMenuInstance !== this) {
|
|
7553
|
-
PTMenuFancyComponent.openMenuInstance.closeMenu();
|
|
7554
|
-
}
|
|
7555
|
-
this.isOpen = !this.isOpen;
|
|
7556
|
-
if (this.isOpen) {
|
|
7557
|
-
PTMenuFancyComponent.openMenuInstance = this;
|
|
7558
|
-
}
|
|
7559
|
-
else {
|
|
7560
|
-
PTMenuFancyComponent.openMenuInstance = null;
|
|
7561
|
-
}
|
|
7562
|
-
}
|
|
7563
|
-
closeMenu() {
|
|
7564
|
-
this.isOpen = false;
|
|
7565
|
-
if (PTMenuFancyComponent.openMenuInstance === this) {
|
|
7566
|
-
PTMenuFancyComponent.openMenuInstance = null;
|
|
7567
|
-
}
|
|
7568
|
-
}
|
|
7569
|
-
getMenuItemIconClass(item) {
|
|
7570
|
-
// Assuming that icons starting with "fa" are FontAwesome icons
|
|
7571
|
-
return typeof item.icon === 'string' ? item.icon : item.icon?.code || '';
|
|
7572
|
-
}
|
|
7573
|
-
getMenuItemIconStyles(item) {
|
|
7574
|
-
if (typeof item.icon !== 'string') {
|
|
7575
|
-
return {
|
|
7576
|
-
color: item.icon?.color || PTMenuFancyComponent.DEFAULT_ICON_COLOR,
|
|
7577
|
-
fontSize: item.icon?.fontSize || PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
|
|
7578
|
-
};
|
|
7579
|
-
}
|
|
7580
|
-
return {
|
|
7581
|
-
color: PTMenuFancyComponent.DEFAULT_ICON_COLOR,
|
|
7582
|
-
fontSize: PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
|
|
7583
|
-
};
|
|
7584
|
-
}
|
|
7585
|
-
getIconClass() {
|
|
7586
|
-
return this.config.icon?.code || PTMenuFancyComponent.DEFAULT_ICON_CODE;
|
|
7587
|
-
}
|
|
7588
|
-
getIconStyles() {
|
|
7589
|
-
return {
|
|
7590
|
-
color: this.config.color ||
|
|
7591
|
-
this.config.icon?.color ||
|
|
7592
|
-
PTMenuFancyComponent.DEFAULT_ICON_COLOR,
|
|
7593
|
-
fontSize: this.config.fontSize ||
|
|
7594
|
-
this.config.icon?.fontSize ||
|
|
7595
|
-
PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
|
|
7596
|
-
};
|
|
7597
|
-
}
|
|
7598
|
-
getTextStyles(item) {
|
|
7599
|
-
return {
|
|
7600
|
-
color: item.color || PTMenuFancyComponent.DEFAULT_TEXT_COLOR,
|
|
7601
|
-
fontSize: item.fontSize || PTMenuFancyComponent.DEFAULT_TEXT_FONT_SIZE,
|
|
7602
|
-
};
|
|
7603
|
-
}
|
|
7604
|
-
isItemDisabled(item) {
|
|
7605
|
-
return !!item?.disabled || !!item?.isHeader || !item?.action;
|
|
7606
|
-
}
|
|
7607
|
-
onItemClick(item) {
|
|
7608
|
-
if (this.isItemDisabled(item))
|
|
7609
|
-
return;
|
|
7610
|
-
item.action?.();
|
|
7611
|
-
this.closeMenu(); // optional UX: close after click
|
|
7612
|
-
}
|
|
7613
|
-
onDocumentClick(event) {
|
|
7614
|
-
const clickedInside = event.target.closest('.pt-menu-fancy');
|
|
7615
|
-
if (!clickedInside) {
|
|
7616
|
-
this.closeMenu();
|
|
7617
|
-
}
|
|
7618
|
-
}
|
|
7619
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7620
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMenuFancyComponent, isStandalone: false, selector: "pt-menu-fancy", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n [ngClass]=\"{\n open: isOpen,\n 'menu-left': config.menuDirection === 'left',\n 'menu-right': config.menuDirection === 'right'\n }\"\n class=\"pt-menu-fancy\"\n >\n <i\n class=\"menu-icon\"\n (click)=\"toggleMenu()\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n\n @if (isOpen) {\n <div class=\"menu-dropdown\">\n <pt-card [config]=\"cardMenuConfig\">\n @for (item of config.menuItems; track item) {\n <div\n class=\"menu-item\"\n [class.menu-item-disabled]=\"isItemDisabled(item)\"\n [class.menu-item-header]=\"item.isHeader\"\n (click)=\"onItemClick(item)\"\n >\n @if (getMenuItemIconClass(item)) {\n <i\n [ngClass]=\"getMenuItemIconClass(item)\"\n [ngStyle]=\"getMenuItemIconStyles(item)\"\n ></i>\n }\n <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n </div>\n }\n </pt-card>\n </div>\n }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
|
|
7621
|
-
}
|
|
7622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, decorators: [{
|
|
7623
|
-
type: Component,
|
|
7624
|
-
args: [{ selector: 'pt-menu-fancy', standalone: false, template: "<div\n [ngClass]=\"{\n open: isOpen,\n 'menu-left': config.menuDirection === 'left',\n 'menu-right': config.menuDirection === 'right'\n }\"\n class=\"pt-menu-fancy\"\n >\n <i\n class=\"menu-icon\"\n (click)=\"toggleMenu()\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n\n @if (isOpen) {\n <div class=\"menu-dropdown\">\n <pt-card [config]=\"cardMenuConfig\">\n @for (item of config.menuItems; track item) {\n <div\n class=\"menu-item\"\n [class.menu-item-disabled]=\"isItemDisabled(item)\"\n [class.menu-item-header]=\"item.isHeader\"\n (click)=\"onItemClick(item)\"\n >\n @if (getMenuItemIconClass(item)) {\n <i\n [ngClass]=\"getMenuItemIconClass(item)\"\n [ngStyle]=\"getMenuItemIconStyles(item)\"\n ></i>\n }\n <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n </div>\n }\n </pt-card>\n </div>\n }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"] }]
|
|
7625
|
-
}], propDecorators: { config: [{
|
|
7626
|
-
type: Input
|
|
7627
|
-
}], onDocumentClick: [{
|
|
7628
|
-
type: HostListener,
|
|
7629
|
-
args: ['document:click', ['$event']]
|
|
7630
|
-
}] } });
|
|
7631
|
-
|
|
7632
7650
|
class PTMenuFancyModule {
|
|
7633
7651
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7634
7652
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyModule, declarations: [PTMenuFancyComponent], imports: [CommonModule, PTCardModule], exports: [PTMenuFancyComponent] }); }
|
|
@@ -10349,7 +10367,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
10349
10367
|
}]
|
|
10350
10368
|
}] });
|
|
10351
10369
|
|
|
10352
|
-
// src/lib/components/pt-metric-panel/pt-metric-panel.component.ts
|
|
10353
10370
|
class PTMetricPanelComponent {
|
|
10354
10371
|
set loading(value) {
|
|
10355
10372
|
const previousLoading = this.dashboardLoading;
|
|
@@ -10471,6 +10488,98 @@ class PTMetricPanelComponent {
|
|
|
10471
10488
|
}
|
|
10472
10489
|
return {};
|
|
10473
10490
|
}
|
|
10491
|
+
hasMultipleValues(item) {
|
|
10492
|
+
return Array.isArray(item.values) && item.values.length > 0;
|
|
10493
|
+
}
|
|
10494
|
+
getVisibleValues(item) {
|
|
10495
|
+
return (item.values || []).filter((part) => part.visible !== false);
|
|
10496
|
+
}
|
|
10497
|
+
getTrendDirection(part) {
|
|
10498
|
+
if (part.trend?.direction) {
|
|
10499
|
+
return part.trend.direction;
|
|
10500
|
+
}
|
|
10501
|
+
if (typeof part.value !== 'number' ||
|
|
10502
|
+
typeof part.trend?.previousValue !== 'number') {
|
|
10503
|
+
return 'none';
|
|
10504
|
+
}
|
|
10505
|
+
if (part.value > part.trend.previousValue) {
|
|
10506
|
+
return 'up';
|
|
10507
|
+
}
|
|
10508
|
+
if (part.value < part.trend.previousValue) {
|
|
10509
|
+
return 'down';
|
|
10510
|
+
}
|
|
10511
|
+
return 'stable';
|
|
10512
|
+
}
|
|
10513
|
+
shouldShowTrendArrow(part) {
|
|
10514
|
+
return (part.trend?.showArrow !== false && this.getTrendDirection(part) !== 'none');
|
|
10515
|
+
}
|
|
10516
|
+
getTrendIcon(part) {
|
|
10517
|
+
const direction = this.getTrendDirection(part);
|
|
10518
|
+
switch (direction) {
|
|
10519
|
+
case 'up':
|
|
10520
|
+
return part.trend?.upIcon || 'pi pi-arrow-up';
|
|
10521
|
+
case 'down':
|
|
10522
|
+
return part.trend?.downIcon || 'pi pi-arrow-down';
|
|
10523
|
+
case 'stable':
|
|
10524
|
+
return part.trend?.stableIcon || 'pi pi-minus';
|
|
10525
|
+
default:
|
|
10526
|
+
return '';
|
|
10527
|
+
}
|
|
10528
|
+
}
|
|
10529
|
+
getTrendIconStyles(part) {
|
|
10530
|
+
const direction = this.getTrendDirection(part);
|
|
10531
|
+
switch (direction) {
|
|
10532
|
+
case 'up':
|
|
10533
|
+
return {
|
|
10534
|
+
color: part.trend?.upColor || '#15803D',
|
|
10535
|
+
};
|
|
10536
|
+
case 'down':
|
|
10537
|
+
return {
|
|
10538
|
+
color: part.trend?.downColor || '#DC2626',
|
|
10539
|
+
};
|
|
10540
|
+
case 'stable':
|
|
10541
|
+
return {
|
|
10542
|
+
color: part.trend?.stableColor || '#64748B',
|
|
10543
|
+
};
|
|
10544
|
+
default:
|
|
10545
|
+
return {};
|
|
10546
|
+
}
|
|
10547
|
+
}
|
|
10548
|
+
getValuePartStyles(part) {
|
|
10549
|
+
const direction = this.getTrendDirection(part);
|
|
10550
|
+
const titleStyle = this.isTitleStyle(part.value) ? part.value : undefined;
|
|
10551
|
+
let trendColor;
|
|
10552
|
+
let trendBackgroundColor;
|
|
10553
|
+
let trendBorderColor;
|
|
10554
|
+
switch (direction) {
|
|
10555
|
+
case 'up':
|
|
10556
|
+
trendColor = part.trend?.upColor || '#15803D';
|
|
10557
|
+
trendBackgroundColor = part.trend?.upBackgroundColor || '#DCFCE7';
|
|
10558
|
+
trendBorderColor = part.trend?.upBorderColor || '#86EFAC';
|
|
10559
|
+
break;
|
|
10560
|
+
case 'down':
|
|
10561
|
+
trendColor = part.trend?.downColor || '#DC2626';
|
|
10562
|
+
trendBackgroundColor = part.trend?.downBackgroundColor || '#FEE2E2';
|
|
10563
|
+
trendBorderColor = part.trend?.downBorderColor || '#FCA5A5';
|
|
10564
|
+
break;
|
|
10565
|
+
case 'stable':
|
|
10566
|
+
trendColor = part.trend?.stableColor || '#475569';
|
|
10567
|
+
trendBackgroundColor = part.trend?.stableBackgroundColor || '#F1F5F9';
|
|
10568
|
+
trendBorderColor = part.trend?.stableBorderColor || '#CBD5E1';
|
|
10569
|
+
break;
|
|
10570
|
+
default:
|
|
10571
|
+
break;
|
|
10572
|
+
}
|
|
10573
|
+
return {
|
|
10574
|
+
color: part.color || titleStyle?.color || trendColor || '#1F2937',
|
|
10575
|
+
backgroundColor: part.backgroundColor || trendBackgroundColor || '#F8F9FC',
|
|
10576
|
+
borderColor: part.borderColor || trendBorderColor || '#E8EBF1',
|
|
10577
|
+
fontSize: part.fontSize || titleStyle?.fontSize || '0.95rem',
|
|
10578
|
+
fontWeight: part.fontWeight || titleStyle?.fontWeight || '800',
|
|
10579
|
+
padding: part.padding || '7px 10px',
|
|
10580
|
+
borderRadius: part.borderRadius || '10px',
|
|
10581
|
+
};
|
|
10582
|
+
}
|
|
10474
10583
|
isTitleObject() {
|
|
10475
10584
|
return typeof this.panelData.title === 'object';
|
|
10476
10585
|
}
|
|
@@ -10528,11 +10637,11 @@ class PTMetricPanelComponent {
|
|
|
10528
10637
|
this.actionMenuItems = [...items, ...this.menuItems];
|
|
10529
10638
|
}
|
|
10530
10639
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10531
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMetricPanelComponent, isStandalone: false, selector: "pt-metric-panel", inputs: { panelData: "panelData", cardConfig: "cardConfig", showRefresh: "showRefresh", showMenu: "showMenu", menuItems: "menuItems", loading: "loading" }, outputs: { refresh: "refresh" }, viewQueries: [{ propertyName: "actionMenu", first: true, predicate: ["actionMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"cardConfig\">\n <div class=\"panel-header\">\n <div class=\"panel-title-container\" [ngStyle]=\"getTitleStyles()\">\n @if (getTitleIcon()) {\n <i\n class=\"panel-title-icon\"\n [ngClass]=\"getIconClass(getTitleIcon())\"\n [ngStyle]=\"getTitleIconStyles()\"\n ></i>\n }\n\n <span class=\"panel-title-text\">\n {{ getTitleText() }}\n </span>\n </div>\n\n @if (showRefresh || shouldShowMenu) {\n <div class=\"panel-actions\">\n @if (showRefresh) {\n <button\n type=\"button\"\n class=\"panel-action-button\"\n [class.panel-action-button-loading]=\"isLoading\"\n [disabled]=\"isLoading\"\n aria-label=\"Actualiser\"\n title=\"Actualiser\"\n (click)=\"onRefreshClick($event)\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"isLoading ? 'pi-spin pi-spinner' : 'pi-refresh'\"\n ></i>\n </button>\n }\n\n @if (shouldShowMenu) {\n <button\n type=\"button\"\n class=\"panel-action-button\"\n [disabled]=\"isLoading\"\n aria-label=\"Plus d\u2019actions\"\n title=\"Plus d\u2019actions\"\n (click)=\"toggleMenu($event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n <p-menu\n #actionMenu\n [model]=\"actionMenuItems\"\n [popup]=\"true\"\n appendTo=\"body\"\n ></p-menu>\n }\n </div>\n }\n </div>\n\n <div class=\"panel-separator\"></div>\n\n <div class=\"metric-content\">\n @if (isLoading) {\n <div\n class=\"metric-loading-overlay\"\n aria-live=\"polite\"\n aria-label=\"Chargement des donn\u00E9es\"\n >\n <i class=\"pi pi-spinner pi-spin metric-loading-spinner\"></i>\n <span>Chargement des donn\u00E9es...</span>\n </div>\n }\n\n <div\n class=\"metric-list\"\n [class.metric-list-loading]=\"isLoading\"\n [attr.aria-busy]=\"isLoading\"\n >\n @for (item of panelData.indicators; track $index) {\n <div\n class=\"metric-item\"\n [class.metric-item-clickable]=\"!!item.url && !isLoading\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n [tooltipDisabled]=\"!item.tooltip || isLoading\"\n (click)=\"!isLoading && handleClick(item.url)\"\n >\n <div class=\"metric-left\">\n @if (item.icon) {\n <span class=\"metric-icon-wrapper\">\n <i\n [ngClass]=\"getIconClass(item.icon.code)\"\n [ngStyle]=\"getIconStyles(item.icon)\"\n ></i>\n </span>\n }\n\n <span class=\"metric-title\">\n {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n </span>\n </div>\n\n <span\n class=\"metric-value\"\n [class.metric-value-highlighted]=\"item.highlighted && !isLoading\"\n [ngStyle]=\"getValueStyles(item.value)\"\n >\n {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n </span>\n </div>\n }\n </div>\n </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-title-container{display:flex;align-items:center;min-width:0;gap:12px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.panel-actions{display:flex;align-items:center;flex:0 0 auto;gap:4px}.panel-action-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;cursor:pointer;border:1px solid transparent;border-radius:10px;color:#667085;background:transparent;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.panel-action-button:hover:not(:disabled){border-color:#e3d8fb;color:#6734c9;background:#f7f3ff}.panel-action-button:active:not(:disabled){transform:scale(.95)}.panel-action-button:disabled{cursor:wait;opacity:.65}.panel-action-button-loading{color:#6734c9}.panel-action-button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}.panel-separator{width:100%;height:1px;margin:0 0 16px;background:#e7eaf0}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}.metric-value-highlighted{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;animation:metric-value-flash 1.8s ease-out}@keyframes metric-value-flash{0%{color:#166534;background:#bbf7d0;border-color:#4ade80;transform:scale(1.08)}to{color:#15803d;background:#dcfce7;border-color:#86efac;transform:scale(1)}}@media(max-width:576px){.panel-header,.panel-title-container{gap:8px}.panel-title-icon{min-width:34px;min-height:34px;padding:8px}.panel-action-button{width:32px;height:32px}.metric-item{min-height:60px;padding:10px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}}.metric-content{position:relative;min-height:120px}.metric-loading-overlay{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:120px;border-radius:14px;color:#6734c9;background:#ffffffd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-size:.9rem;font-weight:700}.metric-loading-spinner{font-size:1.5rem}.metric-list-loading{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.42;filter:blur(.4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i5$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
|
|
10640
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMetricPanelComponent, isStandalone: false, selector: "pt-metric-panel", inputs: { panelData: "panelData", cardConfig: "cardConfig", showRefresh: "showRefresh", showMenu: "showMenu", menuItems: "menuItems", loading: "loading" }, outputs: { refresh: "refresh" }, viewQueries: [{ propertyName: "actionMenu", first: true, predicate: ["actionMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"cardConfig\">\n <div class=\"panel-header\">\n <div class=\"panel-title-container\" [ngStyle]=\"getTitleStyles()\">\n @if (getTitleIcon()) {\n <i\n class=\"panel-title-icon\"\n [ngClass]=\"getIconClass(getTitleIcon())\"\n [ngStyle]=\"getTitleIconStyles()\"\n ></i>\n }\n\n <span class=\"panel-title-text\">\n {{ getTitleText() }}\n </span>\n </div>\n\n @if (showRefresh || shouldShowMenu) {\n <div class=\"panel-actions\">\n @if (showRefresh) {\n <button\n type=\"button\"\n class=\"panel-action-button\"\n [class.panel-action-button-loading]=\"isLoading\"\n [disabled]=\"isLoading\"\n aria-label=\"Actualiser\"\n title=\"Actualiser\"\n (click)=\"onRefreshClick($event)\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"isLoading ? 'pi-spin pi-spinner' : 'pi-refresh'\"\n ></i>\n </button>\n }\n\n @if (shouldShowMenu) {\n <button\n type=\"button\"\n class=\"panel-action-button\"\n [disabled]=\"isLoading\"\n aria-label=\"Plus d\u2019actions\"\n title=\"Plus d\u2019actions\"\n (click)=\"toggleMenu($event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n <p-menu\n #actionMenu\n [model]=\"actionMenuItems\"\n [popup]=\"true\"\n appendTo=\"body\"\n ></p-menu>\n }\n </div>\n }\n </div>\n\n <div class=\"panel-separator\"></div>\n\n <div class=\"metric-content\">\n @if (isLoading) {\n <div\n class=\"metric-loading-overlay\"\n aria-live=\"polite\"\n aria-label=\"Chargement des donn\u00E9es\"\n >\n <i class=\"pi pi-spinner pi-spin metric-loading-spinner\"></i>\n\n <span>Chargement des donn\u00E9es...</span>\n </div>\n }\n\n <div\n class=\"metric-list\"\n [class.metric-list-loading]=\"isLoading\"\n [attr.aria-busy]=\"isLoading\"\n >\n @for (item of panelData.indicators; track $index) {\n <div\n class=\"metric-item\"\n [class.metric-item-multiple]=\"hasMultipleValues(item)\"\n [class.metric-item-single-part]=\"\n hasMultipleValues(item) && getVisibleValues(item).length === 1\n \"\n [class.metric-item-clickable]=\"!!item.url && !isLoading\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n [tooltipDisabled]=\"!item.tooltip || isLoading\"\n (click)=\"!isLoading && handleClick(item.url)\"\n >\n <div class=\"metric-left\">\n @if (item.icon) {\n <span class=\"metric-icon-wrapper\">\n <i\n [ngClass]=\"getIconClass(item.icon.code)\"\n [ngStyle]=\"getIconStyles(item.icon)\"\n ></i>\n </span>\n }\n\n <span class=\"metric-title\">\n {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n </span>\n </div>\n\n @if (hasMultipleValues(item)) {\n <div\n class=\"metric-values\"\n role=\"group\"\n aria-label=\"Valeurs de l\u2019indicateur\"\n >\n @for (part of getVisibleValues(item); track part.key) {\n <span\n class=\"metric-value metric-value-part\"\n [class.metric-value-highlighted]=\"\n part.highlighted && !isLoading\n \"\n [class.metric-value-up]=\"getTrendDirection(part) === 'up'\"\n [class.metric-value-down]=\"getTrendDirection(part) === 'down'\"\n [class.metric-value-stable]=\"\n getTrendDirection(part) === 'stable'\n \"\n [ngStyle]=\"getValuePartStyles(part)\"\n [pTooltip]=\"part.tooltip || ''\"\n tooltipPosition=\"top\"\n [tooltipDisabled]=\"!part.tooltip || isLoading\"\n >\n @if (shouldShowTrendArrow(part)) {\n <i\n class=\"metric-trend-icon\"\n [ngClass]=\"getTrendIcon(part)\"\n [ngStyle]=\"getTrendIconStyles(part)\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (part.label) {\n <span class=\"metric-value-label\">\n {{ part.label }}\n </span>\n }\n\n <span class=\"metric-value-text\">\n {{\n isTitleStyle(part.value) ? part.value.text : part.value\n }}\n </span>\n\n @if (part.suffix) {\n <span class=\"metric-value-suffix\">\n {{ part.suffix }}\n </span>\n }\n </span>\n }\n </div>\n } @else {\n <span\n class=\"metric-value\"\n [class.metric-value-highlighted]=\"item.highlighted && !isLoading\"\n [ngStyle]=\"getValueStyles(item.value)\"\n >\n {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n </span>\n }\n </div>\n }\n </div>\n </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-title-container{display:flex;align-items:center;min-width:0;gap:12px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.panel-actions{display:flex;align-items:center;flex:0 0 auto;gap:4px}.panel-action-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;cursor:pointer;border:1px solid transparent;border-radius:10px;color:#667085;background:transparent;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.panel-action-button:hover:not(:disabled){border-color:#e3d8fb;color:#6734c9;background:#f7f3ff}.panel-action-button:active:not(:disabled){transform:scale(.95)}.panel-action-button:disabled{cursor:wait;opacity:.65}.panel-action-button-loading{color:#6734c9}.panel-action-button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}.panel-separator{width:100%;height:1px;margin:0 0 16px;background:#e7eaf0}.metric-content{position:relative;min-height:120px}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;min-height:68px;padding:12px 14px;box-sizing:border-box;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;min-width:0;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;box-sizing:border-box;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}.metric-item-multiple{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:12px}.metric-item-multiple .metric-left{width:100%}.metric-item-multiple .metric-title{white-space:normal}.metric-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;width:100%;min-width:0;gap:8px}.metric-value-part{display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;gap:5px;overflow:hidden;transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}.metric-value-label{flex:0 0 auto;font-size:.72em;font-weight:700;line-height:1;opacity:.72;text-transform:uppercase}.metric-value-text{overflow:hidden;min-width:0;font:inherit;line-height:inherit;text-overflow:ellipsis}.metric-value-suffix{flex:0 0 auto;font-size:.85em;font-weight:inherit;line-height:1;opacity:.85}.metric-trend-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:.78em;font-weight:800;line-height:1}.metric-item-single-part{grid-template-columns:minmax(0,1fr) auto;align-items:center}.metric-item-single-part .metric-left{width:auto}.metric-item-single-part .metric-values{display:flex;align-items:center;justify-content:flex-end;width:auto}.metric-item-single-part .metric-value-part{width:auto;min-width:120px}.metric-value-up{color:#15803d;background:#dcfce7;border-color:#86efac}.metric-value-down{color:#dc2626;background:#fee2e2;border-color:#fca5a5}.metric-value-stable{color:#475569;background:#f1f5f9;border-color:#cbd5e1}.metric-value-highlighted{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;animation:metric-value-flash 1.8s ease-out}.metric-value-part.metric-value-highlighted{animation:metric-part-flash 1.8s ease-out}.metric-value-part.metric-value-up.metric-value-highlighted{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;box-shadow:0 0 0 3px #22c55e24}.metric-value-part.metric-value-down.metric-value-highlighted{color:#dc2626!important;background:#fee2e2!important;border-color:#fca5a5!important;box-shadow:0 0 0 3px #ef444424}.metric-value-part.metric-value-stable.metric-value-highlighted{color:#475569!important;background:#f1f5f9!important;border-color:#cbd5e1!important;box-shadow:0 0 0 3px #64748b1f}.metric-value-part.metric-value-highlighted:not(.metric-value-up):not(.metric-value-down):not(.metric-value-stable){color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;box-shadow:0 0 0 3px #22c55e24}@keyframes metric-value-flash{0%{color:#166534;background:#bbf7d0;border-color:#4ade80;transform:scale(1.08)}to{color:#15803d;background:#dcfce7;border-color:#86efac;transform:scale(1)}}@keyframes metric-part-flash{0%{transform:scale(1.08)}45%{transform:scale(1.04)}to{transform:scale(1)}}.metric-loading-overlay{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:120px;border-radius:14px;color:#6734c9;background:#ffffffd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-size:.9rem;font-weight:700}.metric-loading-spinner{font-size:1.5rem}.metric-list-loading{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.42;filter:blur(.4px)}@media(max-width:576px){.panel-header,.panel-title-container{gap:8px}.panel-title-icon{min-width:34px;min-height:34px;padding:8px}.panel-action-button{width:32px;height:32px}.metric-item{min-height:60px;padding:10px;gap:10px}.metric-left{gap:8px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}.metric-item-multiple,.metric-item-single-part{grid-template-columns:minmax(0,1fr);align-items:stretch}.metric-values,.metric-item-single-part .metric-values{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:none;gap:6px}.metric-value-part,.metric-item-single-part .metric-value-part{justify-content:flex-start;width:100%;min-width:0;padding:7px 9px!important;font-size:.82rem!important}.metric-value-label{display:inline}.metric-trend-icon{font-size:.75em}}@media(max-width:400px){.metric-item:not(.metric-item-multiple){align-items:flex-start;flex-direction:column}.metric-item:not(.metric-item-multiple) .metric-left{width:100%}.metric-item:not(.metric-item-multiple)>.metric-value{align-self:flex-end}}@media(prefers-reduced-motion:reduce){.panel-action-button,.metric-item,.metric-value-part{transition:none}.metric-value-highlighted,.metric-value-part.metric-value-highlighted{animation:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i5$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
|
|
10532
10641
|
}
|
|
10533
10642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelComponent, decorators: [{
|
|
10534
10643
|
type: Component,
|
|
10535
|
-
args: [{ selector: 'pt-metric-panel', standalone: false, template: "<pt-card [config]=\"cardConfig\">\n <div class=\"panel-header\">\n <div class=\"panel-title-container\" [ngStyle]=\"getTitleStyles()\">\n @if (getTitleIcon()) {\n <i\n class=\"panel-title-icon\"\n [ngClass]=\"getIconClass(getTitleIcon())\"\n [ngStyle]=\"getTitleIconStyles()\"\n ></i>\n }\n\n <span class=\"panel-title-text\">\n {{ getTitleText() }}\n </span>\n </div>\n\n @if (showRefresh || shouldShowMenu) {\n <div class=\"panel-actions\">\n @if (showRefresh) {\n <button\n type=\"button\"\n class=\"panel-action-button\"\n [class.panel-action-button-loading]=\"isLoading\"\n [disabled]=\"isLoading\"\n aria-label=\"Actualiser\"\n title=\"Actualiser\"\n (click)=\"onRefreshClick($event)\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"isLoading ? 'pi-spin pi-spinner' : 'pi-refresh'\"\n ></i>\n </button>\n }\n\n @if (shouldShowMenu) {\n <button\n type=\"button\"\n class=\"panel-action-button\"\n [disabled]=\"isLoading\"\n aria-label=\"Plus d\u2019actions\"\n title=\"Plus d\u2019actions\"\n (click)=\"toggleMenu($event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n <p-menu\n #actionMenu\n [model]=\"actionMenuItems\"\n [popup]=\"true\"\n appendTo=\"body\"\n ></p-menu>\n }\n </div>\n }\n </div>\n\n <div class=\"panel-separator\"></div>\n\n <div class=\"metric-content\">\n @if (isLoading) {\n <div\n class=\"metric-loading-overlay\"\n aria-live=\"polite\"\n aria-label=\"Chargement des donn\u00E9es\"\n >\n <i class=\"pi pi-spinner pi-spin metric-loading-spinner\"></i>\n <span>Chargement des donn\u00E9es...</span>\n </div>\n }\n\n <div\n class=\"metric-list\"\n [class.metric-list-loading]=\"isLoading\"\n [attr.aria-busy]=\"isLoading\"\n >\n @for (item of panelData.indicators; track $index) {\n <div\n class=\"metric-item\"\n [class.metric-item-clickable]=\"!!item.url && !isLoading\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n [tooltipDisabled]=\"!item.tooltip || isLoading\"\n (click)=\"!isLoading && handleClick(item.url)\"\n >\n <div class=\"metric-left\">\n @if (item.icon) {\n <span class=\"metric-icon-wrapper\">\n <i\n [ngClass]=\"getIconClass(item.icon.code)\"\n [ngStyle]=\"getIconStyles(item.icon)\"\n ></i>\n </span>\n }\n\n <span class=\"metric-title\">\n {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n </span>\n </div>\n\n <span\n class=\"metric-value\"\n [class.metric-value-highlighted]=\"item.highlighted && !isLoading\"\n [ngStyle]=\"getValueStyles(item.value)\"\n >\n {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n </span>\n </div>\n }\n </div>\n </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-title-container{display:flex;align-items:center;min-width:0;gap:12px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.panel-actions{display:flex;align-items:center;flex:0 0 auto;gap:4px}.panel-action-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;cursor:pointer;border:1px solid transparent;border-radius:10px;color:#667085;background:transparent;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.panel-action-button:hover:not(:disabled){border-color:#e3d8fb;color:#6734c9;background:#f7f3ff}.panel-action-button:active:not(:disabled){transform:scale(.95)}.panel-action-button:disabled{cursor:wait;opacity:.65}.panel-action-button-loading{color:#6734c9}.panel-action-button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}.panel-separator{width:100%;height:1px;margin:0 0 16px;background:#e7eaf0}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}.metric-value-highlighted{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;animation:metric-value-flash 1.8s ease-out}@keyframes metric-value-flash{0%{color:#166534;background:#bbf7d0;border-color:#4ade80;transform:scale(1.08)}to{color:#15803d;background:#dcfce7;border-color:#86efac;transform:scale(1)}}@media(max-width:576px){.panel-header,.panel-title-container{gap:8px}.panel-title-icon{min-width:34px;min-height:34px;padding:8px}.panel-action-button{width:32px;height:32px}.metric-item{min-height:60px;padding:10px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}}.metric-content{position:relative;min-height:120px}.metric-loading-overlay{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:120px;border-radius:14px;color:#6734c9;background:#ffffffd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-size:.9rem;font-weight:700}.metric-loading-spinner{font-size:1.5rem}.metric-list-loading{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.42;filter:blur(.4px)}\n"] }]
|
|
10644
|
+
args: [{ selector: 'pt-metric-panel', standalone: false, template: "<pt-card [config]=\"cardConfig\">\n <div class=\"panel-header\">\n <div class=\"panel-title-container\" [ngStyle]=\"getTitleStyles()\">\n @if (getTitleIcon()) {\n <i\n class=\"panel-title-icon\"\n [ngClass]=\"getIconClass(getTitleIcon())\"\n [ngStyle]=\"getTitleIconStyles()\"\n ></i>\n }\n\n <span class=\"panel-title-text\">\n {{ getTitleText() }}\n </span>\n </div>\n\n @if (showRefresh || shouldShowMenu) {\n <div class=\"panel-actions\">\n @if (showRefresh) {\n <button\n type=\"button\"\n class=\"panel-action-button\"\n [class.panel-action-button-loading]=\"isLoading\"\n [disabled]=\"isLoading\"\n aria-label=\"Actualiser\"\n title=\"Actualiser\"\n (click)=\"onRefreshClick($event)\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"isLoading ? 'pi-spin pi-spinner' : 'pi-refresh'\"\n ></i>\n </button>\n }\n\n @if (shouldShowMenu) {\n <button\n type=\"button\"\n class=\"panel-action-button\"\n [disabled]=\"isLoading\"\n aria-label=\"Plus d\u2019actions\"\n title=\"Plus d\u2019actions\"\n (click)=\"toggleMenu($event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n <p-menu\n #actionMenu\n [model]=\"actionMenuItems\"\n [popup]=\"true\"\n appendTo=\"body\"\n ></p-menu>\n }\n </div>\n }\n </div>\n\n <div class=\"panel-separator\"></div>\n\n <div class=\"metric-content\">\n @if (isLoading) {\n <div\n class=\"metric-loading-overlay\"\n aria-live=\"polite\"\n aria-label=\"Chargement des donn\u00E9es\"\n >\n <i class=\"pi pi-spinner pi-spin metric-loading-spinner\"></i>\n\n <span>Chargement des donn\u00E9es...</span>\n </div>\n }\n\n <div\n class=\"metric-list\"\n [class.metric-list-loading]=\"isLoading\"\n [attr.aria-busy]=\"isLoading\"\n >\n @for (item of panelData.indicators; track $index) {\n <div\n class=\"metric-item\"\n [class.metric-item-multiple]=\"hasMultipleValues(item)\"\n [class.metric-item-single-part]=\"\n hasMultipleValues(item) && getVisibleValues(item).length === 1\n \"\n [class.metric-item-clickable]=\"!!item.url && !isLoading\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n [tooltipDisabled]=\"!item.tooltip || isLoading\"\n (click)=\"!isLoading && handleClick(item.url)\"\n >\n <div class=\"metric-left\">\n @if (item.icon) {\n <span class=\"metric-icon-wrapper\">\n <i\n [ngClass]=\"getIconClass(item.icon.code)\"\n [ngStyle]=\"getIconStyles(item.icon)\"\n ></i>\n </span>\n }\n\n <span class=\"metric-title\">\n {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n </span>\n </div>\n\n @if (hasMultipleValues(item)) {\n <div\n class=\"metric-values\"\n role=\"group\"\n aria-label=\"Valeurs de l\u2019indicateur\"\n >\n @for (part of getVisibleValues(item); track part.key) {\n <span\n class=\"metric-value metric-value-part\"\n [class.metric-value-highlighted]=\"\n part.highlighted && !isLoading\n \"\n [class.metric-value-up]=\"getTrendDirection(part) === 'up'\"\n [class.metric-value-down]=\"getTrendDirection(part) === 'down'\"\n [class.metric-value-stable]=\"\n getTrendDirection(part) === 'stable'\n \"\n [ngStyle]=\"getValuePartStyles(part)\"\n [pTooltip]=\"part.tooltip || ''\"\n tooltipPosition=\"top\"\n [tooltipDisabled]=\"!part.tooltip || isLoading\"\n >\n @if (shouldShowTrendArrow(part)) {\n <i\n class=\"metric-trend-icon\"\n [ngClass]=\"getTrendIcon(part)\"\n [ngStyle]=\"getTrendIconStyles(part)\"\n aria-hidden=\"true\"\n ></i>\n }\n\n @if (part.label) {\n <span class=\"metric-value-label\">\n {{ part.label }}\n </span>\n }\n\n <span class=\"metric-value-text\">\n {{\n isTitleStyle(part.value) ? part.value.text : part.value\n }}\n </span>\n\n @if (part.suffix) {\n <span class=\"metric-value-suffix\">\n {{ part.suffix }}\n </span>\n }\n </span>\n }\n </div>\n } @else {\n <span\n class=\"metric-value\"\n [class.metric-value-highlighted]=\"item.highlighted && !isLoading\"\n [ngStyle]=\"getValueStyles(item.value)\"\n >\n {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n </span>\n }\n </div>\n }\n </div>\n </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-title-container{display:flex;align-items:center;min-width:0;gap:12px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.panel-actions{display:flex;align-items:center;flex:0 0 auto;gap:4px}.panel-action-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;cursor:pointer;border:1px solid transparent;border-radius:10px;color:#667085;background:transparent;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.panel-action-button:hover:not(:disabled){border-color:#e3d8fb;color:#6734c9;background:#f7f3ff}.panel-action-button:active:not(:disabled){transform:scale(.95)}.panel-action-button:disabled{cursor:wait;opacity:.65}.panel-action-button-loading{color:#6734c9}.panel-action-button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}.panel-separator{width:100%;height:1px;margin:0 0 16px;background:#e7eaf0}.metric-content{position:relative;min-height:120px}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;min-height:68px;padding:12px 14px;box-sizing:border-box;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;min-width:0;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;box-sizing:border-box;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}.metric-item-multiple{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:12px}.metric-item-multiple .metric-left{width:100%}.metric-item-multiple .metric-title{white-space:normal}.metric-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;width:100%;min-width:0;gap:8px}.metric-value-part{display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;gap:5px;overflow:hidden;transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}.metric-value-label{flex:0 0 auto;font-size:.72em;font-weight:700;line-height:1;opacity:.72;text-transform:uppercase}.metric-value-text{overflow:hidden;min-width:0;font:inherit;line-height:inherit;text-overflow:ellipsis}.metric-value-suffix{flex:0 0 auto;font-size:.85em;font-weight:inherit;line-height:1;opacity:.85}.metric-trend-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:.78em;font-weight:800;line-height:1}.metric-item-single-part{grid-template-columns:minmax(0,1fr) auto;align-items:center}.metric-item-single-part .metric-left{width:auto}.metric-item-single-part .metric-values{display:flex;align-items:center;justify-content:flex-end;width:auto}.metric-item-single-part .metric-value-part{width:auto;min-width:120px}.metric-value-up{color:#15803d;background:#dcfce7;border-color:#86efac}.metric-value-down{color:#dc2626;background:#fee2e2;border-color:#fca5a5}.metric-value-stable{color:#475569;background:#f1f5f9;border-color:#cbd5e1}.metric-value-highlighted{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;animation:metric-value-flash 1.8s ease-out}.metric-value-part.metric-value-highlighted{animation:metric-part-flash 1.8s ease-out}.metric-value-part.metric-value-up.metric-value-highlighted{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;box-shadow:0 0 0 3px #22c55e24}.metric-value-part.metric-value-down.metric-value-highlighted{color:#dc2626!important;background:#fee2e2!important;border-color:#fca5a5!important;box-shadow:0 0 0 3px #ef444424}.metric-value-part.metric-value-stable.metric-value-highlighted{color:#475569!important;background:#f1f5f9!important;border-color:#cbd5e1!important;box-shadow:0 0 0 3px #64748b1f}.metric-value-part.metric-value-highlighted:not(.metric-value-up):not(.metric-value-down):not(.metric-value-stable){color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;box-shadow:0 0 0 3px #22c55e24}@keyframes metric-value-flash{0%{color:#166534;background:#bbf7d0;border-color:#4ade80;transform:scale(1.08)}to{color:#15803d;background:#dcfce7;border-color:#86efac;transform:scale(1)}}@keyframes metric-part-flash{0%{transform:scale(1.08)}45%{transform:scale(1.04)}to{transform:scale(1)}}.metric-loading-overlay{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:120px;border-radius:14px;color:#6734c9;background:#ffffffd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-size:.9rem;font-weight:700}.metric-loading-spinner{font-size:1.5rem}.metric-list-loading{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.42;filter:blur(.4px)}@media(max-width:576px){.panel-header,.panel-title-container{gap:8px}.panel-title-icon{min-width:34px;min-height:34px;padding:8px}.panel-action-button{width:32px;height:32px}.metric-item{min-height:60px;padding:10px;gap:10px}.metric-left{gap:8px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}.metric-item-multiple,.metric-item-single-part{grid-template-columns:minmax(0,1fr);align-items:stretch}.metric-values,.metric-item-single-part .metric-values{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:none;gap:6px}.metric-value-part,.metric-item-single-part .metric-value-part{justify-content:flex-start;width:100%;min-width:0;padding:7px 9px!important;font-size:.82rem!important}.metric-value-label{display:inline}.metric-trend-icon{font-size:.75em}}@media(max-width:400px){.metric-item:not(.metric-item-multiple){align-items:flex-start;flex-direction:column}.metric-item:not(.metric-item-multiple) .metric-left{width:100%}.metric-item:not(.metric-item-multiple)>.metric-value{align-self:flex-end}}@media(prefers-reduced-motion:reduce){.panel-action-button,.metric-item,.metric-value-part{transition:none}.metric-value-highlighted,.metric-value-part.metric-value-highlighted{animation:none}}\n"] }]
|
|
10536
10645
|
}], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { panelData: [{
|
|
10537
10646
|
type: Input
|
|
10538
10647
|
}], cardConfig: [{
|