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

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

@@ -8,7 +8,6 @@ const keys = {
 };
 export class B2bDatePickerYears {
     constructor() {
-        this.yearsRange = [];
         this.getAllYears = () => {
             return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-year'));
         };
@@ -50,6 +49,8 @@ export class B2bDatePickerYears {
             }
             return years;
         };
+        this.selectedYear = undefined;
+        this.yearsRange = [];
     }
     handleKeyDown(event) {
         event.preventDefault();
@@ -97,7 +98,7 @@ export class B2bDatePickerYears {
         }
     }
     render() {
-        return (h(Host, { key: 'ab8b76cb602c06d1e915f3cbe00101cf3ac0e9e0' }, h("div", { key: '6f6b1506b6e7a96eb1f07cb55b6228cc6e1ff7fd', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
+        return (h(Host, { key: '04068ca8f7b6604a6f2861f0b8892f03a1e21df3' }, h("div", { key: '8fa5bd3484d9d5766ce12f8e3e354f8beab88c56', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
     }
     static get is() { return "b2b-date-picker-years"; }
     static get encapsulation() { return "shadow"; }
@@ -115,7 +116,6 @@ export class B2bDatePickerYears {
         return {
             "selectedYear": {
                 "type": "number",
-                "attribute": "selected-year",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -128,8 +128,7 @@ export class B2bDatePickerYears {
                     "tags": [],
                     "text": "Internal selected year"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-year",
                 "reflect": false
             }
         };

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

@@ -0,0 +1,137 @@
+import { newE2EPage } from "@stencil/core/testing";
+//ToDo Rewrite the tests so that the next, previous button and date selection scenarios are also tested
+describe('B2B-Date-Picker', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker></b2b-date-picker>`);
+    });
+    it('should render the date picker component', async () => {
+        const datePicker = await page.find('b2b-date-picker');
+        const clickableInputComponent = await page.find('b2b-date-picker >>> div.b2b-date-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-picker');
+        const clickableInputComponent = await page.find('b2b-date-picker >>> div.b2b-date-picker-input-wrapper');
+        await clickableInputComponent.click();
+        await page.waitForChanges();
+        const datePickerComponent = await page.find('b2b-date-picker >>> .b2b-date-picker-body');
+        const datePickerHeader = await page.find('b2b-date-picker >>> .b2b-date-picker-body >>> b2b-date-picker-header');
+        const datePickerDays = await page.find('b2b-date-picker >>> .b2b-date-picker-body >>> b2b-date-picker-days');
+        expect(clickableInputComponent).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 past dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker disable-past-dates=true></b2b-date-picker>`);
+        const today = new Date(2024, 2, 30);
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        const prevDay = yesterday.getDate();
+        console.log('prevDay :', prevDay);
+        if (prevDay > 0 && prevDay >= 31) {
+            const prevDayElement = await page.find({ text: prevDay.toString() });
+            expect(prevDayElement.className).toBe('b2b-date-picker-day b2b-date-picker-day--disabled');
+        }
+    });
+    it('should disable future dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker disable-future-dates=true></b2b-date-picker>`);
+        const today = new Date();
+        const tomorrow = new Date(today);
+        tomorrow.setDate(today.getDate() + 1);
+        const nextDay = tomorrow.getDate();
+        if (nextDay > 0 && nextDay !== 1) {
+            const nextDayElement = await page.find({ text: nextDay.toString() });
+            expect(nextDayElement.className).toBe('b2b-date-picker-day b2b-date-picker-day--disabled');
+        }
+    });
+    it('should disable weekends dates', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker disable-weekends=true></b2b-date-picker>`);
+        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-date-picker-day b2b-date-picker-day--disabled');
+        }
+    });
+    describe('B2B-Date-Picker Input Field', () => {
+        let page;
+        beforeEach(async () => {
+            page = await newE2EPage();
+            await page.setContent(`<b2b-date-picker></b2b-date-picker>`);
+        });
+        it('should allow entering a date via the input field', async () => {
+            const inputField = await page.find('b2b-date-picker >>> input.b2b-date-picker-input');
+            expect(inputField).not.toBeNull();
+            await inputField.press('2');
+            await inputField.press('6');
+            await inputField.press('.');
+            await inputField.press('1');
+            await inputField.press('1');
+            await inputField.press('.');
+            await inputField.press('2');
+            await inputField.press('0');
+            await inputField.press('2');
+            await inputField.press('8');
+            await page.waitForChanges();
+            const inputValue = await inputField.getProperty('value');
+            expect(inputValue).toBe('26.11.2028');
+        });
+        it('should show error state when invalid date is entered', async () => {
+            const inputField = await page.find('b2b-date-picker >>> input.b2b-date-picker-input');
+            await inputField.press('3');
+            await inputField.press('2');
+            await inputField.press('.');
+            await inputField.press('.');
+            await inputField.press('.');
+            await inputField.press('.');
+            await inputField.press('2');
+            await inputField.press('0');
+            await inputField.press('2');
+            await inputField.press('4');
+            await page.waitForChanges();
+            const inputValue = await inputField.getProperty('value');
+            expect(inputValue).toBe('32....2024');
+            const errorHint = await page.find('b2b-date-picker >>> span.b2b-date-picker-hint--error');
+            expect(errorHint).not.toBeNull();
+        });
+        it('should handle keyboard input and clear invalid date', async () => {
+            const inputField = await page.find('b2b-date-picker >>> input.b2b-date-picker-input');
+            await inputField.press('3');
+            await inputField.press('2');
+            await inputField.press('.');
+            await inputField.press('1');
+            await inputField.press('1');
+            await inputField.press('.');
+            await inputField.press('2');
+            await inputField.press('0');
+            await inputField.press('2');
+            await inputField.press('4');
+            await page.waitForChanges();
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await inputField.press('Backspace');
+            await page.waitForChanges();
+            const clearedInputValue = await inputField.getProperty('value');
+            expect(clearedInputValue).toBe('');
+        });
+    });
+});

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

@@ -2,39 +2,8 @@ import { h, Host, } from "@stencil/core";
 import { DateUtils } from "../../utils/datepicker/date-picker-util";
 export class B2bDatePicker {
     constructor() {
-        /** The dates that are part of this array are disabled. By default, this is an empty array. */
-        this.disableDates = [];
-        /** Label for the date picker component. */
-        this.label = 'Zeitpunkt auswählen';
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** Default date picker date*/
-        this.preSelectedDate = undefined;
-        /** Whether to show hint message or not. */
-        this.showHint = true;
-        /** The width of the input field of the date picker in pixel. Minimum is 250, maximum is 600px. */
-        this.width = 300;
-        /** Disable the days of the week specified here. */
-        this.disableDays = [];
-        /** Hint text that should be displayed when showHint is true */
-        this.hint = 'Format: TT.MM.JJJJ';
-        /** The placeholder shown in the date picker. */
-        this.placeholder = null;
-        /** 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.DISABLED_DATE_ERROR_MESSAGE = 'Auswahl nicht möglich, bitte gültiges Datum auswählen.';
         this.FORMATTING_ERROR_MESSAGE = 'Format beachten: TT.MM.JJJJ.';
-        this.showDatePicker = false;
-        this.focused = false;
-        this.datePickerView = "Days" /* DatePickerView.Days */;
-        this.selectedMonth = new Date().getMonth();
-        this.selectedYear = new Date().getFullYear();
-        this.selectedDate = undefined;
-        this.userInputDate = '';
-        this.invalid = false;
-        this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
-        this.datesToBeDisabled = [];
-        this.normalizedDisableEvery = [];
         this.today = new Date();
         this.todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
         this.handleInputChange = (event) => {
@@ -112,6 +81,35 @@ export class B2bDatePicker {
         this.handleBackdropDismiss = () => {
             this.showDatePicker = false;
         };
+        this.disablePastDates = undefined;
+        this.disableFutureDates = undefined;
+        this.disableWeekends = undefined;
+        this.disableDates = [];
+        this.label = 'Zeitpunkt auswählen';
+        this.required = false;
+        this.preSelectedDate = undefined;
+        this.showHint = true;
+        this.width = 300;
+        this.disableDays = [];
+        this.disableDatesUntil = undefined;
+        this.disableDatesFrom = undefined;
+        this.hint = 'Format: TT.MM.JJJJ';
+        this.placeholder = null;
+        this.language = 'de';
+        this.showDatePicker = false;
+        this.focused = false;
+        this.datePickerView = "Days" /* DatePickerView.Days */;
+        this.selectedMonth = new Date().getMonth();
+        this.selectedYear = new Date().getFullYear();
+        this.selectedDay = undefined;
+        this.selectedDate = undefined;
+        this.userInputDate = '';
+        this.invalid = false;
+        this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
+        this.datesToBeDisabled = [];
+        this.normalizedDisableEvery = [];
+        this.normalizedDisableDatesUntil = undefined;
+        this.normalizedDisableDatesFrom = undefined;
     }
     isWithWithinLimit() {
         return this.width >= 300 && this.width <= 600;
@@ -423,7 +421,6 @@ export class B2bDatePicker {
         return {
             "disablePastDates": {
                 "type": "boolean",
-                "attribute": "disable-past-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -436,13 +433,11 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Whether the previous dates from the current date are disabled. By default, this is true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-past-dates",
                 "reflect": false
             },
             "disableFutureDates": {
                 "type": "boolean",
-                "attribute": "disable-future-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -455,13 +450,11 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Whether the dates after the current date are disabled. By default, this is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-future-dates",
                 "reflect": false
             },
             "disableWeekends": {
                 "type": "boolean",
-                "attribute": "disable-weekends",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -474,13 +467,11 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Whether the dates that fall on the weekend are disabled. By default, this is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-weekends",
                 "reflect": false
             },
             "disableDates": {
                 "type": "string",
-                "attribute": "disable-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -493,14 +484,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "The dates that are part of this array are disabled. By default, this is an empty array."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-dates",
                 "reflect": false,
                 "defaultValue": "[]"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -513,14 +502,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Label for the date picker component."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Zeitpunkt ausw\u00E4hlen'"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -533,14 +520,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "preSelectedDate": {
                 "type": "string",
-                "attribute": "pre-selected-date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -553,14 +538,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Default date picker date"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "pre-selected-date",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "showHint": {
                 "type": "boolean",
-                "attribute": "show-hint",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -573,14 +556,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Whether to show hint message or not."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "show-hint",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "width": {
                 "type": "number",
-                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -593,14 +574,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "The width of the input field of the date picker in pixel. Minimum is 250, maximum is 600px."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "width",
                 "reflect": false,
                 "defaultValue": "300"
             },
             "disableDays": {
                 "type": "string",
-                "attribute": "disable-days",
                 "mutable": false,
                 "complexType": {
                     "original": "| 'Mo'\n    | 'Di'\n    | 'Mi'\n    | 'Do'\n    | 'Fr'\n    | 'Sa'\n    | 'So'\n    | 'Tu'\n    | 'We'\n    | 'Th'\n    | 'Su'\n    | string\n    | string[]",
@@ -613,14 +592,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Disable the days of the week specified here."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-days",
                 "reflect": false,
                 "defaultValue": "[]"
             },
             "disableDatesUntil": {
                 "type": "string",
-                "attribute": "disable-dates-until",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -633,13 +610,11 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "All the dates until the given specified date will be disabled."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-dates-until",
                 "reflect": false
             },
             "disableDatesFrom": {
                 "type": "string",
-                "attribute": "disable-dates-from",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -652,13 +627,11 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "All the dates until the given specified date will be disabled."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disable-dates-from",
                 "reflect": false
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -671,14 +644,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "Hint text that should be displayed when showHint is true"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false,
                 "defaultValue": "'Format: TT.MM.JJJJ'"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -691,14 +662,12 @@ export class B2bDatePicker {
                     "tags": [],
                     "text": "The placeholder shown in the date picker."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder",
                 "reflect": true,
                 "defaultValue": "null"
             },
             "language": {
                 "type": "string",
-                "attribute": "language",
                 "mutable": false,
                 "complexType": {
                     "original": "'de' | 'en'",
@@ -711,8 +680,7 @@ export class B2bDatePicker {
                     "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/dropdown/dropdown.e2e.js

@@ -0,0 +1,89 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Dropdown', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+      <b2b-dropdown label="Test Dropdown">
+          <option value="option-1" selected id="option-1">Option 1</option>
+          <option value="option-2" id="option-2">Option 2</option>
+      </b2b-dropdown>
+    `);
+    });
+    it('should render the dropdown component', async () => {
+        const element = await page.find('b2b-dropdown');
+        expect(element).not.toBeNull();
+    });
+    it('should receive a custom event when an option is selected', async () => {
+        const element = await page.find('b2b-dropdown');
+        const b2bChange = await page.spyOnEvent('b2b-change');
+        element.triggerEvent('b2b-change');
+        await page.waitForChanges();
+        expect(b2bChange).toHaveReceivedEvent();
+    });
+    // TODO: reimplement this test with new testing framework
+    // it('should emit the selected value when an option is clicked', async () => {
+    //   const b2bChange = await page.spyOnEvent('b2b-change');
+    //
+    //   page.select('b2b-dropdown', 'option-2');
+    //
+    //   await page.waitForChanges();
+    //
+    //   expect(b2bChange).toHaveReceivedEventDetail('option-2');
+    // });
+    it('should disable the select when the property is specified', async () => {
+        let element = await page.find('b2b-dropdown');
+        expect(element).not.toHaveClass('b2b-dropdown--disabled');
+        element.setProperty('disabled', true);
+        await page.waitForChanges();
+        element = await page.find('b2b-dropdown');
+        expect(element).toHaveClass('b2b-dropdown--disabled');
+    });
+    it('should set the select to invalid when the property is specified', async () => {
+        let element = await page.find('b2b-dropdown');
+        expect(element).not.toHaveClass('b2b-dropdown--error');
+        element.setProperty('invalid', true);
+        await page.waitForChanges();
+        element = await page.find('b2b-dropdown');
+        expect(element).toHaveClass('b2b-dropdown--error');
+    });
+    it('should clear the selection and reset to placeholder', async () => {
+        let dropdown = await page.find('b2b-dropdown');
+        await dropdown.callMethod('clearSelection');
+        await page.waitForChanges();
+        dropdown = await page.find('b2b-dropdown');
+        const selectedTextElementAfter = await dropdown.shadowRoot.querySelector('.b2b-dropdown__select');
+        expect(selectedTextElementAfter).not.toBeNull();
+        expect(selectedTextElementAfter.textContent).toBe('Select an option...');
+    });
+    it('should render dynamically added <option> elements using MutationObserver', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-dropdown label="Fruits"></b2b-dropdown>`,
+        });
+        await page.evaluate(() => {
+            const dropdown = document.querySelector('b2b-dropdown');
+            const opt1 = document.createElement('option');
+            opt1.value = 'apple';
+            opt1.textContent = 'Apple';
+            const opt2 = document.createElement('option');
+            opt2.value = 'banana';
+            opt2.textContent = 'Banana';
+            dropdown.appendChild(opt1);
+            dropdown.appendChild(opt2);
+        });
+        const count = await page.evaluate(async () => {
+            const dropdown = document.querySelector('b2b-dropdown');
+            if (!dropdown)
+                return -1;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            const options = dropdown.querySelectorAll('option');
+            return options.length;
+        });
+        expect(count).toBe(2);
+        const dropdownPage = await page.$('b2b-dropdown');
+        const renderedOptions = await dropdownPage.$$('option');
+        const texts = await Promise.all(renderedOptions.map(opt => opt.evaluate(el => { var _a; return (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })));
+        expect(texts).toContain('Apple');
+        expect(texts).toContain('Banana');
+    });
+});