@ojiepermana/angular 0.1.0 → 21.0.0

package/fesm2022/ojiepermana-angular-layout.mjs

@@ -1,461 +1,332 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, Directive, ChangeDetectionStrategy, Component, computed, isDevMode, makeEnvironmentProviders } from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { LocalStorageStateAdapter, libraryLucideConfigProvider } from '@ojiepermana/angular/internal';
+import { InjectionToken, inject, signal, effect, Injectable, input, computed, ChangeDetectionStrategy, Component, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { MatIconButton } from '@angular/material/button';
-import { MatTooltip } from '@angular/material/tooltip';
-import { LucideExpand, LucideShrink, LucidePanelLeft, LucidePanelTop, LucideAppWindow } from '@lucide/angular';
-import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { SidebarComponent, TopbarComponent } from '@ojiepermana/angular/navigation';
+import { ThemeService } from '@ojiepermana/angular/theme';
+import { DOCUMENT } from '@angular/common';
 
-const DEFAULT_NG_LAYOUT_CONFIG = {
+const LAYOUT_MODES = ['vertical', 'horizontal'];
+const LAYOUT_WIDTHS = ['full', 'fixed'];
+const MATERIAL_LAYOUT_CONFIG = new InjectionToken('MATERIAL_LAYOUT_CONFIG');
+const DEFAULT_MATERIAL_LAYOUT_CONFIG = {
     defaultMode: 'vertical',
-    defaultContainer: 'full',
+    defaultWidth: 'fixed',
+    storageKey: 'layout-mode',
+    widthStorageKey: 'layout-width',
 };
-const NG_LAYOUT_CONFIG = new InjectionToken('NG_LAYOUT_CONFIG', {
-    providedIn: 'root',
-    factory: () => ({ ...DEFAULT_NG_LAYOUT_CONFIG }),
-});
-
-const LAYOUT_MODES = ['vertical', 'horizontal', 'empty'];
-const LAYOUT_CONTAINERS = ['full', 'boxed'];
-const LAYOUT_MODE_SET = new Set(LAYOUT_MODES);
-const LAYOUT_CONTAINER_SET = new Set(LAYOUT_CONTAINERS);
 function isLayoutMode(value) {
-    return typeof value === 'string' && LAYOUT_MODE_SET.has(value);
+    return LAYOUT_MODES.some((mode) => mode === value);
 }
-function isLayoutContainer(value) {
-    return typeof value === 'string' && LAYOUT_CONTAINER_SET.has(value);
+function isLayoutWidth(value) {
+    return LAYOUT_WIDTHS.some((width) => width === value);
 }
 
-const STORAGE_KEYS = {
-    'layout-mode': 'layout-mode',
-    'layout-container': 'layout-container',
-};
-const LEGACY_STORAGE_PREFIX = 'ng-theme:v2';
 class LayoutService {
-    config = inject(NG_LAYOUT_CONFIG);
     document = inject(DOCUMENT);
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    storage = new LocalStorageStateAdapter({
-        isBrowser: this.isBrowser,
-        storage: this.document.defaultView?.localStorage ?? null,
-        keys: STORAGE_KEYS,
-        legacyPrefix: LEGACY_STORAGE_PREFIX,
-    });
-    mode = signal(this.storage.read('layout-mode', this.config.defaultMode, isLayoutMode), ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    container = signal(this.storage.read('layout-container', this.config.defaultContainer, isLayoutContainer), ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    config = this.resolveConfig();
+    _mode = signal(this.readPersistedMode() ?? this.config.defaultMode, ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
+    _width = signal(this.readPersistedWidth() ?? this.config.defaultWidth, ...(ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []));
+    mode = this._mode.asReadonly();
+    width = this._width.asReadonly();
     constructor() {
         effect(() => {
-            if (this.isBrowser) {
-                this.applyToDOM();
-            }
+            this.persistMode(this._mode());
+        });
+        effect(() => {
+            this.persistWidth(this._width());
         });
     }
-    /**
-     * Updates the active shell mode and persists the value for future sessions.
-     */
-    setMode(value) {
-        this.storage.persist('layout-mode', value);
-        this.mode.set(value);
+    setMode(mode) {
+        this._mode.set(mode);
+    }
+    toggleMode() {
+        this._mode.update((mode) => (mode === 'vertical' ? 'horizontal' : 'vertical'));
+    }
+    setWidth(width) {
+        this._width.set(width);
     }
-    /**
-     * Updates the active container width mode and persists the value for future sessions.
-     */
-    setContainer(value) {
-        this.storage.persist('layout-container', value);
-        this.container.set(value);
+    toggleWidth() {
+        this._width.update((width) => (width === 'fixed' ? 'full' : 'fixed'));
+    }
+    resolveConfig() {
+        const config = inject(MATERIAL_LAYOUT_CONFIG, { optional: true }) ?? {};
+        const configuredMode = config.mode ?? config.defaultMode;
+        const configuredWidth = config.width;
+        return {
+            defaultMode: isLayoutMode(configuredMode) ? configuredMode : DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultMode,
+            defaultWidth: isLayoutWidth(configuredWidth) ? configuredWidth : DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultWidth,
+            storageKey: config.storageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.storageKey,
+            widthStorageKey: config.widthStorageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.widthStorageKey,
+        };
+    }
+    readPersistedMode() {
+        const key = this.config.storageKey;
+        if (!key)
+            return null;
+        try {
+            const value = this.document.defaultView?.localStorage?.getItem(key);
+            return isLayoutMode(value) ? value : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    readPersistedWidth() {
+        const key = this.config.widthStorageKey;
+        if (!key)
+            return null;
+        try {
+            const value = this.document.defaultView?.localStorage?.getItem(key);
+            return isLayoutWidth(value) ? value : null;
+        }
+        catch {
+            return null;
+        }
     }
-    /**
-     * Clears persisted layout state and restores the configured defaults for mode and container.
-     */
-    reset() {
-        this.storage.clear('layout-mode');
-        this.storage.clear('layout-container');
-        this.mode.set(this.config.defaultMode);
-        this.container.set(this.config.defaultContainer);
+    persistMode(mode) {
+        const key = this.config.storageKey;
+        if (!key)
+            return;
+        try {
+            this.document.defaultView?.localStorage?.setItem(key, mode);
+        }
+        catch {
+            /* ignore */
+        }
     }
-    applyToDOM() {
-        const element = this.document.documentElement;
-        element.dataset['layoutMode'] = this.mode();
-        element.dataset['layoutContainer'] = this.container();
+    persistWidth(width) {
+        const key = this.config.widthStorageKey;
+        if (!key)
+            return;
+        try {
+            this.document.defaultView?.localStorage?.setItem(key, width);
+        }
+        catch {
+            /* ignore */
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-class LayoutHostDirective {
+/**
+ * Vertical layout — sidebar + main (scrollable).
+ *
+ * Data navigasi diambil dari `NavigationService` (register via
+ * `NavigationService.registerItems()` di bootstrap). Main memegang
+ * `<router-outlet>` dan scroll jika konten panjang.
+ *
+ * Markup:
+ * ```html
+ * <vertical>
+ *   <!-- sidebar + router-outlet dirender oleh komponen -->
+ * </vertical>
+ * ```
+ */
+class VerticalLayoutComponent {
     layout = inject(LayoutService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LayoutHostDirective, isStandalone: true, selector: "[ngtLayoutHost]", host: { properties: { "attr.data-layout-mode": "layout.mode()", "attr.data-layout-container": "layout.container()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutHostDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngtLayoutHost]',
-                    host: {
-                        '[attr.data-layout-mode]': 'layout.mode()',
-                        '[attr.data-layout-container]': 'layout.container()',
-                    },
-                }]
-        }] });
-
-class LayoutElementDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LayoutElementDirective, isStandalone: true, selector: "layout", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'layout',
-                }]
-        }] });
-class ContentElementDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContentElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: ContentElementDirective, isStandalone: true, selector: "content,shell-content", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContentElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'content,shell-content',
-                }]
-        }] });
-class BrandElementDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BrandElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: BrandElementDirective, isStandalone: true, selector: "brand", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BrandElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'brand',
-                }]
-        }] });
-class PanelElementDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PanelElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: PanelElementDirective, isStandalone: true, selector: "panel", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PanelElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'panel',
-                }]
-        }] });
-
-class LayoutHorizontalComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: LayoutHorizontalComponent, isStandalone: true, selector: "horizontal", host: { properties: { "attr.data-layout-mode": "\"horizontal\"" } }, ngImport: i0, template: `
-    <layout>
-      <shell-content>
-        <header>
-          <brand>
-            <ng-content select="[headerBrand]"></ng-content>
-          </brand>
-
-          <nav>
-            <ng-content select="[headerNavigation]"></ng-content>
-          </nav>
-
-          <panel>
-            <ng-content select="[headerActions]"></ng-content>
-          </panel>
-        </header>
-
-        <main>
-          <router-outlet />
-        </main>
-      </shell-content>
-    </layout>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: LayoutElementDirective, selector: "layout" }, { kind: "directive", type: ContentElementDirective, selector: "content,shell-content" }, { kind: "directive", type: BrandElementDirective, selector: "brand" }, { kind: "directive", type: PanelElementDirective, selector: "panel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'horizontal',
-                    imports: [
-                        RouterOutlet,
-                        LayoutElementDirective,
-                        ContentElementDirective,
-                        BrandElementDirective,
-                        PanelElementDirective,
-                    ],
-                    host: {
-                        '[attr.data-layout-mode]': '"horizontal"',
-                    },
-                    template: `
-    <layout>
-      <shell-content>
-        <header>
-          <brand>
-            <ng-content select="[headerBrand]"></ng-content>
-          </brand>
-
-          <nav>
-            <ng-content select="[headerNavigation]"></ng-content>
-          </nav>
-
-          <panel>
-            <ng-content select="[headerActions]"></ng-content>
-          </panel>
-        </header>
-
-        <main>
-          <router-outlet />
-        </main>
-      </shell-content>
-    </layout>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class LayoutVerticalComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: LayoutVerticalComponent, isStandalone: true, selector: "vertical", host: { properties: { "attr.data-layout-mode": "\"vertical\"" } }, ngImport: i0, template: `
-    <layout>
-      <shell-content>
-        <aside>
-          <ng-content select="[navigation]"></ng-content>
-        </aside>
-        <main>
-          <router-outlet />
-        </main>
-      </shell-content>
-    </layout>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: LayoutElementDirective, selector: "layout" }, { kind: "directive", type: ContentElementDirective, selector: "content,shell-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    theme = inject(ThemeService);
+    sidebarAppearance = input('default', ...(ngDevMode ? [{ debugName: "sidebarAppearance" }] : /* istanbul ignore next */ []));
+    sidebarPosition = input('left', ...(ngDevMode ? [{ debugName: "sidebarPosition" }] : /* istanbul ignore next */ []));
+    sidebarMode = input('side', ...(ngDevMode ? [{ debugName: "sidebarMode" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    layoutWidth = this.layout.width;
+    themeStyle = this.theme.style;
+    shellBorderWidth = computed(() => (this.layoutWidth() === 'fixed' ? 'var(--border-width)' : null), ...(ngDevMode ? [{ debugName: "shellBorderWidth" }] : /* istanbul ignore next */ []));
+    dividerBorderWidth = computed(() => 'var(--border-width)', ...(ngDevMode ? [{ debugName: "dividerBorderWidth" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['flex', 'h-dvh', 'w-full', 'overflow-hidden', 'bg-background', 'text-foreground'];
+        if (this.layoutWidth() === 'fixed') {
+            classes.push('lg:mx-auto', 'lg:my-8', 'lg:h-[calc(100dvh-4rem)]', 'lg:w-[calc(100%-4rem)]', 'lg:border', 'lg:border-border', 'lg:rounded-lg', 'lg:shadow-sm');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    mainClasses = computed(() => {
+        const classes = ['flex-1', 'overflow-auto'];
+        if (this.layoutWidth() === 'fixed')
+            classes.push('lg:mx-auto', 'lg:max-w-7xl');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: VerticalLayoutComponent, isStandalone: true, selector: "vertical", inputs: { sidebarAppearance: { classPropertyName: "sidebarAppearance", publicName: "sidebarAppearance", isSignal: true, isRequired: false, transformFunction: null }, sidebarPosition: { classPropertyName: "sidebarPosition", publicName: "sidebarPosition", isSignal: true, isRequired: false, transformFunction: null }, sidebarMode: { classPropertyName: "sidebarMode", publicName: "sidebarMode", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-layout-width": "layoutWidth()", "attr.data-style": "themeStyle()", "style.border-width": "shellBorderWidth()" } }, ngImport: i0, template: `
+    <ui-sidebar
+      [appearance]="sidebarAppearance()"
+      [position]="sidebarPosition()"
+      [ariaLabel]="ariaLabel()"
+      [style.border-left-width]="dividerBorderWidth()"
+      [style.border-right-width]="dividerBorderWidth()" />
+    <main [class]="mainClasses()">
+      <router-outlet />
+    </main>
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "ui-sidebar", inputs: ["items", "navigationId", "appearance", "position", "ariaLabel", "header", "class", "autoMobile", "autoRegister"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VerticalLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vertical',
-                    imports: [RouterOutlet, LayoutElementDirective, ContentElementDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterOutlet, SidebarComponent],
                     host: {
-                        '[attr.data-layout-mode]': '"vertical"',
+                        '[class]': 'hostClasses()',
+                        '[attr.data-layout-width]': 'layoutWidth()',
+                        '[attr.data-style]': 'themeStyle()',
+                        '[style.border-width]': 'shellBorderWidth()',
                     },
                     template: `
-    <layout>
-      <shell-content>
-        <aside>
-          <ng-content select="[navigation]"></ng-content>
-        </aside>
-        <main>
-          <router-outlet />
-        </main>
-      </shell-content>
-    </layout>
+    <ui-sidebar
+      [appearance]="sidebarAppearance()"
+      [position]="sidebarPosition()"
+      [ariaLabel]="ariaLabel()"
+      [style.border-left-width]="dividerBorderWidth()"
+      [style.border-right-width]="dividerBorderWidth()" />
+    <main [class]="mainClasses()">
+      <router-outlet />
+    </main>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { sidebarAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarAppearance", required: false }] }], sidebarPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarPosition", required: false }] }], sidebarMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarMode", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-class LayoutContainerSwitcherComponent {
+/**
+ * Horizontal layout — topbar (h-12) + main (scrollable).
+ *
+ * Data navigasi diambil dari `NavigationService`.
+ * Consumer app dapat memproyeksikan brand kiri dan profile kanan.
+ *
+ * Markup:
+ * ```html
+ * <horizontal>
+ *   <a ui-layout-brand>Brand</a>
+ *   <button ui-layout-profile type="button">Profile</button>
+ * </horizontal>
+ * ```
+ */
+class HorizontalLayoutComponent {
     layout = inject(LayoutService);
-    label = computed(() => this.layout.container() === 'boxed' ? 'Boxed layout container enabled' : 'Boxed layout container disabled', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    toggle() {
-        this.layout.setContainer(this.layout.container() === 'full' ? 'boxed' : 'full');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutContainerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LayoutContainerSwitcherComponent, isStandalone: true, selector: "layout-container-switcher", providers: [libraryLucideConfigProvider], ngImport: i0, template: `
-    <button
-      class="ngt-icon-button"
-      type="button"
-      mat-icon-button
-      aria-label="Boxed layout container"
-      [attr.aria-pressed]="layout.container() === 'boxed'"
-      [matTooltip]="label()"
-      (click)="toggle()">
-      @if (layout.container() === 'full') {
-        <svg lucideExpand aria-hidden="true"></svg>
-      } @else {
-        <svg lucideShrink aria-hidden="true"></svg>
-      }
-    </button>
-  `, isInline: true, dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideExpand, selector: "svg[lucideExpand]" }, { kind: "component", type: LucideShrink, selector: "svg[lucideShrink]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    theme = inject(ThemeService);
+    topbarAppearance = input('default', ...(ngDevMode ? [{ debugName: "topbarAppearance" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    layoutWidth = this.layout.width;
+    themeStyle = this.theme.style;
+    shellBorderWidth = computed(() => (this.layoutWidth() === 'fixed' ? 'var(--border-width)' : null), ...(ngDevMode ? [{ debugName: "shellBorderWidth" }] : /* istanbul ignore next */ []));
+    dividerBorderWidth = computed(() => 'var(--border-width)', ...(ngDevMode ? [{ debugName: "dividerBorderWidth" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['flex', 'h-dvh', 'w-full', 'flex-col', 'overflow-hidden', 'bg-background', 'text-foreground'];
+        if (this.layoutWidth() === 'fixed') {
+            classes.push('lg:mx-auto', 'lg:my-8', 'lg:max-w-7xl', 'lg:h-[calc(100dvh-4rem)]', 'lg:w-[calc(100%-4rem)]', 'lg:border', 'lg:border-border', 'lg:rounded-lg', 'lg:shadow-sm');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: HorizontalLayoutComponent, isStandalone: true, selector: "horizontal", inputs: { topbarAppearance: { classPropertyName: "topbarAppearance", publicName: "topbarAppearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-layout-width": "layoutWidth()", "attr.data-style": "themeStyle()", "style.border-width": "shellBorderWidth()" } }, ngImport: i0, template: `
+    <ui-topbar
+      class="h-12 w-full shrink-0 border-b border-border"
+      [style.border-bottom-width]="dividerBorderWidth()"
+      [appearance]="topbarAppearance()"
+      [ariaLabel]="ariaLabel()">
+      <div ui-topbar-start class="flex min-w-0 items-center">
+        <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
+      </div>
+      <div ui-topbar-end class="flex min-w-0 items-center">
+        <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
+      </div>
+    </ui-topbar>
+    <main class="flex-1 overflow-auto">
+      <router-outlet />
+    </main>
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TopbarComponent, selector: "ui-topbar", inputs: ["items", "navigationId", "appearance", "ariaLabel", "class", "autoRegister", "showHamburger", "hamburgerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutContainerSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HorizontalLayoutComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'layout-container-switcher',
-                    imports: [MatIconButton, MatTooltip, LucideExpand, LucideShrink],
-                    providers: [libraryLucideConfigProvider],
+                    selector: 'horizontal',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterOutlet, TopbarComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-layout-width]': 'layoutWidth()',
+                        '[attr.data-style]': 'themeStyle()',
+                        '[style.border-width]': 'shellBorderWidth()',
+                    },
                     template: `
-    <button
-      class="ngt-icon-button"
-      type="button"
-      mat-icon-button
-      aria-label="Boxed layout container"
-      [attr.aria-pressed]="layout.container() === 'boxed'"
-      [matTooltip]="label()"
-      (click)="toggle()">
-      @if (layout.container() === 'full') {
-        <svg lucideExpand aria-hidden="true"></svg>
-      } @else {
-        <svg lucideShrink aria-hidden="true"></svg>
-      }
-    </button>
+    <ui-topbar
+      class="h-12 w-full shrink-0 border-b border-border"
+      [style.border-bottom-width]="dividerBorderWidth()"
+      [appearance]="topbarAppearance()"
+      [ariaLabel]="ariaLabel()">
+      <div ui-topbar-start class="flex min-w-0 items-center">
+        <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
+      </div>
+      <div ui-topbar-end class="flex min-w-0 items-center">
+        <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
+      </div>
+    </ui-topbar>
+    <main class="flex-1 overflow-auto">
+      <router-outlet />
+    </main>
   `,
                 }]
-        }] });
-
-class LayoutModeSwitcherComponent {
-    layout = inject(LayoutService);
-    // Empty mode remains programmatic so the UI only exposes the two navigational shell variants.
-    options = [
-        { value: 'vertical', label: 'Vertical Sidebar' },
-        { value: 'horizontal', label: 'Horizontal Navbar' },
-    ];
-    currentOption = computed(() => this.options.find((option) => option.value === this.layout.mode()) ?? {
-        value: 'empty',
-        label: 'Content Only',
-    }, ...(ngDevMode ? [{ debugName: "currentOption" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutModeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LayoutModeSwitcherComponent, isStandalone: true, selector: "layout-mode-switcher", providers: [libraryLucideConfigProvider], ngImport: i0, template: `
-    <button
-      class="ngt-icon-button"
-      type="button"
-      mat-icon-button
-      [attr.aria-label]="'Layout mode: ' + currentOption().label"
-      [matTooltip]="'Layout mode: ' + currentOption().label"
-      [matMenuTriggerFor]="menu">
-      @switch (layout.mode()) {
-        @case ('vertical') {
-          <svg lucidePanelLeft aria-hidden="true"></svg>
-        }
-        @case ('horizontal') {
-          <svg lucidePanelTop aria-hidden="true"></svg>
-        }
-        @default {
-          <svg lucideAppWindow aria-hidden="true"></svg>
-        }
-      }
-    </button>
+        }], propDecorators: { topbarAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarAppearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-    <mat-menu #menu="matMenu">
-      @for (option of options; track option.value) {
-        <button
-          type="button"
-          mat-menu-item
-          role="menuitemradio"
-          [attr.aria-checked]="layout.mode() === option.value"
-          (click)="layout.setMode(option.value)">
-          @switch (option.value) {
-            @case ('vertical') {
-              <svg lucidePanelLeft aria-hidden="true"></svg>
-            }
-            @case ('horizontal') {
-              <svg lucidePanelTop aria-hidden="true"></svg>
-            }
-            @default {
-              <svg lucideAppWindow aria-hidden="true"></svg>
-            }
-          }
-          <span>{{ option.label }}</span>
-        </button>
-      }
-    </mat-menu>
-  `, isInline: true, dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: LucidePanelLeft, selector: "svg[lucidePanelLeft], svg[lucideSidebar]" }, { kind: "component", type: LucidePanelTop, selector: "svg[lucidePanelTop]" }, { kind: "component", type: LucideAppWindow, selector: "svg[lucideAppWindow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/**
+ * Empty layout — full-viewport, flex-centered main.
+ *
+ * Cocok untuk halaman login / error / onboarding (pola shadcn `login-05`).
+ * Konten dirender lewat `<router-outlet>`; consumer men-style card / form
+ * milik halaman route sendiri.
+ *
+ * Markup:
+ * ```html
+ * <empty>
+ *   <!-- router-outlet dirender oleh komponen -->
+ * </empty>
+ * ```
+ */
+class EmptyLayoutComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: EmptyLayoutComponent, isStandalone: true, selector: "empty", host: { classAttribute: "flex min-h-dvh w-full items-center justify-center bg-background p-6 text-foreground" }, ngImport: i0, template: `
+    <main class="w-full max-w-sm">
+      <router-outlet />
+    </main>
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LayoutModeSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'layout-mode-switcher',
-                    imports: [
-                        MatIconButton,
-                        MatTooltip,
-                        MatMenu,
-                        MatMenuItem,
-                        MatMenuTrigger,
-                        LucidePanelLeft,
-                        LucidePanelTop,
-                        LucideAppWindow,
-                    ],
-                    providers: [libraryLucideConfigProvider],
+                    selector: 'empty',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterOutlet],
+                    host: {
+                        class: 'flex min-h-dvh w-full items-center justify-center bg-background p-6 text-foreground',
+                    },
                     template: `
-    <button
-      class="ngt-icon-button"
-      type="button"
-      mat-icon-button
-      [attr.aria-label]="'Layout mode: ' + currentOption().label"
-      [matTooltip]="'Layout mode: ' + currentOption().label"
-      [matMenuTriggerFor]="menu">
-      @switch (layout.mode()) {
-        @case ('vertical') {
-          <svg lucidePanelLeft aria-hidden="true"></svg>
-        }
-        @case ('horizontal') {
-          <svg lucidePanelTop aria-hidden="true"></svg>
-        }
-        @default {
-          <svg lucideAppWindow aria-hidden="true"></svg>
-        }
-      }
-    </button>
-
-    <mat-menu #menu="matMenu">
-      @for (option of options; track option.value) {
-        <button
-          type="button"
-          mat-menu-item
-          role="menuitemradio"
-          [attr.aria-checked]="layout.mode() === option.value"
-          (click)="layout.setMode(option.value)">
-          @switch (option.value) {
-            @case ('vertical') {
-              <svg lucidePanelLeft aria-hidden="true"></svg>
-            }
-            @case ('horizontal') {
-              <svg lucidePanelTop aria-hidden="true"></svg>
-            }
-            @default {
-              <svg lucideAppWindow aria-hidden="true"></svg>
-            }
-          }
-          <span>{{ option.label }}</span>
-        </button>
-      }
-    </mat-menu>
+    <main class="w-full max-w-sm">
+      <router-outlet />
+    </main>
   `,
                 }]
         }] });
 
-function warnInvalidLayoutConfig(message) {
-    if (isDevMode()) {
-        console.warn(`[provideNgLayout] ${message}`);
-    }
-}
-function normalizeLayoutMode(value) {
-    if (typeof value === 'undefined' || isLayoutMode(value)) {
-        return value ?? DEFAULT_NG_LAYOUT_CONFIG.defaultMode;
-    }
-    warnInvalidLayoutConfig(`Ignoring invalid defaultMode ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_LAYOUT_CONFIG.defaultMode)}.`);
-    return DEFAULT_NG_LAYOUT_CONFIG.defaultMode;
-}
-function normalizeLayoutContainer(value) {
-    if (typeof value === 'undefined' || isLayoutContainer(value)) {
-        return value ?? DEFAULT_NG_LAYOUT_CONFIG.defaultContainer;
-    }
-    warnInvalidLayoutConfig(`Ignoring invalid defaultContainer ${JSON.stringify(value)}. Falling back to ${JSON.stringify(DEFAULT_NG_LAYOUT_CONFIG.defaultContainer)}.`);
-    return DEFAULT_NG_LAYOUT_CONFIG.defaultContainer;
-}
-function normalizeLayoutConfig(config) {
-    return {
-        ...DEFAULT_NG_LAYOUT_CONFIG,
-        defaultMode: normalizeLayoutMode(config.defaultMode),
-        defaultContainer: normalizeLayoutContainer(config.defaultContainer),
-    };
-}
-function provideNgLayout(config = {}) {
-    return makeEnvironmentProviders([{ provide: NG_LAYOUT_CONFIG, useValue: normalizeLayoutConfig(config) }]);
+function provideMaterialLayout(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: MATERIAL_LAYOUT_CONFIG, useValue: config },
+        provideEnvironmentInitializer(() => {
+            inject(LayoutService);
+        }),
+    ]);
 }
 
+/*
+ * Public API Surface of @ojiepermana/angular/layout
+ */
+const LAYOUT_VERSION = '0.0.1';
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LayoutContainerSwitcherComponent, LayoutHorizontalComponent, LayoutHostDirective, LayoutModeSwitcherComponent, LayoutService, LayoutVerticalComponent, NG_LAYOUT_CONFIG, provideNgLayout };
+export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutService, MATERIAL_LAYOUT_CONFIG, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, provideMaterialLayout };
 //# sourceMappingURL=ojiepermana-angular-layout.mjs.map