@ui5/webcomponents-fiori 1.9.3 → 1.10.1

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

@@ -1,7 +1,11 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 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 property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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";
@@ -15,40 +19,12 @@ import ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.l
 
 import {
 	PRODUCT_SWITCH_CONTAINER_LABEL,
+	// @ts-ignore
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-product-switch",
-	properties: /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */ {
-		/**
-		 * Indicates how many columns are displayed.
-		 * @private
-		 */
-		desktopColumns: {
-			type: Integer,
-		},
-	},
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */ {
-		/**
-		 * Defines the items of the <code>ui5-product-switch</code>.
-		 *
-		 * @type {sap.ui.webcomponents.fiori.IProductSwitchItem[]}
-		 * @slot items
-		 * @public
-		 */
-		"default": {
-			propertyName: "items",
-			type: HTMLElement,
-		},
-	},
-};
+import type ProductSwitchItem from "./ProductSwitchItem.js";
 
 /**
  * @class
@@ -77,13 +53,14 @@ const metadata = {
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ProductSwitch
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ProductSwitch
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-product-switch
- * @appenddocs ProductSwitchItem
+ * @appenddocs sap.ui.webc.fiori.ProductSwitchItem
  * @public
  * @since 1.0.0-rc.5
  */
+@customElement("ui5-product-switch")
 class ProductSwitch extends UI5Element {
 	constructor() {
 		super();
@@ -95,12 +72,35 @@ class ProductSwitch extends UI5Element {
 			rowSize: this._rowSize,
 			getItemsCallback: () => this.items,
 		});
-	}
 
-	static get metadata() {
-		return metadata;
+		this._handleResizeBound = this._handleResize.bind(this);
 	}
 
+	/**
+	 * Indicates how many columns are displayed.
+	 * @private
+	 */
+	@property({ validator: Integer })
+	desktopColumns?: number;
+
+	/**
+	 * Defines the items of the <code>ui5-product-switch</code>.
+	 *
+	 * @type {sap.ui.webc.fiori.IProductSwitchItem[]}
+	 * @name sap.ui.webc.fiori.ProductSwitch.prototype.default
+	 * @slot items
+	 * @public
+	 */
+	@slot({ type: HTMLElement, "default": true })
+	items!: Array<ProductSwitchItem>
+
+	_itemNavigation: ItemNavigation;
+	_currentIndex: number;
+	_rowSize: number;
+	_handleResizeBound: () => void;
+
+	static i18nBundle: I18nBundle;
+
 	static get render() {
 		return litRender;
 	}
@@ -125,12 +125,10 @@ class ProductSwitch extends UI5Element {
 	}
 
 	get _ariaLabelText() {
-		return ProductSwitch.i18nBundle.getText(PRODUCT_SWITCH_CONTAINER_LABEL);
+		return ProductSwitch.i18nBundle.getText(PRODUCT_SWITCH_CONTAINER_LABEL as I18nText);
 	}
 
 	onEnterDOM() {
-		this._handleResizeBound = this._handleResize.bind(this);
-
 		ResizeHandler.register(document.body, this._handleResizeBound);
 	}
 
@@ -145,50 +143,50 @@ class ProductSwitch extends UI5Element {
 	_handleResize() {
 		const documentWidth = document.body.clientWidth;
 
-		if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
+		if (documentWidth <= (this.constructor as typeof ProductSwitch).ROW_MIN_WIDTH.ONE_COLUMN) {
 			this._setRowSize(1);
-		} else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
+		} else if (documentWidth <= (this.constructor as typeof ProductSwitch).ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
 			this._setRowSize(3);
 		} else {
 			this._setRowSize(4);
 		}
 	}
 
-	handleProductSwitchItemClick(event) {
+	handleProductSwitchItemClick(e: MouseEvent) {
 		this.items.forEach(item => { item.selected = false; });
-		event.target.selected = true;
+		(e.target as ProductSwitchItem).selected = true;
 	}
 
-	_onfocusin(event) {
-		const target = event.target;
+	_onfocusin(e: FocusEvent) {
+		const target = e.target as ProductSwitchItem;
 
 		this._itemNavigation.setCurrentItem(target);
 		this._currentIndex = this.items.indexOf(target);
 	}
 
-	_setRowSize(size) {
+	_setRowSize(size: number) {
 		this._rowSize = size;
 		this._itemNavigation.setRowSize(size);
 	}
 
-	_onkeydown(event) {
-		if (isDown(event)) {
-			this._handleDown(event);
-		} else if (isUp(event)) {
-			this._handleUp(event);
+	_onkeydown(e: KeyboardEvent) {
+		if (isDown(e)) {
+			this._handleDown(e);
+		} else if (isUp(e)) {
+			this._handleUp(e);
 		}
 	}
 
-	_handleDown(event) {
+	_handleDown(e: KeyboardEvent) {
 		const itemsLength = this.items.length;
 		if (this._currentIndex + this._rowSize > itemsLength) { // border reached, do nothing
-			event.stopPropagation();
+			e.stopPropagation();
 		}
 	}
 
-	_handleUp(event) {
+	_handleUp(e: KeyboardEvent) {
 		if (this._currentIndex - this._rowSize < 0) { // border reached, do nothing
-			event.stopPropagation();
+			e.stopPropagation();
 		}
 	}
 }

package/src/ProductSwitchItem.ts

@@ -0,0 +1,235 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTemplate.lit.js";
+
+// Styles
+import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
+
+/**
+ * @class
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-product-switch-item</code> web component represents the items displayed in the
+ * <code>ui5-product-switch</code> web component.
+ * <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>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.ProductSwitchItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-product-switch-item
+ * @public
+ * @implements sap.ui.webc.fiori.IProductSwitchItem
+ * @since 1.0.0-rc.5
+ */
+@customElement("ui5-product-switch-item")
+/**
+ * Fired when the <code>ui5-product-switch-item</code> is activated either with a
+ * click/tap or by using the Enter or Space key.
+ *
+ * @event sap.ui.webc.fiori.ProductSwitchItem#click
+ * @public
+ */
+@event("click")
+@event("_focused")
+class ProductSwitchItem extends UI5Element implements ITabbable {
+	constructor() {
+		super();
+
+		this._deactivate = () => {
+			if (this.active) {
+				this.active = false;
+			}
+		};
+	}
+
+	/**
+	 * Defines the title of the component.
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.titleText
+	 * @defaultvalue ""
+	 * @since 1.0.0-rc.15
+	 * @public
+	 */
+	@property()
+	titleText!: string;
+
+	/**
+	 * Defines the subtitle of the component.
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.subtitleText
+	 * @defaultvalue ""
+	 * @since 1.0.0-rc.15
+	 * @public
+	 */
+	@property()
+	subtitleText!: string;
+
+	/**
+	 * Defines the icon to be displayed as a graphical element within the component.
+	 * <br><br>
+	 * Example:
+	 * <br>
+	 * <pre>ui5-product-switch-item icon="palette"</pre>
+	 *
+	 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.icon
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	icon!: string;
+
+	/**
+	 * Defines a target where the <code>targetSrc</code> content must be open.
+	 * <br><br>
+	 * Available options are:
+	 * <ul>
+	 * <li><code>_self</code></li>
+	 * <li><code>_top</code></li>
+	 * <li><code>_blank</code></li>
+	 * <li><code>_parent</code></li>
+	 * <li><code>_search</code></li>
+	 * </ul>
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.target
+	 * @public
+	 */
+	@property({ defaultValue: "_self" })
+	target!: string;
+
+	/**
+	 * Defines the component target URI. Supports standard hyperlink behavior.
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.targetSrc
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	targetSrc!: string;
+
+	/**
+	 * Used to switch the active state (pressed or not) of the component.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	private active!: boolean;
+
+	/**
+	 * Indicates whether the element is focused.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	private focused!: boolean;
+
+	/**
+	 * Used to set the selected state of the component. Only one selected in a sequence.
+	 * <b>Note:</b> Set by the <code>ProductSwitch</code>
+	 */
+	@property({ type: Boolean })
+	selected!: boolean;
+
+	/**
+	 * Defines the component tabindex.
+	 */
+	@property({ defaultValue: "-1", noAttribute: true })
+	_tabIndex!: string;
+
+	_deactivate: () => void;
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ProductSwitchItemCss;
+	}
+
+	static get template() {
+		return ProductSwitchItemTemplate;
+	}
+
+	onEnterDOM() {
+		document.addEventListener("mouseup", this._deactivate);
+	}
+
+	onExitDOM() {
+		document.removeEventListener("mouseup", this._deactivate);
+	}
+
+	_onmousedown() {
+		this.active = true;
+	}
+
+	_onkeydown(e: KeyboardEvent) {
+		if (isSpace(e) || isEnter(e)) {
+			this.active = true;
+		}
+
+		if (isSpace(e)) {
+			e.preventDefault();
+		}
+
+		if (isEnter(e)) {
+			this._fireItemClick();
+		}
+	}
+
+	_onkeyup(e: KeyboardEvent) {
+		if (isSpace(e) || isEnter(e)) {
+			this.active = false;
+		}
+
+		if (isSpace(e)) {
+			if (isSpaceShift(e)) {
+				e.stopPropagation();
+			}
+			this._fireItemClick();
+		}
+	}
+
+	_onfocusout() {
+		this.active = false;
+		this.focused = false;
+	}
+
+	_onfocusin(e: FocusEvent) {
+		this.focused = true;
+
+		this.fireEvent("_focused", e);
+	}
+
+	_fireItemClick() {
+		this.fireEvent("click", { item: this });
+	}
+
+	static get dependencies() {
+		return [Icon];
+	}
+}
+
+ProductSwitchItem.define();
+
+export default ProductSwitchItem;

package/src/ShellBar.hbs

@@ -1,6 +1,5 @@
-<div
+<header
 	class="{{classes.wrapper}}"
-	role="banner"
 	aria-label="{{_shellbarText}}"
 	part="root"
 >
@@ -170,6 +169,7 @@
 				data-ui5-notifications-count="{{notificationsCount}}"
 				@click={{_handleNotificationsPress}}
 				tooltip="{{_notificationsText}}"
+				.accessibilityAttributes={{accInfo.notifications.accessibilityAttributes}}
 				data-ui5-stable="notifications"
 			></ui5-button>
 			{{/if}}
@@ -198,12 +198,13 @@
 				data-ui5-text="Product Switch"
 				@click={{_handleProductSwitchPress}}
 				tooltip="{{_productsText}}"
+				.accessibilityAttributes={{accInfo.products.accessibilityAttributes}}
 				data-ui5-stable="product-switch"
 			></ui5-button>
 			{{/if}}
 		</div>
 	</div>
-</div>
+</header>
 
 {{#*inline "profileButton"}}
 	<ui5-button
@@ -213,6 +214,7 @@
 		style="{{styles.items.profile}}"
 		tooltip="{{_profileText}}"
 		class="ui5-shellbar-button ui5-shellbar-image-button"
+		.accessibilityAttributes={{accInfo.profile.accessibilityAttributes}}
 		data-ui5-stable="profile"
 	>
 		<slot name="profile"></slot>