@schukai/monster 3.116.0 → 3.117.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.117.0] - 2025-04-23
+
+### Add Features
+
+- **login:** send success event [#305](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/305)
+
+
+
+## [3.116.1] - 2025-04-17
+
+### Bug Fixes
+
+- update/add new parts for desin the login control
+
+
+
 ## [3.116.0] - 2025-04-14
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"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":"3.116.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"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":"3.117.0"}

package/source/components/form/field-set.mjs

@@ -414,10 +414,10 @@ function getTemplate() {
             </div>
             <div data-monster-role="container" part="container">
                 <div class="collapse-alignment" part="content">
-                    <slot part="content"></slot>
+                    <slot></slot>
                 </div>
                 <monster-collapse data-monster-role="collapse" part="collapse">
-                    <slot name="extended" part="extended"></slot>
+                    <slot name="extended"></slot>
                 </monster-collapse>
             </div>
         </div>`;

package/source/components/form/login.mjs

@@ -129,6 +129,9 @@ const digitsCollapseSymbol = Symbol("digitsCollapse");
  * @since 3.113.0
  * @copyright schukai GmbH
  * @summary A beautiful Login that can make your life easier and also looks good. It supports a lot of features.
+ *
+ * @fires login-success
+ * @fires redirect-to-first-success-url
  */
 class Login extends CustomElement {
 	/**
@@ -352,10 +355,18 @@ class Login extends CustomElement {
 	 * @returns {Login}
 	 */
 	openLoggedIn() {
-		this[loggedInCollapseSymbol].open();
+
+		fireCustomEvent(self, "login-success", {
+			self,
+		});
 
 		if (this.getOption("features.redirectToFirstSuccessUrl")) {
 			setTimeout(() => {
+
+				fireCustomEvent(self, "redirect-to-first-success-url", {
+					self,
+				});
+
 				const successUrl = this.getOption("successUrls");
 				if (successUrl.length > 0) {
 					const success = successUrl[0].url;
@@ -368,6 +379,8 @@ class Login extends CustomElement {
 			return;
 		}
 
+		this[loggedInCollapseSymbol].open();
+
 		return this;
 	}
 
@@ -1543,9 +1556,20 @@ function getTemplate() {
 
             <monster-collapse data-monster-option-openByDefault="true"
                               data-monster-role="login-collapse"
+							  exportparts="control:collapse-login-control,
+   										   container:collapse-login-container,
+										   deco:collapse-login-deco"
                               part="login-collapse"
             >
-                <monster-field-set part="login-field-set">
+                <monster-field-set
+					exportparts="
+						control:field-set-login-control,
+						header:field-set-login-header,
+						title:field-set-login-title,
+						container:field-set-login-container,
+						content:field-set-login-content,
+						collapse:field-set-login-collapse"
+					part="login-field-set">
                     <slot name="login-header"></slot>
                     <label part="login-label" data-monster-replace="path:labels.username"></label>
                     <input type="text" name="username" autofocus autocomplete="off">
@@ -1555,6 +1579,13 @@ function getTemplate() {
                     <div data-monster-attributes="class path:classes.passwordInvalid"></div>
                     <monster-message-state-button id="loginButton"
                                                   part="login-button"
+												  exportparts="
+														control:login-button-control,
+														button:login-button-button,
+														popper:login-button-popper,
+														message:login-button-message,
+														button-button:login-button-button,
+														button-control:login-button-control"
                                                   data-monster-replace="path:labels.login"></monster-message-state-button>
                     <a href="#" data-monster-role="forgot-password-link" part="forgot-password-link"
                        data-monster-attributes="class path:features.forgotPassword | ?::hidden"
@@ -1564,19 +1595,37 @@ function getTemplate() {
 
 
             </monster-collapse>
-            <monster-collapse data-monster-role="forgot-password-collapse" part="forgot-password-collapse">
-
-                <monster-field-set part="forgot-password-field-set">
+            <monster-collapse data-monster-role="forgot-password-collapse"
+							  exportparts="control:collapse-forgot-password-control,
+											container:collapse-forgot-password-container,
+											deco:collapse-forgot-password-deco"
+							  part="forgot-password-collapse">
+
+                <monster-field-set part="forgot-password-field-set"
+								   exportparts="
+									control:field-set-forgot-password-control,
+									header:field-set-forgot-password-header,
+									title:field-set-forgot-password-title,
+									container:field-set-forgot-password-container,
+									content:field-set-forgot-password-content,
+									collapse:field-set-forgot-password-collapse">
                     <slot name="forgot-password-header"></slot>
                     <label part="forgot-password-label" data-monster-replace="path:labels.mailAddress"></label>
                     <input type="email" name="email"
                            data-monster-attributes="accesskey path:accessKeys.username"
                            autocomplete="off">
                     <div data-monster-attributes="class path:classes.emailInvalid"></div>
-                    <monster-message-state-button id="requestLinkButton"
-                                                  part="request-link-button"
-                                                  data-monster-attributes="accesskey path:accessKeys.password"
-                                                  data-monster-replace="path:labels.requestLink"></monster-message-state-button>
+					<monster-message-state-button id="requestLinkButton"
+												  part="request-link-button"
+												  exportparts="
+														control:forgot-password-button-control,
+														button:forgot-password-button-button,
+														popper:forgot-password-button-popper,
+														message:forgot-password-button-message,
+														button-button:forgot-password-button-button,
+														button-control:forgot-password-button-control"
+												  data-monster-attributes="accesskey path:accessKeys.password"
+												  data-monster-replace="path:labels.requestLink"></monster-message-state-button>
                     <a href="#"
                        data-monster-attributes="accesskey path:accessKeys.loginLink"
                        data-monster-role="login-link"
@@ -1586,18 +1635,38 @@ function getTemplate() {
                 </monster-field-set>
 
             </monster-collapse>
-            <monster-collapse data-monster-role="second-factor-collapse" part="second-factor--collapse">
-
-                <monster-field-set part="second-factor-field-set">
+            <monster-collapse data-monster-role="second-factor-collapse"
+							  exportparts="control:collapse-second-factor-control,
+										   container:collapse-second-factor-container,
+										   deco:collapse-second-factor-deco"
+							  part="second-factor-collapse">
+
+                <monster-field-set part="second-factor-field-set"
+								   exportparts="
+										control:field-set-second-factor-control,
+										header:field-set-second-factor-header,
+										title:field-set-second-factor-title,
+										container:field-set-second-factor-container,
+										content:field-set-second-factor-content,
+										collapse:field-set-second-factor-collapse">
                     <slot name="second-factor-header"></slot>
                     <label part="second-factor-label" data-monster-replace="path:labels.secondFactor"></label>
                     <div>
                         <monster-digits data-monster-attributes="data-monster-option-digits path:digits"
                                         id="secondFactorControl"></monster-digits>
                     </div>
-                    <monster-message-state-button id="secondFactorButton"
-                                                  part="secondFactor-digits-button"
-                                                  data-monster-replace="path:labels.sendSecondFactorDigits"></monster-message-state-button>
+					<!-- SECOND FACTOR COLLAPSE -->
+					<monster-message-state-button id="secondFactorButton"
+												  part="secondFactor-digits-button"
+												  exportparts="
+														control:second-factor-button-control,
+														button:second-factor-button-button,
+														popper:second-factor-button-popper,
+														message:second-factor-button-message,
+														button-button:second-factor-button-button,
+														button-control:second-factor-button-control"
+												  data-monster-replace="path:labels.sendSecondFactorDigits"></monster-message-state-button>
+
                     <a href="#" data-monster-role="reset-login-process-link"
                        part="reset-login-process-link"
                        data-monster-replace="path:labels.resetLoginProcess"></a>
@@ -1605,9 +1674,20 @@ function getTemplate() {
                 </monster-field-set>
 
             </monster-collapse>
-            <monster-collapse data-monster-role="digits-collapse" part="digits-collapse">
-
-                <monster-field-set part="digits-field-set">
+            <monster-collapse data-monster-role="digits-collapse"
+							  exportparts="control:collapse-digits-control,
+										container:collapse-digits-container,
+										deco:collapse-digits-deco"
+							  part="digits-collapse">
+
+                <monster-field-set part="digits-field-set"
+								   exportparts="
+										control:field-set-digits-control,
+										header:field-set-digits-header,
+										title:field-set-digits-title,
+										container:field-set-digits-container,
+										content:field-set-digits-content,
+										collapse:field-set-digits-collapse">
                     <slot name="digits-header"></slot>
                     <label part="digits-label" data-monster-replace="path:labels.digits"></label>
                     <div>
@@ -1616,6 +1696,13 @@ function getTemplate() {
                     </div>
                     <monster-message-state-button id="digitsButton"
                                                   part="digits-button"
+												  exportparts="
+														control:digits-button-control,
+														button:digits-button-button,
+														popper:digits-button-popper,
+														message:digits-button-message,
+														button-button:digits-button-button,
+														button-control:digits-button-control"
                                                   data-monster-replace="path:labels.sendDigits"></monster-message-state-button>
                     <a href="#" data-monster-role="reset-login-process-link"
                        part="reset-login-process-link"
@@ -1624,7 +1711,12 @@ function getTemplate() {
                 </monster-field-set>
 
             </monster-collapse>
-            <monster-collapse data-monster-role="logged-in-collapse" part="logged-in-collapse">
+            <monster-collapse data-monster-role="logged-in-collapse"
+							  exportparts="
+								control:collapse-success-control,
+								container:collapse-success-container,
+								deco:collapse-success-deco"
+							  part="logged-in-collapse">
                 <div>
                     <slot name="logged-in-header"></slot>
                     <ul data-monster-insert="urls path:successUrls"></ul>