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

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

@@ -33,13 +33,13 @@ export const story010Grid = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html ` <b2b-grid margin="${args.margin}">
+        return html ` <b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -53,25 +53,25 @@ export const story010Grid = {
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 8 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="3"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 10-12 of 12</h4>
             <p>Resize me by changing the span attribute in the args table.</p>
           </div></b2b-grid-col
@@ -94,37 +94,37 @@ export const story020AlignItems = {
         var args = __rest(_a, []);
         return html `<b2b-grid
       ><b2b-grid-row
-        align-items="${args.alignItems}"
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
+        align-items=${args.alignItems}
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 1-2 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 3-4 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 5-6 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         >
@@ -144,13 +144,13 @@ export const story030TextAlign = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html `<b2b-grid margin="${args.margin}">
+        return html `<b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -164,17 +164,17 @@ export const story030TextAlign = {
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         ></b2b-grid-row
@@ -194,13 +194,13 @@ export const story040Justify = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html `<b2b-grid margin="${args.margin}">
+        return html `<b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -214,17 +214,17 @@ export const story040Justify = {
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         ></b2b-grid-row

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

@@ -1,10 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const template = ({ size, align, slot, noMargin }) => {
-    return html `<b2b-headline
-    size="${size}"
-    align="${align}"
-    no-margin="${noMargin}">
+    return html `<b2b-headline size=${size} align=${align} no-margin=${noMargin}>
     ${slot}
   </b2b-headline>`;
 };

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

@@ -3,10 +3,7 @@ import { getArgTypes } from "../../docs/config/utils";
 import { iconTypes } from "./types";
 import "./../../global/icon.stories.scss";
 const Template = ({ icon, color, variant }) => {
-    return html `<b2b-icon
-    icon="${icon}"
-    color="${color}"
-    variant="${variant}" />`;
+    return html `<b2b-icon icon=${icon} color=${color} variant=${variant} />`;
 };
 const defaultArgs = {
     icon: 'b2b_icon-edit',
@@ -29,7 +26,7 @@ story030Inverse.parameters = {
 };
 export const story035Inherit = ({ icon, color, variant }) => {
     return html ` <div style="color: red;">
-    <b2b-icon icon="${icon}" color="${color}" variant="${variant}" />
+    <b2b-icon icon=${icon} color=${color} variant=${variant} />
   </div>`;
 };
 story035Inherit.args = Object.assign(Object.assign({}, defaultArgs), { color: 'inherit' });
@@ -46,9 +43,9 @@ export const story070AllIcons = ({ color, variant }) => {
         return html `
       <div class="icon-container">
         <b2b-icon
-          icon="${icon}"
-          color="${color || defaultArgs.color}"
-          variant="${variant || 100}"></b2b-icon>
+          icon=${icon}
+          color=${color || defaultArgs.color}
+          variant=${variant || 100}></b2b-icon>
         <p>${icon}</p>
       </div>
     `;

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

@@ -33,11 +33,11 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-100
-      icon="${args.icon}"
-      color="${args.color}"
-      size="${args.size}"
-      clickable="${args.clickable}"
-      focusable="${args.focusable}"></b2b-icon-100>`;
+      icon=${args.icon}
+      color=${args.color}
+      size=${args.size}
+      clickable=${args.clickable}
+      focusable=${args.focusable}></b2b-icon-100>`;
     },
 };
 export default meta;
@@ -62,11 +62,11 @@ export const Inherit = {
     render: ({ icon, color, size, clickable, focusable }) => {
         return html ` <div style="color: red;">
       <b2b-icon-100
-        icon="${icon}"
-        color="${color}"
-        size="${size}"
-        clickable="${clickable}"
-        focusable="${focusable}">
+        icon=${icon}
+        color=${color}
+        size=${size}
+        clickable=${clickable}
+        focusable=${focusable}>
       </b2b-icon-100>
     </div>`;
     },
@@ -75,7 +75,7 @@ export const Inherit = {
 const renderAllIcons = () => {
     const icons = iconTypes.map(icon => {
         return html ` <div class="icon-container">
-      <b2b-icon-100 icon="${icon}"></b2b-icon-100>
+      <b2b-icon-100 icon=${icon}></b2b-icon-100>
       <p>${icon}</p>
     </div>`;
     });

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

@@ -32,10 +32,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-50
-      icon="${args.icon}"
-      color="${args.color}"
-      clickable="${args.clickable}"
-      focusable="${args.focusable}"></b2b-icon-50>`;
+      icon=${args.icon}
+      color=${args.color}
+      clickable=${args.clickable}
+      focusable=${args.focusable}></b2b-icon-50>`;
     },
 };
 export default meta;
@@ -57,10 +57,10 @@ export const Inherit = {
     render: ({ icon, color, clickable, focusable }) => {
         return html ` <div style="color: red;">
       <b2b-icon-50
-        icon="${icon}"
-        color="${color}"
-        clickable="${clickable}"
-        focusable="${focusable}">
+        icon=${icon}
+        color=${color}
+        clickable=${clickable}
+        focusable=${focusable}>
       </b2b-icon-50>
     </div>`;
     },
@@ -69,7 +69,7 @@ export const Inherit = {
 const renderAllIcons = () => {
     const icons = iconTypes.map(icon => {
         return html ` <div class="icon-container">
-      <b2b-icon-50 icon="${icon}"></b2b-icon-50>
+      <b2b-icon-50 icon=${icon}></b2b-icon-50>
       <p>${icon}</p>
     </div>`;
     });

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

@@ -33,17 +33,17 @@ const meta = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.defaultType}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.defaultType}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
-        input-text-align="${args.inputTextAlign}"></b2b-input>
+        input-text-align=${args.inputTextAlign}></b2b-input>
     </div>`;
     },
 };
@@ -72,15 +72,15 @@ export const Prefix = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="start">Registration Number</span></b2b-input
       >
@@ -114,15 +114,15 @@ export const PrefixAndSuffix = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}>
         <b2b-icon-100 icon="b2b_icon-search" slot="start"></b2b-icon-100
         ><span slot="end">Registration Number</span></b2b-input
@@ -136,14 +136,14 @@ export const Label = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="label">Custom label</span></b2b-input
       >
@@ -156,14 +156,14 @@ export const HintSlot = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="hint">Custom hint</span></b2b-input
       >

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

@@ -4,10 +4,10 @@ const Template = ({ invalid, disabled, error, hint, additionalSlot, }) => {
     return additionalSlot
         ? html ` <div style="width: 380px">
         <b2b-input-group
-          invalid="${invalid}"
-          disabled="${disabled}"
-          error="${error}"
-          hint="${hint}">
+          invalid=${invalid}
+          disabled=${disabled}
+          error=${error}
+          hint=${hint}>
           <b2b-input slot="start" label="Search Term"></b2b-input>
           <b2b-dropdown style="width: 90px;">
             <option value="one">€</option>

package/dist/collection/components/input-list/input-list.stories.js

@@ -29,10 +29,10 @@ const meta = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}></b2b-input-list>
     </div>`;
     },
@@ -60,10 +60,10 @@ export const CustomList = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}
         ><ul>
           <li>Option 1</li>
@@ -90,11 +90,11 @@ export const disabledWithSelectedOption = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        value="${args.optionsList[0]}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        value=${args.optionsList[0]}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}
         ><ul>
           <li>Option 1</li>

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

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

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

@@ -22,11 +22,11 @@ const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, conte
     <b2b-modal
       @b2b-close=${closeModal}
       id="modal"
-      opened="${opened}"
-      variant="${variant}"
-      heading="${heading}"
-      backdrop-dismiss="${backdropDismiss}"
-      esc-dismiss="${escDismiss}">
+      opened=${opened}
+      variant=${variant}
+      heading=${heading}
+      backdrop-dismiss=${backdropDismiss}
+      esc-dismiss=${escDismiss}>
       <b2b-icon-100 slot="header-icon" icon="b2b_icon-info"></b2b-icon-100>
       <div>${content}</div>
       <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>

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',