finpro/dist/components/fp-input/fp-input.d.ts

Design System

import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
import 'element-internals-polyfill';
import '../fp-icon/fp-icon';
import '../fp-button/fp-button';
export declare type InputSize = 'medium' | 'large';
declare const FpInput_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
/**
 * @tag fp-input
 * @summary Finpro Input component
 */
export default class FpInput extends FpInput_base {
    static get styles(): CSSResultGroup;
    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. Only `text`, `number` and `password` is supported for now.
     */
    type: 'text' | 'password' | 'number';
    /**
     * 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 smallest number can be entered to a `number` input
     */
    min?: number;
    /**
     * Sets the biggest number can be entered to a `number` input
     */
    max?: number;
    /**
     * Sets the increase and decrease step to a `number` input
     */
    step?: number;
    /**
     * Sets the custom icon name. fp-icon` component is used to show an icon
     */
    icon?: string;
    /**
     * Sets input size.
     */
    size?: InputSize;
    /**
     * Disables the input
     */
    disabled: boolean;
    /**
     * Makes label as fixed positioned
     */
    labelFixed: boolean;
    /**
     * Set custom error message
     */
    customInvalidText?: string;
    /**
     * 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 onError;
    private dirty;
    private passwordVisible;
    private passwordInput;
    private textVisiblityToggle;
    validityCallback(): string | void;
    reportValidity(): boolean;
    valueChangedCallback(value: string): void;
    private inputHandler;
    private changeHandler;
    firstUpdated(): void;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'fp-input': FpInput;
    }
}
export {};
//# sourceMappingURL=fp-input.d.ts.map