From b287d541497b38ee3693eac366a3c92f4eb66afe Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 7 Nov 2024 17:24:31 -0700
Subject: [PATCH] Revert "Change template to webcomponent", not ready for
 pushing

This reverts commit e107b48c3a2f7420c5fd03011beb59902257e734.
---
 api/js/etemplate/Et2Template/Et2Template.md   |  11 -
 .../Et2Template/Et2Template.styles.ts         |  26 -
 api/js/etemplate/Et2Template/Et2Template.ts   | 512 ------------------
 api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts    |   4 +-
 api/js/etemplate/et2_widget_template.ts       | 262 ++++++++-
 api/js/etemplate/etemplate2.ts                |  66 ++-
 6 files changed, 313 insertions(+), 568 deletions(-)
 delete mode 100644 api/js/etemplate/Et2Template/Et2Template.md
 delete mode 100644 api/js/etemplate/Et2Template/Et2Template.styles.ts
 delete mode 100644 api/js/etemplate/Et2Template/Et2Template.ts

diff --git a/api/js/etemplate/Et2Template/Et2Template.md b/api/js/etemplate/Et2Template/Et2Template.md
deleted file mode 100644
index 0caebbbc14..0000000000
--- a/api/js/etemplate/Et2Template/Et2Template.md
+++ /dev/null
@@ -1,11 +0,0 @@
-The template displays a loader while it is loading the file, and is replaced with the actual content once all widgets
-are ready.
-
-```html:preview
-<style>
-    et2-template {
-        min-height: 5em;
-    }
-</style>
-<et2-template></et2-template>
-```
diff --git a/api/js/etemplate/Et2Template/Et2Template.styles.ts b/api/js/etemplate/Et2Template/Et2Template.styles.ts
deleted file mode 100644
index 0768eed56b..0000000000
--- a/api/js/etemplate/Et2Template/Et2Template.styles.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {css} from 'lit';
-
-export default css`
-	:host {
-		display: block;
-		position: relative;
-		height: 100%;
-	}
-
-	.template--loading {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		min-height: 5rem;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		background-color: var(--sl-panel-background-color);
-		color: var(--application-color, var(--primary-color));
-
-		z-index: var(--sl-z-index-dialog);
-
-		font-size: 5rem;
-	}
-`;
\ No newline at end of file
diff --git a/api/js/etemplate/Et2Template/Et2Template.ts b/api/js/etemplate/Et2Template/Et2Template.ts
deleted file mode 100644
index 1ecd182711..0000000000
--- a/api/js/etemplate/Et2Template/Et2Template.ts
+++ /dev/null
@@ -1,512 +0,0 @@
-/**
- * EGroupware eTemplate2 - Email 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, nothing} from "lit";
-import {Et2Widget} from "../Et2Widget/Et2Widget";
-import shoelace from "../Styles/shoelace";
-import styles from "./Et2Template.styles";
-import {property} from "lit/decorators/property.js";
-import {customElement} from "lit/decorators/custom-element.js";
-import {etemplate2} from "../etemplate2";
-import {et2_loadXMLFromURL} from "../et2_core_xml";
-import {Et2InputWidgetInterface} from "../Et2InputWidget/Et2InputWidget";
-import {egw, IegwAppLocal} from "../../jsapi/egw_global";
-import {until} from "lit/directives/until.js";
-import {classMap} from "lit/directives/class-map.js";
-import {et2_arrayMgr} from "../et2_core_arrayMgr";
-
-// @ts-ignore
-/**
- * @summary Load & populate a template (.xet file)
- *
- *
- * @event load - Emitted when all elements are loaded
- *
- * @csspart template - Wrapper around template content
- *
- * @cssproperty [--height=5] - The maximum height of the widget, to limit size when you have a lot of addresses.  Set by rows property, when set.
- */
-@customElement("et2-template")
-export class Et2Template extends Et2Widget(LitElement)
-{
-
-	static get styles()
-	{
-		return [
-			shoelace,
-			super.styles,
-			styles
-		];
-	}
-
-	/**
-	 * Name / ID of template with optional cache-buster ('?'+filemtime of template on server)
-	 * Template can be <app>.<template_file>.<template> form or short <template>.
-	 * To use the short form, the file must already be loaded.
-	 */
-	@property()
-	template : string;
-
-	/**
-	 * Url of template
-	 * A full URL to load template,  including cache-buster ('?'+filemtime of template on server)
-	 * @type {string}
-	 */
-	@property()
-	url : string;
-
-	/**
-	 * Content index
-	 *
-	 * Used for passing in specific content to the template other than what it would get by ID.
-	 * @type {string}
-	 */
-	@property()
-	content : string;
-
-	protected loading : Promise<void>;
-	private __egw : IegwAppLocal = null;
-
-
-	constructor(egw? : IegwAppLocal)
-	{
-		super();
-
-		if(egw)
-		{
-			this.__egw = egw;
-		}
-
-		this.loading = Promise.resolve();
-	}
-
-	connectedCallback() : void
-	{
-		super.connectedCallback();
-		this.addEventListener("load", this.handleLoad);
-
-		if(this.template || this.id)
-		{
-			this.load();
-		}
-	}
-
-	disconnectedCallback() : void
-	{
-		super.disconnectedCallback();
-		this.removeEventListener("load", this.handleLoad);
-	}
-
-	async getUpdateComplete() : Promise<boolean>
-	{
-		const result = await super.getUpdateComplete();
-		await this.loading;
-
-		return result;
-	}
-
-	/**
-	 * Searches for a DOM widget by id in the tree, descending into the child levels.
-	 *
-	 * @param _id is the id you're searching for
-	 */
-	getDOMWidgetById(_id) : typeof Et2Widget | null
-	{
-		let widget = this.getWidgetById(_id);
-		if(widget && (widget instanceof HTMLElement || widget.instanceOf(Et2Widget)))
-		{
-			return <typeof Et2Widget>widget;
-		}
-		return null
-	}
-
-	/**
-	 * Searches for a Value widget by id in the tree, descending into the child levels.
-	 *
-	 * @param _id is the id you're searching for
-	 */
-	getInputWidgetById(_id) : Et2InputWidgetInterface | null
-	{
-		let widget = <any>this.getWidgetById(_id);
-		// instead of checking widget to be an instance of valueWidget (which would create a circular dependency)
-		// we check for the interface/methods of valueWidget
-		if(widget && typeof widget.get_value === 'function' && typeof widget.set_value === 'function')
-		{
-			return <Et2InputWidgetInterface>widget;
-		}
-		return null
-	}
-
-	/**
-	 * Set the value for a child widget, specified by the given ID
-	 *
-	 * @param id  string The ID you're searching for
-	 * @param value Value for the widget
-	 *
-	 * @return Returns the result of widget's set_value(), though this is usually undefined
-	 *
-	 * @throws Error If the widget cannot be found or it does not have a set_value() function
-	 */
-	setValueById(id : string, value) : any
-	{
-		let widget = this.getWidgetById(id);
-		if(!widget)
-		{
-			throw 'Could not find widget ' + id;
-		}
-
-		// Don't care about what class it is, just that it has the function
-		// @ts-ignore
-		if(typeof widget.set_value !== 'function')
-		{
-			throw 'Widget ' + id + ' does not have a set_value() function';
-		}
-
-		// @ts-ignore
-		return widget.set_value(value);
-	}
-
-	/**
-	 * Get the current value of a child widget, specified by the given ID
-	 *
-	 * This is the current value of the widget, which may be different from the original value given in content
-	 *
-	 * @param id  string The ID you're searching for
-	 * @throws Error If the widget cannot be found or it does not have a set_value() function
-	 */
-	getValueById(id : string)
-	{
-		let widget = this.getWidgetById(id);
-		if(!widget)
-		{
-			throw 'Could not find widget ' + id;
-		}
-
-		// Don't care about what class it is, just that it has the function
-		// @ts-ignore
-		if(typeof widget.get_value !== 'function' && typeof widget.value == "undefined")
-		{
-			throw 'Widget ' + id + ' does not have a get_value() function';
-		}
-
-		// @ts-ignore
-		return typeof widget.get_value == "function" ? widget.get_value() : widget.value;
-	}
-
-	/**
-	 * Set the value for a child widget, specified by the given ID
-	 *
-	 * @param id  string The ID you're searching for
-	 * @throws Error If the widget cannot be found, or it does not have a set_value() function
-	 */
-	setDisabledById(id : string, value : boolean)
-	{
-		let widget = this.getWidgetById(id);
-		if(!widget)
-		{
-			throw 'Could not find widget ' + id;
-		}
-
-		// Don't care about what class it is, just that it has the function
-		// @ts-ignore
-		if(typeof widget.set_disabled !== 'function')
-		{
-			throw 'Widget ' + id + ' does not have a set_disabled() function';
-		}
-
-		// @ts-ignore
-		return widget.set_disabled(value);
-	}
-
-	public egw() : IegwAppLocal
-	{
-		if(this.__egw)
-		{
-			return this.__egw;
-		}
-		else
-		{
-			return super.egw();
-		}
-	}
-
-	/**
-	 * Get the template XML and create widgets from it
-	 *
-	 * Asks the server if we don't have that template on the client yet, then takes the template
-	 * node and goes through it, creating widgets.
-	 *
-	 * @returns {Promise<void>}
-	 * @protected
-	 */
-	protected async load(newContent? : object)
-	{
-		if(typeof newContent != "undefined")
-		{
-			this.setArrayMgr("content", new et2_arrayMgr(newContent));
-		}
-		this.loading = new Promise(async(resolve, reject) =>
-		{
-			let xml = await this.findTemplate();
-			// Read the XML structure of the requested template
-			if(typeof xml != 'undefined')
-			{
-				console.time("loadFromXML");
-				this.loadFromXML(xml);
-				console.timeEnd("loadFromXML");
-			}
-			else
-			{
-				reject("Could not find template");
-				return;
-			}
-
-			// Wait for widgets to be complete
-			await this.loadFinished();
-			if(egw.debug_level() >= 4 && console.timeStamp)
-			{
-				console.timeEnd("Template load");
-			}
-			console.groupEnd();
-			resolve();
-
-			this.dispatchEvent(new CustomEvent("load", {
-				bubbles: true,
-				composed: true,
-				detail: this
-			}));
-		});
-		return this.loading;
-	}
-
-
-	/**
-	 * Find the template XML node, either from the local cache or the server
-	 *
-	 * @returns {Promise<any>}
-	 * @protected
-	 */
-	protected async findTemplate() : Promise<Node>
-	{
-		// Find template name
-		const parts = (this.template || this.id).split('?');
-		const cache_buster = parts.length > 1 ? parts.pop() : null;
-		let template_name = parts.pop();
-
-		console.groupCollapsed("Loading template " + template_name);
-		if(egw.debug_level() >= 4 && console.timeStamp)
-		{
-			console.timeStamp("Begin rendering template");
-			console.time("Template load");
-		}
-
-		// Check to see if the template is already known / loaded into global ETemplate cache
-		let xml = etemplate2.templates[template_name];
-
-		// Check to see if ID is short form --> prepend parent/top-level name
-		if(!xml && template_name.indexOf('.') < 0)
-		{
-			const root = this.getRoot();
-			const top_name = root && root.getInstanceManager() ? root.getInstanceManager().name : null;
-			if(top_name && template_name.indexOf('.') < 0)
-			{
-				template_name = top_name + '.' + template_name
-				xml = etemplate2.templates[template_name];
-			}
-		}
-
-		// Ask the server for the template
-		if(!xml)
-		{
-			let templates = await et2_loadXMLFromURL(this.getUrl(), null, this, this.loadFailed);
-
-			// Scan the file for templates and store them
-			let fallback;
-			for(let i = 0; i < templates.childNodes.length; i++)
-			{
-				const template = templates.childNodes[i];
-				if(template.nodeName.toLowerCase() != "template")
-				{
-					continue;
-				}
-				etemplate2.templates[template.getAttribute("id")] = template;
-				if(template.getAttribute("id") == template_name)
-				{
-					xml = template;
-				}
-				fallback = template;
-			}
-			// Take last template in the file if we had no name
-			if(!xml && !template_name)
-			{
-				xml = fallback;
-			}
-		}
-		return xml;
-	}
-
-	/**
-	 * The template has been loaded, wait for child widgets to be complete.
-	 *
-	 * For webComponents, we wait for the widget's updateComplete.
-	 * For legacy widgets, we let them finish and wait for their doLoadingFinished Promise
-	 *
-	 * @protected
-	 */
-	protected loadFinished()
-	{
-		console.time("loadFinished");
-		// List of Promises from widgets that are not quite fully loaded
-		let deferred = [];
-
-		// Inform the widget tree that it has been successfully loaded.
-		super.loadingFinished(deferred);
-
-		// Don't wait for ourselves, it will never happen
-		deferred = deferred.filter((d) => { return d.widget !== this});
-
-		let ready = false;
-
-		// Wait for everything to be loaded, then finish it up.  Use timeout to give anything else a chance
-		// to run.
-		return Promise.race([
-			Promise.all(deferred).then(() => ready = true),
-			// If loading takes too long, give some feedback so we can try to track down why
-			new Promise((resolve) =>
-			{
-				setTimeout(() =>
-					{
-						if(ready)
-						{
-							return;
-						}
-						this.loadFailed("Load timeout");
-						console.debug("This is the deferred widget list. Look for widgets still pending to find the problem", deferred);
-						resolve();
-					}, 10000
-				);
-			})
-		]).then(() =>
-		{
-			console.timeEnd("loadFinished");
-		});
-	}
-
-	loadFailed(reason? : any)
-	{
-		this.egw().debug("error", "Loading failed '" + (this.template ?? this.id) + "' @ " + this.getUrl() + (reason ? " \n" + reason : ""));
-	}
-
-	protected getUrl()
-	{
-		if(this.url)
-		{
-			return this.url;
-		}
-
-		const parts = (this.template || this.id).split('?');
-		const cache_buster = parts.length > 1 ? parts.pop() : null;
-		let template_name = parts.pop();
-
-		const splitted = template_name.split('.');
-		const app = splitted.shift();
-		let url = this.egw().link(
-			'/' + app + "/templates/default/" + splitted.join('.') + ".xet",
-			{download: cache_buster ? cache_buster : (new Date).valueOf()}
-		);
-
-		// if we have no cache-buster, reload daily
-		if(url.indexOf('?') === -1)
-		{
-			url += '?download=' + ((new Date).valueOf() / 86400 | 0).toString();
-		}
-		return url;
-	}
-
-	public get app()
-	{
-		const parts = (this.template || this.id).split('?');
-		const cache_buster = parts.length > 1 ? parts.pop() : null;
-		let template_name = parts.pop();
-
-		const splitted = template_name.split('.');
-		return splitted.shift() || "";
-	}
-
-	/**
-	 * Override parent to support content attribute
-	 * Templates always have ID set, but seldom do we want them to
-	 * create a namespace based on their ID.
-	 */
-	checkCreateNamespace()
-	{
-		if(this.content)
-		{
-			const old_id = this.id;
-			this.id = this.content;
-			super.checkCreateNamespace.apply(this, arguments);
-			this.id = old_id;
-		}
-	}
-
-	_createNamespace() : boolean
-	{
-		return true;
-	}
-
-	handleLoad(event)
-	{
-		if(this.onload && typeof this.onload == "function")
-		{
-			// Make sure function gets a reference to the widget
-			let args = Array.prototype.slice.call(arguments);
-			if(args.indexOf(this) == -1)
-			{
-				args.push(this);
-			}
-
-			return this.onload.apply(this, args);
-		}
-	}
-
-	loadingTemplate()
-	{
-		let loading = html`
-            <sl-spinner></sl-spinner>`;
-
-
-		return html`
-            <div class="template--loading">${loading}</div>`;
-	}
-
-	render()
-	{
-		const classes = {
-			template: true,
-			'template--disabled': this.disabled,
-			'template--readonly': this.readonly
-		};
-		if(this.app)
-		{
-			classes["template--app-" + this.app] = true;
-		}
-		if(this.layout != "none")
-		{
-			classes["layout-" + this.layout] = true;
-			classes["template--layout-" + this.layout] = true;
-		}
-		return html`
-            <div
-                    part="base"
-                    class=${classMap(classes)}
-            >
-                ${until(this.loading.then(() => nothing), this.loadingTemplate())}
-                <slot></slot>
-            </div>`
-	}
-}
\ No newline at end of file
diff --git a/api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts b/api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts
index c97b40c7dd..46b1be0240 100644
--- a/api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts
+++ b/api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts
@@ -12,10 +12,10 @@ import {loadWebComponent} from "../../Et2Widget/Et2Widget";
 import {et2_directChildrenByTagName, et2_filteredNodeIterator, et2_readAttrWithDefault} from "../../et2_core_xml";
 import {css, PropertyValues} from "lit";
 import shoelace from "../../Styles/shoelace";
+import {et2_createWidget} from "../../et2_core_widget";
 import {colorsDefStyles} from "../../Styles/colorsDefStyles";
 import {Et2InputWidget} from "../../Et2InputWidget/Et2InputWidget";
 import {et2_IResizeable} from "../../et2_core_interfaces";
-import {Et2Template} from "../../Et2Template/Et2Template";
 
 
 export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeable
@@ -456,7 +456,7 @@ export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeab
 		}
 		else
 		{
-			<Et2Template>loadWebComponent('et2-template', tab.widget_options, tab.contentDiv);
+			et2_createWidget('template', tab.widget_options, tab.contentDiv);
 		}
 
 		return tab.contentDiv;
diff --git a/api/js/etemplate/et2_widget_template.ts b/api/js/etemplate/et2_widget_template.ts
index e1b9ea00f9..c2825fdf29 100644
--- a/api/js/etemplate/et2_widget_template.ts
+++ b/api/js/etemplate/et2_widget_template.ts
@@ -8,8 +8,266 @@
  * @author Andreas Stöckel
  */
 
+/*egw:uses
+	et2_core_xml;
+	et2_core_DOMWidget;
+*/
+
+import './et2_core_interfaces';
+import {et2_DOMWidget} from './et2_core_DOMWidget';
+import {ClassWithAttributes} from "./et2_core_inheritance";
+import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
+import {etemplate2} from "./etemplate2";
+import {et2_cloneObject, et2_no_init} from "./et2_core_common";
+import {et2_loadXMLFromURL} from "./et2_core_xml";
+import {egw} from "../jsapi/egw_global";
 
 /**
- * @deprecated use Et2Template
+ * Class which implements the "template" XET-Tag. When the id parameter is set,
+ * the template class checks whether another template with this id already
+ * exists. If yes, this template is removed from the DOM tree, copied and
+ * inserted in place of this template.
  */
-export type et2_template = Et2Template;
\ No newline at end of file
+export class et2_template extends et2_DOMWidget
+{
+	static readonly _attributes : any = {
+		"template": {
+			"name": "Template",
+			"type": "string",
+			"description": "Name / ID of template with optional cache-buster ('?'+filemtime of template on server)",
+			"default": et2_no_init
+		},
+		"group": {
+			// TODO: Not implemented
+			"name": "Group",
+			"description":"Not implemented",
+			//"default": 0
+			"default": et2_no_init
+		},
+		"version": {
+			"name": "Version",
+			"type": "string",
+			"description": "Version of the template"
+		},
+		"lang": {
+			"name": "Language",
+			"type": "string",
+			"description": "Language the template is written in"
+		},
+		"content": {
+			"name": "Content index",
+			"default": et2_no_init,
+			"description": "Used for passing in specific content to the template other than what it would get by ID."
+		},
+		url: {
+			name: "URL of template",
+			type: "string",
+			description: "full URL to load template incl. cache-buster"
+		},
+		"onload": {
+			"name": "onload",
+			"type": "js",
+			"default": et2_no_init,
+			"description": "JS code which is executed after the template is loaded."
+		}
+	};
+
+	content : string;
+	div : HTMLDivElement;
+	loading : Promise<any>;
+
+	/**
+	 * Constructor
+	 */
+	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
+	{
+		// Call the inherited constructor
+		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_template._attributes, _child || {}));
+
+		// Set this early, so it's available for creating namespace
+		if(_attrs.content)
+		{
+			this.content = _attrs.content;
+		}
+		// constructor was called here before!
+
+		this.div = document.createElement("div");
+
+		// Deferred object so we can load via AJAX
+		this.loading = new Promise<any>((resolve, reject) =>
+		{
+
+			// run transformAttributes now, to get server-side modifications (url!)
+			if(_attrs.template)
+			{
+				this.id = _attrs.template;
+				this.transformAttributes(_attrs);
+				this.options = et2_cloneObject(_attrs);
+				_attrs = {};
+			}
+			if((this.id != "" || this.options.template) && !this.options.disabled)
+			{
+				var parts = (this.options.template || this.id).split('?');
+				var cache_buster = parts.length > 1 ? parts.pop() : null;
+				var template_name = parts.pop();
+
+				// Check to see if XML is known
+				var xml = null;
+				var templates = etemplate2.templates;	// use global eTemplate cache
+				if(!(xml = templates[template_name]))
+				{
+					// Check to see if ID is short form --> prepend parent/top-level name
+					if(template_name.indexOf('.') < 0)
+					{
+						var root = _parent ? _parent.getRoot() : null;
+						var top_name = root && root._inst ? root._inst.name : null;
+						if(top_name && template_name.indexOf('.') < 0)
+						{
+							template_name = top_name + '.' + template_name;
+						}
+					}
+					xml = templates[template_name];
+					if(!xml)
+					{
+						// Ask server
+						var url = this.options.url;
+						if(!this.options.url)
+						{
+							var splitted = template_name.split('.');
+							var app = splitted.shift();
+							url = egw.link('/'+ app + "/templates/default/" +
+								splitted.join('.')+ ".xet", {download:cache_buster? cache_buster :(new Date).valueOf()});
+						}
+						// if server did not give a cache-buster, fall back to current time
+						if (url.indexOf('?') == -1) url += '?download='+(new Date).valueOf();
+
+						if(this.options.url || splitted.length)
+						{
+							var fetch_url_callback = function(_xmldoc)
+							{
+								// Scan for templates and store them
+								for(var i = 0; i < _xmldoc.childNodes.length; i++)
+								{
+									var template = _xmldoc.childNodes[i];
+									if(template.nodeName.toLowerCase() != "template")
+									{
+										continue;
+									}
+									templates[template.getAttribute("id")] = template;
+								}
+
+								// Read the XML structure of the requested template
+								if(typeof templates[template_name] != 'undefined')
+								{
+									this.loadFromXML(templates[template_name]);
+								}
+
+								// Update flag
+								resolve();
+							}.bind(this);
+
+							et2_loadXMLFromURL(url, fetch_url_callback, this, function( error) {
+								url = egw.link('/'+ app + "/templates/default/" +
+									splitted.join('.')+ ".xet", {download:cache_buster? cache_buster :(new Date).valueOf()});
+
+								et2_loadXMLFromURL(url, fetch_url_callback, this);
+							});
+						}
+						return;
+					}
+				}
+				if(xml !== null && typeof xml !== "undefined")
+				{
+					this.egw().debug("log", "Loading template from XML: ", template_name);
+					this.loadFromXML(xml);
+					// Don't call this here - done by caller, or on whole widget tree
+					//this.loadingFinished();
+
+					// But resolve the promise
+					resolve();
+				}
+				else
+				{
+					this.egw().debug("warn", "Unable to find XML for ", template_name);
+					reject("Unable to find XML for " + template_name);
+				}
+			}
+			else
+			{
+				// No actual template - not an error, just nothing to do
+				resolve();
+			}
+		});
+	}
+
+	/**
+	 * Override parent to support content attribute
+	 * Templates always have ID set, but seldom do we want them to
+	 * create a namespace based on their ID.
+	 */
+	checkCreateNamespace(_attrs)
+	{
+		if(_attrs.content)
+		{
+			var old_id = _attrs.id;
+			this.id = _attrs.content;
+			super.checkCreateNamespace.apply(this, arguments);
+			this.id = old_id;
+		}
+	}
+
+	_createNamespace() : boolean
+	{
+		return true;
+	}
+
+	getDOMNode()
+	{
+		return this.div;
+	}
+
+	attachToDOM()
+	{
+		if (this.div)
+		{
+			jQuery(this.div)
+				.off('.et2_template')
+				.bind("load.et2_template", this, function(e) {
+					e.data.load.call(e.data, this);
+				});
+		}
+
+		return super.attachToDOM();
+	}
+
+	/**
+	 * Called after the template is fully loaded to handle any onload handlers
+	 */
+	load()
+	{
+		if(typeof this.options.onload == 'function')
+		{
+			// Make sure function gets a reference to the widget
+			var args = Array.prototype.slice.call(arguments);
+			if(args.indexOf(this) == -1) args.push(this);
+
+			return this.options.onload.apply(this, args);
+		}
+	}
+
+	/**
+	 * Override to return the promise for deferred loading
+	 */
+	doLoadingFinished()
+	{
+		// Apply parent now, which actually puts into the DOM
+		super.doLoadingFinished();
+
+		// Fire load event when done loading
+		this.loading.then(function() {jQuery(this).trigger("load");}.bind(this.div));
+
+		// Not done yet, but widget will let you know
+		return this.loading;
+	}
+}
+et2_register_widget(et2_template, ["template"]);
\ No newline at end of file
diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts
index bd37b0f27b..e06be19314 100644
--- a/api/js/etemplate/etemplate2.ts
+++ b/api/js/etemplate/etemplate2.ts
@@ -86,7 +86,6 @@ import './Et2Select/Tag/Et2ThumbnailTag';
 import './Et2Spinner/Et2Spinner';
 import './Et2Switch/Et2Switch';
 import './Et2Switch/Et2SwitchIcon';
-import './Et2Template/Et2Template';
 import './Et2Textarea/Et2Textarea';
 import './Et2Textarea/Et2TextareaReadonly';
 import './Et2Textbox/Et2Textbox';
@@ -157,7 +156,6 @@ import './et2_extension_nextmatch';
 import './et2_extension_customfields';
 import {Et2Tabs} from "./Layout/Et2Tabs/Et2Tabs";
 import {Et2Dialog} from "./Et2Dialog/Et2Dialog";
-import {Et2Template} from "./Et2Template/Et2Template";
 
 
 /**
@@ -185,7 +183,7 @@ export class etemplate2
 	private uniqueId : void | string;
 	private template_base_url : string;
 
-	private _widgetContainer : Et2Template;
+	private _widgetContainer : et2_container;
 	private _DOMContainer : HTMLElement;
 
 	private resize_timeout : number | boolean;
@@ -218,6 +216,7 @@ export class etemplate2
 
 		/**
 		 * Preset the object variable
+		 * @type {et2_container}
 		 */
 		this._widgetContainer = null;
 
@@ -676,17 +675,10 @@ export class etemplate2
 			}
 
 			// Create the basic widget container and attach it to the DOM
-			this._widgetContainer = new Et2Template(egw(currentapp, egw.elemWindow(this._DOMContainer)));
+			this._widgetContainer = new et2_container(null);
+			this._widgetContainer.setApiInstance(egw(currentapp, egw.elemWindow(this._DOMContainer)));
 			this._widgetContainer.setInstanceManager(this);
-			this._widgetContainer.template = this.name;
-			if(_url)
-			{
-				this._widgetContainer.url = _url;
-			}
-			// Set array managers first, or errors will happen
-			this._widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
-			// Template starts loading when added
-			this.DOMContainer.append(this._widgetContainer);
+			this._widgetContainer.setParentDOMNode(this._DOMContainer);
 
 			// store the id to submit it back to server
 			if(_data)
@@ -704,6 +696,14 @@ export class etemplate2
 
 			const _load = function()
 			{
+				egw.debug("log", "Loading template...");
+				if(egw.debug_level() >= 4 && console.timeStamp)
+				{
+					console.timeStamp("Begin rendering template");
+					console.time("Template load");
+					console.time("loadFromXML");
+				}
+
 				// Add into indexed list - do this before, so anything looking can find it,
 				// even if it's not loaded
 				if(typeof etemplate2._byTemplate[_name] == "undefined")
@@ -718,6 +718,16 @@ export class etemplate2
 					this.DOMContainer.setAttribute("slot", etemplate2.templates[this.name].getAttribute("slot"));
 				}
 
+				this._widgetContainer.loadFromXML(etemplate2.templates[this.name]);
+				console.timeEnd("loadFromXML");
+				console.time("deferred");
+
+				// List of Promises from widgets that are not quite fully loaded
+				const deferred = [];
+
+				// Inform the widget tree that it has been successfully loaded.
+				this._widgetContainer.loadingFinished(deferred);
+
 				// Connect to the window resize event
 				jQuery(window).on("resize." + this.uniqueId, this, function(e)
 				{
@@ -737,8 +747,27 @@ export class etemplate2
 				// to run.
 				setTimeout(() =>
 				{
-					this._widgetContainer.updateComplete.then(() =>
+					Promise.race([Promise.all(deferred),
+						// If loading takes too long, give some feedback so we can try to track down why
+						new Promise((resolve) =>
+						{
+							setTimeout(() =>
+								{
+									if(this.ready)
+									{
+										return;
+									}
+									egw.debug("error", "Loading timeout");
+									console.debug("Deferred widget list, look for widgets still pending.", deferred);
+									resolve()
+								}, 10000
+							);
+						})
+					]).then(() =>
 					{
+
+						console.timeEnd("deferred");
+						console.timeStamp("Deferred done");
 						// Clear dirty now that it's all loaded
 						this.widgetContainer.iterateOver((_widget) =>
 						{
@@ -755,7 +784,7 @@ export class etemplate2
 						this.resize();
 
 						// Automatically set focus to first visible input for popups
-						if(this._widgetContainer.egw().is_popup() && jQuery('[autofocus]', this._DOMContainer).focus().length == 0)
+						if(this._widgetContainer._egw.is_popup() && jQuery('[autofocus]', this._DOMContainer).focus().length == 0)
 						{
 							this.focusOnFirstInput();
 						}
@@ -826,6 +855,9 @@ export class etemplate2
 			{
 				if(etemplate2.templates[_name])
 				{
+					// Set array managers first, or errors will happen
+					this._widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
+
 					// Already have it
 					_load.apply(this, []);
 					return;
@@ -844,10 +876,14 @@ export class etemplate2
 					throw e;
 				}
 			}
+			// Split the given data into array manager objects and pass those to the
+			// widget container - do this here because file is loaded async
+			this._widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
 
 			// Asynchronously load the XET file
 			return et2_loadXMLFromURL(_url, function(_xmldoc)
 			{
+
 				// Scan for templates and store them
 				for(let i = 0; i < _xmldoc.childNodes.length; i++)
 				{