@otto-de/b2b-core-components 1.10.0 → 1.11.0

package/dist/collection/components/calendar/calendar-days.js

@@ -0,0 +1,333 @@
+import { h, Host, } from "@stencil/core";
+const keys = {
+    ARROW_UP: 'ArrowUp',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_LEFT: 'ArrowLeft',
+    HOME: 'Home',
+    END: 'End',
+    ESC: 'Escape',
+    TAB: 'Tab',
+    ENTER: 'Enter',
+};
+export class B2bCalendarDays {
+    constructor() {
+        this.today = new Date();
+        this.todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
+        this.getCurrentDate = () => {
+            const dates = this.getAllDates();
+            return dates.find(el => el.getAttribute('tabindex') === '0');
+        };
+        this.getAllDates = () => {
+            return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-calendar-day'));
+        };
+        this.focusCurrentDate = (date) => {
+            const dates = this.getAllDates();
+            dates.forEach(element => {
+                if (date.className.includes('b2b-calendar-day--disabled')) {
+                    return;
+                }
+                element.setAttribute('tabindex', element === date ? '0' : '-1');
+            });
+            if (!date.className.includes('b2b-calendar-day--disabled')) {
+                date.focus();
+            }
+        };
+        this.isDisabledDate = (givenDate) => {
+            if (this.disablePastDates) {
+                if (givenDate < this.todayWithoutTime)
+                    return true;
+            }
+            else if (this.disableFutureDates) {
+                if (givenDate > this.todayWithoutTime)
+                    return true;
+            }
+            else if (this.disableWeekends) {
+                if (givenDate.getDay() == 0 || givenDate.getDay() == 6)
+                    return true;
+            }
+            else {
+                return false;
+            }
+        };
+        this.handleClick = (event) => {
+            /** Remove focus from the clicked element */
+            event.target.blur();
+        };
+        this.renderCalendarDays = () => {
+            let daysInMonth = new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate(); /** Get total number of days in the current month */
+            let actualFirstDayOfMonth = new Date(this.selectedYear, this.selectedMonth, 1).getDay(); /** Get the day of the week (0-6) of the first day of the month */
+            let firstDayOfMonth = actualFirstDayOfMonth == 0 ? 6 : actualFirstDayOfMonth - 1;
+            let days = [];
+            /** Populate the days before the first day of the month with empty divs. */
+            for (let i = 0; i < firstDayOfMonth; i++) {
+                days.push(h("div", null));
+            }
+            /** Populate days array with day numbers. */
+            for (let i = 1; i <= daysInMonth; i++) {
+                let givenDate = new Date(this.selectedYear, this.selectedMonth, i);
+                let disabled = this.isDisabledDate(givenDate);
+                days.push(h("div", { class: {
+                        'b2b-calendar-day': true,
+                        'b2b-calendar-day--disabled': disabled,
+                        'b2b-calendar-day--today': givenDate.toDateString() === this.todayWithoutTime.toDateString(),
+                        'b2b-calendar-day--selected': new Date(this.selectedYear, this.selectedMonth, this.selectedDay).toDateString() === givenDate.toDateString(),
+                    }, onClick: event => {
+                        this.b2bDateSelected.emit({
+                            selectedDate: new Date(this.selectedYear, this.selectedMonth, i),
+                        });
+                        this.handleClick(event);
+                    }, tabindex: givenDate.toDateString() === this.todayWithoutTime.toDateString()
+                        ? 0
+                        : -1, role: "gridcell", "aria-label": `Date ${i}  ${this.selectedMonth + 1}  ${this.selectedYear}` }, i));
+            }
+            return days;
+        };
+        this.selectedMonth = undefined;
+        this.selectedYear = undefined;
+        this.selectedDay = undefined;
+        this.disablePastDates = false;
+        this.disableFutureDates = false;
+        this.disableWeekends = false;
+        this.disabled = false;
+    }
+    handleKeyDown(event) {
+        event.preventDefault();
+        const dates = this.getAllDates();
+        let index = this.today.getDate() - 1;
+        switch (event.key) {
+            case keys.TAB:
+                if (this.today.getMonth() === this.selectedMonth) {
+                    index = this.today.getDate() - 1;
+                }
+                else {
+                    index = 0;
+                }
+                break;
+            case keys.ARROW_LEFT:
+                index = dates.indexOf(this.getCurrentDate()) - 1;
+                break;
+            case keys.ARROW_RIGHT:
+                index = dates.indexOf(this.getCurrentDate()) + 1;
+                break;
+            case keys.ARROW_UP:
+                index = dates.indexOf(this.getCurrentDate()) - 7;
+                break;
+            case keys.ARROW_DOWN:
+                index = dates.indexOf(this.getCurrentDate()) + 7;
+                break;
+            case keys.ENTER:
+                index = dates.indexOf(this.getCurrentDate());
+                if (dates[index].classList.contains('b2b-calendar-day--disabled')) {
+                    return;
+                }
+                this.b2bDateSelected.emit({
+                    selectedDate: new Date(this.selectedYear, this.selectedMonth + 1, index + 1),
+                });
+                break;
+            case keys.ESC:
+                this.resetAllDates();
+                this.b2bCalendarEscape.emit();
+                break;
+            default:
+                return;
+        }
+        if (index < 0) {
+            index = dates.length - 1;
+        }
+        if (index > dates.length - 1) {
+            index = 0;
+        }
+        this.focusCurrentDate(dates[index]);
+    }
+    resetAllDates() {
+        const dates = this.getAllDates();
+        dates.forEach(element => {
+            element.setAttribute('tabindex', '-1');
+        });
+    }
+    render() {
+        return (h(Host, { key: 'f20522bb68f1e1363a9706efbe63c95a79e8320d' }, h("div", { key: 'da20afc55bb0a6f511f0d1d316e39e6d3386b345', class: "b2b-calendar-days" }, this.renderCalendarDays())));
+    }
+    static get is() { return "b2b-calendar-days"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["calendar-days.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["calendar-days.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedMonth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal selected month"
+                },
+                "attribute": "selected-month",
+                "reflect": false
+            },
+            "selectedYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal selected year"
+                },
+                "attribute": "selected-year",
+                "reflect": false
+            },
+            "selectedDay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal selected day"
+                },
+                "attribute": "selected-day",
+                "reflect": false
+            },
+            "disablePastDates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal whether the dates previous to the current date are disabled. By default, this is true."
+                },
+                "attribute": "disable-past-dates",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableFutureDates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal whether the dates after the current date are disabled. By default, this is false."
+                },
+                "attribute": "disable-future-dates",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableWeekends": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal whether the weekends are disabled. By default, this is false."
+                },
+                "attribute": "disable-weekends",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bCalendarEscape",
+                "name": "b2b-calendar-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/interaction.interface",
+                            "id": "src/utils/interfaces/interaction.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/calendar/calendar-header.css

@@ -0,0 +1,283 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 04 Jun 2024 10:14:07 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Tue, 04 Jun 2024 10:14:08 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@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");
+}
+:root,
+:host {
+}
+:root .b2b-calendar-header,
+:host .b2b-calendar-header {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--b2b-size-30) var(--b2b-size-60) var(--b2b-size-40) var(--b2b-size-60);
+}
+:root .b2b-calendar-nav--left,
+:root .b2b-calendar-nav--right,
+:host .b2b-calendar-nav--left,
+:host .b2b-calendar-nav--right {
+  height: var(--b2b-size-80);
+  width: var(--b2b-size-80);
+  background-color: var(--b2b-color-grey-25);
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  border-radius: var(--b2b-size-7);
+}
+:root .b2b-calendar-nav--left:hover, :root .b2b-calendar-nav--left:focus,
+:root .b2b-calendar-nav--right:hover,
+:root .b2b-calendar-nav--right:focus,
+:host .b2b-calendar-nav--left:hover,
+:host .b2b-calendar-nav--left:focus,
+:host .b2b-calendar-nav--right:hover,
+:host .b2b-calendar-nav--right:focus {
+  background-color: var(--b2b-color-table-selected-hover);
+}
+:root .b2b-calendar-month,
+:host .b2b-calendar-month {
+  height: var(--b2b-size-80);
+  width: 82px;
+  padding: var(--b2b-size-10) var(--b2b-size-20);
+  margin: 0 0 0 var(--b2b-size-20);
+  background-color: var(--b2b-color-grey-25);
+  box-sizing: border-box;
+  text-align: center;
+  font-weight: var(--b2b-size-headline-100);
+  border-radius: var(--b2b-size-7);
+  font-size: var(--b2b-size-40);
+}
+:root .b2b-calendar-month:hover, :root .b2b-calendar-month:focus,
+:host .b2b-calendar-month:hover,
+:host .b2b-calendar-month:focus {
+  background-color: var(--b2b-color-table-selected-hover);
+}
+:root .b2b-calendar-year,
+:host .b2b-calendar-year {
+  height: var(--b2b-size-80);
+  width: 82px;
+  padding: var(--b2b-size-10) var(--b2b-size-20);
+  margin: 0 var(--b2b-size-20);
+  background-color: var(--b2b-color-grey-25);
+  box-sizing: border-box;
+  text-align: center;
+  font-weight: var(--b2b-size-headline-100);
+  border-radius: var(--b2b-size-7);
+  font-size: var(--b2b-size-40);
+}
+:root .b2b-calendar-year:hover, :root .b2b-calendar-year:focus,
+:host .b2b-calendar-year:hover,
+:host .b2b-calendar-year:focus {
+  background-color: var(--b2b-color-table-selected-hover);
+}

package/dist/collection/components/calendar/calendar-header.e2e.js

@@ -0,0 +1,22 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Calendar-Header', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-calendar-header></b2b-calendar-header>`);
+    });
+    it('should emit previous button click event', async () => {
+        const previousMonthSpy = await page.spyOnEvent('b2b-calendar-previous-month');
+        const clickableInputComponent = await page.find('b2b-calendar-header >>> .b2b-calendar-nav--left');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(previousMonthSpy).toHaveReceivedEvent();
+    });
+    it('should emit next button click event', async () => {
+        const nextMonthSpy = await page.spyOnEvent('b2b-calendar-next-month');
+        const clickableInputComponent = await page.find('b2b-calendar-header >>> .b2b-calendar-nav--right');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(nextMonthSpy).toHaveReceivedEvent();
+    });
+});