From e048b26235b9dece75a6cd6ecdac4af0140e2b09 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Fri, 25 Feb 2022 10:21:16 -0700
Subject: [PATCH] - Deprecate "needed" attribute in favour of standard
 "required" - Fix some required CSS

---
 .../etemplate/Et2InputWidget/Et2InputWidget.ts | 18 +++++++++++-------
 api/js/etemplate/Et2Textbox/Et2Textbox.ts      |  2 +-
 api/js/etemplate/Et2Widget/Et2Widget.ts        |  9 ++++++++-
 api/js/etemplate/etemplate2.ts                 |  4 ++--
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
index ff9f2ce347..121acb9e97 100644
--- a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
+++ b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
@@ -1,6 +1,6 @@
 import {et2_IInput, et2_IInputNode, et2_ISubmitListener} from "../et2_core_interfaces";
 import {Et2Widget} from "../Et2Widget/Et2Widget";
-import {dedupeMixin, PropertyValues} from "@lion/core";
+import {css, dedupeMixin, PropertyValues} from "@lion/core";
 import {ManualMessage} from "../Validators/ManualMessage";
 import {Required} from "../Validators/Required";
 
@@ -47,7 +47,12 @@ const Et2InputWidgetMixin = (superclass) =>
 		static get styles()
 		{
 			return [
-				...super.styles
+				super.styles,
+				css`
+				/* Needed so required can show through */
+				::slotted(input), input {
+					background-color: transparent;
+				}`
 			];
 		}
 
@@ -67,11 +72,10 @@ const Et2InputWidgetMixin = (superclass) =>
 					type: Boolean
 				},
 
-				needed: {
+				required: {
 					type: Boolean,
 					reflect: true
 				},
-
 				onchange: {
 					type: Function
 				},
@@ -100,14 +104,13 @@ const Et2InputWidgetMixin = (superclass) =>
 			super.updated(changedProperties);
 
 			// Needed changed, add / remove validator
-			if(changedProperties.has('needed'))
+			if(changedProperties.has('required'))
 			{
 				// Remove class
 				this.classList.remove("et2_required")
 				// Remove all existing Required validators (avoids duplicates)
 				this.validators = (this.validators || []).filter((validator) => validator instanceof Required)
-				this.setAttribute("required", this.needed);
-				if(this.needed)
+				if(this.required)
 				{
 					this.validators.push(new Required());
 					this.classList.add("et2_required");
@@ -231,6 +234,7 @@ const Et2InputWidgetMixin = (superclass) =>
 		transformAttributes(attrs)
 		{
 			super.transformAttributes(attrs);
+
 			// Check whether an validation error entry exists
 			if(this.id && this.getArrayMgr("validation_errors"))
 			{
diff --git a/api/js/etemplate/Et2Textbox/Et2Textbox.ts b/api/js/etemplate/Et2Textbox/Et2Textbox.ts
index 21df1f54a5..7d5e43be95 100644
--- a/api/js/etemplate/Et2Textbox/Et2Textbox.ts
+++ b/api/js/etemplate/Et2Textbox/Et2Textbox.ts
@@ -19,7 +19,7 @@ export class Et2Textbox extends Et2InputWidget(LionInput)
 	static get styles()
 	{
 		return [
-			...super.styles,
+			super.styles,
 			css`
 			:host([type="hidden"]) {
 				display: none;
diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts
index cecdb43feb..d518bd83df 100644
--- a/api/js/etemplate/Et2Widget/Et2Widget.ts
+++ b/api/js/etemplate/Et2Widget/Et2Widget.ts
@@ -1180,8 +1180,15 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
 		// If there is not attribute set, ignore it.  Widget sets its own default.
 		if(typeof attrValue === "undefined")
 		{
-			return;
+			continue;
 		}
+
+		// "needed" is deprecated, use "required"
+		if(attribute == "needed")
+		{
+			attribute = "required";
+		}
+
 		const property = widget_class.getPropertyOptions(attribute);
 
 		switch(typeof property === "object" ? property.type : property)
diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts
index f08fd21005..98d9264c90 100644
--- a/api/js/etemplate/etemplate2.ts
+++ b/api/js/etemplate/etemplate2.ts
@@ -930,9 +930,9 @@ export class etemplate2
 			}
 			else if(submit instanceof Promise)
 			{
-				invalid.push(submit.then(function(sub)
+				invalid.push(submit.then(function(ok)
 				{
-					return sub ? false : this;
+					return ok ? false : this;
 				}.bind(_widget)));
 			}
 		}, this, et2_ISubmitListener);