wj-elements 0.1.6 → 0.1.7

package/dist/wje-menu.js

@@ -0,0 +1,74 @@
+var m = Object.defineProperty;
+var d = (n, t, e) => t in n ? m(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (d(n, typeof t != "symbol" ? t + "" : t, e), e);
+import l from "./wje-element.js";
+const u = ":host{display:none;background:var(--wje-menu-background);position:relative;border-width:var(--wje-menu-border-width);border-style:var(--wje-menu-border-style);border-color:var(--wje-menu-border-color);z-index:var(--wje-menu-z-index, 8);border-radius:var(--wje-menu-border-radius);padding-top:var(--wje-menu-padding-top);padding-bottom:var(--wje-menu-padding-bottom);padding-inline:var(--wje-menu-padding-inline);margin-top:var(--wje-menu-margin-top);margin-bottom:var(--wje-menu-margin-bottom);margin-inline:var(--wje-menu-margin-inline);overflow:auto;overscroll-behavior:none}:host .native-menu{display:flex;flex-direction:column;width:100%}:host .native-menu ::slotted(wje-button){margin:0}:host(.wje-menu-collapse){width:var(--wje-menu-collapse-width)}:host([variant=context]){display:block!important;margin-left:var(--wje-menu-submenu-offset)}:host([variant=megamenu]) .native-menu{flex-direction:row;align-items:end;flex-wrap:nowrap}:host([variant=megamenu]) .native-menu .check-icon{display:none}:host([active]){display:flex!important}";
+class i extends l {
+  /**
+   * Creates an instance of Menu.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    o(this, "className", "Menu");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return u;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["active", "collapse"];
+  }
+  /**
+   * 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, c, p) {
+    let r = document.createDocumentFragment();
+    this.classList.remove("wje-menu-collapse"), this.hasAttribute("collapse") && this.classList.add("wje-menu-collapse");
+    let a = document.createElement("div");
+    a.setAttribute("part", "native"), a.classList.add("native-menu");
+    let s = document.createElement("slot");
+    return a.appendChild(s), r.appendChild(a), r;
+  }
+  /**
+   * Refreshes the component after drawing.
+   */
+  afterDraw() {
+    Array.from(this.children).forEach((e) => {
+      e.tagName.includes("-") && e.refresh();
+    });
+  }
+  /**
+   * Cleans up the component before disconnecting.
+   */
+  beforeDisconnect() {
+    this.context.innerHTML = "";
+  }
+}
+i.define("wje-menu", i);
+export {
+  i as default
+};

package/dist/wje-option.js

@@ -0,0 +1,99 @@
+var p = Object.defineProperty;
+var m = (n, t, e) => t in n ? p(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => (m(n, typeof t != "symbol" ? t + "" : t, e), e);
+import u, { event as h } from "./wje-element.js";
+import g from "./wje-icon.js";
+const b = ':host{--wje-option-padding-top: .5rem;--wje-option-padding-bottom: .5rem;--wje-option-highlighted: var(--wje-color-contrast-3);display:block}:host wje-icon{visibility:hidden;margin-inline:.5rem}:host([selected]) wje-icon{visibility:visible}.native-option{display:flex;align-items:center;padding-top:var(--wje-option-padding-top);padding-bottom:var(--wje-option-padding-bottom)}.native-option:hover{background-color:var(--wje-option-highlighted)}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline:auto .5rem}';
+class d extends u {
+  /**
+   * Creates an instance of Option.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Dependencies of the Option component.
+     */
+    o(this, "depandencies", {
+      "wje-icon": g
+    });
+    o(this, "className", "Option");
+  }
+  /**
+   * Sets the selected attribute of the option.
+   *
+   * @param {boolean} value - The value to set.
+   */
+  set selected(e) {
+    return e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  /**
+   * Sets the value attribute of the option.
+   *
+   * @param {string} value - The value to set.
+   */
+  set value(e) {
+    this.setAttribute("value", e);
+  }
+  /**
+   * Sets the text content of the option.
+   *
+   * @param {string} value - The text to set.
+   */
+  set text(e) {
+    this.innerText = e;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return b;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * 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, v, w) {
+    let s = document.createDocumentFragment(), i = document.createElement("div");
+    i.classList.add("native-option"), i.setAttribute("part", "native");
+    let a = document.createElement("wje-icon");
+    a.setAttribute("name", "check");
+    let r = document.createElement("slot");
+    r.setAttribute("name", "start");
+    let c = document.createElement("slot"), l = document.createElement("slot");
+    return l.setAttribute("name", "end"), i.appendChild(a), i.appendChild(r), i.appendChild(c), i.appendChild(l), s.appendChild(i), s;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   */
+  afterDraw() {
+    h.addListener(this, "click", "wje:option-change");
+  }
+}
+d.define("wje-option", d);
+export {
+  d as default
+};

package/dist/wje-options.js

@@ -0,0 +1,63 @@
+var p = Object.defineProperty;
+var c = (o, e, t) => e in o ? p(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var a = (o, e, t) => (c(o, typeof e != "symbol" ? e + "" : e, t), t);
+import d, { event as u } from "./wje-element.js";
+import h from "./wje-option.js";
+class r extends d {
+  /**
+   * Creates an instance of Options.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    a(this, "depandencies", {
+      "wje-option": h
+    });
+    a(this, "className", "Options");
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Prepares the component before drawing.
+   * Fetches the pages and creates the options elements.
+   */
+  async beforeDraw() {
+    this.response = await this.getPages();
+    let t = document.createDocumentFragment();
+    this.response.forEach((s, i) => {
+      let n = document.createElement("wje-option");
+      n.setAttribute("value", s[this.itemValue] || s.value), n.innerText = s[this.itemText] || s.text, t.appendChild(n);
+    }), this.parentElement.appendChild(t), u.dispatchCustomEvent(this, "wje-options:load", {});
+  }
+  /**
+   * Fetches the pages from the provided URL.
+   *
+   * @param {number} page - The page number to fetch.
+   * @returns {Promise<Object>} The fetched data.
+   * @throws Will throw an error if the response is not ok.
+   */
+  async getPages(t) {
+    const s = await fetch(this.url);
+    if (!s.ok)
+      throw new Error(`An error occurred: ${s.status}`);
+    return await s.json();
+  }
+}
+r.define("wje-options", r);
+export {
+  r as default
+};

package/dist/wje-popup.js

@@ -0,0 +1,5 @@
+import { P as p } from "./popup.element-Dj9j__Dh.js";
+p.define("wje-popup", p);
+export {
+  p as default
+};

package/dist/wje-progress-bar.js

@@ -0,0 +1,145 @@
+var A = Object.defineProperty;
+var j = (i, o, e) => o in i ? A(i, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[o] = e;
+var g = (i, o, e) => (j(i, typeof o != "symbol" ? o + "" : o, e), e);
+import k from "./wje-element.js";
+const f = ':host(.wje-color-primary) #bar{--wje-progress-bar-color: var(--wje-color-primary)}:host(.wje-color-complete) #bar{--wje-progress-bar-color: var(--wje-color-complete)}:host(.wje-color-success) #bar{--wje-progress-bar-color: var(--wje-color-success)}:host(.wje-color-warning) #bar{--wje-progress-bar-color: var(--wje-color-warning)}:host(.wje-color-danger) #bar{--wje-progress-bar-color: var(--wje-color-danger)}:host(.wje-color-dark) #bar{--wje-progress-bar-color: var(--wje-color-contrast-0)}:host(.wje-color-light) #bar{--wje-progress-bar-color: var(--wje-color-contrast-11)}:host{--wje-progress-bar-color: var(--wje-color-contrast-6);--wje-progress-bar-text-size: .75rem;--wje-progress-bar-text-color: var(--wje-color);--wje-progress-bar-stroke: var(--wje-color-contrast-3);stroke:var(--wje-progress-bar-stroke)}: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{stroke: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{stroke: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 + 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 f;
+  }
+  /**
+   * 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, h, l) {
+    let c = this.radius + this.stroke / 2, u = document.createDocumentFragment();
+    l.color && this.classList.add("wje-color-" + l.color, "wje-color");
+    let a = document.createElement("div");
+    a.classList.add("progress");
+    let m = document.createElement("slot"), d = document.createElement("div");
+    d.classList.add("slot-wrapper");
+    let p = document.createElement("slot");
+    p.setAttribute("name", "start");
+    let b = document.createElement("slot");
+    b.setAttribute("name", "end");
+    let s = document.createElementNS("http://www.w3.org/2000/svg", "svg"), r, t;
+    if ((this == null ? void 0 : this.type) === "circle") {
+      s.setAttribute("width", this.diameter), s.setAttribute("height", this.diameter), s.setAttribute("viewBox", `0 0 ${this.diameter} ${this.diameter}`), s.setAttribute("style", "transform: rotate(-90deg)"), r = document.createElementNS("http://www.w3.org/2000/svg", "circle"), r.setAttribute("r", this.radius), r.setAttribute("cx", c), r.setAttribute("cy", c), r.setAttribute("fill", "transparent"), t = document.createElementNS("http://www.w3.org/2000/svg", "circle"), t.setAttribute("r", this.radius), t.setAttribute("cx", c), t.setAttribute("cy", c), t.setAttribute("fill", "transparent"), t.setAttribute("stroke-dasharray", "0"), t.setAttribute("stroke-dashoffset", "0");
+      let n = document.createElementNS("http://www.w3.org/2000/svg", "text");
+      n.setAttribute("x", "50%"), n.setAttribute("y", "50%"), n.innerHTML = this.progress + "%", s.appendChild(n);
+    } else
+      s.setAttribute("width", "100%"), s.setAttribute("height", this.stroke), s.setAttribute("preserveAspectRatio", "none"), r = document.createElementNS("http://www.w3.org/2000/svg", "line"), r.setAttribute("x1", 0), r.setAttribute("y1", this.stroke / 2), r.setAttribute("x2", "100%"), r.setAttribute("y2", this.stroke / 2), t = document.createElementNS("http://www.w3.org/2000/svg", "line"), t.setAttribute("x1", 0), t.setAttribute("y1", this.stroke / 2), t.setAttribute("x2", this.progress + "%"), t.setAttribute("y2", this.stroke / 2);
+    return r.setAttribute("stroke-linecap", this.linecap), r.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("stroke-linecap", this.linecap), t.setAttribute("stroke-width", this.stroke + "px"), t.setAttribute("id", "bar"), s.appendChild(r), s.appendChild(t), d.appendChild(m), a.appendChild(p), a.appendChild(d), a.appendChild(s), a.appendChild(b), u.appendChild(a), this.background = r, this.bar = t, u;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   */
+  afterDraw(e, h, l) {
+    this.type === "circle" && (this.background.setAttribute("stroke-dasharray", this.getCircleDashoffset(100) + "px"), this.background.setAttribute("stroke-dashoffset", "0px"), this.bar.setAttribute("stroke-dasharray", this.getCircleDasharray(this.radius) + "px"), this.bar.setAttribute("stroke-dashoffset", this.getCircleDashoffset(l.progress, this.radius) + "px"));
+  }
+  /**
+   * 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, h) {
+    return this.getCircleDasharray(h) * ((100 - e) / 100);
+  }
+}
+w.define("wje-progress-bar", w);
+export {
+  w as default
+};

package/dist/wje-radio-group.js

@@ -0,0 +1,101 @@
+var c = Object.defineProperty;
+var u = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var n = (i, t, e) => (u(i, typeof t != "symbol" ? t + "" : t, e), e);
+import h from "./wje-element.js";
+import r from "./wje-radio.js";
+const m = ".wje-inline{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}";
+class l extends h {
+  /**
+   * Creates an instance of RadioGroup.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    n(this, "className", "RadioGroup");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return m;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * 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, s, p) {
+    let o = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("native-radio-group", this.hasAttribute("inline") ? "wje-inline" : "ddd");
+    let d = document.createElement("slot");
+    return a.appendChild(d), o.appendChild(a), o;
+  }
+  /**
+   * Adds event listeners after the component is drawn.
+   * Handles the selection of radio buttons.
+   */
+  afterDraw() {
+    this.value && this.setRadioToChekced(this.getRadioByValue(this.value)), this.addEventListener("wje-radio:input", (e) => {
+      this.removeCheck(), this.setRadioToChekced(e.detail.context);
+    });
+  }
+  /**
+   * Returns the radio button with the given value.
+   *
+   * @param {string} value - The value of the radio button.
+   * @returns {Radio} The radio button.
+   */
+  getRadioByValue(e) {
+    return this.getAllElements().filter((s) => s instanceof r && s.value === e)[0];
+  }
+  /**
+   * Removes the check from all radio buttons.
+   */
+  removeCheck() {
+    this.getAllElements().forEach((e) => {
+      e instanceof r && (e.checked = !1);
+    });
+  }
+  /**
+   * Sets the given radio button to checked.
+   *
+   * @param {Radio} radio - The radio button to check.
+   */
+  setRadioToChekced(e) {
+    e instanceof r && (this.setAttribute("value", e.value), e.checked = !0);
+  }
+  /**
+   * Returns all the elements in the radio group.
+   *
+   * @returns {Array<Element>} The elements.
+   */
+  getAllElements() {
+    return Array.from(this.childNodes);
+  }
+}
+l.define("wje-radio-group", l);
+export {
+  l as default
+};

package/dist/wje-radio.js

@@ -0,0 +1,46 @@
+var l = Object.defineProperty;
+var s = (i, t, e) => t in i ? l(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var a = (i, t, e) => (s(i, typeof t != "symbol" ? t + "" : t, e), e);
+import p, { event as n } from "./wje-element.js";
+const h = ':host{--wje-radio-margin-top: 0;--wje-radio-margin-bottom: .5rem;--wje-radio-margin-inline: 0;display:block;margin-top:var(--wje-radio-margin-top);margin-bottom:var(--wje-radio-margin-bottom);margin-inline:var(--wje-radio-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-flex;cursor:pointer;position:relative;padding-left:1.5rem;min-width:16px;min-height:16px;margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:var(--wje-color-contrast-1);border:1px solid var(--wje-color-contrast-4)}.native-radio input[type=radio]+label:before{border-radius:var(--wje-border-radius-circle);transition:border .3s 0s cubic-bezier(.455,.03,.215,1.33)}.native-radio input[type=radio]:checked+label:before{border-color:var(--wje-color-contrast-6);border-width:5px}.native-radio input[type=radio]:focus+label{color:var(--wje-color)}.native-radio input[type=radio]:focus+label:before{outline:none!important;box-shadow:0 0 #78c8fe}.native-radio input[type=radio]{opacity:0;position:absolute;top:3px;width:16px;height:16px}.native-radio input[type=radio][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-9);opacity:.5}.native-radio input[type=radio][disabled]+label:before{cursor:not-allowed!important}.success input[type=radio]:checked+label:before{border-color:var(--wje-color-success)}.primary input[type=radio]:checked+label:before{border-color:var(--wje-color-primary)}.complete input[type=radio]:checked+label:before{border-color:var(--wje-color-complete)}.warning input[type=radio]:checked+label:before{border-color:var(--wje-color-warning)}.danger input[type=radio]:checked+label:before{border-color:var(--wje-color-danger)}.neutral input[type=radio]:checked+label:before{border-color:var(--wje-color-info)}';
+class c extends p {
+  constructor() {
+    super();
+    a(this, "className", "Radio");
+    a(this, "inputEvent", (e) => {
+      this.checked = e.target.checked;
+    });
+    this._checked = !1;
+  }
+  set checked(e) {
+    this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  get checked() {
+    return this._checked;
+  }
+  static get cssStyleSheet() {
+    return h;
+  }
+  static get observedAttributes() {
+    return ["checked"];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, b, u) {
+    let d = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("native-radio"), this.color && r.classList.add(this.color), this.input = document.createElement("input"), this.input.type = "radio", this.input.id = "radio", this.input.name = this.name + "-radio", this.input.checked = this.hasAttribute("checked"), this.input.disabled = this.hasAttribute("disabled"), this.input.indeterminate = this.hasAttribute("indeterminate");
+    let o = document.createElement("label");
+    return o.htmlFor = "radio", o.innerHTML = "<slot></slot>", r.appendChild(this.input), r.appendChild(o), d.appendChild(r), d;
+  }
+  afterDraw() {
+    this.hasAttribute("disabled") || (n.addListener(this, "click", "wje-radio:change"), n.addListener(this, "click", "wje-radio:input"));
+  }
+  disconnectedCallback() {
+    n.removeElement(this);
+  }
+}
+c.define("wje-radio", c);
+export {
+  c as default
+};