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

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
+            }];
+    }
+}

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

@@ -0,0 +1,126 @@
+// #region Dateish
+export 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}`);
+    }
+}
+export 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;
+}
+export function toDate(date) {
+    if (date == null) {
+        return undefined;
+    }
+    else {
+        const [year, month, day] = splitDate(date);
+        return new Date(year, month - 1, day);
+    }
+}
+export 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());
+}
+export 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}`);
+    }
+}
+export 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.
+ */
+export 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

package/dist/collection/components/date-range-picker/date-range-picker-utils.spec.js

@@ -0,0 +1,189 @@
+// #region Dateish
+import { dateAsNumber, isDateRangeEqual, splitDate, toDateRange, toDateRangeString, toDateString, } from "./date-range-picker-utils";
+describe('Dateish', () => {
+    describe('splitDate', () => {
+        const values = [
+            [undefined, undefined],
+            [null, undefined],
+            [new Date(2025, 0, 1), [2025, 1, 1]],
+            [new Date(2025, 0, 1).toISOString(), [2025, 1, 1]],
+            ['01.01.2025', [2025, 1, 1]],
+            ['1.1.2025', [2025, 1, 1]],
+            ['', new Error('Invalid date: ')],
+            ['2025-01-01', new Error('Invalid date: 2025-01-01')],
+        ];
+        it.each(values)('should handle %o', (input, expected) => {
+            if (expected === undefined) {
+                expect(splitDate(input)).toBeUndefined();
+            }
+            else if (expected instanceof Error) {
+                expect(() => splitDate(input)).toThrow(expected);
+            }
+            else {
+                const actual = splitDate(input);
+                expect(actual).toBeDefined();
+                expect(Array.isArray(actual)).toBe(true);
+                expect(actual).toHaveLength(3);
+                expect(actual).toStrictEqual(expected);
+            }
+        });
+    });
+    describe('dateAsNumber', () => {
+        const values = [
+            [undefined, undefined],
+            [null, undefined],
+            [new Date(2025, 0, 1), 20250101],
+            [new Date(2025, 0, 1).toISOString(), 20250101],
+            ['01.01.2025', 20250101],
+            ['1.1.2025', 20250101],
+            ['', new Error('Invalid date: ')],
+            ['2025-01-01', new Error('Invalid date: 2025-01-01')],
+        ];
+        it.each(values)('should handle %o', (input, expected) => {
+            if (expected === undefined) {
+                expect(dateAsNumber(input)).toBeUndefined();
+            }
+            else if (expected instanceof Error) {
+                expect(() => dateAsNumber(input)).toThrow(expected);
+            }
+            else {
+                expect(dateAsNumber(input)).toBe(expected);
+            }
+        });
+    });
+    describe('toDateString', () => {
+        const values = [
+            [undefined, undefined],
+            [null, undefined],
+            [new Date(2025, 0, 1), '01.01.2025'],
+            [new Date(2025, 0, 1).toISOString(), '01.01.2025'],
+            ['01.01.2025', '01.01.2025'],
+            ['1.1.2025', '01.01.2025'],
+            ['', new Error('Invalid date: ')],
+            ['2025-01-01', new Error('Invalid date: 2025-01-01')],
+        ];
+        it.each(values)('should handle %o', (input, expected) => {
+            if (expected === undefined) {
+                expect(toDateString(input)).toBeUndefined();
+                expect(toDateString(input, 'default')).toBe('default');
+            }
+            else if (expected instanceof Error) {
+                expect(() => toDateString(input)).toThrow(expected);
+                expect(() => toDateString(input, 'default')).toThrow(expected);
+            }
+            else {
+                expect(toDateString(input)).toBe(expected);
+                expect(toDateString(input, 'default')).toBe(expected);
+            }
+        });
+    });
+});
+// #endregion
+// #region DateRange
+describe('DateRange', () => {
+    describe('toDateRange', () => {
+        const values = [
+            [undefined, undefined],
+            [null, undefined],
+            [
+                [new Date(2025, 0, 1), new Date(2025, 0, 1)],
+                [new Date(2025, 0, 1), new Date(2025, 0, 1)],
+            ],
+            [
+                [
+                    new Date(2025, 0, 1).toISOString(),
+                    new Date(2025, 0, 1).toISOString(),
+                ],
+                [new Date(2025, 0, 1), new Date(2025, 0, 1)],
+            ],
+            [
+                ['01.01.2025', '01.01.2025'],
+                [new Date(2025, 0, 1), new Date(2025, 0, 1)],
+            ],
+            [
+                ['1.1.2025', '1.1.2025'],
+                [new Date(2025, 0, 1), new Date(2025, 0, 1)],
+            ],
+            ['1.1.2025-1.1.2025', [new Date(2025, 0, 1), new Date(2025, 0, 1)]],
+            [
+                `${new Date(2025, 0, 1).toISOString()} - ${new Date(2025, 0, 1).toISOString()}`,
+                [new Date(2025, 0, 1), new Date(2025, 0, 1)],
+            ],
+            [
+                JSON.stringify([
+                    new Date(2025, 0, 1).toISOString(),
+                    new Date(2025, 0, 1).toISOString(),
+                ]),
+                [new Date(2025, 0, 1), new Date(2025, 0, 1)],
+            ],
+            ['', new Error('Invalid date range: ')],
+            ['2025-01-01', new Error('Invalid date range: 2025-01-01')],
+            [
+                '2025-01-01-2025-01-01',
+                new Error('Invalid date range: 2025-01-01-2025-01-01'),
+            ],
+            [
+                JSON.stringify([
+                    new Date(Date.UTC(2025, 0, 1)).toISOString(),
+                    new Date(Date.UTC(2025, 0, 1)).toISOString(),
+                    new Date(Date.UTC(2025, 0, 1)).toISOString(),
+                ]),
+                new Error('Invalid date range: ["2025-01-01T00:00:00.000Z","2025-01-01T00:00:00.000Z","2025-01-01T00:00:00.000Z"]'),
+            ],
+        ];
+        it.each(values)('should handle %o', (input, expected) => {
+            if (expected === undefined) {
+                expect(toDateRange(input)).toBeUndefined();
+            }
+            else if (expected instanceof Error) {
+                expect(() => toDateRange(input)).toThrow(expected);
+            }
+            else {
+                expect(toDateRange(input)).toStrictEqual(expected);
+            }
+        });
+    });
+    describe('toDateString', () => {
+        const values = [
+            [undefined, undefined],
+            [null, undefined],
+            [[new Date(2025, 0, 1), new Date(2025, 0, 1)], '01.01.2025 - 01.01.2025'],
+        ];
+        it.each(values)('should handle %o', (input, expected) => {
+            if (expected === undefined) {
+                expect(toDateRangeString(input)).toBeUndefined();
+                expect(toDateRangeString(input, 'default')).toBe('default');
+            }
+            else if (expected instanceof Error) {
+                expect(() => toDateRangeString(input)).toThrow(expected);
+                expect(() => toDateRangeString(input, 'default')).toThrow(expected);
+            }
+            else {
+                expect(toDateRangeString(input)).toBe(expected);
+                expect(toDateRangeString(input, 'default')).toBe(expected);
+            }
+        });
+    });
+    describe('isDateRangeEqual', () => {
+        const values = [
+            [undefined, undefined, true],
+            [null, undefined, true],
+            [
+                [new Date(2025, 0, 1), new Date(2025, 0, 2)],
+                [new Date(2025, 0, 1), new Date(2025, 0, 2)],
+                true,
+            ],
+            [
+                [new Date(2025, 0, 1), new Date(2025, 0, 2)],
+                [new Date(2025, 0, 1), new Date(2025, 1, 2)],
+                false,
+            ],
+            [[new Date(2025, 0, 1), new Date(2025, 0, 2)], undefined, false],
+        ];
+        it.each(values)('should handle %o', (first, second, expected) => {
+            expect(isDateRangeEqual(first, second)).toBe(expected);
+            expect(isDateRangeEqual(second, first)).toBe(expected);
+        });
+    });
+});
+// #endregion