@ui5/webcomponents-fiori 0.0.0-e463d2345 → 0.0.0-e818f286e

package/dist/Page.js

@@ -0,0 +1,223 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
+import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
+
+// Template
+import PageTemplate from "./generated/templates/PageTemplate.lit.js";
+
+// Styles
+import PageCss from "./generated/themes/Page.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-page",
+	managedSlots: true,
+	languageAware: true,
+	properties: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
+
+		/**
+		 * Defines the background color of the <code>ui5-page</code>.
+		 * <br><br>
+		 * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Solid</code></li> (default)
+		 * <li><code>Transparent</code></li>
+		 * <li><code>List</code></li>
+		 * </ul>
+		 * @type {PageBackgroundDesign}
+		 * @defaultvalue "Solid"
+		 * @public
+		 */
+		backgroundDesign: {
+			type: String,
+			defaultValue: PageBackgroundDesign.Solid,
+		},
+
+		/**
+		 * Disables vertical scrolling of page content.
+		 * If set to true, there will be no vertical scrolling at all.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		disableScrolling: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines if the footer should float over the content.
+		 * <br><br>
+		 * <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.
+		 * @type {boolean}
+		 * @defaultvalue true
+		 * @public
+		 */
+		floatingFooter: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the footer visibility.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		hideFooter: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		mediaRange: {
+			type: String,
+		},
+	},
+
+	slots: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
+
+		/**
+		 * Defines the header HTML Element.
+		 *
+		 * @type {sap.ui.webcomponents.fiori.IBar}
+		 * @slot
+		 * @public
+		 */
+		header: {
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the content HTML Element.
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot content
+		 * @public
+		 */
+		"default": {
+			propertyName: "content",
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the footer HTML Element.
+		 *
+		 * @type {sap.ui.webcomponents.fiori.IBar}
+		 * @slot
+		 * @public
+		 */
+		footer: {
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-page</code> is a container component that holds one whole screen of an application.
+ * The page has three distinct areas that can hold content - a header, content area and a footer.
+ * <h3>Structure</h3>
+ * <h4>Header</h4>
+ * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
+ * <h4>Content</h4>
+ * The content occupies the main part of the page. Only the content area is scrollable by default.
+ * This can be prevented by setting  <code>enableScrolling</code> to <code>false</code>.
+ * <h4>Footer</h4>
+ * The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.
+ * This is enabled with the <code>floatingFooter</code> property.
+ *
+ * <b>Note:</b> <code>ui5-page</code> occipues the whole available space of its parent. In order to achieve the intended design you have to make sure
+ * that there is enough space for the <code>ui5-page</code> to be rendered.
+ *
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents-fiori/dist/Page.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.Page
+ * @extends UI5Element
+ * @tagname ui5-page
+ * @since 1.0.0-rc.12
+ * @public
+ */
+class Page extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return PageCss;
+	}
+
+	static get template() {
+		return PageTemplate;
+	}
+
+	constructor() {
+		super();
+
+		this._updateMediaRange = this.updateMediaRange.bind(this);
+	}
+
+	onEnterDOM() {
+		ResizeHandler.register(this, this._updateMediaRange);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._updateMediaRange);
+	}
+
+	updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
+	get _contentBottom() {
+		return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
+	}
+
+	get _contentPaddingBottom() {
+		return this.floatingFooter && !this.hideFooter ? "3.5rem" : "0";
+	}
+
+	get _contentTop() {
+		return this.header.length ? "2.75rem" : "0rem";
+	}
+
+	get styles() {
+		return {
+			content: {
+				"padding-bottom": this.footer.length && this._contentPaddingBottom,
+				"bottom": this.footer.length && this._contentBottom,
+				"top": this._contentTop,
+			},
+			footer: {},
+		};
+	}
+}
+
+Page.define();
+
+export default Page;

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";
 
@@ -22,12 +34,13 @@ const metadata = {
 			type: Integer,
 		},
 	},
+	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */ {
 		/**
 		 * Defines the items of the <code>ui5-product-switch</code>.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.fiori.IProductSwitchItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
@@ -44,9 +57,24 @@ 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>
+ * <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
@@ -60,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() {
@@ -91,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);
 
@@ -109,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,8 +1,9 @@
 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";
+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";
 // Styles
 import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
 
@@ -13,25 +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>
@@ -46,9 +51,19 @@ const metadata = {
 		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.
+		 * 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}
 		 * @defaultvalue "_self"
 		 * @public
@@ -57,8 +72,9 @@ const metadata = {
 			type: String,
 			defaultValue: "_self",
 		},
+
 		/**
-		 * 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
@@ -66,13 +82,15 @@ const metadata = {
 		targetSrc: {
 			type: String,
 		},
+
 		/**
-		 * 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: {
 			type: Boolean,
 		},
+
 		/**
 		 * Indicates whether the element is focused.
 		 * @private
@@ -80,13 +98,22 @@ const metadata = {
 		focused: {
 			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",
 			noAttribute: true,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
 		/**
@@ -109,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>
  *
@@ -118,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 {
@@ -179,6 +217,9 @@ class ProductSwitchItem extends UI5Element {
 		}
 
 		if (isSpace(event)) {
+			if (isSpaceShift(event)) {
+				event.stopPropagation();
+			}
 			this._fireItemClick();
 		}
 	}
@@ -197,6 +238,10 @@ class ProductSwitchItem extends UI5Element {
 	_fireItemClick() {
 		this.fireEvent("click", { item: this });
 	}
+
+	static get dependencies() {
+		return [Icon];
+	}
 }
 
 ProductSwitchItem.define();