import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
import { LuzmoElement } from '../../utils/base';
import { IconDefinition } from '@luzmo/icons';
import './../progress-circle';
import { LuzmoOption } from './option';
import './options-divider';
export type OptionValue = {
    divider?: false;
    label?: string;
    description?: string;
    value?: string | number;
    icon?: IconDefinition;
    imgSrc?: string;
    shortLabel?: string;
    disabled?: boolean;
    selected?: boolean;
    children?: OptionValue[];
};
/**
 * @internal
 * Extended option type used internally for flattened rendering of hierarchical options.
 */
export type FlatOptionValue = OptionValue & {
    _isChild?: boolean;
    _parentValue?: string | number;
};
export type OptionIconRenderer = (option: OptionValue, ctx: {
    size: string;
}) => TemplateResult | null;
export declare const VIRTUALIZE_AS_OF_NUM_ITEMS = 25;
declare const LuzmoOptions_base: typeof LuzmoElement & {
    new (...args: any[]): import("../..").SizedElementInterface;
    prototype: import("../..").SizedElementInterface;
};
/**
 * @element luzmo-options
 *
 * @slot - option items to be listed in the options menu
 * @fires change - Announces that the `value` of the element has changed
 * @fires luzmo-scrolled - Announces that the user has scrolled within the options menu. Only fires when the options menu is virtualized.
 * @fires luzmo-exceeded-top - Announces that the `arrowUp` key has been pressed and the top of the options menu has been exceeded
 * @fires luzmo-exceeded-bottom - Announces that the `arrowDown` key has been pressed and the bottom of the options menu has been exceeded
 * @attr size - The size of the options menu: `s`, `m`, `l` or `xl`
 */
export declare class LuzmoOptions extends LuzmoOptions_base {
    /**
     * @internal
     */
    static get styles(): CSSResultArray;
    /**
     * @attr label - The label of the options menu. This is used to set the aria-label of the options menu.
     * @type {string}
     * @default ''
     */
    label: string;
    /**
     * @attr variant - The type of visual selection: `checkmarks`, `checkboxes`, `highlight`
     * @default 'highlight'
     */
    variant?: 'checkmarks' | 'checkboxes' | 'highlight';
    /**
     * @attr selects - The type of selection that the options menu supports.
     * `single` allows only one descendent to be selected at a time.
     * `multiple` allows many descendants to be selected.
     * @default 'single'
     */
    selects: 'single' | 'multiple';
    /**
     * @attr emphasized - If true it adds a emphasized style to the selected options.
     * @default false
     */
    emphasized: boolean;
    /**
     * @attr pending - If true it adds a pending state to the options menu at the bottom of the list.
     * This is useful when the options are being loaded asynchronously.
     * @default false
     */
    pending: boolean;
    /**
     * options - The options to be listed in the options menu
     * OptionValue is an object with the following properties:
     * - label: string
     * - value: string | number | null
     * - disabled: boolean
     * - divider: boolean
     * - icon: IconDefinition
     * - imgSrc: string
     * @type {OptionValue[]}
     * @default []
     */
    options: OptionValue[];
    /**
     * @attr no-wrap - Whether the text in the option childs should wrap
     * @default false
     */
    noWrap?: boolean;
    /**
     * value - The value of the selected options
     * @type {string | number | null}
     * @default []
     */
    value: (string | number | null)[];
    /**
     * Optional icon renderer callback for option icon area.
     * When it returns null, default icon rendering is used.
     */
    optionIconRenderer?: OptionIconRenderer;
    /**
     * @internal
     */
    virtualizer: LitVirtualizer;
    /**
     * @internal
     */
    visibleOptionElements: LuzmoOption[];
    /**
     * The index of the item that is currently focused
     * @internal
     */
    focusedOptionIndex: number;
    /**
     * promise that resolves when the option elements have been updated
     * @internal
     */
    protected optionElementsUpdated: Promise<unknown[]>;
    /**
     * @internal
     */
    private _selectedOptions;
    /**
     * @internal
     */
    private _firstVisibleIndex;
    /**
     * Tracks which parent options are currently expanded (by value).
     * @internal
     */
    private _expandedValues;
    /**
     * Returns a flattened list of options where expanded parents have their children
     * injected immediately after them. Used for rendering and keyboard navigation.
     * @internal
     */
    private get _flattenedOptions();
    /**
     * Returns true if the maximum possible options count (all children expanded)
     * exceeds the virtualization threshold. Uses the total potential count so that
     * expanding/collapsing parents does not toggle the rendering strategy.
     * @internal
     */
    private get _flatVirtualizeActive();
    /**
     * Toggles the expand/collapse state of a parent option.
     * @internal
     */
    private toggleExpand;
    constructor();
    protected firstUpdated(changed: PropertyValues): void;
    protected willUpdate(changes: PropertyValues<this>): void;
    protected updated(changes: PropertyValues<this>): void;
    protected getUpdateComplete(): Promise<boolean>;
    focus({ preventScroll }?: FocusOptions): void;
    private _removeFocusedPropertyOnOptions;
    scrollToTop(): void;
    handleFocusin(): void;
    handleBlur(event: FocusEvent): void;
    startListeningToKeyboard(): void;
    stopListeningToKeyboard(): void;
    handleKeydown(event: KeyboardEvent): void;
    protected navigateWithinOptions(event: KeyboardEvent, optionElement?: LuzmoOption): void;
    focusOptionByOffset(offset: number, optionElement?: LuzmoOption, scrollIntoView?: boolean): LuzmoOption | undefined;
    updateSelectedItemIndex(): void;
    protected setSelectedOptionsFromValue(): void;
    protected visibilityChanged(event: {
        first?: number;
        last?: number;
    }): void;
    protected rangeChange(event: any): void;
    private toggleOption;
    protected handleOptionClick(option: OptionValue, event: Event): void;
    /**
     * Handles click on an expandable parent option.
     * @internal
     */
    protected handleExpandClick(option: OptionValue): void;
    render(): TemplateResult;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private prepareToCleanUp;
    private updateItemFocus;
    private setFocusedAndActiveDescendant;
}
export {};