@twobirds/microcomponents 0.0.82 → 0.0.83

package/public/test/selectors.js

@@ -15,167 +15,6 @@ const words = (classes) => {
     classes = Array.from(classSet);
     return classes;
 };
-const getInputName = (e) => {
-    let ret = e instanceof HTMLInputElement
-        ? 'input'
-        : e instanceof HTMLSelectElement
-            ? 'select'
-            : e instanceof HTMLTextAreaElement
-                ? 'textarea'
-                : '';
-    return ret;
-};
-const getInputHandlers = (e) => {
-    let inputList = $d('input,select,textarea', e).array, handlers = {};
-    inputList.forEach((i) => {
-        const name = i.getAttribute('name') || 'undefined';
-        if (name) {
-            let h;
-            switch (getInputName(i)) {
-                case 'input':
-                    h = new InputHandler(i, e);
-                    Object.defineProperty(handlers, name, {
-                        enumerable: true,
-                        configurable: true,
-                        get: () => { return h.val; },
-                        set: (value) => { h.val = value; }
-                    });
-                    break;
-                case 'select':
-                    h = new SelectHandler(i);
-                    Object.defineProperty(handlers, name, {
-                        enumerable: true,
-                        configurable: true,
-                        get: () => { return h.val; },
-                        set: (value) => { h.val = value; }
-                    });
-                    break;
-                case 'textarea':
-                    h = new TextAreaHandler(i);
-                    Object.defineProperty(handlers, name, {
-                        enumerable: true,
-                        configurable: true,
-                        get: () => { return h.val; },
-                        set: (value) => { h.val = value; }
-                    });
-                    break;
-                default:
-                    console.warn('handler missing:', name, 'for', i);
-                    break;
-            }
-        }
-    });
-    return handlers;
-};
-class InputBase {
-    constructor(e) {
-    }
-}
-class InputHandler extends InputBase {
-    #e;
-    #type;
-    #radioBase;
-    constructor(e, radioBase) {
-        super(e);
-        this.#e = e;
-        this.#type = e.type;
-        this.#radioBase = radioBase;
-    }
-    get val() {
-        let that = this, type = that.#type, ret;
-        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) {
-        let that = this, type = that.#type, ret;
-        switch (type) {
-            case 'radio':
-                const selection = `input[type="radio"][name="${this.#e.getAttribute('name')}"]`, radios = $d(selection, this.#radioBase);
-                if (!radios.length)
-                    return;
-                if (value === '') {
-                    radios.forEach(r => { if (r.checked)
-                        r.checked = false; });
-                    return;
-                }
-                const setRadioElement = radios.filter(r => r.getAttribute('value') === value);
-                if (!setRadioElement.length)
-                    return;
-                setRadioElement.array[0].checked = true;
-                return;
-                break;
-            case 'checkbox':
-                that.#e.checked = value;
-                break;
-            default:
-                that.#e.value = value;
-                break;
-        }
-        return;
-    }
-}
-class SelectHandler extends InputBase {
-    #e;
-    #multi = false;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-        this.#multi = e.type === 'select-multiple';
-    }
-    get val() {
-        const that = this, ret = [];
-        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) {
-        const that = this;
-        value = typeof value === 'string' ? [value] : value;
-        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;
-            }
-        });
-        return;
-    }
-}
-class TextAreaHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        return this.#e.value;
-    }
-    set val(value) {
-        this.#e.value = value;
-        return;
-    }
-}
 class DomSelector {
     #set = new Set();
     get set() {
@@ -473,7 +312,7 @@ class DomSelector {
         }
         return that;
     }
-    parents(selection, rootNode) {
+    ancestors(selection, rootNode) {
         let that = this, set = new Set();
         that.#set.forEach((e) => {
             let current = e;
@@ -560,57 +399,6 @@ class DomSelector {
         });
         return that;
     }
-    val(p1, p2) {
-        if (!this.length)
-            return this;
-        const that = this;
-        let result, handlers = getInputHandlers(that.array[0]);
-        if (!p1) {
-            result = Object.assign({}, handlers);
-        }
-        else {
-            if (isObject(p1)) {
-                Object.assign(handlers, p1);
-                result = that;
-            }
-            else if (typeof p1 === 'string') {
-                if (p2 === undefined) {
-                    result = handlers[p1];
-                }
-                else {
-                    handlers[p1] = p2;
-                    result = that;
-                }
-            }
-        }
-        return result;
-    }
-    values(values) {
-        const that = this, holder = {};
-        let data = {};
-        if (!that.length) {
-            console.warn('no dom selection to search inputs in');
-            return {};
-        }
-        let handlers = getInputHandlers(that.array[0]);
-        Object.keys(handlers).forEach((key) => {
-            data[key] = handlers[key];
-        });
-        if (Object.keys(data).length === 0) {
-            console.warn('no inputs in this dom selection', that.array[0], data);
-        }
-        if (values) {
-            Object
-                .keys(values)
-                .forEach(key => {
-                if (handlers.hasOwnProperty(key)) {
-                    console.log('key found', key);
-                    handlers[key] = values[key];
-                }
-            });
-        }
-        return structuredClone(Object.assign(handlers));
-    }
     at(index) {
         return $d(this.array.at(index));
     }
@@ -851,7 +639,7 @@ class TbSelector {
         that.#set = set;
         return that;
     }
-    parents(nameSpace) {
+    ancestors(nameSpace) {
         let that = this, set = new Set();
         that.#set.forEach((e) => {
             e.parents(nameSpace).forEach((tb) => {

package/public/test/selectors.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.selectors=t():e.selectors=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{$d:()=>f,$t:()=>d});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));var a=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;function i(e,t,r,n=!1,a=!1){let s={once:!1};n&&(s.capture=n),a&&(s.once=a),e.addEventListener(t,r,s)}function o(e,t,r){e.removeEventListener(t,r)}a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>s.add(e))),new Set;const h=e=>{let t=new Set;return e.forEach((e=>{(e=e.trim()).split(" ").forEach((e=>{""!==e&&t.add(e)}))})),Array.from(t)};class c{#e=new Set;get set(){return this.#e}get array(){return Array.from(this.#e)}set set(e){this.#e=e}get length(){return this.#e.size}constructor(e,t=document.body){if(new Set,!e)return this}$t(e){let t=new l;return this.#e.forEach((e=>{e._mc&&Object.values(e._mc).forEach((e=>{t.set.add(e)}))})),e&&t.filter((t=>t.nameSpace===e)),t}add(e,t){let r=this;return f(e,t).forEach((e=>{r.#e.add(e)})),r}addClass(...e){return e=h(e),this.forEach((t=>{t.classList.add(...e)})),this}after(e,t){let r=this,n=f(e,t);return n.length?(n.first().forEach((e=>{r.array.reverse().forEach((t=>{t.after(e)}))})),r):r}append(e,t){let r=this.array[0],n=f(e,t);return r&&n.forEach((e=>{r.append(e)})),this}appendTo(e,t){let r=f(e,t).array[0];return r&&this.forEach((e=>{r.append(e)})),this}attr(e,t){let r=this,n={};return r.length?arguments.length?"string"==typeof e?void 0===t?[...r.set][0].getAttribute(e):null===t?([...r.set].forEach((t=>{t.removeAttribute(e)})),r):("object"==typeof t&&(t=JSON.stringify(t)),[...r.set].forEach((r=>{r.setAttribute(e,t)})),r):"object"==typeof e?([...r.set].forEach((t=>{Object.keys(e).forEach((r=>{f(t).attr(r,e.key)}))})),r):r:(Array.from([...r.set][0].attributes).forEach((e=>{n[e.name]=e.value})),n):r}before(e,t){let r=this,n=f(e,t);return n.length?(n.first().forEach((e=>{r.forEach((t=>{t.before(e)}))})),r):r}children(e,t){let r=this,n=new Set;if(r.#e.forEach((e=>{Array.from(e.children).forEach((e=>{n.add(e)}))})),r=f([...n]),e){let n=f(e,t);r.filter((e=>n.has(e)))}return r}descendants(e,t){let r=this,n=new Set;if(r.#e.forEach((e=>{e.querySelectorAll("*").forEach((e=>{n.add(e)}))})),r=f([...n]),e){let n=f(e,t);r.filter((e=>n.has(e)))}return r}empty(){return this.filter((e=>!1))}first(e,t){let r=this,n=new Set,a=!1;return e&&(a=f(e,t)),r.#e.forEach((e=>{e.parentNode&&n.add(e.parentNode.children[0])})),r=f([...n]),e&&r.filter((e=>a.has(e))),r}has(e){return this.#e.has(e)}hasClass(...e){return e=h(e),this.every((e=>Array.from(e.classList).every((t=>e.contains(t)))))}html(e){let t=this;return e?(t.forEach((t=>{t.parentNode?t.innerHTML=e:(()=>{console.warn("Cannot access the .innerHTML of a  HTMLElement that hasnt been inserted yet",t),console.trace(t,this),console.info("If you called this from inside a Web Component constructor, consider using the %c[connected] event callback!","color: blue;")})()})),t):t.array[0].innerHTML}last(e,t){let r=this,n=new Set;if(r.#e.forEach((e=>{let t=e.parentNode?.children;t&&n.add(Array.from(t).at(-1))})),r=f([...n]),e){let n=f(e,t);r.filter((e=>n.has(e)))}return r}next(e,t){let r=this,n=new Set;if(r.#e.forEach((e=>{let t=e.parentNode?.children;if(t){let r=Array.from(t),a=r.indexOf(e)+1;a<r.length&&n.add(r.at(a))}})),r=f([...n]),e){let n=f(e,t);r.filter((e=>n.has(e)))}return r}normalize(){return this.#e.forEach((e=>{e.normalize()})),this}off(e,t){let r=e.indexOf(" ")>-1?e.split(" "):[e];return this.array.forEach((e=>{r.forEach((function(r){o(e,r,t)}))})),this}on(e,t,r=!1,n=!1){let a=this,s=e.indexOf(" ")>-1?e.split(" ").filter((e=>""!==e)):[e];function o(){o.cb.apply(a,Array.from(arguments))}return o.cb=t,a.forEach((e=>{s.forEach((function(t){i(e,t,o,r,n)}))})),o}one(e,t,r=!1){let n=this,a=e.indexOf(" ")>-1?e.split(" ").filter((e=>""!==e)):[e];function s(){s.cb.apply(n,Array.from(arguments))}return s.cb=t,n.forEach((e=>{a.forEach((function(t){i(e,t,s,r,!0)}))})),s}parent(e,t){let r=this,n=new Set;if(r.#e.forEach((e=>{e.parentNode&&"HTML"!==e.parentNode.tagName&&n.add(e.parentNode)})),r=f([...n]),e){let n=f(e,t);r.filter((e=>n.has(e)))}return r}ancestors(e,t){let r=this,n=new Set;if(r.#e.forEach((e=>{let t=e;for(;t.parentNode&&"HTML"!==t.parentNode.tagName;)t=t.parentNode,n.add(t)})),r=f([...n]),e){let n=f(e,t);r.filter((e=>n.has(e)))}return r}prepend(e,t){let r=this.array[0],n=f(e,t);return r&&n.forEach((e=>{r.prepend(e)})),this}prev(e,t){let r=this,n=new Set;if(r.#e.forEach((e=>{let t=e.parentNode?.children;if(t){let r=Array.from(t),a=r.indexOf(e)-1;a>-1&&n.add(r.at(a))}})),r=f([...n]),e){let n=f(e,t);r.filter((e=>n.has(e)))}return r}removeClass(...e){return e=h(e),this.forEach((t=>{t.classList.remove(...e)})),this}text(e){let t=this;return e?(t.forEach((t=>{t.parentNode?t.innerText=e:(()=>{console.warn("Cannot access the .textContent of a  HTMLElement that hasnt been inserted yet",t),console.trace(t,this),console.info("If you called this from inside a Web Component constructor, consider using the %c[connected] event callback!","color: blue;")})()})),t):t.array[0].innerText??""}toggleClass(...e){return e=h(e),this.forEach((t=>{t.classList.toggle(...e)})),this}trigger(e,t={},r=!1,n=!1,a=!1){let s,i={bubbles:r,cancelable:n,composed:a},o=e.indexOf(" ")>-1?e.split(" "):[e];return this.#e.forEach((e=>{o.forEach((function(r){s=new Event(r,i),s.data=t,e.dispatchEvent(s)}))})),this}at(e){return f(this.array.at(e))}concat(e){let t=this;return(e instanceof c?e.array:e).forEach((e=>{t.#e.add(e)})),t}entries(){return this.array.entries()}every(e,t){return this.array.every(e,t)}filter(e,t){return this.#e=new Set(this.array.filter(e,t)),this}forEach(e,t){return this.array.forEach(e,t),this}includes(e){return-1!==this.array.indexOf(e,0)}indexOf(e,t){return this.array.indexOf(e,t)}map(e,t){return this.array.map(e,t)}pop(){return this.array.pop()}push(...e){return e.forEach((e=>{this.#e.add(e)})),this}shift(){let e=this,t=e.#e.size?e.array[0]:void 0;return t&&e.#e.delete(t),t}slice(e,t){return f(this.array.slice(e,t))}some(e,t){return this.array.some(e,t)}splice(e,t,...r){let n=this.array;return n.splice(e,t,...r),f(n)}}class l{#e=new Set;get set(){return this.#e}get array(){return Array.from(this.#e)}set set(e){this.#e=e}get length(){return this.#e.size}set length(e){}constructor(e,t=document.body){if(!e)return this;f(e,t).forEach((e=>{d(e).forEach((e=>{this.#e.add(e)}))}))}$d(e,t=document.body){let r=new c,n=new Set,a=!!e||!1,s=new Set;return a&&(s=f(e,t).set),this.#e.forEach((e=>{a&&!s.has(e._tg)||n.add(e._tg)})),r.set=n,r}children(e){let t=this,r=new Set;return t.#e.forEach((t=>{t.children(e).forEach((e=>{r.add(e)}))})),t.#e=r,t}descendants(e){let t=this,r=new Set;return t.#e.forEach((t=>{t.descendants(e).forEach((e=>{r.add(e)}))})),t.#e=r,t}first(e){let t=this,r=new Set;return t.#e.forEach((e=>{e.parent().children().$d().first().$t().forEach((e=>{r.add(e)}))})),t.#e=r,e&&t.filter((t=>t.nameSpace=e)),t}has(e){return this.#e.has(e)}last(e){let t=this,r=new Set;return t.#e.forEach((e=>{e.parent().children().$d().last().$t().forEach((e=>{r.add(e)}))})),t.#e=r,e&&t.filter((t=>t.nameSpace=e)),t}next(e){let t=this,r=new Set;return t.#e.forEach((e=>{let t,n=new Set;for(t=e._tg;null!==t.nextElementSibling;)t=t.nextElementSibling,n.add(t);d([...n]).$d().first().$t().forEach((e=>{r.add(e)}))})),t.#e=r,e&&t.filter((t=>t.nameSpace=e)),t}ns(e){return this.filter((t=>t.nameSpace===e))}off(e,t){let r=e.indexOf(" ")>-1?e.split(" ").filter((e=>""!==e)):[e];return this.$d().array.forEach((e=>{r.forEach((function(r){o(e,`[TB]${r}`,t)}))})),this}on(e,t,r=!1){let n=this,a=e.indexOf(" ")>-1?e.split(" ").filter((e=>""!==e)):[e];function s(){s.cb.apply(n,Array.from(arguments))}return s.cb=t,n.forEach((e=>{a.forEach((function(t){i(e._tg,`[TB]${t}`,s,!1,r)}))})),s}one(e,t){let r=this,n=e.indexOf(" ")>-1?e.split(" ").filter((e=>""!==e)):[e];function a(){a.cb.apply(r,Array.from(arguments))}return a.cb=t,r.forEach((e=>{n.forEach((function(t){i(e._tg,`[TB]${t}`,a,!1,!0)}))})),a}parent(e){let t=this,r=new Set;return t.#e.forEach((t=>{t.parent(e).forEach((e=>{r.add(e)}))})),t.#e=r,t}ancestors(e){let t=this,r=new Set;return t.#e.forEach((t=>{t.parents(e).forEach((e=>{r.add(e)}))})),t.#e=r,t}prev(e){let t=this,r=new Set;return t.#e.forEach((e=>{let t,n=new Set;for(t=e._tg;null!==t.previousElementSibling;)t=t.previousElementSibling,n.add(t);d([...n]).$d().last().$t().forEach((e=>{r.add(e)}))})),t.#e=r,e&&t.filter((t=>t.nameSpace=e)),t}trigger(e,t={},r="l"){return this.forEach((n=>{n.trigger(e,t,r)})),this}at(e){return d(this.array.at(e))}concat(e){let t=this;return e.forEach((e=>{t.#e.add(e)})),t}entries(){return this.array.entries()}every(e,t){return this.array.every(e,t)}filter(e,t){return d(this.array.filter(e,t))}forEach(e,t){return this.array.forEach(e,t),this}includes(e){return-1!==this.array.indexOf(e)}indexOf(e,t){return this.array.indexOf(e,t)}map(e,t){return this.array.map(e,t)}pop(){let e=this.array,t=e.pop();return this.#e=new Set(e),t}push(e){return this.#e.add(e),this}shift(){let e=this.array.shift();return this.#e.delete(e),e}slice(e,t){return d(this.array.slice(e,t))}some(e,t){return this.array.some(e,t)}splice(e,t,...r){let n=this.array.splice(e,t,...r);return d(n)}}const f=(e,t=document)=>{let r=new Set;return e instanceof Array?(e.forEach((e=>{f(e,t).forEach((e=>{r.add(e)}))})),new c([...r])):new c(e,t)},d=(e,t=document)=>f(e,t).$t();return t})()));

package/public/test/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/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');