vira/dist/elements/vira-input.element.d.ts

A simple and highly versatile design system using element-vir.

import { type ViraIconSvg } from '../icons/index.js';
import { type SharedTextInputElementInputs } from './shared-text-input-logic.js';
export * from './shared-text-input-logic.js';
/**
 * Input types for {@link ViraInput}.
 *
 * @category Internal
 */
export declare enum ViraInputType {
    Default = "text",
    Password = "password",
    Email = "email"
}
/**
 * A single line input element with all listeners properly attached. Multiple types are allowed with
 * {@link ViraInputType}.
 *
 * @category Input
 * @category Elements
 * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-input
 */
export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", {
    icon?: undefined | Pick<ViraIconSvg, "svgTemplate">;
    /** A suffix that, if provided, is shown following the user input field. */
    suffix?: string | undefined;
    showClearButton?: boolean | undefined;
    type?: ViraInputType;
} & SharedTextInputElementInputs, {
    forcedInputWidth: number;
    showPassword: boolean;
}, {
    /**
     * Fires whenever a user input created a new value. Does not fire if all input letters are
     * filtered out due to input restrictions.
     */
    valueChange: import("element-vir").DefineEvent<string>;
    /**
     * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
     * the user why their input did not propagate if it was blocked. This does not fire for text
     * that was blocked out of programmatic "value" property assignments.
     */
    inputBlocked: import("element-vir").DefineEvent<string>;
}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly []>;