UNPKG

pyro

Version:
65 lines (64 loc) 2.22 kB
import { LitElement } from 'lit'; /** * Select element * [docs](https://pyrojs.com/el/select) * * ```html * <pyro-select summary="Continent" value="europe" open> * <pyro-select-item label="Africa" value="africa"></pyro-select-item> * <pyro-select-item label="Asia" value="asia"></pyro-select-item> * <pyro-select-item label="Europe" value="europe"></pyro-select-item> * </pyro-select> * ``` * * @tag pyro-select * * @event {InputEvent} input - emitted when the value changes * * @slot - `pyro-select-item`s or elements containing `pyro-select-item`s * @slot icon - icon to the end of the select to indicate opening/closing * * @cssprop [--pyro-select-text-color=var(--pyro-text-color)] - `color` * @cssprop [--pyro-select-surface-color=var(--pyro-surface-color)] - `background` * @cssprop [--pyro-select-border=var(--pyro-border)] - `border` * @cssprop [--pyro-select-border-radius=var(--pyro-border-radius)] - `border-radius` * @cssprop [--pyro-select-spacing=var(--pyro-spacing)] - `padding` * @cssprop [--pyro-select-font-size=var(--pyro-font-size)] - `font-size` * @cssprop [--pyro-select-min-width=var(--pyro-fields-min-width)] - `min-width` * @cssprop [--pyro-select-max-height=240px] - `max-height` * @cssprop [--pyro-select-text-align=left] - text alignment for selected/button `text-align` * */ export declare class PyroSelect extends LitElement { static styles: import('lit').CSSResult; /** Current value */ value: string; /** Label when no value is selected, placeholder */ 'default-label': string; /** Disabled */ disabled: boolean; label: string; private handleSelect; _listItems: Array<HTMLElement & { value: string; label: string; }>; private getChildrenData; allData: { value: string; label: string; }[]; private getCurrentLabel; private toggleOpen; _handleOutsideClick: (e: Event) => void; connectedCallback(): void; disconnectedCallback(): void; firstUpdated(): void; render(): import('lit-html').TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'pyro-select': PyroSelect; } } export * from './select-item';