igniteui-webcomponents/components/input/input.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import type { RangeTextSelectMode } from '../types.js';
import { IgcInputBaseComponent } from './input-base.js';
/**
 * @element igc-input
 *
 * @slot prefix - Renders content before the input.
 * @slot suffix - Renders content after input.
 * @slot helper-text - Renders content below the input.
 *
 * @fires igcInput - Emitted when the control input receives user input.
 * @fires igcChange - Emitted when the control's checked state changes.
 *
 * @csspart container - The main wrapper that holds all main input elements.
 * @csspart input - The native input element.
 * @csspart label - The native label element.
 * @csspart prefix - The prefix wrapper.
 * @csspart suffix - The suffix wrapper.
 * @csspart helper-text - The helper text wrapper.
 */
export default class IgcInputComponent extends IgcInputBaseComponent {
    static readonly tagName = "igc-input";
    static register(): void;
    private get isStringType();
    protected get __validators(): import("../common/validators.js").Validator<IgcInputComponent>[];
    protected _value: string;
    /**
     * The value of the control.
     * @attr
     */
    set value(value: string);
    get value(): string;
    /**
     * The type attribute of the control.
     * @attr
     */
    type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
    /**
     * The input mode attribute of the control.
     * See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
     * @attr inputmode
     */
    inputMode: string;
    /**
     * The pattern attribute of the control.
     * @attr
     */
    pattern: string;
    /**
     * The minimum string length required by the control.
     * @attr minlength
     */
    minLength: number;
    /**
     * The maximum string length of the control.
     * @attr maxlength
     */
    maxLength: number;
    /**
     * The min attribute of the control.
     * @attr
     */
    min: number | string;
    /**
     * The max attribute of the control.
     * @attr
     */
    max: number | string;
    /**
     * The step attribute of the control.
     * @attr
     */
    step: number;
    /**
     * The autofocus attribute of the control.
     * @attr
     */
    autofocus: boolean;
    /**
     * The autocomplete attribute of the control.
     * @attr
     */
    autocomplete: string;
    /**
     * Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for
     * string-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.
     *
     * @attr validate-only
     */
    validateOnly: boolean;
    /**
     * @internal
     */
    tabIndex: number;
    protected constraintsChanged(): void;
    /** @hidden */
    connectedCallback(): void;
    /** Replaces the selected text in the input. */
    setRangeText(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void;
    /** Selects all text within the input. */
    select(): void;
    /** Increments the numeric value of the input by one or more steps. */
    stepUp(n?: number): void;
    /** Decrements the numeric value of the input by one or more steps. */
    stepDown(n?: number): void;
    private handleInput;
    private handleChange;
    protected handleFocus(): void;
    protected handleBlur(): void;
    protected renderInput(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-input': IgcInputComponent;
    }
}