@ojiepermana/angular 22.1.14 → 22.2.1

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

@@ -1,404 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, Injector, input, output, computed, signal, effect, afterNextRender, Component } from '@angular/core';
-import { IconComponent } from '@ojiepermana/angular/component/icon';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-COQ-60DS.mjs';
-import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs';
-import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
-
-class NavigationFlyoutMenuComponent {
-    nav = inject(NAVIGATION_ADAPTER);
-    host = inject(ElementRef);
-    injector = inject(Injector);
-    document = inject(DOCUMENT);
-    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 */ []));
-    /** Panel floating menempel ke top viewport dan membentang selebar viewport. */
-    viewport = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewport" }] : /* 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 */ []));
-    /** Kelas tambahan khusus tombol trigger; tidak diterapkan ke host atau item panel. */
-    triggerButtonClass = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggerButtonClass" }] : /* 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 */ []));
-    /** The region a tab controls: the grid of the branch it opens, not the tab bar. */
-    panelContentId = computed(() => `${this.panelId()}-content`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "panelContentId" }] : /* 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(() => 
-    // Tinggi leaf mengikuti token item bersama agar border bawah row tidak
-    // terdorong melewati posisi rail layout di density mana pun.
-    cn(this.itemClass(), this.isBorderRail() &&
-        'h-(--nav-item-height) 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()) {
-            if (this.viewport()) {
-                return 'fixed inset-x-0 top-0 z-50 m-0';
-            }
-            // 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', 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 min-h-(--layout-topbar-height) shrink-0 items-center gap-2 bg-popover px-2 md:px-3', this.isBottom() ? 'border-t' : 'border-b', this.isBorderRail()
-        ? 'border-border'
-        : 'border-[hsl(var(--border)/var(--section-border-opacity))]'), /* @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 */ []));
-    drawerOpen = computed(() => this.nav.isDrawerOpen(this.navId()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "drawerOpen" }] : /* istanbul ignore next */ []));
-    isOpen() {
-        return this.drawerOpen();
-    }
-    constructor() {
-        // Host `(document:click)`/`(window:resize)` bindings mark this view dirty
-        // before the handler runs, so every click in the app re-checked the trigger
-        // even with the panel closed. Both listeners only matter while it is open.
-        effect((onCleanup) => {
-            if (!this.drawerOpen()) {
-                return;
-            }
-            const view = this.document.defaultView;
-            const onDocumentClick = (event) => this.closeOnOutsideClick(event);
-            const onResize = () => this.measurePanelPlacement();
-            this.document.addEventListener('click', onDocumentClick);
-            view?.addEventListener('resize', onResize);
-            onCleanup(() => {
-                this.document.removeEventListener('click', onDocumentClick);
-                view?.removeEventListener('resize', onResize);
-            });
-        });
-    }
-    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);
-            }
-        }
-        // The panel renders under `@if (isOpen())`, so a microtask still runs before
-        // it exists and the focus call finds nothing.
-        afterNextRender({ read: () => this.focusFirstPanelItem() }, { injector: this.injector });
-    }
-    closeFlyout(restoreFocus) {
-        this.nav.closeDrawer(this.navId());
-        if (restoreFocus) {
-            queueMicrotask(() => this.focusTrigger());
-        }
-    }
-    onEscape(event) {
-        if (!this.isOpen()) {
-            return;
-        }
-        event.preventDefault();
-        this.closeFlyout(true);
-    }
-    closeOnOutsideClick(event) {
-        const target = event.target;
-        if (target && !this.host.nativeElement.contains(target)) {
-            this.closeFlyout(false);
-        }
-    }
-    /**
-     * Template method calls re-run on every check. Resolving the row once per
-     * dependency change keeps a redraw from replaying an URL match — and a `cn()`
-     * merge — for every tab in the bar.
-     */
-    itemState = computed(() => {
-        const activeIds = this.activeIds();
-        const activeUrl = this.activeUrl();
-        const openKey = this.nav.currentPanelKey(this.navId());
-        return new Map(this.items().map((item) => {
-            const active = this.nav.isItemActive(item, activeIds, activeUrl);
-            const open = openKey === item.key;
-            return [item, { active, open, tabClasses: this.computeTabClasses(item, active, open) }];
-        }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "itemState" }] : /* istanbul ignore next */ []));
-    isItemActive(item) {
-        return this.itemState().get(item)?.active ?? false;
-    }
-    isBranchOpen(item) {
-        return this.itemState().get(item)?.open ?? false;
-    }
-    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 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 persegi ≥ 24px (WCAG 2.5.8) walau tanpa chrome tautan.
-            iconOnly ? 'h-(--nav-item-height) w-(--nav-item-height) justify-center gap-0' : 'gap-1.5', this.isOpen() ? 'text-primary underline' : 'text-primary/90 hover:text-primary', this.itemClass(), this.triggerButtonClass());
-        }
-        if (this.variant() === 'plain') {
-            return cn(base, 'gap-(--nav-item-gap) rounded-md nav-text', iconOnly
-                ? 'h-(--nav-item-height) w-(--nav-item-height) justify-center'
-                : 'h-(--nav-item-height) px-(--nav-item-padding-x)', this.isOpen()
-                ? 'bg-accent text-foreground'
-                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass(), this.triggerButtonClass());
-        }
-        // button (pil, default)
-        return cn(base, 'h-(--nav-item-height) gap-(--nav-item-gap) rounded-full border border-[hsl(var(--border)/var(--section-border-opacity))] bg-background px-4 nav-text shadow-sm', iconOnly && 'w-(--nav-item-height) justify-center gap-0 px-0', this.isBorderRail()
-            ? this.isOpen()
-                ? 'text-primary'
-                : 'text-foreground/80 hover:text-primary'
-            : this.isOpen()
-                ? 'bg-accent text-foreground'
-                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', this.itemClass(), this.triggerButtonClass());
-    }
-    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(--section-border-opacity))] 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 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' : 'border-b')
-            : 'rounded-[var(--layout-frame-radius)] border border-[hsl(var(--border)/var(--section-border-opacity))]');
-    }
-    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 this.itemState().get(item)?.tabClasses ?? '';
-    }
-    computeTabClasses(item, active, open) {
-        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-(--nav-item-height) min-w-0 items-center gap-(--nav-item-gap) rounded-md px-(--nav-item-padding-x) 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()
-            ? open || active
-                ? 'rounded-none text-primary'
-                : 'rounded-none text-foreground/80 hover:text-primary'
-            : open
-                ? 'bg-accent text-foreground'
-                : active
-                    ? '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-(length:--nav-icon-size-sub) 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.1.6", ngImport: i0, type: NavigationFlyoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerButtonClass: { classPropertyName: "triggerButtonClass", publicName: "triggerButtonClass", 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)" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  data-navigation-flyout-trigger=\"true\"\n  [class]=\"triggerClasses()\"\n  aria-haspopup=\"menu\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n  [attr.aria-label]=\"showIconOnly() ? label() : null\"\n  [attr.title]=\"showIconOnly() ? label() : null\"\n  (click)=\"toggleFlyout()\"\n>\n  @if (showIconOnly()) {\n    <Icon\n      [name]=\"triggerIcon() ?? 'menu'\"\n      size=\"inherit\"\n      [fill]=\"1\"\n      class=\"text-(length:--nav-icon-size) text-current\"\n    />\n  } @else {\n    @if (iconPosition() === 'start' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        [fill]=\"1\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n\n    <span class=\"truncate\">{{ label() }}</span>\n\n    @if (iconPosition() === 'end' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        [fill]=\"1\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n  }\n</button>\n\n@if (isOpen()) {\n  <div\n    [id]=\"panelId()\"\n    data-navigation-flyout-panel=\"true\"\n    [attr.data-navigation-flyout-floating]=\"floating() ? 'true' : null\"\n    [class]=\"panelWrapperClasses()\"\n    [style.left.px]=\"floating() ? null : panelPlacement()?.left\"\n    [style.top.px]=\"floating() || isBottom() ? null : panelPlacement()?.top\"\n    [style.bottom.px]=\"!floating() && isBottom() ? panelPlacement()?.bottom : null\"\n    [style.width.px]=\"floating() ? null : panelPlacement()?.width\"\n  >\n    <div\n      [attr.data-navigation-flyout-floating-card]=\"floating() ? 'true' : null\"\n      [class]=\"panelCardClasses()\"\n    >\n      <div data-navigation-flyout-menu-layout=\"true\" [class]=\"menuClasses()\">\n        <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:\n                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)\n                 di bawah bar yang ikut scroll. -->\n        <div data-navigation-flyout-bar=\"true\" [class]=\"barRowClasses()\">\n          <ng-content select=\"NavigationHeader\" />\n\n          <ul\n            role=\"menu\"\n            tabindex=\"-1\"\n            data-navigation-flyout-row=\"true\"\n            [class]=\"rowClasses()\"\n            [attr.aria-label]=\"label()\"\n            (keydown)=\"onRowKeydown($event)\"\n          >\n            @for (item of items(); track item.key) {\n              @switch (item.type) {\n                @case ('divider') {\n                  <li role=\"separator\" class=\"mx-1 h-5 w-px bg-border\"></li>\n                }\n                @case ('spacer') {\n                  <li role=\"none\" aria-hidden=\"true\" class=\"flex-1\"></li>\n                }\n                @default {\n                  @if (item.children.length > 0) {\n                    <li\n                      role=\"none\"\n                      [class]=\"groupContainerClasses(item)\"\n                      [attr.data-navigation-item-key]=\"item.key\"\n                    >\n                      <button\n                        type=\"button\"\n                        role=\"menuitem\"\n                        data-navigation-flyout-tab=\"true\"\n                        [class]=\"tabClasses(item)\"\n                        [attr.aria-expanded]=\"isBranchOpen(item)\"\n                        [attr.aria-controls]=\"isBranchOpen(item) ? panelContentId() : null\"\n                        [disabled]=\"item.disabled || null\"\n                        (click)=\"openBranch(item)\"\n                      >\n                        <NavigationItemContent\n                          [item]=\"item\"\n                          [active]=\"isItemActive(item)\"\n                          [compact]=\"false\"\n                          [orientation]=\"'horizontal'\"\n                          [level]=\"0\"\n                          [iconTemplate]=\"iconTemplate()\"\n                        />\n                        <Icon\n                          name=\"chevron_right\"\n                          size=\"inherit\"\n                          [class]=\"tabChevronClasses(item)\"\n                        />\n                      </button>\n                    </li>\n                  } @else {\n                    <li\n                      NavigationItem\n                      [navId]=\"navId()\"\n                      [item]=\"item\"\n                      [level]=\"0\"\n                      [orientation]=\"'horizontal'\"\n                      [compact]=\"false\"\n                      [itemClass]=\"navItemClass()\"\n                      [activeIds]=\"activeIds()\"\n                      [activeUrl]=\"activeUrl()\"\n                      [iconTemplate]=\"iconTemplate()\"\n                      [collapseTree]=\"collapseTree()\"\n                      [openedIds]=\"openedIds()\"\n                      (openedIdsChange)=\"openedIdsChange.emit($event)\"\n                      (itemSelected)=\"itemSelected.emit($event)\"\n                    ></li>\n                  }\n                }\n              }\n            }\n          </ul>\n\n          <ng-content select=\"NavigationFooter\" />\n        </div>\n\n        <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->\n        <div\n          [id]=\"panelContentId()\"\n          data-navigation-flyout-scroll=\"true\"\n          [attr.role]=\"activeBranch() ? 'menu' : null\"\n          [attr.aria-label]=\"activeBranch()?.title || null\"\n          [class]=\"scrollRegionClasses()\"\n        >\n          @if (activeBranch(); as branch) {\n            <NavigationEntryGrid\n              [navId]=\"navId()\"\n              [branch]=\"branch\"\n              [typeStyle]=\"typeStyle()\"\n              [itemClass]=\"itemClass()\"\n              [activeIds]=\"activeIds()\"\n              [activeUrl]=\"activeUrl()\"\n              [iconTemplate]=\"iconTemplate()\"\n              [collapseTree]=\"collapseTree()\"\n              [openedIds]=\"openedIds()\"\n              (openedIdsChange)=\"openedIdsChange.emit($event)\"\n              (itemSelected)=\"itemSelected.emit($event)\"\n            />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["[data-navigation-flyout-floating=true]{width:var(--nav-flyout-floating-width, min(22rem, 85vw));max-width:var(--nav-flyout-floating-max-width, 85vw)}[data-navigation-flyout-floating-card=true]{border-radius:var(--nav-flyout-floating-radius, var(--radius-xl))}[data-navigation-flyout-panel=true]{-webkit-app-region:no-drag;app-region:no-drag}\n"], 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", "tooltip-position", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFlyoutMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'NavigationFlyoutMenu', imports: [
-                        IconComponent,
-                        NavigationEntryGridComponent,
-                        NavigationItemComponent,
-                        NavigationItemContentComponent,
-                    ], host: {
-                        '[class]': 'hostClasses()',
-                        '(keydown.escape)': 'onEscape($event)',
-                    }, template: "<button\n  type=\"button\"\n  data-navigation-flyout-trigger=\"true\"\n  [class]=\"triggerClasses()\"\n  aria-haspopup=\"menu\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n  [attr.aria-label]=\"showIconOnly() ? label() : null\"\n  [attr.title]=\"showIconOnly() ? label() : null\"\n  (click)=\"toggleFlyout()\"\n>\n  @if (showIconOnly()) {\n    <Icon\n      [name]=\"triggerIcon() ?? 'menu'\"\n      size=\"inherit\"\n      [fill]=\"1\"\n      class=\"text-(length:--nav-icon-size) text-current\"\n    />\n  } @else {\n    @if (iconPosition() === 'start' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        [fill]=\"1\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n\n    <span class=\"truncate\">{{ label() }}</span>\n\n    @if (iconPosition() === 'end' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        [fill]=\"1\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n  }\n</button>\n\n@if (isOpen()) {\n  <div\n    [id]=\"panelId()\"\n    data-navigation-flyout-panel=\"true\"\n    [attr.data-navigation-flyout-floating]=\"floating() ? 'true' : null\"\n    [class]=\"panelWrapperClasses()\"\n    [style.left.px]=\"floating() ? null : panelPlacement()?.left\"\n    [style.top.px]=\"floating() || isBottom() ? null : panelPlacement()?.top\"\n    [style.bottom.px]=\"!floating() && isBottom() ? panelPlacement()?.bottom : null\"\n    [style.width.px]=\"floating() ? null : panelPlacement()?.width\"\n  >\n    <div\n      [attr.data-navigation-flyout-floating-card]=\"floating() ? 'true' : null\"\n      [class]=\"panelCardClasses()\"\n    >\n      <div data-navigation-flyout-menu-layout=\"true\" [class]=\"menuClasses()\">\n        <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:\n                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)\n                 di bawah bar yang ikut scroll. -->\n        <div data-navigation-flyout-bar=\"true\" [class]=\"barRowClasses()\">\n          <ng-content select=\"NavigationHeader\" />\n\n          <ul\n            role=\"menu\"\n            tabindex=\"-1\"\n            data-navigation-flyout-row=\"true\"\n            [class]=\"rowClasses()\"\n            [attr.aria-label]=\"label()\"\n            (keydown)=\"onRowKeydown($event)\"\n          >\n            @for (item of items(); track item.key) {\n              @switch (item.type) {\n                @case ('divider') {\n                  <li role=\"separator\" class=\"mx-1 h-5 w-px bg-border\"></li>\n                }\n                @case ('spacer') {\n                  <li role=\"none\" aria-hidden=\"true\" class=\"flex-1\"></li>\n                }\n                @default {\n                  @if (item.children.length > 0) {\n                    <li\n                      role=\"none\"\n                      [class]=\"groupContainerClasses(item)\"\n                      [attr.data-navigation-item-key]=\"item.key\"\n                    >\n                      <button\n                        type=\"button\"\n                        role=\"menuitem\"\n                        data-navigation-flyout-tab=\"true\"\n                        [class]=\"tabClasses(item)\"\n                        [attr.aria-expanded]=\"isBranchOpen(item)\"\n                        [attr.aria-controls]=\"isBranchOpen(item) ? panelContentId() : null\"\n                        [disabled]=\"item.disabled || null\"\n                        (click)=\"openBranch(item)\"\n                      >\n                        <NavigationItemContent\n                          [item]=\"item\"\n                          [active]=\"isItemActive(item)\"\n                          [compact]=\"false\"\n                          [orientation]=\"'horizontal'\"\n                          [level]=\"0\"\n                          [iconTemplate]=\"iconTemplate()\"\n                        />\n                        <Icon\n                          name=\"chevron_right\"\n                          size=\"inherit\"\n                          [class]=\"tabChevronClasses(item)\"\n                        />\n                      </button>\n                    </li>\n                  } @else {\n                    <li\n                      NavigationItem\n                      [navId]=\"navId()\"\n                      [item]=\"item\"\n                      [level]=\"0\"\n                      [orientation]=\"'horizontal'\"\n                      [compact]=\"false\"\n                      [itemClass]=\"navItemClass()\"\n                      [activeIds]=\"activeIds()\"\n                      [activeUrl]=\"activeUrl()\"\n                      [iconTemplate]=\"iconTemplate()\"\n                      [collapseTree]=\"collapseTree()\"\n                      [openedIds]=\"openedIds()\"\n                      (openedIdsChange)=\"openedIdsChange.emit($event)\"\n                      (itemSelected)=\"itemSelected.emit($event)\"\n                    ></li>\n                  }\n                }\n              }\n            }\n          </ul>\n\n          <ng-content select=\"NavigationFooter\" />\n        </div>\n\n        <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->\n        <div\n          [id]=\"panelContentId()\"\n          data-navigation-flyout-scroll=\"true\"\n          [attr.role]=\"activeBranch() ? 'menu' : null\"\n          [attr.aria-label]=\"activeBranch()?.title || null\"\n          [class]=\"scrollRegionClasses()\"\n        >\n          @if (activeBranch(); as branch) {\n            <NavigationEntryGrid\n              [navId]=\"navId()\"\n              [branch]=\"branch\"\n              [typeStyle]=\"typeStyle()\"\n              [itemClass]=\"itemClass()\"\n              [activeIds]=\"activeIds()\"\n              [activeUrl]=\"activeUrl()\"\n              [iconTemplate]=\"iconTemplate()\"\n              [collapseTree]=\"collapseTree()\"\n              [openedIds]=\"openedIds()\"\n              (openedIdsChange)=\"openedIdsChange.emit($event)\"\n              (itemSelected)=\"itemSelected.emit($event)\"\n            />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["[data-navigation-flyout-floating=true]{width:var(--nav-flyout-floating-width, min(22rem, 85vw));max-width:var(--nav-flyout-floating-max-width, 85vw)}[data-navigation-flyout-floating-card=true]{border-radius:var(--nav-flyout-floating-radius, var(--radius-xl))}[data-navigation-flyout-panel=true]{-webkit-app-region:no-drag;app-region:no-drag}\n"] }]
-        }], ctorParameters: () => [], 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 }] }], viewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerButtonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerButtonClass", 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 };