@twobirds/microcomponents 0.0.84 → 0.0.85

package/public/src/MC.ts

@@ -2,7 +2,7 @@
 
 import { LooseObject } from './helpers.js';
 
-var isBrowser = new Function(
+const isBrowser = new Function(
 	'try {return this===window;}catch(e){ return false;}'
 );
 
@@ -21,61 +21,17 @@ export interface HTMLMcElement extends HTMLElement {
 	_mc: LooseObject;
 }
 
-// get all microcomponents from a list of HTMLElements
-function getMicroComponents(elements: any[], search: string): any[] {
-	let mcValues: any[] = [];
-
-	elements.forEach((e) => {
-		if (e) {
-			if (e instanceof HTMLElement) {
-				const _mc = (e as any)?._mc;
-				if (!search && _mc) {
-					mcValues = mcValues.concat(Object.values((e as any)._mc));
-				} else if (search && _mc && _mc[search]) {
-					mcValues.push(_mc[search]);
-				}
-			}
-		}
-	});
-	return mcValues;
-}
-
-// get all ancestor DOM nodes up to the document root
-function traverseNodes(
-	node: { [key: string]: any },
-	search: string,
-	firstonly = true
-): any[] {
-	let mcValues: any[] = [];
-	while (node) {
-		if (node._mc) {
-			if (!search) {
-				mcValues = mcValues.concat(Object.values(node._mc));
-			} else if (search && node._mc[search]) {
-				mcValues.push(node._mc[search]);
-			}
-			if (firstonly) return mcValues;
-		}
-		node = node.parentNode;
-	}
-	return mcValues;
-}
-
 function isDOM(element: { [key: string]: any }) {
 	return element && element instanceof HTMLElement;
 }
 
 // add a microcomponent to a target DOM node
-function add(target: HTMLElement, key: string, element = {}): any {
+function add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
 	let node = target as HTMLMcElement;
 
 	// create the _mc property if necessary
 	if (!node._mc) {
-		let debug = (DC as any)?.debug;
-		(DC as any).debug = false;
 		node._mc = new (DC as any)(target);
-		(DC as any).debug = debug;
-		delete node._mc._mc; // NOT NEEDED on the top level _mc property of a DOM HTMLElement
 	}
 
 	const _mc = node._mc;
@@ -88,7 +44,8 @@ function add(target: HTMLElement, key: string, element = {}): any {
 			target.setAttribute('data-mc', '');
 		}
 	}
-	return element;
+
+	return node;
 }
 
 // remove a micro component from the DOM
@@ -114,27 +71,14 @@ function remove(target: HTMLMcElement, key: string) {
 }
 
 // run the "init" lifecycle event on the complete _mc structure
-function init(element: MC | DC) {
-	if (element.constructor === DC) return;
-
+function init(element: DC) {
 	setTimeout(() => {
+		if (element.constructor === DC) return;
 		element.trigger('Init');
-		/*
-			let keys = Object.keys( ( element as any)?._mc );
-			if ( keys.length ){
-				//console.log( 'inner Inits on [', mc.constructor.name, ']', keys );
-				keys?.forEach( (key: string) => {
-					let mc = ( element as any)?._mc?.[key];
-					//console.log( key, typeof mc?.oneInit, mc );
-					if ( ( mc as any )['oneInit'] &&  typeof ( mc as any ).oneInit == 'function' ){
-						( mc as any ).oneInit( new McEvent('Init') );
-					}
-				});
-			};
-			*/
 	}, 0);
 }
 
+// 'eventName' => '_mcEventName'
 function getMcEventName( eventName: string ): string {
 	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
 }
@@ -156,8 +100,8 @@ function one( domNode: Node, eventName: string, handler: EventListenerOrEventLis
 
 // create and dispatch custom event
 function trigger( 
-	domNode: HTMLElement, 
-	event: CustomEvent | string, 
+	domNode: HTMLElement,
+	event: CustomEvent | string,
 	data: any = {},
 	bubble: string = 'l'
 ){
@@ -199,7 +143,7 @@ function bubbleEvent( domNode: HTMLElement, ev: CustomEvent) {
 					.map((c: unknown) => (c as any)?.target)
 			);
 			targets.forEach((target: HTMLMcElement) => {
-				if (target) DC.trigger(target, ev);
+				if (target) target._mc.trigger(target, ev);
 			});
 		}
 
@@ -241,24 +185,27 @@ function autoAttachListeners(element: MC | DC) {
 	}
 }
 
-function getMcChildNodes(domNode: HTMLElement): NodeListOf<Element> {
+function getMcChildNodes(domNode: HTMLElement): DC[] | null {
 	const id = Math.random().toString().replace('.', '');
 	const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
 	domNode.setAttribute('temp_id', id);
-	const myDomElements = domNode.querySelectorAll(selector);
+	const mcArray: unknown[] = 
+		( [ ...domNode.querySelectorAll(selector) ] as HTMLMcElement[])
+			.filter( (e) => !!e._mc )
+			.map( e => e._mc );
 	domNode.removeAttribute('temp_id');
-	return myDomElements;
+	return mcArray.length ? mcArray as DC[] : null;
 }
 
 class McBase {
 	private _target: WeakRef<any>; // avoid circular reference
 
-	constructor(target?: { [key: string]: any }, debug: boolean = false) {
+	constructor(target?: { [key: string]: any } ) {
 		let element = this as unknown as MC | DC;
 
 		this._target = new WeakRef(target || {});
 
-		init(element); // async lifecycle event
+		init(element as DC); // async lifecycle event
 
 		autoAttachListeners(element);
 	}
@@ -273,12 +220,6 @@ class MC extends McBase {
 	constructor(target?: any) {
 		super(target);
 	}
-
-	static trigger = trigger;
-	
-	trigger(ev: string, data: any = {}, bubble: string = 'l') {
-		// TBD
-	}
 }
 
 class DC extends McBase {
@@ -288,8 +229,8 @@ class DC extends McBase {
 
 	static add: Function = add;
 	static remove: Function = remove;
-	static trigger: Function = trigger;
 
+	/* event handling */
 	off( eventName: string, handler: EventListenerOrEventListenerObject ) {
 		off( this.target, eventName, handler );
 	}
@@ -302,45 +243,57 @@ class DC extends McBase {
 		one( this.target, eventName, handler );
 	}
 
-	trigger(ev: CustomEvent | string, data: any = {}, bubble: string = 'l') {
-		if ( typeof ev === 'string' ){
-
-		}
-		//trigger( this.target, ev, data, bubble);
+	trigger( eventName: string, data: any = {}, bubble: string = 'l') {
+		trigger( this.target, eventName, data, bubble);
 	}
 
-	parent(search: string = ''): any[] {
-		let target: HTMLElement = (this as any).target;
-		if (!isDOM(target)) return [];
-		return traverseNodes((target as any).parentNode, search, true);
+	/* 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(search: string = ''): any[] {
-		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return [];
-		return traverseNodes((this as any).target.parentNode, search, false);
+	ancestors(): DC[] | null {
+		let 
+			currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
+			result: DC[] = [];
+
+		if (!isDOM( currentNode )) return [];
+
+		while ( currentNode = (currentNode.closest('[data-mc]') ) ){
+			if ( (currentNode as HTMLMcElement)?._mc ){
+				result.push( (currentNode as HTMLMcElement)?._mc as DC );
+			}
+		}
+
+		return result.length ? result : null;
 	}
 
-	children(search: string = ''): any[] {
+	children(): DC[] | null {
 		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return [];
-		const myDomElements = getMcChildNodes(target);
-		const mcValues = getMicroComponents([...myDomElements], search);
-		return mcValues;
+		if (!isDOM(target)) return null;
+		return getMcChildNodes(target);
 	}
 
-	descendants(search: string = ''): any[] {
-		let target: any = (this as any)?.target;
+	descendants(): DC[] | null {
+		const target: any = (this as DC)?.target;
 		if (!isDOM(target)) return [];
-		const myDomElements = target.querySelectorAll('*[data-mc]');
-		return getMicroComponents([...myDomElements], search);
+		const mcArray: unknown[] = 
+			( [ ...target.querySelectorAll( '[data-mc]' ) ] as HTMLMcElement[])
+				.filter( (e) => !!e._mc )
+				.map( e => e._mc );
+		return mcArray.length ? mcArray as DC[] : null;
 	}
 }
 
+/*
+Autoload Section...
+*/
+
 const loadingDCs = new Set<string>();
 
-// this only applies to DCs defined in the data-mc attribute, 
-// since they need to be attached manually
 function attachDC(element: string): Function {
 
 	//@ts-ignore

package/public/src/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:()=>_});var n=new Function("try {return this===window;}catch(e){ return false;}");function r(t,e){let n=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const r=t?._mc;!e&&r?n=n.concat(Object.values(t._mc)):e&&r&&r[e]&&n.push(r[e])}})),n}function o(t,e,n=!0){let r=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&r.push(t._mc[e]):r=r.concat(Object.values(t._mc)),n))return r;t=t.parentNode}return r}function c(t){return t&&t instanceof HTMLElement}function s(t,e,n={}){let r=t;if(!r._mc){let e=p?.debug;p.debug=!1,r._mc=new p(t),p.debug=e,delete r._mc._mc}const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}function a(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 i(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function d(t,e,n,r=!1){t.addEventListener(i(e),n,{capture:!1,once:r})}function u(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(i(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&&p.trigger(t,e)}))}),0)}(t,o)}class l{_target;constructor(t,e=!1){var r;this._target=new WeakRef(t||{}),(r=this).constructor!==p&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!n()||t.constructor===p)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):d(e,o,s,r)}))}}(this)}get target(){return this._target.deref()}}class p extends l{constructor(t,e=!1){super(t)}static add=s;static remove=a;static trigger=u;off(t,e){!function(t,e,n){t.removeEventListener(i(e),n)}(this.target,t,e)}on(t,e){d(this.target,t,e)}one(t,e){!function(t,e,n){d(t,e,n,!0)}(this.target,t,e)}trigger(t,e={},n="l"){}parent(t=""){let e=this.target;return c(e)?o(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return c(e)?o(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;return c(e)?r([...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);return t.removeAttribute("temp_id"),r}(e)],t):[]}descendants(t=""){let e=this?.target;return c(e)?r([...e.querySelectorAll("*[data-mc]")],t):[]}}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(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function f(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function h(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("");f(e.prototype.constructor)&&e.prototype instanceof l?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends m{instance;constructor(t){super();const n=f(e)?new e(this,t):e;p.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function g(t){return customElements.get(t)}function b(t,e){return Math.floor(Math.random()*(e-t+1)+t)}h("test-greatgrandchild",class extends p{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+b(0,255)+","+b(0,255)+","+b(0,255)+")")}});const v=g("test-greatgrandchild");h("test-grandchild",class extends p{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new v)}});const E=g("test-grandchild");h("test-child",class extends p{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new E)}});const y=g("test-child");h("test-parent",class extends p{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new y)}});const C=g("test-parent");h("test-grandparent",class extends p{constructor(t){super(t)}onConnected(t){for(let t=0;t<5;t++)this.target.append(new C)}onDisconnected(t){}onAdopted(t){}onAttributeChanged(t){}});const _=g("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){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})()));

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

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TestTestform=t():e.TestTestform=t()}(self,(()=>(()=>{"use strict";var e=new Function("try {return this===window;}catch(e){ return false;}");function t(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const a=e?._mc;!t&&a?n=n.concat(Object.values(e._mc)):t&&a&&a[t]&&n.push(a[t])}})),n}function n(e,t,n=!0){let a=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&a.push(e._mc[t]):a=a.concat(Object.values(e._mc)),n))return a;e=e.parentNode}return a}function a(e){return e&&e instanceof HTMLElement}function l(e,t,n={}){let a=e;if(!a._mc){let t=u?.debug;u.debug=!1,a._mc=new u(e),u.debug=t,delete a._mc._mc}const l=a._mc;return t.length&&!l[t]&&(l[t]=n,e instanceof HTMLElement&&!e.getAttribute("data-mc")&&e.setAttribute("data-mc","")),n}function r(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 o(e){return"_mc"+e[0].toUpperCase()+e.substring(1)}function s(e,t,n,a=!1){e.addEventListener(o(t),n,{capture:!1,once:a})}function i(e,t,n={},a="l"){const l="string"==typeof t?new CustomEvent(o(t),{detail:{data:n,bubble:a}}):t;a.length&&a.indexOf("l")>-1&&e.dispatchEvent(l),/[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&&u.trigger(e,t)}))}),0)}(e,l)}class c{_target;constructor(t,n=!1){var a;this._target=new WeakRef(t||{}),(a=this).constructor!==u&&setTimeout((()=>{a.trigger("Init")}),0),function(t){if(!e()||t.constructor===u)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}/,""),r=l.toLowerCase(),o=n=>{e[t](n)};n["on"+r]?n.addEventListener(r,o):s(n,l,o,a)}))}}(this)}get target(){return this._target.deref()}}class u extends c{constructor(e,t=!1){super(e)}static add=l;static remove=r;static trigger=i;off(e,t){!function(e,t,n){e.removeEventListener(o(t),n)}(this.target,e,t)}on(e,t){s(this.target,e,t)}one(e,t){!function(e,t,n){s(e,t,n,!0)}(this.target,e,t)}trigger(e,t={},n="l"){}parent(e=""){let t=this.target;return a(t)?n(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return a(t)?n(this.target.parentNode,e,!1):[]}children(e=""){let n=this?.target;return a(n)?t([...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);return e.removeAttribute("temp_id"),a}(n)],e):[]}descendants(e=""){let n=this?.target;return a(n)?t([...n.querySelectorAll("*[data-mc]")],e):[]}}function p(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var a;(a=e[n])&&a.constructor&&a.constructor===Object?t[n]=p(e[n]):t[n]=e[n]})),t}function d(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const a=d(e[t],!1);for(const e in a)n[t+"."+e]=a[e]}else n[t]=e[t]})),t?p(n):n}function b(e,t){return JSON.stringify(d(e))===JSON.stringify(d(t))}function m(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function f(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 h 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 g(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}function y(e){return null!=e&&"object"==typeof e}function v(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 O=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class E extends u{data={};oldDisplay="";constructor(e){super(e),v(e).forEach((e=>this.data[e]="")),k(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&&!O.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 w={};function x(e){let t=e.constructor.name;return w[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=[],y(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(y(this.valueOf())){!function(e){var t;(t=e,[t].concat([...t.querySelectorAll("*")]).filter((e=>!!v(e).length)).filter((e=>"STYLE"!==e?.tagName)).reverse()).forEach((e=>{e?._mc?._placeholders||u.add(e,"_placeholders",new E(e))}))}(e);const t=[e,...e.querySelectorAll("[data-mc]")].filter((e=>!!e?._mc?._placeholders)),n=function(e){let n=d(e);t.forEach((e=>{e&&i(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=y(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 w[n]=a,a}(e)}const k=(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(x(n))(n);Object.defineProperty(e,t,{enumerable:!0,get(){if(y(a.valueOf())){let e=structuredClone(Object.assign({},a));setTimeout(m((function(){b(structuredClone(Object.assign({},a)),e)||a.notify()}),0),0)}return a},set(e){if(typeof e==typeof a.valueOf())if(y(a.valueOf())&&a.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},a));void 0===a?.constructor?.prototype?.observe&&(a=new(x(e))(structuredClone(Object.assign({},e))),f(e,a),a.seal()),Object.assign(a,e),setTimeout(m((function(){b(structuredClone(Object.assign({},a)),t)||a.notify()}),0),0)}else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(x(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 A{constructor(e){}}class C extends A{#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 j extends A{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.checked}set val(e){this.#a.checked=e}}class S extends A{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value}set val(e){this.#a.value=e}}class _ extends A{#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 N extends A{#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("");g(t.prototype.constructor)&&t.prototype instanceof c?customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends h{instance;constructor(e){super();const n=g(t)?new t(this,e):t;u.add(this,a,n)}static get observedAttributes(){return n}})):customElements.define(e,t)}("test-testform",class extends u{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 C(e);break;case"checkbox":a=new j(e);break;default:a=new S(e)}break;case"select":a=new _(e);break;case"textarea":a=new N(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}a&&(u.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),k(e,t),f(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){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            '}}),{}})()));

package/public/src/test/test.js

@@ -75,6 +75,6 @@ setTimeout(() => {
     let formInstance = form._mc.TestTestform;
     window.form = formInstance;
     console.log("\n\n%cAttached a global variable 'form':%c \n\n %O %c %s %c %s %c %s", 'font-weight: bold;', 'font-weight: normal;', formInstance, 'font-weight: bold;', '\n\nYou can use it to change input values, e.g. \n\n', 'font-weight: normal;', '  form.data.textInput="other value"', 'font-weight: bold;', '\n\nChanges will be reflected in the form contents, same as vice versa.\n');
-    DC.trigger(element, 'doSomething');
+    element._mc?.trigger('doSomething');
 }, 1000);
 //# sourceMappingURL=test.js.map

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

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

package/public/src/test/test.ts

@@ -5,6 +5,7 @@ import {
 	getCE,
 	observe,
 	Observable,
+	HTMLMcElement,
 } from '../microcomponents.js';
 
 class Translator extends DC {
@@ -184,5 +185,5 @@ setTimeout(() => {
 	);
 
 	// will trigger the event on all micro components contained in <my-tag>
-	DC.trigger(element, 'doSomething');
+	( element as HTMLMcElement)._mc?.trigger('doSomething');
 }, 1000);

package/public/test/MC.d.ts

@@ -10,27 +10,24 @@ declare class McBase {
     private _target;
     constructor(target?: {
         [key: string]: any;
-    }, debug?: boolean);
+    });
     get target(): any;
 }
 declare class MC extends McBase {
     constructor(target?: any);
-    static trigger: typeof trigger;
-    trigger(ev: string, data?: any, bubble?: string): void;
 }
 declare class DC extends McBase {
     constructor(target: HTMLElement, debug?: boolean);
     static add: Function;
     static remove: Function;
-    static trigger: Function;
     off(eventName: string, handler: EventListenerOrEventListenerObject): void;
     on(eventName: string, handler: EventListenerOrEventListenerObject): void;
     one(eventName: string, handler: EventListenerOrEventListenerObject): void;
-    trigger(ev: CustomEvent | string, data?: any, bubble?: string): void;
-    parent(search?: string): any[];
-    ancestors(search?: string): any[];
-    children(search?: string): any[];
-    descendants(search?: string): any[];
+    trigger(eventName: string, data?: any, bubble?: string): void;
+    parent(): DC | null;
+    ancestors(): DC[] | null;
+    children(): DC[] | null;
+    descendants(): DC[] | null;
 }
 declare function autoload(enable?: boolean): boolean;
 export { McBase, MC, DC, autoload, on, one, off, trigger };

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

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiB3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA2HD,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,QAEhH;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA4ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAUnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAGxD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAOtE,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAQpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA+GD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiB3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AAmED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,QAEhH;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA+ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAU3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IAGjC,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAKhE,MAAM,IAAI,EAAE,GAAG,IAAI;IAOnB,SAAS,IAAI,EAAE,EAAE,GAAG,IAAI;IAgBxB,QAAQ,IAAI,EAAE,EAAE,GAAG,IAAI;IAMvB,WAAW,IAAI,EAAE,EAAE,GAAG,IAAI;CAS1B;AAiHD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}