Add date readonly, some class optimizing

api/js/etemplate/Et2Date/Et2DateReadonly.ts

@@ -0,0 +1,93 @@
+/**
+ * EGroupware eTemplate2 - Readonly date WebComponent
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package api
+ * @link https://www.egroupware.org
+ * @author Nathan Gray
+ */
+
+
+import {html, LitElement} from "@lion/core";
+import {formatDate, parseDate} from "./Et2Date";
+import {et2_IDetachedDOM} from "../et2_core_interfaces";
+import {Et2Widget} from "../Et2Widget/Et2Widget";
+import {dateStyles} from "./DateStyles";
+
+/**
+ * This is a stripped-down read-only widget used in nextmatch
+ */
+export class Et2DateReadonly extends Et2Widget(LitElement) implements et2_IDetachedDOM
+{
+	protected value : any;
+	protected parser : Function;
+	protected formatter : Function;
+
+	static get styles()
+	{
+		return [
+			...super.styles,
+			dateStyles
+		];
+	}
+
+	static get properties()
+	{
+		return {
+			...super.properties,
+			value: String,
+		}
+	}
+
+	constructor()
+	{
+		super();
+		this.parser = parseDate;
+		this.formatter = formatDate;
+	}
+
+	set_value(value)
+	{
+		this.value = value;
+	}
+
+	render()
+	{
+		let parsed : Date | Boolean = this.value ? this.parser(this.value) : false
+
+		return html`
+            <time ${this.id ? html`id="${this._dom_id}"` : ''}
+                  datetime="${parsed ? this.formatter(<Date>parsed, {dateFormat: "Y-m-d", timeFormat: "H:i:s"}) : ""}">
+                ${this.value ? this.formatter(<Date>parsed) : ''}
+            </time>
+		`;
+	}
+
+	getDetachedAttributes(attrs)
+	{
+		attrs.push("id", "value", "class");
+	}
+
+	getDetachedNodes() : HTMLElement[]
+	{
+		return [<HTMLElement><unknown>this];
+	}
+
+	setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data? : any) : void
+	{
+		// Do nothing, since we can't actually stop being a DOM node...
+	}
+
+	loadFromXML()
+	{
+		// nope
+	}
+
+	loadingFinished()
+	{
+		// already done, I'm a wc with no children
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-date_ro", Et2DateReadonly);

api/js/etemplate/Et2Date/Et2DateTimeReadonly.ts

@@ -1,72 +1,25 @@
-import {css, html, LitElement} from "@lion/core";
+/**
+ * EGroupware eTemplate2 - Readonly date+time WebComponent
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package api
+ * @link https://www.egroupware.org
+ * @author Nathan Gray
+ */
+
 import {formatDateTime, parseDateTime} from "./Et2Date";
-import {et2_IDetachedDOM} from "../et2_core_interfaces";
+import {Et2DateReadonly} from "./Et2DateReadonly";
-import {Et2Widget} from "../Et2Widget/Et2Widget";
-import {dateStyles} from "./DateStyles";
 
 /**
  * This is a stripped-down read-only widget used in nextmatch
  */
-export class Et2DateTimeReadonly extends Et2Widget(LitElement) implements et2_IDetachedDOM
+export class Et2DateTimeReadonly extends Et2DateReadonly
 {
-	private value : any;
+	constructor()
-
-	static get styles()
 	{
-		return [
+		super();
-			...super.styles,
+		this.parser = parseDateTime;
-			dateStyles
+		this.formatter = formatDateTime;
-		];
-	}
-
-	static get properties()
-	{
-		return {
-			...super.properties,
-			value: String,
-		}
-	}
-
-	set_value(value)
-	{
-		this.value = value;
-	}
-
-	render()
-	{
-		let parsed : Date | Boolean = this.value ? parseDateTime(this.value) : false
-
-		return html`
-            <time ${this.id ? html`id="${this._dom_id}"` : ''}
-                  datetime="${parsed ? formatDateTime(<Date>parsed, {dateFormat: "Y-m-d", timeFormat: "H:i:s"}) : ""}">
-                ${this.value ? formatDateTime(<Date>parsed) : ''}
-            </time>
-		`;
-	}
-
-	getDetachedAttributes(attrs)
-	{
-		attrs.push("id", "value", "class");
-	}
-
-	getDetachedNodes() : HTMLElement[]
-	{
-		return [<HTMLElement><unknown>this];
-	}
-
-	setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data? : any) : void
-	{
-		// Do nothing, since we can't actually stop being a DOM node...
-	}
-
-	loadFromXML()
-	{
-		// nope
-	}
-
-	loadingFinished()
-	{
-		// already done, I'm a wc with no children
 	}
 }