Let toolbar use Et2SwitchIcon if icons are provided, style / sizing improvements

api/js/etemplate/Et2Switch/Et2SwitchIcon.ts

@@ -19,6 +19,7 @@ import {SlSwitch} from "@shoelace-style/shoelace";
  *
  * @csspart form-control-label The label's wrapper
  * @csspart control The control's wrapper
+ * @csspart switch-label The internal control's wrapper (sometimes needed for positioning)
  */
 @customElement("et2-switch-icon")
 export class Et2SwitchIcon extends Et2InputWidget(LitElement)
@@ -30,10 +31,12 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
 			css`
 				:host {
 					--indicator-color: var(--sl-color-primary-600);
+					display: flex;
 				}
 
 				sl-switch {
-					--sl-toggle-size-medium: 2em;
+					font-size: 1em;
+					--height: 1em;
 				}
 
 				::part(control) {
@@ -65,6 +68,10 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
 					color: var(--indicator-color, inherit);
 				}
 
+				sl-switch::part(label) {
+					margin-inline-start: 0px;
+				}
+
 				.label:hover {
 					background-color: var(--sl-color-primary-50);
 					border-color: var(--sl-color-primary-300);
@@ -142,12 +149,18 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
 	{
 		return html`
             <sl-switch
+                    exportparts="base:switch-label"
                     .label=${this.label}
                     .value=${live(this.value)}
                     .checked=${live(this.checked)}
                     .disabled=${live(this.disabled)}
                     .required=${this.required}
                     .helpText=${this.helpText}
+                    @sl-change=${async(e) =>
+                    {
+                        await this.updateComplete;
+                        this.dispatchEvent(new Event("change", {bubbles: true}));
+                    }}
             >
                 ${this.labelTemplate()}
             </sl-switch>

api/js/etemplate/et2_widget_toolbar.ts

@@ -605,7 +605,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 		let self = this;
 
 		const isCheckbox = action && action.checkbox;
-		const isToggleSwitch = action.data?.toggle_on || action.data?.toggle_off;
+		const isToggleSwitch = action.data?.toggle_on || action.data?.toggle_off || action.data?.onIcon || action.data?.offIcon;
 
 		const actionHandler = function(action, e)
 		{
@@ -626,13 +626,27 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 
 		if (isToggleSwitch)
 		{
-			widget = <Et2Checkbox>loadWebComponent('et2-switch', {
+			let component = "et2-switch";
+			let attrs = {
 				id: `${this.id}-${action.id}`,
 				label: action.caption,
 				toggleOn: action.data.toggle_on,
 				toggleOff: action.data.toggle_off,
 				class: `et2_toolbar_draggable${this.id}`,
-			}, this);
+			};
+			if(action.data.onIcon || action.data.offIcon)
+			{
+				component = "et2-switch-icon";
+				if(action.data.onIcon)
+				{
+					attrs["onIcon"] = action.data.onIcon;
+				}
+				if(action.data.offIcon)
+				{
+					attrs["offIcon"] = action.data.offIcon;
+				}
+			}
+			widget = <Et2Checkbox>loadWebComponent(component, attrs, this);
 			widget.style.backgroundImage = `url(${action.iconUrl})`;
 			widget.value = action.checked;
 			action.data.widget = widget;

api/templates/default/etemplate2.css

@@ -2617,6 +2617,28 @@ table.egwGridView_outer thead tr th.noResize:hover {
 	top: 100%;
 }
 
+.et2_toolbar et2-switch-icon {
+	font-size: 2.4em;
+	height: 1em;
+}
+
+.et2_toolbar et2-switch-icon::part(form-control-label) {
+	position: absolute;
+	top: 100%;
+	visibility: hidden;
+}
+
+.et2_toolbar et2-switch-icon::part(switch-label) {
+	top: calc(-1.1 * var(--sl-spacing-medium));
+}
+
+et2-switch-icon:hover:not([disabled])::part(control) {
+	background-color: var(--sl-color-gray-150);
+	border-color: var(--sl-input-border-color-hover);
+	color: var(--sl-input-color-hover);
+}
+
+
 .et2_toolbar et2-button:not(.et2_toolbar_hasCaption)::part(prefix) {
 	padding: 0;
 }