@twobirds/microcomponents 0.0.83 → 0.0.84

package/public/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/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/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/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/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,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={};t.r(e),t.d(e,{defineCE:()=>_,getCE:()=>w});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>n.add(t)));class o{#t;#e=!1;#r=!1;constructor(t,e={},r="l"){this.#t=t,this.data=e,this.bubble=r}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#r}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var i=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function s(t,e){let r=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const n=t?._mc;!e&&n?r=r.concat(Object.values(t._mc)):e&&n&&n[e]&&r.push(n[e])}})),r}function a(t,e,r=!0){let n=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&n.push(t._mc[e]):n=n.concat(Object.values(t._mc)),r))return n;t=t.parentNode}return n}function u(t){return t&&t instanceof HTMLElement}function l(t,e,r={}){let n=t;if(!n._mc){let e=b?.debug;b.debug=!1,n._mc=new b(t),b.debug=e,delete n._mc._mc}const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),r}function p(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function d(t,e,r={},n="l"){let i=t?._mc;if(!i)return;let c=e instanceof o?new o(e.type,e.data,"l"):new o(e,r,"l"),s="string"!=typeof e?e:new o(e,r,n);[...Object.values(i)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(s.bubble)&&f(t,s)}function f(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let r=a(t,"",!0)?.[0].target;r&&b.trigger(r,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&b.trigger(t,e)}))}),0)}i()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>c.add(t)));class g{_target;__mc={};constructor(t,e=!1){var r;this._target=new WeakRef(t||{}),(r=this).constructor!==b&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!i()||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((n=>{let o=/^one/.test(n),i=n.replace(/^on[e]{0,1}/,""),s=i.toLowerCase();o&&Object.defineProperty(t,"on"+i,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[n].bind(r)(t)}}),c.has("on"+s)&&function(t,e,r,n=!1,o=!1){let i={once:!1};n&&(i.capture=n),o&&(i.once=o),t.addEventListener(e,r,i)}(e,s,(t=>{r.trigger(i,t)}),!1,o)}))}}(this)}get target(){return this._target.deref()}get _mc(){return this.__mc}}class m extends g{constructor(t){super(t)}static trigger=d;trigger(t,e={},r="l"){let n=this;if(n.constructor===m||n.constructor===b){let i=t instanceof o?new o(t.type,t.data,"l"):new o(t,e,"l"),c="string"!=typeof t?t:new o(t,e,r);return[...Object.getOwnPropertyNames(n)].forEach((t=>{n[t]?.trigger&&"function"==typeof n[t]?.trigger&&n[t]?.trigger(i)})),void(/[ud]/.test(c.bubble)&&f(n.target,c))}if(n instanceof m||n instanceof b){const n=this,i="string"!=typeof t?t:new o(t,e,r),c="on"+i.type[0].toUpperCase()+i.type.slice(1);if(i.bubble.indexOf("l")>-1&&(i.immediateStopped||"function"!=typeof n[c]||(n[c](i),n.hasOwnProperty(c)&&delete n[c])),i.stopped||"l"===i.bubble)return n;/[ud]/.test(i.bubble)&&f(n.target,i)}}}class b extends g{constructor(t,e=!1){super(t)}static add=l;static remove=p;static trigger=d;trigger(t,e={},r){m.prototype.trigger.call(this,t,e,r)}parent(t=""){let e=this.target;return u(e)?a(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return u(e)?a(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!u(e))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const o=s([...e.querySelectorAll(n)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return u(e)?s([...e.querySelectorAll("*[_mc]")],t):[]}}new Set;class h extends HTMLElement{constructor(){super()}connectedCallback(){b.trigger(this,"Connected")}disconnectedCallback(){b.trigger(this,"Disconnected")}adoptedCallback(){b.trigger(this,"Adopted")}attributeChangedCallback(t,e,r){b.trigger(this,"AttributeChanged",{name:t,oldValue:e,newValue:r})}}function y(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function _(t,e,r=[]){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 n=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");y(e.prototype.constructor)&&e.prototype instanceof g?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(n,class extends h{instance;constructor(t){super();const r=y(e)?new e(this,t):e;b.add(this,n,r)}static get observedAttributes(){return r}})):customElements.define(t,e)}function w(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:()=>b,getCE:()=>h});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=m?.debug;m.debug=!1,r._mc=new m(t),m.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 u(t,e,n,r=!1){t.addEventListener(i(e),n,{capture:!1,once:r})}function l(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&&m.trigger(t,e)}))}),0)}(t,o)}class d{_target;constructor(t,e=!1){var r;this._target=new WeakRef(t||{}),(r=this).constructor!==m&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!n()||t.constructor===m)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):u(e,o,s,r)}))}}(this)}get target(){return this._target.deref()}}class m extends d{constructor(t,e=!1){super(t)}static add=s;static remove=a;static trigger=l;off(t,e){!function(t,e,n){t.removeEventListener(i(e),n)}(this.target,t,e)}on(t,e){u(this.target,t,e)}one(t,e){!function(t,e,n){u(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 f 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 p(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function b(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("");p(e.prototype.constructor)&&e.prototype instanceof d?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends f{instance;constructor(t){super();const n=p(e)?new e(this,t):e;m.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function h(t){return customElements.get(t)}return e})()));