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

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

@@ -0,0 +1,135 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-TimePicker', () => {
+    it('should render the time picker component', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker label="Time Picker"></b2b-time-picker>`);
+        const element = await page.find('b2b-time-picker');
+        expect(element).toHaveClass('hydrated');
+    });
+    it('should display the label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker label="Time Picker"></b2b-time-picker>`);
+        const label = await page.find('b2b-time-picker >>> b2b-input-label');
+        expect(label).not.toBeNull();
+        expect(label.textContent).toContain('Time Picker');
+    });
+    it('should open the dropdown on input focus', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        const optionsContainer = await page.find('b2b-time-picker >>> .b2b-time-picker__options-container--visible');
+        expect(optionsContainer).not.toBeNull();
+    });
+    it('should select a time from the dropdown', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        const option = await page.find('b2b-time-picker >>> .b2b-time-picker__option[data-value="09:00"]');
+        await option.click();
+        await page.waitForChanges();
+        const value = await page.$eval('b2b-time-picker', el => el.value);
+        expect(value).toBe('09:00');
+    });
+    it('should clear the input when clear icon is clicked', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker value="10:15"></b2b-time-picker>`);
+        const clearIcon = await page.find('b2b-time-picker >>> .b2b-close-icon');
+        await clearIcon.click();
+        await page.waitForChanges();
+        const value = await page.$eval('b2b-time-picker', el => el.value);
+        expect(value).toBe('');
+    });
+    it('should show error message for invalid input', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        const input = await page.find('b2b-time-picker >>> input');
+        await input.type('99:99');
+        await page.evaluate(() => {
+            const el = document
+                .querySelector('b2b-time-picker')
+                .shadowRoot.querySelector('input');
+            el.blur();
+        });
+        await page.waitForChanges();
+        const error = await page.find('b2b-time-picker >>> .b2b-time-picker__hint--error');
+        expect(error).not.toBeNull();
+        expect(error.textContent).toContain('Invalid format');
+    });
+    it('should generate correct time options for a custom interval', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker interval="30"></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        const options = await page.findAll('b2b-time-picker >>> .b2b-time-picker__option');
+        expect(options.length).toBe(48);
+        expect(options[0].textContent).toBe('00:00');
+        expect(options[1].textContent).toBe('00:30');
+        expect(options[2].textContent).toBe('01:00');
+    });
+    it('should not break when selecting an already selected time', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker value="08:00"></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        const option = await page.find('b2b-time-picker >>> .b2b-time-picker__option[data-value="08:00"]');
+        await option.click();
+        await page.waitForChanges();
+        const value = await page.$eval('b2b-time-picker', el => el.value);
+        expect(value).toBe('08:00');
+    });
+    it('should toggle dropdown on duration icon click', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        const icon = await page.find('b2b-time-picker >>> .b2b-duration-icon');
+        await icon.click();
+        await page.waitForChanges();
+        let optionsContainer = await page.find('b2b-time-picker >>> .b2b-time-picker__options-container--visible');
+        expect(optionsContainer).not.toBeNull();
+        await icon.click();
+        await page.waitForChanges();
+        optionsContainer = await page.find('b2b-time-picker >>> .b2b-time-picker__options-container--visible');
+        expect(optionsContainer).toBeNull();
+    });
+    it('should close the dropdown on blur', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker></b2b-time-picker>`);
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+        });
+        await page.waitForChanges();
+        await page.$eval('b2b-time-picker', el => {
+            const input = el.shadowRoot.querySelector('input');
+            input.dispatchEvent(new FocusEvent('blur', { bubbles: true }));
+        });
+        await new Promise(res => setTimeout(res, 200));
+        const optionsContainer = await page.find('b2b-time-picker >>> .b2b-time-picker__options-container--visible');
+        expect(optionsContainer).toBeNull();
+    });
+    it('should show custom error message via error prop', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker error="Custom error" invalid></b2b-time-picker>`);
+        const error = await page.find('b2b-time-picker >>> .b2b-time-picker__hint--error');
+        expect(error.textContent).toContain('Custom error');
+    });
+    it('should display the hint text when provided', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-time-picker hint="Pick a time"></b2b-time-picker>`);
+        const hint = await page.find('b2b-time-picker >>> .b2b-time-picker__hint');
+        expect(hint.textContent).toContain('Pick a time');
+    });
+});

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: '60186f73f9b29e97a12cae3d21677a93e9d2cc2e', 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: 'ba780bb83b8b29fbf954a3fcc9d3d24e1fb00d47', 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: 'b7c954dcc95b39ba1243c0594af865aeb8f5e556', 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: '2174ef2f4795544c109934bba08b5bf5589ad970', 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: '6a0b79eeb95e89fd4e1ae7650fc6894fe9995716', class: "b2b-duration-icon", onMouseDown: e => {
+                e.preventDefault();
+                this.toggleDropdown();
+            } }, h("b2b-icon-100", { key: '4d2c4ac3c85e7186f02c1ace46e0f52b32b3867e', icon: "b2b_icon-duration", clickable: true })))), h("div", { key: '05643f9d3d325a0d145b5f75a5295e3772b317a2', class: {
+                'b2b-time-picker__options-container': true,
+                'b2b-time-picker__options-container--visible': this.isOpen && this.hasFocus,
+            }, onMouseDown: e => e.preventDefault() }, h("div", { key: '2f3d104f3c8b91f828195d17a493ae085098ffb2', 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: 'a6f1b65c7fc3b33b46d9f12f03c47d7abb14c345', onClick: this.onClick }, h("span", { key: '546d4e19b0f924c7ba6f3d86a917f9a6d56800e8', class: {
+        return (h(Host, { key: '653a99cf2670e048d4486f4c58a6b362777f1542', onClick: this.onClick }, h("span", { key: 'bf6c3226b73ac9d033c6479e5ddf0a2366c51a65', class: {
                 'b2b-toggle-button': true,
                 'b2b-toggle-button--disabled': this.disabled,
-            } }, h("input", { key: 'f80c968bb2b970b2fee8f028183786ee62cb46aa', tabindex: 0, class: {
+            } }, h("input", { key: '74ac055cf0fc0cb192c38fa288d20892a77eb662', 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: 'dcf4bd01503bed93040bb788c5c8f501e900bdcc', 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: '56246f69a36f044a58e735a3a2e3bbacc95d285c', 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: '70fad02b2046f9a929159944de8d1bcfb73e695b' }, h("span", { key: 'e0999281f64d4dcf7fadd9861e69c2ccd5242381', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: '9ccaee0a0cef686481b529812736efebdda24ccf' }, h("span", { key: 'df149ca80ecabd2696d7f794577881128c85cb96', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: '9a5adfa2b4b45fd86511167a879b2324ec1514aa', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: 'b4402e6fce941fef4e60278df3e4997d33e15ac4', "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: 'b35900d6765c98d6a403384ae87ce666df7a391e', 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: 'a178fcabcba44be3fff977fe9236d6e46783bcb1', 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,