@schukai/monster 4.136.7 → 4.136.10

package/test/cases/components/form/message-state-button.mjs

@@ -73,8 +73,9 @@ describe("MessageStateButton", function () {
 
 		describe("document.createElement", function () {
 			it("should instance of message-state-button", function () {
-				expect(document.createElement("monster-message-state-button")).is
-					.instanceof(MessageStateButton);
+				expect(
+					document.createElement("monster-message-state-button"),
+				).is.instanceof(MessageStateButton);
 			});
 		});
 	});
@@ -93,9 +94,7 @@ describe("MessageStateButton", function () {
 
 			setTimeout(() => {
 				try {
-					const inner = button.shadowRoot.querySelector(
-						"monster-state-button",
-					);
+					const inner = button.shadowRoot.querySelector("monster-state-button");
 					expect(inner).to.exist;
 
 					button.setAttribute("disabled", "");
@@ -231,19 +230,22 @@ describe("MessageStateButton", function () {
 
 			setTimeout(() => {
 				try {
-					button.setMessage("<div><strong>Saved</strong><p>plain html</p></div>");
+					button.setMessage(
+						"<div><strong>Saved</strong><p>plain html</p></div>",
+					);
 					button.showMessage();
 
 					setTimeout(() => {
 						try {
-							const content = button.shadowRoot.querySelector('[part="content"]');
+							const content =
+								button.shadowRoot.querySelector('[part="content"]');
 							const message = button.shadowRoot.querySelector(
 								'[data-monster-role="message"]',
 							);
 							expect(content).to.exist;
-							expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
-								"both",
-							);
+							expect(
+								content.getAttribute("data-monster-overflow-mode"),
+							).to.equal("both");
 							expect(
 								content.getAttribute("data-monster-message-layout"),
 							).to.equal("prose");
@@ -306,10 +308,7 @@ describe("MessageStateButton", function () {
 				try {
 					const wrapper = document.createElement("div");
 					const line = document.createElement("div");
-					line.setAttribute(
-						"style",
-						"white-space: nowrap; overflow-x: auto;",
-					);
+					line.setAttribute("style", "white-space: nowrap; overflow-x: auto;");
 					line.textContent =
 						"this is intentionally a single long line to trigger wide layout";
 					wrapper.appendChild(line);
@@ -319,14 +318,15 @@ describe("MessageStateButton", function () {
 
 					setTimeout(() => {
 						try {
-							const content = button.shadowRoot.querySelector('[part="content"]');
+							const content =
+								button.shadowRoot.querySelector('[part="content"]');
 							const message = button.shadowRoot.querySelector(
 								'[data-monster-role="message"]',
 							);
 							expect(content).to.exist;
-							expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
-								"both",
-							);
+							expect(
+								content.getAttribute("data-monster-overflow-mode"),
+							).to.equal("both");
 							expect(
 								content.getAttribute("data-monster-message-layout"),
 							).to.equal("wide");
@@ -351,7 +351,8 @@ describe("MessageStateButton", function () {
 
 		beforeEach(() => {
 			originalInnerWidth = window.innerWidth;
-			originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+			originalGetBoundingClientRect =
+				HTMLElement.prototype.getBoundingClientRect;
 		});
 
 		afterEach(() => {
@@ -360,7 +361,8 @@ describe("MessageStateButton", function () {
 				writable: true,
 				value: originalInnerWidth,
 			});
-			HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+			HTMLElement.prototype.getBoundingClientRect =
+				originalGetBoundingClientRect;
 			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = "";
 		});
@@ -388,14 +390,7 @@ describe("MessageStateButton", function () {
 					};
 				}
 
-				return {
-					width: 100,
-					height: 40,
-					top: 0,
-					left: 0,
-					right: 100,
-					bottom: 40,
-				};
+				return originalGetBoundingClientRect.call(this);
 			};
 
 			setTimeout(() => {
@@ -405,18 +400,12 @@ describe("MessageStateButton", function () {
 					);
 					button.showMessage();
 
-					setTimeout(() => {
-						try {
-							const popper = button.shadowRoot.querySelector(
-								'[data-monster-role="popper"]',
-							);
-							expect(popper.style.width).to.equal("512px");
-							expect(popper.style.maxWidth).to.equal("512px");
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}, 0);
+					const popper = button.shadowRoot.querySelector(
+						'[data-monster-role="popper"]',
+					);
+					expect(popper.style.width).to.equal("512px");
+					expect(popper.style.maxWidth).to.equal("512px");
+					done();
 				} catch (e) {
 					done(e);
 				}
@@ -446,14 +435,7 @@ describe("MessageStateButton", function () {
 					};
 				}
 
-				return {
-					width: 100,
-					height: 40,
-					top: 0,
-					left: 0,
-					right: 100,
-					bottom: 40,
-				};
+				return originalGetBoundingClientRect.call(this);
 			};
 
 			setTimeout(() => {
@@ -465,18 +447,12 @@ describe("MessageStateButton", function () {
 					button.setMessage(wrapper);
 					button.showMessage();
 
-					setTimeout(() => {
-						try {
-							const popper = button.shadowRoot.querySelector(
-								'[data-monster-role="popper"]',
-							);
-							expect(popper.style.width).to.equal("768px");
-							expect(popper.style.maxWidth).to.equal("768px");
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}, 0);
+					const popper = button.shadowRoot.querySelector(
+						'[data-monster-role="popper"]',
+					);
+					expect(popper.style.width).to.equal("768px");
+					expect(popper.style.maxWidth).to.equal("768px");
+					done();
 				} catch (e) {
 					done(e);
 				}

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

@@ -790,6 +790,155 @@ describe('Select', function () {
             }, 150);
         });
 
+        it('should not eagerly fetch remote info when showRemoteInfo is disabled', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+            const previousFetch = global['fetch'];
+
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+
+                return createJsonResponse({
+                    items: [
+                        {id: 'alpha', name: 'Alpha'}
+                    ],
+                    pagination: {
+                        total: 3,
+                        page: 2,
+                        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('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');
+            select.setOption('remoteInfo.url', 'https://example.com/remote-info');
+            select.setOption('features.showRemoteInfo', false);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    expect(requests).to.deep.equal([]);
+                } catch (e) {
+                    global['fetch'] = previousFetch;
+                    return done(e);
+                }
+
+                select.fetch('https://example.com/items?filter=*&page=2')
+                    .then(() => {
+                        try {
+                            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+
+                            expect(requests).to.deep.equal([
+                                'https://example.com/items?filter=*&page=2'
+                            ]);
+                            expect(select.getOption('total')).to.equal(3);
+                            expect(pagination.getOption('currentPage')).to.equal(2);
+                            expect(pagination.getOption('pages')).to.equal(3);
+                            expect(pagination.getOption('objectsPerPage')).to.equal(1);
+                        } catch (e) {
+                            return done(e);
+                        } finally {
+                            global['fetch'] = previousFetch;
+                        }
+
+                        done();
+                    })
+                    .catch((e) => {
+                        global['fetch'] = previousFetch;
+                        done(e);
+                    });
+            }, 150);
+        });
+
+        it('should defer remote info fetching until the dropdown is opened', async function () {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+            const remoteInfoUrl = 'https://example.com/remote-info';
+
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+
+                return createJsonResponse({
+                    pagination: {
+                        total: 5
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('remoteInfo.url', remoteInfoUrl);
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'}
+            ]);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            expect(requests).to.deep.equal([]);
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+
+            container.click();
+            await waitForCondition(() => requests.includes(remoteInfoUrl));
+            expect(requests.filter((url) => url === remoteInfoUrl)).to.have.length(1);
+        });
+
+        it('should keep empty equivalent matching type-safe for numeric zero', function (done) {
+            this.timeout(2000);
+
+            let mocks = document.getElementById('mocks');
+            const stringEquivalentSelect = document.createElement('monster-select');
+            stringEquivalentSelect.setOption('empty.equivalents', ['0']);
+            mocks.appendChild(stringEquivalentSelect);
+
+            const numericEquivalentSelect = document.createElement('monster-select');
+            numericEquivalentSelect.setOption('empty.equivalents', [0]);
+            mocks.appendChild(numericEquivalentSelect);
+
+            setTimeout(() => {
+                stringEquivalentSelect.value = 0;
+                numericEquivalentSelect.value = 0;
+
+                setTimeout(() => {
+                    try {
+                        expect(stringEquivalentSelect.value).to.equal('0');
+                        expect(stringEquivalentSelect.getOption('selection')).to.deep.equal([
+                            {
+                                label: '0',
+                                value: 0,
+                                class: 'monster-badge-primary',
+                                unresolved: false
+                            }
+                        ]);
+
+                        expect(numericEquivalentSelect.value).to.equal('');
+                        expect(numericEquivalentSelect.getOption('selection')).to.deep.equal([]);
+                    } catch (e) {
+                        return done(e);
+                    }
+
+                    done();
+                }, 50);
+            }, 50);
+        });
+
         it('should not refetch after selecting an already loaded remote option', function (done) {
             this.timeout(3000);
 
@@ -980,6 +1129,52 @@ describe('Select', function () {
             }, 250);
         });
 
+        it('should keep unresolved object lookup values visible by key and mark their badge', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(url.toString());
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: {id: 'missing-key'}}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                    const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                    expect(requests).to.include('https://example.com/items?filter=missing-key');
+                    expect(badge).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel.textContent.trim()).to.equal('missing-key');
+                    expect(badge.className).to.contain('monster-badge-warning');
+                    expect(badge.className).to.not.contain('monster-badge-primary');
+                    expect(badge.getAttribute('data-monster-unresolved')).to.equal('true');
+                    expect(badgeLabel.textContent).to.not.contain(select.getOption('labels.cannot-be-loaded'));
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 250);
+        });
+
         it('should clear the unresolved badge state once a local option can resolve the value', function (done) {
             this.timeout(4000);
 

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.128.3")
+        monsterVersion = new Version("4.136.7")
 
         let m = getMonsterVersion();
 

package/test/web/import.js

@@ -9,14 +9,18 @@ import "../cases/components/form/buy-box.mjs";
 import "../cases/components/form/message-state-button.mjs";
 import "../cases/components/form/button-bar.mjs";
 import "../cases/components/form/reload.mjs";
+import "../cases/components/form/context-help.mjs";
 import "../cases/components/form/state-button.mjs";
 import "../cases/components/form/select.mjs";
 import "../cases/components/form/login.mjs";
 import "../cases/components/form/confirm-button.mjs";
+import "../cases/components/form/context-error.mjs";
 import "../cases/components/form/form.mjs";
 import "../cases/components/form/tree-select.mjs";
+import "../cases/components/form/popper-button.mjs";
 import "../cases/components/form/wizard.mjs";
 import "../cases/components/form/button.mjs";
+import "../cases/components/form/floating-ui.mjs";
 import "../cases/components/form/toggle-switch.mjs";
 import "../cases/components/form/template.mjs";
 import "../cases/components/notify/message.mjs";

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.128.3</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update So 5. Apr 19:19:33 CEST 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.136.7</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Wed Apr 22 21:49:31 CEST 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>