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

package/dist/collection/components/date-range-picker/date-range-picker-days.css

@@ -0,0 +1,280 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+: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; /** 1px */
+  --b2b-size-5: 0.125rem; /** 2px */
+  --b2b-size-7: 0.1875rem; /** 3px */
+  --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
+  --b2b-size-15: 0.375rem; /** 6px */
+  --b2b-size-20: 0.5rem; /** 8px */
+  --b2b-size-25: 0.625rem; /** 10px */
+  --b2b-size-30: 0.75rem; /** 12px */
+  --b2b-size-35: 0.875rem; /** 14px */
+  --b2b-size-40: 1rem; /** 16px */
+  --b2b-size-45: 1.125rem; /** 18px */
+  --b2b-size-50: 1.25rem; /** 20px */
+  --b2b-size-53: 1.3125rem; /** 21px */
+  --b2b-size-55: 1.375rem; /** 22px */
+  --b2b-size-60: 1.5rem; /** 24px */
+  --b2b-size-70: 1.75rem; /** 28px */
+  --b2b-size-80: 2rem; /** 32px */
+  --b2b-size-90: 2.25rem; /** 36px */
+  --b2b-size-100: 2.5rem; /** 40px */
+  --b2b-size-120: 3rem; /** 48px */
+  --b2b-size-140: 3.5rem; /** 56px */
+  --b2b-size-150: 3.75rem; /** 60px */
+  --b2b-size-160: 4rem; /** 64px */
+  --b2b-size-200: 5rem; /** 80px */
+  --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); /** Will use 18px until design facelift */
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /** Will use 21px until design facelift */
+  --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);
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+: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; /** 1px */
+  --b2b-size-5: 0.125rem; /** 2px */
+  --b2b-size-7: 0.1875rem; /** 3px */
+  --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
+  --b2b-size-15: 0.375rem; /** 6px */
+  --b2b-size-20: 0.5rem; /** 8px */
+  --b2b-size-25: 0.625rem; /** 10px */
+  --b2b-size-30: 0.75rem; /** 12px */
+  --b2b-size-35: 0.875rem; /** 14px */
+  --b2b-size-40: 1rem; /** 16px */
+  --b2b-size-45: 1.125rem; /** 18px */
+  --b2b-size-50: 1.25rem; /** 20px */
+  --b2b-size-53: 1.3125rem; /** 21px */
+  --b2b-size-55: 1.375rem; /** 22px */
+  --b2b-size-60: 1.5rem; /** 24px */
+  --b2b-size-70: 1.75rem; /** 28px */
+  --b2b-size-80: 2rem; /** 32px */
+  --b2b-size-90: 2.25rem; /** 36px */
+  --b2b-size-100: 2.5rem; /** 40px */
+  --b2b-size-120: 3rem; /** 48px */
+  --b2b-size-140: 3.5rem; /** 56px */
+  --b2b-size-150: 3.75rem; /** 60px */
+  --b2b-size-160: 4rem; /** 64px */
+  --b2b-size-200: 5rem; /** 80px */
+  --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-range-picker-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr); /* Display days in a grid */
+  padding: 0 var(--b2b-size-40) 0 var(--b2b-size-40);
+}
+.b2b-date-range-picker-days .b2b-date-range-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);
+  cursor: pointer;
+}
+.b2b-date-range-picker-days .b2b-date-range-picker-day--disabled {
+  color: var(--b2b-color-grey-200);
+  pointer-events: none;
+}
+.b2b-date-range-picker-days .b2b-date-range-picker-day--today {
+  border: 1px solid var(--b2b-color-black-50);
+  box-sizing: border-box;
+}
+.b2b-date-range-picker-days .b2b-date-range-picker-day--selected {
+  background-color: var(--b2b-color-black-100);
+  color: var(--b2b-color-white-100);
+  width: 38px;
+  margin-left: -1px;
+}
+.b2b-date-range-picker-days .b2b-date-range-picker-day--start {
+  border-radius: 5px 0 0 5px;
+}
+.b2b-date-range-picker-days .b2b-date-range-picker-day--end {
+  border-radius: 0 5px 5px 0;
+}
+.b2b-date-range-picker-days .b2b-date-range-picker-day--range {
+  background-color: var(--b2b-color-grey-200);
+  color: var(--b2b-color-black-100);
+  width: 38px;
+  border-radius: 0;
+  margin-left: -1px;
+}
+.b2b-date-range-picker-days .b2b-date-range-picker-day--preview.b2b-date-range-picker-day--range, .b2b-date-range-picker-days .b2b-date-range-picker-day:hover, .b2b-date-range-picker-days .b2b-date-range-picker-day:focus {
+  background-color: var(--b2b-color-hover-default);
+  color: var(--b2b-color-black-100);
+  z-index: 102;
+}

package/dist/collection/components/date-range-picker/date-range-picker-days.e2e.js

@@ -0,0 +1,19 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Date-Range-Picker-Days', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it('should emit the clicked date', async () => {
+        await page.setContent(`<b2b-date-range-picker-days viewed-date="01.01.2025"></b2b-date-range-picker-days>`);
+        await page.waitForChanges();
+        const dateSelectedSpy = await page.spyOnEvent('b2b-date-selected');
+        const dayComponent = await page.find('b2b-date-range-picker-days >>> .b2b-date-range-picker-day');
+        await dayComponent.click();
+        page.waitForChanges();
+        expect(dateSelectedSpy).toHaveReceivedEvent();
+        expect(dateSelectedSpy).toHaveReceivedEventDetail({
+            selectedDate: new Date(2025, 0, 1).toISOString(), // Must be a string due to node-to-browser "serialization"
+        });
+    });
+});

package/dist/collection/components/date-range-picker/date-range-picker-days.js

@@ -0,0 +1,349 @@
+import { h, Host, } from "@stencil/core";
+import { dateAsNumber, splitDate } from "./date-range-picker-utils";
+const keys = {
+    ARROW_UP: 'ArrowUp',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_LEFT: 'ArrowLeft',
+    ESC: 'Escape',
+    ENTER: 'Enter',
+};
+export class B2bDatePickerDays {
+    constructor() {
+        this.getAllDates = () => {
+            return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-range-picker-day'));
+        };
+        this.focusCurrentDate = (date) => {
+            const dates = this.getAllDates();
+            dates.forEach(element => {
+                if (date.className.includes('b2b-date-range-picker-day--disabled')) {
+                    return;
+                }
+                element.setAttribute('tabindex', element === date ? '0' : '-1');
+            });
+            if (!date.className.includes('b2b-date-range-picker-day--disabled')) {
+                date.focus();
+            }
+        };
+        this.renderDatePickerDays = () => {
+            const [year, month] = splitDate(this.viewedDate);
+            const day = this.viewedDay;
+            const currentNumber = dateAsNumber([year, month, day]);
+            const todayNumber = dateAsNumber(new Date());
+            const startNumber = dateAsNumber(this.firstDate);
+            const endNumber = dateAsNumber(this.secondDate);
+            let totalDaysInMonth = new Date(year, month - 1 + 1, // Next month
+            0).getDate();
+            let days = [];
+            /** Populate the days before the first day of the month with empty divs. */
+            let dayOfWeekOffset = (new Date(year, month - 1, 1).getDay() + 6) % 7; // +6 to make Monday the first day of the week
+            for (let i = 0; i < dayOfWeekOffset; i++) {
+                days.push(h("div", null));
+            }
+            /** Populate days array with day numbers. */
+            for (let i = 1; i <= totalDaysInMonth; i++) {
+                let givenDate = [year, month, i];
+                const givenDateNumber = dateAsNumber(givenDate);
+                const disabled = this.disableDates(i);
+                days.push(h("div", { class: {
+                        'b2b-date-range-picker-day': true,
+                        'b2b-date-range-picker-day--disabled': disabled,
+                        'b2b-date-range-picker-day--today': givenDateNumber === todayNumber,
+                        'b2b-date-range-picker-day--selected': givenDateNumber === startNumber || givenDateNumber === endNumber,
+                        'b2b-date-range-picker-day--start': givenDateNumber === startNumber &&
+                            endNumber != null &&
+                            startNumber !== endNumber,
+                        'b2b-date-range-picker-day--end': givenDateNumber === endNumber && startNumber !== endNumber,
+                        'b2b-date-range-picker-day--preview': endNumber == null || this.preview,
+                        'b2b-date-range-picker-day--range': startNumber != null &&
+                            ((startNumber < givenDateNumber &&
+                                givenDateNumber < (endNumber !== null && endNumber !== void 0 ? endNumber : currentNumber)) ||
+                                (startNumber > givenDateNumber &&
+                                    givenDateNumber > (endNumber !== null && endNumber !== void 0 ? endNumber : currentNumber))),
+                    }, onClick: () => {
+                        if (!disabled) {
+                            this.b2bDateSelected.emit({
+                                selectedDate: new Date(year, month - 1, i),
+                            });
+                        }
+                    }, onMouseEnter: (event) => {
+                        this.viewedDay = i;
+                        event.target.focus();
+                        event.preventDefault();
+                    }, tabindex: givenDateNumber === currentNumber ? 0 : -1, role: "gridcell", "aria-label": `Date ${i} ${month} ${year}` }, i));
+            }
+            return days;
+        };
+        this.viewedDate = new Date();
+        this.firstDate = undefined;
+        this.secondDate = undefined;
+        this.disableDates = () => false;
+        this.preview = false;
+        this.viewedDay = 0;
+    }
+    // #endregion
+    // #region Logic
+    handleKeyDown(event) {
+        event.preventDefault();
+        const [year, month] = splitDate(this.viewedDate);
+        let day = this.viewedDay;
+        switch (event.key) {
+            case keys.ARROW_LEFT:
+                day -= 1;
+                break;
+            case keys.ARROW_RIGHT:
+                day += 1;
+                break;
+            case keys.ARROW_UP:
+                day -= 7;
+                break;
+            case keys.ARROW_DOWN:
+                day += 7;
+                break;
+            case keys.ENTER:
+                if (!this.disableDates(day)) {
+                    this.b2bDateSelected.emit({
+                        selectedDate: new Date(year, month - 1, day),
+                    });
+                }
+                return;
+            case keys.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
+            default:
+                return;
+        }
+        const dates = this.getAllDates();
+        if (day < 1) {
+            day = dates.length;
+        }
+        if (day > dates.length) {
+            day = 1;
+        }
+        if (this.disableDates(day)) {
+            return;
+        }
+        this.viewedDay = day;
+        this.focusCurrentDate(dates[day - 1]);
+    }
+    setFocusOnSelectedDayOrFirstDay() {
+        var _a;
+        const dates = this.getAllDates();
+        if (dates.length > 0) {
+            const [currentYear, currentMonth] = splitDate(this.viewedDate);
+            const [selectedYear, selectedMonth, selectedDay] = splitDate((_a = this.firstDate) !== null && _a !== void 0 ? _a : new Date());
+            if (currentYear == selectedYear &&
+                currentMonth == selectedMonth &&
+                this.viewedDay === selectedDay) {
+                this.focusCurrentDate(dates[this.viewedDay - 1]);
+            }
+            else {
+                this.focusCurrentDate(dates[0]);
+            }
+        }
+    }
+    // #endregion
+    // #region Component-Hooks
+    componentWillLoad() {
+        let [, , day] = splitDate(this.viewedDate);
+        this.viewedDay = day;
+    }
+    componentDidLoad() {
+        this.setFocusOnSelectedDayOrFirstDay();
+    }
+    render() {
+        return (h(Host, { key: '15def7fc64e3fc1793ab517d3f1a515462d68bdb' }, h("div", { key: 'f072b82124f611ae2e60a43eb7550fa008e52234', class: "b2b-date-range-picker-days" }, this.renderDatePickerDays())));
+    }
+    static get is() { return "b2b-date-range-picker-days"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-range-picker-days.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-range-picker-days.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "viewedDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Dateish",
+                    "resolved": "Date | readonly [number, number, number] | string",
+                    "references": {
+                        "Dateish": {
+                            "location": "import",
+                            "path": "./date-range-picker-utils",
+                            "id": "src/components/date-range-picker/date-range-picker-utils.ts::Dateish"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently shown date (year+month)."
+                },
+                "attribute": "viewed-date",
+                "reflect": false,
+                "defaultValue": "new Date()"
+            },
+            "firstDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Dateish",
+                    "resolved": "Date | readonly [number, number, number] | string",
+                    "references": {
+                        "Dateish": {
+                            "location": "import",
+                            "path": "./date-range-picker-utils",
+                            "id": "src/components/date-range-picker/date-range-picker-utils.ts::Dateish"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The first date of the selection.\nThis may be absent if no dates have been selected yet.\nThis is always smaller/earlier than the second date."
+                },
+                "attribute": "first-date",
+                "reflect": false
+            },
+            "secondDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Dateish",
+                    "resolved": "Date | readonly [number, number, number] | string",
+                    "references": {
+                        "Dateish": {
+                            "location": "import",
+                            "path": "./date-range-picker-utils",
+                            "id": "src/components/date-range-picker/date-range-picker-utils.ts::Dateish"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The second date of the selection.\nThis may be absent if none or only one date has been selected yet.\nThis is always bigger/later than the first date."
+                },
+                "attribute": "second-date",
+                "reflect": false
+            },
+            "disableDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(day: number) => boolean",
+                    "resolved": "(day: number) => boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "day The day of the month to check (1-indexed)."
+                        }, {
+                            "name": "returns",
+                            "text": "True, if the day should be disabled. False otherwise."
+                        }, {
+                            "name": "default",
+                            "text": "(day) => false"
+                        }],
+                    "text": "Function used to determine, whether a day should be disabled e.g. because it is in the past.\nThis is only used for the start and end dates, it is valid to have a disabled day in the range of start and end date."
+                },
+                "defaultValue": "() => false"
+            },
+            "preview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the shown values are a preview and not the actual values (force-hover state)."
+                },
+                "attribute": "preview",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "viewedDay": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bDatePickerEscape",
+                "name": "b2b-date-picker-escape",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on escape press."
+                },
+                "complexType": {
+                    "original": "EscapePressed",
+                    "resolved": "EscapePressed<any>",
+                    "references": {
+                        "EscapePressed": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::EscapePressed"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bDateSelected",
+                "name": "b2b-date-selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on selecting date."
+                },
+                "complexType": {
+                    "original": "DateSelectedEventDetail",
+                    "resolved": "DateSelectedEventDetail",
+                    "references": {
+                        "DateSelectedEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::DateSelectedEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}