diff --git a/api/js/etemplate/Et2Taglist/EgwOption.ts b/api/js/etemplate/Et2Taglist/EgwOption.ts
index 67b0829207..5b2a195376 100644
--- a/api/js/etemplate/Et2Taglist/EgwOption.ts
+++ b/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` `
- : '' }
- ${super.render()}
+ ${this.icon
+ ? html` `
+ : ''}
+ ${super.render()}
`;
}
}
diff --git a/api/js/etemplate/Et2Taglist/Et2Taglist.ts b/api/js/etemplate/Et2Taglist/Et2Taglist.ts
index a1a1a6078b..4c550cc8a0 100644
--- a/api/js/etemplate/Et2Taglist/Et2Taglist.ts
+++ b/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 ``;
+ "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
*
diff --git a/api/js/etemplate/Et2Taglist/TaglistSelection.ts b/api/js/etemplate/Et2Taglist/TaglistSelection.ts
index a578ad407e..ecc4b466b9 100644
--- a/api/js/etemplate/Et2Taglist/TaglistSelection.ts
+++ b/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`
-
- ${this._canBeEdited? html``:''}
- ${option.value}
- ${this._canBeClosed? html``:''}
-
- `;
+
+ ${this.canBeEdited ? html`` : ''}
+ ${option.value}
+ ${this.canBeClosed ? html`` : ''}
+
+ `;
}
/**
@@ -170,12 +160,13 @@ export class TaglistSelection extends LitElement {
*/
_selectedTagsTemplate() {
return html`
-
- ${this.selectedTags.map((option) => {
- return this._selectedTagTemplate(option);
- })}
-
- `;
+
+ ${this.__getSelectedTags().map((option) =>
+ {
+ return this._selectedTagTemplate(option);
+ })}
+
+ `;
}
/**