@otto-de/b2b-core-components 1.10.1 → 1.11.1

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

@@ -0,0 +1,111 @@
+import { h, Host, } from "@stencil/core";
+import { Months } from "./calendar.types";
+export class B2bCalendarHeader {
+    constructor() {
+        this.selectedMonth = undefined;
+        this.selectedYear = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'c91f0ad8bc380befca694912ee91abfd42e9bc10' }, h("div", { key: '211538e4ae3c67e079040cc9b568cfe7f48ce249', class: "b2b-calendar-header" }, h("button", { key: '3cdde69184b9e6c500acb3c884f893492ee1b0a1', class: "b2b-calendar-nav--left", onClick: this.b2bCalendarPreviousMonth.emit, onMouseOut: event => {
+                event.target.blur();
+            }, "aria-label": "previous month" }, h("b2b-icon", { key: '8d8d4d8efdd3b11e9918229fed104487dcc381d5', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '77fbb323758d4397ac24c3b7acd3bb39a6daa463', size: '100', align: 'center', class: "b2b-calendar-month", "aria-live": "polite" }, Months[this.selectedMonth]), h("b2b-headline", { key: 'd796b831a8f5afa9c39203b380de272fd0e5c73c', size: '100', align: 'center', class: "b2b-calendar-year", "aria-live": "polite" }, this.selectedYear), h("button", { key: '12bec346d45f7e39885c91a4ea8918820244687b', class: "b2b-calendar-nav--right", onClick: this.b2bCalendarNextMonth.emit, onMouseOut: event => {
+                event.target.blur();
+            }, "aria-label": "next month" }, h("b2b-icon", { key: 'a2722ba253180085628355bafc00e3a685435d2a', icon: "b2b_icon-arrow-right", clickable: true })))));
+    }
+    static get is() { return "b2b-calendar-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["calendar-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["calendar-header.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
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bCalendarPreviousMonth",
+                "name": "b2b-calendar-previous-month",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted for previous month click*"
+                },
+                "complexType": {
+                    "original": "PreviousMonth",
+                    "resolved": "PreviousMonth<any>",
+                    "references": {
+                        "PreviousMonth": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/interaction.interface",
+                            "id": "src/utils/interfaces/interaction.interface.d.ts::PreviousMonth"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bCalendarNextMonth",
+                "name": "b2b-calendar-next-month",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted for next month click*"
+                },
+                "complexType": {
+                    "original": "NextMonth",
+                    "resolved": "NextMonth<any>",
+                    "references": {
+                        "NextMonth": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/interaction.interface",
+                            "id": "src/utils/interfaces/interaction.interface.d.ts::NextMonth"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/calendar/calendar.css

@@ -0,0 +1,264 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 18 Jun 2024 10:17:41 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, 18 Jun 2024 10:17:42 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");
+}
+:host .b2b-calendar {
+  position: relative;
+}
+:host .b2b-calendar-input-wrapper {
+  display: flex;
+  box-sizing: border-box;
+  height: var(--b2b-size-90);
+  border: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  justify-content: flex-end;
+  border-radius: var(--b2b-size-7);
+  padding: var(--b2b-size-15) var(--b2b-size-20);
+  max-width: 600px;
+  background-color: var(--b2b-color-white-100);
+}
+:host .b2b-calendar-input-wrapper--opened {
+  border-radius: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+}
+:host .b2b-calendar-selected-date {
+  flex: 1;
+  align-self: center;
+  font-size: var(--b2b-size-35);
+}
+:host .b2b-calendar-label {
+  font-size: var(--b2b-size-35);
+  color: var(--b2b-color-black-100);
+  line-height: var(--b2b-size-copy-line-height-100);
+  margin-bottom: var(--b2b-size-5);
+}
+:host .b2b-calendar-body {
+  border: var(--b2b-size-1) solid var(--b2b-color-black-100);
+  border-top: none;
+  width: 300px;
+  box-sizing: border-box;
+  padding-bottom: var(--b2b-size-40);
+  background-color: var(--b2b-color-white-100);
+}
+:host .b2b-calendar-body--hidden {
+  display: none;
+}
+:host .b2b-icons {
+  display: flex;
+  margin-top: var(--b2b-size-5);
+  align-items: center;
+}
+:host .b2b-close-icon {
+  display: block;
+}

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

@@ -0,0 +1,60 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Calendar', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-calendar></b2b-calendar>`);
+    });
+    it('should render the calendar component', async () => {
+        const calendar = await page.find('b2b-calendar');
+        const clickableInputComponent = await page.find('b2b-calendar >>> div.b2b-calendar-input-wrapper');
+        expect(clickableInputComponent).not.toBeNull();
+        expect(calendar).not.toBeNull();
+    });
+    it('should render the datepicker component when calendar icon is clicked', async () => {
+        const calendar = await page.find('b2b-calendar');
+        const clickableInputComponent = await page.find('b2b-calendar >>> div.b2b-calendar-input-wrapper');
+        await clickableInputComponent.click();
+        await page.waitForChanges();
+        const datePickerComponent = await page.find('b2b-calendar >>> .b2b-calendar-body');
+        const datePickerHeader = await page.find('b2b-calendar >>> .b2b-calendar-body >>> b2b-calendar-header');
+        const datePickerDays = await page.find('b2b-calendar >>> .b2b-calendar-body >>> b2b-calendar-days');
+        expect(clickableInputComponent).not.toBeNull();
+        expect(calendar).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 past dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-calendar disable-past-dates=true></b2b-calendar>`);
+        const prevDay = new Date().getDate() - 1;
+        if (prevDay > 0) {
+            const prevDayElement = await page.find({ text: prevDay.toString() });
+            expect(prevDayElement.className).toBe('b2b-calendar-day b2b-calendar-day--disabled');
+        }
+    });
+    it('should disable future dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-calendar disable-future-dates=true></b2b-calendar>`);
+        const nextDay = new Date().getDate() + 1;
+        if (nextDay > 0) {
+            const prevDayElement = await page.find({ text: nextDay.toString() });
+            expect(prevDayElement.className).toBe('b2b-calendar-day b2b-calendar-day--disabled');
+        }
+    });
+    it('should disable weekends dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-calendar disable-weekends=true></b2b-calendar>`);
+        const previousSunday = new Date().getDate() - (new Date().getDay() % 0);
+        if (previousSunday > 0) {
+            const prevDayElement = await page.find({
+                text: previousSunday.toString(),
+            });
+            expect(prevDayElement.className).toBe('b2b-calendar-day b2b-calendar-day--disabled');
+        }
+    });
+});

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

@@ -0,0 +1,245 @@
+import { h, Host, } from "@stencil/core";
+export class B2bCalendar {
+    constructor() {
+        this.setCurrentMonth = (selectedMonth) => {
+            this.selectedMonth = selectedMonth;
+            this.clearDateInput();
+            this.selectedDay = undefined;
+        };
+        this.setCurrentYear = (selectedYear) => {
+            this.selectedYear = selectedYear;
+            this.clearDateInput();
+            this.selectedDay = undefined;
+        };
+        this.showHideCalendar = () => {
+            this.showCalendar = !this.showCalendar;
+        };
+        this.clearDateInput = () => {
+            this.selectedDate = undefined;
+            this.selectedDay = undefined;
+        };
+        this.disablePastDates = undefined;
+        this.disableFutureDates = undefined;
+        this.disableWeekends = undefined;
+        this.label = 'Zeitraum auswählen';
+        this.showCalendar = false;
+        this.selectedMonth = new Date().getMonth();
+        this.selectedYear = new Date().getFullYear();
+        this.selectedDay = undefined;
+        this.selectedDate = undefined;
+    }
+    handleEscapePress() {
+        this.showCalendar = false;
+    }
+    handleDateSelection(event) {
+        this.selectedDay = event.detail.selectedDate.getDate();
+        this.setSelectedDate();
+        this.showCalendar = false;
+    }
+    getPreviousMonth() {
+        if (this.selectedMonth === 0) {
+            this.setCurrentMonth(11);
+            this.setCurrentYear(this.selectedYear - 1);
+        }
+        else {
+            this.setCurrentMonth(this.selectedMonth - 1);
+        }
+    }
+    getNextMonth() {
+        if (this.selectedMonth === 11) {
+            this.setCurrentMonth(0);
+            this.setCurrentYear(this.selectedYear + 1);
+        }
+        else {
+            this.setCurrentMonth(this.selectedMonth + 1);
+        }
+    }
+    setSelectedDate() {
+        if (this.selectedDay !== undefined)
+            this.selectedDate =
+                this.selectedDay +
+                    '.' +
+                    (this.selectedMonth + 1) +
+                    '.' +
+                    this.selectedYear;
+        this.b2bSelected.emit({
+            selectedDate: new Date(this.selectedDate),
+        });
+        setTimeout(() => {
+            this.setFocusOnCloseIcon();
+        }, 100);
+    }
+    setFocusOnCloseIcon() {
+        let closeIcon = this.host.shadowRoot.querySelector('.b2b-close-icon');
+        if (closeIcon !== null) {
+            closeIcon.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '057f977634dc8ed4421235931abeb0e4fb7078a8' }, h("div", { key: 'd9c78a0b8eef2c8592125485f87aa626e172548f', class: "b2b-calendar" }, h("div", { key: '614d53847a5949a569e4a69e5ef0064cd02d6465', class: "b2b-calendar-label" }, this.label), h("div", { key: 'c2734b7d998b367a7c3f9e4218880bd3d27cad51', class: {
+                'b2b-calendar-input-wrapper': true,
+                'b2b-calendar-input-wrapper--opened': this.showCalendar,
+            }, tabindex: 0, onClick: this.showHideCalendar, onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.showHideCalendar();
+                }
+            } }, h("div", { key: 'b3c92bd111f103a7ba15817ef5047a1cee8e8b02', class: "b2b-calendar-selected-date" }, this.selectedDate), h("div", { key: 'fbabb47c3135f7d09ef85e458d8e27a3dbb7950a', class: "b2b-icons" }, this.selectedDate && (h("div", { tabIndex: 0, onClick: () => {
+                this.clearDateInput();
+                this.showHideCalendar();
+            }, class: "b2b-close-icon", onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.clearDateInput();
+                    this.showHideCalendar();
+                }
+            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '985440dbd73bda7dc9ef492b0a58098a6d05d176', tabindex: 0 }, h("b2b-icon", { key: 'cbdfbc57fb1594db388dc6650a919784323b3f44', "aria-label": this.showCalendar ? 'close calendar' : 'open calendar', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: '0ba0e43b1372d4ceb53e94bfce86cebf80a16b13', class: {
+                'b2b-calendar-body': true,
+                'b2b-calendar-body--hidden': !this.showCalendar,
+            } }, h("b2b-calendar-header", { key: '1ff4637260f16b394b55c7312e0fdca743058201', selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-calendar-days-header", { key: 'e25d2fdffd6f460fdffa5c64e58fe5f37dc4bf3a' }), h("b2b-calendar-days", { key: 'f68ea05d8992ca4d937fae81a6ee3361efbd0caa', selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates }))));
+    }
+    static get is() { return "b2b-calendar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disablePastDates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the previous dates from the current date are disabled. By default, this is true."
+                },
+                "attribute": "disable-past-dates",
+                "reflect": false
+            },
+            "disableFutureDates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dates after the current date are disabled. By default, this is false."
+                },
+                "attribute": "disable-future-dates",
+                "reflect": false
+            },
+            "disableWeekends": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dates that fall on the weekend are disabled. By default, this is false."
+                },
+                "attribute": "disable-weekends",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the calendar component."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Zeitraum ausw\u00E4hlen'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showCalendar": {},
+            "selectedMonth": {},
+            "selectedYear": {},
+            "selectedDay": {},
+            "selectedDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bSelected",
+                "name": "b2b-selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the selected date as Date type."
+                },
+                "complexType": {
+                    "original": "CalendarEventDetail",
+                    "resolved": "CalendarEventDetail<any>",
+                    "references": {
+                        "CalendarEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::CalendarEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "b2b-calendar-escape",
+                "method": "handleEscapePress",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-date-selected",
+                "method": "handleDateSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-calendar-previous-month",
+                "method": "getPreviousMonth",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-calendar-next-month",
+                "method": "getNextMonth",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}