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

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

@@ -0,0 +1,316 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+// #region Dateish
+function splitDate(date) {
+    if (date == null) {
+        return undefined;
+    }
+    else if (typeof date === 'string') {
+        if (date.includes('T')) {
+            try {
+                return splitDate(new Date(date));
+            }
+            catch (_a) {
+                throw new Error(`Invalid date: ${date}`);
+            }
+        }
+        const parts = date.split('.').map(Number);
+        if (parts.length !== 3) {
+            throw new Error(`Invalid date: ${date}`);
+        }
+        const [day, month, year] = date.split('.').map(Number);
+        return [year, month, day];
+    }
+    else if (isDateTuple(date)) {
+        return date;
+    }
+    else if (date instanceof Date && !Number.isNaN(date.valueOf())) {
+        return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
+    }
+    else {
+        throw new Error(`Invalid date: ${date}`);
+    }
+}
+function dateAsNumber(date) {
+    if (date == null) {
+        return undefined;
+    }
+    else {
+        const [year, month, day] = splitDate(date);
+        return year * 10000 + month * 100 + day;
+    }
+}
+/**
+ * Checks whether the given value is a `DateTuple`.
+ * @param value The value to check.
+ * @returns True, if the value is a `DateTuple`. False otherwise.
+ */
+function isDateTuple(value) {
+    return Array.isArray(value) && value.length === 3;
+}
+function toDate(date) {
+    if (date == null) {
+        return undefined;
+    }
+    else {
+        const [year, month, day] = splitDate(date);
+        return new Date(year, month - 1, day);
+    }
+}
+function toDateString(date, nullDefault) {
+    if (date == null) {
+        return nullDefault;
+    }
+    else {
+        const [year, month, day] = splitDate(date);
+        return `${day.toString().padStart(2, '0')}.${month.toString().padStart(2, '0')}.${year}`;
+    }
+}
+/**
+ * Checks whether the given dates are exactly equal (down to the ms).
+ * @param first The first date to compare.
+ * @param second The second date to compare.
+ * @returns True, if both values are exactly equal or both nullish. False otherwise.
+ */
+function isDateEqual(first, second) {
+    return (first === null || first === void 0 ? void 0 : first.valueOf()) === (second === null || second === void 0 ? void 0 : second.valueOf());
+}
+function toDateRange(range) {
+    if (range == null) {
+        return undefined;
+    }
+    else if (typeof range === 'string') {
+        try {
+            return toDateRange(JSON.parse(range));
+        }
+        catch (_a) {
+            let parts = range.split('-');
+            if (parts.length !== 2) {
+                parts = range.split(' - ');
+                if (parts.length !== 2) {
+                    throw new Error(`Invalid date range: ${range}`);
+                }
+            }
+            return toDateRange([parts[0], parts[1]]);
+        }
+    }
+    else if (Array.isArray(range) && range.length === 2) {
+        const [start, end] = range;
+        return [toDate(start), toDate(end)];
+    }
+    else {
+        throw new Error(`Invalid date range: ${range}`);
+    }
+}
+function toDateRangeString(range, nullDefault) {
+    if (range == null) {
+        return nullDefault;
+    }
+    else {
+        return `${toDateString(range[0], '??.??.????')} - ${toDateString(range[1], '??.??.????')}`;
+    }
+}
+/**
+ * Checks whether the given date ranges are exactly equal (down to the ms).
+ * @param first The first date range to compare.
+ * @param second The second date range to compare.
+ * @returns True, if both values are exactly equal or both nullish. False otherwise.
+ */
+function isDateRangeEqual(first, second) {
+    if (first == null) {
+        return second == null;
+    }
+    else if (second == null) {
+        return false;
+    }
+    return isDateEqual(first[0], second[0]) && isDateEqual(first[1], second[1]);
+}
+// #endregion
+
+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 = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerDays extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.b2bDatePickerEscape = createEvent(this, "b2b-date-picker-escape", 7);
+        this.b2bDateSelected = 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] = 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())));
+    }
+    get host() { return this; }
+    static get style() { return B2bDateRangePickerDaysStyle0; }
+}, [1, "b2b-date-range-picker-days", {
+        "viewedDate": [1, "viewed-date"],
+        "firstDate": [1, "first-date"],
+        "secondDate": [1, "second-date"],
+        "disableDates": [16],
+        "preview": [4],
+        "viewedDay": [32]
+    }, [[0, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["b2b-date-range-picker-days"];
+    components.forEach(tagName => { switch (tagName) {
+        case "b2b-date-range-picker-days":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, B2bDatePickerDays);
+            }
+            break;
+    } });
+}
+
+export { B2bDatePickerDays as B, toDate as a, toDateRangeString as b, defineCustomElement as c, dateAsNumber as d, isDateRangeEqual as i, splitDate as s, toDateRange as t };