@schukai/monster 4.67.0 → 4.69.0

package/source/components/files/stylesheet/file-manager.mjs

@@ -0,0 +1,55 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, 2025. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ */
+
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+
+export { FileManagerStyleSheet };
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const FileManagerStyleSheet = new CSSStyleSheet();
+
+try {
+	FileManagerStyleSheet.insertRule(
+		`
+@layer filemanager {
+:host{box-sizing:border-box;display:block;height:100%;height:-webkit-fill-available;height:fill-available;height:-moz-available;height:stretch;min-height:320px}
+[data-monster-role=control]{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--monster-space-4);height:100%}
+[data-monster-role=toolbar]{align-items:center;display:flex;gap:var(--monster-space-4);justify-content:space-between}
+[data-monster-role=actions]{display:flex;gap:var(--monster-space-3);justify-content:flex-end}
+[data-monster-role=title]{font-weight:700}
+monster-split-panel{flex:1;min-height:300px}
+monster-split-panel::part(control){height:100%}
+monster-split-panel::part(endPanel){overflow:hidden}
+[data-monster-role=nav-panel],[data-monster-role=editor-panel]{height:100%}
+[data-monster-role=nav-panel]{display:flex;flex-direction:column;min-height:0}
+[data-monster-role=editor-panel]{display:flex;flex-direction:column;gap:var(--monster-space-3);min-height:0;overflow:hidden;position:relative}
+[data-monster-role=tabs-container]{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
+monster-tabs{flex:1;min-height:0;height:100%}
+[data-monster-role=empty]{align-items:center;display:flex;inset:0;justify-content:center;padding:var(--monster-space-4);position:absolute;text-align:center}
+[data-monster-role=tab-content]{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:auto}
+[data-monster-role=tab-content]:not(.active){display:none}
+[data-monster-role=editor]{flex:1;font-family:var(--monster-font-family-monospace);height:100%;min-height:0;overflow:auto;resize:none;width:100%}
+}
+`,
+		0,
+	);
+} catch (e) {
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
+}

package/source/components/layout/panel.mjs

@@ -141,11 +141,18 @@ class Panel extends CustomElement {
 function calcHeight() {
 	this.style.boxSizing = "border-box";
 
-	const height = calculateMaximumHeight.call(this, this);
+	let height = calculateMaximumHeight.call(this, this);
 	if (height < 0) {
 		return;
 	}
 
+	const parent =
+		this.parentNode instanceof HTMLElement ? this.parentNode : null;
+	const parentHeight = parent?.clientHeight || 0;
+	if (parentHeight > 0) {
+		height = Math.min(height, parentHeight);
+	}
+
 	this.style.height = `${height}px`;
 }
 
@@ -162,11 +169,19 @@ function calculateMaximumHeight(element) {
 	let totalBoxShadowHeight = 0;
 	let currentElement = element;
 
+	if (!(element instanceof Element)) {
+		return -1;
+	}
+
 	// Get the distance from the top of the element to the top of the viewport
 	const distanceFromTop = element.getBoundingClientRect().top;
 
 	// Loop through the elements up to the body to sum up the bottom borders, padding, and margin
 	while (currentElement && currentElement !== document.body) {
+		if (!(currentElement instanceof Element)) {
+			currentElement = currentElement.parentNode || currentElement.host;
+			continue;
+		}
 		const style = window.getComputedStyle(currentElement);
 
 		// Box sizing

package/source/components/layout/split-panel.mjs

@@ -182,6 +182,14 @@ class SplitPanel extends CustomElement {
 		}
 
 		this[internalSymbol].getSubject().currentDimension = dimension;
+		if (
+			this[startPanelElementSymbol] &&
+			this[endPanelElementSymbol] &&
+			this[draggerElementSymbol] &&
+			this[splitScreenElementSymbol]
+		) {
+			applyPanelDimensions.call(this);
+		}
 		return this;
 	}
 

package/source/components/layout/tabs.mjs

@@ -181,8 +181,8 @@ class Tabs extends CustomElement {
 	 * @property {string} labels.new-tab-label="New Tab"
 	 * @property {Object} features
 	 * @property {number} features.openDelay=500 Open delay in milliseconds
-	 * @property {string} features.removeBehavior="auto" Remove behavior, auto (default), next, previous and none
-	 * @property {boolean} features.openFirst=true Open the first tab
+	 * @property {string} features.removeBehavior Remove behavior, auto, next, previous and none
+	 * @property {boolean} features.openFirst Open the first tab when no active tab is set
 	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
 	 * @property {String} fetch.redirect=error
 	 * @property {String} fetch.method=GET
@@ -216,7 +216,7 @@ class Tabs extends CustomElement {
 			features: {
 				openDelay: null,
 				removeBehavior: "auto",
-				openFirst: true,
+				openFirst: false,
 			},
 
 			classes: {
@@ -845,55 +845,85 @@ function initEventHandler() {
 				let doChange = false;
 				let nextName = null;
 				let previousName = null;
+				let targetReference = null;
+				let activeReference = null;
+				let restoreOpenFirst = null;
 
 				const btn = this.getOption("buttons");
-				for (let i = 0; i < btn.standard.length; i++) {
-					if (btn.standard[i].reference === reference) {
-						if (btn.standard[i].state === "active") {
-							doChange = i;
-							if (i < btn.standard.length - 1) {
-								nextName = btn.standard[i + 1]?.reference;
-							}
-							if (i > 0) {
-								previousName = btn.standard[i - 1]?.reference;
-							}
+				if (btn?.standard) {
+					const activeButton = btn.standard.find(
+						(item) => item.state === "active",
+					);
+					activeReference = activeButton?.reference || null;
+				}
+
+				const nodes = getSlottedElements.call(this);
+				const orderedTabs = [];
+				for (const node of nodes) {
+					if (node instanceof HTMLElement) {
+						orderedTabs.push(node);
+					}
+				}
+
+				for (let i = 0; i < orderedTabs.length; i++) {
+					const node = orderedTabs[i];
+					if (node.getAttribute("id") === reference) {
+						if (reference === activeReference) {
+							doChange = true;
+							nextName = orderedTabs[i + 1]?.getAttribute?.("id") || null;
+							previousName = orderedTabs[i - 1]?.getAttribute?.("id") || null;
 						}
 						break;
 					}
 				}
 
 				if (reference) {
-					const container = this.querySelector(`[id=${reference}]`);
+					const escapedReference =
+						typeof CSS !== "undefined" && CSS.escape
+							? CSS.escape(reference)
+							: reference;
+					const container = this.querySelector(`[id=${escapedReference}]`);
 					if (container instanceof HTMLElement) {
 						if (doChange) {
 							switch (this.getOption("features.removeBehavior")) {
 								case "auto":
 									if (nextName !== null) {
-										self.activeTab(nextName);
+										targetReference = nextName;
 									} else {
 										if (previousName !== null) {
-											self.activeTab(previousName);
+											targetReference = previousName;
 										}
 									}
 									break;
 								case "next":
 									if (nextName !== null) {
-										self.activeTab(nextName);
+										targetReference = nextName;
 									}
 									break;
 								case "previous":
 									if (previousName !== null) {
-										self.activeTab(previousName);
+										targetReference = previousName;
 									}
 									break;
 
 								default: // and "none"
 									break;
 							}
+							if (targetReference) {
+								self.activeTab(targetReference);
+								restoreOpenFirst = this.getOption("features.openFirst");
+								this.setOption("features.openFirst", false);
+							}
 						}
 
 						container.remove();
 						initTabButtons.call(this);
+						if (targetReference) {
+							if (restoreOpenFirst !== null) {
+								this.setOption("features.openFirst", restoreOpenFirst);
+							}
+							self.activeTab(targetReference);
+						}
 						fireCustomEvent(this, "monster-tab-remove", {
 							reference,
 						});
@@ -1053,7 +1083,6 @@ function initTabButtons() {
 		}
 
 		if (node.matches(".active") === true && disabled !== true) {
-			node.classList.remove("active");
 			activeReference = reference;
 		}
 

package/source/monster.mjs

@@ -1,5 +1,5 @@
 /**
- * Copyright © Volker Schukai and all contributing authors, 2025. All rights reserved.
+ * Copyright © Volker Schukai and all contributing authors, 2026. All rights reserved.
  * Node module: @schukai/monster
  *
  * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
@@ -34,12 +34,15 @@ export * from "./components/content/fetch-box.mjs";
 export * from "./components/content/viewer.mjs";
 export * from "./components/content/camera-capture.mjs";
 export * from "./components/content/copy.mjs";
+export * from "./components/content/image-editor.mjs";
 export * from "./components/content/viewer/html.mjs";
 export * from "./components/content/viewer/message.mjs";
+export * from "./components/files/file-manager.mjs";
 export * from "./components/time/timeline/appointment.mjs";
 export * from "./components/time/timeline/segment.mjs";
 export * from "./components/time/day.mjs";
 export * from "./components/time/month-calendar.mjs";
+export * from "./components/form/buy-box.mjs";
 export * from "./components/form/message-state-button.mjs";
 export * from "./components/form/password.mjs";
 export * from "./components/form/dropzone.mjs";
@@ -53,10 +56,13 @@ export * from "./components/form/api-bar.mjs";
 export * from "./components/form/tabs.mjs";
 export * from "./components/form/state-button.mjs";
 export * from "./components/form/popper.mjs";
+export * from "./components/form/cart-control.mjs";
 export * from "./components/form/select.mjs";
 export * from "./components/form/login.mjs";
 export * from "./components/form/confirm-button.mjs";
 export * from "./components/form/context-error.mjs";
+export * from "./components/form/variant-select.mjs";
+export * from "./components/form/register-wizard.mjs";
 export * from "./components/form/action-button.mjs";
 export * from "./components/form/form.mjs";
 export * from "./components/form/api-button.mjs";
@@ -88,15 +94,15 @@ export * from "./components/host/util.mjs";
 export * from "./components/host/call-button.mjs";
 export * from "./components/host/details.mjs";
 export * from "./components/host/constants.mjs";
+export * from "./components/datatable/filter/text-operator.mjs";
+export * from "./components/datatable/filter/time.mjs";
 export * from "./components/datatable/filter/input.mjs";
-export * from "./components/datatable/filter/date.mjs";
 export * from "./components/datatable/filter/date-presets.mjs";
+export * from "./components/datatable/filter/date.mjs";
 export * from "./components/datatable/filter/date-range.mjs";
-export * from "./components/datatable/filter/date-time.mjs";
-export * from "./components/datatable/filter/time.mjs";
-export * from "./components/datatable/filter/text-operator.mjs";
 export * from "./components/datatable/filter/abstract-base.mjs";
 export * from "./components/datatable/filter/settings.mjs";
+export * from "./components/datatable/filter/date-time.mjs";
 export * from "./components/datatable/filter/range.mjs";
 export * from "./components/datatable/datasource/dom.mjs";
 export * from "./components/datatable/datasource/rest.mjs";

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

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.66.0")
+        monsterVersion = new Version("4.68.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.66.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mi 31. Dez 02:19:45 CET 2025</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.68.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Fr 2. Jan 17:20:55 CET 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>