@schukai/monster 3.71.2 → 3.72.0

package/source/dom/customelement.mjs

@@ -327,7 +327,6 @@ 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 {string} display=block Specifies the display mode of the control.
 	 * @since 1.8.0
 	 */
 	get defaults() {
@@ -339,20 +338,19 @@ class CustomElement extends HTMLElement {
 				main: undefined,
 			},
 			templateMapping: {},
-			display: "block"
 		};
 	}
 
 	/**
 	 * This method updates the labels of the element.
-	 * The labels are defined in the options object.
+	 * The labels are defined in the option object.
 	 * The key of the label is used to retrieve the translation from the document.
 	 * If the translation is different from the label, the label is updated.
 	 *
 	 * Before you can use this method, you must have loaded the translations.
 	 *
 	 * @returns {Monster.DOM.CustomElement}
-	 * @throws {Error}  Cannot find element with translations. Add a translations object to the document.
+	 * @throws {Error}  Cannot find an element with translations. Add a translation object to the document.
 	 */
 	updateI18n() {
 		let translations;
@@ -597,8 +595,6 @@ class CustomElement extends HTMLElement {
 		let elements;
 		let nodeList;
 
-		this.style.setProperty("display", this.getOption("display"));
-
 		// Extract options from attributes and set them
 		const AttributeOptions = getOptionsFromAttributes.call(this);
 		if (

package/source/dom/slotted.mjs

@@ -12,10 +12,10 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { isString } from "../types/is.mjs";
-import { validateString } from "../types/validate.mjs";
+import {isString} from "../types/is.mjs";
+import {validateString} from "../types/validate.mjs";
 
-export { getSlottedElements, getSlottedNodes };
+export {getSlottedElements, getSlottedNodes};
 
 /**
  * @private
@@ -28,46 +28,46 @@ export { getSlottedElements, getSlottedNodes };
  * @throws {Error} query must be a string
  */
 function getSlottedNodes(query, name) {
-	const result = new Set();
-
-	if (!this.shadowRoot) {
-		return result;
-	}
-
-	let selector = "slot";
-	if (name !== undefined) {
-		if (name === null) {
-			selector += ":not([name])";
-		} else {
-			selector += `[name=${validateString(name)}]`;
-		}
-	}
-
-	const slots = this.shadowRoot.querySelectorAll(selector);
-
-	for (const [, slot] of Object.entries(slots)) {
-		slot.assignedNodes().forEach(function (node) {
-			if (node === null || node === undefined) {
-				return;
-			}
-
-			if (isString(query)) {
-				node.querySelectorAll(query).forEach(function (n) {
-					result.add(n);
-				});
-
-				if (node.matches(query)) {
-					result.add(node);
-				}
-			} else if (query !== undefined) {
-				throw new Error("query must be a string");
-			} else {
-				result.add(node);
-			}
-		});
-	}
-
-	return result;
+    const result = new Set();
+
+    if (!this.shadowRoot) {
+        return result;
+    }
+
+    let selector = "slot";
+    if (name !== undefined) {
+        if (name === null) {
+            selector += ":not([name])";
+        } else {
+            selector += `[name=${validateString(name)}]`;
+        }
+    }
+
+    const slots = this.shadowRoot.querySelectorAll(selector);
+
+    for (const [, slot] of Object.entries(slots)) {
+        slot.assignedNodes().forEach(function (node) {
+            if (node === null || node === undefined) {
+                return;
+            }
+
+            if (isString(query)) {
+                node.querySelectorAll(query).forEach(function (n) {
+                    result.add(n);
+                });
+
+                if (node.matches(query)) {
+                    result.add(node);
+                }
+            } else if (query !== undefined) {
+                throw new Error("query must be a string");
+            } else {
+                result.add(node);
+            }
+        });
+    }
+
+    return result;
 }
 
 /**
@@ -81,46 +81,50 @@ function getSlottedNodes(query, name) {
  * @throws {Error} query must be a string
  */
 function getSlottedElements(query, name) {
-	const result = new Set();
-
-	if (!(this.shadowRoot instanceof ShadowRoot)) {
-		return result;
-	}
-
-	let selector = "slot";
-	if (name !== undefined) {
-		if (name === null) {
-			selector += ":not([name])";
-		} else {
-			selector += `[name=${validateString(name)}]`;
-		}
-	}
-
-	const slots = this.shadowRoot.querySelectorAll(selector);
-
-	for (const [, slot] of Object.entries(slots)) {
-		slot.assignedElements().forEach(function (node) {
-			if (!(node instanceof HTMLElement)) return;
-
-			if (isString(query)) {
-				if (query.length > 0) {
-					node.querySelectorAll(query).forEach(function (n) {
-						result.add(n);
-					});
-
-					if (node.matches(query)) {
-						result.add(node);
-					}
-				} else {
-					result.add(node);
-				}
-			} else if (query !== undefined) {
-				throw new Error("query must be a string and not empty");
-			} else {
-				result.add(node);
-			}
-		});
-	}
-
-	return result;
+    const result = new Set();
+
+    if (!(this.shadowRoot instanceof ShadowRoot)) {
+        return result;
+    }
+
+    let selector = "slot";
+    if (name !== undefined) {
+        if (name === null) {
+            selector += ":not([name])";
+        } else {
+            selector += `[name=${validateString(name)}]`;
+        }
+    }
+
+    const slots = this.shadowRoot.querySelectorAll(selector);
+
+    for (const [, slot] of Object.entries(slots)) {
+        slot.assignedElements().forEach(function (node) {
+
+            if (!(node instanceof HTMLElement)
+                && !(node instanceof SVGElement)
+                && !(node instanceof MathMLElement)
+            ) return;
+
+            if (isString(query)) {
+                if (query.length > 0) {
+                    node.querySelectorAll(query).forEach(function (n) {
+                        result.add(n);
+                    });
+
+                    if (node.matches(query)) {
+                        result.add(node);
+                    }
+                } else {
+                    result.add(node);
+                }
+            } else if (query !== undefined) {
+                throw new Error("query must be a string and not empty");
+            } else {
+                result.add(node);
+            }
+        });
+    }
+
+    return result;
 }

package/test/cases/components/host/details.mjs

@@ -55,7 +55,7 @@ describe('Details', function () {
             try {
                 
                 expect(document.getElementById('mocks')).contain.html(
-                    '<monster-details id="details1" style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>')
+                    '<monster-details id="details1" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>')
             } catch (e) {
                 return done(e);
             }

package/test/cases/components/host/host.mjs

@@ -52,7 +52,7 @@ describe('Host', function () {
 
         setTimeout(() => {
             try {
-                expect(document.getElementById('mocks')).contain.html('<monster-host style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>')
+                expect(document.getElementById('mocks')).contain.html('<monster-host data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>')
             } catch (e) {
                 return done(e);
             }

package/test/cases/components/host/overlay.mjs

@@ -47,7 +47,7 @@ describe('Overlay', function () {
         setTimeout(() => {
             try {
                 expect(document.getElementById('mocks')).contain.html(
-                    ' <monster-overlay style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>')
+                    ' <monster-overlay data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>')
             } catch (e) {
                 return done(e);
             }

package/test/cases/dom/customcontrol.mjs

@@ -138,7 +138,7 @@ describe('DOM', function () {
 
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update 
-                expect(document.getElementById('test1')).contain.html('<monster-customcontrol style="display: block;" data-monster-error="Error: html is not set."></monster-customcontrol>')
+                expect(document.getElementById('test1')).contain.html('<monster-customcontrol data-monster-error="Error: html is not set."></monster-customcontrol>')
             });
         });
 

package/test/cases/dom/customelement.mjs

@@ -242,7 +242,7 @@ describe('DOM', function () {
                 expect(document.getElementsByTagName('monster-testclass').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
                 // but data-monster-error="Error: html is not set."
-                expect(document.getElementById('test1')).contain.html('<monster-testclass style="display: block;" data-monster-error="Error: html is not set."></monster-testclass>');
+                expect(document.getElementById('test1')).contain.html('<monster-testclass data-monster-error="Error: html is not set."></monster-testclass>');
             });
         });
 
@@ -256,7 +256,7 @@ describe('DOM', function () {
                     try {
                         expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1);
                         expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p><div id="container"></div></article>');
-                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 style="display: block;" data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
+                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
                         return done();
                     } catch (e) {
                         done(e);