import{p as d,c as Te,m as u,a as f,n as We,f as p}from"./props-b4vEeO_8.js";import{a4 as C,ae as je,C as q,G as ye,B as ue,ah as w,k as t,N as h,a3 as k,I,F as x,J as L,D as Le}from"./runtime-C3rQLW--.js";import{i as Ve}from"./lifecycle-F2p_Qkk3.js";import{c as qe,d as Je}from"./create-runtime-stories-7AWWVphH.js";import{s as Y}from"./snippet-C5kbqVpq.js";import{i as V}from"./svelte-component-C8Ginrj8.js";import{s as l}from"./attributes-Cg6aLqN3.js";import{s as _}from"./style-DvJ3IcV1.js";import{b as oe}from"./size-DMdj3-I9.js";import{b as se}from"./this-CrUBQEQ_.js";import{B as ze}from"./Block-D3Ui8rd-.js";import{P as Xe}from"./PaddingReset-_TGvg1_B.js";import{r as le}from"./index-CX1x869l.js";import{t as Fe}from"./throttle-CHB1Npaq.js";var He=p('<div class="overlay-container before absolute svelte-1stam79"><!></div>'),Ee=p('<div class="overlay-container after absolute svelte-1stam79"><!></div>'),Ne=p('<aside class="before-after-caption mx-auto svelte-1stam79"><!></aside>'),Ue=p('<div><button class="before-after-container relative overflow-hidden my-0 mx-auto svelte-1stam79"><img class="after absolute block m-0 max-w-full object-cover svelte-1stam79"/> <img class="before absolute block m-0 max-w-full object-cover svelte-1stam79"/> <!> <!> <div tabindex="0" role="slider" class="handle svelte-1stam79"><div class="arrow-left svelte-1stam79"></div> <div class="arrow-right svelte-1stam79"></div></div></button></div> <!>',1);function Q(J,e){ue(e,!0);let S=d(e,"width",3,"normal"),D=d(e,"height",3,600),z=d(e,"class",3,""),A=d(e,"handleColour",3,"white"),Z=d(e,"handleInactiveOpacity",3,.9),m=d(e,"handleMargin",3,20),P=d(e,"keyPressStep",3,.05),c=d(e,"offset",7,.5),v=d(e,"id",19,()=>"before-after-"+le()+le()),$=d(e,"ariaLabel",3,"Stacked before and after images with an adjustable slider"),r=C(void 0),n=C(je(new DOMRect)),X=!1,T=C(void 0),F=C(0),H=!1,E=C(0),N=h(()=>t(E)&&e.heightRatio?t(E)*e.heightRatio:D()),O=h(()=>t(n).width),U=h(()=>t(O)*c()),be=h(()=>`width:100%;height:${t(N)}px;`);const he="width:100%;height:100%;";let ge=h(()=>t(U)<t(F)?Math.abs(t(U)-t(F)):0);const we=()=>H=!0,ke=()=>H=!1,_e=i=>{if(!H)return;const{code:y,key:B}=i,o=m()/t(O);y==="ArrowRight"||B==="ArrowRight"?c(Math.min(1-o,c()+P())):(y==="ArrowLeft"||B==="ArrowLeft")&&c(Math.max(0+o,c()-P()))},xe=()=>{t(r)&&t(r).complete&&k(n,t(r).getBoundingClientRect(),!0)},Se=()=>{xe()},Ae=i=>{i.type==="load"&&k(n,i.target.getBoundingClientRect(),!0)},G=i=>{if(X&&t(n)){const y=i instanceof TouchEvent&&i.touches?i.touches[0]:i,B=t(T)?parseInt(window.getComputedStyle(t(T)).marginLeft.slice(0,-2)):0;let o=y.pageX-B-t(n).left;o=o<m()?m():o>t(O)-m()?t(O)-m():o,c(o/t(O))}},ee=i=>{X=!0,G(i)},te=()=>{X=!1};e.beforeSrc&&e.beforeAlt&&e.afterSrc&&e.afterAlt||console.warn("Missing required src or alt props for BeforeAfter component");var ae=Te();u("touchmove",w,G,void 0,!0),u("touchend",w,te),u("mousemove",w,G),u("mouseup",w,te);var Oe=h(()=>Fe(Se,100));u("resize",w,function(...i){var y;(y=t(Oe))==null||y.apply(this,i)}),u("keydown",w,_e);var Be=q(ae);{var Me=i=>{ze(i,{get width(){return S()},get id(){return v()},get class(){return`photo before-after fmy-6 ${z()??""}`},children:(y,B)=>{var o=Ue(),W=q(o),g=I(W);g.__touchstart=ee,g.__mousedown=ee;var b=I(g);_(b,he),se(b,a=>k(r,a),()=>t(r));var M=x(b,2),ie=x(M,2);{var Re=a=>{var s=He(),R=I(s);Y(R,()=>e.beforeOverlay),L(()=>{l(s,"id",`${v()??""}-before-description`),_(s,`clip-path: inset(0 ${t(ge)??""}px 0 0);`)}),oe(s,"clientWidth",ne=>k(F,ne)),f(a,s)};V(ie,a=>{e.beforeOverlay&&a(Re)})}var re=x(ie,2);{var Ce=a=>{var s=Ee(),R=I(s);Y(R,()=>e.afterOverlay),L(()=>l(s,"id",`${v()??""}-after-description`)),f(a,s)};V(re,a=>{e.afterOverlay&&a(Ce)})}var j=x(re,2);se(g,a=>k(T,a),()=>t(T));var Ie=x(W,2);{var De=a=>{{let s=h(()=>S()==="fluid");Xe(a,{get containerIsFluid(){return t(s)},children:(R,ne)=>{var K=Ne(),Pe=I(K);Y(Pe,()=>e.caption),L(()=>l(K,"id",`${v()}-caption`)),f(R,K)},$$slots:{default:!0}})}};V(Ie,a=>{e.caption&&a(De)})}L(a=>{_(W,`height: ${t(N)??""}px;`),_(g,t(be)),l(g,"aria-label",$()),l(b,"src",e.afterSrc),l(b,"alt",e.afterAlt),l(b,"aria-describedby",e.beforeOverlay?`${v()}-before-description`:void 0),l(M,"src",e.beforeSrc),l(M,"alt",e.beforeAlt),_(M,`clip: rect(0 ${t(U)??""}px ${t(N)??""}px 0);width:100%;height:100%;`),l(M,"aria-describedby",e.afterOverlay?`${v()}-after-description`:void 0),l(j,"aria-valuenow",a),_(j,`left: calc(${c()*100}% - 20px); --before-after-handle-colour: ${A()??""}; --before-after-handle-inactive-opacity: ${Z()??""};`)},[()=>Math.round(c()*100)]),u("load",b,Ae),u("focus",j,we),u("blur",j,ke),oe(W,"clientWidth",a=>k(E,a)),f(y,o)},$$slots:{default:!0}})};V(Be,i=>{e.beforeSrc&&e.beforeAlt&&e.afterSrc&&e.afterAlt&&i(Me)})}f(J,ae),ye()}We(["touchstart","mousedown"]);Q.__docgen={data:[{name:"width",visibility:"public",description:"Width of the chart within the text well. Options: wide, wider, widest, fluid",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"narrower",text:'"narrower"'},{kind:"const",type:"string",value:"narrow",text:'"narrow"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"narrower" | "narrow" | "normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1,defaultValue:'"normal"'},{name:"height",visibility:"public",description:"Height of the component",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"600"},{name:"heightRatio",visibility:"public",description:"If set, makes the height a ratio of the component's width.",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1},{name:"beforeSrc",visibility:"public",description:"Before image source",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"beforeAlt",visibility:"public",description:"Before image altText",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"afterSrc",visibility:"public",description:"After image source",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"afterAlt",visibility:"public",description:"After image altText",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"class",visibility:"public",description:"Class to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"handleColour",visibility:"public",description:"Drag handle colour",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"white"'},{name:"handleInactiveOpacity",visibility:"public",description:"Drag handle opacity",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0.9"},{name:"handleMargin",visibility:"public",description:"Margin at the edge of the image to stop dragging",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"20"},{name:"keyPressStep",visibility:"public",description:"Percentage of the component width the handle will travel ona key press",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0.05"},{name:"offset",visibility:"public",description:"Initial offset of the handle, between 0 and 1.",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0.5"},{name:"id",visibility:"public",description:"ID to target with SCSS.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:"..."},{name:"beforeOverlay",visibility:"public",description:"Optional snippet for a custom overlay for the before image.",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"afterOverlay",visibility:"public",description:"Optional snippet for a custom overlay for the after image.",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"caption",visibility:"public",description:"Optional snippet for a custom caption.",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"ariaLabel",visibility:"public",description:"Custom ARIA label language to label the component.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"Stacked before and after images with an adjustable slider"'}],name:"BeforeAfter.svelte"};const de=""+new URL("myrne-before-BoXh17ax.jpg",import.meta.url).href,fe=""+new URL("myrne-after-DBHdY7qj.jpg",import.meta.url).href,pe={title:"Components/Multimedia/BeforeAfter",component:Q,argTypes:{handleColour:{control:"color"},width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}},{Story:ce}=Je();var Ge=p('<div class="overlay p-3 before"><p class="h4 font-bold">July 7, 2020</p> <p class="body-note">Initially, this site was far smaller.</p></div>'),Ke=p('<div class="overlay p-3 after"><p class="h4 font-bold">Oct. 20, 2020</p> <p class="body-note">But then forces built up.</p></div>'),Ye=p('<p class="body-note">Photos by MAXAR Technologies, 2021.</p>'),Qe=p(`<!> <style lang="scss">.overlay {
  background: rgba(0, 0, 0, 0.45);
  max-width: 350px;
}
.overlay p {
  color: #ffffff;
}</style>`,1),Ze=p("<!> <!>",1);function me(J,e){ue(e,!1),Ve();var S=Ze(),D=q(S);{let A=Le(()=>({beforeSrc:de,beforeAlt:"Satellite image of Russian base at Myrne taken on July 7, 2020.",afterSrc:fe,afterAlt:"Satellite image of Russian base at Myrne taken on Oct. 20, 2020."}));ce(D,{name:"Demo",get args(){return t(A)},parameters:{__svelteCsf:{rawCode:"<BeforeAfter {...args} />"}}})}var z=x(D,2);ce(z,{name:"With text",exportName:"WithText",children:(A,Z)=>{var m=Qe(),P=q(m);Q(P,{get beforeSrc(){return de},beforeAlt:"Satellite image of Russian base at Myrne taken on July 7, 2020.",get afterSrc(){return fe},afterAlt:"Satellite image of Russian base at Myrne taken on Oct. 20, 2020.",beforeOverlay:r=>{var n=Ge();f(r,n)},afterOverlay:r=>{var n=Ke();f(r,n)},caption:r=>{var n=Ye();f(r,n)},$$slots:{beforeOverlay:!0,afterOverlay:!0,caption:!0}}),f(A,m)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<BeforeAfter
  beforeSrc={beforeImg}
  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
  afterSrc={afterImg}
  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
>
  {#snippet beforeOverlay()}
    <div class="overlay p-3 before">
      <p class="h4 font-bold">July 7, 2020</p>
      <p class="body-note">Initially, this site was far smaller.</p>
    </div>
  {/snippet}
  {#snippet afterOverlay()}
    <div class="overlay p-3 after">
      <p class="h4 font-bold">Oct. 20, 2020</p>
      <p class="body-note">But then forces built up.</p>
    </div>
  {/snippet}
  {#snippet caption()}
    <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
  {/snippet}
</BeforeAfter>

<style lang="scss">.overlay {
background: rgba(0, 0, 0, 0.45);
max-width: 350px;
}
.overlay p {
color: #ffffff;
}</style>`}}}),f(J,S),ye()}me.__docgen={version:3,name:"BeforeAfter.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const ve=qe(me,pe),$e=["Demo","WithText"],et=ve.Demo,tt=ve.WithText,vt=Object.freeze(Object.defineProperty({__proto__:null,Demo:et,WithText:tt,__namedExportsOrder:$e,default:pe},Symbol.toStringTag,{value:"Module"}));export{vt as B,et as D,tt as W};