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

package/dist/cjs/{b2b-date-picker-days_5.cjs.entry.js → b2b-date-picker-days-header_4.cjs.entry.js}

@@ -3,179 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-668808fd.js');
-const datePickerUtil = require('./date-picker-util-51276571.js');
-
-const datePickerDaysCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@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-date-picker-days{display:grid;grid-template-columns:repeat(7, 1fr);padding:0 var(--b2b-size-40) 0 var(--b2b-size-40)}.b2b-date-picker-days .b2b-date-picker-day{width:var(--b2b-size-90);height:var(--b2b-size-90);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:var(--b2b-font-weight-normal);color:var(--b2b-color-black-100);font-size:var(--b2b-size-35)}.b2b-date-picker-days .b2b-date-picker-day:hover{cursor:pointer}.b2b-date-picker-days .b2b-date-picker-day:hover,.b2b-date-picker-days .b2b-date-picker-day:focus{background-color:var(--b2b-color-hover-default)}.b2b-date-picker-days .b2b-date-picker-day--disabled{border-radius:5px;color:var(--b2b-color-grey-200);pointer-events:none}.b2b-date-picker-days .b2b-date-picker-day--today{border:1px solid var(--b2b-color-black-50);box-sizing:border-box;width:100%;height:100%}.b2b-date-picker-days .b2b-date-picker-day--selected{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100);pointer-events:none;width:100%}.b2b-date-picker-days .b2b-date-picker-day--focussed{background-color:var(--b2b-color-hover-default)}";
-const B2bDatePickerDaysStyle0 = datePickerDaysCss;
-
-const keys$2 = {
-    ARROW_UP: 'ArrowUp',
-    ARROW_DOWN: 'ArrowDown',
-    ARROW_RIGHT: 'ArrowRight',
-    ARROW_LEFT: 'ArrowLeft',
-    HOME: 'Home',
-    END: 'End',
-    ESC: 'Escape',
-    TAB: 'Tab',
-    ENTER: 'Enter',
-};
-const B2bDatePickerDays = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.b2bDatePickerEscape = index.createEvent(this, "b2b-date-picker-escape", 7);
-        this.b2bDateSelected = index.createEvent(this, "b2b-date-selected", 7);
-        this.today = new Date();
-        this.todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
-        this.getCurrentDate = () => {
-            const dates = this.getAllDates();
-            return dates.find(el => el.getAttribute('tabindex') === '0');
-        };
-        this.getAllDates = () => {
-            return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-day'));
-        };
-        this.focusCurrentDate = (date) => {
-            const dates = this.getAllDates();
-            dates.forEach(element => {
-                if (date.className.includes('b2b-date-picker-day--disabled')) {
-                    return;
-                }
-                element.setAttribute('tabindex', element === date ? '0' : '-1');
-            });
-            if (!date.className.includes('b2b-date-picker-day--disabled')) {
-                date.focus();
-            }
-        };
-        this.handleClick = (event) => {
-            /** Remove focus from the clicked element */
-            event.target.blur();
-        };
-        this.renderDatePickerDays = () => {
-            let daysInMonth = new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate(); /** Get total number of days in the current month */
-            let actualFirstDayOfMonth = new Date(this.selectedYear, this.selectedMonth, 1).getDay(); /** Get the day of the week (0-6) of the first day of the month */
-            let firstDayOfMonth = actualFirstDayOfMonth == 0 ? 6 : actualFirstDayOfMonth - 1;
-            let days = [];
-            /** Populate the days before the first day of the month with empty divs. */
-            for (let i = 0; i < firstDayOfMonth; i++) {
-                days.push(index.h("div", null));
-            }
-            /** Populate days array with day numbers. */
-            for (let i = 1; i <= daysInMonth; i++) {
-                let givenDate = new Date(this.selectedYear, this.selectedMonth, i);
-                let disabled = datePickerUtil.DateUtils.isDisabledDate(givenDate, {
-                    disableDates: this.disableDates,
-                    disablePastDates: this.disablePastDates,
-                    disableFutureDates: this.disableFutureDates,
-                    disableWeekends: this.disableWeekends,
-                    todayWithoutTime: this.todayWithoutTime,
-                    disableEvery: this.disableEvery,
-                    disableDatesUntil: this.disableDatesUntil,
-                    disableDatesFrom: this.disableDatesFrom,
-                });
-                days.push(index.h("div", { class: {
-                        'b2b-date-picker-day': true,
-                        'b2b-date-picker-day--disabled': disabled,
-                        'b2b-date-picker-day--today': givenDate.toDateString() === this.todayWithoutTime.toDateString(),
-                        'b2b-date-picker-day--selected': new Date(this.selectedYear, this.selectedMonth, this.selectedDay).toDateString() === givenDate.toDateString(),
-                    }, onClick: event => {
-                        this.b2bDateSelected.emit({
-                            selectedDate: new Date(this.selectedYear, this.selectedMonth, i),
-                        });
-                        this.handleClick(event);
-                    }, tabindex: givenDate.toDateString() === this.todayWithoutTime.toDateString()
-                        ? 0
-                        : -1, role: "gridcell", "aria-label": `Date ${i}  ${this.selectedMonth + 1}  ${this.selectedYear}` }, i));
-            }
-            return days;
-        };
-        this.selectedMonth = undefined;
-        this.selectedYear = undefined;
-        this.selectedDay = undefined;
-        this.disablePastDates = false;
-        this.disableFutureDates = false;
-        this.disableWeekends = false;
-        this.disableDates = [];
-        this.disableEvery = [];
-        this.disableDatesUntil = undefined;
-        this.disableDatesFrom = undefined;
-        this.disabled = false;
-    }
-    componentDidLoad() {
-        this.setFocusOnSelectedDayOrFirstDay();
-    }
-    setFocusOnSelectedDayOrFirstDay() {
-        const dates = this.getAllDates();
-        if (dates.length > 0) {
-            if (this.today.getMonth() !== this.selectedMonth) {
-                if (this.selectedDay !== undefined) {
-                    this.focusCurrentDate(dates[this.selectedDay - 1]);
-                }
-                else {
-                    this.focusCurrentDate(dates[0]);
-                }
-            }
-        }
-    }
-    componentWillLoad() {
-        this.setFocusOnSelectedDayOrFirstDay();
-    }
-    handleKeyDown(event) {
-        event.preventDefault();
-        const dates = this.getAllDates();
-        let index = this.today.getDate() - 1;
-        switch (event.key) {
-            case keys$2.TAB:
-                if (this.today.getMonth() === this.selectedMonth) {
-                    index = this.today.getDate() - 1;
-                }
-                break;
-            case keys$2.ARROW_LEFT:
-                index = dates.indexOf(this.getCurrentDate()) - 1;
-                break;
-            case keys$2.ARROW_RIGHT:
-                index = dates.indexOf(this.getCurrentDate()) + 1;
-                break;
-            case keys$2.ARROW_UP:
-                index = dates.indexOf(this.getCurrentDate()) - 7;
-                break;
-            case keys$2.ARROW_DOWN:
-                index = dates.indexOf(this.getCurrentDate()) + 7;
-                break;
-            case keys$2.ENTER:
-                index = dates.indexOf(this.getCurrentDate());
-                if (dates[index].classList.contains('b2b-date-picker-day--disabled')) {
-                    return;
-                }
-                this.b2bDateSelected.emit({
-                    selectedDate: new Date(this.selectedYear, this.selectedMonth + 1, index + 1),
-                });
-                break;
-            case keys$2.ESC:
-                this.resetAllDates();
-                this.b2bDatePickerEscape.emit();
-                break;
-            default:
-                return;
-        }
-        if (index < 0) {
-            index = dates.length - 1;
-        }
-        if (index > dates.length - 1) {
-            index = 0;
-        }
-        this.focusCurrentDate(dates[index]);
-    }
-    resetAllDates() {
-        const dates = this.getAllDates();
-        dates.forEach(element => {
-            element.setAttribute('tabindex', '-1');
-        });
-    }
-    render() {
-        return (index.h(index.Host, { key: '73d99c811d52c00ddec7c3f044b7d850861f7a48' }, index.h("div", { key: '146b6533fc0d040a896e32baf3068793a8cdfe81', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
-    }
-    get host() { return index.getElement(this); }
-};
-B2bDatePickerDays.style = B2bDatePickerDaysStyle0;
 
 const MonthsGerman = [
     'Jan',
@@ -301,11 +128,13 @@ const keys$1 = {
     ARROW_RIGHT: 'ArrowRight',
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
+    ESC: 'Escape',
 };
 const B2bDatePickerMonths = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.b2bDatePickerMonthSelected = index.createEvent(this, "b2b-date-picker-month-selected", 7);
+        this.b2bDatePickerEscape = index.createEvent(this, "b2b-date-picker-escape", 7);
         this.getAllMonths = () => {
             return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-month'));
         };
@@ -336,28 +165,30 @@ const B2bDatePickerMonths = class {
     }
     handleKeyDown(event) {
         event.preventDefault();
-        let index = this.selectedMonth;
         const months = this.getAllMonths();
         let currentMonth = this.getCurrentMonth();
+        let index = months.indexOf(currentMonth);
         switch (event.key) {
             case keys$1.ARROW_LEFT:
-                index = months.indexOf(currentMonth) - 1;
+                index -= 1;
                 break;
             case keys$1.ARROW_RIGHT:
-                index = months.indexOf(currentMonth) + 1;
+                index += 1;
                 break;
             case keys$1.ARROW_UP:
-                index = months.indexOf(currentMonth) - 3;
+                index -= 3;
                 break;
             case keys$1.ARROW_DOWN:
-                index = months.indexOf(currentMonth) + 3;
+                index += 3;
                 break;
             case keys$1.ENTER:
-                index = months.indexOf(currentMonth);
                 this.b2bDatePickerMonthSelected.emit({
                     value: index,
                 });
-                break;
+                return;
+            case keys$1.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
             default:
                 return;
         }
@@ -369,8 +200,12 @@ const B2bDatePickerMonths = class {
         }
         this.focusCurrentMonth(months[index]);
     }
+    componentDidRender() {
+        var _a;
+        (_a = this.getCurrentMonth()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
-        return (index.h(index.Host, { key: '9ddb8ebbb24997435ceca09cc47ba7dc12b39ba7' }, index.h("div", { key: 'a650207f538786bb680698ffc293fd59a717ea3a', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+        return (index.h(index.Host, { key: '92f546b998c48d274d76db47db997bcda3968033' }, index.h("div", { key: 'cfd9e12f5d1047d6acf2be7142d070dd64517049', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
     }
     get host() { return index.getElement(this); }
 };
@@ -385,11 +220,13 @@ const keys = {
     ARROW_RIGHT: 'ArrowRight',
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
+    ESC: 'Escape',
 };
 const B2bDatePickerYears = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.b2bDatePickerYearSelected = index.createEvent(this, "b2b-date-picker-year-selected", 7);
+        this.b2bDatePickerEscape = index.createEvent(this, "b2b-date-picker-escape", 7);
         this.getAllYears = () => {
             return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-year'));
         };
@@ -432,32 +269,34 @@ const B2bDatePickerYears = class {
             return years;
         };
         this.selectedYear = undefined;
-        this.yearsRange = [];
+        this.yearsRange = Array.from({ length: 201 }, (_, i) => i + 1900);
     }
     handleKeyDown(event) {
         event.preventDefault();
-        let index = this.yearsRange.indexOf(this.selectedYear);
         const years = this.getAllYears();
         let currentYear = this.getCurrentYear();
+        let index = years.indexOf(currentYear);
         switch (event.key) {
             case keys.ARROW_LEFT:
-                index = years.indexOf(currentYear) - 1;
+                index -= 1;
                 break;
             case keys.ARROW_RIGHT:
-                index = years.indexOf(currentYear) + 1;
+                index += 1;
                 break;
             case keys.ARROW_UP:
-                index = years.indexOf(currentYear) - 3;
+                index -= 3;
                 break;
             case keys.ARROW_DOWN:
-                index = years.indexOf(currentYear) + 3;
+                index += 3;
                 break;
             case keys.ENTER:
-                index = years.indexOf(currentYear);
                 this.b2bDatePickerYearSelected.emit({
                     value: this.yearsRange[index],
                 });
-                break;
+                return;
+            case keys.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
             default:
                 return;
         }
@@ -469,24 +308,19 @@ const B2bDatePickerYears = class {
         }
         this.focusCurrentYear(years[index]);
     }
-    componentWillLoad() {
-        for (let i = 1900; i <= 2100; i++) {
-            this.yearsRange.push(i);
-        }
-    }
     componentDidLoad() {
         if (this.selectedYear > 0) {
             this.scrollToYear(this.selectedYear);
+            this.getCurrentYear().focus();
         }
     }
     render() {
-        return (index.h(index.Host, { key: '22394d693b0a966c62b74de49c00d72b346a2e64' }, index.h("div", { key: 'a2c33dc133169c2cb558e9b92d78b56cf7fb108e', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
+        return (index.h(index.Host, { key: '2e9b64e857f36f8623cb13aa5ebd5346e21bdc6f' }, index.h("div", { key: 'b6a82d5fbfc2f18aab9c2c64efe3c8bbe63cfc19', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
     }
     get host() { return index.getElement(this); }
 };
 B2bDatePickerYears.style = B2bDatePickerYearsStyle0;
 
-exports.b2b_date_picker_days = B2bDatePickerDays;
 exports.b2b_date_picker_days_header = B2bDatePickerDaysHeader;
 exports.b2b_date_picker_header = B2bDatePickerHeader;
 exports.b2b_date_picker_months = B2bDatePickerMonths;

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

@@ -0,0 +1,180 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-668808fd.js');
+const datePickerUtil = require('./date-picker-util-51276571.js');
+
+const datePickerDaysCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@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-date-picker-days{display:grid;grid-template-columns:repeat(7, 1fr);padding:0 var(--b2b-size-40) 0 var(--b2b-size-40)}.b2b-date-picker-days .b2b-date-picker-day{width:var(--b2b-size-90);height:var(--b2b-size-90);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:var(--b2b-font-weight-normal);color:var(--b2b-color-black-100);font-size:var(--b2b-size-35)}.b2b-date-picker-days .b2b-date-picker-day:hover{cursor:pointer}.b2b-date-picker-days .b2b-date-picker-day:hover,.b2b-date-picker-days .b2b-date-picker-day:focus{background-color:var(--b2b-color-hover-default)}.b2b-date-picker-days .b2b-date-picker-day--disabled{border-radius:5px;color:var(--b2b-color-grey-200);pointer-events:none}.b2b-date-picker-days .b2b-date-picker-day--today{border:1px solid var(--b2b-color-black-50);box-sizing:border-box;width:100%;height:100%}.b2b-date-picker-days .b2b-date-picker-day--selected{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100);pointer-events:none;width:100%}.b2b-date-picker-days .b2b-date-picker-day--focussed{background-color:var(--b2b-color-hover-default)}";
+const B2bDatePickerDaysStyle0 = datePickerDaysCss;
+
+const keys = {
+    ARROW_UP: 'ArrowUp',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_LEFT: 'ArrowLeft',
+    HOME: 'Home',
+    END: 'End',
+    ESC: 'Escape',
+    TAB: 'Tab',
+    ENTER: 'Enter',
+};
+const B2bDatePickerDays = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.b2bDatePickerEscape = index.createEvent(this, "b2b-date-picker-escape", 7);
+        this.b2bDateSelected = index.createEvent(this, "b2b-date-selected", 7);
+        this.today = new Date();
+        this.todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
+        this.getCurrentDate = () => {
+            const dates = this.getAllDates();
+            return dates.find(el => el.getAttribute('tabindex') === '0');
+        };
+        this.getAllDates = () => {
+            return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-day'));
+        };
+        this.focusCurrentDate = (date) => {
+            const dates = this.getAllDates();
+            dates.forEach(element => {
+                if (date.className.includes('b2b-date-picker-day--disabled')) {
+                    return;
+                }
+                element.setAttribute('tabindex', element === date ? '0' : '-1');
+            });
+            if (!date.className.includes('b2b-date-picker-day--disabled')) {
+                date.focus();
+            }
+        };
+        this.handleClick = (event) => {
+            /** Remove focus from the clicked element */
+            event.target.blur();
+        };
+        this.renderDatePickerDays = () => {
+            let daysInMonth = new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate(); /** Get total number of days in the current month */
+            let actualFirstDayOfMonth = new Date(this.selectedYear, this.selectedMonth, 1).getDay(); /** Get the day of the week (0-6) of the first day of the month */
+            let firstDayOfMonth = actualFirstDayOfMonth == 0 ? 6 : actualFirstDayOfMonth - 1;
+            let days = [];
+            /** Populate the days before the first day of the month with empty divs. */
+            for (let i = 0; i < firstDayOfMonth; i++) {
+                days.push(index.h("div", null));
+            }
+            /** Populate days array with day numbers. */
+            for (let i = 1; i <= daysInMonth; i++) {
+                let givenDate = new Date(this.selectedYear, this.selectedMonth, i);
+                let disabled = datePickerUtil.DateUtils.isDisabledDate(givenDate, {
+                    disableDates: this.disableDates,
+                    disablePastDates: this.disablePastDates,
+                    disableFutureDates: this.disableFutureDates,
+                    disableWeekends: this.disableWeekends,
+                    todayWithoutTime: this.todayWithoutTime,
+                    disableEvery: this.disableEvery,
+                    disableDatesUntil: this.disableDatesUntil,
+                    disableDatesFrom: this.disableDatesFrom,
+                });
+                days.push(index.h("div", { class: {
+                        'b2b-date-picker-day': true,
+                        'b2b-date-picker-day--disabled': disabled,
+                        'b2b-date-picker-day--today': givenDate.toDateString() === this.todayWithoutTime.toDateString(),
+                        'b2b-date-picker-day--selected': new Date(this.selectedYear, this.selectedMonth, this.selectedDay).toDateString() === givenDate.toDateString(),
+                    }, onClick: event => {
+                        this.b2bDateSelected.emit({
+                            selectedDate: new Date(this.selectedYear, this.selectedMonth, i),
+                        });
+                        this.handleClick(event);
+                    }, tabindex: givenDate.toDateString() === this.todayWithoutTime.toDateString()
+                        ? 0
+                        : -1, role: "gridcell", "aria-label": `Date ${i}  ${this.selectedMonth + 1}  ${this.selectedYear}` }, i));
+            }
+            return days;
+        };
+        this.selectedMonth = undefined;
+        this.selectedYear = undefined;
+        this.selectedDay = undefined;
+        this.disablePastDates = false;
+        this.disableFutureDates = false;
+        this.disableWeekends = false;
+        this.disableDates = [];
+        this.disableEvery = [];
+        this.disableDatesUntil = undefined;
+        this.disableDatesFrom = undefined;
+        this.disabled = false;
+    }
+    componentDidLoad() {
+        this.setFocusOnSelectedDayOrFirstDay();
+    }
+    setFocusOnSelectedDayOrFirstDay() {
+        const dates = this.getAllDates();
+        if (dates.length > 0) {
+            if (this.today.getMonth() !== this.selectedMonth) {
+                if (this.selectedDay !== undefined) {
+                    this.focusCurrentDate(dates[this.selectedDay - 1]);
+                }
+                else {
+                    this.focusCurrentDate(dates[0]);
+                }
+            }
+        }
+    }
+    componentWillLoad() {
+        this.setFocusOnSelectedDayOrFirstDay();
+    }
+    handleKeyDown(event) {
+        event.preventDefault();
+        const dates = this.getAllDates();
+        let index = this.today.getDate() - 1;
+        switch (event.key) {
+            case keys.TAB:
+                if (this.today.getMonth() === this.selectedMonth) {
+                    index = this.today.getDate() - 1;
+                }
+                break;
+            case keys.ARROW_LEFT:
+                index = dates.indexOf(this.getCurrentDate()) - 1;
+                break;
+            case keys.ARROW_RIGHT:
+                index = dates.indexOf(this.getCurrentDate()) + 1;
+                break;
+            case keys.ARROW_UP:
+                index = dates.indexOf(this.getCurrentDate()) - 7;
+                break;
+            case keys.ARROW_DOWN:
+                index = dates.indexOf(this.getCurrentDate()) + 7;
+                break;
+            case keys.ENTER:
+                index = dates.indexOf(this.getCurrentDate());
+                if (dates[index].classList.contains('b2b-date-picker-day--disabled')) {
+                    return;
+                }
+                this.b2bDateSelected.emit({
+                    selectedDate: new Date(this.selectedYear, this.selectedMonth + 1, index + 1),
+                });
+                break;
+            case keys.ESC:
+                this.resetAllDates();
+                this.b2bDatePickerEscape.emit();
+                break;
+            default:
+                return;
+        }
+        if (index < 0) {
+            index = dates.length - 1;
+        }
+        if (index > dates.length - 1) {
+            index = 0;
+        }
+        this.focusCurrentDate(dates[index]);
+    }
+    resetAllDates() {
+        const dates = this.getAllDates();
+        dates.forEach(element => {
+            element.setAttribute('tabindex', '-1');
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '73d99c811d52c00ddec7c3f044b7d850861f7a48' }, index.h("div", { key: '146b6533fc0d040a896e32baf3068793a8cdfe81', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
+    }
+    get host() { return index.getElement(this); }
+};
+B2bDatePickerDays.style = B2bDatePickerDaysStyle0;
+
+exports.b2b_date_picker_days = B2bDatePickerDays;

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

@@ -6,7 +6,7 @@ const index = require('./index-668808fd.js');
 const datePickerUtil = require('./date-picker-util-51276571.js');
 const jsonPropertyBindingUtil = require('./json-property-binding-util-f532af53.js');
 
-const datePickerCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@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{position:relative}.b2b-date-picker{position:relative;z-index:300}.b2b-date-picker__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.b2b-date-picker-input-focus-wrapper{width:100%;height:100%}.b2b-date-picker-input-focus-wrapper:hover{cursor:text}.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-13) var(--b2b-size-25) var(--b2b-size-13);background-color:var(--b2b-color-white-100);transition:outline 0.2s ease-in-out, border-color 0.2s ease-in-out}.b2b-date-picker-input-wrapper--focused{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px}.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)}.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%;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)}.b2b-date-picker-input-wrapper .b2b-date-picker-input--error{background-color:var(--b2b-color-error-50)}b2b-input-label{display:block;margin-bottom:var(--b2b-size-5);color:var(--b2b-color-black-100)}.b2b-date-picker-selected-date{flex:1;align-self:center;font-size:var(--b2b-size-35)}.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)}.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)}.b2b-date-picker-hint--error{color:var(--b2b-color-error-100)}.b2b-date-picker-body{position:absolute;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);outline-offset:-1px;width:300px;box-sizing:border-box;margin-top:1px;padding-bottom:var(--b2b-size-40);outline:none;background-color:var(--b2b-color-white-100);z-index:1001}.b2b-date-picker-body--hidden{display:none}.b2b-icons{display:flex;margin-top:var(--b2b-size-5);align-items:center}.b2b-close-icon{display:block}.b2b-event-icon{display:block}";
+const datePickerCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@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{position:relative}.b2b-date-picker{position:relative}.b2b-date-picker__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100}.b2b-date-picker-input-focus-wrapper{width:100%;height:100%}.b2b-date-picker-input-focus-wrapper:hover{cursor:text}.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-13) var(--b2b-size-25) var(--b2b-size-13);background-color:var(--b2b-color-white-100);transition:outline 0.2s ease-in-out, border-color 0.2s ease-in-out}.b2b-date-picker-input-wrapper--focused{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px;border-radius:var(--b2b-size-7) var(--b2b-size-7) 0 0}.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)}.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%;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)}.b2b-date-picker-input-wrapper .b2b-date-picker-input--error{background-color:var(--b2b-color-error-50)}b2b-input-label{display:block;margin-bottom:var(--b2b-size-5);color:var(--b2b-color-black-100)}.b2b-date-picker-selected-date{flex:1;align-self:center;font-size:var(--b2b-size-35)}.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)}.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)}.b2b-date-picker-hint--error{color:var(--b2b-color-error-100)}.b2b-date-picker-body{position:absolute;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);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:101}.b2b-date-picker-body--hidden{display:none}.b2b-icons{display:flex;margin-top:var(--b2b-size-5);align-items:center}.b2b-close-icon{display:block}.b2b-event-icon{display:block}";
 const B2bDatePickerStyle0 = datePickerCss;
 
 const B2bDatePicker = class {
@@ -148,7 +148,7 @@ const B2bDatePicker = class {
         if (this.disableDatesFrom && this.disableDatesFrom !== '') {
             this.normalizedDisableDatesFrom = this.normalizeDisableDatesUntilAndFrom(this.disableDatesFrom);
         }
-        if (this.preSelectedDate) {
+        if (this.preSelectedDate && this.preSelectedDate !== '') {
             const [day, month, year] = this.preSelectedDate.split('.').map(Number);
             this.selectedDay = day;
             this.selectedMonth = month - 1;
@@ -164,7 +164,12 @@ const B2bDatePicker = class {
             this.userInputDate = '';
         }
     }
-    handleEscapePress() {
+    handleEscapePress(event) {
+        if (this.datePickerView !== "Days" /* DatePickerView.Days */) {
+            this.datePickerView = "Days" /* DatePickerView.Days */;
+            event.preventDefault();
+            return;
+        }
         this.showDatePicker = false;
     }
     handleDateSelection(event) {
@@ -395,10 +400,10 @@ const B2bDatePicker = class {
                 : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), index.h("div", { class: {
                 'b2b-date-picker-body': true,
                 'b2b-date-picker-body--hidden': !this.showDatePicker,
-            } }, this.datePickerView === "Days" /* DatePickerView.Days */ && (index.h("div", null, index.h("b2b-date-picker-header", { language: this.language, selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), index.h("b2b-date-picker-days-header", { language: this.language }), index.h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates, disableDates: this.datesToBeDisabled, disableDatesUntil: this.normalizedDisableDatesUntil, disableEvery: this.normalizedDisableEvery, disableDatesFrom: this.normalizedDisableDatesFrom }))), this.datePickerView === "Months" /* DatePickerView.Months */ && (index.h("b2b-date-picker-months", { language: this.language, selectedMonth: this.selectedMonth })), this.datePickerView === "Years" /* 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: {
+            } }, this.datePickerView === "Days" /* DatePickerView.Days */ && (index.h("div", null, index.h("b2b-date-picker-header", { language: this.language, selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), index.h("b2b-date-picker-days-header", { language: this.language }), index.h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates, disableDates: this.datesToBeDisabled, disableDatesUntil: this.normalizedDisableDatesUntil, disableEvery: this.normalizedDisableEvery, disableDatesFrom: this.normalizedDisableDatesFrom }))), this.datePickerView === "Months" /* DatePickerView.Months */ && (index.h("b2b-date-picker-months", { language: this.language, selectedMonth: this.selectedMonth })), this.datePickerView === "Years" /* DatePickerView.Years */ && (index.h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (index.h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), index.h("span", { class: {
                 'b2b-date-picker-hint': true,
                 'b2b-date-picker-hint--error': this.invalid,
-            } }, this.invalid ? this.errorMessage : this.showHint && this.hint))));
+            } }, this.invalid ? this.errorMessage : this.showHint && this.hint)));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {