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

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

@@ -17,11 +17,11 @@ const Template = ({ type, opened, size, hasCloseButton, customIcon, }) => {
 
     <b2b-alert
       @b2b-close=${closeAlert}
-      opened="${opened}"
-      type="${type}"
-      size="${size}"
-      has-close-button="${hasCloseButton}"
-      custom-icon="${customIcon}">
+      opened=${opened}
+      type=${type}
+      size=${size}
+      has-close-button=${hasCloseButton}
+      custom-icon=${customIcon}>
       <strong>${type}</strong> This is an alert.
     </b2b-alert>
   `;

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

@@ -2,12 +2,12 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ href, download, size, target, hoverColor, underlineText, }) => {
     return html ` <b2b-anchor
-    href="${href}"
-    download="${download}"
-    size="${size}"
-    hover-color="${hoverColor}"
-    target="${target}"
-    underline-text="${underlineText}">
+    href=${href}
+    download=${download}
+    size=${size}
+    hover-color=${hoverColor}
+    target=${target}
+    underline-text=${underlineText}>
     Click me!
   </b2b-anchor>`;
 };

package/dist/collection/components/background-box/background-box.stories.js

@@ -27,12 +27,12 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <b2b-background-box
-      max-width="${args.maxWidth}"
-      no-padding="${args.noPadding}"
-      border-top="${args.borderTop}"
-      border-right="${args.borderRight}"
-      border-bottom="${args.borderBottom}"
-      border-left="${args.borderLeft}">
+      max-width=${args.maxWidth}
+      no-padding=${args.noPadding}
+      border-top=${args.borderTop}
+      border-right=${args.borderRight}
+      border-bottom=${args.borderBottom}
+      border-left=${args.borderLeft}>
       <b2b-paragraph>
         The BackgroundBox component adjusts its width and padding based on two
         properties: maxWidth and noPadding. When maxWidth is true, it fills the

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

@@ -2,12 +2,10 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ href, active, paddingTop, paddingBottom }) => {
     return html `
-    <b2b-breadcrumb
-      padding-top="${paddingTop}"
-      padding-bottom="${paddingBottom}">
-      <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
+    <b2b-breadcrumb padding-top=${paddingTop} padding-bottom=${paddingBottom}>
+      <b2b-breadcrumb-item href=${href}>Start</b2b-breadcrumb-item>
       <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
-      <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
+      <b2b-breadcrumb-item active=${active}>Ende</b2b-breadcrumb-item>
     </b2b-breadcrumb>
   `;
 };

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

@@ -30,11 +30,11 @@ const button = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
-      type="${args.type}">
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
+      type=${args.type}>
       ${args.label}
     </b2b-button>`;
     },
@@ -54,11 +54,11 @@ export const IconStart = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
-      type="${args.type}">
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
+      type=${args.type}>
       <b2b-icon-100 slot="start" icon="b2b_icon-check"></b2b-icon-100>
       ${args.label}
     </b2b-button>`;
@@ -69,11 +69,11 @@ export const IconEnd = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
-      type="${args.type}">
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
+      type=${args.type}>
       ${args.label}
       <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
     </b2b-button>`;
@@ -84,11 +84,11 @@ export const PaliIcon = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
-      type="${args.type}">
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
+      type=${args.type}>
       <i slot="start" class="obc_icon-info"></i>
       ${args.label}
     </b2b-button>`;
@@ -99,11 +99,11 @@ export const IconOnly = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
-      type="${args.type}">
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
+      type=${args.type}>
       <b2b-icon-100 slot="end" icon="b2b_icon-search"></b2b-icon-100>
     </b2b-button>`;
     },
@@ -116,13 +116,13 @@ export const Anchor = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
       href="www.otto.de"
       target="blank"
-      type="${args.type}">
+      type=${args.type}>
       Go to otto.de
     </b2b-button>`;
     },
@@ -132,13 +132,13 @@ export const DisabledAnchor = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-button
-      variant="${args.variant}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      loading=${args.loading}
       href="www.otto.de"
       target="blank"
-      type="${args.type}">
+      type=${args.type}>
       Go to otto.de
     </b2b-button>`;
     },
@@ -150,12 +150,12 @@ export const CustomWidth = {
         return html ` <b2b-button
       class="docs-button-obc-overwrite"
       style="width: 300px"
-      variant="${args.variant}"
-      size="${args.size}"
-      width="${args.width}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
-      type="${args.type}">
+      variant=${args.variant}
+      size=${args.size}
+      width=${args.width}
+      disabled=${args.disabled}
+      loading=${args.loading}
+      type=${args.type}>
       300px custom width
     </b2b-button>`;
     },

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

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ disabled, href, target }) => {
-    return html `<b2b-card disabled="${disabled}" href=${href} target="${target}">
+    return html `<b2b-card disabled=${disabled} href=${href} target=${target}>
     <b2b-headline size="100">An Interactive Card</b2b-headline>
     <b2b-paragraph
       >You can hover over me or press tab on your keyboard to see me pop out. I

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

@@ -2,15 +2,15 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, checked, disabled, hint, error, name, value, invalid, }) => {
     return html `<b2b-checkbox
-    label="${label}"
-    required="${required}"
-    checked="${checked}"
-    disabled="${disabled}"
-    hint="${hint}"
-    error="${error}"
-    name="${name}"
-    value="${value}"
-    invalid="${invalid}"></b2b-checkbox>`;
+    label=${label}
+    required=${required}
+    checked=${checked}
+    disabled=${disabled}
+    hint=${hint}
+    error=${error}
+    name=${name}
+    value=${value}
+    invalid=${invalid}></b2b-checkbox>`;
 };
 const defaultArgs = {
     label: 'Checkbox Label',

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

@@ -4,15 +4,15 @@ const Template = ({ label, required, disabled, invalid, hint, error, alignment,
     const firstLabel = 'One';
     const secondLabel = 'Two';
     return html `<b2b-checkbox-group
-    label="${label}"
-    required="${required}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    alignment="${alignment}">
-    <b2b-checkbox label="${firstLabel}"></b2b-checkbox>
-    <b2b-checkbox label="${secondLabel}"></b2b-checkbox>
+    label=${label}
+    required=${required}
+    disabled=${disabled}
+    invalid=${invalid}
+    hint=${hint}
+    error=${error}
+    alignment=${alignment}>
+    <b2b-checkbox label=${firstLabel}></b2b-checkbox>
+    <b2b-checkbox label=${secondLabel}></b2b-checkbox>
   </b2b-checkbox-group>`;
 };
 const defaultArgs = {

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

@@ -28,13 +28,13 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-chip-component
-      custom-margin="${args.customMargin}"
-      label="${args.label}"
-      type="${args.type}"
-      label-style="${args.labelStyle}"
-      disabled="${args.disabled}"
-      value="${args.value}"
-      has-close-button="${args.hasCloseButton}" />`;
+      custom-margin=${args.customMargin}
+      label=${args.label}
+      type=${args.type}
+      label-style=${args.labelStyle}
+      disabled=${args.disabled}
+      value=${args.value}
+      has-close-button=${args.hasCloseButton} />`;
     },
 };
 export default meta;
@@ -58,12 +58,12 @@ export const story040WithTruncatedText = {
         return html `<div
       style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
       <b2b-chip-component
-        label="${args.label}"
-        type="${args.type}"
-        label-style="${args.labelStyle}"
-        disabled="${args.disabled}"
-        value="${args.value}"
-        has-close-button="${args.hasCloseButton}" />
+        label=${args.label}
+        type=${args.type}
+        label-style=${args.labelStyle}
+        disabled=${args.disabled}
+        value=${args.value}
+        has-close-button=${args.hasCloseButton} />
     </div>`;
     },
 };

package/dist/collection/components/custom-dropdown/custom-dropdown.stories.js

@@ -34,11 +34,11 @@ const meta = {
         var args = __rest(_a, []);
         return html `<div style="margin-left: 16px;width: 300px">
       <b2b-custom-dropdown
-        placeholder="${args.placeholder}"
-        dropshadow="${args.dropshadow}"
-        border="${args.border}"
-        alignment="${args.alignment}"
-        opened="${args.opened}">
+        placeholder=${args.placeholder}
+        dropshadow=${args.dropshadow}
+        border=${args.border}
+        alignment=${args.alignment}
+        opened=${args.opened}>
         <b2b-paragraph slot="trigger">
           This is a custom dropdown
           <b2b-icon-100
@@ -49,72 +49,72 @@ const meta = {
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 1"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          selected="${args.selected}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          selected=${args.selected}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 2"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 3"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 4"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 5"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 6"
-          separator="${args.separator}"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          separator=${args.separator}
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
         <b2b-custom-dropdown-option
           slot="option"
           option="Option 7"
-          hover-icon="${args.hoverIcon}"
-          selected-icon="${args.selectedIcon}"
-          hover-icon-color="${args.hoverIconColor}"
-          selected-icon-color="${args.selectedIconColor}"
-          disabled="${args.disabled}">
+          hover-icon=${args.hoverIcon}
+          selected-icon=${args.selectedIcon}
+          hover-icon-color=${args.hoverIconColor}
+          selected-icon-color=${args.selectedIconColor}
+          disabled=${args.disabled}>
         </b2b-custom-dropdown-option>
       </b2b-custom-dropdown>
     </div>`;

package/dist/collection/components/date-picker/date-picker.stories.js

@@ -45,7 +45,7 @@ const meta = {
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}
           disable-dates=${args.disableDates}
-          .pre-selected-date="${args.preSelectedDate}"
+          .pre-selected-date=${args.preSelectedDate}
           disable-days=${args.disableDays}
           disable-dates-until=${args.disableDatesUntil}
           disable-dates-from=${args.disableDatesFrom}
@@ -65,7 +65,7 @@ const meta = {
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}
           disable-dates=${args.disableDates}
-          pre-selected-date="${args.preSelectedDate}"
+          pre-selected-date=${args.preSelectedDate}
           disable-days=${args.disableDays}
           disable-dates-until=${args.disableDatesUntil}
           disable-dates-from=${args.disableDatesFrom}

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

@@ -3,15 +3,15 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid, hint, error, search, clear, selected = false, }) => {
     return html `<b2b-dropdown
-    label="${label}"
-    name="${name}"
-    error="${error}"
-    hint="${hint}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    required="${required}"
-    search="${search}"
-    clear="${clear}">
+    label=${label}
+    name=${name}
+    error=${error}
+    hint=${hint}
+    disabled=${disabled}
+    invalid=${invalid}
+    required=${required}
+    search=${search}
+    clear=${clear}>
     <option value="strawberry">Strawberry</option>
     <option value="orange">Orange</option>
     <option value="banana">Banana</option>

package/dist/collection/components/flyout-menu/flyout-menu.stories.js

@@ -29,12 +29,12 @@ const meta = {
         <b2b-flyout-menu-option
           slot="option"
           option="Delete"
-          disabled="${args.disabled}">
+          disabled=${args.disabled}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option
           slot="option"
           option="Pause"
-          separator="${args.separator}">
+          separator=${args.separator}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot="option" option="Copy">
         </b2b-flyout-menu-option>
@@ -72,12 +72,12 @@ export const AllStates = {
         <b2b-flyout-menu-option
           slot="option"
           option="Delete"
-          disabled="${args.disabled}">
+          disabled=${args.disabled}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option
           slot="option"
           option="Pause"
-          separator="${args.separator}">
+          separator=${args.separator}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot="option" option="Copy">
         </b2b-flyout-menu-option>