igniteui-webcomponents/components/mask-input/mask-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 { MaskInputValueMode } from '../types.js';
import { IgcMaskInputBaseComponent, type MaskSelection } from './mask-input-base.js';
/**
 * A masked input is an input field where a developer can control user input and format the visible value,
 * based on configurable rules
 *
 * @element igc-mask-input
 *
 * @slot prefix - Renders content before the input
 * @slot suffix - Renders content after the input
 * @slot helper-text - Renders content below the input
 * @slot value-missing - Renders content when the required validation fails.
 * @slot bad-input - Renders content when a required mask pattern validation fails.
 * @slot custom-error - Renders content when setCustomValidity(message) is set.
 * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
 *
 * @fires igcInput - Emitted when the control receives user input
 * @fires igcChange - Emitted when an alteration of the control's value is committed by the user
 *
 * @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 IgcMaskInputComponent extends IgcMaskInputBaseComponent {
    static readonly tagName = "igc-mask-input";
    static register(): void;
    protected get __validators(): import("../common/validators.js").Validator<IgcMaskInputComponent>[];
    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<string>;
    protected get _isRawMode(): boolean;
    /**
     * Dictates the behavior when retrieving the value of the control:
     *
     * - `raw` will return the clean user input.
     * - `withFormatting` will return the value with all literals and prompts.
     *
     * @attr value-mode
     * @default 'raw'
     */
    valueMode: MaskInputValueMode;
    /**
     * The value of the input.
     *
     * Regardless of the currently set `value-mode`, an empty value will return an empty string.
     *
     * @attr
     */
    set value(string: string);
    get value(): string;
    /**
     * The masked pattern of the component.
     *
     * @attr
     * @default 'CCCCCCCCCC'
     */
    set mask(value: string);
    get mask(): string;
    /**
     * The prompt symbol to use for unfilled parts of the mask pattern.
     *
     * @attr
     * @default '_'
     */
    set prompt(value: string);
    get prompt(): string;
    protected _handleDragEnter(): void;
    protected _handleDragLeave(): void;
    protected _handleFocus(): Promise<void>;
    protected _handleBlur(): void;
    protected _handleChange(): void;
    protected _restoreDefaultValue(): void;
    protected _updateInput(text: string, { start, end }: MaskSelection): Promise<void>;
    protected _updateSetRangeTextValue(): void;
    private _updateMaskedValue;
    protected renderInput(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-mask-input': IgcMaskInputComponent;
    }
}