@schukai/monster 4.38.2 → 4.38.4

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

@@ -17,9 +17,9 @@ import { diff } from "../../data/diff.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
+  assembleMethodSymbol,
+  CustomElement,
+  registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
 import { isString, isArray } from "../../types/is.mjs";
@@ -35,8 +35,8 @@ import { SaveButtonStyleSheet } from "./stylesheet/save-button.mjs";
 import "../form/state-button.mjs";
 
 import {
-	handleDataSourceChanges,
-	datasourceLinkedElementSymbol,
+  handleDataSourceChanges,
+  datasourceLinkedElementSymbol,
 } from "./util.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 
@@ -73,270 +73,270 @@ const badgeElementSymbol = Symbol("badgeElement");
  * @summary This is a save button component that can be used to save changes to a datasource.
  */
 class SaveButton extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/datatable/save-button@@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} datasource The datasource
-	 * @property {string} datasource.selector The selector of the datasource
-	 * @property {string} labels.button The button label
-	 * @property {Object} classes The classes
-	 * @property {string} classes.bar The bar class
-	 * @property {string} classes.badge The badge class
-	 * @property {Array} ignoreChanges The ignore changes (regex)
-	 * @property {Array} data The data
-	 * @property {boolean} disabled The disabled state
-	 * @property {string} logLevel The log level (off, debug)
-	 * @return {Object}
-	 */
-	get defaults() {
-		const obj = Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			labels: getTranslations(),
-
-			classes: {
-				bar: "monster-button-primary",
-				badge: "monster-badge-secondary hidden",
-			},
-
-			datasource: {
-				selector: null,
-			},
-
-			changes: "0",
-
-			ignoreChanges: [],
-
-			data: {},
-
-			disabled: false,
-
-			logLevel: "off",
-		});
-
-		updateOptionsFromArguments.call(this, obj);
-		return obj;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-datasource-save-button";
-	}
-
-	/**
-	 * 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]();
-		const self = this;
-
-		initControlReferences.call(this);
-		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");
-			}
-
-			if (element instanceof RestDatasource) {
-				element.addEventListener("monster-datasource-fetch", (event) => {
-					self[originValuesSymbol] = null;
-				});
-			}
-
-			this[datasourceLinkedElementSymbol] = element;
-			element.datasource.attachObserver(
-				new Observer(handleDataSourceChanges.bind(this)),
-			);
-
-			self[originValuesSymbol] = null;
-
-			element.datasource.attachObserver(
-				new Observer(function () {
-					if (!self[originValuesSymbol]) {
-						self[originValuesSymbol] = clone(
-							self[datasourceLinkedElementSymbol].data,
-						);
-					}
-
-					const currentValues = this.getRealSubject();
-					const ignoreChanges = self.getOption("ignoreChanges");
-
-					const result = diff(self[originValuesSymbol], currentValues);
-					if (self.getOption("logLevel") === "debug") {
-						console.groupCollapsed("SaveButton");
-						console.log(
-							"originValues",
-							JSON.parse(JSON.stringify(currentValues)),
-						);
-						console.log("result of diff", result);
-						console.log("ignoreChanges", ignoreChanges);
-
-						if (isArray(result) && result.length > 0) {
-							const formattedDiff = result.map((change) => ({
-								Operator: change?.operator,
-								Path: change?.path?.join("."),
-								"First Value": change?.first?.value,
-								"First Type": change?.first?.type,
-								"Second Value": change?.second?.value,
-								"Second Type": change?.second?.type,
-							}));
-
-							console.table(formattedDiff);
-						} else {
-							console.log("There are no changes to save");
-						}
-						console.groupEnd();
-					}
-
-					if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
-						const itemsToRemove = [];
-						for (const item of result) {
-							for (const ignorePattern of ignoreChanges) {
-								const p = new RegExp(ignorePattern);
-
-								let matchPath = item.path;
-								if (isArray(item.path)) {
-									matchPath = item.path.join(".");
-								}
-
-								if (p.test(matchPath)) {
-									itemsToRemove.push(item);
-									break;
-								}
-							}
-						}
-
-						for (const itemToRemove of itemsToRemove) {
-							const index = result.indexOf(itemToRemove);
-							if (index > -1) {
-								result.splice(index, 1);
-							}
-						}
-					}
-
-					if (isArray(result) && result.length > 0) {
-						self[stateButtonElementSymbol].setState("changed");
-						self[stateButtonElementSymbol].setOption("disabled", false);
-						self.setOption("changes", result.length);
-						self.setOption(
-							"classes.badge",
-							new TokenList(self.getOption("classes.badge"))
-								.remove("hidden")
-								.toString(),
-						);
-					} else {
-						self[stateButtonElementSymbol].removeState();
-						self[stateButtonElementSymbol].setOption("disabled", true);
-						self.setOption("changes", 0);
-						self.setOption(
-							"classes.badge",
-							new TokenList(self.getOption("classes.badge"))
-								.add("hidden")
-								.toString(),
-						);
-					}
-				}),
-			);
-		}
-
-		this.attachObserver(
-			new Observer(() => {
-				handleDataSourceChanges.call(this);
-			}),
-		);
-	}
-
-	/**
-	 *
-	 * @return [CSSStyleSheet]
-	 */
-	static getCSSStyleSheet() {
-		return [SaveButtonStyleSheet, BadgeStyleSheet];
-	}
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for(
+      "@schukai/monster/components/datatable/save-button@@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} datasource The datasource
+   * @property {string} datasource.selector The selector of the datasource
+   * @property {string} labels.button The button label
+   * @property {Object} classes The classes
+   * @property {string} classes.bar The bar class
+   * @property {string} classes.badge The badge class
+   * @property {Array} ignoreChanges The ignore changes (regex)
+   * @property {Array} data The data
+   * @property {boolean} disabled The disabled state
+   * @property {string} logLevel The log level (off, debug)
+   * @return {Object}
+   */
+  get defaults() {
+    const obj = Object.assign({}, super.defaults, {
+      templates: {
+        main: getTemplate(),
+      },
+
+      labels: getTranslations(),
+
+      classes: {
+        bar: "monster-button-primary",
+        badge: "monster-badge-secondary hidden",
+      },
+
+      datasource: {
+        selector: null,
+      },
+
+      changes: "0",
+
+      ignoreChanges: [],
+
+      data: {},
+
+      disabled: false,
+
+      logLevel: "off",
+    });
+
+    updateOptionsFromArguments.call(this, obj);
+    return obj;
+  }
+
+  /**
+   *
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-datasource-save-button";
+  }
+
+  /**
+   * 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]();
+    const self = this;
+
+    initControlReferences.call(this);
+    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");
+      }
+
+      if (element instanceof RestDatasource) {
+        element.addEventListener("monster-datasource-fetch", (event) => {
+          self[originValuesSymbol] = null;
+        });
+      }
+
+      this[datasourceLinkedElementSymbol] = element;
+      element.datasource.attachObserver(
+        new Observer(handleDataSourceChanges.bind(this)),
+      );
+
+      self[originValuesSymbol] = null;
+
+      element.datasource.attachObserver(
+        new Observer(function () {
+          if (!self[originValuesSymbol]) {
+            self[originValuesSymbol] = clone(
+              self[datasourceLinkedElementSymbol].data,
+            );
+          }
+
+          const currentValues = this.getRealSubject();
+          const ignoreChanges = self.getOption("ignoreChanges");
+
+          const result = diff(self[originValuesSymbol], currentValues);
+          if (self.getOption("logLevel") === "debug") {
+            console.groupCollapsed("SaveButton");
+            console.log(
+              "originValues",
+              JSON.parse(JSON.stringify(currentValues)),
+            );
+            console.log("result of diff", result);
+            console.log("ignoreChanges", ignoreChanges);
+
+            if (isArray(result) && result.length > 0) {
+              const formattedDiff = result.map((change) => ({
+                Operator: change?.operator,
+                Path: change?.path?.join("."),
+                "First Value": change?.first?.value,
+                "First Type": change?.first?.type,
+                "Second Value": change?.second?.value,
+                "Second Type": change?.second?.type,
+              }));
+
+              console.table(formattedDiff);
+            } else {
+              console.log("There are no changes to save");
+            }
+            console.groupEnd();
+          }
+
+          if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
+            const itemsToRemove = [];
+            for (const item of result) {
+              for (const ignorePattern of ignoreChanges) {
+                const p = new RegExp(ignorePattern);
+
+                let matchPath = item.path;
+                if (isArray(item.path)) {
+                  matchPath = item.path.join(".");
+                }
+
+                if (p.test(matchPath)) {
+                  itemsToRemove.push(item);
+                  break;
+                }
+              }
+            }
+
+            for (const itemToRemove of itemsToRemove) {
+              const index = result.indexOf(itemToRemove);
+              if (index > -1) {
+                result.splice(index, 1);
+              }
+            }
+          }
+
+          if (isArray(result) && result.length > 0) {
+            self[stateButtonElementSymbol].setState("changed");
+            self[stateButtonElementSymbol].setOption("disabled", false);
+            self.setOption("changes", result.length);
+            self.setOption(
+              "classes.badge",
+              new TokenList(self.getOption("classes.badge"))
+                .remove("hidden")
+                .toString(),
+            );
+          } else {
+            self[stateButtonElementSymbol].removeState();
+            self[stateButtonElementSymbol].setOption("disabled", true);
+            self.setOption("changes", 0);
+            self.setOption(
+              "classes.badge",
+              new TokenList(self.getOption("classes.badge"))
+                .add("hidden")
+                .toString(),
+            );
+          }
+        }),
+      );
+    }
+
+    this.attachObserver(
+      new Observer(() => {
+        handleDataSourceChanges.call(this);
+      }),
+    );
+  }
+
+  /**
+   *
+   * @return [CSSStyleSheet]
+   */
+  static getCSSStyleSheet() {
+    return [SaveButtonStyleSheet, BadgeStyleSheet];
+  }
 }
 
 function getTranslations() {
-	const locale = getLocaleOfDocument();
-	switch (locale.language) {
-		case "de":
-			return {
-				button: "Speichern",
-			};
-		case "fr":
-			return {
-				button: "Enregistrer",
-			};
-		case "sp":
-			return {
-				button: "Guardar",
-			};
-		case "it":
-			return {
-				button: "Salva",
-			};
-		case "pl":
-			return {
-				button: "Zapisz",
-			};
-		case "no":
-			return {
-				button: "Lagre",
-			};
-		case "dk":
-			return {
-				button: "Gem",
-			};
-		case "sw":
-			return {
-				button: "Spara",
-			};
-		default:
-		case "en":
-			return {
-				button: "Save",
-			};
-	}
+  const locale = getLocaleOfDocument();
+  switch (locale.language) {
+    case "de":
+      return {
+        button: "Speichern",
+      };
+    case "fr":
+      return {
+        button: "Enregistrer",
+      };
+    case "sp":
+      return {
+        button: "Guardar",
+      };
+    case "it":
+      return {
+        button: "Salva",
+      };
+    case "pl":
+      return {
+        button: "Zapisz",
+      };
+    case "no":
+      return {
+        button: "Lagre",
+      };
+    case "dk":
+      return {
+        button: "Gem",
+      };
+    case "sw":
+      return {
+        button: "Spara",
+      };
+    default:
+    case "en":
+      return {
+        button: "Save",
+      };
+  }
 }
 
 /**
@@ -350,68 +350,71 @@ function getTranslations() {
  * @throws {Error} the selector must match exactly one element
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[stateButtonElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=state-button]",
-	);
-
-	this[badgeElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=badge]",
-	);
-
-	if (this[stateButtonElementSymbol]) {
-		queueMicrotask(() => {
-			const states = {
-				changed: new State(
-					"changed",
-					'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">' +
-						'<path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>' +
-						'<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>' +
-						"</svg>",
-				),
-			};
-
-			this[stateButtonElementSymbol].removeState();
-			this[stateButtonElementSymbol].setOption("disabled", "disabled");
-			this[stateButtonElementSymbol].setOption("states", states);
-			this[stateButtonElementSymbol].setOption(
-				"labels.button",
-				this.getOption("labels.button"),
-			);
-		});
-	}
-
-	return this;
+  if (!this.shadowRoot) {
+    throw new Error("no shadow-root is defined");
+  }
+
+  this[stateButtonElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=state-button]",
+  );
+
+  this[badgeElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=badge]",
+  );
+
+  if (this[stateButtonElementSymbol]) {
+    queueMicrotask(() => {
+      const states = {
+        changed: new State(
+          "changed",
+          '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">' +
+            '<path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>' +
+            '<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>' +
+            "</svg>",
+        ),
+      };
+
+      this[stateButtonElementSymbol].removeState();
+      this[stateButtonElementSymbol].setOption("disabled", "disabled");
+      this[stateButtonElementSymbol].setOption("states", states);
+      this[stateButtonElementSymbol].setOption(
+        "labels.button",
+        this.getOption("labels.button"),
+      );
+    });
+  }
+
+  return this;
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	queueMicrotask(() => {
-		this[stateButtonElementSymbol].setOption("actions.click", () => {
-			this[datasourceLinkedElementSymbol]
-				.write()
-				.then(() => {
-					this[originValuesSymbol] = null;
-					this[stateButtonElementSymbol].removeState();
-					this[stateButtonElementSymbol].setOption("disabled", true);
-					this.setOption("changes", 0);
-					this.setOption(
-						"classes.badge",
-						new TokenList(this.getOption("classes.badge"))
-							.add("hidden")
-							.toString(),
-					);
-				})
-				.catch((error) => {
-					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
-				});
-		});
-	});
+  queueMicrotask(() => {
+    this[stateButtonElementSymbol].setOption("actions.click", () => {
+      this[datasourceLinkedElementSymbol]
+        .write()
+        .then(() => {
+          this[originValuesSymbol] = null;
+          this[originValuesSymbol] = clone(
+            this[datasourceLinkedElementSymbol].data,
+          );
+          this[stateButtonElementSymbol].removeState();
+          this[stateButtonElementSymbol].setOption("disabled", true);
+          this.setOption("changes", 0);
+          this.setOption(
+            "classes.badge",
+            new TokenList(this.getOption("classes.badge"))
+              .add("hidden")
+              .toString(),
+          );
+        })
+        .catch((error) => {
+          addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
+        });
+    });
+  });
 }
 
 /**
@@ -419,10 +422,10 @@ function initEventHandler() {
  * @deprecated 2024-12-31
  */
 function updateOptionsFromArguments(options) {
-	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
-	if (selector) {
-		options.datasource.selector = selector;
-	}
+  const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
+  if (selector) {
+    options.datasource.selector = selector;
+  }
 }
 
 /**
@@ -430,8 +433,8 @@ function updateOptionsFromArguments(options) {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
 		<div data-monster-role="control" part="control"
 			 data-monster-attributes="disabled path:disabled | if:true">
 			<monster-state-button data-monster-role="state-button"></monster-state-button>