@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/Calendar.js

@@ -8,7 +8,7 @@ var Calendar_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
@@ -28,6 +28,8 @@ import "./SpecialCalendarDate.js";
 import CalendarPart from "./CalendarPart.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 import CalendarPickersMode from "./types/CalendarPickersMode.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 // Default calendar for bundling
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
 // Template
@@ -35,7 +37,10 @@ import CalendarTemplate from "./CalendarTemplate.js";
 // Styles
 import calendarCSS from "./generated/themes/Calendar.css.js";
 import CalendarHeaderCss from "./generated/themes/CalendarHeader.css.js";
-import { CALENDAR_HEADER_MONTH_BUTTON, CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_BUTTON, CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_RANGE_BUTTON, CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT, } from "./generated/i18n/i18n-defaults.js";
+import { CALENDAR_HEADER_MONTH_BUTTON, CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_BUTTON, CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_RANGE_BUTTON, CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT, CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE, CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT, CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE, CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE, CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE, CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE, CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE, } from "./generated/i18n/i18n-defaults.js";
+import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
+import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
+const PHONE_MODE_BREAKPOINT = 640; // px
 /**
  * @class
  *
@@ -173,6 +178,13 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
          * @public
          */
         this.hideWeekNumbers = false;
+        /**
+         * Defines whether the component displays two months side by side in the picker popup.
+         * @default false
+         * @private
+         * @since 2.22.0
+         */
+        this._showTwoMonths = false;
         /**
          * Which picker is currently visible to the user: day/month/year/yearRange
          * @private
@@ -187,7 +199,75 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
          * @private
          */
         this._selectedItemType = "None";
+        this._phoneMode = false;
         this._valueIsProcessed = false;
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(document.body, this._handleResizeBound);
+        this._handleResize();
+    }
+    get _phoneView() {
+        return isPhone() || this._phoneMode;
+    }
+    get _portraitView() {
+        return this._phoneMode;
+    }
+    /**
+     * Handles document resize to switch between `phoneMode` and `portraitMode`.
+     * - `_phoneMode`: When resolution is under PHONE_MODE_BREAKPOINT (regardless of device type)
+     */
+    _handleResize() {
+        if (!this._showTwoMonths) {
+            return;
+        }
+        const documentWidth = document.body.offsetWidth;
+        const underBreakpoint = documentWidth <= PHONE_MODE_BREAKPOINT;
+        // Phone mode: only when it's an actual phone device
+        const phoneModeChange = (underBreakpoint && !this._phoneMode) || (!underBreakpoint && this._phoneMode);
+        if (phoneModeChange) {
+            this._phoneMode = underBreakpoint;
+        }
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(document.body, this._handleResizeBound);
+    }
+    /**
+     * Returns the timestamp for a specific month index when displaying multiple months
+     * @private
+     */
+    _getMonthTimestamp(monthIndex) {
+        if (monthIndex === 0) {
+            return this._timestamp;
+        }
+        const calendarDate = CalendarDateComponent.fromTimestamp(this._timestamp * 1000, this._primaryCalendarType);
+        const modifiedDate = modifyDateBy(calendarDate, monthIndex, "month", false);
+        return modifiedDate.valueOf() / 1000;
+    }
+    /**
+     * Generates header button text (month and year) for a specific month timestamp
+     * @private
+     */
+    _getHeaderTextForMonth(monthTimestamp) {
+        const calendarDate = CalendarDateComponent.fromTimestamp(monthTimestamp * 1000, this._primaryCalendarType);
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType });
+        const monthText = localeData.getMonthsStandAlone("wide", this._primaryCalendarType)[calendarDate.getMonth()];
+        const localDate = calendarDate.toLocalJSDate();
+        const yearText = String(yearFormat.format(localDate, true));
+        const result = {
+            monthText,
+            yearText,
+        };
+        if (this.hasSecondaryCalendarType) {
+            const secondaryDate = transformDateToSecondaryType(this._primaryCalendarType, this._secondaryCalendarType, monthTimestamp, true);
+            const secondaryCalendarDate = secondaryDate.firstDate || secondaryDate.lastDate;
+            const secondaryLocaleData = getCachedLocaleDataInstance(getLocale());
+            result.secondMonthText = secondaryLocaleData.getMonthsStandAlone("wide", this._secondaryCalendarType)[secondaryCalendarDate.getMonth()];
+            const secondaryYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
+            result.secondYearText = String(secondaryYearFormat.format(secondaryCalendarDate.toLocalJSDate(), true));
+        }
+        return result;
     }
     /**
      * @private
@@ -270,6 +350,17 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         const date = this.getFormat().parse(dateString);
         return !!date;
     }
+    get _disabledDates() {
+        const validDisabledDateRanges = this.disabledDates.filter(dateRange => {
+            const startValue = dateRange.startValue;
+            const endValue = dateRange.endValue;
+            return (startValue && this._isValidCalendarDate(startValue)) || (endValue && this._isValidCalendarDate(endValue));
+        });
+        return validDisabledDateRanges.map(dateRange => ({
+            startValue: dateRange.startValue,
+            endValue: dateRange.endValue,
+        }));
+    }
     get _specialCalendarDates() {
         const hasSelectedType = this._specialDates.some(date => date.type === this._selectedItemType);
         const validSpecialDates = this._specialDates.filter(date => {
@@ -320,7 +411,7 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
     onBeforeRendering() {
         this._normalizeCurrentPicker();
         if (!this._valueIsProcessed) {
-            if (this._selectedDatesTimestamps) {
+            if (this._selectedDatesTimestamps.length) {
                 this.timestamp = this._selectedDatesTimestamps[0];
             }
             this._valueIsProcessed = true;
@@ -397,6 +488,13 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         // Calendar's shadowRoot and all the pickers are always present - the "!" is safe to be used.
         return this.shadowRoot.querySelector(`[ui5-${this._currentPicker}picker]`);
     }
+    /**
+     * Returns the focusable element inside the Calendar (the current picker)
+     * @override
+     */
+    getFocusDomRef() {
+        return this._currentPickerDOM;
+    }
     /**
      * The year clicked the "Previous" button in the header
      */
@@ -414,9 +512,9 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
         const currentYearRange = this._currentYearRange;
         const { rangeStart, rangeEnd } = this._createYearRangeDates(currentYearRange);
-        const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeStart.valueOf() / 1000, true)
+        const rangeStartSecType = transformDateToSecondaryType(this._primaryCalendarType, this._secondaryCalendarType, rangeStart.valueOf() / 1000, true)
             .firstDate;
-        const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
+        const rangeEndSecType = transformDateToSecondaryType(this._primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
             .lastDate;
         this._headerYearRangeButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate())} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate())}`;
     }
@@ -435,12 +533,19 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
             monthButtonInfo: secondMonthInfo.textInfo,
         };
     }
+    get _isCompactMode() {
+        return getEffectiveContentDensity(this) === "compact";
+    }
+    get _monthsToShow() {
+        const monthsToShow = this._showTwoMonths && !isPhone() ? 2 : 1;
+        return monthsToShow;
+    }
     /**
      * The month button is hidden when the month picker or year picker is shown
      * @private
      */
     get _isHeaderMonthButtonHidden() {
-        return this._currentPicker !== "day";
+        return this._showTwoMonths ? this._currentPicker === "yearrange" || this._currentPicker === "year" : this._currentPicker !== "day";
     }
     /**
      * The year range picker button is shown only in the year picker
@@ -457,6 +562,10 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         return !(this._currentPicker === "day" || this._currentPicker === "month");
     }
     get _isDayPickerHidden() {
+        // In multi-month mode (monthsToShow > 1), keep day pickers visible even when other pickers are shown
+        if (this._showTwoMonths) {
+            return false;
+        }
         return this._currentPicker !== "day";
     }
     get _isMonthPickerHidden() {
@@ -468,6 +577,15 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
     get _isYearRangePickerHidden() {
         return this._currentPicker !== "yearrange";
     }
+    get _isDefaultHeaderModeInMultipleMonths() {
+        return !this._isDayPickerHidden && this._isYearPickerHidden;
+    }
+    get _shouldShowOnePickerHeaderButtonInMultipleMonths() {
+        return !this._isDayPickerHidden && !this._isYearPickerHidden;
+    }
+    get _inert() {
+        return this._showTwoMonths && (!this._isMonthPickerHidden || !this._isYearPickerHidden || !this._isYearRangePickerHidden);
+    }
     get _currentYearRange() {
         const rangeSize = this.hasSecondaryCalendarType ? 8 : 20;
         const yearsOffset = this.hasSecondaryCalendarType ? 2 : 9;
@@ -580,22 +698,40 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
         const monthLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_BUTTON, headerMonthButtonText);
         const yearLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_BUTTON, this._headerYearButtonText);
         const yearRangeLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_BUTTON, rangeStartText, rangeEndText);
+        let nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE);
+        let prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE);
+        if (this._currentPicker === "month") {
+            nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE);
+            prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE);
+        }
+        else if (this._currentPicker === "year" || this._currentPicker === "yearrange") {
+            nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE);
+            prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE);
+        }
         // Get shortcuts
         const monthShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT);
         const yearShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT);
         const yearRangeShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT);
+        const nextBtnShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT);
+        const prevBtnShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT);
         return {
             ariaLabelMonthButton: monthLabel,
             ariaLabelYearButton: yearLabel,
             ariaLabelYearRangeButton: yearRangeLabel,
+            ariaLabelNextButton: nextBtnLabel,
+            ariaLabelPrevButton: prevBtnLabel,
             // Keyboard shortcuts for aria-keyshortcuts
             keyShortcutMonthButton: monthShortcut,
             keyShortcutYearButton: yearShortcut,
             keyShortcutYearRangeButton: yearRangeShortcut,
+            keyShortcutNextButton: nextBtnShortcut,
+            keyShortcutPrevButton: prevBtnShortcut,
             // Tooltips combining label and shortcut
             tooltipMonthButton: `${monthLabel} (${monthShortcut})`,
             tooltipYearButton: `${yearLabel} (${yearShortcut})`,
             tooltipYearRangeButton: `${yearRangeLabel} (${yearRangeShortcut})`,
+            tooltipNextButton: `${nextBtnLabel} (${nextBtnShortcut})`,
+            tooltipPrevButton: `${prevBtnLabel} (${prevBtnShortcut})`,
         };
     }
     /**
@@ -651,6 +787,7 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
     }
     onYearButtonKeyUp(e) {
         if (isSpace(e)) {
+            e.preventDefault();
             this.switchToYearPicker();
             this.fireDecoratorEvent("show-year-view");
         }
@@ -666,25 +803,62 @@ let Calendar = Calendar_1 = class Calendar extends CalendarPart {
     }
     onYearRangeButtonKeyUp(e) {
         if (isSpace(e)) {
+            e.preventDefault();
             this.switchToYearRangePicker();
             this.fireDecoratorEvent("show-year-range-view");
         }
     }
-    onPrevButtonClick(e) {
-        if (this._previousButtonDisabled) {
+    _handleNavigationButtonClick(e, isDisabled, action) {
+        if (isDisabled) {
             e.preventDefault();
             return;
         }
-        this.onHeaderPreviousPress();
+        if (e.button !== 0) {
+            return;
+        }
+        action();
         e.preventDefault();
     }
-    onNextButtonClick(e) {
-        if (this._nextButtonDisabled) {
+    _handlePrevNextButtonKeyDown(e, isDisabled, action) {
+        if (isDisabled) {
             e.preventDefault();
             return;
         }
-        this.onHeaderNextPress();
-        e.preventDefault();
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            action();
+            e.preventDefault();
+        }
+    }
+    _handlePrevNextButtonKeyUp(e, isDisabled, action) {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        if (isSpace(e)) {
+            e.preventDefault();
+            action();
+        }
+    }
+    onPrevButtonClick(e) {
+        this._handleNavigationButtonClick(e, this._previousButtonDisabled, () => this.onHeaderPreviousPress());
+    }
+    onNextButtonClick(e) {
+        this._handleNavigationButtonClick(e, this._nextButtonDisabled, () => this.onHeaderNextPress());
+    }
+    onPrevButtonKeyDown(e) {
+        this._handlePrevNextButtonKeyDown(e, this._previousButtonDisabled, () => this.onHeaderPreviousPress());
+    }
+    onPrevButtonKeyUp(e) {
+        this._handlePrevNextButtonKeyUp(e, this._previousButtonDisabled, () => this.onHeaderPreviousPress());
+    }
+    onNextButtonKeyDown(e) {
+        this._handlePrevNextButtonKeyDown(e, this._nextButtonDisabled, () => this.onHeaderNextPress());
+    }
+    onNextButtonKeyUp(e) {
+        this._handlePrevNextButtonKeyUp(e, this._nextButtonDisabled, () => this.onHeaderNextPress());
     }
     /**
      * Returns an array of UTC timestamps, representing the selected dates.
@@ -710,6 +884,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Calendar.prototype, "hideWeekNumbers", void 0);
+__decorate([
+    property({ type: Boolean })
+], Calendar.prototype, "_showTwoMonths", void 0);
 __decorate([
     property()
 ], Calendar.prototype, "_currentPicker", void 0);
@@ -746,9 +923,15 @@ __decorate([
 __decorate([
     slot({ type: HTMLElement, invalidateOnChildChange: true })
 ], Calendar.prototype, "specialDates", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
+], Calendar.prototype, "disabledDates", void 0);
 __decorate([
     property()
 ], Calendar.prototype, "_selectedItemType", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Calendar.prototype, "_phoneMode", void 0);
 __decorate([
     i18n("@ui5/webcomponents")
 ], Calendar, "i18nBundle", void 0);