hypnagaga/packages/graphics-components/docs/assets/Visible.stories-B2Ba9QDY.js

import{p as u,f as w,a as b,c as P}from"./props-b4vEeO_8.js";import{J as L,G as U,B as A,k as o,a3 as O,a4 as V,I as N,C as I,F as s,N as J,n as H}from"./runtime-C3rQLW--.js";import{i as K}from"./lifecycle-F2p_Qkk3.js";import{c as Q,d as X}from"./create-runtime-stories-7AWWVphH.js";import{o as Y}from"./index-client-BAw8T8-V.js";import{i as M}from"./svelte-component-C8Ginrj8.js";import{s as Z}from"./snippet-C5kbqVpq.js";import{a as $}from"./attributes-Cg6aLqN3.js";import{b as ee}from"./this-CrUBQEQ_.js";import{B as n}from"./BodyText-CXnxLnBi.js";import{B as te}from"./Block-D3Ui8rd-.js";import{F as oe}from"./FeaturePhoto-CKELMwR8.js";import{s as ie}from"./shark-D70DK9Ak.js";var re=w("<div><!></div>");function S(m,e){A(e,!0);let f=u(e,"once",3,!1),v=u(e,"top",3,"0px"),i=u(e,"bottom",3,"0px"),g=u(e,"left",3,"0px"),y=u(e,"right",3,"0px"),_=u(e,"threshold",3,0),l=V(!1),r=V(void 0);Y(()=>{if(typeof IntersectionObserver<"u"){const t=`${i()} ${g()} ${v()} ${y()}`,a=new IntersectionObserver(c=>{O(l,c[0].isIntersecting,!0),o(l)&&f()&&o(r)&&a.unobserve(o(r))},{rootMargin:t,threshold:_()});return o(r)&&a.observe(o(r)),()=>{o(r)&&a.unobserve(o(r))}}});var d=re();let h;var k=N(d);{var x=t=>{var a=P(),c=I(a);Z(c,()=>e.children,()=>o(l)),b(t,a)};M(k,t=>{e.children&&t(x)})}ee(d,t=>O(r,t),()=>o(r)),L(t=>h=$(d,1,"visibility-tracker",null,h,t),[()=>({visible:o(l),"not-visible":!o(l)})]),b(m,d),U()}S.__docgen={data:[{name:"once",visibility:"public",description:`Whether to change visibility just once.

Useful for loading expensive images or other media and then keeping them around once they're first loaded.`,keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"top",visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"0px"'},{name:"bottom",visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"0px"'},{name:"left",visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"0px"'},{name:"right",visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"0px"'},{name:"threshold",visibility:"public",description:"Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold).",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0"},{name:"children",visibility:"public",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[boolean]>"},static:!1,readonly:!1}],name:"Visible.svelte"};var se=w("<h2>Not yet visible.</h2>"),ne=w("<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!>",1);function D(m){let e="150px";const f="Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.";let v=J(()=>`The top value for \`rootMargin\` is set to \`${e}px\` in this demo. Read about how \`rootMargin\` affects the <a href='https://codepen.io/michellebarker/full/xxwLpRG'>Intersection Observer's behaviour here</a>.`);const i="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";var g=ne(),y=I(g);n(y,{text:`**${f}**`});var _=s(y,2);n(_,{text:`**${o(v)}**`});var l=s(_,2);n(l,{text:i});var r=s(l,2);n(r,{text:i});var d=s(r,2);n(d,{text:i});var h=s(d,2);n(h,{text:i});var k=s(h,2);S(k,{top:e,once:!1,children:(W,B=H)=>{var q=P(),C=I(q);{var E=p=>{oe(p,{get src(){return ie},altText:"A shark!",caption:"Carcharodon carcharias - REUTERS"})},R=p=>{te(p,{children:(F,ue)=>{var G=se();b(F,G)},$$slots:{default:!0}})};M(C,p=>{B()?p(E):p(R,!1)})}b(W,q)},$$slots:{default:!0}});var x=s(k,2);n(x,{text:i});var t=s(x,2);n(t,{text:i});var a=s(t,2);n(a,{text:i});var c=s(a,2);n(c,{text:i});var z=s(c,2);n(z,{text:i}),b(m,g)}D.__docgen={version:3,name:"VisibleDemo.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const T={title:"Components/Utilities/Visible",component:S},{Story:ae}=X();function j(m,e){A(e,!1),K(),ae(m,{name:"Demo",children:(f,v)=>{D(f)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:"<VisibleDemo />"}}}),U()}j.__docgen={version:3,name:"Visible.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const le=Q(j,T),de=["Demo"],ce=le.Demo,qe=Object.freeze(Object.defineProperty({__proto__:null,Demo:ce,__namedExportsOrder:de,default:T},Symbol.toStringTag,{value:"Module"}));export{ce as D,qe as V};
	import{p as u,f as w,a as b,c as P}from"./props-b4vEeO_8.js";import{J as L,G as U,B as A,k as o,a3 as O,a4 as V,I as N,C as I,F as s,N as J,n as H}from"./runtime-C3rQLW--.js";import{i as K}from"./lifecycle-F2p_Qkk3.js";import{c as Q,d as X}from"./create-runtime-stories-7AWWVphH.js";import{o as Y}from"./index-client-BAw8T8-V.js";import{i as M}from"./svelte-component-C8Ginrj8.js";import{s as Z}from"./snippet-C5kbqVpq.js";import{a as $}from"./attributes-Cg6aLqN3.js";import{b as ee}from"./this-CrUBQEQ_.js";import{B as n}from"./BodyText-CXnxLnBi.js";import{B as te}from"./Block-D3Ui8rd-.js";import{F as oe}from"./FeaturePhoto-CKELMwR8.js";import{s as ie}from"./shark-D70DK9Ak.js";var re=w("<div><!></div>");function S(m,e){A(e,!0);let f=u(e,"once",3,!1),v=u(e,"top",3,"0px"),i=u(e,"bottom",3,"0px"),g=u(e,"left",3,"0px"),y=u(e,"right",3,"0px"),_=u(e,"threshold",3,0),l=V(!1),r=V(void 0);Y(()=>{if(typeof IntersectionObserver<"u"){const t=`${i()} ${g()} ${v()} ${y()}`,a=new IntersectionObserver(c=>{O(l,c[0].isIntersecting,!0),o(l)&&f()&&o(r)&&a.unobserve(o(r))},{rootMargin:t,threshold:_()});return o(r)&&a.observe(o(r)),()=>{o(r)&&a.unobserve(o(r))}}});var d=re();let h;var k=N(d);{var x=t=>{var a=P(),c=I(a);Z(c,()=>e.children,()=>o(l)),b(t,a)};M(k,t=>{e.children&&t(x)})}ee(d,t=>O(r,t),()=>o(r)),L(t=>h=$(d,1,"visibility-tracker",null,h,t),[()=>({visible:o(l),"not-visible":!o(l)})]),b(m,d),U()}S.__docgen={data:[{name:"once",visibility:"public",description:`Whether to change visibility just once.

	Useful for loading expensive images or other media and then keeping them around once they're first loaded.`,keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"top",visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"0px"'},{name:"bottom",visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"0px"'},{name:"left",visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"0px"'},{name:"right",visibility:"public",description:"Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"0px"'},{name:"threshold",visibility:"public",description:"Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold).",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0"},{name:"children",visibility:"public",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[boolean]>"},static:!1,readonly:!1}],name:"Visible.svelte"};var se=w("<h2>Not yet visible.</h2>"),ne=w("<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!>",1);function D(m){let e="150px";const f="Take a look at the Elements tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.";let v=J(()=>`The top value for \`rootMargin\` is set to \`${e}px\` in this demo. Read about how \`rootMargin\` affects the <a href='https://codepen.io/michellebarker/full/xxwLpRG'>Intersection Observer's behaviour here</a>.`);const i="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";var g=ne(),y=I(g);n(y,{text:`${f}`});var _=s(y,2);n(_,{text:`${o(v)}`});var l=s(_,2);n(l,{text:i});var r=s(l,2);n(r,{text:i});var d=s(r,2);n(d,{text:i});var h=s(d,2);n(h,{text:i});var k=s(h,2);S(k,{top:e,once:!1,children:(W,B=H)=>{var q=P(),C=I(q);{var E=p=>{oe(p,{get src(){return ie},altText:"A shark!",caption:"Carcharodon carcharias - REUTERS"})},R=p=>{te(p,{children:(F,ue)=>{var G=se();b(F,G)},$$slots:{default:!0}})};M(C,p=>{B()?p(E):p(R,!1)})}b(W,q)},$$slots:{default:!0}});var x=s(k,2);n(x,{text:i});var t=s(x,2);n(t,{text:i});var a=s(t,2);n(a,{text:i});var c=s(a,2);n(c,{text:i});var z=s(c,2);n(z,{text:i}),b(m,g)}D.__docgen={version:3,name:"VisibleDemo.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const T={title:"Components/Utilities/Visible",component:S},{Story:ae}=X();function j(m,e){A(e,!1),K(),ae(m,{name:"Demo",children:(f,v)=>{D(f)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:"<VisibleDemo />"}}}),U()}j.__docgen={version:3,name:"Visible.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const le=Q(j,T),de=["Demo"],ce=le.Demo,qe=Object.freeze(Object.defineProperty({__proto__:null,Demo:ce,__namedExportsOrder:de,default:T},Symbol.toStringTag,{value:"Module"}));export{ce as D,qe as V};