@schukai/monster 3.76.0 → 3.78.0

package/source/components/datatable/filter/input.mjs

@@ -82,7 +82,7 @@ class Input extends AbstractBase {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/filter/range.mjs

@@ -155,7 +155,7 @@ class Range extends AbstractBase {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/filter/select.mjs

@@ -38,7 +38,7 @@ import { FilterSelectStyleSheet } from "../stylesheet/filter-select.mjs";
  */
 class FilterSelect extends Select {
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -70,7 +70,7 @@ class FilterButton extends ToggleButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/filter.mjs

@@ -207,7 +207,7 @@ class Filter extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/pagination.mjs

@@ -100,7 +100,7 @@ class Pagination extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -70,7 +70,7 @@ class SaveButton extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/status.mjs

@@ -95,7 +95,7 @@ class DatasourceStatus extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/action-button.mjs

@@ -97,7 +97,7 @@ class ActionButton extends PopperButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/api-button.mjs

@@ -108,7 +108,7 @@ class ApiButton extends ActionButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/button-bar.mjs

@@ -180,7 +180,7 @@ class ButtonBar extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/button.mjs

@@ -179,7 +179,7 @@ class Button extends CustomControl {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/confirm-button.mjs

@@ -114,7 +114,7 @@ class ConfirmButton extends PopperButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -104,7 +104,7 @@ class ContextError extends Popper {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.
@@ -228,7 +228,7 @@ class ContextError extends Popper {
 	}
 
 	/**
-	 * Returns the html tag of the control.
+	 * Returns the HTML Tag of the control.
 	 *
 	 * @return {string}
 	 */

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

@@ -20,42 +20,6 @@ import { Popper } from "./popper.mjs";
 
 export { ContextHelp };
 
-/**
- * The ContextHelp ist an element that can be used to display a tooltip or a popover.
- *
- * <img src="./images/context-help.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- * as well as [pooperjs](https://popper.js.org/docs/v2/).
- *
- * You can create this control either by specifying the HTML tag <monster-context-help-button />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-context-help');` method.
- *
- * ```html
- * <monster-context-help></monster-context-help>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {Popper} from '@schukai/monster/components/form/context-help.mjs';
- * document.createElement('monster-context-help');
- * ```
- *
- * @startuml context-help.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- Popper
- * Popper <|-- ContextHelp
- * @enduml
- *
- * @copyright schukai GmbH
- * @memberOf Monster.Components.Form
- * @summary A control that can be used to display a tooltip or a popover.
- */
-
 /**
  * A context help control.
  *
@@ -79,7 +43,7 @@ class ContextHelp extends Popper {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -67,39 +67,6 @@ const toggleSwitchElementSymbol = Symbol("toggleSwitchElement");
  */
 const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
 
-/**
- * This CustomControl creates a FieldSet element with a variety of options.
- *
- * <img src="./images/field-set.png">
- *
- * You can create this control either by specifying the HTML tag <monster-field-set />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-field-set');` method.
- *
- * ```html
- * <monster-field-set></monster-field-set>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {FieldSet} from '@schukai/monster/source/components/form/field-set.mjs';
- * document.createElement('monster-field-set');
- * ```
- *
- * @externalExample ../..../example/components/form/field-set.mjs
- * @startuml field-set.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- FieldSet
- * @enduml
- *
- * @copyright schukai GmbH
- * @memberOf Monster.Components.Form
- * @summary A simple FieldSet
- */
-
 /**
  * A field set control that can be used to group form elements.
  *
@@ -128,11 +95,12 @@ class FieldSet extends CustomControl {
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 		updateExtendedFields.call(this);
+		updateColumns.call(this);
 		return this;
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.
@@ -143,6 +111,7 @@ class FieldSet extends CustomControl {
 	 * @property {Object} actions Callbacks
 	 * @property {string} actions.click="throw Error" Callback when clicked
 	 * @property {Object} features Features
+	 * @property {boolean} features.multipleColumns=true Multiple columns
 	 * @property {Object} classes CSS classes
 	 * @property {boolean} disabled=false Disabled state
 	 */
@@ -152,14 +121,16 @@ class FieldSet extends CustomControl {
 				main: getTemplate(),
 			},
 			labels: {
-				"toggle-switch-on": "✔",
-				"toggle-switch-off": "✖",
-				"toggle-switch-label": "Expand",
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expand",
 				title: "",
 			},
 			classes: {},
 			disabled: false,
-			features: {},
+			features: {
+				multipleColumns: true,
+			},
 			actions: {
 				click: () => {
 					throw new Error("the click action is not defined");
@@ -257,7 +228,7 @@ class FieldSet extends CustomControl {
 	}
 
 	/**
-	 * Set value of the form control.
+	 * Set the value of the form control.
 	 *
 	 * ```
 	 * e = document.querySelector('monster-field-set');
@@ -277,6 +248,9 @@ class FieldSet extends CustomControl {
 	}
 }
 
+/**
+ * @private
+ */
 function updateExtendedFields() {
 	const nodes = getSlottedElements.call(this, "", "extended");
 	if (nodes.size > 0) {
@@ -286,19 +260,32 @@ function updateExtendedFields() {
 	}
 }
 
+/**
+ * @private
+ */
+function updateColumns() {
+	if (this.getOption("features.multipleColumns") !== true) {
+		this[fieldSetElementSymbol].classList.remove("multiple-columns");
+		return;
+	}
+	
+	this[fieldSetElementSymbol].classList.add("multiple-columns");
+	
+}
+
 /**
  * @private
  * @return {initEventHandler}
- * @fires Monster.Components.Form.event:monster-field-set-clicked
+ * @fires event:monster-field-set-clicked
  */
 function initEventHandler() {
 	this[toggleSwitchElementSymbol].setOption(
-		"labels.toggle-switch-on",
-		this.getOption("labels.toggle-switch-on"),
+		"labels.toggleSwitchOn",
+		this.getOption("labels.toggleSwitchOn"),
 	);
 	this[toggleSwitchElementSymbol].setOption(
-		"labels.toggle-switch-off",
-		this.getOption("labels.toggle-switch-off"),
+		"labels.toggleSwitchOff",
+		this.getOption("labels.toggleSwitchOff"),
 	);
 
 	this[toggleSwitchElementSymbol].setOption("actions.on", () => {

package/source/components/form/message-state-button.mjs

@@ -123,7 +123,7 @@ class MessageStateButton extends Popper {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/popper-button.mjs

@@ -154,7 +154,7 @@ class PopperButton extends Popper {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/reload.mjs

@@ -128,7 +128,7 @@ class Reload extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/select.mjs

@@ -347,7 +347,7 @@ class Select extends CustomControl {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/shadow-reload.mjs

@@ -40,7 +40,7 @@ class ShadowReload extends Reload {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/state-button.mjs

@@ -46,7 +46,7 @@ class StateButton extends Button {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.