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

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

@@ -1,6 +1,7 @@
 import { h, Host, } from "@stencil/core";
 export class DropdownComponent {
     constructor() {
+        this.ignoreNextMutation = false;
         this.onClickOutside = (ev) => {
             if (!this.hostElement.contains(ev.target))
                 this.isOpen = false;
@@ -17,22 +18,42 @@ export class DropdownComponent {
             this.focused = false;
             this.b2bBlur.emit(ev);
         };
+        this.clearSelectedValue = (event) => {
+            event.stopPropagation();
+            this.clearSelection();
+            this.searchValue = '';
+            this.b2bChange.emit(this.placeholderValue);
+        };
         this.onSelect = (event) => {
             var _a;
             const target = event.target;
             const value = target.getAttribute('data-value');
             const label = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim();
             if (value != null) {
+                this.ignoreNextMutation = true;
                 this.selectedValue = value;
                 this.selectedText = label || '';
-                this.b2bChange.emit(value);
                 this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: opt.value === value })));
+                const nativeOptions = this.hostElement.querySelectorAll('option');
+                nativeOptions.forEach(opt => {
+                    if (opt.value === value) {
+                        opt.setAttribute('selected', '');
+                        opt.selected = true;
+                    }
+                    else {
+                        opt.removeAttribute('selected');
+                        opt.selected = false;
+                    }
+                });
                 this.isOpen = false;
+                this.b2bChange.emit(value);
                 this.updateTruncatedText();
+                this.ignoreNextMutation = false;
             }
         };
         this.updateTruncatedText = () => {
-            const rawText = this.selectedText || this.placeholder;
+            const inputValue = this.search ? '' : this.placeholder;
+            const rawText = this.selectedText || inputValue;
             if (this.selectEl == null) {
                 this.truncatedText = rawText;
                 return;
@@ -67,7 +88,35 @@ export class DropdownComponent {
             }
             this.truncatedText = truncated + '…';
         };
+        this.handleSearchInput = (event) => {
+            if (this.selectedText &&
+                event.target.value !== this.selectedText) {
+                this.selectedText = '';
+                this.selectedValue = this.placeholderValue;
+                this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
+            }
+            this.searchValue = event.target.value;
+            this.isOpen = true;
+        };
+        this.toggleDropdownWithSearch = (event) => {
+            event.stopPropagation();
+            this.toggleDropdown();
+            if (this.isOpen) {
+                this.focusSearchInput();
+            }
+        };
+        this.focusSearchInput = () => {
+            var _a, _b;
+            const inputComponent = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('b2b-input');
+            if (inputComponent != null) {
+                const inputElement = (_b = inputComponent.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+                if (inputElement != null) {
+                    inputElement.focus();
+                }
+            }
+        };
         this.label = undefined;
+        this.search = false;
         this.required = false;
         this.name = undefined;
         this.placeholder = 'Select an option...';
@@ -82,21 +131,31 @@ export class DropdownComponent {
         this.selectedValue = '';
         this.selectedText = '';
         this.options = [];
+        this.searchValue = '';
         this.truncatedText = '';
     }
     /** Method to programmatically clear selection of the dropdown. */
     async clearSelection() {
+        this.ignoreNextMutation = true;
         this.selectedValue = this.placeholderValue;
         this.selectedText = '';
         this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
+        const nativeOptions = this.hostElement.querySelectorAll('option');
+        nativeOptions.forEach(opt => {
+            opt.removeAttribute('selected');
+            opt.selected = false;
+        });
         this.isOpen = false;
         this.updateTruncatedText();
+        this.ignoreNextMutation = false;
     }
     componentWillLoad() {
         this.initializeOptions();
         if (typeof MutationObserver !== 'undefined') {
             this.mutationObserver = new MutationObserver(() => {
-                this.initializeOptions();
+                if (!this.ignoreNextMutation) {
+                    this.initializeOptions();
+                }
             });
             this.mutationObserver.observe(this.hostElement, {
                 childList: true,
@@ -149,15 +208,21 @@ export class DropdownComponent {
         const hasError = this.invalid && !this.disabled && !this.groupDisabled;
         const showHint = this.hint && !hasError;
         const showError = this.error && hasError;
-        return (h(Host, { key: 'e719de6e666225d6b807810570bd32d4906a2647', class: {
+        const filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
+        return (h(Host, { key: 'd9762514c854be8f40fd2baaa991b4ae1366cfa3', 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: '690c9a335c7171312fb9de9cf6894af979eaa471', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: 'fcbbc73636118d451f0ec5aa5ce1cd2baa0dec9b', class: {
+            } }, 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.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: {
                 '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.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.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 && (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,
@@ -194,6 +259,24 @@ export class DropdownComponent {
                 "attribute": "label",
                 "reflect": false
             },
+            "search": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the search functionality when set to true within the dropdown. By default search is disabled."
+                },
+                "attribute": "search",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -365,6 +448,7 @@ export class DropdownComponent {
             "selectedValue": {},
             "selectedText": {},
             "options": {},
+            "searchValue": {},
             "truncatedText": {}
         };
     }

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

@@ -1,7 +1,7 @@
 import { userEvent } from "@storybook/test";
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid, hint, error, selected = false, }) => {
+const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid, hint, error, search, selected = false, }) => {
     return html `<b2b-dropdown
     label="${label}"
     name="${name}"
@@ -9,7 +9,8 @@ const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid,
     hint="${hint}"
     disabled="${disabled}"
     invalid="${invalid}"
-    required="${required}">
+    required="${required}"
+    search="${search}">
     <option value="strawberry">Strawberry</option>
     <option value="orange">Orange</option>
     <option value="banana">Banana</option>
@@ -33,6 +34,7 @@ const defaultArgs = {
     invalid: false,
     hint: 'Pick one',
     error: 'Not that one!',
+    search: false,
 };
 export const story010Default = Template.bind({});
 story010Default.args = Object.assign({}, defaultArgs);
@@ -57,6 +59,9 @@ story050Selected.play = async ({ canvasElement }) => {
         await userEvent.click(wrapper);
     }, 500);
 };
+export const story060Search = Template.bind({});
+story060Search.args = Object.assign(Object.assign({}, defaultArgs), { search: true });
+story060Search.storyName = 'Search';
 const dropdownArgs = getArgTypes('b2b-dropdown');
 export default {
     title: 'Components/Form/Dropdown',

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

@@ -16,7 +16,7 @@ export class FlyoutMenuOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'd9f5fada05c44e475d2e645d51c3ba268844a8e3', class: {
+        return (h(Host, { key: '4064c5827dffd55637271a59061a2c2abb54d3ca', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

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

@@ -144,12 +144,12 @@ export class FlyoutMenuComponent {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '5e1d292b710d19a4bf5ece7047d4c5288b24f9b5' }, h("div", { key: 'd7d781fa8dfdd9f4bdecad06209400610a7f37bf', class: {
+        return (h(Host, { key: '03efeb4e28ef04b0719b3ade8e52d20cf3046372' }, h("div", { key: 'e2508205d7402d2ed8ef031c8ab5483a6fbdedbd', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: '124c0ee9f83a252aabac1f09a11932ffde4b6bf1', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '588027fd799f42d6b095ad82247cc6974424fc23', name: "trigger" })), h("div", { key: 'baa37193ac12427e868c6742a526516f91e37a02', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: 'c6283f5ebff4ec0962face0e0f440e2cf0ec9ceb', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '303181fa8dac70e463b0efa7fa18a339c84b7009', name: "trigger" })), h("div", { key: 'ff4058c24c1c84c967316569bee8d75d49497eba', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '043ff6439dca6d4fccaa29f4bda5c52645154196', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'e95bcf37c9d1fc77509fbdf2de47001d88d7630a', name: "option" })))));
+            } }, h("div", { key: '860224aa691a4c06814731aca94d85a762fc806b', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'be5a754361d59fdbdf5ac934b0d1f5b50de8e3a1', name: "option" })))));
     }
     static get is() { return "b2b-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class B2bGridColumnComponent {
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'ca84abbad02173e29f80329a4faab238aa41ec9d', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'e11625544ba0b0fc501ff811e8f5ca1ac89194c9' })));
+        return (h(Host, { key: 'e6a06fd72fd364f57b423bdc69cd9c2d4a87d0ca', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'd5785321b8ae17e90fd3aa9e69cc8911430d3e8c' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class B2bGridComponent {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: '01c61abbb9d20b4479031e0545967f08782650dc', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '64a173edfae1ff772091163fecc55bebdc2462b9' })));
+        return (h(Host, { key: '0a61abf781f924eb4b88ceb02bece63d2a39f76b', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '02903dbdba9c4973573bac7be02b0e6d3a9cd71a' })));
     }
     static get is() { return "b2b-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class B2bGridRowComponent {
         });
     }
     render() {
-        return (h(Host, { key: '019e65e7db27c37305f49e396389c72fbcf82281', style: {
+        return (h(Host, { key: '60ea771fe5da5fc9aa305824f6718d5f1d687374', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -74,7 +74,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'e203c9bde0b21f923b356b6e330ab6e4227fd1a5' })));
+            } }, h("slot", { key: 'f38f2b66439b0d8820aa2b25ab88f2c7e02d4ae5' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -98,18 +98,18 @@ export class InputComponent {
         this.filterHintSlotContent();
     }
     render() {
-        return (h(Host, { key: 'b18e9dad8fdc84804b77049fd7b94c6b05541c3f', class: {
+        return (h(Host, { key: '69031aea30430dd03e384611a5f351f9e4411583', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '655f632484049add498904c26d766670eb3b9203', class: {
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '5e17439f86886dd04cf3a0bc42f83e75c060e3d9', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: '1d0650fa02aa56cf183a8c3c89e5791a53c54944', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '88e9aa5076bd6dd59eafac8491d6fafc9eec8b5e', class: {
+            } }, h("slot", { key: '69d66dec8cdd7bf0de111e32395812bdee4fe006', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: 'e2fd5a7753d9543dc0093dba0a611f653a5862df', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
                 'b2b-input__native-input--disabled': this.disabled || this.groupDisabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'c93445fb93de27a7e1d4681bc7a48d44bb8baa1a', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '28bc5adffc6b4144e87904a9a059fd609661ac75', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
             (!this.invalid || this.disabled || this.groupDisabled) ? (h("span", null, h("slot", { name: "hint" }, this.hint))) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-input"; }

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

@@ -49,7 +49,7 @@ export class B2BInputGroup {
         }
     }
     render() {
-        return (h(Host, { key: '30fc190f60b27b6f11fdcc7ed37cc95eee557e5e' }, h("div", { key: '054b44ad5994365e1ea8034a854e2d1b23c6d5e2', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '73b19a2684e84873ada8ec3b2f5c4f465f1fb382', name: "start" }), h("slot", { key: 'f0d15628f49e1d7c83eafaa7a631bd71a673ff97' }), h("slot", { key: '00209dc3c6bf3b3e4418e79dcb6387effc0d8531', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
+        return (h(Host, { key: 'fa99a4e2f8a5923b14d6304378fc574e8fa0f451' }, h("div", { key: 'ac085ec1ba4ae6566e29192fcf41487a5aeaf2dd', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '9412332e469771720376b5d16b101b21867a29ad', name: "start" }), h("slot", { key: 'eb2201d7243365abd486e6a17c99ba84e942415d' }), h("slot", { key: 'c4d8b4c1b837de6bf80049d8b94e402dbb1e663d', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
                 'b2b-input-wrapper__hint': true,
                 'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
             } }, this.invalid && !this.disabled ? this.error : this.hint))));

package/dist/collection/components/input-label/input-label.js

@@ -5,11 +5,11 @@ export class InputLabelComponent {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '87fe33e03bfe683d013e8d992bba9e3863834514' }, h("label", { key: 'e88216535eb3d9638fc75a638daffb81bcdf0bb1', class: {
+        return (h(Host, { key: '8cdefd0d3cafc0bdf9dba5fa7a15080a4a288379' }, h("label", { key: '04d4659be8363b1b8760c94e5607a3048e02cebf', class: {
                 'b2b-input-label': true,
                 'b2b-input-label--required': this.required,
                 'b2b-input-label--disabled': this.disabled,
-            } }, h("slot", { key: 'cf1736baaf9fd224071f3e21122c263b9865c318' }))));
+            } }, h("slot", { key: 'a858c509020588bb10669c4fa0bc682ba97a5675' }))));
     }
     static get is() { return "b2b-input-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class InputListOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '566b7cf1696550467c5b8c29cedccf5f8821dc6e', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
+        return (h(Host, { key: 'e9c7180cdbf328d435b5bcac76e4e11a234d4dcc', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
     }
     static get is() { return "b2b-input-list-option"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ describe('B2B-InputList', () => {
         search.setProperty('optionsList', optionsList);
         await page.waitForChanges();
     };
-    const typeInput = async (key = '8') => {
+    const typeInput = async (key = 'o') => {
         let input = await page.find('b2b-input-list >>> b2b-input');
         // focus on input element, focus method did not work
         await input.click();
@@ -62,11 +62,11 @@ describe('B2B-InputList', () => {
     it('should not show search list when the input has no value', async () => {
         await setOptionsList();
         const input = await page.find('b2b-input-list');
-        // focus on input element, focus method did not work
         await input.click();
-        await input.press('8');
+        await input.press('1');
         await page.waitForChanges();
         let searchListResults = await page.find({ text: optionsList[0] });
+        expect(searchListResults).not.toBeNull();
         expect(await searchListResults.isVisible()).toBe(true);
         await input.click();
         await input.press('Backspace');
@@ -105,10 +105,10 @@ describe('B2B-InputList', () => {
     });
     it('should fill up input value with option selected', async () => {
         await setOptionsList();
-        await typeInput('8');
+        await typeInput('1');
         const input = await page.find('b2b-input-list >>> b2b-input');
         let inputValue = await input.getProperty('value');
-        expect(inputValue).toBe('8');
+        expect(inputValue).toBe('1');
         // Click first option on the list
         const option = await page.find({ text: optionsList[0] });
         await option.click();

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

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { parsePropToArray } from "../../utils/json-property-binding-util";
 const keys = {
     ARROW_UP: 'ArrowUp',
     ARROW_DOWN: 'ArrowDown',
@@ -21,6 +22,11 @@ export class InputListComponent {
         // needed to trigger re-render
         this.handleInput = event => {
             this.value = event.detail.value;
+            const term = event.target.value.toLowerCase();
+            const list = parsePropToArray(this.optionsList);
+            this.currentList =
+                term === '' ? list : list.filter(o => o.toLowerCase().includes(term));
+            this.searchValue = term;
             if (this.value === '' || null || undefined) {
                 this.setElementOnBlur();
             }
@@ -81,7 +87,13 @@ export class InputListComponent {
         this.disabled = false;
         this.groupDisabled = false;
         this.hasOptionList = this.optionsList.length > 0;
+        this.currentList = [];
         this.isElementFocused = false;
+        this.searchValue = '';
+    }
+    componentWillLoad() {
+        this.currentList = parsePropToArray(this.optionsList);
+        this.hasOptionList = this.optionsList.length > 0;
     }
     handleKeyDown(event) {
         /** we need to be informed when a user changes focus to the clear button
@@ -129,6 +141,7 @@ export class InputListComponent {
     }
     watchPropHandler(newList) {
         this.hasOptionList = newList.length > 0;
+        this.currentList = [...newList];
     }
     /* Notes:
       Needs onFocusin and onFocusout in the Host element so that the click would
@@ -137,13 +150,13 @@ export class InputListComponent {
     */
     render() {
         const groupOrderClass = this.getGroupOrderClassName() || '';
-        return (h(Host, { key: 'c22a6a73eca142a88eb7cc3f4c975b579df1d709', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '3fb28f6a327c958fcf9d178c4d1814915a13ad3a', class: {
+        return (h(Host, { key: 'a3b50598632e6a0a796a9eb141f26fe12b29e8be', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '9d7e4f051f2593947ce3cbf5602f6a4a602fbdfc', class: {
                 'b2b-input-list': true,
                 'b2b-input-list__options-on': this.hasOptionList &&
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, h("b2b-input", { key: '2cd2ba2a073ca4b1980ac5621b60f0ee351e5cca', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+            } }, h("b2b-input", { key: '654211622b3bc8094ce6b20edd2b3c19f2ac28c3', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.currentList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
     }
     static get is() { return "b2b-input-list"; }
     static get encapsulation() { return "shadow"; }
@@ -212,11 +225,11 @@ export class InputListComponent {
                 "reflect": true
             },
             "optionsList": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
@@ -225,6 +238,8 @@ export class InputListComponent {
                     "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."
                 },
+                "attribute": "options-list",
+                "reflect": false,
                 "defaultValue": "[]"
             },
             "value": {
@@ -289,7 +304,9 @@ export class InputListComponent {
     static get states() {
         return {
             "hasOptionList": {},
-            "isElementFocused": {}
+            "currentList": {},
+            "isElementFocused": {},
+            "searchValue": {}
         };
     }
     static get events() {

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

@@ -4,10 +4,10 @@ export class LabelComponent {
         this.type = 'neutral';
     }
     render() {
-        return (h("span", { key: '8b3e3c895c71501e761b6a80843403df68190cca', class: {
+        return (h("span", { key: '86d64389cf254eb3fb56e58c9399087e4d053f5f', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, h("slot", { key: '737f1fff0fd98d426cc910a6af713786aa7bd1cc' })));
+            } }, h("slot", { key: 'd85ee68f76a02a02c4c10e2ef634fdc4c412229a' })));
     }
     static get is() { return "b2b-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -82,10 +82,10 @@ export class ModalComponent {
         this.attemptFocus(this.getFirstFocusableElement());
     }
     render() {
-        return (h(Host, { key: '1ae4da3d85c98d784c5aa3254eec819791538b75' }, h("div", { key: 'a504235885dd6d98d6f909d9cf3d67adf0f1f6c0', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'fffccabe0df78b009dc23f7dac95f5bbf7ce07e4', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: 'd4c09be02aa93046ad8835da3affb70c0d7685dc', class: {
+        return (h(Host, { key: 'bea74834a3926bc7efd9100f065eb4a8603e8bd4' }, h("div", { key: '5d5cca368682bcd7de4f77fe05e702b87943f762', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'ba06899cee12d6ef3d3e71a96040daccfdf3b364', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '0be5c5dcc62576e1662ed7f6185b0ff24afaadc4', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, h("div", { key: '85add6446151ec3df71ba825bab64d100306bc10', class: "b2b-modal__dialog__header" }, h("div", { key: '3fc56d466fe2eb9e6ca594ff867c48fe05ffda09', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'cf348827107b36494427ddaac019a539c379364a', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '8df87ec03dcdb11bbf96c1c49c9ea9d81a84a558', name: "header-icon" })), h("div", { key: '80f6e9e7d7ad6e71c15525a7a12eb885c48c6c2a', class: "b2b-modal__dialog__header-right" }, h("button", { key: '7e2373011323d5abc38803862f30aa0b3ae394e6', 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: 'a4955d65f73cf81cd919e5dbcf63db3251cf7449', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: '3147b6a75f66f90d45f1a404f9dfb140634a6a35', class: "b2b-modal__dialog__body" }, h("slot", { key: '7ad81c8b9e610720c3ed918d255017a32d4128d4' })), h("div", { key: '7e7b6105f3bc4b1ad06eb7b7c7f43c91eb310c51', class: "b2b-modal__dialog__footer" }, h("div", { key: 'd3abac0aade1244074f2bb038e736e981d67f5ae', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '61599dfd481e53897522fabc44915546ac3d0f59', name: "footer-left" })), h("div", { key: '07c6cfca3f4e1545644292e4c04c9f02149d37b8', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '7b161e0e61c4e36c0ae1a2930b95e39991d72879', name: "footer-right" })))), h("div", { key: 'd5ac30a02abfd2b89dce1d913971a417198cd155', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '570e98eefabd147193cb04d9d493e46a08411e3f', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, h("div", { key: '11b056ce706f572663e3a64cd5115ccc45109190', class: "b2b-modal__dialog__header" }, h("div", { key: '073420de4937e8f18a2172a45eb7088caef4624e', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: '3fdaeaccfd4606560ae82c8cbc8ad8eb65a9dfa8', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: 'f280675fcff7e81d1dc6388820f04110de703f8f', name: "header-icon" })), h("div", { key: '6a821204fdce083dfa0267714e1bc438b3dfcd56', class: "b2b-modal__dialog__header-right" }, h("button", { key: 'aa97e6cf511417d3a283017419577e6da8f65fff', 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: 'c4ff1783dc4d7c7d7b85bc739d0b5154fc60eacb', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'ebf5d6a280718bf7f4c98e41846dea91dbde6943', class: "b2b-modal__dialog__body" }, h("slot", { key: 'b9b1b56a4b45760e88f6cb7e54281cd468137ccc' })), h("div", { key: 'ff0f612d9581c5f5bd48bd99699b1fc1348a577a', class: "b2b-modal__dialog__footer" }, h("div", { key: 'bf034c403f883695a72bd5ee0ec7a6b5c40f6ef1', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '52a6a99d0a722bf37c8659290ceaec53d5acc546', name: "footer-left" })), h("div", { key: '5d5a6786dfe6708cb17ca37e92c0f5c4366b6e0c', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '37f62cb0bf38031673f53f7ef2578e2c5c5219f9', name: "footer-right" })))), h("div", { key: 'b0eb907e93024c42e2b3668316f51b1e6b7d5aa3', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '6d6762fb11007e46c3d3872ab208e40aa0e28d4a', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     static get is() { return "b2b-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -207,16 +207,16 @@ export class B2bMultiSelectDropdown {
         const hasError = this.invalid && !disabled;
         const showHint = this.hint && !hasError;
         const showError = this.errorMessage && hasError;
-        return (h(Host, { key: 'ce7c585a53dfb0dc39216bca8de421f5c6f6bb63', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '5f70368b3502a9e3f313f701e254d0efefae6fd8', required: this.required }, this.label), h("div", { key: '3bc73b137d9b53d54b8a692965b83c299a09faa1', class: {
+        return (h(Host, { key: '67df2c8968bd816fdd57b9e1c0b3dcd37f9bc401', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '32d25f1327ffab15969ca4dcb4faa953bf9923c3', required: this.required }, this.label), h("div", { key: 'b4d0182e211f6aab9c3061eeffccdd1ceddbf03a', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isOpen,
                 'b2b-multiselect-dropdown--error': hasError,
                 'b2b-multiselect-dropdown--disabled': disabled,
                 'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
-            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen && !disabled), "aria-expanded": this.isElementFocused }, h("div", { key: 'b4e95e6072ebe7a49f1ff092521758bef17c9443', 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: 'a79e61c1e78be92e394772e4fe45ccaa840bb23c', icon: "b2b_icon-arrow-down" })), h("div", { key: 'f8b8c5d70b18c1ffc175b966e1568ec719fd5aa6', class: {
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen && !disabled), "aria-expanded": this.isElementFocused }, h("div", { key: 'b6a69e9160fa5869d06cc2fc1f6f2d56c8964114', 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: '99a6b2e5baba4598a46f328e808b06e6e4b9d725', icon: "b2b_icon-arrow-down" })), h("div", { key: '0de344aa373d4ca82bf716df966448e95b5717f8', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
-            } }, h("div", { key: '94b799c83a30906027023ee78c9202afc152cb98', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'c844dc9be611cf2533549cf03bdc1fb5cf7e5755', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'ec3380739b47ae8ee490ed4bf9369a81045f2d3b', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'bf17215713121f4f359872c8c1f6ed4f1ec32e45', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: '53e6ef0829f30ab13e0441eb54118b19835ce353', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'eb30f1caec191fb6021c172fae01ccf30e7d4f68', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '7b29fd3710eb4fecc9dc8d3c29dfae60ec3ea375', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '9efd9cac0ef3c2c9d61d32292bbf5ade76991996', 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.value, label: option.label }))))), showHint && (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)), showError && (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage))));
     }
     static get is() { return "b2b-multiselect-dropdown"; }

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

@@ -15,9 +15,9 @@ export class B2bMultiSelectOption {
     }
     render() {
         var _a;
-        return (h(Host, { key: '0147313a2d52d7cdf334f118f8a5eae6fb2a73df', role: "option", class: {
+        return (h(Host, { key: 'f1a1faa0a97e00af9fbfa291aba3c53ea92ad44c', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: 'bf1504c0924dbda95990369b31c010804b2ceac7', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: (_a = this.label) !== null && _a !== void 0 ? _a : this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: '251ccb65111ecb72b57c19786df65a11a1432ab7', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: (_a = this.label) !== null && _a !== void 0 ? _a : this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get is() { return "b2b-multiselect-option"; }
     static get originalStyleUrls() {

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

@@ -91,7 +91,7 @@ export class PaginationComponent {
         };
     }
     render() {
-        return (h("nav", { key: '6f43e77c9989aafe2f5ff9d7de619853f807ceb9' }, h("ol", { key: 'ebc029acf51035b9859ed5793a29fc689c536484', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, "\u2039" /* PaginationConstants.BACK */))), this.navItems.map((navItem, index) => {
+        return (h("nav", { key: '88eb108790c1be9f974f7c88f602afa2ee35f1e9' }, h("ol", { key: '19a0fff8f2ac83913593530d921e8915e496400b', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, "\u2039" /* PaginationConstants.BACK */))), this.navItems.map((navItem, index) => {
             const isItemActive = this.activePage === navItem;
             return (h("li", { class: this.getItemClass(navItem) }, h("b2b-button", { onClick: () => this.setSelectedPage(navItem, index), active: isItemActive, disabled: isItemActive, size: "50", variant: "secondary" }, navItem)));
         }), this.activePage !== this.totalPages && (h("li", { class: "b2b-pagination--next" }, h("b2b-button", { onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, "\u203A" /* PaginationConstants.NEXT */))))));

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

@@ -17,11 +17,11 @@ export class ProgressBarComponent {
     }
     render() {
         const labelExists = this.label !== undefined && this.label !== '';
-        return (h(Host, { key: '4511acab06e497842a84eed7cfa9beb7d575dbe7' }, h("div", { key: '03b04648866fed3e0c276ca8218201639b23f6fc', class: {
+        return (h(Host, { key: 'b0060404440e78b3a2331df11a2d56d4071c7e19' }, h("div", { key: '031bd2160763920981cd6491bc1099636f3c21fd', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: '8ddd2295fd43f56b8393178e38ea414e96f332ed', class: "b2b-progress-bar__wrapper" }, h("div", { key: 'e6ea32124f8df1b937dd8f62e1e06d306229cd75', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: '945e5c7bf601cd8d34b0cd095245a8cc6b801cea', class: "b2b-progress-bar__wrapper" }, h("div", { key: '93086dd441221a8ff681d9de2da8ff2f2d4ae0b5', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '36a7f3c4c5229350ea3a37827fa0613db0ab33b7', class: {
+            } })), h("div", { key: '82ce3cabe0897878d2715ca96a07ba8347f42590', class: {
                 'b2b-progress-bar__label': labelExists,
                 'b2b-progress-bar__label-none': !labelExists,
                 [`b2b-progress-bar__label__${this.labelPosition}-${this.labelType}`]: labelExists,

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

@@ -53,11 +53,11 @@ export class B2bRadioButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-radio-button[name="${this.name}"]`)).filter((radio) => radio.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '5fbc72c2f038679ea04d1c99a6f687e4829d7d51', onClick: this.onClick }, h("div", { key: '895c751c5086b2f7d466635020a39a96d1c9f220', class: {
+        return (h(Host, { key: 'fd1084fd2df24d7de2727441f69c03f9aa497f22', onClick: this.onClick }, h("div", { key: 'a4d0e872905049f686a1d70a883aba37bc7b3823', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, h("div", { key: '0f6b79277a4ad8520b77054c79bf835e6e2a0a7c', class: "b2b-radio-items" }, h("input", { key: 'bd9d51857f574d9c37d482ae6b23bd25027369a5', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '8ab71684ff2f26fdbe119c852109ce3b44ed1c4f', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '474cc5a22301f4be53130579845152da0caa849b', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: 'e334d57a546380ae10aad7bd6c8c1688650d5107', class: "b2b-radio-items" }, h("input", { key: '20b59620275ef3c93ecec45c4c84fd8098ce47dc', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '71e1468f0d8046d9c80cb0bb159081a772e2b871', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '00b2e6022ff3cc78ef450d7a7611f08e6a5d0adb', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     static get is() { return "b2b-radio-button"; }