@otto-de/b2b-core-components 1.36.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.css

@@ -286,9 +286,6 @@
   line-height: var(--b2b-size-copy-line-height-75);
   user-select: none;
 }
-.b2b-checkbox--error {
-  /* When an input is both checked AND has an error */
-}
 .b2b-checkbox--error .b2b-checkbox__input {
   background-color: var(--b2b-color-error-50);
   border: 1px solid var(--b2b-color-error-100);
@@ -296,6 +293,9 @@
 .b2b-checkbox--error span {
   color: var(--b2b-color-error-100);
 }
+.b2b-checkbox--error {
+  /* When an input is both checked AND has an error */
+}
 .b2b-checkbox--error.b2b-checkbox--checked .b2b-checkbox__input {
   background-color: var(--b2b-color-error-100);
   border-color: var(--b2b-color-error-100);

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.e2e.js

@@ -47,12 +47,27 @@ describe('B2B-Dropdown', () => {
         element = await page.find('b2b-dropdown');
         expect(element).toHaveClass('b2b-dropdown--error');
     });
-    it('ensure clear icon is visible', async () => {
-        let dropdown = await page.find('b2b-dropdown');
-        const clearIcon = await dropdown.shadowRoot.querySelector('.b2b-dropdown__clear-icon');
+    it('ensure clear icon is visible when the clear is enabled', async () => {
+        const dropdown = await page.find('b2b-dropdown');
+        dropdown.setProperty('clear', true);
+        dropdown.setProperty('selectedText', 'Option 1');
+        await page.waitForChanges();
+        const clearIcon = await page.find('b2b-dropdown >>> b2b-icon-100.b2b-dropdown__clear-icon');
         expect(clearIcon).not.toBeNull();
     });
+    it('ensure clear icon is not visible when the clear is disabled', async () => {
+        const dropdown = await page.find('b2b-dropdown');
+        dropdown.setProperty('clear', false);
+        dropdown.setProperty('selectedText', 'Option 1');
+        await page.waitForChanges();
+        const clearIcon = await page.find('b2b-dropdown >>> b2b-icon-100.b2b-dropdown__clear-icon');
+        expect(clearIcon).toBeNull();
+    });
     it('ensure text is cleared when clear icon is clicked', async () => {
+        const dropdown = await page.find('b2b-dropdown');
+        dropdown.setProperty('clear', true);
+        dropdown.setProperty('selectedText', 'Option 1');
+        await page.waitForChanges();
         const clearIcon = await page.find('b2b-dropdown >>> b2b-icon-100.b2b-dropdown__clear-icon');
         expect(clearIcon).not.toBeNull();
         await clearIcon.click();
@@ -64,6 +79,9 @@ describe('B2B-Dropdown', () => {
     it('ensure text is cleared when clear icon is clicked when search is enabled', async () => {
         let dropdown = await page.find('b2b-dropdown');
         dropdown.setProperty('search', true);
+        dropdown.setProperty('clear', true);
+        dropdown.setProperty('selectedText', 'Option 1');
+        await page.waitForChanges();
         const clearIcon = await page.find('b2b-dropdown >>> b2b-icon-100.b2b-dropdown__clear-icon');
         expect(clearIcon).not.toBeNull();
         await clearIcon.click();
@@ -74,6 +92,7 @@ describe('B2B-Dropdown', () => {
     });
     it('should clear the selection and reset to placeholder', async () => {
         let dropdown = await page.find('b2b-dropdown');
+        dropdown.setProperty('clear', true);
         await dropdown.callMethod('clearSelection');
         await page.waitForChanges();
         dropdown = await page.find('b2b-dropdown');

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

@@ -117,6 +117,7 @@ export class DropdownComponent {
         };
         this.label = undefined;
         this.search = false;
+        this.clear = false;
         this.required = false;
         this.name = undefined;
         this.placeholder = 'Select an option...';
@@ -209,20 +210,24 @@ export class DropdownComponent {
         const showHint = this.hint && !hasError;
         const showError = this.error && hasError;
         const filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
-        return (h(Host, { key: 'd9762514c854be8f40fd2baaa991b4ae1366cfa3', class: {
+        return (h(Host, { key: '785fa8173bebeb605d409ea84ca3e334006336ab', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled || this.groupDisabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '2473ccb7d1d9949bbd500adbbad53b1c302593d3', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, this.search ? (h("b2b-input", { placeholder: this.placeholder, invalid: hasError, value: this.truncatedText || this.searchValue, disabled: this.disabled || this.groupDisabled, "onB2b-focus": () => {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'f1d77d99955532bf600ab91d36b716d1f02ede62', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, this.search ? (h("b2b-input", { placeholder: this.placeholder, invalid: hasError, value: this.truncatedText || this.searchValue, disabled: this.disabled || this.groupDisabled, "onB2b-focus": () => {
                 this.isOpen = true;
                 this.focused = true;
             }, "onB2b-input": this.handleSearchInput }, h("div", { slot: "end" }, (this.selectedText || this.searchValue) &&
             !this.disabled &&
-            !this.groupDisabled && (h("b2b-icon-100", { class: "b2b-dropdown__clear-icon", icon: 'b2b_icon-close', clickable: true, onClick: this.clearSelectedValue })), h("b2b-icon-100", { class: "b2b-dropdown__arrow-icon", icon: 'b2b_icon-arrow-down', onClick: this.toggleDropdownWithSearch })))) : (h("div", { class: {
+            !this.groupDisabled &&
+            this.clear && (h("b2b-icon-100", { class: "b2b-dropdown__clear-icon", icon: 'b2b_icon-close', clickable: true, onClick: this.clearSelectedValue })), h("b2b-icon-100", { class: "b2b-dropdown__arrow-icon", icon: 'b2b_icon-arrow-down', onClick: this.toggleDropdownWithSearch })))) : (h("div", { class: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,
-            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.truncatedText, this.selectedText && !this.disabled && !this.groupDisabled && (h("b2b-icon-100", { class: "b2b-dropdown__clear-icon", onClick: this.clearSelectedValue, clickable: true, icon: 'b2b_icon-close' })))), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, filteredOptions.map(option => (h("div", { key: option.value, class: {
+            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.truncatedText, this.selectedText &&
+            !this.disabled &&
+            !this.groupDisabled &&
+            this.clear && (h("b2b-icon-100", { class: "b2b-dropdown__clear-icon", onClick: this.clearSelectedValue, clickable: true, icon: 'b2b_icon-close' })))), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, filteredOptions.map(option => (h("div", { key: option.value, class: {
                 'b2b-dropdown__option': true,
                 'b2b-dropdown__option--selected': option.selected,
                 'b2b-dropdown__option--disabled': option.disabled,
@@ -277,6 +282,24 @@ export class DropdownComponent {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "clear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a clear button to the select to clear the current selection."
+                },
+                "attribute": "clear",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,