@ui5/webcomponents-fiori 0.0.0-e0658a650 → 0.0.0-e55c2cec6

package/dist/ProductSwitchItem.js

@@ -1,133 +1,19 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 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 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";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-product-switch-item",
-	properties: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
-		/**
-		  * Defines the title of the component.
-		  * @type {string}
-		  * @defaultvalue ""
-		  * @since 1.0.0-rc.15
-		  * @public
-		  */
-		titleText: {
-			type: String,
-		},
-
-		/**
-		 * Defines the subtitle of the component.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.15
-		 * @public
-		 */
-		 subtitleText: {
-			type: 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}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		icon: {
-			type: 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}
-		 * @defaultvalue "_self"
-		 * @public
-		 */
-		target: {
-			type: String,
-			defaultValue: "_self",
-		},
-
-		/**
-		 * Defines the component target URI. Supports standard hyperlink behavior.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		targetSrc: {
-			type: String,
-		},
-
-		/**
-		 * Used to switch the active state (pressed or not) of the component.
-		 * @private
-		 */
-		active: {
-			type: Boolean,
-		},
-
-		/**
-		 * Indicates whether the element is focused.
-		 * @private
-		 */
-		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 */ {
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
-		/**
-		 * 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>
@@ -151,99 +37,117 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ProductSwitchItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ProductSwitchItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-product-switch-item
  * @public
- * @implements sap.ui.webcomponents.fiori.IProductSwitchItem
+ * @implements sap.ui.webc.fiori.IProductSwitchItem
  * @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)) {
-			if (isSpaceShift(event)) {
-				event.stopPropagation();
-			}
-			this._fireItemClick();
-		}
-	}
-
-	_onfocusout() {
-		this.active = false;
-		this.focused = false;
-	}
-
-	_onfocusin(event) {
-		this.focused = true;
-
-		this.fireEvent("_focused", event);
-	}
-
-	_fireItemClick() {
-		this.fireEvent("click", { item: this });
-	}
-
-	static get dependencies() {
-		return [Icon];
-	}
-}
-
+let ProductSwitchItem = class ProductSwitchItem extends UI5Element {
+    constructor() {
+        super();
+        this._deactivate = () => {
+            if (this.active) {
+                this.active = false;
+            }
+        };
+    }
+    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) {
+        if (isSpace(e) || isEnter(e)) {
+            this.active = true;
+        }
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this._fireItemClick();
+        }
+    }
+    _onkeyup(e) {
+        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) {
+        this.focused = true;
+        this.fireEvent("_focused", e);
+    }
+    _fireItemClick() {
+        this.fireEvent("click", { item: this });
+    }
+    static get dependencies() {
+        return [Icon];
+    }
+};
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "titleText", void 0);
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "subtitleText", void 0);
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "icon", void 0);
+__decorate([
+    property({ defaultValue: "_self" })
+], ProductSwitchItem.prototype, "target", void 0);
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "targetSrc", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProductSwitchItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProductSwitchItem.prototype, "focused", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProductSwitchItem.prototype, "selected", void 0);
+__decorate([
+    property({ defaultValue: "-1", noAttribute: true })
+], ProductSwitchItem.prototype, "_tabIndex", void 0);
+ProductSwitchItem = __decorate([
+    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")
+], ProductSwitchItem);
 ProductSwitchItem.define();
-
 export default ProductSwitchItem;
+//# sourceMappingURL=ProductSwitchItem.js.map

package/dist/ProductSwitchItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSwitchItem.js","sourceRoot":"","sources":["../src/ProductSwitchItem.ts"],"names":[],"mappings":"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"}

package/dist/ShellBar.js

@@ -46,7 +46,7 @@ const metadata = {
 	tag: "ui5-shellbar",
 	languageAware: true,
 	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 
 		/**
 		 * Defines the <code>primaryTitle</code>.
@@ -152,7 +152,39 @@ const metadata = {
 		 * @public
 		 * @since 1.1.0
 		 */
-		 accessibilityTexts: {
+		accessibilityTexts: {
+			type: Object,
+		},
+
+		/**
+		 * An object of strings that defines several additional accessibility attribute values
+		 * for customization depending on the use case.
+		 *
+		 * It supports the following fields:
+		 *
+		 * <ul>
+		 * 		<li><code>expanded</code>: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+		 *			<ul>
+		 *				<li><code>true</code></li>
+		 *				<li><code>false</code></li>
+		 *			</ul>
+		 * 		</li>
+		 * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values:
+		 * 			<ul>
+		 *				<li><code>Dialog</code></li>
+		 *				<li><code>Grid</code></li>
+		 *				<li><code>ListBox</code></li>
+		 *				<li><code>Menu</code></li>
+		 *				<li><code>Tree</code></li>
+		 * 			</ul>
+		 * 		</li>
+		 * </ul>
+		 * @type {object}
+		 * @public
+		 * @since 1.10.0
+		 */
+
+		accessibilityAttributes: {
 			type: Object,
 		},
 
@@ -205,14 +237,14 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 		/**
 		 * Defines the <code>ui5-shellbar</code> aditional items.
 		 * <br><br>
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.IShellBarItem[]}
+		 * @type {sap.ui.webc.fiori.IShellBarItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -228,7 +260,7 @@ const metadata = {
 		 *
 		 * Note: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because
 		 * it should have specific size by design in the context of <code>ui5-shellbar</code> profile.
-		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @type {sap.ui.webc.main.IAvatar}
 		 * @slot
 		 * @since 1.0.0-rc.6
 		 * @public
@@ -240,7 +272,7 @@ const metadata = {
 		/**
 		 * Defines the logo of the <code>ui5-shellbar</code>.
 		 * For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo.
-		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @type {sap.ui.webc.main.IAvatar}
 		 * @slot
 		 * @since 1.0.0-rc.8
 		 * @public
@@ -255,7 +287,7 @@ const metadata = {
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
 		 *
-		 * @type {sap.ui.webcomponents.main.IListItem[]}
+		 * @type {sap.ui.webc.main.IListItem[]}
 		 * @slot
 		 * @since 0.10
 		 * @public
@@ -267,7 +299,7 @@ const metadata = {
 		/**
 		 * Defines the <code>ui5-input</code>, that will be used as a search field.
 		 *
-		 * @type {sap.ui.webcomponents.main.IInput}
+		 * @type {sap.ui.webc.main.IInput}
 		 * @slot
 		 * @public
 		 */
@@ -280,7 +312,7 @@ const metadata = {
 		 * We encourage this slot to be used for a back or home button.
 		 * It gets overstyled to match ShellBar's styling.
 		 *
-		 * @type {sap.ui.webcomponents.main.IButton}
+		 * @type {sap.ui.webc.main.IButton}
 		 * @slot
 		 * @public
 		 */
@@ -288,13 +320,13 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 		/**
 		 *
 		 * Fired, when the notification icon is activated.
 		 *
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#notifications-click
+		 * @event sap.ui.webc.fiori.ShellBar#notifications-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
@@ -308,7 +340,7 @@ const metadata = {
 		/**
 		 * Fired, when the profile slot is present.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#profile-click
+		 * @event sap.ui.webc.fiori.ShellBar#profile-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
@@ -322,7 +354,7 @@ const metadata = {
 		 * Fired, when the product switch icon is activated.
 		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#product-switch-click
+		 * @event sap.ui.webc.fiori.ShellBar#product-switch-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
@@ -336,7 +368,7 @@ const metadata = {
 		/**
 		 * Fired, when the logo is activated.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#logo-click
+		 * @event sap.ui.webc.fiori.ShellBar#logo-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
@@ -350,7 +382,7 @@ const metadata = {
 		/**
 		 * Fired, when the co pilot is activated.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#co-pilot-click
+		 * @event sap.ui.webc.fiori.ShellBar#co-pilot-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
@@ -365,7 +397,7 @@ const metadata = {
 		 * Fired, when a menu item is activated
 		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
+		 * @event sap.ui.webc.fiori.ShellBar#menu-item-click
 		 * @param {HTMLElement} item DOM ref of the activated list item
 		 * @since 0.10
 		 * @public
@@ -420,8 +452,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ShellBar
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ShellBar
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-shellbar
  * @appenddocs ShellBarItem
  * @public
@@ -492,7 +524,7 @@ class ShellBar extends UI5Element {
 
 				if (this.hasMenuItems) {
 					const menuPopover = await this._getMenuPopover();
-					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
+					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"), true);
 				}
 			},
 		};
@@ -529,6 +561,9 @@ class ShellBar extends UI5Element {
 
 	_menuPopoverBeforeOpen() {
 		this._menuPopoverExpanded = true;
+		if (this.menuPopover.content && this.menuPopover.content.length) {
+			this.menuPopover.content[0].focusFirstItem();
+		}
 	}
 
 	_menuPopoverAfterClose() {
@@ -537,6 +572,9 @@ class ShellBar extends UI5Element {
 
 	_overflowPopoverBeforeOpen() {
 		this._overflowPopoverExpanded = true;
+		if (this.overflowPopover.content && this.overflowPopover.content.length) {
+			this.overflowPopover.content[0].focusFirstItem();
+		}
 	}
 
 	_overflowPopoverAfterClose() {
@@ -723,7 +761,7 @@ class ShellBar extends UI5Element {
 	async _toggleActionPopover() {
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
 		const overflowPopover = await this._getOverflowPopover();
-		overflowPopover.showAt(overflowButton);
+		overflowPopover.showAt(overflowButton, true);
 	}
 
 	onEnterDOM() {
@@ -1176,29 +1214,64 @@ class ShellBar extends UI5Element {
 		return {
 			notifications: {
 				"title": this._notificationsText,
+				"accessibilityAttributes": {
+					hasPopup: this._notificationsHasPopup,
+				},
 			},
 			profile: {
 				"title": this._profileText,
+				"accessibilityAttributes": {
+					hasPopup: this._profileHasPopup,
+				},
 			},
 			products: {
 				"title": this._productsText,
+				"accessibilityAttributes": {
+					hasPopup: this._productsHasPopup,
+				},
 			},
 			search: {
 				"title": this._searchText,
 				"accessibilityAttributes": {
+					hasPopup: this._searchHasPopup,
 					expanded: this.showSearchField,
 				},
 			},
 			overflow: {
 				"title": this._overflowText,
 				"accessibilityAttributes": {
-					hasPopup: HasPopup.Menu,
+					hasPopup: this._overflowHasPopup,
 					expanded: this._overflowPopoverExpanded,
 				},
 			},
 		};
 	}
 
+	get _notificationsHasPopup() {
+		const notificationsAccAttributes = this.accessibilityAttributes.notifications;
+		return notificationsAccAttributes ? notificationsAccAttributes.ariaHasPopup : null;
+	}
+
+	get _profileHasPopup() {
+		const profileAccAttributes = this.accessibilityAttributes.profile;
+		return profileAccAttributes ? profileAccAttributes.ariaHasPopup : null;
+	}
+
+	get _productsHasPopup() {
+		const productsAccAttributes = this.accessibilityAttributes.product;
+		return productsAccAttributes ? productsAccAttributes.ariaHasPopup : null;
+	}
+
+	get _searchHasPopup() {
+		const searcAccAttributes = this.accessibilityAttributes.search;
+		return searcAccAttributes ? searcAccAttributes.ariaHasPopup : null;
+	}
+
+	get _overflowHasPopup() {
+		const overflowAccAttributes = this.accessibilityAttributes.overflow;
+		return overflowAccAttributes ? overflowAccAttributes.ariaHasPopup : HasPopup.Menu;
+	}
+
 	get accLogoRole() {
 		return this.accessibilityRoles.logoRole || "button";
 	}

package/dist/ShellBarItem.js

@@ -6,7 +6,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
  */
 const metadata = {
 	tag: "ui5-shellbar-item",
-	properties: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.ShellBarItem.prototype */ {
 		/**
 		 * Defines the name of the item's icon.
 		 * @type {string}
@@ -39,11 +39,11 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.ShellBarItem.prototype */ {
 		/**
 		 * Fired, when the item is pressed.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBarItem#click
+		 * @event sap.ui.webc.fiori.ShellBarItem#click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef DOM ref of the clicked element
 		 * @public
@@ -66,10 +66,10 @@ const metadata = {
  * <code>import "@ui5/webcomponents-fiori/dist/ShellBarItem";</code>
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ShellBarItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ShellBarItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-shellbar-item
- * @implements sap.ui.webcomponents.fiori.IShellBarItem
+ * @implements sap.ui.webc.fiori.IShellBarItem
  * @public
  */
 class ShellBarItem extends UI5Element {