@schukai/monster 4.150.4 → 4.150.5

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.150.4"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.150.5"}

package/source/components/form/wizard.mjs

@@ -45,6 +45,7 @@ const currentPanelIndexSymbol = Symbol("currentPanelIndex");
 const optionObserverSymbol = Symbol("optionObserver");
 const idsSymbol = Symbol("ids");
 const finalRecordSymbol = Symbol("finalRecord");
+const slottedElementsSymbol = Symbol("slottedElements");
 
 /**
  * A reusable wizard container that combines content panels with `monster-wizard-navigation`.
@@ -151,6 +152,7 @@ class Wizard extends CustomElement {
 			panel: 0,
 			group: 0,
 		};
+		this[slottedElementsSymbol] = [];
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
@@ -170,6 +172,9 @@ class Wizard extends CustomElement {
 	 * @return {Wizard}
 	 */
 	refresh() {
+		this[slottedElementsSymbol] = Array.from(
+			getSlottedElements.call(this) || [],
+		);
 		const records = collectPanels.call(this);
 		const groups = buildGroups.call(this, records);
 
@@ -388,6 +393,10 @@ function initControlReferences() {
 
 function initEventHandler() {
 	this[slotElementSymbol]?.addEventListener("slotchange", () => {
+		const elements = Array.from(getSlottedElements.call(this) || []);
+		if (haveSameElements(this[slottedElementsSymbol], elements)) {
+			return;
+		}
 		this.refresh();
 	});
 
@@ -449,6 +458,13 @@ function initEventHandler() {
 	});
 }
 
+function haveSameElements(currentElements, nextElements) {
+	return (
+		currentElements.length === nextElements.length &&
+		currentElements.every((element, index) => element === nextElements[index])
+	);
+}
+
 function initOptionObserver() {
 	if (this[optionObserverSymbol]) {
 		return;

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

@@ -19,6 +19,7 @@ const currentStepIndexSymbol = Symbol("currentStepIndex");
 const stepsSymbol = Symbol("steps");
 const isTransitioningSymbol = Symbol("isTransitioning");
 const currentSubStepIndexSymbol = Symbol("currentSubStepIndex");
+const activationRequestSymbol = Symbol("activationRequest");
 
 /**
  * A WizardNavigation component to display progress and allow navigation through a series of steps,
@@ -45,6 +46,7 @@ class WizardNavigation extends CustomElement {
 		this[isTransitioningSymbol] = false;
 		this[currentStepIndexSymbol] = -1;
 		this[currentSubStepIndexSymbol] = -1;
+		this[activationRequestSymbol] = 0;
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
@@ -186,7 +188,11 @@ class WizardNavigation extends CustomElement {
 			return;
 		}
 
+		const request = ++this[activationRequestSymbol];
 		await this.goToStep(mainIndex, options);
+		if (request !== this[activationRequestSymbol]) {
+			return;
+		}
 
 		const stepsData = this[stepsSymbol];
 		if (!stepsData || !stepsData[mainIndex]) return;

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

@@ -98,6 +98,24 @@ describe("Wizard", function () {
 		).to.equal(true);
 	});
 
+	it("should ignore slot changes when the assigned panels are unchanged", async () => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = html;
+
+		await new Promise((resolve) => setTimeout(resolve, 30));
+
+		const wizard = document.getElementById("wizard-under-test");
+		const slot = wizard.shadowRoot.querySelector("slot");
+		let refreshCount = 0;
+		wizard.addEventListener("monster-wizard-refresh", () => {
+			refreshCount++;
+		});
+
+		slot.dispatchEvent(new Event("slotchange"));
+
+		expect(refreshCount).to.equal(0);
+	});
+
 	it("should use panel-specific validation callbacks before moving forward", async function () {
 		const mocks = document.getElementById("mocks");
 		mocks.innerHTML = html;

package/test/cases/components/navigation/wizard-navigation.mjs

@@ -0,0 +1,49 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+
+describe("WizardNavigation", () => {
+	before(async () => {
+		await initJSDOM();
+		await import(
+			"../../../../source/components/navigation/wizard-navigation.mjs"
+		);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should only dispatch the latest concurrent substep activation", async () => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `
+			<monster-wizard-navigation id="wizard-navigation-under-test">
+				<ol class="wizard-steps">
+					<li class="step">
+						<span>Account</span>
+						<ul>
+							<li>Email</li>
+							<li>Password</li>
+						</ul>
+					</li>
+				</ol>
+			</monster-wizard-navigation>
+		`;
+
+		await new Promise((resolve) => setTimeout(resolve, 20));
+
+		const navigation = document.getElementById("wizard-navigation-under-test");
+		const substeps = [];
+		navigation.addEventListener("monster-wizard-substep-changed", (event) => {
+			substeps.push(event.detail.subIndex);
+		});
+
+		await Promise.all([
+			navigation.activate(0, 0, { force: true }),
+			navigation.activate(0, 1, { force: true }),
+		]);
+
+		expect(substeps).to.deep.equal([1]);
+	});
+});