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

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

import { type PartialWithUndefined } from '@augment-vir/common';
import { type ViraIconSvg } from '../icons/index.js';
export * from '../util/shared-text-input-logic.js';
/**
 * Input types for {@link ViraInput}.
 *
 * @category Internal
 */
export declare enum ViraInputType {
    Default = "text",
    Password = "password",
    Email = "email",
    Number = "number"
}
/**
 * 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/vira/book/elements/vira-input
 */
export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", PartialWithUndefined<{
    icon: Pick<ViraIconSvg, "svgTemplate">;
    /** A suffix that, if provided, is shown following the input field. */
    suffix: string;
    /** A label that is shown above the input, if provided. */
    label: string;
    /** If true, applies error styling. */
    hasError: boolean;
    showClearButton: boolean;
    type: ViraInputType;
}> & {
    value: string;
} & PartialWithUndefined<{
    placeholder: string;
    disabled: boolean;
    isReadonly: boolean;
    allowedInputs: string | RegExp;
    blockedInputs: string | RegExp;
    disableBrowserHelps: boolean;
    fitText: boolean;
    attributePassthrough: import("element-vir").AttributeValues;
}>, {
    forcedInputWidth: number;
    showPassword: boolean;
    /**
     * Used to couple the label and input together. This is not applied if no label is
     * provided.
     */
    randomId: string;
}, {
    /**
     * 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-error", "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly [], readonly []>;