@openui5/sap.ui.webc.main 1.94.0 → 1.97.0

package/src/sap/ui/webc/main/thirdparty/CalendarHeader.js

@@ -1,11 +1,7 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate', 'sap/ui/webc/common/thirdparty/base/locale/getLocale', 'sap/ui/webc/common/thirdparty/localization/DateFormat', 'sap/ui/webc/common/thirdparty/localization/getCachedLocaleDataInstance', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/types/CalendarType', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-left', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-right', './Icon', './generated/templates/CalendarHeaderTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/CalendarHeader.css'], function (CalendarDate, getLocale, DateFormat, getCachedLocaleDataInstance, UI5Element, litRender, Keys, i18nBundle, Integer, CalendarType, slimArrowLeft, slimArrowRight, Icon, CalendarHeaderTemplate_lit, i18nDefaults, CalendarHeader_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/types/CalendarType', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-left', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-right', './Icon', './generated/templates/CalendarHeaderTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/CalendarHeader.css'], function (UI5Element, litRender, Keys, i18nBundle, Integer, CalendarType, slimArrowLeft, slimArrowRight, Icon, CalendarHeaderTemplate_lit, i18nDefaults, CalendarHeader_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
-	var CalendarDate__default = /*#__PURE__*/_interopDefaultLegacy(CalendarDate);
-	var getLocale__default = /*#__PURE__*/_interopDefaultLegacy(getLocale);
-	var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
-	var getCachedLocaleDataInstance__default = /*#__PURE__*/_interopDefaultLegacy(getCachedLocaleDataInstance);
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
 	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
@@ -21,6 +17,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			primaryCalendarType: {
 				type: CalendarType__default,
 			},
+			secondaryCalendarType: {
+				type: CalendarType__default,
+			},
+			buttonTextForSecondaryCalendarType: {
+				type: Object,
+			},
 			isNextButtonDisabled: {
 				type: Boolean,
 			},
@@ -30,6 +32,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			isMonthButtonHidden: {
 				type: Boolean,
 			},
+			_monthButtonText: {
+				type: String,
+			},
+			_yearButtonText: {
+				type: String,
+			},
+			isYearButtonHidden: {
+				type: Boolean,
+			},
 		},
 		events: {
 			"previous-press": {},
@@ -55,21 +66,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			return [Icon];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			CalendarHeader.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		onBeforeRendering() {
-			const localeData = getCachedLocaleDataInstance__default(getLocale__default());
-			const yearFormat = DateFormat__default.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
-			const localDate = new Date(this.timestamp * 1000);
-			const calendarDate = CalendarDate__default.fromTimestamp(localDate.getTime(), this.primaryCalendarType);
-			this._monthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[calendarDate.getMonth()];
-			this._yearButtonText = yearFormat.format(localDate, true);
-			this._prevButtonText = this.i18nBundle.getText(i18nDefaults.CALENDAR_HEADER_PREVIOUS_BUTTON);
-			this._nextButtonText = this.i18nBundle.getText(i18nDefaults.CALENDAR_HEADER_NEXT_BUTTON);
+			this._prevButtonText = CalendarHeader.i18nBundle.getText(i18nDefaults.CALENDAR_HEADER_PREVIOUS_BUTTON);
+			this._nextButtonText = CalendarHeader.i18nBundle.getText(i18nDefaults.CALENDAR_HEADER_NEXT_BUTTON);
+			if (this.hasSecondaryCalendarType) {
+				this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;
+				this._secondYearButtonText = this.buttonTextForSecondaryCalendarType.yearButtonText;
+			}
 		}
 		onPrevButtonClick(event) {
 			this.fireEvent("previous-press", event);
@@ -81,7 +89,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			this.fireEvent("show-month-press", event);
 		}
 		onMonthButtonKeyDown(event) {
-			if (Keys.isSpace(event) || Keys.isEnter(event)) {
+			if (Keys.isSpace(event)) {
+				event.preventDefault();
+			}
+			if (Keys.isEnter(event)) {
+				this.fireEvent("show-month-press", event);
+			}
+		}
+		onMonthButtonKeyUp(event) {
+			if (Keys.isSpace(event)) {
 				event.preventDefault();
 				this.fireEvent("show-month-press", event);
 			}
@@ -90,11 +106,22 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			this.fireEvent("show-year-press", event);
 		}
 		onYearButtonKeyDown(event) {
-			if (Keys.isSpace(event) || Keys.isEnter(event)) {
+			if (Keys.isSpace(event)) {
 				event.preventDefault();
+			}
+			if (Keys.isEnter(event)) {
 				this.fireEvent("show-year-press", event);
 			}
 		}
+		onYearButtonKeyUp(event) {
+			if (Keys.isSpace(event)) {
+				event.preventDefault();
+				this.fireEvent("show-year-press", event);
+			}
+		}
+		get hasSecondaryCalendarType() {
+			return !!this.secondaryCalendarType;
+		}
 		get classes() {
 			return {
 				prevButton: {
@@ -107,6 +134,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 				},
 			};
 		}
+		get accInfo() {
+			return {
+				ariaLabelMonthButton: this.hasSecondaryCalendarType
+					? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.info}` : `${this._monthButtonText}`,
+			};
+		}
 	}
 	CalendarHeader.define();
 

package/src/sap/ui/webc/main/thirdparty/Card.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/Keys', './generated/templates/CardTemplate.lit', './Icon', './generated/i18n/i18n-defaults', './generated/themes/Card.css'], function (UI5Element, litRender, i18nBundle, AriaLabelHelper, Keys, CardTemplate_lit, Icon, i18nDefaults, Card_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', './generated/templates/CardTemplate.lit', './Icon', './generated/i18n/i18n-defaults', './generated/themes/Card.css'], function (UI5Element, litRender, i18nBundle, AriaLabelHelper, CardTemplate_lit, Icon, i18nDefaults, Card_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -14,47 +14,22 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				propertyName: "content",
 				type: HTMLElement,
 			},
-			avatar: {
-				type: HTMLElement,
-			},
-			action: {
+			header: {
 				type: HTMLElement,
 			},
 		},
 		properties:  {
-			titleText: {
-				type: String,
-			},
-			subtitleText: {
+			accessibleName: {
 				type: String,
 			},
-			status: {
-				type: String,
-			},
-			headerInteractive: {
-				type: Boolean,
-			},
-			ariaLabel: {
+			accessibleNameRef: {
 				type: String,
 			},
-			ariaLabelledby: {
-				type: String,
-				defaultValue: "",
-			},
-			_headerActive: {
-				type: Boolean,
-				noAttribute: true,
-			},
 		},
 		events:  {
-			"header-click": {},
 		},
 	};
 	class Card extends UI5Element__default {
-		constructor() {
-			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
-		}
 		static get metadata() {
 			return metadata;
 		}
@@ -69,104 +44,26 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get classes() {
 			return {
-				main: {
-					"ui5-card-root": true,
-					"ui5-card--nocontent": !this.content.length,
-				},
-				header: {
-					"ui5-card-header": true,
-					"ui5-card-header--interactive": this.headerInteractive,
-					"ui5-card-header--active": this.headerInteractive && this._headerActive,
-				},
+				"ui5-card-root": true,
+				"ui5-card--nocontent": !this.content.length,
 			};
 		}
-		get icon() {
-			return !!this.avatar && this.avatar.startsWith("sap-icon://");
-		}
-		get image() {
-			return !!this.avatar && !this.icon;
-		}
-		get ariaHeaderRole() {
-			return this.headerInteractive ? "button" : "heading";
+		get _hasHeader() {
+			return !!this.header.length;
 		}
-		get ariaLevel() {
-			return this.headerInteractive ? undefined : "3";
+		get _getAriaLabel() {
+			const effectiveAriaLabelText = AriaLabelHelper.getEffectiveAriaLabelText(this),
+				effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+			return Card.i18nBundle.getText(i18nDefaults.ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 		}
-		get hasHeader() {
-			return !!(this.titleText || this.subtitleText || this.status || this.hasAction || this.avatar);
-		}
-		get ariaLabelText() {
-			return AriaLabelHelper.getEffectiveAriaLabelText(this);
-		}
-		get ariaCardRoleDescription() {
-			return this.i18nBundle.getText(i18nDefaults.ARIA_ROLEDESCRIPTION_CARD);
-		}
-		get ariaCardHeaderRoleDescription() {
-			return this.headerInteractive ? this.i18nBundle.getText(i18nDefaults.ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(i18nDefaults.ARIA_ROLEDESCRIPTION_CARD_HEADER);
-		}
-		get ariaCardAvatarLabel() {
-			return this.i18nBundle.getText(i18nDefaults.AVATAR_TOOLTIP);
-		}
-		get ariaCardContentLabel() {
-			return this.i18nBundle.getText(i18nDefaults.ARIA_LABEL_CARD_CONTENT);
-		}
-		get ariaLabelledByHeader() {
-			const labels = [];
-			if (this.subtitleText) {
-				labels.push(`${this._id}-subtitle`);
-			}
-			if (this.status) {
-				labels.push(`${this._id}-status`);
-			}
-			if (this.hasAvatar) {
-				labels.push(`${this._id}-avatar`);
-			}
-			return labels.length !== 0 ? labels.join(" ") : undefined;
-		}
-		get ariaLabelledByCard() {
-			return this.titleText ? `${this._id}-title ${this._id}-desc` : `${this._id}-desc`;
-		}
-		get hasAvatar() {
-			return !!this.avatar.length;
-		}
-		get hasAction() {
-			return !!this.action.length;
+		get _ariaCardContentLabel() {
+			return Card.i18nBundle.getText(i18nDefaults.ARIA_LABEL_CARD_CONTENT);
 		}
 		static get dependencies() {
 			return [Icon];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
-		}
-		_headerClick() {
-			if (this.headerInteractive) {
-				this.fireEvent("header-click");
-			}
-		}
-		_headerKeydown(event) {
-			if (!this.headerInteractive) {
-				return;
-			}
-			const enter = Keys.isEnter(event);
-			const space = Keys.isSpace(event);
-			this._headerActive = enter || space;
-			if (enter) {
-				this.fireEvent("header-click");
-				return;
-			}
-			if (space) {
-				event.preventDefault();
-			}
-		}
-		_headerKeyup(event) {
-			if (!this.headerInteractive) {
-				return;
-			}
-			const space = Keys.isSpace(event);
-			this._headerActive = false;
-			if (space) {
-				this.fireEvent("header-click");
-			}
+			Card.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	Card.define();

package/src/sap/ui/webc/main/thirdparty/CardHeader.js

@@ -0,0 +1,146 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/Integer', './generated/templates/CardHeaderTemplate.lit', './Icon', './generated/i18n/i18n-defaults', './generated/themes/CardHeader.css'], function (UI5Element, litRender, i18nBundle, Keys, Integer, CardHeaderTemplate_lit, Icon, i18nDefaults, CardHeader_css) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
+
+	const metadata = {
+		tag: "ui5-card-header",
+		languageAware: true,
+		managedSlots: true,
+		slots:  {
+			avatar: {
+				type: HTMLElement,
+			},
+			action: {
+				type: HTMLElement,
+			},
+		},
+		properties:  {
+			titleText: {
+				type: String,
+			},
+			subtitleText: {
+				type: String,
+			},
+			status: {
+				type: String,
+			},
+			interactive: {
+				type: Boolean,
+			},
+			ariaLevel: {
+				type: Integer__default,
+				defaultValue: 3,
+			},
+			_headerActive: {
+				type: Boolean,
+				noAttribute: true,
+			},
+		},
+		events:  {
+			"click": {},
+		},
+	};
+	class CardHeader extends UI5Element__default {
+		static get metadata() {
+			return metadata;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get template() {
+			return CardHeaderTemplate_lit;
+		}
+		static get styles() {
+			return CardHeader_css;
+		}
+		get classes() {
+			return {
+				"ui5-card-header": true,
+				"ui5-card-header--interactive": this.interactive,
+				"ui5-card-header--active": this.interactive && this._headerActive,
+			};
+		}
+		get ariaHeaderRole() {
+			return this.interactive ? "button" : "heading";
+		}
+		get _ariaLevel() {
+			if (this.interactive) {
+				return undefined;
+			}
+			return this.ariaLevel;
+		}
+		get ariaCardHeaderRoleDescription() {
+			return this.interactive ? CardHeader.i18nBundle.getText(i18nDefaults.ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(i18nDefaults.ARIA_ROLEDESCRIPTION_CARD_HEADER);
+		}
+		get ariaCardAvatarLabel() {
+			return CardHeader.i18nBundle.getText(i18nDefaults.AVATAR_TOOLTIP);
+		}
+		get ariaLabelledByHeader() {
+			const labels = [];
+			if (this.titleText) {
+				labels.push(`${this._id}-title`);
+			}
+			if (this.subtitleText) {
+				labels.push(`${this._id}-subtitle`);
+			}
+			if (this.status) {
+				labels.push(`${this._id}-status`);
+			}
+			if (this.hasAvatar) {
+				labels.push(`${this._id}-avatar`);
+			}
+			return labels.length !== 0 ? labels.join(" ") : undefined;
+		}
+		get hasAvatar() {
+			return !!this.avatar.length;
+		}
+		get hasAction() {
+			return !!this.action.length;
+		}
+		static get dependencies() {
+			return [Icon];
+		}
+		static async onDefine() {
+			CardHeader.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
+		}
+		_headerClick(event) {
+			event.stopImmediatePropagation();
+			if (this.interactive) {
+				this.fireEvent("click");
+			}
+		}
+		_headerKeydown(event) {
+			if (!this.interactive) {
+				return;
+			}
+			const enter = Keys.isEnter(event);
+			const space = Keys.isSpace(event);
+			this._headerActive = enter || space;
+			if (enter) {
+				this.fireEvent("click");
+				return;
+			}
+			if (space) {
+				event.preventDefault();
+			}
+		}
+		_headerKeyup(event) {
+			if (!this.interactive) {
+				return;
+			}
+			const space = Keys.isSpace(event);
+			this._headerActive = false;
+			if (space) {
+				this.fireEvent("click");
+			}
+		}
+	}
+	CardHeader.define();
+
+	return CardHeader;
+
+});