@schukai/monster 3.97.1 → 3.98.0

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

@@ -28,6 +28,7 @@ import { isFunction } from "../../types/is.mjs";
 import { FieldSetStyleSheet } from "./stylesheet/field-set.mjs";
 import "../layout/collapse.mjs";
 import "./toggle-switch.mjs";
+import {getLocaleOfDocument} from "../../dom/locale.mjs";
 
 export { FieldSet };
 
@@ -120,12 +121,7 @@ class FieldSet extends CustomControl {
 			templates: {
 				main: getTemplate(),
 			},
-			labels: {
-				toggleSwitchOn: "✔",
-				toggleSwitchOff: "✖",
-				toggleSwitchLabel: "Expand",
-				title: "",
-			},
+			labels:getTranslations(),
 			classes: {},
 			disabled: false,
 			features: {
@@ -246,6 +242,81 @@ class FieldSet extends CustomControl {
 	}
 }
 
+/**
+ * @private
+ * @returns {object}
+ */
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case 'de':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Erweitern",
+				title: ""
+			};
+		case 'fr':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Développer",
+				title: ""
+			};
+		case 'sp':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expandir",
+				title: ""
+			};
+		case 'it':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Espandi",
+				title: ""
+			};
+		case 'pl':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Rozwiń",
+				title: ""
+			};
+		case 'no':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Utvid",
+				title: ""
+			};
+		case 'dk':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Udvid",
+				title: ""
+			};
+		case 'sw':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expandera",
+				title: ""
+			};
+		default:
+		case 'en':
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expand",
+				title: ""
+			};
+	}
+}
+
+
 /**
  * @private
  */

package/source/components/form/select.mjs

@@ -61,6 +61,7 @@ import {
 	getDocumentTranslations,
 	Translations,
 } from "../../i18n/translations.mjs";
+import {getLocaleOfDocument} from "../../dom/locale.mjs";
 
 export {
 	Select,
@@ -69,18 +70,6 @@ export {
 	getSelectionTemplate,
 };
 
-/**
- * @private
- * @type {string}
- */
-const noOptionsAvailableMessage = "No options available.";
-
-/**
- * @private
- * @type {string}
- */
-const clickToLoadOptionsMessage = "Click to load options.";
-
 /**
  * @private
  * @type {Symbol}
@@ -438,22 +427,7 @@ class Select extends CustomControl {
 					url: null,
 					grouping: false,
 				},
-				labels: {
-					"cannot-be-loaded": "Cannot be loaded",
-					"no-options-available": noOptionsAvailableMessage,
-					"click-to-load-options": clickToLoadOptionsMessage,
-					"select-an-option": "Select an option",
-					"summary-text": {
-						zero: "No entries were selected",
-						one: '<span class="monster-badge-primary-pill">1</span> entry was selected',
-						other:
-							'<span class="monster-badge-primary-pill">${count}</span> entries were selected',
-					},
-					"no-options":
-						"Unfortunately, there are no options available in the list.",
-					"no-options-found":
-						"No options are available in the list. Please consider modifying the filter.",
-				},
+				labels: getTranslations(),
 				messages: {
 					control: null,
 					selected: null,
@@ -778,6 +752,147 @@ class Select extends CustomControl {
 	}
 }
 
+/**
+ * @private
+ * @returns {object}
+ */
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case 'de':
+			return {
+				"cannot-be-loaded": "Kann nicht geladen werden",
+				"no-options-available": "Keine Optionen verfügbar.",
+				"click-to-load-options": "Klicken, um Optionen zu laden.",
+				"select-an-option": "Wähle eine Option",
+				"summary-text": {
+					zero: "Keine Einträge ausgewählt",
+					one: '<span class="monster-badge-primary-pill">1</span> Eintrag ausgewählt',
+					other: '<span class="monster-badge-primary-pill">${count}</span> Einträge ausgewählt',
+				},
+				"no-options": "Leider gibt es keine Optionen in der Liste.",
+				"no-options-found": "Keine Optionen in der Liste verfügbar. Bitte ändern Sie den Filter."
+			};
+		case 'fr':
+			return {
+				"cannot-be-loaded": "Impossible de charger",
+				"no-options-available": "Aucune option disponible.",
+				"click-to-load-options": "Cliquez pour charger les options.",
+				"select-an-option": "Sélectionnez une option",
+				"summary-text": {
+					zero: "Aucune entrée sélectionnée",
+					one: '<span class="monster-badge-primary-pill">1</span> entrée sélectionnée',
+					other: '<span class="monster-badge-primary-pill">${count}</span> entrées sélectionnées',
+				},
+				"no-options": "Malheureusement, il n'y a pas d'options disponibles dans la liste.",
+				"no-options-found": "Aucune option disponible dans la liste. Veuillez modifier le filtre."
+			};
+
+		case 'sp':
+			return {
+				"cannot-be-loaded": "No se puede cargar",
+				"no-options-available": "No hay opciones disponibles.",
+				"click-to-load-options": "Haga clic para cargar opciones.",
+				"select-an-option": "Seleccione una opción",
+				"summary-text": {
+					zero: "No se seleccionaron entradas",
+					one: '<span class="monster-badge-primary-pill">1</span> entrada seleccionada',
+					other: '<span class="monster-badge-primary-pill">${count}</span> entradas seleccionadas',
+				},
+				"no-options": "Desafortunadamente, no hay opciones disponibles en la lista.",
+				"no-options-found": "No hay opciones disponibles en la lista. Considere modificar el filtro."
+			};
+		case 'it':
+			return {
+				"cannot-be-loaded": "Non può essere caricato",
+				"no-options-available": "Nessuna opzione disponibile.",
+				"click-to-load-options": "Clicca per caricare le opzioni.",
+				"select-an-option": "Seleziona un'opzione",
+				"summary-text": {
+					zero: "Nessuna voce selezionata",
+					one: '<span class="monster-badge-primary-pill">1</span> voce selezionata',
+					other: '<span class="monster-badge-primary-pill">${count}</span> voci selezionate',
+				},
+				"no-options": "Purtroppo, non ci sono opzioni disponibili nella lista.",
+				"no-options-found": "Nessuna opzione disponibile nella lista. Si prega di modificare il filtro."
+			};
+		case 'pl':
+			return {
+				"cannot-be-loaded": "Nie można załadować",
+				"no-options-available": "Brak dostępnych opcji.",
+				"click-to-load-options": "Kliknij, aby załadować opcje.",
+				"select-an-option": "Wybierz opcję",
+				"summary-text": {
+					zero: "Nie wybrano żadnych wpisów",
+					one: '<span class="monster-badge-primary-pill">1</span> wpis został wybrany',
+					other: '<span class="monster-badge-primary-pill">${count}</span> wpisy zostały wybrane',
+				},
+				"no-options": "Niestety, nie ma dostępnych opcji na liście.",
+				"no-options-found": "Brak dostępnych opcji na liście. Rozważ zmianę filtra."
+			};
+		case 'no':
+			return {
+				"cannot-be-loaded": "Kan ikke lastes",
+				"no-options-available": "Ingen alternativer tilgjengelig.",
+				"click-to-load-options": "Klikk for å laste alternativer.",
+				"select-an-option": "Velg et alternativ",
+				"summary-text": {
+					zero: "Ingen oppføringer ble valgt",
+					one: '<span class="monster-badge-primary-pill">1</span> oppføring valgt',
+					other: '<span class="monster-badge-primary-pill">${count}</span> oppføringer valgt',
+				},
+				"no-options": "Dessverre er det ingen alternativer tilgjengelig i listen.",
+				"no-options-found": "Ingen alternativer tilgjengelig på listen. Vurder å endre filteret."
+			};
+
+		case 'dk':
+			return {
+				"cannot-be-loaded": "Kan ikke indlæses",
+				"no-options-available": "Ingen muligheder tilgængelige.",
+				"click-to-load-options": "Klik for at indlæse muligheder.",
+				"select-an-option": "Vælg en mulighed",
+				"summary-text": {
+					zero: "Ingen indlæg blev valgt",
+					one: '<span class="monster-badge-primary-pill">1</span> indlæg blev valgt',
+					other: '<span class="monster-badge-primary-pill">${count}</span> indlæg blev valgt',
+				},
+				"no-options": "Desværre er der ingen muligheder tilgængelige på listen.",
+				"no-options-found": "Ingen muligheder tilgængelige på listen. Overvej at ændre filteret."
+			};
+		case 'sw':
+			return {
+				"cannot-be-loaded": "Kan inte laddas",
+				"no-options-available": "Inga alternativ tillgängliga.",
+				"click-to-load-options": "Klicka för att ladda alternativ.",
+				"select-an-option": "Välj ett alternativ",
+				"summary-text": {
+					zero: "Inga poster valdes",
+					one: '<span class="monster-badge-primary-pill">1</span> post valdes',
+					other: '<span class="monster-badge-primary-pill">${count}</span> poster valdes',
+				},
+				"no-options": "Tyvärr finns det inga alternativ tillgängliga i listan.",
+				"no-options-found": "Inga alternativ finns tillgängliga i listan. Överväg att modifiera filtret."
+			};
+
+		default:
+		case 'en':
+			return {
+				"cannot-be-loaded": "Cannot be loaded",
+				"no-options-available": "No options available.",
+				"click-to-load-options": "Click to load options.",
+				"select-an-option": "Select an option",
+				"summary-text": {
+					zero: "No entries were selected",
+					one: '<span class="monster-badge-primary-pill">1</span> entry was selected',
+					other: '<span class="monster-badge-primary-pill">${count}</span> entries were selected',
+				},
+				"no-options": "Unfortunately, there are no options available in the list.",
+				"no-options-found": "No options are available in the list. Please consider modifying the filter."
+			};
+	}
+}
+
+
 /**
  * @private
  */
@@ -1192,6 +1307,10 @@ function initOptionObserver() {
 	);
 }
 
+/**
+ * @private
+ * @returns {Translations}
+ */
 function getDefaultTranslation() {
 	const translation = new Translations("en").assignTranslations(
 		this.getOption("labels", {}),
@@ -1906,7 +2025,7 @@ function areOptionsAvailableAndInit() {
 		if (this.getOption("features.emptyValueIfNoOptions") === true) {
 			this.value = "";
 		}
-		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, noOptionsAvailableMessage);
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "No options available.");
 		return false;
 	}
 
@@ -1958,7 +2077,7 @@ function areOptionsAvailableAndInit() {
 
 	setStatusOrRemoveBadges.call(this);
 
-	removeAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, noOptionsAvailableMessage);
+	removeAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "No options available.");
 	return true;
 }
 

package/source/components/layout/details.mjs

@@ -22,6 +22,7 @@ import { isString } from "../../types/is.mjs";
 import { generateUniqueConfigKey } from "../host/util.mjs";
 import { Collapse, nameSymbol } from "./collapse.mjs";
 import { instanceSymbol } from "../../constants.mjs";
+import {getLocaleOfDocument} from "../../dom/locale.mjs";
 
 export { Details };
 
@@ -86,9 +87,7 @@ class Details extends Collapse {
 			templates: {
 				main: getTemplate(),
 			},
-			labels: {
-				button: "Details",
-			},
+			labels: getTranslations(),
 		});
 	}
 
@@ -136,6 +135,54 @@ class Details extends Collapse {
 	}
 }
 
+/**
+ * @private
+ * @returns {object}
+ */
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case 'de':
+			return {
+				button: "Details"
+			};
+		case 'fr':
+			return {
+				button: "Détails"
+			};
+		case 'sp':
+			return {
+				button: "Detalles"
+			};
+		case 'it':
+			return {
+				button: "Dettagli"
+			};
+		case 'pl':
+			return {
+				button: "Szczegóły"
+			};
+		case 'no':
+			return {
+				button: "Detaljer"
+			};
+		case 'dk':
+			return {
+				button: "Detaljer"
+			};
+		case 'sw':
+			return {
+				button: "Detaljer"
+			};
+		default:
+		case 'en':
+			return {
+				button: "Details"
+			};
+	}
+}
+
+
 /**
  * @private
  * @return {Select}

package/source/components/layout/tabs.mjs

@@ -59,6 +59,7 @@ import {
 	popperInstanceSymbol,
 	setEventListenersModifiers,
 } from "../form/util/popper.mjs";
+import {getLocaleOfDocument} from "../../dom/locale.mjs";
 
 export { Tabs };
 
@@ -195,9 +196,7 @@ class Tabs extends CustomElement {
 			templates: {
 				main: getTemplate(),
 			},
-			labels: {
-				"new-tab-label": "New Tab",
-			},
+			labels: getTranslations(),
 			buttons: {
 				standard: [],
 				popper: [],
@@ -374,6 +373,54 @@ class Tabs extends CustomElement {
 	}
 }
 
+/**
+ * @private
+ * @returns {object}
+ */
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case 'de':
+			return {
+				"new-tab-label": "Neuer Tab"
+			};
+		case 'fr':
+			return {
+				"new-tab-label": "Nouvel Onglet"
+			};
+		case 'sp':
+			return {
+				"new-tab-label": "Nueva Pestaña"
+			};
+		case 'it':
+			return {
+				"new-tab-label": "Nuova Scheda"
+			};
+		case 'pl':
+			return {
+				"new-tab-label": "Nowa Karta"
+			};
+		case 'no':
+			return {
+				"new-tab-label": "Ny Fane"
+			};
+		case 'dk':
+			return {
+				"new-tab-label": "Ny Fane"
+			};
+		case 'sw':
+			return {
+				"new-tab-label": "Ny Flik"
+			};
+		default:
+		case 'en':
+			return {
+				"new-tab-label": "New Tab"
+			};
+	}
+}
+
+
 /**
  * @private
  */

package/source/components/notify/monitor-attribute-errors.mjs

@@ -0,0 +1,235 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import {instanceSymbol} from "../../constants.mjs";
+import {addAttributeToken, hasObjectLink} from "../../dom/attributes.mjs";
+import {
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ROLE,
+    customElementUpdaterLinkSymbol,
+} from "../../dom/constants.mjs";
+import {CustomControl} from "../../dom/customcontrol.mjs";
+import {CustomElement} from "../../dom/customelement.mjs";
+import {
+    assembleMethodSymbol,
+    registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {isFunction} from "../../types/is.mjs";
+import {MonitorAttributeErrorsStyleSheet} from "./stylesheet/monitor-attribute-errors.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
+import {getDocument} from "../../dom/util.mjs";
+import {clone} from "../../util/clone.mjs";
+
+export {MonitorAttributeErrors};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const mutationObserversSymbol = Symbol("mutationObservers");
+
+/**
+ * A MonitorAttributeErrors
+ *
+ * @fragments /fragments/components/notify/monitor-attribute-errors/
+ *
+ * @example /examples/components/notify/monitor-attribute-errors-simple
+ *
+ * @since 3.98.0
+ * @copyright schukai GmbH
+ * @summary A beautiful MonitorAttributeErrors that can make your life easier and also looks good.
+ */
+class MonitorAttributeErrors extends CustomElement {
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for(
+            "@schukai/monster/components/notify/monitor-attribute-errors@@instance",
+        );
+    }
+
+    /**
+     *
+     * @return {Components.Notify.MonitorAttributeErrors
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        return this;
+    }
+
+    /**
+     * @return {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        setupMutationObserver.call(this, getDocument());
+    }
+
+    /**
+     * @return {void}
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        deactivateAllObservers.call(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} features Features
+     * @property {boolean} features.notifyUser Notify user (monster-notify control is required)
+     * @property {Object} notifyUser Notify user
+     * @property {string} notifyUser.selector Selector for the notify user control (feature notifyUser must be enabled)
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            features: {
+                notifyUser: false,
+            },
+
+            notifyUser: {
+                selector: "monster-notify",
+            },
+
+            actions: {
+                click: () => {
+                    throw new Error("the click action is not defined");
+                },
+            },
+        });
+    }
+
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-monitor-attribute-errors";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [MonitorAttributeErrorsStyleSheet];
+    }
+}
+
+/**
+ * @private
+ * @param root
+ */
+function setupMutationObserver(root) {
+    const self = this;
+
+    if (!this?.[mutationObserversSymbol]) {
+        this[mutationObserversSymbol] = [];
+    }
+
+    const config = {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["data-monster-error"],
+    };
+
+    const callback = (mutationsList, observer) => {
+        for (const mutation of mutationsList) {
+            if (mutation.type === "childList") {
+                mutation.addedNodes.forEach((node) => {
+                    checkNodeForErrors(node);
+                    observeShadowRoots(node);
+                });
+            }
+            if (
+                mutation.type === "attributes" &&
+                mutation.attributeName === "data-monster-error"
+            ) {
+                const node = mutation.target;
+
+                checkNodeForErrors(node);
+            }
+        }
+    };
+
+    const observer = new MutationObserver(callback);
+    observer.observe(root, config);
+    this[mutationObserversSymbol].push(observer); // Speichert den Observer
+
+    root.querySelectorAll("*").forEach((node) => {
+        checkNodeForErrors(node);
+        observeShadowRoots(node);
+    });
+
+    function checkNodeForErrors(node) {
+        if (node.nodeType === 1 && node.hasAttribute("data-monster-error")) {
+
+            const fktOpen = console.groupCollapsed || console.group || console.log || function () {
+            };
+            const fktLog = console.log || function () {
+            };
+            const fktClose = console.groupEnd || function () {
+            };
+
+            fktOpen("MonitorAttributeErrors " + node.tagName);
+            fktLog(node);
+            fktLog(node.getAttribute('data-monster-error'));
+            fktClose();
+
+            if (self.getOption("features.notifyUser")) {
+                const notifyUser = getDocument().querySelector(self.getOption("notifyUser.selector"));
+                if (notifyUser) {
+                    notifyUser.push(node.getAttribute('data-monster-error'));
+                }
+            }
+
+        }
+    }
+
+    function observeShadowRoots(node) {
+        if (
+            node.nodeType === 1 &&
+            node.shadowRoot &&
+            node.shadowRoot.mode === "open"
+        ) {
+            setupMutationObserver.call(self, node.shadowRoot);
+        }
+    }
+}
+
+function deactivateAllObservers() {
+    this[mutationObserversSymbol].forEach((observer) => {
+        observer.disconnect();
+    });
+    this[mutationObserversSymbol] = [];
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `<div></div>`;
+}
+
+registerCustomElement(MonitorAttributeErrors);