pyro
Version: 
Pyro custom elements
65 lines (64 loc) • 2.22 kB
TypeScript
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';