@uh-design-system/component-library 0.6.1-rc.0 → 0.7.0

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

@@ -1,20 +1,22 @@
 import { Fragment, h } from "@stencil/core";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
-import { getRequiredText, required } from "../../../utils/controls/controlUtils";
+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;
     dsRadioButtonFocused;
     dsRadioButtonBlurred;
-    el;
-    internals;
+    dsSubmitInvalid;
+    dsValidity;
     dsId = radioButtonIdGenerator.next().value;
+    dsName = this.dsId;
     dsErrorsDisabled = false;
     dsValue = this.dsId;
     dsLegend;
@@ -26,64 +28,49 @@ export class DsRadioButton {
     dsErrorText = '';
     focusable = true;
     groupInvalid = false;
-    validationMessage;
-    showInvalidState = 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(this.dsValue.toString());
         this.dsRadioButtonChecked.emit();
-        if (isValidation('client')) {
-            this.validationMessage = this.getValidationMessage();
-        }
+    }
+    async dsCheckValidity() {
+        return this.inputElement?.checkValidity();
     }
     dsCheckedObserver(isChecked) {
-        this.dsChange.emit(isChecked);
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !isChecked }, required(), this.el.shadowRoot?.querySelector('input'));
+        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;
+            }
         }
-        this.internals?.setFormValue(isChecked ? this.dsValue : null);
     }
-    inheritedAttributes = {};
-    getValidationMessage = () => !this.dsErrorsDisabled ? this.dsErrorText || (this.showInvalidState ? this.internals?.validationMessage : '') || this.inputElem?.validationMessage : '';
-    getInvalid = () => {
-        if (this.radioGroup && !!this.groupInvalid) {
-            return true;
-        }
-        if (!this.dsErrorsDisabled && !!this.dsErrorText) {
-            return true;
-        }
-        if (this.showInvalidState && !!this.internals?.validationMessage) {
-            return true;
-        }
-        return this.inputElem ? !this.inputElem.validity.valid : false;
-    };
     componentWillLoad() {
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-invalid']),
-            ...inheritAttributes(this, this.el, ['value']),
+            ...inheritAttributes(this, this.el, ['value', 'name', 'id']),
         };
         this.initialChecked = this.dsChecked;
     }
-    componentDidLoad() {
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !this.dsChecked }, required(), this.el.shadowRoot?.querySelector('input'));
-        }
-    }
     formResetCallback() {
+        this.dsErrorText = '';
         this.dsChecked = this.initialChecked;
-        this.showInvalidState = false;
         this.radioGroup = this.el.closest('ds-radio-button-group');
         if (this.radioGroup) {
             this.groupInvalid = !!this.radioGroup.dsErrorText;
+            this.dsErrorText = this.radioGroup.dsErrorText;
         }
     }
     connectedCallback() {
@@ -91,6 +78,7 @@ export class DsRadioButton {
         if (this.radioGroup) {
             this.updateCheckedState();
             this.groupInvalid = !!this.radioGroup.dsErrorText;
+            this.dsErrorText = this.radioGroup.dsErrorText;
             this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
             this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateGroupInvalidState);
         }
@@ -102,29 +90,50 @@ export class DsRadioButton {
         }
         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());
     };
     updateGroupInvalidState = (e) => {
-        this.groupInvalid = e.detail;
+        this.groupInvalid = !!e.detail;
+        this.dsErrorText = e.detail;
     };
     handleInput = () => {
-        if (!this.showInvalidState) {
-            this.showInvalidState = true;
-        }
         this.setChecked();
     };
     handleFocus = () => {
         this.dsRadioButtonFocused.emit(this.dsId);
     };
     handleBlur = () => {
-        if (!this.showInvalidState) {
-            this.showInvalidState = true;
+        this.dsRadioButtonBlurred.emit(this.dsId);
+        if (this.groupInvalid || this.dsErrorsDisabled) {
+            return;
         }
-        if (isValidation('client')) {
-            this.validationMessage = this.getValidationMessage();
+        const validityState = this.inputElement?.validity;
+        for (const key in validityState) {
+            if (validityState[key]) {
+                this.dsValidity.emit({
+                    flag: key,
+                    message: validityMessage(key),
+                });
+                break;
+            }
         }
-        this.dsRadioButtonBlurred.emit(this.dsId);
     };
     getLegendText = () => {
         if (this.dsRequired) {
@@ -141,21 +150,20 @@ export class DsRadioButton {
         return (h("slot", { name: "icon" }, h("div", { class: iconClass, "aria-hidden": "true" }, h("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "10", y: "10", width: "24", height: "24", rx: "12", fill: "white" }), h("circle", { class: outerCircleClasses, cx: "22", cy: "22", r: "10", fill: "white", stroke: "#005A94", "stroke-width": "2" }), this.dsChecked && h("circle", { class: innerCircleClasses, cx: "22", cy: "22", r: "6", fill: "#005A94" })))));
     }
     renderRadioButton() {
-        const isInvalid = this.getInvalid();
         const classes = classNames('ds-radio-button', {
             'ds-radio-button--disabled': this.dsDisabled,
-            'ds-radio-button--invalid': isInvalid,
+            '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, onFocus: this.handleFocus, onBlur: this.handleBlur, checked: this.dsChecked, tabindex: tabindex, required: this.dsRequired, "aria-invalid": isInvalid, ...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() {
@@ -165,8 +173,7 @@ export class DsRadioButton {
         return this.renderRadioButton();
     }
     static get is() { return "ds-radio-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
+    static get encapsulation() { return "scoped"; }
     static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
@@ -200,6 +207,26 @@ export class DsRadioButton {
                 "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",
@@ -213,7 +240,7 @@ export class DsRadioButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Can be used to disable showing validation messages.\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,
@@ -360,7 +387,7 @@ export class DsRadioButton {
             "dsErrorText": {
                 "type": "string",
                 "attribute": "ds-error-text",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -382,9 +409,7 @@ export class DsRadioButton {
     static get states() {
         return {
             "focusable": {},
-            "groupInvalid": {},
-            "validationMessage": {},
-            "showInvalidState": {}
+            "groupInvalid": {}
         };
     }
     static get events() {
@@ -396,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",
@@ -411,7 +442,7 @@ 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",
@@ -426,7 +457,7 @@ export class DsRadioButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "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",
@@ -441,13 +472,55 @@ export class DsRadioButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "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() {
@@ -506,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": []
+                }
             }
         };
     }
@@ -516,5 +606,4 @@ export class DsRadioButton {
                 "methodName": "dsCheckedObserver"
             }];
     }
-    static get attachInternalsMemberName() { return "internals"; }
 }