@otto-de/b2b-core-components 1.37.3 → 1.38.0

package/dist/collection/components/button/button.css

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -245,16 +243,18 @@
   display: flex;
   justify-content: flex-start;
   position: relative;
+  align-items: center;
 }
 .b2b-checkbox__icon {
   position: absolute;
   fill: var(--b2b-color-white-100);
   display: none;
-  margin-top: var(--b2b-size-7);
+  margin-top: 0;
   margin-left: var(--b2b-size-1);
   width: var(--b2b-size-35);
   height: var(--b2b-size-35);
   z-index: 1000;
+  margin-bottom: var(--b2b-size-1);
 }
 .b2b-checkbox__input {
   margin: 2px 6px 3px 0;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

package/dist/collection/components/custom-dropdown/custom-dropdown-option.css

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

package/dist/collection/components/custom-dropdown/custom-dropdown.css

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --b2b-color-white-100: #FFFFFF;
-  --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
   --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
@@ -273,6 +271,16 @@
   border: 1px solid var(--b2b-color-error-100);
   border-color: var(--b2b-color-error-100);
 }
+.b2b-date-picker-input-wrapper--disabled {
+  background-color: var(--b2b-bg-disabled, #f5f5f5);
+  border-color: var(--b2b-color-grey-200);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.b2b-date-picker-input-wrapper--disabled .b2b-icons {
+  opacity: 0.6;
+  pointer-events: none;
+}
 .b2b-date-picker-input-wrapper .b2b-date-picker-input {
   border: none;
   outline: none;
@@ -290,6 +298,11 @@
 .b2b-date-picker-input-wrapper .b2b-date-picker-input--error {
   background-color: var(--b2b-color-error-50);
 }
+.b2b-date-picker-input-wrapper .b2b-date-picker-input--disabled {
+  background-color: transparent;
+  color: var(--b2b-color-grey-300);
+  cursor: not-allowed;
+}
 b2b-input-label {
   display: block;
   margin-bottom: var(--b2b-size-5);

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

@@ -134,4 +134,17 @@ describe('B2B-Date-Picker', () => {
             expect(clearedInputValue).toBe('');
         });
     });
+    it('should not open the date picker and input must be disabled when `disabled` prop is set', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker disabled=true></b2b-date-picker>`);
+        const inputField = await page.find('b2b-date-picker >>> input.b2b-date-picker-input');
+        expect(inputField).not.toBeNull();
+        const isDisabled = await inputField.getProperty('disabled');
+        expect(isDisabled).toBe(true);
+        const clickableInputComponent = await page.find('b2b-date-picker >>> div.b2b-date-picker-input-wrapper');
+        await clickableInputComponent.click();
+        await page.waitForChanges();
+        const datePickerComponent = await page.find('b2b-date-picker >>> .b2b-date-picker-body');
+        expect(await datePickerComponent.getAttribute('class')).toContain('b2b-date-picker-body--hidden');
+    });
 });

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

@@ -82,6 +82,7 @@ export class B2bDatePicker {
         this.handleBackdropDismiss = () => {
             this.showDatePicker = false;
         };
+        this.disabled = false;
         this.disablePastDates = undefined;
         this.disableFutureDates = undefined;
         this.disableWeekends = undefined;
@@ -177,6 +178,13 @@ export class B2bDatePicker {
             this.setCurrentMonth(this.selectedMonth - 1);
         }
     }
+    handleDisabledChanged(newVal) {
+        if (newVal) {
+            this.showDatePicker = false;
+            this.focused = false;
+            this.invalid = false;
+        }
+    }
     handleDisableDatesChanged(newVal) {
         const parsed = parsePropToArray(newVal);
         this.datesToBeDisabled = parsed.map(date => {
@@ -334,6 +342,8 @@ export class B2bDatePicker {
         this.parseDateInput(this.userInputDate);
     }
     moveFocusToInputComponent() {
+        if (this.disabled)
+            return;
         const inputElement = this.host.shadowRoot.querySelector('input.b2b-date-picker-input');
         if (inputElement !== undefined && !this.invalid) {
             inputElement.focus();
@@ -354,17 +364,23 @@ export class B2bDatePicker {
             return null;
         return (h(Host, null, h("div", { class: "b2b-date-picker" }, h("b2b-input-label", { id: this.label, required: this.required }, this.label), h("div", { style: { width: `${this.width}px` }, class: {
                 'b2b-date-picker-input-wrapper': true,
-                'b2b-date-picker-input-wrapper--focused': this.focused || this.showDatePicker,
+                'b2b-date-picker-input-wrapper--focused': !this.disabled && (this.focused || this.showDatePicker),
                 'b2b-date-picker-input-wrapper--error': this.invalid,
-            } }, h("div", { class: "b2b-date-picker-input-focus-wrapper", onClick: () => {
-                this.moveFocusToInputComponent();
-            } }, h("input", { type: "text", tabindex: 0, class: {
+                'b2b-date-picker-input-wrapper--disabled': this.disabled,
+            } }, h("div", { class: "b2b-date-picker-input-focus-wrapper", onClick: this.disabled
+                ? undefined
+                : () => {
+                    this.moveFocusToInputComponent();
+                } }, h("input", { type: "text", tabIndex: this.disabled ? -1 : 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;
-                this.handleFocusOut();
-            }, placeholder: this.placeholder })), h("div", { class: "b2b-icons" }, this.userInputDate && (h("div", { tabIndex: 0, onClick: () => {
+                'b2b-date-picker-input--disabled': this.disabled,
+            }, value: this.userInputDate, disabled: this.disabled, onInput: this.disabled ? undefined : this.handleInputChange, onKeyDown: this.disabled ? undefined : this.handleKeyDown, onFocus: this.disabled ? undefined : this.handleInputFocus, onBlur: () => {
+                if (!this.disabled) {
+                    this.focused = false;
+                    this.handleFocusOut();
+                }
+            }, placeholder: this.placeholder })), h("div", { class: "b2b-icons" }, this.userInputDate && !this.disabled && (h("div", { tabIndex: 0, onClick: () => {
                 this.invalid = false;
                 this.clearDateInput();
             }, class: "b2b-close-icon", onKeyDown: event => {
@@ -372,27 +388,25 @@ export class B2bDatePicker {
                     this.invalid = false;
                     this.clearDateInput();
                 }
-            } }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { tabindex: 0, onClick: () => {
-                if (this.invalid) {
-                    this.invalid = false;
-                }
-                this.showHideDatePicker();
-            }, onKeyDown: event => {
-                if (event.key === 'Enter') {
-                    if (this.invalid) {
-                        this.invalid = false;
-                    }
+            } }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { tabIndex: this.disabled ? -1 : 0, onClick: this.disabled
+                ? undefined
+                : () => {
+                    this.showHideDatePicker();
+                }, onKeyDown: event => {
+                if (!this.disabled && event.key === 'Enter') {
                     this.showHideDatePicker();
                 }
-            }, class: "b2b-event-icon" }, h("b2b-icon-100", { "aria-label": this.showDatePicker
+            }, class: { 'b2b-event-icon': true }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("b2b-icon-100", { "aria-label": this.showDatePicker
                 ? 'close date picker'
-                : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { class: {
+                : 'open date picker', icon: "b2b_icon-event", clickable: !this.disabled }))))), h("div", { class: {
                 'b2b-date-picker-body': true,
                 'b2b-date-picker-body--hidden': !this.showDatePicker,
             } }, this.datePickerView === "Days" /* DatePickerView.Days */ && (h("div", null, h("b2b-date-picker-header", { language: this.language, selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-date-picker-days-header", { language: this.language }), h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates, disableDates: this.datesToBeDisabled, disableDatesUntil: this.normalizedDisableDatesUntil, disableEvery: this.normalizedDisableEvery, disableDatesFrom: this.normalizedDisableDatesFrom }))), this.datePickerView === "Months" /* DatePickerView.Months */ && (h("b2b-date-picker-months", { language: this.language, selectedMonth: this.selectedMonth })), this.datePickerView === "Years" /* DatePickerView.Years */ && (h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), h("span", { class: {
                 'b2b-date-picker-hint': true,
                 'b2b-date-picker-hint--error': this.invalid,
-            } }, this.invalid ? this.errorMessage : this.showHint && this.hint)));
+            } }, !this.showDatePicker && this.invalid
+            ? this.errorMessage
+            : this.showHint && this.hint)));
     }
     static get is() { return "b2b-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -408,6 +422,24 @@ export class B2bDatePicker {
     }
     static get properties() {
         return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the date picker is disabled. By default, this is false."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "disablePastDates": {
                 "type": "boolean",
                 "mutable": false,
@@ -741,6 +773,9 @@ export class B2bDatePicker {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "handleDisabledChanged"
+            }, {
                 "propName": "disableDates",
                 "methodName": "handleDisableDatesChanged"
             }, {