@ojiepermana/angular-theme 22.0.32 → 22.0.34

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

@@ -0,0 +1,577 @@
+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.2", ngImport: i0, type: LayoutBrand, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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.2", 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.2", ngImport: i0, type: LayoutUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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.2", 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 */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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 } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationSidebar nav-sidebar-collapse>
+      <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.2", ngImport: i0, type: LayoutNavSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavSidebar',
+                    imports: [
+                        NavigationSidebarComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationSidebar nav-sidebar-collapse>
+      <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 }] }] } });
+
+/**
+ * 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 */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavDockbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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 } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <NavigationDockbar>
+      <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.2", ngImport: i0, type: LayoutNavDockbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavDockbar',
+                    imports: [
+                        NavigationDockbarComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: { class: 'contents' },
+                    template: `
+    <NavigationDockbar>
+      <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 }] }] } });
+
+/**
+ * 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.2", ngImport: i0, type: LayoutNavNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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.2", 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.2", ngImport: i0, type: LayoutNavFlyout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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.2", 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.2", ngImport: i0, type: LayoutNavMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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.2", 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.2", ngImport: i0, type: LayoutWrapperDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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()" />
+              }
+              @case ('brand') {
+                <LayoutNavMinimal [brand]="brand()" />
+              }
+              @default {
+                <LayoutNavSidebar [brand]="brand()" [user]="user()" />
+              }
+            }
+          </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"] }, { kind: "component", type: LayoutNavDockbar, selector: "LayoutNavDockbar", inputs: ["brand", "user"] }, { 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.2", 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()" />
+              }
+              @case ('brand') {
+                <LayoutNavMinimal [brand]="brand()" />
+              }
+              @default {
+                <LayoutNavSidebar [brand]="brand()" [user]="user()" />
+              }
+            }
+          </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 };