@randevcx/ranui/dist/index-DRi1ylHx.js

UI Component library based on `Web Component`

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 { p as perToNum } from "./utils-74Icp-PI.js";
import { H as HTMLElementSSR, c as createCustomError } from "./index-CSnBqUsQ.js";
const attributes = ["percent", "type", "total", "dot"];
class Progress extends HTMLElementSSR() {
  constructor() {
    super();
    __publicField(this, "_progress");
    __publicField(this, "_progressWrap");
    __publicField(this, "_progressWrapValue");
    __publicField(this, "_progressDot");
    __publicField(this, "moveProgress");
    __publicField(this, "progressClick", (e) => {
      const rect = this._progress.getBoundingClientRect();
      const offsetX = e.clientX - rect.left;
      const percentage = Math.min(1, Math.max(0, offsetX / this._progress.offsetWidth));
      this.percent = `${percentage * Number(this.total)}`;
      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
      this.change();
    });
    __publicField(this, "progressDotMouseDown", () => {
      this.moveProgress.mouseDown = true;
    });
    __publicField(this, "progressDotMouseMove", (e) => {
      if (!this.moveProgress.mouseDown)
        return;
      const rect = this._progress.getBoundingClientRect();
      const offsetX = e.clientX - rect.left;
      const percentage = Math.min(1, Math.max(0, offsetX / this._progress.offsetWidth));
      this.percent = `${percentage * Number(this.total)}`;
      this._progressWrapValue.style.setProperty("transform", `scaleX(${percentage})`);
      this._progressDot.style.setProperty("transform", `translateX(${percentage * this._progress.offsetWidth}px)`);
      this.change();
    });
    __publicField(this, "progressDotMouseUp", (e) => {
      if (!this.moveProgress.mouseDown)
        return;
      this.moveProgress.mouseDown = false;
    });
    __publicField(this, "change", () => {
      this.dispatchEvent(
        new CustomEvent("change", {
          detail: {
            value: this.percent,
            percent: this.percent,
            total: this.total
          }
        })
      );
    });
    __publicField(this, "appendProgressDot", () => {
      if (this.dot === "true" && !this._progress.contains(this._progressDot)) {
        this._progress.appendChild(this._progressDot);
      }
      if (this.dot === "false" && this._progress.contains(this._progressDot)) {
        this._progress.removeChild(this._progressDot);
      }
    });
    __publicField(this, "updateCurrentProgress", () => {
      const percent = Number(this.percent) / Number(this.total);
      this._progressWrapValue.style.setProperty("transform", `scaleX(${percent})`);
      this._progressDot.style.setProperty("transform", `translateX(${percent * this._progress.offsetWidth}px)`);
    });
    __publicField(this, "dragEvent", () => {
      if (this.type !== "drag")
        return;
      this._progress.addEventListener("click", this.progressClick);
      this._progressDot.addEventListener("mousedown", this.progressDotMouseDown);
      document.addEventListener("mousemove", this.progressDotMouseMove);
      document.addEventListener("mouseup", this.progressDotMouseUp);
    });
    __publicField(this, "createProgress", () => {
      if (!(this.children.length > 0 && [...this.children].some((item) => item.className === "ran-progress"))) {
        this._progress.appendChild(this._progressDot);
        this.appendChild(this._progress);
      }
    });
    __publicField(this, "resize", () => {
      this.updateCurrentProgress();
    });
    this._progress = document.createElement("div");
    this._progress.setAttribute("class", "ran-progress");
    this._progress.setAttribute("role", "progressbar");
    this._progressWrap = document.createElement("div");
    this._progressWrap.setAttribute("class", "ran-progress-wrap");
    this._progress.appendChild(this._progressWrap);
    this._progressWrapValue = document.createElement("div");
    this._progressWrapValue.setAttribute("class", "ran-progress-wrap-value");
    this._progressWrap.appendChild(this._progressWrapValue);
    this._progressDot = document.createElement("div");
    this._progressDot.setAttribute("class", "ran-progress-dot");
    this.moveProgress = {
      mouseDown: false
    };
  }
  static get observedAttributes() {
    return attributes;
  }
  get percent() {
    const percent = this.getAttribute("percent") || "";
    const num = perToNum(percent);
    if (Number(num) > Number(this.total)) {
      console.error("percent must be < total");
      return this.total;
    }
    return `${perToNum(percent)}`;
  }
  set percent(value) {
    this.setAttribute("percent", `${value || 0}`);
    this.setAttribute("aria-valuenow", `${value || 0}`);
  }
  get total() {
    const total = this.getAttribute("total");
    if (!total)
      return "1";
    return `${perToNum(total)}`;
  }
  set total(value) {
    this.setAttribute("total", value || "");
  }
  get type() {
    const result = ["primary", "drag"];
    const type = this.getAttribute("type") || "";
    if (result.includes(type)) {
      return type;
    } else {
      return "primary";
    }
  }
  set type(value) {
    this.setAttribute("type", value || "primary");
  }
  get animation() {
    const result = ["play", "pause"];
    const animation = this.getAttribute("animation") || "";
    if (result.includes(animation)) {
      return animation;
    } else {
      return "pause";
    }
  }
  set animation(value) {
    this.setAttribute("animation", value || "pause");
  }
  get dot() {
    const result = ["true", "false"];
    const dot = this.getAttribute("dot") || "";
    if (result.includes(dot)) {
      return dot;
    } else {
      return "true";
    }
  }
  set dot(value) {
    this.setAttribute("dot", value || "true");
  }
  connectedCallback() {
    const type = this.getAttribute("type");
    if (!type) {
      this.setAttribute("type", "primary");
    }
    this.dragEvent();
    this.updateCurrentProgress();
    window.addEventListener("resize", this.resize);
  }
  disconnectCallback() {
    this._progress.removeEventListener("click", this.progressClick);
    this._progressDot.removeEventListener("mousedown", this.progressDotMouseDown);
    document.removeEventListener("mousemove", this.progressDotMouseMove);
    document.removeEventListener("mouseup", this.progressDotMouseUp);
    window.removeEventListener("resize", this.resize);
  }
  attributeChangedCallback(k, o, n) {
    if (o !== n) {
      if (k === "type") {
        this.createProgress();
      }
      if (k === "dot") {
        this.appendProgressDot();
      }
      if (k === "percent") {
        this.updateCurrentProgress();
      }
    }
  }
}
function Custom() {
  if (typeof document !== "undefined" && !customElements.get("r-progress")) {
    Progress && customElements.define("r-progress", Progress);
    return Progress;
  } else {
    return createCustomError("document is undefined or r-progress is exist");
  }
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  Progress,
  default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
  Progress as P,
  index as a,
  index$1 as i
};