2023-10-29 20:22:30 -04:00
|
|
|
import {LitElement, html} from './lit-all.min.js';
|
|
|
|
import * as tfrpc from '/static/tfrpc.js';
|
|
|
|
|
|
|
|
/*
|
|
|
|
** Provide a list of IDs, and this lets the user pick one.
|
|
|
|
*/
|
|
|
|
class TfIdentityPickerElement extends LitElement {
|
|
|
|
static get properties() {
|
|
|
|
return {
|
|
|
|
ids: {type: Array},
|
|
|
|
selected: {type: String},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.ids = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
changed(event) {
|
|
|
|
this.selected = event.srcElement.value;
|
|
|
|
this.dispatchEvent(new Event('change', {
|
|
|
|
srcElement: this,
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return html`
|
2024-02-22 10:11:49 -05:00
|
|
|
<link rel="stylesheet" href="tildefriends.css"/>
|
2024-02-22 07:03:21 -05:00
|
|
|
<select @change=${this.changed} class="button" style="max-width: 100%">
|
2023-10-29 20:22:30 -04:00
|
|
|
${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
|
|
|
|
</select>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
customElements.define('tf-id-picker', TfIdentityPickerElement);
|