From e239f092e4745844d3bb7902436af8dfae3c1761 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Tue, 15 Oct 2024 10:42:32 -0600
Subject: [PATCH] Et2SwitchIcon & Et2ButtonToggle fixes - use font-size for
 sizing - expose control as part for styling - let server-side treat as
 checkbox

---
 api/js/etemplate/Et2Button/Et2ButtonToggle.ts |  4 +++-
 api/js/etemplate/Et2Switch/Et2SwitchIcon.ts   | 13 ++++++++++++-
 api/src/Etemplate/Widget/Checkbox.php         |  1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/api/js/etemplate/Et2Button/Et2ButtonToggle.ts b/api/js/etemplate/Et2Button/Et2ButtonToggle.ts
index cfc0152340..0580d68342 100644
--- a/api/js/etemplate/Et2Button/Et2ButtonToggle.ts
+++ b/api/js/etemplate/Et2Button/Et2ButtonToggle.ts
@@ -24,7 +24,9 @@ export class Et2ButtonToggle extends Et2SwitchIcon
 				}
 
 				sl-switch {
-					--width: var(--height);
+					font-size: inherit;
+					--width: 1em;
+					--height: 1em;
 				}
 
 				sl-switch:not([checked]) slot[name="off"] {
diff --git a/api/js/etemplate/Et2Switch/Et2SwitchIcon.ts b/api/js/etemplate/Et2Switch/Et2SwitchIcon.ts
index 2dfb27961a..41d1e1ea70 100644
--- a/api/js/etemplate/Et2Switch/Et2SwitchIcon.ts
+++ b/api/js/etemplate/Et2Switch/Et2SwitchIcon.ts
@@ -16,6 +16,9 @@ import {SlSwitch} from "@shoelace-style/shoelace";
  * @cssproperty --height - The height of the switch.
  * @cssproperty --width - The width of the switch.
  * @cssproperty --indicator-color - The color of the selected image
+ *
+ * @csspart form-control-label The label's wrapper
+ * @csspart control The control's wrapper
  */
 @customElement("et2-switch-icon")
 export class Et2SwitchIcon extends Et2InputWidget(LitElement)
@@ -95,7 +98,14 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
 
 	set value(new_value : string | boolean)
 	{
-		this.switch.checked = !!new_value;
+		if(this.switch)
+		{
+			this.switch.checked = !!new_value;
+		}
+		else
+		{
+			this.updateComplete.then(() => this.value = new_value);
+		}
 	}
 
 	get value()
@@ -111,6 +121,7 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
                     class="form-control__label">${this.label}
 			</span>` : nothing}
             <span
+                    part="control"
                     class=${classMap({
                         "label": true,
                         "on": this.checked,
diff --git a/api/src/Etemplate/Widget/Checkbox.php b/api/src/Etemplate/Widget/Checkbox.php
index 7f28016d76..80a2a2e96a 100644
--- a/api/src/Etemplate/Widget/Checkbox.php
+++ b/api/src/Etemplate/Widget/Checkbox.php
@@ -132,4 +132,5 @@ class Checkbox extends Etemplate\Widget
 }
 
 Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Checkbox', array('et2-checkbox', 'et2-radio', 'et2-switch',
+																	 'et2-switch-icon', 'et2-button-toggle',
 																	 'checkbox', 'radio'));
\ No newline at end of file