import { ComponentInterface } from '../../stencil-public-runtime'; /** * @name Dropdown * @category Display * @summary Use for menus of contextual actions triggered by a button click. * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type="custom"` to use the control slot. * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown. * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown. */ export declare class Q2Dropdown implements ComponentInterface { controlElement?: HTMLQ2BtnElement; dropdownItemSelector: string; optionList: HTMLQ2OptionListElement; optionSelector: string; popoverElement?: HTMLQ2PopoverElement; hostElement: HTMLElement; additionalContext: string; /** @deprecated Use 'popoverAlignment' instead */ alignment: 'left' | 'right'; /** @deprecated */ ariaLabel: string; /** If `true`, component expands to fill the width of its parent element. */ block: boolean; /** * Tells the outlet what the type of object being passed in as contextValue. * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown. * * @info * Only applicable when using `` for outlets. */ context: string; /** * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type). * * @info * Only applicable when using `` for outlets. */ contextValue: string; /** Indicates the menu cannot be focused or interacted with. */ disabled: boolean; /** If `true`, it takes up 100% width. */ fullWidth: boolean; /** * Hides the dropdown's label text from view. * @warning * Hides the label visually. `label` text is still required for screenreader compliance. */ hideLabel: boolean; /** * Instructs the component to use the action sheet workflow for displaying its options. * * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/). */ hoist: boolean; /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */ icon: string; /** * The text that appears within the button. * @warning * Required for screen reader compliance even when `hideLabel` is `true`. * @localizable */ label: string; /** * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`. * @info * Only applicable when using `` for outlets. */ name: string; /** * Determine whether the popover is open or closed. * * @readonly */ open: boolean; /** Determines the label that is applied to the option list for accessibility purposes. */ optionListLabel: string; /** @deprecated */ popDirection: 'up' | 'down'; /** Aligns the popover dropdown to the left or right side of the input field. */ popoverAlignment: 'left' | 'right'; /** * Force the direction of the popover dropdown when it opens. * If no value is passed, the component will auto-detect the direction based on available space. */ popoverDirection: 'up' | 'down'; /** * Force the maximum height of the popover. This value will be interpreted as pixels. * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space. */ popoverMaxHeight: number; /** @deprecated */ popoverMinHeight: number; /** * Determines the display mode of the popover. * * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning. * * @info * This is a temporary solution to work around styling issues related to using fixed positioning for the popover * when nested inside of elements with transform properties. This will be removed once the popover API is available * for use. */ popoverMode: 'legacy'; /** * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context. * @info * Only applicable when using `` for outlets. */ resolvedType: string; /** The type of button used as the menu toggle. * @info * Type must be "custom" to use the custom button slot. */ type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral'; componentWillLoad(): void; componentDidLoad(): void; delegateFocus(event: FocusEvent): void; popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean; }>): void; /** * Gets the outerHTML for top/bottom slotted elements. */ _getSlotsHtml(): Promise<{ slot: string; html: string; }[]>; /** * Emulates clicking the dropdown `