Et2Listbox: Fix options were not shown

Fixes merge placeholders not shown in Collabora
This commit is contained in:
nathan 2023-11-17 11:16:35 -07:00
parent 95019464bd
commit 032035ae5f

View File

@ -1,9 +1,9 @@
import {SlMenu} from "@shoelace-style/shoelace";
import {Et2WidgetWithSelectMixin} from "./Et2WidgetWithSelectMixin"; import {Et2WidgetWithSelectMixin} from "./Et2WidgetWithSelectMixin";
import {RowLimitedMixin} from "../Layout/RowLimitedMixin"; import {RowLimitedMixin} from "../Layout/RowLimitedMixin";
import shoelace from "../Styles/shoelace"; import shoelace from "../Styles/shoelace";
import {css, html, TemplateResult} from "lit"; import {css, html, LitElement, TemplateResult} from "lit";
import {SelectOption} from "./FindSelectOptions"; import {SelectOption} from "./FindSelectOptions";
import {repeat} from "lit/directives/repeat.js";
/** /**
* A selectbox that shows more than one row at a time * A selectbox that shows more than one row at a time
@ -12,7 +12,7 @@ import {SelectOption} from "./FindSelectOptions";
* *
* Use Et2Selectbox in most cases, it's better. * Use Et2Selectbox in most cases, it's better.
*/ */
export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(SlMenu)) export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElement))
{ {
static get styles() static get styles()
@ -47,8 +47,8 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(SlMenu)
/* This is usually not used due to flex, but is the basis for ellipsis calculation */ /* This is usually not used due to flex, but is the basis for ellipsis calculation */
width: 10ex; width: 10ex;
} }
:host([rows])::part(base) { :host([rows]) .menu {
height: calc(var(--rows, 5) * 1.9rem); height: calc(var(--rows, 5) * 1.9rem);
overflow-y: auto; overflow-y: auto;
} }
@ -164,6 +164,15 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(SlMenu)
${this.noLang ? option.label : this.egw().lang(option.label)} ${this.noLang ? option.label : this.egw().lang(option.label)}
</sl-option>`; </sl-option>`;
} }
render()
{
return html`
<sl-menu class="menu">
${repeat(this.select_options, (o) => o.value, (option : SelectOption) => this._optionTemplate(option))}
</sl-menu>
`
}
} }
customElements.define("et2-listbox", Et2Listbox); customElements.define("et2-listbox", Et2Listbox);