@schukai/monster 4.128.3 → 4.129.0

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.128.3"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.129.0"}

package/source/components/datatable/datatable.mjs

@@ -1692,7 +1692,10 @@ function updateGrid() {
  * @return {void}
  */
 function scheduleGridUpdate() {
-	if (this[resizeFrameRequestSymbol] !== null && this[resizeFrameRequestSymbol] !== undefined) {
+	if (
+		this[resizeFrameRequestSymbol] !== null &&
+		this[resizeFrameRequestSymbol] !== undefined
+	) {
 		return;
 	}
 

package/source/components/datatable/pagination.mjs

@@ -238,6 +238,8 @@ class Pagination extends CustomElement {
 				list.setAttribute("data-monster-adaptive-ready", "true");
 			}
 		}
+
+		syncPaginationStateToDom.call(this, pagination);
 	}
 	/**
 	 *
@@ -803,6 +805,42 @@ function buildPagination(current, max) {
 	};
 }
 
+/**
+ * @private
+ * @param {object} pagination
+ * @returns {void}
+ */
+function syncPaginationStateToDom(pagination) {
+	if (!this.shadowRoot || !pagination) {
+		return;
+	}
+
+	const prevLink = this.shadowRoot.querySelector(
+		"a[data-monster-role=pagination-prev]",
+	);
+	if (prevLink instanceof HTMLElement) {
+		prevLink.setAttribute("href", pagination.prevHref || "#");
+		prevLink.setAttribute("data-page-no", `${pagination.prevNo ?? ""}`);
+		prevLink.className = `previous${pagination.prevClass || ""}`.trim();
+	}
+
+	const nextLink = this.shadowRoot.querySelector(
+		"a[data-monster-role=pagination-next]",
+	);
+	if (nextLink instanceof HTMLElement) {
+		nextLink.setAttribute("href", pagination.nextHref || "#");
+		nextLink.setAttribute("data-page-no", `${pagination.nextNo ?? ""}`);
+		nextLink.className = `next${pagination.nextClass || ""}`.trim();
+	}
+
+	const summary = this.shadowRoot.querySelector(
+		"[data-monster-role=pagination-summary] span",
+	);
+	if (summary instanceof HTMLElement) {
+		summary.textContent = pagination.summary || "";
+	}
+}
+
 /**
  * @private
  */
@@ -1226,7 +1264,7 @@ function getTemplate() {
                    data-monster-replace="path:items.label"></a></li>
         </template>
 
-        <div data-monster-role="control" part="control">
+        <div data-monster-role="control" part="control" data-monster-select-this="true">
             <nav data-monster-role="pagination" role="navigation" aria-label="pagination" part="nav">
                 <ul class="pagination-list" data-monster-insert="items path:pagination.items"
                     data-monster-adaptive-ready="false"

package/source/components/form/login.mjs

@@ -89,6 +89,30 @@ const resetLoginProcessLinksSymbol = Symbol("resetLoginProcessLink");
  */
 const loggedInCollapseSymbol = Symbol("loggedInCollapse");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const customCollapseSymbol = Symbol("customCollapse");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const customCollapseHeaderSymbol = Symbol("customCollapseHeader");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const customCollapseContentSymbol = Symbol("customCollapseContent");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const customCollapseFooterSymbol = Symbol("customCollapseFooter");
+
 /**
  * @private
  * @type {symbol}
@@ -473,6 +497,98 @@ class Login extends CustomElement {
 		return this;
 	}
 
+	/**
+	 * Opens the custom collapse and focuses the first focusable element if available.
+	 *
+	 * @returns {Login}
+	 */
+	openCustomCollapse() {
+		this[customCollapseSymbol].open();
+		focusFirstCustomCollapseElement.call(this);
+		return this;
+	}
+
+	/**
+	 * Replaces the header content of the custom collapse.
+	 *
+	 * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+	 * @returns {Login}
+	 */
+	setCustomCollapseHeader(content) {
+		setCustomCollapseSectionContent.call(
+			this,
+			this[customCollapseHeaderSymbol],
+			content,
+		);
+		return this;
+	}
+
+	/**
+	 * Replaces the main content of the custom collapse.
+	 *
+	 * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+	 * @returns {Login}
+	 */
+	setCustomCollapseContent(content) {
+		setCustomCollapseSectionContent.call(
+			this,
+			this[customCollapseContentSymbol],
+			content,
+		);
+		return this;
+	}
+
+	/**
+	 * Replaces the footer content of the custom collapse.
+	 *
+	 * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+	 * @returns {Login}
+	 */
+	setCustomCollapseFooter(content) {
+		setCustomCollapseSectionContent.call(
+			this,
+			this[customCollapseFooterSymbol],
+			content,
+		);
+		return this;
+	}
+
+	/**
+	 * Clears all custom collapse sections.
+	 *
+	 * @returns {Login}
+	 */
+	clearCustomCollapse() {
+		this[customCollapseHeaderSymbol].replaceChildren();
+		this[customCollapseContentSymbol].replaceChildren();
+		this[customCollapseFooterSymbol].replaceChildren();
+		return this;
+	}
+
+	/**
+	 * Replaces the custom collapse content and opens it.
+	 *
+	 * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|Object|null|undefined} content
+	 * @returns {Login}
+	 */
+	showCustomCollapse(content) {
+		if (isObject(content) && !(content instanceof Node) && !isArray(content)) {
+			if ("header" in content) {
+				this.setCustomCollapseHeader(content.header);
+			}
+			if ("content" in content) {
+				this.setCustomCollapseContent(content.content);
+			}
+			if ("footer" in content) {
+				this.setCustomCollapseFooter(content.footer);
+			}
+		} else if (content !== undefined) {
+			this.setCustomCollapseContent(content);
+		}
+
+		return this.openCustomCollapse();
+	}
+
 	/**
 	 * @return {string}
 	 */
@@ -1745,6 +1861,20 @@ function initControlReferences() {
 		`[data-monster-role="logged-in-collapse"]`,
 	);
 
+	this[customCollapseSymbol] = this.shadowRoot.querySelector(
+		`[data-monster-role="custom-collapse"]`,
+	);
+
+	this[customCollapseHeaderSymbol] = this.shadowRoot.getElementById(
+		"customCollapseHeader",
+	);
+	this[customCollapseContentSymbol] = this.shadowRoot.getElementById(
+		"customCollapseContent",
+	);
+	this[customCollapseFooterSymbol] = this.shadowRoot.getElementById(
+		"customCollapseFooter",
+	);
+
 	this[digitsCollapseSymbol] = this.shadowRoot.querySelector(
 		`[data-monster-role="digits-collapse"]`,
 	);
@@ -1957,8 +2087,75 @@ function getTemplate() {
                     <slot name="logged-in-footer"></slot>
                 </div>
             </monster-collapse>
+            <monster-collapse data-monster-role="custom-collapse"
+                              exportparts="
+								control:collapse-custom-control,
+								container:collapse-custom-container,
+								deco:collapse-custom-deco"
+                              part="custom-collapse">
+                <div part="custom-collapse-wrapper">
+                    <div id="customCollapseHeader" part="custom-collapse-header"></div>
+                    <div id="customCollapseContent" part="custom-collapse-content"></div>
+                    <div id="customCollapseFooter" part="custom-collapse-footer"></div>
+                </div>
+            </monster-collapse>
 
         </div>`;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} target
+ * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+ * @returns {void}
+ */
+function setCustomCollapseSectionContent(target, content) {
+	if (!(target instanceof HTMLElement)) {
+		return;
+	}
+
+	target.replaceChildren(...normalizeCustomCollapseContent.call(this, content));
+
+	if (this[customCollapseSymbol]?.isOpen()) {
+		this[customCollapseSymbol].adjustHeight();
+	}
+}
+
+/**
+ * @private
+ * @param {string|number|boolean|Node|Array<string|number|boolean|Node>|null|undefined} content
+ * @returns {Node[]}
+ */
+function normalizeCustomCollapseContent(content) {
+	if (content === null || content === undefined) {
+		return [];
+	}
+
+	if (content instanceof Node) {
+		return [content];
+	}
+
+	if (isArray(content)) {
+		return content.flatMap((entry) =>
+			normalizeCustomCollapseContent.call(this, entry),
+		);
+	}
+
+	return [this.ownerDocument.createTextNode(String(content))];
+}
+
+/**
+ * @private
+ * @returns {void}
+ */
+function focusFirstCustomCollapseElement() {
+	setTimeout(() => {
+		const focusable = this[customCollapseSymbol]?.querySelector(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+		);
+
+		focusable?.focus?.();
+	}, 0);
+}
+
 registerCustomElement(Login);

package/source/components/form/select.mjs

@@ -2004,7 +2004,7 @@ function getSelectionTemplate() {
                     data-monster-role="filter"
                     autocomplete="off"
                     tabindex="0"
-            ><div data-monster-replace="path:messages.control"
+            ><div data-monster-replace="path:messages.control" part="selection-messages"
                   data-monster-attributes="class path:messages.control | length | gt:0 | ?::hidden" 
                   data-monster-role="selection-messages"></div>
             </div>`;
@@ -2023,7 +2023,7 @@ function getSummaryTemplate() {
            autocomplete="off"
            tabindex="0"
     >
-    <div data-monster-replace="path:messages.selected" data-monster-role="summary-messages"></div>
+    <div data-monster-replace="path:messages.selected" part="summary-messages" data-monster-role="summary-messages"></div>
 </div>`;
 }
 
@@ -4469,7 +4469,7 @@ function getTemplate() {
         <slot class="hidden"></slot>
 
         <div data-monster-role="control" part="control" tabindex="0">
-            <div data-monster-role="container">
+            <div data-monster-role="container" part="container">
                 \${selected}
             </div>
 
@@ -4487,7 +4487,7 @@ function getTemplate() {
                     <div part="options" data-monster-role="options" data-monster-insert="options path:options"
                          tabindex="-1"></div>
                 </div>
-                <monster-pagination data-monster-role="pagination"></monster-pagination>
+                <monster-pagination data-monster-role="pagination" part="pagination"></monster-pagination>
                 <div part="remote-info"
                      data-monster-role="remote-info"
                      data-monster-attributes="class path:classes.remoteInfo"

package/source/components/form/tree-select.mjs

@@ -547,12 +547,12 @@ function getTemplate() {
         <slot class="hidden"></slot>
 
         <div data-monster-role="control" part="control" tabindex="0">
-            <div data-monster-role="container">
+            <div data-monster-role="container" part="container">
                 \${selected}
             </div>
 
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
-                <div class="option-filter-control" role="search">
+                <div class="option-filter-control" role="search" part="popper-filter-control">
                     <input type="text" role="searchbox"
                            part="popper-filter" name="popper-filter"
                            data-monster-role="filter"

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/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;
 }