@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.17

package/components/color-controller-BjDZaxhX.js

@@ -0,0 +1,491 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import Color from "colorjs.io";
+class ColorController {
+  /**
+   * Creates an instance of ColorController.
+   *
+   * @param host - The ReactiveElement that this controller is associated with.
+   * @param options - An object containing optional parameters.
+   * @param options.manageAs - A string to manage the controller as a specific type.
+   */
+  constructor(host, {
+    manageAs
+  } = {}) {
+    this._color = new Color("hsv", [0, 100, 100], 1);
+    this.host = host;
+    this.manageAs = manageAs;
+  }
+  get color() {
+    return this._color;
+  }
+  /**
+   * Validates a color string and returns a result indicating the color space,
+   * coordinates, alpha value, and whether the color is valid.
+   *
+   * @param color - The color string to validate. Supported formats include:
+   *  - RGB: `rgb(r, g, b)`, `rgba(r, g, b, a)`, `rgb r g b`, `rgba r g b a`
+   *  - HSL: `hsl(h, s, l)`, `hsla(h, s, l, a)`, `hsl h s l`, `hsla h s l a`
+   *  - HSV: `hsv(h, s, v)`, `hsva(h, s, v, a)`, `hsv h s v`, `hsva h s v a`
+   *  - HEX: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`
+   *
+   * @returns An object containing the following properties:
+   *  - `spaceId`: The color space identifier (`'srgb'`, `'hsl'`, or `'hsv'`).
+   *  - `coords`: An array of numeric values representing the color coordinates.
+   *  - `alpha`: The alpha value of the color (0 to 1).
+   *  - `isValid`: A boolean indicating whether the color string is valid.
+   */
+  validateColorString(color) {
+    var _a, _b, _c, _d;
+    const result = {
+      spaceId: null,
+      coords: [0, 0, 0],
+      isValid: false,
+      alpha: 1
+    };
+    const rgbRegExpArray = [
+      // With commas
+      /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // rgba(r, g, b, a)
+      /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i,
+      // rgb(r, g, b)
+      // With spaces
+      /^rgba\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(0|0?\.\d+|1)\s*$/i,
+      // rgba r g b a
+      /^rgb\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*$/i,
+      // rgb r g b
+      // Spaces inside parentheses
+      /^rgba\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(\d*\.?\d+)\s*\)$/i,
+      // rgba(r g b a)
+      /^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*\)$/i,
+      // rgb(r g b)
+      // Percentage values
+      /rgb\(\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*\)/i,
+      // rgb(r%, g%, b%)
+      /rgba\(\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(\d*\.?\d+)\s*\)/i
+      // rgba(r%, g%, b%, a)
+    ];
+    const hslRegExpArray = [
+      // With commas
+      /hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // hsla(h, s, l, a)
+      /hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,
+      // hsl(h, s, l)
+      // With spaces
+      /^hsla\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,
+      // hsla h s l a
+      /^hsl\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,
+      // hsl h s l
+      // Spaces inside parentheses
+      /^hsla\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,
+      // hsla(h s l a)
+      /^hsl\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i
+      // hsl(h s l)
+    ];
+    const hsvRegExpArray = [
+      // With commas
+      /hsva\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // hsva(h, s, v, a)
+      /hsv\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,
+      // hsv(h, s, v)
+      // With spaces
+      /^hsva\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,
+      // hsva h s v a
+      /^hsv\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,
+      // hsv h s v
+      // Spaces inside parentheses
+      /^hsva\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,
+      // hsva(h s v a)
+      /^hsv\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i
+      // hsv(h s v)
+    ];
+    const hexRegExpArray = [
+      /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/,
+      // 6-digit hex with optional hex alpha
+      /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/
+      // 3-digit hex with optional hex alpha
+    ];
+    const rgbaMatch = (_a = rgbRegExpArray.find((regex) => regex.test(color))) == null ? void 0 : _a.exec(color);
+    const hslaMatch = (_b = hslRegExpArray.find((regex) => regex.test(color))) == null ? void 0 : _b.exec(color);
+    const hsvaMatch = (_c = hsvRegExpArray.find((regex) => regex.test(color))) == null ? void 0 : _c.exec(color);
+    const hexMatch = (_d = hexRegExpArray.find((regex) => regex.test(color))) == null ? void 0 : _d.exec(color);
+    if (rgbaMatch) {
+      const [, r, g, b, a] = rgbaMatch.filter(
+        (element) => typeof element === "string"
+      );
+      const alpha = a === void 0 ? 1 : Number(a);
+      const processValue = (value) => {
+        if (value.includes("%")) {
+          return Number(value.replace("%", "")) / 100;
+        }
+        return Number(value) / 255;
+      };
+      const numericR = processValue(r);
+      const numericG = processValue(g);
+      const numericB = processValue(b);
+      result.spaceId = "srgb";
+      result.coords = [numericR, numericG, numericB];
+      result.alpha = alpha;
+      result.isValid = numericR >= 0 && numericR <= 1 && numericG >= 0 && numericG <= 1 && numericB >= 0 && numericB <= 1 && alpha >= 0 && alpha <= 1;
+    } else if (hslaMatch) {
+      const [, h, s, l, a] = hslaMatch;
+      const values = [h, s, l, a === void 0 ? "1" : a].map(
+        (value) => Number(value.replaceAll(/[^\d.]/g, ""))
+      );
+      const [numericH, numericS, numericL, numericA] = values;
+      result.spaceId = "hsl";
+      result.coords = [numericH, numericS, numericL];
+      result.alpha = numericA;
+      result.isValid = numericH >= 0 && numericH <= 360 && numericS >= 0 && numericS <= 100 && numericL >= 0 && numericL <= 100 && numericA >= 0 && numericA <= 1;
+    } else if (hsvaMatch) {
+      const [, h, s, v, a] = hsvaMatch;
+      const values = [h, s, v, a === void 0 ? "1" : a].map(
+        (value) => Number(value.replaceAll(/[^\d.]/g, ""))
+      );
+      const [numericH, numericS, numericV, numericA] = values;
+      result.spaceId = "hsv";
+      result.coords = [numericH, numericS, numericV];
+      result.alpha = numericA;
+      result.isValid = numericH >= 0 && numericH <= 360 && numericS >= 0 && numericS <= 100 && numericV >= 0 && numericV <= 100 && numericA >= 0 && numericA <= 1;
+    } else if (hexMatch) {
+      const [, hex, alphaHex] = hexMatch;
+      const processHex = (hexVal) => {
+        if (hexVal.length === 1) {
+          hexVal = hexVal + hexVal;
+        }
+        return Number.parseInt(hexVal, 16) / 255;
+      };
+      let numericR;
+      let numericG;
+      let numericB;
+      if (hex.length === 3) {
+        numericR = processHex(hex.slice(0, 1));
+        numericG = processHex(hex.slice(1, 2));
+        numericB = processHex(hex.slice(2, 3));
+      } else {
+        numericR = processHex(hex.slice(0, 2));
+        numericG = processHex(hex.slice(2, 4));
+        numericB = processHex(hex.slice(4, 6));
+      }
+      const numericA = alphaHex ? processHex(alphaHex) : 1;
+      result.spaceId = "srgb";
+      result.coords = [numericR, numericG, numericB];
+      result.alpha = numericA;
+      result.isValid = numericR >= 0 && numericR <= 1 && numericG >= 0 && numericG <= 1 && numericB >= 0 && numericB <= 1 && numericA >= 0 && numericA <= 1;
+    }
+    return result;
+  }
+  /**
+   * Gets the original color value provided by the user.
+   *
+   * @returns The original color value.
+   */
+  get colorOrigin() {
+    return this._colorOrigin;
+  }
+  /**
+   * Sets the original color value provided by the user.
+   *
+   * @param colorOrigin - The original color value to set.
+   */
+  set colorOrigin(colorOrigin) {
+    this._colorOrigin = colorOrigin;
+  }
+  /**
+   * Sets the color value for the controller. The color can be provided in various formats:
+   * - A string representing a color name, hex code, or other color format.
+   * - An instance of the `Color` class.
+   * - An object containing color properties such as `h`, `s`, `l`, `v`, `r`, `g`, `b`, and optionally `a`.
+   *
+   * The method validates and parses the input color, converting it to a `Color` instance.
+   * If the color is invalid, it attempts to parse it as a hex code or returns without setting a new color.
+   *
+   * @param color - The color value to set. It can be a string, an instance of `Color`, or an object with color properties.
+   */
+  set color(color) {
+    this._colorOrigin = color;
+    let newColor;
+    if (typeof color === "string") {
+      const colorValidationResult = this.validateColorString(color);
+      if (colorValidationResult.isValid) {
+        const [coord1, coord2, coord3] = colorValidationResult.coords;
+        newColor = new Color(
+          `${colorValidationResult.spaceId}`,
+          [coord1, coord2, coord3],
+          colorValidationResult.alpha
+        );
+      } else {
+        try {
+          Color.parse(color);
+        } catch {
+          try {
+            newColor = new Color(`#${color}`);
+          } catch {
+            return;
+          }
+        }
+      }
+    } else if (color instanceof Color) {
+      newColor = color;
+    } else if (!Array.isArray(color)) {
+      const { h, s, l, v, r, g, b, a } = color;
+      if (h !== void 0 && s !== void 0) {
+        const lv = l ?? v;
+        newColor = new Color(
+          l === void 0 ? "hsv" : "hsl",
+          [
+            Number.parseFloat(h),
+            typeof s === "string" ? Number.parseFloat(s) : s * 100,
+            typeof lv === "string" ? Number.parseFloat(lv) : lv * 100
+          ],
+          Number.parseFloat(a || "1")
+        );
+      } else if (r !== void 0 && g !== void 0 && b !== void 0) {
+        newColor = new Color(
+          "srgb",
+          [
+            Number.parseFloat(r) / 255,
+            Number.parseFloat(g) / 255,
+            Number.parseFloat(b) / 255
+          ],
+          Number.parseFloat(a || "1")
+        );
+      }
+    }
+    if (!newColor) {
+      newColor = new Color(color);
+    }
+    this._color = this.manageAs ? newColor.to(this.manageAs) : newColor;
+    this.host.requestUpdate();
+  }
+  /**
+   * Gets the color value in various formats based on the original color input.
+   *
+   * The method determines the color space of the original color input and converts
+   * the color to the appropriate format. The supported color spaces are:
+   * - HSV (Hue, Saturation, Value)
+   * - HSL (Hue, Saturation, Lightness)
+   * - Hexadecimal (with or without alpha)
+   * - RGB (Red, Green, Blue) with optional alpha
+   *
+   * @returns The color value in the appropriate format.
+   *
+   * The method handles the following cases:
+   * - If the original color input is a string, it checks the prefix to determine the color space.
+   * - If the original color input is an object, it checks the properties to determine the color space.
+   * - If the original color input is not provided, it defaults to the current color space of the color object.
+   *
+   * The returned color value can be in one of the following formats:
+   * - `hsv(h, s%, v%)` or `hsva(h, s%, v%, a)`
+   * - `hsl(h, s%, l%)` or `hsla(h, s%, l%, a)`
+   * - `#rrggbb` or `#rrggbbaa`
+   * - `rgb(r, g, b)` or `rgba(r, g, b, a)`
+   * - `{ h, s, v, a }` for HSV object
+   * - `{ h, s, l, a }` for HSL object
+   * - `{ r, g, b, a }` for RGB object
+   */
+  get colorValue() {
+    let spaceId;
+    if (typeof this._colorOrigin === "string") {
+      if (this._colorOrigin.startsWith("#")) {
+        spaceId = "hex string";
+      } else if (this._colorOrigin.startsWith("rgb")) {
+        spaceId = "rgb";
+      } else if (this._colorOrigin.startsWith("hsl")) {
+        spaceId = "hsl";
+      } else if (this._colorOrigin.startsWith("hsv")) {
+        spaceId = "hsv";
+      } else {
+        spaceId = "hex";
+      }
+      switch (spaceId) {
+        case "hsv": {
+          const hadAlpha = this._colorOrigin[3] === "a";
+          const { h, s, v } = this._color.to("hsv").hsv;
+          const a = this._color.alpha;
+          return `hsv${hadAlpha ? `a` : ""}(${Math.round(
+            h
+          )}, ${Math.round(s)}%, ${Math.round(v)}%${hadAlpha ? `, ${a}` : ""})`;
+        }
+        case "hsl": {
+          const hadAlpha = this._colorOrigin[3] === "a";
+          const { h, s, l } = this._color.to("hsl").hsl;
+          const a = this._color.alpha;
+          return `hsl${hadAlpha ? `a` : ""}(${Math.round(
+            h
+          )}, ${Math.round(s)}%, ${Math.round(l)}%${hadAlpha ? `, ${a}` : ""})`;
+        }
+        case "hex string": {
+          const { r, g, b } = this._color.to("srgb").srgb;
+          const hadAlpha = this._colorOrigin.length === 5 || this._colorOrigin.length === 9;
+          const a = this._color.alpha;
+          const rHex = Math.round(r * 255).toString(16);
+          const gHex = Math.round(g * 255).toString(16);
+          const bHex = Math.round(b * 255).toString(16);
+          const aHex = Math.round(a * 255).toString(16);
+          return `#${rHex.padStart(2, "0")}${gHex.padStart(
+            2,
+            "0"
+          )}${bHex.padStart(2, "0")}${hadAlpha ? aHex.padStart(2, "0") : ""}`;
+        }
+        case "hex": {
+          const { r, g, b } = this._color.to("srgb").srgb;
+          const hadAlpha = this._colorOrigin.length === 4 || this._colorOrigin.length === 8;
+          const a = this._color.alpha;
+          const rHex = Math.round(r * 255).toString(16);
+          const gHex = Math.round(g * 255).toString(16);
+          const bHex = Math.round(b * 255).toString(16);
+          const aHex = Math.round(a * 255).toString(16);
+          return `${rHex.padStart(2, "0")}${gHex.padStart(
+            2,
+            "0"
+          )}${bHex.padStart(2, "0")}${hadAlpha ? aHex.padStart(2, "0") : ""}`;
+        }
+        // rgb
+        default: {
+          const { r, g, b } = this._color.to("srgb").srgb;
+          const hadAlpha = this._colorOrigin[3] === "a";
+          const a = this._color.alpha;
+          if (this._colorOrigin.search("%") > -1) {
+            return `rgb${hadAlpha ? `a` : ""}(${Math.round(r * 100)}%, ${Math.round(
+              g * 100
+            )}%, ${Math.round(b * 100)}%${hadAlpha ? `,${Math.round(a * 100)}%` : ""})`;
+          }
+          return `rgb${hadAlpha ? `a` : ""}(${Math.round(r * 255)}, ${Math.round(
+            g * 255
+          )}, ${Math.round(b * 255)}${hadAlpha ? `, ${a}` : ""})`;
+        }
+      }
+    }
+    if (this._colorOrigin) {
+      try {
+        ({ spaceId } = new Color(this._colorOrigin));
+      } catch {
+        const { h, s, l, v, r, g, b } = this._colorOrigin;
+        if (h !== void 0 && s !== void 0 && l !== void 0) {
+          spaceId = "hsl";
+        } else if (h !== void 0 && s !== void 0 && v !== void 0) {
+          spaceId = "hsv";
+        } else if (r !== void 0 && g !== void 0 && b !== void 0) {
+          spaceId = "srgb";
+        }
+      }
+    } else {
+      ({ spaceId } = this.color);
+    }
+    switch (spaceId) {
+      case "hsv": {
+        const { h, s, v } = this._color.to("hsv").hsv;
+        return {
+          h,
+          s: s / 100,
+          v: v / 100,
+          a: this._color.alpha
+        };
+      }
+      case "hsl": {
+        const { h, s, l } = this._color.to("hsl").hsl;
+        return {
+          h,
+          s: s / 100,
+          l: l / 100,
+          a: this._color.alpha
+        };
+      }
+      case "srgb": {
+        const { r, g, b } = this._color.to("srgb").srgb;
+        if (this._colorOrigin && typeof this._colorOrigin.r === "string" && this._colorOrigin.r.search("%")) {
+          return {
+            r: `${Math.round(r * 255)}%`,
+            g: `${Math.round(g * 255)}%`,
+            b: `${Math.round(b * 255)}%`,
+            a: this._color.alpha
+          };
+        }
+        return {
+          r: Math.round(r * 255),
+          g: Math.round(g * 255),
+          b: Math.round(b * 255),
+          a: this._color.alpha
+        };
+      }
+    }
+    return this._color;
+  }
+  /**
+   * Gets the hue value of the current color in HSL format.
+   *
+   * @returns The hue value as a number.
+   */
+  get hue() {
+    return Number(this._color.to("hsl").hsl.h);
+  }
+  /**
+   * Sets the hue value of the color and requests an update from the host.
+   *
+   * @param hue - The hue value to set, represented as a number.
+   */
+  set hue(hue) {
+    this._color.set("h", hue);
+    this.host.requestUpdate();
+  }
+  /**
+   * Converts the current color to the specified format.
+   *
+   * @param format - The desired color format. It can be a string representing one of the valid formats
+   * ('srgb', 'hsva', 'hsv', 'hsl', 'hsla') or a ColorSpace object.
+   * @returns The color object in the specified format.
+   * @throws Will throw an error if the provided format is not a valid string format.
+   */
+  getColor(format) {
+    const validFormats = ["srgb", "hsva", "hsv", "hsl", "hsla"];
+    if (typeof format === "string" && !validFormats.includes(format)) {
+      throw new Error("not a valid format");
+    }
+    return this._color.to(format);
+  }
+  /**
+   * Converts the current color to an HSL string representation.
+   *
+   * @returns The HSL string representation of the current color.
+   */
+  getHslString() {
+    return this._color.to("hsl").toString();
+  }
+  /**
+   * Saves the current color state by cloning the current color and storing it
+   * as the previous color. This allows for the ability to revert to the previous
+   * color state if needed.
+   *
+   * @returns
+   */
+  savePreviousColor() {
+    this._previousColor = this._color.clone();
+  }
+  /**
+   * Restores the color to the previously saved color value.
+   *
+   * This method sets the current color (`_color`) to the previously stored color (`_previousColor`).
+   */
+  restorePreviousColor() {
+    this._color = this._previousColor;
+  }
+}
+export {
+  ColorController as C
+};