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

package/dist/collection/components/tab/tab.css

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

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

@@ -3,27 +3,27 @@ describe('B2B Tab Group', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-        <b2b-tab-group>
-        <b2b-tab slot="tab">
-          First Tab
-        </b2b-tab>
-        <b2b-tab-panel slot="panel">
-          First Panel
-        </b2b-tab-panel>
-        <b2b-tab slot="tab">
-          Second Tab
-        </b2b-tab>
-        <b2b-tab-panel slot="panel">
-          Second Panel
-        </b2b-tab-panel>
-        <b2b-tab slot="tab" disabled="true">
-        Disabled Tab
-      </b2b-tab>
-      <b2b-tab-panel slot="panel">
-        Disabled Panel
-      </b2b-tab-panel>
-      </b2b-tab-group>
+    await page.setContent(`
+        <b2b-tab-group>
+        <b2b-tab slot="tab">
+          First Tab
+        </b2b-tab>
+        <b2b-tab-panel slot="panel">
+          First Panel
+        </b2b-tab-panel>
+        <b2b-tab slot="tab">
+          Second Tab
+        </b2b-tab>
+        <b2b-tab-panel slot="panel">
+          Second Panel
+        </b2b-tab-panel>
+        <b2b-tab slot="tab" disabled="true">
+        Disabled Tab
+      </b2b-tab>
+      <b2b-tab-panel slot="panel">
+        Disabled Panel
+      </b2b-tab-panel>
+      </b2b-tab-group>
         `);
   });
   it('should render the tab group', async () => {

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

@@ -139,7 +139,7 @@ export class B2bTabGroupComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation.\r\nSet it to true if you want to use external, route-based navigation."
+          "text": "Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation.\nSet it to true if you want to use external, route-based navigation."
         },
         "attribute": "use-router",
         "reflect": false,

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

@@ -1,41 +1,41 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ useRouter }) => {
-  return html ` <b2b-tab-group use-router="${useRouter}">
-    <b2b-tab slot="tab">First Tab</b2b-tab>
-    <b2b-tab-panel slot="panel"
-      ><div>
-        <b2b-paragraph
-          >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.
-        </b2b-paragraph>
-      </div></b2b-tab-panel
-    >
-    <b2b-tab slot="tab">Second Tab</b2b-tab>
-    <b2b-tab-panel slot="panel"><div>Selected Panel here</div></b2b-tab-panel>
-    <b2b-tab disabled slot="tab">Disabled Tab</b2b-tab>
-    <b2b-tab-panel slot="panel"><div>Disabled Panel</div></b2b-tab-panel>
-    <b2b-tab invalid slot="tab">Error Tab</b2b-tab>
-    <b2b-tab-panel slot="panel"
-      ><div>
-        <b2b-input-group error="group error" invalid hint="A group hint">
-          <b2b-input slot="start" label="Search Term"></b2b-input>
-          <b2b-dropdown label="Data Set" invalid error="an error">
-            <option value="one">Some longer text</option>
-            <option value="one">$</option>
-          </b2b-dropdown>
-          <b2b-input label="Another input" invalid error="an error"></b2b-input>
-          <b2b-dropdown>
-            <option value="one">€</option>
-            <option value="one">$</option>
-          </b2b-dropdown>
-          <b2b-button slot="end" variant="primary"
-            ><b2b-icon icon="b2b_icon-search"></b2b-icon
-          ></b2b-button>
-        </b2b-input-group></div
-    ></b2b-tab-panel>
+  return html ` <b2b-tab-group use-router="${useRouter}">
+    <b2b-tab slot="tab">First Tab</b2b-tab>
+    <b2b-tab-panel slot="panel"
+      ><div>
+        <b2b-paragraph
+          >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.
+        </b2b-paragraph>
+      </div></b2b-tab-panel
+    >
+    <b2b-tab slot="tab">Second Tab</b2b-tab>
+    <b2b-tab-panel slot="panel"><div>Selected Panel here</div></b2b-tab-panel>
+    <b2b-tab disabled slot="tab">Disabled Tab</b2b-tab>
+    <b2b-tab-panel slot="panel"><div>Disabled Panel</div></b2b-tab-panel>
+    <b2b-tab invalid slot="tab">Error Tab</b2b-tab>
+    <b2b-tab-panel slot="panel"
+      ><div>
+        <b2b-input-group error="group error" invalid hint="A group hint">
+          <b2b-input slot="start" label="Search Term"></b2b-input>
+          <b2b-dropdown label="Data Set" invalid error="an error">
+            <option value="one">Some longer text</option>
+            <option value="one">$</option>
+          </b2b-dropdown>
+          <b2b-input label="Another input" invalid error="an error"></b2b-input>
+          <b2b-dropdown>
+            <option value="one">€</option>
+            <option value="one">$</option>
+          </b2b-dropdown>
+          <b2b-button slot="end" variant="primary"
+            ><b2b-icon icon="b2b_icon-search"></b2b-icon
+          ></b2b-button>
+        </b2b-input-group></div
+    ></b2b-tab-panel>
   </b2b-tab-group>`;
 };
 const defaultArgs = {

package/dist/collection/components/tab-panel/tab-panel.css

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

package/dist/collection/components/table/table-cell/table-cell.css

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

package/dist/collection/components/table/table-cell/table-cell.js

@@ -63,7 +63,7 @@ export class TableCellComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether text should wrap or truncate.\r\nIt will only truncate when table size is equal\r\n*"
+          "text": "Whether text should wrap or truncate.\nIt will only truncate when table size is equal\n*"
         },
         "attribute": "text-wrap",
         "reflect": true,
@@ -87,7 +87,7 @@ export class TableCellComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The size of the cell. Follows table size.\r\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\r\nOther sizes won't affect cell current implementation."
+          "text": "The size of the cell. Follows table size.\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\nOther sizes won't affect cell current implementation."
         },
         "attribute": "size",
         "reflect": false,

package/dist/collection/components/table/table-header/table-header.css

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

package/dist/collection/components/table/table-row/table-row.css

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

package/dist/collection/components/table/table-rowgroup/table-rowgroup.css

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

package/dist/collection/components/table/table-rowgroup/table-rowgroup.js

@@ -146,7 +146,7 @@ export class TableRowgroupComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Rowgroup allows grouping rows by context: header, body or footer.\r\nHeader rows are by default not highlightable on mouse over."
+          "text": "Rowgroup allows grouping rows by context: header, body or footer.\nHeader rows are by default not highlightable on mouse over."
         },
         "attribute": "type",
         "reflect": false,
@@ -164,7 +164,7 @@ export class TableRowgroupComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\r\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
+          "text": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
         },
         "attribute": "accordion",
         "reflect": false,
@@ -200,7 +200,7 @@ export class TableRowgroupComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Only use when accordion property is true.\r\nWill render the accordion opened if set to true. By default, is false."
+          "text": "Only use when accordion property is true.\nWill render the accordion opened if set to true. By default, is false."
         },
         "attribute": "opened",
         "reflect": true,

package/dist/collection/components/table/table.css

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

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

@@ -3,66 +3,66 @@ describe('B2B-Table', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-table size='equal'>
-        <b2b-table-rowgroup type='header'>
-          <b2b-table-row>
-            <b2b-table-header sort-direction="not-sorted" sort-icon-align="left">Title 1</b2b-table-header>
-            <b2b-table-header>Title 2</b2b-table-header>
-            <b2b-table-header sort-direction="descending" sort-id='title3' sort-icon-align="right">Title 3</b2b-table-header>
-          </b2b-table-row>
-        </b2b-table-rowgroup>
-        <b2b-table-rowgroup type='body'>
-          <b2b-table-row>
-            <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-            <b2b-table-cell>data 2a</b2b-table-cell>
-            <b2b-table-cell>data 3a</b2b-table-cell>
-          </b2b-table-row>
-        </b2b-table-rowgroup>
-      </b2b-table>
+    await page.setContent(`
+      <b2b-table size='equal'>
+        <b2b-table-rowgroup type='header'>
+          <b2b-table-row>
+            <b2b-table-header sort-direction="not-sorted" sort-icon-align="left">Title 1</b2b-table-header>
+            <b2b-table-header>Title 2</b2b-table-header>
+            <b2b-table-header sort-direction="descending" sort-id='title3' sort-icon-align="right">Title 3</b2b-table-header>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type='body'>
+          <b2b-table-row>
+            <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+            <b2b-table-cell>data 2a</b2b-table-cell>
+            <b2b-table-cell>data 3a</b2b-table-cell>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+      </b2b-table>
     `);
   });
-  const tableWithAccordion = `
-    <b2b-table size="expand">
-      <b2b-table-rowgroup type="header" accordion>
-        <b2b-table-row id="test-header">
-          <b2b-table-header>Title 1</b2b-table-header>
-          <b2b-table-header>Title 2</b2b-table-header>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion>
-        <b2b-table-row id="test-parent">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row id="test-child">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
+  const tableWithAccordion = `
+    <b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion>
+        <b2b-table-row id="test-parent">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
     </b2b-table>`;
-  const tableWithSelection = `
-    <b2b-table size="expand">
-      <b2b-table-rowgroup type="header" accordion selectable>
-        <b2b-table-row id="test-header">
-          <b2b-table-header>Title 1</b2b-table-header>
-          <b2b-table-header>Title 2</b2b-table-header>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion selectable opened>
-        <b2b-table-row id="test-parent" value="peaches">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row id="test-child" value="cherries">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row id="second-child" value="plums">
-        <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-        <b2b-table-cell>data 2a</b2b-table-cell>
-      </b2b-table-row>
-      </b2b-table-rowgroup>
+  const tableWithSelection = `
+    <b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion selectable>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion selectable opened>
+        <b2b-table-row id="test-parent" value="peaches">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child" value="cherries">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="second-child" value="plums">
+        <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+        <b2b-table-cell>data 2a</b2b-table-cell>
+      </b2b-table-row>
+      </b2b-table-rowgroup>
     </b2b-table>`;
   it('should render the table component', async () => {
     const element = await page.find('b2b-table');
@@ -82,16 +82,16 @@ describe('B2B-Table', () => {
   });
   it('should set headers to fixed if table is scrollable', async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-scrollable-container>
-        <b2b-table size='equal'>
-          <b2b-table-rowgroup type='header'>
-            <b2b-table-row>
-              <b2b-table-header>Title 1</b2b-table-header>
-              <b2b-table-header>Title 2</b2b-table-header>
-            </b2b-table-row>
-        </b2b-table>
-      </b2b-scrollable-container>
+    await page.setContent(`
+      <b2b-scrollable-container>
+        <b2b-table size='equal'>
+          <b2b-table-rowgroup type='header'>
+            <b2b-table-row>
+              <b2b-table-header>Title 1</b2b-table-header>
+              <b2b-table-header>Title 2</b2b-table-header>
+            </b2b-table-row>
+        </b2b-table>
+      </b2b-scrollable-container>
     `);
     const cells = await page.findAll('b2b-table-header');
     cells.map(cell => {
@@ -247,23 +247,23 @@ describe('B2B-Table', () => {
   });
   it('should render accordion opened if prop set to true', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-table size="expand">
-      <b2b-table-rowgroup type="header" accordion>
-        <b2b-table-row id="test-header">
-          <b2b-table-header>Title 1</b2b-table-header>
-          <b2b-table-header>Title 2</b2b-table-header>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion opened>
-        <b2b-table-row id="test-parent">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row id="test-child">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
+    await page.setContent(`<b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion opened>
+        <b2b-table-row id="test-parent">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
     </b2b-table>`);
     const child = await page.find('#test-child');
     const toggleIconClass = await page.evaluate(() => {

package/dist/collection/components/table/table.js

@@ -75,7 +75,7 @@ export class TableComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The size of the table. Both will expand to 100% of parent size.\r\nExpand cells will use as much space as content needs and text will wrap.\r\nEqual will keep all column sizes proportional to the number of columns."
+          "text": "The size of the table. Both will expand to 100% of parent size.\nExpand cells will use as much space as content needs and text will wrap.\nEqual will keep all column sizes proportional to the number of columns."
         },
         "attribute": "size",
         "reflect": false,