@twobirds/microcomponents 0.0.85 → 0.0.88

package/public/test/MC.ts

@@ -6,17 +6,6 @@ const isBrowser = new Function(
 	'try {return this===window;}catch(e){ return false;}'
 );
 
-// get HTMLElement native event names
-function getNativeEventNames( domNode: HTMLElement ): string[] {
-	let nativeEventNames: Array<string> = [];
-	if (isBrowser()) {
-		Object.keys(HTMLElement.prototype)
-			.filter((key) => /^on/.test(key))
-			.forEach((eventName) => nativeEventNames.push(eventName));
-	}
-	return nativeEventNames;
-}
-
 export interface HTMLMcElement extends HTMLElement {
 	_mc: LooseObject;
 }
@@ -90,12 +79,14 @@ function off( domNode: Node, eventName: string, handler: EventListenerOrEventLis
 	domNode.removeEventListener( getMcEventName(eventName), handler );
 }
 
-function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ) {
+function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ): EventListenerOrEventListenerObject {
 	domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
+	return handler;
 }
 
-function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ) {
+function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
 	on(domNode, eventName, handler, true );
+	return handler;
 }
 
 // create and dispatch custom event
@@ -168,18 +159,18 @@ function autoAttachListeners(element: MC | DC) {
 					withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
 					nativeEventName = withoutOnOne.toLowerCase();  // lowercase for native event names
 
-				let listener = (ev: Event | CustomEvent) => {
-					that[key]( ev );
-				}
-					
-				if ( !!( target as any )['on' + nativeEventName] ) {
-					// it is a native HTML event
-					//console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
-					target.addEventListener( nativeEventName, listener);
-				} else {
-					// it is a customEvent
-					//console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
-					on( target, withoutOnOne, listener, once );
+				if ( ('on' + nativeEventName) in target ) { // it is a native HTML event
+					let listener = (ev: Event) => {
+						that[key]( ev );
+					}
+					// console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
+					target.addEventListener( nativeEventName, listener );
+				} else { // it is a customEvent
+					// console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
+					let listener = (ev: CustomEvent) => {
+						that[key]( ev );
+					}
+					on( target, withoutOnOne, listener as EventListenerOrEventListenerObject, once );
 				}
 			});
 	}
@@ -236,11 +227,11 @@ class DC extends McBase {
 	}
 
 	on( eventName: string, handler: EventListenerOrEventListenerObject ) {
-		on( this.target, eventName, handler );
+		return on( this.target, eventName, handler );
 	}
 
 	one( eventName: string, handler: EventListenerOrEventListenerObject ) {
-		one( this.target, eventName, handler );
+		return one( this.target, eventName, handler );
 	}
 
 	trigger( eventName: string, data: any = {}, bubble: string = 'l') {
@@ -248,13 +239,6 @@ class DC extends McBase {
 	}
 
 	/* DOM traversal */
-	parent(): DC | null {
-		let 
-			target: HTMLElement = (this as DC).target;
-		if (!isDOM(target)) return null;
-		return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
-	}
-
 	ancestors(): DC[] | null {
 		let 
 			currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
@@ -271,6 +255,13 @@ class DC extends McBase {
 		return result.length ? result : null;
 	}
 
+	closest(): DC | null {
+		let 
+			target: HTMLElement = (this as DC).target;
+		if (!isDOM(target)) return null;
+		return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
+	}
+
 	children(): DC[] | null {
 		let target: any = (this as any)?.target;
 		if (!isDOM(target)) return null;

package/public/test/elements.min.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.elements=e():t.elements=e()}(this,(()=>(()=>{"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,{defineCE:()=>m,getCE:()=>f});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function o(t,e,n={}){let r=t;r._mc||(r._mc=new l(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function c(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function s(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function a(t,e,n,r=!1){t.addEventListener(s(e),n,{capture:!1,once:r})}class i{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==l&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===l)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((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase(),s=e=>{n[t](e)};e["on"+c]?e.addEventListener(c,s):a(e,o,s,r)}))}}(this)}get target(){return this._target.deref()}}class l extends i{constructor(t,e=!1){super(t)}static add=o;static remove=c;off(t,e){!function(t,e,n){t.removeEventListener(s(e),n)}(this.target,t,e)}on(t,e){a(this.target,t,e)}one(t,e){!function(t,e,n){a(t,e,n,!0)}(this.target,t,e)}trigger(t,e={},n="l"){!function(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(s(e),{detail:{data:n,bubble:r}}):e;r.length&&r.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(r)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}(this.target,t,e,n)}parent(){let t=this.target;return r(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!r(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class u extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function d(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}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("");d(e.prototype.constructor)&&e.prototype instanceof i?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends u{instance;constructor(t){super();const n=d(e)?new e(this,t):e;l.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function f(t){return customElements.get(t)}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.elements=e():t.elements=e()}(this,(()=>(()=>{"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,{defineCE:()=>m,getCE:()=>f});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function o(t,e,n={}){let r=t;r._mc||(r._mc=new l(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function c(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function s(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function i(t,e,n,r=!1){return t.addEventListener(s(e),n,{capture:!1,once:r}),n}class a{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==l&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===l)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((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase();if("on"+c in e){let r=e=>{n[t](e)};e.addEventListener(c,r)}else i(e,o,(e=>{n[t](e)}),r)}))}}(this)}get target(){return this._target.deref()}}class l extends a{constructor(t,e=!1){super(t)}static add=o;static remove=c;off(t,e){!function(t,e,n){t.removeEventListener(s(e),n)}(this.target,t,e)}on(t,e){return i(this.target,t,e)}one(t,e){return function(t,e,n){return i(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l"){!function(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(s(e),{detail:{data:n,bubble:r}}):e;r.length&&r.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(r)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}(this.target,t,e,n)}ancestors(){let t=this?.target,e=[];if(!r(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return r(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class u extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function d(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}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("");d(e.prototype.constructor)&&e.prototype instanceof a?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends u{instance;constructor(t){super();const n=d(e)?new e(this,t):e;l.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function f(t){return customElements.get(t)}return e})()));

package/public/test/formValues.min.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.formValues=e():t.formValues=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},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={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var a;(a=t[n])&&a.constructor&&a.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let a={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)a[e+"."+t]=r[t]}else a[e]=t[e]})),e?r(a):a}function a(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function s(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}function c(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}t.r(e),t.d(e,{formValues:()=>T});const o=new Function("try {return this===window;}catch(e){ return false;}");function l(t){return t&&t instanceof HTMLElement}function i(t,e,r={}){let n=t;n._mc||(n._mc=new m(t));const a=n._mc;return e.length&&!a[e]&&(a[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}function u(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function f(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function d(t,e,r,n=!1){t.addEventListener(f(e),r,{capture:!1,once:n})}function h(t,e,r={},n="l"){const a="string"==typeof e?new CustomEvent(f(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(a),/[u|d]/.test(n)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,a)}class b{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==m&&e.trigger("Init")}),0),function(t){if(!o()||t.constructor===m)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),a=t.replace(/^on[e]{0,1}/,""),s=a.toLowerCase(),c=e=>{r[t](e)};e["on"+s]?e.addEventListener(s,c):d(e,a,c,n)}))}}(this)}get target(){return this._target.deref()}}class m extends b{constructor(t,e=!1){super(t)}static add=i;static remove=u;off(t,e){!function(t,e,r){t.removeEventListener(f(e),r)}(this.target,t,e)}on(t,e){d(this.target,t,e)}one(t,e){!function(t,e,r){d(t,e,r,!0)}(this.target,t,e)}trigger(t,e={},r="l"){h(this.target,t,e,r)}parent(){let t=this.target;return l(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!l(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}children(){let t=this?.target;return l(t)?function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=[...t.querySelectorAll(r)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),n.length?n:null}(t):null}descendants(){const t=this?.target;if(!l(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function p(t){return null!=t&&"object"==typeof t}function g(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const y=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class v extends m{data={};oldDisplay="";constructor(t){super(t),g(t).forEach((t=>this.data[t]="")),w(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),a=>{let s=n;r.forEach((t=>{s=s.replace(t,a[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,s)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>a=>{let s=e;n.forEach((t=>{s=s.replace(t,a[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=s})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!y.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const O={};function E(t){let e=t.constructor.name;return O[e]||function(t){const e=t.constructor,r=e.name;let a=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],p(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(p(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!g(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||m.add(t,"_placeholders",new v(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&h(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=p(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#r.forEach((t=>{t(e)})),this}};return O[r]=a,a}(t)}const w=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(E(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(p(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(s((function(){a(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(p(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(E(t))(structuredClone(Object.assign({},t))),c(t,n),n.seal()),Object.assign(n,t),setTimeout(s((function(){a(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(E(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);class A{constructor(t){}}class j extends A{#n;constructor(t){super(t),this.#n=t}get val(){return new FormData(this.#n.form).get(this.#n.name)}set val(t){[...this.#n.form.querySelectorAll(`input[type="radio"][name="${this.#n.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class S extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.checked}set val(t){this.#n.checked=t}}class _ extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value}set val(t){this.#n.value=t}}class k extends A{#n;#a=!1;constructor(t){super(t),this.#n=t,this.#a=t.multiple}get val(){const t=[];return[...this.#n.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#a?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#n.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class x extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value||""}set val(t){this.#n.value=t}}const N=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],r={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let n=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":n=new j(t);break;case"checkbox":n=new S(t);break;default:n=new _(t)}break;case"select":n=new k(t);break;case"textarea":n=new x(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}n&&(m.add(t,e,n),Object.defineProperty(r,e,{enumerable:!0,configurable:!0,get:()=>n.val,set:t=>{n.val!==t&&(n.val=t)}}))}})),r};function T(t,e,r){let n=N(r);t[e]=Object.assign({},n),w(t,e),c(n,t[e]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{r.addEventListener("input",(r=>{t[e].notify()}))}))}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.formValues=e():t.formValues=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},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={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var s;(s=t[n])&&s.constructor&&s.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let s={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)s[e+"."+t]=r[t]}else s[e]=t[e]})),e?r(s):s}function s(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function a(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}function c(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}t.r(e),t.d(e,{formValues:()=>T});const o=new Function("try {return this===window;}catch(e){ return false;}");function l(t){return t&&t instanceof HTMLElement}function i(t,e,r={}){let n=t;n._mc||(n._mc=new m(t));const s=n._mc;return e.length&&!s[e]&&(s[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}function u(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function f(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function d(t,e,r,n=!1){return t.addEventListener(f(e),r,{capture:!1,once:n}),r}function h(t,e,r={},n="l"){const s="string"==typeof e?new CustomEvent(f(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(s),/[u|d]/.test(n)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,s)}class b{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==m&&e.trigger("Init")}),0),function(t){if(!o()||t.constructor===m)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),s=t.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();if("on"+a in e){let n=e=>{r[t](e)};e.addEventListener(a,n)}else d(e,s,(e=>{r[t](e)}),n)}))}}(this)}get target(){return this._target.deref()}}class m extends b{constructor(t,e=!1){super(t)}static add=i;static remove=u;off(t,e){!function(t,e,r){t.removeEventListener(f(e),r)}(this.target,t,e)}on(t,e){return d(this.target,t,e)}one(t,e){return function(t,e,r){return d(t,e,r,!0),r}(this.target,t,e)}trigger(t,e={},r="l"){h(this.target,t,e,r)}ancestors(){let t=this?.target,e=[];if(!l(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return l(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return l(t)?function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=[...t.querySelectorAll(r)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),n.length?n:null}(t):null}descendants(){const t=this?.target;if(!l(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function p(t){return null!=t&&"object"==typeof t}function g(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const y=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class v extends m{data={};oldDisplay="";constructor(t){super(t),g(t).forEach((t=>this.data[t]="")),w(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),s=>{let a=n;r.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,a)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>s=>{let a=e;n.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=a})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!y.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const O={};function E(t){let e=t.constructor.name;return O[e]||function(t){const e=t.constructor,r=e.name;let s=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],p(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(p(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!g(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||m.add(t,"_placeholders",new v(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&h(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=p(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#r.forEach((t=>{t(e)})),this}};return O[r]=s,s}(t)}const w=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(E(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(p(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(a((function(){s(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(p(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(E(t))(structuredClone(Object.assign({},t))),c(t,n),n.seal()),Object.assign(n,t),setTimeout(a((function(){s(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(E(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);class A{constructor(t){}}class j extends A{#n;constructor(t){super(t),this.#n=t}get val(){return new FormData(this.#n.form).get(this.#n.name)}set val(t){[...this.#n.form.querySelectorAll(`input[type="radio"][name="${this.#n.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class S extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.checked}set val(t){this.#n.checked=t}}class _ extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value}set val(t){this.#n.value=t}}class k extends A{#n;#s=!1;constructor(t){super(t),this.#n=t,this.#s=t.multiple}get val(){const t=[];return[...this.#n.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#s?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#n.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class x extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value||""}set val(t){this.#n.value=t}}const N=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],r={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let n=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":n=new j(t);break;case"checkbox":n=new S(t);break;default:n=new _(t)}break;case"select":n=new k(t);break;case"textarea":n=new x(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}n&&(m.add(t,e,n),Object.defineProperty(r,e,{enumerable:!0,configurable:!0,get:()=>n.val,set:t=>{n.val!==t&&(n.val=t)}}))}})),r};function T(t,e,r){let n=N(r);t[e]=Object.assign({},n),w(t,e),c(n,t[e]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{r.addEventListener("input",(r=>{t[e].notify()}))}))}return e})()));

package/public/test/microcomponents.min.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.microcomponents=e():t.microcomponents=e()}(this,(()=>(()=>{"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={};function n(t){return t&&t.constructor&&t.constructor===Object}function r(t){let e={};return[...Object.keys(t)].sort().forEach((o=>{n(t[o])?e[o]=r(t[o]):e[o]=t[o]})),e}function o(t,e=!0){let n={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=o(t[e],!1);for(const t in r)n[e+"."+t]=r[t]}else n[e]=t[e]})),e?r(n):n}function c(t,e){return JSON.stringify(o(t))===JSON.stringify(o(e))}function s(t,e={}){let n=t.constructor===String?t.split("."):t;if(e&&n[0]&&e[n[0]])return e[n[0]].constructor===Object&&n.length>1?s(n.splice(1),e[n[0]]):e[n[0]];console.warn("ns",n[0],"not in",e)}function a(t,e){var r=Array.from(arguments);if(r.length>2){for(;r.length>1;)r[0]=a(r[0],r[1]),r.splice(1,1);return r[0]}if("string"==typeof t)t.match(/\{[^\{\}]*\}/g)?.forEach((function(n){var r=s(n.substring(1,n.length-1),e);void 0!==r&&(t=t.replace(n,r))}));else if(n(t))switch(t.constructor){case Object:Object.keys(t).forEach((function(n){t.hasOwnProperty(n)&&(t[n]=a(t[n],e))}));break;case Array:t.forEach((function(n,r,o){o[r]=a(t[r],e)}))}return t}function i(t){return t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("")}function l(t,e){let n;return()=>{clearTimeout(n),n=setTimeout((function(){t(...arguments)}),e)}}function u(t){let e=document.createElement("template");return t=t.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,"<$1$2></$1>"),e.innerHTML=t,e.content.normalize(),Array.from(e.content.childNodes)}function d(t,e){const n=Object.getOwnPropertyDescriptors(t);for(const[t,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(e,t,r)}t.r(e),t.d(e,{DC:()=>A,MC:()=>w,McBase:()=>O,autoload:()=>T,copyGettersSetters:()=>d,debounce:()=>l,deepEqual:()=>c,defineCE:()=>M,flattenObject:()=>o,formValues:()=>W,getCE:()=>P,htmlToElements:()=>u,isNativeObject:()=>n,kebabToPascal:()=>i,nameSpace:()=>s,observe:()=>R,off:()=>g,on:()=>y,one:()=>v,parse:()=>a,sortObject:()=>r,trigger:()=>E});const f=new Function("try {return this===window;}catch(e){ return false;}");function m(t){return t&&t instanceof HTMLElement}function h(t,e,n={}){let r=t;r._mc||(r._mc=new A(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function p(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function b(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function g(t,e,n){t.removeEventListener(b(e),n)}function y(t,e,n,r=!1){t.addEventListener(b(e),n,{capture:!1,once:r})}function v(t,e,n){y(t,e,n,!0)}function E(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(b(e),{detail:{data:n,bubble:r}}):e;r.length&&r.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(r)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}class O{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==A&&e.trigger("Init")}),0),function(t){if(!f()||t.constructor===A)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((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase(),s=e=>{n[t](e)};e["on"+c]?e.addEventListener(c,s):y(e,o,s,r)}))}}(this)}get target(){return this._target.deref()}}class w extends O{constructor(t){super(t)}}class A extends O{constructor(t,e=!1){super(t)}static add=h;static remove=p;off(t,e){g(this.target,t,e)}on(t,e){y(this.target,t,e)}one(t,e){v(this.target,t,e)}trigger(t,e={},n="l"){E(this.target,t,e,n)}parent(){let t=this.target;return m(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!m(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}children(){let t=this?.target;return m(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!m(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}const j=new Set;function C(t){return()=>{const e=Array.from(document.querySelectorAll(`[data-mc*="${t}"]`)).filter((t=>t instanceof HTMLElement));if(0===e.length)return;const n=customElements.get(t);e.forEach((e=>{A.add(e,n.name,new n(e));const r=e.getAttribute("data-mc").split(" ").filter((e=>e!==t&&""!==e)).join(" ").trim();e.setAttribute("data-mc",r)}))}}function S(t){if(j.has(t))return;j.add(t);const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("data-name",t),n.setAttribute("loading",""),customElements.whenDefined(t).then(C(t)),n.addEventListener("load",(e=>{j.delete(t),document.head.querySelector(`script[data-name="${t}"]`)?.remove()})),n.addEventListener("error",(t=>{console.error("could not load DC code from",e)})),document.head.append(n)}function k(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!j.has(t.tagName.toLowerCase()))).forEach((t=>{S(t.tagName.toLowerCase())})),[...document.querySelectorAll('[data-mc]:not([data-mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("data-mc")?.split(" ").filter((t=>""!==t));e?.forEach((t=>{const e=customElements.get(t);j.has(t)||e?e&&C(t)():S(t)}))}))}let _=!1,N=null;function T(t=!0){return t?(_=t,N=new MutationObserver(k),setTimeout((()=>{N.observe(document.body,{childList:!0,subtree:!0}),k()}),5),window.autoload=window.autoload||T,_):(N?.disconnect(),N=null,_)}T.state=j;class x extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function L(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}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=i(t);L(e.prototype.constructor)&&e.prototype instanceof O?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends x{instance;constructor(t){super();const n=L(e)?new e(this,t):e;A.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function P(t){return customElements.get(t)}function D(t){return null!=t&&"object"==typeof t}function q(t){let e=new Set,n=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(n))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(n));r.forEach((t=>r.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(n))).forEach((t=>{(t.nodeValue||"").match(n).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}const H=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class V extends A{data={};oldDisplay="";constructor(t){super(t),q(t).forEach((t=>this.data[t]="")),R(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var r;this.data.observe((r=t.getAttribute(e),o=>{let c=r;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{e=!0;let r=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>o=>{let c=e;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=c})(n.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!H.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(e[n]=t.detail.data[n])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const I={};function $(t){let e=t.constructor.name;return I[e]||function(t){const e=t.constructor,n=e.name;let r=class extends e{#e=!0;#n=[];constructor(t){super(t),this.constructor.callbacks=[],D(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#n}set callbacks(t){this.#n=t}observe(t){return this.#n.push(t),this}bind(t){if(D(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!q(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||A.add(t,"_placeholders",new V(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),n=function(t){let n=o(t);e.forEach((t=>{t&&E(t,"data",n)}))};this.#n.push(n),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=D(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#n.forEach((t=>{t(e)})),this}};return I[n]=r,r}(t)}const R=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let n=t[e],r=new($(n))(n);Object.defineProperty(t,e,{enumerable:!0,get(){if(D(r.valueOf())){let t=structuredClone(Object.assign({},r));setTimeout(l((function(){c(structuredClone(Object.assign({},r)),t)||r.notify()}),0),0)}return r},set(t){if(typeof t==typeof r.valueOf())if(D(r.valueOf())&&r.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},r));void 0===r?.constructor?.prototype?.observe&&(r=new($(t))(structuredClone(Object.assign({},t))),d(t,r),r.seal()),Object.assign(r,t),setTimeout(l((function(){c(structuredClone(Object.assign({},r)),e)||r.notify()}),0),0)}else{let e=r.valueOf(),n=r.callbacks;t!==e&&(r=new($(t))(t),r.callbacks=n,r.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof t)}}),t[e]=n}})),t);class F{constructor(t){}}class G extends F{#r;constructor(t){super(t),this.#r=t}get val(){return new FormData(this.#r.form).get(this.#r.name)}set val(t){[...this.#r.form.querySelectorAll(`input[type="radio"][name="${this.#r.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class J extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.checked}set val(t){this.#r.checked=t}}class Z extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value}set val(t){this.#r.value=t}}class z extends F{#r;#o=!1;constructor(t){super(t),this.#r=t,this.#o=t.multiple}get val(){const t=[];return[...this.#r.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#o?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#r.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class B extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value||""}set val(t){this.#r.value=t}}const U=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],n={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let r=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":r=new G(t);break;case"checkbox":r=new J(t);break;default:r=new Z(t)}break;case"select":r=new z(t);break;case"textarea":r=new B(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}r&&(A.add(t,e,r),Object.defineProperty(n,e,{enumerable:!0,configurable:!0,get:()=>r.val,set:t=>{r.val!==t&&(r.val=t)}}))}})),n};function W(t,e,n){let r=U(n);t[e]=Object.assign({},r),R(t,e),d(r,t[e]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{t[e].notify()}))}))}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.microcomponents=e():t.microcomponents=e()}(this,(()=>(()=>{"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={};function n(t){return t&&t.constructor&&t.constructor===Object}function r(t){let e={};return[...Object.keys(t)].sort().forEach((o=>{n(t[o])?e[o]=r(t[o]):e[o]=t[o]})),e}function o(t,e=!0){let n={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=o(t[e],!1);for(const t in r)n[e+"."+t]=r[t]}else n[e]=t[e]})),e?r(n):n}function c(t,e){return JSON.stringify(o(t))===JSON.stringify(o(e))}function s(t,e={}){let n=t.constructor===String?t.split("."):t;if(e&&n[0]&&e[n[0]])return e[n[0]].constructor===Object&&n.length>1?s(n.splice(1),e[n[0]]):e[n[0]];console.warn("ns",n[0],"not in",e)}function a(t,e){var r=Array.from(arguments);if(r.length>2){for(;r.length>1;)r[0]=a(r[0],r[1]),r.splice(1,1);return r[0]}if("string"==typeof t)t.match(/\{[^\{\}]*\}/g)?.forEach((function(n){var r=s(n.substring(1,n.length-1),e);void 0!==r&&(t=t.replace(n,r))}));else if(n(t))switch(t.constructor){case Object:Object.keys(t).forEach((function(n){t.hasOwnProperty(n)&&(t[n]=a(t[n],e))}));break;case Array:t.forEach((function(n,r,o){o[r]=a(t[r],e)}))}return t}function i(t){return t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("")}function l(t,e){let n;return()=>{clearTimeout(n),n=setTimeout((function(){t(...arguments)}),e)}}function u(t){let e=document.createElement("template");return t=t.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,"<$1$2></$1>"),e.innerHTML=t,e.content.normalize(),Array.from(e.content.childNodes)}function d(t,e){const n=Object.getOwnPropertyDescriptors(t);for(const[t,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(e,t,r)}t.r(e),t.d(e,{DC:()=>A,MC:()=>w,McBase:()=>O,autoload:()=>T,copyGettersSetters:()=>d,debounce:()=>l,deepEqual:()=>c,defineCE:()=>M,flattenObject:()=>o,formValues:()=>W,getCE:()=>P,htmlToElements:()=>u,isNativeObject:()=>n,kebabToPascal:()=>i,nameSpace:()=>s,observe:()=>R,off:()=>g,on:()=>y,one:()=>v,parse:()=>a,sortObject:()=>r,trigger:()=>E});const f=new Function("try {return this===window;}catch(e){ return false;}");function m(t){return t&&t instanceof HTMLElement}function h(t,e,n={}){let r=t;r._mc||(r._mc=new A(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function p(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function b(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function g(t,e,n){t.removeEventListener(b(e),n)}function y(t,e,n,r=!1){return t.addEventListener(b(e),n,{capture:!1,once:r}),n}function v(t,e,n){return y(t,e,n,!0),n}function E(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(b(e),{detail:{data:n,bubble:r}}):e;r.length&&r.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(r)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}class O{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==A&&e.trigger("Init")}),0),function(t){if(!f()||t.constructor===A)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((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase();if("on"+c in e){let r=e=>{n[t](e)};e.addEventListener(c,r)}else y(e,o,(e=>{n[t](e)}),r)}))}}(this)}get target(){return this._target.deref()}}class w extends O{constructor(t){super(t)}}class A extends O{constructor(t,e=!1){super(t)}static add=h;static remove=p;off(t,e){g(this.target,t,e)}on(t,e){return y(this.target,t,e)}one(t,e){return v(this.target,t,e)}trigger(t,e={},n="l"){E(this.target,t,e,n)}ancestors(){let t=this?.target,e=[];if(!m(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return m(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return m(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!m(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}const j=new Set;function C(t){return()=>{const e=Array.from(document.querySelectorAll(`[data-mc*="${t}"]`)).filter((t=>t instanceof HTMLElement));if(0===e.length)return;const n=customElements.get(t);e.forEach((e=>{A.add(e,n.name,new n(e));const r=e.getAttribute("data-mc").split(" ").filter((e=>e!==t&&""!==e)).join(" ").trim();e.setAttribute("data-mc",r)}))}}function S(t){if(j.has(t))return;j.add(t);const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("data-name",t),n.setAttribute("loading",""),customElements.whenDefined(t).then(C(t)),n.addEventListener("load",(e=>{j.delete(t),document.head.querySelector(`script[data-name="${t}"]`)?.remove()})),n.addEventListener("error",(t=>{console.error("could not load DC code from",e)})),document.head.append(n)}function k(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!j.has(t.tagName.toLowerCase()))).forEach((t=>{S(t.tagName.toLowerCase())})),[...document.querySelectorAll('[data-mc]:not([data-mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("data-mc")?.split(" ").filter((t=>""!==t));e?.forEach((t=>{const e=customElements.get(t);j.has(t)||e?e&&C(t)():S(t)}))}))}let _=!1,N=null;function T(t=!0){return t?(_=t,N=new MutationObserver(k),setTimeout((()=>{N.observe(document.body,{childList:!0,subtree:!0}),k()}),5),window.autoload=window.autoload||T,_):(N?.disconnect(),N=null,_)}T.state=j;class x extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function L(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}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=i(t);L(e.prototype.constructor)&&e.prototype instanceof O?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends x{instance;constructor(t){super();const n=L(e)?new e(this,t):e;A.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function P(t){return customElements.get(t)}function D(t){return null!=t&&"object"==typeof t}function q(t){let e=new Set,n=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(n))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(n));r.forEach((t=>r.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(n))).forEach((t=>{(t.nodeValue||"").match(n).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}const H=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class V extends A{data={};oldDisplay="";constructor(t){super(t),q(t).forEach((t=>this.data[t]="")),R(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var r;this.data.observe((r=t.getAttribute(e),o=>{let c=r;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{e=!0;let r=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>o=>{let c=e;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=c})(n.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!H.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(e[n]=t.detail.data[n])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const I={};function $(t){let e=t.constructor.name;return I[e]||function(t){const e=t.constructor,n=e.name;let r=class extends e{#e=!0;#n=[];constructor(t){super(t),this.constructor.callbacks=[],D(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#n}set callbacks(t){this.#n=t}observe(t){return this.#n.push(t),this}bind(t){if(D(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!q(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||A.add(t,"_placeholders",new V(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),n=function(t){let n=o(t);e.forEach((t=>{t&&E(t,"data",n)}))};this.#n.push(n),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=D(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#n.forEach((t=>{t(e)})),this}};return I[n]=r,r}(t)}const R=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let n=t[e],r=new($(n))(n);Object.defineProperty(t,e,{enumerable:!0,get(){if(D(r.valueOf())){let t=structuredClone(Object.assign({},r));setTimeout(l((function(){c(structuredClone(Object.assign({},r)),t)||r.notify()}),0),0)}return r},set(t){if(typeof t==typeof r.valueOf())if(D(r.valueOf())&&r.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},r));void 0===r?.constructor?.prototype?.observe&&(r=new($(t))(structuredClone(Object.assign({},t))),d(t,r),r.seal()),Object.assign(r,t),setTimeout(l((function(){c(structuredClone(Object.assign({},r)),e)||r.notify()}),0),0)}else{let e=r.valueOf(),n=r.callbacks;t!==e&&(r=new($(t))(t),r.callbacks=n,r.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof t)}}),t[e]=n}})),t);class F{constructor(t){}}class G extends F{#r;constructor(t){super(t),this.#r=t}get val(){return new FormData(this.#r.form).get(this.#r.name)}set val(t){[...this.#r.form.querySelectorAll(`input[type="radio"][name="${this.#r.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class J extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.checked}set val(t){this.#r.checked=t}}class Z extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value}set val(t){this.#r.value=t}}class z extends F{#r;#o=!1;constructor(t){super(t),this.#r=t,this.#o=t.multiple}get val(){const t=[];return[...this.#r.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#o?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#r.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class B extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value||""}set val(t){this.#r.value=t}}const U=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],n={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let r=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":r=new G(t);break;case"checkbox":r=new J(t);break;default:r=new Z(t)}break;case"select":r=new z(t);break;case"textarea":r=new B(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}r&&(A.add(t,e,r),Object.defineProperty(n,e,{enumerable:!0,configurable:!0,get:()=>r.val,set:t=>{r.val!==t&&(r.val=t)}}))}})),n};function W(t,e,n){let r=U(n);t[e]=Object.assign({},r),R(t,e),d(r,t[e]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{t[e].notify()}))}))}return e})()));

package/public/test/{my-tag.css → myButton.css}

@@ -1,4 +1,4 @@
-my-tag > button {
+button.myButton {
 	border: 2px solid gray;
 	margin: 3px;
 	padding: 2px 5px;
@@ -6,14 +6,14 @@ my-tag > button {
 	width: 8em;
 }
 
-my-tag.clicked > button {
+button.myButton.clicked {
 	border-color: blue;
 }
 
-my-tag.overClicked > button {
+button.myButton.overClicked {
 	border-color: orange;
 }
 
-my-tag > button:hover {
+button.myButton:hover {
 	border-color: red;
 }

package/public/test/observables.min.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.observables=e():t.observables=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},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={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>E});const a=new Function("try {return this===window;}catch(e){ return false;}");function s(t){return t&&t instanceof HTMLElement}function i(t,e,r={}){let n=t;n._mc||(n._mc=new b(t));const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}function l(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function u(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function f(t,e,r,n=!1){t.addEventListener(u(e),r,{capture:!1,once:n})}function d(t,e,r={},n="l"){const o="string"==typeof e?new CustomEvent(u(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(n)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}class h{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==b&&e.trigger("Init")}),0),function(t){if(!a()||t.constructor===b)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase(),a=e=>{r[t](e)};e["on"+c]?e.addEventListener(c,a):f(e,o,a,n)}))}}(this)}get target(){return this._target.deref()}}class b extends h{constructor(t,e=!1){super(t)}static add=i;static remove=l;off(t,e){!function(t,e,r){t.removeEventListener(u(e),r)}(this.target,t,e)}on(t,e){f(this.target,t,e)}one(t,e){!function(t,e,r){f(t,e,r,!0)}(this.target,t,e)}trigger(t,e={},r="l"){d(this.target,t,e,r)}parent(){let t=this.target;return s(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!s(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}children(){let t=this?.target;return s(t)?function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=[...t.querySelectorAll(r)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),n.length?n:null}(t):null}descendants(){const t=this?.target;if(!s(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function m(t){return null!=t&&"object"==typeof t}function p(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const g=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class y extends b{data={};oldDisplay="";constructor(t){super(t),p(t).forEach((t=>this.data[t]="")),E(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),o=>{let c=n;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>o=>{let c=e;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=c})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!g.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const O={};function v(t){let e=t.constructor.name;return O[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],m(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(m(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!p(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||b.add(t,"_placeholders",new y(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&d(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=m(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#r.forEach((t=>{t(e)})),this}};return O[r]=o,o}(t)}const E=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(v(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(m(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(m(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(v(t))(structuredClone(Object.assign({},t))),function(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}(t,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(v(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);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.observables=e():t.observables=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},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={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>E});const a=new Function("try {return this===window;}catch(e){ return false;}");function s(t){return t&&t instanceof HTMLElement}function i(t,e,r={}){let n=t;n._mc||(n._mc=new b(t));const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}function l(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function u(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function f(t,e,r,n=!1){return t.addEventListener(u(e),r,{capture:!1,once:n}),r}function d(t,e,r={},n="l"){const o="string"==typeof e?new CustomEvent(u(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(n)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}class h{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==b&&e.trigger("Init")}),0),function(t){if(!a()||t.constructor===b)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase();if("on"+c in e){let n=e=>{r[t](e)};e.addEventListener(c,n)}else f(e,o,(e=>{r[t](e)}),n)}))}}(this)}get target(){return this._target.deref()}}class b extends h{constructor(t,e=!1){super(t)}static add=i;static remove=l;off(t,e){!function(t,e,r){t.removeEventListener(u(e),r)}(this.target,t,e)}on(t,e){return f(this.target,t,e)}one(t,e){return function(t,e,r){return f(t,e,r,!0),r}(this.target,t,e)}trigger(t,e={},r="l"){d(this.target,t,e,r)}ancestors(){let t=this?.target,e=[];if(!s(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return s(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return s(t)?function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=[...t.querySelectorAll(r)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),n.length?n:null}(t):null}descendants(){const t=this?.target;if(!s(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function m(t){return null!=t&&"object"==typeof t}function p(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const g=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class y extends b{data={};oldDisplay="";constructor(t){super(t),p(t).forEach((t=>this.data[t]="")),E(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),o=>{let c=n;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>o=>{let c=e;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=c})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!g.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const O={};function v(t){let e=t.constructor.name;return O[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],m(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(m(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!p(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||b.add(t,"_placeholders",new y(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&d(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=m(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#r.forEach((t=>{t(e)})),this}};return O[r]=o,o}(t)}const E=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(v(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(m(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(m(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(v(t))(structuredClone(Object.assign({},t))),function(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}(t,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(v(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);return e})()));

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:()=>y});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function o(t,e,n={}){let r=t;r._mc||(r._mc=new l(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function s(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function c(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function a(t,e,n,r=!1){t.addEventListener(c(e),n,{capture:!1,once:r})}class i{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==l&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===l)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((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),s=o.toLowerCase(),c=e=>{n[t](e)};e["on"+s]?e.addEventListener(s,c):a(e,o,c,r)}))}}(this)}get target(){return this._target.deref()}}class l extends i{constructor(t,e=!1){super(t)}static add=o;static remove=s;off(t,e){!function(t,e,n){t.removeEventListener(c(e),n)}(this.target,t,e)}on(t,e){a(this.target,t,e)}one(t,e){!function(t,e,n){a(t,e,n,!0)}(this.target,t,e)}trigger(t,e={},n="l"){!function(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(c(e),{detail:{data:n,bubble:r}}):e;r.length&&r.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(r)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}(this.target,t,e,n)}parent(){let t=this.target;return r(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!r(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class d extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function u(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}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("");u(e.prototype.constructor)&&e.prototype instanceof i?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends d{instance;constructor(t){super();const n=u(e)?new e(this,t):e;l.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function p(t){return customElements.get(t)}function f(t,e){return Math.floor(Math.random()*(e-t+1)+t)}m("test-greatgrandchild",class extends l{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+f(0,255)+","+f(0,255)+","+f(0,255)+")")}});const h=p("test-greatgrandchild");m("test-grandchild",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new h)}});const g=p("test-grandchild");m("test-child",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new g)}});const b=p("test-child");m("test-parent",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new b)}});const v=p("test-parent");m("test-grandparent",class extends l{constructor(t){super(t)}onConnected(t){for(let t=0;t<5;t++)this.target.append(new v)}onDisconnected(t){}onAdopted(t){}onAttributeChanged(t){}});const y=p("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:()=>y});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function o(t,e,n={}){let r=t;r._mc||(r._mc=new l(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function s(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function c(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function a(t,e,n,r=!1){return t.addEventListener(c(e),n,{capture:!1,once:r}),n}class i{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==l&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===l)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((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),s=o.toLowerCase();if("on"+s in e){let r=e=>{n[t](e)};e.addEventListener(s,r)}else a(e,o,(e=>{n[t](e)}),r)}))}}(this)}get target(){return this._target.deref()}}class l extends i{constructor(t,e=!1){super(t)}static add=o;static remove=s;off(t,e){!function(t,e,n){t.removeEventListener(c(e),n)}(this.target,t,e)}on(t,e){return a(this.target,t,e)}one(t,e){return function(t,e,n){return a(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l"){!function(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(c(e),{detail:{data:n,bubble:r}}):e;r.length&&r.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(r)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}(this.target,t,e,n)}ancestors(){let t=this?.target,e=[];if(!r(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return r(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class d extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function u(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}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("");u(e.prototype.constructor)&&e.prototype instanceof i?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends d{instance;constructor(t){super();const n=u(e)?new e(this,t):e;l.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function p(t){return customElements.get(t)}function f(t,e){return Math.floor(Math.random()*(e-t+1)+t)}m("test-greatgrandchild",class extends l{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+f(0,255)+","+f(0,255)+","+f(0,255)+")")}});const h=p("test-greatgrandchild");m("test-grandchild",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new h)}});const g=p("test-grandchild");m("test-child",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new g)}});const b=p("test-child");m("test-parent",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new b)}});const v=p("test-parent");m("test-grandparent",class extends l{constructor(t){super(t)}onConnected(t){for(let t=0;t<5;t++)this.target.append(new v)}onDisconnected(t){}onAdopted(t){}onAttributeChanged(t){}});const y=p("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";const e=new Function("try {return this===window;}catch(e){ return false;}");function t(e){return e&&e instanceof HTMLElement}function n(e,t,n={}){let a=e;a._mc||(a._mc=new i(e));const l=a._mc;return t.length&&!l[t]&&(l[t]=n,e instanceof HTMLElement&&!e.getAttribute("data-mc")&&e.setAttribute("data-mc","")),a}function a(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("data-mc")&&e.removeAttribute("data-mc")}function l(e){return"_mc"+e[0].toUpperCase()+e.substring(1)}function r(e,t,n,a=!1){e.addEventListener(l(t),n,{capture:!1,once:a})}function s(e,t,n={},a="l"){const r="string"==typeof t?new CustomEvent(l(t),{detail:{data:n,bubble:a}}):t;a.length&&a.indexOf("l")>-1&&e.dispatchEvent(r),/[u|d]/.test(a)&&function(e,t){setTimeout((()=>{-1===t.detail.bubble.indexOf("l")&&(t.detail.bubble+="l"),t.detail.bubble.indexOf("u")>-1&&e.closest("[data-mc]")?.dispatchEvent(t),t.detail.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&e._mc.trigger(e,t)}))}),0)}(e,r)}class o{_target;constructor(t){var n;this._target=new WeakRef(t||{}),n=this,setTimeout((()=>{n.constructor!==i&&n.trigger("Init")}),0),function(t){if(!e()||t.constructor===i)return;const n=t.target;if(n instanceof HTMLElement){let e=t;Object.getOwnPropertyNames(e.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof e.constructor.prototype[t])).forEach((t=>{let a=/^one/.test(t),l=t.replace(/^on[e]{0,1}/,""),s=l.toLowerCase(),o=n=>{e[t](n)};n["on"+s]?n.addEventListener(s,o):r(n,l,o,a)}))}}(this)}get target(){return this._target.deref()}}class i extends o{constructor(e,t=!1){super(e)}static add=n;static remove=a;off(e,t){!function(e,t,n){e.removeEventListener(l(t),n)}(this.target,e,t)}on(e,t){r(this.target,e,t)}one(e,t){!function(e,t,n){r(e,t,n,!0)}(this.target,e,t)}trigger(e,t={},n="l"){s(this.target,e,t,n)}parent(){let e=this.target;return t(e)&&e.closest("[data-mc]")?._mc||null}ancestors(){let e=this?.target,n=[];if(!t(e))return[];for(;e=e.closest("[data-mc]");)e?._mc&&n.push(e?._mc);return n.length?n:null}children(){let e=this?.target;return t(e)?function(e){const t=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+t+'"] [data-mc] [data-mc])';e.setAttribute("temp_id",t);const a=[...e.querySelectorAll(n)].filter((e=>!!e._mc)).map((e=>e._mc));return e.removeAttribute("temp_id"),a.length?a:null}(e):null}descendants(){const e=this?.target;if(!t(e))return[];const n=[...e.querySelectorAll("[data-mc]")].filter((e=>!!e._mc)).map((e=>e._mc));return n.length?n:null}}function c(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var a;(a=e[n])&&a.constructor&&a.constructor===Object?t[n]=c(e[n]):t[n]=e[n]})),t}function u(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const a=u(e[t],!1);for(const e in a)n[t+"."+e]=a[e]}else n[t]=e[t]})),t?c(n):n}function p(e,t){return JSON.stringify(u(e))===JSON.stringify(u(t))}function d(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function b(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,a]of Object.entries(n))("get"in a||"set"in a)&&Object.defineProperty(t,e,a)}new Set;class m extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function f(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}function h(e){return null!=e&&"object"==typeof e}function g(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(n))).forEach((t=>{let a=new Set(e.getAttribute(t)?.match(n));a.forEach((e=>a.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 y=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class v extends i{data={};oldDisplay="";constructor(e){super(e),g(e).forEach((e=>this.data[e]="")),w(this),this.#e()}#e(){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 a;this.data.observe((a=e.getAttribute(t),l=>{let r=a;n.forEach((e=>{r=r.replace(e,l[e.replace(/[\{\}]/g,"")])})),e.setAttribute(t,r)}))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{t=!0;let a=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((t=>l=>{let r=t;a.forEach((e=>{r=r.replace(e,l[e.replace(/[\{\}]/g,"")])})),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=r})(n.nodeValue)),this.oldDisplay=e.getAttribute("style")||"",t&&!y.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(e){let t={};Object.keys(e.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])})),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}}const O={};function E(e){let t=e.constructor.name;return O[t]||function(e){const t=e.constructor,n=t.name;let a=class extends t{#t=!0;#n=[];constructor(e){super(e),this.constructor.callbacks=[],h(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}get callbacks(){return this.#n}set callbacks(e){this.#n=e}observe(e){return this.#n.push(e),this}bind(e){if(h(this.valueOf())){!function(e){var t;(t=e,[t].concat([...t.querySelectorAll("*")]).filter((e=>!!g(e).length)).filter((e=>"STYLE"!==e?.tagName)).reverse()).forEach((e=>{e?._mc?._placeholders||i.add(e,"_placeholders",new v(e))}))}(e);const t=[e,...e.querySelectorAll("[data-mc]")].filter((e=>!!e?._mc?._placeholders)),n=function(e){let n=u(e);t.forEach((e=>{e&&s(e,"data",n)}))};this.#n.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=h(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==e&&(this.#t=e),this.#n.forEach((e=>{e(t)})),this}};return O[n]=a,a}(e)}const w=(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],a=new(E(n))(n);Object.defineProperty(e,t,{enumerable:!0,get(){if(h(a.valueOf())){let e=structuredClone(Object.assign({},a));setTimeout(d((function(){p(structuredClone(Object.assign({},a)),e)||a.notify()}),0),0)}return a},set(e){if(typeof e==typeof a.valueOf())if(h(a.valueOf())&&a.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},a));void 0===a?.constructor?.prototype?.observe&&(a=new(E(e))(structuredClone(Object.assign({},e))),b(e,a),a.seal()),Object.assign(a,e),setTimeout(d((function(){p(structuredClone(Object.assign({},a)),t)||a.notify()}),0),0)}else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(E(e))(e),a.callbacks=n,a.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof a.valueOf(),a,"- CANNOT BECOME:",typeof e)}}),e[t]=n}})),e);class x{constructor(e){}}class k extends x{#a;constructor(e){super(e),this.#a=e}get val(){return new FormData(this.#a.form).get(this.#a.name)}set val(e){[...this.#a.form.querySelectorAll(`input[type="radio"][name="${this.#a.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class A extends x{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.checked}set val(e){this.#a.checked=e}}class C extends x{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value}set val(e){this.#a.value=e}}class S extends x{#a;#l=!1;constructor(e){super(e),this.#a=e,this.#l=e.multiple}get val(){const e=[];return[...this.#a.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#l?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#a.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class j extends x{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value||""}set val(e){this.#a.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 a=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");f(t.prototype.constructor)&&t.prototype instanceof o?customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends m{instance;constructor(e){super();const n=f(t)?new t(this,e):t;i.add(this,a,n)}static get observedAttributes(){return n}})):customElements.define(e,t)}("test-testform",class extends i{data;constructor(e){super(e);let t=this.target.attachShadow({mode:"open"});t.innerHTML=`<style>${this.css}</style>${this.template}`,function(e,t,n){let a=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let a=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":a=new k(e);break;case"checkbox":a=new A(e);break;default:a=new C(e)}break;case"select":a=new S(e);break;case"textarea":a=new j(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}a&&(i.add(e,t,a),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>a.val,set:e=>{a.val!==e&&(a.val=e)}}))}})),n})(n);e[t]=Object.assign({},a),w(e,t),b(a,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{e[t].notify()}))}))}(this,"data",t),this.data.bind(t),fetch("./testform.json").then((e=>e.json())).then((e=>{this.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            '}}),{}})()));
+!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";const e=new Function("try {return this===window;}catch(e){ return false;}");function t(e){return e&&e instanceof HTMLElement}function n(e,t,n={}){let a=e;a._mc||(a._mc=new i(e));const l=a._mc;return t.length&&!l[t]&&(l[t]=n,e instanceof HTMLElement&&!e.getAttribute("data-mc")&&e.setAttribute("data-mc","")),a}function a(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("data-mc")&&e.removeAttribute("data-mc")}function l(e){return"_mc"+e[0].toUpperCase()+e.substring(1)}function r(e,t,n,a=!1){return e.addEventListener(l(t),n,{capture:!1,once:a}),n}function s(e,t,n={},a="l"){const r="string"==typeof t?new CustomEvent(l(t),{detail:{data:n,bubble:a}}):t;a.length&&a.indexOf("l")>-1&&e.dispatchEvent(r),/[u|d]/.test(a)&&function(e,t){setTimeout((()=>{-1===t.detail.bubble.indexOf("l")&&(t.detail.bubble+="l"),t.detail.bubble.indexOf("u")>-1&&e.closest("[data-mc]")?.dispatchEvent(t),t.detail.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&e._mc.trigger(e,t)}))}),0)}(e,r)}class o{_target;constructor(t){var n;this._target=new WeakRef(t||{}),n=this,setTimeout((()=>{n.constructor!==i&&n.trigger("Init")}),0),function(t){if(!e()||t.constructor===i)return;const n=t.target;if(n instanceof HTMLElement){let e=t;Object.getOwnPropertyNames(e.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof e.constructor.prototype[t])).forEach((t=>{let a=/^one/.test(t),l=t.replace(/^on[e]{0,1}/,""),s=l.toLowerCase();if("on"+s in n){let a=n=>{e[t](n)};n.addEventListener(s,a)}else r(n,l,(n=>{e[t](n)}),a)}))}}(this)}get target(){return this._target.deref()}}class i extends o{constructor(e,t=!1){super(e)}static add=n;static remove=a;off(e,t){!function(e,t,n){e.removeEventListener(l(t),n)}(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return function(e,t,n){return r(e,t,n,!0),n}(this.target,e,t)}trigger(e,t={},n="l"){s(this.target,e,t,n)}ancestors(){let e=this?.target,n=[];if(!t(e))return[];for(;e=e.closest("[data-mc]");)e?._mc&&n.push(e?._mc);return n.length?n:null}closest(){let e=this.target;return t(e)&&e.closest("[data-mc]")?._mc||null}children(){let e=this?.target;return t(e)?function(e){const t=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+t+'"] [data-mc] [data-mc])';e.setAttribute("temp_id",t);const a=[...e.querySelectorAll(n)].filter((e=>!!e._mc)).map((e=>e._mc));return e.removeAttribute("temp_id"),a.length?a:null}(e):null}descendants(){const e=this?.target;if(!t(e))return[];const n=[...e.querySelectorAll("[data-mc]")].filter((e=>!!e._mc)).map((e=>e._mc));return n.length?n:null}}function c(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var a;(a=e[n])&&a.constructor&&a.constructor===Object?t[n]=c(e[n]):t[n]=e[n]})),t}function u(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const a=u(e[t],!1);for(const e in a)n[t+"."+e]=a[e]}else n[t]=e[t]})),t?c(n):n}function p(e,t){return JSON.stringify(u(e))===JSON.stringify(u(t))}function d(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function b(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,a]of Object.entries(n))("get"in a||"set"in a)&&Object.defineProperty(t,e,a)}new Set;class m extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function f(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}function h(e){return null!=e&&"object"==typeof e}function g(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(n))).forEach((t=>{let a=new Set(e.getAttribute(t)?.match(n));a.forEach((e=>a.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 y=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class v extends i{data={};oldDisplay="";constructor(e){super(e),g(e).forEach((e=>this.data[e]="")),w(this),this.#e()}#e(){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 a;this.data.observe((a=e.getAttribute(t),l=>{let r=a;n.forEach((e=>{r=r.replace(e,l[e.replace(/[\{\}]/g,"")])})),e.setAttribute(t,r)}))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{t=!0;let a=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((t=>l=>{let r=t;a.forEach((e=>{r=r.replace(e,l[e.replace(/[\{\}]/g,"")])})),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=r})(n.nodeValue)),this.oldDisplay=e.getAttribute("style")||"",t&&!y.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(e){let t={};Object.keys(e.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])})),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}}const O={};function E(e){let t=e.constructor.name;return O[t]||function(e){const t=e.constructor,n=t.name;let a=class extends t{#t=!0;#n=[];constructor(e){super(e),this.constructor.callbacks=[],h(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}get callbacks(){return this.#n}set callbacks(e){this.#n=e}observe(e){return this.#n.push(e),this}bind(e){if(h(this.valueOf())){!function(e){var t;(t=e,[t].concat([...t.querySelectorAll("*")]).filter((e=>!!g(e).length)).filter((e=>"STYLE"!==e?.tagName)).reverse()).forEach((e=>{e?._mc?._placeholders||i.add(e,"_placeholders",new v(e))}))}(e);const t=[e,...e.querySelectorAll("[data-mc]")].filter((e=>!!e?._mc?._placeholders)),n=function(e){let n=u(e);t.forEach((e=>{e&&s(e,"data",n)}))};this.#n.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=h(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==e&&(this.#t=e),this.#n.forEach((e=>{e(t)})),this}};return O[n]=a,a}(e)}const w=(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],a=new(E(n))(n);Object.defineProperty(e,t,{enumerable:!0,get(){if(h(a.valueOf())){let e=structuredClone(Object.assign({},a));setTimeout(d((function(){p(structuredClone(Object.assign({},a)),e)||a.notify()}),0),0)}return a},set(e){if(typeof e==typeof a.valueOf())if(h(a.valueOf())&&a.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},a));void 0===a?.constructor?.prototype?.observe&&(a=new(E(e))(structuredClone(Object.assign({},e))),b(e,a),a.seal()),Object.assign(a,e),setTimeout(d((function(){p(structuredClone(Object.assign({},a)),t)||a.notify()}),0),0)}else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(E(e))(e),a.callbacks=n,a.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof a.valueOf(),a,"- CANNOT BECOME:",typeof e)}}),e[t]=n}})),e);class x{constructor(e){}}class k extends x{#a;constructor(e){super(e),this.#a=e}get val(){return new FormData(this.#a.form).get(this.#a.name)}set val(e){[...this.#a.form.querySelectorAll(`input[type="radio"][name="${this.#a.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class A extends x{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.checked}set val(e){this.#a.checked=e}}class C extends x{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value}set val(e){this.#a.value=e}}class S extends x{#a;#l=!1;constructor(e){super(e),this.#a=e,this.#l=e.multiple}get val(){const e=[];return[...this.#a.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#l?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#a.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class j extends x{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value||""}set val(e){this.#a.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 a=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");f(t.prototype.constructor)&&t.prototype instanceof o?customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends m{instance;constructor(e){super();const n=f(t)?new t(this,e):t;i.add(this,a,n)}static get observedAttributes(){return n}})):customElements.define(e,t)}("test-testform",class extends i{data;constructor(e){super(e);let t=this.target.attachShadow({mode:"open"});t.innerHTML=`<style>${this.css}</style>${this.template}`,function(e,t,n){let a=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let a=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":a=new k(e);break;case"checkbox":a=new A(e);break;default:a=new C(e)}break;case"select":a=new S(e);break;case"textarea":a=new j(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}a&&(i.add(e,t,a),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>a.val,set:e=>{a.val!==e&&(a.val=e)}}))}})),n})(n);e[t]=Object.assign({},a),w(e,t),b(a,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{e[t].notify()}))}))}(this,"data",t),this.data.bind(t),fetch("./testform.json").then((e=>e.json())).then((e=>{this.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.html

@@ -11,7 +11,7 @@
 			href="./MicroComponents.svg"
 		/>
 		<link href="style.css" rel="stylesheet" />
-		<link href="my-tag.css" rel="stylesheet" />
+		<link href="myButton.css" rel="stylesheet" />
 		<link href="grandparent.css" rel="stylesheet" /> 
 		<script>
 			import("./microcomponents.js").then((m) => {

package/public/test/test.js

@@ -16,22 +16,11 @@ class Translator extends DC {
             }
         });
         that.Translation.bind(translationTargetObject);
-        that.target.setAttribute('language', 'en');
         that.Language.notify();
     }
-    onAttributeChanged(ev) {
-        let detail = ev.detail || {};
-        if (!detail.newValue)
-            return;
-        switch (detail.name) {
-            case 'language':
-                this.Language = detail.newValue;
-                break;
-        }
-    }
 }
-defineCE('my-tag', class MyTag extends DC {
-    #template = '<button>{lang.click} {counter}</button>';
+class MyButton extends DC {
+    #template = '{lang.click} {counter}';
     #languages = {
         en: {
             click: 'click me',
@@ -43,33 +32,36 @@ defineCE('my-tag', class MyTag extends DC {
     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);
+        this.Dom = { counter: 0 };
+        observe(this);
+        DC.add(target, 'Translator', new Translator(target, this.#languages, target));
+        this.Dom.bind(this.target);
     }
     onClick(ev) {
-        const that = this, c = that.Dom.counter++;
-        ev.detail.data.stopPropagation();
-        that.target.classList.remove('clicked');
-        that.target.classList.add(that.Dom.counter > 9 ? 'overClicked' : 'clicked');
+        const c = this.Dom.counter++;
+        ev.stopPropagation();
+        this.target.classList.remove('clicked');
+        this.target.classList.add(this.Dom.counter > 9 ? 'overClicked' : 'clicked');
     }
-}, ['language']);
-let MyTag = getCE('my-tag'), fragment = new DocumentFragment();
+}
+function makeButton() {
+    const button = document.createElement('button');
+    button.classList.add('myButton');
+    DC.add(button, 'MyButton', new MyButton(button));
+    return button;
+}
+defineCE('make-button', makeButton);
+let fragment = new DocumentFragment();
 let start = new Date().getTime(), max = 1000;
 for (let x = 0; x < max; x++) {
-    fragment.append(new MyTag());
+    fragment.append(getCE('make-button')());
 }
 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('%c \n\nStress Test:\n\n %cInstancing %s buttons containing %s MCs: %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('button');
     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;

package/public/test/test.js.map

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