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