@otto-de/b2b-core-components 1.30.0 → 1.31.1

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

@@ -0,0 +1,115 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-modal', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="false">Test</b2b-modal>');
+        const element = await page.find('b2b-modal');
+        expect(element).toHaveClass('hydrated');
+        const modalDiv = await page.find('b2b-modal >>> div');
+        expect(await modalDiv.isVisible()).toBe(false);
+    });
+    it('open modal & heading', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+        const modalDiv = await page.find('b2b-modal >>> div');
+        expect(await modalDiv.isVisible()).toBe(true);
+        const headingElm = await modalDiv.find('b2b-headline');
+        expect(headingElm.textContent).toBe('Test Modal');
+    });
+    it('verify initial focus', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+        const modalDiv = await page.find('b2b-modal >>> div');
+        expect(await modalDiv.isVisible()).toBe(true);
+        await page.keyboard.press('Tab');
+        const closeContent = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.className;
+        });
+        expect(closeContent).toBe('b2b-modal__dialog__close');
+    });
+    it('verify focus trap', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+        const modalDiv = await page.find('b2b-modal >>> div');
+        expect(await modalDiv.isVisible()).toBe(true);
+        await page.keyboard.press('Tab');
+        let closeContent = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.className;
+        });
+        expect(closeContent).toBe('b2b-modal__dialog__close');
+        await page.keyboard.press('Tab');
+        closeContent = await page.evaluate(() => {
+            return document.activeElement.shadowRoot.activeElement.className;
+        });
+        expect(closeContent).toBe('b2b-modal__dialog__close');
+    });
+    it('verify close hover', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+        const modalDiv = await page.find('b2b-modal >>> div');
+        expect(await modalDiv.isVisible()).toBe(true);
+        const closeIcon = await page.find('b2b-modal >>> b2b-icon-100');
+        const closeIconColorBefore = await closeIcon.getProperty('color');
+        expect(closeIconColorBefore).toBe('secondary');
+        await closeIcon.hover();
+        await page.waitForChanges();
+        const closeIconColorAfter = await closeIcon.getProperty('color');
+        expect(closeIconColorAfter).toBe('primary');
+    });
+    it('verify close emit', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+        const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+        const b2bClose = await page.spyOnEvent('b2b-close');
+        const closeIcon = await page.find('b2b-modal >>> b2b-icon-100');
+        await closeIcon.click();
+        expect(b2bBeforeClose).toHaveReceivedEvent();
+        expect(b2bClose).toHaveReceivedEvent();
+    });
+    it('verify esc emit', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+        const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+        const b2bClose = await page.spyOnEvent('b2b-close');
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Escape');
+        expect(b2bBeforeClose).toHaveReceivedEvent();
+        expect(b2bClose).toHaveReceivedEvent();
+    });
+    it('verify esc no-emit', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true" esc-dismiss="false">Test</b2b-modal>');
+        const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+        const b2bClose = await page.spyOnEvent('b2b-close');
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Escape');
+        expect(b2bBeforeClose).not.toHaveReceivedEvent();
+        expect(b2bClose).not.toHaveReceivedEvent();
+    });
+    it('verify backdrop dismiss emit', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true" backdrop-dismiss="true">Test</b2b-modal>');
+        const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+        const b2bClose = await page.spyOnEvent('b2b-close');
+        await page.evaluate(() => {
+            document
+                .querySelector('b2b-modal')
+                .shadowRoot.querySelector('div > div.b2b-modal__backdrop').click();
+        });
+        expect(b2bBeforeClose).toHaveReceivedEvent();
+        expect(b2bClose).toHaveReceivedEvent();
+    });
+    it('verify backdrop dismiss not emit', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+        const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+        const b2bClose = await page.spyOnEvent('b2b-close');
+        await page.evaluate(() => {
+            document
+                .querySelector('b2b-modal')
+                .shadowRoot.querySelector('div > div.b2b-modal__backdrop').click();
+        });
+        expect(b2bBeforeClose).not.toHaveReceivedEvent();
+        expect(b2bClose).not.toHaveReceivedEvent();
+    });
+});

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

@@ -5,18 +5,6 @@ import { isFocusable, isHidden, queryShadowRoot } from "../../utils/focus-trap";
  */
 export class ModalComponent {
     constructor() {
-        /** Whether the modal is shown or not. Default is false */
-        this.opened = false;
-        /** A boolean that indicates whether the modal can be dismissed by clicking
-         in the backdrop outside the modal. */
-        this.backdropDismiss = false;
-        /** A boolean to indicate whether the modal can be dismissed by pressing
-         the escape key on the keyboard */
-        this.escDismiss = true;
-        /** The size of the modal. If not specified, will assume the default size */
-        this.variant = 'default';
-        this.iconHover = false;
-        this.isOpen = this.opened || false;
         this.focusableElements = [];
         this.toggleIconHover = () => {
             this.iconHover = !this.iconHover;
@@ -40,6 +28,13 @@ export class ModalComponent {
         this.handleBottomFocus = () => {
             this.attemptFocus(this.getFirstFocusableElement());
         };
+        this.heading = undefined;
+        this.opened = false;
+        this.backdropDismiss = false;
+        this.escDismiss = true;
+        this.variant = 'default';
+        this.iconHover = false;
+        this.isOpen = this.opened || false;
     }
     handleKeypress(event) {
         if (!this.isOpen || !this.escDismiss) {
@@ -87,10 +82,10 @@ export class ModalComponent {
         this.attemptFocus(this.getFirstFocusableElement());
     }
     render() {
-        return (h(Host, { key: '57cf9c1293832885c8a9f65391c7b95624f40a8a' }, h("div", { key: 'fb3bfde2963d3de1a9071c8993a3dce34763d099', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'd53620846e7eb0775c197ad4601a30dc899a893a', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '073904d21a9ac5f744f370bebaab9864ed04ed7d', class: {
+        return (h(Host, { key: 'b4b05e83f2b046b95c1a6b99497d1773c2a9b47a' }, h("div", { key: '53f334ae7646d4f76356bfbab36f2fa15a5b573e', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: '9956a9df55629700f513900645edf57069040607', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '42ec92fe4ea857844ead5918d7feeeb300af11d7', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, h("div", { key: '2cdaa83e0f3913419c12a523892e6500c9514b36', class: "b2b-modal__dialog__header" }, h("div", { key: '00fd9d1d313bc5e69489c873967bbb06aeffa875', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'ead66147a53fa39370393142e3678a32f95bd2be', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '0ebb0e815bca288982c9ccd6490fa18ad2d1f497', name: "header-icon" })), h("div", { key: '41ecbe947b084d8dd4a5cbb5974b3fc95ef4d6bb', class: "b2b-modal__dialog__header-right" }, h("button", { key: '80408142bc52d59defa94c605eac205b8547be79', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: '3e92db7ff54dfc2818d2e34c58c9dc665173c976', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: '78c3425f566e57dff9dbdd9ef85dc2f120f1db46', class: "b2b-modal__dialog__body" }, h("slot", { key: '9241bf3a4719a61e323d52e17354e3035021b9a1' })), h("div", { key: '098deae6ef5a9ddc160a1eab67cf673b992213eb', class: "b2b-modal__dialog__footer" }, h("div", { key: '79ae2b7d0945ea952449666e7f1fe195954e8e53', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '76031a259983b0cd7fa2af1c54d2d8b385efa20f', name: "footer-left" })), h("div", { key: '662f877f3120f0f5c39a4ddd679e44fa35c0cba6', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: 'c27e3ff882f6e0d67be6cb7f3097e66ddd51ef7b', name: "footer-right" })))), h("div", { key: '888d93dbc158b803fe9e3971113938b3e85620d3', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '39690d427f490ec555cd555a8c5c2b82df50c74c', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, h("div", { key: 'dbf97f26ae5ed4389ab13b90acdbcff506ba97a9', class: "b2b-modal__dialog__header" }, h("div", { key: '2d690ee0a36fca230335db2512e9e62067dd660e', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'd1e0a7f337bdca5aace7ca7bc401be91a3841e52', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '1353d71a10811f8d59f8234f7061085256690f35', name: "header-icon" })), h("div", { key: 'a7d169dc476c7026999251f31c90ba856f93a875', class: "b2b-modal__dialog__header-right" }, h("button", { key: '173acf84e14e203f2a69398e89736a90f9db05d4', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: '20e5481f4b9210323e280dc9f8c372ac852a36c5', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'abc50a9191e9bd392bea9541f5e6a9502de6ac0c', class: "b2b-modal__dialog__body" }, h("slot", { key: '9e985a993cfe662e1cb3e6a75bcdb12f7b521e29' })), h("div", { key: '62245e1b1d7706f711536df32bed44c341995a43', class: "b2b-modal__dialog__footer" }, h("div", { key: '0f1312eb1fcd6baf7693db1ac699d4a58e229f9c', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '8db890620ed795d59eecb1b880b3404978808981', name: "footer-left" })), h("div", { key: '508d4f186971487006cd44a5df7f5e1c52cb3029', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '19d4db8090b390e6104105dff3e82715d1de9a6a', name: "footer-right" })))), h("div", { key: '7de78642381949b8a07724df7c7df090793f9925', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: 'e8b96691c75061fb0525219c7227ac4f1f54e7ee', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     static get is() { return "b2b-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -108,7 +103,6 @@ export class ModalComponent {
         return {
             "heading": {
                 "type": "string",
-                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -121,13 +115,11 @@ export class ModalComponent {
                     "tags": [],
                     "text": "The title for the modal. This is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "heading",
                 "reflect": false
             },
             "opened": {
                 "type": "boolean",
-                "attribute": "opened",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -140,14 +132,12 @@ export class ModalComponent {
                     "tags": [],
                     "text": "Whether the modal is shown or not. Default is false"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "opened",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "backdropDismiss": {
                 "type": "boolean",
-                "attribute": "backdrop-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -160,14 +150,12 @@ export class ModalComponent {
                     "tags": [],
                     "text": "A boolean that indicates whether the modal can be dismissed by clicking\nin the backdrop outside the modal."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "backdrop-dismiss",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "escDismiss": {
                 "type": "boolean",
-                "attribute": "esc-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -180,14 +168,12 @@ export class ModalComponent {
                     "tags": [],
                     "text": "A boolean to indicate whether the modal can be dismissed by pressing\nthe escape key on the keyboard"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "esc-dismiss",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'large'",
@@ -200,8 +186,7 @@ export class ModalComponent {
                     "tags": [],
                     "text": "The size of the modal. If not specified, will assume the default size"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'default'"
             }

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.e2e.js

@@ -0,0 +1,74 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-multiselect-dropdown', () => {
+    it('should render with placeholder', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown placeholder="Select an option"></b2b-multiselect-dropdown>`,
+        });
+        const placeholder = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown__placeholder');
+        expect(placeholder).not.toBeNull();
+        expect(placeholder).toEqualText('Select an option');
+    });
+    it('should render with hint message', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown hint="Choose wisely!"></b2b-multiselect-dropdown>`,
+        });
+        const hint = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown__hint');
+        const text = hint.textContent;
+        expect(text).toBe('Choose wisely!');
+    });
+    it('should open dropdown on click and displays options', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown placeholder="Choose" options-list="Swift Carrot, Happy Onion, Cool Tomato"></b2b-multiselect-dropdown>`,
+        });
+        const trigger = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown');
+        await trigger.click();
+        await page.waitForChanges();
+        const allOptions = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+        expect(allOptions.length).toBeGreaterThan(1);
+        const checkbox = await allOptions[1].find('b2b-checkbox');
+        await checkbox.click();
+        const values = await Promise.all(allOptions.slice(1).map(async (opt) => {
+            const cb = await opt.find('b2b-checkbox');
+            return cb.getAttribute('value');
+        }));
+        expect(values).toContain('Swift Carrot');
+        expect(values).toContain('Happy Onion');
+        expect(values).toContain('Cool Tomato');
+    });
+    it('should emits b2b-selected event on option select and render the chips', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown options-list="Alpha, Beta"></b2b-multiselect-dropdown>`,
+        });
+        const trigger = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown');
+        await page.waitForChanges();
+        await trigger.click();
+        await page.waitForChanges();
+        const spy = await page.spyOnEvent('b2b-selected');
+        const allOptions = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+        const checkbox = await allOptions[1].find('b2b-checkbox');
+        await checkbox.click();
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEvent();
+        const chip = await page.find('b2b-multiselect-dropdown >>> b2b-chip-component');
+        expect(chip).not.toBeNull();
+        const valueHandle = await chip.getProperty('value');
+        expect(valueHandle).toBe('Alpha');
+    });
+    it('should render two chips when select all is clicked', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown options-list="Alpha, Beta"></b2b-multiselect-dropdown>`,
+        });
+        const trigger = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown');
+        await page.waitForChanges();
+        await trigger.click();
+        await page.waitForChanges();
+        const spy = await page.spyOnEvent('b2b-selected');
+        const allOptions = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+        const checkbox = await allOptions[0].find('b2b-checkbox');
+        await checkbox.click();
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEvent();
+        const chips = await page.findAll('b2b-multiselect-dropdown >>> b2b-chip-component');
+        expect(chips.length).toBe(2);
+    });
+});

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

@@ -1,24 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class B2bMultiSelectDropdown {
     constructor() {
-        /** The initial values to be selected in the dropdown. */
-        this.selectedValues = [];
-        /** The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. */
-        this.optionsList = [];
-        /** The maximum amount of chips visible. Adjust this depending on available size of the dropdown. */
-        this.maxOptionsVisible = 8;
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** Whether the multi select dropdown is currently invalid. Per default, it is false. */
-        this.invalid = false;
-        /** Whether or not the field is disabled. Default is false. */
-        this.disabled = false;
-        this.currentSelectedValues = [];
-        this.currentList = this.optionsList;
-        this.value = '';
-        this.isElementFocused = false;
-        this.isOpen = false;
-        this.hasOptionList = this.optionsList.length > 0;
         this.handleInput = event => {
             if (this.disabled) {
                 return;
@@ -148,6 +130,24 @@ export class B2bMultiSelectDropdown {
             checkbox.selected = everySelected;
             checkbox.indeterminate = someSelected && !everySelected;
         };
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.selectedValues = [];
+        this.optionsList = [];
+        this.searchPlaceholder = undefined;
+        this.selectAllLabel = undefined;
+        this.maxOptionsVisible = 8;
+        this.required = false;
+        this.invalid = false;
+        this.errorMessage = undefined;
+        this.hint = undefined;
+        this.disabled = false;
+        this.currentSelectedValues = [];
+        this.currentList = this.optionsList;
+        this.value = '';
+        this.isElementFocused = false;
+        this.isOpen = false;
+        this.hasOptionList = this.optionsList.length > 0;
     }
     parsePropToArray(value) {
         if (Array.isArray(value))
@@ -191,16 +191,16 @@ export class B2bMultiSelectDropdown {
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: 'a2ea56dd9f8e22791977a18257f1bedfd503c1b0', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'dcb1b8018c37c25321dd0642ae4af7511b12a650', required: this.required }, this.label), h("div", { key: 'ed16640e57d65fef15da6e5f3f2bb8278602bb23', class: {
+        return (h(Host, { key: 'c105c46f7461d0a2692282ed15d07460e31273b9', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '93fc16c4f74cb669bc7d0d82a673b414224eb4b1', required: this.required }, this.label), h("div", { key: '397e2d0b2315f5fdce8c2cf041ac4a92f9effea5', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isOpen,
                 'b2b-multiselect-dropdown--error': this.invalid && !this.disabled,
                 'b2b-multiselect-dropdown--disabled': this.disabled,
                 'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
-            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen), "aria-expanded": this.isElementFocused }, h("div", { key: '45bd1327a6afb89694397e700d692a99e8d07271', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: 'bd5977b793a2489d473e7c7c65a9b7b97d3b8ada', icon: "b2b_icon-arrow-down" })), h("div", { key: '533afb04a66f4834a9f231b132ea528f376ec487', class: {
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen), "aria-expanded": this.isElementFocused }, h("div", { key: '2b3693ab1bd0fb6be6b13efa8eb8561b10480104', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: 'ee601f312e28840cdc16501dc60b016a6106cc3e', icon: "b2b_icon-arrow-down" })), h("div", { key: '50b47c0f1f20afd3ec6ed093237a202ed1d9a59b', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
-            } }, h("div", { key: '5c6077ced3db305852907f3a467a99a15c0f37fb', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '402a7a3c198e1f0cb3731669735ee5225e03fe7f', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'af84425cf97ab07b37e0ad06f589dcc8c67ff3a7', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'b141120a96d327f1950846d61ecbe8c05e3a1a1e', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: 'b8c651872eca608e3c02c42920cf0d8e6d117aa9', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '2a0d909d9994ac59a22e60c0ed729cf90d74cf92', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '66081cd675bb03da68a445c090c69632611e1a32', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'a1b146c742e206c05341aab80f49629a536b9c09', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
             this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option }))))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)) : (''), this.errorMessage !== undefined && this.invalid && !this.disabled ? (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage)) : ('')));
     }
@@ -220,7 +220,6 @@ export class B2bMultiSelectDropdown {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -233,13 +232,11 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The input label."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -252,13 +249,11 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The placeholder shown in the input field."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder",
                 "reflect": true
             },
             "selectedValues": {
                 "type": "string",
-                "attribute": "selected-values",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -271,14 +266,12 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The initial values to be selected in the dropdown."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-values",
                 "reflect": false,
                 "defaultValue": "[]"
             },
             "optionsList": {
                 "type": "string",
-                "attribute": "options-list",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -291,14 +284,12 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "options-list",
                 "reflect": false,
                 "defaultValue": "[]"
             },
             "searchPlaceholder": {
                 "type": "string",
-                "attribute": "search-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -311,13 +302,11 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The placeholder shown in the search bar."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "search-placeholder",
                 "reflect": false
             },
             "selectAllLabel": {
                 "type": "string",
-                "attribute": "select-all-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -330,13 +319,11 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The string displayed as the select all label."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "select-all-label",
                 "reflect": false
             },
             "maxOptionsVisible": {
                 "type": "number",
-                "attribute": "max-options-visible",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -349,14 +336,12 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The maximum amount of chips visible. Adjust this depending on available size of the dropdown."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "max-options-visible",
                 "reflect": false,
                 "defaultValue": "8"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -369,14 +354,12 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -389,14 +372,12 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "Whether the multi select dropdown is currently invalid. Per default, it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
-                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -409,13 +390,11 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The error message that is shown if the multi select dropdown is invalid."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error-message",
                 "reflect": false
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -428,13 +407,11 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "The hint text that appears underneath the multi select dropdown field."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -447,8 +424,7 @@ export class B2bMultiSelectDropdown {
                     "tags": [],
                     "text": "Whether or not the field is disabled. Default is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.js

@@ -1,10 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class B2bMultiSelectOption {
     constructor() {
-        /** Whether the option is currently selected. */
-        this.selected = false;
-        /** @internal Whether the checkbox is in indeterminate state. */
-        this.indeterminate = false;
         this.handleCheckboxChange = event => {
             this.selected = event.detail.checked;
             this.b2bOptionSelected.emit({
@@ -12,11 +8,14 @@ export class B2bMultiSelectOption {
                 selectedOption: this.option,
             });
         };
+        this.option = undefined;
+        this.selected = false;
+        this.indeterminate = false;
     }
     render() {
-        return (h(Host, { key: '24444254871dab3d4f08096a0a8e7eca725f0dd9', role: "option", class: {
+        return (h(Host, { key: 'c3c1955fd6ff4019b2cbc860ded4a0d51dc7b4ee', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: 'd4b4bdf2025a374f1b751c74e06466759cbc2baa', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: '898231cd21f30da27314fa0b938a030c39fedbca', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get is() { return "b2b-multiselect-option"; }
     static get originalStyleUrls() {
@@ -33,7 +32,6 @@ export class B2bMultiSelectOption {
         return {
             "option": {
                 "type": "string",
-                "attribute": "option",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -46,13 +44,11 @@ export class B2bMultiSelectOption {
                     "tags": [],
                     "text": "The label of the option."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "option",
                 "reflect": false
             },
             "selected": {
                 "type": "boolean",
-                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -65,14 +61,12 @@ export class B2bMultiSelectOption {
                     "tags": [],
                     "text": "Whether the option is currently selected."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "indeterminate": {
                 "type": "boolean",
-                "attribute": "indeterminate",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -88,8 +82,7 @@ export class B2bMultiSelectOption {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "indeterminate",
                 "reflect": false,
                 "defaultValue": "false"
             }