import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { CSSResultGroup } from 'lit';
import { default as CxMenu } from '../menu/menu';
import { default as CxPopup } from '../popup/popup';

/**
 * @summary Dropdowns expose additional content that "drops down" in a panel.
 *
 * @description Dropdowns consist of a trigger and a panel. By default, activating the trigger
 * will expose the panel and interacting outside of the panel will close it. </br>
 * Dropdowns are designed to work well with [menus](?s=atoms&id=/menu) to provide a list of options
 * the user can select from. However, dropdowns can also be used in lower-level applications
 * (e.g. [color picker](?s=atoms&id=/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.
 *
 * @slot (default) - The dropdown's main content.
 * @slot trigger - The dropdown's trigger, usually a `<cx-button>` element.
 *
 * @event cx-show - Emitted when the dropdown opens.
 * @event cx-after-show - Emitted after the dropdown opens and all animations are complete.
 * @event cx-hide - Emitted when the dropdown closes.
 * @event cx-after-hide - Emitted after the dropdown closes and all animations are complete.
 *
 * @csspart base - The component's base wrapper.
 * @csspart trigger - The container that wraps the trigger.
 * @csspart panel - The panel that gets shown when the dropdown is open.
 *
 * @animation dropdown.show - The animation to use when showing the dropdown.
 * @animation dropdown.hide - The animation to use when hiding the dropdown.
 *
 * @cssproperty [--max-height=var(--auto-size-available-height)] - The max height of the dropdown panel. If it is larger than the available height, the available height will take precedence.
 * @cssproperty [--trigger-display=block] - `display` value for the trigger slot wrapper (e.g. `flex` for stretched triggers).
 */
export default class CxDropdown extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-popup': typeof CxPopup;
    };
    popup: CxPopup;
    trigger: HTMLSlotElement;
    panel: HTMLSlotElement;
    private readonly localize;
    private readonly hasSlotController;
    private closeWatcher;
    /**
     * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
     * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
     */
    open: boolean;
    /**
     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
     * inside of the viewport.
     */
    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
    /** Disables the dropdown so the panel will not open. */
    disabled: boolean;
    /**
     * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
     * dropdowns that allow for multiple interactions.
     */
    stayOpenOnSelect: boolean;
    /**
     * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
     * components that use a dropdown internally.
     */
    containingElement?: HTMLElement;
    /** The distance in pixels from which to offset the panel away from its trigger. */
    distance: number;
    /** The distance in pixels from which to offset the panel along its trigger. */
    skidding: number;
    /**
     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /**
     * Syncs the popup width or height to that of the trigger element.
     */
    sync: 'width' | 'height' | 'both' | undefined;
    /**
     * The factor by which to multiply the available width when using `auto-size`. E.g: Set to 0.5 to
     * make the popup half the width of the available space.
     */
    autoWidthFactor: number;
    /**
     * Override the default keydown navigation behavior of the dropdown menu.
     */
    ignoredKeys: string[];
    /**
     * Enable this option to disable flip behavior of the cx-popup.
     */
    noFlip: boolean;
    /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
    flipPadding: number;
    constructor();
    connectedUpdatedCallback(): void;
    disconnectedCallback(): void;
    focusOnTrigger(): void;
    getMenu(): CxMenu | undefined;
    private handleKeyDown;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private handlePanelSelect;
    handleTriggerClick(): Promise<void>;
    handleTriggerKeyDown(event: KeyboardEvent): Promise<void>;
    handleTriggerKeyUp(event: KeyboardEvent): void;
    handleTriggerSlotChange(): void;
    updateAccessibleTrigger(): void;
    blurTrigger(): void;
    /** Shows the dropdown panel. */
    show(): Promise<void>;
    /** Hides the dropdown panel */
    hide(): Promise<void>;
    /**
     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
     * is activated.
     */
    reposition(): void;
    addOpenListeners(): void;
    removeOpenListeners(): void;
    handleOpenChange(): Promise<void>;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-dropdown': CxDropdown;
    }
}
