wj-elements 0.0.11 → 0.0.13

package/dist/wj-progress-bar.js

@@ -1,18 +1,21 @@
-var m = Object.defineProperty;
-var A = (i, o, e) => o in i ? m(i, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[o] = e;
-var g = (i, o, e) => (A(i, typeof o != "symbol" ? o + "" : o, e), e);
-import j from "./wj-element.js";
+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 WJElement from "./wj-element.js";
 import "./wj-store.js";
-const k = `:host(.wj-color-primary) #bar{--wj-progress-bar-color: var(--wj-color-primary)}:host(.wj-color-complete) #bar{--wj-progress-bar-color: var(--wj-color-complete)}:host(.wj-color-success) #bar{--wj-progress-bar-color: var(--wj-color-success)}:host(.wj-color-warning) #bar{--wj-progress-bar-color: var(--wj-color-warning)}:host(.wj-color-danger) #bar{--wj-progress-bar-color: var(--wj-color-danger)}:host(.wj-color-dark) #bar{--wj-progress-bar-color: var(--wj-color-contrast-0)}:host(.wj-color-light) #bar{--wj-progress-bar-color: var(--wj-color-contrast-11)}:host{--wj-progress-bar-color: var(--wj-color-contrast-6);--wj-progress-bar-text-size: .75rem;--wj-progress-bar-text-color: var(--wj-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{stroke:var(--wj-progress-bar-color)}:host text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;dominant-baseline:middle;font-size:var(--wj-progress-bar-text-size);fill:var(--wj-progress-bar-text-color)}:host(.wj-color) #bar{stroke:var(--wj-progress-bar-color)}::slotted([slot=start]){margin-inline:0 1rem}::slotted([slot=end]){margin-inline:1rem 0}
-`;
-class f extends j {
+const styles = "/*\n[ WJ Progress bar ]\n*/\n:host(.wj-color-primary) #bar {\n  --wj-progress-bar-color: var(--wj-color-primary);\n}\n\n:host(.wj-color-complete) #bar {\n  --wj-progress-bar-color: var(--wj-color-complete);\n}\n\n:host(.wj-color-success) #bar {\n  --wj-progress-bar-color: var(--wj-color-success);\n}\n\n:host(.wj-color-warning) #bar {\n  --wj-progress-bar-color: var(--wj-color-warning);\n}\n\n:host(.wj-color-danger) #bar {\n  --wj-progress-bar-color: var(--wj-color-danger);\n}\n\n:host(.wj-color-dark) #bar {\n  --wj-progress-bar-color: var(--wj-color-contrast-0);\n}\n\n:host(.wj-color-light) #bar {\n  --wj-progress-bar-color: var(--wj-color-contrast-11);\n}\n\n:host {\n  --wj-progress-bar-color: var(--wj-color-contrast-6);\n  --wj-progress-bar-text-size: .75rem;\n  --wj-progress-bar-text-color: var(--wj-color);\n}\n:host .progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n:host .slot-wrapper {\n  display: flex;\n  position: absolute;\n  top: 0;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n}\n:host #bar {\n  stroke: var(--wj-progress-bar-color);\n}\n:host text {\n  transform: rotate(90deg);\n  transform-origin: center;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--wj-progress-bar-text-size);\n  fill: var(--wj-progress-bar-text-color);\n}\n\n:host(.wj-color) #bar {\n  stroke: var(--wj-progress-bar-color);\n}\n\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n\n::slotted([slot=end]) {\n  margin-inline: 1rem 0;\n}";
+class ProgressBar extends WJElement {
   constructor() {
     super();
-    g(this, "className", "ProgressBar");
-    this.timerInterval = null, this.timeLimit = 60;
+    __publicField(this, "className", "ProgressBar");
+    this.timerInterval = null;
+    this.timeLimit = 60;
   }
-  set radius(e) {
-    this.setAttribute("radius", e);
+  set radius(value) {
+    this.setAttribute("radius", value);
   }
   get radius() {
     return +this.getAttribute("radius") || 70;
@@ -20,8 +23,8 @@ class f extends j {
   get diameter() {
     return this.radius * 2 + this.stroke;
   }
-  set stroke(e) {
-    this.setAttribute("stroke", e);
+  set stroke(value) {
+    this.setAttribute("stroke", value);
   }
   get stroke() {
     return +this.getAttribute("stroke") || 6;
@@ -30,7 +33,7 @@ class f extends j {
     return this.getAttribute("linecap") || "square";
   }
   static get cssStyleSheet() {
-    return k;
+    return styles;
   }
   static get observedAttributes() {
     return ["progress"];
@@ -38,37 +41,94 @@ class f extends j {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, h, l) {
-    let n = this.radius + this.stroke / 2, d = document.createDocumentFragment();
-    l.color && this.classList.add("wj-color-" + l.color, "wj-color");
-    let a = document.createElement("div");
-    a.classList.add("progress");
-    let w = document.createElement("slot"), u = document.createElement("div");
-    u.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;
+  draw(context, store, params) {
+    let xy = this.radius + this.stroke / 2;
+    let fragment = document.createDocumentFragment();
+    if (params.color)
+      this.classList.add("wj-color-" + params.color, "wj-color");
+    let element = document.createElement("div");
+    element.classList.add("progress");
+    let slot = document.createElement("slot");
+    let slotWrapper = document.createElement("div");
+    slotWrapper.classList.add("slot-wrapper");
+    let slotStart = document.createElement("slot");
+    slotStart.setAttribute("name", "start");
+    let slotEnd = document.createElement("slot");
+    slotEnd.setAttribute("name", "end");
+    let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    let background;
+    let bar;
     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", n), r.setAttribute("cy", n), r.setAttribute("fill", "transparent"), t = document.createElementNS("http://www.w3.org/2000/svg", "circle"), t.setAttribute("r", this.radius), t.setAttribute("cx", n), t.setAttribute("cy", n), t.setAttribute("fill", "transparent"), t.setAttribute("stroke-dasharray", "0"), t.setAttribute("stroke-dashoffset", "0");
-      let c = document.createElementNS("http://www.w3.org/2000/svg", "text");
-      c.setAttribute("x", "50%"), c.setAttribute("y", "50%"), c.innerHTML = this.progress + "%", s.appendChild(c);
-    } 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", "#e0e0e0"), 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), u.appendChild(w), a.appendChild(p), a.appendChild(u), a.appendChild(s), a.appendChild(b), d.appendChild(a), this.background = r, this.bar = t, d;
+      svg.setAttribute("width", this.diameter);
+      svg.setAttribute("height", this.diameter);
+      svg.setAttribute("viewBox", `0 0 ${this.diameter} ${this.diameter}`);
+      svg.setAttribute("style", "transform: rotate(-90deg)");
+      background = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+      background.setAttribute("r", this.radius);
+      background.setAttribute("cx", xy);
+      background.setAttribute("cy", xy);
+      background.setAttribute("fill", "transparent");
+      bar = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+      bar.setAttribute("r", this.radius);
+      bar.setAttribute("cx", xy);
+      bar.setAttribute("cy", xy);
+      bar.setAttribute("fill", "transparent");
+      bar.setAttribute("stroke-dasharray", "0");
+      bar.setAttribute("stroke-dashoffset", "0");
+      let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+      text.setAttribute("x", "50%");
+      text.setAttribute("y", "50%");
+      text.innerHTML = this.progress + "%";
+      svg.appendChild(text);
+    } else {
+      svg.setAttribute("width", "100%");
+      svg.setAttribute("height", this.stroke);
+      svg.setAttribute("preserveAspectRatio", "none");
+      background = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      background.setAttribute("x1", 0);
+      background.setAttribute("y1", this.stroke / 2);
+      background.setAttribute("x2", "100%");
+      background.setAttribute("y2", this.stroke / 2);
+      bar = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      bar.setAttribute("x1", 0);
+      bar.setAttribute("y1", this.stroke / 2);
+      bar.setAttribute("x2", this.progress + "%");
+      bar.setAttribute("y2", this.stroke / 2);
+    }
+    background.setAttribute("stroke", "#e0e0e0");
+    background.setAttribute("stroke-linecap", this.linecap);
+    background.setAttribute("stroke-width", this.stroke + "px");
+    bar.setAttribute("stroke-linecap", this.linecap);
+    bar.setAttribute("stroke-width", this.stroke + "px");
+    bar.setAttribute("id", "bar");
+    svg.appendChild(background);
+    svg.appendChild(bar);
+    slotWrapper.appendChild(slot);
+    element.appendChild(slotStart);
+    element.appendChild(slotWrapper);
+    element.appendChild(svg);
+    element.appendChild(slotEnd);
+    fragment.appendChild(element);
+    this.background = background;
+    this.bar = bar;
+    return fragment;
   }
-  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"));
+  afterDraw(context, store, params) {
+    if (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(params.progress, this.radius) + "px");
+    }
   }
-  getCircleDasharray(e = 70) {
-    return 2 * Math.PI * e;
+  getCircleDasharray(radius = 70) {
+    return 2 * Math.PI * radius;
   }
-  getCircleDashoffset(e = 0, h) {
-    return this.getCircleDasharray(h) * ((100 - e) / 100);
+  getCircleDashoffset(progress = 0, radius) {
+    return this.getCircleDasharray(radius) * ((100 - progress) / 100);
   }
 }
-customElements.get("wj-progress-bar") || window.customElements.define("wj-progress-bar", f);
+customElements.get("wj-progress-bar") || window.customElements.define("wj-progress-bar", ProgressBar);
 export {
-  f as ProgressBar
+  ProgressBar
 };

package/dist/wj-radio-group.js

@@ -1,18 +1,20 @@
-var d = Object.defineProperty;
-var c = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var n = (i, t, e) => (c(i, typeof t != "symbol" ? t + "" : t, e), e);
-import u from "./wj-element.js";
-import { Radio as o } from "./wj-radio.js";
+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 WJElement from "./wj-element.js";
+import { Radio } from "./wj-radio.js";
 import "./wj-store.js";
-const h = `.wj-inline{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}
-`;
-class m extends u {
+const styles = "/*\n[ WJ Radio Group ]\n*/\n.wj-inline {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}";
+class RadioGroup extends WJElement {
   constructor() {
     super();
-    n(this, "className", "RadioGroup");
+    __publicField(this, "className", "RadioGroup");
   }
   static get cssStyleSheet() {
-    return h;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -20,33 +22,44 @@ class m extends u {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, s, p) {
-    let a = document.createDocumentFragment(), r = document.createElement("div");
-    r.classList.add("native-radio-group", this.hasAttribute("inline") ? "wj-inline" : "ddd");
-    let l = document.createElement("slot");
-    return r.appendChild(l), a.appendChild(r), a;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-radio-group", this.hasAttribute("inline") ? "wj-inline" : "ddd");
+    let slot = document.createElement("slot");
+    native.appendChild(slot);
+    fragment.appendChild(native);
+    return fragment;
   }
   afterDraw() {
-    this.value && this.setRadioToChekced(this.getRadioByValue(this.value)), this.addEventListener("wj:radio:input", (e) => {
-      this.removeCheck(), this.setRadioToChekced(e.detail.context);
+    if (this.value) {
+      this.setRadioToChekced(this.getRadioByValue(this.value));
+    }
+    this.addEventListener("wj:radio:input", (e) => {
+      this.removeCheck();
+      this.setRadioToChekced(e.detail.context);
     });
   }
-  getRadioByValue(e) {
-    return this.getAllElements().filter((s) => s instanceof o && s.value === e)[0];
+  getRadioByValue(value) {
+    return this.getAllElements().filter((el) => el instanceof Radio && el.value === value)[0];
   }
   removeCheck() {
-    this.getAllElements().forEach((e) => {
-      e instanceof o && (e.checked = !1);
+    this.getAllElements().forEach((el) => {
+      if (el instanceof Radio)
+        el.checked = false;
     });
   }
-  setRadioToChekced(e) {
-    e instanceof o && (this.setAttribute("value", e.value), e.checked = !0);
+  setRadioToChekced(radio) {
+    if (radio instanceof Radio) {
+      this.setAttribute("value", radio.value);
+      radio.checked = true;
+    }
   }
   getAllElements() {
     return Array.from(this.childNodes);
   }
 }
-customElements.get("wj-radio-group") || window.customElements.define("wj-radio-group", m);
+customElements.get("wj-radio-group") || window.customElements.define("wj-radio-group", RadioGroup);
 export {
-  m as RadioGroup
+  RadioGroup
 };

package/dist/wj-radio.js

@@ -1,27 +1,33 @@
-var c = Object.defineProperty;
-var l = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var a = (i, t, e) => (l(i, typeof t != "symbol" ? t + "" : t, e), e);
-import s, { event as n } from "./wj-element.js";
+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 WJElement, { event } from "./wj-element.js";
 import "./wj-store.js";
-const p = `:host{--wj-radio-margin-top: 0;--wj-radio-margin-bottom: .5rem;--wj-radio-margin-inline: 0;display:block;margin-top:var(--wj-radio-margin-top);margin-bottom:var(--wj-radio-margin-bottom);margin-inline:var(--wj-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(--wj-color-contrast-1);border:1px solid var(--wj-color-contrast-4)}.native-radio input[type=radio]+label:before{border-radius:var(--wj-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(--wj-color-contrast-6);border-width:5px}.native-radio input[type=radio]:focus+label{color:var(--wj-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(--wj-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(--wj-color-success)}.primary input[type=radio]:checked+label:before{border-color:var(--wj-color-primary)}.complete input[type=radio]:checked+label:before{border-color:var(--wj-color-complete)}.warning input[type=radio]:checked+label:before{border-color:var(--wj-color-warning)}.danger input[type=radio]:checked+label:before{border-color:var(--wj-color-danger)}.neutral input[type=radio]:checked+label:before{border-color:var(--wj-color-info)}
-`;
-class h extends s {
+const styles = '/*\n[ WJ Radio ]\n*/\n:host {\n  --wj-radio-margin-top: 0;\n  --wj-radio-margin-bottom: .5rem;\n  --wj-radio-margin-inline: 0;\n  display: block;\n  margin-top: var(--wj-radio-margin-top);\n  margin-bottom: var(--wj-radio-margin-bottom);\n  margin-inline: var(--wj-radio-margin-inline);\n  line-height: 100%;\n  padding-left: 0;\n}\n:host label {\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  padding-left: 1.5rem;\n  min-width: 16px;\n  min-height: 16px;\n  margin-bottom: 0;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\n  -moz-user-select: none; /* Old versions of Firefox */\n  -ms-user-select: none; /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */\n  align-items: center;\n}\n:host label:before {\n  content: "";\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 0;\n  -webkit-box-sizing: inherit;\n  box-sizing: border-box;\n  background-color: var(--wj-color-contrast-1);\n  border: 1px solid var(--wj-color-contrast-4);\n}\n\n.native-radio input[type=radio] + label:before {\n  border-radius: var(--wj-border-radius-circle);\n  transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);\n}\n.native-radio input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-contrast-6);\n  border-width: 5px;\n}\n.native-radio input[type=radio]:focus + label {\n  color: var(--wj-color);\n}\n.native-radio input[type=radio]:focus + label:before {\n  outline: none !important;\n  box-shadow: 0 0 0 0 #78c8fe;\n}\n.native-radio input[type=radio] {\n  opacity: 0;\n  position: absolute;\n  top: 3px;\n  width: 16px;\n  height: 16px;\n}\n.native-radio input[type=radio][disabled] + label {\n  cursor: not-allowed !important;\n  color: var(--wj-color-contrast-9);\n  opacity: 0.5;\n}\n.native-radio input[type=radio][disabled] + label:before {\n  cursor: not-allowed !important;\n}\n\n.success input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-success);\n}\n.primary input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-primary);\n}\n.complete input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-complete);\n}\n.warning input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-warning);\n}\n.danger input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-danger);\n}\n.neutral input[type=radio]:checked + label:before {\n  border-color: var(--wj-color-info);\n}';
+class Radio extends WJElement {
   constructor() {
     super();
-    a(this, "className", "Radio");
-    a(this, "inputEvent", (e) => {
+    __publicField(this, "className", "Radio");
+    __publicField(this, "inputEvent", (e) => {
       this.checked = e.target.checked;
     });
-    this._checked = !1;
+    this._checked = false;
   }
-  set checked(e) {
-    this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  set checked(value) {
+    this._checked = value;
+    if (value)
+      this.setAttribute("checked", "");
+    else
+      this.removeAttribute("checked");
   }
   get checked() {
     return this._checked;
   }
   static get cssStyleSheet() {
-    return p;
+    return styles;
   }
   static get observedAttributes() {
     return ["checked"];
@@ -29,20 +35,38 @@ class h extends s {
   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;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-radio");
+    if (this.color)
+      native.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 label = document.createElement("label");
+    label.htmlFor = "radio";
+    label.innerHTML = "<slot></slot>";
+    native.appendChild(this.input);
+    native.appendChild(label);
+    fragment.appendChild(native);
+    return fragment;
   }
   afterDraw() {
-    this.hasAttribute("disabled") || (n.addListener(this, "click", "wj:radio:change"), n.addListener(this, "click", "wj:radio:input"));
+    if (!this.hasAttribute("disabled")) {
+      event.addListener(this, "click", "wj:radio:change");
+      event.addListener(this, "click", "wj:radio:input");
+    }
   }
   disconnectedCallback() {
-    n.removeElement(this);
+    event.removeElement(this);
   }
 }
-customElements.get("wj-radio") || window.customElements.define("wj-radio", h);
+customElements.get("wj-radio") || window.customElements.define("wj-radio", Radio);
 export {
-  h as Radio
+  Radio
 };

package/dist/wj-rate.js

@@ -1,127 +1,177 @@
-var c = Object.defineProperty;
-var u = (a, o, e) => o in a ? c(a, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[o] = e;
-var n = (a, o, e) => (u(a, typeof o != "symbol" ? o + "" : o, e), e);
-import d from "./wj-element.js";
+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 WJElement from "./wj-element.js";
 import "./wj-store.js";
-const v = `:host{display:flex}.native-rate{position:relative;display:flex;gap:var(--wj-rate-gap, .25rem)}.wj-rate-icon{position:relative;cursor:pointer}.selected{color:var(--wj-color-danger)}:host(:not([readonly])) .wj-rate-icon:hover{transform:scale(1.2)}.half wj-icon:first-child{color:#fff}.half wj-icon:last-child{color:currentColor;position:absolute;top:0;left:0}:host([disabled]) .native-rate{pointer-events:none;opacity:.5}
-`;
-class m extends d {
+const styles = "/*\n[ WJ Rate ]\n*/\n:host {\n  display: flex;\n}\n\n.native-rate {\n  position: relative;\n  display: flex;\n  gap: var(--wj-rate-gap, 0.25rem);\n}\n\n.wj-rate-icon {\n  position: relative;\n  cursor: pointer;\n}\n\n.selected {\n  color: var(--wj-color-danger);\n}\n\n:host(:not([readonly])) .wj-rate-icon:hover {\n  transform: scale(1.2);\n}\n\n.half wj-icon:first-child {\n  color: white;\n}\n\n.half wj-icon:last-child {\n  color: currentColor;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n:host([disabled]) .native-rate {\n  pointer-events: none;\n  opacity: 0.5;\n}";
+class Rate extends WJElement {
   constructor() {
     super();
-    n(this, "className", "Rate");
+    __publicField(this, "className", "Rate");
     /*
      * Events - Mouse
      */
-    n(this, "onMouseEnter", (e) => {
-      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.clientX), this.changeRate();
+    __publicField(this, "onMouseEnter", (e) => {
+      e.preventDefault();
+      this.hoverValue = this.getValueFromXPosition(e.clientX);
+      this.changeRate();
     });
-    n(this, "onMouseLeave", (e) => {
-      e.preventDefault(), this.hoverValue = 0, this.changeRate();
+    __publicField(this, "onMouseLeave", (e) => {
+      e.preventDefault();
+      this.hoverValue = 0;
+      this.changeRate();
     });
-    n(this, "onMouseMove", (e) => {
+    __publicField(this, "onMouseMove", (e) => {
       e.preventDefault();
-      let i = this.getValueFromXPosition(e.clientX);
-      i != this.hoverValue && (this.hoverValue = i, this.changeRate());
+      let newValue = this.getValueFromXPosition(e.clientX);
+      if (newValue != this.hoverValue) {
+        this.hoverValue = newValue;
+        this.changeRate();
+      }
     });
     /*
      * Events - Touch
      */
-    n(this, "onTouchStart", (e) => {
-      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX), this.changeRate();
+    __publicField(this, "onTouchStart", (e) => {
+      e.preventDefault();
+      this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);
+      this.changeRate();
     });
-    n(this, "onTouchEnd", (e) => {
-      e.preventDefault(), this.hoverValue = 0, this.changeRate();
+    __publicField(this, "onTouchEnd", (e) => {
+      e.preventDefault();
+      this.hoverValue = 0;
+      this.changeRate();
     });
-    n(this, "onTouchMove", (e) => {
-      e.preventDefault(), this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX), this.changeRate();
+    __publicField(this, "onTouchMove", (e) => {
+      e.preventDefault();
+      this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);
+      this.changeRate();
     });
-    n(this, "onClick", (e) => {
-      e.preventDefault(), this.value = +this.hoverValue;
+    __publicField(this, "onClick", (e) => {
+      e.preventDefault();
+      this.value = +this.hoverValue;
     });
   }
-  set precision(e) {
-    this.setAttribute("precision", e);
+  set precision(value) {
+    this.setAttribute("precision", value);
   }
   get precision() {
     return this.hasAttribute("precision") ? +this.getAttribute("precision") : 1;
   }
-  set max(e) {
-    this.setAttribute("max", e);
+  set max(value) {
+    this.setAttribute("max", value);
   }
   get max() {
     return this.hasAttribute("icons") ? this.icons.length : +this.getAttribute("max");
   }
-  set icons(e) {
-    return e;
+  set icons(value) {
+    return value;
   }
   get icons() {
     return this.hasAttribute("icons") ? JSON.parse(this.getAttribute("icons").replace(/'/g, '"')) : ["star-filled"];
   }
-  set value(e) {
-    this.setAttribute("value", e);
+  set value(value) {
+    this.setAttribute("value", value);
   }
   get value() {
     return this.hasAttribute("value") ? +this.getAttribute("value") : 0;
   }
   static get cssStyleSheet() {
-    return v;
+    return styles;
   }
   static get observedAttributes() {
     return ["is-hover"];
   }
-  attributeChangedCallback(e, i, t) {
+  attributeChangedCallback(name, old, newName) {
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, i, t) {
-    let r = document.createDocumentFragment(), s = document.createElement("div");
-    if (s.setAttribute("part", "native"), s.classList.add("native-rate"), this.native = s, this.hasAttribute("icons")) {
-      let h = this.icons;
-      for (let l = 0; l < h.length; l++)
-        s.appendChild(this.createIcons(l));
-    } else
-      for (let h = 0; h < this.max; h++)
-        s.appendChild(this.createIcons(h));
-    return this.changeRate(), r.appendChild(s), r;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-rate");
+    this.native = native;
+    if (this.hasAttribute("icons")) {
+      let icons = this.icons;
+      for (let i = 0; i < icons.length; i++) {
+        native.appendChild(this.createIcons(i));
+      }
+    } else {
+      for (let i = 0; i < this.max; i++) {
+        native.appendChild(this.createIcons(i));
+      }
+    }
+    this.changeRate();
+    fragment.appendChild(native);
+    return fragment;
   }
   afterDraw() {
-    this.hasAttribute("disabled") || this.hasAttribute("readonly") || (this.addEventListener("mouseenter", this.onMouseEnter), this.addEventListener("mouseleave", this.onMouseLeave), this.addEventListener("mousemove", this.onMouseMove), this.addEventListener("touchstart", this.onTouchStart), this.addEventListener("touchend", this.onTouchEnd), this.addEventListener("touchmove", this.onTouchMove), this.addEventListener("click", this.onClick));
-  }
-  createIcons(e) {
-    let i = document.createElement("div");
-    i.classList.add("wj-rate-icon");
-    let t = this.getIcons(e);
-    if (i.appendChild(t), this.value > e && this.value < e + 1) {
-      let r = t.cloneNode(!0);
-      i.appendChild(r);
+    if (this.hasAttribute("disabled") || this.hasAttribute("readonly")) {
+      return;
+    }
+    this.addEventListener("mouseenter", this.onMouseEnter);
+    this.addEventListener("mouseleave", this.onMouseLeave);
+    this.addEventListener("mousemove", this.onMouseMove);
+    this.addEventListener("touchstart", this.onTouchStart);
+    this.addEventListener("touchend", this.onTouchEnd);
+    this.addEventListener("touchmove", this.onTouchMove);
+    this.addEventListener("click", this.onClick);
+  }
+  createIcons(i) {
+    let div = document.createElement("div");
+    div.classList.add("wj-rate-icon");
+    let icon = this.getIcons(i);
+    div.appendChild(icon);
+    if (this.value > i && this.value < i + 1) {
+      let clone = icon.cloneNode(true);
+      div.appendChild(clone);
     }
-    return i;
+    return div;
   }
   changeRate() {
-    const e = this.native.children, i = this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== void 0 ? this.hoverValue : this.value;
-    for (let t = 0; t < e.length; t++)
-      if (e[t].classList.remove("selected", "hovered"), e[t].children.length > 1 && (e[t].classList.remove("half"), e[t].querySelector("wj-icon:first-child").removeAttribute("style"), e[t].querySelector("wj-icon:last-child").remove()), t < i && e[t].classList.add("selected"), i > t && i < t + 1 && e[t].children.length === 1) {
-        let r = e[t].querySelector("wj-icon").cloneNode(!0);
-        e[t].appendChild(r);
-        let s = (i - t) * 100;
-        e[t].classList.add("half"), e[t].querySelector("wj-icon:first-child").style.clipPath = `inset(0 0 0 ${s}%)`, e[t].querySelector("wj-icon:last-child").style.clipPath = `inset(0 ${s}% 0 0)`;
+    const icons = this.native.children;
+    const rateValue = this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== void 0 ? this.hoverValue : this.value;
+    for (let i = 0; i < icons.length; i++) {
+      icons[i].classList.remove("selected", "hovered");
+      if (icons[i].children.length > 1) {
+        icons[i].classList.remove("half");
+        icons[i].querySelector("wj-icon:first-child").removeAttribute("style");
+        icons[i].querySelector("wj-icon:last-child").remove();
       }
+      if (i < rateValue) {
+        icons[i].classList.add("selected");
+      }
+      if (rateValue > i && rateValue < i + 1 && icons[i].children.length === 1) {
+        let clone = icons[i].querySelector("wj-icon").cloneNode(true);
+        icons[i].appendChild(clone);
+        let percent = (rateValue - i) * 100;
+        icons[i].classList.add("half");
+        icons[i].querySelector("wj-icon:first-child").style.clipPath = `inset(0 0 0 ${percent}%)`;
+        icons[i].querySelector("wj-icon:last-child").style.clipPath = `inset(0 ${percent}% 0 0)`;
+      }
+    }
   }
-  getIcons(e) {
-    let i = document.createElement("wj-icon");
-    return i.setAttribute("name", this.max ? this.icons[0] : this.icons[e]), i;
+  getIcons(index) {
+    let icon = document.createElement("wj-icon");
+    icon.setAttribute("name", this.max ? this.icons[0] : this.icons[index]);
+    return icon;
   }
-  getValueFromXPosition(e) {
-    const { left: i, right: t, width: r } = this.native.getBoundingClientRect(), s = this.roundToPrecision((e - i) / r * this.max, this.precision);
-    return Math.min(Math.max(s, 0), this.max);
+  getValueFromXPosition(coordinate) {
+    const { left, right, width } = this.native.getBoundingClientRect();
+    const value = this.roundToPrecision((coordinate - left) / width * this.max, this.precision);
+    return Math.min(Math.max(value, 0), this.max);
   }
-  roundToPrecision(e, i = 0.5) {
-    const t = 1 / i;
-    return Math.ceil(e * t) / t;
+  roundToPrecision(numberToRound, precision = 0.5) {
+    const multiplier = 1 / precision;
+    return Math.ceil(numberToRound * multiplier) / multiplier;
   }
 }
-customElements.get("wj-rate") || window.customElements.define("wj-rate", m);
+customElements.get("wj-rate") || window.customElements.define("wj-rate", Rate);
 export {
-  m as Rate
+  Rate
 };