Select widgets with static options as WebComponents

api/js/etemplate/Et2InputWidget/Et2InputWidget.ts

@@ -38,7 +38,7 @@ const Et2InputWidgetMixin = (superclass) =>
 {
 	class Et2InputWidgetClass extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode
 	{
-		protected value : string | number | Object;
+		protected _value : string | number | Object;
 		protected _oldValue : string | number | Object;
 		protected node : HTMLElement;
 
@@ -112,7 +112,7 @@ const Et2InputWidgetMixin = (superclass) =>
 
 		set_value(new_value)
 		{
-			this.value = new_value;
+			this._value = new_value;
 		}
 
 		get_value()

api/js/etemplate/Et2Select/Et2Select.ts

@@ -17,10 +17,10 @@ import {StaticOptions} from "./StaticOptions";
 
 export interface SelectOption
 {
-	value : String;
-	label : String;
+	value : string;
+	label : string;
 	// Hover help text
-	title? : String;
+	title? : string;
 }
 
 /**
@@ -449,12 +449,48 @@ export function find_select_options(widget, attr_options?, attrs = {}) : SelectO
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
 customElements.define("et2-select", Et2Select);
 
+export class Et2SelectApp extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.app(this, {other: this.other || []});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-app", Et2SelectApp);
+
+export class Et2SelectBitwise extends Et2Select
+{
+	set value(new_value)
+	{
+		let oldValue = this._value;
+		let expanded_value = [];
+		let options = this.get_select_options();
+		for(let index in options)
+		{
+			let right = parseInt(options[index].value);
+			if(!!(new_value & right))
+			{
+				expanded_value.push(right);
+			}
+		}
+		this._value = expanded_value;
+
+		this.requestUpdate("value", oldValue);
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-bitwise", Et2SelectBitwise);
+
 export class Et2SelectBool extends Et2Select
 {
 	get_select_options() : SelectOption[]
 	{
 		return so.bool(this);
 	}
+
 }
 
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@@ -464,7 +500,7 @@ export class Et2SelectCategory extends Et2Select
 {
 	get_select_options() : SelectOption[]
 	{
-		return so.cat(this, {});
+		return so.cat(this, {other: this.other || []});
 	}
 }
 
@@ -480,4 +516,114 @@ export class Et2SelectPercent extends Et2Select
 }
 
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
-customElements.define("et2-select-percent", Et2SelectPercent);
+customElements.define("et2-select-percent", Et2SelectPercent);
+
+export class Et2SelectCountry extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.country(this, {});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-country", Et2SelectCountry);
+
+export class Et2SelectDay extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.day(this, {other: this.other || []});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-day", Et2SelectDay);
+
+export class Et2SelectDayOfWeek extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.dow(this, {other: this.other || []});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-dow", Et2SelectDayOfWeek);
+
+export class Et2SelectHour extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.hour(this, {other: this.other || []});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-hour", Et2SelectHour);
+
+export class Et2SelectMonth extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.month(this);
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-month", Et2SelectMonth);
+
+export class Et2SelectNumber extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.number(this, {other: this.other || []});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-number", Et2SelectNumber);
+
+export class Et2SelectPriority extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.priority(this);
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-priority", Et2SelectPriority);
+
+export class Et2SelectState extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.state(this, {other: this.other || []});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-state", Et2SelectState);
+
+export class Et2SelectTimezone extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.timezone(this, {other: this.other || []});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-timezone", Et2SelectTimezone);
+
+export class Et2SelectYear extends Et2Select
+{
+	get_select_options() : SelectOption[]
+	{
+		return so.year(this, {other: this.other || []});
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-year", Et2SelectYear);

api/js/etemplate/Et2Select/Et2SelectReadonly.ts

@@ -8,7 +8,7 @@
  */
 
 
-import {html, LitElement} from "@lion/core";
+import {html, LitElement, TemplateResult} from "@lion/core";
 import {et2_IDetachedDOM} from "../et2_core_interfaces";
 import {Et2Widget} from "../Et2Widget/Et2Widget";
 import {find_select_options, SelectOption} from "./Et2Select";
@@ -22,7 +22,6 @@ const so = new StaticOptions();
  */
 export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDetachedDOM
 {
-	protected value : any;
 	protected _options : SelectOption[] = [];
 
 	static get styles()
@@ -37,11 +36,7 @@ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDet
 		return {
 			...super.properties,
 			value: String,
-			select_options: Object,
-			/**
-			 * Specific sub-type of select.  Most are just static lists (percent, boolean)
-			 */
-			type: {type: String}
+			select_options: Object
 		}
 	}
 
@@ -107,9 +102,22 @@ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDet
 
 	render()
 	{
-		let current = this._options.find(option => option.value == this.value);
-		let label = current ? current.label : "";
+		let label = "";
+		if(this.value)
+		{
+			let current = this._options.find(option => option.value == this.value);
+			label = current ? current.label : "";
+		}
+		else if(this.empty_text)
+		{
+			label = this.empty_text;
+		}
 
+		return this._readonlyRender(label)
+	}
+
+	_readonlyRender(label) : TemplateResult
+	{
 		return html`
             <span>${label}</span>
 		`;
@@ -139,6 +147,45 @@ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDet
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
 customElements.define("et2-select_ro", Et2SelectReadonly);
 
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-access_ro", Et2SelectAccessReadonly);
+
+export class Et2SelectAppReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.app(this, {other: this.other || []});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-app_ro", Et2SelectAppReadonly);
+
+export class Et2SelectBitwiseReadonly extends Et2SelectReadonly
+{
+	render()
+	{
+		let new_value = [];
+		for(var index in this.options.select_options)
+		{
+			var option = this.options.select_options[index];
+			var right = option && option.value ? option.value : index;
+			if(!!(this.value & right))
+			{
+				new_value.push(right);
+			}
+		}
+		return this._readonlyRender(new_value);
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-bitwise_ro", Et2SelectBitwiseReadonly);
+
 export class Et2SelectBoolReadonly extends Et2SelectReadonly
 {
 	constructor()
@@ -159,7 +206,7 @@ export class Et2SelectCategoryReadonly extends Et2SelectReadonly
 	{
 		super();
 
-		this._options = so.cat(this, {});
+		this._options = so.cat(this, {other: this.other || []});
 	}
 
 	protected find_select_options(_attrs) {}
@@ -180,4 +227,152 @@ export class Et2SelectPercentReadonly extends Et2SelectReadonly
 }
 
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
-customElements.define("et2-select-percent_ro", Et2SelectPercentReadonly);
+customElements.define("et2-select-percent_ro", Et2SelectPercentReadonly);
+
+export class Et2SelectCountryReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+		this._options = so.country(this, {});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-country_ro", Et2SelectCountryReadonly);
+
+export class Et2SelectDayReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.day(this, {other: this.other || []});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-day_ro", Et2SelectDayReadonly);
+
+export class Et2SelectDayOfWeekReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.dow(this, {other: this.other || []});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-dow_ro", Et2SelectDayOfWeekReadonly);
+
+export class Et2SelectHourReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.hour(this, {other: this.other || []});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-hour_ro", Et2SelectHourReadonly);
+
+export class Et2SelectMonthReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.month(this);
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-month_ro", Et2SelectMonthReadonly);
+
+export class Et2SelectNumberReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.number(this, {other: this.other || []});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-number_ro", Et2SelectNumberReadonly);
+
+export class Et2SelectPriorityReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+		this._options = so.priority(this);
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-priority_ro", Et2SelectPriorityReadonly);
+
+export class Et2SelectStateReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.state(this, {other: this.other || []});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-state_ro", Et2SelectStateReadonly);
+
+export class Et2SelectTimezoneReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.timezone(this, {other: this.other || []});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-timezone_ro", Et2SelectTimezoneReadonly);
+
+export class Et2SelectYearReadonly extends Et2SelectReadonly
+{
+	constructor()
+	{
+		super();
+
+		this._options = so.year(this, {other: this.other || []});
+	}
+
+	protected find_select_options(_attrs) {}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-year_ro", Et2SelectYearReadonly);