@twobirds/microcomponents 0.1.16 → 0.1.18

package/dist/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AA6CA,wBAAgB,QAAQ,CACpB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,GAAG,QAAQ,EACzD,kBAAkB,GAAE,MAAM,EAAO,QAyDpC;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":"AA6CA,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,QAyDjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}

package/dist/elements.ts

@@ -4,107 +4,107 @@ import { DC, McBase } from './MC.js';
 import { kebabToPascal } from './helpers.js';
 
 class CeBaseClass 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(name: string, oldValue: any, newValue: any) {
-        this.dispatchEvent(
-            new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } })
-        );
-    }
-
-    formResetCallback() {
-        this.dispatchEvent(new CustomEvent('_mcFormReset'));
-    }
+	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(name: string, oldValue: any, newValue: any) {
+		this.dispatchEvent(
+			new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } })
+		);
+	}
+
+	formResetCallback() {
+		this.dispatchEvent(new CustomEvent('_mcFormReset'));
+	}
 }
 
 function createNamedClass(name: string, ClassBody: { new (...args: any[]): any }) {
-    return Object.defineProperty(ClassBody, 'name', { value: name });
+	return Object.defineProperty(ClassBody, 'name', { value: name });
 }
 
 function isClass(func: any) {
-    return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func));
+	return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func));
 }
 
 export function defineCE(
-    tagName: string,
-    DefinitionClass: { new (...args: any[]): any } | Function,
-    observedAttributes: string[] = []
+	tagName: string,
+	DefinitionClass: { new (...args: any[]): any } | Function,
+	observedAttributes: string[] = []
 ) {
-    if (customElements.get(tagName)) {
-        console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
-        return;
-    }
-
-    if (!tagName.includes('-')) {
-        throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
-    }
-
-    let name = kebabToPascal(tagName);
-
-    // not a class, but a pure function
-    if (!isClass(DefinitionClass.prototype.constructor)) {
-        customElements.define(
-            tagName,
-            // @ts-ignore
-            DefinitionClass
-        );
-        return;
-    }
-
-    // a class, but not a MC
-    if (!(DefinitionClass.prototype instanceof McBase)) {
-        customElements.define(
-            tagName,
-            // @ts-ignore
-            DefinitionClass
-        );
-        return;
-    }
-
-    // a MC
-    customElements.define(
-        tagName,
-        createNamedClass(
-            name,
-            class extends CeBaseClass {
-                instance: any;
-
-                constructor(data?: any) {
-                    super();
-                    // @ts-ignore
-                    const instance = isClass(DefinitionClass)
-                        ? // @ts-ignore
-                          new DefinitionClass(this, data)
-                        : DefinitionClass;
-                    DC.add(this, name, instance);
-                }
-
-                static get observedAttributes() {
-                    return observedAttributes;
-                }
-            }
-        )
-    );
+	if (customElements.get(tagName)) {
+		console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
+		return;
+	}
+
+	if (!tagName.includes('-')) {
+		throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
+	}
+
+	let name = kebabToPascal(tagName);
+
+	// not a class, but a pure function
+	if (!isClass(DefinitionClass.prototype.constructor)) {
+		customElements.define(
+			tagName,
+			// @ts-ignore
+			DefinitionClass
+		);
+		return;
+	}
+
+	// a class, but not a MC
+	if (!(DefinitionClass.prototype instanceof McBase)) {
+		customElements.define(
+			tagName,
+			// @ts-ignore
+			DefinitionClass
+		);
+		return;
+	}
+
+	// a MC
+	customElements.define(
+		tagName,
+		createNamedClass(
+			name,
+			class extends CeBaseClass {
+				instance: any;
+
+				constructor(data?: any) {
+					super();
+					// @ts-ignore
+					const instance = isClass(DefinitionClass)
+						? // @ts-ignore
+							new DefinitionClass(this, data)
+						: DefinitionClass;
+					DC.add(this, name, instance);
+				}
+
+				static get observedAttributes() {
+					return observedAttributes;
+				}
+			}
+		)
+	);
 }
 
 export function getCE(tagName: string): CustomElementConstructor | undefined {
-    return customElements.get(tagName);
+	return customElements.get(tagName);
 }

package/dist/formValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AAmM/D,wBAAgB,UAAU,CACtB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAkBhC"}
+{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA6L/D,wBAAgB,UAAU,CACzB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAkB7B"}

package/dist/formValues.js

@@ -150,7 +150,6 @@ export function formValues(targetObject, propertyName, dom) {
     targetObject[propertyName] = Object.assign({}, handlers);
     observe(targetObject, propertyName);
     copyGettersSetters(handlers, targetObject[propertyName]);
-    Object.seal(targetObject[propertyName]);
     [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
         input.addEventListener('input', (ev) => {
             targetObject[propertyName].notify();

package/dist/formValues.min.js

@@ -1 +1 @@
-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)},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var s;(s=t[n])&&s.constructor&&s.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let s={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]instanceof Object){const r=n(t[e],!1);s[e]={};for(const t in r)s[e+"."+t]=r[t]}else s[e]=t[e]})),e?r(s):s}function s(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function a(t,e){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.d(e,{R:()=>N});const c=new Function("try {return this===window;}catch(e){ return false;}");function o(t){return t&&t instanceof HTMLElement}function l(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function i(t,e,r,n=!1){return t.addEventListener(l(e),r,{capture:!1,once:n}),r}class u{stopped=!1;constructor(){}stop(){this.stopped=!0}}function f(t,e,r={},n="l",s){const a=/^_mc/.test(e)?e:l(e),c=s||new u,o=new CustomEvent(a,{detail:{data:r,control:c},bubbles:!1});c.stopped||/l/.test(n)&&(t.dispatchEvent(o),o.stopImmediatePropagation(),c.stopped)||/[ud]/.test(n)&&(-1===n.indexOf("l")&&(n+="l"),setTimeout((()=>{if(n.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(a,r,n,c)}if(n.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(a,r,n)))}}),0))}class h{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!c()||t.constructor===d)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),s=t.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();if("on"+a in e){let n=e=>{r[t](e)};e.addEventListener(a,n)}else i(e,s,(e=>{r[t](e)}),n)}))}}(this),e=this,setTimeout((()=>{e.constructor!==d&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class d extends h{constructor(t){super(t)}static add(t,e,r={}){return function(t,e,r={}){let n=t;n._mc||(n._mc=new d(t));const s=n._mc;return e.length&&!s[e]&&(s[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}(t,e,r)}static remove(t,e){!function(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")}(t,e)}off(t,e){!function(t,e,r){t.removeEventListener(l(e),r)}(this.target,t,e)}on(t,e){return i(this.target,t,e)}one(t,e){return function(t,e,r){return i(t,e,r,!0),r}(this.target,t,e)}trigger(t,e={},r="l",n){f(this.target,t,e,r,n)}ancestors(){let t=this?.target,e=[];if(!o(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return o(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return o(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(!o(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 m(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 b extends d{data={};oldDisplay="";constructor(t){super(t),m(t).forEach((t=>this.data[t]="")),O(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),s=>{let a=n;r.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,a)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>s=>{let a=e;n.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=a})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!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 y={};function v(t){let e=t.constructor.name;return y[e]||function(t){const e=t.constructor,r=e.name;let s=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],p(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(p(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!m(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||d.add(t,"_placeholders",new b(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&&f(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.#e&&this.#r.forEach((t=>{t(e)})),this}};return y[r]=s,s}(t)}const O=(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),c=function(){let t;return()=>{clearTimeout(t),t=setTimeout((function(){!function(){n.notify()}(...arguments)}),0)}}();Object.defineProperty(t,e,{enumerable:!0,get(){if(p(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout((function(){let e=structuredClone(Object.assign({},n));console.log("compare",t,"to",e,"with",n.callbacks,"isChanged:",!s(e,t)),s(e,t)||c()}),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(p(n.valueOf())&&n.valueOf()instanceof Array==0)void 0===n?.constructor?.prototype?.observe&&(n=new(v(t))(structuredClone(Object.assign({},t))),a(t,n)),Object.assign(n,t),n.notify();else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(v(t))(t),n.callbacks=r,c())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);class E{constructor(t){}}class w extends E{#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 A extends E{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.checked}set val(t){this.#n.checked=t}}class k extends E{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value}set val(t){this.#n.value=t}}class _ extends E{#n;#s=!1;constructor(t){super(t),this.#n=t,this.#s=t.multiple}get val(){const t=[];return[...this.#n.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#s?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#n.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class j extends E{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value||""}set val(t){this.#n.value=t}}const S=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 w(t);break;case"checkbox":n=new A(t);break;default:n=new k(t)}break;case"select":n=new _(t);break;case"textarea":n=new j(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}n&&(d.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 N(t,e,r){let n=S(r);t[e]=Object.assign({},n),O(t,e),a(n,t[e]),Object.seal(t[e]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{r.addEventListener("input",(r=>{t[e].notify()}))}))}var x=e.R;export{x as formValues};
+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)},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var s;(s=t[n])&&s.constructor&&s.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let s={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]instanceof Object){const r=n(t[e],!1);s[e]={};for(const t in r)s[e+"."+t]=r[t]}else s[e]=t[e]})),e?r(s):s}function s(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.d(e,{R:()=>S});const a=new Function("try {return this===window;}catch(e){ return false;}");function c(t){return t&&t instanceof HTMLElement}function o(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function l(t,e,r,n=!1){return t.addEventListener(o(e),r,{capture:!1,once:n}),r}class i{stopped=!1;constructor(){}stop(){this.stopped=!0}}function u(t,e,r={},n="l",s){const a=/^_mc/.test(e)?e:o(e),c=s||new i,l=new CustomEvent(a,{detail:{data:r,control:c},bubbles:!1});c.stopped||/l/.test(n)&&(t.dispatchEvent(l),l.stopImmediatePropagation(),c.stopped)||/[ud]/.test(n)&&(-1===n.indexOf("l")&&(n+="l"),setTimeout((()=>{if(n.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(a,r,n,c)}if(n.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(a,r,n)))}}),0))}class f{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!a()||t.constructor===h)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),s=t.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();if("on"+a in e){let n=e=>{r[t](e)};e.addEventListener(a,n)}else l(e,s,(e=>{r[t](e)}),n)}))}}(this),e=this,setTimeout((()=>{e.constructor!==h&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class h extends f{constructor(t){super(t)}static add(t,e,r={}){return function(t,e,r={}){let n=t;n._mc||(n._mc=new h(t));const s=n._mc;return e.length&&!s[e]&&(s[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}(t,e,r)}static remove(t,e){!function(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")}(t,e)}off(t,e){!function(t,e,r){t.removeEventListener(o(e),r)}(this.target,t,e)}on(t,e){return l(this.target,t,e)}one(t,e){return function(t,e,r){return l(t,e,r,!0),r}(this.target,t,e)}trigger(t,e={},r="l",n){u(this.target,t,e,r,n)}ancestors(){let t=this?.target,e=[];if(!c(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return c(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return c(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(!c(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function d(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 m=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class g extends h{data={};oldDisplay="";constructor(t){super(t),p(t).forEach((t=>this.data[t]="")),v(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),s=>{let a=n;r.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,a)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>s=>{let a=e;n.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=a})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!m.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 b={};function y(t){let e=t.constructor.name;return b[e]||function(t){const e=t.constructor,r=e.name;let s=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],d(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(d(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||h.add(t,"_placeholders",new g(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&&u(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=d(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#e&&this.#r.forEach((t=>{t(e)})),this}};return b[r]=s,s}(t)}const v=(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],a=new(y(r))(r),c=function(){let t;return()=>{clearTimeout(t),t=setTimeout((function(){!function(){a.notify()}(...arguments)}),0)}}();Object.defineProperty(t,e,{enumerable:!0,get(){if(d(a.valueOf())){let t=structuredClone(Object.assign({},a));setTimeout((function(){var e,r;e=structuredClone(Object.assign({},a)),r=t,JSON.stringify(n(e))!==JSON.stringify(n(r))&&c()}),0)}return a},set(t){if(typeof t==typeof a.valueOf())if(d(a.valueOf())&&a.valueOf()instanceof Array==0)void 0===a?.constructor?.prototype?.observe&&(a=new(y(t))(structuredClone(Object.assign({},t))),s(t,a)),Object.assign(a,t),a.notify();else{let e=a.valueOf(),r=a.callbacks;t!==e&&(a=new(y(t))(t),a.callbacks=r,c())}else console.warn("IGNORED - cannot change observable types, IS:",typeof a.valueOf(),a,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);class O{constructor(t){}}class E extends O{#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 w extends O{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.checked}set val(t){this.#n.checked=t}}class A extends O{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value}set val(t){this.#n.value=t}}class _ extends O{#n;#s=!1;constructor(t){super(t),this.#n=t,this.#s=t.multiple}get val(){const t=[];return[...this.#n.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#s?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#n.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class k extends O{#n;constructor(t){super(t),this.#n=t}get val(){return this.#n.value||""}set val(t){this.#n.value=t}}const j=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 E(t);break;case"checkbox":n=new w(t);break;default:n=new A(t)}break;case"select":n=new _(t);break;case"textarea":n=new k(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}n&&(h.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 S(t,e,r){let n=j(r);t[e]=Object.assign({},n),v(t,e),s(n,t[e]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{r.addEventListener("input",(r=>{t[e].notify()}))}))}var N=e.R;export{N as formValues};

package/dist/formValues.ts

@@ -7,213 +7,207 @@ import { observe } from './observables.js';
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
 const getInputName = (e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): string => {
-    return e.tagName.toLowerCase();
+	return e.tagName.toLowerCase();
 };
 
 abstract class InputBase {
-    constructor(e: inputTypes) {}
+	constructor(e: inputTypes) {}
 
-    abstract get val(): any;
+	abstract get val(): any;
 
-    abstract set val(value: any);
+	abstract set val(value: any);
 }
 
 class RadioHandler extends InputBase {
-    #e: HTMLInputElement;
-
-    constructor(e: HTMLInputElement) {
-        super(e);
-        this.#e = e;
-    }
-
-    get val(): string {
-        let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
-
-        //console.log('radio[', this.#e.name, '] = "' + ret + '"');
-        return ret as string;
-    }
-
-    set val(value: string) {
-        let arr = [
-            ...(this.#e.form as HTMLFormElement).querySelectorAll(
-                `input[type="radio"][name="${this.#e.name}"]`
-            ),
-        ] as HTMLInputElement[];
-
-        (arr.filter((e) => e.getAttribute('value') === value).shift() as HTMLInputElement).checked =
-            true;
-    }
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
+
+		//console.log('radio[', this.#e.name, '] = "' + ret + '"');
+		return ret as string;
+	}
+
+	set val(value: string) {
+		let arr = [
+			...(this.#e.form as HTMLFormElement).querySelectorAll(
+				`input[type="radio"][name="${this.#e.name}"]`
+			),
+		] as HTMLInputElement[];
+
+		(arr.filter((e) => e.getAttribute('value') === value).shift() as HTMLInputElement).checked =
+			true;
+	}
 }
 
 class CheckboxHandler extends InputBase {
-    #e: HTMLInputElement;
+	#e: HTMLInputElement;
 
-    constructor(e: HTMLInputElement) {
-        super(e);
-        this.#e = e;
-    }
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
 
-    get val(): boolean {
-        return this.#e.checked;
-    }
+	get val(): boolean {
+		return this.#e.checked;
+	}
 
-    set val(value: boolean) {
-        this.#e.checked = value;
-    }
+	set val(value: boolean) {
+		this.#e.checked = value;
+	}
 }
 
 class InputHandler extends InputBase {
-    #e: HTMLInputElement;
+	#e: HTMLInputElement;
 
-    constructor(e: HTMLInputElement) {
-        super(e);
-        this.#e = e;
-    }
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
 
-    get val(): string {
-        return this.#e.value;
-    }
+	get val(): string {
+		return this.#e.value;
+	}
 
-    set val(value: string) {
-        this.#e.value = value;
-    }
+	set val(value: string) {
+		this.#e.value = value;
+	}
 }
 
 class SelectHandler extends InputBase {
-    #e: HTMLSelectElement;
-    #multi: boolean = false;
-
-    constructor(e: HTMLSelectElement) {
-        super(e);
-        this.#e = e;
-        this.#multi = e.multiple;
-    }
-
-    get val(): string[] | string {
-        const that = this,
-            ret: string[] = [];
-
-        // get all options
-        [...that.#e.querySelectorAll('option')]
-            .filter((o) => o.selected)
-            .forEach((o) => {
-                ret.push(o.value);
-            });
-
-        if (this.#multi) return ret;
-        return ret.length ? ret[0] : '';
-    }
-
-    set val(value: string[] | string) {
-        const that = this;
-
-        value = typeof value === 'string' ? [value] : value;
-
-        // set all options
-        [...that.#e.querySelectorAll('option')].forEach((o) => {
-            if (value.indexOf(o.value) > -1) {
-                o.selected = true;
-            } else {
-                o.selected = false;
-            }
-        });
-    }
+	#e: HTMLSelectElement;
+	#multi: boolean = false;
+
+	constructor(e: HTMLSelectElement) {
+		super(e);
+		this.#e = e;
+		this.#multi = e.multiple;
+	}
+
+	get val(): string[] | string {
+		const that = this,
+			ret: string[] = [];
+
+		// get all options
+		[...that.#e.querySelectorAll('option')]
+			.filter((o) => o.selected)
+			.forEach((o) => {
+				ret.push(o.value);
+			});
+
+		if (this.#multi) return ret;
+		return ret.length ? ret[0] : '';
+	}
+
+	set val(value: string[] | string) {
+		const that = this;
+
+		value = typeof value === 'string' ? [value] : value;
+
+		// set all options
+		[...that.#e.querySelectorAll('option')].forEach((o) => {
+			if (value.indexOf(o.value) > -1) {
+				o.selected = true;
+			} else {
+				o.selected = false;
+			}
+		});
+	}
 }
 
 class TextAreaHandler extends InputBase {
-    #e: HTMLTextAreaElement;
-    constructor(e: HTMLTextAreaElement) {
-        super(e);
-        this.#e = e;
-    }
-
-    get val(): string {
-        return this.#e.value || '';
-    }
-
-    set val(value: string) {
-        this.#e.value = value;
-    }
+	#e: HTMLTextAreaElement;
+	constructor(e: HTMLTextAreaElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		return this.#e.value || '';
+	}
+
+	set val(value: string) {
+		this.#e.value = value;
+	}
 }
 
 const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
-    let inputList = [...(e || document).querySelectorAll('input,select,textarea')],
-        handlers: LooseObject = {};
-
-    inputList.forEach((input) => {
-        const name: string | null = (input as inputTypes).getAttribute('name');
-        if (name) {
-            let handler: any = false;
-            switch (getInputName(input as inputTypes)) {
-                case 'input':
-                    switch ((input as HTMLInputElement).type) {
-                        case 'radio':
-                            handler = new RadioHandler(input as HTMLInputElement);
-                            break;
-                        case 'checkbox':
-                            handler = new CheckboxHandler(input as HTMLInputElement);
-                            break;
-                        default:
-                            handler = new InputHandler(input as HTMLInputElement);
-                    }
-                    break;
-                case 'select':
-                    handler = new SelectHandler(input as HTMLSelectElement);
-                    break;
-                case 'textarea':
-                    handler = new TextAreaHandler(input as HTMLTextAreaElement);
-                    break;
-                default:
-                    console.warn(
-                        'handler missing:',
-                        name,
-                        'for',
-                        input.tagName.toLowerCase(),
-                        input
-                    );
-                    break;
-            }
-
-            if (handler) {
-                DC.add(input as HTMLElement, name, handler);
-                Object.defineProperty(handlers, name, {
-                    enumerable: true,
-                    configurable: true,
-                    get: (): any => {
-                        return handler.val;
-                    },
-                    set: (value: any) => {
-                        if (handler.val !== value) {
-                            handler.val = value;
-                        }
-                    },
-                });
-            }
-        }
-    });
-
-    return handlers;
+	let inputList = [...(e || document).querySelectorAll('input,select,textarea')],
+		handlers: LooseObject = {};
+
+	inputList.forEach((input) => {
+		const name: string | null = (input as inputTypes).getAttribute('name');
+		if (name) {
+			let handler: any = false;
+			switch (getInputName(input as inputTypes)) {
+				case 'input':
+					switch ((input as HTMLInputElement).type) {
+						case 'radio':
+							handler = new RadioHandler(input as HTMLInputElement);
+							break;
+						case 'checkbox':
+							handler = new CheckboxHandler(input as HTMLInputElement);
+							break;
+						default:
+							handler = new InputHandler(input as HTMLInputElement);
+					}
+					break;
+				case 'select':
+					handler = new SelectHandler(input as HTMLSelectElement);
+					break;
+				case 'textarea':
+					handler = new TextAreaHandler(input as HTMLTextAreaElement);
+					break;
+				default:
+					console.warn('handler missing:', name, 'for', input.tagName.toLowerCase(), input);
+					break;
+			}
+
+			if (handler) {
+				DC.add(input as HTMLElement, name, handler);
+				Object.defineProperty(handlers, name, {
+					enumerable: true,
+					configurable: true,
+					get: (): any => {
+						return handler.val;
+					},
+					set: (value: any) => {
+						if (handler.val !== value) {
+							handler.val = value;
+						}
+					},
+				});
+			}
+		}
+	});
+
+	return handlers;
 };
 
 export function formValues(
-    targetObject: LooseObject,
-    propertyName: string,
-    dom: HTMLElement | ShadowRoot
+	targetObject: LooseObject,
+	propertyName: string,
+	dom: HTMLElement | ShadowRoot
 ) {
-    let handlers = getInputHandlers(dom);
+	let handlers = getInputHandlers(dom);
 
-    targetObject[propertyName] = Object.assign({}, handlers);
+	targetObject[propertyName] = Object.assign({}, handlers);
 
-    observe(targetObject, propertyName);
+	observe(targetObject, propertyName);
 
-    copyGettersSetters(handlers, targetObject[propertyName]);
+	copyGettersSetters(handlers, targetObject[propertyName]);
 
-    Object.seal(targetObject[propertyName]); // object structure may not be changed from now on
+	//Object.seal(targetObject[propertyName]); // object structure may not be changed from now on
 
-    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-        input.addEventListener('input', (ev) => {
-            //console.log('input event', input, ev);
-            targetObject[propertyName].notify();
-        });
-    });
+	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+		input.addEventListener('input', (ev) => {
+			//console.log('input event', input, ev);
+			targetObject[propertyName].notify();
+		});
+	});
 }

package/dist/helpers.d.ts.map

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