wj-elements/dist/packages/wje-textarea/textarea.element.d.ts

WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.

import { default as WJElement } from '../wje-element/element.js';
/**
 * `Textarea` is a custom web component that represents a textarea input.
 * @summary This element represents a textarea input.
 * @documentation https://elements.webjet.sk/components/textarea
 * @status stable
 * @augments WJElement
 * @csspart native - The native textarea wrapper.
 * @csspart input - The textarea input.
 * @csspart wrapper - The textarea wrapper.
 * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.
 * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.
 * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.
 * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.
 * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.
 * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.
 * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.
 * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.
 * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.
 * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.
 * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.
 * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.
 * @tag wje-textarea
 */
export default class Textarea extends WJElement {
    /**
     * Returns the CSS styles for the component.
     * @static
     * @returns {CSSStyleSheet} The CSS stylesheet
     */
    static get cssStyleSheet(): CSSStyleSheet;
    /**
     * Whether the input is associated with a form.
     * @type {boolean}
     */
    static formAssociated: boolean;
    /**
     * Returns the list of attributes to observe for changes.
     * @static
     * @returns {Array<string>}
     */
    static get observedAttributes(): Array<string>;
    /**
     * Setter for the invalid attribute.
     * @param {boolean} isInvalid Whether the input is invalid.
     */
    set invalid(isInvalid: boolean);
    /**
     * Getter for the invalid attribute.
     * @returns {boolean} Whether the attribute is present.
     */
    get invalid(): boolean;
    pristine: boolean;
    internals: ElementInternals;
    observer: MutationObserver;
    observeFunction: (mutations: any) => void;
    /**
     * Setter for the value attribute.
     * @param {string} value The value to set.
     */
    set value(value: string);
    /**
     * Getter for the value attribute.
     * @returns {string} The value of the attribute.
     */
    get value(): string;
    _value: string;
    /**
     * Sets the `validateOnChange` property. If set to a truthy value, it adds the
     * `validate-on-change` attribute to the element. If set to a falsy value, it
     * removes the `validate-on-change` attribute from the element.
     * @param {boolean} value Determines whether to add or remove the
     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
     * falsy value removes it.
     */
    set validateOnChange(value: boolean);
    /**
     * Getter for the validateOnChange attribute.
     * @returns {boolean} Whether the attribute is present.
     */
    get validateOnChange(): boolean;
    /**
     * Getter for the form attribute.
     * @returns {HTMLFormElement} The form the input is associated with.
     */
    get form(): HTMLFormElement;
    /**
     * Getter for the name attribute.
     * @returns {string} The name of the input.
     */
    get name(): string;
    /**
     * Getter for the type attribute.
     * @returns {string} The type of the input.
     */
    get type(): string;
    /**
     * Getter for the validity attribute.
     * @returns {ValidityState} The validity state of the input.
     */
    get validity(): ValidityState;
    /**
     * Getter for the validationMessage attribute.
     * @returns {string} The validation message of the input.
     */
    get validationMessage(): string;
    /**
     * Getter for the willValidate attribute.
     * @returns {boolean} Whether the input will be validated.
     */
    get willValidate(): boolean;
    set placeholder(value: string);
    get placeholder(): string;
    beforeDraw(): void;
    /**
     * Draws the component for the textarea.
     * @returns {DocumentFragment}
     */
    draw(): DocumentFragment;
    counterElement: HTMLDivElement;
    native: HTMLDivElement;
    labelElement: HTMLLabelElement;
    input: HTMLTextAreaElement;
    /**
     * Sets up the event listeners after the component is drawn.
     */
    afterDraw(): void;
    resizeObserver: ResizeObserver;
    /**
     * Sets the height of the textarea.
     */
    setTextareaHeight: () => void;
    /**
     * Updates the counter for the textarea.
     * @param {Event} e The event object.
     */
    counterFn: (e: Event) => void;
    /**
     * @summary Displays the validation message for the input.
     * If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.
     * If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.
     */
    showInvalidMessage(): void;
    /**
     * @summary Validates the input.
     * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.
     * For each invalid state, it constructs an attribute name and checks if the input has this attribute.
     * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.
     * If the input does not have the attribute, it sets the error message to the default validation message of the input.
     * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.
     * If the input is valid, it sets the validity in the form internals to an empty object.
     */
    validateInput(): void;
    validationError: string;
    /**
     * @summary Propagates the validation state of the input.
     * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.
     * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.
     */
    propagateValidation(): void;
    /**
     * @summary Callback function that is called when the custom element is associated with a form.
     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
     * @param {HTMLFormElement} form The form the custom element is associated with.
     */
    formAssociatedCallback(form: HTMLFormElement): void;
    /**
     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
     * This method is responsible for resetting the value of the custom input element to its default value.
     * It also resets the form value and validity state in the form internals.
     * @function
     */
    formResetCallback(): void;
    /**
     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
     * This method is responsible for restoring the value of the custom input element to its saved state.
     * It also restores the form value and validity state in the form internals to their saved states.
     * @param {object} state The saved state of the custom input element.
     * @function
     */
    formStateRestoreCallback(state: object): void;
    /**
     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
     * This method is responsible for saving the value of the custom input element.
     * @returns {object} The saved state of the custom input element.
     * @function
     */
    formStateSaveCallback(): object;
    /**
     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
     * This method is not implemented yet.
     * @param {boolean} disabled The new disabled state of the custom input element.
     * @function
     */
    formDisabledCallback(disabled: boolean): void;
}