@twobirds/microcomponents 0.1.21 → 0.1.23

package/dist/helpers.ts

@@ -1,219 +0,0 @@
-/**
- * Determines whether the current runtime environment is a web browser.
- *
- * This function works by attempting to access `this` within an anonymous function
- * and checking if it refers to the global `window` object. It returns `true`
- * when executed in a browser context, and `false` otherwise (e.g., Node.js).
- *
- * Note: While modern environments typically provide more reliable detection mechanisms,
- * this fallback remains compatible across older runtimes where other detection techniques
- * may be unreliable.
- *
- * @returns {boolean} `true` if the code is running in a browser environment, `false` otherwise.
- */
-export function isBrowser() {
-	return window ? true : false;
-}
-
-/**
- * Interface for objects that can have string or symbol keys with any type of values.
- */
-export interface LooseObject {
-	[key: string | symbol]: any;
-}
-
-/**
- * Checks if a value is a native JavaScript object (created via {} or new Object()).
- * @param value - The value to check.
- * @returns True if the value is a plain object, false otherwise.
- */
-export function isNativeObject(value: any): boolean {
-	return value && value['constructor'] && value.constructor === Object;
-}
-
-/**
- * Recursively sorts all keys in an object alphabetically, preserving nested structure.
- * @param o - The object to sort.
- * @returns A new object with sorted keys at all levels.
- */
-export function sortObject(o: LooseObject): LooseObject {
-	let result: LooseObject = {},
-		keys = [...Object.keys(o)].sort();
-
-	keys.forEach((key) => {
-		if (isNativeObject(o[key])) {
-			result[key] = sortObject(o[key]);
-		} else {
-			result[key] = o[key];
-		}
-	});
-
-	return result;
-}
-
-/**
- * Flattens a nested object into a single-level object with dot-separated keys.
- * Optionally sorts the resulting flat keys alphabetically (default: true).
- * @param o - The object to flatten.
- * @param doSort - Whether to sort the resulting keys (default: true).
- * @returns A flattened object with dot-notation keys.
- */
-export function flattenObject(o: LooseObject, doSort: boolean = true): LooseObject {
-	let result: LooseObject = {};
-
-	[...Object.getOwnPropertyNames(o)].forEach((propName) => {
-		if (o[propName] instanceof Object) {
-			const temp = flattenObject(o[propName], false);
-			result[propName] = {};
-			for (const j in temp) {
-				result[propName + '.' + j] = temp[j];
-			}
-		} else {
-			result[propName] = o[propName];
-		}
-	});
-
-	return doSort ? sortObject(result) : result;
-}
-
-/**
- * Compares two objects for deep equality by flattening them and comparing their JSON representations.
- * @param o1 - The first object to compare.
- * @param o2 - The second object to compare.
- * @returns True if the objects are deeply equal, false otherwise.
- */
-export function deepEqual(o1: LooseObject, o2: LooseObject): boolean {
-	return JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2));
-}
-
-/**
- * Retrieves a nested value from an object using a namespace path (dot-separated).
- * @param ns - The namespace string or array of keys representing the path.
- * @param obj - The object to traverse.
- * @returns The value at the specified namespace path, or undefined if not found.
- */
-export function nameSpace(ns: string | string[], obj: LooseObject = {}): any {
-	let nsa = ns.constructor === String ? ns.split('.') : ns;
-
-	if (!obj || !nsa[0] || !obj[nsa[0]]) {
-		console.warn('ns', nsa[0], 'not in', obj);
-		return;
-	}
-	if (obj[nsa[0]].constructor === Object && nsa.length > 1) {
-		return nameSpace((nsa as string[]).splice(1), obj[nsa[0]]);
-	}
-	return obj[nsa[0]];
-}
-
-/**
- * Parses a template string or object, replacing placeholders in the form of {key.path} with
- * corresponding values from the provided data object using namespace resolution.
- * Also recursively processes objects and arrays within the input.
- * @param what - The string or object to parse (can contain {{placeholder}} expressions).
- * @param parseThis - The object containing values for placeholder substitution.
- * @returns The parsed result, with placeholders replaced by actual values.
- */
-export function parse(what: string | object | any[], parseThis: object) {
-	var args = Array.from(arguments);
-
-	if (args.length > 2) {
-		while (args.length > 1) {
-			args[0] = parse(args[0], args[1]);
-			args.splice(1, 1);
-		}
-		return args[0];
-	}
-
-	if (typeof what === 'string') {
-		what.match(/\{[^\{\}]*\}/g)?.forEach(function (pPropname) {
-			var propname = pPropname.substring(1, pPropname.length - 1),
-				value = nameSpace(propname, parseThis);
-			//console.log(propname, value);
-			if (typeof value !== 'undefined') {
-				what = (what as string).replace(pPropname, value);
-			}
-		});
-	} else if (isNativeObject(what)) {
-		switch (what.constructor) {
-			case Object:
-				Object.keys(what).forEach(function (pKey) {
-					if (what.hasOwnProperty(pKey)) {
-						(what as LooseObject)[pKey] = parse((what as LooseObject)[pKey], parseThis);
-					}
-				});
-				break;
-			case Array:
-				(what as Array<any>).forEach(function (pValue, pKey, original) {
-					original[pKey] = parse((what as any)[pKey], parseThis);
-				});
-				break;
-		}
-	}
-
-	return what;
-}
-
-/**
- * Converts a kebab-case string to PascalCase.
- * Example: 'my-component-name' -> 'MyComponentName'
- * @param str - The kebab-case string to convert.
- * @returns The converted PascalCase string.
- */
-export function kebabToPascal(str: string) {
-	return str
-		.split('-') // Split by hyphens
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each part
-		.join(''); // Join without spaces
-}
-
-/**
- * Creates a debounced version of a function that delays execution until after the specified
- * number of milliseconds have elapsed since the last time this function was invoked.
- * Useful for rate-limiting expensive operations like event handlers or API calls.
- * @param func - The function to debounce.
- * @param milliseconds - The number of milliseconds to delay execution.
- * @returns A debounced version of the input function.
- */
-export function debounce(func: Function, milliseconds: number): Function {
-	let timeout: any;
-	return () => {
-		clearTimeout(timeout);
-
-		timeout = setTimeout(function () {
-			func(...arguments);
-		}, milliseconds);
-	};
-}
-
-/**
- * Parses an HTML string and returns an array of DOM elements.
- * Handles self-closing tags (XHTML style) by converting them to full closing tags first.
- * @param html - The HTML string to parse.
- * @returns An array of HTMLElement objects representing the parsed HTML nodes.
- */
-export function htmlToElements(html: string): HTMLElement[] {
-	let template = document.createElement('template');
-
-	html = html.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, '<$1$2></$1>'); // replace XHTML closing tags by full closing tags
-
-	template.innerHTML = html;
-
-	template.content.normalize();
-
-	return Array.from(template.content.childNodes) as HTMLElement[];
-}
-
-/**
- * Copies all getter and setter properties from a source object to a target object.
- * Does not copy methods or regular data properties—only accessor properties (get/set).
- * @param source - The source object with getters and/or setters to copy.
- * @param target - The target object to which the accessors will be copied.
- */
-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);
-		}
-	}
-}

package/dist/main.mjs

@@ -1 +0,0 @@
-function e(t){let n={};return[...Object.keys(t)].sort().forEach((a=>{var l;(l=t[a])&&l.constructor&&l.constructor===Object?n[a]=e(t[a]):n[a]=t[a]})),n}function t(n,a=!0){let l={};return[...Object.getOwnPropertyNames(n)].forEach((e=>{if(n[e]instanceof Object){const a=t(n[e],!1);l[e]={};for(const t in a)l[e+"."+t]=a[t]}else l[e]=n[e]})),a?e(l):l}function n(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)}function a(e){return"_mc"+e[0].toUpperCase()+e.substring(1)}function l(e,t,n,l=!1){return e.addEventListener(a(t),n,{capture:!1,once:l}),n}class r{stopped=!1;constructor(){}stop(){this.stopped=!0}}function s(e,t,n={},l="l",s){const i=/^_mc/.test(t)?t:a(t),o=s||new r,c=new CustomEvent(i,{detail:{data:n,control:o},bubbles:!1});o.stopped||/l/.test(l)&&(e.dispatchEvent(c),c.stopImmediatePropagation(),o.stopped)||/[ud]/.test(l)&&(-1===l.indexOf("l")&&(l+="l"),setTimeout((()=>{if(l.indexOf("u")>-1){let t=e.parentElement?.closest("[data-mc]");t&&t?._mc.trigger(i,n,l,o)}if(l.indexOf("d")>-1){let t=e._mc.children();t&&t.forEach((e=>e.trigger(i,n,l)))}}),0))}const i=new Function("try {return this===window;}catch(e){ return false;}");function o(e){return e&&e instanceof HTMLElement}class c{_target;constructor(e){var t;this._target=new WeakRef(e||{}),function(e){if(!i()||e.constructor===u)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((e=>{let a=/^one/.test(e),r=e.replace(/^on[e]{0,1}/,""),s=r.toLowerCase();if("on"+s in t){let a=t=>{n[e](t)};t.addEventListener(s,a)}else l(t,r,(t=>{n[e](t)}),a)}))}}(this),t=this,setTimeout((()=>{t.constructor!==u&&t.trigger("Init")}),0)}get target(){return this._target.deref()}}class u extends c{constructor(e){super(e)}static add(e,t,n={}){return function(e,t,n={}){let a=e;a._mc||(a._mc=new u(e));const l=a._mc;return t.length&&!l[t]&&(l[t]=n,e instanceof HTMLElement&&!e.getAttribute("data-mc")&&e.setAttribute("data-mc","")),a}(e,t,n)}static remove(e,t){!function(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("data-mc")&&e.removeAttribute("data-mc")}(e,t)}off(e,t){!function(e,t,n){e.removeEventListener(a(t),n)}(this.target,e,t)}on(e,t){return l(this.target,e,t)}one(e,t){return function(e,t,n){return l(e,t,n,!0),n}(this.target,e,t)}trigger(e,t={},n="l",a){s(this.target,e,t,n,a)}ancestors(){let e=this?.target,t=[];if(!o(e))return[];for(;e=e.closest("[data-mc]");)e?._mc&&t.push(e?._mc);return t.length?t:null}closest(){let e=this.target;return o(e)&&e.closest("[data-mc]")?._mc||null}children(){let e=this?.target;return o(e)?function(e){const t=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+t+'"] [data-mc] [data-mc])';e.setAttribute("temp_id",t);const a=[...e.querySelectorAll(n)].filter((e=>!!e._mc)).map((e=>e._mc));return e.removeAttribute("temp_id"),a.length?a:null}(e):null}descendants(){const e=this?.target;if(!o(e))return[];const t=[...e.querySelectorAll("[data-mc]")].filter((e=>!!e._mc)).map((e=>e._mc));return t.length?t:null}}function p(e){return null!=e&&"object"==typeof e}function d(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?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]}new Set;const b=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class m extends u{data={};oldDisplay="";constructor(e){super(e),d(e).forEach((e=>this.data[e]="")),g(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));var a;this.data.subscribe((a=e.getAttribute(t),l=>{let r=a;n.forEach((e=>{r=r.replace(e,l[e.replace(/[\{\}]/g,"")])})),e.setAttribute(t,r)}))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{t=!0;let a=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>l=>{let r=t;a.forEach((e=>{r=r.replace(e,l[e.replace(/[\{\}]/g,"")])})),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=r})(n.nodeValue)),this.oldDisplay=e.getAttribute("style")||"",t&&!b.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(e){let t={};Object.keys(e.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])})),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}}const h={};function f(e){let n=e.constructor.name;return h[n]||function(e){const n=e.constructor,a=n.name;let l=class extends n{#t=!0;#n=[];constructor(e){super(e),this.constructor.callbacks=[],p(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}get callbacks(){return this.#n}set callbacks(e){this.#n=e}subscribe(e){return this.#n.push(e),this}bind(e){if(p(this.valueOf())){!function(e){var t;(t=e,[t].concat([...t.querySelectorAll("*")]).filter((e=>!!d(e).length)).filter((e=>"STYLE"!==e?.tagName)).reverse()).forEach((e=>{e?._mc?._placeholders||u.add(e,"_placeholders",new m(e))}))}(e);const n=[e,...e.querySelectorAll("[data-mc]")].filter((e=>!!e?._mc?._placeholders)),a=function(e){let a=t(e);n.forEach((e=>{e&&s(e,"data",a)}))};this.#n.push(a),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(e){let t=p(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==e&&(this.#t=e),this.#t&&this.#n.forEach((e=>{e(t)})),this}};return h[a]=l,l}(e)}const g=(e,a)=>((a?[a]:[...Object.getOwnPropertyNames(e)]).forEach((a=>{if(e.hasOwnProperty(a)&&"function"!=typeof e[a]&&!e?.[a]?.constructor?.prototype?.subscribe){if("_"===a[0]||void 0===e?.[a])return e;let l=e[a],r=new(f(l))(l),s=function(){let e;return()=>{clearTimeout(e),e=setTimeout((function(){!function(){r.notify()}(...arguments)}),0)}}();Object.defineProperty(e,a,{enumerable:!0,get(){if(p(r.valueOf())){let e=structuredClone(Object.assign({},r));setTimeout((function(){var n,a;n=structuredClone(Object.assign({},r)),a=e,JSON.stringify(t(n))!==JSON.stringify(t(a))&&s()}),0)}return r},set(e){if(typeof e==typeof r.valueOf())if(p(r.valueOf())&&r.valueOf()instanceof Array==0)void 0===r?.constructor?.prototype?.subscribe&&(r=new(f(e))(structuredClone(Object.assign({},e))),n(e,r)),Object.assign(r,e),r.notify();else{let t=r.valueOf(),n=r.callbacks;e!==t&&(r=new(f(e))(e),r.callbacks=n,s())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof e)}}),e[a]=l}})),e);class y{constructor(e){}}class v extends y{#a;constructor(e){super(e),this.#a=e}get val(){return new FormData(this.#a.form).get(this.#a.name)}set val(e){[...this.#a.form.querySelectorAll(`input[type="radio"][name="${this.#a.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class E extends y{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.checked}set val(e){this.#a.checked=e}}class O extends y{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value}set val(e){this.#a.value=e}}class w extends y{#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=>{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.selected=!0:t.selected=!1}))}}class k extends y{#a;constructor(e){super(e),this.#a=e}get val(){return this.#a.value||""}set val(e){this.#a.value=e}}!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("");t.prototype instanceof c?customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends HTMLElement{constructor(e){super(),u.add(this,a,new t(this,e))}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(e,t,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}static get observedAttributes(){return n}})):customElements.define(e,t)}("test-testform",class extends u{data;constructor(e){super(e);let t=this.target.attachShadow({mode:"open"});t.innerHTML=`<style>${this.css}</style>${this.template}`,function(e,t,a){let l=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let a=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":a=new v(e);break;case"checkbox":a=new E(e);break;default:a=new O(e)}break;case"select":a=new w(e);break;case"textarea":a=new k(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}a&&(u.add(e,t,a),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>a.val,set:e=>{a.val!==e&&(a.val=e)}}))}})),n})(a);e[t]=Object.assign({},l),g(e,t),n(l,e[t]),[...a.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{e[t].notify()}))}))}(this,"data",t),this.data.bind(t),fetch("./testform.json").then((e=>e.json())).then((e=>{this.data=e}))}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}<br />\n                        <label>color</label><input type="color" name="colorInput" value="#000000" /><br />\n                        <label>date</label><input type="date" name="dateInput" value="" /><br />\n                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" /><br />\n                        <label>email</label><input type="email" name="email" value="" /><br />\n                        <label>file</label><input type="file" name="fileInput" value="" /><br />\n                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" /><br />\n                        <label>month</label><input type="month" name="month" value="" /><br />\n                        <label>number</label><input type="number" name="number" value="" /><br />\n                        <label>password</label><input type="password" name="passInput" value="" /><br />\n                        <label>range</label><input type="range" name="rangeInput" value="" /><br />\n                        <label>search</label><input type="search" name="searchInput" value="" /><br />\n                        <label>tel</label><input type="tel" name="telInput" value="" /><br />\n                        <label>time</label><input type="time" name="timeInput" value="" /><br />\n                        <label>url</label><input type="url" name="urlInput" value="" /><br />\n                        <label>week</label><input type="week" name="weekInput" value="" /><br />\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Selects&nbsp;<strong>2wB:&nbsp;</strong>&nbsp;<span>"{singleSelect}"</span>&nbsp;<span>[{multiSelect}]</span></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><br />\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"><br />\n                        <label>radio2</label><input type="radio" name="myRadio" value="radio2"><br />\n                        <label>radio3</label><input type="radio" name="myRadio" value="radio3"><br />\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Checkboxes</legend>\n                        <label>cb1</label><input type="checkbox" name="cb1"><br />\n                        <label>cb2</label><input type="checkbox" name="cb2"><br />\n                        <label>cb3</label><input type="checkbox" name="cb3"><br />\n                        <label>cb4</label><input type="checkbox" name="cb4"><br />\n                        <label>cb5</label><input type="checkbox" name="cb5"><br />\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    font-weight: bold;\n}\n\nlabel {\n    display: inline-block;\n    margin-top: 1em;\n    margin-left: 5px;\n    vertical-align: top;\n    min-width:10em;\n    text-align: right;\n}\n\nform input,\nform select,\nform textarea {\n    display: inline-block;\n    margin-left: 5px;\n    margin-top: 1.1em;\n}\n\ninput[type="radio"],\ninput[type="checkbox"] {\n    margin-top: 1.3em;\n}\n\nbody > form {\n    display: block;\n}\n\nform fieldset {\n    border: 1px solid #aaaaaa;\n    border-radius: 3px;\n    margin: 0.5em 0;\n}\n            '}});

package/dist/microcomponents.ts

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

package/dist/observables.d.ts

@@ -1,11 +0,0 @@
-import { LooseObject } from './helpers.js';
-type Callback = (value: any) => void;
-export type Observable = {
-    subscribe: (cb: Callback) => void;
-    notify: () => void;
-    bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
-    callbacks: Array<Function>;
-};
-export declare const observe: (target: LooseObject, propertyName?: string) => LooseObject;
-export {};
-//# sourceMappingURL=observables.d.ts.map

package/dist/observables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA0D,MAAM,cAAc,CAAC;AAcnG,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;AA0MrC,MAAM,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,KAAK,IAAI,CAAC;IACpE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAwJF,eAAO,MAAM,OAAO,WAAY,WAAW,iBAAiB,MAAM,KAAG,WA2EpE,CAAC"}

package/dist/observables.js

@@ -1,228 +0,0 @@
-import { flattenObject, debounce, deepEqual, copyGettersSetters } from './helpers.js';
-import { DC } from './MC.js';
-import { trigger } from './events.js';
-function isObservableObject(value) {
-    return value != null && typeof value === 'object';
-}
-function getPlaceholders(target) {
-    let placeholders = new Set(), regEx = /\{[^\{\}]*\}/g;
-    (target.getAttributeNames ? target.getAttributeNames() : [])
-        .filter((attr) => target.getAttribute(attr)?.match(regEx))
-        .forEach((attr) => {
-        let attrPlaceholders = new Set(target.getAttribute(attr)?.match(regEx));
-        attrPlaceholders.forEach((attrPlaceholder) => placeholders.add(attrPlaceholder.replace(/[\{\}]/g, '')));
-    });
-    [...target.childNodes]
-        .filter((childNode) => {
-        return (childNode.nodeType === 3 && (childNode.nodeValue || '').match(regEx));
-    })
-        .forEach((childNode) => {
-        let textContent = childNode?.nodeValue || '';
-        let contentPlaceholders = textContent.match(regEx);
-        contentPlaceholders.forEach((textNodePlaceholder) => placeholders.add(textNodePlaceholder.replace(/[\{\}]/g, '')));
-    });
-    return [...placeholders];
-}
-const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];
-class Placeholders extends DC {
-    data = {};
-    oldDisplay = '';
-    constructor(target) {
-        super(target);
-        getPlaceholders(target).forEach((property) => (this.data[property] = ''));
-        observe(this);
-        this.#attachCallbacks();
-    }
-    #attachCallbacks() {
-        let target = this.target, hide = false;
-        (target.getAttributeNames ? target.getAttributeNames() : [])
-            .filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g))
-            .forEach((attr) => {
-            let placeholders = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
-            this.data.subscribe(((template) => (data) => {
-                let result = template;
-                placeholders.forEach((placeholder) => {
-                    result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
-                });
-                target.setAttribute(attr, result);
-            })(target.getAttribute(attr)));
-        });
-        [...target.childNodes]
-            .filter((childNode) => {
-            return (childNode.nodeType === 3 && (childNode.nodeValue || '').match(/\{[^\{\}]*\}/g));
-        })
-            .forEach((childNode) => {
-            hide = true;
-            let placeholders = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
-            this.data.subscribe(((template) => (data) => {
-                let result = template;
-                placeholders.forEach((placeholder) => {
-                    result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
-                });
-                if (this.oldDisplay) {
-                    target.style = this.oldDisplay;
-                }
-                else {
-                    target.removeAttribute('style');
-                }
-                delete this.oldDisplay;
-                childNode.nodeValue = result;
-            })(childNode.nodeValue));
-            this.oldDisplay = target.getAttribute('style') || '';
-            if (hide &&
-                !inputs.includes(target.constructor) &&
-                target.tagName !== 'FIELDSET') {
-                target.style.display = 'none';
-            }
-        });
-    }
-    onData(ev) {
-        let data = {};
-        Object.keys(ev.detail.data).forEach((key) => {
-            if (this.data.hasOwnProperty(key))
-                data[key] = ev.detail.data[key];
-        });
-        if (JSON.stringify(data) !== JSON.stringify(this.data))
-            Object.assign(this.data, data);
-    }
-}
-function getPlaceholderElements(target) {
-    let elements = [target]
-        .concat([...target.querySelectorAll('*')])
-        .filter((e) => !!getPlaceholders(e).length)
-        .filter((e) => e?.tagName !== 'STYLE')
-        .reverse();
-    return elements;
-}
-function makePlaceholders(element) {
-    getPlaceholderElements(element).forEach((e) => {
-        if (e?._mc?._placeholders)
-            return;
-        DC.add(e, '_placeholders', new Placeholders(e));
-    });
-}
-const classRepo = {};
-function makeObservable(val) {
-    const Constructor = val.constructor, ConstructorName = Constructor.name;
-    let ObservableClass = class extends Constructor {
-        #notify = true;
-        #callbacks = [];
-        constructor(val) {
-            super(val);
-            this.constructor.callbacks = [];
-            if (isObservableObject(val)) {
-                Object.getOwnPropertyNames(val).forEach((key) => {
-                    this[key] = val[key];
-                });
-            }
-        }
-        get callbacks() {
-            return this.#callbacks;
-        }
-        set callbacks(callbacks) {
-            this.#callbacks = callbacks;
-        }
-        subscribe(callback) {
-            this.#callbacks.push(callback);
-            return this;
-        }
-        bind(target) {
-            const iso = isObservableObject(this.valueOf());
-            if (iso) {
-                makePlaceholders(target);
-                const placeholders = [target, ...target.querySelectorAll('[data-mc]')].filter((e) => !!e?._mc?._placeholders);
-                const func = function callback(data) {
-                    let flattenedData = flattenObject(data);
-                    placeholders.forEach((node) => {
-                        if (!node)
-                            return;
-                        trigger(node, 'data', flattenedData);
-                    });
-                };
-                this.#callbacks.push(func);
-                this.notify();
-            }
-            else {
-                console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof this.valueOf(), this);
-            }
-            return this;
-        }
-        notify(notify) {
-            let data = isObservableObject(this.valueOf()) && this.valueOf() instanceof Array === false
-                ? structuredClone(Object.assign({}, this))
-                : this.valueOf();
-            if (notify !== undefined) {
-                this.#notify = notify;
-            }
-            if (this.#notify) {
-                this.#callbacks.forEach((f) => {
-                    f(data);
-                });
-            }
-            return this;
-        }
-    };
-    classRepo[ConstructorName] = ObservableClass;
-    return ObservableClass;
-}
-function getConstructor(val) {
-    let key = val.constructor.name;
-    return classRepo[key] || makeObservable(val);
-}
-export const observe = (target, propertyName) => {
-    let keys = !propertyName ? [...Object.getOwnPropertyNames(target)] : [propertyName];
-    keys.forEach((key) => {
-        if (target.hasOwnProperty(key) &&
-            typeof target[key] !== 'function' &&
-            !target?.[key]?.constructor?.prototype?.subscribe) {
-            if (key[0] === '_' || target?.[key] === undefined)
-                return target;
-            let val = target[key];
-            let o = new (getConstructor(val))(val);
-            let debouncedNotify = debounce(function debouncedNotify() {
-                o.notify();
-            }, 0);
-            Object.defineProperty(target, key, {
-                enumerable: true,
-                get() {
-                    if (isObservableObject(o.valueOf())) {
-                        let check = structuredClone(Object.assign({}, o));
-                        setTimeout(function checkChanges() {
-                            let state = structuredClone(Object.assign({}, o));
-                            if (!deepEqual(state, check)) {
-                                debouncedNotify();
-                            }
-                        }, 0);
-                    }
-                    return o;
-                },
-                set(val) {
-                    if (typeof val === typeof o.valueOf()) {
-                        let iso = isObservableObject(o.valueOf()) && o.valueOf() instanceof Array === false;
-                        if (iso) {
-                            if (o?.constructor?.prototype?.subscribe === undefined) {
-                                o = new (getConstructor(val))(structuredClone(Object.assign({}, val)));
-                                copyGettersSetters(val, o);
-                            }
-                            Object.assign(o, val);
-                            o.notify();
-                        }
-                        else {
-                            let old = o.valueOf(), callbacks = o.callbacks;
-                            if (val !== old) {
-                                o = new (getConstructor(val))(val);
-                                o.callbacks = callbacks;
-                                debouncedNotify();
-                            }
-                        }
-                    }
-                    else {
-                        console.warn('IGNORED - cannot change observable types, IS:', typeof o.valueOf(), o, '- CANNOT BECOME:', typeof val);
-                    }
-                },
-            });
-            target[key] = val;
-        }
-    });
-    return target;
-};