@riverty/web-components 6.2.0 → 6.3.0

package/dist/collection/components/checkbox/checkbox.js

@@ -1,777 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { appendControlToFormData } from "../../utils/formData";
-/**
- * Checkboxes allow users to select none, one, or multiple items from a list.
- *
- * Overall behavior is based on native `<input type="checkbox">`
- *
- */
-export class Checkbox {
-    constructor() {
-        /** Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
-        this.autofocus = false;
-        this.validityState = '';
-        this.validityMessage = '';
-        this.touched = false;
-        // Private properties
-        this.initial = {};
-        this.uniqueId = `r-checkbox-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        // Private methods
-        this.getValidityStateData = (element) => {
-            let validityState = '';
-            let validityMessage = '';
-            for (const state in element.validity) {
-                if (element.validity[state]) {
-                    validityState = state;
-                    if (this[state + 'Message']) {
-                        validityMessage = this[state + 'Message'];
-                        return { validityState, validityMessage };
-                    }
-                    validityMessage = element.validationMessage;
-                }
-            }
-            return { validityState, validityMessage };
-        };
-        this.validateFormElement = (element = null) => {
-            if (element === null)
-                return;
-            if (this.isNoValidate)
-                return;
-            if (this.error)
-                return;
-            const { validityState, validityMessage } = this.getValidityStateData(element);
-            this.validityState = validityState;
-            this.validityMessage = validityMessage;
-            const isValid = this.validityState === 'valid';
-            this.valid = isValid;
-            this.invalid = !isValid;
-            this.rValidate.emit({
-                state: this.validityState,
-                message: this.validityMessage
-            });
-        };
-        this.handleClick = (event) => {
-            if (this.disabled)
-                return;
-            const target = event.target;
-            if (target.tagName !== 'A') {
-                event.preventDefault();
-                this.toggleChecked();
-            }
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            this.validateFormElement(this.nativeElement);
-            // If data is not valid -> prevent form submittion
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.onResetForm = () => {
-            this.validityState = null;
-            this.validityMessage = null;
-            this.checked = this.initial['checked'];
-            this.invalid = this.initial['invalid'];
-            this.valid = !this.invalid;
-            const { host, value, checked } = this;
-            this.rReset.emit({ element: host, value, checked });
-        };
-        this.contributeToFormData = (event) => {
-            appendControlToFormData(this.nativeElement || this.host, event.formData);
-        };
-        this.applyAutofocus = () => {
-            queueMicrotask(() => {
-                this.setFocus();
-            });
-        };
-    }
-    // Public Methods
-    /**
-     * Asynchronously retrieves the validity state of the checkbox.
-     *
-     * This method updates the internal validity state and message by calling `getValidityStateData`
-     * with the native element, and then returns an object containing the current validity state and message.
-     *
-     * @returns A promise that resolves to an object containing the validity state and message.
-     * The object has two properties:
-     *   - `state`: A string representing the validity state.
-     *   - `message`: A string containing the validity message.
-     */
-    async getValidityState() {
-        const { validityState, validityMessage } = this.getValidityStateData(this.nativeElement);
-        this.validityState = validityState;
-        this.validityMessage = validityMessage;
-        return {
-            state: this.validityState,
-            message: this.validityMessage
-        };
-    }
-    /**
-     * Sets focus on the checkbox element.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Removes focus from the checkbox element.
-     */
-    async setBlur() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /**
-     * Checks the checkbox element.
-     */
-    async check() {
-        this.checked = true;
-    }
-    /**
-     * Unchecks the checkbox element.
-     */
-    async uncheck() {
-        this.checked = false;
-    }
-    /**
-     * Toggles the checked state of the checkbox element.
-     */
-    async toggleChecked() {
-        this.touched = true;
-        this.checked = !this.checked;
-    }
-    /**
-     * Sets the indeterminate state of the checkbox element.
-     */
-    async setIndeterminate() {
-        this.indeterminate = true;
-    }
-    /**
-     * Sets the indeterminate state of the checkbox element.
-     */
-    async clearIndeterminate() {
-        this.indeterminate = false;
-    }
-    /**
-     * Validates the checkbox without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the checkbox is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData(this.nativeElement);
-        return validityState === 'valid';
-    }
-    // Watchers
-    async handleCheckedChange() {
-        // Only proceed if checkbox has been interacted with
-        if (!this.touched)
-            return;
-        if (this.disabled)
-            return;
-        const { host, value, checked } = this;
-        this.rChange.emit({ element: host, value, checked });
-        // Update native element checked state
-        if (this.nativeElement) {
-            this.nativeElement.checked = checked;
-        }
-        // Validate if required
-        if (this.required && !this.isNoValidate) {
-            this.validateFormElement(this.nativeElement);
-        }
-    }
-    // Getters
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    /** Determine whether this element should be ignored during Constraint Validation API validation. */
-    get isNoValidate() {
-        var _a;
-        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
-            this.novalidate ||
-            false);
-    }
-    get hasErrorMessage() {
-        var _a;
-        return typeof this.error === 'string' && ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasCustomErrorMessage() {
-        var _a;
-        return typeof this.customErrorMessage === 'string' && ((_a = this.customErrorMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasValidationError() {
-        var _a;
-        return this.validityState !== 'valid' && ((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasInvalidMessage() {
-        if (!this.invalid)
-            return false;
-        return this.hasErrorMessage || this.hasCustomErrorMessage || this.hasValidationError;
-    }
-    connectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
-    }
-    disconnectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
-    }
-    // Lifecycle methods
-    componentWillLoad() {
-        this.initial['checked'] = this.checked;
-        this.initial['invalid'] = this.invalid;
-    }
-    componentDidLoad() {
-        if (this.nativeElement) {
-            this.nativeElement.indeterminate = this.indeterminate;
-        }
-        if (this.autofocus)
-            this.applyAutofocus();
-    }
-    connectedCallback() {
-        this.connectFormEventListeners();
-    }
-    disconnectedCallback() {
-        this.disconnectFormEventListeners();
-    }
-    render() {
-        const { error, name, value, disabled, required, uniqueId, checked, indeterminate, autofocus } = this;
-        const inputAttrs = {
-            name,
-            value,
-            disabled,
-            required,
-            checked,
-            indeterminate,
-            autofocus
-        };
-        return (h(Host, { key: '06eb235ee3c0da6317a1b23d699e4964d7201111', onClick: this.handleClick }, h("div", { key: '8fa412dae7fdde690c5fc5efb11efb12ceb30d4f', class: "r-checkbox" }, h("input", Object.assign({ key: '7a192e581b959504c01a33168a58e452434e1f11', class: "r-checkbox--input", type: "checkbox" }, inputAttrs, { id: `${uniqueId}-input`, ref: el => this.nativeElement = el, "aria-describedby": this.hasInvalidMessage ? `${uniqueId}-message` : null, "aria-required": `${this.required || false}`, "aria-invalid": `${this.invalid || false}` })), h("div", { key: 'f22d560241a1f7ac083f90677d166087a99d0647', class: "r-checkbox--box", "aria-hidden": "true" }, this.checked ?
-            h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.80019 15.8988L4.6002 11.6988L3.2002 13.0988L8.80019 18.6988L20.8002 6.69883L19.4002 5.29883L8.80019 15.8988Z", fill: "currentColor" }))
-            : this.indeterminate ?
-                h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "4", y: "11", width: "16", height: "2", fill: "currentColor" }))
-                : null), h("div", { key: '0dd969ea2f03ea289772a3c1d59841b93248d9bd', class: "r-checkbox--description" }, h("label", { key: '5ec66dcfbabb9c8a8362e8d246cf59aa411dce78', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, h("slot", { key: 'c7755df4134ed6c2d321b513f0707adb26987000' })), h("div", { key: '49dfc099a6fe5e600ea246a4511a1f83d34f2f9e', id: `${uniqueId}-message`, class: !this.hasInvalidMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
-            h("r-hint", { key: 'ee682a67c574da004bd8208f58fcd9ab6191f3bd', variant: "error" }, error || this.customErrorMessage || this.validityMessage))))));
-    }
-    static get is() { return "r-checkbox"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["checkbox.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["checkbox.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "form": {
-                "type": "string",
-                "attribute": "form",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the `id` of the `<form>` to which the element belongs"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "novalidate": {
-                "type": "boolean",
-                "attribute": "novalidate",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies if element must be ignored during validation of the form elements"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "name": {
-                "type": "string",
-                "attribute": "name",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Name of element (data) within a form"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Value of element data within a form"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "checked": {
-                "type": "boolean",
-                "attribute": "checked",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Pass initial checked state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "indeterminate": {
-                "type": "boolean",
-                "attribute": "indeterminate",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Visually present checkbox in indeterminate state (neither checked nor unchecked)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Prevent user interaction and apply disabled style"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "autofocus": {
-                "type": "boolean",
-                "attribute": "autofocus",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "valid": {
-                "type": "boolean",
-                "attribute": "valid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicate that validation is successful"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "invalid": {
-                "type": "boolean",
-                "attribute": "invalid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicate that validation has failed"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "error": {
-                "type": "string",
-                "attribute": "error",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom validation error message"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "required": {
-                "type": "boolean",
-                "attribute": "required",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies if checkbox must be checked"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "valueMissingMessage": {
-                "type": "string",
-                "attribute": "value-missing-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "customErrorMessage": {
-                "type": "string",
-                "attribute": "custom-error-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "validityState": {},
-            "validityMessage": {},
-            "touched": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "rChange",
-                "name": "rChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emit custom `rChange` event when checkbox onChange event emitted.\nEmitted `event.details` contain checkbox value and checked state."
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRCheckboxElement,\n    value: any,\n    checked: boolean\n  }",
-                    "resolved": "{ element: HTMLRCheckboxElement; value: any; checked: boolean; }",
-                    "references": {
-                        "HTMLRCheckboxElement": {
-                            "location": "global",
-                            "id": "global::HTMLRCheckboxElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rReset",
-                "name": "rReset",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits `rReset` when component was reset to initial state by form reset"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRCheckboxElement,\n    value: any,\n    checked: boolean\n  }",
-                    "resolved": "{ element: HTMLRCheckboxElement; value: any; checked: boolean; }",
-                    "references": {
-                        "HTMLRCheckboxElement": {
-                            "location": "global",
-                            "id": "global::HTMLRCheckboxElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rValidate",
-                "name": "rValidate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits event after each validation"
-                },
-                "complexType": {
-                    "original": "{\n    state: string,\n    message: string\n  }",
-                    "resolved": "{ state: string; message: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "getValidityState": {
-                "complexType": {
-                    "signature": "() => Promise<{ state: string; message: string; }>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<{ state: string; message: string; }>"
-                },
-                "docs": {
-                    "text": "Asynchronously retrieves the validity state of the checkbox.\n\nThis method updates the internal validity state and message by calling `getValidityStateData`\nwith the native element, and then returns an object containing the current validity state and message.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A promise that resolves to an object containing the validity state and message.\nThe object has two properties:\n- `state`: A string representing the validity state.\n- `message`: A string containing the validity message."
-                        }]
-                }
-            },
-            "setFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets focus on the checkbox element.",
-                    "tags": []
-                }
-            },
-            "setBlur": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Removes focus from the checkbox element.",
-                    "tags": []
-                }
-            },
-            "check": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Checks the checkbox element.",
-                    "tags": []
-                }
-            },
-            "uncheck": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Unchecks the checkbox element.",
-                    "tags": []
-                }
-            },
-            "toggleChecked": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Toggles the checked state of the checkbox element.",
-                    "tags": []
-                }
-            },
-            "setIndeterminate": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets the indeterminate state of the checkbox element.",
-                    "tags": []
-                }
-            },
-            "clearIndeterminate": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets the indeterminate state of the checkbox element.",
-                    "tags": []
-                }
-            },
-            "checkValidity": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Validates the checkbox without triggering UI and returns a boolean indicating its validity.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A boolean indicating whether the checkbox is valid."
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "checked",
-                "methodName": "handleCheckedChange"
-            }];
-    }
-}