@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/DayPicker.d.ts

@@ -43,17 +43,14 @@ type DayPickerNavigateEventDetail = {
  * Represents the days inside a single month view of the <code>ui5-calendar</code> 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>;
@@ -65,12 +62,11 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
      * <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"
+     *
+     * @default "Single"
      * @public
      */
-    selectionMode: CalendarSelectionMode;
+    selectionMode: `${CalendarSelectionMode}`;
     /**
      * Defines the visibility of the week numbers column.
      * <br><br>
@@ -78,27 +74,25 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
      * <b>Note:<b> 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;
     /**
      * 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;
@@ -107,42 +101,53 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     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 dayNames
+     * @private
+     */
+    namesTooLong(dayNames: Array<string>): boolean;
     onAfterRendering(): void;
     _onfocusin(): void;
     _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;
     /**
      * Selects/deselects the whole row (week).
+     *
      * @private
      */
     _selectWeek(): void;
@@ -151,13 +156,15 @@ 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;
@@ -166,61 +173,72 @@ declare class DayPicker extends CalendarPart implements ICalendarPicker {
     /**
      * Click is the same as "Enter".
      * <b>Note:</b> "Click+Shift" has the same effect as "Enter+Shift".
-     * @param { MouseEvent } e
+     *
+     * @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;
     /**
      * Called by the Calendar component.
-     * <b>Note:</b> same as for "PageUp"
+     *
      * @protected
      */
     _showPreviousPage(): void;
     /**
      * Called by the Calendar component.
-     * <b>Note:</b> same as for "PageDown"
+     *
      * @protected
      */
     _showNextPage(): void;
     /**
      * Modifies the timestamp by a certain amount of days/months/years.
-     * @param { number } amount
-     * @param { string } unit
+     *
+     * @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): void;
+    _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;
     /**
      * During range selection, when the user is navigating with the keyboard,
      * the currently focused day is considered the "second day".
+     *
      * @private
      */
     _updateSecondTimestamp(): void;
     get shouldHideWeekNumbers(): boolean;
-    get hasSecondaryCalendarType(): boolean;
+    get classes(): {
+        root: {
+            "ui5-dp-root": boolean;
+            "ui5-dp-twocalendartypes": boolean;
+        };
+    };
     _isWeekend(oDate: CalendarDate): boolean;
     _isDayPressed(target: HTMLElement): boolean;
     _getSecondaryDay(tempDate: CalendarDate): CalendarDate;

package/dist/DayPicker.js

@@ -31,11 +31,8 @@ const DAYS_IN_WEEK = 7;
  * Represents the days inside a single month view of the <code>ui5-calendar</code> 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,8 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Builds the "_weeks" object that represents the month.
-     * @param { LocaleData }localeData
+     *
+     * @param localeData
      * @private
      */
     _buildWeeks(localeData) {
@@ -144,7 +142,8 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Builds the dayNames object (header of the month).
-     * @param { LocaleData } localeData
+     *
+     * @param localeData
      * @private
      */
     _buildDayNames(localeData) {
@@ -153,8 +152,11 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         }
         let dayOfTheWeek;
         const aDayNamesWide = localeData.getDays("wide", this._primaryCalendarType);
-        const aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType);
+        let aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType);
         let dayName;
+        if (this.namesTooLong(aDayNamesAbbreviated)) {
+            aDayNamesAbbreviated = localeData.getDays("narrow", this._primaryCalendarType);
+        }
         this._dayNames = [];
         this._dayNames.push({
             classes: "ui5-dp-dayname",
@@ -177,10 +179,23 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             this._dayNames.shift();
         }
     }
+    /**
+     * 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);
+    }
     onAfterRendering() {
         if (this._autoFocus && !this._hidden) {
             this.focus();
         }
+        const focusedDay = this.shadowRoot.querySelector("[data-sap-focus-ref]");
+        if (focusedDay && document.activeElement !== focusedDay) {
+            focusedDay.focus();
+        }
     }
     _onfocusin() {
         this._autoFocus = true;
@@ -190,8 +205,8 @@ 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) {
@@ -203,8 +218,8 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Tells if the day is inside a selection range (light blue).
-     * @param { number } timestamp
-     * @returns { boolean }
+     *
+     * @param timestamp
      * @private
      */
     _isDayInsideSelectionRange(timestamp) {
@@ -221,8 +236,9 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * 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) {
@@ -254,6 +270,7 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Selects/deselects the whole row (week).
+     *
      * @private
      */
     _selectWeek() {
@@ -300,7 +317,8 @@ 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) {
@@ -339,7 +357,8 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
     }
     /**
      * Set the hovered day as the "_secondTimestamp".
-     * @param { MouseEvent } e
+     *
+     * @param e
      * @private
      */
     _onmouseover(e) {
@@ -358,16 +377,16 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
             e.preventDefault();
         }
         else if (isLeft(e)) {
-            this._modifyTimestampBy(-1, "day");
+            this._modifyTimestampBy(-1, "day", false);
         }
         else if (isRight(e)) {
-            this._modifyTimestampBy(1, "day");
+            this._modifyTimestampBy(1, "day", false);
         }
         else if (isUp(e)) {
-            this._modifyTimestampBy(-7, "day");
+            this._modifyTimestampBy(-7, "day", false);
         }
         else if (isDown(e)) {
-            this._modifyTimestampBy(7, "day");
+            this._modifyTimestampBy(7, "day", false);
         }
         else if (isPageUp(e)) {
             this._modifyTimestampBy(-1, "month");
@@ -420,7 +439,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
+     *
+     * @param e
      * @private
      */
     _onclick(e) {
@@ -428,7 +448,8 @@ 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) {
@@ -446,52 +467,55 @@ 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());
     }
     /**
      * Called by the Calendar component.
+     *
      * @protected
-     * @returns { boolean }
      */
     _hasNextPage() {
         return !(this._calendarDate.getMonth() === this._maxDate.getMonth() && this._calendarDate.getYear() === this._maxDate.getYear());
     }
     /**
      * Called by the Calendar component.
-     * <b>Note:</b> same as for "PageUp"
+     *
      * @protected
      */
     _showPreviousPage() {
-        this._modifyTimestampBy(-1, "month");
+        this._modifyTimestampBy(-1, "month", false);
     }
     /**
      * Called by the Calendar component.
-     * <b>Note:</b> same as for "PageDown"
+     *
      * @protected
      */
     _showNextPage() {
-        this._modifyTimestampBy(1, "month");
+        this._modifyTimestampBy(1, "month", false);
     }
     /**
      * Modifies the timestamp by a certain amount of days/months/years.
-     * @param { number } amount
-     * @param { string } unit
+     *
+     * @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) {
+    _modifyTimestampBy(amount, unit, preserveDate) {
         // Modify the current timestamp
-        this._safelyModifyTimestampBy(amount, unit);
+        this._safelyModifyTimestampBy(amount, unit, preserveDate);
         this._updateSecondTimestamp();
         // Notify the calendar to update its timestamp
         this.fireEvent("navigate", { timestamp: this.timestamp });
     }
     /**
      * Sets the timestamp to an absolute value.
-     * @param { number } value
+     *
+     * @param value
      * @private
      */
     _setTimestamp(value) {
@@ -502,6 +526,7 @@ 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() {
@@ -515,8 +540,13 @@ let DayPicker = DayPicker_1 = class DayPicker extends CalendarPart {
         }
         return this.hideWeekNumbers;
     }
-    get hasSecondaryCalendarType() {
-        return !!this.secondaryCalendarType;
+    get classes() {
+        return {
+            root: {
+                "ui5-dp-root": true,
+                "ui5-dp-twocalendartypes": this.hasSecondaryCalendarType,
+            },
+        };
     }
     _isWeekend(oDate) {
         const localeData = getCachedLocaleDataInstance(getLocale());
@@ -608,14 +638,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")