import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-input-dropdown': DeesInputDropdown; } } @customElement('dees-input-dropdown') export class DeesInputDropdown extends DeesElement { public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>` // 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; @property({ type: Boolean }) public disabled: boolean = false; public render(): TemplateResult { return html` ${domtools.elementBasic.styles} <style> * { box-sizing: border-box; } :host { position: relative; display: block; height: 40px; } .maincontainer { display: block; } .label { font-size: 14px; margin-bottom: 15px; } .selectedBox { cursor: pointer; position: relative; max-width: 420px; height: 40px; border: 1px solid #CCC; padding: 12px; z-index: 0px; } .selectionBox { pointer-events: none; cursor: pointer; transition: all 0.2s ease; opacity: 0; position: relative; background: #ffffff; max-width: 420px; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); height: 40px; margin-top: -40px; z-index: 100; } .selectionBox.show { pointer-events: all; opacity: 1; min-height: 160px; } .option { padding: 12px; } .option:hover { background: #fafafa; } </style> <div class="maincontainer"> <div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}"> ${this.selectedOption?.option} </div> <div class="selectionBox"> ${this.options.map(option => { return html` <div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div> ` })} </div> </div> `; } 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'); } }