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); + })} +
+ `; } /**