@umbraco-ui/uui-textarea/lib/uui-textarea.element.d.ts

Custom element wrapping the native textarea element. This is a formAssociated element, meaning it can participate in a native HTMLForm. In browsers other then Chrome it may require a polyfill.

import { LitElement } from 'lit';
declare const UUITextareaElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof LitElement;
/**
 * @element uui-textarea
 * @fires UUITextareaEvent#change on change
 * @fires InputEvent#input on input
 * @fires KeyboardEvent#keyup on keyup
 * @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea
 * @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea
 * @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea
 * @cssprop --uui-textarea-font-size - Overwrites the default font size
 * @extends UUIFormControlMixin
 */
export declare class UUITextareaElement extends UUITextareaElement_base {
    /**
     * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/
     * @type {boolean}
     */
    static readonly formAssociated = true;
    /**
     * Defines the textarea placeholder.
     * @type {string}
     * @attr
     * @default ''
     */
    placeholder: string;
    /**
     * Disables the textarea.
     * @type {boolean}
     * @attr
     * @default false
     */
    disabled: boolean;
    /**
     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
     * @type {boolean}
     * @attr
     * @default false
     */
    readonly: boolean;
    /**
     * This is a name property of the `<uui-textarea>` component. It reflects the behaviour of the native `<textarea>` element and its name attribute.
     * @type {string}
     * @attr
     * @default ''
     */
    name: string;
    /**
     * Set to true if the component should have an error state. Property is reflected to the corresponding attribute.
     * @type {boolean}
     * @attr
     * @default false
     */
    error: boolean;
    /**
     * This is a minimum value of the input.
     * @type {number}
     * @attr
     * @default undefined
     */
    minlength?: number;
    /**
     * Minlength validation message.
     * @attr
     * @default
     */
    minlengthMessage: string | ((charsLeft: number) => string);
    /**
     * This is a maximum value of the input.
     * @type {number}
     * @attr
     * @default undefined
     */
    maxlength?: number;
    /**
     * Maxlength validation message.
     * @attr
     * @default
     */
    maxlengthMessage: string | ((max: number, current: number) => string);
    protected _textarea: HTMLInputElement;
    /**
     * Enables automatic height adjustment. The height will be confined within the min and max height if defined.
     * @type {boolean}
     * @attr
     * @default false
     */
    autoHeight: boolean;
    /**
     * Label to be used for aria-label and eventually as visual label
     * @type {string}
     * @attr
     */
    label: string;
    /**
     * Sets the number of rows of the textarea
     * @type {number}
     * @attr
     */
    rows?: number;
    /**
     * Sets the number of cols of the textarea
     * @type {number}
     * @attr
     */
    cols?: number;
    /**
     * Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.
     * @type {'soft' | 'hard'}
     * @attr
     * @default undefined
     */
    wrap?: 'soft' | 'hard';
    constructor();
    connectedCallback(): void;
    /**
     * This method enables <label for="..."> to focus the select
     */
    focus(): Promise<void>;
    blur(): Promise<void>;
    /**
     * This method enables <label for="..."> to open the select
     */
    click(): Promise<void>;
    protected getFormElement(): HTMLElement;
    private onInput;
    private onChange;
    private autoUpdateHeight;
    render(): import("lit-html").TemplateResult<1>;
    static styles: import("lit").CSSResult[];
}
declare global {
    interface HTMLElementTagNameMap {
        'uui-textarea': UUITextareaElement;
    }
}
export {};