@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
104 lines (103 loc) • 3.59 kB
TypeScript
import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { FlipContext } from "../interfaces";
import { Direction } from "../../utils/dom";
import { LoadableComponent } from "../../utils/loadable";
import { MenuItemCustomEvent } from "./interfaces";
import { T9nComponent } from "../../utils/t9n";
import { MenuItemMessages } from "./assets/menu-item/t9n";
import { LocalizedComponent } from "../../utils/locale";
type Layout = "horizontal" | "vertical";
/**
* @slot submenu-item - A slot for adding `calcite-menu-item`s in a submenu.
*/
export declare class CalciteMenuItem implements LoadableComponent, T9nComponent, LocalizedComponent {
el: HTMLCalciteMenuItemElement;
/** When `true`, the component is highlighted. */
active: boolean;
/** When `true`, the component displays a breadcrumb trail for use as a navigational aid. */
breadcrumb: boolean;
/** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/
href: string;
/** Specifies an icon to display at the end of the component. */
iconEnd: string;
/** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
iconFlipRtl: FlipContext;
/** Specifies an icon to display at the start of the component. */
iconStart: string;
/**
* @internal
*/
isTopLevelItem: boolean;
/** Accessible name for the component.*/
label: string;
/**
* @internal
*/
layout: Layout;
/**
* Use this property to override individual strings used by the component.
*/
messageOverrides: Partial<MenuItemMessages>;
onMessagesChange(): void;
/**
* Made into a prop for testing purposes only.
*
* @internal
*/
messages: MenuItemMessages;
/** When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.*/
open: boolean;
/**
* Defines the relationship between the `href` value and the current document.
*
* @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
*/
rel: string;
/**
* Specifies where to open the linked document defined in the `href` property.
*
* @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
*/
target: string;
/** Specifies the text to display.*/
text: string;
/**
* @internal
*/
topLevelMenuLayout: Layout;
defaultMessages: MenuItemMessages;
effectiveLocale: string;
effectiveLocaleChange(): void;
hasSubmenu: boolean;
submenuItems: HTMLCalciteMenuItemElement[];
anchorEl: HTMLAnchorElement;
dropdownActionEl: HTMLCalciteActionElement;
isFocused: boolean;
/** Sets focus on the component. */
setFocus(): Promise<void>;
/** @internal */
calciteInternalMenuItemKeyEvent: EventEmitter<MenuItemCustomEvent>;
/** Emits when the component is selected.*/
calciteMenuItemSelect: EventEmitter<void>;
handleClickOut(event: Event): void;
handleFocusOut(event: FocusEvent): void;
connectedCallback(): void;
componentWillLoad(): Promise<void>;
componentDidLoad(): void;
disconnectedCallback(): void;
private blurHandler;
private clickHandler;
private focusHandler;
private handleMenuItemSlotChange;
private keyDownHandler;
private selectMenuItem;
renderIconStart(): VNode;
renderIconEnd(): VNode;
renderBreadcrumbIcon(dir: Direction): VNode;
renderDropdownIcon(dir: Direction): VNode;
renderDropdownAction(dir: Direction): VNode;
renderSubmenuItems(dir: Direction): VNode;
renderItemContent(dir: Direction): VNode;
render(): any;
}
export {};