@twobirds/microcomponents 0.0.48 → 0.0.50

package/dist/formValues.ts

@@ -1,275 +1,278 @@
-"use strict";
+'use strict';
 
-import { LooseObject } from './helpers.js'
-import { MC, addListener } from './MC.js'
+import { LooseObject, copyGettersSetters } from './helpers.js';
+import { DC, HTMLMcElement, addListener } from './MC.js';
+import { Observable, observe } from './observables.js';
 
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
-const getInputName = ( e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement ): string => {
+const getInputName = (
+	e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+): string => {
+	return e.tagName.toLowerCase();
+};
 
-	let ret = e instanceof HTMLInputElement
-		? 'input'
-		: e instanceof HTMLSelectElement
-			? 'select'
-			: e instanceof HTMLTextAreaElement
-				? 'textarea'
-				: ''
-		;
-
-	return ret;
-}
-
-abstract class InputBase{
-	constructor( e: any ){
-	}
+abstract class InputBase {
+	constructor(e: inputTypes) {}
 
 	abstract get val(): any;
 
-	abstract set val( value: any );
-
+	abstract set val(value: any);
 }
 
-const getInputHandlers = ( e: HTMLElement | ShadowRoot ): LooseObject => {
-
-		let
-			//inputList = ( Array.from( e.querySelectorAll('*') ) as HTMLElement[] ).filter( i => isInputElement(i) ),
-			inputList = [ ...( e || document).querySelectorAll('input,select,textarea') ],
-			handlers: LooseObject = {};
-
-		inputList.forEach( (i) => {
-			const
-				name: string = ( i as inputTypes ).getAttribute('name') || 'undefined';
-
-			if ( name ){
-				let h: InputBase;
-				switch ( getInputName( i as inputTypes ) ){
-					case 'input':
-						//console.log( i, 'is HTMLInputElement');
-						h = new InputHandler( i as HTMLInputElement, e ); // e = element to search radios in = radioBase
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					case 'select':
-						//console.log( i, 'is HTMLSelectElement');
-						h = new SelectHandler( i as HTMLSelectElement );
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					case 'textarea':
-						//console.log( i, 'is HTMLTextAreaElement');
-						h = new TextAreaHandler( i as HTMLTextAreaElement );
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					default:
-						console.warn('handler missing:', name, 'for', i);
-						break;
-				}
-			}
-		});
-
-		return handlers;
-}
-
-class InputHandler extends InputBase {
-
+class RadioHandler extends InputBase {
 	#e: HTMLInputElement;
-	#type: string;
-	#radioBase: any;
+	#form: HTMLFormElement;
 
-	constructor( e: HTMLInputElement, radioBase?: HTMLElement | ShadowRoot ){
-		super( e );
+	constructor(e: HTMLInputElement, form: HTMLFormElement) {
+		super(e);
 		this.#e = e;
-		this.#type = e.type;
-		this.#radioBase = radioBase;
+		this.#form = form;
 	}
 
-	get val(): any{
-		let that = this,
-			type = that.#type,
-			ret: any;
-
-		switch (type){
-			case 'radio':
-				const check = [ ...(this.#radioBase || document).querySelectorAll( `input[type="radio"][name="${ this.#e.getAttribute('name') }"]` ) ]
-					.filter( e => e.checked );
-				if ( !check.length ) return '';
-				ret = check?.[0];
-				return ret.value;
-			case 'checkbox':
-				return that.#e.checked;
-			default:
-				return that.#e.value;
-				break;
-		}
+	get val(): string {
+		let ret = new FormData(this.#form).get(this.#e.name);
 
-		return '';
+		//console.log('radio[', this.#e.name, '] = "' + ret + '"');
+		return ret as string;
 	}
 
-	set val( value: any ){
-		let that = this,
-			type = that.#type,
-			ret: any;
-
-		switch (type){
-			case 'radio':
-				const
-					radios = [ ...(this.#radioBase || document).querySelectorAll(  `input[type="radio"][name="${ this.#e.getAttribute('name') }"]`  ) ];
-
-				// console.log('set radios', selection, this.#radioBase, radios.array );
-
-				if ( !radios.length ) return;
+	set val(value: string) {
+		let arr = [
+			...this.#form.querySelectorAll(
+				`input[type="radio][name="${this.#e.name}"]`
+			),
+		] as HTMLInputElement[];
+
+		(
+			arr
+				.filter((e) => e.getAttribute('value') === value)
+				.shift() as HTMLInputElement
+		).checked = true;
+	}
+}
 
-				if ( value === '' ){ // uncheck all
-					radios.forEach( r => { if (r.checked) r.checked = false } );
-					//console.log('unset all radios', radios.array );
-					return;
-				}
+class CheckboxHandler extends InputBase {
+	#e: HTMLInputElement;
 
-				const setRadioElement = radios.filter( r => r.getAttribute('value') === value );
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
 
-				if ( !setRadioElement.length ) return;
+	get val(): boolean {
+		return this.#e.checked;
+	}
 
-				// console.log('set this radio', setRadioElement.array );
+	set val(value: boolean) {
+		this.#e.checked = value;
+	}
+}
 
-				(setRadioElement?.[0] as HTMLInputElement).checked = true;
+class InputHandler extends InputBase {
+	#e: HTMLInputElement;
 
-				// console.log('done', setRadioElement.array );
-				return;
-				break;
-			case 'checkbox':
-				that.#e.checked = value;
-				break;
-			default:
-				that.#e.value = value;
-				break;
-		}
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
 
-		return;
+	get val(): string {
+		return this.#e.value;
 	}
 
+	set val(value: string) {
+		this.#e.value = value;
+	}
 }
 
 class SelectHandler extends InputBase {
-
 	#e: HTMLSelectElement;
 	#multi: boolean = false;
 
-	constructor( e: HTMLSelectElement ){
-		super( e );
+	constructor(e: HTMLSelectElement) {
+		super(e);
 		this.#e = e;
-		this.#multi = e.type === 'select-multiple';
+		this.#multi = e.multiple;
 	}
 
-	get val(): string[] | string{
-		const
-			that = this,
+	get val(): string[] | string {
+		const that = this,
 			ret: string[] = [];
 
 		// get all options
-		const options = [ ...that.#e.querySelectorAll('option') ]
-			.filter( o => o.selected )
-			.forEach( o => { if ( o.selected ) ret.push( o.value ) } );
+		const options = [...that.#e.querySelectorAll('option')]
+			.filter((o) => o.selected)
+			.forEach((o) => {
+				if (o.selected) ret.push(o.value);
+			});
 
-		if ( this.#multi ) return ret;
+		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 val(value: string[] | string) {
+		const that = this;
 
-		//console.log('set values', value );
+		value = typeof value === 'string' ? [value] : value;
 
 		// set all options
-		const options =  [ ...that.#e.querySelectorAll('option') ]
-			.forEach( o => {
-				if ( value.indexOf( o.value ) > -1 ) {
-					o.setAttribute( 'selected', 'selected' )
-					o.selected = true;
-				} else {
-					o.removeAttribute( 'selected' )
-					o.selected = false;
-				}
-			});
+		const options = [...that.#e.querySelectorAll('option')].forEach((o) => {
+			if (value.indexOf(o.value) > -1) {
+				o.setAttribute('selected', 'selected');
+				o.selected = true;
+			} else {
+				o.removeAttribute('selected');
+				o.selected = false;
+			}
+		});
 
 		return;
 	}
-
 }
 
 class TextAreaHandler extends InputBase {
-	#e: HTMLTextAreaElement
-	constructor( e: HTMLTextAreaElement ){
+	#e: HTMLTextAreaElement;
+	constructor(e: HTMLTextAreaElement) {
 		super(e);
 		this.#e = e;
 	}
 
-	get val(): string{
-		return this.#e.value;
+	get val(): string {
+		return this.#e.value || '';
 	}
 
-	set val( value: string ){
+	set val(value: string) {
 		this.#e.value = value;
 		return;
 	}
-
 }
 
-export const formValues = ( target: HTMLElement | ShadowRoot, values: Object = {}, mc?: typeof MC, observable?: string ): LooseObject => {
-
-	//console.log( 'values(', target, ',', values, ',', observable, ')' );
+const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
+	let inputList = [
+			...(e || document).querySelectorAll('input,select,textarea'),
+		],
+		handlers: LooseObject = {};
+
+	inputList.forEach((i) => {
+		const name: string = (i as inputTypes).getAttribute('name') || 'undefined';
+		// console.log(name);
+		if (name) {
+			let h: InputBase,
+				type = (i as HTMLInputElement).type,
+				handler: any,
+				setter: DC;
+			switch (getInputName(i as inputTypes)) {
+				case 'input':
+					switch (type) {
+						case 'radio':
+							handler = new RadioHandler(
+								i as HTMLInputElement,
+								(e.constructor === HTMLFormElement
+									? 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(
+						'handler missing:',
+						name,
+						'for',
+						i.tagName.toLowerCase(),
+						i
+					);
+					break;
+			}
+		}
+	});
 
-	//console.log( 'values()', values );
-	let handlers = getInputHandlers( target );
+	return handlers;
+};
 
-	function updateForm( values: Object ){
-		Object
-			.keys( values )
-			.forEach( (key) => {
-				if ( handlers.hasOwnProperty(key) && values.hasOwnProperty(key) ) {
-					//console.log( 'set value', key, values[key] );
-					handlers[key] = (values as LooseObject)[key];
-				}
-		});
-	}
+export class FormValues {
+	constructor(
+		targetObject: LooseObject,
+		propertyName: string,
+		dom: HTMLElement | ShadowRoot
+	) {
+		let that = this,
+			handlers = getInputHandlers(dom);
 
-	if ( Object.keys(values).length > 0 ){
-		updateForm( values );
-	}
+		targetObject[propertyName] = Object.assign({}, handlers);
 
-	//console.log( 'set observable on form change', observable );
-	if ( observable !== undefined ){
-		let obs = ( mc as LooseObject )[observable];
-		if ( !obs.constructor?.hasFormHandler ){
-			obs.constructor.hasFormHandler = true;
-			obs.observe( updateForm );
-		}
+		observe(targetObject, propertyName);
 
-		( mc as any)[observable].observe( () => { } );
+		copyGettersSetters(handlers, targetObject[propertyName]);
 
-		[ ...target.querySelectorAll('input, textarea, select') ].forEach( ( e ) => {
-			addListener( (e as HTMLElement), 'keyup', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
-			addListener( (e as HTMLElement), 'change', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
-			if ( (e as HTMLElement) instanceof HTMLSelectElement ){
-				addListener( (e as HTMLElement), 'select', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
-			};
+		[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+			addListener(input as inputTypes, 'keyup', (ev: Event) => {
+				//console.log('keyup', ev);
+				targetObject[propertyName].notify();
+			});
+			addListener(input as HTMLElement, 'change', (ev: Event) => {
+				//console.log('change', ev);
+				targetObject[propertyName].notify();
+			});
+			addListener(input as inputTypes, 'select', (ev: Event) => {
+				//console.log('select', ev);
+				targetObject[propertyName].notify();
+			});
 		});
 	}
-
-	return observable ? ( mc as any)[observable] : Object.assign( {}, handlers );
 }

package/dist/formvValues.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={};e.r(t),e.d(t,{formValues:()=>d});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));var o=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;function c(e,t,r,n=!1,o=!1){let s={once:!1};n&&(s.capture=n),o&&(s.once=o),e.addEventListener(t,r,s)}o()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>s.add(e)));class l{constructor(e){}}class a extends l{#e;#t;#r;constructor(e,t){super(e),this.#e=e,this.#t=e.type,this.#r=t}get val(){let e,t=this;switch(t.#t){case"radio":const r=[...(this.#r||document).querySelectorAll(`input[type="radio"][name="${this.#e.getAttribute("name")}"]`)].filter((e=>e.checked));return r.length?(e=r?.[0],e.value):"";case"checkbox":return t.#e.checked;default:return t.#e.value}return""}set val(e){let t=this;switch(t.#t){case"radio":const r=[...(this.#r||document).querySelectorAll(`input[type="radio"][name="${this.#e.getAttribute("name")}"]`)];if(!r.length)return;if(""===e)return void r.forEach((e=>{e.checked&&(e.checked=!1)}));const n=r.filter((t=>t.getAttribute("value")===e));if(!n.length)return;return void((n?.[0]).checked=!0);case"checkbox":t.#e.checked=e;break;default:t.#e.value=e}}}class i extends l{#e;#n=!1;constructor(e){super(e),this.#e=e,this.#n="select-multiple"===e.type}get val(){const e=[];return[...this.#e.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{t.selected&&e.push(t.value)})),this.#n?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#e.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?(t.setAttribute("selected","selected"),t.selected=!0):(t.removeAttribute("selected"),t.selected=!1)}))}}class u extends l{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}}const d=(e,t={},r,n)=>{let o=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],r={};return t.forEach((t=>{const n=t.getAttribute("name")||"undefined";if(n){let o;switch((e=>e instanceof HTMLInputElement?"input":e instanceof HTMLSelectElement?"select":e instanceof HTMLTextAreaElement?"textarea":"")(t)){case"input":o=new a(t,e),Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>o.val,set:e=>{o.val=e}});break;case"select":o=new i(t),Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>o.val,set:e=>{o.val=e}});break;case"textarea":o=new u(t),Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>o.val,set:e=>{o.val=e}});break;default:console.warn("handler missing:",n,"for",t)}}})),r})(e);function s(e){Object.keys(e).forEach((t=>{o.hasOwnProperty(t)&&e.hasOwnProperty(t)&&(o[t]=e[t])}))}if(Object.keys(t).length>0&&s(t),void 0!==n){let t=r[n];t.constructor?.hasFormHandler||(t.constructor.hasFormHandler=!0,t.observe(s)),r[n].observe((()=>{})),[...e.querySelectorAll("input, textarea, select")].forEach((e=>{c(e,"keyup",(()=>{r[n]=structuredClone(Object.assign(o))})),c(e,"change",(()=>{r[n]=structuredClone(Object.assign(o))})),e instanceof HTMLSelectElement&&c(e,"select",(()=>{r[n]=structuredClone(Object.assign(o))}))}))}return n?r[n]:Object.assign({},o)};return t})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.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 c(e,t){let r;return()=>{clearTimeout(r),r=setTimeout((function(){e(...arguments)}),t)}}function a(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:()=>C});var s=new Function("try {return this===window;}catch(e){ return false;}");let l=new Set;s()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>l.add(e)));class i{#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 b(e){return e&&e instanceof HTMLElement}function g(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 h(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.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 c=t instanceof i?new i(t.type,t.data,"l"):new i(t,r,"l"),a="string"!=typeof t?t:new i(t,r,n);[...Object.values(o)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(a.bubble)&&O(e,a)}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{#n;constructor(e,t=!1){var r;this.#n=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),c=n.replace(/^on[e]{0,1}/,""),a=c.toLowerCase();o&&Object.defineProperty(e,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),f.has("on"+a)&&g(t,a,(e=>{r.trigger(c,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class w extends v{_mc={};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 i?new i(e.type,e.data,"l"):new i(e,t,"l"),c="string"!=typeof e?e:new i(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)&&O(n.target,c))}if(n instanceof w||n instanceof E){const n=this,o="string"!=typeof e?e:new i(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)&&O(n.target,o)}}}class E extends v{_mc={};constructor(e,t=!1){super(e)}static add=h;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 b(t)?p(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return b(t)?p(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!b(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 b(t)?d([...t.querySelectorAll("*[_mc]")],e):[]}}function j(e){return null!=e&&"object"==typeof e}function S(e){let t=new Set,r=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(r))).forEach((n=>{new Set(e.getAttribute(n)?.match(r)).forEach((e=>t.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,""))),[...t]}new Map;const _=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class A extends E{data={};oldDisplay="";constructor(e){super(e);let t=this;S(e).forEach((e=>t.data[e]="")),k(t),t.#o(),delete t._mc}#o(){let e=this,t=e.target,r=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(t.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;e.data.observe((o=t.getAttribute(r),e=>{let c=o;n.forEach((t=>{c=c.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(r,c)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{r=!0;let o=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));var c;e.data.observe((c=n.nodeValue,r=>{let a=c;o.forEach((e=>{a=a.replace(e,r[e.replace(/[\{\}]/g,"")])})),Object.keys(r).some((e=>!!r[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),n.nodeValue=a})),e.oldDisplay=t.getAttribute("style)")||"",r&&!_.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,r={};Object.keys(e.data).forEach((n=>{t.data.hasOwnProperty(n)&&(r[n]=e.data[n])})),JSON.stringify(r)!==JSON.stringify(t.data)&&Object.assign(t.data,r)}}const k=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let r,s=e[t];if(!s.prototype)switch(typeof s){case"string":r=String;break;case"number":r=Number;break;case"boolean":r=Boolean;break;case"object":r=s instanceof Array?Array:Object;break;default:return}let l=class extends r{#c=!0;constructor(e){super(e),this.constructor.callbacks=[],j(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(j(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!S(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||E.add(e,"_placeholders",new A(e))}))}(e);const r=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),o=function(e){let t=n(e);r.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(o),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,r=j(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#c=e),t.constructor.callbacks.forEach((e=>{e(r)})),t}},i=new l(s);Object.defineProperty(e,t,{enumerable:!0,get(){if(j(i.valueOf())){let e=structuredClone(Object.assign({},i));setTimeout(c((function(){o(structuredClone(Object.assign({},i)),e)||i.notify()}),0),0)}return i},set(e){if(typeof e==typeof i.valueOf())if(j(i.valueOf())&&i.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},i));i instanceof l==0&&(i=new l(structuredClone(Object.assign({},e))),a(e,i),i.seal()),Object.assign(i,e),setTimeout(c((function(){o(structuredClone(Object.assign({},i)),t)||i.notify()}),0),0)}else{let t=i.valueOf(),r=i.constructor.callbacks;i=new l(e),i.constructor.callbacks=r,e!==t&&i.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof i.valueOf(),i,"- CANNOT BECOME:",typeof e)}}),e[t]=s})),e);class T{constructor(e){}}class N extends T{#a;#s;constructor(e,t){super(e),this.#a=e,this.#s=t}get val(){return new FormData(this.#s).get(this.#a.name)}set val(e){[...this.#s.querySelectorAll(`input[type="radio][name="${this.#a.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class x extends T{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.checked}set val(e){this.#a.checked=e}}class P extends T{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value}set val(e){this.#a.value=e}}class L extends T{#a;#l=!1;constructor(e){super(e),this.#a=e,this.#l=e.multiple}get val(){const e=[];return[...this.#a.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{t.selected&&e.push(t.value)})),this.#l?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#a.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?(t.setAttribute("selected","selected"),t.selected=!0):(t.removeAttribute("selected"),t.selected=!1)}))}}class M extends T{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value||""}set val(e){this.#a.value=e}}class C{constructor(e,t,r){let n=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],r={};return t.forEach((t=>{const n=t.getAttribute("name")||"undefined";if(n){let o,c,a=t.type;switch((e=>e.tagName.toLowerCase())(t)){case"input":switch(a){case"radio":o=new N(t,e.constructor===HTMLFormElement?e:e.querySelector("form")),c=E.add(t,n,o);break;case"checkbox":o=new x(t),c=E.add(t,n,o);break;default:o=new P(t),c=E.add(t,n,o)}Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>c.val,set:e=>{c.val!==e&&(c.val=e)}});break;case"select":o=new L(t),c=E.add(t,n,o),Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>c.val,set:e=>{c.val!==e&&(c.val=e)}});break;case"textarea":o=new M(t),c=E.add(t,n,o),Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:()=>c.val,set:e=>{c.val!==e&&(c.val=e)}});break;default:console.warn("handler missing:",n,"for",t.tagName.toLowerCase(),t)}}})),r})(r);e[t]=Object.assign({},n),k(e,t),a(n,e[t]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{g(r,"keyup",(r=>{e[t].notify()})),g(r,"change",(r=>{e[t].notify()})),g(r,"select",(r=>{e[t].notify()}))}))}}return t})()));

package/dist/helpers.d.ts

@@ -10,4 +10,5 @@ export declare function parse(what: string | Object | any[], parseThis: Object):
 export declare function kebabToPascal(str: string): string;
 export declare function debounce(func: Function, milliseconds: number): Function;
 export declare function htmlToElements(html: string): HTMLElement[];
+export declare function copyGettersSetters(source: LooseObject, target: LooseObject): void;
 //# sourceMappingURL=helpers.d.ts.map

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;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,CAC5B,CAAC,EAAE,WAAW,EACd,MAAM,GAAE,OAAc,GACpB,WAAW,CAmBb;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAInE;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,OAyCrE;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"}
+{"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,CAC5B,CAAC,EAAE,WAAW,EACd,MAAM,GAAE,OAAc,GACpB,WAAW,CAmBb;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAInE;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,OAyCrE;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"}

package/dist/helpers.ts

@@ -138,3 +138,12 @@ export function htmlToElements(html: string): HTMLElement[] {
 
 	return Array.from(template.content.childNodes) as HTMLElement[];
 }
+
+export function copyGettersSetters(source: LooseObject, target: LooseObject) {
+	const descriptors = Object.getOwnPropertyDescriptors(source);
+	for (const [key, descriptor] of Object.entries(descriptors)) {
+		if ('get' in descriptor || 'set' in descriptor) {
+			Object.defineProperty(target, key, descriptor);
+		}
+	}
+}