@schukai/monster 3.63.2 → 3.63.3

package/CHANGELOG.md

@@ -1,4 +1,15 @@
 
+## [3.63.3] - 2024-04-01
+
+### Bug Fixes
+
+- include state-button [#183](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/183)
+### Changes
+
+- update devenv
+- update issue templates
+- update template and create showroom section
+
 ## [3.63.2] - 2024-03-28
 
 ### Bug Fixes
@@ -6,6 +17,7 @@
 - colors and more, add igrnore change to savebutton [#181](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/181) [#180](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/180)
 ### Changes
 
+- release and publish to npm new version 3.63.2
 - reorganize playground
 
 ## [3.63.1] - 2024-03-27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.63.2",
+  "version": "3.63.3",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/components/datatable/change-button.mjs

@@ -4,7 +4,6 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { diff } from "../../data/diff.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import {
@@ -12,10 +11,9 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { isString, isArray } from "../../types/is.mjs";
-import { Observer } from "../../types/observer.mjs";
-import { clone } from "../../util/clone.mjs";
+import { isString } from "../../types/is.mjs";
 import { State } from "../form/types/state.mjs";
+import  "../form/state-button.mjs";
 import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
 import { ChangeButtonStyleSheet } from "./stylesheet/change-button.mjs";
 
@@ -38,6 +36,47 @@ const datasetLinkedElementSymbol = Symbol("datasetLinkedElement");
  */
 const overlayLinkedElementSymbol = Symbol("overlayLinkedElement");
 
+
+
+/**
+ * The ColumnBar component is used to show and configure the columns of a datatable.
+ *
+ * <img src="./images/change-button.png">
+ *
+ * You can create this control either by specifying the HTML tag <monster-datatable-change-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-datatable-change-button');` method.
+ *
+ * ```html
+ * <monster-datatable-change-button></monster-datatable-change-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/monster/components/datatable/change-button.mjs';
+ * document.createElement('monster-datatable-change-button');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the 
+ * styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml change-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- ChangeButton
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A data set
+ */
 class ChangeButton extends CustomElement {
 	/**
 	 * This method is called by the `instanceof` operator.

package/source/components/datatable/columnbar.mjs

@@ -51,8 +51,6 @@ const popperInstanceSymbol = Symbol("popperInstance");
  *
  * <img src="./images/column-bar.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-column-bar />` directly in the HTML or using
  * Javascript via the `document.createElement('monster-column-bar');` method.
  *
@@ -63,7 +61,7 @@ const popperInstanceSymbol = Symbol("popperInstance");
  * Or you can create this CustomControl directly in Javascript:
  *
  * ```js
- * import '@schukai/component-datatable/source/columnbar.mjs';
+ * import '@schukai/monster/components/datatable/column-bar.mjs';
  * document.createElement('monster-column-bar');
  * ```
  *

package/source/components/layout/style/width-toggle.pcss

@@ -10,17 +10,34 @@
     background-size: cover;
     width: 1rem;
     height: 1rem;
+    position: absolute;
+    right: 0;
+    top: -1rem;
+    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%3C/svg%3E");
+    cursor: pointer;
+    transition: right 0.5s ease-in-out;
 }
 
 [data-monster-role="toggle"][data-monster-state="wide"] {
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrows-angle-contract' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E")
+    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 fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E")
 }
 
 [data-monster-role="toggle"][data-monster-state="small"] {
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrows-angle-expand' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3E%3C/svg%3E");
+    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 fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3E%3C/svg%3E");
 }
 
-[data-monster-role="container"] {
+[data-monster-role=container] {
     box-sizing: border-box;
-    transition: width 0.5s ease-in-out;
-}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    
+    & [data-monster-role="inside"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: width 0.5s ease-in-out;
+    }
+    
+}

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

@@ -20,7 +20,7 @@ const WidthToggleStyleSheet = new CSSStyleSheet();
 try {
   WidthToggleStyleSheet.insertRule(`
 @layer widthtoggle { 
- 
+[data-monster-role=toggle]{background-color:var(--monster-bg-color-primary-4);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;height:1rem;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'/%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'/%3E\");position:absolute;right:0;top:-1rem;transition:right .5s ease-in-out;width:1rem}[data-monster-role=toggle][data-monster-state=wide]{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E\")}[data-monster-role=toggle][data-monster-state=small]{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3E%3C/svg%3E\")}[data-monster-role=container]{align-items:center;box-sizing:border-box;display:flex;justify-content:center;position:relative}[data-monster-role=container] [data-monster-role=inside]{align-items:center;display:flex;justify-content:center;transition:width .5s ease-in-out} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

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

@@ -3,19 +3,20 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
+import {addAttributeToken} from "../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
 import {
     assembleMethodSymbol,
     CustomElement,
     registerCustomElement,
 } from "../../dom/customelement.mjs";
-import "../notify/notify.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, TYPE_VERTICAL, TYPE_HORIZONTAL};
+export {WidthToggle, MODE_SMALL, MODE_WIDE};
 
 /**
  * @private
@@ -28,6 +29,22 @@ const widthToggleElementSymbol = Symbol("WidthToggleElement");
  * @type {symbol}
  */
 const toggleElementSymbol = Symbol("toggleElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const insideElementSymbol = Symbol("insideElement");
+
+/**
+ *
+ * @type {string}
+ */
+const MODE_SMALL = "small";
+/**
+ *
+ * @type {string}
+ */
+const MODE_WIDE = "wide";
 
 /**
  * The WidthToggle component is used to change the width of a panel.
@@ -38,14 +55,14 @@ const toggleElementSymbol = Symbol("toggleElement");
  * Javascript via the `document.createElement('monster-split-screen');` method.
  *
  * ```html
- * <monster-split-screen></monster-split-screen>
+ * <monster-width-toggle></monster-width-toggle>
  * ```
  *
  * Or you can create this CustomControl directly in Javascript:
  *
  * ```js
- * import '@schukai/monster/components/layout/split-screen.mjs';
- * document.createElement('monster-split-screen');
+ * import '@schukai/monster/components/layout/width-toggle.mjs';
+ * document.createElement('monster-width-toggle');
  * ```
  *
  * @startuml widthToggle.png
@@ -76,7 +93,7 @@ class WidthToggle extends CustomElement {
      * @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)
@@ -90,36 +107,14 @@ class WidthToggle extends CustomElement {
             templates: {
                 main: getTemplate(),
             },
-            splitType: TYPE_VERTICAL,
-            dimension: {
-                initial: "60%",
-                max: "80%",
-                min: "20%",
+            width: {
+                small: "40%",
+                wide: "95%",
             },
+            default: MODE_SMALL,
         });
     }
 
-    fullStartScreen() {
-        this.setDimension("100%");
-        return this;
-    }
-
-    fullEndScreen() {
-        this.setDimension("0%");
-        return this;
-    }
-
-    resetScreen() {
-        this.setDimension(this.getOption("dimension").initial);
-        return this;
-    }
-
-
-    setContent(html) {
-        this.setOption("content", html);
-        return this;
-    }
-
     /**
      *
      * @returns {Monster.Components.Host.Viewer}
@@ -129,27 +124,19 @@ class WidthToggle extends CustomElement {
 
         initControlReferences.call(this);
         initEventHandler.call(this);
-        //applyContainerWidth.call(this);
-        this.setDimension(this.getOption("dimension").initial);
+        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} width - The dimension to be set, can be in percentage or absolute value.
+     * @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(width) {
-        // check if percent and greater than100
-        if (width.includes("%")) {
-            if (parseInt(width) > 100) {
-                throw new Error("width must be less than 100%");
-            } else if (parseInt(width) < 0) {
-                throw new Error("width must be greater than 0%");
-            }
-        }
-
-        this.setOption("width", width);
+    setWidth(mode) {
+        applyContainerWidth.call(this, mode);
         return this;
     }
 
@@ -173,21 +160,36 @@ class WidthToggle extends CustomElement {
 
 /**
  * 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() {
+function applyContainerWidth(mode) {
 
-    let width = this.getOption("width");
+    const width = this.getOption("width." + mode)
     if (!width) {
-        width = "100%";
+        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+        throw new Error("unsupported mode");
     }
 
-    this[widthToggleElementSymbol].style.width = width;
+    switch (mode) {
+        case MODE_SMALL:
+        case MODE_WIDE:
 
-    fireCustomEvent(this, "monster-dimension-changed", {
-        controller: this,
-        dimension: width
-    });
+            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;
+    }
 
 }
 
@@ -202,8 +204,9 @@ function initControlReferences() {
         throw new Error("no shadow-root is defined");
     }
 
-    this[widthToggleElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=width-toggle]");
+    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]");
 
 
 }
@@ -214,10 +217,10 @@ function initControlReferences() {
 function initEventHandler() {
     const self = this;
 
-    this[internalSymbol].attachObserver(
-        new Observer(() => {
-            applyContainerWidth.call(self);
-        }));
+    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;
@@ -231,10 +234,12 @@ function initEventHandler() {
 function getTemplate() {
     // language=HTML
     return `
-        <div data-monster-role="width-toggle" part="control">
+        <div data-monster-role="control" part="control">
             <div part="container" data-monster-role="container">
-                <div data-monster-role="toggle">ICON</div>
-                <slot></slot>
+                <div part="toggle" data-monster-role="toggle" data-monster-state="wide"></div>
+                <div part="inside" data-monster-role="inside">
+                    <slot></slot>
+                </div>
             </div>
         </div>`;
 }

package/source/types/version.mjs

@@ -152,7 +152,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.63.2");
+	monsterVersion = new Version("3.63.3");
 
 	return monsterVersion;
 }

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.63.2")
+        monsterVersion = new Version("3.63.3")
 
         let m = getMonsterVersion();