@twobirds/microcomponents 0.0.82 → 0.0.84

package/public/{selectors.ts → src/selectors._ts}

@@ -29,249 +29,6 @@ const words = ( classes: Array<string> ): Array<string> => {
 	return classes;
 }
 
-type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-const getInputName = ( e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement ): string => {
-
-	let ret = e instanceof HTMLInputElement
-		? 'input'
-		: e instanceof HTMLSelectElement
-			? 'select'
-			: e instanceof HTMLTextAreaElement
-				? 'textarea'
-				: ''
-		;
-
-	return ret;
-}
-
-
-const getInputHandlers = ( e: HTMLElement | ShadowRoot ): LooseObject => {
-
-		let
-			//inputList = ( Array.from( e.querySelectorAll('*') ) as HTMLElement[] ).filter( i => isInputElement(i) ),
-			inputList = $d('input,select,textarea', e).array,
-			handlers: LooseObject = {};
-
-		inputList.forEach( (i) => {
-			const
-				name: string = ( i as inputTypes ).getAttribute('name') || 'undefined';
-
-			if ( name ){
-				let h: InputBase;
-				switch ( getInputName( i as inputTypes ) ){
-					case 'input':
-						//console.log( i, 'is HTMLInputElement');
-						h = new InputHandler( i as HTMLInputElement, e ); // e = element to search radios in = radioBase
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					case 'select':
-						//console.log( i, 'is HTMLSelectElement');
-						h = new SelectHandler( i as HTMLSelectElement );
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					case 'textarea':
-						//console.log( i, 'is HTMLTextAreaElement');
-						h = new TextAreaHandler( i as HTMLTextAreaElement );
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					default:
-						console.warn('handler missing:', name, 'for', i);
-						break;
-				}
-			}
-		});
-
-		return handlers;
-}
-
-abstract class InputBase{
-	constructor( e: any ){
-	}
-
-	abstract get val(): any;
-
-	abstract set val( value: any );
-
-}
-
-class InputHandler extends InputBase {
-
-	#e: HTMLInputElement;
-	#type: string;
-	#radioBase: any;
-
-	constructor( e: HTMLInputElement, radioBase?: HTMLElement | ShadowRoot ){
-		super( e );
-		this.#e = e;
-		this.#type = e.type;
-		this.#radioBase = radioBase;
-	}
-
-	get val(): any{
-		let that = this,
-			type = that.#type,
-			ret: any;
-
-		switch (type){
-			case 'radio':
-				const check = $d( `input[type="radio"][name="${ this.#e.getAttribute('name') }"]`, this.#radioBase )
-					.filter( e => e.checked );
-				if ( !check.length ) return '';
-				ret = check.array[0];
-				return ret.value;
-			case 'checkbox':
-				return that.#e.checked;
-			default:
-				return that.#e.value;
-				break;
-		}
-
-		return '';
-	}
-
-	set val( value: any ){
-		let that = this,
-			type = that.#type,
-			ret: any;
-
-		switch (type){
-			case 'radio':
-				const
-					selection = `input[type="radio"][name="${ this.#e.getAttribute('name') }"]`,
-					radios = $d( selection, this.#radioBase );
-
-				// console.log('set radios', selection, this.#radioBase, radios.array );
-
-				if ( !radios.length ) return;
-
-				if ( value === '' ){ // uncheck all
-					radios.forEach( r => { if (r.checked) r.checked = false } );
-					//console.log('unset all radios', radios.array );
-					return;
-				}
-
-				const setRadioElement = radios.filter( r => r.getAttribute('value') === value );
-
-				if ( !setRadioElement.length ) return;
-
-				// console.log('set this radio', setRadioElement.array );
-
-				(setRadioElement.array[0] as HTMLInputElement).checked = true;
-
-				// console.log('done', setRadioElement.array );
-				return;
-				break;
-			case 'checkbox':
-				that.#e.checked = value;
-				break;
-			default:
-				that.#e.value = value;
-				break;
-		}
-
-		return;
-	}
-
-}
-
-class SelectHandler extends InputBase {
-
-	#e: HTMLSelectElement;
-	#multi: boolean = false;
-
-	constructor( e: HTMLSelectElement ){
-		super( e );
-		this.#e = e;
-		this.#multi = e.type === 'select-multiple';
-	}
-
-	get val(): string[] | string{
-		const
-			that = this,
-			ret: string[] = [];
-
-		// get all options
-		const options = $d( that.#e.querySelectorAll('option') )
-			.filter( o => o.selected )
-			.forEach( o => { if ( o.selected ) ret.push( o.value ) } );
-
-		if ( this.#multi ) return ret;
-		return ret.length ? ret[0] : '';
-	}
-
-	set val( value: string[] | string ){
-		const
-			that = this;
-
-		value = typeof value === 'string' ? [ value ] : value;
-
-		//console.log('set values', value );
-
-		// set all options
-		const options = $d( that.#e.querySelectorAll('option') )
-			.forEach( o => {
-				if ( value.indexOf( o.value ) > -1 ) {
-					o.setAttribute( 'selected', true )
-					o.selected = true;
-				} else {
-					o.removeAttribute( 'selected' )
-					o.selected = false;
-				}
-			});
-
-		/*
-		if (pOption.selected) {
-			if (
-				!pOption.disabled &&
-				(!pOption.parentNode.disabled ||
-					pOption.parentNode.nodeName !==
-						'optgroup')
-			) {
-				var value = pOption.value;
-
-				ret.push(value);
-			}
-		}
-		*/
-		return;
-	}
-
-}
-
-class TextAreaHandler extends InputBase {
-	#e: HTMLTextAreaElement
-	constructor( e: HTMLTextAreaElement ){
-		super(e);
-		this.#e = e;
-	}
-
-	get val(): string{
-		return this.#e.value;
-	}
-
-	set val( value: string ){
-		this.#e.value = value;
-		return;
-	}
-
-}
-
 /*
 selector classes
 */
@@ -303,28 +60,9 @@ class DomSelector{
 			that = this,
 			undefinedTags: Set<any> = new Set();
 
-		// // console.log('DomSelector constructor', ...arguments);
-
 		if ( !selection ) {
 			return that;
 		}
-
-		/* autoloading disabled !
-		if ( selection instanceof Array ){
-			selection.forEach( (select) => {
-				_getElementList( select, element ).forEach( (e) => {
-					if ( e.localName?.indexOf('-') !== -1 || e.getAttribute?.('is') ) _loadRequirements( e );
-					that.#set.add( e );
-				});
-			});
-		} else {
-			_getElementList( selection, element ).forEach( (e) => {
-				if ( e.localName?.indexOf('-') !== -1 || e.getAttribute?.('is') ) _loadRequirements( e );
-				that.#set.add( e );
-			});
-		}
-		*/
-
 	}
 
 	$t( nameSpace?: string ): TSelector {
@@ -652,20 +390,6 @@ class DomSelector{
 		return that;
 	}
 
-	/*
-	load(): DSelector{
-		let that = this;
-
-		if( !that.length ){
-			that.add( document.body );
-		}
-
-		that.forEach( e => _loadRequirements( e ) );
-
-		return that;
-	}
-	*/
-
 	next( selection?: selection, rootNode?: HTMLElement ): DSelector{
 		let
 			that: DomSelector = this,
@@ -805,7 +529,7 @@ class DomSelector{
 		return that;
 	}
 
-	parents( selection?: selection, rootNode?: HTMLElement ): DSelector {
+	ancestors( selection?: selection, rootNode?: HTMLElement ): DSelector {
 		let
 			that: DomSelector = this,
 			set: Set<HTMLElement> = new Set()
@@ -948,95 +672,6 @@ class DomSelector{
 		return that;
 	}
 
-	// INFO:
-	// val(): LooseObject; // no param: get all as LooseObject
-	// val( p1: string ): Array<string> | number | string; // get from input name
-	// val( p1: object ): DomSelector; // set from object
-	// val( p1: string, p2: any ): DomSelector; // set from name and value
-	val( p1?: any, p2?: any ): any {
-
-		if ( !this.length ) return this;
-
-		const
-			that = this
-		;
-
-		let result: any,
-			handlers: LooseObject = getInputHandlers( that.array[0] );
-
-		// work with it
-		if ( !p1 ){ // get all inputs as LooseObject
-			result = Object.assign( {}, handlers );
-			// Object.keys( handlers ).forEach( ( key ) => result[key] = handlers.hasOwnProperty(key) ? handlers[key].val : undefined );
-		} else {
-			if ( isObject(p1) ){ // set inputs from Object
-				Object.assign( handlers, p1 );
-				// Object.keys( p1 ).forEach( ( key ) => !!handlers[key] ? handlers[key].val = p1[key] : false );
-				result = that;
-			} else if ( typeof p1 === 'string' ){
-				if ( p2 === undefined ){ // get a single input
-					result = handlers[p1];
-				} else { // set a single input
-					handlers[p1] = p2;
-					result = that;
-				}
-			}
-		}
-
-		return result;
-	}
-
-	values( values?: LooseObject ): LooseObject {
-		const
-			that = this,
-			holder: LooseObject = {};
-
-		let
-			data: LooseObject = {};
-
-		//console.log( '$d().values()', values );
-
-		if ( !that.length ) {
-			console.warn('no dom selection to search inputs in');
-			return {};
-		}
-
-		let handlers = getInputHandlers( that.array[0] );
-
-		//console.log( 'handlers', Object.keys(handlers), handlers['cb1'] );
-
-		// let values = that.val();
-
-		// console.log( 'values', values );
-
-		Object.keys( handlers ).forEach( (key: string) => {
-			//console.log(key);
-			data[key] = handlers[key];
-		});
-
-		// data = Object.assign( {}, that.val() )
-		//console.log( 'data', that.array[0], data, Object.keys( data ) );
-
-		if ( Object.keys( data ).length === 0 ) {
-			console.warn('no inputs in this dom selection', that.array[0], data );
-		}
-
-		//console.log( '$d val()', data );
-		if (values) {
-			Object
-				.keys( values )
-				.forEach( key => {
-					if ( handlers.hasOwnProperty(key) ) {
-						console.log( 'key found', key );
-						handlers[key] = values[key];
-					}
-				});
-				// .forEach( key => handlers[key] = values[key] )
-		}
-
-		return structuredClone( Object.assign( handlers ) );
-	}
-
 	/*
 	array method mapping
 	*/
@@ -1434,7 +1069,7 @@ class TbSelector{
 		return that;
 	}
 
-	parents( nameSpace?: string ): TSelector {
+	ancestors( nameSpace?: string ): TSelector {
 
 		let
 			that: TbSelector = this,

package/public/src/test/grandparent.css

@@ -0,0 +1,11 @@
+test-grandparent,
+test-parent,
+test-child,
+test-grandchild,
+test-greatgrandchild {
+	display: inline-block;
+	padding: 1px;
+	margin: 1px;
+	border: 1px solid darkslategray;
+	border-radius: 2px;
+}

package/public/src/test/test/child.d.ts

@@ -0,0 +1,2 @@
+export declare const Child: CustomElementConstructor | undefined;
+//# sourceMappingURL=child.d.ts.map

package/public/src/test/test/child.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"child.d.ts","sourceRoot":"","sources":["../../../src/test/test/child.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,KAAK,sCAAsB,CAAC"}

package/public/src/test/test/child.js

@@ -0,0 +1,15 @@
+import { DC, defineCE, getCE } from './../../microcomponents.js';
+import { Grandchild } from './grandchild.js';
+defineCE('test-child', class TestChild extends DC {
+    constructor(target) {
+        super(target);
+    }
+    onConnected() {
+        let that = this;
+        for (let x = 0; x < 10; x++) {
+            that.target.append(new Grandchild());
+        }
+    }
+});
+export const Child = getCE('test-child');
+//# sourceMappingURL=child.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"child.js","sourceRoot":"","sources":["../../../src/test/test/child.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,QAAQ,CACP,YAAY,EAEZ,MAAM,SAAU,SAAQ,EAAE;IACzB,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,UAAW,EAAE,CAAC,CAAC;QACvC,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC"}

package/public/src/test/test/child.ts

@@ -0,0 +1,21 @@
+import { DC, defineCE, getCE } from './../../microcomponents.js';
+import { Grandchild } from './grandchild.js';
+defineCE(
+	'test-child',
+
+	class TestChild extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			for (let x = 0; x < 10; x++) {
+				that.target.append(new Grandchild!());
+			}
+		}
+	}
+);
+
+export const Child = getCE('test-child');

package/public/src/test/test/grandchild.d.ts

@@ -0,0 +1,2 @@
+export declare const Grandchild: CustomElementConstructor | undefined;
+//# sourceMappingURL=grandchild.d.ts.map

package/public/src/test/test/grandchild.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grandchild.d.ts","sourceRoot":"","sources":["../../../src/test/test/grandchild.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,UAAU,sCAA2B,CAAC"}

package/public/src/test/test/grandchild.js

@@ -0,0 +1,15 @@
+import { DC, defineCE, getCE } from '../../microcomponents.js';
+import { Greatgrandchild } from './greatgrandchild.js';
+defineCE('test-grandchild', class TestGrandchild extends DC {
+    constructor(target) {
+        super(target);
+    }
+    onConnected() {
+        let that = this;
+        for (let x = 0; x < 2; x++) {
+            that.target.append(new Greatgrandchild());
+        }
+    }
+});
+export const Grandchild = getCE('test-grandchild');
+//# sourceMappingURL=grandchild.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grandchild.js","sourceRoot":"","sources":["../../../src/test/test/grandchild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,QAAQ,CACP,iBAAiB,EAEjB,MAAM,cAAe,SAAQ,EAAE;IAC9B,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,eAAgB,EAAE,CAAC,CAAC;QAC5C,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC"}

package/public/src/test/test/grandchild.ts

@@ -0,0 +1,21 @@
+import { DC, defineCE, getCE } from '../../microcomponents.js';
+import { Greatgrandchild } from './greatgrandchild.js';
+defineCE(
+	'test-grandchild',
+
+	class TestGrandchild extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			for (let x = 0; x < 2; x++) {
+				that.target.append(new Greatgrandchild!());
+			}
+		}
+	}
+);
+
+export const Grandchild = getCE('test-grandchild');

package/public/src/test/test/grandparent.d.ts

@@ -0,0 +1,2 @@
+export declare const GrandParent: CustomElementConstructor | undefined;
+//# sourceMappingURL=grandparent.d.ts.map

package/public/src/test/test/grandparent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grandparent.d.ts","sourceRoot":"","sources":["../../../src/test/test/grandparent.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,WAAW,sCAA4B,CAAC"}

package/public/src/test/test/grandparent.js

@@ -0,0 +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})()));

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

@@ -0,0 +1 @@
+{"version":3,"file":"grandparent.js","sourceRoot":"","sources":["../../../src/test/test/grandparent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,QAAQ,CACP,kBAAkB,EAElB,MAAM,eAAgB,SAAQ,EAAE;IAC/B,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW,CAAC,EAAc;QACzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,MAAO,EAAE,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;IAED,cAAc,CAAC,EAAc;IAC7B,CAAC;IAED,SAAS,CAAC,EAAc;IACxB,CAAC;IAED,kBAAkB,CAAC,EAAc;IACjC,CAAC;CAED,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC"}

package/public/src/test/test/grandparent.ts

@@ -0,0 +1,29 @@
+import { DC, defineCE, getCE } from '../../microcomponents.js';
+import { Parent } from './parent.js';
+defineCE(
+	'test-grandparent',
+
+	class TestGrandparent extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected(ev:CustomEvent) {
+			for (let x = 0; x < 5; x++) {
+				this.target.append(new Parent!());
+			}
+		}
+
+		onDisconnected(ev:CustomEvent) {
+		}
+
+		onAdopted(ev:CustomEvent) {
+		}
+
+		onAttributeChanged(ev:CustomEvent) {
+		}
+
+	}
+);
+
+export const GrandParent = getCE('test-grandparent');

package/public/src/test/test/greatgrandchild.d.ts

@@ -0,0 +1,2 @@
+export declare const Greatgrandchild: CustomElementConstructor | undefined;
+//# sourceMappingURL=greatgrandchild.d.ts.map

package/public/src/test/test/greatgrandchild.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"greatgrandchild.d.ts","sourceRoot":"","sources":["../../../src/test/test/greatgrandchild.ts"],"names":[],"mappings":"AAyCA,eAAO,MAAM,eAAe,sCAAgC,CAAC"}

package/public/src/test/test/greatgrandchild.js

@@ -0,0 +1,29 @@
+import { DC, defineCE, getCE } from '../../microcomponents.js';
+function random(min, max) {
+    var random = Math.floor(Math.random() * (max - min + 1) + min);
+    return random;
+}
+defineCE('test-greatgrandchild', class TestGreatgrandchild extends DC {
+    constructor(target) {
+        super(target);
+    }
+    onConnected() {
+        let that = this;
+        that.updateStyle();
+    }
+    updateStyle() {
+        var that = this;
+        function randomBorderColor() {
+            return ('rgb(' +
+                random(0, 255) +
+                ',' +
+                random(0, 255) +
+                ',' +
+                random(0, 255) +
+                ')');
+        }
+        that.target.setAttribute('style', 'border-color:' + randomBorderColor());
+    }
+});
+export const Greatgrandchild = getCE('test-greatgrandchild');
+//# sourceMappingURL=greatgrandchild.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"greatgrandchild.js","sourceRoot":"","sources":["../../../src/test/test/greatgrandchild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE/D,SAAS,MAAM,CAAC,GAAW,EAAE,GAAW;IACvC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;IAC/D,OAAO,MAAM,CAAC;AACf,CAAC;AAED,QAAQ,CACP,sBAAsB,EAEtB,MAAM,mBAAoB,SAAQ,EAAE;IACnC,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,SAAS,iBAAiB;YACzB,OAAO,CACN,MAAM;gBACN,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG;gBACH,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG;gBACH,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG,CACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,iBAAiB,EAAE,CAAC,CAAC;IAC1E,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC"}

package/public/src/test/test/greatgrandchild.ts

@@ -0,0 +1,42 @@
+import { DC, defineCE, getCE } from '../../microcomponents.js';
+
+function random(min: number, max: number) {
+	var random = Math.floor(Math.random() * (max - min + 1) + min);
+	return random;
+}
+
+defineCE(
+	'test-greatgrandchild',
+
+	class TestGreatgrandchild extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			that.updateStyle();
+		}
+
+		updateStyle() {
+			var that = this;
+
+			function randomBorderColor() {
+				return (
+					'rgb(' +
+					random(0, 255) +
+					',' +
+					random(0, 255) +
+					',' +
+					random(0, 255) +
+					')'
+				);
+			}
+
+			that.target.setAttribute('style', 'border-color:' + randomBorderColor());
+		}
+	}
+);
+
+export const Greatgrandchild = getCE('test-greatgrandchild');

package/public/src/test/test/parent.d.ts

@@ -0,0 +1,2 @@
+export declare const Parent: CustomElementConstructor | undefined;
+//# sourceMappingURL=parent.d.ts.map

package/public/src/test/test/parent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parent.d.ts","sourceRoot":"","sources":["../../../src/test/test/parent.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,MAAM,sCAAuB,CAAC"}