Doc updates.
h3rald h3rald@h3rald.com
Sat, 23 May 2020 23:01:24 +0200
5 files changed,
109 insertions(+),
56 deletions(-)
M
README.md
→
README.md
@@ -11,7 +11,7 @@ **H3** is a microframework to build client-side single-page applications (SPAs) in modern JavaScript.
H3 is also: -- **tiny**, under [700 sloc](https://github.com/h3rald/h3/blob/master/h3.js). +- **tiny**, under [750 sloc](https://github.com/h3rald/h3/blob/master/h3.js). - **modern**, in the sense that it runs only in modern browsers (latest versions of Chrome, Firefox, Edge & similar). - **easy** to learn, its API is comprised of only six methods and two properties.
M
docs/H3_DeveloperGuide.htm
→
docs/H3_DeveloperGuide.htm
@@ -7260,7 +7260,11 @@ <li><a href="#HyperScript">HyperScript</a></li>
<li><a href="#Components">Components</a></li> <li><a href="#Store">Store</a></li> <li><a href="#Modules">Modules</a></li> - <li><a href="#Router">Router</a></li> + <li><a href="#Router">Router</a> + <ul> + <li><a href="#Route-Components">Route Components</a></li> + </ul> + </li> <li><a href="#How-everything-works...">How everything works...</a></li> </ul> </li>@@ -7320,7 +7324,7 @@
<p>H3 is also:</p> <ul> -<li><strong>tiny</strong>, under <a href="https://github.com/h3rald/h3/blob/master/h3.js">700 sloc</a>.</li> +<li><strong>tiny</strong>, under <a href="https://github.com/h3rald/h3/blob/master/h3.js">750 sloc</a>.</li> <li><strong>modern</strong>, in the sense that it runs only in modern browsers (latest versions of Chrome, Firefox, Edge & similar).</li> <li><strong>easy</strong> to learn, its API is comprised of only six methods and two properties.</li> </ul>@@ -7500,12 +7504,29 @@ <p>H3 comes with a very minimal but fully functional URL fragment router. You create your application routes when initializing your application, and you can navigate to them using ordinary <code>href</code> links or programmatically using the <code>h3.navigateTo</code> method.</p>
<p>The current route is always accessible via the <code>h3.route</code> property.</p> +<a name="Route-Components"></a> +<h4>Route Components<a href="#document-top" title="Go to top"></a></h4> + +<p>A route components is a top-level component specified to handle a specific route. Unlike ordinary components, route components:</p> + +<ul> +<li>may have a dedicated <em>setup</em> (after the route component is added to the DOM) and <em>teardown</em> phase (after the route component is removed from the DOM and the new route component is loaded).</li> +<li>may have built-in local state, initialized during setup and (typically) destroyed during teardown.</li> +</ul> + + +<p>Route components are stll created using ordinary function returning a VNode, but you can optionally define a <strong>setup</strong> and a <strong>teardown</strong> method on them (Functions are Objects in JavaScript after all…) to be executed during the corresponding phase.</p> + +<p>Note that: +* Both the <strong>setup</strong> method take an object as a parameter, representing the component state. Such object will be empty the first time the <strong>setup</strong> method is called for a given component, but it may contain properties not removed during teardowns. +* The <strong>teardown</strong> method can return an object, which will be retained as component state. If however nothing is returned, the component state is deleted.</p> + <a name="How-everything-works..."></a> <h3>How everything works…<a href="#document-top" title="Go to top"></a></h3> <p>The following sequence diagram summarizes how H3 works, from its initialization to the redraw and navigation phases.</p> -<p><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBjb250ZW50U2NyaXB0VHlwZT0iYXBwbGljYXRpb24vZWNtYXNjcmlwdCIgY29udGVudFN0eWxlVHlwZT0idGV4dC9jc3MiIGhlaWdodD0iODgwcHgiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHN0eWxlPSJ3aWR0aDo3OTBweDtoZWlnaHQ6ODgwcHg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA3OTAgODgwIiB3aWR0aD0iNzkwcHgiIHpvb21BbmRQYW49Im1hZ25pZnkiPjxkZWZzPjxmaWx0ZXIgaGVpZ2h0PSIzMDAlIiBpZD0iZjFkYmh5Y2Z5NTBvemgiIHdpZHRoPSIzMDAlIiB4PSItMSIgeT0iLTEiPjxmZUdhdXNzaWFuQmx1ciByZXN1bHQ9ImJsdXJPdXQiIHN0ZERldmlhdGlvbj0iMi4wIi8+PGZlQ29sb3JNYXRyaXggaW49ImJsdXJPdXQiIHJlc3VsdD0iYmx1ck91dDIiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAuNCAwIi8+PGZlT2Zmc2V0IGR4PSI0LjAiIGR5PSI0LjAiIGluPSJibHVyT3V0MiIgcmVzdWx0PSJibHVyT3V0MyIvPjxmZUJsZW5kIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImJsdXJPdXQzIiBtb2RlPSJub3JtYWwiLz48L2ZpbHRlcj48L2RlZnM+PGc+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTgiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMjA1IiB4PSIyOTEuNzUiIHk9IjI2LjcwOCI+SDMgU2VxdWVuY2UgRGlhZ3JhbTwvdGV4dD48cmVjdCBmaWxsPSIjRkZGRkZGIiBmaWx0ZXI9InVybCgjZjFkYmh5Y2Z5NTBvemgpIiBoZWlnaHQ9IjEwNC41MzEzIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDIuMDsiIHdpZHRoPSI1MDkiIHg9IjE4My41IiB5PSI0NTAuNzEwOSIvPjxyZWN0IGZpbGw9IiNGRkZGRkYiIGZpbHRlcj0idXJsKCNmMWRiaHljZnk1MG96aCkiIGhlaWdodD0iMjIxLjA2MjUiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMi4wOyIgd2lkdGg9IjY3OS41IiB4PSIxMyIgeT0iNTY5LjI0MjIiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogNS4wLDUuMDsiIHgxPSI2NyIgeDI9IjY3IiB5MT0iMTAwLjI1IiB5Mj0iODA3LjMwNDciLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogNS4wLDUuMDsiIHgxPSIyMzkuNSIgeDI9IjIzOS41IiB5MT0iMTAwLjI1IiB5Mj0iODA3LjMwNDciLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogNS4wLDUuMDsiIHgxPSIzODMuNSIgeDI9IjM4My41IiB5MT0iMTAwLjI1IiB5Mj0iODA3LjMwNDciLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogNS4wLDUuMDsiIHgxPSI0OTYiIHgyPSI0OTYiIHkxPSIxMDAuMjUiIHkyPSI4MDcuMzA0NyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyBzdHJva2UtZGFzaGFycmF5OiA1LjAsNS4wOyIgeDE9IjY1OS41IiB4Mj0iNjU5LjUiIHkxPSIxMDAuMjUiIHkyPSI4MDcuMzA0NyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjgzIiB4PSIyMyIgeT0iOTYuOTQ4MiI+QXBwbGljYXRpb248L3RleHQ+PGVsbGlwc2UgY3g9IjY3LjUiIGN5PSI2Ny45NTMxIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZjFkYmh5Y2Z5NTBvemgpIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB4MT0iNTUuNSIgeDI9Ijc5LjUiIHkxPSI4MS45NTMxIiB5Mj0iODEuOTUzMSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjgzIiB4PSIyMyIgeT0iODE5LjI5OTgiPkFwcGxpY2F0aW9uPC90ZXh0PjxlbGxpcHNlIGN4PSI2Ny41IiBjeT0iODM4LjYwMTYiIGZpbGw9IiNGRUZFQ0UiIGZpbHRlcj0idXJsKCNmMWRiaHljZnk1MG96aCkiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSI1NS41IiB4Mj0iNzkuNSIgeTE9Ijg1Mi42MDE2IiB5Mj0iODUyLjYwMTYiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI4NiIgeD0iMTkzLjUiIHk9Ijk2Ljk0ODIiPkNvbXBvbmVudDwvdGV4dD48ZWxsaXBzZSBjeD0iMjM5LjUiIGN5PSI2Ny45NTMxIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZjFkYmh5Y2Z5NTBvemgpIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyMzUuNSw1NS45NTMxLDI0MS41LDUwLjk1MzEsMjM5LjUsNTUuOTUzMSwyNDEuNSw2MC45NTMxLDIzNS41LDU1Ljk1MzEiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijg2IiB4PSIxOTMuNSIgeT0iODE5LjI5OTgiPkNvbXBvbmVudDwvdGV4dD48ZWxsaXBzZSBjeD0iMjM5LjUiIGN5PSI4MzguNjAxNiIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2YxZGJoeWNmeTUwb3poKSIgcng9IjEyIiByeT0iMTIiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMi4wOyIvPjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjM1LjUsODI2LjYwMTYsMjQxLjUsODIxLjYwMTYsMjM5LjUsODI2LjYwMTYsMjQxLjUsODMxLjYwMTYsMjM1LjUsODI2LjYwMTYiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjE5IiB4PSIzNzEiIHk9Ijk2Ljk0ODIiPkgzPC90ZXh0PjxlbGxpcHNlIGN4PSIzODMuNSIgY3k9IjY3Ljk1MzEiIGZpbGw9IiNGRUZFQ0UiIGZpbHRlcj0idXJsKCNmMWRiaHljZnk1MG96aCkiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSIzNzEuNSIgeDI9IjM5NS41IiB5MT0iODEuOTUzMSIgeTI9IjgxLjk1MzEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxOSIgeD0iMzcxIiB5PSI4MTkuMjk5OCI+SDM8L3RleHQ+PGVsbGlwc2UgY3g9IjM4My41IiBjeT0iODM4LjYwMTYiIGZpbGw9IiNGRUZFQ0UiIGZpbHRlcj0idXJsKCNmMWRiaHljZnk1MG96aCkiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSIzNzEuNSIgeDI9IjM5NS41IiB5MT0iODUyLjYwMTYiIHkyPSI4NTIuNjAxNiIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjQ5IiB4PSI0NjkiIHk9Ijk2Ljk0ODIiPlJvdXRlcjwvdGV4dD48ZWxsaXBzZSBjeD0iNDk2LjUiIGN5PSI2Ny45NTMxIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZjFkYmh5Y2Z5NTBvemgpIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB4MT0iNDg0LjUiIHgyPSI1MDguNSIgeTE9IjgxLjk1MzEiIHkyPSI4MS45NTMxIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNDkiIHg9IjQ2OSIgeT0iODE5LjI5OTgiPlJvdXRlcjwvdGV4dD48ZWxsaXBzZSBjeD0iNDk2LjUiIGN5PSI4MzguNjAxNiIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2YxZGJoeWNmeTUwb3poKSIgcng9IjEyIiByeT0iMTIiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMi4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMi4wOyIgeDE9IjQ4NC41IiB4Mj0iNTA4LjUiIHkxPSI4NTIuNjAxNiIgeTI9Ijg1Mi42MDE2Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNDAiIHg9IjYzNi41IiB5PSI5Ni45NDgyIj5TdG9yZTwvdGV4dD48cGF0aCBkPSJNNjQxLjUsNDcuOTUzMSBDNjQxLjUsMzcuOTUzMSA2NTkuNSwzNy45NTMxIDY1OS41LDM3Ljk1MzEgQzY1OS41LDM3Ljk1MzEgNjc3LjUsMzcuOTUzMSA2NzcuNSw0Ny45NTMxIEw2NzcuNSw3My45NTMxIEM2NzcuNSw4My45NTMxIDY1OS41LDgzLjk1MzEgNjU5LjUsODMuOTUzMSBDNjU5LjUsODMuOTUzMSA2NDEuNSw4My45NTMxIDY0MS41LDczLjk1MzEgTDY0MS41LDQ3Ljk1MzEgIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZjFkYmh5Y2Z5NTBvemgpIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuNTsiLz48cGF0aCBkPSJNNjQxLjUsNDcuOTUzMSBDNjQxLjUsNTcuOTUzMSA2NTkuNSw1Ny45NTMxIDY1OS41LDU3Ljk1MzEgQzY1OS41LDU3Ljk1MzEgNjc3LjUsNTcuOTUzMSA2NzcuNSw0Ny45NTMxICIgZmlsbD0ibm9uZSIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAxLjU7Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNDAiIHg9IjYzNi41IiB5PSI4MTkuMjk5OCI+U3RvcmU8L3RleHQ+PHBhdGggZD0iTTY0MS41LDgzMi42MDE2IEM2NDEuNSw4MjIuNjAxNiA2NTkuNSw4MjIuNjAxNiA2NTkuNSw4MjIuNjAxNiBDNjU5LjUsODIyLjYwMTYgNjc3LjUsODIyLjYwMTYgNjc3LjUsODMyLjYwMTYgTDY3Ny41LDg1OC42MDE2IEM2NzcuNSw4NjguNjAxNiA2NTkuNSw4NjguNjAxNiA2NTkuNSw4NjguNjAxNiBDNjU5LjUsODY4LjYwMTYgNjQxLjUsODY4LjYwMTYgNjQxLjUsODU4LjYwMTYgTDY0MS41LDgzMi42MDE2ICIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2YxZGJoeWNmeTUwb3poKSIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAxLjU7Ii8+PHBhdGggZD0iTTY0MS41LDgzMi42MDE2IEM2NDEuNSw4NDIuNjAxNiA2NTkuNSw4NDIuNjAxNiA2NTkuNSw4NDIuNjAxNiBDNjU5LjUsODQyLjYwMTYgNjc3LjUsODQyLjYwMTYgNjc3LjUsODMyLjYwMTYgIiBmaWxsPSJub25lIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuNTsiLz48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjM3MS41LDEyNy4zODI4LDM4MS41LDEzMS4zODI4LDM3MS41LDEzNS4zODI4LDM3NS41LDEzMS4zODI4IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogMi4wLDIuMDsiIHgxPSI2Ny41IiB4Mj0iMzc3LjUiIHkxPSIxMzEuMzgyOCIgeTI9IjEzMS4zODI4Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjU5IiB4PSI3NC41IiB5PSIxMjYuMzE2OSI+aDMuaW5pdCgpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjQ3LjUsMTU2LjUxNTYsNjU3LjUsMTYwLjUxNTYsNjQ3LjUsMTY0LjUxNTYsNjUxLjUsMTYwLjUxNTYiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjM4My41IiB4Mj0iNjUzLjUiIHkxPSIxNjAuNTE1NiIgeTI9IjE2MC41MTU2Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtc3R5bGU9Iml0YWxpYyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI1NiIgeD0iMzkwLjUiIHk9IjE1NS40NDk3Ij5pbml0aWFsaXplPC90ZXh0PjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjY1OS41IiB4Mj0iNzAxLjUiIHkxPSIxODkuNjQ4NCIgeTI9IjE4OS42NDg0Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNzAxLjUiIHgyPSI3MDEuNSIgeTE9IjE4OS42NDg0IiB5Mj0iMjAyLjY0ODQiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSI2NjAuNSIgeDI9IjcwMS41IiB5MT0iMjAyLjY0ODQiIHkyPSIyMDIuNjQ4NCIvPjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjcwLjUsMTk4LjY0ODQsNjYwLjUsMjAyLjY0ODQsNjcwLjUsMjA2LjY0ODQsNjY2LjUsMjAyLjY0ODQiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXN0eWxlPSJpdGFsaWMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTEyIiB4PSI2NjYuNSIgeT0iMTg0LjU4MjUiPmV4ZWN1dGUgbW9kdWxlczwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjY0Ny41LDIyNy43ODEzLDY1Ny41LDIzMS43ODEzLDY0Ny41LDIzNS43ODEzLDY1MS41LDIzMS43ODEzIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIzODMuNSIgeDI9IjY1My41IiB5MT0iMjMxLjc4MTMiIHkyPSIyMzEuNzgxMyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjkxIiB4PSIzOTAuNSIgeT0iMjI2LjcxNTMiPmRpc3BhdGNoKCRpbml0KTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9Ijc4LjUsMjU2LjkxNDEsNjguNSwyNjAuOTE0MSw3OC41LDI2NC45MTQxLDc0LjUsMjYwLjkxNDEiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjcyLjUiIHgyPSIzODIuNSIgeTE9IjI2MC45MTQxIiB5Mj0iMjYwLjkxNDEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI2MiIgeD0iODQuNSIgeT0iMjU1Ljg0ODEiPnByZVN0YXJ0KCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI0ODQuNSwyODYuMDQ2OSw0OTQuNSwyOTAuMDQ2OSw0ODQuNSwyOTQuMDQ2OSw0ODguNSwyOTAuMDQ2OSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMzgzLjUiIHgyPSI0OTAuNSIgeTE9IjI5MC4wNDY5IiB5Mj0iMjkwLjA0NjkiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC1zdHlsZT0iaXRhbGljIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjU2IiB4PSIzOTAuNSIgeT0iMjg0Ljk4MSI+aW5pdGlhbGl6ZTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjQ4NC41LDMxNS4xNzk3LDQ5NC41LDMxOS4xNzk3LDQ4NC41LDMyMy4xNzk3LDQ4OC41LDMxOS4xNzk3IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIzODMuNSIgeDI9IjQ5MC41IiB5MT0iMzE5LjE3OTciIHkyPSIzMTkuMTc5NyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjQwIiB4PSIzOTAuNSIgeT0iMzE0LjExMzgiPnN0YXJ0KCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSwzNDQuMzEyNSw2NTcuNSwzNDguMzEyNSw2NDcuNSwzNTIuMzEyNSw2NTEuNSwzNDguMzEyNSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNDk2LjUiIHgyPSI2NTMuNSIgeTE9IjM0OC4zMTI1IiB5Mj0iMzQ4LjMxMjUiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMzkiIHg9IjUwMy41IiB5PSIzNDMuMjQ2NiI+ZGlzcGF0Y2goJG5hdmlnYXRpb24pPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjUwLjUsMzczLjQ0NTMsMjQwLjUsMzc3LjQ0NTMsMjUwLjUsMzgxLjQ0NTMsMjQ2LjUsMzc3LjQ0NTMiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjI0NC41IiB4Mj0iNDk1LjUiIHkxPSIzNzcuNDQ1MyIgeTI9IjM3Ny40NDUzIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTIiIHg9IjI1Ni41IiB5PSIzNzIuMzc5NCI+cmVuZGVyKCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSw0MDIuNTc4MSw2NTcuNSw0MDYuNTc4MSw2NDcuNSw0MTAuNTc4MSw2NTEuNSw0MDYuNTc4MSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNDk2LjUiIHgyPSI2NTMuNSIgeTE9IjQwNi41NzgxIiB5Mj0iNDA2LjU3ODEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMTciIHg9IjUwMy41IiB5PSI0MDEuNTEyMiI+ZGlzcGF0Y2goJHJlZHJhdyk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI3OC41LDQzMS43MTA5LDY4LjUsNDM1LjcxMDksNzguNSw0MzkuNzEwOSw3NC41LDQzNS43MTA5IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSI3Mi41IiB4Mj0iMzgyLjUiIHkxPSI0MzUuNzEwOSIgeTI9IjQzNS43MTA5Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNjkiIHg9Ijg0LjUiIHk9IjQzMC42NDUiPnBvc3RTdGFydCgpPC90ZXh0PjxwYXRoIGQ9Ik0xODMuNSw0NTAuNzEwOSBMMjgxLjUsNDUwLjcxMDkgTDI4MS41LDQ1Ny43MTA5IEwyNzEuNSw0NjcuNzEwOSBMMTgzLjUsNDY3LjcxMDkgTDE4My41LDQ1MC43MTA5ICIgZmlsbD0iI0VFRUVFRSIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSIxMDQuNTMxMyIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB3aWR0aD0iNTA5IiB4PSIxODMuNSIgeT0iNDUwLjcxMDkiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9ImJvbGQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTMiIHg9IjE5OC41IiB5PSI0NjMuNzc3OCI+cmVkcmF3PC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMzcxLjUsNDg0Ljk3NjYsMzgxLjUsNDg4Ljk3NjYsMzcxLjUsNDkyLjk3NjYsMzc1LjUsNDg4Ljk3NjYiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjIzOS41IiB4Mj0iMzc3LjUiIHkxPSI0ODguOTc2NiIgeTI9IjQ4OC45NzY2Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijg3IiB4PSIyNDYuNSIgeT0iNDgzLjkxMDYiPmgzLnJlZHJhdygpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjUwLjUsNTE0LjEwOTQsMjQwLjUsNTE4LjEwOTQsMjUwLjUsNTIyLjEwOTQsMjQ2LjUsNTE4LjEwOTQiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjI0NC41IiB4Mj0iMzgyLjUiIHkxPSI1MTguMTA5NCIgeTI9IjUxOC4xMDk0Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTUiIHg9IjI1Ni41IiB5PSI1MTMuMDQzNSI+cmVkcmF3KCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSw1NDMuMjQyMiw2NTcuNSw1NDcuMjQyMiw2NDcuNSw1NTEuMjQyMiw2NTEuNSw1NDcuMjQyMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMzgzLjUiIHgyPSI2NTMuNSIgeTE9IjU0Ny4yNDIyIiB5Mj0iNTQ3LjI0MjIiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMTciIHg9IjM5MC41IiB5PSI1NDIuMTc2MyI+ZGlzcGF0Y2goJHJlZHJhdyk8L3RleHQ+PHBhdGggZD0iTTEzLDU2OS4yNDIyIEwxMzcsNTY5LjI0MjIgTDEzNyw1NzYuMjQyMiBMMTI3LDU4Ni4yNDIyIEwxMyw1ODYuMjQyMiBMMTMsNTY5LjI0MjIgIiBmaWxsPSIjRUVFRUVFIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuMDsiLz48cmVjdCBmaWxsPSJub25lIiBoZWlnaHQ9IjIyMS4wNjI1IiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDIuMDsiIHdpZHRoPSI2NzkuNSIgeD0iMTMiIHk9IjU2OS4yNDIyIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijc5IiB4PSIyOCIgeT0iNTgyLjMwOTEiPm5hdmlnYXRpb248L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIzNzEuNSw2MDMuNTA3OCwzODEuNSw2MDcuNTA3OCwzNzEuNSw2MTEuNTA3OCwzNzUuNSw2MDcuNTA3OCIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMjM5LjUiIHgyPSIzNzcuNSIgeTE9IjYwNy41MDc4IiB5Mj0iNjA3LjUwNzgiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9ImJvbGQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTIwIiB4PSIyNDYuNSIgeT0iNjAyLjQ0MTkiPmgzLm5hdmlnYXRlVG8oKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjQ4NC41LDYzMi42NDA2LDQ5NC41LDYzNi42NDA2LDQ4NC41LDY0MC42NDA2LDQ4OC41LDYzNi42NDA2IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIzODMuNSIgeDI9IjQ5MC41IiB5MT0iNjM2LjY0MDYiIHkyPSI2MzYuNjQwNiIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijg5IiB4PSIzOTAuNSIgeT0iNjMxLjU3NDciPnByb2Nlc3NQYXRoKCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSw2NjEuNzczNCw2NTcuNSw2NjUuNzczNCw2NDcuNSw2NjkuNzczNCw2NTEuNSw2NjUuNzczNCIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNDk2LjUiIHgyPSI2NTMuNSIgeTE9IjY2NS43NzM0IiB5Mj0iNjY1Ljc3MzQiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMzkiIHg9IjUwMy41IiB5PSI2NjAuNzA3NSI+ZGlzcGF0Y2goJG5hdmlnYXRpb24pPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNzguNSw2OTAuOTA2Myw2OC41LDY5NC45MDYzLDc4LjUsNjk4LjkwNjMsNzQuNSw2OTQuOTA2MyIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNzIuNSIgeDI9IjQ5NS41IiB5MT0iNjk0LjkwNjMiIHkyPSI2OTQuOTA2MyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXN0eWxlPSJpdGFsaWMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTQ4IiB4PSI4NC41IiB5PSI2ODkuODQwMyI+cmVtb3ZlIGFsbCBET00gbm9kZXM8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyMjcuNSw3MjAuMDM5MSwyMzcuNSw3MjQuMDM5MSwyMjcuNSw3MjguMDM5MSwyMzEuNSw3MjQuMDM5MSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNjcuNSIgeDI9IjIzMy41IiB5MT0iNzI0LjAzOTEiIHkyPSI3MjQuMDM5MSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXN0eWxlPSJpdGFsaWMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTQ4IiB4PSI3NC41IiB5PSI3MTguOTczMSI+cmVtb3ZlIGFsbCBET00gbm9kZXM8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyNTAuNSw3NDkuMTcxOSwyNDAuNSw3NTMuMTcxOSwyNTAuNSw3NTcuMTcxOSwyNDYuNSw3NTMuMTcxOSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMjQ0LjUiIHgyPSI0OTUuNSIgeTE9Ijc1My4xNzE5IiB5Mj0iNzUzLjE3MTkiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI1MiIgeD0iMjU2LjUiIHk9Ijc0OC4xMDYiPnJlbmRlcigpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjQ3LjUsNzc4LjMwNDcsNjU3LjUsNzgyLjMwNDcsNjQ3LjUsNzg2LjMwNDcsNjUxLjUsNzgyLjMwNDciIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjQ5Ni41IiB4Mj0iNjUzLjUiIHkxPSI3ODIuMzA0NyIgeTI9Ijc4Mi4zMDQ3Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTE3IiB4PSI1MDMuNSIgeT0iNzc3LjIzODgiPmRpc3BhdGNoKCRyZWRyYXcpPC90ZXh0PjwhLS1NRDU9W2NkMWRlNTI0OTZmZmMwMTdhODdlNjI3M2NjZjg3YjIzXQpAc3RhcnR1bWwKdGl0bGUgSDMgU2VxdWVuY2UgRGlhZ3JhbQoKZW50aXR5IEFwcGxpY2F0aW9uCmNvbnRyb2wgQ29tcG9uZW50CmVudGl0eSBIMwplbnRpdHkgUm91dGVyCmRhdGFiYXNlIFN0b3JlCgpBcHBsaWNhdGlvbiAtIC0+IEgzIDogPGI+aDMuaW5pdCgpPC9iPgpIMyAtPiBTdG9yZSA6IC8vaW5pdGlhbGl6ZS8vClN0b3JlIC0+IFN0b3JlIDogLy9leGVjdXRlIG1vZHVsZXMvLwpIMyAtPiBTdG9yZSA6IGRpc3BhdGNoKCRpbml0KQpIMyAtPiBBcHBsaWNhdGlvbiA6IHByZVN0YXJ0KCkKSDMgLT4gUm91dGVyIDogLy9pbml0aWFsaXplLy8KSDMgLT4gUm91dGVyIDogc3RhcnQoKQpSb3V0ZXIgLT4gU3RvcmU6IGRpc3BhdGNoKCRuYXZpZ2F0aW9uKQpSb3V0ZXIgLT4gQ29tcG9uZW50IDogcmVuZGVyKCkKUm91dGVyIC0+IFN0b3JlOiBkaXNwYXRjaCgkcmVkcmF3KQoKSDMgLT4gQXBwbGljYXRpb24gOiBwb3N0U3RhcnQoKQoKZ3JvdXAgcmVkcmF3CiAgICBDb21wb25lbnQgLT4gSDMgOiA8Yj5oMy5yZWRyYXcoKTwvYj4KICAgIEgzIC0+IENvbXBvbmVudCA6IHJlZHJhdygpCiAgICBIMyAtPiBTdG9yZTogZGlzcGF0Y2goJHJlZHJhdykKZW5kCgpncm91cCBuYXZpZ2F0aW9uCiAgICBDb21wb25lbnQgLT4gSDMgOiA8Yj5oMy5uYXZpZ2F0ZVRvKCk8L2I+CiAgICBIMyAtPiBSb3V0ZXIgOiBwcm9jZXNzUGF0aCgpCiAgICBSb3V0ZXIgLT4gU3RvcmU6IGRpc3BhdGNoKCRuYXZpZ2F0aW9uKQogICAgUm91dGVyIC0+IEFwcGxpY2F0aW9uIDogLy9yZW1vdmUgYWxsIERPTSBub2Rlcy8vCiAgICBBcHBsaWNhdGlvbiAtPiBDb21wb25lbnQgOiAvL3JlbW92ZSBhbGwgRE9NIG5vZGVzLy8KICAgIFJvdXRlciAtPiBDb21wb25lbnQgOiByZW5kZXIoKQogICAgUm91dGVyIC0+IFN0b3JlOiBkaXNwYXRjaCgkcmVkcmF3KQogICAgCmVuZApAZW5kdW1sCgpQbGFudFVNTCB2ZXJzaW9uIDEuMjAyMC4wOWJldGExNyhVbmtub3duIGNvbXBpbGUgdGltZSkKKEdQTCBzb3VyY2UgZGlzdHJpYnV0aW9uKQpKYXZhIFJ1bnRpbWU6IEphdmEoVE0pIFNFIFJ1bnRpbWUgRW52aXJvbm1lbnQKSlZNOiBKYXZhIEhvdFNwb3QoVE0pIDY0LUJpdCBTZXJ2ZXIgVk0KSmF2YSBWZXJzaW9uOiAxNC4wLjErNwpPcGVyYXRpbmcgU3lzdGVtOiBMaW51eApEZWZhdWx0IEVuY29kaW5nOiBVVEYtOApMYW5ndWFnZTogZW4KQ291bnRyeTogVVMKLS0+PC9nPjwvc3ZnPg==" alt="Sequence Diagram" /></p> +<p><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBjb250ZW50U2NyaXB0VHlwZT0iYXBwbGljYXRpb24vZWNtYXNjcmlwdCIgY29udGVudFN0eWxlVHlwZT0idGV4dC9jc3MiIGhlaWdodD0iMTAyNnB4IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBzdHlsZT0id2lkdGg6NzkwcHg7aGVpZ2h0OjEwMjZweDsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc5MCAxMDI2IiB3aWR0aD0iNzkwcHgiIHpvb21BbmRQYW49Im1hZ25pZnkiPjxkZWZzPjxmaWx0ZXIgaGVpZ2h0PSIzMDAlIiBpZD0iZnVlMzQ4OXNoMWZhcCIgd2lkdGg9IjMwMCUiIHg9Ii0xIiB5PSItMSI+PGZlR2F1c3NpYW5CbHVyIHJlc3VsdD0iYmx1ck91dCIgc3RkRGV2aWF0aW9uPSIyLjAiLz48ZmVDb2xvck1hdHJpeCBpbj0iYmx1ck91dCIgcmVzdWx0PSJibHVyT3V0MiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIC40IDAiLz48ZmVPZmZzZXQgZHg9IjQuMCIgZHk9IjQuMCIgaW49ImJsdXJPdXQyIiByZXN1bHQ9ImJsdXJPdXQzIi8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iYmx1ck91dDMiIG1vZGU9Im5vcm1hbCIvPjwvZmlsdGVyPjwvZGVmcz48Zz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxOCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIyMDUiIHg9IjI5MS43NSIgeT0iMjYuNzA4Ij5IMyBTZXF1ZW5jZSBEaWFncmFtPC90ZXh0PjxyZWN0IGZpbGw9IiNGRkZGRkYiIGZpbHRlcj0idXJsKCNmdWUzNDg5c2gxZmFwKSIgaGVpZ2h0PSIxMDQuNTMxMyIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB3aWR0aD0iNTA5IiB4PSIxODMuNSIgeT0iNTA4Ljk3NjYiLz48cmVjdCBmaWxsPSIjRkZGRkZGIiBmaWx0ZXI9InVybCgjZnVlMzQ4OXNoMWZhcCkiIGhlaWdodD0iMzA4LjQ2MDkiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMi4wOyIgd2lkdGg9IjY3OS41IiB4PSIxMyIgeT0iNjI3LjUwNzgiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogNS4wLDUuMDsiIHgxPSI2NyIgeDI9IjY3IiB5MT0iMTAwLjI1IiB5Mj0iOTUyLjk2ODgiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogNS4wLDUuMDsiIHgxPSIyMzkuNSIgeDI9IjIzOS41IiB5MT0iMTAwLjI1IiB5Mj0iOTUyLjk2ODgiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogNS4wLDUuMDsiIHgxPSIzODMuNSIgeDI9IjM4My41IiB5MT0iMTAwLjI1IiB5Mj0iOTUyLjk2ODgiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogNS4wLDUuMDsiIHgxPSI0OTYiIHgyPSI0OTYiIHkxPSIxMDAuMjUiIHkyPSI5NTIuOTY4OCIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyBzdHJva2UtZGFzaGFycmF5OiA1LjAsNS4wOyIgeDE9IjY1OS41IiB4Mj0iNjU5LjUiIHkxPSIxMDAuMjUiIHkyPSI5NTIuOTY4OCIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjgzIiB4PSIyMyIgeT0iOTYuOTQ4MiI+QXBwbGljYXRpb248L3RleHQ+PGVsbGlwc2UgY3g9IjY3LjUiIGN5PSI2Ny45NTMxIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZnVlMzQ4OXNoMWZhcCkiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSI1NS41IiB4Mj0iNzkuNSIgeTE9IjgxLjk1MzEiIHkyPSI4MS45NTMxIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iODMiIHg9IjIzIiB5PSI5NjQuOTYzOSI+QXBwbGljYXRpb248L3RleHQ+PGVsbGlwc2UgY3g9IjY3LjUiIGN5PSI5ODQuMjY1NiIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2Z1ZTM0ODlzaDFmYXApIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB4MT0iNTUuNSIgeDI9Ijc5LjUiIHkxPSI5OTguMjY1NiIgeTI9Ijk5OC4yNjU2Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iODYiIHg9IjE5My41IiB5PSI5Ni45NDgyIj5Db21wb25lbnQ8L3RleHQ+PGVsbGlwc2UgY3g9IjIzOS41IiBjeT0iNjcuOTUzMSIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2Z1ZTM0ODlzaDFmYXApIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyMzUuNSw1NS45NTMxLDI0MS41LDUwLjk1MzEsMjM5LjUsNTUuOTUzMSwyNDEuNSw2MC45NTMxLDIzNS41LDU1Ljk1MzEiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijg2IiB4PSIxOTMuNSIgeT0iOTY0Ljk2MzkiPkNvbXBvbmVudDwvdGV4dD48ZWxsaXBzZSBjeD0iMjM5LjUiIGN5PSI5ODQuMjY1NiIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2Z1ZTM0ODlzaDFmYXApIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyMzUuNSw5NzIuMjY1NiwyNDEuNSw5NjcuMjY1NiwyMzkuNSw5NzIuMjY1NiwyNDEuNSw5NzcuMjY1NiwyMzUuNSw5NzIuMjY1NiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTkiIHg9IjM3MSIgeT0iOTYuOTQ4MiI+SDM8L3RleHQ+PGVsbGlwc2UgY3g9IjM4My41IiBjeT0iNjcuOTUzMSIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2Z1ZTM0ODlzaDFmYXApIiByeD0iMTIiIHJ5PSIxMiIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB4MT0iMzcxLjUiIHgyPSIzOTUuNSIgeTE9IjgxLjk1MzEiIHkyPSI4MS45NTMxIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTkiIHg9IjM3MSIgeT0iOTY0Ljk2MzkiPkgzPC90ZXh0PjxlbGxpcHNlIGN4PSIzODMuNSIgY3k9Ijk4NC4yNjU2IiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZnVlMzQ4OXNoMWZhcCkiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSIzNzEuNSIgeDI9IjM5NS41IiB5MT0iOTk4LjI2NTYiIHkyPSI5OTguMjY1NiIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjQ5IiB4PSI0NjkiIHk9Ijk2Ljk0ODIiPlJvdXRlcjwvdGV4dD48ZWxsaXBzZSBjeD0iNDk2LjUiIGN5PSI2Ny45NTMxIiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZnVlMzQ4OXNoMWZhcCkiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSI0ODQuNSIgeDI9IjUwOC41IiB5MT0iODEuOTUzMSIgeTI9IjgxLjk1MzEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI0OSIgeD0iNDY5IiB5PSI5NjQuOTYzOSI+Um91dGVyPC90ZXh0PjxlbGxpcHNlIGN4PSI0OTYuNSIgY3k9Ijk4NC4yNjU2IiBmaWxsPSIjRkVGRUNFIiBmaWx0ZXI9InVybCgjZnVlMzQ4OXNoMWZhcCkiIHJ4PSIxMiIgcnk9IjEyIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDIuMDsiIHgxPSI0ODQuNSIgeDI9IjUwOC41IiB5MT0iOTk4LjI2NTYiIHkyPSI5OTguMjY1NiIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjQwIiB4PSI2MzYuNSIgeT0iOTYuOTQ4MiI+U3RvcmU8L3RleHQ+PHBhdGggZD0iTTY0MS41LDQ3Ljk1MzEgQzY0MS41LDM3Ljk1MzEgNjU5LjUsMzcuOTUzMSA2NTkuNSwzNy45NTMxIEM2NTkuNSwzNy45NTMxIDY3Ny41LDM3Ljk1MzEgNjc3LjUsNDcuOTUzMSBMNjc3LjUsNzMuOTUzMSBDNjc3LjUsODMuOTUzMSA2NTkuNSw4My45NTMxIDY1OS41LDgzLjk1MzEgQzY1OS41LDgzLjk1MzEgNjQxLjUsODMuOTUzMSA2NDEuNSw3My45NTMxIEw2NDEuNSw0Ny45NTMxICIgZmlsbD0iI0ZFRkVDRSIgZmlsdGVyPSJ1cmwoI2Z1ZTM0ODlzaDFmYXApIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuNTsiLz48cGF0aCBkPSJNNjQxLjUsNDcuOTUzMSBDNjQxLjUsNTcuOTUzMSA2NTkuNSw1Ny45NTMxIDY1OS41LDU3Ljk1MzEgQzY1OS41LDU3Ljk1MzEgNjc3LjUsNTcuOTUzMSA2NzcuNSw0Ny45NTMxICIgZmlsbD0ibm9uZSIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAxLjU7Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNDAiIHg9IjYzNi41IiB5PSI5NjQuOTYzOSI+U3RvcmU8L3RleHQ+PHBhdGggZD0iTTY0MS41LDk3OC4yNjU2IEM2NDEuNSw5NjguMjY1NiA2NTkuNSw5NjguMjY1NiA2NTkuNSw5NjguMjY1NiBDNjU5LjUsOTY4LjI2NTYgNjc3LjUsOTY4LjI2NTYgNjc3LjUsOTc4LjI2NTYgTDY3Ny41LDEwMDQuMjY1NiBDNjc3LjUsMTAxNC4yNjU2IDY1OS41LDEwMTQuMjY1NiA2NTkuNSwxMDE0LjI2NTYgQzY1OS41LDEwMTQuMjY1NiA2NDEuNSwxMDE0LjI2NTYgNjQxLjUsMTAwNC4yNjU2IEw2NDEuNSw5NzguMjY1NiAiIGZpbGw9IiNGRUZFQ0UiIGZpbHRlcj0idXJsKCNmdWUzNDg5c2gxZmFwKSIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAxLjU7Ii8+PHBhdGggZD0iTTY0MS41LDk3OC4yNjU2IEM2NDEuNSw5ODguMjY1NiA2NTkuNSw5ODguMjY1NiA2NTkuNSw5ODguMjY1NiBDNjU5LjUsOTg4LjI2NTYgNjc3LjUsOTg4LjI2NTYgNjc3LjUsOTc4LjI2NTYgIiBmaWxsPSJub25lIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuNTsiLz48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjM3MS41LDEyNy4zODI4LDM4MS41LDEzMS4zODI4LDM3MS41LDEzNS4zODI4LDM3NS41LDEzMS4zODI4IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsgc3Ryb2tlLWRhc2hhcnJheTogMi4wLDIuMDsiIHgxPSI2Ny41IiB4Mj0iMzc3LjUiIHkxPSIxMzEuMzgyOCIgeTI9IjEzMS4zODI4Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjU5IiB4PSI3NC41IiB5PSIxMjYuMzE2OSI+aDMuaW5pdCgpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjQ3LjUsMTU2LjUxNTYsNjU3LjUsMTYwLjUxNTYsNjQ3LjUsMTY0LjUxNTYsNjUxLjUsMTYwLjUxNTYiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjM4My41IiB4Mj0iNjUzLjUiIHkxPSIxNjAuNTE1NiIgeTI9IjE2MC41MTU2Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtc3R5bGU9Iml0YWxpYyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI1NiIgeD0iMzkwLjUiIHk9IjE1NS40NDk3Ij5pbml0aWFsaXplPC90ZXh0PjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjY1OS41IiB4Mj0iNzAxLjUiIHkxPSIxODkuNjQ4NCIgeTI9IjE4OS42NDg0Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNzAxLjUiIHgyPSI3MDEuNSIgeTE9IjE4OS42NDg0IiB5Mj0iMjAyLjY0ODQiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSI2NjAuNSIgeDI9IjcwMS41IiB5MT0iMjAyLjY0ODQiIHkyPSIyMDIuNjQ4NCIvPjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjcwLjUsMTk4LjY0ODQsNjYwLjUsMjAyLjY0ODQsNjcwLjUsMjA2LjY0ODQsNjY2LjUsMjAyLjY0ODQiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXN0eWxlPSJpdGFsaWMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTEyIiB4PSI2NjYuNSIgeT0iMTg0LjU4MjUiPmV4ZWN1dGUgbW9kdWxlczwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjY0Ny41LDIyNy43ODEzLDY1Ny41LDIzMS43ODEzLDY0Ny41LDIzNS43ODEzLDY1MS41LDIzMS43ODEzIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIzODMuNSIgeDI9IjY1My41IiB5MT0iMjMxLjc4MTMiIHkyPSIyMzEuNzgxMyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjkxIiB4PSIzOTAuNSIgeT0iMjI2LjcxNTMiPmRpc3BhdGNoKCRpbml0KTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9Ijc4LjUsMjU2LjkxNDEsNjguNSwyNjAuOTE0MSw3OC41LDI2NC45MTQxLDc0LjUsMjYwLjkxNDEiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjcyLjUiIHgyPSIzODIuNSIgeTE9IjI2MC45MTQxIiB5Mj0iMjYwLjkxNDEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI2MiIgeD0iODQuNSIgeT0iMjU1Ljg0ODEiPnByZVN0YXJ0KCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI0ODQuNSwyODYuMDQ2OSw0OTQuNSwyOTAuMDQ2OSw0ODQuNSwyOTQuMDQ2OSw0ODguNSwyOTAuMDQ2OSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMzgzLjUiIHgyPSI0OTAuNSIgeTE9IjI5MC4wNDY5IiB5Mj0iMjkwLjA0NjkiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC1zdHlsZT0iaXRhbGljIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjU2IiB4PSIzOTAuNSIgeT0iMjg0Ljk4MSI+aW5pdGlhbGl6ZTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjQ4NC41LDMxNS4xNzk3LDQ5NC41LDMxOS4xNzk3LDQ4NC41LDMyMy4xNzk3LDQ4OC41LDMxOS4xNzk3IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIzODMuNSIgeDI9IjQ5MC41IiB5MT0iMzE5LjE3OTciIHkyPSIzMTkuMTc5NyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjQwIiB4PSIzOTAuNSIgeT0iMzE0LjExMzgiPnN0YXJ0KCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyNTAuNSwzNDQuMzEyNSwyNDAuNSwzNDguMzEyNSwyNTAuNSwzNTIuMzEyNSwyNDYuNSwzNDguMzEyNSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IHN0cm9rZS1kYXNoYXJyYXk6IDIuMCwyLjA7IiB4MT0iMjQ0LjUiIHgyPSI0OTUuNSIgeTE9IjM0OC4zMTI1IiB5Mj0iMzQ4LjMxMjUiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI0NiIgeD0iMjU2LjUiIHk9IjM0My4yNDY2Ij5zZXR1cCgpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjQ3LjUsMzczLjQ0NTMsNjU3LjUsMzc3LjQ0NTMsNjQ3LjUsMzgxLjQ0NTMsNjUxLjUsMzc3LjQ0NTMiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjQ5Ni41IiB4Mj0iNjUzLjUiIHkxPSIzNzcuNDQ1MyIgeTI9IjM3Ny40NDUzIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTM5IiB4PSI1MDMuNSIgeT0iMzcyLjM3OTQiPmRpc3BhdGNoKCRuYXZpZ2F0aW9uKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjI1MC41LDQwMi41NzgxLDI0MC41LDQwNi41NzgxLDI1MC41LDQxMC41NzgxLDI0Ni41LDQwNi41NzgxIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIyNDQuNSIgeDI9IjQ5NS41IiB5MT0iNDA2LjU3ODEiIHkyPSI0MDYuNTc4MSIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjUyIiB4PSIyNTYuNSIgeT0iNDAxLjUxMjIiPnJlbmRlcigpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjUwLjUsNDMxLjcxMDksMjQwLjUsNDM1LjcxMDksMjUwLjUsNDM5LjcxMDksMjQ2LjUsNDM1LjcxMDkiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjI0NC41IiB4Mj0iNDk1LjUiIHkxPSI0MzUuNzEwOSIgeTI9IjQzNS43MTA5Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNzYiIHg9IjI1Ni41IiB5PSI0MzAuNjQ1Ij4kb25yZW5kZXIoKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjY0Ny41LDQ2MC44NDM4LDY1Ny41LDQ2NC44NDM4LDY0Ny41LDQ2OC44NDM4LDY1MS41LDQ2NC44NDM4IiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSI0OTYuNSIgeDI9IjY1My41IiB5MT0iNDY0Ljg0MzgiIHkyPSI0NjQuODQzOCIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjExNyIgeD0iNTAzLjUiIHk9IjQ1OS43Nzc4Ij5kaXNwYXRjaCgkcmVkcmF3KTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9Ijc4LjUsNDg5Ljk3NjYsNjguNSw0OTMuOTc2Niw3OC41LDQ5Ny45NzY2LDc0LjUsNDkzLjk3NjYiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjcyLjUiIHgyPSIzODIuNSIgeTE9IjQ5My45NzY2IiB5Mj0iNDkzLjk3NjYiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI2OSIgeD0iODQuNSIgeT0iNDg4LjkxMDYiPnBvc3RTdGFydCgpPC90ZXh0PjxwYXRoIGQ9Ik0xODMuNSw1MDguOTc2NiBMMjgxLjUsNTA4Ljk3NjYgTDI4MS41LDUxNS45NzY2IEwyNzEuNSw1MjUuOTc2NiBMMTgzLjUsNTI1Ljk3NjYgTDE4My41LDUwOC45NzY2ICIgZmlsbD0iI0VFRUVFRSIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSIxMDQuNTMxMyIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAyLjA7IiB3aWR0aD0iNTA5IiB4PSIxODMuNSIgeT0iNTA4Ljk3NjYiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9ImJvbGQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTMiIHg9IjE5OC41IiB5PSI1MjIuMDQzNSI+cmVkcmF3PC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMzcxLjUsNTQzLjI0MjIsMzgxLjUsNTQ3LjI0MjIsMzcxLjUsNTUxLjI0MjIsMzc1LjUsNTQ3LjI0MjIiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjIzOS41IiB4Mj0iMzc3LjUiIHkxPSI1NDcuMjQyMiIgeTI9IjU0Ny4yNDIyIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijg3IiB4PSIyNDYuNSIgeT0iNTQyLjE3NjMiPmgzLnJlZHJhdygpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjUwLjUsNTcyLjM3NSwyNDAuNSw1NzYuMzc1LDI1MC41LDU4MC4zNzUsMjQ2LjUsNTc2LjM3NSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMjQ0LjUiIHgyPSIzODIuNSIgeTE9IjU3Ni4zNzUiIHkyPSI1NzYuMzc1Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTUiIHg9IjI1Ni41IiB5PSI1NzEuMzA5MSI+cmVkcmF3KCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSw2MDEuNTA3OCw2NTcuNSw2MDUuNTA3OCw2NDcuNSw2MDkuNTA3OCw2NTEuNSw2MDUuNTA3OCIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMzgzLjUiIHgyPSI2NTMuNSIgeTE9IjYwNS41MDc4IiB5Mj0iNjA1LjUwNzgiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMTciIHg9IjM5MC41IiB5PSI2MDAuNDQxOSI+ZGlzcGF0Y2goJHJlZHJhdyk8L3RleHQ+PHBhdGggZD0iTTEzLDYyNy41MDc4IEwxMzcsNjI3LjUwNzggTDEzNyw2MzQuNTA3OCBMMTI3LDY0NC41MDc4IEwxMyw2NDQuNTA3OCBMMTMsNjI3LjUwNzggIiBmaWxsPSIjRUVFRUVFIiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDEuMDsiLz48cmVjdCBmaWxsPSJub25lIiBoZWlnaHQ9IjMwOC40NjA5IiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDIuMDsiIHdpZHRoPSI2NzkuNSIgeD0iMTMiIHk9IjYyNy41MDc4Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGZvbnQtd2VpZ2h0PSJib2xkIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijc5IiB4PSIyOCIgeT0iNjQwLjU3NDciPm5hdmlnYXRpb248L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIzNzEuNSw2NjEuNzczNCwzODEuNSw2NjUuNzczNCwzNzEuNSw2NjkuNzczNCwzNzUuNSw2NjUuNzczNCIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMjM5LjUiIHgyPSIzNzcuNSIgeTE9IjY2NS43NzM0IiB5Mj0iNjY1Ljc3MzQiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9ImJvbGQiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTIwIiB4PSIyNDYuNSIgeT0iNjYwLjcwNzUiPmgzLm5hdmlnYXRlVG8oKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9IjQ4NC41LDY5MC45MDYzLDQ5NC41LDY5NC45MDYzLDQ4NC41LDY5OC45MDYzLDQ4OC41LDY5NC45MDYzIiBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiAjQTgwMDM2OyBzdHJva2Utd2lkdGg6IDEuMDsiIHgxPSIzODMuNSIgeDI9IjQ5MC41IiB5MT0iNjk0LjkwNjMiIHkyPSI2OTQuOTA2MyIvPjx0ZXh0IGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9Ijg5IiB4PSIzOTAuNSIgeT0iNjg5Ljg0MDMiPnByb2Nlc3NQYXRoKCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyNTAuNSw3MjAuMDM5MSwyNDAuNSw3MjQuMDM5MSwyNTAuNSw3MjguMDM5MSwyNDYuNSw3MjQuMDM5MSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IHN0cm9rZS1kYXNoYXJyYXk6IDIuMCwyLjA7IiB4MT0iMjQ0LjUiIHgyPSI0OTUuNSIgeTE9IjcyNC4wMzkxIiB5Mj0iNzI0LjAzOTEiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI3MSIgeD0iMjU2LjUiIHk9IjcxOC45NzMxIj50ZWFyZG93bigpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjUwLjUsNzQ5LjE3MTksMjQwLjUsNzUzLjE3MTksMjUwLjUsNzU3LjE3MTksMjQ2LjUsNzUzLjE3MTkiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyBzdHJva2UtZGFzaGFycmF5OiAyLjAsMi4wOyIgeDE9IjI0NC41IiB4Mj0iNDk1LjUiIHkxPSI3NTMuMTcxOSIgeTI9Ijc1My4xNzE5Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNDYiIHg9IjI1Ni41IiB5PSI3NDguMTA2Ij5zZXR1cCgpPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iNjQ3LjUsNzc4LjMwNDcsNjU3LjUsNzgyLjMwNDcsNjQ3LjUsNzg2LjMwNDcsNjUxLjUsNzgyLjMwNDciIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjQ5Ni41IiB4Mj0iNjUzLjUiIHkxPSI3ODIuMzA0NyIgeTI9Ijc4Mi4zMDQ3Ii8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iMTM5IiB4PSI1MDMuNSIgeT0iNzc3LjIzODgiPmRpc3BhdGNoKCRuYXZpZ2F0aW9uKTwvdGV4dD48cG9seWdvbiBmaWxsPSIjQTgwMDM2IiBwb2ludHM9Ijc4LjUsODA3LjQzNzUsNjguNSw4MTEuNDM3NSw3OC41LDgxNS40Mzc1LDc0LjUsODExLjQzNzUiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjcyLjUiIHgyPSI0OTUuNSIgeTE9IjgxMS40Mzc1IiB5Mj0iODExLjQzNzUiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC1zdHlsZT0iaXRhbGljIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjE0OCIgeD0iODQuNSIgeT0iODA2LjM3MTYiPnJlbW92ZSBhbGwgRE9NIG5vZGVzPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjI3LjUsODM2LjU3MDMsMjM3LjUsODQwLjU3MDMsMjI3LjUsODQ0LjU3MDMsMjMxLjUsODQwLjU3MDMiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjY3LjUiIHgyPSIyMzMuNSIgeTE9Ijg0MC41NzAzIiB5Mj0iODQwLjU3MDMiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgZm9udC1zdHlsZT0iaXRhbGljIiBsZW5ndGhBZGp1c3Q9InNwYWNpbmdBbmRHbHlwaHMiIHRleHRMZW5ndGg9IjE0OCIgeD0iNzQuNSIgeT0iODM1LjUwNDQiPnJlbW92ZSBhbGwgRE9NIG5vZGVzPC90ZXh0Pjxwb2x5Z29uIGZpbGw9IiNBODAwMzYiIHBvaW50cz0iMjUwLjUsODY1LjcwMzEsMjQwLjUsODY5LjcwMzEsMjUwLjUsODczLjcwMzEsMjQ2LjUsODY5LjcwMzEiIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIvPjxsaW5lIHN0eWxlPSJzdHJva2U6ICNBODAwMzY7IHN0cm9rZS13aWR0aDogMS4wOyIgeDE9IjI0NC41IiB4Mj0iNDk1LjUiIHkxPSI4NjkuNzAzMSIgeTI9Ijg2OS43MDMxIi8+PHRleHQgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTMiIGxlbmd0aEFkanVzdD0ic3BhY2luZ0FuZEdseXBocyIgdGV4dExlbmd0aD0iNTIiIHg9IjI1Ni41IiB5PSI4NjQuNjM3MiI+cmVuZGVyKCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSIyNTAuNSw4OTQuODM1OSwyNDAuNSw4OTguODM1OSwyNTAuNSw5MDIuODM1OSwyNDYuNSw4OTguODM1OSIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iMjQ0LjUiIHgyPSI0OTUuNSIgeTE9Ijg5OC44MzU5IiB5Mj0iODk4LjgzNTkiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSI3NiIgeD0iMjU2LjUiIHk9Ijg5My43NyI+JG9ucmVuZGVyKCk8L3RleHQ+PHBvbHlnb24gZmlsbD0iI0E4MDAzNiIgcG9pbnRzPSI2NDcuNSw5MjMuOTY4OCw2NTcuNSw5MjcuOTY4OCw2NDcuNSw5MzEuOTY4OCw2NTEuNSw5MjcuOTY4OCIgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7Ii8+PGxpbmUgc3R5bGU9InN0cm9rZTogI0E4MDAzNjsgc3Ryb2tlLXdpZHRoOiAxLjA7IiB4MT0iNDk2LjUiIHgyPSI2NTMuNSIgeTE9IjkyNy45Njg4IiB5Mj0iOTI3Ljk2ODgiLz48dGV4dCBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMyIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiB0ZXh0TGVuZ3RoPSIxMTciIHg9IjUwMy41IiB5PSI5MjIuOTAyOCI+ZGlzcGF0Y2goJHJlZHJhdyk8L3RleHQ+PCEtLU1ENT1bNTU5ZjU3MGMwZGZkNTc0MWUxYzNmZjYxYTBhMDgyN2FdCkBzdGFydHVtbA0KdGl0bGUgSDMgU2VxdWVuY2UgRGlhZ3JhbQ0KDQplbnRpdHkgQXBwbGljYXRpb24NCmNvbnRyb2wgQ29tcG9uZW50DQplbnRpdHkgSDMNCmVudGl0eSBSb3V0ZXINCmRhdGFiYXNlIFN0b3JlDQoNCkFwcGxpY2F0aW9uIC0gLT4gSDMgOiA8Yj5oMy5pbml0KCk8L2I+DQpIMyAtPiBTdG9yZSA6IC8vaW5pdGlhbGl6ZS8vDQpTdG9yZSAtPiBTdG9yZSA6IC8vZXhlY3V0ZSBtb2R1bGVzLy8NCkgzIC0+IFN0b3JlIDogZGlzcGF0Y2goJGluaXQpDQpIMyAtPiBBcHBsaWNhdGlvbiA6IHByZVN0YXJ0KCkNCkgzIC0+IFJvdXRlciA6IC8vaW5pdGlhbGl6ZS8vDQpIMyAtPiBSb3V0ZXIgOiBzdGFydCgpDQpSb3V0ZXIgLSAtPiBDb21wb25lbnQgOiBzZXR1cCgpIA0KUm91dGVyIC0+IFN0b3JlOiBkaXNwYXRjaCgkbmF2aWdhdGlvbikNClJvdXRlciAtPiBDb21wb25lbnQgOiByZW5kZXIoKQ0KUm91dGVyIC0+IENvbXBvbmVudCA6ICRvbnJlbmRlcigpDQpSb3V0ZXIgLT4gU3RvcmU6IGRpc3BhdGNoKCRyZWRyYXcpDQoNCkgzIC0+IEFwcGxpY2F0aW9uIDogcG9zdFN0YXJ0KCkNCg0KZ3JvdXAgcmVkcmF3DQogICAgQ29tcG9uZW50IC0+IEgzIDogPGI+aDMucmVkcmF3KCk8L2I+DQogICAgSDMgLT4gQ29tcG9uZW50IDogcmVkcmF3KCkNCiAgICBIMyAtPiBTdG9yZTogZGlzcGF0Y2goJHJlZHJhdykNCmVuZA0KDQpncm91cCBuYXZpZ2F0aW9uDQogICAgQ29tcG9uZW50IC0+IEgzIDogPGI+aDMubmF2aWdhdGVUbygpPC9iPg0KICAgIEgzIC0+IFJvdXRlciA6IHByb2Nlc3NQYXRoKCkNCiAgICBSb3V0ZXIgLSAtPiBDb21wb25lbnQgOiB0ZWFyZG93bigpIA0KICAgIFJvdXRlciAtIC0+IENvbXBvbmVudCA6IHNldHVwKCkgDQogICAgUm91dGVyIC0+IFN0b3JlOiBkaXNwYXRjaCgkbmF2aWdhdGlvbikNCiAgICBSb3V0ZXIgLT4gQXBwbGljYXRpb24gOiAvL3JlbW92ZSBhbGwgRE9NIG5vZGVzLy8NCiAgICBBcHBsaWNhdGlvbiAtPiBDb21wb25lbnQgOiAvL3JlbW92ZSBhbGwgRE9NIG5vZGVzLy8NCiAgICBSb3V0ZXIgLT4gQ29tcG9uZW50IDogcmVuZGVyKCkNCiAgICBSb3V0ZXIgLT4gQ29tcG9uZW50IDogJG9ucmVuZGVyKCkNCiAgICBSb3V0ZXIgLT4gU3RvcmU6IGRpc3BhdGNoKCRyZWRyYXcpDQogICAgDQplbmQNCkBlbmR1bWwNCgpQbGFudFVNTCB2ZXJzaW9uIDEuMjAyMC4xMChTdW4gTWF5IDE3IDA5OjQ4OjQ5IFVUQyAyMDIwKQooR1BMIHNvdXJjZSBkaXN0cmlidXRpb24pCkphdmEgUnVudGltZTogSmF2YShUTSkgU0UgUnVudGltZSBFbnZpcm9ubWVudApKVk06IEphdmEgSG90U3BvdChUTSkgNjQtQml0IFNlcnZlciBWTQpPcGVyYXRpbmcgU3lzdGVtOiBMaW51eApEZWZhdWx0IEVuY29kaW5nOiBVVEYtOApMYW5ndWFnZTogZW4KQ291bnRyeTogVVMKLS0+PC9nPjwvc3ZnPg==" alt="Sequence Diagram" /></p> <p>When the <code>h3.init()</code> method is called at application level, the following operations are performed in sequence:</p>@@ -7515,8 +7536,10 @@ <li>Any <em>Module</em> specified when calling <code>h3.init()</code> is executed.</li>
<li>The <strong>$init</strong> event is dispatched.</li> <li>The <em>preStart</em> function (if specified when calling <code>h3.init()</code>) is executed.</li> <li>The <em>Router</em> is initialized and started.</li> +<li>The <strong>setup()</strong> method of the matching Route Component is called (if any).</li> <li>The <strong>$navigation</strong> event is dispatched.</li> -<li>All <em>Components</em> matching the current route are rendered for the first time.</li> +<li>The <em>Route Component</em> matching the current route and all its child components are rendered for the first time.</li> +<li>Any callback specified via the <strong>$onrender</strong> special attributes in the loaded components is executed once all components are rendered.</li> <li>The <strong>$redraw</strong> event is dispatched.</li> </ol>@@ -7533,9 +7556,14 @@ <p>Similarly, whenever the <code>h3.navigateTo()</code> method is called (typically within a component), or the URL fragment changes:</p>
<ol> <li>The <em>Router</em> processes the new path and determine which component to render based on the routing configuration.</li> +<li>The <strong>teardow()</strong> method of the current Route Component is called (if any).</li> +<li>The <strong>setup()</strong> method of the new matching Route Component is called (if any).</li> <li>All DOM nodes within the scope of the routing are removed, all components are removed.</li> +<li>Any <strong>$onrender</strong> callback defined in the added components is executed once all components are rendered.</li> <li>The <strong>$navigation</strong> event is dispatched.</li> -<li>The <em>Component</em> matching the new route is rendered.</li> +<li>All DOM nodes are removed.</li> +<li>The <em>Route Component</em> matching the new route and all its child components are rendered.</li> +<li>Any callback specified via the <strong>$onrender</strong> special attributes in the loaded components is executed once all components are rendered.</li> <li>The <strong>$redraw</strong> event is dispatched.</li> </ol>
M
docs/images/h3.sequence.svg
→
docs/images/h3.sequence.svg
@@ -1,49 +1,53 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="880px" preserveAspectRatio="none" style="width:790px;height:880px;" version="1.1" viewBox="0 0 790 880" width="790px" zoomAndPan="magnify"><defs><filter height="300%" id="f1dbhycfy50ozh" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><text fill="#000000" font-family="sans-serif" font-size="18" lengthAdjust="spacingAndGlyphs" textLength="205" x="291.75" y="26.708">H3 Sequence Diagram</text><rect fill="#FFFFFF" filter="url(#f1dbhycfy50ozh)" height="104.5313" style="stroke: #000000; stroke-width: 2.0;" width="509" x="183.5" y="450.7109"/><rect fill="#FFFFFF" filter="url(#f1dbhycfy50ozh)" height="221.0625" style="stroke: #000000; stroke-width: 2.0;" width="679.5" x="13" y="569.2422"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="67" x2="67" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="239.5" x2="239.5" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="383.5" x2="383.5" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="496" x2="496" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="659.5" x2="659.5" y1="100.25" y2="807.3047"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="83" x="23" y="96.9482">Application</text><ellipse cx="67.5" cy="67.9531" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="55.5" x2="79.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="83" x="23" y="819.2998">Application</text><ellipse cx="67.5" cy="838.6016" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="55.5" x2="79.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="86" x="193.5" y="96.9482">Component</text><ellipse cx="239.5" cy="67.9531" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="235.5,55.9531,241.5,50.9531,239.5,55.9531,241.5,60.9531,235.5,55.9531" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="86" x="193.5" y="819.2998">Component</text><ellipse cx="239.5" cy="838.6016" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="235.5,826.6016,241.5,821.6016,239.5,826.6016,241.5,831.6016,235.5,826.6016" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="19" x="371" y="96.9482">H3</text><ellipse cx="383.5" cy="67.9531" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="371.5" x2="395.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="19" x="371" y="819.2998">H3</text><ellipse cx="383.5" cy="838.6016" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="371.5" x2="395.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="49" x="469" y="96.9482">Router</text><ellipse cx="496.5" cy="67.9531" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="484.5" x2="508.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="49" x="469" y="819.2998">Router</text><ellipse cx="496.5" cy="838.6016" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="484.5" x2="508.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="636.5" y="96.9482">Store</text><path d="M641.5,47.9531 C641.5,37.9531 659.5,37.9531 659.5,37.9531 C659.5,37.9531 677.5,37.9531 677.5,47.9531 L677.5,73.9531 C677.5,83.9531 659.5,83.9531 659.5,83.9531 C659.5,83.9531 641.5,83.9531 641.5,73.9531 L641.5,47.9531 " fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" style="stroke: #000000; stroke-width: 1.5;"/><path d="M641.5,47.9531 C641.5,57.9531 659.5,57.9531 659.5,57.9531 C659.5,57.9531 677.5,57.9531 677.5,47.9531 " fill="none" style="stroke: #000000; stroke-width: 1.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="636.5" y="819.2998">Store</text><path d="M641.5,832.6016 C641.5,822.6016 659.5,822.6016 659.5,822.6016 C659.5,822.6016 677.5,822.6016 677.5,832.6016 L677.5,858.6016 C677.5,868.6016 659.5,868.6016 659.5,868.6016 C659.5,868.6016 641.5,868.6016 641.5,858.6016 L641.5,832.6016 " fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" style="stroke: #000000; stroke-width: 1.5;"/><path d="M641.5,832.6016 C641.5,842.6016 659.5,842.6016 659.5,842.6016 C659.5,842.6016 677.5,842.6016 677.5,832.6016 " fill="none" style="stroke: #000000; stroke-width: 1.5;"/><polygon fill="#A80036" points="371.5,127.3828,381.5,131.3828,371.5,135.3828,375.5,131.3828" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="67.5" x2="377.5" y1="131.3828" y2="131.3828"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="59" x="74.5" y="126.3169">h3.init()</text><polygon fill="#A80036" points="647.5,156.5156,657.5,160.5156,647.5,164.5156,651.5,160.5156" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="160.5156" y2="160.5156"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="56" x="390.5" y="155.4497">initialize</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="659.5" x2="701.5" y1="189.6484" y2="189.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="701.5" x2="701.5" y1="189.6484" y2="202.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="660.5" x2="701.5" y1="202.6484" y2="202.6484"/><polygon fill="#A80036" points="670.5,198.6484,660.5,202.6484,670.5,206.6484,666.5,202.6484" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="112" x="666.5" y="184.5825">execute modules</text><polygon fill="#A80036" points="647.5,227.7813,657.5,231.7813,647.5,235.7813,651.5,231.7813" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="231.7813" y2="231.7813"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="91" x="390.5" y="226.7153">dispatch($init)</text><polygon fill="#A80036" points="78.5,256.9141,68.5,260.9141,78.5,264.9141,74.5,260.9141" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="382.5" y1="260.9141" y2="260.9141"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="62" x="84.5" y="255.8481">preStart()</text><polygon fill="#A80036" points="484.5,286.0469,494.5,290.0469,484.5,294.0469,488.5,290.0469" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="290.0469" y2="290.0469"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="56" x="390.5" y="284.981">initialize</text><polygon fill="#A80036" points="484.5,315.1797,494.5,319.1797,484.5,323.1797,488.5,319.1797" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="319.1797" y2="319.1797"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="40" x="390.5" y="314.1138">start()</text><polygon fill="#A80036" points="647.5,344.3125,657.5,348.3125,647.5,352.3125,651.5,348.3125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="348.3125" y2="348.3125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="139" x="503.5" y="343.2466">dispatch($navigation)</text><polygon fill="#A80036" points="250.5,373.4453,240.5,377.4453,250.5,381.4453,246.5,377.4453" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="495.5" y1="377.4453" y2="377.4453"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="52" x="256.5" y="372.3794">render()</text><polygon fill="#A80036" points="647.5,402.5781,657.5,406.5781,647.5,410.5781,651.5,406.5781" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="406.5781" y2="406.5781"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="503.5" y="401.5122">dispatch($redraw)</text><polygon fill="#A80036" points="78.5,431.7109,68.5,435.7109,78.5,439.7109,74.5,435.7109" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="382.5" y1="435.7109" y2="435.7109"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="69" x="84.5" y="430.645">postStart()</text><path d="M183.5,450.7109 L281.5,450.7109 L281.5,457.7109 L271.5,467.7109 L183.5,467.7109 L183.5,450.7109 " fill="#EEEEEE" style="stroke: #000000; stroke-width: 1.0;"/><rect fill="none" height="104.5313" style="stroke: #000000; stroke-width: 2.0;" width="509" x="183.5" y="450.7109"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="53" x="198.5" y="463.7778">redraw</text><polygon fill="#A80036" points="371.5,484.9766,381.5,488.9766,371.5,492.9766,375.5,488.9766" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="239.5" x2="377.5" y1="488.9766" y2="488.9766"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="87" x="246.5" y="483.9106">h3.redraw()</text><polygon fill="#A80036" points="250.5,514.1094,240.5,518.1094,250.5,522.1094,246.5,518.1094" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="382.5" y1="518.1094" y2="518.1094"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="55" x="256.5" y="513.0435">redraw()</text><polygon fill="#A80036" points="647.5,543.2422,657.5,547.2422,647.5,551.2422,651.5,547.2422" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="547.2422" y2="547.2422"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="390.5" y="542.1763">dispatch($redraw)</text><path d="M13,569.2422 L137,569.2422 L137,576.2422 L127,586.2422 L13,586.2422 L13,569.2422 " fill="#EEEEEE" style="stroke: #000000; stroke-width: 1.0;"/><rect fill="none" height="221.0625" style="stroke: #000000; stroke-width: 2.0;" width="679.5" x="13" y="569.2422"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="79" x="28" y="582.3091">navigation</text><polygon fill="#A80036" points="371.5,603.5078,381.5,607.5078,371.5,611.5078,375.5,607.5078" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="239.5" x2="377.5" y1="607.5078" y2="607.5078"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="120" x="246.5" y="602.4419">h3.navigateTo()</text><polygon fill="#A80036" points="484.5,632.6406,494.5,636.6406,484.5,640.6406,488.5,636.6406" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="636.6406" y2="636.6406"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="89" x="390.5" y="631.5747">processPath()</text><polygon fill="#A80036" points="647.5,661.7734,657.5,665.7734,647.5,669.7734,651.5,665.7734" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="665.7734" y2="665.7734"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="139" x="503.5" y="660.7075">dispatch($navigation)</text><polygon fill="#A80036" points="78.5,690.9063,68.5,694.9063,78.5,698.9063,74.5,694.9063" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="495.5" y1="694.9063" y2="694.9063"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="148" x="84.5" y="689.8403">remove all DOM nodes</text><polygon fill="#A80036" points="227.5,720.0391,237.5,724.0391,227.5,728.0391,231.5,724.0391" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="67.5" x2="233.5" y1="724.0391" y2="724.0391"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="148" x="74.5" y="718.9731">remove all DOM nodes</text><polygon fill="#A80036" points="250.5,749.1719,240.5,753.1719,250.5,757.1719,246.5,753.1719" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="495.5" y1="753.1719" y2="753.1719"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="52" x="256.5" y="748.106">render()</text><polygon fill="#A80036" points="647.5,778.3047,657.5,782.3047,647.5,786.3047,651.5,782.3047" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="782.3047" y2="782.3047"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="503.5" y="777.2388">dispatch($redraw)</text><!--MD5=[cd1de52496ffc017a87e6273ccf87b23] -@startuml -title H3 Sequence Diagram - -entity Application -control Component -entity H3 -entity Router -database Store - -Application - -> H3 : <b>h3.init()</b> -H3 -> Store : //initialize// -Store -> Store : //execute modules// -H3 -> Store : dispatch($init) -H3 -> Application : preStart() -H3 -> Router : //initialize// -H3 -> Router : start() -Router -> Store: dispatch($navigation) -Router -> Component : render() -Router -> Store: dispatch($redraw) - -H3 -> Application : postStart() - -group redraw - Component -> H3 : <b>h3.redraw()</b> - H3 -> Component : redraw() - H3 -> Store: dispatch($redraw) -end - -group navigation - Component -> H3 : <b>h3.navigateTo()</b> - H3 -> Router : processPath() - Router -> Store: dispatch($navigation) - Router -> Application : //remove all DOM nodes// - Application -> Component : //remove all DOM nodes// - Router -> Component : render() - Router -> Store: dispatch($redraw) - -end -@enduml +<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="1026px" preserveAspectRatio="none" style="width:790px;height:1026px;" version="1.1" viewBox="0 0 790 1026" width="790px" zoomAndPan="magnify"><defs><filter height="300%" id="fue3489sh1fap" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><text fill="#000000" font-family="sans-serif" font-size="18" lengthAdjust="spacingAndGlyphs" textLength="205" x="291.75" y="26.708">H3 Sequence Diagram</text><rect fill="#FFFFFF" filter="url(#fue3489sh1fap)" height="104.5313" style="stroke: #000000; stroke-width: 2.0;" width="509" x="183.5" y="508.9766"/><rect fill="#FFFFFF" filter="url(#fue3489sh1fap)" height="308.4609" style="stroke: #000000; stroke-width: 2.0;" width="679.5" x="13" y="627.5078"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="67" x2="67" y1="100.25" y2="952.9688"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="239.5" x2="239.5" y1="100.25" y2="952.9688"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="383.5" x2="383.5" y1="100.25" y2="952.9688"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="496" x2="496" y1="100.25" y2="952.9688"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="659.5" x2="659.5" y1="100.25" y2="952.9688"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="83" x="23" y="96.9482">Application</text><ellipse cx="67.5" cy="67.9531" fill="#FEFECE" filter="url(#fue3489sh1fap)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="55.5" x2="79.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="83" x="23" y="964.9639">Application</text><ellipse cx="67.5" cy="984.2656" fill="#FEFECE" filter="url(#fue3489sh1fap)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="55.5" x2="79.5" y1="998.2656" y2="998.2656"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="86" x="193.5" y="96.9482">Component</text><ellipse cx="239.5" cy="67.9531" fill="#FEFECE" filter="url(#fue3489sh1fap)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="235.5,55.9531,241.5,50.9531,239.5,55.9531,241.5,60.9531,235.5,55.9531" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="86" x="193.5" y="964.9639">Component</text><ellipse cx="239.5" cy="984.2656" fill="#FEFECE" filter="url(#fue3489sh1fap)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="235.5,972.2656,241.5,967.2656,239.5,972.2656,241.5,977.2656,235.5,972.2656" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="19" x="371" y="96.9482">H3</text><ellipse cx="383.5" cy="67.9531" fill="#FEFECE" filter="url(#fue3489sh1fap)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="371.5" x2="395.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="19" x="371" y="964.9639">H3</text><ellipse cx="383.5" cy="984.2656" fill="#FEFECE" filter="url(#fue3489sh1fap)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="371.5" x2="395.5" y1="998.2656" y2="998.2656"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="49" x="469" y="96.9482">Router</text><ellipse cx="496.5" cy="67.9531" fill="#FEFECE" filter="url(#fue3489sh1fap)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="484.5" x2="508.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="49" x="469" y="964.9639">Router</text><ellipse cx="496.5" cy="984.2656" fill="#FEFECE" filter="url(#fue3489sh1fap)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="484.5" x2="508.5" y1="998.2656" y2="998.2656"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="636.5" y="96.9482">Store</text><path d="M641.5,47.9531 C641.5,37.9531 659.5,37.9531 659.5,37.9531 C659.5,37.9531 677.5,37.9531 677.5,47.9531 L677.5,73.9531 C677.5,83.9531 659.5,83.9531 659.5,83.9531 C659.5,83.9531 641.5,83.9531 641.5,73.9531 L641.5,47.9531 " fill="#FEFECE" filter="url(#fue3489sh1fap)" style="stroke: #000000; stroke-width: 1.5;"/><path d="M641.5,47.9531 C641.5,57.9531 659.5,57.9531 659.5,57.9531 C659.5,57.9531 677.5,57.9531 677.5,47.9531 " fill="none" style="stroke: #000000; stroke-width: 1.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="636.5" y="964.9639">Store</text><path d="M641.5,978.2656 C641.5,968.2656 659.5,968.2656 659.5,968.2656 C659.5,968.2656 677.5,968.2656 677.5,978.2656 L677.5,1004.2656 C677.5,1014.2656 659.5,1014.2656 659.5,1014.2656 C659.5,1014.2656 641.5,1014.2656 641.5,1004.2656 L641.5,978.2656 " fill="#FEFECE" filter="url(#fue3489sh1fap)" style="stroke: #000000; stroke-width: 1.5;"/><path d="M641.5,978.2656 C641.5,988.2656 659.5,988.2656 659.5,988.2656 C659.5,988.2656 677.5,988.2656 677.5,978.2656 " fill="none" style="stroke: #000000; stroke-width: 1.5;"/><polygon fill="#A80036" points="371.5,127.3828,381.5,131.3828,371.5,135.3828,375.5,131.3828" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="67.5" x2="377.5" y1="131.3828" y2="131.3828"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="59" x="74.5" y="126.3169">h3.init()</text><polygon fill="#A80036" points="647.5,156.5156,657.5,160.5156,647.5,164.5156,651.5,160.5156" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="160.5156" y2="160.5156"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="56" x="390.5" y="155.4497">initialize</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="659.5" x2="701.5" y1="189.6484" y2="189.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="701.5" x2="701.5" y1="189.6484" y2="202.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="660.5" x2="701.5" y1="202.6484" y2="202.6484"/><polygon fill="#A80036" points="670.5,198.6484,660.5,202.6484,670.5,206.6484,666.5,202.6484" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="112" x="666.5" y="184.5825">execute modules</text><polygon fill="#A80036" points="647.5,227.7813,657.5,231.7813,647.5,235.7813,651.5,231.7813" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="231.7813" y2="231.7813"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="91" x="390.5" y="226.7153">dispatch($init)</text><polygon fill="#A80036" points="78.5,256.9141,68.5,260.9141,78.5,264.9141,74.5,260.9141" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="382.5" y1="260.9141" y2="260.9141"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="62" x="84.5" y="255.8481">preStart()</text><polygon fill="#A80036" points="484.5,286.0469,494.5,290.0469,484.5,294.0469,488.5,290.0469" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="290.0469" y2="290.0469"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="56" x="390.5" y="284.981">initialize</text><polygon fill="#A80036" points="484.5,315.1797,494.5,319.1797,484.5,323.1797,488.5,319.1797" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="319.1797" y2="319.1797"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="40" x="390.5" y="314.1138">start()</text><polygon fill="#A80036" points="250.5,344.3125,240.5,348.3125,250.5,352.3125,246.5,348.3125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="244.5" x2="495.5" y1="348.3125" y2="348.3125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="46" x="256.5" y="343.2466">setup()</text><polygon fill="#A80036" points="647.5,373.4453,657.5,377.4453,647.5,381.4453,651.5,377.4453" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="377.4453" y2="377.4453"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="139" x="503.5" y="372.3794">dispatch($navigation)</text><polygon fill="#A80036" points="250.5,402.5781,240.5,406.5781,250.5,410.5781,246.5,406.5781" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="495.5" y1="406.5781" y2="406.5781"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="52" x="256.5" y="401.5122">render()</text><polygon fill="#A80036" points="250.5,431.7109,240.5,435.7109,250.5,439.7109,246.5,435.7109" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="495.5" y1="435.7109" y2="435.7109"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="76" x="256.5" y="430.645">$onrender()</text><polygon fill="#A80036" points="647.5,460.8438,657.5,464.8438,647.5,468.8438,651.5,464.8438" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="464.8438" y2="464.8438"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="503.5" y="459.7778">dispatch($redraw)</text><polygon fill="#A80036" points="78.5,489.9766,68.5,493.9766,78.5,497.9766,74.5,493.9766" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="382.5" y1="493.9766" y2="493.9766"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="69" x="84.5" y="488.9106">postStart()</text><path d="M183.5,508.9766 L281.5,508.9766 L281.5,515.9766 L271.5,525.9766 L183.5,525.9766 L183.5,508.9766 " fill="#EEEEEE" style="stroke: #000000; stroke-width: 1.0;"/><rect fill="none" height="104.5313" style="stroke: #000000; stroke-width: 2.0;" width="509" x="183.5" y="508.9766"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="53" x="198.5" y="522.0435">redraw</text><polygon fill="#A80036" points="371.5,543.2422,381.5,547.2422,371.5,551.2422,375.5,547.2422" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="239.5" x2="377.5" y1="547.2422" y2="547.2422"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="87" x="246.5" y="542.1763">h3.redraw()</text><polygon fill="#A80036" points="250.5,572.375,240.5,576.375,250.5,580.375,246.5,576.375" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="382.5" y1="576.375" y2="576.375"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="55" x="256.5" y="571.3091">redraw()</text><polygon fill="#A80036" points="647.5,601.5078,657.5,605.5078,647.5,609.5078,651.5,605.5078" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="605.5078" y2="605.5078"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="390.5" y="600.4419">dispatch($redraw)</text><path d="M13,627.5078 L137,627.5078 L137,634.5078 L127,644.5078 L13,644.5078 L13,627.5078 " fill="#EEEEEE" style="stroke: #000000; stroke-width: 1.0;"/><rect fill="none" height="308.4609" style="stroke: #000000; stroke-width: 2.0;" width="679.5" x="13" y="627.5078"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="79" x="28" y="640.5747">navigation</text><polygon fill="#A80036" points="371.5,661.7734,381.5,665.7734,371.5,669.7734,375.5,665.7734" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="239.5" x2="377.5" y1="665.7734" y2="665.7734"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="120" x="246.5" y="660.7075">h3.navigateTo()</text><polygon fill="#A80036" points="484.5,690.9063,494.5,694.9063,484.5,698.9063,488.5,694.9063" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="694.9063" y2="694.9063"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="89" x="390.5" y="689.8403">processPath()</text><polygon fill="#A80036" points="250.5,720.0391,240.5,724.0391,250.5,728.0391,246.5,724.0391" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="244.5" x2="495.5" y1="724.0391" y2="724.0391"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="71" x="256.5" y="718.9731">teardown()</text><polygon fill="#A80036" points="250.5,749.1719,240.5,753.1719,250.5,757.1719,246.5,753.1719" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="244.5" x2="495.5" y1="753.1719" y2="753.1719"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="46" x="256.5" y="748.106">setup()</text><polygon fill="#A80036" points="647.5,778.3047,657.5,782.3047,647.5,786.3047,651.5,782.3047" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="782.3047" y2="782.3047"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="139" x="503.5" y="777.2388">dispatch($navigation)</text><polygon fill="#A80036" points="78.5,807.4375,68.5,811.4375,78.5,815.4375,74.5,811.4375" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="495.5" y1="811.4375" y2="811.4375"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="148" x="84.5" y="806.3716">remove all DOM nodes</text><polygon fill="#A80036" points="227.5,836.5703,237.5,840.5703,227.5,844.5703,231.5,840.5703" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="67.5" x2="233.5" y1="840.5703" y2="840.5703"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="148" x="74.5" y="835.5044">remove all DOM nodes</text><polygon fill="#A80036" points="250.5,865.7031,240.5,869.7031,250.5,873.7031,246.5,869.7031" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="495.5" y1="869.7031" y2="869.7031"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="52" x="256.5" y="864.6372">render()</text><polygon fill="#A80036" points="250.5,894.8359,240.5,898.8359,250.5,902.8359,246.5,898.8359" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="495.5" y1="898.8359" y2="898.8359"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="76" x="256.5" y="893.77">$onrender()</text><polygon fill="#A80036" points="647.5,923.9688,657.5,927.9688,647.5,931.9688,651.5,927.9688" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="927.9688" y2="927.9688"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="503.5" y="922.9028">dispatch($redraw)</text><!--MD5=[559f570c0dfd5741e1c3ff61a0a0827a] +@startuml +title H3 Sequence Diagram + +entity Application +control Component +entity H3 +entity Router +database Store + +Application - -> H3 : <b>h3.init()</b> +H3 -> Store : //initialize// +Store -> Store : //execute modules// +H3 -> Store : dispatch($init) +H3 -> Application : preStart() +H3 -> Router : //initialize// +H3 -> Router : start() +Router - -> Component : setup() +Router -> Store: dispatch($navigation) +Router -> Component : render() +Router -> Component : $onrender() +Router -> Store: dispatch($redraw) + +H3 -> Application : postStart() + +group redraw + Component -> H3 : <b>h3.redraw()</b> + H3 -> Component : redraw() + H3 -> Store: dispatch($redraw) +end + +group navigation + Component -> H3 : <b>h3.navigateTo()</b> + H3 -> Router : processPath() + Router - -> Component : teardown() + Router - -> Component : setup() + Router -> Store: dispatch($navigation) + Router -> Application : //remove all DOM nodes// + Application -> Component : //remove all DOM nodes// + Router -> Component : render() + Router -> Component : $onrender() + Router -> Store: dispatch($redraw) + +end +@enduml -PlantUML version 1.2020.09beta17(Unknown compile time) +PlantUML version 1.2020.10(Sun May 17 09:48:49 UTC 2020) (GPL source distribution) Java Runtime: Java(TM) SE Runtime Environment JVM: Java HotSpot(TM) 64-Bit Server VM -Java Version: 14.0.1+7 Operating System: Linux Default Encoding: UTF-8 Language: en
M
docs/md/key-concepts.md
→
docs/md/key-concepts.md
@@ -77,6 +77,20 @@ H3 comes with a very minimal but fully functional URL fragment router. You create your application routes when initializing your application, and you can navigate to them using ordinary `href` links or programmatically using the `h3.navigateTo` method.
The current route is always accessible via the `h3.route` property. + +#### Route Components + +A route components is a top-level component specified to handle a specific route. Unlike ordinary components, route components: + +* may have a dedicated *setup* (after the route component is added to the DOM) and *teardown* phase (after the route component is removed from the DOM and the new route component is loaded). +* may have built-in local state, initialized during setup and (typically) destroyed during teardown. + +Route components are stll created using ordinary function returning a VNode, but you can optionally define a **setup** and a **teardown** method on them (Functions are Objects in JavaScript after all...) to be executed during the corresponding phase. + +Note that: +* Both the **setup** method take an object as a parameter, representing the component state. Such object will be empty the first time the **setup** method is called for a given component, but it may contain properties not removed during teardowns. +* The **teardown** method can return an object, which will be retained as component state. If however nothing is returned, the component state is deleted. + ### How everything works... The following sequence diagram summarizes how H3 works, from its initialization to the redraw and navigation phases.@@ -90,9 +104,11 @@ 2. Any *Module* specified when calling `h3.init()` is executed.
3. The **$init** event is dispatched. 4. The *preStart* function (if specified when calling `h3.init()`) is executed. 5. The *Router* is initialized and started. -6. The **$navigation** event is dispatched. -7. All *Components* matching the current route are rendered for the first time. -8. The **$redraw** event is dispatched. +6. The **setup()** method of the matching Route Component is called (if any). +8. The **$navigation** event is dispatched. +9. The *Route Component* matching the current route and all its child components are rendered for the first time. +10. Any callback specified via the **$onrender** special attributes in the loaded components is executed once all components are rendered. +11. The **$redraw** event is dispatched. Then, whenever the `h3.redraw()` method is called (typically within a component):@@ -102,9 +118,14 @@
Similarly, whenever the `h3.navigateTo()` method is called (typically within a component), or the URL fragment changes: 1. The *Router* processes the new path and determine which component to render based on the routing configuration. -2. All DOM nodes within the scope of the routing are removed, all components are removed. -3. The **$navigation** event is dispatched. -4. The *Component* matching the new route is rendered. -5. The **$redraw** event is dispatched. +2. The **teardow()** method of the current Route Component is called (if any). +3. The **setup()** method of the new matching Route Component is called (if any). +4. All DOM nodes within the scope of the routing are removed, all components are removed. +5. Any **$onrender** callback defined in the added components is executed once all components are rendered. +6. The **$navigation** event is dispatched. +7. All DOM nodes are removed. +8. The *Route Component* matching the new route and all its child components are rendered. +9. Any callback specified via the **$onrender** special attributes in the loaded components is executed once all components are rendered. +10. The **$redraw** event is dispatched. And that's it. The whole idea is to make the system extremely *simple* and *predictable* — which means everything should be very easy to debug, too.
M
docs/md/overview.md
→
docs/md/overview.md
@@ -4,7 +4,7 @@ **H3** is a microframework to build client-side single-page applications (SPAs) in modern JavaScript.
H3 is also: -- **tiny**, under [700 sloc](https://github.com/h3rald/h3/blob/master/h3.js). +- **tiny**, under [750 sloc](https://github.com/h3rald/h3/blob/master/h3.js). - **modern**, in the sense that it runs only in modern browsers (latest versions of Chrome, Firefox, Edge & similar). - **easy** to learn, its API is comprised of only six methods and two properties.