@otto-de/b2b-core-components 1.30.0 → 1.31.0

package/dist/collection/components/chip/chip.js

@@ -1,12 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class B2bChipComponent {
     constructor() {
-        /** Whether the chip is disabled. */
-        this.disabled = false;
-        /** Whether or not the chip component has a close button. Per default it is true. */
-        this.hasCloseButton = true;
-        /** It is used to customise the margin of chip component */
-        this.customMargin = '8px';
         this.onClick = () => {
             if (this.disabled) {
                 return;
@@ -20,17 +14,24 @@ export class B2bChipComponent {
             this.b2bClose.emit({ value: this.value });
         };
         this.clearIcon = (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.85352 3.14648C7.6582 2.95117 7.3418 2.95117 7.14648 3.14648L5.5 4.79297L3.85352 3.14648C3.6582 2.95117 3.3418 2.95117 3.14648 3.14648C2.95117 3.3418 2.95117 3.6582 3.14648 3.85352L4.79297 5.5L3.14648 7.14648C2.95117 7.3418 2.95117 7.6582 3.14648 7.85352C3.24414 7.95117 3.37207 8 3.5 8C3.62793 8 3.75586 7.95117 3.85352 7.85352L5.5 6.20703L7.14648 7.85352C7.24414 7.95117 7.37207 8 7.5 8C7.62793 8 7.75586 7.95117 7.85352 7.85352C8.04883 7.6582 8.04883 7.3418 7.85352 7.14648L6.20703 5.5L7.85352 3.85352C8.04883 3.6582 8.04883 3.3418 7.85352 3.14648ZM5.5 0C2.46729 0 0 2.46729 0 5.5C0 8.53271 2.46729 11 5.5 11C8.53271 11 11 8.53271 11 5.5C11 2.46729 8.53271 0 5.5 0ZM5.5 10C3.01855 10 1 7.98145 1 5.5C1 3.01855 3.01855 1 5.5 1C7.98145 1 10 3.01855 10 5.5C10 7.98145 7.98145 10 5.5 10Z" })));
+        this.label = undefined;
+        this.type = undefined;
+        this.labelStyle = undefined;
+        this.disabled = false;
+        this.hasCloseButton = true;
+        this.value = undefined;
+        this.customMargin = '8px';
     }
     render() {
-        return (h(Host, { key: '3b97a08f6b5f474b07b86d0a3afa9482644da107' }, h("div", { key: '0b7e369eb50c30c7b33879ebc2d2efbd5f73bdc2', class: {
+        return (h(Host, { key: '3305bfadb31716b7a4f103222d8d1f280afdda32' }, h("div", { key: '00e106a248e0d5c36a4a22ecd5f95411cf9271d7', class: {
                 'b2b-chip': true,
                 [`b2b-chip--${this.type}`]: !this.disabled && this.type !== undefined,
                 'b2b-chip--disabled': this.disabled,
-            } }, h("span", { key: '35dbb1019e5e3a5374164d9bc186ed1daf74416d', class: {
+            } }, h("span", { key: 'ac6d7eb4634075dea78cbbfbd2c1dd8ed956e2a1', class: {
                 'b2b-chip__label': true,
                 [`b2b-chip__label--${this.labelStyle}`]: this.labelStyle !== undefined,
                 'b2b-chip__label--close-button': this.hasCloseButton,
-            } }, this.label), this.hasCloseButton && (h("button", { key: '26d36a0969665f42482b83413a50bd00fa8989ac', class: {
+            } }, this.label), this.hasCloseButton && (h("button", { class: {
                 'b2b-chip__clearIcon': true,
                 'b2b-chip--disabled__clearIcon': this.disabled,
             }, onClick: this.onClick, onKeyDown: this.onKeyDown }, this.clearIcon)))));
@@ -51,7 +52,6 @@ export class B2bChipComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -64,13 +64,11 @@ export class B2bChipComponent {
                     "tags": [],
                     "text": "The text content of the chip. It is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'success' | 'info' | 'warn' | 'error'",
@@ -83,13 +81,11 @@ export class B2bChipComponent {
                     "tags": [],
                     "text": "The type of chip to represent states like success, info, warn and error. Uses default style if not set."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false
             },
             "labelStyle": {
                 "type": "string",
-                "attribute": "label-style",
                 "mutable": false,
                 "complexType": {
                     "original": "'bold' | 'italic' | 'underline' | 'strikethrough'",
@@ -102,13 +98,11 @@ export class B2bChipComponent {
                     "tags": [],
                     "text": "The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label-style",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -121,14 +115,12 @@ export class B2bChipComponent {
                     "tags": [],
                     "text": "Whether the chip is disabled."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hasCloseButton": {
                 "type": "boolean",
-                "attribute": "has-close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -141,14 +133,12 @@ export class B2bChipComponent {
                     "tags": [],
                     "text": "Whether or not the chip component has a close button. Per default it is true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "has-close-button",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -161,13 +151,11 @@ export class B2bChipComponent {
                     "tags": [],
                     "text": "It is only used when the chip component participates in a group"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true
             },
             "customMargin": {
                 "type": "string",
-                "attribute": "custom-margin",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -180,8 +168,7 @@ export class B2bChipComponent {
                     "tags": [],
                     "text": "It is used to customise the margin of chip component"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "custom-margin",
                 "reflect": false,
                 "defaultValue": "'8px'"
             }

package/dist/collection/components/date-picker/date-picker-days-header.js

@@ -2,8 +2,6 @@ import { h, Host } from "@stencil/core";
 import { WeekdaysEnglish, WeekdaysGerman } from "./date-picker.types";
 export class B2bDatePickerDaysHeader {
     constructor() {
-        /** Internal the language for month and the weekdays will be decided based on the given input. By default, this will be de which is german */
-        this.language = 'de';
         this.displayWeekDays = () => {
             let renderWeekDays = [];
             const weekdays = this.language === 'en' ? WeekdaysEnglish : WeekdaysGerman;
@@ -12,9 +10,10 @@ export class B2bDatePickerDaysHeader {
             });
             return renderWeekDays;
         };
+        this.language = 'de';
     }
     render() {
-        return (h(Host, { key: '21299897779dcef9b05a76d7c87584ead6d769cf' }, h("div", { key: 'bf32af685d48dee3259b22f9bb423b8f6c9497f3', class: "b2b-date-picker-days-header" }, this.displayWeekDays())));
+        return (h(Host, { key: '8bd0553cd895ce7e94375947d7bed153d20bf55d' }, h("div", { key: '285b470407c87af25be5c9e34e35d38ba44e9b37', class: "b2b-date-picker-days-header" }, this.displayWeekDays())));
     }
     static get is() { return "b2b-date-picker-days-header"; }
     static get encapsulation() { return "shadow"; }
@@ -32,7 +31,6 @@ export class B2bDatePickerDaysHeader {
         return {
             "language": {
                 "type": "string",
-                "attribute": "language",
                 "mutable": false,
                 "complexType": {
                     "original": "'de' | 'en'",
@@ -45,8 +43,7 @@ export class B2bDatePickerDaysHeader {
                     "tags": [],
                     "text": "Internal the language for month and the weekdays will be decided based on the given input. By default, this will be de which is german"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "'de'"
             }

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

@@ -13,17 +13,6 @@ const keys = {
 };
 export class B2bDatePickerDays {
     constructor() {
-        /** Internal whether the dates previous to the current date are disabled. By default, this is true. */
-        this.disablePastDates = false;
-        /** Internal whether the dates after the current date are disabled. By default, this is false. */
-        this.disableFutureDates = false;
-        /** Internal whether the weekends are disabled. By default, this is false.  */
-        this.disableWeekends = false;
-        /** Internal the dates that are part of this array are disabled. By default, this is an empty array.  */
-        this.disableDates = [];
-        /** Internal the specific days of the week that need to be disabled */
-        this.disableEvery = [];
-        this.disabled = false;
         this.today = new Date();
         this.todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
         this.getCurrentDate = () => {
@@ -87,6 +76,17 @@ export class B2bDatePickerDays {
             }
             return days;
         };
+        this.selectedMonth = undefined;
+        this.selectedYear = undefined;
+        this.selectedDay = undefined;
+        this.disablePastDates = false;
+        this.disableFutureDates = false;
+        this.disableWeekends = false;
+        this.disableDates = [];
+        this.disableEvery = [];
+        this.disableDatesUntil = undefined;
+        this.disableDatesFrom = undefined;
+        this.disabled = false;
     }
     componentDidLoad() {
         this.setFocusOnSelectedDayOrFirstDay();
@@ -160,7 +160,7 @@ export class B2bDatePickerDays {
         });
     }
     render() {
-        return (h(Host, { key: '2f551c8ca672fdb1f0ec9fd4518472ef2cc9a26d' }, h("div", { key: '8cafa70a55840268447a51414cb95c1cf9323ae2', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
+        return (h(Host, { key: 'c739f1a046740cc9141140354bd262916c04b42c' }, h("div", { key: 'd08a86f51331b971209f11d8b2c783a1d7d91b05', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
     }
     static get is() { return "b2b-date-picker-days"; }
     static get encapsulation() { return "shadow"; }
@@ -178,7 +178,6 @@ export class B2bDatePickerDays {
         return {
             "selectedMonth": {
                 "type": "number",
-                "attribute": "selected-month",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -191,13 +190,11 @@ export class B2bDatePickerDays {
                     "tags": [],
                     "text": "Internal selected month"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-month",
                 "reflect": false
             },
             "selectedYear": {
                 "type": "number",
-                "attribute": "selected-year",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -210,13 +207,11 @@ export class B2bDatePickerDays {
                     "tags": [],
                     "text": "Internal selected year"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-year",
                 "reflect": false
             },
             "selectedDay": {
                 "type": "number",
-                "attribute": "selected-day",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -229,13 +224,11 @@ export class B2bDatePickerDays {
                     "tags": [],
                     "text": "Internal selected day"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-day",
                 "reflect": false
             },
             "disablePastDates": {
                 "type": "boolean",
-                "attribute": "disable-past-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -248,14 +241,12 @@ export class B2bDatePickerDays {
                     "tags": [],
                     "text": "Internal whether the dates previous to the current date are disabled. By default, this is true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-past-dates",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disableFutureDates": {
                 "type": "boolean",
-                "attribute": "disable-future-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -268,14 +259,12 @@ export class B2bDatePickerDays {
                     "tags": [],
                     "text": "Internal whether the dates after the current date are disabled. By default, this is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-future-dates",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disableWeekends": {
                 "type": "boolean",
-                "attribute": "disable-weekends",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -288,14 +277,12 @@ export class B2bDatePickerDays {
                     "tags": [],
                     "text": "Internal whether the weekends are disabled. By default, this is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-weekends",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disableDates": {
                 "type": "unknown",
-                "attribute": "disable-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "Date[]",
@@ -313,13 +300,10 @@ export class B2bDatePickerDays {
                     "tags": [],
                     "text": "Internal the dates that are part of this array are disabled. By default, this is an empty array."
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             },
             "disableEvery": {
                 "type": "unknown",
-                "attribute": "disable-every",
                 "mutable": false,
                 "complexType": {
                     "original": "string[]",
@@ -332,13 +316,10 @@ export class B2bDatePickerDays {
                     "tags": [],
                     "text": "Internal the specific days of the week that need to be disabled"
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             },
             "disableDatesUntil": {
                 "type": "unknown",
-                "attribute": "disable-dates-until",
                 "mutable": false,
                 "complexType": {
                     "original": "Date",
@@ -355,13 +336,10 @@ export class B2bDatePickerDays {
                 "docs": {
                     "tags": [],
                     "text": "Internal all the dates until the given specified date will be disabled."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "disableDatesFrom": {
                 "type": "unknown",
-                "attribute": "disable-dates-from",
                 "mutable": false,
                 "complexType": {
                     "original": "Date",
@@ -378,9 +356,7 @@ export class B2bDatePickerDays {
                 "docs": {
                     "tags": [],
                     "text": "Internal all the dates from the given specified date will be disabled."
-                },
-                "getter": false,
-                "setter": false
+                }
             }
         };
     }

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

@@ -0,0 +1,38 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Date-Picker-Header', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker-header></b2b-date-picker-header>`);
+    });
+    it('should emit previous button click event', async () => {
+        const previousMonthSpy = await page.spyOnEvent('b2b-date-picker-previous-month');
+        const clickableInputComponent = await page.find('b2b-date-picker-header >>> .b2b-date-picker-nav--left');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(previousMonthSpy).toHaveReceivedEvent();
+    });
+    it('should emit next button click event', async () => {
+        const nextMonthSpy = await page.spyOnEvent('b2b-date-picker-next-month');
+        const clickableInputComponent = await page.find('b2b-date-picker-header >>> .b2b-date-picker-nav--right');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(nextMonthSpy).toHaveReceivedEvent();
+    });
+    it('should emit months date picker view selected event', async () => {
+        const viewChangedSpy = await page.spyOnEvent('b2b-date-picker-view-changed');
+        const clickableInputComponent = await page.find('b2b-date-picker-header >>> .b2b-date-picker-month');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(viewChangedSpy).toHaveReceivedEvent();
+        expect(viewChangedSpy).toHaveReceivedEventDetail({ value: 'Months' });
+    });
+    it('should emit years date picker view selected event', async () => {
+        const viewChangedSpy = await page.spyOnEvent('b2b-date-picker-view-changed');
+        const clickableInputComponent = await page.find('b2b-date-picker-header >>> .b2b-date-picker-year');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(viewChangedSpy).toHaveReceivedEvent();
+        expect(viewChangedSpy).toHaveReceivedEventDetail({ value: 'Years' });
+    });
+});

package/dist/collection/components/date-picker/date-picker-header.js

@@ -2,14 +2,15 @@ import { h, Host, } from "@stencil/core";
 import { MonthsGerman, MonthsEnglish, } from "./date-picker.types";
 export class B2bDatePickerHeader {
     constructor() {
-        /** The language for month and the weekdays will be decided based on the given input. By default, this will be de which is german */
+        this.selectedMonth = undefined;
+        this.selectedYear = undefined;
         this.language = 'de';
     }
     render() {
         const Months = this.language === 'en' ? MonthsEnglish : MonthsGerman;
-        return (h(Host, { key: '9ea2811216a69b5aee5eb532f665cfc250416de9' }, h("div", { key: '5e0ed603cd56dcca3c07e0ec4cc3a63745258ef1', class: "b2b-date-picker-header" }, h("button", { key: '775e16dc5d27d9c7cfadb54741109a54fae86b3c', class: "b2b-date-picker-nav--left", onClick: this.b2bDatePickerPreviousMonth.emit, onMouseOut: event => {
+        return (h(Host, { key: '7cafcdef8033dbe03700fc48b523290ea8d1577a' }, h("div", { key: '2ea038c03c6a8d8295adf41477724334f07180bd', class: "b2b-date-picker-header" }, h("button", { key: 'b9b9365fd1f454f7e6176d7b4e8c77cecdefa9e8', class: "b2b-date-picker-nav--left", onClick: this.b2bDatePickerPreviousMonth.emit, onMouseOut: event => {
                 event.target.blur();
-            }, "aria-label": "previous month" }, h("b2b-icon-100", { key: '0ed0d66b80a7e4ea76254c08e95e295b8f4dd105', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '6822bccd15dabeee88e49de7e2928dd3d24b45d2', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
+            }, "aria-label": "previous month" }, h("b2b-icon-100", { key: '622bbe2e4766ac3a750529245f4b46d59f0beb04', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '673a6aab27766e8a3f6ce8b30c5c08cc6015f687', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: "Months" /* DatePickerView.Months */,
                 });
@@ -19,7 +20,7 @@ export class B2bDatePickerHeader {
                         value: "Months" /* DatePickerView.Months */,
                     });
                 }
-            } }, Months[this.selectedMonth]), h("b2b-headline", { key: 'e0809c7dc562ce15e352771b6c592f8d3c5f97eb', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
+            } }, Months[this.selectedMonth]), h("b2b-headline", { key: '3d95ab3d8aa2d76dd1b2d358d565bf273ba9264a', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: "Years" /* DatePickerView.Years */,
                 });
@@ -29,9 +30,9 @@ export class B2bDatePickerHeader {
                         value: "Years" /* DatePickerView.Years */,
                     });
                 }
-            } }, this.selectedYear), h("button", { key: '7d58b9a707485f9ad34d07999478a28f707c7e4c', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
+            } }, this.selectedYear), h("button", { key: '987676e03e3b759ce0a42a5db9c4f0dad35aac3a', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
                 event.target.blur();
-            }, "aria-label": "next month" }, h("b2b-icon-100", { key: 'aeb66562d12d016e6a870b333ca5307f29062fd7', icon: "b2b_icon-arrow-right", clickable: true })))));
+            }, "aria-label": "next month" }, h("b2b-icon-100", { key: '843f3fccb5374ee43e7d0d4ce3aabe550b0a5f75', icon: "b2b_icon-arrow-right", clickable: true })))));
     }
     static get is() { return "b2b-date-picker-header"; }
     static get encapsulation() { return "shadow"; }
@@ -49,7 +50,6 @@ export class B2bDatePickerHeader {
         return {
             "selectedMonth": {
                 "type": "number",
-                "attribute": "selected-month",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -62,13 +62,11 @@ export class B2bDatePickerHeader {
                     "tags": [],
                     "text": "Internal selected month"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-month",
                 "reflect": false
             },
             "selectedYear": {
                 "type": "number",
-                "attribute": "selected-year",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -81,13 +79,11 @@ export class B2bDatePickerHeader {
                     "tags": [],
                     "text": "Internal selected year"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-year",
                 "reflect": false
             },
             "language": {
                 "type": "string",
-                "attribute": "language",
                 "mutable": false,
                 "complexType": {
                     "original": "'de' | 'en'",
@@ -100,8 +96,7 @@ export class B2bDatePickerHeader {
                     "tags": [],
                     "text": "The language for month and the weekdays will be decided based on the given input. By default, this will be de which is german"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "'de'"
             }

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

@@ -0,0 +1,39 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { MonthsGerman } from "./date-picker.types";
+describe('B2B-Date-Picker-Months', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it('should list all months', async () => {
+        await page.setContent(`<b2b-date-picker-months></b2b-date-picker-months>`);
+        const monthElements = (await page.findAll('b2b-date-picker-months >>> .b2b-date-picker-month'));
+        expect(monthElements.length).toBe(12);
+        monthElements.forEach((monthElement, index) => {
+            expect(monthElement.textContent).toBe(MonthsGerman[index]);
+        });
+    });
+    it('should show the selected month', async () => {
+        await page.setContent(`<b2b-date-picker-months selected-month="4"></b2b-date-picker-months>`);
+        const selectedMonth = await page.find('b2b-date-picker-months >>> .b2b-date-picker-month--selected');
+        expect(selectedMonth.textContent).toBe(MonthsGerman[4]);
+    });
+    it('should emit month selected event when new month is selected', async () => {
+        await page.setContent(`<b2b-date-picker-months selected-month="10"></b2b-date-picker-months>`);
+        const monthSelectedSpy = await page.spyOnEvent('b2b-date-picker-month-selected');
+        const monthElement = await page.find('b2b-date-picker-months >>> .b2b-date-picker-month:nth-child(4)');
+        await monthElement.click();
+        page.waitForChanges();
+        expect(monthSelectedSpy).toHaveReceivedEvent();
+        expect(monthSelectedSpy).toHaveReceivedEventDetail({ value: 3 });
+    });
+    it('should emit month selected event when selecting the same month', async () => {
+        await page.setContent(`<b2b-date-picker-months selected-month="3"></b2b-date-picker-months>`);
+        const monthSelectedSpy = await page.spyOnEvent('b2b-date-picker-month-selected');
+        const monthElement = await page.find('b2b-date-picker-months >>> .b2b-date-picker-month:nth-child(4)');
+        await monthElement.click();
+        page.waitForChanges();
+        expect(monthSelectedSpy).toHaveReceivedEvent();
+        expect(monthSelectedSpy).toHaveReceivedEventDetail({ value: 3 });
+    });
+});

package/dist/collection/components/date-picker/date-picker-months.js

@@ -9,8 +9,6 @@ const keys = {
 };
 export class B2bDatePickerMonths {
     constructor() {
-        /** Internal The language for month and the weekdays will be decided based on the given input. By default, this will be de which is german */
-        this.language = 'de';
         this.getAllMonths = () => {
             return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-month'));
         };
@@ -36,6 +34,8 @@ export class B2bDatePickerMonths {
             }
             return months;
         };
+        this.selectedMonth = undefined;
+        this.language = 'de';
     }
     handleKeyDown(event) {
         event.preventDefault();
@@ -73,7 +73,7 @@ export class B2bDatePickerMonths {
         this.focusCurrentMonth(months[index]);
     }
     render() {
-        return (h(Host, { key: 'cd9c3512612f1c98467876efb6c94fe9fdf108c7' }, h("div", { key: '5c380cc8f7926a30d9b3d47c19ca4ccb0fd93db8', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+        return (h(Host, { key: 'a6b5d77d82b661f742e95eba15f60ff01ff6d080' }, h("div", { key: '29dce426b9f6d3401c04c07d5be997f4be09b9d6', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
     }
     static get is() { return "b2b-date-picker-months"; }
     static get encapsulation() { return "shadow"; }
@@ -91,7 +91,6 @@ export class B2bDatePickerMonths {
         return {
             "selectedMonth": {
                 "type": "number",
-                "attribute": "selected-month",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -104,13 +103,11 @@ export class B2bDatePickerMonths {
                     "tags": [],
                     "text": "Internal selected month"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-month",
                 "reflect": false
             },
             "language": {
                 "type": "string",
-                "attribute": "language",
                 "mutable": false,
                 "complexType": {
                     "original": "'de' | 'en'",
@@ -123,8 +120,7 @@ export class B2bDatePickerMonths {
                     "tags": [],
                     "text": "Internal The language for month and the weekdays will be decided based on the given input. By default, this will be de which is german"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "'de'"
             }

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

@@ -0,0 +1,39 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Date-Picker-Years', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it('should list all years', async () => {
+        await page.setContent(`<b2b-date-picker-years></b2b-date-picker-years>`);
+        const monthElements = (await page.findAll('b2b-date-picker-years >>> .b2b-date-picker-year'));
+        const expectedYearsRange = Array.from({ length: 2100 - 1900 + 1 }, (_, index) => (1900 + index).toString());
+        expect(monthElements.length).toBe(201);
+        monthElements.forEach((monthElement, index) => {
+            expect(monthElement.textContent).toBe(expectedYearsRange[index]);
+        });
+    });
+    it('should show the selected year', async () => {
+        await page.setContent(`<b2b-date-picker-years selected-year="2024"></b2b-date-picker-years>`);
+        const selectedYear = await page.find('b2b-date-picker-years >>> .b2b-date-picker-year--selected');
+        expect(selectedYear.textContent).toBe('2024');
+    });
+    it('should emit year selected event when new year is selected', async () => {
+        await page.setContent(`<b2b-date-picker-years selected-year="1970"></b2b-date-picker-years>`);
+        const yearSelectedSpy = await page.spyOnEvent('b2b-date-picker-year-selected');
+        const yearElement = await page.find('b2b-date-picker-years >>> .b2b-date-picker-year:nth-child(125)');
+        await yearElement.click();
+        page.waitForChanges();
+        expect(yearSelectedSpy).toHaveReceivedEvent();
+        expect(yearSelectedSpy).toHaveReceivedEventDetail({ value: 2024 });
+    });
+    it('should emit year selected event when selecting the same year', async () => {
+        await page.setContent(`<b2b-date-picker-years selected-year="2024"></b2b-date-picker-years>`);
+        const yearSelectedSpy = await page.spyOnEvent('b2b-date-picker-year-selected');
+        const yearElement = await page.find('b2b-date-picker-years >>> .b2b-date-picker-year:nth-child(125)');
+        await yearElement.click();
+        page.waitForChanges();
+        expect(yearSelectedSpy).toHaveReceivedEvent();
+        expect(yearSelectedSpy).toHaveReceivedEventDetail({ value: 2024 });
+    });
+});