@rogieking/figui3 1.1.5 → 1.1.7

package/fig.js

@@ -1112,24 +1112,18 @@ window.customElements.define("fig-field", FigField);
 
 /* Color swatch */
 class FigInputColor extends HTMLElement {
-  #rgba;
+  rgba;
+  hex;
+  alpha = 100;
   #swatch;
-  textInput;
+  #textInput;
   #alphaInput;
   constructor() {
     super();
   }
   connectedCallback() {
-    this.#rgba = this.convertToRGBA(this.getAttribute("value"));
-    const alpha = (this.#rgba.a * 100).toFixed(0);
-    this.value = this.rgbAlphaToHex(
-      {
-        r: this.#rgba.r,
-        g: this.#rgba.g,
-        b: this.#rgba.b,
-      },
-      alpha
-    );
+    this.#setValues(this.getAttribute("value"));
+
     let html = ``;
     if (this.getAttribute("text")) {
       let label = `<fig-input-text type="text" placeholder="Text" value="${this.value}"></fig-input-text>`;
@@ -1140,36 +1134,34 @@ class FigInputColor extends HTMLElement {
                         type="number"
                         min="0"
                         max="100"
-                        value="${alpha}">
+                        value="${this.alpha}">
                         <span slot="append">%</slot>
                     </fig-input-text>
                 </fig-tooltip>`;
       }
       html = `<div class="input-combo">
-                <fig-chit type="color" disabled="false" value="${this.value}"></fig-chit>
+                <fig-chit type="color" disabled="false" value="${this.hexOpaque}"></fig-chit>
                 ${label}
             </div>`;
     } else {
-      html = `<fig-chit type="color" disabled="false" value="${this.value}"></fig-chit>`;
+      html = `<fig-chit type="color" disabled="false" value="${this.hexOpaque}"></fig-chit>`;
     }
     this.innerHTML = html;
 
-    this.style.setProperty("--alpha", this.#rgba.a);
-
     requestAnimationFrame(() => {
-      this.#swatch = this.querySelector("input[type=color]");
-      this.textInput = this.querySelector("fig-input-text:not([type=number])");
+      this.#swatch = this.querySelector("fig-chit[type=color]");
+      this.#textInput = this.querySelector("fig-input-text:not([type=number])");
       this.#alphaInput = this.querySelector("fig-input-text[type=number]");
 
       this.#swatch.disabled = this.hasAttribute("disabled");
-      this.#swatch.addEventListener("input", this.handleInput.bind(this));
+      this.#swatch.addEventListener("input", this.#handleInput.bind(this));
 
-      if (this.textInput) {
-        this.textInput.value = this.#swatch.value = this.rgbAlphaToHex(
-          this.#rgba,
+      if (this.#textInput) {
+        this.#textInput.value = this.#swatch.value = this.rgbAlphaToHex(
+          this.rgba,
           1
         );
-        this.textInput.addEventListener(
+        this.#textInput.addEventListener(
           "input",
           this.#handleTextInput.bind(this)
         );
@@ -1178,65 +1170,66 @@ class FigInputColor extends HTMLElement {
       if (this.#alphaInput) {
         this.#alphaInput.addEventListener(
           "input",
-          this.handleAlphaInput.bind(this)
+          this.#handleAlphaInput.bind(this)
         );
       }
     });
   }
+  #setValues(hexValue) {
+    this.rgba = this.convertToRGBA(hexValue);
+    this.value = this.rgbAlphaToHex(
+      {
+        r: this.rgba.r,
+        g: this.rgba.g,
+        b: this.rgba.b,
+      },
+      this.rgba.a
+    );
+    this.hexWithAlpha = this.value;
+    this.hexOpaque = this.hexWithAlpha.slice(0, 7);
+    if (hexValue.length > 7) {
+      this.alpha = (this.rgba.a * 100).toFixed(0);
+    }
+    this.style.setProperty("--alpha", this.rgba.a);
+  }
+
   #handleTextInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
-    this.value = this.#swatch.value = this.textInput.value;
-    this.setAttribute("value", this.value);
+    this.#setValues(event.target.value);
+    if (this.#alphaInput) {
+      this.#alphaInput.setAttribute("value", this.alpha);
+    }
+    if (this.#swatch) {
+      this.#swatch.setAttribute("value", this.hexOpaque);
+    }
+    this.#emitInputEvent();
   }
-  handleAlphaInput(event) {
+
+  #handleAlphaInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
-    this.#rgba = this.convertToRGBA(this.#swatch.value);
-    this.#rgba.a = Number(this.#alphaInput.value) / 100;
-    this.value = this.rgbAlphaToHex(
-      {
-        r: this.#rgba.r,
-        g: this.#rgba.g,
-        b: this.#rgba.b,
-      },
-      this.#rgba.a
-    );
-    this.style.setProperty("--alpha", this.#rgba.a);
-    const e = new CustomEvent("input", {
-      bubbles: true,
-      cancelable: true,
-    });
-    this.dispatchEvent(e);
+    const alpha = Math.round((event.target.value / 100) * 255);
+    const alphaHex = alpha.toString(16).padStart(2, "0");
+    this.#setValues(this.hexOpaque + alphaHex);
+    this.#emitInputEvent();
   }
 
   focus() {
     this.#swatch.focus();
   }
 
-  handleInput(event) {
+  #handleInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
-
-    let alpha = this.#rgba.a;
-    this.#rgba = this.convertToRGBA(this.#swatch.value);
-    this.#rgba.a = alpha;
-    if (this.textInput) {
-      this.textInput.value = this.#swatch.value;
-    }
-    this.style.setProperty("--alpha", this.#rgba.a);
-    this.value = this.rgbAlphaToHex(
-      {
-        r: this.#rgba.r,
-        g: this.#rgba.g,
-        b: this.#rgba.b,
-      },
-      alpha
-    );
-    this.alpha = alpha;
-    if (this.#alphaInput) {
-      this.#alphaInput.value = this.#rgba.a.toFixed(0);
+    this.#setValues(event.target.value);
+    if (this.#textInput) {
+      this.#textInput.setAttribute("value", this.value);
     }
+    this.#emitInputEvent();
+  }
+
+  #emitInputEvent() {
     const e = new CustomEvent("input", {
       bubbles: true,
       cancelable: true,
@@ -1251,15 +1244,17 @@ class FigInputColor extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "value":
-        if (this.textInput) {
-          this.value =
-            this.#swatch.value =
-            this.textInput.value =
-              newValue.toUpperCase();
-        } else {
-          this.value = newValue.toUpperCase();
+        this.#setValues(newValue);
+        if (this.#textInput) {
+          this.#textInput.setAttribute("value", this.hex);
+        }
+        if (this.#swatch) {
+          this.#swatch.setAttribute("value", this.hex);
         }
-        this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+        if (this.#alphaInput) {
+          this.#alphaInput.setAttribute("value", this.alpha);
+        }
+        this.#emitInputEvent();
         break;
     }
   }
@@ -1549,7 +1544,7 @@ class FigChit extends HTMLElement {
   connectedCallback() {
     this.type = this.getAttribute("type") || "color";
     this.src = this.getAttribute("src") || "";
-    this.value = this.getAttribute("value") || "";
+    this.value = this.getAttribute("value") || "#000000";
     this.size = this.getAttribute("size") || "small";
     this.disabled = this.getAttribute("disabled") === "true";
     this.innerHTML = `<input type="color" value="${this.value}" />`;

package/package.json

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