@ojiepermana/angular-theme 22.0.35 → 22.0.41

package/fesm2022/ojiepermana-angular-theme-page.mjs

@@ -1,6 +1,10 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, input, effect, untracked, ChangeDetectionStrategy, Component, contentChild, output } from '@angular/core';
+import { signal, computed, Injectable, inject, input, ChangeDetectionStrategy, Component, effect, untracked, contentChild, output, booleanAttribute } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
+import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationHeaderComponent, NavigationFooterComponent } from '@ojiepermana/angular-navigation';
+import { NavigationService } from '@ojiepermana/angular-navigation/service';
+import { LayoutService } from '@ojiepermana/angular-theme/layout';
+import { LayoutIdentityService, LayoutBrand, LayoutUser } from '@ojiepermana/angular-theme/layout/wrapper';
 import { DOCUMENT } from '@angular/common';
 
 const PAGE_VARIANTS = ['stacked', 'side'];
@@ -8,11 +12,14 @@ const PAGE_SIDE_POSITIONS = ['left', 'right'];
 const PAGE_SIDE_MODES = ['sticky', 'drawer', 'overlay'];
 const PAGE_SCROLL_VALUES = ['content', 'page'];
 const PAGE_HEIGHT_VALUES = ['auto', 'fix'];
+/** Visual appearance shared with the layout/navigation axes — unifies borders. */
+const PAGE_APPEARANCES = ['flat', 'border-rail'];
 const PAGE_DEFAULT_VARIANT = 'stacked';
 const PAGE_DEFAULT_SIDE_POSITION = 'left';
 const PAGE_DEFAULT_SIDE_MODE = 'sticky';
 const PAGE_DEFAULT_SCROLL = 'content';
 const PAGE_DEFAULT_HEIGHT = 'auto';
+const PAGE_DEFAULT_APPEARANCE = 'flat';
 const PAGE_DEFAULT_SIDE_WIDTH = '16rem';
 function isUiPageVariant(value) {
     return value !== null && PAGE_VARIANTS.includes(value);
@@ -29,6 +36,9 @@ function isUiPageScroll(value) {
 function isUiPageHeight(value) {
     return value !== null && PAGE_HEIGHT_VALUES.includes(value);
 }
+function isUiPageAppearance(value) {
+    return value !== null && PAGE_APPEARANCES.includes(value);
+}
 
 class PageStateService {
     variantState = signal(PAGE_DEFAULT_VARIANT, /* @ts-ignore */
@@ -37,6 +47,8 @@ class PageStateService {
     ...(ngDevMode ? [{ debugName: "heightState" }] : /* istanbul ignore next */ []));
     scrollState = signal(PAGE_DEFAULT_SCROLL, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scrollState" }] : /* istanbul ignore next */ []));
+    appearanceState = signal(PAGE_DEFAULT_APPEARANCE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearanceState" }] : /* istanbul ignore next */ []));
     positionState = signal(PAGE_DEFAULT_SIDE_POSITION, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "positionState" }] : /* istanbul ignore next */ []));
     sideModeState = signal(PAGE_DEFAULT_SIDE_MODE, /* @ts-ignore */
@@ -53,15 +65,20 @@ class PageStateService {
     ...(ngDevMode ? [{ debugName: "sideOpenRequestState" }] : /* istanbul ignore next */ []));
     sideOpenRequestVersionState = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sideOpenRequestVersionState" }] : /* istanbul ignore next */ []));
+    /** Aktif saat apps-launcher mengambang di atas `PageHeader`; header memesan ruang kanan agar isinya tidak tertimpa. */
+    appsLauncherReserveState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsLauncherReserveState" }] : /* istanbul ignore next */ []));
     variant = this.variantState.asReadonly();
     height = this.heightState.asReadonly();
     scroll = this.scrollState.asReadonly();
+    appearance = this.appearanceState.asReadonly();
     position = this.positionState.asReadonly();
     sideMode = this.sideModeState.asReadonly();
     sideWidth = this.sideWidthState.asReadonly();
     sideId = this.sideIdState.asReadonly();
     sideOpenRequest = this.sideOpenRequestState.asReadonly();
     sideOpenRequestVersion = this.sideOpenRequestVersionState.asReadonly();
+    appsLauncherReserve = this.appsLauncherReserveState.asReadonly();
     sideOpen = computed(() => this.controlledSideOpenState() ?? this.internalSideOpenState(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sideOpen" }] : /* istanbul ignore next */ []));
     isSideInteractive = computed(() => this.sideMode() === 'drawer' || this.sideMode() === 'overlay', /* @ts-ignore */
@@ -72,6 +89,7 @@ class PageStateService {
         this.variantState.set(config.variant);
         this.heightState.set(config.height);
         this.scrollState.set(config.scroll);
+        this.appearanceState.set(config.appearance);
         this.positionState.set(config.position);
         this.sideModeState.set(config.sideMode);
         this.sideWidthState.set(config.sideWidth);
@@ -82,6 +100,9 @@ class PageStateService {
         this.sideWidthState.set(config.width);
         this.sideIdState.set(config.id);
     }
+    setAppsLauncherReserve(reserve) {
+        this.appsLauncherReserveState.set(reserve);
+    }
     setControlledSideOpen(open) {
         this.controlledSideOpenState.set(open);
         if (open !== null) {
@@ -115,6 +136,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
             type: Injectable
         }] });
 
+function buildPageBodyClasses(scroll, customClass) {
+    return cn('block min-w-0', scroll === 'content' && 'h-full min-h-0 overflow-auto', scroll === 'page' && 'overflow-visible', customClass);
+}
+class PageHeaderComponent {
+    page = inject(PageStateService, { optional: true });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    resolvedHeight = computed(() => this.page?.height() ?? PAGE_DEFAULT_HEIGHT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
+    isBorderRail = computed(() => (this.page?.appearance() ?? PAGE_DEFAULT_APPEARANCE) === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    /** Saat tombol apps mengambang di atas header, sisakan ruang kanan agar isi header tidak tertimpa. */
+    reservesAppsLauncher = computed(() => this.page?.appsLauncherReserve() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reservesAppsLauncher" }] : /* istanbul ignore next */ []));
+    /** Lebar tombol apps (h-9 w-9 = 36px) + offset kanan (right-2 = 8px) + jarak aman; `null` = tak memesan. */
+    appsLauncherReservePadding = computed(() => this.reservesAppsLauncher() ? '3.5rem' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsLauncherReservePadding" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block shrink-0 border-border bg-background', 
+    // appearance unifies the border with the layout/nav: border-rail = 1.5px.
+    this.isBorderRail() ? 'border-b-[1.5px]' : 'border-b', this.class(), this.resolvedHeight() === 'fix' && 'h-12 overflow-hidden'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageHeaderComponent, isStandalone: true, selector: "PageHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "header" }, properties: { "class": "classes()", "style.padding-right": "appsLauncherReservePadding()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PageHeader',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        // Inline style menang atas utility responsif konsumen (mis. `md:px-6`), jadi ruang
+                        // untuk tombol apps yang mengambang tetap terjamin di semua breakpoint.
+                        '[style.padding-right]': 'appsLauncherReservePadding()',
+                        'data-page-slot': 'header',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class PageContentComponent {
+    page = inject(PageStateService, { optional: true });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    resolvedScroll = computed(() => this.page?.scroll() ?? PAGE_DEFAULT_SCROLL, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
+    classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageContentComponent, isStandalone: true, selector: "PageContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "content" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PageContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-page-slot': 'content',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class PageDashboardComponent {
+    page = inject(PageStateService, { optional: true });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    resolvedScroll = computed(() => this.page?.scroll() ?? PAGE_DEFAULT_SCROLL, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
+    classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageDashboardComponent, isStandalone: true, selector: "PageDashboard", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "dashboard" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageDashboardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PageDashboard',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-page-slot': 'dashboard',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class PageFooterComponent {
+    page = inject(PageStateService, { optional: true });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    resolvedHeight = computed(() => this.page?.height() ?? PAGE_DEFAULT_HEIGHT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
+    isBorderRail = computed(() => (this.page?.appearance() ?? PAGE_DEFAULT_APPEARANCE) === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block shrink-0 border-border bg-background', 
+    // appearance unifies the border with the layout/nav: border-rail = 1.5px.
+    this.isBorderRail() ? 'border-t-[1.5px]' : 'border-t', this.class(), this.resolvedHeight() === 'fix' && 'h-12 overflow-hidden'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageFooterComponent, isStandalone: true, selector: "PageFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "footer" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PageFooter',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-page-slot': 'footer',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 let nextPageSideId = 0;
 class PageSideComponent {
     document = inject(DOCUMENT, { optional: true });
@@ -208,16 +342,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/** Penghitung instance untuk id unik tiap apps-launcher (hindari bentrok `claimId` saat beberapa `Page` hidup). */
+let pageAppsLauncherInstanceId = 0;
 class PageComponent {
     page = inject(PageStateService);
+    layout = inject(LayoutService, { optional: true });
+    navigation = inject(NavigationService, { optional: true });
+    identity = inject(LayoutIdentityService, { optional: true });
     projectedSide = contentChild(PageSideComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "projectedSide" }] : /* istanbul ignore next */ []));
+    projectedHeader = contentChild(PageHeaderComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedHeader" }] : /* istanbul ignore next */ []));
     variant = input(PAGE_DEFAULT_VARIANT, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     height = input(PAGE_DEFAULT_HEIGHT, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
     scroll = input(PAGE_DEFAULT_SCROLL, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
+    /** Visual appearance shared with the layout (`flat | border-rail`); unifies header/footer borders. */
+    appearance = input(PAGE_DEFAULT_APPEARANCE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     position = input(PAGE_DEFAULT_SIDE_POSITION, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     sideMode = input(PAGE_DEFAULT_SIDE_MODE, /* @ts-ignore */
@@ -229,6 +373,19 @@ class PageComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     sideOpenChange = output();
+    /** Saat layout `empty`, munculkan tombol apps (flyout main navigation) di pojok kanan-atas. Set `false` untuk menonaktifkan. */
+    appsLauncher = input(true, { ...(ngDevMode ? { debugName: "appsLauncher" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Id navigasi yang disurface oleh apps-launcher (default `main`). */
+    appsNavId = input('main', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsNavId" }] : /* istanbul ignore next */ []));
+    /** Ikon Material untuk tombol apps-launcher. */
+    appsIcon = input('apps', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsIcon" }] : /* istanbul ignore next */ []));
+    /** Label/aria-label tombol apps-launcher (tombol icon-only). */
+    appsLabel = input('Open navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsLabel" }] : /* istanbul ignore next */ []));
+    /** Id unik untuk instance `<Navigation>` apps-launcher; tak boleh memakai id `main` (akan bentrok `claimId`). */
+    launcherNavId = `__page-apps-${(pageAppsLauncherInstanceId += 1)}`;
     resolvedPosition = computed(() => this.projectedSide()?.position() ?? this.position(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []));
     resolvedSideMode = computed(() => this.projectedSide()?.mode() ?? this.sideMode(), /* @ts-ignore */
@@ -239,6 +396,29 @@ class PageComponent {
     ...(ngDevMode ? [{ debugName: "isRightSide" }] : /* istanbul ignore next */ []));
     showsOverlayBackdrop = computed(() => this.variant() === 'side' && this.resolvedSideMode() === 'overlay' && this.page.sideOpen(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showsOverlayBackdrop" }] : /* istanbul ignore next */ []));
+    /** Signal data untuk id yang dipilih; di-recompute hanya saat `appsNavId` berubah. */
+    appsNavSource = computed(() => this.navigation?.data(this.appsNavId()) ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsNavSource" }] : /* istanbul ignore next */ []));
+    appsNavData = computed(() => this.appsNavSource()?.() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsNavData" }] : /* istanbul ignore next */ []));
+    /** Apps-launcher hanya muncul di layout `empty`, saat diaktifkan, dan saat nav target punya data. */
+    showsAppsLauncher = computed(() => this.appsLauncher() && this.layout?.type() === 'empty' && this.appsNavData().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsAppsLauncher" }] : /* istanbul ignore next */ []));
+    /**
+     * Host `<Navigation>` launcher di-absolute ke pojok kanan-atas (hanya membungkus tombol trigger;
+     * panel flyout tetap membentang selebar `Page` lewat pengukuran container). Saat ada `PageHeader`,
+     * tombol menyatu di dalam pita header (offset rapat); tanpa header, mengambang di atas konten.
+     */
+    appsLauncherHostClass = computed(() => cn('absolute z-30 h-auto w-auto', this.projectedHeader() ? 'right-2 top-1.5' : 'right-3 top-3'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsLauncherHostClass" }] : /* istanbul ignore next */ []));
+    /** Appearance flyout mengikuti layout (seperti shell flyout); fallback ke appearance `Page`. */
+    appsLauncherAppearance = computed(() => this.layout?.appearance() ?? this.appearance(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsLauncherAppearance" }] : /* istanbul ignore next */ []));
+    /** Brand/user untuk header & footer flyout — sama seperti shell flyout; `null` saat tak ada shell. */
+    appsBrand = computed(() => this.identity?.brand() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsBrand" }] : /* istanbul ignore next */ []));
+    appsUser = computed(() => this.identity?.user() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsUser" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn('relative block h-full min-h-0 w-full min-w-0 overflow-hidden text-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     shellClasses = computed(() => cn('relative z-10 h-full min-h-0 w-full min-w-0', this.scroll() === 'content' && 'grid grid-rows-[auto_minmax(0,1fr)_auto]', this.scroll() === 'page' && 'overflow-auto'), /* @ts-ignore */
@@ -263,6 +443,7 @@ class PageComponent {
                 variant: this.variant(),
                 height: this.height(),
                 scroll: this.scroll(),
+                appearance: this.appearance(),
                 position: this.position(),
                 sideMode: this.sideMode(),
                 sideWidth: this.sideWidth(),
@@ -271,6 +452,10 @@ class PageComponent {
         effect(() => {
             this.page.setControlledSideOpen(this.sideOpen());
         });
+        // Header memesan ruang kanan hanya saat tombol apps benar-benar mengambang di atas header.
+        effect(() => {
+            this.page.setAppsLauncherReserve(this.showsAppsLauncher() && this.projectedHeader() !== undefined);
+        });
         effect(() => {
             const requestVersion = this.page.sideOpenRequestVersion();
             if (requestVersion === 0) {
@@ -283,7 +468,7 @@ class PageComponent {
         this.page.closeSide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: PageComponent, isStandalone: true, selector: "Page", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sideMode: { classPropertyName: "sideMode", publicName: "sideMode", isSignal: true, isRequired: false, transformFunction: null }, sideOpen: { classPropertyName: "sideOpen", publicName: "sideOpen", isSignal: true, isRequired: false, transformFunction: null }, sideWidth: { classPropertyName: "sideWidth", publicName: "sideWidth", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sideOpenChange: "sideOpenChange" }, host: { properties: { "class": "hostClasses()", "attr.data-page-variant": "variant()", "attr.data-page-height": "height()", "attr.data-page-scroll": "scroll()", "attr.data-page-position": "resolvedPosition()", "attr.data-page-side-mode": "resolvedSideMode()", "attr.data-page-side-open": "page.sideOpen()", "style.--page-side-width": "sideWidth()" } }, providers: [PageStateService], queries: [{ propertyName: "projectedSide", first: true, predicate: PageSideComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: PageComponent, isStandalone: true, selector: "Page", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sideMode: { classPropertyName: "sideMode", publicName: "sideMode", isSignal: true, isRequired: false, transformFunction: null }, sideOpen: { classPropertyName: "sideOpen", publicName: "sideOpen", isSignal: true, isRequired: false, transformFunction: null }, sideWidth: { classPropertyName: "sideWidth", publicName: "sideWidth", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, appsLauncher: { classPropertyName: "appsLauncher", publicName: "appsLauncher", isSignal: true, isRequired: false, transformFunction: null }, appsNavId: { classPropertyName: "appsNavId", publicName: "appsNavId", isSignal: true, isRequired: false, transformFunction: null }, appsIcon: { classPropertyName: "appsIcon", publicName: "appsIcon", isSignal: true, isRequired: false, transformFunction: null }, appsLabel: { classPropertyName: "appsLabel", publicName: "appsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sideOpenChange: "sideOpenChange" }, host: { properties: { "class": "hostClasses()", "attr.data-page-variant": "variant()", "attr.data-page-height": "height()", "attr.data-page-scroll": "scroll()", "attr.data-page-appearance": "appearance()", "attr.data-page-position": "resolvedPosition()", "attr.data-page-side-mode": "resolvedSideMode()", "attr.data-page-side-open": "page.sideOpen()", "style.--page-side-width": "sideWidth()" } }, providers: [PageStateService], queries: [{ propertyName: "projectedSide", first: true, predicate: PageSideComponent, descendants: true, isSignal: true }, { propertyName: "projectedHeader", first: true, predicate: PageHeaderComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (showsOverlayBackdrop()) {
       <button
         type="button"
@@ -307,7 +492,33 @@ class PageComponent {
 
       <ng-content select="PageFooter" />
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+    @if (showsAppsLauncher()) {
+      <Navigation
+        [id]="launcherNavId"
+        [data]="appsNavData()"
+        ariaLabel="Application navigation"
+        [class]="appsLauncherHostClass()">
+        <NavigationFlyout
+          [icon]="appsIcon()"
+          icon-only
+          trigger-variant="plain"
+          [nav-appearance]="appsLauncherAppearance()"
+          [label]="appsLabel()">
+          @if (appsBrand(); as brand) {
+            <NavigationHeader>
+              <LayoutBrand [brand]="brand" />
+            </NavigationHeader>
+          }
+          @if (appsUser(); as user) {
+            <NavigationFooter class="px-3">
+              <LayoutUser [user]="user" />
+            </NavigationFooter>
+          }
+        </NavigationFlyout>
+      </Navigation>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutComponent, selector: "NavigationFlyout", inputs: ["label", "icon", "icon-only", "icon-position", "trigger-variant", "trigger-floating", "trigger-class", "nav-position", "nav-appearance", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
@@ -315,11 +526,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     selector: 'Page',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [PageStateService],
+                    imports: [
+                        NavigationContainerComponent,
+                        NavigationFlyoutComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
                     host: {
                         '[class]': 'hostClasses()',
                         '[attr.data-page-variant]': 'variant()',
                         '[attr.data-page-height]': 'height()',
                         '[attr.data-page-scroll]': 'scroll()',
+                        '[attr.data-page-appearance]': 'appearance()',
                         '[attr.data-page-position]': 'resolvedPosition()',
                         '[attr.data-page-side-mode]': 'resolvedSideMode()',
                         '[attr.data-page-side-open]': 'page.sideOpen()',
@@ -349,9 +569,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
 
       <ng-content select="PageFooter" />
     </div>
+
+    @if (showsAppsLauncher()) {
+      <Navigation
+        [id]="launcherNavId"
+        [data]="appsNavData()"
+        ariaLabel="Application navigation"
+        [class]="appsLauncherHostClass()">
+        <NavigationFlyout
+          [icon]="appsIcon()"
+          icon-only
+          trigger-variant="plain"
+          [nav-appearance]="appsLauncherAppearance()"
+          [label]="appsLabel()">
+          @if (appsBrand(); as brand) {
+            <NavigationHeader>
+              <LayoutBrand [brand]="brand" />
+            </NavigationHeader>
+          }
+          @if (appsUser(); as user) {
+            <NavigationFooter class="px-3">
+              <LayoutUser [user]="user" />
+            </NavigationFooter>
+          }
+        </NavigationFlyout>
+      </Navigation>
+    }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { projectedSide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PageSideComponent), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sideMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideMode", required: false }] }], sideOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOpen", required: false }] }], sideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideWidth", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], sideOpenChange: [{ type: i0.Output, args: ["sideOpenChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { projectedSide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PageSideComponent), { isSignal: true }] }], projectedHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PageHeaderComponent), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sideMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideMode", required: false }] }], sideOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOpen", required: false }] }], sideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideWidth", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], sideOpenChange: [{ type: i0.Output, args: ["sideOpenChange"] }], appsLauncher: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsLauncher", required: false }] }], appsNavId: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsNavId", required: false }] }], appsIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsIcon", required: false }] }], appsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsLabel", required: false }] }] } });
 
 class PageSideToggleComponent {
     page = inject(PageStateService);
@@ -406,104 +652,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
 
-function buildPageBodyClasses(scroll, customClass) {
-    return cn('block min-w-0', scroll === 'content' && 'h-full min-h-0 overflow-auto', scroll === 'page' && 'overflow-visible', customClass);
-}
-class PageHeaderComponent {
-    page = inject(PageStateService, { optional: true });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    resolvedHeight = computed(() => this.page?.height() ?? PAGE_DEFAULT_HEIGHT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block shrink-0 border-b border-border bg-background', this.class(), this.resolvedHeight() === 'fix' && 'h-12 overflow-hidden'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageHeaderComponent, isStandalone: true, selector: "PageHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "header" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'PageHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'classes()',
-                        'data-page-slot': 'header',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class PageContentComponent {
-    page = inject(PageStateService, { optional: true });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    resolvedScroll = computed(() => this.page?.scroll() ?? PAGE_DEFAULT_SCROLL, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
-    classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageContentComponent, isStandalone: true, selector: "PageContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "content" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'PageContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'classes()',
-                        'data-page-slot': 'content',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class PageDashboardComponent {
-    page = inject(PageStateService, { optional: true });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    resolvedScroll = computed(() => this.page?.scroll() ?? PAGE_DEFAULT_SCROLL, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
-    classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageDashboardComponent, isStandalone: true, selector: "PageDashboard", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "dashboard" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageDashboardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'PageDashboard',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'classes()',
-                        'data-page-slot': 'dashboard',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class PageFooterComponent {
-    page = inject(PageStateService, { optional: true });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    resolvedHeight = computed(() => this.page?.height() ?? PAGE_DEFAULT_HEIGHT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block shrink-0 border-t border-border bg-background', this.class(), this.resolvedHeight() === 'fix' && 'h-12 overflow-hidden'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageFooterComponent, isStandalone: true, selector: "PageFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "footer" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'PageFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'classes()',
-                        'data-page-slot': 'footer',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_VARIANT, PAGE_HEIGHT_VALUES, PAGE_SCROLL_VALUES, PAGE_SIDE_MODES, PAGE_SIDE_POSITIONS, PAGE_VARIANTS, PageComponent, PageContentComponent, PageDashboardComponent, PageFooterComponent, PageHeaderComponent, PageSideComponent, PageSideToggleComponent, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
+export { PAGE_APPEARANCES, PAGE_DEFAULT_APPEARANCE, PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_VARIANT, PAGE_HEIGHT_VALUES, PAGE_SCROLL_VALUES, PAGE_SIDE_MODES, PAGE_SIDE_POSITIONS, PAGE_VARIANTS, PageComponent, PageContentComponent, PageDashboardComponent, PageFooterComponent, PageHeaderComponent, PageSideComponent, PageSideToggleComponent, isUiPageAppearance, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };