@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

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,60 +41,46 @@ 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
- * @author SAP SE
- * @alias sap.ui.webc.main.DayPicker
- * @extends sap.ui.webc.main.CalendarPart
- * @tagname ui5-daypicker
- * @public
+ * @extends CalendarPart
+ * @private
  */
 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.
-     * @type {array}
-     * @name sap.ui.webc.main.DayPicker.prototype.selectedDates
+     * @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>
-     * @type {sap.ui.webc.main.types.CalendarSelectionMode}
-     * @name sap.ui.webc.main.DayPicker.prototype.selectionMode
-     * @defaultvalue "Single"
+     * 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.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.DayPicker.prototype.hideWeekNumbers
-     * @defaultvalue false
+     * @default false
      * @public
      * @since 1.0.0-rc.8
      */
     hideWeekNumbers: boolean;
     /**
-     * @type {object}
      * @private
      */
     _weeks: Array<Week>;
     _dayNames: Array<DayName>;
     /**
      * When set, the component will skip all work in onBeforeRendering and will not automatically set the focus on itself
-     * @type {boolean}
      * @private
      */
     _hidden: boolean;
@@ -102,25 +89,29 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
      * @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 }localeData
+     * @param localeData
      * @private
      */
     _buildWeeks(localeData: LocaleData): void;
     /**
      * Builds the dayNames object (header of the month).
-     * @param { LocaleData } localeData
+     * @param localeData
      * @private
      */
     _buildDayNames(localeData: LocaleData): void;
     /**
      * Tells if any of the days is more than 4 characters(too long to render).
-     * @param { Array<string> } dayNames
-     * @returns { boolean }
+     * @param dayNames
      * @private
      */
     namesTooLong(dayNames: Array<string>): boolean;
@@ -129,22 +120,20 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     _onfocusout(): void;
     /**
      * Tells if the day is selected (dark blue).
-     * @param { number } timestamp
-     * @returns { boolean }
+     * @param timestamp
      * @private
      */
     _isDaySelected(timestamp: number): boolean;
     /**
      * Tells if the day is inside a selection range (light blue).
-     * @param { number } timestamp
-     * @returns { boolean }
+     * @param timestamp
      * @private
      */
     _isDayInsideSelectionRange(timestamp: number): boolean;
     /**
      * Selects/deselects a day.
-     * @param { Event} e
-     * @param { boolean} isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift)
+     * @param e
+     * @param isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift)
      * @private
      */
     _selectDate(e: Event, isShift: boolean): void;
@@ -158,13 +147,13 @@ 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 { number } timestamp
+     * @param timestamp
      * @private
      */
     _multipleSelection(timestamp: number): void;
     /**
      * Set the hovered day as the "_secondTimestamp".
-     * @param { MouseEvent } e
+     * @param e
      * @private
      */
     _onmouseover(e: MouseEvent): void;
@@ -172,27 +161,25 @@ 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".
-     * @param { MouseEvent } e
+     * **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 { boolean } homePressed
+     * @param homePressed
      * @private
      */
     _onHomeOrEnd(homePressed: boolean): void;
     /**
      * Called by the Calendar component.
      * @protected
-     * @returns { boolean }
      */
     _hasPreviousPage(): boolean;
     /**
      * Called by the Calendar component.
      * @protected
-     * @returns { boolean }
      */
     _hasNextPage(): boolean;
     /**
@@ -207,15 +194,15 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     _showNextPage(): void;
     /**
      * Modifies the timestamp by a certain amount of days/months/years.
-     * @param { number } amount
-     * @param { string } unit
-     * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
+     * @param amount
+     * @param unit
+     * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
      * @private
      */
     _modifyTimestampBy(amount: number, unit: string, preserveDate?: boolean): void;
     /**
      * Sets the timestamp to an absolute value.
-     * @param { number } value
+     * @param value
      * @private
      */
     _setTimestamp(value: number): void;
@@ -225,6 +212,7 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
      * @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,14 +29,10 @@ 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
- * @author SAP SE
- * @alias sap.ui.webc.main.DayPicker
- * @extends sap.ui.webc.main.CalendarPart
- * @tagname ui5-daypicker
- * @public
+ * @extends CalendarPart
+ * @private
  */
 let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     onBeforeRendering() {
@@ -45,7 +42,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Builds the "_weeks" object that represents the month.
-     * @param { LocaleData }localeData
+     * @param localeData
      * @private
      */
     _buildWeeks(localeData) {
@@ -54,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)
@@ -71,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);
@@ -100,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";
@@ -128,7 +129,7 @@ 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
                 week.unshift({
-                    weekNum: calculateWeekNumber(getFirstDayOfWeek(), tempDate.toUTCJSDate(), tempDate.getYear(), getLocale(), localeData),
+                    weekNum: calculateWeekNumber(getFirstDayOfWeek(), tempDate.toUTCJSDate(), tempDate.getYear(), getLocale(), localeData, this._primaryCalendarType),
                     isHidden: this.shouldHideWeekNumbers,
                 });
             }
@@ -144,7 +145,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Builds the dayNames object (header of the month).
-     * @param { LocaleData } localeData
+     * @param localeData
      * @private
      */
     _buildDayNames(localeData) {
@@ -182,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 { Array<string> } dayNames
-     * @returns { boolean }
+     * @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();
         }
     }
@@ -206,21 +206,21 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Tells if the day is selected (dark blue).
-     * @param { number } timestamp
-     * @returns { boolean }
+     * @param timestamp
      * @private
      */
     _isDaySelected(timestamp) {
         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 { number } timestamp
-     * @returns { boolean }
+     * @param timestamp
      * @private
      */
     _isDayInsideSelectionRange(timestamp) {
@@ -233,16 +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 { Event} e
-     * @param { boolean} isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift)
+     * @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;
         }
@@ -316,7 +319,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Called when at least one day is selected and the user presses "Shift".
-     * @param { number } timestamp
+     * @param timestamp
      * @private
      */
     _multipleSelection(timestamp) {
@@ -355,7 +358,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Set the hovered day as the "_secondTimestamp".
-     * @param { MouseEvent } e
+     * @param e
      * @private
      */
     _onmouseover(e) {
@@ -435,8 +438,8 @@ 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".
-     * @param { MouseEvent } e
+     * **Note:** "Click+Shift" has the same effect as "Enter+Shift".
+     * @param e
      * @private
      */
     _onclick(e) {
@@ -444,7 +447,7 @@ 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 { boolean } homePressed
+     * @param homePressed
      * @private
      */
     _onHomeOrEnd(homePressed) {
@@ -463,7 +466,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     /**
      * Called by the Calendar component.
      * @protected
-     * @returns { boolean }
      */
     _hasPreviousPage() {
         return !(this._calendarDate.getMonth() === this._minDate.getMonth() && this._calendarDate.getYear() === this._minDate.getYear());
@@ -471,7 +473,6 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     /**
      * Called by the Calendar component.
      * @protected
-     * @returns { boolean }
      */
     _hasNextPage() {
         return !(this._calendarDate.getMonth() === this._maxDate.getMonth() && this._calendarDate.getYear() === this._maxDate.getYear());
@@ -492,9 +493,9 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Modifies the timestamp by a certain amount of days/months/years.
-     * @param { number } amount
-     * @param { string } unit
-     * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
+     * @param amount
+     * @param unit
+     * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
      * @private
      */
     _modifyTimestampBy(amount, unit, preserveDate) {
@@ -506,7 +507,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Sets the timestamp to an absolute value.
-     * @param { number } value
+     * @param value
      * @private
      */
     _setTimestamp(value) {
@@ -524,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;
@@ -619,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",
@@ -628,14 +635,12 @@ DayPicker = DayPicker_1 = __decorate([
     /**
      * Fired when the selected date(s) change
      * @public
-     * @event sap.ui.webc.main.DayPicker#change
      */
     ,
     event("change")
     /**
      * Fired when the timestamp changes (user navigates with the keyboard) or clicks with the mouse
      * @public
-     * @event sap.ui.webc.main.DayPicker#navigate
      */
     ,
     event("navigate")