@schukai/monster 4.129.8 → 4.129.9

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.129.8"}
+{"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.129.9"}

package/source/components/form/context-base.mjs

@@ -50,6 +50,9 @@ class ContextBase extends Popper {
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
+			popper: Object.assign({}, super.defaults.popper, {
+				contentOverflow: "visible",
+			}),
 			features: Object.assign({}, super.defaults.features, {
 				showIconWithoutContent: false,
 			}),

package/source/components/form/context-error.mjs

@@ -114,6 +114,10 @@ class ContextError extends Popper {
 
 			content: "<slot></slot>",
 
+			popper: Object.assign({}, super.defaults.popper, {
+				contentOverflow: "visible",
+			}),
+
 			classes: {
 				button: "monster-theme-error-2",
 			},

package/source/components/layout/popper.mjs

@@ -155,7 +155,7 @@ class Popper extends CustomElement {
 	 * @property {Object} popper - Positioning options
 	 * @property {string} popper.placement - Placement: top|bottom|left|right
 	 * @property {Array} popper.middleware - Positioning middleware functions
-	 * @property {string} popper.contentOverflow - Content clipping mode: both|horizontal
+	 * @property {string} popper.contentOverflow - Content clipping mode: both|horizontal|visible
 	 * @property {Object} features - Feature flags
 	 * @property {boolean} features.preventOpenEventSent - Prevent open event
 	 * @returns {Object} Default options merged with parent defaults

package/source/components/layout/stylesheet/popper.mjs

@@ -25,7 +25,7 @@ try {
 	PopperStyleSheet.insertRule(
 		`
 @layer popper { 
-[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{display:flex;position:relative} 
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{display:flex;position:relative} 
 }`,
 		0,
 	);

package/source/components/style/floating-ui.css

@@ -1,58 +1,2 @@
 /** generated from floating-ui.pcss **/
-div[data-monster-role="popper"] {
-	align-content: center;
-	background: var(--monster-bg-color-primary-1);
-	border-color: var(--monster-bg-color-primary-4);
-	border-radius: var(--monster-border-radius);
-	border-style: var(--monster-border-style);
-	border-width: var(--monster-border-width);
-	box-shadow: var(--monster-box-shadow-1);
-	box-sizing: border-box;
-	color: var(--monster-color-primary-1);
-	display: none;
-	justify-content: space-between;
-	left: 0;
-	max-height: var(--monster-popper-max-height, calc(100vh - 2rem));
-	max-width: var(--monster-popper-max-width, calc(100vw - 2rem));
-	padding: 1.1em;
-	position: absolute;
-	top: 0;
-	width: -moz-max-content;
-	width: max-content;
-	z-index: var(--monster-z-index-modal);
-}
-div[data-monster-role="popper"] > [part="content"] {
-	max-height: var(--monster-popper-content-max-height, calc(100vh - 4.2rem));
-	max-width: 100%;
-	overflow: auto;
-}
-div[data-monster-role="popper"]
-	> [part="content"][data-monster-overflow-mode="horizontal"] {
-	clip-path: inset(
-		calc(var(--monster-popper-content-block-overflow, 100vh) * -1) 0
-			calc(var(--monster-popper-content-block-overflow, 100vh) * -1) 0
-	);
-	overflow: visible;
-}
-div[data-monster-role="popper"] div[data-monster-role="arrow"] {
-	background: var(--monster-bg-color-primary-1);
-	height: calc(
-		max(
-			var(--monster-popper-witharrrow-distance),
-			-1 *
-			var(--monster-popper-witharrrow-distance)
-		) *
-		2
-	);
-	pointer-events: none;
-	position: absolute;
-	width: calc(
-		max(
-			var(--monster-popper-witharrrow-distance),
-			-1 *
-			var(--monster-popper-witharrrow-distance)
-		) *
-		2
-	);
-	z-index: -1;
-}
+div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}

package/source/components/style/floating-ui.pcss

@@ -39,6 +39,13 @@ div[data-monster-role=popper] {
         );
     }
 
+    & > [part=content][data-monster-overflow-mode=visible] {
+        overflow: visible;
+        clip-path: none;
+        max-width: none;
+        max-height: none;
+    }
+
     & div[data-monster-role=arrow] {
         position: absolute;
         width: calc(2 * max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance)));

package/source/components/stylesheet/floating-ui.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-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 { FloatingUiStyleSheet };
+export {FloatingUiStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { FloatingUiStyleSheet };
 const FloatingUiStyleSheet = new CSSStyleSheet();
 
 try {
-	FloatingUiStyleSheet.insertRule(
-		`
+  FloatingUiStyleSheet.insertRule(`
 @layer floatingui { 
-div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1} 
-}`,
-		0,
-	);
+div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/test/cases/components/form/context-error.mjs

@@ -0,0 +1,48 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let ContextError;
+
+describe("ContextError", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				return import("../../../../source/components/form/context-error.mjs");
+			})
+			.then((m) => {
+				ContextError = m["ContextError"];
+				done();
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should default to visible content overflow", function (done) {
+		let mocks = document.getElementById("mocks");
+		const error = document.createElement("monster-context-error");
+		error.innerHTML = "<p>Error message</p>";
+		mocks.appendChild(error);
+
+		setTimeout(() => {
+			try {
+				expect(error).to.be.instanceof(ContextError);
+				const content = error.shadowRoot.querySelector('[part="content"]');
+				expect(error.getOption("popper.contentOverflow")).to.equal("visible");
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"visible",
+				);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+});

package/test/cases/components/form/context-help.mjs

@@ -68,4 +68,24 @@ describe("ContextHelp", function () {
 			}
 		}, 0);
 	});
+
+	it("should default to visible content overflow", function (done) {
+		let mocks = document.getElementById("mocks");
+		const help = document.createElement("monster-context-help");
+		help.innerHTML = "<p>Inline help</p>";
+		mocks.appendChild(help);
+
+		setTimeout(() => {
+			try {
+				const content = help.shadowRoot.querySelector('[part="content"]');
+				expect(help.getOption("popper.contentOverflow")).to.equal("visible");
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"visible",
+				);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
 });

package/test/cases/components/form/popper-button.mjs

@@ -62,6 +62,37 @@ describe("PopperButton", function () {
 		}, 0);
 	});
 
+	it("should apply visible content overflow mode to the rendered content wrapper", function (done) {
+		let mocks = document.getElementById("mocks");
+		const button = document.createElement("monster-popper-button");
+		mocks.appendChild(button);
+
+		setTimeout(() => {
+			try {
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(content).to.exist;
+
+				button.setOption("popper.contentOverflow", "visible");
+
+				setTimeout(() => {
+					try {
+						expect(
+							button.getOption("popper.contentOverflow"),
+						).to.equal("visible");
+						expect(
+							content.getAttribute("data-monster-overflow-mode"),
+						).to.equal("visible");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				}, 0);
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
 	it("should apply content overflow mode from the HTML attribute", function (done) {
 		let mocks = document.getElementById("mocks");
 		mocks.innerHTML = `
@@ -87,6 +118,31 @@ describe("PopperButton", function () {
 		}, 0);
 	});
 
+	it("should apply visible content overflow mode from the HTML attribute", function (done) {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = `
+            <monster-popper-button
+                data-monster-option-popper-content-overflow="visible"
+            ></monster-popper-button>
+        `;
+
+		setTimeout(() => {
+			try {
+				const button = mocks.querySelector("monster-popper-button");
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(button.getOption("popper.contentOverflow")).to.equal(
+					"visible",
+				);
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"visible",
+				);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
 	it("should use absolute positioning by default", function (done) {
 		let mocks = document.getElementById("mocks");
 		const button = document.createElement("monster-popper-button");

package/test/cases/dom/util/init-options-from-attributes.mjs

@@ -185,4 +185,18 @@ describe('initOptionsFromAttributes', () => {
         expect(result.message.width.viewportRatio).to.equal(0.9);
     });
 
+    it('should preserve visible for popper content overflow attributes', () => {
+        options = {
+            popper: {
+                contentOverflow: 'both',
+            },
+        };
+
+        element.setAttribute('data-monster-option-popper-content-overflow', 'visible');
+
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result.popper.contentOverflow).to.equal('visible');
+    });
+
 });