@schukai/monster 4.143.7 → 4.143.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.143.7"}
+{"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"}

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

@@ -1393,16 +1393,29 @@ function getVisualBorderElement(element, side) {
 		"textarea",
 		"monster-input-group",
 		"monster-select",
+		"monster-button",
+		"monster-state-button",
+		"monster-message-state-button",
+		"monster-action-button",
+		"monster-api-button",
+		"monster-confirm-button",
+		"monster-popper-button",
 		"[data-monster-role=control]",
 	].join(",");
 	if (element.shadowRoot instanceof ShadowRoot) {
-		return (
-			element.shadowRoot.querySelector("button,input,select,textarea") ||
-			element.shadowRoot.querySelector(
-				"monster-input-group,monster-select,[data-monster-role=control]",
-			) ||
-			element
+		const primaryControl = element.shadowRoot.querySelector(
+			"[data-monster-role=button],button,input,select,textarea",
 		);
+		if (primaryControl instanceof HTMLElement && primaryControl !== element) {
+			return getVisualBorderElement.call(this, primaryControl, side);
+		}
+
+		const control = element.shadowRoot.querySelector(selector);
+		if (control instanceof HTMLElement && control !== element) {
+			return getVisualBorderElement.call(this, control, side);
+		}
+
+		return element;
 	}
 
 	const candidates = Array.from(element.querySelectorAll(selector)).filter(
@@ -1413,10 +1426,14 @@ function getVisualBorderElement(element, side) {
 	}
 
 	if (side === "right" || side === "bottom") {
-		return candidates[candidates.length - 1];
+		return getVisualBorderElement.call(
+			this,
+			candidates[candidates.length - 1],
+			side,
+		);
 	}
 
-	return candidates[0];
+	return getVisualBorderElement.call(this, candidates[0], side);
 }
 
 /**

package/source/components/form/select.mjs

@@ -299,6 +299,7 @@ const optionsMapSymbol = Symbol("optionsMap");
 const optionsMapVersionSnapshotSymbol = Symbol("optionsMapVersionSnapshot");
 const selectionVersionSymbol = Symbol("selectionVersion");
 const closeOnSelectAutoSymbol = Symbol("closeOnSelectAuto");
+const lastFilterValueSymbol = Symbol("lastFilterValue");
 
 /**
  * @private
@@ -3893,22 +3894,28 @@ function handleFilterKeyboardEvents(event) {
 			) {
 				this.click();
 			}
-
-			handleFilterKeyEvents.call(this);
 	}
 }
 
 /**
- * Method handleFilterKeyEvents is used to handle filter key events.
+ * Method handleFilterInputEvents is used to handle filter input events.
  * Debounce is used to prevent multiple calls.
  *
  * @function
- * @name handleFilterKeyEvents
+ * @name handleFilterInputEvents
  *
  * @private
  * @return {void} This method does not return anything.
  */
-function handleFilterKeyEvents() {
+function handleFilterInputEvents() {
+	const filterValue = getCurrentFilterInputValue.call(this);
+
+	if (filterValue === this[lastFilterValueSymbol]) {
+		return;
+	}
+
+	this[lastFilterValueSymbol] = filterValue;
+
 	if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
 		try {
 			this[keyFilterEventSymbol].touch();
@@ -3934,6 +3941,27 @@ function handleFilterKeyEvents() {
 	});
 }
 
+/**
+ * @private
+ * @returns {string|undefined}
+ */
+function getCurrentFilterInputValue() {
+	switch (this.getOption("filter.position")) {
+		case FILTER_POSITION_INLINE:
+			if (this[inlineFilterElementSymbol] instanceof HTMLInputElement) {
+				return this[inlineFilterElementSymbol].value.toLowerCase();
+			}
+			break;
+		case FILTER_POSITION_POPPER:
+		default:
+			if (this[popperFilterElementSymbol] instanceof HTMLInputElement) {
+				return this[popperFilterElementSymbol].value.toLowerCase();
+			}
+	}
+
+	return undefined;
+}
+
 /**
  * @private
  */
@@ -5336,6 +5364,7 @@ function initEventHandler() {
 				element.hasAttribute(ATTRIBUTE_ROLE) &&
 				element.getAttribute(ATTRIBUTE_ROLE) === "filter"
 			) {
+				handleFilterInputEvents.call(self);
 			}
 		}
 	};

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

@@ -32,6 +32,8 @@ describe("ControlBar", function () {
           import("../../../../source/components/form/control-bar-spacer.mjs"),
           import("../../../../source/components/form/button.mjs"),
           import("../../../../source/components/form/popper-button.mjs"),
+          import("../../../../source/components/form/message-state-button.mjs"),
+          import("../../../../source/components/form/confirm-button.mjs"),
         ])
           .then((m) => {
             ControlBar = m[0].ControlBar;
@@ -506,6 +508,105 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should join borders between message state and confirm buttons", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="workflow-border-bar-wrapper">
+          <monster-control-bar
+            id="workflow-border-bar"
+            data-nucleus-role="workflow-lifecycle-integrity-actions"
+          >
+            <monster-message-state-button
+              id="workflow-border-copy"
+              data-nucleus-role="workflow-lifecycle-integrity-copy"
+            >Diagnose kopieren</monster-message-state-button>
+            <monster-confirm-button
+              id="workflow-border-repair"
+              data-nucleus-role="workflow-lifecycle-integrity-repair"
+            >
+              <div>
+                <p>Workflow-Lifecycle für diese Variante jetzt reparieren?</p>
+              </div>
+              <div slot="confirm">Ja</div>
+              <div slot="cancel">Nein</div>
+              <div slot="button">Lifecycle reparieren</div>
+            </monster-confirm-button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("workflow-border-bar-wrapper");
+      const copy = document.getElementById("workflow-border-copy");
+      const repair = document.getElementById("workflow-border-repair");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "400px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 400,
+      });
+
+      for (const control of [copy, repair]) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 120,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 120,
+          height: 30,
+          top: 0,
+          right: 120,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const copyInnerButton = copy.shadowRoot
+        ?.querySelector('[data-monster-role="button"]')
+        ?.shadowRoot?.querySelector("button");
+      const repairInnerButton = repair.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+
+      copyInnerButton.style.borderRightWidth = "3px";
+      repairInnerButton.style.borderLeftWidth = "3px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(repair.style.marginLeft).to.equal("-3px");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should size inline spacer lines from adjacent border widths", async function () {
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;

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

@@ -2283,12 +2283,10 @@ describe('Select', function () {
             select.setOption('mapping.objectsPerPage', 'pagination.perPage');
             mocks.appendChild(select);
 
-            const dispatchFilterKey = (input, code, key) => {
-                input.dispatchEvent(new KeyboardEvent('keydown', {
+            const dispatchFilterInput = (input) => {
+                input.dispatchEvent(new Event('input', {
                     bubbles: true,
-                    composed: true,
-                    code,
-                    key
+                    composed: true
                 }));
             };
 
@@ -2304,12 +2302,12 @@ describe('Select', function () {
             expect(requests[0]).to.equal('https://example.com/defaults?page=1');
 
             filterInput.value = 'alpha';
-            dispatchFilterKey(filterInput, 'KeyA', 'a');
+            dispatchFilterInput(filterInput);
             await waitForCondition(() => requests.length >= 2);
             expect(requests[1]).to.equal('https://example.com/items?filter=alpha&page=1');
 
             filterInput.value = '';
-            dispatchFilterKey(filterInput, 'Backspace', 'Backspace');
+            dispatchFilterInput(filterInput);
             await waitForCondition(() => requests.length >= 3);
             expect(requests[2]).to.equal('https://example.com/defaults?page=1');
 
@@ -2321,6 +2319,129 @@ describe('Select', function () {
             expect(requests[3]).to.equal('https://example.com/defaults?page=1');
         });
 
+        it('should not search when filter cursor keys do not change the value', async function () {
+            this.timeout(5000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+
+                return createJsonResponse({
+                    items: [
+                        {id: 'alpha', name: 'Alpha'}
+                    ],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]') instanceof HTMLInputElement;
+            });
+
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            filterInput.value = 'alpha';
+
+            filterInput.dispatchEvent(new KeyboardEvent('keydown', {
+                bubbles: true,
+                composed: true,
+                code: 'ArrowLeft',
+                key: 'ArrowLeft'
+            }));
+            filterInput.dispatchEvent(new KeyboardEvent('keydown', {
+                bubbles: true,
+                composed: true,
+                code: 'ArrowRight',
+                key: 'ArrowRight'
+            }));
+
+            await new Promise((resolve) => setTimeout(resolve, 260));
+            expect(requests).to.have.length(0);
+
+            filterInput.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+
+            await waitForCondition(() => requests.length === 1);
+            expect(requests[0]).to.equal('https://example.com/items?filter=alpha&page=1');
+        });
+
+        it('should debounce repeated remote filter input events', async function () {
+            this.timeout(5000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+
+                return createJsonResponse({
+                    items: [
+                        {id: 'alpha', name: 'Alpha'}
+                    ],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]') instanceof HTMLInputElement;
+            });
+
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            const dispatchInput = (value) => {
+                filterInput.value = value;
+                filterInput.dispatchEvent(new Event('input', {
+                    bubbles: true,
+                    composed: true
+                }));
+            };
+
+            dispatchInput('a');
+            dispatchInput('al');
+            dispatchInput('alp');
+            dispatchInput('alpha');
+
+            await waitForCondition(() => requests.length === 1);
+            expect(requests[0]).to.equal('https://example.com/items?filter=alpha&page=1');
+
+            await new Promise((resolve) => setTimeout(resolve, 260));
+            expect(requests).to.have.length(1);
+        });
+
         it('should keep unresolved lookup values visible and mark their badge', function (done) {
             this.timeout(3000);