@twobirds/microcomponents 0.0.82 → 0.0.84

package/public/test/test/testform.ts

@@ -0,0 +1,153 @@
+'use strict';
+import { 
+    DC, 
+    defineCE, 
+    Observable, 
+    formValues, 
+    LooseObject 
+} from '../../microcomponents.js';
+
+defineCE(
+	'test-testform',
+
+	class TestForm extends DC {
+		data: unknown;
+
+		constructor(target: HTMLElement) {
+			super(target);
+
+			let shadow = (this as DC).target.attachShadow({ mode: 'open' });
+			shadow.innerHTML = `<style>${this.css}</style>${this.template}`;
+            
+			formValues(this, 'data', shadow); // create this.data formdata observable
+
+			(this.data as Observable).bind(shadow); // 1 way bind formdata to the form DOM
+
+            // load and display data
+            fetch('./testform.json')
+                .then( res => res.json())
+                .then( data => {
+                    this.data = data;
+                });
+                
+		}
+
+		get template() {
+			return /*html*/ `
+                <form>
+                    <!-- sample form to start with -->
+                    <fieldset>
+                        <legend>Inputs</legend>
+                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}<br />
+                        <label>color</label><input type="color" name="colorInput" value="#000000" /><br />
+                        <label>date</label><input type="date" name="dateInput" value="" /><br />
+                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" /><br />
+                        <label>email</label><input type="email" name="email" value="" /><br />
+                        <label>file</label><input type="file" name="fileInput" value="" /><br />
+                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" /><br />
+                        <label>month</label><input type="month" name="month" value="" /><br />
+                        <label>number</label><input type="number" name="number" value="" /><br />
+                        <label>password</label><input type="password" name="passInput" value="" /><br />
+                        <label>range</label><input type="range" name="rangeInput" value="" /><br />
+                        <label>search</label><input type="search" name="searchInput" value="" /><br />
+                        <label>tel</label><input type="tel" name="telInput" value="" /><br />
+                        <label>time</label><input type="time" name="timeInput" value="" /><br />
+                        <label>url</label><input type="url" name="urlInput" value="" /><br />
+                        <label>week</label><input type="week" name="weekInput" value="" /><br />
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Selects&nbsp;<strong>2wB:&nbsp;</strong>&nbsp;<span>"{singleSelect}"</span>&nbsp;<span>[{multiSelect}]</span></legend>
+
+                            <label>singleSelect</label>
+                            <select name="singleSelect">
+                                <option disabled selected value> -- select -- </option>
+                                <option value="1">Option 1</option>
+                                <option value="2">Option 2</option>
+                                <option value="3">Option 3</option>
+                                <option value="4">Option 4</option>
+                            </select><br />
+
+                            <label>multiSelect</label>
+                            <select name="multiSelect" multiple="multiple" type="select-multiple">
+                                <option value="1">Option 1</option>
+                                <option value="2" selected=true>Option 2</option>
+                                <option value="3">Option 3</option>
+                                <option value="4" selected=true>Option 4</option>
+                            </select>
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>"{myRadio}"</span></legend>
+
+                        <label>radio1</label><input type="radio" name="myRadio" value="radio1"><br />
+                        <label>radio2</label><input type="radio" name="myRadio" value="radio2"><br />
+                        <label>radio3</label><input type="radio" name="myRadio" value="radio3"><br />
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Checkboxes</legend>
+                        <label>cb1</label><input type="checkbox" name="cb1"><br />
+                        <label>cb2</label><input type="checkbox" name="cb2"><br />
+                        <label>cb3</label><input type="checkbox" name="cb3"><br />
+                        <label>cb4</label><input type="checkbox" name="cb4"><br />
+                        <label>cb5</label><input type="checkbox" name="cb5"><br />
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>TextArea</legend>
+                        <label>textArea</label>
+                        <textarea name="textArea">abc</textarea>
+                    </fieldset>
+
+                </form>
+            `;
+		}
+
+		get css() {
+			return /*css*/ `
+legend {
+    display: inherit;
+    margin:  inherit;
+    vertical-align:  inherit;
+    font-weight: bold;
+}
+
+label {
+    display: inline-block;
+    margin-top: 1em;
+    margin-left: 5px;
+    vertical-align: top;
+    min-width:10em;
+    text-align: right;
+}
+
+form input,
+form select,
+form textarea {
+    display: inline-block;
+    margin-left: 5px;
+    margin-top: 1.1em;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+    margin-top: 1.3em;
+}
+
+body > form {
+    display: block;
+}
+
+form fieldset {
+    border: 1px solid #aaaaaa;
+    border-radius: 3px;
+    margin: 0.5em 0;
+}
+            `;
+		}
+	}
+);

package/public/test/test/testfunction.d.ts

@@ -0,0 +1,3 @@
+declare const _default: CustomElementConstructor | undefined;
+export default _default;
+//# sourceMappingURL=testfunction.d.ts.map

package/public/test/test/testfunction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testfunction.d.ts","sourceRoot":"","sources":["../../../src/test/test/testfunction.ts"],"names":[],"mappings":";AAWA,wBAA4C"}

package/public/test/test/testfunction.js

@@ -0,0 +1,7 @@
+import { defineCE, getCE } from '../../microcomponents.js';
+console.log('testfunction.ts');
+defineCE('test-testfunction', function testfunction(a, b) {
+    return a + b;
+});
+export default getCE('test-testfunction');
+//# sourceMappingURL=testfunction.js.map

package/public/test/test/testfunction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testfunction.js","sourceRoot":"","sources":["../../../src/test/test/testfunction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,CAAC,GAAG,CAAE,iBAAiB,CAAE,CAAC;AAEjC,QAAQ,CACJ,mBAAmB,EACnB,SAAS,YAAY,CAAE,CAAS,EAAE,CAAQ;IACtC,OAAO,CAAC,GAAG,CAAC,CAAC;AACjB,CAAC,CACJ,CAAC;AAEF,eAAe,KAAK,CAAE,mBAAmB,CAAE,CAAC"}

package/public/test/test/testfunction.ts

@@ -0,0 +1,12 @@
+import { defineCE, getCE } from '../../microcomponents.js';
+
+console.log( 'testfunction.ts' );
+
+defineCE(
+    'test-testfunction',
+    function testfunction( a: number, b:number ){
+        return a + b;
+    }
+);
+
+export default getCE( 'test-testfunction' );

package/public/test/test/testmc.d.ts

@@ -1,6 +1,3 @@
-import { DC } from './../../microcomponents.js';
-export default class testmc extends DC {
-    constructor(target: HTMLElement);
-    oneInit(): void;
-}
+declare const _default: CustomElementConstructor | undefined;
+export default _default;
 //# sourceMappingURL=testmc.d.ts.map

package/public/test/test/testmc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testmc.d.ts","sourceRoot":"","sources":["../../../src/test/test/testmc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,4BAA4B,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,EAAE;gBACtB,MAAM,EAAE,WAAW;IAK/B,OAAO;CAGV"}
+{"version":3,"file":"testmc.d.ts","sourceRoot":"","sources":["../../../src/test/test/testmc.ts"],"names":[],"mappings":";AAeA,wBAAsC"}

package/public/test/test/testmc.js

@@ -1,10 +1,10 @@
-import { DC } from './../../microcomponents.js';
-export default class testmc extends DC {
+import { defineCE, getCE, DC } from '../../microcomponents.js';
+defineCE('test-testmc', class TestMc extends DC {
     constructor(target) {
         super(target);
-        delete this._mc;
     }
     oneInit() {
     }
-}
+});
+export default getCE('test-testmc');
 //# sourceMappingURL=testmc.js.map

package/public/test/test/testmc.js.map

@@ -1 +1 @@
-{"version":3,"file":"testmc.js","sourceRoot":"","sources":["../../../src/test/test/testmc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,4BAA4B,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,EAAE;IAClC,YAAY,MAAmB;QAC3B,KAAK,CAAC,MAAM,CAAC,CAAC;QACd,OAAO,IAAI,CAAC,GAAG,CAAC;IACpB,CAAC;IAED,OAAO;IAEP,CAAC;CACJ"}
+{"version":3,"file":"testmc.js","sourceRoot":"","sources":["../../../src/test/test/testmc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,0BAA0B,CAAC;AAE/D,QAAQ,CACJ,aAAa,EACb,MAAM,MAAO,SAAQ,EAAE;IACnB,YAAY,MAAmB;QAC3B,KAAK,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,OAAO;IAEP,CAAC;CACJ,CACJ,CAAC;AAEF,eAAe,KAAK,CAAE,aAAa,CAAE,CAAC"}

package/public/test/test/testmc.ts

@@ -0,0 +1,16 @@
+import { defineCE, getCE, DC } from '../../microcomponents.js';
+
+defineCE(
+    'test-testmc',
+    class TestMc extends DC {
+        constructor(target: HTMLElement) {
+            super(target);
+        }
+
+        oneInit() {
+            // console.log('testmc connected to DOM');
+        }
+    }
+);
+
+export default getCE( 'test-testmc' );

package/public/test/test/testsimpleclass.d.ts

@@ -0,0 +1,3 @@
+declare const _default: CustomElementConstructor | undefined;
+export default _default;
+//# sourceMappingURL=testsimpleclass.d.ts.map

package/public/test/test/testsimpleclass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testsimpleclass.d.ts","sourceRoot":"","sources":["../../../src/test/test/testsimpleclass.ts"],"names":[],"mappings":";AAcA,wBAA+C"}

package/public/test/test/testsimpleclass.js

@@ -0,0 +1,9 @@
+import { defineCE, getCE } from '../../microcomponents.js';
+defineCE('test-testsimpleclass', class TestSimpleClass {
+    constructor(target) {
+    }
+    oneInit() {
+    }
+});
+export default getCE('test-testsimpleclass');
+//# sourceMappingURL=testsimpleclass.js.map

package/public/test/test/testsimpleclass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testsimpleclass.js","sourceRoot":"","sources":["../../../src/test/test/testsimpleclass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAM,MAAM,0BAA0B,CAAC;AAE/D,QAAQ,CACJ,sBAAsB,EACtB,MAAM,eAAe;IACjB,YAAY,MAAmB;IAC/B,CAAC;IAED,OAAO;IAEP,CAAC;CACJ,CACJ,CAAC;AAEF,eAAe,KAAK,CAAE,sBAAsB,CAAE,CAAC"}

package/public/test/test/testsimpleclass.ts

@@ -0,0 +1,15 @@
+import { defineCE, getCE, DC } from '../../microcomponents.js';
+
+defineCE(
+    'test-testsimpleclass',
+    class TestSimpleClass {
+        constructor(target: HTMLElement) {
+        }
+
+        oneInit() {
+            // console.log('testmc connected to DOM');
+        }
+    }
+);
+
+export default getCE( 'test-testsimpleclass' );

package/public/test/test.html

@@ -24,6 +24,6 @@
 	<body>
 		<h3>Open debugger (F12), check console...</h3>
 		<test-grandparent></test-grandparent>
-		<test-testform _mc="test-testmc"></test-testform>
+		<test-testform data-mc="test-testmc"></test-testform>
 	</body>
 </html>

package/public/test/test.js

@@ -18,14 +18,14 @@ class Translator extends DC {
         that.Translation.bind(translationTargetObject);
         that.target.setAttribute('language', 'en');
         that.Language.notify();
-        delete that._mc;
     }
     onAttributeChanged(ev) {
-        if (!ev.data.newValue)
+        let detail = ev.detail || {};
+        if (!detail.newValue)
             return;
-        switch (ev.data.name) {
+        switch (detail.name) {
             case 'language':
-                this.Language = ev.data.newValue;
+                this.Language = detail.newValue;
                 break;
         }
     }
@@ -46,7 +46,6 @@ defineCE('my-tag', class MyTag extends DC {
         let that = this;
         target.innerHTML = this.#template;
         DC.add(target, 'translator', new Translator(target, that.#languages, target));
-        delete that._mc;
     }
     oneInit(ev) {
         let that = this;
@@ -56,7 +55,7 @@ defineCE('my-tag', class MyTag extends DC {
     }
     onClick(ev) {
         const that = this, c = that.Dom.counter++;
-        ev.data.stopPropagation();
+        ev.detail.data.stopPropagation();
         that.target.classList.remove('clicked');
         that.target.classList.add(that.Dom.counter > 9 ? 'overClicked' : 'clicked');
     }

package/public/test/test.js.map

@@ -1 +1 @@
-{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test/test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test/test.ts"],"names":[],"mappings":"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"}

package/public/test/test.ts

@@ -0,0 +1,188 @@
+import {
+	LooseObject,
+	DC,
+	defineCE,
+	getCE,
+	observe,
+	Observable,
+} from '../microcomponents.js';
+
+class Translator extends DC {
+	#translations: LooseObject = {};
+
+	Language: unknown = 'en';
+	Translation: unknown = {};
+
+	constructor(
+		target: HTMLElement | ShadowRoot | DocumentFragment,
+		translations: LooseObject,
+		translationTargetObject: HTMLElement
+	) {
+		super(target as HTMLElement);
+		let that = this; // minifier help
+
+		// state
+		that.Language = 'en';
+		that.Translation = {};
+
+		observe(that);
+
+		// setup
+		that.#translations = translations;
+
+		// on language change switch translation object
+		(that.Language as Observable).observe((lang) => {
+			if (that.#translations.hasOwnProperty(lang)) {
+				that.Translation = { lang: that.#translations[lang] }; // set translation
+			}
+		});
+
+		(that.Translation as Observable).bind(translationTargetObject);
+
+		that.target.setAttribute('language', 'en');
+
+		(that.Language as Observable).notify();
+	}
+
+	onAttributeChanged(ev: CustomEvent) {
+		let detail = ev.detail || {};
+		if (!detail.newValue) return;
+		switch (detail.name) {
+			case 'language':
+				this.Language = detail.newValue;
+				break;
+		}
+	}
+}
+
+defineCE(
+	// equivalent to custom element registry .define()
+	'my-tag',
+	class MyTag extends DC {
+		#template: string = '<button>{lang.click} {counter}</button>';
+
+		#languages = {
+			en: {
+				click: 'click me',
+			},
+			de: {
+				click: 'klick mich',
+			},
+		};
+
+		Dom: LooseObject = {};
+
+		constructor(target: HTMLElement) {
+			super(target);
+
+			let that = this; // minifier help
+
+			// render
+			target.innerHTML = this.#template;
+
+			// add translator
+			DC.add(
+				target,
+				'translator',
+				new Translator(target, that.#languages, target)
+			);
+		}
+
+		oneInit(ev: CustomEvent) {
+			let that = this;
+
+			// state
+			that.Dom = { counter: 0 };
+
+			// state: convert all props defined so far into observables
+			observe(that);
+
+			// bind Dom to target
+			(that.Dom as Observable).bind(that.target);
+		}
+
+		onClick(ev: CustomEvent) {
+			const that = this,
+				c = that.Dom.counter++;
+			(ev.detail.data as PointerEvent).stopPropagation();
+			(that.target as HTMLElement).classList.remove('clicked');
+			(that.target as HTMLElement).classList.add(
+				that.Dom.counter > 9 ? 'overClicked' : 'clicked'
+			);
+		}
+	},
+	['language']
+);
+
+let MyTag: CustomElementConstructor = getCE('my-tag')!,
+	fragment = new DocumentFragment();
+
+/*
+stress test
+*/
+
+let start = new Date().getTime(),
+	max = 1000;
+
+// create 1000 elements
+for (let x = 0; x < max; x++) {
+	fragment.append(new MyTag());
+}
+
+let end = new Date().getTime();
+
+// and put them into the DOM
+document.body.appendChild(fragment);
+
+//document.querySelectorAll('my-tag').forEach((e) => e.remove());
+
+/*
+console test
+*/
+
+setTimeout(() => {
+	// console.clear();
+
+	console.log(
+		'%c \n\nStress Test:\n\n %cInstancing %s web components (%s classes): %c %s ms.',
+		'font-weight: bold; color: black;',
+		'font-weight: normal;',
+		max,
+		max * 3,
+		'font-weight: bold; color: blue;',
+		end - start
+	);
+
+	//document.body.appendChild(new MyTag());
+
+	let element = document.querySelector('my-tag');
+
+	console.log(
+		"\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s",
+		'font-weight: bold;',
+		'font-weight: normal;',
+		element,
+		'font-weight: bold;',
+		'\n\nLook up code in the debugger: test.js\n'
+	);
+
+	let form = ( document.querySelector('test-testform') as any);
+	let formInstance = form._mc.TestTestform;
+
+	(window as any).form = formInstance;
+	console.log(
+		"\n\n%cAttached a global variable 'form':%c \n\n %O %c %s %c %s %c %s",
+		'font-weight: bold;',
+		'font-weight: normal;',
+		formInstance,
+		'font-weight: bold;',
+		'\n\nYou can use it to change input values, e.g. \n\n',
+		'font-weight: normal;',
+		'  form.data.textInput="other value"',
+		'font-weight: bold;',
+		'\n\nChanges will be reflected in the form contents, same as vice versa.\n'
+	);
+
+	// will trigger the event on all micro components contained in <my-tag>
+	DC.trigger(element, 'doSomething');
+}, 1000);

package/public/test/testform.css

@@ -0,0 +1,47 @@
+legend {
+    display: inherit;
+    margin:  inherit;
+    vertical-align:  inherit;
+}
+
+label {
+    display: inline;
+    margin-top: 5px;
+    margin-left: 5px;
+    vertical-align: top;
+    width: 10em;
+    text-align: right;
+}
+
+label::before {
+    content: ' ';
+    display: block;
+}
+
+form input,
+form select,
+form textarea {
+    margin-left: 5px;
+    margin-top: 0px;
+    display: inline;
+}
+
+form label + textarea {
+    display: inline-block;
+    margin-top: 3px;
+}
+
+form input + label {
+    width: inherit;
+    margin-top: 3px;
+    text-align: left;
+}
+
+body > form {
+    display: block;
+}
+
+form fieldset {
+    border: 1px solid darkslategrey;
+    border-radius: 3px;
+}

package/public/test/testform.html

@@ -0,0 +1,56 @@
+<!-- test form -->
+<fieldset>
+    <legend>Inputs</legend>
+    <label>text</label><input type="text" name="textInput" value="" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}
+    <label>color</label><input type="color" name="colorInput" value="" />
+    <label>date</label><input type="date" name="dateInput" value="" />
+    <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />
+    <label>email</label><input type="email" name="email" value="" />
+    <label>file</label><input type="file" name="fileInput" value="" />
+    <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />
+    <label>month</label><input type="month" name="month" value="" />
+    <label>number</label><input type="number" name="number" value="" />
+    <label>password</label><input type="password" name="passInput" value="" />
+    <label>range</label><input type="range" name="rangeInput" value="" />
+    <label>search</label><input type="search" name="searchInput" value="" />
+    <label>tel</label><input type="tel" name="telInput" value="" />
+    <label>time</label><input type="time" name="timeInput" value="" />
+    <label>url</label><input type="url" name="urlInput" value="" />
+    <label>week</label><input type="week" name="weekInput" value="" />
+</fieldset>
+<fieldset>
+    <legend>Selects</legend>
+        <label>singleSelect</label>
+        <select name="singleSelect">
+            <option disabled selected value> -- select -- </option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4">Option 4</option>
+        </select>
+        <label>multiSelect</label>
+        <select name="multiSelect" multiple="multiple" type="select-multiple">
+            <option value="1">Option 1</option>
+            <option value="2" selected=true>Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4" selected=true>Option 4</option>
+        </select>
+</fieldset>
+<fieldset>
+    <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong>{myRadio}</legend>
+    <label>radio1</label><input type="radio" name="myRadio" value="radio1">
+    <label>radio2</label><input type="radio" name="myRadio" value="radio2">
+    <label>radio3</label><input type="radio" name="myRadio" value="radio3">
+</fieldset>
+<fieldset>
+    <legend>Checkboxes</legend>
+    <label>cb1</label><input type="checkbox" name="cb1">
+    <label>cb2</label><input type="checkbox" name="cb2">
+    <label>cb3</label><input type="checkbox" name="cb3">
+    <label>cb4</label><input type="checkbox" name="cb4">
+    <label>cb5</label><input type="checkbox" name="cb5">
+</fieldset>
+<fieldset>
+    <legend>TextArea</legend>
+    <label>textArea</label><textarea name="textArea"></textarea>
+</fieldset>

package/public/test/testform.json

@@ -1,5 +1,5 @@
 {
-	"textInput":"Hello World",
+	"textInput":"Hallo Welt",
 	"colorInput":"#eaf8f8",
 	"dateInput":"",
 	"dtlInput":"",
@@ -21,7 +21,7 @@
 	"cb3":true,
 	"cb4":false,
 	"cb5":false,
-	"singleSelect":"1",
+	"singleSelect":"",
 	"multiSelect":["2","4"],
-	"textArea":"This is some example text\r..."
+	"textArea":"This is some example\rtext..."
 }

package/public/typedoc/assets/navigation.js

@@ -1 +1 @@
-window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAA42SwW6DMBBE/8VnlDaoSVuOJUg9BPVS9RLl4NhLsWrsyDaoVdV/rwQJNsYQzjPzPOvdwy8y8G1QgoBDBcJoFKEzNiVKUCVpzUHfXZVVaSqOIvTFBEVJHCFSMk4VCJQcegyFgglIM4spakEMk8IBXU1D4vbhL+o5n2BuQFrHiHB0GIVU1QfmNQSGstqisUIo28mBTXG9ank6rpSni6rsnCjhWOsuuvPS6/hp4j0n5D/phcgL1hAOttJ8OGtAmIl0q83FX9/zfU6ybtkWwoQBVWDScQYm7/M2W4eGKd0zbUCACu0vT1eOY+YqcW0kl5hOQS7yDEFBJRu4UWZomj0kedKgGnzioSN3xEWn9db7Lcv8nD2SdXnQ++fH9SYelYPQlC7wYgvMefwHYcy1G6AEAAA="
+window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAA42SQU+DMBiG/0u9kjmQTcdRtsSDxIvxsuzQwVdoLO3SFqMx/neTIbTrWuT8vc/D+5Vv/400fGqUIWDQAtcKReiEdYMy1IqqY6Buh8mi0S1DEXqnvEJZEqGyoaySwFG2HzUVEMoh3xkN6XipqeCWaAhdGtfpTzR6atD/SM6JK8PBchAh2zfMOvAsZWaz1vKpTCdLFvI61Yr8ulKRz6qiJa1rkEH+xgR6Txpv0rul/bhb6+slw0r19NYpECcPgcoW5LZ2oPIRK/CD59EU/PRaPBflrv/hxkG5Bklw2WsuQs4DrtaWDXdaMIEr3w8s8sUwnrhJQUgAFoRMcTyE8UkKghhMHpc4KpAf+Mh8h28NZ53by5g3Lv11ckwm5UiXm/t4lVyV865mC/9inj0Pv7li26e0BAAA"