From d6b61722e0be28eace6cb38e4d5b27e3e45102e0 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Tue, 23 Apr 2024 14:02:58 -0600
Subject: [PATCH] Fix some CSS / layout issues with labels - Fix label nowrap
 stopped working - Fix et2-label-fixed stopped working

---
 api/js/etemplate/Et2Select/Et2Select.ts |  8 ++-
 api/js/etemplate/Et2Widget/Et2Widget.ts | 82 +++++++++++++------------
 2 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index af21ace1fb..7968dab2b5 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -108,6 +108,9 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 				--icon-width: 20px;
 			  }
 
+				.form-control--has-label::part(form-control-label) {
+					margin-right: var(--sl-spacing-medium);
+				}
 
 			  ::slotted(img), img {
 				vertical-align: middle;
@@ -1037,7 +1040,10 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 		return html`
             ${this._styleTemplate()}
             <sl-select
-                    exportparts="prefix, tags, display-input, expand-icon, combobox, combobox:base, listbox, option"
+                    class=${classMap({
+                        "form-control--has-label": this.label !== ""
+                    })}
+                    exportparts="form-control-label, prefix, tags, display-input, expand-icon, combobox, combobox:base, listbox, option"
                     label=${this.label}
                     placeholder=${this.placeholder || (this.multiple && this.emptyLabel ? this.emptyLabel : "")}
                     ?multiple=${this.multiple}
diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts
index 6c6430191f..ce5ffd1dd3 100644
--- a/api/js/etemplate/Et2Widget/Et2Widget.ts
+++ b/api/js/etemplate/Et2Widget/Et2Widget.ts
@@ -107,52 +107,58 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
 			return [
 				...(super.styles ? (Array.isArray(super.styles) ? super.styles : [super.styles]) : []),
 				css`
-				:host([disabled]) {
-					display: none;
-				}
-				
-				/* CSS to align internal inputs according to box alignment */
-				:host([align="center"]) .input-group__input {
-					justify-content: center;
-				}
-				:host([align="right"]) .input-group__input {
-					justify-content: flex-end;
-				}
+					:host([disabled]) {
+						display: none;
+					}
 
-				  /* Put widget label to the left of the widget */
+					/* CSS to align internal inputs according to box alignment */
 
-				  ::part(form-control) {
-					display: flex;
-					align-items: center;
-					flex-wrap: wrap;
-				  }
+					:host([align="center"]) .input-group__input {
+						justify-content: center;
+					}
 
-				  ::part(form-control-label) {
-					flex: 0 0 auto;
-					white-space: normal;
-				  }
+					:host([align="right"]) .input-group__input {
+						justify-content: flex-end;
+					}
 
-				  ::part(form-control-input) {
-					flex: 1 1 auto;
-					position: relative;
-					max-width: 100%;
-				  }
+					/* Put widget label to the left of the widget */
 
-				  ::part(form-control-help-text) {
-					flex-basis: 100%;
-					position: relative;
-				  }
+					::part(form-control), .form-control {
+						display: flex;
+						align-items: center;
+						flex-wrap: wrap;
+					}
 
-				  /* Use .et2-label-fixed class to give fixed label size */
+					::part(form-control-label), .form-control-label {
+						flex: 0 0 auto;
+						white-space: normal;
+					}
 
-				  :host(.et2-label-fixed)::part(form-control-label) {
-					width: initial;
-					width: var(--label-width, 8em);
-				  }
+					.form-control--has-label .form-control-label {
+						margin-right: var(--sl-spacing-medium);
+					}
 
-				  :host(.et2-label-fixed)::part(form-control-help-text) {
-					left: calc(var(--sl-spacing-medium) + var(--label-width, 8em));
-				  }
+					::part(form-control-input), .form-control-input {
+						flex: 1 1 auto;
+						position: relative;
+						max-width: 100%;
+					}
+
+					::part(form-control-help-text), .form-control-help-text {
+						flex-basis: 100%;
+						position: relative;
+					}
+
+					/* Use .et2-label-fixed class to give fixed label size */
+
+					:host(.et2-label-fixed)::part(form-control-label), :host(.et2-label-fixed) .form-control-label {
+						width: initial;
+						width: var(--label-width, 8em);
+					}
+
+					:host(.et2-label-fixed)::part(form-control-help-text), :host(.et2-label-fixed) .form-control-help-text {
+						left: calc(var(--sl-spacing-medium) + var(--label-width, 8em));
+					}
             `];
 		}