https://action-archive.vercel.app/_app/immutable/nodes/6.272664c6.js

1import{s as Y,i as et,r as nt,c as it}from"../chunks/scheduler.b9ef9ea9.js";import{S as Z,i as tt,g as _,h as $,j as J,f as r,k as o,a as c,z as st,A as lt,d as g,p as at,t as O,b as rt,D as b,B as K,s as m,r as T,c as p,u as D,v as H,w as P}from"../chunks/index.5f071b7f.js";import{C as ct}from"../chunks/Codeblock.633a30c3.js";import{E as ot,D as Q}from"../chunks/Example.7b58c512.js";import{c as ut}from"../chunks/index.c41c4b6b.js";import{a as W}from"../chunks/toWritableStores.64e22c61.js";const dt=`<script lang="ts">
2    import { click_outside, type ClickOutsideParameters } from 'action-archive';
3
4    const clickOutsideParameters: ClickOutsideParameters = {
5        container: document.documentElement
6    }
7<\/script>
8
9<div use:click_outside={outsideClickParameters} on:aa_click_outside={...} />
10`;function X(f){let e,s="Clicked outside!",i,a;return{c(){e=_("p"),e.textContent=s,this.h()},l(n){e=$(n,"P",{class:!0,"data-svelte-h":!0}),b(e)!=="svelte-1mqy8yg"&&(e.textContent=s),this.h()},h(){o(e,"class","text-center select-none font-bold text-zinc-50 dark:text-zinc-950")},m(n,u){c(n,e,u),a=!0},i(n){a||(n&&it(()=>{a&&(i||(i=K(e,W,{duration:150},!0)),i.run(1))}),a=!0)},o(n){n&&(i||(i=K(e,W,{duration:150},!1)),i.run(0)),a=!1},d(n){n&&r(e),n&&i&&i.end()}}}function ft(f){let e,s,i,a,n=f[0]&&X();return{c(){e=_("div"),s=_("div"),n&&n.c(),this.h()},l(u){e=$(u,"DIV",{class:!0,id:!0});var d=J(e);s=$(d,"DIV",{class:!0});var z=J(s);n&&n.l(z),z.forEach(r),d.forEach(r),this.h()},h(){o(s,"class","bg-zinc-950 dark:bg-zinc-50 h-24 w-36 flex justify-center items-center rounded-md"),o(e,"class","py-32 px-8 flex justify-center items-center"),o(e,"id","container")},m(u,d){c(u,e,d),st(e,s),n&&n.m(s,null),i||(a=[et(ut.call(null,s,{container:"#container"})),lt(s,"aa_click_outside",f[1])],i=!0)},p(u,[d]){u[0]?n?d&1&&g(n,1):(n=X(),n.c(),g(n,1),n.m(s,null)):n&&(at(),O(n,1,1,()=>{n=null}),rt())},i(u){g(n)},o(u){O(n)},d(u){u&&r(e),n&&n.d(),i=!1,nt(a)}}}function mt(f,e,s){let i=!1,a;function n(){s(0,i=!0),a&&clearTimeout(a),a=setTimeout(()=>s(0,i=!1),1e3)}return[i,n]}class pt extends Z{constructor(e){super(),tt(this,e,mt,ft,Y,{})}}const _t=`<script lang="ts">
11	import { click_outside } from 'action-archive';
12	import { fade } from 'svelte/transition';
13
14	let clickedOutside = false;

15	let timer: ReturnType<typeof setTimeout>;
16
17	function clickOutsideHandler() {
18		clickedOutside = true;
19		if (timer) clearTimeout(timer);
20		timer = setTimeout(() => (clickedOutside = false), 1000);
21	}
22<\/script>
23
24<div class="py-32 px-8 flex justify-center items-center" id="container">
25	<div
26		class="bg-zinc-950 dark:bg-zinc-50 h-24 w-36 flex justify-center items-center rounded-md"
27		use:click_outside={{ container: '#container' }}
28		on:aa_click_outside={clickOutsideHandler}
29	>
30		{#if clickedOutside}
31			<p
32				class="text-center select-none font-bold text-zinc-50 dark:text-zinc-950"
33				transition:fade={{ duration: 150 }}
34			>
35				Clicked outside!
36			</p>
37		{/if}
38	</div>
39</div>
40`;function $t(f){let e,s;return e=new pt({}),{c(){T(e.$$.fragment)},l(i){D(e.$$.fragment,i)},m(i,a){H(e,i,a),s=!0},i(i){s||(g(e.$$.fragment,i),s=!0)},o(i){O(e.$$.fragment,i),s=!1},d(i){P(e,i)}}}function xt(f){let e,s="Description",i,a,n=`The Click Outside action can be used to detect clicks outside of an element, this can be useful
41	for example when you want to close a modal when the user clicks outside of it.`,u,d,z="Usage",j,y,S,x,V="Example",q,C,I,h,B="API",A,k,L="Parameters",M,w,N,v,F="Events",R,E,U;return y=new ct({props:{class:"mt-4",code:dt,language:"xml"}}),C=new ot({props:{code:_t,language:"xml",$$slots:{default:[$t]},$$scope:{ctx:f}}}),w=new Q({props:{class:"mt-4",structure:f[0]}}),E=new Q({props:{class:"mt-4",structure:f[1]}}),{c(){e=_("h2"),e.textContent=s,i=m(),a=_("p"),a.textContent=n,u=m(),d=_("h2"),d.textContent=z,j=m(),T(y.$$.fragment),S=m(),x=_("h2"),x.textContent=V,q=m(),T(C.$$.fragment),I=m(),h=_("h2"),h.textContent=B,A=m(),k=_("h3"),k.textContent=L,M=m(),T(w.$$.fragment),N=m(),v=_("h3"),v.textContent=F,R=m(),T(E.$$.fragment),this.h()},l(t){e=$(t,"H2",{class:!0,id:!0,"data-svelte-h":!0}),b(e)!=="svelte-1x9clea"&&(e.textContent=s),i=p(t),a=$(t,"P",{class:!0,"data-svelte-h":!0}),b(a)!=="svelte-158gvez"&&(a.textContent=n),u=p(t),d=$(t,"H2",{class:!0,id:!0,"data-svelte-h":!0}),b(d)!=="svelte-11eowns"&&(d.textContent=z),j=p(t),D(y.$$.fragment,t),S=p(t),x=$(t,"H2",{class:!0,id:!0,"data-svelte-h":!0}),b(x)!=="svelte-14ljj06"&&(x.textContent=V),q=p(t),D(C.$$.fragment,t),I=p(t),h=$(t,"H2",{class:!0,id:!0,"data-svelte-h":!0}),b(h)!=="svelte-1sd5qie"&&(h.textContent=B),A=p(t),k=$(t,"H3",{class:!0,id:!0,"data-svelte-h":!0}),b(k)!=="svelte-pwcp6z"&&(k.textContent=L),M=p(t),D(w.$$.fragment,t),N=p(t),v=$(t,"H3",{class:!0,id:!0,"data-svelte-h":!0}),b(v)!=="svelte-ffofzr"&&(v.textContent=F),R=p(t),D(E.$$.fragment,t),this.h()},h(){o(e,"class","h2 mt-12"),o(e,"id","description"),o(a,"class","p mt-4"),o(d,"class","h2 mt-12"),o(d,"id","usage"),o(x,"class","h2 mt-12"),o(x,"id","example"),o(h,"class","h2 mt-12"),o(h,"id","api"),o(k,"class","h3 mt-12"),o(k,"id","parameters"),o(v,"class","h3 mt-12"),o(v,"id","events")},m(t,l){c(t,e,l),c(t,i,l),c(t,a,l),c(t,u,l),c(t,d,l),c(t,j,l),H(y,t,l),c(t,S,l),c(t,x,l),c(t,q,l),H(C,t,l),c(t,I,l),c(t,h,l),c(t,A,l),c(t,k,l),c(t,M,l),H(w,t,l),c(t,N,l),c(t,v,l),c(t,R,l),H(E,t,l),U=!0},p(t,[l]){const G={};l&4&&(G.$$scope={dirty:l,ctx:t}),C.$set(G)},i(t){U||(g(y.$$.fragment,t),g(C.$$.fragment,t),g(w.$$.fragment,t),g(E.$$.fragment,t),U=!0)},o(t){O(y.$$.fragment,t),O(C.$$.fragment,t),O(w.$$.fragment,t),O(E.$$.fragment,t),U=!1},d(t){t&&(r(e),r(i),r(a),r(u),r(d),r(j),r(S),r(x),r(q),r(I),r(h),r(A),r(k),r(M),r(N),r(v),r(R)),P(y,t),P(C,t),P(w,t),P(E,t)}}}function ht(f){return[{headings:["Name","Type","Default","Description"],body:[["container","HTMLElement | string","document.bodyElement","Element or query selected element which will act as the container, clicking outside of the container will not trigger an aa_click_outside event."],["disabled","boolean","false","Disables the action."]]},{headings:["Name","Type","Description"],body:[["aa_click_outside","(event: MouseEvent) => void","Emitted when clicking outside of the node and inside of the container."]]}]}class wt extends Z{constructor(e){super(),tt(this,e,ht,xt,Y,{})}}export{wt as component};