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

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { W as Weekdays } from './date-picker.types.js';
+import { W as WeekdaysEnglish, a as WeekdaysGerman } from './date-picker.types.js';
 
 const datePickerDaysHeaderCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-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-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:root .b2b-date-picker-days-header,:host .b2b-date-picker-days-header{display:grid;grid-template-columns:repeat(7, 1fr);padding:0 var(--b2b-size-40) 0 var(--b2b-size-40)}:root .b2b-date-picker-days-header .b2b-date-picker-day,:host .b2b-date-picker-days-header .b2b-date-picker-day{width:var(--b2b-size-90);height:var(--b2b-size-55);border-radius:5px;text-align:center;font-weight:var(--b2b-font-weight-normal);color:var(--b2b-color-black-100);font-size:var(--b2b-size-35)}";
 const B2bDatePickerDaysHeaderStyle0 = datePickerDaysHeaderCss;
@@ -11,18 +11,22 @@ const B2bDatePickerDaysHeader = /*@__PURE__*/ proxyCustomElement(class B2bDatePi
         this.__attachShadow();
         this.displayWeekDays = () => {
             let renderWeekDays = [];
-            Weekdays.forEach(day => {
+            const weekdays = this.language === 'en' ? WeekdaysEnglish : WeekdaysGerman;
+            weekdays.forEach(day => {
                 renderWeekDays.push(h("div", { class: "b2b-date-picker-day" }, day));
             });
             return renderWeekDays;
         };
+        this.language = 'de';
     }
     render() {
-        return (h(Host, { key: 'dd19aa810becf64b496f66534c7e81cff239507a' }, h("div", { key: '75a38a70e3152892458ab53116f9ed44487aaba6', 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())));
     }
     get host() { return this; }
     static get style() { return B2bDatePickerDaysHeaderStyle0; }
-}, [1, "b2b-date-picker-days-header"]);
+}, [1, "b2b-date-picker-days-header", {
+        "language": [1]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1,5 +1,54 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
+class DateUtils {
+    static isSameDate(date1, date2) {
+        return (date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate());
+    }
+    static isDisabledDate(givenDate, options) {
+        const { disableDates = [], disablePastDates = false, disableFutureDates = false, disableWeekends = false, todayWithoutTime = new Date(), disableEvery = [], disableDatesUntil, disableDatesFrom, } = options;
+        const dayNameToIndex = {
+            So: 0,
+            Su: 0,
+            Mo: 1,
+            Di: 2,
+            Tu: 2,
+            Mi: 3,
+            We: 3,
+            Do: 4,
+            Th: 4,
+            Fr: 5,
+            Sa: 6,
+        };
+        const isExplicitlyDisabled = disableDates.length > 0 &&
+            disableDates.some(disabledDate => this.isSameDate(disabledDate, givenDate));
+        const isPastDate = disablePastDates && givenDate < todayWithoutTime;
+        const isFutureDate = disableFutureDates && givenDate > todayWithoutTime;
+        const isWeekend = disableWeekends && (givenDate.getDay() === 0 || givenDate.getDay() === 6);
+        const isDayToDisable = disableEvery.length > 0 &&
+            disableEvery.some(day => dayNameToIndex[day] === givenDate.getDay());
+        const isBeforeDisableUntil = givenDate <= disableDatesUntil;
+        const isAfterDisableFrom = givenDate >= disableDatesFrom;
+        return (isExplicitlyDisabled ||
+            isPastDate ||
+            isFutureDate ||
+            isWeekend ||
+            isDayToDisable ||
+            isBeforeDisableUntil ||
+            isAfterDisableFrom);
+    }
+    static parseStringToDateArray(value) {
+        return value
+            .split(',')
+            .map(date => date.trim())
+            .map(dateStr => {
+            const [day, month, year] = dateStr.split('.').map(Number);
+            return new Date(year, month - 1, day);
+        });
+    }
+}
+
 const datePickerDaysCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-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-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-date-picker-days{display:grid;grid-template-columns:repeat(7, 1fr);padding:0 var(--b2b-size-40) 0 var(--b2b-size-40)}.b2b-date-picker-days .b2b-date-picker-day{width:var(--b2b-size-90);height:var(--b2b-size-90);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:var(--b2b-font-weight-normal);color:var(--b2b-color-black-100);font-size:var(--b2b-size-35)}.b2b-date-picker-days .b2b-date-picker-day:hover{cursor:pointer}.b2b-date-picker-days .b2b-date-picker-day:hover,.b2b-date-picker-days .b2b-date-picker-day:focus{background-color:var(--b2b-color-hover)}.b2b-date-picker-days .b2b-date-picker-day--disabled{border-radius:5px;color:var(--b2b-color-grey-200);pointer-events:none}.b2b-date-picker-days .b2b-date-picker-day--today{border:1px solid var(--b2b-color-black-50);box-sizing:border-box;width:100%;height:100%}.b2b-date-picker-days .b2b-date-picker-day--selected{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100);pointer-events:none;width:100%}.b2b-date-picker-days .b2b-date-picker-day--focussed{background-color:var(--b2b-color-hover)}";
 const B2bDatePickerDaysStyle0 = datePickerDaysCss;
 
@@ -42,23 +91,6 @@ const B2bDatePickerDays = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerDa
                 date.focus();
             }
         };
-        this.isDisabledDate = (givenDate) => {
-            if (this.disablePastDates) {
-                if (givenDate < this.todayWithoutTime)
-                    return true;
-            }
-            else if (this.disableFutureDates) {
-                if (givenDate > this.todayWithoutTime)
-                    return true;
-            }
-            else if (this.disableWeekends) {
-                if (givenDate.getDay() == 0 || givenDate.getDay() == 6)
-                    return true;
-            }
-            else {
-                return false;
-            }
-        };
         this.handleClick = (event) => {
             /** Remove focus from the clicked element */
             event.target.blur();
@@ -75,7 +107,16 @@ const B2bDatePickerDays = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerDa
             /** Populate days array with day numbers. */
             for (let i = 1; i <= daysInMonth; i++) {
                 let givenDate = new Date(this.selectedYear, this.selectedMonth, i);
-                let disabled = this.isDisabledDate(givenDate);
+                let disabled = DateUtils.isDisabledDate(givenDate, {
+                    disableDates: this.disableDates,
+                    disablePastDates: this.disablePastDates,
+                    disableFutureDates: this.disableFutureDates,
+                    disableWeekends: this.disableWeekends,
+                    todayWithoutTime: this.todayWithoutTime,
+                    disableEvery: this.disableEvery,
+                    disableDatesUntil: this.disableDatesUntil,
+                    disableDatesFrom: this.disableDatesFrom,
+                });
                 days.push(h("div", { class: {
                         'b2b-date-picker-day': true,
                         'b2b-date-picker-day--disabled': disabled,
@@ -98,6 +139,10 @@ const B2bDatePickerDays = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerDa
         this.disablePastDates = false;
         this.disableFutureDates = false;
         this.disableWeekends = false;
+        this.disableDates = [];
+        this.disableEvery = [];
+        this.disableDatesUntil = undefined;
+        this.disableDatesFrom = undefined;
         this.disabled = false;
     }
     componentDidLoad() {
@@ -172,7 +217,7 @@ const B2bDatePickerDays = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerDa
         });
     }
     render() {
-        return (h(Host, { key: '932793a700279c0064a3a36c08d75517861f2420' }, h("div", { key: '98179650a1f3a4e4af1a8ddee3073c48cc46beab', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
+        return (h(Host, { key: 'c739f1a046740cc9141140354bd262916c04b42c' }, h("div", { key: 'd08a86f51331b971209f11d8b2c783a1d7d91b05', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
     }
     get host() { return this; }
     static get style() { return B2bDatePickerDaysStyle0; }
@@ -183,6 +228,10 @@ const B2bDatePickerDays = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerDa
         "disablePastDates": [4, "disable-past-dates"],
         "disableFutureDates": [4, "disable-future-dates"],
         "disableWeekends": [4, "disable-weekends"],
+        "disableDates": [16],
+        "disableEvery": [16],
+        "disableDatesUntil": [16],
+        "disableDatesFrom": [16],
         "disabled": [32]
     }, [[0, "keydown", "handleKeyDown"]]]);
 function defineCustomElement() {
@@ -199,4 +248,4 @@ function defineCustomElement() {
     } });
 }
 
-export { B2bDatePickerDays as B, defineCustomElement as d };
+export { B2bDatePickerDays as B, DateUtils as D, defineCustomElement as d };

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { D as DatePickerView, M as Months } from './date-picker.types.js';
+import { D as DatePickerView, M as MonthsEnglish, b as MonthsGerman } from './date-picker.types.js';
 import { d as defineCustomElement$2 } from './headline.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
@@ -16,11 +16,13 @@ const B2bDatePickerHeader = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
         this.b2bDatePickerViewChanged = createEvent(this, "b2b-date-picker-view-changed", 7);
         this.selectedMonth = undefined;
         this.selectedYear = undefined;
+        this.language = 'de';
     }
     render() {
-        return (h(Host, { key: '8daf6532999d810a0d0cc69693f7220f705f5209' }, h("div", { key: 'b6e3e10fe7a0b7726201269a0c5695a6ae52ec32', class: "b2b-date-picker-header" }, h("button", { key: '2a71c4072fa1a41ba5572d4faeedf493603189a2', class: "b2b-date-picker-nav--left", onClick: this.b2bDatePickerPreviousMonth.emit, onMouseOut: event => {
+        const Months = this.language === 'en' ? MonthsEnglish : MonthsGerman;
+        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", { key: 'e83c26f329aa68705ce39651d133050705f73d93', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '5b84578186aa4f676b247ee6e31cad24a6e4f3f3', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
+            }, "aria-label": "previous month" }, h("b2b-icon", { key: '1910bbb66a8f1a91794588317418660b84ac0fb0', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '3fd3ead55341abfbe3d89192882f33a86c73523d', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: DatePickerView.Months,
                 });
@@ -30,7 +32,7 @@ const B2bDatePickerHeader = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
                         value: DatePickerView.Months,
                     });
                 }
-            } }, Months[this.selectedMonth]), h("b2b-headline", { key: 'a16771e52873a8e99ebc86b702a59d49229a20c8', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
+            } }, Months[this.selectedMonth]), h("b2b-headline", { key: 'cee9e20e84f0a7470c22256990f2e194fe099bd3', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: DatePickerView.Years,
                 });
@@ -40,15 +42,16 @@ const B2bDatePickerHeader = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
                         value: DatePickerView.Years,
                     });
                 }
-            } }, this.selectedYear), h("button", { key: '189dea7aba624d2dc2d572ab6d502450bd2f8ec5', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
+            } }, this.selectedYear), h("button", { key: 'a14a7321c8489a37ea13e08c3fc3b56988178fc8', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
                 event.target.blur();
-            }, "aria-label": "next month" }, h("b2b-icon", { key: '4c442c9f69dceec1b4d02d64a3d75a6fda18e2d1', icon: "b2b_icon-arrow-right", clickable: true })))));
+            }, "aria-label": "next month" }, h("b2b-icon", { key: 'db899a7ee62a70e264f8db0298be0e71875ce4d1', icon: "b2b_icon-arrow-right", clickable: true })))));
     }
     get host() { return this; }
     static get style() { return B2bDatePickerHeaderStyle0; }
 }, [1, "b2b-date-picker-header", {
         "selectedMonth": [2, "selected-month"],
-        "selectedYear": [2, "selected-year"]
+        "selectedYear": [2, "selected-year"],
+        "language": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { M as Months } from './date-picker.types.js';
+import { M as MonthsEnglish, b as MonthsGerman } from './date-picker.types.js';
 
 const datePickerMonthsCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-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-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host .b2b-date-picker-months{display:grid;grid-template-columns:repeat(3, 1fr);padding:var(--b2b-size-40) var(--b2b-size-40) 0 var(--b2b-size-40);column-gap:var(--b2b-size-25);row-gap:var(--b2b-size-25)}:host .b2b-date-picker-month{height:var(--b2b-size-80);border-radius:5px;text-align:center;display:flex;align-items:center;justify-content:center;font-weight:var(--b2b-font-weight-normal);background-color:var(--b2b-color-grey-25);font-size:var(--b2b-size-35);color:var(--b2b-color-black-100)}:host .b2b-date-picker-month:hover{cursor:pointer}:host .b2b-date-picker-month:hover,:host .b2b-date-picker-month:focus{background-color:var(--b2b-color-hover)}:host .b2b-date-picker-month--selected{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100)}:host .b2b-date-picker-month--selected:hover,:host .b2b-date-picker-month--selected:focus{background-color:var(--b2b-color-black-100)}";
 const B2bDatePickerMonthsStyle0 = datePickerMonthsCss;
@@ -33,6 +33,7 @@ const B2bDatePickerMonths = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
         };
         this.renderDatePickerMonths = () => {
             let months = [];
+            const Months = this.language === 'en' ? MonthsEnglish : MonthsGerman;
             for (let i = 0; i < 12; i++) {
                 months.push(h("div", { class: {
                         'b2b-date-picker-month': true,
@@ -42,6 +43,7 @@ const B2bDatePickerMonths = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
             return months;
         };
         this.selectedMonth = undefined;
+        this.language = 'de';
     }
     handleKeyDown(event) {
         event.preventDefault();
@@ -79,12 +81,13 @@ const B2bDatePickerMonths = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
         this.focusCurrentMonth(months[index]);
     }
     render() {
-        return (h(Host, { key: '18baacddca5d04aa0641fdbdb4c7429c929d5080' }, h("div", { key: '55f0326e38f95bf371bb3a65e3cf235ee786ff59', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+        return (h(Host, { key: 'a6b5d77d82b661f742e95eba15f60ff01ff6d080' }, h("div", { key: '29dce426b9f6d3401c04c07d5be997f4be09b9d6', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
     }
     get host() { return this; }
     static get style() { return B2bDatePickerMonthsStyle0; }
 }, [1, "b2b-date-picker-months", {
-        "selectedMonth": [2, "selected-month"]
+        "selectedMonth": [2, "selected-month"],
+        "language": [1]
     }, [[0, "keydown", "handleKeyDown"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

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

package/dist/components/input-group.js

@@ -63,7 +63,7 @@ const B2BInputGroup = /*@__PURE__*/ proxyCustomElement(class B2BInputGroup exten
         }
     }
     render() {
-        return (h(Host, { key: 'b8b1b8ca1e2bac0974250a4463080b460a836b82' }, h("div", { key: 'db2150667982e6849c1d0f7f6de2463a4493b268', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '559d5d1113c44d1495dcca04d83da188440a62e8', name: "start" }), h("slot", { key: 'ed5cea7b3670339bd5c762974a10b072c6ed00c8' }), h("slot", { key: '88b19361e0b0755d745481aa4013a055ae30f620', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
+        return (h(Host, { key: '43603b7006f229a5ee288cc9c86c5509dc3d074f' }, h("div", { key: '268bd1737a9390c53f1294eb0a45ad3b041ad5bb', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '9c3c5fc67ce75fba846aacf456660760c00a4aa9', name: "start" }), h("slot", { key: 'd8db016be6494540aa73fca778b77a49dc1211e8' }), h("slot", { key: 'be32b1d7e14e8beaa2149c1ccc6cc8cf92e735d9', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
                 'b2b-input-wrapper__hint': true,
                 'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
             } }, this.invalid && !this.disabled ? this.error : this.hint))));

package/dist/components/input-label.js

@@ -12,11 +12,11 @@ const InputLabelComponent = /*@__PURE__*/ proxyCustomElement(class InputLabelCom
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '7ecad3b66de20150248867f6f88af8d85f565b32' }, h("label", { key: '932ad343e8287bf8e51f0a8efabd2a42badc5cdc', class: {
+        return (h(Host, { key: '126328bc7fd56d56e2a57559707cbba2a482dbd7' }, h("label", { key: 'c8b6cedbd7f453c6ef5c42c7e9d373b5c8bcd648', class: {
                 'b2b-input-label': true,
                 'b2b-input-label--required': this.required,
                 'b2b-input-label--disabled': this.disabled,
-            } }, h("slot", { key: '6750bd4ac12f4fa2bcd4c93f5883e4db3da24302' }))));
+            } }, h("slot", { key: '3ae21cf9871d0033febc12445c525f21a343f4e5' }))));
     }
     get hostElement() { return this; }
     static get style() { return B2bInputLabelStyle0; }

package/dist/components/input-list-option.js

@@ -19,7 +19,7 @@ const InputListOptionComponent = /*@__PURE__*/ proxyCustomElement(class InputLis
         }
     }
     render() {
-        return (h(Host, { key: 'f83b743d32f09766bd7258b093128a249eb80ca5', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
+        return (h(Host, { key: '2bd67457a721cf4a0c05335a70897c1377e02a14', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
     }
     static get style() { return B2bInputListOptionStyle0; }
 }, [0, "b2b-input-list-option", {

package/dist/components/input-list.js

@@ -149,13 +149,13 @@ const InputListComponent = /*@__PURE__*/ proxyCustomElement(class InputListCompo
     */
     render() {
         const groupOrderClass = this.getGroupOrderClassName() || '';
-        return (h(Host, { key: '7fe53e255c889f50b4eab26b92530f83e8753980', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: 'd7500b4d7907880f1ec63732550c1fbf59023a50', class: {
+        return (h(Host, { key: 'cee8194b1c04e5d7c125d6fbef762a6256b522a6', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '075f5137c650bec5608b07bc834c36bd0be8dd83', class: {
                 'b2b-input-list': true,
                 'b2b-input-list__options-on': this.hasOptionList &&
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, h("b2b-input", { key: '57bbb5aea84e6bb803e9fe1f1c8264c2258ece9c', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+            } }, h("b2b-input", { key: 'd2d23370cc4e430e68a4e75014ea31d19802557f', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/input.js

@@ -84,18 +84,18 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
         this.getSlottedText();
     }
     render() {
-        return (h(Host, { key: '73f78ae344c8a82c27d4541e11844c80c75905bb', class: {
+        return (h(Host, { key: '54b702bf7a3f164b6458cd02f6430c89e32a0dc1', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'de40911c1ce5f136db6cba71630435c57d1ec274', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'ed3f54f0c1bc643647db180cd81d3a8184ae58e0', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: 'aa8dcd487628e4d3aae3a1c962562b9180f015fd', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '8a01f065e0716451b22ac33dc2c3e75b4e9ae54f', class: {
+            } }, h("slot", { key: '5e5e6bfacd84ad4dca5b6540a791f9f2348c69da', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '3bb7a970f7cbabf0c543676746096c8b33ca35c4', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
                 'b2b-input__native-input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'b1c50810df68b16f88e5268eb542491a891fabc3', name: "end" })), (this.hint !== undefined && !this.invalid) ||
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '75a283d3128b6abbc5289ca8fbe7ff65ba60c6d5', name: "end" })), (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)) : ('')));
     }
     get hostElement() { return this; }

package/dist/components/multiselect-option.js

@@ -22,9 +22,9 @@ const B2bMultiSelectOption = /*@__PURE__*/ proxyCustomElement(class B2bMultiSele
         this.indeterminate = false;
     }
     render() {
-        return (h(Host, { key: 'b887ec12facd858bac321321f7cfff1d809bb89a', role: "option", class: {
+        return (h(Host, { key: '3e19ddbb9623536a344b9d36529af3f7012a965d', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: '768a43d067b9132f25e75d785463454a73e9565b', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: 'ad7c4e1f2de4361af279ca6648c9a14048773a57', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get style() { return B2bMultiselectOptionStyle0; }
 }, [0, "b2b-multiselect-option", {

package/dist/components/rounded-icon.js

@@ -13,16 +13,16 @@ const RoundedIconComponent = /*@__PURE__*/ proxyCustomElement(class RoundedIconC
         this.contentColor = 'var(--b2b-color-copy-default)';
     }
     render() {
-        return (h(Host, { key: 'b2542f30738b99706e264260504902e148af170f' }, h("div", { key: '01d1b4b8118a1754fe85354eb47dfb78a778b1f6', style: {
+        return (h(Host, { key: 'aeaecbab894eae02bf8cc6c441175ec07b5540e2' }, h("div", { key: '1b25b7d2d917c742361c8126b11d5254a9fac9c1', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: '3e319fcf7d1acc4c3a534c26f6106717a8d57fdf', style: {
+            } }, h("div", { key: '0c5f34202db459eb45f37d1fb16bede9dd50a2e7', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '1f14bca3fb6fe8dc92d6cadc173f5b470a425db6', name: "icon" })), h("div", { key: '2e07fb2694f642788c09361a9aaa7c6f768107cc', style: {
+            } }, h("slot", { key: 'f87224fdf932a13ed106c10a2ff9b173fc833bee', name: "icon" })), h("div", { key: 'a0cbad312cc610ee4f18a76b32c3d690dcd6a7b2', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'c84e59d64323d19ff2a2a3245d6db424f8135bc6', name: "text" })))));
+            } }, h("slot", { key: '518902a11b10391fdb5d654baaf84ba6f7c0c65e', name: "text" })))));
     }
     static get style() { return B2bRoundedIconStyle0; }
 }, [1, "b2b-rounded-icon", {

package/dist/components/separator.js

@@ -11,7 +11,7 @@ const B2bSeparatorComponent = /*@__PURE__*/ proxyCustomElement(class B2bSeparato
         this.alignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '5d26a4636a4e167729ce76edfd20d64ae6f49c07' }, h("div", { key: 'e3f04f51c3a3a32fee947b109095aa682b64df49', class: {
+        return (h(Host, { key: '2a85d5e6381c1c666d57d9439ee6df185b7e41d3' }, h("div", { key: '6939b9e06e5c27d2ea0299a1165accaeeb33bc3e', class: {
                 [`b2b-separator--${this.alignment}`]: true,
             } })));
     }

package/dist/components/spinner.js

@@ -12,7 +12,7 @@ const SpinnerComponent = /*@__PURE__*/ proxyCustomElement(class SpinnerComponent
         this.color = 'primary';
     }
     render() {
-        return (h("div", { key: '4260cc2e742b9d3a77fc1739f7de248ee70ffd69', class: {
+        return (h("div", { key: 'cc460c988fe2e7cf684ad7e6ebca7089a67a9de8', class: {
                 'b2b-spinner': true,
                 ['b2b-spinner--size-' + this.size]: true,
                 ['b2b-spinner--color-' + this.color]: true,

package/dist/components/table-cell.js

@@ -42,14 +42,14 @@ const TableCellComponent = /*@__PURE__*/ proxyCustomElement(class TableCellCompo
         }
     }
     render() {
-        return (h(Host, { key: '571ec5bc494057bfbe9c9146da086bb6a192f298', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
+        return (h(Host, { key: 'b03771e3e73de98b729b18d86fdc9ae083db2c8a', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
                 'b2b-table-cell': true,
                 ['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
                 ['b2b-table-cell--' + this.align]: true,
                 ['b2b-table-cell--divider']: this.divider,
                 [`b2b-table-cell-color-${this.color}`]: true,
-            }, role: "cell" }, h("slot", { key: '10385f497f0061d09b227b88456205bac24f272f' })));
+            }, role: "cell" }, h("slot", { key: '122acda5bae14213fd2e702b65edbcc0bfe9f672' })));
     }
     get host() { return this; }
     static get style() { return B2bTableCellStyle0; }

package/dist/components/table-header.js

@@ -77,7 +77,7 @@ const TableHeaderComponent = /*@__PURE__*/ proxyCustomElement(class TableHeaderC
         this.setIconPlacement();
     }
     render() {
-        return (h(Host, { key: '34f96e3a7c5c36cafadb463a72f1acec6550d367', class: {
+        return (h(Host, { key: 'd96004629017b2e728289da6bf899886d3598548', class: {
                 [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
                 'b2b-table-header--divider': this.divider,
                 [`b2b-table-header--${this.size}`]: true,

package/dist/components/wizard-icon.js

@@ -16,7 +16,7 @@ const WizardIconComponent = /*@__PURE__*/ proxyCustomElement(class WizardIconCom
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '5c3ab4531997f298489cef25f5b4cee243588e74' }, h("div", { key: '9b212fbab1c0dcb54787c39da4081f1f911b7d85', class: {
+        return (h(Host, { key: '2c8a5caa3d2e552a42a05172421befa0217a56c2' }, h("div", { key: 'c99cc645d667a872804406baf566a45ec43f4758', class: {
                 'b2b-wizard-icon': true,
             } }, this.state === WizardStatus.COMPLETED && (h("b2b-rounded-icon", { color: "var(--b2b-color-success-50)", "content-color": "var(--b2b-color-success-100)" }, this.checkIcon ? (h("b2b-icon", { slot: "icon", icon: "b2b_icon-check" })) : (h("span", { slot: "text" }, this.step)))), this.state === WizardStatus.PENDING && (h("b2b-rounded-icon", { color: "var(--b2b-color-icon-default)", "content-color": "var(--b2b-color-icon-inverted)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DISABLED && (h("b2b-rounded-icon", { color: "var(--b2b-color-grey-100)", "content-color": "var(--b2b-color-grey-400)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DEFAULT && (h("b2b-rounded-icon", { color: "transparent", "border-color": "var(--b2b-color-icon-secondary)", "content-color": "var(--b2b-color-icon-secondary)" }, h("span", { slot: "text" }, this.step))))));
     }