@twobirds/microcomponents 0.0.72 → 0.0.75

package/public/test/observables.ts

@@ -194,207 +194,215 @@ function makePlaceholders(
 export type Observable = {
 	observe: (cb: Callback) => void;
 	notify: () => void;
-	bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
+	bind: (target: HTMLElement | DocumentFragment | ShadowRoot ) => void;
 };
 
-export const observe = (
-	target: LooseObject,
-	propertyName?: string
-): LooseObject => {
-	let keys = !propertyName
-		? [...Object.getOwnPropertyNames(target)]
-		: [propertyName];
+type Class<T> = new (...args: any[]) => T;
 
-	keys.forEach((key) => {
-		// console.log( 'co propname', key, typeof target[key], target[key] );
-		if (key[0] === '_' || target?.[key] === undefined) return target;
-		let val: any = target[key],
-			Constructor: any;
-
-		if (!val.prototype) {
-			switch (typeof val) {
-				case 'string':
-					Constructor = String;
-					break;
-				case 'number':
-					Constructor = Number;
-					break;
-				case 'boolean':
-					Constructor = Boolean;
-					break;
-				case 'object':
-					if (val instanceof Array) {
-						Constructor = Array;
-					} else {
-						Constructor = Object;
-					}
-					break;
-				default:
-					return;
+// repository for observable class wrappers
+const classRepo: LooseObject = {};
+
+// creates a new observable class wrapper
+function makeObservable(val: any): Class<typeof val>{
+
+	const Constructor = val.constructor,
+		ConstructorName: string = Constructor.name;
+
+	let ObservableClass = class extends Constructor {
+		#notify: boolean = true;
+		#callbacks: Array<Function> = [];
+
+		constructor(val: any) {
+			super(val);
+			(this.constructor as LooseObject).callbacks = [];
+			if (isObservableObject(val)) {
+				// you cannot bind native values to the dom
+				Object.getOwnPropertyNames(val).forEach((key) => {
+					this[key] = val[key];
+				});
 			}
 		}
 
-		let Observable = class extends Constructor {
-			#notify: boolean = true;
+		observe(f: Function) {
+			//console.log('observe');
+			this.#callbacks.push(f);
+			return this;
+		}
 
-			constructor(val: any) {
-				super(val);
-				(this.constructor as LooseObject).callbacks = [];
-				if (isObservableObject(val)) {
-					// you cannot bind native values to the dom
-					Object.getOwnPropertyNames(val).forEach((key) => {
-						this[key] = val[key];
+		bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
+			const that = this,
+				iso = isObservableObject(that.valueOf());
+			//console.log('bind', iso, target);
+
+			if (iso) {
+				makePlaceholders(target);
+				const placeholders: unknown = [
+					...target.querySelectorAll('[_mc]'),
+				].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
+				//console.log('placeholders:', target, placeholders);
+				const func = function callback(data: LooseObject) {
+					// avoid bubbling for speed
+					let d = flattenObject(data);
+					//console.log('inside callback', target, d);
+					(placeholders as DC[]).forEach((e) => {
+						// console.log('trigger callback', e);
+						if (!e) return;
+						(e as any)._mc.trigger('data', d);
 					});
-				}
+				};
+				(that as any).#callbacks.push(func);
+				that.notify();
+			} else {
+				console.warn(
+					'IGNORED - cannot bind a non-Object to the dom, IS:',
+					typeof that.valueOf(),
+					that
+				);
 			}
 
-			observe(f: Function) {
-				//console.log('observe');
-				(this.constructor as any).callbacks.push(f);
-				return this;
+			return this;
+		}
+
+		notify(notify?: boolean) {
+			let that = this,
+				data =
+					isObservableObject(that.valueOf()) &&
+					that.valueOf() instanceof Array === false
+						? structuredClone(Object.assign({}, that))
+						: that.valueOf();
+
+			if (notify !== undefined) {
+				that.#notify = notify;
+				// return;
 			}
 
-			bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
-				const that = this,
-					iso = isObservableObject(that.valueOf());
-				//console.log('bind', iso, target);
-
-				if (iso) {
-					makePlaceholders(target);
-					const placeholders: unknown = [
-						...target.querySelectorAll('[_mc]'),
-					].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
-					//console.log('placeholders:', target, placeholders);
-					const func = function callback(data: LooseObject) {
-						// avoid bubbling for speed
-						let d = flattenObject(data);
-						//console.log('inside callback', target, d);
-						(placeholders as DC[]).forEach((e) => {
-							// console.log('trigger callback', e);
-							if (!e) return;
-							(e as any)._mc.trigger('data', d);
-						});
-					};
-					(that.constructor as any).callbacks.push(func);
-					that.notify();
-				} else {
-					console.warn(
-						'IGNORED - cannot bind a non-Object to the dom, IS:',
-						typeof that.valueOf(),
-						that
-					);
-				}
+			//if (that.#notify) console.log('notify', this, data);
+			(that as any).#callbacks.forEach((f: Function) => {
+				// console.log(
+				// 	(this.constructor as any).callbacks,
+				// 	'notify: exec callback',
+				// 	f,
+				// 	data
+				// );
+				f(data);
+			});
 
-				return this;
-			}
+			return that;
+		}
+	};
 
-			notify(notify?: boolean) {
-				let that = this,
-					data =
-						isObservableObject(that.valueOf()) &&
-						that.valueOf() instanceof Array === false
-							? structuredClone(Object.assign({}, that))
-							: that.valueOf();
-
-				if (notify !== undefined) {
-					that.#notify = notify;
-					// return;
-				}
+	(classRepo as any)[ConstructorName] = ObservableClass;
 
-				//if (that.#notify) console.log('notify', this, data);
-				(that.constructor as any).callbacks.forEach((f: Function) => {
-					// console.log(
-					// 	(this.constructor as any).callbacks,
-					// 	'notify: exec callback',
-					// 	f,
-					// 	data
-					// );
-					f(data);
-				});
+	// console.log( 'classRepo:', classRepo );
 
-				return that;
-			}
-		};
+	return ObservableClass;
+}
 
-		let o = new Observable(val);
-
-		Object.defineProperty(target, key, {
-			enumerable: true,
-			get() {
-				if (isObservableObject(o.valueOf())) {
-					let check = structuredClone(Object.assign({}, o));
-					setTimeout(
-						debounce(function checkChanges() {
-							let state = structuredClone(Object.assign({}, o));
-							//console.log( 'check changes', state, check );
-							if (!deepEqual(state, check)) {
-								//console.log( '-> not equal!' );
-								o.notify();
-							}
-						}, 0),
-						0
-					);
-				}
-				return o;
-			},
-			set(val: any) {
-				//console.log( 'SET:', isObservableObject( val.valueOf() ), 'set:', val, 'to', isObservableObject( o.valueOf() ), o, );
-				if (typeof val === typeof o.valueOf()) {
-					let iso =
-						isObservableObject(o.valueOf()) &&
-						o.valueOf() instanceof Array === false;
-					//console.log('target iso:', iso);
-					if (iso) {
-						let old = structuredClone(Object.assign({}, o));
-						//val = structuredClone(Object.assign({}, val));
-
-						//let callbacks = (o.constructor as LooseObject).callbacks;
-						if (o instanceof Observable === false) {
-							o = new Observable(structuredClone(Object.assign({}, val)));
-							copyGettersSetters(val, o);
-							o.seal();
-						}
-						Object.assign(o, val);
+function getConstructor( val: any ): Class<typeof val> { 
+	let key: string = val.constructor.name;
+	return classRepo[key] || makeObservable( val );
+}
 
-						// console.log('after set o=', o, 'check', old);
-						// (o.constructor as LooseObject).callbacks = callbacks;
+export const observe = (
+	target: LooseObject,
+	propertyName?: string
+): LooseObject => {
+	let keys = !propertyName
+		? [...Object.getOwnPropertyNames(target)]
+		: [propertyName];
 
+	keys.forEach((key) => {
+		if ( 
+			target.hasOwnProperty(key) 
+			&&  typeof target[key] !== 'function' 
+			&& !target?.[key]?.constructor?.prototype?.observe 
+		) {
+
+			// console.log( 'co propname', key, typeof target[key], target[key] );
+			if (key[0] === '_' || target?.[key] === undefined) return target;
+			let val: any = target[key];
+
+			let o = new ( getConstructor(val) as Class<typeof val> )( val );
+
+			Object.defineProperty(target, key, {
+				enumerable: true,
+				get() {
+					if (isObservableObject(o.valueOf())) {
+						let check = structuredClone(Object.assign({}, o));
 						setTimeout(
-							// check for changes
 							debounce(function checkChanges() {
 								let state = structuredClone(Object.assign({}, o));
 								//console.log( 'check changes', state, check );
-								if (!deepEqual(state, old)) {
+								if (!deepEqual(state, check)) {
 									//console.log( '-> not equal!' );
 									o.notify();
 								}
 							}, 0),
 							0
 						);
-					} else {
-						// simple native var
-						let old = o.valueOf(),
-							callbacks = (o.constructor as LooseObject).callbacks;
-						o = new Observable(val);
-						(o.constructor as LooseObject).callbacks = callbacks;
-						if (val !== old) {
-							o.notify();
+					}
+					return o;
+				},
+				set(val: any) {
+					//console.log( 'SET:', isObservableObject( val.valueOf() ), 'set:', val, 'to', isObservableObject( o.valueOf() ), o, );
+					if (typeof val === typeof o.valueOf()) {
+						let iso =
+							isObservableObject(o.valueOf()) &&
+							o.valueOf() instanceof Array === false;
+						//console.log('target iso:', iso);
+						if (iso) {
+							let old = structuredClone(Object.assign({}, o));
+							//val = structuredClone(Object.assign({}, val));
+
+							//let callbacks = (o.constructor as LooseObject).callbacks;
+							if (o?.constructor?.prototype?.observe === undefined ) {
+								o = new ( getConstructor(val) as Class<typeof val> )( structuredClone(Object.assign({}, val)) );
+								copyGettersSetters(val, o);
+								o.seal();
+							}
+							Object.assign(o, val);
+
+							// console.log('after set o=', o, 'check', old);
+							// (o.constructor as LooseObject).callbacks = callbacks;
+
+							setTimeout(
+								// check for changes
+								debounce(function checkChanges() {
+									let state = structuredClone(Object.assign({}, o));
+									//console.log( 'check changes', state, check );
+									if (!deepEqual(state, old)) {
+										//console.log( '-> not equal!' );
+										o.notify();
+									}
+								}, 0),
+								0
+							);
+						} else {
+							// simple native var
+							let old = o.valueOf(),
+								callbacks = (o.constructor as LooseObject).callbacks;
+							o = o = new ( getConstructor(val) as Class<typeof val> )( val );
+							(o.constructor as LooseObject).callbacks = callbacks;
+							if (val !== old) {
+								o.notify();
+							}
 						}
+					} else {
+						console.warn(
+							'IGNORED - cannot change observable types, IS:',
+							typeof o.valueOf(),
+							o,
+							'- CANNOT BECOME:',
+							typeof val
+						);
 					}
-				} else {
-					console.warn(
-						'IGNORED - cannot change observable types, IS:',
-						typeof o.valueOf(),
-						o,
-						'- CANNOT BECOME:',
-						typeof val
-					);
-				}
-			},
-		});
+				},
+			});
+
+			// replace old property with proxy (observable)
+			target[key] = val;
+		};
 
-		// replace old property with proxy (observable)
-		target[key] = val;
 	});
 
 	return target;

package/public/test/test/grandparent.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.grandparent=e():t.grandparent=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{GrandParent:()=>N});var n=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;n()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>r.add(t)));class o{#t;#e=!1;#n=!1;constructor(t,e={},n="l"){this.#t=t,this.data=e,this.bubble=n}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#n}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var s=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function a(t,e){let n=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const r=t?._mc;!e&&r?n=n.concat(Object.values(t._mc)):e&&r&&r[e]&&n.push(r[e])}})),n}function i(t,e,n=!0){let r=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&r.push(t._mc[e]):r=r.concat(Object.values(t._mc)),n))return r;t=t.parentNode}return r}function l(t){return t&&t instanceof HTMLElement}function u(t,e,n,r=!1,o=!1){let s={once:!1};r&&(s.capture=r),o&&(s.once=o),t.addEventListener(e,n,s)}function d(t,e,n={}){let r=t;if(!r._mc){let e=h?.debug;h.debug=!1,r._mc=new h(t),h.debug=e,delete r._mc._mc}const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),n}function m(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function p(t,e,n={},r="l"){let s=t?._mc;if(!s)return;let c=e instanceof o?new o(e.type,e.data,"l"):new o(e,n,"l"),a="string"!=typeof e?e:new o(e,n,r);[...Object.values(s)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(a.bubble)&&g(t,a)}function g(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let n=i(t,"",!0)?.[0].target;n&&h.trigger(n,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&h.trigger(t,e)}))}),0)}s()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>c.add(t)));class f{#r;constructor(t,e=!1){var n;this.#r=new WeakRef(t||{}),(n=this).constructor!==h&&setTimeout((()=>{n.trigger("Init")}),0),function(t){if(!s()||t.constructor===h)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((r=>{let o=/^one/.test(r),s=r.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();o&&Object.defineProperty(t,"on"+s,{configurable:!0,enumerable:!1,writable:!0,value:t=>{n.constructor.prototype[r].bind(n)(t)}}),c.has("on"+a)&&u(e,a,(t=>{n.trigger(s,t)}),!1,o)}))}}(this)}get target(){return this.#r.deref()}}class b extends f{_mc={};constructor(t){super(t)}static trigger=p;trigger(t,e={},n="l"){let r=this;if(r.constructor===b||r.constructor===h){let s=t instanceof o?new o(t.type,t.data,"l"):new o(t,e,"l"),c="string"!=typeof t?t:new o(t,e,n);return[...Object.getOwnPropertyNames(r)].forEach((t=>{r[t]?.trigger&&"function"==typeof r[t]?.trigger&&r[t]?.trigger(s)})),void(/[ud]/.test(c.bubble)&&g(r.target,c))}if(r instanceof b||r instanceof h){const r=this,s="string"!=typeof t?t:new o(t,e,n),c="on"+s.type[0].toUpperCase()+s.type.slice(1);if(s.bubble.indexOf("l")>-1&&(s.immediateStopped||"function"!=typeof r[c]||(r[c](s),r.hasOwnProperty(c)&&delete r[c])),s.stopped||"l"===s.bubble)return r;/[ud]/.test(s.bubble)&&g(r.target,s)}}}class h extends f{_mc={};constructor(t,e=!1){super(t)}static add=d;static remove=m;static trigger=p;trigger(t,e={},n){b.prototype.trigger.call(this,t,e,n)}parent(t=""){let e=this.target;return l(e)?i(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?i(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!l(e))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';e.setAttribute("temp_id",n);const o=a([...e.querySelectorAll(r)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return l(e)?a([...e.querySelectorAll("*[_mc]")],t):[]}}const y=new Map,w=new Map;function _(t){const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",t),n.setAttribute("loading",""),u(n,"load",(t=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),u(n,"error",(t=>{console.error("could not load Custom Element code from",e)})),n}function E(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!y.has(t.tagName.toLowerCase()))).forEach((t=>{const e=t.tagName.toLowerCase(),n=(e.split("-").join("/"),_(e));u(n,"load",(()=>{y.set(e,customElements.get(t.tagName.toLowerCase()))})),y.set(e,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("_mc")?.split(" ").filter((t=>!!t))||[],n=e.filter((t=>!w.has(t)));n?.forEach((t=>{const e=_(t);u(e,"load",(()=>{return e=document.head.querySelector(`script[name="${t}"]`),void setTimeout((function(){const t=e.getAttribute("src"),n=e.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const o=`\n\n\t\t\timport _ from "${t}";\n\t\t\timport {DC} from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${n}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;r.innerHTML=o,document.body.append(r)}),0);var e})),w.set(t,"loading"),document.head.append(e)}));const r=e.filter((t=>w.has(t)&&!w.get(t).length));r?.forEach((e=>{setTimeout((()=>{h.add(t,e,new(v.state.MCs.get(e))(t)),t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),t.setAttribute("_mc")}),5)}))}))}let A=!1,C=null;function v(t=!0){return t?(A=t,C=new MutationObserver(E),setTimeout((()=>{C.observe(document.body,{childList:!0,subtree:!0}),E()}),5),A):(C?.disconnect(),C=null,A)}v.state={CEs:y,MCs:w};class O extends HTMLElement{constructor(){super()}connectedCallback(){h.trigger(this,"Connected")}disconnectedCallback(){h.trigger(this,"Disconnected")}adoptedCallback(){h.trigger(this,"Adopted")}attributeChangedCallback(t,e,n){h.trigger(this,"AttributeChanged",{name:t,oldValue:e,newValue:n})}}function M(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends O{instance;constructor(t){super();let n=new e(this,t);h.add(this,r,n)}static get observedAttributes(){return n}}))}function S(t){return customElements.get(t)}function j(t,e){return Math.floor(Math.random()*(e-t+1)+t)}M("test-greatgrandchild",class extends h{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+j(0,255)+","+j(0,255)+","+j(0,255)+")")}});const T=S("test-greatgrandchild");M("test-grandchild",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new T)}});const L=S("test-grandchild");M("test-child",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new L)}});const x=S("test-child");M("test-parent",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new x)}});const P=S("test-parent");M("test-grandparent",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new P)}});const N=S("test-grandparent");return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.grandparent=e():t.grandparent=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{GrandParent:()=>N});var n=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;n()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>r.add(t)));class o{#t;#e=!1;#n=!1;constructor(t,e={},n="l"){this.#t=t,this.data=e,this.bubble=n}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#n}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var s=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function a(t,e){let n=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const r=t?._mc;!e&&r?n=n.concat(Object.values(t._mc)):e&&r&&r[e]&&n.push(r[e])}})),n}function i(t,e,n=!0){let r=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&r.push(t._mc[e]):r=r.concat(Object.values(t._mc)),n))return r;t=t.parentNode}return r}function l(t){return t&&t instanceof HTMLElement}function u(t,e,n,r=!1,o=!1){let s={once:!1};r&&(s.capture=r),o&&(s.once=o),t.addEventListener(e,n,s)}function d(t,e,n={}){let r=t;if(!r._mc){let e=h?.debug;h.debug=!1,r._mc=new h(t),h.debug=e,delete r._mc._mc}const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),n}function m(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function p(t,e,n={},r="l"){let s=t?._mc;if(!s)return;let c=e instanceof o?new o(e.type,e.data,"l"):new o(e,n,"l"),a="string"!=typeof e?e:new o(e,n,r);[...Object.values(s)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(a.bubble)&&g(t,a)}function g(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let n=i(t,"",!0)?.[0].target;n&&h.trigger(n,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&h.trigger(t,e)}))}),0)}s()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>c.add(t)));class f{#r;constructor(t,e=!1){var n;this.#r=new WeakRef(t||{}),(n=this).constructor!==h&&setTimeout((()=>{n.trigger("Init")}),0),function(t){if(!s()||t.constructor===h)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((r=>{let o=/^one/.test(r),s=r.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();o&&Object.defineProperty(t,"on"+s,{configurable:!0,enumerable:!1,writable:!0,value:t=>{n.constructor.prototype[r].bind(n)(t)}}),c.has("on"+a)&&u(e,a,(t=>{n.trigger(s,t)}),!1,o)}))}}(this)}get target(){return this.#r.deref()}}class b extends f{_mc={};constructor(t){super(t)}static trigger=p;trigger(t,e={},n="l"){let r=this;if(r.constructor===b||r.constructor===h){let s=t instanceof o?new o(t.type,t.data,"l"):new o(t,e,"l"),c="string"!=typeof t?t:new o(t,e,n);return[...Object.getOwnPropertyNames(r)].forEach((t=>{r[t]?.trigger&&"function"==typeof r[t]?.trigger&&r[t]?.trigger(s)})),void(/[ud]/.test(c.bubble)&&g(r.target,c))}if(r instanceof b||r instanceof h){const r=this,s="string"!=typeof t?t:new o(t,e,n),c="on"+s.type[0].toUpperCase()+s.type.slice(1);if(s.bubble.indexOf("l")>-1&&(s.immediateStopped||"function"!=typeof r[c]||(r[c](s),r.hasOwnProperty(c)&&delete r[c])),s.stopped||"l"===s.bubble)return r;/[ud]/.test(s.bubble)&&g(r.target,s)}}}class h extends f{_mc={};constructor(t,e=!1){super(t)}static add=d;static remove=m;static trigger=p;trigger(t,e={},n){b.prototype.trigger.call(this,t,e,n)}parent(t=""){let e=this.target;return l(e)?i(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?i(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!l(e))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';e.setAttribute("temp_id",n);const o=a([...e.querySelectorAll(r)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return l(e)?a([...e.querySelectorAll("*[_mc]")],t):[]}}const y=new Map,w=new Map;function _(t){const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",t),n.setAttribute("loading",""),u(n,"load",(t=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),u(n,"error",(t=>{console.error("could not load Custom Element code from",e)})),n}function E(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!y.has(t.tagName.toLowerCase()))).forEach((t=>{const e=t.tagName.toLowerCase(),n=(e.split("-").join("/"),_(e));u(n,"load",(()=>{y.set(e,customElements.get(t.tagName.toLowerCase()))})),y.set(e,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("_mc")?.split(" ").filter((t=>!!t))||[],n=e.filter((t=>!w.has(t)));n?.forEach((t=>{const e=_(t);u(e,"load",(()=>{return e=document.head.querySelector(`script[name="${t}"]`),void setTimeout((function(){const t=e.getAttribute("src"),n=e.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const o=`\n\n\t\t\timport _ from "${t}";\n\t\t\timport { DC } from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${n}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;r.innerHTML=o,document.body.append(r)}),0);var e})),w.set(t,"loading"),document.head.append(e)}));const r=e.filter((t=>w.has(t)&&!w.get(t).length));r?.forEach((e=>{setTimeout((()=>{h.add(t,e,new(v.state.MCs.get(e))(t)),t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),t.setAttribute("_mc")}),5)}))}))}let A=!1,C=null;function v(t=!0){return t?(A=t,C=new MutationObserver(E),setTimeout((()=>{C.observe(document.body,{childList:!0,subtree:!0}),E()}),5),window.autoload=window.autoload||v,A):(C?.disconnect(),C=null,A)}v.state={CEs:y,MCs:w};class O extends HTMLElement{constructor(){super()}connectedCallback(){h.trigger(this,"Connected")}disconnectedCallback(){h.trigger(this,"Disconnected")}adoptedCallback(){h.trigger(this,"Adopted")}attributeChangedCallback(t,e,n){h.trigger(this,"AttributeChanged",{name:t,oldValue:e,newValue:n})}}function M(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends O{instance;constructor(t){super();let n=new e(this,t);h.add(this,r,n)}static get observedAttributes(){return n}}))}function S(t){return customElements.get(t)}function j(t,e){return Math.floor(Math.random()*(e-t+1)+t)}M("test-greatgrandchild",class extends h{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+j(0,255)+","+j(0,255)+","+j(0,255)+")")}});const T=S("test-greatgrandchild");M("test-grandchild",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new T)}});const L=S("test-grandchild");M("test-child",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new L)}});const x=S("test-child");M("test-parent",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new x)}});const P=S("test-parent");M("test-grandparent",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new P)}});const N=S("test-grandparent");return e})()));

package/public/test/test/testform.js

@@ -1 +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=f?.debug;f.debug=!1,r._mc=new f(e),f.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)&&d(e,s)}function d(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&&f.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&f.trigger(e,t)}))}),0)}r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>a.add(e)));class b{#r;constructor(e,t=!1){var n;this.#r=new WeakRef(e||{}),(n=this).constructor!==f&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!r()||e.constructor===f)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.#r.deref()}}class m extends b{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let a=this;if(a.constructor===m||a.constructor===f){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)&&d(a.target,o))}if(a instanceof m||a instanceof f){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)&&d(a.target,l)}}}class f extends b{_mc={};constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){m.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):[]}}const g=new Map,h=new Map;function y(e){const t="./"+e.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",t),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",e),n.setAttribute("loading",""),i(n,"load",(e=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),i(n,"error",(e=>{console.error("could not load Custom Element code from",t)})),n}function v(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!g.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),n=(t.split("-").join("/"),y(t));i(n,"load",(()=>{g.set(t,customElements.get(e.tagName.toLowerCase()))})),g.set(t,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],n=t.filter((e=>!h.has(e)));n?.forEach((e=>{const t=y(e);i(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),n=t.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const a=`\n\n\t\t\timport _ from "${e}";\n\t\t\timport {DC} from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${n}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;r.innerHTML=a,document.body.append(r)}),0);var t})),h.set(e,"loading"),document.head.append(t)}));const r=t.filter((e=>h.has(e)&&!h.get(e).length));r?.forEach((t=>{setTimeout((()=>{f.add(e,t,new(E.state.MCs.get(t))(e)),e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),e.setAttribute("_mc")}),5)}))}))}let w=!1,O=null;function E(e=!0){return e?(w=e,O=new MutationObserver(v),setTimeout((()=>{O.observe(document.body,{childList:!0,subtree:!0}),v()}),5),w):(O?.disconnect(),O=null,w)}function A(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var r;(r=e[n])&&r.constructor&&r.constructor===Object?t[n]=A(e[n]):t[n]=e[n]})),t}function x(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=x(e[t],!1);for(const e in r)n[t+"."+e]=r[e]}else n[t]=e[t]})),t?A(n):n}function _(e,t){return JSON.stringify(x(e))===JSON.stringify(x(t))}function k(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function S(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)}E.state={CEs:g,MCs:h};class j extends HTMLElement{constructor(){super()}connectedCallback(){f.trigger(this,"Connected")}disconnectedCallback(){f.trigger(this,"Disconnected")}adoptedCallback(){f.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){f.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function C(e){return null!=e&&"object"==typeof e}function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(n))).forEach((r=>{new Set(e.getAttribute(r)?.match(n)).forEach((e=>t.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 N=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class L extends f{data={};oldDisplay="";constructor(e){super(e);let t=this;T(e).forEach((e=>t.data[e]="")),M(t),t.#a(),delete t._mc}#a(){let e=this,t=e.target,n=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((n=>{let r=new Set(t.getAttribute(n)?.match(/\{[^\{\}]*\}/g));var a;e.data.observe((a=t.getAttribute(n),e=>{let l=a;r.forEach((t=>{l=l.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(n,l)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{n=!0;let a=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));var l;e.data.observe((l=r.nodeValue,n=>{let o=l;a.forEach((e=>{o=o.replace(e,n[e.replace(/[\{\}]/g,"")])})),Object.keys(n).some((e=>!!n[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),r.nodeValue=o})),e.oldDisplay=t.getAttribute("style)")||"",n&&!N.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,n={};Object.keys(e.data).forEach((r=>{t.data.hasOwnProperty(r)&&(n[r]=e.data[r])})),JSON.stringify(n)!==JSON.stringify(t.data)&&Object.assign(t.data,n)}}const M=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let n,r=e[t];if(!r.prototype)switch(typeof r){case"string":n=String;break;case"number":n=Number;break;case"boolean":n=Boolean;break;case"object":n=r instanceof Array?Array:Object;break;default:return}let a=class extends n{#l=!0;constructor(e){super(e),this.constructor.callbacks=[],C(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(C(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!T(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||f.add(e,"_placeholders",new L(e))}))}(e);const n=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),r=function(e){let t=x(e);n.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(r),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,n=C(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#l=e),t.constructor.callbacks.forEach((e=>{e(n)})),t}},l=new a(r);Object.defineProperty(e,t,{enumerable:!0,get(){if(C(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(k((function(){_(structuredClone(Object.assign({},l)),e)||l.notify()}),0),0)}return l},set(e){if(typeof e==typeof l.valueOf())if(C(l.valueOf())&&l.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},l));l instanceof a==0&&(l=new a(structuredClone(Object.assign({},e))),S(e,l),l.seal()),Object.assign(l,e),setTimeout(k((function(){_(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),n=l.constructor.callbacks;l=new a(e),l.constructor.callbacks=n,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),l,"- CANNOT BECOME:",typeof e)}}),e[t]=r})),e);class I{constructor(e){}}class H extends I{#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 P extends I{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.checked}set val(e){this.#o.checked=e}}class D extends I{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value}set val(e){this.#o.value=e}}class q extends I{#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 $ extends I{#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("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(r,class extends j{instance;constructor(e){super();let n=new t(this,e);f.add(this,r,n)}static get observedAttributes(){return n}}))}("test-testform",class extends f{data;constructor(e){super(e);const t=this;delete t._mc;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 H(e);break;case"checkbox":r=new P(e);break;default:r=new D(e)}break;case"select":r=new q(e);break;case"textarea":r=new $(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}r&&(f.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),M(e,t),S(r,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{i(n,"input",(n=>{e[t].notify()}))}))}(t,"data",n),t.data.bind(n)}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            '}}),{}})()));
+!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 o(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 l(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 o={once:!1};r&&(o.capture=r),a&&(o.once=a),e.addEventListener(t,n,o)}function c(e,t,n={}){let r=e;if(!r._mc){let t=f?.debug;f.debug=!1,r._mc=new f(e),f.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 o=e?._mc;if(!o)return;let l=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(o)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(l)})),/[ud]/.test(s.bubble)&&d(e,s)}function d(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=l(e,"",!0)?.[0].target;n&&f.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&f.trigger(e,t)}))}),0)}r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>a.add(e)));class m{#r;constructor(e,t=!1){var n;this.#r=new WeakRef(e||{}),(n=this).constructor!==f&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!r()||e.constructor===f)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 o=/^one/.test(r),l=r.replace(/^on[e]{0,1}/,""),s=l.toLowerCase();o&&Object.defineProperty(e,"on"+l,{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(l,e)}),!1,o)}))}}(this)}get target(){return this.#r.deref()}}class b extends m{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let a=this;if(a.constructor===b||a.constructor===f){let o=e instanceof n?new n(e.type,e.data,"l"):new n(e,t,"l"),l="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(o)})),void(/[ud]/.test(l.bubble)&&d(a.target,l))}if(a instanceof b||a instanceof f){const a=this,o="string"!=typeof e?e:new n(e,t,r),l="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof a[l]||(a[l](o),a.hasOwnProperty(l)&&delete a[l])),o.stopped||"l"===o.bubble)return a;/[ud]/.test(o.bubble)&&d(a.target,o)}}}class f extends m{_mc={};constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){b.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return s(t)?l(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return s(t)?l(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=o([...t.querySelectorAll(r)],e);return t.removeAttribute("temp_id"),a}descendants(e=""){let t=this?.target;return s(t)?o([...t.querySelectorAll("*[_mc]")],e):[]}}const g=new Map,h=new Map;function y(e){const t="./"+e.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",t),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",e),n.setAttribute("loading",""),i(n,"load",(e=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),i(n,"error",(e=>{console.error("could not load Custom Element code from",t)})),n}function v(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!g.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),n=(t.split("-").join("/"),y(t));i(n,"load",(()=>{g.set(t,customElements.get(e.tagName.toLowerCase()))})),g.set(t,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],n=t.filter((e=>!h.has(e)));n?.forEach((e=>{const t=y(e);i(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),n=t.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const a=`\n\n\t\t\timport _ from "${e}";\n\t\t\timport { DC } from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${n}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;r.innerHTML=a,document.body.append(r)}),0);var t})),h.set(e,"loading"),document.head.append(t)}));const r=t.filter((e=>h.has(e)&&!h.get(e).length));r?.forEach((t=>{setTimeout((()=>{f.add(e,t,new(E.state.MCs.get(t))(e)),e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),e.setAttribute("_mc")}),5)}))}))}let w=!1,O=null;function E(e=!0){return e?(w=e,O=new MutationObserver(v),setTimeout((()=>{O.observe(document.body,{childList:!0,subtree:!0}),v()}),5),window.autoload=window.autoload||E,w):(O?.disconnect(),O=null,w)}function A(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var r;(r=e[n])&&r.constructor&&r.constructor===Object?t[n]=A(e[n]):t[n]=e[n]})),t}function x(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=x(e[t],!1);for(const e in r)n[t+"."+e]=r[e]}else n[t]=e[t]})),t?A(n):n}function _(e,t){return JSON.stringify(x(e))===JSON.stringify(x(t))}function j(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function S(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)}E.state={CEs:g,MCs:h};class k extends HTMLElement{constructor(){super()}connectedCallback(){f.trigger(this,"Connected")}disconnectedCallback(){f.trigger(this,"Disconnected")}adoptedCallback(){f.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){f.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function C(e){return null!=e&&"object"==typeof e}function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(n))).forEach((r=>{new Set(e.getAttribute(r)?.match(n)).forEach((e=>t.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 N=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class L extends f{data={};oldDisplay="";constructor(e){super(e);let t=this;T(e).forEach((e=>t.data[e]="")),H(t),t.#a(),delete t._mc}#a(){let e=this,t=e.target,n=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((n=>{let r=new Set(t.getAttribute(n)?.match(/\{[^\{\}]*\}/g));var a;e.data.observe((a=t.getAttribute(n),e=>{let o=a;r.forEach((t=>{o=o.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(n,o)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{n=!0;let a=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));var o;e.data.observe((o=r.nodeValue,n=>{let l=o;a.forEach((e=>{l=l.replace(e,n[e.replace(/[\{\}]/g,"")])})),Object.keys(n).some((e=>!!n[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),r.nodeValue=l})),e.oldDisplay=t.getAttribute("style)")||"",n&&!N.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,n={};Object.keys(e.data).forEach((r=>{t.data.hasOwnProperty(r)&&(n[r]=e.data[r])})),JSON.stringify(n)!==JSON.stringify(t.data)&&Object.assign(t.data,n)}}const M={};function I(e){let t=e.constructor.name;return M[t]||function(e){const t=e.constructor,n=t.name;let r=class extends t{#o=!0;#l=[];constructor(e){super(e),this.constructor.callbacks=[],C(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.#l.push(e),this}bind(e){const t=this;if(C(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!T(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||f.add(e,"_placeholders",new L(e))}))}(e);const n=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),r=function(e){let t=x(e);n.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.#l.push(r),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,n=C(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#o=e),t.#l.forEach((e=>{e(n)})),t}};return M[n]=r,r}(e)}const H=(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(I(n))(n);Object.defineProperty(e,t,{enumerable:!0,get(){if(C(r.valueOf())){let e=structuredClone(Object.assign({},r));setTimeout(j((function(){_(structuredClone(Object.assign({},r)),e)||r.notify()}),0),0)}return r},set(e){if(typeof e==typeof r.valueOf())if(C(r.valueOf())&&r.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},r));void 0===r?.constructor?.prototype?.observe&&(r=new(I(e))(structuredClone(Object.assign({},e))),S(e,r),r.seal()),Object.assign(r,e),setTimeout(j((function(){_(structuredClone(Object.assign({},r)),t)||r.notify()}),0),0)}else{let t=r.valueOf(),n=r.constructor.callbacks;r=r=new(I(e))(e),r.constructor.callbacks=n,e!==t&&r.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof e)}}),e[t]=n}})),e);class P{constructor(e){}}class D extends P{#s;constructor(e){super(e),this.#s=e}get val(){return new FormData(this.#s.form).get(this.#s.name)}set val(e){[...this.#s.form.querySelectorAll(`input[type="radio"][name="${this.#s.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class q extends P{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.checked}set val(e){this.#s.checked=e}}class $ extends P{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value}set val(e){this.#s.value=e}}class R extends P{#s;#i=!1;constructor(e){super(e),this.#s=e,this.#i=e.multiple}get val(){const e=[];return[...this.#s.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#i?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#s.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class V extends P{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value||""}set val(e){this.#s.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("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(r,class extends k{instance;constructor(e){super();let n=new t(this,e);f.add(this,r,n)}static get observedAttributes(){return n}}))}("test-testform",class extends f{data;constructor(e){super(e);const t=this;delete t._mc;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 D(e);break;case"checkbox":r=new q(e);break;default:r=new $(e)}break;case"select":r=new R(e);break;case"textarea":r=new V(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}r&&(f.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),H(e,t),S(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/test/test/testform.js.map

@@ -1 +1 @@
-{"version":3,"file":"testform.js","sourceRoot":"","sources":["../../../src/test/test/testform.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAc,UAAU,EAAe,MAAM,4BAA4B,CAAC;AAE/F,QAAQ,CACP,eAAe,EAEf,MAAM,YAAa,SAAQ,EAAE;IAC5B,IAAI,CAAU;IAEd,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,MAAM,IAAI,GAAG,IAAI,CAAC;QAElB,OAAO,IAAI,CAAC,GAAG,CAAC;QAEhB,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;IACxC,CAAC;IAED,IAAI,QAAQ;QACX,OAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuEN,CAAC;IACZ,CAAC;IAED,IAAI,GAAG;QACN,OAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuCL,CAAC;IACZ,CAAC;CACD,CACD,CAAC"}
+{"version":3,"file":"testform.js","sourceRoot":"","sources":["../../../src/test/test/testform.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAc,UAAU,EAAe,MAAM,4BAA4B,CAAC;AAE/F,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,OAAO,IAAI,CAAC,GAAG,CAAC;QAEhB,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/test/test.d.ts.map

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

package/public/test/test.html

@@ -12,11 +12,12 @@
 		/>
 		<link href="style.css" rel="stylesheet" />
 		<link href="my-tag.css" rel="stylesheet" />
-		<link href="grandparent.css" rel="stylesheet" />
-		<script src="microcomponents.min.js"></script>
+		<link href="grandparent.css" rel="stylesheet" /> 
 		<script>
-			Object.assign(window, microcomponents); // make system global, for debugging
-			autoload(true); // automVatically load web components that are undefined
+			import("./microcomponents.js").then((m) => {
+				m.autoload(true); // automatically load web components that are undefined
+				Object.assign(window, m);
+			});
 		</script>
 		<script type="module" src="test.js"></script>
 	</head>

package/public/test/test.js

@@ -1,5 +1,4 @@
-'use strict';
-import { DC, defineCE, getCE, observe, } from './microcomponents.js';
+import { DC, defineCE, getCE, observe, } from '../microcomponents.js';
 class Translator extends DC {
     #translations = {};
     Language = 'en';
@@ -46,13 +45,13 @@ defineCE('my-tag', class MyTag extends DC {
         super(target);
         let that = this;
         target.innerHTML = this.#template;
+        that.Dom = { counter: 0 };
+        observe(that);
         DC.add(target, 'translator', new Translator(target, that.#languages, target));
         delete that._mc;
     }
     oneInit(ev) {
         let that = this;
-        that.Dom = { counter: 0 };
-        observe(that);
         that.Dom.bind(that.target);
     }
     onClick(ev) {
@@ -70,7 +69,7 @@ for (let x = 0; x < max; x++) {
 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);
+    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 * 2, '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');
@@ -78,5 +77,5 @@ setTimeout(() => {
     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');
-}, 500);
+}, 1000);
 //# sourceMappingURL=test.js.map

package/public/test/test.js.map

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