wj-elements/dist/packages/wje-dropdown/dropdown.element.d.ts

WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.

import { default as WJElement } from '../wje-element/element.js';
import { default as Popup } from '../wje-popup/popup.element.js';
/**
 * `Dropdown` is a custom element that displays a dropdown menu.
 * @summary This element represents a dropdown menu.
 * @documentation https://elements.webjet.sk/components/dropdown
 * @status stable
 * @augments {WJElement}
 * @csspart native - The native part of the dropdown.
 * @slot trigger - The slot for the trigger of the dropdown.
 * @slot - The default slot for the dropdown.
 * // @fires wje-dropdown:open - Event fired when the dropdown is opened.
 * // @fires wje-dropdown:close - Event fired when the dropdown is closed.
 * @tag wje-dropdown
 */
export default class Dropdown extends WJElement {
    static _instanceId: number;
    /**
     * Getter for the CSS stylesheet.
     * @returns {string[]}
     */
    static get observedAttributes(): string[];
    _instanceId: number;
    /**
     * The placement of the dropdown.
     * @type {{"wje-popup": Popup}}
     */
    dependencies: {
        "wje-popup": Popup;
    };
    /**
     * Sets or removes the 'portaled' attribute on the element.
     * When the value is truthy, the attribute 'portaled' is added to the element.
     * When the value is falsy, the attribute 'portaled' is removed from the element.
     * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.
     */
    set portaled(value: boolean);
    /**
     * Getter method for the `portaled` property.
     * Checks if the `portaled` attribute is present on the element.
     * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.
     */
    get portaled(): boolean;
    /**
     * Checks whether the element has the 'portaled' attribute.
     * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.
     */
    get isPortaled(): boolean;
    /**
     * Sets the placement of the dropdown.
     * @param value
     */
    set trigger(value: string | string);
    /**
     * Gets the placement of the dropdown.
     * @returns {string|string}
     */
    get trigger(): string | string;
    /**
     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
     * @param {Event} e The event object.
     */
    otherDropdownOpennedCallback: (e: Event) => void;
    /**
     * Removes the popup element.
     */
    beforeDraw(): void;
    popup: HTMLElement;
    /**
     * Draws the dropdown element and returns the created document fragment.
     * @returns {DocumentFragment}
     */
    draw(): DocumentFragment;
    anchorSlot: HTMLSlotElement;
    /**
     * Adds event listeners for the mouseenter and mouseleave events.
     */
    afterDraw(): void;
    onSlotChange: () => void;
    /**
     * Handles popup hide events and closes only the dropdown that owns the popup.
     * This prevents nested dropdowns from collapsing their parent dropdown when the
     * child popup is hidden.
     * @param {Event} e The popup hide event.
     */
    popupHideCallback: (e: Event) => void;
    /**
     * Assigns the current dropdown instance as the owner of its popup layers.
     * Owner metadata is later used to resolve which dropdown should react to
     * delegated menu-item clicks, including portaled popup content.
     */
    syncPopupOwner(): void;
    /**
     * Recursively assigns owner metadata to the dropdown content subtree while
     * leaving nested dropdown roots untouched, so each nested dropdown can keep
     * its own ownership boundary.
     * @param {HTMLElement} [root] The subtree root whose children should inherit this dropdown owner. Defaults to the current dropdown.
     */
    syncOwnedContentOwner(root?: HTMLElement): void;
    /**
     * Resolves the dropdown that owns a clicked menu item. The lookup prefers
     * explicit owner metadata and falls back to DOM traversal so both regular
     * and portaled dropdown content can be scoped correctly.
     * @param {EventTarget[]} path The composed event path.
     * @param {HTMLElement} item The clicked menu item element.
     * @returns {HTMLElement|null} The owning dropdown element or null when it cannot be resolved.
     */
    getMenuItemOwner(path: EventTarget[], item: HTMLElement): HTMLElement | null;
    /**
     * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.
     * This works even when the menu is portaled, because we rely on the composed path.
     */
    onMenuItemClick: (e: any) => void;
    /**
     * @summary Toggles the dropdown element between active and inactive states.
     * Calls the `onOpen` method if the element is currently inactive,
     * and calls the `onClose` method if the element is currently active.
     * @param {Event} e The event object.
     */
    toggleCallback: (e: Event) => void;
    /**
     * @summary Returns the content to be displayed before showing the dropdown.
     * @returns {any} The content to be displayed.
     */
    beforeShow(): any;
    /**
     * This method is called after the dropdown is shown.
     */
    afterShow(): void;
    /**
     * Open the popup element.
     * @param {object} e
     */
    onOpen: (e: object) => void;
    beforeClose: () => void;
    afterClose: () => void;
    onClose: () => void;
    /**
     * Syncs ARIA attributes for the trigger element.
     */
    syncAria(): void;
    #private;
}