import {LitElement, html} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; import {styles} from './tf-styles.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}, users: {type: Object}, }; } static styles = styles; constructor() { super(); this.ids = []; this.users = {}; } changed(event) { this.selected = event.srcElement.value; this.dispatchEvent( new Event('change', { srcElement: this, }) ); } render() { return html` <select class="w3-select w3-dark-grey w3-padding w3-border" @change=${this.changed} style="max-width: 100%; overflow: hidden" > ${(this.ids ?? []).map( (id) => html`<option ?selected=${id == this.selected} value=${id}> ${this.users[id]?.name ? this.users[id]?.name + ' - ' : undefined}<small>${id}</small> </option>` )} </select> `; } } customElements.define('tf-id-picker', TfIdentityPickerElement);