@ojiepermana/angular 21.2.4 → 21.3.3

package/fesm2022/ojiepermana-angular-navigation-sidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-navigation-sidebar.mjs","sources":["../../../projects/angular/navigation/sidebar/src/lib/sidebar.component.ts","../../../projects/angular/navigation/sidebar/ojiepermana-angular-navigation-sidebar.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  TemplateRef,\n  ViewContainerRef,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { DOCUMENT, NgTemplateOutlet } from '@angular/common';\nimport { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';\nimport { filter, map } from 'rxjs/operators';\nimport { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';\nimport { UiNavItemComponent } from '@ojiepermana/angular/navigation/item';\nimport { DEFAULT_NAVIGATION_ID, NavigationService } from '@ojiepermana/angular/navigation/service';\nimport type {\n  NavigationItem,\n  SidebarAppearance,\n  SidebarBorderSource,\n  SidebarPosition,\n} from '@ojiepermana/angular/navigation/types';\nimport { ScrollAreaComponent } from '@ojiepermana/angular/component/scroll-area';\n\n/**\n * Vertical navigation (sidebar) — shadcn-styled.\n *\n * Variants:\n * - `default`: 17.5rem, label + icon\n * - `thin`: 4rem icon-only; hover memunculkan overlay expand (tidak push konten)\n *\n * Mobile (`< md`): saat `autoMobile=true` (default), host desktop disembunyikan\n * dan konten dirender lewat CDK Overlay drawer dengan focus trap. State buka\n * dikontrol lewat `NavigationService.mobileOpen`.\n */\n@Component({\n  selector: 'sidebar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgTemplateOutlet, ScrollAreaComponent, UiNavIconComponent, UiNavItemComponent],\n  host: {\n    role: 'navigation',\n    '[attr.aria-label]': 'ariaLabel()',\n    '[class]': 'hostClasses()',\n    '[attr.data-appearance]': 'resolvedAppearance()',\n    '[attr.data-position]': 'position()',\n    '[attr.data-expanded]': 'isExpanded()',\n    '[hidden]': 'isMobile()',\n    '(mouseenter)': 'onHoverEnter()',\n    '(mouseleave)': 'onHoverLeave()',\n    '(focusin)': 'onHoverEnter()',\n    '(click)': 'onHostClick($event)',\n  },\n  template: `\n    <div [class]=\"innerClasses()\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n    </div>\n\n    <ng-template #body>\n      @if (header()) {\n        <div [class]=\"headerClasses()\">\n          <div [class]=\"headerSlotClasses()\">\n            <ng-content select=\"[sidebar-header]\" />\n          </div>\n          @if (!isMobile() && !isCompact()) {\n            <button\n              type=\"button\"\n              data-sidebar-toggle\n              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\"\n              [attr.aria-label]=\"toggleButtonLabel()\"\n              [attr.title]=\"toggleButtonLabel()\"\n              [attr.aria-pressed]=\"resolvedAppearance() === 'thin'\"\n              (click)=\"toggleAppearance($event)\">\n              <ui-nav-icon name=\"view_sidebar\" [size]=\"18\" class=\"text-current\" />\n            </button>\n          }\n        </div>\n      }\n      <ui-scroll-area class=\"min-h-0 flex-1\" [viewportClass]=\"scrollViewportClasses()\">\n        <nav [class]=\"navClasses()\">\n          @for (item of resolvedItems(); track item.id) {\n            <ui-nav-item [item]=\"item\" [compact]=\"isCompact()\" />\n          }\n        </nav>\n      </ui-scroll-area>\n      <div [class]=\"footerClasses()\">\n        <div [class]=\"footerSlotClasses()\">\n          <ng-content select=\"[sidebar-footer]\" />\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template #drawerTpl>\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [attr.aria-label]=\"ariaLabel()\"\n        class=\"flex h-full w-72 max-w-[85vw] flex-col border-primary/30 text-foreground shadow-xl\"\n        [class.border-r]=\"position() === 'left'\"\n        [class.border-l]=\"position() === 'right'\"\n        [class.border-primary/30]=\"position() === 'left' || position() === 'right'\">\n        <ng-container [ngTemplateOutlet]=\"body\" />\n      </div>\n    </ng-template>\n  `,\n})\nexport class SidebarComponent {\n  private readonly nav = inject(NavigationService);\n  private readonly bp = inject(BreakpointObserver);\n  private readonly overlay = inject(Overlay);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly focusTrapFactory = inject(FocusTrapFactory);\n  private readonly doc = inject(DOCUMENT);\n  private readonly destroyRef = inject(DestroyRef);\n\n  readonly items = input<NavigationItem[]>([]);\n  /** Registry key di `NavigationService`. Default `'main'`. */\n  readonly navigationId = input<string>(DEFAULT_NAVIGATION_ID);\n  readonly appearance = input<SidebarAppearance>('default');\n  /** Desktop border can be owned by the sidebar or by the surrounding layout shell. */\n  readonly borderSource = input<SidebarBorderSource>('component');\n  readonly position = input<SidebarPosition>('left');\n  readonly ariaLabel = input<string>('Primary');\n  readonly header = input<boolean>(true);\n  readonly class = input<string>('');\n  /** Auto switch ke CDK overlay drawer saat viewport `< md`. */\n  readonly autoMobile = input<boolean>(true);\n  /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */\n  readonly autoRegister = input<boolean>(true);\n\n  /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */\n  protected readonly resolvedItems = computed(() => {\n    const explicit = this.items();\n    return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();\n  });\n\n  private readonly hovered = signal<boolean>(false);\n  private readonly suppressHoverUntilLeave = signal<boolean>(false);\n\n  private readonly drawerTpl = viewChild.required<TemplateRef<unknown>>('drawerTpl');\n  private drawerRef: OverlayRef | null = null;\n  private focusTrap: FocusTrap | null = null;\n  private previouslyFocused: HTMLElement | null = null;\n\n  /** True saat viewport `< md` (767.98px). */\n  protected readonly isMobileMedia = toSignal(this.bp.observe('(max-width: 767.98px)').pipe(map((s) => s.matches)), {\n    initialValue: false,\n  });\n\n  protected readonly isMobile = computed(() => this.autoMobile() && this.isMobileMedia());\n  protected readonly resolvedCollapsed = computed(() => {\n    if (this.nav.hasStoredSidebarCollapse()) {\n      return this.nav.collapsed();\n    }\n\n    return this.appearance() === 'thin';\n  });\n  protected readonly resolvedAppearance = computed<SidebarAppearance>(() => {\n    return this.resolvedCollapsed() ? 'thin' : 'default';\n  });\n  protected readonly hoverActive = computed(() => this.hovered() && !this.suppressHoverUntilLeave());\n  protected readonly isExpanded = computed(() => !this.resolvedCollapsed() || this.hoverActive());\n  protected readonly isCompact = computed(() => !this.isMobile() && this.resolvedCollapsed() && !this.hoverActive());\n  protected readonly toggleButtonLabel = computed(() =>\n    this.resolvedCollapsed() ? 'Expand sidebar' : 'Collapse sidebar',\n  );\n\n  constructor() {\n    // Auto-register items ke service untuk active trail (hanya jika input non-kosong).\n    effect(() => {\n      const explicit = this.items();\n      if (this.autoRegister() && explicit.length > 0) this.nav.registerItems(this.navigationId(), explicit);\n    });\n\n    // Kelola overlay drawer berdasarkan mobileOpen + isMobile.\n    effect(() => {\n      const open = this.nav.mobileOpen();\n      const mobile = this.isMobile();\n      if (mobile && open) this.openDrawer();\n      else this.closeDrawer();\n    });\n\n    this.destroyRef.onDestroy(() => this.closeDrawer());\n  }\n\n  protected readonly hostClasses = computed(() => {\n    const base = ['relative flex shrink-0 text-foreground', 'transition-[width] duration-200 ease-out'];\n    if (this.resolvedCollapsed()) base.push('w-16');\n    else base.push('[width:17.5rem]');\n    if (this.borderSource() === 'component') {\n      if (this.position() === 'right') base.push('border-l', 'border-primary/30');\n      else base.push('border-r', 'border-primary/30');\n    }\n    return [...base, this.class()].join(' ');\n  });\n\n  protected readonly headerClasses = computed(() => {\n    const base = ['flex items-center gap-1 border-b border-primary/30'];\n    if (this.isCompact()) {\n      base.push('h-12', 'justify-center', 'px-2');\n    } else {\n      base.push('h-12', 'pr-2');\n    }\n    return base.join(' ');\n  });\n\n  protected readonly headerSlotClasses = computed(() => {\n    const base = ['min-w-0'];\n    if (this.isCompact()) {\n      base.push(\n        'flex flex-1 items-center justify-center overflow-hidden',\n        '[&>[sidebar-header]>*]:mx-auto',\n        '[&>[sidebar-header]>*]:w-auto',\n        '[&>[sidebar-header]>*]:max-w-full',\n        '[&>[sidebar-header]>*]:justify-center',\n        '[&>[sidebar-header]>*]:gap-0',\n        '[&>[sidebar-header]>*]:px-0',\n        '[&>[sidebar-header]>*]:shrink-0',\n        '[&>[sidebar-header]>*>*:first-child]:mx-auto',\n        '[&>[sidebar-header]>*>*:nth-child(n+2)]:hidden',\n      );\n    } else {\n      base.push('flex min-w-0 flex-1 items-center');\n    }\n    return base.join(' ');\n  });\n\n  protected readonly navClasses = computed(() => {\n    const base = ['min-h-full'];\n    if (this.isCompact()) {\n      base.push(\n        'px-2',\n        '[&_.ui-nav-text]:mx-auto',\n        '[&_.ui-nav-text]:w-10',\n        '[&_.ui-nav-text]:justify-center',\n        '[&_.ui-nav-text]:px-0',\n      );\n    }\n    return base.join(' ');\n  });\n\n  protected readonly scrollViewportClasses = computed(\n    () => 'overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10',\n  );\n\n  protected readonly footerClasses = computed(() => {\n    const base = ['h-12 border-t border-primary/30'];\n    if (this.isCompact()) {\n      base.push('flex items-center justify-center px-2');\n    }\n    return base.join(' ');\n  });\n\n  protected readonly footerSlotClasses = computed(() => {\n    const base = ['h-full'];\n    if (this.isCompact()) {\n      base.push(\n        'flex h-full items-center justify-center overflow-hidden',\n        '[&>[sidebar-footer]>*]:mx-auto',\n        '[&>[sidebar-footer]>*]:w-auto',\n        '[&>[sidebar-footer]>*]:max-w-full',\n        '[&>[sidebar-footer]>*]:justify-center',\n        '[&>[sidebar-footer]>*]:gap-0',\n        '[&>[sidebar-footer]>*]:px-0',\n        '[&>[sidebar-footer]>*>*:first-child]:mx-auto',\n        '[&>[sidebar-footer]>*>*:nth-child(n+2)]:hidden',\n      );\n    } else {\n      base.push('w-full');\n    }\n    return base.join(' ');\n  });\n\n  protected readonly innerClasses = computed(() => {\n    const overlayActive = this.resolvedCollapsed() && this.hoverActive();\n    const base = ['flex h-full flex-col transition-[width] duration-200 ease-out'];\n    if (this.resolvedCollapsed()) {\n      base.push('bg-background');\n    }\n    if (overlayActive) {\n      base.push(\n        'absolute inset-y-0 z-30 border-l border-r border-primary/30 shadow-xl [width:17.5rem]',\n        this.position() === 'right' ? 'right-0' : 'left-0',\n      );\n    } else {\n      base.push('w-full');\n    }\n    return base.join(' ');\n  });\n\n  protected onHoverEnter(): void {\n    if (!this.resolvedCollapsed() || this.isMobile() || this.suppressHoverUntilLeave()) return;\n    this.hovered.set(true);\n  }\n\n  protected onHoverLeave(): void {\n    this.suppressHoverUntilLeave.set(false);\n    if (this.resolvedCollapsed()) this.hovered.set(false);\n  }\n\n  protected toggleAppearance(event: MouseEvent): void {\n    event.stopPropagation();\n    const nextCollapsed = !this.resolvedCollapsed();\n    this.nav.setCollapsed(nextCollapsed);\n    this.hovered.set(false);\n    this.suppressHoverUntilLeave.set(nextCollapsed);\n  }\n\n  /** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */\n  protected onHostClick(event: MouseEvent): void {\n    if (!this.resolvedCollapsed() || this.isMobile()) return;\n    if (this.hovered()) return;\n    const target = event.target as HTMLElement | null;\n    // Biarkan klik pada control interaktif terus propagate (tidak intercept).\n    if (target && target.closest('a,button,[role=\"menuitem\"]')) return;\n    this.hovered.set(true);\n  }\n\n  private openDrawer(): void {\n    if (this.drawerRef) return;\n    const side = this.position();\n    const pos = this.overlay.position().global().top('0');\n    if (side === 'right') pos.right('0');\n    else pos.left('0');\n\n    this.drawerRef = this.overlay.create({\n      positionStrategy: pos,\n      height: '100vh',\n      hasBackdrop: true,\n      backdropClass: 'cdk-overlay-dark-backdrop',\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n      panelClass: ['sidebar-drawer'],\n    });\n\n    const portal = new TemplatePortal(this.drawerTpl(), this.vcr);\n    const viewRef = this.drawerRef.attach(portal);\n    viewRef.detectChanges();\n\n    const root = this.drawerRef.overlayElement;\n    this.focusTrap = this.focusTrapFactory.create(root);\n    this.previouslyFocused = this.doc.activeElement as HTMLElement | null;\n    queueMicrotask(() => this.focusTrap?.focusInitialElementWhenReady());\n\n    this.drawerRef\n      .backdropClick()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.nav.closeMobile());\n\n    this.drawerRef\n      .keydownEvents()\n      .pipe(\n        filter((e) => e.key === 'Escape'),\n        takeUntilDestroyed(this.destroyRef),\n      )\n      .subscribe(() => this.nav.closeMobile());\n  }\n\n  private closeDrawer(): void {\n    if (!this.drawerRef) return;\n    this.focusTrap?.destroy();\n    this.focusTrap = null;\n    this.drawerRef.dispose();\n    this.drawerRef = null;\n    this.previouslyFocused?.focus?.();\n    this.previouslyFocused = null;\n  }\n}\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-topbar.mjs

@@ -0,0 +1,433 @@
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, ElementRef, DestroyRef, input, computed, signal, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';
+import { UiNavItemComponent } from '@ojiepermana/angular/navigation/item';
+import { NavigationService, DEFAULT_NAVIGATION_ID } from '@ojiepermana/angular/navigation/service';
+
+/**
+ * Horizontal navigation (topbar) — shadcn-styled.
+ */
+class TopbarComponent {
+    nav = inject(NavigationService);
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** 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 */ []));
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
+    autoRegister = input(true, ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
+    /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
+    showHamburger = input(true, ...(ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []));
+    hamburgerLabel = input('Open navigation', ...(ngDevMode ? [{ debugName: "hamburgerLabel" }] : /* istanbul ignore next */ []));
+    mobileOpen = this.nav.mobileOpen;
+    /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
+    resolvedItems = computed(() => {
+        const explicit = this.items();
+        return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();
+    }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    openId = signal(null, ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
+    active = null;
+    dropdownTpl = viewChild.required('dropdownTpl');
+    constructor() {
+        effect(() => {
+            const explicit = this.items();
+            if (this.autoRegister() && explicit.length > 0)
+                this.nav.registerItems(this.navigationId(), explicit);
+        });
+        this.destroyRef.onDestroy(() => this.closeAll());
+    }
+    hostClasses = computed(() => {
+        return ['sticky top-0 z-20 flex h-11 w-full items-center', this.class()].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    endSlotClasses = computed(() => {
+        const base = ['flex h-full shrink-0 items-center justify-end gap-2 overflow-hidden'];
+        base.push('[&>[topbar-end]]:flex', '[&>[topbar-end]]:min-w-0', '[&>[topbar-end]]:max-w-full', '[&>[topbar-end]]:items-center', '[&>[topbar-end]]:justify-end', '[&>[topbar-end]]:gap-2', '[&>[topbar-end]>*]:w-auto', '[&>[topbar-end]>*]:max-w-full', '[&>[topbar-end]>*]:justify-end', '[&>[topbar-end]>*]:gap-0', '[&>[topbar-end]>*]:px-2', '[&>[topbar-end]>*>*:first-child]:ml-auto', '[&>[topbar-end]>*>*:nth-child(n+2)]:hidden');
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []));
+    asBasic(i) {
+        return i;
+    }
+    asCollapsable(i) {
+        return i;
+    }
+    asGroup(i) {
+        return i;
+    }
+    isItemActive(id) {
+        return this.nav.isActive(id);
+    }
+    toggleMobile() {
+        this.nav.toggleMobile();
+    }
+    toggleDropdown(trigger, item) {
+        if (this.openId() === item.id)
+            this.closeAll();
+        else
+            this.openDropdown(trigger, item);
+    }
+    openDropdown(trigger, item) {
+        if (this.openId() === item.id)
+            return;
+        this.closeAll();
+        this.attach(trigger, item, this.dropdownTpl());
+    }
+    attach(trigger, item, tpl) {
+        const strategy = this.overlay
+            .position()
+            .flexibleConnectedTo(trigger)
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 4,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -4,
+            },
+        ]);
+        const ref = this.overlay.create({
+            positionStrategy: strategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: ['ui-dropdown-panel'],
+        });
+        const portal = new TemplatePortal(tpl, this.vcr, { $implicit: item });
+        ref.attach(portal);
+        this.active = { ref, id: item.id ?? '' };
+        this.openId.set(item.id ?? null);
+        merge(ref.backdropClick(), ref.keydownEvents().pipe(filter((e) => e.key === 'Escape')))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.closeAll();
+            trigger.focus();
+        });
+    }
+    closeAll() {
+        if (this.active) {
+            this.active.ref.dispose();
+            this.active = null;
+        }
+        this.openId.set(null);
+    }
+    /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. */
+    onMenubarKeydown(event) {
+        const key = event.key;
+        const root = this.host.nativeElement;
+        const triggers = Array.from(root.querySelectorAll('ul[role="menubar"] [role="menuitem"]')).filter((el) => !el.hasAttribute('disabled'));
+        if (triggers.length === 0)
+            return;
+        const currentIndex = triggers.indexOf(document.activeElement);
+        if (key === 'ArrowDown' && currentIndex !== -1) {
+            event.preventDefault();
+            // Jika open, fokus item pertama panel; jika belum, focus tetap (panel akan dibuka via click/mouseenter).
+            queueMicrotask(() => this.focusFirstInPanel());
+            return;
+        }
+        if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End')
+            return;
+        let nextIndex = currentIndex;
+        if (key === 'ArrowRight')
+            nextIndex = (currentIndex + 1 + triggers.length) % triggers.length;
+        else if (key === 'ArrowLeft')
+            nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        else if (key === 'Home')
+            nextIndex = 0;
+        else if (key === 'End')
+            nextIndex = triggers.length - 1;
+        if (nextIndex !== currentIndex && triggers[nextIndex]) {
+            event.preventDefault();
+            triggers[nextIndex].focus();
+        }
+    }
+    /** Arrow-key navigation dalam dropdown panel. */
+    onPanelKeydown(event) {
+        const key = event.key;
+        if (key !== 'ArrowDown' &&
+            key !== 'ArrowUp' &&
+            key !== 'ArrowLeft' &&
+            key !== 'ArrowRight' &&
+            key !== 'Home' &&
+            key !== 'End')
+            return;
+        const panel = this.active?.ref.overlayElement;
+        if (!panel)
+            return;
+        const items = this.collectPanelFocusables(panel);
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        let nextIndex = currentIndex;
+        if (key === 'ArrowDown' || key === 'ArrowRight')
+            nextIndex = (currentIndex + 1 + items.length) % items.length;
+        else if (key === 'ArrowUp' || key === 'ArrowLeft')
+            nextIndex = (currentIndex - 1 + items.length) % items.length;
+        else if (key === 'Home')
+            nextIndex = 0;
+        else if (key === 'End')
+            nextIndex = items.length - 1;
+        if (nextIndex !== currentIndex && items[nextIndex]) {
+            event.preventDefault();
+            items[nextIndex].focus();
+        }
+    }
+    collectPanelFocusables(root) {
+        return Array.from(root.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);
+    }
+    focusFirstInPanel() {
+        const panel = this.active?.ref.overlayElement;
+        if (!panel)
+            return;
+        const items = this.collectPanelFocusables(panel);
+        items[0]?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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()) {
+          <button
+            type="button"
+            class="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+            [attr.aria-label]="hamburgerLabel()"
+            [attr.aria-expanded]="mobileOpen()"
+            (click)="toggleMobile()">
+            <ui-nav-icon name="menu" [size]="18" />
+          </button>
+        }
+        <ng-content select="[topbar-start]" />
+      </div>
+
+      <div data-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
+        <ul
+          class="flex min-w-0 flex-1 items-center justify-center gap-1"
+          role="menubar"
+          (keydown)="onMenubarKeydown($event)">
+          @for (item of resolvedItems(); track item.id) {
+            <li role="none" class="relative">
+              @switch (item.type) {
+                @case ('basic') {
+                  @let basic = asBasic(item);
+                  <a
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary"
+                    [routerLink]="basic.link"
+                    routerLinkActive
+                    #rla="routerLinkActive"
+                    [class.text-primary]="rla.isActive"
+                    [attr.aria-current]="rla.isActive ? 'page' : null"
+                    [target]="basic.target ?? undefined">
+                    @if (basic.icon) {
+                      <ui-nav-icon [name]="basic.icon" [size]="18" />
+                    }
+                    <span>{{ basic.title }}</span>
+                  </a>
+                }
+                @case ('collapsable') {
+                  @let col = asCollapsable(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(col.id)"
+                    [attr.aria-expanded]="openId() === col.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleDropdown(trigger, item)"
+                    (mouseenter)="openDropdown(trigger, item)">
+                    @if (col.icon) {
+                      <ui-nav-icon [name]="col.icon" [size]="18" />
+                    }
+                    <span>{{ col.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @case ('group') {
+                  @let group = asGroup(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(group.id)"
+                    [attr.aria-expanded]="openId() === group.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleDropdown(trigger, item)"
+                    (mouseenter)="openDropdown(trigger, item)">
+                    @if (group.icon) {
+                      <ui-nav-icon [name]="group.icon" [size]="18" />
+                    }
+                    <span>{{ group.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @default {
+                  <span class="ui-nav-heading px-3 py-2 text-muted-foreground">
+                    {{ item.title }}
+                  </span>
+                }
+              }
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div data-topbar-slot="end" [class]="endSlotClasses()">
+        <ng-content select="[topbar-end]" />
+      </div>
+    </div>
+
+    <!-- Dropdown template -->
+    <ng-template #dropdownTpl let-item>
+      <div role="menu" class="min-w-56 border border-brand bg-background/95 p-1" (keydown)="onPanelKeydown($event)">
+        @for (child of item.children; track child.id) {
+          <ui-nav-item [item]="child" />
+        }
+      </div>
+    </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", "railConnector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TopbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'topbar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],
+                    host: {
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class]': 'hostClasses()',
+                        '[attr.data-appearance]': 'appearance()',
+                    },
+                    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()) {
+          <button
+            type="button"
+            class="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+            [attr.aria-label]="hamburgerLabel()"
+            [attr.aria-expanded]="mobileOpen()"
+            (click)="toggleMobile()">
+            <ui-nav-icon name="menu" [size]="18" />
+          </button>
+        }
+        <ng-content select="[topbar-start]" />
+      </div>
+
+      <div data-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
+        <ul
+          class="flex min-w-0 flex-1 items-center justify-center gap-1"
+          role="menubar"
+          (keydown)="onMenubarKeydown($event)">
+          @for (item of resolvedItems(); track item.id) {
+            <li role="none" class="relative">
+              @switch (item.type) {
+                @case ('basic') {
+                  @let basic = asBasic(item);
+                  <a
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary"
+                    [routerLink]="basic.link"
+                    routerLinkActive
+                    #rla="routerLinkActive"
+                    [class.text-primary]="rla.isActive"
+                    [attr.aria-current]="rla.isActive ? 'page' : null"
+                    [target]="basic.target ?? undefined">
+                    @if (basic.icon) {
+                      <ui-nav-icon [name]="basic.icon" [size]="18" />
+                    }
+                    <span>{{ basic.title }}</span>
+                  </a>
+                }
+                @case ('collapsable') {
+                  @let col = asCollapsable(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(col.id)"
+                    [attr.aria-expanded]="openId() === col.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleDropdown(trigger, item)"
+                    (mouseenter)="openDropdown(trigger, item)">
+                    @if (col.icon) {
+                      <ui-nav-icon [name]="col.icon" [size]="18" />
+                    }
+                    <span>{{ col.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @case ('group') {
+                  @let group = asGroup(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(group.id)"
+                    [attr.aria-expanded]="openId() === group.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleDropdown(trigger, item)"
+                    (mouseenter)="openDropdown(trigger, item)">
+                    @if (group.icon) {
+                      <ui-nav-icon [name]="group.icon" [size]="18" />
+                    }
+                    <span>{{ group.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @default {
+                  <span class="ui-nav-heading px-3 py-2 text-muted-foreground">
+                    {{ item.title }}
+                  </span>
+                }
+              }
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div data-topbar-slot="end" [class]="endSlotClasses()">
+        <ng-content select="[topbar-end]" />
+      </div>
+    </div>
+
+    <!-- Dropdown template -->
+    <ng-template #dropdownTpl let-item>
+      <div role="menu" class="min-w-56 border border-brand bg-background/95 p-1" (keydown)="onPanelKeydown($event)">
+        @for (child of item.children; track child.id) {
+          <ui-nav-item [item]="child" />
+        }
+      </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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], showHamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHamburger", required: false }] }], hamburgerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburgerLabel", required: false }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TopbarComponent };
+//# sourceMappingURL=ojiepermana-angular-navigation-topbar.mjs.map

package/fesm2022/ojiepermana-angular-navigation-topbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-navigation-topbar.mjs","sources":["../../../projects/angular/navigation/topbar/src/lib/topbar.component.ts","../../../projects/angular/navigation/topbar/ojiepermana-angular-navigation-topbar.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  ViewContainerRef,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { merge } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';\nimport { UiNavItemComponent } from '@ojiepermana/angular/navigation/item';\nimport { DEFAULT_NAVIGATION_ID, NavigationService } from '@ojiepermana/angular/navigation/service';\nimport type {\n  NavigationBasicItem,\n  NavigationCollapsableItem,\n  NavigationGroupItem,\n  NavigationItem,\n  TopbarAppearance,\n} from '@ojiepermana/angular/navigation/types';\n\ninterface ActiveOverlay {\n  ref: OverlayRef;\n  id: string;\n}\n\n/**\n * Horizontal navigation (topbar) — shadcn-styled.\n */\n@Component({\n  selector: 'topbar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],\n  host: {\n    role: 'navigation',\n    '[attr.aria-label]': 'ariaLabel()',\n    '[class]': 'hostClasses()',\n    '[attr.data-appearance]': 'appearance()',\n  },\n  template: `\n    <div class=\"flex h-full w-full items-center gap-3 px-1\">\n      <div data-topbar-slot=\"start\" class=\"flex shrink-0 items-center gap-2\">\n        @if (showHamburger()) {\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden\"\n            [attr.aria-label]=\"hamburgerLabel()\"\n            [attr.aria-expanded]=\"mobileOpen()\"\n            (click)=\"toggleMobile()\">\n            <ui-nav-icon name=\"menu\" [size]=\"18\" />\n          </button>\n        }\n        <ng-content select=\"[topbar-start]\" />\n      </div>\n\n      <div data-topbar-slot=\"nav\" class=\"flex min-w-0 flex-1 items-center justify-center\">\n        <ul\n          class=\"flex min-w-0 flex-1 items-center justify-center gap-1\"\n          role=\"menubar\"\n          (keydown)=\"onMenubarKeydown($event)\">\n          @for (item of resolvedItems(); track item.id) {\n            <li role=\"none\" class=\"relative\">\n              @switch (item.type) {\n                @case ('basic') {\n                  @let basic = asBasic(item);\n                  <a\n                    role=\"menuitem\"\n                    class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary\"\n                    [routerLink]=\"basic.link\"\n                    routerLinkActive\n                    #rla=\"routerLinkActive\"\n                    [class.text-primary]=\"rla.isActive\"\n                    [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n                    [target]=\"basic.target ?? undefined\">\n                    @if (basic.icon) {\n                      <ui-nav-icon [name]=\"basic.icon\" [size]=\"18\" />\n                    }\n                    <span>{{ basic.title }}</span>\n                  </a>\n                }\n                @case ('collapsable') {\n                  @let col = asCollapsable(item);\n                  <button\n                    #trigger\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                    [class.text-primary]=\"isItemActive(col.id)\"\n                    [attr.aria-expanded]=\"openId() === col.id\"\n                    [attr.aria-haspopup]=\"'menu'\"\n                    (click)=\"toggleDropdown(trigger, item)\"\n                    (mouseenter)=\"openDropdown(trigger, item)\">\n                    @if (col.icon) {\n                      <ui-nav-icon [name]=\"col.icon\" [size]=\"18\" />\n                    }\n                    <span>{{ col.title }}</span>\n                    <ui-nav-icon name=\"expand_more\" [size]=\"18\" />\n                  </button>\n                }\n                @case ('group') {\n                  @let group = asGroup(item);\n                  <button\n                    #trigger\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                    [class.text-primary]=\"isItemActive(group.id)\"\n                    [attr.aria-expanded]=\"openId() === group.id\"\n                    [attr.aria-haspopup]=\"'menu'\"\n                    (click)=\"toggleDropdown(trigger, item)\"\n                    (mouseenter)=\"openDropdown(trigger, item)\">\n                    @if (group.icon) {\n                      <ui-nav-icon [name]=\"group.icon\" [size]=\"18\" />\n                    }\n                    <span>{{ group.title }}</span>\n                    <ui-nav-icon name=\"expand_more\" [size]=\"18\" />\n                  </button>\n                }\n                @default {\n                  <span class=\"ui-nav-heading px-3 py-2 text-muted-foreground\">\n                    {{ item.title }}\n                  </span>\n                }\n              }\n            </li>\n          }\n        </ul>\n      </div>\n\n      <div data-topbar-slot=\"end\" [class]=\"endSlotClasses()\">\n        <ng-content select=\"[topbar-end]\" />\n      </div>\n    </div>\n\n    <!-- Dropdown template -->\n    <ng-template #dropdownTpl let-item>\n      <div role=\"menu\" class=\"min-w-56 border border-brand bg-background/95 p-1\" (keydown)=\"onPanelKeydown($event)\">\n        @for (child of item.children; track child.id) {\n          <ui-nav-item [item]=\"child\" />\n        }\n      </div>\n    </ng-template>\n  `,\n})\nexport class TopbarComponent {\n  protected readonly nav = inject(NavigationService);\n  private readonly overlay = inject(Overlay);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n\n  readonly items = input<NavigationItem[]>([]);\n  /** Registry key di `NavigationService`. Default `'main'`. */\n  readonly navigationId = input<string>(DEFAULT_NAVIGATION_ID);\n  readonly appearance = input<TopbarAppearance>('default');\n  readonly ariaLabel = input<string>('Primary');\n  readonly class = input<string>('');\n  /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */\n  readonly autoRegister = input<boolean>(true);\n  /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */\n  readonly showHamburger = input<boolean>(true);\n  readonly hamburgerLabel = input<string>('Open navigation');\n  protected readonly mobileOpen = this.nav.mobileOpen;\n\n  /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */\n  protected readonly resolvedItems = computed(() => {\n    const explicit = this.items();\n    return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();\n  });\n\n  protected readonly openId = signal<string | null>(null);\n  private active: ActiveOverlay | null = null;\n\n  private readonly dropdownTpl = viewChild.required<TemplateRef<unknown>>('dropdownTpl');\n\n  constructor() {\n    effect(() => {\n      const explicit = this.items();\n      if (this.autoRegister() && explicit.length > 0) this.nav.registerItems(this.navigationId(), explicit);\n    });\n    this.destroyRef.onDestroy(() => this.closeAll());\n  }\n\n  protected readonly hostClasses = computed(() => {\n    return ['sticky top-0 z-20 flex h-11 w-full items-center', this.class()].join(' ');\n  });\n\n  protected readonly endSlotClasses = computed(() => {\n    const base = ['flex h-full shrink-0 items-center justify-end gap-2 overflow-hidden'];\n    base.push(\n      '[&>[topbar-end]]:flex',\n      '[&>[topbar-end]]:min-w-0',\n      '[&>[topbar-end]]:max-w-full',\n      '[&>[topbar-end]]:items-center',\n      '[&>[topbar-end]]:justify-end',\n      '[&>[topbar-end]]:gap-2',\n      '[&>[topbar-end]>*]:w-auto',\n      '[&>[topbar-end]>*]:max-w-full',\n      '[&>[topbar-end]>*]:justify-end',\n      '[&>[topbar-end]>*]:gap-0',\n      '[&>[topbar-end]>*]:px-2',\n      '[&>[topbar-end]>*>*:first-child]:ml-auto',\n      '[&>[topbar-end]>*>*:nth-child(n+2)]:hidden',\n    );\n    return base.join(' ');\n  });\n\n  protected asBasic(i: NavigationItem): NavigationBasicItem {\n    return i as NavigationBasicItem;\n  }\n  protected asCollapsable(i: NavigationItem): NavigationCollapsableItem {\n    return i as NavigationCollapsableItem;\n  }\n  protected asGroup(i: NavigationItem): NavigationGroupItem {\n    return i as NavigationGroupItem;\n  }\n\n  protected isItemActive(id: string | undefined): boolean {\n    return this.nav.isActive(id);\n  }\n\n  protected toggleMobile(): void {\n    this.nav.toggleMobile();\n  }\n\n  protected toggleDropdown(trigger: HTMLElement, item: NavigationItem): void {\n    if (this.openId() === item.id) this.closeAll();\n    else this.openDropdown(trigger, item);\n  }\n\n  protected openDropdown(trigger: HTMLElement, item: NavigationItem): void {\n    if (this.openId() === item.id) return;\n    this.closeAll();\n    this.attach(trigger, item, this.dropdownTpl());\n  }\n\n  private attach(trigger: HTMLElement, item: NavigationItem, tpl: TemplateRef<unknown>): void {\n    const strategy = this.overlay\n      .position()\n      .flexibleConnectedTo(trigger)\n      .withFlexibleDimensions(false)\n      .withPush(false)\n      .withPositions([\n        {\n          originX: 'start',\n          originY: 'bottom',\n          overlayX: 'start',\n          overlayY: 'top',\n          offsetY: 4,\n        },\n        {\n          originX: 'start',\n          originY: 'top',\n          overlayX: 'start',\n          overlayY: 'bottom',\n          offsetY: -4,\n        },\n      ]);\n\n    const ref = this.overlay.create({\n      positionStrategy: strategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      hasBackdrop: true,\n      backdropClass: 'cdk-overlay-transparent-backdrop',\n      panelClass: ['ui-dropdown-panel'],\n    });\n\n    const portal = new TemplatePortal(tpl, this.vcr, { $implicit: item });\n    ref.attach(portal);\n    this.active = { ref, id: item.id ?? '' };\n    this.openId.set(item.id ?? null);\n\n    merge(ref.backdropClick(), ref.keydownEvents().pipe(filter((e) => e.key === 'Escape')))\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.closeAll();\n        trigger.focus();\n      });\n  }\n\n  protected closeAll(): void {\n    if (this.active) {\n      this.active.ref.dispose();\n      this.active = null;\n    }\n    this.openId.set(null);\n  }\n\n  /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. */\n  protected onMenubarKeydown(event: KeyboardEvent): void {\n    const key = event.key;\n    const root = this.host.nativeElement;\n    const triggers = Array.from(root.querySelectorAll<HTMLElement>('ul[role=\"menubar\"] [role=\"menuitem\"]')).filter(\n      (el) => !el.hasAttribute('disabled'),\n    );\n    if (triggers.length === 0) return;\n    const currentIndex = triggers.indexOf(document.activeElement as HTMLElement);\n\n    if (key === 'ArrowDown' && currentIndex !== -1) {\n      event.preventDefault();\n      // Jika open, fokus item pertama panel; jika belum, focus tetap (panel akan dibuka via click/mouseenter).\n      queueMicrotask(() => this.focusFirstInPanel());\n      return;\n    }\n    if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End') return;\n    let nextIndex = currentIndex;\n    if (key === 'ArrowRight') nextIndex = (currentIndex + 1 + triggers.length) % triggers.length;\n    else if (key === 'ArrowLeft') nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;\n    else if (key === 'Home') nextIndex = 0;\n    else if (key === 'End') nextIndex = triggers.length - 1;\n    if (nextIndex !== currentIndex && triggers[nextIndex]) {\n      event.preventDefault();\n      triggers[nextIndex].focus();\n    }\n  }\n\n  /** Arrow-key navigation dalam dropdown panel. */\n  protected onPanelKeydown(event: KeyboardEvent): void {\n    const key = event.key;\n    if (\n      key !== 'ArrowDown' &&\n      key !== 'ArrowUp' &&\n      key !== 'ArrowLeft' &&\n      key !== 'ArrowRight' &&\n      key !== 'Home' &&\n      key !== 'End'\n    )\n      return;\n    const panel = this.active?.ref.overlayElement;\n    if (!panel) return;\n    const items = this.collectPanelFocusables(panel);\n    if (items.length === 0) return;\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    let nextIndex = currentIndex;\n    if (key === 'ArrowDown' || key === 'ArrowRight') nextIndex = (currentIndex + 1 + items.length) % items.length;\n    else if (key === 'ArrowUp' || key === 'ArrowLeft') nextIndex = (currentIndex - 1 + items.length) % items.length;\n    else if (key === 'Home') nextIndex = 0;\n    else if (key === 'End') nextIndex = items.length - 1;\n    if (nextIndex !== currentIndex && items[nextIndex]) {\n      event.preventDefault();\n      items[nextIndex].focus();\n    }\n  }\n\n  private collectPanelFocusables(root: HTMLElement): HTMLElement[] {\n    return Array.from(\n      root.querySelectorAll<HTMLElement>('a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'),\n    ).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);\n  }\n\n  private focusFirstInPanel(): void {\n    const panel = this.active?.ref.overlayElement;\n    if (!panel) return;\n    const items = this.collectPanelFocusables(panel);\n    items[0]?.focus();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;AAoCA;;AAEG;MAoHU,eAAe,CAAA;AACP,IAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AACjC,IAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AACzB,IAAA,GAAG,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC9B,IAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC;AAClD,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAEvC,IAAA,KAAK,GAAG,KAAK,CAAmB,EAAE,4EAAC;;AAEnC,IAAA,YAAY,GAAG,KAAK,CAAS,qBAAqB,mFAAC;AACnD,IAAA,UAAU,GAAG,KAAK,CAAmB,SAAS,iFAAC;AAC/C,IAAA,SAAS,GAAG,KAAK,CAAS,SAAS,gFAAC;AACpC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;;AAEzB,IAAA,YAAY,GAAG,KAAK,CAAU,IAAI,mFAAC;;AAEnC,IAAA,aAAa,GAAG,KAAK,CAAU,IAAI,oFAAC;AACpC,IAAA,cAAc,GAAG,KAAK,CAAS,iBAAiB,qFAAC;AACvC,IAAA,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU;;AAGhC,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;QAC7B,OAAO,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE;AAClF,IAAA,CAAC,oFAAC;AAEiB,IAAA,MAAM,GAAG,MAAM,CAAgB,IAAI,6EAAC;IAC/C,MAAM,GAAyB,IAAI;AAE1B,IAAA,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAuB,aAAa,CAAC;AAEtF,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;YAC7B,IAAI,IAAI,CAAC,YAAY,EAAE,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;AAAE,gBAAA,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,QAAQ,CAAC;AACvG,QAAA,CAAC,CAAC;AACF,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClD;AAEmB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,OAAO,CAAC,iDAAiD,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACpF,IAAA,CAAC,kFAAC;AAEiB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAChD,QAAA,MAAM,IAAI,GAAG,CAAC,qEAAqE,CAAC;AACpF,QAAA,IAAI,CAAC,IAAI,CACP,uBAAuB,EACvB,0BAA0B,EAC1B,6BAA6B,EAC7B,+BAA+B,EAC/B,8BAA8B,EAC9B,wBAAwB,EACxB,2BAA2B,EAC3B,+BAA+B,EAC/B,gCAAgC,EAChC,0BAA0B,EAC1B,yBAAyB,EACzB,0CAA0C,EAC1C,4CAA4C,CAC7C;AACD,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AACvB,IAAA,CAAC,qFAAC;AAEQ,IAAA,OAAO,CAAC,CAAiB,EAAA;AACjC,QAAA,OAAO,CAAwB;IACjC;AACU,IAAA,aAAa,CAAC,CAAiB,EAAA;AACvC,QAAA,OAAO,CAA8B;IACvC;AACU,IAAA,OAAO,CAAC,CAAiB,EAAA;AACjC,QAAA,OAAO,CAAwB;IACjC;AAEU,IAAA,YAAY,CAAC,EAAsB,EAAA;QAC3C,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC9B;IAEU,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;IACzB;IAEU,cAAc,CAAC,OAAoB,EAAE,IAAoB,EAAA;AACjE,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,QAAQ,EAAE;;AACzC,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC;IACvC;IAEU,YAAY,CAAC,OAAoB,EAAE,IAAoB,EAAA;AAC/D,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,EAAE;YAAE;QAC/B,IAAI,CAAC,QAAQ,EAAE;AACf,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;IAChD;AAEQ,IAAA,MAAM,CAAC,OAAoB,EAAE,IAAoB,EAAE,GAAyB,EAAA;AAClF,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC;AACnB,aAAA,QAAQ;aACR,mBAAmB,CAAC,OAAO;aAC3B,sBAAsB,CAAC,KAAK;aAC5B,QAAQ,CAAC,KAAK;AACd,aAAA,aAAa,CAAC;AACb,YAAA;AACE,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,OAAO,EAAE,QAAQ;AACjB,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,OAAO,EAAE,CAAC;AACX,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,CAAC,CAAC;AACZ,aAAA;AACF,SAAA,CAAC;AAEJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;AAC9B,YAAA,gBAAgB,EAAE,QAAQ;YAC1B,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE;AAC1D,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,aAAa,EAAE,kCAAkC;YACjD,UAAU,EAAE,CAAC,mBAAmB,CAAC;AAClC,SAAA,CAAC;AAEF,QAAA,MAAM,MAAM,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACrE,QAAA,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC;AAClB,QAAA,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE;QACxC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC;QAEhC,KAAK,CAAC,GAAG,CAAC,aAAa,EAAE,EAAE,GAAG,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC;AACnF,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,MAAK;YACd,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO,CAAC,KAAK,EAAE;AACjB,QAAA,CAAC,CAAC;IACN;IAEU,QAAQ,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE;AACzB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;QACpB;AACA,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;IACvB;;AAGU,IAAA,gBAAgB,CAAC,KAAoB,EAAA;AAC7C,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG;AACrB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa;AACpC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,sCAAsC,CAAC,CAAC,CAAC,MAAM,CAC5G,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CACrC;AACD,QAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;QAC3B,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC;QAE5E,IAAI,GAAG,KAAK,WAAW,IAAI,YAAY,KAAK,CAAC,CAAC,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;;YAEtB,cAAc,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC9C;QACF;AACA,QAAA,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,KAAK;YAAE;QACpF,IAAI,SAAS,GAAG,YAAY;QAC5B,IAAI,GAAG,KAAK,YAAY;AAAE,YAAA,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM;aACvF,IAAI,GAAG,KAAK,WAAW;AAAE,YAAA,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM;aAC3F,IAAI,GAAG,KAAK,MAAM;YAAE,SAAS,GAAG,CAAC;aACjC,IAAI,GAAG,KAAK,KAAK;AAAE,YAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;QACvD,IAAI,SAAS,KAAK,YAAY,IAAI,QAAQ,CAAC,SAAS,CAAC,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE;QAC7B;IACF;;AAGU,IAAA,cAAc,CAAC,KAAoB,EAAA;AAC3C,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG;QACrB,IACE,GAAG,KAAK,WAAW;AACnB,YAAA,GAAG,KAAK,SAAS;AACjB,YAAA,GAAG,KAAK,WAAW;AACnB,YAAA,GAAG,KAAK,YAAY;AACpB,YAAA,GAAG,KAAK,MAAM;AACd,YAAA,GAAG,KAAK,KAAK;YAEb;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,cAAc;AAC7C,QAAA,IAAI,CAAC,KAAK;YAAE;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC;AAChD,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE;QACxB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC;QACzE,IAAI,SAAS,GAAG,YAAY;AAC5B,QAAA,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,YAAY;AAAE,YAAA,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM;AACxG,aAAA,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,WAAW;AAAE,YAAA,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM;aAC1G,IAAI,GAAG,KAAK,MAAM;YAAE,SAAS,GAAG,CAAC;aACjC,IAAI,GAAG,KAAK,KAAK;AAAE,YAAA,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;QACpD,IAAI,SAAS,KAAK,YAAY,IAAI,KAAK,CAAC,SAAS,CAAC,EAAE;YAClD,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE;QAC1B;IACF;AAEQ,IAAA,sBAAsB,CAAC,IAAiB,EAAA;AAC9C,QAAA,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,gBAAgB,CAAc,kEAAkE,CAAC,CACvG,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,YAAY,KAAK,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9E;IAEQ,iBAAiB,GAAA;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,cAAc;AAC7C,QAAA,IAAI,CAAC,KAAK;YAAE;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC;AAChD,QAAA,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE;IACnB;wGAnNW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,YAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzGhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA9GS,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,2FAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAgHnE,eAAe,EAAA,UAAA,EAAA,CAAA;kBAnH3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,QAAQ;oBAClB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC;AAC/E,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,YAAY;AAClB,wBAAA,mBAAmB,EAAE,aAAa;AAClC,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,wBAAwB,EAAE,cAAc;AACzC,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGT,EAAA,CAAA;AACF,iBAAA;m4BA8ByE,aAAa,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACvLvF;;AAEG;;;;"}

package/fesm2022/ojiepermana-angular-navigation-types.mjs

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=ojiepermana-angular-navigation-types.mjs.map

package/fesm2022/ojiepermana-angular-navigation-types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-navigation-types.mjs","sources":["../../../projects/angular/navigation/types/ojiepermana-angular-navigation-types.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;AAEG"}

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

@@ -0,0 +1,35 @@
+import { makeEnvironmentProviders, provideEnvironmentInitializer, inject } from '@angular/core';
+import { THEME_PANEL_THEME_PORT } from '@ojiepermana/angular/layout/component';
+import { ThemeService } from '@ojiepermana/angular/theme/services';
+import { MATERIAL_THEME_CONFIG } from '@ojiepermana/angular/theme/token';
+import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+
+function provideMaterialTheme(config = {}, ...features) {
+    return makeEnvironmentProviders([
+        { provide: MATERIAL_THEME_CONFIG, useValue: config },
+        { provide: THEME_PANEL_THEME_PORT, useExisting: ThemeService },
+        provideEnvironmentInitializer(() => {
+            inject(ThemeService);
+        }),
+        ...features.flatMap((feature) => feature.providers),
+    ]);
+}
+function withMaterialDefaults() {
+    return {
+        providers: [
+            { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: { disabled: true } },
+            {
+                provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+                useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },
+            },
+        ],
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { provideMaterialTheme, withMaterialDefaults };
+//# sourceMappingURL=ojiepermana-angular-theme-provider.mjs.map

package/fesm2022/ojiepermana-angular-theme-provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-theme-provider.mjs","sources":["../../../projects/angular/theme/provider/src/lib/theme.provider.ts","../../../projects/angular/theme/provider/ojiepermana-angular-theme-provider.ts"],"sourcesContent":["import {\n  inject,\n  type EnvironmentProviders,\n  type Provider,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\nimport { THEME_PANEL_THEME_PORT } from '@ojiepermana/angular/layout/component';\nimport { ThemeService } from '@ojiepermana/angular/theme/services';\nimport { MATERIAL_THEME_CONFIG, type MaterialThemeConfig } from '@ojiepermana/angular/theme/token';\nimport { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\n\nexport interface MaterialThemeFeature {\n  readonly providers: Provider[];\n}\n\nexport function provideMaterialTheme(\n  config: MaterialThemeConfig = {},\n  ...features: MaterialThemeFeature[]\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: MATERIAL_THEME_CONFIG, useValue: config },\n    { provide: THEME_PANEL_THEME_PORT, useExisting: ThemeService },\n    provideEnvironmentInitializer(() => {\n      inject(ThemeService);\n    }),\n    ...features.flatMap((feature) => feature.providers),\n  ]);\n}\n\nexport function withMaterialDefaults(): MaterialThemeFeature {\n  return {\n    providers: [\n      { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: { disabled: true } },\n      {\n        provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n        useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },\n      },\n    ],\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;SAiBgB,oBAAoB,CAClC,SAA8B,EAAE,EAChC,GAAG,QAAgC,EAAA;AAEnC,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,EAAE;AACpD,QAAA,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,YAAY,EAAE;QAC9D,6BAA6B,CAAC,MAAK;YACjC,MAAM,CAAC,YAAY,CAAC;AACtB,QAAA,CAAC,CAAC;AACF,QAAA,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC;AACpD,KAAA,CAAC;AACJ;SAEgB,oBAAoB,GAAA;IAClC,OAAO;AACL,QAAA,SAAS,EAAE;YACT,EAAE,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;AACpE,YAAA;AACE,gBAAA,OAAO,EAAE,8BAA8B;gBACvC,QAAQ,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE;AAChE,aAAA;AACF,SAAA;KACF;AACH;;ACzCA;;AAEG;;;;"}