@twobirds/microcomponents 0.1.19 → 0.1.21

package/dist/formValues.ts

@@ -1,31 +1,65 @@
-'use strict';
-
-import { LooseObject, copyGettersSetters } from './helpers.js';
-import { DC, on } from './MC.js';
+import { DC } from './MC.js';
+import { copyGettersSetters, LooseObject } from './helpers.js';
 import { observe } from './observables.js';
 
+/**
+Union type for form input elements.
+*/
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
+/**
+Extracts the lowercase tag name of an element (e.g., 'input', 'select', 'textarea').
+@param e - The HTML element to extract the tag name from.
+@returns The lowercase tag name string.
+*/
 const getInputName = (e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): string => {
 	return e.tagName.toLowerCase();
 };
 
+/**
+Abstract base class for form input value handlers.
+Defines the interface that all handler classes must implement.
+*/
 abstract class InputBase {
+	/**
+	Creates a new InputBase instance.
+	@param e - The HTML element being handled (input, select, or textarea).
+	*/
 	constructor(e: inputTypes) {}
 
+	/**
+	Gets the current value of the form control.
+	@returns The value in an appropriate type for the control.
+	*/
 	abstract get val(): any;
 
+	/**
+	Sets the value of the form control.
+	@param value - The new value to assign (type depends on control).
+	*/
 	abstract set val(value: any);
 }
 
+/**
+Handler class specifically for radio button groups.
+Provides synchronized access to the selected value in a group of related radio buttons.
+*/
 class RadioHandler extends InputBase {
 	#e: HTMLInputElement;
 
+	/**
+	Creates a new RadioHandler instance.
+	@param e - The first radio button element in the group (used to determine name and form scope).
+	*/
 	constructor(e: HTMLInputElement) {
 		super(e);
 		this.#e = e;
 	}
 
+	/**
+	Gets the currently selected value of the radio button group using FormData API.
+	@returns The string value of the selected radio button, or undefined if none is selected.
+	*/
 	get val(): string {
 		let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
 
@@ -33,6 +67,11 @@ class RadioHandler extends InputBase {
 		return ret as string;
 	}
 
+	/**
+	Sets the selected radio button by value.
+	Finds and checks the first radio input matching the specified value within the same group.
+	@param value - The value to match against radio inputs in this group.
+	*/
 	set val(value: string) {
 		let arr = [
 			...(this.#e.form as HTMLFormElement).querySelectorAll(
@@ -45,56 +84,100 @@ class RadioHandler extends InputBase {
 	}
 }
 
+/**
+ * Handler class for checkbhox inputs.
+ * Provides synchronized get/set access to the checked state of a single checkbox.
+ */
 class CheckboxHandler extends InputBase {
 	#e: HTMLInputElement;
 
+	/**
+	Creates a new CheckboxHandler instance.
+	@param e - The checkbox element to handle.
+	*/
 	constructor(e: HTMLInputElement) {
 		super(e);
 		this.#e = e;
 	}
 
+	/**
+	Gets the checked state of the checkbox.
+	@returns True if the checkbox is checked, false otherwise.
+	*/
 	get val(): boolean {
 		return this.#e.checked;
 	}
 
+	/**
+	Sets the checked state of the checkbox.
+	@param value - The boolean value to assign as the new checked state.
+	*/
 	set val(value: boolean) {
 		this.#e.checked = value;
 	}
 }
 
+/**
+Handler class for standard single-line input fields (text, password, email, etc.).
+Provides synchronized get/set access to the value of an input field.
+*/
 class InputHandler extends InputBase {
 	#e: HTMLInputElement;
 
+	/**
+	 * Creates a new InputHandler instance.
+	 * @param e - The HTML input element to handle.
+	 */
 	constructor(e: HTMLInputElement) {
 		super(e);
 		this.#e = e;
 	}
 
+	/**
+	 * Gets the current value of the input field.
+	 * @returns The string content of the input element.
+	 */
 	get val(): string {
 		return this.#e.value;
 	}
 
+	/**
+	 * Sets the value of the input field.
+	 * @param value - The new string value for the input element.
+	 */
 	set val(value: string) {
 		this.#e.value = value;
 	}
 }
 
+/**
+Handler class for select dropdown elements, supporting both single and multiple selection modes.
+Provides synchronized get/set access to selected option values.
+*/
 class SelectHandler extends InputBase {
 	#e: HTMLSelectElement;
 	#multi: boolean = false;
 
+	/**
+	 * Creates a new SelectHandler instance.
+	 * @param e - The select element to handle.
+	 */
 	constructor(e: HTMLSelectElement) {
 		super(e);
 		this.#e = e;
 		this.#multi = e.multiple;
 	}
 
+	/**
+	 * Gets the currently selected option value(s).
+	 * For single selection, returns a string. For multiple selection, returns an array of strings.
+	 * @returns A string or array of strings representing selected values.
+	 */
 	get val(): string[] | string {
-		const that = this,
-			ret: string[] = [];
+		const ret: string[] = [];
 
 		// get all options
-		[...that.#e.querySelectorAll('option')]
+		[...this.#e.querySelectorAll('option')]
 			.filter((o) => o.selected)
 			.forEach((o) => {
 				ret.push(o.value);
@@ -104,13 +187,15 @@ class SelectHandler extends InputBase {
 		return ret.length ? ret[0] : '';
 	}
 
+	/**
+	 * Sets the selected option(s) by value.
+	 * @param value - A string or array of strings representing values to select.
+	 */
 	set val(value: string[] | string) {
-		const that = this;
-
 		value = typeof value === 'string' ? [value] : value;
 
 		// set all options
-		[...that.#e.querySelectorAll('option')].forEach((o) => {
+		[...this.#e.querySelectorAll('option')].forEach((o) => {
 			if (value.indexOf(o.value) > -1) {
 				o.selected = true;
 			} else {
@@ -120,22 +205,47 @@ class SelectHandler extends InputBase {
 	}
 }
 
+/**
+Handler class for textarea elements.
+Provides synchronized get/set access to the multi-line text content of a textarea.
+*/
 class TextAreaHandler extends InputBase {
 	#e: HTMLTextAreaElement;
+
+	/**
+	 * Creates a new TextAreaHandler instance.
+	 * @param e - The textarea element to handle.
+	 */
 	constructor(e: HTMLTextAreaElement) {
 		super(e);
 		this.#e = e;
 	}
 
+	/**
+	 * Gets the current value of the textarea (defaults to empty string if null/undefined).
+	 * @returns The string content of the textarea element.
+	 */
 	get val(): string {
 		return this.#e.value || '';
 	}
 
+	/**
+	 * Sets the value of the textarea.
+	 * @param value - The new string value for the textarea element.
+	 */
 	set val(value: string) {
 		this.#e.value = value;
 	}
 }
 
+/**
+Collects all form controls within a given DOM scope and creates handler objects
+that provide synchronized get/set access to their values.
+
+@param e - Optional root DOM element or shadow root to search within; defaults to document if omitted.
+@returns An object where each key is the name attribute of an input, select, or textarea,
+         and each value is a proxy-like accessor object with `val` getter/setter methods.
+*/
 const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 	let inputList = [...(e || document).querySelectorAll('input,select,textarea')],
 		handlers: LooseObject = {};
@@ -189,6 +299,54 @@ const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 	return handlers;
 };
 
+/**
+Attaches a form-values observable to a target object property, allowing two-way binding
+between the DOM form controls and the object's state.
+
+@param targetObject - The object to which the form values will be attached as an observable.
+@param propertyName - The name of the property on the target object that will hold the form data.
+@param dom - The DOM element or shadow root (typically a form) whose inputs should be observed and bound.
+
+@example
+HTML
+```html
+<!-- HTML Form -->
+<form id="myForm">
+  <input type="text" name="username" value="">
+  <select name="role">
+    <option value="admin">Admin</option>
+    <option value="user">User</option>
+  </select>
+  <textarea name="bio"></textarea>
+  <input type="checkbox" name="active">
+  <input type="radio" name="gender" value="male"> Male
+  <input type="radio" name="gender" value="female"> Female
+</form>
+```
+Javascript
+```typescript
+import { formValues } from './formValues.js';
+
+const state = {};
+
+// Bind the form to state.formData
+formValues(state, 'formData', document.getElementById('myForm'));
+
+// Read values from the form
+console.log(state.formData.username);  // string
+console.log(state.formData.role);      // "admin" or "user"
+console.log(state.formData.bio);       // string
+console.log(state.formData.active);    // boolean
+console.log(state.formData.gender);    // "male" or "female"
+
+// Write values to the form (updates DOM automatically)
+state.formData.username = 'john_doe';
+state.formData.role = 'user';
+state.formData.bio = 'Hello world!';
+state.formData.active = true;
+state.formData.gender = 'male';
+```
+ */
 export function formValues(
 	targetObject: LooseObject,
 	propertyName: string,

package/dist/helpers.d.ts

@@ -0,0 +1,15 @@
+export declare function isBrowser(): boolean;
+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/dist/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAaA,wBAAgB,SAAS,YAExB;AAKD,MAAM,WAAW,WAAW;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC5B;AAOD,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAElD;AAOD,wBAAgB,UAAU,CAAC,CAAC,EAAE,WAAW,GAAG,WAAW,CAatD;AASD,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,GAAE,OAAc,GAAG,WAAW,CAgBjF;AAQD,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAEnE;AAQD,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,WAAgB,GAAG,GAAG,CAW3E;AAUD,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,OAsCrE;AAQD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAUD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,GAAG,QAAQ,CASvE;AAQD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAQD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,QAO1E"}

package/dist/helpers.js

@@ -0,0 +1,113 @@
+export function isBrowser() {
+    return window ? true : false;
+}
+export function isNativeObject(value) {
+    return value && value['constructor'] && value.constructor === Object;
+}
+export function sortObject(o) {
+    let result = {}, 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, doSort = true) {
+    let result = {};
+    [...Object.getOwnPropertyNames(o)].forEach((propName) => {
+        if (o[propName] instanceof Object) {
+            const temp = flattenObject(o[propName], false);
+            result[propName] = {};
+            for (const j in temp) {
+                result[propName + '.' + j] = temp[j];
+            }
+        }
+        else {
+            result[propName] = o[propName];
+        }
+    });
+    return doSort ? sortObject(result) : result;
+}
+export function deepEqual(o1, o2) {
+    return JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2));
+}
+export function nameSpace(ns, obj = {}) {
+    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.splice(1), obj[nsa[0]]);
+    }
+    return obj[nsa[0]];
+}
+export function parse(what, parseThis) {
+    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);
+            if (typeof value !== 'undefined') {
+                what = what.replace(pPropname, value);
+            }
+        });
+    }
+    else if (isNativeObject(what)) {
+        switch (what.constructor) {
+            case Object:
+                Object.keys(what).forEach(function (pKey) {
+                    if (what.hasOwnProperty(pKey)) {
+                        what[pKey] = parse(what[pKey], parseThis);
+                    }
+                });
+                break;
+            case Array:
+                what.forEach(function (pValue, pKey, original) {
+                    original[pKey] = parse(what[pKey], parseThis);
+                });
+                break;
+        }
+    }
+    return what;
+}
+export function kebabToPascal(str) {
+    return str
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}
+export function debounce(func, milliseconds) {
+    let timeout;
+    return () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(function () {
+            func(...arguments);
+        }, milliseconds);
+    };
+}
+export function htmlToElements(html) {
+    let template = document.createElement('template');
+    html = html.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, '<$1$2></$1>');
+    template.innerHTML = html;
+    template.content.normalize();
+    return Array.from(template.content.childNodes);
+}
+export function copyGettersSetters(source, target) {
+    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/dist/helpers.ts

@@ -1,13 +1,41 @@
-'use strict';
+/**
+ * Determines whether the current runtime environment is a web browser.
+ *
+ * This function works by attempting to access `this` within an anonymous function
+ * and checking if it refers to the global `window` object. It returns `true`
+ * when executed in a browser context, and `false` otherwise (e.g., Node.js).
+ *
+ * Note: While modern environments typically provide more reliable detection mechanisms,
+ * this fallback remains compatible across older runtimes where other detection techniques
+ * may be unreliable.
+ *
+ * @returns {boolean} `true` if the code is running in a browser environment, `false` otherwise.
+ */
+export function isBrowser() {
+	return window ? true : false;
+}
 
+/**
+ * Interface for objects that can have string or symbol keys with any type of values.
+ */
 export interface LooseObject {
 	[key: string | symbol]: any;
 }
 
+/**
+ * Checks if a value is a native JavaScript object (created via {} or new Object()).
+ * @param value - The value to check.
+ * @returns True if the value is a plain object, false otherwise.
+ */
 export function isNativeObject(value: any): boolean {
 	return value && value['constructor'] && value.constructor === Object;
 }
 
+/**
+ * Recursively sorts all keys in an object alphabetically, preserving nested structure.
+ * @param o - The object to sort.
+ * @returns A new object with sorted keys at all levels.
+ */
 export function sortObject(o: LooseObject): LooseObject {
 	let result: LooseObject = {},
 		keys = [...Object.keys(o)].sort();
@@ -23,6 +51,13 @@ export function sortObject(o: LooseObject): LooseObject {
 	return result;
 }
 
+/**
+ * Flattens a nested object into a single-level object with dot-separated keys.
+ * Optionally sorts the resulting flat keys alphabetically (default: true).
+ * @param o - The object to flatten.
+ * @param doSort - Whether to sort the resulting keys (default: true).
+ * @returns A flattened object with dot-notation keys.
+ */
 export function flattenObject(o: LooseObject, doSort: boolean = true): LooseObject {
 	let result: LooseObject = {};
 
@@ -41,10 +76,22 @@ export function flattenObject(o: LooseObject, doSort: boolean = true): LooseObje
 	return doSort ? sortObject(result) : result;
 }
 
+/**
+ * Compares two objects for deep equality by flattening them and comparing their JSON representations.
+ * @param o1 - The first object to compare.
+ * @param o2 - The second object to compare.
+ * @returns True if the objects are deeply equal, false otherwise.
+ */
 export function deepEqual(o1: LooseObject, o2: LooseObject): boolean {
 	return JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2));
 }
 
+/**
+ * Retrieves a nested value from an object using a namespace path (dot-separated).
+ * @param ns - The namespace string or array of keys representing the path.
+ * @param obj - The object to traverse.
+ * @returns The value at the specified namespace path, or undefined if not found.
+ */
 export function nameSpace(ns: string | string[], obj: LooseObject = {}): any {
 	let nsa = ns.constructor === String ? ns.split('.') : ns;
 
@@ -58,6 +105,14 @@ export function nameSpace(ns: string | string[], obj: LooseObject = {}): any {
 	return obj[nsa[0]];
 }
 
+/**
+ * Parses a template string or object, replacing placeholders in the form of {key.path} with
+ * corresponding values from the provided data object using namespace resolution.
+ * Also recursively processes objects and arrays within the input.
+ * @param what - The string or object to parse (can contain {{placeholder}} expressions).
+ * @param parseThis - The object containing values for placeholder substitution.
+ * @returns The parsed result, with placeholders replaced by actual values.
+ */
 export function parse(what: string | object | any[], parseThis: object) {
 	var args = Array.from(arguments);
 
@@ -98,6 +153,12 @@ export function parse(what: string | object | any[], parseThis: object) {
 	return what;
 }
 
+/**
+ * Converts a kebab-case string to PascalCase.
+ * Example: 'my-component-name' -> 'MyComponentName'
+ * @param str - The kebab-case string to convert.
+ * @returns The converted PascalCase string.
+ */
 export function kebabToPascal(str: string) {
 	return str
 		.split('-') // Split by hyphens
@@ -105,6 +166,14 @@ export function kebabToPascal(str: string) {
 		.join(''); // Join without spaces
 }
 
+/**
+ * Creates a debounced version of a function that delays execution until after the specified
+ * number of milliseconds have elapsed since the last time this function was invoked.
+ * Useful for rate-limiting expensive operations like event handlers or API calls.
+ * @param func - The function to debounce.
+ * @param milliseconds - The number of milliseconds to delay execution.
+ * @returns A debounced version of the input function.
+ */
 export function debounce(func: Function, milliseconds: number): Function {
 	let timeout: any;
 	return () => {
@@ -116,6 +185,12 @@ export function debounce(func: Function, milliseconds: number): Function {
 	};
 }
 
+/**
+ * Parses an HTML string and returns an array of DOM elements.
+ * Handles self-closing tags (XHTML style) by converting them to full closing tags first.
+ * @param html - The HTML string to parse.
+ * @returns An array of HTMLElement objects representing the parsed HTML nodes.
+ */
 export function htmlToElements(html: string): HTMLElement[] {
 	let template = document.createElement('template');
 
@@ -128,6 +203,12 @@ export function htmlToElements(html: string): HTMLElement[] {
 	return Array.from(template.content.childNodes) as HTMLElement[];
 }
 
+/**
+ * Copies all getter and setter properties from a source object to a target object.
+ * Does not copy methods or regular data properties—only accessor properties (get/set).
+ * @param source - The source object with getters and/or setters to copy.
+ * @param target - The target object to which the accessors will be copied.
+ */
 export function copyGettersSetters(source: LooseObject, target: LooseObject) {
 	const descriptors = Object.getOwnPropertyDescriptors(source);
 	for (const [key, descriptor] of Object.entries(descriptors)) {

package/dist/main.mjs

@@ -0,0 +1 @@
+function e(t){let n={};return[...Object.keys(t)].sort().forEach((a=>{var l;(l=t[a])&&l.constructor&&l.constructor===Object?n[a]=e(t[a]):n[a]=t[a]})),n}function t(n,a=!0){let l={};return[...Object.getOwnPropertyNames(n)].forEach((e=>{if(n[e]instanceof Object){const a=t(n[e],!1);l[e]={};for(const t in a)l[e+"."+t]=a[t]}else l[e]=n[e]})),a?e(l):l}function n(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,a]of Object.entries(n))("get"in a||"set"in a)&&Object.defineProperty(t,e,a)}function a(e){return"_mc"+e[0].toUpperCase()+e.substring(1)}function l(e,t,n,l=!1){return e.addEventListener(a(t),n,{capture:!1,once:l}),n}class r{stopped=!1;constructor(){}stop(){this.stopped=!0}}function s(e,t,n={},l="l",s){const i=/^_mc/.test(t)?t:a(t),o=s||new r,c=new CustomEvent(i,{detail:{data:n,control:o},bubbles:!1});o.stopped||/l/.test(l)&&(e.dispatchEvent(c),c.stopImmediatePropagation(),o.stopped)||/[ud]/.test(l)&&(-1===l.indexOf("l")&&(l+="l"),setTimeout((()=>{if(l.indexOf("u")>-1){let t=e.parentElement?.closest("[data-mc]");t&&t?._mc.trigger(i,n,l,o)}if(l.indexOf("d")>-1){let t=e._mc.children();t&&t.forEach((e=>e.trigger(i,n,l)))}}),0))}const i=new Function("try {return this===window;}catch(e){ return false;}");function o(e){return e&&e instanceof HTMLElement}class c{_target;constructor(e){var t;this._target=new WeakRef(e||{}),function(e){if(!i()||e.constructor===u)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^(on[A-Z]|one[A-Z])/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((e=>{let a=/^one/.test(e),r=e.replace(/^on[e]{0,1}/,""),s=r.toLowerCase();if("on"+s in t){let a=t=>{n[e](t)};t.addEventListener(s,a)}else l(t,r,(t=>{n[e](t)}),a)}))}}(this),t=this,setTimeout((()=>{t.constructor!==u&&t.trigger("Init")}),0)}get target(){return this._target.deref()}}class u extends c{constructor(e){super(e)}static add(e,t,n={}){return function(e,t,n={}){let a=e;a._mc||(a._mc=new u(e));const l=a._mc;return t.length&&!l[t]&&(l[t]=n,e instanceof HTMLElement&&!e.getAttribute("data-mc")&&e.setAttribute("data-mc","")),a}(e,t,n)}static remove(e,t){!function(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("data-mc")&&e.removeAttribute("data-mc")}(e,t)}off(e,t){!function(e,t,n){e.removeEventListener(a(t),n)}(this.target,e,t)}on(e,t){return l(this.target,e,t)}one(e,t){return function(e,t,n){return l(e,t,n,!0),n}(this.target,e,t)}trigger(e,t={},n="l",a){s(this.target,e,t,n,a)}ancestors(){let e=this?.target,t=[];if(!o(e))return[];for(;e=e.closest("[data-mc]");)e?._mc&&t.push(e?._mc);return t.length?t:null}closest(){let e=this.target;return o(e)&&e.closest("[data-mc]")?._mc||null}children(){let e=this?.target;return o(e)?function(e){const t=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+t+'"] [data-mc] [data-mc])';e.setAttribute("temp_id",t);const a=[...e.querySelectorAll(n)].filter((e=>!!e._mc)).map((e=>e._mc));return e.removeAttribute("temp_id"),a.length?a:null}(e):null}descendants(){const e=this?.target;if(!o(e))return[];const t=[...e.querySelectorAll("[data-mc]")].filter((e=>!!e._mc)).map((e=>e._mc));return t.length?t:null}}function p(e){return null!=e&&"object"==typeof e}function d(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(n))).forEach((a=>{new Set(e.getAttribute(a)?.match(n)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(n))).forEach((e=>{(e?.nodeValue||"").match(n).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...t]}new Set;const b=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class m extends u{data={};oldDisplay="";constructor(e){super(e),d(e).forEach((e=>this.data[e]="")),g(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));var a;this.data.subscribe((a=e.getAttribute(t),l=>{let r=a;n.forEach((e=>{r=r.replace(e,l[e.replace(/[\{\}]/g,"")])})),e.setAttribute(t,r)}))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{t=!0;let a=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>l=>{let r=t;a.forEach((e=>{r=r.replace(e,l[e.replace(/[\{\}]/g,"")])})),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=r})(n.nodeValue)),this.oldDisplay=e.getAttribute("style")||"",t&&!b.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(e){let t={};Object.keys(e.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])})),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}}const h={};function f(e){let n=e.constructor.name;return h[n]||function(e){const n=e.constructor,a=n.name;let l=class extends n{#t=!0;#n=[];constructor(e){super(e),this.constructor.callbacks=[],p(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}get callbacks(){return this.#n}set callbacks(e){this.#n=e}subscribe(e){return this.#n.push(e),this}bind(e){if(p(this.valueOf())){!function(e){var t;(t=e,[t].concat([...t.querySelectorAll("*")]).filter((e=>!!d(e).length)).filter((e=>"STYLE"!==e?.tagName)).reverse()).forEach((e=>{e?._mc?._placeholders||u.add(e,"_placeholders",new m(e))}))}(e);const n=[e,...e.querySelectorAll("[data-mc]")].filter((e=>!!e?._mc?._placeholders)),a=function(e){let a=t(e);n.forEach((e=>{e&&s(e,"data",a)}))};this.#n.push(a),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(e){let t=p(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==e&&(this.#t=e),this.#t&&this.#n.forEach((e=>{e(t)})),this}};return h[a]=l,l}(e)}const g=(e,a)=>((a?[a]:[...Object.getOwnPropertyNames(e)]).forEach((a=>{if(e.hasOwnProperty(a)&&"function"!=typeof e[a]&&!e?.[a]?.constructor?.prototype?.subscribe){if("_"===a[0]||void 0===e?.[a])return e;let l=e[a],r=new(f(l))(l),s=function(){let e;return()=>{clearTimeout(e),e=setTimeout((function(){!function(){r.notify()}(...arguments)}),0)}}();Object.defineProperty(e,a,{enumerable:!0,get(){if(p(r.valueOf())){let e=structuredClone(Object.assign({},r));setTimeout((function(){var n,a;n=structuredClone(Object.assign({},r)),a=e,JSON.stringify(t(n))!==JSON.stringify(t(a))&&s()}),0)}return r},set(e){if(typeof e==typeof r.valueOf())if(p(r.valueOf())&&r.valueOf()instanceof Array==0)void 0===r?.constructor?.prototype?.subscribe&&(r=new(f(e))(structuredClone(Object.assign({},e))),n(e,r)),Object.assign(r,e),r.notify();else{let t=r.valueOf(),n=r.callbacks;e!==t&&(r=new(f(e))(e),r.callbacks=n,s())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof e)}}),e[a]=l}})),e);class y{constructor(e){}}class v extends y{#a;constructor(e){super(e),this.#a=e}get val(){return new FormData(this.#a.form).get(this.#a.name)}set val(e){[...this.#a.form.querySelectorAll(`input[type="radio"][name="${this.#a.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class E extends y{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.checked}set val(e){this.#a.checked=e}}class O extends y{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value}set val(e){this.#a.value=e}}class w extends y{#a;#l=!1;constructor(e){super(e),this.#a=e,this.#l=e.multiple}get val(){const e=[];return[...this.#a.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#l?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#a.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class k extends y{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value||""}set val(e){this.#a.value=e}}!function(e,t,n=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let a=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");t.prototype instanceof c?customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends HTMLElement{constructor(e){super(),u.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}static get observedAttributes(){return n}})):customElements.define(e,t)}("test-testform",class extends u{data;constructor(e){super(e);let t=this.target.attachShadow({mode:"open"});t.innerHTML=`<style>${this.css}</style>${this.template}`,function(e,t,a){let l=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let a=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":a=new v(e);break;case"checkbox":a=new E(e);break;default:a=new O(e)}break;case"select":a=new w(e);break;case"textarea":a=new k(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}a&&(u.add(e,t,a),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>a.val,set:e=>{a.val!==e&&(a.val=e)}}))}})),n})(a);e[t]=Object.assign({},l),g(e,t),n(l,e[t]),[...a.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{e[t].notify()}))}))}(this,"data",t),this.data.bind(t),fetch("./testform.json").then((e=>e.json())).then((e=>{this.data=e}))}get template(){return'\n                <form>\n                    \x3c!-- sample form to start with --\x3e\n                    <fieldset>\n                        <legend>Inputs</legend>\n                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}<br />\n                        <label>color</label><input type="color" name="colorInput" value="#000000" /><br />\n                        <label>date</label><input type="date" name="dateInput" value="" /><br />\n                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" /><br />\n                        <label>email</label><input type="email" name="email" value="" /><br />\n                        <label>file</label><input type="file" name="fileInput" value="" /><br />\n                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" /><br />\n                        <label>month</label><input type="month" name="month" value="" /><br />\n                        <label>number</label><input type="number" name="number" value="" /><br />\n                        <label>password</label><input type="password" name="passInput" value="" /><br />\n                        <label>range</label><input type="range" name="rangeInput" value="" /><br />\n                        <label>search</label><input type="search" name="searchInput" value="" /><br />\n                        <label>tel</label><input type="tel" name="telInput" value="" /><br />\n                        <label>time</label><input type="time" name="timeInput" value="" /><br />\n                        <label>url</label><input type="url" name="urlInput" value="" /><br />\n                        <label>week</label><input type="week" name="weekInput" value="" /><br />\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Selects&nbsp;<strong>2wB:&nbsp;</strong>&nbsp;<span>"{singleSelect}"</span>&nbsp;<span>[{multiSelect}]</span></legend>\n\n                            <label>singleSelect</label>\n                            <select name="singleSelect">\n                                <option disabled selected value> -- select -- </option>\n                                <option value="1">Option 1</option>\n                                <option value="2">Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4">Option 4</option>\n                            </select><br />\n\n                            <label>multiSelect</label>\n                            <select name="multiSelect" multiple="multiple" type="select-multiple">\n                                <option value="1">Option 1</option>\n                                <option value="2" selected=true>Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4" selected=true>Option 4</option>\n                            </select>\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>"{myRadio}"</span></legend>\n\n                        <label>radio1</label><input type="radio" name="myRadio" value="radio1"><br />\n                        <label>radio2</label><input type="radio" name="myRadio" value="radio2"><br />\n                        <label>radio3</label><input type="radio" name="myRadio" value="radio3"><br />\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Checkboxes</legend>\n                        <label>cb1</label><input type="checkbox" name="cb1"><br />\n                        <label>cb2</label><input type="checkbox" name="cb2"><br />\n                        <label>cb3</label><input type="checkbox" name="cb3"><br />\n                        <label>cb4</label><input type="checkbox" name="cb4"><br />\n                        <label>cb5</label><input type="checkbox" name="cb5"><br />\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>TextArea</legend>\n                        <label>textArea</label>\n                        <textarea name="textArea">abc</textarea>\n                    </fieldset>\n\n                </form>\n            '}get css(){return'\nlegend {\n    display: inherit;\n    margin:  inherit;\n    vertical-align:  inherit;\n    font-weight: bold;\n}\n\nlabel {\n    display: inline-block;\n    margin-top: 1em;\n    margin-left: 5px;\n    vertical-align: top;\n    min-width:10em;\n    text-align: right;\n}\n\nform input,\nform select,\nform textarea {\n    display: inline-block;\n    margin-left: 5px;\n    margin-top: 1.1em;\n}\n\ninput[type="radio"],\ninput[type="checkbox"] {\n    margin-top: 1.3em;\n}\n\nbody > form {\n    display: block;\n}\n\nform fieldset {\n    border: 1px solid #aaaaaa;\n    border-radius: 3px;\n    margin: 0.5em 0;\n}\n            '}});

package/dist/microcomponents.d.ts

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

package/dist/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,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}

package/dist/microcomponents.js

@@ -0,0 +1,6 @@
+'use strict';
+export * from './helpers.js';
+export * from './MC.js';
+export * from './elements.js';
+export * from './observables.js';
+export * from './formValues.js';