@ui5/webcomponents 0.0.0-de4752078 → 0.0.0-deac3098a

package/src/CalendarDate.js

@@ -8,7 +8,7 @@ const metadata = {
 	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 <code>ui5-date</code>
+		 * The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the component
 		 *
 		 * @type {string}
 		 * @public

package/src/CalendarHeader.hbs

@@ -17,20 +17,29 @@
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			?hidden="{{isMonthButtonHidden}}"
 			tabindex="0"
+			aria-label="{{accInfo.ariaLabelMonthButton}}"
 			@click={{onMonthButtonClick}}
 			@keydown={{onMonthButtonKeyDown}}
+			@keyup={{onMonthButtonKeyUp}}
 		>
-			{{_monthButtonText}}
+			<span>{{_monthButtonText}}</span>
+			{{#if hasSecondaryCalendarType}}
+				<span class="ui5-calheader-btn-sectext">{{_secondMonthButtonText}}</span>
+			{{/if}}
 		</div>
-
 		<div
 			data-ui5-cal-header-btn-year
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+			?hidden="{{isYearButtonHidden}}"
 			tabindex="0"
 			@click={{onYearButtonClick}}
 			@keydown={{onYearButtonKeyDown}}
+			@keyup={{onYearButtonKeyUp}}
 		>
-			{{_yearButtonText}}
+			<span>{{_yearButtonText}}</span>
+			{{#if hasSecondaryCalendarType}}
+				<span class="ui5-calheader-btn-sectext">{{_secondYearButtonText}}</span>
+			{{/if}}
 		</div>
 	</div>
 
@@ -41,5 +50,5 @@
 		title={{_nextButtonText}}
 	>
 		<ui5-icon class="ui5-calheader-arrowicon" name="slim-arrow-right"></ui5-icon>
-    </div>
+	</div>
 </div>

package/src/CalendarHeader.js

@@ -1,11 +1,7 @@
-import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
-import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 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";
@@ -42,6 +38,26 @@ const metadata = {
 			type: CalendarType,
 		},
 
+		/**
+		 * Already normalized by Calendar
+		 * @sience 1.0.0-rc.16
+		 * @defaultvalue undefined
+		 * @type {CalendarType}
+		 * @public
+		 */
+		secondaryCalendarType: {
+			type: CalendarType,
+		},
+
+		/**
+		 * Stores information for month button for secondary calendar type
+		 * @type {Object}
+		 * @private
+		*/
+		buttonTextForSecondaryCalendarType: {
+			type: Object,
+		},
+
 		isNextButtonDisabled: {
 			type: Boolean,
 		},
@@ -53,6 +69,18 @@ const metadata = {
 		isMonthButtonHidden: {
 			type: Boolean,
 		},
+
+		_monthButtonText: {
+			type: String,
+		},
+
+		_yearButtonText: {
+			type: String,
+		},
+
+		isYearButtonHidden: {
+			type: Boolean,
+		},
 	},
 	events: {
 		"previous-press": {},
@@ -84,24 +112,21 @@ class CalendarHeader extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		CalendarHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
-		const localeData = getCachedLocaleDataInstance(getLocale());
-		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
-		const localDate = new Date(this.timestamp * 1000);
-		const calendarDate = CalendarDate.fromTimestamp(localDate.getTime(), this.primaryCalendarType);
+		this._prevButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
+		this._nextButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
 
-		this._monthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[calendarDate.getMonth()];
-		this._yearButtonText = yearFormat.format(localDate, true);
-		this._prevButtonText = this.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
-		this._nextButtonText = this.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
+		if (this.hasSecondaryCalendarType) {
+			this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;
+			this._secondYearButtonText = this.buttonTextForSecondaryCalendarType.yearButtonText;
+		}
 	}
 
 	onPrevButtonClick(event) {
@@ -117,7 +142,17 @@ class CalendarHeader extends UI5Element {
 	}
 
 	onMonthButtonKeyDown(event) {
-		if (isSpace(event) || isEnter(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);
 		}
@@ -128,24 +163,45 @@ class CalendarHeader extends UI5Element {
 	}
 
 	onYearButtonKeyDown(event) {
-		if (isSpace(event) || isEnter(event)) {
+		if (isSpace(event)) {
 			event.preventDefault();
+		}
+
+		if (isEnter(event)) {
 			this.fireEvent("show-year-press", event);
 		}
 	}
 
+	onYearButtonKeyUp(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			this.fireEvent("show-year-press", event);
+		}
+	}
+
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
+	}
+
 	get classes() {
 		return {
 			prevButton: {
 				"ui5-calheader-arrowbtn": true,
-				"ui5-calheader-arrowbtn-disabled": this._isPrevButtonDisabled,
+				"ui5-calheader-arrowbtn-disabled": this.isPrevButtonDisabled,
 			},
 			nextButton: {
 				"ui5-calheader-arrowbtn": true,
-				"ui5-calheader-arrowbtn-disabled": this._isNextButtonDisabled,
+				"ui5-calheader-arrowbtn-disabled": this.isNextButtonDisabled,
 			},
 		};
 	}
+
+	get accInfo() {
+		return {
+			ariaLabelMonthButton: this.hasSecondaryCalendarType
+				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.info}` : `${this._monthButtonText}`,
+		};
+	}
 }
 
 CalendarHeader.define();

package/src/Card.hbs

@@ -1,46 +1,14 @@
 <div
-	class="{{classes.main}}"
+	class="{{classes}}"
 	dir="{{effectiveDir}}"
 	role="region"
-	aria-label="{{ariaLabelText}}"
-	aria-labelledby="{{ariaLabelledByCard}}">
-	{{#if hasHeader}}
-		<div class="{{classes.header}}"
-			@click="{{_headerClick}}"
-			@keydown="{{_headerKeydown}}"
-			@keyup="{{_headerKeyup}}"
-			role="{{ariaHeaderRole}}"
-			aria-labelledby="{{ariaLabelledByHeader}}"
-			aria-level="{{ariaLevel}}"
-			aria-roledescription="{{ariaCardHeaderRoleDescription}}"
-			tabindex="0">
-
-			{{#if hasAvatar}}
-				<div id="{{_id}}-avatar" class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
-					<slot name="avatar"></slot>
-				</div>
-			{{/if}}
-
-			<div class="ui5-card-header-text">
-				{{#if heading}}
-					<div id="{{_id}}-heading" class="ui5-card-heading" part="heading">{{heading}}</div>
-				{{/if}}
-
-				{{#if subheading}}
-					<div id="{{_id}}-subheading" class="ui5-card-subheading" part="subheading">{{subheading}}</div>
-				{{/if}}
-			</div>
-
-			{{#if hasAction}}
-				<slot name="action"></slot>
-			{{else}}
-				<span id="{{_id}}-status" part="status" class="ui5-card-status">{{status}}</span>
-			{{/if}}
+	aria-label="{{_getAriaLabel}}">
+	{{#if _hasHeader}}
+		<div class="ui5-card-header-root">
+			<slot name="header"></slot>
 		</div>
 	{{/if}}
-
-	<section role="group" aria-label="{{ariaCardContentLabel}}">
+	<div role="group" aria-label="{{_ariaCardContentLabel}}">
 		<slot></slot>
-	</section>
-	<span id="{{_id}}-desc" class="ui5-hidden-text">{{ariaCardRoleDescription}}</span>
+	</div>
 </div>

package/src/Card.js

@@ -1,17 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 
 import {
 	ARIA_ROLEDESCRIPTION_CARD,
-	AVATAR_TOOLTIP,
 	ARIA_LABEL_CARD_CONTENT,
-	ARIA_ROLEDESCRIPTION_CARD_HEADER,
-	ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -27,7 +23,7 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
 		/**
-		 * Defines the content of the <code>ui5-card</code>.
+		 * Defines the content of the component.
 		 * @type {HTMLElement[]}
 		 * @slot content
 		 * @public
@@ -38,122 +34,48 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the visual representation in the header of the card.
-		 * Supports images and icons.
+		 * Defines the header of the component.
 		 * <br><br>
-		 * <b>Note:</b>
-		 * SAP-icons font provides numerous options. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <b>Note:</b> Use <code>ui5-card-header</code> for the intended design.
 		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		avatar: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines an action, displayed in the right most part of the header.
-		 * <br><br>
-		 * <b>Note:</b> If set, the <code>status</code> text will not be displayed,
-		 * you can either have <code>action</code>, or <code>status</code>.
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @since 1.0.0-rc.15
+		 * @slot content
 		 * @public
-		 * @since 1.0.0-rc.8
 		 */
-		action: {
+		header: {
 			type: HTMLElement,
 		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
 		/**
-		 * Defines the title displayed in the <code>ui5-card</code> header.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		heading: {
-			type: String,
-		},
-
-		/**
-		 * Defines the subheading displayed in the <code>ui5-card</code> header.
+		 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
+		 * <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
+		 *
+		 *
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
+		 * @since 1.0.0-rc.16
 		 */
-		subheading: {
+		accessibleName: {
 			type: String,
 		},
 
 		/**
-		 * Defines the status displayed in the <code>ui5-card</code> header.
-		 * <br><br>
-		 * <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed,
-		 * you can either have <code>action</code>, or <code>status</code>.
+		 * Defines the IDs of the elements that label the component.
+		 *
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
+		 * @since 1.0.0-rc.16
 		 */
-		status: {
+		accessibleNameRef: {
 			type: String,
 		},
-
-		/**
-		 * Defines if the <code>ui5-card</code> header would be interactive,
-		 * e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		headerInteractive: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the aria-label attribute for the <code>ui5-card</code>
-		 *
-		 * @type {String}
-		 * @since 1.0.0-rc.9
-		 * @private
-		 * @defaultvalue ""
-		 */
-		ariaLabel: {
-			type: String,
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the <code>ui5-card</code>
-		 *
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
-		},
-
-		_headerActive: {
-			type: Boolean,
-			noAttribute: true,
-		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
-		/**
-		 * Fired when the <code>ui5-card</code> header is activated
-		 * by mouse/tap or by using the Enter or Space key.
-		 * <br><br>
-		 * <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
-		 * @event sap.ui.webcomponents.main.Card#header-click
-		 * @public
-		 * @since 0.10.0
-		 */
-		"header-click": {},
 	},
 };
 
@@ -164,15 +86,19 @@ const metadata = {
  * The <code>ui5-card</code> is a component that represents information in the form of a
  * tile with separate header and content areas.
  * The content area of a <code>ui5-card</code> can be arbitrary HTML content.
- * The header can be used through several properties, such as: <code>heading</code>, <code>subheading</code>, <code>status</code>
- * and two slots: <code>avatar</code> and <code>action</code>.
+ * The header can be used through slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and fill.
+ *
+ * Note: We recommend the usage of <code>ui5-card-header</code> for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
+ *
+ * <h3>CSS Shadow Parts</h3>
  *
- * <h3>Keyboard handling</h3>
- * In case you enable <code>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
  *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Card";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents/dist/CardHeader.js";</code> (for <code>ui5-card-header</code>)
  *
  * @constructor
  * @author SAP SE
@@ -180,14 +106,9 @@ const metadata = {
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-card
  * @public
+ * @appenddocs CardHeader
  */
 class Card extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -206,86 +127,23 @@ class Card extends UI5Element {
 
 	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 ariaLevel() {
-		return this.headerInteractive ? undefined : "3";
+	get _hasHeader() {
+		return !!this.header.length;
 	}
 
-	get hasHeader() {
-		return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
+	get _getAriaLabel() {
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
+			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+		return Card.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
-	get ariaCardRoleDescription() {
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
-	}
-
-	get ariaCardHeaderRoleDescription() {
-		return this.headerInteractive ? this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
-	}
-
-	get ariaCardAvatarLabel() {
-		return this.i18nBundle.getText(AVATAR_TOOLTIP);
-	}
-
-	get ariaCardContentLabel() {
-		return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
-	}
-
-	get ariaLabelledByHeader() {
-		const labels = [];
-
-		if (this.subheading) {
-			labels.push(`${this._id}-subheading`);
-		}
-
-		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.heading ? `${this._id}-heading ${this._id}-desc` : `${this._id}-desc`;
-	}
-
-	get hasAvatar() {
-		return !!this.avatar.length;
-	}
-
-	get hasAction() {
-		return !!this.action.length;
+	get _ariaCardContentLabel() {
+		return Card.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
 	}
 
 	static get dependencies() {
@@ -293,47 +151,7 @@ class Card extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
-	}
-
-	_headerClick() {
-		if (this.headerInteractive) {
-			this.fireEvent("header-click");
-		}
-	}
-
-	_headerKeydown(event) {
-		if (!this.headerInteractive) {
-			return;
-		}
-
-		const enter = isEnter(event);
-		const space = 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 = isSpace(event);
-
-		this._headerActive = false;
-
-		if (space) {
-			this.fireEvent("header-click");
-		}
+		Card.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/CardHeader.hbs

@@ -0,0 +1,46 @@
+<div
+	class="{{classes}}"
+	dir="{{effectiveDir}}"
+	@click="{{_headerClick}}"
+	@keydown="{{_headerKeydown}}"
+	@keyup="{{_headerKeyup}}"
+	role="{{ariaHeaderRole}}"
+	aria-labelledby="{{ariaLabelledByHeader}}"
+	aria-level="{{_ariaLevel}}"
+	aria-roledescription="{{ariaCardHeaderRoleDescription}}"
+	tabindex="0"
+	id="{{_id}}--header"
+>
+	{{#if hasAvatar}}
+		<div id="{{_id}}-avatar" class="ui5-card-header-avatar" aria-label="{{ariaCardAvatarLabel}}">
+			<slot name="avatar"></slot>
+		</div>
+	{{/if}}
+
+	<div class="ui5-card-header-text">
+		<div class="ui5-card-header-first-line">
+			{{#if titleText}}
+				<div id="{{_id}}-title" class="ui5-card-header-title" part="title">{{titleText}}</div>
+			{{/if}}
+
+			{{#if status}}
+				<div class="ui5-card-header-status">
+					<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
+				</div>
+			{{/if}}
+
+		</div>
+
+		{{#if subtitleText}}
+			<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</div>
+		{{/if}}
+	</div>
+
+	{{#if hasAction}}
+		<div class="ui5-card-header-action">
+			<slot name="action"></slot>
+		</div>
+	{{/if}}
+
+	</div>
+</div>