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);