diff --git a/api/js/etemplate/Et2Description/Et2Description.ts b/api/js/etemplate/Et2Description/Et2Description.ts index 6bc38362f2..e7b34f64a8 100644 --- a/api/js/etemplate/Et2Description/Et2Description.ts +++ b/api/js/etemplate/Et2Description/Et2Description.ts @@ -8,7 +8,7 @@ */ import {Et2Widget} from "../Et2Widget/Et2Widget"; -import {css, html, LitElement} from "@lion/core"; +import {css, html, LitElement, render} from "@lion/core"; import {et2_IDetachedDOM} from "../et2_core_interfaces"; import {activateLinks} from "../ActivateLinksDirective"; @@ -19,15 +19,11 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach static get styles() { - /** - * No styles for Et2Description due to how we're rendering content directly into light DOM - * anything added here won't work - */ return [ ...super.styles, css` :host { - white-space: pre-wrap; + white-space: pre-line; } :host a { cursor: pointer; @@ -91,6 +87,17 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach this._handleClick = this._handleClick.bind(this); } + connectedCallback() + { + super.connectedCallback(); + + // Put content directly in DOM + if(this.value) + { + render(this._renderContent(), this); + } + } + set_value(value) { this.value = value; @@ -125,7 +132,7 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach this.requestUpdate('value', oldValue); } - render() + _renderContent() { let render = null; @@ -151,18 +158,16 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach { render = html`${this._value}`; } - return html`${render}`; + return render; } - /** - * Put everything into the light DOM - * @returns {this} - */ - createRenderRoot() + render() { - return this; + return html` + `; } + async firstUpdated() { this.removeEventListener('click.extra_link', this._handleClick); diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts index 10113eb331..31c563446f 100644 --- a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts +++ b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts @@ -47,7 +47,7 @@ const Et2InputWidgetMixin = (superclass) => static get styles() { return [ - super.styles, + ...super.styles, css` /* Needed so required can show through */ ::slotted(input), input { diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 1dad234b39..6d9b7835b5 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -231,7 +231,7 @@ div.et2_hbox > div { /** * Label widget, and labels for other widgets */ -.et2_label, et2-description { +.et2_label { color: #101050; white-space: pre-wrap; }