@schukai/monster 3.101.2 → 3.102.0

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

@@ -568,20 +568,15 @@ function updateResizeObserverObservation() {
 	});
 
 	requestAnimationFrame(() => {
-
 		let parent = this.parentNode;
-		while(!(parent instanceof HTMLElement) && parent !== null) {
+		while (!(parent instanceof HTMLElement) && parent !== null) {
 			parent = parent.parentNode;
 		}
 
 		if (parent instanceof HTMLElement) {
 			this[resizeObserverSymbol].observe(parent);
 		}
-
-
 	});
-
-
 }
 
 /**

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

@@ -404,18 +404,18 @@ function getTemplate() {
 	// 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>
-                <div data-monster-role="extended-switch">
+            <div data-monster-role="header" part="header">
+                <div data-monster-replace="path:labels.title" data-monster-role="title" part="title"></div>
+                <div data-monster-role="extended-switch" part="extended-switch">
                     <label data-monster-replace="path:labels.toggleSwitchLabel"></label>
                     <monster-toggle-switch></monster-toggle-switch>
                 </div>
             </div>
-            <div data-monster-role="container">
-                <div class="collapse-alignment">
+            <div data-monster-role="container" part="container">
+                <div class="collapse-alignment" part="content">
                     <slot part="content"></slot>
                 </div>
-                <monster-collapse data-monster-role="collapse">
+                <monster-collapse data-monster-role="collapse" part="collapse">
                     <slot name="extended" part="extended"></slot>
                 </monster-collapse>
             </div>

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

@@ -346,19 +346,15 @@ function attachResizeObserver() {
 	});
 
 	requestAnimationFrame(() => {
-
 		let parent = this.parentNode;
-		while(!(parent instanceof HTMLElement) && parent !== null) {
+		while (!(parent instanceof HTMLElement) && parent !== null) {
 			parent = parent.parentNode;
 		}
 
 		if (parent instanceof HTMLElement) {
 			this[resizeObserverSymbol].observe(parent);
 		}
-
-
 	});
-
 }
 
 function disconnectResizeObserver() {

package/source/components/form/select.mjs

@@ -264,9 +264,8 @@ const FILTER_POSITION_INLINE = "inline";
 /**
  * A select control that can be used to select o
  *
- * ne or more options from a list.
- *
  * @issue @issue https://localhost.alvine.dev:8444/development/issues/closed/280.html
+ * @issue @issue https://localhost.alvine.dev:8444/development/issues/closed/287.html
  *
  * @fragments /fragments/components/form/select/
  *
@@ -337,6 +336,18 @@ class Select extends CustomControl {
      * @fires monster-selected this event is fired when the selection is set
      */
     set value(value) {
+
+        let ignoreValues = this.getOption("ignoreValues", []);
+        if(!isArray(ignoreValues)){
+           ignoreValues = [];
+        }
+
+        for (const v of ignoreValues) {
+            if (value === v) {
+                return;
+            }
+        }
+
         const result = convertValueToSelection.call(this, value);
         setSelection
             .call(this, result.selection)
@@ -400,6 +411,7 @@ class Select extends CustomControl {
      * @property {String} mapping.labelTemplate template with the label placeholders in the form ${name}, where name is the key (**)
      * @property {String} mapping.valueTemplate template with the value placeholders in the form ${name}, where name is the key
      * @property {function|undefined} mapping.filter Filtering of values via a function
+     * @property {Array} ignoreValues Ignore values in the selection and value
      * @property {Object} formatter
      * @property {function|undefined} formatter.selection format selection label
      */
@@ -422,7 +434,7 @@ class Select extends CustomControl {
                     closeOnSelect: false,
                     emptyValueIfNoOptions: false,
                     storeFetchedData: false,
-                    useStrictValueComparison: false,
+                    useStrictValueComparison: false
                 },
                 url: null,
                 lookup: {
@@ -461,8 +473,9 @@ class Select extends CustomControl {
                     selector: "*",
                     labelTemplate: "",
                     valueTemplate: "",
-                    filter: null,
+                    filter: null
                 },
+                ignoreValues: [undefined, null, ""],
                 formatter: {
                     selection: buildSelectionLabel,
                 },
@@ -1105,7 +1118,6 @@ function attachResizeObserver() {
     });
 
     requestAnimationFrame(() => {
-
         let parent = this.parentNode;
         while (!(parent instanceof HTMLElement) && parent !== null) {
             parent = parent.parentNode;
@@ -1114,10 +1126,7 @@ function attachResizeObserver() {
         if (parent instanceof HTMLElement) {
             this[resizeObserverSymbol].observe(parent);
         }
-
-
     });
-
 }
 
 /**
@@ -2185,7 +2194,7 @@ function convertValueToSelection(value) {
             value: value,
         });
     } else if (isArray(value)) {
-        for (const v of value) {
+		for (const v of value) {
             selection.push({
                 label: getSelectionLabel.call(this, v),
                 value: v,
@@ -2232,11 +2241,12 @@ function convertSelectionToValue(selection) {
 
 /**
  * @private
- * @param {array} selection
+ * @param {array|string} selection
  * @return {Promise}
  * @throws {Error} no shadow-root is defined
  */
 function setSelection(selection) {
+
     if (isString(selection) || isInteger(selection)) {
         const result = convertValueToSelection.call(this, selection);
         selection = result?.selection;
@@ -2245,19 +2255,41 @@ function setSelection(selection) {
     }
 
     validateArray(selection);
+    let ignoreValues = this.getOption("ignoreValues", []);
+    if(!isArray(ignoreValues)) {
+        ignoreValues = [];
+    }
 
+    let resultSelection = [];
     for (let i = 0; i < selection.length; i++) {
+
+        let ignore = false;
+
+        for (const v of ignoreValues) {
+            if (selection[i].value === v) {
+                ignore = true
+                break;
+            }
+        }
+        if (ignore) {
+            continue;
+        }
+
         let l = getSelectionLabel.call(this, selection[i].value);
         if (l === selection[i].value) {
             l = selection[i].label;
         }
 
-        selection[i] = {
+
+        resultSelection.push({
             label: l,
             value: selection[i].value,
-        };
+        })
+
     }
 
+    selection = resultSelection;
+
     this.setOption("selection", selection);
     checkOptionState.call(this);
     setSummaryAndControlText.call(this);

package/source/components/form/tree-select.mjs

@@ -88,7 +88,7 @@ class TreeSelect extends Select {
 	 * The individual configuration values can be found in the table.
 	 *
 	 * @extends Select
-	 * @property {String} mapping.rootReferences=['0', undefined, null]
+	 * @property {Array} mapping.rootReferences=['0', undefined, null]
 	 * @property {String} mapping.idTemplate=id
 	 * @property {String} mapping.parentTemplate=parent
 	 * @property {String} mapping.selection
@@ -288,7 +288,6 @@ function formatKeyLabel(node) {
  * @return {Array}
  */
 function buildTreeLabels(value) {
-
 	if (!this[internalNodesSymbol]) {
 		return [value];
 	}

package/source/components/host/call-button.mjs

@@ -12,20 +12,18 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
+import { instanceSymbol } from "../../constants.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {CallButtonStyleSheet} from "./stylesheet/call-button.mjs";
-import {isArray, isObject, isFunction} from "../../types/is.mjs";
-import {
-    findElementWithSelectorUpwards,
-} from "../../dom/util.mjs";
-import {ATTRIBUTE_PREFIX} from "../../dom/constants.mjs";
+import { CallButtonStyleSheet } from "./stylesheet/call-button.mjs";
+import { isArray, isObject, isFunction } from "../../types/is.mjs";
+import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
+import { ATTRIBUTE_PREFIX } from "../../dom/constants.mjs";
 
-export {CallButton};
+export { CallButton };
 
 /**
  * @private
@@ -49,69 +47,69 @@ const ATTRIBUTE_CALL = `${ATTRIBUTE_PREFIX}call`;
  * @summary A call button component that can call a method of another element.
  */
 class CallButton extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @return {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/component-host/call-button@@instance");
-    }
-
-    /**
-     * 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
-     */
-    get defaults() {
-        return Object.assign(
-            {},
-            super.defaults,
-            {
-                templates: {
-                    main: getTemplate(),
-                },
-                references: {
-                    callableSelector: undefined,
-                },
-
-                call: undefined,
-
-                labels: {
-                    button: "<slot>Toggle</slot>",
-                },
-            },
-            initOptionsFromArguments.call(this),
-        );
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-call-button";
-    }
-
-    /**
-     * @return {CallButton}
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-    }
-
-    /**
-     * @return {Array}
-     */
-    static getCSSStyleSheet() {
-        return [CallButtonStyleSheet];
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-host/call-button@@instance");
+	}
+
+	/**
+	 * 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
+	 */
+	get defaults() {
+		return Object.assign(
+			{},
+			super.defaults,
+			{
+				templates: {
+					main: getTemplate(),
+				},
+				references: {
+					callableSelector: undefined,
+				},
+
+				call: undefined,
+
+				labels: {
+					button: "<slot>Toggle</slot>",
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-call-button";
+	}
+
+	/**
+	 * @return {CallButton}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	static getCSSStyleSheet() {
+		return [CallButtonStyleSheet];
+	}
 }
 
 /**
@@ -119,14 +117,14 @@ class CallButton extends CustomElement {
  * @return {CallButton}
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    this[callButtonElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=control]",
-    );
-    return this;
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[callButtonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+	return this;
 }
 
 /**
@@ -136,26 +134,26 @@ function initControlReferences() {
  * @throws {Error} the datasource could not be initialized
  */
 function initOptionsFromArguments() {
-    const options = {};
-    const value = this.getAttribute(ATTRIBUTE_REFERENCE);
-    if (value) {
-        if (!isObject(options.references)) {
-            options.references = {};
-        }
-        const selectors = value.split(",");
-        if (isArray(selectors) && selectors.length === 0) {
-            throw new TypeError("incorrect arguments passed for the datasource");
-        }
-
-        options.references.callableSelector = selectors;
-    }
-
-    const call = this.getAttribute(ATTRIBUTE_CALL);
-    if (call) {
-        options.call = call;
-    }
-
-    return options;
+	const options = {};
+	const value = this.getAttribute(ATTRIBUTE_REFERENCE);
+	if (value) {
+		if (!isObject(options.references)) {
+			options.references = {};
+		}
+		const selectors = value.split(",");
+		if (isArray(selectors) && selectors.length === 0) {
+			throw new TypeError("incorrect arguments passed for the datasource");
+		}
+
+		options.references.callableSelector = selectors;
+	}
+
+	const call = this.getAttribute(ATTRIBUTE_CALL);
+	if (call) {
+		options.call = call;
+	}
+
+	return options;
 }
 
 /**
@@ -163,28 +161,28 @@ function initOptionsFromArguments() {
  * @throws {Error} The option references.callableSelector must be an array
  */
 function initEventHandler() {
-    this[callButtonElementSymbol].addEventListener("click", (event) => {
-        event.preventDefault();
-
-        const selectors = this.getOption("references.callableSelector");
-        if (!isArray(selectors)) {
-            throw new Error(
-                "The option references.callableSelector must be an array",
-            );
-        }
-
-        const call = this.getOption("call");
-        if (!call) {
-            throw new Error("The option call must be defined");
-        }
-
-        for (const selector of selectors) {
-            const element = findElementWithSelectorUpwards(this, selector);
-            if (element instanceof HTMLElement && isFunction(element?.[call])) {
-                element[call]();
-            }
-        }
-    });
+	this[callButtonElementSymbol].addEventListener("click", (event) => {
+		event.preventDefault();
+
+		const selectors = this.getOption("references.callableSelector");
+		if (!isArray(selectors)) {
+			throw new Error(
+				"The option references.callableSelector must be an array",
+			);
+		}
+
+		const call = this.getOption("call");
+		if (!call) {
+			throw new Error("The option call must be defined");
+		}
+
+		for (const selector of selectors) {
+			const element = findElementWithSelectorUpwards(this, selector);
+			if (element instanceof HTMLElement && isFunction(element?.[call])) {
+				element[call]();
+			}
+		}
+	});
 }
 
 /**
@@ -192,8 +190,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control"
              data-monster-attributes="class path:references.callableSelector | ?::hidden">
             <a href="#" data-monster-role="call-button" data-monster-replace="path:labels.button"></a>

package/source/components/host/viewer.mjs

@@ -71,7 +71,7 @@ class Viewer extends CustomElement {
 	}
 
 	/**
-	 * 
+	 *
 	 * @param html
 	 * @returns {Viewer}
 	 */

package/source/components/layout/popper.mjs

@@ -358,19 +358,15 @@ function attachResizeObserver() {
 	});
 
 	requestAnimationFrame(() => {
-
 		let parent = this.parentNode;
-		while(!(parent instanceof HTMLElement) && parent !== null) {
+		while (!(parent instanceof HTMLElement) && parent !== null) {
 			parent = parent.parentNode;
 		}
 
 		if (parent instanceof HTMLElement) {
 			this[resizeObserverSymbol].observe(parent);
 		}
-
-
 	});
-
 }
 
 function disconnectResizeObserver() {