hypnagaga/packages/graphics-components/docs/assets/Scroller.stories-Dkiataa7.js

import{p as w,c as R,a,f as l,s as $,n as be}from"./props-b4vEeO_8.js";import{C as P,k as i,I as v,J as x,F as d,B as E,N as ie,G as H,a3 as z,a4 as G,D as V}from"./runtime-C3rQLW--.js";import{i as he}from"./lifecycle-F2p_Qkk3.js";import{c as ke,d as xe}from"./create-runtime-stories-7AWWVphH.js";import{i as b,c as Q,s as _e}from"./svelte-component-C8Ginrj8.js";import{a as I}from"./attributes-Cg6aLqN3.js";import{S as we}from"./ScrollerBase-DJMKplMV.js";import{e as se,i as ae}from"./each-CVpBMMjG.js";import{M as j}from"./Markdown-DUxFwijc.js";import{B as D}from"./Block-D3Ui8rd-.js";import{s as T}from"./style-DvJ3IcV1.js";import{b as J}from"./size-DMdj3-I9.js";var Se=l("<div><!></div>");function oe(h,e){let n=w(e,"preload",3,1),u=w(e,"stackBackground",3,!0);function f(c){return n()===0?!0:u()?c>=0:c>=e.index-n()&&c<=e.index+n()}function o(c){return u()?c<=e.index:c===e.index}var m=R(),p=P(m);se(p,17,()=>e.steps,ae,(c,k,_)=>{var g=R(),y=P(g);{var t=r=>{var s=Se();let S;var A=v(s);Q(A,()=>i(k).background,(C,q)=>{q(C,$(()=>i(k).backgroundProps||{}))}),x(C=>S=I(s,1,`step-background step-${_+1} w-full absolute`,"svelte-1br3mgv",S,C),[()=>({visible:o(_),invisible:!o(_)})]),a(r,s)};b(y,r=>{f(_)&&r(t)})}a(c,g)}),a(h,m)}oe.__docgen={data:[{name:"index",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1},{name:"steps",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"array",text:"ScrollerStep[]"},static:!1,readonly:!1},{name:"preload",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"1"},{name:"stackBackground",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"true"}],name:"Background.svelte"};var Te=l('<div class="background-alt-text visually-hidden"><!></div>'),Pe=l('<div class="empty-step-foreground"></div> <!>',1),qe=l('<div class="background-alt-text visually-hidden"><!></div>'),Le=l('<div class="step-foreground w-full svelte-ev98g2"><!></div> <!>',1),Be=l("<div><!></div>");function ne(h,e){var n=R(),u=P(n);se(u,17,()=>e.steps,ae,(f,o,m)=>{var p=Be();I(p,1,`step-foreground-container step-${m+1} mb-20 h-screen flex items-center justify-center`,"svelte-ev98g2");var c=v(p);{var k=g=>{var y=Pe(),t=d(P(y),2);{var r=s=>{var S=Te(),A=v(S);j(A,{get source(){return i(o).altText}}),a(s,S)};b(t,s=>{typeof i(o).altText=="string"&&s(r)})}a(g,y)},_=g=>{var y=Le(),t=P(y),r=v(t);{var s=q=>{j(q,{get source(){return i(o).foreground}})},S=q=>{var B=R(),L=P(B);Q(L,()=>i(o).foreground,(U,Z)=>{Z(U,$(()=>i(o).foregroundProps||{}))}),a(q,B)};b(r,q=>{typeof i(o).foreground=="string"?q(s):q(S,!1)})}var A=d(t,2);{var C=q=>{var B=qe(),L=v(B);j(L,{get source(){return i(o).altText}}),a(q,B)};b(A,q=>{typeof i(o).altText=="string"&&q(C)})}a(g,y)};b(c,g=>{i(o).foreground===""||!i(o).foreground?g(k):g(_,!1)})}a(f,p)}),a(h,n)}ne.__docgen={data:[{name:"steps",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"array",text:"ScrollerStep[]"},static:!1,readonly:!1}],name:"Foreground.svelte"};var Ae=l('<div aria-hidden="true"><!></div>');function ee(h,e){E(e,!0);{let n=ie(()=>e.index+1);D(h,{get width(){return e.backgroundWidth},get class(){return`background-container step-${i(n)??""}`},children:(u,f)=>{var o=Ae(),m=v(o);Q(m,()=>e.step.background,(p,c)=>{c(p,$(()=>e.step.backgroundProps||{}))}),x(()=>I(o,1,`embedded-background step-${e.index+1}`)),a(u,o)},$$slots:{default:!0}})}H()}ee.__docgen={data:[{name:"step",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"object",text:"ScrollerStep"},static:!1,readonly:!1},{name:"backgroundWidth",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"narrower",text:'"narrower"'},{kind:"const",type:"string",value:"narrow",text:'"narrow"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"narrower" | "narrow" | "normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1},{name:"index",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1}],name:"Background.svelte"};var Ce=l('<div class="background-alt-text visually-hidden"><!></div>'),Me=l("<div></div> <!>",1),Re=l('<div class="background-alt-text visually-hidden"><!></div>'),Ie=l("<div><!></div> <!>",1),Ue=l("<div><!></div>");function te(h,e){E(e,!0);var n=R(),u=P(n);{var f=m=>{var p=Me(),c=P(p),k=d(c,2);{var _=g=>{var y=Ce(),t=v(y);j(t,{get source(){return e.step.altText}}),a(g,y)};b(k,g=>{typeof e.step.altText=="string"&&g(_)})}x(()=>I(c,1,`empty-step-foreground step-${e.index+1}`,"svelte-inlwgk")),a(m,p)},o=m=>{var p=R(),c=P(p);{var k=g=>{{let y=ie(()=>e.index+1);D(g,{get class(){return`body-text step-${i(y)??""}`},children:(t,r)=>{var s=Ie(),S=P(s),A=v(S);j(A,{get source(){return e.step.foreground}});var C=d(S,2);{var q=B=>{var L=Re(),U=v(L);j(U,{get source(){return e.step.altText}}),a(B,L)};b(C,B=>{typeof e.step.altText=="string"&&B(q)})}x(()=>I(S,1,`embedded-foreground step-${e.index+1}`,"svelte-inlwgk")),a(t,s)},$$slots:{default:!0}})}},_=g=>{var y=Ue(),t=v(y);Q(t,()=>e.step.foreground,(r,s)=>{s(r,$(()=>e.step.foregroundProps||{}))}),x(()=>I(y,1,`embedded-foreground step-${e.index+1}`,"svelte-inlwgk")),a(g,y)};b(c,g=>{typeof e.step.foreground=="string"?g(k):g(_,!1)},!0)}a(m,p)};b(u,m=>{e.step.foreground===""||!e.step.foreground?m(f):m(o,!1)})}a(h,n),H()}te.__docgen={data:[{name:"step",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"object",text:"ScrollerStep"},static:!1,readonly:!1},{name:"index",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1}],name:"Foreground.svelte"};var Fe=l("<!> <!>",1),We=l("<!> <!>",1);function de(h,e){let n=w(e,"embeddedLayout",3,"fb"),u=w(e,"backgroundWidth",3,"fluid");var f=R(),o=P(f);se(o,17,()=>e.steps,ae,(m,p,c)=>{var k=R(),_=P(k);{var g=t=>{var r=Fe(),s=P(r);ee(s,{get step(){return i(p)},index:c,get backgroundWidth(){return u()}});var S=d(s,2);te(S,{get step(){return i(p)},index:c}),a(t,r)},y=t=>{var r=We(),s=P(r);te(s,{get step(){return i(p)},index:c});var S=d(s,2);ee(S,{get step(){return i(p)},index:c,get backgroundWidth(){return u()}}),a(t,r)};b(_,t=>{n()==="bf"?t(g):t(y,!1)})}a(m,k)}),a(h,f)}de.__docgen={data:[{name:"steps",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"array",text:"ScrollerStep[]"},static:!1,readonly:!1},{name:"embeddedLayout",visibility:"public",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"fb",text:'"fb"'},{kind:"const",type:"string",value:"bf",text:'"bf"'}],text:'"fb" | "bf"'},static:!1,readonly:!1,defaultValue:'"fb"'},{name:"backgroundWidth",visibility:"public",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"narrower",text:'"narrower"'},{kind:"const",type:"string",value:"narrow",text:'"narrow"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"narrower" | "narrow" | "normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1,defaultValue:'"fluid"'}],name:"index.svelte"};var Ve=l('<div aria-hidden="true"><div class="scroller-graphic-well w-full svelte-1osiuv5"><!></div></div>'),je=l("<div><!></div>");function N(h,e){E(e,!0);let n=w(e,"id",3,""),u=w(e,"backgroundWidth",3,"fluid"),f=w(e,"foregroundPosition",3,"middle"),o=w(e,"stackBackground",3,!0),m=w(e,"preload",3,1),p=w(e,"embedded",3,!1),c=w(e,"embeddedLayout",3,"fb"),k=w(e,"threshold",3,.5),_=w(e,"top",3,0),g=w(e,"bottom",3,1),y=w(e,"parallax",3,!1),t=w(e,"class",3,""),r=w(e,"index",15,0),s=w(e,"offset",15,0),S=w(e,"progress",15,0);var A=R(),C=P(A);{var q=L=>{D(L,{width:"fluid",get class(){return`scroller-container fmy-6 ${t()??""}`},get id(){return n()},children:(U,Z)=>{we(U,{get threshold(){return k()},get top(){return _()},get bottom(){return g()},get parallax(){return y()},query:"div.step-foreground-container",get index(){return r()},set index(M){r(M)},get offset(){return s()},set offset(M){s(M)},get progress(){return S()},set progress(M){S(M)},backgroundSnippet:M=>{var F=Ve();let X;var me=v(F),fe=v(me);{let K=ie(()=>r()+1);D(fe,{get width(){return u()},get class(){return`background-container step-${i(K)??""} my-0 min-h-screen flex justify-center items-center relative`},children:(ye,Rt)=>{oe(ye,{get index(){return r()},get steps(){return e.steps},get preload(){return m()},get stackBackground(){return o()}})},$$slots:{default:!0}})}x(K=>X=I(F,1,"background min-h-screen relative p-0 flex justify-center svelte-1osiuv5",null,X,K),[()=>({right:f()==="left opposite",left:f()==="right opposite"})]),a(M,F)},foregroundSnippet:M=>{var F=je(),X=v(F);ne(X,{get steps(){return e.steps}}),x(()=>I(F,1,`foreground ${f()??""} w-full`,"svelte-1osiuv5")),a(M,F)},$$slots:{backgroundSnippet:!0,foregroundSnippet:!0}})},$$slots:{default:!0}})},B=L=>{D(L,{width:"widest",class:"scroller-container embedded",get id(){return n()},children:(U,Z)=>{de(U,{get steps(){return e.steps},get embeddedLayout(){return c()},get backgroundWidth(){return u()}})},$$slots:{default:!0}})};b(C,L=>{p()?L(B,!1):L(q)})}a(h,A),H()}N.__docgen={data:[{name:"steps",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` Optional props for background component.\n- `foreground` A component or markdown-formatted string. **REQUIRED**\n- `foregroundProps` Optional props for foreground component.\n- `altText` Optional alt text for the background, read aloud after the foreground text. You can add it to each step or just to the first step to describe the entire scroller graphic. **RECOMMENDED**",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"array",text:"ScrollerStep[]"},static:!1,readonly:!1},{name:"backgroundWidth",visibility:"public",description:"Width of the background",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"narrower",text:'"narrower"'},{kind:"const",type:"string",value:"narrow",text:'"narrow"'},{kind:"const",type:"string",value:"normal",text:'"normal"'},{kind:"const",type:"string",value:"wide",text:'"wide"'},{kind:"const",type:"string",value:"wider",text:'"wider"'},{kind:"const",type:"string",value:"widest",text:'"widest"'},{kind:"const",type:"string",value:"fluid",text:'"fluid"'}],text:'"narrower" | "narrow" | "normal" | "wide" | "wider" | "widest" | "fluid"'},static:!1,readonly:!1,defaultValue:'"fluid"'},{name:"foregroundPosition",visibility:"public",description:"Position of the foreground",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"middle",text:'"middle"'},{kind:"const",type:"string",value:"left",text:'"left"'},{kind:"const",type:"string",value:"right",text:'"right"'},{kind:"const",type:"string",value:"left opposite",text:'"left opposite"'},{kind:"const",type:"string",value:"right opposite",text:'"right opposite"'}],text:'"middle" | "left" | "right" | "left opposite" | "right opposite"'},static:!1,readonly:!1,defaultValue:'"middle"'},{name:"stackBackground",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.",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"true"},{name:"preload",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.",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"1"},{name:"embedded",visibility:"public",description:"Setting to `true` will unroll the scroll experience into a flat layout",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"embeddedLayout",visibility:"public",description:"Layout order when `embedded` is `true`.\n\n- `fb` _default_ Foreground then background\n- `bf` Background then foreground",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"fb",text:'"fb"'},{kind:"const",type:"string",value:"bf",text:'"bf"'}],text:'"fb" | "bf"'},static:!1,readonly:!1,defaultValue:'"fb"'},{name:"threshold",visibility:"public",description:"Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0.5"},{name:"top",visibility:"public",description:"Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0"},{name:"bottom",visibility:"public",description:"Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"1"},{name:"parallax",visibility:"public",description:"Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"id",visibility:"public",description:"ID of the scroller container",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"class",visibility:"public",description:"Set a class to target with SCSS",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"index",visibility:"public",description:"The currently active section",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."},{name:"offset",visibility:"public",description:"How far the section has scrolled past the threshold, as a value between 0 and 1",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."},{name:"progress",visibility:"public",description:"How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."}],name:"Scroller.svelte"};var De=l('<div class="step svelte-13llgxe"></div>');function W(h,e){let n=w(e,"colour",3,"lightblue");var u=De();x(()=>T(u,`background: ${n()};`)),a(h,u)}W.__docgen={data:[{name:"colour",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"lightblue"'}],name:"Step.svelte"};var Ee=(h,e)=>{e(e()+1)},He=l('<h4>Interactive step</h4> <p class="font-sans">The count is <strong> </strong></p> <button>Click Me</button>',1);function re(h,e){E(e,!0);let n=w(e,"count",15,0);var u=He(),f=d(P(u),2),o=d(v(f)),m=v(o),p=d(f,2);p.__click=[Ee,n],x(()=>_e(m,n())),a(h,u),H()}be(["click"]);re.__docgen={data:[{name:"count",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."}],name:"InteractiveForeground.svelte"};const Xe=""+new URL("step-1-xl-CGvnoQHh.png",import.meta.url).href,Oe=""+new URL("step-1-lg-t8038DsF.png",import.meta.url).href,Ne=""+new URL("step-1-md-ChJmSWms.png",import.meta.url).href,$e=""+new URL("step-1-sm-DyMgyRUQ.png",import.meta.url).href,ze=""+new URL("step-1-xs-BMsJE6t1.png",import.meta.url).href;var Ge=l('<div id="g-step-1-xl" class="g-artboard svelte-16iuhg" style=""><div style="padding: 0 0 50% 0;"></div> <div id="g-step-1-xl-img" class="g-aiImg svelte-16iuhg"></div></div>'),Qe=l('<div id="g-step-1-lg" class="g-artboard svelte-16iuhg" style=""><div style="padding: 0 0 55.3763% 0;"></div> <div id="g-step-1-lg-img" class="g-aiImg svelte-16iuhg"></div></div>'),Je=l('<div id="g-step-1-md" class="g-artboard svelte-16iuhg" style=""><div style="padding: 0 0 55.7576% 0;"></div> <div id="g-step-1-md-img" class="g-aiImg svelte-16iuhg"></div></div>'),Ye=l('<div id="g-step-1-sm" class="g-artboard svelte-16iuhg" style=""><div style="padding: 0 0 49.6078% 0;"></div> <div id="g-step-1-sm-img" class="g-aiImg svelte-16iuhg"></div></div>'),Ze=l('<div id="g-step-1-xs" class="g-artboard svelte-16iuhg" style=""><div style="padding: 0 0 55.4545% 0;"></div> <div id="g-step-1-xs-img" class="g-aiImg svelte-16iuhg"></div></div>'),Ke=l('<div id="g-step-1-box" class="svelte-16iuhg"><!> <!> <!> <!> <!></div>');function le(h){let e=G(void 0);var n=Ke(),u=v(n);{var f=t=>{var r=Ge(),s=d(v(r),2);x(()=>T(s,`background-image: url(${Xe});`)),a(t,r)};b(u,t=>{i(e)&&i(e)>=1200&&t(f)})}var o=d(u,2);{var m=t=>{var r=Qe(),s=d(v(r),2);x(()=>T(s,`background-image: url(${Oe});`)),a(t,r)};b(o,t=>{i(e)&&i(e)>=930&&i(e)<1200&&t(m)})}var p=d(o,2);{var c=t=>{var r=Je(),s=d(v(r),2);x(()=>T(s,`background-image: url(${Ne});`)),a(t,r)};b(p,t=>{i(e)&&i(e)>=660&&i(e)<930&&t(c)})}var k=d(p,2);{var _=t=>{var r=Ye(),s=d(v(r),2);x(()=>T(s,`background-image: url(${$e});`)),a(t,r)};b(k,t=>{i(e)&&i(e)>=510&&i(e)<660&&t(_)})}var g=d(k,2);{var y=t=>{var r=Ze(),s=d(v(r),2);x(()=>T(s,`background-image: url(${ze});`)),a(t,r)};b(g,t=>{i(e)&&i(e)>=0&&i(e)<510&&t(y)})}J(n,"clientWidth",t=>z(e,t)),a(h,n)}le.__docgen={version:3,name:"ai-scroller-1.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const et=""+new URL("step-2-xl-D8-2_d56.png",import.meta.url).href,tt=""+new URL("step-2-lg-C54g3ruU.png",import.meta.url).href,rt=""+new URL("step-2-md-CloPl4zH.png",import.meta.url).href,it=""+new URL("step-2-sm-9IwnQ2Gf.png",import.meta.url).href,st=""+new URL("step-2-xs-FdL9FU92.png",import.meta.url).href;var at=l('<div id="g-step-2-xl" class="g-artboard svelte-17g09mo" style=""><div style="padding: 0 0 50% 0;"></div> <div id="g-step-2-xl-img" class="g-aiImg svelte-17g09mo"></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></div>'),ot=l('<div id="g-step-2-lg" class="g-artboard svelte-17g09mo" style=""><div style="padding: 0 0 55.3763% 0;"></div> <div id="g-step-2-lg-img" class="g-aiImg svelte-17g09mo"></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></div>'),nt=l('<div id="g-step-2-md" class="g-artboard svelte-17g09mo" style=""><div style="padding: 0 0 55.7576% 0;"></div> <div id="g-step-2-md-img" class="g-aiImg svelte-17g09mo"></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></div>'),dt=l('<div id="g-step-2-sm" class="g-artboard svelte-17g09mo" style=""><div style="padding: 0 0 49.6078% 0;"></div> <div id="g-step-2-sm-img" class="g-aiImg svelte-17g09mo"></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></div>'),lt=l('<div id="g-step-2-xs" class="g-artboard svelte-17g09mo" style=""><div style="padding: 0 0 55.4545% 0;"></div> <div id="g-step-2-xs-img" class="g-aiImg svelte-17g09mo"></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></div>'),gt=l('<div id="g-step-2-box" class="svelte-17g09mo"><!> <!> <!> <!> <!></div>');function ge(h){let e=G(null);var n=gt(),u=v(n);{var f=t=>{var r=at(),s=d(v(r),2);x(()=>T(s,`background-image: url(${et});`)),a(t,r)};b(u,t=>{i(e)&&i(e)>=1200&&t(f)})}var o=d(u,2);{var m=t=>{var r=ot(),s=d(v(r),2);x(()=>T(s,`background-image: url(${tt});`)),a(t,r)};b(o,t=>{i(e)&&i(e)>=930&&i(e)<1200&&t(m)})}var p=d(o,2);{var c=t=>{var r=nt(),s=d(v(r),2);x(()=>T(s,`background-image: url(${rt});`)),a(t,r)};b(p,t=>{i(e)&&i(e)>=660&&i(e)<930&&t(c)})}var k=d(p,2);{var _=t=>{var r=dt(),s=d(v(r),2);x(()=>T(s,`background-image: url(${it});`)),a(t,r)};b(k,t=>{i(e)&&i(e)>=510&&i(e)<660&&t(_)})}var g=d(k,2);{var y=t=>{var r=lt(),s=d(v(r),2);x(()=>T(s,`background-image: url(${st});`)),a(t,r)};b(g,t=>{i(e)&&i(e)>=0&&i(e)<510&&t(y)})}J(n,"clientWidth",t=>z(e,t)),a(h,n)}ge.__docgen={version:3,name:"ai-scroller-2.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const pt=""+new URL("step-3-xl-BvqB4HxL.png",import.meta.url).href,vt=""+new URL("step-3-lg-CyyXZUks.png",import.meta.url).href,ut=""+new URL("step-3-md-n431Z6bH.png",import.meta.url).href,ct=""+new URL("step-3-sm-BJwK2S6b.png",import.meta.url).href,mt=""+new URL("step-3-xs-Xqh0Hyw7.png",import.meta.url).href;var ft=l('<div id="g-step-3-xl" class="g-artboard svelte-qh37gt" style=""><div style="padding: 0 0 50% 0;"></div> <div id="g-step-3-xl-img" class="g-aiImg svelte-qh37gt"></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></div>'),yt=l('<div id="g-step-3-lg" class="g-artboard svelte-qh37gt" style=""><div style="padding: 0 0 55.3763% 0;"></div> <div id="g-step-3-lg-img" class="g-aiImg svelte-qh37gt"></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></div>'),bt=l('<div id="g-step-3-md" class="g-artboard svelte-qh37gt" style=""><div style="padding: 0 0 55.7576% 0;"></div> <div id="g-step-3-md-img" class="g-aiImg svelte-qh37gt"></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></div>'),ht=l('<div id="g-step-3-sm" class="g-artboard svelte-qh37gt" style=""><div style="padding: 0 0 49.6078% 0;"></div> <div id="g-step-3-sm-img" class="g-aiImg svelte-qh37gt"></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></div>'),kt=l('<div id="g-step-3-xs" class="g-artboard svelte-qh37gt" style=""><div style="padding: 0 0 55.4545% 0;"></div> <div id="g-step-3-xs-img" class="g-aiImg svelte-qh37gt"></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></div>'),xt=l('<div id="g-step-3-box" class="svelte-qh37gt"><!> <!> <!> <!> <!></div>');function pe(h){let e=G(null);var n=xt(),u=v(n);{var f=t=>{var r=ft(),s=d(v(r),2);x(()=>T(s,`background-image: url(${pt});`)),a(t,r)};b(u,t=>{i(e)&&i(e)>=1200&&t(f)})}var o=d(u,2);{var m=t=>{var r=yt(),s=d(v(r),2);x(()=>T(s,`background-image: url(${vt});`)),a(t,r)};b(o,t=>{i(e)&&i(e)>=930&&i(e)<1200&&t(m)})}var p=d(o,2);{var c=t=>{var r=bt(),s=d(v(r),2);x(()=>T(s,`background-image: url(${ut});`)),a(t,r)};b(p,t=>{i(e)&&i(e)>=660&&i(e)<930&&t(c)})}var k=d(p,2);{var _=t=>{var r=ht(),s=d(v(r),2);x(()=>T(s,`background-image: url(${ct});`)),a(t,r)};b(k,t=>{i(e)&&i(e)>=510&&i(e)<660&&t(_)})}var g=d(k,2);{var y=t=>{var r=kt(),s=d(v(r),2);x(()=>T(s,`background-image: url(${mt});`)),a(t,r)};b(g,t=>{i(e)&&i(e)>=0&&i(e)<510&&t(y)})}J(n,"clientWidth",t=>z(e,t)),a(h,n)}pe.__docgen={version:3,name:"ai-scroller-3.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const _t=""+new URL("Body-issues-key-xs-CAtPtdjL.png",import.meta.url).href;var wt=l('<div id="g-Body-issues-key-xs" class="g-artboard svelte-kvqaih" style=""><div style="padding: 0 0 48.4848% 0;"></div> <div id="g-Body-issues-key-xs-img" class="g-aiImg svelte-kvqaih"></div> <div id="g-ai0-1" class="g-Layer_1 g-aiAbs g-aiPointText svelte-kvqaih" style="top:19.4775%;margin-top:-10.2px;left:8.1818%;width:276px;"><p class="g-pstyle0 svelte-kvqaih">Likelihood of something happening</p></div> <div id="g-ai0-3" class="g-Layer_1 g-aiAbs g-aiPointText svelte-kvqaih" style="top:55.1025%;margin-top:-10.2px;left:27.2727%;width:68px;"><p class="g-pstyle1 svelte-kvqaih">0-25%</p></div> <div id="g-ai0-4" class="g-Layer_1 g-aiAbs g-aiPointText svelte-kvqaih" style="top:55.1025%;margin-top:-10.2px;left:74.2424%;width:75px;"><p class="g-pstyle1 svelte-kvqaih">50-75%</p></div> <div id="g-ai0-5" class="g-Layer_1 g-aiAbs g-aiPointText svelte-kvqaih" style="top:79.4775%;margin-top:-10.2px;left:74.2424%;width:82px;"><p class="g-pstyle1 svelte-kvqaih">75-100%</p></div> <div id="g-ai0-6" class="g-Layer_1 g-aiAbs g-aiPointText svelte-kvqaih" style="top:83.2275%;margin-top:-10.2px;left:27.2727%;width:77px;"><p class="g-pstyle1 svelte-kvqaih">25-50%</p></div></div>'),St=l('<div id="g-Body-issues-key-box" class="svelte-kvqaih"><!></div>');function ve(h){let e=G(void 0);var n=St(),u=v(n);{var f=o=>{var m=wt(),p=d(v(m),2);x(()=>T(p,`background-image: url(${_t});`)),a(o,m)};b(u,o=>{i(e)&&i(e)>=0&&o(f)})}J(n,"clientWidth",o=>z(e,o)),a(h,n)}ve.__docgen={version:3,name:"ai-foreground.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const ue={title:"Components/Graphics/Scroller",component:N,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"]},index:{control:!1,table:{category:"Bindable states (Read-only)"}},offset:{control:!1,table:{category:"Bindable states (Read-only)"}},progress:{control:!1,table:{category:"Bindable states (Read-only)"}}}},{Story:O}=xe();var Tt=l("<!> <!> <!> <!>",1);function ce(h,e){E(e,!1);const n={AiMap1:le,AiMap2:ge,AiMap3:pe},u={AiForeground:ve},f={foregroundPosition:"right",id:"my-scroller",stackBackground:"true",steps:[{background:n.AiMap1,foreground:`#### Step 1

Here's where something happend.`,altText:"A map showing the Upper West side in New York City."},{background:n.AiMap2,foreground:`#### Step 2

Something happened on some street...`,altText:"The same map now highlights 98th Street."},{background:n.AiMap3,foreground:`#### Step 3

... and now there are multiple protests.`,altText:"The same map now highlights three locations near 98th Street where something particulary important happened."}]},o={foregroundPosition:"left",id:"my-scroller",stackBackground:"true",steps:[{background:n.AiMap1,foreground:`#### Step 1

Here's where something happend.`,altText:"A map showing the Upper West side in New York City."},{background:n.AiMap2,foreground:u.AiForeground,altText:"The same map now highlights 98th Street."},{background:n.AiMap3,foreground:`#### Step 3

... and now there are multiple protests.`,altText:"The same map now highlights three locations near 98th Street where something particulary important happened."}]};he();var m=Tt(),p=P(m);{let g=V(()=>({steps:[{background:W,backgroundProps:{colour:"red"},foreground:`#### Step 1

Lorem ipsum red`,altText:"Red background"},{background:W,backgroundProps:{colour:"blue"},foreground:`#### Step 2

Lorem ipsum blue`,altText:"Blue background"},{background:W,backgroundProps:{colour:"green"},foreground:`#### Step 3

Lorem ipsum green`,altText:"Green background"}],foregroundPosition:"middle",backgroundWidth:"fluid"}));O(p,{name:"Demo",get args(){return i(g)},parameters:{__svelteCsf:{rawCode:"<Scroller {...args} />"}}})}var c=d(p,2);O(c,{name:"ArchieML and ai2svelte",exportName:"ArchieML",children:(g,y)=>{{let t=V(()=>f.stackBackground==="true"),r=V(()=>f.steps.map(s=>({background:s.background,foreground:s.foreground,altText:s.altText})));N(g,{get id(){return f.id},get foregroundPosition(){return f.foregroundPosition},get stackBackground(){return i(t)},get steps(){return i(r)}})}},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Scroller
  id={docBlock.id}
  foregroundPosition={docBlock.foregroundPosition}
  stackBackground={docBlock.stackBackground === 'true'}
  steps={docBlock.steps.map((step) => ({
    background: step.background,
    foreground: step.foreground,
    altText: step.altText,
  }))}
/>`}}});var k=d(c,2);{let g=V(()=>({steps:[{background:W,backgroundProps:{colour:"red"},foreground:re},{background:W,backgroundProps:{colour:"blue"},foreground:`#### Step 2

Lorem ipsum blue`},{background:W,backgroundProps:{colour:"green"},foreground:re,foregroundProps:{count:100}}]}));O(k,{name:"Custom foreground",exportName:"CustomForeground",get args(){return i(g)},parameters:{__svelteCsf:{rawCode:"<Scroller {...args} />"}}})}var _=d(k,2);O(_,{name:"Custom foreground with ArchiemL",exportName:"CustomforegroundArchieML",children:(g,y)=>{{let t=V(()=>o.stackBackground==="true"),r=V(()=>o.steps.map(s=>({background:s.background,foreground:s.foreground,altText:s.altText})));N(g,{get id(){return o.id},get foregroundPosition(){return o.foregroundPosition},get stackBackground(){return i(t)},get steps(){return i(r)}})}},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Scroller
  id={docBlockCustomForeground.id}
  foregroundPosition={docBlockCustomForeground.foregroundPosition}
  stackBackground={docBlockCustomForeground.stackBackground === 'true'}
  steps={docBlockCustomForeground.steps.map((step) => ({
    background: step.background,
    foreground: step.foreground,
    altText: step.altText,
  }))}
/>`}}}),a(h,m),H()}ce.__docgen={version:3,name:"Scroller.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const Y=ke(ce,ue),Pt=["Demo","ArchieML","CustomForeground","CustomforegroundArchieML"],qt=Y.Demo,Lt=Y.ArchieML,Bt=Y.CustomForeground,At=Y.CustomforegroundArchieML,$t=Object.freeze(Object.defineProperty({__proto__:null,ArchieML:Lt,CustomForeground:Bt,CustomforegroundArchieML:At,Demo:qt,__namedExportsOrder:Pt,default:ue},Symbol.toStringTag,{value:"Module"}));export{$t as S};