ng-prime-tools 1.0.78 → 1.0.80
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.
|
@@ -4212,18 +4212,13 @@ class PTNavbarMenuComponent {
|
|
|
4212
4212
|
this.toggleSidebar = new EventEmitter();
|
|
4213
4213
|
this.destroy$ = new Subject();
|
|
4214
4214
|
this.dateTimeText = '';
|
|
4215
|
-
|
|
4215
|
+
this.isUserMenuOpen = false;
|
|
4216
4216
|
this.dateFormat = 'dd/MM/YYYY';
|
|
4217
4217
|
this.timeFormat = 'HH:mm:ss';
|
|
4218
|
-
/** FIXED mode base */
|
|
4219
4218
|
this.fixedStart = new Date();
|
|
4220
4219
|
this.fixedSetAt = new Date();
|
|
4221
|
-
/** used only in FIXED mode */
|
|
4222
4220
|
this.manualDateTimeLocal = this.toDateTimeLocalValue(new Date());
|
|
4223
4221
|
}
|
|
4224
|
-
// =========================
|
|
4225
|
-
// Defaults (existing)
|
|
4226
|
-
// =========================
|
|
4227
4222
|
static { this.DEFAULT_LOGO_URL = ''; }
|
|
4228
4223
|
static { this.DEFAULT_LOGO_ALT_TEXT = 'Logo'; }
|
|
4229
4224
|
static { this.DEFAULT_LOGO_WIDTH = '40px'; }
|
|
@@ -4235,9 +4230,6 @@ class PTNavbarMenuComponent {
|
|
|
4235
4230
|
static { this.DEFAULT_ICON_COLOR = '#333'; }
|
|
4236
4231
|
static { this.DEFAULT_TOGGLE_BUTTON_ICON = 'pi pi-bars'; }
|
|
4237
4232
|
static { this.DEFAULT_TOGGLE_BUTTON_COLOR = '#333'; }
|
|
4238
|
-
// =========================
|
|
4239
|
-
// Lifecycle
|
|
4240
|
-
// =========================
|
|
4241
4233
|
ngOnInit() {
|
|
4242
4234
|
this.applyConfigFormatsAndFixedBase();
|
|
4243
4235
|
interval(1000)
|
|
@@ -4246,11 +4238,9 @@ class PTNavbarMenuComponent {
|
|
|
4246
4238
|
this.refreshDateTime();
|
|
4247
4239
|
}
|
|
4248
4240
|
ngOnChanges(changes) {
|
|
4249
|
-
// If config changes: update formats and fixed base if needed.
|
|
4250
4241
|
if (changes['navBarMenuConfig']) {
|
|
4251
4242
|
this.applyConfigFormatsAndFixedBase();
|
|
4252
4243
|
}
|
|
4253
|
-
// If serverDateTime changes: just refresh display
|
|
4254
4244
|
if (changes['serverDateTime'] || changes['navBarMenuConfig']) {
|
|
4255
4245
|
this.refreshDateTime();
|
|
4256
4246
|
}
|
|
@@ -4259,17 +4249,21 @@ class PTNavbarMenuComponent {
|
|
|
4259
4249
|
this.destroy$.next();
|
|
4260
4250
|
this.destroy$.complete();
|
|
4261
4251
|
}
|
|
4252
|
+
closeUserMenu() {
|
|
4253
|
+
this.isUserMenuOpen = false;
|
|
4254
|
+
}
|
|
4262
4255
|
applyConfigFormatsAndFixedBase() {
|
|
4263
|
-
if (!this.hasDateTime())
|
|
4256
|
+
if (!this.hasDateTime()) {
|
|
4264
4257
|
return;
|
|
4258
|
+
}
|
|
4265
4259
|
const dtCfg = this.navBarMenuConfig.dateTime;
|
|
4266
4260
|
this.dateFormat = (dtCfg?.dateFormat ?? 'dd/MM/YYYY');
|
|
4267
4261
|
this.timeFormat = (dtCfg?.timeFormat ?? 'HH:mm:ss');
|
|
4268
|
-
// If fixed mode: re-init base from config (only once per config change)
|
|
4269
4262
|
if (this.isFixedMode()) {
|
|
4270
4263
|
const base = this.buildFixedBaseDateFromConfig();
|
|
4271
|
-
if (base)
|
|
4264
|
+
if (base) {
|
|
4272
4265
|
this.setFixedDateTime(base);
|
|
4266
|
+
}
|
|
4273
4267
|
}
|
|
4274
4268
|
}
|
|
4275
4269
|
// =========================
|
|
@@ -4288,8 +4282,9 @@ class PTNavbarMenuComponent {
|
|
|
4288
4282
|
onManualDateTimeChange(value) {
|
|
4289
4283
|
this.manualDateTimeLocal = value;
|
|
4290
4284
|
const dt = this.fromDateTimeLocalValue(value);
|
|
4291
|
-
if (dt)
|
|
4285
|
+
if (dt) {
|
|
4292
4286
|
this.setFixedDateTime(dt);
|
|
4287
|
+
}
|
|
4293
4288
|
this.refreshDateTime();
|
|
4294
4289
|
}
|
|
4295
4290
|
getDateTimePositionClass() {
|
|
@@ -4298,38 +4293,34 @@ class PTNavbarMenuComponent {
|
|
|
4298
4293
|
}
|
|
4299
4294
|
refreshDateTime() {
|
|
4300
4295
|
const now = new Date();
|
|
4301
|
-
// 1) FIXED mode (client computed)
|
|
4302
4296
|
if (this.isFixedMode()) {
|
|
4303
4297
|
const displayDate = new Date(this.fixedStart.getTime() + (now.getTime() - this.fixedSetAt.getTime()));
|
|
4304
4298
|
this.dateTimeText = this.formatDateTime(displayDate, this.dateFormat, this.timeFormat);
|
|
4305
4299
|
return;
|
|
4306
4300
|
}
|
|
4307
|
-
// 2) SERVER mode (strict): if not provided => placeholders (no client fallback)
|
|
4308
4301
|
if (this.isServerMode()) {
|
|
4309
4302
|
const formatted = this.normalizeServerDateTime(this.serverDateTime);
|
|
4310
4303
|
this.dateTimeText = formatted ?? this.getServerPlaceholder();
|
|
4311
4304
|
return;
|
|
4312
4305
|
}
|
|
4313
|
-
// 3) CLIENT mode
|
|
4314
4306
|
this.dateTimeText = this.formatDateTime(now, this.dateFormat, this.timeFormat);
|
|
4315
4307
|
}
|
|
4316
4308
|
normalizeServerDateTime(v) {
|
|
4317
|
-
if (!v)
|
|
4309
|
+
if (!v) {
|
|
4318
4310
|
return null;
|
|
4311
|
+
}
|
|
4319
4312
|
if (typeof v === 'string') {
|
|
4320
4313
|
const s = v.trim();
|
|
4321
4314
|
return s ? s : null;
|
|
4322
4315
|
}
|
|
4323
4316
|
const date = (v.date ?? '').trim();
|
|
4324
4317
|
const time = (v.time ?? '').trim();
|
|
4325
|
-
if (!date || !time)
|
|
4318
|
+
if (!date || !time) {
|
|
4326
4319
|
return null;
|
|
4320
|
+
}
|
|
4327
4321
|
return `${date} ${time}`.trim();
|
|
4328
4322
|
}
|
|
4329
|
-
/** ✅ NEW: placeholder that respects selected timeFormat */
|
|
4330
4323
|
getServerPlaceholder() {
|
|
4331
|
-
// You asked explicitly: "--/--/-- --:--:--"
|
|
4332
|
-
// We'll keep date placeholder fixed as --/--/-- and adapt time to HH:mm vs HH:mm:ss
|
|
4333
4324
|
const datePh = '--/--/--';
|
|
4334
4325
|
const timePh = this.timeFormat === 'HH:mm' ? '--:--' : '--:--:--';
|
|
4335
4326
|
return `${datePh} ${timePh}`.trim();
|
|
@@ -4341,12 +4332,14 @@ class PTNavbarMenuComponent {
|
|
|
4341
4332
|
}
|
|
4342
4333
|
buildFixedBaseDateFromConfig() {
|
|
4343
4334
|
const dateValue = this.navBarMenuConfig.dateTime?.dateValue;
|
|
4344
|
-
if (!dateValue)
|
|
4335
|
+
if (!dateValue) {
|
|
4345
4336
|
return null;
|
|
4337
|
+
}
|
|
4346
4338
|
const timeSource = this.fromDateTimeLocalValue(this.manualDateTimeLocal) ?? new Date();
|
|
4347
4339
|
const parsedDate = this.parseDateByFormat(dateValue, this.dateFormat);
|
|
4348
|
-
if (!parsedDate)
|
|
4340
|
+
if (!parsedDate) {
|
|
4349
4341
|
return null;
|
|
4342
|
+
}
|
|
4350
4343
|
parsedDate.setHours(timeSource.getHours(), timeSource.getMinutes(), timeSource.getSeconds(), 0);
|
|
4351
4344
|
return parsedDate;
|
|
4352
4345
|
}
|
|
@@ -4354,20 +4347,23 @@ class PTNavbarMenuComponent {
|
|
|
4354
4347
|
try {
|
|
4355
4348
|
if (fmt === 'dd/MM/YYYY') {
|
|
4356
4349
|
const [dd, MM, YYYY] = value.split('/').map(Number);
|
|
4357
|
-
if (!dd || !MM || !YYYY)
|
|
4350
|
+
if (!dd || !MM || !YYYY) {
|
|
4358
4351
|
return null;
|
|
4352
|
+
}
|
|
4359
4353
|
return new Date(YYYY, MM - 1, dd);
|
|
4360
4354
|
}
|
|
4361
4355
|
if (fmt === 'MM/dd/YYYY') {
|
|
4362
4356
|
const [MM, dd, YYYY] = value.split('/').map(Number);
|
|
4363
|
-
if (!dd || !MM || !YYYY)
|
|
4357
|
+
if (!dd || !MM || !YYYY) {
|
|
4364
4358
|
return null;
|
|
4359
|
+
}
|
|
4365
4360
|
return new Date(YYYY, MM - 1, dd);
|
|
4366
4361
|
}
|
|
4367
4362
|
if (fmt === 'YYYY-MM-dd') {
|
|
4368
4363
|
const [YYYY, MM, dd] = value.split('-').map(Number);
|
|
4369
|
-
if (!dd || !MM || !YYYY)
|
|
4364
|
+
if (!dd || !MM || !YYYY) {
|
|
4370
4365
|
return null;
|
|
4366
|
+
}
|
|
4371
4367
|
return new Date(YYYY, MM - 1, dd);
|
|
4372
4368
|
}
|
|
4373
4369
|
return null;
|
|
@@ -4377,7 +4373,103 @@ class PTNavbarMenuComponent {
|
|
|
4377
4373
|
}
|
|
4378
4374
|
}
|
|
4379
4375
|
// =========================
|
|
4380
|
-
//
|
|
4376
|
+
// User profile helpers
|
|
4377
|
+
// =========================
|
|
4378
|
+
hasUser() {
|
|
4379
|
+
return !!this.navBarMenuConfig.user;
|
|
4380
|
+
}
|
|
4381
|
+
toggleUserMenu() {
|
|
4382
|
+
this.isUserMenuOpen = !this.isUserMenuOpen;
|
|
4383
|
+
}
|
|
4384
|
+
isInitialsAvatar() {
|
|
4385
|
+
return this.navBarMenuConfig.user?.avatarMode === 'INITIALS';
|
|
4386
|
+
}
|
|
4387
|
+
showProfileInMenu() {
|
|
4388
|
+
return this.navBarMenuConfig.user?.showProfileInMenu !== false;
|
|
4389
|
+
}
|
|
4390
|
+
showProfileLeftOfAvatar() {
|
|
4391
|
+
return this.navBarMenuConfig.user?.profilePosition === 'LEFT_OF_AVATAR';
|
|
4392
|
+
}
|
|
4393
|
+
getUsername() {
|
|
4394
|
+
return this.navBarMenuConfig.user?.username?.trim() || '-';
|
|
4395
|
+
}
|
|
4396
|
+
getUserFullName() {
|
|
4397
|
+
const configuredFullName = this.navBarMenuConfig.user?.fullName?.trim();
|
|
4398
|
+
if (configuredFullName) {
|
|
4399
|
+
return configuredFullName;
|
|
4400
|
+
}
|
|
4401
|
+
const firstName = this.navBarMenuConfig.user?.firstName?.trim() || '';
|
|
4402
|
+
const lastName = this.navBarMenuConfig.user?.lastName?.trim() || '';
|
|
4403
|
+
const fullName = `${firstName} ${lastName}`.trim();
|
|
4404
|
+
return fullName || this.getUsername();
|
|
4405
|
+
}
|
|
4406
|
+
getUserInitials() {
|
|
4407
|
+
const firstName = this.navBarMenuConfig.user?.firstName?.trim() || '';
|
|
4408
|
+
const lastName = this.navBarMenuConfig.user?.lastName?.trim() || '';
|
|
4409
|
+
const firstInitial = firstName.charAt(0);
|
|
4410
|
+
const lastInitial = lastName.charAt(0);
|
|
4411
|
+
const initials = `${firstInitial}${lastInitial}`.toUpperCase();
|
|
4412
|
+
if (initials) {
|
|
4413
|
+
return initials;
|
|
4414
|
+
}
|
|
4415
|
+
const fullNameParts = this.getUserFullName()
|
|
4416
|
+
.split(' ')
|
|
4417
|
+
.map((item) => item.trim())
|
|
4418
|
+
.filter(Boolean);
|
|
4419
|
+
if (fullNameParts.length >= 2) {
|
|
4420
|
+
return `${fullNameParts[0].charAt(0)}${fullNameParts[1].charAt(0)}`.toUpperCase();
|
|
4421
|
+
}
|
|
4422
|
+
const usernameInitial = this.getUsername().charAt(0).toUpperCase();
|
|
4423
|
+
return usernameInitial || '?';
|
|
4424
|
+
}
|
|
4425
|
+
getUserProfile() {
|
|
4426
|
+
return this.navBarMenuConfig.user?.profile?.trim() || '-';
|
|
4427
|
+
}
|
|
4428
|
+
getUserAvatarStyles() {
|
|
4429
|
+
return {
|
|
4430
|
+
backgroundColor: this.navBarMenuConfig.user?.avatarBackgroundColor ?? '#eff6ff',
|
|
4431
|
+
color: this.navBarMenuConfig.user?.avatarTextColor ?? '#2563eb',
|
|
4432
|
+
borderColor: this.navBarMenuConfig.user?.avatarBorderColor ?? '#bfdbfe',
|
|
4433
|
+
};
|
|
4434
|
+
}
|
|
4435
|
+
getUserProfileTextStyles() {
|
|
4436
|
+
const style = this.navBarMenuConfig.user?.profileTextStyle;
|
|
4437
|
+
return {
|
|
4438
|
+
color: style?.color ?? '#2563eb',
|
|
4439
|
+
fontSize: style?.fontSize ?? '0.8rem',
|
|
4440
|
+
fontWeight: style?.fontWeight ?? '700',
|
|
4441
|
+
};
|
|
4442
|
+
}
|
|
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;
|
|
4450
|
+
}
|
|
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
|
+
}
|
|
4468
|
+
this.isUserMenuOpen = false;
|
|
4469
|
+
item.action?.();
|
|
4470
|
+
}
|
|
4471
|
+
// =========================
|
|
4472
|
+
// Formatting utils
|
|
4381
4473
|
// =========================
|
|
4382
4474
|
pad2(n) {
|
|
4383
4475
|
return String(n).padStart(2, '0');
|
|
@@ -4412,13 +4504,14 @@ class PTNavbarMenuComponent {
|
|
|
4412
4504
|
return `${yyyy}-${MM}-${dd}T${HH}:${mm}:${ss}`;
|
|
4413
4505
|
}
|
|
4414
4506
|
fromDateTimeLocalValue(value) {
|
|
4415
|
-
if (!value)
|
|
4507
|
+
if (!value) {
|
|
4416
4508
|
return null;
|
|
4509
|
+
}
|
|
4417
4510
|
const dt = new Date(value);
|
|
4418
4511
|
return isNaN(dt.getTime()) ? null : dt;
|
|
4419
4512
|
}
|
|
4420
4513
|
// =========================
|
|
4421
|
-
// Existing
|
|
4514
|
+
// Existing navbar helpers
|
|
4422
4515
|
// =========================
|
|
4423
4516
|
isImageStyle(object) {
|
|
4424
4517
|
return typeof object === 'object' && 'imageUrl' in object;
|
|
@@ -4517,17 +4610,20 @@ class PTNavbarMenuComponent {
|
|
|
4517
4610
|
};
|
|
4518
4611
|
}
|
|
4519
4612
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4520
|
-
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" }, 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 <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 <!-- \u2705 MIDDLE (DateTime) -->\n <!-- Always visible when enabled, even if server value missing (will show placeholders). -->\n @if (hasDateTime()) {\n <div\n class=\"navbar-middle\"\n [ngClass]=\"getDateTimePositionClass()\"\n >\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n <!-- Manual fixed datetime (only if config has dateValue => FIXED mode) -->\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\n [config]=\"menuConfig\"\n ></pt-menu-fancy>\n }\n </div>\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}.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}.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}@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}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value{display:none}}\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"] }] }); }
|
|
4613
|
+
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"] }] }); }
|
|
4521
4614
|
}
|
|
4522
4615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
|
|
4523
4616
|
type: Component,
|
|
4524
|
-
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
|
|
4617
|
+
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"] }]
|
|
4525
4618
|
}], propDecorators: { navBarMenuConfig: [{
|
|
4526
4619
|
type: Input
|
|
4527
|
-
}], toggleSidebar: [{
|
|
4528
|
-
type: Output
|
|
4529
4620
|
}], serverDateTime: [{
|
|
4530
4621
|
type: Input
|
|
4622
|
+
}], toggleSidebar: [{
|
|
4623
|
+
type: Output
|
|
4624
|
+
}], closeUserMenu: [{
|
|
4625
|
+
type: HostListener,
|
|
4626
|
+
args: ['document:click']
|
|
4531
4627
|
}] } });
|
|
4532
4628
|
|
|
4533
4629
|
class PTMenuFancyModule {
|
|
@@ -5004,7 +5100,6 @@ class PTPageSkeletonComponent {
|
|
|
5004
5100
|
this.isSidebarVisible = !this.isSidebarVisible;
|
|
5005
5101
|
this.toggleSidebar.emit();
|
|
5006
5102
|
}
|
|
5007
|
-
// Initialize backgroundCardConfig with default values
|
|
5008
5103
|
initializeBackgroundCardConfig() {
|
|
5009
5104
|
this.pageSkeletonConfig.backgroundCardConfig = {
|
|
5010
5105
|
identifier: 'pt-page-skeleton/background',
|
|
@@ -5015,7 +5110,6 @@ class PTPageSkeletonComponent {
|
|
|
5015
5110
|
...this.pageSkeletonConfig.backgroundCardConfig,
|
|
5016
5111
|
};
|
|
5017
5112
|
}
|
|
5018
|
-
// Initialize contentCardConfig with default values (if necessary)
|
|
5019
5113
|
initializeContentCardConfig() {
|
|
5020
5114
|
this.pageSkeletonConfig.contentCardConfig = {
|
|
5021
5115
|
identifier: 'pt-page-skeleton/content',
|
|
@@ -5028,11 +5122,11 @@ class PTPageSkeletonComponent {
|
|
|
5028
5122
|
};
|
|
5029
5123
|
}
|
|
5030
5124
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5031
|
-
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
|
|
5125
|
+
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"] }] }); }
|
|
5032
5126
|
}
|
|
5033
5127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
|
|
5034
5128
|
type: Component,
|
|
5035
|
-
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
|
|
5129
|
+
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"] }]
|
|
5036
5130
|
}], propDecorators: { pageSkeletonConfig: [{
|
|
5037
5131
|
type: Input
|
|
5038
5132
|
}], serverDateTime: [{
|
|
@@ -6545,6 +6639,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
6545
6639
|
}]
|
|
6546
6640
|
}] });
|
|
6547
6641
|
|
|
6642
|
+
// nav-bar-menu-config.model.ts
|
|
6643
|
+
|
|
6548
6644
|
// src/lib/models/pt-dialog-config.model.ts
|
|
6549
6645
|
|
|
6550
6646
|
// Advanced table
|