@twobirds/microcomponents 0.0.82 → 0.0.83

package/public/src/test/test/greatgrandchild.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"greatgrandchild.js","sourceRoot":"","sources":["../../../src/test/test/greatgrandchild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE/D,SAAS,MAAM,CAAC,GAAW,EAAE,GAAW;IACvC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;IAC/D,OAAO,MAAM,CAAC;AACf,CAAC;AAED,QAAQ,CACP,sBAAsB,EAEtB,MAAM,mBAAoB,SAAQ,EAAE;IACnC,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,SAAS,iBAAiB;YACzB,OAAO,CACN,MAAM;gBACN,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG;gBACH,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG;gBACH,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG,CACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,iBAAiB,EAAE,CAAC,CAAC;IAC1E,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC"}

package/public/src/test/test/greatgrandchild.ts

@@ -0,0 +1,42 @@
+import { DC, defineCE, getCE } from '../../microcomponents.js';
+
+function random(min: number, max: number) {
+	var random = Math.floor(Math.random() * (max - min + 1) + min);
+	return random;
+}
+
+defineCE(
+	'test-greatgrandchild',
+
+	class TestGreatgrandchild extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			that.updateStyle();
+		}
+
+		updateStyle() {
+			var that = this;
+
+			function randomBorderColor() {
+				return (
+					'rgb(' +
+					random(0, 255) +
+					',' +
+					random(0, 255) +
+					',' +
+					random(0, 255) +
+					')'
+				);
+			}
+
+			that.target.setAttribute('style', 'border-color:' + randomBorderColor());
+		}
+	}
+);
+
+export const Greatgrandchild = getCE('test-greatgrandchild');

package/public/src/test/test/parent.d.ts

@@ -0,0 +1,2 @@
+export declare const Parent: CustomElementConstructor | undefined;
+//# sourceMappingURL=parent.d.ts.map

package/public/src/test/test/parent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parent.d.ts","sourceRoot":"","sources":["../../../src/test/test/parent.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,MAAM,sCAAuB,CAAC"}

package/public/src/test/test/parent.js

@@ -0,0 +1,15 @@
+import { DC, defineCE, getCE } from '../../microcomponents.js';
+import { Child } from './child.js';
+defineCE('test-parent', class Parent extends DC {
+    constructor(target) {
+        super(target);
+    }
+    onConnected() {
+        let that = this;
+        for (let x = 0; x < 5; x++) {
+            that.target.append(new Child());
+        }
+    }
+});
+export const Parent = getCE('test-parent');
+//# sourceMappingURL=parent.js.map

package/public/src/test/test/parent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parent.js","sourceRoot":"","sources":["../../../src/test/test/parent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,QAAQ,CACP,aAAa,EAEb,MAAM,MAAO,SAAQ,EAAE;IACtB,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,KAAM,EAAE,CAAC,CAAC;QAClC,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC"}

package/public/src/test/test/parent.ts

@@ -0,0 +1,21 @@
+import { DC, defineCE, getCE } from '../../microcomponents.js';
+import { Child } from './child.js';
+defineCE(
+	'test-parent',
+
+	class Parent extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			for (let x = 0; x < 5; x++) {
+				that.target.append(new Child!());
+			}
+		}
+	}
+);
+
+export const Parent = getCE('test-parent');

package/public/src/test/test/testform.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=testform.d.ts.map

package/public/src/test/test/testform.d.ts.map

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

package/public/src/test/test/testform.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TestTestform=t():e.TestTestform=t()}(self,(()=>(()=>{"use strict";var e=new Function("try {return this===window;}catch(e){ return false;}");let t=new Set;e()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>t.add(e)));class n{#e;#t=!1;#n=!1;constructor(e,t={},n="l"){this.#e=e,this.data=t,this.bubble=n}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#n}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var r=new Function("try {return this===window;}catch(e){ return false;}");let a=new Set;function l(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const r=e?._mc;!t&&r?n=n.concat(Object.values(e._mc)):t&&r&&r[t]&&n.push(r[t])}})),n}function o(e,t,n=!0){let r=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&r.push(e._mc[t]):r=r.concat(Object.values(e._mc)),n))return r;e=e.parentNode}return r}function s(e){return e&&e instanceof HTMLElement}function i(e,t,n,r=!1,a=!1){let l={once:!1};r&&(l.capture=r),a&&(l.once=a),e.addEventListener(t,n,l)}function c(e,t,n={}){let r=e;if(!r._mc){let t=m?.debug;m.debug=!1,r._mc=new m(e),m.debug=t,delete r._mc._mc}const a=r._mc;return t.length&&!a[t]&&(a[t]=n,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),n}function u(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={},a="l"){let l=e?._mc;if(!l)return;let o=t instanceof n?new n(t.type,t.data,"l"):new n(t,r,"l"),s="string"!=typeof t?t:new n(t,r,a);[...Object.values(l)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(o)})),/[ud]/.test(s.bubble)&&b(e,s)}function b(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=o(e,"",!0)?.[0].target;n&&m.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&m.trigger(e,t)}))}),0)}r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>a.add(e)));class d{_target;__mc={};constructor(e,t=!1){var n;this._target=new WeakRef(e||{}),(n=this).constructor!==m&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!r()||e.constructor===m)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((r=>{let l=/^one/.test(r),o=r.replace(/^on[e]{0,1}/,""),s=o.toLowerCase();l&&Object.defineProperty(e,"on"+o,{configurable:!0,enumerable:!1,writable:!0,value:e=>{n.constructor.prototype[r].bind(n)(e)}}),a.has("on"+s)&&i(t,s,(e=>{n.trigger(o,e)}),!1,l)}))}}(this)}get target(){return this._target.deref()}get _mc(){return this.__mc}}class f extends d{constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let a=this;if(a.constructor===f||a.constructor===m){let l=e instanceof n?new n(e.type,e.data,"l"):new n(e,t,"l"),o="string"!=typeof e?e:new n(e,t,r);return[...Object.getOwnPropertyNames(a)].forEach((e=>{a[e]?.trigger&&"function"==typeof a[e]?.trigger&&a[e]?.trigger(l)})),void(/[ud]/.test(o.bubble)&&b(a.target,o))}if(a instanceof f||a instanceof m){const a=this,l="string"!=typeof e?e:new n(e,t,r),o="on"+l.type[0].toUpperCase()+l.type.slice(1);if(l.bubble.indexOf("l")>-1&&(l.immediateStopped||"function"!=typeof a[o]||(a[o](l),a.hasOwnProperty(o)&&delete a[o])),l.stopped||"l"===l.bubble)return a;/[ud]/.test(l.bubble)&&b(a.target,l)}}}class m extends d{constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){f.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return s(t)?o(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return s(t)?o(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!s(t))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';t.setAttribute("temp_id",n);const a=l([...t.querySelectorAll(r)],e);return t.removeAttribute("temp_id"),a}descendants(e=""){let t=this?.target;return s(t)?l([...t.querySelectorAll("*[_mc]")],e):[]}}function h(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var r;(r=e[n])&&r.constructor&&r.constructor===Object?t[n]=h(e[n]):t[n]=e[n]})),t}function g(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=g(e[t],!1);for(const e in r)n[t+"."+e]=r[e]}else n[t]=e[t]})),t?h(n):n}function y(e,t){return JSON.stringify(g(e))===JSON.stringify(g(t))}function v(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function O(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(t,e,r)}new Set;class w extends HTMLElement{constructor(){super()}connectedCallback(){m.trigger(this,"Connected")}disconnectedCallback(){m.trigger(this,"Disconnected")}adoptedCallback(){m.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){m.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function E(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}function x(e){return null!=e&&"object"==typeof e}function k(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(n))).forEach((t=>{let r=new Set(e.getAttribute(t)?.match(n));r.forEach((e=>r.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(n))).forEach((e=>{(e.nodeValue||"").match(n).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}const A=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class S extends m{data={};oldDisplay="";constructor(e){super(e),k(e).forEach((e=>this.data[e]="")),T(this),this.#r()}#r(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));var r;this.data.observe((r=e.getAttribute(t),a=>{let l=r;n.forEach((e=>{l=l.replace(e,a[e.replace(/[\{\}]/g,"")])})),e.setAttribute(t,l)}))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{t=!0;let r=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((t=>a=>{let l=t;r.forEach((e=>{l=l.replace(e,a[e.replace(/[\{\}]/g,"")])})),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=l})(n.nodeValue)),this.oldDisplay=e.getAttribute("style)")||"",t&&!A.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(e){let t={};Object.keys(e.data).forEach((n=>{this.data.hasOwnProperty(n)&&(t[n]=e.data[n])})),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}}const _={};function j(e){let t=e.constructor.name;return _[t]||function(e){const t=e.constructor,n=t.name;let r=class extends t{#a=!0;#l=[];constructor(e){super(e),this.constructor.callbacks=[],x(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}get callbacks(){return this.#l}set callbacks(e){this.#l=e}observe(e){return this.#l.push(e),this}bind(e){if(x(this.valueOf())){!function(e){var t;(t=e,[t].concat([...t.querySelectorAll("*")]).filter((e=>!!k(e).length)).filter((e=>"STYLE"!==e?.tagName)).reverse()).forEach((e=>{e?._mc?._placeholders||m.add(e,"_placeholders",new S(e))}))}(e);const t=[e,...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),n=function(e){let n=g(e);t.forEach((e=>{e&&e._mc.trigger("data",n)}))};this.#l.push(n),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(e){let t=x(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==e&&(this.#a=e),this.#l.forEach((e=>{e(t)})),this}};return _[n]=r,r}(e)}const T=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if(e.hasOwnProperty(t)&&"function"!=typeof e[t]&&!e?.[t]?.constructor?.prototype?.observe){if("_"===t[0]||void 0===e?.[t])return e;let n=e[t],r=new(j(n))(n);Object.defineProperty(e,t,{enumerable:!0,get(){if(x(r.valueOf())){let e=structuredClone(Object.assign({},r));setTimeout(v((function(){y(structuredClone(Object.assign({},r)),e)||r.notify()}),0),0)}return r},set(e){if(typeof e==typeof r.valueOf())if(x(r.valueOf())&&r.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},r));void 0===r?.constructor?.prototype?.observe&&(r=new(j(e))(structuredClone(Object.assign({},e))),O(e,r),r.seal()),Object.assign(r,e),setTimeout(v((function(){y(structuredClone(Object.assign({},r)),t)||r.notify()}),0),0)}else{let t=r.valueOf(),n=r.callbacks;e!==t&&(r=new(j(e))(e),r.callbacks=n,r.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof e)}}),e[t]=n}})),e);class N{constructor(e){}}class C extends N{#o;constructor(e){super(e),this.#o=e}get val(){return new FormData(this.#o.form).get(this.#o.name)}set val(e){[...this.#o.form.querySelectorAll(`input[type="radio"][name="${this.#o.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class I extends N{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.checked}set val(e){this.#o.checked=e}}class L extends N{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value}set val(e){this.#o.value=e}}class P extends N{#o;#s=!1;constructor(e){super(e),this.#o=e,this.#s=e.multiple}get val(){const e=[];return[...this.#o.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#s?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#o.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class M extends N{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value||""}set val(e){this.#o.value=e}}return function(e,t,n=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");E(t.prototype.constructor)&&t.prototype instanceof d?customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(r,class extends w{instance;constructor(e){super();const n=E(t)?new t(this,e):t;m.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(e,t)}("test-testform",class extends m{data;constructor(e){super(e);const t=this;let n=t.target.attachShadow({mode:"open"});n.innerHTML=`<style>${t.css}</style>${t.template}`,function(e,t,n){let r=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let r=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":r=new C(e);break;case"checkbox":r=new I(e);break;default:r=new L(e)}break;case"select":r=new P(e);break;case"textarea":r=new M(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}r&&(m.add(e,t,r),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>r.val,set:e=>{r.val!==e&&(r.val=e)}}))}})),n})(n);e[t]=Object.assign({},r),T(e,t),O(r,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{i(n,"input",(n=>{e[t].notify()}))}))}(t,"data",n),t.data.bind(n),fetch("./testform.json").then((e=>e.json())).then((e=>{t.data=e}))}get template(){return'\n                <form>\n                    \x3c!-- sample form to start with --\x3e\n                    <fieldset>\n                        <legend>Inputs</legend>\n                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}<br />\n                        <label>color</label><input type="color" name="colorInput" value="#000000" /><br />\n                        <label>date</label><input type="date" name="dateInput" value="" /><br />\n                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" /><br />\n                        <label>email</label><input type="email" name="email" value="" /><br />\n                        <label>file</label><input type="file" name="fileInput" value="" /><br />\n                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" /><br />\n                        <label>month</label><input type="month" name="month" value="" /><br />\n                        <label>number</label><input type="number" name="number" value="" /><br />\n                        <label>password</label><input type="password" name="passInput" value="" /><br />\n                        <label>range</label><input type="range" name="rangeInput" value="" /><br />\n                        <label>search</label><input type="search" name="searchInput" value="" /><br />\n                        <label>tel</label><input type="tel" name="telInput" value="" /><br />\n                        <label>time</label><input type="time" name="timeInput" value="" /><br />\n                        <label>url</label><input type="url" name="urlInput" value="" /><br />\n                        <label>week</label><input type="week" name="weekInput" value="" /><br />\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Selects&nbsp;<strong>2wB:&nbsp;</strong>&nbsp;<span>"{singleSelect}"</span>&nbsp;<span>[{multiSelect}]</span></legend>\n\n                            <label>singleSelect</label>\n                            <select name="singleSelect">\n                                <option disabled selected value> -- select -- </option>\n                                <option value="1">Option 1</option>\n                                <option value="2">Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4">Option 4</option>\n                            </select><br />\n\n                            <label>multiSelect</label>\n                            <select name="multiSelect" multiple="multiple" type="select-multiple">\n                                <option value="1">Option 1</option>\n                                <option value="2" selected=true>Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4" selected=true>Option 4</option>\n                            </select>\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>"{myRadio}"</span></legend>\n\n                        <label>radio1</label><input type="radio" name="myRadio" value="radio1"><br />\n                        <label>radio2</label><input type="radio" name="myRadio" value="radio2"><br />\n                        <label>radio3</label><input type="radio" name="myRadio" value="radio3"><br />\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Checkboxes</legend>\n                        <label>cb1</label><input type="checkbox" name="cb1"><br />\n                        <label>cb2</label><input type="checkbox" name="cb2"><br />\n                        <label>cb3</label><input type="checkbox" name="cb3"><br />\n                        <label>cb4</label><input type="checkbox" name="cb4"><br />\n                        <label>cb5</label><input type="checkbox" name="cb5"><br />\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>TextArea</legend>\n                        <label>textArea</label>\n                        <textarea name="textArea">abc</textarea>\n                    </fieldset>\n\n                </form>\n            '}get css(){return'\nlegend {\n    display: inherit;\n    margin:  inherit;\n    vertical-align:  inherit;\n    font-weight: bold;\n}\n\nlabel {\n    display: inline-block;\n    margin-top: 1em;\n    margin-left: 5px;\n    vertical-align: top;\n    min-width:10em;\n    text-align: right;\n}\n\nform input,\nform select,\nform textarea {\n    display: inline-block;\n    margin-left: 5px;\n    margin-top: 1.1em;\n}\n\ninput[type="radio"],\ninput[type="checkbox"] {\n    margin-top: 1.3em;\n}\n\nbody > form {\n    display: block;\n}\n\nform fieldset {\n    border: 1px solid #aaaaaa;\n    border-radius: 3px;\n    margin: 0.5em 0;\n}\n            '}}),{}})()));

package/public/src/test/test/testform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testform.js","sourceRoot":"","sources":["../../../src/test/test/testform.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EACH,EAAE,EACF,QAAQ,EAER,UAAU,EAEb,MAAM,0BAA0B,CAAC;AAElC,QAAQ,CACP,eAAe,EAEf,MAAM,QAAS,SAAQ,EAAE;IACxB,IAAI,CAAU;IAEd,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,MAAM,IAAI,GAAG,IAAI,CAAC;QAElB,IAAI,MAAM,GAAI,IAAW,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QAChE,MAAM,CAAC,SAAS,GAAG,UAAU,IAAI,CAAC,GAAG,WAAW,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhE,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAEhC,IAAI,CAAC,IAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAG9B,KAAK,CAAC,iBAAiB,CAAC;aACnB,IAAI,CAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;aACxB,IAAI,CAAE,IAAI,CAAC,EAAE;YACV,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACrB,CAAC,CAAC,CAAC;IAEjB,CAAC;IAED,IAAI,QAAQ;QACX,OAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuEN,CAAC;IACZ,CAAC;IAED,IAAI,GAAG;QACN,OAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuCL,CAAC;IACZ,CAAC;CACD,CACD,CAAC"}

package/public/src/test/test/testform.ts

@@ -0,0 +1,155 @@
+'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);
+
+			const that = this;
+
+			let shadow = (that as DC).target.attachShadow({ mode: 'open' });
+			shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
+
+			formValues(that, 'data', shadow); // create this.data formdata observable
+
+			(that.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 => {
+                    that.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/src/test/test/testfunction.d.ts

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

package/public/src/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/src/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/src/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/src/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/src/test/test/testmc.d.ts

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

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

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

package/public/src/test/test/testmc.js

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

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

@@ -0,0 +1 @@
+{"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/src/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/src/test/test/testsimpleclass.d.ts

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

package/public/src/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/src/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/src/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/src/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/src/test/test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test.d.ts.map

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

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

package/public/src/test/test.js

@@ -0,0 +1,79 @@
+import { DC, defineCE, getCE, observe, } from '../microcomponents.js';
+class Translator extends DC {
+    #translations = {};
+    Language = 'en';
+    Translation = {};
+    constructor(target, translations, translationTargetObject) {
+        super(target);
+        let that = this;
+        that.Language = 'en';
+        that.Translation = {};
+        observe(that);
+        that.#translations = translations;
+        that.Language.observe((lang) => {
+            if (that.#translations.hasOwnProperty(lang)) {
+                that.Translation = { lang: that.#translations[lang] };
+            }
+        });
+        that.Translation.bind(translationTargetObject);
+        that.target.setAttribute('language', 'en');
+        that.Language.notify();
+    }
+    onAttributeChanged(ev) {
+        if (!ev.data.newValue)
+            return;
+        switch (ev.data.name) {
+            case 'language':
+                this.Language = ev.data.newValue;
+                break;
+        }
+    }
+}
+defineCE('my-tag', class MyTag extends DC {
+    #template = '<button>{lang.click} {counter}</button>';
+    #languages = {
+        en: {
+            click: 'click me',
+        },
+        de: {
+            click: 'klick mich',
+        },
+    };
+    Dom = {};
+    constructor(target) {
+        super(target);
+        let that = this;
+        target.innerHTML = this.#template;
+        DC.add(target, 'translator', new Translator(target, that.#languages, target));
+    }
+    oneInit(ev) {
+        let that = this;
+        that.Dom = { counter: 0 };
+        observe(that);
+        that.Dom.bind(that.target);
+    }
+    onClick(ev) {
+        const that = this, c = that.Dom.counter++;
+        ev.data.stopPropagation();
+        that.target.classList.remove('clicked');
+        that.target.classList.add(that.Dom.counter > 9 ? 'overClicked' : 'clicked');
+    }
+}, ['language']);
+let MyTag = getCE('my-tag'), fragment = new DocumentFragment();
+let start = new Date().getTime(), max = 1000;
+for (let x = 0; x < max; x++) {
+    fragment.append(new MyTag());
+}
+let end = new Date().getTime();
+document.body.appendChild(fragment);
+setTimeout(() => {
+    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);
+    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');
+    let formInstance = form._mc.TestTestform;
+    window.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');
+    DC.trigger(element, 'doSomething');
+}, 1000);
+//# sourceMappingURL=test.js.map

package/public/src/test/test.js.map

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