@schukai/monster 4.141.2 → 4.142.0

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.141.2"}
+{"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.142.0"}

package/source/components/datatable/pagination.mjs

@@ -319,6 +319,12 @@ class Pagination extends CustomElement {
 
 		setTimeout(() => {
 			const parentParentNode = parentNode?.parentNode || parentNode;
+			const sizeContainer =
+				parentParentNode instanceof HTMLElement
+					? parentParentNode
+					: parentNode instanceof HTMLElement
+						? parentNode
+						: this;
 
 			this[resizeObserverSymbol] = new ResizeObserver(() => {
 				if (this[layoutApplySymbol]) {
@@ -340,7 +346,7 @@ class Pagination extends CustomElement {
 							return;
 						}
 
-						const parentWidth = parentParentNode.offsetWidth;
+						const parentWidth = sizeContainer.offsetWidth;
 						const ownWidth = this.clientWidth;
 
 						if (this[sizeDataSymbol]?.last?.parentWidth === parentWidth) {
@@ -366,7 +372,7 @@ class Pagination extends CustomElement {
 				};
 				schedulePaginationLayoutUpdate.call(this);
 			} else {
-				const parentWidth = parentParentNode.offsetWidth;
+				const parentWidth = sizeContainer.offsetWidth;
 				const ownWidth = this.offsetWidth;
 
 				this[sizeDataSymbol] = {
@@ -381,7 +387,7 @@ class Pagination extends CustomElement {
 				}
 			}
 
-			this[resizeObserverSymbol].observe(parentParentNode);
+			this[resizeObserverSymbol].observe(sizeContainer);
 		}, 0);
 	}
 

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

@@ -186,6 +186,13 @@ const ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT =
 const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT =
 	"data-monster-option-layout-stacked-breakpoint";
 
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER =
+	"data-monster-option-layout-stacked-breakpoint-container";
+
 /**
  * @private
  * @type {string}
@@ -241,6 +248,7 @@ class ControlBar extends CustomElement {
 				alignment: "left",
 				stackedAlignment: undefined,
 				stackedBreakpoint: undefined,
+				stackedBreakpointContainer: undefined,
 			},
 			popper: {
 				placement: "left",
@@ -270,6 +278,7 @@ class ControlBar extends CustomElement {
 			initialLayoutOpacity: undefined,
 			suppressSlotChange: false,
 			suppressMutation: false,
+			suppressResize: false,
 		};
 
 		initControlReferences.call(this);
@@ -301,9 +310,12 @@ class ControlBar extends CustomElement {
 		if (
 			path === "layout.alignment" ||
 			path === "layout.stackedAlignment" ||
-			path === "layout.stackedBreakpoint"
+			path === "layout.stackedBreakpoint" ||
+			path === "layout.stackedBreakpointContainer"
 		) {
-			syncLayoutState.call(this);
+			syncLayoutState.call(this, {
+				observe: path === "layout.stackedBreakpointContainer",
+			});
 		}
 		return this;
 	}
@@ -355,6 +367,7 @@ class ControlBar extends CustomElement {
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_ALIGNMENT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT);
+		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER);
 		return attributes;
 	}
 
@@ -590,7 +603,16 @@ function initEventHandler() {
 			syncLayoutState.call(self);
 		};
 
-	self[resizeObserverSymbol] = new ResizeObserver(() => {
+	self[attributeObserverSymbol][
+		ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER
+	] = () => {
+		syncLayoutState.call(self, { observe: true });
+	};
+
+	self[resizeObserverSymbol] = new ResizeObserver((entries) => {
+		if (!hasContainerResizeEntry.call(self, entries)) {
+			return;
+		}
 		scheduleLayout.call(self, { measure: true, layout: true });
 	});
 	self[mutationObserverSymbol] = new MutationObserver(mutationCallback);
@@ -801,8 +823,7 @@ function rearrangeItems() {
 		layout = layoutItems(space - switchWidth);
 	}
 
-	const shouldShowSwitch =
-		layout.itemsToMoveToPopper.length > 0 && hasItems;
+	const shouldShowSwitch = layout.itemsToMoveToPopper.length > 0 && hasItems;
 	const shouldUseStackedLayout =
 		shouldShowSwitch || isStackedBreakpointMatched.call(this);
 
@@ -883,17 +904,11 @@ function getComputedCssPixels(value) {
  */
 function updateControlSizing(layout, shouldShowSwitch) {
 	const mainItems = [...layout.visibleItemsInMainSlot];
-	if (
-		shouldShowSwitch &&
-		this[popperNavElementSymbol] instanceof HTMLElement
-	) {
+	if (shouldShowSwitch && this[popperNavElementSymbol] instanceof HTMLElement) {
 		mainItems.push(this[popperNavElementSymbol]);
 	}
 
-	const controlItems = [
-		...mainItems,
-		...layout.itemsToMoveToPopper,
-	];
+	const controlItems = [...mainItems, ...layout.itemsToMoveToPopper];
 	for (const element of controlItems) {
 		applyControlSizing.call(this, element);
 	}
@@ -992,13 +1007,7 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 		layout.itemsToMoveToPopper,
 		marginTopByElement,
 	);
-	updateSpacerLineWidths.call(
-		this,
-		mainItems,
-		"inline",
-		"right",
-		"left",
-	);
+	updateSpacerLineWidths.call(this, mainItems, "inline", "right", "left");
 	updateSpacerLineWidths.call(
 		this,
 		layout.itemsToMoveToPopper,
@@ -1272,6 +1281,10 @@ function calculateControlBarDimensions() {
 
 	this[dimensionsSymbol].setVia("data.visible", !(containerWidth === 0));
 	this[dimensionsSymbol].setVia("data.containerWidth", containerWidth);
+	this[dimensionsSymbol].setVia(
+		"data.stackedBreakpointContainerWidth",
+		getStackedBreakpointContainerWidth.call(this),
+	);
 
 	const itemReferences = [];
 
@@ -1336,6 +1349,65 @@ function calculateControlBarDimensions() {
 	this[dimensionsSymbol].setVia("data.itemReferences", itemReferences);
 }
 
+/**
+ * @private
+ * @return {number}
+ */
+function getStackedBreakpointContainerWidth() {
+	const container = resolveStackedBreakpointContainer.call(this);
+	if (!(container instanceof HTMLElement)) {
+		return 0;
+	}
+
+	return getElementLayoutWidth(container);
+}
+
+/**
+ * @private
+ * @return {HTMLElement|undefined}
+ */
+function resolveStackedBreakpointContainer() {
+	const selector = this.getOption("layout.stackedBreakpointContainer");
+	if (typeof selector !== "string" || selector.trim() === "") {
+		return undefined;
+	}
+
+	try {
+		const closest = this.closest(selector);
+		if (closest instanceof HTMLElement) {
+			return closest;
+		}
+
+		const root = this.getRootNode();
+		if (root && typeof root.querySelector === "function") {
+			const found = root.querySelector(selector);
+			if (found instanceof HTMLElement) {
+				return found;
+			}
+		}
+	} catch {}
+
+	return undefined;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {number}
+ */
+function getElementLayoutWidth(element) {
+	const computedStyle = getComputedStyle(element);
+	if (computedStyle === null) {
+		return 0;
+	}
+
+	if (computedStyle.getPropertyValue("box-sizing") !== "border-box") {
+		return getComputedCssPixels(computedStyle.getPropertyValue("width"));
+	}
+
+	return element.clientWidth;
+}
+
 /**
  * @private
  */
@@ -1369,20 +1441,21 @@ function updateResizeObserverObservation() {
  */
 function getLayoutObservedNodes() {
 	const observedNodes = [];
-	Array.from(this.children).forEach((node) => {
-		if (node instanceof HTMLElement) {
+	const addObservedNode = (node) => {
+		if (node instanceof HTMLElement && !observedNodes.includes(node)) {
 			observedNodes.push(node);
 		}
-	});
+	};
+
+	Array.from(this.children).forEach(addObservedNode);
 
 	let parent = this.parentNode;
 	while (!(parent instanceof HTMLElement) && parent !== null) {
 		parent = parent.parentNode;
 	}
 
-	if (parent instanceof HTMLElement) {
-		observedNodes.push(parent);
-	}
+	addObservedNode(parent);
+	addObservedNode(resolveStackedBreakpointContainer.call(this));
 
 	return observedNodes;
 }
@@ -1422,9 +1495,27 @@ function suppressLayoutFeedback() {
 
 	state.suppressSlotChange = true;
 	state.suppressMutation = true;
-	queueMicrotask(() => {
+	state.suppressResize = true;
+	requestAnimationFrame(() => {
 		state.suppressSlotChange = false;
 		state.suppressMutation = false;
+		state.suppressResize = false;
+	});
+}
+
+/**
+ * @private
+ * @param {ResizeObserverEntry[]} entries
+ * @return {boolean}
+ */
+function hasContainerResizeEntry(entries) {
+	const stackedBreakpointContainer =
+		resolveStackedBreakpointContainer.call(this);
+	return entries.some((entry) => {
+		return (
+			entry.target === this.parentElement ||
+			entry.target === stackedBreakpointContainer
+		);
 	});
 }
 
@@ -1546,32 +1637,41 @@ function applyLayoutAlignment() {
 	}
 
 	if (alignment === "right") {
-		if (setAttributeIfChanged(
-			this[controlBarElementSymbol],
-			ATTRIBUTE_LAYOUT_ALIGNMENT,
-			"right",
-		)) {
+		if (
+			setAttributeIfChanged(
+				this[controlBarElementSymbol],
+				ATTRIBUTE_LAYOUT_ALIGNMENT,
+				"right",
+			)
+		) {
 			queueLayoutChangedEvent.call(this);
 		}
 		return;
 	}
 
-	if (setAttributeIfChanged(
-		this[controlBarElementSymbol],
-		ATTRIBUTE_LAYOUT_ALIGNMENT,
-		"left",
-	)) {
+	if (
+		setAttributeIfChanged(
+			this[controlBarElementSymbol],
+			ATTRIBUTE_LAYOUT_ALIGNMENT,
+			"left",
+		)
+	) {
 		queueLayoutChangedEvent.call(this);
 	}
 }
 
 /**
  * @private
+ * @param {{observe?: boolean}} options
  * @return {void}
  */
-function syncLayoutState() {
+function syncLayoutState(options = {}) {
 	applyLayoutAlignment.call(this);
-	scheduleLayout.call(this, { measure: true, layout: true });
+	scheduleLayout.call(this, {
+		measure: true,
+		layout: true,
+		observe: options.observe === true,
+	});
 }
 
 /**
@@ -1586,11 +1686,19 @@ function isStackedBreakpointMatched() {
 
 	let width = 0;
 	try {
-		width = this[dimensionsSymbol].getVia("data.containerWidth");
-	} catch {
+		width = this[dimensionsSymbol].getVia(
+			"data.stackedBreakpointContainerWidth",
+		);
+	} catch {}
+
+	if (!(width > 0)) {
 		try {
-			width = this[dimensionsSymbol].getVia("data.space");
-		} catch {}
+			width = this[dimensionsSymbol].getVia("data.containerWidth");
+		} catch {
+			try {
+				width = this[dimensionsSymbol].getVia("data.space");
+			} catch {}
+		}
 	}
 
 	if (!(width > 0)) {
@@ -1624,11 +1732,13 @@ function setLayoutStackedState(stacked) {
 		return;
 	}
 
-	if (setAttributeIfChanged(
-		this[controlBarElementSymbol],
-		ATTRIBUTE_LAYOUT_STACKED,
-		this[layoutStateSymbol].stacked ? "true" : "false",
-	)) {
+	if (
+		setAttributeIfChanged(
+			this[controlBarElementSymbol],
+			ATTRIBUTE_LAYOUT_STACKED,
+			this[layoutStateSymbol].stacked ? "true" : "false",
+		)
+	) {
 		queueLayoutChangedEvent.call(this);
 	}
 	applyLayoutAlignment.call(this);
@@ -1643,7 +1753,9 @@ function queueLayoutChangedEvent() {
 		return;
 	}
 
-	this[layoutChangedEventQueueSymbol].add(getLayoutChangedEventDetail.call(this));
+	this[layoutChangedEventQueueSymbol].add(
+		getLayoutChangedEventDetail.call(this),
+	);
 
 	if (this[layoutChangedEventSwitchSymbol] instanceof DeadMansSwitch) {
 		this[layoutChangedEventSwitchSymbol].touch();
@@ -1720,6 +1832,9 @@ function getLayoutChangedEventDetail() {
 		stacked,
 		stackedAlignment: this.getOption("layout.stackedAlignment"),
 		stackedBreakpoint: this.getOption("layout.stackedBreakpoint"),
+		stackedBreakpointContainer: this.getOption(
+			"layout.stackedBreakpointContainer",
+		),
 	};
 }