@twobirds/microcomponents 0.1.21 → 0.1.23

package/dist/elements.ts

@@ -1,114 +0,0 @@
-import { kebabToPascal } from './helpers.js';
-import { McBase, DC } from './MC.js';
-
-/**
- * Creates a named class constructor with the specified name.
- * @param name - The desired name for the class.
- * @param ClassBody - The class constructor to which the name will be assigned.
- * @returns The class constructor with the name property set.
- */
-function createNamedClass(name: string, ClassBody: { new (...args: any[]): any }) {
-	return Object.defineProperty(ClassBody, 'name', { value: name });
-}
-
-/**
- * Defines a custom HTML element with optional observed attributes and micro component integration.
- * The class provided in DefinitionClass will be added to the ._mc hash object appended to the custom element instance.
- * Automatically assigns a "PascalCase" class name derived from the <kebab-case> tagName.
- * If the provided definition class extends McBase (indicating a DC or MC class extension), it wraps the constructor to register
- * the element instance with DC (DomComponent).
- *
- * @param tagName - The HTML tag name for the custom element (must contain at least one hyphen).
- * @param DefinitionClass - The constructor function or class that defines the element's behavior.
- * @param observedAttributes - An optional array of attribute names to observe for changes.
- */
-export function defineCE(
-	tagName: string,
-	DefinitionClass: { new (...args: any[]): any } | Function,
-	observedAttributes: string[] = []
-) {
-	//console.warn('defineCE args', arguments);
-
-	if (customElements.get(tagName)) {
-		console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
-		return;
-	}
-
-	if (!tagName.includes('-')) {
-		throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
-	}
-
-	let name = kebabToPascal(tagName);
-
-	// a class, but not a MC
-	if (!(DefinitionClass.prototype instanceof McBase)) {
-		//console.warn('pure class', tagName, DefinitionClass);
-		customElements.define(
-			tagName,
-			// @ts-ignore: DefinitionClass exists
-			DefinitionClass
-		);
-		return;
-	}
-
-	//console.warn('MC class', tagName, DefinitionClass);
-	// a MC
-	customElements.define(
-		tagName,
-		createNamedClass(
-			name,
-			class extends HTMLElement {
-				constructor(data?: any) {
-					super();
-					// console.log('[named class constructor]', tagName, name, this, data);
-					// @ts-ignore: DefinitionClass exists
-					DC.add(this, name, new DefinitionClass(this, data));
-				}
-
-				connectedCallback() {
-					//console.warn('onConnected', this);
-					this.dispatchEvent(new CustomEvent('_mcConnected'));
-				}
-
-				connectedMoveCallback() {
-					//console.warn('onConnectedMove', this);
-					this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
-				}
-
-				disconnectedCallback() {
-					//console.warn('onDisconnected', this);
-					this.dispatchEvent(new CustomEvent('_mcDisconnected'));
-				}
-
-				adoptedCallback() {
-					//console.warn('onAdopted', this);
-					this.dispatchEvent(new CustomEvent('_mcAdopted'));
-				}
-
-				attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-					//console.warn('onAttributeChanged', this);
-					this.dispatchEvent(
-						new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } })
-					);
-				}
-
-				formResetCallback() {
-					this.dispatchEvent(new CustomEvent('_mcFormReset'));
-				}
-
-				static get observedAttributes() {
-					return observedAttributes;
-				}
-			}
-		)
-	);
-}
-
-/**
- * Retrieves a custom element constructor by tag name.
- * @param tagName - The HTML tag name to look up.
- * @returns The CustomElementConstructor if defined, or undefined if not found.
- */
-export function getCE(tagName: string): CustomElementConstructor | undefined {
-	return customElements.get(tagName);
-}

package/dist/events.d.ts

@@ -1,11 +0,0 @@
-export declare function getMcEventName(eventName: string): string;
-export declare function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
-export declare function on(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once?: boolean): EventListenerOrEventListenerObject;
-export declare function one(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
-export declare class BubbleController {
-    stopped: boolean;
-    constructor();
-    stop(): void;
-}
-export declare function trigger(domNode: HTMLElement, event: string, data?: any, bubble?: string, controller?: BubbleController): void;
-//# sourceMappingURL=events.d.ts.map

package/dist/events.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAExD;AAUD,wBAAgB,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAEhG;AAWD,wBAAgB,EAAE,CACjB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,EAC3C,IAAI,GAAE,OAAe,GACnB,kCAAkC,CAGpC;AAYD,wBAAgB,GAAG,CAClB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC,CAGpC;AAUD,qBAAa,gBAAgB;IAC5B,OAAO,UAAS;;IAQhB,IAAI;CAGJ;AAmBD,wBAAgB,OAAO,CACtB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,EACb,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB,QA8C7B"}

package/dist/events.js

@@ -1,55 +0,0 @@
-'use strict';
-export function getMcEventName(eventName) {
-    return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
-}
-export function off(domNode, eventName, handler) {
-    domNode.removeEventListener(getMcEventName(eventName), handler);
-}
-export function on(domNode, eventName, handler, once = false) {
-    domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
-    return handler;
-}
-export function one(domNode, eventName, handler) {
-    on(domNode, eventName, handler, true);
-    return handler;
-}
-export class BubbleController {
-    stopped = false;
-    constructor() { }
-    stop() {
-        this.stopped = true;
-    }
-}
-export function trigger(domNode, event, data = {}, bubble = 'l', controller) {
-    const eventName = /^_mc/.test(event) ? event : getMcEventName(event), bubbleController = controller ? controller : new BubbleController(), ev = new CustomEvent(eventName, {
-        detail: { data, control: bubbleController },
-        bubbles: false,
-    });
-    if (bubbleController.stopped)
-        return;
-    if (/l/.test(bubble)) {
-        domNode.dispatchEvent(ev);
-        ev.stopImmediatePropagation();
-        if (bubbleController.stopped)
-            return;
-    }
-    if (/[ud]/.test(bubble)) {
-        if (bubble.indexOf('l') === -1) {
-            bubble += 'l';
-        }
-        setTimeout(() => {
-            if (bubble.indexOf('u') > -1) {
-                let parentMc = domNode.parentElement?.closest('[data-mc]');
-                if (parentMc) {
-                    parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
-                }
-            }
-            if (bubble.indexOf('d') > -1) {
-                let childNodes = domNode._mc.children();
-                if (childNodes) {
-                    childNodes.forEach((_mc) => _mc.trigger(eventName, data, bubble));
-                }
-            }
-        }, 0);
-    }
-}

package/dist/events.ts

@@ -1,158 +0,0 @@
-'use strict';
-
-import { HTMLMcElement, DC } from './MC.js';
-
-/**
-@hidden
-Converts a standard event name to its microcomponent-prefixed variant.
-
-This utility is used internally to namespace custom events (e.g., 'Click' → '_mcClick').
-
-@param {string} eventName - The original event name (e.g., 'click', 'update').
-@returns {string} The microcomponent-prefixed event name.
-*/
-export function getMcEventName(eventName: string): string {
-	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
-}
-/**
-Removes a previously attached event handler from the DOM node. See {@link on} and {@link one}.
-
-Uses internal microcomponent-prefixed naming for event handlers.
-
-@param {Node} domNode - The DOM element from which to remove the listener.
-@param {string} eventName - The name of the event (e.g., 'click', 'update').
-@param {EventListenerOrEventListenerObject} handler - The listener function or object to detach.
-*/
-export function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject) {
-	domNode.removeEventListener(getMcEventName(eventName), handler);
-}
-
-/**
-Attaches a persistent event listener that will fire every time the specified event occurs.
-
-@param {Node} domNode - The DOM element to attach the listener to.
-@param {string} eventName - The name of the event (e.g., 'click', 'update').
-@param {EventListenerOrEventListenerObject} handler - The callback function or object to invoke on each event.
-@param {boolean} [once=false] - If true, remove the listener after first invocation.
-@returns {EventListenerOrEventListenerObject} The attached handler reference. Useful for later deletion with {@link off}.
-*/
-export function on(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject,
-	once: boolean = false
-): EventListenerOrEventListenerObject {
-	domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
-	return handler;
-}
-/**
-Attaches an event listener that will fire only once.
-
-Internally calls {@link on} with the `once` flag set to true. The handler
-is automatically removed after its first invocation.
-
-@param {Node} domNode - The DOM element to attach the listener to.
-@param {string} eventName - The name of the event (e.g., 'click', 'update').
-@param {EventListenerOrEventListenerObject} handler - The callback function or object to invoke once.
-@returns {EventListenerOrEventListenerObject} The attached one-time handler reference. Useful for later deletion with {@link off}.
-*/
-export function one(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject
-): EventListenerOrEventListenerObject {
-	on(domNode, eventName, handler, true);
-	return handler;
-}
-
-/**
-@hidden
-A controller object used to manage and potentially abort event bubbling.
-
-The `trigger()` function accepts an optional instance of this class,
-allowing the handler to call `.stop()` before or during dispatch to
-prevent further propagation in either direction (up/down).
-*/
-export class BubbleController {
-	stopped = false;
-	constructor() {}
-	/**
-	Signals that event bubbling should be halted.
-	
-	After calling this method, subsequent `trigger()` calls will abort
-	before dispatching the event to any targets.
-	*/
-	stop() {
-		this.stopped = true;
-	}
-}
-
-/**
-Creates and dispatches a custom event on the specified DOM node.
-
-The event is namespaced with an `_mc` prefix by default, unless already prefixed.
-Supports bidirectional bubbling (up/down the DOM tree) based on the `bubble` parameter:
-- 'l': local dispatch only
-- 'u': bubble up towards ancestors
-- 'd': bubble down to descendants
-
-The optional `controller` allows aborting event propagation via `.stop()`.
-
-@param {HTMLElement} domNode - The DOM element on which to trigger the event.
-@param {string} event - The name of the event (will be prefixed if needed).
-@param {any} [data={}] - Additional data payload attached to `event.detail.data`.
-@param {string} [bubble='l'] - Bubbling direction ('l', 'u', 'd' or combinations).
-@param {BubbleController} [controller] - Optional controller for managing bubbling behavior.
-*/
-export function trigger(
-	domNode: HTMLElement,
-	event: string,
-	data: any = {},
-	bubble: string = 'l', // direction of bubbling
-	controller?: BubbleController
-) {
-	//console.warn('trigger args', ...arguments);
-
-	const eventName = /^_mc/.test(event) ? event : getMcEventName(event),
-		bubbleController = controller ? controller : new BubbleController(),
-		ev = new CustomEvent(eventName, {
-			detail: { data, control: bubbleController },
-			bubbles: false,
-		});
-
-	if (bubbleController.stopped) return;
-
-	if (/l/.test(bubble)) {
-		domNode.dispatchEvent(ev);
-		ev.stopImmediatePropagation();
-
-		if (bubbleController.stopped) return;
-	}
-
-	// bubble if up or down is indicated
-	if (/[ud]/.test(bubble)) {
-		// add missing 'l', or else no handlers are executed
-		if (bubble.indexOf('l') === -1) {
-			bubble += 'l';
-		}
-
-		setTimeout(() => {
-			// bubble up towards document.body
-			if (bubble.indexOf('u') > -1) {
-				let parentMc: HTMLMcElement | null | undefined =
-					domNode.parentElement?.closest('[data-mc]');
-				if (parentMc) {
-					parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
-				}
-			}
-
-			// bubble down towards DOM children
-			if (bubble.indexOf('d') > -1) {
-				let childNodes: DC[] | null = (domNode as HTMLMcElement)._mc.children();
-				if (childNodes) {
-					childNodes.forEach((_mc: DC) => _mc.trigger(eventName, data, bubble)); // event multiplex - dont carry bubble controller
-				}
-			}
-		}, 0);
-	}
-}

package/dist/formValues.d.ts

@@ -1,3 +0,0 @@
-import { LooseObject } from './helpers.js';
-export declare function formValues(targetObject: LooseObject, propertyName: string, dom: HTMLElement | ShadowRoot): void;
-//# sourceMappingURL=formValues.d.ts.map

package/dist/formValues.d.ts.map

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

package/dist/formValues.js

@@ -1,156 +0,0 @@
-import { DC } from './MC.js';
-import { copyGettersSetters } from './helpers.js';
-import { observe } from './observables.js';
-const getInputName = (e) => {
-    return e.tagName.toLowerCase();
-};
-class InputBase {
-    constructor(e) { }
-}
-class RadioHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        let ret = new FormData(this.#e.form).get(this.#e.name);
-        return ret;
-    }
-    set val(value) {
-        let arr = [
-            ...this.#e.form.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`),
-        ];
-        arr.filter((e) => e.getAttribute('value') === value).shift().checked =
-            true;
-    }
-}
-class CheckboxHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        return this.#e.checked;
-    }
-    set val(value) {
-        this.#e.checked = value;
-    }
-}
-class InputHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        return this.#e.value;
-    }
-    set val(value) {
-        this.#e.value = value;
-    }
-}
-class SelectHandler extends InputBase {
-    #e;
-    #multi = false;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-        this.#multi = e.multiple;
-    }
-    get val() {
-        const ret = [];
-        [...this.#e.querySelectorAll('option')]
-            .filter((o) => o.selected)
-            .forEach((o) => {
-            ret.push(o.value);
-        });
-        if (this.#multi)
-            return ret;
-        return ret.length ? ret[0] : '';
-    }
-    set val(value) {
-        value = typeof value === 'string' ? [value] : value;
-        [...this.#e.querySelectorAll('option')].forEach((o) => {
-            if (value.indexOf(o.value) > -1) {
-                o.selected = true;
-            }
-            else {
-                o.selected = false;
-            }
-        });
-    }
-}
-class TextAreaHandler extends InputBase {
-    #e;
-    constructor(e) {
-        super(e);
-        this.#e = e;
-    }
-    get val() {
-        return this.#e.value || '';
-    }
-    set val(value) {
-        this.#e.value = value;
-    }
-}
-const getInputHandlers = (e) => {
-    let inputList = [...(e || document).querySelectorAll('input,select,textarea')], handlers = {};
-    inputList.forEach((input) => {
-        const name = input.getAttribute('name');
-        if (name) {
-            let handler = false;
-            switch (getInputName(input)) {
-                case 'input':
-                    switch (input.type) {
-                        case 'radio':
-                            handler = new RadioHandler(input);
-                            break;
-                        case 'checkbox':
-                            handler = new CheckboxHandler(input);
-                            break;
-                        default:
-                            handler = new InputHandler(input);
-                    }
-                    break;
-                case 'select':
-                    handler = new SelectHandler(input);
-                    break;
-                case 'textarea':
-                    handler = new TextAreaHandler(input);
-                    break;
-                default:
-                    console.warn('handler missing:', name, 'for', input.tagName.toLowerCase(), input);
-                    break;
-            }
-            if (handler) {
-                DC.add(input, name, handler);
-                Object.defineProperty(handlers, name, {
-                    enumerable: true,
-                    configurable: true,
-                    get: () => {
-                        return handler.val;
-                    },
-                    set: (value) => {
-                        if (handler.val !== value) {
-                            handler.val = value;
-                        }
-                    },
-                });
-            }
-        }
-    });
-    return handlers;
-};
-export function formValues(targetObject, propertyName, dom) {
-    let handlers = getInputHandlers(dom);
-    targetObject[propertyName] = Object.assign({}, handlers);
-    observe(targetObject, propertyName);
-    copyGettersSetters(handlers, targetObject[propertyName]);
-    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-        input.addEventListener('input', (ev) => {
-            targetObject[propertyName].notify();
-        });
-    });
-}