stimulus-library 0.6.4 → 0.7.2

package/dist/stimulus-library.es.js

@@ -21,6 +21,103 @@ var __publicField = (obj, key, value) => {
 import { Controller } from "stimulus";
 import { camelCase, debounce, upperFirst, clamp, get, set } from "lodash-es";
 import { isPast, intervalToDuration, formatDuration, toDate, formatDistanceToNow } from "date-fns";
+function logProperty(prop) {
+  switch (prop) {
+    case "application":
+    case "el":
+    case "element":
+    case "constructor":
+    case "initialize":
+    case "log":
+    case "logEvent":
+    case "dispatch":
+    case "data":
+    case "valueDescriptorMap":
+    case "mutate":
+    case "identifier":
+      return false;
+  }
+  if (/^_.*?$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?Target(s)?$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?Value$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?ValueChanged$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?Class$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?Classes$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?ClassesPresent$/.test(prop)) {
+    return false;
+  }
+  return true;
+}
+function log(controller, functionName, args = {}) {
+  if (!controller.application.debug) {
+    return;
+  }
+  let logger = console;
+  logger.groupCollapsed(...colorize(controller.identifier, "#3B82F6"), `#${functionName}`);
+  logger.log(__spreadValues({
+    element: controller.element,
+    controller
+  }, args));
+  logger.groupEnd();
+}
+function warn(controller, warning, args = {}) {
+  if (!controller.application.debug) {
+    return;
+  }
+  let logger = console;
+  logger.groupCollapsed(...colorize(controller.identifier, "#F39B1AFF"), `!! ${warning} !!`);
+  logger.warn(__spreadValues({
+    element: controller.element,
+    controller
+  }, args));
+  logger.groupEnd();
+}
+function logEvent(controller, eventName, event, element) {
+  if (!controller.application.debug) {
+    return;
+  }
+  let logger = console;
+  logger.groupCollapsed(...colorizeMany([
+    { text: controller.identifier, color: "#3B82F6" },
+    { text: eventName, color: "#0be000" }
+  ]), event.detail);
+  logger.log(...colorize("Dispatched on", "#3b82f6"), element);
+  logger.log(...colorize("event", "#3b82f6"), event);
+  logger.log(...colorize("event details", "#3b82f6"), event.detail);
+  logger.groupEnd();
+}
+function colorize(text, color) {
+  return colorizeMany([{ text, color }]);
+}
+function colorizeMany(texts) {
+  let str = "";
+  let colors = texts.flatMap((x) => {
+    str += `%c${x.text}%c `;
+    return [`color: ${x.color}`, "color: unset"];
+  });
+  return [str, ...colors];
+}
+function dispatchEvent(controller, element, eventName, options = {}) {
+  let mergedOptions = Object.assign({}, { bubbles: true, cancelable: true, detail: { target: element } }, options);
+  if (!mergedOptions.detail.target) {
+    mergedOptions.detail.target = element;
+  }
+  let event = new CustomEvent(eventName, mergedOptions);
+  logEvent(controller, eventName, event, element);
+  element.dispatchEvent(event);
+}
 class BaseController extends Controller {
   constructor(context) {
     super(context);
@@ -31,18 +128,21 @@ class BaseController extends Controller {
       get: (obj, prop) => {
         let returnVal = Reflect.get(obj, prop);
         let self = this;
+        if ("logFormattedMessage" in this.application) {
+          return returnVal;
+        }
         if (logProperty(prop.toString())) {
           if (typeof returnVal == "function") {
             return new Proxy(returnVal, {
               apply(target, thisArg, argArray) {
-                self.log(prop.toString(), {
+                log(self, prop.toString(), {
                   args: argArray
                 });
                 return Reflect.apply(target, thisArg, argArray);
               }
             });
           } else {
-            this.log(prop.toString());
+            log(this, prop.toString());
           }
         }
         return returnVal;
@@ -65,88 +165,10 @@ class BaseController extends Controller {
     const element = document.head.querySelector(`meta[name="${name}"]`);
     return (element == null ? void 0 : element.getAttribute("content")) || null;
   }
-  dispatch(element, eventName, options = {}) {
-    let mergedOptions = Object.assign({}, { bubbles: true, cancelable: true, detail: { target: element, element } }, options);
-    if (!!mergedOptions.detail.target) {
-      mergedOptions.detail.target = element;
-    }
-    let event = new CustomEvent(eventName, mergedOptions);
-    this.logEvent(eventName, event, element);
-    element.dispatchEvent(event);
-  }
-  log(functionName, args = {}) {
-    if (!this.application.debug) {
-      return;
-    }
-    let logger = console;
-    logger.groupCollapsed(`%c${this.identifier} %c#${functionName}`, "color: #3B82F6", "color: unset");
-    logger.log(__spreadValues({
-      element: this.element,
-      controller: this
-    }, args));
-    logger.groupEnd();
-  }
-  warn(warning, args = {}) {
-    if (!this.application.debug) {
-      return;
-    }
-    let logger = console;
-    logger.groupCollapsed(`%c${this.identifier} %c#${warning}`, "color: F39B1AFF", "color: unset");
-    logger.warn(__spreadValues({
-      element: this.element,
-      controller: this
-    }, args));
-    logger.groupEnd();
-  }
-  logEvent(eventName, event, element) {
-    if (!this.application.debug) {
-      return;
-    }
-    let logger = console;
-    logger.groupCollapsed(`%c${this.identifier} %c${eventName}%c`, "color: #3B82F6", "color: #0be000", "color: unset");
-    logger.log({ element });
-    logger.groupEnd();
+  dispatchEvent(element, eventName, options = {}) {
+    dispatchEvent(this, element, eventName, options);
   }
 }
-function logProperty(prop) {
-  switch (prop) {
-    case "application":
-    case "el":
-    case "element":
-    case "constructor":
-    case "initialize":
-    case "log":
-    case "logEvent":
-    case "dispatch":
-    case "data":
-    case "valueDescriptorMap":
-    case "mutate":
-    case "identifier":
-      return false;
-  }
-  if (/^_.*?$/.test(prop)) {
-    return false;
-  }
-  if (/^.*?Target(s)?$/.test(prop)) {
-    return false;
-  }
-  if (/^.*?Value$/.test(prop)) {
-    return false;
-  }
-  if (/^.*?ValueChanged$/.test(prop)) {
-    return false;
-  }
-  if (/^.*?Class$/.test(prop)) {
-    return false;
-  }
-  if (/^.*?Classes$/.test(prop)) {
-    return false;
-  }
-  if (/^.*?ClassesPresent$/.test(prop)) {
-    return false;
-  }
-  return true;
-}
 class EphemeralController extends BaseController {
   _cleanupSelf() {
     this.cleanup(this.el);
@@ -299,6 +321,9 @@ function isHTMLFormElement(element) {
 function isHTMLInputElement(element) {
   return element.nodeName == "INPUT";
 }
+function isHTMLLabelElement(element) {
+  return element.nodeName == "LABEL";
+}
 function isHTMLTextAreaElement(element) {
   return element.nodeName == "TEXTAREA";
 }
@@ -311,6 +336,33 @@ function isHTMLSelectElement(element) {
 function isHTMLImageElement(element) {
   return element.nodeName == "IMG";
 }
+function isHTMLButtonInputElement(element) {
+  return element.nodeName == "INPUT" && element.type == "button";
+}
+function isHTMLSubmitInputElement(element) {
+  return element.nodeName == "INPUT" && element.type == "submit";
+}
+function isHTMLResetInputElement(element) {
+  return element.nodeName == "INPUT" && element.type == "reset";
+}
+function isHTMLButtonButtonElement(element) {
+  return element.nodeName == "BUTTON" && element.type == "button";
+}
+function isHTMLSubmitButtonElement(element) {
+  return element.nodeName == "BUTTON" && element.type == "submit";
+}
+function isHTMLResetButtonElement(element) {
+  return element.nodeName == "BUTTON" && element.type == "reset";
+}
+function isTypeOfResetButtonElement(element) {
+  return isHTMLResetButtonElement(element) || isHTMLResetInputElement(element);
+}
+function isTypeOfSubmitButtonElement(element) {
+  return isHTMLSubmitButtonElement(element) || isHTMLSubmitInputElement(element);
+}
+function isTypeOfButtonableElement(element) {
+  return isTypeOfResetButtonElement(element) || isTypeOfSubmitButtonElement(element) || isHTMLButtonButtonElement(element);
+}
 function isElementCheckable(element) {
   return isHTMLInputElement(element) && (element.type === "radio" || element.type === "checkbox");
 }
@@ -566,108 +618,129 @@ function useInjectedElement(controller, targetElement, insertPosition, element,
   let [nodes, teardown] = useInjectedFragment(controller, targetElement, insertPosition, fragment, options);
   return [nodes[0], teardown];
 }
+function useInterval(controller, handler, interval) {
+  handler = handler.bind(controller);
+  let intervalHandle = null;
+  let setup = () => intervalHandle = setInterval(handler, interval);
+  let teardown = () => {
+    if (intervalHandle !== null) {
+      clearInterval(intervalHandle);
+    }
+  };
+  useMixin(controller, setup, teardown);
+  return teardown;
+}
 const StorageSerializers = {
   boolean: {
-    read: (v) => v === "true",
-    write: (v) => String(v)
+    deserialize: (v) => v === "true",
+    serialize: (v) => String(v),
+    isEmpty: (v) => v === "" || v === null
   },
   object: {
-    read: (v) => JSON.parse(v),
-    write: (v) => JSON.stringify(v)
+    deserialize: (v) => JSON.parse(v),
+    serialize: (v) => JSON.stringify(v),
+    isEmpty: (v) => {
+      const values = Object.values(JSON.parse(v));
+      return values.length === 0 || values.every((v2) => v2 === "" || v2 === null);
+    }
   },
   number: {
-    read: (v) => Number.parseFloat(v),
-    write: (v) => String(v)
+    deserialize: (v) => Number.parseFloat(v),
+    serialize: (v) => String(v),
+    isEmpty: (v) => v === "" || v === null
   },
   any: {
-    read: (v) => v,
-    write: (v) => String(v)
+    deserialize: (v) => v,
+    serialize: (v) => String(v),
+    isEmpty: (v) => v === "" || v === null
   },
   string: {
-    read: (v) => v,
-    write: (v) => String(v)
+    deserialize: (v) => v,
+    serialize: (v) => String(v),
+    isEmpty: (v) => v === "" || v === null
   },
   map: {
-    read: (v) => new Map(JSON.parse(v)),
-    write: (v) => JSON.stringify(Array.from(v.entries()))
+    deserialize: (v) => new Map(JSON.parse(v)),
+    serialize: (v) => JSON.stringify(Array.from(v.entries())),
+    isEmpty: (v) => {
+      const values = Array.from(v.values());
+      return values.length === 0 || values.every((v2) => v2 === "" || v2 === null);
+    }
   },
   set: {
-    read: (v) => new Set(JSON.parse(v)),
-    write: (v) => JSON.stringify(Array.from(v.entries()))
+    deserialize: (v) => new Set(JSON.parse(v)),
+    serialize: (v) => JSON.stringify(Array.from(v.entries())),
+    isEmpty: (v) => {
+      const values = Array.from(v.values());
+      return values.length === 0 || values.every((v2) => v2 === "" || v2 === null);
+    }
   }
 };
-function useLocalStorage(controller, key, defaultValue, opts) {
-  let type = "any";
+function useLocalStorage(controller, key, defaultValue, opts = { writeDefaults: true }) {
+  let type;
   let { writeDefaults } = opts;
   if (defaultValue == null) {
     type = "any";
-  }
-  if (defaultValue instanceof Set) {
+  } else if (defaultValue instanceof Set) {
     type = "set";
-  }
-  if (defaultValue instanceof Map) {
+  } else if (defaultValue instanceof Map) {
     type = "map";
-  }
-  if (typeof defaultValue === "boolean") {
+  } else if (typeof defaultValue === "boolean") {
     type = "boolean";
-  }
-  if (typeof defaultValue === "string") {
+  } else if (typeof defaultValue === "string") {
     type = "string";
-  }
-  if (typeof defaultValue === "object") {
+  } else if (typeof defaultValue === "object") {
     type = "object";
-  }
-  if (Array.isArray(defaultValue)) {
+  } else if (Array.isArray(defaultValue)) {
     type = "object";
-  }
-  if (!Number.isNaN(defaultValue)) {
+  } else if (!Number.isNaN(defaultValue)) {
     type = "number";
+  } else {
+    type = "any";
   }
   let data = reactive({
     value: defaultValue
   });
   let storage = localStorage;
   const serializer = StorageSerializers[type];
-  const read = (event) => {
-    if (event && event.key !== key) {
-      return;
-    }
-    try {
-      const rawValue = event ? event.newValue : storage.getItem(key);
-      if (rawValue == null) {
-        data.value = defaultValue;
-        if (writeDefaults && defaultValue !== null) {
-          storage.setItem(key, serializer.write(defaultValue));
-        }
-      } else {
-        data.value = serializer.read(rawValue);
+  const read = () => {
+    const rawValue = storage.getItem(key);
+    if (rawValue == null) {
+      data.value = defaultValue;
+      if (writeDefaults && defaultValue !== null) {
+        storage.setItem(key, serializer.serialize(defaultValue));
       }
-    } catch (e) {
+    } else {
+      data.value = serializer.deserialize(rawValue);
     }
+    return data.value;
+  };
+  const write = (value) => {
+    storage.setItem(key, serializer.serialize(value));
+    data.value = value;
+  };
+  const clear = () => {
+    storage.removeItem(key);
+    data.value = defaultValue;
+    return data.value;
+  };
+  const isEmpty = () => {
+    let rawValue = storage.getItem(key);
+    return serializer.isEmpty(rawValue);
   };
   read();
   return {
     get value() {
-      return data.value;
+      return read();
     },
     set value(value) {
-      data.value = value;
-      storage.setItem(key, serializer.write(value));
+      write(value);
     },
-    read
-  };
-}
-function useInterval(controller, handler, interval) {
-  handler = handler.bind(controller);
-  let intervalHandle = null;
-  let setup = () => intervalHandle = setInterval(handler, interval);
-  let teardown = () => {
-    if (intervalHandle !== null) {
-      clearInterval(intervalHandle);
-    }
+    read,
+    clear,
+    write,
+    isEmpty
   };
-  useMixin(controller, setup, teardown);
-  return teardown;
 }
 function useTimeout(controller, handler, timeout) {
   let controllerDisconnect;
@@ -688,6 +761,40 @@ function useTimeout(controller, handler, timeout) {
   controllerDisconnect = useMixin(controller, setup, teardown);
   return teardown;
 }
+function useTemporaryContent(controller, target, content, timeout, teardownCallback) {
+  const setContent = (element, text) => {
+    if (isHTMLInputElement(element)) {
+      element.value = text;
+    } else {
+      element.textContent = text;
+    }
+  };
+  const getContent = (element) => {
+    return isHTMLInputElement(element) ? element.value : element.innerHTML;
+  };
+  let cleanupTimeout = () => void 0;
+  let originalText = getContent(target);
+  const teardown = () => {
+    setContent(target, originalText);
+    cleanupTimeout();
+    if (teardownCallback) {
+      teardownCallback.call(controller);
+    }
+  };
+  const setup = () => {
+    setContent(target, content);
+    if (timeout !== void 0) {
+      cleanupTimeout = useTimeout(controller, teardown, timeout);
+    }
+  };
+  useMixin(controller, setup, teardown);
+  return {
+    teardown,
+    update(newContent) {
+      setContent(target, newContent);
+    }
+  };
+}
 async function fetchRetry(n, input, init) {
   try {
     return await fetch(input, init);
@@ -713,7 +820,7 @@ class LoadBlockController extends BaseController {
     let el = this.hasReplaceTarget ? this.replaceTarget : this.el;
     let failure = () => {
       el.replaceWith(this._errorMessage);
-      self.dispatch(el, "ajax:error");
+      self.dispatchEvent(el, "ajax:error");
     };
     try {
       let response = await fetchRetry(this._maxRetries, this.endpointValue);
@@ -729,11 +836,11 @@ class LoadBlockController extends BaseController {
       } else {
         el.replaceWith(...newEl.children);
       }
-      self.dispatch(el, "ajax:success");
+      self.dispatchEvent(el, "ajax:success");
     } catch (e) {
       failure();
     } finally {
-      self.dispatch(el, "ajax:complete");
+      self.dispatchEvent(el, "ajax:complete");
     }
   }
 }
@@ -845,18 +952,22 @@ __publicField(PollBlockController, "values", {
   seconds: Number
 });
 class AutoSubmitFormController extends BaseController {
-  get _eventMode() {
+  get _eventModes() {
     if (this.hasEventModeValue) {
-      if (!["change", "input", "debounced"].includes(this.eventModeValue)) {
+      let modes = this.eventModeValue.split(" ").map((mode) => mode.trim());
+      if (modes.length === 1 && modes[0] === "debounced") {
+        return ["change", "input"];
+      }
+      if (!modes.every((mode) => ["change", "input"].includes(mode))) {
         throw new Error(`The modeValue provided '${this.eventModeValue}' is not one of the recognised configuration options`);
       }
-      return this.eventModeValue;
+      return modes;
     } else {
-      return "change";
+      return ["change"];
     }
   }
   get _debounceTimeout() {
-    return this.hasDebounceIntervalValue ? this.debounceIntervalValue : 1e3;
+    return this.hasDebounceIntervalValue ? this.debounceIntervalValue : -1;
   }
   get _mode() {
     if (this.hasSubmitModeValue) {
@@ -874,13 +985,18 @@ class AutoSubmitFormController extends BaseController {
     return inputTypes.map((type) => type.concat(ignore)).join(",");
   }
   get inputElements() {
-    return this.element.querySelectorAll(this._cssSelector);
+    let subElements = Array.from(this.element.querySelectorAll(this._cssSelector));
+    subElements = subElements.filter((el) => !this._ancestorIsTrix(el));
+    return subElements;
   }
   connect() {
     this.inputElements.forEach((el) => {
-      return useEventListener(this, el, this._eventMode == "change" ? "change" : "input", this.submit, { debounce: this._eventMode == "debounced" ? this._debounceTimeout : void 0 });
+      return useEventListener(this, el, this._eventModes, this.submit, { debounce: this._debounceTimeout && this._debounceTimeout > 0 ? this._debounceTimeout : void 0 });
     });
   }
+  _ancestorIsTrix(element) {
+    return element.closest("trix-toolbar") !== null && element.closest("trix-editor") !== null;
+  }
   submit() {
     let el = this.el;
     if (this._mode == "request") {
@@ -948,12 +1064,10 @@ function addMethodsForClassDefinition(controller, name) {
     [`remove${pascalCase(name)}Classes`]: (element = defaultElement) => element.classList.remove(...classOrDefault()),
     [`${name}ClassesPresent`]: (element = defaultElement) => classOrDefault().every((klass) => element.classList.contains(klass))
   };
-  console.log(methods);
   Object.assign(controller, methods);
 }
 function installClassMethods(controller) {
   let classes = controller.constructor.classes || [];
-  console.log(classes);
   classes.forEach((classDefinition) => addMethodsForClassDefinition(controller, classDefinition));
 }
 class CharCountController extends BaseController {
@@ -1097,7 +1211,7 @@ class CheckboxXORController extends BaseController {
     if (target.checked) {
       others.forEach((checkbox) => {
         checkbox.checked = false;
-        this.dispatch(this.el, "change");
+        this.dispatchEvent(this.el, "change");
       });
     }
   }
@@ -1433,7 +1547,7 @@ class FormSaveController extends BaseController {
   }
   _clear() {
     localStorage.removeItem(this._formIdentifier);
-    this.dispatch(this.el, `form-save:cleared`);
+    this.dispatchEvent(this.el, `form-save:cleared`);
   }
   clear(event) {
     event == null ? void 0 : event.preventDefault();
@@ -1443,7 +1557,7 @@ class FormSaveController extends BaseController {
     event.preventDefault();
     let data = this._formData;
     localStorage.setItem(this._formIdentifier, JSON.stringify(data[this._formIdentifier]));
-    this.dispatch(this.el, `form-save:save:success`);
+    this.dispatchEvent(this.el, `form-save:save:success`);
   }
   restore(event) {
     event == null ? void 0 : event.preventDefault();
@@ -1463,9 +1577,9 @@ class FormSaveController extends BaseController {
           }
         }
       }
-      this.dispatch(this.el, `form-save:restore:success`);
+      this.dispatchEvent(this.el, `form-save:restore:success`);
     } else {
-      this.dispatch(this.el, `form-save:restore:empty`);
+      this.dispatchEvent(this.el, `form-save:restore:empty`);
     }
   }
 }
@@ -1484,13 +1598,13 @@ class LimitedSelectionCheckboxesController extends BaseController {
     if (tickedInputs > this.maxValue) {
       event.preventDefault();
       target.checked = false;
-      this.dispatch(target, "change");
-      this.dispatch(target, "limited-selection:too-many");
+      this.dispatchEvent(target, "change");
+      this.dispatchEvent(target, "limited-selection:too-many");
       if (this.hasErrorTarget && this.hasMessageValue) {
         this.errorTarget.innerHTML = this.messageValue;
       }
     } else {
-      this.dispatch(target, "limited-selection:selection");
+      this.dispatchEvent(target, "limited-selection:selection");
       if (this.hasErrorTarget) {
         this.errorTarget.innerHTML = "";
       }
@@ -1685,10 +1799,10 @@ class PasswordConfirmController extends BaseController {
   _checkPasswordsMatch() {
     let element = this.el;
     if (this._allPasswordsMatch()) {
-      this.dispatch(element, "password-confirm:match");
+      this.dispatchEvent(element, "password-confirm:match");
       this.passwordTargets.forEach((el) => this.removeErrorClasses(el));
     } else {
-      this.dispatch(element, "password-confirm:no-match");
+      this.dispatchEvent(element, "password-confirm:no-match");
       this.passwordTargets.forEach((el) => this.addErrorClasses(el));
     }
   }
@@ -1730,7 +1844,7 @@ class RemoteFormController extends BaseController {
         throw new Error("expected form to have a DOM parent, could not execute replaceChild");
       }
       parentNode.replaceChild(newElement, this.el);
-      this.dispatch(newElement, "remote-form:replace");
+      this.dispatchEvent(newElement, "remote-form:replace");
     } else {
       console.log("Unknown", data);
     }
@@ -1908,11 +2022,11 @@ class FallbackImageController extends BaseController {
     let element = this.el;
     this.addFailClasses();
     if (this.hasPlaceholderValue && element.src !== this.placeholderValue) {
-      this.dispatch(element, "fallback-image:placeholder");
+      this.dispatchEvent(element, "fallback-image:placeholder");
       element.src = this.placeholderValue;
       element.onerror = this._fail;
     } else {
-      this.dispatch(element, "fallback-image:fail");
+      this.dispatchEvent(element, "fallback-image:fail");
       element.style.display = "none";
     }
   }
@@ -2738,9 +2852,11 @@ function _predicateForExpression(expression) {
     throw new Error(`Could not find operator in expression: ${expression}`);
   }
   let expressionValue = expression.split(operator)[1].trim();
-  let isNumber = /^-?[0-9]\d*(\.\d+)?$/.test(expressionValue);
-  expressionValue = isNumber ? parseFloat(expressionValue) : expressionValue;
-  if (expressionValue == "") {
+  let isNumber = /^-?\d*(\.\d+)?$/.test(expressionValue);
+  if (isNumber) {
+    expressionValue = parseFloat(expressionValue);
+  }
+  if (expressionValue === "") {
     throw new Error(`Could not find a value in expression: ${expression}`);
   }
   let notEmpty = (signalValue) => signalValue !== "";
@@ -2781,13 +2897,13 @@ class SignalActionController extends BaseController {
   _onSignal(payload) {
     let value = payload.value;
     if (!this.hasWhenValue) {
-      this.dispatch(this.el, signalEventName(this.nameValue, "match"));
+      this.dispatchEvent(this.el, signalEventName(this.nameValue, "match"));
       return;
     }
     if (this._predicates.every((predicate) => predicate(value))) {
-      this.dispatch(this.el, signalEventName(this.nameValue, "match"), { detail: { element: this.el, value } });
+      this.dispatchEvent(this.el, signalEventName(this.nameValue, "match"), { detail: { element: this.el, value } });
     } else {
-      this.dispatch(this.el, signalEventName(this.nameValue, "no-match"), { detail: { element: this.el, value } });
+      this.dispatchEvent(this.el, signalEventName(this.nameValue, "no-match"), { detail: { element: this.el, value } });
     }
   }
 }
@@ -2795,17 +2911,57 @@ __publicField(SignalActionController, "values", {
   name: String,
   when: String
 });
+function useMutationObserver(controller, element, handler, options) {
+  handler = handler.bind(controller);
+  let observer = new MutationObserver(handler);
+  let setup = () => observer.observe(element, options);
+  let teardown = () => observer.disconnect();
+  useMixin(controller, setup, teardown);
+  return teardown;
+}
+class SignalDomChildrenController extends BaseController {
+  get _children() {
+    if (this.hasScopeSelectorValue) {
+      return Array.from(this.el.querySelectorAll(this.scopeSelectorValue));
+    } else {
+      return Array.from(this.el.children);
+    }
+  }
+  get _name() {
+    if (this.hasNameValue) {
+      return this.nameValue;
+    } else {
+      throw new Error("SignalEmptyDomController requires a nameValue to be provided");
+    }
+  }
+  connect() {
+    useEventBus(this, signalConnectEvent(this._name), this.emitChildCount);
+    EventBus.emit(signalConnectEvent(this._name));
+    useMutationObserver(this, this.el, this.mutate, { childList: true });
+    this.emitChildCount();
+  }
+  mutate(entries) {
+    this.emitChildCount();
+  }
+  emitChildCount() {
+    let childCount = this._children.length;
+    EventBus.emit(signalValueEvent(this._name), { element: this.el, value: childCount.toString() });
+  }
+}
+__publicField(SignalDomChildrenController, "values", {
+  name: String,
+  scopeSelector: String
+});
 class SignalInputController extends BaseController {
   get _debounceTimeout() {
-    return this.hasDebounceIntervalValue ? this.debounceIntervalValue : null;
+    return this.hasDebounceIntervalValue ? this.debounceIntervalValue : 1;
   }
   get _name() {
     return this.hasNameValue ? this.nameValue : this.element.name;
   }
   connect() {
     useEventBus(this, signalConnectEvent(this._name), () => this.emitValue());
-    useEventListener(this, this.el, "input", this.emitValue, { debounce: this._debounceTimeout || void 0 });
-    useEventListener(this, this.el, "change", this.emitValue);
+    useEventListeners(this, this.el, ["input", "change"], this.emitValue, { debounce: this._debounceTimeout || void 0 });
     requestAnimationFrame(() => this.emitValue());
   }
   emitValue() {
@@ -2817,6 +2973,7 @@ class SignalInputController extends BaseController {
       let selectedValue = (_a = getAllRadiosInGroup(this.el).find((el) => el.checked)) == null ? void 0 : _a.value;
       value = selectedValue ? selectedValue : "";
     }
+    this.dispatchEvent(this.el, signalValueEvent(this._name), { detail: { value } });
     EventBus.emit(signalValueEvent(this._name), { element: this.el, value });
   }
 }
@@ -2847,8 +3004,10 @@ class SignalVisibilityController extends BaseController {
       return;
     }
     if (this._predicates.every((predicate) => predicate(value))) {
+      this.dispatchEvent(this.el, "signal-visibility:show", { detail: { predicate: this.showValue, value } });
       this.removeHideClasses(this.el);
     } else {
+      this.dispatchEvent(this.el, "signal-visibility:hide", { detail: { predicate: this.showValue, value } });
       this.addHideClasses(this.el);
     }
   }
@@ -2896,7 +3055,7 @@ class TableSortController extends BaseController {
     event.preventDefault();
     let headerCell = event.target;
     let headerCellIndex = this._indexOfHeaderCell(headerCell);
-    if (headerCell.dataset.sort == "false") {
+    if (headerCell.dataset.sortable == "false") {
       return;
     }
     if (headerCell.dataset.sort == "asc") {
@@ -2951,14 +3110,6 @@ class TableSortController extends BaseController {
   }
 }
 __publicField(TableSortController, "values", { startSort: Number });
-function useMutationObserver(controller, element, handler, options) {
-  handler = handler.bind(controller);
-  let observer = new MutationObserver(handler);
-  let setup = () => observer.observe(element, options);
-  let teardown = () => observer.disconnect();
-  useMixin(controller, setup, teardown);
-  return teardown;
-}
 class TableTruncateController extends BaseController {
   get _truncated() {
     return this.hasTruncatedValue ? this.truncatedValue : false;
@@ -3062,10 +3213,10 @@ class IntersectionController extends BaseController {
     useIntersection(this, this.el, this.appear, this.disappear, { threshold: this._threshold });
   }
   appear(entry) {
-    this.dispatch(this.el, "intersection:appear");
+    dispatchEvent(this, this.el, "intersection:appear");
   }
   disappear(entry) {
-    this.dispatch(this.el, "intersection:disappear");
+    dispatchEvent(this, this.el, "intersection:disappear");
   }
 }
 __publicField(IntersectionController, "values", { threshold: String });
@@ -3079,7 +3230,7 @@ class IntervalController extends BaseController {
     });
   }
   _interval() {
-    this.dispatch(this.el, "interval:action");
+    this.dispatchEvent(this.el, "interval:action");
   }
 }
 __publicField(IntervalController, "values", { seconds: Number });
@@ -3094,10 +3245,10 @@ class PresenceController extends BaseController {
     return [this.name, "presence", "removed"].filter((el) => !!el).join(":");
   }
   connect() {
-    this.dispatch(this.el, this._addedEventName);
+    this.dispatchEvent(this.el, this._addedEventName);
   }
   disconnect() {
-    this.dispatch(this.el, this._removedEventName);
+    this.dispatchEvent(this.el, this._removedEventName);
   }
 }
 __publicField(PresenceController, "values", { name: String });
@@ -3114,7 +3265,7 @@ class TimeoutController extends BaseController {
     });
   }
   _timeout() {
-    this.dispatch(this.el, "timeout");
+    this.dispatchEvent(this.el, "timeout");
   }
 }
 __publicField(TimeoutController, "values", { seconds: Number });
@@ -3127,10 +3278,10 @@ class UserFocusController extends BaseController {
     });
   }
   appear() {
-    this.dispatch(this.el, "user-focus:active");
+    this.dispatchEvent(this.el, "user-focus:active");
   }
   away() {
-    this.dispatch(this.el, "user-focus:away");
+    this.dispatchEvent(this.el, "user-focus:away");
   }
   _handleVisibility() {
     this._documentIsActive() ? this.appear() : this.away();
@@ -3207,7 +3358,7 @@ class CountdownController extends BaseController {
         this._clearTick();
         this.removeCountingDownClasses();
         this.addEndedClasses();
-        this.dispatch(this.el, "countdown:ended");
+        this.dispatchEvent(this.el, "countdown:ended");
       } else {
         distance = intervalToDuration({ start: this._deadlineDate, end: now });
       }
@@ -3539,7 +3690,6 @@ class TreeViewController extends BaseController {
     return el.querySelectorAll("ul, ol").length > 0;
   }
   mutate(entries) {
-    console.log("mutate", entries);
     for (const mutation of entries) {
       if (mutation.type === "childList") {
         Array.from(mutation.addedNodes || []).forEach((el) => this._setupNode(el));
@@ -3581,11 +3731,11 @@ class AnchorSpyController extends BaseController {
   }
   _checkAnchor() {
     if (this._key === this._anchor) {
-      this.dispatch(this.el, "anchor-spy:active");
+      this.dispatchEvent(this.el, "anchor-spy:active");
       this.addActiveClasses(this.el);
       this.removeInactiveClasses(this.el);
     } else {
-      this.dispatch(this.el, "anchor-spy:inactive");
+      this.dispatchEvent(this.el, "anchor-spy:inactive");
       this.addInactiveClasses(this.el);
       this.removeActiveClasses(this.el);
     }
@@ -3669,7 +3819,7 @@ class ConfirmController extends BaseController {
   confirm(event) {
     if (!window.confirm(this._message)) {
       event.preventDefault();
-      this.dispatch(this.el, "confirm:cancelled");
+      this.dispatchEvent(this.el, "confirm:cancelled");
     }
   }
 }
@@ -3710,10 +3860,6 @@ class DebugController extends BaseController {
 }
 __publicField(DebugController, "targets", ["test"]);
 class DisableWithController extends BaseController {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_cacheText");
-  }
   get _message() {
     return this.hasMessageValue ? this.messageValue : "Submitting...";
   }
@@ -3732,44 +3878,27 @@ class DisableWithController extends BaseController {
       event == null ? void 0 : event.preventDefault();
       event == null ? void 0 : event.stopImmediatePropagation();
     } else {
-      this._cacheText = this._getElText(element);
-      this._setElText(element, this._message);
       this._disable();
-      useTimeout(this, this.enable, this._timeout);
+      useTemporaryContent(this, element, this._message, this._timeout, this._enable);
     }
   }
   enable(event) {
     event == null ? void 0 : event.preventDefault();
     let element = this.el;
     if (this._isDisabled(element)) {
-      this._setElText(element, this._cacheText);
       this._enable();
     }
   }
   _isDisabled(el) {
-    if (isHTMLInputElement(el) && el.type == "submit" || isHTMLButtonElement(el)) {
+    if (isTypeOfButtonableElement(el)) {
       return el.disabled;
     } else {
       return el.dataset.disabled == "true";
     }
   }
-  _getElText(el) {
-    if (isHTMLInputElement(el) && el.type == "submit") {
-      return el.value;
-    } else {
-      return el.innerText;
-    }
-  }
-  _setElText(el, str) {
-    if (isHTMLInputElement(el) && el.type == "submit") {
-      el.value = str;
-    } else if (isHTMLButtonElement(el) || isHTMLAnchorElement(el)) {
-      el.innerText = str;
-    }
-  }
   _disable() {
     let el = this.el;
-    if (isHTMLInputElement(el) && el.type == "submit" || isHTMLButtonElement(el)) {
+    if (isTypeOfButtonableElement(el)) {
       el.disabled = true;
     } else {
       el.dataset.disabled = "true";
@@ -3777,7 +3906,7 @@ class DisableWithController extends BaseController {
   }
   _enable() {
     let el = this.el;
-    if (isHTMLInputElement(el) && el.type == "submit" || isHTMLButtonElement(el)) {
+    if (isTypeOfButtonableElement(el)) {
       el.disabled = false;
     } else {
       el.dataset.disabled = void 0;
@@ -3817,7 +3946,11 @@ class ElementSaveController extends BaseController {
   get _element() {
     return this.hasElementTarget ? this.elementTarget : this.el;
   }
+  initialize() {
+    this.save = debounce(this.save.bind(this), 300);
+  }
   connect() {
+    this._store = useLocalStorage(this, this._uniqueIdentifier, {});
     requestAnimationFrame(() => {
       if (this._restoreOnLoad) {
         this.restore();
@@ -3828,8 +3961,8 @@ class ElementSaveController extends BaseController {
     if (event) {
       event.preventDefault();
     }
-    localStorage.removeItem(this._uniqueIdentifier);
-    this.dispatch(this._element, `element-save:cleared`);
+    this._store.clear();
+    this.dispatchEvent(this._element, `element-save:cleared`);
   }
   save(event) {
     if (event) {
@@ -3839,22 +3972,20 @@ class ElementSaveController extends BaseController {
     let attributes = this.attributesValue.split(" ");
     let data = {};
     attributes.forEach((attr) => data[attr] = get(element, attr));
-    localStorage.setItem(this._uniqueIdentifier, JSON.stringify(data));
-    this.dispatch(element, `element-save:save:success`);
+    this._store.value = data;
+    this.dispatchEvent(element, `element-save:save:success`);
   }
   restore(event) {
     if (event) {
       event.preventDefault();
     }
     let element = this._element;
-    if (localStorage.getItem(this._uniqueIdentifier)) {
-      const savedData = JSON.parse(localStorage.getItem(this._uniqueIdentifier));
-      Object.keys(savedData).forEach((attr) => {
-        set(element, attr, savedData[attr]);
-      });
-      this.dispatch(element, `element-save:restore:success`);
+    if (!this._store.isEmpty()) {
+      const savedData = this._store.value;
+      Object.keys(savedData).forEach((attr) => set(element, attr, savedData[attr]));
+      this.dispatchEvent(element, `element-save:restore:success`);
     } else {
-      this.dispatch(element, `element-save:restore:empty`);
+      this.dispatchEvent(element, `element-save:restore:empty`);
     }
   }
 }
@@ -3892,11 +4023,11 @@ class EmptyDomController extends BaseController {
     if (children.length === 0) {
       this.removeNotEmptyClasses();
       this.addEmptyClasses();
-      this.dispatch(element, "dom:empty");
+      this.dispatchEvent(element, "dom:empty");
     } else {
       this.addNotEmptyClasses();
       this.removeEmptyClasses();
-      this.dispatch(element, "dom:not-empty", { detail: { count: children.length } });
+      this.dispatchEvent(element, "dom:not-empty", { detail: { count: children.length } });
     }
   }
 }
@@ -3925,11 +4056,11 @@ class PrefetchController extends BaseController {
     }
     if (connection) {
       if (connection.saveData) {
-        this.warn("Data Saving is enabled");
+        warn(this, "Data Saving is enabled");
         return false;
       }
       if (/2g/.test(connection.effectiveType)) {
-        this.warn("Network is too slow");
+        warn(this, "Network is too slow");
         return false;
       }
     }
@@ -4080,7 +4211,7 @@ class TeleportController extends EphemeralController {
     let element = this.el;
     let destination = document.querySelector(this.targetValue);
     if (destination == null) {
-      this.dispatch(element, "teleport:error");
+      this.dispatchEvent(element, "teleport:error");
       return;
     }
     let copy = element.cloneNode(true);
@@ -4581,5 +4712,5 @@ __publicField(TurboFrameRefreshController, "values", {
   interval: Number,
   poll: Boolean
 });
-export { AlertController, AnchorSpyController, AsyncBlockController, AutoSubmitFormController, AutosizeController, BackLinkController, BaseController, CharCountController, CheckboxDisableInputsController, CheckboxEnableInputsController, CheckboxSelectAllController, CheckboxXORController, ClipboardController, ClockController, ConfirmController, ConfirmNavigationController, CountdownController, DebugController, DetectDirtyController, DetectDirtyFormController, DisableWithController, DismissableController, DurationController, ElementSaveController, EmptyDomController, EnableInputsController, EphemeralController, EventBus, FallbackImageController, FocusStealController, FormRcController, FormSaveController, FullscreenController, IntersectionController, IntervalController, LazyBlockController, LightboxImageController, LimitedSelectionCheckboxesController, LoadBlockController, MediaPlayerController, NavigateFormErrorsController, NestedFormController, PasswordConfirmController, PasswordPeekController, PollBlockController, PrefetchController, PresenceController, PrintButtonController, PrintController, RemoteFormController, RemoveController, ResponsiveIframeBodyController, ResponsiveIframeWrapperController, ScrollContainerController, ScrollIntoFocusController, ScrollToBottomController, ScrollToController, ScrollToTopController, SelfDestructController, SignalActionController, SignalInputController, SignalVisibilityController, StickyController, StorageSerializers, SyncInputsController, TableSortController, TableTruncateController, TabsController, TeleportController, TemporaryStateController, TimeDistanceController, TimeoutController, ToggleClassController, TreeViewController, TrixModifierController, TurboFrameRCController, TurboFrameRefreshController, UserFocusController, ValueWarnController, WordCountController, applyTemporaryClass, applyTemporaryState, createHiddenButton, createHiddenInput, getAllRadiosInGroup, getOtherRadiosInGroup, getScrollParent, insertElement, insertHiddenButton, insertHiddenInput, isDirty, isElementCheckable, isElementInViewport, isFormDirty, isHTMLAnchorElement, isHTMLButtonElement, isHTMLFormElement, isHTMLImageElement, isHTMLInputElement, isHTMLLinkElement, isHTMLSelectElement, isHTMLTextAreaElement, isTurboFrame, isTypeOfFormInputElement, requestReset, requestSubmit, scrollAbsoluteBottom, scrollAbsoluteLeft, scrollAbsoluteRight, scrollAbsoluteTop, scrollDown, scrollLeft, scrollRight, scrollToElement, scrollUp, useCollectionEventListener, useCollectionEventListeners, useEventListener, useEventListeners, useFullscreen, useGeolocation, useInjectedElement, useInjectedFragment, useInjectedHTML, useInterval, useLocalStorage, useTimeout };
+export { AlertController, AnchorSpyController, AsyncBlockController, AutoSubmitFormController, AutosizeController, BackLinkController, BaseController, CharCountController, CheckboxDisableInputsController, CheckboxEnableInputsController, CheckboxSelectAllController, CheckboxXORController, ClipboardController, ClockController, ConfirmController, ConfirmNavigationController, CountdownController, DebugController, DetectDirtyController, DetectDirtyFormController, DisableWithController, DismissableController, DurationController, ElementSaveController, EmptyDomController, EnableInputsController, EphemeralController, EventBus, FallbackImageController, FocusStealController, FormRcController, FormSaveController, FullscreenController, IntersectionController, IntervalController, LazyBlockController, LightboxImageController, LimitedSelectionCheckboxesController, LoadBlockController, MediaPlayerController, NavigateFormErrorsController, NestedFormController, PasswordConfirmController, PasswordPeekController, PollBlockController, PrefetchController, PresenceController, PrintButtonController, PrintController, RemoteFormController, RemoveController, ResponsiveIframeBodyController, ResponsiveIframeWrapperController, ScrollContainerController, ScrollIntoFocusController, ScrollToBottomController, ScrollToController, ScrollToTopController, SelfDestructController, SignalActionController, SignalDomChildrenController, SignalInputController, SignalVisibilityController, StickyController, StorageSerializers, SyncInputsController, TableSortController, TableTruncateController, TabsController, TeleportController, TemporaryStateController, TimeDistanceController, TimeoutController, ToggleClassController, TreeViewController, TrixModifierController, TurboFrameRCController, TurboFrameRefreshController, UserFocusController, ValueWarnController, WordCountController, applyTemporaryClass, applyTemporaryState, createHiddenButton, createHiddenInput, getAllRadiosInGroup, getOtherRadiosInGroup, getScrollParent, insertElement, insertHiddenButton, insertHiddenInput, isDirty, isElementCheckable, isElementInViewport, isFormDirty, isHTMLAnchorElement, isHTMLButtonButtonElement, isHTMLButtonElement, isHTMLButtonInputElement, isHTMLFormElement, isHTMLImageElement, isHTMLInputElement, isHTMLLabelElement, isHTMLLinkElement, isHTMLResetButtonElement, isHTMLResetInputElement, isHTMLSelectElement, isHTMLSubmitButtonElement, isHTMLSubmitInputElement, isHTMLTextAreaElement, isTurboFrame, isTypeOfButtonableElement, isTypeOfFormInputElement, isTypeOfResetButtonElement, isTypeOfSubmitButtonElement, requestReset, requestSubmit, scrollAbsoluteBottom, scrollAbsoluteLeft, scrollAbsoluteRight, scrollAbsoluteTop, scrollDown, scrollLeft, scrollRight, scrollToElement, scrollUp, useCollectionEventListener, useCollectionEventListeners, useEventListener, useEventListeners, useFullscreen, useGeolocation, useInjectedElement, useInjectedFragment, useInjectedHTML, useInterval, useLocalStorage, useTemporaryContent, useTimeout };
 //# sourceMappingURL=stimulus-library.es.js.map