Get taglist selected options showing up

Note the [internal] event listener bound in Et2Taglist.connectedCallback() that re-renders the TaglistSelection every time the taglist's [internal] value changes

api/js/etemplate/Et2Taglist/EgwOption.ts

@@ -8,25 +8,30 @@
  * @author Hadi Nategh
  */
 
-import { LionOption } from '@lion/listbox';
+import {LionOption} from '@lion/listbox';
 import {css, html} from "@lion/core";
 
-export class EgwOption extends LionOption {
+export class EgwOption extends LionOption
+{
 
-	static get properties() {
+	static get properties()
+	{
 		return {
 			...super.properties,
 			title: {type: String},
 			icon: {type: String}
 		};
 	}
-	constructor() {
+
+	constructor()
+	{
 		super();
 		this.title = '';
-		this.icon  = '';
+		this.icon = '';
 	}
 
-	static get styles() {
+	static get styles()
+	{
 		return [
 			...super.styles,
 			css`
@@ -37,13 +42,13 @@ export class EgwOption extends LionOption {
 		];
 	}
 
-	render ()
+	render()
 	{
 		return html`
-			${this.icon
-					? html` <img class="egw-option__icon" src="${this.icon}" alt="" />`
-					: '' }
-			${super.render()}
+            ${this.icon
+              ? html` <img class="egw-option__icon" src="${this.icon}" alt=""/>`
+              : ''}
+            ${super.render()}
 		`;
 	}
 }

api/js/etemplate/Et2Taglist/Et2Taglist.ts

@@ -14,9 +14,11 @@ import {Et2widgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
 import {LionCombobox} from "@lion/combobox";
 import {SelectOption} from "../Et2Select/FindSelectOptions";
 import {EgwOption} from "./EgwOption";
+import {TaglistSelection} from "./TaglistSelection";
 
 // Force the include, we really need this and without it the file will be skipped
 const really_import_me = EgwOption;
+const really_import_me2 = TaglistSelection;
 
 /**
  * Taglist base class implementation
@@ -48,10 +50,11 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
 	get slots() {
 		return {
 			...super.slots,
-			"selection-display": () => {
-				return html `<taglist-selection
-                        slot="selection-display"
-                        style="display: contents;"></taglist-selection>`;
+			"selection-display": () =>
+			{
+				let display = document.createElement("taglist-selection");
+				display.setAttribute("slot", "selection-display");
+				return display;
 			}
 		}
 	}
@@ -62,6 +65,13 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
 
 	}
 
+	connectedCallback()
+	{
+		super.connectedCallback();
+		this.addEventListener('model-value-changed', () => {this._selectionDisplayNode.requestUpdate();});
+
+	}
+
 	/**
 	 * Get the node where we're putting the options
 	 *

api/js/etemplate/Et2Taglist/TaglistSelection.ts

@@ -11,7 +11,6 @@
 
 
 import {css, html, LitElement} from "@lion/core";
-import {TaglistComboBox} from "./TaglistComboBox";
 import {taglistStyles} from "./TaglistStyles";
 
 
@@ -21,10 +20,9 @@ import {taglistStyles} from "./TaglistStyles";
 export class TaglistSelection extends LitElement {
 	static get properties() {
 		return {
-			selectedTags: Array,
-			comboxElement: TaglistComboBox,
-			canBeClosed: Boolean,
-			canBeEdited: Boolean
+			comboxElement: {type: Object},
+			canBeClosed: {type: Boolean},
+			canBeEdited: {type: Boolean}
 		}
 	};
 
@@ -73,13 +71,14 @@ export class TaglistSelection extends LitElement {
 				background-image: var(--tag-closeBtn-img);
 			}
 			`
-    	];
+		];
 	}
 
 	/**
 	 *
 	 */
-	get _inputNode() {
+	get _inputNode()
+	{
 		return this._getComboBoxElement()._inputNode;
 	}
 
@@ -90,7 +89,7 @@ export class TaglistSelection extends LitElement {
 	_getComboBoxElement()
 	{
 		// @ts-ignore
-		return this.comboboxElement;
+		return this.parentElement;
 	}
 
 	/**
@@ -112,7 +111,6 @@ export class TaglistSelection extends LitElement {
 	constructor() {
 		super();
 
-		this.selectedTags = [];
 		this.__handleCloseBtn = this.__handleCloseBtn.bind(this);
 		this.__handleEditBtn = this.__handleEditBtn.bind(this);
 		this.__inputOnKeyup = this.__inputOnKeyup.bind(this);
@@ -131,15 +129,6 @@ export class TaglistSelection extends LitElement {
 		}
 	}
 
-	/**
-	 *
-	 * @param changedProperties
-	 */
-	onComboboxElementUpdated(changedProperties) {
-		if (changedProperties.has('modelValue')) {
-			this.selectedTags = this.__getSelectedTags();
-		}
-	}
 
 	__handleEditBtn()
 	{
@@ -155,14 +144,15 @@ export class TaglistSelection extends LitElement {
 	 *
 	 * @param option
 	 */
-	_selectedTagTemplate(option) {
+	_selectedTagTemplate(option)
+	{
 		return html`
-			<div class="taglist-selection__tag">
-                ${this._canBeEdited? html`<span class="tag-editBtn" @click="${this.__handleEditBtn}"></span>`:''}
-				<span class="tag-label">${option.value}</span>
-				${this._canBeClosed? html`<span class="tag-closeBtn" @click="${this.__handleCloseBtn}"></span>`:''}
-			</div>
-    `;
+            <div class="taglist-selection__tag">
+                ${this.canBeEdited ? html`<span class="tag-editBtn" @click="${this.__handleEditBtn}"></span>` : ''}
+                <span class="tag-label">${option.value}</span>
+                ${this.canBeClosed ? html`<span class="tag-closeBtn" @click="${this.__handleCloseBtn}"></span>` : ''}
+            </div>
+		`;
 	}
 
 	/**
@@ -170,12 +160,13 @@ export class TaglistSelection extends LitElement {
 	 */
 	_selectedTagsTemplate() {
 		return html`
-		  <div class="taglist-selection__tags">
-			${this.selectedTags.map((option) => {
-				return this._selectedTagTemplate(option);
-			})}
-		  </div>
-    `;
+            <div class="taglist-selection__tags">
+                ${this.__getSelectedTags().map((option) =>
+                {
+                    return this._selectedTagTemplate(option);
+                })}
+            </div>
+		`;
 	}
 
 	/**