import{S as P,i as $,s as W,o as y,b as S,c as o,d as _,e as k,n as D,f as w,C,g as f,z as x,m as c,t as u,h as g,j as h}from"./index-85f88930.js";import{g as T,a as V}from"./spread-8a54911c.js";import{p as L,M as A,T as H,S as O}from"./collect-stories-fa95313f.js";import{w as q}from"./withParams-47e2ab71.js";const z=`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.

\`\`\`svelte
<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 E(a){let e,n,r;return{c(){e=y("div"),n=y("div"),r=y("div"),r.innerHTML='<div class="spinner absolute svelte-18gm7af"></div>',S(r,"class","spinner-container relative svelte-18gm7af"),o(n,"--spinner-colour",a[0]),o(n,"--spinner-ring-width",a[2]+"px"),o(n,"--spinner-ring-offset","-"+a[2]+"px"),o(n,"--spinner-speed",a[3]+"s"),o(n,"width",a[1]+"px"),o(n,"height",a[1]+"px"),o(n,"margin","0 auto"),S(e,"class","component-container flex items-center justify-center"),o(e,"width","100%"),o(e,"height",`${a[1]+a[4]*2}px`)},m(i,t){_(i,e,t),k(e,n),k(n,r)},p(i,[t]){t&1&&o(n,"--spinner-colour",i[0]),t&4&&o(n,"--spinner-ring-width",i[2]+"px"),t&4&&o(n,"--spinner-ring-offset","-"+i[2]+"px"),t&8&&o(n,"--spinner-speed",i[3]+"s"),t&2&&o(n,"width",i[1]+"px"),t&2&&o(n,"height",i[1]+"px"),t&18&&o(e,"height",`${i[1]+i[4]*2}px`)},i:D,o:D,d(i){i&&w(e)}}}function I(a,e,n){let{colour:r="#666"}=e,{width:i=40}=e,{ringWidth:t=6}=e,{speed:p=.8}=e,{containerPadding:d=10}=e;return a.$$set=l=>{"colour"in l&&n(0,r=l.colour),"width"in l&&n(1,i=l.width),"ringWidth"in l&&n(2,t=l.ringWidth),"speed"in l&&n(3,p=l.speed),"containerPadding"in l&&n(4,d=l.containerPadding)},[r,i,t,p,d]}class b extends P{constructor(e){super(),$(this,e,I,E,W,{colour:0,width:1,ringWidth:2,speed:3,containerPadding:4})}}b.__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,n;const r=[a[1]];let i={};for(let t=0;t<r.length;t+=1)i=C(i,r[t]);return e=new b({props:i}),{c(){f(e.$$.fragment)},m(t,p){c(e,t,p),n=!0},p(t,p){const d=p&2?T(r,[V(t[1])]):{};e.$set(d)},i(t){n||(u(e.$$.fragment,t),n=!0)},o(t){g(e.$$.fragment,t),n=!1},d(t){h(e,t)}}}function B(a){let e,n,r,i,t,p;const d=[{title:"Components/Spinner"},{component:b},a[0]];let l={};for(let s=0;s<d.length;s+=1)l=C(l,d[s]);return e=new A({props:l}),r=new H({props:{$$slots:{default:[U,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:a}}}),t=new O({props:{name:"Default"}}),{c(){f(e.$$.fragment),n=x(),f(r.$$.fragment),i=x(),f(t.$$.fragment)},m(s,m){c(e,s,m),_(s,n,m),c(r,s,m),_(s,i,m),c(t,s,m),p=!0},p(s,[m]){const j=m&1?T(d,[d[0],d[1],V(s[0])]):{};e.$set(j);const v={};m&6&&(v.$$scope={dirty:m,ctx:s}),r.$set(v)},i(s){p||(u(e.$$.fragment,s),u(r.$$.fragment,s),u(t.$$.fragment,s),p=!0)},o(s){g(e.$$.fragment,s),g(r.$$.fragment,s),g(t.$$.fragment,s),p=!1},d(s){s&&(w(n),w(i)),h(e,s),h(r,s),h(t,s)}}}function F(a){return[{...q(z),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":{name:"default",template:!0,source:"<Spinner {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","Spinner","withComponentDocs"]}),R=M.meta,X=["Default"],Y=M.stories.Default;export{Y as Default,X as __namedExportsOrder,R as default};
//# sourceMappingURL=Spinner.stories-74252dfc.js.map