@otto-de/b2b-core-components 1.21.0 → 1.23.0

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

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { DatePickerView } from "./date-picker.types";
+import { DateUtils } from "../../utils/datepicker/date-picker-util";
 export class B2bDatePicker {
     constructor() {
         this.DISABLED_DATE_ERROR_MESSAGE = 'Auswahl nicht möglich, bitte gültiges Datum auswählen.';
@@ -83,9 +84,17 @@ export class B2bDatePicker {
         this.disablePastDates = undefined;
         this.disableFutureDates = undefined;
         this.disableWeekends = undefined;
-        this.label = 'Zeitraum auswählen';
+        this.disableDates = [];
+        this.label = 'Zeitpunkt auswählen';
         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 = DatePickerView.Days;
@@ -96,8 +105,44 @@ export class B2bDatePicker {
         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;
+    }
+    normalizeArrayInput(value) {
+        if (Array.isArray(value)) {
+            return value;
+        }
+        if (typeof value === 'string') {
+            return JSON.parse(value);
+        }
+        return [];
+    }
+    normalizeDisableDatesUntilAndFrom(givenDate) {
+        const [day, month, year] = givenDate.split('.').map(Number);
+        return new Date(year, month - 1, day);
     }
     componentWillLoad() {
+        if (this.disableDates !== '' || this.disableDates.length > 0) {
+            const dateString = this.normalizeArrayInput(this.disableDates);
+            this.datesToBeDisabled = dateString.map(date => {
+                const [day, month, year] = date.split('.').map(Number);
+                return new Date(year, month - 1, day);
+            });
+        }
+        if (this.disableDays !== '' || this.disableDays.length > 0) {
+            this.normalizedDisableEvery = this.normalizeArrayInput(this.disableDays);
+        }
+        if (this.disableDatesUntil !== '' && this.disableDatesUntil !== undefined) {
+            this.normalizedDisableDatesUntil = this.normalizeDisableDatesUntilAndFrom(this.disableDatesUntil);
+        }
+        if (this.disableDatesFrom !== '' && this.disableDatesFrom !== undefined) {
+            this.normalizedDisableDatesFrom = this.normalizeDisableDatesUntilAndFrom(this.disableDatesFrom);
+        }
         if (this.preSelectedDate !== undefined) {
             const [day, month, year] = this.preSelectedDate.split('.').map(Number);
             this.selectedDay = day;
@@ -163,6 +208,7 @@ export class B2bDatePicker {
     }
     isValidDate(day, month, year) {
         const date = new Date(year, month - 1, day);
+        const todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
         const isValidDay = date.getDate() === day;
         const isValidMonth = date.getMonth() + 1 === month;
         const isValidYear = date.getFullYear() === year && year >= 1900 && year <= 2100;
@@ -171,15 +217,16 @@ export class B2bDatePicker {
             return false;
         }
         let isValidRange = true;
-        if (this.disablePastDates && date < this.todayWithoutTime) {
-            this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
-            isValidRange = false;
-        }
-        if (this.disableFutureDates && date > this.todayWithoutTime) {
-            this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
-            isValidRange = false;
-        }
-        if (this.disableWeekends && (date.getDay() == 0 || date.getDay() == 6)) {
+        if (DateUtils.isDisabledDate(date, {
+            disableDates: this.datesToBeDisabled,
+            disablePastDates: this.disablePastDates,
+            disableFutureDates: this.disableFutureDates,
+            disableWeekends: this.disableWeekends,
+            todayWithoutTime: todayWithoutTime,
+            disableEvery: this.normalizedDisableEvery,
+            disableDatesUntil: this.normalizedDisableDatesUntil,
+            disableDatesFrom: this.normalizedDisableDatesFrom,
+        })) {
             this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
             isValidRange = false;
         }
@@ -276,19 +323,21 @@ export class B2bDatePicker {
         }
     }
     render() {
-        return (h(Host, { key: '8c47388da5b4d322847338e17106f6421e570f94' }, h("div", { key: 'a5c01d164a0fd8555df6ee8cd01380072832bc8a', class: "b2b-date-picker" }, h("div", { key: 'ce234fe5588126890b384d742c5fe9cc6482e298', class: "b2b-date-picker-label" }, this.label), h("div", { key: '017889d17ab599540bb4db90b25b90bad1c37f2e', class: {
+        if (!this.isWithWithinLimit())
+            return null;
+        return (h(Host, null, h("div", { class: "b2b-date-picker" }, h("div", { class: "b2b-date-picker-label" }, this.label), h("div", { style: { width: `${this.width}px` }, class: {
                 'b2b-date-picker-input-wrapper': true,
                 'b2b-date-picker-input-wrapper--focused': this.focused || this.showDatePicker,
                 'b2b-date-picker-input-wrapper--error': this.invalid,
-            } }, h("div", { key: 'dbb4c054fd05e75d4fd51cf37d8771062bfc4501', class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
+            } }, h("div", { class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
                 this.moveFocusToInputComponent();
-            } }, h("input", { key: 'f4e4a9a6ba7304d12d3e84290647df5d1e7acd15', type: "text", tabindex: 0, class: {
+            } }, h("input", { type: "text", tabindex: 0, class: {
                 'b2b-date-picker-input': true,
                 'b2b-date-picker-input--error': this.invalid,
             }, value: this.userInputDate, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus, onBlur: () => {
                 this.focused = false;
                 this.handleFocusOut();
-            } })), h("div", { key: 'c604c6f2908bc9d96f0f489fd4758e0fe6c8e5f9', class: "b2b-icons" }, this.userInputDate && (h("div", { tabIndex: 0, onClick: () => {
+            }, placeholder: this.placeholder })), h("div", { class: "b2b-icons" }, this.userInputDate && (h("div", { tabIndex: 0, onClick: () => {
                 this.invalid = false;
                 this.clearDateInput();
             }, class: "b2b-close-icon", onKeyDown: event => {
@@ -296,7 +345,7 @@ export class B2bDatePicker {
                     this.invalid = false;
                     this.clearDateInput();
                 }
-            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: 'c3e12e0904a2ee72ff672415e49e0ebaa48e46d9', tabindex: 0, onClick: () => {
+            } }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { tabindex: 0, onClick: () => {
                 if (this.invalid) {
                     this.invalid = false;
                 }
@@ -308,17 +357,15 @@ export class B2bDatePicker {
                     }
                     this.showHideDatePicker();
                 }
-            }, class: "b2b-event-icon" }, h("b2b-icon", { key: 'a38cbfb24b84ca95bcd2507357e3e003cd5fd708', "aria-label": this.showDatePicker
+            }, class: "b2b-event-icon" }, h("b2b-icon-100", { "aria-label": this.showDatePicker
                 ? 'close date picker'
-                : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: 'addb043cc83121ad0e70611a1621f95d473f7cd1', class: {
+                : '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 === DatePickerView.Days && (h("div", null, h("b2b-date-picker-header", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-date-picker-days-header", null), h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates }))), this.datePickerView === DatePickerView.Months && (h("b2b-date-picker-months", { selectedMonth: this.selectedMonth })), this.datePickerView === 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 === 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 === DatePickerView.Months && (h("b2b-date-picker-months", { language: this.language, selectedMonth: this.selectedMonth })), this.datePickerView === 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: {
                 'b2b-date-picker-hint': true,
                 'b2b-date-picker-hint--error': this.invalid,
-            } }, this.invalid
-            ? this.errorMessage
-            : this.showHint && 'Format: TT.MM.JJJJ'))));
+            } }, this.invalid ? this.errorMessage : this.showHint && this.hint))));
     }
     static get is() { return "b2b-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -385,6 +432,24 @@ export class B2bDatePicker {
                 "attribute": "disable-weekends",
                 "reflect": false
             },
+            "disableDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The dates that are part of this array are disabled. By default, this is an empty array."
+                },
+                "attribute": "disable-dates",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -401,7 +466,7 @@ export class B2bDatePicker {
                 },
                 "attribute": "label",
                 "reflect": false,
-                "defaultValue": "'Zeitraum ausw\u00E4hlen'"
+                "defaultValue": "'Zeitpunkt ausw\u00E4hlen'"
             },
             "preSelectedDate": {
                 "type": "string",
@@ -438,6 +503,130 @@ export class B2bDatePicker {
                 "attribute": "show-hint",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The width of the input field of the date picker in pixel. Minimum is 250, maximum is 600px."
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "300"
+            },
+            "disableDays": {
+                "type": "string",
+                "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[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the days of the week specified here."
+                },
+                "attribute": "disable-days",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "disableDatesUntil": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "All the dates until the given specified date will be disabled."
+                },
+                "attribute": "disable-dates-until",
+                "reflect": false
+            },
+            "disableDatesFrom": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "All the dates until the given specified date will be disabled."
+                },
+                "attribute": "disable-dates-from",
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint text that should be displayed when showHint is true"
+                },
+                "attribute": "hint",
+                "reflect": false,
+                "defaultValue": "'Format: TT.MM.JJJJ'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder shown in the date picker."
+                },
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'de' | 'en'",
+                    "resolved": "\"de\" | \"en\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'de'"
             }
         };
     }
@@ -452,7 +641,11 @@ export class B2bDatePicker {
             "selectedDate": {},
             "userInputDate": {},
             "invalid": {},
-            "errorMessage": {}
+            "errorMessage": {},
+            "datesToBeDisabled": {},
+            "normalizedDisableEvery": {},
+            "normalizedDisableDatesUntil": {},
+            "normalizedDisableDatesFrom": {}
         };
     }
     static get events() {

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

@@ -20,11 +20,19 @@ const meta = {
         disablePastDates: false,
         disableFutureDates: false,
         disableWeekends: false,
+        disableDates: [],
         label: 'Zeitraum auswählen',
         preSelectedDate: '',
         showHint: true,
+        disableDays: [],
+        disableDatesUntil: '',
+        disableDatesFrom: '',
+        hint: 'Format: TT.MM.JJJJ',
+        placeholder: '',
+        width: 600,
+        language: 'de',
     },
-    argTypes: Object.assign(Object.assign({}, getArgTypes('b2b-date-picker')), { preSelectedDate: { control: false } }),
+    argTypes: Object.assign(Object.assign({}, getArgTypes('b2b-date-picker')), { preSelectedDate: { control: false }, width: { control: { type: 'range', min: 300, max: 600, step: 1 } } }),
     render: (_a) => {
         var args = __rest(_a, []);
         if (args.preSelectedDate === '') {
@@ -34,8 +42,16 @@ const meta = {
           disable-past-dates=${args.disablePastDates}
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}
+          disable-dates=${args.disableDates}
           .pre-selected-date="${args.preSelectedDate}"
-          show-hint=${args.showHint}></b2b-date-picker>
+          disable-days=${args.disableDays}
+          disable-dates-until=${args.disableDatesUntil}
+          disable-dates-from=${args.disableDatesFrom}
+          show-hint=${args.showHint}
+          hint=${args.hint}
+          placeholder=${args.placeholder}
+          width=${args.width}
+          language=${args.language}></b2b-date-picker>
       </div>`;
         }
         else {
@@ -45,20 +61,28 @@ const meta = {
           disable-past-dates=${args.disablePastDates}
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}
+          disable-dates=${args.disableDates}
           pre-selected-date="${args.preSelectedDate}"
-          show-hint=${args.showHint}></b2b-date-picker>
+          disable-days=${args.disableDays}
+          disable-dates-until=${args.disableDatesUntil}
+          disable-dates-from=${args.disableDatesFrom}
+          show-hint=${args.showHint}
+          hint=${args.hint}
+          placeholder=${args.placeholder}
+          width=${args.width}
+          language=${args.language}></b2b-date-picker>
       </div>`;
         }
     },
 };
 export default meta;
 export const Default = {
-    args: Object.assign({}, meta.args),
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
             const datePicker = canvasElement.querySelector('b2b-date-picker');
-            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-wrapper');
+            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-focus-wrapper');
             await userEvent.click(b2bDatePickerInputWrapper);
         }, 500);
     },
@@ -69,7 +93,7 @@ export const DisablePastDates = {
         setTimeout(async () => {
             var _a;
             const datePicker = canvasElement.querySelector('b2b-date-picker');
-            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-wrapper');
+            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-focus-wrapper');
             await userEvent.click(b2bDatePickerInputWrapper);
         }, 500);
     },
@@ -80,18 +104,90 @@ export const DisableFutureDates = {
         setTimeout(async () => {
             var _a;
             const datePicker = canvasElement.querySelector('b2b-date-picker');
-            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-wrapper');
+            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-focus-wrapper');
             await userEvent.click(b2bDatePickerInputWrapper);
         }, 500);
     },
 };
 export const DisableWeekends = {
-    args: Object.assign(Object.assign({}, meta.args), { disableWeekends: true }),
+    args: Object.assign(Object.assign({}, meta.args), { disableWeekends: true, preSelectedDate: '01.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
             const datePicker = canvasElement.querySelector('b2b-date-picker');
-            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-wrapper');
+            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-focus-wrapper');
+            await userEvent.click(b2bDatePickerInputWrapper);
+        }, 500);
+    },
+};
+export const DisableDates = {
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025', disableDates: '["10.01.2025", "21.01.2025"]' }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            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);
+        }, 500);
+    },
+};
+export const DisableDays = {
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025', disableDays: '["Mo", "Tu"]' }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            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);
+        }, 500);
+    },
+};
+export const DisableDatesUntil = {
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '26.01.2025', disableDatesUntil: '20.01.2025' }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            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);
+        }, 500);
+    },
+};
+export const DisableDatesFrom = {
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025', disableDatesFrom: '10.01.2025' }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            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);
+        }, 500);
+    },
+};
+export const WithCustomHintMessage = {
+    args: Object.assign(Object.assign({}, meta.args), { showHint: true, hint: 'This is a long hint text message which is longer than the normal default hint message' }),
+};
+export const WithPlaceholder = {
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025', placeholder: 'this is date picker' }),
+};
+export const WithWidth = {
+    args: Object.assign(Object.assign({}, meta.args), { width: 500, preSelectedDate: '01.01.2025' }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            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);
+        }, 500);
+    },
+};
+export const EnglishDatepicker = {
+    args: Object.assign(Object.assign({}, meta.args), { language: 'en', preSelectedDate: '01.01.2025' }),
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            var _a;
+            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);
         }, 500);
     },

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

@@ -1,4 +1,4 @@
-export const Months = [
+export const MonthsGerman = [
     'Jan',
     'Feb',
     'Mär',
@@ -12,7 +12,38 @@ export const Months = [
     'Nov',
     'Dez',
 ];
-export const Weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+export const WeekdaysGerman = [
+    'Mo',
+    'Di',
+    'Mi',
+    'Do',
+    'Fr',
+    'Sa',
+    'So',
+];
+export const WeekdaysEnglish = [
+    'Mo',
+    'Tu',
+    'We',
+    'Th',
+    'Fr',
+    'Sa',
+    'Su',
+];
+export const MonthsEnglish = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
 export var DatePickerView;
 (function (DatePickerView) {
     DatePickerView["Days"] = "Days";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --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-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -43,11 +43,11 @@ export class DropdownComponent {
         selectElement.append(...options);
     }
     render() {
-        return (h(Host, { key: '5ab2b6da866b7dfa16a70986b930c4ab6c498820', class: {
+        return (h(Host, { key: 'e4eb8019f2b434acde4f3adbe597bb255e0cf872', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': this.invalid && !this.disabled,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: 'e086977e610c986f0d6f3539ed31fdee0d7229e7', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: '3a780ca3f170a59ef73f3e72d3668f9941812e9c', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-dropdown"; }

package/dist/collection/components/flyout-menu/flyout-menu-option.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --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-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -223,7 +225,7 @@
 }
 :host(.b2b-flyout-menu__option:hover),
 :host(.b2b-flyout-menu__option:focus) {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
   outline: none;
 }
 :host(.b2b-flyout-menu__option--disabled):hover,

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

@@ -16,7 +16,7 @@ export class FlyoutMenuOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '549433cce616c4ecaaa63f78a9d28f5c1d90a0d1', class: {
+        return (h(Host, { key: '3dc359231f65e0d900c87a90fb16917dec1cef05', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,