@trendyol/baklava/dist/components/input/bl-input.d.ts

Trendyol Baklava Design System

import { CSSResultGroup, LitElement, TemplateResult, PropertyValues } from "lit";
import "element-internals-polyfill";
import "../button/bl-button";
import "../icon/bl-icon";
import { BaklavaIcon } from "../icon/icon-list";
export declare type InputType = "text" | "email" | "date" | "time" | "datetime-local" | "month" | "week" | "password" | "number" | "tel" | "url" | "search";
export declare type InputSize = "small" | "medium" | "large";
declare const BlInput_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
/**
 * @tag bl-input
 * @summary Baklava Input component
 *
 * @cssproperty [--bl-input-padding-start] Sets the padding start
 * @cssproperty [--bl-input-padding-end] Sets the padding end
 */
export default class BlInput extends BlInput_base {
    static get styles(): CSSResultGroup;
    static shadowRootOptions: {
        delegatesFocus: boolean;
        mode: ShadowRootMode;
        slotAssignment?: SlotAssignmentMode | undefined;
        customElements?: CustomElementRegistry | undefined;
    };
    static formControlValidators: {
        key: keyof ValidityState;
        isValid(instance: HTMLElement & {
            validationTarget: HTMLInputElement;
        }): boolean;
    }[];
    validationTarget: HTMLInputElement;
    /**
     * Sets name of the input
     */
    name?: string;
    /**
     * Type of the input. It's used to set `type` attribute of native input inside.
     */
    type: InputType;
    /**
     * Sets label of the input
     */
    label?: string;
    /**
     * Sets placeholder of the input
     */
    placeholder?: string;
    /**
     * Sets initial value of the input
     */
    value: string;
    /**
     * Makes input a mandatory field
     */
    required: boolean;
    /**
     * Sets minimum length of the input
     */
    minlength?: number;
    /**
     * Sets maximum length of the input
     */
    maxlength?: number;
    /**
     * Sets the minimum acceptable value for the input
     */
    min?: number | string;
    /**
     * Sets the maximum acceptable value for the input
     */
    max?: number | string;
    /**
     * Sets a regex pattern form the input validation
     */
    pattern?: string;
    /**
     * Sets the increase and decrease step to a `number` input
     */
    step?: number;
    /**
     * Hints browser to autocomplete this field.
     */
    autocomplete: string;
    /**
     * Sets the input mode of the field for asking browser to show the desired keyboard.
     */
    inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
    /**
     * Sets input to get keyboard focus automatically
     */
    autofocus: boolean;
    /**
     * Sets the custom icon name. `bl-icon` component is used to show an icon
     */
    icon?: BaklavaIcon;
    /**
     * Sets input size.
     */
    size?: InputSize;
    /**
     * Disables the input
     */
    disabled: boolean;
    /**
     * Makes the input readonly.
     */
    readonly: boolean;
    /**
     * Makes label as fixed positioned
     */
    labelFixed: boolean;
    /**
     * Overrides error message. This message will override default error messages
     */
    set customInvalidText(value: string);
    get customInvalidText(): string;
    private _customInvalidText;
    /**
     * Adds help text
     */
    helpText?: string;
    /**
     * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
     */
    private onChange;
    /**
     * Fires when the value of an input element has been changed.
     */
    private onInput;
    /**
     * Fires when the value of an input element has been changed.
     */
    private onInvalid;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private onKeydown;
    private dirty;
    private passwordVisible;
    private textVisibilityToggle;
    showPicker(): void;
    validityCallback(): string | void;
    /**
     * Force to set input as in invalid state.
     */
    forceCustomError(): Promise<void>;
    /**
     * Clear forced invalid state
     */
    clearCustomError(): Promise<void>;
    reportValidity(): boolean;
    private inputHandler;
    private changeHandler;
    firstUpdated(): void;
    protected updated(changedProperties: PropertyValues): Promise<void>;
    private inputId;
    private get _hasIconSlot();
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "bl-input": BlInput;
    }
}
export {};
//# sourceMappingURL=bl-input.d.ts.map