@twobirds/microcomponents 0.0.83 → 0.0.85

package/public/documentation/MC.md

@@ -68,27 +68,43 @@ A special property attached to `HTMLElement` instances (when using `DC.add`) or
 
 Each microcomponent instance has a read-only `target` property providing a back-reference:
 
-- If the instance extends **`DC`** and was added via `DC.add`, `target` refers to the **DOM HTMLElement** it's attached to.
-- If the instance extends **`MC`** (or `DC`) and is nested within another component's `_mc` property, `target` refers to the **parent MC/DC instance**.
+- If the instance extends **`DC`** `.target` refers to the **DOM HTMLElement** it's attached to.
+- If the instance extends **`MC`** (or `DC`) and is nested within another component, `.target` refers to the **parent MC/DC instance**.
 
 This reference is managed using `WeakRef` internally by `McBase` to prevent circular references and potential memory leaks.
 
 ### Event System
 
-A custom event system using the `McEvent` class allows components to communicate.
+A CustomEvent system allows components to communicate. These event handlers bubble differently than native events.
+
+Any MC method name starting with `on` or `one` followed by an uppercase character will automatically be registered as a custom event handler in the DOM element. 
+
+The names maps like this: 
+**class method** `onHandlerMethod()` => **custom event handler** `_mcHandlerMethod` 
+
+
+- **Triggering:** 
+
+  Events are dispatched using the `trigger` method:
+  - `myDomElement._mc.trigger('handlerMethod', { ... } )` ... from outside.
+  - `this.trigger( 'handlerMethod', data )` ...inside the current MC instance.
+
+  native:
+  - `myDomElement.dispatchEvent('_mcHandlerMethod', { detail: { ... } } )`;
+
 
-- **Triggering:** Events are dispatched using the `trigger` method:
-  - `DC.trigger(targetElement, ...)`: Dispatches to all MCs on a specific DOM element. Handles bubbling (`u`/`d`).
-  - `this.trigger(...)`: Dispatches within the current MC instance and its potential nested MCs. Can also initiate bubbling if the instance is a `DC`.
 - **Handling:**
   - Components listen for events by defining methods named `onEventName` or `oneEventName` (for once-off handling).
-  - These are automatically detected by `autoAttachListeners`.
+  - These are automatically detected by `autoAttachListeners` internally.
   - Native DOM events matching this pattern on `DC` instances are also automatically bound to the target element.
-- **Bubbling:** Events triggered via `DC.trigger` or `dcInstance.trigger` can bubble:
+
+
+- **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).
   - `'d'`: Downwards. Event propagates to MCs on descendant elements (DOM tree).
-  - Combinations are possible (e.g., `'lu'`, `'ldu'`). Bubbling (`u`/`d`) occurs asynchronously via `setTimeout`.
+  - Any combination of the characters 'l','u', 'd' are possible (e.g., `'lu'`, `'ldu'`). 
+  - Bubbling (`u`/`d`) occurs asynchronously via `setTimeout`.
 
 ### Observables (Mention)
 
@@ -101,7 +117,7 @@ The `DC` class provides methods (`parent`, `ancestors`, `children`, `descendants
 
 ### Autoloading Concept
 
-An optional feature (`autoload()`) that automatically detects specific HTML tags (e.g., `<my-component>`) or elements with an `_mc="my-component"` attribute and attempts to dynamically load the corresponding JavaScript module (e.g., `/my/component.js`).
+An optional feature (`autoload()`) that automatically detects specific HTML tags (e.g., `<my-component>`) or elements with an `data-mc="my-component"` attribute and attempts to dynamically load the corresponding JavaScript module (e.g., `/my/component.js`).
 
 ### Important Rule
 
@@ -128,7 +144,6 @@ Base class for non-DOM or server-side components. Extends `McBase`.
 
 - **Instance Properties**:
   - `.target`: (Inherited from `McBase`) Refers to the parent MC/DC instance it's nested within.
-  - `._mc`: An object `{}` to hold nested microcomponent instances.
 - **Instance Methods**:
   - `.trigger(eventName, data)`: (Inherited) Triggers events locally within the instance and its nested `_mc` structure. Does not handle DOM bubbling.
 
@@ -138,26 +153,27 @@ Class for DOM-aware components. Extends `McBase`. **Client-side only.**
 
 - **Static Methods**:
   - `DC.add(domElement, key, mcInstance)`: Attaches an `mcInstance` (should be a `DC` or `MC`) to a `domElement` under the specified `key`. Creates `domElement._mc` if needed and sets the `_mc` attribute.
-  - `DC.remove(domElement, key)`: Removes the MC instance associated with `key` from `domElement._mc`. Removes the `_mc` attribute if the collection becomes empty.
+  - `DC.remove(domElement, key)`: Removes the MC instance associated with `key` from `domElement._mc`. Removes the `data-mc` attribute if the collection becomes empty.
   - `DC.trigger(domElement, eventName, data, bubble)`: Triggers an event on all MCs attached to `domElement`. Handles DOM bubbling (`'l'`, `'u'`, `'d'`).
 - **Instance Properties**:
   - `.target`: (Inherited from `McBase`) Refers to the DOM HTMLElement this `DC` instance is attached to (via `DC.add`).
-  - `._mc`: An object `{}` to hold nested microcomponent instances.
 - **Instance Methods**:
-  - `.parent(search?)`: Gets MC instances from the closest parent element that has attached MCs. Optionally filters by `search` key.
-  - `.ancestors(search?)`: Gets MC instances from all ancestor elements with attached MCs. Optionally filters by `search` key.
-  - `.children(search?)`: Gets MC instances from direct child elements with attached MCs. Optionally filters by `search` key.
-  - `.descendants(search?)`: Gets MC instances from all descendant elements with attached MCs. Optionally filters by `search` key.
-  - `.trigger(eventName, data, bubble)`: Triggers an event on this `DC` instance and its nested `_mc` structure. Can initiate DOM bubbling (`'l'`, `'u'`, `'d'`).
+  - `.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.
+  - `.trigger(eventName, data, bubble)`: Triggers an event on this `DC` instance. Can initiate DOM bubbling (`'l'`, `'u'`, `'d'`).
 
 ## Examples
 
 ### Typical Workflow
 
-1.  Define your component classes extending `MC` or `DC`.
-2.  Attach top-level `DC` instances to HTMLElements using `DC.add()`.
-3.  Nest `MC` or `DC` instances within others using the `._mc` property if needed.
-4.  Access other components via the `_mc` property, DOM traversal methods (`ancestors()`, `children()`, etc.), or event communication (`trigger`).
+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`).
 
 ### Attach Micro Components (`DC.add`)
 
@@ -168,34 +184,38 @@ 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 {
+
 	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._mc.myInner = new MyInnerClass(this); // 'this' becomes the target for MyInnerClass
+		this.myInner = new MyInnerClass(this); // 'this' becomes the target for MyInnerClass
 	}
+
 	doSomethingOuter() {
 		console.log('Outer action!');
 	}
 
-	// Example DOM event handler
 	onClick(event) {
 		console.log('Div clicked!', event);
 		// Access nested MC
-		this._mc.myInner?.doSomethingInner();
+		this.myInner.doSomethingInner();
 	}
 }
 
@@ -217,12 +237,13 @@ const myElement = document.getElementById('myDiv');
 
 DC.remove(myElement, 'myComponent');
 
-// If myElement._mc is now empty, the '_mc' attribute is also removed.
+// If myElement._mc is now empty, the 'data-mc' attribute is also removed.
 ```
+Hint: I have yet to find a usage example for this... so far it simply exists as a counterpart to `DC.add()`.
 
 ### Retrieve Micro Components
 
-Access attached components via the \_mc property of the target element or parent component.
+Access attached components via the `_mc` property of the target element or parent component.
 
 ```javascript
 // Get the container object for all MCs on an element
@@ -246,13 +267,13 @@ const targetElement = document.getElementById('myDiv');
 const eventData = { message: 'Hello from outside!' };
 
 // Trigger 'customEvent' locally on MCs attached to targetElement
-DC.trigger(targetElement, 'customEvent', eventData, 'l');
+trigger(targetElement, 'customEvent', eventData, 'l');
 
 // Trigger 'customEvent' and bubble up the DOM tree
-DC.trigger(targetElement, 'customEvent', eventData, 'u');
+trigger(targetElement, 'customEvent', eventData, 'u');
 
 // Trigger 'customEvent' locally, bubble up, and bubble down
-DC.trigger(targetElement, 'customEvent', eventData, 'lud');
+trigger(targetElement, 'customEvent', eventData, 'lud');
 ```
 
 2. Triggering from inside a component instance:
@@ -267,10 +288,6 @@ class MyTriggeringComponent extends DC {
 		// Trigger 'internalEvent' only on this instance and its nested _mc components
 		this.trigger('internalEvent', eventData); // Default bubble 'l'
 
-		// Trigger 'externalEvent' on sibling components attached to the same target element
-		// (and potentially bubble up/down based on the 'bubble' parameter)
-		DC.trigger(this.target, 'externalEvent', eventData, 'l'); // Trigger locally on siblings
-
 		// Trigger 'downwardEvent' on components attached to descendant elements
 		this.trigger('downwardEvent', eventData, 'd'); // Bubbles down from this component's target
 	}
@@ -287,48 +304,15 @@ class MyTriggeringComponent extends DC {
 		);
 	}
 
-	onExternalEvent(event) {
-		console.log(
-			`[${this.constructor.name}] received externalEvent:`,
-			event.data
-		);
-	}
-
 	onDownwardEvent(event) {
 		console.log(
-			`[${this.constructor.name}] received downwardEvent:`,
+			`[${this.constructor.name}] ERROR: received downwardEvent`,
 			event.data
 		);
 	}
 }
 ```
 
-### Retrieving Inner Micro Components
-
-Access nested components directly via the parent's `_mc` property.
-
-```javascript
-class Inner extends MC {
-	constructor(target) {
-		super(target);
-	}
-	someInnerMethod() {
-		console.log('Inner method called!');
-	}
-}
-
-class Outer extends DC {
-	constructor(target) {
-		super(target);
-		this._mc.inner = new Inner(this);
-	}
-
-	accessInner() {
-		this._mc?.inner.someInnerMethod();
-	}
-}
-```
-
 ### Navigating Parent/Ancestor MCs
 
 Use .parent() and .ancestors() (available on DC instances) to find components attached to elements higher up the DOM tree.
@@ -337,7 +321,7 @@ 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 first parent element with MCs
+const parentMcs = this.parent(); // Array of MC instances on the closest parent element that contains MCs
 console.log(parentMcs);
 
 const allAncestorMcs = this.ancestors(); // Array of all MC instances on all ancestor elements with MCs
@@ -394,9 +378,9 @@ class McWithHandlers extends DC {
 	}
 
 	// This is a custom event handler, not a native DOM event.
-	// It will be triggered by this.trigger('CustomAction') or DC.trigger(this.target, 'CustomAction')
+	// It will be triggered by this.trigger('CustomAction')
 	onCustomAction(mcEvent) {
-		console.log('Custom action triggered!', mcEvent.data);
+		console.log('Custom action triggered!', mcEvent.data, mcEvent.bubble);
 	}
 }
 
@@ -433,7 +417,7 @@ class MyLifecycleComponent extends DC {
 	}
 
 	oneInit(event) {
-		// This code runs shortly after the constructor finishes.
+		// called asynchronous after the constructor finishes.
 		console.log('MyLifecycleComponent oneInit called!', event);
 		// Safe to access this.target or setup things that depend on the instance being fully constructed.
 	}
@@ -475,7 +459,7 @@ The necessary code is fetched and executed only when these components actually a
 **./test/mymc.ts**
 ```typescript
 'use strict';
-import { DC, LooseObject } from '../microcomponents.js';
+import { DC } from '../microcomponents.js';
 
 export default class myMC extends DC {
     constructor(target: HTMLElement) {
@@ -483,7 +467,7 @@ export default class myMC extends DC {
     }
 
     oneInit() {
-        // console.log('testmc connected to DOM');
+        console.log('testmc connected to DOM');
     }
 }
 ```
@@ -502,13 +486,8 @@ defineCE(
 		constructor(target: HTMLElement) {
 			super(target);
 
-			const that = this; // to help minification, you can use 'this' throughout the constructor as well
-
-			delete that._mc; // no inner classes needed
-
-			let shadow = (that as DC).target.attachShadow({ mode: 'open' });
-			shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
-
+			let shadow = (this as DC).target.attachShadow({ mode: 'open' });
+			shadow.innerHTML = `<style>${this.css}</style>${this.template}`;
 		}
 
 		get template() {

package/public/documentation/elements.md

@@ -50,15 +50,15 @@ document.body.append( myTag );
 After:
 ```html
 <body>
-	<my-tag _mc>Hello World</my-tag>
+	<my-tag data-mc>Hello World</my-tag>
 </body>
 ```
 
 **Hints**
 - Your code extends the **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads#dc-class-extends-mcbase)** superclass. This superclass provides methods to traverse the DOM and select other micro components contained in HTML elements.
 - it is essential to understand that your web component code is only one of the numerous micro components that can reside inside `<my-tag>`
-- After you created a custom element, the custom element will contain a **property `<my-tag>._mc`** which contains your class instance.
-- Also the custom element then has an **attribute '_mc'** which will indicate that at least one micro component is attached to it.
+- After you created a custom element, the custom element will contain a **property `_mc`** which contains your class instance.
+- Also the custom element then has an **attribute `data-mc`** which will indicate that at least one micro component is attached to it.
 - Note that you can hand over data natively via parameters, when handling custom elements in above way.
 - The native way of usage, simply adding the tag to the template, is still possible. You have to use attributes then to hand in data.
 
@@ -98,7 +98,7 @@ defineCE(
 	['my-attribute'] // DOM node attributes to observe
 );
 
-let MyTag = getCE("my-tag"), // customElemtentRegistry.get("my-tag")
+let MyTag = getCE("my-tag"), // customElementRegistry.get("my-tag")
 	myTag = new MyTag(); // programmatically create a custom element instance
 
 document.body.append( myTag );
@@ -147,7 +147,7 @@ document.body.append( new MyTag() );
 **Hints**
 - You can add as many other micro components to the DOM node as you like.
 - The native web component lifecycle events will be triggered on **all** micro components.
-- The event parameter handed over is an internal event instance, that contains the original native event in its `data` property.
+- The event parameter handed over is an CustomEvent instance, that contains the original native event in its `detail` property.
 
 ## Native HTMLElement Event Handlers
 
@@ -182,7 +182,6 @@ document.body.append( new MyTag() );
 
 **Hints**
 - The native web component lifecycle events will be triggered on **all** micro components contained in the custom element, provided the MC contains a matching named handler.
-- The event parameter handed over is an internal event instance, that contains the original native event in its `data` property.
 
 # Lifecycle Event Handlers
 
@@ -216,7 +215,6 @@ document.body.append( new MyTag() );
 
 **Hints**
 - The native web component lifecycle events will be triggered on **all** micro components contained in the custom element, provided the specific micro component contains a matching named handler.
-- The event parameter handed over is an internal event instance that contains no data.
 
 # Custom Events
 
@@ -255,8 +253,7 @@ Alternatives:
 
 document
 	.querySelector( 'my-tag' )
-	?._mc
-	.trigger('specialEvent'); // ...on all micro components contained in <my-tag>
+	.dispatchEvent('specialEvent'); // ...on all micro components contained in <my-tag>
 
 /*
 traversing the DOM:

package/public/documentation/observables.md

@@ -53,7 +53,7 @@ export type Observable = {
 **Methods**
 
 - `observe(cb: Callback)`  
-  Registers a callback to be notified of changes.
+  - Registers a callback to be notified of changes.
 
 - `notify( enable?: boolean)`
   - Enables / Disables notifications.
@@ -62,10 +62,12 @@ export type Observable = {
   - Otherwise calls all registered callbacks with the current data.
 
 - `bind(target: HTMLElement | DocumentFragment | ShadowRoot)`  
-  Binds the observable to a DOM element, replacing placeholders with data values.
+  - Binds the observable to a DOM element, replacing placeholders with data values.
 
 
-## Example
+## Examples
+
+### How to use observables in native JS Code
 
 HTML:
 ```html
@@ -79,23 +81,107 @@ JavaScript:
 ```javascript
 import { observe } from './observables.js';
 
-const data = {
-  name: 'John',
-  age: 30,
+// define an object
+const address = { 
+  data: {
+    name: 'John',
+    age: 30,
+  },
+
+  otherData: {
+    whatever: true
+  }
+
 };
 
-observe(data); // all properties of the data object will be observed.
+// make all properties of the object observable
+observe(address);
+
+// OR: make one property of the object observable
+observe(address, 'data');
 
+// connect the observable to DOM structure placeholders
 const element = document.getElementById('user-card');
-data.bind(element);
+address.data.bind(element);
+```
+
+When `address.data.name` or `address.data.age` changes, or you reassign `address.data` completely, the DOM updates automatically.
+
+---
+
+### How to use observables in Micro Components
+
+HTML:
+```html
+<div id="user-card">
+  <p>Hello, {name}</p>
+  <p>Age: {age}</p>
+</div>
 ```
 
-When `data.name` or `data.age` changes, the DOM updates automatically.
+Micro Components are instances of classes. So you can store the class in the CustomElementRegistry:
+
+JavaScript: (**define** the micro component)
+`./user/card/data.js`
+```javascript
+import { 
+    DC, 
+    defineCE, 
+    getCE, 
+    Observable,
+    observe 
+} from './microcomponents.js';
+
+// define the micro component
+defineCE(
+	'user-card-data',
+
+	class UserCardData extends DC {
+		data: unknown;
+
+		constructor(target: HTMLElement, data?: { name: string = '', age: number = 0 }) {
+			super(target);
+
+      this.data = data;
+
+      // create this.data observable
+      observe(this); 
+
+      // 1 way bind formdata to the form DOM
+			(this.data as Observable).bind(target);
+		}
+
+	}
+);
+
+export default getCE('user-card-data');
+```
+
+JavaScript: (**use** the micro component)
+```javascript
+import { 
+    getCE, 
+} from './microcomponents.js';
+
+const element = document.getElementById('user-card');
+const Dc = getCE('user-card-data');
+const dc = new Dc( element, { name: 'Sarah', age: 33 } );
+
+// add the micro component to the DOM element
+DC.add(
+  element,
+  'userCardData',
+  dc
+);
+
+// change data
+element._mc.userCardData.data = { name: 'John', age: 27 };
+```
 
 ---
 
-## Notes
+## Hints
 
+- Native values (strings, numbers, booleans) can be made observable.
 - Only objects can be bound to the DOM.
-- Native values (strings, numbers, booleans) are wrapped in observable proxies.
 - Changes to observable properties trigger updates in bound DOM elements.

package/public/elements.d.ts.map

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

package/public/elements.js

@@ -6,16 +6,22 @@ class CeBaseClass extends HTMLElement {
         super();
     }
     connectedCallback() {
-        DC.trigger(this, 'Connected');
+        this.dispatchEvent(new CustomEvent('_mcConnected'));
+    }
+    connectedMoveCallback() {
+        this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
     }
     disconnectedCallback() {
-        DC.trigger(this, 'Disconnected');
+        this.dispatchEvent(new CustomEvent('_mcDisconnected'));
     }
     adoptedCallback() {
-        DC.trigger(this, 'Adopted');
+        this.dispatchEvent(new CustomEvent('_mcAdopted'));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        DC.trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+        this.dispatchEvent(new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } }));
+    }
+    formResetCallback() {
+        this.dispatchEvent(new CustomEvent('_mcFormReset'));
     }
 }
 function createNamedClass(name, ClassBody) {

package/public/elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAY,SAAQ,WAAW;IACpC;QACC,KAAK,EAAE,CAAC;IACT,CAAC;IAED,iBAAiB;QACf,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,oBAAoB;QAClB,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe;QACb,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAa,EAAE,QAAa;QACjE,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7E,CAAC;CACD;AAED,SAAS,gBAAgB,CACxB,IAAY,EACZ,SAAwC;IAExC,OAAO,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAClE,CAAC;AAED,SAAS,OAAO,CAAC,IAAS;IACxB,OAAO,OAAO,IAAI,KAAK,UAAU;WAC5B,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,QAAQ,CACvB,OAAe,EACf,eAAyD,EACzD,qBAA+B,EAAE;IAEjC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,4BAA4B,OAAO,uBAAuB,CAAC,CAAC;QACzE,OAAO;IACR,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CACd,sEAAsE,CACtE,CAAC;IACH,CAAC;IAED,IAAI,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAGlC,IAAK,CAAC,OAAO,CAAE,eAAe,CAAC,SAAS,CAAC,WAAW,CAAE,EAAE,CAAC;QACxD,cAAc,CAAC,MAAM,CACpB,OAAO,EAEP,eAAe,CACf,CAAC;QACF,OAAO;IACR,CAAC;IAGD,IAAK,CAAC,CAAE,eAAe,CAAC,SAAS,YAAY,MAAM,CAAE,EAAE,CAAC;QACvD,cAAc,CAAC,MAAM,CACpB,OAAO,EAEP,eAAe,CACf,CAAC;QACF,OAAO;IACR,CAAC;IAGD,cAAc,CAAC,MAAM,CACpB,OAAO,EACP,gBAAgB,CACf,IAAI,EACJ,KAAM,SAAQ,WAAW;QACxB,QAAQ,CAAM;QAEd,YAAY,IAAU;YACrB,KAAK,EAAE,CAAC;YAER,MAAM,QAAQ,GAAG,OAAO,CAAE,eAAe,CAAE;gBAE1C,CAAC,CAAC,IAAI,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC;gBACjC,CAAC,CAAC,eAAe,CAAC;YACnB,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC9B,CAAC;QAED,MAAM,KAAK,kBAAkB;YAC5B,OAAO,kBAAkB,CAAC;QAC3B,CAAC;KACD,CACD,CACD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,OAAe;IACpC,OAAO,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC"}
+{"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"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"}

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

package/public/elements.ts

@@ -9,19 +9,32 @@ class CeBaseClass extends HTMLElement {
 	}
 
 	connectedCallback() {
-		(DC as any).trigger(this, 'Connected');
+		this.dispatchEvent( new CustomEvent('_mcConnected') );
+	}
+
+	connectedMoveCallback() {
+		this.dispatchEvent( new CustomEvent('_mcConnectedMove') );
 	}
 
 	disconnectedCallback() {
-		(DC as any).trigger(this, 'Disconnected');
+		this.dispatchEvent( new CustomEvent('_mcDisconnected') );
 	}
 
 	adoptedCallback() {
-		(DC as any).trigger(this, 'Adopted');
+		this.dispatchEvent( new CustomEvent('_mcAdopted') );
 	}
 
 	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-		(DC as any).trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+		this.dispatchEvent( 
+			new CustomEvent(
+				'_mcAttributeChanged', 
+				{ detail: { name, oldValue, newValue } } 
+			) 
+		);
+	}
+
+	formResetCallback(){
+		this.dispatchEvent( new CustomEvent('_mcFormReset') );
 	}
 }
 

package/public/formValues.js

@@ -1,6 +1,6 @@
 'use strict';
 import { copyGettersSetters } from './helpers.js';
-import { DC, addListener } from './MC.js';
+import { DC } from './MC.js';
 import { observe } from './observables.js';
 const getInputName = (e) => {
     return e.tagName.toLowerCase();
@@ -154,7 +154,7 @@ export function formValues(targetObject, propertyName, dom) {
     observe(targetObject, propertyName);
     copyGettersSetters(handlers, targetObject[propertyName]);
     [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-        addListener(input, 'input', (ev) => {
+        input.addEventListener('input', (ev) => {
             targetObject[propertyName].notify();
         });
     });