ranui 0.1.9 → 0.1.10-alpha.1

package/dist/index-EnzWG8R0.js

@@ -0,0 +1,521 @@
+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-BMBEcoPj.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-Bv6Z6rIe.js";
+import "./option.js";
+import "./index-CJZp9lE4.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-fA-F]{6}|[\da-fA-F]{3})$/;
+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
+};