saasufy-components 7.7.7 → 7.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "7.7.7",
+  "version": "7.9.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/styles.css

@@ -65,7 +65,7 @@ input[type=button][disabled],input[type=submit][disabled],button[disabled] {
   opacity: .6;
 }
 
-input[type=text],input[type=password],input[type=button],input[type=submit],input[type=number],select,textarea {
+input[type=text],input[type=password],input[type=button],input[type=submit],input[type=number],select,textarea,button {
   padding: 10px;
   font-size: 18px;
   width: 100%;

package/utils.js

@@ -484,6 +484,38 @@ export function formatError(error) {
   return error.code === 1009 ? 'Resource exceeded the maximum size' : error.message;
 }
 
+export function logAttributeChanges(...elementSelectors) {
+  let domObserverCallback = (mutationList) => {
+    for (let mutation of mutationList) {
+      let matchingSelector = (elementSelectors || []).find(elementSelector => mutation.target?.matches(elementSelector));
+      let isWatchingElement = !elementSelectors.length || !!matchingSelector;
+      if (mutation.type === 'attributes' && isWatchingElement) {
+        let identifier = mutation.target.id || matchingSelector || mutation.target.nodeName?.toLowerCase();
+        console.log(
+          `[${identifier}] Attribute ${
+            mutation.attributeName
+          } changed to: ${
+            mutation.target.getAttribute(mutation.attributeName)
+          }`
+        );
+      }
+    }
+  };
+
+  let observer = new MutationObserver(domObserverCallback);
+
+  let config = {
+    attributes: true,
+    subtree: true,
+    attributeOldValue: true
+  };
+
+  observer.observe(document, config);
+  return () => {
+    observer.disconnect();
+  };
+}
+
 export function wait(duration) {
   return new Promise((resolve) => setTimeout(resolve, duration));
 }