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

package/dist/Calendar.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import "@ui5/webcomponents-base/dist/UI5Element.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -16,7 +17,9 @@ import { isF4, isF4Shift, } from "@ui5/webcomponents-base/dist/Keys.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
 import CalendarDate from "./CalendarDate.js";
+import CalendarDateRange from "./CalendarDateRange.js";
 import CalendarPart from "./CalendarPart.js";
 import CalendarHeader from "./CalendarHeader.js";
 import DayPicker from "./DayPicker.js";
@@ -24,6 +27,9 @@ import MonthPicker from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 import CalendarPickersMode from "./types/CalendarPickersMode.js";
+import CalendarLegend from "./CalendarLegend.js";
+import "./SpecialCalendarDate.js";
+import CalendarLegendItemType from "./types/CalendarLegendItemType.js";
 // Default calendar for bundling
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
 // Template
@@ -33,144 +39,213 @@ import calendarCSS from "./generated/themes/Calendar.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-calendar</code> component allows users to select one or more dates.
- * <br><br>
- * Currently selected dates are represented with instances of <code>ui5-date</code> as
- * children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a
- * date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property.
- * Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances
- * of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the
- * <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally.
- * <br><br>
+ * The `ui5-calendar` component allows users to select one or more dates.
  *
- * <h3>Usage</h3>
+ * Currently selected dates are represented with instances of `ui5-date` as
+ * children of the `ui5-calendar`. The value property of each `ui5-date` must be a
+ * date string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.
+ * Whenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances
+ * of `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the
+ * `selection-change` event. This is useful if you want to control the selected dates externally.
+ *
+ * ### Usage
  *
  * The user can navigate to a particular date by:
- * <br>
- * <ul>
- * <li>Pressing over a month inside the months view</li>
- * <li>Pressing over an year inside the years view</li>
- * </ul>
- * <br>
+ *
+ * - Pressing over a month inside the months view
+ * - Pressing over an year inside the years view
+ *
  * The user can confirm a date selection by pressing over a date inside the days view.
- * <br><br>
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-calendar</code> provides advanced keyboard handling.
+ * ### Keyboard Handling
+ * The `ui5-calendar` provides advanced keyboard handling.
  * When a picker is showed and focused the user can use the following keyboard
  * shortcuts in order to perform a navigation:
- * <br>
- * - Day picker: <br>
- * <ul>
- * <li>[F4] - Shows month picker</li>
- * <li>[SHIFT] + [F4] - Shows year picker</li>
- * <li>[PAGEUP] - Navigate to the previous month</li>
- * <li>[PAGEDOWN] - Navigate to the next month</li>
- * <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li>
- * <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li>
- * <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li>
- * <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li>
- * <li>[HOME] - Navigate to the first day of the week</li>
- * <li>[END] - Navigate to the last day of the week</li>
- * <li>[CTRL] + [HOME] - Navigate to the first day of the month</li>
- * <li>[CTRL] + [END] - Navigate to the last day of the month</li>
- * </ul>
- * <br>
- * - Month picker: <br>
- * <ul>
- * <li>[PAGEUP] - Navigate to the previous year</li>
- * <li>[PAGEDOWN] - Navigate to the next year</li>
- * <li>[HOME] - Navigate to the first month of the current row</li>
- * <li>[END] - Navigate to the last month of the current row</li>
- * <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li>
- * <li>[CTRL] + [END] - Navigate to the last month of the year</li>
- * </ul>
- * <br>
- * - Year picker: <br>
- * <ul>
- * <li>[PAGEUP] - Navigate to the previous year range</li>
- * <li>[PAGEDOWN] - Navigate the next year range</li>
- * <li>[HOME] - Navigate to the first year of the current row</li>
- * <li>[END] - Navigate to the last year of the current row</li>
- * <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li>
- * <li>[CTRL] + [END] - Navigate to the last year of the current year range</li>
- * </ul>
- * <br>
  *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * - Day picker:
+ *
+ * - [F4] - Shows month picker
+ * - [Shift] + [F4] - Shows year picker
+ * - [Page Up] - Navigate to the previous month
+ * - [Page Down] - Navigate to the next month
+ * - [Shift] + [Page Up] - Navigate to the previous year
+ * - [Shift] + [Page Down] - Navigate to the next year
+ * - [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards
+ * - [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards
+ * - [Home] - Navigate to the first day of the week
+ * - [End] - Navigate to the last day of the week
+ * - [Ctrl] + [Home] - Navigate to the first day of the month
+ * - [Ctrl] + [End] - Navigate to the last day of the month
+ *
+ * - Month picker:
+ *
+ * - [Page Up] - Navigate to the previous year
+ * - [Page Down] - Navigate to the next year
+ * - [Home] - Navigate to the first month of the current row
+ * - [End] - Navigate to the last month of the current row
+ * - [Ctrl] + [Home] - Navigate to the first month of the current year
+ * - [Ctrl] + [End] - Navigate to the last month of the year
+ *
+ * - Year picker:
+ *
+ * - [Page Up] - Navigate to the previous year range
+ * - [Page Down] - Navigate the next year range
+ * - [Home] - Navigate to the first year of the current row
+ * - [End] - Navigate to the last year of the current row
+ * - [Ctrl] + [Home] - Navigate to the first year of the current year range
+ * - [Ctrl] + [End] - Navigate to the last year of the current year range
+ *
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
-* <h3>Calendar types</h3>
+ * ### Calendar types
  * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
  * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
- * you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules:
- * <br><br>
+ * you need to set the `primaryCalendarType` property and import one or more of the following modules:
+ *
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`
+ *
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";`
  *
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";</code>
- * <br><br>
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";`
  *
- * Or, you can use the global configuration and set the <code>calendarType</code> key:
- * <br>
- * <code>
- * &lt;script data-id="sap-ui-config" type="application/json"&gt;
- * {
- *	"calendarType": "Japanese"
- * }
- * &lt;/script&gt;
- * </code>
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";`
  *
+ * Or, you can use the global configuration and set the `calendarType` key:
  *
- * <h3>ES6 Module Import</h3>
+ * ```html
+ * <script data-id="sap-ui-config" type="application/json">
+ * 	{
+ * 		"calendarType": "Japanese"
+ * 	}
+ * </script>
+ * ```
  *
- * <code>import "@ui5/webcomponents/dist/Calendar";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Calendar.js";`
  * @constructor
  * @extends CalendarPart
  * @public
  * @since 1.0.0-rc.11
  */
 let Calendar = class Calendar extends CalendarPart {
+    constructor() {
+        super();
+        this._valueIsProcessed = false;
+    }
     /**
      * @private
      */
     get _selectedDatesTimestamps() {
-        return this.dates.map(date => {
-            const value = date.value;
-            const validValue = value && !!this.getFormat().parse(value);
-            return validValue ? this._getTimeStampFromString(value) / 1000 : undefined;
-        }).filter((date) => !!date);
-    }
-    constructor() {
-        super();
-        this._valueIsProcessed = false;
+        let selectedDates = [];
+        if (this.selectionMode === CalendarSelectionMode.Range) {
+            const range = this.dates.find(date => date.hasAttribute("ui5-date-range"));
+            const startDate = range && range.startValue && this.getFormat().parse(range.startValue, true);
+            const endDate = range && range.endValue && this.getFormat().parse(range.endValue, true);
+            if (startDate) {
+                selectedDates.push(startDate.getTime() / 1000);
+            }
+            if (endDate) {
+                selectedDates.push(endDate.getTime() / 1000);
+            }
+        }
+        else {
+            selectedDates = this.dates
+                .filter(dateElement => {
+                return dateElement.hasAttribute("ui5-date")
+                    && dateElement.value
+                    && this._isValidCalendarDate(dateElement.value)
+                    && this._getTimeStampFromString(dateElement.value);
+            })
+                .map(dateElement => Number(this._getTimeStampFromString(dateElement.value)) / 1000);
+        }
+        return selectedDates;
     }
     /**
      * @private
      */
     _setSelectedDates(selectedDates) {
-        const selectedValues = selectedDates.map(timestamp => this.getFormat().format(new Date(timestamp * 1000), true)); // Format as UTC
-        const valuesInDOM = [...this.dates].map(dateElement => dateElement.value);
-        // Remove all elements for dates that are no longer selected
-        this.dates.filter(dateElement => !selectedValues.includes(dateElement.value)).forEach(dateElement => {
-            this.removeChild(dateElement);
+        const selectedUTCDates = selectedDates.map(timestamp => this.getFormat().format(UI5Date.getInstance(timestamp * 1000), true));
+        if (this.selectionMode === CalendarSelectionMode.Range) {
+            // Create tags for the selected dates that don't already exist in DOM
+            if (selectedUTCDates.length) {
+                let dateRange = this.dates.find(dateElement => dateElement.hasAttribute("ui5-date-range") && dateElement.startValue === selectedUTCDates[0]);
+                if (!dateRange) {
+                    dateRange = document.createElement(CalendarDateRange.getMetadata().getTag());
+                    dateRange.startValue = selectedUTCDates[0];
+                    this.appendChild(dateRange);
+                }
+                else {
+                    dateRange.endValue = selectedUTCDates[1];
+                }
+                // Remove all elements for dates that are no longer selected
+                this.dates
+                    .filter(dateElement => {
+                    return dateElement.hasAttribute("ui5-date")
+                        || (dateRange && dateElement.startValue !== dateRange.startValue);
+                })
+                    .forEach(dateElement => {
+                    this.removeChild(dateElement);
+                });
+            }
+        }
+        else {
+            const valuesInDOM = this._selectedDatesTimestamps.map(timestamp => this.getFormat().format(UI5Date.getInstance(timestamp * 1000)));
+            // Remove all elements for dates that are no longer selected
+            this.dates
+                .filter(dateElement => {
+                return dateElement.hasAttribute("ui5-date-range")
+                    || (dateElement.hasAttribute("ui5-date") && !selectedUTCDates.includes(dateElement.value));
+            })
+                .forEach(dateElement => {
+                this.removeChild(dateElement);
+            });
+            // Create tags for the selected dates that don't already exist in DOM
+            selectedUTCDates
+                .filter(value => !valuesInDOM.includes(value))
+                .forEach(value => {
+                const dateElement = document.createElement(CalendarDate.getMetadata().getTag());
+                dateElement.value = value;
+                this.appendChild(dateElement);
+            });
+        }
+    }
+    _isValidCalendarDate(dateString) {
+        const date = this.getFormat().parse(dateString);
+        return !!date;
+    }
+    get _specialCalendarDates() {
+        const validSpecialDates = this._specialDates.filter(date => {
+            const dateType = date.type;
+            const dateValue = date.value;
+            const isTypeMatch = this._selectedItemType !== "None" ? dateType === this._selectedItemType : true;
+            return isTypeMatch && dateValue && this._isValidCalendarDate(dateValue);
         });
-        // Create tags for the selected dates that don't already exist in DOM
-        selectedValues.filter(value => !valuesInDOM.includes(value)).forEach(value => {
-            const dateElement = document.createElement(CalendarDate.getMetadata().getTag());
-            dateElement.value = value;
-            this.appendChild(dateElement);
+        if (validSpecialDates.length === 0) {
+            this._selectedItemType = "None";
+        }
+        const uniqueDates = new Set();
+        const uniqueSpecialDates = [];
+        validSpecialDates.forEach(date => {
+            const dateFromValue = UI5Date.getInstance(date.value);
+            const timestamp = dateFromValue.getTime();
+            if (!uniqueDates.has(timestamp)) {
+                uniqueDates.add(timestamp);
+                const specialDateTimestamp = CalendarDateComponent.fromLocalJSDate(dateFromValue).valueOf() / 1000;
+                const type = date.type;
+                uniqueSpecialDates.push({ specialDateTimestamp, type });
+            }
         });
+        return uniqueSpecialDates;
+    }
+    _onCalendarLegendSelectionChange(e) {
+        this._selectedItemType = e.detail.item.type;
+        this._currentPickerDOM._autoFocus = false;
     }
     /**
      * Makes sure that _currentPicker is always set to a value, allowed by _pickersMode
@@ -222,7 +297,7 @@ let Calendar = class Calendar extends CalendarPart {
     onHeaderShowMonthPress(e) {
         this._currentPickerDOM._autoFocus = false;
         this._currentPicker = "month";
-        this.fireEvent("show-month-press", e);
+        this.fireEvent("show-month-view", e);
     }
     /**
      * The user clicked the "year" button in the header
@@ -230,7 +305,7 @@ let Calendar = class Calendar extends CalendarPart {
     onHeaderShowYearPress(e) {
         this._currentPickerDOM._autoFocus = false;
         this._currentPicker = "year";
-        this.fireEvent("show-year-press", e);
+        this.fireEvent("show-year-view", e);
     }
     get _currentPickerDOM() {
         // Calendar's shadowRoot and all the pickers are always present - the "!" is safe to be used.
@@ -241,12 +316,18 @@ let Calendar = class Calendar extends CalendarPart {
      */
     onHeaderPreviousPress() {
         this._currentPickerDOM._showPreviousPage();
+        if (this.calendarLegend) {
+            this._currentPickerDOM._autoFocus = true;
+        }
     }
     /**
      * The year clicked the "Next" button in the header
      */
     onHeaderNextPress() {
         this._currentPickerDOM._showNextPage();
+        if (this.calendarLegend) {
+            this._currentPickerDOM._autoFocus = true;
+        }
     }
     _setSecondaryCalendarTypeButtonText() {
         const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
@@ -269,7 +350,7 @@ let Calendar = class Calendar extends CalendarPart {
         if (!this.hasSecondaryCalendarType) {
             return;
         }
-        const localDate = new Date(this._timestamp * 1000);
+        const localDate = UI5Date.getInstance(this._timestamp * 1000);
         const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
         const dateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this._secondaryCalendarType, this._timestamp);
         const secondMonthInfo = convertMonthNumbersToMonthNames(dateInSecType.firstDate.getMonth(), dateInSecType.lastDate.getMonth(), this._secondaryCalendarType);
@@ -301,7 +382,7 @@ let Calendar = class Calendar extends CalendarPart {
             const calendarDate = CalendarDateComponent.fromTimestamp(timestamp * 1000, this._primaryCalendarType);
             return this.getFormat().format(calendarDate.toUTCJSDate(), true);
         });
-        const defaultPrevented = !this.fireEvent("selected-dates-change", { timestamp: this.timestamp, dates: [...selectedDates], values: datesValues }, true);
+        const defaultPrevented = !this.fireEvent("selection-change", { timestamp: this.timestamp, selectedDates: [...selectedDates], selectedValues: datesValues }, true);
         if (!defaultPrevented) {
             this._setSelectedDates(selectedDates);
         }
@@ -339,11 +420,19 @@ let Calendar = class Calendar extends CalendarPart {
     _onkeydown(e) {
         if (isF4(e) && this._currentPicker !== "month") {
             this._currentPicker = "month";
+            this.fireEvent("show-month-view", e);
         }
         if (isF4Shift(e) && this._currentPicker !== "year") {
             this._currentPicker = "year";
+            this.fireEvent("show-year-view", e);
         }
     }
+    _onLegendFocusOut() {
+        this._selectedItemType = "None";
+    }
+    get _specialDates() {
+        return this.getSlottedNodes("specialDates");
+    }
     /**
      * Returns an array of UTC timestamps, representing the selected dates.
      * @protected
@@ -353,7 +442,7 @@ let Calendar = class Calendar extends CalendarPart {
         return this._selectedDatesTimestamps;
     }
     /**
-     * Creates instances of <code>ui5-date</code> inside this <code>ui5-calendar</code> with values, equal to the provided UTC timestamps
+     * Creates instances of `ui5-date` or `ui5-date-range` inside this `ui5-calendar` with values, equal to the provided UTC timestamps
      * @protected
      * @deprecated
      * @param selectedDates Array of UTC timestamps
@@ -392,9 +481,18 @@ __decorate([
 __decorate([
     property({ type: CalendarPickersMode, defaultValue: CalendarPickersMode.DAY_MONTH_YEAR, noAttribute: true })
 ], Calendar.prototype, "_pickersMode", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], Calendar.prototype, "calendarLegend", void 0);
 __decorate([
     slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
 ], Calendar.prototype, "dates", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
+], Calendar.prototype, "specialDates", void 0);
+__decorate([
+    property({ type: CalendarLegendItemType, defaultValue: CalendarLegendItemType.None })
+], Calendar.prototype, "_selectedItemType", void 0);
 Calendar = __decorate([
     customElement({
         tag: "ui5-calendar",
@@ -403,37 +501,40 @@ Calendar = __decorate([
         styles: calendarCSS,
         dependencies: [
             CalendarDate,
+            CalendarDateRange,
             CalendarHeader,
             DayPicker,
             MonthPicker,
             YearPicker,
+            CalendarLegend,
         ],
     })
     /**
      * Fired when the selected dates change.
-     * <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not
-     * create instances of <code>ui5-date</code> for the newly selected dates. In that case you should do this manually.
      *
+     * **Note:** If you call `preventDefault()` for this event, the component will not
+     * create instances of `ui5-date` for the newly selected dates. In that case you should do this manually.
      * @allowPreventDefault
-     * @param {Array<string>} values The selected dates
-     * @param {Array<number>} dates The selected dates as UTC timestamps
+     * @param {Array<string>} selectedValues The selected dates
+     * @param {Array<number>} selectedDates The selected dates as UTC timestamps
      * @public
      */
     ,
-    event("selected-dates-change", {
+    event("selection-change", {
         detail: {
             /**
              * @public
              */
-            dates: { type: Array },
+            selectedDates: { type: Array },
             /**
              * @public
              */
-            values: { type: Array },
+            selectedValues: { type: Array },
+            timestamp: { type: Number },
         },
     }),
-    event("show-month-press"),
-    event("show-year-press")
+    event("show-month-view"),
+    event("show-year-view")
 ], Calendar);
 Calendar.define();
 export default Calendar;