wj-elements/dist/packages/wje-checkbox/checkbox.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';
/**
 * @summary This method dispatches a custom event named "wje-checkbox:change".
 * It is triggered when the input event is fired, which happens when the state of the checkbox changes.
 * The event is dispatched on the current instance of the Checkbox class.
 * @documentation https://elements.webjet.sk/components/checkbox
 * @status stable
 * @augments WJElement
 * @slot - The checkbox main content.
 * @csspart native - The component's native wrapper.
 * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;
 * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;
 * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;
 * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;
 * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;
 * //@fires wje-checkbox:change - Dispatched when the checkbox state changes;
 */
export default class Checkbox extends WJElement {
    /**
     * Getter for the CSS stylesheet.
     * @returns {string} The CSS stylesheet.
     */
    static get cssStyleSheet(): string;
    static get observedAttributes(): string[];
    /**
     * Whether the input is associated with a form.
     * @type {boolean}
     */
    static formAssociated: boolean;
    internals: ElementInternals;
    /**
     * 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;
    /**
     * Getter for the customErrorDisplay attribute.
     * @returns {boolean} Whether the attribute is present.
     */
    get customErrorDisplay(): boolean;
    /**
     * Getter for the validateOnChange attribute.
     * @returns {boolean} Whether the attribute is present.
     */
    get validateOnChange(): boolean;
    /**
     * 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;
    /**
     * 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;
    /**
     * Setter for the defaultValue attribute.
     * This method sets the 'value' attribute of the custom input element to the provided value.
     * The 'value' attribute represents the default value of the input element.
     * @param {string} value The value to set as the default value.
     */
    set defaultValue(value: string);
    /**
     * Getter for the defaultValue attribute.
     * This method retrieves the 'value' attribute of the custom input element.
     * The 'value' attribute represents the default value of the input element.
     * If the 'value' attribute is not set, it returns an empty string.
     * @returns {string} The default value of the input element.
     */
    get defaultValue(): string;
    /**
     * Set checked attribute.
     * @param {boolean} value true if the toggle is checked, false otherwise
     */
    set disabled(value: boolean);
    /**
     * Get disabled attribute value.
     * @returns {boolean} true if the toggle is disabled, false otherwise
     */
    get disabled(): boolean;
    /**
     * Set checked attribute.
     * @param {boolean} value true if the toggle is checked, false otherwise
     */
    set checked(value: boolean);
    /**
     * Get checked attribute.
     * @returns {boolean} true if the toggle is checked, false otherwise
     */
    get checked(): boolean;
    /**
     * Draws the checkbox element.
     * @returns {DocumentFragment} The created fragment.
     */
    draw(): DocumentFragment;
    input: HTMLInputElement;
    /**
     * Adds an event listener after drawing the checkbox.
     */
    afterDraw(): 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;
    #private;
}