From 45bdc86203732442c1f11e1bf6e5b9f64d9f6684 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 16 Jun 2022 13:59:31 -0600
Subject: [PATCH] Et2Button: Fix hideOnReadonly still showed up when readonly

---
 api/js/etemplate/Et2Button/Et2Button.ts       | 13 +++++----
 .../Et2InputWidget/Et2InputWidget.ts          | 28 +++++++++++++++----
 api/js/etemplate/Et2Widget/Et2Widget.ts       |  6 ++--
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/api/js/etemplate/Et2Button/Et2Button.ts b/api/js/etemplate/Et2Button/Et2Button.ts
index 295973dafb..b64485ffd9 100644
--- a/api/js/etemplate/Et2Button/Et2Button.ts
+++ b/api/js/etemplate/Et2Button/Et2Button.ts
@@ -62,6 +62,9 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
                	max-width: 125px;
                	min-width: fit-content;
             }
+            :host([hideonreadonly][disabled]) {
+            	display:none;
+            }
             /* Set size for icon */
             ::slotted(img.imageOnly) {
     			padding-right: 0px !important;
@@ -93,8 +96,10 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 			/**
 			 * If button is set to readonly, do we want to hide it completely (old behaviour) or show it as disabled
 			 * (default)
+			 * Something's not quite right here, as the attribute shows up as "hideonreadonly" instead of "hide" but
+			 * it does not show up without the "attribute", and attribute:"hideonreadonly" does not show as an attribute
 			 */
-			hideOnReadonly: {type: Boolean},
+			hideOnReadonly: {type: Boolean, reflect: true, attribute: "hide"},
 
 			/**
 			 * Button should submit the etemplate
@@ -237,11 +242,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
 
 	render()
 	{
-		if(this.readonly && this.hideOnReadonly)
-		{
-			return '';
-		}
-
+		console.log(this, this.hideOnReadonly);
 		this._iconNode.src = this.__image || "";
 		if(!this.label)
 		{
diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
index 8cf685aef9..030f29eb09 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 {css, dedupeMixin, PropertyValues} from "@lion/core";
+import {css, dedupeMixin, LitElement, PropertyValues} from "@lion/core";
 import {ManualMessage} from "../Validators/ManualMessage";
 import {Required} from "../Validators/Required";
 
@@ -18,7 +18,7 @@ import {Required} from "../Validators/Required";
  */
 export declare class Et2InputWidgetInterface
 {
-	readOnly : boolean;
+	readonly : boolean;
 	protected value : string | number | Object;
 
 	public set_value(any) : void;
@@ -36,10 +36,12 @@ export declare class Et2InputWidgetInterface
 	public isValid(messages : string[]) : boolean;
 }
 
-const Et2InputWidgetMixin = (superclass) =>
+type Constructor<T = {}> = new (...args : any[]) => T;
+const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T) =>
 {
 	class Et2InputWidgetClass extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode, et2_ISubmitListener
 	{
+		private __readonly : boolean;
 		protected _oldValue : string | number | Object;
 		protected node : HTMLElement;
 
@@ -69,12 +71,12 @@ const Et2InputWidgetMixin = (superclass) =>
 				readOnly: {
 					type: Boolean,
 					attribute: 'readonly',
-					reflect: true,
 				},
 				// readonly is what is in the templates
 				// I put this in here so loadWebComponent finds it when it tries to set it from the template
 				readonly: {
-					type: Boolean
+					type: Boolean,
+					reflect: true
 				},
 
 				required: {
@@ -205,9 +207,23 @@ const Et2InputWidgetMixin = (superclass) =>
 
 		set_readonly(new_value)
 		{
-			this.readonly = this.readOnly = new_value;
+			this.readonly = new_value;
 		}
 
+		// Deal with Lion readOnly vs etemplate readonly
+		public set readonly(new_value)
+		{
+			debugger;
+			this.__readonly = super.__readOnly = new_value;
+			this.requestUpdate("readonly");
+		}
+
+		public get readonly() { return this.__readonly};
+
+		set readOnly(new_value) {this.readonly = new_value;}
+
+		get readOnly() { return this.readonly};
+
 		getValue()
 		{
 			return this.readOnly ? null : this.value;
diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts
index 3c4dd8fb39..0a1c01a417 100644
--- a/api/js/etemplate/Et2Widget/Et2Widget.ts
+++ b/api/js/etemplate/Et2Widget/Et2Widget.ts
@@ -37,8 +37,8 @@ function applyMixins(derivedCtor : any, baseCtors : any[])
 	});
 }
 
-type Constructor<T = {}> = new (...args : any[]) => T;
-const Et2WidgetMixin = <T extends Constructor<LitElement>>(superClass : T) =>
+type Constructor<T = LitElement> = new (...args : any[]) => T;
+const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
 {
 	class Et2WidgetClass extends superClass implements et2_IDOMNode
 	{
@@ -1316,7 +1316,7 @@ export function loadWebComponent(_nodeName : string, _template_node : Element|{[
 	if (parent) widget.setParent(parent);
 
 	// Set read-only.  Doesn't really matter if it's a ro widget, but otherwise it needs set
-	widget.readOnly = readonly;
+	widget.readonly = readonly;
 
 	widget.transformAttributes(attrs);