@twobirds/microcomponents 0.0.86 → 0.0.89

package/README.md

@@ -2,25 +2,43 @@
 
 ## MICRO COMPONENTS
 
-**This code aims at improving Javascript modularity and encapsulation**.
+**MCs are function blocks that you attach to DOM nodes.** These are re-usable in any framework, and you can have any number of MCs in one DOM node.
 
-Micro Components are built on **OOP** for structure, so you should embrace **DRY, KISS and SOLID** principles. That said, OOP is not a religion here, in fact you can do FP also. MCs provide a structure for your code, no more. It is agnostic as to what code you put in this structure.
+There are helpers for the following functionalities:
 
-Its basic principle is **composition over inheritance**. So: using OOP its recommended you do not extend your own classes, as it is not needed.
+- **Web Components:** create native web components. Their functionality is comprised of a set of inner MCs.
+- **State** is done by observable objects that you can attach callbacks to. This also allows for 1-way binding to DOM placeholders, and it can be extended to allow for complex data driven state machines.
+- **Form Handling** allows for 2-way binding from an observable form object to DOM form input elements.
+- **Communication** between DOM micro components is ensured via direct selected or directional bubbling CustomEvent's.
+- **Autoloading** allows for build-free websites that dynamically load JS requirements into DOM HTMLElements.
 
-Also it helps to embrace **DIY** (Do It Yourself) **over Toolchains**, but this is up to your personal preference.
+The destinct difference to to other frameworks is **portability** and **modularization**.
 
-You can use **Vanilla JS or Typescript** or both in your project. For example you could use plain JS for rapid prototyping functionalities, then convert to TS for production.
+## Goal
 
-## Think **Building Blocks**
+This code aims at improving Javascript modularity and encapsulation. Micro Components are built on **OOP** for structure, so you should embrace **DRY, KISS and SOLID** principles.
+
+MCs provide a runtime app structure that is directly linked to the browser DOM. That is you don't need web components, you can attach MCs to plain HTMLElements. Having said this: the library also allows for standard web component programming, acting as a framework.
 
 In general this is a **HTML / Web Standards first** system. There is almost no abstraction, especially not for templating, except state binding to the DOM via simple placeholders.
 
-When coding with this system, you create classes that extend either the **[MC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads#mc-class-extends-mcbase)** or **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads#dc-class-extends-mcbase)** superclasses provided here. These classes provide the structure you need to build your wonderland. 
+It has no interference with other frameworks, since it creates a second layer that hovers above the DOM. So what you intended to work as an add-on to React, is usable e.g. in Angular also. 
+
+And, of course, you can use it as your main framework using its custom web component functionality.
+
+Its basic principle is **composition over inheritance**. So: using when using it for app coding it is recommended you do not extend your own classes, as it is not needed and induces problems.
+
+Also it helps to embrace **DIY** (**D**o **I**t **Y**ourself) **over Toolchains**, but this is up to your personal preference.
+
+You can use **Vanilla JS or Typescript** or both in parallel in your project. For example you could use plain JS for rapid prototyping functionalities, then convert to TS for production.
 
-You **attach instances of your classes to any HTMLElement**, and there can be as many as you want connected to a single HTML tag. In an almost literal sense they work like childrens building blocks, where a chest full of unassuming parts lets you compose whatever functionality lies in your imagination.
+Most of all this system by design **allows for outsourcing without sharing the main development system**. It is absolutely granular as it enforces **DRY** (**D**on't **R**epeat **Y**ourself).
 
-Also you can easily **define JS custom elements**. Since these are just another instance of a DC internally, you can enhance them even at runtime, as they are displayed in the browser.
+Finally it allows for a clear distinction between `Junior`, `Senior` and `Architect` roles in a project. No more hiring junior programmers with 5 years experience in 50 tools under their belt. A junior in this system is somebody who likes HTML, CSS and JS/TS - nothing more. Teaching all of this system starting at zero takes 1 day. The rest is finger muscle memory and learning/knowing web standards.
+
+## Think **Building Blocks**
+
+You **attach instances of your classes to any HTMLElement**, and you can **attach as many as you want to a single HTMLElement**. In an almost literal sense they work like childrens building blocks, where a chest full of unassuming parts lets you compose whatever functionality lies in your imagination.
 
 ## Principles
 
@@ -61,7 +79,7 @@ To see what can be done, go to [additional concepts](https://gitlab.com/twoBirds
 
 ## Simple Usage Example
 
-**Hint:** this only shows how Micro Components are stored in the DOM structure, for details about functionality refer to above links!
+**Hint: the following code only shows how Micro Components are stored in the DOM structure**, for details about functionality refer to above links!
 
 **Micro Components** can be added to to a DOM element like this:
 
@@ -113,7 +131,7 @@ The `_mc` **property** is the only interference with the DOM, so any other syste
 
 ## Distinct differences to other frameworks
 
-There are a few potentially unique aspects of this micro components system that might differentiate it from other frameworks:
+There are a few potentially unique aspects of this micro components system that might differentiate it from other framework or library:
 
 - **Pure OOP Approach**: The system explicitly positions itself as a strict object-oriented alternative to the functional approaches that dominate many modern frameworks.
 
@@ -121,7 +139,7 @@ There are a few potentially unique aspects of this micro components system that
 - **Minimal Interference**: The system has minimal DOM interference, only adding _mc property to DOM nodes that contain code. This makes it unusually compatible with other frameworks or libraries.
 
 
-- **Hierarchical Component Traversal**: The built-in parent/child/ancestor/descendant traversal methods provide a clean way to navigate component relationships.
+- **Hierarchical Component Traversal**: The built-in ancestor/closest/child/descendant traversal methods provide a clean way to navigate component relationships.
 
 
 - **Direct DOM Integration**: Unlike virtual DOM-based frameworks, this approach works directly with the actual DOM while still providing component encapsulation.
@@ -133,6 +151,7 @@ There are a few potentially unique aspects of this micro components system that
 The strongest argument might be for developers who prefer OOP, want minimal framework lock-in, and need a lightweight solution that works well with existing code or other libraries.
 
 ## Contact
+
 Feel free to contact me for any questions or inquiries:
 
 email [Frank Thürigen](mailto:fthuerigen@gmail.com?subject=Micro%20Components)
@@ -140,6 +159,7 @@ email [Frank Thürigen](mailto:fthuerigen@gmail.com?subject=Micro%20Components)
 You can [fund this](https://www.gofundme.com/f/nachhaltige-programmierung).
 
 ## Disclaimer
+
 I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), because it is a useful tool in itself and it is framework agnostic. It relies solely on the standard DOM and native javascript or typescript.
 
 Later this will be backported into twoBirds as a dependency, and twoBirds will become completely modularized on the base of MCs.

package/assets/documentation/MC.md

@@ -60,7 +60,7 @@ Plain JavaScript objects or class instances (extending `MC` or `DC`) that encaps
 
 ### `_mc` Property
 
-A special property attached to `HTMLElement` instances (when using `DC.add`) or parent `MC`/`DC` instances. It acts as an object container (`{ key: mcInstance, ... }`) holding one or more named microcomponent instances.
+A special property attached to `HTMLElement` instances when using `DC.add`. It acts as an object container (`{ key: mcInstance, ... }`) holding one or more named microcomponent instances.
 
 - On HTMLElements, the presence of attached components is also marked by a `_mc` attribute for CSS selection and discovery. This attribute is added by `DC.add` and removed by `DC.remove` when the `_mc` object becomes empty.
 
@@ -101,7 +101,7 @@ The names maps like this:
 
 - **Bubbling:** Events triggered via `dcInstance.trigger` can bubble:
   - `'l'`: Local only (default). Handlers on the target element's/instance's MCs are executed.
-  - `'u'`: Upwards. Event propagates to MCs on parent elements (DOM tree).
+  - `'u'`: Upwards. Event propagates to MCs on closest elements (DOM tree).
   - `'d'`: Downwards. Event propagates to MCs on descendant elements (DOM tree).
   - Any combination of the characters 'l','u', 'd' are possible (e.g., `'lu'`, `'ldu'`). 
   - Bubbling (`u`/`d`) occurs asynchronously via `setTimeout`.
@@ -113,7 +113,7 @@ The names maps like this:
 
 ### DOM Traversal
 
-The `DC` class provides methods (`parent`, `ancestors`, `children`, `descendants`) to find related `DC` instances attached to elements elsewhere in the DOM hierarchy, skipping over elements without attached microcomponents.
+The `DC` class provides methods (`closest`, `ancestors`, `children`, `descendants`) to find related `DC` instances attached to elements elsewhere in the DOM hierarchy, skipping over elements without attached microcomponents.
 
 ### Autoloading Concept
 
@@ -121,7 +121,7 @@ An optional feature (`autoload()`) that automatically detects specific HTML tags
 
 ### Important Rule
 
-**Your own application code MUST NOT overwrite the core properties and methods provided by the `McBase`, `MC`, and `DC` classes (like `_mc`, `target`, `trigger`, `parent`, etc.). Doing so may break framework functionality.**
+**Your own application code MUST NOT overwrite the core properties and methods provided by the `McBase`, `MC`, and `DC` classes (like `_mc`, `target`, `trigger`, `closest`, etc.). Doing so may break framework functionality.**
 
 ## Classes
 
@@ -158,10 +158,10 @@ Class for DOM-aware components. Extends `McBase`. **Client-side only.**
 - **Instance Properties**:
   - `.target`: (Inherited from `McBase`) Refers to the DOM HTMLElement this `DC` instance is attached to (via `DC.add`).
 - **Instance Methods**:
-  - `.parent()`: Gets MC instances from the closest parent element that has attached MCs.
-  - `.ancestors()`: Gets MC instances from all ancestor elements with attached MCs.
-  - `.children()`: Gets MC instances from direct child elements with attached MCs.
-  - `.descendants()`: Gets MC instances from all descendant elements with attached MCs.
+  - `.closest()`: Gets MC instances from the closest HTMLElement that has MCs attached.
+  - `.ancestors()`: Gets MC instances from all ancestor HTMLElements with MCs attached MCs.
+  - `.children()`: Gets MC instances from direct child HTMLElements with MCs attached.
+  - `.descendants()`: Gets MC instances from all descendant HTMLElements with MCs attached.
   - `.trigger(eventName, data, bubble)`: Triggers an event on this `DC` instance. Can initiate DOM bubbling (`'l'`, `'u'`, `'d'`).
 
 ## Examples
@@ -171,9 +171,9 @@ Class for DOM-aware components. Extends `McBase`. **Client-side only.**
 1.  Define your component classes extending `MC` or `DC`. These contain plain data, observable state, event callbacks and optional internal MCs.
 2.  Attach defined top-level `DC` instances to HTMLElements using `DC.add()`.
 3.  Then...
-  - Select and access other MCs using DOM traversal methods (`ancestors()`, `children()`, etc.)
-  - Dynamically attach event handlers (`on`, `one`, `off`).
-  - Communicate with other components via Events (`trigger`).
+  - Select and access other MCs using DOM traversal methods (`ancestors()`, `closest()`, `children()`, `descendants()` )
+  - Dynamically attach event handlers (`on()`, `one()`, `off()`).
+  - Communicate with other components via Events (`trigger()`).
 
 ### Attach Micro Components (`DC.add`)
 
@@ -182,50 +182,31 @@ Use the static `DC.add()` method to attach a component (usually a `DC` instance)
 ```javascript
 const myElement = document.getElementById('myDiv');
 
-// Define an inner MC (doesn't need DOM access itself)
-class MyInnerClass extends MC {
-
-	constructor(target) {
-		// target will be the parent MyPublicClass instance
-		super(target);
-		console.log('Inner MC target:', this.target);
-	}
-
-	doSomethingInner() {
-		console.log('Inner action!');
-	}
-
-}
-
-// Define an outer DC (needs DOM access or is top-level)
-class MyPublicClass extends DC {
+// Define a public DC class
+class MyClass extends DC {
 
 	constructor(target) {
 		// target will be myElement
 		super(target);
 		console.log('Outer DC target:', this.target);
-		// Add an inner MC instance, nested within this DC instance
-		this.myInner = new MyInnerClass(this); // 'this' becomes the target for MyInnerClass
 	}
 
-	doSomethingOuter() {
+	doSomething() {
 		console.log('Outer action!');
 	}
 
 	onClick(event) {
 		console.log('Div clicked!', event);
-		// Access nested MC
-		this.myInner.doSomethingInner();
 	}
 }
 
-// Attach the outer DC instance to the DOM element
-// The key 'myComponent' is used to access it later via myElement._mc.myComponent
-DC.add(myElement, 'myComponent', new MyPublicClass(myElement));
+// Attach the DC instance to the DOM element
+// The key 'MyClass' is used to access it later via myElement._mc.myComponent
+DC.add(myElement, 'MyClass', new MyClass(myElement));
 
 // Hint: After adding, myElement now has:
-// 1. A property: myElement._mc = { myComponent: instanceOfMyPublicClass }
-// 2. An attribute: <div id="myDiv" _mc>...</div>
+// 1. A property: myElement._mc = { MyClass: <instanceOfMyClass> }
+// 2. An attribute: <div id="myDiv" data-mc>...</div>
 ```
 
 ### Remove Micro Components (DC.remove)
@@ -313,16 +294,16 @@ class MyTriggeringComponent extends DC {
 }
 ```
 
-### Navigating Parent/Ancestor MCs
+### Navigating closest/Ancestor MCs
 
-Use .parent() and .ancestors() (available on DC instances) to find components attached to elements higher up the DOM tree.
+Use .closest() and .ancestors() (available on DC instances) to find components attached to elements higher up the DOM tree.
 
 These methods skip elements that don't have any MCs attached.
 
 ```javascript
 // Inside a method of a DC instance:
-const parentMcs = this.parent(); // Array of MC instances on the closest parent element that contains MCs
-console.log(parentMcs);
+const closestMcs = this.closest(); // Array of MC instances on the closest parent element that contains MCs
+console.log(closestMcs);
 
 const allAncestorMcs = this.ancestors(); // Array of all MC instances on all ancestor elements with MCs
 console.log(allAncestorMcs);

package/assets/test/grandparent.css

@@ -3,6 +3,9 @@ test-parent,
 test-child,
 test-grandchild,
 test-greatgrandchild {
+	user-select: none;
+	caret-color: transparent;
+
 	display: inline-block;
 	padding: 2px;
 	margin: 1px;

package/dist/MC.d.ts

@@ -3,8 +3,8 @@ export interface HTMLMcElement extends HTMLElement {
     _mc: LooseObject;
 }
 declare function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
-declare function on(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once?: boolean): void;
-declare function one(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
+declare function on(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once?: boolean): EventListenerOrEventListenerObject;
+declare function one(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
 declare function trigger(domNode: HTMLElement, event: CustomEvent | string, data?: any, bubble?: string): void;
 declare class McBase {
     private _target;
@@ -21,11 +21,11 @@ declare class DC extends McBase {
     static add: Function;
     static remove: Function;
     off(eventName: string, handler: EventListenerOrEventListenerObject): void;
-    on(eventName: string, handler: EventListenerOrEventListenerObject): void;
-    one(eventName: string, handler: EventListenerOrEventListenerObject): void;
+    on(eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
+    one(eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
     trigger(eventName: string, data?: any, bubble?: string): void;
-    parent(): DC | null;
     ancestors(): DC[] | null;
+    closest(): DC | null;
     children(): DC[] | null;
     descendants(): DC[] | null;
 }

package/dist/MC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiB3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AAmED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,QAEhH;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA+ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAU3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IAGjC,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAKhE,MAAM,IAAI,EAAE,GAAG,IAAI;IAOnB,SAAS,IAAI,EAAE,EAAE,GAAG,IAAI;IAgBxB,QAAQ,IAAI,EAAE,EAAE,GAAG,IAAI;IAMvB,WAAW,IAAI,EAAE,EAAE,GAAG,IAAI;CAS1B;AAiHD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AAmED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,GAAI,kCAAkC,CAGtJ;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAI,kCAAkC,CAGhI;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA+ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAU3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IAGjC,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAKhE,SAAS,IAAI,EAAE,EAAE,GAAG,IAAI;IAgBxB,OAAO,IAAI,EAAE,GAAG,IAAI;IAOpB,QAAQ,IAAI,EAAE,EAAE,GAAG,IAAI;IAMvB,WAAW,IAAI,EAAE,EAAE,GAAG,IAAI;CAS1B;AAiHD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}

package/dist/MC.js

@@ -1,14 +1,5 @@
 'use strict';
 const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
-function getNativeEventNames(domNode) {
-    let nativeEventNames = [];
-    if (isBrowser()) {
-        Object.keys(HTMLElement.prototype)
-            .filter((key) => /^on/.test(key))
-            .forEach((eventName) => nativeEventNames.push(eventName));
-    }
-    return nativeEventNames;
-}
 function isDOM(element) {
     return element && element instanceof HTMLElement;
 }
@@ -55,9 +46,11 @@ function off(domNode, eventName, handler) {
 }
 function on(domNode, eventName, handler, once = false) {
     domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
+    return handler;
 }
 function one(domNode, eventName, handler) {
     on(domNode, eventName, handler, true);
+    return handler;
 }
 function trigger(domNode, event, data = {}, bubble = 'l') {
     const ev = typeof event === 'string'
@@ -152,20 +145,14 @@ class DC extends McBase {
         off(this.target, eventName, handler);
     }
     on(eventName, handler) {
-        on(this.target, eventName, handler);
+        return on(this.target, eventName, handler);
     }
     one(eventName, handler) {
-        one(this.target, eventName, handler);
+        return one(this.target, eventName, handler);
     }
     trigger(eventName, data = {}, bubble = 'l') {
         trigger(this.target, eventName, data, bubble);
     }
-    parent() {
-        let target = this.target;
-        if (!isDOM(target))
-            return null;
-        return target.closest('[data-mc]')?._mc || null;
-    }
     ancestors() {
         let currentNode = this?.target, result = [];
         if (!isDOM(currentNode))
@@ -177,6 +164,12 @@ class DC extends McBase {
         }
         return result.length ? result : null;
     }
+    closest() {
+        let target = this.target;
+        if (!isDOM(target))
+            return null;
+        return target.closest('[data-mc]')?._mc || null;
+    }
     children() {
         let target = this?.target;
         if (!isDOM(target))

package/dist/MC.min.js

@@ -57,15 +57,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 
 const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
-function getNativeEventNames(domNode) {
-    let nativeEventNames = [];
-    if (isBrowser()) {
-        Object.keys(HTMLElement.prototype)
-            .filter((key) => /^on/.test(key))
-            .forEach((eventName) => nativeEventNames.push(eventName));
-    }
-    return nativeEventNames;
-}
 function isDOM(element) {
     return element && element instanceof HTMLElement;
 }
@@ -112,9 +103,11 @@ function off(domNode, eventName, handler) {
 }
 function on(domNode, eventName, handler, once = false) {
     domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
+    return handler;
 }
 function one(domNode, eventName, handler) {
     on(domNode, eventName, handler, true);
+    return handler;
 }
 function trigger(domNode, event, data = {}, bubble = 'l') {
     const ev = typeof event === 'string'
@@ -209,20 +202,14 @@ class DC extends McBase {
         off(this.target, eventName, handler);
     }
     on(eventName, handler) {
-        on(this.target, eventName, handler);
+        return on(this.target, eventName, handler);
     }
     one(eventName, handler) {
-        one(this.target, eventName, handler);
+        return one(this.target, eventName, handler);
     }
     trigger(eventName, data = {}, bubble = 'l') {
         trigger(this.target, eventName, data, bubble);
     }
-    parent() {
-        let target = this.target;
-        if (!isDOM(target))
-            return null;
-        return target.closest('[data-mc]')?._mc || null;
-    }
     ancestors() {
         let currentNode = this?.target, result = [];
         if (!isDOM(currentNode))
@@ -234,6 +221,12 @@ class DC extends McBase {
         }
         return result.length ? result : null;
     }
+    closest() {
+        let target = this.target;
+        if (!isDOM(target))
+            return null;
+        return target.closest('[data-mc]')?._mc || null;
+    }
     children() {
         let target = this?.target;
         if (!isDOM(target))

package/dist/MC.ts

@@ -6,17 +6,6 @@ const isBrowser = new Function(
 	'try {return this===window;}catch(e){ return false;}'
 );
 
-// get HTMLElement native event names
-function getNativeEventNames( domNode: HTMLElement ): string[] {
-	let nativeEventNames: Array<string> = [];
-	if (isBrowser()) {
-		Object.keys(HTMLElement.prototype)
-			.filter((key) => /^on/.test(key))
-			.forEach((eventName) => nativeEventNames.push(eventName));
-	}
-	return nativeEventNames;
-}
-
 export interface HTMLMcElement extends HTMLElement {
 	_mc: LooseObject;
 }
@@ -90,12 +79,14 @@ function off( domNode: Node, eventName: string, handler: EventListenerOrEventLis
 	domNode.removeEventListener( getMcEventName(eventName), handler );
 }
 
-function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ) {
+function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ): EventListenerOrEventListenerObject {
 	domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
+	return handler;
 }
 
-function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ) {
+function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
 	on(domNode, eventName, handler, true );
+	return handler;
 }
 
 // create and dispatch custom event
@@ -236,11 +227,11 @@ class DC extends McBase {
 	}
 
 	on( eventName: string, handler: EventListenerOrEventListenerObject ) {
-		on( this.target, eventName, handler );
+		return on( this.target, eventName, handler );
 	}
 
 	one( eventName: string, handler: EventListenerOrEventListenerObject ) {
-		one( this.target, eventName, handler );
+		return one( this.target, eventName, handler );
 	}
 
 	trigger( eventName: string, data: any = {}, bubble: string = 'l') {
@@ -248,13 +239,6 @@ class DC extends McBase {
 	}
 
 	/* DOM traversal */
-	parent(): DC | null {
-		let 
-			target: HTMLElement = (this as DC).target;
-		if (!isDOM(target)) return null;
-		return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
-	}
-
 	ancestors(): DC[] | null {
 		let 
 			currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
@@ -271,6 +255,13 @@ class DC extends McBase {
 		return result.length ? result : null;
 	}
 
+	closest(): DC | null {
+		let 
+			target: HTMLElement = (this as DC).target;
+		if (!isDOM(target)) return null;
+		return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
+	}
+
 	children(): DC[] | null {
 		let target: any = (this as any)?.target;
 		if (!isDOM(target)) return null;

package/dist/elements.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.elements=e():t.elements=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{defineCE:()=>m,getCE:()=>f});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function o(t,e,n={}){let r=t;r._mc||(r._mc=new l(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function c(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function s(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function a(t,e,n,r=!1){t.addEventListener(s(e),n,{capture:!1,once:r})}class i{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==l&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===l)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((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase();if("on"+c in e){let r=e=>{n[t](e)};e.addEventListener(c,r)}else a(e,o,(e=>{n[t](e)}),r)}))}}(this)}get target(){return this._target.deref()}}class l extends i{constructor(t,e=!1){super(t)}static add=o;static remove=c;off(t,e){!function(t,e,n){t.removeEventListener(s(e),n)}(this.target,t,e)}on(t,e){a(this.target,t,e)}one(t,e){!function(t,e,n){a(t,e,n,!0)}(this.target,t,e)}trigger(t,e={},n="l"){!function(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(s(e),{detail:{data:n,bubble:r}}):e;r.length&&r.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(r)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}(this.target,t,e,n)}parent(){let t=this.target;return r(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!r(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class u extends HTMLElement{constructor(){super()}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(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function d(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function m(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("");d(e.prototype.constructor)&&e.prototype instanceof i?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends u{instance;constructor(t){super();const n=d(e)?new e(this,t):e;l.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function f(t){return customElements.get(t)}return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.elements=e():t.elements=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{defineCE:()=>m,getCE:()=>f});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function o(t,e,n={}){let r=t;r._mc||(r._mc=new l(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function c(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function s(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function i(t,e,n,r=!1){return t.addEventListener(s(e),n,{capture:!1,once:r}),n}class a{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==l&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===l)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((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase();if("on"+c in e){let r=e=>{n[t](e)};e.addEventListener(c,r)}else i(e,o,(e=>{n[t](e)}),r)}))}}(this)}get target(){return this._target.deref()}}class l extends a{constructor(t,e=!1){super(t)}static add=o;static remove=c;off(t,e){!function(t,e,n){t.removeEventListener(s(e),n)}(this.target,t,e)}on(t,e){return i(this.target,t,e)}one(t,e){return function(t,e,n){return i(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l"){!function(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(s(e),{detail:{data:n,bubble:r}}):e;r.length&&r.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(r)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,o)}(this.target,t,e,n)}ancestors(){let t=this?.target,e=[];if(!r(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return r(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class u extends HTMLElement{constructor(){super()}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(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function d(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function m(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("");d(e.prototype.constructor)&&e.prototype instanceof a?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends u{instance;constructor(t){super();const n=d(e)?new e(this,t):e;l.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function f(t){return customElements.get(t)}return e})()));

package/dist/formValues.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.formValues=e():t.formValues=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var s;(s=t[n])&&s.constructor&&s.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let s={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)s[e+"."+t]=r[t]}else s[e]=t[e]})),e?r(s):s}function s(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function a(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}function c(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}t.r(e),t.d(e,{formValues:()=>T});const o=new Function("try {return this===window;}catch(e){ return false;}");function l(t){return t&&t instanceof HTMLElement}function i(t,e,r={}){let n=t;n._mc||(n._mc=new m(t));const s=n._mc;return e.length&&!s[e]&&(s[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}function u(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function f(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function d(t,e,r,n=!1){t.addEventListener(f(e),r,{capture:!1,once:n})}function h(t,e,r={},n="l"){const s="string"==typeof e?new CustomEvent(f(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(s),/[u|d]/.test(n)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,s)}class b{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==m&&e.trigger("Init")}),0),function(t){if(!o()||t.constructor===m)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),s=t.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();if("on"+a in e){let n=e=>{r[t](e)};e.addEventListener(a,n)}else d(e,s,(e=>{r[t](e)}),n)}))}}(this)}get target(){return this._target.deref()}}class m extends b{constructor(t,e=!1){super(t)}static add=i;static remove=u;off(t,e){!function(t,e,r){t.removeEventListener(f(e),r)}(this.target,t,e)}on(t,e){d(this.target,t,e)}one(t,e){!function(t,e,r){d(t,e,r,!0)}(this.target,t,e)}trigger(t,e={},r="l"){h(this.target,t,e,r)}parent(){let t=this.target;return l(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!l(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}children(){let t=this?.target;return l(t)?function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=[...t.querySelectorAll(r)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),n.length?n:null}(t):null}descendants(){const t=this?.target;if(!l(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function p(t){return null!=t&&"object"==typeof t}function g(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const y=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class v extends m{data={};oldDisplay="";constructor(t){super(t),g(t).forEach((t=>this.data[t]="")),w(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),s=>{let a=n;r.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,a)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>s=>{let a=e;n.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=a})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!y.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const O={};function E(t){let e=t.constructor.name;return O[e]||function(t){const e=t.constructor,r=e.name;let s=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],p(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(p(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!g(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||m.add(t,"_placeholders",new v(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&h(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=p(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#r.forEach((t=>{t(e)})),this}};return O[r]=s,s}(t)}const w=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(E(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(p(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(a((function(){s(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(p(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(E(t))(structuredClone(Object.assign({},t))),c(t,n),n.seal()),Object.assign(n,t),setTimeout(a((function(){s(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(E(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);class A{constructor(t){}}class j extends A{#n;constructor(t){super(t),this.#n=t}get val(){return new FormData(this.#n.form).get(this.#n.name)}set val(t){[...this.#n.form.querySelectorAll(`input[type="radio"][name="${this.#n.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class S extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.checked}set val(t){this.#n.checked=t}}class _ extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value}set val(t){this.#n.value=t}}class k extends A{#n;#s=!1;constructor(t){super(t),this.#n=t,this.#s=t.multiple}get val(){const t=[];return[...this.#n.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#s?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#n.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class x extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value||""}set val(t){this.#n.value=t}}const N=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],r={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let n=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":n=new j(t);break;case"checkbox":n=new S(t);break;default:n=new _(t)}break;case"select":n=new k(t);break;case"textarea":n=new x(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}n&&(m.add(t,e,n),Object.defineProperty(r,e,{enumerable:!0,configurable:!0,get:()=>n.val,set:t=>{n.val!==t&&(n.val=t)}}))}})),r};function T(t,e,r){let n=N(r);t[e]=Object.assign({},n),w(t,e),c(n,t[e]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{r.addEventListener("input",(r=>{t[e].notify()}))}))}return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.formValues=e():t.formValues=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var s;(s=t[n])&&s.constructor&&s.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let s={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)s[e+"."+t]=r[t]}else s[e]=t[e]})),e?r(s):s}function s(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function a(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}function c(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}t.r(e),t.d(e,{formValues:()=>T});const o=new Function("try {return this===window;}catch(e){ return false;}");function l(t){return t&&t instanceof HTMLElement}function i(t,e,r={}){let n=t;n._mc||(n._mc=new m(t));const s=n._mc;return e.length&&!s[e]&&(s[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}function u(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function f(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function d(t,e,r,n=!1){return t.addEventListener(f(e),r,{capture:!1,once:n}),r}function h(t,e,r={},n="l"){const s="string"==typeof e?new CustomEvent(f(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(s),/[u|d]/.test(n)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&t._mc.trigger(t,e)}))}),0)}(t,s)}class b{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==m&&e.trigger("Init")}),0),function(t){if(!o()||t.constructor===m)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),s=t.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();if("on"+a in e){let n=e=>{r[t](e)};e.addEventListener(a,n)}else d(e,s,(e=>{r[t](e)}),n)}))}}(this)}get target(){return this._target.deref()}}class m extends b{constructor(t,e=!1){super(t)}static add=i;static remove=u;off(t,e){!function(t,e,r){t.removeEventListener(f(e),r)}(this.target,t,e)}on(t,e){return d(this.target,t,e)}one(t,e){return function(t,e,r){return d(t,e,r,!0),r}(this.target,t,e)}trigger(t,e={},r="l"){h(this.target,t,e,r)}ancestors(){let t=this?.target,e=[];if(!l(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return l(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return l(t)?function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=[...t.querySelectorAll(r)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),n.length?n:null}(t):null}descendants(){const t=this?.target;if(!l(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function p(t){return null!=t&&"object"==typeof t}function g(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const y=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class v extends m{data={};oldDisplay="";constructor(t){super(t),g(t).forEach((t=>this.data[t]="")),w(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),s=>{let a=n;r.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,a)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>s=>{let a=e;n.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=a})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!y.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const O={};function E(t){let e=t.constructor.name;return O[e]||function(t){const e=t.constructor,r=e.name;let s=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],p(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(p(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!g(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||m.add(t,"_placeholders",new v(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&h(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=p(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#r.forEach((t=>{t(e)})),this}};return O[r]=s,s}(t)}const w=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(E(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(p(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(a((function(){s(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(p(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(E(t))(structuredClone(Object.assign({},t))),c(t,n),n.seal()),Object.assign(n,t),setTimeout(a((function(){s(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(E(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);class A{constructor(t){}}class j extends A{#n;constructor(t){super(t),this.#n=t}get val(){return new FormData(this.#n.form).get(this.#n.name)}set val(t){[...this.#n.form.querySelectorAll(`input[type="radio"][name="${this.#n.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class S extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.checked}set val(t){this.#n.checked=t}}class _ extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value}set val(t){this.#n.value=t}}class k extends A{#n;#s=!1;constructor(t){super(t),this.#n=t,this.#s=t.multiple}get val(){const t=[];return[...this.#n.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#s?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#n.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class x extends A{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value||""}set val(t){this.#n.value=t}}const N=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],r={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let n=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":n=new j(t);break;case"checkbox":n=new S(t);break;default:n=new _(t)}break;case"select":n=new k(t);break;case"textarea":n=new x(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}n&&(m.add(t,e,n),Object.defineProperty(r,e,{enumerable:!0,configurable:!0,get:()=>n.val,set:t=>{n.val!==t&&(n.val=t)}}))}})),r};function T(t,e,r){let n=N(r);t[e]=Object.assign({},n),w(t,e),c(n,t[e]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{r.addEventListener("input",(r=>{t[e].notify()}))}))}return e})()));