@twobirds/microcomponents 0.0.66 → 0.0.68

package/public/test/McEvent.ts

@@ -0,0 +1,96 @@
+"use strict";
+
+var isBrowser=new Function("try {return this===window;}catch(e){ return false;}");
+
+let nativeEventNames: Set<string> = new Set();
+
+// HTMLElement native event names
+if ( isBrowser() ){
+	Object.keys( HTMLElement.prototype ).filter( key => /^on/.test(key) ).forEach( eventName => nativeEventNames.add( eventName ) );
+}
+
+function isDOM(element: { [key:string]: any } ) {
+	return element && element instanceof HTMLElement;
+}
+
+interface McEvent {
+	data: any;
+	bubble: string;
+}
+
+class McEvent{
+
+	#type: string;
+	#stopped: boolean = false;
+	#immediateStopped: boolean = false;
+
+	constructor( type: string, data: any = {}, bubble: string = 'l' ){
+		// bubble standard = local only, options = any combination of'uld' characters: up to root, local, down
+		this.#type = type;
+		this.data = data;
+		this.bubble = bubble;
+	}
+
+	get type(): string {
+		return this.#type;
+	}
+
+	get stopped(): boolean {
+		return this.#stopped;
+	}
+
+	get immediateStopped(): boolean {
+		return this.#immediateStopped;
+	}
+
+	stopPropagation(){
+		this.#stopped = true;
+	}
+
+	stopImmediatePropagation(){
+		this.stopPropagation();
+		this.#immediateStopped = true;
+	}
+
+}
+
+// get all microcomponents from a list of HTMLElements
+function getMicroComponents( elements: any[], search: string): any[] {
+	let mcValues: any[] = [];
+
+	elements.forEach( e => {
+		if (e) {
+			if (e instanceof HTMLElement) {
+				const _mc = ( e as any )?._mc;
+				if ( !search && _mc ) {
+					mcValues = mcValues.concat(Object.values(( e as any )._mc));
+				}
+				else if ( search && _mc && _mc[search] ) {
+					mcValues.push( _mc[search] );
+				}
+			}
+		}
+	});
+	return mcValues;
+}
+
+// get all ancestor DOM nodes up to the document root
+function traverseNodes(node: { [key:string]: any }, search: string, firstonly = true): any[] {
+	let mcValues: any[] = [];
+	while (node) {
+		if (node._mc) {
+			if (!search) {
+				mcValues = mcValues.concat(Object.values(node._mc));
+			}
+			else if (search && node._mc[search]) {
+				mcValues.push(node._mc[search]);
+			}
+			if (firstonly)
+				return mcValues;
+		}
+		node = node.parentNode;
+	}
+	return mcValues;
+}
+
+export { McEvent };

package/public/test/MicroComponents.svg

@@ -0,0 +1,15 @@
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <title>test</title>
+ <rect fill="transparent" x="0" y="0" width="200" height="200" fill-opacity="1"/>
+ <g style="fill:transparent">
+  <title>first bird</title>
+  <path fill="#18829c" d="
+    m15,160
+    a30,75 45 1 0 160,-150
+    a20,50 225 1 1 -110,100
+    a12,25 45 1 1 60,-50
+    a20,50 225 1 0 -110,100
+    " />
+ </g>
+</svg>

package/public/test/elements.d.ts

@@ -0,0 +1,5 @@
+export declare function defineCE(tagName: string, DefinitionClass: {
+    new (...args: any[]): any;
+}, observedAttributes?: string[]): void;
+export declare function getCE(tagName: string): CustomElementConstructor | undefined;
+//# sourceMappingURL=elements.d.ts.map

package/public/test/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAkCA,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,EAC9C,kBAAkB,GAAE,MAAM,EAAO,QAkCjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}

package/public/test/elements.js

@@ -0,0 +1,48 @@
+'use strict';
+import { DC } from './MC.js';
+import { kebabToPascal } from './helpers.js';
+class CeBaseClass extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        DC.trigger(this, 'Connected');
+    }
+    disconnectedCallback() {
+        DC.trigger(this, 'Disconnected');
+    }
+    adoptedCallback() {
+        DC.trigger(this, 'Adopted');
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        DC.trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+    }
+}
+function createNamedClass(name, ClassBody) {
+    return Object.defineProperty(ClassBody, 'name', { value: name });
+}
+export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
+    if (customElements.get(tagName)) {
+        console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
+        return;
+    }
+    if (!tagName.includes('-')) {
+        throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
+    }
+    let name = kebabToPascal(tagName);
+    customElements.define(tagName, createNamedClass(name, class extends CeBaseClass {
+        instance;
+        constructor(data) {
+            super();
+            let instance = new DefinitionClass(this, data);
+            DC.add(this, name, instance);
+        }
+        static get observedAttributes() {
+            return observedAttributes;
+        }
+    }));
+}
+export function getCE(tagName) {
+    return customElements.get(tagName);
+}
+//# sourceMappingURL=elements.js.map

package/public/test/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAY,SAAQ,WAAW;IACpC;QACC,KAAK,EAAE,CAAC;IACT,CAAC;IAED,iBAAiB;QACf,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,oBAAoB;QAClB,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe;QACb,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAa,EAAE,QAAa;QACjE,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7E,CAAC;CACD;AAED,SAAS,gBAAgB,CACxB,IAAY,EACZ,SAAwC;IAExC,OAAO,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,QAAQ,CACvB,OAAe,EACf,eAA8C,EAC9C,qBAA+B,EAAE;IAEjC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,4BAA4B,OAAO,uBAAuB,CAAC,CAAC;QACzE,OAAO;IACR,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CACd,sEAAsE,CACtE,CAAC;IACH,CAAC;IAED,IAAI,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAElC,cAAc,CAAC,MAAM,CACpB,OAAO,EACP,gBAAgB,CACf,IAAI,EACJ,KAAM,SAAQ,WAAW;QACxB,QAAQ,CAAM;QAEd,YAAY,IAAU;YACrB,KAAK,EAAE,CAAC;YACR,IAAI,QAAQ,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAC/C,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC9B,CAAC;QAED,MAAM,KAAK,kBAAkB;YAC5B,OAAO,kBAAkB,CAAC;QAC3B,CAAC;KACD,CACD,CACD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,OAAe;IACpC,OAAO,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC"}

package/public/test/elements.ts

@@ -0,0 +1,76 @@
+'use strict';
+
+import { DC } from './MC.js';
+import { kebabToPascal } from './helpers.js';
+
+class CeBaseClass extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		(DC as any).trigger(this, 'Connected');
+	}
+
+	disconnectedCallback() {
+		(DC as any).trigger(this, 'Disconnected');
+	}
+
+	adoptedCallback() {
+		(DC as any).trigger(this, 'Adopted');
+	}
+
+	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
+		(DC as any).trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+	}
+}
+
+function createNamedClass(
+	name: string,
+	ClassBody: { new (...args: any[]): any }
+) {
+	return Object.defineProperty(ClassBody, 'name', { value: name });
+}
+
+export function defineCE(
+	tagName: string,
+	DefinitionClass: { new (...args: any[]): any },
+	observedAttributes: string[] = []
+) {
+	if (customElements.get(tagName)) {
+		console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
+		return;
+	}
+
+	if (!tagName.includes('-')) {
+		throw new Error(
+			'createCustomElement: tagName must contain at least one hyphen ("-").'
+		);
+	}
+
+	let name = kebabToPascal(tagName);
+
+	customElements.define(
+		tagName,
+		createNamedClass(
+			name,
+			class extends CeBaseClass {
+				instance: any;
+
+				constructor(data?: any) {
+					super();
+					let instance = new DefinitionClass(this, data);
+					DC.add(this, name, instance);
+				}
+
+				static get observedAttributes() {
+					return observedAttributes;
+				}
+			}
+		)
+	);
+}
+
+export function getCE(tagName: string): CustomElementConstructor | undefined {
+	return customElements.get(tagName);
+}

package/public/test/formValues.d.ts

@@ -0,0 +1,3 @@
+import { LooseObject } from './helpers.js';
+export declare function formValues(targetObject: LooseObject, propertyName: string, dom: HTMLElement | ShadowRoot): void;
+//# sourceMappingURL=formValues.d.ts.map

package/public/test/formValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA0M/D,wBAAgB,UAAU,CACzB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAwB7B"}

package/public/test/formValues.js

@@ -0,0 +1,168 @@
+'use strict';
+import { copyGettersSetters } from './helpers.js';
+import { DC, addListener } from './MC.js';
+import { observe } from './observables.js';
+const getInputName = (e) => {
+    return e.tagName.toLowerCase();
+};
+class InputBase {
+    constructor(e) { }
+}
+class RadioHandler extends InputBase {
+    #e;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    get val() {
+        let ret = new FormData(this.#e.form).get(this.#e.name);
+        return ret;
+    }
+    set val(value) {
+        let arr = [
+            ...this.#e.form.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`),
+        ];
+        arr
+            .filter((e) => e.getAttribute('value') === value)
+            .shift().checked = true;
+    }
+}
+class CheckboxHandler extends InputBase {
+    #e;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    get val() {
+        return this.#e.checked;
+    }
+    set val(value) {
+        this.#e.checked = value;
+    }
+}
+class InputHandler extends InputBase {
+    #e;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    get val() {
+        return this.#e.value;
+    }
+    set val(value) {
+        this.#e.value = value;
+    }
+}
+class SelectHandler extends InputBase {
+    #e;
+    #multi = false;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+        this.#multi = e.multiple;
+    }
+    get val() {
+        const that = this, ret = [];
+        [...that.#e.querySelectorAll('option')]
+            .filter((o) => o.selected)
+            .forEach((o) => {
+            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;
+        [...that.#e.querySelectorAll('option')].forEach((o) => {
+            if (value.indexOf(o.value) > -1) {
+                o.selected = true;
+            }
+            else {
+                o.selected = false;
+            }
+        });
+    }
+}
+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;
+    }
+}
+const getInputHandlers = (e) => {
+    let inputList = [
+        ...(e || document).querySelectorAll('input,select,textarea'),
+    ], handlers = {};
+    inputList.forEach((i) => {
+        const name = i.getAttribute('name');
+        if (name) {
+            let handler = false;
+            switch (getInputName(i)) {
+                case 'input':
+                    switch (i.type) {
+                        case 'radio':
+                            handler = new RadioHandler(i);
+                            break;
+                        case 'checkbox':
+                            handler = new CheckboxHandler(i);
+                            break;
+                        default:
+                            handler = new InputHandler(i);
+                    }
+                    break;
+                case 'select':
+                    handler = new SelectHandler(i);
+                    break;
+                case 'textarea':
+                    handler = new TextAreaHandler(i);
+                    break;
+                default:
+                    console.warn('handler missing:', name, 'for', i.tagName.toLowerCase(), i);
+                    break;
+            }
+            if (handler) {
+                DC.add(i, name, handler);
+                Object.defineProperty(handlers, name, {
+                    enumerable: true,
+                    configurable: true,
+                    get: () => {
+                        return handler.val;
+                    },
+                    set: (value) => {
+                        if (handler.val !== value) {
+                            handler.val = value;
+                        }
+                    },
+                });
+            }
+        }
+    });
+    return handlers;
+};
+export function formValues(targetObject, propertyName, dom) {
+    let handlers = getInputHandlers(dom);
+    targetObject[propertyName] = Object.assign({}, handlers);
+    observe(targetObject, propertyName);
+    copyGettersSetters(handlers, targetObject[propertyName]);
+    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+        addListener(input, 'keyup', (ev) => {
+            targetObject[propertyName].notify();
+        });
+        addListener(input, 'change', (ev) => {
+            targetObject[propertyName].notify();
+        });
+        addListener(input, 'select', (ev) => {
+            targetObject[propertyName].notify();
+        });
+    });
+}
+//# sourceMappingURL=formValues.js.map

package/public/test/formValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formValues.js","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"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"}

package/public/test/formValues.ts

@@ -0,0 +1,233 @@
+'use strict';
+
+import { LooseObject, copyGettersSetters } from './helpers.js';
+import { DC, addListener } from './MC.js';
+import { observe } from './observables.js';
+
+type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+const getInputName = (
+	e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+): string => {
+	return e.tagName.toLowerCase();
+};
+
+abstract class InputBase {
+	constructor(e: inputTypes) {}
+
+	abstract get val(): any;
+
+	abstract set val(value: any);
+}
+
+class RadioHandler extends InputBase {
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
+
+		//console.log('radio[', this.#e.name, '] = "' + ret + '"');
+		return ret as string;
+	}
+
+	set val(value: string) {
+		let arr = [
+			...(this.#e.form as HTMLFormElement).querySelectorAll(
+				`input[type="radio"][name="${this.#e.name}"]`
+			),
+		] as HTMLInputElement[];
+
+		(
+			arr
+				.filter((e) => e.getAttribute('value') === value)
+				.shift() as HTMLInputElement
+		).checked = true;
+	}
+}
+
+class CheckboxHandler extends InputBase {
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): boolean {
+		return this.#e.checked;
+	}
+
+	set val(value: boolean) {
+		this.#e.checked = value;
+	}
+}
+
+class InputHandler extends InputBase {
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		return this.#e.value;
+	}
+
+	set val(value: string) {
+		this.#e.value = value;
+	}
+}
+
+class SelectHandler extends InputBase {
+	#e: HTMLSelectElement;
+	#multi: boolean = false;
+
+	constructor(e: HTMLSelectElement) {
+		super(e);
+		this.#e = e;
+		this.#multi = e.multiple;
+	}
+
+	get val(): string[] | string {
+		const that = this,
+			ret: string[] = [];
+
+		// get all options
+		[...that.#e.querySelectorAll('option')]
+			.filter((o) => o.selected)
+			.forEach((o) => {
+				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;
+
+		// set all options
+		[...that.#e.querySelectorAll('option')].forEach((o) => {
+			if (value.indexOf(o.value) > -1) {
+				o.selected = true;
+			} else {
+				o.selected = false;
+			}
+		});
+	}
+}
+
+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;
+	}
+}
+
+const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
+	let inputList = [
+			...(e || document).querySelectorAll('input,select,textarea'),
+		],
+		handlers: LooseObject = {};
+
+	inputList.forEach((i) => {
+		const name: string | null = (i as inputTypes).getAttribute('name');
+		if (name) {
+			let handler: any = false;
+			switch (getInputName(i as inputTypes)) {
+				case 'input':
+					switch ((i as HTMLInputElement).type) {
+						case 'radio':
+							handler = new RadioHandler(i as HTMLInputElement);
+							break;
+						case 'checkbox':
+							handler = new CheckboxHandler(i as HTMLInputElement);
+							break;
+						default:
+							handler = new InputHandler(i as HTMLInputElement);
+					}
+					break;
+				case 'select':
+					handler = new SelectHandler(i as HTMLSelectElement);
+					break;
+				case 'textarea':
+					handler = new TextAreaHandler(i as HTMLTextAreaElement);
+					break;
+				default:
+					console.warn(
+						'handler missing:',
+						name,
+						'for',
+						i.tagName.toLowerCase(),
+						i
+					);
+					break;
+			}
+
+			if (handler) {
+				DC.add(i, name, handler);
+				Object.defineProperty(handlers, name, {
+					enumerable: true,
+					configurable: true,
+					get: (): any => {
+						return handler.val;
+					},
+					set: (value: any) => {
+						if (handler.val !== value) {
+							handler.val = value;
+						}
+					},
+				});
+			}
+		}
+	});
+
+	return handlers;
+};
+
+export function formValues(
+	targetObject: LooseObject,
+	propertyName: string,
+	dom: HTMLElement | ShadowRoot
+) {
+	let handlers = getInputHandlers(dom);
+
+	targetObject[propertyName] = Object.assign({}, handlers);
+
+	observe(targetObject, propertyName);
+
+	copyGettersSetters(handlers, targetObject[propertyName]);
+
+	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+		addListener(input as inputTypes, 'keyup', (ev: Event) => {
+			//console.log('keyup', ev);
+			targetObject[propertyName].notify();
+		});
+		addListener(input as HTMLElement, 'change', (ev: Event) => {
+			//console.log('change', ev);
+			targetObject[propertyName].notify();
+		});
+		addListener(input as inputTypes, 'select', (ev: Event) => {
+			//console.log('select', ev);
+			targetObject[propertyName].notify();
+		});
+	});
+}
+

package/public/test/grandparent.css

@@ -0,0 +1,13 @@
+test-grandparent,
+test-parent,
+test-child,
+test-grandchild,
+test-greatgrandchild {
+	display: inline-block;
+	padding: 2px;
+	margin: 1px;
+	border: 1px solid darkslategray;
+	border-radius: 2px;
+}
+
+/*# sourceMappingURL=GrandParent.css.map */