import { customElement, LitElement, TemplateResult, property, html } from 'lit-element'; import * as domtools from '@designestate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-input-dropdown': DeesInputDropdown; } } @customElement('dees-input-dropdown') export class DeesInputDropdown extends LitElement { public static demo = () => html`` // INSTANCE public changeSubject = new domtools.rxjs.Subject(); @property() public label: string = 'Label'; @property() public key: string; @property() public options: {option: string, key: string, payload?: any}[] = []; @property() public selectedOption: {option: string, key: string, payload?: any} = { key: null, option: null, payload: null }; @property({ type: Boolean }) public required: boolean = false; public render(): TemplateResult { return html` ${domtools.elementBasic.styles}
${this.selectedOption?.option}
${this.options.map(option => { return html`
{this.updateSelection(option);}}>${option.option}
` })}
`; } firstUpdated() { this.selectedOption = this.options[0] || null; } public async updateSelection(selectedOption) { this.selectedOption = selectedOption; this.dispatchEvent(new CustomEvent('selectedOption', { detail: selectedOption, bubbles: true })); this.toggleSelectionBox(); this.changeSubject.next(this); } public toggleSelectionBox() { this.shadowRoot.querySelector('.selectionBox').classList.toggle('show'); } }