@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -1,7 +1,365 @@
-export * from '@ojiepermana/angular-theme/page/root';
+import * as i0 from '@angular/core';
+import { inject, contentChild, input, output, booleanAttribute, computed, effect, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationHeaderComponent, NavigationFooterComponent } from '@ojiepermana/angular/navigation';
+import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
+import { LayoutService } from '@ojiepermana/angular/theme/layout';
+import { LayoutIdentityService, LayoutBrand, LayoutUser } from '@ojiepermana/angular/theme/layout/wrapper';
+import { PageFilterComponent } from '@ojiepermana/angular/theme/page/filter';
+import { PageHeaderComponent } from '@ojiepermana/angular/theme/page/slots';
+import { PageSideComponent } from '@ojiepermana/angular/theme/page/side';
+import { PageStateService, PAGE_DEFAULT_VARIANT, PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_APPEARANCE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_FILTER_PLACEMENT, PAGE_DEFAULT_FILTER_WIDTH } from '@ojiepermana/angular/theme/page/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/** Instance counter behind each apps launcher's unique id, so several live `Page`s cannot collide on `claimId`. */
+let pageAppsLauncherInstanceId = 0;
+class PageComponent {
+    page = inject(PageStateService);
+    layout = inject(LayoutService, { optional: true });
+    navigation = inject(NAVIGATION_ADAPTER, { 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 */ []));
+    projectedFilter = contentChild(PageFilterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedFilter" }] : /* 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 */
+    ...(ngDevMode ? [{ debugName: "sideMode" }] : /* istanbul ignore next */ []));
+    sideOpen = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOpen" }] : /* istanbul ignore next */ []));
+    sideWidth = input(PAGE_DEFAULT_SIDE_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideWidth" }] : /* istanbul ignore next */ []));
+    /** Controlled state for a drawer/overlay `PageFilter`. `null` is uncontrolled — the toggle, backdrop, and Esc drive it. */
+    filterOpen = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterOpen" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    sideOpenChange = output();
+    filterOpenChange = output();
+    /** Under the `empty` layout, show the apps button (a flyout of the main navigation) in the top-right corner. `false` turns it off. */
+    appsLauncher = input(true, { ...(ngDevMode ? { debugName: "appsLauncher" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Id of the navigation the apps launcher surfaces (`main` by default). */
+    appsNavId = input('main', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsNavId" }] : /* istanbul ignore next */ []));
+    /** Material symbol for the apps launcher button. */
+    appsIcon = input('apps', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsIcon" }] : /* istanbul ignore next */ []));
+    /** Label and `aria-label` for the icon-only apps launcher button. */
+    appsLabel = input('Open navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the backdrop button that dismisses an open overlay panel. */
+    overlayCloseLabel = input('Close overlay panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayCloseLabel" }] : /* 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 */
+    ...(ngDevMode ? [{ debugName: "resolvedSideMode" }] : /* istanbul ignore next */ []));
+    isLeftSide = computed(() => this.resolvedPosition() === 'left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLeftSide" }] : /* istanbul ignore next */ []));
+    isRightSide = computed(() => this.resolvedPosition() === 'right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRightSide" }] : /* istanbul ignore next */ []));
+    // Filter — resolusi dibaca langsung dari `PageFilter` yang diprojeksikan (reactive content query).
+    // Resolusi filter dibaca dari `PageFilter` yang diprojeksikan, lalu fall back ke page-state
+    // (diisi `registerFilter`), lalu default — pola seragam agar Page & PageFilter selalu sepakat.
+    hasFilter = computed(() => this.projectedFilter() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFilter" }] : /* istanbul ignore next */ []));
+    filterPlacement = computed(() => this.projectedFilter()?.placement() ??
+        this.page.filterPlacement() ??
+        PAGE_DEFAULT_FILTER_PLACEMENT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPlacement" }] : /* istanbul ignore next */ []));
+    /** Mode efektif: `stacked` selalu `sticky`; `side` memakai mode pada `PageFilter`. */
+    filterMode = computed(() => this.filterPlacement() === 'stacked'
+        ? 'sticky'
+        : (this.projectedFilter()?.mode() ?? this.page.filterMode()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
+    filterPosition = computed(() => this.projectedFilter()?.position() ?? this.page.filterPosition(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPosition" }] : /* istanbul ignore next */ []));
+    filterWidthVar = computed(() => this.projectedFilter()?.width() ?? this.page.filterWidth() ?? PAGE_DEFAULT_FILTER_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterWidthVar" }] : /* istanbul ignore next */ []));
+    showsSideOverlayBackdrop = computed(() => this.variant() === 'side' && this.resolvedSideMode() === 'overlay' && this.page.sideOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsSideOverlayBackdrop" }] : /* istanbul ignore next */ []));
+    showsFilterOverlayBackdrop = computed(() => this.hasFilter() && this.filterMode() === 'overlay' && this.page.filterOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsFilterOverlayBackdrop" }] : /* istanbul ignore next */ []));
+    showsOverlayBackdrop = computed(() => this.showsSideOverlayBackdrop() || this.showsFilterOverlayBackdrop(), /* @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 */
+    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    bodyClasses = computed(() => {
+        if (this.variant() !== 'side') {
+            return cn('relative min-w-0', this.scroll() === 'content' && 'min-h-0');
+        }
+        const sideMode = this.resolvedSideMode();
+        const position = this.resolvedPosition();
+        if (sideMode === 'sticky') {
+            return cn('grid min-w-0', this.scroll() === 'content' && 'min-h-0', position === 'left'
+                ? 'grid-cols-[var(--page-side-width)_minmax(0,1fr)]'
+                : 'grid-cols-[minmax(0,1fr)_var(--page-side-width)]');
+        }
+        return cn('relative min-w-0', this.scroll() === 'content' && 'min-h-0');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Wrapper di sekitar `PageFilter` + `PageContent`. Tanpa filter, memakai `display: contents`
+     * agar transparan (perilaku body lama dipertahankan persis). Dengan filter, menjadi grid/flex
+     * yang menata filter (baris untuk `stacked`, kolom untuk `side`); drawer/overlay menjadikannya
+     * `relative` sebagai positioning context untuk panel yang mengambang.
+     */
+    contentRegionClasses = computed(() => {
+        if (!this.hasFilter()) {
+            return 'contents';
+        }
+        const scroll = this.scroll();
+        const mode = this.filterMode();
+        // drawer/overlay (side only): content mengisi penuh, filter mengambang di atasnya.
+        if (mode !== 'sticky') {
+            return cn('relative min-w-0', scroll === 'content' && 'min-h-0 h-full');
+        }
+        if (this.filterPlacement() === 'stacked') {
+            // content scroll: filter (auto) di atas, content (1fr) mengisi sisa tinggi & scroll sendiri.
+            // page scroll: aliran block biasa; filter dipin via `sticky top-0` pada elemennya.
+            return scroll === 'content'
+                ? 'grid min-w-0 min-h-0 h-full grid-rows-[auto_minmax(0,1fr)]'
+                : 'block min-w-0';
+        }
+        // side + sticky: filter sebagai kolom; posisi kanan dibalik via `order-last` pada elemen filter.
+        return cn('grid min-w-0', scroll === 'content' && 'min-h-0 h-full', this.filterPosition() === 'left'
+            ? 'grid-cols-[var(--page-filter-width)_minmax(0,1fr)]'
+            : 'grid-cols-[minmax(0,1fr)_var(--page-filter-width)]');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentRegionClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.page.registerRoot({
+                variant: this.variant(),
+                height: this.height(),
+                scroll: this.scroll(),
+                appearance: this.appearance(),
+                position: this.position(),
+                sideMode: this.sideMode(),
+                sideWidth: this.sideWidth(),
+            });
+        });
+        effect(() => {
+            this.page.setControlledSideOpen(this.sideOpen());
+        });
+        effect(() => {
+            this.page.setControlledFilterOpen(this.filterOpen());
+        });
+        // 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) {
+                return;
+            }
+            this.sideOpenChange.emit(this.page.sideOpenRequest() ?? false);
+        });
+        effect(() => {
+            const requestVersion = this.page.filterOpenRequestVersion();
+            if (requestVersion === 0) {
+                return;
+            }
+            this.filterOpenChange.emit(this.page.filterOpenRequest() ?? false);
+        });
+    }
+    handleBackdropClick() {
+        if (this.showsSideOverlayBackdrop()) {
+            this.page.closeSide();
+        }
+        if (this.showsFilterOverlayBackdrop()) {
+            this.page.closeFilter();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, filterOpen: { classPropertyName: "filterOpen", publicName: "filterOpen", 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 }, overlayCloseLabel: { classPropertyName: "overlayCloseLabel", publicName: "overlayCloseLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sideOpenChange: "sideOpenChange", filterOpenChange: "filterOpenChange" }, host: { attributes: { "data-page-root": "" }, 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()", "attr.data-page-filter-placement": "hasFilter() ? filterPlacement() : null", "attr.data-page-filter-mode": "hasFilter() ? filterMode() : null", "attr.data-page-filter-open": "hasFilter() ? page.filterOpen() : null", "style.--page-side-width": "sideWidth()", "style.--page-filter-width": "filterWidthVar()" } }, providers: [PageStateService], queries: [{ propertyName: "projectedSide", first: true, predicate: PageSideComponent, descendants: true, isSignal: true }, { propertyName: "projectedHeader", first: true, predicate: PageHeaderComponent, descendants: true, isSignal: true }, { propertyName: "projectedFilter", first: true, predicate: PageFilterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (showsOverlayBackdrop()) {
+      <button
+        type="button"
+        [attr.aria-label]="overlayCloseLabel()"
+        data-page-overlay-backdrop
+        class="absolute inset-0 z-20 bg-[hsl(var(--overlay-backdrop))]"
+        (click)="handleBackdropClick()"
+      ></button>
+    }
+
+    <div data-page-shell [class]="shellClasses()">
+      <ng-content select="PageHeader" />
+      <ng-content select="PageSideToggle, PageFilterToggle" />
+
+      <div [class]="bodyClasses()" data-page-body>
+        @if (variant() === 'side') {
+          <ng-content select="PageSide" />
+        }
+
+        <div [class]="contentRegionClasses()" data-page-content-region>
+          <ng-content select="PageFilter" />
+          <ng-content select="PageContent, PageDashboard" />
+        </div>
+      </div>
+
+      <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-type-style]="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-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", "panel-viewport", "trigger-class", "trigger-button-class", "nav-position", "nav-type-style", "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"], outputs: ["logout"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Page',
+                    providers: [PageStateService],
+                    imports: [
+                        NavigationContainerComponent,
+                        NavigationFlyoutComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        'data-page-root': '',
+                        '[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()',
+                        '[attr.data-page-filter-placement]': 'hasFilter() ? filterPlacement() : null',
+                        '[attr.data-page-filter-mode]': 'hasFilter() ? filterMode() : null',
+                        '[attr.data-page-filter-open]': 'hasFilter() ? page.filterOpen() : null',
+                        '[style.--page-side-width]': 'sideWidth()',
+                        '[style.--page-filter-width]': 'filterWidthVar()',
+                    },
+                    template: `
+    @if (showsOverlayBackdrop()) {
+      <button
+        type="button"
+        [attr.aria-label]="overlayCloseLabel()"
+        data-page-overlay-backdrop
+        class="absolute inset-0 z-20 bg-[hsl(var(--overlay-backdrop))]"
+        (click)="handleBackdropClick()"
+      ></button>
+    }
+
+    <div data-page-shell [class]="shellClasses()">
+      <ng-content select="PageHeader" />
+      <ng-content select="PageSideToggle, PageFilterToggle" />
+
+      <div [class]="bodyClasses()" data-page-body>
+        @if (variant() === 'side') {
+          <ng-content select="PageSide" />
+        }
+
+        <div [class]="contentRegionClasses()" data-page-content-region>
+          <ng-content select="PageFilter" />
+          <ng-content select="PageContent, PageDashboard" />
+        </div>
+      </div>
+
+      <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-type-style]="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 }] }], projectedHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PageHeaderComponent), { isSignal: true }] }], projectedFilter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PageFilterComponent), { 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 }] }], filterOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOpen", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], sideOpenChange: [{ type: i0.Output, args: ["sideOpenChange"] }], filterOpenChange: [{ type: i0.Output, args: ["filterOpenChange"] }], 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 }] }], overlayCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayCloseLabel", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { PageComponent };

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

@@ -1,7 +1,202 @@
-export * from '@ojiepermana/angular-theme/page/side';
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, effect, untracked, Component, output } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { PageStateService, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_SCROLL, ɵsetupOverlayFocusManagement as _setupOverlayFocusManagement } from '@ojiepermana/angular/theme/page/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+let nextPageSideId = 0;
+class PageSideComponent {
+    document = inject(DOCUMENT, { optional: true });
+    host = inject((ElementRef));
+    page = inject(PageStateService);
+    resolvedId = `page-side-${++nextPageSideId}`;
+    mode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    position = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    width = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    closeOnEsc = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnEsc" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the panel in `drawer`/`overlay` mode (set as the dialog's `aria-label`). */
+    ariaLabel = input('Side panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    resolvedMode = computed(() => this.mode() ?? this.page.sideMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    resolvedPosition = computed(() => this.position() ?? this.page.position(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []));
+    resolvedWidth = computed(() => this.width() ?? this.page.sideWidth() ?? PAGE_DEFAULT_SIDE_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
+    isSticky = computed(() => this.resolvedMode() === 'sticky', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []));
+    isDrawer = computed(() => this.resolvedMode() === 'drawer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDrawer" }] : /* istanbul ignore next */ []));
+    isOverlay = computed(() => this.resolvedMode() === 'overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
+    /** Mode mengambang (drawer/overlay) — bersifat dialog dan butuh manajemen fokus + `inert` saat tertutup. */
+    isInteractive = computed(() => this.isDrawer() || this.isOverlay(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
+    resolvedScroll = computed(() => this.page.scroll() ?? PAGE_DEFAULT_SCROLL, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
+    ariaHidden = computed(() => !this.isSticky() && !this.page.sideOpen() ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
+    /** Saat panel mengambang tertutup, `inert` mengeluarkan isinya dari tab order & pohon aksesibilitas (AXE). */
+    inertWhenClosed = computed(() => this.isInteractive() && !this.page.sideOpen() ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inertWhenClosed" }] : /* istanbul ignore next */ []));
+    dialogRole = computed(() => (this.isInteractive() ? 'dialog' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogRole" }] : /* istanbul ignore next */ []));
+    ariaModal = computed(() => (this.isOverlay() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaModal" }] : /* istanbul ignore next */ []));
+    dialogLabel = computed(() => (this.isInteractive() ? this.ariaLabel() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
+    dialogTabindex = computed(() => (this.isInteractive() ? '-1' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogTabindex" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const position = this.resolvedPosition();
+        const sideOpen = this.page.sideOpen();
+        return cn('block min-h-0 border-border bg-background', this.resolvedScroll() === 'content' && 'h-full overflow-auto', this.resolvedScroll() === 'page' && 'overflow-visible', this.isSticky() && 'shrink-0 w-[var(--page-side-width)]', 
+        // Urutan DOM body = rail-lalu-content; `left` tak perlu reorder, `right` mendorong rail ke kolom kedua.
+        this.isSticky() && position === 'left' && 'border-r', this.isSticky() && position === 'right' && 'order-last border-l', this.isDrawer() &&
+            'absolute inset-y-0 z-20 w-[var(--page-side-width)] border shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none', this.isDrawer() &&
+            position === 'left' &&
+            (sideOpen ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isDrawer() &&
+            position === 'right' &&
+            (sideOpen ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.isOverlay() &&
+            'absolute inset-y-0 z-30 w-[var(--page-side-width)] border shadow-md transition-transform duration-200 ease-out motion-reduce:transition-none', this.isOverlay() &&
+            position === 'left' &&
+            (sideOpen ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isOverlay() &&
+            position === 'right' &&
+            (sideOpen ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.class());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        _setupOverlayFocusManagement({
+            document: this.document,
+            host: this.host.nativeElement,
+            isOpen: this.page.sideOpen,
+            isInteractive: this.isInteractive,
+            isModal: this.isOverlay,
+            takeReturnFocus: () => this.page.takeSideReturnFocus(),
+        });
+        effect(() => {
+            this.page.registerSide({
+                mode: this.resolvedMode(),
+                position: this.resolvedPosition(),
+                width: this.resolvedWidth(),
+                id: this.resolvedId,
+            });
+        });
+        effect((onCleanup) => {
+            if (!this.closeOnEsc() || this.isSticky()) {
+                return;
+            }
+            const defaultView = this.document?.defaultView;
+            if (!defaultView) {
+                return;
+            }
+            const handler = (event) => {
+                if (event.key !== 'Escape') {
+                    return;
+                }
+                if (!untracked(() => this.page.sideOpen())) {
+                    return;
+                }
+                untracked(() => {
+                    this.page.closeSide();
+                });
+            };
+            defaultView.addEventListener('keydown', handler);
+            onCleanup(() => defaultView.removeEventListener('keydown', handler));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: PageSideComponent, isStandalone: true, selector: "PageSide", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId", "attr.data-page-slot": "\"side\"", "attr.data-page-side-mode": "resolvedMode()", "attr.data-page-side-open": "page.sideOpen()", "attr.data-page-position": "resolvedPosition()", "attr.aria-hidden": "ariaHidden()", "attr.inert": "inertWhenClosed()", "attr.role": "dialogRole()", "attr.aria-modal": "ariaModal()", "attr.aria-label": "dialogLabel()", "attr.tabindex": "dialogTabindex()", "style.--page-side-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageSideComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PageSide',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'resolvedId',
+                        '[attr.data-page-slot]': '"side"',
+                        '[attr.data-page-side-mode]': 'resolvedMode()',
+                        '[attr.data-page-side-open]': 'page.sideOpen()',
+                        '[attr.data-page-position]': 'resolvedPosition()',
+                        '[attr.aria-hidden]': 'ariaHidden()',
+                        '[attr.inert]': 'inertWhenClosed()',
+                        '[attr.role]': 'dialogRole()',
+                        '[attr.aria-modal]': 'ariaModal()',
+                        '[attr.aria-label]': 'dialogLabel()',
+                        '[attr.tabindex]': 'dialogTabindex()',
+                        '[style.--page-side-width]': 'resolvedWidth()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class PageSideToggleComponent {
+    page = inject(PageStateService);
+    ariaLabel = input('Toggle page side', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    toggled = output();
+    hostClasses = computed(() => cn('inline-flex shrink-0', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    buttonClasses = computed(() => cn('inline-flex h-9 min-w-9 items-center justify-center rounded-base border border-border bg-background px-3 text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
+    handleClick(event) {
+        if (!this.page.sideOpen() && event.currentTarget instanceof HTMLElement) {
+            this.page.setSideReturnFocus(event.currentTarget);
+        }
+        this.toggled.emit(this.page.toggleSide());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageSideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: PageSideToggleComponent, isStandalone: true, selector: "PageSideToggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { attributes: { "data-page-control": "side-toggle" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <button
+      type="button"
+      [class]="buttonClasses()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-controls]="page.sideId()"
+      [attr.aria-expanded]="page.sideOpen()"
+      (click)="handleClick($event)"
+    >
+      <ng-content>
+        <span aria-hidden="true" class="text-lg leading-none">☰</span>
+      </ng-content>
+    </button>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageSideToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PageSideToggle',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        'data-page-control': 'side-toggle',
+                    },
+                    template: `
+    <button
+      type="button"
+      [class]="buttonClasses()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-controls]="page.sideId()"
+      [attr.aria-expanded]="page.sideOpen()"
+      (click)="handleClick($event)"
+    >
+      <ng-content>
+        <span aria-hidden="true" class="text-lg leading-none">☰</span>
+      </ng-content>
+    </button>
+  `,
+                }]
+        }], 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"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { PageSideComponent, PageSideToggleComponent };