@schukai/monster 3.64.0 → 3.65.0

package/source/components/layout/popper.mjs

@@ -0,0 +1,476 @@
+/**
+ * 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.
+ */
+import {instanceSymbol} from "../../constants.mjs";
+import {
+    addAttributeToken,
+    removeAttributeToken,
+} from "../../dom/attributes.mjs";
+import {ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
+import {
+    assembleMethodSymbol,
+    registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
+import {getDocument} from "../../dom/util.mjs";
+import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
+import {Button} from "../form/button.mjs";
+import {STYLE_DISPLAY_MODE_BLOCK} from "../form/constants.mjs";
+import {positionPopper} from "../form/util/floating-ui.mjs";
+import {CustomControl} from "../../dom/customcontrol.mjs";
+import {PopperStyleSheet} from "./stylesheet/popper.mjs";
+import {isArray} from "../../types/is.mjs";
+
+export {Popper};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerCallbackSymbol = Symbol("timerCallback");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const closeEventHandler = Symbol("closeEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const buttonElementSymbol = Symbol("buttonElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const popperElementSymbol = Symbol("popperElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const arrowElementSymbol = Symbol("arrowElement");
+
+/**
+ * This action callback executes the actions when a button is clicked.
+ *
+ * @callback Monster.Components.Form~exampleActionCallback
+ * @param {Event} e Event
+ * @memberOf Monster.Components.Form
+ * @this {CustomControl}
+ */
+
+/**
+ * A Popper is a floating UI element that can be shown or hidden.
+ *
+ * @fragments /fragments/components/layout/popper/
+ *
+ * @example /examples/components/layout/popper-simple
+ * @example /examples/components/layout/popper-click
+ *
+ * @since 1.66.0
+ * @copyright schukai GmbH
+ * @summary A beautiful popper that can make your life easier and also looks good.
+ * @fires monster-popper-hide fired when the popper is hide.
+ * @fires monster-popper-hidden fired when the popper is hidden.
+ * @fires monster-popper-open fired when the popper is open.
+ * @fires monster-popper-opened fired when the popper is opened.
+ *
+ */
+class Popper extends CustomControl {
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/layout/popper@@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 The templates for the control.
+     * @property {string} templates.main The main template.
+     * @property {string} mode The mode of the popper. Possible values are `click`, `enter`, `manual`, `focus`, "auto" or a combination of them.
+     * @property {string} content The content of the popper.
+     * @property {object} popper The popper options.
+     * @property {string} popper.placement The placement of the popper. Possible values are `top`, `bottom`, `left` and `right`.
+     * @property {function[]} popper.middleware The middleware functions of the popper.
+     * @property {function[]} popper.middlewareInit The middleware init functions of the popper.
+     * @property {Object} features The features of the popper.
+     * @property {boolean} features.preventPropagateOpenEvents Prevents the open event from being sent.
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            mode: "auto focus",
+            content: "<slot></slot>",
+            popper: {
+                placement: "top",
+                middleware: ["autoPlacement", "offset:10", "arrow"],
+            },
+            features: {
+                preventOpenEventSent: false,
+            },
+        });
+    }
+
+    /**
+     *
+     * @return {Popper}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+
+        return this;
+    }
+
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-popper";
+    }
+
+    /**
+     * @return {Array<CSSStyleSheet>}
+     */
+    static getCSSStyleSheet() {
+        return [PopperStyleSheet];
+    }
+
+    /**
+     * @return {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+
+        const document = getDocument();
+
+        for (const [, type] of Object.entries(["click", "touch"])) {
+            // close on outside ui-events
+            document.addEventListener(type, this[closeEventHandler]);
+        }
+
+        updatePopper.call(this);
+        attachResizeObserver.call(this);
+    }
+
+    /**
+     * @return {void}
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+
+        // close on outside ui-events
+        for (const [, type] of Object.entries(["click", "touch"])) {
+            document.removeEventListener(type, this[closeEventHandler]);
+        }
+
+        disconnectResizeObserver.call(this);
+    }
+
+    /**
+     * @return {Popper}
+     */
+    showDialog() {
+        show.call(this);
+        return this;
+    }
+
+    /**
+     * @return {Popper}
+     */
+    hideDialog() {
+        hide.call(this);
+        return this;
+    }
+
+    /**
+     * @return {Popper}
+     */
+    toggleDialog() {
+        if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+            this.hideDialog();
+        } else {
+            this.showDialog();
+        }
+        return this;
+    }
+}
+
+/**
+ * @private
+ * @return {Popper}
+ */
+function initEventHandler() {
+    this[closeEventHandler] = (event) => {
+        const path = event.composedPath();
+
+        for (const [, element] of Object.entries(path)) {
+            if (element === this) {
+                return;
+            }
+        }
+        hide.call(this);
+    };
+
+    let modes = null;
+    const modeOption = this.getOption("mode");
+    
+    if (typeof modeOption === "string") {
+        modes = modeOption.split(" ");
+    }
+
+    if (
+        modes === null ||
+        modes === undefined ||
+        isArray(modes) === false ||
+        modes.length === 0
+    ) {
+        modes = ["manual"];
+    }
+
+    for (const [, mode] of Object.entries(modes)) {
+        initEventHandlerByMode.call(this, mode);
+    }
+
+    return this;
+}
+
+/**
+ * @private
+ * @param mode
+ * @return {Popper}
+ * @throws Error
+ */
+function initEventHandlerByMode(mode) {
+    switch (mode) {
+        case "manual":
+            break;
+
+        case "focus":
+            this[buttonElementSymbol].addEventListener("focus", (event) => {
+                if (this.getOption("features.preventOpenEventSent") === true) {
+                    event.preventDefault();
+                }
+                this.showDialog();
+            });
+            this[buttonElementSymbol].addEventListener("blur", (event) => {
+                if (this.getOption("features.preventOpenEventSent") === true) {
+                    event.preventDefault();
+                }
+                this.hideDialog();
+            });
+            break;
+
+        case "click":
+            this[buttonElementSymbol].addEventListener("click", (event) => {
+                if (this.getOption("features.preventOpenEventSent") === true) {
+                    event.preventDefault();
+                }
+                this.toggleDialog();
+            });
+            break;
+        case "enter":
+            this[buttonElementSymbol].addEventListener("mouseenter", (event) => {
+                if (this.getOption("features.preventOpenEventSent") === true) {
+                    event.preventDefault();
+                }
+                this.showDialog();
+            });
+            break;
+
+        case "auto": // is hover
+            this[buttonElementSymbol].addEventListener("mouseenter", (event) => {
+                if (this.getOption("features.preventOpenEventSent") === true) {
+                    event.preventDefault();
+                }
+                this.showDialog();
+            });
+            this[buttonElementSymbol].addEventListener("mouseleave", (event) => {
+                if (this.getOption("features.preventOpenEventSent") === true) {
+                    event.preventDefault();
+                }
+                this.hideDialog();
+            });
+            break;
+        default:
+            throw new Error(`Unknown mode ${mode}`);
+    }
+}
+
+/**
+ * @private
+ */
+function attachResizeObserver() {
+    // against flickering
+    this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+        if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+            try {
+                this[timerCallbackSymbol].touch();
+                return;
+            } catch (e) {
+                delete this[timerCallbackSymbol];
+            }
+        }
+
+        this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+            updatePopper.call(this);
+        });
+    });
+
+    this[resizeObserverSymbol].observe(this.parentElement);
+}
+
+function disconnectResizeObserver() {
+    if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+        this[resizeObserverSymbol].disconnect();
+    }
+}
+
+/**
+ * @private
+ */
+function hide() {
+    const self = this;
+
+    fireCustomEvent(self, "monster-popper-hide", {
+        self,
+    });
+
+    self[popperElementSymbol].style.display = "none";
+    removeAttributeToken(self[controlElementSymbol], "class", "open");
+
+    setTimeout(() => {
+        fireCustomEvent(self, "monster-popper-hidden", {
+            self,
+        });
+    }, 0);
+}
+
+/**
+ * @private
+ * @this PopperButton
+ */
+function show() {
+    const self = this;
+
+    if (self.getOption("disabled", false) === true) {
+        return;
+    }
+
+    if (self[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+        return;
+    }
+
+    fireCustomEvent(self, "monster-popper-open", {
+        self,
+    });
+
+    self[popperElementSymbol].style.visibility = "hidden";
+    self[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+
+    addAttributeToken(self[controlElementSymbol], "class", "open");
+    updatePopper.call(self);
+
+    setTimeout(() => {
+        fireCustomEvent(self, "monster-popper-opened", {
+            self,
+        });
+    }, 0);
+}
+
+/**
+ * @private
+ */
+function updatePopper() {
+    if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+        return;
+    }
+
+    if (this.getOption("disabled", false) === true) {
+        return;
+    }
+
+    positionPopper.call(
+        this,
+        this[controlElementSymbol],
+        this[popperElementSymbol],
+        this.getOption("popper", {}),
+    );
+}
+
+/**
+ * @private
+ * @return {Popper}
+ */
+function initControlReferences() {
+    this[controlElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=control]`,
+    );
+    this[buttonElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=button]`,
+    );
+    this[popperElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=popper]`,
+    );
+    this[arrowElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=arrow]`,
+    );
+    return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `
+        <div data-monster-role="control" part="control">
+            <slot name="button" data-monster-role="button"></slot>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div data-monster-role="arrow"></div>
+                <div part="content" class="flex" data-monster-replace="path:content">
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+registerCustomElement(Popper);

package/source/components/{host → layout}/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 → layout}/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/layout/stylesheet/panel.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/{form → layout}/stylesheet/popper.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/stylesheet/split-panel.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/stylesheet/tabs.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/stylesheet/width-toggle.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/tabs.mjs

@@ -585,15 +585,15 @@ function show(element) {
 			node.classList.add("active");
 			
 			const openDelay = parseInt(this.getOption("features.openDelay"), 10);
-			console.log(openDelay)
+			
 			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

@@ -51,8 +51,8 @@ const MODE_WIDE = "wide";
  *
  * <img src="./images/widthToggle.png">
  *
- * You can create this control either by specifying the HTML tag <monster-WidthToggle />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-split-screen');` method.
+ * You can create this control either by specifying the HTML tag <monster-width-toggle />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-width-toggle');` method.
  *
  * ```html
  * <monster-width-toggle></monster-width-toggle>
@@ -85,7 +85,7 @@ class WidthToggle extends CustomElement {
      * @returns {symbol}
      */
     static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/layout/WidthToggle");
+        return Symbol.for("@schukai/monster/components/layout/width-toggle@@instance");
     }
 
     /**