@twobirds/microcomponents 0.0.83 → 0.0.84

package/public/src/MC.ts

@@ -1,19 +1,20 @@
 'use strict';
 
 import { LooseObject } from './helpers.js';
-import { McEvent } from './McEvent.js';
 
 var isBrowser = new Function(
 	'try {return this===window;}catch(e){ return false;}'
 );
 
-let nativeEventNames: Set<string> = new Set();
-
-// HTMLElement native event names
-if (isBrowser()) {
-	Object.keys(HTMLElement.prototype)
-		.filter((key) => /^on/.test(key))
-		.forEach((eventName) => nativeEventNames.add(eventName));
+// 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 {
@@ -64,34 +65,6 @@ function isDOM(element: { [key: string]: any }) {
 	return element && element instanceof HTMLElement;
 }
 
-function addListener(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject | null,
-	capture: boolean = false,
-	once: boolean = false
-) {
-	let options: EventListenerOptions & { once: boolean } = { once: false };
-	if (capture) {
-		options.capture = capture;
-	}
-
-	if (once) {
-		options.once = once;
-	}
-
-	//console.log( 'addEventListener', eventName, ( handler as Function ).name, options );
-	domNode.addEventListener(eventName, handler, options);
-}
-
-function removeListener(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject | null
-) {
-	domNode.removeEventListener(eventName, handler);
-}
-
 // add a microcomponent to a target DOM node
 function add(target: HTMLElement, key: string, element = {}): any {
 	let node = target as HTMLMcElement;
@@ -111,8 +84,8 @@ function add(target: HTMLElement, key: string, element = {}): any {
 	if (key.length && !_mc[key]) {
 		_mc[key] = element;
 		// add attribute if HTMLElement
-		if (target instanceof HTMLElement && ! target.getAttribute('_mc') ) {
-			target.setAttribute('_mc', '');
+		if (target instanceof HTMLElement && ! target.getAttribute('data-mc') ) {
+			target.setAttribute('data-mc', '');
 		}
 	}
 	return element;
@@ -133,44 +106,13 @@ function remove(target: HTMLMcElement, key: string) {
 	if (
 		!Object.keys(_mc).length &&
 		target instanceof HTMLElement &&
-		target.hasAttribute('_mc')
+		target.hasAttribute('data-mc')
 	) {
-		target.removeAttribute('_mc');
+		target.removeAttribute('data-mc');
 	}
 	return;
 }
 
-// trigger an event
-function trigger(
-	target: HTMLElement,
-	ev: McEvent | string,
-	data: any = {},
-	bubble: string = 'l'
-) {
-	let _mc = (target as any)?._mc;
-	if (!_mc) return;
-
-	let event =
-			ev instanceof McEvent
-				? new McEvent(ev.type, ev.data, 'l')
-				: new McEvent(ev, data, 'l'),
-		mcEvent: McEvent =
-			typeof ev !== 'string' ? (ev as McEvent) : new McEvent(ev, data, bubble);
-
-	[...Object.values(_mc)].forEach((mc: any) => {
-		//console.log( 'mc [', mc.constructor.name, ']', mc.constructor.prototype?.oneInit );
-		if ((mc as any)?.trigger && typeof (mc as any)?.trigger === 'function') {
-			(mc as any)?.trigger(event);
-		}
-	});
-
-	if (/[ud]/.test(mcEvent.bubble)) {
-		bubbleEvent(target, mcEvent);
-	}
-
-	return;
-}
-
 // run the "init" lifecycle event on the complete _mc structure
 function init(element: MC | DC) {
 	if (element.constructor === DC) return;
@@ -193,6 +135,77 @@ function init(element: MC | DC) {
 	}, 0);
 }
 
+function getMcEventName( eventName: string ): string {
+	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
+}
+
+/*
+CustomEvent Section...
+*/
+function off( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ){
+	domNode.removeEventListener( getMcEventName(eventName), handler );
+}
+
+function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ) {
+	domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
+}
+
+function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ) {
+	on(domNode, eventName, handler, true );
+}
+
+// create and dispatch custom event
+function trigger( 
+	domNode: HTMLElement, 
+	event: CustomEvent | string, 
+	data: any = {},
+	bubble: string = 'l'
+){
+	const ev = typeof event === 'string'
+		? new CustomEvent( getMcEventName( event ), { detail: {data, bubble} } )
+		: event;
+	
+	// execute locally if 'l' or nothing is given as bubble
+	if( bubble.length && bubble.indexOf('l') > -1 ){
+		domNode.dispatchEvent( ev );
+	}
+	
+	// bubble if up or down is indicated
+	if( /[u|d]/.test( bubble ) ){
+		bubbleEvent( domNode, ev );
+	}	
+}
+
+function bubbleEvent( domNode: HTMLElement, ev: CustomEvent) {
+	// at this point, either 'u' or 'd' bubbling should be indicated
+	// event bubbling is asynchronous!
+	setTimeout(() => {
+
+		// add missing 'l', or else no handlers are executed
+		if (ev.detail.bubble.indexOf('l') === -1) {
+			ev.detail.bubble += 'l';
+		}
+
+		// bubble up towards root
+		if (ev.detail.bubble.indexOf('u') > -1 ) {
+			domNode.closest('[data-mc]')?.dispatchEvent( ev );
+		}
+
+		// bubble down
+		if (ev.detail.bubble.indexOf('d') > -1) {
+			let targets = new Set<HTMLMcElement>(
+				(domNode as HTMLMcElement)._mc
+					.children()
+					.map((c: unknown) => (c as any)?.target)
+			);
+			targets.forEach((target: HTMLMcElement) => {
+				if (target) DC.trigger(target, ev);
+			});
+		}
+
+	}, 0);
+}
+
 function autoAttachListeners(element: MC | DC) {
 	if (!isBrowser() || element.constructor === DC) return;
 
@@ -209,70 +222,39 @@ function autoAttachListeners(element: MC | DC) {
 			.forEach((key) => {
 				let once = /^one/.test(key),
 					withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
-					nativeEventName = withoutOnOne.toLowerCase(),
-					listener = (ev: McEvent | Event | CustomEvent) => {
-						that.trigger(withoutOnOne, ev);
-					};
-				if (once) {
-					// console.log( '...is only called once', that.constructor.prototype[key] );
-					Object.defineProperty(element, 'on' + withoutOnOne, {
-						configurable: true,
-						enumerable: false,
-						writable: true,
-						value: (ev: any) => {
-							// console.log( 'onceHandler execute:', that.constructor.prototype[key] );
-							that.constructor.prototype[key].bind(that)(ev);
-						},
-					});
-				}
+					nativeEventName = withoutOnOne.toLowerCase();  // lowercase for native event names
 
-				if (nativeEventNames.has('on' + nativeEventName)) {
-					// native event defined in HTMLElement
-					// console.log('added as native listener', target, nativeEventName );
-					addListener(target, nativeEventName, listener, false, once);
+				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 );
 				}
 			});
 	}
 }
 
-function bubbleEvent(target: HTMLElement, ev: McEvent) {
-	// at this point, either 'u' or 'd' bubbling should be indicated
-	// mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
-	if (/[ud]/.test(ev.bubble)) {
-		setTimeout(() => {
-			// bubbling must include 'l' for local, or else no handlers are executed'
-			if (ev.bubble.indexOf('l') === -1) {
-				ev.bubble += 'l';
-			}
-
-			// bubble up towards root
-			if (ev.bubble.indexOf('u') > -1) {
-				let parent = traverseNodes(target, '', true)?.[0].target;
-				if (parent) DC.trigger(parent, ev);
-			}
-
-			// bubble down
-			if (ev.bubble.indexOf('d') > -1) {
-				let targets = new Set<HTMLMcElement>(
-					(target as HTMLMcElement)._mc
-						.children()
-						.map((c: unknown) => (c as any)?.target)
-				);
-				targets.forEach((target: HTMLMcElement) => {
-					if (target) DC.trigger(target, ev);
-				});
-			}
-		}, 0);
-	}
+function getMcChildNodes(domNode: HTMLElement): NodeListOf<Element> {
+	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);
+	domNode.removeAttribute('temp_id');
+	return myDomElements;
 }
 
 class McBase {
 	private _target: WeakRef<any>; // avoid circular reference
-	private __mc: LooseObject = {};
 
 	constructor(target?: { [key: string]: any }, debug: boolean = false) {
-		let that: unknown = this,
-			element = that as MC | DC;
+		let element = this as unknown as MC | DC;
 
 		this._target = new WeakRef(target || {});
 
@@ -285,9 +267,6 @@ class McBase {
 		return this._target.deref();
 	}
 
-	get _mc(): any {
-		return this.__mc;
-	}
 }
 
 class MC extends McBase {
@@ -296,73 +275,9 @@ class MC extends McBase {
 	}
 
 	static trigger = trigger;
-
-	trigger(ev: McEvent | string, data: any = {}, bubble: string = 'l') {
-		let that = this;
-
-		//console.log( that, '.trigger(', ev, data, bubble, ')' );
-
-		// run all triggers
-		if (that.constructor === MC || that.constructor === DC) {
-			let event =
-					ev instanceof McEvent
-						? new McEvent(ev.type, ev.data, 'l')
-						: new McEvent(ev, data, 'l'),
-				mcEvent: McEvent =
-					typeof ev !== 'string'
-						? (ev as McEvent)
-						: new McEvent(ev, data, bubble);
-			[...Object.getOwnPropertyNames(that)].forEach((mc) => {
-				if (
-					(that as any)[mc]?.trigger &&
-					typeof (that as any)[mc]?.trigger === 'function'
-				) {
-					(that as any)[mc]?.trigger(event);
-				}
-			});
-
-			if (/[ud]/.test(mcEvent.bubble)) {
-				bubbleEvent(that.target, mcEvent);
-			}
-
-			return; // must return here!
-		}
-
-		// only this instance
-		if ((that as any) instanceof MC || (that as any) instanceof DC) {
-			const that = this,
-				mcEvent: McEvent =
-					typeof ev !== 'string'
-						? (ev as McEvent)
-						: new McEvent(ev, data, bubble),
-				handlerName =
-					'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
-			// console.log('trigger', handlerName, mcEvent, data, bubble );
-
-			if (mcEvent.bubble.indexOf('l') > -1) {
-				if (
-					!mcEvent.immediateStopped &&
-					typeof (that as any)[handlerName] === 'function'
-				) {
-					// console.log( 'execute handler:', handlerName );
-					(that as any)[handlerName](mcEvent);
-					if ((that as any).hasOwnProperty(handlerName)) {
-						// it is a once handler
-						delete (that as any)[handlerName]; // remove after first execution
-					}
-				}
-			}
-
-			// if event stopped or local only, handling is cancelled
-			if (mcEvent.stopped || mcEvent.bubble === 'l') {
-				return that;
-			}
-
-			//console.log('bubble', mcEvent);
-			if (/[ud]/.test(mcEvent.bubble)) {
-				bubbleEvent(that.target, mcEvent);
-			}
-		}
+	
+	trigger(ev: string, data: any = {}, bubble: string = 'l') {
+		// TBD
 	}
 }
 
@@ -375,8 +290,23 @@ class DC extends McBase {
 	static remove: Function = remove;
 	static trigger: Function = trigger;
 
-	trigger(ev: McEvent | string, data: any = {}, bubble?: string) {
-		MC.prototype.trigger.call(this, ev, data, bubble);
+	off( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		off( this.target, eventName, handler );
+	}
+
+	on( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		on( this.target, eventName, handler );
+	}
+
+	one( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		one( this.target, eventName, handler );
+	}
+
+	trigger(ev: CustomEvent | string, data: any = {}, bubble: string = 'l') {
+		if ( typeof ev === 'string' ){
+
+		}
+		//trigger( this.target, ev, data, bubble);
 	}
 
 	parent(search: string = ''): any[] {
@@ -394,48 +324,29 @@ class DC extends McBase {
 	children(search: string = ''): any[] {
 		let target: any = (this as any)?.target;
 		if (!isDOM(target)) return [];
-		const id = Math.random().toString().replace('.', '');
-		const selector = '[_mc]:not([temp_id="' + id + '"] [_mc] [_mc])';
-		target.setAttribute('temp_id', id);
-		const myDomElements = target.querySelectorAll(selector);
+		const myDomElements = getMcChildNodes(target);
 		const mcValues = getMicroComponents([...myDomElements], search);
-		target.removeAttribute('temp_id');
 		return mcValues;
 	}
 
 	descendants(search: string = ''): any[] {
 		let target: any = (this as any)?.target;
 		if (!isDOM(target)) return [];
-		const myDomElements = target.querySelectorAll('*[_mc]');
+		const myDomElements = target.querySelectorAll('*[data-mc]');
 		return getMicroComponents([...myDomElements], search);
 	}
 }
 
-const loadingMCs = new Set<string>();
+const loadingDCs = new Set<string>();
 
-function makeLoadScript( element: string ) {
-
-	if ( loadingMCs.has( element ) ) return; // already loading
-
-	loadingMCs.add( element );
-
-	//console.log( 'makeLoadScript:', element);
-	const fileName: string = './' + element.split('-').join('/')+'.js';	
-
-	const se: HTMLScriptElement = document.createElement('script');
+// this only applies to DCs defined in the data-mc attribute, 
+// since they need to be attached manually
+function attachDC(element: string): Function {
 
-	se.setAttribute('src', fileName);
-	se.setAttribute('blocking', 'render');
-	se.async = true;
-	se.setAttribute('type', 'module');
-	se.setAttribute( 'data-name', element);
-	se.setAttribute( 'loading', '');
-
-	const loadedPromise = customElements.whenDefined( element );
-
-	loadedPromise.then( () => {
+	//@ts-ignore
+	return () => {
 		const elements: HTMLElement[] = Array
-					.from(document.querySelectorAll(`[_mc*="${element}"]`))
+					.from(document.querySelectorAll(`[data-mc*="${element}"]`))
 					.filter( element => element instanceof HTMLElement );
 
 		if ( elements.length === 0 ) return;
@@ -450,28 +361,53 @@ function makeLoadScript( element: string ) {
 
 			//@ts-ignore
 			const new_mc = node
-				.getAttribute( '_mc' )
+				.getAttribute( 'data-mc' )
 				.split(' ')
 				.filter( (name) => name !== element && name !== '' )
-				.join(' ');
+				.join(' ')
+				.trim();
 
 			//@ts-ignore
 			node.setAttribute( 
-				'_mc',
+				'data-mc',
 				//@ts-ignore
 				new_mc
 			)
 		});
+	};
+};
 
-		document.head.querySelector('script[data-name="${elementName}]"')?.remove();
-	});
+function makeLoadScript( element: string ) {
+
+	if ( loadingDCs.has( element ) ) return; // already loading
+
+	loadingDCs.add( element );
+
+	//console.log( 'makeLoadScript:', element);
+	const fileName: string = './' + element.split('-').join('/')+'.js';	
+
+	const se: HTMLScriptElement = document.createElement('script');
 
-	addListener( se, 'load', (ev) => {
-		loadingMCs.delete( element );
+	se.setAttribute('src', fileName);
+	se.setAttribute('blocking', 'render');
+	se.async = true;
+	se.setAttribute('type', 'module');
+	se.setAttribute( 'data-name', element);
+	se.setAttribute( 'loading', '');
+
+	const loadedPromise = customElements.whenDefined( element );
+
+	//@ts-ignore
+	loadedPromise.then( attachDC( element ) );
+
+	se.addEventListener( 'load', (ev: Event) => {
+		loadingDCs.delete( element );
+
+		document.head.querySelector(`script[data-name="${element}"]`)?.remove();
 	});
 
-	addListener( se, 'error', (ev) => {
-		console.error('could not load MC code from', fileName);
+	se.addEventListener( 'error', (ev: Event) => {
+		console.error('could not load DC code from', fileName);
 	});
 
 	document.head.append(se);
@@ -483,21 +419,26 @@ function loadUndefinedMCs() {
 	[ ...document.querySelectorAll(':not(:defined)') ]
 		.filter( (element) => !!element 
 			&& !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
-			&& !loadingMCs.has(element.tagName.toLowerCase()) // not in loading list
+			&& !loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
 		)
 		.forEach((el) => {
 			//console.log( 'detected CE', el.tagName.toLowerCase() );
-			makeLoadScript( el.tagName.toLowerCase() );
+			makeLoadScript( el.tagName.toLowerCase() ); // will automatically be instanciated
 		});
 
-	// load unresolved  MCs defined in _mc attribute
-	[ ...document.querySelectorAll('[_mc]:not([_mc=""]') ]
+	// if defined in _mc attribute: instanciate DCs, load if necessary
+	[ ...document.querySelectorAll('[data-mc]:not([data-mc=""]') ]
 		.filter( (element) => !!element )
 		.forEach((el) => {
-			const _mc = el.getAttribute('_mc')?.split(' ').filter( name => name !== '' );
-			_mc?.forEach( dc => {
+			const _mc = el.getAttribute('data-mc')?.split(' ').filter( name => name !== '' );
+			_mc?.forEach( element => {
 				//console.log( 'detected DC', dc );
-				makeLoadScript( dc );
+				const isDefined = customElements.get(element);
+				if ( !loadingDCs.has(element) && !isDefined ) {
+					makeLoadScript( element );
+				} else if ( isDefined ) {
+					attachDC(element)();
+				}
 			});
 		});
 }
@@ -526,7 +467,7 @@ function autoload(enable: boolean = true): boolean {
 	return autoloadEnabled;
 }
 
-(autoload as LooseObject).state = { loadingMCs };
+(autoload as LooseObject).state = loadingDCs;
 
-export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
+export { McBase, MC, DC, autoload, on, one, off, trigger };
 

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

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAuCA,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,GAAG,QAAQ,EACzD,kBAAkB,GAAE,MAAM,EAAO,QA2DjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAoDA,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,GAAG,QAAQ,EACzD,kBAAkB,GAAE,MAAM,EAAO,QA2DjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}

package/public/src/elements.js

@@ -6,16 +6,22 @@ class CeBaseClass extends HTMLElement {
         super();
     }
     connectedCallback() {
-        DC.trigger(this, 'Connected');
+        this.dispatchEvent(new CustomEvent('_mcConnected'));
+    }
+    connectedMoveCallback() {
+        this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
     }
     disconnectedCallback() {
-        DC.trigger(this, 'Disconnected');
+        this.dispatchEvent(new CustomEvent('_mcDisconnected'));
     }
     adoptedCallback() {
-        DC.trigger(this, 'Adopted');
+        this.dispatchEvent(new CustomEvent('_mcAdopted'));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        DC.trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+        this.dispatchEvent(new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } }));
+    }
+    formResetCallback() {
+        this.dispatchEvent(new CustomEvent('_mcFormReset'));
     }
 }
 function createNamedClass(name, ClassBody) {

package/public/src/elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAY,SAAQ,WAAW;IACpC;QACC,KAAK,EAAE,CAAC;IACT,CAAC;IAED,iBAAiB;QACf,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,oBAAoB;QAClB,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe;QACb,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAa,EAAE,QAAa;QACjE,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7E,CAAC;CACD;AAED,SAAS,gBAAgB,CACxB,IAAY,EACZ,SAAwC;IAExC,OAAO,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAClE,CAAC;AAED,SAAS,OAAO,CAAC,IAAS;IACxB,OAAO,OAAO,IAAI,KAAK,UAAU;WAC5B,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,QAAQ,CACvB,OAAe,EACf,eAAyD,EACzD,qBAA+B,EAAE;IAEjC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,4BAA4B,OAAO,uBAAuB,CAAC,CAAC;QACzE,OAAO;IACR,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CACd,sEAAsE,CACtE,CAAC;IACH,CAAC;IAED,IAAI,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAGlC,IAAK,CAAC,OAAO,CAAE,eAAe,CAAC,SAAS,CAAC,WAAW,CAAE,EAAE,CAAC;QACxD,cAAc,CAAC,MAAM,CACpB,OAAO,EAEP,eAAe,CACf,CAAC;QACF,OAAO;IACR,CAAC;IAGD,IAAK,CAAC,CAAE,eAAe,CAAC,SAAS,YAAY,MAAM,CAAE,EAAE,CAAC;QACvD,cAAc,CAAC,MAAM,CACpB,OAAO,EAEP,eAAe,CACf,CAAC;QACF,OAAO;IACR,CAAC;IAGD,cAAc,CAAC,MAAM,CACpB,OAAO,EACP,gBAAgB,CACf,IAAI,EACJ,KAAM,SAAQ,WAAW;QACxB,QAAQ,CAAM;QAEd,YAAY,IAAU;YACrB,KAAK,EAAE,CAAC;YAER,MAAM,QAAQ,GAAG,OAAO,CAAE,eAAe,CAAE;gBAE1C,CAAC,CAAC,IAAI,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC;gBACjC,CAAC,CAAC,eAAe,CAAC;YACnB,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC9B,CAAC;QAED,MAAM,KAAK,kBAAkB;YAC5B,OAAO,kBAAkB,CAAC;QAC3B,CAAC;KACD,CACD,CACD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,OAAe;IACpC,OAAO,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC"}
+{"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"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"}

package/public/src/elements.ts

@@ -9,19 +9,32 @@ class CeBaseClass extends HTMLElement {
 	}
 
 	connectedCallback() {
-		(DC as any).trigger(this, 'Connected');
+		this.dispatchEvent( new CustomEvent('_mcConnected') );
+	}
+
+	connectedMoveCallback() {
+		this.dispatchEvent( new CustomEvent('_mcConnectedMove') );
 	}
 
 	disconnectedCallback() {
-		(DC as any).trigger(this, 'Disconnected');
+		this.dispatchEvent( new CustomEvent('_mcDisconnected') );
 	}
 
 	adoptedCallback() {
-		(DC as any).trigger(this, 'Adopted');
+		this.dispatchEvent( new CustomEvent('_mcAdopted') );
 	}
 
 	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-		(DC as any).trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+		this.dispatchEvent( 
+			new CustomEvent(
+				'_mcAttributeChanged', 
+				{ detail: { name, oldValue, newValue } } 
+			) 
+		);
+	}
+
+	formResetCallback(){
+		this.dispatchEvent( new CustomEvent('_mcFormReset') );
 	}
 }
 

package/public/src/formValues.js

@@ -1,6 +1,6 @@
 'use strict';
 import { copyGettersSetters } from './helpers.js';
-import { DC, addListener } from './MC.js';
+import { DC } from './MC.js';
 import { observe } from './observables.js';
 const getInputName = (e) => {
     return e.tagName.toLowerCase();
@@ -154,7 +154,7 @@ export function formValues(targetObject, propertyName, dom) {
     observe(targetObject, propertyName);
     copyGettersSetters(handlers, targetObject[propertyName]);
     [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-        addListener(input, 'input', (ev) => {
+        input.addEventListener('input', (ev) => {
             targetObject[propertyName].notify();
         });
     });