WIP Et2Taglist wiget:

- Make the taglist a Lion-combobox
- Use templateOptions for different taglist types

api/js/etemplate/Et2Taglist/EgwOption.ts

@@ -0,0 +1,65 @@
+/**
+ * EGroupware eTemplate2 - TaglistOption widget (WebComponent)
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link https://www.egroupware.org
+ * @author Hadi Nategh
+ */
+
+import { LionOption } from '@lion/listbox';
+import {css, html} from "@lion/core";
+
+export class EgwOption extends LionOption {
+
+	static get properties() {
+		return {
+			...super.properties,
+			title: {type: String},
+			icon: {type: String}
+		};
+	}
+	constructor() {
+		super();
+		this.title = '';
+		this.icon  = '';
+	}
+
+	static get styles() {
+		return [
+			...super.styles,
+			css`
+			:host([checked]) {
+				visibility: hidden;
+			}
+      	`,
+		];
+	}
+
+	render ()
+	{
+		return html`
+			${this.icon
+					? html` <img class="egw-option__icon" src="${this.icon}" alt="" />`
+					: '' }
+			${super.render()}
+		`;
+	}
+}
+customElements.define('egw-option', EgwOption);
+
+export class EgwOptionEmail extends EgwOption {
+
+}
+customElements.define('egw-option-email', EgwOptionEmail);
+
+export class EgwOptionState extends EgwOption {
+
+}
+customElements.define('egw-option-state', EgwOptionState);
+
+export class EgwOptionCategory extends EgwOption {
+
+}
+customElements.define('egw-option-category', EgwOptionCategory);

api/js/etemplate/Et2Taglist/Et2Taglist.ts

@@ -10,17 +10,16 @@
 
 
 
-import {css, html, LitElement} from "@lion/core";
+import {css, html, PropertyValues, render, repeat, TemplateResult} from "@lion/core";
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import {TaglistOption, TaglistOptionEmail} from "./TaglistOption";
-import {TaglistComboBox} from "./TaglistComboBox";
 import {Et2widgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
+import {LionCombobox} from "@lion/combobox";
 import {TaglistSelection} from "./TaglistSelection";
+import {SelectOption} from "../Et2Select/FindSelectOptions";
 
 /**
  * Taglist base class implementation
  */
-export class Et2Taglist extends Et2widgetWithSelectMixin(ScopedElementsMixin(LitElement))
+export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
 {
 	static get styles()
 	{
@@ -37,9 +36,21 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(ScopedElementsMixin(Lit
 	{
 		return {
 			...super.properties,
-			multiple : {type : Boolean},
+			multiple: {type : Boolean},
-
+		}
+	}
 
+	/**
+	 * @type {SlotsMap}
+	 */
+	get slots() {
+		return {
+			...super.slots,
+			"selection-display": () => {
+				return html `<taglist-selection
+                        slot="selection-display"
+                        style="display: contents;"></taglist-selection>`;
+			}
 		}
 	}
 
@@ -49,37 +60,42 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(ScopedElementsMixin(Lit
 
 	}
 
-	// can be overriden for other taglist type implementations
+	/**
-	static get taglistOptionImp () {return TaglistOption};
+	 * Get the node where we're putting the options
-	static get taglistComboboxImp () {return TaglistComboBox};
+	 *
-	static get taglistSelectionImp () {return TaglistSelection};
+	 * If this were a normal selectbox, this would be just the <select> tag (this._inputNode) but in a more
-
+	 * complicated widget, this could be anything.
-	static get scopedElements() {
+	 *
-		return {
+	 * @overridable
-			'taglist-combobox': this.taglistComboboxImp,
+	 * @returns {HTMLElement}
-			'taglist-option': this.taglistOptionImp,
+	 */
-			'taglist-selection': this.taglistSelectionImp
+	get _optionTargetNode() : HTMLElement
-		};
+	{
+		return this._listboxNode;
 	}
 
-	_setOptionTemplate()
+	/**
+	 * Render the "empty label", used when the selectbox does not currently have a value
+	 *
+	 * @overridable
+	 * @returns {TemplateResult}
+	 */
+	_optionTemplate(option : SelectOption) : TemplateResult
 	{
 		return html`
-            ${this.get_select_options().map(entry => html` <taglist-option .choiceValue="${entry.value}">${entry.label}</taglist-option> `)}
+            <egw-option .choiceValue="${option.value}" ?checked=${option.value == this.modelValue} ?icon="${option.icon}">${option.label}</egw-option>`;
-		`;
 	}
 
-	render()
+	set multiple (value)
 	{
-		return html`
+		this.multipleChoice = value;
-		  <taglist-combobox name="combo" multiple-choice show-all-on-empty>
-			  <taglist-selection
-			  slot="selection-display"
-			  style="display: contents;"></taglist-selection> 
-			  ${this._setOptionTemplate()}
-		  </taglist-combobox>
-		`;
 	}
+
+	get multiple ()
+	{
+		return this.multipleChoice;
+	}
+
 }
 customElements.define('et2-taglist', Et2Taglist);
 
@@ -89,18 +105,13 @@ customElements.define('et2-taglist', Et2Taglist);
  */
 export class Et2TaglistEmail extends Et2Taglist
 {
-	static get taglistOptionImp () {return TaglistOptionEmail};
 
-	_setOptionTemplate()
+	_optionTemplate(option : SelectOption) : TemplateResult
 	{
-		//@todo: needs to be implemented
+		return html`
-		return super._setOptionTemplate();
+            <egw-option-email .choiceValue="${option.value}" ?checked=${option.value == this.modelValue} ?icon="${option.icon}">
-	}
+				${option.label}
-
+			</egw-option-email>`;
-	get_select_options(): any
-	{
-		//@todo: needs to be implemented
-		return super.get_select_options();
 	}
 }
 customElements.define('et2-taglist-email', Et2TaglistEmail);

api/js/etemplate/Et2Taglist/TaglistComboBox.ts

@@ -1,48 +0,0 @@
-
-/**
- * EGroupware eTemplate2 - TaglistComboBox widget (WebComponent)
- *
- * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
- * @package etemplate
- * @subpackage api
- * @link https://www.egroupware.org
- * @author Hadi Nategh
- */
-
-
-
-import { LionCombobox } from '@lion/combobox';
-import {css} from "@lion/core";
-
-
-export class TaglistComboBox extends LionCombobox {
-	static get properties() {
-		return {
-			...super.properties,
-
-		};
-	}
-	static get styles() {
-		return [
-			super.styles,
-			css`
-				::slotted([slot='input']) {
-				  min-height: 23px;
-				  
-				}
-				:host {
-					border: 1px solid var(--taglist-combobox__container-boder-color);
-					border-radius: 3px;
-				}
-      	`,
-		];
-	}
-	constructor()
-	{
-		super();
-	}
-}
-customElements.define('taglist-combobox', TaglistComboBox);
-
-
-

api/js/etemplate/Et2Taglist/TaglistOption.ts

@@ -1,54 +0,0 @@
-/**
- * EGroupware eTemplate2 - TaglistOption widget (WebComponent)
- *
- * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
- * @package etemplate
- * @subpackage api
- * @link https://www.egroupware.org
- * @author Hadi Nategh
- */
-
-import { LionOption } from '@lion/listbox';
-import {css, html} from "@lion/core";
-
-
-export class TaglistOption extends LionOption {
-
-	static get properties() {
-		return {
-			...super.properties,
-			title: {
-				type: String,
-			},
-		};
-	}
-	constructor() {
-		super();
-		this.title = '';
-
-	}
-
-	static get styles() {
-		return [
-			...super.styles,
-			css`
-			:host([checked]) {
-				visibility: hidden;
-			}
-      	`,
-		];
-	}
-
-}
-
-export class TaglistOptionEmail extends TaglistOption {
-
-}
-
-export class TaglistOptionState extends TaglistOption {
-
-}
-
-export class TaglistOptionCategory extends TaglistOption {
-
-}