@ui5/webcomponents 0.0.0-0742854fd → 0.0.0-07d38e78e

package/dist/MonthPicker.js

@@ -1,353 +1,276 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
-import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
-import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+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.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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
-import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { MONTH_PICKER_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
+import CalendarPart from "./CalendarPart.js";
+// Template
 import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
-
 // Styles
-import styles from "./generated/themes/MonthPicker.css.js";
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-monthpicker",
-	properties: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {
-		/**
-		 * A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
-		 * @type {Integer}
-		 * @public
-		 */
-		timestamp: {
-			type: Integer,
-		},
-
-		/**
-		 * Sets a calendar type used for display.
-		 * If not set, the calendar type of the global configuration is used.
-		 * @type {CalendarType}
-		 * @public
-		 */
-		primaryCalendarType: {
-			type: CalendarType,
-		},
-
-		/**
-		 * Determines the мinimum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		minDate: {
-			type: String,
-		},
-
-		/**
-		 * Determines the maximum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		maxDate: {
-			type: String,
-		},
-
-		_quarters: {
-			type: Object,
-			multiple: true,
-		},
-
-		_hidden: {
-			type: Boolean,
-			noAttribute: true,
-		},
-		/**
-		 * Determines the format, displayed in the input field.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		formatPattern: {
-			type: String,
-		},
-	},
-	events: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {
-		/**
-		 * Fired when the user selects a new Date on the Web Component.
-		 * @public
-		 * @event
-		 */
-		change: {},
-		/**
-		 * Fired when month, year has changed due to item navigation.
-		 * @since 1.0.0-rc.9
-		 * @public
-		 * @event
-		 */
-		navigate: {},
-	},
-};
-
+import monthPickerStyles from "./generated/themes/MonthPicker.css.js";
+const PAGE_SIZE = 12; // total months on a single page
 /**
  * Month picker component.
- *
  * @class
  *
  * Displays months which can be selected.
- *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.MonthPicker
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-monthpicker
- * @public
+ * @extends CalendarPart
+ * @private
  */
-class MonthPicker extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return MonthPickerTemplate;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	constructor() {
-		super();
-		this._oLocale = getLocale();
-		this._oLocaleData = new LocaleData(this._oLocale);
-
-		this._itemNav = new ItemNavigation(this, {
-			pageSize: 12,
-			rowSize: 3,
-			behavior: ItemNavigationBehavior.Paging,
-		});
-
-		this._itemNav.getItemsCallback = function getItemsCallback() {
-			const focusableMonths = [];
-
-			for (let i = 0; i < this._quarters.length; i++) {
-				const quarter = this._quarters[i].filter(x => !x.disabled);
-				focusableMonths.push(quarter);
-			}
-
-			return [].concat(...focusableMonths);
-		}.bind(this);
-
-		this._itemNav.setItemsCallback = function setItemsCallback(items) {
-			this._quarters = items;
-		}.bind(this);
-
-		this._itemNav.attachEvent(
-			ItemNavigation.BORDER_REACH,
-			this._handleItemNavigationBorderReach.bind(this)
-		);
-	}
-
-	onBeforeRendering() {
-		const quarters = [];
-		const oCalDate = CalendarDate.fromTimestamp(new Date().getTime(), this._primaryCalendarType);
-		let timestamp;
-
-		for (let i = 0; i < 12; i++) {
-			oCalDate.setMonth(i);
-			timestamp = oCalDate.valueOf() / 1000;
-
-			const month = {
-				timestamp: timestamp.toString(),
-				id: `${this._id}-m${i}`,
-				name: this._oLocaleData.getMonths("wide", this._primaryCalendarType)[i],
-				classes: "ui5-mp-item",
-			};
-
-			if (this._month === i) {
-				month.classes += " ui5-mp-item--selected";
-			}
-
-			if ((this.minDate || this.maxDate) && this._isOutOfSelectableRange(i)) {
-				month.classes += " ui5-mp-item--disabled";
-				month.disabled = true;
-			}
-
-			const quarterIndex = parseInt(i / 3);
-
-			if (quarters[quarterIndex]) {
-				quarters[quarterIndex].push(month);
-			} else {
-				quarters[quarterIndex] = [month];
-			}
-		}
-
-		this._quarters = quarters;
-	}
-
-	onAfterRendering() {
-		this._itemNav.focusCurrent();
-	}
-
-	get _timestamp() {
-		return this.timestamp !== undefined ? this.timestamp : Math.floor(new Date().getTime() / 1000);
-	}
-
-	get _localDate() {
-		return new Date(this._timestamp * 1000);
-	}
-
-	get _calendarDate() {
-		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
-	}
-
-	get _month() {
-		return this._calendarDate.getMonth();
-	}
-
-	get _primaryCalendarType() {
-		return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
-	}
-
-	get _isPattern() {
-		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
-	}
-
-	_onmousedown(event) {
-		if (event.target.className.indexOf("ui5-mp-item") > -1) {
-			const targetTimestamp = this.getTimestampFromDOM(event.target);
-			const focusedItem = this._itemNav._getItems().find(item => parseInt(item.timestamp) === targetTimestamp);
-			this._itemNav.currentIndex = this._itemNav._getItems().indexOf(focusedItem);
-			this._itemNav.focusCurrent();
-		}
-	}
-
-	_onmouseup(event) {
-		if (event.target.className.indexOf("ui5-mp-item") > -1) {
-			const timestamp = this.getTimestampFromDOM(event.target);
-			this.timestamp = timestamp;
-			this.fireEvent("change", { timestamp });
-		}
-	}
-
-	_onkeydown(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this._activateMonth(event);
-		}
-	}
-
-	_activateMonth(event) {
-		event.preventDefault();
-		if (event.target.className.indexOf("ui5-mp-item") > -1) {
-			const timestamp = this.getTimestampFromDOM(event.target);
-			this.timestamp = timestamp;
-			this.fireEvent("change", { timestamp });
-		}
-	}
-
-	_handleItemNavigationBorderReach(event) {
-		if (this._isOutOfSelectableRange(this._month)) {
-			return;
-		}
-
-		this.fireEvent("navigate", event);
-	}
-
-	_isOutOfSelectableRange(monthIndex) {
-		const currentDateYear = this._localDate.getFullYear(),
-			minDate = new Date(this._minDate),
-			maxDate = new Date(this._maxDate),
-			minDateCheck = minDate && ((currentDateYear === minDate.getFullYear() && monthIndex < minDate.getMonth()) || currentDateYear < minDate.getFullYear()),
-			maxDateCheck = maxDate && ((currentDateYear === maxDate.getFullYear() && monthIndex > maxDate.getMonth()) || (currentDateYear > maxDate.getFullYear()));
-
-		return maxDateCheck || minDateCheck;
-	}
-
-	get _maxDate() {
-		return this.maxDate ? this._getTimeStampFromString(this.maxDate) : this._getMaxCalendarDate();
-	}
-
-	get _minDate() {
-		return this.minDate ? this._getTimeStampFromString(this.minDate) : this._getMinCalendarDate();
-	}
-
-	_getTimeStampFromString(value) {
-		const jsDate = this.getFormat().parse(value);
-		if (jsDate) {
-			const jsDateTimeNow = Date.UTC(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate());
-			const calDate = CalendarDate.fromTimestamp(jsDateTimeNow, this._primaryCalendarType);
-			return calDate.valueOf();
-		}
-		return undefined;
-	}
-
-	_getMinCalendarDate() {
-		const minDate = new CalendarDate(1, 0, 1, this._primaryCalendarType);
-		minDate.setYear(1);
-		minDate.setMonth(0);
-		minDate.setDate(1);
-		return minDate.valueOf();
-	}
-
-	_getMaxCalendarDate() {
-		const maxDate = new CalendarDate(1, 0, 1, this._primaryCalendarType);
-		maxDate.setYear(9999);
-		maxDate.setMonth(11);
-		const tempDate = new CalendarDate(maxDate, this._primaryCalendarType);
-		tempDate.setDate(1);
-		tempDate.setMonth(tempDate.getMonth() + 1, 0);
-		maxDate.setDate(tempDate.getDate());// 31st for Gregorian Calendar
-		return maxDate.valueOf();
-	}
-
-	getFormat() {
-		if (this._isPattern) {
-			this._oDateFormat = DateFormat.getInstance({
-				pattern: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		} else {
-			this._oDateFormat = DateFormat.getInstance({
-				style: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		}
-		return this._oDateFormat;
-	}
-
-	get _formatPattern() {
-		return this.formatPattern || "medium"; // get from config
-	}
-
-	getTimestampFromDOM(domNode) {
-		const oMonthDomRef = domNode.getAttribute("data-sap-timestamp");
-		return parseInt(oMonthDomRef);
-	}
-
-	get styles() {
-		return {
-			main: {
-				display: this._hidden ? "none" : "",
-			},
-		};
-	}
-}
-
+let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
+    static async onDefine() {
+        MonthPicker_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    get roleDescription() {
+        return MonthPicker_1.i18nBundle.getText(MONTH_PICKER_DESCRIPTION);
+    }
+    onBeforeRendering() {
+        this._buildMonths();
+    }
+    onAfterRendering() {
+        if (!this._hidden) {
+            this.focus();
+        }
+    }
+    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
+        const tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);
+        let timestamp;
+        /* eslint-disable no-loop-func */
+        for (let i = 0; i < 12; i++) {
+            tempDate.setMonth(i);
+            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 month = {
+                timestamp: timestamp.toString(),
+                focusRef: isFocused,
+                _tabIndex: isFocused ? "0" : "-1",
+                selected: isSelected,
+                ariaSelected: isSelected ? "true" : "false",
+                name: monthsNames[i],
+                nameInSecType: this.hasSecondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text,
+                disabled: isDisabled,
+                classes: "ui5-mp-item",
+            };
+            if (isSelected) {
+                month.classes += " ui5-mp-item--selected";
+            }
+            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._months = months;
+    }
+    _getDisplayedSecondaryMonthText(timestamp) {
+        const monthsName = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp);
+        return convertMonthNumbersToMonthNames(monthsName.firstDate.getMonth(), monthsName.lastDate.getMonth(), this.secondaryCalendarType);
+    }
+    _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._months[0][0].timestamp)); // first month of first row
+        }
+        else if (isEndCtrl(e)) {
+            this._setTimestamp(parseInt(this._months[PAGE_SIZE / this.rowSize - 1][this.rowSize - 1].timestamp)); // last month of last row
+        }
+        else {
+            preventDefault = false;
+        }
+        if (preventDefault) {
+            e.preventDefault();
+        }
+    }
+    _onHomeOrEnd(homePressed) {
+        this._months.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.fireEvent("navigate", { timestamp: this.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);
+        // Notify the calendar to update its timestamp
+        this.fireEvent("navigate", { timestamp: this.timestamp });
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this._selectMonth(e);
+        }
+    }
+    /**
+     * Selects a month, when the user clicks or presses "Enter" or "Space".
+     * @param e
+     * @private
+     */
+    _selectMonth(e) {
+        e.preventDefault();
+        const target = e.target;
+        if (target.className.indexOf("ui5-mp-item") > -1) {
+            const timestamp = this._getTimestampFromDom(target);
+            this._safelySetTimestamp(timestamp);
+            this.fireEvent("change", { timestamp: this.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({
+        validator: Integer,
+        multiple: true,
+        compareValues: true,
+    })
+], MonthPicker.prototype, "selectedDates", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], MonthPicker.prototype, "_months", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MonthPicker.prototype, "_hidden", 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.
+     * @public
+     */
+    ,
+    event("change")
+    /**
+     * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
+     * @since 1.0.0-rc.9
+     * @public
+     */
+    ,
+    event("navigate")
+], MonthPicker);
 MonthPicker.define();
-
 export default MonthPicker;
+//# sourceMappingURL=MonthPicker.js.map