@schukai/monster 3.71.3 → 3.73.0

package/source/dom/constants.mjs

@@ -65,6 +65,8 @@ export {
 	ATTRIBUTE_ENTERKEYHINT,
 	ATTRIBUTE_EXPORTPARTS,
 	ATTRIBUTE_HIDDEN,
+	ATTRIBUTE_FORM_BIND,
+	ATTRIBUTE_FORM_BIND_TYPE,
 	objectUpdaterLinkSymbol,
 	customElementUpdaterLinkSymbol,
 	initControlCallbackName,
@@ -207,6 +209,22 @@ const ATTRIBUTE_UPDATER_REMOVE = `${ATTRIBUTE_PREFIX}remove`;
  */
 const ATTRIBUTE_UPDATER_BIND = `${ATTRIBUTE_PREFIX}bind`;
 
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @license AGPLv3
+ * @since 3.73.0
+ */
+const ATTRIBUTE_FORM_BIND = `${ATTRIBUTE_PREFIX}form-bind`;
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @license AGPLv3
+ * @since 3.73.0
+ */
+const ATTRIBUTE_FORM_BIND_TYPE = `${ATTRIBUTE_PREFIX}form-bind-type`;
+
 /**
  * @memberOf Monster.DOM
  * @type {string}

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

@@ -100,7 +100,12 @@ function getSlottedElements(query, name) {
 
 	for (const [, slot] of Object.entries(slots)) {
 		slot.assignedElements().forEach(function (node) {
-			if (!(node instanceof HTMLElement)) return;
+			if (
+				!(node instanceof HTMLElement) &&
+				!(node instanceof SVGElement) &&
+				!(node instanceof MathMLElement)
+			)
+				return;
 
 			if (isString(query)) {
 				if (query.length > 0) {

package/source/dom/updater.mjs

@@ -156,6 +156,7 @@ 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),
@@ -399,6 +400,7 @@ function retrieveAndSetValue(element) {
 	}
 
 	const copy = clone(this[internalSymbol].subject.getRealSubject());
+
 	const pf = new Pathfinder(copy);
 	pf.setVia(path, value);
 

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);