vira/dist/elements/vira-dropdown.element.d.ts

A simple and highly versatile design system using element-vir.

import { type PartialWithUndefined } from '@augment-vir/common';
import { type ViraIconSvg } from '../icons/icon-svg.js';
import { type ShowPopUpResult } from '../util/pop-up-manager.js';
import { type MenuItem } from './pop-up/pop-up-menu-item.js';
import { HorizontalAnchor } from './pop-up/vira-pop-up-trigger.element.js';
/**
 * Test ids for {@link ViraDropdown}.
 *
 * @category Internal
 */
export declare const viraDropdownTestIds: {
    trigger: string;
    icon: string;
    prefix: string;
};
/**
 * A dropdown element that uses pop-up menus.
 *
 * @category Dropdown
 * @category Elements
 * @see https://electrovir.github.io/element-vir/vira/book/elements/dropdown/vira-dropdown
 */
export declare const ViraDropdown: import("element-vir").DeclarativeElementDefinition<"vira-dropdown", {
    options: ReadonlyArray<Readonly<MenuItem>>;
    /** The selected id from the given options. */
    selected: ReadonlyArray<PropertyKey>;
} & PartialWithUndefined<{
    /** Text to show if nothing is selected. */
    placeholder: string;
    /**
     * If false, this will behave like a single select dropdown, otherwise you can select
     * multiple.
     */
    isMultiSelect: boolean;
    icon: ViraIconSvg;
    selectionPrefix: string;
    isDisabled: boolean;
    /** For debugging purposes only. Very bad for actual production code use. */
    z_debug_forceOpenState: boolean;
    /**
     * - `HorizontalAnchor.Left`: dropdown is anchored to the left side of the trigger and the
     *   dropdown can grow to the right.
     * - `HorizontalAnchor.Right`: dropdown is anchored to the right side of the trigger and the
     *   dropdown can grow to the left.
     * - `HorizontalAnchor.Both`: dropdown is anchored on both sides of the trigger and cannot
     *   grow beyond it. (This is the default experience.)
     *
     * @default HorizontalAnchor.Both
     */
    horizontalAnchor: HorizontalAnchor;
}>, {
    /** `undefined` means the pop up is not currently showing. */
    showPopUpResult: ShowPopUpResult | undefined;
}, {
    selectedChange: import("element-vir").DefineEvent<PropertyKey[]>;
    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
}, "vira-dropdown-", "vira-dropdown-", readonly []>;