@ui5/webcomponents 0.0.0-453158269 → 0.0.0-49cef2d02

package/src/{Calendar.js → Calendar.ts}

@@ -1,3 +1,10 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import fastNavigation from "@ui5/webcomponents-base/dist/decorators/fastNavigation.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import {
@@ -8,11 +15,15 @@ import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/ge
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import * as CalendarDateComponent from "./CalendarDate.js";
+import type CalendarDateComponentT from "./CalendarDate.js";
 import CalendarPart from "./CalendarPart.js";
 import CalendarHeader from "./CalendarHeader.js";
 import DayPicker from "./DayPicker.js";
+import type { DayPickerChangeEventDetail } from "./DayPicker.js";
 import MonthPicker from "./MonthPicker.js";
+import type { MonthPickerChangeEventDetail } from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
+import type { YearPickerChangeEventDetail } from "./YearPicker.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 
 // Default calendar for bundling
@@ -24,107 +35,21 @@ import CalendarTemplate from "./generated/templates/CalendarTemplate.lit.js";
 // Styles
 import calendarCSS from "./generated/themes/Calendar.css.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-calendar",
-	fastNavigation: true,
-	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
-		/**
-		 * Defines the type of selection used in the calendar component.
-		 * Accepted property values are:<br>
-		 * <ul>
-		 * <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li>
-		 * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
-		 * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
-		 * </ul>
-		 * @type {CalendarSelectionMode}
-		 * @defaultvalue "Single"
-		 * @public
-		 */
-		selectionMode: {
-			type: CalendarSelectionMode,
-			defaultValue: CalendarSelectionMode.Single,
-		},
-
-		/**
-		 * Defines the visibility of the week numbers column.
-		 * <br><br>
-		 *
-		 * <b>Note:</b> For calendars other than Gregorian,
-		 * the week numbers are not displayed regardless of what is set.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		hideWeekNumbers: {
-			type: Boolean,
-		},
-
-		/**
-		 * Which picker is currently visible to the user: day/month/year
-		 */
-		_currentPicker: {
-			type: String,
-			defaultValue: "day",
-		},
-
-		_previousButtonDisabled: {
-			type: Boolean,
-		},
-
-		_nextButtonDisabled: {
-			type: Boolean,
-		},
-
-		_headerMonthButtonText: {
-			type: String,
-		},
-
-		_headerYearButtonText: {
-			type: String,
-		},
-	},
-	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
-		/**
-		 * Defines the selected date or dates (depending on the <code>selectionMode</code> property) for this calendar as instances of <code>ui5-date</code>
-		 *
-		 * @type {sap.ui.webcomponents.main.ICalendarDate[]}
-		 * @slot dates
-		 * @public
-		 */
-		"default": {
-			propertyName: "dates",
-			type: HTMLElement,
-			invalidateOnChildChange: true,
-		},
-	},
-	events: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
-		/**
-		 * 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.
-		 *
-		 * @event sap.ui.webcomponents.main.Calendar#selected-dates-change
-		 * @allowPreventDefault
-		 * @param {Array} values The selected dates
-		 * @param {Array} dates The selected dates as UTC timestamps
-		 * @public
-		 */
-		"selected-dates-change": {
-			detail: {
-				dates: { type: Array },
-				values: { type: Array },
-			},
-		},
-
-		"show-month-press": {},
-		"show-year-press": {},
-	},
-};
+interface ICalendarPicker {
+	_showPreviousPage: () => void,
+	_showNextPage: () => void,
+	_hasPreviousPage: () => boolean,
+	_hasNextPage: () => boolean,
+	_autoFocus?: boolean,
+	_firstYear?: number,
+	_lastYear?: number,
+}
+
+type CalendarChangeEventDetail = {
+	values: Array<string>,
+	dates: Array<number>,
+	timestamp: number | undefined,
+}
 
 /**
  * @class
@@ -233,17 +158,102 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Calendar
- * @extends CalendarPart
+ * @alias sap.ui.webc.main.Calendar
+ * @extends sap.ui.webc.main.CalendarPart
  * @tagname ui5-calendar
  * @appenddocs CalendarDate
  * @public
  * @since 1.0.0-rc.11
  */
+@customElement("ui5-calendar")
+@fastNavigation
+/**
+ * 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.
+ *
+ * @event sap.ui.webc.main.Calendar#selected-dates-change
+ * @allowPreventDefault
+ * @param {Array} values The selected dates
+ * @param {Array} dates The selected dates as UTC timestamps
+ * @public
+ */
+@event("selected-dates-change", {
+	detail: {
+		dates: { type: Array },
+		values: { type: Array },
+	},
+})
+
+@event("show-month-press")
+@event("show-year-press")
 class Calendar extends CalendarPart {
-	static get metadata() {
-		return metadata;
-	}
+	/**
+	 * Defines the type of selection used in the calendar component.
+	 * Accepted property values are:<br>
+	 * <ul>
+	 * <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li>
+	 * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
+	 * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
+	 * </ul>
+	 * @type {sap.ui.webc.main.types.CalendarSelectionMode}
+	 * @name sap.ui.webc.main.Calendar.prototype.selectionMode
+	 * @defaultvalue "Single"
+	 * @public
+	 */
+	@property({
+		type: CalendarSelectionMode,
+		defaultValue: CalendarSelectionMode.Single,
+	})
+	selectionMode!: CalendarSelectionMode;
+
+	/**
+	 * Defines the visibility of the week numbers column.
+	 * <br><br>
+	 *
+	 * <b>Note:</b> For calendars other than Gregorian,
+	 * the week numbers are not displayed regardless of what is set.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Calendar.prototype.hideWeekNumbers
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	hideWeekNumbers!: boolean;
+
+	/**
+	 * Which picker is currently visible to the user: day/month/year
+	 */
+	@property({ defaultValue: "day" })
+	_currentPicker!: string;
+
+	@property({ type: Boolean })
+	_previousButtonDisabled!: boolean;
+
+	@property({ type: Boolean })
+	_nextButtonDisabled!: boolean;
+
+	@property()
+	_headerMonthButtonText!: string;
+
+	@property()
+	_headerYearButtonText!: string;
+
+	@property()
+	_headerYearButtonTextSecType!: string;
+
+	/**
+	 * Defines the selected date or dates (depending on the <code>selectionMode</code> property)
+	 * for this calendar as instances of <code>ui5-date</code>.
+	 *
+	 * @type {sap.ui.webc.main.ICalendarDate[]}
+	 * @name sap.ui.webc.main.Calendar.prototype.default
+	 * @slot dates
+	 * @public
+	 */
+	@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+	dates!: Array<CalendarDateComponentT>;
 
 	static get template() {
 		return CalendarTemplate;
@@ -256,17 +266,20 @@ class Calendar extends CalendarPart {
 	/**
 	 * @private
 	 */
-	get _selectedDatesTimestamps() {
+	get _selectedDatesTimestamps(): Array<number> {
 		return this.dates.map(date => {
 			const value = date.value;
-			return value && !!this.getFormat().parse(value) ? this._getTimeStampFromString(value) / 1000 : undefined;
-		}).filter(date => !!date);
+			// <b>Note:</b> Format#parse accepts only boolean type for 2nd and 3rd params,
+			// but has logic related to "undefined" value, so we're calling it with "undefined" and casting to "boolean".
+			const validValue = value && !!this.getFormat().parse(value, undefined as unknown as boolean, undefined as unknown as boolean);
+			return validValue ? this._getTimeStampFromString(value)! / 1000 : undefined;
+		}).filter((date): date is number => !!date);
 	}
 
 	/**
 	 * @private
 	 */
-	_setSelectedDates(selectedDates) {
+	_setSelectedDates(selectedDates: Array<number>) {
 		const selectedValues = selectedDates.map(timestamp => this.getFormat().format(new Date(timestamp * 1000), true)); // Format as UTC
 		const valuesInDOM = [...this.dates].map(dateElement => dateElement.value);
 
@@ -277,7 +290,7 @@ class Calendar extends CalendarPart {
 
 		// 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(CalendarDateComponent.default.getMetadata().getTag());
+			const dateElement = document.createElement(CalendarDateComponent.default.getMetadata().getTag()) as CalendarDateComponentT;
 			dateElement.value = value;
 			this.appendChild(dateElement);
 		});
@@ -295,35 +308,38 @@ class Calendar extends CalendarPart {
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);
 			const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType);
-			rangeStart.setYear(this._currentPickerDOM._firstYear);
-			rangeEnd.setYear(this._currentPickerDOM._lastYear);
+			rangeStart.setYear(this._currentPickerDOM._firstYear!);
+			rangeEnd.setYear(this._currentPickerDOM._lastYear!);
 
 			this._headerYearButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
 		} else {
 			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
 		}
+
+		this.secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
 	}
 
 	/**
 	 * The user clicked the "month" button in the header
 	 */
-	onHeaderShowMonthPress(event) {
+	onHeaderShowMonthPress(e: CustomEvent) {
 		this._currentPickerDOM._autoFocus = false;
 		this._currentPicker = "month";
-		this.fireEvent("show-month-press", event);
+		this.fireEvent("show-month-press", e);
 	}
 
 	/**
 	 * The user clicked the "year" button in the header
 	 */
-	onHeaderShowYearPress(event) {
+	onHeaderShowYearPress(e: CustomEvent) {
 		this._currentPickerDOM._autoFocus = false;
 		this._currentPicker = "year";
-		this.fireEvent("show-year-press", event);
+		this.fireEvent("show-year-press", e);
 	}
 
 	get _currentPickerDOM() {
-		return this.shadowRoot.querySelector(`[ui5-${this._currentPicker}picker]`);
+		// Calendar's shadowRoot and all the pickers are always present - the "!" is safe to be used.
+		return this.shadowRoot!.querySelector(`[ui5-${this._currentPicker}picker]`)! as unknown as ICalendarPicker;
 	}
 
 	/**
@@ -340,6 +356,25 @@ class Calendar extends CalendarPart {
 		this._currentPickerDOM._showNextPage();
 	}
 
+	_setSecondaryCalendarTypeButtonText() {
+		const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+
+		if (this._currentPicker === "year") {
+			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			rangeStart.setYear(this._currentPickerDOM._firstYear!);
+			rangeEnd.setYear(this._currentPickerDOM._lastYear!);
+
+			const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this.secondaryCalendarType, rangeStart.valueOf() / 1000, true)
+				.firstDate;
+			const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this.secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
+				.lastDate;
+			this._headerYearButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
+		} else {
+			this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
+		}
+	}
+
 	get secondaryCalendarTypeButtonText() {
 		if (!this.secondaryCalendarType) {
 			return;
@@ -347,58 +382,17 @@ class Calendar extends CalendarPart {
 
 		const localDate = new Date(this._timestamp * 1000);
 		const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
-		const secondMonthInfo = this._getDisplayedSecondaryMonthText();
+		const dateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, this._timestamp);
+		const secondMonthInfo = convertMonthNumbersToMonthNames(dateInSecType.firstDate.getMonth(), dateInSecType.lastDate.getMonth(), this.secondaryCalendarType);
 		const secondYearText = secondYearFormat.format(localDate, true);
+
 		return {
 			yearButtonText: secondYearText,
 			monthButtonText: secondMonthInfo.text,
-			monthButtonInfo: secondMonthInfo.info,
+			monthButtonInfo: secondMonthInfo.textInfo,
 		};
 	}
 
-	_getDisplayedSecondaryMonthText() {
-		const month = this._getDisplayedSecondaryMonths();
-		const localeData = getCachedLocaleDataInstance(getLocale());
-		const pattern = localeData.getIntervalPattern();
-		const secondaryMonthsNames = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("abbreviated", this.secondaryCalendarType);
-		const secondaryMonthsNamesWide = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("wide", this.secondaryCalendarType);
-
-		if (month.startMonth === month.endMonth) {
-			return {
-				text: localeData.getMonths("abbreviated", this.secondaryCalendarType)[month.startMonth],
-				textInfo: localeData.getMonths("wide", this.secondaryCalendarType)[month.startMonth],
-			};
-		}
-
-		return {
-			text: pattern.replace(/\{0\}/, secondaryMonthsNames[month.startMonth]).replace(/\{1\}/, secondaryMonthsNames[month.endMonth]),
-			textInfo: pattern.replace(/\{0\}/, secondaryMonthsNamesWide[month.startMonth]).replace(/\{1\}/, secondaryMonthsNamesWide[month.endMonth]),
-		};
-	}
-
-	_getDisplayedSecondaryMonths() {
-		const localDate = new Date(this._timestamp * 1000);
-		let firstDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
-		firstDate.setDate(1);
-		firstDate = new CalendarDate(firstDate, this.secondaryCalendarType);
-		const startMonth = firstDate.getMonth();
-
-		let lastDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
-		lastDate.setDate(this._getDaysInMonth(lastDate));
-		lastDate = new CalendarDate(lastDate, this.secondaryCalendarType);
-		const endMonth = lastDate.getMonth();
-
-		return { startMonth, endMonth };
-	}
-
-	_getDaysInMonth(date) {
-		const tempCalendarDate = new CalendarDate(date);
-		tempCalendarDate.setDate(1);
-		tempCalendarDate.setMonth(tempCalendarDate.getMonth() + 1);
-		tempCalendarDate.setDate(0);
-		return tempCalendarDate.getDate();
-	}
-
 	/**
 	 * The month button is hidden when the month picker or year picker is shown
 	 * @returns {boolean}
@@ -420,43 +414,43 @@ class Calendar extends CalendarPart {
 		return this._currentPicker !== "year";
 	}
 
-	onSelectedDatesChange(event) {
-		const timestamp = event.detail.timestamp;
-		const selectedDates = event.detail.dates;
+	onSelectedDatesChange(e: CustomEvent<DayPickerChangeEventDetail>) {
+		const timestamp = e.detail.timestamp;
+		const selectedDates = e.detail.dates;
 		const datesValues = selectedDates.map(ts => {
 			const calendarDate = CalendarDate.fromTimestamp(ts * 1000, this._primaryCalendarType);
 			return this.getFormat().format(calendarDate.toUTCJSDate(), true);
 		});
 
 		this.timestamp = timestamp;
-		const defaultPrevented = !this.fireEvent("selected-dates-change", { timestamp, dates: [...selectedDates], values: datesValues }, true);
+		const defaultPrevented = !this.fireEvent<CalendarChangeEventDetail>("selected-dates-change", { timestamp, dates: [...selectedDates], values: datesValues }, true);
 		if (!defaultPrevented) {
 			this._setSelectedDates(selectedDates);
 		}
 	}
 
-	onSelectedMonthChange(event) {
-		this.timestamp = event.detail.timestamp;
+	onSelectedMonthChange(e: CustomEvent<MonthPickerChangeEventDetail>) {
+		this.timestamp = e.detail.timestamp;
 		this._currentPicker = "day";
 		this._currentPickerDOM._autoFocus = true;
 	}
 
-	onSelectedYearChange(event) {
-		this.timestamp = event.detail.timestamp;
+	onSelectedYearChange(e: CustomEvent<YearPickerChangeEventDetail>) {
+		this.timestamp = e.detail.timestamp;
 		this._currentPicker = "day";
 		this._currentPickerDOM._autoFocus = true;
 	}
 
-	onNavigate(event) {
-		this.timestamp = event.detail.timestamp;
+	onNavigate(e: CustomEvent) {
+		this.timestamp = e.detail.timestamp;
 	}
 
-	_onkeydown(event) {
-		if (isF4(event) && this._currentPicker !== "month") {
+	_onkeydown(e: KeyboardEvent) {
+		if (isF4(e) && this._currentPicker !== "month") {
 			this._currentPicker = "month";
 		}
 
-		if (isF4Shift(event) && this._currentPicker !== "year") {
+		if (isF4Shift(e) && this._currentPicker !== "year") {
 			this._currentPicker = "year";
 		}
 	}
@@ -466,7 +460,7 @@ class Calendar extends CalendarPart {
 	 * @protected
 	 * @deprecated
 	 */
-	get selectedDates() {
+	get selectedDates(): Array<number> {
 		return this._selectedDatesTimestamps;
 	}
 
@@ -474,9 +468,9 @@ class Calendar extends CalendarPart {
 	 * Creates instances of <code>ui5-date</code> inside this <code>ui5-calendar</code> with values, equal to the provided UTC timestamps
 	 * @protected
 	 * @deprecated
-	 * @param selectedDates Array of UTC timestamps
+	 * @param { Array<number> } selectedDates Array of UTC timestamps
 	 */
-	set selectedDates(selectedDates) {
+	set selectedDates(selectedDates: Array<number>) {
 		this._setSelectedDates(selectedDates);
 	}
 
@@ -494,3 +488,7 @@ class Calendar extends CalendarPart {
 Calendar.define();
 
 export default Calendar;
+export type {
+	ICalendarPicker,
+	CalendarChangeEventDetail,
+};

package/src/CalendarDate.ts

@@ -0,0 +1,36 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+ * @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.webc.main.CalendarDate
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-date
+ * @implements sap.ui.webc.main.ICalendarDate
+ * @public
+ */
+@customElement("ui5-date")
+class CalendarDate extends UI5Element {
+	/**
+	 * The date formatted according to the <code>formatPattern</code> property
+	 * of the <code>ui5-calendar</code> that hosts the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.CalendarDate.prototype.value
+	 * @public
+	 */
+	@property()
+	value!: string;
+}
+
+CalendarDate.define();
+
+export default CalendarDate;

package/src/CalendarHeader.hbs

@@ -2,6 +2,7 @@
 	<div
 		data-ui5-cal-header-btn-prev
 		class="{{classes.prevButton}}"
+		role="button"
 		@mousedown={{onPrevButtonClick}}
 		title="{{_prevButtonText}}"
 	>
@@ -14,6 +15,7 @@
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			?hidden="{{isMonthButtonHidden}}"
 			tabindex="0"
+			role="button"
 			aria-label="{{accInfo.ariaLabelMonthButton}}"
 			@click={{onMonthButtonClick}}
 			@keydown={{onMonthButtonKeyDown}}
@@ -29,13 +31,14 @@
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			?hidden="{{isYearButtonHidden}}"
 			tabindex="0"
+			role="button"
 			@click={{onYearButtonClick}}
 			@keydown={{onYearButtonKeyDown}}
 			@keyup={{onYearButtonKeyUp}}
 		>
 			<span>{{_yearButtonText}}</span>
 			{{#if hasSecondaryCalendarType}}
-				<span class="ui5-calheader-btn-sectext">{{_secondYearButtonText}}</span>
+				<span class="ui5-calheader-btn-sectext">{{_yearButtonTextSecType}}</span>
 			{{/if}}
 		</div>
 	</div>
@@ -43,6 +46,7 @@
 	<div
 		data-ui5-cal-header-btn-next
 		class="{{classes.nextButton}}"
+		role="button"
 		@mousedown={{onNextButtonClick}}
 		title={{_nextButtonText}}
 	>