@schukai/monster 4.128.2 → 4.129.0

package/source/dom/customelement.mjs

@@ -117,6 +117,9 @@ const updateCloneDataSymbol = Symbol("@schukai/monster/dom/@@updateCloneData");
  * @type {symbol}
  */
 const scriptHostElementSymbol = Symbol("scriptHostElement");
+const managedShadowRootSymbol = Symbol("managedShadowRoot");
+const visibilityStateSymbol = Symbol("visibilityState");
+let hostVisibilityStyleSheet = null;
 
 /**
  * The `CustomElement` class provides a way to define a new HTML element using the power of Custom Elements.
@@ -277,6 +280,24 @@ class CustomElement extends HTMLElement {
 		return this;
 	}
 
+	/**
+	 * Returns whether the host element is currently visible.
+	 *
+	 * @returns {boolean}
+	 */
+	get visible() {
+		return !this.hidden;
+	}
+
+	/**
+	 * Alias for the current host visibility state.
+	 *
+	 * @returns {boolean}
+	 */
+	get isVisible() {
+		return this.visible;
+	}
+
 	/**
 	 * The `customization` property allows overwriting the defaults.
 	 * Unlike the defaults that expect an object, the customization is a Map.
@@ -540,6 +561,54 @@ class CustomElement extends HTMLElement {
 		return this;
 	}
 
+	/**
+	 * Shows the host element.
+	 *
+	 * @returns {CustomElement}
+	 */
+	show() {
+		return this.setVisible(true);
+	}
+
+	/**
+	 * Hides the host element.
+	 *
+	 * @returns {CustomElement}
+	 */
+	hide() {
+		return this.setVisible(false);
+	}
+
+	/**
+	 * Sets the host visibility.
+	 *
+	 * @param {boolean} visible
+	 * @returns {CustomElement}
+	 */
+	setVisible(visible) {
+		if (visible) {
+			this.removeAttribute("hidden");
+		} else {
+			this.setAttribute("hidden", "");
+		}
+
+		return this;
+	}
+
+	/**
+	 * Toggles the host visibility.
+	 *
+	 * @param {boolean} [force]
+	 * @returns {CustomElement}
+	 */
+	toggleVisibility(force) {
+		if (typeof force === "boolean") {
+			return this.setVisible(force);
+		}
+
+		return this.setVisible(!this.visible);
+	}
+
 	/**
 	 * Is called once via the constructor
 	 *
@@ -623,7 +692,7 @@ class CustomElement extends HTMLElement {
 		if (this.getOption("shadowMode", false) !== false) {
 			try {
 				initShadowRoot.call(this);
-				elements = this.shadowRoot.childNodes;
+				elements = getManagedShadowRoot.call(this)?.childNodes;
 			} catch (e) {
 				addErrorAttribute(this, e);
 			}
@@ -673,6 +742,8 @@ class CustomElement extends HTMLElement {
 			this[internalSymbol].syncDisabledState();
 		}
 
+		syncVisibilityState.call(this);
+
 		return this;
 	}
 
@@ -746,6 +817,10 @@ class CustomElement extends HTMLElement {
 			);
 		}
 
+		if (attrName === "hidden") {
+			syncVisibilityState.call(this);
+		}
+
 		const callback = this[attributeObserverSymbol]?.[attrName];
 		if (isFunction(callback)) {
 			try {
@@ -770,11 +845,12 @@ class CustomElement extends HTMLElement {
 			return true;
 		}
 
-		if (!(this.shadowRoot instanceof ShadowRoot)) {
+		const shadowRoot = getManagedShadowRoot.call(this);
+		if (!(shadowRoot instanceof ShadowRoot)) {
 			return false;
 		}
 
-		return containChildNode.call(this.shadowRoot, node);
+		return containChildNode.call(shadowRoot, node);
 	}
 
 	/**
@@ -815,7 +891,7 @@ function callControlCallback(callBackFunctionName, ...args) {
 
 		const list = targetId.split(",");
 		for (const id of list) {
-			const host = findElementWithIdUpwards(this, targetId);
+			const host = findElementWithIdUpwards(this, id.trim());
 			if (!(host instanceof HTMLElement)) {
 				continue;
 			}
@@ -878,8 +954,14 @@ function attachAttributeChangeMutationObserver() {
 
 	self[attributeMutationObserverSymbol] = new MutationObserver(
 		function (mutations, observer) {
+			const observedAttributes = new Set(
+				self.constructor.observedAttributes || [],
+			);
 			for (const mutation of mutations) {
 				if (mutation.type === "attributes") {
+					if (observedAttributes.has(mutation.attributeName)) {
+						continue;
+					}
 					self.attributeChangedCallback(
 						mutation.attributeName,
 						mutation.oldValue,
@@ -1014,7 +1096,8 @@ function initOptionObserver() {
 			return;
 		}
 
-		if (!(self.shadowRoot instanceof ShadowRoot) && !self.childNodes.length) {
+		const shadowRoot = getManagedShadowRoot.call(self);
+		if (!(shadowRoot instanceof ShadowRoot) && !self.childNodes.length) {
 			return;
 		}
 
@@ -1024,8 +1107,8 @@ function initOptionObserver() {
 			"button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]";
 
 		let elements = [];
-		if (self.shadowRoot instanceof ShadowRoot) {
-			elements = self.shadowRoot.querySelectorAll(query);
+		if (shadowRoot instanceof ShadowRoot) {
+			elements = shadowRoot.querySelectorAll(query);
 		}
 
 		let nodeList;
@@ -1235,6 +1318,16 @@ function parseOptionsJSON(data) {
 	return validateObject(obj);
 }
 
+function getManagedShadowRoot() {
+	if (this[managedShadowRootSymbol] instanceof ShadowRoot) {
+		return this[managedShadowRootSymbol];
+	}
+	if (this.shadowRoot instanceof ShadowRoot) {
+		return this.shadowRoot;
+	}
+	return null;
+}
+
 /**
  * @private
  * @param html
@@ -1277,6 +1370,73 @@ function initHtmlContent() {
 	return this;
 }
 
+/**
+ * @private
+ * @returns {void}
+ */
+function syncVisibilityState() {
+	const visible = !this.hidden;
+	if (typeof this[visibilityStateSymbol] === "undefined") {
+		this[visibilityStateSymbol] = visible;
+		if (!visible) {
+			blurFocusedElement.call(this);
+		}
+		return;
+	}
+
+	if (this[visibilityStateSymbol] === visible) {
+		return;
+	}
+
+	if (!visible) {
+		blurFocusedElement.call(this);
+	}
+
+	this[visibilityStateSymbol] = visible;
+	dispatchVisibilityChangedEvent.call(this, visible);
+}
+
+/**
+ * @private
+ * @returns {void}
+ */
+function blurFocusedElement() {
+	const shadowRoot = getManagedShadowRoot.call(this);
+	const activeShadowElement = shadowRoot?.activeElement;
+
+	if (activeShadowElement instanceof HTMLElement) {
+		activeShadowElement.blur();
+	}
+
+	if (document.activeElement === this && typeof this.blur === "function") {
+		this.blur();
+	}
+
+	if (shadowRoot?.activeElement instanceof HTMLElement) {
+		const body = getDocument()?.body;
+		if (body instanceof HTMLElement) {
+			body.setAttribute("tabindex", "-1");
+			body.focus();
+			body.removeAttribute("tabindex");
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {boolean} visible
+ * @returns {void}
+ */
+function dispatchVisibilityChangedEvent(visible) {
+	this.dispatchEvent(
+		new CustomEvent("monster-visibility-changed", {
+			bubbles: true,
+			composed: true,
+			detail: { visible },
+		}),
+	);
+}
+
 /**
  * @private
  * @return {CustomElement}
@@ -1286,25 +1446,29 @@ function initHtmlContent() {
  * @throws {TypeError} value is not an instance of
  */
 function initCSSStylesheet() {
-	if (!(this.shadowRoot instanceof ShadowRoot)) {
+	const shadowRoot = getManagedShadowRoot.call(this);
+	if (!(shadowRoot instanceof ShadowRoot)) {
 		return this;
 	}
+	const visibilityStyleSheet = getHostVisibilityStyleSheet();
 
 	const styleSheet = this.constructor.getCSSStyleSheet();
 
 	if (styleSheet instanceof CSSStyleSheet) {
 		if (styleSheet.cssRules.length > 0) {
-			this.shadowRoot.adoptedStyleSheets = [styleSheet];
+			shadowRoot.adoptedStyleSheets = [visibilityStyleSheet, styleSheet];
+		} else {
+			shadowRoot.adoptedStyleSheets = [visibilityStyleSheet];
 		}
 	} else if (isArray(styleSheet)) {
-		const assign = [];
+		const assign = [visibilityStyleSheet];
 		for (const s of styleSheet) {
 			if (isString(s)) {
 				const trimedStyleSheet = s.trim();
 				if (trimedStyleSheet !== "") {
 					const style = document.createElement("style");
 					style.innerHTML = trimedStyleSheet;
-					this.shadowRoot.prepend(style);
+					shadowRoot.prepend(style);
 				}
 				continue;
 			}
@@ -1317,20 +1481,56 @@ function initCSSStylesheet() {
 		}
 
 		if (assign.length > 0) {
-			this.shadowRoot.adoptedStyleSheets = assign;
+			shadowRoot.adoptedStyleSheets = assign;
 		}
 	} else if (isString(styleSheet)) {
+		shadowRoot.adoptedStyleSheets = [visibilityStyleSheet];
 		const trimedStyleSheet = styleSheet.trim();
 		if (trimedStyleSheet !== "") {
 			const style = document.createElement("style");
 			style.innerHTML = styleSheet;
-			this.shadowRoot.prepend(style);
+			shadowRoot.prepend(style);
 		}
+	} else {
+		shadowRoot.adoptedStyleSheets = [visibilityStyleSheet];
 	}
 
 	return this;
 }
 
+/**
+ * @private
+ * @returns {CSSStyleSheet}
+ */
+function getHostVisibilityStyleSheet() {
+	if (hostVisibilityStyleSheet instanceof CSSStyleSheet) {
+		return hostVisibilityStyleSheet;
+	}
+
+	hostVisibilityStyleSheet = new CSSStyleSheet();
+	hostVisibilityStyleSheet.replaceSync(
+		":host([hidden]){display:none !important}",
+	);
+
+	return hostVisibilityStyleSheet;
+}
+
+/**
+ * @private
+ * @param {ShadowRoot} shadowRoot
+ * @returns {void}
+ */
+function appendVisibilityHostStyle(shadowRoot) {
+	if (!(shadowRoot instanceof ShadowRoot)) {
+		return;
+	}
+
+	const style = document.createElement("style");
+	style.setAttribute("data-monster-host-visibility", "true");
+	style.textContent = ":host([hidden]){display:none !important}";
+	shadowRoot.prepend(style);
+}
+
 /**
  * @private
  * @return {CustomElement}
@@ -1352,13 +1552,15 @@ function initShadowRoot() {
 		}
 	}
 
-	this.attachShadow({
+	this[managedShadowRootSymbol] = this.attachShadow({
 		mode: this.getOption("shadowMode", "open"),
 		delegatesFocus: this.getOption("delegatesFocus", true),
 	});
 
 	if (template instanceof Template) {
-		this.shadowRoot.appendChild(template.createDocumentFragment());
+		this[managedShadowRootSymbol].appendChild(
+			template.createDocumentFragment(),
+		);
 		return this;
 	}
 
@@ -1374,7 +1576,7 @@ function initShadowRoot() {
 		html = formatter.format(html);
 	}
 
-	this.shadowRoot.innerHTML = substituteI18n.call(this, html);
+	this[managedShadowRootSymbol].innerHTML = substituteI18n.call(this, html);
 	return this;
 }
 

package/source/dom/updater.mjs

@@ -88,6 +88,7 @@ const updaterRootSymbol = Symbol.for("@schukai/monster/dom/@@updater-root");
 const disposedSymbol = Symbol("disposed");
 const subjectObserverSymbol = Symbol("subjectObserver");
 const patchNodeKeySymbol = Symbol("patchNodeKey");
+const queuedSnapshotSymbol = Symbol("queuedSnapshot");
 
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
@@ -155,6 +156,7 @@ class Updater extends Base {
 		this[pendingDiffsSymbol] = [];
 		this[processingSymbol] = false;
 		this[disposedSymbol] = false;
+		this[queuedSnapshotSymbol] = clone(this[internalSymbol].last);
 
 		this[subjectObserverSymbol] = new Observer(() => {
 			if (this[disposedSymbol] === true) {
@@ -162,12 +164,13 @@ class Updater extends Base {
 			}
 
 			const real = this[internalSymbol].subject.getRealSubject();
-			const diffResult = diff(this[internalSymbol].last, real);
-			this[internalSymbol].last = clone(real);
+			const diffResult = diff(this[queuedSnapshotSymbol], real);
 			if (diffResult.length === 0) {
 				return Promise.resolve();
 			}
-			this[pendingDiffsSymbol].push(diffResult);
+			const snapshot = clone(real);
+			this[queuedSnapshotSymbol] = snapshot;
+			this[pendingDiffsSymbol].push({ diffResult, snapshot });
 			return this[processQueueSymbol]();
 		});
 		this[internalSymbol].subject.attachObserver(this[subjectObserverSymbol]);
@@ -194,7 +197,7 @@ class Updater extends Base {
 					return Promise.resolve();
 				}
 
-				const diffResult = this[pendingDiffsSymbol].shift();
+				const { diffResult, snapshot } = this[pendingDiffsSymbol].shift();
 				if (this[internalSymbol].features.batchUpdates === true) {
 					const updatePaths = new Map();
 					for (const change of Object.values(diffResult)) {
@@ -225,6 +228,7 @@ class Updater extends Base {
 						await this[applyChangeSymbol](change);
 					}
 				}
+				this[internalSymbol].last = clone(snapshot);
 			}
 		} catch (err) {
 			addErrorAttribute(this[internalSymbol]?.element, err);
@@ -371,6 +375,7 @@ class Updater extends Base {
 		// the key __init__has no further meaning and is only
 		// used to create the diff for empty objects.
 		this[internalSymbol].last = { __init__: true };
+		this[queuedSnapshotSymbol] = clone(this[internalSymbol].last);
 		return this[internalSymbol].subject.notifyObservers();
 	}
 
@@ -597,12 +602,17 @@ function retrieveAndSetValue(element) {
 	switch (type) {
 		case "integer?":
 		case "int?":
-		case "number?":
+		case "number?": {
+			const empty =
+				value === undefined ||
+				value === null ||
+				(isString(value) && value.trim() === "");
 			value = Number(value);
-			if (isNaN(value) || 0 === value) {
+			if (empty || isNaN(value)) {
 				value = undefined;
 			}
 			break;
+		}
 
 		case "number":
 		case "int":
@@ -1055,7 +1065,7 @@ function runUpdateContent(container, parts, subject) {
 		 * @type {HTMLElement}
 		 */
 		for (const [element] of iterator.entries()) {
-			if (mem.has(element)) return;
+			if (mem.has(element)) continue;
 			mem.add(element);
 
 			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
@@ -1113,7 +1123,7 @@ function runUpdatePatch(container, parts, subject) {
 		}
 
 		for (const [element] of iterator.entries()) {
-			if (mem.has(element)) return;
+			if (mem.has(element)) continue;
 			mem.add(element);
 
 			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_PATCH);
@@ -1501,7 +1511,7 @@ function runUpdateAttributes(container, parts, subject) {
 		}
 
 		for (const [element] of iterator.entries()) {
-			if (mem.has(element)) return;
+			if (mem.has(element)) continue;
 			mem.add(element);
 
 			// this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
@@ -1576,7 +1586,7 @@ function runUpdateProperties(container, parts, subject) {
 		}
 
 		for (const [element] of iterator.entries()) {
-			if (mem.has(element)) return;
+			if (mem.has(element)) continue;
 			mem.add(element);
 
 			// this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
@@ -1625,14 +1635,24 @@ function handleInputControlAttributeUpdate(element, name, value) {
 	if (element instanceof HTMLSelectElement) {
 		switch (element.type) {
 			case "select-multiple":
-				for (const [index, opt] of Object.entries(element.options)) {
-					opt.selected = value.indexOf(opt.value) !== -1;
+				const selectedValues = isArray(value)
+					? value
+					: value === undefined || value === null
+						? []
+						: [`${value}`];
+				for (const [, opt] of Object.entries(element.options)) {
+					opt.selected = selectedValues.indexOf(opt.value) !== -1;
 				}
 
 				break;
 			case "select-one":
 				// Only one value may be selected
+				if (value === undefined || value === null) {
+					element.selectedIndex = -1;
+					break;
+				}
 
+				element.selectedIndex = -1;
 				for (const [index, opt] of Object.entries(element.options)) {
 					if (opt.value === value) {
 						element.selectedIndex = index;

package/source/types/is.mjs

@@ -36,6 +36,9 @@ export {
  * @returns {boolean}
  */
 function isElement(value) {
+	if (typeof Element === "undefined") {
+		return false;
+	}
 	return value instanceof Element;
 }
 

package/source/types/proxyobserver.mjs

@@ -209,22 +209,19 @@ function getHandler() {
 				return true;
 			}
 
-			let result;
-			let descriptor = Reflect.getOwnPropertyDescriptor(target, key);
-
-			if (descriptor === undefined) {
-				descriptor = {
-					writable: true,
-					enumerable: true,
-					configurable: true,
-				};
+			const result = Reflect.set(target, key, value, receiver);
+			if (result !== true) {
+				return result;
 			}
 
-			descriptor["value"] = value;
-			result = Reflect.defineProperty(target, key, descriptor);
-
 			if (typeof key !== "symbol") {
-				proxy.observers.notify(proxy);
+				let next = Reflect.get(target, key, receiver);
+				if (proxy.proxyMap.has(next)) {
+					next = proxy.proxyMap.get(next);
+				}
+				if (next !== current) {
+					proxy.observers.notify(proxy);
+				}
 			}
 
 			return result;

package/source/types/version.mjs

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

package/test/cases/components/content/image-editor.mjs

@@ -0,0 +1,98 @@
+'use strict';
+
+import * as chai from 'chai';
+import {getDocument} from "../../../../source/dom/util.mjs";
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+describe('ImageEditor', function () {
+
+    let ImageEditor, document;
+    let registerCustomElement;
+    let CustomElement;
+    let assembleMethodSymbol;
+
+    before(function (done) {
+        initJSDOM({}).then(() => {
+            import("../../../../source/dom/customelement.mjs").then((domModule) => {
+                registerCustomElement = domModule['registerCustomElement'];
+                CustomElement = domModule['CustomElement'];
+                assembleMethodSymbol = domModule['assembleMethodSymbol'];
+                return import("../../../../source/components/content/image-editor.mjs");
+            }).then((m) => {
+                try {
+                    ImageEditor = m['ImageEditor'];
+                    document = getDocument();
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+            }).catch((e) => done(e));
+        });
+    });
+
+    beforeEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = '<div id="target"></div>';
+    });
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = '';
+    });
+
+    it('should not double-call attributeChangedCallback for readonly', function (done) {
+        const htmlTAG = 'monster-image-editor-observed-test';
+
+        class ObservedImageEditor extends ImageEditor {
+            static getTag() {
+                return htmlTAG;
+            }
+
+            get defaults() {
+                return Object.assign({}, super.defaults, {
+                    shadowMode: false,
+                    templates: {
+                        main: '<div id="image-editor-test"></div>'
+                    }
+                });
+            }
+
+            [assembleMethodSymbol]() {
+                return CustomElement.prototype[assembleMethodSymbol].call(this);
+            }
+
+            constructor() {
+                super();
+                this.attributeChangedCalls = [];
+            }
+
+            attributeChangedCallback(name, oldValue, newValue) {
+                this.attributeChangedCalls.push([name, oldValue, newValue]);
+            }
+        }
+
+        registerCustomElement(ObservedImageEditor);
+
+        let element = document.createElement(htmlTAG);
+        document.getElementById('target').appendChild(element);
+
+        element.attributeChangedCalls = [];
+        element.setAttribute('data-monster-readonly', '');
+
+        setTimeout(function () {
+            try {
+                const readonlyCalls = element.attributeChangedCalls.filter(
+                    ([name]) => name === 'data-monster-readonly',
+                );
+                expect(readonlyCalls).to.have.length(1);
+                done();
+            } catch (e) {
+                done(e);
+            }
+        }, 20);
+    });
+});