@twobirds/microcomponents 0.0.50 → 0.0.52

package/public/Grandparent.js

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

package/public/TestForm.css

@@ -1,47 +0,0 @@
-legend {
-    display: inherit;
-    margin:  inherit;
-    vertical-align:  inherit;
-}
-
-label {
-    display: inline;
-    margin-top: 5px;
-    margin-left: 5px;
-    vertical-align: top;
-    width: 10em;
-    text-align: right;
-}
-
-label::before {
-    content: ' ';
-    display: block;
-}
-
-form input,
-form select,
-form textarea {
-    margin-left: 5px;
-    margin-top: 0px;
-    display: inline;
-}
-
-form label + textarea {
-    display: inline-block;
-    margin-top: 3px;
-}
-
-form input + label {
-    width: inherit;
-    margin-top: 3px;
-    text-align: left;
-}
-
-body > form {
-    display: block;
-}
-
-form fieldset {
-    border: 1px solid darkslategrey;
-    border-radius: 3px;
-}

package/public/TestForm.html

@@ -1,56 +0,0 @@
-<!-- test form -->
-<fieldset>
-    <legend>Inputs</legend>
-    <label>text</label><input type="text" name="textInput" value="" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}
-    <label>color</label><input type="color" name="colorInput" value="" />
-    <label>date</label><input type="date" name="dateInput" value="" />
-    <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />
-    <label>email</label><input type="email" name="email" value="" />
-    <label>file</label><input type="file" name="fileInput" value="" />
-    <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />
-    <label>month</label><input type="month" name="month" value="" />
-    <label>number</label><input type="number" name="number" value="" />
-    <label>password</label><input type="password" name="passInput" value="" />
-    <label>range</label><input type="range" name="rangeInput" value="" />
-    <label>search</label><input type="search" name="searchInput" value="" />
-    <label>tel</label><input type="tel" name="telInput" value="" />
-    <label>time</label><input type="time" name="timeInput" value="" />
-    <label>url</label><input type="url" name="urlInput" value="" />
-    <label>week</label><input type="week" name="weekInput" value="" />
-</fieldset>
-<fieldset>
-    <legend>Selects</legend>
-        <label>singleSelect</label>
-        <select name="singleSelect">
-            <option disabled selected value> -- select -- </option>
-            <option value="1">Option 1</option>
-            <option value="2">Option 2</option>
-            <option value="3">Option 3</option>
-            <option value="4">Option 4</option>
-        </select>
-        <label>multiSelect</label>
-        <select name="multiSelect" multiple="multiple" type="select-multiple">
-            <option value="1">Option 1</option>
-            <option value="2" selected=true>Option 2</option>
-            <option value="3">Option 3</option>
-            <option value="4" selected=true>Option 4</option>
-        </select>
-</fieldset>
-<fieldset>
-    <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong>{myRadio}</legend>
-    <label>radio1</label><input type="radio" name="myRadio" value="radio1">
-    <label>radio2</label><input type="radio" name="myRadio" value="radio2">
-    <label>radio3</label><input type="radio" name="myRadio" value="radio3">
-</fieldset>
-<fieldset>
-    <legend>Checkboxes</legend>
-    <label>cb1</label><input type="checkbox" name="cb1">
-    <label>cb2</label><input type="checkbox" name="cb2">
-    <label>cb3</label><input type="checkbox" name="cb3">
-    <label>cb4</label><input type="checkbox" name="cb4">
-    <label>cb5</label><input type="checkbox" name="cb5">
-</fieldset>
-<fieldset>
-    <legend>TextArea</legend>
-    <label>textArea</label><textarea name="textArea"></textarea>
-</fieldset>

package/public/TestForm.js

@@ -1,56 +0,0 @@
-test.TestForm = class extends Tb{
-
-    constructor(){
-        super();
-
-        var that = this;
-
-        // model to read data from
-        that.crud = new tb.CRUD({
-            'read': {
-                url: '/test/TestForm.json', // mock data
-                method: 'GET',
-                success: function( pResult ){
-                    var values = JSON.parse( pResult.text );
-                    $('form').values( values ); // set form input values
-                    that.formValues = values; // set values for two way binding
-                },
-                error: function( pResult ){
-                    console.log( 'an error occured', pResult );
-                }
-            }
-        });
-
-        tb.require([
-            '/test/TestForm.html',
-            '/test/TestForm.css'
-        ]).then(
-            that.render.bind(that)
-        );
-
-    }
-
-    // methods
-    render(){
-
-        var that = this,
-            fragment = $( tb.require.get('/test/TestForm.html') );
-
-        // add fragment to DOM
-        $( that.target )
-            .append( fragment );
-
-        // create formValues store
-        that.formValues = {};
-
-        // update DOM on formValues change
-        that.formValues.bind( that.target );
-
-        // update formValues store when form content is changed
-        $('form').values().bind( that.formValues );
-
-        // read data
-        that.crud.read();
-
-    }
-};

package/public/TestForm.json

@@ -1,27 +0,0 @@
-{
-	"textInput":"Hallo Welt",
-	"colorInput":"#eaf8f8",
-	"dateInput":"",
-	"dtlInput":"",
-	"email":"",
-	"hiddenInput":"",
-	"hiddenVal":"",
-	"month":"",
-	"number":"",
-	"passInput":"",
-	"rangeInput":"30",
-	"searchInput":"",
-	"telInput":"",
-	"timeInput":"",
-	"urlInput":"",
-	"weekInput":"",
-	"myRadio":"radio3",
-	"cb1":true,
-	"cb2":false,
-	"cb3":true,
-	"cb4":false,
-	"cb5":false,
-	"singleSelect":"",
-	"multiSelect":["2","4"],
-	"textArea":"This is some example\rtext..."
-}

package/public/Testform.js

@@ -1,149 +0,0 @@
-
-tb.createCustomElement(
-    
-    'test-testform',
-    
-    class extends Tb{
-
-        constructor( pConfig, pTarget ){
-            super();
-
-            let that = this;
-
-            that.target = pTarget;
-
-            that
-                .one(
-                    'connected',
-                    that.connected
-                )
-                .one(
-                    'ready',
-                    that.ready
-                );
-
-        }
-
-        connected(){
-            let that = this;
-
-            tb.require([
-                '/test/TestForm.css'
-            ]).then( (results) => {
-                // add fragment to DOM
-                $( that.target )
-                    .append( that.template );
-            });
-
-        }
-
-        // methods
-        ready(){
-            let that = this;
-
-            // create formValues store
-            that
-                .store('formValues')
-                .bind( that.target );
-
-            // update formValues store when form content is changed
-            that.fields = $('form', that.target)
-                .values()
-                .observe( values => that.formValues = values );
-
-            // read data
-            that.formValues = that.data;
-
-            tb.request({
-                url: '/test/TestForm.json', // mock data
-                method: 'GET',
-                success: function( pResult ){
-                    var values = JSON.parse( pResult.text );
-                    $('form').values( values ); // set form input values
-                    //that.formValues = values; // set values for two way binding
-                },
-                error: function( pResult ){
-                    console.log( 'an error occured', pResult );
-                }
-            });
-            
-        }
-
-        get template(){
-            return `
-                <form>
-                    <!-- sample form to start with -->
-                    <fieldset>
-                        <legend>Inputs</legend>
-                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}
-                        <label>color</label><input type="color" name="colorInput" value="" />
-                        <label>date</label><input type="date" name="dateInput" value="" />
-                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />
-                        <label>email</label><input type="email" name="email" value="" />
-                        <label>file</label><input type="file" name="fileInput" value="" />
-                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />
-                        <label>month</label><input type="month" name="month" value="" />
-                        <label>number</label><input type="number" name="number" value="" />
-                        <label>password</label><input type="password" name="passInput" value="" />
-                        <label>range</label><input type="range" name="rangeInput" value="" />
-                        <label>search</label><input type="search" name="searchInput" value="" />
-                        <label>tel</label><input type="tel" name="telInput" value="" />
-                        <label>time</label><input type="time" name="timeInput" value="" />
-                        <label>url</label><input type="url" name="urlInput" value="" />
-                        <label>week</label><input type="week" name="weekInput" value="" />
-                    </fieldset>
-
-                    <fieldset>
-                        <legend>Selects</legend>
-
-                            <label>singleSelect</label>
-                            <select name="singleSelect">
-                                <option disabled selected value> -- select -- </option>
-                                <option value="1">Option 1</option>
-                                <option value="2">Option 2</option>
-                                <option value="3">Option 3</option>
-                                <option value="4">Option 4</option>
-                            </select>
-
-                            <label>multiSelect</label>
-                            <select name="multiSelect" multiple="multiple" type="select-multiple">
-                                <option value="1">Option 1</option>
-                                <option value="2" selected=true>Option 2</option>
-                                <option value="3">Option 3</option>
-                                <option value="4" selected=true>Option 4</option>
-                            </select>
-
-                    </fieldset>
-
-                    <fieldset>
-                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong>{myRadio}</legend>
-
-                        <label>radio1</label><input type="radio" name="myRadio" value="radio1">
-                        <label>radio2</label><input type="radio" name="myRadio" value="radio2">
-                        <label>radio3</label><input type="radio" name="myRadio" value="radio3">
-
-                    </fieldset>
-
-                    <fieldset>
-                        <legend>Checkboxes</legend>
-                        <label>cb1</label><input type="checkbox" name="cb1">
-                        <label>cb2</label><input type="checkbox" name="cb2">
-                        <label>cb3</label><input type="checkbox" name="cb3">
-                        <label>cb4</label><input type="checkbox" name="cb4">
-                        <label>cb5</label><input type="checkbox" name="cb5">
-
-                    </fieldset>
-
-                    <fieldset>
-                        <legend>TextArea</legend>
-
-                            <label>textArea</label><textarea name="textArea"></textarea>
-
-                    </fieldset>
-
-                </form>
-            `;
-        }
-    }
-
-);