@otto-de/b2b-core-components 1.9.0 → 1.10.0

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

@@ -1,280 +1,280 @@
 import { h, Host, } from "@stencil/core";
 export class RadioButtonGroupComponent {
-  constructor() {
-    this.toggleAllDisabled = () => {
-      let nodes = this.getChildNodes();
-      if (this.disabled) {
-        nodes.forEach(node => {
-          node.disabled = true;
-        });
-      }
-      else {
-        nodes.forEach(node => {
-          node.disabled = false;
-        });
-      }
-    };
-    this.toggleAllError = () => {
-      let nodes = this.getChildNodes();
-      if (this.invalid && !this.disabled) {
-        nodes.forEach(node => {
-          node.invalid = true;
-        });
-      }
-      else {
-        nodes.forEach(node => {
-          node.invalid = false;
+    constructor() {
+        this.toggleAllDisabled = () => {
+            let nodes = this.getChildNodes();
+            if (this.disabled) {
+                nodes.forEach(node => {
+                    node.disabled = true;
+                });
+            }
+            else {
+                nodes.forEach(node => {
+                    node.disabled = false;
+                });
+            }
+        };
+        this.toggleAllError = () => {
+            let nodes = this.getChildNodes();
+            if (this.invalid && !this.disabled) {
+                nodes.forEach(node => {
+                    node.invalid = true;
+                });
+            }
+            else {
+                nodes.forEach(node => {
+                    node.invalid = false;
+                });
+            }
+        };
+        this.getChildNodes = () => {
+            return Array.from(this.host.querySelectorAll(`b2b-radio-button`));
+        };
+        this.removeChildText = () => {
+            let nodes = this.getChildNodes();
+            nodes.forEach(node => {
+                node.error = undefined;
+                node.hint = undefined;
+            });
+        };
+        this.name = undefined;
+        this.label = undefined;
+        this.required = false;
+        this.alignment = 'vertical';
+        this.disabled = false;
+        this.invalid = false;
+        this.hint = undefined;
+        this.error = undefined;
+        this.currentValue = undefined;
+    }
+    handleRadioButtonChange(ev) {
+        this.currentValue = ev.detail.value;
+        this.b2bGroupChange.emit({
+            checked: ev.detail.checked,
+            value: ev.detail.value,
         });
-      }
-    };
-    this.getChildNodes = () => {
-      return Array.from(this.host.querySelectorAll(`b2b-radio-button`));
-    };
-    this.removeChildText = () => {
-      let nodes = this.getChildNodes();
-      nodes.forEach(node => {
-        node.error = undefined;
-        node.hint = undefined;
-      });
-    };
-    this.name = undefined;
-    this.label = undefined;
-    this.required = false;
-    this.alignment = 'vertical';
-    this.disabled = false;
-    this.invalid = false;
-    this.hint = undefined;
-    this.error = undefined;
-    this.currentValue = undefined;
-  }
-  handleRadioButtonChange(ev) {
-    this.currentValue = ev.detail.value;
-    this.b2bGroupChange.emit({
-      checked: ev.detail.checked,
-      value: ev.detail.value,
-    });
-  }
-  invalidChanged() {
-    this.toggleAllError();
-  }
-  disabledChanged() {
-    this.toggleAllDisabled();
-  }
-  componentDidLoad() {
-    this.toggleAllError();
-    this.toggleAllDisabled();
-    this.removeChildText();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'b2b-radio-group': true,
-        'b2b-radio-group--error': this.invalid && !this.disabled,
-        [`b2b-radio-group--${this.alignment}`]: true,
-      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("fieldset", null, h("div", { class: "b2b-radio-group-options" }, h("slot", null))), (this.hint !== undefined && !this.invalid) ||
-      (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
-  }
-  static get is() { return "b2b-radio-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["radio-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["radio-group.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The radio group name used to group them together programmatically. This is required."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The radio group label. This is optional."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds an asterisk at the end of the label to signify that the field is required."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "alignment": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'vertical' | 'horizontal'",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The alignment of the radio group. Can be vertical or horizontal, per default it is vertical."
-        },
-        "attribute": "alignment",
-        "reflect": false,
-        "defaultValue": "'vertical'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the radio group is disabled as a whole. Per default it is false."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "hint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A group hint text."
-        },
-        "attribute": "hint",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A group error text. It will only show if invalid is set to true."
-        },
-        "attribute": "error",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "currentValue": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "b2bGroupChange",
-        "name": "b2b-group-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted whenever a radio button in the group is clicked. Will emit the value of the currently selected radio button."
-        },
-        "complexType": {
-          "original": "RadioEventDetail",
-          "resolved": "RadioEventDetail<any>",
-          "references": {
-            "RadioEventDetail": {
-              "location": "import",
-              "path": "../../utils/interfaces/form.interface",
-              "id": "src/utils/interfaces/form.interface.d.ts::RadioEventDetail"
+    }
+    invalidChanged() {
+        this.toggleAllError();
+    }
+    disabledChanged() {
+        this.toggleAllDisabled();
+    }
+    componentDidLoad() {
+        this.toggleAllError();
+        this.toggleAllDisabled();
+        this.removeChildText();
+    }
+    render() {
+        return (h(Host, { key: '1227202b9b4dbea6eccdcd30a1bd6e77957ebe92' }, h("div", { key: '477cfebb0c8f7dd3facd378280edf1bcf5db836f', class: {
+                'b2b-radio-group': true,
+                'b2b-radio-group--error': this.invalid && !this.disabled,
+                [`b2b-radio-group--${this.alignment}`]: true,
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("fieldset", { key: 'fb374a0464cee1d190d1f5aa9b22d46daaa83738' }, h("div", { key: 'b134cf5438850cd805511ab6cddfb392182b860e', class: "b2b-radio-group-options" }, h("slot", { key: 'bdd987dca5a28e2c28a2715fcc2b5128e77a7b9d' }))), (this.hint !== undefined && !this.invalid) ||
+            (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
+    }
+    static get is() { return "b2b-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The radio group name used to group them together programmatically. This is required."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The radio group label. This is optional."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an asterisk at the end of the label to signify that the field is required."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The alignment of the radio group. Can be vertical or horizontal, per default it is vertical."
+                },
+                "attribute": "alignment",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the radio group is disabled as a whole. Per default it is false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A group hint text."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A group error text. It will only show if invalid is set to true."
+                },
+                "attribute": "error",
+                "reflect": false
             }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "invalid",
-        "methodName": "invalidChanged"
-      }, {
-        "propName": "disabled",
-        "methodName": "disabledChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "b2b-change",
-        "method": "handleRadioButtonChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "currentValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bGroupChange",
+                "name": "b2b-group-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever a radio button in the group is clicked. Will emit the value of the currently selected radio button."
+                },
+                "complexType": {
+                    "original": "RadioEventDetail",
+                    "resolved": "RadioEventDetail<any>",
+                    "references": {
+                        "RadioEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::RadioEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "invalid",
+                "methodName": "invalidChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "b2b-change",
+                "method": "handleRadioButtonChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/radio-group/radio-group.spec.js

@@ -2,30 +2,30 @@ import { newSpecPage } from "@stencil/core/testing";
 import { h } from "@stencil/core";
 import { RadioButtonGroupComponent } from "./radio-group";
 it('should render the checkbox group and not show a hint or an error unless specified', async () => {
-  const page = await newSpecPage({
-    components: [RadioButtonGroupComponent],
-    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test" })),
-  });
-  expect(page.root).toMatchSnapshot();
+    const page = await newSpecPage({
+        components: [RadioButtonGroupComponent],
+        template: () => (h("b2b-radio-group", { label: "test", name: "radio-test" })),
+    });
+    expect(page.root).toMatchSnapshot();
 });
 it('should render a group hint if a hint string is specified', async () => {
-  const page = await newSpecPage({
-    components: [RadioButtonGroupComponent],
-    template: () => (h("b2b-radio-group", { label: "test", hint: "this is a test hint", name: "radio-test" })),
-  });
-  expect(page.root).toMatchSnapshot();
+    const page = await newSpecPage({
+        components: [RadioButtonGroupComponent],
+        template: () => (h("b2b-radio-group", { label: "test", hint: "this is a test hint", name: "radio-test" })),
+    });
+    expect(page.root).toMatchSnapshot();
 });
 it('should render a group error if a hint string and an error are specified and the group is set to invalid', async () => {
-  const page = await newSpecPage({
-    components: [RadioButtonGroupComponent],
-    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", hint: "this is a test hint", error: "this is a test error", invalid: true })),
-  });
-  expect(page.root).toMatchSnapshot();
+    const page = await newSpecPage({
+        components: [RadioButtonGroupComponent],
+        template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", hint: "this is a test hint", error: "this is a test error", invalid: true })),
+    });
+    expect(page.root).toMatchSnapshot();
 });
 it('should switch to horizontal alignment if specified', async () => {
-  const page = await newSpecPage({
-    components: [RadioButtonGroupComponent],
-    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", alignment: "horizontal" })),
-  });
-  expect(page.root).toMatchSnapshot();
+    const page = await newSpecPage({
+        components: [RadioButtonGroupComponent],
+        template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", alignment: "horizontal" })),
+    });
+    expect(page.root).toMatchSnapshot();
 });