@schukai/monster 3.65.21 → 3.66.0

package/CHANGELOG.md

@@ -2,20 +2,38 @@
 
 
 
+## [3.66.0] - 2024-06-21
+
+### Add Features
+
+- new flag feature.useStrictValueComparison [#206](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/206)
+- new flag features.storeFetchedData and function Select::getLastFetchedData [#204](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/204)
+### Bug Fixes
+
+- [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200)
+- [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200) changes
+- [#201](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/201)
+- slight color adjustments
+### Changes
+
+- tidy project files
+- [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200) move to close
+- [#200](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/200) move to close
+
+
+
 ## [3.65.21] - 2024-06-20
 
 ### Bug Fixes
 
-- exchange of document.selector with function findElementWithSelectorUpwards [#199](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/199)
+- exchange of `document.selector` with function findElementWithSelectorUpwards [#199](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/199)
 
 ## [3.65.20] - 2024-06-20
 
-- Changeover to new release process
+- Changeover to a new release process
 
 ## [3.65.3] - 2024-06-19
 
-### Bug Fixes
-
 - switch nodejs_22 to nodejs_20 (segmentation fault)
 
 ## [3.65.1] - 2024-06-17

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.65.21"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.66.0"}

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

@@ -20,7 +20,7 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
 import { isString } from "../../types/is.mjs";
 import { State } from "../form/types/state.mjs";
 import "../form/state-button.mjs";
@@ -190,9 +190,8 @@ function initControlReferences() {
 	const selector = this.getOption("dataset.selector");
 
 	if (isString(selector)) {
-
-		const element = findElementWithSelectorUpwards( this,selector);
-		if (element===null) {
+		const element = findElementWithSelectorUpwards(this, selector);
+		if (element === null) {
 			throw new Error("the selector must match exactly one element");
 		}
 
@@ -206,8 +205,8 @@ function initControlReferences() {
 	const selector2 = this.getOption("overlay.selector");
 
 	if (isString(selector2)) {
-		const element = findElementWithSelectorUpwards( this,selector);
-		if (element===null) {
+		const element = findElementWithSelectorUpwards(this, selector);
+		if (element === null) {
 			throw new Error("the selector must match exactly one element");
 		}
 

package/source/components/datatable/dataset.mjs

@@ -12,33 +12,33 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol, internalSymbol} from "../../constants.mjs";
-import {Pathfinder} from "../../data/pathfinder.mjs";
-import {getLinkedObjects, hasObjectLink} from "../../dom/attributes.mjs";
-import {customElementUpdaterLinkSymbol} from "../../dom/constants.mjs";
+import { instanceSymbol, internalSymbol } from "../../constants.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
+import { getLinkedObjects, hasObjectLink } from "../../dom/attributes.mjs";
+import { customElementUpdaterLinkSymbol } from "../../dom/constants.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    attributeObserverSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	attributeObserverSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
-import {isString} from "../../types/is.mjs";
-import {Observer} from "../../types/observer.mjs";
-import {clone} from "../../util/clone.mjs";
+import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
+import { isString } from "../../types/is.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { clone } from "../../util/clone.mjs";
 import {
-    ATTRIBUTE_DATASOURCE_SELECTOR,
-    ATTRIBUTE_DATATABLE_INDEX,
+	ATTRIBUTE_DATASOURCE_SELECTOR,
+	ATTRIBUTE_DATATABLE_INDEX,
 } from "./constants.mjs";
-import {Datasource} from "./datasource.mjs";
-import {DatasetStyleSheet} from "./stylesheet/dataset.mjs";
+import { Datasource } from "./datasource.mjs";
+import { DatasetStyleSheet } from "./stylesheet/dataset.mjs";
 import {
-    handleDataSourceChanges,
-    datasourceLinkedElementSymbol,
+	handleDataSourceChanges,
+	datasourceLinkedElementSymbol,
 } from "./util.mjs";
-import {FormStyleSheet} from "../stylesheet/form.mjs";
+import { FormStyleSheet } from "../stylesheet/form.mjs";
 
-export {DataSet};
+export { DataSet };
 
 /**
  * The data set component is used to show the data of a data source.
@@ -79,184 +79,184 @@ export {DataSet};
  * @summary A data set
  */
 class DataSet extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/dataset@@instance");
-    }
-
-    /**
-     * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
-     *
-     * @return {string[]}
-     * @since 1.15.0
-     */
-    static get observedAttributes() {
-        const attributes = super.observedAttributes;
-        attributes.push(ATTRIBUTE_DATATABLE_INDEX);
-        return attributes;
-    }
-
-    /**
-     * 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} datasource The datasource
-     * @property {string} datasource.selector The selector of the datasource
-     * @property {object} mapping The mapping
-     * @property {string} mapping.data The data
-     * @property {number} mapping.index The index
-     * @property {Array} data The data
-     */
-    get defaults() {
-        const obj = Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-
-            datasource: {
-                selector: null,
-            },
-
-            mapping: {
-                data: "dataset",
-                index: 0,
-            },
-
-            data: {},
-        });
-
-        updateOptionsFromArguments.call(this, obj);
-        return obj;
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-dataset";
-    }
-
-    write() {
-        return new Promise((resolve, reject) => {
-            if (!this[datasourceLinkedElementSymbol]) {
-                reject(new Error("No datasource"));
-                return;
-            }
-
-            const internalUpdateCloneData = this.getInternalUpdateCloneData();
-            if (!internalUpdateCloneData) {
-                reject(new Error("No update data"));
-                return;
-            }
-
-            const internalData = internalUpdateCloneData?.["data"];
-            if (
-                internalData === undefined ||
-                internalData === null ||
-                internalData === ""
-            ) {
-                reject(new Error("No data"));
-                return;
-            }
-
-            setTimeout(() => {
-                const path = this.getOption("mapping.data");
-                const index = this.getOption("mapping.index");
-
-                let pathWithIndex;
-
-                if (isString(path) && path !== "") {
-                    pathWithIndex = path + "." + index;
-                } else {
-                    pathWithIndex = index;
-                }
-
-                const data = this[datasourceLinkedElementSymbol].data;
-                const unref = JSON.stringify(data);
-                const ref = JSON.parse(unref);
-
-                new Pathfinder(ref).setVia(pathWithIndex, internalData);
-
-                this[datasourceLinkedElementSymbol].data = ref;
-
-                resolve();
-            }, 0);
-        });
-    }
-
-    /**
-     * This method is responsible for assembling the component.
-     *
-     * It calls the parent's assemble method first, then initializes control references and event handlers.
-     * If the `datasource.selector` option is provided and is a string, it searches for the corresponding
-     * element in the DOM using that selector.
-     *
-     * If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
-     *
-     * If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
-     * attaches an observer to the datasource's changes.
-     *
-     * The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
-     * Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
-     * method in the component's context.
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        // initControlReferences.call(self);
-        initEventHandler.call(this);
-
-        const selector = this.getOption("datasource.selector");
-
-        if (isString(selector)) {
-            const element = findElementWithSelectorUpwards(this, selector);
-            if (element === null) {
-                throw new Error("the selector must match exactly one element");
-            }
-
-            if (!(element instanceof Datasource)) {
-                throw new TypeError("the element must be a datasource");
-            }
-
-            this[datasourceLinkedElementSymbol] = element;
-            element.datasource.attachObserver(
-                new Observer(handleDataSourceChanges.bind(this)),
-            );
-        }
-
-        this.attachObserver(
-            new Observer(() => {
-                handleDataSourceChanges.call(this);
-            }),
-        );
-    }
-
-    /**
-     * @return [CSSStyleSheet]
-     */
-    static getCSSStyleSheet() {
-        return [FormStyleSheet, DatasetStyleSheet];
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/dataset@@instance");
+	}
+
+	/**
+	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+	 *
+	 * @return {string[]}
+	 * @since 1.15.0
+	 */
+	static get observedAttributes() {
+		const attributes = super.observedAttributes;
+		attributes.push(ATTRIBUTE_DATATABLE_INDEX);
+		return attributes;
+	}
+
+	/**
+	 * 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} datasource The datasource
+	 * @property {string} datasource.selector The selector of the datasource
+	 * @property {object} mapping The mapping
+	 * @property {string} mapping.data The data
+	 * @property {number} mapping.index The index
+	 * @property {Array} data The data
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			datasource: {
+				selector: null,
+			},
+
+			mapping: {
+				data: "dataset",
+				index: 0,
+			},
+
+			data: {},
+		});
+
+		updateOptionsFromArguments.call(this, obj);
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-dataset";
+	}
+
+	write() {
+		return new Promise((resolve, reject) => {
+			if (!this[datasourceLinkedElementSymbol]) {
+				reject(new Error("No datasource"));
+				return;
+			}
+
+			const internalUpdateCloneData = this.getInternalUpdateCloneData();
+			if (!internalUpdateCloneData) {
+				reject(new Error("No update data"));
+				return;
+			}
+
+			const internalData = internalUpdateCloneData?.["data"];
+			if (
+				internalData === undefined ||
+				internalData === null ||
+				internalData === ""
+			) {
+				reject(new Error("No data"));
+				return;
+			}
+
+			setTimeout(() => {
+				const path = this.getOption("mapping.data");
+				const index = this.getOption("mapping.index");
+
+				let pathWithIndex;
+
+				if (isString(path) && path !== "") {
+					pathWithIndex = path + "." + index;
+				} else {
+					pathWithIndex = index;
+				}
+
+				const data = this[datasourceLinkedElementSymbol].data;
+				const unref = JSON.stringify(data);
+				const ref = JSON.parse(unref);
+
+				new Pathfinder(ref).setVia(pathWithIndex, internalData);
+
+				this[datasourceLinkedElementSymbol].data = ref;
+
+				resolve();
+			}, 0);
+		});
+	}
+
+	/**
+	 * This method is responsible for assembling the component.
+	 *
+	 * It calls the parent's assemble method first, then initializes control references and event handlers.
+	 * If the `datasource.selector` option is provided and is a string, it searches for the corresponding
+	 * element in the DOM using that selector.
+	 *
+	 * If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
+	 *
+	 * If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
+	 * attaches an observer to the datasource's changes.
+	 *
+	 * The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
+	 * Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
+	 * method in the component's context.
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		// initControlReferences.call(self);
+		initEventHandler.call(this);
+
+		const selector = this.getOption("datasource.selector");
+
+		if (isString(selector)) {
+			const element = findElementWithSelectorUpwards(this, selector);
+			if (element === null) {
+				throw new Error("the selector must match exactly one element");
+			}
+
+			if (!(element instanceof Datasource)) {
+				throw new TypeError("the element must be a datasource");
+			}
+
+			this[datasourceLinkedElementSymbol] = element;
+			element.datasource.attachObserver(
+				new Observer(handleDataSourceChanges.bind(this)),
+			);
+		}
+
+		this.attachObserver(
+			new Observer(() => {
+				handleDataSourceChanges.call(this);
+			}),
+		);
+	}
+
+	/**
+	 * @return [CSSStyleSheet]
+	 */
+	static getCSSStyleSheet() {
+		return [FormStyleSheet, DatasetStyleSheet];
+	}
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-    this[attributeObserverSymbol][ATTRIBUTE_DATATABLE_INDEX] = () => {
-        const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
-        if (index) {
-            this.setOption("mapping.index", parseInt(index, 10));
-        }
-    };
+	this[attributeObserverSymbol][ATTRIBUTE_DATATABLE_INDEX] = () => {
+		const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
+		if (index) {
+			this.setOption("mapping.index", parseInt(index, 10));
+		}
+	};
 }
 
 /**
@@ -264,17 +264,17 @@ function initEventHandler() {
  * @param {Object} options
  */
 function updateOptionsFromArguments(options) {
-    const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
+	const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
 
-    if (index !== null && index !== undefined) {
-        options.mapping.index = parseInt(index, 10);
-    }
+	if (index !== null && index !== undefined) {
+		options.mapping.index = parseInt(index, 10);
+	}
 
-    const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
+	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
 
-    if (selector) {
-        options.datasource.selector = selector;
-    }
+	if (selector) {
+		options.datasource.selector = selector;
+	}
 }
 
 /**
@@ -282,8 +282,8 @@ function updateOptionsFromArguments(options) {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <slot></slot>
         </div>

package/source/components/datatable/datasource/dom.mjs

@@ -175,7 +175,7 @@ function updateDataSource() {
 
 		data = Object.assign({}, d);
 	});
-	
+
 	if (data === null) {
 		data = [];
 	}

package/source/components/datatable/datatable.mjs

@@ -65,7 +65,11 @@ import {
 } from "./util.mjs";
 import "./columnbar.mjs";
 import "./filter-button.mjs";
-import {findElementWithSelectorUpwards, getDocument, getWindow} from "../../dom/util.mjs";
+import {
+	findElementWithSelectorUpwards,
+	getDocument,
+	getWindow,
+} from "../../dom/util.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import { getDocumentTranslations } from "../../i18n/translations.mjs";
@@ -275,8 +279,8 @@ class DataTable extends CustomElement {
 		const selector = this.getOption("datasource.selector");
 
 		if (isString(selector)) {
-			const element = findElementWithSelectorUpwards( this,selector);
-			if (element===null) {
+			const element = findElementWithSelectorUpwards(this, selector);
+			if (element === null) {
 				throw new Error("the selector must match exactly one element");
 			}
 
@@ -511,7 +515,7 @@ function getFilterConfigKey() {
  * @returns {Promise}
  */
 function getHostConfig(callback) {
-	const host = findElementWithSelectorUpwards( this,"monster-host");
+	const host = findElementWithSelectorUpwards(this, "monster-host");
 
 	if (!(host && this.id)) {
 		return Promise.resolve({});
@@ -607,7 +611,7 @@ function updateConfigColumnBar() {
 		map[option.name] = option.visible;
 	}
 
-	const host = findElementWithSelectorUpwards( this,"monster-host");
+	const host = findElementWithSelectorUpwards(this, "monster-host");
 	if (!(host && this.id)) {
 		return;
 	}
@@ -814,7 +818,7 @@ function storeOrderStatement(doFetch) {
 	const statement = createOrderStatement(headers);
 	setDataSource.call(this, { orderBy: statement }, doFetch);
 
-	const host = findElementWithSelectorUpwards( this,"monster-host");
+	const host = findElementWithSelectorUpwards(this, "monster-host");
 	if (!(host && this.id)) {
 		return;
 	}

package/source/components/datatable/filter.mjs

@@ -726,7 +726,7 @@ function initTabEvents() {
 				}
 			}
 
-			const host = findElementWithSelectorUpwards( this,"monster-host");
+			const host = findElementWithSelectorUpwards(this, "monster-host");
 			if (!(host && this.id)) {
 				return;
 			}
@@ -767,7 +767,7 @@ function updateFilterTabs() {
 		return;
 	}
 
-	const host = findElementWithSelectorUpwards( this,"monster-host");
+	const host = findElementWithSelectorUpwards(this, "monster-host");
 	if (!(host && this.id)) {
 		return;
 	}
@@ -1065,7 +1065,7 @@ function getControlValuesFromLabel(label) {
  * @returns {Promise<unknown>}
  */
 function initFromConfig() {
-	const host = findElementWithSelectorUpwards( this,"monster-host");
+	const host = findElementWithSelectorUpwards(this, "monster-host");
 
 	if (!(isInstance(host, Host) && this.id)) {
 		return Promise.resolve();
@@ -1108,7 +1108,7 @@ function initFromConfig() {
  * @private
  */
 function updateConfig() {
-	const host = findElementWithSelectorUpwards( this,"monster-host");
+	const host = findElementWithSelectorUpwards(this, "monster-host");
 	if (!(host && this.id)) {
 		return;
 	}

package/source/components/datatable/pagination.mjs

@@ -17,7 +17,7 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
 import { Datasource } from "./datasource.mjs";
@@ -189,11 +189,11 @@ class Pagination extends CustomElement {
 		const selector = this.getOption("datasource.selector", "");
 
 		if (isString(selector)) {
-			const element = findElementWithSelectorUpwards( this,selector);
-			if (element===null) {
+			const element = findElementWithSelectorUpwards(this, selector);
+			if (element === null) {
 				throw new Error("the selector must match exactly one element");
 			}
-			
+
 			if (!(element instanceof Datasource)) {
 				throw new TypeError("the element must be a datasource");
 			}