mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-22 14:41:29 +01:00
Fix listbox didn't have correct sub-element. Fixes placeholder dialogs in Collabora.
This commit is contained in:
parent
78810e9653
commit
9ccd9b5240
@ -4,6 +4,8 @@ import shoelace from "../Styles/shoelace";
|
|||||||
import {css, html, LitElement, 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";
|
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
|
* 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()
|
@property({type: Boolean, reflect: true}) multiple = false;
|
||||||
{
|
|
||||||
return {
|
|
||||||
...super.properties,
|
|
||||||
/**
|
|
||||||
* Toggle between single and multiple selection
|
|
||||||
*/
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
reflect: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private __value : String[] | null;
|
private __value : String[] | null;
|
||||||
|
|
||||||
@ -90,6 +80,11 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private getAllItems() : SlMenuItem[]
|
||||||
|
{
|
||||||
|
return <SlMenuItem[]>Array.from(this.shadowRoot?.querySelectorAll('sl-menu-item')) ?? [];
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle an item was selected
|
* Handle an item was selected
|
||||||
*
|
*
|
||||||
@ -118,15 +113,12 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem
|
|||||||
this.dispatchEvent(new Event("change"));
|
this.dispatchEvent(new Event("change"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@property()
|
||||||
get value()
|
get value()
|
||||||
{
|
{
|
||||||
let value = [];
|
let value = this.hasUpdated ? this.getAllItems()
|
||||||
if(this.defaultSlot)
|
|
||||||
{
|
|
||||||
value = this.getAllItems()
|
|
||||||
.filter((item) => item.checked)
|
.filter((item) => item.checked)
|
||||||
.map((item) => item.value);
|
.map((item) => item.value) : this.__value ?? []
|
||||||
}
|
|
||||||
return this.multiple ? value : value.pop();
|
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.
|
// Tag used must match this.optionTag, but you can't use the variable directly.
|
||||||
// Pass option along so SearchMixin can grab it if needed
|
// Pass option along so SearchMixin can grab it if needed
|
||||||
return html`
|
return html`
|
||||||
<sl-option
|
<sl-menu-item
|
||||||
value="${option.value}"
|
value="${option.value}"
|
||||||
title="${!option.title || this.noLang ? option.title : this.egw().lang(option.title)}"
|
title="${!option.title || this.noLang ? option.title : this.egw().lang(option.title)}"
|
||||||
class="${option.class}" .option=${option}
|
class="${option.class}" .option=${option}
|
||||||
.selected=${checked}
|
type="checkbox"
|
||||||
|
?checked=${checked}
|
||||||
>
|
>
|
||||||
${icon}
|
${icon}
|
||||||
${this.noLang ? option.label : this.egw().lang(option.label)}
|
${this.noLang ? option.label : this.egw().lang(option.label)}
|
||||||
</sl-option>`;
|
</sl-menu-item>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
render()
|
render()
|
||||||
|
Loading…
Reference in New Issue
Block a user