@siemens/ix 4.4.0 → 5.1.0

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

@@ -6,97 +6,37 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { iconChevronLeftSmall, iconChevronRightSmall, iconSingleCheck, } from "@siemens/ix-icons/icons";
-import { Fragment, h, Host, } from "@stencil/core";
+import { iconChevronLeftSmall, iconChevronRightSmall, } from "@siemens/ix-icons/icons";
+import { h, Host, Mixin, } from "@stencil/core";
 import { DateTime, Info } from "luxon";
-import { OnListener } from "../utils/listener";
+import { queryElements } from "../utils/focus/focus-utilities";
+import { DefaultMixins } from "../utils/internal/component";
 import { makeRef } from "../utils/make-ref";
-export class DatePicker {
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+import { hasKeyboardMode } from "../utils/internal/mixins/setup.mixin";
+export class DatePicker extends Mixin(...DefaultMixins) {
     constructor() {
-        /**
-         * Date format string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.format = 'yyyy/LL/dd';
-        /**
-         * If true, disables date range selection (from/to).
-         */
-        this.singleSelection = false;
-        /**
-         * Corner style.
-         */
-        this.corners = 'rounded';
-        /**
-         * The earliest date that can be selected by the date picker.
-         * If not set there will be no restriction.
-         */
-        this.minDate = '';
-        /**
-         * The latest date that can be selected by the date picker.
-         * If not set there will be no restriction.
-         */
-        this.maxDate = '';
-        /**
-         * Text of the date select button.
-         */
-        this.i18nDone = 'Done';
-        /**
-         * ARIA label for the previous month icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         */
-        this.ariaLabelPreviousMonthButton = 'Previous month';
-        /**
-         * ARIA label for the next month icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         */
-        this.ariaLabelNextMonthButton = 'Next month';
-        /**
-         * The index of which day to start the week on, based on the Locale#weekdays array.
-         * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on Monday.
-         */
-        this.weekStartIndex = 0;
-        /**
-         * Shows week numbers displayed on the left side of the date picker.
-         *
-         * @since 3.0.0
-         */
-        this.showWeekNumbers = false;
-        /** @internal */
-        this.embedded = false;
-        /** @internal */
-        this.today = DateTime.now().toISO();
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.selectedYear = 0;
-        this.tempYear = 0;
-        this.startYear = 0;
-        this.endYear = 0;
-        this.selectedMonth = 0;
-        this.tempMonth = 0;
-        this.dropdownButtonRef = makeRef();
-        this.yearContainerRef = makeRef();
-        this.firstMonthRef = makeRef();
-        this.focusedDay = 1;
-        this.isDayFocus = false;
-        this.monthChangedFromFocus = false;
-        this.DAYS_IN_WEEK = 7;
-        this.calendar = [];
+        super();
     }
+    hostElement;
+    /**
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    format = 'yyyy/LL/dd';
+    /**
+     * If true, disables date range selection (from/to).
+     */
+    singleSelection = false;
+    /**
+     * Corner style.
+     */
+    corners = 'rounded';
+    /**
+     * The selected starting date. If the date picker is not in range mode, this is the selected date.
+     * Format has to match the `format` property.
+     */
+    from;
     watchFromPropHandler(newValue) {
         if (!newValue) {
             this.currFromDate = undefined;
@@ -108,6 +48,11 @@ export class DatePicker {
             this.updateSelectedYearMonth(date);
         }
     }
+    /**
+     * The selected end date. If the date picker is not in range mode, this property has no impact.
+     * Format has to match the `format` property.
+     */
+    to;
     watchToPropHandler(newValue) {
         if (!newValue) {
             this.currToDate = undefined;
@@ -119,21 +64,107 @@ export class DatePicker {
             this.updateSelectedYearMonth(date);
         }
     }
+    /**
+     * The earliest date that can be selected by the date picker.
+     * If not set there will be no restriction.
+     */
+    minDate = '';
+    /**
+     * The latest date that can be selected by the date picker.
+     * If not set there will be no restriction.
+     */
+    maxDate = '';
+    /**
+     * Text of the date select button.
+     */
+    i18nDone = 'Done';
+    /**
+     * ARIA label for the previous month icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     */
+    ariaLabelPreviousMonthButton = 'Change calendar view to previous month';
+    /**
+     * ARIA label for the next month icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     */
+    ariaLabelNextMonthButton = 'Change calendar view to next month';
+    /**
+     * ARIA label for the next month icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 5.0.0
+     */
+    ariaLabelMonthSelection = 'Select month';
+    /**
+     * ARIA label for the next month icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 5.0.0
+     */
+    ariaLabelYearSelection = 'Select year';
+    /**
+     * The index of which day to start the week on, based on the Locale#weekdays array.
+     * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on Monday.
+     */
+    weekStartIndex = 0;
+    /**
+     * Locale identifier (e.g. 'en' or 'de').
+     * The locale is used to translate the labels for weekdays and months.
+     * It also determines the default order of weekdays based on the locale's conventions.
+     * When the locale changes, the weekday labels are rotated according to the `weekStartIndex`.
+     * It does not affect the values returned by methods and events.
+     */
+    locale;
     onLocaleChange() {
         this.setTranslations();
     }
+    /**
+     * Shows week numbers displayed on the left side of the date picker.
+     *
+     * @since 3.0.0
+     */
+    showWeekNumbers = false;
+    /** @internal */
+    embedded = false;
+    /** @internal */
+    today = DateTime.now().toISO();
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Emitted when the date selection changes. The `DateChangeEvent` contains `from` and `to` properties.
+     * The property strings are formatted according to the `format` property and not affected by the `locale` property.
+     * The locale applied is always `en-US`.
+     * Note: Since 2.0.0 `dateChange` does not dispatch detail property as `string`
+     */
+    dateChange;
+    /**
+     * Date range change event. Emitted when the date range selection changes and the component is in range mode. The `DateChangeEvent` contains `from` and `to` properties.
+     * The property strings are formatted according to the `format` property and not affected by the `locale` property.
+     * The locale applied is always `en-US`.
+     */
+    dateRangeChange;
+    /**
+     * Date selection event. Emitted when the selection is confirmed via the date select button. The `DateChangeEvent` contains `from` and `to` properties.
+     * The property strings are formatted according to the `format` property and not affected by the `locale` property.
+     * The locale applied is always `en-US`.
+     */
+    dateSelect;
     /**
      * Get the currently selected date or range. The object returned contains `from` and `to` properties.
      * The property strings are formatted according to the `format` property and not affected by the `locale` property.
      * The locale applied is always `en-US`.
      */
     async getCurrentDate() {
-        var _a, _b, _c, _d;
-        const _from = ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.isValid)
-            ? (_b = this.currFromDate) === null || _b === void 0 ? void 0 : _b.toFormat(this.format)
+        const _from = this.currFromDate?.isValid
+            ? this.currFromDate?.toFormat(this.format)
             : undefined;
-        const _to = ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.isValid)
-            ? (_d = this.currToDate) === null || _d === void 0 ? void 0 : _d.toFormat(this.format)
+        const _to = this.currToDate?.isValid
+            ? this.currToDate?.toFormat(this.format)
             : undefined;
         if (!this.singleSelection) {
             return {
@@ -146,10 +177,47 @@ export class DatePicker {
             to: undefined,
         };
     }
-    handleKeyUp(event) {
+    currFromDate;
+    currToDate;
+    selectedYear = 0;
+    tempYear = 0;
+    startYear = 0;
+    endYear = 0;
+    selectedMonth = 0;
+    tempMonth = 0;
+    yearDropdownButtonRef = makeRef();
+    yearMonthSelectionDropdownRef = makeRef();
+    dayNames;
+    monthNames;
+    focusedDay = 1;
+    isDayFocus = false;
+    monthChangedFromFocus = false;
+    DAYS_IN_WEEK = 7;
+    calendar = [];
+    onKeyDown(event) {
         if (!this.isDayFocus) {
             return;
         }
+        if (this.yearMonthSelectionDropdownRef.current?.show) {
+            return;
+        }
+        if (['PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
+            switch (event.key) {
+                case 'PageUp':
+                    this.navigateCalendar(-1, event.shiftKey);
+                    break;
+                case 'PageDown':
+                    this.navigateCalendar(1, event.shiftKey);
+                    break;
+                case 'Home':
+                    this.focusFirstDayOfCurrentWeek();
+                    break;
+                case 'End':
+                    this.focusLastDayOfCurrentWeek();
+                    break;
+            }
+            return;
+        }
         let _focusedDay = this.focusedDay;
         switch (event.key) {
             case 'ArrowLeft':
@@ -167,21 +235,41 @@ export class DatePicker {
             default:
                 return;
         }
-        if (_focusedDay > this.getDaysInCurrentMonth()) {
-            _focusedDay = _focusedDay - this.getDaysInCurrentMonth();
-            this.changeToAdjacentMonth(1);
+        event.preventDefault();
+        this.setFocusedDay(_focusedDay);
+    }
+    setFocusedDay(day = 0) {
+        if (day > this.getDaysInCurrentMonth()) {
+            day = day - this.getDaysInCurrentMonth();
+            this.changeCalendarView(1);
             this.monthChangedFromFocus = true;
         }
-        else if (_focusedDay < 1) {
-            this.changeToAdjacentMonth(-1);
-            _focusedDay = _focusedDay + this.getDaysInCurrentMonth();
+        else if (day < 1) {
+            this.changeCalendarView(-1);
+            day = day + this.getDaysInCurrentMonth();
             this.monthChangedFromFocus = true;
         }
-        this.focusedDay = _focusedDay;
+        this.focusedDay = day;
     }
     getDaysInCurrentMonth() {
         return (DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0);
     }
+    getFirstDayOfWeek(day) {
+        const week = this.calendar.find((w) => w.dayNumbers.includes(day));
+        if (!week) {
+            return day;
+        }
+        const firstDay = week.dayNumbers.find((d) => d !== undefined);
+        return firstDay ?? day;
+    }
+    getLastDayOfWeek(day) {
+        const week = this.calendar.find((w) => w.dayNumbers.includes(day));
+        if (!week) {
+            return day;
+        }
+        const lastDay = [...week.dayNumbers].reverse().find((d) => d !== undefined);
+        return lastDay ?? day;
+    }
     getDateTimeNow() {
         return DateTime.fromISO(this.today);
     }
@@ -193,7 +281,10 @@ export class DatePicker {
         }
         return date;
     }
-    updateSelectedYearMonth(date) {
+    /**
+     * @internal
+     */
+    async updateSelectedYearMonth(date) {
         this.selectedYear = date.year;
         this.selectedMonth = date.month - 1;
     }
@@ -204,7 +295,6 @@ export class DatePicker {
         this.isDayFocus = true;
     }
     componentWillLoad() {
-        var _a, _b, _c, _d;
         this.setTranslations();
         this.currFromDate = this.from
             ? DateTime.fromFormat(this.from, this.format)
@@ -212,15 +302,24 @@ export class DatePicker {
         this.currToDate = this.to
             ? DateTime.fromFormat(this.to, this.format)
             : undefined;
-        const year = (_b = (_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : this.getDateTimeNow().year;
-        this.startYear = year - 5;
-        this.endYear = year + 5;
+        const year = this.currFromDate?.year ?? this.getDateTimeNow().year;
+        this.startYear = year - 101;
+        this.endYear = year + 101;
         this.selectedMonth =
-            ((_d = (_c = this.currFromDate) === null || _c === void 0 ? void 0 : _c.month) !== null && _d !== void 0 ? _d : this.getDateTimeNow().month) - 1;
+            (this.currFromDate?.month ?? this.getDateTimeNow().month) - 1;
         this.selectedYear = year;
         this.tempMonth = this.selectedMonth;
         this.tempYear = this.selectedYear;
     }
+    keyboardNavigationYearSelection;
+    keyboardNavigationMonthSelection;
+    disconnectedCallback() {
+        this.keyboardNavigationYearSelection?.();
+        this.keyboardNavigationMonthSelection?.();
+    }
+    componentDidLoad() {
+        super.componentDidLoad?.();
+    }
     componentWillRender() {
         this.calculateCalendar();
     }
@@ -229,7 +328,39 @@ export class DatePicker {
             return;
         }
         const dayElem = this.hostElement.shadowRoot.querySelector(`[id=day-cell-${this.focusedDay}]`);
-        dayElem.focus();
+        dayElem?.focus();
+        this.monthChangedFromFocus = false;
+    }
+    /** @internal */
+    async navigateCalendar(direction, byYear) {
+        this.navigateByMonthOrYear(byYear ? 'year' : 'month', direction);
+    }
+    /** @internal */
+    async focusFirstDayOfCurrentWeek() {
+        this.focusedDay = this.getFirstDayOfWeek(this.focusedDay);
+    }
+    /** @internal */
+    async focusLastDayOfCurrentWeek() {
+        this.focusedDay = this.getLastDayOfWeek(this.focusedDay);
+    }
+    /** @internal */
+    async isCalendarDayFocused() {
+        return this.isDayFocus && !this.yearMonthSelectionDropdownRef.current?.show;
+    }
+    /** @internal */
+    async focusActiveDay() {
+        const shadowRoot = this.hostElement.shadowRoot;
+        const dayElement = shadowRoot.querySelector('.calendar-item.selected') ??
+            shadowRoot.querySelector('.calendar-item.today') ??
+            shadowRoot.querySelector('.calendar-item.first-day');
+        if (!dayElement) {
+            return;
+        }
+        const day = dayElement.dataset.calendarDay;
+        if (day) {
+            this.focusedDay = parseInt(day, 10);
+        }
+        dayElement.focus();
     }
     setTranslations() {
         this.dayNames = this.rotateWeekDayNames(Info.weekdays('long', {
@@ -326,48 +457,12 @@ export class DatePicker {
         }
         this.calendar = calendar;
     }
-    selectTempYear(event, year) {
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        this.tempYear = year;
-    }
-    focusMonth() {
-        var _a;
-        (_a = this.firstMonthRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    infiniteScrollYears() {
-        const yearContainer = this.yearContainerRef.current;
-        if (!yearContainer) {
-            return;
-        }
-        const scroll = yearContainer.scrollTop;
-        const maxScroll = yearContainer.scrollHeight;
-        const atTop = scroll === 0;
-        const atBottom = Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;
-        const limit = 200;
-        if (this.endYear - this.startYear > limit)
-            return;
-        if (atTop) {
-            const first = yearContainer.firstElementChild;
-            this.startYear -= 5;
-            yearContainer.scrollTo(0, first.offsetTop);
-            return;
-        }
-        if (atBottom) {
-            const last = yearContainer.lastElementChild;
-            this.endYear += 5;
-            yearContainer.scrollTo(0, last.offsetTop);
-        }
-    }
     selectMonth(month) {
         this.selectedMonth = month;
         this.selectedYear = this.tempYear;
         this.tempMonth = month;
-        const dropdown = this.hostElement.shadowRoot.querySelector('ix-dropdown');
-        if (dropdown) {
-            dropdown.show = false;
-        }
     }
-    changeToAdjacentMonth(number) {
+    changeCalendarView(number) {
         if (this.selectedMonth + number < 0) {
             this.selectedYear--;
             this.selectedMonth = 11;
@@ -379,6 +474,33 @@ export class DatePicker {
         else {
             this.selectedMonth += number;
         }
+        this.tempMonth = this.selectedMonth;
+        this.tempYear = this.selectedYear;
+    }
+    navigateByMonthOrYear(unit, direction) {
+        let targetYear = this.selectedYear;
+        let targetMonth = this.selectedMonth;
+        if (unit === 'year') {
+            targetYear += direction;
+        }
+        else {
+            targetMonth += direction;
+            if (targetMonth < 0) {
+                targetMonth = 11;
+                targetYear--;
+            }
+            else if (targetMonth > 11) {
+                targetMonth = 0;
+                targetYear++;
+            }
+        }
+        const daysInTargetMonth = DateTime.utc(targetYear, targetMonth + 1).daysInMonth || 0;
+        this.focusedDay = Math.min(this.focusedDay, daysInTargetMonth);
+        this.selectedYear = targetYear;
+        this.selectedMonth = targetMonth;
+        this.tempYear = targetYear;
+        this.tempMonth = targetMonth;
+        this.monthChangedFromFocus = true;
     }
     selectDay(selectedDay, target) {
         if (target.classList.contains('disabled')) {
@@ -416,20 +538,30 @@ export class DatePicker {
             }
         });
     }
-    getDayClasses(day) {
-        var _a, _b, _c;
+    getUtilitiesBasedOnDay(day) {
         const todayObj = this.getDateTimeNow();
         const selectedDayObj = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, day));
         return {
-            'calendar-item': true,
-            'empty-day': day === undefined,
-            today: todayObj.hasSame(selectedDayObj, 'day'),
-            selected: !!(((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.hasSame(selectedDayObj, 'day')) ||
-                ((_b = this.currToDate) === null || _b === void 0 ? void 0 : _b.hasSame(selectedDayObj, 'day'))),
-            range: !!(this.currFromDate &&
+            isFirstDay: () => day === 1,
+            isToday: () => todayObj.hasSame(selectedDayObj, 'day'),
+            isSelected: () => !!(this.currFromDate?.hasSame(selectedDayObj, 'day') ||
+                this.currToDate?.hasSame(selectedDayObj, 'day')),
+            isRange: () => !!(this.currFromDate &&
                 selectedDayObj.startOf('day') > this.currFromDate.startOf('day') &&
                 this.currToDate !== undefined &&
-                selectedDayObj.startOf('day') < ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.startOf('day'))),
+                selectedDayObj.startOf('day') < this.currToDate?.startOf('day')),
+        };
+    }
+    getDayClasses(day) {
+        const selectedDayObj = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, day));
+        const util = this.getUtilitiesBasedOnDay(day);
+        return {
+            'calendar-item': true,
+            'empty-day': day === undefined,
+            'first-day': util.isFirstDay(),
+            today: util.isToday(),
+            selected: util.isSelected(),
+            range: util.isRange(),
             disabled: !this.isWithinMinMaxDate(selectedDayObj),
         };
     }
@@ -451,8 +583,8 @@ export class DatePicker {
         const maxDateObj = this.maxDate
             ? DateTime.fromFormat(this.maxDate, this.format)
             : undefined;
-        const minDateMonth = minDateObj === null || minDateObj === void 0 ? void 0 : minDateObj.month;
-        const maxDateMonth = maxDateObj === null || maxDateObj === void 0 ? void 0 : maxDateObj.month;
+        const minDateMonth = minDateObj?.month;
+        const maxDateMonth = maxDateObj?.month;
         const isBefore = minDateMonth
             ? this.tempYear === minDateObj.year && month < minDateMonth
             : false;
@@ -476,62 +608,134 @@ export class DatePicker {
             : false;
         return !isBefore && !isAfter;
     }
+    renderMonths() {
+        return this.monthNames.map((month, index) => {
+            const selected = this.tempYear === this.selectedYear && this.tempMonth === index;
+            return (h("ix-dropdown-item", { checked: selected, key: month, class: {
+                    'month-dropdown-item': true,
+                    'disabled-item': !this.isWithinMinMaxMonth(index),
+                }, onClick: () => {
+                    this.selectMonth(index);
+                } }, h("span", { class: "capitalize monthMargin" }, `${month}`)));
+        });
+    }
     renderYears() {
         const rows = [];
         for (let year = this.startYear; year <= this.endYear; year++) {
-            rows.push(h("div", { key: year, class: {
-                    arrowYear: true,
+            const selected = this.tempYear === year;
+            rows.push(h("ix-dropdown-item", { key: year, checked: selected, class: {
                     'month-dropdown-item': true,
                     'disabled-item': !this.isWithinMinMaxYear(year),
-                }, onClick: (event) => this.selectTempYear(event, year), onKeyUp: (event) => {
-                    if (event.key === 'Enter') {
-                        this.tempYear = year;
-                        this.focusMonth();
-                    }
-                }, tabIndex: 0 }, h("ix-icon", { class: {
-                    hidden: this.tempYear !== year,
-                    arrowPosition: true,
-                }, name: iconChevronRightSmall, size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`)));
+                }, onClick: () => {
+                    this.tempYear = year;
+                    this.selectedYear = this.tempYear;
+                } }, h("div", { style: { 'min-width': 'max-content' } }, `${year}`)));
         }
         return rows;
     }
+    changeFocusedDay() {
+        if (this.monthChangedFromFocus) {
+            return;
+        }
+        requestAnimationFrameNoNgZone(() => {
+            const shadowRoot = this.hostElement.shadowRoot;
+            const selectedDayElement = shadowRoot.querySelector('.calendar-item.selected');
+            const todayElement = shadowRoot.querySelector('.calendar-item.today');
+            let dayElement = selectedDayElement ?? todayElement;
+            if (!dayElement) {
+                // This only happens if the user uses the year/month selector to pick a date
+                // and then switches to a month that has either today’s date or the selected
+                dayElement = shadowRoot.querySelector('.calendar-item.first-day');
+            }
+            if (!dayElement) {
+                return;
+            }
+            const currentDay = dayElement.dataset.calendarDay;
+            if (currentDay) {
+                this.focusedDay = parseInt(currentDay, 10);
+            }
+        });
+    }
+    async intersect(entries) {
+        const container = await this.yearDropdownButtonRef.current.getDropdownReference();
+        entries.forEach((entry) => {
+            const target = entry.target;
+            if (entry.isIntersecting) {
+                if (target.dataset.sentinel === 'top') {
+                    this.startYear -= 5;
+                    if (!this.skipFirstScrollOffset) {
+                        requestAnimationFrameNoNgZone(() => {
+                            const first = queryElements(container, 'ix-dropdown-item')[0];
+                            container.scrollTo(0, first.offsetTop);
+                        });
+                    }
+                    this.skipFirstScrollOffset = false;
+                }
+                else {
+                    this.endYear += 5;
+                }
+            }
+        });
+    }
+    skipFirstScrollOffset = true;
+    intersectStart = new IntersectionObserver((entries) => this.intersect(entries), { threshold: 0.5 });
+    intersectEnd = new IntersectionObserver((entries) => this.intersect(entries), { threshold: 0.5 });
     render() {
-        return (h(Host, { key: '98ea6b7a88faa52ff75b8bba1cb2c9e22c4e73e8' }, h("ix-date-time-card", { key: 'e16c7a978263147e3e6b4a71f32d934eddf06d2c', corners: this.corners, embedded: this.embedded }, h("div", { key: 'b96e24b6b2d1876c9e10be3791a8a7417d83a380', class: "header", slot: "header" }, h("ix-icon-button", { key: '10ca5417cb64bb25679269f4608868d057cb9f54', onClick: () => this.changeToAdjacentMonth(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: '9a286af048e16def6e92bb5aaeef56ca63eeb819', class: "selector" }, h("ix-button", { key: '9c95aef10ee98999301b796562109b62ab460328', variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, h("span", { key: '87f8874169536008fc5a95ebb5f27c2d90c74013', class: "capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: '03b7ee75c45fbf966782b6685956ca16f1b9ea7d', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start", enableTopLayer: this.enableTopLayer }, h("div", { key: '6ebe9445e018d9ea0d8ea234ffe04bd5b7c756d6', class: "wrapper" }, h("div", { key: '560f769508c69c1ca7ae836f657d6b2a9a0f54dc', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), h("div", { key: '8a933460c220113a5bfe96d8b59948c43095e073', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
-                if (month === this.monthNames[0]) {
-                    this.firstMonthRef(ref);
+        return (h(Host, { key: '3a758d5378cce782272d54ed210f854e1be9bee4', onKeyDown: (event) => this.onKeyDown(event), onFocusin: () => {
+                if (hasKeyboardMode()) {
+                    this.changeFocusedDay();
+                }
+            } }, h("ix-date-time-card", { key: 'fcdc8c2d76a536bd25328bae925cfbff49dd5e0f', corners: this.corners, embedded: this.embedded }, h("div", { key: '93a206ed565efbce5401e10a8f23aa6ac3a61f69', class: "header", slot: "header" }, h("ix-icon-button", { key: 'f05099c413c1c0c9537aec0bcd8aaddbdd6cad51', onClick: () => this.changeCalendarView(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: 'f1b99b9ac1efc8048caab32a1d47873e04075f57', class: "selector" }, h("ix-dropdown-button", { key: '260c713c94550e0e0b61abf9920d20f61881342c', class: "month-selector", focusCheckedItem: true, "aria-label": this.ariaLabelMonthSelection, variant: "tertiary", label: null, onShowChanged: (event) => {
+                // Need to stop event propagation to trigger initial focus handling of the calendar days
+                event.stopPropagation();
+            } }, h("ix-typography", { key: '793f53297fe36421acfddfa5a863eacdfe6d9cfb', bold: true, class: "capitalize", slot: "button-label" }, this.monthNames[this.selectedMonth]), this.renderMonths()), h("ix-dropdown-button", { key: '110d9b7237d5a99e30fd740f2d5113a80b5662e8', class: "year-selector", focusCheckedItem: true, "aria-label": this.ariaLabelYearSelection, ref: this.yearDropdownButtonRef, variant: "tertiary", label: null, onShowChanged: (event) => {
+                // Need to stop event propagation to trigger initial focus handling of the calendar days
+                event.stopPropagation();
+                if (event.detail) {
+                    requestAnimationFrameNoNgZone(() => {
+                        this.intersectStart.observe(this.hostElement.shadowRoot.querySelector('[data-sentinel="top"]'));
+                        this.intersectEnd.observe(this.hostElement.shadowRoot.querySelector('[data-sentinel="bottom"]'));
+                        const selectedYearItem = this.yearDropdownButtonRef.current.querySelector('ix-dropdown-item[checked]');
+                        if (!selectedYearItem) {
+                            return;
+                        }
+                        requestAnimationFrameNoNgZone(() => {
+                            selectedYearItem.scrollIntoView({
+                                block: 'center',
+                            });
+                        });
+                    });
                 }
-            }, class: {
-                arrowYear: true,
-                'month-dropdown-item': true,
-                selected: this.tempYear === this.selectedYear &&
-                    this.tempMonth === index,
-                'disabled-item': !this.isWithinMinMaxMonth(index),
-            }, onClick: () => this.selectMonth(index), onKeyUp: (event) => event.key === 'Enter' && this.selectMonth(index), tabIndex: 0 }, h("ix-icon", { class: {
-                hidden: this.tempYear !== this.selectedYear ||
-                    this.tempMonth !== index,
-                checkPosition: true,
-            }, name: iconSingleCheck, size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'd183b81face1835095ebf6b0f0b741f3bd177434', onClick: () => this.changeToAdjacentMonth(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '747249d090059b0beea2d522efaafa0e816bd9b5', class: {
+                else {
+                    this.intersectStart.disconnect();
+                    this.intersectEnd.disconnect();
+                }
+            } }, h("div", { key: '1ef79a11c880ceda187e4275af1921cb230f1716', class: "infinite-scrolling-spacer" }, h("div", { key: '2d9fc10794f8efe1a8aef837008fb3a0ebe2ca29', class: "sentinel", "data-sentinel": "top" })), h("ix-typography", { key: '152c681624d375241d55c641b8013a2ce8b9874d', bold: true, class: "capitalize", slot: "button-label" }, this.selectedYear), this.renderYears(), h("div", { key: 'a8770b507077d201df514f35a46d71f3771289df', class: "infinite-scrolling-spacer" }, h("div", { key: 'e14c2e5bec16bab3d08268ae6bc61303e26355da', class: "sentinel", "data-sentinel": "bottom" })))), h("ix-icon-button", { key: '16b7fd43d4d514b628a4ac90f54c0dcd54380fd3', onClick: () => this.changeCalendarView(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '869b001d286f35e721e31afa4546865f3ed02d1c', role: "grid", class: {
                 grid: true,
                 'grid--show-week-numbers': this.showWeekNumbers,
-            } }, this.showWeekNumbers && h("div", { key: '30566707d9ad58aea828bc579abb42fab5078d4e', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, h("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
-            return (h(Fragment, null, this.showWeekNumbers && (h("div", { class: "calendar-item week-number" }, week.weekNumber)), week.dayNumbers.map((day) => {
-                return day ? (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
+            } }, h("div", { key: 'b95a4e9f19c16ae42ac8e1396f43cedcc829893d', role: "row" }, this.showWeekNumbers && (h("div", { key: '5552fb1ecbfb5f71c07b29e838f146662edf9e9e', class: "calendar-item week-day", role: "columnheader" })), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day", role: "columnheader" }, h("div", { class: "overflow" }, name.slice(0, 3)))))), this.calendar.map((week) => {
+            return (h("div", { role: "row" }, this.showWeekNumbers && (h("div", { class: "calendar-item week-number", role: "rowheader" }, week.weekNumber)), week.dayNumbers.map((day) => {
+                return day ? (h("div", { role: "gridcell", "aria-selected": this.getUtilitiesBasedOnDay(day).isSelected()
+                        ? 'true'
+                        : 'false', key: day, id: `day-cell-${day}`, "data-calendar-day": day, "data-date-value": `${week.weekNumber}-${day}`, class: this.getDayClasses(day), onClick: (e) => {
                         const target = e.currentTarget;
                         this.selectDay(day, target);
-                    }, onKeyUp: (e) => {
+                    }, onKeyDown: (e) => {
                         const target = e.currentTarget;
-                        if (e.key === 'Enter') {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
                             this.selectDay(day, target);
                         }
-                    }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${this.selectedMonth}: ${day}` }, day)) : (h("div", null));
+                    }, tabIndex: day === this.focusedDay ? 0 : -1, autofocus: this.getUtilitiesBasedOnDay(day).isToday(), onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${day} ${Info.months()[this.selectedMonth]} ${this.selectedYear}` }, day)) : (h("div", { role: "gridcell" }));
             })));
-        })), h("div", { key: '2b9a45684c662329a1e6e16062f5710d62112210', class: {
+        })), h("div", { key: 'fddd1c1fc28e5f285551bc7a197c3ddc022e7bcb', class: {
                 button: true,
                 hidden: this.singleSelection || this.embedded,
-            } }, h("ix-button", { key: '35de7243b5de0016794880b7287a96b60dc2676c', onClick: () => this.onDone() }, this.i18nDone)))));
+            } }, h("ix-button", { key: '636a74b44e1e626b618d2c86bb1c5093c82e82e3', hidden: this.singleSelection || this.embedded, onClick: () => this.onDone() }, this.i18nDone)))));
     }
     static get is() { return "ix-date-picker"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["date-picker.scss"]
@@ -727,7 +931,7 @@ export class DatePicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-label-previous-month-button",
-                "defaultValue": "'Previous month'"
+                "defaultValue": "'Change calendar view to previous month'"
             },
             "ariaLabelNextMonthButton": {
                 "type": "string",
@@ -747,7 +951,53 @@ export class DatePicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-label-next-month-button",
-                "defaultValue": "'Next month'"
+                "defaultValue": "'Change calendar view to next month'"
+            },
+            "ariaLabelMonthSelection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "ARIA label for the next month icon button\nWill be set as aria-label on the nested HTML button element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-month-selection",
+                "defaultValue": "'Select month'"
+            },
+            "ariaLabelYearSelection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "ARIA label for the next month icon button\nWill be set as aria-label on the nested HTML button element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-year-selection",
+                "defaultValue": "'Select year'"
             },
             "weekStartIndex": {
                 "type": "number",
@@ -993,6 +1243,148 @@ export class DatePicker {
                     "text": "Get the currently selected date or range. The object returned contains `from` and `to` properties.\nThe property strings are formatted according to the `format` property and not affected by the `locale` property.\nThe locale applied is always `en-US`.",
                     "tags": []
                 }
+            },
+            "updateSelectedYearMonth": {
+                "complexType": {
+                    "signature": "(date: DateTime) => Promise<void>",
+                    "parameters": [{
+                            "name": "date",
+                            "type": "DateTime<boolean>",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DateTime": {
+                            "location": "import",
+                            "path": "luxon",
+                            "id": "../../node_modules/.pnpm/@types+luxon@3.4.2/node_modules/@types/luxon/index.d.ts::DateTime",
+                            "referenceLocation": "DateTime"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "navigateCalendar": {
+                "complexType": {
+                    "signature": "(direction: -1 | 1, byYear: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "direction",
+                            "type": "1 | -1",
+                            "docs": ""
+                        }, {
+                            "name": "byYear",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "focusFirstDayOfCurrentWeek": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "focusLastDayOfCurrentWeek": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "isCalendarDayFocused": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "focusActiveDay": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }
@@ -1010,6 +1402,3 @@ export class DatePicker {
             }];
     }
 }
-__decorate([
-    OnListener('keydown')
-], DatePicker.prototype, "handleKeyUp", null);