@otto-de/b2b-core-components 1.36.0 → 1.37.1

package/dist/collection/components/pagination/pagination.css

@@ -234,9 +234,6 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  /* this is a workaround to force purgecss to include the overwrites of
-     the variables --b2b-border-right and --b2b-border-radius
-  */
 }
 .b2b-pagination li {
   transition: opacity 0.3s ease, visibility 0.3s ease;
@@ -258,6 +255,11 @@
   --b2b-border-right: 1px solid var(--b2b-button-secondary-border-color);
   --b2b-border-radius: var(--b2b-size-border-no-radius-left);
 }
+.b2b-pagination {
+  /* this is a workaround to force purgecss to include the overwrites of
+     the variables --b2b-border-right and --b2b-border-radius
+  */
+}
 .b2b-pagination .purge-css-include-variables {
   border-radius: var(--b2b-border-radius);
   border-right: var(--b2b-border-right);

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

@@ -2,8 +2,8 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ totalPages, activePage }) => {
     return html `<b2b-pagination
-    total-pages="${totalPages}"
-    active-page="${activePage}"></b2b-pagination>`;
+    total-pages=${totalPages}
+    active-page=${activePage}></b2b-pagination>`;
 };
 const defaultArgs = {
     totalPages: 10,

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

@@ -28,12 +28,12 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-      weight="${args.weight}"
-      size="${args.size}"
-      align="${args.align}"
-      margin="${args.margin}"
-      variant="${args.variant}"
-      display="${args.display}">
+      weight=${args.weight}
+      size=${args.size}
+      align=${args.align}
+      margin=${args.margin}
+      variant=${args.variant}
+      display=${args.display}>
       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
@@ -75,12 +75,12 @@ export const DisplayInline = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-        weight="${args.weight}"
-        size="${args.size}"
-        align="${args.align}"
-        margin="${args.margin}"
-        variant="${args.variant}"
-        display="${args.display}">
+        weight=${args.weight}
+        size=${args.size}
+        align=${args.align}
+        margin=${args.margin}
+        variant=${args.variant}
+        display=${args.display}>
         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
@@ -114,12 +114,12 @@ export const DisplayInlineBlock = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-        weight="${args.weight}"
-        size="${args.size}"
-        align="${args.align}"
-        margin="${args.margin}"
-        variant="${args.variant}"
-        display="${args.display}">
+        weight=${args.weight}
+        size=${args.size}
+        align=${args.align}
+        margin=${args.margin}
+        variant=${args.variant}
+        display=${args.display}>
         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

package/dist/collection/components/progress-bar/progress-bar.stories.js

@@ -25,10 +25,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-progress-bar
-      progress="${args.progress}"
-      label="${args.label}"
-      label-type="${args.labelType}"
-      label-position="${args.labelPosition}" />`;
+      progress=${args.progress}
+      label=${args.label}
+      label-type=${args.labelType}
+      label-position=${args.labelPosition} />`;
     },
 };
 export default meta;

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

@@ -2,15 +2,15 @@ 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}"
-    error="${error}"></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 = {
     label: 'Single Radio Button Label',

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

@@ -2,21 +2,21 @@ 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}">
+    label=${label}
+    required=${required}
+    name=${name}
+    disabled=${disabled}
+    invalid=${invalid}
+    alignment=${alignment}
+    hint=${hint}
+    error=${error}>
     <b2b-radio-button
       label="Option 1"
-      name="${name}"
+      name=${name}
       value="one"></b2b-radio-button>
     <b2b-radio-button
       label="Option 2"
-      name="${name}"
+      name=${name}
       value="two"></b2b-radio-button>
   </b2b-radio-group>`;
 };

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

@@ -3,7 +3,7 @@ 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>
+    ><br /><b2b-required-separator label=${label}></b2b-required-separator>
   </div>`;
 };
 const defaultArgs = {

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

@@ -2,8 +2,8 @@ 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-100 slot="icon" icon="${iconName}"></b2b-icon-100>
+    <b2b-rounded-icon color=${color} content-color=${contentColor}>
+      <b2b-icon-100 slot="icon" icon=${iconName}></b2b-icon-100>
     </b2b-rounded-icon>
   </div>`;
 };
@@ -16,7 +16,7 @@ story010Icon.args = {
 story010Icon.storyName = 'Icon Content';
 const TemplateText = ({ color, contentColor, textContent }) => {
     return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
+    <b2b-rounded-icon color=${color} content-color=${contentColor}>
       <span slot="text">${textContent}</span>
     </b2b-rounded-icon>
   </div>`;

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

@@ -26,7 +26,7 @@ const Template = ({ placeholder, optionsList, disabled }) => {
       contenteditable
       data-testid="search-element"
       disabled=${disabled}
-      placeholder="${placeholder}"
+      placeholder=${placeholder}
       .optionsList=${optionsList}
       @b2b-input=${onInput}></b2b-search>
   </div>`;
@@ -64,7 +64,7 @@ const CustomSearchTemplate = ({ placeholder, optionsList }) => {
     <b2b-input-group>
       <b2b-input-list
         slot="start"
-        placeholder="${placeholder}"
+        placeholder=${placeholder}
         .optionsList=${optionsList}></b2b-input-list>
       <b2b-dropdown style="width: 50%" invalid error="an error">
         <option value="one">Option 1</option>

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

@@ -13,9 +13,9 @@ const Template = ({ alignment }) => {
             margin: `margin: 10px 0;`,
             width: null,
         };
-    return html `<div style="${styles.display}">
+    return html `<div style=${styles.display}>
     <p style="${styles.margin} ${styles.width}">${content}</p>
-    <b2b-separator alignment="${alignment}"></b2b-separator>
+    <b2b-separator alignment=${alignment}></b2b-separator>
     <p style="${styles.margin} ${styles.width}">${content}</p>
   </div>`;
 };

package/dist/collection/components/shimmer/shimmer.js

@@ -55,7 +55,7 @@ export class ShimmerComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The width of the shimmer effect im px."
+                    "text": "The width of the shimmer effect in px."
                 },
                 "attribute": "width",
                 "reflect": false

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

@@ -24,10 +24,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-shimmer
-      loading="${args.loading}"
-      width="${args.width}"
-      height="${args.height}">
-      This is the mean content which takes a while to load.
+      loading=${args.loading}
+      width=${args.width}
+      height=${args.height}>
+      This is the main content, which takes a while to load.
     </b2b-shimmer>`;
     },
 };

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

@@ -45,14 +45,14 @@ const meta = {
       <hr />
       <b2b-snackbar
         @b2b-close=${hideSnackbar}
-        description="${args.description}"
-        type="${args.type}"
-        opened="${args.opened}"
-        timed="${args.timed}"
-        duration="${args.duration}"
-        has-action="${args.hasAction}"
-        action-label="${args.actionLabel}"
-        width="${args.width}"></b2b-snackbar>`;
+        description=${args.description}
+        type=${args.type}
+        opened=${args.opened}
+        timed=${args.timed}
+        duration=${args.duration}
+        has-action=${args.hasAction}
+        action-label=${args.actionLabel}
+        width=${args.width}></b2b-snackbar>`;
     },
 };
 export default meta;

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

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ size, color }) => {
-    return html ` <b2b-spinner size="${size}" color="${color}"></b2b-spinner>`;
+    return html ` <b2b-spinner size=${size} color=${color}></b2b-spinner>`;
 };
 const defaultArgs = {
     size: '100',

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

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ useRouter }) => {
-    return html ` <b2b-tab-group use-router="${useRouter}">
+    return html ` <b2b-tab-group use-router=${useRouter}>
     <b2b-tab slot="tab">First Tab</b2b-tab>
     <b2b-tab-panel slot="panel"
       ><div>

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

@@ -11,7 +11,8 @@ export class TableRowgroupComponent {
                 .map(child => child.value);
         };
         this.toggleList = (list, event) => {
-            list.forEach(child => ((child.checked = event.detail.checked), (child.indeterminate = false)));
+            list.forEach(child => ((child.checked = event.detail.checked),
+                (child.indeterminate = false)));
         };
         this.addCheckboxColumn = () => {
             const children = getAllRows(this.host);
@@ -113,11 +114,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: 'dd7700f3b0b599cb74897935c5b3d1d07db2ca27', class: {
+        return (h(Host, { key: 'f2f488f6392f9b6f2ee3b766d7746dda4fde1764', class: {
                 ['b2b-table-rowgroup__' + this.type]: true,
                 'b2b-table-rowgroup--fixed': this.fixed,
                 'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
-            }, role: "rowgroup" }, h("slot", { key: '02bdd6d4032e89019bb04c80a4233cd2f4e2fabf' })));
+            }, role: "rowgroup" }, h("slot", { key: '7671fbb227a9d4e51e48a58eee682ed4bb8c8fe4' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,14 +59,14 @@ const meta = {
     <b2b-table-rowgroup type="body">
       ${repeat(args.data.rows, (row, index) => html `
           <b2b-table-row
-            highlight="${args.highlight}"
+            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}"
+                  align=${args.align}
+                  text-wrap=${args.textWrap}
                   >${cell}</b2b-table-cell
                 >`)}<b2b-table-cell
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
@@ -111,7 +111,7 @@ export const ScrollableTable = {
         var args = __rest(_a, []);
         return html `<b2b-scrollable-container
       style="width: ${args.parentWidth}; height: ${args.parentHeight};">
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header">
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -127,12 +127,12 @@ export const ScrollableTable = {
         <b2b-table-rowgroup type="body">
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              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}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
             </b2b-table-row>`;
@@ -148,12 +148,12 @@ const RenderSortableTable = (_a) => {
       <b2b-table-rowgroup type="body">
         ${args.data.rows.map((row, index) => {
         return html `<b2b-table-row
-            highlight="${args.highlight}"
+            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}"
+                  align=${args.align}
+                  text-wrap=${args.textWrap}
                   >${data}</b2b-table-cell
                 >`)}
           </b2b-table-row>`;
@@ -233,7 +233,7 @@ export const AccordionTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header" accordion>
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -249,12 +249,12 @@ export const AccordionTable = {
         <b2b-table-rowgroup type="body" accordion>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              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}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -266,12 +266,12 @@ export const AccordionTable = {
         <b2b-table-rowgroup type="body" accordion opened>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              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}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -289,7 +289,7 @@ export const SelectableTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header" accordion selectable>
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -305,12 +305,12 @@ export const SelectableTable = {
         <b2b-table-rowgroup type="body" accordion selectable>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              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}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -322,12 +322,12 @@ export const SelectableTable = {
         <b2b-table-rowgroup type="body" accordion opened selectable>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              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}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -345,42 +345,42 @@ export const ColspanTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 500px">
-      <b2b-table size="${args.size}">
-        <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+      <b2b-table size=${args.size}>
+        <b2b-table-rowgroup type="header" selectable=${args.selectable}>
           <b2b-table-row>
-            <b2b-table-header divider="${args.withDividers}" colspan="2"
+            <b2b-table-header divider=${args.withDividers} colspan="2"
               >2 Columns</b2b-table-header
             >
-            <b2b-table-header divider="${args.withDividers}"
+            <b2b-table-header divider=${args.withDividers}
               >1 Column</b2b-table-header
             >
             <b2b-table-header>1 Column</b2b-table-header>
           </b2b-table-row>
         </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+        <b2b-table-rowgroup type="body" selectable=${args.selectable}>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
           </b2b-table-row>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell>1 Column</b2b-table-cell>
           </b2b-table-row>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}" colspan="2"
+            <b2b-table-cell divider=${args.withDividers} colspan="2"
               >2 Columns</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell>1 Column</b2b-table-cell>

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

@@ -2,18 +2,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}"
-    resize="${resize}"></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 = {
     label: 'Textarea',

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

@@ -2,23 +2,23 @@ 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-group name=${name} disabled=${disabled}>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="abcd"
         label="ABCD"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="efgh"
         label="EFGH"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="ijkl"
         label="IJKL"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="mnop"
-        disabled="${singleDisabled}"
+        disabled=${singleDisabled}
         label="MNOP"></b2b-toggle-button>
     </b2b-toggle-group>
   `;

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

@@ -25,10 +25,10 @@ export default {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-toggle-switch
-      label="${args.label}"
-      disabled="${args.disabled}"
-      label-position="${args.labelPosition}"
-      state="${args.state}" />`;
+      label=${args.label}
+      disabled=${args.disabled}
+      label-position=${args.labelPosition}
+      state=${args.state} />`;
     },
 };
 export const SwitchOn = {};

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

@@ -47,10 +47,10 @@ const meta = {
       <b2b-paragraph>
         I am some text with a tooltip
         <b2b-tooltip
-          position="${args.position}"
-          trigger="${args.trigger}"
-          content="${args.content}"
-          opened="${args.opened}"
+          position=${args.position}
+          trigger=${args.trigger}
+          content=${args.content}
+          opened=${args.opened}
           data-testid="trigger"
           >${markup}
         </b2b-tooltip>
@@ -67,10 +67,10 @@ export const FocusTooltip = Object.assign(Object.assign({}, meta), { render: arg
       <b2b-paragraph>
         I am some text with a tooltip
         <b2b-tooltip
-          position="${args.position}"
-          trigger="${args.trigger}"
-          content="${args.content}"
-          opened="${args.opened}"
+          position=${args.position}
+          trigger=${args.trigger}
+          content=${args.content}
+          opened=${args.opened}
           data-testid="trigger">
           ${focusTriggerMarkup}
         </b2b-tooltip>