@schukai/monster 4.109.0 → 4.110.0

package/source/components/form/style/sheet.pcss

@@ -0,0 +1,178 @@
+/* monster-sheet – Excel-like grid control */
+
+:host {
+  --sheet-border-color: var(--monster-theme-control-border-color);
+  --sheet-border-strong: var(--monster-color-primary-4);
+  --sheet-border-width: var(--monster-theme-control-border-width, 1px);
+  --sheet-border-style: var(--monster-theme-control-border-style, solid);
+  --sheet-header-bg: var(--monster-bg-color-primary-2);
+  --sheet-header-fg: var(--monster-color-primary-1);
+  --sheet-cell-bg: var(--monster-bg-color-primary-1);
+  --sheet-cell-fg: var(--monster-color-primary-1);
+  --sheet-grid-gap: 0;
+  --sheet-row-header-width: 56px;
+  --sheet-header-height: 32px;
+  --sheet-cell-padding-inline: 8px;
+  --sheet-cell-padding-block: 6px;
+  --sheet-resize-handle: 6px;
+  color: var(--sheet-cell-fg);
+  display: block;
+  font-family: var(--monster-font-family);
+}
+
+[part="control"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--monster-space-4);
+  height: 100%;
+}
+
+[part="toolbar"] {
+  display: flex;
+  gap: var(--monster-space-4);
+}
+
+[part="grid-wrapper"] {
+  border: var(--sheet-border-width) var(--sheet-border-style)
+          var(--sheet-border-color);
+  overflow: auto;
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+[part="grid"] {
+  display: grid;
+  gap: var(--sheet-grid-gap);
+  min-width: max-content;
+  background: var(--sheet-cell-bg);
+}
+
+:host([data-virtualized]) [part="grid"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: transform;
+}
+
+:host([data-virtualized]) [part="corner"],
+:host([data-virtualized]) [part="column-header"],
+:host([data-virtualized]) [part="row-header"] {
+  position: relative;
+}
+
+:host([data-resizing]) [part="grid"] {
+  user-select: none;
+}
+
+[part="corner"],
+[part="column-header"],
+[part="row-header"] {
+  background: var(--sheet-header-bg);
+  color: var(--sheet-header-fg);
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  position: sticky;
+  z-index: 2;
+  white-space: nowrap;
+  word-break: keep-all;
+}
+
+[part="corner"] {
+  left: 0;
+  top: 0;
+  z-index: 3;
+}
+
+[part="column-header"] {
+  top: 0;
+  justify-content: center;
+}
+
+[part="row-header"] {
+  left: 0;
+  justify-content: flex-end;
+  padding-inline: var(--sheet-cell-padding-inline);
+}
+
+[part="cell"] {
+  border-right: var(--sheet-border-width) var(--sheet-border-style)
+                var(--sheet-border-color);
+  border-bottom: var(--sheet-border-width) var(--sheet-border-style)
+                 var(--sheet-border-color);
+  background: var(--sheet-cell-bg);
+  display: flex;
+  align-items: stretch;
+}
+
+[part="column-header"],
+[part="row-header"],
+[part="corner"] {
+  border-bottom: var(--sheet-border-width) var(--sheet-border-style)
+                 var(--sheet-border-strong);
+  border-right: var(--sheet-border-width) var(--sheet-border-style)
+                var(--sheet-border-strong);
+}
+
+[part="column-header"],
+[part="corner"] {
+  border-bottom: 0;
+}
+
+[part="row-header"],
+[part="corner"] {
+  border-right: 0;
+}
+
+[part="cell-input"] {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: var(--sheet-cell-padding-block) var(--sheet-cell-padding-inline);
+  width: 100%;
+  outline: none;
+}
+
+[part="cell-input"]:focus {
+  background: var(--monster-bg-color-primary-2);
+}
+
+[part="column-resize"] {
+  position: absolute;
+  right: -1px;
+  top: 0;
+  height: 100%;
+  width: var(--sheet-resize-handle);
+  cursor: col-resize;
+  pointer-events: auto;
+  touch-action: none;
+  z-index: 4;
+  background: linear-gradient(
+    to right,
+    transparent 0,
+    transparent calc(100% - 1px),
+    var(--sheet-border-strong) calc(100% - 1px),
+    var(--sheet-border-strong) 100%
+  );
+}
+
+[part="row-resize"] {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: var(--sheet-resize-handle);
+  cursor: row-resize;
+  pointer-events: auto;
+  touch-action: none;
+  z-index: 4;
+  background: linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent calc(100% - 1px),
+    var(--sheet-border-strong) calc(100% - 1px),
+    var(--sheet-border-strong) 100%
+  );
+}

package/source/components/form/stylesheet/sheet.mjs

@@ -0,0 +1,38 @@
+/**
+ * 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).
+ * 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 { SheetStyleSheet };
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const SheetStyleSheet = new CSSStyleSheet();
+
+try {
+	SheetStyleSheet.insertRule(
+		`
+@layer sheet { 
+:host{--sheet-border-color:var(--monster-theme-control-border-color);--sheet-border-strong:var(--monster-color-primary-4);--sheet-border-width:var(--monster-theme-control-border-width,1px);--sheet-border-style:var(--monster-theme-control-border-style,solid);--sheet-header-bg:var(--monster-bg-color-primary-2);--sheet-header-fg:var(--monster-color-primary-1);--sheet-cell-bg:var(--monster-bg-color-primary-1);--sheet-cell-fg:var(--monster-color-primary-1);--sheet-grid-gap:0;--sheet-row-header-width:56px;--sheet-header-height:32px;--sheet-cell-padding-inline:8px;--sheet-cell-padding-block:6px;--sheet-resize-handle:6px;color:var(--sheet-cell-fg);display:block;font-family:var(--monster-font-family)}[part=control]{flex-direction:column;height:100%}[part=control],[part=toolbar]{display:flex;gap:var(--monster-space-4)}[part=grid-wrapper]{border:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-color);flex:1;min-height:0;overflow:auto;position:relative}[part=grid]{background:var(--sheet-cell-bg);display:grid;gap:var(--sheet-grid-gap);min-width:-moz-max-content;min-width:max-content}:host([data-virtualized]) [part=grid]{left:0;position:absolute;top:0;will-change:transform}:host([data-virtualized]) [part=column-header],:host([data-virtualized]) [part=corner],:host([data-virtualized]) [part=row-header]{position:relative}:host([data-resizing]) [part=grid]{-webkit-user-select:none;-moz-user-select:none;user-select:none}[part=column-header],[part=corner],[part=row-header]{align-items:center;background:var(--sheet-header-bg);color:var(--sheet-header-fg);display:flex;font-weight:600;position:sticky;white-space:nowrap;word-break:keep-all;z-index:2}[part=corner]{left:0;top:0;z-index:3}[part=column-header]{justify-content:center;top:0}[part=row-header]{justify-content:flex-end;left:0;padding-inline:var(--sheet-cell-padding-inline)}[part=cell]{align-items:stretch;background:var(--sheet-cell-bg);border-bottom:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-color);border-right:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-color);display:flex}[part=column-header],[part=corner],[part=row-header]{border-bottom:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-strong);border-right:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-strong)}[part=column-header],[part=corner]{border-bottom:0}[part=corner],[part=row-header]{border-right:0}[part=cell-input]{background:transparent;border:0;color:inherit;font:inherit;outline:none;padding:var(--sheet-cell-padding-block) var(--sheet-cell-padding-inline);width:100%}[part=cell-input]:focus{background:var(--monster-bg-color-primary-2)}[part=column-resize]{background:linear-gradient(to right,transparent 0,transparent calc(100% - 1px),var(--sheet-border-strong) calc(100% - 1px),var(--sheet-border-strong) 100%);cursor:col-resize;height:100%;right:-1px;top:0;width:var(--sheet-resize-handle)}[part=column-resize],[part=row-resize]{pointer-events:auto;position:absolute;touch-action:none;z-index:4}[part=row-resize]{background:linear-gradient(to bottom,transparent 0,transparent calc(100% - 1px),var(--sheet-border-strong) calc(100% - 1px),var(--sheet-border-strong) 100%);bottom:-1px;cursor:row-resize;height:var(--sheet-resize-handle);left:0;width:100%} 
+}`,
+		0,
+	);
+} catch (e) {
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
+}

package/source/i18n/replace-marker.mjs

@@ -0,0 +1,280 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. 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.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { registerCustomElement } from "../dom/customelement.mjs";
+import { sanitizeHtml } from "../dom/sanitize-html.mjs";
+import { addErrorAttribute } from "../dom/error.mjs";
+import { getDocument } from "../dom/util.mjs";
+import { getDocumentTranslations } from "./translations.mjs";
+import { isObject, isString } from "../types/is.mjs";
+import { validateObject, validateString } from "../types/validate.mjs";
+
+export {
+	I18nReplaceMarker,
+	setI18nReplaceSanitizePolicy,
+	setI18nReplaceDefaultSanitizePolicy,
+	getI18nReplaceSanitizePolicy,
+};
+
+/**
+ * @private
+ * @type {string}
+ */
+const TAG_PREFIX = "monster-";
+
+/**
+ * @private
+ * @type {string}
+ */
+const TAG_NAME = `${TAG_PREFIX}i18n-replace`;
+
+/**
+ * @private
+ * @type {Map<string, object>}
+ */
+const sanitizePolicies = new Map();
+
+/**
+ * @private
+ * @type {string}
+ */
+let defaultSanitizePolicy = "default";
+
+sanitizePolicies.set("default", {});
+sanitizePolicies.set("strict", {
+	blockedTags: ["script", "iframe", "object", "embed", "link", "meta"],
+});
+
+/**
+ * Register or update a sanitize policy used by <monster-i18n-replace>.
+ *
+ * @param {string} name
+ * @param {object} options
+ * @return {void}
+ */
+function setI18nReplaceSanitizePolicy(name, options = {}) {
+	name = validateString(name);
+	if (!isObject(options)) {
+		options = {};
+	}
+	sanitizePolicies.set(name, validateObject(options));
+}
+
+/**
+ * Set the default sanitize policy name.
+ *
+ * @param {string} name
+ * @return {void}
+ */
+function setI18nReplaceDefaultSanitizePolicy(name) {
+	defaultSanitizePolicy = validateString(name);
+}
+
+/**
+ * Get a sanitize policy by name.
+ *
+ * @param {string} name
+ * @return {object|undefined}
+ */
+function getI18nReplaceSanitizePolicy(name) {
+	if (!isString(name)) {
+		return sanitizePolicies.get(defaultSanitizePolicy);
+	}
+	return sanitizePolicies.get(name);
+}
+
+/**
+ * Replace marker element with translated HTML.
+ */
+class I18nReplaceMarker extends HTMLElement {
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return TAG_NAME;
+	}
+
+	connectedCallback() {
+		try {
+			replaceWithTranslation.call(this);
+		} catch (e) {
+			addErrorAttribute(this, e);
+		}
+	}
+}
+
+registerCustomElement(I18nReplaceMarker);
+
+/**
+ * @private
+ * @return {void}
+ */
+function replaceWithTranslation() {
+	const key = this.getAttribute("key");
+	if (!isString(key) || key.trim() === "") {
+		return;
+	}
+
+	let translations = null;
+	try {
+		translations = getDocumentTranslations();
+	} catch (e) {}
+
+	const { countValue, countKeyword } = parseCount.call(this);
+	const fallback = resolveFallback.call(
+		this,
+		countValue,
+		countKeyword,
+		translations,
+	);
+
+	let value = fallback;
+	if (translations) {
+		try {
+			if (countValue !== undefined || countKeyword !== undefined) {
+				const keyOrCount = countKeyword ?? countValue;
+				value = translations.getPluralRuleText(key, keyOrCount, fallback);
+			} else {
+				value = translations.getText(key, fallback);
+			}
+		} catch (e) {
+			value = fallback;
+		}
+	}
+
+	if (!isString(value)) {
+		value = fallback;
+	}
+
+	if (countValue !== undefined) {
+		value = replaceCountPlaceholder(value, countValue, translations);
+	}
+
+	const policyName = this.getAttribute("sanitize") || defaultSanitizePolicy;
+	const policy = getI18nReplaceSanitizePolicy(policyName) || {};
+	const sanitized = sanitizeHtml(value, policy);
+
+	replaceElementWithHtml(this, sanitized);
+}
+
+/**
+ * @private
+ * @return {{countValue: number|undefined, countKeyword: string|undefined}}
+ */
+function parseCount() {
+	const raw = this.getAttribute("count");
+	if (!isString(raw) || raw.trim() === "") {
+		return { countValue: undefined, countKeyword: undefined };
+	}
+
+	const trimmed = raw.trim();
+	const parsed = Number.parseInt(trimmed, 10);
+	if (!Number.isNaN(parsed)) {
+		return { countValue: parsed, countKeyword: undefined };
+	}
+
+	const keyword = trimmed.toLowerCase();
+	return { countValue: undefined, countKeyword: keyword };
+}
+
+/**
+ * @private
+ * @param {number|undefined} countValue
+ * @param {string|undefined} countKeyword
+ * @param {object|null} translations
+ * @return {string}
+ */
+function resolveFallback(countValue, countKeyword, translations) {
+	if (countValue !== undefined || countKeyword !== undefined) {
+		const keyword =
+			countKeyword ?? resolvePluralKeyword(countValue, translations);
+		const specific = this.getAttribute(`fallback-${keyword}`);
+		if (isString(specific) && specific.length > 0) {
+			return specific;
+		}
+	}
+
+	const generic = this.getAttribute("fallback");
+	if (isString(generic)) {
+		return generic;
+	}
+
+	return this.innerHTML || "";
+}
+
+/**
+ * @private
+ * @param {number|undefined} countValue
+ * @param {object|null} translations
+ * @return {string}
+ */
+function resolvePluralKeyword(countValue, translations) {
+	if (countValue === undefined) {
+		return "other";
+	}
+
+	let locale = undefined;
+	try {
+		locale = translations?.locale?.toString();
+	} catch (e) {}
+
+	try {
+		const pr = new Intl.PluralRules(locale);
+		return pr.select(countValue);
+	} catch (e) {
+		return "other";
+	}
+}
+
+/**
+ * @private
+ * @param {string} html
+ * @param {number} countValue
+ * @param {object|null} translations
+ * @return {string}
+ */
+function replaceCountPlaceholder(html, countValue, translations) {
+	let locale = undefined;
+	try {
+		locale = translations?.locale?.toString();
+	} catch (e) {}
+
+	let formatted = `${countValue}`;
+	try {
+		formatted = new Intl.NumberFormat(locale).format(countValue);
+	} catch (e) {}
+
+	return html.replaceAll("{count}", formatted);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {string} html
+ * @return {void}
+ */
+function replaceElementWithHtml(element, html) {
+	const document = element.ownerDocument || getDocument();
+	const template = document.createElement("template");
+	template.innerHTML = html;
+
+	const parent = element.parentNode;
+	if (!parent) {
+		return;
+	}
+
+	const fragment = template.content;
+	parent.insertBefore(fragment, element);
+	parent.removeChild(element);
+}

package/source/monster.mjs

@@ -63,6 +63,7 @@ export * from "./components/form/login.mjs";
 export * from "./components/form/confirm-button.mjs";
 export * from "./components/form/context-info.mjs";
 export * from "./components/form/context-base.mjs";
+export * from "./components/form/sheet.mjs";
 export * from "./components/form/context-warning.mjs";
 export * from "./components/form/context-note.mjs";
 export * from "./components/form/context-error.mjs";
@@ -249,6 +250,7 @@ export * from "./i18n/time-ago.mjs";
 export * from "./i18n/formatter.mjs";
 export * from "./i18n/internal.mjs";
 export * from "./i18n/locale.mjs";
+export * from "./i18n/replace-marker.mjs";
 export * from "./i18n/provider.mjs";
 export * from "./i18n/providers/fetch.mjs";
 export * from "./i18n/providers/embed.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.108.0");
+	monsterVersion = new Version("4.109.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.108.0")
+        monsterVersion = new Version("4.109.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.108.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mi 28. Jan 02:10:31 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.109.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mi 28. Jan 19:17:34 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>