@schukai/monster 3.102.0 → 3.102.2

package/source/components/datatable/filter.mjs

@@ -157,7 +157,7 @@ const hashChangeSymbol = Symbol("hashChange");
  * @example /examples/components/datatable/filter-advanced Advanced filter
  * @example /examples/components/datatable/filter-store Store filter
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/272.html
  *
  * @copyright schukai GmbH
  * @summary The Filter component is used to show and handle the filter values.

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

@@ -67,7 +67,7 @@ const badgeElementSymbol = Symbol("badgeElement");
  *
  * @example /examples/components/datatable/save-button-simple Simple example
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/274.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/274.html
  *
  * @copyright schukai GmbH
  * @summary This is a save button component that can be used to save changes to a datasource.

package/source/components/datatable/status.mjs

@@ -52,7 +52,7 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
  *
  * @example /examples/components/datatable/datasource-status-simple Simple dataset status
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/274.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/274.html
  *
  * @copyright schukai GmbH
  * @summary The Status component is used to show the current status of a datasource.

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

@@ -48,7 +48,7 @@ const containerElementSymbol = Symbol("containerElement");
  *
  * @example /examples/components/form/action-button
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/264.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/264.html
  *
  * @since 3.32.0
  * @copyright schukai GmbH

package/source/components/form/button.mjs

@@ -48,8 +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
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/283.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/282.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/283.html
  *
  * @copyright schukai GmbH
  * @summary A beautiful button that can make your life easier and also looks good.

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

@@ -50,7 +50,7 @@ const cancelButtonElementSymbol = Symbol("cancelButtonElement");
  *
  * @example /examples/components/form/confirm-button-simple simple confirm button
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/283.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/283.html
  *
  * @since 1.5.0
  * @copyright schukai GmbH

package/source/components/form/form.mjs

@@ -47,7 +47,8 @@ const debounceBindSymbol = Symbol("debounceBind");
  *
  * @example /examples/components/form/form-simple
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/281.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/281.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/217.html
  *
  * @since 1.0.0
  * @copyright schukai GmbH
@@ -179,39 +180,42 @@ 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();
+		setTimeout(() => {
+			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;
-					} catch (e) {
-						if (e.message !== "has already run") {
-							throw e;
+					}
+
+					if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
+						try {
+							this[debounceWriteBackSymbol].touch();
+							return;
+						} catch (e) {
+							if (e.message !== "has already run") {
+								throw e;
+							}
+							delete this[debounceWriteBackSymbol];
 						}
-						delete this[debounceWriteBackSymbol];
 					}
-				}
 
-				this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
-					setTimeout(() => {
-						this.write().catch((e) => {
-							addAttributeToken(this, "error", e.message || `${e}`);
-						});
-					}, 0);
+					this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
+						setTimeout(() => {
+							this.write().catch((e) => {
+								addAttributeToken(this, "error", e.message || `${e}`);
+							});
+						}, 0);
+					});
 				});
-			});
-		}
+			}
+		},0);
 	}
 
 	return this;

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

@@ -83,7 +83,7 @@ const arrowElementSymbol = Symbol("arrowElement");
  *
  * @example /examples/components/form/popper-button-simple
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/283.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/283.html
  *
  * @since 1.5.0
  * @copyright schukai GmbH

package/source/components/form/select.mjs

@@ -349,6 +349,7 @@ class Select extends CustomControl {
         }
 
         const result = convertValueToSelection.call(this, value);
+
         setSelection
             .call(this, result.selection)
             .then(() => {
@@ -2613,63 +2614,63 @@ function initEventHandler() {
 
     const types = self.getOption("toggleEventType", ["click"]);
 
-    for (const [, type] of Object.entries(types)) {
-        self[controlElementSymbol]
-            .querySelector(`[${ATTRIBUTE_ROLE}="container"]`)
-            .addEventListener(type, function (event) {
-                const element = findTargetElementFromEvent(
-                    event,
-                    ATTRIBUTE_ROLE,
-                    "remove-badge",
-                );
-                if (element instanceof HTMLElement) {
-                    return;
-                }
+        for (const [, type] of Object.entries(types)) {
+            self[controlElementSymbol]
+                .querySelector(`[${ATTRIBUTE_ROLE}="container"]`)
+                .addEventListener(type, function (event) {
+                    const element = findTargetElementFromEvent(
+                        event,
+                        ATTRIBUTE_ROLE,
+                        "remove-badge",
+                    );
+                    if (element instanceof HTMLElement) {
+                        return;
+                    }
 
-                toggle.call(self);
-            });
+                    toggle.call(self);
+                });
 
-        self[controlElementSymbol]
-            .querySelector(`[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`)
-            .addEventListener(type, function (event) {
-                if (self.getOption("disabled", undefined) === true) {
-                    return;
-                }
+            self[controlElementSymbol]
+                .querySelector(`[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`)
+                .addEventListener(type, function (event) {
+                    if (self.getOption("disabled", undefined) === true) {
+                        return;
+                    }
 
-                const path = event.composedPath();
-                const element = path?.[0];
-                if (element instanceof HTMLElement) {
-                    const control = element.closest(
-                        `[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`,
-                    );
-                    if (control instanceof HTMLElement) {
-                        if (control.classList.contains("clear")) {
-                            clearSelection.call(self);
-
-                            fireCustomEvent(self, "monster-selection-cleared", {});
-                        } else {
-                            const element = findTargetElementFromEvent(
-                                event,
-                                ATTRIBUTE_ROLE,
-                                "remove-badge",
-                            );
-                            if (element instanceof HTMLElement) {
-                                return;
+                    const path = event.composedPath();
+                    const element = path?.[0];
+                    if (element instanceof HTMLElement) {
+                        const control = element.closest(
+                            `[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`,
+                        );
+                        if (control instanceof HTMLElement) {
+                            if (control.classList.contains("clear")) {
+                                clearSelection.call(self);
+
+                                fireCustomEvent(self, "monster-selection-cleared", {});
+                            } else {
+                                const element = findTargetElementFromEvent(
+                                    event,
+                                    ATTRIBUTE_ROLE,
+                                    "remove-badge",
+                                );
+                                if (element instanceof HTMLElement) {
+                                    return;
+                                }
+
+                                toggle.call(self);
                             }
-
-                            toggle.call(self);
                         }
                     }
-                }
-            });
+                });
 
-        // badge, selection
-        self.addEventListener(type, self[clearOptionEventHandler]);
-    }
+            // badge, selection
+            self.addEventListener(type, self[clearOptionEventHandler]);
+        }
 
-    self.addEventListener("monster-change", self[changeEventHandler]);
-    self.addEventListener("input", self[inputEventHandler]);
-    self.addEventListener("keydown", self[keyEventHandler]);
+        self.addEventListener("monster-change", self[changeEventHandler]);
+        self.addEventListener("input", self[inputEventHandler]);
+        self.addEventListener("keydown", self[keyEventHandler]);
 
     return self;
 }

package/source/components/host/viewer.mjs

@@ -12,272 +12,11 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
-} from "../../dom/customelement.mjs";
-import "../notify/notify.mjs";
-import { ViewerStyleSheet } from "./stylesheet/viewer.mjs";
-import { instanceSymbol } from "../../constants.mjs";
-import { isString } from "../../types/is.mjs";
-import { getGlobal } from "../../types/global.mjs";
-
+import { Viewer as NewViewer } from "../content/viewer.mjs";
 export { Viewer };
 
 /**
- * @private
- * @type {symbol}
- */
-const viewerElementSymbol = Symbol("viewerElement");
-
-/**
- * The Viewer component is used to show a PDF, HTML or Image.
- *
  * @copyright schukai GmbH
- * @summary A simple viewer component
- */
-class Viewer extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/host/viewer@@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
-	 * @property {Object} classes Css classes
-	 * @property {Object} features Feature definitions
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			content: "<slot>",
-			classes: {
-				viewer: "",
-			},
-			features: {},
-		});
-	}
-
-	/**
-	 *
-	 * @param html
-	 * @returns {Viewer}
-	 */
-	setContent(html) {
-		this.setOption("content", html);
-		return this;
-	}
-
-	/**
-	 *
-	 * @param {Blob|URL|string} data
-	 * @param {boolean} navigation
-	 * @param {boolean} toolbar
-	 * @param {boolean} scrollbar
-	 */
-	setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
-		const hashes =
-			"#toolbar=" +
-			(toolbar ? "1" : "0") +
-			"&navpanes=" +
-			(navigation ? "1" : "0") +
-			"&scrollbar=" +
-			(scrollbar ? "1" : "0");
-
-		let pdfContent = "";
-		if (isBlob(data)) {
-			pdfContent = URL.createObjectURL(data);
-			pdfContent += hashes;
-		} else if (isURL(data)) {
-			pdfContent = data;
-			// check if the url already contains the hashes
-			if (pdfContent.indexOf("#") === -1) {
-				pdfContent += hashes;
-			}
-		} else if (isString(data)) {
-			//URL.createObjectURL(data);
-			const blobObj = new Blob([atob(data)], { type: "application/pdf" });
-			const url = window.URL.createObjectURL(blobObj);
-
-			pdfContent = data;
-		} else {
-			throw new Error("Blob or URL expected");
-		}
-
-		const html =
-			'<object data="' +
-			pdfContent +
-			'" width="100%" height="100%" type="application/pdf"></object>';
-		this.setContent(html);
-	}
-
-	/**
-	 *
-	 * @param {Blob|URL|string} data
-	 */
-	setImage(data) {
-		if (isBlob(data)) {
-			data = URL.createObjectURL(data);
-		} else if (isURL(data)) {
-			// nothing to do
-		} else if (isString(data)) {
-			// nothing to do
-		} else {
-			throw new Error("Blob or URL expected");
-		}
-
-		const html = '<img src="' + data + '" alt="image" />';
-		this.setContent(html);
-	}
-
-	/**
-	 *
-	 * if the data is a string, it is interpreted as html
-	 * if the data is a url, the html is loaded from the url and set as content
-	 * if the data is an HTMLElement, the outerHTML is used as content
-	 *
-	 * @param {HTMLElement|URL|string|Blob} data
-	 */
-	setHTML(data) {
-		if (data instanceof Blob) {
-			blobToText(data)
-				.then((html) => {
-					this.setHTML(html);
-				})
-				.catch((error) => {
-					throw new Error(error);
-				});
-
-			return;
-		} else if (data instanceof HTMLElement) {
-			data = data.outerHTML;
-		} else if (isString(data)) {
-			// nothing to do
-		} else if (isURL(data)) {
-			// fetch element
-			getGlobal()
-				.fetch(data)
-				.then((response) => {
-					return response.text();
-				})
-				.then((html) => {
-					this.setHTML(html);
-				})
-				.catch((error) => {
-					throw new Error(error);
-				});
-		} else {
-			throw new Error("HTMLElement or string expected");
-		}
-
-		this.setContent(data);
-	}
-
-	/**
-	 *
-	 * @return {Viewer}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-viewer";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [ViewerStyleSheet];
-	}
-}
-
-/**
- * @private
- * @param variable
- * @return {boolean}
- */
-function isURL(variable) {
-	try {
-		new URL(variable);
-		return true;
-	} catch (error) {
-		return false;
-	}
-}
-
-/**
- * @private
- * @param variable
- * @return {boolean}
- */
-function isBlob(variable) {
-	return variable instanceof Blob;
-}
-
-/**
- * @private
- * @param blob
- * @return {Promise<unknown>}
- */
-function blobToText(blob) {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader();
-		reader.onloadend = () => resolve(reader.result);
-		reader.onerror = reject;
-		reader.readAsText(blob);
-	});
-}
-
-/**
- * @private
- * @return {Select}
- * @throws {Error} no shadow-root is defined
- */
-function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
-}
-
-/**
- * @private
+ * @deprecated since 3.102.0 use Content/Viewer instead
  */
-function initEventHandler() {
-	return this;
-}
-
-/**
- * @private
- * @return {string}
- */
-function getTemplate() {
-	// language=HTML
-	return `
-        <div id="viewer" data-monster-role="viewer" part="viewer" data-monster-replace="path:content" data-monster-attributes="class path:classes.viewer">
-        </div>`;
-}
-
-registerCustomElement(Viewer);
+class Viewer extends NewViewer {}

package/source/components/layout/panel.mjs

@@ -84,7 +84,7 @@ class Panel extends CustomElement {
 
 	/**
 	 *
-	 * @return {Monster.Components.Host.Viewer}
+	 * @return {Panel}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();

package/source/components/layout/split-panel.mjs

@@ -23,6 +23,7 @@ import { Observer } from "../../types/observer.mjs";
 import { SplitPanelStyleSheet } from "./stylesheet/split-panel.mjs";
 import { instanceSymbol } from "../../constants.mjs";
 import { internalSymbol } from "../../constants.mjs";
+import {getDocument} from "../../dom/util.mjs";
 
 export { SplitPanel, TYPE_VERTICAL, TYPE_HORIZONTAL };
 
@@ -69,6 +70,8 @@ const TYPE_HORIZONTAL = "horizontal";
  *
  * @fragments /fragments/components/layout/split-panel/
  *
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/184.html
+ *
  * @example /examples/components/layout/split-panel-simple
  *
  * @since 3.54.0
@@ -294,6 +297,8 @@ function initEventHandler() {
 		});
 	}
 
+	let userSelectDefault = getDocument().body.style.userSelect;
+
 	this[draggerElementSymbol].addEventListener("mousedown", () => {
 		self[internalSymbol].getSubject().isDragging = true;
 
@@ -317,6 +322,8 @@ function initEventHandler() {
 				return;
 			}
 
+			getDocument().body.style.userSelect = "none";
+
 			if (self.getOption("splitType") === TYPE_HORIZONTAL) {
 				const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
 				const topPanel = self[startPanelElementSymbol];
@@ -370,6 +377,10 @@ function initEventHandler() {
 
 		const dragEventHandler = (e) => {
 			self[internalSymbol].getSubject().isDragging = false;
+
+
+			document.body.style.userSelect = userSelectDefault;
+
 			document.removeEventListener("mousemove", eventListener);
 			document.removeEventListener("mouseup", eventListener);
 		};

package/source/components/layout/tabs.mjs

@@ -150,9 +150,9 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @example /examples/components/layout/tabs-active Active Tabs
  * @example /examples/components/layout/tabs-removable Removable Tabs
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/271.html
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/273.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/268.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/271.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/273.html
  *
  * @since 3.74.0
  * @copyright schukai GmbH

package/source/components/notify/message.mjs

@@ -72,7 +72,7 @@ const removeEventHandlerSymbol = Symbol("removeEventHandler");
  *
  * @example /examples/components/notify/message-simple Message
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/269.html
  *
  * @since 1.0.0
  * @copyright schukai GmbH

package/source/components/notify/notify.mjs

@@ -52,7 +52,7 @@ const queueSymbol = Symbol("queue");
  * @example /examples/components/notify/notify-simple Notify
  * @example /examples/components/notify/notify-inline Inline Notify
  *
- * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/269.html
  *
  * @since 1.0.0
  * @copyright schukai GmbH

package/source/dom/updater.mjs

@@ -399,6 +399,10 @@ function retrieveAndSetValue(element) {
                 break;
 
             case "string[]":
+                if (value === "") {
+                    value = [];
+                }
+
                 value = value.split(",").map((v) => `${v}`);
                 break;