diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts index 24457b6a44..f7f4310146 100644 --- a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts +++ b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts @@ -64,14 +64,17 @@ const Et2InputWidgetMixin = (superclass) => // I put this in here so loadWebComponent finds it when it tries to set it from the template readonly: { type: Boolean - } + }, + + onchange: { + type: Function + }, }; } constructor(...args : any[]) { super(...args); - } connectedCallback() @@ -80,6 +83,33 @@ const Et2InputWidgetMixin = (superclass) => this.node = this.getInputNode(); } + /** + * Change handler calling custom handler set via onchange attribute + * + * @param _ev + * @returns + */ + _onChange(_ev : Event) : boolean + { + if(typeof super._onChange == "function") + { + super._onChange(_ev); + } + if(typeof this.onchange == 'function') + { + // Make sure function gets a reference to the widget, splice it in as 2. argument if not + let args = Array.prototype.slice.call(arguments); + if(args.indexOf(this) == -1) + { + args.splice(1, 0, this); + } + + return this.onchange(...args); + } + + return true; + } + set_value(new_value) { this.value = new_value; diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index ebc692ca79..a9feef29cc 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -11,7 +11,7 @@ import {LionSelect} from "@lion/select"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {et2_readAttrWithDefault} from "../et2_core_xml"; -import {css, html, repeat, TemplateResult} from "@lion/core"; +import {css, html, render, repeat, TemplateResult} from "@lion/core"; import {cssImage} from "../Et2Widget/Et2Widget"; export interface SelectOption @@ -22,10 +22,16 @@ export interface SelectOption title? : String; } +/** + * LionSelect (and any other LionField) use slots to wrap a real DOM node. ET2 doesn't expect this, + * so we have to create the input node (via slots()) and respect that it is _external_ to the Web Component. + * This complicates things like adding the options, since we can't just override _inputGroupInputTemplate() + * and include them when rendering - the parent expects to find the - ${this._emptyLabelTemplate()} - ${repeat(this.get_select_options(), (option : SelectOption) => option.value, this._optionTemplate)} - - - `; - } - - _emptyLabelTemplate() + _emptyLabelTemplate() : TemplateResult { if(!this.empty_label) { @@ -193,7 +173,7 @@ export class Et2Select extends Et2InputWidget(LionSelect) `; } - _optionTemplate(option : SelectOption) + _optionTemplate(option : SelectOption) : TemplateResult { return html` `;