@ui5/webcomponents 0.0.0-6ef02a35f → 0.0.0-7e7d9ea6f

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,22 @@ const metadata = {
 		isMonthButtonHidden: {
 			type: Boolean,
 		},
+
+		_monthButtonText: {
+			type: String,
+		},
+
+		_yearButtonText: {
+			type: String,
+		},
+
+		_yearButtonTextSecType: {
+			type: String,
+		},
+
+		isYearButtonHidden: {
+			type: Boolean,
+		},
 	},
 	events: {
 		"previous-press": {},
@@ -84,24 +116,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) {
@@ -154,6 +183,10 @@ class CalendarHeader extends UI5Element {
 		}
 	}
 
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
+	}
+
 	get classes() {
 		return {
 			prevButton: {
@@ -166,6 +199,13 @@ class CalendarHeader extends UI5Element {
 			},
 		};
 	}
+
+	get accInfo() {
+		return {
+			ariaLabelMonthButton: this.hasSecondaryCalendarType
+				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.monthButtonInfo}` : `${this._monthButtonText}`,
+		};
+	}
 }
 
 CalendarHeader.define();

package/src/CalendarPart.js

@@ -8,7 +8,7 @@ import DateComponentBase from "./DateComponentBase.js";
  * @public
  */
 const metadata = {
-	properties: /** @lends  sap.ui.webcomponents.main.CalendarPart.prototype */ {
+	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.

package/src/Card.hbs

@@ -1,15 +1,13 @@
 <div
 	class="{{classes}}"
-	dir="{{effectiveDir}}"
 	role="region"
-	aria-labelledby="{{ariaLabelledByCard}}">
-	{{#if hasHeader}}
+	aria-label="{{_getAriaLabel}}">
+	{{#if _hasHeader}}
 		<div class="ui5-card-header-root">
 			<slot name="header"></slot>
 		</div>
 	{{/if}}
-	<div role="group" aria-label="{{ariaCardContentLabel}}">
+	<div role="group" aria-label="{{_ariaCardContentLabel}}">
 		<slot></slot>
 	</div>
-	<span id="{{_id}}-desc" class="ui5-hidden-text">{{ariaCardRoleDescription}}</span>
 </div>

package/src/Card.js

@@ -1,6 +1,7 @@
 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 CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 
@@ -37,7 +38,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-card-header</code> for the intended design.
 		 * @type {HTMLElement[]}
-         * @since 1.0.0-rc.15
+		 * @since 1.0.0-rc.15
 		 * @slot content
 		 * @public
 		 */
@@ -47,6 +48,31 @@ const metadata = {
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
+		/**
+		 * 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
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleNameRef: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -80,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;
 	}
@@ -111,26 +132,18 @@ class Card extends UI5Element {
 		};
 	}
 
-	get hasHeader() {
+	get _hasHeader() {
 		return !!this.header.length;
 	}
 
-	get ariaCardRoleDescription() {
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
-	}
-
-	get ariaCardContentLabel() {
-		return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
+	get _getAriaLabel() {
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
+			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+		return Card.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
-	get ariaLabelledByCard() {
-		let labels;
-		if (this.hasHeader) {
-			labels = this.header[0].hasAttribute("title-text") ? `${this._id}--header-title ${this._id}-desc` : `${this._id}-desc`;
-		} else {
-			labels = `${this._id}-desc`;
-		}
-		return labels;
+	get _ariaCardContentLabel() {
+		return Card.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
 	}
 
 	static get dependencies() {
@@ -138,7 +151,7 @@ class Card extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Card.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/CardHeader.hbs

@@ -1,34 +1,60 @@
 <div
-	class="{{classes}}"
-	@click="{{_headerClick}}"
-	@keydown="{{_headerKeydown}}"
-	@keyup="{{_headerKeyup}}"
-	role="{{ariaHeaderRole}}"
-	aria-labelledby="{{ariaLabelledByHeader}}"
-	aria-level="{{ariaLevel}}"
-	aria-roledescription="{{ariaCardHeaderRoleDescription}}"
-	tabindex="0"
 	id="{{_id}}--header"
+	class="{{classes}}"
+	role="group"
+	aria-roledescription="{{ariaRoleDescription}}"
+	@click="{{_click}}"
+	@keydown="{{_keydown}}"
+	@keyup="{{_keyup}}"
 >
-	{{#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">
-		{{#if titleText}}
-			<div id="{{_id}}-title" class="ui5-card-header-title" part="title">{{titleText}}</div>
+	<div
+		class="ui5-card-header-focusable-element"
+		aria-labelledby="{{ariaLabelledBy}}"
+		role="{{ariaRoleFocusableElement}}"
+		data-sap-focus-ref
+		tabindex="0"
+	>
+		{{#if hasAvatar}}
+			<div id="{{_id}}-avatar" class="ui5-card-header-avatar" aria-label="{{ariaCardAvatarLabel}}">
+				<slot name="avatar"></slot>
+			</div>
 		{{/if}}
 
-		{{#if subtitleText}}
-			<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</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"
+						role="heading"
+						aria-level="3"
+					>{{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>
 	</div>
 
 	{{#if hasAction}}
-		<slot name="action"></slot>
-	{{else}}
-		<span id="{{_id}}-status" part="status" class="ui5-card-header-status">{{status}}</span>
+		<div
+			class="ui5-card-header-action"
+			@focusin="{{_actionsFocusin}}"
+			@focusout="{{_actionsFocusout}}"
+		>
+			<slot name="action"></slot>
+		</div>
 	{{/if}}
-</div>
+
+	</div>
+</div>

package/src/CardHeader.js

@@ -1,9 +1,9 @@
 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 { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
-import Icon from "./Icon.js";
 
 import {
 	AVATAR_TOOLTIP,
@@ -35,9 +35,6 @@ const metadata = {
 
 		/**
 		 * 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
 		 * @public
@@ -70,9 +67,6 @@ const metadata = {
 
 		/**
 		 * Defines the status text.
-		 * <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>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -92,6 +86,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Define the <code>aria-level</code> attribute of the component
+		 * <b>Note: </b> If the interactive property is set, <code>aria-level</code> attribute is not rendered at all.
+		 * @private
+		 * @type {Integer}
+		 * @defaultValue 3
+		 */
+		ariaLevel: {
+			type: Integer,
+			defaultValue: 3,
+		},
+
 		_headerActive: {
 			type: Boolean,
 			noAttribute: true,
@@ -141,17 +147,10 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.CardHeader
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-card-header
- * @appenddocs CardHeader
  * @public
  * @since 1.0.0-rc.15
  */
 class CardHeader extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -176,25 +175,29 @@ class CardHeader extends UI5Element {
 		};
 	}
 
-	get ariaHeaderRole() {
-		return this.interactive ? "button" : "heading";
+	get _root() {
+		return this.shadowRoot.querySelector(".ui5-card-header");
 	}
 
-	get ariaLevel() {
-		return this.interactive ? undefined : "3";
+	get ariaRoleDescription() {
+		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
 	}
 
-	get ariaCardHeaderRoleDescription() {
-		return this.interactive ? this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
+	get ariaRoleFocusableElement() {
+		return this.interactive ? "button" : null;
 	}
 
 	get ariaCardAvatarLabel() {
-		return this.i18nBundle.getText(AVATAR_TOOLTIP);
+		return CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);
 	}
 
-	get ariaLabelledByHeader() {
+	get ariaLabelledBy() {
 		const labels = [];
 
+		if (this.titleText) {
+			labels.push(`${this._id}-title`);
+		}
+
 		if (this.subtitleText) {
 			labels.push(`${this._id}-subtitle`);
 		}
@@ -218,22 +221,29 @@ class CardHeader extends UI5Element {
 		return !!this.action.length;
 	}
 
-	static get dependencies() {
-		return [Icon];
+	static async onDefine() {
+		CardHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	_actionsFocusin() {
+		this._root.classList.add("ui5-card-header-hide-focus");
 	}
 
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+	_actionsFocusout() {
+		this._root.classList.remove("ui5-card-header-hide-focus");
 	}
 
-	_headerClick() {
-		if (this.interactive) {
+	_click(event) {
+		// prevents the native browser "click" event from firing
+		event.stopImmediatePropagation();
+
+		if (this.interactive && this._root.contains(event.target)) {
 			this.fireEvent("click");
 		}
 	}
 
-	_headerKeydown(event) {
-		if (!this.interactive) {
+	_keydown(event) {
+		if (!this.interactive || !this._root.contains(event.target)) {
 			return;
 		}
 
@@ -252,8 +262,8 @@ class CardHeader extends UI5Element {
 		}
 	}
 
-	_headerKeyup(event) {
-		if (!this.interactive) {
+	_keyup(event) {
+		if (!this.interactive || !this._root.contains(event.target)) {
 			return;
 		}
 

package/src/Carousel.hbs

@@ -3,6 +3,7 @@
     tabindex="0"
     role="listbox"
     aria-activedescendant="{{ariaActiveDescendant}}"
+    @focusin="{{_onfocusin}}"
     @keydown={{_onkeydown}}
     @mouseout="{{_onmouseout}}"
     @mouseover="{{_onmouseover}}"
@@ -12,10 +13,11 @@
             {{#each items}}
                  <div id="{{id}}"
                     class="ui5-carousel-item {{classes}}"
-                    style="width: {{this.width}}px;"
+                    style="{{styles}}"
                     role="option"
                     aria-posinset="{{posinset}}"
                     aria-setsize="{{setsize}}"
+                    part="item"
                 >
                     <slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>
                 </div>
@@ -64,21 +66,21 @@
 {{#*inline "arrow-back"}}
 	<ui5-button
         arrow-back
-        title="{{previousPageText}}"
+        tooltip="{{previousPageText}}"
         class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
         icon="slim-arrow-left"
         tabindex="-1"
-        @click={{navigateLeft}}
+        @click={{_navButtonClick}}
     ></ui5-button>
 {{/inline}}
 
 {{#*inline "arrow-forward"}}
     <ui5-button
         arrow-forward
-        title="{{nextPageText}}"
+        tooltip="{{nextPageText}}"
         class="ui5-carousel-navigation-button {{classes.navNextButton}}"
         icon="slim-arrow-right"
         tabindex="-1"
-        @click={{navigateRight}}
+        @click={{_navButtonClick}}
     ></ui5-button>
 {{/inline}}