import{bx as h,r as u,eA as w,w as A,E as l,c as t,d as a,q as f,e as k,G as m,u as z}from"./vendor-other-CSX7WseZ.js";const j={key:0},I=["src","alt"],x=["src","alt"],B={key:1,class:"flex size-full items-center justify-center"},E=h({__name:"WidgetImageCompare",props:{widget:{}},setup(d){const s=d,c=u(null),o=u(50),{elementX:v,elementWidth:g,isOutside:p}=w(c);A([v,g,p],([e,i,_])=>{!_&&i>0&&(o.value=Math.max(0,Math.min(100,e/i*100)))});const n=l(()=>{const e=s.widget.value;return typeof e=="string"?e:e?.before||""}),r=l(()=>{const e=s.widget.value;return typeof e=="string"?"":e?.after||""}),b=l(()=>{const e=s.widget.value;return typeof e=="object"&&e?.beforeAlt?e.beforeAlt:"Before image"}),y=l(()=>{const e=s.widget.value;return typeof e=="object"&&e?.afterAlt?e.afterAlt:"After image"});return(e,i)=>(a(),t("div",{ref_key:"containerRef",ref:c,class:"relative size-full min-h-32 overflow-hidden"},[n.value||r.value?(a(),t("div",j,[r.value?(a(),t("img",{key:0,src:r.value,alt:y.value,draggable:"false",class:"size-full object-contain"},null,8,I)):f("",!0),n.value?(a(),t("img",{key:1,src:n.value,alt:b.value,draggable:"false",class:"absolute inset-0 size-full object-contain",style:m({clipPath:`inset(0 ${100-o.value}% 0 0)`})},null,12,x)):f("",!0),k("div",{class:"pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white shadow-md",style:m({left:`${o.value}%`}),role:"presentation"},null,4)])):(a(),t("div",B,z(e.$t("imageCompare.noImages")),1))],512))}});export{E as default};
//# sourceMappingURL=WidgetImageCompare-S295Axen.js.map
