@twobirds/microcomponents 0.0.72 → 0.0.75

package/public/test/test.ts

@@ -1,194 +0,0 @@
-'use strict';
-
-import {
-	LooseObject,
-	DC,
-	McEvent,
-	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;
-
-		// state
-		(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();
-
-		delete that._mc; // cleanup, not needed
-	}
-
-	onAttributeChanged(ev: McEvent) {
-		if (!ev.data.newValue) return;
-		switch (ev.data.name) {
-			case 'language':
-				this.Language = ev.data.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)
-			);
-
-			delete that._mc; // cleanup, not needed
-		}
-
-		oneInit(ev: McEvent) {
-			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: McEvent) {
-			const that = this,
-				c = that.Dom.counter++;
-			(ev.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');
-}, 500);

package/public/typedoc/functions/selectors._d.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>$d | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="../modules/selectors.html">selectors</a></li><li><a href="selectors._d.html">$d</a></li></ul><h1>Function $d</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="_d" class="tsd-anchor"></a><span class="tsd-kind-call-signature">$d</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">selection</span>, <span class="tsd-kind-parameter">element</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/selectors.DSelector.html" class="tsd-signature-type tsd-kind-interface">DSelector</a><a href="#_d" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">selection</span>: <a href="../types/selectors.selection.html" class="tsd-signature-type tsd-kind-type-alias">selection</a></span></li><li><span><span class="tsd-kind-parameter">element</span>: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> = document</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../interfaces/selectors.DSelector.html" class="tsd-signature-type tsd-kind-interface">DSelector</a></h4><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/22493dfc45b0ddfc2926a53ec0fd9b5212ad4955/src/selectors.ts#L1610">src/selectors.ts:1610</a></li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/public/typedoc/functions/selectors._t.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>$t | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="../modules/selectors.html">selectors</a></li><li><a href="selectors._t.html">$t</a></li></ul><h1>Function $t</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="_t" class="tsd-anchor"></a><span class="tsd-kind-call-signature">$t</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">selection</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">element</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/selectors.TSelector.html" class="tsd-signature-type tsd-kind-interface">TSelector</a><a href="#_t" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">selection</span>: <a href="../types/selectors.selection.html" class="tsd-signature-type tsd-kind-type-alias">selection</a></span></li><li><span><span class="tsd-kind-parameter">element</span>: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> = document</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../interfaces/selectors.TSelector.html" class="tsd-signature-type tsd-kind-interface">TSelector</a></h4><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/22493dfc45b0ddfc2926a53ec0fd9b5212ad4955/src/selectors.ts#L1628">src/selectors.ts:1628</a></li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>