wj-elements 0.2.0-alpha.8 → 0.3.0-alpha.1

package/dist/wje-color-picker.js

@@ -992,12 +992,15 @@ class ColorPicker extends WJElement {
      * @param {Event} e The event triggering the marker movement, typically a mouse or touch event.
      */
     __publicField(this, "moveMarker", (e) => {
+      var _a;
       this.colorAreaDimension = this.dimension();
       const pointer = this.getPointerPosition(e);
-      let x = pointer.x - this.colorAreaDimension.x;
-      let y = pointer.y - this.colorAreaDimension.y;
-      this.setColor(this.setColorAtPosition(x, y), "marker");
-      this.setMarkerPosition(x, y);
+      const x = pointer.x - this.colorAreaDimension.x;
+      const y = pointer.y - this.colorAreaDimension.y;
+      const markerPosition = this.clampMarkerPosition(x, y);
+      const alpha = Number(((_a = this.alphaSlider) == null ? void 0 : _a.value) || 100);
+      this.setColor(this.setColorAtPosition(markerPosition.x, markerPosition.y, alpha), "marker");
+      this.setMarkerPosition(markerPosition.x, markerPosition.y);
     });
     /**
      * Sets the marker position by color.
@@ -1005,16 +1008,21 @@ class ColorPicker extends WJElement {
      * @returns {{x: number, y: number}}
      */
     __publicField(this, "setMarkerPositionByColor", (color = "red") => {
+      var _a, _b;
       let hsva = tinycolor(color).toHsv();
+      const width = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0;
+      const height = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0;
+      const safeS = Number.isFinite(hsva.s) ? hsva.s : 0;
+      const safeV = Number.isFinite(hsva.v) ? hsva.v : 0;
       return {
-        x: this.colorAreaDimension.width * hsva.s,
-        y: this.colorAreaDimension.height - this.colorAreaDimension.height * hsva.v
+        x: width * safeS,
+        y: height - height * safeV
       };
     });
     /**
      * Updates the color picker's current color and its associated UI elements.
      * @param {tinycolor.Instance|null} [color] The color value to set. If null, the current value from the input field is used.
-     * @param {string} [type] The type of action determining which UI element to update. Possible values: "marker", "hue", "alpha", "swatch".
+     * @param {string} [type] The type of action determining which UI element to update. Possible values: "marker", "hue", "alpha", "swatch", "input".
      */
     __publicField(this, "setColor", (color = null, type = "") => {
       let currentColor = color;
@@ -1023,7 +1031,6 @@ class ColorPicker extends WJElement {
         this.colorArea.style.setProperty("--wje-color-picker-area", currentColor.toHexString());
       }
       if (type === "marker") {
-        this.alphaSlider.value = 100;
         this.alphaSlider.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
         this.colorPreview.style.setProperty("--wje-color-picker-value", currentColor.toHex8String());
         this.picker.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
@@ -1035,12 +1042,13 @@ class ColorPicker extends WJElement {
           this.markerPosition.y,
           this.alphaSlider.value
         );
-        currentColor = tinycolor(this.getHSVA(this.hueSlider.value, this.alphaSlider.value));
+        const hueColor = this.getHueAreaColor(this.getHSVA(this.hueSlider.value, 100));
         this.colorPreview.style.setProperty("--wje-color-picker-value", markerColorByPosition.toHex8String());
         this.marker.style.setProperty("--wje-color-picker-value", markerColorByPosition.toHexString());
-        this.alphaSlider.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
-        this.colorArea.style.setProperty("--wje-color-picker-area", currentColor.toHexString());
+        this.alphaSlider.style.setProperty("--wje-color-picker-value", markerColorByPosition.toHexString());
+        this.colorArea.style.setProperty("--wje-color-picker-area", hueColor);
         this.input.value = markerColorByPosition.toHex8String();
+        currentColor = markerColorByPosition;
       }
       if (type === "alpha") {
         currentColor = tinycolor(this.input.value);
@@ -1049,16 +1057,21 @@ class ColorPicker extends WJElement {
         currentColor = tinycolor(hsv);
         this.colorPreview.style.setProperty("--wje-color-picker-value", currentColor.toHex8String());
       }
-      if (type === "swatch" || type === "init") {
+      if (type === "swatch" || type === "init" || type === "input") {
         this.colorPreview.style.setProperty("--wje-color-picker-value", currentColor.toHex8String());
         this.marker.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
         this.alphaSlider.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
-        this.colorArea.style.setProperty("--wje-color-picker-area", currentColor.toHex8String());
+        this.colorArea.style.setProperty("--wje-color-picker-area", this.getHueAreaColor(currentColor.toHex8String()));
         this.markerPosition = this.setMarkerPositionByColor(currentColor.toHex8String());
         this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y);
       }
+      if (!(currentColor == null ? void 0 : currentColor.isValid())) return;
       if (!this.noColorArea || !this.noControls || !this.noSwatches) {
-        this.input.value = currentColor.toHex8String();
+        if (type === "input" && this.inputEditable && typeof this._manualInputValue === "string") {
+          this.input.value = this._manualInputValue;
+        } else {
+          this.input.value = currentColor.toHex8String();
+        }
       }
       this.anchor.style.setProperty("--wje-color-picker-value", currentColor.toHexString());
       this.value = {
@@ -1120,6 +1133,7 @@ class ColorPicker extends WJElement {
       "#00b4d880",
       "rgba(0,119,182,0.8)"
     ];
+    this._manualInputValue = null;
   }
   /**
    * Sets the color attribute of the element.
@@ -1154,16 +1168,30 @@ class ColorPicker extends WJElement {
    * @param {string} value The new color swatches.
    */
   set swatches(value) {
-    this.setAttribute("swatches", value.split(","));
+    if (Array.isArray(value)) {
+      this.setAttribute("swatches", value.join(","));
+      return;
+    }
+    this.setAttribute("swatches", this.parseSwatches(value).join(","));
   }
   /**
    * Getter for the color swatches.
    * @returns {Array} The current color swatches.
    */
   get swatches() {
-    this._swatches = this.getAttribute("swatches") ? this.getAttribute("swatches").split(",") : this._swatches;
+    this._swatches = this.getAttribute("swatches") ? this.parseSwatches(this.getAttribute("swatches")) : this._swatches;
     return this._swatches;
   }
+  /**
+   * Normalizes swatch colors from a string to an array.
+   * Supports comma and semicolon separators.
+   * @param {string} value
+   * @returns {string[]}
+   */
+  parseSwatches(value = "") {
+    if (typeof value !== "string") return [];
+    return value.split(/[;,]/).map((item) => item.trim()).filter(Boolean);
+  }
   /**
    * Sets or removes the 'no-color-area' attribute based on the provided value.
    * @param {boolean} value A boolean value indicating whether to set or remove the 'no-color-area' attribute. If true, the attribute is added; if false, the attribute is removed.
@@ -1220,6 +1248,24 @@ class ColorPicker extends WJElement {
   get noSwatches() {
     return this.hasAttribute("no-swatches");
   }
+  /**
+   * Enables/disables manual typing in the input.
+   * @param {boolean} value
+   */
+  set inputEditable(value) {
+    if (value) {
+      this.setAttribute("input-editable", "");
+    } else {
+      this.removeAttribute("input-editable");
+    }
+  }
+  /**
+   * Returns true when manual input typing is enabled.
+   * @returns {boolean}
+   */
+  get inputEditable() {
+    return this.hasAttribute("input-editable");
+  }
   /**
    * Getter for the CSS stylesheet.
    * @returns {object} The styles object.
@@ -1294,11 +1340,30 @@ class ColorPicker extends WJElement {
     colorPreview.classList.add("color-preview");
     let input = document.createElement("wje-input");
     input.setAttribute("variant", "standard");
-    if (!this.noColorArea || !this.noControls || !this.noSwatches)
+    input.setAttribute("maxlength", "9");
+    if ((!this.noColorArea || !this.noControls || !this.noSwatches) && !this.inputEditable)
       input.setAttribute("readonly", "");
     input.classList.add("input");
-    input.addEventListener("wje-input:input", (e) => {
-      this.setColor(tinycolor(input.value), "swatch");
+    input.addEventListener("wje-input:input", () => {
+      let rawValue = (input.value || "").trim();
+      const hasHashPrefix = rawValue.startsWith("#");
+      const maxLength = hasHashPrefix ? 9 : 8;
+      if (rawValue.length > maxLength) {
+        rawValue = rawValue.slice(0, maxLength);
+        input.value = rawValue;
+      }
+      const hexCandidate = hasHashPrefix ? rawValue.slice(1) : rawValue;
+      const isHex = /^[0-9a-fA-F]+$/.test(hexCandidate);
+      if (isHex) {
+        if (hexCandidate.length < 6) return;
+        if (![6, 8].includes(hexCandidate.length)) return;
+      }
+      const parsedColor = tinycolor(isHex ? `#${hexCandidate}` : rawValue);
+      if (!parsedColor.isValid()) return;
+      this._manualInputValue = rawValue;
+      this.setSliders(parsedColor.toHex8String());
+      this.setColor(parsedColor, "input");
+      this._manualInputValue = null;
     });
     colorArea.append(marker);
     alphaWrapper.append(alphaSlider);
@@ -1352,10 +1417,12 @@ class ColorPicker extends WJElement {
     let swatches = document.createElement("div");
     swatches.classList.add("swatches");
     this.swatches.forEach((swatch) => {
+      if (!tinycolor(swatch).isValid()) return;
       let button = document.createElement("button");
+      button.setAttribute("type", "button");
       button.classList.add("swatch");
       button.style.setProperty("--wje-color-picker-swatch", swatch);
-      button.addEventListener("click", (e) => {
+      button.addEventListener("click", () => {
         this.setSliders(swatch);
         this.setColor(tinycolor(swatch), "swatch");
       });
@@ -1416,14 +1483,30 @@ class ColorPicker extends WJElement {
    * @param y
    */
   setMarkerPosition(x, y) {
-    x = x < 0 ? 0 : x > this.colorAreaDimension.width ? this.colorAreaDimension.width : x;
-    y = y < 0 ? 0 : y > this.colorAreaDimension.height ? this.colorAreaDimension.height : y;
+    const markerPosition = this.clampMarkerPosition(x, y);
     this.markerPosition = {
-      x,
-      y
+      x: markerPosition.x,
+      y: markerPosition.y
+    };
+    this.marker.style.left = `${markerPosition.x}px`;
+    this.marker.style.top = `${markerPosition.y}px`;
+  }
+  /**
+   * Clamps marker coordinates to the color area boundaries.
+   * @param {number} x
+   * @param {number} y
+   * @returns {{x: number, y: number}}
+   */
+  clampMarkerPosition(x, y) {
+    var _a, _b;
+    const width = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0;
+    const height = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0;
+    const safeX = Number.isFinite(x) ? x : 0;
+    const safeY = Number.isFinite(y) ? y : 0;
+    return {
+      x: Math.min(Math.max(safeX, 0), width),
+      y: Math.min(Math.max(safeY, 0), height)
     };
-    this.marker.style.left = `${x}px`;
-    this.marker.style.top = `${y}px`;
   }
   /**
    * Sets the color at the given position.
@@ -1433,14 +1516,45 @@ class ColorPicker extends WJElement {
    * @returns {*|tinycolor}
    */
   setColorAtPosition(x, y, alpha = 100) {
+    var _a, _b, _c;
+    const markerPosition = this.clampMarkerPosition(x, y);
+    const width = ((_a = this.colorAreaDimension) == null ? void 0 : _a.width) || 0;
+    const height = ((_b = this.colorAreaDimension) == null ? void 0 : _b.height) || 0;
+    const safeAlpha = Number.isFinite(Number(alpha)) ? Number(alpha) : 100;
+    if (width <= 0 || height <= 0) {
+      const fallbackHsv = tinycolor(((_c = this.input) == null ? void 0 : _c.value) || this.color).toHsv();
+      return tinycolor({
+        h: this.hueSlider.value * 1,
+        s: fallbackHsv.s,
+        v: fallbackHsv.v,
+        a: Math.max(0, Math.min(100, safeAlpha)) / 100
+      });
+    }
     const hsva = {
       h: this.hueSlider.value * 1,
-      s: x / this.colorAreaDimension.width * 100,
-      v: 100 - y / this.colorAreaDimension.height * 100,
-      a: alpha / 100
+      s: markerPosition.x / width * 100,
+      v: 100 - markerPosition.y / height * 100,
+      a: Math.max(0, Math.min(100, safeAlpha)) / 100
     };
     return tinycolor(hsva);
   }
+  /**
+   * Returns fully saturated and bright color for the current hue.
+   * Used as base color for the SV area so neutral grays do not black out the palette.
+   * @param {string} color
+   * @returns {string}
+   */
+  getHueAreaColor(color = "#ff0000") {
+    var _a;
+    const hsv = tinycolor(color).toHsv();
+    const hue = Number.isFinite(hsv.h) ? hsv.h : Number(((_a = this.hueSlider) == null ? void 0 : _a.value) || 0);
+    return tinycolor({
+      h: hue,
+      s: 100,
+      v: 100,
+      a: 1
+    }).toHexString();
+  }
 }
 _init = new WeakMap();
 WJElement.define("wje-color-picker", ColorPicker);