@otto-de/b2b-core-components 1.26.3 → 1.28.0

package/dist/collection/components/card/card.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

package/dist/collection/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

package/dist/collection/components/checkbox-group/checkbox-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

package/dist/collection/components/chip/chip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

package/dist/collection/components/chip/chip.js

@@ -20,13 +20,14 @@ export class B2bChipComponent {
         this.disabled = false;
         this.hasCloseButton = true;
         this.value = undefined;
+        this.customMargin = '8px';
     }
     render() {
-        return (h(Host, { key: 'feff4de384d9ae0d55cf1683915bb15e865211a0' }, h("div", { key: '79b6ec48ae1a4c142ca8363670ecee5ddd0703cb', class: {
+        return (h(Host, { key: '3305bfadb31716b7a4f103222d8d1f280afdda32' }, h("div", { key: '00e106a248e0d5c36a4a22ecd5f95411cf9271d7', class: {
                 'b2b-chip': true,
                 [`b2b-chip--${this.type}`]: !this.disabled && this.type !== undefined,
                 'b2b-chip--disabled': this.disabled,
-            } }, h("span", { key: 'daa9ee334f78e1b9d3baa363ba7f6e941f3571dc', class: {
+            } }, h("span", { key: 'ac6d7eb4634075dea78cbbfbd2c1dd8ed956e2a1', class: {
                 'b2b-chip__label': true,
                 [`b2b-chip__label--${this.labelStyle}`]: this.labelStyle !== undefined,
                 'b2b-chip__label--close-button': this.hasCloseButton,
@@ -152,6 +153,24 @@ export class B2bChipComponent {
                 },
                 "attribute": "value",
                 "reflect": true
+            },
+            "customMargin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It is used to customise the margin of chip component"
+                },
+                "attribute": "custom-margin",
+                "reflect": false,
+                "defaultValue": "'8px'"
             }
         };
     }

package/dist/collection/components/chip/chip.stories.js

@@ -22,11 +22,13 @@ const meta = {
         disabled: false,
         value: '',
         hasCloseButton: true,
+        customMargin: '',
     },
     argTypes: getArgTypes('b2b-chip-component'),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-chip-component
+      custom-margin="${args.customMargin}"
       label="${args.label}"
       type="${args.type}"
       label-style="${args.labelStyle}"
@@ -97,3 +99,11 @@ export const story063StrikethroughLabel = {
     name: 'Strikethrough Label',
     args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'strikethrough', label: 'Chip with strikethrough style' }),
 };
+export const story070CustomMargin = {
+    name: 'Custom Margin',
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Chip with Custom Margin', customMargin: '12px' }),
+};
+export const story071NoMargin = {
+    name: 'No Margin',
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Chip with No Margin', customMargin: '0px' }),
+};

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --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-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -32,11 +32,12 @@ describe('B2B-Date-Picker', () => {
     it('should disable past dates', async () => {
         page = await newE2EPage();
         await page.setContent(`<b2b-date-picker disable-past-dates=true></b2b-date-picker>`);
-        const today = new Date();
+        const today = new Date(2024, 2, 30);
         const yesterday = new Date(today);
         yesterday.setDate(today.getDate() - 1);
         const prevDay = yesterday.getDate();
-        if (prevDay > 0 && prevDay >= 30) {
+        console.log('prevDay :', prevDay);
+        if (prevDay > 0 && prevDay >= 31) {
             const prevDayElement = await page.find({ text: prevDay.toString() });
             expect(prevDayElement.className).toBe('b2b-date-picker-day b2b-date-picker-day--disabled');
         }

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

@@ -119,7 +119,15 @@ export class B2bDatePicker {
             return value;
         }
         if (typeof value === 'string') {
-            return JSON.parse(value);
+            try {
+                return JSON.parse(value);
+            }
+            catch (_a) {
+                return value
+                    .split(',')
+                    .map(v => v.trim())
+                    .filter(Boolean);
+            }
         }
         return [];
     }
@@ -128,23 +136,24 @@ export class B2bDatePicker {
         return new Date(year, month - 1, day);
     }
     componentWillLoad() {
-        if (this.disableDates !== '' || this.disableDates.length > 0) {
-            const dateString = this.normalizeArrayInput(this.disableDates);
-            this.datesToBeDisabled = dateString.map(date => {
+        const disableDatesArray = this.normalizeArrayInput(this.disableDates);
+        if (disableDatesArray.length > 0) {
+            this.datesToBeDisabled = disableDatesArray.map(date => {
                 const [day, month, year] = date.split('.').map(Number);
                 return new Date(year, month - 1, day);
             });
         }
-        if (this.disableDays !== '' || this.disableDays.length > 0) {
-            this.normalizedDisableEvery = this.normalizeArrayInput(this.disableDays);
+        const disableDaysArray = this.normalizeArrayInput(this.disableDays);
+        if (disableDaysArray.length > 0) {
+            this.normalizedDisableEvery = disableDaysArray;
         }
-        if (this.disableDatesUntil !== '' && this.disableDatesUntil !== undefined) {
+        if (this.disableDatesUntil && this.disableDatesUntil !== '') {
             this.normalizedDisableDatesUntil = this.normalizeDisableDatesUntilAndFrom(this.disableDatesUntil);
         }
-        if (this.disableDatesFrom !== '' && this.disableDatesFrom !== undefined) {
+        if (this.disableDatesFrom && this.disableDatesFrom !== '') {
             this.normalizedDisableDatesFrom = this.normalizeDisableDatesUntilAndFrom(this.disableDatesFrom);
         }
-        if (this.preSelectedDate !== undefined) {
+        if (this.preSelectedDate) {
             const [day, month, year] = this.preSelectedDate.split('.').map(Number);
             this.selectedDay = day;
             this.selectedMonth = month - 1;
@@ -153,9 +162,10 @@ export class B2bDatePicker {
             this.showDatePicker = false;
         }
         else {
+            const today = new Date();
             this.selectedDay = undefined;
-            this.selectedMonth = new Date().getMonth();
-            this.selectedYear = new Date().getFullYear();
+            this.selectedMonth = today.getMonth();
+            this.selectedYear = today.getFullYear();
             this.userInputDate = '';
         }
     }
@@ -178,6 +188,16 @@ export class B2bDatePicker {
             this.setCurrentMonth(this.selectedMonth - 1);
         }
     }
+    handleDisableDatesChanged(newVal) {
+        const parsed = this.normalizeArrayInput(newVal);
+        this.datesToBeDisabled = parsed.map(date => {
+            const [day, month, year] = date.split('.').map(Number);
+            return new Date(year, month - 1, day);
+        });
+    }
+    handleDisableDaysChanged(newVal) {
+        this.normalizedDisableEvery = this.normalizeArrayInput(newVal);
+    }
     parseDateInput(dateString) {
         const regex = /^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/;
         if (dateString == '' || dateString === undefined) {
@@ -692,6 +712,15 @@ export class B2bDatePicker {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disableDates",
+                "methodName": "handleDisableDatesChanged"
+            }, {
+                "propName": "disableDays",
+                "methodName": "handleDisableDaysChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "b2b-date-picker-escape",