@rogieking/figui3 1.5.0 → 1.5.2

package/example.html

@@ -793,6 +793,9 @@
         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('change', (e) => {
+            console.log('change:', n.tagName, e.target.value)
+        }))
     </script>
 </body>
 

package/fig.css

@@ -2289,6 +2289,7 @@ fig-input-color {
 
     & input[type="text"] {
       width: 100%;
+      text-transform: uppercase;
     }
   }
 

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) {
@@ -1389,13 +1399,13 @@ class FigInputColor extends HTMLElement {
     this.rgba = this.convertToRGBA(hexValue);
     this.value = this.rgbAlphaToHex(
       {
-        r: this.rgba.r,
-        g: this.rgba.g,
-        b: this.rgba.b,
+        r: isNaN(this.rgba.r) ? 0 : this.rgba.r,
+        g: isNaN(this.rgba.g) ? 0 : this.rgba.g,
+        b: isNaN(this.rgba.b) ? 0 : this.rgba.b,
       },
       this.rgba.a
     );
-    this.hexWithAlpha = this.value;
+    this.hexWithAlpha = this.value.toUpperCase();
     this.hexOpaque = this.hexWithAlpha.slice(0, 7);
     if (hexValue.length > 7) {
       this.alpha = (this.rgba.a * 100).toFixed(0);
@@ -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.0",
+  "version": "1.5.2",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {