@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,803 @@
+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 an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * 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 && 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: 'caf581918e9dabe998fde4118ba5d890e731cd4d', onClick: this.handleClick }, h("div", { key: 'a5f144a25be70960a5bde7b16b3a85aa57c24b9d', class: "r-checkbox" }, h("input", Object.assign({ key: 'd1505294bfc6b3f9b296c03df184078a061dcedd', 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: '8fc3f4f251db2bc58f15851881d0122552c83a04', 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: 'e64607f95963658e0bbddd32564fd003d5d26b10', class: "r-checkbox--description" }, h("label", { key: 'ea592fe0ce74007f0a23ba9aaed73059597e9891', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, h("slot", { key: 'e795b6c1e51724e95840532666e7fc3e29fd52a5' })), h("div", { key: 'ea461714f04e42bc81d488c7050783007d1edbe9', id: `${uniqueId}-message`, class: !this.hasInvalidMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
+            h("r-hint", { key: '7ed7bd758187daacd72d93f3aba91e9c9123c9fd', 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": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "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"
+            }];
+    }
+}