@schukai/monster 4.128.3 → 4.129.0

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

@@ -0,0 +1,168 @@
+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 Login;
+
+describe("Login", function () {
+	before(function (done) {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill")
+				.then(() => import("../../../../source/components/form/login.mjs"))
+				.then((module) => {
+					Login = module.Login;
+					done();
+				})
+				.catch((error) => done(error));
+		});
+	});
+
+	beforeEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should create a monster-login element", function () {
+		expect(document.createElement("monster-login")).is.instanceof(Login);
+	});
+
+	it("should respect the native hidden attribute on the host", function (done) {
+		const login = document.createElement("monster-login");
+		login.setAttribute("hidden", "");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+				expect(login.isVisible).to.be.false;
+				done();
+			} catch (error) {
+				done(error);
+			}
+		}, 100);
+	});
+
+	it("should hide and show the host with the public visibility API", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		const states = [];
+		login.addEventListener("monster-visibility-changed", (event) => {
+			states.push(event.detail.visible);
+		});
+
+		setTimeout(() => {
+			try {
+				const username = login.shadowRoot.querySelector("input[name='username']");
+				username.focus();
+
+				login.hide();
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+
+		setTimeout(() => {
+			try {
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+
+				login.show();
+
+				setTimeout(() => {
+					try {
+						expect(login.hidden).to.be.false;
+						expect(login.visible).to.be.true;
+						expect(states).to.deep.equal([false, true]);
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 25);
+			} catch (error) {
+				done(error);
+			}
+		}, 200);
+	});
+
+	it("should keep host visibility separate from openLogin", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				login.hide();
+				login.openLogin();
+
+				expect(login.hidden).to.be.true;
+				expect(login.visible).to.be.false;
+				done();
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+	});
+
+	it("should show the custom collapse and close the login collapse", function (done) {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		setTimeout(() => {
+			try {
+				const loginCollapse = login.shadowRoot.querySelector(
+					'[data-monster-role="login-collapse"]',
+				);
+				const customCollapse = login.shadowRoot.querySelector(
+					'[data-monster-role="custom-collapse"]',
+				);
+
+				expect(loginCollapse.isOpen()).to.be.true;
+				expect(customCollapse.isClosed()).to.be.true;
+
+				const button = document.createElement("button");
+				button.textContent = "Weiter";
+
+				login.showCustomCollapse({
+					header: "Hinweis",
+					content: ["Manueller Inhalt", button],
+					footer: "Footer",
+				});
+
+				setTimeout(() => {
+					try {
+						expect(customCollapse.isOpen()).to.be.true;
+						expect(loginCollapse.isClosed()).to.be.true;
+						expect(
+							login.shadowRoot.getElementById("customCollapseHeader").textContent,
+						).to.equal("Hinweis");
+						expect(
+							login.shadowRoot
+								.getElementById("customCollapseContent")
+								.textContent.includes("Manueller Inhalt"),
+						).to.be.true;
+						expect(
+							login.shadowRoot
+								.getElementById("customCollapseContent")
+								.querySelector("button"),
+						).to.equal(button);
+						expect(
+							login.shadowRoot.getElementById("customCollapseFooter").textContent,
+						).to.equal("Footer");
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 700);
+			} catch (error) {
+				done(error);
+			}
+		}, 150);
+	});
+});

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

@@ -371,6 +371,30 @@ describe('Select', function () {
 
         });
 
+        it('should expose styling parts for container, filter messages and pagination', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('filter.mode', 'remote');
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+                    const selectionMessages = select.shadowRoot.querySelector('[data-monster-role=selection-messages]');
+                    const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+
+                    expect(container.getAttribute('part')).to.equal('container');
+                    expect(selectionMessages.getAttribute('part')).to.equal('selection-messages');
+                    expect(pagination.getAttribute('part')).to.equal('pagination');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+        });
+
         it('should normalize options without throwing', function (done) {
             this.timeout(2000);
 

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

@@ -212,7 +212,28 @@ describe('Treeselect', function () {
 
         });
 
+        it('should expose styling parts for container and popper filter control', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-tree-select');
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+                    const popperFilterControl = select.shadowRoot.querySelector('.option-filter-control');
+
+                    expect(container.getAttribute('part')).to.equal('container');
+                    expect(popperFilterControl.getAttribute('part')).to.equal('popper-filter-control');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+        });
+
     });
 
 
-});
+});

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.2")
+        monsterVersion = new Version("4.128.3")
 
         let m = getMonsterVersion();
 

package/test/web/import.js

@@ -10,6 +10,7 @@ import "../cases/components/form/button-bar.mjs";
 import "../cases/components/form/reload.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/form.mjs";
 import "../cases/components/form/tree-select.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.2</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 26. Mär 19:17:38 CET 2026</div>
+  <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>
 </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>