import{S as P,i as $,s as W,w as _,x as k,C as o,a as w,z as S,E as D,d as b,p as C,j as f,D as x,m as c,k as T,l as V,b as u,t as g,n as h}from"./index-25af778d.js";import{p as L,M as j,T as A,S as E}from"./collect-stories-cce06d4a.js";import{w as H}from"./withParams-90715500.js";const O=`Simple loading spinner. Use it to help hide long loading times for components that may be loading expensive media files or crunching through lots of data.

\`\`\`html
<script>
  import { Spinner } from '@reuters-graphics/graphics-components';

  let somethingsLoading = true;
<\/script>

{#if somethingsLoading}
<Spinner />
{:else}
<p>The real deal is here.</p>
{/if}
\`\`\`
`;function q(a){let e,t,r;return{c(){e=_("div"),t=_("div"),r=_("div"),r.innerHTML='<div class="spinner svelte-m566dy"></div>',k(r,"class","spinner-container svelte-m566dy"),o(t,"--spinner-colour",a[0]),o(t,"--spinner-ring-width",a[2]+"px"),o(t,"--spinner-ring-offset","-"+a[2]+"px"),o(t,"--spinner-speed",a[3]+"s"),o(t,"width",a[1]+"px"),o(t,"height",a[1]+"px"),o(t,"margin","0 auto"),k(e,"class","component-container svelte-m566dy"),o(e,"width","100%"),o(e,"height",`${a[1]+a[4]*2}px`)},m(i,n){w(i,e,n),S(e,t),S(t,r)},p(i,[n]){n&1&&o(t,"--spinner-colour",i[0]),n&4&&o(t,"--spinner-ring-width",i[2]+"px"),n&4&&o(t,"--spinner-ring-offset","-"+i[2]+"px"),n&8&&o(t,"--spinner-speed",i[3]+"s"),n&2&&o(t,"width",i[1]+"px"),n&2&&o(t,"height",i[1]+"px"),n&18&&o(e,"height",`${i[1]+i[4]*2}px`)},i:D,o:D,d(i){i&&b(e)}}}function z(a,e,t){let{colour:r="#666"}=e,{width:i=40}=e,{ringWidth:n=6}=e,{speed:l=.8}=e,{containerPadding:m=10}=e;return a.$$set=p=>{"colour"in p&&t(0,r=p.colour),"width"in p&&t(1,i=p.width),"ringWidth"in p&&t(2,n=p.ringWidth),"speed"in p&&t(3,l=p.speed),"containerPadding"in p&&t(4,m=p.containerPadding)},[r,i,n,l,m]}class y extends P{constructor(e){super(),$(this,e,z,q,W,{colour:0,width:1,ringWidth:2,speed:3,containerPadding:4})}}y.__docgen={version:3,name:"Spinner.svelte",data:[{keywords:[],visibility:"public",description:"Primary colour of the spinner.",name:"colour",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"#666"},{keywords:[],visibility:"public",description:"Outer width of the spinner",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:40},{keywords:[],visibility:"public",description:"Width of the spinner ring",name:"ringWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:6},{keywords:[],visibility:"public",description:"How fast the spinner spins in seconds",name:"speed",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:.8},{keywords:[],visibility:"public",description:"Vertical padding for the spinner's container",name:"containerPadding",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:10}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function U(a){let e,t;const r=[a[1]];let i={};for(let n=0;n<r.length;n+=1)i=C(i,r[n]);return e=new y({props:i}),{c(){f(e.$$.fragment)},m(n,l){c(e,n,l),t=!0},p(n,l){const m=l&2?T(r,[V(n[1])]):{};e.$set(m)},i(n){t||(u(e.$$.fragment,n),t=!0)},o(n){g(e.$$.fragment,n),t=!1},d(n){h(e,n)}}}function B(a){let e,t,r,i,n,l;const m=[{title:"Components/Spinner"},{component:y},a[0]];let p={};for(let s=0;s<m.length;s+=1)p=C(p,m[s]);return e=new j({props:p}),r=new A({props:{$$slots:{default:[U,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:a}}}),n=new E({props:{name:"Default"}}),{c(){f(e.$$.fragment),t=x(),f(r.$$.fragment),i=x(),f(n.$$.fragment)},m(s,d){c(e,s,d),w(s,t,d),c(r,s,d),w(s,i,d),c(n,s,d),l=!0},p(s,[d]){const I=d&1?T(m,[m[0],d&0&&{component:y},d&1&&V(s[0])]):{};e.$set(I);const v={};d&6&&(v.$$scope={dirty:d,ctx:s}),r.$set(v)},i(s){l||(u(e.$$.fragment,s),u(r.$$.fragment,s),u(n.$$.fragment,s),l=!0)},o(s){g(e.$$.fragment,s),g(r.$$.fragment,s),g(n.$$.fragment,s),l=!1},d(s){h(e,s),s&&b(t),h(r,s),s&&b(i),h(n,s)}}}function F(a){return[{...H(O),argTypes:{colour:{control:"color"},ringWidth:{control:{type:"range",min:2,max:20,step:1}},width:{control:{type:"range",min:5,max:100,step:5}},speed:{control:{type:"range",min:.2,max:1,step:.1}},containerPadding:{control:{type:"range",min:5,max:100,step:5}}}}]}class G extends P{constructor(e){super(),$(this,e,F,B,W,{})}}const M=L(G,{meta:{title:"Components/Spinner"},stories:{"tpl:default":{storyId:"components-spinner--default",name:"default",template:!0,source:"<Spinner {...args} />",hasArgs:!0},Default:{storyId:"components-spinner--default",name:"Default",template:!1,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","Spinner","withComponentDocs"]}),Q=M.meta,R=["Default"],X=M.stories.Default;export{X as Default,R as __namedExportsOrder,Q as default};
//# sourceMappingURL=Spinner.stories-476d6504.js.map