@schukai/monster 3.53.0 → 3.55.0

package/source/dom/util.mjs

@@ -15,6 +15,7 @@ export {
 	findElementWithIdUpwards,
 	getContainingDocument,
 	getRegisteredCustomElements,
+	findElementWithSelectorUpwards,
 };
 
 /**
@@ -207,6 +208,47 @@ function findElementWithIdUpwards(element, targetId) {
 	return findElementWithIdUpwards(element.parentElement, targetId);
 }
 
+/**
+ * Recursively searches upwards from a given element to find an ancestor element
+ * with a specified selector, considering both normal DOM and shadow DOM.
+ * This method is useful for finding a parent element with a specific class.
+ * 
+ * @param {HTMLElement|ShadowRoot} element - The starting element or shadow root to search from.
+ * @param {string} selector - The selector of the target element to find.
+ * @returns {HTMLElement|null} - The ancestor element with the specified selector, or null if not found.
+ * @memberOf Monster.DOM
+ * @since 3.55.0
+ */
+function findElementWithSelectorUpwards(element, selector) {
+	if (!element) {
+		return null;
+	}
+
+	// Search within the current element's shadow root, if it exists
+	if (element.shadowRoot) {
+		const target = element.shadowRoot.querySelector(selector);
+		if (target) {
+			return target;
+		}
+	}
+
+	if (element === document.documentElement) {
+		const target = document.querySelector(selector);
+		if (target) {
+			return target;
+		}
+	}
+
+	// If the current element is inside a shadow root, search its host's ancestors
+	const rootNode = element.getRootNode();
+	if (rootNode && rootNode instanceof ShadowRoot) {
+		return findElementWithSelectorUpwards(rootNode.host, selector);
+	}
+
+	// Otherwise, search the current element's parent
+	return findElementWithSelectorUpwards(element.parentElement, selector);
+}
+
 /**
  * @private
  * @param {HTMLElement} element

package/source/i18n/providers/embed.mjs

@@ -141,7 +141,7 @@ class Embed extends Provider {
 	 * `script[data-monster-role=translations]` is searched for and the translations are assigned to the element.
 	 *
 	 * @param element
-	 * @returns {Promise<unknown[]>}
+	 * @returns {Promise<Awaited<unknown>[]>}
 	 */
 	static assignTranslationsToElement(element) {
 		const d = getDocument();
@@ -152,13 +152,13 @@ class Embed extends Provider {
 
 		const list = d.querySelectorAll("script[data-monster-role=translations]");
 		if (list === null) {
-			return;
+			return Promise.resolve([]);
 		}
 
 		const promises = [];
 
 		list.forEach((translationElement) => {
-			const p = new Embed(translationElement);
+			const p = new Embed(translationElement, {});
 			promises.push(p.assignToElement(undefined, element));
 		});
 

package/source/monster.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -27,6 +28,7 @@ export * from "./components/form/state-button.mjs";
 export * from "./components/form/popper.mjs";
 export * from "./components/form/select.mjs";
 export * from "./components/form/confirm-button.mjs";
+export * from "./components/form/context-error.mjs";
 export * from "./components/form/action-button.mjs";
 export * from "./components/form/form.mjs";
 export * from "./components/form/api-button.mjs";
@@ -45,6 +47,7 @@ export * from "./components/form/stylesheet/state-button.mjs";
 export * from "./components/form/stylesheet/popper.mjs";
 export * from "./components/form/stylesheet/select.mjs";
 export * from "./components/form/stylesheet/confirm-button.mjs";
+export * from "./components/form/stylesheet/context-error.mjs";
 export * from "./components/form/stylesheet/action-button.mjs";
 export * from "./components/form/stylesheet/form.mjs";
 export * from "./components/form/stylesheet/api-button.mjs";
@@ -93,6 +96,7 @@ export * from "./components/datatable/util.mjs";
 export * from "./components/datatable/filter.mjs";
 export * from "./components/datatable/dataset.mjs";
 export * from "./components/datatable/embedded-pagination.mjs";
+export * from "./components/datatable/status.mjs";
 export * from "./components/datatable/constants.mjs";
 export * from "./components/datatable/stylesheet/select-filter.mjs";
 export * from "./components/datatable/stylesheet/datasource.mjs";
@@ -105,6 +109,7 @@ export * from "./components/datatable/stylesheet/filter.mjs";
 export * from "./components/datatable/stylesheet/dataset.mjs";
 export * from "./components/datatable/stylesheet/embedded-pagination.mjs";
 export * from "./components/datatable/stylesheet/filter-controls-defaults.mjs";
+export * from "./components/datatable/stylesheet/status.mjs";
 export * from "./components/datatable/stylesheet/filter-range.mjs";
 export * from "./components/state/log/entry.mjs";
 export * from "./components/state/state.mjs";
@@ -120,6 +125,7 @@ export * from "./components/stylesheet/spinner.mjs";
 export * from "./components/stylesheet/control.mjs";
 export * from "./components/stylesheet/card.mjs";
 export * from "./components/stylesheet/common.mjs";
+export * from "./components/stylesheet/icons.mjs";
 export * from "./components/stylesheet/popper.mjs";
 export * from "./components/stylesheet/theme.mjs";
 export * from "./components/stylesheet/data-grid.mjs";

package/source/text/formatter.mjs

@@ -112,8 +112,8 @@ class Formatter extends BaseWithOptions {
 	/**
 	 * Default values for the markers are `${` and `}`
 	 *
-	 * @param {object} object
-	 * @throws {TypeError} value is not a object
+	 * @param object
+	 * @param options
 	 */
 	constructor(object, options) {
 		super(options);

package/source/types/observer.mjs

@@ -135,7 +135,7 @@ class Observer extends Base {
 
 			setTimeout(() => {
 				try {
-					// the queue and the settimeout ensure that an object is not
+					// the queue and the `setTimeout` ensure that an object is not
 					// informed of the same change more than once.
 					if (self.queue.isEmpty()) {
 						resolve();

package/source/types/version.mjs

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

package/source/util/sleep.mjs

@@ -0,0 +1,18 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+
+/**
+ * 
+ * @param milliseconds
+ * @returns {Promise<unknown>}
+ * @since 3.55.0
+ * @memberOf Monster.Util
+ */
+export function Sleep(milliseconds) {
+    return new Promise(resolve => setTimeout(resolve, milliseconds));
+}

package/test/cases/components/form/button.mjs

@@ -103,6 +103,7 @@ describe('Button', function () {
 
             setTimeout(() => {
                 try {
+                    
                     const options = button.shadowRoot.querySelector('button');
 
                     expect(options).is.instanceof(HTMLButtonElement);
@@ -112,7 +113,7 @@ describe('Button', function () {
                 }
 
                 done();
-            }, 0)
+            }, 100)
 
 
         });

package/test/cases/components/form/select.mjs

@@ -176,7 +176,7 @@ describe('Select', function () {
                                 done();
 
 
-                            }, 0)
+                            }, 100)
                         }
                     }
 

package/test/cases/components/form/tree-select.mjs

@@ -172,7 +172,7 @@ describe('Treeselect', function () {
                     }
 
                     done();
-                }, 0)
+                }, 100)
 
 
             });

package/test/cases/data/transformer.mjs

@@ -110,13 +110,13 @@ describe('Transformer', function () {
             [' if:a: ', false, undefined], // without \\
             [' if:a:\\ ', false, " "],
             [' if:a:\\ ', true, "a"],
+            ['default:undefined:bool', undefined, false],
             ['default:yes', null, 'yes'],
             ['default:yes', undefined, 'yes'],
             ['default:1:bool', undefined, true],
             ['default:on:bool', undefined, true],
             ['default:true:bool', undefined, true],
             ['default:yes:bool', undefined, true],
-            ['default:undefined:bool', undefined, false],
             ['default:false:bool', undefined, false],
             ['default:1:int', undefined, 1],
             ['default:1:string', undefined, '1'],
@@ -190,7 +190,7 @@ describe('Transformer', function () {
                 });
 
                 const r = t.run(b);
-                expect(r).to.be.eql(c);
+                expect(r).to.be.eql(c, "Transformer.run(" + JSON.stringify(a) + ").run(" + JSON.stringify(b) + ") should return " + JSON.stringify(c));
             });
         });
 

package/test/cases/dom/updater.mjs

@@ -177,15 +177,19 @@ describe('DOM', function () {
                     }
                 );
 
+                let promise = u.run();
 
-                u.run().then(() => {
-                    done(new Error("should never called!"));
-                }).catch((e) => {
-                    expect(e).is.instanceOf(Error);
-                    expect(e + "").to.be.equal('Error: the value is not iterable');
-                    done();
-                })
-
+                setTimeout(() => {
+                    promise.then(() => {
+                        setTimeout(() => {
+                            done(new Error("should never called!"));
+                        }, 100);
+                    }).catch((e) => {
+                        expect(e).is.instanceOf(Error);
+                        expect(e + "").to.be.equal('Error: the value is not iterable');
+                        done();
+                    })
+                }, 100);
 
             });
 
@@ -232,13 +236,15 @@ describe('DOM', function () {
                 );
 
                 d.run().then(() => {
+                    setTimeout(() => {
+                        expect(typeof d).is.equal('object');
+                        for (let i = 0; i < 6; i++) {
+                            expect(element).contain.html('<li data-monster-replace="path:a.b.' + i + ' | tojson" data-monster-insert-reference="current-' + i + '">{"i":"' + i + '"}</li>');
+                        }
 
-                    expect(typeof d).is.equal('object');
-                    for (let i = 0; i < 6; i++) {
-                        expect(element).contain.html('<li data-monster-replace="path:a.b.' + i + ' | tojson" data-monster-insert-reference="current-' + i + '">{"i":"' + i + '"}</li>');
-                    }
+                        done();
+                    }, 100);
 
-                    done();
                 }).catch(
                     e => {
                         done(new Error(e))
@@ -490,6 +496,7 @@ describe('DOM', function () {
             it('should add lower hello and HELLOyes!', function (done) {
                 let element = document.getElementById('test1')
 
+
                 let d = new Updater(
                     element,
                     {
@@ -497,24 +504,28 @@ describe('DOM', function () {
                     }
                 );
 
+
                 d.setCallback('myformatter', function (a) {
                     return a + 'yes!'
                 })
 
-                setTimeout(() => {
-                    d.run().then(() => {
 
+                d.run().then(() => {
+                    setTimeout(() => {
                         expect(typeof d).is.equal('object');
                         expect(element).contain.html('<div data-monster-replace="path:text | tolower">hallo</div>');
                         expect(element).contain.html('<div data-monster-replace="path:text | call:myformatter">HALLOyes!</div>');
                         expect(element).contain.html('<div data-monster-replace="static:hello\\ ">hello </div>');
 
                         return done();
-                    }).catch(
-                        e => {
-                            done(new Error(e))
-                        })
-                }, 100)
+
+                    }, 100);
+
+                }).catch(
+                    e => {
+                        done(new Error(e))
+                    })
+
 
             });
         });
@@ -546,13 +557,16 @@ describe('DOM', function () {
 
 
                 d.run().then(() => {
+                    setTimeout(() => {
+                        expect(typeof d).is.equal('object');
+                        expect(element).contain.html('<div data-monster-insert="myid path:a.b">');
+                        expect(element).contain.html('<p data-monster-insert="myinnerid path:a.b" data-monster-insert-reference="myid-0">');
+                        expect(element).contain.html('<span data-monster-replace="path:a.b.0 | tojson" data-monster-insert-reference="myinnerid-0">{"i":"0"}</span>');
+
+                        done();
 
-                    expect(typeof d).is.equal('object');
-                    expect(element).contain.html('<div data-monster-insert="myid path:a.b">');
-                    expect(element).contain.html('<p data-monster-insert="myinnerid path:a.b" data-monster-insert-reference="myid-0">');
-                    expect(element).contain.html('<span data-monster-replace="path:a.b.0 | tojson" data-monster-insert-reference="myinnerid-0">{"i":"0"}</span>');
+                    }, 100);
 
-                    done();
                 }).catch(
                     e => {
                         done(new Error(e))
@@ -608,27 +622,30 @@ describe('DOM', function () {
 
                 d.run().then(() => {
 
+                    setTimeout(() => {
+                        expect(element).contain.html('<div data-monster-attributes="class path:a.b" class="div-class">');
+                        expect(element).contain.html('<input data-monster-attributes="value path:a.c" id="input1" value="hello">');
+                        expect(element).contain.html('<textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea" value="test">');
+                        expect(element).contain.html('<input data-monster-attributes="checked path:a.radio" type="radio" name="radio" value="r1" id="radio" checked="true">');
 
-                    expect(element).contain.html('<div data-monster-attributes="class path:a.b" class="div-class">');
-                    expect(element).contain.html('<input data-monster-attributes="value path:a.c" id="input1" value="hello">');
-                    expect(element).contain.html('<textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea" value="test">');
-                    expect(element).contain.html('<input data-monster-attributes="checked path:a.radio" type="radio" name="radio" value="r1" id="radio" checked="true">');
+                        expect(text.value, 'text control').to.be.equal(d.getSubject()['a']['c']);
+                        expect(radio.checked, 'radio control').to.be.equal(true);
+                        expect(textarea.value, 'textarea control').to.be.equal(d.getSubject()['a']['textarea']);
+                        expect(select.selectedIndex, 'select control').to.be.equal(1); // [0=>other-value, 1=>value2]
 
-                    expect(text.value, 'text control').to.be.equal(d.getSubject()['a']['c']);
-                    expect(radio.checked, 'radio control').to.be.equal(true);
-                    expect(textarea.value, 'textarea control').to.be.equal(d.getSubject()['a']['textarea']);
-                    expect(select.selectedIndex, 'select control').to.be.equal(1); // [0=>other-value, 1=>value2]
+                        let multiselectSelectedOptions = [];
+                        for (const [index, obj] of Object.entries(multiselect.selectedOptions)) {
+                            multiselectSelectedOptions.push(obj.value);
+                        }
 
-                    let multiselectSelectedOptions = [];
-                    for (const [index, obj] of Object.entries(multiselect.selectedOptions)) {
-                        multiselectSelectedOptions.push(obj.value);
-                    }
 
+                        expect(JSON.stringify(multiselectSelectedOptions), 'multiselect control').to.be.equal(JSON.stringify(d.getSubject()['a']['multiselect']));
+                        expect(checkbox.checked, 'checkbox control').to.be.true;
+
+                        done();
 
-                    expect(JSON.stringify(multiselectSelectedOptions), 'multiselect control').to.be.equal(JSON.stringify(d.getSubject()['a']['multiselect']));
-                    expect(checkbox.checked, 'checkbox control').to.be.true;
+                    }, 100);
 
-                    done();
                 }).catch(
                     e => {
                         done(new Error(e))
@@ -726,14 +743,18 @@ describe('DOM', function () {
                 );
                 setTimeout(() => {
                     d.run().then(() => {
-                        try {
-                            expect(containerElement).contain.html('<div>yeah! <b>Test</b>!</div>');
-                        } catch (e) {
-                            return done(e);
-                        }
+
+                        setTimeout(() => {
+
+                            try {
+                                expect(containerElement).contain.html('<div>yeah! <b>Test</b>!</div>');
+                            } catch (e) {
+                                return done(e);
+                            }
 
 
-                        done()
+                            done()
+                        }, 100)
                     })
                 }, 100)
 

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.53.0")
+        monsterVersion = new Version("3.55.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -15,8 +15,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 4.0.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Fr 3. Nov 18:43:13 CET 2023</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 3.54.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mi 29. Nov 15:34:53 CET 2023</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>

package/test/web/tests.js

@@ -4,6 +4,7 @@ try {
 try {
 try {
 try {
+try {
 (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
@@ -10418,7 +10419,7 @@ try {
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/reload");
+          return Symbol.for("@schukai/monster/components/form/reload");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -21606,7 +21607,7 @@ ${key.data.toString("base64")}
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/tabs");
+          return Symbol.for("@schukai/monster/components/form/tabs");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -22162,7 +22163,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/button@@instance");
+          return Symbol.for("@schukai/monster/components/form/button@@instance");
         }
         /**
          *
@@ -22449,7 +22450,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/state-button@@instance");
+          return Symbol.for("@schukai/monster/components/form/state-button@@instance");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -25508,7 +25509,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/select@@instance");
+          return Symbol.for("@schukai/monster/components/form/select@@instance");
         }
         /**
          * The current selection of the Select
@@ -26122,7 +26123,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @returns {symbol}
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/popper@@instance");
+          return Symbol.for("@schukai/monster/components/form/popper@@instance");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -26373,7 +26374,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/popper-button@@instance");
+          return Symbol.for("@schukai/monster/components/form/popper-button@@instance");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -26663,7 +26664,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/message-state-button@@instance");
+          return Symbol.for("@schukai/monster/components/form/message-state-button@@instance");
         }
         /**
          *
@@ -26994,7 +26995,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/confirm-button@@instance");
+          return Symbol.for("@schukai/monster/components/form/confirm-button@@instance");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -28552,7 +28553,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
       init_customelement();
       init_form();
       ATTRIBUTE_FORM_DATASOURCE_ACTION = `${ATTRIBUTE_PREFIX}datasource-action`;
-      formDataSymbol = Symbol.for("@schukai/component-form/form@@formdata");
+      formDataSymbol = Symbol.for("@schukai/monster/components/form/form@@formdata");
       formDataUpdaterSymbol = Symbol.for(
         "@schukai/component-form/form@@formdata-updater-link"
       );
@@ -28578,7 +28579,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/form");
+          return Symbol.for("@schukai/monster/components/form/form");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -29388,7 +29389,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/tree-select@@instance");
+          return Symbol.for("@schukai/monster/components/form/tree-select@@instance");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -29614,7 +29615,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
          * @since 2.1.0
          */
         static get [instanceSymbol]() {
-          return Symbol.for("@schukai/component-form/template");
+          return Symbol.for("@schukai/monster/components/form/template");
         }
         /**
          * To set the options via the html tag the attribute `data-monster-options` must be used.
@@ -48098,3 +48099,7 @@ document.getElementById('mocha-stats').style.backgroundColor = 'red';
 document.getElementById('mocha-errors').insertAdjacentHTML('afterbegin', e );
 document.getElementById('mocha-stats').style.backgroundColor = 'red';
 }
+} catch (e) {
+document.getElementById('mocha-errors').insertAdjacentHTML('afterbegin', e );
+document.getElementById('mocha-stats').style.backgroundColor = 'red';
+}