@otto-de/b2b-core-components 1.16.0 → 1.17.0

package/dist/collection/components/wizard/wizard.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Thu, 24 Oct 2024 12:35:00 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Thu, 24 Oct 2024 12:35:01 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/wizard/wizard.js

@@ -44,7 +44,7 @@ export class WizardComponent {
             this.setStepsState();
     }
     render() {
-        return (h(Host, { key: '1fb548e71aa9d672a0b922581c19909040781926' }, h("div", { key: '9444aeafb7cd39aa89e5efb4991274c631067f4d', class: "b2b_wizard" }, h("slot", { key: '3c654bbee61932d84cda6de0438bf4550b14be3a' }))));
+        return (h(Host, { key: '0d6e329dcb96f5bab7de07ddb9206c3729bacca4' }, h("div", { key: 'cad575adba4bdee8913d5c54d3cd7664e12beca7', class: "b2b_wizard" }, h("slot", { key: '89024a5eb440dc3de2e960e3cb71fe839e837f33' }))));
     }
     static get is() { return "b2b-wizard"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wizard-icon/wizard-icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Thu, 24 Oct 2024 12:35:00 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Thu, 24 Oct 2024 12:35:01 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/wizard-icon/wizard-icon.js

@@ -7,7 +7,7 @@ export class WizardIconComponent {
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: 'f2504601523ffc9069b0b20082547ef3580f6841' }, h("div", { key: '457ba0f1c0adc0b3b5522ac71e83ca3bbbd82cbd', class: {
+        return (h(Host, { key: '1079e6ecea1b59022ab6d6eb13d6988273472bca' }, h("div", { key: '18d2d9c627d5547b599d5bf23d1be8434430a737', 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))))));
     }

package/dist/components/b2b-card.js

@@ -34,10 +34,10 @@ const CardComponent = /*@__PURE__*/ proxyCustomElement(class CardComponent exten
             return 0;
     }
     render() {
-        return (h(Host, { key: '6a39ac26f49ce2814abb2e2a5f0628d3af9e3ffb', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '6a3323a5f58c054a69080f6bec53bf8a29288a83', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
                 'b2b-card': true,
                 'b2b-card--disabled': this.disabled,
-            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '19775bd829936bbe3fa1aa8d58dde18f6d602228' })));
+            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '72a803fa506ce9f3a2a79e9fe677d4f8facb1d36' })));
     }
     get host() { return this; }
     static get style() { return B2bCardStyle0; }

package/dist/components/b2b-checkbox-group.js

@@ -74,11 +74,11 @@ const CheckboxGroupComponent = /*@__PURE__*/ proxyCustomElement(class CheckboxGr
         }
     }
     render() {
-        return (h(Host, { key: '3b6da1303cdfd1bdddbc1f31323e50986ac7b087' }, h("div", { key: 'c626a8341b17c86efd58e6c9da73b44257b8cd9a', class: {
+        return (h(Host, { key: '17f56d642b6ef6a4157a51178c4e1d604755f698' }, h("div", { key: 'caf98c3c46fb753dad491e2b1e98ff212e7c6a93', class: {
                 'b2b-checkbox-group': true,
                 'b2b-checkbox-group--error': this.invalid && !this.disabled,
                 [`b2b-checkbox-group--${this.alignment}`]: true,
-            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '881df0a66e9479f2eab63d0387fc4d4f4ee37295' }, h("div", { key: '936511055623583956fc980f62497cdc01a9dc21', class: "b2b-checkbox-group__options" }, h("slot", { key: 'd096cf78944f253e07d0b852c38db6c486681eb3' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '0b9b7dd931a8059a6ed0e53a49e799076e1d33ea' }, h("div", { key: '4385c56f2f7d570abfa58877b623b82f1006cafa', class: "b2b-checkbox-group__options" }, h("slot", { key: 'a15f2bd94e9167701a85cbf2981a268325bc4c85' }))), (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 host() { return this; }

package/dist/components/b2b-date-picker-days-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface B2bDatePickerDaysHeader extends Components.B2bDatePickerDaysHeader, HTMLElement {}
+export const B2bDatePickerDaysHeader: {
+    prototype: B2bDatePickerDaysHeader;
+    new (): B2bDatePickerDaysHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerDaysHeader$1, d as defineCustomElement$1 } from './date-picker-days-header.js';
+
+const B2bDatePickerDaysHeader = B2bDatePickerDaysHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerDaysHeader, defineCustomElement };

package/dist/components/{b2b-calendar-header.d.ts → b2b-date-picker-days.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface B2bCalendarHeader extends Components.B2bCalendarHeader, HTMLElement {}
-export const B2bCalendarHeader: {
-    prototype: B2bCalendarHeader;
-    new (): B2bCalendarHeader;
+interface B2bDatePickerDays extends Components.B2bDatePickerDays, HTMLElement {}
+export const B2bDatePickerDays: {
+    prototype: B2bDatePickerDays;
+    new (): B2bDatePickerDays;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerDays$1, d as defineCustomElement$1 } from './date-picker-days.js';
+
+const B2bDatePickerDays = B2bDatePickerDays$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerDays, defineCustomElement };

package/dist/components/b2b-date-picker-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface B2bDatePickerHeader extends Components.B2bDatePickerHeader, HTMLElement {}
+export const B2bDatePickerHeader: {
+    prototype: B2bDatePickerHeader;
+    new (): B2bDatePickerHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerHeader$1, d as defineCustomElement$1 } from './date-picker-header.js';
+
+const B2bDatePickerHeader = B2bDatePickerHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerHeader, defineCustomElement };

package/dist/components/b2b-date-picker-months.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface B2bDatePickerMonths extends Components.B2bDatePickerMonths, HTMLElement {}
+export const B2bDatePickerMonths: {
+    prototype: B2bDatePickerMonths;
+    new (): B2bDatePickerMonths;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerMonths$1, d as defineCustomElement$1 } from './date-picker-months.js';
+
+const B2bDatePickerMonths = B2bDatePickerMonths$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerMonths, defineCustomElement };

package/dist/components/{b2b-calendar-days.d.ts → b2b-date-picker-years.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface B2bCalendarDays extends Components.B2bCalendarDays, HTMLElement {}
-export const B2bCalendarDays: {
-    prototype: B2bCalendarDays;
-    new (): B2bCalendarDays;
+interface B2bDatePickerYears extends Components.B2bDatePickerYears, HTMLElement {}
+export const B2bDatePickerYears: {
+    prototype: B2bDatePickerYears;
+    new (): B2bDatePickerYears;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerYears$1, d as defineCustomElement$1 } from './date-picker-years.js';
+
+const B2bDatePickerYears = B2bDatePickerYears$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerYears, defineCustomElement };

package/dist/components/{b2b-calendar.d.ts → b2b-date-picker.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface B2bCalendar extends Components.B2bCalendar, HTMLElement {}
-export const B2bCalendar: {
-    prototype: B2bCalendar;
-    new (): B2bCalendar;
+interface B2bDatePicker extends Components.B2bDatePicker, HTMLElement {}
+export const B2bDatePicker: {
+    prototype: B2bDatePicker;
+    new (): B2bDatePicker;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1,396 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { D as DatePickerView } from './date-picker.types.js';
+import { d as defineCustomElement$8 } from './date-picker-days.js';
+import { d as defineCustomElement$7 } from './date-picker-days-header.js';
+import { d as defineCustomElement$6 } from './date-picker-header.js';
+import { d as defineCustomElement$5 } from './date-picker-months.js';
+import { d as defineCustomElement$4 } from './date-picker-years.js';
+import { d as defineCustomElement$3 } from './headline.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const datePickerCss = ":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{position:relative;z-index:1000}:host .b2b-date-picker__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}:host .b2b-date-picker-input-focus-wrapper{width:100%;height:100%}:host .b2b-date-picker-input-focus-wrapper:hover{cursor:text}:host .b2b-date-picker-input-wrapper{display:flex;box-sizing:border-box;height:var(--b2b-size-90);border:var(--b2b-size-1) solid var(--b2b-color-grey-200);justify-content:flex-start;border-radius:var(--b2b-size-7);padding:var(--b2b-size-15) var(--b2b-size-20);max-width:600px;background-color:var(--b2b-color-white-100);transition:outline 0.2s ease-in-out, border-color 0.2s ease-in-out}:host .b2b-date-picker-input-wrapper--focused{outline:2px solid -webkit-focus-ring-color;outline-offset:-1px}:host .b2b-date-picker-input-wrapper--error{background-color:var(--b2b-color-error-50);border:1px solid var(--b2b-color-error-100);border-color:var(--b2b-color-error-100)}:host .b2b-date-picker-input-wrapper .b2b-date-picker-input{border:none;outline:none;box-shadow:none;box-sizing:border-box;margin-left:0;padding-left:0;height:100%;width:15%;color:var(--b2b-color-black-100);font-size:var(--b2b-size-35);line-height:var(--b2b-size-copy-line-height-100);font-weight:var(--b2b-font-weight-normal);font-family:var(--b2b-font-family-default)}:host .b2b-date-picker-input-wrapper .b2b-date-picker-input--error{background-color:var(--b2b-color-error-50)}:host .b2b-date-picker-selected-date{flex:1;align-self:center;font-size:var(--b2b-size-35)}:host .b2b-date-picker-label{font-size:var(--b2b-size-35);color:var(--b2b-color-black-100);line-height:var(--b2b-size-copy-line-height-100);margin-bottom:var(--b2b-size-5)}:host .b2b-date-picker-hint{font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75);display:block;margin-top:var(--b2b-size-7);color:var(--b2b-color-grey-300)}:host .b2b-date-picker-hint--error{color:var(--b2b-color-error-100)}:host .b2b-date-picker-body{position:relative;border-right:var(--b2b-size-1) solid var(--b2b-color-black-100);border-left:var(--b2b-size-1) solid var(--b2b-color-black-100);border-bottom:var(--b2b-size-1) solid var(--b2b-color-black-100);border-top:2px none -webkit-focus-ring-color;outline-offset:-1px;width:300px;box-sizing:border-box;padding-bottom:var(--b2b-size-40);outline:none;background-color:var(--b2b-color-white-100);z-index:900}:host .b2b-date-picker-body--hidden{display:none}:host .b2b-icons{display:flex;margin-top:var(--b2b-size-5);align-items:center}:host .b2b-close-icon{display:block}:host .b2b-event-icon{display:block}";
+const B2bDatePickerStyle0 = datePickerCss;
+
+const B2bDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.b2bSelected = createEvent(this, "b2b-selected", 7);
+        this.DISABLED_DATE_ERROR_MESSAGE = 'Auswahl nicht möglich, bitte gültiges Datum auswählen.';
+        this.FORMATTING_ERROR_MESSAGE = 'Format beachten: TT.MM.JJJJ.';
+        this.today = new Date();
+        this.todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
+        this.handleInputChange = (event) => {
+            this.focused = true;
+            this.invalid = false;
+            let value = event.target.value;
+            value = value.replace(/[^0-9.]/g, '');
+            if (value.length > 10) {
+                value = value.slice(0, 10);
+            }
+            this.userInputDate = value;
+            event.target.value = value;
+            if (value.length === 10) {
+                this.parseDateInput(value);
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                this.showHideDatePicker();
+                if (this.invalid) {
+                    this.invalid = false;
+                    this.showDatePicker = false;
+                }
+                let value = event.target.value;
+                if (value.length === 0) {
+                    this.invalid = false;
+                }
+                if (value.length === 10) {
+                    this.parseDateInput(value);
+                    this.emitSelectedDate();
+                    this.showDatePicker = false;
+                    this.focused = false;
+                }
+                else {
+                    this.invalid = true;
+                    this.focused = false;
+                    this.showDatePicker = false;
+                }
+            }
+            if (event.key === 'Backspace') {
+                let value = event.target.value;
+                if (value.length === 0) {
+                    this.clearDateInput();
+                    this.invalid = false;
+                }
+            }
+        };
+        this.handleInputFocus = () => {
+            this.parseDateInput(this.userInputDate);
+            if (this.invalid) {
+                this.invalid = false;
+            }
+            this.focused = true;
+        };
+        this.setCurrentMonth = (selectedMonth) => {
+            this.selectedMonth = selectedMonth;
+            this.selectedDay = undefined;
+        };
+        this.setCurrentYear = (selectedYear) => {
+            this.selectedYear = selectedYear;
+            this.selectedDay = undefined;
+        };
+        this.showHideDatePicker = () => {
+            this.showDatePicker = !this.showDatePicker;
+            this.datePickerView = DatePickerView.Days;
+        };
+        this.clearDateInput = () => {
+            this.selectedDay = undefined;
+            this.userInputDate = undefined;
+        };
+        this.handleBackdropDismiss = () => {
+            this.showDatePicker = false;
+        };
+        this.disablePastDates = undefined;
+        this.disableFutureDates = undefined;
+        this.disableWeekends = undefined;
+        this.label = 'Zeitraum auswählen';
+        this.preSelectedDate = undefined;
+        this.showHint = true;
+        this.showDatePicker = false;
+        this.focused = false;
+        this.datePickerView = DatePickerView.Days;
+        this.selectedMonth = new Date().getMonth();
+        this.selectedYear = new Date().getFullYear();
+        this.selectedDay = undefined;
+        this.selectedDate = undefined;
+        this.userInputDate = '';
+        this.invalid = false;
+        this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
+    }
+    componentWillLoad() {
+        if (this.preSelectedDate !== undefined) {
+            const [day, month, year] = this.preSelectedDate.split('.').map(Number);
+            this.selectedDay = day;
+            this.selectedMonth = month - 1;
+            this.selectedYear = year;
+            this.setSelectedDateForDisplay();
+            this.showDatePicker = false;
+        }
+        else {
+            this.selectedDay = undefined;
+            this.selectedMonth = new Date().getMonth();
+            this.selectedYear = new Date().getFullYear();
+            this.userInputDate = '';
+        }
+    }
+    handleEscapePress() {
+        this.showDatePicker = false;
+    }
+    handleDateSelection(event) {
+        this.selectedDay = event.detail.selectedDate.getDate();
+        this.setSelectedDate();
+        this.showDatePicker = false;
+        this.focused = false;
+    }
+    getPreviousMonth() {
+        if (this.selectedMonth === 0) {
+            this.setCurrentMonth(11);
+            this.setCurrentYear(this.selectedYear - 1);
+        }
+        else {
+            this.setCurrentMonth(this.selectedMonth - 1);
+        }
+    }
+    parseDateInput(dateString) {
+        const regex = /^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/;
+        if (dateString == '' || dateString === undefined) {
+            this.invalid = false;
+            return;
+        }
+        if (!regex.test(dateString)) {
+            this.invalid = true;
+            this.showDatePicker = false;
+            this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
+            return;
+        }
+        const [day, month, year] = dateString
+            .split('.')
+            .map(value => Number(value));
+        if (this.isValidDate(day, month, year)) {
+            this.invalid = false;
+            this.selectedDay = day;
+            this.selectedMonth = month - 1;
+            this.selectedYear = year;
+            this.setSelectedDateForDisplay();
+        }
+        else {
+            this.showDatePicker = false;
+            this.invalid = true;
+            this.focused = false;
+            this.selectedDay = this.todayWithoutTime.getDate();
+            this.selectedMonth = this.todayWithoutTime.getMonth();
+            this.selectedYear = this.todayWithoutTime.getFullYear();
+        }
+    }
+    isValidDate(day, month, year) {
+        const date = new Date(year, month - 1, day);
+        const isValidDay = day > 0 && day <= 31;
+        const isValidMonth = month > 0 && month <= 12;
+        const isValidYear = year > 0;
+        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)) {
+            this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
+            isValidRange = false;
+        }
+        return isValidDay && isValidMonth && isValidYear && isValidRange;
+    }
+    emitSelectedDate() {
+        this.b2bSelected.emit({
+            selectedDate: new Date(this.selectedYear, this.selectedMonth, this.selectedDay),
+        });
+    }
+    setSelectedDateForDisplay() {
+        if (this.selectedDay !== undefined) {
+            this.updateInputWithSelectedDate();
+        }
+    }
+    updateInputWithSelectedDate() {
+        const formattedDay = this.selectedDay.toString().padStart(2, '0');
+        const formattedMonth = (this.selectedMonth + 1).toString().padStart(2, '0');
+        const formattedYear = this.selectedYear;
+        this.userInputDate = `${formattedDay}.${formattedMonth}.${formattedYear}`;
+        this.invalid = false;
+    }
+    getNextMonth() {
+        if (this.selectedMonth === 11) {
+            this.setCurrentMonth(0);
+            this.setCurrentYear(this.selectedYear + 1);
+        }
+        else {
+            this.setCurrentMonth(this.selectedMonth + 1);
+        }
+    }
+    handleDatePickerViewChanged(event) {
+        this.datePickerView = event.detail.value;
+    }
+    handleMonthSelected(event) {
+        this.setCurrentMonth(event.detail.value);
+        this.datePickerView = DatePickerView.Days;
+        this.invalid = false;
+        setTimeout(() => {
+            this.setFocusOnCalendarIcon();
+        }, 100);
+    }
+    handleYearSelected(event) {
+        this.setCurrentYear(event.detail.value);
+        this.datePickerView = DatePickerView.Days;
+        this.invalid = false;
+        setTimeout(() => {
+            this.setFocusOnCalendarIcon();
+        }, 100);
+    }
+    setFocusOnCalendarIcon() {
+        let eventIcon = this.host.shadowRoot.querySelector('.b2b-event-icon');
+        if (eventIcon !== null) {
+            eventIcon.focus();
+        }
+    }
+    setSelectedDate() {
+        this.setSelectedDateForDisplay();
+        this.b2bSelected.emit({
+            selectedDate: new Date(this.selectedYear, this.selectedMonth, this.selectedDay),
+        });
+        this.invalid = false;
+        setTimeout(() => {
+            this.setFocusOnCloseIcon();
+        }, 100);
+    }
+    setFocusOnCloseIcon() {
+        let closeIcon = this.host.shadowRoot.querySelector('.b2b-close-icon');
+        if (closeIcon !== null) {
+            closeIcon.focus();
+        }
+    }
+    moveFocusToInputComponent() {
+        const inputElement = this.host.shadowRoot.querySelector('input.b2b-date-picker-input');
+        if (inputElement !== undefined && !this.invalid) {
+            inputElement.focus();
+            this.focused = true;
+            this.showHideDatePicker();
+            return;
+        }
+        if (this.showDatePicker || this.invalid) {
+            inputElement.blur();
+            this.invalid = false;
+            this.focused = false;
+            this.showHideDatePicker();
+            return;
+        }
+    }
+    render() {
+        return (h(Host, { key: '7ea0bab1a5248a56baed3368a265de5a23b355c3' }, h("div", { key: 'a8f65ab12856aedc945ab3c319975ac1f75f25a7', class: "b2b-date-picker" }, h("div", { key: '3af0484bf8c3e565efbce1de8426ac414042dc09', class: "b2b-date-picker-label" }, this.label), h("div", { key: '7056fceb98d55563a72ebb8795aecf335a44a4de', 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: '73a4ac3ed6e8a288ac9d6efdb71fc199c2a1ac94', class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
+                this.moveFocusToInputComponent();
+            } }, h("input", { key: 'a8f3612481383cdd641dab6643fd9faf38e11130', 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;
+            } })), h("div", { key: '733646dc186b67c5095dd2a8e6bfde26b97550f9', class: "b2b-icons" }, this.userInputDate && (h("div", { tabIndex: 0, onClick: () => {
+                this.invalid = false;
+                this.clearDateInput();
+            }, class: "b2b-close-icon", onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.invalid = false;
+                    this.clearDateInput();
+                }
+            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: 'bded26934ac03205ad84b2754480a17d36109ca1', tabindex: 0, onClick: () => {
+                if (this.invalid) {
+                    this.invalid = false;
+                }
+                this.showHideDatePicker();
+            }, onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    if (this.invalid) {
+                        this.invalid = false;
+                    }
+                    this.showHideDatePicker();
+                }
+            }, class: "b2b-event-icon" }, h("b2b-icon", { key: 'aa66b59496916ca647894eed843a11898af331e0', "aria-label": this.showDatePicker
+                ? 'close date picker'
+                : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: '07240a12f44e04a0c21301e90055463fd5438e77', 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: {
+                'b2b-date-picker-hint': true,
+                'b2b-date-picker-hint--error': this.invalid,
+            } }, this.invalid
+            ? this.errorMessage
+            : this.showHint && 'Format: TT.MM.JJJJ'))));
+    }
+    get host() { return this; }
+    static get style() { return B2bDatePickerStyle0; }
+}, [1, "b2b-date-picker", {
+        "disablePastDates": [4, "disable-past-dates"],
+        "disableFutureDates": [4, "disable-future-dates"],
+        "disableWeekends": [4, "disable-weekends"],
+        "label": [1],
+        "preSelectedDate": [1, "pre-selected-date"],
+        "showHint": [4, "show-hint"],
+        "showDatePicker": [32],
+        "focused": [32],
+        "datePickerView": [32],
+        "selectedMonth": [32],
+        "selectedYear": [32],
+        "selectedDay": [32],
+        "selectedDate": [32],
+        "userInputDate": [32],
+        "invalid": [32],
+        "errorMessage": [32]
+    }, [[0, "b2b-date-picker-escape", "handleEscapePress"], [0, "b2b-date-selected", "handleDateSelection"], [0, "b2b-date-picker-previous-month", "getPreviousMonth"], [0, "b2b-date-picker-next-month", "getNextMonth"], [0, "b2b-date-picker-view-changed", "handleDatePickerViewChanged"], [0, "b2b-date-picker-month-selected", "handleMonthSelected"], [0, "b2b-date-picker-year-selected", "handleYearSelected"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["b2b-date-picker", "b2b-date-picker-days", "b2b-date-picker-days-header", "b2b-date-picker-header", "b2b-date-picker-months", "b2b-date-picker-years", "b2b-headline", "b2b-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "b2b-date-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, B2bDatePicker$1);
+            }
+            break;
+        case "b2b-date-picker-days":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "b2b-date-picker-days-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "b2b-date-picker-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "b2b-date-picker-months":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "b2b-date-picker-years":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "b2b-headline":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "b2b-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const B2bDatePicker = B2bDatePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePicker, defineCustomElement };

package/dist/components/b2b-dropdown.js

@@ -54,11 +54,11 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         selectElement.append(...options);
     }
     render() {
-        return (h(Host, { key: 'cb7a0a4bcc708257cada82f8ce45041b63d6baf1', class: {
+        return (h(Host, { key: '1a95b7db34185e8a97f17789555263e16c10236d', 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: '7b613f352cc3c501dd3ef917bfc25efc3006f69b', 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: '06bc6f12dc93b0a39f1c086deba8eb10236888cf', 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)) : ('')));
     }
     get hostElement() { return this; }

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

@@ -24,7 +24,7 @@ const FlyoutMenuOptionComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutM
         }
     }
     render() {
-        return (h(Host, { key: 'df9feb52a422216e9d4f6c38f8b880dad91d9d21', class: {
+        return (h(Host, { key: '28f1e7f603120f7e2c5d9e15685505796d249d84', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,