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

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

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

@@ -0,0 +1,327 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root, :host {
+  --b2b-color-black-50: #333333;
+  --b2b-color-black-100: #222222;
+  --b2b-color-white-100: #FFFFFF;
+  --b2b-color-grey-10: #F0F0F0;
+  --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-50: #EEEEEE;
+  --b2b-color-grey-100: #E6E6E6;
+  --b2b-color-grey-150: #D5D5D5;
+  --b2b-color-grey-200: #C4C4C4;
+  --b2b-color-grey-250: #B1B1B1;
+  --b2b-color-grey-300: #9E9E9E;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-red-50: #FFDDE3;
+  --b2b-color-red-100: #D4021D;
+  --b2b-color-red-150: #E6344B;
+  --b2b-color-red-200: #BB0004;
+  --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
+  --b2b-color-primary: #D4021D;
+  --b2b-color-error-100: #E6344B;
+  --b2b-color-warning-50: #FFD998;
+  --b2b-color-warning-100: #FFB432;
+  --b2b-color-success-50: #D6E0CC;
+  --b2b-color-success-100: #326400;
+  --b2b-color-info-50: #CCD6E0;
+  --b2b-color-info-100: #003264;
+  --b2b-color-hover-default: #DBE7FA;
+  --b2b-color-hover-black: #3B3B3B;
+  --b2b-color-background-overlay-transparent-80: #22222280;
+  --b2b-color-background-overlay-transparent-40: #22222240;
+  --b2b-color-table-selected-default: #CCE9FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-bold: 700;
+  --b2b-size-1: 0.0625rem; /** 1px */
+  --b2b-size-5: 0.125rem; /** 2px */
+  --b2b-size-7: 0.1875rem; /** 3px */
+  --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
+  --b2b-size-15: 0.375rem; /** 6px */
+  --b2b-size-20: 0.5rem; /** 8px */
+  --b2b-size-25: 0.625rem; /** 10px */
+  --b2b-size-30: 0.75rem; /** 12px */
+  --b2b-size-35: 0.875rem; /** 14px */
+  --b2b-size-40: 1rem; /** 16px */
+  --b2b-size-45: 1.125rem; /** 18px */
+  --b2b-size-50: 1.25rem; /** 20px */
+  --b2b-size-53: 1.3125rem; /** 21px */
+  --b2b-size-55: 1.375rem; /** 22px */
+  --b2b-size-60: 1.5rem; /** 24px */
+  --b2b-size-70: 1.75rem; /** 28px */
+  --b2b-size-80: 2rem; /** 32px */
+  --b2b-size-90: 2.25rem; /** 36px */
+  --b2b-size-100: 2.5rem; /** 40px */
+  --b2b-size-120: 3rem; /** 48px */
+  --b2b-size-140: 3.5rem; /** 56px */
+  --b2b-size-150: 3.75rem; /** 60px */
+  --b2b-size-160: 4rem; /** 64px */
+  --b2b-size-200: 5rem; /** 80px */
+  --b2b-color-error-50: var(--b2b-color-red-50);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /** Will use 18px until design facelift */
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /** Will use 21px until design facelift */
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root [data-theme="dark"] {
+  --b2b-color-black-50: #333333;
+  --b2b-color-black-100: #222222;
+  --b2b-color-white-100: #FFFFFF;
+  --b2b-color-grey-10: #F0F0F0;
+  --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-50: #EEEEEE;
+  --b2b-color-grey-100: #E6E6E6;
+  --b2b-color-grey-150: #D5D5D5;
+  --b2b-color-grey-200: #C4C4C4;
+  --b2b-color-grey-250: #B1B1B1;
+  --b2b-color-grey-300: #9E9E9E;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-red-50: #FFDDE3;
+  --b2b-color-red-100: #D4021D;
+  --b2b-color-red-150: #E6344B;
+  --b2b-color-red-200: #BB0004;
+  --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
+  --b2b-color-primary: #D4021D;
+  --b2b-color-error-100: #E6344B;
+  --b2b-color-warning-50: #FFD998;
+  --b2b-color-warning-100: #FFB432;
+  --b2b-color-success-50: #D6E0CC;
+  --b2b-color-success-100: #326400;
+  --b2b-color-info-50: #CCD6E0;
+  --b2b-color-info-100: #003264;
+  --b2b-color-hover-default: #DBE7FA;
+  --b2b-color-hover-black: #3B3B3B;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-bold: 700;
+  --b2b-size-1: 0.0625rem; /** 1px */
+  --b2b-size-5: 0.125rem; /** 2px */
+  --b2b-size-7: 0.1875rem; /** 3px */
+  --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
+  --b2b-size-15: 0.375rem; /** 6px */
+  --b2b-size-20: 0.5rem; /** 8px */
+  --b2b-size-25: 0.625rem; /** 10px */
+  --b2b-size-30: 0.75rem; /** 12px */
+  --b2b-size-35: 0.875rem; /** 14px */
+  --b2b-size-40: 1rem; /** 16px */
+  --b2b-size-45: 1.125rem; /** 18px */
+  --b2b-size-50: 1.25rem; /** 20px */
+  --b2b-size-53: 1.3125rem; /** 21px */
+  --b2b-size-55: 1.375rem; /** 22px */
+  --b2b-size-60: 1.5rem; /** 24px */
+  --b2b-size-70: 1.75rem; /** 28px */
+  --b2b-size-80: 2rem; /** 32px */
+  --b2b-size-90: 2.25rem; /** 36px */
+  --b2b-size-100: 2.5rem; /** 40px */
+  --b2b-size-120: 3rem; /** 48px */
+  --b2b-size-140: 3.5rem; /** 56px */
+  --b2b-size-150: 3.75rem; /** 60px */
+  --b2b-size-160: 4rem; /** 64px */
+  --b2b-size-200: 5rem; /** 80px */
+  --b2b-color-error-50: var(--b2b-color-red-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+: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); /* The height of the wrapper */
+  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; /* two icons wide to prevent shifting when the clear logo (disappears) */
+  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); /* required to prevent discarding of the variable overwrite */
+}
+.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); /* required to prevent discarding of the variable overwrite */
+}

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

@@ -0,0 +1,45 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-date-range-picker', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-range-picker></b2b-date-range-picker>`);
+    });
+    function doWithHost(fn) {
+        return page
+            .$eval('b2b-date-range-picker', fn)
+            .then(async () => await page.waitForChanges());
+    }
+    it('should render the date picker component', async () => {
+        const datePicker = await page.find('b2b-date-range-picker');
+        const clickableInputComponent = await page.find('b2b-date-range-picker >>> div.b2b-date-range-picker-input-wrapper');
+        expect(clickableInputComponent).not.toBeNull();
+        expect(datePicker).not.toBeNull();
+    });
+    it('should render the datepicker component when date picker icon is clicked', async () => {
+        const datePicker = await page.find('b2b-date-range-picker');
+        const wrapper = await page.find('b2b-date-range-picker >>> div.b2b-date-range-picker-input-wrapper');
+        await wrapper.click();
+        await page.waitForChanges();
+        const datePickerComponent = await page.find('b2b-date-range-picker >>> .b2b-date-range-picker-body');
+        const datePickerHeader = await page.find('b2b-date-range-picker >>> .b2b-date-range-picker-body >>> b2b-date-range-picker-header');
+        const datePickerDays = await page.find('b2b-date-range-picker >>> .b2b-date-range-picker-body >>> b2b-date-range-picker-days');
+        expect(wrapper).not.toBeNull();
+        expect(datePicker).not.toBeNull();
+        expect(datePickerComponent).not.toBeNull();
+        expect(datePickerHeader).not.toBeNull();
+        expect(datePickerDays).not.toBeNull();
+        expect(await datePickerComponent.isVisible()).toBe(true);
+        expect(await datePickerHeader.isVisible()).toBe(true);
+        expect(await datePickerDays.isVisible()).toBe(true);
+    });
+    it('should disable the third day of each month', async () => {
+        await doWithHost(el => (el.disableDates = (date) => date.getDate() === 3));
+        const enabledElement = await page.find({ text: '1' });
+        expect(enabledElement).toHaveClass('b2b-date-range-picker-day');
+        expect(enabledElement).not.toHaveClass('b2b-date-range-picker-day--disabled');
+        const disabledElement = await page.find({ text: '3' });
+        expect(disabledElement).toHaveClass('b2b-date-range-picker-day');
+        expect(disabledElement).toHaveClass('b2b-date-range-picker-day--disabled');
+    });
+});