builder-settings-types 0.0.444 → 0.0.445

package/dist/builder-settings-types.cjs.js

@@ -617,7 +617,7 @@
       <span class="upload-text">Upload Image</span>
     `,a.addEventListener("click",()=>{window.postMessage({type:"OPEN_FILE_MANAGER_MODAL",settingId:r},"*")}),a}}function g3(t,e,r,a){const n=document.createElement("div");n.className="image-map-container",n.addEventListener("scroll",r.onScroll);const i=document.createElement("div");i.className="image-map-wrapper",i.addEventListener("mousemove",r.onMarkerDrag),i.addEventListener("mouseup",r.onStopDragging),i.addEventListener("mouseleave",r.onStopDragging);const s=document.createElement("img");s.className="image-map-image",s.src=t,s.addEventListener("load",r.onImageLoad),s.addEventListener("click",r.onImageClick),i.appendChild(s);const o=a.getElement();return i.appendChild(o),s.addEventListener("mouseenter",()=>a.show()),s.addEventListener("mouseleave",()=>a.hide()),s.addEventListener("mousemove",l=>{a.updatePosition(l,s),r.onMouseMove&&r.onMouseMove(l)}),e.forEach(l=>{const c=l3(l,{onDelete:r.onDelete,onDragStart:r.onDragStart});i.appendChild(c)}),n.appendChild(i),{container:n,imageElement:s}}function x3(t,e){const r=document.createElement("div");r.className="image-map-backdrop",r.style.display="none";const a=document.createElement("div");a.className="image-map-popover",a.style.display="none";const n=document.createElement("div");n.className="image-map-header",n.style.cursor="move";const i=document.createElement("h3");i.className="image-map-title",i.textContent="Prize Map",n.appendChild(i);const s=document.createElement("button");s.type="button",s.className="image-map-close-btn",s.innerHTML=V4,s.addEventListener("click",()=>void t()),n.appendChild(s),ns(n,a,(l,c)=>{e(l,c)}),a.appendChild(n);const o=document.createElement("div");return o.className="image-map-content",a.appendChild(o),document.body.appendChild(r),document.body.appendChild(a),{backdrop:r,popover:a,content:o}}function v3(t,e){const r=e.getBoundingClientRect(),a=Z4,n=Math.min(window.innerHeight*Q4,e3);let i=r.right+8,s=r.top;const o=window.innerWidth-r.right;return o<a+16&&r.left>o+100&&(i=r.left-a-8),i=Math.max(8,Math.min(i,window.innerWidth-a-8)),s=Math.max(8,Math.min(s,window.innerHeight-n-8)),t.style.left=`${i}px`,t.style.top=`${s}px`,{left:i,top:s}}function w3(t,e,r){const a=document.createElement("div");a.className="bottom-buttons";const n=document.createElement("button");n.type="button",n.className="clear-all-btn",n.innerHTML=j4+"<span>Remove All</span>",n.addEventListener("click",e),a.appendChild(n);const i=document.createElement("div");i.className="done-btn-wrapper";const s=document.createElement("button");if(s.type="button",s.className="done-btn",s.textContent="Done",t||(s.disabled=!0,i.classList.add("has-tooltip")),s.addEventListener("click",()=>{t&&r()}),i.appendChild(s),!t){const o=document.createElement("div");o.className="done-btn-tooltip";const l=document.createElement("div");l.className="done-btn-tooltip-content",l.textContent="Map all prizes";const c=document.createElement("div");c.className="done-btn-tooltip-tail",c.innerHTML=K4,o.appendChild(l),o.appendChild(c),i.appendChild(o)}return a.appendChild(i),a}const E3=`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L2.58579 2.58579C3.36684 3.36684 4.63317 3.36683 5.41421 2.58579L8 0L0 0Z" fill="#FF5630"/>
-</svg>`,Cr=class Cr extends Le{constructor(e={}){var r;super(e),this.inputType={imageUrl:"text",markers:"text"},this.mainDisplayElements=null,this.popoverElements=null,this.imageElement=null,this.cursorTooltip=null,this.popoverPosition=null,this.isPopoverOpen=!1,this.confirmModal=new n3,this.previousImageDimensions=null,this.draggingMarkerId=null,this.historyManager=new s3,this.isUndoRedoOperation=!1,this.initialValue=null,this.lastMouseX=0,this.lastMouseY=0,this.errorTooltipEl=null,this.errorTooltipTimeoutId=null,this.props.maxMarkers=this.props.maxMarkers??((r=this.props.prizeMap)==null?void 0:r.length)??zr,this.props.maxFileSizeMB=this.props.maxFileSizeMB??g0,this.props.markerSize=this.props.markerSize??Y4,this.value||(this.value={imageUrl:"",markers:[]}),w0.registerHandler(this.id,a=>{this.handleFileManagerImageSelected(a)}),this.onBackgroundClick=a=>{if(this.isPopoverOpen&&this.popoverElements&&!this.popoverElements.popover.contains(a.target)){if(a.target.closest('[class*="modal"], [class*="Modal"], [class*="dialog"], [class*="Dialog"], [class*="overlay"], [class*="Overlay"]'))return;this.closePopover()}},this.handlePopoverKeydown=a=>{if(!this.isPopoverOpen)return;if(a.key==="Escape"){this.closePopover();return}if(a.ctrlKey||a.metaKey)switch(a.code){case"KeyZ":a.preventDefault(),a.shiftKey?this.redo():this.undo();break;case"KeyY":a.preventDefault(),this.redo();break}},this.boundHandleMarkerDrag=this.handleMarkerDrag.bind(this),this.boundStopDragging=this.stopDragging.bind(this),this.boundHandleScroll=this.handleScroll.bind(this)}draw(){const e=document.createElement("div");if(e.className="image-map-setting-wrapper",this.props.title||this.props.icon){const h=document.createElement("div");if(h.className="icon-container",this.props.icon){const f=this.createIcon(this.props.icon);h.appendChild(f)}if(this.props.title){const f=this.createLabel(this.props.title);h.appendChild(f)}e.appendChild(h)}const r=document.createElement("div");r.className="image-map-sections-container";const a=document.createElement("div");a.className="image-map-section";const n=document.createElement("h4");n.className="image-map-section-title",n.textContent="Upload/Replace Map Image",a.appendChild(n),this.mainDisplayElements=d3();const i=p3(this.mainDisplayElements.thumbnailEl,()=>{this.value={imageUrl:"",markers:[]},this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange()}),s=this.props.upload||"file-manager",o=m3(s,h=>this.handleImageUpload(h),this.id);i.appendChild(o),a.appendChild(i),r.appendChild(a);const l=document.createElement("div");l.className="image-map-section";const c=document.createElement("h4");return c.className="image-map-section-title",c.textContent="Map Setup",l.appendChild(c),this.mainDisplayElements.configureButton.addEventListener("click",()=>{var h;(h=this.mainDisplayElements)!=null&&h.configureButton.disabled||this.openPopover()}),l.appendChild(this.mainDisplayElements.configureButton),r.appendChild(l),e.appendChild(r),this.createPopoverElements(),fr(this.mainDisplayElements,this.value),e}createPopoverElements(){this.popoverElements=x3(()=>void this.closePopover(),(e,r)=>{this.popoverPosition={left:e,top:r}})}openPopover(){Cr.openInstance&&Cr.openInstance!==this&&Cr.openInstance.closePopover(),this.isPopoverOpen=!0,Cr.openInstance=this,this.value?this.initialValue=JSON.parse(JSON.stringify(this.value)):this.initialValue={imageUrl:"",markers:[]},this.value&&this.historyManager.initialize(this.value.markers),this.popoverElements&&(this.popoverElements.backdrop.style.display="block",this.popoverElements.popover.style.display="flex"),this.notifyPopoverState(!0),this.positionPopoverElement(),this.refreshPopoverContentAndScrollToBottom(),setTimeout(()=>{document.addEventListener("click",this.onBackgroundClick,!0)},200),document.addEventListener("keydown",this.handlePopoverKeydown,!0)}hasAllMarkers(){if(!this.value)return!1;const e=this.props.maxMarkers||zr;return this.value.markers.length===e}hasChanges(){return!this.initialValue||!this.value?!1:JSON.stringify(this.initialValue.markers)!==JSON.stringify(this.value.markers)}async closePopover(e=!1){if(!this.isPopoverOpen&&!e)return;const r=this.isPopoverOpen;if(!e&&this.hasChanges()&&!this.hasAllMarkers()){if(!await this.confirmModal.show({title:"Discard changes?",description:"You haven't placed all markers. Closing will discard your changes."}))return;this.initialValue&&(this.value=JSON.parse(JSON.stringify(this.initialValue)),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange())}this.isPopoverOpen=!1,this.draggingMarkerId=null,this.clearErrorTooltip(),this.popoverElements&&(this.popoverElements.backdrop.style.display="none",this.popoverElements.popover.style.display="none"),document.removeEventListener("click",this.onBackgroundClick,!0),document.removeEventListener("keydown",this.handlePopoverKeydown,!0),Cr.openInstance===this&&(Cr.openInstance=null),r&&this.notifyPopoverState(!1)}positionPopoverElement(){!this.popoverElements||!this.mainDisplayElements||(this.popoverPosition=v3(this.popoverElements.popover,this.mainDisplayElements.configureButton))}refreshPopoverContent(){var o;if(!this.popoverElements)return;this.clearErrorTooltip();const e=this.popoverElements.content,r=e.querySelector(".image-map-container"),a=e.querySelector(".simple-prize-list"),n=(r==null?void 0:r.scrollTop)||0,i=(a==null?void 0:a.scrollTop)||0;if(e.innerHTML="",this.value&&this.value.imageUrl&&this.value.imageUrl!==""){const l=h3({canUndo:this.historyManager.canUndo(),canRedo:this.historyManager.canRedo(),markerCount:((o=this.value)==null?void 0:o.markers.length)||0,maxMarkers:this.props.maxMarkers||zr},{onUndo:()=>this.undo(),onRedo:()=>this.redo()});e.appendChild(l);const c=document.createElement("div");c.className="image-map-main-layout";const h=document.createElement("div");h.className="image-map-image-section",this.cursorTooltip=new i3;const{container:f,imageElement:u}=g3(this.value.imageUrl,this.value.markers,{onImageClick:w=>this.handleImageClick(w),onMarkerDrag:this.boundHandleMarkerDrag,onStopDragging:this.boundStopDragging,onImageLoad:()=>this.recordImageNaturalSize(),onDelete:w=>this.handleDeleteMarker(w),onDragStart:w=>{this.draggingMarkerId=w},onScroll:this.boundHandleScroll,onMouseMove:w=>this.trackMousePosition(w)},this.cursorTooltip);this.imageElement=u,h.appendChild(f);const p=document.createElement("div");p.className="prize-list-section";const m=c3(this.value.markers,this.props.maxMarkers||zr,this.props.prizeMap);p.appendChild(m),c.appendChild(h),c.appendChild(p),e.appendChild(c);const d=w3(this.hasAllMarkers(),()=>this.handleClearAllMarkers(),()=>{this.triggerChange(),this.closePopover(!0)});e.appendChild(d);const g=h.querySelector(".image-map-container"),x=p.querySelector(".simple-prize-list");g&&(g.scrollTop=n),x&&(x.scrollTop=i),this.updateCursorTooltipContent()}else{const l=f3({uploadMethod:this.props.upload||"file-manager",settingId:this.id,onFileSelected:c=>this.handleImageUpload(c),includeTitle:!0,variant:"popover"});e.appendChild(l)}}refreshPopoverContentAndScrollToBottom(){this.refreshPopoverContent(),requestAnimationFrame(()=>{this.scrollPrizeListToBottom()})}scrollPrizeListToBottom(){if(!this.popoverElements)return;const e=this.popoverElements.popover.querySelector(".simple-prize-list");e&&requestAnimationFrame(()=>{e.scrollTop=e.scrollHeight})}handleFileManagerImageSelected(e){const r=this.previousImageDimensions,a=new Image;a.onload=()=>{var s;const n={width:a.naturalWidth||0,height:a.naturalHeight||0},i=x0(((s=this.value)==null?void 0:s.markers)||[],r,n);this.value={imageUrl:e,markers:i},this.previousImageDimensions=n,this.historyManager.initialize(i),this.updateUndoRedoButtons(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.isPopoverOpen&&this.refreshPopoverContent(),this.triggerChange()},a.onerror=()=>{ya.show("Failed to load image from file manager.")},a.src=e}handleImageUpload(e){const r=this.previousImageDimensions,a=r3(e,this.props.maxFileSizeMB||g0);if(!a.valid){ya.show(a.error);return}const n=new FileReader;n.onload=i=>{var o;const s=(o=i.target)==null?void 0:o.result;if(typeof s=="string"){const l=new Image;l.onload=()=>{var f;const c={width:l.naturalWidth||0,height:l.naturalHeight||0},h=x0(((f=this.value)==null?void 0:f.markers)||[],r,c);this.value={imageUrl:s,markers:h},this.previousImageDimensions=c,this.historyManager.initialize(h),this.updateUndoRedoButtons(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.isPopoverOpen&&this.refreshPopoverContent(),this.triggerChange()},l.onerror=()=>{ya.show("Failed to read image file.")},l.src=s}},n.onerror=()=>{ya.show("Failed to read image file.")},n.readAsDataURL(e)}handleImageClick(e){if(this.draggingMarkerId!==null||!this.value||!this.imageElement)return;if(this.value.markers.length>=(this.props.maxMarkers||zr)){const c=`Maximum of ${this.props.maxMarkers||zr} markers allowed.`;this.showErrorTooltip(c,e.clientX,e.clientY);return}const r=this.imageElement.getBoundingClientRect(),{x:a,y:n}=v0(e.clientX,e.clientY,r),i=Bc(this.value.markers);let s;this.props.prizeMap&&this.props.prizeMap.length>0&&(s=this.props.prizeMap[i-1]);const o={id:Date.now(),index:i,x:a,y:n,prizeName:s},l=[...this.value.markers,o];this.setMarkers(l),this.saveState(),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange()}handleMarkerDrag(e){var o;if(this.draggingMarkerId===null||!this.imageElement||!this.value)return;const r=this.imageElement.getBoundingClientRect(),{x:a,y:n}=v0(e.clientX,e.clientY,r),i=this.value.markers.map(l=>l.id===this.draggingMarkerId?{...l,x:a,y:n}:l),s=(o=this.popoverElements)==null?void 0:o.popover.querySelector(`[data-marker-id="${this.draggingMarkerId}"]`);s&&(s.style.left=`${a}%`,s.style.top=`${n}%`),this.setMarkers(i)}stopDragging(){var e;if(this.draggingMarkerId!==null){const r=(e=this.popoverElements)==null?void 0:e.popover.querySelector(`[data-marker-id="${this.draggingMarkerId}"]`);r==null||r.classList.remove("dragging"),this.draggingMarkerId=null,this.saveState(),this.triggerChange()}}handleScroll(e){if(this.cursorTooltip&&this.lastMouseX&&this.lastMouseY&&this.imageElement){this.imageElement.getBoundingClientRect();const r=new MouseEvent("mousemove",{clientX:this.lastMouseX,clientY:this.lastMouseY});this.cursorTooltip.updatePosition(r,this.imageElement)}}trackMousePosition(e){this.lastMouseX=e.clientX,this.lastMouseY=e.clientY}handleDeleteMarker(e){if(!this.value)return;const r=this.value.markers.filter(a=>a.id!==e);this.setMarkers(r),this.saveState(),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange()}handleClearAllMarkers(){this.value&&(this.setMarkers([]),this.saveState(),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange())}updateCursorTooltipContent(){if(!this.cursorTooltip||!this.value)return;const e=this.props.maxMarkers||zr;if(this.cursorTooltip.shouldShow(this.value.markers.length,e)){const r=a3(this.value.markers,this.props.prizeMap);this.cursorTooltip.updateContent(String(r.index))}}saveState(){this.isUndoRedoOperation||!this.value||(this.historyManager.saveState(this.value.markers),this.updateUndoRedoButtons())}undo(){if(!this.value)return;const e=this.historyManager.undo();e!==null&&(this.isUndoRedoOperation=!0,this.setMarkers(e),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange(),this.isUndoRedoOperation=!1,this.updateUndoRedoButtons())}redo(){if(!this.value)return;const e=this.historyManager.redo();e!==null&&(this.isUndoRedoOperation=!0,this.setMarkers(e),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange(),this.isUndoRedoOperation=!1,this.updateUndoRedoButtons())}updateUndoRedoButtons(){if(!this.popoverElements)return;const e=this.popoverElements.popover.querySelector(".undo-btn"),r=this.popoverElements.popover.querySelector(".redo-btn");e&&(e.disabled=!this.historyManager.canUndo()),r&&(r.disabled=!this.historyManager.canRedo())}setMarkers(e){const r=e.map(a=>({...a}));this.value={...this.value||{imageUrl:"",markers:[]},markers:r}}recordImageNaturalSize(){if(!this.imageElement)return;const{naturalWidth:e,naturalHeight:r}=this.imageElement;e&&r&&(this.previousImageDimensions={width:e,height:r})}notifyPopoverState(e){window.postMessage({type:e?"IMAGE_MAP_POPUP_OPENED":"IMAGE_MAP_POPUP_CLOSED"},"*")}triggerChange(){this.value&&(this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value))}showErrorTooltip(e,r,a){if(!this.imageElement||!this.isPopoverOpen)return;const n=this.imageElement.parentElement;if(!n)return;const i=this.imageElement.getBoundingClientRect();if(!this.errorTooltipEl||!n.contains(this.errorTooltipEl)){this.errorTooltipEl=document.createElement("div"),this.errorTooltipEl.className="image-map-error-tooltip";const u=document.createElement("div");u.className="image-map-error-tooltip-content",this.errorTooltipEl.appendChild(u);const p=document.createElement("div");p.className="image-map-error-tooltip-tail",p.innerHTML=E3,this.errorTooltipEl.appendChild(p),n.appendChild(this.errorTooltipEl)}const s=this.errorTooltipEl.querySelector(".image-map-error-tooltip-content");s&&(s.textContent=e);const o=n.getBoundingClientRect(),l=r-o.left,c=a-o.top,h=Math.min(Math.max(l,i.left-o.left),i.right-o.left),f=Math.min(Math.max(c,i.top-o.top),i.bottom-o.top);this.errorTooltipEl.style.left=`${h}px`,this.errorTooltipEl.style.top=`${f}px`,this.errorTooltipEl.classList.remove("visible"),this.errorTooltipEl.offsetWidth,this.errorTooltipEl.classList.add("visible"),this.errorTooltipTimeoutId!==null&&window.clearTimeout(this.errorTooltipTimeoutId),this.errorTooltipTimeoutId=window.setTimeout(()=>{this.hideErrorTooltip()},2e3)}hideErrorTooltip(){this.errorTooltipEl&&(this.errorTooltipEl.classList.remove("visible"),this.errorTooltipTimeoutId=null)}clearErrorTooltip(){var e;this.errorTooltipTimeoutId!==null&&(window.clearTimeout(this.errorTooltipTimeoutId),this.errorTooltipTimeoutId=null),(e=this.errorTooltipEl)!=null&&e.parentElement&&this.errorTooltipEl.parentElement.removeChild(this.errorTooltipEl),this.errorTooltipEl=null}destroy(){this.closePopover(),this.clearErrorTooltip(),this.popoverElements&&(this.popoverElements.backdrop.parentElement&&this.popoverElements.backdrop.parentElement.removeChild(this.popoverElements.backdrop),this.popoverElements.popover.parentElement&&this.popoverElements.popover.parentElement.removeChild(this.popoverElements.popover)),document.removeEventListener("click",this.onBackgroundClick,!0),document.removeEventListener("keydown",this.handlePopoverKeydown,!0),w0.unregisterHandler(this.id),this.confirmModal.cleanup()}};Cr.openInstance=null;let ts=Cr;class Vc extends or{constructor(e={}){super({...e,title:e.title||"Height",suffix:e.suffix||"px",minValue:e.minValue??0,icon:e.icon||C3,default:e.default??100}),this.inputType="number",this.mobileValue=e.mobile,this.suffix=e.suffix||"px"}getValue(){const e=this.value??0;return this.suffix==="%"?e+this.suffix:e}getMobileValue(){return this.mobileValue}setMobileValue(e){this.mobileValue=e,e!==void 0&&this.setValue(e)}}const C3=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+</svg>`,Cr=class Cr extends Le{constructor(e={}){var r;super(e),this.inputType={imageUrl:"text",markers:"text"},this.mainDisplayElements=null,this.popoverElements=null,this.imageElement=null,this.cursorTooltip=null,this.popoverPosition=null,this.isPopoverOpen=!1,this.confirmModal=new n3,this.previousImageDimensions=null,this.draggingMarkerId=null,this.historyManager=new s3,this.isUndoRedoOperation=!1,this.initialValue=null,this.lastMouseX=0,this.lastMouseY=0,this.errorTooltipEl=null,this.errorTooltipTimeoutId=null,this.props.maxMarkers=this.props.maxMarkers??((r=this.props.prizeMap)==null?void 0:r.length)??zr,this.props.maxFileSizeMB=this.props.maxFileSizeMB??g0,this.props.markerSize=this.props.markerSize??Y4,this.value||(this.value={imageUrl:"",markers:[]}),w0.registerHandler(this.id,a=>{this.handleFileManagerImageSelected(a)}),this.onBackgroundClick=a=>{if(this.isPopoverOpen&&this.popoverElements&&!this.popoverElements.popover.contains(a.target)){if(a.target.closest('[class*="modal"], [class*="Modal"], [class*="dialog"], [class*="Dialog"], [class*="overlay"], [class*="Overlay"]'))return;this.closePopover()}},this.handlePopoverKeydown=a=>{if(!this.isPopoverOpen)return;if(a.key==="Escape"){this.closePopover();return}if(a.ctrlKey||a.metaKey)switch(a.code){case"KeyZ":a.preventDefault(),a.shiftKey?this.redo():this.undo();break;case"KeyY":a.preventDefault(),this.redo();break}},this.boundHandleMarkerDrag=this.handleMarkerDrag.bind(this),this.boundStopDragging=this.stopDragging.bind(this),this.boundHandleScroll=this.handleScroll.bind(this)}draw(){const e=document.createElement("div");if(e.className="image-map-setting-wrapper",this.props.title||this.props.icon){const h=document.createElement("div");if(h.className="icon-container",this.props.icon){const f=this.createIcon(this.props.icon);h.appendChild(f)}if(this.props.title){const f=this.createLabel(this.props.title);h.appendChild(f)}e.appendChild(h)}const r=document.createElement("div");r.className="image-map-sections-container";const a=document.createElement("div");a.className="image-map-section";const n=document.createElement("h4");n.className="image-map-section-title",n.textContent="Upload/Replace Map Image",a.appendChild(n),this.mainDisplayElements=d3();const i=p3(this.mainDisplayElements.thumbnailEl,()=>{this.value={imageUrl:"",markers:[]},this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange()}),s=this.props.upload||"file-manager",o=m3(s,h=>this.handleImageUpload(h),this.id);i.appendChild(o),a.appendChild(i),r.appendChild(a);const l=document.createElement("div");l.className="image-map-section";const c=document.createElement("h4");return c.className="image-map-section-title",c.textContent="Map Setup",l.appendChild(c),this.mainDisplayElements.configureButton.addEventListener("click",()=>{var h;(h=this.mainDisplayElements)!=null&&h.configureButton.disabled||this.openPopover()}),l.appendChild(this.mainDisplayElements.configureButton),r.appendChild(l),e.appendChild(r),this.createPopoverElements(),fr(this.mainDisplayElements,this.value),e}createPopoverElements(){this.popoverElements=x3(()=>void this.closePopover(),(e,r)=>{this.popoverPosition={left:e,top:r}})}openPopover(){Cr.openInstance&&Cr.openInstance!==this&&Cr.openInstance.closePopover(),this.isPopoverOpen=!0,Cr.openInstance=this,this.value?this.initialValue=JSON.parse(JSON.stringify(this.value)):this.initialValue={imageUrl:"",markers:[]},this.value&&this.historyManager.initialize(this.value.markers),this.popoverElements&&(this.popoverElements.backdrop.style.display="block",this.popoverElements.popover.style.display="flex"),this.notifyPopoverState(!0),this.positionPopoverElement(),this.refreshPopoverContentAndScrollToBottom(),setTimeout(()=>{document.addEventListener("click",this.onBackgroundClick,!0)},200),document.addEventListener("keydown",this.handlePopoverKeydown,!0)}hasAllMarkers(){if(!this.value)return!1;const e=this.props.maxMarkers||zr;return this.value.markers.length===e}hasChanges(){return!this.initialValue||!this.value?!1:JSON.stringify(this.initialValue.markers)!==JSON.stringify(this.value.markers)}async closePopover(e=!1){if(!this.isPopoverOpen&&!e)return;const r=this.isPopoverOpen;if(!e&&this.hasChanges()&&!this.hasAllMarkers()){if(!await this.confirmModal.show({title:"Discard changes?",description:"You haven't placed all markers. Closing will discard your changes."}))return;this.initialValue&&(this.value=JSON.parse(JSON.stringify(this.initialValue)),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange())}this.isPopoverOpen=!1,this.draggingMarkerId=null,this.clearErrorTooltip(),this.popoverElements&&(this.popoverElements.backdrop.style.display="none",this.popoverElements.popover.style.display="none"),document.removeEventListener("click",this.onBackgroundClick,!0),document.removeEventListener("keydown",this.handlePopoverKeydown,!0),Cr.openInstance===this&&(Cr.openInstance=null),r&&this.notifyPopoverState(!1)}positionPopoverElement(){!this.popoverElements||!this.mainDisplayElements||(this.popoverPosition=v3(this.popoverElements.popover,this.mainDisplayElements.configureButton))}refreshPopoverContent(){var o;if(!this.popoverElements)return;this.clearErrorTooltip();const e=this.popoverElements.content,r=e.querySelector(".image-map-container"),a=e.querySelector(".simple-prize-list"),n=(r==null?void 0:r.scrollTop)||0,i=(a==null?void 0:a.scrollTop)||0;if(e.innerHTML="",this.value&&this.value.imageUrl&&this.value.imageUrl!==""){const l=h3({canUndo:this.historyManager.canUndo(),canRedo:this.historyManager.canRedo(),markerCount:((o=this.value)==null?void 0:o.markers.length)||0,maxMarkers:this.props.maxMarkers||zr},{onUndo:()=>this.undo(),onRedo:()=>this.redo()});e.appendChild(l);const c=document.createElement("div");c.className="image-map-main-layout";const h=document.createElement("div");h.className="image-map-image-section",this.cursorTooltip=new i3;const{container:f,imageElement:u}=g3(this.value.imageUrl,this.value.markers,{onImageClick:w=>this.handleImageClick(w),onMarkerDrag:this.boundHandleMarkerDrag,onStopDragging:this.boundStopDragging,onImageLoad:()=>this.recordImageNaturalSize(),onDelete:w=>this.handleDeleteMarker(w),onDragStart:w=>{this.draggingMarkerId=w},onScroll:this.boundHandleScroll,onMouseMove:w=>this.trackMousePosition(w)},this.cursorTooltip);this.imageElement=u,h.appendChild(f);const p=document.createElement("div");p.className="prize-list-section";const m=c3(this.value.markers,this.props.maxMarkers||zr,this.props.prizeMap);p.appendChild(m),c.appendChild(h),c.appendChild(p),e.appendChild(c);const d=w3(this.hasAllMarkers(),()=>this.handleClearAllMarkers(),()=>{this.triggerChange(),this.closePopover(!0)});e.appendChild(d);const g=h.querySelector(".image-map-container"),x=p.querySelector(".simple-prize-list");g&&(g.scrollTop=n),x&&(x.scrollTop=i),this.updateCursorTooltipContent()}else{const l=f3({uploadMethod:this.props.upload||"file-manager",settingId:this.id,onFileSelected:c=>this.handleImageUpload(c),includeTitle:!0,variant:"popover"});e.appendChild(l)}}refreshPopoverContentAndScrollToBottom(){this.refreshPopoverContent(),requestAnimationFrame(()=>{this.scrollPrizeListToBottom()})}scrollPrizeListToBottom(){if(!this.popoverElements)return;const e=this.popoverElements.popover.querySelector(".simple-prize-list");e&&requestAnimationFrame(()=>{e.scrollTop=e.scrollHeight})}handleFileManagerImageSelected(e){const r=this.previousImageDimensions,a=new Image;a.onload=()=>{var s;const n={width:a.naturalWidth||0,height:a.naturalHeight||0},i=x0(((s=this.value)==null?void 0:s.markers)||[],r,n);this.value={imageUrl:e,markers:i},this.previousImageDimensions=n,this.historyManager.initialize(i),this.updateUndoRedoButtons(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.isPopoverOpen&&this.refreshPopoverContent(),this.triggerChange()},a.onerror=()=>{ya.show("Failed to load image from file manager.")},a.src=e}handleImageUpload(e){const r=this.previousImageDimensions,a=r3(e,this.props.maxFileSizeMB||g0);if(!a.valid){ya.show(a.error);return}const n=new FileReader;n.onload=i=>{var o;const s=(o=i.target)==null?void 0:o.result;if(typeof s=="string"){const l=new Image;l.onload=()=>{var f;const c={width:l.naturalWidth||0,height:l.naturalHeight||0},h=x0(((f=this.value)==null?void 0:f.markers)||[],r,c);this.value={imageUrl:s,markers:h},this.previousImageDimensions=c,this.historyManager.initialize(h),this.updateUndoRedoButtons(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.isPopoverOpen&&this.refreshPopoverContent(),this.triggerChange()},l.onerror=()=>{ya.show("Failed to read image file.")},l.src=s}},n.onerror=()=>{ya.show("Failed to read image file.")},n.readAsDataURL(e)}handleImageClick(e){if(this.draggingMarkerId!==null||!this.value||!this.imageElement)return;if(this.value.markers.length>=(this.props.maxMarkers||zr)){const c=`Maximum of ${this.props.maxMarkers||zr} markers allowed.`;this.showErrorTooltip(c,e.clientX,e.clientY);return}const r=this.imageElement.getBoundingClientRect(),{x:a,y:n}=v0(e.clientX,e.clientY,r),i=Bc(this.value.markers);let s;this.props.prizeMap&&this.props.prizeMap.length>0&&(s=this.props.prizeMap[i-1]);const o={id:Date.now(),index:i,x:a,y:n,prizeName:s},l=[...this.value.markers,o];this.setMarkers(l),this.saveState(),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange()}handleMarkerDrag(e){var o;if(this.draggingMarkerId===null||!this.imageElement||!this.value)return;const r=this.imageElement.getBoundingClientRect(),{x:a,y:n}=v0(e.clientX,e.clientY,r),i=this.value.markers.map(l=>l.id===this.draggingMarkerId?{...l,x:a,y:n}:l),s=(o=this.popoverElements)==null?void 0:o.popover.querySelector(`[data-marker-id="${this.draggingMarkerId}"]`);s&&(s.style.left=`${a}%`,s.style.top=`${n}%`),this.setMarkers(i)}stopDragging(){var e;if(this.draggingMarkerId!==null){const r=(e=this.popoverElements)==null?void 0:e.popover.querySelector(`[data-marker-id="${this.draggingMarkerId}"]`);r==null||r.classList.remove("dragging"),this.draggingMarkerId=null,this.saveState(),this.triggerChange()}}handleScroll(e){if(this.cursorTooltip&&this.lastMouseX&&this.lastMouseY&&this.imageElement){this.imageElement.getBoundingClientRect();const r=new MouseEvent("mousemove",{clientX:this.lastMouseX,clientY:this.lastMouseY});this.cursorTooltip.updatePosition(r,this.imageElement)}}trackMousePosition(e){this.lastMouseX=e.clientX,this.lastMouseY=e.clientY}handleDeleteMarker(e){if(!this.value)return;const r=this.value.markers.filter(a=>a.id!==e);this.setMarkers(r),this.saveState(),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange()}handleClearAllMarkers(){this.value&&(this.setMarkers([]),this.saveState(),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange())}updateCursorTooltipContent(){if(!this.cursorTooltip||!this.value)return;const e=this.props.maxMarkers||zr;if(this.cursorTooltip.shouldShow(this.value.markers.length,e)){const r=a3(this.value.markers,this.props.prizeMap);this.cursorTooltip.updateContent(String(r.index))}}saveState(){this.isUndoRedoOperation||!this.value||(this.historyManager.saveState(this.value.markers),this.updateUndoRedoButtons())}undo(){if(!this.value)return;const e=this.historyManager.undo();e!==null&&(this.isUndoRedoOperation=!0,this.setMarkers(e),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange(),this.isUndoRedoOperation=!1,this.updateUndoRedoButtons())}redo(){if(!this.value)return;const e=this.historyManager.redo();e!==null&&(this.isUndoRedoOperation=!0,this.setMarkers(e),this.refreshPopoverContent(),this.mainDisplayElements&&fr(this.mainDisplayElements,this.value),this.triggerChange(),this.isUndoRedoOperation=!1,this.updateUndoRedoButtons())}updateUndoRedoButtons(){if(!this.popoverElements)return;const e=this.popoverElements.popover.querySelector(".undo-btn"),r=this.popoverElements.popover.querySelector(".redo-btn");e&&(e.disabled=!this.historyManager.canUndo()),r&&(r.disabled=!this.historyManager.canRedo())}setMarkers(e){const r=e.map(a=>({...a}));this.value={...this.value||{imageUrl:"",markers:[]},markers:r}}recordImageNaturalSize(){if(!this.imageElement)return;const{naturalWidth:e,naturalHeight:r}=this.imageElement;e&&r&&(this.previousImageDimensions={width:e,height:r})}notifyPopoverState(e){window.postMessage({type:e?"IMAGE_MAP_POPUP_OPENED":"IMAGE_MAP_POPUP_CLOSED"},"*")}triggerChange(){this.value&&(this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value))}showErrorTooltip(e,r,a){if(!this.imageElement||!this.isPopoverOpen)return;const n=this.imageElement.parentElement;if(!n)return;const i=this.imageElement.getBoundingClientRect();if(!this.errorTooltipEl||!n.contains(this.errorTooltipEl)){this.errorTooltipEl=document.createElement("div"),this.errorTooltipEl.className="image-map-error-tooltip";const u=document.createElement("div");u.className="image-map-error-tooltip-content",this.errorTooltipEl.appendChild(u);const p=document.createElement("div");p.className="image-map-error-tooltip-tail",p.innerHTML=E3,this.errorTooltipEl.appendChild(p),n.appendChild(this.errorTooltipEl)}const s=this.errorTooltipEl.querySelector(".image-map-error-tooltip-content");s&&(s.textContent=e);const o=n.getBoundingClientRect(),l=r-o.left,c=a-o.top,h=Math.min(Math.max(l,i.left-o.left),i.right-o.left),f=Math.min(Math.max(c,i.top-o.top),i.bottom-o.top);this.errorTooltipEl.style.left=`${h}px`,this.errorTooltipEl.style.top=`${f}px`,this.errorTooltipEl.classList.remove("visible"),this.errorTooltipEl.offsetWidth,this.errorTooltipEl.classList.add("visible"),this.errorTooltipTimeoutId!==null&&window.clearTimeout(this.errorTooltipTimeoutId),this.errorTooltipTimeoutId=window.setTimeout(()=>{this.hideErrorTooltip()},2e3)}hideErrorTooltip(){this.errorTooltipEl&&(this.errorTooltipEl.classList.remove("visible"),this.errorTooltipTimeoutId=null)}clearErrorTooltip(){var e;this.errorTooltipTimeoutId!==null&&(window.clearTimeout(this.errorTooltipTimeoutId),this.errorTooltipTimeoutId=null),(e=this.errorTooltipEl)!=null&&e.parentElement&&this.errorTooltipEl.parentElement.removeChild(this.errorTooltipEl),this.errorTooltipEl=null}updatePrizeMap(e,r){this.props.prizeMap=e,r!==void 0&&(this.props.maxMarkers=r),this.isPopoverOpen&&this.refreshPopoverContent()}destroy(){this.closePopover(),this.clearErrorTooltip(),this.popoverElements&&(this.popoverElements.backdrop.parentElement&&this.popoverElements.backdrop.parentElement.removeChild(this.popoverElements.backdrop),this.popoverElements.popover.parentElement&&this.popoverElements.popover.parentElement.removeChild(this.popoverElements.popover)),document.removeEventListener("click",this.onBackgroundClick,!0),document.removeEventListener("keydown",this.handlePopoverKeydown,!0),w0.unregisterHandler(this.id),this.confirmModal.cleanup()}};Cr.openInstance=null;let ts=Cr;class Vc extends or{constructor(e={}){super({...e,title:e.title||"Height",suffix:e.suffix||"px",minValue:e.minValue??0,icon:e.icon||C3,default:e.default??100}),this.inputType="number",this.mobileValue=e.mobile,this.suffix=e.suffix||"px"}getValue(){const e=this.value??0;return this.suffix==="%"?e+this.suffix:e}getMobileValue(){return this.mobileValue}setMobileValue(e){this.mobileValue=e,e!==void 0&&this.setValue(e)}}const C3=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>`;class Hc extends or{constructor(e={}){super({...e,title:e.title||"Width",suffix:e.suffix||"px",minValue:e.minValue??0,icon:e.icon||y3,default:e.default??100}),this.inputType="number",this.mobileValue=e.mobile}getMobileValue(){return this.mobileValue}setMobileValue(e){this.mobileValue=e,e!==void 0&&this.setValue(e)}}const y3=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" strokeLinecap="round" strokeLinejoin="round"/>
@@ -625,7 +625,7 @@
   <svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="feather feather-chevron-down">
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
-`;class _3 extends Le{constructor(e={}){if(super(e),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.hasInitializedOptions=!1,this.selectedOptionIndex=null,e.default!==void 0&&(this.value=e.default),this.initializeOptions(e),!e.getOptionsAsync&&this.value!==void 0){const r=this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value));r!==-1&&(this.selectedOptionIndex=r)}e.onChange&&this.setOnChange(e.onChange),e.detectChange&&(this.detectChangeCallback=e.detectChange)}initializeOptions(e){this.hasInitializedOptions&&!e.getOptionsAsync||(this._options=[],e.options&&(this._options=[...e.options]),e.getOptions&&this._options.push(...e.getOptions()),e.getOptionsAsync?this.isLoading=!0:this.hasInitializedOptions=!0)}createOption(e,r){const a=document.createElement("li");a.classList.add("select-api-option"),a.dataset.index=String(r);const n=document.createElement("input");n.type="radio",n.classList.add("select-api-radio"),n.name="select-api-radio-group",this.selectedOptionIndex===r&&(n.checked=!0);const i=document.createElement("span");return i.classList.add("select-api-option-text"),i.textContent=e.name,a.appendChild(n),a.appendChild(i),a}draw(){const e=document.createElement("div");e.classList.add("select-api-container"),this.container=e;const r=document.createElement("div");if(r.classList.add("select-api-button"),this.getDataPropsPath()&&r.setAttribute("data-test-id",this.getDataPropsPath()),this.props.title){r.classList.add("has-label");const i=document.createElement("div");i.className="select-label",i.textContent=this.props.title,r.appendChild(i);const s=document.createElement("span");if(s.className="select-value",this.isLoading)s.textContent=this.props.loadingText||"Loading options...";else{const o=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,l=o&&typeof o.name=="string"?o.name:"Select an option";s.textContent=l}r.appendChild(s)}else{const i=document.createElement("span");if(this.isLoading)i.textContent=this.props.loadingText||"Loading options...";else{const s=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,o=s&&typeof s.name=="string"?s.name:"Select an option";i.textContent=o}r.appendChild(i)}r.onclick=()=>{var i,s;this.isLoading||(this.isOpen=!this.isOpen,(i=this.optionsListEl)==null||i.classList.toggle("open",this.isOpen),(s=this.svgContainer)==null||s.classList.toggle("open",this.isOpen))},e.appendChild(r),this.buttonEl=r;const a=document.createElement("ul");a.classList.add("select-api-options"),this._options.forEach((i,s)=>{const o=this.createOption(i,s);o.onclick=l=>this.selectApiOption(l,s,r),a.appendChild(o)}),e.appendChild(a);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=k3,e.appendChild(n),n.onclick=()=>{var i,s;this.isLoading||(this.isOpen=!this.isOpen,(i=this.optionsListEl)==null||i.classList.toggle("open",this.isOpen),(s=this.svgContainer)==null||s.classList.toggle("open",this.isOpen))},this.optionsListEl=a,this.svgContainer=n,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(i=>{const s=new Set(this._options.map(l=>JSON.stringify(l.value))),o=i.filter(l=>!s.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.hasInitializedOptions=!0,this.value!==void 0){const l=this._options.findIndex(c=>JSON.stringify(c.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(i=>{console.error("Failed to fetch async options:",i),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(i=>{const s=new Set(this._options.map(l=>JSON.stringify(l.value))),o=i.filter(l=>!s.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.value!==void 0){const l=this._options.findIndex(c=>JSON.stringify(c.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(i=>{console.error("Failed to fetch async options:",i),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})),e}getJson(e=!0){return JSON.stringify(e?{}:{value:this.value},null,2)}selectApiOption(e,r,a){var o,l,c;const n=e.target,i=n.querySelector(".select-api-radio")||((o=n.closest(".select-api-option"))==null?void 0:o.querySelector(".select-api-radio"));i&&(i.checked=!0);const s=this._options[r].value;this.setValue(s),this.isOpen=!1,(l=this.optionsListEl)==null||l.classList.remove("open"),(c=this.svgContainer)==null||c.classList.remove("open")}updateOptionsList(){!this.optionsListEl||!this.buttonEl||(this.optionsListEl.innerHTML="",this._options.forEach((e,r)=>{var n;const a=this.createOption(e,r);a.onclick=i=>{this.buttonEl&&this.selectApiOption(i,r,this.buttonEl)},(n=this.optionsListEl)==null||n.appendChild(a)}))}updateButtonText(e,r=!1){if(!this.buttonEl)return;const a=this.buttonEl.querySelector(".select-value")||this.buttonEl.firstChild;if(a)if(r)a.textContent=e||"Error",this.buttonEl.classList.add("error"),this.buttonEl.setAttribute("disabled","true"),this.optionsListEl&&this.optionsListEl.classList.remove("open"),this.svgContainer&&(this.svgContainer.style.display="none");else if(this.isLoading)a.textContent=this.props.loadingText||"Loading options...",this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="");else{const n=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,i=n&&typeof n.name=="string"?n.name:"Select an option";a.textContent=e||i,this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="")}}update(e=!1){var r;if(this.selectedOptionIndex=this.value!==void 0?this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value)):null,this.updateOptionsList(),this.updateButtonText(),e&&this.value!==void 0){(r=this.onChange)==null||r.call(this,this.value);const a=this.props.detectChange||this.detectChangeCallback;a==null||a(this.value)}}setDetectChange(e){this.detectChangeCallback=e,this.props.detectChange=e}setValue(e){super.setValue(e),this.selectedOptionIndex=this._options.findIndex(r=>JSON.stringify(r.value)===JSON.stringify(e)),this.updateButtonText(),this.updateOptionsList(),this.detectChangeCallback&&this.detectChangeCallback!==this.props.detectChange&&this.detectChangeCallback(e)}}class T3 extends Le{constructor(e){var r;super(e),this.inputType="text",e.options?this.value=e.default??((r=e.options[0])==null?void 0:r.value)??"":this.value=e.default??!1}draw(){var s;const e=document.createElement("div");e.className="toggle-setting-container",this.props.icon&&e.classList.add("toggle-with-icon");const r=document.createElement("div");if(r.className="toggle-label",this.props.icon){const o=document.createElement("span");o.className="toggle-icon",o.innerHTML=this.props.icon,r.appendChild(o)}if(this.props.title){const o=document.createElement("span");o.textContent=this.props.title,r.appendChild(o)}e.appendChild(r);const a=document.createElement("label");a.className="toggle-switch";const n=document.createElement("input");n.type="checkbox",this.props.options?n.checked=((s=this.props.options.find(o=>o.value===this.value))==null?void 0:s.status)??!1:n.checked=this.value??!1,n.addEventListener("change",()=>{var o;this.props.options?this.value=((o=this.props.options.find(l=>l.status===n.checked))==null?void 0:o.value)??"":this.value=n.checked,this.onChange&&this.onChange(this.value)});const i=document.createElement("span");if(i.className="toggle-slider",a.appendChild(n),a.appendChild(i),e.appendChild(a),this.props.description){e.classList.add("toggle-has-description");const o=document.createElement("p");o.className="toggle-description",o.textContent=this.props.description,e.appendChild(o)}return e}}const S3=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`;class _3 extends Le{constructor(e={}){if(super(e),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.hasInitializedOptions=!1,this.selectedOptionIndex=null,e.default!==void 0&&(this.value=e.default),this.initializeOptions(e),!e.getOptionsAsync&&this.value!==void 0){const r=this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value));r!==-1&&(this.selectedOptionIndex=r)}e.onChange&&this.setOnChange(e.onChange),e.detectChange&&(this.detectChangeCallback=e.detectChange)}initializeOptions(e){this.hasInitializedOptions&&!e.getOptionsAsync||(this._options=[],e.options&&(this._options=[...e.options]),e.getOptions&&this._options.push(...e.getOptions()),e.getOptionsAsync?this.isLoading=!0:this.hasInitializedOptions=!0)}createOption(e,r){const a=document.createElement("li");a.classList.add("select-api-option"),a.dataset.index=String(r);const n=document.createElement("input");n.type="radio",n.classList.add("select-api-radio"),n.name="select-api-radio-group",this.selectedOptionIndex===r&&(n.checked=!0);const i=document.createElement("span");return i.classList.add("select-api-option-text"),i.textContent=e.name,a.appendChild(n),a.appendChild(i),a}draw(){const e=document.createElement("div");e.classList.add("select-api-container"),this.container=e;const r=document.createElement("div");if(r.classList.add("select-api-button"),this.getDataPropsPath()&&r.setAttribute("data-test-id",this.getDataPropsPath()),this.props.title){r.classList.add("has-label");const i=document.createElement("div");i.className="select-label",i.textContent=this.props.title,r.appendChild(i);const s=document.createElement("span");if(s.className="select-value",this.isLoading)s.textContent=this.props.loadingText||"Loading options...";else{const o=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,l=o&&typeof o.name=="string"?o.name:"Select an option";s.textContent=l}r.appendChild(s)}else{const i=document.createElement("span");if(this.isLoading)i.textContent=this.props.loadingText||"Loading options...";else{const s=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,o=s&&typeof s.name=="string"?s.name:"Select an option";i.textContent=o}r.appendChild(i)}r.onclick=()=>{var i,s;this.isLoading||(this.isOpen=!this.isOpen,(i=this.optionsListEl)==null||i.classList.toggle("open",this.isOpen),(s=this.svgContainer)==null||s.classList.toggle("open",this.isOpen))},e.appendChild(r),this.buttonEl=r;const a=document.createElement("ul");a.classList.add("select-api-options"),this._options.forEach((i,s)=>{const o=this.createOption(i,s);o.onclick=l=>this.selectApiOption(l,s,r),a.appendChild(o)}),e.appendChild(a);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=k3,e.appendChild(n),n.onclick=()=>{var i,s;this.isLoading||(this.isOpen=!this.isOpen,(i=this.optionsListEl)==null||i.classList.toggle("open",this.isOpen),(s=this.svgContainer)==null||s.classList.toggle("open",this.isOpen))},this.optionsListEl=a,this.svgContainer=n,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(i=>{const s=new Set(this._options.map(l=>JSON.stringify(l.value))),o=i.filter(l=>!s.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.hasInitializedOptions=!0,this.value!==void 0){const l=this._options.findIndex(c=>JSON.stringify(c.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(i=>{console.error("Failed to fetch async options:",i),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(i=>{const s=new Set(this._options.map(l=>JSON.stringify(l.value))),o=i.filter(l=>!s.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.value!==void 0){const l=this._options.findIndex(c=>JSON.stringify(c.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(i=>{console.error("Failed to fetch async options:",i),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})),e}getJson(e=!0){return JSON.stringify(e?{}:{value:this.value},null,2)}selectApiOption(e,r,a){var o,l,c;const n=e.target,i=n.querySelector(".select-api-radio")||((o=n.closest(".select-api-option"))==null?void 0:o.querySelector(".select-api-radio"));i&&(i.checked=!0);const s=this._options[r].value;this.setValue(s),this.isOpen=!1,(l=this.optionsListEl)==null||l.classList.remove("open"),(c=this.svgContainer)==null||c.classList.remove("open")}updateOptionsList(){!this.optionsListEl||!this.buttonEl||(this.optionsListEl.innerHTML="",this._options.forEach((e,r)=>{var n;const a=this.createOption(e,r);a.onclick=i=>{this.buttonEl&&this.selectApiOption(i,r,this.buttonEl)},(n=this.optionsListEl)==null||n.appendChild(a)}))}updateButtonText(e,r=!1){if(!this.buttonEl)return;const a=this.buttonEl.querySelector(".select-value")||this.buttonEl.firstChild;if(a)if(r)a.textContent=e||"Error",this.buttonEl.classList.add("error"),this.buttonEl.setAttribute("disabled","true"),this.optionsListEl&&this.optionsListEl.classList.remove("open"),this.svgContainer&&(this.svgContainer.style.display="none");else if(this.isLoading)a.textContent=this.props.loadingText||"Loading options...",this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="");else{const n=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,i=n&&typeof n.name=="string"?n.name:"Select an option";a.textContent=e||i,this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="")}}update(e=!1){var r;if(this.selectedOptionIndex=this.value!==void 0?this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value)):null,this.updateOptionsList(),this.updateButtonText(),e&&this.value!==void 0){(r=this.onChange)==null||r.call(this,this.value);const a=this.props.detectChange||this.detectChangeCallback;a==null||a(this.value)}}setDetectChange(e){this.detectChangeCallback=e,this.props.detectChange=e}setValue(e){super.setValue(e),this.selectedOptionIndex=this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(e)),this.updateButtonText(),this.updateOptionsList();const r=this.props.detectChange||this.detectChangeCallback;r&&r(e)}}class T3 extends Le{constructor(e){var r;super(e),this.inputType="text",e.options?this.value=e.default??((r=e.options[0])==null?void 0:r.value)??"":this.value=e.default??!1}draw(){var s;const e=document.createElement("div");e.className="toggle-setting-container",this.props.icon&&e.classList.add("toggle-with-icon");const r=document.createElement("div");if(r.className="toggle-label",this.props.icon){const o=document.createElement("span");o.className="toggle-icon",o.innerHTML=this.props.icon,r.appendChild(o)}if(this.props.title){const o=document.createElement("span");o.textContent=this.props.title,r.appendChild(o)}e.appendChild(r);const a=document.createElement("label");a.className="toggle-switch";const n=document.createElement("input");n.type="checkbox",this.props.options?n.checked=((s=this.props.options.find(o=>o.value===this.value))==null?void 0:s.status)??!1:n.checked=this.value??!1,n.addEventListener("change",()=>{var o;this.props.options?this.value=((o=this.props.options.find(l=>l.status===n.checked))==null?void 0:o.value)??"":this.value=n.checked,this.onChange&&this.onChange(this.value)});const i=document.createElement("span");if(i.className="toggle-slider",a.appendChild(n),a.appendChild(i),e.appendChild(a),this.props.description){e.classList.add("toggle-has-description");const o=document.createElement("p");o.className="toggle-description",o.textContent=this.props.description,e.appendChild(o)}return e}}const S3=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3334 5.99996H2.66675M13.3334 9.99996H2.66675M5.33341 12.6666V3.33329M10.6667 12.6666V3.33329" stroke="#667085" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>`;class b3 extends Le{constructor(e={}){e.rowGap=e.rowGap??!0,e.columnGap=e.columnGap??!0,e.title=e.title??"Gap",e.icon=e.icon??S3,e.suffix=e.suffix??"px",e.minValue=e.minValue??0,super(e),this.inputType="number",this.inputValues={},this.mobileValue=e.mobile,this.value=this.validateValue(e.default??0),e.rowGap&&(this.inputValues.row=this.value),e.columnGap&&(this.inputValues.column=this.value)}draw(){const e=document.createElement("div");e.className=`setting-container ${this.props.className||""}`,e.id=this.id;const r=document.createElement("div");r.className="setting-label-input-wrapper";const a=document.createElement("label");a.className="setting-label",a.setAttribute("for",this.id+"-input");const n=document.createElement("span");if(n.textContent=this.props.title??"Gap",a.appendChild(n),this.props.icon){const o=document.createElement("span");o.className="setting-icon",o.innerHTML=this.props.icon,a.insertBefore(o,n)}const i=document.createElement("div");i.className=`setting-input-wrapper ${this.props.wrapperClassName||""}`,i.classList.add("gap-setting-wrapper");const s=document.createElement("div");return s.className="gap-inputs-container",this.props.rowGap&&s.appendChild(this.createGapInput("row","Row")),this.props.columnGap&&s.appendChild(this.createGapInput("column","Col")),i.appendChild(s),r.appendChild(a),r.appendChild(i),e.appendChild(r),e}createGapInput(e,r){const a=document.createElement("div");a.className="gap-input-wrapper";const n=document.createElement("input");if(n.type="number",n.className=`gap-input gap-${e}-input ${this.props.inputClassName||""}`,n.id=`${this.id}-${e}-input`,n.min=String(this.props.minValue??0),this.props.maxValue!==void 0&&(n.max=String(this.props.maxValue)),n.step=String(this.props.step??1),n.value=String(this.inputValues[e]??this.value),n.title=r,this.getDataPropsPath()&&n.setAttribute("data-test-id",`${this.getDataPropsPath()}_${e}`),n.addEventListener("input",i=>{const s=i.target;let o=parseFloat(s.value);o=this.validateValue(o),String(o)!==s.value&&(s.value=String(o)),this.inputValues[e]=o,this.setValue(o)}),n.addEventListener("blur",i=>{var l,c;const s=i.target;let o=parseFloat(s.value);o=this.validateValue(o),String(o)!==s.value&&(s.value=String(o),this.inputValues[e]=o,this.setValue(o)),(c=(l=this.props).onBlur)==null||c.call(l)}),a.appendChild(n),this.props.suffix&&this.props.suffix!=="none"){const i=document.createElement("span");i.className="gap-suffix",i.textContent=this.props.suffix,a.appendChild(i),n.style.paddingRight="30px"}return a}validateValue(e){(e==null||isNaN(e))&&(e=this.props.default??0);const r=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let n=Number(e);return n<r&&(n=r),n>a&&(n=a),n}getMobileValue(){return this.mobileValue}setMobileValue(e){this.mobileValue=e,e!==void 0&&this.setValue(e)}}const L3=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 <path d="M2.25 11.75H15.75M5.85 2.75H12.15C13.4101 2.75 14.0402 2.75 14.5215 2.99524C14.9448 3.21095 15.289 3.55516 15.5048 3.97852C15.75 4.45982 15.75 5.08988 15.75 6.35V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V6.35C2.25 5.08988 2.25 4.45982 2.49524 3.97852C2.71095 3.55516 3.05516 3.21095 3.47852 2.99524C3.95982 2.75 4.58988 2.75 5.85 2.75Z" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>

package/dist/builder-settings-types.es.js

@@ -29811,6 +29811,13 @@ const u3 = `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox
     var e;
     this.errorTooltipTimeoutId !== null && (window.clearTimeout(this.errorTooltipTimeoutId), this.errorTooltipTimeoutId = null), (e = this.errorTooltipEl) != null && e.parentElement && this.errorTooltipEl.parentElement.removeChild(this.errorTooltipEl), this.errorTooltipEl = null;
   }
+  /**
+   * Updates the prize map and optionally the max markers count.
+   * Use this when the data source (e.g., selected journey path) changes.
+   */
+  updatePrizeMap(e, r) {
+    this.props.prizeMap = e, r !== void 0 && (this.props.maxMarkers = r), this.isPopoverOpen && this.refreshPopoverContent();
+  }
   destroy() {
     this.closePopover(), this.clearErrorTooltip(), this.popoverElements && (this.popoverElements.backdrop.parentElement && this.popoverElements.backdrop.parentElement.removeChild(
       this.popoverElements.backdrop
@@ -30018,8 +30025,10 @@ class G3 extends Le {
   }
   setValue(e) {
     super.setValue(e), this.selectedOptionIndex = this._options.findIndex(
-      (r) => JSON.stringify(r.value) === JSON.stringify(e)
-    ), this.updateButtonText(), this.updateOptionsList(), this.detectChangeCallback && this.detectChangeCallback !== this.props.detectChange && this.detectChangeCallback(e);
+      (a) => JSON.stringify(a.value) === JSON.stringify(e)
+    ), this.updateButtonText(), this.updateOptionsList();
+    const r = this.props.detectChange || this.detectChangeCallback;
+    r && r(e);
   }
 }
 class z3 extends Le {

package/dist/settings/image-map-settings/ImageMapSetting.d.ts

@@ -59,5 +59,10 @@ export declare class ImageMapSetting extends Setting<ImageMapValue, ImageMapSett
     private showErrorTooltip;
     private hideErrorTooltip;
     private clearErrorTooltip;
+    /**
+     * Updates the prize map and optionally the max markers count.
+     * Use this when the data source (e.g., selected journey path) changes.
+     */
+    updatePrizeMap(prizeMap: string[] | undefined, maxMarkers?: number): void;
     destroy(): void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "builder-settings-types",
   "description": "builder settings",
-  "version": "0.0.444",
+  "version": "0.0.445",
   "type": "module",
   "main": "dist/builder-settings-types.cjs.js",
   "module": "dist/builder-settings-types.es.js",