feat(ui5-busyindicator): initial implementation

packages/main/bundle.esm.js

@@ -10,6 +10,7 @@ import Islamic from "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js";
 import Japanese from "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js";
 import Persian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js";
 
+import BusyIndicator from "./dist/BusyIndicator.js";
 import Button from "./dist/Button.js";
 import CheckBox from "./dist/CheckBox.js";
 import Card from "./dist/Card.js";

packages/main/src/BusyIndicator.hbs

@@ -0,0 +1,5 @@
+<div class="{{classes.main}}">
+	<div class="ui5-busyindicator-circle circle-animation-0"></div>
+	<div class="ui5-busyindicator-circle circle-animation-1"></div>
+	<div class="ui5-busyindicator-circle circle-animation-2"></div>
+</div>

packages/main/src/BusyIndicator.js

@@ -0,0 +1,82 @@
+import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
+import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
+import BusyIndicatorRenderer from "./build/compiled/BusyIndicatorRenderer.lit.js";
+
+// Styles
+import busyIndicatorCss from "./themes/BusyIndicator.css.js";
+
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+import BusyIndicatorType from "./types/BusyIndicatorType.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-busyindicator",
+	properties: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
+		/**
+		 * Defines the size of the <code>ui5-busyindicator</code>.
+		 * </br></br>
+		 * <b>Note:</b> Available options are "Small", "Medium", "Large"
+		 *
+		 * @type {BusyIndicatorType}
+		 * @defaultvalue "Large"
+		 * @public
+		 */
+		size: { type: BusyIndicatorType, defaultValue: BusyIndicatorType.Large },
+	},
+};
+
+/**
+ * @class
+ *
+ * <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.
+ *
+ * <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>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/BusyIndicator";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.BusyIndicator
+ * @extends UI5Element
+ * @tagname ui5-busyindicator
+ * @public
+ */
+class BusyIndicator extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get styles() {
+		return busyIndicatorCss;
+	}
+
+	static get renderer() {
+		return BusyIndicatorRenderer;
+	}
+
+	get classes() {
+		return {
+			main: {
+				"ui5-busyindicator-wrapper": true,
+				[`ui5-busyindicator-${this.size.toLowerCase()}`]: true,
+			},
+		};
+	}
+}
+
+Bootstrap.boot().then(_ => {
+	BusyIndicator.define();
+});
+
+export default BusyIndicator;

packages/main/src/themes/BusyIndicator.css

@@ -0,0 +1,94 @@
+:host(ui5-busyindicator) span[data-sap-ui-wc-root] {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+}
+
+ui5-busyindicator span[data-sap-ui-wc-root] {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-busyindicator-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ui5-busyindicator-circle {
+	display: flex;
+	background-color: var(--ui5-busyindicator-color);
+	border-radius: 50%;
+}
+
+/* Belize specific */
+.ui5-busyindicator-circle::before {
+	content: "";
+    width: 100%;
+    height: 100%;
+	border-radius: 100%;
+}
+
+.ui5-busyindicator-small {
+	width: 3rem;
+    height: 1rem;
+}
+
+.ui5-busyindicator-medium {
+	width: 5rem;
+    height: 2rem;
+}
+
+.ui5-busyindicator-large {
+	width: 8rem;
+	height: 3rem;
+}
+
+.ui5-busyindicator-small > .ui5-busyindicator-circle {
+	width: 0.125rem;
+	height: 0.125rem;
+	margin: 0 0.2rem;
+}
+
+.ui5-busyindicator-medium > .ui5-busyindicator-circle {
+	width: 0.5rem;
+	height: 0.5rem;
+	margin: 0 0.4rem;
+}
+
+.ui5-busyindicator-large > .ui5-busyindicator-circle {
+	width: 1rem;
+	height: 1rem;
+	margin: 0 .75rem;
+}
+
+.circle-animation-0 {
+	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circle-animation-1 {
+	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+	animation-delay: 200ms;
+}
+
+.circle-animation-2 {
+	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+	animation-delay: 400ms;
+}
+
+@keyframes grow {
+	0%, 50%, 100% {
+		-webkit-transform: scale(1.0);
+		-moz-transform: scale(1.0);
+		-ms-transform: scale(1.0);
+		transform: scale(1.0);
+	}
+
+	25% {
+		-webkit-transform: scale(2.5);
+		-moz-transform: scale(2.5);
+		-ms-transform: scale(2.5);
+		transform: scale(2.5);
+	}
+}

packages/main/src/themes/base/BusyIndicator-parameters.css

@@ -0,0 +1,3 @@
+:root {
+    --ui5-busyindicator-color: var(--sapUiContentIconColor);	
+}

packages/main/src/themes/sap_belize/BusyIndicator-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/BusyIndicator-parameters.css";
+
+:root {
+    --ui5-busyindicator-color: var(--sapUiAccent6);
+}

packages/main/src/themes/sap_belize/parameters-bundle.css

@@ -2,6 +2,7 @@
 @import "./global-parameters.css";
 
 @import "./Button-parameters.css";
+@import "./BusyIndicator-parameters.css";
 @import "./Popover-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";

packages/main/src/themes/sap_belize_hcb/BusyIndicator-parameters.css

@@ -0,0 +1 @@
+@import "../base/BusyIndicator-parameters.css";

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -2,6 +2,7 @@
 @import "./global-parameters.css";
 
 @import "./Button-parameters.css";
+@import "./BusyIndicator-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";

packages/main/src/themes/sap_fiori_3/BusyIndicator-parameters.css

@@ -0,0 +1 @@
+@import "../base/BusyIndicator-parameters.css";

packages/main/src/themes/sap_fiori_3/parameters-bundle.css

@@ -2,6 +2,7 @@
 @import "./global-parameters.css";
 
 @import "./Button-parameters.css";
+@import "./BusyIndicator-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
 @import "./DatePicker-parameters.css";

packages/main/src/types/BusyIndicatorType.js

@@ -0,0 +1,31 @@
+import DataType from "@ui5/webcomponents-base/src/types/DataType.js";
+
+/**
+ * Different types of BusyIndicator.
+ */
+const BusyIndicatorTypes = {
+	/**
+	 * small size
+	 */
+	Small: "Small",
+
+	/**
+	 * medium size
+	 */
+	Medium: "Medium",
+
+	/**
+	 * large size
+	 */
+	Large: "Large",
+};
+
+class BusyIndicatorType extends DataType {
+	static isValid(value) {
+		return !!BusyIndicatorTypes[value];
+	}
+}
+
+BusyIndicatorType.generataTypeAcessors(BusyIndicatorTypes);
+
+export default BusyIndicatorType;

packages/main/test/sap/ui/webcomponents/main/pages/BusyIndicator.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<title>Busy Indicator</title>
+	<script>
+		delete Document.prototype.adoptedStyleSheets
+	</script>
+
+	<script data-id="sap-ui-config" type="application/json">
+		{
+			"rtl": false,
+			"compactSize": false
+		}
+	</script>
+
+	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
+	</script>
+</head>
+
+<body>
+	<ui5-busyindicator id="indicator1"></ui5-busyindicator>
+	<ui5-busyindicator id="indicator2" hidden></ui5-busyindicator>
+</body>
+</html>

packages/main/test/sap/ui/webcomponents/main/pages/Components.html

@@ -21,6 +21,7 @@
 </head>
 
 <body>
+	<ui5-busyindicator id="busyIndicator"></ui5-busyindicator>
 	<ui5-button id="btn">Primary button</ui5-button>
 	<ui5-togglebutton id="toggleBtn">Toggle button</ui5-togglebutton>
 	<ui5-input id="inp"></ui5-input>
@@ -35,6 +36,7 @@
 	<ui5-panel id="panel"></ui5-panel>
 
 	<!-- hidden web components -->
+	<ui5-busyindicator id="busyIndicator2" hidden></ui5-busyindicator>
 	<ui5-button id="btn2" hidden>Primary button</ui5-button>
 	<ui5-card id="card2" hidden header-text="Primary card"></ui5-card>
 	<ui5-checkbox id="cb2" text="I agree" hidden></ui5-checkbox>

packages/main/test/sap/ui/webcomponents/main/samples/BusyIndicator.sample.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>&lt;ui5-busyindicator&gt;</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<link rel="stylesheet" href="../../../../../../www/home/core.css">
+
+	<script src="../../../../../../test-resources/playground/libs/google-code-prettify/prettify.js"></script>
+	<link href="../../../../../../test-resources/playground/libs/google-code-prettify/sunburst.css" type="text/css" rel="stylesheet">
+
+	<link href="../../../../../../test-resources/playground/css/api.css" type="text/css" rel="stylesheet">
+
+	<script data-id="sap-ui-config" type="application/json">
+		{
+			"theme": "sap_fiori_3",
+			"language": "EN"
+		}
+	</script>
+
+	<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
+		type="module"
+	>
+	</script>
+
+	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
+	</script>
+
+	<script defer src="../../../../../../www/samples/settings.js"></script>
+	<script>delete Document.prototype.adoptedStyleSheets;</script>
+
+	<style>
+		.center {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+		}
+	</style>
+</head>
+<body class="sapUiBody example-wrapper">
+
+	<header>
+		<div class="control-header">Busy Indicator</div>
+		<div style="margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; color: #666666;">&lt;ui5-busyindicator&gt;</div>
+	</header>
+
+	<section>
+			<h3>Busy Indicator with different size</h3>
+			<div class="snippet center">
+				<ui5-busyindicator size="Small"></ui5-busyindicator>
+				<ui5-busyindicator size="Medium"></ui5-busyindicator>
+				<ui5-busyindicator size="Large"></ui5-busyindicator>
+			</div>
+		<pre class="prettyprint lang-html"><xmp>
+<div>
+	<ui5-busyindicator size="Small"></ui5-busyindicator>
+	<ui5-busyindicator size="Medium"></ui5-busyindicator>
+	<ui5-busyindicator size="Large"></ui5-busyindicator>
+</div>
+		</xmp></pre>
+		</section>
+
+	<script>
+		window.prettyPrint();
+	</script>
+</body>
+
+</html>

packages/main/test/specs/Components.spec.js

@@ -75,6 +75,7 @@ describe("General assertions", () => {
 
 	it("tests components with 'hidden' property are not visible", () => {
 		[
+			browser.$("#busyIndicator2"),
 			browser.$("#btn2"),
 			browser.$("#card2"),
 			browser.$("#cb2"),