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

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

@@ -2,18 +2,17 @@ import { h, Host, } from "@stencil/core";
 import { parsePropToArray } from "../../utils/json-property-binding-util";
 export class B2bMultiSelectDropdown {
     constructor() {
-        this.handleInput = event => {
-            if (this.disabled) {
+        this.handleInput = (event) => {
+            if (this.disabled || this.groupDisabled)
                 return;
-            }
-            this.value = event.target.value.toLowerCase();
-            if (this.value !== '') {
-                const filteredList = this.optionsList.filter(option => option.toLowerCase().indexOf(this.value) > -1);
-                this.currentList = filteredList;
-            }
-            else if (this.value === '') {
-                this.currentList = this.optionsList;
-            }
+            const term = event.target.value.toLowerCase();
+            this.value = term;
+            const list = this.normalizedOptions;
+            this.currentList =
+                term === ''
+                    ? list
+                    : list.filter(o => o.label.toLowerCase().includes(term) ||
+                        o.value.toLowerCase().includes(term));
         };
         this.getOptions = () => {
             return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-multiselect-option')).slice(1);
@@ -21,10 +20,10 @@ export class B2bMultiSelectDropdown {
         this.renderChips = () => {
             return this.currentSelectedValues.map((option, index) => {
                 if (index < this.maxOptionsVisible) {
-                    return (h("b2b-chip-component", { label: option, value: option, "onB2b-close": this.handleChipClose }));
+                    return (h("b2b-chip-component", { label: option.label, value: option.value, disabled: this.disabled || this.groupDisabled, "onB2b-close": this.handleChipClose }));
                 }
                 else if (index === this.maxOptionsVisible) {
-                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", hasCloseButton: true, onClick: this.handleOverflowOptionsClick }));
+                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", disabled: this.disabled || this.groupDisabled, onClick: this.handleOverflowOptionsClick }));
                 }
                 else {
                     return;
@@ -36,18 +35,24 @@ export class B2bMultiSelectDropdown {
                 this.setElementOnFocus();
             }
         };
-        this.handleSelectedChange = event => {
-            const newOption = event.detail.selectedOption;
+        this.handleSelectedChange = (event) => {
+            const value = event.detail.selectedOption;
+            const opt = this.normalizedOptions.find(o => o.value === value);
+            if (opt === undefined)
+                return;
             if (event.detail.selected) {
-                this.currentSelectedValues = [...this.currentSelectedValues, newOption];
+                if (!this.currentSelectedValues.some(o => o.value === value)) {
+                    this.currentSelectedValues = [...this.currentSelectedValues, opt];
+                }
             }
             else {
-                this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== newOption);
+                this.currentSelectedValues = this.currentSelectedValues.filter(o => o.value !== value);
             }
         };
-        this.handleChipClose = event => {
-            this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== event.detail.value);
-            this.updateOption(event.detail.value);
+        this.handleChipClose = (event) => {
+            const value = event.detail.value;
+            this.currentSelectedValues = this.currentSelectedValues.filter(o => o.value !== value);
+            this.updateOption(value);
             this.isOpen = true;
             this.resetFocus();
         };
@@ -56,21 +61,22 @@ export class B2bMultiSelectDropdown {
             const optionToUpdate = options.find(el => el.option === option);
             optionToUpdate.selected = false;
         };
-        this.updateAllOptions = options => {
-            // Deselect all to avoid caching issues in Vue
+        this.updateAllOptions = (options) => {
             options.forEach(option => (option.selected = false));
+            const selectedSet = new Set(this.currentSelectedValues.map(o => o.value));
             options
-                .filter(option => this.currentSelectedValues.includes(option.option))
+                .filter(option => selectedSet.has(option.option))
                 .forEach(option => (option.selected = true));
         };
         this.setElementOnFocus = () => {
-            if (this.disabled)
+            if (this.disabled || this.groupDisabled)
                 return;
             this.isElementFocused = true;
         };
         this.setElementOnBlur = (event) => {
             const nextFocusedElement = event === null || event === void 0 ? void 0 : event.relatedTarget;
-            if (!nextFocusedElement || !this.hostElement.contains(nextFocusedElement)) {
+            if (!(nextFocusedElement instanceof Node) ||
+                !this.hostElement.contains(nextFocusedElement)) {
                 this.isOpen = false;
             }
             else {
@@ -79,14 +85,14 @@ export class B2bMultiSelectDropdown {
             this.isElementFocused = false;
         };
         this.resetFocus = () => {
-            if (this.disabled)
+            if (this.disabled || this.groupDisabled)
                 return;
             const el = this.hostElement.shadowRoot.querySelector('.b2b-multiselect-dropdown');
             el.focus();
         };
         this.handleMouseDown = (event) => {
             /** Keep dropdown open if a tag is removed */
-            if (this.disabled) {
+            if (this.disabled || this.groupDisabled) {
                 event.preventDefault();
                 return;
             }
@@ -98,7 +104,7 @@ export class B2bMultiSelectDropdown {
             }
         };
         this.handleKeyDown = (event) => {
-            if (this.disabled)
+            if (this.disabled || this.groupDisabled)
                 return;
             if (event.key === 'Enter') {
                 event.preventDefault();
@@ -109,19 +115,21 @@ export class B2bMultiSelectDropdown {
                 this.setElementOnBlur();
             }
         };
-        this.handleSelectAll = event => {
+        this.handleSelectAll = (event) => {
             const newVal = event.detail.selected;
             const options = this.getOptions();
-            const newVals = options.map(el => el.option);
-            for (let i = 0, n = options.length; i < n; i++) {
-                options[i].selected = newVal;
-            }
+            const values = options.map(el => el.option);
+            options.forEach(el => (el.selected = newVal));
             if (newVal) {
-                // filter out duplicates
-                this.currentSelectedValues = Array.from(new Set([...this.currentSelectedValues, ...newVals]));
+                const toAdd = this.normalizedOptions.filter(o => values.includes(o.value));
+                const set = new Set(this.currentSelectedValues.map(o => o.value));
+                this.currentSelectedValues = [
+                    ...this.currentSelectedValues,
+                    ...toAdd.filter(o => !set.has(o.value)),
+                ];
             }
             else {
-                this.currentSelectedValues = this.currentSelectedValues.filter(option => !newVals.includes(option));
+                this.currentSelectedValues = this.currentSelectedValues.filter(o => !values.includes(o.value));
             }
         };
         this.updateSelectAll = (options) => {
@@ -143,35 +151,51 @@ export class B2bMultiSelectDropdown {
         this.errorMessage = undefined;
         this.hint = undefined;
         this.disabled = false;
+        this.groupDisabled = false;
         this.currentSelectedValues = [];
-        this.currentList = this.optionsList;
+        this.currentList = [];
         this.value = '';
         this.isElementFocused = false;
         this.isOpen = false;
+        this.normalizedOptions = [];
+        this.normalizedSelected = [];
         this.hasOptionList = this.optionsList.length > 0;
     }
+    parsePropToOptArray(value) {
+        if (Array.isArray(value) && typeof value[0] === 'object') {
+            return value;
+        }
+        return parsePropToArray(value).map(v => ({
+            label: v,
+            value: v,
+        }));
+    }
     componentWillLoad() {
-        this.selectedValues = parsePropToArray(this.selectedValues);
-        this.optionsList = parsePropToArray(this.optionsList);
-        this.currentList = this.optionsList;
-        this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
+        this.normalizedSelected = this.parsePropToOptArray(this.selectedValues);
+        this.normalizedOptions = this.parsePropToOptArray(this.optionsList);
+        this.currentList = this.normalizedOptions;
+        this.hasOptionList = this.normalizedOptions.length > 0;
+        const selectedSet = new Set(this.normalizedSelected.map(o => o.value));
+        this.currentSelectedValues = this.normalizedOptions.filter(opt => selectedSet.has(opt.value));
     }
     /** Needed to trigger a re-render for async data */
     watchPropHandler(newList) {
-        this.optionsList = parsePropToArray(newList);
-        this.hasOptionList = this.optionsList.length > 0;
+        this.normalizedOptions = this.parsePropToOptArray(newList);
+        this.hasOptionList = this.normalizedOptions.length > 0;
         if (this.hasOptionList) {
-            this.currentList = this.optionsList;
-            this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
+            this.currentList = this.normalizedOptions;
+            const selectedSet = new Set(this.normalizedSelected.map(o => o.value));
+            this.currentSelectedValues = this.normalizedOptions.filter(opt => selectedSet.has(opt.value));
         }
     }
     /** Needed to trigger a re-render for async data */
     handleSelectedValuesChangeFromOutside(newVal) {
-        this.selectedValues = parsePropToArray(newVal);
-        this.currentSelectedValues = this.selectedValues.filter(val => this.optionsList.includes(val));
+        this.normalizedSelected = this.parsePropToOptArray(newVal);
+        const selectedSet = new Set(this.normalizedSelected.map(o => o.value));
+        this.currentSelectedValues = this.normalizedOptions.filter(o => selectedSet.has(o.value));
     }
     handleSelectedValuesChange(newValues) {
-        this.b2bChange.emit(newValues);
+        this.b2bChange.emit(newValues.map(o => o.value));
     }
     componentDidUpdate() {
         const options = this.getOptions();
@@ -179,18 +203,21 @@ export class B2bMultiSelectDropdown {
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: '964bdaefbeef0b8f9f29be1f2e76b795b95ba17e', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '88ab1efa48ac4ecb42c88ac35e6edbb2ad08ece2', required: this.required }, this.label), h("div", { key: '5befcc8a885278bac7f00a7407d25ff738b52366', class: {
+        const disabled = this.disabled || this.groupDisabled;
+        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: {
                 '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--error': hasError,
+                'b2b-multiselect-dropdown--disabled': 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: 'a0e37fe748d07f62fe0e2c1976369eb7ddcecbe9', 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: 'c6ffcd302b797626eca29c0ae2876d5bedc1b41f', icon: "b2b_icon-arrow-down" })), h("div", { key: '7ceeb281cf01a1bc526c9d0b6d6c1c0d3c1bca9a', class: {
+            }, 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: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
-            } }, h("div", { key: '6c44f49ba781b31ed5bdcfad9e4c571e5bbdc871', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '07c1bc3b8acb485632e76ae2f688ea9b6647d94b', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '9264228fda064567ee88f3b26e953ef4bc4071b8', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '461fc919fecefa0bcbf7ef3adc54ed78e827f8fb', 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)) : ('')));
+            } }, 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 &&
+            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"; }
     static get encapsulation() { return "shadow"; }
@@ -244,9 +271,14 @@ export class B2bMultiSelectDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | string[]",
-                    "resolved": "string | string[]",
-                    "references": {}
+                    "original": "string | string[] | Option[]",
+                    "resolved": "Option[] | string | string[]",
+                    "references": {
+                        "Option": {
+                            "location": "global",
+                            "id": "global::Option"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -262,9 +294,14 @@ export class B2bMultiSelectDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | string[]",
-                    "resolved": "string | string[]",
-                    "references": {}
+                    "original": "string | string[] | Option[]",
+                    "resolved": "Option[] | string | string[]",
+                    "references": {
+                        "Option": {
+                            "location": "global",
+                            "id": "global::Option"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -415,6 +452,27 @@ export class B2bMultiSelectDropdown {
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "groupDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Whether the parent input group is disabled. Per default, it is false."
+                        }],
+                    "text": ""
+                },
+                "attribute": "group-disabled",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -425,6 +483,8 @@ export class B2bMultiSelectDropdown {
             "value": {},
             "isElementFocused": {},
             "isOpen": {},
+            "normalizedOptions": {},
+            "normalizedSelected": {},
             "hasOptionList": {}
         };
     }

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

@@ -13,8 +13,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 import fruits from "./stories.data.json";
+import fruitOptions from "./stories.data2.json";
 const multiselectArgs = getArgTypes('b2b-multiselect-dropdown');
-const meta = {
+export default {
     title: 'Components/Form/Multiselect Dropdown',
     component: 'b2b-multiselect-dropdown',
     args: {
@@ -51,12 +52,8 @@ const meta = {
     </div>`;
     },
 };
-export default meta;
-export const Default = {
-    args: Object.assign({}, meta.args),
-};
+export const Default = {};
 export const InitialSelectedValues = {
-    args: Object.assign({}, meta.args),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px">
@@ -78,17 +75,53 @@ export const InitialSelectedValues = {
     },
 };
 export const Required = {
-    args: Object.assign(Object.assign({}, meta.args), { required: true }),
+    args: {
+        required: true,
+    },
 };
 export const Hint = {
-    args: Object.assign(Object.assign({}, meta.args), { hint: 'please select a value' }),
+    args: {
+        hint: 'please select a value',
+    },
 };
 export const Disabled = {
-    args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+    args: {
+        disabled: true,
+    },
 };
 export const Invalid = {
-    args: Object.assign(Object.assign({}, meta.args), { invalid: true }),
+    args: {
+        invalid: true,
+    },
 };
 export const InvalidWithErrorMessage = {
-    args: Object.assign(Object.assign({}, meta.args), { invalid: true, errorMessage: 'error has occurred' }),
+    args: {
+        invalid: true,
+        errorMessage: 'error has occurred',
+    },
+};
+export const WithOptionsArray = {
+    args: {
+        optionsList: [...fruitOptions],
+        selectedValues: ['1', '5'],
+    },
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div style="width: 400px">
+      <b2b-multiselect-dropdown
+        label=${args.label}
+        max-options-visible=${args.maxOptionsVisible}
+        select-all-label=${args.selectAllLabel}
+        placeholder=${args.placeholder}
+        search-placeholder=${args.searchPlaceholder}
+        .optionsList=${args.optionsList}
+        .selectedValues=${args.selectedValues}
+        required=${args.required}
+        hint=${args.hint}
+        disabled=${args.disabled}
+        invalid=${args.invalid}
+        error-message=${args.errorMessage}>
+      </b2b-multiselect-dropdown>
+    </div>`;
+    },
 };

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

@@ -9,13 +9,15 @@ export class B2bMultiSelectOption {
             });
         };
         this.option = undefined;
+        this.label = undefined;
         this.selected = false;
         this.indeterminate = false;
     }
     render() {
-        return (h(Host, { key: 'b1e6b024ef3d453040eb0995cab48eeb25586189', role: "option", class: {
+        var _a;
+        return (h(Host, { key: '0147313a2d52d7cdf334f118f8a5eae6fb2a73df', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: '9c4e912adeefec9787822529ba791d2a44aee03d', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, 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 })));
     }
     static get is() { return "b2b-multiselect-option"; }
     static get originalStyleUrls() {
@@ -42,11 +44,28 @@ export class B2bMultiSelectOption {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The label of the option."
+                    "text": "The label and value of the option."
                 },
                 "attribute": "option",
                 "reflect": false
             },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Will provide the label instead of option if set"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
             "selected": {
                 "type": "boolean",
                 "mutable": true,

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

@@ -91,7 +91,7 @@ export class PaginationComponent {
         };
     }
     render() {
-        return (h("nav", { key: '85ed17dc25a803e800888a084e3b99a663bb3e0a' }, h("ol", { key: '544841f818e07f5091abb05dbb98e46b8b26fa07', 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: '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) => {
             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/paragraph/paragraph.js

@@ -13,7 +13,7 @@ export class ParagraphComponent {
         this.display = 'block';
     }
     render() {
-        return (h("p", { key: 'e34be906b02a82e422ecd49ccd6adf15d1744897', style: {
+        return (h("p", { key: '9372543c8a22d33c6ed0c53e3e8b277e0ce78883', style: {
                 display: this.display,
             }, class: {
                 'b2b-paragraph': true,
@@ -22,7 +22,7 @@ export class ParagraphComponent {
                 ['b2b-paragraph--align-' + this.align]: true,
                 ['b2b-paragraph--no-margin']: !this.margin,
                 ['b2b-paragraph--variant-' + this.variant]: true,
-            } }, h("slot", { key: '3af5b741adf391a40b7a5e08d33cb04c5ab30ad7' })));
+            } }, h("slot", { key: 'ca3169be5b0239e40911fa2071c744404a6bbbae' })));
     }
     static get is() { return "b2b-paragraph"; }
     static get encapsulation() { return "shadow"; }

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: '26303d337146025b9a77d20c030065275f47b31d' }, h("div", { key: 'a005917216bb9d16cf8c33c40c8eb86c35bbf2f6', class: {
+        return (h(Host, { key: '4511acab06e497842a84eed7cfa9beb7d575dbe7' }, h("div", { key: '03b04648866fed3e0c276ca8218201639b23f6fc', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: 'afbd557e3f2650016ad6c185c0192d34e5b5741a', class: "b2b-progress-bar__wrapper" }, h("div", { key: '94c2a19e96ed5b4060946893e6f42c74b488aaea', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: '8ddd2295fd43f56b8393178e38ea414e96f332ed', class: "b2b-progress-bar__wrapper" }, h("div", { key: 'e6ea32124f8df1b937dd8f62e1e06d306229cd75', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '859d78ef40b96e6fe170ffb0c7dc790f7811d002', class: {
+            } })), h("div", { key: '36a7f3c4c5229350ea3a37827fa0613db0ab33b7', 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: 'a95ee91fc3410f85abc9898a2488b6999bff6ef7', onClick: this.onClick }, h("div", { key: 'e458b345dd6f1a3759e82d1e2bcc08ffd6486848', class: {
+        return (h(Host, { key: '5fbc72c2f038679ea04d1c99a6f687e4829d7d51', onClick: this.onClick }, h("div", { key: '895c751c5086b2f7d466635020a39a96d1c9f220', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, h("div", { key: 'fee31d517e56f603b49a668705b18825518b5acd', class: "b2b-radio-items" }, h("input", { key: 'ac5279b2ce604c520345896076900f63500beb20', 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: '222d5dd63cb02426b6b4a2e2d072fbb49dfe46d4', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '047ac0baf8984ea6ff0d098ea5874ab0bf03c6fa', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
+            } }, 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) ||
             (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"; }

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

@@ -67,11 +67,11 @@ export class RadioButtonGroupComponent {
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '2f7d02a11bd8ef158aa3a50483b530dc75f55cdc' }, h("div", { key: '15be31753d13efc5677a1f5e75d5cb66643222b6', class: {
+        return (h(Host, { key: 'c47db22cd7ab5484813e052db015d2b8d1405bb9' }, h("div", { key: '1e7fc6246f83ea53debd5ef7fc42772e3c41a936', class: {
                 'b2b-radio-group': true,
                 'b2b-radio-group--error': this.invalid && !this.disabled,
                 [`b2b-radio-group--${this.alignment}`]: true,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: 'ba13a4ee078874c74d24d3ef46f1b6c6b4aa0ff0' }, h("div", { key: '412c32c37064d4418a5149f6190f830902ba8310', class: "b2b-radio-group-options" }, h("slot", { key: '8a54755d559c188d07eb32cbe9839a5c3c2a974f' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: 'a406988d11f921c8eb16296820212da84d014e8c' }, h("div", { key: '2b6fb5ac504cdc65b354d8d30727b0fb6e725376', class: "b2b-radio-group-options" }, h("slot", { key: 'd7161d2da1c4241830815da13fe87067ecb55931' }))), (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-group"; }

package/dist/collection/components/required-separator/required-separator.js

@@ -4,7 +4,7 @@ export class B2BRequiredSeparator {
         this.label = 'Pflichtfeld';
     }
     render() {
-        return (h(Host, { key: '1288dd4226f5d951717a306db2557f7dd4dbb4fd' }, h("div", { key: '34cc56445d5bf7c93ba9e522d269cb6d5b337792', class: "b2b-required-separator__label" }, h("span", { key: '8ecc6fb192884982dcc7f16c8db1302bc2ceddcb', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '5e40bc2d53b13708ca546e4fb5a7e4816601c3d1' }, this.label)), h("b2b-separator", { key: '3494da2d3740ff18a322d28ca112fe4339862605' })));
+        return (h(Host, { key: 'dbb1404fe0a21058185803fc23cbe4a53378d25f' }, h("div", { key: 'fa4568e39ddc882fde2a8ae6c667145e6b0ff71f', class: "b2b-required-separator__label" }, h("span", { key: 'cff2204e59e777da55f39e4fa4be2a376fd7645b', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '8d57dbea0fe1841c2fd52e65e2268c60eea7ea60' }, this.label)), h("b2b-separator", { key: '653ca12e5bed8038775144314e7a0c424437c33f' })));
     }
     static get is() { return "b2b-required-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rounded-icon/rounded-icon.js

@@ -6,16 +6,16 @@ export class RoundedIconComponent {
         this.contentColor = 'var(--b2b-color-copy-default)';
     }
     render() {
-        return (h(Host, { key: '366b1c49bb56404825f131381b56a15daa457bfe' }, h("div", { key: 'f7a087f49858502bb7d74276d601c8a42e2215c0', style: {
+        return (h(Host, { key: '1d7eea4ad65056f16127e2029811239e0540560b' }, h("div", { key: '153f0ace757daff8776fac4fbe1cc9a05e9c0dfa', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: '050e8a6d21b27c8fdccfffc021c45080ebdbde7d', style: {
+            } }, h("div", { key: '7b28d41d6d5cb38c21aa4487cca0ce070663909a', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'ecd49a7ffdf65913edbba010734f522a45ac4096', name: "icon" })), h("div", { key: 'f7e1f7507674a38e7eeebc92f08ea5805400c92f', style: {
+            } }, h("slot", { key: '32e90de259f352aff82118dd1f9904475fc875e2', name: "icon" })), h("div", { key: '38f7a97f95191cd039a4bbbcf20a9b5ce1826a8e', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '116d9796a00791165984fc71e29aa79d4a9040c1', name: "text" })))));
+            } }, h("slot", { key: 'e994e7fbd49f656c865ce8517833be0d6bbb852e', name: "text" })))));
     }
     static get is() { return "b2b-rounded-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable-container/scrollable-container.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ScrollableContainerComponent {
     render() {
-        return (h(Host, { key: 'b455812c0f370a849758c9ca169a63b7ecde9bad' }, h("slot", { key: 'cd2c7bf54cedfac2de42f5b248e3279f288e6a3d' })));
+        return (h(Host, { key: 'c5c71924d38f1788a60b19e49ad09a3aa5d637f6' }, h("slot", { key: '4fa412e60d51aa58e9e6d40936bb4f4a4725dab5' })));
     }
     static get is() { return "b2b-scrollable-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/search/search.js

@@ -22,7 +22,7 @@ export class SearchComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'a3f42d5d53ac7beeb4c0e241d81271ac2a116fe3' }, h("b2b-input-group", { key: '490be3e7bc4d60b5eba239f754453b2cbe0a6df7', disabled: this.disabled }, h("b2b-input-list", { key: '15a4d81a9bffaa8cd14ffaebe021da90493feb4e', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '06ce3d043b96b282ad3076c9a65fd5e2b4b48b67' })), h("b2b-button", { key: '1a45269314806d9d9cf476db6a08b8d7c14933c8', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '797b412d6bab0104497465a80b1a344dbfa97e75', icon: "b2b_icon-search", clickable: true })))));
+        return (h(Host, { key: '65315a3718f55f1d9b63c2b3a437bd292a512eb3' }, h("b2b-input-group", { key: '7f1e64e2fe99e4b8ecca7f90547c7e08b0c2a8f3', disabled: this.disabled }, h("b2b-input-list", { key: '7a140c8635b7f193125597a4b6a1df62c81796f3', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '2674546c9fc2e6347c42350f94dc91876357e336' })), h("b2b-button", { key: '75cdcd94bb0f25af3448bb76ed6f5103ceb6711c', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '0d846a636b31a4e8b67933611b2da76442ad7795', icon: "b2b_icon-search", clickable: true })))));
     }
     static get is() { return "b2b-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/separator/separator.js

@@ -4,7 +4,7 @@ export class B2bSeparatorComponent {
         this.alignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '00b1ecb31c7ca143b3d6c3c1d5bddcc369bde312' }, h("div", { key: 'e29629b7554c21b12af943ae0aaafb936fa36ea6', class: {
+        return (h(Host, { key: 'f1ab4806be7ac4128d95a047421be58502b0cadf' }, h("div", { key: 'c478fc67a79c15a6d74af39eb6747d25d3d58922', class: {
                 [`b2b-separator--${this.alignment}`]: true,
             } })));
     }

package/dist/collection/components/shimmer/shimmer.js

@@ -10,7 +10,7 @@ export class ShimmerComponent {
             width: `${this.width}px`,
             height: `${this.height}px`,
         };
-        return (h(Host, { key: '10ef516c64332313b8915a4bdb43d527eb92c43c' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
+        return (h(Host, { key: '82fc3e95ff0f946ae6cfd5c59ab1a0e04df62ca5' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
     }
     static get is() { return "b2b-shimmer"; }
     static get encapsulation() { return "shadow"; }