Merge branch 'dev'
h3rald h3rald@h3rald.com
Sat, 23 May 2020 23:06:38 +0200
14 files changed,
322 insertions(+),
158 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.@@ -19,7 +19,7 @@ ### I'm sold! Where can I get it?
Here, look, it's just one file: -<a href="https://raw.githubusercontent.com/h3rald/h3/v0.5.0/h3.js" target="_blank" class="button primary">Download v0.5.0 (Experienced El-Aurian)</a> +<a href="https://raw.githubusercontent.com/h3rald/h3/v0.6.0/h3.js" target="_blank" class="button primary">Download v0.6.0 (Furtive Ferengi)</a> Yes there is also a [NPM package](https://www.npmjs.com/package/@h3rald/h3) if you want to use it with WebPack and similar, but let me repeat: _it's just one file_.
M
__tests__/h3.js
→
__tests__/h3.js
@@ -409,6 +409,10 @@ await h3.init(() => vnode);
jest.spyOn(vnode, "redraw"); h3.redraw(); expect(vnode.redraw).toHaveBeenCalled(); + h3.redraw(true); + h3.redraw(); + h3.redraw(); + expect(vnode.redraw).toHaveBeenCalledTimes(2); }); it("should not redraw while a other redraw is in progress", async () => {
M
__tests__/router.js
→
__tests__/router.js
@@ -2,7 +2,13 @@ const h3 = require("../h3.js").default;
let preStartCalled = false; let postStartCalled = false; +let count = 0; +let result = 0; +const setCount = () => { + count = count + 2; + h3.dispatch("count/set", count); +}; let hash = "#/c2"; const mockLocation = { get hash() {@@ -16,27 +22,30 @@ hash = value;
window.dispatchEvent(event); }, }; +const $onrender = (node) => { + node.classList.add("test"); +}; +const C1 = () => { + const parts = h3.route.parts; + const content = Object.keys(parts).map((key) => + h3("li", `${key}: ${parts[key]}`) + ); + return h3("ul.c1", { $onrender }, content); +}; + +const C2 = () => { + const params = h3.route.params; + const content = Object.keys(params).map((key) => + h3("li", `${key}: ${params[key]}`) + ); + return h3("ul.c2", { $onrender }, content); +}; describe("h3 (Router)", () => { beforeEach(async () => { const preStart = () => (preStartCalled = true); const postStart = () => (postStartCalled = true); - const C1 = () => { - const $onrender = (node) => node.classList.add("test"); - const parts = h3.route.parts; - const content = Object.keys(parts).map((key) => - h3("li", `${key}: ${parts[key]}`) - ); - return h3("ul.c1", { $onrender }, content); - }; - const C2 = () => { - const params = h3.route.params; - const content = Object.keys(params).map((key) => - h3("li", `${key}: ${params[key]}`) - ); - return h3("ul.c2", content); - }; - return await h3.init({ + await h3.init({ routes: { "/c1/:a/:b/:c": C1, "/c2": C2,@@ -56,34 +65,104 @@ expect(preStartCalled).toEqual(true);
expect(postStartCalled).toEqual(true); }); - it("should support the capturing of parts within the current route", () => { + it("should support the capturing of parts within the current route", (done) => { + const sub = h3.on("$redraw", () => { + expect(document.body.childNodes[0].childNodes[1].textContent).toEqual( + "b: 2" + ); + expect(document.body.childNodes[0].classList.contains("test")).toEqual( + true + ); + sub(); + done(); + }); mockLocation.hash = "#/c1/1/2/3"; - expect(document.body.childNodes[0].childNodes[1].textContent).toEqual( - "b: 2" - ); - expect(document.body.childNodes[0].classList.contains("test")).toEqual( - true - ); }); - it("should expose a navigateTo method to navigate to another path", () => { + it("should expose a navigateTo method to navigate to another path", (done) => { + const sub = h3.on("$redraw", () => { + expect(document.body.childNodes[0].childNodes[1].textContent).toEqual( + "test2: 2" + ); + sub(); + done(); + }); h3.navigateTo("/c2", { test1: 1, test2: 2 }); - expect(document.body.childNodes[0].childNodes[1].textContent).toEqual( - "test2: 2" - ); - h3.navigateTo("/c2"); - expect(document.body.childNodes[0].innerHTML).toEqual(""); }); - it("should fail if no route matches at startup", async () => { - mockLocation.hash = "#/test"; + it("should throw an error if no route matches", async () => { try { await h3.init({ element: document.body, - routes: { "/aaa": () => false }, + routes: { + "/c1/:a/:b/:c": () => h3("div"), + "/c2": () => h3("div"), + }, }); } catch (e) { expect(e.message).toMatch(/No route matches/); } + }); + + it("should execute $onrender callback after each navigation", async () => { + let executions = []; + let count = 0; + const c = () => { + return h3( + "div", + { + $onrender: (node) => { + executions.push("test1"); + }, + }, + [ + h3("span", { + $onrender: (node) => { + executions.push("test2"); + }, + }), + ] + ); + }; + expect(executions).toEqual([]); + await h3.init({ + element: document.body, + routes: { "/": c }, + }); + expect(executions).toEqual(["test2", "test1"]); + }); + + it("should execute setup and teardown methods", (done) => { + let redraws = 0; + C1.setup = (cstate) => { + cstate.result = cstate.result || 0; + cstate.sub = h3.on("count/set", (state, count) => { + cstate.result = count * count; + }); + }; + C1.teardown = (cstate) => { + cstate.sub(); + result = cstate.result; + return { result: cstate.result }; + }; + const sub = h3.on("$redraw", () => { + redraws++; + setCount(); + setCount(); + if (redraws === 1) { + expect(count).toEqual(4); + expect(result).toEqual(0); + h3.navigateTo("/c2"); + } + if (redraws === 2) { + expect(count).toEqual(8); + expect(result).toEqual(16); + delete C1.setup; + delete C1.teardown; + sub(); + done(); + } + }); + h3.navigateTo("/c1/a/b/c"); }); });
M
__tests__/vnode.js
→
__tests__/vnode.js
@@ -68,19 +68,6 @@ expect(node.childNodes[1].constructor).toEqual(HTMLLIElement);
expect(node.childNodes[0].childNodes[0].data).toEqual("test1"); }); - it("should provide an $onrender special attribute to execute code after the vnode is first rendered", () => { - const addClass = (node) => node.classList.add(node.tagName); - const vnode = h3("div", h3("span", {$onrender: addClass})); - let node = vnode.render(); - expect(node.childNodes[0].classList.contains("SPAN")).toEqual(true); - const vnode2 = h3("div", h3("div", {$onrender: addClass})); - vnode.redraw({node, vnode: vnode2}); - expect(node.childNodes[0].classList.contains("DIV")).toEqual(true); - const vnode3 = h3("div", [h3("div", {$onrender: addClass}), h3("h1", {$onrender: addClass})]); - vnode.redraw({node, vnode: vnode3}); - expect(node.childNodes[1].classList.contains("H1")).toEqual(true); - }); - it("should handle boolean attributes when redrawing", () => { const vnode1 = h3("input", { type: "checkbox", checked: true }); const node = vnode1.render();
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>@@ -7331,7 +7335,7 @@ <h3>I’m sold! Where can I get it?<a href="#document-top" title="Go to top"></a></h3>
<p>Here, look, it’s just one file:</p> -<p><a href="https://raw.githubusercontent.com/h3rald/h3/v0.5.0/h3.js" target="_blank" class="button primary">Download v0.5.0 (Experienced El-Aurian)</a></p> +<p><a href="https://raw.githubusercontent.com/h3rald/h3/v0.6.0/h3.js" target="_blank" class="button primary">Download v0.6.0 (Furtive Ferengi)</a></p> <p>Yes there is also a <a href="https://www.npmjs.com/package/@h3rald/h3">NPM package</a> if you want to use it with WebPack and similar, but let me repeat: <em>it’s just one file</em>.</p>@@ -7500,12 +7504,30 @@ <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> async methods 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. +* Both methods can be asynchronous, in which case H3 will wait for their completion before proceeding.</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 +7537,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 +7557,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>@@ -7664,8 +7693,8 @@ h3("a.logo.col-sm-1", { href: "#/" }, [
h3("img", { alt: "H3", src: "images/h3.svg" }), ]), h3("div.version.col-sm.col-md", [ - h3("div.version-number", "v0.5.0"), - h3("div.version-label", "“Experienced El-Aurian“"), + h3("div.version-number", "v0.6.0"), + h3("div.version-label", "“Furtive Ferengi“"), ]), h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }), ]);@@ -8015,7 +8044,7 @@ </ul>
</div> <div id="footer"> - <p><span class="copy"></span> Fabio Cevasco – May 17, 2020</p> + <p><span class="copy"></span> Fabio Cevasco – May 23, 2020</p> <p><span>Powered by</span> <a href="https://h3rald.com/hastyscribe"><span class="hastyscribe"></span></a></p> </div> </div>
M
docs/example/assets/js/h3.js
→
docs/example/assets/js/h3.js
@@ -1,5 +1,5 @@
/** - * H3 v0.5.0 "Experienced El-Aurian" + * H3 v0.6.0 "Furtive Ferengi" * Copyright 2020 Fabio Cevasco <h3rald@h3rald.com> * * This source code is licensed under the MIT license found in the@@ -59,6 +59,7 @@ }
return checkProperties(obj1, obj2); // && checkProperties(obj2, obj1); }; +let $onrenderCallbacks = []; const selectorRegex = /^([a-z0-9:_=-]+)(#[a-z0-9:_=-]+)?(\..+)?$/i; // Virtual Node Implementation with HyperScript-like syntax@@ -301,11 +302,11 @@ // Children
this.children.forEach((c) => { const cnode = c.render(); node.appendChild(cnode); - c.$onrender && c.$onrender(cnode); }); if (this.$html) { node.innerHTML = this.$html; } + this.$onrender && $onrenderCallbacks.push(() => this.$onrender(node)); return node; }@@ -323,7 +324,6 @@ oldvnode !== newvnode)
) { const renderedNode = newvnode.render(); node.parentNode.replaceChild(renderedNode, node); - newvnode.$onrender && newvnode.$onrender(renderedNode); oldvnode.from(newvnode); return; }@@ -475,8 +475,6 @@ } else {
// While there are children not found in oldvnode, add them and re-check const cnode = newvnode.children[notFoundInOld].render(); node.insertBefore(cnode, node.childNodes[notFoundInOld]); - newvnode.children[notFoundInOld].$onrender && - newvnode.children[notFoundInOld].$onrender(cnode); oldvnode.children.splice( notFoundInOld, 0,@@ -558,18 +556,19 @@ const defs = Object.keys(routes);
this.routes = routes; } - setRedraw(vnode) { + setRedraw(vnode, state) { this.redraw = () => { vnode.redraw({ node: this.element.childNodes[0], - vnode: this.routes[this.route.def](), + vnode: this.routes[this.route.def](state), }); this.store.dispatch("$redraw"); }; } - start() { - const processPath = (data) => { + async start() { + const processPath = async (data) => { + const oldRoute = this.route; const fragment = (data && data.newURL &&@@ -580,6 +579,7 @@ const path = fragment.replace(/\?.+$/, "").slice(1);
const rawQuery = fragment.match(/\?(.+)$/); const query = rawQuery && rawQuery[1] ? rawQuery[1] : ""; const pathParts = path.split("/").slice(1); + let parts = {}; for (let def of Object.keys(this.routes)) { let routeParts = def.split("/").slice(1);@@ -604,23 +604,36 @@ }
if (!this.route) { throw new Error(`[Router] No route matches '${fragment}'`); } + // Old route component teardown + if (oldRoute) { + const oldRouteComponent = this.routes[oldRoute.def]; + oldRouteComponent.state = + oldRouteComponent.teardown && + (await oldRouteComponent.teardown(oldRouteComponent.state)); + } + // New route component setup + const newRouteComponent = this.routes[this.route.def]; + newRouteComponent.state = {}; + newRouteComponent.setup && + (await newRouteComponent.setup(newRouteComponent.state)); + // Redrawing... redrawing = true; this.store.dispatch("$navigation", this.route); - // Display View while (this.element.firstChild) { this.element.removeChild(this.element.firstChild); } - const vnode = this.routes[this.route.def](); + const vnode = newRouteComponent(newRouteComponent.state); const node = vnode.render(); this.element.appendChild(node); - vnode.$onrender && vnode.$onrender(node); - this.setRedraw(vnode); + $onrenderCallbacks.forEach((cbk) => cbk()); + $onrenderCallbacks = []; + this.setRedraw(vnode, newRouteComponent.state); window.scrollTo(0, 0); this.store.dispatch("$redraw"); redrawing = false; }; - processPath(); window.addEventListener("hashchange", processPath); + await processPath(); } navigateTo(path, params) {@@ -721,7 +734,7 @@
h3.redraw = (setRedrawing) => { if (!router || !router.redraw) { throw new Error( - "[h3.redraw] No application initialized, unable to update." + "[h3.redraw] No application initialized, unable to redraw." ); } if (redrawing) {
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/js/app.js
→
docs/js/app.js
@@ -44,8 +44,8 @@ h3("a.logo.col-sm-1", { href: "#/" }, [
h3("img", { alt: "H3", src: "images/h3.svg" }), ]), h3("div.version.col-sm.col-md", [ - h3("div.version-number", "v0.5.0"), - h3("div.version-label", "“Experienced El-Aurian“"), + h3("div.version-number", "v0.6.0"), + h3("div.version-label", "“Furtive Ferengi“"), ]), h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }), ]);
M
docs/js/h3.js
→
docs/js/h3.js
@@ -1,5 +1,5 @@
/** - * H3 v0.5.0 "Experienced El-Aurian" + * H3 v0.6.0 "Furtive Ferengi" * Copyright 2020 Fabio Cevasco <h3rald@h3rald.com> * * This source code is licensed under the MIT license found in the@@ -59,6 +59,7 @@ }
return checkProperties(obj1, obj2); // && checkProperties(obj2, obj1); }; +let $onrenderCallbacks = []; const selectorRegex = /^([a-z0-9:_=-]+)(#[a-z0-9:_=-]+)?(\..+)?$/i; // Virtual Node Implementation with HyperScript-like syntax@@ -301,11 +302,11 @@ // Children
this.children.forEach((c) => { const cnode = c.render(); node.appendChild(cnode); - c.$onrender && c.$onrender(cnode); }); if (this.$html) { node.innerHTML = this.$html; } + this.$onrender && $onrenderCallbacks.push(() => this.$onrender(node)); return node; }@@ -323,7 +324,6 @@ oldvnode !== newvnode)
) { const renderedNode = newvnode.render(); node.parentNode.replaceChild(renderedNode, node); - newvnode.$onrender && newvnode.$onrender(renderedNode); oldvnode.from(newvnode); return; }@@ -475,8 +475,6 @@ } else {
// While there are children not found in oldvnode, add them and re-check const cnode = newvnode.children[notFoundInOld].render(); node.insertBefore(cnode, node.childNodes[notFoundInOld]); - newvnode.children[notFoundInOld].$onrender && - newvnode.children[notFoundInOld].$onrender(cnode); oldvnode.children.splice( notFoundInOld, 0,@@ -558,18 +556,19 @@ const defs = Object.keys(routes);
this.routes = routes; } - setRedraw(vnode) { + setRedraw(vnode, state) { this.redraw = () => { vnode.redraw({ node: this.element.childNodes[0], - vnode: this.routes[this.route.def](), + vnode: this.routes[this.route.def](state), }); this.store.dispatch("$redraw"); }; } - start() { - const processPath = (data) => { + async start() { + const processPath = async (data) => { + const oldRoute = this.route; const fragment = (data && data.newURL &&@@ -580,6 +579,7 @@ const path = fragment.replace(/\?.+$/, "").slice(1);
const rawQuery = fragment.match(/\?(.+)$/); const query = rawQuery && rawQuery[1] ? rawQuery[1] : ""; const pathParts = path.split("/").slice(1); + let parts = {}; for (let def of Object.keys(this.routes)) { let routeParts = def.split("/").slice(1);@@ -604,23 +604,36 @@ }
if (!this.route) { throw new Error(`[Router] No route matches '${fragment}'`); } + // Old route component teardown + if (oldRoute) { + const oldRouteComponent = this.routes[oldRoute.def]; + oldRouteComponent.state = + oldRouteComponent.teardown && + (await oldRouteComponent.teardown(oldRouteComponent.state)); + } + // New route component setup + const newRouteComponent = this.routes[this.route.def]; + newRouteComponent.state = {}; + newRouteComponent.setup && + (await newRouteComponent.setup(newRouteComponent.state)); + // Redrawing... redrawing = true; this.store.dispatch("$navigation", this.route); - // Display View while (this.element.firstChild) { this.element.removeChild(this.element.firstChild); } - const vnode = this.routes[this.route.def](); + const vnode = newRouteComponent(newRouteComponent.state); const node = vnode.render(); this.element.appendChild(node); - vnode.$onrender && vnode.$onrender(node); - this.setRedraw(vnode); + $onrenderCallbacks.forEach((cbk) => cbk()); + $onrenderCallbacks = []; + this.setRedraw(vnode, newRouteComponent.state); window.scrollTo(0, 0); this.store.dispatch("$redraw"); redrawing = false; }; - processPath(); window.addEventListener("hashchange", processPath); + await processPath(); } navigateTo(path, params) {@@ -721,7 +734,7 @@
h3.redraw = (setRedrawing) => { if (!router || !router.redraw) { throw new Error( - "[h3.redraw] No application initialized, unable to update." + "[h3.redraw] No application initialized, unable to redraw." ); } if (redrawing) {
M
docs/md/key-concepts.md
→
docs/md/key-concepts.md
@@ -77,6 +77,21 @@ 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** async methods 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. +* Both methods can be asynchronous, in which case H3 will wait for their completion before proceeding. + ### How everything works... The following sequence diagram summarizes how H3 works, from its initialization to the redraw and navigation phases.@@ -90,9 +105,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 +119,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.@@ -12,7 +12,7 @@ ### I'm sold! Where can I get it?
Here, look, it's just one file: -<a href="https://raw.githubusercontent.com/h3rald/h3/v0.5.0/h3.js" target="_blank" class="button primary">Download v0.5.0 (Experienced El-Aurian)</a> +<a href="https://raw.githubusercontent.com/h3rald/h3/v0.6.0/h3.js" target="_blank" class="button primary">Download v0.6.0 (Furtive Ferengi)</a> Yes there is also a [NPM package](https://www.npmjs.com/package/@h3rald/h3) if you want to use it with WebPack and similar, but let me repeat: _it's just one file_.
M
docs/md/tutorial.md
→
docs/md/tutorial.md
@@ -118,8 +118,8 @@ h3("a.logo.col-sm-1", { href: "#/" }, [
h3("img", { alt: "H3", src: "images/h3.svg" }), ]), h3("div.version.col-sm.col-md", [ - h3("div.version-number", "v0.5.0"), - h3("div.version-label", "“Experienced El-Aurian“"), + h3("div.version-number", "v0.6.0"), + h3("div.version-label", "“Furtive Ferengi“"), ]), h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }), ]);
M
h3.js
→
h3.js
@@ -1,5 +1,5 @@
/** - * H3 v0.5.0 "Experienced El-Aurian" + * H3 v0.6.0 "Furtive Ferengi" * Copyright 2020 Fabio Cevasco <h3rald@h3rald.com> * * This source code is licensed under the MIT license found in the@@ -59,6 +59,7 @@ }
return checkProperties(obj1, obj2); // && checkProperties(obj2, obj1); }; +let $onrenderCallbacks = []; const selectorRegex = /^([a-z0-9:_=-]+)(#[a-z0-9:_=-]+)?(\..+)?$/i; // Virtual Node Implementation with HyperScript-like syntax@@ -301,11 +302,11 @@ // Children
this.children.forEach((c) => { const cnode = c.render(); node.appendChild(cnode); - c.$onrender && c.$onrender(cnode); }); if (this.$html) { node.innerHTML = this.$html; } + this.$onrender && $onrenderCallbacks.push(() => this.$onrender(node)); return node; }@@ -323,7 +324,6 @@ oldvnode !== newvnode)
) { const renderedNode = newvnode.render(); node.parentNode.replaceChild(renderedNode, node); - newvnode.$onrender && newvnode.$onrender(renderedNode); oldvnode.from(newvnode); return; }@@ -475,8 +475,6 @@ } else {
// While there are children not found in oldvnode, add them and re-check const cnode = newvnode.children[notFoundInOld].render(); node.insertBefore(cnode, node.childNodes[notFoundInOld]); - newvnode.children[notFoundInOld].$onrender && - newvnode.children[notFoundInOld].$onrender(cnode); oldvnode.children.splice( notFoundInOld, 0,@@ -558,18 +556,19 @@ const defs = Object.keys(routes);
this.routes = routes; } - setRedraw(vnode) { + setRedraw(vnode, state) { this.redraw = () => { vnode.redraw({ node: this.element.childNodes[0], - vnode: this.routes[this.route.def](), + vnode: this.routes[this.route.def](state), }); this.store.dispatch("$redraw"); }; } - start() { - const processPath = (data) => { + async start() { + const processPath = async (data) => { + const oldRoute = this.route; const fragment = (data && data.newURL &&@@ -580,6 +579,7 @@ const path = fragment.replace(/\?.+$/, "").slice(1);
const rawQuery = fragment.match(/\?(.+)$/); const query = rawQuery && rawQuery[1] ? rawQuery[1] : ""; const pathParts = path.split("/").slice(1); + let parts = {}; for (let def of Object.keys(this.routes)) { let routeParts = def.split("/").slice(1);@@ -604,23 +604,36 @@ }
if (!this.route) { throw new Error(`[Router] No route matches '${fragment}'`); } + // Old route component teardown + if (oldRoute) { + const oldRouteComponent = this.routes[oldRoute.def]; + oldRouteComponent.state = + oldRouteComponent.teardown && + (await oldRouteComponent.teardown(oldRouteComponent.state)); + } + // New route component setup + const newRouteComponent = this.routes[this.route.def]; + newRouteComponent.state = {}; + newRouteComponent.setup && + (await newRouteComponent.setup(newRouteComponent.state)); + // Redrawing... redrawing = true; this.store.dispatch("$navigation", this.route); - // Display View while (this.element.firstChild) { this.element.removeChild(this.element.firstChild); } - const vnode = this.routes[this.route.def](); + const vnode = newRouteComponent(newRouteComponent.state); const node = vnode.render(); this.element.appendChild(node); - vnode.$onrender && vnode.$onrender(node); - this.setRedraw(vnode); + $onrenderCallbacks.forEach((cbk) => cbk()); + $onrenderCallbacks = []; + this.setRedraw(vnode, newRouteComponent.state); window.scrollTo(0, 0); this.store.dispatch("$redraw"); redrawing = false; }; - processPath(); window.addEventListener("hashchange", processPath); + await processPath(); } navigateTo(path, params) {@@ -721,7 +734,7 @@
h3.redraw = (setRedrawing) => { if (!router || !router.redraw) { throw new Error( - "[h3.redraw] No application initialized, unable to update." + "[h3.redraw] No application initialized, unable to redraw." ); } if (redrawing) {
M
package.json
→
package.json
@@ -1,7 +1,7 @@
{ "name": "@h3rald/h3", - "version": "0.5.0", - "versionName": "Experienced El-Aurian", + "version": "0.6.0", + "versionName": "Furtive Ferengi", "description": "A tiny, extremely minimalist JavaScript microframework.", "main": "h3.js", "scripts": {