@schukai/monster 3.51.4 → 3.52.0

package/source/components/host/overlay.mjs

@@ -0,0 +1,339 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * 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";
+
+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.
+ *
+ * <img src="./images/overlay.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-overlay />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-overlay');` method.
+ *
+ * ```html
+ * <monster-overlay></monster-overlay>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-state/source/overlay.mjs';
+ * document.createElement('monster-overlay');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml overlay.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Overlay
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Host
+ * @summary A simple overlay component
+ * @fires Monster.Components.Host.Overlay.event:monster-overlay-before-open
+ * @fires Monster.Components.Host.Overlay.event:monster-overlay-open
+ * @fires Monster.Components.Host.Overlay.event:monster-overlay-before-close
+ * @fires Monster.Components.Host.Overlay.event:monster-overlay-closed
+ */
+class Overlay extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-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
+	 */
+	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,
+			},
+		});
+	}
+
+	/**
+	 * @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);
+		}
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Overlay}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Overlay}
+	 */
+	toggle() {
+		if (this[overlayElementSymbol].classList.contains("open")) {
+			this.close();
+		} else {
+			this.open();
+		}
+		return this;
+	}
+
+	/**
+	 * @returns {Monster.Components.Host.Overlay}
+	 * @fires Monster.Components.Host.Overlay.event:monster-overlay-before-open
+	 * @fires Monster.Components.Host.Overlay.event:monster-overlay-open
+	 * @fires Monster.Components.Host.Overlay.event:monster-overlay-before-close
+	 * @fires Monster.Components.Host.Overlay.event: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;
+	}
+
+	/**
+	 * @returns {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"></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);

package/source/components/host/style/call-button.pcss

@@ -0,0 +1,36 @@
+@import "../../style/normalize.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/link.pcss";
+
+[data-monster-role=control] {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    & a[data-monster-role=filter-button] {
+        display: flex;
+        align-items: center;
+
+        color: var(--monster-color-primary-1);
+        background: none;
+
+        &:after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+            margin: 2px 3px 0 5px;
+            padding-top: 4px;
+        }
+
+
+    }
+
+    &.hidden {
+        display: none;
+    }
+
+}

package/source/components/host/style/collapse.pcss

@@ -0,0 +1,67 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/ripple.pcss";
+
+
+[data-monster-role=control] {
+    @mixin paragraph;
+
+    &.overflow-hidden {
+        overflow: hidden;
+    }
+
+    & button {
+        border-top: 0;
+        border-left: 0;
+        border-right: 0;
+    }
+
+    & .button:hover {
+        @mixin box-hover;
+    }
+
+    & [data-monster-role="detail"] {
+        @mixin paragraph;
+        
+        height: 0;
+        transition: height 0.4s ease-in-out;
+        box-sizing: border-box;
+        width: 100%;
+
+        background-color: var(--monster-bg-color-primary-2);
+        color: var(--monster-color-primary-2);
+
+        & .padding {
+            padding: 1rem;
+        }
+
+        & .deco-line {
+            margin: 0;
+            border: 0;
+            padding: 0;
+            height: 2px;
+
+            background: linear-gradient(to right, var(--monster-color-gradient-1) 0, var(--monster-color-gradient-2) 50%, var(--monster-color-gradient-3) 100%);
+            @media (prefers-color-scheme: dark) {
+                background: var(--monster-color-primary-1);
+            }
+            
+            
+        }
+
+    }
+
+    & [data-monster-role="detail"].active {
+        height: var(--monster-height);
+    }
+
+
+}
+
+

package/source/components/host/style/config-manager.pcss

@@ -0,0 +1,5 @@
+[data-monster-role=control] {
+    display:none;
+}
+
+

package/source/components/host/style/details.pcss

@@ -0,0 +1,68 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/ripple.pcss";
+
+
+[data-monster-role=control] {
+
+    flex-direction: column;
+
+    /*
+    @mixin paragraph;
+
+
+    & button {
+        border-top: 0;
+        border-left: 0;
+        border-right: 0;
+    }
+
+    & .button:hover {
+        @mixin box-hover;
+    }
+
+    & [data-monster-role="detail"] {
+        @mixin paragraph;
+        height: 0;
+        transition: height 0.5s ease-in-out;
+        box-sizing: border-box;
+
+        background-color: var(--monster-bg-color-primary-2);
+        color: var(--monster-color-primary-2);
+
+        & .padding {
+            padding: 1rem;
+        }
+
+        & .deco-line {
+            margin: 0;
+            border: 0;
+            padding: 0;
+            height: 2px;
+
+            background: linear-gradient(to right, var(--monster-color-gradient-1) 0, var(--monster-color-gradient-2) 50%, var(--monster-color-gradient-3) 100%);
+            @media (prefers-color-scheme: dark) {
+                background: var(--monster-color-primary-1);
+            }
+
+
+        }
+
+
+    }
+
+    & [data-monster-role="detail"].active {
+        height: var(--monster-height);
+    }
+    */
+
+
+}
+
+

package/source/components/host/style/host.pcss

@@ -0,0 +1,43 @@
+@import "../../style/display.pcss";
+@import "../../style/normalize.pcss";
+@import "../../style/border.pcss";
+@import "../../style/form.pcss";
+@import "../../style/typography.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+
+[data-monster-role="control"] {
+    min-height: 100vh;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0;
+
+    display: flex;
+
+    flex-direction: column;
+    align-content: stretch;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+}
+
+[data-monster-role="header"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+    margin: 0 0 0 60px;
+}
+
+[data-monster-role="content"] {
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+[data-monster-role="footer"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

package/source/components/host/style/overlay.pcss

@@ -0,0 +1,73 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/form.pcss";
+@import "../../style/typography.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+
+
+/* prevent monster-reload from load */
+[data-monster-role=overlay].hide-empty {
+    display: none;
+}
+
+[data-monster-role=overlay] {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: var(--monster-z-index-offcanvas);
+    left: 0;
+    top: 0;
+    color: var(--monster-color-primary-2);
+    background-color: var(--monster-bg-color-primary-2);
+    overflow-x: hidden;
+    transition: 0.5s;
+}
+
+[data-monster-role=overlay] [data-monster-role=overlay-close] {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+}
+
+[data-monster-role=overlay] [data-monster-role=overlay-close]::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E");
+    background-color: var(--monster-color-primary-1);
+}
+
+[data-monster-role=overlay-open] {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+}
+
+[data-monster-role=overlay-open]::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    background-color: var(--monster-color-primary-1);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z'/%3E%3C/svg%3E");
+}
+
+[data-monster-role=overlay].open {
+    width: 100%;
+}
+

package/source/components/host/style/toggle-button.pcss

@@ -0,0 +1,36 @@
+@import "../../style/normalize.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/link.pcss";
+
+[data-monster-role=control] {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    & a[data-monster-role=filter-button] {
+        display: flex;
+        align-items: center;
+
+        color: var(--monster-color-primary-1);
+        background: none;
+
+        &:after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+            margin: 2px 3px 0 5px;
+            padding-top: 4px;
+        }
+
+
+    }
+
+    &.hidden {
+        display: none;
+    }
+
+}

package/source/components/host/style/viewer.pcss

@@ -0,0 +1,13 @@
+@import "../../style/normalize.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/link.pcss";
+
+
+[data-monster-role="viewer"] {
+    height: inherit;
+}