@otto-de/b2b-core-components 1.32.2 → 1.33.0

package/dist/components/b2b-multiselect-dropdown.js

@@ -15,18 +15,17 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         this.__registerHost();
         this.__attachShadow();
         this.b2bChange = createEvent(this, "b2b-selected", 7);
-        this.handleInput = event => {
-            if (this.disabled) {
+        this.handleInput = (event) => {
+            if (this.disabled || this.groupDisabled)
                 return;
-            }
-            this.value = event.target.value.toLowerCase();
-            if (this.value !== '') {
-                const filteredList = this.optionsList.filter(option => option.toLowerCase().indexOf(this.value) > -1);
-                this.currentList = filteredList;
-            }
-            else if (this.value === '') {
-                this.currentList = this.optionsList;
-            }
+            const term = event.target.value.toLowerCase();
+            this.value = term;
+            const list = this.normalizedOptions;
+            this.currentList =
+                term === ''
+                    ? list
+                    : list.filter(o => o.label.toLowerCase().includes(term) ||
+                        o.value.toLowerCase().includes(term));
         };
         this.getOptions = () => {
             return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-multiselect-option')).slice(1);
@@ -34,10 +33,10 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         this.renderChips = () => {
             return this.currentSelectedValues.map((option, index) => {
                 if (index < this.maxOptionsVisible) {
-                    return (h("b2b-chip-component", { label: option, value: option, "onB2b-close": this.handleChipClose }));
+                    return (h("b2b-chip-component", { label: option.label, value: option.value, disabled: this.disabled || this.groupDisabled, "onB2b-close": this.handleChipClose }));
                 }
                 else if (index === this.maxOptionsVisible) {
-                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", hasCloseButton: true, onClick: this.handleOverflowOptionsClick }));
+                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", disabled: this.disabled || this.groupDisabled, onClick: this.handleOverflowOptionsClick }));
                 }
                 else {
                     return;
@@ -49,18 +48,24 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
                 this.setElementOnFocus();
             }
         };
-        this.handleSelectedChange = event => {
-            const newOption = event.detail.selectedOption;
+        this.handleSelectedChange = (event) => {
+            const value = event.detail.selectedOption;
+            const opt = this.normalizedOptions.find(o => o.value === value);
+            if (opt === undefined)
+                return;
             if (event.detail.selected) {
-                this.currentSelectedValues = [...this.currentSelectedValues, newOption];
+                if (!this.currentSelectedValues.some(o => o.value === value)) {
+                    this.currentSelectedValues = [...this.currentSelectedValues, opt];
+                }
             }
             else {
-                this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== newOption);
+                this.currentSelectedValues = this.currentSelectedValues.filter(o => o.value !== value);
             }
         };
-        this.handleChipClose = event => {
-            this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== event.detail.value);
-            this.updateOption(event.detail.value);
+        this.handleChipClose = (event) => {
+            const value = event.detail.value;
+            this.currentSelectedValues = this.currentSelectedValues.filter(o => o.value !== value);
+            this.updateOption(value);
             this.isOpen = true;
             this.resetFocus();
         };
@@ -69,21 +74,22 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
             const optionToUpdate = options.find(el => el.option === option);
             optionToUpdate.selected = false;
         };
-        this.updateAllOptions = options => {
-            // Deselect all to avoid caching issues in Vue
+        this.updateAllOptions = (options) => {
             options.forEach(option => (option.selected = false));
+            const selectedSet = new Set(this.currentSelectedValues.map(o => o.value));
             options
-                .filter(option => this.currentSelectedValues.includes(option.option))
+                .filter(option => selectedSet.has(option.option))
                 .forEach(option => (option.selected = true));
         };
         this.setElementOnFocus = () => {
-            if (this.disabled)
+            if (this.disabled || this.groupDisabled)
                 return;
             this.isElementFocused = true;
         };
         this.setElementOnBlur = (event) => {
             const nextFocusedElement = event === null || event === void 0 ? void 0 : event.relatedTarget;
-            if (!nextFocusedElement || !this.hostElement.contains(nextFocusedElement)) {
+            if (!(nextFocusedElement instanceof Node) ||
+                !this.hostElement.contains(nextFocusedElement)) {
                 this.isOpen = false;
             }
             else {
@@ -92,14 +98,14 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
             this.isElementFocused = false;
         };
         this.resetFocus = () => {
-            if (this.disabled)
+            if (this.disabled || this.groupDisabled)
                 return;
             const el = this.hostElement.shadowRoot.querySelector('.b2b-multiselect-dropdown');
             el.focus();
         };
         this.handleMouseDown = (event) => {
             /** Keep dropdown open if a tag is removed */
-            if (this.disabled) {
+            if (this.disabled || this.groupDisabled) {
                 event.preventDefault();
                 return;
             }
@@ -111,7 +117,7 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
             }
         };
         this.handleKeyDown = (event) => {
-            if (this.disabled)
+            if (this.disabled || this.groupDisabled)
                 return;
             if (event.key === 'Enter') {
                 event.preventDefault();
@@ -122,19 +128,21 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
                 this.setElementOnBlur();
             }
         };
-        this.handleSelectAll = event => {
+        this.handleSelectAll = (event) => {
             const newVal = event.detail.selected;
             const options = this.getOptions();
-            const newVals = options.map(el => el.option);
-            for (let i = 0, n = options.length; i < n; i++) {
-                options[i].selected = newVal;
-            }
+            const values = options.map(el => el.option);
+            options.forEach(el => (el.selected = newVal));
             if (newVal) {
-                // filter out duplicates
-                this.currentSelectedValues = Array.from(new Set([...this.currentSelectedValues, ...newVals]));
+                const toAdd = this.normalizedOptions.filter(o => values.includes(o.value));
+                const set = new Set(this.currentSelectedValues.map(o => o.value));
+                this.currentSelectedValues = [
+                    ...this.currentSelectedValues,
+                    ...toAdd.filter(o => !set.has(o.value)),
+                ];
             }
             else {
-                this.currentSelectedValues = this.currentSelectedValues.filter(option => !newVals.includes(option));
+                this.currentSelectedValues = this.currentSelectedValues.filter(o => !values.includes(o.value));
             }
         };
         this.updateSelectAll = (options) => {
@@ -156,35 +164,51 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         this.errorMessage = undefined;
         this.hint = undefined;
         this.disabled = false;
+        this.groupDisabled = false;
         this.currentSelectedValues = [];
-        this.currentList = this.optionsList;
+        this.currentList = [];
         this.value = '';
         this.isElementFocused = false;
         this.isOpen = false;
+        this.normalizedOptions = [];
+        this.normalizedSelected = [];
         this.hasOptionList = this.optionsList.length > 0;
     }
+    parsePropToOptArray(value) {
+        if (Array.isArray(value) && typeof value[0] === 'object') {
+            return value;
+        }
+        return parsePropToArray(value).map(v => ({
+            label: v,
+            value: v,
+        }));
+    }
     componentWillLoad() {
-        this.selectedValues = parsePropToArray(this.selectedValues);
-        this.optionsList = parsePropToArray(this.optionsList);
-        this.currentList = this.optionsList;
-        this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
+        this.normalizedSelected = this.parsePropToOptArray(this.selectedValues);
+        this.normalizedOptions = this.parsePropToOptArray(this.optionsList);
+        this.currentList = this.normalizedOptions;
+        this.hasOptionList = this.normalizedOptions.length > 0;
+        const selectedSet = new Set(this.normalizedSelected.map(o => o.value));
+        this.currentSelectedValues = this.normalizedOptions.filter(opt => selectedSet.has(opt.value));
     }
     /** Needed to trigger a re-render for async data */
     watchPropHandler(newList) {
-        this.optionsList = parsePropToArray(newList);
-        this.hasOptionList = this.optionsList.length > 0;
+        this.normalizedOptions = this.parsePropToOptArray(newList);
+        this.hasOptionList = this.normalizedOptions.length > 0;
         if (this.hasOptionList) {
-            this.currentList = this.optionsList;
-            this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
+            this.currentList = this.normalizedOptions;
+            const selectedSet = new Set(this.normalizedSelected.map(o => o.value));
+            this.currentSelectedValues = this.normalizedOptions.filter(opt => selectedSet.has(opt.value));
         }
     }
     /** Needed to trigger a re-render for async data */
     handleSelectedValuesChangeFromOutside(newVal) {
-        this.selectedValues = parsePropToArray(newVal);
-        this.currentSelectedValues = this.selectedValues.filter(val => this.optionsList.includes(val));
+        this.normalizedSelected = this.parsePropToOptArray(newVal);
+        const selectedSet = new Set(this.normalizedSelected.map(o => o.value));
+        this.currentSelectedValues = this.normalizedOptions.filter(o => selectedSet.has(o.value));
     }
     handleSelectedValuesChange(newValues) {
-        this.b2bChange.emit(newValues);
+        this.b2bChange.emit(newValues.map(o => o.value));
     }
     componentDidUpdate() {
         const options = this.getOptions();
@@ -192,18 +216,21 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: '964bdaefbeef0b8f9f29be1f2e76b795b95ba17e', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '88ab1efa48ac4ecb42c88ac35e6edbb2ad08ece2', required: this.required }, this.label), h("div", { key: '5befcc8a885278bac7f00a7407d25ff738b52366', class: {
+        const disabled = this.disabled || this.groupDisabled;
+        const hasError = this.invalid && !disabled;
+        const showHint = this.hint && !hasError;
+        const showError = this.errorMessage && hasError;
+        return (h(Host, { key: 'c7428f2ae958e0560c2725b11418d6303d762bd6', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'ec356ec9b842ff998adc0156c9cadc5e64aaba02', required: this.required }, this.label), h("div", { key: '292e2e884448319fd956a39b0b5cb154bb8ac599', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isOpen,
-                'b2b-multiselect-dropdown--error': this.invalid && !this.disabled,
-                'b2b-multiselect-dropdown--disabled': this.disabled,
+                'b2b-multiselect-dropdown--error': hasError,
+                'b2b-multiselect-dropdown--disabled': disabled,
                 'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
-            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen), "aria-expanded": this.isElementFocused }, h("div", { key: 'a0e37fe748d07f62fe0e2c1976369eb7ddcecbe9', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: 'c6ffcd302b797626eca29c0ae2876d5bedc1b41f', icon: "b2b_icon-arrow-down" })), h("div", { key: '7ceeb281cf01a1bc526c9d0b6d6c1c0d3c1bca9a', class: {
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen && !disabled), "aria-expanded": this.isElementFocused }, h("div", { key: 'e3078ea1d5ce658f84cbd7db8d15fbec5c10bcc4', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: '1591c3ee5f61627ca75e3ca7b1fa4873209d8e52', icon: "b2b_icon-arrow-down" })), h("div", { key: 'a521b5578bcfbab5ceebd638a309e2f68eea0095', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
-            } }, h("div", { key: '6c44f49ba781b31ed5bdcfad9e4c571e5bbdc871', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '07c1bc3b8acb485632e76ae2f688ea9b6647d94b', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '9264228fda064567ee88f3b26e953ef4bc4071b8', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '461fc919fecefa0bcbf7ef3adc54ed78e827f8fb', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
-            this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option }))))), (this.hint !== undefined && !this.invalid) ||
-            (this.hint !== undefined && this.disabled) ? (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)) : (''), this.errorMessage !== undefined && this.invalid && !this.disabled ? (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage)) : ('')));
+            } }, h("div", { key: '85abaf3ebe291b14f6d13758fec48972e6e0bf92', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'fb4f61401da1bf145aa024a17dd8ecb295a369bc', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '0971102609b6fa583f12e2c3f15f70a961ebebaa', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '2238627bb301f45c5bd3d4d143fc5312bec0e445', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option.value, label: option.label }))))), showHint && (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)), showError && (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -225,11 +252,14 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         "errorMessage": [1, "error-message"],
         "hint": [1],
         "disabled": [516],
+        "groupDisabled": [4, "group-disabled"],
         "currentSelectedValues": [32],
         "currentList": [32],
         "value": [32],
         "isElementFocused": [32],
         "isOpen": [32],
+        "normalizedOptions": [32],
+        "normalizedSelected": [32],
         "hasOptionList": [32]
     }, undefined, {
         "optionsList": ["watchPropHandler"],

package/dist/components/checkbox.js

@@ -76,15 +76,17 @@ const CheckboxComponent = /*@__PURE__*/ proxyCustomElement(class CheckboxCompone
         }
     }
     render() {
-        return (h(Host, { key: 'f9b0a3ab1446715b218115bb5097d7de57ae71eb', onClick: this.onClick }, h("div", { key: 'da9c2edb1f46996f8e03aedf17a52f4b2c822f0d', class: {
+        const hasError = this.invalid && !this.disabled && !this.groupDisabled;
+        const showHint = this.hint && !hasError;
+        const showError = this.error && hasError;
+        return (h(Host, { key: '57bfa6bc2e41794f9b0ead465d82538baafd33a0', onClick: this.onClick }, h("div", { key: '15577f773e6f608a797e19eb45b2b116bb1ab17b', class: {
                 'b2b-checkbox': true,
-                'b2b-checkbox--error': this.invalid && !this.disabled,
+                'b2b-checkbox--error': hasError,
                 'b2b-checkbox--disabled': this.disabled || this.groupDisabled,
                 'b2b-checkbox--checked': this.checked,
                 'b2b-checkbox--standalone': this.standalone,
                 'b2b-checkbox--indeterminate': this.indeterminate,
-            } }, h("div", { key: 'dab97157c87fbc3a9599355113b930039afeb1d0', class: "b2b-checkbox__items" }, this.renderIcon(), h("input", { key: '253f9206dc69ce6c404c7e4b3c260da6772d2786', class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, h("slot", { name: "label" }, this.label)))), (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)) : (''))));
+            } }, h("div", { key: '30fd2e78afcbf126a3a12c61b3467cb04b989d0f', class: "b2b-checkbox__items" }, this.renderIcon(), h("input", { key: '98fc87c0de77356a85181adec5ca151f93be6da2', class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled || this.groupDisabled }, h("slot", { name: "label" }, this.label)))), showHint && h("span", null, this.hint), showError && h("span", null, this.error))));
     }
     get hostElement() { return this; }
     static get style() { return B2bCheckboxStyle0; }

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

@@ -10,6 +10,7 @@ const keys = {
     ARROW_RIGHT: 'ArrowRight',
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
+    ESC: 'Escape',
 };
 const B2bDatePickerMonths = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerMonths extends HTMLElement {
     constructor() {
@@ -17,6 +18,7 @@ const B2bDatePickerMonths = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
         this.__registerHost();
         this.__attachShadow();
         this.b2bDatePickerMonthSelected = createEvent(this, "b2b-date-picker-month-selected", 7);
+        this.b2bDatePickerEscape = createEvent(this, "b2b-date-picker-escape", 7);
         this.getAllMonths = () => {
             return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-month'));
         };
@@ -47,28 +49,30 @@ const B2bDatePickerMonths = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
     }
     handleKeyDown(event) {
         event.preventDefault();
-        let index = this.selectedMonth;
         const months = this.getAllMonths();
         let currentMonth = this.getCurrentMonth();
+        let index = months.indexOf(currentMonth);
         switch (event.key) {
             case keys.ARROW_LEFT:
-                index = months.indexOf(currentMonth) - 1;
+                index -= 1;
                 break;
             case keys.ARROW_RIGHT:
-                index = months.indexOf(currentMonth) + 1;
+                index += 1;
                 break;
             case keys.ARROW_UP:
-                index = months.indexOf(currentMonth) - 3;
+                index -= 3;
                 break;
             case keys.ARROW_DOWN:
-                index = months.indexOf(currentMonth) + 3;
+                index += 3;
                 break;
             case keys.ENTER:
-                index = months.indexOf(currentMonth);
                 this.b2bDatePickerMonthSelected.emit({
                     value: index,
                 });
-                break;
+                return;
+            case keys.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
             default:
                 return;
         }
@@ -80,8 +84,12 @@ const B2bDatePickerMonths = /*@__PURE__*/ proxyCustomElement(class B2bDatePicker
         }
         this.focusCurrentMonth(months[index]);
     }
+    componentDidRender() {
+        var _a;
+        (_a = this.getCurrentMonth()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
-        return (h(Host, { key: '9ddb8ebbb24997435ceca09cc47ba7dc12b39ba7' }, h("div", { key: 'a650207f538786bb680698ffc293fd59a717ea3a', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+        return (h(Host, { key: '92f546b998c48d274d76db47db997bcda3968033' }, h("div", { key: 'cfd9e12f5d1047d6acf2be7142d070dd64517049', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
     }
     get host() { return this; }
     static get style() { return B2bDatePickerMonthsStyle0; }

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

@@ -9,6 +9,7 @@ const keys = {
     ARROW_RIGHT: 'ArrowRight',
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
+    ESC: 'Escape',
 };
 const B2bDatePickerYears = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerYears extends HTMLElement {
     constructor() {
@@ -16,6 +17,7 @@ const B2bDatePickerYears = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerY
         this.__registerHost();
         this.__attachShadow();
         this.b2bDatePickerYearSelected = createEvent(this, "b2b-date-picker-year-selected", 7);
+        this.b2bDatePickerEscape = createEvent(this, "b2b-date-picker-escape", 7);
         this.getAllYears = () => {
             return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-year'));
         };
@@ -58,32 +60,34 @@ const B2bDatePickerYears = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerY
             return years;
         };
         this.selectedYear = undefined;
-        this.yearsRange = [];
+        this.yearsRange = Array.from({ length: 201 }, (_, i) => i + 1900);
     }
     handleKeyDown(event) {
         event.preventDefault();
-        let index = this.yearsRange.indexOf(this.selectedYear);
         const years = this.getAllYears();
         let currentYear = this.getCurrentYear();
+        let index = years.indexOf(currentYear);
         switch (event.key) {
             case keys.ARROW_LEFT:
-                index = years.indexOf(currentYear) - 1;
+                index -= 1;
                 break;
             case keys.ARROW_RIGHT:
-                index = years.indexOf(currentYear) + 1;
+                index += 1;
                 break;
             case keys.ARROW_UP:
-                index = years.indexOf(currentYear) - 3;
+                index -= 3;
                 break;
             case keys.ARROW_DOWN:
-                index = years.indexOf(currentYear) + 3;
+                index += 3;
                 break;
             case keys.ENTER:
-                index = years.indexOf(currentYear);
                 this.b2bDatePickerYearSelected.emit({
                     value: this.yearsRange[index],
                 });
-                break;
+                return;
+            case keys.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
             default:
                 return;
         }
@@ -95,18 +99,14 @@ const B2bDatePickerYears = /*@__PURE__*/ proxyCustomElement(class B2bDatePickerY
         }
         this.focusCurrentYear(years[index]);
     }
-    componentWillLoad() {
-        for (let i = 1900; i <= 2100; i++) {
-            this.yearsRange.push(i);
-        }
-    }
     componentDidLoad() {
         if (this.selectedYear > 0) {
             this.scrollToYear(this.selectedYear);
+            this.getCurrentYear().focus();
         }
     }
     render() {
-        return (h(Host, { key: '22394d693b0a966c62b74de49c00d72b346a2e64' }, h("div", { key: 'a2c33dc133169c2cb558e9b92d78b56cf7fb108e', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
+        return (h(Host, { key: '2e9b64e857f36f8623cb13aa5ebd5346e21bdc6f' }, h("div", { key: 'b6a82d5fbfc2f18aab9c2c64efe3c8bbe63cfc19', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
     }
     get host() { return this; }
     static get style() { return B2bDatePickerYearsStyle0; }