@twobirds/microcomponents 0.0.50 → 0.0.52

package/public/modules/formValues.html

@@ -16,15 +16,15 @@
 <li><a href="formValues.html">formValues</a></li></ul>
 <h1>Module formValues</h1></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/404f13d/src/formValues.ts#L1">src/formValues.ts:1</a></li></ul></aside>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/2ce7f9b/src/formValues.ts#L1">src/formValues.ts:1</a></li></ul></aside>
 <section class="tsd-panel-group">
 <section class="tsd-panel tsd-typography"></section></section>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <h3 class="tsd-index-heading uppercase">Index</h3>
 <section class="tsd-index-section">
-<h3 class="tsd-index-heading">Functions</h3>
-<div class="tsd-index-list"><a href="../functions/formValues.formValues.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg><span>form<wbr/>Values</span></a>
+<h3 class="tsd-index-heading">Classes</h3>
+<div class="tsd-index-list"><a href="../classes/formValues.FormValues.html" class="tsd-index-link tsd-kind-class tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg><span>Form<wbr/>Values</span></a>
 </div></section></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
@@ -54,7 +54,7 @@
 <li class="tsd-kind-module"><a href="selectors.html">selectors</a></li></ul></li></ul></div></details></nav>
 <nav class="tsd-navigation secondary menu-sticky">
 <ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/formValues.formValues.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>form<wbr/>Values</a></li></ul></nav></div></div>
+<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/formValues.FormValues.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Form<wbr/>Values</a></li></ul></nav></div></div>
 <div class="container tsd-generator">
 <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
 <div class="overlay"></div><script src="../assets/main.js"></script></body></html>

package/public/modules/observables.html

@@ -16,7 +16,7 @@
 <li><a href="observables.html">observables</a></li></ul>
 <h1>Module observables</h1></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/404f13d/src/observables.ts#L1">src/observables.ts:1</a></li></ul></aside>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/2ce7f9b/src/observables.ts#L1">src/observables.ts:1</a></li></ul></aside>
 <section class="tsd-panel-group">
 <section class="tsd-panel tsd-typography"></section></section>
 <section class="tsd-panel-group tsd-index-group">

package/public/modules/selectors.html

@@ -16,7 +16,7 @@
 <li><a href="selectors.html">selectors</a></li></ul>
 <h1>Module selectors</h1></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/404f13d/src/selectors.ts#L1">src/selectors.ts:1</a></li></ul></aside>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/2ce7f9b/src/selectors.ts#L1">src/selectors.ts:1</a></li></ul></aside>
 <section class="tsd-panel-group">
 <section class="tsd-panel tsd-typography"></section></section>
 <section class="tsd-panel-group tsd-index-group">

package/public/src/formValues.ts

@@ -1,8 +1,8 @@
 'use strict';
 
 import { LooseObject, copyGettersSetters } from './helpers.js';
-import { DC, HTMLMcElement, addListener } from './MC.js';
-import { Observable, observe } from './observables.js';
+import { DC, addListener } from './MC.js';
+import { observe } from './observables.js';
 
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
@@ -160,8 +160,7 @@ const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 		if (name) {
 			let h: InputBase,
 				type = (i as HTMLInputElement).type,
-				handler: any,
-				setter: DC;
+				handler: any = false;
 			switch (getInputName(i as inputTypes)) {
 				case 'input':
 					switch (type) {
@@ -172,62 +171,19 @@ const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 									? e
 									: e.querySelector('form')) as HTMLFormElement
 							);
-							setter = DC.add(i, name, handler);
 							break;
 						case 'checkbox':
 							handler = new CheckboxHandler(i as HTMLInputElement);
-							setter = DC.add(i, name, handler);
 							break;
 						default:
 							handler = new InputHandler(i as HTMLInputElement);
-							setter = DC.add(i, name, handler);
 					}
-
-					Object.defineProperty(handlers, name, {
-						enumerable: true,
-						configurable: true,
-						get: (): any => {
-							return (setter as unknown as SelectHandler).val;
-						},
-						set: (value: any) => {
-							if ((setter as unknown as InputHandler).val !== value) {
-								(setter as unknown as InputHandler).val = value;
-							}
-						},
-					});
-
 					break;
 				case 'select':
 					handler = new SelectHandler(i as HTMLSelectElement);
-					setter = DC.add(i, name, handler);
-					Object.defineProperty(handlers, name, {
-						enumerable: true,
-						configurable: true,
-						get: (): any => {
-							return (setter as unknown as SelectHandler).val;
-						},
-						set: (value: any) => {
-							if ((setter as unknown as SelectHandler).val !== value) {
-								(setter as unknown as SelectHandler).val = value;
-							}
-						},
-					});
 					break;
 				case 'textarea':
 					handler = new TextAreaHandler(i as HTMLTextAreaElement);
-					setter = DC.add(i, name, handler);
-					Object.defineProperty(handlers, name, {
-						enumerable: true,
-						configurable: true,
-						get: (): any => {
-							return (setter as unknown as TextAreaHandler).val;
-						},
-						set: (value: any) => {
-							if ((setter as unknown as TextAreaHandler).val !== value) {
-								(setter as unknown as TextAreaHandler).val = value;
-							}
-						},
-					});
 					break;
 				default:
 					console.warn(
@@ -239,6 +195,22 @@ const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 					);
 					break;
 			}
+
+			if (handler) {
+				DC.add(i, 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;
+						}
+					},
+				});
+			}
 		}
 	});
 

package/public/test/Testform.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.TestTestform=t():e.TestTestform=t()}(self,(()=>(()=>{"use strict";var e=new Function("try {return this===window;}catch(e){ return false;}");let t=new Set;e()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>t.add(e)));class n{#e;#t=!1;#n=!1;constructor(e,t={},n="l"){this.#e=e,this.data=t,this.bubble=n}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#n}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var a=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;function l(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const a=e?._mc;!t&&a?n=n.concat(Object.values(e._mc)):t&&a&&a[t]&&n.push(a[t])}})),n}function o(e,t,n=!0){let a=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&a.push(e._mc[t]):a=a.concat(Object.values(e._mc)),n))return a;e=e.parentNode}return a}function i(e){return e&&e instanceof HTMLElement}function s(e,t,n,a=!1,r=!1){let l={once:!1};a&&(l.capture=a),r&&(l.once=r),e.addEventListener(t,n,l)}function c(e,t,n={}){let a=e;if(!a._mc){let t=m?.debug;m.debug=!1,a._mc=new m(e),m.debug=t,delete a._mc._mc}const r=a._mc;return t.length&&!r[t]&&(r[t]=n,e instanceof HTMLElement&&e.setAttribute("_mc","")),n}function u(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,a={},r="l"){let l=e?._mc;if(!l)return;let o=t instanceof n?new n(t.type,t.data,"l"):new n(t,a,"l"),i="string"!=typeof t?t:new n(t,a,r);[...Object.values(l)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(o)})),/[ud]/.test(i.bubble)&&d(e,i)}function d(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=o(e,"",!0)?.[0].target;n&&m.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&m.trigger(e,t)}))}),0)}a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>r.add(e)));class b{#a;constructor(e,t=!1){var n;this.#a=new WeakRef(e||{}),(n=this).constructor!==m&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!a()||e.constructor===m)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((a=>{let l=/^one/.test(a),o=a.replace(/^on[e]{0,1}/,""),i=o.toLowerCase();l&&Object.defineProperty(e,"on"+o,{configurable:!0,enumerable:!1,writable:!0,value:e=>{n.constructor.prototype[a].bind(n)(e)}}),r.has("on"+i)&&s(t,i,(e=>{n.trigger(o,e)}),!1,l)}))}}(this)}get target(){return this.#a.deref()}}class f extends b{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},a="l"){let r=this;if(r.constructor===f||r.constructor===m){let l=e instanceof n?new n(e.type,e.data,"l"):new n(e,t,"l"),o="string"!=typeof e?e:new n(e,t,a);return[...Object.getOwnPropertyNames(r)].forEach((e=>{r[e]?.trigger&&"function"==typeof r[e]?.trigger&&r[e]?.trigger(l)})),void(/[ud]/.test(o.bubble)&&d(r.target,o))}if(r instanceof f||r instanceof m){const r=this,l="string"!=typeof e?e:new n(e,t,a),o="on"+l.type[0].toUpperCase()+l.type.slice(1);if(l.bubble.indexOf("l")>-1&&(l.immediateStopped||"function"!=typeof r[o]||(r[o](l),r.hasOwnProperty(o)&&delete r[o])),l.stopped||"l"===l.bubble)return r;/[ud]/.test(l.bubble)&&d(r.target,l)}}}class m extends b{_mc={};constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){f.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return i(t)?o(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return i(t)?o(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!i(t))return[];const n=Math.random().toString().replace(".",""),a='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';t.setAttribute("temp_id",n);const r=l([...t.querySelectorAll(a)],e);return t.removeAttribute("temp_id"),r}descendants(e=""){let t=this?.target;return i(t)?l([...t.querySelectorAll("*[_mc]")],e):[]}}function g(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var a;(a=e[n])&&a.constructor&&a.constructor===Object?t[n]=g(e[n]):t[n]=e[n]})),t}function h(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const a=h(e[t],!1);for(const e in a)n[t+"."+e]=a[e]}else n[t]=e[t]})),t?g(n):n}function y(e,t){return JSON.stringify(h(e))===JSON.stringify(h(t))}function v(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function O(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,a]of Object.entries(n))("get"in a||"set"in a)&&Object.defineProperty(t,e,a)}new Map;class w extends HTMLElement{constructor(){super()}connectedCallback(){m.trigger(this,"Connected")}disconnectedCallback(){m.trigger(this,"Disconnected")}adoptedCallback(){m.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){m.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function x(e){return null!=e&&"object"==typeof e}function E(e){let t=new Set,n=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(n))).forEach((a=>{new Set(e.getAttribute(a)?.match(n)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(n))).forEach((e=>{(e.nodeValue||"").match(n).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,""))),[...t]}const k=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class A extends m{data={};oldDisplay="";constructor(e){super(e);let t=this;E(e).forEach((e=>t.data[e]="")),j(t),t.#r(),delete t._mc}#r(){let e=this,t=e.target,n=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((n=>{let a=new Set(t.getAttribute(n)?.match(/\{[^\{\}]*\}/g));var r;e.data.observe((r=t.getAttribute(n),e=>{let l=r;a.forEach((t=>{l=l.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(n,l)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((a=>{n=!0;let r=new Set(a.nodeValue.match(/\{[^\{\}]*\}/g));var l;e.data.observe((l=a.nodeValue,n=>{let o=l;r.forEach((e=>{o=o.replace(e,n[e.replace(/[\{\}]/g,"")])})),Object.keys(n).some((e=>!!n[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),a.nodeValue=o})),e.oldDisplay=t.getAttribute("style)")||"",n&&!k.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,n={};Object.keys(e.data).forEach((a=>{t.data.hasOwnProperty(a)&&(n[a]=e.data[a])})),JSON.stringify(n)!==JSON.stringify(t.data)&&Object.assign(t.data,n)}}const j=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let n,a=e[t];if(!a.prototype)switch(typeof a){case"string":n=String;break;case"number":n=Number;break;case"boolean":n=Boolean;break;case"object":n=a instanceof Array?Array:Object;break;default:return}let r=class extends n{#l=!0;constructor(e){super(e),this.constructor.callbacks=[],x(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(x(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!E(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||m.add(e,"_placeholders",new A(e))}))}(e);const n=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),a=function(e){let t=h(e);n.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(a),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,n=x(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#l=e),t.constructor.callbacks.forEach((e=>{e(n)})),t}},l=new r(a);Object.defineProperty(e,t,{enumerable:!0,get(){if(x(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(v((function(){y(structuredClone(Object.assign({},l)),e)||l.notify()}),0),0)}return l},set(e){if(typeof e==typeof l.valueOf())if(x(l.valueOf())&&l.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},l));l instanceof r==0&&(l=new r(structuredClone(Object.assign({},e))),O(e,l),l.seal()),Object.assign(l,e),setTimeout(v((function(){y(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),n=l.constructor.callbacks;l=new r(e),l.constructor.callbacks=n,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),l,"- CANNOT BECOME:",typeof e)}}),e[t]=a})),e);class S{constructor(e){}}class _ extends S{#o;#i;constructor(e,t){super(e),this.#o=e,this.#i=t}get val(){return new FormData(this.#i).get(this.#o.name)}set val(e){[...this.#i.querySelectorAll(`input[type="radio][name="${this.#o.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class T extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.checked}set val(e){this.#o.checked=e}}class N extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value}set val(e){this.#o.value=e}}class C extends S{#o;#s=!1;constructor(e){super(e),this.#o=e,this.#s=e.multiple}get val(){const e=[];return[...this.#o.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{t.selected&&e.push(t.value)})),this.#s?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#o.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?(t.setAttribute("selected","selected"),t.selected=!0):(t.removeAttribute("selected"),t.selected=!1)}))}}class I extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value||""}set val(e){this.#o.value=e}}class L{constructor(e,t,n){let a=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((t=>{const a=t.getAttribute("name")||"undefined";if(a){let r,l,o=t.type;switch((e=>e.tagName.toLowerCase())(t)){case"input":switch(o){case"radio":r=new _(t,e.constructor===HTMLFormElement?e:e.querySelector("form")),l=m.add(t,a,r);break;case"checkbox":r=new T(t),l=m.add(t,a,r);break;default:r=new N(t),l=m.add(t,a,r)}Object.defineProperty(n,a,{enumerable:!0,configurable:!0,get:()=>l.val,set:e=>{l.val!==e&&(l.val=e)}});break;case"select":r=new C(t),l=m.add(t,a,r),Object.defineProperty(n,a,{enumerable:!0,configurable:!0,get:()=>l.val,set:e=>{l.val!==e&&(l.val=e)}});break;case"textarea":r=new I(t),l=m.add(t,a,r),Object.defineProperty(n,a,{enumerable:!0,configurable:!0,get:()=>l.val,set:e=>{l.val!==e&&(l.val=e)}});break;default:console.warn("handler missing:",a,"for",t.tagName.toLowerCase(),t)}}})),n})(n);e[t]=Object.assign({},a),j(e,t),O(a,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{s(n,"keyup",(n=>{e[t].notify()})),s(n,"change",(n=>{e[t].notify()})),s(n,"select",(n=>{e[t].notify()}))}))}}return function(e,t,n=[]){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 a=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends w{instance;constructor(e){super();let n=new t(this,e);m.add(this,a,n)}static get observedAttributes(){return n}}))}("test-testform",class extends m{data;constructor(e){super(e);const t=this;delete this._mc;let n=t.target.attachShadow({mode:"open"});n.innerHTML=`<style>${this.css}</style>${this.template}`,new L(t,"data",n),t.data.bind(n)}onConnected(){}oneInit(){}get template(){return'\n                <form>\n                    \x3c!-- sample form to start with --\x3e\n                    <fieldset>\n                        <legend>Inputs</legend>\n                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}\n                        <label>color</label><input type="color" name="colorInput" value="" />\n                        <label>date</label><input type="date" name="dateInput" value="" />\n                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />\n                        <label>email</label><input type="email" name="email" value="" />\n                        <label>file</label><input type="file" name="fileInput" value="" />\n                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />\n                        <label>month</label><input type="month" name="month" value="" />\n                        <label>number</label><input type="number" name="number" value="" />\n                        <label>password</label><input type="password" name="passInput" value="" />\n                        <label>range</label><input type="range" name="rangeInput" value="" />\n                        <label>search</label><input type="search" name="searchInput" value="" />\n                        <label>tel</label><input type="tel" name="telInput" value="" />\n                        <label>time</label><input type="time" name="timeInput" value="" />\n                        <label>url</label><input type="url" name="urlInput" value="" />\n                        <label>week</label><input type="week" name="weekInput" value="" />\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Selects</legend>\n\n                            <label>singleSelect</label>\n                            <select name="singleSelect">\n                                <option disabled selected value> -- select -- </option>\n                                <option value="1">Option 1</option>\n                                <option value="2">Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4">Option 4</option>\n                            </select>\n\n                            <label>multiSelect</label>\n                            <select name="multiSelect" multiple="multiple" type="select-multiple">\n                                <option value="1">Option 1</option>\n                                <option value="2" selected=true>Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4" selected=true>Option 4</option>\n                            </select>\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>{myRadio}</span></legend>\n\n                        <label>radio1</label><input type="radio" name="myRadio" value="radio1">\n                        <label>radio2</label><input type="radio" name="myRadio" value="radio2">\n                        <label>radio3</label><input type="radio" name="myRadio" value="radio3">\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Checkboxes</legend>\n                        <label>cb1</label><input type="checkbox" name="cb1">\n                        <label>cb2</label><input type="checkbox" name="cb2">\n                        <label>cb3</label><input type="checkbox" name="cb3">\n                        <label>cb4</label><input type="checkbox" name="cb4">\n                        <label>cb5</label><input type="checkbox" name="cb5">\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>TextArea</legend>\n                        <label>textArea</label>\n                        <textarea name="textArea">abc</textarea>\n                    </fieldset>\n\n                </form>\n            '}get css(){return"\nlegend {\n    display: inherit;\n    margin:  inherit;\n    vertical-align:  inherit;\n}\n\nlabel {\n    display: inline;\n    margin-top: 5px;\n    margin-left: 5px;\n    vertical-align: top;\n    width: 10em;\n    text-align: right;\n}\n\nlabel::before {\n    content: ' ';\n    display: block;\n}\n\nform input,\nform select,\nform textarea {\n    margin-left: 5px;\n    margin-top: 0px;\n    display: inline;\n}\n\nform label + textarea {\n    display: inline-block;\n    margin-top: 3px;\n}\n\nform input + label {\n    width: inherit;\n    margin-top: 3px;\n    text-align: left;\n}\n\nbody > form {\n    display: block;\n}\n\nform fieldset {\n    border: 1px solid darkslategrey;\n    border-radius: 3px;\n    margin: 0.5em 0;\n}\n            "}}),{}})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TestTestform=t():e.TestTestform=t()}(self,(()=>(()=>{"use strict";var e=new Function("try {return this===window;}catch(e){ return false;}");let t=new Set;e()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>t.add(e)));class n{#e;#t=!1;#n=!1;constructor(e,t={},n="l"){this.#e=e,this.data=t,this.bubble=n}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#n}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var a=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;function l(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const a=e?._mc;!t&&a?n=n.concat(Object.values(e._mc)):t&&a&&a[t]&&n.push(a[t])}})),n}function o(e,t,n=!0){let a=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&a.push(e._mc[t]):a=a.concat(Object.values(e._mc)),n))return a;e=e.parentNode}return a}function i(e){return e&&e instanceof HTMLElement}function s(e,t,n,a=!1,r=!1){let l={once:!1};a&&(l.capture=a),r&&(l.once=r),e.addEventListener(t,n,l)}function c(e,t,n={}){let a=e;if(!a._mc){let t=m?.debug;m.debug=!1,a._mc=new m(e),m.debug=t,delete a._mc._mc}const r=a._mc;return t.length&&!r[t]&&(r[t]=n,e instanceof HTMLElement&&e.setAttribute("_mc","")),n}function u(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,a={},r="l"){let l=e?._mc;if(!l)return;let o=t instanceof n?new n(t.type,t.data,"l"):new n(t,a,"l"),i="string"!=typeof t?t:new n(t,a,r);[...Object.values(l)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(o)})),/[ud]/.test(i.bubble)&&d(e,i)}function d(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=o(e,"",!0)?.[0].target;n&&m.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&m.trigger(e,t)}))}),0)}a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>r.add(e)));class b{#a;constructor(e,t=!1){var n;this.#a=new WeakRef(e||{}),(n=this).constructor!==m&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!a()||e.constructor===m)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((a=>{let l=/^one/.test(a),o=a.replace(/^on[e]{0,1}/,""),i=o.toLowerCase();l&&Object.defineProperty(e,"on"+o,{configurable:!0,enumerable:!1,writable:!0,value:e=>{n.constructor.prototype[a].bind(n)(e)}}),r.has("on"+i)&&s(t,i,(e=>{n.trigger(o,e)}),!1,l)}))}}(this)}get target(){return this.#a.deref()}}class f extends b{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},a="l"){let r=this;if(r.constructor===f||r.constructor===m){let l=e instanceof n?new n(e.type,e.data,"l"):new n(e,t,"l"),o="string"!=typeof e?e:new n(e,t,a);return[...Object.getOwnPropertyNames(r)].forEach((e=>{r[e]?.trigger&&"function"==typeof r[e]?.trigger&&r[e]?.trigger(l)})),void(/[ud]/.test(o.bubble)&&d(r.target,o))}if(r instanceof f||r instanceof m){const r=this,l="string"!=typeof e?e:new n(e,t,a),o="on"+l.type[0].toUpperCase()+l.type.slice(1);if(l.bubble.indexOf("l")>-1&&(l.immediateStopped||"function"!=typeof r[o]||(r[o](l),r.hasOwnProperty(o)&&delete r[o])),l.stopped||"l"===l.bubble)return r;/[ud]/.test(l.bubble)&&d(r.target,l)}}}class m extends b{_mc={};constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){f.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return i(t)?o(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return i(t)?o(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!i(t))return[];const n=Math.random().toString().replace(".",""),a='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';t.setAttribute("temp_id",n);const r=l([...t.querySelectorAll(a)],e);return t.removeAttribute("temp_id"),r}descendants(e=""){let t=this?.target;return i(t)?l([...t.querySelectorAll("*[_mc]")],e):[]}}function g(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var a;(a=e[n])&&a.constructor&&a.constructor===Object?t[n]=g(e[n]):t[n]=e[n]})),t}function h(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const a=h(e[t],!1);for(const e in a)n[t+"."+e]=a[e]}else n[t]=e[t]})),t?g(n):n}function y(e,t){return JSON.stringify(h(e))===JSON.stringify(h(t))}function v(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function O(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,a]of Object.entries(n))("get"in a||"set"in a)&&Object.defineProperty(t,e,a)}new Map;class w extends HTMLElement{constructor(){super()}connectedCallback(){m.trigger(this,"Connected")}disconnectedCallback(){m.trigger(this,"Disconnected")}adoptedCallback(){m.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){m.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function x(e){return null!=e&&"object"==typeof e}function E(e){let t=new Set,n=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(n))).forEach((a=>{new Set(e.getAttribute(a)?.match(n)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(n))).forEach((e=>{(e.nodeValue||"").match(n).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,""))),[...t]}const k=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class A extends m{data={};oldDisplay="";constructor(e){super(e);let t=this;E(e).forEach((e=>t.data[e]="")),j(t),t.#r(),delete t._mc}#r(){let e=this,t=e.target,n=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((n=>{let a=new Set(t.getAttribute(n)?.match(/\{[^\{\}]*\}/g));var r;e.data.observe((r=t.getAttribute(n),e=>{let l=r;a.forEach((t=>{l=l.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(n,l)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((a=>{n=!0;let r=new Set(a.nodeValue.match(/\{[^\{\}]*\}/g));var l;e.data.observe((l=a.nodeValue,n=>{let o=l;r.forEach((e=>{o=o.replace(e,n[e.replace(/[\{\}]/g,"")])})),Object.keys(n).some((e=>!!n[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),a.nodeValue=o})),e.oldDisplay=t.getAttribute("style)")||"",n&&!k.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,n={};Object.keys(e.data).forEach((a=>{t.data.hasOwnProperty(a)&&(n[a]=e.data[a])})),JSON.stringify(n)!==JSON.stringify(t.data)&&Object.assign(t.data,n)}}const j=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let n,a=e[t];if(!a.prototype)switch(typeof a){case"string":n=String;break;case"number":n=Number;break;case"boolean":n=Boolean;break;case"object":n=a instanceof Array?Array:Object;break;default:return}let r=class extends n{#l=!0;constructor(e){super(e),this.constructor.callbacks=[],x(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(x(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!E(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||m.add(e,"_placeholders",new A(e))}))}(e);const n=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),a=function(e){let t=h(e);n.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(a),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,n=x(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#l=e),t.constructor.callbacks.forEach((e=>{e(n)})),t}},l=new r(a);Object.defineProperty(e,t,{enumerable:!0,get(){if(x(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(v((function(){y(structuredClone(Object.assign({},l)),e)||l.notify()}),0),0)}return l},set(e){if(typeof e==typeof l.valueOf())if(x(l.valueOf())&&l.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},l));l instanceof r==0&&(l=new r(structuredClone(Object.assign({},e))),O(e,l),l.seal()),Object.assign(l,e),setTimeout(v((function(){y(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),n=l.constructor.callbacks;l=new r(e),l.constructor.callbacks=n,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),l,"- CANNOT BECOME:",typeof e)}}),e[t]=a})),e);class S{constructor(e){}}class _ extends S{#o;#i;constructor(e,t){super(e),this.#o=e,this.#i=t}get val(){return new FormData(this.#i).get(this.#o.name)}set val(e){[...this.#i.querySelectorAll(`input[type="radio][name="${this.#o.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class T extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.checked}set val(e){this.#o.checked=e}}class N extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value}set val(e){this.#o.value=e}}class C extends S{#o;#s=!1;constructor(e){super(e),this.#o=e,this.#s=e.multiple}get val(){const e=[];return[...this.#o.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{t.selected&&e.push(t.value)})),this.#s?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#o.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?(t.setAttribute("selected","selected"),t.selected=!0):(t.removeAttribute("selected"),t.selected=!1)}))}}class I extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value||""}set val(e){this.#o.value=e}}class L{constructor(e,t,n){let a=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((t=>{const a=t.getAttribute("name")||"undefined";if(a){let r=t.type,l=!1;switch((e=>e.tagName.toLowerCase())(t)){case"input":switch(r){case"radio":l=new _(t,e.constructor===HTMLFormElement?e:e.querySelector("form"));break;case"checkbox":l=new T(t);break;default:l=new N(t)}break;case"select":l=new C(t);break;case"textarea":l=new I(t);break;default:console.warn("handler missing:",a,"for",t.tagName.toLowerCase(),t)}l&&(m.add(t,a,l),Object.defineProperty(n,a,{enumerable:!0,configurable:!0,get:()=>l.val,set:e=>{l.val!==e&&(l.val=e)}}))}})),n})(n);e[t]=Object.assign({},a),j(e,t),O(a,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{s(n,"keyup",(n=>{e[t].notify()})),s(n,"change",(n=>{e[t].notify()})),s(n,"select",(n=>{e[t].notify()}))}))}}return function(e,t,n=[]){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 a=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends w{instance;constructor(e){super();let n=new t(this,e);m.add(this,a,n)}static get observedAttributes(){return n}}))}("test-testform",class extends m{data;constructor(e){super(e);const t=this;delete this._mc;let n=t.target.attachShadow({mode:"open"});n.innerHTML=`<style>${this.css}</style>${this.template}`,new L(t,"data",n),t.data.bind(n)}onConnected(){}oneInit(){}get template(){return'\n                <form>\n                    \x3c!-- sample form to start with --\x3e\n                    <fieldset>\n                        <legend>Inputs</legend>\n                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}\n                        <label>color</label><input type="color" name="colorInput" value="" />\n                        <label>date</label><input type="date" name="dateInput" value="" />\n                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />\n                        <label>email</label><input type="email" name="email" value="" />\n                        <label>file</label><input type="file" name="fileInput" value="" />\n                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />\n                        <label>month</label><input type="month" name="month" value="" />\n                        <label>number</label><input type="number" name="number" value="" />\n                        <label>password</label><input type="password" name="passInput" value="" />\n                        <label>range</label><input type="range" name="rangeInput" value="" />\n                        <label>search</label><input type="search" name="searchInput" value="" />\n                        <label>tel</label><input type="tel" name="telInput" value="" />\n                        <label>time</label><input type="time" name="timeInput" value="" />\n                        <label>url</label><input type="url" name="urlInput" value="" />\n                        <label>week</label><input type="week" name="weekInput" value="" />\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Selects</legend>\n\n                            <label>singleSelect</label>\n                            <select name="singleSelect">\n                                <option disabled selected value> -- select -- </option>\n                                <option value="1">Option 1</option>\n                                <option value="2">Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4">Option 4</option>\n                            </select>\n\n                            <label>multiSelect</label>\n                            <select name="multiSelect" multiple="multiple" type="select-multiple">\n                                <option value="1">Option 1</option>\n                                <option value="2" selected=true>Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4" selected=true>Option 4</option>\n                            </select>\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>{myRadio}</span></legend>\n\n                        <label>radio1</label><input type="radio" name="myRadio" value="radio1">\n                        <label>radio2</label><input type="radio" name="myRadio" value="radio2">\n                        <label>radio3</label><input type="radio" name="myRadio" value="radio3">\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Checkboxes</legend>\n                        <label>cb1</label><input type="checkbox" name="cb1">\n                        <label>cb2</label><input type="checkbox" name="cb2">\n                        <label>cb3</label><input type="checkbox" name="cb3">\n                        <label>cb4</label><input type="checkbox" name="cb4">\n                        <label>cb5</label><input type="checkbox" name="cb5">\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>TextArea</legend>\n                        <label>textArea</label>\n                        <textarea name="textArea">abc</textarea>\n                    </fieldset>\n\n                </form>\n            '}get css(){return"\nlegend {\n    display: inherit;\n    margin:  inherit;\n    vertical-align:  inherit;\n}\n\nlabel {\n    display: inline;\n    margin-top: 5px;\n    margin-left: 5px;\n    vertical-align: top;\n    width: 10em;\n    text-align: right;\n}\n\nlabel::before {\n    content: ' ';\n    display: block;\n}\n\nform input,\nform select,\nform textarea {\n    margin-left: 5px;\n    margin-top: 0px;\n    display: inline;\n}\n\nform label + textarea {\n    display: inline-block;\n    margin-top: 3px;\n}\n\nform input + label {\n    width: inherit;\n    margin-top: 3px;\n    text-align: left;\n}\n\nbody > form {\n    display: block;\n}\n\nform fieldset {\n    border: 1px solid darkslategrey;\n    border-radius: 3px;\n    margin: 0.5em 0;\n}\n            "}}),{}})()));

package/public/types/observables.Observable.html

@@ -55,7 +55,7 @@
 <h5>cb: <span class="tsd-signature-type">Callback</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li></ul></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/404f13d/src/observables.ts#L191">src/observables.ts:191</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/2ce7f9b/src/observables.ts#L198">src/observables.ts:198</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

package/public/types/selectors.selection.html

@@ -18,7 +18,7 @@
 <h1>Type alias selection</h1></div>
 <div class="tsd-signature">selection<span class="tsd-signature-symbol">:</span> <a href="selectors.singleSelector.html" class="tsd-signature-type" data-tsd-kind="Type alias">singleSelector</a><span class="tsd-signature-symbol"> | </span><a href="selectors.singleSelector.html" class="tsd-signature-type" data-tsd-kind="Type alias">singleSelector</a><span class="tsd-signature-symbol">[]</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/404f13d/src/selectors.ts#L1634">src/selectors.ts:1634</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/2ce7f9b/src/selectors.ts#L1634">src/selectors.ts:1634</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

package/public/types/selectors.singleSelector.html

@@ -18,7 +18,7 @@
 <h1>Type alias singleSelector</h1></div>
 <div class="tsd-signature">single<wbr/>Selector<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLCollection</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">NodeList</span><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selectors.DSelector.html" class="tsd-signature-type" data-tsd-kind="Interface">DSelector</a><span class="tsd-signature-symbol"> | </span><a href="../classes/MC.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a><span class="tsd-signature-symbol"> | </span><a href="../classes/MC.DC.html" class="tsd-signature-type" data-tsd-kind="Class">DC</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selectors.TSelector.html" class="tsd-signature-type" data-tsd-kind="Interface">TSelector</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">undefined</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/404f13d/src/selectors.ts#L1632">src/selectors.ts:1632</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/2ce7f9b/src/selectors.ts#L1632">src/selectors.ts:1632</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

package/src/formValues.ts

@@ -1,8 +1,8 @@
 'use strict';
 
 import { LooseObject, copyGettersSetters } from './helpers.js';
-import { DC, HTMLMcElement, addListener } from './MC.js';
-import { Observable, observe } from './observables.js';
+import { DC, addListener } from './MC.js';
+import { observe } from './observables.js';
 
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
@@ -160,8 +160,7 @@ const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 		if (name) {
 			let h: InputBase,
 				type = (i as HTMLInputElement).type,
-				handler: any,
-				setter: DC;
+				handler: any = false;
 			switch (getInputName(i as inputTypes)) {
 				case 'input':
 					switch (type) {
@@ -172,62 +171,19 @@ const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 									? e
 									: e.querySelector('form')) as HTMLFormElement
 							);
-							setter = DC.add(i, name, handler);
 							break;
 						case 'checkbox':
 							handler = new CheckboxHandler(i as HTMLInputElement);
-							setter = DC.add(i, name, handler);
 							break;
 						default:
 							handler = new InputHandler(i as HTMLInputElement);
-							setter = DC.add(i, name, handler);
 					}
-
-					Object.defineProperty(handlers, name, {
-						enumerable: true,
-						configurable: true,
-						get: (): any => {
-							return (setter as unknown as SelectHandler).val;
-						},
-						set: (value: any) => {
-							if ((setter as unknown as InputHandler).val !== value) {
-								(setter as unknown as InputHandler).val = value;
-							}
-						},
-					});
-
 					break;
 				case 'select':
 					handler = new SelectHandler(i as HTMLSelectElement);
-					setter = DC.add(i, name, handler);
-					Object.defineProperty(handlers, name, {
-						enumerable: true,
-						configurable: true,
-						get: (): any => {
-							return (setter as unknown as SelectHandler).val;
-						},
-						set: (value: any) => {
-							if ((setter as unknown as SelectHandler).val !== value) {
-								(setter as unknown as SelectHandler).val = value;
-							}
-						},
-					});
 					break;
 				case 'textarea':
 					handler = new TextAreaHandler(i as HTMLTextAreaElement);
-					setter = DC.add(i, name, handler);
-					Object.defineProperty(handlers, name, {
-						enumerable: true,
-						configurable: true,
-						get: (): any => {
-							return (setter as unknown as TextAreaHandler).val;
-						},
-						set: (value: any) => {
-							if ((setter as unknown as TextAreaHandler).val !== value) {
-								(setter as unknown as TextAreaHandler).val = value;
-							}
-						},
-					});
 					break;
 				default:
 					console.warn(
@@ -239,6 +195,22 @@ const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 					);
 					break;
 			}
+
+			if (handler) {
+				DC.add(i, 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;
+						}
+					},
+				});
+			}
 		}
 	});