using set/get select_option plus a set_selection_options marked as deprecated

- get_select_options seems to be nowhere in use, so I did not implement it
- Et2Select* widgets with static options assign them in their constructor (like the r/o ones)
- removed a jQuery.proxy call, which we dont want in new code

api/js/etemplate/Et2Select/Et2Select.ts

@@ -134,7 +134,7 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
 	 */
 	get value() : string|string[]
 	{
-		if (!this._inputNode || !this.select_options?.length)
+		if (!this._inputNode || !this.select_options.length)
 		{
 			return this.__value || '';
 		}
@@ -155,7 +155,7 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
 	set value(value: string|string[])
 	{
 		// if not yet connected to dom can't change the value
-		if (this._inputNode && this.select_options?.length)
+		if (this._inputNode && this.select_options.length)
 		{
 			// split multiple comma-separated values for multiple or expand_multiple_rows
 			if (typeof value === 'string' && (this.multiple || this.expand_multiple_rows) && value.indexOf(',') !== -1)
@@ -252,11 +252,11 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
 		{
 			const modelValueArr = Array.isArray(this.modelValue) ? this.modelValue : this.modelValue.split(',');
 			// value not in options AND NOT (having an empty label and value)
-			if(this.get_select_options().length > 0 && this.get_select_options().filter((option) => modelValueArr.find(val => val == option.value)).length === 0 &&
+			if(this.select_options.length > 0 && this.select_options.filter((option) => modelValueArr.find(val => val == option.value)).length === 0 &&
 				!(typeof this.empty_label !== 'undefined' && (this.modelValue || "") === ""))
 			{
 				// --> use first option
-				this.modelValue = "" + this.get_select_options()[0]?.value;	// ""+ to cast value of 0 to "0", to not replace with ""
+				this.modelValue = "" + this.select_options[0]?.value;	// ""+ to cast value of 0 to "0", to not replace with ""
 			}
 			// Re-set value, the option for it may have just shown up
 			this.value = this.modelValue || "";
@@ -304,9 +304,11 @@ customElements.define("et2-select", Et2Select);
 
 export class Et2SelectApp extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.app(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.app(this, {other: this.other || []});
 	}
 }
 
@@ -319,7 +321,7 @@ export class Et2SelectBitwise extends Et2Select
 	{
 		let oldValue = this._value;
 		let expanded_value = [];
-		let options = this.get_select_options();
+		let options = this.select_options;
 		for(let index in options)
 		{
 			let right = parseInt(options[index].value);
@@ -339,11 +341,12 @@ customElements.define("et2-select-bitwise", Et2SelectBitwise);
 
 export class Et2SelectBool extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.bool(this);
+		super();
-	}
 
+		this.select_options = so.bool(this);
+	}
 }
 
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@@ -351,9 +354,11 @@ customElements.define("et2-select-bool", Et2SelectBool);
 
 export class Et2SelectCategory extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.cat(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.cat(this, {other: this.other || []});
 	}
 }
 
@@ -362,9 +367,11 @@ customElements.define("et2-select-cat", Et2SelectCategory);
 
 export class Et2SelectPercent extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.percent(this, {});
+		super();
+
+		this.select_options = so.percent(this, {});
 	}
 }
 
@@ -373,9 +380,11 @@ customElements.define("et2-select-percent", Et2SelectPercent);
 
 export class Et2SelectCountry extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.country(this, {});
+		super();
+
+		this.select_options = so.country(this, {});
 	}
 }
 
@@ -384,9 +393,11 @@ customElements.define("et2-select-country", Et2SelectCountry);
 
 export class Et2SelectDay extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.day(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.day(this, {other: this.other || []});
 	}
 }
 
@@ -395,9 +406,11 @@ customElements.define("et2-select-day", Et2SelectDay);
 
 export class Et2SelectDayOfWeek extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.dow(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.dow(this, {other: this.other || []});
 	}
 }
 
@@ -406,9 +419,11 @@ customElements.define("et2-select-dow", Et2SelectDayOfWeek);
 
 export class Et2SelectHour extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.hour(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.hour(this, {other: this.other || []});
 	}
 }
 
@@ -417,9 +432,11 @@ customElements.define("et2-select-hour", Et2SelectHour);
 
 export class Et2SelectMonth extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.month(this);
+		super();
+
+		this.select_options = so.month(this);
 	}
 }
 
@@ -428,9 +445,11 @@ customElements.define("et2-select-month", Et2SelectMonth);
 
 export class Et2SelectNumber extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.number(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.number(this, {other: this.other || []});
 	}
 }
 
@@ -439,9 +458,11 @@ customElements.define("et2-select-number", Et2SelectNumber);
 
 export class Et2SelectPriority extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.priority(this);
+		super();
+
+		this.select_options = so.priority(this);
 	}
 }
 
@@ -450,9 +471,11 @@ customElements.define("et2-select-priority", Et2SelectPriority);
 
 export class Et2SelectState extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.state(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.state(this, {other: this.other || []});
 	}
 }
 
@@ -461,9 +484,11 @@ customElements.define("et2-select-state", Et2SelectState);
 
 export class Et2SelectTimezone extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.timezone(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.timezone(this, {other: this.other || []});
 	}
 }
 
@@ -472,9 +497,11 @@ customElements.define("et2-select-timezone", Et2SelectTimezone);
 
 export class Et2SelectYear extends Et2Select
 {
-	get_select_options() : SelectOption[]
+	constructor()
 	{
-		return so.year(this, {other: this.other || []});
+		super();
+
+		this.select_options = so.year(this, {other: this.other || []});
 	}
 }
 

api/js/etemplate/Et2Select/Et2SelectAccount.ts

@@ -32,20 +32,25 @@ export class Et2SelectAccount extends Et2Select
 	{
 		super();
 
-		this.account_type = 'accounts';
+		this.__account_type = 'accounts';
 	}
 
-	set_account_type(type : AccountType)
+	set account_type(type : AccountType)
 	{
-		this.account_type = type;
+		this.__account_type = type;
 
-		this.set_select_options(this.get_select_options());
+		super.select_options = this.select_options;
+	}
+
+	get account_type() : AccountType
+	{
+		return this.__account_type;
 	}
 
 	/**
 	 * Get account info for select options from common client-side account cache
 	 */
-	get_select_options() : Array<SelectOption>
+	get select_options() : Array<SelectOption>
 	{
 		const type = this.egw().preference('account_selection', 'common');
 		if (type === 'none' && typeof egw.user('apps').admin === 'undefined')

api/js/etemplate/Et2Select/Et2SelectReadonly.ts

@@ -55,7 +55,7 @@ li {
 	{
 		super();
 		this.type = "";
-		this.select_options = [];
+		this.__select_options = <SelectOption[]>[];
 	}
 
 	protected find_select_options(_attrs)
@@ -63,7 +63,7 @@ li {
 		let sel_options = find_select_options(this, _attrs['select_options']);
 		if(sel_options.length > 0)
 		{
-			this.set_select_options(sel_options);
+			this.select_options = sel_options;
 		}
 	}
 
@@ -86,6 +86,10 @@ li {
 		this.find_select_options(_attrs)
 	}
 
+	/**
+	 * @deprecated assign to value
+	 * @param value
+	 */
 	set_value(value)
 	{
 		this.value = value;
@@ -117,7 +121,7 @@ li {
 	 *
 	 * @param {SelectOption[]} new_options
 	 */
-	set_select_options(new_options : SelectOption[] | { [key : string] : string })
+	set select_options(new_options : SelectOption[] | { [key : string] : string })
 	{
 		if(!Array.isArray(new_options))
 		{
@@ -130,9 +134,25 @@ li {
 			this.select_options = fixed_options;
 			return;
 		}
+		this.__select_options = new_options;
+	}
+
+	/**
+	 * Set the select options
+	 *
+	 * @deprecated assign to select_options
+	 * @param new_options
+	 */
+	set_select_options(new_options : SelectOption[] | { [key : string] : string })
+	{
 		this.select_options = new_options;
 	}
 
+	get select_options() : SelectOption[] | { [key : string] : string }
+	{
+		return this.__select_options;
+	}
+
 	render()
 	{
 		if(!this.value)
@@ -144,7 +164,7 @@ li {
             <ul>
                 ${repeat(this.value, (val : string) => val, (val) =>
                 {
-                    let option = this.select_options.find(option => option.value == val);
+                    let option = (<SelectOption[]>this.select_options).find(option => option.value == val);
                     if(!option)
                     {
                         return "";
@@ -204,7 +224,7 @@ export class Et2SelectAccountReadonly extends Et2SelectReadonly
 		{
 			let account_name = null;
 			let option = <SelectOption>{value: id, label: id + " ..."};
-			this.select_options.push(option);
+			this.select_options = [].concat(this.select_options, option);
 			if(new_value && (account_name = this.egw().link_title('api-accounts', id)))
 			{
 				option.label = account_name;
@@ -264,7 +284,7 @@ export class Et2SelectBitwiseReadonly extends Et2SelectReadonly
             <ul>
                 ${repeat(new_value, (val : string) => val, (val) =>
                 {
-                    let option = this.select_options.find(option => option.value == val);
+                    let option = (<SelectOption[]>this.select_options).find(option => option.value == val);
                     if(!option)
                     {
                         return "";

api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts

@@ -73,7 +73,7 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 				 * Select box options
 				 *
 				 * Will be found automatically based on ID and type, or can be set explicitly in the template using
-				 * <option/> children, or using widget.set_select_options(SelectOption[])
+				 * <option/> children, or using widget.select_options = SelectOption[]
 				 */
 				select_options: Object,
 			}
@@ -83,7 +83,7 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 		{
 			super();
 
-			this.select_options = <StaticOptions[]>[];
+			this.__select_options = <StaticOptions[]>[];
 		}
 
 		/** @param {import('@lion/core').PropertyValues } changedProperties */
@@ -94,7 +94,8 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 			// If the ID changed (or was just set) find the select options
 			if(changedProperties.has("id"))
 			{
-				this.set_select_options(find_select_options(this));
+				const options = find_select_options(this);
+				if (options.length) this.select_options = options;
 			}
 
 			// Add in actual option tags to the DOM based on the new select_options
@@ -103,10 +104,8 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 				// Add in options as children to the target node
 				if(this._optionTargetNode)
 				{
-					// We use this.get_select_options() instead of this.select_options so children can override
-					// This is how the sub-types with static options (day of week, month, etc.) get their options in
 					render(html`${this._emptyLabelTemplate()}
-                            ${repeat(this.get_select_options(), (option : SelectOption) => option.value, this._optionTemplate.bind(this))}`,
+                            ${repeat(<SelectOption[]>this.select_options, (option : SelectOption) => option.value, this._optionTemplate.bind(this))}`,
 						this._optionTargetNode
 					);
 				}
@@ -143,10 +142,11 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 		/**
 		 * Set the select options
 		 *
-		 * @param {SelectOption[]} new_options
+		 * @param new_options
 		 */
-		set_select_options(new_options : SelectOption[] | { [key : string] : string })
+		set select_options(new_options : SelectOption[] | { [key : string] : string })
 		{
+			const old_options = this.__select_options;
 			if(!Array.isArray(new_options))
 			{
 				let fixed_options = [];
@@ -154,17 +154,29 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 				{
 					fixed_options.push({value: key, label: new_options[key]});
 				}
-				this.select_options = fixed_options;
+				this.__select_options = fixed_options;
 			}
 			else
 			{
-				this.select_options = new_options;
+				this.__select_options = new_options;
 			}
+			this.requestUpdate("select_options", old_options);
 		}
 
-		get_select_options()
+		/**
+		 * Set select options
+		 *
+		 * @deprecated assign to select_options
+		 * @param new_options
+		 */
+		set_select_options(new_options : SelectOption[] | { [key : string] : string })
 		{
-			return this.select_options;
+			this.select_options = new_options;
+		}
+
+		get select_options()
+		{
+			return this.__select_options;
 		}
 
 		/**
@@ -245,7 +257,10 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 			{
 				new_options = find_select_options(this, {}, new_options);
 			}
-			this.set_select_options(new_options);
+			if (new_options.length)
+			{
+				this.select_options = new_options;
+			}
 		}
 	}
 	return Et2WidgetWithSelect;

api/js/etemplate/Et2Select/StaticOptions.ts

@@ -10,7 +10,9 @@
 import {sprintf} from "../../egw_action/egw_action_common";
 import {Et2SelectReadonly} from "./Et2SelectReadonly";
 import {find_select_options, SelectOption} from "./FindSelectOptions";
-import {Et2WidgetWithSelect} from "./Et2Select";
+import {Et2Select, Et2WidgetWithSelect} from "./Et2Select";
+
+export type Et2SelectWidgets = Et2Select | Et2WidgetWithSelect | Et2SelectReadonly;
 
 /**
  * Some options change, or are too complicated to have twice, so we get the
@@ -25,7 +27,7 @@ import {Et2WidgetWithSelect} from "./Et2Select";
  */
 export class StaticOptions
 {
-	cached_server_side(widget : Et2WidgetWithSelect | Et2SelectReadonly, type : string, options_string) : SelectOption[]
+	cached_server_side(widget : Et2SelectWidgets, type : string, options_string) : SelectOption[]
 	{
 		// normalize options by removing trailing commas
 		options_string = options_string.replace(/,+$/, '');
@@ -93,14 +95,14 @@ export class StaticOptions
 				{
 					if(widget.value && widget && widget.get_value() !== widget.value)
 					{
-						egw.window.setTimeout(jQuery.proxy(function()
+						egw.window.setTimeout(function()
 						{
 							// Avoid errors if widget is destroyed before the timeout
 							if(this.widget && typeof this.widget.id !== 'undefined')
 							{
 								this.widget.set_value(this.widget.options.value);
 							}
-						}, {widget: widget}), 1);
+						}.bind({widget: widget}), 1);
 					}
 				}
 			}
@@ -108,7 +110,7 @@ export class StaticOptions
 		}
 	}
 
-	priority(widget : Et2WidgetWithSelect | Et2SelectReadonly) : SelectOption[]
+	priority(widget : Et2SelectWidgets) : SelectOption[]
 	{
 		return [
 			{value: "1", label: 'low'},
@@ -118,7 +120,7 @@ export class StaticOptions
 		];
 	}
 
-	bool(widget : Et2WidgetWithSelect | Et2SelectReadonly) : SelectOption[]
+	bool(widget : Et2SelectWidgets) : SelectOption[]
 	{
 		return [
 			{value: "0", label: 'no'},
@@ -126,7 +128,7 @@ export class StaticOptions
 		];
 	}
 
-	month(widget : Et2WidgetWithSelect | Et2SelectReadonly) : SelectOption[]
+	month(widget : Et2SelectWidgets) : SelectOption[]
 	{
 		return [
 			{value: "1", label: 'January'},
@@ -144,7 +146,7 @@ export class StaticOptions
 		];
 	}
 
-	number(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	number(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		if(typeof attrs.other != 'object')
 		{
@@ -180,7 +182,7 @@ export class StaticOptions
 		return options;
 	}
 
-	percent(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	percent(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		if(typeof attrs.other != 'object')
 		{
@@ -193,7 +195,7 @@ export class StaticOptions
 		return this.number(widget, attrs);
 	}
 
-	year(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	year(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		if(typeof attrs.other != 'object')
 		{
@@ -206,13 +208,13 @@ export class StaticOptions
 		return this.number(widget, attrs);
 	}
 
-	day(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	day(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		attrs.other = [1, 31, 1];
 		return this.number(widget, attrs);
 	}
 
-	hour(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	hour(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		var options = [];
 		var timeformat = widget.egw().preference('common', 'timeformat');
@@ -228,13 +230,13 @@ export class StaticOptions
 		return options;
 	}
 
-	app(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	app(widget : Et2SelectWidgets | Et2Select, attrs) : SelectOption[]
 	{
 		var options = ',' + (attrs.other || []).join(',');
 		return this.cached_server_side(widget, 'select-app', options);
 	}
 
-	cat(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	cat(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		// Add in application, if not there
 		if(typeof attrs.other == 'undefined')
@@ -252,33 +254,33 @@ export class StaticOptions
 		return this.cached_server_side(widget, 'select-cat', options);
 	}
 
-	country(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	country(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		var options = ',';
 		return this.cached_server_side(widget, 'select-country', options);
 	}
 
-	state(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	state(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		var options = attrs.country_code ? attrs.country_code : 'de';
 		return this.cached_server_side(widget, 'select-state', options);
 	}
 
-	dow(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	dow(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		var options = ',' + (attrs.other || []).join(',');
 		return this.cached_server_side(widget, 'select-dow', options);
 	}
 
-	lang(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	lang(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		var options = ',' + (attrs.other || []).join(',');
 		return this.cached_server_side(widget, 'select-lang', options);
 	}
 
-	timezone(widget : Et2WidgetWithSelect | Et2SelectReadonly, attrs) : SelectOption[]
+	timezone(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
 		var options = ',' + (attrs.other || []).join(',');
 		return this.cached_server_side(widget, 'select-timezone', options);
 	}
-}
+}