- A first webcomponent (et2-button)

- Some mixin logic, not used but available

api/js/etemplate/et2-button.ts

@@ -0,0 +1,19 @@
+/**
+ * EGroupware eTemplate2 - Button widget
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link https://www.egroupware.org
+ * @author Nathan Gray
+ */
+
+
+import {LitElement,html} from "https://cdn.skypack.dev/lit-element";
+import {SlButton} from "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.44/dist/shoelace.js";
+
+export class Et2Button extends SlButton
+{
+	size='small';
+}
+customElements.define("et2-button",Et2Button);

api/js/etemplate/et2_core_inheritance.js

@@ -13,6 +13,55 @@
 import { egw } from "../jsapi/egw_global";
 import { et2_checkType, et2_no_init, et2_validateAttrib } from "./et2_core_common";
 import { et2_implements_registry } from "./et2_core_interfaces";
+// Needed for mixin
+export function mix(superclass) {
+    return new MixinBuilder(superclass);
+}
+export class MixinBuilder {
+    constructor(superclass) {
+        this.superclass = superclass;
+    }
+    with(...mixins) {
+        return mixins.reduce(this.applyMixins, this.superclass);
+    }
+    applyMixins(derivedConstructor, baseConstructor) {
+        Object.getOwnPropertyNames(baseConstructor.prototype)
+            .forEach(name => {
+            Object.defineProperty(derivedConstructor.prototype, name, Object.
+                getOwnPropertyDescriptor(baseConstructor.prototype, name));
+        });
+    }
+    copyProperties(target, source) {
+        for (let key of Reflect.ownKeys(source)) {
+            if (key !== "constructor" && key !== "prototype" && key !== "name") {
+                let desc = Object.getOwnPropertyDescriptor(source, key);
+                Object.defineProperty(target, key, desc);
+            }
+        }
+    }
+}
+// This one from Typescript docs
+export function applyMixins(derivedCtor, constructors) {
+    constructors.forEach((baseCtor) => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+            Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
+                Object.create(null));
+        });
+    });
+}
+/*
+Experiments in using mixins to combine et2_widget & LitElement
+Note that this "works", in that it mixes the code properly.
+It does not work in that the resulting class does not work with et2's inheritance & class checking stuff
+
+// This one to make TypeScript happy?
+interface et2_textbox extends et2_textbox, LitElement {}
+// This one to make the inheritance magic happen
+applyMixins(et2_textbox, [et2_textbox,LitElement]);
+// Make it a real WebComponent
+customElements.define("et2-textbox",et2_textbox);
+
+ */
 export class ClassWithInterfaces {
     /**
      * The implements function can be used to check whether the object

api/js/etemplate/et2_core_inheritance.ts

@@ -16,6 +16,69 @@ import {egw} from "../jsapi/egw_global";
 import {et2_checkType, et2_no_init, et2_validateAttrib} from "./et2_core_common";
 import {et2_implements_registry} from "./et2_core_interfaces";
 
+// Needed for mixin
+export function mix (superclass)
+{
+	return new MixinBuilder(superclass);
+}
+export class MixinBuilder {
+	constructor(superclass) {
+		this.superclass = superclass;
+	}
+
+	with(...mixins) {
+		return mixins.reduce(this.applyMixins, this.superclass);
+	}
+	applyMixins(derivedConstructor: any, baseConstructor: any) {
+		Object.getOwnPropertyNames(baseConstructor.prototype)
+			.forEach(name => {
+				Object.defineProperty(derivedConstructor.prototype,
+					name,
+					Object.
+					getOwnPropertyDescriptor(
+						baseConstructor.prototype,
+						name
+					)
+				);
+			});
+	}
+	 copyProperties(target, source) {
+		for (let key of Reflect.ownKeys(source)) {
+			if (key !== "constructor" && key !== "prototype" && key !== "name") {
+				let desc = Object.getOwnPropertyDescriptor(source, key);
+				Object.defineProperty(target, key, desc);
+			}
+		}
+	}
+}
+
+// This one from Typescript docs
+export function applyMixins(derivedCtor: any, constructors: any[]) {
+  constructors.forEach((baseCtor) => {
+    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+      Object.defineProperty(
+        derivedCtor.prototype,
+        name,
+        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
+          Object.create(null)
+      );
+    });
+  });
+}
+
+/*
+Experiments in using mixins to combine et2_widget & LitElement
+Note that this "works", in that it mixes the code properly.
+It does not work in that the resulting class does not work with et2's inheritance & class checking stuff
+
+// This one to make TypeScript happy?
+interface et2_textbox extends et2_textbox, LitElement {}
+// This one to make the inheritance magic happen
+applyMixins(et2_textbox, [et2_textbox,LitElement]);
+// Make it a real WebComponent
+customElements.define("et2-textbox",et2_textbox);
+
+ */
 export class ClassWithInterfaces
 {
 	/**

api/js/etemplate/etemplate2.js

@@ -28,6 +28,7 @@ import { et2_loadXMLFromURL } from "./et2_core_xml";
 import { et2_nextmatch, et2_nextmatch_header_bar } from "./et2_extension_nextmatch";
 import '../jsapi/egw_json.js';
 import { egwIsMobile } from "../egw_action/egw_action_common.js";
+import './et2-button';
 /* Include all widget classes here, we only care about them registering, not importing anything
 import './et2_widget_template';
 import './et2_widget_grid';

api/js/etemplate/etemplate2.ts

@@ -86,7 +86,7 @@ import {et2_nextmatch, et2_nextmatch_header_bar} from "./et2_extension_nextmatch
 import {et2_tabbox} from "./et2_widget_tabs";
 import '../jsapi/egw_json.js';
 import {egwIsMobile} from "../egw_action/egw_action_common.js";
-
+import './et2-button';
 /* Include all widget classes here, we only care about them registering, not importing anything
 import './et2_widget_template';
 import './et2_widget_grid';