@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/DayPicker.d.ts

@@ -3,7 +3,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 import CalendarPart from "./CalendarPart.js";
-import type { ICalendarPicker } from "./Calendar.js";
+import type { ICalendarPicker, SpecialCalendarDateT } from "./Calendar.js";
 type DayName = {
     name: string;
     classes: string;
@@ -24,6 +24,7 @@ type Day = {
     secondDay?: number;
     weekNum?: number;
     isHidden?: boolean;
+    type?: string;
 };
 type WeekNumber = {
     weekNum: number;
@@ -40,8 +41,7 @@ type DayPickerNavigateEventDetail = {
 /**
  * @class
  *
- * Represents the days inside a single month view of the <code>ui5-calendar</code> component.
- *
+ * Represents the days inside a single month view of the `ui5-calendar` component.
  * @constructor
  * @extends CalendarPart
  * @private
@@ -49,31 +49,26 @@ type DayPickerNavigateEventDetail = {
 declare class DayPicker extends CalendarPart implements ICalendarPicker {
     /**
      * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
-     *
      * @default []
      * @public
      */
     selectedDates: Array<number>;
     /**
      * Defines the type of selection used in the day picker component.
-     * Accepted property values are:<br>
-     * <ul>
-     * <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li>
-     * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
-     * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
-     * </ul>
+     * 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"
      * @public
      */
     selectionMode: `${CalendarSelectionMode}`;
     /**
      * Defines the visibility of the week numbers column.
-     * <br><br>
      *
-     * <b>Note:<b> For calendars other than Gregorian,
+     * **Note:** For calendars other than Gregorian,
      * the week numbers are not displayed regardless of what is set.
-     *
      * @default false
      * @public
      * @since 1.0.0-rc.8
@@ -86,36 +81,36 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     _dayNames: Array<DayName>;
     /**
      * When set, the component will skip all work in onBeforeRendering and will not automatically set the focus on itself
-     *
      * @private
      */
     _hidden: boolean;
     /**
      * When selectionMode="Range" and the first day in the range is selected, this is the currently hovered (when using mouse) or focused (when using keyboard) day by the user
-     *
      * @private
      */
     _secondTimestamp?: number;
+    /**
+     * Array of special calendar dates (if such are passed) from the calendar.
+     * @private
+     */
+    specialCalendarDates: Array<SpecialCalendarDateT>;
     _autoFocus?: boolean;
     static i18nBundle: I18nBundle;
     onBeforeRendering(): void;
     /**
      * Builds the "_weeks" object that represents the month.
-     *
      * @param localeData
      * @private
      */
     _buildWeeks(localeData: LocaleData): void;
     /**
      * Builds the dayNames object (header of the month).
-     *
      * @param localeData
      * @private
      */
     _buildDayNames(localeData: LocaleData): void;
     /**
      * Tells if any of the days is more than 4 characters(too long to render).
-     *
      * @param dayNames
      * @private
      */
@@ -125,21 +120,18 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     _onfocusout(): void;
     /**
      * Tells if the day is selected (dark blue).
-     *
      * @param timestamp
      * @private
      */
     _isDaySelected(timestamp: number): boolean;
     /**
      * Tells if the day is inside a selection range (light blue).
-     *
      * @param timestamp
      * @private
      */
     _isDayInsideSelectionRange(timestamp: number): boolean;
     /**
      * Selects/deselects a day.
-     *
      * @param e
      * @param isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift)
      * @private
@@ -147,7 +139,6 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     _selectDate(e: Event, isShift: boolean): void;
     /**
      * Selects/deselects the whole row (week).
-     *
      * @private
      */
     _selectWeek(): void;
@@ -156,14 +147,12 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     _removeTimestampFromSelection(timestamp: number): void;
     /**
      * Called when at least one day is selected and the user presses "Shift".
-     *
      * @param timestamp
      * @private
      */
     _multipleSelection(timestamp: number): void;
     /**
      * Set the hovered day as the "_secondTimestamp".
-     *
      * @param e
      * @private
      */
@@ -172,46 +161,39 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     _onkeyup(e: KeyboardEvent): void;
     /**
      * Click is the same as "Enter".
-     * <b>Note:</b> "Click+Shift" has the same effect as "Enter+Shift".
-     *
+     * **Note:** "Click+Shift" has the same effect as "Enter+Shift".
      * @param e
      * @private
      */
     _onclick(e: MouseEvent): void;
     /**
      * Called upon "Home" or "End" - moves the focus to the first or last item in the row.
-     *
      * @param homePressed
      * @private
      */
     _onHomeOrEnd(homePressed: boolean): void;
     /**
      * Called by the Calendar component.
-     *
      * @protected
      */
     _hasPreviousPage(): boolean;
     /**
      * Called by the Calendar component.
-     *
      * @protected
      */
     _hasNextPage(): boolean;
     /**
      * Called by the Calendar component.
-     *
      * @protected
      */
     _showPreviousPage(): void;
     /**
      * Called by the Calendar component.
-     *
      * @protected
      */
     _showNextPage(): void;
     /**
      * Modifies the timestamp by a certain amount of days/months/years.
-     *
      * @param amount
      * @param unit
      * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
@@ -220,7 +202,6 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     _modifyTimestampBy(amount: number, unit: string, preserveDate?: boolean): void;
     /**
      * Sets the timestamp to an absolute value.
-     *
      * @param value
      * @private
      */
@@ -228,10 +209,10 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     /**
      * During range selection, when the user is navigating with the keyboard,
      * the currently focused day is considered the "second day".
-     *
      * @private
      */
     _updateSecondTimestamp(): void;
+    get _specialCalendarDates(): SpecialCalendarDateT[];
     get shouldHideWeekNumbers(): boolean;
     get classes(): {
         root: {

package/dist/DayPicker.js

@@ -16,6 +16,7 @@ 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 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";
@@ -28,8 +29,7 @@ const DAYS_IN_WEEK = 7;
 /**
  * @class
  *
- * Represents the days inside a single month view of the <code>ui5-calendar</code> component.
- *
+ * Represents the days inside a single month view of the `ui5-calendar` component.
  * @constructor
  * @extends CalendarPart
  * @private
@@ -42,7 +42,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Builds the "_weeks" object that represents the month.
-     *
      * @param localeData
      * @private
      */
@@ -52,12 +51,13 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         }
         this._weeks = [];
         const firstDayOfWeek = this._getFirstDayOfWeek();
+        const specialCalendarDates = this._specialCalendarDates;
         const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
         const secondaryMonthsNames = this.hasSecondaryCalendarType ? localeData.getMonths("wide", this.secondaryCalendarType) : [];
         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)
@@ -69,6 +69,8 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             if (dayOfTheWeek < 0) {
                 dayOfTheWeek += DAYS_IN_WEEK;
             }
+            const specialCalendarDate = specialCalendarDates.find(specialDate => specialDate.specialDateTimestamp === timestamp);
+            const specialDayType = specialCalendarDate ? specialCalendarDate.type : "";
             const isFocused = tempDate.getMonth() === calendarDate.getMonth() && tempDate.getDate() === calendarDate.getDate();
             const isSelected = this._isDaySelected(timestamp);
             const isSelectedBetween = this._isDayInsideSelectionRange(timestamp);
@@ -98,6 +100,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
                 ariaSelected: isSelected ? "true" : "false",
                 ariaDisabled: isOtherMonth ? "true" : undefined,
                 disabled: isDisabled,
+                type: specialDayType,
             };
             if (isFirstDayOfWeek) {
                 day.classes += " ui5-dp-firstday";
@@ -142,7 +145,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Builds the dayNames object (header of the month).
-     *
      * @param localeData
      * @private
      */
@@ -181,19 +183,18 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Tells if any of the days is more than 4 characters(too long to render).
-     *
      * @param dayNames
      * @private
      */
     namesTooLong(dayNames) {
-        return dayNames.some(dayName => dayName.length > 3);
+        return dayNames.some(dayName => dayName.length > 4);
     }
     onAfterRendering() {
         if (this._autoFocus && !this._hidden) {
             this.focus();
         }
         const focusedDay = this.shadowRoot.querySelector("[data-sap-focus-ref]");
-        if (focusedDay && document.activeElement !== focusedDay) {
+        if (focusedDay && document.activeElement !== focusedDay && this._specialCalendarDates.length === 0) {
             focusedDay.focus();
         }
     }
@@ -205,7 +206,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Tells if the day is selected (dark blue).
-     *
      * @param timestamp
      * @private
      */
@@ -213,12 +213,13 @@ 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).
-     *
      * @param timestamp
      * @private
      */
@@ -232,17 +233,19 @@ 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.
-     *
      * @param e
      * @param isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift)
      * @private
      */
     _selectDate(e, isShift) {
-        const target = e.target;
+        let target = e.target;
+        if (!target.hasAttribute("data-sap-timestamp")) {
+            target = target.parentNode;
+        }
         if (!this._isDayPressed(target)) {
             return;
         }
@@ -270,7 +273,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Selects/deselects the whole row (week).
-     *
      * @private
      */
     _selectWeek() {
@@ -317,7 +319,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Called when at least one day is selected and the user presses "Shift".
-     *
      * @param timestamp
      * @private
      */
@@ -357,7 +358,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Set the hovered day as the "_secondTimestamp".
-     *
      * @param e
      * @private
      */
@@ -438,8 +438,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Click is the same as "Enter".
-     * <b>Note:</b> "Click+Shift" has the same effect as "Enter+Shift".
-     *
+     * **Note:** "Click+Shift" has the same effect as "Enter+Shift".
      * @param e
      * @private
      */
@@ -448,7 +447,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Called upon "Home" or "End" - moves the focus to the first or last item in the row.
-     *
      * @param homePressed
      * @private
      */
@@ -467,7 +465,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Called by the Calendar component.
-     *
      * @protected
      */
     _hasPreviousPage() {
@@ -475,7 +472,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Called by the Calendar component.
-     *
      * @protected
      */
     _hasNextPage() {
@@ -483,7 +479,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Called by the Calendar component.
-     *
      * @protected
      */
     _showPreviousPage() {
@@ -491,7 +486,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Called by the Calendar component.
-     *
      * @protected
      */
     _showNextPage() {
@@ -499,7 +493,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Modifies the timestamp by a certain amount of days/months/years.
-     *
      * @param amount
      * @param unit
      * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
@@ -514,7 +507,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Sets the timestamp to an absolute value.
-     *
      * @param value
      * @private
      */
@@ -526,7 +518,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     /**
      * During range selection, when the user is navigating with the keyboard,
      * the currently focused day is considered the "second day".
-     *
      * @private
      */
     _updateSecondTimestamp() {
@@ -534,6 +525,9 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             this._secondTimestamp = this.timestamp;
         }
     }
+    get _specialCalendarDates() {
+        return this.specialCalendarDates;
+    }
     get shouldHideWeekNumbers() {
         if (this._primaryCalendarType !== CalendarType.Gregorian) {
             return true;
@@ -629,6 +623,9 @@ __decorate([
 __decorate([
     property()
 ], DayPicker.prototype, "_secondTimestamp", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], DayPicker.prototype, "specialCalendarDates", void 0);
 DayPicker = DayPicker_1 = __decorate([
     customElement({
         tag: "ui5-daypicker",