From 416136dc2441b0b6e4aa46b1389fb1e6e07bf370 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Wed, 20 Apr 2022 16:23:53 -0600
Subject: [PATCH] Et2Description: Fix missing styles from extending classes
 (Et2Url) while also keeping decrypt on hover working

---
 .../Et2Description/Et2Description.ts          | 33 +++++++++++--------
 .../Et2InputWidget/Et2InputWidget.ts          |  2 +-
 api/templates/default/etemplate2.css          |  2 +-
 3 files changed, 21 insertions(+), 16 deletions(-)

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