diff --git a/api/js/etemplate/Et2Box/Et2Box.ts b/api/js/etemplate/Et2Box/Et2Box.ts
index 0ad86be9bf..8f9017fdca 100644
--- a/api/js/etemplate/Et2Box/Et2Box.ts
+++ b/api/js/etemplate/Et2Box/Et2Box.ts
@@ -47,7 +47,7 @@ export class Et2Box extends Et2Widget(LitElement) implements et2_IDetachedDOM
render()
{
return html`
-
+
`;
}
@@ -104,7 +104,7 @@ export class Et2HBox extends Et2Box
css`
:host > div {
flex-direction: row;
- }`
+ }`
];
}
}
diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts
index 61975252e1..9af8447135 100644
--- a/api/js/etemplate/Et2Widget/Et2Widget.ts
+++ b/api/js/etemplate/Et2Widget/Et2Widget.ts
@@ -72,6 +72,12 @@ const Et2WidgetMixin = (superClass) =>
return {
...super.properties,
+ /**
+ * CSS Class. This class is applied to the _outside_, on the web component itself.
+ * Due to how WebComponents work, this might not change anything inside the component.
+ */
+ class: {type: String, reflect: true},
+
/**
* Defines whether this widget is visible.
* Not to be confused with an input widget's HTML attribute 'disabled'.",
@@ -187,6 +193,19 @@ const Et2WidgetMixin = (superClass) =>
this.requestUpdate('label', oldValue);
}
+ set class(value : string)
+ {
+ let oldValue = this.classList.value;
+ this.classList.value = value;
+
+ this.requestUpdate('class', oldValue);
+ }
+
+ get class()
+ {
+ return this.classList.value;
+ }
+
/**
* Event handlers
*/
@@ -579,6 +598,10 @@ const Et2WidgetMixin = (superClass) =>
addChild(child : et2_widget | Et2WidgetClass)
{
+ if(this._children.indexOf(child) >= 0)
+ {
+ return;
+ }
if(child instanceof et2_widget)
{
child._parent = this;
@@ -642,6 +665,9 @@ const Et2WidgetMixin = (superClass) =>
// Create the copy
var copy =
this.cloneNode();
+ let widget_class = window.customElements.get(this.nodeName);
+ let properties = widget_class ? widget_class.properties() : {};
+ console.log(this, properties);
if(_parent)
{
copy.setParent(_parent);