ranui 0.1.10-alpha.7 → 0.2.0-alpha.0

package/dist/index-oD-_YELB.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-Beig7FXI.js";
-import { H as HTMLElementSSR, a as createSignal, c as createCustomError } from "./index-DC5EA657.js";
-import "./index-TlwIh-o2.js";
-import "./index-WfFw4LJT.js";
-import "./selectShadowless.js";
-import "./index-lLO-8KJ1.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
-};

package/dist/index-qvcQTV5_.js

@@ -1,105 +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, a as addClassToElement, r as removeClassToElement } from "./arrow-down-Beig7FXI.js";
-import { c as createCustomError, H as HTMLElementSSR } 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}@keyframes ranui-dropdown-down-in{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}to{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes ranui-dropdown-down-out{0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}}@keyframes ranui-dropdown-up-in{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-up-out{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}.ran-dropdown-down-in{animation:ranui-dropdown-up-in .2s;animation-fill-mode:forwards}.ran-dropdown-down-out{animation:ranui-dropdown-up-out .2s;animation-fill-mode:forwards}.ran-dropdown-up-in{animation:ranui-dropdown-down-in .2s;animation-fill-mode:forwards}.ran-dropdown-up-out{animation:ranui-dropdown-down-out .2s;animation-fill-mode:forwards}:host{text-align:var(--ran-dropdown-host-text-align, left);z-index:10}.ranui-dropdown{transform-origin:var(--ran-x, 50%) var(--ran-y, 50%);box-sizing:var(--ran-dropdown-box-sizing, border-box);margin:var(--ran-dropdown-margin, 0);padding:var(--ran-dropdown-padding, 4px);color:var(--ran-dropdown-color, rgba(0, 0, 0, .88));font-size:var(--ran-dropdown-font-size, 14px);list-style:var(--ran-dropdown-list-style, none);font-family:var(--ran-dropdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");z-index:var(--ran-dropdown-z-index, 1050);overflow:var(--ran-dropdown-overflow, hidden);font-variant:var(--ran-dropdown-font-variant, initial);background:var(--ran-dropdown-background, #ffffff);border-radius:var(--ran-dropdown-border-radius, 8px);outline:var(--ran-dropdown-outline, none);box-shadow:var(--ran-dropdown-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05));cursor:var(--ran-dropdown-cursor, pointer);width:var(--ran-dropdown-width, 100%)}.ranui-dropdown-container{position:var(--ran-dropdown-container-position, relative);display:var(--ran-dropdown-container-display, inline-block);width:var(--ran-dropdown-container-width, 100%);min-width:var(--ran-popover-width)}.ranui-dropdown-container .top{transform:translate(calc(var(--ran-popover-width) / 2 - 8px)) translateY(-16px) rotate(0);top:0}.ranui-dropdown-container .bottom{transform:translate(calc(var(--ran-popover-width) / 2 - 8px)) translateY(0) rotate(180deg);top:calc(var(--ran-popover-height) - 4px,0px)}.ranui-dropdown-arrow{position:var(--ran-dropdown-arrow-position, absolute);z-index:var(--ran-dropdown-arrow-z-index, 1);display:var(--ran-dropdown-arrow-display, block);pointer-events:var(--ran-dropdown-arrow-pointer-events, none);width:var(--ran-dropdown-arrow-width, 16px);height:var(--ran-dropdown-arrow-height, 16px);overflow:var(--ran-dropdown-arrow-overflow, hidden)}.ranui-dropdown-arrow:before{background:var(--ran-dropdown-arrow-before-background, #fff);position:var(--ran-dropdown-arrow-before-position, absolute);bottom:var(--ran-dropdown-arrow-before-bottom, 0);inset-inline-start:0;width:var(--ran-dropdown-arrow-before-width, 16px);height:var(--ran-dropdown-arrow-before-height, 8px );clip-path:path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z");content:var(--ran-dropdown-arrow-before-content, "")}.ranui-dropdown-arrow:after{content:var(--ran-dropdown-arrow-after-content, "");position:var(--ran-dropdown-arrow-after-position, absolute);width:var(--ran-dropdown-arrow-after-width, 9px);height:var(--ran-dropdown-arrow-after-height, 9px);bottom:var(--ran-dropdown-arrow-after-bottom, 0);inset-inline:0;margin:var(--ran-dropdown-arrow-after-margin, auto);border-radius:var(--ran-dropdown-arrow-after-border-radius, 0 0 2px 0);transform:var(--ran-dropdown-arrow-after-transform, translateY(50%) rotate(-135deg));box-shadow:var(--ran-dropdown-arrow-after-box-shadow, 2px 2px 5px rgba(0, 0, 0, .05));z-index:var(--ran-dropdown-arrow-after-z-index, 0);background:var(--ran-dropdown-arrow-after-background, transparent)}';
-const animationTime = 300;
-class Dropdown extends HTMLElementSSR() {
-  constructor() {
-    super();
-    __publicField(this, "dropdown");
-    __publicField(this, "_slot");
-    __publicField(this, "_shadowDom");
-    __publicField(this, "arrowIcon");
-    __publicField(this, "container");
-    __publicField(this, "handlerTransit", () => {
-      if (this.transit) {
-        addClassToElement(this.dropdown.element, this.transit);
-        setTimeout(() => {
-          removeClassToElement(this.dropdown.element, this.transit);
-        }, animationTime);
-      }
-    });
-    __publicField(this, "handlerArrow", () => {
-      if (!this.arrow) return;
-      if (!this.arrowIcon) {
-        this.arrowIcon = create("div").setAttribute("class", `ranui-dropdown-arrow ${this.arrow}`);
-        this.container.addChild([this.arrowIcon]);
-      }
-    });
-    __publicField(this, "stopPropagation", (e) => {
-      e.stopPropagation();
-    });
-    this._slot = create("slot").setAttribute("class", "slot");
-    this.dropdown = create("div").setStyle("-webkit-tap-highlight-color", "transparent").setStyle("outline", "0").setAttribute("class", "ranui-dropdown").setAttribute("part", "ranui-dropdown").addChild([this._slot]);
-    this.container = create("div").setAttribute("class", "ranui-dropdown-container").addChild([this.dropdown]);
-    const shadowRoot = this.attachShadow({ mode: "closed" });
-    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
-    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
-    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
-    this._shadowDom = shadowRoot;
-    shadowRoot.appendChild(this.container.element);
-  }
-  static get observedAttributes() {
-    return ["transit", "arrow"];
-  }
-  get transit() {
-    return this.getAttribute("transit") || "";
-  }
-  set transit(value) {
-    if (value) {
-      this.setAttribute("transit", value);
-    } else {
-      this.removeAttribute("transit");
-    }
-  }
-  get arrow() {
-    return this.getAttribute("arrow") || "";
-  }
-  set arrow(value) {
-    if (value) {
-      this.setAttribute("arrow", value);
-    } else {
-      this.removeAttribute("arrow");
-    }
-  }
-  get show() {
-    return this.getAttribute("show") || "";
-  }
-  set show(value) {
-    if (value) {
-      this.setAttribute("show", value);
-    } else {
-      this.removeAttribute("show");
-    }
-  }
-  connectedCallback() {
-    this.handlerTransit();
-    this.handlerArrow();
-    this.addEventListener("click", this.stopPropagation);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("click", this.stopPropagation);
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "transit" && newValue) {
-      addClassToElement(this.dropdown.element, this.transit);
-      setTimeout(() => {
-        removeClassToElement(this.dropdown.element, this.transit);
-      }, animationTime);
-    }
-    if (name === "arrow") {
-      this.handlerArrow();
-    }
-  }
-}
-function Custom() {
-  if (typeof document !== "undefined" && !customElements.get("r-dropdown")) {
-    customElements.define("r-dropdown", Dropdown);
-    return Dropdown;
-  } else {
-    return createCustomError("document is undefined or r-dropdown is exist");
-  }
-}
-Custom();

package/dist/info-circle-COnL5bTJ.js

@@ -1,4 +0,0 @@
-const infoCircle = { "success": true, "_identification": true, "data": '<svg t="1665313505832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7765" width="200" height="200">\n    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="7766"></path>\n    <path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="7767"></path>\n    <path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="7768"></path>\n</svg>' };
-export {
-  infoCircle as default
-};

package/dist/info-circle-fill-CFeVMdci.js

@@ -1,4 +0,0 @@
-const infoCircleFill = { "success": true, "_identification": true, "data": '<svg t="1667965239916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8850" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272z m-32-344c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" p-id="8851"></path></svg>' };
-export {
-  infoCircleFill as default
-};

package/dist/inputShadowless.js

@@ -1,6 +0,0 @@
-import "./index-DC5EA657.js";
-import { I, a } from "./index-WfFw4LJT.js";
-export {
-  I as Input,
-  a as default
-};