@schukai/monster 3.73.3 → 3.73.5

package/source/components/form/form.mjs

@@ -12,28 +12,18 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {internalSymbol} from "../../constants.mjs";
-import {Pathfinder} from "../../data/pathfinder.mjs";
+import { Datasource } from "../../data/datasource.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { DataSet } from "../datatable/dataset.mjs";
 import {
-    ATTRIBUTE_FORM_BIND,
-    ATTRIBUTE_FORM_BIND_TYPE,
-    ATTRIBUTE_UPDATER_BIND,
-} from "../../dom/constants.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {ID} from "../../types/id.mjs";
-import {clone} from "../../util/clone.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {DataSet} from "../datatable/dataset.mjs";
-import {
-    assembleMethodSymbol,
-    registerCustomElement,
-    getSlottedElements,
+	assembleMethodSymbol,
+	registerCustomElement,
+	getSlottedElements,
 } from "../../dom/customelement.mjs";
-import {FormStyleSheet} from "./stylesheet/form.mjs";
-import {diff} from "../../data/diff.mjs";
-import {isString} from "../../types/is.mjs";
+import { datasourceLinkedElementSymbol } from "../datatable/util.mjs";
+import { FormStyleSheet } from "./stylesheet/form.mjs";
 
-export {Form};
+export { Form };
 
 /**
  * @private
@@ -48,198 +38,159 @@ const debounceWriteBackSymbol = Symbol("debounceWriteBack");
 const debounceBindSymbol = Symbol("debounceBind");
 
 class Form extends DataSet {
-    /**
-     *
-     * @property {Object} templates Template definitions
-     * @property {string} templates.main Main template
-     * @property {Object} classes Class definitions
-     * @property {string} classes.form Form class
-     * @property {Object} writeBack Write back definitions
-     * @property {string[]} writeBack.events Write back events
-     * @property {Object} bind Bind definitions
-     * @property {string[]} bind.events Bind events
-     * @property {Object} reportValidity Report validity definitions
-     * @property {string} reportValidity.selector Report validity selector
-     * @property {boolean} features.mutationObserver Mutation observer feature
-     * @property {boolean} features.writeBack Write back feature
-     * @property {boolean} features.bind Bind feature
-     */
-    get defaults() {
-        const obj = Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-
-            classes: {
-                form: "",
-            },
-
-            writeBack: {
-                events: ["keyup", "click", "change", "drop", "touchend", "input"]
-            },
-
-            bind: {
-                events: ["keyup", "click", "change", "drop", "touchend", "input"]
-            },
-
-            reportValidity: {
-                selector: "input,select,textarea",
-            },
-        });
-
-        obj["features"]["mutationObserver"] = false;
-        obj["features"]["writeBack"] = true;
-        obj["features"]["bind"] = true;
-
-        return obj;
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-form";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [FormStyleSheet];
-    }
-
-    /**
-     *
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        initDataSourceHandler.call(this);
-    }
-
-    /**
-     * This method is called when the component is created.
-     * @since 3.70.0
-     * @returns {DataSet}
-     */
-    refresh() {
-        this.write();
-        super.refresh();
-        return this;
-    }
-
-    /**
-     * Run reportValidation on all child html form controls.
-     *
-     * @since 2.10.0
-     * @returns {boolean}
-     */
-    reportValidity() {
-        let valid = true;
-
-        const selector = this.getOption("reportValidity.selector");
-        const nodes = getSlottedElements.call(this, selector);
-
-        nodes.forEach((node) => {
-            if (typeof node.reportValidity === "function") {
-                if (node.reportValidity() === false) {
-                    valid = false;
-                }
-            }
-        });
-
-        return valid;
-    }
+	/**
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} classes Class definitions
+	 * @property {string} classes.form Form class
+	 * @property {Object} writeBack Write back definitions
+	 * @property {string[]} writeBack.events Write back events
+	 * @property {Object} bind Bind definitions
+	 * @property {Object} reportValidity Report validity definitions
+	 * @property {string} reportValidity.selector Report validity selector
+	 * @property {boolean} features.mutationObserver Mutation observer feature
+	 * @property {boolean} features.writeBack Write back feature
+	 * @property {boolean} features.bind Bind feature
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			classes: {
+				form: "",
+			},
+
+			writeBack: {
+				events: ["keyup", "click", "change", "drop", "touchend", "input"],
+			},
+
+			reportValidity: {
+				selector: "input,select,textarea",
+			},
+
+			eventProcessing: true,
+		});
+
+		obj["features"]["mutationObserver"] = false;
+		obj["features"]["writeBack"] = true;
+
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-form";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [FormStyleSheet];
+	}
+
+	/**
+	 *
+	 */
+	[assembleMethodSymbol]() {
+		const selector = this.getOption("datasource.selector");
+
+		if (!selector) {
+			this[datasourceLinkedElementSymbol] = new Datasource(this);
+		}
+
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initDataSourceHandler.call(this);
+	}
+
+	/**
+	 * This method is called when the component is created.
+	 * @since 3.70.0
+	 * @returns {DataSet}
+	 */
+	refresh() {
+		this.write();
+		super.refresh();
+		return this;
+	}
+
+	/**
+	 * Run reportValidation on all child html form controls.
+	 *
+	 * @since 2.10.0
+	 * @returns {boolean}
+	 */
+	reportValidity() {
+		let valid = true;
+
+		const selector = this.getOption("reportValidity.selector");
+		const nodes = getSlottedElements.call(this, selector);
+
+		nodes.forEach((node) => {
+			if (typeof node.reportValidity === "function") {
+				if (node.reportValidity() === false) {
+					valid = false;
+				}
+			}
+		});
+
+		return valid;
+	}
 }
 
-function initDataSourceHandler() {
-}
+function initDataSourceHandler() {}
 
 /**
  * @private
  * @returns {initEventHandler}
  */
 function initEventHandler() {
-    this[debounceBindSymbol] = {};
-
-    if (this.getOption("features.bind") === true) {
-        const events = this.getOption("bind.events");
-
-        for (const event of events) {
-            this.addEventListener(event, (e) => {
-                const element = findTargetElementFromEvent(e, ATTRIBUTE_FORM_BIND);
-
-                if (!(element instanceof HTMLElement)) {
-                    return;
-                }
-
-                let elementID
-                if (!element.hasAttribute("data-monster-debounce-id")) {
-                    elementID = new ID('debounce').toString();
-                    element.setAttribute("data-monster-debounce-id", elementID);
-                } else {
-                    elementID = element.getAttribute("data-monster-debounce-id");
-                }
-				
-                if (this[debounceBindSymbol][elementID] instanceof DeadMansSwitch) {
-                    try {
-                        this[debounceBindSymbol][elementID].touch();
-                        return;
-                    } catch (e) {
-                        if (e.message !== "has already run") {
-                            throw e;
-                        }
-
-                        delete this[debounceBindSymbol][elementID];
-                    }
-                }
-
-                this[debounceBindSymbol][elementID] = new DeadMansSwitch(200, () => {
-                    delete this[debounceBindSymbol][elementID];
-                    retrieveAndSetValue.call(this, element);
-                });
-            });
-        }
-    }
-
-    if (this.getOption("features.writeBack") === true) {
-        const events = this.getOption("writeBack.events");
-        for (const event of events) {
-            this.addEventListener(event, (e) => {
-                if (!this.reportValidity()) {
-                    this.classList.add("invalid");
-                    setTimeout(() => {
-                        this.classList.remove("invalid");
-                    }, 1000);
-
-                    return;
-                }
-
-                if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
-                    try {
-                        this[debounceWriteBackSymbol].touch();
-                        return;
-                    } catch (e) {
-                        if (e.message !== "has already run") {
-                            throw e;
-                        }
-                        delete this[debounceWriteBackSymbol];
-                    }
-                }
-
-                this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
-                    setTimeout(() => {
-                        this.write();
-                    }, 0);
-                });
-            });
-        }
-    }
-
-    return this;
+	this[debounceBindSymbol] = {};
+
+	if (this.getOption("features.writeBack") === true) {
+		const events = this.getOption("writeBack.events");
+		for (const event of events) {
+			this.addEventListener(event, (e) => {
+				if (!this.reportValidity()) {
+					this.classList.add("invalid");
+					setTimeout(() => {
+						this.classList.remove("invalid");
+					}, 1000);
+
+					return;
+				}
+
+				if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
+					try {
+						this[debounceWriteBackSymbol].touch();
+						return;
+					} catch (e) {
+						if (e.message !== "has already run") {
+							throw e;
+						}
+						delete this[debounceWriteBackSymbol];
+					}
+				}
+
+				this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
+					setTimeout(() => {
+						this.write();
+					}, 0);
+				});
+			});
+		}
+	}
+
+	return this;
 }
 
 /**
@@ -247,115 +198,10 @@ function initEventHandler() {
  * @return {FilterButton}
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-    return this;
-}
-
-/**
- * @throws {Error} the bind argument must start as a value with a path
- * @param {HTMLElement} element
- * @return void
- * @memberOf Monster.DOM
- * @private
- */
-function retrieveAndSetValue(element) {
-    let path = element.getAttribute(ATTRIBUTE_FORM_BIND);
-    if (path === null)
-        throw new Error("the bind argument must start as a value with a path");
-
-    if (path.indexOf("path:") !== 0) {
-        throw new Error("the bind argument must start as a value with a path");
-    }
-
-    path = path.substring(5); // remove path: from the string
-
-    let value;
-
-    if (element instanceof HTMLInputElement) {
-        switch (element.type) {
-            case "checkbox":
-                value = element.checked ? element.value : undefined;
-                break;
-            default:
-                value = element.value;
-                break;
-        }
-    } else if (element instanceof HTMLTextAreaElement) {
-        value = element.value;
-    } else if (element instanceof HTMLSelectElement) {
-        switch (element.type) {
-            case "select-one":
-                value = element.value;
-                break;
-            case "select-multiple":
-                value = element.value;
-
-                let options = element?.selectedOptions;
-                if (options === undefined)
-                    options = element.querySelectorAll(":scope option:checked");
-                value = Array.from(options).map(({value}) => value);
-
-                break;
-        }
-
-        // values from custom elements
-    } else if (
-        (element?.constructor?.prototype &&
-            !!Object.getOwnPropertyDescriptor(
-                element.constructor.prototype,
-                "value",
-            )?.["get"]) ||
-        element.hasOwnProperty("value")
-    ) {
-        value = element?.["value"];
-    } else {
-        throw new Error("unsupported object");
-    }
-
-    if (isString(value)) {
-        const type = element.getAttribute(ATTRIBUTE_FORM_BIND_TYPE);
-        switch (type) {
-            case "number":
-            case "int":
-            case "float":
-            case "integer":
-                value = Number(value);
-                if (isNaN(value)) {
-                    value = 0;
-                }
-                break;
-            case "boolean":
-            case "bool":
-            case "checkbox":
-                value = value === "true" || value === "1" || value === "on";
-                break;
-            case "array":
-            case "list":
-                value = value.split(",");
-                break;
-            case "object":
-            case "json":
-                value = JSON.parse(value);
-                break;
-            default:
-                break;
-        }
-    }
-
-    const copy = clone(this[internalSymbol].getRealSubject()?.options);
-
-    const pf = new Pathfinder(copy);
-    pf.setVia(path, value);
-
-    const diffResult = diff(copy, this[internalSymbol].getRealSubject()?.options);
-
-    if (diffResult.length > 0) {
-        setTimeout(() => {
-            this.setOption(path, value);
-        }, 50);
-    }
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+	return this;
 }
 
 /**
@@ -363,8 +209,8 @@ function retrieveAndSetValue(element) {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <form data-monster-attributes="disabled path:disabled | if:true, class path:classes.form"
                   data-monster-role="form"

package/source/dom/customelement.mjs

@@ -327,6 +327,7 @@ class CustomElement extends HTMLElement {
 	 * @property {Object} templates Specifies the templates used by the control.
 	 * @property {string} templates.main=undefined Specifies the main template used by the control.
 	 * @property {Object} templateMapping Specifies the mapping of templates.
+	 * @property {Boolean} eventProcessing=false Specifies whether the control processes events.
 	 * @since 1.8.0
 	 */
 	get defaults() {
@@ -338,6 +339,8 @@ class CustomElement extends HTMLElement {
 				main: undefined,
 			},
 			templateMapping: {},
+
+			eventProcessing: false,
 		};
 	}
 
@@ -644,11 +647,17 @@ class CustomElement extends HTMLElement {
 			this[internalSymbol].getRealSubject()["options"],
 		);
 
+		const cfg = {};
+		if (this.getOption("eventProcessing") === true) {
+			cfg.eventProcessing = true;
+		}
+
 		addObjectWithUpdaterToElement.call(
 			this,
 			nodeList,
 			customElementUpdaterLinkSymbol,
 			this[updateCloneDataSymbol],
+			cfg,
 		);
 
 		// Attach a mutation observer to observe changes to the attributes of the element

package/source/dom/updater.mjs

@@ -156,7 +156,6 @@ class Updater extends Base {
 
 		for (const type of this[internalSymbol].eventTypes) {
 			// @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
-
 			this[internalSymbol].element.addEventListener(
 				type,
 				getControlEventHandler.call(this),
@@ -745,9 +744,7 @@ function runUpdateContent(container, parts, subject) {
 
 /**
  * @private
- * @license AGPLv3
  * @since 1.8.0
- * @param {string} path
  * @param {object} change
  * @return {void}
  */
@@ -900,6 +897,10 @@ function handleInputControlAttributeUpdate(element, name, value) {
  * @param {NodeList|HTMLElement|Set<HTMLElement>} elements
  * @param {Symbol} symbol
  * @param {object} object
+ * @param {object} config
+ *
+ * Config: enableEventProcessing {boolean} - default: false - enables the event processing
+ *
  * @return {Promise[]}
  * @license AGPLv3
  * @since 1.23.0
@@ -908,7 +909,7 @@ function handleInputControlAttributeUpdate(element, name, value) {
  * @throws {TypeError} the context of the function is not an instance of HTMLElement
  * @throws {TypeError} symbol must be an instance of Symbol
  */
-function addObjectWithUpdaterToElement(elements, symbol, object) {
+function addObjectWithUpdaterToElement(elements, symbol, object, config = {}) {
 	if (!(this instanceof HTMLElement)) {
 		throw new TypeError(
 			"the context of this function must be an instance of HTMLElement",
@@ -974,7 +975,11 @@ function addObjectWithUpdaterToElement(elements, symbol, object) {
 
 		result.push(
 			u.run().then(() => {
-				return u.enableEventProcessing();
+				if (config.eventProcessing === true) {
+					u.enableEventProcessing();
+				}
+
+				return u;
 			}),
 		);
 	});

package/source/types/version.mjs

@@ -159,7 +159,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.65.0");
+	monsterVersion = new Version("3.73.2");
 
 	return monsterVersion;
 }

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.65.0")
+        monsterVersion = new Version("3.73.2")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 3.65.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Di 18. Jun 22:58:11 CEST 2024</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 3.73.2</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Di 2. Jul 20:16:21 CEST 2024</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>