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

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

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { DateUtils } from "../../utils/datepicker/date-picker-util";
 const keys = {
     ARROW_UP: 'ArrowUp',
     ARROW_DOWN: 'ArrowDown',
@@ -33,23 +34,6 @@ export class B2bDatePickerDays {
                 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();
@@ -66,7 +50,16 @@ export class B2bDatePickerDays {
             /** 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,
@@ -89,6 +82,10 @@ export class B2bDatePickerDays {
         this.disablePastDates = false;
         this.disableFutureDates = false;
         this.disableWeekends = false;
+        this.disableDates = [];
+        this.disableEvery = [];
+        this.disableDatesUntil = undefined;
+        this.disableDatesFrom = undefined;
         this.disabled = false;
     }
     componentDidLoad() {
@@ -163,7 +160,7 @@ export class B2bDatePickerDays {
         });
     }
     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())));
     }
     static get is() { return "b2b-date-picker-days"; }
     static get encapsulation() { return "shadow"; }
@@ -283,6 +280,83 @@ export class B2bDatePickerDays {
                 "attribute": "disable-weekends",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "disableDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date[]",
+                    "resolved": "Date[]",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal the dates that are part of this array are disabled. By default, this is an empty array."
+                },
+                "defaultValue": "[]"
+            },
+            "disableEvery": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal the specific days of the week that need to be disabled"
+                },
+                "defaultValue": "[]"
+            },
+            "disableDatesUntil": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal all the dates until the given specified date will be disabled."
+                }
+            },
+            "disableDatesFrom": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal all the dates from the given specified date will be disabled."
+                }
             }
         };
     }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -243,7 +245,7 @@
 :host .b2b-date-picker-nav--left:focus,
 :host .b2b-date-picker-nav--right:hover,
 :host .b2b-date-picker-nav--right:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :root .b2b-date-picker-month,
 :host .b2b-date-picker-month {
@@ -263,7 +265,7 @@
 :host .b2b-date-picker-month:hover,
 :host .b2b-date-picker-month:focus {
   cursor: pointer;
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :root .b2b-date-picker-year,
 :host .b2b-date-picker-year {
@@ -283,5 +285,5 @@
 :host .b2b-date-picker-year:hover,
 :host .b2b-date-picker-year:focus {
   cursor: pointer;
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }

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

@@ -1,14 +1,16 @@
 import { h, Host, } from "@stencil/core";
-import { DatePickerView, Months } from "./date-picker.types";
+import { DatePickerView, MonthsGerman, MonthsEnglish, } from "./date-picker.types";
 export class B2bDatePickerHeader {
     constructor() {
         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-100", { key: '622bbe2e4766ac3a750529245f4b46d59f0beb04', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '673a6aab27766e8a3f6ce8b30c5c08cc6015f687', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: DatePickerView.Months,
                 });
@@ -18,7 +20,7 @@ export class B2bDatePickerHeader {
                         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: '3d95ab3d8aa2d76dd1b2d358d565bf273ba9264a', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: DatePickerView.Years,
                 });
@@ -28,9 +30,9 @@ export class B2bDatePickerHeader {
                         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: '987676e03e3b759ce0a42a5db9c4f0dad35aac3a', 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-100", { key: '843f3fccb5374ee43e7d0d4ce3aabe550b0a5f75', icon: "b2b_icon-arrow-right", clickable: true })))));
     }
     static get is() { return "b2b-date-picker-header"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +81,24 @@ export class B2bDatePickerHeader {
                 },
                 "attribute": "selected-year",
                 "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'de' | 'en'",
+                    "resolved": "\"de\" | \"en\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language for month and the weekdays will be decided based on the given input. By default, this will be de which is german"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'de'"
             }
         };
     }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -238,7 +240,7 @@
   cursor: pointer;
 }
 :host .b2b-date-picker-month:hover, :host .b2b-date-picker-month:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :host .b2b-date-picker-month--selected {
   background-color: var(--b2b-color-black-100);

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

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { Months } from "./date-picker.types";
+import { MonthsGerman } from "./date-picker.types";
 describe('B2B-Date-Picker-Months', () => {
     let page;
     beforeEach(async () => {
@@ -10,13 +10,13 @@ describe('B2B-Date-Picker-Months', () => {
         const monthElements = (await page.findAll('b2b-date-picker-months >>> .b2b-date-picker-month'));
         expect(monthElements.length).toBe(12);
         monthElements.forEach((monthElement, index) => {
-            expect(monthElement.textContent).toBe(Months[index]);
+            expect(monthElement.textContent).toBe(MonthsGerman[index]);
         });
     });
     it('should show the selected month', async () => {
         await page.setContent(`<b2b-date-picker-months selected-month="4"></b2b-date-picker-months>`);
         const selectedMonth = await page.find('b2b-date-picker-months >>> .b2b-date-picker-month--selected');
-        expect(selectedMonth.textContent).toBe(Months[4]);
+        expect(selectedMonth.textContent).toBe(MonthsGerman[4]);
     });
     it('should emit month selected event when new month is selected', async () => {
         await page.setContent(`<b2b-date-picker-months selected-month="10"></b2b-date-picker-months>`);

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

@@ -1,5 +1,5 @@
 import { h, Host, } from "@stencil/core";
-import { Months } from "./date-picker.types";
+import { MonthsGerman, MonthsEnglish } from "./date-picker.types";
 const keys = {
     ARROW_UP: 'ArrowUp',
     ARROW_DOWN: 'ArrowDown',
@@ -25,6 +25,7 @@ export class B2bDatePickerMonths {
         };
         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,
@@ -34,6 +35,7 @@ export class B2bDatePickerMonths {
             return months;
         };
         this.selectedMonth = undefined;
+        this.language = 'de';
     }
     handleKeyDown(event) {
         event.preventDefault();
@@ -71,7 +73,7 @@ export class B2bDatePickerMonths {
         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())));
     }
     static get is() { return "b2b-date-picker-months"; }
     static get encapsulation() { return "shadow"; }
@@ -103,6 +105,24 @@ export class B2bDatePickerMonths {
                 },
                 "attribute": "selected-month",
                 "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'de' | 'en'",
+                    "resolved": "\"de\" | \"en\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal The language for month and the weekdays will be decided based on the given input. By default, this will be de which is german"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'de'"
             }
         };
     }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -241,7 +243,7 @@
   cursor: pointer;
 }
 :host .b2b-date-picker-year:hover, :host .b2b-date-picker-year:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :host .b2b-date-picker-year--selected {
   background-color: var(--b2b-color-black-100);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -242,7 +244,6 @@
   justify-content: flex-start; /* Aligns the input to the left */
   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;
 }
@@ -263,7 +264,6 @@
   margin-left: 0;
   padding-left: 0;
   height: 100%;
-  width: 100%;
   color: var(--b2b-color-black-100);
   font-size: var(--b2b-size-35);
   line-height: var(--b2b-size-copy-line-height-100);