@ojiepermana/angular 21.1.20 → 21.1.23

package/fesm2022/ojiepermana-angular-layout.mjs

@@ -125,10 +125,10 @@ class LayoutService {
             /* ignore */
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LayoutService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LayoutService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -143,7 +143,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Markup:
  * ```html
  * <vertical>
- *   <!-- sidebar + router-outlet dirender oleh komponen -->
+ *   <a ui-layout-brand>Brand</a>
+ *   <button ui-layout-profile type="button">Profile</button>
  * </vertical>
  * ```
  */
@@ -160,16 +161,19 @@ class VerticalLayoutComponent {
     isWideWidth = computed(() => this.layoutWidth() === 'wide', ...(ngDevMode ? [{ debugName: "isWideWidth" }] : /* istanbul ignore next */ []));
     shellBorderWidth = computed(() => (this.isConstrainedWidth() ? 'var(--border-width)' : null), ...(ngDevMode ? [{ debugName: "shellBorderWidth" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => {
-        const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'bg-background', 'text-foreground'];
+        const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'text-foreground'];
         if (this.isConstrainedWidth()) {
-            classes.push('box-border', 'lg:p-8');
+            classes.push('bg-primary/10', 'box-border', 'lg:p-8');
+        }
+        else {
+            classes.push('bg-background');
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     frameClasses = computed(() => {
-        const classes = ['flex', 'h-full', 'w-full', 'overflow-hidden'];
+        const classes = ['flex', 'h-full', 'w-full', 'overflow-hidden', 'bg-background'];
         if (this.isConstrainedWidth()) {
-            classes.push('lg:mx-auto', this.isWideWidth() ? 'lg:max-w-[calc(17.5rem+96rem)]' : 'lg:max-w-[calc(17.5rem+80rem)]', 'lg:border', 'lg:border-border', 'lg:rounded-lg', 'lg:shadow-sm');
+            classes.push('lg:mx-auto', this.isWideWidth() ? 'lg:max-w-[calc(17.5rem+96rem)]' : 'lg:max-w-[calc(17.5rem+80rem)]', 'lg:border', 'lg:border-primary/30', 'lg:rounded-lg', 'lg:shadow-sm');
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
@@ -183,17 +187,24 @@ class VerticalLayoutComponent {
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", 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()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: VerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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()" } }, ngImport: i0, template: `
     <div [class]="frameClasses()" [style.border-width]="shellBorderWidth()">
-      <sidebar [appearance]="sidebarAppearance()" [position]="sidebarPosition()" [ariaLabel]="ariaLabel()" />
+      <sidebar [appearance]="sidebarAppearance()" [position]="sidebarPosition()" [ariaLabel]="ariaLabel()">
+        <div sidebar-header class="contents">
+          <ng-content select="[ui-layout-brand],[sidebar-header]" />
+        </div>
+        <div sidebar-footer class="contents">
+          <ng-content select="[ui-layout-profile],[sidebar-footer]" />
+        </div>
+      </sidebar>
       <main [class]="mainClasses()">
         <router-outlet />
       </main>
     </div>
-  `, 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: "sidebar", inputs: ["items", "navigationId", "appearance", "position", "ariaLabel", "header", "class", "autoMobile", "autoRegister"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: "sidebar", inputs: ["items", "navigationId", "appearance", "borderSource", "position", "ariaLabel", "header", "class", "autoMobile", "autoRegister"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VerticalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: VerticalLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vertical',
@@ -206,7 +217,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     },
                     template: `
     <div [class]="frameClasses()" [style.border-width]="shellBorderWidth()">
-      <sidebar [appearance]="sidebarAppearance()" [position]="sidebarPosition()" [ariaLabel]="ariaLabel()" />
+      <sidebar [appearance]="sidebarAppearance()" [position]="sidebarPosition()" [ariaLabel]="ariaLabel()">
+        <div sidebar-header class="contents">
+          <ng-content select="[ui-layout-brand],[sidebar-header]" />
+        </div>
+        <div sidebar-footer class="contents">
+          <ng-content select="[ui-layout-profile],[sidebar-footer]" />
+        </div>
+      </sidebar>
       <main [class]="mainClasses()">
         <router-outlet />
       </main>
@@ -241,16 +259,19 @@ class HorizontalLayoutComponent {
     shellBorderWidth = computed(() => (this.isConstrainedWidth() ? '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 = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'bg-background', 'text-foreground'];
+        const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'text-foreground'];
         if (this.isConstrainedWidth()) {
-            classes.push('box-border', 'lg:p-8');
+            classes.push('bg-primary/10', 'box-border', 'lg:p-8');
+        }
+        else {
+            classes.push('bg-background');
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     frameClasses = computed(() => {
-        const classes = ['flex', 'h-full', 'w-full', 'flex-col', 'overflow-hidden'];
+        const classes = ['flex', 'h-full', 'w-full', 'flex-col', 'overflow-hidden', 'bg-background'];
         if (this.isConstrainedWidth()) {
-            classes.push('lg:border', 'lg:border-border', 'lg:rounded-lg', 'lg:shadow-sm');
+            classes.push('lg:border', 'lg:border-primary/30', 'lg:rounded-lg', 'lg:shadow-sm');
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
@@ -264,8 +285,8 @@ class HorizontalLayoutComponent {
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: HorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", 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()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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()" } }, ngImport: i0, template: `
     <div [class]="frameClasses()" [style.border-width]="shellBorderWidth()">
       <topbar
         class="w-full shrink-0 border-b border-border"
@@ -285,7 +306,7 @@ class HorizontalLayoutComponent {
     </div>
   `, 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: "topbar", inputs: ["items", "navigationId", "appearance", "ariaLabel", "class", "autoRegister", "showHamburger", "hamburgerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: HorizontalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HorizontalLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'horizontal',
@@ -333,14 +354,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * ```
  */
 class EmptyLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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.12", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'empty',

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

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-layout.mjs","sources":["../../../projects/angular/layout/src/lib/core/layout.tokens.ts","../../../projects/angular/layout/src/lib/core/layout.service.ts","../../../projects/angular/layout/src/lib/vertical/vertical.component.ts","../../../projects/angular/layout/src/lib/horizontal/horizontal.component.ts","../../../projects/angular/layout/src/lib/empty/empty.component.ts","../../../projects/angular/layout/src/lib/core/layout.provider.ts","../../../projects/angular/layout/public-api.ts","../../../projects/angular/layout/ojiepermana-angular-layout.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const LAYOUT_MODES = ['vertical', 'horizontal', 'empty'] as const;\n\nexport type LayoutMode = (typeof LAYOUT_MODES)[number];\n\nexport const LAYOUT_WIDTHS = ['full', 'container', 'wide'] as const;\n\nexport type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];\n\n/** @deprecated Use `container` instead. */\nexport type LegacyLayoutWidth = 'fixed';\n\nexport type ConfiguredLayoutWidth = LayoutWidth | LegacyLayoutWidth;\n\nexport interface MaterialLayoutConfig {\n  /** Initial layout mode. */\n  readonly mode?: LayoutMode;\n  /** Initial layout width. */\n  readonly width?: ConfiguredLayoutWidth;\n  /** @deprecated Use `mode` instead. */\n  /** Initial layout mode. Defaults to `vertical`. */\n  readonly defaultMode?: LayoutMode;\n  /** localStorage key used to persist the layout mode. Set to `null` to disable persistence. */\n  readonly storageKey?: string | null;\n  /** localStorage key used to persist the layout width. Set to `null` to disable persistence. */\n  readonly widthStorageKey?: string | null;\n}\n\nexport interface ResolvedMaterialLayoutConfig {\n  readonly defaultMode: LayoutMode;\n  readonly defaultWidth: LayoutWidth;\n  readonly storageKey: string | null;\n  readonly widthStorageKey: string | null;\n}\n\nexport const MATERIAL_LAYOUT_CONFIG = new InjectionToken<MaterialLayoutConfig>('MATERIAL_LAYOUT_CONFIG');\n\nexport const DEFAULT_MATERIAL_LAYOUT_CONFIG: ResolvedMaterialLayoutConfig = {\n  defaultMode: 'vertical',\n  defaultWidth: 'wide',\n  storageKey: 'layout-mode',\n  widthStorageKey: 'layout-width',\n};\n\nexport function isLayoutMode(value: string | null | undefined): value is LayoutMode {\n  return LAYOUT_MODES.some((mode) => mode === value);\n}\n\nexport function isLayoutWidth(value: string | null | undefined): value is LayoutWidth {\n  return LAYOUT_WIDTHS.some((width) => width === value);\n}\n\nexport function normalizeLayoutWidth(value: string | null | undefined): LayoutWidth | null {\n  if (isLayoutWidth(value)) {\n    return value;\n  }\n\n  if (value === 'fixed') {\n    return 'container';\n  }\n\n  return null;\n}\n","import { DOCUMENT } from '@angular/common';\nimport { Injectable, effect, inject, signal } from '@angular/core';\nimport {\n  DEFAULT_MATERIAL_LAYOUT_CONFIG,\n  LAYOUT_WIDTHS,\n  MATERIAL_LAYOUT_CONFIG,\n  isLayoutMode,\n  normalizeLayoutWidth,\n  type LayoutMode,\n  type LayoutWidth,\n  type ResolvedMaterialLayoutConfig,\n} from './layout.tokens';\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutService {\n  private readonly document = inject(DOCUMENT);\n  private readonly config = this.resolveConfig();\n\n  private readonly _mode = signal<LayoutMode>(this.readPersistedMode() ?? this.config.defaultMode);\n  private readonly _width = signal<LayoutWidth>(this.readPersistedWidth() ?? this.config.defaultWidth);\n\n  readonly mode = this._mode.asReadonly();\n  readonly width = this._width.asReadonly();\n\n  constructor() {\n    effect(() => {\n      this.persistMode(this._mode());\n    });\n\n    effect(() => {\n      this.persistWidth(this._width());\n    });\n  }\n\n  setMode(mode: LayoutMode): void {\n    this._mode.set(mode);\n  }\n\n  toggleMode(): void {\n    this._mode.update((mode) => {\n      if (mode === 'vertical') {\n        return 'horizontal';\n      }\n\n      if (mode === 'horizontal') {\n        return 'vertical';\n      }\n\n      return 'vertical';\n    });\n  }\n\n  setWidth(width: LayoutWidth): void {\n    this._width.set(width);\n  }\n\n  toggleWidth(): void {\n    this._width.update((width) => {\n      const currentIndex = LAYOUT_WIDTHS.indexOf(width);\n      return LAYOUT_WIDTHS[(currentIndex + 1) % LAYOUT_WIDTHS.length] ?? LAYOUT_WIDTHS[0];\n    });\n  }\n\n  private resolveConfig(): ResolvedMaterialLayoutConfig {\n    const config = inject(MATERIAL_LAYOUT_CONFIG, { optional: true }) ?? {};\n    const configuredMode = config.mode ?? config.defaultMode;\n    const configuredWidth = config.width;\n\n    return {\n      defaultMode: isLayoutMode(configuredMode) ? configuredMode : DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultMode,\n      defaultWidth: normalizeLayoutWidth(configuredWidth) ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultWidth,\n      storageKey: config.storageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.storageKey,\n      widthStorageKey: config.widthStorageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.widthStorageKey,\n    };\n  }\n\n  private readPersistedMode(): LayoutMode | null {\n    const key = this.config.storageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isLayoutMode(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedWidth(): LayoutWidth | null {\n    const key = this.config.widthStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return normalizeLayoutWidth(value);\n    } catch {\n      return null;\n    }\n  }\n\n  private persistMode(mode: LayoutMode): void {\n    const key = this.config.storageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, mode);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistWidth(width: LayoutWidth): void {\n    const key = this.config.widthStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, width);\n    } catch {\n      /* ignore */\n    }\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport {\n  SidebarComponent,\n  type SidebarAppearance,\n  type SidebarMode,\n  type SidebarPosition,\n} from '@ojiepermana/angular/navigation';\nimport { ThemeService } from '@ojiepermana/angular/theme';\nimport { LayoutService } from '../core/layout.service';\n\n/**\n * Vertical layout — sidebar + main (scrollable).\n *\n * Data navigasi diambil dari `NavigationService` (register via\n * `NavigationService.registerItems()` di bootstrap). Main memegang\n * `<router-outlet>` dan scroll jika konten panjang.\n *\n * Markup:\n * ```html\n * <vertical>\n *   <!-- sidebar + router-outlet dirender oleh komponen -->\n * </vertical>\n * ```\n */\n@Component({\n  selector: 'vertical',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterOutlet, SidebarComponent],\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.data-layout-width]': 'layoutWidth()',\n    '[attr.data-style]': 'themeStyle()',\n  },\n  template: `\n    <div [class]=\"frameClasses()\" [style.border-width]=\"shellBorderWidth()\">\n      <sidebar [appearance]=\"sidebarAppearance()\" [position]=\"sidebarPosition()\" [ariaLabel]=\"ariaLabel()\" />\n      <main [class]=\"mainClasses()\">\n        <router-outlet />\n      </main>\n    </div>\n  `,\n})\nexport class VerticalLayoutComponent {\n  private readonly layout = inject(LayoutService);\n  private readonly theme = inject(ThemeService);\n\n  readonly sidebarAppearance = input<SidebarAppearance>('default');\n  readonly sidebarPosition = input<SidebarPosition>('left');\n  readonly sidebarMode = input<SidebarMode>('side');\n  readonly ariaLabel = input<string>('Primary');\n\n  protected readonly layoutWidth = this.layout.width;\n  protected readonly themeStyle = this.theme.style;\n  protected readonly isConstrainedWidth = computed(() => this.layoutWidth() !== 'full');\n  protected readonly isWideWidth = computed(() => this.layoutWidth() === 'wide');\n  protected readonly shellBorderWidth = computed(() => (this.isConstrainedWidth() ? 'var(--border-width)' : null));\n\n  protected readonly hostClasses = computed(() => {\n    const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'bg-background', 'text-foreground'];\n    if (this.isConstrainedWidth()) {\n      classes.push('box-border', 'lg:p-8');\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly frameClasses = computed(() => {\n    const classes = ['flex', 'h-full', 'w-full', 'overflow-hidden'];\n    if (this.isConstrainedWidth()) {\n      classes.push(\n        'lg:mx-auto',\n        this.isWideWidth() ? 'lg:max-w-[calc(17.5rem+96rem)]' : 'lg:max-w-[calc(17.5rem+80rem)]',\n        'lg:border',\n        'lg:border-border',\n        'lg:rounded-lg',\n        'lg:shadow-sm',\n      );\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly mainClasses = computed(() => {\n    const classes = ['min-w-0', 'flex-1', 'overflow-auto'];\n    if (this.layoutWidth() === 'container') {\n      classes.push('w-full', 'max-w-7xl');\n    } else if (this.isWideWidth()) {\n      classes.push('w-full', 'max-w-screen-2xl');\n    }\n    return classes.join(' ');\n  });\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { TopbarComponent, type TopbarAppearance } from '@ojiepermana/angular/navigation';\nimport { ThemeService } from '@ojiepermana/angular/theme';\nimport { LayoutService } from '../core/layout.service';\n\n/**\n * Horizontal layout — themed topbar + main (scrollable).\n *\n * Data navigasi diambil dari `NavigationService`.\n * Consumer app dapat memproyeksikan brand kiri dan profile kanan.\n *\n * Markup:\n * ```html\n * <horizontal>\n *   <a ui-layout-brand>Brand</a>\n *   <button ui-layout-profile type=\"button\">Profile</button>\n * </horizontal>\n * ```\n */\n@Component({\n  selector: 'horizontal',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterOutlet, TopbarComponent],\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.data-layout-width]': 'layoutWidth()',\n    '[attr.data-style]': 'themeStyle()',\n  },\n  template: `\n    <div [class]=\"frameClasses()\" [style.border-width]=\"shellBorderWidth()\">\n      <topbar\n        class=\"w-full shrink-0 border-b border-border\"\n        [style.border-bottom-width]=\"dividerBorderWidth()\"\n        [appearance]=\"topbarAppearance()\"\n        [ariaLabel]=\"ariaLabel()\">\n        <div topbar-start class=\"flex min-w-0 items-center\">\n          <ng-content select=\"[ui-layout-brand],[topbar-start]\" />\n        </div>\n        <div topbar-end class=\"flex min-w-0 items-center\">\n          <ng-content select=\"[ui-layout-profile],[topbar-end]\" />\n        </div>\n      </topbar>\n      <main [class]=\"mainClasses()\">\n        <router-outlet />\n      </main>\n    </div>\n  `,\n})\nexport class HorizontalLayoutComponent {\n  private readonly layout = inject(LayoutService);\n  private readonly theme = inject(ThemeService);\n\n  readonly topbarAppearance = input<TopbarAppearance>('default');\n  readonly ariaLabel = input<string>('Primary');\n\n  protected readonly layoutWidth = this.layout.width;\n  protected readonly themeStyle = this.theme.style;\n  protected readonly isConstrainedWidth = computed(() => this.layoutWidth() !== 'full');\n  protected readonly isWideWidth = computed(() => this.layoutWidth() === 'wide');\n  protected readonly shellBorderWidth = computed(() => (this.isConstrainedWidth() ? 'var(--border-width)' : null));\n  protected readonly dividerBorderWidth = computed(() => 'var(--border-width)');\n\n  protected readonly hostClasses = computed(() => {\n    const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'bg-background', 'text-foreground'];\n    if (this.isConstrainedWidth()) {\n      classes.push('box-border', 'lg:p-8');\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly frameClasses = computed(() => {\n    const classes = ['flex', 'h-full', 'w-full', 'flex-col', 'overflow-hidden'];\n    if (this.isConstrainedWidth()) {\n      classes.push('lg:border', 'lg:border-border', 'lg:rounded-lg', 'lg:shadow-sm');\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly mainClasses = computed(() => {\n    const classes = ['min-w-0', 'flex-1', 'overflow-auto'];\n    if (this.layoutWidth() === 'container') {\n      classes.push('mx-auto', 'w-full', 'max-w-7xl');\n    } else if (this.isWideWidth()) {\n      classes.push('mx-auto', 'w-full', 'max-w-screen-2xl');\n    }\n    return classes.join(' ');\n  });\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\n/**\n * Empty layout — full-viewport, flex-centered main.\n *\n * Cocok untuk halaman login / error / onboarding (pola shadcn `login-05`).\n * Konten dirender lewat `<router-outlet>`; consumer men-style card / form\n * milik halaman route sendiri.\n *\n * Markup:\n * ```html\n * <empty>\n *   <!-- router-outlet dirender oleh komponen -->\n * </empty>\n * ```\n */\n@Component({\n  selector: 'empty',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterOutlet],\n  host: {\n    class: 'flex min-h-dvh w-full items-center justify-center bg-background p-6 text-foreground',\n  },\n  template: `\n    <main class=\"w-full max-w-sm\">\n      <router-outlet />\n    </main>\n  `,\n})\nexport class EmptyLayoutComponent {}\n","import {\n  inject,\n  type EnvironmentProviders,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\nimport { LayoutService } from './layout.service';\nimport { MATERIAL_LAYOUT_CONFIG, type MaterialLayoutConfig } from './layout.tokens';\n\nexport function provideMaterialLayout(config: MaterialLayoutConfig = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: MATERIAL_LAYOUT_CONFIG, useValue: config },\n    provideEnvironmentInitializer(() => {\n      inject(LayoutService);\n    }),\n  ]);\n}\n","/*\n * Public API Surface of @ojiepermana/angular/layout\n */\n\nexport * from './src/lib/vertical/vertical.component';\nexport * from './src/lib/horizontal/horizontal.component';\nexport * from './src/lib/empty/empty.component';\nexport * from './src/lib/core/layout.tokens';\nexport * from './src/lib/core/layout.service';\nexport * from './src/lib/core/layout.provider';\n\nexport const LAYOUT_VERSION = '0.0.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ojiepermana-angular-layout.mjs","sources":["../../../projects/angular/layout/src/lib/core/layout.tokens.ts","../../../projects/angular/layout/src/lib/core/layout.service.ts","../../../projects/angular/layout/src/lib/vertical/vertical.component.ts","../../../projects/angular/layout/src/lib/horizontal/horizontal.component.ts","../../../projects/angular/layout/src/lib/empty/empty.component.ts","../../../projects/angular/layout/src/lib/core/layout.provider.ts","../../../projects/angular/layout/public-api.ts","../../../projects/angular/layout/ojiepermana-angular-layout.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const LAYOUT_MODES = ['vertical', 'horizontal', 'empty'] as const;\n\nexport type LayoutMode = (typeof LAYOUT_MODES)[number];\n\nexport const LAYOUT_WIDTHS = ['full', 'container', 'wide'] as const;\n\nexport type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];\n\n/** @deprecated Use `container` instead. */\nexport type LegacyLayoutWidth = 'fixed';\n\nexport type ConfiguredLayoutWidth = LayoutWidth | LegacyLayoutWidth;\n\nexport interface MaterialLayoutConfig {\n  /** Initial layout mode. */\n  readonly mode?: LayoutMode;\n  /** Initial layout width. */\n  readonly width?: ConfiguredLayoutWidth;\n  /** @deprecated Use `mode` instead. */\n  /** Initial layout mode. Defaults to `vertical`. */\n  readonly defaultMode?: LayoutMode;\n  /** localStorage key used to persist the layout mode. Set to `null` to disable persistence. */\n  readonly storageKey?: string | null;\n  /** localStorage key used to persist the layout width. Set to `null` to disable persistence. */\n  readonly widthStorageKey?: string | null;\n}\n\nexport interface ResolvedMaterialLayoutConfig {\n  readonly defaultMode: LayoutMode;\n  readonly defaultWidth: LayoutWidth;\n  readonly storageKey: string | null;\n  readonly widthStorageKey: string | null;\n}\n\nexport const MATERIAL_LAYOUT_CONFIG = new InjectionToken<MaterialLayoutConfig>('MATERIAL_LAYOUT_CONFIG');\n\nexport const DEFAULT_MATERIAL_LAYOUT_CONFIG: ResolvedMaterialLayoutConfig = {\n  defaultMode: 'vertical',\n  defaultWidth: 'wide',\n  storageKey: 'layout-mode',\n  widthStorageKey: 'layout-width',\n};\n\nexport function isLayoutMode(value: string | null | undefined): value is LayoutMode {\n  return LAYOUT_MODES.some((mode) => mode === value);\n}\n\nexport function isLayoutWidth(value: string | null | undefined): value is LayoutWidth {\n  return LAYOUT_WIDTHS.some((width) => width === value);\n}\n\nexport function normalizeLayoutWidth(value: string | null | undefined): LayoutWidth | null {\n  if (isLayoutWidth(value)) {\n    return value;\n  }\n\n  if (value === 'fixed') {\n    return 'container';\n  }\n\n  return null;\n}\n","import { DOCUMENT } from '@angular/common';\nimport { Injectable, effect, inject, signal } from '@angular/core';\nimport {\n  DEFAULT_MATERIAL_LAYOUT_CONFIG,\n  LAYOUT_WIDTHS,\n  MATERIAL_LAYOUT_CONFIG,\n  isLayoutMode,\n  normalizeLayoutWidth,\n  type LayoutMode,\n  type LayoutWidth,\n  type ResolvedMaterialLayoutConfig,\n} from './layout.tokens';\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutService {\n  private readonly document = inject(DOCUMENT);\n  private readonly config = this.resolveConfig();\n\n  private readonly _mode = signal<LayoutMode>(this.readPersistedMode() ?? this.config.defaultMode);\n  private readonly _width = signal<LayoutWidth>(this.readPersistedWidth() ?? this.config.defaultWidth);\n\n  readonly mode = this._mode.asReadonly();\n  readonly width = this._width.asReadonly();\n\n  constructor() {\n    effect(() => {\n      this.persistMode(this._mode());\n    });\n\n    effect(() => {\n      this.persistWidth(this._width());\n    });\n  }\n\n  setMode(mode: LayoutMode): void {\n    this._mode.set(mode);\n  }\n\n  toggleMode(): void {\n    this._mode.update((mode) => {\n      if (mode === 'vertical') {\n        return 'horizontal';\n      }\n\n      if (mode === 'horizontal') {\n        return 'vertical';\n      }\n\n      return 'vertical';\n    });\n  }\n\n  setWidth(width: LayoutWidth): void {\n    this._width.set(width);\n  }\n\n  toggleWidth(): void {\n    this._width.update((width) => {\n      const currentIndex = LAYOUT_WIDTHS.indexOf(width);\n      return LAYOUT_WIDTHS[(currentIndex + 1) % LAYOUT_WIDTHS.length] ?? LAYOUT_WIDTHS[0];\n    });\n  }\n\n  private resolveConfig(): ResolvedMaterialLayoutConfig {\n    const config = inject(MATERIAL_LAYOUT_CONFIG, { optional: true }) ?? {};\n    const configuredMode = config.mode ?? config.defaultMode;\n    const configuredWidth = config.width;\n\n    return {\n      defaultMode: isLayoutMode(configuredMode) ? configuredMode : DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultMode,\n      defaultWidth: normalizeLayoutWidth(configuredWidth) ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultWidth,\n      storageKey: config.storageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.storageKey,\n      widthStorageKey: config.widthStorageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.widthStorageKey,\n    };\n  }\n\n  private readPersistedMode(): LayoutMode | null {\n    const key = this.config.storageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isLayoutMode(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedWidth(): LayoutWidth | null {\n    const key = this.config.widthStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return normalizeLayoutWidth(value);\n    } catch {\n      return null;\n    }\n  }\n\n  private persistMode(mode: LayoutMode): void {\n    const key = this.config.storageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, mode);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistWidth(width: LayoutWidth): void {\n    const key = this.config.widthStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, width);\n    } catch {\n      /* ignore */\n    }\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport {\n  SidebarComponent,\n  type SidebarAppearance,\n  type SidebarMode,\n  type SidebarPosition,\n} from '@ojiepermana/angular/navigation';\nimport { ThemeService } from '@ojiepermana/angular/theme';\nimport { LayoutService } from '../core/layout.service';\n\n/**\n * Vertical layout — sidebar + main (scrollable).\n *\n * Data navigasi diambil dari `NavigationService` (register via\n * `NavigationService.registerItems()` di bootstrap). Main memegang\n * `<router-outlet>` dan scroll jika konten panjang.\n *\n * Markup:\n * ```html\n * <vertical>\n *   <a ui-layout-brand>Brand</a>\n *   <button ui-layout-profile type=\"button\">Profile</button>\n * </vertical>\n * ```\n */\n@Component({\n  selector: 'vertical',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterOutlet, SidebarComponent],\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.data-layout-width]': 'layoutWidth()',\n    '[attr.data-style]': 'themeStyle()',\n  },\n  template: `\n    <div [class]=\"frameClasses()\" [style.border-width]=\"shellBorderWidth()\">\n      <sidebar [appearance]=\"sidebarAppearance()\" [position]=\"sidebarPosition()\" [ariaLabel]=\"ariaLabel()\">\n        <div sidebar-header class=\"contents\">\n          <ng-content select=\"[ui-layout-brand],[sidebar-header]\" />\n        </div>\n        <div sidebar-footer class=\"contents\">\n          <ng-content select=\"[ui-layout-profile],[sidebar-footer]\" />\n        </div>\n      </sidebar>\n      <main [class]=\"mainClasses()\">\n        <router-outlet />\n      </main>\n    </div>\n  `,\n})\nexport class VerticalLayoutComponent {\n  private readonly layout = inject(LayoutService);\n  private readonly theme = inject(ThemeService);\n\n  readonly sidebarAppearance = input<SidebarAppearance>('default');\n  readonly sidebarPosition = input<SidebarPosition>('left');\n  readonly sidebarMode = input<SidebarMode>('side');\n  readonly ariaLabel = input<string>('Primary');\n\n  protected readonly layoutWidth = this.layout.width;\n  protected readonly themeStyle = this.theme.style;\n  protected readonly isConstrainedWidth = computed(() => this.layoutWidth() !== 'full');\n  protected readonly isWideWidth = computed(() => this.layoutWidth() === 'wide');\n  protected readonly shellBorderWidth = computed(() => (this.isConstrainedWidth() ? 'var(--border-width)' : null));\n\n  protected readonly hostClasses = computed(() => {\n    const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'text-foreground'];\n    if (this.isConstrainedWidth()) {\n      classes.push('bg-primary/10', 'box-border', 'lg:p-8');\n    } else {\n      classes.push('bg-background');\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly frameClasses = computed(() => {\n    const classes = ['flex', 'h-full', 'w-full', 'overflow-hidden', 'bg-background'];\n    if (this.isConstrainedWidth()) {\n      classes.push(\n        'lg:mx-auto',\n        this.isWideWidth() ? 'lg:max-w-[calc(17.5rem+96rem)]' : 'lg:max-w-[calc(17.5rem+80rem)]',\n        'lg:border',\n        'lg:border-primary/30',\n        'lg:rounded-lg',\n        'lg:shadow-sm',\n      );\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly mainClasses = computed(() => {\n    const classes = ['min-w-0', 'flex-1', 'overflow-auto'];\n    if (this.layoutWidth() === 'container') {\n      classes.push('w-full', 'max-w-7xl');\n    } else if (this.isWideWidth()) {\n      classes.push('w-full', 'max-w-screen-2xl');\n    }\n    return classes.join(' ');\n  });\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { TopbarComponent, type TopbarAppearance } from '@ojiepermana/angular/navigation';\nimport { ThemeService } from '@ojiepermana/angular/theme';\nimport { LayoutService } from '../core/layout.service';\n\n/**\n * Horizontal layout — themed topbar + main (scrollable).\n *\n * Data navigasi diambil dari `NavigationService`.\n * Consumer app dapat memproyeksikan brand kiri dan profile kanan.\n *\n * Markup:\n * ```html\n * <horizontal>\n *   <a ui-layout-brand>Brand</a>\n *   <button ui-layout-profile type=\"button\">Profile</button>\n * </horizontal>\n * ```\n */\n@Component({\n  selector: 'horizontal',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterOutlet, TopbarComponent],\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.data-layout-width]': 'layoutWidth()',\n    '[attr.data-style]': 'themeStyle()',\n  },\n  template: `\n    <div [class]=\"frameClasses()\" [style.border-width]=\"shellBorderWidth()\">\n      <topbar\n        class=\"w-full shrink-0 border-b border-border\"\n        [style.border-bottom-width]=\"dividerBorderWidth()\"\n        [appearance]=\"topbarAppearance()\"\n        [ariaLabel]=\"ariaLabel()\">\n        <div topbar-start class=\"flex min-w-0 items-center\">\n          <ng-content select=\"[ui-layout-brand],[topbar-start]\" />\n        </div>\n        <div topbar-end class=\"flex min-w-0 items-center\">\n          <ng-content select=\"[ui-layout-profile],[topbar-end]\" />\n        </div>\n      </topbar>\n      <main [class]=\"mainClasses()\">\n        <router-outlet />\n      </main>\n    </div>\n  `,\n})\nexport class HorizontalLayoutComponent {\n  private readonly layout = inject(LayoutService);\n  private readonly theme = inject(ThemeService);\n\n  readonly topbarAppearance = input<TopbarAppearance>('default');\n  readonly ariaLabel = input<string>('Primary');\n\n  protected readonly layoutWidth = this.layout.width;\n  protected readonly themeStyle = this.theme.style;\n  protected readonly isConstrainedWidth = computed(() => this.layoutWidth() !== 'full');\n  protected readonly isWideWidth = computed(() => this.layoutWidth() === 'wide');\n  protected readonly shellBorderWidth = computed(() => (this.isConstrainedWidth() ? 'var(--border-width)' : null));\n  protected readonly dividerBorderWidth = computed(() => 'var(--border-width)');\n\n  protected readonly hostClasses = computed(() => {\n    const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'text-foreground'];\n    if (this.isConstrainedWidth()) {\n      classes.push('bg-primary/10', 'box-border', 'lg:p-8');\n    } else {\n      classes.push('bg-background');\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly frameClasses = computed(() => {\n    const classes = ['flex', 'h-full', 'w-full', 'flex-col', 'overflow-hidden', 'bg-background'];\n    if (this.isConstrainedWidth()) {\n      classes.push('lg:border', 'lg:border-primary/30', 'lg:rounded-lg', 'lg:shadow-sm');\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly mainClasses = computed(() => {\n    const classes = ['min-w-0', 'flex-1', 'overflow-auto'];\n    if (this.layoutWidth() === 'container') {\n      classes.push('mx-auto', 'w-full', 'max-w-7xl');\n    } else if (this.isWideWidth()) {\n      classes.push('mx-auto', 'w-full', 'max-w-screen-2xl');\n    }\n    return classes.join(' ');\n  });\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\n/**\n * Empty layout — full-viewport, flex-centered main.\n *\n * Cocok untuk halaman login / error / onboarding (pola shadcn `login-05`).\n * Konten dirender lewat `<router-outlet>`; consumer men-style card / form\n * milik halaman route sendiri.\n *\n * Markup:\n * ```html\n * <empty>\n *   <!-- router-outlet dirender oleh komponen -->\n * </empty>\n * ```\n */\n@Component({\n  selector: 'empty',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterOutlet],\n  host: {\n    class: 'flex min-h-dvh w-full items-center justify-center bg-background p-6 text-foreground',\n  },\n  template: `\n    <main class=\"w-full max-w-sm\">\n      <router-outlet />\n    </main>\n  `,\n})\nexport class EmptyLayoutComponent {}\n","import {\n  inject,\n  type EnvironmentProviders,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\nimport { LayoutService } from './layout.service';\nimport { MATERIAL_LAYOUT_CONFIG, type MaterialLayoutConfig } from './layout.tokens';\n\nexport function provideMaterialLayout(config: MaterialLayoutConfig = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: MATERIAL_LAYOUT_CONFIG, useValue: config },\n    provideEnvironmentInitializer(() => {\n      inject(LayoutService);\n    }),\n  ]);\n}\n","/*\n * Public API Surface of @ojiepermana/angular/layout\n */\n\nexport * from './src/lib/vertical/vertical.component';\nexport * from './src/lib/horizontal/horizontal.component';\nexport * from './src/lib/empty/empty.component';\nexport * from './src/lib/core/layout.tokens';\nexport * from './src/lib/core/layout.service';\nexport * from './src/lib/core/layout.provider';\n\nexport const LAYOUT_VERSION = '0.0.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -197,10 +197,10 @@ class NavigationService {
             /* ignore */
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NavigationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NavigationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -240,10 +240,10 @@ class UiNavIconComponent {
         link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
         this.doc.head.appendChild(link);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UiNavIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UiNavIconComponent, isStandalone: true, selector: "ui-nav-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "size()", "style.font-variation-settings": "fontVariationSettings" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UiNavIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: UiNavIconComponent, isStandalone: true, selector: "ui-nav-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "size()", "style.font-variation-settings": "fontVariationSettings" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UiNavIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UiNavIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-nav-icon',
@@ -323,8 +323,8 @@ class UiNavItemComponent {
             item.action(item);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UiNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UiNavItemComponent, isStandalone: true, selector: "ui-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UiNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: UiNavItemComponent, isStandalone: true, selector: "ui-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @switch (type()) {
       @case ('divider') {
         <hr class="my-2 border-t border-border" role="separator" />
@@ -527,7 +527,7 @@ class UiNavItemComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UiNavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UiNavItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-nav-item',
@@ -761,6 +761,8 @@ class SidebarComponent {
     /** Registry key di `NavigationService`. Default `'main'`. */
     navigationId = input(DEFAULT_NAVIGATION_ID, ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
     appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Desktop border can be owned by the sidebar or by the surrounding layout shell. */
+    borderSource = input('component', ...(ngDevMode ? [{ debugName: "borderSource" }] : /* istanbul ignore next */ []));
     position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     header = input(true, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
@@ -822,21 +824,28 @@ class SidebarComponent {
             base.push('w-16');
         else
             base.push('[width:17.5rem]');
-        if (this.position() === 'right')
-            base.push('border-l', 'border-brand');
+        if (this.borderSource() === 'component') {
+            if (this.position() === 'right')
+                base.push('border-l', 'border-primary/30');
+            else
+                base.push('border-r', 'border-primary/30');
+        }
         return [...base, this.class()].join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     headerClasses = computed(() => {
-        const base = ['flex h-12 items-center gap-2 border-b border-brand'];
+        const base = ['flex items-center gap-1 border-b border-primary/30'];
         if (this.isCompact()) {
-            base.push('justify-center px-2');
+            base.push('h-12', 'justify-center', 'px-2');
+        }
+        else {
+            base.push('h-12', 'pr-2');
         }
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
     headerSlotClasses = computed(() => {
         const base = ['min-w-0'];
         if (this.isCompact()) {
-            base.push('flex flex-1 items-center justify-center overflow-hidden', '[&>[sidebar-header]>*]:mx-auto', '[&>[sidebar-header]>*]:max-w-full', '[&>[sidebar-header]>*]:shrink-0');
+            base.push('flex flex-1 items-center justify-center overflow-hidden', '[&>[sidebar-header]>*]:mx-auto', '[&>[sidebar-header]>*]:w-auto', '[&>[sidebar-header]>*]:max-w-full', '[&>[sidebar-header]>*]:justify-center', '[&>[sidebar-header]>*]:gap-0', '[&>[sidebar-header]>*]:px-0', '[&>[sidebar-header]>*]:shrink-0', '[&>[sidebar-header]>*>*:first-child]:mx-auto', '[&>[sidebar-header]>*>*:nth-child(n+2)]:hidden');
         }
         else {
             base.push('flex min-w-0 flex-1 items-center');
@@ -844,14 +853,15 @@ class SidebarComponent {
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "headerSlotClasses" }] : /* istanbul ignore next */ []));
     navClasses = computed(() => {
-        const base = ['min-h-full overflow-x-hidden'];
+        const base = ['min-h-full'];
         if (this.isCompact()) {
             base.push('px-2', '[&_.ui-nav-text]:mx-auto', '[&_.ui-nav-text]:w-10', '[&_.ui-nav-text]:justify-center', '[&_.ui-nav-text]:px-0');
         }
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []));
+    scrollViewportClasses = computed(() => 'overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10', ...(ngDevMode ? [{ debugName: "scrollViewportClasses" }] : /* istanbul ignore next */ []));
     footerClasses = computed(() => {
-        const base = ['h-12 border-t border-brand'];
+        const base = ['h-12 border-t border-primary/30'];
         if (this.isCompact()) {
             base.push('flex items-center justify-center px-2');
         }
@@ -874,7 +884,7 @@ class SidebarComponent {
             base.push('bg-background');
         }
         if (overlayActive) {
-            base.push('absolute inset-y-0 z-30 shadow-xl [width:17.5rem]', this.position() === 'right' ? 'right-0 border-l border-brand' : 'left-0 border-r border-brand');
+            base.push('absolute inset-y-0 z-30 shadow-xl [width:17.5rem]', this.position() === 'right' ? 'right-0 border-l border-primary/30' : 'left-0 border-r border-primary/30');
         }
         else {
             base.push('w-full');
@@ -953,8 +963,8 @@ class SidebarComponent {
         this.previouslyFocused?.focus?.();
         this.previouslyFocused = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoMobile: { classPropertyName: "autoMobile", publicName: "autoMobile", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "onHoverEnter()", "mouseleave": "onHoverLeave()", "focusin": "onHoverEnter()", "click": "onHostClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "resolvedAppearance()", "attr.data-position": "position()", "attr.data-expanded": "isExpanded()", "hidden": "isMobile()" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, borderSource: { classPropertyName: "borderSource", publicName: "borderSource", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoMobile: { classPropertyName: "autoMobile", publicName: "autoMobile", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "onHoverEnter()", "mouseleave": "onHoverLeave()", "focusin": "onHoverEnter()", "click": "onHostClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "resolvedAppearance()", "attr.data-position": "position()", "attr.data-expanded": "isExpanded()", "hidden": "isMobile()" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div [class]="innerClasses()">
       <ng-container [ngTemplateOutlet]="body" />
     </div>
@@ -969,7 +979,7 @@ class SidebarComponent {
             <button
               type="button"
               data-sidebar-toggle
-              class="ml-auto mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
               [attr.aria-label]="toggleButtonLabel()"
               [attr.title]="toggleButtonLabel()"
               [attr.aria-pressed]="resolvedAppearance() === 'thin'"
@@ -979,7 +989,7 @@ class SidebarComponent {
           }
         </div>
       }
-      <ui-scroll-area class="min-h-0 flex-1">
+      <ui-scroll-area class="min-h-0 flex-1" [viewportClass]="scrollViewportClasses()">
         <nav [class]="navClasses()">
           @for (item of resolvedItems(); track item.id) {
             <ui-nav-item [item]="item" [compact]="isCompact()" />
@@ -998,15 +1008,16 @@ class SidebarComponent {
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="ariaLabel()"
-        class="flex h-full w-72 max-w-[85vw] flex-col text-foreground shadow-xl"
+        class="flex h-full w-72 max-w-[85vw] flex-col border-primary/30 text-foreground shadow-xl"
+        [class.border-r]="position() === 'left'"
         [class.border-l]="position() === 'right'"
-        [class.border-brand]="position() === 'right'">
+        [class.border-primary/30]="position() === 'left' || position() === 'right'">
         <ng-container [ngTemplateOutlet]="body" />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollAreaComponent, selector: "ui-scroll-area", inputs: ["class"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollAreaComponent, selector: "ui-scroll-area", inputs: ["class", "viewportClass"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sidebar',
@@ -1040,7 +1051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             <button
               type="button"
               data-sidebar-toggle
-              class="ml-auto mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
               [attr.aria-label]="toggleButtonLabel()"
               [attr.title]="toggleButtonLabel()"
               [attr.aria-pressed]="resolvedAppearance() === 'thin'"
@@ -1050,7 +1061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           }
         </div>
       }
-      <ui-scroll-area class="min-h-0 flex-1">
+      <ui-scroll-area class="min-h-0 flex-1" [viewportClass]="scrollViewportClasses()">
         <nav [class]="navClasses()">
           @for (item of resolvedItems(); track item.id) {
             <ui-nav-item [item]="item" [compact]="isCompact()" />
@@ -1069,15 +1080,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="ariaLabel()"
-        class="flex h-full w-72 max-w-[85vw] flex-col text-foreground shadow-xl"
+        class="flex h-full w-72 max-w-[85vw] flex-col border-primary/30 text-foreground shadow-xl"
+        [class.border-r]="position() === 'left'"
         [class.border-l]="position() === 'right'"
-        [class.border-brand]="position() === 'right'">
+        [class.border-primary/30]="position() === 'left' || position() === 'right'">
         <ng-container [ngTemplateOutlet]="body" />
       </div>
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoMobile", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], drawerTpl: [{ type: i0.ViewChild, args: ['drawerTpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], borderSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderSource", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoMobile", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], drawerTpl: [{ type: i0.ViewChild, args: ['drawerTpl', { isSignal: true }] }] } });
 
 /**
  * Horizontal navigation (topbar) — shadcn-styled.
@@ -1265,8 +1277,8 @@ class TopbarComponent {
         const items = this.collectPanelFocusables(panel);
         items[0]?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TopbarComponent, isStandalone: true, selector: "topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, hamburgerLabel: { classPropertyName: "hamburgerLabel", publicName: "hamburgerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TopbarComponent, isStandalone: true, selector: "topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, hamburgerLabel: { classPropertyName: "hamburgerLabel", publicName: "hamburgerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="flex h-full w-full items-center gap-3 px-1">
       <div data-topbar-slot="start" class="flex shrink-0 items-center gap-2">
         @if (showHamburger()) {
@@ -1371,7 +1383,7 @@ class TopbarComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TopbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'topbar',