// NOTE: Currently only used in admin pages so no need for transpiling or IE support
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".fn-number-input").forEach((elm) => {
    const decrButton = button({ textContent: "➖" });
    const incrButton = button({ textContent: "➕" });

    const wrapper = document.createElement("span");
    wrapper.classList.add("number-input");
    elm.replaceWith(wrapper);
    wrapper.appendChild(decrButton);
    wrapper.appendChild(elm);
    wrapper.appendChild(incrButton);

    function checkBounds() {
      decrButton.disabled = elm.min && elm.value <= elm.min;
      incrButton.disabled = elm.max && elm.value >= elm.max;
    }
    checkBounds();
    decrButton.addEventListener("click", () => elm.stepDown() || checkBounds());
    incrButton.addEventListener("click", () => elm.stepUp() || checkBounds());
    elm.addEventListener("input", () => {
      checkBounds();
    });
  });
});

function button({ textContent }) {
  const btn = document.createElement("button");
  btn.type = "button";
  btn.textContent = textContent;
  return btn;
}

@@ -750,32 +750,40 @@
 r(%22click%22, () =%3E
+ %7B%0A     
  elm.stepDown() 
@@ -781,33 +781,69 @@
 epDown()
- %7C%7C checkBounds()
+;%0A      elm.dispatchEvent(new Event(%22change%22));%0A    %7D
 );%0A    i
@@ -883,16 +883,24 @@
 %22, () =%3E
+ %7B%0A     
  elm.ste
@@ -908,11 +908,98 @@
 Up()
- %7C%7C
+;%0A      elm.dispatchEvent(new Event(%22change%22));%0A    %7D);%0A    elm.addEventListener(%22change%22,
  che
@@ -1006,18 +1006,16 @@
 ckBounds
-()
 );%0A    e
@@ -1042,30 +1042,16 @@
 %22input%22,
- () =%3E %7B%0A     
  checkBo
@@ -1058,17 +1058,8 @@
 unds
-();%0A    %7D
 );%0A 

Fix so number-input triggers the change event on programmatic changes