@schukai/monster 3.115.4 → 3.116.1

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

@@ -1543,9 +1543,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 +1566,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 +1582,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 +1622,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 +1661,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 +1683,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 +1698,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>

package/source/components/host/overlay.mjs

@@ -12,303 +12,12 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
-} from "../../dom/customelement.mjs";
-import "../notify/notify.mjs";
-import { OverlayStyleSheet } from "./stylesheet/overlay.mjs";
-import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
-import {
-	findTargetElementFromEvent,
-	fireCustomEvent,
-} from "../../dom/events.mjs";
-import { instanceSymbol } from "../../constants.mjs";
-
+import { Overlay as NewOverlay } from "../layout/overlay.mjs";
 export { Overlay };
 
 /**
- * @private
- * @type {symbol}
- */
-const overlayElementSymbol = Symbol("overlayElement");
-
-/**
- * @private
- * @type {symbol}
- */
-const overlayCloseElementSymbol = Symbol("overlayCloserElement");
-
-/**
- * @private
- * @type {symbol}
- */
-const overlayOpenElementSymbol = Symbol("overlayOpenElement");
-
-/**
- * @private
- * @type {symbol}
- */
-const closeEventHandlerSymbol = Symbol("closeEventHandler");
-
-/**
- * @private
- * @type {symbol}
- */
-const openEventHandlerSymbol = Symbol("openEventHandler");
-
-/**
- * @private
- * @type {string}
- */
-const ATTRIBUTE_VALUE_OVERLAY_OPEN = "overlay-open";
-
-/**
- * The Overlay component is used to show an overlay and a button to open the overlay.
- *
+ * @since 1.10.0
  * @copyright schukai GmbH
- * @summary A simple overlay component
- * @fires monster-overlay-before-open
- * @fires monster-overlay-open
- * @fires monster-overlay-before-close
- * @fires monster-overlay-closed
+ * @deprecated since 3.116.0 use Layout/Overlay instead
  */
-class Overlay extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/host/overlay@@instance");
-	}
-
-	/**
-	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} container Container definitions
-	 * @property {array} container Container definitions
-	 * @property {string} container[].name Name of the container
-	 * @property {string} container[].content Content of the container
-	 * @property {string} container[].class Css class of the container
-	 * @property {Object} classes Css classes
-	 * @property {string} classes.body Css class to hide the body. This class is removed when the component is ready.
-	 * @property {string} classes.overlay Css class to hide the overlay. This class is removed when the component is ready.
-	 * @property {Object} features Feature definitions
-	 * @property {boolean} features.escapeKey If true the overlay can be closed with the escape key
-	 * @property {boolean} features.openButton If true the overlay can be opened with a button
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			overlay: [
-				{
-					name: "content",
-					content: "<slot></slot>",
-					class: "",
-				},
-			],
-			classes: {
-				body: "hidden",
-				overlay: "hide-empty",
-			},
-			features: {
-				escapeKey: true,
-				openButton: true,
-			},
-		});
-	}
-
-	/**
-	 * @private
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-
-		/**
-		 * show the scroll bar always
-		 * @type {string}
-		 */
-		document.documentElement.style.overflowY = "scroll";
-
-		const classNames = this.getOption("classes.body");
-
-		if (document.body.classList.contains(classNames)) {
-			document.body.classList.remove(classNames);
-		}
-	}
-
-	/**
-	 *
-	 * @return {Monster.Components.Host.Overlay}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-	}
-
-	/**
-	 *
-	 * @return {Monster.Components.Host.Overlay}
-	 */
-	toggle() {
-		if (this[overlayElementSymbol].classList.contains("open")) {
-			this.close();
-		} else {
-			this.open();
-		}
-		return this;
-	}
-
-	/**
-	 * @return {Monster.Components.Host.Overlay}
-	 * @fires monster-overlay-before-open
-	 * @fires monster-overlay-open
-	 * @fires monster-overlay-before-close
-	 * @fires monster-overlay-closed
-	 */
-	open() {
-		fireCustomEvent(this, "monster-overlay-before-open", {});
-
-		this[overlayElementSymbol].classList.remove("hide-empty");
-
-		setTimeout(() => {
-			this[overlayElementSymbol].classList.add("open");
-			setTimeout(() => {
-				fireCustomEvent(this, "monster-overlay-open", {});
-			}, 0);
-		}, 0);
-
-		return this;
-	}
-
-	/**
-	 * @return {Monster.Components.Host.Overlay}
-	 */
-	close() {
-		fireCustomEvent(this, "monster-overlay-before-close", {});
-		setTimeout(() => {
-			this[overlayElementSymbol].classList.remove("open");
-			setTimeout(() => {
-				fireCustomEvent(this, "monster-overlay-closed", {});
-			}, 0);
-		}, 0);
-		return this;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-overlay";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [OverlayStyleSheet];
-	}
-}
-
-/**
- * @private
- * @return {Select}
- * @throws {Error} no shadow-root is defined
- */
-function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[overlayElementSymbol] = this.shadowRoot.getElementById("overlay");
-	this[overlayCloseElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=overlay-close]",
-	);
-	this[overlayOpenElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=overlay-open]",
-	);
-}
-
-/**
- * @private
- */
-function initEventHandler() {
-	/**
-	 * @param {Event} event
-	 */
-	this[closeEventHandlerSymbol] = (event) => {
-		this.close();
-	};
-
-	this[overlayCloseElementSymbol].addEventListener(
-		"click",
-		this[closeEventHandlerSymbol],
-	);
-
-	/**
-	 * @param {Event} event
-	 */
-	this[openEventHandlerSymbol] = (event) => {
-		const element = findTargetElementFromEvent(
-			event,
-			ATTRIBUTE_ROLE,
-			ATTRIBUTE_VALUE_OVERLAY_OPEN,
-		);
-		if (element) {
-			this.open();
-		}
-	};
-
-	this.addEventListener("click", this[openEventHandlerSymbol]);
-
-	if (this.getOption("features.escapeKey") === true) {
-		this.addEventListener("keydown", (event) => {
-			if (event.key === "Escape") {
-				const isNotCombinedKey = !(
-					event.ctrlKey ||
-					event.altKey ||
-					event.shiftKey
-				);
-				if (isNotCombinedKey) {
-					this.toggleOverlay();
-				}
-			}
-		});
-	}
-
-	return this;
-}
-
-/**
- * @private
- * @return {string}
- */
-function getTemplate() {
-	// language=HTML
-	return `
-        <template id="host-overlay">
-            <div data-monster-replace="path:host-overlay.content"
-                 data-monster-attributes="part path:host-overlay.name, data-monster-role path:host-container.overlay"></div>
-        </template>
-
-        <div data-monster-role="overlay-open" part="open"
-			 data-monster-attributes="class path:features.openButton | if:visible:hidden"></div>
-
-        <div id="overlay" data-monster-role="overlay" part="overlay" data-monster-insert="host-overlay path:overlay"
-             data-monster-attributes="class path:classes.overlay">
-            <div data-monster-role="overlay-close" part="close"></div>
-        </div>`;
-}
-
-registerCustomElement(Overlay);
+class Overlay extends NewOverlay {}