@ojiepermana/angular 22.1.13 → 22.2.0

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

@@ -0,0 +1,650 @@
+import { r as NavigationItemContentComponent, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs";
+import { t as NavigationEntryGridComponent } from "./ojiepermana-angular-navigation-navigation-entry-grid.component-mpK9Ar08.mjs";
+import * as i0 from "@angular/core";
+import { Component, ElementRef, Injector, afterNextRender, computed, effect, inject, input, output, signal } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { DOCUMENT } from "@angular/common";
+import { IconComponent } from "@ojiepermana/angular/component/icon";
+var NavigationFlyoutMenuComponent = class NavigationFlyoutMenuComponent {
+	nav = inject(NAVIGATION_ADAPTER);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	document = inject(DOCUMENT);
+	navId = input("default", ...ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	label = input("Menu", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconOnly = input(false, ...ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []);
+	iconPosition = input("start", ...ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []);
+	variant = input("button", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	floating = input(false, ...ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []);
+	viewport = input(false, ...ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []);
+	triggerClass = input("", ...ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []);
+	triggerButtonClass = input("", ...ngDevMode ? [{ debugName: "triggerButtonClass" }] : /* istanbul ignore next */ []);
+	position = input("top", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	typeStyle = input("flat", ...ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	itemClass = input("", ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
+	groupClass = input("", ...ngDevMode ? [{ debugName: "groupClass" }] : /* istanbul ignore next */ []);
+	activeIds = input(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []);
+	activeUrl = input(null, ...ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []);
+	iconTemplate = input(void 0, ...ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []);
+	collapseTree = input("stairs", ...ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []);
+	openedIds = input([], ...ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []);
+	openedIdsChange = output();
+	itemSelected = output();
+	panelId = computed(() => `nav-flyout-${this.navId()}`, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	panelContentId = computed(() => `${this.panelId()}-content`, ...ngDevMode ? [{ debugName: "panelContentId" }] : /* istanbul ignore next */ []);
+	isBorderRail = computed(() => this.typeStyle() === "border-rail", ...ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []);
+	isBottom = computed(() => this.position() === "bottom", ...ngDevMode ? [{ debugName: "isBottom" }] : /* istanbul ignore next */ []);
+	showIconOnly = computed(() => this.compact() || this.iconOnly(), ...ngDevMode ? [{ debugName: "showIconOnly" }] : /* istanbul ignore next */ []);
+	triggerIcon = computed(() => this.icon() ?? (this.showIconOnly() ? "menu" : null), ...ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []);
+	navItemClass = computed(() => cn(this.itemClass(), this.isBorderRail() && "h-(--nav-item-height) rounded-none hover:bg-transparent hover:text-primary"), ...ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []);
+	branches = computed(() => this.items().filter((item) => item.children.length > 0), ...ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []);
+	activeBranch = computed(() => {
+		const key = this.nav.currentPanelKey(this.navId());
+		return this.branches().find((branch) => branch.key === key) ?? null;
+	}, ...ngDevMode ? [{ debugName: "activeBranch" }] : /* istanbul ignore next */ []);
+	floatingAlignEnd = signal(true, ...ngDevMode ? [{ debugName: "floatingAlignEnd" }] : /* istanbul ignore next */ []);
+	panelPlacement = signal(null, ...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";
+			return cn("absolute z-50", this.floatingAlignEnd() ? "right-0" : "left-0", this.isBottom() ? "bottom-full mb-2" : "top-full mt-2");
+		}
+		return cn("absolute z-50", !this.panelPlacement() && cn("inset-x-0", this.isBottom() ? "bottom-0" : "top-0"));
+	}, ...ngDevMode ? [{ debugName: "panelWrapperClasses" }] : /* istanbul ignore next */ []);
+	menuClasses = computed(() => cn("flex min-h-0 flex-1", this.isBottom() ? "flex-col-reverse" : "flex-col"), ...ngDevMode ? [{ debugName: "menuClasses" }] : /* istanbul ignore next */ []);
+	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))]"), ...ngDevMode ? [{ debugName: "barRowClasses" }] : /* istanbul ignore next */ []);
+	scrollRegionClasses = computed(() => cn("min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain"), ...ngDevMode ? [{ debugName: "scrollRegionClasses" }] : /* istanbul ignore next */ []);
+	drawerOpen = computed(() => this.nav.isDrawerOpen(this.navId()), ...ngDevMode ? [{ debugName: "drawerOpen" }] : /* istanbul ignore next */ []);
+	isOpen() {
+		return this.drawerOpen();
+	}
+	constructor() {
+		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() {
+		if (this.floating()) {
+			const rect = this.host.nativeElement.querySelector("[data-navigation-flyout-trigger=\"true\"]")?.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;
+		let container = hostEl.closest("[data-navigation-id]")?.parentElement ?? hostEl.parentElement;
+		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);
+		}
+		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);
+	}
+	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)
+			}];
+		}));
+	}, ...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);
+	}
+	hostClasses = computed(() => this.floating() ? cn("fixed z-50 block w-max", this.triggerClass() || "right-6 top-6") : cn("relative block w-full", this.triggerClass()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	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", 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());
+		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()) 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");
+		return cn("relative flex flex-col bg-popover text-popover-foreground shadow-2xl", "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() {
+		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");
+	}
+	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("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") {
+			this.host.nativeElement.querySelector("[data-navigation-flyout-content] [role=\"menuitem\"]")?.focus();
+			return;
+		}
+		rowItems[(currentIndex + (event.key === "ArrowRight" ? 1 : -1) + rowItems.length) % rowItems.length]?.focus();
+	}
+	focusFirstPanelItem() {
+		const panel = this.host.nativeElement.querySelector("[data-navigation-flyout-panel=\"true\"]");
+		if (!panel) return;
+		(panel.querySelector("[data-navigation-flyout-row=\"true\"] [role=\"menuitem\"], [data-navigation-flyout-row=\"true\"] a[href]") ?? panel.querySelector("[role=\"menuitem\"], a[href]"))?.focus();
+	}
+	focusTrigger() {
+		this.host.nativeElement.querySelector("[data-navigation-flyout-trigger=\"true\"]")?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationFlyoutMenuComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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.2.0",
+	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 };