@otto-de/b2b-core-components 1.33.0 → 1.35.0

package/dist/collection/components/time-picker/time-picker.js

@@ -0,0 +1,411 @@
+import { h, Host, } from "@stencil/core";
+export class TimePickerComponent {
+    constructor() {
+        this.onFocus = (ev) => {
+            this.hasFocus = true;
+            this.isOpen = true;
+            this.b2bFocus.emit(ev);
+        };
+        this.onBlur = (ev) => {
+            this.hasFocus = false;
+            this.isOpen = false;
+            this.b2bBlur.emit(ev);
+        };
+        this.onInput = (ev) => {
+            this.isOpen = false;
+            const input = ev.target;
+            this.value = input.value;
+            this.b2bInput.emit({ value: this.value });
+        };
+        this.validateInput = (value) => {
+            const match = value.match(/^(\d{2}):(\d{2})$/);
+            let isValid = false;
+            if (match) {
+                const hour = parseInt(match[1], 10);
+                const minute = parseInt(match[2], 10);
+                isValid = hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59;
+            }
+            if (!isValid && value.length > 0) {
+                this.internalErrorMessage = 'Invalid format';
+                this.internalInvalid = true;
+            }
+            else {
+                this.internalErrorMessage = '';
+                this.internalInvalid = false;
+            }
+        };
+        this.onSelect = (event) => {
+            var _a;
+            const target = event.target;
+            const selectedValue = target.getAttribute('data-value');
+            if (selectedValue !== null) {
+                this.value = selectedValue;
+                this.b2bChange.emit(selectedValue);
+                this.internalInvalid = false;
+                this.internalErrorMessage = '';
+                this.hasFocus = false;
+                this.isOpen = false;
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        };
+        this.onClear = () => {
+            this.value = '';
+            this.internalInvalid = false;
+            this.internalErrorMessage = '';
+            this.hasFocus = false;
+            this.b2bClear.emit();
+        };
+        this.toggleDropdown = () => {
+            var _a;
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.label = undefined;
+        this.required = false;
+        this.placeholder = 'hh:mm';
+        this.invalid = false;
+        this.hint = undefined;
+        this.interval = 15;
+        this.error = undefined;
+        this.value = null;
+        this.hasFocus = false;
+        this.isOpen = false;
+        this.availableTimes = [];
+        this.internalErrorMessage = '';
+        this.internalInvalid = false;
+    }
+    componentWillLoad() {
+        this.availableTimes = this.getAvailableTimes();
+        if (this.value) {
+            this.validateInput(this.value);
+        }
+    }
+    handleIntervalChange() {
+        this.availableTimes = this.getAvailableTimes();
+    }
+    validateValue(newValue) {
+        this.value = newValue;
+        this.validateInput(newValue);
+    }
+    get isInvalid() {
+        return this.invalid || this.internalInvalid;
+    }
+    get currentErrorMessage() {
+        return this.error || this.internalErrorMessage;
+    }
+    getAvailableTimes() {
+        const times = [];
+        const step = this.interval || 15;
+        for (let hour = 0; hour < 24; hour++) {
+            for (let minute = 0; minute < 60; minute += step) {
+                const time = `${hour.toString().padStart(2, '0')}:${minute
+                    .toString()
+                    .padStart(2, '0')}`;
+                times.push(time);
+            }
+        }
+        return times;
+    }
+    render() {
+        return (h(Host, { key: '82d85e61e12453aa332eb1771c2ecacf84a93bce', class: {
+                'b2b-time-picker': true,
+                'b2b-time-picker--error': this.isInvalid,
+            } }, this.label && (h("b2b-input-label", { id: this.label, required: this.required }, this.label)), h("div", { key: 'e6e70210043bd5c220c03610ab4681378889b075', class: {
+                'b2b-time-picker__wrapper': true,
+                'b2b-time-picker__wrapper--focused': this.hasFocus,
+                'b2b-time-picker__wrapper--filled': !this.hasFocus && !this.invalid && this.value !== '',
+                'b2b-time-picker__wrapper--error': this.isInvalid,
+            } }, h("input", { key: '91994a1908b2c5dd5886c442fd5a3ca6415f3619', ref: el => (this.inputRef = el), class: {
+                'b2b-time-picker__native-input': true,
+            }, type: "text", placeholder: this.placeholder, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput }), h("div", { key: '4052c5c017944c767ccbf286dd4de11e74509848', class: "b2b-icons" }, this.value && (h("div", { class: "b2b-close-icon", onClick: this.onClear }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '92996f5e06fc7e325088d09185b4496a00df68f5', class: "b2b-duration-icon", onMouseDown: e => {
+                e.preventDefault();
+                this.toggleDropdown();
+            } }, h("b2b-icon-100", { key: 'e24b25b79ef06002af8ce83ecf41e88b967ca4ed', icon: "b2b_icon-duration", clickable: true })))), h("div", { key: 'e3154f9b414215660041e6779668c0bb50f06284', class: {
+                'b2b-time-picker__options-container': true,
+                'b2b-time-picker__options-container--visible': this.isOpen && this.hasFocus,
+            }, onMouseDown: e => e.preventDefault() }, h("div", { key: '92e172240eaae8ddb7cef7dab5aaf02b55df44ea', class: "b2b-time-picker__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, this.availableTimes.map(time => (h("div", { key: time, class: {
+                'b2b-time-picker__option': true,
+                'b2b-time-picker__option--selected': time === this.value,
+            }, "data-value": time, onClick: this.onSelect, role: "option", "aria-selected": time === this.value ? 'true' : 'false' }, time))))), h("span", { class: {
+                'b2b-time-picker__hint': true,
+                'b2b-time-picker__hint--error': this.isInvalid,
+            } }, this.isInvalid ? this.currentErrorMessage : this.hint)));
+    }
+    static get is() { return "b2b-time-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["time-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["time-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The time picker label."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an asterisk at the end of the label to signify that the field is required."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder for the time picker input field."
+                },
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "'hh:mm'"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the time picker is currently invalid. If true, the time picker is rendered with error styles. Per default, it is false."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The hint text that appears underneath the time picker field."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "interval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The interval in minutes for the time options. Default is 15 minutes."
+                },
+                "attribute": "interval",
+                "reflect": false,
+                "defaultValue": "15"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message that is shown if the input is invalid."
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the time picker. It has to be in the format \"hh:mm\"."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "isOpen": {},
+            "availableTimes": {},
+            "internalErrorMessage": {},
+            "internalInvalid": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bFocus",
+                "name": "b2b-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the time picker receives focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bBlur",
+                "name": "b2b-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the time picker loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bInput",
+                "name": "b2b-input",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever the input value changes."
+                },
+                "complexType": {
+                    "original": "InputChangeEvent",
+                    "resolved": "InputChangeEvent",
+                    "references": {
+                        "InputChangeEvent": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::InputChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bChange",
+                "name": "b2b-selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever a time is selected from the dropdown."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "b2bClear",
+                "name": "b2b-clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the user clicks the clear button."
+                },
+                "complexType": {
+                    "original": "DateClear",
+                    "resolved": "DateClear",
+                    "references": {
+                        "DateClear": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::DateClear"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "interval",
+                "methodName": "handleIntervalChange"
+            }, {
+                "propName": "value",
+                "methodName": "validateValue"
+            }];
+    }
+}

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

@@ -0,0 +1,80 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
+import { userEvent } from "@storybook/test";
+getArgTypes('b2b-time-picker');
+const meta = {
+    title: 'Components/Form/Time Picker',
+    component: 'b2b-time-picker',
+    args: {
+        required: false,
+        invalid: false,
+        error: '',
+        label: 'Uhrzeit auswählen',
+        placeholder: 'hh:mm',
+        value: '',
+        interval: 15,
+        hint: 'A hint',
+    },
+    argTypes: Object.assign(Object.assign({}, getArgTypes('b2b-time-picker')), { value: Object.assign(Object.assign({}, getArgTypes('b2b-time-picker').value), { control: false }), interval: Object.assign(Object.assign({}, getArgTypes('b2b-time-picker').interval), { control: { type: 'range', min: 15, max: 60, step: 5 } }) }),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html ` <div style="margin-left: 2px">
+      <b2b-time-picker
+        label=${args.label}
+        required=${args.required}
+        hint=${args.hint}
+        placeholder=${args.placeholder}
+        error=${args.error}
+        interval=${args.interval}
+        value=${args.value}
+        invalid=${args.invalid}></b2b-time-picker>
+    </div>`;
+    },
+};
+export default meta;
+export const Default = {
+    args: Object.assign(Object.assign({}, meta.args), { required: true }),
+};
+export const Focused = {
+    args: Object.assign({}, meta.args),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            const timePicker = canvasElement.querySelector('b2b-time-picker');
+            const b2bTimePickerWrapper = (_a = timePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            await userEvent.click(b2bTimePickerWrapper);
+        }, 500);
+    },
+};
+export const Filled = {
+    args: Object.assign(Object.assign({}, meta.args), { value: '10:30' }),
+};
+export const Error = {
+    args: Object.assign(Object.assign({}, meta.args), { invalid: true, error: 'This is an error message' }),
+};
+export const FilledWithIncorrectTime = {
+    args: Object.assign(Object.assign({}, meta.args), { invalid: true, error: 'This is an error message', value: '25:61' }),
+};
+export const CustomIntervalSet = {
+    args: Object.assign(Object.assign({}, meta.args), { interval: 60 }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            const timePicker = canvasElement.querySelector('b2b-time-picker');
+            const b2bTimePickerWrapper = (_a = timePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            await userEvent.click(b2bTimePickerWrapper);
+        }, 500);
+    },
+};

package/dist/collection/components/toggle-button/toggle-button.js

@@ -31,13 +31,13 @@ export class B2bToggleButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '08205f0ff5e41a66ca594a5f2cf19232c9c82bc2', onClick: this.onClick }, h("span", { key: 'aaeb4aeab543570d25babbbc4df67feaf2c5c34d', class: {
+        return (h(Host, { key: '087925aae07f41b1fe50efb4dceda7e3e48849bc', onClick: this.onClick }, h("span", { key: 'e85fea0b039ff481a18a8e194480e5432fcc6b80', class: {
                 'b2b-toggle-button': true,
                 'b2b-toggle-button--disabled': this.disabled,
-            } }, h("input", { key: '077163eb91465cfd51b7b3a01790ff4e4980d151', tabindex: 0, class: {
+            } }, h("input", { key: 'd50119c68578e8db12e49a8a408c8b7b2611ea29', tabindex: 0, class: {
                 'b2b-toggle-button__input': true,
                 'b2b-toggle-button__input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '6de6d24c151b2376b881de22f769db855b02df52', id: this.name, tabindex: -1, class: {
+            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'bc66888b0740d13031c0467717af4e76c4d19a67', id: this.name, tabindex: -1, class: {
                 'b2b-toggle-button__label': true,
                 'b2b-toggle-button__label--disabled': this.disabled,
                 'b2b-toggle-button__label--checked': this.checked && !this.disabled,

package/dist/collection/components/toggle-chip/toggle-chip.js

@@ -32,11 +32,11 @@ export class B2BToggleChipComponent {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '4249e2b8324bf5a0d0044c0dfe27a7711877debf' }, h("span", { key: '87d524d982e89489d0eb533e328b4aab64735fe0', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: '9b02a8f340b5531879187d4ac97fccb6ae619a69' }, h("span", { key: '59994cb3e4c28bdf673d329d12d0e56e628c140b', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: '31ec59f2207e0d18ae8aeee6f2b8b36b407b2316', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: '7492ffd930e3ebb62f3df0cece70b2cc232444df', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
                 'b2b-toggle-chip__input': true,
-            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'a86f79e017825f424e1558cc3c10bc60b79b1a9f', id: this.name, tabIndex: -1, class: {
+            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'c47d4a9483d9bccdd16722af2fd74e50f8a10257', id: this.name, tabIndex: -1, class: {
                 'b2b-toggle-chip__label': true,
                 'b2b-toggle-chip__label--active': this.active && !this.disabled,
                 'b2b-toggle-chip__label--disabled': this.disabled,

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

@@ -45,10 +45,10 @@ export class B2BToggleGroup {
         }
     }
     render() {
-        return (h(Host, { key: '6ff23eb9f72b78843113d71b0b0fcff8c9ff095c' }, h("div", { key: 'a727833a576ba2e0b09a4657e7c7f4d410d59f09', class: {
+        return (h(Host, { key: '99ff703edae5a8759af9e4b9093c2db32108d2cd' }, h("div", { key: 'f4b20d4fcf809ec622688866ae736233d16d90ee', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: '5c7c4238d1d083c4aa94ce56b510620cd14f477d' }, h("slot", { key: '064ebb2b81fb9f9431de7e46f847948b9ce6adac' })))));
+            } }, h("fieldset", { key: '97ec3070e1935d8803c8e3b7bac17f3eb92864f1' }, h("slot", { key: '787e72239b2f2300a1150787044ad5fe38c6588e' })))));
     }
     static get is() { return "b2b-toggle-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle-switch/toggle-switch.css

@@ -241,7 +241,7 @@
   top: var(--b2b-size-10);
   width: var(--b2b-size-30);
   height: var(--b2b-size-30);
-  z-index: 1000;
+  z-index: 1;
   opacity: 0;
 }
 :host .b2b-toggle__icon--show {

package/dist/collection/components/toggle-switch/toggle-switch.js

@@ -38,17 +38,17 @@ export class B2bToggleSwitchComponent {
     render() {
         // workaround for purgecss as safelist doesn't work
         const isLeft = this.labelPosition === 'left';
-        return (h(Host, { key: 'e846b3ea20f9eaf056026f8e45f9b0c32d710ac4' }, h("div", { key: '2e952a4fb7b5afd951ca86028c611ac8fe75f479', class: {
+        return (h(Host, { key: '5a9a846632b7b3cca02a79a9ed043f5ab9d1c6fa' }, h("div", { key: '115479ac6e5df73f04d6f73e01a541c805a31a63', class: {
                 'b2b-toggle': true,
                 'b2b-toggle--disabled': this.disabled,
                 'b2b-toggle--checked': this.state,
-            } }, h("div", { key: '1948cbf18a97af496a2422dcf863cc2da4d00658', class: {
+            } }, h("div", { key: 'cf530d51f4fd327135935ea500193031dedefe4e', class: {
                 'b2b-toggle__label': true,
                 'b2b-toggle__label--left': isLeft,
-            } }, h("span", { key: '565e67692f1851168101a673caacd1a292542a4f', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '6ca55c2cdcab89280fc5cf2928dd67bd5e529a93', class: {
+            } }, h("span", { key: 'f758117b3dbf6256bfc810dc818c63e7aa5f5597', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '08626107d93016092543c78e25c82abd0fea42f3', class: {
                 'b2b-toggle__icon': true,
                 'b2b-toggle__icon--show': this.state,
-            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '20b2a6b70688866a58efbdc82e3eb712a3dfba64', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: 'a57ece77901fca3e09462f88cedd7d9407d7a91c', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
                 'b2b-toggle__text': true,
                 'b2b-toggle__text--left': isLeft,
             } }, this.label))))));

package/dist/collection/components/toggle-switch/toggle-switch.stories.js

@@ -12,12 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
-const meta = {
+export default {
     title: 'Components/Interaction/Toggle Switch',
     component: 'b2b-toggle-switch',
     args: {
         label: 'Label',
-        disabled: 'false',
+        disabled: false,
         labelPosition: 'left',
         state: true,
     },
@@ -31,16 +31,22 @@ const meta = {
       state="${args.state}" />`;
     },
 };
-export default meta;
-export const SwitchOn = {
-    args: Object.assign({}, meta.args),
-};
+export const SwitchOn = {};
 export const SwitchOff = {
-    args: Object.assign(Object.assign({}, meta.args), { disabled: false, state: false }),
+    args: {
+        disabled: false,
+        state: false,
+    },
 };
 export const SwitchOnDisabled = {
-    args: Object.assign(Object.assign({}, meta.args), { state: true, disabled: true }),
+    args: {
+        state: true,
+        disabled: true,
+    },
 };
 export const SwitchOffDisabled = {
-    args: Object.assign(Object.assign({}, meta.args), { state: false, disabled: true }),
+    args: {
+        state: false,
+        disabled: true,
+    },
 };

package/dist/collection/components/tooltip/tooltip.js

@@ -59,13 +59,13 @@ export class B2BTooltipComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'feecfb0370d2f9fc3214ed98fbc3eba0dc4f8604', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '5e0960bc94fae8502ee1b037d86f2c4880dd278d', class: {
+        return (h(Host, { key: 'd433aa3cbd4216722933e50fd2613afb8be0a32a', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '31a5bc21f1adc031dc0d92732659138bf4e27681', class: {
                 [`b2b-tooltip--${this.position}`]: true,
                 'b2b-tooltip__trigger': true,
-            } }, h("slot", { key: 'c8dafd372f8ddd820bac5ae3185ed34eb4e1d1ce' }), h("div", { key: '3936218fc35b9d3c50bce063ab7b2fe4b7cab44f', class: {
+            } }, h("slot", { key: 'bbec9da1933c391822594f5d555bcefe316c02f3' }), h("div", { key: '4697390b2e16363008a437b9b1af37ea82ee2660', class: {
                 'b2b-tooltip__content': true,
                 'b2b-tooltip--visible': this.opened,
-            } }, h("slot", { key: '3074bd86a7388667ba2c807680955e73c978fd24', name: "content" }, this.content)))));
+            } }, h("slot", { key: '2e78f5e154563a7c0e9d2e1067e00aa56991ae0c', name: "content" }, this.content)))));
     }
     static get is() { return "b2b-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wizard/wizard-step.js

@@ -7,10 +7,10 @@ export class WizardStepComponent {
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '2e748daaf9cfbee380eb437d69a5bf07d41ca0b4' }, h("div", { key: 'bc0bbc16e05627423f5b5f0656f2368a2779ac7b', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '24baa2045a987f178e8262f10a813f7539ac10b9', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: 'f97906eff6140f9234b749c1ce3bbed074c82186', class: {
+        return (h(Host, { key: '6748e7f67b3cec569003e9b99c413dbdfb99f402' }, h("div", { key: '2ab2e6f5f76238bbe5e943551c7b0fb36df9d121', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '13b0071f3d02918551d65e22fb1511f3ca666926', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '416cef0fe8bee41e1ee1b566ed5b9b7bc6469fb4', class: {
                 'b2b_wizard__step__label': true,
                 'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
-            } }, h("slot", { key: '417f43ae1bdee177efdbcc100f15d986a2d69998' })))));
+            } }, h("slot", { key: 'f06b1de799fc54b8ece414795b7ab0750a382108' })))));
     }
     static get is() { return "b2b-wizard-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wizard/wizard.js

@@ -44,7 +44,7 @@ export class WizardComponent {
             this.setStepsState();
     }
     render() {
-        return (h(Host, { key: 'f99bb57277db92b8fc31d446f0270044438422bd' }, h("div", { key: 'f810c56c2df73dd750623be7420638ceb54af58c', class: "b2b_wizard" }, h("slot", { key: '5269079effefba0af4fe959b8ff0fc09996549e5' }))));
+        return (h(Host, { key: '489668ca4d9f27816d504f8238131697c0fe3857' }, h("div", { key: '984c7faaaf101d267b9fb89e2dd60ef4046a6443', class: "b2b_wizard" }, h("slot", { key: '87ab15ff841b158a6874cec12c4ab8c19f78df01' }))));
     }
     static get is() { return "b2b-wizard"; }
     static get encapsulation() { return "shadow"; }