var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
  return value;
};
import { e as range } from "./utils-74Icp-PI.js";
import { H as HTMLElementSSR, a as createSignal, c as createCustomError } from "./index-CSnBqUsQ.js";
import "./index-CWWI8SHO.js";
import "./index-CbyMC6Yz.js";
import "./index-CFnsLnrb.js";
import "./index-0aFKVox7.js";
import "./option.js";
import "./index-DRi1ylHx.js";
const hex2hsv = (hex) => {
  const { r, g, b } = hex2rgb(hex);
  return rgb2hsv(r, g, b);
};
const hex2rgb = (hex) => {
  if (hex[0] === "#")
    hex = hex.substr(1);
  if (hex.length === 3) {
    return {
      r: parseInt(hex[0] + hex[0], 16),
      g: parseInt(hex[1] + hex[1], 16),
      b: parseInt(hex[2] + hex[2], 16)
    };
  }
  return {
    r: parseInt(hex.substr(0, 2), 16),
    g: parseInt(hex.substr(2, 2), 16),
    b: parseInt(hex.substr(4, 2), 16)
  };
};
const rgb2hsv = (r, g, b) => {
  let h;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;
  if (delta === 0) {
    h = 0;
  } else if (r === max) {
    h = (g - b) / delta % 6;
  } else if (g === max) {
    h = (b - r) / delta + 2;
  } else {
    h = (r - g) / delta + 4;
  }
  h = Math.round(h * 60);
  if (h < 0)
    h += 360;
  const s = Math.round((max === 0 ? 0 : delta / max) * 100);
  const v = Math.round(max / 255 * 100);
  return { h, s, v };
};
const hsv2rgb = (h, s, v) => {
  s = s / 100;
  v = v / 100;
  let rgb = [];
  const c = v * s;
  const hh = h / 60;
  const x = c * (1 - Math.abs(hh % 2 - 1));
  const m = v - c;
  if (hh >= 0 && hh < 1) {
    rgb = [c, x, 0];
  } else if (hh >= 1 && hh < 2) {
    rgb = [x, c, 0];
  } else if (hh >= 2 && hh < 3) {
    rgb = [0, c, x];
  } else if (h >= 3 && hh < 4) {
    rgb = [0, x, c];
  } else if (h >= 4 && hh < 5) {
    rgb = [x, 0, c];
  } else if (h >= 5 && hh <= 6) {
    rgb = [c, 0, x];
  } else {
    rgb = [0, 0, 0];
  }
  return {
    r: Math.round(255 * (rgb[0] + m)),
    g: Math.round(255 * (rgb[1] + m)),
    b: Math.round(255 * (rgb[2] + m))
  };
};
const HEX_COLOR_REGEX = /^#([\da-f]{6}|[\da-f]{3})$/i;
const RGB_REGEX = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/;
const RGBA_REGEX = /^rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),(\d{1,3}(\.\d+)?)\)$/;
const BOT_WIDTH = 8;
const HUE = 360;
class ColorPicker extends HTMLElementSSR() {
  constructor() {
    super();
    __publicField(this, "colorpicker");
    __publicField(this, "colorpickerInner");
    __publicField(this, "context");
    __publicField(this, "popoverBlock");
    __publicField(this, "popoverContent");
    __publicField(this, "colorPickerInner");
    __publicField(this, "colorPickerInnerContent");
    __publicField(this, "colorPickerPanel");
    __publicField(this, "colorPickerInputContainer");
    __publicField(this, "colorPickerPanelDot");
    __publicField(this, "colorPickerPanelSliderContainer");
    __publicField(this, "colorPickerPanelSliderGroup");
    __publicField(this, "colorPickerPanelSliderHue");
    __publicField(this, "colorPickerPanelSliderAlpha");
    __publicField(this, "colorPickerColorBlockInner");
    __publicField(this, "colorPickerColorBlock");
    __publicField(this, "colorPickerInnerContentSelect");
    __publicField(this, "colorPickerPanelPalette");
    __publicField(this, "colorPickerPanelSaturation");
    __publicField(this, "colorPickerInputContainerSelect");
    __publicField(this, "colorPickerInputContainerInputColor");
    __publicField(this, "colorPickerInputContainerInputNumber");
    __publicField(this, "colorPickerInputContainerSelectItem");
    __publicField(this, "colorPickerPaletteSelect");
    __publicField(this, "colorPickerPanelDotInner");
    __publicField(this, "createContext", () => {
      this.context = {
        value: this.createColorValueSignal(),
        disabled: this.createColorDisabled(),
        hue: this.createColorHue(),
        saturation: this.createColorSaturation(),
        lightness: this.createColorLightness(),
        transparency: this.createColorTransparency()
      };
    });
    /**
     * @description:  0 - 360 色相 hue
     * @param {*} Signal
     * @return {*}
     */
    __publicField(this, "createColorHue", () => {
      const [getter, setter] = createSignal(0, {
        subscriber: [
          this.updateColorPickerPanelSaturationBackground,
          this.updateColorPickerPanelSliderHueProgressPercent,
          this.updateColorPickerPanelSliderAlphaProgressWrap,
          this.updateColorPickerPanelSliderAlphaProgressDot,
          this.updateColorPickerColorBlockInnerBackground,
          this.updateColorPickerPanelSliderHueProgressDot
        ]
      });
      return { getter, setter };
    });
    /**
     * @description: 0 - 100 饱和度 x
     * @param {*} Signal
     * @return {*}
     */
    __publicField(this, "createColorSaturation", () => {
      const [getter, setter] = createSignal(100, {
        subscriber: [
          this.updateColorPickerPanelSliderAlphaProgressWrap,
          this.updateColorPickerPanelSliderAlphaProgressDot,
          this.updateColorPickerColorBlockInnerBackground
        ]
      });
      return { getter, setter };
    });
    /**
     * @description: 0 - 100 亮度 y
     * @param {*} Signal
     * @return {*}
     */
    __publicField(this, "createColorLightness", () => {
      const [getter, setter] = createSignal(100, {
        subscriber: [
          this.updateColorPickerPanelSliderAlphaProgressWrap,
          this.updateColorPickerPanelSliderAlphaProgressDot,
          this.updateColorPickerColorBlockInnerBackground
        ]
      });
      return { getter, setter };
    });
    /**
     * @description:  0 - 100 透明度
     * @param {*} Signal
     * @return {*}
     */
    __publicField(this, "createColorTransparency", () => {
      const [getter, setter] = createSignal(80, {
        subscriber: [
          this.updateColorPickerPanelSliderAlphaProgressPercent,
          this.updateColorPickerColorBlockInnerBackground,
          this.updateColorPickerPanelSliderAlphaProgressDot
        ]
      });
      return { getter, setter };
    });
    __publicField(this, "createColorDisabled", () => {
      const [getter, setter] = createSignal(true, { subscriber: [] });
      return { getter, setter };
    });
    __publicField(this, "createColorValueSignal", () => {
      const [getter, setter] = createSignal("", {
        subscriber: [this.updateColorValue]
      });
      return { getter, setter };
    });
    __publicField(this, "generateHue2rgb", () => {
      const { hue } = this.context;
      const { r, g, b } = hsv2rgb(hue.getter(), 100, 100);
      return `rgb(${r}, ${g}, ${b})`;
    });
    __publicField(this, "generateHsv2Rgb", () => {
      const { r, g, b } = this.generateHsv2Rgba();
      return `rgb(${r}, ${g}, ${b})`;
    });
    __publicField(this, "generateHsv2Rgba", () => {
      const { hue, saturation, lightness, transparency } = this.context;
      const { r, g, b } = hsv2rgb(hue.getter(), saturation.getter(), lightness.getter());
      return { r, g, b, a: transparency.getter() / 100 };
    });
    __publicField(this, "generateHsv2RgbaValue", () => {
      const { r, g, b, a } = this.generateHsv2Rgba();
      return `rgb(${r}, ${g}, ${b}, ${a})`;
    });
    __publicField(this, "generateColorPickerProgress", () => {
      const { r, g, b } = this.generateHsv2Rgba();
      return `linear-gradient(to right, rgba(255, 0, 4, 0), rgba(${r}, ${g}, ${b}, 1))`;
    });
    __publicField(this, "updateColorValue", (value) => {
      var _a, _b;
      if (value !== ((_a = this.context) == null ? void 0 : _a.value.getter())) {
        const hex = HEX_COLOR_REGEX.exec(value);
        const rga = RGB_REGEX.exec(value.replace(/\s+/g, ""));
        const rgba = RGBA_REGEX.exec(value.replace(/\s+/g, ""));
        if (hex) {
          const { h, s, v } = hex2hsv(hex[0]);
          this.context.hue.setter(h);
          this.context.saturation.setter(s);
          this.context.lightness.setter(v);
          this.context.transparency.setter(100);
        } else if (rgba) {
          const { h, s, v } = rgb2hsv(Number(rgba[1]), Number(rgba[2]), Number(rgba[3]));
          this.context.hue.setter(h);
          this.context.saturation.setter(s);
          this.context.lightness.setter(v);
          this.context.transparency.setter(Number(rgba[4]));
        } else if (rga) {
          const { h, s, v } = rgb2hsv(Number(rga[1]), Number(rga[2]), Number(rga[3]));
          this.context.hue.setter(h);
          this.context.saturation.setter(s);
          this.context.lightness.setter(v);
          this.context.transparency.setter(100);
        } else {
          return;
        }
        this.setAttribute("value", value);
        this.colorpickerInner.style.setProperty("background", value);
        (_b = this.context) == null ? void 0 : _b.value.setter(value);
      }
    });
    __publicField(this, "updateColorPickerPanelSliderHueProgressPercent", (hue) => {
      var _a;
      (_a = this.colorPickerPanelSliderHue) == null ? void 0 : _a.setAttribute("percent", `${hue / 360}`);
    });
    __publicField(this, "updateColorPickerPanelSliderAlphaProgressPercent", (alpha) => {
      var _a;
      (_a = this.colorPickerPanelSliderAlpha) == null ? void 0 : _a.setAttribute("percent", `${alpha / 100}`);
    });
    __publicField(this, "updateColorPickerPanelSliderAlphaProgressWrap", () => {
      var _a;
      (_a = this.colorPickerPanelSliderAlpha) == null ? void 0 : _a.style.setProperty("--ran-progress-wrap", this.generateColorPickerProgress());
    });
    __publicField(this, "updateColorPickerPanelSliderAlphaProgressDot", () => {
      var _a;
      (_a = this.colorPickerPanelSliderAlpha) == null ? void 0 : _a.style.setProperty("--ran-progress-dot", this.generateHsv2RgbaValue());
    });
    __publicField(this, "updateColorPickerPanelSliderHueProgressDot", () => {
      var _a;
      (_a = this.colorPickerPanelSliderHue) == null ? void 0 : _a.style.setProperty("--ran-progress-dot", this.generateHue2rgb());
    });
    __publicField(this, "updateColorPickerColorBlockInnerBackground", () => {
      var _a;
      (_a = this.colorPickerColorBlockInner) == null ? void 0 : _a.style.setProperty("background", this.generateHsv2RgbaValue());
    });
    __publicField(this, "updateColorPickerPanelSaturationBackground", () => {
      var _a;
      (_a = this.colorPickerPanelSaturation) == null ? void 0 : _a.style.setProperty("background-color", this.generateHue2rgb());
    });
    __publicField(this, "clickStop", (e) => {
      e.stopPropagation();
      e.preventDefault();
    });
    __publicField(this, "changeColorPalettePositionByContext", () => {
      window.requestAnimationFrame(() => {
        var _a, _b, _c, _d, _e;
        this.updateColorValue(this.value);
        if (!this.colorPickerPanelPalette)
          return;
        if (!((_a = this.context) == null ? void 0 : _a.lightness.getter) || !((_b = this.context) == null ? void 0 : _b.saturation.getter))
          return;
        const { width, height } = ((_c = this.colorPickerPanelPalette) == null ? void 0 : _c.getBoundingClientRect()) || {};
        const limitY = height - this.context.lightness.getter() / 100 * height;
        const limitX = this.context.saturation.getter() / 100 * width;
        (_d = this.colorPickerPanelDot) == null ? void 0 : _d.style.setProperty("top", `${limitY - BOT_WIDTH}px`);
        (_e = this.colorPickerPanelDot) == null ? void 0 : _e.style.setProperty("left", `${limitX - BOT_WIDTH}px`);
      });
    });
    __publicField(this, "changeColorPalettePosition", (offsetX, offsetY) => {
      var _a, _b, _c;
      if (!this.colorPickerPanelPalette)
        return;
      if (!((_a = this.context) == null ? void 0 : _a.lightness.getter) || !((_b = this.context) == null ? void 0 : _b.saturation.getter))
        return;
      const { width, height } = ((_c = this.colorPickerPanelPalette) == null ? void 0 : _c.getBoundingClientRect()) || {};
      const limitY = height - range(offsetY, 0, height);
      const limitX = range(offsetX, 0, width);
      this.context.saturation.setter(limitX / width * 100);
      this.context.lightness.setter(limitY / height * 100);
      window.requestAnimationFrame(() => {
        var _a2, _b2;
        (_a2 = this.colorPickerPanelDot) == null ? void 0 : _a2.style.setProperty("top", `${offsetY - BOT_WIDTH}px`);
        (_b2 = this.colorPickerPanelDot) == null ? void 0 : _b2.style.setProperty("left", `${offsetX - BOT_WIDTH}px`);
      });
    });
    __publicField(this, "clickColorPalette", (e) => {
      const { offsetX, offsetY } = e;
      this.changeColorPalettePosition(offsetX, offsetY);
    });
    __publicField(this, "createColorPickerProgress", () => {
      this.colorPickerPanelSliderContainer = document.createElement("div");
      this.colorPickerPanelSliderContainer.setAttribute("class", "ran-color-picker-slider-container");
      this.colorPickerPanelSliderGroup = document.createElement("div");
      this.colorPickerPanelSliderGroup.setAttribute("class", "ran-color-picker-slider-container-group");
      this.colorPickerPanelSliderHue = document.createElement("r-progress");
      this.updateColorPickerPanelSliderHueProgressDot();
      this.colorPickerPanelSliderHue.style.setProperty(
        "--ran-progress-wrap",
        "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
      );
      this.colorPickerPanelSliderHue.setAttribute("percent", `${this.context.hue.getter() / 360}`);
      this.colorPickerPanelSliderHue.addEventListener("change", this.changeColorPickerHue);
      this.colorPickerPanelSliderHue.setAttribute("type", "drag");
      this.colorPickerPanelSliderHue.setAttribute("class", "ran-color-picker-slider-container-group-hue");
      this.colorPickerPanelSliderAlpha = document.createElement("r-progress");
      this.updateColorPickerPanelSliderAlphaProgressDot();
      this.colorPickerPanelSliderAlpha.setAttribute("percent", `${this.context.transparency.getter() / 100}`);
      this.updateColorPickerPanelSliderAlphaProgressWrap();
      this.colorPickerPanelSliderAlpha.addEventListener("change", this.changeColorPickerAlpha);
      this.colorPickerPanelSliderAlpha.setAttribute("type", "drag");
      this.colorPickerPanelSliderAlpha.setAttribute("class", "ran-color-picker-slider-container-group-alpha");
      this.colorPickerPanelSliderGroup.appendChild(this.colorPickerPanelSliderHue);
      this.colorPickerPanelSliderGroup.appendChild(this.colorPickerPanelSliderAlpha);
      this.colorPickerPanelSliderContainer.appendChild(this.colorPickerPanelSliderGroup);
      this.colorPickerColorBlock = document.createElement("div");
      this.colorPickerColorBlock.setAttribute("class", "ran-color-picker-slider-container-color-block");
      this.colorPickerColorBlockInner = document.createElement("div");
      this.colorPickerColorBlockInner.setAttribute("class", "ran-color-picker-slider-container-color-block-inner");
      this.updateColorPickerColorBlockInnerBackground();
      this.colorPickerColorBlock.appendChild(this.colorPickerColorBlockInner);
      this.colorPickerPanelSliderContainer.appendChild(this.colorPickerColorBlock);
    });
    __publicField(this, "changeColorPickerHue", (e) => {
      this.context.hue.setter(e.detail.value * HUE);
    });
    __publicField(this, "changeColorPickerAlpha", (e) => {
      this.context.transparency.setter(e.detail.value * 100);
    });
    __publicField(this, "createColorPickerSelect", () => {
      this.colorPickerPanel = document.createElement("div");
      this.colorPickerPanel.setAttribute("class", "ran-color-picker-panel");
      this.colorPickerInnerContentSelect = document.createElement("div");
      this.colorPickerInnerContentSelect.setAttribute("class", "ran-color-picker-select");
      this.colorPickerPanel.appendChild(this.colorPickerInnerContentSelect);
      this.colorPickerPanelPalette = document.createElement("div");
      this.colorPickerPanelPalette.setAttribute("class", "ran-color-picker-palette");
      this.colorPickerInnerContentSelect.appendChild(this.colorPickerPanelPalette);
      this.colorPickerPanelSaturation = document.createElement("div");
      this.colorPickerPanelSaturation.setAttribute("class", "ran-color-picker-saturation");
      this.updateColorPickerPanelSaturationBackground();
      this.colorPickerPanelDot = document.createElement("div");
      this.colorPickerPanelDotInner = document.createElement("div");
      this.colorPickerPanelDotInner.setAttribute("class", "ran-color-picker-palette-dot-inner");
      this.colorPickerPanelDot.setAttribute("class", "ran-color-picker-palette-dot");
      this.colorPickerPanelDot.addEventListener("mousedown", this.mouseDownColorPickerPalette);
      document.body.addEventListener("mousemove", this.mouseMoveColorPickerPalette);
      this.colorPickerPanelDot.addEventListener("mouseup", this.mouseUpColorPickerPalette);
      this.colorPickerPanelDot.appendChild(this.colorPickerPanelDotInner);
      this.colorPickerPanelPalette.appendChild(this.colorPickerPanelDot);
      this.colorPickerPanelPalette.appendChild(this.colorPickerPanelSaturation);
      this.colorPickerPanelPalette.addEventListener("mousedown", this.clickColorPalette);
    });
    __publicField(this, "createColorPickerInput", () => {
      this.colorPickerInputContainer = document.createElement("div");
      this.colorPickerInputContainer.setAttribute("class", "ran-color-picker-input-container");
      const colorPickerInputContainerId = `${performance.now()}`.replace(".", "");
      this.colorPickerInputContainerSelect = document.createElement("div");
      this.colorPickerInputContainerSelect.setAttribute("class", "ran-color-picker-input-container-select");
      this.colorPickerInputContainerSelect.setAttribute("id", colorPickerInputContainerId);
      this.colorPickerInputContainerSelectItem = document.createElement("ra-select");
      this.colorPickerInputContainerSelectItem.setAttribute("value", "HEX");
      this.colorPickerInputContainerSelectItem.setAttribute("class", "ran-color-picker-input-container-select-item");
      this.colorPickerInputContainerSelectItem.setAttribute("type", "text");
      this.colorPickerInputContainerSelectItem.setAttribute("getPopupContainerId", colorPickerInputContainerId);
      const colorSelectOption = ["HEX", "HSB", "RGB"];
      const Fragment = document.createDocumentFragment();
      colorSelectOption.forEach((item) => {
        const Option = document.createElement("r-option");
        Option.setAttribute("value", item);
        Option.innerText = item;
        Fragment.appendChild(Option);
      });
      this.colorPickerInputContainerSelectItem.appendChild(Fragment);
      this.colorPickerInputContainerSelect.appendChild(this.colorPickerInputContainerSelectItem);
      this.colorPickerInputContainer.appendChild(this.colorPickerInputContainerSelect);
      this.colorPickerInputContainerInputColor = document.createElement("ra-input");
      this.colorPickerInputContainerInputColor.setAttribute("class", "ran-color-picker-input-container-input-color");
      this.colorPickerInputContainerInputNumber = document.createElement("ra-input");
      this.colorPickerInputContainerInputNumber.setAttribute("class", "ran-color-picker-input-container-input-number");
      this.colorPickerInputContainer.appendChild(this.colorPickerInputContainerInputColor);
      this.colorPickerInputContainer.appendChild(this.colorPickerInputContainerInputNumber);
    });
    __publicField(this, "openColorPicker", () => {
      if (this.colorPickerInner)
        return;
      this.colorPickerInner = document.createElement("div");
      this.colorPickerInner.setAttribute("class", "ran-color-picker-inner");
      this.colorPickerInnerContent = document.createElement("div");
      this.colorPickerInnerContent.setAttribute("class", "ran-color-picker-inner-content");
      this.createColorPickerProgress();
      this.createColorPickerSelect();
      this.createColorPickerInput();
      this.colorPickerPanel && this.colorPickerInnerContent.appendChild(this.colorPickerPanel);
      this.colorPickerPanelSliderContainer && this.colorPickerInnerContent.appendChild(this.colorPickerPanelSliderContainer);
      this.colorPickerInputContainer && this.colorPickerInnerContent.appendChild(this.colorPickerInputContainer);
      this.colorPickerInner.appendChild(this.colorPickerInnerContent);
      this.popoverContent.appendChild(this.colorPickerInner);
      this.changeColorPalettePositionByContext();
    });
    __publicField(this, "mouseMoveColorPickerPalette", (e) => {
      var _a;
      if (!this.colorPickerPanelPalette || !this.colorPickerPaletteSelect)
        return;
      const { pageX, pageY } = e;
      const { top = 0, left = 0, width, height } = ((_a = this.colorPickerPanelPalette) == null ? void 0 : _a.getBoundingClientRect()) || {};
      const limitY = range(pageY - top - BOT_WIDTH, -BOT_WIDTH, height - BOT_WIDTH);
      const limitX = range(pageX - left - BOT_WIDTH, -BOT_WIDTH, width - BOT_WIDTH);
      this.context.saturation.setter(limitX / width * 100);
      this.context.lightness.setter(limitY / height * 100);
      window.requestAnimationFrame(() => {
        var _a2, _b;
        (_a2 = this.colorPickerPanelDot) == null ? void 0 : _a2.style.setProperty("top", `${limitY}px`);
        (_b = this.colorPickerPanelDot) == null ? void 0 : _b.style.setProperty("left", `${limitX}px`);
      });
    });
    __publicField(this, "mouseDownColorPickerPalette", (e) => {
      e.stopPropagation();
      e.preventDefault();
      this.colorPickerPaletteSelect = true;
    });
    __publicField(this, "mouseUpColorPickerPalette", (e) => {
      this.colorPickerPaletteSelect = false;
    });
    this.setAttribute("class", "ran-colorpicker");
    this.popoverBlock = document.createElement("r-popover");
    this.popoverBlock.setAttribute("class", "ran-popover");
    this.popoverContent = document.createElement("r-content");
    this.popoverContent.setAttribute("class", "ran-content");
    this.colorpicker = document.createElement("div");
    this.colorpicker.setAttribute("class", "ran-colorpicker-block");
    this.colorpickerInner = document.createElement("div");
    this.colorpickerInner.setAttribute("class", "ran-colorpicker-inner");
    this.popoverBlock.appendChild(this.colorpicker);
    this.popoverBlock.appendChild(this.popoverContent);
    this.colorpicker.appendChild(this.colorpickerInner);
    this.appendChild(this.popoverBlock);
    this.colorPickerPaletteSelect = false;
    this.createContext();
  }
  static get observedAttributes() {
    return ["disabled", "value"];
  }
  get value() {
    var _a;
    return ((_a = this.context) == null ? void 0 : _a.value.getter()) || "";
  }
  set value(value) {
    this.setAttribute("value", value);
    this.updateColorValue(value);
  }
  connectedCallback() {
    this.popoverBlock.addEventListener("click", this.openColorPicker);
  }
  disconnectCallback() {
    var _a, _b, _c;
    this.popoverBlock.removeEventListener("click", this.openColorPicker);
    (_a = this.colorPickerPanelDot) == null ? void 0 : _a.removeEventListener("mousedown", this.mouseDownColorPickerPalette);
    document.body.removeEventListener("mousemove", this.mouseMoveColorPickerPalette);
    (_b = this.colorPickerPanelDot) == null ? void 0 : _b.removeEventListener("mouseup", this.mouseUpColorPickerPalette);
    (_c = this.colorPickerPanelPalette) == null ? void 0 : _c.removeEventListener("mousedown", this.clickColorPalette);
  }
  attributeChangedCallback(n, o, v) {
    if (o !== v) {
      if (n === "value") {
        this.updateColorValue(v);
      }
    }
  }
}
function Custom() {
  if (typeof document !== "undefined" && !customElements.get("r-colorpicker")) {
    customElements.define("r-colorpicker", ColorPicker);
    return ColorPicker;
  } else {
    return createCustomError("document is undefined or r-colorpicker is exist");
  }
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  ColorPicker,
  default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
  ColorPicker as C,
  index as a,
  index$1 as i
};
