dap-design-system

import { FloatingStrategy, LinkTarget, PopupPlacement, TabNavigationMode } from '../../common/types'; import { DdsElement } from '../../internal/dds-hu-element'; import { default as DapDSButton } from '../button/button.component'; import { default as DapDSIcon } from '../icon/icon.component'; import { default as DapDSStack } from '../stack/stack.component'; import { SubmenuController } from './submenu-controller'; declare const DapDSNavigationMenuItem_base: typeof DdsElement & { new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface; prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface; }; /** * `dap-ds-navigation-menu-item` * @summary A navigation menu item that can contain either a simple link or dropdown content. * Supports nested items with cascading flyout behavior. Part of the navigation menu system. * This is for NAVIGATION (website menus), not application menus. * * @element dap-ds-navigation-menu-item * @title - Navigation Menu Item * @group navigation-menu * * @property {string} label - The label text for the navigation item. This will be displayed in the title slot if no custom title slot content is provided. * @property {'xs' | 'sm' | 'lg'} size - The size of the popup. Default is 'sm'. * @property {boolean} disabled - The disabled state of the popup. Default is false. * @property {boolean} opened - The open state of the popup. Default is false. * @property {'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'} placement - The placement of the popup (automatically adjusted based on nesting level). Default is 'bottom-start'. * @property {'absolute' | 'fixed'} floatingStrategy - The floating strategy of the popup. Default is 'fixed'. * @property {number} offset - The offset of the popup. Default is 0. * @property {boolean} sync - Whether the popup should sync its width with the trigger. Default is false. * @property {number | 'auto'} maxHeight - The maximum height of the popup. Default is 250. * @property {number | 'auto'} maxWidth - The maximum width of the popup. Default is 'auto'. * @property {boolean} hasArrow - Whether the popup has an arrow. Default is false. * @property {boolean} overflow - Whether the popup should overflow. Default is true. * @property {boolean} fullWidth - Whether the popup should take full width of the screen. Default is false. * @property {boolean} exactHref - Whether the navigation item should be active if the href is exactly the same as the activeHref. Default is false. * @property {string} icon - The name of the icon to display in the trigger. * @property {string} ariaLabelledBy - The name of the element that labels the navigation dropdown. * @property {string} activeHref - The href of the navigation item that is active (receives aria-current="page"). * @property {string} baseHref - The href of the navigation item. If provided, the navigation item will be active if the href is a substring of the activeHref. * @property {string} href - The href URL for the navigation item link. When provided, the default trigger renders as a link. * @property {'_blank' | '_self' | '_parent' | '_top'} target - The target attribute for link navigation. * @property {string} rel - The rel attribute for link security and behavior. * @property {number} level - The nesting level of this navigation item (0 = top-level, automatically set for nested items). Default is 0. * @property {'horizontal' | 'vertical'} orientation - The orientation of the parent navigation menu (automatically inherited). Default is 'horizontal'. * @property {'group' | 'items'} tabMode - Controls how Tab key navigates through top-level items. Default is 'group'. * * @event {{ href: string, event: Event }} dds-navigation-item-click - Fired when a navigation item is clicked. * @event {{ item: DapDSNavigationMenuItem }} dds-navigation-dropdown-open - Fired when a navigation dropdown is opened. * * @slot trigger - The trigger element (link, button, etc.) for this navigation item. * @slot title - The title of the navigation item. * @slot indicator - The expand indicator icon (defaults to arrow icon based on orientation and level). * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation. * Rendered outside the popup so it is always accessible to programmatic clicks. * @slot - The dropdown content (can contain nested dap-ds-navigation-menu-item elements). * * @csspart base - The base part of the navigation item. * @csspart trigger - The trigger element part. * @csspart trigger-base - The base part of the trigger button (from dap-ds-button). * @csspart trigger-content - The content part of the trigger button (from dap-ds-button). * @csspart trigger-high-contrast - The high contrast part of the trigger button (from dap-ds-button). * @csspart trigger-stack-base - The base part of the trigger stack (from dap-ds-stack). * @csspart title - The title slot wrapper. * @csspart indicator - The expand indicator container. * @csspart indicator-icon - The expand indicator icon part. * @csspart indicator-icon-base - The base part of the indicator icon (from dap-ds-icon). * @csspart indicator-icon-icon - The icon part of the indicator icon (from dap-ds-icon). * @csspart popup - The dropdown popup container. * @csspart content - The dropdown content wrapper (default slot). * @csspart arrow - The dropdown arrow part. * * @cssproperty --dds-navigation-menu-item-spacing - The padding/spacing of the navigation menu item content. (default: var(--dds-spacing-200)). * @cssproperty --dds-navigation-menu-item-border-width - The border width of the navigation menu item content. (default: var(--dds-border-width-base)). * @cssproperty --dds-navigation-menu-item-border-color - The border color of the navigation menu item content. (default: var(--dds-border-neutral-subtle)). * @cssproperty --dds-navigation-menu-item-border-radius - The border radius of the navigation menu item content. (default: var(--dds-radius-base)). * @cssproperty --dds-navigation-menu-item-background - The background color of the navigation menu item content. (default: var(--dds-background-neutral-base)). * @cssproperty --dds-navigation-menu-item-shadow - The box shadow of the navigation menu item content. (default: var(--dds-shadow-base)). * * @accessibility * - Active navigation items marked with `aria-current="page"` * - Dropdowns use `aria-expanded` and `aria-haspopup` * - No menu/menuitem roles (this is navigation, not an application menu) */ export default class DapDSNavigationMenuItem extends DapDSNavigationMenuItem_base { static tagName: string; static dependencies: { 'dap-ds-icon': typeof DapDSIcon; 'dap-ds-button': typeof DapDSButton; 'dap-ds-stack': typeof DapDSStack; }; static readonly styles: import('lit').CSSResult; /** @ignore */ readonly popup: HTMLDivElement; /** @ignore */ private readonly _assignedTrigger; /** @ignore */ protected triggerElement: Element | null; private cleanup; readonly submenuController: SubmenuController; /** The disabled state of the menu item. */ disabled: boolean; /** The open state of the dropdown menu. */ opened: boolean; /** The placement of the dropdown. */ placement: PopupPlacement; /** The floating strategy of the dropdown. */ floatingStrategy: FloatingStrategy; /** The offset of the dropdown from the trigger. */ offset: number; /** Whether the dropdown should sync its width with the trigger. */ sync: boolean; /** The maximum height of the dropdown. */ maxHeight: number | 'auto'; /** The maximum width of the dropdown. */ maxWidth: number | 'auto'; /** Whether the dropdown has an arrow. */ hasArrow: boolean; /** Whether the dropdown should overflow. */ overflow: boolean; /** Whether the dropdown should take full width of the screen. */ fullWidth: boolean; /** The name of the icon to display in the trigger. */ icon?: string; /** ID of element that labels the navigation dropdown. */ ariaLabelledBy?: string; /** The href of the navigation item that is active. */ activeHref?: string; /** The href of the navigation item for prefix matching. */ baseHref?: string; /** Whether the navigation item should use exact href matching. */ exactHref: boolean; /** The href URL for the navigation item link. When provided, the default trigger renders as a link. */ href?: string; /** The target attribute for link navigation. */ target?: LinkTarget; /** The rel attribute for link security and behavior. */ rel?: string; /** The label text for the navigation item, displayed in the title slot when no slot content is provided. */ label?: string; /** The nesting level of this navigation item (0 = top-level). */ level: number; /** The orientation of the parent navigation menu. */ orientation: 'horizontal' | 'vertical'; /** Controls tab key behavior (propagated from parent navigation menu). */ tabMode: TabNavigationMode; /** `data-testid` for the default menu trigger button. */ triggerButtonTestId: string; hasContent: boolean; private hasLink; private hasTitleSlot; private _titleText; private active; private openedByHover; private _isRovingActive; /** Computed property to detect if this item contains nested navigation menu items. */ get hasNestedItems(): boolean; private get _trigger(); /** Get the element slotted into the `link` slot, if any. */ private _getLinkElement; /** Handle slot change for the `link` slot. */ private _handleLinkSlotChange; /** Handle slot change for the `title` slot. */ private _handleTitleSlotChange; constructor(); connectedCallback(): void; disconnectedCallback(): void; firstUpdated(changedProperties: Map<string, unknown>): Promise<void>; handleOpenedChange(): void; handleActiveHrefChange(): void; handleHrefChange(): void; handleLayoutChange(): void; /** Update nested navigation menu items with current properties. */ private _updateNestedItems; /** Update placement based on nesting level and orientation. */ private _updatePlacementForLevel; /** Calculate z-index based on nesting level. */ private _calculateZIndex; /** Apply z-index based on nesting level. */ private _applyZIndex; /** Start automatic position updates using Floating UI. */ private startPositionUpdate; /** Stop automatic position updates. */ private stopPositionUpdate; /** Update popup position using Floating UI. */ updatePosition(): Promise<void>; private _handleClick; private _handleMouseOver; private _handleMouseLeave; /** Handle keyboard navigation for submenu items */ private _handleKeyDown; /** @ignore Override parent's handleDocumentMouseDown to be parent-aware for nested menus. */ protected handleDocumentMouseDown: (event: MouseEvent) => void; /** Check if target is within any nested navigation menu items. */ private _isWithinNestedItems; focus(): void; /** * Sets this item as the active (or inactive) roving tabindex target. * Only the active item's trigger is in the sequential tab order (tabindex="0"). * All others are removed (tabindex="-1") so Tab exits the whole nav in one step. */ setRovingTabIndex(active: boolean): void; /** Apply tabindex to a trigger element and its inner focusable element. */ private _applyTriggerTabIndex; /** * Returns the inner light-DOM focusable element of a non-focusable wrapper * trigger, or null when the trigger itself should be the tab stop. */ private _getInnerLightDomFocusable; /** Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content). */ focusFirstDropdownChild(): void; /** Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content). */ focusLastDropdownChild(): void; /** Get all top-level focusable items inside the popup slot content (for mega menu arrow navigation). */ private _getFocusablePopupItems; private _collectFocusableItems; private _activateFocusableItem; private _focusPopupItem; showDropDown(byHover?: boolean): Promise<void>; hideDropDown(): Promise<void>; /** Handle trigger slot change events. */ private _handleTriggerSlotChange; /** Update trigger element attributes and properties. */ _handleTriggerSlotChangeCallback(): void; private _updateActiveState; _handleContentSlotChange(e: Event): void; /** Render expand indicator icon based on nesting level and orientation. */ private renderExpandIndicator; /** Get the default icon name based on orientation and level. */ private _getDefaultIconName; renderTrigger(): import('lit-html').TemplateResult; renderPopup(): import('lit-html').TemplateResult; render(): import('lit-html').TemplateResult; } export {};