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.toggleSelectionBox();}}">
${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');
}
}