@schukai/monster 4.138.0 → 4.139.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.138.0"}
+{"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.139.0"}

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

@@ -690,6 +690,8 @@ function rearrangeItems() {
 	}
 
 	setSwitchVisible.call(this, shouldShowSwitch);
+	updateControlSizing.call(this, layout, shouldShowSwitch);
+	updateJoinedBorders.call(this, layout, shouldShowSwitch);
 	if (!shouldShowSwitch) {
 		hide.call(this);
 	}
@@ -740,6 +742,279 @@ function getComputedCssPixels(value) {
 	}
 }
 
+/**
+ * @private
+ * @param {Object} layout
+ * @param {boolean} shouldShowSwitch
+ * @return {void}
+ */
+function updateControlSizing(layout, shouldShowSwitch) {
+	const mainItems = [...layout.visibleItemsInMainSlot];
+	if (
+		shouldShowSwitch &&
+		this[popperNavElementSymbol] instanceof HTMLElement
+	) {
+		mainItems.push(this[popperNavElementSymbol]);
+	}
+
+	const controlItems = [
+		...mainItems,
+		...layout.itemsToMoveToPopper,
+	];
+	for (const element of controlItems) {
+		applyControlSizing.call(this, element);
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+function applyControlSizing(element) {
+	setStylePropertyIfChanged(element, "boxSizing", "border-box");
+	setStylePropertyIfChanged(
+		element,
+		"height",
+		"var(--monster-control-bar-height)",
+	);
+	setStylePropertyIfChanged(
+		element,
+		"minHeight",
+		"var(--monster-control-bar-height)",
+	);
+	if (isWrapperElement(element)) {
+		setStylePropertyIfChanged(element, "display", "flex");
+		setStylePropertyIfChanged(element, "alignItems", "stretch");
+	}
+
+	for (const control of getContainedControlElements(element)) {
+		setStylePropertyIfChanged(control, "display", "flex");
+		setStylePropertyIfChanged(control, "boxSizing", "border-box");
+		setStylePropertyIfChanged(control, "height", "100%");
+		setStylePropertyIfChanged(control, "minHeight", "0px");
+		if (control.tagName === "MONSTER-INPUT-GROUP") {
+			setStylePropertyIfChanged(control, "flex", "1 1 auto");
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isWrapperElement(element) {
+	return ["DIV", "FORM", "SECTION"].includes(element.tagName);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {HTMLElement[]}
+ */
+function getContainedControlElements(element) {
+	if (!isWrapperElement(element)) {
+		return [];
+	}
+
+	return Array.from(
+		element.querySelectorAll(
+			[
+				"monster-input-group",
+				"monster-select",
+				"monster-button",
+				"monster-state-button",
+				"monster-message-state-button",
+				"monster-action-button",
+				"monster-api-button",
+				"monster-confirm-button",
+			].join(","),
+		),
+	).filter((control) => control instanceof HTMLElement);
+}
+
+/**
+ * @private
+ * @param {Object} layout
+ * @param {boolean} shouldShowSwitch
+ * @return {void}
+ */
+function updateJoinedBorders(layout, shouldShowSwitch) {
+	const mainItems = [...layout.visibleItemsInMainSlot];
+	if (
+		shouldShowSwitch &&
+		this[popperNavElementSymbol] instanceof HTMLElement &&
+		this[switchElementSymbol] instanceof HTMLElement
+	) {
+		mainItems.push(this[popperNavElementSymbol]);
+	}
+
+	const marginLeftByElement = new Map();
+	const marginTopByElement = new Map();
+
+	collectInlineJoinedBorders.call(this, mainItems, marginLeftByElement);
+	collectBlockJoinedBorders.call(
+		this,
+		layout.itemsToMoveToPopper,
+		marginTopByElement,
+	);
+	applyJoinedBorderOffsets.call(this, marginLeftByElement, marginTopByElement);
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} elements
+ * @param {Map<HTMLElement, string>} marginLeftByElement
+ * @return {void}
+ */
+function collectInlineJoinedBorders(elements, marginLeftByElement) {
+	for (let i = 1; i < elements.length; i++) {
+		const previous = elements[i - 1];
+		const current = elements[i];
+		const overlap = getBorderOverlap(
+			getVisualBorderWidth.call(this, previous, "right"),
+			getVisualBorderWidth.call(this, current, "left"),
+		);
+
+		if (overlap > 0) {
+			marginLeftByElement.set(current, `${-1 * overlap}px`);
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} elements
+ * @param {Map<HTMLElement, string>} marginTopByElement
+ * @return {void}
+ */
+function collectBlockJoinedBorders(elements, marginTopByElement) {
+	for (let i = 1; i < elements.length; i++) {
+		const previous = elements[i - 1];
+		const current = elements[i];
+		const overlap = getBorderOverlap(
+			getVisualBorderWidth.call(this, previous, "bottom"),
+			getVisualBorderWidth.call(this, current, "top"),
+		);
+
+		if (overlap > 0) {
+			marginTopByElement.set(current, `${-1 * overlap}px`);
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {Map<HTMLElement, string>} marginLeftByElement
+ * @param {Map<HTMLElement, string>} marginTopByElement
+ * @return {void}
+ */
+function applyJoinedBorderOffsets(marginLeftByElement, marginTopByElement) {
+	for (const element of getJoinedBorderOffsetElements.call(this)) {
+		setStylePropertyIfChanged(
+			element,
+			"marginLeft",
+			marginLeftByElement.get(element) || "",
+		);
+		setStylePropertyIfChanged(
+			element,
+			"marginTop",
+			marginTopByElement.get(element) || "",
+		);
+	}
+}
+
+/**
+ * @private
+ * @return {HTMLElement[]}
+ */
+function getJoinedBorderOffsetElements() {
+	const elements = Array.from(this.children).filter(
+		(element) => element instanceof HTMLElement,
+	);
+	if (this[popperNavElementSymbol] instanceof HTMLElement) {
+		elements.push(this[popperNavElementSymbol]);
+	}
+
+	return elements;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {"marginLeft"|"marginTop"} property
+ * @param {string} value
+ * @return {void}
+ */
+function setStylePropertyIfChanged(element, property, value) {
+	if (element.style[property] !== value) {
+		element.style[property] = value;
+	}
+}
+
+/**
+ * @private
+ * @param {number} previousBorderWidth
+ * @param {number} currentBorderWidth
+ * @return {number}
+ */
+function getBorderOverlap(previousBorderWidth, currentBorderWidth) {
+	return Math.min(previousBorderWidth, currentBorderWidth);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {"top"|"right"|"bottom"|"left"} side
+ * @return {number}
+ */
+function getVisualBorderWidth(element, side) {
+	const visualElement = getVisualBorderElement.call(this, element, side);
+	const computedStyle = getComputedStyle(visualElement);
+	const value = computedStyle.getPropertyValue(`border-${side}-width`);
+
+	return getComputedCssPixels(value);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {"top"|"right"|"bottom"|"left"} side
+ * @return {HTMLElement}
+ */
+function getVisualBorderElement(element, side) {
+	if (element === this[popperNavElementSymbol]) {
+		return this[switchElementSymbol] || element;
+	}
+
+	const selector = [
+		"button",
+		"input",
+		"select",
+		"textarea",
+		"monster-input-group",
+		"monster-select",
+		"[data-monster-role=control]",
+	].join(",");
+	if (element.shadowRoot instanceof ShadowRoot) {
+		return element.shadowRoot.querySelector(selector) || element;
+	}
+
+	const candidates = Array.from(element.querySelectorAll(selector)).filter(
+		(candidate) => candidate instanceof HTMLElement,
+	);
+	if (candidates.length === 0) {
+		return element;
+	}
+
+	if (side === "right" || side === "bottom") {
+		return candidates[candidates.length - 1];
+	}
+
+	return candidates[0];
+}
+
 /**
  * @private
  * @return {Object}

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

@@ -3,14 +3,22 @@
 @import "../../style/border.pcss";
 @import "../../style/typography.pcss";
 
-:host(monster-button){display:flex;}
+:host(monster-button){
+    display: flex;
+    box-sizing: border-box;
+}
 
 [data-monster-role="control"] {
     display: flex;
-    align-items: stretch;   
+    align-items: stretch;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
 }
 
 button {
+    box-sizing: border-box;
+    height: 100%;
     width: 100%;
     min-width: max-content;
 }

package/source/components/form/style/control-bar.pcss

@@ -19,6 +19,7 @@ div[data-monster-role="control"] {
         flex-direction: row;
         justify-content: flex-start;
         align-items: stretch;
+        height: var(--monster-control-bar-height);
         min-height: var(--monster-control-bar-height);
 
         &[data-monster-layout-alignment="right"] {
@@ -32,11 +33,13 @@ div[data-monster-role="control"] {
         & [data-monster-role=popper-nav] {
             display: flex;
             align-items: stretch;
+            height: var(--monster-control-bar-height);
             min-height: var(--monster-control-bar-height);
         }
 
         & [data-monster-role=switch] {
             display: flex;
+            height: var(--monster-control-bar-height);
             min-height: var(--monster-control-bar-height);
 
             &.hidden {
@@ -45,20 +48,47 @@ div[data-monster-role="control"] {
         }
 
         & ::slotted(*) {
+            display: flex;
             box-sizing: border-box;
+            align-self: stretch;
+            height: var(--monster-control-bar-height);
             min-height: var(--monster-control-bar-height);
         }
 
+        & ::slotted(form),
+        & ::slotted(div),
+        & ::slotted(section) {
+            flex-direction: row;
+            align-items: stretch;
+            gap: 0;
+        }
+
         & ::slotted(input),
         & ::slotted(select),
         & ::slotted(textarea),
         & ::slotted(button) {
+            appearance: none;
+            box-sizing: border-box;
+            border-width: var(--monster-theme-control-border-width, var(--monster-border-width));
+            border-radius: var(--monster-theme-control-border-radius, var(--monster-border-radius));
+            border-style: var(--monster-theme-control-border-style, var(--monster-border-style));
+            border-color: var(--monster-theme-control-border-color, var(--monster-bg-color-primary-4));
+            line-height: 1.5;
             height: var(--monster-control-bar-height);
+            padding: var(--monster-select-control-padding, 0.4rem 0.6rem);
+        }
+
+        & ::slotted(monster-select) {
+            --monster-select-container-overflow: hidden;
+            --monster-select-selection-flex-wrap: nowrap;
+            --monster-select-selection-margin: 0;
+            --monster-select-control-padding: 0.4rem 0.6rem;
         }
 
-        & ::slotted(*:not(:last-child)) {
-            margin-right: calc(-1 * var(--monster-border-width));
+        & ::slotted(monster-input-group) {
+            width: max-content;
         }
+
     }
 
     & slot[name=popper] {
@@ -74,18 +104,43 @@ div[data-monster-role="control"] {
             display: flex;
             box-sizing: border-box;
             width: fill-available;
+            height: var(--monster-control-bar-height);
             min-height: var(--monster-control-bar-height);
         }
 
+        &::slotted(form),
+        &::slotted(div),
+        &::slotted(section) {
+            flex-direction: row;
+            align-items: stretch;
+            gap: 0;
+        }
+
         &::slotted(input),
         &::slotted(select),
         &::slotted(textarea),
         &::slotted(button) {
+            appearance: none;
+            box-sizing: border-box;
+            border-width: var(--monster-theme-control-border-width, var(--monster-border-width));
+            border-radius: var(--monster-theme-control-border-radius, var(--monster-border-radius));
+            border-style: var(--monster-theme-control-border-style, var(--monster-border-style));
+            border-color: var(--monster-theme-control-border-color, var(--monster-bg-color-primary-4));
+            line-height: 1.5;
             height: var(--monster-control-bar-height);
+            padding: var(--monster-select-control-padding, 0.4rem 0.6rem);
+        }
+
+        &::slotted(monster-select) {
+            --monster-select-container-overflow: hidden;
+            --monster-select-selection-flex-wrap: nowrap;
+            --monster-select-selection-margin: 0;
+            --monster-select-control-padding: 0.4rem 0.6rem;
         }
 
-        &::slotted(*:not(:first-child)) {
-            margin-top: calc(-1 * var(--monster-border-width));
+        &::slotted(monster-input-group) {
+            width: max-content;
         }
+
     }
 }

package/source/components/form/style/input-group.pcss

@@ -6,6 +6,9 @@
 @import "../../style/control.pcss";
 
 :host {
+    display: flex;
+    box-sizing: border-box;
+    height: 100%;
     border-width: var(--monster-theme-control-border-width);
     border-radius: var(--monster-theme-control-border-radius);
     border-style: var(--monster-theme-control-border-style);
@@ -18,6 +21,8 @@
     flex-wrap: nowrap;
     position: relative;
     box-sizing: border-box;
+    width: 100%;
+    height: 100%;
 }
 
 

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

@@ -11,10 +11,12 @@
 
 [data-monster-role=container] {
     appearance: none;
-    min-height: 1.4em;
+    min-height: 0;
     flex: 4 0 90%;
     width: 100%;
-    overflow: auto;
+    overflow: var(--monster-select-container-overflow, auto);
+    display: flex;
+    align-items: center;
 
     scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
     scrollbar-width: thin;
@@ -62,7 +64,7 @@ div[data-monster-role="control"] {
 
     font-family: inherit;
     font-size: 100%;
-    padding: 0.4rem 0.6rem;
+    padding: var(--monster-select-control-padding, 0.4rem 0.6rem);
     margin: 0;
     outline: none;
     box-sizing: border-box;
@@ -79,6 +81,8 @@ div[data-monster-role="control"] {
     color: var(--monster-color-primary-1);
 
     display: flex;
+    align-items: center;
+    overflow: hidden;
     width: fill-available;
 
 }
@@ -113,11 +117,12 @@ div[data-monster-role="control"] {
 div[data-monster-role=selection] {
     display: flex;
     gap: 5px;
-    margin: 5px;
+    margin: var(--monster-select-selection-margin, 5px);
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: var(--monster-select-selection-flex-wrap, wrap);
+    min-height: 0;
 }
 
 [data-monster-role=option-control] {