@schukai/monster 3.65.0 → 3.65.21

package/source/components/layout/tabs.mjs

@@ -1,9 +1,17 @@
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
  * Node module: @schukai/monster
- * This file is licensed under the AGPLv3 License.
- * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
  */
+
 import { instanceSymbol } from "../../constants.mjs";
 import { createPopper } from "@popperjs/core";
 import { extend } from "../../data/extend.mjs";
@@ -225,7 +233,7 @@ class Tabs extends CustomElement {
 					accept: "text/html",
 				},
 			},
-			
+
 			features: {
 				openDelay: null,
 			},
@@ -296,40 +304,47 @@ class Tabs extends CustomElement {
 
 	/**
 	 * A function that activates a tab based on the provided name.
-	 * 
+	 *
 	 * The tabs have to be named with the `data-monster-name` attribute.
 	 *
 	 * @param {type} idOrName - the name or id of the tab to activate
 	 * @return {Tabs} - The current instance
 	 */
 	activeTab(idOrName) {
-		
 		let found = false;
-		
+
 		getSlottedElements.call(this).forEach((node) => {
 			if (found === true) {
-				return
+				return;
 			}
-			
+
 			if (node.getAttribute("data-monster-name") === idOrName) {
-				this.shadowRoot.querySelector(`[data-monster-tab-reference="${node.getAttribute("id")}"]`).click();
+				this.shadowRoot
+					.querySelector(
+						`[data-monster-tab-reference="${node.getAttribute("id")}"]`,
+					)
+					.click();
 				found = true;
 			}
-			
+
 			if (node.getAttribute("id") === idOrName) {
-				this.shadowRoot.querySelector(`[data-monster-tab-reference="${node.getAttribute("id")}"]`).click();
+				this.shadowRoot
+					.querySelector(
+						`[data-monster-tab-reference="${node.getAttribute("id")}"]`,
+					)
+					.click();
 				found = true;
 			}
-		})
-		
-		return this
+		});
+
+		return this;
 	}
 
 	/**
 	 * A function that returns the name or id of the currently active tab.
-	 * 
+	 *
 	 * The tabs have to be named with the `data-monster-name` attribute.
-	 * 
+	 *
 	 * @returns {string|null}
 	 */
 	getActiveTab() {
@@ -338,8 +353,8 @@ class Tabs extends CustomElement {
 			if (node.matches(".active") === true) {
 				if (node.hasAttribute("data-monster-name")) {
 					return node.getAttribute("data-monster-name");
-				} 
-				
+				}
+
 				return node.getAttribute("id");
 			}
 		}
@@ -583,17 +598,17 @@ function show(element) {
 
 		if (id === reference) {
 			node.classList.add("active");
-			
+
 			const openDelay = parseInt(this.getOption("features.openDelay"), 10);
-			
-			if(!isNaN(openDelay) && openDelay>0) {
+
+			if (!isNaN(openDelay) && openDelay > 0) {
 				node.style.visibility = "hidden";
 
 				setTimeout(() => {
 					node.style.visibility = "visible";
 				}, openDelay);
-			} 
-			 
+			}
+
 			// get all data- from button and filter out data-monster-attributes and data-monster-insert
 			const data = {};
 			const mask = [

package/source/components/layout/width-toggle.mjs

@@ -1,22 +1,31 @@
 /**
- * Copyright 2023 schukai GmbH
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ *
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
-import {Observer} from "../../types/observer.mjs";
-import {WidthToggleStyleSheet} from "./stylesheet/width-toggle.mjs";
-import {instanceSymbol} from "../../constants.mjs";
-import {internalSymbol} from "../../constants.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { WidthToggleStyleSheet } from "./stylesheet/width-toggle.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { internalSymbol } from "../../constants.mjs";
 
-export {WidthToggle, MODE_SMALL, MODE_WIDE};
+export { WidthToggle, MODE_SMALL, MODE_WIDE };
 
 /**
  * @private
@@ -79,152 +88,153 @@ const MODE_WIDE = "wide";
  * @fires Monster.Components.Layout.event:monster-dimension-changed
  */
 class WidthToggle extends CustomElement {
-
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/layout/width-toggle@@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 {string} splitType Split type (vertical or horizontal)
-     * @property {string} dimension Dimension
-     * @property {string} dimension.initial Initial dimension of the start panel
-     * @property {string} dimension.max Maximum dimension of the start panel (in percentage)
-     * @property {string} dimension.min Minimum dimension of the start panel (in percentage)
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-            width: {
-                small: "40%",
-                wide: "95%",
-            },
-            default: MODE_SMALL,
-        });
-    }
-
-    /**
-     *
-     * @returns {Monster.Components.Host.Viewer}
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        applyContainerWidth.call(this, this.getOption("default"));
-
-    }
-
-    /**
-     * Check if the dimension is a percentage and within a valid range, then set the dimension option.
-     *
-     * @param {string} mode - The mode of the panel. Possible values are "wide" or "small".
-     * @return {Object} - Returns the current object instance for chaining.
-     * @throws {Error} - If the mode is not supported.
-     */
-    setWidth(mode) {
-        applyContainerWidth.call(this, mode);
-        return this;
-    }
-
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-width-toggle";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [WidthToggleStyleSheet];
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/layout/width-toggle@@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 {string} splitType Split type (vertical or horizontal)
+	 * @property {string} dimension Dimension
+	 * @property {string} dimension.initial Initial dimension of the start panel
+	 * @property {string} dimension.max Maximum dimension of the start panel (in percentage)
+	 * @property {string} dimension.min Minimum dimension of the start panel (in percentage)
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			width: {
+				small: "40%",
+				wide: "95%",
+			},
+			default: MODE_SMALL,
+		});
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Viewer}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		applyContainerWidth.call(this, this.getOption("default"));
+	}
+
+	/**
+	 * Check if the dimension is a percentage and within a valid range, then set the dimension option.
+	 *
+	 * @param {string} mode - The mode of the panel. Possible values are "wide" or "small".
+	 * @return {Object} - Returns the current object instance for chaining.
+	 * @throws {Error} - If the mode is not supported.
+	 */
+	setWidth(mode) {
+		applyContainerWidth.call(this, mode);
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-width-toggle";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [WidthToggleStyleSheet];
+	}
 }
 
-
 /**
  * Set the dimensions of the panel based on the split type.
  * @param {string} mode - The mode of the panel. Possible values are "wide" or "small".
  * @fires Monster.Components.Layout.event:monster-dimension-changed
  */
 function applyContainerWidth(mode) {
-
-    const width = this.getOption("width." + mode)
-    if (!width) {
-        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-        throw new Error("unsupported mode");
-    }
-
-    switch (mode) {
-        case MODE_SMALL:
-        case MODE_WIDE:
-
-            this[toggleElementSymbol].style.right = "calc( 50% - (" + width + " / 2) + 1rem)"
-            this[toggleElementSymbol].setAttribute("data-monster-state", mode);
-            this[insideElementSymbol].style.width = width;
-
-            fireCustomEvent(this, "monster-dimension-changed", {
-                controller: this,
-                dimension: width
-            });
-            break;
-
-        default:
-            const error = new Error("unsupported mode")
-            addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.message);
-            throw error;
-    }
-
+	const width = this.getOption("width." + mode);
+	if (!width) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		throw new Error("unsupported mode");
+	}
+
+	switch (mode) {
+		case MODE_SMALL:
+		case MODE_WIDE:
+			this[toggleElementSymbol].style.right =
+				"calc( 50% - (" + width + " / 2) + 1rem)";
+			this[toggleElementSymbol].setAttribute("data-monster-state", mode);
+			this[insideElementSymbol].style.width = width;
+
+			fireCustomEvent(this, "monster-dimension-changed", {
+				controller: this,
+				dimension: width,
+			});
+			break;
+
+		default:
+			const error = new Error("unsupported mode");
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.message);
+			throw error;
+	}
 }
 
-
 /**
  * @private
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    this[widthToggleElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=control]");
-    this[toggleElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=toggle]");
-    this[insideElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=inside]");
-
-
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[widthToggleElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+	this[toggleElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=toggle]",
+	);
+	this[insideElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=inside]",
+	);
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-    const self = this;
-
-    this[toggleElementSymbol].addEventListener("click", function () {
-        const mode = self[toggleElementSymbol].getAttribute("data-monster-state") === MODE_SMALL ? MODE_WIDE : MODE_SMALL;
-        applyContainerWidth.call(self, mode);
-    });
-
-
-    return this;
-
+	const self = this;
+
+	this[toggleElementSymbol].addEventListener("click", function () {
+		const mode =
+			self[toggleElementSymbol].getAttribute("data-monster-state") ===
+			MODE_SMALL
+				? MODE_WIDE
+				: MODE_SMALL;
+		applyContainerWidth.call(self, mode);
+	});
+
+	return this;
 }
 
 /**
@@ -232,8 +242,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <div part="container" data-monster-role="container">
                 <div part="toggle" data-monster-role="toggle" data-monster-state="wide"></div>

package/source/components/navigation/style/table-of-content.pcss

@@ -9,15 +9,23 @@
 }
 
 .navigation {
+    
+    &.left {
+        left: 0;
+    }
+    
+    &.right {
+        right: 40px;
+    }
 
     box-sizing: border-box;
     position: absolute;
     top: 0;
     display: block;
-    cursor: pointer;
-    width: 20px;
+    cursor: pointer; 
+    width: 20px; 
     
-    transition: top 0.2s ease, visibility 0.1s ease;
+    transition: top 0.2s ease, visibility 0.3s ease;
 
     & [data-monster-role="navigation-list"] {
 
@@ -42,6 +50,13 @@
             border-left: 1px dotted var(--monster-color-primary-2); 
             margin-top: 0;
         }
+        
+        & div.footer {
+            display: flex;
+            gap: 5px;
+            padding: 5px 0;
+        }
+        
     }
     
     & [data-monster-role=navigation-control] {
@@ -52,8 +67,8 @@
         display: flex;
         height: 0;
         
-        background-color: var(--monster-bg-color-primary-3);
-        margin-bottom: 10px;
+        background-color: var(--monster-color-primary-1);
+        margin-bottom: 3px;
 
         &.level-h1 {
             height: 6px;