@otto-de/b2b-core-components 1.32.2 → 1.33.0

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

@@ -1,11 +1,12 @@
 import { h, Host, } from "@stencil/core";
-import { MonthsGerman, MonthsEnglish } from "./date-picker.types";
+import { MonthsEnglish, MonthsGerman } from "./date-picker.types";
 const keys = {
     ARROW_UP: 'ArrowUp',
     ARROW_DOWN: 'ArrowDown',
     ARROW_RIGHT: 'ArrowRight',
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
+    ESC: 'Escape',
 };
 export class B2bDatePickerMonths {
     constructor() {
@@ -39,28 +40,30 @@ export class B2bDatePickerMonths {
     }
     handleKeyDown(event) {
         event.preventDefault();
-        let index = this.selectedMonth;
         const months = this.getAllMonths();
         let currentMonth = this.getCurrentMonth();
+        let index = months.indexOf(currentMonth);
         switch (event.key) {
             case keys.ARROW_LEFT:
-                index = months.indexOf(currentMonth) - 1;
+                index -= 1;
                 break;
             case keys.ARROW_RIGHT:
-                index = months.indexOf(currentMonth) + 1;
+                index += 1;
                 break;
             case keys.ARROW_UP:
-                index = months.indexOf(currentMonth) - 3;
+                index -= 3;
                 break;
             case keys.ARROW_DOWN:
-                index = months.indexOf(currentMonth) + 3;
+                index += 3;
                 break;
             case keys.ENTER:
-                index = months.indexOf(currentMonth);
                 this.b2bDatePickerMonthSelected.emit({
                     value: index,
                 });
-                break;
+                return;
+            case keys.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
             default:
                 return;
         }
@@ -72,8 +75,12 @@ export class B2bDatePickerMonths {
         }
         this.focusCurrentMonth(months[index]);
     }
+    componentDidRender() {
+        var _a;
+        (_a = this.getCurrentMonth()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
-        return (h(Host, { key: '9ddb8ebbb24997435ceca09cc47ba7dc12b39ba7' }, h("div", { key: 'a650207f538786bb680698ffc293fd59a717ea3a', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+        return (h(Host, { key: '92f546b998c48d274d76db47db997bcda3968033' }, h("div", { key: 'cfd9e12f5d1047d6acf2be7142d070dd64517049', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
     }
     static get is() { return "b2b-date-picker-months"; }
     static get encapsulation() { return "shadow"; }
@@ -135,7 +142,7 @@ export class B2bDatePickerMonths {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted on selecting month*"
+                    "text": "Event emitted on selecting month"
                 },
                 "complexType": {
                     "original": "MonthSelectedEventDetail",
@@ -148,6 +155,27 @@ export class B2bDatePickerMonths {
                         }
                     }
                 }
+            }, {
+                "method": "b2bDatePickerEscape",
+                "name": "b2b-date-picker-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/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::EscapePressed"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "host"; }

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

@@ -5,6 +5,7 @@ const keys = {
     ARROW_RIGHT: 'ArrowRight',
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
+    ESC: 'Escape',
 };
 export class B2bDatePickerYears {
     constructor() {
@@ -50,32 +51,34 @@ export class B2bDatePickerYears {
             return years;
         };
         this.selectedYear = undefined;
-        this.yearsRange = [];
+        this.yearsRange = Array.from({ length: 201 }, (_, i) => i + 1900);
     }
     handleKeyDown(event) {
         event.preventDefault();
-        let index = this.yearsRange.indexOf(this.selectedYear);
         const years = this.getAllYears();
         let currentYear = this.getCurrentYear();
+        let index = years.indexOf(currentYear);
         switch (event.key) {
             case keys.ARROW_LEFT:
-                index = years.indexOf(currentYear) - 1;
+                index -= 1;
                 break;
             case keys.ARROW_RIGHT:
-                index = years.indexOf(currentYear) + 1;
+                index += 1;
                 break;
             case keys.ARROW_UP:
-                index = years.indexOf(currentYear) - 3;
+                index -= 3;
                 break;
             case keys.ARROW_DOWN:
-                index = years.indexOf(currentYear) + 3;
+                index += 3;
                 break;
             case keys.ENTER:
-                index = years.indexOf(currentYear);
                 this.b2bDatePickerYearSelected.emit({
                     value: this.yearsRange[index],
                 });
-                break;
+                return;
+            case keys.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
             default:
                 return;
         }
@@ -87,18 +90,14 @@ export class B2bDatePickerYears {
         }
         this.focusCurrentYear(years[index]);
     }
-    componentWillLoad() {
-        for (let i = 1900; i <= 2100; i++) {
-            this.yearsRange.push(i);
-        }
-    }
     componentDidLoad() {
         if (this.selectedYear > 0) {
             this.scrollToYear(this.selectedYear);
+            this.getCurrentYear().focus();
         }
     }
     render() {
-        return (h(Host, { key: '22394d693b0a966c62b74de49c00d72b346a2e64' }, h("div", { key: 'a2c33dc133169c2cb558e9b92d78b56cf7fb108e', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
+        return (h(Host, { key: '2e9b64e857f36f8623cb13aa5ebd5346e21bdc6f' }, h("div", { key: 'b6a82d5fbfc2f18aab9c2c64efe3c8bbe63cfc19', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
     }
     static get is() { return "b2b-date-picker-years"; }
     static get encapsulation() { return "shadow"; }
@@ -147,7 +146,7 @@ export class B2bDatePickerYears {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted on selecting year*"
+                    "text": "Event emitted on selecting year"
                 },
                 "complexType": {
                     "original": "YearSelectedEventDetail",
@@ -160,6 +159,27 @@ export class B2bDatePickerYears {
                         }
                     }
                 }
+            }, {
+                "method": "b2bDatePickerEscape",
+                "name": "b2b-date-picker-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/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::EscapePressed"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "host"; }

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

@@ -234,7 +234,6 @@
 }
 .b2b-date-picker {
   position: relative;
-  z-index: 300;
 }
 .b2b-date-picker__backdrop {
   position: fixed;
@@ -242,7 +241,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 0;
+  z-index: 100;
 }
 .b2b-date-picker-input-focus-wrapper {
   width: 100%;
@@ -326,7 +325,7 @@ b2b-input-label {
   padding-bottom: var(--b2b-size-40);
   outline: none;
   background-color: var(--b2b-color-white-100);
-  z-index: 1001;
+  z-index: 101;
 }
 .b2b-date-picker-body--hidden {
   display: none;

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

@@ -137,7 +137,7 @@ export class B2bDatePicker {
         if (this.disableDatesFrom && this.disableDatesFrom !== '') {
             this.normalizedDisableDatesFrom = this.normalizeDisableDatesUntilAndFrom(this.disableDatesFrom);
         }
-        if (this.preSelectedDate) {
+        if (this.preSelectedDate && this.preSelectedDate !== '') {
             const [day, month, year] = this.preSelectedDate.split('.').map(Number);
             this.selectedDay = day;
             this.selectedMonth = month - 1;
@@ -153,7 +153,12 @@ export class B2bDatePicker {
             this.userInputDate = '';
         }
     }
-    handleEscapePress() {
+    handleEscapePress(event) {
+        if (this.datePickerView !== "Days" /* DatePickerView.Days */) {
+            this.datePickerView = "Days" /* DatePickerView.Days */;
+            event.preventDefault();
+            return;
+        }
         this.showDatePicker = false;
     }
     handleDateSelection(event) {
@@ -384,10 +389,10 @@ export class B2bDatePicker {
                 : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { class: {
                 'b2b-date-picker-body': true,
                 'b2b-date-picker-body--hidden': !this.showDatePicker,
-            } }, this.datePickerView === "Days" /* DatePickerView.Days */ && (h("div", null, h("b2b-date-picker-header", { language: this.language, selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-date-picker-days-header", { language: this.language }), h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates, disableDates: this.datesToBeDisabled, disableDatesUntil: this.normalizedDisableDatesUntil, disableEvery: this.normalizedDisableEvery, disableDatesFrom: this.normalizedDisableDatesFrom }))), this.datePickerView === "Months" /* DatePickerView.Months */ && (h("b2b-date-picker-months", { language: this.language, selectedMonth: this.selectedMonth })), this.datePickerView === "Years" /* DatePickerView.Years */ && (h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), !this.showDatePicker && (h("span", { class: {
+            } }, this.datePickerView === "Days" /* DatePickerView.Days */ && (h("div", null, h("b2b-date-picker-header", { language: this.language, selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-date-picker-days-header", { language: this.language }), h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates, disableDates: this.datesToBeDisabled, disableDatesUntil: this.normalizedDisableDatesUntil, disableEvery: this.normalizedDisableEvery, disableDatesFrom: this.normalizedDisableDatesFrom }))), this.datePickerView === "Months" /* DatePickerView.Months */ && (h("b2b-date-picker-months", { language: this.language, selectedMonth: this.selectedMonth })), this.datePickerView === "Years" /* DatePickerView.Years */ && (h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), h("span", { class: {
                 'b2b-date-picker-hint': true,
                 'b2b-date-picker-hint--error': this.invalid,
-            } }, this.invalid ? this.errorMessage : this.showHint && this.hint))));
+            } }, this.invalid ? this.errorMessage : this.showHint && this.hint)));
     }
     static get is() { return "b2b-date-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,10 +83,16 @@ export const Default = {
     args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
-            var _a;
+            var _a, _b, _c;
             const datePicker = canvasElement.querySelector('b2b-date-picker');
-            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-focus-wrapper');
-            await userEvent.click(b2bDatePickerInputWrapper);
+            const wrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-focus-wrapper');
+            const days = (_b = datePicker.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('b2b-date-picker-days');
+            const day = (_c = days.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.b2b-date-picker-day--selected');
+            await userEvent.click(wrapper);
+            setTimeout(async () => {
+                day.focus();
+                await userEvent.keyboard('{arrowright}{arrowright}');
+            }, 500);
         }, 500);
     },
 };

package/dist/collection/components/dropdown/dropdown.css

@@ -323,6 +323,10 @@
   background-color: var(--b2b-color-white-100);
   pointer-events: none;
 }
+:host(.b2b-dropdown) .b2b-dropdown__option--selected {
+  background-color: var(--b2b-color-black-100);
+  color: var(--b2b-color-white-100);
+}
 :host(.b2b-dropdown) b2b-input-label {
   display: block;
   margin-bottom: var(--b2b-size-5);

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

@@ -73,7 +73,7 @@ describe('B2B-Dropdown', () => {
         });
         const count = await page.evaluate(async () => {
             const dropdown = document.querySelector('b2b-dropdown');
-            if (!dropdown)
+            if (dropdown == null)
                 return -1;
             await new Promise(resolve => setTimeout(resolve, 2000));
             const options = dropdown.querySelectorAll('option');

package/dist/collection/components/dropdown/dropdown.js

@@ -7,7 +7,7 @@ export class DropdownComponent {
                 this.isOpen = false;
         };
         this.toggleDropdown = () => {
-            if (!this.disabled)
+            if (!this.disabled && !this.groupDisabled)
                 this.isOpen = !this.isOpen;
         };
         this.onFocus = (ev) => {
@@ -71,6 +71,7 @@ export class DropdownComponent {
         this.invalid = false;
         this.hint = undefined;
         this.error = undefined;
+        this.groupDisabled = false;
         this.isOpen = false;
         this.focused = false;
         this.selectedValue = '';
@@ -141,14 +142,14 @@ export class DropdownComponent {
         });
     }
     render() {
-        const hasError = this.invalid && !this.disabled;
-        const showHint = this.hint && (!this.invalid || this.disabled);
+        const hasError = this.invalid && !this.disabled && !this.groupDisabled;
+        const showHint = this.hint && !hasError;
         const showError = this.error && hasError;
-        return (h(Host, { key: '12c5872badf4168d07a0c3e0281c4014f50c05f6', class: {
+        return (h(Host, { key: 'a58a7ec156677962cc7a3d7ca421d4c475d8cd77', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
-                'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '9c1f7ee41956ee0ea6d9913bc6f0831a3800b749', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '580dcbbcdbc6e8d7c60ff2fbfcd89e94e419862c', class: {
+                'b2b-dropdown--disabled': this.disabled || this.groupDisabled,
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '27d151cfb88bbfb1e112e276a8f6cc668f178a36', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: 'cdce04cf08cb0256dab58d22c4a41430aa054fd1', class: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,
@@ -329,6 +330,27 @@ export class DropdownComponent {
                 },
                 "attribute": "error",
                 "reflect": false
+            },
+            "groupDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Whether the parent input group is disabled. Per default, it is false."
+                        }],
+                    "text": ""
+                },
+                "attribute": "group-disabled",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/dropdown/dropdown.stories.js

@@ -1,9 +1,9 @@
+import { userEvent } from "@storybook/test";
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const Template = ({ label, required, name, disabled, invalid, hint, error, }) => {
-    const defaultLabel = label ? label : 'Favorite Fruit';
+const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid, hint, error, selected = false, }) => {
     return html `<b2b-dropdown
-    label="${defaultLabel}"
+    label="${label}"
     name="${name}"
     error="${error}"
     hint="${hint}"
@@ -13,7 +13,9 @@ const Template = ({ label, required, name, disabled, invalid, hint, error, }) =>
     <option value="strawberry">Strawberry</option>
     <option value="orange">Orange</option>
     <option value="banana">Banana</option>
-    <option value="pineapple">Pineapple</option>
+    ${selected
+        ? html `<option value="pineapple" selected="true">Pineapple</option>`
+        : html `<option value="pineapple">Pineapple</option>`}
     <option value="grapes">Grapes</option>
     <option value="watermelon">Watermelon</option>
     <option value="papaya">Papaya</option>
@@ -44,6 +46,17 @@ story030Error.storyName = 'Error';
 export const story040Required = Template.bind({});
 story040Required.args = Object.assign(Object.assign({}, defaultArgs), { required: true });
 story040Required.storyName = 'Required';
+export const story050Selected = Template.bind({});
+story050Selected.args = Object.assign(Object.assign({}, defaultArgs), { selected: true });
+story050Selected.storyName = 'Selected';
+story050Selected.play = async ({ canvasElement }) => {
+    setTimeout(async () => {
+        var _a;
+        const dropdown = canvasElement.querySelector('b2b-dropdown');
+        const wrapper = (_a = dropdown.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-dropdown__select');
+        await userEvent.click(wrapper);
+    }, 500);
+};
 const dropdownArgs = getArgTypes('b2b-dropdown');
 export default {
     title: 'Components/Form/Dropdown',

package/dist/collection/components/flyout-menu/flyout-menu.e2e.js

@@ -62,8 +62,13 @@ describe('B2B-FlyoutMenu', () => {
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option[option="option3"]');
-        await flyoutMenuOption.click();
-        await page.waitForChanges();
+        try {
+            await flyoutMenuOption.click();
+            await page.waitForChanges();
+        }
+        catch (_a) {
+            // expected - not clickable
+        }
         expect(flyoutMenuOption).not.toBeNull();
         expect(optionSelectedEventSpy).not.toHaveReceivedEvent();
     });