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 = new (...args : any[]) => T; +const Et2InputWidgetMixin = >(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 = new (...args : any[]) => T; -const Et2WidgetMixin = >(superClass : T) => +type Constructor = new (...args : any[]) => T; +const Et2WidgetMixin = (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);