@schukai/monster 3.69.2 → 3.70.0

package/source/components/datatable/stylesheet/filter-controls-defaults.mjs

@@ -1,5 +1,5 @@
 /**
- * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
  * Node module: @schukai/monster
  *
  * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
@@ -8,14 +8,12 @@
  * 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.
- *
- * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { addAttributeToken } from "../../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { FilterControlsDefaultsStyleSheet };
+export {FilterControlsDefaultsStyleSheet}
 
 /**
  * @private
@@ -24,17 +22,10 @@ export { FilterControlsDefaultsStyleSheet };
 const FilterControlsDefaultsStyleSheet = new CSSStyleSheet();
 
 try {
-	FilterControlsDefaultsStyleSheet.insertRule(
-		`
+  FilterControlsDefaultsStyleSheet.insertRule(`
 @layer filtercontrolsdefaults { 
-[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} 
-}`,
-		0,
-	);
+[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/form/context-error.mjs

@@ -118,6 +118,8 @@ class ContextError extends Popper {
 			classes: {
 				button: "monster-theme-error-2",
 			},
+
+			display: "inline-block"
 		});
 	}
 

package/source/components/form/context-help.mjs

@@ -88,6 +88,7 @@ class ContextHelp extends Popper {
 				main: getTemplate(),
 			},
 			mode: "auto",
+			display: "inline-block"
 		});
 	}
 

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

@@ -12,25 +12,25 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { addAttributeToken } from "../../dom/attributes.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
 import {
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
-import { CustomControl } from "../../dom/customcontrol.mjs";
+import {CustomControl} from "../../dom/customcontrol.mjs";
 import {
-	assembleMethodSymbol,
-	getSlottedElements,
-	registerCustomElement,
+    assembleMethodSymbol,
+    getSlottedElements,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { isFunction } from "../../types/is.mjs";
-import { FieldSetStyleSheet } from "./stylesheet/field-set.mjs";
+import {isFunction} from "../../types/is.mjs";
+import {FieldSetStyleSheet} from "./stylesheet/field-set.mjs";
 import "../layout/collapse.mjs";
 import "./toggle-switch.mjs";
 
-export { FieldSet };
-
+export {FieldSet};
+ 
 /**
  * @private
  * @type {symbol}
@@ -101,179 +101,178 @@ const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
  * @summary A simple FieldSet
  */
 class FieldSet extends CustomControl {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
-	}
-
-	/**
-	 * @return {Components.Form.FieldSet
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		updateExtendedFields.call(this);
-		return this;
-	}
-
-	/**
-	 * 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 Label definitions
-	 * @property {Object} actions Callbacks
-	 * @property {string} actions.click="throw Error" Callback when clicked
-	 * @property {Object} features Features
-	 * @property {Object} classes CSS classes
-	 * @property {boolean} disabled=false Disabled state
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			labels: {
-				"toggle-switch-on": "✔",
-				"toggle-switch-off": "✖",
-				"toggle-switch-label": "Expand",
-				title: "",
-			},
-			classes: {},
-			disabled: false,
-			features: {},
-			actions: {
-				click: () => {
-					throw new Error("the click action is not defined");
-				},
-			},
-			value: null,
-		});
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-field-set";
-	}
-
-	/**
-	 *
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [FieldSetStyleSheet];
-	}
-
-	/**
-	 * The FieldSet.click() method simulates a click on the internal element.
-	 *
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
-	 */
-	click() {
-		if (this.getOption("disabled") === true) {
-			return;
-		}
-
-		if (
-			this[fieldSetElementSymbol] &&
-			isFunction(this[fieldSetElementSymbol].click)
-		) {
-			this[fieldSetElementSymbol].click();
-		}
-	}
-
-	/**
-	 * The Button.focus() method sets focus on the internal element.
-	 *
-	 * @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[fieldSetElementSymbol] &&
-			isFunction(this[fieldSetElementSymbol].focus)
-		) {
-			this[fieldSetElementSymbol].focus(options);
-		}
-	}
-
-	/**
-	 * The Button.blur() method removes focus from the internal element.
-	 */
-	blur() {
-		if (
-			this[fieldSetElementSymbol] &&
-			isFunction(this[fieldSetElementSymbol].blur)
-		) {
-			this[fieldSetElementSymbol].blur();
-		}
-	}
-
-	/**
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
-	 * @return {boolean}
-	 */
-	static get formAssociated() {
-		return true;
-	}
-
-	/**
-	 * The current value of the form control.
-	 *
-	 * ```js
-	 * e = document.querySelector('monster-field-set');
-	 * console.log(e.value)
-	 * ```
-	 *
-	 * @property {string}
-	 */
-	get value() {
-		return this.getOption("value");
-	}
-
-	/**
-	 * Set value of the form control.
-	 *
-	 * ```
-	 * e = document.querySelector('monster-field-set');
-	 * e.value=1
-	 * ```
-	 *
-	 * @property {string} value
-	 * @throws {Error} unsupported type
-	 */
-	set value(value) {
-		this.setOption("value", value);
-		try {
-			this?.setFormValue(this.value);
-		} catch (e) {
-			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-		}
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
+    }
+
+    /**
+     * @return {Components.Form.FieldSet
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+        updateExtendedFields.call(this);
+        return this;
+    }
+
+    /**
+     * 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 Label definitions
+     * @property {Object} actions Callbacks
+     * @property {string} actions.click="throw Error" Callback when clicked
+     * @property {Object} features Features
+     * @property {Object} classes CSS classes
+     * @property {boolean} disabled=false Disabled state
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            labels: {
+                "toggle-switch-on": "✔",
+                "toggle-switch-off": "✖",
+                "toggle-switch-label": "Expand",
+                title: "",
+            },
+            classes: {},
+            disabled: false,
+            features: {},
+            actions: {
+                click: () => {
+                    throw new Error("the click action is not defined");
+                },
+            },
+            value: null,
+        });
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-field-set";
+    }
+
+    /**
+     *
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [FieldSetStyleSheet];
+    }
+
+    /**
+     * The FieldSet.click() method simulates a click on the internal element.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
+     */
+    click() {
+        if (this.getOption("disabled") === true) {
+            return;
+        }
+
+        if (
+            this[fieldSetElementSymbol] &&
+            isFunction(this[fieldSetElementSymbol].click)
+        ) {
+            this[fieldSetElementSymbol].click();
+        }
+    }
+
+    /**
+     * The Button.focus() method sets focus on the internal element.
+     *
+     * @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[fieldSetElementSymbol] &&
+            isFunction(this[fieldSetElementSymbol].focus)
+        ) {
+            this[fieldSetElementSymbol].focus(options);
+        }
+    }
+
+    /**
+     * The Button.blur() method removes focus from the internal element.
+     */
+    blur() {
+        if (
+            this[fieldSetElementSymbol] &&
+            isFunction(this[fieldSetElementSymbol].blur)
+        ) {
+            this[fieldSetElementSymbol].blur();
+        }
+    }
+
+    /**
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+     * @return {boolean}
+     */
+    static get formAssociated() {
+        return true;
+    }
+
+    /**
+     * The current value of the form control.
+     *
+     * ```js
+     * e = document.querySelector('monster-field-set');
+     * console.log(e.value)
+     * ```
+     *
+     * @property {string}
+     */
+    get value() {
+        return this.getOption("value");
+    }
+
+    /**
+     * Set value of the form control.
+     *
+     * ```
+     * e = document.querySelector('monster-field-set');
+     * e.value=1
+     * ```
+     *
+     * @property {string} value
+     * @throws {Error} unsupported type
+     */
+    set value(value) {
+        this.setOption("value", value);
+        try {
+            this?.setFormValue(this.value);
+        } catch (e) {
+            addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+        }
+    }
 }
 
 function updateExtendedFields() {
-	const nodes = getSlottedElements.call(this, "", "extended");
-	console.log(nodes.size);
-	if (nodes.size > 0) {
-		this[extendedSwitchSymbol].classList.remove("hidden");
-	} else {
-		this[extendedSwitchSymbol].classList.add("hidden");
-	}
+    const nodes = getSlottedElements.call(this, "", "extended");
+    if (nodes.size > 0) {
+        this[extendedSwitchSymbol].classList.remove("hidden");
+    } else {
+        this[extendedSwitchSymbol].classList.add("hidden");
+    }
 }
 
 /**
@@ -282,53 +281,53 @@ function updateExtendedFields() {
  * @fires Monster.Components.Form.event:monster-field-set-clicked
  */
 function initEventHandler() {
-	this[toggleSwitchElementSymbol].setOption(
-		"labels.toggle-switch-on",
-		this.getOption("labels.toggle-switch-on"),
-	);
-	this[toggleSwitchElementSymbol].setOption(
-		"labels.toggle-switch-off",
-		this.getOption("labels.toggle-switch-off"),
-	);
-
-	this[toggleSwitchElementSymbol].setOption("actions.on", () => {
-		this[collapseElementSymbol].open();
-	});
-
-	this[toggleSwitchElementSymbol].setOption("actions.off", () => {
-		this[collapseElementSymbol].close();
-	});
-
-	return this;
+    this[toggleSwitchElementSymbol].setOption(
+        "labels.toggle-switch-on",
+        this.getOption("labels.toggle-switch-on"),
+    );
+    this[toggleSwitchElementSymbol].setOption(
+        "labels.toggle-switch-off",
+        this.getOption("labels.toggle-switch-off"),
+    );
+
+    this[toggleSwitchElementSymbol].setOption("actions.on", () => {
+        this[collapseElementSymbol].open();
+    });
+
+    this[toggleSwitchElementSymbol].setOption("actions.off", () => {
+        this[collapseElementSymbol].close();
+    });
+
+    return this;
 }
 
 /**
  * @private
  */
 function initControlReferences() {
-	this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="control"]`,
-	);
+    this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="control"]`,
+    );
 
-	this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="extended-switch"]`,
-	);
+    this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="extended-switch"]`,
+    );
 
-	this[collapseElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="collapse"]`,
-	);
+    this[collapseElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="collapse"]`,
+    );
 
-	this[headerElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="header"]`,
-	);
+    this[headerElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="header"]`,
+    );
 
-	this[extendedSwitchSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="extended-switch"]`,
-	);
+    this[extendedSwitchSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="extended-switch"]`,
+    );
 
-	this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
-		`monster-toggle-switch`,
-	);
+    this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
+        `monster-toggle-switch`,
+    );
 }
 
 /**
@@ -336,8 +335,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <div data-monster-role="control" part="control">
             <div data-monster-role="header">
                 <div data-monster-replace="path:labels.title" data-monster-role="title"></div>
@@ -346,16 +345,14 @@ function getTemplate() {
                     <monster-toggle-switch></monster-toggle-switch>
                 </div>
             </div>
-            <div>
+            <div data-monster-role="container">
                 <div class="collapse-alignment">
-                    <slot></slot>
+                    <slot part="content"></slot>
                 </div>
                 <monster-collapse data-monster-role="collapse">
-                    <slot name="extended"></slot>
+                    <slot name="extended" part="extended"></slot>
                 </monster-collapse>
             </div>
-
-
         </div>`;
 }