@otto-de/b2b-core-components 1.9.0-beta.2 → 1.10.0

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

@@ -1,257 +1,257 @@
 import { h, Host, } from "@stencil/core";
 export class CheckboxGroupComponent {
-  constructor() {
-    this.getChildNodes = () => {
-      return Array.from(this.host.querySelectorAll('b2b-checkbox'));
-    };
-    this.toggleAllDisabled = () => {
-      let nodes = this.getChildNodes();
-      if (this.disabled) {
-        nodes.forEach(node => {
-          node.disabled = true;
-        });
-      }
-      else {
-        nodes.forEach(node => {
-          node.groupDisabled = this.disabled;
-        });
-      }
-    };
-    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.getChildNodes = () => {
+            return Array.from(this.host.querySelectorAll('b2b-checkbox'));
+        };
+        this.toggleAllDisabled = () => {
+            let nodes = this.getChildNodes();
+            if (this.disabled) {
+                nodes.forEach(node => {
+                    node.disabled = true;
+                });
+            }
+            else {
+                nodes.forEach(node => {
+                    node.groupDisabled = this.disabled;
+                });
+            }
+        };
+        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.removeChildText = () => {
+            let nodes = this.getChildNodes();
+            nodes.forEach(node => {
+                node.error = undefined;
+                node.hint = undefined;
+            });
+        };
+        this.label = undefined;
+        this.required = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.alignment = 'vertical';
+        this.hint = undefined;
+        this.error = undefined;
+    }
+    handleCheckboxChange(ev) {
+        this.b2bGroupChange.emit({
+            value: ev.detail.value,
+            checked: ev.detail.checked,
         });
-      }
-    };
-    this.removeChildText = () => {
-      let nodes = this.getChildNodes();
-      nodes.forEach(node => {
-        node.error = undefined;
-        node.hint = undefined;
-      });
-    };
-    this.label = undefined;
-    this.required = false;
-    this.disabled = false;
-    this.invalid = false;
-    this.alignment = 'vertical';
-    this.hint = undefined;
-    this.error = undefined;
-  }
-  handleCheckboxChange(ev) {
-    this.b2bGroupChange.emit({
-      value: ev.detail.value,
-      checked: ev.detail.checked,
-    });
-  }
-  disabledChanged() {
-    this.toggleAllDisabled();
-  }
-  invalidChanged() {
-    this.toggleAllError();
-  }
-  componentDidLoad() {
-    this.toggleAllError();
-    this.removeChildText();
-    if (this.disabled) {
-      this.toggleAllDisabled();
     }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'b2b-checkbox-group': true,
-        'b2b-checkbox-group--error': this.invalid && !this.disabled,
-        [`b2b-checkbox-group--${this.alignment}`]: true,
-      } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", null, h("div", { class: "b2b-checkbox-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-checkbox-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["checkbox-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["checkbox-group.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label for the checkbox group. 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"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the checkbox group as a whole is disabled. Default state is false."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the checkbox group as a whole is invalid. Set to true to display a group error."
-        },
-        "attribute": "invalid",
-        "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 checkbox group. Per default it is vertical"
-        },
-        "attribute": "alignment",
-        "reflect": false,
-        "defaultValue": "'vertical'"
-      },
-      "hint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The checkbox 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": "The checkbox group error message. Is displayed when invalid is set to true."
-        },
-        "attribute": "error",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "b2bGroupChange",
-        "name": "b2b-group-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits whenever a checkbox within the group is checked or unchecked."
-        },
-        "complexType": {
-          "original": "CheckboxEventDetail",
-          "resolved": "CheckboxEventDetail<any>",
-          "references": {
-            "CheckboxEventDetail": {
-              "location": "import",
-              "path": "../../utils/interfaces/form.interface",
-              "id": "src/utils/interfaces/form.interface.d.ts::CheckboxEventDetail"
-            }
-          }
+    disabledChanged() {
+        this.toggleAllDisabled();
+    }
+    invalidChanged() {
+        this.toggleAllError();
+    }
+    componentDidLoad() {
+        this.toggleAllError();
+        this.removeChildText();
+        if (this.disabled) {
+            this.toggleAllDisabled();
         }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "disabled",
-        "methodName": "disabledChanged"
-      }, {
-        "propName": "invalid",
-        "methodName": "invalidChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "b2b-change",
-        "method": "handleCheckboxChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    render() {
+        return (h(Host, { key: '17f56d642b6ef6a4157a51178c4e1d604755f698' }, h("div", { key: 'caf98c3c46fb753dad491e2b1e98ff212e7c6a93', class: {
+                'b2b-checkbox-group': true,
+                'b2b-checkbox-group--error': this.invalid && !this.disabled,
+                [`b2b-checkbox-group--${this.alignment}`]: true,
+            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '0b9b7dd931a8059a6ed0e53a49e799076e1d33ea' }, h("div", { key: '4385c56f2f7d570abfa58877b623b82f1006cafa', class: "b2b-checkbox-group__options" }, h("slot", { key: 'a15f2bd94e9167701a85cbf2981a268325bc4c85' }))), (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-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the checkbox group. 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"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkbox group as a whole is disabled. Default state is false."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkbox group as a whole is invalid. Set to true to display a group error."
+                },
+                "attribute": "invalid",
+                "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 checkbox group. Per default it is vertical"
+                },
+                "attribute": "alignment",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The checkbox 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": "The checkbox group error message. Is displayed when invalid is set to true."
+                },
+                "attribute": "error",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bGroupChange",
+                "name": "b2b-group-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever a checkbox within the group is checked or unchecked."
+                },
+                "complexType": {
+                    "original": "CheckboxEventDetail",
+                    "resolved": "CheckboxEventDetail<any>",
+                    "references": {
+                        "CheckboxEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::CheckboxEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }, {
+                "propName": "invalid",
+                "methodName": "invalidChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "b2b-change",
+                "method": "handleCheckboxChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

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

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

@@ -1,9 +1,9 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, disabled, invalid, hint, error, alignment, }) => {
-  const firstLabel = 'One';
-  const secondLabel = 'Two';
-  return html `<b2b-checkbox-group
+    const firstLabel = 'One';
+    const secondLabel = 'Two';
+    return html `<b2b-checkbox-group
     label="${label}"
     required="${required}"
     disabled="${disabled}"
@@ -16,13 +16,13 @@ const Template = ({ label, required, disabled, invalid, hint, error, alignment,
   </b2b-checkbox-group>`;
 };
 const defaultArgs = {
-  label: 'Checkbox Group Label',
-  required: false,
-  disabled: false,
-  invalid: false,
-  alignment: 'vertical',
-  hint: '',
-  error: '',
+    label: 'Checkbox Group Label',
+    required: false,
+    disabled: false,
+    invalid: false,
+    alignment: 'vertical',
+    hint: '',
+    error: '',
 };
 export const story010Default = Template.bind({});
 story010Default.args = Object.assign({}, defaultArgs);
@@ -45,7 +45,7 @@ story060Required.storyName = 'Required';
 const controls = {};
 const checkboxGroupArgs = getArgTypes('b2b-checkbox-group', controls);
 export default {
-  title: 'Components/Form/Checkbox Group',
-  argTypes: checkboxGroupArgs,
-  viewMode: 'docs',
+    title: 'Components/Form/Checkbox Group',
+    argTypes: checkboxGroupArgs,
+    viewMode: 'docs',
 };