@ojiepermana/angular-theme 22.0.33 → 22.0.35

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

@@ -149,10 +149,10 @@ class LayoutService {
     getStoredAppearanceOrDefault(fallback) {
         return this.readStoredAppearance() ?? fallback;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: LayoutService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: LayoutService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutService, decorators: [{
             type: Service
         }] });
 
@@ -311,10 +311,10 @@ class LayoutLoadingService {
     isBrowser() {
         return isPlatformBrowser(this.platformId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 

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

@@ -0,0 +1,589 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, Component, computed } from '@angular/core';
+import { NavigationHeaderInitialComponent, NavigationHeaderTitleComponent, NavigationFooterActionComponent, NavigationFooterInitialComponent, NavigationFooterTitleComponent, NavigationSidebarComponent, NavigationHeaderComponent, NavigationFooterComponent, NavigationDockbarComponent, NavigationNavbarComponent, NavigationFlyoutComponent, NavigationContainerComponent } from '@ojiepermana/angular-navigation';
+import { IconComponent } from '@ojiepermana/angular-component/icon';
+import { NgTemplateOutlet } from '@angular/common';
+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';
+
+/**
+ * Bentuk identitas yang dikonsumsi wrapper layout. Library hanya mendefinisikan
+ * strukturnya; nilai konkret (brand/user) disediakan consumer sebagai input.
+ */
+
+/**
+ * Slot brand untuk `<NavigationHeader>`: inisial/logo + judul. Murni input-driven.
+ *
+ * `compact` (dockbar / rail ikon-only) menyembunyikan judul. `host.class = 'contents'`
+ * membuat `NavigationHeaderInitial` + `NavigationHeaderTitle` tetap menjadi flex-child
+ * langsung baris header; auto-hide judul saat sidebar collapsed (via `NAVIGATION_SHELL`)
+ * tetap berlaku karena DI mengalir lewat live tree ke `<Navigation>`.
+ */
+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.0.3", ngImport: i0, type: LayoutBrand, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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" />
+    @if (!compact()) {
+      <NavigationHeaderTitle [title]="brand().title" [subtitle]="brand().subtitle" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationHeaderInitialComponent, selector: "NavigationHeaderInitial", inputs: ["name", "src", "initials", "icon", "class"] }, { kind: "component", type: NavigationHeaderTitleComponent, selector: "NavigationHeaderTitle", inputs: ["title", "subtitle", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutBrand, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutBrand',
+                    imports: [NavigationHeaderInitialComponent, NavigationHeaderTitleComponent],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationHeaderInitial [name]="brand().name" [icon]="brand().icon" />
+    @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 }] }] } });
+
+/**
+ * Slot user untuk `<NavigationFooter>`: identitas (opsional) + aksi logout. Murni input-driven.
+ *
+ * `detailed` menampilkan inisial + nama (sidebar penuh); tanpanya hanya tombol logout.
+ * `host.class = 'contents'` membuat anak menjadi flex-child langsung footer — `ml-auto` &
+ * auto-hide saat collapsed (via `NAVIGATION_SHELL`) tetap berlaku.
+ */
+class LayoutUser {
+    /** Identitas user (nama + email). */
+    user = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Tampilkan identitas user (inisial + nama), bukan hanya tombol logout. */
+    detailed = input(false, { ...(ngDevMode ? { debugName: "detailed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Label aksesibilitas tombol logout. */
+    logoutLabel = input('Logout', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoutLabel" }] : /* istanbul ignore next */ []));
+    /** Material symbol untuk tombol logout. */
+    logoutIcon = input('logout', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoutIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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 } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @if (detailed()) {
+      <NavigationFooterInitial [name]="user().name" />
+      <NavigationFooterTitle [title]="user().name" [subtitle]="user().email" />
+    }
+
+    <NavigationFooterAction>
+      <button
+        type="button"
+        [attr.aria-label]="logoutLabel()"
+        [attr.title]="logoutLabel()"
+        class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <Icon [name]="logoutIcon()" [size]="18" />
+      </button>
+    </NavigationFooterAction>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { 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.0.3", ngImport: i0, type: LayoutUser, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutUser',
+                    imports: [
+                        IconComponent,
+                        NavigationFooterActionComponent,
+                        NavigationFooterInitialComponent,
+                        NavigationFooterTitleComponent,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    @if (detailed()) {
+      <NavigationFooterInitial [name]="user().name" />
+      <NavigationFooterTitle [title]="user().name" [subtitle]="user().email" />
+    }
+
+    <NavigationFooterAction>
+      <button
+        type="button"
+        [attr.aria-label]="logoutLabel()"
+        [attr.title]="logoutLabel()"
+        class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <Icon [name]="logoutIcon()" [size]="18" />
+      </button>
+    </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 }] }] } });
+
+/**
+ * Tipe nav: sidebar vertikal collapsible (default). Brand header + identitas user di footer.
+ *
+ * `host.class = 'contents'` membuat `<NavigationSidebar>` menjadi anak efektif `<Navigation>`
+ * (h-full, shell-classes), sementara DI `NAVIGATION_SHELL` tetap mengalir lewat live tree dan
+ * `<NavigationHeader>` tetap direct child untuk content-projection library.
+ */
+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 dari shell (`[appearance]`); `flat` menambahkan border kanan pemisah konten. */
+    appearance = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** `flat` → border kanan; selaras border bawah navbar (`border-[1.5px] border-border`). */
+    shellClass = computed(() => this.appearance() === 'flat' ? 'border-r-[1.5px] border-border' : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationSidebar nav-sidebar-collapse [class]="shellClass()">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" detailed />
+      </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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavSidebar',
+                    imports: [
+                        NavigationSidebarComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationSidebar nav-sidebar-collapse [class]="shellClass()">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" detailed />
+      </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 }] }] } });
+
+/**
+ * Tipe nav: rail ikon vertikal (dockbar). Brand compact (inisial saja) + aksi logout.
+ * Lihat {@link LayoutNavSidebar} untuk alasan `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 dari shell (`[appearance]`); `flat` menambahkan border kanan pemisah konten. */
+    appearance = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** `flat` → border kanan; selaras border bawah navbar (`border-[1.5px] border-border`). */
+    shellClass = computed(() => this.appearance() === 'flat' ? 'border-r-[1.5px] border-border' : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavDockbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationDockbar [class]="shellClass()">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" compact />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" />
+      </NavigationFooter>
+    </NavigationDockbar>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationDockbarComponent, selector: "NavigationDockbar", inputs: ["mode", "position", "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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavDockbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavDockbar',
+                    imports: [
+                        NavigationDockbarComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationDockbar [class]="shellClass()">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" compact />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" />
+      </NavigationFooter>
+    </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 }] }] } });
+
+/**
+ * Tipe nav: top bar item inline (navbar, horizontal). `appearance` selaras shell
+ * (`flat | border-rail`). Lihat {@link LayoutNavSidebar} untuk alasan `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 dari shell (`[nav-appearance]`). */
+    appearance = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationNavbar [nav-appearance]="appearance()" class="border-b-[1.5px] border-border">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" />
+      </NavigationFooter>
+    </NavigationNavbar>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationNavbarComponent, selector: "NavigationNavbar", inputs: ["nav-position", "nav-appearance", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavNavbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavNavbar',
+                    imports: [
+                        NavigationNavbarComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationNavbar [nav-appearance]="appearance()" class="border-b-[1.5px] border-border">
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" />
+      </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 }] }] } });
+
+/**
+ * Tipe nav: top bar dengan tombol trigger flyout (horizontal). `appearance` selaras shell.
+ * Lihat {@link LayoutNavSidebar} untuk alasan `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 dari shell (`[nav-appearance]`). */
+    appearance = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavFlyout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationFlyout
+      [nav-appearance]="appearance()"
+      label="Menu"
+      icon="apps"
+      class="border-b-[1.5px] border-border"
+    >
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" />
+      </NavigationFooter>
+    </NavigationFlyout>
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationFlyoutComponent, selector: "NavigationFlyout", inputs: ["label", "icon", "icon-only", "icon-position", "trigger-variant", "trigger-floating", "trigger-class", "nav-position", "nav-appearance", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavFlyout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavFlyout',
+                    imports: [
+                        NavigationFlyoutComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationFlyout
+      [nav-appearance]="appearance()"
+      label="Menu"
+      icon="apps"
+      class="border-b-[1.5px] border-border"
+    >
+      <NavigationHeader>
+        <LayoutBrand [brand]="brand()" />
+      </NavigationHeader>
+      <NavigationFooter class="px-3">
+        <LayoutUser [user]="user()" />
+      </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 }] }] } });
+
+/**
+ * Tipe nav: sidebar brand-only untuk varian `empty` / `fluid` (nav disembunyikan oleh
+ * `LayoutNavigation`, jadi tanpa collapse & footer). Lihat {@link LayoutNavSidebar} untuk
+ * alasan `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.0.3", ngImport: i0, type: LayoutNavMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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.0.3", 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 }] }] } });
+
+/**
+ * Wrapper layout shell siap pakai — consumer cukup memberi data input, tidak perlu merakit
+ * `Layout > LayoutVertical/Horizontal/Empty/Fluid > LayoutNavigation > Navigation > tipe-nav`.
+ *
+ * ```html
+ * <LayoutWrapperDefault
+ *   [surface]="surface" [layout-appearance]="appearance" [width]="width"
+ *   [layout-type]="layoutType" [nav-type]="navType"
+ *   [data]="navItems" [brand]="brand" [user]="user"
+ * >
+ *   <router-outlet />   <!-- konten halaman diproyeksikan ke LayoutContent -->
+ * </LayoutWrapperDefault>
+ * ```
+ *
+ * `register*` default (LayoutService) tetap tanggung jawab consumer; wrapper ini murni
+ * presentational — dua sumbu (`effectiveLayoutType` → wrapper, `navKind` → tipe nav) di atas
+ * satu skeleton bersama. DI aman: `<Navigation>` mem-*provide* `NAVIGATION_SHELL` di dalam
+ * `#body`; tipe nav `display:contents` sehingga `<NavigationXxx>` jadi anak efektif `<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' });
+    /** Lebar frame (`full`, `container`, dst.). */
+    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' });
+    /** Tipe navigasi (`sidebar | dockbar | navbar | flyout`); diabaikan saat `empty`/`fluid`. */
+    navType = input('sidebar', { ...(ngDevMode ? { debugName: "navType" } : /* istanbul ignore next */ {}), alias: 'nav-type' });
+    /** 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 */ []));
+    /** 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' ? '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();
+        return layoutType === 'empty' || layoutType === 'fluid' ? 'brand' : this.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 */ []));
+    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; selain itu padding biasa. */
+    contentClass = computed(() => this.effectiveLayoutType() === 'fluid' ? 'w-full max-w-3xl p-6' : 'p-6', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutWrapperDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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 }, 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 } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <Layout
+      [surface]="surface()"
+      [layout-appearance]="appearance()"
+      [width]="width()"
+      [layout-type]="effectiveLayoutType()"
+    >
+      <!-- Skeleton bersama: dipakai ulang oleh setiap wrapper di @switch bawah. -->
+      <ng-template #body>
+        <LayoutNavigation ariaLabel="Primary navigation">
+          <Navigation id="main" [data]="data()" [class]="navClass()">
+            @switch (navKind()) {
+              @case ('navbar') {
+                <LayoutNavNavbar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
+              }
+              @case ('flyout') {
+                <LayoutNavFlyout [brand]="brand()" [user]="user()" [appearance]="appearance()" />
+              }
+              @case ('dockbar') {
+                <LayoutNavDockbar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
+              }
+              @case ('brand') {
+                <LayoutNavMinimal [brand]="brand()" />
+              }
+              @default {
+                <LayoutNavSidebar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
+              }
+            }
+          </Navigation>
+        </LayoutNavigation>
+
+        <LayoutContent [class]="contentClass()">
+          <ng-content />
+        </LayoutContent>
+      </ng-template>
+
+      @switch (effectiveLayoutType()) {
+        @case ('empty') {
+          <LayoutEmpty>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutEmpty>
+        }
+        @case ('fluid') {
+          <LayoutFluid>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutFluid>
+        }
+        @case ('horizontal') {
+          <LayoutHorizontal>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutHorizontal>
+        }
+        @default {
+          <LayoutVertical>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutVertical>
+        }
+      }
+    </Layout>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LayoutComponent, selector: "Layout", inputs: ["surface", "appearance", "layout-appearance", "width", "layout-type", "class"] }, { kind: "component", type: LayoutVerticalComponent, selector: "LayoutVertical", inputs: ["class"] }, { kind: "component", type: LayoutHorizontalComponent, selector: "LayoutHorizontal", inputs: ["class"] }, { kind: "component", type: LayoutEmptyComponent, selector: "LayoutEmpty", inputs: ["class"] }, { kind: "component", type: LayoutFluidComponent, selector: "LayoutFluid", inputs: ["class"] }, { kind: "component", type: LayoutNavigationComponent, selector: "LayoutNavigation", inputs: ["ariaLabel", "railOffset", "class"] }, { kind: "component", type: LayoutContentComponent, selector: "LayoutContent", inputs: ["class"] }, { kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: LayoutNavSidebar, selector: "LayoutNavSidebar", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavDockbar, selector: "LayoutNavDockbar", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavNavbar, selector: "LayoutNavNavbar", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavFlyout, selector: "LayoutNavFlyout", inputs: ["brand", "user", "appearance"] }, { kind: "component", type: LayoutNavMinimal, selector: "LayoutNavMinimal", inputs: ["brand"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutWrapperDefault, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutWrapperDefault',
+                    host: { class: 'contents' },
+                    imports: [
+                        NgTemplateOutlet,
+                        LayoutComponent,
+                        LayoutVerticalComponent,
+                        LayoutHorizontalComponent,
+                        LayoutEmptyComponent,
+                        LayoutFluidComponent,
+                        LayoutNavigationComponent,
+                        LayoutContentComponent,
+                        NavigationContainerComponent,
+                        LayoutNavSidebar,
+                        LayoutNavDockbar,
+                        LayoutNavNavbar,
+                        LayoutNavFlyout,
+                        LayoutNavMinimal,
+                    ],
+                    template: `
+    <Layout
+      [surface]="surface()"
+      [layout-appearance]="appearance()"
+      [width]="width()"
+      [layout-type]="effectiveLayoutType()"
+    >
+      <!-- Skeleton bersama: dipakai ulang oleh setiap wrapper di @switch bawah. -->
+      <ng-template #body>
+        <LayoutNavigation ariaLabel="Primary navigation">
+          <Navigation id="main" [data]="data()" [class]="navClass()">
+            @switch (navKind()) {
+              @case ('navbar') {
+                <LayoutNavNavbar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
+              }
+              @case ('flyout') {
+                <LayoutNavFlyout [brand]="brand()" [user]="user()" [appearance]="appearance()" />
+              }
+              @case ('dockbar') {
+                <LayoutNavDockbar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
+              }
+              @case ('brand') {
+                <LayoutNavMinimal [brand]="brand()" />
+              }
+              @default {
+                <LayoutNavSidebar [brand]="brand()" [user]="user()" [appearance]="appearance()" />
+              }
+            }
+          </Navigation>
+        </LayoutNavigation>
+
+        <LayoutContent [class]="contentClass()">
+          <ng-content />
+        </LayoutContent>
+      </ng-template>
+
+      @switch (effectiveLayoutType()) {
+        @case ('empty') {
+          <LayoutEmpty>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutEmpty>
+        }
+        @case ('fluid') {
+          <LayoutFluid>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutFluid>
+        }
+        @case ('horizontal') {
+          <LayoutHorizontal>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutHorizontal>
+        }
+        @default {
+          <LayoutVertical>
+            <ng-container [ngTemplateOutlet]="body" />
+          </LayoutVertical>
+        }
+      }
+    </Layout>
+  `,
+                }]
+        }], 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 }] }], 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 }] }] } });
+
+/*
+ * 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 { LayoutBrand, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };

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

@@ -39,8 +39,8 @@ class LayoutLoadingComponent {
     constructor() {
         inject(DestroyRef).onDestroy(() => this.loading.unregisterHost(this.hostId));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutLoadingComponent, isStandalone: true, selector: "LayoutLoading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-state": "state()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutLoadingComponent, isStandalone: true, selector: "LayoutLoading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-state": "state()" } }, ngImport: i0, template: `
     @if (isPrimary() && loading.active()) {
       <div
         role="progressbar"
@@ -58,7 +58,7 @@ class LayoutLoadingComponent {
     }
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutLoading',
@@ -199,8 +199,8 @@ class LayoutComponent {
             ? 'h-full w-full lg:container lg:mx-auto'
             : 'h-full w-full';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutComponent, isStandalone: true, selector: "Layout", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, layoutAppearanceAttribute: { classPropertyName: "layoutAppearanceAttribute", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-surface": "resolvedSurface()", "attr.data-layout-appearance": "resolvedAppearance()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "resolvedType()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutComponent, isStandalone: true, selector: "Layout", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, layoutAppearanceAttribute: { classPropertyName: "layoutAppearanceAttribute", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-surface": "resolvedSurface()", "attr.data-layout-appearance": "resolvedAppearance()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "resolvedType()" } }, ngImport: i0, template: `
     <LayoutLoading />
 
     <div data-layout-stage [class]="frameStageClasses()">
@@ -307,7 +307,7 @@ class LayoutComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Layout',
@@ -438,10 +438,10 @@ class LayoutVerticalComponent {
     constructor() {
         this.layout.setType('vertical', { persist: false });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutVertical',
@@ -463,10 +463,10 @@ class LayoutHorizontalComponent {
     constructor() {
         this.layout.setType('horizontal', { persist: false });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutHorizontal',
@@ -488,10 +488,10 @@ class LayoutEmptyComponent {
     constructor() {
         this.layout.setType('empty', { persist: false });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutEmpty',
@@ -513,10 +513,10 @@ class LayoutFluidComponent {
     constructor() {
         this.layout.setType('fluid', { persist: false });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutFluidComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutFluidComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutFluid',
@@ -557,8 +557,8 @@ class LayoutNavigationComponent {
         (layoutType === 'empty' || layoutType === 'fluid') && 'hidden', this.class());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutNavigationComponent, isStandalone: true, selector: "LayoutNavigation", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, railOffset: { classPropertyName: "railOffset", publicName: "railOffset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()", "attr.data-layout-nav-rail-offset": "resolvedRailOffset()" } }, queries: [{ propertyName: "projectedNav", first: true, predicate: NavigationContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutNavigationComponent, isStandalone: true, selector: "LayoutNavigation", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, railOffset: { classPropertyName: "railOffset", publicName: "railOffset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()", "attr.data-layout-nav-rail-offset": "resolvedRailOffset()" } }, queries: [{ propertyName: "projectedNav", first: true, predicate: NavigationContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (showsVerticalRail()) {
       <div
         aria-hidden="true"
@@ -581,7 +581,7 @@ class LayoutNavigationComponent {
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutNavigation',
@@ -630,10 +630,10 @@ class LayoutContentComponent {
         layoutType === 'fluid' && 'max-h-full max-w-full', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutContent',

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

@@ -108,10 +108,10 @@ class PageStateService {
         this.sideOpenRequestVersionState.update((version) => version + 1);
         return open;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageStateService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageStateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -186,10 +186,10 @@ class PageSideComponent {
             onCleanup(() => defaultView.removeEventListener('keydown', handler));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: PageSideComponent, isStandalone: true, selector: "PageSide", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId", "attr.data-page-slot": "\"side\"", "attr.data-page-side-mode": "resolvedMode()", "attr.data-page-side-open": "page.sideOpen()", "attr.data-page-position": "resolvedPosition()", "attr.aria-hidden": "ariaHidden()", "style.--page-side-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageSideComponent, isStandalone: true, selector: "PageSide", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId", "attr.data-page-slot": "\"side\"", "attr.data-page-side-mode": "resolvedMode()", "attr.data-page-side-open": "page.sideOpen()", "attr.data-page-position": "resolvedPosition()", "attr.aria-hidden": "ariaHidden()", "style.--page-side-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageSideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageSideComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageSide',
@@ -282,8 +282,8 @@ class PageComponent {
     handleBackdropClick() {
         this.page.closeSide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PageComponent, isStandalone: true, selector: "Page", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sideMode: { classPropertyName: "sideMode", publicName: "sideMode", isSignal: true, isRequired: false, transformFunction: null }, sideOpen: { classPropertyName: "sideOpen", publicName: "sideOpen", isSignal: true, isRequired: false, transformFunction: null }, sideWidth: { classPropertyName: "sideWidth", publicName: "sideWidth", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sideOpenChange: "sideOpenChange" }, host: { properties: { "class": "hostClasses()", "attr.data-page-variant": "variant()", "attr.data-page-height": "height()", "attr.data-page-scroll": "scroll()", "attr.data-page-position": "resolvedPosition()", "attr.data-page-side-mode": "resolvedSideMode()", "attr.data-page-side-open": "page.sideOpen()", "style.--page-side-width": "sideWidth()" } }, providers: [PageStateService], queries: [{ propertyName: "projectedSide", first: true, predicate: PageSideComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: PageComponent, isStandalone: true, selector: "Page", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sideMode: { classPropertyName: "sideMode", publicName: "sideMode", isSignal: true, isRequired: false, transformFunction: null }, sideOpen: { classPropertyName: "sideOpen", publicName: "sideOpen", isSignal: true, isRequired: false, transformFunction: null }, sideWidth: { classPropertyName: "sideWidth", publicName: "sideWidth", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sideOpenChange: "sideOpenChange" }, host: { properties: { "class": "hostClasses()", "attr.data-page-variant": "variant()", "attr.data-page-height": "height()", "attr.data-page-scroll": "scroll()", "attr.data-page-position": "resolvedPosition()", "attr.data-page-side-mode": "resolvedSideMode()", "attr.data-page-side-open": "page.sideOpen()", "style.--page-side-width": "sideWidth()" } }, providers: [PageStateService], queries: [{ propertyName: "projectedSide", first: true, predicate: PageSideComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (showsOverlayBackdrop()) {
       <button
         type="button"
@@ -309,7 +309,7 @@ class PageComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Page',
@@ -367,8 +367,8 @@ class PageSideToggleComponent {
     handleClick() {
         this.toggled.emit(this.page.toggleSide());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageSideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: PageSideToggleComponent, isStandalone: true, selector: "PageSideToggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageSideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageSideToggleComponent, isStandalone: true, selector: "PageSideToggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
     <button
       type="button"
       [class]="buttonClasses()"
@@ -382,7 +382,7 @@ class PageSideToggleComponent {
     </button>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageSideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageSideToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageSideToggle',
@@ -417,10 +417,10 @@ class PageHeaderComponent {
     ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('block shrink-0 border-b border-border bg-background', this.class(), this.resolvedHeight() === 'fix' && 'h-12 overflow-hidden'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: PageHeaderComponent, isStandalone: true, selector: "PageHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "header" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageHeaderComponent, isStandalone: true, selector: "PageHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "header" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageHeader',
@@ -440,10 +440,10 @@ class PageContentComponent {
     ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
     classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: PageContentComponent, isStandalone: true, selector: "PageContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "content" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageContentComponent, isStandalone: true, selector: "PageContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "content" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageContent',
@@ -463,10 +463,10 @@ class PageDashboardComponent {
     ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
     classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: PageDashboardComponent, isStandalone: true, selector: "PageDashboard", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "dashboard" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageDashboardComponent, isStandalone: true, selector: "PageDashboard", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "dashboard" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageDashboardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageDashboard',
@@ -486,10 +486,10 @@ class PageFooterComponent {
     ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('block shrink-0 border-t border-border bg-background', this.class(), this.resolvedHeight() === 'fix' && 'h-12 overflow-hidden'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: PageFooterComponent, isStandalone: true, selector: "PageFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "footer" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: PageFooterComponent, isStandalone: true, selector: "PageFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "footer" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PageFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageFooter',

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

@@ -120,10 +120,10 @@ class ThemeModeService {
             return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeModeService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: ThemeModeService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeModeService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: ThemeModeService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeModeService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 
@@ -213,10 +213,10 @@ class ThemeSeasonService {
             return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeSeasonService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: ThemeSeasonService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeSeasonService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: ThemeSeasonService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeSeasonService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeSeasonService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-theme",
-  "version": "22.0.33",
+  "version": "22.0.35",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,8 +13,8 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-navigation": "^22.0.33",
-    "@ojiepermana/angular-component": "^22.0.33",
+    "@ojiepermana/angular-navigation": "^22.0.35",
+    "@ojiepermana/angular-component": "^22.0.35",
     "rxjs": ">=7.8.0"
   },
   "dependencies": {
@@ -48,6 +48,10 @@
       "types": "./types/ojiepermana-angular-theme-layout-types.d.ts",
       "default": "./fesm2022/ojiepermana-angular-theme-layout-types.mjs"
     },
+    "./layout/wrapper": {
+      "types": "./types/ojiepermana-angular-theme-layout-wrapper.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs"
+    },
     "./page": {
       "types": "./types/ojiepermana-angular-theme-page.d.ts",
       "default": "./fesm2022/ojiepermana-angular-theme-page.mjs"

package/types/ojiepermana-angular-theme-layout-wrapper.d.ts

@@ -0,0 +1,183 @@
+import * as _angular_core from '@angular/core';
+import { NavigationType, NavigationItem } from '@ojiepermana/angular-navigation';
+
+/**
+ * Bentuk identitas yang dikonsumsi wrapper layout. Library hanya mendefinisikan
+ * strukturnya; nilai konkret (brand/user) disediakan consumer sebagai input.
+ */
+interface BrandIdentity {
+    /** Nama untuk inisial/aria pada slot header. */
+    readonly name: string;
+    /** Material symbol untuk logo; `null` → pakai inisial dari `name`. */
+    readonly icon: string | null;
+    /** Judul brand. */
+    readonly title: string;
+    /** Subjudul brand. */
+    readonly subtitle: string;
+}
+interface UserIdentity {
+    /** Nama lengkap user (inisial + judul footer). */
+    readonly name: string;
+    /** Email / baris sekunder footer. */
+    readonly email: string;
+}
+
+/**
+ * Slot brand untuk `<NavigationHeader>`: inisial/logo + judul. Murni input-driven.
+ *
+ * `compact` (dockbar / rail ikon-only) menyembunyikan judul. `host.class = 'contents'`
+ * membuat `NavigationHeaderInitial` + `NavigationHeaderTitle` tetap menjadi flex-child
+ * langsung baris header; auto-hide judul saat sidebar collapsed (via `NAVIGATION_SHELL`)
+ * tetap berlaku karena DI mengalir lewat live tree ke `<Navigation>`.
+ */
+declare class LayoutBrand {
+    /** Identitas brand (nama, ikon, judul, subjudul). */
+    readonly brand: _angular_core.InputSignal<BrandIdentity>;
+    /** Sembunyikan judul, sisakan inisial saja (dockbar / rail ikon-only). */
+    readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutBrand, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutBrand, "LayoutBrand", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Slot user untuk `<NavigationFooter>`: identitas (opsional) + aksi logout. Murni input-driven.
+ *
+ * `detailed` menampilkan inisial + nama (sidebar penuh); tanpanya hanya tombol logout.
+ * `host.class = 'contents'` membuat anak menjadi flex-child langsung footer — `ml-auto` &
+ * auto-hide saat collapsed (via `NAVIGATION_SHELL`) tetap berlaku.
+ */
+declare class LayoutUser {
+    /** Identitas user (nama + email). */
+    readonly user: _angular_core.InputSignal<UserIdentity>;
+    /** Tampilkan identitas user (inisial + nama), bukan hanya tombol logout. */
+    readonly detailed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Label aksesibilitas tombol logout. */
+    readonly logoutLabel: _angular_core.InputSignal<string>;
+    /** Material symbol untuk tombol logout. */
+    readonly logoutIcon: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutUser, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutUser, "LayoutUser", never, { "user": { "alias": "user"; "required": true; "isSignal": true; }; "detailed": { "alias": "detailed"; "required": false; "isSignal": true; }; "logoutLabel": { "alias": "logoutLabel"; "required": false; "isSignal": true; }; "logoutIcon": { "alias": "logoutIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Tipe nav: sidebar vertikal collapsible (default). Brand header + identitas user di footer.
+ *
+ * `host.class = 'contents'` membuat `<NavigationSidebar>` menjadi anak efektif `<Navigation>`
+ * (h-full, shell-classes), sementara DI `NAVIGATION_SHELL` tetap mengalir lewat live tree dan
+ * `<NavigationHeader>` tetap direct child untuk content-projection library.
+ */
+declare class LayoutNavSidebar {
+    readonly brand: _angular_core.InputSignal<BrandIdentity>;
+    readonly user: _angular_core.InputSignal<UserIdentity>;
+    /** Appearance dari shell (`[appearance]`); `flat` menambahkan border kanan pemisah konten. */
+    readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
+    /** `flat` → border kanan; selaras border bawah navbar (`border-[1.5px] border-border`). */
+    protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavSidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavSidebar, "LayoutNavSidebar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Tipe nav: rail ikon vertikal (dockbar). Brand compact (inisial saja) + aksi logout.
+ * Lihat {@link LayoutNavSidebar} untuk alasan `host.class = 'contents'`.
+ */
+declare class LayoutNavDockbar {
+    readonly brand: _angular_core.InputSignal<BrandIdentity>;
+    readonly user: _angular_core.InputSignal<UserIdentity>;
+    /** Appearance dari shell (`[appearance]`); `flat` menambahkan border kanan pemisah konten. */
+    readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
+    /** `flat` → border kanan; selaras border bawah navbar (`border-[1.5px] border-border`). */
+    protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavDockbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavDockbar, "LayoutNavDockbar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Tipe nav: top bar item inline (navbar, horizontal). `appearance` selaras shell
+ * (`flat | border-rail`). Lihat {@link LayoutNavSidebar} untuk alasan `host.class = 'contents'`.
+ */
+declare class LayoutNavNavbar {
+    readonly brand: _angular_core.InputSignal<BrandIdentity>;
+    readonly user: _angular_core.InputSignal<UserIdentity>;
+    /** Appearance dari shell (`[nav-appearance]`). */
+    readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavNavbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavNavbar, "LayoutNavNavbar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Tipe nav: top bar dengan tombol trigger flyout (horizontal). `appearance` selaras shell.
+ * Lihat {@link LayoutNavSidebar} untuk alasan `host.class = 'contents'`.
+ */
+declare class LayoutNavFlyout {
+    readonly brand: _angular_core.InputSignal<BrandIdentity>;
+    readonly user: _angular_core.InputSignal<UserIdentity>;
+    /** Appearance dari shell (`[nav-appearance]`). */
+    readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavFlyout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavFlyout, "LayoutNavFlyout", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Tipe nav: sidebar brand-only untuk varian `empty` / `fluid` (nav disembunyikan oleh
+ * `LayoutNavigation`, jadi tanpa collapse & footer). Lihat {@link LayoutNavSidebar} untuk
+ * alasan `host.class = 'contents'`.
+ */
+declare class LayoutNavMinimal {
+    readonly brand: _angular_core.InputSignal<BrandIdentity>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavMinimal, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavMinimal, "LayoutNavMinimal", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Tipe nav yang dirender `@switch (navKind())`. `brand` = sidebar header-only (empty/fluid). */
+type NavKind = NavigationType | 'brand';
+/**
+ * Wrapper layout shell siap pakai — consumer cukup memberi data input, tidak perlu merakit
+ * `Layout > LayoutVertical/Horizontal/Empty/Fluid > LayoutNavigation > Navigation > tipe-nav`.
+ *
+ * ```html
+ * <LayoutWrapperDefault
+ *   [surface]="surface" [layout-appearance]="appearance" [width]="width"
+ *   [layout-type]="layoutType" [nav-type]="navType"
+ *   [data]="navItems" [brand]="brand" [user]="user"
+ * >
+ *   <router-outlet />   <!-- konten halaman diproyeksikan ke LayoutContent -->
+ * </LayoutWrapperDefault>
+ * ```
+ *
+ * `register*` default (LayoutService) tetap tanggung jawab consumer; wrapper ini murni
+ * presentational — dua sumbu (`effectiveLayoutType` → wrapper, `navKind` → tipe nav) di atas
+ * satu skeleton bersama. DI aman: `<Navigation>` mem-*provide* `NAVIGATION_SHELL` di dalam
+ * `#body`; tipe nav `display:contents` sehingga `<NavigationXxx>` jadi anak efektif `<Navigation>`.
+ */
+declare class LayoutWrapperDefault {
+    /** Surface latar shell (mis. `grid`, `flat`). */
+    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
+    /** Appearance shell & nav (`flat | border-rail`). */
+    readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
+    /** Lebar frame (`full`, `container`, dst.). */
+    readonly width: _angular_core.InputSignal<"full" | "wide" | "container" | "fluid">;
+    /** Tipe layout dasar (`vertical | horizontal | empty | fluid`); `empty`/`fluid` override nav. */
+    readonly layoutType: _angular_core.InputSignal<"fluid" | "vertical" | "horizontal" | "empty">;
+    /** Tipe navigasi (`sidebar | dockbar | navbar | flyout`); diabaikan saat `empty`/`fluid`. */
+    readonly navType: _angular_core.InputSignal<NavigationType>;
+    /** Item navigasi. */
+    readonly data: _angular_core.InputSignal<readonly NavigationItem[]>;
+    /** Identitas brand. */
+    readonly brand: _angular_core.InputSignal<BrandIdentity>;
+    /** Identitas user. */
+    readonly user: _angular_core.InputSignal<UserIdentity>;
+    /** Wrapper layout & nilai `<Layout [layout-type]>`: navbar/flyout = horizontal, sisanya vertical. */
+    protected readonly effectiveLayoutType: _angular_core.Signal<"fluid" | "vertical" | "horizontal" | "empty">;
+    /** Tipe nav di dalam `#body`: `empty`/`fluid` → `brand` (header-only); selain itu `nav-type`. */
+    protected readonly navKind: _angular_core.Signal<NavKind>;
+    /** Lebar host `<Navigation>`: penuh-tinggi (vertical) atau penuh-lebar (horizontal). */
+    protected readonly navClass: _angular_core.Signal<"w-full" | "h-full">;
+    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; selain itu padding biasa. */
+    protected readonly contentClass: _angular_core.Signal<"w-full max-w-3xl p-6" | "p-6">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutWrapperDefault, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutWrapperDefault, "LayoutWrapperDefault", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "layout-appearance"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "layoutType": { "alias": "layout-type"; "required": false; "isSignal": true; }; "navType": { "alias": "nav-type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { LayoutBrand, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };
+export type { BrandIdentity, UserIdentity };