ng-prime-tools 1.0.79 → 1.0.81
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.
|
@@ -4210,14 +4210,6 @@ class PTNavbarMenuComponent {
|
|
|
4210
4210
|
constructor() {
|
|
4211
4211
|
this.navBarMenuConfig = {};
|
|
4212
4212
|
this.toggleSidebar = new EventEmitter();
|
|
4213
|
-
/**
|
|
4214
|
-
* Emitted when the user clicks the Profile item from the user menu.
|
|
4215
|
-
*/
|
|
4216
|
-
this.userClick = new EventEmitter();
|
|
4217
|
-
/**
|
|
4218
|
-
* Emitted when the user clicks the Logout item from the user menu.
|
|
4219
|
-
*/
|
|
4220
|
-
this.logoutClick = new EventEmitter();
|
|
4221
4213
|
this.destroy$ = new Subject();
|
|
4222
4214
|
this.dateTimeText = '';
|
|
4223
4215
|
this.isUserMenuOpen = false;
|
|
@@ -4448,13 +4440,33 @@ class PTNavbarMenuComponent {
|
|
|
4448
4440
|
fontWeight: style?.fontWeight ?? '700',
|
|
4449
4441
|
};
|
|
4450
4442
|
}
|
|
4451
|
-
|
|
4452
|
-
this.
|
|
4453
|
-
|
|
4443
|
+
getUserMenuItems() {
|
|
4444
|
+
return (this.navBarMenuConfig.user?.menuItems ?? []).filter((item) => {
|
|
4445
|
+
return item.visible !== false;
|
|
4446
|
+
});
|
|
4447
|
+
}
|
|
4448
|
+
hasUserMenuItems() {
|
|
4449
|
+
return this.getUserMenuItems().length > 0;
|
|
4454
4450
|
}
|
|
4455
|
-
|
|
4451
|
+
getUserMenuItemIcon(item) {
|
|
4452
|
+
return item.icon || '';
|
|
4453
|
+
}
|
|
4454
|
+
getUserMenuItemClasses(item) {
|
|
4455
|
+
const classes = ['navbar-user-menu-item'];
|
|
4456
|
+
if (item.severity === 'danger') {
|
|
4457
|
+
classes.push('danger');
|
|
4458
|
+
}
|
|
4459
|
+
if (item.disabled) {
|
|
4460
|
+
classes.push('disabled');
|
|
4461
|
+
}
|
|
4462
|
+
return classes.join(' ');
|
|
4463
|
+
}
|
|
4464
|
+
onUserMenuItemClick(item) {
|
|
4465
|
+
if (item.disabled) {
|
|
4466
|
+
return;
|
|
4467
|
+
}
|
|
4456
4468
|
this.isUserMenuOpen = false;
|
|
4457
|
-
|
|
4469
|
+
item.action?.();
|
|
4458
4470
|
}
|
|
4459
4471
|
// =========================
|
|
4460
4472
|
// Formatting utils
|
|
@@ -4566,7 +4578,7 @@ class PTNavbarMenuComponent {
|
|
|
4566
4578
|
const backgroundPosition = this.navBarMenuConfig.pattern?.position || 'center';
|
|
4567
4579
|
const backgroundImage = imageUrl
|
|
4568
4580
|
? `linear-gradient(rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100}),
|
|
4569
|
-
|
|
4581
|
+
rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100})), url(${imageUrl})`
|
|
4570
4582
|
: '';
|
|
4571
4583
|
return {
|
|
4572
4584
|
backgroundColor: this.navBarMenuConfig.pattern ? 'transparent' : '#fff',
|
|
@@ -4574,6 +4586,10 @@ class PTNavbarMenuComponent {
|
|
|
4574
4586
|
backgroundSize: `${patternWidth} ${patternHeight}`,
|
|
4575
4587
|
backgroundPosition,
|
|
4576
4588
|
backgroundRepeat,
|
|
4589
|
+
height: this.navBarMenuConfig.height || 'auto',
|
|
4590
|
+
minHeight: this.navBarMenuConfig.minHeight || '56px',
|
|
4591
|
+
paddingTop: this.navBarMenuConfig.paddingTop || '0',
|
|
4592
|
+
paddingBottom: this.navBarMenuConfig.paddingBottom || '0',
|
|
4577
4593
|
};
|
|
4578
4594
|
}
|
|
4579
4595
|
toggleMenu() {
|
|
@@ -4598,21 +4614,17 @@ class PTNavbarMenuComponent {
|
|
|
4598
4614
|
};
|
|
4599
4615
|
}
|
|
4600
4616
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4601
|
-
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" }, outputs: { toggleSidebar: "toggleSidebar", userClick: "userClick", logoutClick: "logoutClick" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <!-- LEFT -->\n <div class=\"navbar-left\">\n <a\n [routerLink]=\"\n isImageStyle(navBarMenuConfig.logo)\n ? navBarMenuConfig.logo.routerLink\n : '/'\n \"\n class=\"logo-link\"\n >\n <img\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n class=\"navbar-logo\"\n />\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n <!-- MIDDLE DateTime -->\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 <!-- RIGHT -->\n <div class=\"navbar-actions\">\n <div class=\"navbar-right\">\n @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n }\n </div>\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>{{ getUserInitials() }}</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>{{ getUserInitials() }}</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 <div class=\"navbar-user-menu-separator\"></div>\n\n <button\n type=\"button\"\n class=\"navbar-user-menu-item\"\n (click)=\"onUserProfileClick()\"\n >\n <i class=\"fa fa-user\"></i>\n <span>Profil</span>\n </button>\n\n <button\n type=\"button\"\n class=\"navbar-user-menu-item danger\"\n (click)=\"onUserLogoutClick()\"\n >\n <i class=\"fa fa-sign-out-alt\"></i>\n <span>D\u00E9connexion</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.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;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.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;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.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;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.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}.pt-nav-bar-menu .navbar-user-menu-name{color:#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:#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:#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;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{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"] }] }); }
|
|
4617
|
+
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" }, outputs: { toggleSidebar: "toggleSidebar" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <!-- LEFT -->\n <div class=\"navbar-left\">\n <a\n [routerLink]=\"\n isImageStyle(navBarMenuConfig.logo)\n ? navBarMenuConfig.logo.routerLink\n : '/'\n \"\n class=\"logo-link\"\n >\n <img\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n class=\"navbar-logo\"\n />\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n <!-- MIDDLE DateTime -->\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 <!-- RIGHT -->\n <div class=\"navbar-actions\">\n <div class=\"navbar-right\">\n @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n }\n </div>\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>{{ getUserInitials() }}</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>{{ getUserInitials() }}</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>{{ item.text }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.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;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.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;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.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;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.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}.pt-nav-bar-menu .navbar-user-menu-name{color:#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:#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:#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;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{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"] }] }); }
|
|
4602
4618
|
}
|
|
4603
4619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
|
|
4604
4620
|
type: Component,
|
|
4605
|
-
args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <!-- LEFT -->\n <div class=\"navbar-left\">\n <a\n [routerLink]=\"\n isImageStyle(navBarMenuConfig.logo)\n ? navBarMenuConfig.logo.routerLink\n : '/'\n \"\n class=\"logo-link\"\n >\n <img\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n class=\"navbar-logo\"\n />\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n <!-- MIDDLE DateTime -->\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 <!-- RIGHT -->\n <div class=\"navbar-actions\">\n <div class=\"navbar-right\">\n @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n }\n </div>\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>{{ getUserInitials() }}</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>{{ getUserInitials() }}</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 <div class=\"navbar-user-menu-separator\"></div>\n\n
|
|
4621
|
+
args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <!-- LEFT -->\n <div class=\"navbar-left\">\n <a\n [routerLink]=\"\n isImageStyle(navBarMenuConfig.logo)\n ? navBarMenuConfig.logo.routerLink\n : '/'\n \"\n class=\"logo-link\"\n >\n <img\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n class=\"navbar-logo\"\n />\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n <!-- MIDDLE DateTime -->\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 <!-- RIGHT -->\n <div class=\"navbar-actions\">\n <div class=\"navbar-right\">\n @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n }\n </div>\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>{{ getUserInitials() }}</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>{{ getUserInitials() }}</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>{{ item.text }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.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;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.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;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.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;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.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}.pt-nav-bar-menu .navbar-user-menu-name{color:#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:#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:#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;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"] }]
|
|
4606
4622
|
}], propDecorators: { navBarMenuConfig: [{
|
|
4607
4623
|
type: Input
|
|
4608
4624
|
}], serverDateTime: [{
|
|
4609
4625
|
type: Input
|
|
4610
4626
|
}], toggleSidebar: [{
|
|
4611
4627
|
type: Output
|
|
4612
|
-
}], userClick: [{
|
|
4613
|
-
type: Output
|
|
4614
|
-
}], logoutClick: [{
|
|
4615
|
-
type: Output
|
|
4616
4628
|
}], closeUserMenu: [{
|
|
4617
4629
|
type: HostListener,
|
|
4618
4630
|
args: ['document:click']
|
|
@@ -5092,7 +5104,6 @@ class PTPageSkeletonComponent {
|
|
|
5092
5104
|
this.isSidebarVisible = !this.isSidebarVisible;
|
|
5093
5105
|
this.toggleSidebar.emit();
|
|
5094
5106
|
}
|
|
5095
|
-
// Initialize backgroundCardConfig with default values
|
|
5096
5107
|
initializeBackgroundCardConfig() {
|
|
5097
5108
|
this.pageSkeletonConfig.backgroundCardConfig = {
|
|
5098
5109
|
identifier: 'pt-page-skeleton/background',
|
|
@@ -5103,7 +5114,6 @@ class PTPageSkeletonComponent {
|
|
|
5103
5114
|
...this.pageSkeletonConfig.backgroundCardConfig,
|
|
5104
5115
|
};
|
|
5105
5116
|
}
|
|
5106
|
-
// Initialize contentCardConfig with default values (if necessary)
|
|
5107
5117
|
initializeContentCardConfig() {
|
|
5108
5118
|
this.pageSkeletonConfig.contentCardConfig = {
|
|
5109
5119
|
identifier: 'pt-page-skeleton/content',
|
|
@@ -5116,11 +5126,11 @@ class PTPageSkeletonComponent {
|
|
|
5116
5126
|
};
|
|
5117
5127
|
}
|
|
5118
5128
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5119
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n [serverDateTime]=\"serverDateTime\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar
|
|
5129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n [serverDateTime]=\"serverDateTime\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar -->\n @if (isSidebarVisible) {\n <pt-side-bar-menu\n [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n class=\"sidebar\"\n ></pt-side-bar-menu>\n }\n\n <!-- Main View Area -->\n <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n <!-- Breadcrumb -->\n @if (pageSkeletonConfig.breadCrumbConfig) {\n <pt-bread-crumb\n [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n class=\"bread-crumb\"\n ></pt-bread-crumb>\n }\n\n <router-outlet></router-outlet>\n </pt-card>\n </div>\n </div>\n\n <!-- Footer -->\n @if (pageSkeletonConfig.footerConfig) {\n <pt-footer\n [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n class=\"pt-footer\"\n ></pt-footer>\n }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
|
|
5120
5130
|
}
|
|
5121
5131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
|
|
5122
5132
|
type: Component,
|
|
5123
|
-
args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n [serverDateTime]=\"serverDateTime\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar
|
|
5133
|
+
args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n [serverDateTime]=\"serverDateTime\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar -->\n @if (isSidebarVisible) {\n <pt-side-bar-menu\n [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n class=\"sidebar\"\n ></pt-side-bar-menu>\n }\n\n <!-- Main View Area -->\n <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n <!-- Breadcrumb -->\n @if (pageSkeletonConfig.breadCrumbConfig) {\n <pt-bread-crumb\n [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n class=\"bread-crumb\"\n ></pt-bread-crumb>\n }\n\n <router-outlet></router-outlet>\n </pt-card>\n </div>\n </div>\n\n <!-- Footer -->\n @if (pageSkeletonConfig.footerConfig) {\n <pt-footer\n [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n class=\"pt-footer\"\n ></pt-footer>\n }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"] }]
|
|
5124
5134
|
}], propDecorators: { pageSkeletonConfig: [{
|
|
5125
5135
|
type: Input
|
|
5126
5136
|
}], serverDateTime: [{
|