@ui5/webcomponents 0.0.0-2723566a3 → 0.0.0-274170508

package/src/ResponsivePopover.js

@@ -1,5 +1,5 @@
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-defaults.js";
 import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
@@ -12,47 +12,39 @@ import "@ui5/webcomponents-icons/dist/decline.js";
 // Styles
 import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
 
-const POPOVER_MIN_WIDTH = 100;
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-responsive-popover",
 	properties: /** @lends sap.ui.webcomponents.main.ResponsivePopover.prototype */ {
-
-		/**
-		 * Defines whether the component will stretch to fit its content.
-		 * <br/><b>Note:</b> by default the popover will be as wide as its opener component and will grow if the content is not fitting.
-		 * <br/><b>Note:</b> if set to true, it will take only as much space as it needs.
-		 * @private
-		 */
-		noStretch: {
-			type: Boolean,
-		},
-
 		/**
-		 * Defines if padding would be added around the content.
+		 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
+		 * By default both the header and footer would be displayed.
 		 * @private
 		 */
-		withPadding: {
+		contentOnlyOnDesktop: {
 			type: Boolean,
 		},
 
 		/**
-		 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
-		 * By default both the header and footer would be displayed.
+		 * Used internaly for controls which must not have header.
 		 * @private
 		 */
-		contentOnlyOnDesktop: {
+		_hideHeader: {
 			type: Boolean,
 		},
 
 		/**
-		 * Used internaly for controls which must not have header.
+		 * Defines whether a close button will be rendered in the header of the component
+		 * <b>Note:</b> If you are using the <code>header</code> slot, this property will have no effect
+		 *
 		 * @private
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.16
 		 */
-		_hideHeader: {
+		_hideCloseButton: {
 			type: Boolean,
 		},
 	},
@@ -68,6 +60,17 @@ const metadata = {
  * <h3>Usage</h3>
  * Use it when you want to make sure that all the content is visible on any device.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-responsive-popover</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ResponsivePopover
@@ -79,7 +82,6 @@ const metadata = {
 class ResponsivePopover extends Popover {
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -107,6 +109,7 @@ class ResponsivePopover extends Popover {
 
 	static get dependencies() {
 		return [
+			...Popover.dependencies,
 			Button,
 			Dialog,
 			Title,
@@ -116,26 +119,18 @@ class ResponsivePopover extends Popover {
 	/**
 	 * Shows popover on desktop and dialog on mobile.
 	 * @param {HTMLElement} opener the element that the popover is shown at
+	 * @param {boolean} preventInitialFocus Prevents applying the focus inside the popup
 	 * @public
 	 * @async
 	 * @returns {Promise} Resolves when the responsive popover is open
 	 */
-	async showAt(opener) {
-		this.style.display = this._isPhone ? "contents" : "";
-
-		if (this.isOpen() || (this._dialog && this._dialog.isOpen())) {
-			return;
-		}
-
+	async showAt(opener, preventInitialFocus = false) {
 		if (!isPhone()) {
-			// make popover width be >= of the opener's width
-			if (!this.noStretch) {
-				this._minWidth = Math.max(POPOVER_MIN_WIDTH, opener.getBoundingClientRect().width);
-			}
-			await super.showAt(opener);
+			await super.showAt(opener, preventInitialFocus);
 		} else {
+			this.style.display = "contents";
 			this.style.zIndex = getNextZIndex();
-			await this._dialog.show();
+			await this._dialog.show(preventInitialFocus);
 		}
 	}
 
@@ -147,7 +142,7 @@ class ResponsivePopover extends Popover {
 		if (!isPhone()) {
 			super.close(escPressed, preventRegistryUpdate, preventFocusRestore);
 		} else {
-			this._dialog.close();
+			this._dialog.close(escPressed, preventRegistryUpdate, preventFocusRestore);
 		}
 	}
 
@@ -168,20 +163,14 @@ class ResponsivePopover extends Popover {
 		return isPhone() ? this._dialog.isOpen() : super.isOpen();
 	}
 
-	get styles() {
-		const popoverStyles = super.styles;
-
-		popoverStyles.root = {
-			"min-width": `${this._minWidth}px`,
-		};
-
-		return popoverStyles;
-	}
-
 	get _dialog() {
 		return this.shadowRoot.querySelector("[ui5-dialog]");
 	}
 
+	get contentDOM() {
+		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}
@@ -195,15 +184,17 @@ class ResponsivePopover extends Popover {
 	}
 
 	get _closeDialogAriaLabel() {
-		return this.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
+		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
 	}
 
-	_afterDialogOpen(event) {
+	_beforeDialogOpen(event) {
+		this.open = true;
 		this.opened = true;
 		this._propagateDialogEvent(event);
 	}
 
 	_afterDialogClose(event) {
+		this.open = false;
 		this.opened = false;
 		this._propagateDialogEvent(event);
 	}
@@ -215,7 +206,7 @@ class ResponsivePopover extends Popover {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ResponsivePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/SegmentedButton.hbs

@@ -5,10 +5,10 @@
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"
-	dir="{{effectiveDir}}"
 	aria-multiselectable="true"
 	aria-describedby="{{_id}}-invisibleText"
 	aria-roledescription={{ariaDescription}}
+	aria-label={{accessibleName}}
 >
 	<slot></slot>
 

package/src/SegmentedButton.js

@@ -1,11 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isSpace,
+	isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import { SEGMENTEDBUTTON_ARIA_DESCRIPTION, SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js";
 import SegmentedButtonItem from "./SegmentedButtonItem.js";
 
@@ -22,7 +24,20 @@ const metadata = {
 	tag: "ui5-segmented-button",
 	altTag: "ui5-segmentedbutton",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */  {},
+	properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */  {
+		/**
+		 * Defines the accessible ARIA name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.0.3
+		 */
+		 accessibleName: {
+			type: String,
+			defaultValue: undefined,
+		},
+	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {
 
@@ -32,7 +47,7 @@ const metadata = {
 		 * <b>Note:</b> Multiple items are allowed.
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-segmented-button-item</code> for the intended design.
-		 * @type {sap.ui.webcomponents.main.IButton[]}
+		 * @type {sap.ui.webcomponents.main.ISegmentedButtonItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -104,7 +119,7 @@ class SegmentedButton extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		SegmentedButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
@@ -119,7 +134,6 @@ class SegmentedButton extends UI5Element {
 		this.hasPreviouslyFocusedItem = false;
 
 		this._handleResizeBound = this._doLayout.bind(this);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onEnterDOM() {
@@ -160,15 +174,7 @@ class SegmentedButton extends UI5Element {
 
 		this.widths = this.items.map(item => {
 			// +1 is added because for width 100.44px the offsetWidth property returns 100px and not 101px
-			let width = item.offsetWidth + 1;
-
-			if (isIE()) {
-				// in IE we are adding 1 one px beacause the width of the border on an item in the middle is not calculated and if the
-				// longest item is in the middle, it truncates
-				width += 1;
-			}
-
-			return width;
+			return item.offsetWidth + 1;
 		});
 	}
 
@@ -206,6 +212,7 @@ class SegmentedButton extends UI5Element {
 
 	_onclick(event) {
 		this._selectItem(event);
+		this.selectedItem.focus();
 	}
 
 	_onkeydown(event) {
@@ -266,7 +273,7 @@ class SegmentedButton extends UI5Element {
 	 * Currently selected item.
 	 *
 	 * @readonly
-	 * @type { ui5-segmented-button-item }
+	 * @type { sap.ui.webcomponents.main.ISegmentedButtonItem }
 	 * @public
 	 */
 	get selectedItem() {
@@ -274,11 +281,11 @@ class SegmentedButton extends UI5Element {
 	}
 
 	get ariaDescribedBy() {
-		return this.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY);
+		return SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY);
 	}
 
 	get ariaDescription() {
-		return this.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION);
+		return SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION);
 	}
 }
 

package/src/SegmentedButtonItem.hbs

@@ -8,7 +8,6 @@
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
 	{{> ariaPressed}}
-		dir="{{effectiveDir}}"
 		@focusout={{_onfocusout}}
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}
@@ -20,7 +19,7 @@
 		@touchend="{{_ontouchend}}"
 		tabindex={{tabIndexValue}}
 		aria-label="{{ariaLabelText}}"
-		title="{{accInfo.title}}"
+		title="{{tooltip}}"
 >
 	{{#if icon}}
 		<ui5-icon

package/src/SegmentedButtonItem.js

@@ -1,6 +1,7 @@
 import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js";
 import ToggleButton from "./ToggleButton.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import Icon from "./Icon.js";
 
 import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 
@@ -9,10 +10,12 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa
  */
 const metadata = {
 	tag: "ui5-segmented-button-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
+		 * @type {ButtonDesign}
+		 * @defaultvalue "Default"
 		 * @public
 		 */
 		design: {
@@ -23,6 +26,8 @@ const metadata = {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
+		 * @type {boolean}
+		 * @defaultvalue false
 		 * @public
 		 */
 		iconEnd: {
@@ -32,16 +37,8 @@ const metadata = {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @public
-		 */
-		iconSize: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
-		 *
+		 * @type {boolean}
+		 * @defaultvalue false
 		 * @public
 		 */
 		submits: {
@@ -52,7 +49,7 @@ const metadata = {
 		 * Defines the index of the item inside of the SegmentedButton.
 		 *
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		posInSet: {
 			type: String,
@@ -62,7 +59,7 @@ const metadata = {
 		 * Defines how many items are inside of the SegmentedButton.
 		 *
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		sizeOfSet: {
 			type: String,
@@ -73,7 +70,7 @@ const metadata = {
 /**
  * @class
  *
- *<h3 class="comment-api-title">Overview</h3>
+ * <h3 class="comment-api-title">Overview</h3>
  *
  * Users can use the <code>ui5-segmented-button-item</code> as part of a <code>ui5-segmented-button</code>.
  * <br><br>
@@ -91,6 +88,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.SegmentedButtonItem
  * @extends ToggleButton
  * @tagname ui5-segmented-button-item
+ * @implements sap.ui.webcomponents.main.ISegmentedButtonItem
  * @public
  */
 class SegmentedButtonItem extends ToggleButton {
@@ -102,8 +100,12 @@ class SegmentedButtonItem extends ToggleButton {
 		return SegmentedButtonItemTemplate;
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	get ariaDescription() {
-		return this.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
+		return SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
 	}
 }
 

package/src/Select.hbs

@@ -1,6 +1,5 @@
 <div
-	class="ui5-select-root"
-	dir="{{effectiveDir}}"
+	class="ui5-select-root ui5-input-focusable-element"
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
 >
@@ -9,7 +8,6 @@
 			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
-			dir="{{effectiveDir}}"
 		></ui5-icon>
 	{{/if}}
 	<div class="ui5-select-label-root"
@@ -22,7 +20,9 @@
 		aria-disabled="{{isDisabled}}"
 		aria-required="{{required}}"
 		aria-expanded="{{_isPickerOpen}}"
+		aria-roledescription="{{_ariaRoleDescription}}"
 		@keydown="{{_onkeydown}}"
+		@keypress="{{_handleKeyboardNavigation}}"
 		@keyup="{{_onkeyup}}"
 		@focusin="{{_onfocusin}}"
 		@focusout="{{_onfocusout}}"
@@ -30,13 +30,10 @@
 		{{_text}}
 	</div>
 
-	<span id="{{_id}}-selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
-
 	<ui5-icon
 		name="slim-arrow-down"
 		input-icon
 		?pressed="{{_iconPressed}}"
-		dir="{{effectiveDir}}"
 	></ui5-icon>
 
 	{{#if hasValueState}}