https://ionicsvelte.firebaseapp.com/_app/immutable/nodes/48.52b47fb4.js

1import{S as Ot,i as Et,s as St,a as v,m as pt,o as wt,f as s,g as b,p as vt,h as A,q as bt,r as Tt,u as gt,v as $t,l as kt,e as l,t as f,c as r,b as u,d as p,w as C,z as st,j as t,x as D,y as Nt}from"../chunks/index.3eec9ed0.js";import{S as yt}from"../chunks/SourceButton.c1ca906a.js";import"../chunks/platform.2d8956c5.js";import{P as Bt}from"../chunks/PageEmpty.88f57bbe.js";import{t as It}from"../chunks/index.03409caf.js";import{c as Ut}from"../chunks/index.40299978.js";function Rt(d){let c,o,_,e,h,m,T,M,E,U,P,n,S,q,$,K,L,j,z,G,H,x,F,O,J,w,Q,V,k,W,X,N,Y,Z,y,tt,et,B,nt,R,ot,lt;return T=new yt({props:{name:"SvelteTweened"}}),{c(){c=l("ion-header"),o=l("ion-toolbar"),_=l("ion-buttons"),e=l("ion-menu-button"),h=v(),m=l("ion-buttons"),pt(T.$$.fragment),M=v(),E=l("ion-title"),U=f("Svelte Tweened"),P=v(),n=l("ion-content"),S=l("p"),q=f(`Svelte tweened is part of Svelte's nifty runtime features to easily add animation to DOM
2			elements.This code comes from the Svelte Tutorial on `),$=l("a"),K=f("https://svelte.dev/tutorial/tweened"),L=f(`
3		"Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening
4		those values. Svelte includes tools to help you build slick user interfaces that use animation to
5		communicate changes."
6		`),j=l("br"),z=l("br"),G=f(`Click the percentages to see the transition
7		`),H=l("br"),x=l("br"),F=v(),O=l("progress"),J=v(),w=l("button"),Q=f("0%"),V=v(),k=l("button"),W=f("25%"),X=v(),N=l("button"),Y=f("50%"),Z=v(),y=l("button"),tt=f("75%"),et=v(),B=l("button"),nt=f("100%"),this.h()},l(i){c=r(i,"ION-HEADER",{translucent:!0});var g=u(c);o=r(g,"ION-TOOLBAR",{});var I=u(o);_=r(I,"ION-BUTTONS",{slot:!0});var rt=u(_);e=r(rt,"ION-MENU-BUTTON",{}),u(e).forEach(s),rt.forEach(s),h=b(I),m=r(I,"ION-BUTTONS",{slot:!0});var it=u(m);vt(T.$$.fragment,it),it.forEach(s),M=b(I),E=r(I,"ION-TITLE",{});var ct=u(E);U=p(ct,"Svelte Tweened"),ct.forEach(s),I.forEach(s),g.forEach(s),P=b(i),n=r(i,"ION-CONTENT",{fullscreen:!0,class:!0});var a=u(n);S=r(a,"P",{});var at=u(S);q=p(at,`Svelte tweened is part of Svelte's nifty runtime features to easily add animation to DOM
8			elements.This code comes from the Svelte Tutorial on `),$=r(at,"A",{href:!0,target:!0});var ut=u($);K=p(ut,"https://svelte.dev/tutorial/tweened"),ut.forEach(s),at.forEach(s),L=p(a,`
9		"Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening
10		those values. Svelte includes tools to help you build slick user interfaces that use animation to
11		communicate changes."
12		`),j=r(a,"BR",{}),z=r(a,"BR",{}),G=p(a,`Click the percentages to see the transition
13		`),H=r(a,"BR",{}),x=r(a,"BR",{}),F=b(a),O=r(a,"PROGRESS",{class:!0}),u(O).forEach(s),J=b(a),w=r(a,"BUTTON",{});var _t=u(w);Q=p(_t,"0%"),_t.forEach(s),V=b(a),k=r(a,"BUTTON",{});var dt=u(k);W=p(dt,"25%"),dt.forEach(s),X=b(a),N=r(a,"BUTTON",{});var ht=u(N);Y=p(ht,"50%"),ht.forEach(s),Z=b(a),y=r(a,"BUTTON",{});var mt=u(y);tt=p(mt,"75%"),mt.forEach(s),et=b(a),B=r(a,"BUTTON",{});var ft=u(B);nt=p(ft,"100%"),ft.forEach(s),a.forEach(s),this.h()},h(){C(_,"slot","start"),C(m,"slot","end"),C(c,"translucent",!0),st($,"href","https://svelte.dev/tutorial/tweened"),st($,"target","_blank"),O.value=d[0],st(O,"class","svelte-1vol2d3"),C(n,"fullscreen",""),C(n,"class","ion-padding")},m(i,g){A(i,c,g),t(c,o),t(o,_),t(_,e),t(o,h),t(o,m),bt(T,m,null),t(o,M),t(o,E),t(E,U),A(i,P,g),A(i,n,g),t(n,S),t(S,q),t(S,$),t($,K),t(n,L),t(n,j),t(n,z),t(n,G),t(n,H),t(n,x),t(n,F),t(n,O),t(n,J),t(n,w),t(w,Q),t(n,V),t(n,k),t(k,W),t(n,X),t(n,N),t(N,Y),t(n,Z),t(n,y),t(y,tt),t(n,et),t(n,B),t(B,nt),R=!0,ot||(lt=[D(w,"click",d[2]),D(k,"click",d[3]),D(N,"click",d[4]),D(y,"click",d[5]),D(B,"click",d[6])],ot=!0)},p(i,g){(!R||g&1)&&(O.value=i[0])},i(i){R||(Tt(T.$$.fragment,i),R=!0)},o(i){gt(T.$$.fragment,i),R=!1},d(i){i&&s(c),$t(T),i&&s(P),i&&s(n),ot=!1,Nt(lt)}}}function Ct(d){let c,o,_;return o=new Bt({props:{$$slots:{default:[Rt]},$$scope:{ctx:d}}}),{c(){c=v(),pt(o.$$.fragment),this.h()},l(e){wt("svelte-1s1m924",document.head).forEach(s),c=b(e),vt(o.$$.fragment,e),this.h()},h(){document.title="Ionic Companion - Svelte Tweened"},m(e,h){A(e,c,h),bt(o,e,h),_=!0},p(e,[h]){const m={};h&129&&(m.$$scope={dirty:h,ctx:e}),o.$set(m)},i(e){_||(Tt(o.$$.fragment,e),_=!0)},o(e){gt(o.$$.fragment,e),_=!1},d(e){e&&s(c),$t(o,e)}}}function Dt(d,c,o){let _;const e=It(0,{duration:2e3,easing:Ut});return kt(d,e,U=>o(0,_=U)),[_,e,()=>e.set(0),()=>e.set(.25),()=>e.set(.5),()=>e.set(.75),()=>e.set(1)]}class jt extends Ot{constructor(c){super(),Et(this,c,Dt,Ct,St,{})}}export{jt as component};