@schukai/monster 4.128.3 → 4.129.1

package/source/dom/customelement.mjs

@@ -118,6 +118,8 @@ const updateCloneDataSymbol = Symbol("@schukai/monster/dom/@@updateCloneData");
  */
 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.
@@ -278,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.
@@ -541,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
 	 *
@@ -674,6 +742,8 @@ class CustomElement extends HTMLElement {
 			this[internalSymbol].syncDisabledState();
 		}
 
+		syncVisibilityState.call(this);
+
 		return this;
 	}
 
@@ -747,6 +817,10 @@ class CustomElement extends HTMLElement {
 			);
 		}
 
+		if (attrName === "hidden") {
+			syncVisibilityState.call(this);
+		}
+
 		const callback = this[attributeObserverSymbol]?.[attrName];
 		if (isFunction(callback)) {
 			try {
@@ -1296,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}
@@ -1309,15 +1450,18 @@ function initCSSStylesheet() {
 	if (!(shadowRoot instanceof ShadowRoot)) {
 		return this;
 	}
+	const visibilityStyleSheet = getHostVisibilityStyleSheet();
 
 	const styleSheet = this.constructor.getCSSStyleSheet();
 
 	if (styleSheet instanceof CSSStyleSheet) {
 		if (styleSheet.cssRules.length > 0) {
-			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();
@@ -1340,17 +1484,53 @@ function initCSSStylesheet() {
 			shadowRoot.adoptedStyleSheets = assign;
 		}
 	} else if (isString(styleSheet)) {
+		shadowRoot.adoptedStyleSheets = [visibilityStyleSheet];
 		const trimedStyleSheet = styleSheet.trim();
 		if (trimedStyleSheet !== "") {
 			const style = document.createElement("style");
 			style.innerHTML = styleSheet;
 			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}

package/source/dom/util/extract-keys.mjs

@@ -32,32 +32,68 @@ function extractKeys(
 ) {
 	const resultMap = new Map();
 
-	function helper(currentObj, currentKeyPrefix, currentValuePrefix) {
+	function normalizeKeySegment(value) {
+		return String(value).toLowerCase();
+	}
+
+	function toKebabCase(value) {
+		return String(value)
+			.replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+			.toLowerCase();
+	}
+
+	function appendKeys(compactKey, kebabKey, valuePath) {
+		resultMap.set(compactKey, valuePath);
+		if (kebabKey !== compactKey) {
+			resultMap.set(kebabKey, valuePath);
+		}
+	}
+
+	function helper(
+		currentObj,
+		currentCompactKeyPrefix,
+		currentKebabKeyPrefix,
+		currentValuePrefix,
+	) {
 		for (const key in currentObj) {
+			const compactSegment = normalizeKeySegment(key);
+			const kebabSegment = toKebabCase(key);
+
 			if (
 				currentObj[key] !== null &&
 				typeof currentObj[key] === "object" &&
 				!Array.isArray(currentObj[key])
 			) {
-				const newKeyPrefix = currentKeyPrefix
-					? currentKeyPrefix + keySeparator + key.toLowerCase()
-					: key.toLowerCase();
+				const newCompactKeyPrefix = currentCompactKeyPrefix
+					? currentCompactKeyPrefix + keySeparator + compactSegment
+					: compactSegment;
+				const newKebabKeyPrefix = currentKebabKeyPrefix
+					? currentKebabKeyPrefix + keySeparator + kebabSegment
+					: kebabSegment;
 				const newValuePrefix = currentValuePrefix
 					? currentValuePrefix + valueSeparator + key
 					: key;
-				helper(currentObj[key], newKeyPrefix, newValuePrefix);
+				helper(
+					currentObj[key],
+					newCompactKeyPrefix,
+					newKebabKeyPrefix,
+					newValuePrefix,
+				);
 			} else {
-				const finalKey = currentKeyPrefix
-					? currentKeyPrefix + keySeparator + key.toLowerCase()
-					: key.toLowerCase();
+				const finalCompactKey = currentCompactKeyPrefix
+					? currentCompactKeyPrefix + keySeparator + compactSegment
+					: compactSegment;
+				const finalKebabKey = currentKebabKeyPrefix
+					? currentKebabKeyPrefix + keySeparator + kebabSegment
+					: kebabSegment;
 				const finalValue = currentValuePrefix
 					? currentValuePrefix + valueSeparator + key
 					: key;
-				resultMap.set(finalKey, finalValue);
+				appendKeys(finalCompactKey, finalKebabKey, finalValue);
 			}
 		}
 	}
 
-	helper(obj, keyPrefix, keyPrefix);
+	helper(obj, keyPrefix, keyPrefix, keyPrefix);
 	return resultMap;
 }

package/source/dom/util/init-options-from-attributes.mjs

@@ -29,8 +29,10 @@ export { initOptionsFromAttributes };
 /**
  * Initializes the given options object based on the attributes of the current DOM element.
  * The function looks for attributes with the prefix 'data-monster-option-', and maps them to
- * properties in the options object. It replaces the dashes with dots to form the property path.
- * For example, the attribute 'data-monster-option-url' maps to the 'url' property in the options object.
+ * properties in the options object. It supports both the historic compact form and kebab-case aliases
+ * for camelCase option names.
+ * For example, the attributes 'data-monster-option-url' and
+ * 'data-monster-option-popper-content-overflow' map to 'url' and 'popper.contentOverflow'.
  *
  * With the mapping parameter, the attribute value can be mapped to a different value.
  * For example, the attribute 'data-monster-option-foo' maps to the 'bar' property in the options object.

package/source/dom/util/set-option-from-attribute.mjs

@@ -30,8 +30,10 @@ export { setOptionFromAttribute };
 /**
  * Set the given options object based on the attributes of the current DOM element.
  * The function looks for attributes with the prefix 'data-monster-option-', and maps them to
- * properties in the options object. It replaces the dashes with dots to form the property path.
- * For example, the attribute 'data-monster-option-url' maps to the 'url' property in the options object.
+ * properties in the options object. It supports both the historic compact form and kebab-case aliases
+ * for camelCase option names.
+ * For example, the attributes 'data-monster-option-url' and
+ * 'data-monster-option-popper-content-overflow' map to 'url' and 'popper.contentOverflow'.
  *
  * With the mapping parameter, the attribute value can be mapped to a different value.
  * For example, the attribute 'data-monster-option-foo' maps to the 'bar' property in the options object.

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.128.2");
+	monsterVersion = new Version("4.128.3");
 
 	return monsterVersion;
 }

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

@@ -0,0 +1,168 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let Login;
+
+describe("Login", function () {
+	before(function (done) {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill")
+				.then(() => import("../../../../source/components/form/login.mjs"))
+				.then((module) => {
+					Login = module.Login;
+					done();
+				})
+				.catch((error) => done(error));
+		});
+	});
+
+	beforeEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should create a monster-login element", function () {
+		expect(document.createElement("monster-login")).is.instanceof(Login);
+	});
+
+	it("should respect the native hidden attribute on the host", function (done) {
+		const login = document.createElement("monster-login");
+		login.setAttribute("hidden", "");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+				expect(login.isVisible).to.be.false;
+				done();
+			} catch (error) {
+				done(error);
+			}
+		}, 100);
+	});
+
+	it("should hide and show the host with the public visibility API", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		const states = [];
+		login.addEventListener("monster-visibility-changed", (event) => {
+			states.push(event.detail.visible);
+		});
+
+		setTimeout(() => {
+			try {
+				const username = login.shadowRoot.querySelector("input[name='username']");
+				username.focus();
+
+				login.hide();
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+
+		setTimeout(() => {
+			try {
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+
+				login.show();
+
+				setTimeout(() => {
+					try {
+						expect(login.hidden).to.be.false;
+						expect(login.visible).to.be.true;
+						expect(states).to.deep.equal([false, true]);
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 25);
+			} catch (error) {
+				done(error);
+			}
+		}, 200);
+	});
+
+	it("should keep host visibility separate from openLogin", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				login.hide();
+				login.openLogin();
+
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+				done();
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+	});
+
+	it("should show the custom collapse and close the login collapse", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				const loginCollapse = login.shadowRoot.querySelector(
+					'[data-monster-role="login-collapse"]',
+				);
+				const customCollapse = login.shadowRoot.querySelector(
+					'[data-monster-role="custom-collapse"]',
+				);
+
+				expect(loginCollapse.isOpen()).to.be.true;
+				expect(customCollapse.isClosed()).to.be.true;
+
+				const button = document.createElement("button");
+				button.textContent = "Weiter";
+
+				login.showCustomCollapse({
+					header: "Hinweis",
+					content: ["Manueller Inhalt", button],
+					footer: "Footer",
+				});
+
+				setTimeout(() => {
+					try {
+						expect(customCollapse.isOpen()).to.be.true;
+						expect(loginCollapse.isClosed()).to.be.true;
+						expect(
+							login.shadowRoot.getElementById("customCollapseHeader").textContent,
+						).to.equal("Hinweis");
+						expect(
+							login.shadowRoot
+								.getElementById("customCollapseContent")
+								.textContent.includes("Manueller Inhalt"),
+						).to.be.true;
+						expect(
+							login.shadowRoot
+								.getElementById("customCollapseContent")
+								.querySelector("button"),
+						).to.equal(button);
+						expect(
+							login.shadowRoot.getElementById("customCollapseFooter").textContent,
+						).to.equal("Footer");
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 700);
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+	});
+});