export class AuroMenuOption extends AuroElement {
/**
* This will register this element with the browser.
* @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
*
* @example
* AuroMenuOption.register("custom-menuoption") // this will register this element to
*
*/
static register(name?: string): void;
static get properties(): {
/**
* When true, disables the menu option.
*/
disabled: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* @private
*/
event: {
type: StringConstructor;
reflect: boolean;
};
/**
* @private
*/
layout: {
type: StringConstructor;
};
/**
* Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used.
*/
key: {
type: StringConstructor;
reflect: boolean;
};
/**
* @private
*/
menuService: {
type: ObjectConstructor;
state: boolean;
};
/**
* @private
*/
matchWord: {
type: StringConstructor;
state: boolean;
};
/**
* @private
*/
noCheckmark: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* Specifies that an option is selected.
*/
selected: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* Specifies the tab index of the menu option.
*/
tabIndex: {
type: NumberConstructor;
reflect: boolean;
};
/**
* Specifies the value to be sent to a server.
*/
value: {
type: StringConstructor;
reflect: boolean;
};
};
static get styles(): import("lit").CSSResult[];
/**
* Returns whether the menu option is currently active and selectable.
* An option is considered active if it is not hidden, not disabled, and not static.
* @returns {boolean} True if the option is active, false otherwise.
*/
get isActive(): boolean;
/**
* @private
*/
private shape;
/**
* @private
*/
private size;
iconTag: any;
selected: boolean;
noCheckmark: boolean;
disabled: boolean;
/**
* @private
*/
private runtimeUtils;
menuService: any;
unsubscribe: any;
/**
* Handles changes from the menu service and updates the option's state.
* This function synchronizes the option's properties and selection/highlight state with menu events.
* @param {Object} event - The event object from the menu service.
*/
handleMenuChange(event: any): void;
_contextConsumer: ContextConsumer, this>;
key: any;
firstUpdated(): void;
updated(changedProperties: any): void;
/**
* Sets up event listeners for user interaction with the menu option.
* This function enables click and mouse enter events to trigger selection and highlighting logic.
*/
bindEvents(): void;
/**
* Attaches this menu option to a menu service and subscribes to its events.
* This method enables the option to participate in menu selection and highlighting logic.
* @param {Object} service - The menu service instance to attach to.
*/
attachTo(service: any): void;
active: boolean;
/**
* Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
* This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
* @param {boolean} isSelected - Whether the option should be marked as selected.
*/
setInternalSelected(isSelected: boolean): void;
internalUpdateInProgress: boolean;
/**
* Sets the selected state of the menu option.
* This function updates whether the option is currently selected.
* @param {boolean} isSelected - Whether the option should be marked as selected.
* @deprecated Simply modify the `selected` property directly instead.
*/
setSelected(isSelected: boolean): void;
/**
* Updates the active state and visual highlighting of the menu option.
* This function toggles the option's active status and applies or removes the active CSS class.
* @param {boolean} isActive - Whether the option should be marked as active.
* @deprecated Simply modify the `active` property directly instead.
*/
updateActive(isActive: boolean): void;
/**
* Updates the CSS class for the menu option based on its active state.
* This function adds or removes the 'active' class to visually indicate the option's active status.
* @private
*/
private updateActiveClasses;
/**
* Updates the visual highlighting of text within the menu option based on the current match word.
* This function highlights matching text segments and manages nested spacers for display formatting.
* @private
*/
private updateTextHighlight;
/**
* Handles click events on the menu option, toggling its selected state.
* This function dispatches a click event and updates selection if the option is not disabled.
* @private
*/
private handleClick;
/**
* Handles mouse enter events to highlight the menu option.
* This function updates the menu service to set this option as the currently highlighted item if not disabled.
* @private
*/
private handleMouseEnter;
/**
* Dispatches custom events defined for this menu option.
* This function notifies listeners when a custom event is triggered by the option.
* @private
*/
private handleCustomEvent;
/**
* Dispatches a click event for this menu option.
* This function notifies listeners that the option has been clicked.
* @private
*/
private dispatchClickEvent;
/**
* Generates an HTML element containing an SVG icon based on the provided `svgContent`.
*
* @private
* @param {string} svgContent - The SVG content to be embedded.
* @returns {Element} The HTML element containing the SVG icon.
*/
private generateIconHtml;
/**
* Logic to determine the layout of the component.
* @protected
* @returns {void}
*/
protected renderLayout(): void;
}
import { AuroElement } from "../../layoutElement/src/auroElement.js";
import { ContextConsumer } from '@lit/context';