diff --git a/api/js/etemplate/Et2Select/Et2Listbox.ts b/api/js/etemplate/Et2Select/Et2Listbox.ts index e59c85302b..4224d8dd74 100644 --- a/api/js/etemplate/Et2Select/Et2Listbox.ts +++ b/api/js/etemplate/Et2Select/Et2Listbox.ts @@ -4,6 +4,8 @@ import shoelace from "../Styles/shoelace"; import {css, html, LitElement, TemplateResult} from "lit"; import {SelectOption} from "./FindSelectOptions"; import {repeat} from "lit/directives/repeat.js"; +import {property} from "lit/decorators/property.js"; +import {SlMenuItem} from "@shoelace-style/shoelace"; /** * A selectbox that shows more than one row at a time @@ -56,19 +58,7 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem ]; } - static get properties() - { - return { - ...super.properties, - /** - * Toggle between single and multiple selection - */ - multiple: { - type: Boolean, - reflect: true, - } - } - } + @property({type: Boolean, reflect: true}) multiple = false; private __value : String[] | null; @@ -90,6 +80,11 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem }); } + private getAllItems() : SlMenuItem[] + { + return Array.from(this.shadowRoot?.querySelectorAll('sl-menu-item')) ?? []; + } + /** * Handle an item was selected * @@ -118,15 +113,12 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem this.dispatchEvent(new Event("change")); } + @property() get value() { - let value = []; - if(this.defaultSlot) - { - value = this.getAllItems() + let value = this.hasUpdated ? this.getAllItems() .filter((item) => item.checked) - .map((item) => item.value); - } + .map((item) => item.value) : this.__value ?? [] return this.multiple ? value : value.pop(); } @@ -154,15 +146,16 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem // Tag used must match this.optionTag, but you can't use the variable directly. // Pass option along so SearchMixin can grab it if needed return html` - ${icon} ${this.noLang ? option.label : this.egw().lang(option.label)} - `; + `; } render()