@twobirds/microcomponents 0.0.21 → 0.0.22

package/public/customSelectors.js

@@ -0,0 +1,1088 @@
+import { addListener, removeListener } from './MC.js';
+/*
+helpers
+*/
+const isObject = (value) => {
+    return value != null && typeof value === 'object';
+};
+const words = (classes) => {
+    let classSet = new Set();
+    // read classes into set
+    classes.forEach(c => {
+        c = c.trim();
+        c.split(' ').forEach(e => {
+            if (e !== '') {
+                classSet.add(e);
+            }
+        });
+    });
+    // now we have a sanitized array
+    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 = ( Array.from( e.querySelectorAll('*') ) as HTMLElement[] ).filter( i => isInputElement(i) ),
+    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':
+                    //console.log( i, 'is HTMLInputElement');
+                    h = new InputHandler(i, e); // e = element to search radios in = radioBase
+                    Object.defineProperty(handlers, name, {
+                        enumerable: true,
+                        configurable: true,
+                        get: () => { return h.val; },
+                        set: (value) => { h.val = value; }
+                    });
+                    break;
+                case 'select':
+                    //console.log( i, 'is HTMLSelectElement');
+                    h = new SelectHandler(i);
+                    Object.defineProperty(handlers, name, {
+                        enumerable: true,
+                        configurable: true,
+                        get: () => { return h.val; },
+                        set: (value) => { h.val = value; }
+                    });
+                    break;
+                case 'textarea':
+                    //console.log( i, 'is HTMLTextAreaElement');
+                    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);
+                // 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].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;
+    #multi = false;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+        this.#multi = e.type === 'select-multiple';
+    }
+    get val() {
+        const that = this, ret = [];
+        // 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) {
+        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;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    get val() {
+        return this.#e.value;
+    }
+    set val(value) {
+        this.#e.value = value;
+        return;
+    }
+}
+/*
+selector classes
+*/
+class DomSelector {
+    #set = new Set();
+    get set() {
+        return this.#set;
+    }
+    get array() {
+        return Array.from(this.#set);
+    }
+    set set(set) {
+        this.#set = set;
+        return;
+    }
+    get length() {
+        return this.#set.size;
+    }
+    constructor(selection, element = document.body) {
+        let that = this, undefinedTags = 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) {
+        let result = new TbSelector();
+        this.#set.forEach((e) => {
+            if (e._mc) {
+                Object.values(e._mc).forEach((mc) => {
+                    result.set.add(mc);
+                });
+            }
+        });
+        if (nameSpace) {
+            result.filter(mc => mc.nameSpace === nameSpace);
+        }
+        return result;
+    }
+    add(selection, target) {
+        let that = this;
+        $d(selection, target).forEach(element => {
+            that.#set.add(element);
+        });
+        return that;
+    }
+    addClass(...classes) {
+        // sanitize classes
+        classes = words(classes);
+        // now set those classes
+        this.forEach(element => {
+            element.classList.add(...classes);
+        });
+        return this;
+    }
+    after(selection, target) {
+        let that = this, after = $d(selection, target);
+        ;
+        if (!after.length)
+            return that;
+        after
+            .first()
+            .forEach(element => {
+            that.array.reverse().forEach((e) => {
+                e.after(element);
+            });
+        });
+        return that;
+    }
+    append(selection, target) {
+        let that = this, addTo = that.array['0'], append = $d(selection, target);
+        if (addTo) {
+            append.forEach((e) => {
+                addTo.append(e);
+            });
+        }
+        return that;
+    }
+    appendTo(selection, target) {
+        let that = this, appendTo = $d(selection, target).array['0'];
+        if (appendTo) {
+            that.forEach((e) => {
+                appendTo.append(e);
+            });
+        }
+        return that;
+    }
+    attr(first, second) {
+        let that = this, attributes = {};
+        // if no elements in set -> skip
+        if (!that.length)
+            return that;
+        // if no arguments, return attributes of first in list as hash object
+        if (!arguments.length) {
+            Array.from([...that.set][0].attributes).forEach((attribute) => {
+                attributes[attribute.name] = attribute.value;
+            });
+            return attributes;
+        }
+        // if first is a string
+        //   if no value (second) is given -> return attribute value of first element in node selection
+        //   if value (second) is null -> remove attribute and return this
+        //   else set attribute values and return this
+        if (typeof first === 'string') {
+            // return attributes
+            if (second === undefined) {
+                return [...that.set][0].getAttribute(first);
+            }
+            // remove attribute
+            if (second === null) {
+                [...that.set].forEach((e) => {
+                    e.removeAttribute(first);
+                });
+                return that;
+            }
+            // if attribute value is an object -> convert to json string
+            if (typeof second === 'object') {
+                second = JSON.stringify(second);
+            }
+            // set attribute
+            [...that.set].forEach((e) => {
+                e.setAttribute(first, second);
+            });
+            return that;
+        }
+        // if first is an object set attributes to all nodes
+        if (typeof first === 'object') {
+            [...that.set].forEach((e) => {
+                Object.keys(first).forEach((key) => {
+                    $d(e).attr(key, first.key);
+                });
+            });
+            return that;
+        }
+        return that;
+    }
+    before(selection, target) {
+        let that = this, before = $d(selection, target);
+        ;
+        if (!before.length)
+            return that;
+        before
+            .first()
+            .forEach(element => {
+            that.forEach((e) => {
+                e.before(element);
+            });
+        });
+        return that;
+    }
+    children(selection, rootNode) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            Array.from(e.children).forEach((c) => {
+                set.add(c);
+            });
+        });
+        that = $d([...set]);
+        if (selection) {
+            let compare = $d(selection, rootNode);
+            that.filter((e) => compare.has(e));
+        }
+        return that;
+    }
+    descendants(selection, rootNode) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            e.querySelectorAll('*').forEach((h) => {
+                set.add(h);
+            });
+        });
+        that = $d([...set]);
+        if (selection) {
+            let compare = $d(selection, rootNode);
+            that.filter((e) => compare.has(e));
+        }
+        return that;
+    }
+    empty() {
+        return this.filter((e) => false);
+    }
+    first(selection, rootNode) {
+        let that = this, set = new Set(), compare = false;
+        ;
+        // get compare selection if specified
+        if (selection) {
+            compare = $d(selection, rootNode);
+        }
+        // get compare selection if specified
+        that.#set.forEach((e) => {
+            if (e.parentNode) {
+                set.add(e.parentNode.children[0]);
+            }
+        });
+        // make result
+        that = $d([...set]);
+        // compare if necessay
+        if (selection) {
+            that.filter((e) => compare.has(e));
+        }
+        return that;
+    }
+    has(element) {
+        return this.#set.has(element);
+    }
+    hasClass(...classes) {
+        // sanitize classes
+        classes = words(classes);
+        // now test those classes
+        return this.every(e => {
+            return Array.from(e.classList).every(c => e.contains(c));
+        });
+    }
+    html(html) {
+        let that = this;
+        if (html) {
+            that.forEach((e) => {
+                !e.parentNode
+                    ? (() => {
+                        console.warn('Cannot access the .innerHTML of a  HTMLElement that hasnt been inserted yet', e);
+                        console.trace(e, this);
+                        console.info('If you called this from inside a Web Component constructor, consider using the %c[connected] event callback!', 'color: blue;');
+                    })()
+                    : e.innerHTML = html;
+            });
+            return that;
+        }
+        return that.array[0].innerHTML;
+    }
+    last(selection, rootNode) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            let siblings = e.parentNode?.children;
+            if (siblings) {
+                set.add(Array.from(siblings).at(-1));
+            }
+        });
+        that = $d([...set]);
+        if (selection) {
+            let compare = $d(selection, rootNode);
+            that.filter((e) => compare.has(e));
+        }
+        return that;
+    }
+    /*
+    load(): DSelector{
+        let that = this;
+
+        if( !that.length ){
+            that.add( document.body );
+        }
+
+        that.forEach( e => _loadRequirements( e ) );
+
+        return that;
+    }
+    */
+    next(selection, rootNode) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            let siblings = e.parentNode?.children;
+            if (siblings) {
+                let arr = Array.from(siblings), pos = arr.indexOf(e) + 1;
+                if (pos < arr.length) {
+                    set.add(arr.at(pos));
+                }
+            }
+        });
+        that = $d([...set]);
+        if (selection) {
+            let compare = $d(selection, rootNode);
+            that.filter((e) => compare.has(e));
+        }
+        return that;
+    }
+    normalize() {
+        let that = this;
+        that.#set.forEach((e) => { e.normalize(); });
+        return that;
+    }
+    off(eventName, cb) {
+        let that = this, eventNames = eventName.indexOf(' ') > -1
+            ? eventName.split(' ')
+            : [eventName];
+        // remove handler
+        that.array.forEach((e) => {
+            eventNames.forEach(function (n) {
+                removeListener(e, n, cb);
+            });
+        });
+        return that;
+    }
+    on(eventName, cb, capture = false, once = false) {
+        let that = this, eventNames = eventName.indexOf(' ') > -1
+            ? eventName.split(' ').filter((s) => s !== '')
+            : [eventName];
+        function wrapper() { wrapper.cb.apply(that, Array.from(arguments)); }
+        ;
+        wrapper.cb = cb;
+        // attach handler
+        that.forEach((e) => {
+            eventNames.forEach(function (n) {
+                addListener(e, n, wrapper, capture, once);
+            });
+        });
+        return wrapper;
+    }
+    one(eventName, cb, capture = false) {
+        let that = this, eventNames = eventName.indexOf(' ') > -1
+            ? eventName.split(' ').filter((s) => s !== '')
+            : [eventName];
+        function wrapper() { wrapper.cb.apply(that, Array.from(arguments)); }
+        ;
+        wrapper.cb = cb;
+        // attach handler
+        that.forEach((e) => {
+            eventNames.forEach(function (n) {
+                addListener(e, n, wrapper, capture, true);
+            });
+        });
+        return wrapper;
+    }
+    parent(selection, rootNode) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            if (e.parentNode && e.parentNode.tagName !== 'HTML') {
+                set.add(e.parentNode);
+            }
+        });
+        that = $d([...set]);
+        if (selection) {
+            let compare = $d(selection, rootNode);
+            that.filter((e) => compare.has(e));
+        }
+        return that;
+    }
+    parents(selection, rootNode) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            let current = e;
+            while (current.parentNode && current.parentNode.tagName !== 'HTML') {
+                current = current.parentNode;
+                set.add(current);
+            }
+        });
+        that = $d([...set]);
+        if (selection) {
+            let compare = $d(selection, rootNode);
+            that.filter((e) => compare.has(e));
+        }
+        return that;
+    }
+    prepend(selection, target) {
+        let that = this, addTo = that.array['0'], prepend = $d(selection, target);
+        if (addTo) {
+            prepend.forEach((e) => {
+                addTo.prepend(e);
+            });
+        }
+        return that;
+    }
+    prev(selection, rootNode) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            let siblings = e.parentNode?.children;
+            if (siblings) {
+                let arr = Array.from(siblings), pos = arr.indexOf(e) - 1;
+                if (pos > -1) {
+                    set.add(arr.at(pos));
+                }
+            }
+        });
+        that = $d([...set]);
+        if (selection) {
+            let compare = $d(selection, rootNode);
+            that.filter((e) => compare.has(e));
+        }
+        return that;
+    }
+    removeClass(...classes) {
+        // sanitize classes
+        classes = words(classes);
+        // now set those classes
+        this.forEach(element => {
+            element.classList.remove(...classes);
+        });
+        return this;
+    }
+    text(text) {
+        let that = this;
+        if (text) {
+            that.forEach((e) => {
+                !e.parentNode
+                    ? (() => {
+                        console.warn('Cannot access the .textContent of a  HTMLElement that hasnt been inserted yet', e);
+                        console.trace(e, this);
+                        console.info('If you called this from inside a Web Component constructor, consider using the %c[connected] event callback!', 'color: blue;');
+                    })()
+                    : e.innerText = text;
+            });
+            return that;
+        }
+        let t = that.array[0].innerText;
+        return t ?? '';
+    }
+    toggleClass(...classes) {
+        // sanitize classes
+        classes = words(classes);
+        // now set those classes
+        this.forEach(element => {
+            element.classList.toggle(...classes);
+        });
+        return this;
+    }
+    trigger(eventName, data = {}, bubbles = false, cancelable = false, composed = false) {
+        let that = this, ev, options = { bubbles, cancelable, composed }, eventNames = eventName.indexOf(' ') > -1
+            ? eventName.split(' ')
+            : [eventName];
+        that.#set.forEach((e) => {
+            eventNames.forEach(function (n) {
+                // console.log()
+                ev = new Event(n, options);
+                ev.data = data;
+                e.dispatchEvent(ev);
+            });
+        });
+        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, p2) {
+        if (!this.length)
+            return this;
+        const that = this;
+        let result, handlers = 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) {
+        const that = this, holder = {};
+        let data = {};
+        //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) => {
+            //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
+    */
+    at(index) {
+        return $d(this.array.at(index));
+    }
+    concat(items) {
+        let that = this, arr = items instanceof DomSelector
+            ? items.array
+            : items;
+        arr.forEach((e) => {
+            that.#set.add(e);
+        });
+        return that;
+    }
+    entries() {
+        return this.array.entries();
+    }
+    every(predicate, thisArg) {
+        return this.array.every(predicate, thisArg);
+    }
+    filter(predicate, thisArg) {
+        this.#set = new Set(this.array.filter(predicate, thisArg));
+        return this;
+    }
+    forEach(predicate, thisArg) {
+        this.array.forEach(predicate, thisArg);
+        return this;
+    }
+    includes(item) {
+        return this.array.indexOf(item, 0) !== -1;
+    }
+    indexOf(item, start) {
+        return this.array.indexOf(item, start);
+    }
+    map(predicate, thisArg) {
+        return this.array.map(predicate, thisArg);
+    }
+    pop() {
+        return this.array.pop();
+    }
+    push(...items) {
+        items.forEach((item) => {
+            this.#set.add(item);
+        });
+        return this;
+    }
+    shift() {
+        let that = this, element = that.#set.size ? that.array[0] : undefined;
+        if (element) {
+            that.#set.delete(element);
+        }
+        return element;
+    }
+    slice(start, end) {
+        return $d(this.array.slice(start, end));
+    }
+    some(predicate, thisArg) {
+        return this.array.some(predicate, thisArg);
+    }
+    splice(start, deleteCount, ...items) {
+        let that = this, arr = that.array;
+        arr.splice(start, deleteCount, ...items);
+        return $d(arr);
+    }
+}
+;
+class TbSelector {
+    #set = new Set();
+    get set() {
+        return this.#set;
+    }
+    get array() {
+        return Array.from(this.#set);
+    }
+    set set(set) {
+        this.#set = set;
+        return;
+    }
+    get length() {
+        return this.#set.size;
+    }
+    set length(value) {
+        //ignore
+    }
+    constructor(selection, element = document.body) {
+        if (!selection) {
+            return this;
+        }
+        $d(selection, element).forEach((e) => {
+            $t(e).forEach((t) => {
+                this.#set.add(t);
+            });
+        });
+    }
+    $d(selection, element = document.body) {
+        let result = new DomSelector(), set = new Set(), compare = !!selection || false, compareSelection = new Set();
+        if (compare) {
+            compareSelection = $d(selection, element).set;
+        }
+        this.#set.forEach((e) => {
+            if (!compare || compareSelection.has(e._tg)) {
+                set.add(e._tg);
+            }
+        });
+        result.set = set;
+        return result;
+    }
+    children(nameSpace) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            e.children(nameSpace).forEach((tb) => {
+                set.add(tb);
+            });
+        });
+        that.#set = set;
+        return that;
+    }
+    descendants(nameSpace) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            e.descendants(nameSpace).forEach((tb) => {
+                set.add(tb);
+            });
+        });
+        that.#set = set;
+        return that;
+    }
+    first(nameSpace) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            e
+                .parent()
+                .children()
+                .$d()
+                .first()
+                .$t()
+                .forEach((tb) => {
+                set.add(tb);
+            });
+        });
+        that.#set = set;
+        if (nameSpace) {
+            that.filter((tb) => tb.nameSpace = nameSpace);
+        }
+        return that;
+    }
+    has(element) {
+        return this.#set.has(element);
+    }
+    last(nameSpace) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            e
+                .parent()
+                .children()
+                .$d()
+                .last()
+                .$t()
+                .forEach((tb) => {
+                set.add(tb);
+            });
+        });
+        that.#set = set;
+        if (nameSpace) {
+            that.filter((e) => e.nameSpace = nameSpace);
+        }
+        return that;
+    }
+    next(nameSpace) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            let elements = new Set(), element;
+            element = e._tg;
+            while (element.nextElementSibling !== null) {
+                element = element.nextElementSibling;
+                elements.add(element);
+            }
+            $t([...elements])
+                .$d()
+                .first()
+                .$t()
+                .forEach((tb) => {
+                set.add(tb);
+            });
+        });
+        that.#set = set;
+        if (nameSpace) {
+            that.filter((e) => e.nameSpace = nameSpace);
+        }
+        return that;
+    }
+    ns(nameSpace) {
+        return this.filter((tb) => tb.nameSpace === nameSpace);
+    }
+    off(name, cb) {
+        let that = this, eventNames = name.indexOf(' ') > -1
+            ? name.split(' ').filter((s) => s !== '')
+            : [name];
+        // remove handlers
+        that.$d().array.forEach((e) => {
+            eventNames.forEach(function (n) {
+                // console.log('Tb Selector remove event', `[TB]${n}`, e, cb );
+                removeListener(e, `[TB]${n}`, cb);
+            });
+        });
+        return that;
+    }
+    on(name, cb, once = false) {
+        let that = this, eventNames = name.indexOf(' ') > -1
+            ? name.split(' ').filter((s) => s !== '')
+            : [name];
+        function wrapper() { wrapper.cb.apply(that, Array.from(arguments)); }
+        ;
+        wrapper.cb = cb;
+        // attach handler
+        that.forEach((tb) => {
+            eventNames.forEach(function (n) {
+                addListener(tb._tg, `[TB]${n}`, wrapper, false, once);
+            });
+        });
+        return wrapper;
+    }
+    one(name, cb) {
+        let that = this, eventNames = name.indexOf(' ') > -1
+            ? name.split(' ').filter((s) => s !== '')
+            : [name];
+        function wrapper() { wrapper.cb.apply(that, Array.from(arguments)); }
+        ;
+        wrapper.cb = cb;
+        // attach handler
+        that.forEach((tb) => {
+            eventNames.forEach(function (n) {
+                addListener(tb._tg, `[TB]${n}`, wrapper, false, true);
+            });
+        });
+        return wrapper;
+    }
+    parent(nameSpace) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            e.parent(nameSpace).forEach((tb) => {
+                set.add(tb);
+            });
+        });
+        that.#set = set;
+        return that;
+    }
+    parents(nameSpace) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            e.parents(nameSpace).forEach((tb) => {
+                set.add(tb);
+            });
+        });
+        that.#set = set;
+        return that;
+    }
+    prev(nameSpace) {
+        let that = this, set = new Set();
+        that.#set.forEach((e) => {
+            let elements = new Set(), element;
+            element = e._tg;
+            while (element.previousElementSibling !== null) {
+                element = element.previousElementSibling;
+                elements.add(element);
+            }
+            $t([...elements])
+                .$d()
+                .last()
+                .$t()
+                .forEach((tb) => {
+                set.add(tb);
+            });
+        });
+        that.#set = set;
+        if (nameSpace) {
+            that.filter((e) => e.nameSpace = nameSpace);
+        }
+        return that;
+    }
+    trigger(ev, data = {}, bubble = 'l') {
+        let that = this;
+        that.forEach((tb) => {
+            tb.trigger(ev, data, bubble);
+        });
+        return that;
+    }
+    /*
+    array method mapping
+    */
+    at(index) {
+        return $t(this.array.at(index));
+    }
+    concat(items) {
+        let that = this;
+        items.forEach((tb) => {
+            that.#set.add(tb);
+        });
+        return that;
+    }
+    entries() {
+        return this.array.entries();
+    }
+    every(predicate, thisArg) {
+        return this.array.every(predicate, thisArg);
+    }
+    filter(predicate, thisArg) {
+        return $t(this.array.filter(predicate, thisArg));
+    }
+    forEach(predicate, thisArg) {
+        let that = this;
+        that.array.forEach(predicate, thisArg);
+        return that;
+    }
+    includes(item) {
+        return this.array.indexOf(item) !== -1;
+    }
+    indexOf(item, start) {
+        return this.array.indexOf(item, start);
+    }
+    map(predicate, thisArg) {
+        return this.array.map(predicate, thisArg);
+    }
+    pop() {
+        let that = this, arr = that.array, result = arr.pop();
+        that.#set = new Set(arr);
+        return result;
+    }
+    push(item) {
+        let that = this;
+        that.#set.add(item);
+        return that;
+    }
+    shift() {
+        let that = this, first = this.array.shift();
+        that.#set.delete(first);
+        return first;
+    }
+    slice(start, end) {
+        return $t(this.array.slice(start, end));
+    }
+    some(predicate, thisArg) {
+        return this.array.some(predicate, thisArg);
+    }
+    splice(start, deleteCount, ...items) {
+        let that = this, arr = that.array, result = arr.splice(start, deleteCount, ...items);
+        return $t(result);
+    }
+}
+;
+export const $d = (selection, element = document) => {
+    let set = new Set();
+    if (selection instanceof Array) {
+        selection.forEach(value => {
+            $d(value, element).forEach(n => {
+                set.add(n);
+            });
+        });
+        return new DomSelector([...set]);
+    }
+    else {
+        return new DomSelector(selection, element);
+    }
+};
+export const $t = (selection, element = document) => {
+    return $d(selection, element).$t();
+};