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

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

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ label, required, name, disabled, invalid, alignment, hint, error, }) => {
-  return html ` <b2b-radio-group
+    return html ` <b2b-radio-group
     label="${label}"
     required="${required}"
     name="${name}"
@@ -21,14 +21,14 @@ const Template = ({ label, required, name, disabled, invalid, alignment, hint, e
   </b2b-radio-group>`;
 };
 const defaultArgs = {
-  label: 'Radio Button Group Label',
-  required: false,
-  disabled: false,
-  invalid: false,
-  name: 'default-group',
-  alignment: 'vertical',
-  hint: '',
-  error: '',
+    label: 'Radio Button Group Label',
+    required: false,
+    disabled: false,
+    invalid: false,
+    name: 'default-group',
+    alignment: 'vertical',
+    hint: '',
+    error: '',
 };
 export const story010Default = Template.bind({});
 story010Default.args = Object.assign({}, defaultArgs);
@@ -51,7 +51,7 @@ story060Required.storyName = 'Required';
 const controls = {};
 const radioGroupArgs = getArgTypes('b2b-radio-group', controls);
 export default {
-  title: 'Components/Form/Radio Group',
-  argTypes: radioGroupArgs,
-  viewMode: 'docs',
+    title: 'Components/Form/Radio Group',
+    argTypes: radioGroupArgs,
+    viewMode: 'docs',
 };

package/dist/collection/components/required-separator/required-separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -28,7 +28,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -151,7 +151,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-info-100: #003264;

package/dist/collection/components/required-separator/required-separator.e2e.js

@@ -1,17 +1,17 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('B2B Required Separator', () => {
-  let page;
-  it('should render', async () => {
-    page = await newE2EPage();
-    await page.setContent(`<b2b-required-separator></b2b-required-separator>`);
-    const element = await page.find('b2b-required-separator');
-    expect(element).not.toBeNull();
-  });
-  it('should change the label', async () => {
-    page = await newE2EPage();
-    await page.setContent(`<b2b-required-separator label="Required"></b2b-required-separator>`);
-    const element = await page.find({ text: 'Required' });
-    const label = element.textContent;
-    expect(label).toEqualText('Required');
-  });
+    let page;
+    it('should render', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-required-separator></b2b-required-separator>`);
+        const element = await page.find('b2b-required-separator');
+        expect(element).not.toBeNull();
+    });
+    it('should change the label', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-required-separator label="Required"></b2b-required-separator>`);
+        const element = await page.find({ text: 'Required' });
+        const label = element.textContent;
+        expect(label).toEqualText('Required');
+    });
 });

package/dist/collection/components/required-separator/required-separator.js

@@ -1,43 +1,43 @@
 import { h, Host } from "@stencil/core";
 export class B2BRequiredSeparator {
-  constructor() {
-    this.label = 'Pflichtfeld';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "b2b-required-separator__label" }, h("span", { class: "b2b-required-separator__asterisk" }, "* "), h("span", null, this.label)), h("b2b-separator", null)));
-  }
-  static get is() { return "b2b-required-separator"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["required-separator.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["required-separator.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The required label. Per default it is the german 'Pflichtfeld', but can be altered."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "'Pflichtfeld'"
-      }
-    };
-  }
+    constructor() {
+        this.label = 'Pflichtfeld';
+    }
+    render() {
+        return (h(Host, { key: '806ea7a07d11e3b791702d187bb3bbb66738f6f6' }, h("div", { key: 'e1654b40f5f247bc1a24b38ffae2c61394ec6bfe', class: "b2b-required-separator__label" }, h("span", { key: '6109f94d7fea7bcbb9cebd1b0ebb8e193205d5bd', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '7831bd53da18b99d45ff0fff3ede279ef09c8774' }, this.label)), h("b2b-separator", { key: '71458008aa52bfbfa533fc773b492f2f49883899' })));
+    }
+    static get is() { return "b2b-required-separator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["required-separator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["required-separator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The required label. Per default it is the german 'Pflichtfeld', but can be altered."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Pflichtfeld'"
+            }
+        };
+    }
 }

package/dist/collection/components/required-separator/required-separator.stories.js

@@ -1,20 +1,20 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ label }) => {
-  return html `<div style="width: 400px">
+    return html `<div style="width: 400px">
     <b2b-input required="true" label="Name"></b2b-input
     ><br /><b2b-required-separator label="${label}"></b2b-required-separator>
   </div>`;
 };
 const defaultArgs = {
-  label: 'Pflichtfeld',
+    label: 'Pflichtfeld',
 };
 export const story010Default = Template.bind({});
 story010Default.args = Object.assign({}, defaultArgs);
 story010Default.storyName = 'Default Separator';
 const requiredSeparatorArgs = getArgTypes('b2b-required-separator');
 export default {
-  title: 'Components/Form/Required Separator',
-  args: requiredSeparatorArgs,
-  viewMode: 'docs',
+    title: 'Components/Form/Required Separator',
+    args: requiredSeparatorArgs,
+    viewMode: 'docs',
 };

package/dist/collection/components/rounded-icon/rounded-icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -28,7 +28,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -151,7 +151,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-info-100: #003264;

package/dist/collection/components/rounded-icon/rounded-icon.js

@@ -1,89 +1,89 @@
 import { h, Host } from "@stencil/core";
 export class RoundedIconComponent {
-  constructor() {
-    this.color = 'var(--b2b-color-info-50)';
-    this.borderColor = undefined;
-    this.contentColor = 'var(--b2b-color-copy-default)';
-  }
-  render() {
-    return (h(Host, null, h("div", { style: {
-        ['background-color']: this.color,
-        ['border']: `1px solid ${this.borderColor || this.color}`,
-      }, class: {
-        'b2b-rounded-icon': true,
-      } }, h("div", { style: {
-        ['color']: this.contentColor,
-      } }, h("slot", { name: "icon" })), h("div", { style: {
-        ['color']: this.contentColor,
-      } }, h("slot", { name: "text" })))));
-  }
-  static get is() { return "b2b-rounded-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["rounded-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["rounded-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The color of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'var(--b2b-color-info-50)'"
-      },
-      "borderColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The color of the border of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
-        },
-        "attribute": "border-color",
-        "reflect": false
-      },
-      "contentColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The color of the text or icon within the circle.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
-        },
-        "attribute": "content-color",
-        "reflect": false,
-        "defaultValue": "'var(--b2b-color-copy-default)'"
-      }
-    };
-  }
+    constructor() {
+        this.color = 'var(--b2b-color-info-50)';
+        this.borderColor = undefined;
+        this.contentColor = 'var(--b2b-color-copy-default)';
+    }
+    render() {
+        return (h(Host, { key: '098173a09b64d33ef1adfcc177835b650cc158c6' }, h("div", { key: '4a71b1363c40921393757884ef4377fdda8472c6', style: {
+                ['background-color']: this.color,
+                ['border']: `1px solid ${this.borderColor || this.color}`,
+            }, class: {
+                'b2b-rounded-icon': true,
+            } }, h("div", { key: '6569353a28df4b0a1cd79734e485de84d2d4b7ab', style: {
+                ['color']: this.contentColor,
+            } }, h("slot", { key: '3a7c74b4af0bda33bff31d7ef801de0f6be6a671', name: "icon" })), h("div", { key: '30d9aa31e7cb86ab2417a3e21cb5fbed60f8eac3', style: {
+                ['color']: this.contentColor,
+            } }, h("slot", { key: '0b48e371e11032f485cb65a2f55fb98e79d3dfa9', name: "text" })))));
+    }
+    static get is() { return "b2b-rounded-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rounded-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rounded-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'var(--b2b-color-info-50)'"
+            },
+            "borderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the border of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
+                },
+                "attribute": "border-color",
+                "reflect": false
+            },
+            "contentColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the text or icon within the circle.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
+                },
+                "attribute": "content-color",
+                "reflect": false,
+                "defaultValue": "'var(--b2b-color-copy-default)'"
+            }
+        };
+    }
 }

package/dist/collection/components/rounded-icon/rounded-icon.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const TemplateIcon = ({ color, contentColor, iconName }) => {
-  return html `<div>
+    return html `<div>
     <b2b-rounded-icon color="${color}" content-color="${contentColor}">
       <b2b-icon slot="icon" icon="${iconName}"></b2b-icon>
     </b2b-rounded-icon>
@@ -9,13 +9,13 @@ const TemplateIcon = ({ color, contentColor, iconName }) => {
 };
 export const story010Icon = TemplateIcon.bind({});
 story010Icon.args = {
-  color: 'var(--b2b-color-success-50)',
-  contentColor: 'var(--b2b-color-success-100)',
-  iconName: 'b2b_icon-check',
+    color: 'var(--b2b-color-success-50)',
+    contentColor: 'var(--b2b-color-success-100)',
+    iconName: 'b2b_icon-check',
 };
 story010Icon.storyName = 'Icon Content';
 const TemplateText = ({ color, contentColor, textContent }) => {
-  return html `<div>
+    return html `<div>
     <b2b-rounded-icon color="${color}" content-color="${contentColor}">
       <span slot="text">${textContent}</span>
     </b2b-rounded-icon>
@@ -23,18 +23,18 @@ const TemplateText = ({ color, contentColor, textContent }) => {
 };
 export const story020Text = TemplateText.bind({});
 story020Text.args = {
-  color: 'black',
-  contentColor: 'white',
-  textContent: '1',
+    color: 'black',
+    contentColor: 'white',
+    textContent: '1',
 };
 story020Text.storyName = 'Text Content';
 const controls = {};
 const searchArgs = getArgTypes('b2b-rounded-icon', controls);
 export default {
-  title: 'Components/Assets/Rounded Icon',
-  argTypes: Object.assign({}, searchArgs),
-  viewmode: 'docs',
-  parameters: {
-    controls: { expanded: true },
-  },
+    title: 'Components/Assets/Rounded Icon',
+    argTypes: Object.assign({}, searchArgs),
+    viewmode: 'docs',
+    parameters: {
+        controls: { expanded: true },
+    },
 };

package/dist/collection/components/scrollable-container/scrollable-container.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -28,7 +28,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -151,7 +151,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-info-100: #003264;

package/dist/collection/components/scrollable-container/scrollable-container.js

@@ -1,19 +1,19 @@
 import { h, Host } from "@stencil/core";
 export class ScrollableContainerComponent {
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get is() { return "b2b-scrollable-container"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["scrollable-container.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["scrollable-container.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
+    render() {
+        return (h(Host, { key: '9bccd81de179f10ca6968a147a941955a253b472' }, h("slot", { key: 'dca1166a0e7dcca148aaa8094ba38ddaefeacef4' })));
+    }
+    static get is() { return "b2b-scrollable-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["scrollable-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["scrollable-container.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/scrollable-container/scrollable-container.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ testWidth, testHeight, testWhiteSpace }) => {
-  return html `
+    return html `
     <b2b-scrollable-container
       style=${`width: ${testWidth}; height: ${testHeight}`}>
       <b2b-paragraph style="white-space: ${testWhiteSpace}">
@@ -22,9 +22,9 @@ const Template = ({ testWidth, testHeight, testWhiteSpace }) => {
   `;
 };
 const defaultArgs = {
-  testWidth: '400px',
-  testHeight: '50px',
-  testWhiteSpace: 'inherit',
+    testWidth: '400px',
+    testHeight: '50px',
+    testWhiteSpace: 'inherit',
 };
 export const story010HorizontalScroll = Template.bind({});
 story010HorizontalScroll.args = Object.assign({}, defaultArgs);
@@ -34,27 +34,27 @@ story020VerticalScroll.args = Object.assign(Object.assign({}, defaultArgs), { te
 story020VerticalScroll.storyName = 'Vertical Scroll';
 const argsData = getArgTypes('b2b-scrollable-container');
 argsData.testWhiteSpace = {
-  options: ['normal', 'inherit'],
-  control: {
-    type: 'radio',
-  },
-  description: 'This is not a component prop. It is here to show the use of the white-space css property in the element',
+    options: ['normal', 'inherit'],
+    control: {
+        type: 'radio',
+    },
+    description: 'This is not a component prop. It is here to show the use of the white-space css property in the element',
 };
 argsData.testWidth = {
-  description: 'This is not a component prop. It is the width of the scrollable container.',
+    description: 'This is not a component prop. It is the width of the scrollable container.',
 };
 argsData.testHeight = {
-  description: 'This is not a component prop. It is the height of the scrollable container.',
+    description: 'This is not a component prop. It is the height of the scrollable container.',
 };
 export default {
-  title: 'Components/Content/Scrollable Container',
-  argTypes: argsData,
-  viewmode: 'docs',
-  parameters: {
-    controls: { expanded: true },
-    backgrounds: {
-      default: 'docsBackground',
-      values: [{ name: 'docsBackground', value: '#fff' }],
+    title: 'Components/Content/Scrollable Container',
+    argTypes: argsData,
+    viewmode: 'docs',
+    parameters: {
+        controls: { expanded: true },
+        backgrounds: {
+            default: 'docsBackground',
+            values: [{ name: 'docsBackground', value: '#fff' }],
+        },
     },
-  },
 };