feat(ui5-product-switch): initial implementation

packages/fiori/bundle.esm.js

@@ -9,5 +9,7 @@ import "./dist/json-imports/LocaleData.js" // same as above
 import "./dist/features/CoPilotAnimation.js";
 
 // FIORI components
+import ProductSwitch from "./dist/ProductSwitch.js";
+import ProductSwitchItem from "./dist/ProductSwitchItem.js";
 import ShellBar from "./dist/ShellBar.js";
 import ShellBarItem from "./dist/ShellBarItem.js";

packages/fiori/src/ProductSwitch.hbs

@@ -0,0 +1,3 @@
+<div class="ui5-product-switch-root" @focusin={{_onfocusin}}>
+	<slot></slot>
+</div>

packages/fiori/src/ProductSwitch.js

@@ -0,0 +1,126 @@
+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 ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.lit.js";
+
+// Styles
+import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
+
+
+const metadata = {
+	tag: "ui5-product-switch",
+	properties: {
+		/**
+		 * Indicates how many columns are displayed.
+		 * @private
+		 */
+		desktopColumns: {
+			type: Integer,
+		},
+	},
+	slots: {
+		/**
+		 * Defines the items of the <code>ui5-product-switch</code>.
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			propertyName: "items",
+			type: HTMLElement,
+		},
+	},
+};
+
+/**
+ * @class
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-product-switch</code> is a Fiori specific web component that is used in <code>ui5-shellbar</code> and allows the user easy switching between products.
+ * <br><br>
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.ProductSwitch
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-product-switch
+ * @appenddocs ProductSwitchItem
+ * @public
+ * @since 1.0.0-rc.5
+ */
+class ProductSwitch extends UI5Element {
+	constructor() {
+		super();
+
+		this.initItemNavigation();
+	}
+
+	initItemNavigation() {
+		this._itemNavigation = new ItemNavigation(this, { rowSize: 4 });
+		this._itemNavigation.getItemsCallback = () => this.items;
+	}
+
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ProductSwitchCss;
+	}
+
+	static get template() {
+		return ProductSwitchTemplate;
+	}
+
+	static get ROW_MIN_WIDTH() {
+		return {
+			ONE_COLUMN: 600,
+			THREE_COLUMN: 900,
+		};
+	}
+
+	onEnterDOM() {
+		this._handleResizeBound = this._handleResize.bind(this);
+
+		ResizeHandler.register(document.body, this._handleResizeBound);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(document.body, this._handleResizeBound);
+	}
+
+	onBeforeRendering() {
+		this.desktopColumns = this.items.length > 6 ? 4 : 3;
+	}
+
+	_handleResize() {
+		const documentWidth = document.body.clientWidth;
+
+		if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
+			this._itemNavigation.rowSize = 1;
+		} else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
+			this._itemNavigation.rowSize = 3;
+		} else {
+			this._itemNavigation.rowSize = 4;
+		}
+	}
+
+	_onfocusin(event) {
+		const target = event.target;
+
+		this._itemNavigation.update(target);
+	}
+}
+
+ProductSwitch.define();
+
+export default ProductSwitch;

packages/fiori/src/ProductSwitchItem.hbs

@@ -0,0 +1,43 @@
+{{#if targetSrc}}
+	<a class="ui5-product-switch-item-root"
+		data-sap-focus-ref
+		@focusout="{{_onfocusout}}"
+		@focusin="{{_onfocusin}}"
+		@mousedown="{{_onmousedown}}"
+		@keydown="{{_onkeydown}}"
+		@keyup="{{_onkeyup}}"
+		tabindex={{_tabIndex}}
+		href="{{targetSrc}}"
+		target="{{target}}">
+		{{> item}}
+	</a>
+{{else}}
+	<div
+		class="ui5-product-switch-item-root"
+		data-sap-focus-ref
+		@focusout="{{_onfocusout}}"
+		@focusin="{{_onfocusin}}"
+		@mousedown="{{_onmousedown}}"
+		@keydown="{{_onkeydown}}"
+		@keyup="{{_onkeyup}}"
+		tabindex={{_tabIndex}}>
+		{{> item}}
+	</div>
+{{/if}}
+
+{{#*inline "item"}}
+	{{#if icon}}
+		<ui5-icon
+			class="ui5-product-switch-item-icon"
+			name="{{icon}}"
+		></ui5-icon>
+	{{/if}}
+	<span class="ui5-product-switch-item-text-content">
+		{{#if heading}}
+			<span class="ui5-product-switch-item-heading">{{heading}}</span>
+		{{/if}}
+		{{#if subtitle}}
+			<span class="ui5-product-switch-item-subtitle">{{subtitle}}</span>
+		{{/if}}
+	</span>
+{{/inline}}

packages/fiori/src/ProductSwitchItem.js

@@ -0,0 +1,201 @@
+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/events/PseudoEvents.js";
+import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTemplate.lit.js";
+
+// Styles
+import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
+
+
+const metadata = {
+	tag: "ui5-product-switch-item",
+	properties: {
+		/**
+		  * Defines the title of the <code>ui5-product-switch-item</code>.
+		  * @type {string}
+		  * @defaultvalue ""
+		  * @public
+		  */
+		heading: {
+			type: String,
+		},
+		/**
+		 * Defines the subtitle of the <code>ui5-product-switch-item</code>.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		subtitle: {
+			type: String,
+		},
+		/**
+		 * Defines the icon to be displayed as a graphical element within the <code>ui5-product-switch-item</code>.
+		 * <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://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		icon: {
+			type: String,
+		},
+		/**
+		 * Specifies a target where the <code>targetSrc</code> content must be open.
+		 * Options are the standard values for window.open() supported by browsers: _self, _top, _blank, _parent, _search. Alternatively, a frame name can be entered.
+		 * @type {string}
+		 * @defaultvalue "_self"
+		 * @public
+		 */
+		target: {
+			type: String,
+			defaultValue: "_self",
+		},
+		/**
+		 * Defines the <code>ui5-product-switch-item</code> target URI. Supports standard hyperlink behavior.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		targetSrc: {
+			type: String,
+		},
+		/**
+		 * Used to switch the active state (pressed or not) of the <code>ui5-product-switch-item</code>.
+		 * @private
+		 */
+		active: {
+			type: Boolean,
+		},
+		/**
+		 * Indicates whether the element is focused.
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+		_tabIndex: {
+			type: String,
+			defaultValue: "-1",
+			noAttribute: true,
+		},
+	},
+	slots: {
+		//
+	},
+	events: {
+		/**
+		 * 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
+		 * @public
+		 */
+		click: {},
+		_focused: {},
+	},
+};
+
+/**
+ * @class
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-product-switch-item</code> represents the items displayed in the <code>ui5-product-switch</code> web component
+ * <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>.
+ * <br><br>
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.ProductSwitchItem
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-product-switch-item
+ * @public
+ * @since 1.0.0-rc.5
+ */
+class ProductSwitchItem extends UI5Element {
+	constructor() {
+		super();
+
+		this._deactivate = () => {
+			if (this.active) {
+				this.active = false;
+			}
+		};
+	}
+
+	static get metadata() {
+		return metadata;
+	}
+
+	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(event) {
+		if (isSpace(event) || isEnter(event)) {
+			this.active = true;
+		}
+
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
+
+		if (isEnter(event)) {
+			this._fireItemClick();
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event) || isEnter(event)) {
+			this.active = false;
+		}
+
+		if (isSpace(event)) {
+			this._fireItemClick();
+		}
+	}
+
+	_onfocusout() {
+		this.active = false;
+		this.focused = false;
+	}
+
+	_onfocusin(event) {
+		this.focused = true;
+
+		this.fireEvent("_focused", event);
+	}
+
+	_fireItemClick() {
+		this.fireEvent("click", { item: this });
+	}
+}
+
+ProductSwitchItem.define();
+
+export default ProductSwitchItem;