@schukai/monster 3.63.3 → 3.64.1

package/source/components/form/stylesheet/tree-select.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/host/stylesheet/call-button.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/host/stylesheet/collapse.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/host/stylesheet/config-manager.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/host/stylesheet/details.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/host/stylesheet/host.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/host/stylesheet/overlay.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/host/stylesheet/toggle-button.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/host/stylesheet/viewer.mjs

@@ -1,9 +1,13 @@
-
 /**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Copyright © schukai GmbH and all contributing authors, 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
+ *
+ * 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.
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";

package/source/components/layout/panel.mjs

@@ -0,0 +1,277 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+    assembleMethodSymbol,
+    CustomElement,
+    registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
+
+import {PanelStyleSheet} from "./stylesheet/panel.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+
+export {Panel};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const PanelElementSymbol = Symbol("PanelElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerCallbackSymbol = Symbol("timerCallback");
+
+/**
+ * The Panel component is used to display a panel, isn't that cool?
+ *
+ * <img src="./images/panel.png">
+ *
+ * You can create this control either by specifying the HTML tag <monster-panel />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-panel');` method.
+ *
+ * ```html
+ * <monster-panel></monster-panel>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/monster/components/layout/panel.mjs';
+ * document.createElement('monster-panel');
+ * ```
+ *
+ * @startuml panel.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Panel
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Layout
+ * @summary A simple panel component
+ */
+class Panel extends CustomElement {
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/layout/panel");
+    }
+
+    /**
+     * 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} heightAdjustment Height adjustment
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            heightAdjustment: 4,
+        });
+    }
+
+    /**
+     *
+     * @returns {Monster.Components.Host.Viewer}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+
+        calcHeight.call(this);
+
+    }
+
+    /**
+     * This method is called by the dom and should not be called directly.
+     *
+     * @return {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        attachResizeObserver.call(this);
+        
+         // disable scrolling in parent node
+        if (this.parentNode && this.parentNode instanceof HTMLElement) {
+            this.parentNode.style.overflow = "hidden";
+        }
+        
+    }
+
+    /**
+     * This method is called by the dom and should not be called directly.
+     *
+     * @return {void}
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        disconnectResizeObserver.call(this);
+    }
+
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-panel";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [PanelStyleSheet];
+    }
+}
+
+/**
+ * @private
+ */
+function calcHeight() {
+
+    this.style.boxSizing = "border-box";
+
+    const height = calculateMaximumHeight.call(this, this);
+    if (height < 0) {
+        return;
+    }
+
+    this.style.height = `${height}px`;
+
+}
+
+function calculateMaximumHeight(element) {
+    let totalBottomBorder = 0;
+    let totalBottomPadding = 0;
+    let totalBottomMargin = 0;
+    let totalOutlineHeight = 0;
+    let totalBoxShadowHeight = 0;
+    let currentElement = element;
+
+    // Get the distance from the top of the element to the top of the viewport
+    const distanceFromTop = element.getBoundingClientRect().top;
+
+    // Loop through the elements up to the body to sum up the bottom borders, padding, and margin
+    while (currentElement && currentElement !== document.body) {
+        const style = window.getComputedStyle(currentElement);
+
+        // Box sizing
+        const boxSizing = style.boxSizing;
+
+        // Borders, padding, and margin
+        const borderBottomWidth = parseFloat(style.borderBottomWidth);
+        const paddingBottom = parseFloat(style.paddingBottom);
+        const marginBottom = parseFloat(style.marginBottom);
+
+        // Outline and box-shadow
+        const outlineHeight = parseFloat(style.outlineWidth);
+        // This is a simplification; box-shadow is more complex to parse
+        const boxShadowVertical = parseFloat(style.boxShadow.split(' ')[3] || 0);
+
+        // Accumulate values
+        totalBottomBorder += isNaN(borderBottomWidth) ? 0 : borderBottomWidth;
+        totalBottomPadding += (isNaN(paddingBottom) || boxSizing === 'border-box') ? 0 : paddingBottom;
+        totalBottomMargin += isNaN(marginBottom) ? 0 : marginBottom;
+        totalOutlineHeight += isNaN(outlineHeight) ? 0 : outlineHeight;
+        totalBoxShadowHeight += isNaN(boxShadowVertical) ? 0 : boxShadowVertical;
+
+        currentElement = currentElement.parentNode || currentElement.host;
+    }
+
+    // Calculate the maximum height by subtracting the distance, borders, padding, margin, outline, and box-shadow from the window's inner height
+    const maximumHeight = window.innerHeight - distanceFromTop - totalBottomBorder - totalBottomPadding - totalBottomMargin - totalOutlineHeight - totalBoxShadowHeight;
+    return maximumHeight + this.getOption("heightAdjustment");
+}
+
+
+/**
+ * @private
+ */
+function attachResizeObserver() {
+    // against flickering
+    this[resizeObserverSymbol] = new ResizeObserver(() => {
+        if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+            try {
+                this[timerCallbackSymbol].touch();
+                return;
+            } catch (e) {
+                delete this[timerCallbackSymbol];
+            }
+        }
+
+        this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+            calcHeight.call(this);
+        });
+    });
+
+    this[resizeObserverSymbol].observe(this.ownerDocument.body);
+    this[resizeObserverSymbol].observe(document.scrollingElement);
+
+}
+
+function disconnectResizeObserver() {
+    if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+        this[resizeObserverSymbol].disconnect();
+    }
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
+
+    this[PanelElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=control]");
+
+
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+    return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `
+        <div data-monster-role="control" part="control">
+            <slot></slot>
+        </div>`;
+}
+
+registerCustomElement(Panel);