wj-elements 0.1.48 → 0.1.49

package/dist/wje-progress-bar.js

@@ -0,0 +1,161 @@
+var A = Object.defineProperty;
+var j = (c, o, e) => o in c ? A(c, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[o] = e;
+var g = (c, o, e) => (j(c, typeof o != "symbol" ? o + "" : o, e), e);
+import k from "./wje-element.js";
+const v = ':host([color="primary"]){--wje-progress-bar-background-color: var(--wje-color-primary-2);--wje-progress-bar-color: var(--wje-color-primary-9)}:host([color="complete"]){--wje-progress-bar-background-color: var(--wje-color-complete-2);--wje-progress-bar-color: var(--wje-color-complete-9)}:host([color="success"]){--wje-progress-bar-background-color: var(--wje-color-success-2);--wje-progress-bar-color: var(--wje-color-success-9)}:host([color="warning"]){--wje-progress-bar-background-color: var(--wje-color-warning-2);--wje-progress-bar-color: var(--wje-color-warning-9)}:host([color="danger"]){--wje-progress-bar-background-color: var(--wje-color-danger-2);--wje-progress-bar-color: var(--wje-color-danger-9)}:host([color="info"]){--wje-progress-bar-background-color: var(--wje-color-info-2);--wje-progress-bar-color: var(--wje-color-info-9)}:host{--wje-progress-bar-background-color: var(--wje-color-contrast-2);--wje-progress-bar-color: var(--wje-color-contrast-6);--wje-progress-bar-text-size: .75rem;--wje-progress-bar-text-color: var(--wje-color);fill:var(--wje-progress-bar-background-color)}:host .progress{position:relative;display:flex;align-items:center}:host .slot-wrapper{display:flex;position:absolute;top:0;align-items:center;width:100%;height:100%;justify-content:center}:host #bar{fill:var(--wje-progress-bar-color)}:host text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;dominant-baseline:middle;font-size:var(--wje-progress-bar-text-size);fill:var(--wje-progress-bar-text-color);stroke:var(--wje-progress-bar-text-color)}:host(.wje-color) #bar{fill:var(--wje-progress-bar-color)}::slotted([slot="start"]){margin-inline:0 1rem}::slotted([slot="end"]){margin-inline:1rem 0}';
+class w extends k {
+  /**
+   * Creates an instance of ProgressBar.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    g(this, "className", "ProgressBar");
+  }
+  /**
+   * Sets the radius of the progress bar.
+   *
+   * @param {number} value - The value to set.
+   */
+  set radius(e) {
+    this.setAttribute("radius", e);
+  }
+  /**
+   * Gets the radius of the progress bar.
+   *
+   * @returns {number} The value of the radius.
+   */
+  get radius() {
+    return +this.getAttribute("radius") || 70;
+  }
+  /**
+   * Gets the diameter of the progress bar.
+   *
+   * @returns {number} The value of the diameter.
+   */
+  get diameter() {
+    return this.radius * 2;
+  }
+  /**
+   * Gets the diameter of the progress bar.
+   *
+   * @returns {number} The value of the diameter.
+   */
+  get containerSize() {
+    return this.diameter + 2 * this.stroke;
+  }
+  /**
+   * Sets the stroke of the progress bar.
+   *
+   * @param {number} value - The value to set.
+   */
+  set stroke(e) {
+    this.setAttribute("stroke", e);
+  }
+  /**
+   * Gets the stroke of the progress bar.
+   *
+   * @returns {number} The value of the stroke.
+   */
+  get stroke() {
+    return +this.getAttribute("stroke") || 6;
+  }
+  /**
+   * Gets the linecap of the progress bar.
+   *
+   * @returns {string} The value of the linecap.
+   */
+  get linecap() {
+    return this.getAttribute("linecap") || "square";
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return v;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["progress"];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(e, a, u) {
+    this.radius + this.stroke / 2;
+    let n = document.createDocumentFragment();
+    u.color && this.classList.add("wje-color");
+    let i = document.createElement("div");
+    i.classList.add("progress");
+    let m = document.createElement("slot"), h = document.createElement("div");
+    h.classList.add("slot-wrapper");
+    let b = document.createElement("slot");
+    b.setAttribute("name", "start");
+    let p = document.createElement("slot");
+    p.setAttribute("name", "end");
+    const l = "http://www.w3.org/2000/svg";
+    let s = document.createElementNS(l, "svg"), r, t;
+    if ((this == null ? void 0 : this.type) === "circle") {
+      s.setAttribute("width", this.containerSize), s.setAttribute("height", this.containerSize), s.setAttribute("viewBox", `0 0 ${this.containerSize} ${this.containerSize}`), s.setAttribute("style", "transform: rotate(-90deg)"), r = document.createElementNS(l, "circle"), r.setAttribute("stroke", "var(--wje-progress-bar-background-color)"), r.setAttribute("stroke-width", this.stroke), r.setAttribute("fill", "transparent"), r.setAttribute("r", this.radius), r.setAttribute("cx", this.containerSize / 2), r.setAttribute("cy", this.containerSize / 2), t = document.createElementNS(l, "circle"), t.setAttribute("stroke", "var(--wje-progress-bar-color)"), t.setAttribute("stroke-width", this.stroke), t.setAttribute("fill", "transparent"), t.setAttribute("r", this.radius), t.setAttribute("cx", this.containerSize / 2), t.setAttribute("cy", this.containerSize / 2), t.setAttribute("stroke-linecap", this.linecap);
+      let d = document.createElementNS(l, "text");
+      d.setAttribute("x", "50%"), d.setAttribute("y", "50%"), d.innerHTML = this.progress + "%", s.appendChild(d);
+    } else
+      s.setAttribute("width", "100%"), s.setAttribute("height", this.stroke), s.setAttribute("preserveAspectRatio", "none"), r = document.createElementNS(l, "rect"), r.setAttribute("x", 0), r.setAttribute("y", 0), r.setAttribute("width", "100%"), r.setAttribute("height", this.stroke), this.linecap === "round" && (r.setAttribute("rx", this.stroke / 2), r.setAttribute("ry", this.stroke / 2)), t = document.createElementNS(l, "rect"), t.setAttribute("x", 0), t.setAttribute("y", 0), t.setAttribute("width", this.progress + "%"), t.setAttribute("height", this.stroke), t.setAttribute("id", "bar"), this.linecap === "round" && (t.setAttribute("rx", this.stroke / 2), t.setAttribute("ry", this.stroke / 2));
+    return s.appendChild(r), s.appendChild(t), h.appendChild(m), i.appendChild(b), i.appendChild(h), i.appendChild(s), i.appendChild(p), n.appendChild(i), this.background = r, this.bar = t, n;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   */
+  afterDraw(e, a, u) {
+    this.type === "circle" && this.setCircleProgress(this.progress);
+  }
+  /**
+   * Returns the dasharray for a circle with the given radius.
+   *
+   * @param {number} radius - The radius of the circle.
+   * @returns {number} The dasharray value.
+   */
+  getCircleDasharray(e = 70) {
+    return 2 * Math.PI * e;
+  }
+  /**
+   * Returns the dashoffset for a circle with the given progress and radius.
+   *
+   * @param {number} progress - The progress of the circle.
+   * @param {number} radius - The radius of the circle.
+   * @returns {number} The dashoffset value.
+   */
+  getCircleDashoffset(e = 0, a) {
+    return this.getCircleDasharray(a) * ((100 - e) / 100);
+  }
+  setCircleProgress(e) {
+    const a = this.bar, u = a.r.baseVal.value, n = 2 * Math.PI * u;
+    a.style.strokeDasharray = `${n}`;
+    const i = n - e / 100 * n;
+    a.style.strokeDashoffset = i;
+  }
+}
+w.define("wje-progress-bar", w);
+export {
+  w as default
+};