Fix nm print dialog missing print orientation

api/js/etemplate/Et2Switch/Et2Switch.ts

@@ -15,6 +15,12 @@ import '../Et2Image/Et2Image';
 import {SlSwitch} from "@shoelace-style/shoelace";
 import shoelace from "../Styles/shoelace";
 
+/**
+ * Switch to turn on or off.  Like a checkbox, but different UI.
+ *
+ * Add "et2SlideSwitch" class to use an alternate UI with images.  Use CSS to set the images:
+ *
+ */
 export class Et2Switch extends Et2InputWidget(SlotMixin(SlSwitch))
 {
 	static get styles()
@@ -28,9 +34,11 @@ export class Et2Switch extends Et2InputWidget(SlotMixin(SlSwitch))
 				margin: auto 0px;
 				vertical-align: -webkit-baseline-middle;
 			  }
+
 			  .switch {
 				position: relative;
 			  }
+
 			  .toggle__label {
 				position: absolute;
 				left: 0px;
@@ -43,16 +51,44 @@ export class Et2Switch extends Et2InputWidget(SlotMixin(SlSwitch))
 				height: var(--height);
 				margin: 0px;
 			  }
+
 			  .switch__thumb {
 				z-index: var(--sl-z-index-tooltip);
 			  }
-			::slotted(span.label)
-			 {
+
+			  ::slotted(span.label) {
 				width: var(--width);
 				display: inline-flex;
 				align-items: center;
 				height: var(--height);
 			  }
+
+			  /* 
+			  Use two images instead of normal switch by adding et2_image_switch class
+			  see etemplate.css for the rest (slotted label)
+			   */
+
+			  :host(.et2SlideSwitch) .switch {
+				min-width: 60px;
+				--height: var(--sl-input-height-medium);
+				border-color: var(--sl-input-border-color);
+				border-width: var(--sl-input-border-width);
+				border-radius: var(--sl-border-radius-medium);
+				border-style: solid;
+			  }
+
+			  :host(.et2SlideSwitch) .switch__control {
+				visibility: hidden;
+			  }
+
+			  :host(.et2SlideSwitch) .switch__label {
+				width: 100%;
+				height: 100%;
+			  }
+
+			  :host(.et2SlideSwitch) ::slotted(.label) {
+				flex: 1 1 auto;
+			  }
 			`,
 		];
 	}

api/js/etemplate/et2_extension_nextmatch.ts

@@ -2941,13 +2941,14 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 					return;
 				}
 
+				const orientation = value.orientation ? "landscape" : "portrait";
 				// Set CSS for orientation
-				this.div.addClass(value.orientation);
-				this.egw().set_preference(app, pref + '_orientation', value.orientation);
+				this.div.addClass(orientation);
+				this.egw().set_preference(app, pref + '_orientation', orientation);
 
 
 				// Try to tell browser about orientation
-				const css = '@page { size: ' + value.orientation + '; }',
+				const css = '@page { size: ' + orientation + '; }',
 					head = document.head || document.getElementsByTagName('head')[0],
 					style = document.createElement('style');
 
@@ -3107,7 +3108,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 				content: {
 					row_count: Math.min(100, total),
 					columns: this.egw().preference(pref, app) || columns_selected,
-					orientation: this.egw().preference(pref + '_orientation', app)
+					orientation: this.egw().preference(pref + '_orientation', app) == "landscape"
 				},
 				modifications: {
 					autoRefresh: {

api/templates/default/etemplate2.css

@@ -833,14 +833,12 @@ which caused click on free space infront of a tag stops nm row selection*/
 /*
 Nextmatch print dialog
 */
-#nm_print_dialog-xet .slideSwitch_container .on {
+#nm_print_dialog et2-switch#_orientation .label .on {
 	background-image: url('images/portrait.svg');
-    background-position: 5px 0px;
 }
 
-#nm_print_dialog-xet .slideSwitch_container .off {
+#nm_print_dialog et2-switch#_orientation .label .off {
 	background-image: url('images/landscape.svg');
-    background-position: 5px -2px;
 }
 
 /*
@@ -3293,6 +3291,21 @@ span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container a {
 	right: 50%;
 }
 
+.et2SlideSwitch .label > * {
+	background-size: contain;
+	height: 75%;
+	width: 50%;
+	background-repeat: no-repeat;
+	background-position: center;
+	height: 28px;
+	top: 0;
+	color: transparent;
+}
+
+.et2SlideSwitch[checked] .label .on, .et2SlideSwitch:not([checked]) .label .off {
+	filter: invert(1);
+}
+
 /* Slide switch in a toolbar */
 .et2_toolbar_actionlist span.et2_checkbox_slideSwitch {
 	vertical-align: bottom;

api/templates/default/nm_print_dialog.xet

@@ -6,7 +6,11 @@
             <et2-description value="Columns to print"></et2-description>
             <et2-nextmatch-columnselection id="columns"></et2-nextmatch-columnselection>
             <et2-number id="row_count" label="How many rows to print" precision="0"></et2-number>
-			<et2-checkbox  id="orientation" toggleOn="Portrait" toggleOff="Landscape" selectedValue="portrait" unselectedValue="landscape"></et2-checkbox>
+            <et2-hbox>
+                <et2-description value="Print orientation"/>
+                <et2-switch id="orientation" label="Print orientation" toggleOn="Portrait" toggleOff="Landscape"
+                            class="et2SlideSwitch"></et2-switch>
+            </et2-hbox>
         </et2-vbox>
     </template>
 </overlay>