@twobirds/microcomponents 0.0.46 → 0.0.50

package/public/documentation/observe.md

@@ -0,0 +1,317 @@
+Okay, I understand. You want me to modify the code examples within the Markdown documentation so that they demonstrate how to use the observe() functionality inside a microcomponent's constructor (specifically, an MC constructor). I'll also keep the output as a JavaScript variable assignment (let md = "...";).
+
+Here's the updated version of the code, with the examples adapted to be used within an MC constructor:
+JavaScript
+
+let md = `#   Observable Properties Functionality (`observe()`)
+
+This document explains the `observe()` functionality, a utility for making properties of JavaScript objects observable. When an observable property's value changes, registered callback functions are automatically notified, enabling reactive data binding and UI updates.
+
+## Table of Contents
+
+- [Core Concept](#core-concept)
+- [Function Signature](#function-signature)
+- [How it Works](#how-it-works)
+- [Key Features](#key-features)
+- [Usage](#usage)
+  - [Making Properties Observable (within MC Constructor)](#making-properties-observable-within-mc-constructor)
+  - [Registering Observers (`observe()` method on Observable) (within MC Constructor)](#registering-observers-observe-method-on-observable-within-mc-constructor)
+  - [Binding Observable Objects to the DOM (`bind()` method on Observable Object) (within MC Constructor)](#binding-observable-objects-to-the-dom-bind-method-on-observable-object-within-mc-constructor)
+  - [Manually Notifying Observers (`notify()` method on Observable) (within MC Constructor)](#manually-notifying-observers-notify-method-on-observable-within-mc-constructor)
+- [Examples of Useful Usage (within MC Constructor)](#examples-of-useful-usage-within-mc-constructor)
+  - [Simple Data Binding (within MC Constructor)](#simple-data-binding-within-mc-constructor)
+  - [Automatic UI Updates in Web Components (within MC Constructor)](#automatic-ui-updates-in-web-components-within-mc-constructor)
+  - [Centralized State Management (within MC Constructor)](#centralized-state-management-within-mc-constructor)
+  - [Form Input Synchronization (within MC Constructor)](#form-input-synchronization-within-mc-constructor)
+- [Considerations](#considerations)
+  - [Performance](#performance)
+  - [Deep Object Observation](#deep-object-observation)
+  - [Type Changes](#type-changes)
+- [Related Concepts](#related-concepts)
+
+## <a name="core-concept"></a>Core Concept
+
+The `observe()` function transforms specified properties of a JavaScript object into "observable" properties. This means that changes to these properties can be intercepted, and registered listeners (callbacks) can be automatically invoked to react to these changes. This pattern is fundamental for implementing reactive programming paradigms, where UI or other parts of an application automatically update in response to data modifications.
+
+## <a name="function-signature"></a>Function Signature
+
+```
+observe(target: LooseObject, propertyName?: string): LooseObject
+```
+
+- `target: LooseObject`: The JavaScript object whose properties you want to make observable. `LooseObject` is likely a type definition for a generic object (e.g., `{ [key: string]: any }`).
+- `propertyName?: string`: An optional string specifying a single property of the `target` object to make observable. If this argument is omitted, the function attempts to make all own properties of the `target` observable.
+- `returns: LooseObject`: The original `target` object, now with the specified (or all) properties made observable.
+
+## <a name="how-it-works"></a>How it Works
+
+The `observe()` function achieves observability by:
+
+1.  **Redefining Properties:** It uses `Object.defineProperty` to redefine the getter and setter of the `target` property (or properties).
+2.  **Creating an `Observable` Wrapper:** For each observable property, it creates an instance of a dynamically generated `Observable` class that extends the original constructor of the property's value (e.g., `String`, `Number`, `Object`, `Array`). This wrapper holds the actual value and manages a list of observer callbacks.
+3.  **Intercepting Access (Getter):** When an observable property is accessed, the getter returns the `Observable` wrapper instance. For observable objects, it also sets up a debounced function to check for deep changes within the object at a later point.
+4.  **Intercepting Modification (Setter):** When an observable property is assigned a new value, the setter:
+    - Checks if the type of the new value is compatible with the old value.
+    - Creates a new `Observable` wrapper with the new value.
+    - Notifies all registered observer callbacks associated with that property (or the entire observable object, depending on how observation is set up).
+5.  **Managing Callbacks:** Each `Observable` wrapper maintains a list of callback functions registered through its `observe()` method. These callbacks are invoked when the observable's value changes.
+6.  **DOM Binding (`bind()`):** For observable objects, the `bind()` method facilitates automatic synchronization with placeholders in the DOM using the `Placeholders` DOM Component.
+
+## <a name="key-features"></a>Key Features
+
+- Selective Observability: You can choose to make specific properties observable or observe all properties of an object.
+- Type Checking: The setter attempts to prevent changing the data type of an observable property.
+- Callback Mechanism: Allows registering multiple functions to be notified of changes.
+- DOM Binding Integration: Provides a `bind()` method for observable objects to automatically update DOM elements containing placeholders.
+- Debounced Deep Change Detection: For observable objects, changes within the object are detected using a debounced deep equality check to optimize performance.
+
+## <a name="usage"></a>Usage
+
+### <a name="making-properties-observable-within-mc-constructor"></a>Making Properties Observable (within MC Constructor)
+
+To make properties of an object observable within an MC constructor, call the `observe()` function with the object as the `target`. You can optionally specify a `propertyName` to observe only a single property.
+
+```javascript
+import { observe } from './observables.js'; // Assuming your observe() function is in this file
+import { MC } from './MC.js'; // Import your MC class
+
+class MyComponent extends MC {
+	constructor(target) {
+		super(target);
+
+		this.myData = {
+			name: 'Initial Name',
+			count: 0,
+			settings: {
+				theme: 'light',
+			},
+		};
+
+		observe(this.myData); // Make all properties of this.myData observable
+
+		this.myData.name = 'Updated Name'; // Observers of this.myData.name will be notified
+		this.myData.count++; // Observers of this.myData.count will be notified
+		this.myData.settings.theme = 'dark'; // Observers of this.myData.settings will be notified
+	}
+}
+```
+
+```javascript
+import { observe } from './observables.js';
+import { MC } from './MC.js';
+
+class MyConfigComponent extends MC {
+	constructor(target) {
+		super(target);
+
+		this.config = {
+			apiKey: 'your_api_key',
+			isEnabled: true,
+		};
+
+		observe(this.config, 'apiKey'); // Only make the apiKey property observable
+
+		this.config.apiKey = 'new_api_key'; // Observers of this.config.apiKey will be notified
+		this.config.isEnabled = false; // Observers of this.config.isEnabled will NOT be directly notified by observe()
+	}
+}
+```
+
+### <a name="registering-observers-observe-method-on-observable-within-mc-constructor"></a>Registering Observers (`observe()` method on Observable) (within MC Constructor)
+
+When a property becomes observable, its getter will return an `Observable` wrapper. This wrapper has an `observe()` method to register callback functions that will be executed when the observable's value changes.
+
+```javascript
+import { observe } from './observables.js';
+import { MC } from './MC.js';
+
+class MyStateComponent extends MC {
+	constructor(target) {
+		super(target);
+
+		this.state = {
+			message: 'Hello',
+		};
+		observe(this.state);
+
+		this.state.message.observe((newValue) => {
+			console.log('Message changed to:', newValue);
+		});
+
+		this.state.message = 'World'; // Output: Message changed to: World
+	}
+}
+```
+
+### <a name="binding-observable-objects-to-the-dom-bind-method-on-observable-object-within-mc-constructor"></a>Binding Observable Objects to the DOM (`bind()` method on Observable Object) (within MC Constructor)
+
+If an observable property's value is an object, it will have a `bind()` method. This method allows you to automatically connect the observable object's properties to placeholders (`{propertyName}`) within a specified DOM element (or its descendants). This relies on the `Placeholders` DOM Component.
+
+```javascript
+import { observe } from './observables.js';
+import { MC } from './MC.js';
+
+class MyUserDataComponent extends MC {
+	constructor(target) {
+		super(target);
+
+		this.userData = {
+			firstName: 'John',
+			lastName: 'Doe',
+		};
+		observe(this.userData);
+
+		this.outputElement = document.getElementById('output'); // Assuming you have an element with id="output"
+		this.userData.bind(this.outputElement);
+
+		this.outputElement.innerHTML = `
+            <p>First Name: {firstName}</p>
+            <p>Last Name: {lastName}</p>
+        `;
+
+		this.userData.firstName = 'Jane'; // The text content of the first <p> will automatically update
+	}
+}
+```
+
+### <a name="manually-notifying-observers-notify-method-on-observable-within-mc-constructor"></a>Manually Notifying Observers (`notify()` method on Observable) (within MC Constructor)
+
+The `Observable` wrapper also has a `notify()` method that you can call manually to force the registered observers to be executed. This can be useful in specific scenarios where changes might not be directly detected by the setter (though the debounced deep check for objects aims to handle this).
+
+```javascript
+import { observe } from './observables.js';
+import { MC } from './MC.js';
+
+class MyDataItemsComponent extends MC {
+	constructor(target) {
+		super(target);
+
+		this.data = {
+			items: [],
+		};
+		observe(this.data);
+
+		this.data.items.observe(() => {
+			console.log('Items array changed:', this.data.items);
+		});
+
+		// Directly modifying the array might not always trigger the setter
+		this.data.items.push('new item');
+		this.data.items.notify(); // Manually trigger the observers
+	}
+}
+```
+
+## <a name="examples-of-useful-usage-within-mc-constructor"></a>Examples of Useful Usage (within MC Constructor)
+
+### <a name="simple-data-binding-within-mc-constructor"></a>Simple Data Binding (within MC Constructor)
+
+Observables are excellent for simple data binding scenarios where you want to keep different parts of your application synchronized with a piece of data.
+
+```javascript
+import { observe } from './observables.js';
+import { MC } from './MC.js';
+
+class MyInputComponent extends MC {
+	constructor(target) {
+		super(target);
+
+		this.viewModel = {
+			inputValue: '',
+		};
+		observe(this.viewModel);
+
+		this.inputElement = document.getElementById('myInput'); // Assuming you have an input with id="myInput"
+		this.outputSpan = document.getElementById('outputValue'); // Assuming you have a span with id="outputValue"
+
+		this.inputElement.addEventListener('input', (event) => {
+			this.viewModel.inputValue = event.target.value;
+		});
+
+		this.viewModel.inputValue.observe((newValue) => {
+			this.outputSpan.textContent = newValue;
+		});
+	}
+}
+```
+
+### <a name="automatic-ui-updates-in-web-components-within-mc-constructor"></a>Automatic UI Updates in Web Components (within MC Constructor)
+
+As demonstrated in the `my-tag` example, observables can be used to automatically update the template of a web component when its internal data changes, leading to reactive and dynamic UIs.
+
+### <a name="centralized-state-management-within-mc-constructor"></a>Centralized State Management (within MC Constructor)
+
+Observables can form the basis of a simple state management system. By making the application's state an observable object, different components can observe relevant parts of the state and automatically update when those parts change.
+
+```javascript
+import { observe } from './observables.js';
+import { MC } from './MC.js';
+
+class MyAppStateComponent extends MC {
+	constructor(target) {
+		super(target);
+
+		this.appState = {
+			user: null,
+			isLoading: false,
+			errorMessage: null,
+		};
+		observe(this.appState);
+
+		// Component A observes the user
+		this.appState.user.observe((user) => {
+			if (user) {
+				console.log('User logged in:', user.name);
+				// Update UI to show user info
+			} else {
+				console.log('User logged out');
+				// Update UI to reflect logged out state
+			}
+		});
+
+		// Component B observes the loading state
+		this.appState.isLoading.observe((loading) => {
+			if (loading) {
+				console.log('Loading...');
+				// Show loading indicator
+			} else {
+				console.log('Loading complete.');
+				// Hide loading indicator
+			}
+		});
+
+		// Actions can update the state
+		this.loginUser = (username, password) => {
+			this.appState.isLoading = true;
+			// ... perform login logic ...
+			setTimeout(() => {
+				this.appState.user = { name: username };
+				this.appState.isLoading = false;
+			}, 1000);
+		};
+
+		this.loginUser('john.doe', 'password');
+	}
+}
+```
+
+## <a name="considerations"></a>Considerations
+
+### <a name="performance"></a>Performance
+
+While observables provide a convenient way to handle data changes, be mindful of performance, especially with deeply nested objects or a large number of observers. Excessive notifications and deep equality checks can potentially impact performance.
+
+### <a name="deep-object-observation"></a>Deep Object Observation
+
+The provided `observe()` implementation includes a debounced deep equality check for object properties. However, for very complex or frequently changing nested objects, you might consider more optimized deep observation techniques if performance becomes an issue.
+
+### <a name="type-changes"></a>Type Changes
+
+The setter in the `observe()` function attempts to prevent changing the data type of an observable property. Be aware of this limitation when working with observable data.
+
+## <a name="related-concepts"></a>Related Concepts
+
+- Reactive Programming: A programming paradigm centered around the propagation of change.
+- Data Binding: The process of synchronizing data between different parts of an application, often between the model and the view.
+- DOM Components: Reusable units of behavior associated with DOM elements, as provided by the Microcomponent Framework.
+- Placeholders: Dynamic markers within HTML that can be automatically updated with data.

package/public/elements.js

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

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,SAAS,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAY,SAAQ,WAAW;IACpC;QACC,KAAK,EAAE,CAAC;IACT,CAAC;IAED,iBAAiB;QACf,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,oBAAoB;QAClB,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe;QACb,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAa,EAAE,QAAa;QACjE,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7E,CAAC;CACD;AAED,SAAS,gBAAgB,CACxB,IAAY,EACZ,SAAwC;IAExC,OAAO,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,QAAQ,CACvB,OAAe,EACf,eAA8C,EAC9C,qBAA+B,EAAE;IAEjC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,4BAA4B,OAAO,uBAAuB,CAAC,CAAC;QACzE,OAAO;IACR,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CACd,sEAAsE,CACtE,CAAC;IACH,CAAC;IAED,IAAI,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAElC,cAAc,CAAC,MAAM,CACpB,OAAO,EACP,gBAAgB,CACf,IAAI,EACJ,KAAM,SAAQ,WAAW;QACxB,QAAQ,CAAM;QAEd,YAAY,IAAU;YACrB,KAAK,EAAE,CAAC;YACR,IAAI,QAAQ,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAC9C,EAAU,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QACvC,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":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAY,SAAQ,WAAW;IACpC;QACC,KAAK,EAAE,CAAC;IACT,CAAC;IAED,iBAAiB;QACf,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,oBAAoB;QAClB,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe;QACb,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAa,EAAE,QAAa;QACjE,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7E,CAAC;CACD;AAED,SAAS,gBAAgB,CACxB,IAAY,EACZ,SAAwC;IAExC,OAAO,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,QAAQ,CACvB,OAAe,EACf,eAA8C,EAC9C,qBAA+B,EAAE;IAEjC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,4BAA4B,OAAO,uBAAuB,CAAC,CAAC;QACzE,OAAO;IACR,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CACd,sEAAsE,CACtE,CAAC;IACH,CAAC;IAED,IAAI,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAElC,cAAc,CAAC,MAAM,CACpB,OAAO,EACP,gBAAgB,CACf,IAAI,EACJ,KAAM,SAAQ,WAAW;QACxB,QAAQ,CAAM;QAEd,YAAY,IAAU;YACrB,KAAK,EAAE,CAAC;YACR,IAAI,QAAQ,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAC/C,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC9B,CAAC;QAED,MAAM,KAAK,kBAAkB;YAC5B,OAAO,kBAAkB,CAAC;QAC3B,CAAC;KACD,CACD,CACD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,OAAe;IACpC,OAAO,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC"}

package/public/elements.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.elements=t():e.elements=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{defineCE:()=>y,getCE:()=>w});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));class o{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!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(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function a(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function u(e){return e&&e instanceof HTMLElement}function l(e,t,r={}){let n=e;if(!n._mc){let t=b?.debug;b.debug=!1,n._mc=new b(e),b.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&e.setAttribute("_mc","")),r}function d(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={},n="l"){let i=e?._mc;if(!i)return;let c=t instanceof o?new o(t.type,t.data,"l"):new o(t,r,"l"),s="string"!=typeof t?t:new o(t,r,n);[...Object.values(i)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&f(e,s)}function f(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=a(e,"",!0)?.[0].target;r&&b.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&b.trigger(e,t)}))}),0)}i()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>c.add(e)));class g{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==b&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!i()||e.constructor===b)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),i=n.replace(/^on[e]{0,1}/,""),s=i.toLowerCase();o&&Object.defineProperty(e,"on"+i,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),c.has("on"+s)&&function(e,t,r,n=!1,o=!1){let i={once:!1};n&&(i.capture=n),o&&(i.once=o),e.addEventListener(t,r,i)}(t,s,(e=>{r.trigger(i,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class m extends g{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let n=this;if(n.constructor===m||n.constructor===b){let i=e instanceof o?new o(e.type,e.data,"l"):new o(e,t,"l"),c="string"!=typeof e?e:new o(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(i)})),void(/[ud]/.test(c.bubble)&&f(n.target,c))}if(n instanceof m||n instanceof b){const n=this,i="string"!=typeof e?e:new o(e,t,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{_mc={};constructor(e,t=!1){super(e)}static add=l;static remove=d;static trigger=p;trigger(e,t={},r){m.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return u(t)?a(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return u(t)?a(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!u(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=s([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return u(t)?s([...t.querySelectorAll("*[_mc]")],e):[]}}class h extends HTMLElement{constructor(){super()}connectedCallback(){b.trigger(this,"Connected")}disconnectedCallback(){b.trigger(this,"Disconnected")}adoptedCallback(){b.trigger(this,"Adopted")}attributeChangedCallback(e,t,r){b.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:r})}}function y(e,t,r=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let n=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(n,class extends h{instance;constructor(e){super();let r=new t(this,e);b.add(this,n,r)}static get observedAttributes(){return r}}))}function w(e){return customElements.get(e)}return t})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.elements=t():e.elements=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{defineCE:()=>y,getCE:()=>w});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));class o{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!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(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function a(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function u(e){return e&&e instanceof HTMLElement}function l(e,t,r={}){let n=e;if(!n._mc){let t=b?.debug;b.debug=!1,n._mc=new b(e),b.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&e.setAttribute("_mc","")),r}function d(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={},n="l"){let i=e?._mc;if(!i)return;let c=t instanceof o?new o(t.type,t.data,"l"):new o(t,r,"l"),s="string"!=typeof t?t:new o(t,r,n);[...Object.values(i)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&f(e,s)}function f(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=a(e,"",!0)?.[0].target;r&&b.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&b.trigger(e,t)}))}),0)}i()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>c.add(e)));class g{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==b&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!i()||e.constructor===b)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),i=n.replace(/^on[e]{0,1}/,""),s=i.toLowerCase();o&&Object.defineProperty(e,"on"+i,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),c.has("on"+s)&&function(e,t,r,n=!1,o=!1){let i={once:!1};n&&(i.capture=n),o&&(i.once=o),e.addEventListener(t,r,i)}(t,s,(e=>{r.trigger(i,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class m extends g{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let n=this;if(n.constructor===m||n.constructor===b){let i=e instanceof o?new o(e.type,e.data,"l"):new o(e,t,"l"),c="string"!=typeof e?e:new o(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(i)})),void(/[ud]/.test(c.bubble)&&f(n.target,c))}if(n instanceof m||n instanceof b){const n=this,i="string"!=typeof e?e:new o(e,t,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{_mc={};constructor(e,t=!1){super(e)}static add=l;static remove=d;static trigger=p;trigger(e,t={},r){m.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return u(t)?a(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return u(t)?a(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!u(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=s([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return u(t)?s([...t.querySelectorAll("*[_mc]")],e):[]}}new Map;class h extends HTMLElement{constructor(){super()}connectedCallback(){b.trigger(this,"Connected")}disconnectedCallback(){b.trigger(this,"Disconnected")}adoptedCallback(){b.trigger(this,"Adopted")}attributeChangedCallback(e,t,r){b.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:r})}}function y(e,t,r=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let n=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(n,class extends h{instance;constructor(e){super();let r=new t(this,e);b.add(this,n,r)}static get observedAttributes(){return r}}))}function w(e){return customElements.get(e)}return t})()));