@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/dist/ProductSwitch.js

@@ -1,10 +1,22 @@
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import {
+	isDown,
+	isUp,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+
 import ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.lit.js";
 
+import {
+	PRODUCT_SWITCH_CONTAINER_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
+
 // Styles
 import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
 
@@ -27,8 +39,8 @@ const metadata = {
 		/**
 		 * Defines the items of the <code>ui5-product-switch</code>.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.fiori.IProductSwitchItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
@@ -45,6 +57,20 @@ const metadata = {
  * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>
  * and allows the user to easily switch between products.
  * <br><br>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>
+ * <li>[UP/DOWN] - Navigates up and down the items </li>
+ * <li>[LEFT/RIGHT] - Navigates left and right the items</li>
+ * </ul>
+ * <br>
+ * <br>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
  * <br>
@@ -62,12 +88,13 @@ class ProductSwitch extends UI5Element {
 	constructor() {
 		super();
 
-		this.initItemNavigation();
-	}
+		this._currentIndex = 0;
+		this._rowSize = 4;
 
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this, { rowSize: 4 });
-		this._itemNavigation.getItemsCallback = () => this.items;
+		this._itemNavigation = new ItemNavigation(this, {
+			rowSize: this._rowSize,
+			getItemsCallback: () => this.items,
+		});
 	}
 
 	static get metadata() {
@@ -93,6 +120,14 @@ class ProductSwitch extends UI5Element {
 		};
 	}
 
+	static async onDefine() {
+		ProductSwitch.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
+
+	get _ariaLabelText() {
+		return ProductSwitch.i18nBundle.getText(PRODUCT_SWITCH_CONTAINER_LABEL);
+	}
+
 	onEnterDOM() {
 		this._handleResizeBound = this._handleResize.bind(this);
 
@@ -111,18 +146,50 @@ class ProductSwitch extends UI5Element {
 		const documentWidth = document.body.clientWidth;
 
 		if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
-			this._itemNavigation.rowSize = 1;
+			this._setRowSize(1);
 		} else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
-			this._itemNavigation.rowSize = 3;
+			this._setRowSize(3);
 		} else {
-			this._itemNavigation.rowSize = 4;
+			this._setRowSize(4);
 		}
 	}
 
+	handleProductSwitchItemClick(event) {
+		this.items.forEach(item => { item.selected = false; });
+		event.target.selected = true;
+	}
+
 	_onfocusin(event) {
 		const target = event.target;
 
-		this._itemNavigation.update(target);
+		this._itemNavigation.setCurrentItem(target);
+		this._currentIndex = this.items.indexOf(target);
+	}
+
+	_setRowSize(size) {
+		this._rowSize = size;
+		this._itemNavigation.setRowSize(size);
+	}
+
+	_onkeydown(event) {
+		if (isDown(event)) {
+			this._handleDown(event);
+		} else if (isUp(event)) {
+			this._handleUp(event);
+		}
+	}
+
+	_handleDown(event) {
+		const itemsLength = this.items.length;
+		if (this._currentIndex + this._rowSize > itemsLength) { // border reached, do nothing
+			event.stopPropagation();
+		}
+	}
+
+	_handleUp(event) {
+		if (this._currentIndex - this._rowSize < 0) { // border reached, do nothing
+			event.stopPropagation();
+		}
 	}
 }
 

package/dist/ProductSwitchItem.js

@@ -1,6 +1,6 @@
 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 { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 
 import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTemplate.lit.js";
@@ -14,27 +14,29 @@ const metadata = {
 	tag: "ui5-product-switch-item",
 	properties: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
 		/**
-		  * Defines the title of the <code>ui5-product-switch-item</code>.
+		  * Defines the title of the component.
 		  * @type {string}
 		  * @defaultvalue ""
+		  * @since 1.0.0-rc.15
 		  * @public
 		  */
-		heading: {
+		titleText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the subtitle of the <code>ui5-product-switch-item</code>.
+		 * Defines the subtitle of the component.
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @since 1.0.0-rc.15
 		 * @public
 		 */
-		subtitle: {
+		 subtitleText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the icon to be displayed as a graphical element within the <code>ui5-product-switch-item</code>.
+		 * Defines the icon to be displayed as a graphical element within the component.
 		 * <br><br>
 		 * Example:
 		 * <br>
@@ -72,7 +74,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-product-switch-item</code> target URI. Supports standard hyperlink behavior.
+		 * Defines the component target URI. Supports standard hyperlink behavior.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -82,7 +84,7 @@ const metadata = {
 		},
 
 		/**
-		 * Used to switch the active state (pressed or not) of the <code>ui5-product-switch-item</code>.
+		 * Used to switch the active state (pressed or not) of the component.
 		 * @private
 		 */
 		active: {
@@ -97,6 +99,14 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Used to set the selected state of the component. Only one selected in a sequence.
+		 * @private
+		 */
+		selected: {
+			type: Boolean,
+		},
+
 		_tabIndex: {
 			type: String,
 			defaultValue: "-1",
@@ -126,6 +136,16 @@ const metadata = {
  * <br><br>
  * <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>.
  * <br><br>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * <ul>
+ * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>
  *
@@ -135,6 +155,7 @@ const metadata = {
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-product-switch-item
  * @public
+ * @implements sap.ui.webcomponents.fiori.IProductSwitchItem
  * @since 1.0.0-rc.5
  */
 class ProductSwitchItem extends UI5Element {
@@ -196,6 +217,9 @@ class ProductSwitchItem extends UI5Element {
 		}
 
 		if (isSpace(event)) {
+			if (isSpaceShift(event)) {
+				event.stopPropagation();
+			}
 			this._fireItemClick();
 		}
 	}