@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d6239e2

package/dist/collection/components/six-radio/six-radio.js

@@ -1,4 +1,5 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
+import { EventListeners } from "../../utils/event-listeners";
 let id = 0;
 /**
  * @since 1.0
@@ -14,406 +15,333 @@ let id = 0;
  * @part label - The radio label.
  */
 export class SixRadio {
-  constructor() {
-    this.inputId = `radio-${++id}`;
-    this.labelId = `radio-label-${id}`;
-    /** default state whether the radio button should be checked or not when resetting */
-    this.defaultState = false;
-    this.handleClick = () => {
-      if (this.nativeInput != null) {
-        this.checked = this.nativeInput.checked;
-      }
-    };
-    this.handleBlur = () => {
-      this.hasFocus = false;
-      this.sixBlur.emit();
-    };
-    this.handleFocus = () => {
-      this.hasFocus = true;
-      this.sixFocus.emit();
-    };
-    this.handleKeyDown = (event) => {
-      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-        const radios = this.getAllRadios().filter((radio) => !radio.disabled);
-        const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-        let index = radios.indexOf(this.host) + incr;
-        if (index < 0)
-          index = radios.length - 1;
-        if (index > radios.length - 1)
-          index = 0;
-        this.getAllRadios().map((radio) => (radio.checked = false));
-        radios[index].setFocus();
-        radios[index].checked = true;
-        event.preventDefault();
-      }
-    };
-    this.handleMouseDown = (event) => {
-      var _a;
-      // Prevent clicks on the label from briefly blurring the input
-      event.preventDefault();
-      (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    this.hasFocus = false;
-    this.name = '';
-    this.value = 'on';
-    this.disabled = false;
-    this.checked = false;
-    this.invalid = false;
-  }
-  handleCheckedChange() {
-    if (this.checked) {
-      this.getSiblingRadios().map((radio) => (radio.checked = false));
-    }
-    if (this.nativeInput != null) {
-      this.nativeInput.checked = this.checked;
-      this.sixChange.emit();
-    }
-  }
-  componentWillLoad() {
-    this.defaultState = this.checked;
-  }
-  /** Sets focus on the radio. */
-  async setFocus(options) {
-    var _a;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
-  }
-  /** Removes focus from the radio. */
-  async removeFocus() {
-    var _a;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    if (this.nativeInput == null) {
-      return true;
-    }
-    return this.nativeInput.validity.valid;
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    if (this.nativeInput != null) {
-      this.nativeInput.setCustomValidity(message);
-      this.invalid = !this.nativeInput.checkValidity();
-    }
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    var _a;
-    this.checked = this.defaultState;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
-    this.invalid = false;
-  }
-  getAllRadios() {
-    const form = this.host.closest('six-form, form') || document.body;
-    if (this.name === '')
-      return [];
-    return [...form.querySelectorAll('six-radio')].filter((radio) => radio.name === this.name);
-  }
-  getSiblingRadios() {
-    return this.getAllRadios().filter((radio) => radio !== this.host);
-  }
-  render() {
-    return (h("label", { part: "base", class: {
-        radio: true,
-        'radio--checked': this.checked,
-        'radio--disabled': this.disabled,
-        'radio--focused': this.hasFocus,
-      }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "radio__control" }, h("span", { part: "checked-icon", class: "radio__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { fill: "currentColor" }, h("circle", { cx: "8", cy: "8", r: "5" }))))), h("input", { ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { part: "label", id: this.labelId, class: "radio__label" }, h("slot", null))));
-  }
-  static get is() { return "six-radio"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-radio.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-radio.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The radio's name attribute."
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The radio's value attribute."
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "'on'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the radio."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "checked": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to draw the radio in a checked state."
-        },
-        "attribute": "checked",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\nprovided by the `setCustomValidity` method."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFocus": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixBlur",
-        "name": "six-radio-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control loses focus."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        }
-      }, {
-        "method": "sixChange",
-        "name": "six-radio-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control's checked state changes."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        }
-      }, {
-        "method": "sixFocus",
-        "name": "six-radio-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control gains focus."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
+    constructor() {
+        this.inputId = `radio-${++id}`;
+        this.labelId = `radio-label-${id}`;
+        this.eventListeners = new EventListeners();
+        this.handleClick = () => {
+            if (this.nativeInput != null) {
+                this.checked = this.nativeInput.checked;
+                this.sixChange.emit();
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "FocusOptions": {
-              "location": "global"
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleKeyDown = (keyboardEvent) => {
+            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {
+                const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+                const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;
+                let index = radios.indexOf(this.host) + incr;
+                if (index < 0)
+                    index = radios.length - 1;
+                if (index > radios.length - 1)
+                    index = 0;
+                this.getAllRadios().forEach((radio) => (radio.checked = false));
+                radios[index].setFocus();
+                radios[index].checked = true;
+                radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));
+                keyboardEvent.preventDefault();
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the radio.",
-          "tags": []
+        };
+        this.handleMouseDown = (event) => {
+            var _a;
+            // Prevent clicks on the label from briefly blurring the input
+            event.preventDefault();
+            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.hasFocus = false;
+        this.name = '';
+        this.value = 'on';
+        this.disabled = false;
+        this.checked = false;
+        this.invalid = false;
+    }
+    handleCheckedChange() {
+        if (this.checked) {
+            this.getSiblingRadios().forEach((radio) => (radio.checked = false));
         }
-      },
-      "removeFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Removes focus from the radio.",
-          "tags": []
+        if (this.nativeInput != null) {
+            this.nativeInput.checked = this.checked;
         }
-      },
-      "reportValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-          "tags": []
-        }
-      },
-      "checkValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Checks for validity.",
-          "tags": []
+    }
+    handleNameChange(name) {
+        if (this.nativeInput != null) {
+            this.nativeInput.name = name;
         }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    connectedCallback() {
+        this.eventListeners.forward('six-radio-change', 'change', this.host);
+        this.eventListeners.forward('six-radio-blur', 'blur', this.host);
+        this.eventListeners.forward('six-radio-focus', 'focus', this.host);
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    /** Sets focus on the radio. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the radio. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    getAllRadios() {
+        const form = this.host.closest('form') || document.body;
+        if (this.name === '')
+            return [];
+        return [...form.querySelectorAll('six-radio')].filter((radio) => radio.name === this.name);
+    }
+    getSiblingRadios() {
+        return this.getAllRadios().filter((radio) => radio !== this.host);
+    }
+    render() {
+        return (h("label", { key: '1d4d0be85edb89c166b6f22ea72498b9c8d8cea8', part: "base", class: {
+                radio: true,
+                'radio--checked': this.checked,
+                'radio--disabled': this.disabled,
+                'radio--focused': this.hasFocus,
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '76b4c8511865e24af02bb954155c3b73d005b0af', part: "control", class: "radio__control" }, h("span", { key: '8a236d9faf510c005b77ff71917f79928478f558', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'a09807981249028dab896dd1363455f742ffc3ae', viewBox: "0 0 16 16" }, h("g", { key: '2794897dc88c3c531a560966702eee882a0ad34f', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: 'e698f2e02915293aa3d61191971a009e1075882a', fill: "currentColor" }, h("circle", { key: '0c08e9a157e5fe0155bb2859a70a302549a35129', cx: "8", cy: "8", r: "5" }))))), h("input", { key: 'ca747587d281cb058c73dff36bbbb24f92c513ef', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '9e4de8ac9871f4ed19960842ff4da889f03b697b', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: 'cb241e2debf683cc9f799606a48724f824c7dbfe' }))));
+    }
+    static get is() { return "six-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The radio's name attribute."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The radio's value attribute."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "'on'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the radio."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw the radio in a checked state."
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-          "tags": []
-        }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixBlur",
+                "name": "six-radio-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixChange",
+                "name": "six-radio-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's checked state changes."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixFocus",
+                "name": "six-radio-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control gains focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the radio.",
+                    "tags": []
+                }
+            },
+            "removeFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the radio.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "checked",
-        "methodName": "handleCheckedChange"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "name",
+                "methodName": "handleNameChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-radio.js.map