@otto-de/b2b-core-components 1.6.1 → 1.8.0

package/dist/collection/components/pagination/pagination.stories.js

@@ -1,9 +1,8 @@
-import { getArgTypes } from '../../docs/config/utils';
-import { html } from 'lit-html';
-import paginationDocs from './pagination.docs.mdx';
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
 const Template = ({ totalPages, activePage }) => {
-  return html `<b2b-pagination
-    total-pages="${totalPages}"
+  return html `<b2b-pagination
+    total-pages="${totalPages}"
     active-page="${activePage}"></b2b-pagination>`;
 };
 const defaultArgs = {
@@ -27,8 +26,5 @@ export default {
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },
-    docs: {
-      page: paginationDocs,
-    },
   },
 };

package/dist/collection/components/paragraph/paragraph.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/paragraph/paragraph.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Paragraph', () => {
   let page;
   beforeEach(async () => {

package/dist/collection/components/paragraph/paragraph.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * Paragraph component to render text content.
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45

package/dist/collection/components/paragraph/paragraph.stories.js

@@ -1,19 +1,18 @@
-import { html } from 'lit-html';
-import docs from './paragraph.docs.mdx';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const template = ({ weight, size, align }) => {
-  return html `<b2b-paragraph weight="${weight}" size="${size}" align="${align}">
-    Far far away, behind the word mountains, far from the countries Vokalia and
-    Consonantia, there live the blind texts. Separated they live in
-    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-    A small river named Duden flows by their place and supplies it with the
-    necessary regelialia. It is a paradisematic country, in which roasted parts
-    of sentences fly into your mouth. Even the all-powerful Pointing has no
-    control about the blind texts it is an almost unorthographic life One day
-    however a small line of blind text by the name of Lorem Ipsum decided to
-    leave for the far World of Grammar. The Big Oxmox advised her not to do so,
-    because there were thousands of bad Commas, wild Question Marks and devious
-    Semikoli, but the Little Blind Text didn’t listen.
+  return html `<b2b-paragraph weight="${weight}" size="${size}" align="${align}">
+    Far far away, behind the word mountains, far from the countries Vokalia and
+    Consonantia, there live the blind texts. Separated they live in
+    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
+    A small river named Duden flows by their place and supplies it with the
+    necessary regelialia. It is a paradisematic country, in which roasted parts
+    of sentences fly into your mouth. Even the all-powerful Pointing has no
+    control about the blind texts it is an almost unorthographic life One day
+    however a small line of blind text by the name of Lorem Ipsum decided to
+    leave for the far World of Grammar. The Big Oxmox advised her not to do so,
+    because there were thousands of bad Commas, wild Question Marks and devious
+    Semikoli, but the Little Blind Text didn’t listen.
   </b2b-paragraph>`;
 };
 const defaultArgs = {
@@ -36,17 +35,9 @@ story040Center.storyName = 'Center aligned text';
 export const story050Right = template.bind({});
 story050Right.args = Object.assign(Object.assign({}, defaultArgs), { align: 'right' });
 story050Right.storyName = 'Right aligned text';
-export const story900Playground = template.bind({});
-story900Playground.args = Object.assign({}, defaultArgs);
-story900Playground.storyName = 'Playground';
 const argTypes = getArgTypes('b2b-paragraph');
 export default {
   title: 'Components/Content/Paragraph',
   argTypes: argTypes,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: docs,
-    },
-  },
 };

package/dist/collection/components/radio/radio.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/radio/radio.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('b2b-radio', () => {
   let page;
   beforeEach(async () => {

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

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class B2bRadioButtonComponent {
   constructor() {
     this.handleFormData = (event) => {
@@ -249,7 +249,8 @@ export class B2bRadioButtonComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -268,7 +269,8 @@ export class B2bRadioButtonComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -288,7 +290,8 @@ export class B2bRadioButtonComponent {
           "references": {
             "RadioEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::RadioEventDetail"
             }
           }
         }

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

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { B2bRadioButtonComponent } from './radio';
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { B2bRadioButtonComponent } from "./radio";
 it('should render the radio button', async () => {
   const page = await newSpecPage({
     components: [B2bRadioButtonComponent],

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

@@ -1,16 +1,15 @@
-import { getArgTypes } from '../../docs/config/utils';
-import radioButtonDocs from './radio.docs.mdx';
-import { html } from 'lit-html';
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
 const Template = ({ label, required, name, checked, disabled, invalid, value, hint, error, }) => {
-  return html ` <b2b-radio-button
-    label="${label}"
-    required="${required}"
-    name="${name}"
-    checked="${checked}"
-    value="${value}"
-    invalid="${invalid}"
-    disabled="${disabled}"
-    hint="${hint}"
+  return html ` <b2b-radio-button
+    label="${label}"
+    required="${required}"
+    name="${name}"
+    checked="${checked}"
+    value="${value}"
+    invalid="${invalid}"
+    disabled="${disabled}"
+    hint="${hint}"
     error="${error}"></b2b-radio-button>`;
 };
 const defaultArgs = {
@@ -45,9 +44,4 @@ export default {
   title: 'Components/Form/Radio Button',
   argTypes: radioButtonArgs,
   viewmode: 'docs',
-  parameters: {
-    docs: {
-      page: radioButtonDocs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,13 +1,13 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Radio-Group', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-            <b2b-radio-group label="test label" name="test-group">
-                <b2b-radio-button label="one" value="one" name="test-group" id="one" hint="test" error="test"></b2b-radio-button>
-                <b2b-radio-button label="two" value="two" name="test-group" id="two"</b2b-radio-button>
-            </b2b-radio-group>
+    await page.setContent(`
+            <b2b-radio-group label="test label" name="test-group">
+                <b2b-radio-button label="one" value="one" name="test-group" id="one" hint="test" error="test"></b2b-radio-button>
+                <b2b-radio-button label="two" value="two" name="test-group" id="two"</b2b-radio-button>
+            </b2b-radio-group>
         `);
   });
   it('should render the radio group component', async () => {

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

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class RadioButtonGroupComponent {
   constructor() {
     this.toggleAllDisabled = () => {
@@ -251,7 +251,8 @@ export class RadioButtonGroupComponent {
           "references": {
             "RadioEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::RadioEventDetail"
             }
           }
         }

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

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { RadioButtonGroupComponent } from './radio-group';
+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],

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

@@ -1,24 +1,23 @@
-import { getArgTypes } from '../../docs/config/utils';
-import radioGroupDocs from './radio-group.docs.mdx';
-import { html } from 'lit-html';
+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
-    label="${label}"
-    required="${required}"
-    name="${name}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    alignment="${alignment}"
-    hint="${hint}"
-    error="${error}">
-    <b2b-radio-button
-      label="Option 1"
-      name="${name}"
-      value="one"></b2b-radio-button>
-    <b2b-radio-button
-      label="Option 2"
-      name="${name}"
-      value="two"></b2b-radio-button>
+  return html ` <b2b-radio-group
+    label="${label}"
+    required="${required}"
+    name="${name}"
+    disabled="${disabled}"
+    invalid="${invalid}"
+    alignment="${alignment}"
+    hint="${hint}"
+    error="${error}">
+    <b2b-radio-button
+      label="Option 1"
+      name="${name}"
+      value="one"></b2b-radio-button>
+    <b2b-radio-button
+      label="Option 2"
+      name="${name}"
+      value="two"></b2b-radio-button>
   </b2b-radio-group>`;
 };
 const defaultArgs = {
@@ -55,9 +54,4 @@ export default {
   title: 'Components/Form/Radio Group',
   argTypes: radioGroupArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: radioGroupDocs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B Required Separator', () => {
   let page;
   it('should render', async () => {

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class B2BRequiredSeparator {
   constructor() {
     this.label = 'Pflichtfeld';

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

@@ -1,10 +1,9 @@
-import { getArgTypes } from '../../docs/config/utils';
-import { html } from 'lit-html';
-import requiredSeparatorDocs from './required-separator.docs.mdx';
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
 const Template = ({ label }) => {
-  return html `<div style="width: 400px">
-    <b2b-input required="true" label="Name"></b2b-input
-    ><br /><b2b-required-separator label="${label}"></b2b-required-separator>
+  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 = {
@@ -18,9 +17,4 @@ export default {
   title: 'Components/Form/Required Separator',
   args: requiredSeparatorArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: requiredSeparatorDocs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class RoundedIconComponent {
   constructor() {
     this.color = 'var(--b2b-color-info-50)';
@@ -43,7 +43,7 @@ export class RoundedIconComponent {
         "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"
+          "text": "The color of the circle around the icon or text.\r\nUse any type including hex, rgb or css custom properties\r\nas long as you pass it as a string"
         },
         "attribute": "color",
         "reflect": false,
@@ -61,7 +61,7 @@ export class RoundedIconComponent {
         "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"
+          "text": "The color of the border of the circle around the icon or text.\r\nUse any type including hex, rgb or css custom properties\r\nas long as you pass it as a string"
         },
         "attribute": "border-color",
         "reflect": false
@@ -78,7 +78,7 @@ export class RoundedIconComponent {
         "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"
+          "text": "The color of the text or icon within the circle.\r\nUse any type including hex, rgb or css custom properties\r\nas long as you pass it as a string"
         },
         "attribute": "content-color",
         "reflect": false,

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

@@ -1,11 +1,10 @@
-import { getArgTypes } from '../../docs/config/utils';
-import { html } from 'lit-html';
-import RoundedIconDocs from './rounded-icon.docs.mdx';
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
 const TemplateIcon = ({ color, contentColor, iconName }) => {
-  return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
-      <b2b-icon slot="icon" icon="${iconName}"></b2b-icon>
-    </b2b-rounded-icon>
+  return html `<div>
+    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
+      <b2b-icon slot="icon" icon="${iconName}"></b2b-icon>
+    </b2b-rounded-icon>
   </div>`;
 };
 export const story010Icon = TemplateIcon.bind({});
@@ -16,10 +15,10 @@ story010Icon.args = {
 };
 story010Icon.storyName = 'Icon Content';
 const TemplateText = ({ color, contentColor, textContent }) => {
-  return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
-      <span slot="text">${textContent}</span>
-    </b2b-rounded-icon>
+  return html `<div>
+    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
+      <span slot="text">${textContent}</span>
+    </b2b-rounded-icon>
   </div>`;
 };
 export const story020Text = TemplateText.bind({});
@@ -37,8 +36,5 @@ export default {
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },
-    docs: {
-      page: RoundedIconDocs,
-    },
   },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class ScrollableContainerComponent {
   render() {
     return (h(Host, null, h("slot", null)));

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

@@ -1,25 +1,24 @@
-import { getArgTypes } from '../../docs/config/utils';
-import { html } from 'lit-html';
-import componentDocs from './scrollable-container.docs.mdx';
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
 const Template = ({ testWidth, testHeight, testWhiteSpace }) => {
-  return html `
-    <b2b-scrollable-container
-      style=${`width: ${testWidth}; height: ${testHeight}`}>
-      <b2b-paragraph style="white-space: ${testWhiteSpace}">
-        Far far away, behind the word mountains, far from the countries Vokalia
-        and Consonantia, there live the blind texts. Separated they live in
-        Bookmarksgrove right at the coast of the Semantics, a large language
-        ocean. A small river named Duden flows by their place and supplies it
-        with the necessary regelialia. It is a paradisematic country, in which
-        roasted parts of sentences fly into your mouth. Even the all-powerful
-        Pointing has no control about the blind texts it is an almost
-        unorthographic life One day however a small line of blind text by the
-        name of Lorem Ipsum decided to leave for the far World of Grammar. The
-        Big Oxmox advised her not to do so, because there were thousands of bad
-        Commas, wild Question Marks and devious Semikoli, but the Little Blind
-        Text didn’t listen.
-      </b2b-paragraph>
-    </b2b-scrollable-container>
+  return html `
+    <b2b-scrollable-container
+      style=${`width: ${testWidth}; height: ${testHeight}`}>
+      <b2b-paragraph style="white-space: ${testWhiteSpace}">
+        Far far away, behind the word mountains, far from the countries Vokalia
+        and Consonantia, there live the blind texts. Separated they live in
+        Bookmarksgrove right at the coast of the Semantics, a large language
+        ocean. A small river named Duden flows by their place and supplies it
+        with the necessary regelialia. It is a paradisematic country, in which
+        roasted parts of sentences fly into your mouth. Even the all-powerful
+        Pointing has no control about the blind texts it is an almost
+        unorthographic life One day however a small line of blind text by the
+        name of Lorem Ipsum decided to leave for the far World of Grammar. The
+        Big Oxmox advised her not to do so, because there were thousands of bad
+        Commas, wild Question Marks and devious Semikoli, but the Little Blind
+        Text didn’t listen.
+      </b2b-paragraph>
+    </b2b-scrollable-container>
   `;
 };
 const defaultArgs = {
@@ -53,9 +52,6 @@ export default {
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },
-    docs: {
-      page: componentDocs,
-    },
     backgrounds: {
       default: 'docsBackground',
       values: [{ name: 'docsBackground', value: '#fff' }],

package/dist/collection/components/search/search.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Search', () => {
   let page;
   const optionsList = ['option1', 'option2', 'option3'];
@@ -16,8 +16,8 @@ describe('B2B-Search', () => {
   };
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-search placeholder='search here'></b2b-search>
+    await page.setContent(`
+      <b2b-search placeholder='search here'></b2b-search>
     `);
   });
   it('should register input text when enabled', async () => {

package/dist/collection/components/search/search.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class SearchComponent {
   constructor() {
     this.onSearchClicked = () => {
@@ -121,7 +121,8 @@ export class SearchComponent {
           "references": {
             "SearchClickEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::SearchClickEventDetail"
             }
           }
         }