@ojiepermana/angular-navigation 22.0.43 → 22.0.45

package/fesm2022/ojiepermana-angular-navigation-navigation-flyout-menu.component-CACN0O3T.mjs

@@ -0,0 +1,637 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, computed, signal, Component } from '@angular/core';
+import { IconComponent } from '@ojiepermana/angular-component/icon';
+import { cn } from '@ojiepermana/angular-component/utils';
+import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-BY-DXx81.mjs';
+import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';
+import { NavigationService } from '@ojiepermana/angular-navigation/service';
+
+class NavigationFlyoutMenuComponent {
+    nav = inject(NavigationService);
+    host = inject(ElementRef);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    label = input('Menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Nama Material Symbols untuk trigger; `null` = label saja (mode normal). */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Trigger hanya ikon — label tetap diumumkan via aria-label/title. */
+    iconOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    /** Penempatan ikon relatif label: `start` (default) atau `end`. */
+    iconPosition = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    /** Bentuk visual tombol trigger: `button` (pil) | `link` | `plain` (ghost). */
+    variant = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Trigger mengambang (`fixed`) — host menjadi popover lepas, panel menempel ke trigger. */
+    floating = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
+    /** Kelas Tailwind untuk host trigger (posisi pojok floating / styling wrapper in-flow). */
+    triggerClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+    /** `bottom` = bar berada di bawah konten; panel menempel sisi bawah container dan tumbuh ke atas. */
+    position = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    typeStyle = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    /** Kelas Tailwind untuk container `<li>` tiap tab group (mengatur tinggi/border/padding container). */
+    groupClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    panelId = computed(() => `nav-flyout-${this.navId()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    isBorderRail = computed(() => this.typeStyle() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    isBottom = computed(() => this.position() === 'bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBottom" }] : /* istanbul ignore next */ []));
+    /** Compact (mobile) selalu icon-only; selain itu mengikuti input `iconOnly`. */
+    showIconOnly = computed(() => this.compact() || this.iconOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIconOnly" }] : /* istanbul ignore next */ []));
+    triggerIcon = computed(() => this.icon() ?? (this.showIconOnly() ? 'menu' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []));
+    /** Kelas tambahan untuk NavigationItem di dalam flyout saat style border-rail aktif. */
+    navItemClass = computed(() => 
+    // h-8 menjaga leaf di row tetap muat dalam tinggi 48px (py-2 + 32px) agar
+    // border bawah row tidak terdorong melewati posisi rail layout.
+    cn(this.itemClass(), this.isBorderRail() && 'h-8 rounded-none hover:bg-transparent hover:text-primary'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []));
+    branches = computed(() => this.items().filter((item) => item.children.length > 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []));
+    activeBranch = computed(() => {
+        const key = this.nav.currentPanelKey(this.navId());
+        return this.branches().find((branch) => branch.key === key) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeBranch" }] : /* istanbul ignore next */ []));
+    /**
+     * Floating: sisi popover relatif trigger — `true` = rata kanan (buka ke kiri, untuk trigger di
+     * pojok kanan), `false` = rata kiri (buka ke kanan). Diukur dari posisi trigger saat dibuka.
+     */
+    floatingAlignEnd = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingAlignEnd" }] : /* istanbul ignore next */ []));
+    /**
+     * Offset panel terhadap host agar panel menimpa penuh container parent dari
+     * `Navigation` (lebar sama persis; posisi atas di mode top, posisi bawah di
+     * mode bottom). `null` berarti pengukuran tidak tersedia (mis. SSR/jsdom)
+     * dan panel jatuh ke lebar host sendiri.
+     */
+    panelPlacement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
+    panelWrapperClasses = computed(() => {
+        if (this.floating()) {
+            // Floating: popover menempel ke trigger — atas/bawah ikut nav-position; sisi kiri/kanan
+            // ikut posisi trigger (floatingAlignEnd) agar tidak keluar layar saat trigger di pojok kiri.
+            return cn('absolute z-50 w-[min(22rem,85vw)] max-w-[85vw]', this.floatingAlignEnd() ? 'right-0' : 'left-0', this.isBottom() ? 'bottom-full mb-2' : 'top-full mt-2');
+        }
+        // Default: panel menutupi (overlay) container bar persis — posisi & lebar ikut container.
+        return cn('absolute z-50', !this.panelPlacement() && cn('inset-x-0', this.isBottom() ? 'bottom-0' : 'top-0'));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelWrapperClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Mode bottom membalik urutan visual: grid entri di atas, bar di bawah (dekat bar trigger).
+     * `min-h-0 flex-1` membuat menu mengisi penuh panel card (yang di-clip) sehingga ROW 2
+     * bisa jadi satu-satunya area scroll.
+     */
+    menuClasses = computed(() => cn('flex min-h-0 flex-1', this.isBottom() ? 'flex-col-reverse' : 'flex-col'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * ROW 1 = bar flyout: satu baris horizontal seperti bar navbar —
+     * Header (kiri) · menu item (tengah, flex-1) · Footer (kanan). `shrink-0` membuatnya DIAM
+     * (tidak ikut scroll) — hanya ROW 2 (grid child) yang punya area scroll sendiri.
+     * Border memisahkan bar dari ROW 2 di sisi yang menjauh dari bar (bawah di mode top).
+     */
+    barRowClasses = computed(() => cn('flex shrink-0 items-center gap-2 bg-popover px-2 md:px-3', this.isBorderRail()
+        ? cn('min-h-12 border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
+        : cn('min-h-[3.25rem] border-[hsl(var(--border)/var(--opacity-60))]', this.isBottom() ? 'border-t' : 'border-b')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barRowClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * ROW 2 = HANYA area ini yang scroll: children dari nav item aktif. `min-h-0 flex-1`
+     * membatasi tingginya ke sisa ruang panel lalu `overflow-y-auto` men-scroll isinya —
+     * bar ROW 1 & kontainer panel sendiri tetap diam.
+     */
+    scrollRegionClasses = computed(() => cn('min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollRegionClasses" }] : /* istanbul ignore next */ []));
+    isOpen() {
+        return this.nav.isDrawerOpen(this.navId());
+    }
+    onWindowResize() {
+        if (this.isOpen()) {
+            this.measurePanelPlacement();
+        }
+    }
+    measurePanelPlacement() {
+        // Floating: panel anchored ke trigger via CSS, bukan overlay container. Pilih sisi popover
+        // (kanan→buka kiri / kiri→buka kanan) dari posisi trigger agar tidak keluar layar.
+        if (this.floating()) {
+            const triggerEl = this.host.nativeElement.querySelector('[data-navigation-flyout-trigger="true"]');
+            const rect = triggerEl?.getBoundingClientRect();
+            if (rect && typeof window !== 'undefined' && window.innerWidth > 0) {
+                this.floatingAlignEnd.set(rect.left + rect.width / 2 > window.innerWidth / 2);
+            }
+            this.panelPlacement.set(null);
+            return;
+        }
+        const hostEl = this.host.nativeElement;
+        const navEl = hostEl.closest('[data-navigation-id]');
+        let container = navEl?.parentElement ?? hostEl.parentElement;
+        // Wrapper display:contents punya rect kosong — naik terus sampai container yang punya box visual.
+        while (container && container.getBoundingClientRect().width <= 0 && container.parentElement) {
+            container = container.parentElement;
+        }
+        const containerRect = (container ?? hostEl).getBoundingClientRect();
+        const hostRect = hostEl.getBoundingClientRect();
+        if (containerRect.width <= 0) {
+            this.panelPlacement.set(null);
+            return;
+        }
+        this.panelPlacement.set({
+            left: containerRect.left - hostRect.left,
+            top: containerRect.top - hostRect.top,
+            bottom: hostRect.bottom - containerRect.bottom,
+            width: containerRect.width,
+        });
+    }
+    toggleFlyout() {
+        if (this.isOpen()) {
+            this.closeFlyout(false);
+            return;
+        }
+        this.measurePanelPlacement();
+        this.nav.openDrawer(this.navId());
+        const current = this.nav.currentPanelKey(this.navId());
+        const branches = this.branches();
+        if (!branches.some((branch) => branch.key === current)) {
+            const first = branches.find((branch) => !branch.disabled) ?? branches[0];
+            if (first) {
+                this.nav.openPanel(this.navId(), first);
+            }
+        }
+        queueMicrotask(() => this.focusFirstPanelItem());
+    }
+    closeFlyout(restoreFocus) {
+        this.nav.closeDrawer(this.navId());
+        if (restoreFocus) {
+            queueMicrotask(() => this.focusTrigger());
+        }
+    }
+    onEscape(event) {
+        if (!this.isOpen()) {
+            return;
+        }
+        event.preventDefault();
+        this.closeFlyout(true);
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen()) {
+            return;
+        }
+        const target = event.target;
+        if (target && !this.host.nativeElement.contains(target)) {
+            this.closeFlyout(false);
+        }
+    }
+    isItemActive(item) {
+        return this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
+    }
+    isBranchOpen(item) {
+        return this.nav.isPanelOpen(this.navId(), item);
+    }
+    openBranch(item) {
+        this.nav.openPanel(this.navId(), item);
+    }
+    /**
+     * Host trigger+panel. Default `relative block w-full` (mengalir di dalam bar/div). Saat
+     * `floating`, jadi `fixed` (mengambang) — default pojok kanan-atas, override via `triggerClass`.
+     */
+    hostClasses = computed(() => this.floating()
+        ? cn('fixed z-50 block w-max', this.triggerClass() || 'right-6 top-6')
+        : cn('relative block w-full', this.triggerClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    /** Bentuk visual trigger: `button` (pil), `link` (tautan), atau `plain` (ghost); + ikon/teks. */
+    triggerClasses() {
+        const iconOnly = this.showIconOnly();
+        const base = 'nav-trigger group/nav inline-flex min-w-0 items-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+        if (this.variant() === 'link') {
+            return cn(base, 'nav-text underline-offset-4 hover:underline', 
+            // Icon-only tetap punya target ≥ 36px (WCAG 2.5.8) walau tanpa chrome tautan.
+            iconOnly ? 'h-9 w-9 justify-center gap-0' : 'gap-1.5', this.isOpen() ? 'text-primary underline' : 'text-primary/90 hover:text-primary', this.itemClass());
+        }
+        if (this.variant() === 'plain') {
+            return cn(base, 'gap-2 rounded-md nav-text', iconOnly ? 'h-9 w-9 justify-center' : 'h-9 px-3 py-2', this.isOpen()
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass());
+        }
+        // button (pil, default)
+        return cn(base, 'h-10 gap-2 rounded-full border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-4 py-2 nav-text shadow-sm', iconOnly && 'w-10 justify-center gap-0 px-0', this.isBorderRail()
+            ? this.isOpen()
+                ? 'text-primary'
+                : 'text-foreground/80 hover:text-primary'
+            : this.isOpen()
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass());
+    }
+    panelCardClasses() {
+        if (this.floating()) {
+            // Floating: kartu popover mandiri (rounded penuh + border + shadow), tinggi dibatasi & di-clip;
+            // hanya ROW 2 (children) yang scroll.
+            return cn('relative flex flex-col rounded-xl border border-[hsl(var(--border)/var(--opacity-70))] bg-popover text-popover-foreground shadow-2xl', 'max-h-[min(28rem,70vh)] overflow-hidden');
+        }
+        // Border-rail: panel menutup tepat content-box frame layout, jadi garis
+        // sisi bar memakai border frame (rail) itu sendiri — panel cukup menggambar
+        // border 1.5px senada rail pada sisi yang menjauh dari bar agar sambungan
+        // tetap lurus (bawah di mode top, atas di mode bottom).
+        return cn('relative flex flex-col bg-popover text-popover-foreground shadow-2xl', 
+        // Batasi tinggi panel ke viewport lalu CLIP — bukan scroll. Hanya ROW 2 (children, lihat
+        // scrollRegionClasses) yang scroll; bar ROW 1 & kontainer panel sendiri tetap diam.
+        'max-h-[calc(100dvh-5rem)] overflow-hidden', this.isBorderRail()
+            ? cn('rounded-none border-border', this.isBottom() ? 'border-t-[1.5px]' : 'border-b-[1.5px]')
+            : 'rounded-[var(--layout-frame-radius)] border border-[hsl(var(--border)/var(--opacity-70))]');
+    }
+    rowClasses() {
+        // Menu item = bagian tengah ROW 1: isi ruang antara Footer & Header (flex-1) lalu
+        // di-center seperti menubar navbar. Saat jumlah/lebar item melebihi band, band ini
+        // scroll horizontal (overflow-x-auto) agar tidak ada item ter-clip & takterjangkau
+        // (panel card meng-clip overflow-x). Tinggi & border bar ditangani barRowClasses().
+        return cn('m-0 flex min-w-0 flex-1 list-none items-center justify-center gap-1 overflow-x-auto overscroll-x-contain py-2');
+    }
+    /**
+     * Container `<li>` tab group. Basis `flex -my-2 self-stretch` membuat tab setinggi
+     * penuh row (lihat tabClasses); consumer dapat menimpa/menambah lewat `nav-group-class`
+     * (global) atau `item.classes.container` (per-group) untuk fleksibilitas.
+     */
+    groupContainerClasses(item) {
+        return cn('flex -my-2 self-stretch', this.groupClass(), item.classes?.container);
+    }
+    tabClasses(item) {
+        return cn(
+        // Tinggi tab group mengikuti tinggi penuh row (parent). Wrapper <li> memakai
+        // `-my-2 self-stretch` untuk membatalkan `py-2` row; tombol `h-full` mengisi penuh
+        // sehingga sisinya rata dengan border row — sudut pada sisi border dibuat siku
+        // agar menyambung (bawah di mode top, atas di mode bottom).
+        'nav-trigger nav-text group/nav inline-flex h-full min-h-9 min-w-0 items-center gap-2 rounded-md px-3 font-medium transition-colors', this.isBottom() ? 'rounded-t-none' : 'rounded-b-none', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isBorderRail()
+            ? this.isBranchOpen(item) || this.isItemActive(item)
+                ? 'rounded-none text-primary'
+                : 'rounded-none text-foreground/80 hover:text-primary'
+            : this.isBranchOpen(item)
+                ? 'bg-accent text-accent-foreground'
+                : this.isItemActive(item)
+                    ? 'font-semibold text-foreground hover:bg-accent hover:text-accent-foreground'
+                    : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', item.classes?.wrapper, this.itemClass());
+    }
+    tabChevronClasses(item) {
+        return cn('shrink-0 self-center text-current transition-transform duration-200', this.isBranchOpen(item) && 'rotate-90');
+    }
+    onRowKeydown(event) {
+        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowDown') {
+            return;
+        }
+        const rowItems = Array.from(this.host.nativeElement.querySelectorAll('[data-navigation-flyout-row="true"] [role="menuitem"]'));
+        const currentIndex = rowItems.indexOf(document.activeElement);
+        if (currentIndex === -1) {
+            return;
+        }
+        event.preventDefault();
+        if (event.key === 'ArrowDown') {
+            const entry = this.host.nativeElement.querySelector('[data-navigation-flyout-content] [role="menuitem"]');
+            entry?.focus();
+            return;
+        }
+        const direction = event.key === 'ArrowRight' ? 1 : -1;
+        rowItems[(currentIndex + direction + rowItems.length) % rowItems.length]?.focus();
+    }
+    focusFirstPanelItem() {
+        const panel = this.host.nativeElement.querySelector('[data-navigation-flyout-panel="true"]');
+        if (!panel) {
+            return;
+        }
+        // Fokus awal ke menu item ROW 1 (lalu grid ROW 2) — BUKAN kontrol Header/Footer yang
+        // juga ada di bar (mis. tombol logout). querySelector mengembalikan match pertama dalam
+        // urutan DOM, dan Header/Footer bisa mendahului menu, jadi lingkup ke baris menu dulu.
+        const target = panel.querySelector('[data-navigation-flyout-row="true"] [role="menuitem"], [data-navigation-flyout-row="true"] a[href]') ?? panel.querySelector('[role="menuitem"], a[href]');
+        target?.focus();
+    }
+    focusTrigger() {
+        this.host.nativeElement
+            .querySelector('[data-navigation-flyout-trigger="true"]')
+            ?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFlyoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationFlyoutMenuComponent, isStandalone: true, selector: "NavigationFlyoutMenu", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { listeners: { "keydown.escape": "onEscape($event)", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <button
+      type="button"
+      data-navigation-flyout-trigger="true"
+      [class]="triggerClasses()"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="isOpen() ? panelId() : null"
+      [attr.aria-label]="showIconOnly() ? label() : null"
+      [attr.title]="showIconOnly() ? label() : null"
+      (click)="toggleFlyout()"
+    >
+      @if (showIconOnly()) {
+        <Icon [name]="triggerIcon() ?? 'menu'" [size]="18" class="text-current" />
+      } @else {
+        @if (iconPosition() === 'start' && triggerIcon(); as iconName) {
+          <Icon [name]="iconName" [size]="18" class="shrink-0 text-current" />
+        }
+
+        <span class="truncate">{{ label() }}</span>
+
+        @if (iconPosition() === 'end' && triggerIcon(); as iconName) {
+          <Icon [name]="iconName" [size]="18" class="shrink-0 text-current" />
+        }
+      }
+    </button>
+
+    @if (isOpen()) {
+      <div
+        [id]="panelId()"
+        data-navigation-flyout-panel="true"
+        [class]="panelWrapperClasses()"
+        [style.left.px]="floating() ? null : panelPlacement()?.left"
+        [style.top.px]="floating() || isBottom() ? null : panelPlacement()?.top"
+        [style.bottom.px]="!floating() && isBottom() ? panelPlacement()?.bottom : null"
+        [style.width.px]="floating() ? null : panelPlacement()?.width"
+      >
+        <div [class]="panelCardClasses()">
+          <div role="menu" [class]="menuClasses()" [attr.aria-label]="label()">
+            <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:
+                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)
+                 di bawah bar yang ikut scroll. -->
+            <div data-navigation-flyout-bar="true" [class]="barRowClasses()">
+              <ng-content select="NavigationHeader" />
+
+              <ul
+                role="none"
+                data-navigation-flyout-row="true"
+                [class]="rowClasses()"
+                (keydown)="onRowKeydown($event)"
+              >
+                @for (item of items(); track item.key) {
+                  @switch (item.type) {
+                    @case ('divider') {
+                      <li role="separator" class="mx-1 h-5 w-px bg-border"></li>
+                    }
+                    @case ('spacer') {
+                      <li role="none" aria-hidden="true" class="flex-1"></li>
+                    }
+                    @default {
+                      @if (item.children.length > 0) {
+                        <li
+                          role="none"
+                          [class]="groupContainerClasses(item)"
+                          [attr.data-navigation-item-key]="item.key"
+                        >
+                          <button
+                            type="button"
+                            role="menuitem"
+                            data-navigation-flyout-tab="true"
+                            [class]="tabClasses(item)"
+                            [attr.aria-expanded]="isBranchOpen(item)"
+                            [attr.aria-controls]="item.panelId"
+                            [disabled]="item.disabled || null"
+                            (click)="openBranch(item)"
+                          >
+                            <NavigationItemContent
+                              [item]="item"
+                              [active]="isItemActive(item)"
+                              [compact]="false"
+                              [orientation]="'horizontal'"
+                              [level]="0"
+                              [iconTemplate]="iconTemplate()"
+                            />
+                            <Icon
+                              name="chevron_right"
+                              [size]="16"
+                              [class]="tabChevronClasses(item)"
+                            />
+                          </button>
+                        </li>
+                      } @else {
+                        <li
+                          NavigationItem
+                          [navId]="navId()"
+                          [item]="item"
+                          [level]="0"
+                          [orientation]="'horizontal'"
+                          [compact]="false"
+                          [itemClass]="navItemClass()"
+                          [activeIds]="activeIds()"
+                          [activeUrl]="activeUrl()"
+                          [iconTemplate]="iconTemplate()"
+                          [collapseTree]="collapseTree()"
+                          [openedIds]="openedIds()"
+                          (openedIdsChange)="openedIdsChange.emit($event)"
+                          (itemSelected)="itemSelected.emit($event)"
+                        ></li>
+                      }
+                    }
+                  }
+                }
+              </ul>
+
+              <ng-content select="NavigationFooter" />
+            </div>
+
+            <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->
+            <div data-navigation-flyout-scroll="true" [class]="scrollRegionClasses()">
+              @if (activeBranch(); as branch) {
+                <NavigationEntryGrid
+                  [navId]="navId()"
+                  [branch]="branch"
+                  [typeStyle]="typeStyle()"
+                  [itemClass]="itemClass()"
+                  [activeIds]="activeIds()"
+                  [activeUrl]="activeUrl()"
+                  [iconTemplate]="iconTemplate()"
+                  [collapseTree]="collapseTree()"
+                  [openedIds]="openedIds()"
+                  (openedIdsChange)="openedIdsChange.emit($event)"
+                  (itemSelected)="itemSelected.emit($event)"
+                />
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationFlyoutMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationFlyoutMenu',
+                    imports: [
+                        IconComponent,
+                        NavigationEntryGridComponent,
+                        NavigationItemComponent,
+                        NavigationItemContentComponent,
+                    ],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '(keydown.escape)': 'onEscape($event)',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(window:resize)': 'onWindowResize()',
+                    },
+                    template: `
+    <button
+      type="button"
+      data-navigation-flyout-trigger="true"
+      [class]="triggerClasses()"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="isOpen() ? panelId() : null"
+      [attr.aria-label]="showIconOnly() ? label() : null"
+      [attr.title]="showIconOnly() ? label() : null"
+      (click)="toggleFlyout()"
+    >
+      @if (showIconOnly()) {
+        <Icon [name]="triggerIcon() ?? 'menu'" [size]="18" class="text-current" />
+      } @else {
+        @if (iconPosition() === 'start' && triggerIcon(); as iconName) {
+          <Icon [name]="iconName" [size]="18" class="shrink-0 text-current" />
+        }
+
+        <span class="truncate">{{ label() }}</span>
+
+        @if (iconPosition() === 'end' && triggerIcon(); as iconName) {
+          <Icon [name]="iconName" [size]="18" class="shrink-0 text-current" />
+        }
+      }
+    </button>
+
+    @if (isOpen()) {
+      <div
+        [id]="panelId()"
+        data-navigation-flyout-panel="true"
+        [class]="panelWrapperClasses()"
+        [style.left.px]="floating() ? null : panelPlacement()?.left"
+        [style.top.px]="floating() || isBottom() ? null : panelPlacement()?.top"
+        [style.bottom.px]="!floating() && isBottom() ? panelPlacement()?.bottom : null"
+        [style.width.px]="floating() ? null : panelPlacement()?.width"
+      >
+        <div [class]="panelCardClasses()">
+          <div role="menu" [class]="menuClasses()" [attr.aria-label]="label()">
+            <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:
+                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)
+                 di bawah bar yang ikut scroll. -->
+            <div data-navigation-flyout-bar="true" [class]="barRowClasses()">
+              <ng-content select="NavigationHeader" />
+
+              <ul
+                role="none"
+                data-navigation-flyout-row="true"
+                [class]="rowClasses()"
+                (keydown)="onRowKeydown($event)"
+              >
+                @for (item of items(); track item.key) {
+                  @switch (item.type) {
+                    @case ('divider') {
+                      <li role="separator" class="mx-1 h-5 w-px bg-border"></li>
+                    }
+                    @case ('spacer') {
+                      <li role="none" aria-hidden="true" class="flex-1"></li>
+                    }
+                    @default {
+                      @if (item.children.length > 0) {
+                        <li
+                          role="none"
+                          [class]="groupContainerClasses(item)"
+                          [attr.data-navigation-item-key]="item.key"
+                        >
+                          <button
+                            type="button"
+                            role="menuitem"
+                            data-navigation-flyout-tab="true"
+                            [class]="tabClasses(item)"
+                            [attr.aria-expanded]="isBranchOpen(item)"
+                            [attr.aria-controls]="item.panelId"
+                            [disabled]="item.disabled || null"
+                            (click)="openBranch(item)"
+                          >
+                            <NavigationItemContent
+                              [item]="item"
+                              [active]="isItemActive(item)"
+                              [compact]="false"
+                              [orientation]="'horizontal'"
+                              [level]="0"
+                              [iconTemplate]="iconTemplate()"
+                            />
+                            <Icon
+                              name="chevron_right"
+                              [size]="16"
+                              [class]="tabChevronClasses(item)"
+                            />
+                          </button>
+                        </li>
+                      } @else {
+                        <li
+                          NavigationItem
+                          [navId]="navId()"
+                          [item]="item"
+                          [level]="0"
+                          [orientation]="'horizontal'"
+                          [compact]="false"
+                          [itemClass]="navItemClass()"
+                          [activeIds]="activeIds()"
+                          [activeUrl]="activeUrl()"
+                          [iconTemplate]="iconTemplate()"
+                          [collapseTree]="collapseTree()"
+                          [openedIds]="openedIds()"
+                          (openedIdsChange)="openedIdsChange.emit($event)"
+                          (itemSelected)="itemSelected.emit($event)"
+                        ></li>
+                      }
+                    }
+                  }
+                }
+              </ul>
+
+              <ng-content select="NavigationFooter" />
+            </div>
+
+            <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->
+            <div data-navigation-flyout-scroll="true" [class]="scrollRegionClasses()">
+              @if (activeBranch(); as branch) {
+                <NavigationEntryGrid
+                  [navId]="navId()"
+                  [branch]="branch"
+                  [typeStyle]="typeStyle()"
+                  [itemClass]="itemClass()"
+                  [activeIds]="activeIds()"
+                  [activeUrl]="activeUrl()"
+                  [iconTemplate]="iconTemplate()"
+                  [collapseTree]="collapseTree()"
+                  [openedIds]="openedIds()"
+                  (openedIdsChange)="openedIdsChange.emit($event)"
+                  (itemSelected)="itemSelected.emit($event)"
+                />
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+export { NavigationFlyoutMenuComponent };