import{r as t,d as i,h as e,g as s}from"./p-aee8b1df.js";var n;const h=class{constructor(e){t(this,e),this.value=[],n.set(this,window.BCE.file),this.handleInput=(t,i)=>{const e=t.target;if(!e)return;const s=[...this.value],n=Object.assign(Object.assign({},this.value[i]),{text:e.value});s.splice(i,1,n),this.updateValue(s),t.stopPropagation()},this.handleKeyDown=async(t,i)=>{switch(t.keyCode){case 8:return void(t.target.value||0==i||(this.focusOption(i-1),this.handleRemove(i)));case 13:return this.addOption()}},this.handleOther=()=>{this.other=!this.other,this.value=this.other?[...this.value,{text:this.t("me-other")||""}]:this.value.slice(0,-1),this.onOther.emit(this.other)},this.handleRemove=t=>{const i=[...this.value];i.splice(t,1),this.updateValue(i)},this.handleColor=()=>{},this.handleImage=t=>{const i=this.value[t];"image"in i&&i.image?this.deleteImage(i,t):this.uploadImage(t)},this.onOther=i(this,"other",7)}watchValue(t){t.length||this.addOption(!1)}async addOption(t=!0){const i={text:""},e=this.other?[...this.value.slice(0,-1),i,...this.value.slice(-1)]:[...this.value,i];this.updateValue(e),t&&this.focusLast(!0)}async focusLast(t){return this.focusOption(-(this.other?2:1),t)}async focusOption(t,i=!1){i&&await new Promise(t=>setTimeout(t,100));const e=this.el.shadowRoot.querySelectorAll("[data-option] bce-input"),s=e[t<0?e.length+t:t],n=s&&s.shadowRoot.querySelector("input");n&&n.focus()}async uploadImage(t){const i=document.querySelector("bce-root"),e=document.createElement("bce-upload");e.accept="image/*",e.active=!0,e.dialog=!0;const s=await i.execute(e,t=>{e.addEventListener("input",i=>{t(i.target.value[0])})},{display:!0}),n=[...this.value];n.splice(t,1,Object.assign(Object.assign({},this.value[t]),{image:s})),console.log(n)}deleteImage(t,i){if(!("image"in t&&t.image))return;(function(t,i){if(!i.has(t))throw new TypeError("attempted to get private field on non-instance");return i.get(t)})(this,n).delete(t.image,{});const e=[...this.value],s=Object.assign({},this.value[i]);"image"in s&&delete s.image,e.splice(i,1,s),this.updateValue(e)}updateValue(t){this.value=t;const i=new globalThis.Event("input",{bubbles:!0,composed:!0});this.el.dispatchEvent(i)}componentWillLoad(){this.watchValue(this.value)}renderTooltip(t,i){return i?e("bce-tooltip",{placement:"left",icon:t},i):null}renderMetadata(t){if("image"in t)return e("div",{"data-meta":!0},this.renderTooltip("fas:image",t.image))}renderOption(t,i,s=!1){return t.hasOwnProperty("text")?e("div",{key:i,"data-option":!0},e("bce-input",{value:t.text,onInput:t=>this.handleInput(t,i),onKeyDown:t=>this.handleKeyDown(t,i),placeholder:this.placeholder&&`${this.placeholder} ${i+1}`}),this.renderMetadata(t),e("bce-menu",null,e("slot",{name:"option"}),this.allowColor&&e("bce-button",{icon:"fas:palette",onClick:()=>this.handleColor(i)},"Color"),this.allowImage&&!s&&e("bce-button",{icon:"fas:image",onClick:()=>this.handleImage(i)},this.t("image"in t&&t.image?"delete-item":"upload-item",{item:this.t("image")})),this.value.length>1&&e("bce-button",{icon:"fas:trash",onClick:()=>this.handleRemove(i)},this.t("delete-item",{item:this.label})))):null}render(){const t=this.other?this.value.slice(0,-1):this.value,i=this.other&&this.value[this.value.length-1];return[t.map((t,i)=>this.renderOption(t,i)),i&&this.renderOption(i,this.value.length-1,!0),e("slot",null),e("div",null,e("bce-button",{design:"text",icon:"fas:plus",onClick:()=>this.addOption()},this.t("add-item",{item:this.label})),this.allowOther&&e("bce-button",{design:"text",icon:"fas:font",onClick:this.handleOther},this.t(this.other?"delete-item":"add-item",{item:`"${this.t("me-other")}"`})),e("slot",{name:"action"}))]}get el(){return s(this)}static get watchers(){return{value:["watchValue"]}}static get style(){return":host{position:relative;display:block;margin-bottom:40px}:host bce-icon,:host bce-input{--bce-input-height:40px;z-index:2}:host bce-button{text-transform:none}:host>:last-child{position:absolute;left:8px;bottom:-34px}:host [data-option]{position:relative}:host [data-option]>bce-input{margin:5px 0}:host [data-option]>bce-input input{padding:13px 38px}:host [data-option]>bce-icon{position:absolute;top:50%;left:10px;opacity:0.6;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host [data-option]>[data-meta]{position:absolute;right:30px;z-index:3;bottom:0;padding:4px}:host [data-option]>[data-meta] bce-icon{font-size:14px;opacity:0.5}:host [data-option]>bce-menu{position:absolute;right:0;top:0;z-index:3}\@media screen and (min-width: 1024px){:host [data-option]>bce-input:not([compact]) input{padding:6px 38px}}"}};n=new WeakMap;export{h as bce_option_creator};