@twobirds/microcomponents 0.0.83 → 0.0.85

package/public/test/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/test/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/test/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/test/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/test/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();
         });
     });

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

package/public/test/formValues.ts

@@ -1,7 +1,7 @@
 'use strict';
 
 import { LooseObject, copyGettersSetters } from './helpers.js';
-import { DC, addListener } from './MC.js';
+import { DC, on } from './MC.js';
 import { observe } from './observables.js';
 
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
@@ -216,8 +216,8 @@ export function formValues(
 	copyGettersSetters(handlers, targetObject[propertyName]);
 
 	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-		addListener(input as inputTypes, 'input', (ev: Event) => {
-			//console.log('keyup', ev);
+		input.addEventListener('input', (ev) => {
+			//console.log('input event', input, ev);
 			targetObject[propertyName].notify();
 		});
 	});

package/public/test/microcomponents.d.ts

@@ -1,6 +1,5 @@
 export * from './helpers.js';
 export * from './MC.js';
-export * from './McEvent.js';
 export * from './elements.js';
 export * from './observables.js';
 export * from './formValues.js';

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

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

package/public/test/microcomponents.js

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

package/public/test/microcomponents.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.microcomponents=t():e.microcomponents=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={};function r(e){return e&&e.constructor&&e.constructor===Object}function n(e){let t={};return[...Object.keys(e)].sort().forEach((o=>{r(e[o])?t[o]=n(e[o]):t[o]=e[o]})),t}function o(e,t=!0){let r={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const n=o(e[t],!1);for(const e in n)r[t+"."+e]=n[e]}else r[t]=e[t]})),t?n(r):r}function c(e,t){return JSON.stringify(o(e))===JSON.stringify(o(t))}function s(e,t={}){let r=e.constructor===String?e.split("."):e;if(t&&r[0]&&t[r[0]])return t[r[0]].constructor===Object&&r.length>1?s(r.splice(1),t[r[0]]):t[r[0]];console.warn("ns",r[0],"not in",t)}function a(e,t){var n=Array.from(arguments);if(n.length>2){for(;n.length>1;)n[0]=a(n[0],n[1]),n.splice(1,1);return n[0]}if("string"==typeof e)e.match(/\{[^\{\}]*\}/g)?.forEach((function(r){var n=s(r.substring(1,r.length-1),t);void 0!==n&&(e=e.replace(r,n))}));else if(r(e))switch(e.constructor){case Object:Object.keys(e).forEach((function(r){e.hasOwnProperty(r)&&(e[r]=a(e[r],t))}));break;case Array:e.forEach((function(r,n,o){o[n]=a(e[n],t)}))}return e}function i(e){return e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("")}function l(e,t){let r;return()=>{clearTimeout(r),r=setTimeout((function(){e(...arguments)}),t)}}function u(e){let t=document.createElement("template");return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,"<$1$2></$1>"),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function f(e,t){const r=Object.getOwnPropertyDescriptors(e);for(const[e,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(t,e,n)}e.r(t),e.d(t,{DC:()=>N,MC:()=>k,McBase:()=>S,McEvent:()=>h,addListener:()=>v,autoload:()=>P,copyGettersSetters:()=>f,debounce:()=>l,deepEqual:()=>c,defineCE:()=>H,flattenObject:()=>o,formValues:()=>X,getCE:()=>I,htmlToElements:()=>u,isNativeObject:()=>r,kebabToPascal:()=>i,nameSpace:()=>s,observe:()=>Z,parse:()=>a,removeListener:()=>E,sortObject:()=>n});var d=new Function("try {return this===window;}catch(e){ return false;}");let p=new Set;d()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>p.add(e)));class h{#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 m=new Function("try {return this===window;}catch(e){ return false;}");let b=new Set;function g(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 y(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 O(e){return e&&e instanceof HTMLElement}function v(e,t,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),e.addEventListener(t,r,c)}function E(e,t,r){e.removeEventListener(t,r)}function w(e,t,r={}){let n=e;if(!n._mc){let t=N?.debug;N.debug=!1,n._mc=new N(e),N.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),r}function A(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 j(e,t,r={},n="l"){let o=e?._mc;if(!o)return;let c=t instanceof h?new h(t.type,t.data,"l"):new h(t,r,"l"),s="string"!=typeof t?t:new h(t,r,n);[...Object.values(o)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&_(e,s)}function _(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=y(e,"",!0)?.[0].target;r&&N.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&N.trigger(e,t)}))}),0)}m()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>b.add(e)));class S{_target;__mc={};constructor(e,t=!1){var r;this._target=new WeakRef(e||{}),(r=this).constructor!==N&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!m()||e.constructor===N)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),c=n.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();o&&Object.defineProperty(e,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),b.has("on"+s)&&v(t,s,(e=>{r.trigger(c,e)}),!1,o)}))}}(this)}get target(){return this._target.deref()}get _mc(){return this.__mc}}class k extends S{constructor(e){super(e)}static trigger=j;trigger(e,t={},r="l"){let n=this;if(n.constructor===k||n.constructor===N){let o=e instanceof h?new h(e.type,e.data,"l"):new h(e,t,"l"),c="string"!=typeof e?e:new h(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&_(n.target,c))}if(n instanceof k||n instanceof N){const n=this,o="string"!=typeof e?e:new h(e,t,r),c="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof n[c]||(n[c](o),n.hasOwnProperty(c)&&delete n[c])),o.stopped||"l"===o.bubble)return n;/[ud]/.test(o.bubble)&&_(n.target,o)}}}class N extends S{constructor(e,t=!1){super(e)}static add=w;static remove=A;static trigger=j;trigger(e,t={},r){k.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return O(t)?y(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return O(t)?y(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!O(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=g([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return O(t)?g([...t.querySelectorAll("*[_mc]")],e):[]}}const C=new Set;function T(e){if(C.has(e))return;C.add(e);const t="./"+e.split("-").join("/")+".js",r=document.createElement("script");r.setAttribute("src",t),r.setAttribute("blocking","render"),r.async=!0,r.setAttribute("type","module"),r.setAttribute("data-name",e),r.setAttribute("loading",""),customElements.whenDefined(e).then((()=>{const t=Array.from(document.querySelectorAll(`[_mc*="${e}"]`)).filter((e=>e instanceof HTMLElement));if(0===t.length)return;const r=customElements.get(e);t.forEach((t=>{N.add(t,r.name,new r(t));const n=t.getAttribute("_mc").split(" ").filter((t=>t!==e&&""!==t)).join(" ");t.setAttribute("_mc",n)})),document.head.querySelector('script[data-name="${elementName}]"')?.remove()})),v(r,"load",(t=>{C.delete(e)})),v(r,"error",(e=>{console.error("could not load MC code from",t)})),document.head.append(r)}function L(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!C.has(e.tagName.toLowerCase()))).forEach((e=>{T(e.tagName.toLowerCase())})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>""!==e));t?.forEach((e=>{T(e)}))}))}let x=!1,M=null;function P(e=!0){return e?(x=e,M=new MutationObserver(L),setTimeout((()=>{M.observe(document.body,{childList:!0,subtree:!0}),L()}),5),window.autoload=window.autoload||P,x):(M?.disconnect(),M=null,x)}P.state={loadingMCs:C};class D extends HTMLElement{constructor(){super()}connectedCallback(){N.trigger(this,"Connected")}disconnectedCallback(){N.trigger(this,"Disconnected")}adoptedCallback(){N.trigger(this,"Adopted")}attributeChangedCallback(e,t,r){N.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:r})}}function q(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}function H(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=i(e);q(t.prototype.constructor)&&t.prototype instanceof S?customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(n,class extends D{instance;constructor(e){super();const r=q(t)?new t(this,e):t;N.add(this,n,r)}static get observedAttributes(){return r}})):customElements.define(e,t)}function I(e){return customElements.get(e)}function V(e){return null!=e&&"object"==typeof e}function $(e){let t=new Set,r=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(r))).forEach((t=>{let n=new Set(e.getAttribute(t)?.match(r));n.forEach((e=>n.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(r))).forEach((e=>{(e.nodeValue||"").match(r).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}const F=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class G extends N{data={};oldDisplay="";constructor(e){super(e),$(e).forEach((e=>this.data[e]="")),Z(this),this.#n()}#n(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((t=>{let r=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=e.getAttribute(t),o=>{let c=n;r.forEach((e=>{c=c.replace(e,o[e.replace(/[\{\}]/g,"")])})),e.setAttribute(t,c)}))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{t=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((t=>o=>{let c=t;n.forEach((e=>{c=c.replace(e,o[e.replace(/[\{\}]/g,"")])})),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=c})(r.nodeValue)),this.oldDisplay=e.getAttribute("style)")||"",t&&!F.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(e){let t={};Object.keys(e.data).forEach((r=>{this.data.hasOwnProperty(r)&&(t[r]=e.data[r])})),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}}const J={};function R(e){let t=e.constructor.name;return J[t]||function(e){const t=e.constructor,r=t.name;let n=class extends t{#o=!0;#c=[];constructor(e){super(e),this.constructor.callbacks=[],V(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}get callbacks(){return this.#c}set callbacks(e){this.#c=e}observe(e){return this.#c.push(e),this}bind(e){if(V(this.valueOf())){!function(e){var t;(t=e,[t].concat([...t.querySelectorAll("*")]).filter((e=>!!$(e).length)).filter((e=>"STYLE"!==e?.tagName)).reverse()).forEach((e=>{e?._mc?._placeholders||N.add(e,"_placeholders",new G(e))}))}(e);const t=[e,...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),r=function(e){let r=o(e);t.forEach((e=>{e&&e._mc.trigger("data",r)}))};this.#c.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(e){let t=V(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==e&&(this.#o=e),this.#c.forEach((e=>{e(t)})),this}};return J[r]=n,n}(e)}const Z=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if(e.hasOwnProperty(t)&&"function"!=typeof e[t]&&!e?.[t]?.constructor?.prototype?.observe){if("_"===t[0]||void 0===e?.[t])return e;let r=e[t],n=new(R(r))(r);Object.defineProperty(e,t,{enumerable:!0,get(){if(V(n.valueOf())){let e=structuredClone(Object.assign({},n));setTimeout(l((function(){c(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}return n},set(e){if(typeof e==typeof n.valueOf())if(V(n.valueOf())&&n.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(R(e))(structuredClone(Object.assign({},e))),f(e,n),n.seal()),Object.assign(n,e),setTimeout(l((function(){c(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}else{let t=n.valueOf(),r=n.callbacks;e!==t&&(n=new(R(e))(e),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof e)}}),e[t]=r}})),e);class z{constructor(e){}}class B extends z{#s;constructor(e){super(e),this.#s=e}get val(){return new FormData(this.#s.form).get(this.#s.name)}set val(e){[...this.#s.form.querySelectorAll(`input[type="radio"][name="${this.#s.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class U extends z{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.checked}set val(e){this.#s.checked=e}}class W extends z{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value}set val(e){this.#s.value=e}}class Y extends z{#s;#a=!1;constructor(e){super(e),this.#s=e,this.#a=e.multiple}get val(){const e=[];return[...this.#s.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#a?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#s.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class K extends z{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value||""}set val(e){this.#s.value=e}}const Q=e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],r={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let n=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":n=new B(e);break;case"checkbox":n=new U(e);break;default:n=new W(e)}break;case"select":n=new Y(e);break;case"textarea":n=new K(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}n&&(N.add(e,t,n),Object.defineProperty(r,t,{enumerable:!0,configurable:!0,get:()=>n.val,set:e=>{n.val!==e&&(n.val=e)}}))}})),r};function X(e,t,r){let n=Q(r);e[t]=Object.assign({},n),Z(e,t),f(n,e[t]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{v(r,"input",(r=>{e[t].notify()}))}))}return t})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.microcomponents=e():t.microcomponents=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={};function n(t){return t&&t.constructor&&t.constructor===Object}function r(t){let e={};return[...Object.keys(t)].sort().forEach((o=>{n(t[o])?e[o]=r(t[o]):e[o]=t[o]})),e}function o(t,e=!0){let n={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=o(t[e],!1);for(const t in r)n[e+"."+t]=r[t]}else n[e]=t[e]})),e?r(n):n}function c(t,e){return JSON.stringify(o(t))===JSON.stringify(o(e))}function s(t,e={}){let n=t.constructor===String?t.split("."):t;if(e&&n[0]&&e[n[0]])return e[n[0]].constructor===Object&&n.length>1?s(n.splice(1),e[n[0]]):e[n[0]];console.warn("ns",n[0],"not in",e)}function a(t,e){var r=Array.from(arguments);if(r.length>2){for(;r.length>1;)r[0]=a(r[0],r[1]),r.splice(1,1);return r[0]}if("string"==typeof t)t.match(/\{[^\{\}]*\}/g)?.forEach((function(n){var r=s(n.substring(1,n.length-1),e);void 0!==r&&(t=t.replace(n,r))}));else if(n(t))switch(t.constructor){case Object:Object.keys(t).forEach((function(n){t.hasOwnProperty(n)&&(t[n]=a(t[n],e))}));break;case Array:t.forEach((function(n,r,o){o[r]=a(t[r],e)}))}return t}function i(t){return t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("")}function l(t,e){let n;return()=>{clearTimeout(n),n=setTimeout((function(){t(...arguments)}),e)}}function u(t){let e=document.createElement("template");return t=t.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,"<$1$2></$1>"),e.innerHTML=t,e.content.normalize(),Array.from(e.content.childNodes)}function d(t,e){const n=Object.getOwnPropertyDescriptors(t);for(const[t,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(e,t,r)}t.r(e),t.d(e,{DC:()=>A,MC:()=>w,McBase:()=>O,autoload:()=>T,copyGettersSetters:()=>d,debounce:()=>l,deepEqual:()=>c,defineCE:()=>M,flattenObject:()=>o,formValues:()=>W,getCE:()=>P,htmlToElements:()=>u,isNativeObject:()=>n,kebabToPascal:()=>i,nameSpace:()=>s,observe:()=>R,off:()=>g,on:()=>y,one:()=>v,parse:()=>a,sortObject:()=>r,trigger:()=>E});const f=new Function("try {return this===window;}catch(e){ return false;}");function m(t){return t&&t instanceof HTMLElement}function h(t,e,n={}){let r=t;r._mc||(r._mc=new A(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 p(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 b(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function g(t,e,n){t.removeEventListener(b(e),n)}function y(t,e,n,r=!1){t.addEventListener(b(e),n,{capture:!1,once:r})}function v(t,e,n){y(t,e,n,!0)}function E(t,e,n={},r="l"){const o="string"==typeof e?new CustomEvent(b(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)}class O{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==A&&e.trigger("Init")}),0),function(t){if(!f()||t.constructor===A)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):y(e,o,s,r)}))}}(this)}get target(){return this._target.deref()}}class w extends O{constructor(t){super(t)}}class A extends O{constructor(t,e=!1){super(t)}static add=h;static remove=p;off(t,e){g(this.target,t,e)}on(t,e){y(this.target,t,e)}one(t,e){v(this.target,t,e)}trigger(t,e={},n="l"){E(this.target,t,e,n)}parent(){let t=this.target;return m(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!m(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 m(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(!m(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}const j=new Set;function C(t){return()=>{const e=Array.from(document.querySelectorAll(`[data-mc*="${t}"]`)).filter((t=>t instanceof HTMLElement));if(0===e.length)return;const n=customElements.get(t);e.forEach((e=>{A.add(e,n.name,new n(e));const r=e.getAttribute("data-mc").split(" ").filter((e=>e!==t&&""!==e)).join(" ").trim();e.setAttribute("data-mc",r)}))}}function S(t){if(j.has(t))return;j.add(t);const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("data-name",t),n.setAttribute("loading",""),customElements.whenDefined(t).then(C(t)),n.addEventListener("load",(e=>{j.delete(t),document.head.querySelector(`script[data-name="${t}"]`)?.remove()})),n.addEventListener("error",(t=>{console.error("could not load DC code from",e)})),document.head.append(n)}function k(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!j.has(t.tagName.toLowerCase()))).forEach((t=>{S(t.tagName.toLowerCase())})),[...document.querySelectorAll('[data-mc]:not([data-mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("data-mc")?.split(" ").filter((t=>""!==t));e?.forEach((t=>{const e=customElements.get(t);j.has(t)||e?e&&C(t)():S(t)}))}))}let _=!1,N=null;function T(t=!0){return t?(_=t,N=new MutationObserver(k),setTimeout((()=>{N.observe(document.body,{childList:!0,subtree:!0}),k()}),5),window.autoload=window.autoload||T,_):(N?.disconnect(),N=null,_)}T.state=j;class x 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 L(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=i(t);L(e.prototype.constructor)&&e.prototype instanceof O?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends x{instance;constructor(t){super();const n=L(e)?new e(this,t):e;A.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function P(t){return customElements.get(t)}function D(t){return null!=t&&"object"==typeof t}function q(t){let e=new Set,n=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(n))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(n));r.forEach((t=>r.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(n))).forEach((t=>{(t.nodeValue||"").match(n).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}const H=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class V extends A{data={};oldDisplay="";constructor(t){super(t),q(t).forEach((t=>this.data[t]="")),R(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var r;this.data.observe((r=t.getAttribute(e),o=>{let c=r;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{e=!0;let r=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>o=>{let c=e;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=c})(n.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!H.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(e[n]=t.detail.data[n])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const I={};function $(t){let e=t.constructor.name;return I[e]||function(t){const e=t.constructor,n=e.name;let r=class extends e{#e=!0;#n=[];constructor(t){super(t),this.constructor.callbacks=[],D(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#n}set callbacks(t){this.#n=t}observe(t){return this.#n.push(t),this}bind(t){if(D(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!q(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||A.add(t,"_placeholders",new V(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),n=function(t){let n=o(t);e.forEach((t=>{t&&E(t,"data",n)}))};this.#n.push(n),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=D(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#n.forEach((t=>{t(e)})),this}};return I[n]=r,r}(t)}const R=(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 n=t[e],r=new($(n))(n);Object.defineProperty(t,e,{enumerable:!0,get(){if(D(r.valueOf())){let t=structuredClone(Object.assign({},r));setTimeout(l((function(){c(structuredClone(Object.assign({},r)),t)||r.notify()}),0),0)}return r},set(t){if(typeof t==typeof r.valueOf())if(D(r.valueOf())&&r.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},r));void 0===r?.constructor?.prototype?.observe&&(r=new($(t))(structuredClone(Object.assign({},t))),d(t,r),r.seal()),Object.assign(r,t),setTimeout(l((function(){c(structuredClone(Object.assign({},r)),e)||r.notify()}),0),0)}else{let e=r.valueOf(),n=r.callbacks;t!==e&&(r=new($(t))(t),r.callbacks=n,r.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof t)}}),t[e]=n}})),t);class F{constructor(t){}}class G extends F{#r;constructor(t){super(t),this.#r=t}get val(){return new FormData(this.#r.form).get(this.#r.name)}set val(t){[...this.#r.form.querySelectorAll(`input[type="radio"][name="${this.#r.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class J extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.checked}set val(t){this.#r.checked=t}}class Z extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value}set val(t){this.#r.value=t}}class z extends F{#r;#o=!1;constructor(t){super(t),this.#r=t,this.#o=t.multiple}get val(){const t=[];return[...this.#r.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#o?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#r.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class B extends F{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value||""}set val(t){this.#r.value=t}}const U=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],n={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let r=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":r=new G(t);break;case"checkbox":r=new J(t);break;default:r=new Z(t)}break;case"select":r=new z(t);break;case"textarea":r=new B(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}r&&(A.add(t,e,r),Object.defineProperty(n,e,{enumerable:!0,configurable:!0,get:()=>r.val,set:t=>{r.val!==t&&(r.val=t)}}))}})),n};function W(t,e,n){let r=U(n);t[e]=Object.assign({},r),R(t,e),d(r,t[e]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{t[e].notify()}))}))}return e})()));

package/public/test/microcomponents.ts

@@ -1,7 +1,7 @@
 "use strict";
 export * from './helpers.js';
 export * from './MC.js';
-export * from './McEvent.js';
+//export * from './McEvent.js';
 export * from './elements.js';
 export * from './observables.js';
 //export * from './selectors.js';

package/public/test/observables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"AAEA,OAAO,EACN,WAAW,EAKX,MAAM,cAAc,CAAC;AAQtB,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;AA8KrC,MAAM,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,CAAC,EAAE,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,KAAM,IAAI,CAAC;IACrE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAkHF,eAAO,MAAM,OAAO,WACX,WAAW,iBACJ,MAAM,KACnB,WAuGF,CAAC"}
+{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"AAEA,OAAO,EACN,WAAW,EAKX,MAAM,cAAc,CAAC;AAQtB,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;AAuKrC,MAAM,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,CAAC,EAAE,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,KAAM,IAAI,CAAC;IACrE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAyHF,eAAO,MAAM,OAAO,WACX,WAAW,iBACJ,MAAM,KACnB,WAuGF,CAAC"}

package/public/test/observables.js

@@ -1,6 +1,6 @@
 'use strict';
 import { debounce, deepEqual, flattenObject, copyGettersSetters, } from './helpers.js';
-import { DC } from './MC.js';
+import { DC, trigger } from './MC.js';
 function isObservableObject(value) {
     return value != null && typeof value === 'object';
 }
@@ -72,7 +72,7 @@ class Placeholders extends DC {
                 delete this.oldDisplay;
                 childNode.nodeValue = result;
             })(childNode.nodeValue));
-            this.oldDisplay = target.getAttribute('style)') || '';
+            this.oldDisplay = target.getAttribute('style') || '';
             if (hide &&
                 !inputs.includes(target.constructor) &&
                 target.tagName !== 'FIELDSET') {
@@ -82,9 +82,9 @@ class Placeholders extends DC {
     }
     onData(ev) {
         let data = {};
-        Object.keys(ev.data).forEach((key) => {
+        Object.keys(ev.detail.data).forEach((key) => {
             if (this.data.hasOwnProperty(key))
-                data[key] = ev.data[key];
+                data[key] = ev.detail.data[key];
         });
         if (JSON.stringify(data) !== JSON.stringify(this.data))
             Object.assign(this.data, data);
@@ -126,8 +126,8 @@ function makeObservable(val) {
         set callbacks(callbacks) {
             this.#callbacks = callbacks;
         }
-        observe(f) {
-            this.#callbacks.push(f);
+        observe(callback) {
+            this.#callbacks.push(callback);
             return this;
         }
         bind(target) {
@@ -135,14 +135,16 @@ function makeObservable(val) {
             if (iso) {
                 makePlaceholders(target);
                 const placeholders = [
-                    target, ...target.querySelectorAll('[_mc]'),
-                ].filter((e) => !!e?._mc?._placeholders);
+                    target,
+                    ...target.querySelectorAll('[data-mc]'),
+                ]
+                    .filter((e) => !!e?._mc?._placeholders);
                 const func = function callback(data) {
-                    let d = flattenObject(data);
-                    placeholders.forEach((e) => {
-                        if (!e)
+                    let flattenedData = flattenObject(data);
+                    placeholders.forEach((node) => {
+                        if (!node)
                             return;
-                        e._mc.trigger('data', d);
+                        trigger(node, 'data', flattenedData);
                     });
                 };
                 this.#callbacks.push(func);

package/public/test/observables.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.observables=e():t.observables=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 o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};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)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>N});var s=new Function("try {return this===window;}catch(e){ return false;}");let a=new Set;s()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>a.add(t)));class i{#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 l=new Function("try {return this===window;}catch(e){ return false;}");let u=new Set;function f(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 p(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 d(t){return t&&t instanceof HTMLElement}function b(t,e,r={}){let n=t;if(!n._mc){let e=v?.debug;v.debug=!1,n._mc=new v(t),v.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 g(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 h(t,e,r={},n="l"){let o=t?._mc;if(!o)return;let c=e instanceof i?new i(e.type,e.data,"l"):new i(e,r,"l"),s="string"!=typeof e?e:new i(e,r,n);[...Object.values(o)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(s.bubble)&&m(t,s)}function m(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let r=p(t,"",!0)?.[0].target;r&&v.trigger(r,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&v.trigger(t,e)}))}),0)}l()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>u.add(t)));class y{_target;__mc={};constructor(t,e=!1){var r;this._target=new WeakRef(t||{}),(r=this).constructor!==v&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!l()||t.constructor===v)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),c=n.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();o&&Object.defineProperty(t,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[n].bind(r)(t)}}),u.has("on"+s)&&function(t,e,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),t.addEventListener(e,r,c)}(e,s,(t=>{r.trigger(c,t)}),!1,o)}))}}(this)}get target(){return this._target.deref()}get _mc(){return this.__mc}}class O extends y{constructor(t){super(t)}static trigger=h;trigger(t,e={},r="l"){let n=this;if(n.constructor===O||n.constructor===v){let o=t instanceof i?new i(t.type,t.data,"l"):new i(t,e,"l"),c="string"!=typeof t?t:new i(t,e,r);return[...Object.getOwnPropertyNames(n)].forEach((t=>{n[t]?.trigger&&"function"==typeof n[t]?.trigger&&n[t]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&m(n.target,c))}if(n instanceof O||n instanceof v){const n=this,o="string"!=typeof t?t:new i(t,e,r),c="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof n[c]||(n[c](o),n.hasOwnProperty(c)&&delete n[c])),o.stopped||"l"===o.bubble)return n;/[ud]/.test(o.bubble)&&m(n.target,o)}}}class v extends y{constructor(t,e=!1){super(t)}static add=b;static remove=g;static trigger=h;trigger(t,e={},r){O.prototype.trigger.call(this,t,e,r)}parent(t=""){let e=this.target;return d(e)?p(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return d(e)?p(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!d(e))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const o=f([...e.querySelectorAll(n)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return d(e)?f([...e.querySelectorAll("*[_mc]")],t):[]}}function _(t){return null!=t&&"object"==typeof t}function E(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 w=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class j extends v{data={};oldDisplay="";constructor(t){super(t),E(t).forEach((t=>this.data[t]="")),N(this),this.#n()}#n(){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),o=>{let c=n;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...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=>o=>{let c=e;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=c})(r.nodeValue)),this.oldDisplay=t.getAttribute("style)")||"",e&&!w.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const S={};function A(t){let e=t.constructor.name;return S[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#o=!0;#c=[];constructor(t){super(t),this.constructor.callbacks=[],_(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#c}set callbacks(t){this.#c=t}observe(t){return this.#c.push(t),this}bind(t){if(_(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!E(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||v.add(t,"_placeholders",new j(t))}))}(t);const e=[t,...t.querySelectorAll("[_mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&t._mc.trigger("data",r)}))};this.#c.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=_(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#o=t),this.#c.forEach((t=>{t(e)})),this}};return S[r]=o,o}(t)}const N=(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(A(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(_(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(_(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(A(t))(structuredClone(Object.assign({},t))),function(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,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(A(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);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.observables=e():t.observables=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 o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};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)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>E});const a=new Function("try {return this===window;}catch(e){ return false;}");function s(t){return t&&t instanceof HTMLElement}function i(t,e,r={}){let n=t;n._mc||(n._mc=new b(t));const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}function l(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 u(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function f(t,e,r,n=!1){t.addEventListener(u(e),r,{capture:!1,once:n})}function d(t,e,r={},n="l"){const o="string"==typeof e?new CustomEvent(u(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(o),/[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,o)}class h{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==b&&e.trigger("Init")}),0),function(t){if(!a()||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((t=>{let n=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase(),a=e=>{r[t](e)};e["on"+c]?e.addEventListener(c,a):f(e,o,a,n)}))}}(this)}get target(){return this._target.deref()}}class b extends h{constructor(t,e=!1){super(t)}static add=i;static remove=l;off(t,e){!function(t,e,r){t.removeEventListener(u(e),r)}(this.target,t,e)}on(t,e){f(this.target,t,e)}one(t,e){!function(t,e,r){f(t,e,r,!0)}(this.target,t,e)}trigger(t,e={},r="l"){d(this.target,t,e,r)}parent(){let t=this.target;return s(t)&&t.closest("[data-mc]")?._mc||null}ancestors(){let t=this?.target,e=[];if(!s(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 s(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(!s(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function m(t){return null!=t&&"object"==typeof t}function p(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 g=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class y extends b{data={};oldDisplay="";constructor(t){super(t),p(t).forEach((t=>this.data[t]="")),E(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),o=>{let c=n;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...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=>o=>{let c=e;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=c})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!g.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 v(t){let e=t.constructor.name;return O[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],m(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(m(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!p(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||b.add(t,"_placeholders",new y(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&&d(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=m(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]=o,o}(t)}const E=(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(v(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(m(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(m(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(v(t))(structuredClone(Object.assign({},t))),function(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,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(v(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);return e})()));

package/public/test/observables.ts

@@ -8,7 +8,7 @@ import {
 	copyGettersSetters,
 } from './helpers.js';
 
-import { DC, HTMLMcElement, McEvent } from './MC.js';
+import { DC, HTMLMcElement, trigger } from './MC.js';
 
 function isObservableObject(value: any): boolean {
 	return value != null && typeof value === 'object';
@@ -123,28 +123,21 @@ class Placeholders extends DC {
 								data[placeholder.replace(/[\{\}]/g, '')]
 							);
 						});
-						// TODO: find out why this doesnt work correctly ... maybe completely overhaul the whole thing
-						// TODO: check overlap with inner web components, possibly firewall them
-						// TODO: maybe include convention for plain DOM / ShadowDom handling
-
-						// if (
-						// 	Object.keys(data).some((key) => {
-						// 		return !!data[key];
-						// 	})
-						// ) {
-							if (!!this.oldDisplay) {
-								target.style = this.oldDisplay;
-							} else {
-								target.removeAttribute('style');
-							}
-							delete this.oldDisplay;
-						// }
+
+						if (!!this.oldDisplay) {
+							target.style = this.oldDisplay;
+						} else {
+							target.removeAttribute('style');
+						}
+						delete this.oldDisplay;
+
 						childNode.nodeValue = result;
 					})(childNode.nodeValue)
 				);
 
 				// hide for now
-				this.oldDisplay = target.getAttribute('style)') || '';
+				this.oldDisplay = target.getAttribute('style') || ''; // TBD allow null to indicate there was no old style attribute
+
 				if (
 					hide &&
 					!inputs.includes((target as any).constructor) &&
@@ -155,12 +148,12 @@ class Placeholders extends DC {
 			});
 	}
 
-	onData(ev: McEvent) {
+	onData(ev: CustomEvent) {
 		let data: LooseObject = {};
-		Object.keys(ev.data).forEach((key) => {
-			if (this.data.hasOwnProperty(key)) data[key] = ev.data[key];
+		Object.keys(ev.detail.data).forEach((key) => {
+			if (this.data.hasOwnProperty(key)) data[key] = ev.detail.data[key];
 		});
-		//console.log('onData()', ev, data, this.data);
+		//console.log( 'Placeholder onData', ev, data );
 		if (JSON.stringify(data) !== JSON.stringify(this.data))
 			Object.assign(this.data, data); // will trigger callbacks
 	}
@@ -229,9 +222,9 @@ function makeObservable(val: any): Class<typeof val>{
 			this.#callbacks = callbacks
 		}
 
-		observe(f: Function) {
+		observe( callback: Function ) {
 			//console.log('observe');
-			this.#callbacks.push(f);
+			this.#callbacks.push( callback );
 			return this;
 		}
 
@@ -241,18 +234,25 @@ function makeObservable(val: any): Class<typeof val>{
 
 			if (iso) {
 				makePlaceholders(target);
-				const placeholders: unknown = [
-					target, ...target.querySelectorAll('[_mc]'), 
-				].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
+				const placeholders: unknown = 
+					[
+						target, 
+						...target.querySelectorAll('[data-mc]'), 
+					]
+					.filter(
+						(e) => !!(e as LooseObject)?._mc?._placeholders
+					);
+
 				//console.log('placeholders:', target, placeholders);
+				
 				const func = function callback(data: LooseObject) {
 					// avoid bubbling for speed
-					let d = flattenObject(data);
-					//console.log('inside callback', target, d);
-					(placeholders as DC[]).forEach((e) => {
+					let flattenedData = flattenObject(data);
+					//console.log('inside placeholder callback', target, flattenedData);
+					(placeholders as Node[]).forEach((node) => {
 						// console.log('trigger callback', e);
-						if (!e) return;
-						(e as any)._mc.trigger('data', d);
+						if (!node) return;
+						trigger(node as HTMLMcElement, 'data', flattenedData);
 					});
 				};
 				(this as any).#callbacks.push(func);

package/public/test/test/grandparent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grandparent.d.ts","sourceRoot":"","sources":["../../../src/test/test/grandparent.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,sCAA4B,CAAC"}
+{"version":3,"file":"grandparent.d.ts","sourceRoot":"","sources":["../../../src/test/test/grandparent.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,WAAW,sCAA4B,CAAC"}

package/public/test/test/grandparent.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.grandparent=e():t.grandparent=e()}(self,(()=>(()=>{"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,{GrandParent:()=>x});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 s=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function i(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 l(t){return t&&t instanceof HTMLElement}function u(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 d(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 p(t,e,r={},n="l"){let s=t?._mc;if(!s)return;let c=e instanceof o?new o(e.type,e.data,"l"):new o(e,r,"l"),i="string"!=typeof e?e:new o(e,r,n);[...Object.values(s)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(i.bubble)&&g(t,i)}function g(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)}s()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>c.add(t)));class f{_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(!s()||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),s=n.replace(/^on[e]{0,1}/,""),i=s.toLowerCase();o&&Object.defineProperty(t,"on"+s,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[n].bind(r)(t)}}),c.has("on"+i)&&function(t,e,r,n=!1,o=!1){let s={once:!1};n&&(s.capture=n),o&&(s.once=o),t.addEventListener(e,r,s)}(e,i,(t=>{r.trigger(s,t)}),!1,o)}))}}(this)}get target(){return this._target.deref()}get _mc(){return this.__mc}}class m extends f{constructor(t){super(t)}static trigger=p;trigger(t,e={},r="l"){let n=this;if(n.constructor===m||n.constructor===b){let s=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(s)})),void(/[ud]/.test(c.bubble)&&g(n.target,c))}if(n instanceof m||n instanceof b){const n=this,s="string"!=typeof t?t:new o(t,e,r),c="on"+s.type[0].toUpperCase()+s.type.slice(1);if(s.bubble.indexOf("l")>-1&&(s.immediateStopped||"function"!=typeof n[c]||(n[c](s),n.hasOwnProperty(c)&&delete n[c])),s.stopped||"l"===s.bubble)return n;/[ud]/.test(s.bubble)&&g(n.target,s)}}}class b extends f{constructor(t,e=!1){super(t)}static add=u;static remove=d;static trigger=p;trigger(t,e={},r){m.prototype.trigger.call(this,t,e,r)}parent(t=""){let e=this.target;return l(e)?a(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?a(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!l(e))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const o=i([...e.querySelectorAll(n)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return l(e)?i([...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 f?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)}function E(t,e){return Math.floor(Math.random()*(e-t+1)+t)}_("test-greatgrandchild",class extends b{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+E(0,255)+","+E(0,255)+","+E(0,255)+")")}});const O=w("test-greatgrandchild");_("test-grandchild",class extends b{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new O)}});const S=w("test-grandchild");_("test-child",class extends b{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new S)}});const v=w("test-child");_("test-parent",class extends b{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new v)}});const j=w("test-parent");_("test-grandparent",class extends b{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new j)}});const x=w("test-grandparent");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.grandparent=e():t.grandparent=e()}(self,(()=>(()=>{"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,{GrandParent:()=>y});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 s(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 c(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function a(t,e,n,r=!1){t.addEventListener(c(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}/,""),s=o.toLowerCase(),c=e=>{n[t](e)};e["on"+s]?e.addEventListener(s,c):a(e,o,c,r)}))}}(this)}get target(){return this._target.deref()}}class l extends i{constructor(t,e=!1){super(t)}static add=o;static remove=s;off(t,e){!function(t,e,n){t.removeEventListener(c(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(c(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 d 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 u(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("");u(e.prototype.constructor)&&e.prototype instanceof i?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends d{instance;constructor(t){super();const n=u(e)?new e(this,t):e;l.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function p(t){return customElements.get(t)}function f(t,e){return Math.floor(Math.random()*(e-t+1)+t)}m("test-greatgrandchild",class extends l{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+f(0,255)+","+f(0,255)+","+f(0,255)+")")}});const h=p("test-greatgrandchild");m("test-grandchild",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new h)}});const g=p("test-grandchild");m("test-child",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new g)}});const b=p("test-child");m("test-parent",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new b)}});const v=p("test-parent");m("test-grandparent",class extends l{constructor(t){super(t)}onConnected(t){for(let t=0;t<5;t++)this.target.append(new v)}onDisconnected(t){}onAdopted(t){}onAttributeChanged(t){}});const y=p("test-grandparent");return e})()));