{"version":3,"file":"forty-cdk-menu.mjs","sources":["../../../projects/forty-cdk/menu/src/menu-defaults.ts","../../../projects/forty-cdk/menu/src/menu.ts","../../../projects/forty-cdk/menu/src/menu-content.ts","../../../projects/forty-cdk/menu/src/menu-horizontal-arrow.ts","../../../projects/forty-cdk/menu/src/menu-tab-out.ts","../../../projects/forty-cdk/menu/src/menu-item-interaction.ts","../../../projects/forty-cdk/menu/src/menu-item.ts","../../../projects/forty-cdk/menu/src/menu-checkbox-item.ts","../../../projects/forty-cdk/menu/src/menu-group-context.ts","../../../projects/forty-cdk/menu/src/menu-radio-group-context.ts","../../../projects/forty-cdk/menu/src/menu-radio-group.ts","../../../projects/forty-cdk/menu/src/menu-radio-item.ts","../../../projects/forty-cdk/menu/src/menu-item-indicator.ts","../../../projects/forty-cdk/menu/src/menu-separator.ts","../../../projects/forty-cdk/menu/src/menu-group.ts","../../../projects/forty-cdk/menu/src/menu-group-label.ts","../../../projects/forty-cdk/menu/src/menu-sub.ts","../../../projects/forty-cdk/menu/src/menu-sub-trigger.ts","../../../projects/forty-cdk/menu/src/forty-cdk-menu.ts"],"sourcesContent":["import { type Provider } from '@angular/core';\n\nimport { createDefaults } from 'forty-cdk/core';\nimport {\n type FloatingAlign,\n type FloatingFallbackAxisSideDirection,\n type FloatingSide,\n} from 'forty-cdk/core-overlay';\n\n/**\n * Defaults inherited by descendant menus in the surrounding injector\n * scope. Configure with `provideForMenuDefaults` at the app root or in any\n * component's `providers`.\n *\n * They tune the pointer-driven submenu interaction — hovering a\n * `[forMenuSubTrigger]` opens its submenu after `subMenuOpenDelay`, and\n * leaving it (without travelling into the submenu through the pointer-grace\n * \"safe triangle\") closes it after `subMenuCloseDelay` — and the floating-ui\n * placement offsets and collision fallback (`sideOffset` / `collisionPadding` /\n * `fallbackAxisSideDirection`) of both `[forMenuSub]` and the `[forMenu]` root,\n * so they read them from a provider like `[forDropdownMenu]` /\n * `[forContextMenu]` do instead of hardcoding them.\n * Click / Enter / Space / ArrowRight semantics are unaffected by these values.\n */\nexport interface ForMenuDefaults {\n /**\n * Side the menu is anchored to, for both `[forMenuSub]` and the `[forMenu]`\n * root. `null` (the library fallback) keeps each root's own: `'bottom'` for\n * `[forMenu]`, and the writing-direction side for `[forMenuSub]` (`'right'`\n * in LTR, `'left'` in RTL, so a submenu opens away from its parent). Set a\n * value here to pin both roots in the scope to one side.\n */\n side: FloatingSide | null;\n /**\n * Alignment along the chosen `side`, for both `[forMenuSub]` and the\n * `[forMenu]` root. Library fallback `'start'`.\n */\n align: FloatingAlign;\n /**\n * Delay (ms) before a hovered `[forMenuSubTrigger]` opens its submenu.\n * A short intent delay avoids opening every submenu the pointer merely\n * passes over. Default `100`.\n */\n subMenuOpenDelay: number;\n /**\n * Delay (ms) before a submenu closes once the pointer has left both the\n * sub-trigger and the submenu content (and is not inside the pointer-grace\n * region). Default `100`.\n */\n subMenuCloseDelay: number;\n /**\n * Lifetime (ms) of the pointer-grace \"safe triangle\" armed when the pointer\n * leaves the sub-trigger toward the open submenu. While the pointer stays\n * inside the triangle the close is held off; the window caps how long that\n * hold lasts if the pointer lingers without reaching the content. Default\n * `300`.\n */\n subMenuPointerGraceDuration: number;\n /**\n * Distance (px) between the anchor and the menu content along the resolved\n * `side` axis, for both `[forMenuSub]` and the `[forMenu]` root. Default `0` —\n * a submenu sits flush against its parent item, and a shared menu sits flush\n * against whichever opener fired, which is what a pointer-anchored open wants.\n */\n sideOffset: number;\n /**\n * Padding (px) added to the viewport edges for collision-aware positioning\n * of `[forMenuSub]` and the `[forMenu]` root. Higher values keep the menu\n * further from the edge when `flip` / `shift` runs. Default `8`.\n */\n collisionPadding: number;\n /**\n * Direction `flip` falls back to on the perpendicular axis when both sides\n * of the preferred axis overflow, for both `[forMenuSub]` and the\n * `[forMenu]` root. `'none'` (default) keeps only the opposite same-axis\n * placement; `'start'` / `'end'` let a submenu clipped on a narrow viewport\n * drop to a vertical side. Only consulted when `avoidCollisions` is on.\n */\n fallbackAxisSideDirection: FloatingFallbackAxisSideDirection;\n}\n\n/**\n * Library fallback for menu defaults, read at the root injector when no\n * consumer has called `provideForMenuDefaults`. Exported for the shared\n * defaults contract spec; not re-exported from the primitive's public entry.\n */\nexport const FOR_MENU_FALLBACK_DEFAULTS: ForMenuDefaults = {\n side: null,\n align: 'start',\n subMenuOpenDelay: 100,\n subMenuCloseDelay: 100,\n subMenuPointerGraceDuration: 300,\n sideOffset: 0,\n collisionPadding: 8,\n fallbackAxisSideDirection: 'none',\n};\n\nconst { token, provideDefaults } = createDefaults(\n 'FOR_MENU_DEFAULTS',\n FOR_MENU_FALLBACK_DEFAULTS,\n);\n\n/** Token holding the resolved menu defaults for the current scope. */\nexport const FOR_MENU_DEFAULTS = token;\n\n/**\n * Configures forty-cdk menu defaults for this injector scope. Partial\n * overrides inherit unspecified keys from the parent scope (or library\n * defaults at the root).\n */\nexport function provideForMenuDefaults(defaults: Partial = {}): Provider[] {\n return provideDefaults(defaults);\n}\n","import { booleanAttribute, Directive, inject, input, model, output } from '@angular/core';\n\nimport {\n type WritingDirection,\n injectTextDirection,\n type VetoableEvent,\n type VetoableNativeEvent,\n} from 'forty-cdk/core';\nimport {\n type AnchoredPositioningOverride,\n type AnchoredPositioningSeedDefaults,\n type FloatingFallbackAxisSideDirection,\n createMenuOverlay,\n MenuOverlayHost,\n FOR_MENU_CONTEXT,\n type ForMenuContext,\n} from 'forty-cdk/core-overlay';\nimport { FOR_MENU_DEFAULTS } from './menu-defaults';\n\n/**\n * Opener-agnostic menu root: one `[forMenuContent]` definition that any number\n * of heterogeneous openers can drive. Implements the same\n * [WAI-ARIA Menu Button / Menu semantics](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\n * as `[forDropdownMenu]` and `[forContextMenu]`, which stay as its single-opener\n * presets.\n *\n * Reach for it when the same actions must be reachable two ways — the canonical\n * case being a table row with a kebab button *and* a right-click region, where\n * the two presets would each need their own root and therefore their own copy of\n * every item:\n *\n * ```html\n * \n * …cells…\n * \n *\n * @if (open()) {\n *
\n * \n * \n *
\n * }\n * \n * ```\n *\n * Exactly one instance is open at a time, and everything the mounted surface\n * resolves follows the **active opener** — the one that fired: return-focus lands\n * on it, and the floating-ui anchor is its element for a button opener or its\n * recorded pointer / rect position for a right-click opener. Each opener carries\n * its own `id`, so two of them never emit the same one.\n *\n * `[forDropdownMenuTrigger]` resolves this root through DI like any menu piece.\n * `[forContextMenuTrigger]` resolves `FOR_CONTEXT_MENU_CONTEXT`, which this root\n * does not provide, so bind it explicitly — `[forContextMenuTrigger]=\"row\"` with\n * `#row=\"forMenu\"`.\n *\n * Accessible name: the labelling policy follows the active opener too. A button\n * opener is a discrete labelling control, so the surface falls back to\n * `aria-labelledby=\"\"` for it; a right-click region is not — pointing\n * the menu's name at a whole row would announce the entire row — so nothing is\n * emitted for that one. `[ariaLabel]` wins over both, and a shared menu with a\n * region opener needs it.\n *\n * Positioning is seeded from `provideForMenuDefaults` — `sideOffset` defaults to\n * `0`, flush against the anchor, which is what a pointer-anchored open wants —\n * and every opener may override the four placement values for the opens it\n * drives through its trigger's `[menuPositioning]`, falling back to the root's\n * inputs for whatever it leaves out:\n *\n * ```html\n * …cells…\n * \n * ```\n */\n@Directive({\n selector: '[forMenu]',\n exportAs: 'forMenu',\n host: {\n '[attr.data-state]': 'open() ? \"open\" : \"closed\"',\n '[attr.data-disabled]': 'disabled() ? \"\" : null',\n '[attr.dir]': 'dir()',\n },\n providers: [{ provide: FOR_MENU_CONTEXT, useExisting: ForMenu }],\n})\nexport class ForMenu extends MenuOverlayHost implements ForMenuContext {\n readonly #defaults = inject(FOR_MENU_DEFAULTS);\n\n /**\n * Two-way bindable. Whether the menu is currently shown. The `model()`\n * change emitter (`(openChange)`) fires only on internal transitions\n * (an opener activating, Escape, outside dismissal, item selection), never on\n * consumer writes via `[(open)]`.\n */\n readonly open = model(false);\n\n /**\n * `ForMenuDefaults.side` is shared with `[forMenuSub]`, whose own fallback is\n * the writing-direction side, so `null` is what \"each root keeps its own\"\n * looks like in the scope. Here that resolves to `'bottom'`.\n */\n protected readonly positioningDefaults: AnchoredPositioningSeedDefaults = {\n side: this.#defaults.side ?? 'bottom',\n align: this.#defaults.align,\n sideOffset: this.#defaults.sideOffset,\n collisionPadding: this.#defaults.collisionPadding,\n };\n\n /**\n * Direction `flip` falls back to on the perpendicular axis when both sides of\n * the preferred axis overflow. `'none'` (default) keeps only the opposite\n * same-axis placement; `'start'` / `'end'` let the menu drop to a\n * perpendicular side on a narrow viewport. Only consulted when\n * `avoidCollisions` is on. The default is read from `provideForMenuDefaults`\n * for the surrounding scope, since dropping to a perpendicular side is a\n * design-system-wide viewport-degradation policy rather than a per-menu one.\n */\n readonly fallbackAxisSideDirection = input(\n this.#defaults.fallbackAxisSideDirection,\n );\n\n /**\n * When `true` (default), arrow-key navigation wraps from the last enabled\n * item back to the first (and vice versa). When `false`, navigation stops\n * at the ends.\n */\n readonly loop = input(true, { transform: booleanAttribute });\n\n /**\n * Writing direction. Drives ArrowLeft / ArrowRight semantics on submenu\n * triggers and items underneath this menu (in RTL, ArrowLeft opens a submenu\n * and ArrowRight closes it back). When unset (default `null`), the inherited\n * ambient direction is resolved from the nearest ancestor carrying a `dir`\n * attribute (or ``), defaulting to `'ltr'`. An explicit `[dir]`\n * always wins, the resolved value is reflected to the host `dir` attribute,\n * and it is inherited by descendant submenus.\n */\n readonly _dirInput = input(null, { alias: 'dir' });\n readonly dir = injectTextDirection(this._dirInput);\n\n /**\n * When true, every opener is ignored and any open menu stays open until the\n * consumer flips `open` themselves. Each opener reflects `data-disabled`; the\n * items keep their per-item disabled semantics.\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /** When true (default), Escape, pointer-down outside, and focus outside close the menu. */\n readonly dismissible = input(true, { transform: booleanAttribute });\n\n /** When true (default), focus returns to the opener that opened the menu on close. */\n readonly returnFocus = input(true, { transform: booleanAttribute });\n\n /**\n * Accessible name reflected as `aria-label` on `[forMenuContent]`. It wins over\n * the per-opener `aria-labelledby=\"\"` fallback for every opener, so\n * set it when the menu needs one name regardless of how it was opened.\n *\n * Without it the surface names itself after the **active** opener when that\n * opener is a labelling control (a `[forDropdownMenuTrigger]` button) and\n * exposes no accessible name when it is not (a `[forContextMenuTrigger]`\n * region, whose whole text would otherwise be announced as the menu's name) —\n * so a shared menu with any region opener still wants an `ariaLabel`.\n */\n readonly ariaLabel = input(null);\n\n /**\n * Fires when Escape is pressed while the menu is open, just before it\n * closes. Call `preventDefault()` on the emitted veto to keep the menu\n * open and suppress the Escape-driven close.\n */\n readonly escapeKeyDown = output>();\n\n /**\n * Fires on a pointer-down outside the menu (and outside any exempt opener),\n * just before it closes. Call `preventDefault()` on the veto to keep the menu\n * open.\n */\n readonly pointerDownOutside = output>();\n\n /**\n * Fires when focus moves outside the menu, just before it closes. Call\n * `preventDefault()` on the veto to keep the menu open.\n */\n readonly focusOutside = output>();\n\n /**\n * Composite outside-interaction channel: fires for either a\n * pointer-down-outside or a focus-outside, just before the menu closes.\n * Call `preventDefault()` on the veto to keep the menu open regardless of\n * which interaction triggered it.\n */\n readonly interactOutside = output>();\n\n /**\n * Fires just before the menu sends focus to its first / last enabled\n * item on mount. Call `preventDefault()` on the emitted veto to skip\n * the imperative focus move.\n */\n readonly autoFocusOnOpen = output();\n\n /**\n * Fires just before focus returns to the active opener on unmount. Call\n * `preventDefault()` on the veto to suppress the return-focus.\n */\n readonly autoFocusOnClose = output();\n\n protected readonly _overlay = createMenuOverlay('for-menu', {\n open: this.open,\n disabled: this.disabled,\n dismissible: this.dismissible,\n loop: this.loop,\n escapeKeyDown: this.escapeKeyDown,\n pointerDownOutside: this.pointerDownOutside,\n focusOutside: this.focusOutside,\n interactOutside: this.interactOutside,\n autoFocusOnOpen: this.autoFocusOnOpen,\n autoFocusOnClose: this.autoFocusOnClose,\n });\n\n /**\n * The active opener's anchor: its recorded pointer / rect position when it set\n * one, otherwise its own element.\n */\n readonly anchor = this._overlay.openerAnchor;\n\n /**\n * The active opener's own placement override, resolved by the base ahead of\n * this root's `[side]` / `[align]` / `[sideOffset]` / `[alignOffset]`. The\n * four placement values resolve per opener because a shared menu's openers\n * are heterogeneous — a button opener wants the clearance\n * `[forDropdownMenu]` seeds, a pointer-anchored region wants to sit flush at\n * the cursor.\n */\n protected override positioningOverride(): AnchoredPositioningOverride | null {\n return this._overlay.openerPositioning();\n }\n\n /**\n * Only the openers that asked to count as \"inside\" — a toggle-style button\n * opener, whose own click already toggles and would otherwise double-close. A\n * right-click region opts out, so a left-click on it closes the menu.\n */\n readonly dismissibleExemptions = this._overlay.openerExemptions;\n\n /**\n * Resolved against the **active** opener, because a shared menu's openers are\n * heterogeneous: a `[forDropdownMenuTrigger]` button is a discrete labelling\n * control, a `[forContextMenuTrigger]` region is not. So `[forMenuContent]`\n * falls back to `aria-labelledby=\"\"` for a button-opened instance and\n * emits nothing for a region-opened one — and flips as the menu is reopened\n * from the other opener. `false` while no single opener is resolvable.\n */\n readonly triggerLabelsMenu = this._overlay.openerLabelsMenu;\n\n /** Top-level: no parent menu. */\n readonly parentMenu = null;\n\n /**\n * Anchors the active opener's next open at a 0×0 rect at (`x`, `y`) in viewport\n * coordinates. Widens the shared base's protected pass-through so a\n * pointer-driven opener can reach it through this root's exported reference.\n */\n override setVirtualAnchor(x: number, y: number): void {\n super.setVirtualAnchor(x, y);\n }\n\n /**\n * Anchors the active opener's next open at a by-value snapshot of `rect`, so\n * later layout changes don't shift it. Used by the keyboard activators of a\n * pointer-driven opener (`Shift+F10`, the `ContextMenu` key).\n */\n override setVirtualAnchorFromRect(rect: DOMRect): void {\n super.setVirtualAnchorFromRect(rect);\n }\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\nimport {\n registerHandle,\n hostAriaLabel,\n hostLabelledBy,\n isHoverCapablePointer,\n} from 'forty-cdk/core';\nimport {\n injectOverlayShell,\n injectMenuContext,\n menuLayerNesting,\n warnIfMountedWhileClosed,\n} from 'forty-cdk/core-overlay';\n\n/**\n * The menu surface. Carries `role=\"menu\"`, is portaled to `document.body`,\n * and is positioned by `@floating-ui/dom` against the registered anchor —\n * the trigger button for `[forDropdownMenu]`, or a virtual pointer element\n * for `[forContextMenu]`.\n *\n * The directive does not manage DOM presence — wrap with\n * `@if (open())` so `animate.enter` / `animate.leave` fire on the natural\n * mount cycle. While mounted, it dismisses on Escape, pointer-down outside or\n * focus outside, and initial focus is sent to the first or last menu item per\n * the trigger's hint.\n *\n * The trigger element is exempt from the layer's outside-pointer checks,\n * so clicking the trigger again routes through its own toggle handler\n * without spuriously closing.\n *\n * Accessible name: a consumer-set **static** `aria-labelledby` on the surface\n * always wins and is preserved. Otherwise an explicit `ariaLabel` on the root\n * is reflected as `aria-label`, and with neither the surface falls back to\n * `aria-labelledby=\"\"` — but only when the trigger that opened it is\n * a labelling control (`[forDropdownMenu]`, `[forMenubar]`, `[forMenuSub]`).\n * `[forContextMenu]` opts out of that fallback (its trigger is the whole\n * right-click region), so name a context menu with `[ariaLabel]`. `[forMenu]`\n * answers per **active opener**, so a shared menu names itself after the button\n * that opened it and emits nothing when a right-click region did.\n *\n * Both `id` and `aria-labelledby` are emitted truthy-only: a surface the\n * context has not associated with a trigger yet — only reachable under\n * `[forMenubar]`, where one surface may be mounted unconditionally while no\n * menu is open — carries neither attribute rather than an invalid `id=\"\"` and\n * an `aria-labelledby` pointing at nothing. That same menubar shape is why the\n * dev-mode mounted-while-closed warning is gated on\n * `ForMenuContext.allowsUnconditionalMount`: under every other root mount\n * equals open, so a surface still mounted while closed is a missing `@if`.\n *\n * Navigation is vertical-only (Up / Down between items, per the APG Menu\n * pattern), so the surface reflects `aria-orientation=\"vertical\"` explicitly.\n * Horizontal menus are out of scope; a horizontal *bar* of menus is modelled\n * by `[forMenubar]` instead.\n */\n@Directive({\n // The same directive serves submenu content too — the behavior is identical\n // (the injected ctx is the [forMenuSub] in that case). The extra selector is\n // an alias for template readability, so the one place that has to tell them\n // apart is the mounted-while-closed report, which names the alias the\n // consumer wrote and the root that owns its open state.\n selector: '[forMenuContent], [forMenuSubContent]',\n exportAs: 'forMenuContent',\n host: {\n role: 'menu',\n '[attr.id]': 'ctx.contentId() || null',\n '[attr.aria-labelledby]': 'labelledBy()',\n '[attr.aria-label]': 'resolvedAriaLabel()',\n '[attr.aria-orientation]': '\"vertical\"',\n '[attr.data-state]': 'ctx.open() ? \"open\" : \"closed\"',\n tabindex: '-1',\n '(pointerleave)': 'onPointerLeave($event)',\n },\n})\nexport class ForMenuContent {\n protected readonly ctx = injectMenuContext('ForMenuContent');\n readonly #host = inject>(ElementRef);\n\n protected readonly resolvedAriaLabel = hostAriaLabel(() => this.ctx.ariaLabel() || null);\n\n protected readonly labelledBy = hostLabelledBy(() => {\n if (this.resolvedAriaLabel() || this.ctx.triggerLabelsMenu?.() === false) {\n return null;\n }\n return this.ctx.triggerId() || null;\n });\n\n constructor() {\n registerHandle(\n this.#host.nativeElement,\n (el) => this.ctx.registerContent(el),\n (el) => this.ctx.unregisterContent(el),\n );\n\n if (!this.ctx.allowsUnconditionalMount) {\n // Report the selector the consumer actually wrote: the two aliases sit on\n // different roots (`[forMenuSub]` owns its own open state), so a submenu\n // reported as `[forMenuContent]` with `@if (menu.open())` names a piece\n // and a condition that are nowhere in their template.\n const isSub = this.#host.nativeElement.hasAttribute('forMenuSubContent');\n warnIfMountedWhileClosed({\n primitive: 'menu',\n piece: isSub ? '[forMenuSubContent]' : '[forMenuContent]',\n condition: isSub ? 'sub.open()' : 'menu.open()',\n open: this.ctx.open,\n });\n }\n\n injectOverlayShell({\n positioner: {\n kind: 'floating',\n reference: this.ctx.anchor,\n open: this.ctx.open,\n side: this.ctx.side,\n align: this.ctx.align,\n sideOffset: this.ctx.sideOffset,\n alignOffset: this.ctx.alignOffset,\n avoidCollisions: this.ctx.avoidCollisions,\n fallbackAxisSideDirection: this.ctx.fallbackAxisSideDirection,\n collisionPadding: this.ctx.collisionPadding,\n sticky: this.ctx.sticky,\n hideWhenDetached: this.ctx.hideWhenDetached,\n clipUntilPositioned: this.ctx.clipUntilPositioned,\n },\n dismiss: {\n dismissible: this.ctx.dismissible,\n requestClose: (reason) => this.ctx.requestClose(reason),\n emitEscapeKeyDown: (event) => this.ctx.emitEscapeKeyDown(event),\n emitPointerDownOutside: (veto) => this.ctx.emitPointerDownOutside(veto),\n emitFocusOutside: (veto) => this.ctx.emitFocusOutside(veto),\n emitInteractOutside: (veto) => this.ctx.emitInteractOutside(veto),\n // DropdownMenu's trigger is exempt (its own click handler toggles —\n // without exemption pointer-down-outside would race and double-close).\n // ContextMenu exempts nothing so left-clicks on the region close the\n // menu like any other outside click.\n exemptElements: () => this.ctx.dismissibleExemptions(),\n nesting: menuLayerNesting(this.ctx),\n },\n // Primitive-owned move: focusInitialEnabledItem resolves the ctx's\n // `initialFocus` target and returns `true` on success. The shell falls\n // back to focusing the host element on miss, as the hand-rolled code did.\n initialFocus: {\n move: () => this.ctx.focusInitialEnabledItem(this.ctx.initialFocus()),\n veto: () => this.ctx.emitAutoFocusOnOpen(),\n },\n returnFocus: {\n enabled: this.ctx.returnFocus,\n target: () => this.ctx.trigger(),\n // `(autoFocusOnClose)` lets the consumer veto the return-focus.\n veto: () => this.ctx.emitAutoFocusOnClose(),\n // Skip when the close itself already moved focus away on purpose:\n // `'tab'` let the browser advance to the next element, and an outside\n // pointer-down / focus moved focus onto whatever the user just clicked\n // or focused. Re-focusing the trigger in any of these cases would rip\n // focus back from where it belongs.\n skip: () => {\n const reason = this.ctx.lastCloseReason();\n return reason === 'tab' || reason === 'pointerDownOutside' || reason === 'focusOutside';\n },\n },\n });\n }\n\n /**\n * Hover-follows-pointer: the pointer left the menu surface, so drop the\n * highlight from whichever item the pointer was over. Focus is left where it\n * is (anchored on the item for keyboard navigation); only `data-highlighted`\n * clears. Gated to mouse — touch / pen never hover.\n */\n protected onPointerLeave(event: PointerEvent): void {\n if (!isHoverCapablePointer(event)) {\n return;\n }\n this.ctx.clearItemHighlights();\n }\n}\n","import { type ForMenuContext } from 'forty-cdk/core-overlay';\n\n/**\n * Handle ArrowLeft / ArrowRight on a menu item (regular, checkbox, radio,\n * or submenu trigger when its open-key is the orthogonal arrow). Returns\n * `true` when the event was consumed (caller should stop further handling).\n *\n * Routing precedence:\n * - Inside a submenu (`ctx.parentMenu != null`): the close-submenu key\n * (ArrowLeft in LTR, ArrowRight in RTL) closes the submenu. The other\n * horizontal arrow walks `parentMenu` to the root menu: when that root is\n * the top menu of a menubar it switches to the next sibling menu and, only\n * once the bar reports it moved, collapses every open submenu level (per the\n * APG Menubar pattern). A bar that cannot move — disabled, no registered\n * triggers, or no enabled sibling in that direction with `loop` off — leaves\n * the chain intact instead of dismantling it and going nowhere. Menu content\n * is portaled, so the keydown can never reach the bar by bubbling — the\n * helper must call the bar itself. With no enclosing menubar the key is not\n * handled.\n * - At the top of a menubar (`ctx.parentMenu == null && ctx.menubar`):\n * both arrows switch to the previous / next sibling menu.\n * - Otherwise: not handled.\n */\nexport function handleMenuHorizontalArrow(event: KeyboardEvent, ctx: ForMenuContext): boolean {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return false;\n }\n const isRtl = ctx.dir() === 'rtl';\n\n if (ctx.parentMenu) {\n const closeKey = isRtl ? 'ArrowRight' : 'ArrowLeft';\n if (event.key === closeKey) {\n event.preventDefault();\n ctx.closeMenu('escape');\n return true;\n }\n let root: ForMenuContext = ctx;\n while (root.parentMenu) {\n root = root.parentMenu;\n }\n const rootMenubar = root.menubar;\n if (!rootMenubar) {\n return false;\n }\n event.preventDefault();\n if (!rootMenubar.switchToSibling('next')) {\n return true;\n }\n let level: ForMenuContext = ctx;\n while (level.parentMenu) {\n level.closeMenu('programmatic');\n level = level.parentMenu;\n }\n return true;\n }\n\n const menubar = ctx.menubar;\n if (!menubar) {\n return false;\n }\n\n const isPrev = (event.key === 'ArrowLeft' && !isRtl) || (event.key === 'ArrowRight' && isRtl);\n event.preventDefault();\n menubar.switchToSibling(isPrev ? 'prev' : 'next');\n return true;\n}\n","import { type ForMenuContext } from 'forty-cdk/core-overlay';\n\n/**\n * Handle Tab from inside a menu (regular item, checkbox / radio item, or a\n * submenu trigger). Per WAI-ARIA APG, Tab moves focus out of the menu rather\n * than back to the trigger.\n *\n * Focus is moved synchronously to the outermost menu's trigger — the only\n * element guaranteed to survive in the DOM once the whole open chain unmounts\n * — so the browser's own Tab default advances from there to the next (or\n * previous, with Shift) focusable. The event is NOT `preventDefault`-ed for\n * that reason. `closeMenu('tab')` then collapses the chain; every\n * `[forMenuContent]` skips its return-focus on `'tab'` (see\n * `ForMenuContext.lastCloseReason`) so none of them steal focus back from\n * wherever the browser advanced it.\n *\n * Pass the context that should drive the close: the item's own `ctx` for\n * menu items, or the submenu trigger's `parentMenu` (the menu the trigger\n * lives in).\n */\nexport function handleMenuTabOut(ctx: ForMenuContext): void {\n let root: ForMenuContext = ctx;\n while (root.parentMenu) {\n root = root.parentMenu;\n }\n root.trigger()?.focus();\n ctx.closeMenu('tab');\n}\n","import { ElementRef, inject, signal, type Signal } from '@angular/core';\n\nimport { registerHandle, resolveListNavigation, isHoverCapablePointer } from 'forty-cdk/core';\nimport { type ForMenuContext } from 'forty-cdk/core-overlay';\nimport { handleMenuHorizontalArrow } from './menu-horizontal-arrow';\nimport { handleMenuTabOut } from './menu-tab-out';\n\n/**\n * The highlight / focus / navigation mechanics every menu item role shares.\n * `[forMenuItem]`, `[forMenuCheckboxItem]`, and `[forMenuRadioItem]` each own\n * their role, activation (click / Enter / Space), and toggle-vs-select\n * semantics, but the surrounding interaction is identical: the\n * `data-highlighted` state machine, registration with the parent menu, and the\n * ArrowLeft/Right → Arrow/Home/End → Tab keyboard prefix. Consolidating them\n * here keeps the three item directives from drifting apart.\n */\nexport interface MenuItemInteraction {\n /**\n * True while this item is the active keyboard candidate or hovered by the\n * pointer. Set on keyboard-driven focus and on `pointermove` (hover follows\n * the pointer), cleared on `blur` and when the pointer leaves the surface.\n * The programmatic initial focus of a pointer-driven open lands without a\n * highlight until the pointer moves onto the item or keyboard navigation\n * begins. Reflected as `data-highlighted`.\n */\n readonly highlighted: Signal;\n /** `(focus)` handler — highlights unless a pointer-open suppression is pending. */\n onFocus(): void;\n /** `(blur)` handler — drops the highlight and clears any pending suppression. */\n onBlur(): void;\n /** `(pointermove)` handler — mouse hover moves focus onto the item and highlights it. */\n onPointerMove(event: PointerEvent): void;\n /**\n * Handle the navigation prefix shared by every item — horizontal-arrow\n * routing (submenu close / menubar sibling switch), ArrowUp/Down/Home/End\n * list navigation, and Tab-out. Returns `true` when the key was consumed, so\n * the caller stops before its own activation / typeahead handling.\n */\n handleNavigation(event: KeyboardEvent): boolean;\n}\n\n/**\n * Wire the shared menu-item interaction. Must be called from an injection\n * context (a directive field initializer / constructor): it injects the host\n * `ElementRef` and registers the item with `ctx` on `DestroyRef`.\n *\n * @param config.ctx The parent menu context the item registers with and navigates.\n * @param config.effectiveDisabled The item's resolved disabled state (own input OR the menu's).\n * @param config.textValue Typeahead-match override; empty falls back to the host's text content.\n */\nexport function createMenuItemInteraction(config: {\n ctx: ForMenuContext;\n effectiveDisabled: Signal;\n textValue: Signal;\n}): MenuItemInteraction {\n const { ctx, effectiveDisabled, textValue } = config;\n const host = inject>(ElementRef).nativeElement;\n\n const highlighted = signal(false);\n let suppressNextFocusHighlight = false;\n\n const handle = {\n host,\n disabled: effectiveDisabled,\n textValue,\n suppressHighlightOnNextFocus: () => {\n suppressNextFocusHighlight = true;\n },\n clearHighlight: () => {\n highlighted.set(false);\n },\n };\n registerHandle(\n handle,\n (h) => ctx.registerItem(h),\n (h) => ctx.unregisterItem(h),\n );\n\n return {\n highlighted: highlighted.asReadonly(),\n onFocus(): void {\n if (suppressNextFocusHighlight) {\n suppressNextFocusHighlight = false;\n return;\n }\n highlighted.set(true);\n },\n onBlur(): void {\n suppressNextFocusHighlight = false;\n highlighted.set(false);\n },\n onPointerMove(event: PointerEvent): void {\n if (!isHoverCapablePointer(event)) {\n return;\n }\n if (effectiveDisabled()) {\n return;\n }\n if (host.ownerDocument.activeElement !== host) {\n host.focus({ preventScroll: true });\n }\n highlighted.set(true);\n },\n handleNavigation(event: KeyboardEvent): boolean {\n if (handleMenuHorizontalArrow(event, ctx)) {\n return true;\n }\n const action = resolveListNavigation(event, { orientation: 'vertical' });\n if (action) {\n event.preventDefault();\n ctx.navigate(host, action);\n return true;\n }\n if (event.key === 'Tab') {\n handleMenuTabOut(ctx);\n return true;\n }\n return false;\n },\n };\n}\n","import { booleanAttribute, computed, Directive, input, output } from '@angular/core';\n\nimport { hostButtonType, emitVetoableEvent, type VetoableEvent } from 'forty-cdk/core';\nimport { injectMenuContext } from 'forty-cdk/core-overlay';\nimport { createMenuItemInteraction } from './menu-item-interaction';\n\n/**\n * A single action inside `[forMenuContent]`. Apply on a ``\n * for an item rendered as `New file ⌘N`.\n */\n readonly textValue = input('');\n\n readonly effectiveDisabled = computed(() => this.disabled() || this.ctx.disabled());\n\n protected readonly interaction = createMenuItemInteraction({\n ctx: this.ctx,\n effectiveDisabled: this.effectiveDisabled,\n textValue: this.textValue,\n });\n\n /**\n * True while this item is the active keyboard candidate or hovered by the\n * pointer. Reflected as `data-highlighted`.\n */\n readonly highlighted = this.interaction.highlighted;\n\n /**\n * Fires on click / Enter / Space activation. Call `preventDefault()`\n * on the emitted veto to keep the menu open after activation.\n */\n readonly activate = output();\n\n protected onClick(): void {\n if (this.effectiveDisabled()) {\n return;\n }\n if (!emitVetoableEvent(this.activate)) {\n this.ctx.closeMenu('select');\n }\n }\n\n protected onKeyDown(event: KeyboardEvent): void {\n if (this.effectiveDisabled()) {\n return;\n }\n if (this.interaction.handleNavigation(event)) {\n return;\n }\n if (this.ctx.handleTypeahead(event) && event.key === ' ') {\n event.preventDefault();\n }\n }\n}\n","import {\n booleanAttribute,\n computed,\n Directive,\n InjectionToken,\n input,\n model,\n output,\n} from '@angular/core';\n\nimport {\n hostButtonType,\n createVetoableEvent,\n emitVetoableEvent,\n type VetoableEvent,\n} from 'forty-cdk/core';\nimport { injectMenuContext } from 'forty-cdk/core-overlay';\nimport { createMenuItemInteraction } from './menu-item-interaction';\n\n/**\n * Injection key the `[forMenuItemIndicator]` uses to resolve a parent\n * checkbox item, decoupled from the concrete `ForMenuCheckboxItem` class.\n * `ForMenuCheckboxItem` provides itself under this token, so a design system\n * wrapping the item by subclassing re-points it at the subclass with a single\n * provider (`{ provide: FOR_MENU_CHECKBOX_ITEM, useExisting: MtxMenuCheckboxItem }`)\n * and the indicator keeps resolving — see `docs/wrapping-form-primitives.md`.\n */\nexport const FOR_MENU_CHECKBOX_ITEM = new InjectionToken(\n 'FOR_MENU_CHECKBOX_ITEM',\n);\n\n/**\n * Tri-state-free checkbox item. Click and Enter toggle `checked`, emit\n * `(activate)`, and close the menu — `event.preventDefault()` on the emitted\n * event keeps the menu open. Per APG, **Space** toggles `checked` and\n * emits `(activate)` without closing the menu, so users can flip several\n * options in one open without consumer glue.\n *\n * Disabled items are skipped by arrow-key navigation, typeahead, and\n * Home/End, and ignore pointer hover, but stay in the DOM carrying\n * `aria-disabled=\"true\"` (never the native `disabled` attribute) so assistive\n * tech can still perceive and announce them.\n */\n@Directive({\n selector: '[forMenuCheckboxItem]',\n exportAs: 'forMenuCheckboxItem',\n providers: [{ provide: FOR_MENU_CHECKBOX_ITEM, useExisting: ForMenuCheckboxItem }],\n host: {\n role: 'menuitemcheckbox',\n '[attr.type]': 'buttonType()',\n tabindex: '-1',\n '[attr.aria-checked]': 'checked() ? \"true\" : \"false\"',\n '[attr.aria-disabled]': 'effectiveDisabled() ? \"true\" : null',\n '[attr.data-state]': 'checked() ? \"checked\" : \"unchecked\"',\n '[attr.data-disabled]': 'effectiveDisabled() ? \"\" : null',\n '[attr.data-highlighted]': 'highlighted() ? \"\" : null',\n '(click)': 'onClick()',\n '(keydown)': 'onKeyDown($event)',\n '(focus)': 'interaction.onFocus()',\n '(blur)': 'interaction.onBlur()',\n '(pointermove)': 'interaction.onPointerMove($event)',\n },\n})\nexport class ForMenuCheckboxItem {\n protected readonly buttonType = hostButtonType();\n\n protected readonly ctx = injectMenuContext('ForMenuCheckboxItem');\n\n /** Two-way bindable. */\n readonly checked = model(false);\n\n /** Per-item disabled, in addition to the menu's `disabled`. */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Override the string used for typeahead matching. Defaults to `''`,\n * which falls back to the item's `textContent`. See `[forMenuItem]`\n * for the rationale.\n */\n readonly textValue = input('');\n\n readonly effectiveDisabled = computed(() => this.disabled() || this.ctx.disabled());\n\n protected readonly interaction = createMenuItemInteraction({\n ctx: this.ctx,\n effectiveDisabled: this.effectiveDisabled,\n textValue: this.textValue,\n });\n\n /**\n * True while this item is the active keyboard candidate or hovered by the\n * pointer. Reflected as `data-highlighted`.\n */\n readonly highlighted = this.interaction.highlighted;\n\n /**\n * Fires on click / Enter / Space activation. Call `preventDefault()`\n * on the emitted veto to keep the menu open after activation.\n */\n readonly activate = output();\n\n protected onClick(): void {\n if (this.effectiveDisabled()) {\n return;\n }\n this.checked.update((v) => !v);\n if (!emitVetoableEvent(this.activate)) {\n this.ctx.closeMenu('select');\n }\n }\n\n protected onKeyDown(event: KeyboardEvent): void {\n if (this.effectiveDisabled()) {\n return;\n }\n if (this.interaction.handleNavigation(event)) {\n return;\n }\n // APG menubar guidance: Space toggles checked without closing the menu\n // (Enter and click still close via native button activation). preventDefault\n // here suppresses the browser-synthesized click so the menu stays open.\n if (event.key === ' ') {\n event.preventDefault();\n if (this.ctx.handleTypeahead(event)) {\n return;\n }\n this.checked.update((v) => !v);\n this.activate.emit(createVetoableEvent());\n return;\n }\n this.ctx.handleTypeahead(event);\n }\n}\n","import { inject, InjectionToken } from '@angular/core';\n\nimport { orphanContextError } from 'forty-cdk/core';\n\n/**\n * Coordination contract owned by `[forMenuGroup]` and `[forMenuRadioGroup]`.\n * `[forMenuGroupLabel]` registers its generated id so the group wires\n * `aria-labelledby`.\n */\nexport interface ForMenuGroupContext {\n registerLabel(id: string): void;\n unregisterLabel(id: string): void;\n}\n\nexport const FOR_MENU_GROUP_CONTEXT = new InjectionToken(\n 'FOR_MENU_GROUP_CONTEXT',\n);\n\nexport function injectMenuGroupContext(piece: string): ForMenuGroupContext {\n const ctx = inject(FOR_MENU_GROUP_CONTEXT, { optional: true });\n if (!ctx) {\n throw orphanContextError({\n code: 'FORCDK-MENU-002',\n piece,\n root: '[forMenuGroup] or [forMenuRadioGroup]',\n token: 'FOR_MENU_GROUP_CONTEXT',\n });\n }\n return ctx;\n}\n","import { inject, InjectionToken, type Signal } from '@angular/core';\n\nimport { orphanContextError } from 'forty-cdk/core';\n\n/**\n * Coordination contract owned by `[forMenuRadioGroup]`. Radio items inject\n * it to read selection state and request a value change. Independent from\n * the parent menu's context so radio items can compose without the radio\n * group needing to know about menu internals (and vice versa).\n */\nexport interface ForMenuRadioGroupContext {\n /**\n * The selected value, or `null` when nothing is selected, as a read-only\n * signal. Mutate it through `select` or the root's `[(value)]` binding\n * rather than writing it directly.\n */\n readonly value: Signal;\n isSelected(value: string): boolean;\n select(value: string): void;\n}\n\nexport const FOR_MENU_RADIO_GROUP_CONTEXT = new InjectionToken(\n 'FOR_MENU_RADIO_GROUP_CONTEXT',\n);\n\nexport function injectMenuRadioGroupContext(piece: string): ForMenuRadioGroupContext {\n const ctx = inject(FOR_MENU_RADIO_GROUP_CONTEXT, { optional: true });\n if (!ctx) {\n throw orphanContextError({\n code: 'FORCDK-MENU-004',\n piece,\n root: '[forMenuRadioGroup]',\n token: 'FOR_MENU_RADIO_GROUP_CONTEXT',\n });\n }\n return ctx;\n}\n","import { Directive, model, signal } from '@angular/core';\n\nimport { hostLabelledBy } from 'forty-cdk/core';\nimport { FOR_MENU_GROUP_CONTEXT, type ForMenuGroupContext } from './menu-group-context';\nimport {\n FOR_MENU_RADIO_GROUP_CONTEXT,\n type ForMenuRadioGroupContext,\n} from './menu-radio-group-context';\n\n/**\n * Container for a set of `[forMenuRadioItem]` elements. Acts as a\n * `role=\"group\"` plus a coordination point for the shared `value`.\n *\n * Give the group an accessible name with a projected `[forMenuGroupLabel]`\n * (rendered as a section header in most designs) — the group references it\n * via `aria-labelledby`, the same labelling mechanism as `[forMenuGroup]`.\n */\n@Directive({\n selector: '[forMenuRadioGroup]',\n exportAs: 'forMenuRadioGroup',\n host: {\n role: 'group',\n '[attr.aria-labelledby]': 'labelledBy()',\n },\n providers: [\n { provide: FOR_MENU_RADIO_GROUP_CONTEXT, useExisting: ForMenuRadioGroup },\n { provide: FOR_MENU_GROUP_CONTEXT, useExisting: ForMenuRadioGroup },\n ],\n})\nexport class ForMenuRadioGroup implements ForMenuRadioGroupContext, ForMenuGroupContext {\n /**\n * Two-way bindable. The selected radio item's `value`, or `null` when\n * nothing is selected. `null` is the canonical unset state — distinct from\n * an item whose `value` is the empty string `''`, which is a legal,\n * selectable value. The `model()` change emitter (`(valueChange)`) fires\n * only on internal selection.\n */\n readonly value = model(null);\n\n readonly #labelIds = signal([]);\n\n /**\n * `aria-labelledby` target: a consumer-set static `aria-labelledby` when\n * present, else the space-joined ids of every projected\n * `[forMenuGroupLabel]`, or `null` when none are present.\n */\n readonly labelledBy = hostLabelledBy(() => {\n const ids = this.#labelIds();\n return ids.length === 0 ? null : ids.join(' ');\n });\n\n isSelected(v: string): boolean {\n return this.value() === v;\n }\n\n select(v: string): void {\n this.value.set(v);\n }\n\n /** Registers a `[forMenuGroupLabel]` id for `aria-labelledby`. */\n registerLabel(id: string): void {\n this.#labelIds.update((arr) => (arr.includes(id) ? arr : [...arr, id]));\n }\n\n /** Unregisters a previously registered `[forMenuGroupLabel]` id. */\n unregisterLabel(id: string): void {\n this.#labelIds.update((arr) => arr.filter((x) => x !== id));\n }\n}\n","import {\n booleanAttribute,\n computed,\n Directive,\n InjectionToken,\n input,\n output,\n} from '@angular/core';\n\nimport {\n hostButtonType,\n createVetoableEvent,\n emitVetoableEvent,\n type VetoableEvent,\n} from 'forty-cdk/core';\nimport { injectMenuContext } from 'forty-cdk/core-overlay';\nimport { createMenuItemInteraction } from './menu-item-interaction';\nimport { injectMenuRadioGroupContext } from './menu-radio-group-context';\n\n/**\n * Injection key the `[forMenuItemIndicator]` uses to resolve a parent radio\n * item, decoupled from the concrete `ForMenuRadioItem` class.\n * `ForMenuRadioItem` provides itself under this token, so a design system\n * wrapping the item by subclassing re-points it at the subclass with a single\n * provider (`{ provide: FOR_MENU_RADIO_ITEM, useExisting: MtxMenuRadioItem }`)\n * and the indicator keeps resolving — see `docs/wrapping-form-primitives.md`.\n */\nexport const FOR_MENU_RADIO_ITEM = new InjectionToken('FOR_MENU_RADIO_ITEM');\n\n/**\n * One radio option inside `[forMenuRadioGroup]`. Click and Enter set the\n * group's `value` to this item's `value`, emit `(activate)`, and close the\n * menu — call `event.preventDefault()` on the emitted event to keep the\n * menu open. Per APG, **Space** sets the value and emits `(activate)`\n * without closing the menu.\n *\n * Disabled items are skipped by arrow-key navigation, typeahead, and\n * Home/End, and ignore pointer hover, but stay in the DOM carrying\n * `aria-disabled=\"true\"` (never the native `disabled` attribute) so assistive\n * tech can still perceive and announce them.\n */\n@Directive({\n selector: '[forMenuRadioItem]',\n exportAs: 'forMenuRadioItem',\n providers: [{ provide: FOR_MENU_RADIO_ITEM, useExisting: ForMenuRadioItem }],\n host: {\n role: 'menuitemradio',\n '[attr.type]': 'buttonType()',\n tabindex: '-1',\n '[attr.aria-checked]': 'checked() ? \"true\" : \"false\"',\n '[attr.aria-disabled]': 'effectiveDisabled() ? \"true\" : null',\n '[attr.data-state]': 'checked() ? \"checked\" : \"unchecked\"',\n '[attr.data-disabled]': 'effectiveDisabled() ? \"\" : null',\n '[attr.data-highlighted]': 'highlighted() ? \"\" : null',\n '(click)': 'onClick()',\n '(keydown)': 'onKeyDown($event)',\n '(focus)': 'interaction.onFocus()',\n '(blur)': 'interaction.onBlur()',\n '(pointermove)': 'interaction.onPointerMove($event)',\n },\n})\nexport class ForMenuRadioItem {\n protected readonly buttonType = hostButtonType();\n\n protected readonly menu = injectMenuContext('ForMenuRadioItem');\n protected readonly group = injectMenuRadioGroupContext('ForMenuRadioItem');\n\n /** Identifier added to / read from the radio group's `value`. Required. */\n readonly value = input.required();\n\n /** Per-item disabled, in addition to the menu's `disabled`. */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Override the string used for typeahead matching. Defaults to `''`,\n * which falls back to the item's `textContent`. See `[forMenuItem]`\n * for the rationale.\n */\n readonly textValue = input('');\n\n readonly checked = computed(() => this.group.isSelected(this.value()));\n\n readonly effectiveDisabled = computed(() => this.disabled() || this.menu.disabled());\n\n protected readonly interaction = createMenuItemInteraction({\n ctx: this.menu,\n effectiveDisabled: this.effectiveDisabled,\n textValue: this.textValue,\n });\n\n /**\n * True while this item is the active keyboard candidate or hovered by the\n * pointer. Reflected as `data-highlighted`.\n */\n readonly highlighted = this.interaction.highlighted;\n\n /**\n * Fires on click / Enter / Space activation. Call `preventDefault()`\n * on the emitted veto to keep the menu open after activation.\n */\n readonly activate = output();\n\n protected onClick(): void {\n if (this.effectiveDisabled()) {\n return;\n }\n this.group.select(this.value());\n if (!emitVetoableEvent(this.activate)) {\n this.menu.closeMenu('select');\n }\n }\n\n protected onKeyDown(event: KeyboardEvent): void {\n if (this.effectiveDisabled()) {\n return;\n }\n if (this.interaction.handleNavigation(event)) {\n return;\n }\n // APG menubar guidance: Space sets the group value without closing the\n // menu (Enter and click still close via native button activation).\n // preventDefault here suppresses the browser-synthesized click.\n if (event.key === ' ') {\n event.preventDefault();\n if (this.menu.handleTypeahead(event)) {\n return;\n }\n this.group.select(this.value());\n this.activate.emit(createVetoableEvent());\n return;\n }\n this.menu.handleTypeahead(event);\n }\n}\n","import { booleanAttribute, computed, Directive, inject, input } from '@angular/core';\n\nimport { orphanContextError } from 'forty-cdk/core';\nimport { FOR_MENU_CHECKBOX_ITEM } from './menu-checkbox-item';\nimport { FOR_MENU_RADIO_ITEM } from './menu-radio-item';\n\n/**\n * Visibility helper inside `[forMenuCheckboxItem]` or `[forMenuRadioItem]`.\n * The directive flips a `[hidden]` host binding so the consumer can keep\n * the checkmark / dot inline without extra `@if` glue:\n *\n * ```html\n * \n *\n *
\n * \n *
\n * ```\n *\n * Reflects the parent item's `data-state` (`\"checked\" | \"unchecked\"`) so\n * the consumer can also style it from CSS. Set `[forceMount]` to keep the\n * indicator in the DOM regardless of state — useful when wrapping\n * `animate.leave` for an exit animation, or when the consumer styles the\n * indicator via `data-state` instead of presence.\n *\n * Visibility while unchecked is enforced with an inline `display: none`\n * (which beats any author `display` rule a consumer applies via a class) in\n * addition to the `hidden` attribute that removes it from the a11y tree.\n */\n@Directive({\n selector: '[forMenuItemIndicator]',\n exportAs: 'forMenuItemIndicator',\n host: {\n 'aria-hidden': 'true',\n '[attr.data-state]': 'checked() ? \"checked\" : \"unchecked\"',\n '[hidden]': '!checked() && !forceMount()',\n '[style.display]': '!checked() && !forceMount() ? \"none\" : null',\n },\n})\nexport class ForMenuItemIndicator {\n readonly #checkbox = inject(FOR_MENU_CHECKBOX_ITEM, { optional: true });\n readonly #radio = inject(FOR_MENU_RADIO_ITEM, { optional: true });\n\n protected readonly checked = computed(() => {\n if (this.#checkbox) {\n return this.#checkbox.checked();\n }\n if (this.#radio) {\n return this.#radio.checked();\n }\n return false;\n });\n\n /** Keep the indicator mounted even when the parent item is unchecked. */\n readonly forceMount = input(false, { transform: booleanAttribute });\n\n constructor() {\n if (!this.#checkbox && !this.#radio) {\n throw orphanContextError({\n code: 'FORCDK-MENU-003',\n piece: 'ForMenuItemIndicator',\n root: '[forMenuCheckboxItem] or [forMenuRadioItem]',\n token: 'FOR_MENU_CHECKBOX_ITEM or FOR_MENU_RADIO_ITEM',\n });\n }\n }\n}\n","import { booleanAttribute, Directive, input } from '@angular/core';\n\n/**\n * Visual + semantic separator between menu items. Never focused, never\n * registers with the menu's item collection, so keyboard navigation and\n * typeahead skip it automatically. Set `decorative` when the surrounding items\n * already convey the split and the line should be skipped by assistive tech.\n */\n@Directive({\n selector: '[forMenuSeparator]',\n exportAs: 'forMenuSeparator',\n host: {\n '[attr.role]': 'roleAttr()',\n '[attr.aria-orientation]': 'ariaOrientationAttr()',\n '[attr.data-orientation]': 'orientation()',\n },\n})\nexport class ForMenuSeparator {\n /**\n * Axis the separator divides along, always reflected to `data-orientation`\n * and reflected to `aria-orientation` only for `vertical` (`horizontal` is\n * the ARIA default and is omitted). `horizontal` (default) splits items\n * stacked vertically — the common case in a vertical menu; `vertical` splits\n * items laid out horizontally.\n */\n readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n /**\n * When true, the separator is purely visual: it gets `role=\"none\"` and no\n * `aria-orientation`, so assistive tech treats the surrounding items as a\n * single flow. `data-orientation` is still reflected for styling.\n */\n readonly decorative = input(false, { transform: booleanAttribute });\n\n protected roleAttr(): 'separator' | 'none' {\n return this.decorative() ? 'none' : 'separator';\n }\n\n protected ariaOrientationAttr(): 'vertical' | null {\n if (this.decorative()) {\n return null;\n }\n return this.orientation() === 'vertical' ? 'vertical' : null;\n }\n}\n","import { Directive, signal } from '@angular/core';\n\nimport { hostLabelledBy } from 'forty-cdk/core';\nimport { FOR_MENU_GROUP_CONTEXT, type ForMenuGroupContext } from './menu-group-context';\n\n/**\n * Logical grouping of menu items, exposed to assistive tech as\n * `role=\"group\"`. Use with `[forMenuGroupLabel]` for an accessible name\n * (rendered as a section header in most designs).\n */\n@Directive({\n selector: '[forMenuGroup]',\n exportAs: 'forMenuGroup',\n host: {\n role: 'group',\n '[attr.aria-labelledby]': 'labelledBy()',\n },\n providers: [{ provide: FOR_MENU_GROUP_CONTEXT, useExisting: ForMenuGroup }],\n})\nexport class ForMenuGroup implements ForMenuGroupContext {\n readonly #labelIds = signal([]);\n readonly labelledBy = hostLabelledBy(() => {\n const ids = this.#labelIds();\n return ids.length === 0 ? null : ids.join(' ');\n });\n\n registerLabel(id: string): void {\n this.#labelIds.update((arr) => (arr.includes(id) ? arr : [...arr, id]));\n }\n\n unregisterLabel(id: string): void {\n this.#labelIds.update((arr) => arr.filter((x) => x !== id));\n }\n}\n","import { Directive } from '@angular/core';\n\nimport { registerA11yName } from 'forty-cdk/core';\nimport { injectMenuGroupContext } from './menu-group-context';\n\n/**\n * Accessible name for `[forMenuGroup]` or `[forMenuRadioGroup]`. Generates an\n * id on the host and registers it with the parent group so `aria-labelledby`\n * resolves to this element.\n */\n@Directive({\n selector: '[forMenuGroupLabel]',\n host: {\n '[id]': 'id',\n },\n})\nexport class ForMenuGroupLabel {\n readonly id = registerA11yName(\n injectMenuGroupContext('ForMenuGroupLabel'),\n 'for-menu-group-label',\n );\n}\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n booleanAttribute,\n computed,\n DestroyRef,\n Directive,\n inject,\n input,\n model,\n output,\n PLATFORM_ID,\n} from '@angular/core';\nimport type { ReferenceElement } from '@floating-ui/dom';\n\nimport {\n emitVetoableEvent,\n isHoverCapablePointer,\n orphanContextError,\n type VetoableEvent,\n type VetoableNativeEvent,\n type WritingDirection,\n} from 'forty-cdk/core';\nimport {\n type AnchoredPositioningSeedDefaults,\n attachPointerGrace,\n buildSubmenuGracePolygon,\n createDebouncedAction,\n createMenuOverlay,\n type FloatingFallbackAxisSideDirection,\n FOR_MENU_CONTEXT,\n type ForMenuCloseReason,\n type ForMenuContext,\n MenuOverlayHost,\n type Point,\n resolveGraceSide,\n} from 'forty-cdk/core-overlay';\nimport { FOR_MENU_DEFAULTS } from './menu-defaults';\n\n/**\n * Root for a nested submenu inside a parent `[forDropdownMenu]` /\n * `[forContextMenu]` (or another `[forMenuSub]`). Owns its own open\n * state, ids, and item collection — items inside the submenu register\n * here, not in the parent.\n *\n * The shared item-collection / typeahead / navigate / focus / id /\n * outside-veto logic is owned by the `_internal/menu-overlay` helper (the\n * same one `[forDropdownMenu]` / `[forContextMenu]` compose). The submenu\n * contributes only its genuine differences on top: pointer-driven (hover)\n * open/close scheduling, the autofocus vetoes that keep hover from stealing /\n * returning focus, and the reason-dependent upward `closeMenu` propagation.\n * The pointer paths run through the overlay's own `openMenu` / `closeMenu`\n * (with `{ suppressFocusMoves: true }`, closing with reason `'hover'`), so all\n * three concerns are wired through the `onOpen` / `onClose` lifecycle hooks and\n * `lastCloseReason` / the initial-focus state stay correct on every transition.\n *\n * The parent menu's content is added to this submenu's dismissible\n * exemptions so a click on a parent menu item doesn't fire the\n * submenu's outside-handler (the parent item's own click flow closes\n * everything via propagated `closeMenu`).\n *\n * Closing this submenu propagates `closeMenu` upward for every reason\n * except `'escape'`, `'hover'` and `'programmatic'` — Escape inside a submenu\n * and a hover-leave close only that level, while activating an item or\n * clicking outside everything tears down the entire chain.\n *\n * ```html\n *
\n * \n * @if (open()) {\n *
\n * \n *
\n * \n * @if (moreOpen()) {\n *
\n * \n *
\n * }\n *
\n *
\n * }\n *
\n * ```\n */\n@Directive({\n selector: '[forMenuSub]',\n exportAs: 'forMenuSub',\n host: {\n '[attr.data-state]': 'open() ? \"open\" : \"closed\"',\n '[attr.data-disabled]': 'disabled() ? \"\" : null',\n },\n providers: [{ provide: FOR_MENU_CONTEXT, useExisting: ForMenuSub }],\n})\nexport class ForMenuSub extends MenuOverlayHost implements ForMenuContext {\n readonly #defaults = inject(FOR_MENU_DEFAULTS);\n readonly #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n /**\n * `ForMenuDefaults.side` is shared with the `[forMenu]` root, whose own\n * fallback is `'bottom'`, so `null` is what \"each root keeps its own\" looks\n * like in the scope. Here that resolves against the writing direction, so a\n * submenu opens away from its parent item.\n */\n readonly #positioningDefaults = computed(() => ({\n side: this.#defaults.side ?? (this.dir() === 'rtl' ? 'left' : 'right'),\n align: this.#defaults.align,\n sideOffset: this.#defaults.sideOffset,\n collisionPadding: this.#defaults.collisionPadding,\n }));\n\n protected get positioningDefaults(): AnchoredPositioningSeedDefaults {\n return this.#positioningDefaults();\n }\n\n /** The enclosing menu — required (orphan throws). */\n readonly parentMenu: ForMenuContext;\n\n /**\n * Two-way bindable. Whether the submenu is currently shown. The `model()` change emitter fires\n * only when the primitive itself opens or closes the submenu, never on consumer writes through\n * `[(open)]`.\n */\n readonly open = model(false);\n\n /**\n * Writing direction. When unset, inherits from the enclosing menu — set\n * `[dir]` once on the top-level `[forDropdownMenu]` / `[forContextMenu]`\n * and every nested submenu picks it up. Override per-submenu only when\n * a specific submenu needs to render against the opposite direction.\n *\n * The input is aliased to `dir`; consumers bind `[dir]=\"...\"` and read\n * the effective value via the public `dir` computed below.\n */\n readonly _dirInput = input(null, { alias: 'dir' });\n readonly dir = computed(() => this._dirInput() ?? this.parentMenu.dir());\n\n /**\n * Direction `flip` falls back to on the perpendicular axis when both sides of\n * the preferred axis overflow. `'none'` (default) keeps only the opposite\n * same-axis placement; `'start'` / `'end'` let the submenu drop to a vertical\n * side (`top` / `bottom`) when both horizontal sides are blocked — the\n * graceful-degradation lever for a submenu clipped on a narrow viewport. Only\n * consulted when `avoidCollisions` is on.\n *\n * The default is read from `provideForMenuDefaults` for the surrounding scope,\n * since dropping to a vertical side is a design-system-wide\n * viewport-degradation policy rather than a per-submenu one.\n */\n readonly fallbackAxisSideDirection = input(\n this.#defaults.fallbackAxisSideDirection,\n );\n\n /**\n * When `true` (default), arrow-key navigation wraps from the last enabled\n * item back to the first (and vice versa). When `false`, navigation stops\n * at the ends.\n */\n readonly loop = input(true, { transform: booleanAttribute });\n\n /**\n * When true, the sub-trigger interaction is ignored and any open submenu\n * stays open until the consumer flips `open`. Layered on top of the parent\n * menu's own `disabled`.\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /** When true (default), Escape, pointer-down outside, and focus outside close the submenu. */\n readonly dismissible = input(true, { transform: booleanAttribute });\n\n /** When true (default), focus returns to the sub-trigger on close. */\n readonly returnFocus = input(true, { transform: booleanAttribute });\n\n /** Manual `aria-label` on `[forMenuSubContent]`. Use when the sub-trigger isn't a meaningful name. */\n readonly ariaLabel = input(null);\n\n /**\n * Fires when Escape is pressed while the submenu is open, just before it\n * closes. Call `preventDefault()` on the emitted veto to keep the submenu\n * open and suppress the Escape-driven close.\n */\n readonly escapeKeyDown = output>();\n\n /**\n * Fires on a pointer-down outside the submenu (and outside its exempt\n * parent content), just before it closes. Call `preventDefault()` on the\n * veto to keep the submenu open.\n */\n readonly pointerDownOutside = output>();\n\n /**\n * Fires when focus moves outside the submenu, just before it closes. Call\n * `preventDefault()` on the veto to keep the submenu open.\n */\n readonly focusOutside = output>();\n\n /**\n * Composite outside-interaction channel: fires for either a\n * pointer-down-outside or a focus-outside, just before the submenu closes.\n * Call `preventDefault()` on the veto to keep the submenu open regardless of\n * which interaction triggered it.\n */\n readonly interactOutside = output>();\n\n /**\n * Fires just before the submenu sends focus to its first / last\n * enabled item on mount. Call `preventDefault()` on the emitted veto\n * to skip the imperative focus move.\n */\n readonly autoFocusOnOpen = output();\n\n /**\n * Fires just before focus returns to the parent item on unmount. Call\n * `preventDefault()` on the veto to suppress the return-focus.\n */\n readonly autoFocusOnClose = output();\n\n protected readonly _overlay = createMenuOverlay('for-menu-sub', {\n open: this.open,\n disabled: this.disabled,\n dismissible: this.dismissible,\n loop: this.loop,\n escapeKeyDown: this.escapeKeyDown,\n pointerDownOutside: this.pointerDownOutside,\n focusOutside: this.focusOutside,\n interactOutside: this.interactOutside,\n autoFocusOnOpen: this.autoFocusOnOpen,\n autoFocusOnClose: this.autoFocusOnClose,\n onOpen: (_initialFocus, options) => {\n this.#cancelPointerScheduling();\n this.#suppressOpenFocus = options.suppressFocusMoves ?? false;\n this.#suppressCloseFocus = false;\n },\n onClose: (reason, options) => {\n this.#cancelPointerScheduling();\n this.#suppressOpenFocus = false;\n this.#suppressCloseFocus = options.suppressFocusMoves ?? false;\n if (reason !== 'escape' && reason !== 'hover' && reason !== 'programmatic') {\n this.parentMenu.closeMenu(reason);\n }\n },\n });\n\n readonly anchor = computed(() => this._overlay.trigger());\n\n // --- Pointer-driven (hover) open/close state. Additive to click/keyboard. ---\n readonly #openAction = createDebouncedAction(() => this.#openByPointer());\n readonly #closeAction = createDebouncedAction(() => this.#closeByPointer());\n #graceTimer: ReturnType | null = null;\n #detachGrace: (() => void) | null = null;\n #detachContentPointer: (() => void) | null = null;\n #suppressOpenFocus = false;\n #suppressCloseFocus = false;\n\n /**\n * Submenus exempt the parent menu's content. Clicks on parent menu items\n * activate via the item's own click handler (which propagates `closeMenu`\n * upward through the whole chain) instead of firing the submenu's\n * outside-close.\n */\n readonly dismissibleExemptions = computed(() => {\n const parentContent = this.parentMenu.content();\n return parentContent ? [parentContent] : [];\n });\n\n constructor() {\n super();\n const parent = inject(FOR_MENU_CONTEXT, { skipSelf: true, optional: true });\n if (!parent) {\n throw orphanContextError({\n code: 'FORCDK-MENU-006',\n piece: '[forMenuSub]',\n root: '[forDropdownMenu], [forContextMenu], or another [forMenuSub]',\n token: 'FOR_MENU_CONTEXT',\n });\n }\n this.parentMenu = parent;\n\n inject(DestroyRef).onDestroy(() => this.#teardownPointer());\n }\n\n override registerContent(el: HTMLElement): void {\n this._overlay.registerContent(el);\n this.#attachContentPointer(el);\n }\n override unregisterContent(el: HTMLElement): void {\n if (this._overlay.content() === el) {\n this._overlay.unregisterContent(el);\n this.#detachContentPointer?.();\n this.#detachContentPointer = null;\n }\n }\n\n override closeMenu(reason: ForMenuCloseReason): void {\n this._overlay.closeMenu(reason);\n }\n\n // --- Pointer-driven (hover) open/close. Additive to click / keyboard. ---\n\n /**\n * Schedule a hover-open of the submenu after `subMenuOpenDelay`. Re-entering\n * the trigger also keeps every ancestor menu alive and aborts a pending\n * close. No-op when disabled or already open / scheduled.\n */\n scheduleOpenByPointer(): void {\n if (this.disabled()) {\n return;\n }\n this.#keepChainOpen();\n this.cancelPendingClose();\n if (this.open() || this.#openAction.isPending()) {\n return;\n }\n this.#openAction.schedule(this.#defaults.subMenuOpenDelay);\n }\n\n /**\n * The pointer left the sub-trigger. Cancels a not-yet-fired hover-open; if\n * the submenu is already open, arms the pointer-grace \"safe triangle\" toward\n * the content so travelling into the submenu doesn't close it.\n */\n onTriggerPointerLeave(cursor: Point): void {\n this.#clearOpenTimer();\n if (!this.open()) {\n return;\n }\n this.#armPointerGrace(cursor);\n }\n\n /** Schedule a hover-close of the submenu after `subMenuCloseDelay`. */\n scheduleCloseByPointer(): void {\n this.#clearOpenTimer();\n if (!this.open() || this.#closeAction.isPending()) {\n return;\n }\n this.#closeAction.schedule(this.#defaults.subMenuCloseDelay);\n }\n\n /** Cancel a pending hover-close and disarm the pointer-grace tracker. */\n cancelPendingClose(): void {\n this.#closeAction.cancel();\n this.#disarmPointerGrace();\n }\n\n #openByPointer(): void {\n // Hover-open never steals focus — it stays on whatever the user was on.\n this._overlay.openMenu('first', 'pointer', { suppressFocusMoves: true });\n }\n\n #closeByPointer(): void {\n if (!this.open()) {\n return;\n }\n // Hover-close affects only this level (like Escape / programmatic — no\n // upward propagation) and suppresses the trigger return-focus.\n this._overlay.closeMenu('hover', { suppressFocusMoves: true });\n }\n\n #armPointerGrace(cursor: Point): void {\n const content = this._overlay.content();\n if (!this.#isBrowser || !content) {\n this.scheduleCloseByPointer();\n return;\n }\n const rect = content.getBoundingClientRect();\n const trigger = this.trigger();\n const side = trigger ? resolveGraceSide(trigger.getBoundingClientRect(), rect) : this.side();\n const polygon = buildSubmenuGracePolygon(cursor, rect, side);\n this.#disarmPointerGrace();\n this.#detachGrace = attachPointerGrace(content.ownerDocument, polygon, () => {\n this.#disarmPointerGrace();\n this.scheduleCloseByPointer();\n });\n this.#graceTimer = setTimeout(\n () => {\n this.#graceTimer = null;\n this.#detachGrace?.();\n this.#detachGrace = null;\n this.scheduleCloseByPointer();\n },\n Math.max(0, this.#defaults.subMenuPointerGraceDuration),\n );\n }\n\n #disarmPointerGrace(): void {\n if (this.#detachGrace) {\n this.#detachGrace();\n this.#detachGrace = null;\n }\n if (this.#graceTimer !== null) {\n clearTimeout(this.#graceTimer);\n this.#graceTimer = null;\n }\n }\n\n #onContentPointerEnter(): void {\n // Arrived at (or moving within) the content — keep it and every ancestor\n // submenu open.\n this.cancelPendingClose();\n this.#keepChainOpen();\n }\n\n #onContentPointerLeave(): void {\n this.scheduleCloseByPointer();\n }\n\n /** Abort pending hover-closes on this submenu and every ancestor menu. */\n #keepChainOpen(): void {\n let parent: ForMenuContext | null = this.parentMenu;\n while (parent) {\n parent.cancelPendingClose?.();\n parent = parent.parentMenu;\n }\n }\n\n #cancelPointerScheduling(): void {\n this.#clearOpenTimer();\n this.cancelPendingClose();\n }\n\n #clearOpenTimer(): void {\n this.#openAction.cancel();\n }\n\n #attachContentPointer(el: HTMLElement): void {\n this.#detachContentPointer?.();\n const onEnter = (event: PointerEvent): void => {\n if (!isHoverCapablePointer(event)) {\n return;\n }\n this.#onContentPointerEnter();\n };\n const onLeave = (event: PointerEvent): void => {\n if (!isHoverCapablePointer(event)) {\n return;\n }\n this.#onContentPointerLeave();\n };\n const controller = new AbortController();\n const options = { signal: controller.signal };\n el.addEventListener('pointerenter', onEnter, options);\n el.addEventListener('pointerleave', onLeave, options);\n this.#detachContentPointer = () => controller.abort();\n }\n\n #teardownPointer(): void {\n this.#clearOpenTimer();\n this.#closeAction.cancel();\n this.#disarmPointerGrace();\n this.#detachContentPointer?.();\n this.#detachContentPointer = null;\n }\n\n override emitAutoFocusOnOpen(): boolean {\n // Hover-open leaves focus where it is — only keyboard / click moves it in.\n if (this.#suppressOpenFocus) {\n this.#suppressOpenFocus = false;\n return true;\n }\n return emitVetoableEvent(this.autoFocusOnOpen);\n }\n\n override emitAutoFocusOnClose(): boolean {\n // Hover-close must not yank focus back to the trigger.\n if (this.#suppressCloseFocus) {\n this.#suppressCloseFocus = false;\n return true;\n }\n return emitVetoableEvent(this.autoFocusOnClose);\n }\n}\n","import { booleanAttribute, computed, Directive, ElementRef, inject, input } from '@angular/core';\n\nimport {\n fortyError,\n hostButtonType,\n isHoverCapablePointer,\n registerHandle,\n resolveListNavigation,\n} from 'forty-cdk/core';\nimport { injectMenuContext, type MenuActivationModality } from 'forty-cdk/core-overlay';\nimport { handleMenuTabOut } from './menu-tab-out';\n\n/**\n * The `menuitem` inside the parent menu that opens its `[forMenuSub]`.\n * Apply on a `