@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs

@@ -1,7 +1,1048 @@
-export * from '@ojiepermana/angular-theme/layout/wrapper';
+import * as i0 from '@angular/core';
+import { signal, Service, input, booleanAttribute, Component, output, computed, model, inject, viewChild, effect } from '@angular/core';
+import { NavigationHeaderInitialComponent, NavigationHeaderTitleComponent, NavigationFooterActionComponent, NavigationFooterInitialComponent, NavigationFooterTitleComponent, NavigationSidebarComponent, NavigationHeaderComponent, NavigationFooterComponent, NavigationAsideFooterDirective, NavigationDockbarComponent, NavigationNavbarComponent, NavigationFlyoutComponent, NavigationContainerComponent } from '@ojiepermana/angular/navigation';
+import { IconComponent } from '@ojiepermana/angular/component/icon';
+import { ThemeSettingsComponent } from '@ojiepermana/angular/theme/component/settings';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { LayoutComponent, LayoutVerticalComponent, LayoutHorizontalComponent, LayoutEmptyComponent, LayoutFluidComponent, LayoutNavigationComponent, LayoutContentComponent } from '@ojiepermana/angular/theme/layout';
+import { LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_WIDTH, LAYOUT_DEFAULT_TYPE } from '@ojiepermana/angular/theme/layout/types';
+import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * The identity shape the layout wrappers consume. The library defines the structure
+ * only; the concrete brand and user values come from the consumer as inputs.
+ */
+
+/** Registry key used only while `LayoutWrapperDefault` renders its desktop nav. */
+const LAYOUT_DESKTOP_NAVIGATION_DATA_ID = '__layout-desktop-navigation';
+/**
+ * Registry of the brand and user identity a shell publishes (`LayoutWrapperDefault`, for
+ * one). Other surfaces — the apps launcher in `Page`, say — read it so they show the same
+ * brand and user as the nav flyout without taking inputs of their own.
+ */
+class LayoutIdentityService {
+    brandState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandState" }] : /* istanbul ignore next */ []));
+    userState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userState" }] : /* istanbul ignore next */ []));
+    brand = this.brandState.asReadonly();
+    user = this.userState.asReadonly();
+    setBrand(brand) {
+        this.brandState.set(brand);
+    }
+    setUser(user) {
+        this.userState.set(user);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutIdentityService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: LayoutIdentityService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutIdentityService, decorators: [{
+            type: Service
+        }] });
+
+/**
+ * The brand slot for `<NavigationHeader>`: initials or logo plus a title. Purely
+ * input-driven.
+ *
+ * `compact` (dockbar, or an icon-only rail) hides the title. `host.class = 'contents'`
+ * keeps `NavigationHeaderInitial` and `NavigationHeaderTitle` as direct flex children of
+ * the header row; the title still auto-hides on a collapsed sidebar, because
+ * `NAVIGATION_SHELL` reaches `<Navigation>` through the live injector tree.
+ */
+class LayoutBrand {
+    /** Identitas brand (nama, ikon, judul, subjudul). */
+    brand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    /** Sembunyikan judul, sisakan inisial saja (dockbar / rail ikon-only). */
+    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutBrand, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LayoutBrand, isStandalone: true, selector: "LayoutBrand", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationHeaderInitial [name]="brand().name" [icon]="brand().icon" [compact]="compact()" />
+    @if (!compact()) {
+      <NavigationHeaderTitle [title]="brand().title" [subtitle]="brand().subtitle" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationHeaderInitialComponent, selector: "NavigationHeaderInitial", inputs: ["name", "src", "initials", "icon", "compact", "class"] }, { kind: "component", type: NavigationHeaderTitleComponent, selector: "NavigationHeaderTitle", inputs: ["title", "subtitle", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutBrand, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutBrand',
+                    imports: [NavigationHeaderInitialComponent, NavigationHeaderTitleComponent],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationHeaderInitial [name]="brand().name" [icon]="brand().icon" [compact]="compact()" />
+    @if (!compact()) {
+      <NavigationHeaderTitle [title]="brand().title" [subtitle]="brand().subtitle" />
+    }
+  `,
+                }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
+
+/**
+ * The user slot for `<NavigationFooter>`: an optional identity plus the logout action.
+ * Purely input-driven.
+ *
+ * `detailed` shows initials and name (a full sidebar); without it, only the logout
+ * button. `host.class = 'contents'` makes the children direct flex children of the
+ * footer, so `ml-auto` and the auto-hide on collapse (through `NAVIGATION_SHELL`) still
+ * apply.
+ *
+ * The logout button only emits `(logout)`. Endpoint, cookie, and redirect target differ
+ * per application, so the effect is entirely the consumer's — the library calls no
+ * endpoint and performs no navigation. A consumer that never binds `(logout)` still
+ * renders without error; the button simply does nothing, exactly as before this output
+ * existed.
+ */
+class LayoutUser {
+    /** Identitas user (nama + email). */
+    user = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Show the user identity (initials and name), not only the logout button. */
+    detailed = input(false, { ...(ngDevMode ? { debugName: "detailed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name for the logout button. */
+    logoutLabel = input('Logout', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoutLabel" }] : /* istanbul ignore next */ []));
+    /** Material symbol for the logout button. */
+    logoutIcon = input('logout', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoutIcon" }] : /* istanbul ignore next */ []));
+    /** The user pressed logout. The effect is the consumer's; the library does not navigate. */
+    logout = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LayoutUser, isStandalone: true, selector: "LayoutUser", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, detailed: { classPropertyName: "detailed", publicName: "detailed", isSignal: true, isRequired: false, transformFunction: null }, logoutLabel: { classPropertyName: "logoutLabel", publicName: "logoutLabel", isSignal: true, isRequired: false, transformFunction: null }, logoutIcon: { classPropertyName: "logoutIcon", publicName: "logoutIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @if (detailed()) {
+      <NavigationFooterInitial [name]="user().name" />
+      <NavigationFooterTitle class="flex-1" [title]="user().name" [subtitle]="user().email" />
+    }
+
+    <NavigationFooterAction class="ml-auto">
+      <button
+        type="button"
+        [attr.aria-label]="logoutLabel()"
+        [attr.title]="logoutLabel()"
+        class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        (click)="logout.emit()"
+      >
+        <Icon [name]="logoutIcon()" [size]="18" />
+      </button>
+      <ThemeSettings [trigger-icon-only]="true" class="size-8! min-h-8!" />
+    </NavigationFooterAction>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: ThemeSettingsComponent, selector: "ThemeSettings", inputs: ["open", "trigger", "triggerLabel", "trigger-icon-only", "show-trigger", "side", "class"], outputs: ["openChange"] }, { kind: "component", type: NavigationFooterActionComponent, selector: "NavigationFooterAction", inputs: ["class"] }, { kind: "component", type: NavigationFooterInitialComponent, selector: "NavigationFooterInitial", inputs: ["name", "src", "initials", "icon", "class"] }, { kind: "component", type: NavigationFooterTitleComponent, selector: "NavigationFooterTitle", inputs: ["title", "subtitle", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutUser, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutUser',
+                    imports: [
+                        IconComponent,
+                        ThemeSettingsComponent,
+                        NavigationFooterActionComponent,
+                        NavigationFooterInitialComponent,
+                        NavigationFooterTitleComponent,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    @if (detailed()) {
+      <NavigationFooterInitial [name]="user().name" />
+      <NavigationFooterTitle class="flex-1" [title]="user().name" [subtitle]="user().email" />
+    }
+
+    <NavigationFooterAction class="ml-auto">
+      <button
+        type="button"
+        [attr.aria-label]="logoutLabel()"
+        [attr.title]="logoutLabel()"
+        class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        (click)="logout.emit()"
+      >
+        <Icon [name]="logoutIcon()" [size]="18" />
+      </button>
+      <ThemeSettings [trigger-icon-only]="true" class="size-8! min-h-8!" />
+    </NavigationFooterAction>
+  `,
+                }]
+        }], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], detailed: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailed", required: false }] }], logoutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoutLabel", required: false }] }], logoutIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoutIcon", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+/**
+ * Nav type: a collapsible vertical sidebar (the default). Brand in the header, user
+ * identity in the footer.
+ *
+ * Horizontal dividers: the sidebar ALWAYS uses the borders `NavigationHeader`
+ * (`border-b`) and `NavigationFooter` (`border-t`) bring, `border-rail` included.
+ * Layout's inset accent rail (`top-12`/`bottom-12`) sits behind a frame that is now
+ * solid (`bg-background`) and is therefore invisible inside it; those explicit borders
+ * are what keep the header and footer lines visible and running straight into the
+ * content column (both `h-12`), consistent with {@link LayoutNavDockbar}.
+ *
+ * `host.class = 'contents'` makes `<NavigationSidebar>` an effective child of
+ * `<Navigation>` (h-full, shell classes), while `NAVIGATION_SHELL` still reaches it
+ * through the live injector tree and `<NavigationHeader>` stays a direct child for the
+ * library's content projection.
+ */
+class LayoutNavSidebar {
+    brand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    user = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Appearance from the shell (`[appearance]`); decides the separator border weight. */
+    appearance = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    navTypeMode = input('default', { ...(ngDevMode ? { debugName: "navTypeMode" } : /* istanbul ignore next */ {}), alias: 'nav-type-mode' });
+    /** Forwarded from `<LayoutUser>`; the effect is the consumer's. */
+    logout = output();
+    isBorderRail = computed(() => this.appearance() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    isCollapsed = computed(() => this.navTypeMode() === 'collapsed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` = `--layout-rail-width` (selaras rail layout), `flat` 1px. */
+    shellClass = computed(() => this.isBorderRail()
+        ? 'border-r-[length:var(--layout-rail-width)] border-border'
+        : 'border-r border-border', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutNavSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutNavSidebar, isStandalone: true, selector: "LayoutNavSidebar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, navTypeMode: { classPropertyName: "navTypeMode", publicName: "nav-type-mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationSidebar nav-sidebar-collapse [collapsed]="isCollapsed()" [class]="shellClass()">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" detailed (logout)="logout.emit()" />
+      </NavigationFooter>
+    </NavigationSidebar>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationSidebarComponent, selector: "NavigationSidebar", inputs: ["position", "collapsed", "nav-sidebar-collapse", "previewExpanded", "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: LayoutNavSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavSidebar',
+                    imports: [
+                        NavigationSidebarComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationSidebar nav-sidebar-collapse [collapsed]="isCollapsed()" [class]="shellClass()">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" detailed (logout)="logout.emit()" />
+      </NavigationFooter>
+    </NavigationSidebar>
+  `,
+                }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], navTypeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type-mode", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+const EMPTY_NAVIGATION_BADGE_CONTEXT$1 = Object.freeze({});
+/**
+ * Nav type: a vertical icon rail (dockbar). A compact brand (initials only) in the
+ * header, the user's initials in the rail footer (title and actions auto-hide, because
+ * the rail is always collapsed), and the full identity (name, email, logout) in the
+ * aside footer — together with the rail initials they form one footer row, like an
+ * expanded sidebar.
+ *
+ * Horizontal dividers: unlike the sidebar, which leaves the separator to Layout's inset
+ * accent rail at `top-12`/`bottom-12` under `border-rail`, the dockbar ALWAYS uses the
+ * borders `NavigationHeader`/`NavigationFooter` bring. The dockbar aside covers the inset
+ * rail line with its own opaque background, so those explicit borders are what keep the
+ * separator running straight from rail to aside (header and footer are both `h-12`).
+ * See {@link LayoutNavSidebar} for why `host.class = 'contents'`.
+ */
+class LayoutNavDockbar {
+    brand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    user = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Appearance from the shell (`[appearance]`); decides the separator border weight. */
+    appearance = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    navTypeMode = input('default', { ...(ngDevMode ? { debugName: "navTypeMode" } : /* istanbul ignore next */ {}), alias: 'nav-type-mode' });
+    /** Opt-in route-aware header; ketika aktif, header route menggantikan compact brand. */
+    dockbarRouteContext = input(null, { ...(ngDevMode ? { debugName: "dockbarRouteContext" } : /* istanbul ignore next */ {}), alias: 'dockbar-route-context' });
+    /** The generic badge registry forwarded to `NavigationDockbar`. */
+    dockbarBadgeContext = input(EMPTY_NAVIGATION_BADGE_CONTEXT$1, { ...(ngDevMode ? { debugName: "dockbarBadgeContext" } : /* istanbul ignore next */ {}), alias: 'dockbar-badge' });
+    /** Forwarded from the rail and aside footer logout buttons; the effect is the consumer's. */
+    logout = output();
+    isBorderRail = computed(() => this.appearance() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    dockbarMode = computed(() => this.navTypeMode() === 'drawer' ? 'drawer' : 'sticky', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dockbarMode" }] : /* istanbul ignore next */ []));
+    routeContextEnabled = computed(() => {
+        const context = this.dockbarRouteContext();
+        return context !== null && context !== false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routeContextEnabled" }] : /* istanbul ignore next */ []));
+    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` = `--layout-rail-width` (selaras rail layout), `flat` 1px. */
+    shellClass = computed(() => this.isBorderRail()
+        ? 'border-r-[length:var(--layout-rail-width)] border-border'
+        : 'border-r border-border', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutNavDockbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LayoutNavDockbar, isStandalone: true, selector: "LayoutNavDockbar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, navTypeMode: { classPropertyName: "navTypeMode", publicName: "nav-type-mode", isSignal: true, isRequired: false, transformFunction: null }, dockbarRouteContext: { classPropertyName: "dockbarRouteContext", publicName: "dockbar-route-context", isSignal: true, isRequired: false, transformFunction: null }, dockbarBadgeContext: { classPropertyName: "dockbarBadgeContext", publicName: "dockbar-badge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationDockbar
+      [mode]="dockbarMode()"
+      [dockbar-route-context]="dockbarRouteContext()"
+      [dockbar-badge]="dockbarBadgeContext()"
+      [class]="shellClass()"
+    >
+      @if (!routeContextEnabled()) {
+        <NavigationHeader>
+          <LayoutBrand [brand]="brand()" compact />
+        </NavigationHeader>
+      }
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" detailed (logout)="logout.emit()" />
+      </NavigationFooter>
+
+      <ng-template NavigationAsideFooter>
+        <div class="flex min-w-0 flex-col justify-center">
+          <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{
+            user().name
+          }}</span>
+          <span class="block truncate text-xs leading-tight text-muted-foreground">{{
+            user().email
+          }}</span>
+        </div>
+
+        <button
+          type="button"
+          aria-label="Logout"
+          title="Logout"
+          class="ml-auto inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          (click)="logout.emit()"
+        >
+          <Icon name="logout" [size]="18" />
+        </button>
+      </ng-template>
+    </NavigationDockbar>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "directive", type: NavigationAsideFooterDirective, selector: "ng-template[NavigationAsideFooter]" }, { kind: "component", type: NavigationDockbarComponent, selector: "NavigationDockbar", inputs: ["mode", "position", "dockbar-route-context", "dockbar-badge", "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: LayoutNavDockbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavDockbar',
+                    imports: [
+                        IconComponent,
+                        NavigationAsideFooterDirective,
+                        NavigationDockbarComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationDockbar
+      [mode]="dockbarMode()"
+      [dockbar-route-context]="dockbarRouteContext()"
+      [dockbar-badge]="dockbarBadgeContext()"
+      [class]="shellClass()"
+    >
+      @if (!routeContextEnabled()) {
+        <NavigationHeader>
+          <LayoutBrand [brand]="brand()" compact />
+        </NavigationHeader>
+      }
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" detailed (logout)="logout.emit()" />
+      </NavigationFooter>
+
+      <ng-template NavigationAsideFooter>
+        <div class="flex min-w-0 flex-col justify-center">
+          <span class="block truncate text-sm font-semibold leading-tight text-foreground">{{
+            user().name
+          }}</span>
+          <span class="block truncate text-xs leading-tight text-muted-foreground">{{
+            user().email
+          }}</span>
+        </div>
+
+        <button
+          type="button"
+          aria-label="Logout"
+          title="Logout"
+          class="ml-auto inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          (click)="logout.emit()"
+        >
+          <Icon name="logout" [size]="18" />
+        </button>
+      </ng-template>
+    </NavigationDockbar>
+  `,
+                }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], navTypeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type-mode", required: false }] }], dockbarRouteContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockbar-route-context", required: false }] }], dockbarBadgeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockbar-badge", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+/**
+ * Nav type: a top bar with inline items (navbar, horizontal). `appearance` follows the
+ * shell (`flat | border-rail`). See {@link LayoutNavSidebar} for why
+ * `host.class = 'contents'`.
+ */
+class LayoutNavNavbar {
+    brand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    user = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Appearance from the shell (`[nav-type-style]`). */
+    appearance = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Forwarded from `<LayoutUser>`; the effect is the consumer's. */
+    logout = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutNavNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutNavNavbar, isStandalone: true, selector: "LayoutNavNavbar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationNavbar [nav-type-style]="appearance()" class="border-b border-border">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" (logout)="logout.emit()" />
+      </NavigationFooter>
+    </NavigationNavbar>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationNavbarComponent, selector: "NavigationNavbar", inputs: ["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: LayoutNavNavbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavNavbar',
+                    imports: [
+                        NavigationNavbarComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationNavbar [nav-type-style]="appearance()" class="border-b border-border">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" (logout)="logout.emit()" />
+      </NavigationFooter>
+    </NavigationNavbar>
+  `,
+                }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+/**
+ * Nav type: a top bar with a flyout trigger button (horizontal). `appearance` follows the
+ * shell. See {@link LayoutNavSidebar} for why `host.class = 'contents'`.
+ */
+class LayoutNavFlyout {
+    brand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    user = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Appearance from the shell (`[nav-type-style]`). */
+    appearance = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Forwarded from `<LayoutUser>`; the effect is the consumer's. */
+    logout = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutNavFlyout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutNavFlyout, isStandalone: true, selector: "LayoutNavFlyout", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationFlyout
+      [nav-type-style]="appearance()"
+      label="Menu"
+      icon="apps"
+      class="border-b border-border"
+    >
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" (logout)="logout.emit()" />
+      </NavigationFooter>
+    </NavigationFlyout>
+  `, isInline: true, dependencies: [{ 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: LayoutNavFlyout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavFlyout',
+                    imports: [
+                        NavigationFlyoutComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationFlyout
+      [nav-type-style]="appearance()"
+      label="Menu"
+      icon="apps"
+      class="border-b border-border"
+    >
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" (logout)="logout.emit()" />
+      </NavigationFooter>
+    </NavigationFlyout>
+  `,
+                }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+/**
+ * Nav type: a brand-only sidebar for the `empty` and `fluid` variants, where
+ * `LayoutNavigation` hides the nav — so no collapse and no footer. See
+ * {@link LayoutNavSidebar} for why `host.class = 'contents'`.
+ */
+class LayoutNavMinimal {
+    brand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutNavMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutNavMinimal, isStandalone: true, selector: "LayoutNavMinimal", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationSidebar>
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+    </NavigationSidebar>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationSidebarComponent, selector: "NavigationSidebar", inputs: ["position", "collapsed", "nav-sidebar-collapse", "previewExpanded", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutNavMinimal, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavMinimal',
+                    imports: [NavigationSidebarComponent, NavigationHeaderComponent, LayoutBrand],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationSidebar>
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+    </NavigationSidebar>
+  `,
+                }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }] } });
+
+const EMPTY_NAVIGATION_BADGE_CONTEXT = Object.freeze({});
+/**
+ * A ready-made layout shell — the consumer supplies data through inputs instead of
+ * assembling `Layout > LayoutVertical/Horizontal/Empty/Fluid > LayoutNavigation >
+ * Navigation > nav type` by hand.
+ *
+ * ```html
+ * <LayoutWrapperDefault
+ *   [surface]="surface" [layout-appearance]="appearance" [width]="width"
+ *   [layout-type]="layoutType" [nav-type]="navType"
+ *   [data]="navItems" [brand]="brand" [user]="user"
+ *   (logout)="signOut()"
+ * >
+ *   <router-outlet />   <!-- page content is projected into LayoutContent -->
+ * </LayoutWrapperDefault>
+ * ```
+ *
+ * The `register*` defaults (LayoutService) stay the consumer's job; this wrapper is purely
+ * presentational — two axes (`effectiveLayoutType` → wrapper, `navKind` → nav type) over one
+ * shared skeleton. Injection stays sound: `<Navigation>` provides `NAVIGATION_SHELL` inside
+ * `#body`, and each nav type is `display:contents`, so `<NavigationXxx>` is an effective child
+ * of `<Navigation>`.
+ */
+class LayoutWrapperDefault {
+    /** Surface latar shell (mis. `grid`, `flat`). */
+    surface = input(LAYOUT_DEFAULT_SURFACE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    /** Appearance shell & nav (`flat | border-rail`). */
+    appearance = input(LAYOUT_DEFAULT_APPEARANCE, { ...(ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {}), alias: 'layout-appearance' });
+    /** Frame width (`full`, `container`, and so on). */
+    width = input(LAYOUT_DEFAULT_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Tipe layout dasar (`vertical | horizontal | empty | fluid`); `empty`/`fluid` override nav. */
+    layoutType = input(LAYOUT_DEFAULT_TYPE, { ...(ngDevMode ? { debugName: "layoutType" } : /* istanbul ignore next */ {}), alias: 'layout-type' });
+    /**
+     * The shell's navigation type. `desktop` only means anything on a horizontal frame:
+     * the titlebar becomes the primary chrome and the navigation area follows the
+     * content-focused `empty` behaviour.
+     */
+    navType = input('sidebar', { ...(ngDevMode ? { debugName: "navType" } : /* istanbul ignore next */ {}), alias: 'nav-type' });
+    /** Presentation mode for the active nav type (`collapsed` sidebar / `drawer` dockbar). */
+    navTypeMode = input('default', { ...(ngDevMode ? { debugName: "navTypeMode" } : /* istanbul ignore next */ {}), alias: 'nav-type-mode' });
+    /** Opt-in route-aware dockbar state; ignored by other navigation types. */
+    dockbarRouteContext = input(null, { ...(ngDevMode ? { debugName: "dockbarRouteContext" } : /* istanbul ignore next */ {}), alias: 'dockbar-route-context' });
+    /** Generic dockbar badge registry; ignored by sidebar/navbar/flyout. */
+    dockbarBadgeContext = input(EMPTY_NAVIGATION_BADGE_CONTEXT, { ...(ngDevMode ? { debugName: "dockbarBadgeContext" } : /* istanbul ignore next */ {}), alias: 'dockbar-badge' });
+    /** Item navigasi. */
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Identitas brand. */
+    brand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    /** Identitas user. */
+    user = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Id landmark konten utama sekaligus target skip link. */
+    contentId = input('main-content', { ...(ngDevMode ? { debugName: "contentId" } : /* istanbul ignore next */ {}), alias: 'content-id' });
+    /** Skip-link label; the consumer can localise it. */
+    skipLinkLabel = input('Skip to main content', { ...(ngDevMode ? { debugName: "skipLinkLabel" } : /* istanbul ignore next */ {}), alias: 'skip-link-label' });
+    /** Fokuskan landmark utama setelah route selesai berubah. */
+    focusOnNavigation = input(false, { ...(ngDevMode ? { debugName: "focusOnNavigation" } : /* istanbul ignore next */ {}), alias: 'focus-on-navigation' });
+    /** Controlled/uncontrolled state drawer navigasi mobile. */
+    mobileNavOpen = model(false, { ...(ngDevMode ? { debugName: "mobileNavOpen" } : /* istanbul ignore next */ {}), alias: 'mobile-nav-open' });
+    mobileNavLabel = input('Open navigation', { ...(ngDevMode ? { debugName: "mobileNavLabel" } : /* istanbul ignore next */ {}), alias: 'mobile-nav-label' });
+    closeMobileNavLabel = input('Close navigation', { ...(ngDevMode ? { debugName: "closeMobileNavLabel" } : /* istanbul ignore next */ {}), alias: 'close-mobile-nav-label' });
+    /**
+     * The user pressed logout in the navigation footer. Forwarded from every nav type that
+     * shows the user identity (`sidebar`, `dockbar`, `navbar`, `flyout`), the mobile drawer
+     * included, so one binding covers all of them. The library calls no endpoint and performs
+     * no navigation; what happens next is entirely the consumer's.
+     */
+    logout = output();
+    identity = inject(LayoutIdentityService);
+    navigation = inject(NAVIGATION_ADAPTER);
+    desktopNavigationDataOwner = {};
+    document = inject(DOCUMENT, { optional: true });
+    mobileNavTriggerRef = viewChild('mobileNavTrigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileNavTriggerRef" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Publikasikan identitas ke registry agar surface lain (mis. apps-launcher di `Page`)
+        // menampilkan brand/user yang sama dengan flyout nav.
+        effect(() => this.identity.setBrand(this.brand()));
+        effect(() => this.identity.setUser(this.user()));
+        // Desktop navigation has no in-layout <Navigation> node: its trigger belongs
+        // to the window titlebar. Publish the same data through a dedicated key so
+        // <Shell> can surface it without duplicating navbar/dockbar configurations.
+        effect((onCleanup) => {
+            if (this.navType() !== 'desktop') {
+                return;
+            }
+            this.navigation.publishData(LAYOUT_DESKTOP_NAVIGATION_DATA_ID, this.data(), this.desktopNavigationDataOwner);
+            onCleanup(() => this.navigation.clearData(LAYOUT_DESKTOP_NAVIGATION_DATA_ID, this.desktopNavigationDataOwner));
+        });
+        // Drawer tidak boleh tetap modal ketika viewport kembali ke desktop.
+        effect((onCleanup) => {
+            const media = this.document?.defaultView?.matchMedia?.('(min-width: 640px)');
+            if (!media) {
+                return;
+            }
+            const closeOnDesktop = (event) => {
+                if (event.matches) {
+                    this.mobileNavOpen.set(false);
+                }
+            };
+            closeOnDesktop(media);
+            media.addEventListener('change', closeOnDesktop);
+            onCleanup(() => media.removeEventListener('change', closeOnDesktop));
+        });
+    }
+    /**
+     * Classes for `<LayoutContent>`, chosen by the consumer (padding, say). Empty by
+     * default: the library no longer forces `p-6`; the consumer or `<Page>` decides spacing.
+     */
+    contentClassInput = input('', { ...(ngDevMode ? { debugName: "contentClassInput" } : /* istanbul ignore next */ {}), alias: 'content-class' });
+    /** Wrapper layout & nilai `<Layout [layout-type]>`: navbar/flyout = horizontal, sisanya vertical. */
+    effectiveLayoutType = computed(() => {
+        const layoutType = this.layoutType();
+        if (layoutType === 'empty' || layoutType === 'fluid') {
+            return layoutType;
+        }
+        return this.navType() === 'navbar' ||
+            this.navType() === 'flyout' ||
+            this.navType() === 'desktop'
+            ? 'horizontal'
+            : 'vertical';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLayoutType" }] : /* istanbul ignore next */ []));
+    /** Tipe nav di dalam `#body`: `empty`/`fluid` → `brand` (header-only); selain itu `nav-type`. */
+    navKind = computed(() => {
+        const layoutType = this.layoutType();
+        const navType = this.navType();
+        return layoutType === 'empty' || layoutType === 'fluid' || navType === 'desktop'
+            ? 'brand'
+            : navType;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navKind" }] : /* istanbul ignore next */ []));
+    /** Lebar host `<Navigation>`: penuh-tinggi (vertical) atau penuh-lebar (horizontal). */
+    navClass = computed(() => this.effectiveLayoutType() === 'horizontal' ? 'w-full' : 'h-full', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navClass" }] : /* istanbul ignore next */ []));
+    showsMobileNavigation = computed(() => {
+        if (this.navType() === 'desktop') {
+            return false;
+        }
+        const type = this.effectiveLayoutType();
+        return type === 'vertical' || type === 'horizontal';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsMobileNavigation" }] : /* istanbul ignore next */ []));
+    /** Internal shell owns responsive placement while primitives remain composition-safe. */
+    defaultShellClasses = computed(() => {
+        const type = this.effectiveLayoutType();
+        if (type === 'empty' || type === 'fluid' || this.navType() === 'desktop') {
+            return 'contents';
+        }
+        return cn('relative grid h-full min-h-0 w-full min-w-0 grid-cols-1 grid-rows-[3rem_minmax(0,1fr)]', type === 'horizontal'
+            ? 'sm:flex sm:flex-col'
+            : 'col-span-2 sm:grid-cols-[auto_minmax(0,1fr)] sm:grid-rows-1');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultShellClasses" }] : /* istanbul ignore next */ []));
+    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; padding diserahkan ke consumer. */
+    contentClass = computed(() => cn(this.effectiveLayoutType() === 'fluid' ? 'w-full max-w-3xl' : '', this.contentClassInput()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutWrapperDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LayoutWrapperDefault, isStandalone: true, selector: "LayoutWrapperDefault", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, navType: { classPropertyName: "navType", publicName: "nav-type", isSignal: true, isRequired: false, transformFunction: null }, navTypeMode: { classPropertyName: "navTypeMode", publicName: "nav-type-mode", isSignal: true, isRequired: false, transformFunction: null }, dockbarRouteContext: { classPropertyName: "dockbarRouteContext", publicName: "dockbar-route-context", isSignal: true, isRequired: false, transformFunction: null }, dockbarBadgeContext: { classPropertyName: "dockbarBadgeContext", publicName: "dockbar-badge", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "content-id", isSignal: true, isRequired: false, transformFunction: null }, skipLinkLabel: { classPropertyName: "skipLinkLabel", publicName: "skip-link-label", isSignal: true, isRequired: false, transformFunction: null }, focusOnNavigation: { classPropertyName: "focusOnNavigation", publicName: "focus-on-navigation", isSignal: true, isRequired: false, transformFunction: null }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobile-nav-open", isSignal: true, isRequired: false, transformFunction: null }, mobileNavLabel: { classPropertyName: "mobileNavLabel", publicName: "mobile-nav-label", isSignal: true, isRequired: false, transformFunction: null }, closeMobileNavLabel: { classPropertyName: "closeMobileNavLabel", publicName: "close-mobile-nav-label", isSignal: true, isRequired: false, transformFunction: null }, contentClassInput: { classPropertyName: "contentClassInput", publicName: "content-class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileNavOpen: "mobile-nav-openChange", logout: "logout" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "mobileNavTriggerRef", first: true, predicate: ["mobileNavTrigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <Layout
+      [surface]="surface()"
+      [layout-appearance]="appearance()"
+      [width]="width()"
+      [layout-type]="effectiveLayoutType()"
+    >
+      <!-- Skeleton bersama: dipakai ulang oleh setiap wrapper di @switch bawah. -->
+      <ng-template #body>
+        <div data-layout-default-shell [class]="defaultShellClasses()">
+          <a
+            [attr.href]="'#' + contentId()"
+            class="sr-only z-50 rounded-md bg-background px-3 py-2 text-sm text-foreground shadow-md focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            {{ skipLinkLabel() }}
+          </a>
+
+          @if (showsMobileNavigation()) {
+            <div
+              data-layout-mobile-app-bar
+              class="flex h-12 min-h-12 items-center gap-2 border-b border-border bg-background px-2 sm:hidden"
+            >
+              <button
+                type="button"
+                #mobileNavTrigger
+                class="inline-flex size-10 shrink-0 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+                [attr.aria-label]="mobileNavLabel()"
+                aria-haspopup="dialog"
+                [attr.aria-expanded]="mobileNavOpen()"
+                (click)="mobileNavOpen.set(true)"
+              >
+                <span aria-hidden="true" class="grid w-5 gap-1">
+                  <span class="h-0.5 rounded-full bg-current"></span>
+                  <span class="h-0.5 rounded-full bg-current"></span>
+                  <span class="h-0.5 rounded-full bg-current"></span>
+                </span>
+              </button>
+
+              <div class="flex min-w-0 flex-1 items-center gap-2">
+                <LayoutBrand [brand]="brand()" />
+              </div>
+
+              @defer (when mobileNavOpen()) {
+                <Sheet
+                  [open]="mobileNavOpen()"
+                  (openChange)="mobileNavOpen.set($event)"
+                  [restoreFocus]="mobileNavTriggerRef()?.nativeElement ?? null"
+                  side="left"
+                  class="w-3/4 p-0! sm:max-w-sm [&_.sheet-close-button]:z-50"
+                  [closeButtonLabel]="closeMobileNavLabel()"
+                >
+                  <SheetTitle class="sr-only">{{ mobileNavLabel() }}</SheetTitle>
+                  <Navigation
+                    id="main-mobile"
+                    data-id="main"
+                    [data]="data()"
+                    ariaLabel="Primary navigation"
+                    class="h-full w-full"
+                    (itemSelected)="mobileNavOpen.set(false)"
+                  >
+                    <LayoutNavSidebar
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      (logout)="logout.emit()"
+                    />
+                  </Navigation>
+                </Sheet>
+              }
+            </div>
+          }
+
+          @if (navType() !== 'desktop') {
+            <LayoutNavigation
+              ariaLabel="Primary navigation"
+              [landmark]="false"
+              class="max-sm:hidden"
+            >
+              <Navigation id="main" data-id="main" [data]="data()" [class]="navClass()">
+                @switch (navKind()) {
+                  @case ('navbar') {
+                    <LayoutNavNavbar
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      (logout)="logout.emit()"
+                    />
+                  }
+                  @case ('flyout') {
+                    <LayoutNavFlyout
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      (logout)="logout.emit()"
+                    />
+                  }
+                  @case ('dockbar') {
+                    <LayoutNavDockbar
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      [nav-type-mode]="navTypeMode()"
+                      [dockbar-route-context]="dockbarRouteContext()"
+                      [dockbar-badge]="dockbarBadgeContext()"
+                      (logout)="logout.emit()"
+                    />
+                  }
+                  @case ('brand') {
+                    <LayoutNavMinimal [brand]="brand()" />
+                  }
+                  @default {
+                    <LayoutNavSidebar
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      [nav-type-mode]="navTypeMode()"
+                      (logout)="logout.emit()"
+                    />
+                  }
+                }
+              </Navigation>
+            </LayoutNavigation>
+          }
+
+          <LayoutContent
+            [class]="contentClass()"
+            [content-id]="contentId()"
+            [focus-on-navigation]="focusOnNavigation()"
+          >
+            <ng-content />
+          </LayoutContent>
+        </div>
+      </ng-template>
+
+      @switch (effectiveLayoutType()) {
+        @case ('empty') {
+          <LayoutEmpty>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutEmpty>
+        }
+        @case ('fluid') {
+          <LayoutFluid>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutFluid>
+        }
+        @case ('horizontal') {
+          <LayoutHorizontal>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutHorizontal>
+        }
+        @default {
+          <LayoutVertical>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutVertical>
+        }
+      }
+    </Layout>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LayoutComponent, selector: "Layout", inputs: ["surface", "appearance", "layout-appearance", "width", "layout-type", "class"] }, { kind: "component", type: LayoutVerticalComponent, selector: "LayoutVertical", inputs: ["class"] }, { kind: "component", type: LayoutHorizontalComponent, selector: "LayoutHorizontal", inputs: ["class"] }, { kind: "component", type: LayoutEmptyComponent, selector: "LayoutEmpty", inputs: ["class"] }, { kind: "component", type: LayoutFluidComponent, selector: "LayoutFluid", inputs: ["class"] }, { kind: "component", type: LayoutNavigationComponent, selector: "LayoutNavigation", inputs: ["ariaLabel", "landmark", "class"] }, { kind: "component", type: LayoutContentComponent, selector: "LayoutContent", inputs: ["class", "content-id", "focus-on-navigation"] }, { 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: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutNavSidebar, selector: "LayoutNavSidebar", inputs: ["brand", "user", "appearance", "nav-type-mode"], outputs: ["logout"] }, { kind: "component", type: LayoutNavDockbar, selector: "LayoutNavDockbar", inputs: ["brand", "user", "appearance", "nav-type-mode", "dockbar-route-context", "dockbar-badge"], outputs: ["logout"] }, { kind: "component", type: LayoutNavNavbar, selector: "LayoutNavNavbar", inputs: ["brand", "user", "appearance"], outputs: ["logout"] }, { kind: "component", type: LayoutNavFlyout, selector: "LayoutNavFlyout", inputs: ["brand", "user", "appearance"], outputs: ["logout"] }, { kind: "component", type: LayoutNavMinimal, selector: "LayoutNavMinimal", inputs: ["brand"] }], deferBlockDependencies: [() => [/* @ts-ignore */
+                import('@ojiepermana/angular/component/sheet').then(m => m.SheetComponent), /* @ts-ignore */
+                import('@ojiepermana/angular/component/sheet').then(m => m.SheetTitleComponent), NavigationContainerComponent,
+                LayoutNavSidebar]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ngImport: i0, type: LayoutWrapperDefault, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('@ojiepermana/angular/component/sheet').then(m => m.SheetComponent), /* @ts-ignore */
+        import('@ojiepermana/angular/component/sheet').then(m => m.SheetTitleComponent)], resolveMetadata: (SheetComponent, SheetTitleComponent) => ({ decorators: [{
+                type: Component,
+                args: [{
+                        selector: 'LayoutWrapperDefault',
+                        host: { class: 'contents' },
+                        imports: [
+                            NgTemplateOutlet,
+                            LayoutComponent,
+                            LayoutVerticalComponent,
+                            LayoutHorizontalComponent,
+                            LayoutEmptyComponent,
+                            LayoutFluidComponent,
+                            LayoutNavigationComponent,
+                            LayoutContentComponent,
+                            SheetComponent,
+                            SheetTitleComponent,
+                            NavigationContainerComponent,
+                            LayoutBrand,
+                            LayoutNavSidebar,
+                            LayoutNavDockbar,
+                            LayoutNavNavbar,
+                            LayoutNavFlyout,
+                            LayoutNavMinimal,
+                        ],
+                        template: `
+    <Layout
+      [surface]="surface()"
+      [layout-appearance]="appearance()"
+      [width]="width()"
+      [layout-type]="effectiveLayoutType()"
+    >
+      <!-- Skeleton bersama: dipakai ulang oleh setiap wrapper di @switch bawah. -->
+      <ng-template #body>
+        <div data-layout-default-shell [class]="defaultShellClasses()">
+          <a
+            [attr.href]="'#' + contentId()"
+            class="sr-only z-50 rounded-md bg-background px-3 py-2 text-sm text-foreground shadow-md focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            {{ skipLinkLabel() }}
+          </a>
+
+          @if (showsMobileNavigation()) {
+            <div
+              data-layout-mobile-app-bar
+              class="flex h-12 min-h-12 items-center gap-2 border-b border-border bg-background px-2 sm:hidden"
+            >
+              <button
+                type="button"
+                #mobileNavTrigger
+                class="inline-flex size-10 shrink-0 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+                [attr.aria-label]="mobileNavLabel()"
+                aria-haspopup="dialog"
+                [attr.aria-expanded]="mobileNavOpen()"
+                (click)="mobileNavOpen.set(true)"
+              >
+                <span aria-hidden="true" class="grid w-5 gap-1">
+                  <span class="h-0.5 rounded-full bg-current"></span>
+                  <span class="h-0.5 rounded-full bg-current"></span>
+                  <span class="h-0.5 rounded-full bg-current"></span>
+                </span>
+              </button>
+
+              <div class="flex min-w-0 flex-1 items-center gap-2">
+                <LayoutBrand [brand]="brand()" />
+              </div>
+
+              @defer (when mobileNavOpen()) {
+                <Sheet
+                  [open]="mobileNavOpen()"
+                  (openChange)="mobileNavOpen.set($event)"
+                  [restoreFocus]="mobileNavTriggerRef()?.nativeElement ?? null"
+                  side="left"
+                  class="w-3/4 p-0! sm:max-w-sm [&_.sheet-close-button]:z-50"
+                  [closeButtonLabel]="closeMobileNavLabel()"
+                >
+                  <SheetTitle class="sr-only">{{ mobileNavLabel() }}</SheetTitle>
+                  <Navigation
+                    id="main-mobile"
+                    data-id="main"
+                    [data]="data()"
+                    ariaLabel="Primary navigation"
+                    class="h-full w-full"
+                    (itemSelected)="mobileNavOpen.set(false)"
+                  >
+                    <LayoutNavSidebar
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      (logout)="logout.emit()"
+                    />
+                  </Navigation>
+                </Sheet>
+              }
+            </div>
+          }
+
+          @if (navType() !== 'desktop') {
+            <LayoutNavigation
+              ariaLabel="Primary navigation"
+              [landmark]="false"
+              class="max-sm:hidden"
+            >
+              <Navigation id="main" data-id="main" [data]="data()" [class]="navClass()">
+                @switch (navKind()) {
+                  @case ('navbar') {
+                    <LayoutNavNavbar
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      (logout)="logout.emit()"
+                    />
+                  }
+                  @case ('flyout') {
+                    <LayoutNavFlyout
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      (logout)="logout.emit()"
+                    />
+                  }
+                  @case ('dockbar') {
+                    <LayoutNavDockbar
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      [nav-type-mode]="navTypeMode()"
+                      [dockbar-route-context]="dockbarRouteContext()"
+                      [dockbar-badge]="dockbarBadgeContext()"
+                      (logout)="logout.emit()"
+                    />
+                  }
+                  @case ('brand') {
+                    <LayoutNavMinimal [brand]="brand()" />
+                  }
+                  @default {
+                    <LayoutNavSidebar
+                      [brand]="brand()"
+                      [user]="user()"
+                      [appearance]="appearance()"
+                      [nav-type-mode]="navTypeMode()"
+                      (logout)="logout.emit()"
+                    />
+                  }
+                }
+              </Navigation>
+            </LayoutNavigation>
+          }
+
+          <LayoutContent
+            [class]="contentClass()"
+            [content-id]="contentId()"
+            [focus-on-navigation]="focusOnNavigation()"
+          >
+            <ng-content />
+          </LayoutContent>
+        </div>
+      </ng-template>
+
+      @switch (effectiveLayoutType()) {
+        @case ('empty') {
+          <LayoutEmpty>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutEmpty>
+        }
+        @case ('fluid') {
+          <LayoutFluid>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutFluid>
+        }
+        @case ('horizontal') {
+          <LayoutHorizontal>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutHorizontal>
+        }
+        @default {
+          <LayoutVertical>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutVertical>
+        }
+      }
+    </Layout>
+  `,
+                    }]
+            }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-appearance", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], layoutType: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-type", required: false }] }], navType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type", required: false }] }], navTypeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type-mode", required: false }] }], dockbarRouteContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockbar-route-context", required: false }] }], dockbarBadgeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dockbar-badge", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "content-id", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skip-link-label", required: false }] }], focusOnNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "focus-on-navigation", required: false }] }], mobileNavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobile-nav-open", required: false }] }, { type: i0.Output, args: ["mobile-nav-openChange"] }], mobileNavLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobile-nav-label", required: false }] }], closeMobileNavLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "close-mobile-nav-label", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }], mobileNavTriggerRef: [{ type: i0.ViewChild, args: ['mobileNavTrigger', { isSignal: true }] }], contentClassInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "content-class", required: false }] }] } }) });
+
+/*
+ * Public API of @ojiepermana/angular/theme/layout/wrapper
+ *
+ * Wrapper blok-jadi untuk layout shell: consumer cukup menyediakan data input
+ * (surface, appearance, width, layout-type, nav-type, navigation data, brand, user)
+ * tanpa merakit komponen bersarang. `register*` default tetap di consumer.
+ */
+// Identitas (bentuk data yang disediakan consumer)
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { LAYOUT_DESKTOP_NAVIGATION_DATA_ID, LayoutBrand, LayoutIdentityService, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };