@schukai/monster 4.1.0 → 4.1.2

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.1.2] - 2025-05-11
+
+### Bug Fixes
+
+- Improved code formatting for clarity in camera-capture component
+### Changes
+
+- update doc
+
+
+
+## [4.1.1] - 2025-05-11
+
+### Bug Fixes
+
+- Modify PDF object tag for clearer intent
+
+
+
 ## [4.1.0] - 2025-05-11
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.0","@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":"4.1.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.0","@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":"4.1.2"}

package/source/components/content/camera-capture.mjs

@@ -12,21 +12,22 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
-import { CustomElement } from "../../dom/customelement.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
+import {CustomElement} from "../../dom/customelement.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { CameraCaptureStyleSheet } from "./stylesheet/camera-capture.mjs";
+import {CameraCaptureStyleSheet} from "./stylesheet/camera-capture.mjs";
 import "../form/button.mjs";
 import "../state/state.mjs";
-import { getLocaleOfDocument } from "../../dom/locale.mjs";
-import { addErrorAttribute } from "../../dom/error.mjs";
-import { Queue } from "../../types/queue.mjs";
+import {getLocaleOfDocument} from "../../dom/locale.mjs";
+import {addErrorAttribute} from "../../dom/error.mjs";
+import {Queue} from "../../types/queue.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
 
-export { CameraCapture };
+export {CameraCapture};
 
 /**
  * @private
@@ -74,150 +75,151 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement");
  * @since 3.111.0
  * @copyright schukai GmbH
  * @summary A simple but powerful camera capture component. It can be used to capture images from the camera.
+ * @fires monster-camera-capture-take-picture
  */
 class CameraCapture extends CustomElement {
-	/**
-	 * Constructor for the CameraCapture class.
-	 * Calls the parent class constructor.
-	 */
-	constructor() {
-		super();
-
-		this[queueSymbol] = new Queue();
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/content/camera-capture@instance",
-		);
-	}
-
-	/**
-	 *
-	 * @return {Components.Content.Copy
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		initCameraControl.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} actions Callbacks
-	 * @property {string} actions.click="throw Error" Callback when clicked
-	 * @property {Object} features Features
-	 * @property {boolean} features.stripTags=true Strip tags from the copied text
-	 * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
-	 * @property {Object} popper Popper configuration
-	 * @property {string} popper.placement="top" Popper placement
-	 * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
-	 * @property {boolean} disabled=false Disabled state
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			disabled: false,
-			features: {},
-
-			labels: getTranslations(),
-		});
-	}
-
-	/**
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-camera-capture";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [CameraCaptureStyleSheet];
-	}
-
-	/**
-	 * Retrieve the next image from the queue.
-	 * If the queue is empty, it returns `null`.
-	 * @returns {string|null}
-	 */
-	getNextImage() {
-		if (!this[queueSymbol].isEmpty()) {
-			const next = this[queueSymbol].poll();
-			if (!next) {
-				return null;
-			}
-			return next;
-		}
-		return null;
-	}
-
-	/**
-	 * Capture an image from the camera and add it to the queue.
-	 * The image is returned as a data URL.
-	 * @returns {string}
-	 */
-	capture() {
-		this[canvasElementSymbol].width = this[videoElementSymbol].videoWidth;
-		this[canvasElementSymbol].height = this[videoElementSymbol].videoHeight;
-		const ctx = this[canvasElementSymbol].getContext("2d");
-		ctx.drawImage(
-			this[videoElementSymbol],
-			0,
-			0,
-			this[canvasElementSymbol].width,
-			this[canvasElementSymbol].height,
-		);
-		const dataURL = this[canvasElementSymbol].toDataURL("image/png");
-		this[queueSymbol].add(dataURL);
-		return dataURL;
-	}
+    /**
+     * Constructor for the CameraCapture class.
+     * Calls the parent class constructor.
+     */
+    constructor() {
+        super();
+
+        this[queueSymbol] = new Queue();
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for(
+            "@schukai/monster/components/content/camera-capture@instance",
+        );
+    }
+
+    /**
+     *
+     * @return {Components.Content.Copy
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+        initCameraControl.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} actions Callbacks
+     * @property {string} actions.click="throw Error" Callback when clicked
+     * @property {Object} features Features
+     * @property {boolean} features.stripTags=true Strip tags from the copied text
+     * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
+     * @property {Object} popper Popper configuration
+     * @property {string} popper.placement="top" Popper placement
+     * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
+     * @property {boolean} disabled=false Disabled state
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            disabled: false,
+            features: {},
+
+            labels: getTranslations(),
+        });
+    }
+
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-camera-capture";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [CameraCaptureStyleSheet];
+    }
+
+    /**
+     * Retrieve the next image from the queue.
+     * If the queue is empty, it returns `null`.
+     * @returns {string|null}
+     */
+    getNextImage() {
+        if (!this[queueSymbol].isEmpty()) {
+            const next = this[queueSymbol].poll();
+            if (!next) {
+                return null;
+            }
+            return next;
+        }
+        return null;
+    }
+
+    /**
+     * Capture an image from the camera and add it to the queue.
+     * The image is returned as a data URL.
+     * @returns {string}
+     */
+    capture() {
+        this[canvasElementSymbol].width = this[videoElementSymbol].videoWidth;
+        this[canvasElementSymbol].height = this[videoElementSymbol].videoHeight;
+        const ctx = this[canvasElementSymbol].getContext("2d");
+        ctx.drawImage(
+            this[videoElementSymbol],
+            0,
+            0,
+            this[canvasElementSymbol].width,
+            this[canvasElementSymbol].height,
+        );
+        const dataURL = this[canvasElementSymbol].toDataURL("image/png");
+        this[queueSymbol].add(dataURL);
+        return dataURL;
+    }
 }
 
 /**
  * @private
  */
 function initCameraControl() {
-	const self = this;
-
-	if (
-		!navigator ||
-		!navigator.mediaDevices ||
-		!navigator.mediaDevices.getUserMedia
-	) {
-		addErrorAttribute(self, "Browser not supported");
-		return;
-	}
-
-	navigator.mediaDevices
-		.getUserMedia({ video: true })
-		.then(function (stream) {
-			self[takePictureButtonElementSymbol].style.display = "block";
-			self[videoElementSymbol].style.display = "block";
-			self[emptyHistoryStateElementSymbol].style.display = "none";
-
-			self[videoElementSymbol].srcObject = stream;
-		})
-		.catch(function (e) {
-			addErrorAttribute(self, e);
-		});
+    const self = this;
+
+    if (
+        !navigator ||
+        !navigator.mediaDevices ||
+        !navigator.mediaDevices.getUserMedia
+    ) {
+        addErrorAttribute(self, "Browser not supported");
+        return;
+    }
+
+    navigator.mediaDevices
+        .getUserMedia({video: true})
+        .then(function (stream) {
+            self[takePictureButtonElementSymbol].style.display = "block";
+            self[videoElementSymbol].style.display = "block";
+            self[emptyHistoryStateElementSymbol].style.display = "none";
+
+            self[videoElementSymbol].srcObject = stream;
+        })
+        .catch(function (e) {
+            addErrorAttribute(self, e);
+        });
 }
 
 /**
@@ -225,161 +227,166 @@ function initCameraControl() {
  * @returns {{takePicture: string}}
  */
 function getTranslations() {
-	const locale = getLocaleOfDocument();
-	switch (locale.language) {
-		case "de":
-			return {
-				takePicture: "Bild aufnehmen",
-				cameraNotSupportedOrNotAllowed:
-					"Die Kamera wird nicht unterstützt oder die Berechtigung wurde nicht erteilt.",
-			};
-
-		case "es":
-			return {
-				takePicture: "Tomar una foto",
-				cameraNotSupportedOrNotAllowed:
-					"La cámara no es compatible o no se ha otorgado permiso.",
-			};
-
-		case "zh":
-			return {
-				takePicture: "拍照",
-				cameraNotSupportedOrNotAllowed: "相机不受支持或未授予权限。",
-			};
-
-		case "hi":
-			return {
-				takePicture: "तस्वीर खींचें",
-				cameraNotSupportedOrNotAllowed:
-					"कैमरा समर्थित नहीं है या अनुमति नहीं दी गई है।",
-			};
-
-		case "bn":
-			return {
-				takePicture: "ছবি তুলুন",
-				cameraNotSupportedOrNotAllowed: "ক্যামেরা সমর্থিত নয় বা অনুমতি দেয়া হয়নি।",
-			};
-
-		case "pt":
-			return {
-				takePicture: "Tirar uma foto",
-				cameraNotSupportedOrNotAllowed:
-					"A câmera não é suportada ou a permissão não foi concedida.",
-			};
-
-		case "ru":
-			return {
-				takePicture: "Сделать фото",
-				cameraNotSupportedOrNotAllowed:
-					"Камера не поддерживается или разрешение не предоставлено.",
-			};
-
-		case "ja":
-			return {
-				takePicture: "写真を撮る",
-				cameraNotSupportedOrNotAllowed:
-					"カメラがサポートされていないか、許可が付与されていません。",
-			};
-
-		case "pa":
-			return {
-				takePicture: "ਤਸਵੀਰ ਖਿੱਚੋ",
-				cameraNotSupportedOrNotAllowed:
-					"ਕੈਮਰਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਜਾਂ ਅਨੁਮਤੀ ਨਹੀਂ ਦਿੱਤੀ ਗਈ ਹੈ।",
-			};
-
-		case "mr":
-			return {
-				takePicture: "फोटो घ्या",
-				cameraNotSupportedOrNotAllowed:
-					"कॅमेरा समर्थित नाही किंवा परवानगी दिलेली नाही.",
-			};
-
-		case "fr":
-			return {
-				takePicture: "Prendre une photo",
-				cameraNotSupportedOrNotAllowed:
-					"La caméra n'est pas prise en charge ou l'autorisation n'a pas été accordée.",
-			};
-
-		case "it":
-			return {
-				takePicture: "Scattare una foto",
-				cameraNotSupportedOrNotAllowed:
-					"La fotocamera non è supportata o l'autorizzazione non è stata concessa.",
-			};
-
-		case "nl":
-			return {
-				takePicture: "Maak een foto",
-				cameraNotSupportedOrNotAllowed:
-					"De camera wordt niet ondersteund of er is geen toestemming verleend.",
-			};
-
-		case "sv":
-			return {
-				takePicture: "Ta ett foto",
-				cameraNotSupportedOrNotAllowed:
-					"Kameran stöds inte eller tillståndet har inte beviljats.",
-			};
-
-		case "pl":
-			return {
-				takePicture: "Zrób zdjęcie",
-				cameraNotSupportedOrNotAllowed:
-					"Kamera nie jest obsługiwana lub nie udzielono zgody.",
-			};
-
-		case "da":
-			return {
-				takePicture: "Tag et billede",
-				cameraNotSupportedOrNotAllowed:
-					"Kameraen understøttes ikke eller tilladelsen er ikke givet.",
-			};
-
-		case "fi":
-			return {
-				takePicture: "Ota kuva",
-				cameraNotSupportedOrNotAllowed:
-					"Kameraa ei tueta tai lupaa ei ole myönnetty.",
-			};
-
-		case "no":
-			return {
-				takePicture: "Ta et bilde",
-				cameraNotSupportedOrNotAllowed:
-					"Kameraen støttes ikke eller tillatelsen er ikke gitt.",
-			};
-
-		case "cs":
-			return {
-				takePicture: "Vyfotit",
-				cameraNotSupportedOrNotAllowed:
-					"Fotoaparát není podporován nebo povolení nebylo uděleno.",
-			};
-
-		case "en":
-		default:
-			return {
-				takePicture: "Take a picture",
-				cameraNotSupportedOrNotAllowed:
-					"The camera is not supported or permission has not been granted.",
-			};
-	}
+    const locale = getLocaleOfDocument();
+    switch (locale.language) {
+        case "de":
+            return {
+                takePicture: "Bild aufnehmen",
+                cameraNotSupportedOrNotAllowed:
+                    "Die Kamera wird nicht unterstützt oder die Berechtigung wurde nicht erteilt.",
+            };
+
+        case "es":
+            return {
+                takePicture: "Tomar una foto",
+                cameraNotSupportedOrNotAllowed:
+                    "La cámara no es compatible o no se ha otorgado permiso.",
+            };
+
+        case "zh":
+            return {
+                takePicture: "拍照",
+                cameraNotSupportedOrNotAllowed: "相机不受支持或未授予权限。",
+            };
+
+        case "hi":
+            return {
+                takePicture: "तस्वीर खींचें",
+                cameraNotSupportedOrNotAllowed:
+                    "कैमरा समर्थित नहीं है या अनुमति नहीं दी गई है।",
+            };
+
+        case "bn":
+            return {
+                takePicture: "ছবি তুলুন",
+                cameraNotSupportedOrNotAllowed: "ক্যামেরা সমর্থিত নয় বা অনুমতি দেয়া হয়নি।",
+            };
+
+        case "pt":
+            return {
+                takePicture: "Tirar uma foto",
+                cameraNotSupportedOrNotAllowed:
+                    "A câmera não é suportada ou a permissão não foi concedida.",
+            };
+
+        case "ru":
+            return {
+                takePicture: "Сделать фото",
+                cameraNotSupportedOrNotAllowed:
+                    "Камера не поддерживается или разрешение не предоставлено.",
+            };
+
+        case "ja":
+            return {
+                takePicture: "写真を撮る",
+                cameraNotSupportedOrNotAllowed:
+                    "カメラがサポートされていないか、許可が付与されていません。",
+            };
+
+        case "pa":
+            return {
+                takePicture: "ਤਸਵੀਰ ਖਿੱਚੋ",
+                cameraNotSupportedOrNotAllowed:
+                    "ਕੈਮਰਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਜਾਂ ਅਨੁਮਤੀ ਨਹੀਂ ਦਿੱਤੀ ਗਈ ਹੈ।",
+            };
+
+        case "mr":
+            return {
+                takePicture: "फोटो घ्या",
+                cameraNotSupportedOrNotAllowed:
+                    "कॅमेरा समर्थित नाही किंवा परवानगी दिलेली नाही.",
+            };
+
+        case "fr":
+            return {
+                takePicture: "Prendre une photo",
+                cameraNotSupportedOrNotAllowed:
+                    "La caméra n'est pas prise en charge ou l'autorisation n'a pas été accordée.",
+            };
+
+        case "it":
+            return {
+                takePicture: "Scattare una foto",
+                cameraNotSupportedOrNotAllowed:
+                    "La fotocamera non è supportata o l'autorizzazione non è stata concessa.",
+            };
+
+        case "nl":
+            return {
+                takePicture: "Maak een foto",
+                cameraNotSupportedOrNotAllowed:
+                    "De camera wordt niet ondersteund of er is geen toestemming verleend.",
+            };
+
+        case "sv":
+            return {
+                takePicture: "Ta ett foto",
+                cameraNotSupportedOrNotAllowed:
+                    "Kameran stöds inte eller tillståndet har inte beviljats.",
+            };
+
+        case "pl":
+            return {
+                takePicture: "Zrób zdjęcie",
+                cameraNotSupportedOrNotAllowed:
+                    "Kamera nie jest obsługiwana lub nie udzielono zgody.",
+            };
+
+        case "da":
+            return {
+                takePicture: "Tag et billede",
+                cameraNotSupportedOrNotAllowed:
+                    "Kameraen understøttes ikke eller tilladelsen er ikke givet.",
+            };
+
+        case "fi":
+            return {
+                takePicture: "Ota kuva",
+                cameraNotSupportedOrNotAllowed:
+                    "Kameraa ei tueta tai lupaa ei ole myönnetty.",
+            };
+
+        case "no":
+            return {
+                takePicture: "Ta et bilde",
+                cameraNotSupportedOrNotAllowed:
+                    "Kameraen støttes ikke eller tillatelsen er ikke gitt.",
+            };
+
+        case "cs":
+            return {
+                takePicture: "Vyfotit",
+                cameraNotSupportedOrNotAllowed:
+                    "Fotoaparát není podporován nebo povolení nebylo uděleno.",
+            };
+
+        case "en":
+        default:
+            return {
+                takePicture: "Take a picture",
+                cameraNotSupportedOrNotAllowed:
+                    "The camera is not supported or permission has not been granted.",
+            };
+    }
 }
 
 /**
  * @private
  * @return {initEventHandler}
+ * @fires monster-camera-capture-take-picture
  */
 function initEventHandler() {
-	const self = this;
+    const self = this;
 
-	this[takePictureButtonElementSymbol].setOption("actions.click", function () {
-		self.capture();
-	});
+    this[takePictureButtonElementSymbol].setOption("actions.click", function () {
+        fireCustomEvent(self, "monster-camera-capture-take-picture", {
+            element: self,
+        });
 
-	return this;
+        self.capture();
+    });
+
+    return this;
 }
 
 /**
@@ -387,22 +394,22 @@ function initEventHandler() {
  * @return {void}
  */
 function initControlReferences() {
-	this[controlElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="control"]`,
-	);
+    this[controlElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="control"]`,
+    );
 
-	this[takePictureButtonElementSymbol] = this.shadowRoot.querySelector(
-		`[data-monster-role="takePicture"]`,
-	);
+    this[takePictureButtonElementSymbol] = this.shadowRoot.querySelector(
+        `[data-monster-role="takePicture"]`,
+    );
 
-	this[videoElementSymbol] = this.shadowRoot.querySelector(`video`);
+    this[videoElementSymbol] = this.shadowRoot.querySelector(`video`);
 
-	this[canvasElementSymbol] = this.shadowRoot.querySelector(`canvas`);
+    this[canvasElementSymbol] = this.shadowRoot.querySelector(`canvas`);
 
-	// data-monster-role="emptyHistoryState"
-	this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
-		`[data-monster-role="emptyHistoryState"]`,
-	);
+    // data-monster-role="emptyHistoryState"
+    this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
+        `[data-monster-role="emptyHistoryState"]`,
+    );
 }
 
 /**
@@ -410,8 +417,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <div data-monster-role="control" part="control">
             <monster-state data-monster-role="emptyHistoryState">
                 <svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

package/source/components/content/viewer.mjs

@@ -167,7 +167,7 @@ class Viewer extends CustomElement {
 		}
 
 		const html =
-			'<object data="' +
+			'<object part="pdf" data="' +
 			pdfURL +
 			'" width="100%" height="100%" type="application/pdf"></object>';
 

package/source/components/datatable/datatable/header.mjs

@@ -171,7 +171,7 @@ class Header extends Base {
 	}
 
 	/**
-	 * @param {string} grid
+	 * @return {string}
 	 */
 	get grid() {
 		return this.getInternal("grid");
@@ -191,6 +191,9 @@ class Header extends Base {
 		return this.getInternal("html");
 	}
 
+	/**
+	 * @return {string}
+	 */
 	get order() {
 		return this.getInternal("order");
 	}