@ui5/webcomponents 0.0.0-cc312800a → 0.0.0-cf069fb29

package/dist/BusyIndicator.js

@@ -1,7 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isIE } 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 { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 import Label from "./Label.js";
 
@@ -17,12 +19,13 @@ import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
  * @public
  */
 const metadata = {
-	tag: "ui5-busyindicator",
+	tag: "ui5-busy-indicator",
+	altTag: "ui5-busyindicator",
 	languageAware: true,
 	slots: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
 
 		/**
-		 * Determines the content over which the <code>ui5-busyindicator</code> will appear.
+		 * Determines the content over which the component will appear.
 		 *
 		 * @type {Node[]}
 		 * @slot
@@ -35,7 +38,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
 
 		/**
-		 * Defines text to be displayed below the busy indicator. It can be used to inform the user of the current operation.
+		 * Defines text to be displayed below the component. It can be used to inform the user of the current operation.
 		 * @type {String}
 		 * @public
 		 * @defaultvalue ""
@@ -46,9 +49,16 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the size of the <code>ui5-busyindicator</code>.
+		 * Defines the size of the component.
+		 *
 		 * <br><br>
-		 * <b>Note:</b> Available options are "Small", "Medium", and "Large".
+		 * <b>Note:</b>
+		 *
+		 * <ul>
+		 * <li><code>Small</code></li>
+		 * <li><code>Medium</code></li>
+		 * <li><code>Large</code></li>
+		 * </ul>
 		 *
 		 * @type {BusyIndicatorSize}
 		 * @defaultvalue "Medium"
@@ -69,6 +79,26 @@ const metadata = {
 		active: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
+		 *
+		 * @type {Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		delay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
+
+		/**
+		 * Defines if the component is currently in busy state.
+		 * @private
+		 */
+		_isBusy: {
+			type: Boolean,
+		},
 	},
 };
 
@@ -77,19 +107,32 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-busyindicator</code> signals that some operation is going on and that the
- *  user must wait. It does not block the current UI screen so other operations could be
- *  triggered in parallel.
+ * The <code>ui5-busy-indicator</code> signals that some operation is going on and that the
+ * user must wait. It does not block the current UI screen so other operations could be triggered in parallel.
+ * It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.
  *
  * <h3>Usage</h3>
- * For the <code>ui5-busyindicator</code> you can define the size of the indicator, as well
- * as whether it is shown or hidden. In order to hide it, use the html attribute <code>hidden</code> or <code>display: none;</code>
+ * For the <code>ui5-busy-indicator</code> you can define the size, the text and whether it is shown or hidden.
+ * In order to hide it, use the "active" property.
  * <br><br>
- * In order to show busy state for an HTML element, simply nest the HTML element in a <code>ui5-busyindicator</code> instance.
+ * In order to show busy state over an HTML element, simply nest the HTML element in a <code>ui5-busy-indicator</code> instance.
  * <br>
- * <b>Note:</b> Since <code>ui5-busyindicator</code> has <code>display: inline-block;</code> by default and no width of its own,
+ * <b>Note:</b> Since <code>ui5-busy-indicator</code> has <code>display: inline-block;</code> by default and no width of its own,
  * whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator as well.
  *
+ * <h4>When to use:</h4>
+ * <ul>
+ * <li>The user needs to be able to cancel the operation.</li>
+ * <li>Only part of the application or a particular control is affected.</li>
+ * </ul>
+ *
+ * <h4>When not to use:</h4>
+ * <ul>
+ * <li>The operation takes less than one second.</li>
+ * <li>You need to block the screen and prevent the user from starting another activity.</li>
+ * <li>Do not show multiple busy indicators at once.</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/BusyIndicator";</code>
@@ -98,31 +141,34 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.BusyIndicator
  * @extends UI5Element
- * @tagname ui5-busyindicator
+ * @tagname ui5-busy-indicator
  * @public
  * @since 0.12.0
  */
 class BusyIndicator extends UI5Element {
 	constructor() {
 		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-		this._preventHandler = this._preventEvent.bind(this);
+		this._keydownHandler = this._handleKeydown.bind(this);
+		this._preventEventHandler = this._preventEvent.bind(this);
 	}
 
 	onEnterDOM() {
-		this.addEventListener("keyup", this._preventHandler, {
+		this.addEventListener("keydown", this._keydownHandler, {
 			capture: true,
 		});
-
-		this.addEventListener("keydown", this._preventHandler, {
+		this.addEventListener("keyup", this._preventEventHandler, {
 			capture: true,
 		});
 	}
 
 	onExitDOM() {
-		this.removeEventListener("keyup", this._preventHandler, true);
-		this.removeEventListener("keydown", this._preventHandler, true);
+		if (this._busyTimeoutId) {
+			clearTimeout(this._busyTimeoutId);
+			delete this._busyTimeoutId;
+		}
+
+		this.removeEventListener("keydown", this._keydownHandler, true);
+		this.removeEventListener("keyup", this._preventEventHandler, true);
 	}
 
 	static get metadata() {
@@ -146,31 +192,75 @@ class BusyIndicator extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		BusyIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	get ariaTitle() {
-		return this.i18nBundle.getText(BUSY_INDICATOR_TITLE);
+		return BusyIndicator.i18nBundle.getText(BUSY_INDICATOR_TITLE);
+	}
+
+	get labelId() {
+		return this.text ? `${this._id}-label` : undefined;
 	}
 
 	get classes() {
 		return {
 			root: {
-				"ui5-busyindicator-root": true,
-				"ui5-busyindicator-root--ie": isIE(),
+				"ui5-busy-indicator-root": true,
+				"ui5-busy-indicator-root--ie": isIE(),
 			},
 		};
 	}
 
-	get slotTabIndex() {
-		return this.active ? -1 : 0;
+	onBeforeRendering() {
+		if (this.active) {
+			if (!this._isBusy && !this._busyTimeoutId) {
+				this._busyTimeoutId = setTimeout(() => {
+					delete this._busyTimeoutId;
+					this._isBusy = true;
+				}, Math.max(0, this.delay));
+			}
+		} else {
+			if (this._busyTimeoutId) {
+				clearTimeout(this._busyTimeoutId);
+				delete this._busyTimeoutId;
+			}
+			this._isBusy = false;
+		}
+	}
+
+	_handleKeydown(event) {
+		if (!this._isBusy) {
+			return;
+		}
+
+		event.stopImmediatePropagation();
+
+		// move the focus to the last element in this DOM and let TAB continue to the next focusable element
+		if (isTabNext(event)) {
+			this.focusForward = true;
+			this.shadowRoot.querySelector("[data-ui5-focus-redirect]").focus();
+			this.focusForward = false;
+		}
 	}
 
 	_preventEvent(event) {
-		if (this.active) {
+		if (this._isBusy) {
 			event.stopImmediatePropagation();
 		}
 	}
+
+	/**
+	 * Moves the focus to busy area when coming with SHIFT + TAB
+	 */
+	_redirectFocus(event) {
+		if (this.focusForward) {
+			return;
+		}
+
+		event.preventDefault();
+		this.shadowRoot.querySelector(".ui5-busy-indicator-busy-area").focus();
+	}
 }
 
 BusyIndicator.define();

package/dist/Button.js

@@ -1,11 +1,16 @@
 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/Keys.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
-import { isPhone, isTablet } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+	isPhone,
+	isTablet,
+	isCombi,
+	isSafari,
+} from "@ui5/webcomponents-base/dist/Device.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -28,10 +33,19 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
 		/**
-		 * Defines the <code>ui5-button</code> design.
+		 * Defines the component design.
+		 *
 		 * <br><br>
-		 * <b>Note:</b> Available options are "Default", "Emphasized", "Positive",
-		 * "Negative", and "Transparent".
+		 * <b>The available values are:</b>
+		 *
+		 * <ul>
+		 * <li><code>Default</code></li>
+		 * <li><code>Emphasized</code></li>
+		 * <li><code>Positive</code></li>
+		 * <li><code>Negative</code></li>
+		 * <li><code>Transparent</code></li>
+		 * <li><code>Attention</code></li>
+		 * </ul>
 		 *
 		 * @type {ButtonDesign}
 		 * @defaultvalue "Default"
@@ -43,9 +57,8 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-button</code> is disabled
-		 * (default is set to <code>false</code>).
-		 * A disabled <code>ui5-button</code> can't be pressed or
+		 * Defines whether the component is disabled.
+		 * A disabled component can't be pressed or
 		 * focused, and it is not in the tab chain.
 		 *
 		 * @type {boolean}
@@ -57,12 +70,10 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the icon to be displayed as graphical element within the <code>ui5-button</code>.
+		 * Defines the icon to be displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 * Example:
-		 * <br>
-		 * <pre>ui5-button 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>.
 		 *
@@ -75,7 +86,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the icon should be displayed after the <code>ui5-button</code> text.
+		 * Defines whether the icon should be displayed after the component text.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -86,23 +97,10 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the size of the icon inside the <code>ui5-button</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		iconSize: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * When set to <code>true</code>, the <code>ui5-button</code> will
+		 * When set to <code>true</code>, the component will
 		 * automatically submit the nearest form element upon <code>press</code>.
 		 * <br><br>
-		 * <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
+		 * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
 		 * @type {boolean}
@@ -116,7 +114,7 @@ const metadata = {
 		/**
 		 * Defines the tooltip of the button.
 		 * <br>
-		 * <b>Important:</b> Tooltips should only be set to icon only buttons.
+		 * <b>Note:</b> Tooltips should only be set to icon-only buttons.
 		 * @type {string}
 		 * @defaultvalue: ""
 		 * @private
@@ -127,7 +125,7 @@ const metadata = {
 		},
 
 		/**
-		 * Used to switch the active state (pressed or not) of the <code>ui5-button</code>.
+		 * Used to switch the active state (pressed or not) of the component.
 		 * @private
 		 */
 		active: {
@@ -159,25 +157,27 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the button
+		 * Sets the accessible aria name of the component.
+		 *
 		 * @type {String}
 		 * @defaultvalue: ""
-		 * @private
-		 * @since 1.0.0-rc.7
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the button
+		 * Receives id(or many ids) of the elements that label the component.
+		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.7
+		 * @public
+		 * @since 1.1.0
 		 */
-		ariaLabelledby: {
+		 accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
@@ -229,7 +229,7 @@ const metadata = {
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-button</code>.
+		 * Defines the text of the component.
 		 * <br><br>
 		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
@@ -244,7 +244,7 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-button</code> is activated either with a
+		 * Fired when the component is activated either with a
 		 * mouse/tap or by using the Enter or Space key.
 		 * <br><br>
 		 * <b>Note:</b> The event will not be fired if the <code>disabled</code>
@@ -281,6 +281,15 @@ const metadata = {
  * its style to provide visual feedback to the user that it is pressed or hovered over with
  * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.
  *
+ * <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-button</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>button - Used to style the native button element</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Button";</code>
@@ -328,12 +337,10 @@ class Button extends UI5Element {
 
 			isGlobalHandlerAttached = true;
 		}
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onEnterDOM() {
-		this._isTouch = isPhone() || isTablet();
+		this._isTouch = (isPhone() || isTablet()) && !isCombi();
 	}
 
 	onBeforeRendering() {
@@ -355,6 +362,10 @@ class Button extends UI5Element {
 		if (FormSupport) {
 			FormSupport.triggerFormSubmit(this);
 		}
+
+		if (isSafari()) {
+			this.getDomRef().focus();
+		}
 	}
 
 	_onmousedown(event) {
@@ -439,10 +450,6 @@ class Button extends UI5Element {
 		};
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
 	static typeTextMappings() {
 		return {
 			"Positive": BUTTON_ARIA_TYPE_ACCEPT,
@@ -452,7 +459,7 @@ class Button extends UI5Element {
 	}
 
 	get buttonTypeText() {
-		return this.i18nBundle.getText(Button.typeTextMappings()[this.design]);
+		return Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);
 	}
 
 	get tabIndexValue() {
@@ -469,17 +476,12 @@ class Button extends UI5Element {
 		return this.iconOnly && !this.title;
 	}
 
-	get styles() {
-		return {
-			icon: {
-				width: this.iconSize,
-				height: this.iconSize,
-			},
-		};
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Button.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }