@otto-de/b2b-core-components 1.15.1 → 1.17.0

package/dist/cjs/b2b-date-picker.cjs.entry.js

@@ -0,0 +1,323 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-668808fd.js');
+const datePicker_types = require('./date-picker.types-79f4bba0.js');
+
+const datePickerCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host .b2b-date-picker{position:relative;z-index:1000}:host .b2b-date-picker__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}:host .b2b-date-picker-input-focus-wrapper{width:100%;height:100%}:host .b2b-date-picker-input-focus-wrapper:hover{cursor:text}:host .b2b-date-picker-input-wrapper{display:flex;box-sizing:border-box;height:var(--b2b-size-90);border:var(--b2b-size-1) solid var(--b2b-color-grey-200);justify-content:flex-start;border-radius:var(--b2b-size-7);padding:var(--b2b-size-15) var(--b2b-size-20);max-width:600px;background-color:var(--b2b-color-white-100);transition:outline 0.2s ease-in-out, border-color 0.2s ease-in-out}:host .b2b-date-picker-input-wrapper--focused{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px}:host .b2b-date-picker-input-wrapper--error{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);border-color:var(--b2b-color-error-100)}:host .b2b-date-picker-input-wrapper .b2b-date-picker-input{border:none;outline:none;box-shadow:none;box-sizing:border-box;margin-left:0;padding-left:0;height:100%;width:15%;color:var(--b2b-color-black-100);font-size:var(--b2b-size-35);line-height:var(--b2b-size-copy-line-height-100);font-weight:var(--b2b-font-weight-normal);font-family:var(--b2b-font-family-default)}:host .b2b-date-picker-input-wrapper .b2b-date-picker-input--error{background-color:var(--b2b-color-error-50)}:host .b2b-date-picker-selected-date{flex:1;align-self:center;font-size:var(--b2b-size-35)}:host .b2b-date-picker-label{font-size:var(--b2b-size-35);color:var(--b2b-color-black-100);line-height:var(--b2b-size-copy-line-height-100);margin-bottom:var(--b2b-size-5)}:host .b2b-date-picker-hint{font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);display:block;margin-top:var(--b2b-size-7);color:var(--b2b-color-grey-300)}:host .b2b-date-picker-hint--error{color:var(--b2b-color-error-100)}:host .b2b-date-picker-body{position:relative;border-right:var(--b2b-size-1) solid var(--b2b-color-black-100);border-left:var(--b2b-size-1) solid var(--b2b-color-black-100);border-bottom:var(--b2b-size-1) solid var(--b2b-color-black-100);border-top:2px none -webkit-focus-ring-color;outline-offset:-1px;width:300px;box-sizing:border-box;padding-bottom:var(--b2b-size-40);outline:none;background-color:var(--b2b-color-white-100);z-index:900}:host .b2b-date-picker-body--hidden{display:none}:host .b2b-icons{display:flex;margin-top:var(--b2b-size-5);align-items:center}:host .b2b-close-icon{display:block}:host .b2b-event-icon{display:block}";
+const B2bDatePickerStyle0 = datePickerCss;
+
+const B2bDatePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.b2bSelected = index.createEvent(this, "b2b-selected", 7);
+        this.DISABLED_DATE_ERROR_MESSAGE = 'Auswahl nicht möglich, bitte gültiges Datum auswählen.';
+        this.FORMATTING_ERROR_MESSAGE = 'Format beachten: TT.MM.JJJJ.';
+        this.today = new Date();
+        this.todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
+        this.handleInputChange = (event) => {
+            this.focused = true;
+            this.invalid = false;
+            let value = event.target.value;
+            value = value.replace(/[^0-9.]/g, '');
+            if (value.length > 10) {
+                value = value.slice(0, 10);
+            }
+            this.userInputDate = value;
+            event.target.value = value;
+            if (value.length === 10) {
+                this.parseDateInput(value);
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                this.showHideDatePicker();
+                if (this.invalid) {
+                    this.invalid = false;
+                    this.showDatePicker = false;
+                }
+                let value = event.target.value;
+                if (value.length === 0) {
+                    this.invalid = false;
+                }
+                if (value.length === 10) {
+                    this.parseDateInput(value);
+                    this.emitSelectedDate();
+                    this.showDatePicker = false;
+                    this.focused = false;
+                }
+                else {
+                    this.invalid = true;
+                    this.focused = false;
+                    this.showDatePicker = false;
+                }
+            }
+            if (event.key === 'Backspace') {
+                let value = event.target.value;
+                if (value.length === 0) {
+                    this.clearDateInput();
+                    this.invalid = false;
+                }
+            }
+        };
+        this.handleInputFocus = () => {
+            this.parseDateInput(this.userInputDate);
+            if (this.invalid) {
+                this.invalid = false;
+            }
+            this.focused = true;
+        };
+        this.setCurrentMonth = (selectedMonth) => {
+            this.selectedMonth = selectedMonth;
+            this.selectedDay = undefined;
+        };
+        this.setCurrentYear = (selectedYear) => {
+            this.selectedYear = selectedYear;
+            this.selectedDay = undefined;
+        };
+        this.showHideDatePicker = () => {
+            this.showDatePicker = !this.showDatePicker;
+            this.datePickerView = datePicker_types.DatePickerView.Days;
+        };
+        this.clearDateInput = () => {
+            this.selectedDay = undefined;
+            this.userInputDate = undefined;
+        };
+        this.handleBackdropDismiss = () => {
+            this.showDatePicker = false;
+        };
+        this.disablePastDates = undefined;
+        this.disableFutureDates = undefined;
+        this.disableWeekends = undefined;
+        this.label = 'Zeitraum auswählen';
+        this.preSelectedDate = undefined;
+        this.showHint = true;
+        this.showDatePicker = false;
+        this.focused = false;
+        this.datePickerView = datePicker_types.DatePickerView.Days;
+        this.selectedMonth = new Date().getMonth();
+        this.selectedYear = new Date().getFullYear();
+        this.selectedDay = undefined;
+        this.selectedDate = undefined;
+        this.userInputDate = '';
+        this.invalid = false;
+        this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
+    }
+    componentWillLoad() {
+        if (this.preSelectedDate !== undefined) {
+            const [day, month, year] = this.preSelectedDate.split('.').map(Number);
+            this.selectedDay = day;
+            this.selectedMonth = month - 1;
+            this.selectedYear = year;
+            this.setSelectedDateForDisplay();
+            this.showDatePicker = false;
+        }
+        else {
+            this.selectedDay = undefined;
+            this.selectedMonth = new Date().getMonth();
+            this.selectedYear = new Date().getFullYear();
+            this.userInputDate = '';
+        }
+    }
+    handleEscapePress() {
+        this.showDatePicker = false;
+    }
+    handleDateSelection(event) {
+        this.selectedDay = event.detail.selectedDate.getDate();
+        this.setSelectedDate();
+        this.showDatePicker = false;
+        this.focused = false;
+    }
+    getPreviousMonth() {
+        if (this.selectedMonth === 0) {
+            this.setCurrentMonth(11);
+            this.setCurrentYear(this.selectedYear - 1);
+        }
+        else {
+            this.setCurrentMonth(this.selectedMonth - 1);
+        }
+    }
+    parseDateInput(dateString) {
+        const regex = /^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/;
+        if (dateString == '' || dateString === undefined) {
+            this.invalid = false;
+            return;
+        }
+        if (!regex.test(dateString)) {
+            this.invalid = true;
+            this.showDatePicker = false;
+            this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
+            return;
+        }
+        const [day, month, year] = dateString
+            .split('.')
+            .map(value => Number(value));
+        if (this.isValidDate(day, month, year)) {
+            this.invalid = false;
+            this.selectedDay = day;
+            this.selectedMonth = month - 1;
+            this.selectedYear = year;
+            this.setSelectedDateForDisplay();
+        }
+        else {
+            this.showDatePicker = false;
+            this.invalid = true;
+            this.focused = false;
+            this.selectedDay = this.todayWithoutTime.getDate();
+            this.selectedMonth = this.todayWithoutTime.getMonth();
+            this.selectedYear = this.todayWithoutTime.getFullYear();
+        }
+    }
+    isValidDate(day, month, year) {
+        const date = new Date(year, month - 1, day);
+        const isValidDay = day > 0 && day <= 31;
+        const isValidMonth = month > 0 && month <= 12;
+        const isValidYear = year > 0;
+        let isValidRange = true;
+        if (this.disablePastDates && date < this.todayWithoutTime) {
+            this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
+            isValidRange = false;
+        }
+        if (this.disableFutureDates && date > this.todayWithoutTime) {
+            this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
+            isValidRange = false;
+        }
+        if (this.disableWeekends && (date.getDay() == 0 || date.getDay() == 6)) {
+            this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
+            isValidRange = false;
+        }
+        return isValidDay && isValidMonth && isValidYear && isValidRange;
+    }
+    emitSelectedDate() {
+        this.b2bSelected.emit({
+            selectedDate: new Date(this.selectedYear, this.selectedMonth, this.selectedDay),
+        });
+    }
+    setSelectedDateForDisplay() {
+        if (this.selectedDay !== undefined) {
+            this.updateInputWithSelectedDate();
+        }
+    }
+    updateInputWithSelectedDate() {
+        const formattedDay = this.selectedDay.toString().padStart(2, '0');
+        const formattedMonth = (this.selectedMonth + 1).toString().padStart(2, '0');
+        const formattedYear = this.selectedYear;
+        this.userInputDate = `${formattedDay}.${formattedMonth}.${formattedYear}`;
+        this.invalid = false;
+    }
+    getNextMonth() {
+        if (this.selectedMonth === 11) {
+            this.setCurrentMonth(0);
+            this.setCurrentYear(this.selectedYear + 1);
+        }
+        else {
+            this.setCurrentMonth(this.selectedMonth + 1);
+        }
+    }
+    handleDatePickerViewChanged(event) {
+        this.datePickerView = event.detail.value;
+    }
+    handleMonthSelected(event) {
+        this.setCurrentMonth(event.detail.value);
+        this.datePickerView = datePicker_types.DatePickerView.Days;
+        this.invalid = false;
+        setTimeout(() => {
+            this.setFocusOnCalendarIcon();
+        }, 100);
+    }
+    handleYearSelected(event) {
+        this.setCurrentYear(event.detail.value);
+        this.datePickerView = datePicker_types.DatePickerView.Days;
+        this.invalid = false;
+        setTimeout(() => {
+            this.setFocusOnCalendarIcon();
+        }, 100);
+    }
+    setFocusOnCalendarIcon() {
+        let eventIcon = this.host.shadowRoot.querySelector('.b2b-event-icon');
+        if (eventIcon !== null) {
+            eventIcon.focus();
+        }
+    }
+    setSelectedDate() {
+        this.setSelectedDateForDisplay();
+        this.b2bSelected.emit({
+            selectedDate: new Date(this.selectedYear, this.selectedMonth, this.selectedDay),
+        });
+        this.invalid = false;
+        setTimeout(() => {
+            this.setFocusOnCloseIcon();
+        }, 100);
+    }
+    setFocusOnCloseIcon() {
+        let closeIcon = this.host.shadowRoot.querySelector('.b2b-close-icon');
+        if (closeIcon !== null) {
+            closeIcon.focus();
+        }
+    }
+    moveFocusToInputComponent() {
+        const inputElement = this.host.shadowRoot.querySelector('input.b2b-date-picker-input');
+        if (inputElement !== undefined && !this.invalid) {
+            inputElement.focus();
+            this.focused = true;
+            this.showHideDatePicker();
+            return;
+        }
+        if (this.showDatePicker || this.invalid) {
+            inputElement.blur();
+            this.invalid = false;
+            this.focused = false;
+            this.showHideDatePicker();
+            return;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '7ea0bab1a5248a56baed3368a265de5a23b355c3' }, index.h("div", { key: 'a8f65ab12856aedc945ab3c319975ac1f75f25a7', class: "b2b-date-picker" }, index.h("div", { key: '3af0484bf8c3e565efbce1de8426ac414042dc09', class: "b2b-date-picker-label" }, this.label), index.h("div", { key: '7056fceb98d55563a72ebb8795aecf335a44a4de', class: {
+                'b2b-date-picker-input-wrapper': true,
+                'b2b-date-picker-input-wrapper--focused': this.focused || this.showDatePicker,
+                'b2b-date-picker-input-wrapper--error': this.invalid,
+            } }, index.h("div", { key: '73a4ac3ed6e8a288ac9d6efdb71fc199c2a1ac94', class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
+                this.moveFocusToInputComponent();
+            } }, index.h("input", { key: 'a8f3612481383cdd641dab6643fd9faf38e11130', type: "text", tabindex: 0, class: {
+                'b2b-date-picker-input': true,
+                'b2b-date-picker-input--error': this.invalid,
+            }, value: this.userInputDate, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus, onBlur: () => {
+                this.focused = false;
+            } })), index.h("div", { key: '733646dc186b67c5095dd2a8e6bfde26b97550f9', class: "b2b-icons" }, this.userInputDate && (index.h("div", { tabIndex: 0, onClick: () => {
+                this.invalid = false;
+                this.clearDateInput();
+            }, class: "b2b-close-icon", onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.invalid = false;
+                    this.clearDateInput();
+                }
+            } }, index.h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), index.h("div", { key: 'bded26934ac03205ad84b2754480a17d36109ca1', tabindex: 0, onClick: () => {
+                if (this.invalid) {
+                    this.invalid = false;
+                }
+                this.showHideDatePicker();
+            }, onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    if (this.invalid) {
+                        this.invalid = false;
+                    }
+                    this.showHideDatePicker();
+                }
+            }, class: "b2b-event-icon" }, index.h("b2b-icon", { key: 'aa66b59496916ca647894eed843a11898af331e0', "aria-label": this.showDatePicker
+                ? 'close date picker'
+                : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), index.h("div", { key: '07240a12f44e04a0c21301e90055463fd5438e77', class: {
+                'b2b-date-picker-body': true,
+                'b2b-date-picker-body--hidden': !this.showDatePicker,
+            } }, this.datePickerView === datePicker_types.DatePickerView.Days && (index.h("div", null, index.h("b2b-date-picker-header", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), index.h("b2b-date-picker-days-header", null), index.h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates }))), this.datePickerView === datePicker_types.DatePickerView.Months && (index.h("b2b-date-picker-months", { selectedMonth: this.selectedMonth })), this.datePickerView === datePicker_types.DatePickerView.Years && (index.h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (index.h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), !this.showDatePicker && (index.h("span", { class: {
+                'b2b-date-picker-hint': true,
+                'b2b-date-picker-hint--error': this.invalid,
+            } }, this.invalid
+            ? this.errorMessage
+            : this.showHint && 'Format: TT.MM.JJJJ'))));
+    }
+    get host() { return index.getElement(this); }
+};
+B2bDatePicker.style = B2bDatePickerStyle0;
+
+exports.b2b_date_picker = B2bDatePicker;

package/dist/cjs/b2b-dropdown.cjs.entry.js

@@ -55,11 +55,11 @@ const DropdownComponent = class {
         selectElement.append(...options);
     }
     render() {
-        return (index.h(index.Host, { key: 'cb7a0a4bcc708257cada82f8ce45041b63d6baf1', class: {
+        return (index.h(index.Host, { key: '1a95b7db34185e8a97f17789555263e16c10236d', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': this.invalid && !this.disabled,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (index.h("b2b-input-label", { id: this.name, required: this.required }, this.label)), index.h("select", { key: '7b613f352cc3c501dd3ef917bfc25efc3006f69b', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (index.h("b2b-input-label", { id: this.name, required: this.required }, this.label)), index.h("select", { key: '06bc6f12dc93b0a39f1c086deba8eb10236888cf', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (index.h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (index.h("span", null, this.error)) : ('')));
     }
     get hostElement() { return index.getElement(this); }

package/dist/cjs/b2b-flyout-menu-option.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-668808fd.js');
 
-const flyoutMenuCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-flyout-menu{position:relative;display:inline !important;}.b2b-flyout-menu__trigger{cursor:pointer;display:inline}.b2b-flyout-menu__trigger:focus{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px;z-index:9999}.b2b-flyout-menu .b2b-flyout-menu__options__container{background-color:var(--b2b-color-white-100);display:none;width:max-content;box-shadow:0 0 5px rgba(0, 0, 0, 0.2);font-size:var(--b2b-size-copy-100);font-family:var(--b2b-font-family-default);margin:0.75rem 0 0;position:absolute;right:-0.625rem;text-align:left;z-index:1000;line-height:var(--b2b-size-copy-line-height-100);padding:var(--b2b-size-10) 0}.b2b-flyout-menu .b2b-flyout-menu__options__container--on{display:block}.b2b-flyout-menu__arrow{bottom:100%;height:0.625rem;overflow:hidden;position:absolute;right:0;transform:translateX(-0.75rem);width:1.25rem;z-index:1001}.b2b-flyout-menu__arrow::after{background:var(--b2b-color-white-100);box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.2);content:\"\";height:0.875rem;position:absolute;transform:translateX(3px) translateY(3px) rotate(45deg);width:0.875rem}.b2b-flyout-menu .purge-css-include-variables{border-radius:var(--b2b-border-radius);border-right:var(--b2b-border-right);cursor:var(--b2b-icon-cursor)}.b2b-flyout-menu__option{display:block;padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-bottom:1px solid transparent;cursor:pointer}.b2b-flyout-menu__option--separator{border-bottom:1px solid var(--b2b-color-grey-200)}.b2b-flyout-menu__option:hover,.b2b-flyout-menu__option:focus{background-color:var(--b2b-color-hover);outline:none}.b2b-flyout-menu__option--disabled{pointer-events:none;color:var(--b2b-color-grey-200)}";
-const B2bFlyoutMenuOptionStyle0 = flyoutMenuCss;
+const flyoutMenuOptionCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{display:block;padding:var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);border-bottom:1px solid transparent;cursor:pointer}:host(.b2b-flyout-menu__option:hover),:host(.b2b-flyout-menu__option:focus){background-color:var(--b2b-color-table-selected-hover);outline:none}:host(.b2b-flyout-menu__option--disabled){pointer-events:none;color:var(--b2b-color-grey-200)}:host(.b2b-flyout-menu__option--separator){border-bottom:1px solid var(--b2b-color-grey-200)}";
+const B2bFlyoutMenuOptionStyle0 = flyoutMenuOptionCss;
 
 const FlyoutMenuOptionComponent = class {
     constructor(hostRef) {
@@ -26,7 +26,7 @@ const FlyoutMenuOptionComponent = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '9332072c4536e9dfbb55e451c0886179afb20c45', class: {
+        return (index.h(index.Host, { key: '28f1e7f603120f7e2c5d9e15685505796d249d84', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

package/dist/cjs/b2b-flyout-menu.cjs.entry.js

@@ -157,12 +157,12 @@ const FlyoutMenuComponent = class {
         options[index].focus();
     }
     render() {
-        return (index.h(index.Host, { key: 'e36d8a784f82bb6bd40fc5a8a8483c7ad5c25af3' }, index.h("div", { key: '793eec3a26a6fa3ae0a2d271a1c749f8aafd5c97', class: {
+        return (index.h(index.Host, { key: '476aab5302f63eb5b0b53ae8430570c2c3d0d579' }, index.h("div", { key: '731fa9d43ab22557855da4ff971db304ccdf85dc', class: {
                 'b2b-flyout-menu': true,
-            } }, index.h("div", { key: '96888cb9a1092ee95a6a51744ee4d2c9abcc5757', class: "b2b-flyout-menu__trigger" }, index.h("slot", { key: 'bfd8165d47e1537107530cf09b96cd482d7a76d0', name: "trigger" })), index.h("div", { key: '09ba18f51ce90489e8e97556a1eab48559edb07f', onFocusout: this.blurMenu, class: {
+            } }, index.h("div", { key: 'fc04fda1292925883ad13635ef30a3419bb25e4d', class: "b2b-flyout-menu__trigger" }, index.h("slot", { key: '47d5e464c38b7313fdf25682408ea50c5ad71ab4', name: "trigger" })), index.h("div", { key: 'bf6c7c0c005ba3b0b584d51c0033c7afda09b2fe', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, index.h("div", { key: '51afcd7545a6a988290a9c45057e8491732e9609', class: "b2b-flyout-menu__arrow" }), index.h("slot", { key: '87569322d879c7a87ae9db02537fd90a7395b3e8', name: "option" })))));
+            } }, index.h("div", { key: '7fd4e04f573aa7aeea7e5638e2f2ae664e44e947', class: "b2b-flyout-menu__arrow" }), index.h("slot", { key: '4e80b6752f017385a92f0a5a2fa7beae314c3833', name: "option" })))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/b2b-grid-col.cjs.entry.js

@@ -30,7 +30,7 @@ const B2bGridColumnComponent = class {
         this.textAlign = 'left';
     }
     render() {
-        return (index.h(index.Host, { key: '961d47cfb1b74852145eebb2679676755899a14a', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, index.h("slot", { key: 'ffd12518cb08b04ef6a0db4b915719a848ff0aaf' })));
+        return (index.h(index.Host, { key: 'adc6b55dcffee8137649797d90001305e0c09118', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, index.h("slot", { key: 'cf855df802ea23e5dc748831706a2ba90d6fd3dc' })));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/b2b-grid-row.cjs.entry.js

@@ -13,7 +13,7 @@ const B2bGridRowComponent = class {
         this.justify = 'start';
     }
     render() {
-        return (index.h(index.Host, { key: '5f324fe433848ce5802e861ab4f295575486a4c2', style: {
+        return (index.h(index.Host, { key: 'a44034babe40107c9f5f83d19c70736be7c13f4e', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -21,7 +21,7 @@ const B2bGridRowComponent = class {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, index.h("slot", { key: '685130b0b771fd3e2c846efb0590f39f640ded56' })));
+            } }, index.h("slot", { key: 'a28703ad381919403ebd72ee0a3be5635bd1068b' })));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/b2b-grid.cjs.entry.js

@@ -13,7 +13,7 @@ const B2bGridComponent = class {
         this.margin = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '0413fb6677fea801c46f2497cd3d472c9b08e3c6', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, index.h("slot", { key: '7787a48252271e16f5e02f73047f31540c1aff02' })));
+        return (index.h(index.Host, { key: 'fbfee6601a0768961204e9bcc9d720c902641f55', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, index.h("slot", { key: 'ee658a5643b1d5d9a09afefbd110ee8f0bfdc18e' })));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/b2b-icon-100.cjs.entry.js

@@ -86,6 +86,7 @@ const iconTypes = [
     "b2b_icon-downloads",
     "b2b_icon-dress",
     "b2b_icon-dungarees",
+    "b2b_icon-duplicate",
     "b2b_icon-duration",
     "b2b_icon-e-invoice",
     "b2b_icon-edit-pad",

package/dist/cjs/b2b-icon.cjs.entry.js

@@ -95,6 +95,7 @@ const iconTypes = [
     "b2b_icon-downloads",
     "b2b_icon-dress",
     "b2b_icon-dungarees",
+    "b2b_icon-duplicate",
     "b2b_icon-duration",
     "b2b_icon-e-invoice",
     "b2b_icon-edit-pad",

package/dist/cjs/b2b-input-group_2.cjs.entry.js

@@ -65,7 +65,7 @@ const B2BInputGroup = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '697a9aa57b4c84fa5c3a55225b695cf6684c6279' }, index.h("div", { key: 'decb2d1ccaa48f832c8fd88e3dd65f51d532f1aa', class: { 'b2b-input-wrapper': true } }, index.h("slot", { key: '1763b9e857b58f8fe163cf7d69229f542a9d17b2', name: "start" }), index.h("slot", { key: '4bdeec6b19801eb683d43fd586f853a7863f8540' }), index.h("slot", { key: '43e2bf3b43250f41210eec5b8abe6919e12ac571', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (index.h("span", { class: {
+        return (index.h(index.Host, { key: 'd1a1de32301c87ca992079aa51cd852c495834c7' }, index.h("div", { key: '153380f6335f6798c0c5b66c7fa3d210f279c608', class: { 'b2b-input-wrapper': true } }, index.h("slot", { key: 'bc44e2403e9fd7b62b4e5a6a7803525b93d015d4', name: "start" }), index.h("slot", { key: '4f05ab139f36b432431e606490c765ce3ef219d7' }), index.h("slot", { key: '152982745b2849e70ce339d85d86485f9cdee48a', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (index.h("span", { class: {
                 'b2b-input-wrapper__hint': true,
                 'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
             } }, this.invalid && !this.disabled ? this.error : this.hint))));
@@ -221,13 +221,13 @@ const InputListComponent = class {
     */
     render() {
         const groupOrderClass = this.getGroupOrderClassName() || '';
-        return (index.h(index.Host, { key: '021e88a7b85456c1fdecd2bc26c421031836f335', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, index.h("div", { key: 'd199f7d6da4ce8651a59028cdbd2563900fa07e0', class: {
+        return (index.h(index.Host, { key: '2a2b0afc5b73c7211247c523e51e6d637e3e1f10', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, index.h("div", { key: 'f1878924e5ee06707482ebab84ddf236aa62be64', class: {
                 'b2b-input-list': true,
                 'b2b-input-list__options-on': this.hasOptionList &&
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, index.h("b2b-input", { key: '28a22585201412e70911183673a71950fb69e404', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (index.h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (index.h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (index.h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (index.h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (index.h("slot", null)))) : null)));
+            } }, index.h("b2b-input", { key: '38a9b9369756cc2ff9e9d4fe551155af1b9890f9', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (index.h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (index.h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (index.h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (index.h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (index.h("slot", null)))) : null)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/b2b-input-label.cjs.entry.js

@@ -14,11 +14,11 @@ const InputLabelComponent = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'f3ee35931ef52504cad7065e84f5682ea2797104' }, index.h("label", { key: '560dab843355abd80e26603b098c402ac6bf164d', class: {
+        return (index.h(index.Host, { key: '678e58635983721baf51e81727a78c55fd35042a' }, index.h("label", { key: '2f16c854d4910a071cded385253ad603c474e3ae', class: {
                 'b2b-input-label': true,
                 'b2b-input-label--required': this.required,
                 'b2b-input-label--disabled': this.disabled,
-            } }, index.h("slot", { key: '3731ae93d587f2cb6b8e12baec2e69ecc12d64f2' }))));
+            } }, index.h("slot", { key: '80932ca49a275048ce1ff892cd364e61832c8698' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/b2b-input_2.cjs.entry.js

@@ -85,18 +85,18 @@ const InputComponent = class {
         this.getSlottedText();
     }
     render() {
-        return (index.h(index.Host, { key: '22f14fab2036dd16b009ae60efe64d437331f5a7', class: {
+        return (index.h(index.Host, { key: 'e6c08205adba93f5dacaa3b9ae956b1f726480b0', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, this.label && (index.h("b2b-input-label", { id: this.name, required: this.required }, this.label)), index.h("div", { key: '2279e5df7e36354c70299289c638beb3ca64941a', class: {
+            } }, this.label && (index.h("b2b-input-label", { id: this.name, required: this.required }, this.label)), index.h("div", { key: '5461d6f694871240066b50cd026381e74de02dcd', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, index.h("slot", { key: '9ad9505c66f7df5ebc47834a1f6e3969c2dc302f', name: "start" }), this.hasTextPrefix && index.h("div", { class: "border" }), index.h("input", { key: 'e1a5c24b05717a9f21c85811337928e5eb6a6aac', class: {
+            } }, index.h("slot", { key: '838c766e9b106eaef8bc4773bfb797f41605843e', name: "start" }), this.hasTextPrefix && index.h("div", { class: "border" }), index.h("input", { key: 'fa104e69604a260e37b87c2c271f67e1049f6d0b', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
                 'b2b-input__native-input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && index.h("div", { class: "border" }), index.h("slot", { key: '0990ac8caea69496870bb2be9ad13f8c396d80ae', name: "end" })), (this.hint !== undefined && !this.invalid) ||
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && index.h("div", { class: "border" }), index.h("slot", { key: '337528c8f1da7648c426886551120c6fcc605fc7', name: "end" })), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (index.h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (index.h("span", null, this.error)) : ('')));
     }
     get hostElement() { return index.getElement(this); }
@@ -121,7 +121,7 @@ const InputListOptionComponent = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '836ae2a7b30d6fca56835bec01b5ca4ba0109793', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
+        return (index.h(index.Host, { key: 'a15a0976c03534b47a7350a1d711c041a56be359', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
     }
 };
 InputListOptionComponent.style = B2bInputListOptionStyle0;

package/dist/cjs/b2b-label.cjs.entry.js

@@ -13,10 +13,10 @@ const LabelComponent = class {
         this.type = 'neutral';
     }
     render() {
-        return (index.h("span", { key: 'a3c0cc8abed4982328f177460cecc93f4ec8ff71', class: {
+        return (index.h("span", { key: '016a37426c256881557a80013caf2b131e45805c', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, index.h("slot", { key: 'a42ee69ab239b15001e220a334aa693aff0118c7' })));
+            } }, index.h("slot", { key: '9b0c99450388a0f44e1682e1c959776131bdecfd' })));
     }
 };
 LabelComponent.style = B2bLabelStyle0;

package/dist/cjs/b2b-modal.cjs.entry.js

@@ -210,10 +210,10 @@ const ModalComponent = class {
         this.attemptFocus(this.getFirstFocusableElement());
     }
     render() {
-        return (index.h(index.Host, { key: '1e3ae2d0db3df6fd7fb249181560471102f81ad4' }, index.h("div", { key: 'b6a9ce0bc06ca54cba7885b3094f448df6440194', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, index.h("div", { key: 'a114fc4834406ac93c554fa5c2058500c229ecfe', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), index.h("div", { key: '49ce79940badc68db9a6469f96bbe43b5803ced2', class: {
+        return (index.h(index.Host, { key: '5bd9bfb06f284ff43ed00f4b8312533d4557034b' }, index.h("div", { key: 'bd1e213955e5129db787ac5deb798e2520bb2a38', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, index.h("div", { key: '38460346e59ae1679af9d745eb55e45a2f580bf7', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), index.h("div", { key: '09ecdbdaed4b6a135810469b55b6a554250492fd', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, index.h("div", { key: 'e1542497ec46e553b5883a8bec9fb97bc8e41bb8', class: "b2b-modal__dialog__header" }, index.h("div", { key: 'eeb61001cfc5090b6f4bd969fb8b79d24a69bfa5', class: "b2b-modal__dialog__header-left" }, index.h("b2b-headline", { key: '84172ec8e265fce0aa43bbc23b448338524a5308', align: "center", size: "200", noMargin: true }, this.heading), index.h("slot", { key: 'd77b0510ea6499190dcb84fdf0568bf350dd335a', name: "header-icon" })), index.h("div", { key: '9593ad5db17f58b9d6fd78dd2ba2222cf79a898d', class: "b2b-modal__dialog__header-right" }, index.h("button", { key: '58891bff498f89f768cce4f47e4f645f30e7cdad', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, index.h("b2b-icon", { key: '13e59be8efad1023f31dfa312587e35ef8d9fe67', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), index.h("div", { key: '924bef84d6894ce17a3d66a2d9b23f691b9223cd', class: "b2b-modal__dialog__body" }, index.h("slot", { key: 'b07dc09829fac404e024d088ac2d81077e8324a5' })), index.h("div", { key: '7433546732ce4e1328cf69f2854f9fa28b0a9fdd', class: "b2b-modal__dialog__footer" }, index.h("div", { key: 'c27513e66a231d28fe1daa43161314c618ba796b', class: "b2b-modal__dialog__footer-left" }, index.h("slot", { key: '7a6207d701937ba3862556baf8bd3fc7d0a5723a', name: "footer-left" })), index.h("div", { key: '987111726c944467252370d3584cfc48abe73fd4', class: "b2b-modal__dialog__footer-right" }, index.h("slot", { key: '2937656f11a5f6ab715790635d36ece40f87ce98', name: "footer-right" })))), index.h("div", { key: '4dda8705d09b21f15472bc1b0971d50dd8c3b9bb', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), index.h("div", { key: 'b8097e7b4bcbada1bec1e937296567e01042cf3d', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, index.h("div", { key: '07f02da5e3d9a692ac13591ef0bd151611658dac', class: "b2b-modal__dialog__header" }, index.h("div", { key: 'bb416331a33d2fb8bd2699da1ae60f337802ac03', class: "b2b-modal__dialog__header-left" }, index.h("b2b-headline", { key: '7b6ca2718fee5a5f0e9c68bc4c7d7369aa076798', align: "center", size: "200", noMargin: true }, this.heading), index.h("slot", { key: 'f49eba5a02901b361a93ba1bf0b86d7fa85cc271', name: "header-icon" })), index.h("div", { key: 'd188df3c47771ea22f4d86a262c1655617eeef86', class: "b2b-modal__dialog__header-right" }, index.h("button", { key: '5d3779fc527982e7bd1b72b0aa3591e802483f52', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, index.h("b2b-icon", { key: '5b1874355079c976b60e170da079adba5d242092', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), index.h("div", { key: 'de2c3c1bd2db5a9e6e7c05f412f2e52b01e6da87', class: "b2b-modal__dialog__body" }, index.h("slot", { key: '2133df17353f1ae1791b875fa1b616c8c2a8be53' })), index.h("div", { key: 'fc940582a01b28a86b6abdc1554dbfaef056e5ee', class: "b2b-modal__dialog__footer" }, index.h("div", { key: '842bd4abc05a189348b13d5cad6652dd3eaac048', class: "b2b-modal__dialog__footer-left" }, index.h("slot", { key: '089aea2e787f66fe5efccad23eb2c63e0ac5d9c8', name: "footer-left" })), index.h("div", { key: '59a97116777b4d7d1517220c1bd37f9bba7653b4', class: "b2b-modal__dialog__footer-right" }, index.h("slot", { key: '639ce0efe103ea0c2f7e5d930ab335884e8c7947', name: "footer-right" })))), index.h("div", { key: 'eb42810a65b73211f2437af9f7137de0bf4a5a0c', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), index.h("div", { key: '9e289cffd2529a53ee390ad815e118b35a32c1e6', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {