@schukai/monster 3.100.5 → 3.100.7

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.100.7] - 2025-01-19
+
+### Bug Fixes
+
+- **datatable:** pagination layout
+
+
+
+## [3.100.6] - 2025-01-18
+
+### Bug Fixes
+
+- accessibility for buttons [#282](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/282)
+
+
+
 ## [3.100.5] - 2025-01-16
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@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.100.5"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@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.100.7"}

package/source/components/datatable/dataset.mjs

@@ -38,7 +38,7 @@ import {
 	datasourceLinkedElementSymbol,
 } from "./util.mjs";
 import { FormStyleSheet } from "../stylesheet/form.mjs";
-import {addErrorAttribute} from "../../dom/error.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
 
 export { DataSet };
 
@@ -237,14 +237,16 @@ class DataSet extends CustomElement {
 		super[assembleMethodSymbol]();
 
 		requestAnimationFrame(() => {
-
 			if (!this[datasourceLinkedElementSymbol]) {
 				const selector = this.getOption("datasource.selector");
 
 				if (isString(selector)) {
 					const element = findElementWithSelectorUpwards(this, selector);
 					if (element === null) {
-						addErrorAttribute(this, "the selector must match exactly one element");
+						addErrorAttribute(
+							this,
+							"the selector must match exactly one element",
+						);
 						return;
 					}
 
@@ -260,8 +262,11 @@ class DataSet extends CustomElement {
 
 					handleDataSourceChanges.call(this);
 				} else {
-					addErrorAttribute(this, "the datasource selector is missing or invalid");
-					return
+					addErrorAttribute(
+						this,
+						"the datasource selector is missing or invalid",
+					);
+					return;
 				}
 			}
 

package/source/components/datatable/datasource.mjs

@@ -116,4 +116,3 @@ class Datasource extends CustomElement {
 		this[dataSourceSymbol].read();
 	}
 }
-

package/source/components/datatable/datatable.mjs

@@ -139,6 +139,8 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @example /examples/components/datatable/order-by Sort data
  * @example /examples/components/datatable/select-rows Select rows
  *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/277.html
+ *
  * @copyright schukai GmbH
  * @summary A beautiful and highly customizable data table. It can be used to display data from a data source.
  * @fires monster-datatable-row-copied

package/source/components/datatable/filter.mjs

@@ -348,14 +348,13 @@ class Filter extends CustomElement {
 				initFilter.call(self);
 				updateFilterTabs.call(self);
 
-				if (self.getOption("features.autoFilter")===true) {
+				if (self.getOption("features.autoFilter") === true) {
 					doSearch
-						.call(self, {showEffect: false})
+						.call(self, { showEffect: false })
 						.then(() => {
 							fireCustomEvent(self, "monster-filter-initialized");
 						})
-						.catch(() => {
-						});
+						.catch(() => {});
 				}
 			});
 	}
@@ -384,7 +383,7 @@ class Filter extends CustomElement {
 	}
 
 	/**
-	 * @return {Array<CSSStyleSheet>}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		return [FilterStyleSheet, FormStyleSheet, ThemeStyleSheet, SpaceStyleSheet];

package/source/components/datatable/style/datatable.pcss

@@ -66,7 +66,7 @@
 ::slotted(.monster-button-group) {
     display: flex;
     flex-direction: row !important;
-    align-items: center;
+    align-items: flex-end;
 }
 
 [data-monster-role=datatable] {

package/source/components/datatable/util.mjs

@@ -14,7 +14,7 @@
 
 import { diff } from "../../data/diff.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
-import {isObject, isPrimitive} from "../../types/is.mjs";
+import { isObject, isPrimitive } from "../../types/is.mjs";
 import { Observer } from "../../types/observer.mjs";
 
 export { handleDataSourceChanges, datasourceLinkedElementSymbol };
@@ -35,7 +35,7 @@ function handleDataSourceChanges() {
 
 	let data = this[datasourceLinkedElementSymbol]?.data;
 
-	if(isPrimitive(data)) {
+	if (isPrimitive(data)) {
 		throw new Error("Data must be an object or an array");
 	}
 

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

@@ -296,7 +296,7 @@ class ApiBar extends ButtonBar {
 	}
 
 	/**
-	 * @return {Array<CSSStyleSheet>}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		const styles = super.getCSSStyleSheet();

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

@@ -274,7 +274,7 @@ class ApiButton extends ActionButton {
 	}
 
 	/**
-	 * @return {Array<CSSStyleSheet>}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		const styles = super.getCSSStyleSheet();

package/source/components/form/button.mjs

@@ -48,6 +48,8 @@ export const buttonElementSymbol = Symbol("buttonElement");
  * @example /examples/components/form/button-simple Simple Button
  * @example /examples/components/form/button-with-click-event Button with event
  *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/282.html
+ *
  * @copyright schukai GmbH
  * @summary A beautiful button that can make your life easier and also looks good.
  * @fires monster-button-clicked this event is triggered when the button is clicked. It contains the field {button} with the button instance.
@@ -196,6 +198,9 @@ class Button extends CustomControl {
 	 * @property {Object} effects Effects
 	 * @property {boolean} effects.ripple=true Ripple effect
 	 * @property {string} type="button" The default behavior of the button. Possible values are: submit, reset, button
+	 * @property {Object} aria Aria attributes
+	 * @property {string} aria.role The role of the button, should only be set if the button is not a button
+	 * @property {string} aria.label="click me!" The label of the button
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -217,6 +222,11 @@ class Button extends CustomControl {
 			},
 			value: null,
 			type: "button",
+
+			aria: {
+				role: null,
+				label: null,
+			},
 		});
 	}
 
@@ -300,14 +310,24 @@ 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
+            <button data-monster-attributes="disabled path:disabled | if:true, 
+                                             class path:classes.button,
+                                             aria-role path:aria.role,
+                                              path:aria.label | if:true,
                                              type path:type"
                     data-monster-role="button"
                     part="button"
+					aria-labelledby="monster-button-aria-label"
                     data-monster-replace="path:labels.button"></button>
+			<div id="monster-button-aria-label" 
+				 class="visually-hidden" data-monster-replace="path:aria.label">click me</div>
         </div>`;
 }
 
+/**
+ * @private
+ * @param event
+ */
 function createRipple(event) {
 	const button = this[buttonElementSymbol];
 

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

@@ -43,51 +43,6 @@ const confirmButtonElementSymbol = Symbol("confirmButtonElement");
  */
 const cancelButtonElementSymbol = Symbol("cancelButtonElement");
 
-/**
- * This action callback executes the actions when a button is clicked.
- *
- * @callback Monster.Components.Form~exampleActionCallback
- * @param {Event} e Event
- * @this {CustomControl}
- */
-
-/**
- * This CustomControl creates a confirm button element with a variety of options.
- *
- * <img src="./images/confirm-button.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-confirm-button />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-confirm-button');` method.
- *
- * ```html
- * <monster-confirm-button></monster-confirm-button>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {ConfirmButton} from '@schukai/component-form/source/confirm-button.js';
- * document.createElement('monster-confirm-button');
- * ```
- * The `data-monster-button-class` attribute can be used to change the CSS class of the button.
- *
- * @startuml confirm-button.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- Button
- * Button <|-- PopperButton
- * PopperButton <|-- ConfirmButton
- * @enduml
- *
- * @copyright schukai GmbH
- * @summary A confirm button
- */
-
 /**
  * A confirm button control.
  *

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

@@ -73,7 +73,7 @@ class ContextHelp extends Popper {
 	}
 
 	/**
-	 * @return {Array<CSSStyleSheet>}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		return [ContextHelpStyleSheet];

package/source/components/form/form.mjs

@@ -14,19 +14,19 @@
 
 import "../datatable/datasource/dom.mjs";
 import "../form/field-set.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {DataSet} from "../datatable/dataset.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { DataSet } from "../datatable/dataset.mjs";
 import {
-    assembleMethodSymbol,
-    registerCustomElement,
-    getSlottedElements,
+	assembleMethodSymbol,
+	registerCustomElement,
+	getSlottedElements,
 } from "../../dom/customelement.mjs";
-import {datasourceLinkedElementSymbol} from "../datatable/util.mjs";
-import {FormStyleSheet} from "./stylesheet/form.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {getDocument} from "../../dom/util.mjs";
+import { datasourceLinkedElementSymbol } from "../datatable/util.mjs";
+import { FormStyleSheet } from "./stylesheet/form.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { getDocument } from "../../dom/util.mjs";
 
-export {Form};
+export { Form };
 
 /**
  * @private
@@ -58,162 +58,163 @@ const debounceBindSymbol = Symbol("debounceBind");
  * @fires monster-changed
  */
 class Form extends DataSet {
-    /**
-     * @property {Object} templates Template definitions
-     * @property {string} templates.main Main template
-     * @property {Object} classes Class definitions
-     * @property {string} classes.form Form class
-     * @property {Object} writeBack Write back definitions
-     * @property {string[]} writeBack.events Write back events
-     * @property {Object} bind Bind definitions
-     * @property {Object} reportValidity Report validity definitions
-     * @property {string} reportValidity.selector Report validity selector
-     * @property {boolean} features.mutationObserver Mutation observer feature
-     * @property {boolean} features.writeBack Write back feature
-     * @property {boolean} features.bind Bind feature
-     */
-    get defaults() {
-        const obj = Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-
-            classes: {
-                form: "",
-            },
-
-            writeBack: {
-                events: ["keyup", "click", "change", "drop", "touchend", "input"],
-            },
-
-            reportValidity: {
-                selector: "input,select,textarea,monster-select,monster-toggle-switch",
-            },
-
-            eventProcessing: true,
-        });
-
-        obj["features"]["mutationObserver"] = false;
-        obj["features"]["writeBack"] = true;
-
-        return obj;
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-form";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [FormStyleSheet];
-    }
-
-    /**
-     *
-     */
-    [assembleMethodSymbol]() {
-        const selector = this.getOption("datasource.selector");
-
-        if (!selector) {
-            this[datasourceLinkedElementSymbol] = getDocument().createElement("monster-datasource-dom");
-        }
-
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        initDataSourceHandler.call(this);
-    }
-
-    /**
-     * This method is called when the component is created.
-     * @since 3.70.0
-     * @return {Promise}
-     */
-    refresh() {
-        return this.write().then(() => {
-            super.refresh();
-            return this;
-        });
-    }
-
-    /**
-     * Run reportValidation on all child html form controls.
-     *
-     * @since 2.10.0
-     * @return {boolean}
-     */
-    reportValidity() {
-        let valid = true;
-
-        const selector = this.getOption("reportValidity.selector");
-        const nodes = getSlottedElements.call(this, selector);
-
-        nodes.forEach((node) => {
-            if (typeof node.reportValidity === "function") {
-                if (node.reportValidity() === false) {
-                    valid = false;
-                }
-            }
-        });
-
-        return valid;
-    }
+	/**
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} classes Class definitions
+	 * @property {string} classes.form Form class
+	 * @property {Object} writeBack Write back definitions
+	 * @property {string[]} writeBack.events Write back events
+	 * @property {Object} bind Bind definitions
+	 * @property {Object} reportValidity Report validity definitions
+	 * @property {string} reportValidity.selector Report validity selector
+	 * @property {boolean} features.mutationObserver Mutation observer feature
+	 * @property {boolean} features.writeBack Write back feature
+	 * @property {boolean} features.bind Bind feature
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			classes: {
+				form: "",
+			},
+
+			writeBack: {
+				events: ["keyup", "click", "change", "drop", "touchend", "input"],
+			},
+
+			reportValidity: {
+				selector: "input,select,textarea,monster-select,monster-toggle-switch",
+			},
+
+			eventProcessing: true,
+		});
+
+		obj["features"]["mutationObserver"] = false;
+		obj["features"]["writeBack"] = true;
+
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-form";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [FormStyleSheet];
+	}
+
+	/**
+	 *
+	 */
+	[assembleMethodSymbol]() {
+		const selector = this.getOption("datasource.selector");
+
+		if (!selector) {
+			this[datasourceLinkedElementSymbol] = getDocument().createElement(
+				"monster-datasource-dom",
+			);
+		}
+
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initDataSourceHandler.call(this);
+	}
+
+	/**
+	 * This method is called when the component is created.
+	 * @since 3.70.0
+	 * @return {Promise}
+	 */
+	refresh() {
+		return this.write().then(() => {
+			super.refresh();
+			return this;
+		});
+	}
+
+	/**
+	 * Run reportValidation on all child html form controls.
+	 *
+	 * @since 2.10.0
+	 * @return {boolean}
+	 */
+	reportValidity() {
+		let valid = true;
+
+		const selector = this.getOption("reportValidity.selector");
+		const nodes = getSlottedElements.call(this, selector);
+
+		nodes.forEach((node) => {
+			if (typeof node.reportValidity === "function") {
+				if (node.reportValidity() === false) {
+					valid = false;
+				}
+			}
+		});
+
+		return valid;
+	}
 }
 
-function initDataSourceHandler() {
-}
+function initDataSourceHandler() {}
 
 /**
  * @private
  * @return {initEventHandler}
  */
 function initEventHandler() {
-    this[debounceBindSymbol] = {};
-
-    if (this.getOption("features.writeBack") === true) {
-        const events = this.getOption("writeBack.events");
-        for (const event of events) {
-            this.addEventListener(event, (e) => {
-                if (!this.reportValidity()) {
-                    this.classList.add("invalid");
-                    setTimeout(() => {
-                        this.classList.remove("invalid");
-                    }, 1000);
-
-                    return;
-                }
-
-                if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
-                    try {
-                        this[debounceWriteBackSymbol].touch();
-                        return;
-                    } catch (e) {
-                        if (e.message !== "has already run") {
-                            throw e;
-                        }
-                        delete this[debounceWriteBackSymbol];
-                    }
-                }
-
-                this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
-                    setTimeout(() => {
-                        this.write().catch((e) => {
-                            addAttributeToken(this, "error", e.message || `${e}`);
-                        });
-                    }, 0);
-                });
-            });
-        }
-    }
-
-    return this;
+	this[debounceBindSymbol] = {};
+
+	if (this.getOption("features.writeBack") === true) {
+		const events = this.getOption("writeBack.events");
+		for (const event of events) {
+			this.addEventListener(event, (e) => {
+				if (!this.reportValidity()) {
+					this.classList.add("invalid");
+					setTimeout(() => {
+						this.classList.remove("invalid");
+					}, 1000);
+
+					return;
+				}
+
+				if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
+					try {
+						this[debounceWriteBackSymbol].touch();
+						return;
+					} catch (e) {
+						if (e.message !== "has already run") {
+							throw e;
+						}
+						delete this[debounceWriteBackSymbol];
+					}
+				}
+
+				this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
+					setTimeout(() => {
+						this.write().catch((e) => {
+							addAttributeToken(this, "error", e.message || `${e}`);
+						});
+					}, 0);
+				});
+			});
+		}
+	}
+
+	return this;
 }
 
 /**
@@ -221,10 +222,10 @@ function initEventHandler() {
  * @return {FilterButton}
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-    return this;
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+	return this;
 }
 
 /**
@@ -232,8 +233,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <form data-monster-attributes="disabled path:disabled | if:true, class path:classes.form"
                   data-monster-role="form"