New checkbox webcomponent based on SlCheckbox

api/etemplate.php

@@ -17,7 +17,7 @@ const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box))(/?|\s[^>]*)>#m';
 const ADD_ET2_PREFIX_LAST_GROUP = 4;
 
 // unconditional of legacy add et2- prefix to this widgets
-const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<(description|searchbox|textbox|label|avatar|lavatar|image|colorpicker|url(-email|-phone|-fax)?|vfs-mime|vfs-uid|vfs-gid|link|link-[a-z]+|favorites)\s([^>]+)/>#m';
+const ADD_ET2_PREFIX_LEGACY_REGEXP = '#<(description|searchbox|textbox|label|avatar|lavatar|image|colorpicker|checkbox|url(-email|-phone|-fax)?|vfs-mime|vfs-uid|vfs-gid|link|link-[a-z]+|favorites)\s([^>]+)/>#m';
 const ADD_ET2_PREFIX_LEGACY_LAST_GROUP = 3;
 
 // switch evtl. set output-compression off, as we can't calculate a Content-Length header with transparent compression

api/js/etemplate/Et2Checkbox/Et2Checkbox.ts

@@ -0,0 +1,117 @@
+/**
+ * EGroupware eTemplate2 - Checkbox 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 {css} from "@lion/core";
+import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
+import '../Et2Image/Et2Image';
+import {SlCheckbox} from "@shoelace-style/shoelace";
+import shoelace from "../Styles/shoelace";
+
+export class Et2Checkbox extends Et2InputWidget(SlCheckbox)
+{
+	static get styles()
+	{
+		return [
+			...shoelace,
+			...super.styles,
+			css`
+            :host([disabled]) {
+            	display:initial;
+            }
+            `,
+		];
+	}
+
+	static get properties()
+	{
+		return {
+			...super.properties,
+			/* Different value when checked */
+			selectedValue: {type: String},
+			/* Different value when unchecked */
+			unselectedValue: {type: String}
+		}
+	}
+
+	constructor()
+	{
+		super();
+	}
+
+	connectedCallback()
+	{
+		super.connectedCallback();
+
+	}
+
+	get label()
+	{
+		return this._labelNode?.textContent || "";
+	}
+
+	set label(label_text)
+	{
+		if(this._labelNode)
+		{
+			this._labelNode.textContent = label_text;
+		}
+		else
+		{
+			this.updateComplete.then(() =>
+			{
+				this.label = label_text;
+			})
+		}
+	}
+
+	get value()
+	{
+		if(this.checked && this.selectedValue)
+		{
+			return this.selectedValue;
+		}
+		if(!this.checked && this.unselectedValue)
+		{
+			return this.unselectedValue;
+		}
+		return this.checked + "";
+	}
+
+	set value(new_value : string | boolean)
+	{
+		this.requestUpdate("checked");
+		this.indeterminate = false;
+		if(typeof new_value === "boolean" || !this.selectedValue)
+		{
+			this.checked = <boolean>new_value;
+			return;
+		}
+		if(this.selectedValue && new_value == this.selectedValue)
+		{
+			this.checked = true;
+		}
+		else if(this.unselectedValue && new_value == this.unselectedValue)
+		{
+			this.checked = false;
+		}
+		else
+		{
+			this.indeterminate = true;
+		}
+	}
+
+	private get _labelNode()
+	{
+		return this.shadowRoot?.querySelector("slot:not([name])");
+	}
+}
+
+customElements.define("et2-checkbox", Et2Checkbox);

api/js/etemplate/etemplate2.ts

@@ -26,6 +26,7 @@ import {egwIsMobile} from "../egw_action/egw_action_common.js";
 import './Layout/Et2Box/Et2Box';
 import './Et2Avatar/Et2Avatar';
 import './Et2Button/Et2Button';
+import './Et2Checkbox/Et2Checkbox';
 import './Et2Date/Et2Date';
 import './Et2Date/Et2DateDuration';
 import './Et2Date/Et2DateDurationReadonly';