@ui5/webcomponents 0.0.0-037d08c67

package/dist/MonthPicker.js

@@ -0,0 +1,376 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var MonthPicker_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-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import { isEnter, isSpace, isDown, isUp, isLeft, isRight, isHome, isEnd, isHomeCtrl, isEndCtrl, isPageUp, isPageDown, } from "@ui5/webcomponents-base/dist/Keys.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import { MONTH_PICKER_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
+import CalendarPart from "./CalendarPart.js";
+// Template
+import MonthPickerTemplate from "./MonthPickerTemplate.js";
+// Styles
+import monthPickerStyles from "./generated/themes/MonthPicker.css.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+const isBetween = (x, num1, num2) => x > Math.min(num1, num2) && x < Math.max(num1, num2);
+const PAGE_SIZE = 12; // total months on a single page
+/**
+ * Month picker component.
+ * @class
+ *
+ * Displays months which can be selected.
+ * @constructor
+ * @extends CalendarPart
+ * @private
+ */
+let MonthPicker = MonthPicker_1 = class MonthPicker 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 month picker component.
+         * Accepted property values are:
+         *
+         * - `CalendarSelectionMode.Single` - enables election of a single month.
+         * - `CalendarSelectionMode.Range` - enables selection of a month range.
+         *
+         * Note that 'CalendarSelectionMode.Multiple` is not supported for Month Picker!
+         * @default "Single"
+         * @since 2.2.0
+         */
+        this.selectionMode = "Single";
+        this._monthsInterval = [];
+        this._hidden = false;
+    }
+    get roleDescription() {
+        return MonthPicker_1.i18nBundle.getText(MONTH_PICKER_DESCRIPTION);
+    }
+    onBeforeRendering() {
+        this._buildMonths();
+    }
+    get rowSize() {
+        return (this.secondaryCalendarType === CalendarType.Islamic && this.primaryCalendarType !== CalendarType.Islamic)
+            || (this.secondaryCalendarType === CalendarType.Persian && this.primaryCalendarType !== CalendarType.Persian) ? 2 : 3;
+    }
+    _buildMonths() {
+        if (this._hidden) {
+            return;
+        }
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        const monthsNames = localeData.getMonthsStandAlone("wide", this._primaryCalendarType);
+        const months = [];
+        const calendarDate = this._calendarDate; // store the value of the expensive getter
+        const minDate = this._minDate; // store the value of the expensive getter
+        const maxDate = this._maxDate; // store the value of the expensive getter
+        let timestamp;
+        /* eslint-disable no-loop-func */
+        for (let i = 0; i < 12; i++) {
+            const tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);
+            tempDate.setMonth(i);
+            // If the current date of the current month is larger than this month, set the date to the last day of the previous month.
+            // This is needed because the date object will automatically switch to the next month if larger date is set.
+            if (tempDate.getMonth() !== i) {
+                tempDate.setMonth(tempDate.getMonth() - 1);
+                tempDate.setDate(this._calendarDate.getDate() - tempDate.getDate());
+            }
+            timestamp = tempDate.valueOf() / 1000;
+            const isSelected = this.selectedDates.some(itemTimestamp => {
+                const date = CalendarDate.fromTimestamp(itemTimestamp * 1000, this._primaryCalendarType);
+                return date.getYear() === tempDate.getYear() && date.getMonth() === tempDate.getMonth();
+            });
+            const isFocused = tempDate.getMonth() === calendarDate.getMonth();
+            const isDisabled = this._isOutOfSelectableRange(tempDate, minDate, maxDate);
+            const isSelectedBetween = this._isMonthInsideSelectionRange(timestamp);
+            const month = {
+                timestamp: timestamp.toString(),
+                focusRef: isFocused,
+                _tabIndex: isFocused ? 0 : -1,
+                selected: isSelected || isSelectedBetween,
+                ariaSelected: isSelected || isSelectedBetween,
+                name: monthsNames[i],
+                nameInSecType: this.hasSecondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text,
+                disabled: isDisabled,
+                ariaDisabled: isDisabled,
+                classes: "ui5-mp-item",
+                parts: "month-cell",
+            };
+            if (isSelected) {
+                month.classes += " ui5-mp-item--selected";
+                month.parts += " month-cell-selected";
+            }
+            if (isSelectedBetween) {
+                month.classes += " ui5-mp-item--selected-between";
+                month.parts += " month-cell-selected-between";
+            }
+            if (isDisabled) {
+                month.classes += " ui5-mp-item--disabled";
+            }
+            const quarterIndex = Math.floor(i / this.rowSize);
+            if (months[quarterIndex]) {
+                months[quarterIndex].push(month);
+            }
+            else {
+                months[quarterIndex] = [month];
+            }
+        }
+        this._monthsInterval = months;
+    }
+    _getDisplayedSecondaryMonthText(timestamp) {
+        const monthsName = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp);
+        return convertMonthNumbersToMonthNames(monthsName.firstDate.getMonth(), monthsName.lastDate.getMonth(), this.secondaryCalendarType);
+    }
+    /**
+      * Returns true if month timestamp is inside the selection range.
+      * @private
+      */
+    _isMonthInsideSelectionRange(timestamp) {
+        if (this.selectionMode !== CalendarSelectionMode.Range || !this.selectedDates.length) {
+            return false;
+        }
+        // Only one date selected - second is hovered or focused
+        if (this.selectedDates.length === 1 && this._secondTimestamp) {
+            return isBetween(timestamp, this.selectedDates[0], this._secondTimestamp);
+        }
+        return isBetween(timestamp, this.selectedDates[0], this.selectedDates[1]);
+    }
+    _onkeydown(e) {
+        let preventDefault = true;
+        if (isEnter(e)) {
+            this._selectMonth(e);
+        }
+        else if (isSpace(e)) {
+            e.preventDefault();
+        }
+        else if (isLeft(e)) {
+            this._modifyTimestampBy(-1);
+        }
+        else if (isRight(e)) {
+            this._modifyTimestampBy(1);
+        }
+        else if (isUp(e)) {
+            this._modifyTimestampBy(-this.rowSize);
+        }
+        else if (isDown(e)) {
+            this._modifyTimestampBy(this.rowSize);
+        }
+        else if (isPageUp(e)) {
+            this._modifyTimestampBy(-PAGE_SIZE);
+        }
+        else if (isPageDown(e)) {
+            this._modifyTimestampBy(PAGE_SIZE);
+        }
+        else if (isHome(e) || isEnd(e)) {
+            this._onHomeOrEnd(isHome(e));
+        }
+        else if (isHomeCtrl(e)) {
+            this._setTimestamp(parseInt(this._monthsInterval[0][0].timestamp)); // first month of first row
+        }
+        else if (isEndCtrl(e)) {
+            this._setTimestamp(parseInt(this._monthsInterval[PAGE_SIZE / this.rowSize - 1][this.rowSize - 1].timestamp)); // last month of last row
+        }
+        else {
+            preventDefault = false;
+        }
+        if (preventDefault) {
+            e.preventDefault();
+        }
+    }
+    _onHomeOrEnd(homePressed) {
+        this._monthsInterval.forEach(row => {
+            const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getMonth() === this._calendarDate.getMonth());
+            if (indexInRow !== -1) { // The current month is on this row
+                const index = homePressed ? 0 : this.rowSize - 1; // select the first (if Home) or last (if End) month on the row
+                this._setTimestamp(parseInt(row[index].timestamp));
+            }
+        });
+    }
+    /**
+     * Sets the timestamp to an absolute value.
+     * @param value
+     * @private
+     */
+    _setTimestamp(value) {
+        this._safelySetTimestamp(value);
+        this.fireDecoratorEvent("navigate", { timestamp: this.timestamp });
+    }
+    /**
+     * In range selection, the currently focused or hovered month is considered the "second day".
+     * @private
+     */
+    _updateSecondTimestamp() {
+        if (this.selectionMode === CalendarSelectionMode.Range && (this.selectedDates.length === 1 || this.selectedDates.length === 2)) {
+            this._secondTimestamp = this.timestamp;
+        }
+    }
+    /**
+     * Set the hovered day as the "_secondTimestamp".
+     *
+     * @param e
+     * @private
+     */
+    _onmouseover(e) {
+        const target = e.target;
+        const hoveredItem = target.closest(".ui5-mp-item");
+        if (hoveredItem && this.selectionMode === CalendarSelectionMode.Range && this.selectedDates.length === 1) {
+            this._secondTimestamp = this._getTimestampFromDom(hoveredItem);
+        }
+    }
+    /**
+     * Sets the focus reference to the month that was clicked with mousedown.
+     * @param e
+     * @private
+     */
+    _onmousedown(e) {
+        const target = e.target;
+        const clickedItem = target.closest(".ui5-mp-item");
+        if (clickedItem) {
+            const timestamp = this._getTimestampFromDom(clickedItem);
+            this._setTimestamp(timestamp);
+        }
+    }
+    /**
+     * Modifies timestamp by a given amount of months and,
+     * if necessary, loads the prev/next page.
+     * @param amount
+     * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
+     * @private
+     */
+    _modifyTimestampBy(amount, preserveDate) {
+        // Modify the current timestamp
+        this._safelyModifyTimestampBy(amount, "month", preserveDate);
+        this._updateSecondTimestamp();
+        // Notify the calendar to update its timestamp
+        this.fireDecoratorEvent("navigate", { timestamp: this.timestamp });
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this._selectMonth(e);
+        }
+    }
+    /**
+     * Selects a month, when user made selection with mouse or using Space/Enter.
+     * @param e
+     * @private
+     */
+    _selectMonth(e) {
+        e.preventDefault();
+        const target = e.target;
+        if (!target.classList.contains("ui5-mp-item")) {
+            return;
+        }
+        const timestamp = this._getTimestampFromDom(target);
+        this._safelySetTimestamp(timestamp);
+        this._updateSecondTimestamp();
+        this._updateSelectedDates(timestamp);
+        this.fireDecoratorEvent("change", {
+            timestamp: this.timestamp,
+            dates: this.selectedDates,
+        });
+    }
+    _updateSelectedDates(timestamp) {
+        if (this.selectionMode === CalendarSelectionMode.Range && this.selectedDates.length === 1) {
+            this.selectedDates = [this.selectedDates[0], timestamp];
+            return;
+        }
+        this.selectedDates = [timestamp];
+    }
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _hasPreviousPage() {
+        return this._calendarDate.getYear() !== this._minDate.getYear();
+    }
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _hasNextPage() {
+        return this._calendarDate.getYear() !== this._maxDate.getYear();
+    }
+    /**
+     * Called by Calendar.js.
+     *
+     * **Note:** when the user presses the "<" button in the calendar header (same as "PageUp")
+     * @protected
+     */
+    _showPreviousPage() {
+        this._modifyTimestampBy(-PAGE_SIZE, true);
+    }
+    /**
+     * Called by Calendar.js
+     * **Note:** when the user presses the ">" button in the calendar header (same as "PageDown")
+     * @protected
+     */
+    _showNextPage() {
+        this._modifyTimestampBy(PAGE_SIZE, true);
+    }
+    _isOutOfSelectableRange(date, minDate, maxDate) {
+        const month = date.getMonth();
+        const year = date.getYear();
+        const minYear = minDate.getYear();
+        const minMonth = minDate.getMonth();
+        const maxYear = maxDate.getYear();
+        const maxMonth = maxDate.getMonth();
+        return year < minYear || (year === minYear && month < minMonth) || year > maxYear || (year === maxYear && month > maxMonth);
+    }
+};
+__decorate([
+    property({ type: Array })
+], MonthPicker.prototype, "selectedDates", void 0);
+__decorate([
+    property()
+], MonthPicker.prototype, "selectionMode", void 0);
+__decorate([
+    property({ type: Array })
+], MonthPicker.prototype, "_monthsInterval", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MonthPicker.prototype, "_hidden", void 0);
+__decorate([
+    property({ type: Number })
+], MonthPicker.prototype, "_secondTimestamp", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], MonthPicker, "i18nBundle", void 0);
+MonthPicker = MonthPicker_1 = __decorate([
+    customElement({
+        tag: "ui5-monthpicker",
+        template: MonthPickerTemplate,
+        styles: monthPickerStyles,
+    })
+    /**
+     * Fired when the user selects a month via "Space", "Enter" or click.
+     */
+    ,
+    event("change", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
+     * @since 1.0.0-rc.9
+     */
+    ,
+    event("navigate", {
+        bubbles: true,
+    })
+], MonthPicker);
+MonthPicker.define();
+export default MonthPicker;
+//# sourceMappingURL=MonthPicker.js.map

package/dist/MonthPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.js","sourceRoot":"","sources":["../src/MonthPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport convertMonthNumbersToMonthNames from \"@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js\";\nimport transformDateToSecondaryType from \"@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport CalendarType from \"@ui5/webcomponents-base/dist/types/CalendarType.js\";\nimport {\n\tisEnter,\n\tisSpace,\n\tisDown,\n\tisUp,\n\tisLeft,\n\tisRight,\n\tisHome,\n\tisEnd,\n\tisHomeCtrl,\n\tisEndCtrl,\n\tisPageUp,\n\tisPageDown,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n\tMONTH_PICKER_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport CalendarPart from \"./CalendarPart.js\";\nimport type { ICalendarPicker } from \"./Calendar.js\";\n\n// Template\nimport MonthPickerTemplate from \"./MonthPickerTemplate.js\";\n\n// Styles\nimport monthPickerStyles from \"./generated/themes/MonthPicker.css.js\";\nimport CalendarSelectionMode from \"./types/CalendarSelectionMode.js\";\n\nconst isBetween = (x: number, num1: number, num2: number) => x > Math.min(num1, num2) && x < Math.max(num1, num2);\nconst PAGE_SIZE = 12; // total months on a single page\n\ntype Month = {\n\ttimestamp: string,\n\tfocusRef: boolean,\n\t_tabIndex: number,\n\tselected: boolean,\n\tariaSelected: boolean,\n\tname: string,\n\tnameInSecType: string,\n\tdisabled: boolean,\n\tariaDisabled: boolean | undefined,\n\tclasses: string,\n\tparts: string,\n}\n\ntype MonthInterval = Array<Array<Month>>;\n\ntype MonthPickerChangeEventDetail = {\n\tdates: Array<number>,\n\ttimestamp: number,\n}\n\ntype MonthPickerNavigateEventDetail = {\n\ttimestamp: number,\n}\n\n/**\n * Month picker component.\n * @class\n *\n * Displays months which can be selected.\n * @constructor\n * @extends CalendarPart\n * @private\n */\n@customElement({\n\ttag: \"ui5-monthpicker\",\n\ttemplate: MonthPickerTemplate,\n\tstyles: monthPickerStyles,\n})\n/**\n * Fired when the user selects a month via \"Space\", \"Enter\" or click.\n */\n@event(\"change\", {\n\tbubbles: true,\n})\n/**\n * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.\n * @since 1.0.0-rc.9\n */\n@event(\"navigate\", {\n\tbubbles: true,\n})\nclass MonthPicker extends CalendarPart implements ICalendarPicker {\n\teventDetails!: CalendarPart[\"eventDetails\"] & {\n\t\tchange: MonthPickerChangeEventDetail,\n\t\tnavigate: MonthPickerNavigateEventDetail,\n\t}\n\t/**\n\t * An array of UTC timestamps representing the selected date\n\t * or dates depending on the capabilities of the picker component.\n\t * @default []\n\t */\n\t@property({ type: Array })\n\tselectedDates: Array<number> = [];\n\n\t/**\n\t * Defines the type of selection used in the month picker component.\n\t * Accepted property values are:\n\t *\n\t * - `CalendarSelectionMode.Single` - enables election of a single month.\n\t * - `CalendarSelectionMode.Range` - enables selection of a month range.\n\t *\n\t * Note that 'CalendarSelectionMode.Multiple` is not supported for Month Picker!\n\t * @default \"Single\"\n\t * @since 2.2.0\n\t */\n\t@property()\n\tselectionMode: `${CalendarSelectionMode}` = \"Single\";\n\n\t@property({ type: Array })\n\t_monthsInterval: MonthInterval = [];\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_hidden = false;\n\n\t/**\n\t * When selectionMode=\"Range\" and the first month in the range is selected, this is the currently hovered or focused month.\n\t *\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_secondTimestamp?: number;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget roleDescription() {\n\t\treturn MonthPicker.i18nBundle.getText(MONTH_PICKER_DESCRIPTION);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._buildMonths();\n\t}\n\n\tget rowSize() {\n\t\treturn (this.secondaryCalendarType === CalendarType.Islamic && this.primaryCalendarType !== CalendarType.Islamic)\n\t\t\t|| (this.secondaryCalendarType === CalendarType.Persian && this.primaryCalendarType !== CalendarType.Persian) ? 2 : 3;\n\t}\n\n\t_buildMonths() {\n\t\tif (this._hidden) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\tconst monthsNames = localeData.getMonthsStandAlone(\"wide\", this._primaryCalendarType);\n\n\t\tconst months: MonthInterval = [];\n\t\tconst calendarDate = this._calendarDate; // store the value of the expensive getter\n\t\tconst minDate = this._minDate; // store the value of the expensive getter\n\t\tconst maxDate = this._maxDate; // store the value of the expensive getter\n\t\tlet timestamp;\n\n\t\t/* eslint-disable no-loop-func */\n\t\tfor (let i = 0; i < 12; i++) {\n\t\t\tconst tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);\n\t\t\ttempDate.setMonth(i);\n\n\t\t\t// If the current date of the current month is larger than this month, set the date to the last day of the previous month.\n\t\t\t// This is needed because the date object will automatically switch to the next month if larger date is set.\n\t\t\tif (tempDate.getMonth() !== i) {\n\t\t\t\ttempDate.setMonth(tempDate.getMonth() - 1);\n\t\t\t\ttempDate.setDate(this._calendarDate.getDate() - tempDate.getDate());\n\t\t\t}\n\n\t\t\ttimestamp = tempDate.valueOf() / 1000;\n\n\t\t\tconst isSelected = this.selectedDates.some(itemTimestamp => {\n\t\t\t\tconst date = CalendarDate.fromTimestamp(itemTimestamp * 1000, this._primaryCalendarType);\n\t\t\t\treturn date.getYear() === tempDate.getYear() && date.getMonth() === tempDate.getMonth();\n\t\t\t});\n\t\t\tconst isFocused = tempDate.getMonth() === calendarDate.getMonth();\n\t\t\tconst isDisabled = this._isOutOfSelectableRange(tempDate, minDate, maxDate);\n\t\t\tconst isSelectedBetween = this._isMonthInsideSelectionRange(timestamp);\n\n\t\t\tconst month: Month = {\n\t\t\t\ttimestamp: timestamp.toString(),\n\t\t\t\tfocusRef: isFocused,\n\t\t\t\t_tabIndex: isFocused ? 0 : -1,\n\t\t\t\tselected: isSelected || isSelectedBetween,\n\t\t\t\tariaSelected: isSelected || isSelectedBetween,\n\t\t\t\tname: monthsNames[i],\n\t\t\t\tnameInSecType: this.hasSecondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text,\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tariaDisabled: isDisabled,\n\t\t\t\tclasses: \"ui5-mp-item\",\n\t\t\t\tparts: \"month-cell\",\n\t\t\t};\n\n\t\t\tif (isSelected) {\n\t\t\t\tmonth.classes += \" ui5-mp-item--selected\";\n\t\t\t\tmonth.parts += \" month-cell-selected\";\n\t\t\t}\n\n\t\t\tif (isSelectedBetween) {\n\t\t\t\tmonth.classes += \" ui5-mp-item--selected-between\";\n\t\t\t\tmonth.parts += \" month-cell-selected-between\";\n\t\t\t}\n\n\t\t\tif (isDisabled) {\n\t\t\t\tmonth.classes += \" ui5-mp-item--disabled\";\n\t\t\t}\n\n\t\t\tconst quarterIndex = Math.floor(i / this.rowSize);\n\n\t\t\tif (months[quarterIndex]) {\n\t\t\t\tmonths[quarterIndex].push(month);\n\t\t\t} else {\n\t\t\t\tmonths[quarterIndex] = [month];\n\t\t\t}\n\t\t}\n\n\t\tthis._monthsInterval = months;\n\t}\n\n\t_getDisplayedSecondaryMonthText(timestamp: number) {\n\t\tconst monthsName = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp);\n\t\treturn convertMonthNumbersToMonthNames(monthsName.firstDate.getMonth(), monthsName.lastDate.getMonth(), this.secondaryCalendarType);\n\t}\n\n\t/**\n\t  * Returns true if month timestamp is inside the selection range.\n\t  * @private\n\t  */\n\t_isMonthInsideSelectionRange(timestamp: number): boolean {\n\t\tif (this.selectionMode !== CalendarSelectionMode.Range || !this.selectedDates.length) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Only one date selected - second is hovered or focused\n\t\tif (this.selectedDates.length === 1 && this._secondTimestamp) {\n\t\t\treturn isBetween(timestamp, this.selectedDates[0], this._secondTimestamp);\n\t\t}\n\n\t\treturn isBetween(timestamp, this.selectedDates[0], this.selectedDates[1]);\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tlet preventDefault = true;\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._selectMonth(e);\n\t\t} else if (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t} else if (isLeft(e)) {\n\t\t\tthis._modifyTimestampBy(-1);\n\t\t} else if (isRight(e)) {\n\t\t\tthis._modifyTimestampBy(1);\n\t\t} else if (isUp(e)) {\n\t\t\tthis._modifyTimestampBy(-this.rowSize);\n\t\t} else if (isDown(e)) {\n\t\t\tthis._modifyTimestampBy(this.rowSize);\n\t\t} else if (isPageUp(e)) {\n\t\t\tthis._modifyTimestampBy(-PAGE_SIZE);\n\t\t} else if (isPageDown(e)) {\n\t\t\tthis._modifyTimestampBy(PAGE_SIZE);\n\t\t} else if (isHome(e) || isEnd(e)) {\n\t\t\tthis._onHomeOrEnd(isHome(e));\n\t\t} else if (isHomeCtrl(e)) {\n\t\t\tthis._setTimestamp(parseInt(this._monthsInterval[0][0].timestamp)); // first month of first row\n\t\t} else if (isEndCtrl(e)) {\n\t\t\tthis._setTimestamp(parseInt(this._monthsInterval[PAGE_SIZE / this.rowSize - 1][this.rowSize - 1].timestamp)); // last month of last row\n\t\t} else {\n\t\t\tpreventDefault = false;\n\t\t}\n\n\t\tif (preventDefault) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onHomeOrEnd(homePressed: boolean) {\n\t\tthis._monthsInterval.forEach(row => {\n\t\t\tconst indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getMonth() === this._calendarDate.getMonth());\n\t\t\tif (indexInRow !== -1) { // The current month is on this row\n\t\t\t\tconst index = homePressed ? 0 : this.rowSize - 1; // select the first (if Home) or last (if End) month on the row\n\t\t\t\tthis._setTimestamp(parseInt(row[index].timestamp));\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Sets the timestamp to an absolute value.\n\t * @param value\n\t * @private\n\t */\n\t_setTimestamp(value: number) {\n\t\tthis._safelySetTimestamp(value);\n\t\tthis.fireDecoratorEvent(\"navigate\", { timestamp: this.timestamp! });\n\t}\n\n\t/**\n\t * In range selection, the currently focused or hovered month is considered the \"second day\".\n\t * @private\n\t */\n\t_updateSecondTimestamp() {\n\t\tif (this.selectionMode === CalendarSelectionMode.Range && (this.selectedDates.length === 1 || this.selectedDates.length === 2)) {\n\t\t\tthis._secondTimestamp = this.timestamp;\n\t\t}\n\t}\n\n\t/**\n\t * Set the hovered day as the \"_secondTimestamp\".\n\t *\n\t * @param e\n\t * @private\n\t */\n\t_onmouseover(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tconst hoveredItem = target.closest(\".ui5-mp-item\") as HTMLElement;\n\t\tif (hoveredItem && this.selectionMode === CalendarSelectionMode.Range && this.selectedDates.length === 1) {\n\t\t\tthis._secondTimestamp = this._getTimestampFromDom(hoveredItem);\n\t\t}\n\t}\n\n\t/**\n\t * Sets the focus reference to the month that was clicked with mousedown.\n\t * @param e\n\t * @private\n\t */\n\t_onmousedown(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tconst clickedItem = target.closest(\".ui5-mp-item\") as HTMLElement;\n\n\t\tif (clickedItem) {\n\t\t\tconst timestamp = this._getTimestampFromDom(clickedItem);\n\t\t\tthis._setTimestamp(timestamp);\n\t\t}\n\t}\n\n\t/**\n\t * Modifies timestamp by a given amount of months and,\n\t * if necessary, loads the prev/next page.\n\t * @param amount\n\t * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)\n\t * @private\n\t */\n\t_modifyTimestampBy(amount: number, preserveDate?: boolean) {\n\t\t// Modify the current timestamp\n\t\tthis._safelyModifyTimestampBy(amount, \"month\", preserveDate);\n\t\tthis._updateSecondTimestamp();\n\n\t\t// Notify the calendar to update its timestamp\n\t\tthis.fireDecoratorEvent(\"navigate\", { timestamp: this.timestamp! });\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._selectMonth(e);\n\t\t}\n\t}\n\n\t/**\n\t * Selects a month, when user made selection with mouse or using Space/Enter.\n\t * @param e\n\t * @private\n\t */\n\t_selectMonth(e: Event) {\n\t\te.preventDefault();\n\t\tconst target = e.target as HTMLElement;\n\n\t\tif (!target.classList.contains(\"ui5-mp-item\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst timestamp = this._getTimestampFromDom(target);\n\t\tthis._safelySetTimestamp(timestamp);\n\t\tthis._updateSecondTimestamp();\n\t\tthis._updateSelectedDates(timestamp);\n\n\t\tthis.fireDecoratorEvent(\"change\", {\n\t\t\ttimestamp: this.timestamp!,\n\t\t\tdates: this.selectedDates,\n\t\t});\n\t}\n\n\t_updateSelectedDates(timestamp: number) {\n\t\tif (this.selectionMode === CalendarSelectionMode.Range && this.selectedDates.length === 1) {\n\t\t\tthis.selectedDates = [this.selectedDates[0], timestamp];\n\t\t\treturn;\n\t\t}\n\n\t\tthis.selectedDates = [timestamp];\n\t}\n\n\t/**\n\t * Called by the Calendar component.\n\t * @protected\n\t */\n\t_hasPreviousPage(): boolean {\n\t\treturn this._calendarDate.getYear() !== this._minDate.getYear();\n\t}\n\n\t/**\n\t * Called by the Calendar component.\n\t * @protected\n\t */\n\t_hasNextPage(): boolean {\n\t\treturn this._calendarDate.getYear() !== this._maxDate.getYear();\n\t}\n\n\t/**\n\t * Called by Calendar.js.\n\t *\n\t * **Note:** when the user presses the \"<\" button in the calendar header (same as \"PageUp\")\n\t * @protected\n\t */\n\t_showPreviousPage() {\n\t\tthis._modifyTimestampBy(-PAGE_SIZE, true);\n\t}\n\n\t/**\n\t * Called by Calendar.js\n\t * **Note:** when the user presses the \">\" button in the calendar header (same as \"PageDown\")\n\t * @protected\n\t */\n\t_showNextPage() {\n\t\tthis._modifyTimestampBy(PAGE_SIZE, true);\n\t}\n\n\t_isOutOfSelectableRange(date: CalendarDate, minDate: CalendarDate, maxDate: CalendarDate): boolean {\n\t\tconst month = date.getMonth();\n\t\tconst year = date.getYear();\n\t\tconst minYear = minDate.getYear();\n\t\tconst minMonth = minDate.getMonth();\n\t\tconst maxYear = maxDate.getYear();\n\t\tconst maxMonth = maxDate.getMonth();\n\n\t\treturn year < minYear || (year === minYear && month < minMonth) || year > maxYear || (year === maxYear && month > maxMonth);\n\t}\n}\n\nMonthPicker.define();\n\nexport default MonthPicker;\nexport type {\n\tMonthPickerNavigateEventDetail,\n\tMonthPickerChangeEventDetail,\n};\n"]}

package/dist/MonthPickerTemplate.d.ts

@@ -0,0 +1,2 @@
+import type MonthPicker from "./MonthPicker.js";
+export default function MonthPickerTemplate(this: MonthPicker): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/MonthPickerTemplate.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+export default function MonthPickerTemplate() {
+    return (_jsx("div", { class: "ui5-mp-root", part: "month-picker-root", role: "grid", "aria-roledescription": this.roleDescription, "aria-readonly": "false", "aria-multiselectable": "false", onMouseOver: this._onmouseover, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._selectMonth, onMouseDown: this._onmousedown, children: this._monthsInterval.map(months => _jsx("div", { role: "row", class: "ui5-mp-quarter", children: months.map(month => _jsxs("div", { "data-sap-timestamp": month.timestamp, tabindex: month._tabIndex, "data-sap-focus-ref": month.focusRef ? "true" : undefined, class: month.classes, part: month.parts, role: "gridcell", "aria-selected": month.ariaSelected, "aria-disabled": month.ariaDisabled, children: [_jsx("span", { class: "ui5-dp-monthtext", children: month.name }), month.nameInSecType &&
+                        _jsx("span", { class: "ui5-dp-monthtext ui5-dp-monthsectext", children: month.nameInSecType })] })) })) }));
+}
+//# sourceMappingURL=MonthPickerTemplate.js.map

package/dist/MonthPickerTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPickerTemplate.js","sourceRoot":"","sources":["../src/MonthPickerTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,cACC,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,mBAAmB,EACxB,IAAI,EAAC,MAAM,0BACW,IAAI,CAAC,eAAe,mBAC5B,OAAO,0BACA,OAAO,EAC5B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,YAE7B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAClC,cAAK,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,gBAAgB,YAEpC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACnB,qCACqB,KAAK,CAAC,SAAS,EACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,wBACL,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACvD,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,IAAI,EAAE,KAAK,CAAC,KAAK,EACjB,IAAI,EAAC,UAAU,mBACA,KAAK,CAAC,YAAY,mBAClB,KAAK,CAAC,YAAY,aAEjC,eAAM,KAAK,EAAC,kBAAkB,YAC5B,KAAK,CAAC,IAAI,GACL,EAEN,KAAK,CAAC,aAAa;wBACrB,eAAM,KAAK,EAAC,sCAAsC,YAChD,KAAK,CAAC,aAAa,GACd,IAED,CACN,GACI,CACN,GACI,CAAC,CAAC;AACV,CAAC","sourcesContent":["import type MonthPicker from \"./MonthPicker.js\";\n\nexport default function MonthPickerTemplate(this: MonthPicker) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-mp-root\"\n\t\t\tpart=\"month-picker-root\"\n\t\t\trole=\"grid\"\n\t\t\taria-roledescription={this.roleDescription}\n\t\t\taria-readonly=\"false\"\n\t\t\taria-multiselectable=\"false\"\n\t\t\tonMouseOver={this._onmouseover}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonClick={this._selectMonth}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t>\n\t\t\t{this._monthsInterval.map(months =>\n\t\t\t\t<div role=\"row\" class=\"ui5-mp-quarter\">\n\n\t\t\t\t\t{months.map(month =>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tdata-sap-timestamp={month.timestamp}\n\t\t\t\t\t\t\ttabindex={month._tabIndex}\n\t\t\t\t\t\t\tdata-sap-focus-ref={month.focusRef ? \"true\" : undefined}\n\t\t\t\t\t\t\tclass={month.classes}\n\t\t\t\t\t\t\tpart={month.parts}\n\t\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\t\taria-selected={month.ariaSelected}\n\t\t\t\t\t\t\taria-disabled={month.ariaDisabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"ui5-dp-monthtext\">\n\t\t\t\t\t\t\t\t{month.name}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t{month.nameInSecType &&\n\t\t\t\t\t\t<span class=\"ui5-dp-monthtext ui5-dp-monthsectext\">\n\t\t\t\t\t\t\t{month.nameInSecType}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>);\n}\n"]}