@schukai/monster 3.115.4 → 3.116.0

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 {}