@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/DayPicker.js

@@ -7,20 +7,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var DayPicker_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
-import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import { isSpace, isSpaceShift, isEnter, isEnterShift, isUp, isDown, isLeft, isRight, isHome, isEnd, isHomeCtrl, isEndCtrl, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageUpShiftCtrl, isPageDownShift, isPageDownAlt, isPageDownShiftCtrl, } from "@ui5/webcomponents-base/dist/Keys.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import calculateWeekNumber from "@ui5/webcomponents-localization/dist/dates/calculateWeekNumber.js";
 import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import CalendarUtils from "@ui5/webcomponents-localization/dist/CalendarUtils.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 import CalendarPart from "./CalendarPart.js";
-import { DAY_PICKER_WEEK_NUMBER_TEXT, DAY_PICKER_NON_WORKING_DAY, DAY_PICKER_TODAY, } from "./generated/i18n/i18n-defaults.js";
+import { DAY_PICKER_WEEK_NUMBER_TEXT, DAY_PICKER_NON_WORKING_DAY, DAY_PICKER_TODAY, LIST_ITEM_SELECTED, } from "./generated/i18n/i18n-defaults.js";
 // Template
-import DayPickerTemplate from "./generated/templates/DayPickerTemplate.lit.js";
+import DayPickerTemplate from "./DayPickerTemplate.js";
 // Styles
 import dayPickerCSS from "./generated/themes/DayPicker.css.js";
 const isBetween = (x, num1, num2) => x > Math.min(num1, num2) && x < Math.max(num1, num2);
@@ -34,6 +38,48 @@ const DAYS_IN_WEEK = 7;
  * @private
  */
 let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
+    constructor() {
+        super(...arguments);
+        /**
+         * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
+         * @default []
+         */
+        this.selectedDates = [];
+        /**
+         * Defines the type of selection used in the day picker component.
+         * Accepted property values are:
+         *
+         * - `CalendarSelectionMode.Single` - enables a single date selection.(default value)
+         * - `CalendarSelectionMode.Range` - enables selection of a date range.
+         * - `CalendarSelectionMode.Multiple` - enables selection of multiple dates.
+         * @default "Single"
+         */
+        this.selectionMode = "Single";
+        /**
+         * Defines the visibility of the week numbers column.
+         *
+         * **Note:** For calendars other than Gregorian,
+         * the week numbers are not displayed regardless of what is set.
+         * @default false
+         * @since 1.0.0-rc.8
+         */
+        this.hideWeekNumbers = false;
+        /**
+         * @private
+         */
+        this._weeks = [];
+        this._dayNames = [];
+        /**
+         * When set, the component will skip all work in onBeforeRendering and will not automatically set the focus on itself
+         * @private
+         */
+        this._hidden = false;
+        /**
+         * Array of special calendar dates (if such are passed) from the calendar.
+         * @private
+         */
+        this.specialCalendarDates = [];
+    }
     onBeforeRendering() {
         const localeData = getCachedLocaleDataInstance(getLocale());
         this._buildWeeks(localeData);
@@ -56,7 +102,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         const nonWorkingDayLabel = DayPicker_1.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
         const todayLabel = DayPicker_1.i18nBundle.getText(DAY_PICKER_TODAY);
         const tempDate = this._getFirstDay(); // date that will be changed by 1 day 42 times
-        const todayDate = CalendarDate.fromLocalJSDate(new Date(), this._primaryCalendarType); // current day date - calculate once
+        const todayDate = CalendarDate.fromLocalJSDate(UI5Date.getInstance(), this._primaryCalendarType); // current day date - calculate once
         const calendarDate = this._calendarDate; // store the _calendarDate value as this getter is expensive and degrades IE11 perf
         const minDate = this._minDate; // store the _minDate (expensive getter)
         const maxDate = this._maxDate; // store the _maxDate (expensive getter)
@@ -70,6 +116,8 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             }
             const specialCalendarDate = specialCalendarDates.find(specialDate => specialDate.specialDateTimestamp === timestamp);
             const specialDayType = specialCalendarDate ? specialCalendarDate.type : "";
+            const specialDayTooltip = specialCalendarDate ? specialCalendarDate.tooltip : "";
+            const unnamedCalendarTypeLabel = specialDayTooltip && !this._isDefaultCalendarLegendType(specialDayType) ? specialDayTooltip : "";
             const isFocused = tempDate.getMonth() === calendarDate.getMonth() && tempDate.getDate() === calendarDate.getDate();
             const isSelected = this._isDaySelected(timestamp);
             const isSelectedBetween = this._isDayInsideSelectionRange(timestamp);
@@ -78,37 +126,44 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             const isDisabled = tempDate.valueOf() < minDate.valueOf() || tempDate.valueOf() > maxDate.valueOf();
             const isToday = tempDate.isSame(todayDate);
             const isFirstDayOfWeek = tempDate.getDay() === firstDayOfWeek;
-            const nonWorkingAriaLabel = isWeekend ? `${nonWorkingDayLabel} ` : "";
+            const nonWorkingAriaLabel = (isWeekend || specialDayType === "NonWorking") && specialDayType !== "Working"
+                ? `${nonWorkingDayLabel} `
+                : "";
             const todayAriaLabel = isToday ? `${todayLabel} ` : "";
             const tempSecondDateNumber = tempSecondDate ? tempSecondDate.getDate() : "";
             const tempSecondYearNumber = tempSecondDate ? tempSecondDate.getYear() : "";
             const secondaryMonthsNamesString = secondaryMonthsNames.length > 0 ? secondaryMonthsNames[tempSecondDate.getMonth()] : "";
+            const tooltip = `${todayAriaLabel}${nonWorkingAriaLabel}${unnamedCalendarTypeLabel}`.trim();
             const ariaLabel = this.hasSecondaryCalendarType
-                ? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}; ${secondaryMonthsNamesString} ${tempSecondDateNumber}, ${tempSecondYearNumber}`
-                : `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`;
+                ? `${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}; ${secondaryMonthsNamesString} ${tempSecondDateNumber}, ${tempSecondYearNumber} ${tooltip}`.trim()
+                : `${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()} ${tooltip}`.trim();
             const day = {
                 timestamp: timestamp.toString(),
                 focusRef: isFocused,
-                _tabIndex: isFocused ? "0" : "-1",
-                selected: isSelected,
+                _tabIndex: isFocused ? 0 : -1,
+                selected: isSelected || isSelectedBetween,
                 day: tempDate.getDate(),
                 secondDay: this.hasSecondaryCalendarType ? tempSecondDate.getDate() : undefined,
                 _isSecondaryCalendarType: this.hasSecondaryCalendarType,
                 classes: `ui5-dp-item ui5-dp-wday${dayOfTheWeek}`,
+                tooltip,
                 ariaLabel,
-                ariaSelected: isSelected ? "true" : "false",
-                ariaDisabled: isOtherMonth ? "true" : undefined,
+                ariaSelected: isSelected || isSelectedBetween,
+                ariaDisabled: isDisabled || isOtherMonth,
                 disabled: isDisabled,
                 type: specialDayType,
+                parts: "day-cell",
             };
             if (isFirstDayOfWeek) {
                 day.classes += " ui5-dp-firstday";
             }
             if (isSelected) {
                 day.classes += " ui5-dp-item--selected";
+                day.parts += " day-cell-selected";
             }
             if (isSelectedBetween) {
                 day.classes += " ui5-dp-item--selected-between";
+                day.parts += " day-cell-selected-between";
             }
             if (isToday) {
                 day.classes += " ui5-dp-item--now";
@@ -116,8 +171,8 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             if (isOtherMonth) {
                 day.classes += " ui5-dp-item--othermonth";
             }
-            if (isWeekend) {
-                day.classes += " ui5-dp-item--weeekend";
+            if ((isWeekend || specialDayType === "NonWorking") && specialDayType !== "Working") {
+                day.classes += " ui5-dp-item--weekend";
             }
             if (isDisabled) {
                 day.classes += " ui5-dp-item--disabled";
@@ -127,8 +182,9 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             }
             week.push(day);
             if (dayOfTheWeek === DAYS_IN_WEEK - 1) { // 0-indexed so 6 is the last day of the week
+                const weekNumber = this._calculateWeekNumber(tempDate.toLocalJSDate());
                 week.unshift({
-                    weekNum: calculateWeekNumber(getFirstDayOfWeek(), tempDate.toUTCJSDate(), tempDate.getYear(), getLocale(), localeData, this._primaryCalendarType),
+                    weekNum: weekNumber,
                     isHidden: this.shouldHideWeekNumbers,
                 });
             }
@@ -142,6 +198,11 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             }
         }
     }
+    _calculateWeekNumber(date) {
+        const oDateFormat = DateFormat.getDateInstance({ pattern: "w", calendarType: this.primaryCalendarType, calendarWeekNumbering: this.calendarWeekNumbering });
+        const weekNumber = oDateFormat.format(date);
+        return Number(weekNumber);
+    }
     /**
      * Builds the dayNames object (header of the month).
      * @param localeData
@@ -192,13 +253,18 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         if (this._autoFocus && !this._hidden) {
             this.focus();
         }
-        const focusedDay = this.shadowRoot.querySelector("[data-sap-focus-ref]");
-        if (focusedDay && document.activeElement !== focusedDay && this._specialCalendarDates.length === 0) {
-            focusedDay.focus();
+    }
+    _focusCorrectDay() {
+        if (this._shouldFocusDay) {
+            this._focusableDay.focus();
         }
     }
+    get _shouldFocusDay() {
+        return document.activeElement !== this._focusableDay && this._specialCalendarDates.length === 0;
+    }
     _onfocusin() {
         this._autoFocus = true;
+        this._focusCorrectDay();
     }
     _onfocusout() {
         this._autoFocus = false;
@@ -212,8 +278,10 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         if (this.selectionMode === CalendarSelectionMode.Single) {
             return timestamp === this.selectedDates[0];
         }
-        // Multiple, Range
-        return this.selectedDates.includes(timestamp);
+        if (this.selectionMode === CalendarSelectionMode.Multiple) {
+            return this.selectedDates.includes(timestamp);
+        }
+        return timestamp === this.selectedDates[0] || timestamp === this.selectedDates[this.selectedDates.length - 1];
     }
     /**
      * Tells if the day is inside a selection range (light blue).
@@ -230,7 +298,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             return isBetween(timestamp, this.selectedDates[0], this._secondTimestamp);
         }
         // Two dates selected - stable range
-        return isBetween(timestamp, this.selectedDates[0], this.selectedDates[1]);
+        return isBetween(timestamp, this.selectedDates[0], this.selectedDates[this.selectedDates.length - 1]);
     }
     /**
      * Selects/deselects a day.
@@ -249,24 +317,28 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         const timestamp = this._getTimestampFromDom(target);
         this._safelySetTimestamp(timestamp);
         this._updateSecondTimestamp();
-        if (this.selectionMode === CalendarSelectionMode.Single) {
-            this.selectedDates = [timestamp];
-        }
-        else if (this.selectionMode === CalendarSelectionMode.Multiple) {
+        this._updateSelectedDates(timestamp, isShift);
+        this.fireDecoratorEvent("change", {
+            timestamp: this.timestamp,
+            dates: this.selectedDates,
+        });
+    }
+    _updateSelectedDates(timestamp, isShift) {
+        if (this.selectionMode === CalendarSelectionMode.Multiple) {
             if (this.selectedDates.length > 0 && isShift) {
                 this._multipleSelection(timestamp);
             }
             else {
                 this._toggleTimestampInSelection(timestamp);
             }
+            return;
         }
-        else {
-            this.selectedDates = (this.selectedDates.length === 1) ? [...this.selectedDates, timestamp] : [timestamp];
+        announce(DayPicker_1.i18nBundle.getText(LIST_ITEM_SELECTED), InvisibleMessageMode.Assertive);
+        if (this.selectionMode === CalendarSelectionMode.Range && this.selectedDates.length === 1) {
+            this.selectedDates = [this.selectedDates[0], timestamp];
+            return;
         }
-        this.fireEvent("change", {
-            timestamp: this.timestamp,
-            dates: this.selectedDates,
-        });
+        this.selectedDates = [timestamp];
     }
     /**
      * Selects/deselects the whole row (week).
@@ -293,7 +365,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
                 }
             }
         });
-        this.fireEvent("change", {
+        this.fireDecoratorEvent("change", {
             timestamp: this.timestamp,
             dates: this.selectedDates,
         });
@@ -304,6 +376,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         }
         else {
             this._addTimestampToSelection(timestamp);
+            announce(DayPicker_1.i18nBundle.getText(LIST_ITEM_SELECTED), InvisibleMessageMode.Assertive);
         }
     }
     _addTimestampToSelection(timestamp) {
@@ -500,7 +573,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         this._safelyModifyTimestampBy(amount, unit, preserveDate);
         this._updateSecondTimestamp();
         // Notify the calendar to update its timestamp
-        this.fireEvent("navigate", { timestamp: this.timestamp });
+        this.fireDecoratorEvent("navigate", { timestamp: this.timestamp });
     }
     /**
      * Sets the timestamp to an absolute value.
@@ -510,7 +583,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     _setTimestamp(value) {
         this._safelySetTimestamp(value);
         this._updateSecondTimestamp();
-        this.fireEvent("navigate", { timestamp: this.timestamp });
+        this.fireDecoratorEvent("navigate", { timestamp: this.timestamp });
     }
     /**
      * During range selection, when the user is navigating with the keyboard,
@@ -531,14 +604,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         }
         return this.hideWeekNumbers;
     }
-    get classes() {
-        return {
-            root: {
-                "ui5-dp-root": true,
-                "ui5-dp-twocalendartypes": this.hasSecondaryCalendarType,
-            },
-        };
-    }
     _isWeekend(oDate) {
         const localeData = getCachedLocaleDataInstance(getLocale());
         const iWeekDay = oDate.getDay(), iWeekendStart = localeData.getWeekendStart(), iWeekendEnd = localeData.getWeekendEnd();
@@ -549,6 +614,9 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         const targetParent = target.parentNode;
         return (target.className.indexOf("ui5-dp-item") > -1) || (targetParent && targetParent.classList && targetParent.classList.contains("ui5-dp-item"));
     }
+    _isDefaultCalendarLegendType(type) {
+        return ["NonWorking", "Working", "Today", "Selected", "None"].includes(type);
+    }
     _getSecondaryDay(tempDate) {
         return new CalendarDate(tempDate, this.secondaryCalendarType);
     }
@@ -568,9 +636,9 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         return firstDay;
     }
     _getFirstDayOfWeek() {
+        const result = CalendarUtils.getWeekConfigurationValues(this.calendarWeekNumbering);
         const localeData = getCachedLocaleDataInstance(getLocale());
-        const confFirstDayOfWeek = getFirstDayOfWeek();
-        return Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : localeData.getFirstDayOfWeek();
+        return result?.firstDayOfWeek ? result.firstDayOfWeek : localeData.getFirstDayOfWeek();
     }
     get styles() {
         return {
@@ -590,39 +658,35 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
 };
 __decorate([
-    property({
-        validator: Integer,
-        multiple: true,
-        compareValues: true,
-    })
+    property({ type: Array })
 ], DayPicker.prototype, "selectedDates", void 0);
 __decorate([
-    property({ type: CalendarSelectionMode, defaultValue: CalendarSelectionMode.Single })
+    property()
 ], DayPicker.prototype, "selectionMode", void 0);
 __decorate([
     property({ type: Boolean })
 ], DayPicker.prototype, "hideWeekNumbers", void 0);
 __decorate([
-    property({
-        type: Object,
-        multiple: true,
-    })
+    property({ type: Array })
 ], DayPicker.prototype, "_weeks", void 0);
 __decorate([
-    property({
-        type: Object,
-        multiple: true,
-    })
+    property({ type: Array })
 ], DayPicker.prototype, "_dayNames", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], DayPicker.prototype, "_hidden", void 0);
 __decorate([
-    property()
+    property({ type: Number })
 ], DayPicker.prototype, "_secondTimestamp", void 0);
 __decorate([
-    property({ type: Object, multiple: true })
+    property({ type: Array })
 ], DayPicker.prototype, "specialCalendarDates", void 0);
+__decorate([
+    query("[data-sap-focus-ref]")
+], DayPicker.prototype, "_focusableDay", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], DayPicker, "i18nBundle", void 0);
 DayPicker = DayPicker_1 = __decorate([
     customElement({
         tag: "ui5-daypicker",
@@ -631,16 +695,18 @@ DayPicker = DayPicker_1 = __decorate([
     })
     /**
      * Fired when the selected date(s) change
-     * @public
      */
     ,
-    event("change")
+    event("change", {
+        bubbles: true,
+    })
     /**
      * Fired when the timestamp changes (user navigates with the keyboard) or clicks with the mouse
-     * @public
      */
     ,
-    event("navigate")
+    event("navigate", {
+        bubbles: true,
+    })
 ], DayPicker);
 DayPicker.define();
 export default DayPicker;