import{S as Q,i as G,s as B,g as b,m as _,t as h,h as g,j as w,G as L,o as D,y as S,b as y,d as k,e as E,v as J,w as X,f as I,I as Y,F as V,z as Z,A as ee,C as z}from"./index-df681c7c.js";import{g as N,a as $}from"./spread-8a54911c.js";import{p as te,M as ne,T as se,S as W}from"./collect-stories-a6a786e2.js";import{B as H}from"./Block-2886d499.js";import{P as ie}from"./PaddingReset-6a0440e6.js";import{b as K,w as oe}from"./withParams-47e2ab71.js";const re=`A full-width photo inside the text well.

\`\`\`svelte
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
<\/script>

<FeaturePhoto
  src="{\`\${assets}/images/myImage.jpg\`}"
  altText="Some alt text"
  caption="A caption"
  lazy="{false}"
  width="normal"
/>
\`\`\`
`,ae=`An example of using \`FeaturePhoto\` in the Graphics Kit with a Google Doc.

\`\`\`yaml
# Google doc block
Type: photo
Width: normal
Src: images/shark.jpg
AltText: The king of the sea
Caption: Carcharodon carcharias - REUTERS
\`\`\`

\`\`\`svelte
<!-- App.svelte -->
<script>
  // Add FeaturePhoto to imports from graphics-components
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';

  // These should be already imported for you.
  import content from '$locales/en/content.json';
  import { assets } from '$app/paths';
<\/script>

{#each content.blocks as block}
  {#if block.Type === 'text'}
    <!-- ... other blocks -->

    <!-- Copy/paste into your blocks loop! -->
  {:else if block.Type === 'photo'}
    <FeaturePhoto
      width="{block.Width}"
      src="{\`\${assets}/\${block.Src}\`}"
      altText="{block.AltText}"
      caption="{block.Caption}"
    />
    <!-- END copy/paste -->
  {/if}
{/each}
\`\`\`
`,le="If your photo is missing `altText` a small warning will overlay the image.\n";function ce(r){let e,n;return{c(){e=D("div"),y(e,"class","placeholder w-full svelte-g9m2b0"),y(e,"style",n=`height: ${r[5]}px;`)},m(t,i){k(t,e,i)},p(t,i){i&32&&n!==(n=`height: ${t[5]}px;`)&&y(e,"style",n)},d(t){t&&I(e)}}}function fe(r){let e,n;return{c(){e=D("img"),y(e,"class","w-full my-0"),V(e.src,n=r[0])||y(e,"src",n),y(e,"alt",r[1])},m(t,i){k(t,e,i)},p(t,i){i&1&&!V(e.src,n=t[0])&&y(e,"src",n),i&2&&y(e,"alt",t[1])},d(t){t&&I(e)}}}function q(r){let e,n;return e=new ie({props:{containerIsFluid:r[6]==="fluid",$$slots:{default:[de]},$$scope:{ctx:r}}}),{c(){b(e.$$.fragment)},m(t,i){_(e,t,i),n=!0},p(t,i){const o={};i&64&&(o.containerIsFluid=t[6]==="fluid"),i&131216&&(o.$$scope={dirty:i,ctx:t}),e.$set(o)},i(t){n||(h(e.$$.fragment,t),n=!0)},o(t){g(e.$$.fragment,t),n=!1},d(t){w(e,t)}}}function pe(r){let e,n;return{c(){e=D("figcaption"),n=Z(r[4])},m(t,i){k(t,e,i),E(e,n)},p(t,i){i&16&&ee(n,t[4])},d(t){t&&I(e)}}}function de(r){let e,n;return e=new H({props:{width:r[7],class:"fmx-auto fmy-0",$$slots:{default:[pe]},$$scope:{ctx:r}}}),{c(){b(e.$$.fragment)},m(t,i){_(e,t,i),n=!0},p(t,i){const o={};i&128&&(o.width=t[7]),i&131088&&(o.$$scope={dirty:i,ctx:t}),e.$set(o)},i(t){n||(h(e.$$.fragment,t),n=!0)},o(t){g(e.$$.fragment,t),n=!1},d(t){w(e,t)}}}function j(r){let e;return{c(){e=D("div"),e.textContent="altText",y(e,"class","alt-warning absolute text-xxs py-1 px-2 svelte-g9m2b0")},m(n,t){k(n,e,t)},d(n){n&&I(e)}}}function ue(r){let e,n,t,i;function o(c,d){return!c[8]||c[11]&&c[9]?fe:ce}let m=o(r),p=m(r),l=r[4]&&q(r),f=!r[1]&&j();return{c(){e=D("figure"),p.c(),n=S(),l&&l.c(),t=S(),f&&f.c(),y(e,"aria-label","media"),y(e,"class","w-full flex flex-col relative")},m(c,d){k(c,e,d),p.m(e,null),E(e,n),l&&l.m(e,null),E(e,t),f&&f.m(e,null),r[16](e),i=!0},p(c,d){m===(m=o(c))&&p?p.p(c,d):(p.d(1),p=m(c),p&&(p.c(),p.m(e,n))),c[4]?l?(l.p(c,d),d&16&&h(l,1)):(l=q(c),l.c(),h(l,1),l.m(e,t)):l&&(J(),g(l,1,1,()=>{l=null}),X()),c[1]?f&&(f.d(1),f=null):f||(f=j(),f.c(),f.m(e,null))},i(c){i||(h(l),i=!0)},o(c){g(l),i=!1},d(c){c&&I(e),p.d(),l&&l.d(),f&&f.d(),r[16](null)}}}function me(r){let e,n;return e=new H({props:{width:r[6],class:"photo fmy-6 "+r[3],id:r[2],$$slots:{default:[ue]},$$scope:{ctx:r}}}),{c(){b(e.$$.fragment)},m(t,i){_(e,t,i),n=!0},p(t,[i]){const o={};i&64&&(o.width=t[6]),i&8&&(o.class="photo fmy-6 "+t[3]),i&4&&(o.id=t[2]),i&133107&&(o.$$scope={dirty:i,ctx:t}),e.$set(o)},i(t){n||(h(e.$$.fragment,t),n=!0)},o(t){g(e.$$.fragment,t),n=!1},d(t){w(e,t)}}}function he(r,e,n){let{src:t}=e,{altText:i}=e,{id:o=""}=e,{class:m=""}=e,{caption:p}=e,{height:l=100}=e,{width:f="normal"}=e,{textWidth:c="normal"}=e,{lazy:d=!1}=e,{top:v=0}=e,{bottom:A=0}=e,{left:x=0}=e,{right:P=0}=e,T=!1,s;const u=typeof IntersectionObserver<"u";L(()=>{if(d&&u){const a=`${A}px ${x}px ${v}px ${P}px`,C=new IntersectionObserver(U=>{n(9,T=U[0].isIntersecting),T&&C.unobserve(s)},{rootMargin:a});return C.observe(s),()=>C.unobserve(s)}});function M(a){Y[a?"unshift":"push"](()=>{s=a,n(10,s)})}return r.$$set=a=>{"src"in a&&n(0,t=a.src),"altText"in a&&n(1,i=a.altText),"id"in a&&n(2,o=a.id),"class"in a&&n(3,m=a.class),"caption"in a&&n(4,p=a.caption),"height"in a&&n(5,l=a.height),"width"in a&&n(6,f=a.width),"textWidth"in a&&n(7,c=a.textWidth),"lazy"in a&&n(8,d=a.lazy),"top"in a&&n(12,v=a.top),"bottom"in a&&n(13,A=a.bottom),"left"in a&&n(14,x=a.left),"right"in a&&n(15,P=a.right)},[t,i,o,m,p,l,f,c,d,T,s,u,v,A,x,P,M]}class R extends Q{constructor(e){super(),G(this,e,he,me,B,{src:0,altText:1,id:2,class:3,caption:4,height:5,width:6,textWidth:7,lazy:8,top:12,bottom:13,left:14,right:15})}}R.__docgen={version:3,name:"FeaturePhoto.svelte",data:[{keywords:[{name:"type",description:"{string}"},{name:"required",description:""}],visibility:"public",description:"Photo src",name:"src",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}},{keywords:[{name:"type",description:"{string}"},{name:"required",description:""}],visibility:"public",description:"Photo altText",name:"altText",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Add an id to target with custom CSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{visibility:"public",description:"Add extra classes to target with custom CSS.",keywords:[{name:"type",description:"{string}"}],name:"class",kind:"const",static:!1,readonly:!0,type:{kind:"type",text:"string",type:"string"},localName:"cls",defaultValue:""},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Caption below the photo",name:"caption",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"}},{keywords:[],visibility:"public",description:"Height of the photo placeholder when lazy-loading",name:"height",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:100},{keywords:[],visibility:"public",description:"Width of the container, one of: normal, wide, wider, widest or fluid",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"},{keywords:[],visibility:"public",description:"Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)",name:"lazy",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading.",name:"top",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{keywords:[],visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading.",name:"bottom",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{keywords:[],visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading.",name:"left",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{keywords:[],visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading.",name:"right",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const O=""+new URL("shark-f4201fc0.jpg",import.meta.url).href;function ge(r){let e,n;const t=[r[1]];let i={};for(let o=0;o<t.length;o+=1)i=z(i,t[o]);return e=new R({props:i}),{c(){b(e.$$.fragment)},m(o,m){_(e,o,m),n=!0},p(o,m){const p=m&2?N(t,[$(o[1])]):{};e.$set(p)},i(o){n||(h(e.$$.fragment,o),n=!0)},o(o){g(e.$$.fragment,o),n=!1},d(o){w(e,o)}}}function ye(r){let e,n,t,i,o,m,p,l,f,c;const d=[{title:"Components/FeaturePhoto"},{component:R},r[0]];let v={};for(let s=0;s<d.length;s+=1)v=z(v,d[s]);e=new ne({props:v}),t=new se({props:{$$slots:{default:[ge,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:r}}}),o=new W({props:{name:"Default",args:{src:O,altText:"A shark!",width:"normal",caption:"Carcharodon carcharias - REUTERS"}}});const A=[{name:"🚀 QUICKIT"},{args:{src:O,altText:"A shark!",width:"normal",caption:"Carcharodon carcharias - REUTERS"}},K(ae)];let x={};for(let s=0;s<A.length;s+=1)x=z(x,A[s]);p=new W({props:x});const P=[{name:"Missing altText"},{args:{src:O,width:"normal",caption:"Carcharodon carcharias - REUTERS"}},K(le)];let T={};for(let s=0;s<P.length;s+=1)T=z(T,P[s]);return f=new W({props:T}),{c(){b(e.$$.fragment),n=S(),b(t.$$.fragment),i=S(),b(o.$$.fragment),m=S(),b(p.$$.fragment),l=S(),b(f.$$.fragment)},m(s,u){_(e,s,u),k(s,n,u),_(t,s,u),k(s,i,u),_(o,s,u),k(s,m,u),_(p,s,u),k(s,l,u),_(f,s,u),c=!0},p(s,[u]){const M=u&1?N(d,[d[0],d[1],$(s[0])]):{};e.$set(M);const a={};u&6&&(a.$$scope={dirty:u,ctx:s}),t.$set(a);const C={};p.$set(C);const U={};f.$set(U)},i(s){c||(h(e.$$.fragment,s),h(t.$$.fragment,s),h(o.$$.fragment,s),h(p.$$.fragment,s),h(f.$$.fragment,s),c=!0)},o(s){g(e.$$.fragment,s),g(t.$$.fragment,s),g(o.$$.fragment,s),g(p.$$.fragment,s),g(f.$$.fragment,s),c=!1},d(s){s&&(I(n),I(i),I(m),I(l)),w(e,s),w(t,s),w(o,s),w(p,s),w(f,s)}}}function be(r){return[{...oe(re),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]},textWidth:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class _e extends Q{constructor(e){super(),G(this,e,be,ye,B,{})}}const F=te(_e,{meta:{title:"Components/FeaturePhoto"},stories:{"tpl:default":{storyId:"components-featurephoto--default",name:"default",template:!0,source:"<FeaturePhoto {...args} />",hasArgs:!0},Default:{storyId:"components-featurephoto--default",name:"Default",template:!1,source:"",hasArgs:!1},QUICKIT:{storyId:"components-featurephoto--quickit",name:"🚀 QUICKIT",template:!1,source:"",hasArgs:!1},MissingAltText:{storyId:"components-featurephoto--missing-alt-text",name:"Missing altText",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","quickitDocs","missingAltTextDocs","FeaturePhoto","sharkSrc","withComponentDocs","withStoryDocs"]}),Ae=F.meta,Pe=["Default","QUICKIT","MissingAltText"],Se=F.stories.Default,Ce=F.stories.QUICKIT,De=F.stories.MissingAltText;export{Se as Default,De as MissingAltText,Ce as QUICKIT,Pe as __namedExportsOrder,Ae as default};
//# sourceMappingURL=FeaturePhoto.stories-28a29219.js.map