@schukai/monster 3.64.0 → 3.65.0

package/source/monster.mjs

@@ -1,13 +1,16 @@
-
 /**
- * Copyright schukai GmbH and contributors 2023. 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
- * SPDX-License-Identifier: AGPL-3.0-only or COMMERCIAL
+ *
+ * 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.
  */
 
-/** THIS FILE IS AUTOGENERATED AND SHOULD NOT BE EDITED DIRECTLY. **/
+// THIS FILE IS AUTOGENERATED. DO NOT EDIT THIS FILE DIRECTLY.
 
 /**
  * Main namespace for Monster.
@@ -15,11 +18,13 @@
  * @namespace Monster
  * @author schukai GmbH
  */
-
+export * from "./components/layout/collapse.mjs";
 export * from "./components/layout/tabs.mjs";
 export * from "./components/layout/split-panel.mjs";
-export * from "./components/layout/stylesheet/tabs.mjs";
-export * from "./components/layout/stylesheet/split-screen.mjs";
+export * from "./components/layout/popper.mjs";
+export * from "./components/layout/width-toggle.mjs";
+export * from "./components/layout/panel.mjs";
+export * from "./components/layout/details.mjs";
 export * from "./components/form/message-state-button.mjs";
 export * from "./components/form/button-bar.mjs";
 export * from "./components/form/reload.mjs";
@@ -29,7 +34,6 @@ export * from "./components/form/util/floating-ui.mjs";
 export * from "./components/form/context-help.mjs";
 export * from "./components/form/tabs.mjs";
 export * from "./components/form/state-button.mjs";
-export * from "./components/form/form-field.mjs";
 export * from "./components/form/popper.mjs";
 export * from "./components/form/select.mjs";
 export * from "./components/form/confirm-button.mjs";
@@ -41,33 +45,15 @@ export * from "./components/form/tree-select.mjs";
 export * from "./components/form/popper-button.mjs";
 export * from "./components/form/shadow-reload.mjs";
 export * from "./components/form/button.mjs";
+export * from "./components/form/field-set.mjs";
 export * from "./components/form/toggle-switch.mjs";
 export * from "./components/form/types/state.mjs";
 export * from "./components/form/template.mjs";
 export * from "./components/form/constants.mjs";
-export * from "./components/form/stylesheet/message-state-button.mjs";
-export * from "./components/form/stylesheet/button-bar.mjs";
-export * from "./components/form/stylesheet/context-help.mjs";
-export * from "./components/form/stylesheet/state-button.mjs";
-export * from "./components/form/stylesheet/form-field.mjs";
-export * from "./components/form/stylesheet/popper.mjs";
-export * from "./components/form/stylesheet/select.mjs";
-export * from "./components/form/stylesheet/confirm-button.mjs";
-export * from "./components/form/stylesheet/context-error.mjs";
-export * from "./components/form/stylesheet/action-button.mjs";
-export * from "./components/form/stylesheet/form.mjs";
-export * from "./components/form/stylesheet/api-button.mjs";
-export * from "./components/form/stylesheet/tree-select.mjs";
-export * from "./components/form/stylesheet/popper-button.mjs";
-export * from "./components/form/stylesheet/button.mjs";
-export * from "./components/form/stylesheet/toggle-switch.mjs";
 export * from "./components/notify/message.mjs";
 export * from "./components/notify/notify.mjs";
 export * from "./components/notify/constants.mjs";
-export * from "./components/notify/stylesheet/message.mjs";
-export * from "./components/notify/stylesheet/notify.mjs";
 export * from "./components/tree-menu/tree-menu.mjs";
-export * from "./components/tree-menu/stylesheet/tree-menu.mjs";
 export * from "./components/host/collapse.mjs";
 export * from "./components/host/config-manager.mjs";
 export * from "./components/host/host.mjs";
@@ -78,14 +64,6 @@ export * from "./components/host/util.mjs";
 export * from "./components/host/call-button.mjs";
 export * from "./components/host/details.mjs";
 export * from "./components/host/constants.mjs";
-export * from "./components/host/stylesheet/collapse.mjs";
-export * from "./components/host/stylesheet/config-manager.mjs";
-export * from "./components/host/stylesheet/host.mjs";
-export * from "./components/host/stylesheet/overlay.mjs";
-export * from "./components/host/stylesheet/toggle-button.mjs";
-export * from "./components/host/stylesheet/viewer.mjs";
-export * from "./components/host/stylesheet/call-button.mjs";
-export * from "./components/host/stylesheet/details.mjs";
 export * from "./components/datatable/filter/input.mjs";
 export * from "./components/datatable/filter/date-range.mjs";
 export * from "./components/datatable/filter/abstract-base.mjs";
@@ -107,53 +85,12 @@ export * from "./components/datatable/embedded-pagination.mjs";
 export * from "./components/datatable/status.mjs";
 export * from "./components/datatable/change-button.mjs";
 export * from "./components/datatable/constants.mjs";
-export * from "./components/datatable/stylesheet/select-filter.mjs";
-export * from "./components/datatable/stylesheet/datasource.mjs";
-export * from "./components/datatable/stylesheet/column-bar.mjs";
-export * from "./components/datatable/stylesheet/filter-button.mjs";
-export * from "./components/datatable/stylesheet/filter-date-range.mjs";
-export * from "./components/datatable/stylesheet/datatable.mjs";
-export * from "./components/datatable/stylesheet/pagination.mjs";
-export * from "./components/datatable/stylesheet/filter.mjs";
-export * from "./components/datatable/stylesheet/save-button.mjs";
-export * from "./components/datatable/stylesheet/dataset.mjs";
-export * from "./components/datatable/stylesheet/embedded-pagination.mjs";
-export * from "./components/datatable/stylesheet/filter-controls-defaults.mjs";
-export * from "./components/datatable/stylesheet/status.mjs";
-export * from "./components/datatable/stylesheet/change-button.mjs";
-export * from "./components/datatable/stylesheet/filter-range.mjs";
 export * from "./components/state/log/entry.mjs";
 export * from "./components/state/state.mjs";
 export * from "./components/state/log.mjs";
-export * from "./components/state/stylesheet/state.mjs";
-export * from "./components/state/stylesheet/log.mjs";
+export * from "./components/navigation/table-of-content.mjs";
 export * from "./components/constants.mjs";
 export * from "./components/constants.mjs";
-export * from "./components/stylesheet/host.mjs";
-export * from "./components/stylesheet/badge.mjs";
-export * from "./components/stylesheet/border.mjs";
-export * from "./components/stylesheet/spinner.mjs";
-export * from "./components/stylesheet/control.mjs";
-export * from "./components/stylesheet/card.mjs";
-export * from "./components/stylesheet/common.mjs";
-export * from "./components/stylesheet/icons.mjs";
-export * from "./components/stylesheet/popper.mjs";
-export * from "./components/stylesheet/theme.mjs";
-export * from "./components/stylesheet/data-grid.mjs";
-export * from "./components/stylesheet/space.mjs";
-export * from "./components/stylesheet/normalize.mjs";
-export * from "./components/stylesheet/ripple.mjs";
-export * from "./components/stylesheet/link.mjs";
-export * from "./components/stylesheet/property.mjs";
-export * from "./components/stylesheet/form.mjs";
-export * from "./components/stylesheet/skeleton.mjs";
-export * from "./components/stylesheet/typography.mjs";
-export * from "./components/stylesheet/tree-menu.mjs";
-export * from "./components/stylesheet/table.mjs";
-export * from "./components/stylesheet/button.mjs";
-export * from "./components/stylesheet/display.mjs";
-export * from "./components/stylesheet/color.mjs";
-export * from "./components/stylesheet/floating-ui.mjs";
 export * from "./text/formatter.mjs";
 export * from "./text/generate-range-comparison-expression.mjs";
 export * from "./text/util.mjs";
@@ -261,7 +198,7 @@ export { Monster };
 /**
  * This class has no other purpose than to exist.
  *
- * @license AGPLv3
+ * @license AGPLv3 or commercial license
  * @since 2.0.0
  * @copyright schukai GmbH
  * @memberOf Monster

package/source/types/proxyobserver.mjs

@@ -12,13 +12,14 @@ import { ObserverList } from "./observerlist.mjs";
 import { validateObject } from "./validate.mjs";
 import { extend } from "../data/extend.mjs";
 import { instanceSymbol } from "../constants.mjs";
+import { clone } from "../util/clone.mjs";
 export { ProxyObserver };
 
 /**
  * An observer manages a callback function
  *
  * With the ProxyObserver you can attach observer for observation.
- * With each change at the object to be observed an update takes place.
+ * With each change at the object to be observed, an update takes place.
  *
  * This also applies to nested objects.
  *
@@ -72,12 +73,13 @@ class ProxyObserver extends Base {
 	 */
 	setSubject(obj) {
 		let i;
+		const clonedObject = clone(obj);
 		const k = Object.keys(this.subject);
 		for (i = 0; i < k.length; i++) {
 			delete this.subject[k[i]];
 		}
 
-		this.subject = extend(this.subject, obj);
+		this.subject = extend(this.subject, clonedObject);
 		return this;
 	}
 

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.64.0");
+	monsterVersion = new Version("3.65.0");
 
 	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.64.0")
+        monsterVersion = new Version("3.65.0")
 
         let m = getMonsterVersion();
 

package/test/web/tests.js

@@ -24173,7 +24173,7 @@ ${key.data.toString("base64")}
   }
   var splitScreenElementSymbol, draggerElementSymbol, startPanelElementSymbol, endPanelElementSymbol, handleElementSymbol, TYPE_VERTICAL, TYPE_HORIZONTAL, SplitScreen;
   var init_split_screen2 = __esm({
-    "source/components/layout/split-screen.mjs"() {
+    "source/components/layout/split-panel.mjs"() {
       init_customelement();
       init_notify2();
       init_events();
@@ -24271,7 +24271,7 @@ ${key.data.toString("base64")}
          * @return {string}
          */
         static getTag() {
-          return "monster-split-screen";
+          return "monster-split-panel";
         }
         /**
          * @return {CSSStyleSheet[]}
@@ -35838,9 +35838,9 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
   chai_default.use(chaiDom);
   var global3 = getGlobal();
   var html12 = `
-    <monster-split-screen id="my-split-screen">
+    <monster-split-panel id="my-split-screen">
        
-    </monster-split-screen>
+    </monster-split-panel>
 `;
   var SplitScreen2;
   describe("SplitScreen", function() {

package/source/components/form/form-field.mjs

@@ -1,341 +0,0 @@
-/**
- * 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
- */
-import { instanceSymbol } from "../../constants.mjs";
-import { addAttributeToken } from "../../dom/attributes.mjs";
-import {
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
-} from "../../dom/constants.mjs";
-import { CustomControl } from "../../dom/customcontrol.mjs";
-import {
-	assembleMethodSymbol,
-	attributeObserverSymbol,
-	registerCustomElement,
-} from "../../dom/customelement.mjs";
-import { findTargetElementFromEvent } from "../../dom/events.mjs";
-import { isFunction } from "../../types/is.mjs";
-import { ATTRIBUTE_BUTTON_CLASS } from "./constants.mjs";
-import { ButtonStyleSheet } from "./stylesheet/button.mjs";
-import { RippleStyleSheet } from "../stylesheet/ripple.mjs";
-import { fireCustomEvent } from "../../dom/events.mjs";
-
-export { FormField };
-
-
-/**
- * This CustomControl creates a container for form elements.
- *
- * <img src="./images/form-field.png">
- *
- * You can create this control either by specifying the HTML tag <monster-form-field />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-form-field');` method.
- *
- * ```html
- * <monster-form-field></monster-form-field>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {Button} from '@schukai/monster/components/form/form-field.mjs';
- * document.createElement('monster-form-field');
- * ```
- *
- * The `data-monster-button-class` attribute can be used to change the CSS class of the button.
- *
- * @startuml form-field.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- FormField
- * @enduml
- *
- * @since 1.5.0
- * @copyright schukai GmbH
- * @memberOf Monster.Components.Form
- * @summary A simple button
- */
-class FormField extends CustomControl {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 * @since 2.1.0
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/form/button@@instance");
-	}
-
-	/**
-	 *
-	 * @return {Monster.Components.Form.Button}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		return this;
-	}
-
-	/**
-	 * The Button.click() method simulates a click on the internal button element.
-	 *
-	 * @since 3.27.0
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
-	 */
-	click() {
-		if (this.getOption("disabled") === true) {
-			return;
-		}
-
-		if (
-			this[buttonElementSymbol] &&
-			isFunction(this[buttonElementSymbol].click)
-		) {
-			this[buttonElementSymbol].click();
-		}
-	}
-
-	/**
-	 * The Button.focus() method sets focus on the internal button element.
-	 *
-	 * @since 3.27.0
-	 * @param {Object} options
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
-	 */
-	focus(options) {
-		if (this.getOption("disabled") === true) {
-			return;
-		}
-
-		if (
-			this[buttonElementSymbol] &&
-			isFunction(this[buttonElementSymbol].focus)
-		) {
-			this[buttonElementSymbol].focus(options);
-		}
-	}
-
-	/**
-	 * The Button.blur() method removes focus from the internal button element.
-	 */
-	blur() {
-		if (
-			this[buttonElementSymbol] &&
-			isFunction(this[buttonElementSymbol].blur)
-		) {
-			this[buttonElementSymbol].blur();
-		}
-	}
-
-	/**
-	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
-	 *
-	 * @return {string[]}
-	 */
-	static get observedAttributes() {
-		const attributes = super.observedAttributes;
-		attributes.push(ATTRIBUTE_BUTTON_CLASS);
-		return attributes;
-	}
-
-	/**
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
-	 * @return {boolean}
-	 */
-	static get formAssociated() {
-		return true;
-	}
-
-	/**
-	 * The current selection of the Select
-	 *
-	 * ```
-	 * e = document.querySelector('monster-select');
-	 * console.log(e.value)
-	 * // ↦ 1
-	 * // ↦ ['1','2']
-	 * ```
-	 *
-	 * @property {string|array}
-	 */
-	get value() {
-		return this.getOption("value");
-	}
-
-	/**
-	 * Set selection
-	 *
-	 * ```
-	 * e = document.querySelector('monster-select');
-	 * e.value=1
-	 * ```
-	 *
-	 * @property {string|array} value
-	 * @since 1.2.0
-	 * @throws {Error} unsupported type
-	 */
-	set value(value) {
-		this.setOption("value", value);
-		try {
-			this?.setFormValue(this.value);
-		} catch (e) {
-			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-		}
-	}
-
-	/**
-	 * 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} labels Labels
-	 * @property {string} labels.button=<slot></slot> Button label
-	 * @property {Object} actions Callbacks
-	 * @property {string} actions.click="throw Error" Callback when clicked
-	 * @property {Object} classes CSS classes
-	 * @property {string} classes.button="monster-button-primary" CSS class for the button
-	 * @property {boolean} disabled=false Disabled state
-	 * @property {Object} effects Effects
-	 * @property {boolean} effects.ripple=true Ripple effect
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			labels: {
-				button: "<slot></slot>",
-			},
-			classes: {
-				button: "monster-button-primary",
-			},
-			disabled: false,
-			actions: {
-				click: () => {
-					throw new Error("the click action is not defined");
-				},
-			},
-			effects: {
-				ripple: true,
-			},
-			value: null,
-		});
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-form-field";
-	}
-
-	/**
-	 *
-	 * @return {Array<CSSStyleSheet>}
-	 */
-	static getCSSStyleSheet() {
-		return [FormFieldStyleSheet];
-	}
-}
-
-/**
- * @private
- * @return {initEventHandler}
- * @fires Monster.Components.Form.event:monster-button-clicked
- */
-function initEventHandler() {
-	const self = this;
-	const button = this[buttonElementSymbol];
-
-	const type = "click";
-
-	button.addEventListener(type, function (event) {
-		const callback = self.getOption("actions.click");
-
-		fireCustomEvent(self, "monster-button-clicked", {
-			button: self,
-		});
-
-		if (!isFunction(callback)) {
-			return;
-		}
-
-		const element = findTargetElementFromEvent(
-			event,
-			ATTRIBUTE_ROLE,
-			"control",
-		);
-
-		if (!(element instanceof Node && self.hasNode(element))) {
-			return;
-		}
-
-		callback.call(self, event);
-	});
-
-	if (self.getOption("effects.ripple")) {
-		button.addEventListener("click", createRipple.bind(self));
-	}
-
-	// data-monster-options
-	self[attributeObserverSymbol][ATTRIBUTE_BUTTON_CLASS] = function (value) {
-		self.setOption("classes.button", value);
-	};
-
-	return this;
-}
-
-/**
- * @private
- */
-function initControlReferences() {
-	this[buttonElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}=button]`,
-	);
-}
-
-/**
- * @private
- * @return {string}
- */
-function getTemplate() {
-	// language=HTML
-	return `
-        <div data-monster-role="control" part="control">
-            <button data-monster-attributes="disabled path:disabled | if:true, class path:classes.button"
-                    data-monster-role="button"
-                    part="button"
-                    data-monster-replace="path:labels.button"></button>
-        </div>`;
-}
-
-function createRipple(event) {
-	const button = this[buttonElementSymbol];
-
-	const circle = document.createElement("span");
-	const diameter = Math.max(button.clientWidth, button.clientHeight);
-	const radius = diameter / 2;
-
-	circle.style.width = circle.style.height = `${diameter}px`;
-	circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
-	circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
-	circle.classList.add("monster-fx-ripple");
-
-	const ripples = button.getElementsByClassName("monster-fx-ripple");
-	for (const ripple of ripples) {
-		ripple.remove();
-	}
-
-	button.appendChild(circle);
-}
-
-registerCustomElement(FormField);

package/source/components/form/style/form-field.pcss

@@ -1,4 +0,0 @@
-
-
-
-

package/source/components/form/stylesheet/form-field.mjs

@@ -1,27 +0,0 @@
-
-/**
- * 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 {FormFieldStyleSheet}
-
-/**
- * @private
- * @type {CSSStyleSheet}
- */
-const FormFieldStyleSheet = new CSSStyleSheet();
-
-try {
-  FormFieldStyleSheet.insertRule(`
-@layer formfield { 
- 
-}`, 0);
-} catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
-}