@twobirds/microcomponents 0.0.67 → 0.0.68

package/public/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/documentation/formvalues.md

@@ -0,0 +1,26 @@
+# Form Values Module Documentation
+
+This module provides a way to bind form input elements (text, radio, checkbox, select, textarea) to a JavaScript object, enabling two-way data binding and change observation.
+
+## Key Components
+
+### InputBase (Abstract Class)
+- Base class for all input handlers
+- Defines `val` getter/setter interface
+
+### Input Handlers
+- **RadioHandler**: Manages radio button groups
+- **CheckboxHandler**: Handles checkbox state
+- **InputHandler**: For standard text inputs
+- **SelectHandler**: Manages select dropdowns (single/multi-select)
+- **TextAreaHandler**: For textarea elements
+
+### getInputHandlers
+- Scans DOM for form elements
+- Returns object with name-to-handler mappings
+- Automatically creates appropriate handler type
+
+### formValues Function
+Binds form elements to a target object:
+```ts
+formValues(targetObject: LooseObject, propertyName: string, dom: HTMLElement | ShadowRoot)

package/public/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/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/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/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/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/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/helpers.d.ts

@@ -0,0 +1,14 @@
+export interface LooseObject {
+    [key: string | symbol]: any;
+}
+export declare function isNativeObject(value: any): boolean;
+export declare function sortObject(o: LooseObject): LooseObject;
+export declare function flattenObject(o: LooseObject, doSort?: boolean): LooseObject;
+export declare function deepEqual(o1: LooseObject, o2: LooseObject): boolean;
+export declare function nameSpace(ns: string | string[], obj?: LooseObject): any;
+export declare function parse(what: string | Object | any[], parseThis: Object): any;
+export declare function kebabToPascal(str: string): string;
+export declare function debounce(func: Function, milliseconds: number): Function;
+export declare function htmlToElements(html: string): HTMLElement[];
+export declare function copyGettersSetters(source: LooseObject, target: LooseObject): void;
+//# sourceMappingURL=helpers.d.ts.map

package/public/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAElD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,WAAW,GAAG,WAAW,CAatD;AAED,wBAAgB,aAAa,CAC5B,CAAC,EAAE,WAAW,EACd,MAAM,GAAE,OAAc,GACpB,WAAW,CAmBb;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAInE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,WAAgB,GAAG,GAAG,CAW3E;AAED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,OAyCrE;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,GAAG,QAAQ,CASvE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,QAO1E"}

package/public/helpers.ts

@@ -0,0 +1,149 @@
+'use strict';
+
+export interface LooseObject {
+	[key: string | symbol]: any;
+}
+
+export function isNativeObject(value: any): boolean {
+	return value && value['constructor'] && value.constructor === Object;
+}
+
+export function sortObject(o: LooseObject): LooseObject {
+	let result: LooseObject = {},
+		keys = [...Object.keys(o)].sort();
+
+	keys.forEach((key) => {
+		if (isNativeObject(o[key])) {
+			result[key] = sortObject(o[key]);
+		} else {
+			result[key] = o[key];
+		}
+	});
+
+	return result;
+}
+
+export function flattenObject(
+	o: LooseObject,
+	doSort: boolean = true
+): LooseObject {
+	let result: LooseObject = {};
+
+	[...Object.getOwnPropertyNames(o)].forEach((propName) => {
+		if (
+			o[propName] &&
+			o[propName]['constructor'] &&
+			o[propName].constructor === Object
+		) {
+			const temp = flattenObject(o[propName], false);
+			for (const j in temp) {
+				result[propName + '.' + j] = temp[j];
+			}
+		} else {
+			result[propName] = o[propName];
+		}
+	});
+
+	return doSort ? sortObject(result) : result;
+}
+
+export function deepEqual(o1: LooseObject, o2: LooseObject): boolean {
+	return (
+		JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2))
+	);
+}
+
+export function nameSpace(ns: string | string[], obj: LooseObject = {}): any {
+	let nsa = ns.constructor === String ? ns.split('.') : ns;
+
+	if (!obj || !nsa[0] || !obj[nsa[0]]) {
+		console.warn('ns', nsa[0], 'not in', obj);
+		return;
+	}
+	if (obj[nsa[0]].constructor === Object && nsa.length > 1) {
+		return nameSpace((nsa as string[]).splice(1), obj[nsa[0]]);
+	}
+	return obj[nsa[0]];
+}
+
+export function parse(what: string | Object | any[], parseThis: Object) {
+	var args = Array.from(arguments);
+
+	if (args.length > 2) {
+		while (args.length > 1) {
+			args[0] = parse(args[0], args[1]);
+			args.splice(1, 1);
+		}
+		return args[0];
+	}
+
+	if (typeof what === 'string') {
+		what.match(/\{[^\{\}]*\}/g)?.forEach(function (pPropname) {
+			var propname = pPropname.substring(1, pPropname.length - 1),
+				value = nameSpace(propname, parseThis);
+			//console.log(propname, value);
+			if (typeof value !== 'undefined') {
+				what = (what as string).replace(pPropname, value);
+			}
+		});
+	} else if (isNativeObject(what)) {
+		switch (what.constructor) {
+			case Object:
+				Object.keys(what).forEach(function (pKey) {
+					if (what.hasOwnProperty(pKey)) {
+						(what as LooseObject)[pKey] = parse(
+							(what as LooseObject)[pKey],
+							parseThis
+						);
+					}
+				});
+				break;
+			case Array:
+				(what as Array<any>).forEach(function (pValue, pKey, original) {
+					original[pKey] = parse((what as any)[pKey], parseThis);
+				});
+				break;
+		}
+	}
+
+	return what;
+}
+
+export function kebabToPascal(str: string) {
+	return str
+		.split('-') // Split by hyphens
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each part
+		.join(''); // Join without spaces
+}
+
+export function debounce(func: Function, milliseconds: number): Function {
+	let timeout: any;
+	return () => {
+		clearTimeout(timeout);
+
+		timeout = setTimeout(function () {
+			func(...arguments);
+		}, milliseconds);
+	};
+}
+
+export function htmlToElements(html: string): HTMLElement[] {
+	let template = document.createElement('template');
+
+	html = html.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, '<$1$2></$1>'); // replace XHTML closing tags by full closing tags
+
+	template.innerHTML = html;
+
+	template.content.normalize();
+
+	return Array.from(template.content.childNodes) as HTMLElement[];
+}
+
+export function copyGettersSetters(source: LooseObject, target: LooseObject) {
+	const descriptors = Object.getOwnPropertyDescriptors(source);
+	for (const [key, descriptor] of Object.entries(descriptors)) {
+		if ('get' in descriptor || 'set' in descriptor) {
+			Object.defineProperty(target, key, descriptor);
+		}
+	}
+}

package/public/microcomponents.d.ts

@@ -0,0 +1,7 @@
+export * from './helpers.js';
+export * from './MC.js';
+export * from './McEvent.js';
+export * from './elements.js';
+export * from './observables.js';
+export * from './formValues.js';
+//# sourceMappingURL=microcomponents.d.ts.map

package/public/microcomponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AAEjC,cAAc,iBAAiB,CAAC"}

package/public/microcomponents.es3.d.ts

@@ -0,0 +1,2 @@
+declare function findNodesWithMcAttribute(rootNode: any, childrenOnly: any): any[];
+//# sourceMappingURL=microcomponents.es3.d.ts.map

package/public/microcomponents.es3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"microcomponents.es3.d.ts","sourceRoot":"","sources":["../src/microcomponents.es3.js"],"names":[],"mappings":"AAgWA,mFAwBC"}

package/public/microcomponents.js

@@ -4,6 +4,5 @@ export * from './MC.js';
 export * from './McEvent.js';
 export * from './elements.js';
 export * from './observables.js';
-export * from './selectors.js';
 export * from './formValues.js';
 //# sourceMappingURL=microcomponents.js.map

package/public/microcomponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"microcomponents.js","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"microcomponents.js","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AAEjC,cAAc,iBAAiB,CAAC"}