ranui/dist/progress-BAukimjZ.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { T as n, i as o } from "./factory-WDxu11V0.js";
import { t as g } from "./events-Cqz3ramM.js";
import { a as p, i as l, n as d, o as u, t as c } from "./utils-U-9uH7EX.js";
import { a as f, n as v } from "./ssr-BzykYefm.js";
import { i as b } from "./a11y-ZSlIUH9B.js";
import { range as h } from "ranuts/utils";
var m = ":host{display:block;width:var(--ran-progress-width, 100%);height:var(--ran-progress-height, var(--ran-size-3, 20px))}:host:active,:host:focus{outline:0;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:var(--ran-progress-focus-outline, 2px solid var(--ran-color-primary, #006bff));outline-offset:var(--ran-progress-focus-outline-offset, 2px);border-radius:var(--ran-radius-full, 9999px)}:host([hidden]){display:none}.ran-progress{position:var(--ran-progress-position, relative);cursor:var(--ran-progress-cursor, pointer);width:var(--ran-progress-width, 100%);height:100%}.ran-progress:active,.ran-progress:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-progress-wrap{width:var(--ran-progress-track-width, 100%);height:var(--ran-progress-track-height, 8px);border-radius:var(--ran-progress-track-border-radius, var(--ran-radius-full, 9999px));background:var(--ran-progress-track-background, var(--ran-gray-200, #ebebeb));position:var(--ran-progress-track-position, absolute);top:var(--ran-progress-track-top, 50%);left:var(--ran-progress-track-left, 0);transform:var(--ran-progress-track-transform, translateY(-50%));overflow:var(--ran-progress-track-overflow, hidden)}.ran-progress-wrap-value{position:var(--ran-progress-fill-position, absolute);top:var(--ran-progress-fill-top, 0);left:var(--ran-progress-fill-left, 0);height:var(--ran-progress-fill-height, 100%);width:var(--ran-progress-fill-width, 100%);transform:scaleX(var(--progress-percent, 0));transform-origin:var(--ran-progress-fill-transform-origin, 0 0);will-change:var(--ran-progress-fill-will-change, transform);background:var(--ran-progress-fill-background, var(--ran-color-primary, #171717));border-radius:var(--ran-progress-fill-border-radius, var(--ran-radius-full, 9999px))}.ran-progress-dot{position:var(--ran-progress-dot-position, absolute);top:var(--ran-progress-dot-top, 50%);left:calc(var(--progress-percent, 0) * 100%);transform:var(--ran-progress-dot-transform, translate(-50%, -50%));border-radius:var(--ran-progress-dot-border-radius, 50%);box-sizing:border-box;width:var(--ran-progress-dot-width, 14px);height:var(--ran-progress-dot-height, 14px);background:var(--ran-progress-dot-background, var(--ran-color-primary, #171717));border:var(--ran-progress-dot-border, 2px solid var(--ran-color-bg-elevated, #fff));box-shadow:var(--ran-progress-dot-box-shadow, var(--ran-shadow-elevated, 0 1px 2px rgba(0, 0, 0, .15)));cursor:var(--ran-progress-dot-cursor, pointer);touch-action:none}", w = [
  "percent",
  "type",
  "total",
  "dot",
  "sheet"
], a = (r) => {
  const t = (r ?? "").trim();
  return t ? t.endsWith("%") ? Number(t.slice(0, -1)) : Number(t) : 0;
}, y = class extends v {
  _progress;
  _progressWrap;
  _progressWrapValue;
  _progressDot;
  _shadowDom;
  _events = new g();
  _dragEvents = new g();
  moveProgress = { mouseDown: !1 };
  _tabIndexOwnedByComponent = !1;
  static get observedAttributes() {
    return w;
  }
  constructor() {
    super(), this._shadowDom = c(this, m);
    const r = n(), t = n(), e = n(), s = o().class("ran-progress").children(o().class("ran-progress-wrap").ref(r).part("track").children(o().class("ran-progress-wrap-value").ref(t).part("fill")), o().class("ran-progress-dot").ref(e).part("dot")).build();
    this._shadowDom.appendChild(s), this._progress = s, this._progressWrap = p(r, "wrap"), this._progressWrapValue = p(t, "wrap value"), this._progressDot = p(e, "dot");
  }
  get percent() {
    const r = this.getAttribute("percent") || "0", t = a(r), e = Number(this.total);
    return t > e ? String(e) : String(t);
  }
  set percent(r) {
    this.setAttribute("percent", r || "0"), this.setAttribute("aria-valuenow", r || "0");
  }
  get total() {
    const r = this.getAttribute("total");
    return r ? `${a(r)}` : "100";
  }
  set total(r) {
    this.setAttribute("total", r || "100");
  }
  get type() {
    const r = this.getAttribute("type") || "primary";
    return ["primary", "drag"].includes(r) ? r : "primary";
  }
  set type(r) {
    this.setAttribute("type", r || "primary");
  }
  get dot() {
    const r = this.getAttribute("dot") || "true";
    return ["true", "false"].includes(r) ? r : "true";
  }
  set dot(r) {
    this.setAttribute("dot", r || "true");
  }
  get sheet() {
    return d(this, "sheet");
  }
  set sheet(r) {
    l(this, "sheet", r);
  }
  handlerExternalCss = () => {
    u(this, this._shadowDom, "sheet", null, this.sheet);
  };
  progressClick = (r) => {
    if (this.type !== "drag") return;
    const t = this._progress.getBoundingClientRect(), e = r.clientX - t.left, s = h(e / this._progress.offsetWidth, 0, 1), i = s * Number(this.total);
    this.percent = String(i), this.updateUI(s), this.change();
  };
  progressDotMouseDown = (r) => {
    r.preventDefault(), this.moveProgress.mouseDown = !0, r.stopPropagation(), this._dragEvents.on(document, "pointermove", this.progressDotMouseMove).on(document, "pointerup", this.progressDotMouseUp).on(document, "pointercancel", this.progressDotMouseUp);
  };
  progressDotMouseMove = (r) => {
    if (!this.moveProgress.mouseDown || this.type !== "drag") return;
    const t = this._progress.getBoundingClientRect(), e = r.clientX - t.left, s = h(e / this._progress.offsetWidth, 0, 1), i = s * Number(this.total);
    this.percent = String(i), this.updateUI(s), this.change();
  };
  progressDotMouseUp = () => {
    this.moveProgress.mouseDown = !1, this._dragEvents.abort();
  };
  progressKeydown = (r) => {
    if (this.type !== "drag") return;
    const t = Number(this.total), e = b(r, {
      current: Number(this.percent),
      min: 0,
      max: t,
      step: t / 100
    });
    e !== void 0 && (r.preventDefault(), this.percent = String(e), this.updateUI(e / t), this.change());
  };
  syncA11y = () => {
    const r = this.type === "drag";
    this.setAttribute("role", r ? "slider" : "progressbar"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", this.total), this.setAttribute("aria-valuenow", this.percent), r ? this.hasAttribute("tabindex") || (this.tabIndex = 0, this._tabIndexOwnedByComponent = !0) : this._tabIndexOwnedByComponent && (this.removeAttribute("tabindex"), this._tabIndexOwnedByComponent = !1);
  };
  updateUI = (r) => {
    this.style.setProperty("--progress-percent", String(r));
  };
  _preSerialize() {
    const r = a(this.getAttribute("percent") || "0"), t = a(this.getAttribute("total") || "100"), e = h(r / t, 0, 1);
    this.style.setProperty("--progress-percent", String(e));
  }
  change = () => {
    this.dispatchEvent(new CustomEvent("change", { detail: {
      value: this.percent,
      percent: this.percent,
      total: this.total
    } }));
  };
  appendProgressDot = () => {
    if (!this._progress || !this._progressDot) return;
    const r = this.dot === "true" && this.type === "drag";
    r && !this._progress.contains(this._progressDot) && this._progress.appendChild(this._progressDot), !r && this._progress.contains(this._progressDot) && this._progress.removeChild(this._progressDot);
  };
  updateCurrentProgress = () => {
    if (!this._progress) return;
    const r = Number(this.total), t = Number(this.percent) / r;
    this.updateUI(t);
  };
  dragEvent = () => {
    this._events.on(this._progress, "click", this.progressClick).on(this._progressDot, "pointerdown", this.progressDotMouseDown).on(this, "keydown", this.progressKeydown);
  };
  resize = () => {
    this.updateCurrentProgress();
  };
  connectedCallback() {
    this.handlerExternalCss(), this.hasAttribute("type") || this.setAttribute("type", "primary"), this.dragEvent(), this.updateCurrentProgress(), this.appendProgressDot(), this.syncA11y(), this._events.on(window, "resize", this.resize);
  }
  disconnectedCallback() {
    this._events.abort(), this._dragEvents.abort();
  }
  attributeChangedCallback(r, t, e) {
    t !== e && ((r === "dot" || r === "type") && this.appendProgressDot(), (r === "percent" || r === "total") && this.updateCurrentProgress(), (r === "type" || r === "total" || r === "percent") && this.syncA11y(), r === "sheet" && this.handlerExternalCss());
  }
};
f("r-progress", y);
export {
  y as t
};