Style changes on Et2Box, now supporting the align [left|right] property.

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> `;
 	}
 

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
 		 */