wj-elements 0.0.2 → 0.0.4

package/dist/wj-progress-bar.js

@@ -1,21 +1,20 @@
-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";
+var m = Object.defineProperty;
+var A = (o, i, e) => i in o ? m(o, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[i] = e;
+var g = (o, i, e) => (A(o, typeof i != "symbol" ? i + "" : i, e), e);
+import f from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Progress bar ]\n*/\n:host(.wj-color-primary) #bar {\n  --wj-progress-bar-color: #7252D3;\n}\n:host(.wj-color-complete) #bar {\n  --wj-progress-bar-color: #0072EC;\n}\n:host(.wj-color-success) #bar {\n  --wj-progress-bar-color: #19AD79;\n}\n:host(.wj-color-warning) #bar {\n  --wj-progress-bar-color: #FFd945;\n}\n:host(.wj-color-danger) #bar {\n  --wj-progress-bar-color: #D83C31;\n}\n:host(.wj-color-dark) #bar {\n  --wj-progress-bar-color: #212121;\n}\n:host(.wj-color-light) #bar {\n  --wj-progress-bar-color: #fff;\n}\n:host {\n  --wj-progress-bar-color: #212121;\n  --wj-progress-bar-text-size: 1rem;\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, red);\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}\n:host(.wj-color) #bar {\n  stroke: var(--wj-progress-bar-color);\n}\n::slotted([slot=start]) {\n  margin-inline: 0 1rem;\n}\n::slotted([slot=end]) {\n  margin-inline: 1rem 0;\n}";
-class ProgressBar extends WJElement {
+const k = `/*!
+* direction.scss
+*/:host(.wj-color-primary) #bar{--wj-progress-bar-color: #7252D3}:host(.wj-color-complete) #bar{--wj-progress-bar-color: #0072EC}:host(.wj-color-success) #bar{--wj-progress-bar-color: #19AD79}:host(.wj-color-warning) #bar{--wj-progress-bar-color: #FFd945}:host(.wj-color-danger) #bar{--wj-progress-bar-color: #D83C31}:host(.wj-color-dark) #bar{--wj-progress-bar-color: #212121}:host(.wj-color-light) #bar{--wj-progress-bar-color: #fff}:host{--wj-progress-bar-color: #212121;--wj-progress-bar-text-size: 1rem}: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, red)}:host text{transform:rotate(90deg);transform-origin:center;text-anchor:middle;dominant-baseline:middle;font-size:var(--wj-progress-bar-text-size)}: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 x extends f {
   constructor() {
     super();
-    __publicField(this, "className", "ProgressBar");
-    this.timerInterval = null;
-    this.timeLimit = 60;
+    g(this, "className", "ProgressBar");
+    this.timerInterval = null, this.timeLimit = 60;
   }
-  set radius(value) {
-    this.setAttribute("radius", value);
+  set radius(e) {
+    this.setAttribute("radius", e);
   }
   get radius() {
     return +this.getAttribute("radius") || 70;
@@ -23,8 +22,8 @@ class ProgressBar extends WJElement {
   get diameter() {
     return this.radius * 2 + this.stroke;
   }
-  set stroke(value) {
-    this.setAttribute("stroke", value);
+  set stroke(e) {
+    this.setAttribute("stroke", e);
   }
   get stroke() {
     return +this.getAttribute("stroke") || 6;
@@ -33,7 +32,7 @@ class ProgressBar extends WJElement {
     return this.getAttribute("linecap") || "square";
   }
   static get cssStyleSheet() {
-    return styles;
+    return k;
   }
   static get observedAttributes() {
     return ["progress"];
@@ -41,94 +40,37 @@ class ProgressBar extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  draw(e, h, l) {
+    let n = this.radius + this.stroke / 2, u = 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"), d = document.createElement("div");
+    d.classList.add("slot-wrapper");
+    let b = document.createElement("slot");
+    b.setAttribute("name", "start");
+    let p = document.createElement("slot");
+    p.setAttribute("name", "end");
+    let s = document.createElementNS("http://www.w3.org/2000/svg", "svg"), r, t;
     if ((this == null ? void 0 : this.type) === "circle") {
-      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;
+      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), d.appendChild(w), a.appendChild(b), a.appendChild(d), a.appendChild(s), a.appendChild(p), u.appendChild(a), this.background = r, this.bar = t, u;
   }
-  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");
-    }
+  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"));
   }
-  getCircleDasharray(radius = 70) {
-    return 2 * Math.PI * radius;
+  getCircleDasharray(e = 70) {
+    return 2 * Math.PI * e;
   }
-  getCircleDashoffset(progress = 0, radius) {
-    return this.getCircleDasharray(radius) * ((100 - progress) / 100);
+  getCircleDashoffset(e = 0, h) {
+    return this.getCircleDasharray(h) * ((100 - e) / 100);
   }
 }
-customElements.get("wj-progress-bar") || window.customElements.define("wj-progress-bar", ProgressBar);
+customElements.get("wj-progress-bar") || window.customElements.define("wj-progress-bar", x);
 export {
-  ProgressBar
+  x as ProgressBar
 };

package/dist/wj-radio-group.js

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

package/dist/wj-radio.js

@@ -1,33 +1,29 @@
-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";
+var c = Object.defineProperty;
+var s = (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) => (s(i, typeof t != "symbol" ? t + "" : t, e), e);
+import l, { event as n } from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ 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: 0px;\n}\n:host label {\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  padding-left: 25px;\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: #fff;\n  border: 1px solid #c9c9c9;\n}\n.native-radio input[type=radio] + label:before {\n  border-radius: 99px;\n  -webkit-transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);\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: #757575;\n  border-width: 5px;\n}\n.native-radio input[type=radio]:hover:active:not(:checked) + label:before {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.native-radio input[type=radio]:focus + label {\n  color: #212121;\n}\n.native-radio input[type=radio]:focus + label:before {\n  outline: none !important;\n  box-shadow: 0 0 0 0px #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: #4b4b4b;\n  opacity: 0.58;\n}\n.native-radio input[type=radio][disabled] + label:before {\n  cursor: not-allowed !important;\n  background: #ececec;\n}\n.success input[type=radio]:checked + label:before {\n  border-color: #19AD79;\n}\n.primary input[type=radio]:checked + label:before {\n  border-color: #7252D3;\n}\n.complete input[type=radio]:checked + label:before {\n  border-color: #0072EC;\n}\n.warning input[type=radio]:checked + label:before {\n  border-color: #FFd945;\n}\n.danger input[type=radio]:checked + label:before {\n  border-color: #D83C31;\n}\n.neutral input[type=radio]:checked + label:before {\n  border-color: #3B4752;\n}';
-class Radio extends WJElement {
+const b = `/*!
+* direction.scss
+*/: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:25px;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:#fff;border:1px solid #c9c9c9}.native-radio input[type=radio]+label:before{border-radius:99px;-webkit-transition:border .3s 0s cubic-bezier(.455,.03,.215,1.33);transition:border .3s 0s cubic-bezier(.455,.03,.215,1.33)}.native-radio input[type=radio]:checked+label:before{border-color:#757575;border-width:5px}.native-radio input[type=radio]:hover:active:not(:checked)+label:before{background-color:#00000014}.native-radio input[type=radio]:focus+label{color:#212121}.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:#4b4b4b;opacity:.58}.native-radio input[type=radio][disabled]+label:before{cursor:not-allowed!important;background:#ececec}.success input[type=radio]:checked+label:before{border-color:#19ad79}.primary input[type=radio]:checked+label:before{border-color:#7252d3}.complete input[type=radio]:checked+label:before{border-color:#0072ec}.warning input[type=radio]:checked+label:before{border-color:#ffd945}.danger input[type=radio]:checked+label:before{border-color:#d83c31}.neutral input[type=radio]:checked+label:before{border-color:#3b4752}
+`;
+class p extends l {
   constructor() {
     super();
-    __publicField(this, "className", "Radio");
-    __publicField(this, "inputEvent", (e) => {
+    a(this, "className", "Radio");
+    a(this, "inputEvent", (e) => {
       this.checked = e.target.checked;
     });
-    this._checked = false;
+    this._checked = !1;
   }
-  set checked(value) {
-    this._checked = value;
-    if (value)
-      this.setAttribute("checked", "");
-    else
-      this.removeAttribute("checked");
+  set checked(e) {
+    this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
   }
   get checked() {
     return this._checked;
   }
   static get cssStyleSheet() {
-    return styles;
+    return b;
   }
   static get observedAttributes() {
     return ["checked"];
@@ -35,38 +31,20 @@ class Radio extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  draw(e, h, u) {
+    let d = document.createDocumentFragment(), o = document.createElement("div");
+    o.classList.add("native-radio"), this.color && o.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 r = document.createElement("label");
+    return r.htmlFor = "radio", r.innerHTML = "<slot></slot>", o.appendChild(this.input), o.appendChild(r), d.appendChild(o), d;
   }
   afterDraw() {
-    if (!this.hasAttribute("disabled")) {
-      event.addListener(this, "click", "wj:radio:change");
-      event.addListener(this, "click", "wj:radio:input");
-    }
+    this.hasAttribute("disabled") || (n.addListener(this, "click", "wj:radio:change"), n.addListener(this, "click", "wj:radio:input"));
   }
   disconnectedCallback() {
-    event.removeElement(this);
+    n.removeElement(this);
   }
 }
-customElements.get("wj-radio") || window.customElements.define("wj-radio", Radio);
+customElements.get("wj-radio") || window.customElements.define("wj-radio", p);
 export {
-  Radio
+  p as Radio
 };

package/dist/wj-route.js

@@ -1,21 +1,18 @@
-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";
+var r = Object.defineProperty;
+var u = (t, e, o) => e in t ? r(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var s = (t, e, o) => (u(t, typeof e != "symbol" ? e + "" : e, o), o);
+import m from "./wj-element.js";
 import "./wj-store.js";
-class Route extends WJElement {
+class n extends m {
   constructor() {
     super();
-    __publicField(this, "className", "Route");
+    s(this, "className", "Route");
   }
   static get observedAttributes() {
     return [];
   }
 }
-customElements.get("wj-route") || window.customElements.define("wj-route", Route);
+customElements.get("wj-route") || window.customElements.define("wj-route", n);
 export {
-  Route
+  n as Route
 };

package/dist/wj-router-link.js

@@ -1,37 +1,34 @@
-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 { b as bindRouterLinks } from "./router-links-26e4a166.js";
+var i = Object.defineProperty;
+var c = (e, t, s) => t in e ? i(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var o = (e, t, s) => (c(e, typeof t != "symbol" ? t + "" : t, s), s);
+import a from "./wj-element.js";
+import { b as l } from "./router-links-e0087f84.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Router Link ]\n*/\n:host {\n  display: block;\n}\n:host(.active) {\n  cursor: pointer;\n  font-weight: bold;\n}";
-class RouterLink extends WJElement {
+const u = `/*!
+* direction.scss
+*/:host{display:block}:host(.active){cursor:pointer;font-weight:700}
+`;
+class m extends a {
   constructor() {
     super();
-    __publicField(this, "className", "RouterLink");
-    bindRouterLinks(this, { selector: false });
+    o(this, "className", "RouterLink");
+    l(this, { selector: !1 });
   }
   static get cssStyleSheet() {
-    return styles;
+    return u;
   }
   static get observedAttributes() {
     return [];
   }
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAttribute("active-class", "active");
+    this.isShadowRoot = "open", this.setAttribute("active-class", "active");
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(s, d, p) {
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return r.appendChild(n), r;
   }
 }
-customElements.get("wj-router-link") || window.customElements.define("wj-router-link", RouterLink);
+customElements.get("wj-router-link") || window.customElements.define("wj-router-link", m);
 export {
-  RouterLink
+  m as RouterLink
 };