@ojiepermana/angular 22.1.13 → 22.2.0

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

@@ -1,115 +1,211 @@
-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';
-
-/**
- * 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: `
+import * as i0 from "@angular/core";
+import { Component, Service, booleanAttribute, computed, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { NavigationAsideFooterDirective, NavigationContainerComponent, NavigationDockbarComponent, NavigationFlyoutComponent, NavigationFooterActionComponent, NavigationFooterComponent, NavigationFooterInitialComponent, NavigationFooterTitleComponent, NavigationHeaderComponent, NavigationHeaderInitialComponent, NavigationHeaderTitleComponent, NavigationNavbarComponent, NavigationSidebarComponent } 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, LayoutContentComponent, LayoutEmptyComponent, LayoutFluidComponent, LayoutHorizontalComponent, LayoutNavigationComponent, LayoutVerticalComponent } from "@ojiepermana/angular/theme/layout";
+import { LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH } from "@ojiepermana/angular/theme/layout/types";
+import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+const LAYOUT_DESKTOP_NAVIGATION_DATA_ID = "__layout-desktop-navigation";
+var LayoutIdentityService = class LayoutIdentityService {
+	brandState = signal(null, ...ngDevMode ? [{ debugName: "brandState" }] : /* istanbul ignore next */ []);
+	userState = signal(null, ...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.2.0",
+		ngImport: i0,
+		type: LayoutIdentityService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutIdentityService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: LayoutIdentityService,
+	decorators: [{ type: Service }]
+});
+var LayoutBrand = class LayoutBrand {
+	brand = input.required(...ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []);
+	compact = input(false, {
+		...ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutBrand,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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: `
+  `,
+		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.2.0",
+	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: `
+  `
+		}]
+	}],
+	propDecorators: {
+		brand: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "brand",
+				required: true
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}]
+	}
+});
+var LayoutUser = class LayoutUser {
+	user = input.required(...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+	detailed = input(false, {
+		...ngDevMode ? { debugName: "detailed" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	logoutLabel = input("Logout", ...ngDevMode ? [{ debugName: "logoutLabel" }] : /* istanbul ignore next */ []);
+	logoutIcon = input("logout", ...ngDevMode ? [{ debugName: "logoutIcon" }] : /* istanbul ignore next */ []);
+	logout = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutUser,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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" />
@@ -127,21 +223,87 @@ class LayoutUser {
       </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: `
+  `,
+		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.2.0",
+	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" />
@@ -159,48 +321,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       </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: `
+  `
+		}]
+	}],
+	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"]
+		}]
+	}
+});
+var LayoutNavSidebar = class LayoutNavSidebar {
+	brand = input.required(...ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []);
+	user = input.required(...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+	appearance = input("flat", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	navTypeMode = input("default", {
+		...ngDevMode ? { debugName: "navTypeMode" } : /* istanbul ignore next */ {},
+		alias: "nav-type-mode"
+	});
+	logout = output();
+	isBorderRail = computed(() => this.appearance() === "border-rail", ...ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []);
+	isCollapsed = computed(() => this.navTypeMode() === "collapsed", ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
+	shellClass = computed(() => this.isBorderRail() ? "border-r-[length:var(--layout-rail-width)] border-border" : "border-r border-border", ...ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutNavSidebar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		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()" />
@@ -209,21 +431,72 @@ class LayoutNavSidebar {
         <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: `
+  `,
+		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.2.0",
+	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()" />
@@ -232,56 +505,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <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"] }] } });
-
+  `
+		}]
+	}],
+	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: `
+var LayoutNavDockbar = class LayoutNavDockbar {
+	brand = input.required(...ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []);
+	user = input.required(...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+	appearance = input("flat", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	navTypeMode = input("default", {
+		...ngDevMode ? { debugName: "navTypeMode" } : /* istanbul ignore next */ {},
+		alias: "nav-type-mode"
+	});
+	dockbarRouteContext = input(null, {
+		...ngDevMode ? { debugName: "dockbarRouteContext" } : /* istanbul ignore next */ {},
+		alias: "dockbar-route-context"
+	});
+	dockbarBadgeContext = input(EMPTY_NAVIGATION_BADGE_CONTEXT$1, {
+		...ngDevMode ? { debugName: "dockbarBadgeContext" } : /* istanbul ignore next */ {},
+		alias: "dockbar-badge"
+	});
+	logout = output();
+	isBorderRail = computed(() => this.appearance() === "border-rail", ...ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []);
+	dockbarMode = computed(() => this.navTypeMode() === "drawer" ? "drawer" : "sticky", ...ngDevMode ? [{ debugName: "dockbarMode" }] : /* istanbul ignore next */ []);
+	routeContextEnabled = computed(() => {
+		const context = this.dockbarRouteContext();
+		return context !== null && context !== false;
+	}, ...ngDevMode ? [{ debugName: "routeContextEnabled" }] : /* istanbul ignore next */ []);
+	shellClass = computed(() => this.isBorderRail() ? "border-r-[length:var(--layout-rail-width)] border-border" : "border-r border-border", ...ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutNavDockbar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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()"
@@ -318,23 +670,93 @@ class LayoutNavDockbar {
         </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: `
+  `,
+		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.2.0",
+	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()"
@@ -371,27 +793,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </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: `
+  `
+		}]
+	}],
+	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"]
+		}]
+	}
+});
+var LayoutNavNavbar = class LayoutNavNavbar {
+	brand = input.required(...ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []);
+	user = input.required(...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+	appearance = input("flat", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	logout = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutNavNavbar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		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()" />
@@ -400,21 +905,70 @@ class LayoutNavNavbar {
         <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: `
+  `,
+		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.2.0",
+	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()" />
@@ -423,26 +977,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <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: `
+  `
+		}]
+	}],
+	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"]
+		}]
+	}
+});
+var LayoutNavFlyout = class LayoutNavFlyout {
+	brand = input.required(...ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []);
+	user = input.required(...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+	appearance = input("flat", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	logout = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutNavFlyout,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		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"
@@ -456,21 +1070,79 @@ class LayoutNavFlyout {
         <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: `
+  `,
+		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.2.0",
+	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"
@@ -484,206 +1156,396 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <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: `
+  `
+		}]
+	}],
+	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"]
+		}]
+	}
+});
+var LayoutNavMinimal = class LayoutNavMinimal {
+	brand = input.required(...ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutNavMinimal,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		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: `
+  `,
+		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.2.0",
+	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 }] }] } });
-
+  `
+		}]
+	}],
+	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: `
+var LayoutWrapperDefault = class LayoutWrapperDefault {
+	surface = input(LAYOUT_DEFAULT_SURFACE, ...ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []);
+	appearance = input(LAYOUT_DEFAULT_APPEARANCE, {
+		...ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {},
+		alias: "layout-appearance"
+	});
+	width = input(LAYOUT_DEFAULT_WIDTH, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	layoutType = input(LAYOUT_DEFAULT_TYPE, {
+		...ngDevMode ? { debugName: "layoutType" } : /* istanbul ignore next */ {},
+		alias: "layout-type"
+	});
+	navType = input("sidebar", {
+		...ngDevMode ? { debugName: "navType" } : /* istanbul ignore next */ {},
+		alias: "nav-type"
+	});
+	navTypeMode = input("default", {
+		...ngDevMode ? { debugName: "navTypeMode" } : /* istanbul ignore next */ {},
+		alias: "nav-type-mode"
+	});
+	dockbarRouteContext = input(null, {
+		...ngDevMode ? { debugName: "dockbarRouteContext" } : /* istanbul ignore next */ {},
+		alias: "dockbar-route-context"
+	});
+	dockbarBadgeContext = input(EMPTY_NAVIGATION_BADGE_CONTEXT, {
+		...ngDevMode ? { debugName: "dockbarBadgeContext" } : /* istanbul ignore next */ {},
+		alias: "dockbar-badge"
+	});
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	brand = input.required(...ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []);
+	user = input.required(...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+	contentId = input("main-content", {
+		...ngDevMode ? { debugName: "contentId" } : /* istanbul ignore next */ {},
+		alias: "content-id"
+	});
+	skipLinkLabel = input("Skip to main content", {
+		...ngDevMode ? { debugName: "skipLinkLabel" } : /* istanbul ignore next */ {},
+		alias: "skip-link-label"
+	});
+	focusOnNavigation = input(false, {
+		...ngDevMode ? { debugName: "focusOnNavigation" } : /* istanbul ignore next */ {},
+		alias: "focus-on-navigation"
+	});
+	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"
+	});
+	logout = output();
+	identity = inject(LayoutIdentityService);
+	navigation = inject(NAVIGATION_ADAPTER);
+	desktopNavigationDataOwner = {};
+	document = inject(DOCUMENT, { optional: true });
+	mobileNavTriggerRef = viewChild("mobileNavTrigger", ...ngDevMode ? [{ debugName: "mobileNavTriggerRef" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => this.identity.setBrand(this.brand()));
+		effect(() => this.identity.setUser(this.user()));
+		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));
+		});
+		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));
+		});
+	}
+	contentClassInput = input("", {
+		...ngDevMode ? { debugName: "contentClassInput" } : /* istanbul ignore next */ {},
+		alias: "content-class"
+	});
+	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";
+	}, ...ngDevMode ? [{ debugName: "effectiveLayoutType" }] : /* istanbul ignore next */ []);
+	navKind = computed(() => {
+		const layoutType = this.layoutType();
+		const navType = this.navType();
+		return layoutType === "empty" || layoutType === "fluid" || navType === "desktop" ? "brand" : navType;
+	}, ...ngDevMode ? [{ debugName: "navKind" }] : /* istanbul ignore next */ []);
+	navClass = computed(() => this.effectiveLayoutType() === "horizontal" ? "w-full" : "h-full", ...ngDevMode ? [{ debugName: "navClass" }] : /* istanbul ignore next */ []);
+	showsMobileNavigation = computed(() => {
+		if (this.navType() === "desktop") return false;
+		const type = this.effectiveLayoutType();
+		return type === "vertical" || type === "horizontal";
+	}, ...ngDevMode ? [{ debugName: "showsMobileNavigation" }] : /* istanbul ignore next */ []);
+	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");
+	}, ...ngDevMode ? [{ debugName: "defaultShellClasses" }] : /* istanbul ignore next */ []);
+	contentClass = computed(() => cn(this.effectiveLayoutType() === "fluid" ? "w-full max-w-3xl" : "", this.contentClassInput()), ...ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LayoutWrapperDefault,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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()"
@@ -840,38 +1702,197 @@ class LayoutWrapperDefault {
         }
       }
     </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: `
+  `,
+		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: [() => [
+			import("@ojiepermana/angular/component/sheet").then((m) => m.SheetComponent),
+			import("@ojiepermana/angular/component/sheet").then((m) => m.SheetTitleComponent),
+			NavigationContainerComponent,
+			LayoutNavSidebar
+		]]
+	});
+};
+i0.ɵɵngDeclareClassMetadataAsync({
+	minVersion: "18.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: LayoutWrapperDefault,
+	resolveDeferredDeps: () => [import("@ojiepermana/angular/component/sheet").then((m) => m.SheetComponent), 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()"
@@ -1028,21 +2049,167 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.4", ng
         }
       }
     </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 };
+  `
+			}]
+		}],
+		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
+				}]
+			}]
+		}
+	})
+});
+export { LAYOUT_DESKTOP_NAVIGATION_DATA_ID, LayoutBrand, LayoutIdentityService, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };