@schukai/monster 4.25.3 → 4.25.5

package/source/components/navigation/style/wizard-navigation.pcss

@@ -0,0 +1,113 @@
+
+.wizard-steps {
+    counter-reset: step;
+}
+
+
+/* Basic Reset */
+.wizard-steps,
+.wizard-steps .substeps {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* Main Steps */
+.wizard-steps .step {
+    position: relative;
+    padding-left: 2.5em;
+    margin-bottom: 1.5em;
+}
+
+/* Number Circle */
+.wizard-steps .step::before {
+    counter-increment: step;
+    content: counter(step);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1.8em;
+    height: 1.8em;
+    border: 2px solid var(--monster-color-primary-1);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: var(--monster-color-primary-4);
+    background-color: var(--monster-color-primary-1);
+    box-sizing: border-box;
+    z-index: 2;
+}
+
+/* Connecting line between circles */
+.wizard-steps .step:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    left: 0.9em; /* Exakte Mitte von 1.8em Kreis */
+    top: 2em;
+    bottom: 0;
+    width: 2px;
+    background: var(--monster-color-primary-1);
+    z-index: 1;
+}
+
+/* Active / completed step */
+.wizard-steps .step-active::before {
+    border-color: var(--monster-color-secondary-1);
+    background: var(--monster-bg-color-secondary-2);
+    color: var(--monster-color-secondary-1);
+}
+
+.wizard-steps .step-active .step-title {
+    font-weight: bold;
+    color: var(--monster-color-secondary-1);
+}
+
+/* Step titles */
+.wizard-steps .step-title {
+    font-size: 1rem;
+    line-height: 1.6em;
+    vertical-align: middle;
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+}
+
+/* Sub-steps */
+.wizard-steps .substeps {
+    margin-top: 0.5em;
+    margin-left: 1.5em;
+}
+
+.wizard-steps .substep {
+    position: relative;
+    padding-left: 1.2em;
+    margin-bottom: 0.4em;
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+    font-size: 0.9rem;
+}
+
+/* Bullet point */
+.wizard-steps .substep::before {
+    content: "•";
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 1.2em;
+    line-height: 1;
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+}
+
+/* Active sub-step */
+.wizard-steps .substep.active {
+    font-weight: bold;
+    color: var(--monster-color-secondary-2);
+    background-color: var(--monster-bg-color-secondary-2);
+}
+
+.wizard-steps .substep.active::before {
+    color: var(--monster-color-secondary-2);
+    background-color: var(--monster-bg-color-secondary-2);
+}

package/source/components/navigation/stylesheet/wizard-navigation.mjs

@@ -0,0 +1,31 @@
+/**
+ * Copyright © schukai GmbH 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 schukai GmbH.
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {WizardNavigationStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const WizardNavigationStyleSheet = new CSSStyleSheet();
+
+try {
+  WizardNavigationStyleSheet.insertRule(`
+@layer wizardnavigation { 
+.wizard-steps{counter-reset:step}.wizard-steps,.wizard-steps .substeps{list-style:none;margin:0;padding:0}.wizard-steps .step{margin-bottom:1.5em;padding-left:2.5em;position:relative}.wizard-steps .step:before{align-items:center;background-color:var(--monster-color-primary-1);border:2px solid var(--monster-color-primary-1);border-radius:50%;box-sizing:border-box;color:var(--monster-color-primary-4);content:counter(step);counter-increment:step;display:flex;font-weight:700;height:1.8em;justify-content:center;left:0;position:absolute;top:0;width:1.8em;z-index:2}.wizard-steps .step:not(:last-child):after{background:var(--monster-color-primary-1);bottom:0;content:\"\";left:.9em;position:absolute;top:2em;width:2px;z-index:1}.wizard-steps .step-active:before{background:var(--monster-bg-color-secondary-2);border-color:var(--monster-color-secondary-1);color:var(--monster-color-secondary-1)}.wizard-steps .step-active .step-title{color:var(--monster-color-secondary-1);font-weight:700}.wizard-steps .step-title{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:1rem;line-height:1.6em;vertical-align:middle}.wizard-steps .substeps{margin-left:1.5em;margin-top:.5em}.wizard-steps .substep{font-size:.9rem;margin-bottom:.4em;padding-left:1.2em;position:relative}.wizard-steps .substep,.wizard-steps .substep:before{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.wizard-steps .substep:before{content:\"•\";font-size:1.2em;left:0;line-height:1;position:absolute;top:0}.wizard-steps .substep.active{font-weight:700}.wizard-steps .substep.active,.wizard-steps .substep.active:before{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}

package/source/components/navigation/wizard-navigation.mjs

@@ -0,0 +1,219 @@
+/**
+ * Copyright © schukai GmbH 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 schukai GmbH.
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {findTargetElementFromEvent, fireEvent} from "../../dom/events.mjs";
+import { isFunction } from "../../types/is.mjs";
+import { WizardNavigationStyleSheet } from "./stylesheet/wizard-navigation.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+import {buildTree} from "../../data/buildtree.mjs";
+import { NodeRecursiveIterator } from "../../types/noderecursiveiterator.mjs";
+import {validateInstance} from "../../types/validate.mjs";
+import {Node} from "../../types/node.mjs";
+import {Formatter} from "../../text/formatter.mjs";
+
+
+export { WizardNavigation };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const wizardNavigationElementSymbol = Symbol("wizardNavigationElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const wizardNavigationListElementSymbol = Symbol("wizardNavigationListElement");
+
+
+/**
+ * A WizardNavigation
+ *
+ * @fragments /fragments/components/navigation/wizard-navigation/
+ *
+ * @example /examples/components/navigation/wizard-navigation-simple
+ *
+ * Work in Progress, currently only the basic functionality is implemented.
+ *
+ * @since 4.26.0
+ * @copyright schukai GmbH
+ * @summary A beautiful WizardNavigation that can make your life easier and also looks good.
+ */
+class WizardNavigation extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/navigation/wizard-navigation@@instance",
+		);
+	}
+
+	/**
+	 *
+	 * @return {Components.Navigation.WizardNavigation
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		queueMicrotask(() => {
+			importContent.call(this);
+		});
+		return this;
+	}
+
+	/**
+	 * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} labels Label definitions
+	 * @property {Object} actions Callbacks
+	 * @property {string} actions.click="throw Error" Callback when clicked
+	 * @property {Object} features Features
+	 * @property {Object} classes CSS classes
+	 * @property {boolean} disabled=false Disabled state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {},
+			classes: {},
+			disabled: false,
+			features: {},
+			actions: {
+				click: () => {
+					throw new Error("the click action is not defined");
+				},
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-wizard-navigation";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [WizardNavigationStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {initEventHandler}
+ * @fires monster-wizard-navigation-clicked
+ */
+function initEventHandler() {
+	const self = this;
+	const element = this[wizardNavigationElementSymbol];
+
+	const type = "click";
+
+	element.addEventListener(type, function (event) {
+		const callback = self.getOption("actions.click");
+
+		fireCustomEvent(self, "monster-wizard-navigation-clicked", {
+			element: self,
+		});
+
+		if (!isFunction(callback)) {
+			return;
+		}
+
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"control",
+		);
+
+		if (!(element instanceof Node && self.hasNode(element))) {
+			return;
+		}
+
+		callback.call(self, event);
+	});
+
+	return this;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+	this[wizardNavigationElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
+
+	this[wizardNavigationListElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="list"]`,
+	);
+}
+
+/**
+ * Import Menu Entries from dataset
+ *
+ * @since 1.0.0
+ * @return {TreeMenu}
+ * @throws {Error} map is not iterable
+ * @private
+ */
+function importContent() {
+	const elements = getSlottedElements.call(this, "ol.wizard-steps")
+	elements.forEach(element => {
+		const clonedContent = element.cloneNode(true);
+		this[wizardNavigationListElementSymbol].innerHTML = '';
+		this[wizardNavigationListElementSymbol].appendChild(clonedContent);
+	})
+}
+
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+			<div data-monster-role="control" part="control">
+				<slot style="display: none;"></slot>
+				<div data-monster-role="list"></div>
+        </div>`;
+}
+
+registerCustomElement(WizardNavigation);

package/source/components/style/accessibility.css

@@ -1,2 +1,33 @@
 /** generated from accessibility.pcss **/
-.visually-hidden{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.visually-hidden:not(caption){position:absolute!important}.visually-hidden-focusable:not(:focus):not(:focus-within){height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute!important}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+.visually-hidden {
+	height: 1px !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	width: 1px !important;
+	clip: rect(0, 0, 0, 0) !important;
+	border: 0 !important;
+	white-space: nowrap !important;
+}
+.visually-hidden:not(caption) {
+	position: absolute !important;
+}
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+	height: 1px !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	width: 1px !important;
+	clip: rect(0, 0, 0, 0) !important;
+	border: 0 !important;
+	white-space: nowrap !important;
+}
+.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
+	position: absolute !important;
+}
+@media (prefers-reduced-motion: reduce) {
+	* {
+		animation: none !important;
+		transition: none !important;
+	}
+}

package/source/components/stylesheet/accessibility.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 
-export {AccessibilityStyleSheet}
+export { AccessibilityStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {AccessibilityStyleSheet}
 const AccessibilityStyleSheet = new CSSStyleSheet();
 
 try {
-  AccessibilityStyleSheet.insertRule(`
+	AccessibilityStyleSheet.insertRule(
+		`
 @layer accessibility { 
 .visually-hidden{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.visually-hidden:not(caption){position:absolute!important}.visually-hidden-focusable:not(:focus):not(:focus-within){height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute!important}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

package/source/components/tree-menu/tree-menu.mjs

@@ -456,7 +456,7 @@ function importEntries() {
 
 	let filteredData;
 	if (this[firstRunDoneSymbol] !== true) {
-		filteredData = data.filter(
+		filteredData = data?.filter(
 			(entry) =>
 				!entry[parentKey] ||
 				entry[parentKey] === null ||

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.25.0");
+	monsterVersion = new Version("4.25.3");
 
 	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.25.0")
+        monsterVersion = new Version("4.25.3")
 
         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.25.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mo 30. Jun 16:45:37 CEST 2025</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.25.3</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Do 3. Jul 13:10:44 CEST 2025</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>