@schukai/monster 4.143.9 → 4.143.10

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.143.9"}
+{"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.143.10"}

package/source/components/form/control-bar.mjs

@@ -275,15 +275,12 @@ class ControlBar extends CustomElement {
 			needsMeasure: true,
 			needsLayout: true,
 			needsObserve: true,
-			initialLayoutPending: true,
-			initialLayoutOpacity: undefined,
 			suppressSlotChange: false,
 			suppressMutation: false,
 			suppressResize: false,
 		};
 
 		initControlReferences.call(this);
-		hideControlBarUntilInitialLayout.call(this);
 		initEventHandler.call(this);
 
 		// setup structure
@@ -482,44 +479,6 @@ function isElementSelfHidden(element) {
 	);
 }
 
-/**
- * @private
- * @return {void}
- */
-function hideControlBarUntilInitialLayout() {
-	const state = this[layoutStateSymbol];
-	if (!state || !(this[controlBarElementSymbol] instanceof HTMLElement)) {
-		return;
-	}
-
-	state.initialLayoutOpacity = this[controlBarElementSymbol].style.opacity;
-	this[controlBarElementSymbol].style.opacity = "0";
-}
-
-/**
- * @private
- * @return {void}
- */
-function revealControlBarAfterInitialLayout() {
-	const state = this[layoutStateSymbol];
-	if (
-		!state ||
-		state.initialLayoutPending !== true ||
-		!(this[controlBarElementSymbol] instanceof HTMLElement)
-	) {
-		return;
-	}
-
-	state.initialLayoutPending = false;
-	const initialOpacity = state.initialLayoutOpacity;
-	if (typeof initialOpacity === "string" && initialOpacity !== "") {
-		this[controlBarElementSymbol].style.opacity = initialOpacity;
-		return;
-	}
-
-	this[controlBarElementSymbol].style.removeProperty("opacity");
-}
-
 /**
  * @private
  */
@@ -734,7 +693,6 @@ function runLayout() {
 		})
 		.finally(() => {
 			state.running = false;
-			revealControlBarAfterInitialLayout.call(this);
 			if (state.needsObserve || state.needsMeasure || state.needsLayout) {
 				scheduleLayoutFrame.call(this);
 			}

package/test/cases/components/form/control-bar.mjs

@@ -88,6 +88,15 @@ describe("ControlBar", function () {
     );
   });
 
+  it("should keep the control bar visible while the initial layout is pending", function () {
+    const bar = document.getElementById("bar");
+    const controlBar = bar.shadowRoot.querySelector(
+      '[data-monster-role="control-bar"]',
+    );
+
+    expect(controlBar.style.opacity).to.not.equal("0");
+  });
+
   it("should allow configuring the control bar layout alignment to right", function (done) {
     const bar = document.getElementById("bar-right");
 
@@ -968,7 +977,7 @@ describe("ControlBar", function () {
         value: 20,
       });
 
-      expect(controlBar.style.opacity).to.equal("0");
+      expect(controlBar.style.opacity).to.not.equal("0");
 
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
@@ -1070,7 +1079,7 @@ describe("ControlBar", function () {
     }
   });
 
-  it("should reveal the control bar after reconnecting before initial layout", async function () {
+  it("should keep the control bar visible after reconnecting before initial layout", async function () {
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
 
@@ -1145,7 +1154,7 @@ describe("ControlBar", function () {
         });
       }
 
-      expect(controlBar.style.opacity).to.equal("0");
+      expect(controlBar.style.opacity).to.not.equal("0");
 
       bar.remove();
       wrapper.append(bar);