@schukai/monster 3.58.4 → 3.59.0

package/source/components/host/overlay.mjs

@@ -106,7 +106,7 @@ class Overlay extends CustomElement {
 	 * @returns {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/component-host/overlay@@instance");
+		return Symbol.for("@schukai/monster/components/host/overlay@@instance");
 	}
 
 	/**

package/source/components/host/viewer.mjs

@@ -39,18 +39,10 @@ const viewerElementSymbol = Symbol("viewerElement");
  * Or you can create this CustomControl directly in Javascript:
  *
  * ```js
- * import '@schukai/component-state/source/viewer.mjs';
+ * import '@schukai/monster/components/host/viewer.mjs';
  * document.createElement('monster-viewer');
  * ```
  *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
  * @startuml viewer.png
  * skinparam monochrome true
  * skinparam shadowing false
@@ -62,10 +54,6 @@ const viewerElementSymbol = Symbol("viewerElement");
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Host
  * @summary A simple viewer component
- * @fires Monster.Components.Host.Viewer.event:monster-viewer-before-open
- * @fires Monster.Components.Host.Viewer.event:monster-viewer-open
- * @fires Monster.Components.Host.Viewer.event:monster-viewer-before-close
- * @fires Monster.Components.Host.Viewer.event:monster-viewer-closed
  */
 class Viewer extends CustomElement {
 	/**
@@ -73,7 +61,7 @@ class Viewer extends CustomElement {
 	 * @returns {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/component-host/viewer@@instance");
+		return Symbol.for("@schukai/monster/components/host/viewer@@instance");
 	}
 
 	/**

package/source/components/layout/namespace.mjs

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * Namespace for all layout related functions.
+ *
+ * @namespace Monster.Components.Layout
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};

package/source/components/layout/split-screen.mjs

@@ -0,0 +1,341 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+    assembleMethodSymbol,
+    CustomElement,
+    registerCustomElement,
+} from "../../dom/customelement.mjs";
+import "../notify/notify.mjs";
+import {Observer} from "../../types/observer.mjs";
+import {SplitScreenStyleSheet} from "./stylesheet/split-screen.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {internalSymbol} from "../../constants.mjs";
+
+export {SplitScreen, TYPE_VERTICAL, TYPE_HORIZONTAL};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const splitScreenElementSymbol = Symbol("splitScreenElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const draggerElementSymbol = Symbol("draggerElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const startPanelElementSymbol = Symbol("startPanelElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const endPanelElementSymbol = Symbol("endPanelElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const handleElementSymbol = Symbol("handleElement");
+
+/**
+ * 
+ * @type {string}
+ */
+const TYPE_VERTICAL = "vertical";
+/**
+ * 
+ * @type {string}
+ */
+const TYPE_HORIZONTAL = "horizontal";
+
+
+/**
+ * The Viewer component is used to show a PDF, HTML or Image.
+ *
+ * <img src="./images/splitscreen.png">
+ *
+ * You can create this control either by specifying the HTML tag <monster-splitscreen />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-split-screen');` method.
+ *
+ * ```html
+ * <monster-split-screen></monster-split-screen>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/monster/components/layout/split-screen.mjs';
+ * document.createElement('monster-split-screen');
+ * ```
+ *
+ * @startuml splitscreen.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- SplitScreen
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Layout
+ * @summary A simple split screen layout
+ */
+class SplitScreen extends CustomElement {
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/layout/splitscreen");
+    }
+
+    /**
+     * 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} classes Css classes
+     * @property {Object} features Feature definitions
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            splitType: TYPE_VERTICAL,
+            dimension: "20%",
+            classes: {},
+            features: {},
+        });
+    }
+
+    setContent(html) {
+        this.setOption("content", html);
+        return this;
+    }
+
+    /**
+     *
+     * @returns {Monster.Components.Host.Viewer}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+        applyPanelDimensions.call(this);
+    }
+
+    setDimension(dimension) {
+        // check if percent and greater than100
+        if (dimension.includes("%")) {
+            if (parseInt(dimension) > 100) {
+                throw new Error("dimension must be less than 100%");
+            } else if (parseInt(dimension) < 0) {
+                throw new Error("dimension must be greater than 0%");
+            }
+        }
+
+        this.setOption("dimension", dimension);
+        return this;
+    }
+
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-split-screen";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [SplitScreenStyleSheet];
+    }
+}
+
+
+/**
+ * Set the dimensions of the panel based on the split type.
+ */
+function applyPanelDimensions() {
+
+    const splitType = this.getOption("splitType");
+    const dimension = this.getOption("dimension");
+
+    if (splitType === TYPE_VERTICAL) {
+        this[startPanelElementSymbol].style.width = dimension;
+        this[endPanelElementSymbol].style.width = `calc(100% - ${dimension} - 5px)`;
+        this[draggerElementSymbol].style.cursor = "ew-resize";
+        this[splitScreenElementSymbol].classList.add("vertical");
+        this[splitScreenElementSymbol].classList.remove("horizontal");
+
+    } else {
+        this[startPanelElementSymbol].style.height = dimension;
+        this[endPanelElementSymbol].style.height = `calc(100% - ${dimension} - 5px)`;
+        this[draggerElementSymbol].style.cursor = "ns-resize";
+        this[splitScreenElementSymbol].classList.add("horizontal");
+        this[splitScreenElementSymbol].classList.remove("vertical");
+
+    }
+}
+
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
+
+    this[splitScreenElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=split-screen]");
+    this[draggerElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=dragger]");
+    this[handleElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=handle]");
+
+    this[startPanelElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=startPanel]");
+    this[endPanelElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=endPanel]");
+
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+    const self = this;
+
+    this[internalSymbol].getSubject().isDragging = false;
+
+    this[draggerElementSymbol].addEventListener('dblclick', () => {
+        self[internalSymbol].getSubject().isDragging = false;
+        applyPanelDimensions.call(this);
+    });
+
+    const resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+            console.log(entry.contentRect.width);
+        }
+    });
+
+    resizeObserver.observe(this[splitScreenElementSymbol]);
+
+
+    this[draggerElementSymbol].addEventListener('mousedown', () => {
+        self[internalSymbol].getSubject().isDragging = true;
+
+        document.addEventListener('mousemove', (e) => {
+            e.preventDefault();
+            if (!self[internalSymbol].getSubject().isDragging) {
+                return;
+            }
+
+            if (self.getOption("splitType") === TYPE_HORIZONTAL) {
+                const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
+                const topPanel = self[startPanelElementSymbol];
+                const bottomPanel = self[endPanelElementSymbol];
+                const newTopHeight = e.clientY - containerOffsetTop;
+                topPanel.style.height = `${newTopHeight}px`;
+                bottomPanel.style.height = `calc(100% - ${newTopHeight}px - 5px)`; // 5px is dragger height
+
+
+            } else {
+
+                const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
+                const leftPanel = self[startPanelElementSymbol];
+                const rightPanel = self[endPanelElementSymbol];
+                const newLeftWidth = e.clientX - containerOffsetLeft;
+                leftPanel.style.width = `${newLeftWidth}px`;
+                rightPanel.style.width = `calc(100% - ${newLeftWidth}px - 5px)`; // 5px is dragger width
+            }
+
+        });
+
+        document.addEventListener('mouseup', (e) => {
+            self[internalSymbol].getSubject().isDragging = false;
+            document.removeEventListener('mousemove', (e) => {
+                if (!self[internalSymbol].getSubject().isDragging) {
+                    return;
+                }
+
+                if (self.getOption("splitType") === TYPE_VERTICAL) {
+                    const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
+                    const topPanel = self[startPanelElementSymbol];
+                    const bottomPanel = self[endPanelElementSymbol];
+                    const newTopHeight = e.clientY - containerOffsetTop;
+                    topPanel.style.height = `${newTopHeight}px`;
+                    bottomPanel.style.height = `calc(100% - ${newTopHeight}px - 5px)`; // 5px is dragger height
+
+                } else {
+                    const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
+                    const newLeftWidth = e.clientX - containerOffsetLeft;
+                    const leftPanel = self[startPanelElementSymbol];
+                    const rightPanel = self[endPanelElementSymbol];
+                    leftPanel.style.width = `${newLeftWidth}px`;
+                    rightPanel.style.width = `calc(100% - ${newLeftWidth}px - 5px)`; // 5px is dragger width
+                }
+            });
+            document.removeEventListener('mouseup', (e) => {
+                self[internalSymbol].getSubject().isDragging = false;
+            });
+        });
+    });
+
+    let lastDimension = this.getOption("dimension");
+    let lastType = this.getOption("splitType");
+    this[internalSymbol].attachObserver(
+        new Observer(() => {
+            if (lastDimension !== this.getOption("dimension")) {
+                lastDimension = this.getOption("dimension");
+                applyPanelDimensions.call(this);
+            }
+
+            if (lastType !== this.getOption("splitType")) {
+                lastType = this.getOption("splitType");
+                applyPanelDimensions.call(this);
+            }
+
+        }));
+
+
+    return this;
+
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `
+        <div data-monster-role="split-screen" part="container">
+            <div data-monster-role="startPanel" class="panel" part="startPanel">
+                <slot name="start"></slot>
+            </div>
+            <div data-monster-role="dragger" part="dragger">
+                <div data-monster-role="handle"></div>
+            </div>
+            <div data-monster-role="endPanel" class="panel" part="endPanel">
+                <slot name="end"></slot>
+            </div>
+
+
+        </div>`;
+}
+
+registerCustomElement(SplitScreen);

package/source/components/layout/style/split-screen.pcss

@@ -0,0 +1,59 @@
+
+
+[data-monster-role="split-screen"] {
+
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    height: auto;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+
+    & .panel {
+        flex-grow: 1;
+        overflow: auto;
+    }
+
+    [data-monster-role="dragger"] {
+        background-color: var(--monster-bg-color-primary-4);
+        color: var(--monster-color-primary-4);
+        width: var(--monster-border-width);
+        height: auto;
+        
+        position: relative;
+        
+        & [data-monster-role=handle] {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+            width: 5px;
+            height: 120px;
+            background-color: var(--monster-bg-color-primary-3);
+            color: var(--monster-color-primary-3);
+            z-index: var(--monster-z-index-outline);
+        }
+    }
+
+    &.horizontal {
+        flex-direction: column;
+
+        [data-monster-role="dragger"] {
+            width: 100%;
+            height: var(--monster-border-width);
+            
+            & [data-monster-role=handle] {
+                width: 120px;
+                height: 5px;
+            }
+            
+        }
+
+
+    }
+
+}
+
+

package/source/components/{form → layout}/style/tabs.pcss

@@ -27,9 +27,6 @@ nav[data-monster-role=nav] {
     border-bottom-style: var(--monster-border-style);
     box-shadow: var(--monster-box-shadow-1);
     border-color: var(--monster-bg-color-primary-2);    
-    
-    flex-wrap: nowrap;
-    
 }
 
 [data-monster-role=nav] button .remove-tab {

package/source/components/layout/stylesheet/split-screen.mjs

@@ -0,0 +1,27 @@
+
+/**
+ * Copyright schukai GmbH and contributors 2024. 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
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {SplitScreenStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const SplitScreenStyleSheet = new CSSStyleSheet();
+
+try {
+  SplitScreenStyleSheet.insertRule(`
+@layer splitscreen { 
+[data-monster-role=split-screen]{box-sizing:border-box;display:flex;flex-direction:row;height:auto;margin:0;padding:0;width:100%}[data-monster-role=split-screen] .panel{flex-grow:1;overflow:auto}[data-monster-role=split-screen] [data-monster-role=dragger]{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);height:auto;position:relative;width:var(--monster-border-width)}[data-monster-role=split-screen] [data-monster-role=dragger] [data-monster-role=handle]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:pointer;height:120px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px;z-index:var(--monster-z-index-outline)}.horizontal[data-monster-role=split-screen]{flex-direction:column}.horizontal[data-monster-role=split-screen] [data-monster-role=dragger]{height:var(--monster-border-width);width:100%}.horizontal[data-monster-role=split-screen] [data-monster-role=dragger] [data-monster-role=handle]{height:5px;width:120px} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}