From 637bd9fe5be6ab319dd99779e2e62ab66b5dd343 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 2 Sep 2021 09:39:17 -0600
Subject: [PATCH] Style changes on Et2Box, now supporting the align
 [left|right] property.

---
 api/js/etemplate/Et2Box/Et2Box.ts       | 17 +++++++++++----
 api/js/etemplate/Et2Widget/Et2Widget.ts | 29 ++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/api/js/etemplate/Et2Box/Et2Box.ts b/api/js/etemplate/Et2Box/Et2Box.ts
index cf7b4e765a..3f5b21a423 100644
--- a/api/js/etemplate/Et2Box/Et2Box.ts
+++ b/api/js/etemplate/Et2Box/Et2Box.ts
@@ -27,10 +27,19 @@ export class Et2Box extends Et2Widget(LitElement)
             	flex-wrap: nowrap;
             	justify-content: space-between;
             	align-items: stretch;
-						}
+			}
+			/* CSS for child elements */
             ::slotted(*) {
-            	/* CSS for child elements */
-            }`,
+            	margin: 0px 2px;
+            	flex: 1 0 auto;
+            }
+            ::slotted([align="left"]) {
+            	margin-right: auto;
+            }
+            ::slotted([align="right"]) {
+            	margin-left: auto;
+            }
+            `,
 		];
 	}
 
@@ -38,7 +47,7 @@ export class Et2Box extends Et2Widget(LitElement)
 	{
 		return html`
             <div class="et2_box" ${this.id ? html`id="${this.id}"` : ''}>
-                <slot><p>Empty box</p></slot>
+                <slot></slot>
             </div> `;
 	}
 
diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts
index a56fbbc482..32b443bac4 100644
--- a/api/js/etemplate/Et2Widget/Et2Widget.ts
+++ b/api/js/etemplate/Et2Widget/Et2Widget.ts
@@ -54,7 +54,7 @@ const Et2WidgetMixin = (superClass) =>
 		/**
 		 * Properties - default values, and actually creating them as fields
 		 */
-		private _label : string = "";
+		protected _label : string = "";
 		private statustext : string = "";
 		protected disabled : Boolean = false;
 
@@ -84,6 +84,26 @@ const Et2WidgetMixin = (superClass) =>
 
 				onclick: {
 					type: Function
+				},
+
+				/*** Style type attributes ***/
+				/**
+				 * Used by Et2Box to determine alignment.
+				 * Allowed values are left, right
+				 */
+				align: {
+					type: String,
+					reflect: true
+				},
+
+				/**
+				 * Allow styles to be set on widgets.
+				 * Any valid CSS will work.  Mostly for testing, maybe we won't use this?
+				 * That kind of style should normally go in the app.css
+				 */
+				style: {
+					type: String,
+					reflect: true
 				}
 			};
 		}
@@ -153,6 +173,13 @@ const Et2WidgetMixin = (superClass) =>
 			}
 		}
 
+		set label(value : string)
+		{
+			let oldValue = this.label;
+			this._label = value;
+			this.requestUpdate('label', oldValue);
+		}
+
 		/**
 		 * Event handlers
 		 */