Implement Spinner widget

api/js/etemplate/Et2Spinner/Et2Spinner.ts

@@ -0,0 +1,64 @@
+/**
+ * EGroupware eTemplate2 - Spinner widget
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link https://www.egroupware.org
+ * @author Hadi Nategh
+ */
+
+import {Et2Widget} from "../Et2Widget/Et2Widget";
+import {SlSpinner} from "@shoelace-style/shoelace";
+import shoelace from "../Styles/shoelace";
+import {css} from "@lion/core";
+
+export class Et2Spinner extends Et2Widget(SlSpinner)
+{
+	static get styles()
+	{
+		return [
+			...super.styles,
+			shoelace,
+			css`
+			`
+		];
+	}
+
+	static get properties()
+	{
+		return {
+			...super.properties,
+			/**
+			 * font-size		size is based on font size
+			 * --track-width	The width of the track.
+			 * --track-color	The color of the track.
+			 * --indicator-color	The color of the indicator.
+			 * --speed	The time it takes for the spinner to complete one animation cycle.
+			 */
+			style: {type: String},
+		}
+	}
+
+	constructor()
+	{
+		super();
+		this.style = '';
+	}
+
+	/**
+	 * Handle changes that have to happen based on changes to properties
+	 *
+	 */
+	updated(changedProperties)
+	{
+		super.updated(changedProperties);
+		if (changedProperties.has("style")) {
+			if(this.style)
+			{
+				this.getDOMNode().setAttribute('style', this.style);
+			}
+		}
+	}
+}
+customElements.define("et2-spinner", Et2Spinner);

api/js/etemplate/etemplate2.ts

@@ -77,6 +77,7 @@ import './Et2Select/Tag/Et2Tag';
 import './Et2Select/Tag/Et2CategoryTag';
 import './Et2Select/Tag/Et2EmailTag';
 import './Et2Select/Tag/Et2ThumbnailTag';
+import './Et2Spinner/Et2Spinner';
 import './Et2Switch/Et2Switch';
 import './Et2Textarea/Et2Textarea';
 import './Et2Textbox/Et2Textbox';