@ui5/webcomponents 0.0.0-aeb93167c → 0.0.0-b053ad005

package/dist/CalendarDate.js

@@ -0,0 +1,45 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+* @public
+*/
+const metadata = {
+	tag: "ui5-date",
+	properties: /** @lends  sap.ui.webcomponents.main.CalendarDate.prototype */ {
+
+		/**
+		 * The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the component
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		value: {
+			type: String,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-date</code> component defines a calendar date to be used inside <code>ui5-calendar</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.CalendarDate
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-date
+ * @implements sap.ui.webcomponents.main.ICalendarDate
+ * @public
+ */
+class CalendarDate extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+CalendarDate.define();
+
+export default CalendarDate;

package/dist/CalendarHeader.js

@@ -1,12 +1,12 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import Button from "./Button.js";
 import Icon from "./Icon.js";
-import ButtonDesign from "./types/ButtonDesign.js";
 import CalendarHeaderTemplate from "./generated/templates/CalendarHeaderTemplate.lit.js";
 import {
 	CALENDAR_HEADER_NEXT_BUTTON,
@@ -18,32 +18,67 @@ import styles from "./generated/themes/CalendarHeader.css.js";
 
 const metadata = {
 	tag: "ui5-calendar-header",
+	languageAware: true,
 	properties: {
-		monthText: {
-			type: String,
-		},
-		yearText: {
-			type: String,
+		/**
+		 * Already normalized by Calendar
+		 * @type {Integer}
+		 * @public
+		 */
+		timestamp: {
+			type: Integer,
 		},
-		_btnPrev: {
-			type: Object,
+
+		/**
+		 * Already normalized by Calendar
+		 * @type {CalendarType}
+		 * @public
+		 */
+		primaryCalendarType: {
+			type: CalendarType,
 		},
-		_btnNext: {
-			type: Object,
+
+		/**
+		 * Already normalized by Calendar
+		 * @sience 1.0.0-rc.16
+		 * @defaultvalue undefined
+		 * @type {CalendarType}
+		 * @public
+		 */
+		secondaryCalendarType: {
+			type: CalendarType,
 		},
-		_btn1: {
+
+		/**
+		 * Stores information for month button for secondary calendar type
+		 * @type {Object}
+		 * @private
+		*/
+		buttonTextForSecondaryCalendarType: {
 			type: Object,
 		},
-		_btn2: {
-			type: Object,
+
+		isNextButtonDisabled: {
+			type: Boolean,
 		},
-		_isNextButtonDisabled: {
+
+		isPrevButtonDisabled: {
 			type: Boolean,
 		},
-		_isPrevButtonDisabled: {
+
+		isMonthButtonHidden: {
 			type: Boolean,
 		},
-		_isMonthButtonHidden: {
+
+		_monthButtonText: {
+			type: String,
+		},
+
+		_yearButtonText: {
+			type: String,
+		},
+
+		isYearButtonHidden: {
 			type: Boolean,
 		},
 	},
@@ -73,83 +108,99 @@ class CalendarHeader extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Button, Icon];
+		return [Icon];
+	}
+
+	static async onDefine() {
+		CalendarHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this._btnPrev = {};
-		this._btnPrev.icon = "slim-arrow-left";
-
-		this._btnNext = {};
-		this._btnNext.icon = "slim-arrow-right";
-
-		this._btn1 = {};
-		this._btn1.type = ButtonDesign.Transparent;
-
-		this._btn2 = {};
-		this._btn2.type = ButtonDesign.Transparent;
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
-		this._btn1.text = this.monthText;
-		this._btn2.text = this.yearText;
-		this._btnPrev.classes = "ui5-calheader-arrowbtn";
-		this._btnNext.classes = "ui5-calheader-arrowbtn";
-
-		if (this._isNextButtonDisabled) {
-			this._btnNext.classes += " ui5-calheader-arrowbtn-disabled";
-		}
+		this._prevButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
+		this._nextButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
 
-		if (this._isPrevButtonDisabled) {
-			this._btnPrev.classes += " ui5-calheader-arrowbtn-disabled";
+		if (this.hasSecondaryCalendarType) {
+			this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;
+			this._secondYearButtonText = this.buttonTextForSecondaryCalendarType.yearButtonText;
 		}
 	}
 
-	_handlePrevPress(event) {
+	onPrevButtonClick(event) {
 		this.fireEvent("previous-press", event);
 	}
 
-	_handleNextPress(event) {
+	onNextButtonClick(event) {
 		this.fireEvent("next-press", event);
 	}
 
-	_showMonthPicker(event) {
+	onMonthButtonClick(event) {
 		this.fireEvent("show-month-press", event);
 	}
 
-	_showYearPicker(event) {
+	onMonthButtonKeyDown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
+
+		if (isEnter(event)) {
+			this.fireEvent("show-month-press", event);
+		}
+	}
+
+	onMonthButtonKeyUp(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			this.fireEvent("show-month-press", event);
+		}
+	}
+
+	onYearButtonClick(event) {
 		this.fireEvent("show-year-press", event);
 	}
 
-	_onkeydown(event) {
-		if (isSpace(event) || isEnter(event)) {
-			const showPickerButton = event.target.getAttribute("data-sap-show-picker");
+	onYearButtonKeyDown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
 
-			if (showPickerButton) {
-				this[`_show${showPickerButton}Picker`]();
-			}
+		if (isEnter(event)) {
+			this.fireEvent("show-year-press", event);
 		}
 	}
 
-	_onMidContainerKeyDown(event) {
+	onYearButtonKeyUp(event) {
 		if (isSpace(event)) {
 			event.preventDefault();
+			this.fireEvent("show-year-press", event);
 		}
 	}
 
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
 	}
 
-	get _prevButtonText() {
-		return this.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
+	get classes() {
+		return {
+			prevButton: {
+				"ui5-calheader-arrowbtn": true,
+				"ui5-calheader-arrowbtn-disabled": this.isPrevButtonDisabled,
+			},
+			nextButton: {
+				"ui5-calheader-arrowbtn": true,
+				"ui5-calheader-arrowbtn-disabled": this.isNextButtonDisabled,
+			},
+		};
 	}
 
-	get _nextButtonText() {
-		return this.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
+	get accInfo() {
+		return {
+			ariaLabelMonthButton: this.hasSecondaryCalendarType
+				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.info}` : `${this._monthButtonText}`,
+		};
 	}
 }
 

package/dist/CalendarPart.js

@@ -0,0 +1,111 @@
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
+import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
+import DateComponentBase from "./DateComponentBase.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	properties: /** @lends  sap.ui.webcomponents.main.CalendarPart.prototype */ {
+		/**
+		 * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date.
+		 * <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch.
+		 * @type {Integer}
+		 * @protected
+		 */
+		timestamp: {
+			type: Integer,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * Abstract base class for Calendar, DayPicker, MonthPicker and YearPicker that adds support for:
+ *  - common properties (timestamp, selectedDates): declarations and methods that operate on them
+ *  - other common code
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.CalendarPart
+ * @extends DateComponentBase
+ * @public
+ */
+class CalendarPart extends DateComponentBase {
+	static get metadata() {
+		return metadata;
+	}
+
+	get _minTimestamp() {
+		return this._minDate.valueOf() / 1000;
+	}
+
+	get _maxTimestamp() {
+		return this._maxDate.valueOf() / 1000;
+	}
+
+	/**
+	 * Returns the effective timestamp to be used by the respective calendar part
+	 * @protected
+	 */
+	get _timestamp() {
+		let timestamp = this.timestamp !== undefined ? this.timestamp : getTodayUTCTimestamp(this._primaryCalendarType);
+		if (timestamp < this._minTimestamp || timestamp > this._maxTimestamp) {
+			timestamp = this._minTimestamp;
+		}
+		return timestamp;
+	}
+
+	get _localDate() {
+		return new Date(this._timestamp * 1000);
+	}
+
+	/**
+	 * Returns a CalendarDate instance, representing the _timestamp getter - this date is central to all components' rendering logic
+	 * @protected
+	 */
+	get _calendarDate() {
+		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
+	}
+
+	/**
+	 * Change a timestamp and enforce limits
+	 *
+	 * @param timestamp
+	 * @protected
+	 */
+	_safelySetTimestamp(timestamp) {
+		const min = this._minDate.valueOf() / 1000;
+		const max = this._maxDate.valueOf() / 1000;
+
+		if (timestamp < min) {
+			timestamp = min;
+		}
+		if (timestamp > max) {
+			timestamp = max;
+		}
+
+		this.timestamp = timestamp;
+	}
+
+	/**
+	 * Modify a timestamp by a certain amount of days/months/years and enforce limits
+	 * @param amount
+	 * @param unit
+	 * @protected
+	 */
+	_safelyModifyTimestampBy(amount, unit) {
+		const newDate = modifyDateBy(this._calendarDate, amount, unit);
+		this._safelySetTimestamp(newDate.valueOf() / 1000);
+	}
+
+	_getTimestampFromDom(domNode) {
+		const oMonthDomRef = domNode.getAttribute("data-sap-timestamp");
+		return parseInt(oMonthDomRef);
+	}
+}
+
+export default CalendarPart;