288 lines
57 KiB
JavaScript
288 lines
57 KiB
JavaScript
import{S as W,i as q,s as D,O as ue,k as Ce,l as y,y as A,a8 as ee,d as b,e as P,M as ft,u as We,o as qe,p as De,t as g,h,f as _,D as Tt,E as te,r as j,v as B,w as I,V as ke,I as Y,g as $,b as p,q as X,m as S,j as M,C as z,Q as me,R as be,n as E,z as je,A as $t,P as ye}from"./index-99a30af8.js";import{g as U,a as H}from"./spread-8a54911c.js";import{p as St,M as Mt,T as At,S as ae}from"./collect-stories-1e0d20c7.js";import{g as Pt}from"./globals-7f7f1b26.js";import{e as ne}from"./each-e59479a4.js";import{M as se}from"./Markdown-2a6fc77f.js";import{B as oe}from"./Block-4e35b26d.js";import{b as _e,w as Lt}from"./withParams-47e2ab71.js";const Bt=`The \`Scroller\` component helps you quickly create basic scrollytelling graphics with several layout options.
|
|
|
|
> This component is designed to handle most common layouts for scrollytelling. If you need something more complex, though, you should probably use [svelte-scroller](https://github.com/sveltejs/svelte-scroller), which is a lower level component you can more easily customize.
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
import { Scroller } from '@reuters-graphics/graphics-components';
|
|
|
|
import MyColourBackground from './MyColourBackground.svelte';
|
|
|
|
const steps = [
|
|
{
|
|
background: MyColourBackground,
|
|
backgroundProps: { colour: 'red' },
|
|
foreground: '#### Step 1\\n\\nLorem ipsum red',
|
|
altText: 'Red background',
|
|
},
|
|
{
|
|
background: MyColourBackground,
|
|
backgroundProps: { colour: 'blue' },
|
|
foreground: '#### Step 2\\n\\nLorem ipsum blue',
|
|
altText: 'Blue background',
|
|
},
|
|
{
|
|
background: MyColourBackground,
|
|
backgroundProps: { colour: 'green' },
|
|
foreground: '#### Step 3\\n\\nLorem ipsum green',
|
|
altText: 'Green background',
|
|
},
|
|
];
|
|
<\/script>
|
|
|
|
<Scroller
|
|
steps="{steps}"
|
|
backgroundWidth="fluid"
|
|
foregroundPosition="middle"
|
|
embedded="{false}"
|
|
/>
|
|
\`\`\`
|
|
`,It=`Instead of just text, you can use any component in the foreground, too, and pass whatever props you need to it.
|
|
|
|
If you're making your own custom foreground component, remember to add alt text describing the background graphic.
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
// ...
|
|
import MyCounter from './MyCounter.svelte';
|
|
|
|
const steps = [
|
|
{
|
|
background: MyColourBackground,
|
|
backgroundProps: { colour: 'red' },
|
|
foreground: MyCounter,
|
|
},
|
|
{
|
|
background: MyColourBackground,
|
|
backgroundProps: { colour: 'blue' },
|
|
foreground: '#### Step 2\\n\\nLorem ipsum blue',
|
|
},
|
|
{
|
|
background: MyColourBackground,
|
|
backgroundProps: { colour: 'green' },
|
|
foreground: MyCounter,
|
|
foregroundProps: { count: 100 },
|
|
},
|
|
];
|
|
<\/script>
|
|
|
|
<Scroller
|
|
steps="{steps}"
|
|
backgroundWidth="fluid"
|
|
foregroundPosition="middle"
|
|
embedded="{false}"
|
|
/>
|
|
\`\`\`
|
|
`,Ct=`A more detailed example of using \`Scroller\` with graphics created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
import { Scroller } from '@reuters-graphics/graphics-components';
|
|
|
|
import MyAiMap1 from './ai2svelte/my-map-step-1.svelte';
|
|
import MyAiMap2 from './ai2svelte/my-map-step-2.svelte';
|
|
import MyAiMap3 from './ai2svelte/my-map-step-3.svelte';
|
|
|
|
import { assets } from '$app/paths'; // If using with the Graphics Kit
|
|
|
|
const steps = [
|
|
{
|
|
background: MyAiMap1,
|
|
backgroundProps: { assetsPath: assets },
|
|
foreground: '#### Step 1\\n\\nLorem ipsum',
|
|
altText: 'A map showing TKTK',
|
|
},
|
|
{
|
|
background: MyAiMap2,
|
|
backgroundProps: { assetsPath: assets },
|
|
foreground: '#### Step 2\\n\\nLorem ipsum',
|
|
altText: 'The same map now highlights something interesting.',
|
|
},
|
|
{
|
|
background: MyAiMap3,
|
|
backgroundProps: { assetsPath: assets },
|
|
foreground: '#### Step 3\\n\\nLorem ipsum',
|
|
altText: 'The same map now shows something else that is interesting.',
|
|
},
|
|
];
|
|
<\/script>
|
|
|
|
<Scroller
|
|
steps="{steps}"
|
|
backgroundWidth="fluid"
|
|
foregroundPosition="middle"
|
|
stackBackground="{true}"
|
|
embedded="{false}"
|
|
/>
|
|
\`\`\`
|
|
|
|
When working with a Google doc, here's an example of how you can tie your text into your steps.
|
|
|
|
\`\`\`yaml
|
|
# Google doc block
|
|
Type: scroller
|
|
ID: map-scrolly
|
|
Step1Text: #### Step 1
|
|
|
|
Lorem Ipsum
|
|
:end
|
|
AltText1: A map showing the Upper West side in New York City.
|
|
:end
|
|
|
|
Step2Text: #### Step 2
|
|
|
|
Lorem Ipsum
|
|
:end
|
|
AltText2: The same map now highlights 98th Street.
|
|
:end
|
|
|
|
Step3Text: #### Step 3
|
|
|
|
Lorem Ipsum
|
|
:end
|
|
AltText3: The same map now highlights three locations near 98th Street where something particulary important happened.
|
|
:end
|
|
\`\`\`
|
|
|
|
\`\`\`svelte
|
|
<!-- App.svelte -->
|
|
<script>
|
|
// Previos imports and stuff...
|
|
|
|
// This should be already imported for you.
|
|
import content from '$locales/en/content.json';
|
|
|
|
// Get the data for the block in content by its ID
|
|
const scrollerBlock = content.blocks.find(
|
|
(block) => block.ID === 'map-scrolly'
|
|
);
|
|
|
|
// Now plug your text into your step foregrounds
|
|
const steps = [
|
|
{
|
|
background: MyAiMap1,
|
|
backgroundProps: { basePath: assets },
|
|
foreground: scrollerBlock.Step1Text,
|
|
altText: scrollerBlock.AltText1,
|
|
},
|
|
{
|
|
background: MyAiMap2,
|
|
backgroundProps: { basePath: assets },
|
|
foreground: scrollerBlock.Step2Text,
|
|
altText: scrollerBlock.AltText2,
|
|
},
|
|
{
|
|
background: MyAiMap3,
|
|
backgroundProps: { basePath: assets },
|
|
foreground: scrollerBlock.Step3Text,
|
|
altText: scrollerBlock.AltText3,
|
|
},
|
|
];
|
|
<\/script>
|
|
|
|
{#each content.blocks as block}
|
|
{#if block.Type === 'text'}
|
|
<!-- ... other blocks -->
|
|
|
|
<!-- Copy/paste into your blocks loop! -->
|
|
{:else if block.Type === 'scroller' && block.ID === 'map-scrolly'}
|
|
<Scroller
|
|
steps="{steps}"
|
|
backgroundWidth="fluid"
|
|
foregroundPosition="middle"
|
|
stackBackground="{true}"
|
|
embedded="{false}"
|
|
/>
|
|
<!-- END copy/paste -->
|
|
{/if}
|
|
{/each}
|
|
\`\`\`
|
|
`,Wt=`For Graphics Kit users, the \`Scroller\` component is built-in for scrollytelling with [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics and text.
|
|
|
|
First, import your ai2svelte graphics in \`App.svelte\` and add them to the \`aiCharts\` object;
|
|
|
|
\`\`\`svelte
|
|
<!-- App.svelte -->
|
|
<script>
|
|
// Other stuff...
|
|
|
|
import AiMap1 from './ai2svelte/my-map-1.svelte';
|
|
import AiMap2 from './ai2svelte/my-map-2.svelte';
|
|
import AiMap3 from './ai2svelte/my-map-3.svelte';
|
|
|
|
const aiCharts = {
|
|
// Other charts...
|
|
AiMap1,
|
|
AiMap2,
|
|
AiMap3,
|
|
};
|
|
<\/script>
|
|
\`\`\`
|
|
|
|
Then add the following structure to your Google Doc, taking care that the names of your charts in the \`aiCharts\` object match the names of your step backgrounds:
|
|
|
|
\`\`\`yaml
|
|
# Google doc block
|
|
Type: ai-scroller
|
|
ID: my-map-scroller
|
|
Width: normal
|
|
ForegroundPosition: middle
|
|
StackBackground: true
|
|
[.Steps]
|
|
Background: AiMap1
|
|
Text: #### Step 1
|
|
|
|
Lorem ipsum
|
|
:end
|
|
AltText: A map showing the Upper West side in New York City.
|
|
|
|
Can add paragraphs of alt text if you want to break up sentences.
|
|
:end
|
|
|
|
Background: AiMap2
|
|
Text: #### Step 2
|
|
|
|
Lorem ipsum
|
|
:end
|
|
AltText: The same map now highlights 98th Street.
|
|
:end
|
|
|
|
Background: AiMap3
|
|
Text: #### Step 3
|
|
|
|
Lorem ipsum
|
|
:end
|
|
AltText: The same map now highlights three locations near 98th Street where something particulary important happened.
|
|
:end
|
|
[]
|
|
|
|
\`\`\`
|
|
`;const{window:pt}=Pt,qt=l=>({}),Re=l=>({}),Dt=l=>({}),Ve=l=>({});function jt(l){let e,t,n,s,i,r,a,o,d;ue(l[21]);const u=l[20].background,c=Ce(u,l,l[19],Ve),f=l[20].foreground,v=Ce(f,l,l[19],Re);return{c(){e=y("svelte-scroller-outer"),t=y("svelte-scroller-background-container"),n=y("svelte-scroller-background"),c&&c.c(),i=A(),r=y("svelte-scroller-foreground"),v&&v.c(),ee(n,"class","svelte-1yjh2jm"),ee(t,"class","background-container svelte-1yjh2jm"),ee(t,"style",s=""+(l[5]+l[4])),ee(r,"class","svelte-1yjh2jm"),ee(e,"class","svelte-1yjh2jm")},m(T,L){b(T,e,L),P(e,t),P(t,n),c&&c.m(n,null),l[22](n),P(e,i),P(e,r),v&&v.m(r,null),l[23](r),l[24](e),a=!0,o||(d=ft(pt,"resize",l[21]),o=!0)},p(T,L){c&&c.p&&(!a||L[0]&524288)&&We(c,u,T,T[19],a?De(u,T[19],L,Dt):qe(T[19]),Ve),(!a||L[0]&48&&s!==(s=""+(T[5]+T[4])))&&ee(t,"style",s),v&&v.p&&(!a||L[0]&524288)&&We(v,f,T,T[19],a?De(f,T[19],L,qt):qe(T[19]),Re)},i(T){a||(g(c,T),g(v,T),a=!0)},o(T){h(c,T),h(v,T),a=!1},d(T){T&&_(e),c&&c.d(T),l[22](null),v&&v.d(T),l[23](null),l[24](null),o=!1,d()}}}const N=[];let de;if(typeof window<"u"){const l=()=>N.forEach(e=>e());window.addEventListener("scroll",l),window.addEventListener("resize",l)}if(typeof IntersectionObserver<"u"){const l=new Map,e=new IntersectionObserver((t,n)=>{t.forEach(s=>{const i=l.get(s.target),r=N.indexOf(i);s.isIntersecting?r===-1&&N.push(i):(i(),r!==-1&&N.splice(r,1))})},{rootMargin:"400px 0px"});de={add:({outer:t,update:n})=>{const{top:s,bottom:i}=t.getBoundingClientRect();s<window.innerHeight&&i>0&&N.push(n),l.set(t,n),e.observe(t)},remove:({outer:t,update:n})=>{const s=N.indexOf(n);s!==-1&&N.splice(s,1),l.delete(t),e.unobserve(t)}}}else de={add:({update:l})=>{N.push(l)},remove:({update:l})=>{const e=N.indexOf(l);e!==-1&&N.splice(e,1)}};function Rt(l,e,t){let n,s,i,r,a,{$$slots:o={},$$scope:d}=e,{top:u=0}=e,{bottom:c=1}=e,{threshold:f=.5}=e,{query:v="section"}=e,{parallax:T=!1}=e,{index:L=0}=e,{count:R=0}=e,{offset:F=0}=e,{progress:C=0}=e,{visible:O=!1}=e,V,m,k,ie,K,G=0,Q,x=0,ce=1;Tt(()=>{K=m.querySelectorAll(v),t(7,R=K.length),fe();const w={outer:V,update:fe};return de.add(w),()=>de.remove(w)});function fe(){if(!m)return;const w=V.getBoundingClientRect();ie=w.left,t(18,ce=w.right-ie);const Z=m.getBoundingClientRect(),Ae=k.getBoundingClientRect();t(10,O=Z.top<G&&Z.bottom>0);const pe=Z.bottom-Z.top,Pe=Ae.bottom-Ae.top,ge=s-n;t(9,C=(n-Z.top)/(pe-ge)),C<=0?(t(17,x=0),t(16,Q=!1)):C>=1?(t(17,x=T?pe-Pe:pe-ge),t(16,Q=!1)):(t(17,x=T?Math.round(n-C*(Pe-ge)):n),t(16,Q=!0));for(let le=0;le<K.length;le++){const wt=K[le],{top:Le}=wt.getBoundingClientRect(),Be=K[le+1],Ie=Be?Be.getBoundingClientRect().top:Z.bottom;if(t(8,F=(i-Le)/(Ie-Le)),Ie>=i){t(6,L=le);break}}}function ht(){t(0,G=pt.innerHeight)}function kt(w){te[w?"unshift":"push"](()=>{k=w,t(3,k)})}function yt(w){te[w?"unshift":"push"](()=>{m=w,t(2,m)})}function vt(w){te[w?"unshift":"push"](()=>{V=w,t(1,V)})}return l.$$set=w=>{"top"in w&&t(11,u=w.top),"bottom"in w&&t(12,c=w.bottom),"threshold"in w&&t(13,f=w.threshold),"query"in w&&t(14,v=w.query),"parallax"in w&&t(15,T=w.parallax),"index"in w&&t(6,L=w.index),"count"in w&&t(7,R=w.count),"offset"in w&&t(8,F=w.offset),"progress"in w&&t(9,C=w.progress),"visible"in w&&t(10,O=w.visible),"$$scope"in w&&t(19,d=w.$$scope)},l.$$.update=()=>{l.$$.dirty[0]&2049&&(n=Math.round(u*G)),l.$$.dirty[0]&4097&&(s=Math.round(c*G)),l.$$.dirty[0]&8193&&(i=Math.round(f*G)),l.$$.dirty[0]&47104&&fe(),l.$$.dirty[0]&196608&&t(5,r=`
|
|
position: ${Q?"fixed":"absolute"};
|
|
top: 0;
|
|
transform: translate(0, ${x}px);
|
|
z-index: 1;
|
|
`),l.$$.dirty[0]&327680&&t(4,a=Q?`width:${ce}px;`:"")},[G,V,m,k,a,r,L,R,F,C,O,u,c,f,v,T,Q,x,ce,d,o,ht,kt,yt,vt]}let gt=class extends W{constructor(e){super(),q(this,e,Rt,jt,D,{top:11,bottom:12,threshold:13,query:14,parallax:15,index:6,count:7,offset:8,progress:9,visible:10},null,[-1,-1])}};gt.__docgen={version:3,name:"Scroller.svelte",data:[{keywords:[],visibility:"public",description:"config",name:"top",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{visibility:"public",description:null,keywords:[],name:"bottom",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:1},{visibility:"public",description:null,keywords:[],name:"threshold",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:.5},{visibility:"public",description:null,keywords:[],name:"query",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"section"},{visibility:"public",description:null,keywords:[],name:"parallax",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"bindings",name:"index",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{visibility:"public",description:null,keywords:[],name:"count",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{visibility:"public",description:null,keywords:[],name:"offset",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{visibility:"public",description:null,keywords:[],name:"progress",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{visibility:"public",description:null,keywords:[],name:"visible",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"",name:"background"},{keywords:[],visibility:"public",description:"",name:"foreground"}],refs:[]};function Ue(l,e,t){const n=l.slice();return n[4]=e[t],n[6]=t,n}function Fe(l){let e,t,n,s;const i=[l[4].backgroundProps||{}];var r=l[4].background;function a(o,d){let u={};if(d!==void 0&&d&2)u=U(i,[H(o[4].backgroundProps||{})]);else for(let c=0;c<i.length;c+=1)u=z(u,i[c]);return{props:u}}return r&&(t=Y(r,a(l))),{c(){e=y("div"),t&&$(t.$$.fragment),n=A(),p(e,"class","step-background step-"+(l[6]+1)+" w-full absolute svelte-1br3mgv"),X(e,"visible",l[3]?l[6]<=l[0]:l[6]===l[0]),X(e,"invisible",l[3]?l[6]>l[0]:l[6]!==l[0])},m(o,d){b(o,e,d),t&&S(t,e,null),P(e,n),s=!0},p(o,d){if(d&2&&r!==(r=o[4].background)){if(t){B();const u=t;h(u.$$.fragment,1,0,()=>{M(u,1)}),I()}r?(t=Y(r,a(o,d)),$(t.$$.fragment),g(t.$$.fragment,1),S(t,e,n)):t=null}else if(r){const u=d&2?U(i,[H(o[4].backgroundProps||{})]):{};t.$set(u)}(!s||d&9)&&X(e,"visible",o[3]?o[6]<=o[0]:o[6]===o[0]),(!s||d&9)&&X(e,"invisible",o[3]?o[6]>o[0]:o[6]!==o[0])},i(o){s||(t&&g(t.$$.fragment,o),s=!0)},o(o){t&&h(t.$$.fragment,o),s=!1},d(o){o&&_(e),t&&M(t)}}}function Ne(l){let e,t,n=(l[2]===0||l[6]>=(l[3]?0:l[0]-l[2])&&l[6]<=l[0]+l[2])&&Fe(l);return{c(){n&&n.c(),e=j()},m(s,i){n&&n.m(s,i),b(s,e,i),t=!0},p(s,i){s[2]===0||s[6]>=(s[3]?0:s[0]-s[2])&&s[6]<=s[0]+s[2]?n?(n.p(s,i),i&13&&g(n,1)):(n=Fe(s),n.c(),g(n,1),n.m(e.parentNode,e)):n&&(B(),h(n,1,1,()=>{n=null}),I())},i(s){t||(g(n),t=!0)},o(s){h(n),t=!1},d(s){s&&_(e),n&&n.d(s)}}}function Vt(l){let e,t,n=ne(l[1]),s=[];for(let r=0;r<n.length;r+=1)s[r]=Ne(Ue(l,n,r));const i=r=>h(s[r],1,1,()=>{s[r]=null});return{c(){for(let r=0;r<s.length;r+=1)s[r].c();e=j()},m(r,a){for(let o=0;o<s.length;o+=1)s[o]&&s[o].m(r,a);b(r,e,a),t=!0},p(r,[a]){if(a&15){n=ne(r[1]);let o;for(o=0;o<n.length;o+=1){const d=Ue(r,n,o);s[o]?(s[o].p(d,a),g(s[o],1)):(s[o]=Ne(d),s[o].c(),g(s[o],1),s[o].m(e.parentNode,e))}for(B(),o=n.length;o<s.length;o+=1)i(o);I()}},i(r){if(!t){for(let a=0;a<n.length;a+=1)g(s[a]);t=!0}},o(r){s=s.filter(Boolean);for(let a=0;a<s.length;a+=1)h(s[a]);t=!1},d(r){r&&_(e),ke(s,r)}}}function Ut(l,e,t){let{index:n}=e,{steps:s=[]}=e,{preload:i=1}=e,{stackBackground:r=!0}=e;return l.$$set=a=>{"index"in a&&t(0,n=a.index),"steps"in a&&t(1,s=a.steps),"preload"in a&&t(2,i=a.preload),"stackBackground"in a&&t(3,r=a.stackBackground)},[n,s,i,r]}let mt=class extends W{constructor(e){super(),q(this,e,Ut,Vt,D,{index:0,steps:1,preload:2,stackBackground:3})}};mt.__docgen={version:3,name:"Background.svelte",data:[{visibility:"public",description:null,keywords:[],name:"index",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"steps",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"array",type:"array"}},{visibility:"public",description:null,keywords:[],name:"preload",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:1},{visibility:"public",description:null,keywords:[],name:"stackBackground",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function Ee(l,e,t){const n=l.slice();return n[1]=e[t],n[3]=t,n}function Ft(l){let e,t,n,s,i,r;const a=[Ht,Et],o=[];function d(c,f){return typeof c[1].foreground=="string"?0:1}t=d(l),n=o[t]=a[t](l);let u=typeof l[1].altText=="string"&&He(l);return{c(){e=y("div"),n.c(),s=A(),u&&u.c(),i=j(),p(e,"class","step-foreground w-full svelte-1u397b3")},m(c,f){b(c,e,f),o[t].m(e,null),b(c,s,f),u&&u.m(c,f),b(c,i,f),r=!0},p(c,f){let v=t;t=d(c),t===v?o[t].p(c,f):(B(),h(o[v],1,1,()=>{o[v]=null}),I(),n=o[t],n?n.p(c,f):(n=o[t]=a[t](c),n.c()),g(n,1),n.m(e,null)),typeof c[1].altText=="string"?u?(u.p(c,f),f&1&&g(u,1)):(u=He(c),u.c(),g(u,1),u.m(i.parentNode,i)):u&&(B(),h(u,1,1,()=>{u=null}),I())},i(c){r||(g(n),g(u),r=!0)},o(c){h(n),h(u),r=!1},d(c){c&&(_(e),_(s),_(i)),o[t].d(),u&&u.d(c)}}}function Nt(l){let e,t,n,s,i=typeof l[1].altText=="string"&&ze(l);return{c(){e=y("div"),t=A(),i&&i.c(),n=j(),p(e,"class","empty-step-foreground")},m(r,a){b(r,e,a),b(r,t,a),i&&i.m(r,a),b(r,n,a),s=!0},p(r,a){typeof r[1].altText=="string"?i?(i.p(r,a),a&1&&g(i,1)):(i=ze(r),i.c(),g(i,1),i.m(n.parentNode,n)):i&&(B(),h(i,1,1,()=>{i=null}),I())},i(r){s||(g(i),s=!0)},o(r){h(i),s=!1},d(r){r&&(_(e),_(t),_(n)),i&&i.d(r)}}}function Et(l){let e,t,n;const s=[l[1].foregroundProps||{}];var i=l[1].foreground;function r(a,o){let d={};if(o!==void 0&&o&1)d=U(s,[H(a[1].foregroundProps||{})]);else for(let u=0;u<s.length;u+=1)d=z(d,s[u]);return{props:d}}return i&&(e=Y(i,r(l))),{c(){e&&$(e.$$.fragment),t=j()},m(a,o){e&&S(e,a,o),b(a,t,o),n=!0},p(a,o){if(o&1&&i!==(i=a[1].foreground)){if(e){B();const d=e;h(d.$$.fragment,1,0,()=>{M(d,1)}),I()}i?(e=Y(i,r(a,o)),$(e.$$.fragment),g(e.$$.fragment,1),S(e,t.parentNode,t)):e=null}else if(i){const d=o&1?U(s,[H(a[1].foregroundProps||{})]):{};e.$set(d)}},i(a){n||(e&&g(e.$$.fragment,a),n=!0)},o(a){e&&h(e.$$.fragment,a),n=!1},d(a){a&&_(t),e&&M(e,a)}}}function Ht(l){let e,t;return e=new se({props:{source:l[1].foreground}}),{c(){$(e.$$.fragment)},m(n,s){S(e,n,s),t=!0},p(n,s){const i={};s&1&&(i.source=n[1].foreground),e.$set(i)},i(n){t||(g(e.$$.fragment,n),t=!0)},o(n){h(e.$$.fragment,n),t=!1},d(n){M(e,n)}}}function He(l){let e,t,n;return t=new se({props:{source:l[1].altText}}),{c(){e=y("div"),$(t.$$.fragment),p(e,"class","background-alt-text visually-hidden")},m(s,i){b(s,e,i),S(t,e,null),n=!0},p(s,i){const r={};i&1&&(r.source=s[1].altText),t.$set(r)},i(s){n||(g(t.$$.fragment,s),n=!0)},o(s){h(t.$$.fragment,s),n=!1},d(s){s&&_(e),M(t)}}}function ze(l){let e,t,n;return t=new se({props:{source:l[1].altText}}),{c(){e=y("div"),$(t.$$.fragment),p(e,"class","background-alt-text visually-hidden")},m(s,i){b(s,e,i),S(t,e,null),n=!0},p(s,i){const r={};i&1&&(r.source=s[1].altText),t.$set(r)},i(s){n||(g(t.$$.fragment,s),n=!0)},o(s){h(t.$$.fragment,s),n=!1},d(s){s&&_(e),M(t)}}}function Oe(l){let e,t,n,s,i;const r=[Nt,Ft],a=[];function o(d,u){return d[1].foreground===""||!d[1].foreground?0:1}return t=o(l),n=a[t]=r[t](l),{c(){e=y("div"),n.c(),s=A(),p(e,"class","step-foreground-container step-"+(l[3]+1)+" mb-20 h-screen flex items-center justify-center svelte-1u397b3")},m(d,u){b(d,e,u),a[t].m(e,null),P(e,s),i=!0},p(d,u){let c=t;t=o(d),t===c?a[t].p(d,u):(B(),h(a[c],1,1,()=>{a[c]=null}),I(),n=a[t],n?n.p(d,u):(n=a[t]=r[t](d),n.c()),g(n,1),n.m(e,s))},i(d){i||(g(n),i=!0)},o(d){h(n),i=!1},d(d){d&&_(e),a[t].d()}}}function zt(l){let e,t,n=ne(l[0]),s=[];for(let r=0;r<n.length;r+=1)s[r]=Oe(Ee(l,n,r));const i=r=>h(s[r],1,1,()=>{s[r]=null});return{c(){for(let r=0;r<s.length;r+=1)s[r].c();e=j()},m(r,a){for(let o=0;o<s.length;o+=1)s[o]&&s[o].m(r,a);b(r,e,a),t=!0},p(r,[a]){if(a&1){n=ne(r[0]);let o;for(o=0;o<n.length;o+=1){const d=Ee(r,n,o);s[o]?(s[o].p(d,a),g(s[o],1)):(s[o]=Oe(d),s[o].c(),g(s[o],1),s[o].m(e.parentNode,e))}for(B(),o=n.length;o<s.length;o+=1)i(o);I()}},i(r){if(!t){for(let a=0;a<n.length;a+=1)g(s[a]);t=!0}},o(r){s=s.filter(Boolean);for(let a=0;a<s.length;a+=1)h(s[a]);t=!1},d(r){r&&_(e),ke(s,r)}}}function Ot(l,e,t){let{steps:n=[]}=e;return l.$$set=s=>{"steps"in s&&t(0,n=s.steps)},[n]}let bt=class extends W{constructor(e){super(),q(this,e,Ot,zt,D,{steps:0})}};bt.__docgen={version:3,name:"Foreground.svelte",data:[{visibility:"public",description:null,keywords:[],name:"steps",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"array",type:"array"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function Kt(l){let e,t,n,s;const i=[l[0].backgroundProps||{}];var r=l[0].background;function a(o,d){let u={};if(d!==void 0&&d&1)u=U(i,[H(o[0].backgroundProps||{})]);else for(let c=0;c<i.length;c+=1)u=z(u,i[c]);return{props:u}}return r&&(t=Y(r,a(l))),{c(){e=y("div"),t&&$(t.$$.fragment),p(e,"class",n="embedded-background step-"+(l[2]+1)),p(e,"aria-hidden","true")},m(o,d){b(o,e,d),t&&S(t,e,null),s=!0},p(o,d){if(d&1&&r!==(r=o[0].background)){if(t){B();const u=t;h(u.$$.fragment,1,0,()=>{M(u,1)}),I()}r?(t=Y(r,a(o,d)),$(t.$$.fragment),g(t.$$.fragment,1),S(t,e,null)):t=null}else if(r){const u=d&1?U(i,[H(o[0].backgroundProps||{})]):{};t.$set(u)}(!s||d&4&&n!==(n="embedded-background step-"+(o[2]+1)))&&p(e,"class",n)},i(o){s||(t&&g(t.$$.fragment,o),s=!0)},o(o){t&&h(t.$$.fragment,o),s=!1},d(o){o&&_(e),t&&M(t)}}}function Gt(l){let e,t;return e=new oe({props:{width:l[1],class:"background-container step-"+(l[2]+1),$$slots:{default:[Kt]},$$scope:{ctx:l}}}),{c(){$(e.$$.fragment)},m(n,s){S(e,n,s),t=!0},p(n,[s]){const i={};s&2&&(i.width=n[1]),s&4&&(i.class="background-container step-"+(n[2]+1)),s&13&&(i.$$scope={dirty:s,ctx:n}),e.$set(i)},i(n){t||(g(e.$$.fragment,n),t=!0)},o(n){h(e.$$.fragment,n),t=!1},d(n){M(e,n)}}}function Qt(l,e,t){let{step:n}=e,{backgroundWidth:s}=e,{index:i}=e;return l.$$set=r=>{"step"in r&&t(0,n=r.step),"backgroundWidth"in r&&t(1,s=r.backgroundWidth),"index"in r&&t(2,i=r.index)},[n,s,i]}class ve extends W{constructor(e){super(),q(this,e,Qt,Gt,D,{step:0,backgroundWidth:1,index:2})}}ve.__docgen={version:3,name:"Background.svelte",data:[{visibility:"public",description:null,keywords:[],name:"step",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"backgroundWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"index",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function Xt(l){let e,t,n,s;const i=[l[0].foregroundProps||{}];var r=l[0].foreground;function a(o,d){let u={};if(d!==void 0&&d&1)u=U(i,[H(o[0].foregroundProps||{})]);else for(let c=0;c<i.length;c+=1)u=z(u,i[c]);return{props:u}}return r&&(t=Y(r,a(l))),{c(){e=y("div"),t&&$(t.$$.fragment),p(e,"class",n="embedded-foreground step-"+(l[1]+1)+" svelte-kywsd6")},m(o,d){b(o,e,d),t&&S(t,e,null),s=!0},p(o,d){if(d&1&&r!==(r=o[0].foreground)){if(t){B();const u=t;h(u.$$.fragment,1,0,()=>{M(u,1)}),I()}r?(t=Y(r,a(o,d)),$(t.$$.fragment),g(t.$$.fragment,1),S(t,e,null)):t=null}else if(r){const u=d&1?U(i,[H(o[0].foregroundProps||{})]):{};t.$set(u)}(!s||d&2&&n!==(n="embedded-foreground step-"+(o[1]+1)+" svelte-kywsd6"))&&p(e,"class",n)},i(o){s||(t&&g(t.$$.fragment,o),s=!0)},o(o){t&&h(t.$$.fragment,o),s=!1},d(o){o&&_(e),t&&M(t)}}}function Yt(l){let e,t;return e=new oe({props:{class:"body-text step-"+(l[1]+1),$$slots:{default:[Jt]},$$scope:{ctx:l}}}),{c(){$(e.$$.fragment)},m(n,s){S(e,n,s),t=!0},p(n,s){const i={};s&2&&(i.class="body-text step-"+(n[1]+1)),s&7&&(i.$$scope={dirty:s,ctx:n}),e.$set(i)},i(n){t||(g(e.$$.fragment,n),t=!0)},o(n){h(e.$$.fragment,n),t=!1},d(n){M(e,n)}}}function xt(l){let e,t,n,s,i,r=typeof l[0].altText=="string"&&Ge(l);return{c(){e=y("div"),n=A(),r&&r.c(),s=j(),p(e,"class",t="empty-step-foreground step-"+(l[1]+1)+" svelte-kywsd6")},m(a,o){b(a,e,o),b(a,n,o),r&&r.m(a,o),b(a,s,o),i=!0},p(a,o){(!i||o&2&&t!==(t="empty-step-foreground step-"+(a[1]+1)+" svelte-kywsd6"))&&p(e,"class",t),typeof a[0].altText=="string"?r?(r.p(a,o),o&1&&g(r,1)):(r=Ge(a),r.c(),g(r,1),r.m(s.parentNode,s)):r&&(B(),h(r,1,1,()=>{r=null}),I())},i(a){i||(g(r),i=!0)},o(a){h(r),i=!1},d(a){a&&(_(e),_(n),_(s)),r&&r.d(a)}}}function Ke(l){let e,t,n;return t=new se({props:{source:l[0].altText}}),{c(){e=y("div"),$(t.$$.fragment),p(e,"class","background-alt-text visually-hidden")},m(s,i){b(s,e,i),S(t,e,null),n=!0},p(s,i){const r={};i&1&&(r.source=s[0].altText),t.$set(r)},i(s){n||(g(t.$$.fragment,s),n=!0)},o(s){h(t.$$.fragment,s),n=!1},d(s){s&&_(e),M(t)}}}function Jt(l){let e,t,n,s,i,r;t=new se({props:{source:l[0].foreground}});let a=typeof l[0].altText=="string"&&Ke(l);return{c(){e=y("div"),$(t.$$.fragment),s=A(),a&&a.c(),i=j(),p(e,"class",n="embedded-foreground step-"+(l[1]+1)+" svelte-kywsd6")},m(o,d){b(o,e,d),S(t,e,null),b(o,s,d),a&&a.m(o,d),b(o,i,d),r=!0},p(o,d){const u={};d&1&&(u.source=o[0].foreground),t.$set(u),(!r||d&2&&n!==(n="embedded-foreground step-"+(o[1]+1)+" svelte-kywsd6"))&&p(e,"class",n),typeof o[0].altText=="string"?a?(a.p(o,d),d&1&&g(a,1)):(a=Ke(o),a.c(),g(a,1),a.m(i.parentNode,i)):a&&(B(),h(a,1,1,()=>{a=null}),I())},i(o){r||(g(t.$$.fragment,o),g(a),r=!0)},o(o){h(t.$$.fragment,o),h(a),r=!1},d(o){o&&(_(e),_(s),_(i)),M(t),a&&a.d(o)}}}function Ge(l){let e,t,n;return t=new se({props:{source:l[0].altText}}),{c(){e=y("div"),$(t.$$.fragment),p(e,"class","background-alt-text visually-hidden")},m(s,i){b(s,e,i),S(t,e,null),n=!0},p(s,i){const r={};i&1&&(r.source=s[0].altText),t.$set(r)},i(s){n||(g(t.$$.fragment,s),n=!0)},o(s){h(t.$$.fragment,s),n=!1},d(s){s&&_(e),M(t)}}}function Zt(l){let e,t,n,s;const i=[xt,Yt,Xt],r=[];function a(o,d){return o[0].foreground===""||!o[0].foreground?0:typeof o[0].foreground=="string"?1:2}return e=a(l),t=r[e]=i[e](l),{c(){t.c(),n=j()},m(o,d){r[e].m(o,d),b(o,n,d),s=!0},p(o,[d]){let u=e;e=a(o),e===u?r[e].p(o,d):(B(),h(r[u],1,1,()=>{r[u]=null}),I(),t=r[e],t?t.p(o,d):(t=r[e]=i[e](o),t.c()),g(t,1),t.m(n.parentNode,n))},i(o){s||(g(t),s=!0)},o(o){h(t),s=!1},d(o){o&&_(n),r[e].d(o)}}}function en(l,e,t){let{step:n}=e,{index:s}=e;return l.$$set=i=>{"step"in i&&t(0,n=i.step),"index"in i&&t(1,s=i.index)},[n,s]}class we extends W{constructor(e){super(),q(this,e,en,Zt,D,{step:0,index:1})}}we.__docgen={version:3,name:"Foreground.svelte",data:[{visibility:"public",description:null,keywords:[],name:"step",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"index",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function Qe(l,e,t){const n=l.slice();return n[3]=e[t],n[5]=t,n}function tn(l){let e,t,n,s;return e=new we({props:{step:l[3],index:l[5]}}),n=new ve({props:{step:l[3],index:l[5],backgroundWidth:l[2]}}),{c(){$(e.$$.fragment),t=A(),$(n.$$.fragment)},m(i,r){S(e,i,r),b(i,t,r),S(n,i,r),s=!0},p(i,r){const a={};r&1&&(a.step=i[3]),e.$set(a);const o={};r&1&&(o.step=i[3]),r&4&&(o.backgroundWidth=i[2]),n.$set(o)},i(i){s||(g(e.$$.fragment,i),g(n.$$.fragment,i),s=!0)},o(i){h(e.$$.fragment,i),h(n.$$.fragment,i),s=!1},d(i){i&&_(t),M(e,i),M(n,i)}}}function nn(l){let e,t,n,s,i;return e=new ve({props:{step:l[3],index:l[5],backgroundWidth:l[2]}}),n=new we({props:{step:l[3],index:l[5]}}),{c(){$(e.$$.fragment),t=A(),$(n.$$.fragment),s=A()},m(r,a){S(e,r,a),b(r,t,a),S(n,r,a),b(r,s,a),i=!0},p(r,a){const o={};a&1&&(o.step=r[3]),a&4&&(o.backgroundWidth=r[2]),e.$set(o);const d={};a&1&&(d.step=r[3]),n.$set(d)},i(r){i||(g(e.$$.fragment,r),g(n.$$.fragment,r),i=!0)},o(r){h(e.$$.fragment,r),h(n.$$.fragment,r),i=!1},d(r){r&&(_(t),_(s)),M(e,r),M(n,r)}}}function Xe(l){let e,t,n,s;const i=[nn,tn],r=[];function a(o,d){return o[1]==="bf"?0:1}return e=a(l),t=r[e]=i[e](l),{c(){t.c(),n=j()},m(o,d){r[e].m(o,d),b(o,n,d),s=!0},p(o,d){let u=e;e=a(o),e===u?r[e].p(o,d):(B(),h(r[u],1,1,()=>{r[u]=null}),I(),t=r[e],t?t.p(o,d):(t=r[e]=i[e](o),t.c()),g(t,1),t.m(n.parentNode,n))},i(o){s||(g(t),s=!0)},o(o){h(t),s=!1},d(o){o&&_(n),r[e].d(o)}}}function sn(l){let e,t,n=ne(l[0]),s=[];for(let r=0;r<n.length;r+=1)s[r]=Xe(Qe(l,n,r));const i=r=>h(s[r],1,1,()=>{s[r]=null});return{c(){for(let r=0;r<s.length;r+=1)s[r].c();e=j()},m(r,a){for(let o=0;o<s.length;o+=1)s[o]&&s[o].m(r,a);b(r,e,a),t=!0},p(r,[a]){if(a&7){n=ne(r[0]);let o;for(o=0;o<n.length;o+=1){const d=Qe(r,n,o);s[o]?(s[o].p(d,a),g(s[o],1)):(s[o]=Xe(d),s[o].c(),g(s[o],1),s[o].m(e.parentNode,e))}for(B(),o=n.length;o<s.length;o+=1)i(o);I()}},i(r){if(!t){for(let a=0;a<n.length;a+=1)g(s[a]);t=!0}},o(r){s=s.filter(Boolean);for(let a=0;a<s.length;a+=1)h(s[a]);t=!1},d(r){r&&_(e),ke(s,r)}}}function ln(l,e,t){let{steps:n=[]}=e,{embeddedLayout:s="fb"}=e,{backgroundWidth:i="fluid"}=e;return l.$$set=r=>{"steps"in r&&t(0,n=r.steps),"embeddedLayout"in r&&t(1,s=r.embeddedLayout),"backgroundWidth"in r&&t(2,i=r.backgroundWidth)},[n,s,i]}class _t extends W{constructor(e){super(),q(this,e,ln,sn,D,{steps:0,embeddedLayout:1,backgroundWidth:2})}}_t.__docgen={version:3,name:"index.svelte",data:[{visibility:"public",description:null,keywords:[],name:"steps",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"array",type:"array"}},{visibility:"public",description:null,keywords:[],name:"embeddedLayout",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"fb"},{visibility:"public",description:null,keywords:[],name:"backgroundWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"fluid"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function on(l){let e,t;return e=new oe({props:{width:"widest",class:"scroller-container embedded",id:l[0],$$slots:{default:[an]},$$scope:{ctx:l}}}),{c(){$(e.$$.fragment)},m(n,s){S(e,n,s),t=!0},p(n,s){const i={};s&1&&(i.id=n[0]),s&524422&&(i.$$scope={dirty:s,ctx:n}),e.$set(i)},i(n){t||(g(e.$$.fragment,n),t=!0)},o(n){h(e.$$.fragment,n),t=!1},d(n){M(e,n)}}}function rn(l){let e,t;return e=new oe({props:{width:"fluid",class:"scroller-container fmy-6 "+l[12],id:l[0],$$slots:{default:[fn]},$$scope:{ctx:l}}}),{c(){$(e.$$.fragment)},m(n,s){S(e,n,s),t=!0},p(n,s){const i={};s&4096&&(i.class="scroller-container fmy-6 "+n[12]),s&1&&(i.id=n[0]),s&585534&&(i.$$scope={dirty:s,ctx:n}),e.$set(i)},i(n){t||(g(e.$$.fragment,n),t=!0)},o(n){h(e.$$.fragment,n),t=!1},d(n){M(e,n)}}}function an(l){let e,t;return e=new _t({props:{steps:l[1],embeddedLayout:l[7],backgroundWidth:l[2]}}),{c(){$(e.$$.fragment)},m(n,s){S(e,n,s),t=!0},p(n,s){const i={};s&2&&(i.steps=n[1]),s&128&&(i.embeddedLayout=n[7]),s&4&&(i.backgroundWidth=n[2]),e.$set(i)},i(n){t||(g(e.$$.fragment,n),t=!0)},o(n){h(e.$$.fragment,n),t=!1},d(n){M(e,n)}}}function dn(l){let e,t;return e=new mt({props:{index:l[13],steps:l[1],preload:l[5],stackBackground:l[4]}}),{c(){$(e.$$.fragment)},m(n,s){S(e,n,s),t=!0},p(n,s){const i={};s&8192&&(i.index=n[13]),s&2&&(i.steps=n[1]),s&32&&(i.preload=n[5]),s&16&&(i.stackBackground=n[4]),e.$set(i)},i(n){t||(g(e.$$.fragment,n),t=!0)},o(n){h(e.$$.fragment,n),t=!1},d(n){M(e,n)}}}function un(l){let e,t,n,s;return n=new oe({props:{width:l[2],class:"background-container step-"+(l[13]+1)+" my-0 min-h-screen flex justify-center items-center relative",$$slots:{default:[dn]},$$scope:{ctx:l}}}),{c(){e=y("div"),t=y("div"),$(n.$$.fragment),p(t,"class","scroller-graphic-well w-full svelte-1osiuv5"),p(e,"slot","background"),p(e,"class","background min-h-screen relative p-0 flex justify-center svelte-1osiuv5"),p(e,"aria-hidden","true"),X(e,"right",l[3]==="left opposite"),X(e,"left",l[3]==="right opposite")},m(i,r){b(i,e,r),P(e,t),S(n,t,null),s=!0},p(i,r){const a={};r&4&&(a.width=i[2]),r&8192&&(a.class="background-container step-"+(i[13]+1)+" my-0 min-h-screen flex justify-center items-center relative"),r&532530&&(a.$$scope={dirty:r,ctx:i}),n.$set(a),(!s||r&8)&&X(e,"right",i[3]==="left opposite"),(!s||r&8)&&X(e,"left",i[3]==="right opposite")},i(i){s||(g(n.$$.fragment,i),s=!0)},o(i){h(n.$$.fragment,i),s=!1},d(i){i&&_(e),M(n)}}}function cn(l){let e,t,n,s;return t=new bt({props:{steps:l[1]}}),{c(){e=y("div"),$(t.$$.fragment),p(e,"slot","foreground"),p(e,"class",n="foreground "+l[3]+" w-full svelte-1osiuv5")},m(i,r){b(i,e,r),S(t,e,null),s=!0},p(i,r){const a={};r&2&&(a.steps=i[1]),t.$set(a),(!s||r&8&&n!==(n="foreground "+i[3]+" w-full svelte-1osiuv5"))&&p(e,"class",n)},i(i){s||(g(t.$$.fragment,i),s=!0)},o(i){h(t.$$.fragment,i),s=!1},d(i){i&&_(e),M(t)}}}function fn(l){let e,t,n,s,i;function r(u){l[16](u)}function a(u){l[17](u)}function o(u){l[18](u)}let d={threshold:l[8],top:l[9],bottom:l[10],parallax:l[11],query:"div.step-foreground-container",$$slots:{foreground:[cn],background:[un]},$$scope:{ctx:l}};return l[13]!==void 0&&(d.index=l[13]),l[14]!==void 0&&(d.offset=l[14]),l[15]!==void 0&&(d.progress=l[15]),e=new gt({props:d}),te.push(()=>me(e,"index",r)),te.push(()=>me(e,"offset",a)),te.push(()=>me(e,"progress",o)),{c(){$(e.$$.fragment)},m(u,c){S(e,u,c),i=!0},p(u,c){const f={};c&256&&(f.threshold=u[8]),c&512&&(f.top=u[9]),c&1024&&(f.bottom=u[10]),c&2048&&(f.parallax=u[11]),c&532542&&(f.$$scope={dirty:c,ctx:u}),!t&&c&8192&&(t=!0,f.index=u[13],be(()=>t=!1)),!n&&c&16384&&(n=!0,f.offset=u[14],be(()=>n=!1)),!s&&c&32768&&(s=!0,f.progress=u[15],be(()=>s=!1)),e.$set(f)},i(u){i||(g(e.$$.fragment,u),i=!0)},o(u){h(e.$$.fragment,u),i=!1},d(u){M(e,u)}}}function pn(l){let e,t,n,s;const i=[rn,on],r=[];function a(o,d){return o[6]?1:0}return e=a(l),t=r[e]=i[e](l),{c(){t.c(),n=j()},m(o,d){r[e].m(o,d),b(o,n,d),s=!0},p(o,[d]){let u=e;e=a(o),e===u?r[e].p(o,d):(B(),h(r[u],1,1,()=>{r[u]=null}),I(),t=r[e],t?t.p(o,d):(t=r[e]=i[e](o),t.c()),g(t,1),t.m(n.parentNode,n))},i(o){s||(g(t),s=!0)},o(o){h(t),s=!1},d(o){o&&_(n),r[e].d(o)}}}function gn(l,e,t){let{id:n=""}=e,{steps:s=[]}=e,{backgroundWidth:i="fluid"}=e,{foregroundPosition:r="middle"}=e,{stackBackground:a=!0}=e,{preload:o=1}=e,{embedded:d=!1}=e,{embeddedLayout:u="fb"}=e,{threshold:c=.5}=e,{top:f=0}=e,{bottom:v=1}=e,{parallax:T=!1}=e,{class:L=""}=e,R=0,F,C;function O(k){R=k,t(13,R)}function V(k){F=k,t(14,F)}function m(k){C=k,t(15,C)}return l.$$set=k=>{"id"in k&&t(0,n=k.id),"steps"in k&&t(1,s=k.steps),"backgroundWidth"in k&&t(2,i=k.backgroundWidth),"foregroundPosition"in k&&t(3,r=k.foregroundPosition),"stackBackground"in k&&t(4,a=k.stackBackground),"preload"in k&&t(5,o=k.preload),"embedded"in k&&t(6,d=k.embedded),"embeddedLayout"in k&&t(7,u=k.embeddedLayout),"threshold"in k&&t(8,c=k.threshold),"top"in k&&t(9,f=k.top),"bottom"in k&&t(10,v=k.bottom),"parallax"in k&&t(11,T=k.parallax),"class"in k&&t(12,L=k.class)},[n,s,i,r,a,o,d,u,c,f,v,T,L,R,F,C,O,V,m]}class Te extends W{constructor(e){super(),q(this,e,gn,pn,D,{id:0,steps:1,backgroundWidth:2,foregroundPosition:3,stackBackground:4,preload:5,embedded:6,embeddedLayout:7,threshold:8,top:9,bottom:10,parallax:11,class:12})}}Te.__docgen={version:3,name:"Scroller.svelte",data:[{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"ID of the scroller container",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"required",description:""}],visibility:"public",description:"An array of step objects that define the steps in your scroller.\n\nEach step object in the array can have:\n\n- `background` A background component. **REQUIRED**\n- `backgroundProps` An object of props given to the background component\n- `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**\n- `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**\n- `foregroundProps` An object of props given to the foreground component",name:"steps",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"array",type:"array"}},{keywords:[],visibility:"public",description:"Width of the background",name:"backgroundWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"fluid"},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:`Position of the foreground. One of: middle, left, right, left opposite or right opposite.
|
|
|
|
"opposite" options push the background to the other side on larger viewports.`,name:"foregroundPosition",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"middle"},{keywords:[],visibility:"public",description:"Whether previous background steps should stack below the current one.\n\n- `true` _default_ Background graphics from previous steps will remain visible below the active one, allowing you to stack graphics with transparent backgrounds.\n- `false` Only the background graphic from the current step will show and backgrounds from previous steps are hidden.",name:"stackBackground",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0},{keywords:[],visibility:"public",description:"How many background steps to load before and after the currently active one, effectively lazy-loading them.\n\nSetting to `0` disables lazy-loading and loads all backgrounds at once.",name:"preload",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:1},{keywords:[],visibility:"public",description:"Setting to `true` will unroll the scroll experience into a flat layout.",name:"embedded",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Layout order when `embedded` is `true`.\n\n- `fb` _default_ Foreground then background\n- `bf` Background then foreground",name:"embeddedLayout",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"fb"},{keywords:[],visibility:"public",description:"Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)",name:"threshold",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:.5},{keywords:[],visibility:"public",description:"Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)",name:"top",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{keywords:[],visibility:"public",description:"Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)",name:"bottom",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:1},{keywords:[],visibility:"public",description:"Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)",name:"parallax",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{visibility:"public",description:"Set a class to target with SCSS.",keywords:[{name:"type",description:"{string}"}],name:"class",kind:"const",static:!1,readonly:!0,type:{kind:"type",text:"string",type:"string"},localName:"cls",defaultValue:""}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function mn(l){let e,t;return{c(){e=y("div"),p(e,"class","step svelte-13llgxe"),p(e,"style",t=`background: ${l[0]};`)},m(n,s){b(n,e,s)},p(n,[s]){s&1&&t!==(t=`background: ${n[0]};`)&&p(e,"style",t)},i:E,o:E,d(n){n&&_(e)}}}function bn(l,e,t){let{colour:n="lightblue"}=e;return l.$$set=s=>{"colour"in s&&t(0,n=s.colour)},[n]}class J extends W{constructor(e){super(),q(this,e,bn,mn,D,{colour:0})}}J.__docgen={version:3,name:"Step.svelte",data:[{visibility:"public",description:null,keywords:[],name:"colour",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"lightblue"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function _n(l){let e,t,n,s,i,r,a,o,d;return{c(){e=y("h4"),e.textContent="Interactive step",t=A(),n=y("p"),s=je("The count is "),i=je(l[0]),r=A(),a=y("button"),a.textContent="Click Me"},m(u,c){b(u,e,c),b(u,t,c),b(u,n,c),P(n,s),P(n,i),b(u,r,c),b(u,a,c),o||(d=ft(a,"click",l[1]),o=!0)},p(u,[c]){c&1&&$t(i,u[0])},i:E,o:E,d(u){u&&(_(e),_(t),_(n),_(r),_(a)),o=!1,d()}}}function hn(l,e,t){let{count:n=0}=e;const s=()=>{t(0,n+=1)};return l.$$set=i=>{"count"in i&&t(0,n=i.count)},[n,s]}class he extends W{constructor(e){super(),q(this,e,hn,_n,D,{count:0})}}he.__docgen={version:3,name:"InteractiveForeground.svelte",data:[{visibility:"public",description:null,keywords:[],name:"count",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 kn=""+new URL("step-1-xl-9e8e4a9f.png",import.meta.url).href,yn=""+new URL("step-1-lg-a4a93d00.png",import.meta.url).href,vn=""+new URL("step-1-md-3e07fd88.png",import.meta.url).href,wn=""+new URL("step-1-sm-5699114a.png",import.meta.url).href,Tn=""+new URL("step-1-xs-fafe3058.png",import.meta.url).href;function Ye(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 50% 0;"></div> <div id="g-step-1-xl-img" class="g-aiImg svelte-16iuhg" alt="" style="background-image: url(${kn});"></div>`,p(e,"id","g-step-1-xl"),p(e,"class","g-artboard svelte-16iuhg"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function xe(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.3763% 0;"></div> <div id="g-step-1-lg-img" class="g-aiImg svelte-16iuhg" alt="" style="background-image: url(${yn});"></div>`,p(e,"id","g-step-1-lg"),p(e,"class","g-artboard svelte-16iuhg"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function Je(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.7576% 0;"></div> <div id="g-step-1-md-img" class="g-aiImg svelte-16iuhg" alt="" style="background-image: url(${vn});"></div>`,p(e,"id","g-step-1-md"),p(e,"class","g-artboard svelte-16iuhg"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function Ze(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 49.6078% 0;"></div> <div id="g-step-1-sm-img" class="g-aiImg svelte-16iuhg" alt="" style="background-image: url(${wn});"></div>`,p(e,"id","g-step-1-sm"),p(e,"class","g-artboard svelte-16iuhg"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function et(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.4545% 0;"></div> <div id="g-step-1-xs-img" class="g-aiImg svelte-16iuhg" alt="" style="background-image: url(${Tn});"></div>`,p(e,"id","g-step-1-xs"),p(e,"class","g-artboard svelte-16iuhg"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function $n(l){let e,t,n,s,i,r,a=l[0]&&l[0]>=1200&&Ye(),o=l[0]&&l[0]>=930&&l[0]<1200&&xe(),d=l[0]&&l[0]>=660&&l[0]<930&&Je(),u=l[0]&&l[0]>=510&&l[0]<660&&Ze(),c=l[0]&&l[0]>=0&&l[0]<510&&et();return{c(){e=y("div"),a&&a.c(),t=A(),o&&o.c(),n=A(),d&&d.c(),s=A(),u&&u.c(),i=A(),c&&c.c(),p(e,"id","g-step-1-box"),p(e,"class","svelte-16iuhg"),ue(()=>l[1].call(e))},m(f,v){b(f,e,v),a&&a.m(e,null),P(e,t),o&&o.m(e,null),P(e,n),d&&d.m(e,null),P(e,s),u&&u.m(e,null),P(e,i),c&&c.m(e,null),r=ye(e,l[1].bind(e))},p(f,[v]){f[0]&&f[0]>=1200?a||(a=Ye(),a.c(),a.m(e,t)):a&&(a.d(1),a=null),f[0]&&f[0]>=930&&f[0]<1200?o||(o=xe(),o.c(),o.m(e,n)):o&&(o.d(1),o=null),f[0]&&f[0]>=660&&f[0]<930?d||(d=Je(),d.c(),d.m(e,s)):d&&(d.d(1),d=null),f[0]&&f[0]>=510&&f[0]<660?u||(u=Ze(),u.c(),u.m(e,i)):u&&(u.d(1),u=null),f[0]&&f[0]>=0&&f[0]<510?c||(c=et(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},i:E,o:E,d(f){f&&_(e),a&&a.d(),o&&o.d(),d&&d.d(),u&&u.d(),c&&c.d(),r()}}}function Sn(l,e,t){let n;function s(){n=this.clientWidth,t(0,n)}return[n,s]}class $e extends W{constructor(e){super(),q(this,e,Sn,$n,D,{})}}$e.__docgen={version:3,name:"ai-scroller-1.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const Mn=""+new URL("step-2-xl-b45d096c.png",import.meta.url).href,An=""+new URL("step-2-lg-30b1e0ad.png",import.meta.url).href,Pn=""+new URL("step-2-md-d6773993.png",import.meta.url).href,Ln=""+new URL("step-2-sm-3eafa6a0.png",import.meta.url).href,Bn=""+new URL("step-2-xs-f1632acb.png",import.meta.url).href;function tt(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 50% 0;"></div> <div id="g-step-2-xl-img" class="g-aiImg svelte-17g09mo" style="background-image: url(${Mn});"></div> <div id="g-ai0-1" class="g-annotation g-aiAbs g-aiPointText svelte-17g09mo" style="top:26.183%;margin-top:-21.1px;left:55.6774%;width:180px;"><p class="g-pstyle0 svelte-17g09mo">This thing here is</p> <p class="g-pstyle0 svelte-17g09mo">particularly important</p></div>`,p(e,"id","g-step-2-xl"),p(e,"class","g-artboard svelte-17g09mo"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function nt(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.3763% 0;"></div> <div id="g-step-2-lg-img" class="g-aiImg svelte-17g09mo" style="background-image: url(${An});"></div> <div id="g-ai1-1" class="g-annotation g-aiAbs g-aiPointText svelte-17g09mo" style="top:25.8206%;margin-top:-21px;left:56.2692%;width:162px;"><p class="g-pstyle0 svelte-17g09mo">This thing here is</p> <p class="g-pstyle0 svelte-17g09mo">particularly important</p></div>`,p(e,"id","g-step-2-lg"),p(e,"class","g-artboard svelte-17g09mo"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function st(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.7576% 0;"></div> <div id="g-step-2-md-img" class="g-aiImg svelte-17g09mo" style="background-image: url(${Pn});"></div> <div id="g-ai2-1" class="g-annotation g-aiAbs g-aiPointText svelte-17g09mo" style="top:47.5478%;margin-top:-21px;left:32.4915%;width:162px;"><p class="g-pstyle0 svelte-17g09mo">This thing here is</p> <p class="g-pstyle0 svelte-17g09mo">particularly important</p></div>`,p(e,"id","g-step-2-md"),p(e,"class","g-artboard svelte-17g09mo"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function lt(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 49.6078% 0;"></div> <div id="g-step-2-sm-img" class="g-aiImg svelte-17g09mo" style="background-image: url(${Ln});"></div> <div id="g-ai3-1" class="g-annotation g-aiAbs g-aiPointText svelte-17g09mo" style="top:55.3265%;margin-top:-21px;left:30.7585%;width:162px;"><p class="g-pstyle0 svelte-17g09mo">This thing here is</p> <p class="g-pstyle0 svelte-17g09mo">particularly important</p></div>`,p(e,"id","g-step-2-sm"),p(e,"class","g-artboard svelte-17g09mo"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function ot(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.4545% 0;"></div> <div id="g-step-2-xs-img" class="g-aiImg svelte-17g09mo" style="background-image: url(${Bn});"></div> <div id="g-ai4-1" class="g-annotation g-aiAbs g-aiPointText svelte-17g09mo" style="top:22.3913%;margin-top:-21px;left:52.5519%;width:162px;"><p class="g-pstyle0 svelte-17g09mo">This thing here is</p> <p class="g-pstyle0 svelte-17g09mo">particularly important</p></div>`,p(e,"id","g-step-2-xs"),p(e,"class","g-artboard svelte-17g09mo"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function In(l){let e,t,n,s,i,r,a=l[0]&&l[0]>=1200&&tt(),o=l[0]&&l[0]>=930&&l[0]<1200&&nt(),d=l[0]&&l[0]>=660&&l[0]<930&&st(),u=l[0]&&l[0]>=510&&l[0]<660&<(),c=l[0]&&l[0]>=0&&l[0]<510&&ot();return{c(){e=y("div"),a&&a.c(),t=A(),o&&o.c(),n=A(),d&&d.c(),s=A(),u&&u.c(),i=A(),c&&c.c(),p(e,"id","g-step-2-box"),p(e,"class","svelte-17g09mo"),ue(()=>l[1].call(e))},m(f,v){b(f,e,v),a&&a.m(e,null),P(e,t),o&&o.m(e,null),P(e,n),d&&d.m(e,null),P(e,s),u&&u.m(e,null),P(e,i),c&&c.m(e,null),r=ye(e,l[1].bind(e))},p(f,[v]){f[0]&&f[0]>=1200?a||(a=tt(),a.c(),a.m(e,t)):a&&(a.d(1),a=null),f[0]&&f[0]>=930&&f[0]<1200?o||(o=nt(),o.c(),o.m(e,n)):o&&(o.d(1),o=null),f[0]&&f[0]>=660&&f[0]<930?d||(d=st(),d.c(),d.m(e,s)):d&&(d.d(1),d=null),f[0]&&f[0]>=510&&f[0]<660?u||(u=lt(),u.c(),u.m(e,i)):u&&(u.d(1),u=null),f[0]&&f[0]>=0&&f[0]<510?c||(c=ot(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},i:E,o:E,d(f){f&&_(e),a&&a.d(),o&&o.d(),d&&d.d(),u&&u.d(),c&&c.d(),r()}}}function Cn(l,e,t){let n=null;function s(){n=this.clientWidth,t(0,n)}return[n,s]}class Se extends W{constructor(e){super(),q(this,e,Cn,In,D,{})}}Se.__docgen={version:3,name:"ai-scroller-2.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const Wn=""+new URL("step-3-xl-3bb2d2b2.png",import.meta.url).href,qn=""+new URL("step-3-lg-2dc740ea.png",import.meta.url).href,Dn=""+new URL("step-3-md-58a32062.png",import.meta.url).href,jn=""+new URL("step-3-sm-7a5146ca.png",import.meta.url).href,Rn=""+new URL("step-3-xs-c074a791.png",import.meta.url).href;function rt(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 50% 0;"></div> <div id="g-step-3-xl-img" class="g-aiImg svelte-qh37gt" style="background-image: url(${Wn});"></div> <div id="g-ai0-1" class="g-step-3 g-aiAbs g-aiPointText svelte-qh37gt" style="top:19.683%;margin-top:-21.1px;left:54.3441%;width:130px;"><p class="g-pstyle0 svelte-qh37gt">Something</p> <p class="g-pstyle0 svelte-qh37gt">happened here</p></div>`,p(e,"id","g-step-3-xl"),p(e,"class","g-artboard svelte-qh37gt"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function it(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.3763% 0;"></div> <div id="g-step-3-lg-img" class="g-aiImg svelte-qh37gt" style="background-image: url(${qn});"></div> <div id="g-ai1-1" class="g-step-3 g-aiAbs g-aiPointText svelte-qh37gt" style="top:27.5682%;margin-top:-21px;left:54.9127%;width:118px;"><p class="g-pstyle0 svelte-qh37gt">Something</p> <p class="g-pstyle0 svelte-qh37gt">happened here</p></div>`,p(e,"id","g-step-3-lg"),p(e,"class","g-artboard svelte-qh37gt"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function at(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.7576% 0;"></div> <div id="g-step-3-md-img" class="g-aiImg svelte-qh37gt" style="background-image: url(${Dn});"></div> <div id="g-ai2-1" class="g-step-3 g-aiAbs g-aiPointText svelte-qh37gt" style="top:23.3631%;margin-top:-21px;left:50.4963%;width:118px;"><p class="g-pstyle0 svelte-qh37gt">Something</p> <p class="g-pstyle0 svelte-qh37gt">happened here</p></div>`,p(e,"id","g-step-3-md"),p(e,"class","g-artboard svelte-qh37gt"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function dt(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 49.6078% 0;"></div> <div id="g-step-3-sm-img" class="g-aiImg svelte-qh37gt" style="background-image: url(${jn});"></div> <div id="g-ai3-1" class="g-step-3 g-aiAbs g-aiPointText svelte-qh37gt" style="top:20.1486%;margin-top:-21px;left:55.7925%;width:118px;"><p class="g-pstyle0 svelte-qh37gt">Something</p> <p class="g-pstyle0 svelte-qh37gt">happened here</p></div>`,p(e,"id","g-step-3-sm"),p(e,"class","g-artboard svelte-qh37gt"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function ut(l){let e;return{c(){e=y("div"),e.innerHTML=`<div style="padding: 0 0 55.4545% 0;"></div> <div id="g-step-3-xs-img" class="g-aiImg svelte-qh37gt" style="background-image: url(${Rn});"></div> <div id="g-ai4-1" class="g-step-3 g-aiAbs g-aiPointText svelte-qh37gt" style="top:42.0634%;margin-top:-21px;left:27.3523%;width:118px;"><p class="g-pstyle0 svelte-qh37gt">Something</p> <p class="g-pstyle0 svelte-qh37gt">happened here</p></div>`,p(e,"id","g-step-3-xs"),p(e,"class","g-artboard svelte-qh37gt"),p(e,"style","")},m(t,n){b(t,e,n)},d(t){t&&_(e)}}}function Vn(l){let e,t,n,s,i,r,a=l[0]&&l[0]>=1200&&rt(),o=l[0]&&l[0]>=930&&l[0]<1200&&it(),d=l[0]&&l[0]>=660&&l[0]<930&&at(),u=l[0]&&l[0]>=510&&l[0]<660&&dt(),c=l[0]&&l[0]>=0&&l[0]<510&&ut();return{c(){e=y("div"),a&&a.c(),t=A(),o&&o.c(),n=A(),d&&d.c(),s=A(),u&&u.c(),i=A(),c&&c.c(),p(e,"id","g-step-3-box"),p(e,"class","svelte-qh37gt"),ue(()=>l[1].call(e))},m(f,v){b(f,e,v),a&&a.m(e,null),P(e,t),o&&o.m(e,null),P(e,n),d&&d.m(e,null),P(e,s),u&&u.m(e,null),P(e,i),c&&c.m(e,null),r=ye(e,l[1].bind(e))},p(f,[v]){f[0]&&f[0]>=1200?a||(a=rt(),a.c(),a.m(e,t)):a&&(a.d(1),a=null),f[0]&&f[0]>=930&&f[0]<1200?o||(o=it(),o.c(),o.m(e,n)):o&&(o.d(1),o=null),f[0]&&f[0]>=660&&f[0]<930?d||(d=at(),d.c(),d.m(e,s)):d&&(d.d(1),d=null),f[0]&&f[0]>=510&&f[0]<660?u||(u=dt(),u.c(),u.m(e,i)):u&&(u.d(1),u=null),f[0]&&f[0]>=0&&f[0]<510?c||(c=ut(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},i:E,o:E,d(f){f&&_(e),a&&a.d(),o&&o.d(),d&&d.d(),u&&u.d(),c&&c.d(),r()}}}function Un(l,e,t){let n=null;function s(){n=this.clientWidth,t(0,n)}return[n,s]}class Me extends W{constructor(e){super(),q(this,e,Un,Vn,D,{})}}Me.__docgen={version:3,name:"ai-scroller-3.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const ct=(l,e,t="")=>({id:l.ID,backgroundWidth:l.Width,foregroundPosition:l.ForegroundPosition,stackBackground:l.StackBackground==="true"||!l.StackBackground,embeddedLayout:l.EmbeddedLayout,preload:l.Preload&&parseInt(l.Preload)||1,steps:l.Steps.map(n=>({background:e[n.Background],backgroundProps:{assetsPath:t},foreground:n.Text,altText:n.AltText}))});function Fn(l){let e,t;const n=[l[3]];let s={};for(let i=0;i<n.length;i+=1)s=z(s,n[i]);return e=new Te({props:s}),{c(){$(e.$$.fragment)},m(i,r){S(e,i,r),t=!0},p(i,r){const a=r&8?U(n,[H(i[3])]):{};e.$set(a)},i(i){t||(g(e.$$.fragment,i),t=!0)},o(i){h(e.$$.fragment,i),t=!1},d(i){M(e,i)}}}function Nn(l){let e,t,n,s,i,r,a,o,d,u,c,f;const v=[{title:"Components/Scroller"},{component:Te},l[2]];let T={};for(let m=0;m<v.length;m+=1)T=z(T,v[m]);e=new Mt({props:T}),n=new At({props:{$$slots:{default:[Fn,({args:m})=>({3:m}),({args:m})=>m?8:0]},$$scope:{ctx:l}}}),i=new ae({props:{name:"Default",args:{steps:[{background:J,backgroundProps:{colour:"red"},foreground:`#### Step 1
|
|
|
|
Lorem ipsum red`,altText:"Red background"},{background:J,backgroundProps:{colour:"blue"},foreground:`#### Step 2
|
|
|
|
Lorem ipsum blue`,altText:"Blue background"},{background:J,backgroundProps:{colour:"green"},foreground:`#### Step 3
|
|
|
|
Lorem ipsum green`,altText:"Green background"}],foregroundPosition:"middle",backgroundWidth:"fluid",embeddedLayout:"fb",embedded:!1}}});const L=[{name:"🚀 QUICKIT"},{args:ct(l[1],l[0])},_e(Wt)];let R={};for(let m=0;m<L.length;m+=1)R=z(R,L[m]);a=new ae({props:R});const F=[{name:"Foreground components"},{args:{steps:[{background:J,backgroundProps:{colour:"red"},foreground:he},{background:J,backgroundProps:{colour:"blue"},foreground:`#### Step 2
|
|
|
|
Lorem ipsum blue`},{background:J,backgroundProps:{colour:"green"},foreground:he,foregroundProps:{count:100}}],foregroundPosition:"middle",backgroundWidth:"fluid",embeddedLayout:"fb",embedded:!1}},_e(It)];let C={};for(let m=0;m<F.length;m+=1)C=z(C,F[m]);d=new ae({props:C});const O=[{name:"Ai2svelte"},{args:{steps:[{background:$e,backgroundProps:{colour:"red"},foreground:`#### Step 1
|
|
|
|
Lorem ipsum`,altText:"A map showing the Upper West side in New York City."},{background:Se,backgroundProps:{colour:"blue"},foreground:`#### Step 2
|
|
|
|
Lorem ipsum`,altText:"The same map now highlights 98th Street where something interesting happened."},{background:Me,backgroundProps:{colour:"green"},foreground:`#### Step 3
|
|
|
|
Lorem ipsum`,altText:"The same map now highlights three locations near 98th Street where something particulary important happened."}],foregroundPosition:"middle",backgroundWidth:"fluid",embeddedLayout:"fb",embedded:!1}},_e(Ct)];let V={};for(let m=0;m<O.length;m+=1)V=z(V,O[m]);return c=new ae({props:V}),{c(){$(e.$$.fragment),t=A(),$(n.$$.fragment),s=A(),$(i.$$.fragment),r=A(),$(a.$$.fragment),o=A(),$(d.$$.fragment),u=A(),$(c.$$.fragment)},m(m,k){S(e,m,k),b(m,t,k),S(n,m,k),b(m,s,k),S(i,m,k),b(m,r,k),S(a,m,k),b(m,o,k),S(d,m,k),b(m,u,k),S(c,m,k),f=!0},p(m,[k]){const ie=k&4?U(v,[v[0],v[1],H(m[2])]):{};e.$set(ie);const K={};k&24&&(K.$$scope={dirty:k,ctx:m}),n.$set(K);const G=k&3?U(L,[L[0],{args:ct(m[1],m[0])},L[2]]):{};a.$set(G);const Q={};d.$set(Q);const x={};c.$set(x)},i(m){f||(g(e.$$.fragment,m),g(n.$$.fragment,m),g(i.$$.fragment,m),g(a.$$.fragment,m),g(d.$$.fragment,m),g(c.$$.fragment,m),f=!0)},o(m){h(e.$$.fragment,m),h(n.$$.fragment,m),h(i.$$.fragment,m),h(a.$$.fragment,m),h(d.$$.fragment,m),h(c.$$.fragment,m),f=!1},d(m){m&&(_(t),_(s),_(r),_(o),_(u)),M(e,m),M(n,m),M(i,m),M(a,m),M(d,m),M(c,m)}}}function En(l){const e={AiMap1:$e,AiMap2:Se,AiMap3:Me},t={Type:"scroller",Width:"fluid",ForegroundPosition:"middle",ID:"my-scroller",StackBackground:"true",Steps:[{Background:"AiMap1",Text:`#### Step 1
|
|
|
|
Lorem ipsum`,AltText:"A map showing the Upper West side in New York City."},{Background:"AiMap2",Text:`#### Step 2
|
|
|
|
Lorem ipsum`,AltText:"The same map now highlights 98th Street."},{Background:"AiMap3",Text:`#### Step 3
|
|
|
|
Lorem ipsum`,AltText:"The same map now highlights three locations near 98th Street where something particulary important happened."}]},n={...Lt(Bt),argTypes:{steps:{control:!1},backgroundWidth:{control:"select",options:["normal","wide","wider","widest","fluid"]},foregroundPosition:{control:"select",options:["middle","left","right","left opposite","right opposite"]},embeddedLayout:{control:"select",options:["fb","bf"]}}};return[e,t,n]}class Hn extends W{constructor(e){super(),q(this,e,En,Nn,D,{})}}const re=St(Hn,{meta:{title:"Components/Scroller"},stories:{"tpl:default":{name:"default",template:!0,source:"<Scroller {...args} />",hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1},QUICKIT:{name:"🚀 QUICKIT",template:!1,source:"",hasArgs:!1},ForegroundComponents:{name:"Foreground components",template:!1,source:"",hasArgs:!1},Ai2svelte:{name:"Ai2svelte",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","interactiveDocs","ai2svelteDocs","quickitDocs","Scroller","BasicStep","InteractiveForeground","AiMap1","AiMap2","AiMap3","withComponentDocs","withStoryDocs","getScrollerPropsFromDoc"]}),ts=re.meta,ns=["Default","QUICKIT","ForegroundComponents","Ai2svelte"],ss=re.stories.Default,ls=re.stories.QUICKIT,os=re.stories.ForegroundComponents,rs=re.stories.Ai2svelte;export{rs as Ai2svelte,ss as Default,os as ForegroundComponents,ls as QUICKIT,ns as __namedExportsOrder,ts as default};
|
|
//# sourceMappingURL=Scroller.stories-11e4ebfe.js.map
|