@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,744 @@
+import { h, Host, Fragment } from "@stencil/core";
+export class CheckboxGroup {
+    constructor() {
+        /**
+         * Specifies `value` property of the 'select-all', representing the group as a whole.
+         * */
+        this.value = '';
+        /**
+         * Specifies whether the `value` is required.
+         */
+        this.required = false;
+        this.indeterminate = false;
+        this.allChecked = false;
+        this.noChecked = false;
+        this.validityState = '';
+        this.validityMessage = '';
+        this.uniqueId = `r-checkbox-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.initial = {};
+        this.renderMessage = () => {
+            const variant = this.valid ? 'success' : 'error';
+            return (h("r-hint", { variant: variant, role: "alert", "aria-live": "polite", id: `${this.uniqueId}-message`, class: this.message ? null : 'visually-hidden' }, this.message));
+        };
+        this.getValidityStateData = () => {
+            let validityState = '';
+            let validityMessage = '';
+            const isValid = this.checkboxes.some(checkbox => checkbox.checked);
+            if (this.required && !isValid) {
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage || 'Please select at least one option.';
+            }
+            else {
+                validityState = 'valid';
+                validityMessage = null;
+            }
+            return { validityState, validityMessage };
+        };
+        this.validateGroup = () => {
+            if (this.isNoValidate || !this.required)
+                return;
+            const { validityState, validityMessage } = this.getValidityStateData();
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
+            const isValid = this.validityState === 'valid';
+            this.valid = isValid;
+            this.invalid = !isValid;
+            this.noChecked = !isValid;
+            this.rValidate.emit({
+                state: this.validityState,
+                message: this.validityMessage
+            });
+        };
+        this.onSubmitForm = (event) => {
+            if (this.isNoValidate)
+                return;
+            this.validateGroup();
+            if (this.invalid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.onResetForm = () => {
+            this.resetValidity();
+            this.resetToInitial();
+        };
+    }
+    /** Validates the checkbox group, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateGroup();
+    }
+    /**
+     * Validates the checkbox group 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();
+        return validityState === 'valid';
+    }
+    /**
+     * Resets the validity state and message of the radio group.
+     * This method clears the validity message and state, and sets the invalid
+     * property to its initial value.
+     */
+    async resetValidity() {
+        this.validityMessage = null;
+        this.validityState = null;
+        this.invalid = this.initial['invalid'];
+        this.valid = !this.invalid;
+    }
+    /**
+     * @returns {HTMLRCheckboxElement[]} - Returns all checkboxes in the slot.
+     */
+    get checkboxes() {
+        return Array.from(this.host.querySelectorAll('r-checkbox'));
+    }
+    get hasMessage() {
+        return this.message !== null;
+    }
+    /**
+     * Checks all checkboxes in the slot.
+     */
+    async checkAll() {
+        this.checkboxes.forEach(checkbox => {
+            checkbox.check();
+        });
+        this.allChecked = true;
+        this.noChecked = false;
+        this.indeterminate = false;
+        return this;
+    }
+    /**
+     * Unchecks all checkboxes in the slot.
+     */
+    async uncheckAll() {
+        this.checkboxes.forEach(checkbox => {
+            var _a;
+            (_a = checkbox === null || checkbox === void 0 ? void 0 : checkbox.uncheck) === null || _a === void 0 ? void 0 : _a.call(checkbox);
+        });
+        this.allChecked = false;
+        this.noChecked = true;
+        this.indeterminate = false;
+        return this;
+    }
+    handleCheckboxChange(event) {
+        if (!event.target)
+            return;
+        const isSelectAllElement = event.detail.element.id === `${this.uniqueId}-select-all`;
+        if (isSelectAllElement) {
+            this.updateCheckAllState(event.detail.checked);
+            setTimeout(this.validateGroup, 0);
+            return;
+        }
+        this.updateCheckboxesState(event);
+        if (this.required) {
+            this.validateGroup();
+        }
+    }
+    updateCheckAllState(checked) {
+        checked ? this.checkAll() : this.uncheckAll();
+    }
+    updateCheckboxesState(event) {
+        const { checkboxes } = this;
+        const checkedCheckboxes = checkboxes.filter(checkbox => checkbox.checked);
+        const isCheckbox = event.target.tagName.toLowerCase() === 'r-checkbox';
+        const isInGroup = checkboxes.includes(event.target);
+        if (!isCheckbox)
+            return;
+        if (!isInGroup)
+            return;
+        this.allChecked = checkedCheckboxes.length === checkboxes.length;
+        this.indeterminate = checkedCheckboxes.length > 0 && checkedCheckboxes.length < checkboxes.length;
+        this.noChecked = checkedCheckboxes.length === 0;
+    }
+    get message() {
+        const { validityMessage, invalid, error, customErrorMessage } = this;
+        let message = null;
+        if (invalid) {
+            message = error || customErrorMessage || validityMessage || null;
+        }
+        return message;
+    }
+    get parentFormEl() {
+        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
+    }
+    get isNoValidate() {
+        var _a;
+        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
+            this.novalidate ||
+            false);
+    }
+    resetToInitial() {
+        this.invalid = this.initial['invalid'];
+        this.checked = this.initial['checked'];
+        this.indeterminate = this.initial['indeterminate'];
+        this.updateCheckAllState(this.initial['checked']);
+    }
+    connectedCallback() {
+        var _a, _b;
+        this.initial['invalid'] = this.invalid;
+        this.initial['checked'] = this.checked;
+        this.initial['indeterminate'] = this.indeterminate;
+        this.updateCheckAllState(this.initial['checked']);
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', this.onSubmitForm, { capture: true });
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('reset', this.onResetForm);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('submit', this.onSubmitForm);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('reset', this.onResetForm);
+    }
+    get groupDescribedby() {
+        const { uniqueId, hint, hasMessage } = this;
+        if (hasMessage && hint)
+            return `${uniqueId}-message ${uniqueId}-hint`;
+        if (hasMessage)
+            return `${uniqueId}-message`;
+        if (hint)
+            return `${uniqueId}-hint`;
+        return null;
+    }
+    render() {
+        const { label, fieldIndicator, help, helpIcon, helpIconColor, hint, uniqueId, form, name, value } = this;
+        const renderLabel = () => {
+            const labelAttrs = {
+                fieldIndicator,
+                help,
+                helpIcon,
+                helpIconColor,
+            };
+            return (label ?
+                h("r-label", Object.assign({ id: `${uniqueId}-label`, class: "r-radio-group--label" }, labelAttrs), label)
+                :
+                    null);
+        };
+        const renderHint = () => hint ? (h("r-hint", { id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note", "aria-hidden": "true" }, hint)) : null;
+        const checkAllAttrs = {
+            form,
+            name,
+            value
+        };
+        return (h(Host, null, h("div", { class: "r-checkbox-group", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-invalid": `${this.invalid || false}`, "aria-describedby": this.groupDescribedby }, h("div", { class: "r-checkbox-group--label", id: `${uniqueId}-group-label` }, this.showSelectAll ?
+            h("r-checkbox", Object.assign({ id: `${uniqueId}-select-all` }, checkAllAttrs, { checked: this.allChecked, indeterminate: this.indeterminate }), renderLabel(), renderHint())
+            :
+                h(Fragment, null, h("r-checkbox", Object.assign({}, checkAllAttrs, { checked: this.allChecked, indeterminate: this.indeterminate, class: "visually-hidden" }), this.label), renderLabel(), renderHint())), h("div", { class: "r-checkbox-group--content" }, h("span", { style: { display: 'contents' } }, h("slot", null)), this.renderMessage()))));
+    }
+    static get is() { return "r-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox-group.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
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies `name` property of the 'select-all' checkbox, representing the group as a whole."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies `value` property of the 'select-all', representing the group as a whole."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether the `value` is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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 \nof a ValidityState object (set by `required`) \nwithin Constrain Validation API"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "valid": {
+                "type": "boolean",
+                "attribute": "valid",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply validation success visual style"
+                },
+                "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": "Apply validation error visual style"
+                },
+                "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
+            },
+            "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 \nindicating whether the element's custom validity message has been set to a non-empty \nstring by calling the element's setCustomValidity() method."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the checkbox group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "fieldIndicator": {
+                "type": "string",
+                "attribute": "field-indicator",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional field indicator for the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "help": {
+                "type": "string",
+                "attribute": "help",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Help text for the checkbox group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "helpIcon": {
+                "type": "string",
+                "attribute": "help-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "string",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional icon to display in the help text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "helpIconColor": {
+                "type": "string",
+                "attribute": "help-icon-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the help icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "attribute": "hint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A hint providing additional information for the checkbox group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "showSelectAll": {
+                "type": "boolean",
+                "attribute": "show-select-all",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a \"Select All\" checkbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "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
+            },
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if select-all checkbox is initially in checked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "indetermitate": {
+                "type": "boolean",
+                "attribute": "indetermitate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if select-all checkbox is initially in indetermitate state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "indeterminate": {},
+            "allChecked": {},
+            "noChecked": {},
+            "validityState": {},
+            "validityMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "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 {
+            "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 the checkbox group, 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 group without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the checkbox is valid."
+                        }]
+                }
+            },
+            "resetValidity": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the validity state and message of the radio group.\nThis method clears the validity message and state, and sets the invalid\nproperty to its initial value.",
+                    "tags": []
+                }
+            },
+            "checkAll": {
+                "complexType": {
+                    "signature": "() => Promise<this>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<this>"
+                },
+                "docs": {
+                    "text": "Checks all checkboxes in the slot.",
+                    "tags": []
+                }
+            },
+            "uncheckAll": {
+                "complexType": {
+                    "signature": "() => Promise<this>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<this>"
+                },
+                "docs": {
+                    "text": "Unchecks all checkboxes in the slot.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "rChange",
+                "method": "handleCheckboxChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}