ranui 0.1.10-alpha.9 → 0.2.0-alpha.1

package/dist/index-CGYfjKUV.js

@@ -1,72 +0,0 @@
-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);
-import { c as create } from "./arrow-down-B_hCY3Wt.js";
-import { H as HTMLElementSSR, c as createCustomError } from "./index-DC5EA657.js";
-const f7170ee498e0dd32cbdcb63fba8f75cc = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{position:var(--ran-math-position, relative)}.ran-math{display:var(--ran-math-display, flex);justify-content:var(--ran-math-justify-content, space-around);align-items:var(--ran-math-align-items, center)}.katex-html{display:var(--ran-math-katex-display, none)}";
-class Math2 extends HTMLElementSSR() {
-  constructor() {
-    super();
-    __publicField(this, "contain");
-    this.contain = create("div").setAttribute("class", "ran-math").element;
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    shadowRoot.appendChild(this.contain);
-  }
-  static get observedAttributes() {
-    return ["latex"];
-  }
-  get latex() {
-    const latex = this.getAttribute("latex") || "";
-    return decodeURIComponent(latex);
-  }
-  set latex(value) {
-    this.setAttribute("latex", value || "");
-  }
-  render() {
-    if (!this.latex) return;
-    import("./katex-es-B5r5vt3m.js").then((katex) => {
-      this.contain.innerHTML = "";
-      const span = create("span").setTextContent(`$$${this.latex}$$`).element;
-      this.contain.appendChild(span);
-      if (!katex) return;
-      katex.renderMathInElement(this.contain);
-    }).catch(function(err) {
-      console.warn(`ranui math component warning: ${err.message}
-${err}`);
-    });
-  }
-  connectedCallback() {
-    this.render();
-  }
-  disconnectCallback() {
-  }
-  attributeChangedCallback(k, o, n) {
-    if (o !== n) {
-      if (k === "latex") {
-        this.render();
-      }
-    }
-  }
-}
-async function Custom() {
-  if (typeof document !== "undefined" && !customElements.get("r-math")) {
-    customElements.define("r-math", Math2);
-    return Math2;
-  } else {
-    return createCustomError("document is undefined or r-math is exist");
-  }
-}
-const index = Custom();
-const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  Math: Math2,
-  default: index
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  Math2 as M,
-  index as a,
-  index$1 as i
-};

package/dist/index-CQTJoWhb.js

@@ -1,19 +0,0 @@
-function Custom() {
-  if (typeof window !== "undefined" && !customElements.get("r-modal")) {
-    class CustomModal extends HTMLElement {
-      constructor() {
-        super();
-      }
-    }
-    customElements.define("r-modal", CustomModal);
-  }
-}
-const index = Custom();
-const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: index
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  index as a,
-  index$1 as i
-};

package/dist/index-CiWwvEMM.js

@@ -1,511 +0,0 @@
-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);
-import { e as range } from "./arrow-down-B_hCY3Wt.js";
-import { H as HTMLElementSSR, a as createSignal, c as createCustomError } from "./index-DC5EA657.js";
-import "./index-D4y9c1Dj.js";
-import "./index-WfFw4LJT.js";
-import "./selectShadowless.js";
-import "./index-15M0olqa.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-background",
-        this.generateColorPickerProgress()
-      );
-    });
-    __publicField(this, "updateColorPickerPanelSliderAlphaProgressDot", () => {
-      var _a;
-      (_a = this.colorPickerPanelSliderAlpha) == null ? void 0 : _a.style.setProperty("--ran-progress-dot-background", this.generateHsv2RgbaValue());
-    });
-    __publicField(this, "updateColorPickerPanelSliderHueProgressDot", () => {
-      var _a;
-      (_a = this.colorPickerPanelSliderHue) == null ? void 0 : _a.style.setProperty("--ran-progress-dot-background", 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-background",
-        "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
-};