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

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

@@ -0,0 +1,201 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-668808fd.js');
+const dateRangePickerUtils = require('./date-range-picker-utils-f4b4f5bf.js');
+
+const dateRangePickerDaysCss = ":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-range-picker-days{display:grid;grid-template-columns:repeat(7, 1fr);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}";
+const B2bDateRangePickerDaysStyle0 = dateRangePickerDaysCss;
+
+const keys = {
+    ARROW_UP: 'ArrowUp',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_LEFT: 'ArrowLeft',
+    ESC: 'Escape',
+    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.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] = dateRangePickerUtils.splitDate(this.viewedDate);
+            const day = this.viewedDay;
+            const currentNumber = dateRangePickerUtils.dateAsNumber([year, month, day]);
+            const todayNumber = dateRangePickerUtils.dateAsNumber(new Date());
+            const startNumber = dateRangePickerUtils.dateAsNumber(this.firstDate);
+            const endNumber = dateRangePickerUtils.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(index.h("div", null));
+            }
+            /** Populate days array with day numbers. */
+            for (let i = 1; i <= totalDaysInMonth; i++) {
+                let givenDate = [year, month, i];
+                const givenDateNumber = dateRangePickerUtils.dateAsNumber(givenDate);
+                const disabled = this.disableDates(i);
+                days.push(index.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] = dateRangePickerUtils.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] = dateRangePickerUtils.splitDate(this.viewedDate);
+            const [selectedYear, selectedMonth, selectedDay] = dateRangePickerUtils.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] = dateRangePickerUtils.splitDate(this.viewedDate);
+        this.viewedDay = day;
+    }
+    componentDidLoad() {
+        this.setFocusOnSelectedDayOrFirstDay();
+    }
+    render() {
+        return (index.h(index.Host, { key: '15def7fc64e3fc1793ab517d3f1a515462d68bdb' }, index.h("div", { key: 'f072b82124f611ae2e60a43eb7550fa008e52234', class: "b2b-date-range-picker-days" }, this.renderDatePickerDays())));
+    }
+    get host() { return index.getElement(this); }
+};
+B2bDatePickerDays.style = B2bDateRangePickerDaysStyle0;
+
+const paragraphCss = ":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-paragraph{font-family:var(--b2b-font-family-default);margin:0 0 var(--b2b-size-30)}.b2b-paragraph--size-50{font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75)}.b2b-paragraph--size-100{font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100)}.b2b-paragraph--weight-normal{font-weight:var(--b2b-font-weight-normal)}.b2b-paragraph--weight-bold{font-weight:var(--b2b-font-weight-bold)}.b2b-paragraph--align-left{text-align:left}.b2b-paragraph--align-right{text-align:right}.b2b-paragraph--align-center{text-align:center}.b2b-paragraph--variant-black-100{color:var(--b2b-color-copy-default)}.b2b-paragraph--variant-grey-400{color:var(--b2b-color-grey-400)}.b2b-paragraph--no-margin{margin:0}";
+const B2bParagraphStyle0 = paragraphCss;
+
+const ParagraphComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.weight = 'normal';
+        this.size = '100';
+        this.align = 'left';
+        this.margin = true;
+        this.variant = 'black-100';
+        this.display = 'block';
+    }
+    render() {
+        return (index.h("p", { key: '9372543c8a22d33c6ed0c53e3e8b277e0ce78883', style: {
+                display: this.display,
+            }, class: {
+                'b2b-paragraph': true,
+                ['b2b-paragraph--size-' + this.size]: true,
+                ['b2b-paragraph--weight-' + this.weight]: true,
+                ['b2b-paragraph--align-' + this.align]: true,
+                ['b2b-paragraph--no-margin']: !this.margin,
+                ['b2b-paragraph--variant-' + this.variant]: true,
+            } }, index.h("slot", { key: 'ca3169be5b0239e40911fa2071c744404a6bbbae' })));
+    }
+};
+ParagraphComponent.style = B2bParagraphStyle0;
+
+exports.b2b_date_range_picker_days = B2bDatePickerDays;
+exports.b2b_paragraph = ParagraphComponent;

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

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-668808fd.js');
+const dateRangePickerUtils = require('./date-range-picker-utils-f4b4f5bf.js');
+
+const dateRangePickerCss = ":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-range-picker{position:relative}.b2b-date-range-picker--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100}.b2b-date-range-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:center;cursor:text;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-range-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-range-picker-input-wrapper--open{border-radius:var(--b2b-size-7) var(--b2b-size-7) 0 0}.b2b-date-range-picker-input-wrapper b2b-paragraph{width:100%;align-content:center}.b2b-date-range-picker-input-wrapper .b2b-icons{display:flex;width:48px;justify-content:end}.b2b-date-range-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-range-picker-hint--error{color:var(--b2b-color-error-100)}.b2b-date-range-picker-body{position:absolute;display:flex;flex-direction:row;background-color:var(--b2b-color-white-100);z-index:101}.b2b-date-range-picker-body--hidden{display:none}.b2b-date-range-picker-body--calendar{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);padding-bottom:var(--b2b-size-40);width:300px;box-sizing:border-box}.b2b-date-range-picker-body--presets{padding:var(--b2b-size-40);border:var(--b2b-size-1) solid var(--b2b-color-black-100);margin-top:-1px;border-left:none;display:flex;flex-direction:column;gap:4px}.b2b-date-range-picker-body--presets b2b-paragraph{cursor:pointer;width:max-content;border-radius:var(--b2b-size-7);padding:var(--b2b-size-5) var(--b2b-size-padding-50)}.b2b-date-range-picker-body--presets b2b-paragraph:hover{background-color:var(--b2b-color-hover-default);--b2b-color-copy-default:var(--b2b-color-black-100);color:var(--b2b-color-copy-default);}.b2b-date-range-picker-body--presets--selected{background-color:var(--b2b-color-black-100);--b2b-color-copy-default:var(--b2b-color-white-100);color:var(--b2b-color-copy-default);}";
+const B2bDateRangePickerStyle0 = dateRangePickerCss;
+
+const B2bDateRangePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.b2bSelected = index.createEvent(this, "b2b-selected", 7);
+        this.b2bClear = index.createEvent(this, "b2b-clear", 7);
+        this.label = 'Zeitraum auswählen';
+        this.required = false;
+        this.dateRange = undefined;
+        this.disableDates = () => false;
+        this.presets = {};
+        this.invalid = false;
+        this.hint = undefined;
+        this.error = undefined;
+        this.language = 'de';
+        this.open = false;
+        this.tempDate = undefined;
+        this.internalDateRange = undefined;
+        this.highlightDateRange = undefined;
+        this.viewMode = "Days" /* DatePickerView.Days */;
+        this.viewedYear = undefined;
+        this.viewedMonth = undefined;
+        this.viewedDay = undefined;
+    }
+    updateDateRange(value) {
+        this.internalDateRange = dateRangePickerUtils.toDateRange(value);
+        this.resetViewedDate();
+    }
+    // #endregion
+    // #region Logic
+    handleDatePickerViewChanged(event) {
+        this.viewMode = event.detail.value;
+    }
+    previousMonth() {
+        if (this.viewedMonth === 0) {
+            this.viewedMonth = 11;
+            this.viewedYear -= 1;
+        }
+        else {
+            this.viewedMonth -= 1;
+        }
+    }
+    nextMonth() {
+        if (this.viewedMonth === 11) {
+            this.viewedMonth = 0;
+            this.viewedYear += 1;
+        }
+        else {
+            this.viewedMonth += 1;
+        }
+    }
+    handleMonthSelected(event) {
+        this.viewedMonth = event.detail.value + 1;
+        this.viewMode = "Days" /* DatePickerView.Days */;
+    }
+    handleYearSelected(event) {
+        this.viewedYear = event.detail.value;
+        this.viewMode = "Days" /* DatePickerView.Days */;
+    }
+    handleEscapePress() {
+        this.toggleOpen(false);
+    }
+    handleDateSelected(event) {
+        event.preventDefault();
+        this.selectDate(event.detail.selectedDate);
+    }
+    selectDate(selected) {
+        if (this.tempDate == null) {
+            this.tempDate = dateRangePickerUtils.splitDate(selected);
+        }
+        else if (dateRangePickerUtils.dateAsNumber(selected) >= dateRangePickerUtils.dateAsNumber(this.tempDate)) {
+            this.setDate([dateRangePickerUtils.toDate(this.tempDate), dateRangePickerUtils.toDate(selected)]);
+        }
+        else {
+            this.setDate([dateRangePickerUtils.toDate(selected), dateRangePickerUtils.toDate(this.tempDate)]);
+        }
+    }
+    setDate(selected) {
+        this.internalDateRange = selected;
+        this.toggleOpen(false);
+        if (selected == null) {
+            this.b2bClear.emit();
+        }
+        else {
+            this.b2bSelected.emit({ selected });
+        }
+    }
+    toggleOpen(open = !this.open) {
+        this.open = open;
+        if (!open) {
+            this.tempDate = undefined;
+            this.resetViewedDate();
+        }
+    }
+    resetViewedDate() {
+        var _a;
+        const startDate = (_a = this.internalDateRange) === null || _a === void 0 ? void 0 : _a[0];
+        if (startDate == null) {
+            const now = new Date();
+            this.viewedYear = now.getFullYear();
+            this.viewedMonth = now.getMonth() + 1;
+            this.viewedDay = now.getDate();
+        }
+        else {
+            const [year, month, day] = dateRangePickerUtils.splitDate(startDate);
+            this.viewedYear = year;
+            this.viewedMonth = month;
+            this.viewedDay = day;
+        }
+        this.viewMode = "Days" /* DatePickerView.Days */;
+    }
+    // #endregion
+    // #region Component-Hooks
+    componentWillLoad() {
+        this.internalDateRange = dateRangePickerUtils.toDateRange(this.dateRange);
+        this.resetViewedDate();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (index.h(index.Host, { key: '36a6fd2d45a9019e57dda728f47961cf54bf2535' }, index.h("div", { key: '26c3eca4579e092b68ddb76fdb72de3fb3e1d1a0', class: "b2b-date-range-picker" }, index.h("b2b-input-label", { key: 'c6324a8b0ec07dc719e44ae35ce6987a46e012e3', required: this.required }, this.label), index.h("div", { key: '3f27ec4c6054966866d1184e80c0b1a9b5c50178', class: {
+                'b2b-date-range-picker-input-wrapper': true,
+                'b2b-date-range-picker-input-wrapper--error': this.invalid,
+                'b2b-date-range-picker-input-wrapper--open': this.open,
+            }, onClick: () => this.toggleOpen() }, index.h("b2b-paragraph", { key: '23690e8fc98fd82699dbc1319fa26308af7ce23f', margin: false }, dateRangePickerUtils.toDateRangeString(this.internalDateRange, '')), index.h("div", { key: '6665672a212e59d228aaf56f53ab03b27df857ea', class: "b2b-icons" }, this.internalDateRange && (index.h("div", { tabIndex: 0, onClick: () => this.setDate(undefined), onKeyDown: (event) => {
+                if (event.key === 'Enter') {
+                    this.setDate(undefined);
+                }
+            } }, index.h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), index.h("div", { key: 'c87f07fb2e73d9c250c26a92b77d4802f4f0a72f', tabindex: 0, onClick: () => this.toggleOpen(), onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.toggleOpen();
+                }
+            }, class: "b2b-event-icon" }, index.h("b2b-icon-100", { key: 'cb2bdceb7a80747fd3e8efcf294189a7e7f0b6fb', "aria-label": this.open ? 'close date picker' : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), index.h("div", { key: '84ba8c35eccb089f50a24134bcb5b9e447bdaa95', class: {
+                'b2b-date-range-picker-body': true,
+                'b2b-date-range-picker-body--hidden': !this.open,
+            } }, index.h("div", { key: '154bc92126a558f33be046de4a1e9cd0a2b3bfdb', class: "b2b-date-range-picker-body--calendar" }, this.viewMode === "Days" /* DatePickerView.Days */ && (index.h("div", null, index.h("b2b-date-picker-header", { language: this.language, selectedMonth: this.viewedMonth - 1, selectedYear: this.viewedYear }), index.h("b2b-date-picker-days-header", { language: this.language }), index.h("b2b-date-range-picker-days", { viewedDate: [this.viewedYear, this.viewedMonth, this.viewedDay], firstDate: (_c = (_b = (_a = this.highlightDateRange) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : this.tempDate) !== null && _c !== void 0 ? _c : (_d = this.internalDateRange) === null || _d === void 0 ? void 0 : _d[0], secondDate: (_f = (_e = this.highlightDateRange) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (this.tempDate == null
+                ? (_g = this.internalDateRange) === null || _g === void 0 ? void 0 : _g[1]
+                : undefined), disableDates: day => this.disableDates(dateRangePickerUtils.toDate([this.viewedYear, this.viewedMonth, day])), preview: this.highlightDateRange != null }))), this.viewMode === "Months" /* DatePickerView.Months */ && (index.h("b2b-date-picker-months", { language: this.language, selectedMonth: this.viewedMonth - 1 })), this.viewMode === "Years" /* DatePickerView.Years */ && (index.h("b2b-date-picker-years", { selectedYear: this.viewedYear }))), Object.keys(this.presets).length > 0 && (index.h("div", { class: "b2b-date-range-picker-body--presets" }, Object.entries(this.presets).map(([text, value]) => (index.h("b2b-paragraph", { class: {
+                'b2b-date-range-picker-body--presets--selected': dateRangePickerUtils.isDateRangeEqual(this.internalDateRange, value),
+            }, margin: false, onClick: () => this.setDate(value), onMouseOver: () => (this.highlightDateRange = value), onMouseOut: () => (this.highlightDateRange = undefined) }, text)))))), this.open && (index.h("div", { class: "b2b-date-range-picker--backdrop", onClick: () => this.toggleOpen(false) })), (this.error != null || this.hint != null) && (index.h("span", { class: {
+                'b2b-date-range-picker-hint': true,
+                'b2b-date-range-picker-hint--error': this.invalid,
+            } }, this.invalid ? this.error : this.hint))));
+    }
+    static get watchers() { return {
+        "dateRange": ["updateDateRange"]
+    }; }
+};
+B2bDateRangePicker.style = B2bDateRangePickerStyle0;
+
+exports.b2b_date_range_picker = B2bDateRangePicker;

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

@@ -13,7 +13,6 @@ const DropdownComponent = class {
         this.b2bChange = index.createEvent(this, "b2b-change", 7);
         this.b2bFocus = index.createEvent(this, "b2b-focus", 7);
         this.b2bBlur = index.createEvent(this, "b2b-blur", 7);
-        this.truncatedText = '';
         this.onClickOutside = (ev) => {
             if (!this.hostElement.contains(ev.target))
                 this.isOpen = false;
@@ -35,7 +34,7 @@ const DropdownComponent = class {
             const target = event.target;
             const value = target.getAttribute('data-value');
             const label = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim();
-            if (value) {
+            if (value != null) {
                 this.selectedValue = value;
                 this.selectedText = label || '';
                 this.b2bChange.emit(value);
@@ -45,16 +44,22 @@ const DropdownComponent = class {
             }
         };
         this.updateTruncatedText = () => {
-            if (!this.selectEl)
-                return;
             const rawText = this.selectedText || this.placeholder;
+            if (this.selectEl == null) {
+                this.truncatedText = rawText;
+                return;
+            }
             const style = window.getComputedStyle(this.selectEl);
             const canvas = document.createElement('canvas');
             const ctx = canvas.getContext('2d');
-            if (!ctx)
+            if (ctx == null)
                 return;
             ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
             let baseWidth = this.selectEl.clientWidth;
+            if (baseWidth == null) {
+                this.truncatedText = rawText;
+                return;
+            }
             const parentContainer = this.selectEl.parentElement;
             if (parentContainer && parentContainer.clientWidth > baseWidth) {
                 baseWidth = parentContainer.clientWidth;
@@ -89,24 +94,18 @@ const DropdownComponent = class {
         this.selectedValue = '';
         this.selectedText = '';
         this.options = [];
+        this.truncatedText = '';
     }
     /** Method to programmatically clear selection of the dropdown. */
     async clearSelection() {
-        this.selectedValue = this.placeholderValue || '';
-        this.selectedText = this.placeholder || 'Select an option...';
+        this.selectedValue = this.placeholderValue;
+        this.selectedText = '';
         this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
         this.isOpen = false;
         this.updateTruncatedText();
     }
     componentWillLoad() {
-        this.selectedValue = this.placeholderValue || '';
-        this.selectedText = '';
-    }
-    componentDidLoad() {
         this.initializeOptions();
-        this.updateTruncatedText();
-        document.addEventListener('click', this.onClickOutside);
-        window.addEventListener('resize', this.updateTruncatedText);
         if (typeof MutationObserver !== 'undefined') {
             this.mutationObserver = new MutationObserver(() => {
                 this.initializeOptions();
@@ -114,21 +113,28 @@ const DropdownComponent = class {
             this.mutationObserver.observe(this.hostElement, {
                 childList: true,
                 subtree: true,
+                attributes: true,
+                attributeFilter: ['value', 'selected', 'disabled'],
             });
         }
     }
+    componentDidLoad() {
+        this.updateTruncatedText(); // `componentWillLoad()` is unable to truncate it to the proper size
+        document.addEventListener('click', this.onClickOutside);
+        window.addEventListener('resize', this.updateTruncatedText);
+    }
     disconnectedCallback() {
+        var _a;
         document.removeEventListener('click', this.onClickOutside);
         window.removeEventListener('resize', this.updateTruncatedText);
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     watchDropdownState() {
         if (this.isOpen)
             this.closeOtherDropdowns();
     }
     initializeOptions() {
+        var _a, _b;
         const nativeOptions = Array.from(this.hostElement.querySelectorAll('option'));
         this.options = nativeOptions.map(opt => {
             var _a;
@@ -140,10 +146,8 @@ const DropdownComponent = class {
             });
         });
         const selected = this.options.find(o => o.selected);
-        if (selected) {
-            this.selectedValue = selected.value;
-            this.selectedText = selected.label;
-        }
+        this.selectedValue = (_a = selected === null || selected === void 0 ? void 0 : selected.value) !== null && _a !== void 0 ? _a : this.placeholderValue;
+        this.selectedText = (_b = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _b !== void 0 ? _b : '';
         this.updateTruncatedText();
     }
     closeOtherDropdowns() {
@@ -157,15 +161,15 @@ const DropdownComponent = class {
         const hasError = this.invalid && !this.disabled && !this.groupDisabled;
         const showHint = this.hint && !hasError;
         const showError = this.error && hasError;
-        return (index.h(index.Host, { key: 'a58a7ec156677962cc7a3d7ca421d4c475d8cd77', class: {
+        return (index.h(index.Host, { key: 'e719de6e666225d6b807810570bd32d4906a2647', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled || this.groupDisabled,
-            } }, this.label && (index.h("b2b-input-label", { id: this.name, required: this.required }, this.label)), index.h("div", { key: '27d151cfb88bbfb1e112e276a8f6cc668f178a36', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, index.h("div", { key: 'cdce04cf08cb0256dab58d22c4a41430aa054fd1', class: {
+            } }, this.label && (index.h("b2b-input-label", { id: this.name, required: this.required }, this.label)), index.h("div", { key: '690c9a335c7171312fb9de9cf6894af979eaa471', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, index.h("div", { key: 'fcbbc73636118d451f0ec5aa5ce1cd2baa0dec9b', class: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,
-            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.selectedText ? this.truncatedText : this.placeholder), this.isOpen && (index.h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (index.h("div", { key: option.value, class: {
+            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.truncatedText), this.isOpen && (index.h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (index.h("div", { key: option.value, class: {
                 'b2b-dropdown__option': true,
                 'b2b-dropdown__option--selected': option.selected,
                 'b2b-dropdown__option--disabled': option.disabled,

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

@@ -26,7 +26,7 @@ const FlyoutMenuOptionComponent = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '6203f835788db06223c00d348c659a905710af8f', class: {
+        return (index.h(index.Host, { key: 'd9f5fada05c44e475d2e645d51c3ba268844a8e3', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

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

@@ -153,12 +153,12 @@ const FlyoutMenuComponent = class {
         options[index].focus();
     }
     render() {
-        return (index.h(index.Host, { key: '5d9a147f1998a47c761af924c90da4b1f8c6ded1' }, index.h("div", { key: '1ae6d3742d1614e8a259b0a53f7b944d19c441db', class: {
+        return (index.h(index.Host, { key: '5e1d292b710d19a4bf5ece7047d4c5288b24f9b5' }, index.h("div", { key: 'd7d781fa8dfdd9f4bdecad06209400610a7f37bf', class: {
                 'b2b-flyout-menu': true,
-            } }, index.h("div", { key: '7cd8b06ad714085def1431404dea0aca959eb96d', class: "b2b-flyout-menu__trigger" }, index.h("slot", { key: 'c0295db03bf2d77ae8ecea387c41cc2fb69ea0e1', name: "trigger" })), index.h("div", { key: '8eabaac43b7e03e0116e4079f1c27cd7bde14929', onFocusout: this.blurMenu, class: {
+            } }, index.h("div", { key: '124c0ee9f83a252aabac1f09a11932ffde4b6bf1', class: "b2b-flyout-menu__trigger" }, index.h("slot", { key: '588027fd799f42d6b095ad82247cc6974424fc23', name: "trigger" })), index.h("div", { key: 'baa37193ac12427e868c6742a526516f91e37a02', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, index.h("div", { key: '1646d526780846355dfd56856aa95bc0c4b43460', class: "b2b-flyout-menu__arrow" }), index.h("slot", { key: 'bae26a650e0e506ddc5e9cd791db3767056af9f4', name: "option" })))));
+            } }, index.h("div", { key: '043ff6439dca6d4fccaa29f4bda5c52645154196', class: "b2b-flyout-menu__arrow" }), index.h("slot", { key: 'e95bcf37c9d1fc77509fbdf2de47001d88d7630a', name: "option" })))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -19,7 +19,7 @@ const B2bGridColumnComponent = class {
         this.textAlign = 'left';
     }
     render() {
-        return (index.h(index.Host, { key: 'c934cbf6e57af0dd3be40e2149f49adb2802c1f4', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, index.h("slot", { key: 'affb02d8aeefc039ce0a5d8fd2e290e376c8fc3d' })));
+        return (index.h(index.Host, { key: 'ca84abbad02173e29f80329a4faab238aa41ec9d', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, index.h("slot", { key: 'e11625544ba0b0fc501ff811e8f5ca1ac89194c9' })));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -72,7 +72,7 @@ const B2bGridRowComponent = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '48eccc3f2f29de4a533859834065717ad6b58238', style: {
+        return (index.h(index.Host, { key: '019e65e7db27c37305f49e396389c72fbcf82281', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -80,7 +80,7 @@ const B2bGridRowComponent = class {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, index.h("slot", { key: 'b814a34254890bde8a7690c9fa58bc42b3f8d35d' })));
+            } }, index.h("slot", { key: 'e203c9bde0b21f923b356b6e330ab6e4227fd1a5' })));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -13,7 +13,7 @@ const B2bGridComponent = class {
         this.margin = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '3f706955f934472664948d8653a86d3ac898e3d1', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, index.h("slot", { key: 'a0ac4c214a5bf2f169c2adee55131e785324a7ff' })));
+        return (index.h(index.Host, { key: '01c61abbb9d20b4479031e0545967f08782650dc', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, index.h("slot", { key: '64a173edfae1ff772091163fecc55bebdc2462b9' })));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -79,7 +79,6 @@ const iconTypes = [
     'b2b_icon-cookie',
     'b2b_icon-copy',
     'b2b_icon-cosmetics',
-    'b2b_icon-cosmetics',
     'b2b_icon-cow',
     'b2b_icon-crab',
     'b2b_icon-critique',