'},[]),a3:$.a("Attribute Accumulation"),a15:$.a("Feel free to use the same attribute multiple times. Compiler will merge them into one."),a1:[]})," ",F({a14:$.a(function(){return'<button\n ID="myDiv"\n onClick={() => alert(\'Hello World!\')}\n onclick={() => alert(\'Goodbye World!\')}\n innerHTML="Click Me"\n auto_focus\n/>'},[]),a3:$.a("Case Insensitivity"),a15:$.a("Whatever the case you use for HTML attribute names, compiler will interpret them correctly."),a1:[]})," ",F({a14:$.a(function(){return'<video\n bind:currentTime={$progress}\n bind:duration={$duration}\n bind:paused={$isPaused}\n bind:volume={$volume}\n bind:muted={$isMuted}\n/>'},[]),a3:$.a("Bound Attributes"),a15:$.a("Brought from Svelte, keep form controls and media elements attributes in sync with variables."),a1:[]})," ",F({a14:$.a(function(){return'<p\n color="red"\n font-size={20}\n font-weight="bold"\n text-align="center"\n text-decoration="underline"\n/>'},[]),a3:$.a("Attribute-Like Styles"),a15:$.a("No problem if you want to define styles as attributes. Compiler can differentiate them from attributes."),a1:[]})," ",F({a14:$.a(function(){return'<Card\n title="Hello World"\n link="https://google.com"\n style:color="black"\n event:onClick={toggleBgColor}\n event:onClick={() => console.log("Card clicked!")}\n/>'},[]),a3:$.a("Component Styling"),a15:$.a("Style components or add event listeners to them using attributes. No need to manipulate their definitions."),a1:[]})," ",F({a14:$.a(function(){return'<Range\n min={0}\n max={$duration || 0}\n step={1}\n disabled={false}\n $value={$progress}\n/>'},[]),a3:$.a("2-Way Binding"),a15:$.a("Brought from Angular, keep parents and their children in communication with each other."),a1:[]})])])])," ",_({a2:"nativeperformance",a10:"Native",a3:"Performance",a4:(r=$.a(""),f=$.a(undefined),s=Array(100).fill(0).map((n,a)=>({id:a+1,name:"Joe Doe "+(a+1),email:"joedoe"+(a+1)+"@example.com"})),d=$.d(s,n=>n.id),$.f(function(){$.e(d,s.filter(n=>n.name.toLowerCase().includes($.b(r).toLowerCase())))},[r]),$.j("div",[[function(n){n.className="relative flex h-[420px] flex-col gap-2 overflow-auto text-gray-100"}]],[$.j("input",[[function(n){n.placeholder="Search by name...",n.className="rounded-md border-2 border-white bg-transparent p-2 text-gray-100 outline-none",n.oninput=function(n){n.target.$ru="value",$.c(r,n.target.value,n.target)}}],[function(n){"value"===n.$ru?n.$ru=null:n.value=$.b(r)},r]])," ",$.i(function(){return $.b(r)&&$.j("span",[[function(n){n.className="text-gray-100"}]],["Showing results for: ",$.i(function(){return $.b(r)},[r])])},[r])," ",$.j("div",[[function(n){n.className="flex h-full flex-col gap-2 overflow-auto"}]],[$.h(d,n=>$.j("div",[[function(a){a.className="flex flex-row gap-4 rounded-md border-2 p-4 transition-colors "+(($.b(n).id===$.b(f)?"border-[#44ffcd]":"border-white")||"")},n,f],[function(a){a.onclick=()=>$.c(f,$.b(n).id)}]],[$.j("div",[[function(n){n.className="flex flex-col justify-center"}]],[$.j("img",[[function(n){n.className="h-12 w-12 rounded-full bg-gray-300",n.src=u(z)}],[function(a){a.alt=`avatar of ${$.b(n).name}`},n]])])," ",$.j("div",[[function(n){n.className="flex flex-1 flex-col justify-center overflow-hidden"}]],[$.j("div",[[function(n){n.className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-bold text-gray-100"}]],function(){return[function(){return $.b(n).name},[n]]})," ",$.j("div",[[function(n){n.className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-secondary"}]],function(){return[function(){return $.b(n).email},[n]]})])," ",$.j("div",[[function(n){n.className="flex flex-col justify-center"}]],[$.j("button",[[function(a){a.className="flex h-8 w-8 items-center justify-center rounded bg-transparent transition-colors",a.setAttribute("aria-label","remove item"),a.onclick=a=>{a.stopPropagation(),s.splice(s.indexOf($.b(n)),1),$.e(d,s.filter(n=>n.name.toLowerCase().includes($.b(r).toLowerCase())))}}]],[$.l($.j("svg",[[function(n){n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24")}]],[$.j("path",[[function(n){n.setAttribute("d","M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.11A3.75 3.75 0 0 1 15.03 22H8.97a3.75 3.75 0 0 1-3.73-3.39L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9c.41 0 .75.34.75.75v7.5a.75.75 0 0 1-1.5 0v-7.5c0-.41.34-.75.75-.75m-7.52 9.47a2.25 2.25 0 0 0 2.24 2.03h6.06c1.15 0 2.12-.88 2.24-2.03L18.42 6.5H5.58z")}]],undefined,1)],1),[[function(a){a.style.fill=$.b(n).id===$.b(f)?"#44ffcd":"#ffffff"},n,f]])])])]))])])),a5:"right",a6:"bg-vivid-green",a7:"text-gray-100",a1:[$.j("p",[[function(n){n.className="mb-4"}]],[" Mango does not use a virtual DOM but instead applies changes through DOM API. To reduce the time needed to render changes, only attributes whose values have changed are updated natively without re-rendering the entire element. "])," ",$.j("p",undefined,[" Innovated techniques are used to manipulate and render massive lists efficiently. This is done by manipulating values of elements attributes instead of replacing the existing elements with new ones. "])]})," ",_({a2:"friendlytomemory",a10:"Friendly",a3:"To Memory",a4:$.j("div",[[function(n){n.className="flex w-full flex-col gap-4"}]],[$.j("div",[[function(n){n.className="flex w-full flex-row items-center justify-between text-gray-100"}]],[$.j("div",[[function(n){n.className="flex flex-1 flex-col items-start justify-center gap-1.5"}]],[[["Mango",18.57,"linear-gradient(45deg, #ffe259, #ffa751)"],["Svelte",22.86,"linear-gradient(45deg, #dd0000, #ff7700)"],["Vue",26.77,"linear-gradient(45deg, #00d6a3, #44ffcd)"],["React",34.65,"linear-gradient(45deg, #3255ff, #00c8ff)"]].map(n=>$.j("div",[[function(n){n.className="relative flex w-full flex-row items-center justify-start gap-1.5"}]],[$.j("span",[[function(n){n.className="min-w-[3.5rem] text-sm"}]],[n[0]])," ",$.j("div",[[function(a){a.className="h-2 rounded-full",a.style.width=`${n[1]/34.65*100}%`,a.style.background=n[2]}]])," ",$.j("span",[[function(n){n.className="text-sm"}]],[n[1]])]))])])," ",$.j("div",undefined,[$.j("p",[[function(n){n.className="text-center text-sm text-tertiary"}]],[" Size of memory snapshot when 10K rows are rendered. Unit: megabytes "])])]),a5:"center",a6:"bg-vivid-indigo",a7:"text-gray-100",a1:[$.j("p",undefined,[" Every piece of data retained by Mango is optimized for low memory consumption. This makes it ideal for building web applications that are used on small gadgets. "])]})," ",_({a2:"powerefficient",a3:"Power Efficient",a4:(k=$.a(0),g=$.a(1),m=$.a(0),b=$.a(1),h=$.a(0),x=$.a(1),v=$.a(0),y=$.a("--"),w=$.a(!0),j=!0,$.f(function(){let n=j?I.easeInOutElastic:I.easeInOutExpo;$.c(k,250*n($.b(v))),$.c(g,1+.5*n($.b(v))),$.c(m,250*n($.b(v)+.04)),$.c(b,1+.5*n($.b(v)+.04)),$.c(h,250*n($.b(v)+.08)),$.c(x,1+.5*n($.b(v)+.08))},[v]),o=()=>{N-- >0||(j?$.b(v)+.006>=1?($.c(v,1),j=!1,N=50):$.c(v,$.b(v)+.006):$.b(v)-.006<=0?($.c(v,0),j=!0,N=50):$.c(v,$.b(v)-.006))},N=50,c=()=>{$.c(w,!0);let n=Date.now(),a=0,t=0;requestAnimationFrame(function s(){let c=Date.now();a=Math.round(1e3/(c-n)),t--<=0&&($.c(y,a),t=20),n=c,$.b(w)?requestAnimationFrame(s):$.c(y,"--"),o()})},p=()=>{$.c(w,!1),N=0},i=()=>{p(),$.c(v,0),j=!0},l=()=>{$.b(w)?p():c()},c(),$.j("div",[[function(n){n.className="relative flex w-full flex-col items-center justify-center gap-4 m-auto"}]],[$.j("div",[[function(n){n.className="w-[300px]"}]],[$.j("div",[[function(n){n.className="relative mb-2 h-12 w-12 rounded-full bg-green-500"}],[function(n){n.style.transform=`translateX(${$.b(k)}px) scale(${$.b(g)})`},g,k]])," ",$.j("div",[[function(n){n.className="relative mb-2 h-12 w-12 rounded-full bg-blue-500"}],[function(n){n.style.transform=`translateX(${$.b(m)}px) scale(${$.b(b)})`},b,m]])," ",$.j("div",[[function(n){n.className="relative h-12 w-12 rounded-full bg-red-500"}],[function(n){n.style.transform=`translateX(${$.b(h)}px) scale(${$.b(x)})`},x,h]])])," ",$.j("input",[[function(n){n.className="w-full",n.type="range",n.min="0",n.max="1",n.step="0.01",n.oninput=function(n){n.target.$ru="value",$.c(v,parseFloat(n.target.value),n.target)},n.setAttribute("aria-label","animation seek bar")}],[function(n){"value"===n.$ru?n.$ru=null:n.value=$.b(v)},v]])," ",$.j("div",[[function(n){n.className="flex flex-row gap-4"}]],[$.j("button",[[function(n){n.onclick=l,n.setAttribute("aria-label","toggle animation")}]],function(){return[function(){return $.b(w)?$.l(B({a1:[]}),[[function(n){n.style.fill="#ffffff"}]]):$.l(R({a1:[]}),[[function(n){n.style.fill="#ffffff"}]])},[w]]})," ",$.j("button",[[function(n){n.onclick=i,n.setAttribute("aria-label","stop animation")}]],[$.l($.j("svg",[[function(n){n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24")}]],[$.j("path",[[function(n){n.setAttribute("d","M19.25 4.5c.14 0 .25.11.25.25v14.5c0 .14-.11.25-.25.25H4.75a.25.25 0 0 1-.25-.25V4.75c0-.14.11-.25.25-.25zM4.75 3C3.78 3 3 3.78 3 4.75v14.5c0 .97.78 1.75 1.75 1.75h14.5c.97 0 1.75-.78 1.75-1.75V4.75C21 3.78 20.22 3 19.25 3z")}]],undefined,1)],1),[[function(n){n.style.fill="#ffffff"}]])])])," ",$.j("span",[[function(n){n.className="text-xl text-gray-100"}]],[$.i(function(){return Math.round(100*$.b(v))},[v]),"% @ ",$.i(function(){return $.b(y)},[y])," fps "])])),a5:"left",a6:"bg-vivid-red",a7:"text-gray-100",a1:[$.j("p",undefined,[" Unlike other frameworks, Mango exploits the existing implementation of DOM API to render any change that happened. It does not use a virtual DOM, nor re-render the entire element when a change occurs. Instead, it uses publisher-subscriber design pattern to update the attributes of the updated element natively. This secures enough resources to run heavy tasks such as JavaScript-driven animations. "])]})," ",_({a2:"powerefficient",a3:"Bound Attributes",a4:function(){let n,a;var t=$.a(0),s=$.a(1),o=$.a(undefined),c=$.a(!0),p=$.a(!1),i=$.a(!0);function l(a){a.preventDefault(),clearTimeout(n),n=setTimeout(()=>$.c(i,!1),2500),$.c(i,!0)}function r(n){if(n.preventDefault(),!$.b(o)||"touchmove"!==n.type&&!(1&n.buttons))return;let a="touchmove"===n.type?n.touches[0].clientX:n.clientX,{left:s,right:c}=this.getBoundingClientRect();$.c(t,$.b(o)*(a-s)/(c-s))}function f(){a=new Date}function d(n){new Date-a<300&&($.b(c)?n.target.play():n.target.pause())}function k(n){n.preventDefault(),$.c(s,Math.max(0,Math.min(1,$.b(s)-n.deltaY/6e3)))}function g(n){if(isNaN(n))return"...";let a=Math.floor(n/60),t=Math.floor(n%1*1e3);return t<10?t="00"+t:t<100&&(t="0"+t),(n=Math.floor(n%60))<10&&(n="0"+n),`${a}:${n}:${t}`}return $.j("div",[[function(n){n.className="a3",n.onmousemove=l,n.ontouchmove=l}]],[$.j("video",[[function(n){n.poster=u(W),n.src=u(O),n.onmousemove=r,n.ontouchmove=r,n.onmousedown=f,n.onmouseup=d,n.onwheel=k,n.onplay=function(n){n.target.$di||(n.target.$di=setInterval(function(){n.target.$ru="currentTime",$.c(t,n.target.currentTime,n.target)},30)),n.target.$ru="paused",$.c(c,n.target.paused,n.target)},n.onpause=function(n){clearInterval(n.target.$di),n.target.$di=null,n.target.$ru="paused",$.c(c,n.target.paused,n.target)},n.onseeking=function(n){n.target.$di||(n.target.$di=setInterval(function(){n.target.$ru="currentTime",$.c(t,n.target.currentTime,n.target)},30))},n.onseeked=function(n){n.target.paused&&(clearInterval(n.target.$di),n.target.$di=null)},n.ondurationchange=function(n){$.c(o,n.target.duration)},n.onvolumechange=function(n){n.target.$ru="volume",$.c(s,n.target.volume,n.target),n.target.$ru="muted",$.c(p,n.target.muted,n.target)}}],[function(n){"currentTime"===n.$ru?n.$ru=null:n.currentTime=$.b(t)},t],[function(n){"paused"===n.$ru?n.$ru=null:$.b(c)?n.pause():n.play()},c],[function(n){"volume"===n.$ru?n.$ru=null:n.volume=$.b(s)},s],[function(n){"muted"===n.$ru?n.$ru=null:n.muted=$.b(p)},p]],[$.j("track",[[function(n){n.kind="captions"}]])])," ",$.j("div",[[function(n){n.className="a4"}],[function(n){n.style.opacity=$.b(c)||$.b(o)&&$.b(i)?"1":"0"},o,c,i]],[$.j("a",[[function(n){n.href="https://youtu.be/SkVqJ1SGeL0",n.target="_blank"}]],[" Caminandes: Llamigos "])," ",$.j("p",undefined,["by Blender Foundation"])])," ",$.j("div",[[function(n){n.className="a2"}],[function(n){n.style.opacity=$.b(c)||$.b(o)&&$.b(i)?"1":"0"},o,c,i]],[L({a16:0,a17:$.a(function(){return $.b(o)||0},[o]),a18:t,a1:[]})," ",$.j("div",[[function(n){n.className="a5"}]],[$.i(function(){return $.b(c)?$.l(R({a1:[]}),[[function(n){n.onclick=()=>$.c(c,!1),n.style.fill="#ffffff",n.style.opacity="0.9",n.style.cursor="pointer"}]]):$.l(B({a1:[]}),[[function(n){n.onclick=()=>$.c(c,!0),n.style.fill="#ffffff",n.style.opacity="0.9",n.style.cursor="pointer"}]])},[c])," ",$.i(function(){return $.b(p)||0===$.b(s)?$.l($.j("svg",[[function(n){n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24")}]],[$.j("path",[[function(n){n.setAttribute("d","M3.28 2.22a.75.75 0 1 0-1.06 1.06L6.44 7.5H4.25C3.01 7.5 2 8.5 2 9.75v4.5c0 1.24 1 2.25 2.25 2.25h3.68c.18 0 .36.06.5.19l4.49 3.99c.8.72 2.08.14 2.08-.93v-3.69l5.72 5.72a.75.75 0 0 0 1.06-1.06zM13.5 14.56v4.63l-4.08-3.63A2.25 2.25 0 0 0 7.93 15H4.25a.75.75 0 0 1-.75-.75v-4.5c0-.42.34-.75.75-.75h3.68zm0-9.75v5.5l1.5 1.5V4.26a1.25 1.25 0 0 0-2.08-.93l-3.4 3.02 1.06 1.06zm3.64 9.15 1.14 1.14a6.97 6.97 0 0 0-.12-6.43.75.75 0 0 0-1.32.72 5.47 5.47 0 0 1 .3 4.57m2.25 2.25 1.1 1.09a9.96 9.96 0 0 0-.45-11.25.75.75 0 0 0-1.2.9 8.46 8.46 0 0 1 .55 9.26")}]],undefined,1)],1),[[function(n){n.onclick=()=>$.c(p,!$.b(p)),n.style.fill="#ffffff",n.style.opacity="0.9",n.style.cursor="pointer"}]]):.5>$.b(s)?$.l($.j("svg",[[function(n){n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24")}]],[$.j("path",[[function(n){n.setAttribute("d","M14.7 3.44c.2.23.3.51.3.81v15.5a1.25 1.25 0 0 1-2.06.96L7.98 16.5H4.25c-1.24 0-2.25-1-2.25-2.25v-4.5C2 8.51 3 7.5 4.25 7.5h3.73l4.96-4.2a1.25 1.25 0 0 1 1.76.14M13.5 4.8 8.52 9H4.25a.75.75 0 0 0-.75.75v4.5c0 .41.34.75.75.75h4.27l4.98 4.21zm3.6 3.85a.75.75 0 0 1 1.03.25c.58.94.87 2 .87 3.14 0 1.15-.3 2.2-.87 3.14a.75.75 0 1 1-1.28-.78c.43-.7.65-1.48.65-2.36s-.22-1.66-.65-2.36a.75.75 0 0 1 .25-1.03")}]],undefined,1)],1),[[function(n){n.onclick=()=>$.c(p,!$.b(p)),n.style.fill="#ffffff",n.style.opacity="0.9",n.style.cursor="pointer"}]]):$.l($.j("svg",[[function(n){n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24")}]],[$.j("path",[[function(n){n.setAttribute("d","M15 4.25a1.25 1.25 0 0 0-2.08-.93L8.42 7.3a.75.75 0 0 1-.49.19H4.25A2.26 2.26 0 0 0 2 9.75v4.5c0 1.24 1 2.25 2.25 2.25h3.68c.18 0 .36.06.5.19l4.49 3.99c.8.72 2.08.14 2.08-.93zM9.42 8.43l4.08-3.62v14.38l-4.08-3.63A2.25 2.25 0 0 0 7.93 15H4.25a.75.75 0 0 1-.75-.75v-4.5c0-.42.34-.75.75-.75h3.68c.55 0 1.08-.2 1.5-.57ZM19 5.9a.75.75 0 0 1 1.05.15 9.96 9.96 0 0 1 0 11.9.75.75 0 1 1-1.2-.9 8.46 8.46 0 0 0 0-10.1A.75.75 0 0 1 19 5.9m-1.85 2.47a.75.75 0 0 1 1.02.3 6.97 6.97 0 0 1 0 6.66.75.75 0 0 1-1.32-.72 5.47 5.47 0 0 0 0-5.22.75.75 0 0 1 .3-1.02")}]],undefined,1)],1),[[function(n){n.onclick=()=>$.c(p,!$.b(p)),n.style.fill="#ffffff",n.style.opacity="0.9",n.style.cursor="pointer"}]])},[p,s])," ",$.j("input",[[function(n){n.className="w-16",n.type="range",n.min="0",n.max="1",n.step="0.01",n.oninput=function(n){n.target.$ru="value",$.c(s,parseFloat(n.target.value),n.target)},n.setAttribute("aria-label","animation seek bar"),n.style.accentColor="white",n.style.opacity="0.9"}],[function(n){"value"===n.$ru?n.$ru=null:n.value=$.b(s)},s]])," ",$.j("div",undefined,[$.j("span",[[function(n){n.className="a1"}]],function(){return[function(){return g($.b(t))},[t]]})," ",$.j("span",undefined,["/"])," ",$.j("span",[[function(n){n.className="a1"}]],function(){return[function(){return g($.b(o))},[o]]})])])])])}({a1:[]}),a5:"right",a6:"bg-vivid-purple",a7:"text-gray-100",a1:[$.j("p",undefined,[" Developing custom media players and form controls isn't a problem anymore. Mango provides a set of attributes that can be kept in sync with any state variable. Whenever the state of your application changes, the bound attributes are updated automatically. The same applies when the value of a bound attribute changes, where the state variable is updated accordingly. "])]})," ",$.j("footer",[[function(n){n.className="w-full justify-center px-4 pb-4 text-center text-sm leading-relaxed text-gray-400"}]],[$.j("p",[[function(n){n.className=""}]],[" Made with ❤️ by"," "," ",$.j("a",[[function(n){n.className="text-gray-100 hover:text-gray-200",n.href="https://github.com/GeeekyBoy",n.target="_blank"}]],[" GeeekyBoy "])," "," in Egypt ",$.j("br")," ",$.j("a",[[function(n){n.className="text-gray-100 hover:text-gray-200",n.href="https://github.com/microsoft/fluentui-emoji",n.target="_blank"}]],[" Fluent Emojis "])," "," designed by Microsoft ",$.j("br")," Copyright \xa9 ",new Date().getFullYear()," GeeekyBoy & Mango Contributors "])])])])})();