From 92cf528fe84e24ab3bf114c41b8577eb9a6175ca Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 21 Sep 2023 10:43:09 -0600
Subject: [PATCH] Introduce widget.hidden to hide widgets, and
 widget.set_disabled() now also hides widgets.

---
 api/js/etemplate/Et2Widget/Et2Widget.ts | 34 ++++++++++++++++++++++---
 api/templates/default/etemplate2.css    |  3 +++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts
index 492c7d20be..f3de00e749 100644
--- a/api/js/etemplate/Et2Widget/Et2Widget.ts
+++ b/api/js/etemplate/Et2Widget/Et2Widget.ts
@@ -161,14 +161,30 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
 				class: {type: String, reflect: true},
 
 				/**
-				 * Defines whether this widget is visible.
-				 * Not to be confused with an input widget's HTML attribute 'disabled'.",
+				 * Defines whether this widget is visibly disabled.
+				 *
+				 * The widget is still visible, but clearly cannot be interacted with.  Widgets disabled in the template
+				 * will not return a value to the application code, even if re-enabled via javascript before submitting.
+				 * To allow a disabled widget to be re-enabled and return a value, disable via javascript in the app's
+				 * et2_ready() instead of an attribute in the template file.
 				 */
 				disabled: {
 					type: Boolean,
 					reflect: true
 				},
 
+				/**
+				 * The widget is not visible.
+				 *
+				 * As far as the user is concerned, the widget does not exist.  Widgets hidden with an attribute in the
+				 * template may not be created in the DOM, and will not return a value.  Widgets can be hidden after creation,
+				 * and they may return a value if hidden this way.
+				 */
+				hidden: {
+					type: Boolean,
+					reflect: true
+				},
+
 				/**
 				 * Accesskey provides a hint for generating a keyboard shortcut for the current element.
 				 * The attribute value must consist of a single printable character.
@@ -350,12 +366,17 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
 		/**
 		 * Wrapper on this.disabled because legacy had it.
 		 *
+		 * @deprecated Use widget.disabled for visually disabled, widget.hidden for visually hidden.
+		 * 	Widgets that are hidden from the server via attribute or $readonlys will not be created.
+		 * 	Widgets that are disabled from the server will not return a value to the application code.
+		 *
 		 * @param {boolean} value
 		 */
 		set_disabled(value : boolean)
 		{
 			let oldValue = this.disabled;
 			this.disabled = value;
+			this.hidden = value;
 			this.requestUpdate("disabled", oldValue);
 		}
 
@@ -760,7 +781,7 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
 			{
 				widget = loadWebComponent(_nodeName, _node, this);
 
-				if(this.addChild)
+				if(this.addChild && widget)
 				{
 					// webcomponent going into old et2_widget
 					this.addChild(widget);
@@ -1434,6 +1455,13 @@ export function loadWebComponent(_nodeName : string, _template_node : Element|{[
 			throw Error("Unknown or unregistered WebComponent '" + _nodeName + "', could not find class.  Also checked for " + tries.join(','));
 		}
 	}
+
+	// Don't need to create hidden elements
+	if(parent.hidden || attrs["hidden"] && parent.getArrayMgr("content") && parent.getArryMgr("content").parseBoolExpression(attrs["hidden"]))
+	{
+		return null;
+	}
+
 	const readonly = parent?.getArrayMgr("readonlys") ?
 					 (<any>parent.getArrayMgr("readonlys")).isReadOnly(
 						 attrs["id"], attrs["readonly"],
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 7518fe9bb5..5c3c7df412 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -78,6 +78,9 @@
     display: none;
 }
 
+*[hidden] {
+	display: none !important;
+}
 
 /**
  * VBox widget