chore: events

source/components/form/api-button.mjs

@@ -74,6 +74,10 @@ const containerElementSymbol = Symbol("containerElement");
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
  * @summary A button that opens a popper element with possible actions.
+ * @fires Monster.Components.Form.event:monster-button-set
+ * @fires Monster.Components.Form.event:monster-api-button-click
+ * @fires Monster.Components.Form.event:monster-api-button-successful
+ * @fires Monster.Components.Form.event:monster-api-button-failed
  */
 class ApiButton extends ActionButton {
 	/**

source/components/form/events.mjs

@@ -82,3 +82,36 @@
  * @event event:monster-button-clicked
  * @type {object}
  */
+
+/**
+ * content fetched event
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-button-set
+ * @type {object}
+ */
+
+/**
+ * content fetched event
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-api-button-click
+ * @type {object}
+ */
+
+/**
+ * content fetched event
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-api-button-successful
+ * @type {object}
+ */
+
+/**
+ * content fetched event
+ *
+ * @memberOf Monster.Components.Form
+ * @event event:monster-api-button-failed
+ * @type {object}
+ */
+

source/components/layout/events.mjs

+/**
+ * Copyright schukai GmbH and contributors 2023. 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 event is fired when a dimension of a control is changed.
+ *
+ * @memberOf Monster.Components.Layout
+ * @event event:monster-dimension-changed
+ * @type {object}
+ * @property {Object} control control
+ * @property {string} details[].dimension
+ */

source/components/layout/split-screen.mjs

@@ -9,6 +9,7 @@ import {
     registerCustomElement,
 } from "../../dom/customelement.mjs";
 import "../notify/notify.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
 import {Observer} from "../../types/observer.mjs";
 import {SplitScreenStyleSheet} from "./stylesheet/split-screen.mjs";
 import {instanceSymbol} from "../../constants.mjs";
@@ -85,6 +86,7 @@ const TYPE_HORIZONTAL = "horizontal";
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Layout
  * @summary A simple split screen layout
+ * @fires Monster.Components.Layout.event:monster-dimension-changed
  */
 class SplitScreen extends CustomElement {
 
@@ -124,6 +126,23 @@ class SplitScreen extends CustomElement {
         });
     }
     
+    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;
@@ -182,6 +201,7 @@ class SplitScreen extends CustomElement {
 
 /**
  * Set the dimensions of the panel based on the split type.
+ * @fires Monster.Components.Layout.event:monster-dimension-changed
  */
 function applyPanelDimensions() {
 
@@ -203,6 +223,12 @@ function applyPanelDimensions() {
         this[splitScreenElementSymbol].classList.remove("vertical");
 
     }
+
+    fireCustomEvent(this, "monster-dimension-changed", {
+        controller: this,
+        dimension: dimension
+    });
+    
 }
 
 
@@ -373,12 +399,12 @@ function initEventHandler() {
 function getTemplate() {
     // language=HTML
     return `
-        <div data-monster-role="split-screen" part="container">
+        <div data-monster-role="split-screen" part="control">
             <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 data-monster-role="handle" part="handle"></div>
             </div>
             <div data-monster-role="endPanel" class="panel" part="endPanel">
                 <slot name="end"></slot>