Fix widget class in .xet file was not showing up on webcomponent element

This commit is contained in:
nathan 2021-09-03 14:44:52 -06:00
parent 4cafdeb359
commit 968a2d03bb
2 changed files with 28 additions and 2 deletions

View File

@ -47,7 +47,7 @@ export class Et2Box extends Et2Widget(LitElement) implements et2_IDetachedDOM
render()
{
return html`
<div class="et2_box" ${this.id ? html`id="${this.id}"` : ''}>
<div ${this.id ? html`id="${this.id}"` : ''}>
<slot></slot>
</div> `;
}
@ -104,7 +104,7 @@ export class Et2HBox extends Et2Box
css`
:host > div {
flex-direction: row;
}`
}`
];
}
}

View File

@ -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 = <Et2WidgetClass>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);