var __decorate=this&&this.__decorate||function(e,t,o,r){var l,s=arguments.length,i=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(i=(s<3?l(i):s>3?l(t,o,i):l(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement as e,html as t}from"lit";import{customElement as o,property as r,query as l}from"lit/decorators.js";import{PickerStyle as s}from"../styles/picker-styles";let WritableDropdown=class extends e{constructor(){super(...arguments),this.options=[]}static get styles(){return s}firstUpdated(){this.options.length>0&&!this.value&&(this.value=this.options[0].value),this.selectElement.value=this.value}shouldUpdate(e){return this.selectElement&&e.has("value")&&(this.selectElement.value=this.value),super.shouldUpdate(e)}render(){return t`
        <select id="select-element" @change=${e=>this.dispatchEvent(new Event("onchange",e))} @input=${e=>{this.dispatchEvent(new InputEvent("oninput",e)),this.value=this.selectElement.value}}>
            ${this.options.map(e=>t`<option value="${e.value}">${e.name}</option>`)}
        </select>
        `}};__decorate([r({type:Object,reflect:!0})],WritableDropdown.prototype,"value",void 0),__decorate([r({type:Array})],WritableDropdown.prototype,"options",void 0),__decorate([l("#select-element")],WritableDropdown.prototype,"selectElement",void 0),WritableDropdown=__decorate([o("writable-dropdown")],WritableDropdown);export{WritableDropdown};