@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/MonthPicker.js

@@ -1,18 +1,23 @@
-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 getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.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 { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.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 CalendarPart from "./CalendarPart.js";
 import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
-
-// Styles
 import styles from "./generated/themes/MonthPicker.css.js";
 /**
  * @public
@@ -21,49 +26,17 @@ 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}
+		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
+		 * @type {Array}
 		 * @public
 		 */
-		timestamp: {
+		selectedDates: {
 			type: Integer,
+			multiple: true,
+			compareValues: true,
 		},
 
-		/**
-		 * 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: {
+		_months: {
 			type: Object,
 			multiple: true,
 		},
@@ -72,27 +45,27 @@ const metadata = {
 			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.
+		 * Fired when the user selects a month (space/enter/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: {},
 	},
 };
 
+const PAGE_SIZE = 12; // Total months on a single page
+const ROW_SIZE = 3; // Months per row (4 rows of 3 months each)
+
 /**
  * Month picker component.
  *
@@ -103,19 +76,15 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MonthPicker
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @extends CalendarPart
  * @tagname ui5-monthpicker
  * @public
  */
-class MonthPicker extends UI5Element {
+class MonthPicker extends CalendarPart {
 	static get metadata() {
 		return metadata;
 	}
 
-	static get render() {
-		return litRender;
-	}
-
 	static get template() {
 		return MonthPickerTemplate;
 	}
@@ -124,180 +93,204 @@ class MonthPicker extends UI5Element {
 		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 = [];
+	onBeforeRendering() {
+		this._buildMonths();
+	}
 
-			for (let i = 0; i < this._quarters.length; i++) {
-				const quarter = this._quarters[i].filter(x => !x.disabled);
-				focusableMonths.push(quarter);
-			}
+	_buildMonths() {
+		if (this._hidden) {
+			return;
+		}
 
-			return [].concat(...focusableMonths);
-		}.bind(this);
-		this._itemNav.setItemsCallback = function setItemsCallback(items) {
-			this._quarters = items;
-		}.bind(this);
-	}
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
 
-	onBeforeRendering() {
-		const quarters = [];
-		const oCalDate = CalendarDate.fromTimestamp(new Date().getTime(), 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++) {
-			oCalDate.setMonth(i);
-			timestamp = oCalDate.valueOf() / 1000;
+			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(),
-				id: `${this._id}-m${i}`,
-				name: this._oLocaleData.getMonths("wide", this._primaryCalendarType)[i],
+				focusRef: isFocused,
+				_tabIndex: isFocused ? "0" : "-1",
+				selected: isSelected,
+				ariaSelected: isSelected ? "true" : "false",
+				name: monthsNames[i],
+				disabled: isDisabled,
 				classes: "ui5-mp-item",
 			};
 
-			if (this._month === i) {
+			if (isSelected) {
 				month.classes += " ui5-mp-item--selected";
 			}
 
-			if ((this.minDate || this.maxDate) && this._isOutOfSelectableRange(i)) {
+			if (isDisabled) {
 				month.classes += " ui5-mp-item--disabled";
-				month.disabled = true;
 			}
 
-			const quarterIndex = parseInt(i / 3);
+			const quarterIndex = parseInt(i / ROW_SIZE);
 
-			if (quarters[quarterIndex]) {
-				quarters[quarterIndex].push(month);
+			if (months[quarterIndex]) {
+				months[quarterIndex].push(month);
 			} else {
-				quarters[quarterIndex] = [month];
+				months[quarterIndex] = [month];
 			}
 		}
 
-		this._quarters = quarters;
+		this._months = months;
 	}
 
 	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);
+		if (!this._hidden) {
+			this.focus();
+		}
 	}
 
-	get _calendarDate() {
-		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
-	}
+	_onkeydown(event) {
+		let preventDefault = true;
+
+		if (isEnter(event)) {
+			this._selectMonth(event);
+		} else if (isSpace(event)) {
+			event.preventDefault();
+		} else if (isLeft(event)) {
+			this._modifyTimestampBy(-1);
+		} else if (isRight(event)) {
+			this._modifyTimestampBy(1);
+		} else if (isUp(event)) {
+			this._modifyTimestampBy(-ROW_SIZE);
+		} else if (isDown(event)) {
+			this._modifyTimestampBy(ROW_SIZE);
+		} else if (isPageUp(event)) {
+			this._modifyTimestampBy(-PAGE_SIZE);
+		} else if (isPageDown(event)) {
+			this._modifyTimestampBy(PAGE_SIZE);
+		} else if (isHome(event) || isEnd(event)) {
+			this._onHomeOrEnd(isHome(event));
+		} else if (isHomeCtrl(event)) {
+			this._setTimestamp(parseInt(this._months[0][0].timestamp)); // first month of first row
+		} else if (isEndCtrl(event)) {
+			this._setTimestamp(parseInt(this._months[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last month of last row
+		} else {
+			preventDefault = false;
+		}
 
-	get _month() {
-		return this._calendarDate.getMonth();
+		if (preventDefault) {
+			event.preventDefault();
+		}
 	}
 
-	get _primaryCalendarType() {
-		return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
+	_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 : ROW_SIZE - 1; // select the first (if Home) or last (if End) month on the row
+				this._setTimestamp(parseInt(row[index].timestamp));
+			}
+		});
 	}
 
-	get _isPattern() {
-		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+	/**
+	 * Sets the timestamp to an absolute value
+	 * @param value
+	 * @private
+	 */
+	_setTimestamp(value) {
+		this._safelySetTimestamp(value);
+		this.fireEvent("navigate", { timestamp: this.timestamp });
 	}
 
-	_onclick(event) {
-		if (event.target.className.indexOf("ui5-mp-item") > -1) {
-			const timestamp = this.getTimestampFromDOM(event.target);
-			this.timestamp = timestamp;
-			this._itemNav.current = this._month;
-			this.fireEvent("change", { timestamp });
-		}
+	/**
+	 * Modifies timestamp by a given amount of months and, if necessary, loads the prev/next page
+	 * @param amount
+	 * @private
+	 */
+	_modifyTimestampBy(amount) {
+		// Modify the current timestamp
+		this._safelyModifyTimestampBy(amount, "month");
+
+		// Notify the calendar to update its timestamp
+		this.fireEvent("navigate", { timestamp: this.timestamp });
 	}
 
-	_onkeydown(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this._activateMonth(event);
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			this._selectMonth(event);
 		}
 	}
 
-	_activateMonth(event) {
+	/**
+	 * User clicked with the mouser or pressed Enter/Space
+	 * @param event
+	 * @private
+	 */
+	_selectMonth(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 });
+			const timestamp = this._getTimestampFromDom(event.target);
+			this._safelySetTimestamp(timestamp);
+			this.fireEvent("change", { timestamp: this.timestamp });
 		}
 	}
 
-	_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() {
-		if (this.maxDate) {
-			const jsDate = new Date(this.getFormat().parse(this.maxDate).getFullYear(), this.getFormat().parse(this.maxDate).getMonth(), this.getFormat().parse(this.maxDate).getDate());
-			const oCalDate = CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
-			return oCalDate.valueOf();
-		}
-		return this.maxDate;
+	/**
+	 * Called from Calendar.js
+	 * @protected
+	 */
+	_hasPreviousPage() {
+		return this._calendarDate.getYear() !== this._minDate.getYear();
 	}
 
-	get _minDate() {
-		if (this.minDate) {
-			const jsDate = new Date(this.getFormat().parse(this.minDate).getFullYear(), this.getFormat().parse(this.minDate).getMonth(), this.getFormat().parse(this.minDate).getDate());
-			const oCalDate = CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
-			return oCalDate.valueOf();
-		}
-		return this.minDate;
+	/**
+	 * Called from Calendar.js
+	 * @protected
+	 */
+	_hasNextPage() {
+		return this._calendarDate.getYear() !== this._maxDate.getYear();
 	}
 
-
-	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;
+	/**
+	 * Called by Calendar.js
+	 * User pressed the "<" button in the calendar header (same as PageUp)
+	 * @protected
+	 */
+	_showPreviousPage() {
+		this._modifyTimestampBy(-PAGE_SIZE);
 	}
 
-	get _formatPattern() {
-		return this.formatPattern || "medium"; // get from config
+	/**
+	 * Called by Calendar.js
+	 * User pressed the ">" button in the calendar header (same as PageDown)
+	 * @protected
+	 */
+	_showNextPage() {
+		this._modifyTimestampBy(PAGE_SIZE);
 	}
 
-	getTimestampFromDOM(domNode) {
-		const oMonthDomRef = domNode.getAttribute("data-sap-timestamp");
-		return parseInt(oMonthDomRef);
-	}
+	_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();
 
-	get styles() {
-		return {
-			main: {
-				display: this._hidden ? "none" : "",
-			},
-		};
+		return year < minYear || (year === minYear && month < minMonth) || year > maxYear || (year === maxYear && month > maxMonth);
 	}
 }
 

package/src/MultiComboBox.hbs

@@ -1,8 +1,6 @@
 <div class="ui5-multi-combobox-root"
-	@focusin={{rootFocusIn}}
-	@focusout={{rootFocusOut}}
 >
-	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{nMoreCountText}}</span>
+	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 
 	{{#if hasValueState}}
 		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
@@ -12,21 +10,23 @@
 		show-more
 		class="ui5-multi-combobox-tokenizer"
 		?disabled="{{disabled}}"
-		@ui5-show-more-items-press="{{_showMorePopover}}"
+		@ui5-show-more-items-press="{{_showFilteredItems}}"
 		@ui5-token-delete="{{_tokenDelete}}"
 		@focusout="{{_tokenizerFocusOut}}"
+		@focusin="{{_tokenizerFocusIn}}"
 		@click={{_click}}
-		?expanded="{{expandedTokenizer}}"
+		@keydown="{{_onTokenizerKeydown}}"
+		?expanded="{{_tokenizerExpanded}}"
 	>
 		{{#each items}}
 			{{#if this.selected}}
 				<ui5-token
-				?readonly="{{../readonly}}"
-				class="ui5-multi-combobox-token"
-				data-ui5-id="{{this._id}}"
-				part="token-{{@index}}"
+					?readonly="{{../readonly}}"
+					class="ui5-multi-combobox-token"
+					data-ui5-id="{{this._id}}"
+					part="token-{{@index}}"
+					text="{{this.text}}"
 				>
-					{{this.text}}
 				</ui5-token>
 			{{/if}}
 		{{/each}}
@@ -35,33 +35,42 @@
 	<input id="ui5-multi-combobox-input"
 		.value="{{value}}"
 		inner-input
-		placeholder="{{placeholder}}"
+		placeholder={{_getPlaceholder}}
 		?disabled={{disabled}}
 		?readonly={{readonly}}
-		?required={{required}}
 		value-state="{{valueState}}"
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
 		@keydown="{{_onkeydown}}"
 		@keyup="{{_onkeyup}}"
-		@focusin="{{_focusin}}"
-		@focusout="{{_focusout}}"
 		@click={{_click}}
+		@focusin={{inputFocusIn}}
+		@focusout={{inputFocusOut}}
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-expanded="{{open}}"
 		aria-autocomplete="both"
-		aria-labelledby="{{_id}}-hiddenText-nMore"
-		aria-describedby="{{valueStateTextId}}"
+		aria-describedby="{{ariaDescribedByText}}"
+		aria-required="{{required}}"
 	/>
 
+	{{#if readonly}}
+		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
+	{{/if}}
+
+	{{#if icon}}
+		<slot name="icon"></slot>
+	{{/if}}
+
 	{{#unless readonly}}
 		<ui5-icon name="slim-arrow-down"
 			input-icon
 			slot="icon"
 			tabindex="-1"
-			@click={{togglePopover}}
-			?pressed="{{_iconPressed}}"
+			@click="{{togglePopover}}"
+			@mousedown="{{_onIconMousedown}}"
+			@focusin="{{_forwardFocusToInner}}"
+			?pressed="{{open}}"
 			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>