import{r as t,c as i,h as s,g as h}from"./p-3ba9c73c.js";import{N as e}from"./p-23d5d7d1.js";const n=class{constructor(s){t(this,s),this.value=[],this.allowOther=!1,this.other=!1,this.labelOCAddButton="Add",this.labelOCRemoveButton="Delete",this.labelOCOther="Other",this.labelOCImage="Image",this.handleInput=(t,i)=>{t.cancelBubble=!0;const s=t.target;if(!s)return;const h=[...this.value],n=Object.assign({},this.value[i],{text:s.value});h.splice(i,1,n),this.value=h,this.el.dispatchEvent(new e("input"))},this.handleKeyDown=async t=>{"Enter"===t.code&&this.handleAdd()},this.handleAdd=(t=!0)=>{const i={text:""};this.value=this.other?[...this.value.slice(0,-1),i,...this.value.slice(-1)]:[...this.value,i],t&&this.focusLast(!0)},this.handleOther=()=>{this.other=!this.other,this.value=this.other?[...this.value,{text:this.labelOCOther}]:this.value.slice(0,-1),this.onOther.emit(this.other)},this.handleRemove=t=>{const i=[...this.value];i.splice(t,1),this.value=i,this.el.dispatchEvent(new e("input"))},this.handleImage=t=>{const i=this.value[t];i.image?this.deleteImage(i,t):this.uploadImage(t)},this.onOther=i(this,"other",7),this.onFile=i(this,"file",7),this.onFileDelete=i(this,"file-delete",7)}watchValue(t){t.length||this.handleAdd(!1)}async focusLast(t=!1){t&&await new Promise(t=>setTimeout(t,100));const i=this.el.querySelectorAll("[data-option]"),s=i[i.length-(this.other?2:1)],h=s&&s.querySelector("bce-input input");h&&h.focus()}async uploadImage(t){const i=this.el.closest("bce-root"),s=document.createElement("bce-upload-input"),h=await i.execute(s,t=>{s.addEventListener("file",i=>{i.cancelBubble=!0,t(i.detail)}),s.upload()});this.onFile.emit(h);const n=[...this.value];n.splice(t,1,Object.assign({},this.value[t],{image:h.path})),this.value=n,this.el.dispatchEvent(new e("input"))}deleteImage(t,i){if(!t.image)return;const s=t.image.match(/BCE:\/\/([^\/]+)\//);s&&this.onFileDelete.emit({id:s[1],path:t.image});const h=[...this.value],n=Object.assign({},this.value[i]);delete n.image,h.splice(i,1,n),this.value=h,this.el.dispatchEvent(new e("input"))}componentDidLoad(){this.watchValue(this.value)}renderTooltip(t,i){return i?s("bce-tooltip",{placement:"left",icon:t},i):null}renderMetadata(t){if(t.image)return s("div",{"data-meta":!0},this.renderTooltip("fas:image",t.image))}renderOption(t,i,h=!1){return t.hasOwnProperty("text")?s("div",{key:i,"data-option":!0},s("bce-input",{value:t.text,onInput:t=>this.handleInput(t,i),onKeyDown:this.handleKeyDown,placeholder:this.placeholder&&`${this.placeholder} ${i+1}`}),s("bce-icon",{raw:h?"fas:font":this.icon,"fixed-width":!0}),this.renderMetadata(t),s("bce-dropdown-menu",null,!h&&s("bce-button",{icon:"fas:image",onClick:()=>this.handleImage(i)},t.image?this.labelOCRemoveButton:this.labelOCAddButton," ",this.labelOCImage),this.value.length>1&&s("bce-button",{icon:"fas:trash",onClick:()=>this.handleRemove(i)},this.labelOCRemoveButton),s("slot",{name:"option"}))):null}render(){const t=this.other?this.value.slice(0,-1):this.value,i=this.other&&this.value[this.value.length-1];return[this.label&&s("label",null,this.label),t.map((t,i)=>this.renderOption(t,i)),i&&this.renderOption(i,this.value.length-1,!0),s("slot",null),s("div",null,s("bce-button",{type:"text",icon:"fas:plus",onClick:()=>this.handleAdd()},this.labelOCAddButton," ",this.placeholder),this.allowOther&&s("bce-button",{type:"text",icon:"fas:font",onClick:this.handleOther},this.other?this.labelOCRemoveButton:this.labelOCAddButton,' "',this.labelOCOther,'"'),s("slot",{name:"action"}))]}get el(){return h(this)}static get watchers(){return{value:["watchValue"]}}static get style(){return"bce-option-creator{position:relative;display:block;margin-bottom:40px}bce-option-creator bce-icon,bce-option-creator bce-input{--bce-input-height:40px;z-index:2}bce-option-creator>:last-child{position:absolute;left:16px;bottom:-32px}bce-option-creator [data-option]{position:relative}bce-option-creator [data-option]>bce-input{margin:5px 0}bce-option-creator [data-option]>bce-input input{padding:13px 38px}bce-option-creator [data-option]>bce-icon{position:absolute;top:50%;left:10px;opacity:.6;-webkit-transform:translateY(-50%);transform:translateY(-50%)}bce-option-creator [data-option]>[data-meta]{position:absolute;right:30px;z-index:3;bottom:0;padding:4px}bce-option-creator [data-option]>[data-meta] bce-icon{font-size:14px;opacity:.5}bce-option-creator [data-option]>bce-dropdown-menu{position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:3}\@media screen and (min-width:1024px){bce-option-creator [data-option]>bce-input:not([compact]) input{padding:6px 38px}}"}};export{n as bce_option_creator};