import{S as F,i as X,s as Y,g as y,m as _,t as h,h as w,j as k,x as ee,D as te,X as ie,y as A,l as V,r as ae,b as g,F as I,c as G,d as D,e as re,v as E,w as M,f as C,E as ne,k as z,u as H,o as J,p as K,C as N,n as se}from"./index-99a30af8.js";import{g as Q,a as Z}from"./spread-8a54911c.js";import{p as oe,M as le,T as ce,S as B}from"./collect-stories-1e0d20c7.js";import{G as pe}from"./GraphicBlock-caaf4041.js";import{b as fe,w as de}from"./withParams-47e2ab71.js";import"./Block-a09d61d3.js";import"./PaddingReset-79b11107.js";import"./Markdown-2a6fc77f.js";const me=`Easily add a responsive Datawrapper embed on your page.

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

<DatawrapperChart
  title="Global abortion access"
  ariaLabel="map"
  id="abortion-rights-map"
  src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html"
/>
\`\`\`

##### Getting the chart URL for \`src\`

Copy the source url for the Datawrapper chart in the \`src\` prop.
You can get this from the published url on Reuters Graphics.

- Publish the chart on Datawrapper.
- Go to the **Datawrapper charts** Teams channel, wait for the graphic to finish publishing.
- Inside **Embed code (for developers only)**, find and copy the url inside the \`src\` prop. (It ends in \`media-embed.html\`.)

**Note:** There is no need to update the url if you update the chart inside Datawrapper. Any changes will be automatically reflected.
`,ue=`By default, Datawrapper will export your chart with the chart chatter like title, description and notes.

At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.

Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.
`,he=n=>({}),U=n=>({}),ge=n=>({}),q=n=>({});function P(n){let t;const a=n[12].title,e=z(a,n,n[14],q);return{c(){e&&e.c()},m(i,r){e&&e.m(i,r),t=!0},p(i,r){e&&e.p&&(!t||r&16384)&&H(e,a,i,i[14],t?K(a,i[14],r,ge):J(i[14]),q)},i(i){t||(h(e,i),t=!0)},o(i){w(e,i),t=!1},d(i){e&&e.d(i)}}}function j(n){let t;const a=n[12].notes,e=z(a,n,n[14],U);return{c(){e&&e.c()},m(i,r){e&&e.m(i,r),t=!0},p(i,r){e&&e.p&&(!t||r&16384)&&H(e,a,i,i[14],t?K(a,i[14],r,he):J(i[14]),U)},i(i){t||(h(e,i),t=!0)},o(i){w(e,i),t=!1},d(i){e&&e.d(i)}}}function we(n){let t,a,e,i,r,u,f,p=n[11].title&&P(n),c=n[11].notes&&j(n);return{c(){p&&p.c(),t=A(),a=V("div"),e=V("iframe"),r=A(),c&&c.c(),u=ae(),g(e,"title",n[2]),g(e,"aria-label",n[4]),g(e,"id",n[5]),I(e.src,i=n[6])||g(e,"src",i),g(e,"scrolling",n[7]),g(e,"frameborder","0"),g(e,"data-chromatic","ignore"),G(e,"width","0"),G(e,"min-width","100%",1),G(e,"border","none"),g(a,"class","datawrapper-chart")},m(o,d){p&&p.m(o,d),D(o,t,d),D(o,a,d),re(a,e),n[13](e),D(o,r,d),c&&c.m(o,d),D(o,u,d),f=!0},p(o,d){o[11].title?p?(p.p(o,d),d&2048&&h(p,1)):(p=P(o),p.c(),h(p,1),p.m(t.parentNode,t)):p&&(E(),w(p,1,1,()=>{p=null}),M()),(!f||d&4)&&g(e,"title",o[2]),(!f||d&16)&&g(e,"aria-label",o[4]),(!f||d&32)&&g(e,"id",o[5]),(!f||d&64&&!I(e.src,i=o[6]))&&g(e,"src",i),(!f||d&128)&&g(e,"scrolling",o[7]),o[11].notes?c?(c.p(o,d),d&2048&&h(c,1)):(c=j(o),c.c(),h(c,1),c.m(u.parentNode,u)):c&&(E(),w(c,1,1,()=>{c=null}),M())},i(o){f||(h(p),h(c),f=!0)},o(o){w(p),w(c),f=!1},d(o){o&&(C(t),C(a),C(r),C(u)),p&&p.d(o),n[13](null),c&&c.d(o)}}}function be(n){let t,a;return t=new pe({props:{width:n[8],textWidth:n[9],title:n[0],description:n[1],notes:n[3],$$slots:{default:[we]},$$scope:{ctx:n}}}),{c(){y(t.$$.fragment)},m(e,i){_(t,e,i),a=!0},p(e,[i]){const r={};i&256&&(r.width=e[8]),i&512&&(r.textWidth=e[9]),i&1&&(r.title=e[0]),i&2&&(r.description=e[1]),i&8&&(r.notes=e[3]),i&19700&&(r.$$scope={dirty:i,ctx:e}),t.$set(r)},i(e){a||(h(t.$$.fragment,e),a=!0)},o(e){w(t.$$.fragment,e),a=!1},d(e){k(t,e)}}}function ye(n,t,a){let e,{$$slots:i={},$$scope:r}=t;const u=ee(i);let{title:f=null}=t,{description:p=null}=t,{frameTitle:c=""}=t,{notes:o=null}=t,{ariaLabel:d=""}=t,{id:v=""}=t,{src:s}=t,{scrolling:m="no"}=t,{width:W="normal"}=t,{textWidth:T="normal"}=t,b;te(()=>{typeof window<"u"&&window.addEventListener("message",e)}),ie(()=>{typeof window<"u"&&window.removeEventListener("message",e)});function $(l){ne[l?"unshift":"push"](()=>{b=l,a(10,b)})}return n.$$set=l=>{"title"in l&&a(0,f=l.title),"description"in l&&a(1,p=l.description),"frameTitle"in l&&a(2,c=l.frameTitle),"notes"in l&&a(3,o=l.notes),"ariaLabel"in l&&a(4,d=l.ariaLabel),"id"in l&&a(5,v=l.id),"src"in l&&a(6,s=l.src),"scrolling"in l&&a(7,m=l.scrolling),"width"in l&&a(8,W=l.width),"textWidth"in l&&a(9,T=l.textWidth),"$$scope"in l&&a(14,r=l.$$scope)},n.$$.update=()=>{n.$$.dirty&1024&&(e=l=>{if(l.data["datawrapper-height"]!==void 0){const R=[b];for(const x in l.data["datawrapper-height"])for(let S=0;S<R.length;S++)R[S].contentWindow===l.source&&(R[S].style.height=l.data["datawrapper-height"][x]+"px")}})},[f,p,c,o,d,v,s,m,W,T,b,u,i,$,r]}class L extends F{constructor(t){super(),X(this,t,ye,be,Y,{title:0,description:1,frameTitle:2,notes:3,ariaLabel:4,id:5,src:6,scrolling:7,width:8,textWidth:9})}}L.__docgen={version:3,name:"DatawrapperChart.svelte",data:[{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Title of the graphic",name:"title",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Description of the graphic, passed in as a markdown string.",name:"description",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"required",description:""}],visibility:"public",description:"iframe title",name:"frameTitle",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Notes to the graphic, passed in as a markdown string.",name:"notes",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"required",description:""}],visibility:"public",description:"iframe aria label",name:"ariaLabel",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[],visibility:"public",description:"iframe id",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"required",description:""}],visibility:"public",description:"Datawrapper embed URL",name:"src",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{keywords:[],visibility:"public",description:"iframe scrolling option",name:"scrolling",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"no"},{keywords:[],visibility:"public",description:"Width of the chart within the text well.",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:`Set a different width for the text within the text well, for example,
"normal" to keep the title, description and notes inline with the rest
of the text well. Can't ever be wider than \`width\`.`,name:"textWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Custom headline and chatter slot",name:"title"},{keywords:[],visibility:"public",description:"Custom notes and source slot",name:"notes"}],refs:[]};function _e(n){let t,a;const e=[n[1]];let i={};for(let r=0;r<e.length;r+=1)i=N(i,e[r]);return t=new L({props:i}),{c(){y(t.$$.fragment)},m(r,u){_(t,r,u),a=!0},p(r,u){const f=u&2?Q(e,[Z(r[1])]):{};t.$set(f)},i(r){a||(h(t.$$.fragment,r),a=!0)},o(r){w(t.$$.fragment,r),a=!1},d(r){k(t,r)}}}function ke(n){let t,a;return t=new L({props:{frameTitle:"Global abortion access",ariaLabel:"map",id:"abortion-rights-map",src:"https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html",title:"Global abortion access",description:"A map of worldwide access to abortion.",notes:`Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.

Source: Center for Reproductive Rights`}}),{c(){y(t.$$.fragment)},m(e,i){_(t,e,i),a=!0},p:se,i(e){a||(h(t.$$.fragment,e),a=!0)},o(e){w(t.$$.fragment,e),a=!1},d(e){k(t,e)}}}function De(n){let t,a,e,i,r,u,f,p;const c=[{title:"Components/DatawrapperChart"},{component:L},n[0]];let o={};for(let s=0;s<c.length;s+=1)o=N(o,c[s]);t=new le({props:o}),e=new ce({props:{$$slots:{default:[_e,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:n}}}),r=new B({props:{name:"Default",args:{src:"https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html",id:"abortion-rights-map",ariaLabel:"map",frameTitle:"Global abortion access"}}});const d=[{name:"With chatter"},fe(ue)];let v={$$slots:{default:[ke]},$$scope:{ctx:n}};for(let s=0;s<d.length;s+=1)v=N(v,d[s]);return f=new B({props:v}),{c(){y(t.$$.fragment),a=A(),y(e.$$.fragment),i=A(),y(r.$$.fragment),u=A(),y(f.$$.fragment)},m(s,m){_(t,s,m),D(s,a,m),_(e,s,m),D(s,i,m),_(r,s,m),D(s,u,m),_(f,s,m),p=!0},p(s,[m]){const W=m&1?Q(c,[c[0],c[1],Z(s[0])]):{};t.$set(W);const T={};m&6&&(T.$$scope={dirty:m,ctx:s}),e.$set(T);const b={};m&4&&(b.$$scope={dirty:m,ctx:s}),f.$set(b)},i(s){p||(h(t.$$.fragment,s),h(e.$$.fragment,s),h(r.$$.fragment,s),h(f.$$.fragment,s),p=!0)},o(s){w(t.$$.fragment,s),w(e.$$.fragment,s),w(r.$$.fragment,s),w(f.$$.fragment,s),p=!1},d(s){s&&(C(a),C(i),C(u)),k(t,s),k(e,s),k(r,s),k(f,s)}}}function Ce(n){return[{...de(me),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class ve extends F{constructor(t){super(),X(this,t,Ce,De,Y,{})}}const O=oe(ve,{meta:{title:"Components/DatawrapperChart"},stories:{"tpl:default":{name:"default",template:!0,source:"<DatawrapperChart {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},WithChatter:{name:"With chatter",template:!1,source:`<DatawrapperChart
  frameTitle="Global abortion access"
  ariaLabel="map"
  id="abortion-rights-map"
  src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
  title="Global abortion access"
  description="A map of worldwide access to abortion."
  notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.

Source: Center for Reproductive Rights'}"
/>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","withChatterDocs","DatawrapperChart","withComponentDocs","withStoryDocs"]}),Oe=O.meta,Ve=["Default","WithChatter"],Ie=O.stories.Default,Ee=O.stories.WithChatter;export{Ie as Default,Ee as WithChatter,Ve as __namedExportsOrder,Oe as default};
//# sourceMappingURL=DatawrapperChart.stories-8eb85da9.js.map