wj-elements 0.1.46 → 0.1.48

package/dist/wje-progress-bar.js

@@ -1,161 +0,0 @@
-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
-};