@rogieking/figui3 1.5.1 → 1.5.3

package/example.html

@@ -793,8 +793,8 @@
         elements.filter(n => n.tagName.toLowerCase().indexOf("fig-slider") > -1).forEach(n => n.addEventListener('input', (e) => {
             console.log('input:', n.tagName, e.target)
         }))
-        document.querySelectorAll('fig-input-color').forEach(n => n.addEventListener('input', (e) => {
-            console.log('input:', n.tagName, e.target.value)
+        document.querySelectorAll('fig-input-color').forEach(n => n.addEventListener('change', (e) => {
+            console.log('change:', n.tagName, e.target.value)
         }))
     </script>
 </body>

package/fig.js

@@ -1108,6 +1108,7 @@ class FigInputText extends HTMLElement {
     this.value = value;
     this.input.value = valueTransformed;
     this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+    this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
   }
   #handleMouseMove(e) {
     if (this.type !== "number") return;
@@ -1122,6 +1123,7 @@ class FigInputText extends HTMLElement {
       this.value = value;
       this.input.value = valueTransformed;
       this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+      this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
     }
   }
   #handleMouseDown(e) {
@@ -1336,7 +1338,11 @@ class FigInputColor extends HTMLElement {
 
     let html = ``;
     if (this.getAttribute("text")) {
-      let label = `<fig-input-text type="text" placeholder="Text" value="${this.value}"></fig-input-text>`;
+      let label = `<fig-input-text 
+        type="text"
+        placeholder="#000000"
+        value="${this.value}">
+      </fig-input-text>`;
       if (this.getAttribute("alpha") === "true") {
         label += `<fig-tooltip text="Opacity">
                     <fig-input-text 
@@ -1375,6 +1381,10 @@ class FigInputColor extends HTMLElement {
           "input",
           this.#handleTextInput.bind(this)
         );
+        this.#textInput.addEventListener(
+          "change",
+          this.#handleChange.bind(this)
+        );
       }
 
       if (this.#alphaInput) {
@@ -1425,6 +1435,10 @@ class FigInputColor extends HTMLElement {
     this.#emitInputEvent();
   }
 
+  #handleChange(event) {
+    this.#emitChangeEvent();
+  }
+
   focus() {
     this.#swatch.focus();
   }
@@ -1446,6 +1460,13 @@ class FigInputColor extends HTMLElement {
     });
     this.dispatchEvent(e);
   }
+  #emitChangeEvent() {
+    const e = new CustomEvent("change", {
+      bubbles: true,
+      cancelable: true,
+    });
+    this.dispatchEvent(e);
+  }
 
   static get observedAttributes() {
     return ["value", "style"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {