@otto-de/b2b-core-components 1.8.0 → 1.9.0-beta.1

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

@@ -45,36 +45,36 @@ const meta = {
   argTypes: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, tableArgs), cellArgs), rowArgs), headerArgs), { data: { table: { disable: true } }, parentWidth: { table: { disable: true } }, firstColumnWidth: { table: { disable: true } }, firstRowHeight: { table: { disable: true } } }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div style="width: ${args.parentWidth}"><b2b-table size="${args.size}">
-        <b2b-table-rowgroup type="header">
-          <b2b-table-row>
+    return html `<div style="width: ${args.parentWidth}"><b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header">
+          <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
-      return html `<b2b-table-header
+      return html `<b2b-table-header
                 ?divider=${args.withDividers &&
-        index !== args.data.columns.length - 1}
-                style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
-                >${columnName}</b2b-table-header
+        index !== args.data.columns.length - 1}
+                style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+                >${columnName}</b2b-table-header
               >`;
-    })}
-    </b2b-table-rowgroup>
-    <b2b-table-rowgroup type="body">
-      ${repeat(args.data.rows, (row, index) => html `
-          <b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
+    })}
+    </b2b-table-rowgroup>
+    <b2b-table-rowgroup type="body">
+      ${repeat(args.data.rows, (row, index) => html `
+          <b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
             ${repeat(
     // @ts-ignore
-    row, (cell, index) => html `<b2b-table-cell
-                ?divider=${args.withDividers && index === 0}
-                align="${args.align}"
-                text-wrap="${args.textWrap}"
-                >${cell}</b2b-table-cell
-              >`)}<b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>
-        `)}
-    </b2b-table-rowgroup>
+    row, (cell, index) => html `<b2b-table-cell
+                ?divider=${args.withDividers && index === 0}
+                align="${args.align}"
+                text-wrap="${args.textWrap}"
+                >${cell}</b2b-table-cell
+              >`)}<b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
+          </b2b-table-row>
+        `)}
+    </b2b-table-rowgroup>
   </b2b-table></div>`;
   },
 };
@@ -110,57 +110,57 @@ export const ScrollableTable = {
   args: Object.assign(Object.assign({}, meta.args), { parentWidth: '600px', parentHeight: '250px', columnsWidth: '80px', data: longSampleData, size: 'expand', withDividers: true, textWrap: false, align: 'left' }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<b2b-scrollable-container
-    style="width: ${args.parentWidth}; height: ${args.parentHeight};">
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header">
-        <b2b-table-row>
+    return html `<b2b-scrollable-container
+    style="width: ${args.parentWidth}; height: ${args.parentHeight};">
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header">
+        <b2b-table-row>
           ${args.data.columns.map((columnName, index) => {
-      return html ` <b2b-table-header
+      return html ` <b2b-table-header
               ?divider=${args.withDividers &&
-        index !== args.data.columns.length - 1}
-              style=${`min-width: ${args.columnsWidth}`}
-              >${columnName}</b2b-table-header
+        index !== args.data.columns.length - 1}
+              style=${`min-width: ${args.columnsWidth}`}
+              >${columnName}</b2b-table-header
             >`;
-    })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body">
+    })}
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body">
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map((data, index) => html `<b2b-table-cell
-                  ?divider=${args.withDividers && index === 0}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map((data, index) => html `<b2b-table-cell
+                  ?divider=${args.withDividers && index === 0}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
           </b2b-table-row>`;
-    })}
-      </b2b-table-rowgroup>
-    </b2b-table>
+    })}
+      </b2b-table-rowgroup>
+    </b2b-table>
   </b2b-scrollable-container>`;
   },
 };
 const RenderSortableTable = (_a) => {
   var args = __rest(_a, []);
-  return html `
-      <b2b-table-rowgroup type="body">
+  return html `
+      <b2b-table-rowgroup type="body">
         ${args.data.rows.map((row, index) => {
-    return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
+    return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
           </b2b-table-row>`;
-  })}
-      </b2b-table-rowgroup>
-    </b2b-table>
+  })}
+      </b2b-table-rowgroup>
+    </b2b-table>
   </div>`;
 };
 const SortableTableMeta = {
@@ -199,22 +199,22 @@ const SortableTableMeta = {
         }
         updateArgs({ data: data });
       };
-      return html `<div>
-        <b2b-table size="expand">
-          <b2b-table-rowgroup type="header">
-            <b2b-table-row>
+      return html `<div>
+        <b2b-table size="expand">
+          <b2b-table-rowgroup type="header">
+            <b2b-table-row>
               ${userSampleData.columns.map(column => {
-        return html ` <b2b-table-header
-                  sort-direction="not-sorted"
-                  content-align=${args.contentAlign}
-                  @b2b-change=${event => onSort(event, column.id, userSampleData)}
-                  ?divider="false"
-                  >${column.name}</b2b-table-header
+        return html ` <b2b-table-header
+                  sort-direction="not-sorted"
+                  content-align=${args.contentAlign}
+                  @b2b-change=${event => onSort(event, column.id, userSampleData)}
+                  ?divider="false"
+                  >${column.name}</b2b-table-header
                 >`;
-      })}
-            </b2b-table-row> </b2b-table-rowgroup
-          >${story()}</b2b-table
-        >
+      })}
+            </b2b-table-row> </b2b-table-rowgroup
+          >${story()}</b2b-table
+        >
       </div>`;
     },
   ],
@@ -247,55 +247,55 @@ export const AccordionTable = {
   args: Object.assign({}, meta.args),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div>
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header" accordion>
-        <b2b-table-row>
+    return html `<div>
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-row>
           ${args.data.columns.map((columnName, index) => {
-      return html ` <b2b-table-header
+      return html ` <b2b-table-header
               ?divider=${args.withDividers &&
-        index !== args.data.columns.length - 1}
-              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
-              >${columnName}</b2b-table-header
+        index !== args.data.columns.length - 1}
+              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+              >${columnName}</b2b-table-header
             >`;
-    })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion>
+    })}
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion>
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+            <b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
           </b2b-table-row>`;
-    })}
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion opened>
+    })}
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion opened>
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+            <b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
           </b2b-table-row>`;
-    })}
-      </b2b-table-rowgroup>
-    </b2b-table>
+    })}
+      </b2b-table-rowgroup>
+    </b2b-table>
   </div>`;
   },
 };
@@ -303,55 +303,55 @@ export const Selectable = {
   args: Object.assign({}, meta.args),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<div>
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header" accordion selectable>
-        <b2b-table-row>
+    return html `<div>
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header" accordion selectable>
+        <b2b-table-row>
           ${args.data.columns.map((columnName, index) => {
-      return html ` <b2b-table-header
+      return html ` <b2b-table-header
               ?divider=${args.withDividers &&
-        index !== args.data.columns.length - 1}
-              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
-              >${columnName}</b2b-table-header
+        index !== args.data.columns.length - 1}
+              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+              >${columnName}</b2b-table-header
             >`;
-    })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion selectable>
+    })}
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion selectable>
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+            <b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
           </b2b-table-row>`;
-    })}
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion opened selectable>
+    })}
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion opened selectable>
         ${args.data.rows.map((row, index) => {
-      return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+            <b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
           </b2b-table-row>`;
-    })}
-      </b2b-table-rowgroup>
-    </b2b-table>
+    })}
+      </b2b-table-rowgroup>
+    </b2b-table>
   </div>`;
   },
 };

package/dist/collection/components/textarea/textarea.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 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 Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -75,9 +75,9 @@ describe('B2B-Textarea', () => {
     expect(value).toEqual('An input w');
   });
   it('should support form building from the shadow DOM', async () => {
-    const form = `<form>
-        <b2b-textarea label="Test"></textarea>
-        <button type="submit">Submit</button>
+    const form = `<form>
+        <b2b-textarea label="Test"></textarea>
+        <button type="submit">Submit</button>
     </form>`;
     page = await newE2EPage();
     await page.setContent(form);

package/dist/collection/components/textarea/textarea.js

@@ -175,7 +175,7 @@ export class B2BTextareaComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'unset'\r\n    | 'none'\r\n    | 'vertical'\r\n    | 'horizontal'",
+          "original": "| 'unset'\n    | 'none'\n    | 'vertical'\n    | 'horizontal'",
           "resolved": "\"horizontal\" | \"none\" | \"unset\" | \"vertical\"",
           "references": {}
         },

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

@@ -1,18 +1,18 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, placeholder, disabled, value, invalid, hint, error, autofocus, name, resize, height, }) => {
-  return html `<b2b-textarea
-    label="${label}"
-    required="${required}"
-    placeholder="${placeholder}"
-    disabled="${disabled}"
-    value="${value}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    autofocus="${autofocus}"
-    name="${name}"
-    height="${height}"
+  return html `<b2b-textarea
+    label="${label}"
+    required="${required}"
+    placeholder="${placeholder}"
+    disabled="${disabled}"
+    value="${value}"
+    invalid="${invalid}"
+    hint="${hint}"
+    error="${error}"
+    autofocus="${autofocus}"
+    name="${name}"
+    height="${height}"
     resize="${resize}"></b2b-textarea>`;
 };
 const defaultArgs = {

package/dist/collection/components/toggle-button/toggle-button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 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 Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 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 Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -3,9 +3,9 @@ describe('b2b-toggle-group', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
-          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
-          <b2b-toggle-button name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
+    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
+          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
+          <b2b-toggle-button name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
         </b2b-toggle-group>`);
   });
   it('should render the toggle group', async () => {
@@ -54,9 +54,9 @@ describe('b2b-toggle-group', () => {
   });
   it('should not select first element if any element is pre-selected ', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
-          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
-          <b2b-toggle-button checked name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
+    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
+          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
+          <b2b-toggle-button checked name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
         </b2b-toggle-group>`);
     const firstButton = await page.find('b2b-toggle-button');
     const isSelected = await firstButton.getProperty('checked');

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

@@ -1,26 +1,26 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ name, disabled, singleDisabled }) => {
-  return html `
-    <b2b-toggle-group name="${name}" disabled="${disabled}">
-      <b2b-toggle-button
-        name="${name}"
-        value="abcd"
-        label="ABCD"></b2b-toggle-button>
-      <b2b-toggle-button
-        name="${name}"
-        value="efgh"
-        label="EFGH"></b2b-toggle-button>
-      <b2b-toggle-button
-        name="${name}"
-        value="ijkl"
-        label="IJKL"></b2b-toggle-button>
-      <b2b-toggle-button
-        name="${name}"
-        value="mnop"
-        disabled="${singleDisabled}"
-        label="MNOP"></b2b-toggle-button>
-    </b2b-toggle-group>
+  return html `
+    <b2b-toggle-group name="${name}" disabled="${disabled}">
+      <b2b-toggle-button
+        name="${name}"
+        value="abcd"
+        label="ABCD"></b2b-toggle-button>
+      <b2b-toggle-button
+        name="${name}"
+        value="efgh"
+        label="EFGH"></b2b-toggle-button>
+      <b2b-toggle-button
+        name="${name}"
+        value="ijkl"
+        label="IJKL"></b2b-toggle-button>
+      <b2b-toggle-button
+        name="${name}"
+        value="mnop"
+        disabled="${singleDisabled}"
+        label="MNOP"></b2b-toggle-button>
+    </b2b-toggle-group>
   `;
 };
 const defaultArgs = {

package/dist/collection/components/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 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 Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */