@riverty/web-components 6.2.0 → 6.3.0

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

@@ -1,718 +0,0 @@
-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 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 {
-            "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
-            }];
-    }
-}