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';