@uh-design-system/component-library 0.6.0 → 0.7.0

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.js

@@ -1,18 +1,22 @@
 import { Fragment, h } from "@stencil/core";
-import { inheritAttributes } from "../../../utils/attributes/attributes";
-import { getRequiredText } from "../../../utils/controls/controlUtils";
+import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
+import { getRequiredText, validityMessage } from "../../../utils/controls/controlUtils";
 import { idGenerator } from "../../../utils/utils";
 import classNames from "classnames";
-import { isValidation } from "../../../store";
 const radioButtonIdGenerator = idGenerator('ds-radio-button');
 export class DsRadioButton {
     radioGroup = null;
-    inputElem;
+    inputElement;
+    inheritedAttributes = {};
+    el;
     dsChange;
     dsRadioButtonChecked;
-    el;
-    internals;
+    dsRadioButtonFocused;
+    dsRadioButtonBlurred;
+    dsSubmitInvalid;
+    dsValidity;
     dsId = radioButtonIdGenerator.next().value;
+    dsName = this.dsId;
     dsErrorsDisabled = false;
     dsValue = this.dsId;
     dsLegend;
@@ -23,68 +27,112 @@ export class DsRadioButton {
     dsChecked = false;
     dsErrorText = '';
     focusable = true;
-    invalid = !!this.dsErrorText;
-    initialChecked = this.dsChecked;
-    validationMessage;
+    groupInvalid = false;
+    initialChecked = false;
     errorTextId = `${this.dsId}-error`;
     assistiveTextId = `${this.dsId}-assistive-text`;
     async dsFocus() {
-        this.inputElem.focus();
+        this.inputElement.focus();
     }
     async setFocusable(flag) {
         this.focusable = flag;
     }
     async setChecked() {
         this.dsChecked = true;
-        this.internals?.setFormValue('true');
         this.dsRadioButtonChecked.emit();
-        if (isValidation('client') && this.validationMessage) {
-            this.validationMessage = this.getValidationMessage();
-        }
+    }
+    async dsCheckValidity() {
+        return this.inputElement?.checkValidity();
     }
     dsCheckedObserver(isChecked) {
-        this.dsChange.emit(isChecked);
+        this.dsChange.emit({ checked: isChecked, value: this.dsValue });
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsValidity.emit({
+                    flag: key,
+                    message: validityMessage(key),
+                });
+                break;
+            }
+        }
     }
-    inheritedAttributes = {};
-    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     componentWillLoad() {
         this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
+            ...inheritAriaAttributes(this.el, ['aria-invalid']),
+            ...inheritAttributes(this, this.el, ['value', 'name', 'id']),
         };
+        this.initialChecked = this.dsChecked;
     }
     formResetCallback() {
+        this.dsErrorText = '';
         this.dsChecked = this.initialChecked;
-        this.internals.setValidity({});
-        this.internals.setFormValue(this.dsChecked.toString());
+        this.radioGroup = this.el.closest('ds-radio-button-group');
+        if (this.radioGroup) {
+            this.groupInvalid = !!this.radioGroup.dsErrorText;
+            this.dsErrorText = this.radioGroup.dsErrorText;
+        }
     }
     connectedCallback() {
         this.radioGroup = this.el.closest('ds-radio-button-group');
         if (this.radioGroup) {
             this.updateCheckedState();
-            this.invalid = !!this.radioGroup.dsErrorText;
+            this.groupInvalid = !!this.radioGroup.dsErrorText;
+            this.dsErrorText = this.radioGroup.dsErrorText;
             this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
-            this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+            this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateGroupInvalidState);
         }
     }
     disconnectedCallback() {
         if (this.radioGroup) {
             this.radioGroup.removeEventListener('dsRadioGroupValueChange', this.updateCheckedState);
-            this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+            this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateGroupInvalidState);
         }
         this.radioGroup = null;
     }
+    handleInvalid = (e) => {
+        e.preventDefault();
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsSubmitInvalid.emit({
+                    flag: key,
+                    message: validityMessage(key),
+                });
+                break;
+            }
+        }
+    };
     updateCheckedState = async () => {
         this.dsChecked = this.dsValue === (await this.radioGroup.getValue());
     };
-    updateInvalidState = (e) => {
-        this.invalid = e.detail;
+    updateGroupInvalidState = (e) => {
+        this.groupInvalid = !!e.detail;
+        this.dsErrorText = e.detail;
     };
     handleInput = () => {
         this.setChecked();
     };
+    handleFocus = () => {
+        this.dsRadioButtonFocused.emit(this.dsId);
+    };
     handleBlur = () => {
-        if (isValidation('client')) {
-            this.validationMessage = this.getValidationMessage();
+        this.dsRadioButtonBlurred.emit(this.dsId);
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
+        }
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsValidity.emit({
+                    flag: key,
+                    message: validityMessage(key),
+                });
+                break;
+            }
         }
     };
     getLegendText = () => {
@@ -104,18 +152,18 @@ export class DsRadioButton {
     renderRadioButton() {
         const classes = classNames('ds-radio-button', {
             'ds-radio-button--disabled': this.dsDisabled,
-            'ds-radio-button--invalid': !!this.dsErrorText || this.invalid,
+            'ds-radio-button--invalid': !!this.dsErrorText,
         });
         const inputClasses = classNames('ds-radio-button__input');
         const textClasses = classNames('ds-radio-button__text');
         const tabindex = this.focusable ? 0 : -1;
-        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h("ds-visually-hidden", null, h("input", { ref: ref => (this.inputElem = ref), type: "radio", class: inputClasses, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onBlur: this.handleBlur, checked: this.dsChecked, tabindex: tabindex, ...this.inheritedAttributes })), this.renderRadioIcon(), h("slot", null, h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: "ds-radio-button__validity" }, h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h("ds-visually-hidden", null, h("input", { ref: ref => (this.inputElement = ref), type: "radio", class: inputClasses, value: this.dsValue, id: this.dsId, name: this.dsName, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabindex: tabindex, required: this.dsRequired, "aria-invalid": !!this.dsErrorText, ...this.inheritedAttributes })), this.renderRadioIcon(), h("slot", null, h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: "ds-radio-button__validity" }, h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-radio-button-fieldset');
         const legendClasses = classNames('ds-radio-button-fieldset__legend');
         const assistiveTextClasses = classNames('ds-radio-button-fieldset__assistive-text');
-        const ariaDescribedBy = [!!this.dsErrorText && this.errorTextId, !!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !this.dsErrorsDisabled && !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
         return (h("fieldset", { class: fieldsetClasses, "aria-describedby": ariaDescribedBy }, h("legend", { class: legendClasses }, h("slot", { name: "legend" }, this.getLegendText())), h("slot", { name: "assistiveText" }, this.dsAssistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), this.renderRadioButton()));
     }
     render() {
@@ -125,7 +173,7 @@ export class DsRadioButton {
         return this.renderRadioButton();
     }
     static get is() { return "ds-radio-button"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
@@ -152,13 +200,33 @@ export class DsRadioButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `id` attriubte of the `input` element of the rendered radio button."
+                    "text": "Passed to the `id` attribute of the `input` element of the rendered radio button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "radioButtonIdGenerator.next().value as string"
             },
+            "dsName": {
+                "type": "string",
+                "attribute": "ds-name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `name` attribute of the `input` element of the rendered radio button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "this.dsId"
+            },
             "dsErrorsDisabled": {
                 "type": "boolean",
                 "attribute": "ds-errors-disabled",
@@ -172,7 +240,7 @@ export class DsRadioButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Can be used to disable client-side validation.\nUsed internally in radio button group to disable error messages\nfor a single radio button."
+                    "text": "Can be used to disable emitting validation events `dsSubmitInvalid` and `dsValidity`.\nUsed internally in radio button group to disable validation for individual radio buttons."
                 },
                 "getter": false,
                 "setter": false,
@@ -319,7 +387,7 @@ export class DsRadioButton {
             "dsErrorText": {
                 "type": "string",
                 "attribute": "ds-error-text",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -341,9 +409,7 @@ export class DsRadioButton {
     static get states() {
         return {
             "focusable": {},
-            "invalid": {},
-            "initialChecked": {},
-            "validationMessage": {}
+            "groupInvalid": {}
         };
     }
     static get events() {
@@ -355,12 +421,18 @@ export class DsRadioButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the `dsChecked` state changes."
+                    "text": "The `dsChange` event is emitted each time the `dsChecked` changes."
                 },
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "DsRadioButtonChangeEvent",
+                    "resolved": "{ value: string; checked: boolean; }",
+                    "references": {
+                        "DsRadioButtonChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button/ds-radio-button.tsx",
+                            "id": "src/components/01-base-components/ds-radio-button/ds-radio-button.tsx::DsRadioButtonChangeEvent"
+                        }
+                    }
                 }
             }, {
                 "method": "dsRadioButtonChecked",
@@ -370,13 +442,85 @@ export class DsRadioButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the radio button is set to checked state.\nUsed to notify a parent radio button group of a state change."
+                    "text": "The `dsRadioButtonChecked` event is emitted when the radio button is set to checked state.\nUsed to notify a parent radio button group of a state change."
                 },
                 "complexType": {
                     "original": "void",
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "dsRadioButtonFocused",
+                "name": "dsRadioButtonFocused",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsRadioButtonChecked` event is emitted when the radio button receives focus.\nIt provides the `dsId` of the checkbox as a string."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsRadioButtonBlurred",
+                "name": "dsRadioButtonBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsRadioButtonBlurred` event is emitted when the radio button loses focus.\nIt provides the `dsId` of the checkbox as a string."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsSubmitInvalid",
+                "name": "dsSubmitInvalid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsSubmitInvalid` event is emitted when the input is invalid when attempting to submit a form.\nCalling `dsCheckValidity()` method will also emit this event if the input is invalid."
+                },
+                "complexType": {
+                    "original": "DsSubmitInvalidEvent",
+                    "resolved": "{ flag: validityFlag; message: string; }",
+                    "references": {
+                        "DsSubmitInvalidEvent": {
+                            "location": "import",
+                            "path": "../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsValidity",
+                "name": "dsValidity",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsValidity` event is emitted when the input's validity state changes."
+                },
+                "complexType": {
+                    "original": "DsValidityEvent",
+                    "resolved": "{ flag: validityFlag; message?: string; }",
+                    "references": {
+                        "DsValidityEvent": {
+                            "location": "import",
+                            "path": "../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -435,6 +579,23 @@ export class DsRadioButton {
                     "text": "",
                     "tags": []
                 }
+            },
+            "dsCheckValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns true if input has no validity problems; false otherwise.\nFires an invalid event at the element in the latter case.",
+                    "tags": []
+                }
             }
         };
     }
@@ -445,5 +606,4 @@ export class DsRadioButton {
                 "methodName": "dsCheckedObserver"
             }];
     }
-    static get attachInternalsMemberName() { return "internals"; }
 }