pyro/dist/textfield/textfield.d.ts

Pyro custom elements

import { LitElement } from 'lit';
/**
 * Textfield element
 *
 * ```html
 * <pyro-textfield type="text" state="success" clearable
 * placeholder="place" severity="success"></pyro-textfield>
 * ```
 *
 * @tag pyro-textfield
 * [docs](https://pyrojs.com/el/textfield)
 *
 * @event {InputEvent} input - emitted when the value changes
 *
 * @slot action - Space for icon-like action inside the textfield, like a custom `clearable`
 *
 * @cssprop [--pyro-textfield-text-color=var(--pyro-text-color)] - `color`
 * @cssprop [--pyro-textfield-surface-color=var(--pyro-surface-color)] - `background`
 * @cssprop [--pyro-textfield-border=var(--pyro-border)] - `border`
 * @cssprop [--pyro-textfield-border-radius=var(--pyro-border-radius)] - `border-radius`
 * @cssprop [--pyro-textfield-min-width=var(--pyro-fields-min-width)] - `min-width`
 * @cssprop [--pyro-textfield-spacing=var(--pyro-spacing)] - `padding`
 * @cssprop [--pyro-textfield-font-size=var(--pyro-font-size)] - `font-size`
 * @cssprop [--pyro-textfield-caption-text-color, inherit] - `color`
 * @cssprop [--pyro-textfield-info-color=var(--pyro-info-color)] - `color`
 * @cssprop [--pyro-textfield-success-color=var(--pyro-success-color)] - `color`
 * @cssprop [--pyro-textfield-warning-color=var(--pyro-warning-color)] - `color`
 * @cssprop [--pyro-textfield-error-color=var(--pyro-error-color)] - `color`
 * @cssprop [--pyro-textfield-disabled-color=var(--pyro-disabled-color)] - disabled `background`
 */
export declare class PyroTextfield extends LitElement {
    static styles: import('lit').CSSResult;
    /** Type of the input, or 'textarea'  */
    type: 'text' | 'textarea' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
    /** Value of the input */
    value: string;
    /** Caption below the textfield, for description or errors */
    caption?: string | undefined;
    /** State and color of the textfield */
    state?: 'info' | 'success' | 'warning' | 'error' | '';
    /** Placeholder */
    placeholder?: string;
    /** Required */
    required?: boolean;
    /** Disabled */
    disabled?: boolean;
    /** Clearable */
    clearable?: boolean;
    autocomplete?: any;
    form?: string;
    maxlength?: number;
    minlength?: number;
    name?: string;
    readonly?: boolean;
    pattern?: string;
    /**
     * A listener outside the shadow dom will access e.target.value
     * where target will be pyro-input, thus the value is missing.
     * This with reflects: true will make the value available on pyro-input
     */
    handleInput(event: InputEvent): void;
    clear: () => void;
    render(): import('lit-html').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'pyro-textfield': PyroTextfield;
    }
}