@otto-de/b2b-core-components 1.20.0 → 1.22.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 Thu, 12 Dec 2024 07:14:23 GMT
+ * Generated on Thu, 30 Jan 2025 18:09:12 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 07:14:23 GMT
+ * Generated on Thu, 30 Jan 2025 18:09:12 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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", { 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,
                 });
@@ -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: 'cee9e20e84f0a7470c22256990f2e194fe099bd3', 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: '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 })))));
     }
     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 Thu, 12 Dec 2024 07:14:23 GMT
+ * Generated on Thu, 30 Jan 2025 18:09:12 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 07:14:23 GMT
+ * Generated on Thu, 30 Jan 2025 18:09:12 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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 Thu, 12 Dec 2024 07:14:23 GMT
+ * Generated on Thu, 30 Jan 2025 18:09:12 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 07:14:23 GMT
+ * Generated on Thu, 30 Jan 2025 18:09:12 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 07:14:23 GMT
+ * Generated on Thu, 30 Jan 2025 18:09:12 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 12 Dec 2024 07:14:23 GMT
+ * Generated on Thu, 30 Jan 2025 18:09:12 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -242,7 +242,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 +262,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);