ng-prime-tools 1.0.78 → 1.0.79

package/fesm2022/ng-prime-tools.mjs

@@ -4210,20 +4210,23 @@ class PTNavbarMenuComponent {
     constructor() {
         this.navBarMenuConfig = {};
         this.toggleSidebar = new EventEmitter();
+        /**
+         * Emitted when the user clicks the Profile item from the user menu.
+         */
+        this.userClick = new EventEmitter();
+        /**
+         * Emitted when the user clicks the Logout item from the user menu.
+         */
+        this.logoutClick = new EventEmitter();
         this.destroy$ = new Subject();
         this.dateTimeText = '';
-        /** formats are taken from config (or defaults) */
+        this.isUserMenuOpen = false;
         this.dateFormat = 'dd/MM/YYYY';
         this.timeFormat = 'HH:mm:ss';
-        /** FIXED mode base */
         this.fixedStart = new Date();
         this.fixedSetAt = new Date();
-        /** used only in FIXED mode */
         this.manualDateTimeLocal = this.toDateTimeLocalValue(new Date());
     }
-    // =========================
-    // Defaults (existing)
-    // =========================
     static { this.DEFAULT_LOGO_URL = ''; }
     static { this.DEFAULT_LOGO_ALT_TEXT = 'Logo'; }
     static { this.DEFAULT_LOGO_WIDTH = '40px'; }
@@ -4235,9 +4238,6 @@ class PTNavbarMenuComponent {
     static { this.DEFAULT_ICON_COLOR = '#333'; }
     static { this.DEFAULT_TOGGLE_BUTTON_ICON = 'pi pi-bars'; }
     static { this.DEFAULT_TOGGLE_BUTTON_COLOR = '#333'; }
-    // =========================
-    // Lifecycle
-    // =========================
     ngOnInit() {
         this.applyConfigFormatsAndFixedBase();
         interval(1000)
@@ -4246,11 +4246,9 @@ class PTNavbarMenuComponent {
         this.refreshDateTime();
     }
     ngOnChanges(changes) {
-        // If config changes: update formats and fixed base if needed.
         if (changes['navBarMenuConfig']) {
             this.applyConfigFormatsAndFixedBase();
         }
-        // If serverDateTime changes: just refresh display
         if (changes['serverDateTime'] || changes['navBarMenuConfig']) {
             this.refreshDateTime();
         }
@@ -4259,17 +4257,21 @@ class PTNavbarMenuComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    closeUserMenu() {
+        this.isUserMenuOpen = false;
+    }
     applyConfigFormatsAndFixedBase() {
-        if (!this.hasDateTime())
+        if (!this.hasDateTime()) {
             return;
+        }
         const dtCfg = this.navBarMenuConfig.dateTime;
         this.dateFormat = (dtCfg?.dateFormat ?? 'dd/MM/YYYY');
         this.timeFormat = (dtCfg?.timeFormat ?? 'HH:mm:ss');
-        // If fixed mode: re-init base from config (only once per config change)
         if (this.isFixedMode()) {
             const base = this.buildFixedBaseDateFromConfig();
-            if (base)
+            if (base) {
                 this.setFixedDateTime(base);
+            }
         }
     }
     // =========================
@@ -4288,8 +4290,9 @@ class PTNavbarMenuComponent {
     onManualDateTimeChange(value) {
         this.manualDateTimeLocal = value;
         const dt = this.fromDateTimeLocalValue(value);
-        if (dt)
+        if (dt) {
             this.setFixedDateTime(dt);
+        }
         this.refreshDateTime();
     }
     getDateTimePositionClass() {
@@ -4298,38 +4301,34 @@ class PTNavbarMenuComponent {
     }
     refreshDateTime() {
         const now = new Date();
-        // 1) FIXED mode (client computed)
         if (this.isFixedMode()) {
             const displayDate = new Date(this.fixedStart.getTime() + (now.getTime() - this.fixedSetAt.getTime()));
             this.dateTimeText = this.formatDateTime(displayDate, this.dateFormat, this.timeFormat);
             return;
         }
-        // 2) SERVER mode (strict): if not provided => placeholders (no client fallback)
         if (this.isServerMode()) {
             const formatted = this.normalizeServerDateTime(this.serverDateTime);
             this.dateTimeText = formatted ?? this.getServerPlaceholder();
             return;
         }
-        // 3) CLIENT mode
         this.dateTimeText = this.formatDateTime(now, this.dateFormat, this.timeFormat);
     }
     normalizeServerDateTime(v) {
-        if (!v)
+        if (!v) {
             return null;
+        }
         if (typeof v === 'string') {
             const s = v.trim();
             return s ? s : null;
         }
         const date = (v.date ?? '').trim();
         const time = (v.time ?? '').trim();
-        if (!date || !time)
+        if (!date || !time) {
             return null;
+        }
         return `${date} ${time}`.trim();
     }
-    /** ✅ NEW: placeholder that respects selected timeFormat */
     getServerPlaceholder() {
-        // You asked explicitly: "--/--/-- --:--:--"
-        // We'll keep date placeholder fixed as --/--/-- and adapt time to HH:mm vs HH:mm:ss
         const datePh = '--/--/--';
         const timePh = this.timeFormat === 'HH:mm' ? '--:--' : '--:--:--';
         return `${datePh} ${timePh}`.trim();
@@ -4341,12 +4340,14 @@ class PTNavbarMenuComponent {
     }
     buildFixedBaseDateFromConfig() {
         const dateValue = this.navBarMenuConfig.dateTime?.dateValue;
-        if (!dateValue)
+        if (!dateValue) {
             return null;
+        }
         const timeSource = this.fromDateTimeLocalValue(this.manualDateTimeLocal) ?? new Date();
         const parsedDate = this.parseDateByFormat(dateValue, this.dateFormat);
-        if (!parsedDate)
+        if (!parsedDate) {
             return null;
+        }
         parsedDate.setHours(timeSource.getHours(), timeSource.getMinutes(), timeSource.getSeconds(), 0);
         return parsedDate;
     }
@@ -4354,20 +4355,23 @@ class PTNavbarMenuComponent {
         try {
             if (fmt === 'dd/MM/YYYY') {
                 const [dd, MM, YYYY] = value.split('/').map(Number);
-                if (!dd || !MM || !YYYY)
+                if (!dd || !MM || !YYYY) {
                     return null;
+                }
                 return new Date(YYYY, MM - 1, dd);
             }
             if (fmt === 'MM/dd/YYYY') {
                 const [MM, dd, YYYY] = value.split('/').map(Number);
-                if (!dd || !MM || !YYYY)
+                if (!dd || !MM || !YYYY) {
                     return null;
+                }
                 return new Date(YYYY, MM - 1, dd);
             }
             if (fmt === 'YYYY-MM-dd') {
                 const [YYYY, MM, dd] = value.split('-').map(Number);
-                if (!dd || !MM || !YYYY)
+                if (!dd || !MM || !YYYY) {
                     return null;
+                }
                 return new Date(YYYY, MM - 1, dd);
             }
             return null;
@@ -4377,7 +4381,83 @@ class PTNavbarMenuComponent {
         }
     }
     // =========================
-    // Formatting utils (client/fixed only)
+    // User profile helpers
+    // =========================
+    hasUser() {
+        return !!this.navBarMenuConfig.user;
+    }
+    toggleUserMenu() {
+        this.isUserMenuOpen = !this.isUserMenuOpen;
+    }
+    isInitialsAvatar() {
+        return this.navBarMenuConfig.user?.avatarMode === 'INITIALS';
+    }
+    showProfileInMenu() {
+        return this.navBarMenuConfig.user?.showProfileInMenu !== false;
+    }
+    showProfileLeftOfAvatar() {
+        return this.navBarMenuConfig.user?.profilePosition === 'LEFT_OF_AVATAR';
+    }
+    getUsername() {
+        return this.navBarMenuConfig.user?.username?.trim() || '-';
+    }
+    getUserFullName() {
+        const configuredFullName = this.navBarMenuConfig.user?.fullName?.trim();
+        if (configuredFullName) {
+            return configuredFullName;
+        }
+        const firstName = this.navBarMenuConfig.user?.firstName?.trim() || '';
+        const lastName = this.navBarMenuConfig.user?.lastName?.trim() || '';
+        const fullName = `${firstName} ${lastName}`.trim();
+        return fullName || this.getUsername();
+    }
+    getUserInitials() {
+        const firstName = this.navBarMenuConfig.user?.firstName?.trim() || '';
+        const lastName = this.navBarMenuConfig.user?.lastName?.trim() || '';
+        const firstInitial = firstName.charAt(0);
+        const lastInitial = lastName.charAt(0);
+        const initials = `${firstInitial}${lastInitial}`.toUpperCase();
+        if (initials) {
+            return initials;
+        }
+        const fullNameParts = this.getUserFullName()
+            .split(' ')
+            .map((item) => item.trim())
+            .filter(Boolean);
+        if (fullNameParts.length >= 2) {
+            return `${fullNameParts[0].charAt(0)}${fullNameParts[1].charAt(0)}`.toUpperCase();
+        }
+        const usernameInitial = this.getUsername().charAt(0).toUpperCase();
+        return usernameInitial || '?';
+    }
+    getUserProfile() {
+        return this.navBarMenuConfig.user?.profile?.trim() || '-';
+    }
+    getUserAvatarStyles() {
+        return {
+            backgroundColor: this.navBarMenuConfig.user?.avatarBackgroundColor ?? '#eff6ff',
+            color: this.navBarMenuConfig.user?.avatarTextColor ?? '#2563eb',
+            borderColor: this.navBarMenuConfig.user?.avatarBorderColor ?? '#bfdbfe',
+        };
+    }
+    getUserProfileTextStyles() {
+        const style = this.navBarMenuConfig.user?.profileTextStyle;
+        return {
+            color: style?.color ?? '#2563eb',
+            fontSize: style?.fontSize ?? '0.8rem',
+            fontWeight: style?.fontWeight ?? '700',
+        };
+    }
+    onUserProfileClick() {
+        this.isUserMenuOpen = false;
+        this.userClick.emit();
+    }
+    onUserLogoutClick() {
+        this.isUserMenuOpen = false;
+        this.logoutClick.emit();
+    }
+    // =========================
+    // Formatting utils
     // =========================
     pad2(n) {
         return String(n).padStart(2, '0');
@@ -4412,13 +4492,14 @@ class PTNavbarMenuComponent {
         return `${yyyy}-${MM}-${dd}T${HH}:${mm}:${ss}`;
     }
     fromDateTimeLocalValue(value) {
-        if (!value)
+        if (!value) {
             return null;
+        }
         const dt = new Date(value);
         return isNaN(dt.getTime()) ? null : dt;
     }
     // =========================
-    // Existing logic (unchanged)
+    // Existing navbar helpers
     // =========================
     isImageStyle(object) {
         return typeof object === 'object' && 'imageUrl' in object;
@@ -4517,17 +4598,24 @@ class PTNavbarMenuComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
             type: Component,
-            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      <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"] }]
+            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            <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"] }]
         }], propDecorators: { navBarMenuConfig: [{
                 type: Input
-            }], toggleSidebar: [{
-                type: Output
             }], serverDateTime: [{
                 type: Input
+            }], toggleSidebar: [{
+                type: Output
+            }], userClick: [{
+                type: Output
+            }], logoutClick: [{
+                type: Output
+            }], closeUserMenu: [{
+                type: HostListener,
+                args: ['document:click']
             }] } });
 
 class PTMenuFancyModule {
@@ -5028,7 +5116,7 @@ class PTPageSkeletonComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 (use *ngIf to toggle visibility) -->\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      <!-- Content Card Wrapper -->\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        <!-- Background Card -->\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"] }] }); }
+    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 (use *ngIf to toggle visibility) -->\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      <!-- Content Card Wrapper -->\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        <!-- Background Card -->\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", "userClick", "logoutClick"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
             type: Component,
@@ -6545,6 +6633,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+// nav-bar-menu-config.model.ts
+
 // src/lib/models/pt-dialog-config.model.ts
 
 // Advanced table