wj-elements 0.0.11 → 0.0.13

package/dist/wj-container.js

@@ -1,17 +1,19 @@
-var s = Object.defineProperty;
-var a = (e, t, n) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var o = (e, t, n) => (a(e, typeof t != "symbol" ? t + "" : t, n), n);
-import c 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 d = `:host{--wj-container-indent: 0;display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}:host([vertical]){flex-direction:column}@media (min-width: 768px){:host([indent]){margin-left:var(--wj-container-indent)}}
-`;
-class l extends c {
+const styles = "/*\n[ WJ Container ]\n*/\n:host {\n  --wj-container-indent: 0;\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  flex-basis: auto;\n  box-sizing: border-box;\n  min-width: 0;\n}\n\n:host([vertical]) {\n  flex-direction: column;\n}\n\n@media (min-width: 768px) {\n  :host([indent]) {\n    margin-left: var(--wj-container-indent);\n  }\n}";
+class Container extends WJElement {
   constructor() {
     super();
-    o(this, "className", "Container");
+    __publicField(this, "className", "Container");
   }
   static get cssStyleSheet() {
-    return d;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,14 +21,16 @@ class l extends c {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(n, m, u) {
-    let i = document.createDocumentFragment();
-    this.indent && this.style.setProperty("--wj-container-indent", this.indent);
-    let r = document.createElement("slot");
-    return i.appendChild(r), i;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    if (this.indent)
+      this.style.setProperty("--wj-container-indent", this.indent);
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
   }
 }
-customElements.get("wj-container") || window.customElements.define("wj-container", l);
+customElements.get("wj-container") || window.customElements.define("wj-container", Container);
 export {
-  l as Container
+  Container
 };

package/dist/wj-copy-button.js

@@ -1,69 +1,95 @@
-var d = Object.defineProperty;
-var p = (o, e, t) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var i = (o, e, t) => (p(o, typeof e != "symbol" ? e + "" : e, t), t);
-import h, { event as s } from "./wj-element.js";
-import { Input as m } from "./wj-input.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 { Input } from "./wj-input.js";
 import "./wj-store.js";
-function f(o) {
-  const e = document.createElement("pre");
-  return e.style.width = "1px", e.style.height = "1px", e.style.position = "fixed", e.style.top = "5px", e.textContent = o, e;
+function createNode(text) {
+  const node = document.createElement("pre");
+  node.style.width = "1px";
+  node.style.height = "1px";
+  node.style.position = "fixed";
+  node.style.top = "5px";
+  node.textContent = text;
+  return node;
 }
-function l(o) {
-  if ("clipboard" in navigator)
-    return navigator.clipboard.writeText(o.textContent || "");
-  const e = getSelection();
-  if (e == null)
+function copyNode(node) {
+  if ("clipboard" in navigator) {
+    return navigator.clipboard.writeText(node.textContent || "");
+  }
+  const selection = getSelection();
+  if (selection == null) {
     return Promise.reject(new Error());
-  e.removeAllRanges();
-  const t = document.createRange();
-  return t.selectNodeContents(o), e.addRange(t), e.removeAllRanges(), Promise.resolve();
+  }
+  selection.removeAllRanges();
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  selection.addRange(range);
+  selection.removeAllRanges();
+  return Promise.resolve();
 }
-function u(o) {
-  if ("clipboard" in navigator)
-    return navigator.clipboard.writeText(o);
-  const e = document.body;
-  if (!e)
+function copyText(text) {
+  if ("clipboard" in navigator) {
+    return navigator.clipboard.writeText(text);
+  }
+  const body = document.body;
+  if (!body) {
     return Promise.reject(new Error());
-  const t = f(o);
-  return e.appendChild(t), l(t), e.removeChild(t), Promise.resolve();
+  }
+  const node = createNode(text);
+  body.appendChild(node);
+  copyNode(node);
+  body.removeChild(node);
+  return Promise.resolve();
 }
-const b = `:host{cursor:pointer;padding:.5rem}
-`;
-class y extends h {
+const styles = "/*\n[ Wj Copy Button ]\n*/\n:host {\n  cursor: pointer;\n  padding: 0.5rem;\n}";
+class CopyButton extends WJElement {
   constructor() {
     super();
-    i(this, "className", "CopyButton");
-    i(this, "clicked", (t) => {
-      const n = t.currentTarget;
-      n instanceof HTMLElement && this.copy(n);
+    __publicField(this, "className", "CopyButton");
+    __publicField(this, "clicked", (e) => {
+      const button = e.currentTarget;
+      if (button instanceof HTMLElement) {
+        this.copy(button);
+      }
     });
-    i(this, "keydown", (t) => {
-      if (t.key === " " || t.key === "Enter") {
-        const n = t.currentTarget;
-        n instanceof HTMLElement && this.copy(n);
+    __publicField(this, "keydown", (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        const button = e.currentTarget;
+        if (button instanceof HTMLElement) {
+          this.copy(button);
+        }
       }
     });
-    i(this, "focused", (t) => {
-      t.currentTarget.addEventListener("keydown", this.keydown);
+    __publicField(this, "focused", (e) => {
+      e.currentTarget.addEventListener("keydown", this.keydown);
     });
-    i(this, "blurred", (t) => {
-      t.currentTarget.removeEventListener("keydown", this.keydown);
+    __publicField(this, "blurred", (e) => {
+      e.currentTarget.removeEventListener("keydown", this.keydown);
     });
-    i(this, "copied", (t) => {
-      this.icon.setAttribute("color", "success"), this.icon.setAttribute("name", "check"), this.tooltip.setAttribute("content", this.labelSuccess || "Copied"), setTimeout(() => {
-        this.icon.removeAttribute("color"), this.icon.setAttribute("name", "clipboard"), this.tooltip.setAttribute("content", this.label || "Copy");
+    __publicField(this, "copied", (e) => {
+      this.icon.setAttribute("color", "success");
+      this.icon.setAttribute("name", "check");
+      this.tooltip.setAttribute("content", this.labelSuccess || "Copied");
+      setTimeout(() => {
+        this.icon.removeAttribute("color");
+        this.icon.setAttribute("name", "clipboard");
+        this.tooltip.setAttribute("content", this.label || "Copy");
       }, this.timeout);
     });
     this.timeout = 1e3;
   }
-  set value(t) {
-    this.setAttribute("value", t);
+  set value(value) {
+    this.setAttribute("value", value);
   }
   get value() {
     return this.getAttribute("value") || "";
   }
   static get cssStyleSheet() {
-    return b;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -72,33 +98,55 @@ class y extends h {
     this.isShadowRoot = "open";
   }
   draw() {
-    let t = document.createDocumentFragment(), n = document.createElement("wj-tooltip");
-    n.setAttribute("offset", "5"), n.setAttribute("content", this.label || "Copy");
-    let r = document.createElement("wj-icon");
-    return r.setAttribute("name", "clipboard"), n.appendChild(r), t.appendChild(n), this.tooltip = n, this.icon = r, t;
+    let fragment = document.createDocumentFragment();
+    let tooltip = document.createElement("wj-tooltip");
+    tooltip.setAttribute("offset", "5");
+    tooltip.setAttribute("content", this.label || "Copy");
+    let icon = document.createElement("wj-icon");
+    icon.setAttribute("name", "clipboard");
+    tooltip.appendChild(icon);
+    fragment.appendChild(tooltip);
+    this.tooltip = tooltip;
+    this.icon = icon;
+    return fragment;
   }
   afterDraw() {
-    s.addListener(this, "click", null, this.clicked), s.addListener(this, "focus", null, this.focused), s.addListener(this, "blur", null, this.blurred), s.addListener(this, "wj:copy-button", null, this.copied);
+    event.addListener(this, "click", null, this.clicked);
+    event.addListener(this, "focus", null, this.focused);
+    event.addListener(this, "blur", null, this.blurred);
+    event.addListener(this, "wj:copy-button", null, this.copied);
   }
-  async copy(t) {
-    const n = this.getAttribute("for"), r = this.getAttribute("value");
-    if (t.getAttribute("aria-disabled") !== "true") {
-      if (r)
-        await u(r), s.dispatchCustomEvent(this, "wj:copy-button");
-      else if (n) {
-        const c = "getRootNode" in Element.prototype ? t.getRootNode() : t.ownerDocument;
-        if (!(c instanceof Document || "ShadowRoot" in window && c instanceof ShadowRoot))
-          return;
-        const a = c.getElementById(n);
-        a && (await this.copyTarget(a), s.dispatchCustomEvent(this, "wj:copy-button"));
+  async copy(button) {
+    const id = this.getAttribute("for");
+    const text = this.getAttribute("value");
+    if (button.getAttribute("aria-disabled") === "true") {
+      return;
+    }
+    if (text) {
+      await copyText(text);
+      event.dispatchCustomEvent(this, "wj:copy-button");
+    } else if (id) {
+      const root = "getRootNode" in Element.prototype ? button.getRootNode() : button.ownerDocument;
+      if (!(root instanceof Document || "ShadowRoot" in window && root instanceof ShadowRoot))
+        return;
+      const node = root.getElementById(id);
+      if (node) {
+        await this.copyTarget(node);
+        event.dispatchCustomEvent(this, "wj:copy-button");
       }
     }
   }
-  copyTarget(t) {
-    return t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof m ? u(t.value) : t instanceof HTMLAnchorElement && t.hasAttribute("href") ? u(t.href) : l(t);
+  copyTarget(content) {
+    if (content instanceof HTMLInputElement || content instanceof HTMLTextAreaElement || content instanceof Input) {
+      return copyText(content.value);
+    } else if (content instanceof HTMLAnchorElement && content.hasAttribute("href")) {
+      return copyText(content.href);
+    } else {
+      return copyNode(content);
+    }
   }
 }
-customElements.get("wj-copy-button") || window.customElements.define("wj-copy-button", y);
+customElements.get("wj-copy-button") || window.customElements.define("wj-copy-button", CopyButton);
 export {
-  y as CopyButton
+  CopyButton
 };

package/dist/wj-dialog.js

@@ -1,63 +1,89 @@
-var c = Object.defineProperty;
-var b = (e, a, t) => a in e ? c(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
-var h = (e, a, t) => (b(e, typeof a != "symbol" ? a + "" : a, t), t);
-import u, { WjElementUtils as f } 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, { WjElementUtils } from "./wj-element.js";
 import "./wj-store.js";
-const v = `:host{--wj-dialog-width: 600px;--wj-dialog-height: 600px;--wj-dialog-border-radius: var(--wj-border-radius-large);--wj-dialog-border-width: var(--wj-border-width);--wj-dialog-border-style: var(--wj-border-style);--wj-dialog-border-color: var(--wj-border-color);--wj-dialog-margin-top: auto;--wj-dialog-margin-start: auto;--wj-dialog-margin-end: auto;--wj-dialog-margin-bottom: auto}:host .close{margin-left:auto}:host .modal-content{border-radius:3px;box-shadow:none}:host .dialog-header{position:relative;border-bottom:0;padding-inline:var(--wj-dialog-padding, 1rem);padding-top:var(--wj-dialog-padding, 1rem);padding-bottom:var(--wj-dialog-padding, 0);display:flex;align-items:center}:host .dialog-header span{font-family:var(--wj-font-family-secondary);font-size:10.5px;text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}:host .dialog-content{box-shadow:none;padding-inline:var(--wj-dialog-padding, 1rem);white-space:normal;z-index:1}:host .dialog-footer{display:flex;justify-content:end;border-top:none;box-shadow:none;margin-top:0;padding-inline:var(--wj-dialog-padding-inline, 1rem);padding-top:var(--wj-dialog-padding-top, 1rem);padding-bottom:var(--wj-dialog-padding-bottom, 1rem)}dialog::backdrop{opacity:var(--wj-backdrop-opacity);background-color:var(--wj-backdrop)}:host(.separator) .dialog-header:after{content:"";height:1px;background:rgba(0,0,0,.08);left:var(--wj-dialog-padding, 1rem);right:var(--wj-dialog-padding, 1rem);position:absolute;bottom:0}:host dialog{box-sizing:border-box;transition:all .2s!important;width:var(--wj-dialog-width);height:var(--wj-dialog-height);box-shadow:0 .5rem 1rem #00000026;border-radius:var(--wj-dialog-border-radius);border-width:var(--wj-dialog-border-width);border-style:var(--wj-dialog-border-style);border-color:var(--wj-dialog-border-color);margin-top:var(--wj-dialog-margin-top);margin-bottom:var(--wj-dialog-margin-bottom);margin-inline:var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);padding:0}:host(.stick-up){--wj-dialog-width: 300px !important;--wj-dialog-height: fit-content;--wj-dialog-border-radius: 0 0 8px 8px;--wj-dialog-border-width: 0 1px 1px 1px;--wj-dialog-margin-top: 0;--wj-dialog-translate-from: translateY(-110%);--wj-dialog-template-to: translateX(0)}:host(.slide-up){--wj-dialog-width: 300px !important;--wj-dialog-height: fit-content;--wj-dialog-border-radius: 8px;--wj-dialog-border-width: 1px;--wj-dialog-opacity-from: 0;--wj-dialog-translate-from: scale(.9);--wj-dialog-translate-to: scale(1)}:host(.fill-in){--wj-dialog-width: 100%;--wj-dialog-height: 100%;--wj-dialog-border-radius: 0 0 0 0 !important;--wj-dialog-border-width: 0;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: 0;--wj-dialog-margin-end: 0;--wj-dialog-margin-bottom: 0;--wj-dialog-translate-from: scale(.95);--wj-dialog-translate-to: scale(1)}:host(.fill-in) dialog{min-width:var(--wj-dialog-width);min-height:var(--wj-dialog-height)}:host(.slide-left){--wj-dialog-width: 300px !important;--wj-dialog-height: 100% !important;--wj-dialog-border-radius: 0;--wj-dialog-border-width: 0 1px 0 0;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: 0;--wj-dialog-margin-end: auto;--wj-dialog-margin-bottom: 0}:host(.slide-left) dialog{min-height:var(--wj-dialog-height);--wj-dialog-translate-from: translateX(-110%);--wj-dialog-template-to: translateX(0)}:host(.slide-right){--wj-dialog-width: 300px !important;--wj-dialog-height: 100% !important;--wj-dialog-border-radius: 0;--wj-dialog-border-width: 0 0 0 1px;--wj-dialog-margin-top: 0;--wj-dialog-margin-start: auto;--wj-dialog-margin-end: 0;--wj-dialog-margin-bottom: 0}:host(.slide-right) dialog{min-height:var(--wj-dialog-height);--wj-dialog-translate-from: translateX(110%);--wj-dialog-template-to: translateX(0)}:host(.small){--wj-dialog-width: 300px !important}:host(.medium){--wj-dialog-width: 500px !important}:host(.large){--wj-dialog-width: 600px !important}:host(.ex-large){--wj-dialog-width: 900px !important}dialog[open]{animation:show .5s ease normal}@keyframes show{0%{opacity:var(--wj-dialog-opacity-from, 1);transform:var(--wj-dialog-translate-from)}to{opacity:1;transform:var(--wj-dialog-translate-to)}}
-`;
-class x extends u {
+const styles = '/*\n[ WJ Dialog ]\n*/\n:host {\n  --wj-dialog-width: 600px;\n  --wj-dialog-height: 600px;\n  --wj-dialog-border-radius: var(--wj-border-radius-large);\n  --wj-dialog-border-width: var(--wj-border-width);\n  --wj-dialog-border-style: var(--wj-border-style);\n  --wj-dialog-border-color: var(--wj-border-color);\n  --wj-dialog-margin-top: auto;\n  --wj-dialog-margin-start: auto;\n  --wj-dialog-margin-end: auto;\n  --wj-dialog-margin-bottom: auto;\n}\n:host .close {\n  margin-left: auto;\n}\n:host .modal-content {\n  border-radius: 3px;\n  box-shadow: none;\n}\n:host .dialog-header {\n  position: relative;\n  border-bottom: 0;\n  padding-inline: var(--wj-dialog-padding, 1rem);\n  padding-top: var(--wj-dialog-padding, 1rem);\n  padding-bottom: var(--wj-dialog-padding, 0);\n  display: flex;\n  align-items: center;\n}\n:host .dialog-header span {\n  font-family: var(--wj-font-family-secondary);\n  font-size: 10.5px;\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n}\n:host .dialog-content {\n  box-shadow: none;\n  padding-inline: var(--wj-dialog-padding, 1rem);\n  white-space: normal;\n  z-index: 1;\n}\n:host .dialog-footer {\n  display: flex;\n  justify-content: end;\n  border-top: none;\n  box-shadow: none;\n  margin-top: 0;\n  padding-inline: var(--wj-dialog-padding-inline, 1rem);\n  padding-top: var(--wj-dialog-padding-top, 1rem);\n  padding-bottom: var(--wj-dialog-padding-bottom, 1rem);\n}\n\ndialog::backdrop {\n  opacity: var(--wj-backdrop-opacity);\n  background-color: var(--wj-backdrop);\n}\n\n:host(.separator) .dialog-header:after {\n  content: "";\n  height: 1px;\n  background: rgba(0, 0, 0, 0.08);\n  left: var(--wj-dialog-padding, 1rem);\n  right: var(--wj-dialog-padding, 1rem);\n  position: absolute;\n  bottom: 0;\n}\n\n:host dialog {\n  box-sizing: border-box;\n  transition: all 0.2s !important;\n  width: var(--wj-dialog-width);\n  height: var(--wj-dialog-height);\n  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n  border-radius: var(--wj-dialog-border-radius);\n  border-width: var(--wj-dialog-border-width);\n  border-style: var(--wj-dialog-border-style);\n  border-color: var(--wj-dialog-border-color);\n  margin-top: var(--wj-dialog-margin-top);\n  margin-bottom: var(--wj-dialog-margin-bottom);\n  margin-inline: var(--wj-dialog-margin-start) var(--wj-dialog-margin-end);\n  padding: 0;\n}\n\n:host(.stick-up) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: fit-content;\n  --wj-dialog-border-radius: 0 0 8px 8px;\n  --wj-dialog-border-width: 0 1px 1px 1px;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-translate-from: translateY(-110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.slide-up) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: fit-content;\n  --wj-dialog-border-radius: 8px;\n  --wj-dialog-border-width: 1px;\n  --wj-dialog-opacity-from: 0;\n  --wj-dialog-translate-from: scale(.9);\n  --wj-dialog-translate-to: scale(1);\n}\n\n:host(.fill-in) {\n  --wj-dialog-width: 100%;\n  --wj-dialog-height: 100%;\n  --wj-dialog-border-radius: 0 0 0 0 !important;\n  --wj-dialog-border-width: 0;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: 0;\n  --wj-dialog-margin-end: 0;\n  --wj-dialog-margin-bottom: 0;\n  --wj-dialog-translate-from: scale(.95);\n  --wj-dialog-translate-to: scale(1);\n}\n:host(.fill-in) dialog {\n  min-width: var(--wj-dialog-width);\n  min-height: var(--wj-dialog-height);\n}\n\n:host(.slide-left) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: 100% !important;\n  --wj-dialog-border-radius: 0;\n  --wj-dialog-border-width: 0 1px 0 0;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: 0;\n  --wj-dialog-margin-end: auto;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-left) dialog {\n  min-height: var(--wj-dialog-height);\n  --wj-dialog-translate-from: translateX(-110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.slide-right) {\n  --wj-dialog-width: 300px !important;\n  --wj-dialog-height: 100% !important;\n  --wj-dialog-border-radius: 0;\n  --wj-dialog-border-width: 0 0 0 1px;\n  --wj-dialog-margin-top: 0;\n  --wj-dialog-margin-start: auto;\n  --wj-dialog-margin-end: 0;\n  --wj-dialog-margin-bottom: 0;\n}\n:host(.slide-right) dialog {\n  min-height: var(--wj-dialog-height);\n  --wj-dialog-translate-from: translateX(110%);\n  --wj-dialog-template-to: translateX(0);\n}\n\n:host(.small) {\n  --wj-dialog-width: 300px !important;\n}\n\n:host(.medium) {\n  --wj-dialog-width: 500px !important;\n}\n\n:host(.large) {\n  --wj-dialog-width: 600px !important;\n}\n\n:host(.ex-large) {\n  --wj-dialog-width: 900px !important;\n}\n\ndialog[open] {\n  animation: show 0.5s ease normal;\n}\n\n@keyframes show {\n  from {\n    opacity: var(--wj-dialog-opacity-from, 1);\n    transform: var(--wj-dialog-translate-from);\n  }\n  to {\n    opacity: 1;\n    transform: var(--wj-dialog-translate-to);\n  }\n}';
+class Dialog extends WJElement {
   constructor() {
     super();
-    h(this, "className", "Dialog");
+    __publicField(this, "className", "Dialog");
   }
-  set placement(t) {
-    this.setAttribute("placement", t);
+  set placement(value) {
+    this.setAttribute("placement", value);
   }
   get placement() {
     return this.getAttribute("placement") || "slide-up";
   }
   static get cssStyleSheet() {
-    return v;
+    return styles;
   }
   static get observedAttributes() {
     return [];
   }
   setupAttributes() {
-    this.isShadowRoot = "open", f.setAttributesToElement(this, {
-      test: "test"
+    this.isShadowRoot = "open";
+    WjElementUtils.setAttributesToElement(this, {
+      "test": "test"
     });
   }
-  beforeDraw(t, s, r) {
-  }
-  draw(t, s, r) {
-    let m = document.createDocumentFragment();
-    this.classList.add("modal", "fade", this.placement, r.size);
-    let j = document.createElement("slot"), o = document.createElement("dialog");
-    o.classList.add("modal-dialog");
-    let g = document.createElement("wj-icon");
-    g.setAttribute("name", "x"), g.setAttribute("slot", "icon-only");
-    let i = document.createElement("wj-button");
-    i.setAttribute("fill", "link"), i.setAttribute("size", "small"), i.classList.add("close"), i.addEventListener("click", () => {
-      o.close();
-    }), i.appendChild(g);
-    let d = document.createElement("div");
-    d.setAttribute("part", "header"), d.classList.add("dialog-header"), d.innerHTML = `<span>${this.title}</span>`, d.appendChild(i);
-    let w = document.createElement("slot");
-    w.setAttribute("name", "header"), d.appendChild(w);
-    let n = document.createElement("div");
-    n.setAttribute("part", "body"), n.classList.add("dialog-content"), n.appendChild(j);
-    let l = document.createElement("div");
-    l.setAttribute("part", "footer"), l.classList.add("dialog-footer"), l.innerHTML = "";
-    let p = document.createElement("slot");
-    return p.setAttribute("name", "footer"), l.appendChild(p), o.appendChild(d), o.appendChild(n), o.appendChild(l), m.appendChild(o), this.dialog = o, m;
-  }
-  afterDraw(t, s, r) {
-    r.trigger && document.addEventListener(r.trigger, () => {
-      this.dialog.showModal();
+  beforeDraw(context, store, params) {
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    this.classList.add("modal", "fade", this.placement, params.size);
+    let slot = document.createElement("slot");
+    let dialog = document.createElement("dialog");
+    dialog.classList.add("modal-dialog");
+    let icon = document.createElement("wj-icon");
+    icon.setAttribute("name", "x");
+    icon.setAttribute("slot", "icon-only");
+    let close = document.createElement("wj-button");
+    close.setAttribute("fill", "link");
+    close.setAttribute("size", "small");
+    close.classList.add("close");
+    close.addEventListener("click", () => {
+      dialog.close();
     });
+    close.appendChild(icon);
+    let header = document.createElement("div");
+    header.setAttribute("part", "header");
+    header.classList.add("dialog-header");
+    header.innerHTML = `<span>${this.title}</span>`;
+    header.appendChild(close);
+    let slotHeader = document.createElement("slot");
+    slotHeader.setAttribute("name", "header");
+    header.appendChild(slotHeader);
+    let body = document.createElement("div");
+    body.setAttribute("part", "body");
+    body.classList.add("dialog-content");
+    body.appendChild(slot);
+    let footer = document.createElement("div");
+    footer.setAttribute("part", "footer");
+    footer.classList.add("dialog-footer");
+    footer.innerHTML = "";
+    let slotFooter = document.createElement("slot");
+    slotFooter.setAttribute("name", "footer");
+    footer.appendChild(slotFooter);
+    dialog.appendChild(header);
+    dialog.appendChild(body);
+    dialog.appendChild(footer);
+    fragment.appendChild(dialog);
+    this.dialog = dialog;
+    return fragment;
+  }
+  afterDraw(context, store, params) {
+    if (params.trigger) {
+      document.addEventListener(params.trigger, () => {
+        this.dialog.showModal();
+      });
+    }
   }
 }
-customElements.get("wj-dialog") || window.customElements.define("wj-dialog", x);
+customElements.get("wj-dialog") || window.customElements.define("wj-dialog", Dialog);
 export {
-  x as Dialog
+  Dialog
 };

package/dist/wj-divider.js

@@ -1,17 +1,19 @@
-var a = Object.defineProperty;
-var n = (r, e, t) => e in r ? a(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => (n(r, typeof e != "symbol" ? e + "" : e, t), t);
-import l 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 c = `:host{--wj-border-size: 1px;--wj-divider-border-color: var(--wj-border-color);--wj-divider-border-width: var(--wj-border-size, 1px);--wj-divider-spacing: 0}:host(:not([vertical])){display:block;border-top:solid var(--wj-divider-border-width) var(--wj-divider-border-color);margin:var(--wj-divider-spacing) 0}:host([vertical]){display:inline-block;height:100%;border-left:solid var(--wj-divider-border-width) var(--wj-divider-border-color);margin:0 var(--wj-divider-spacing)}
-`;
-class v extends l {
+const styles = "/*\n[ WJ Divider ]\n*/\n:host {\n  --wj-border-size: 1px;\n  --wj-divider-border-color: var(--wj-border-color);\n  --wj-divider-border-width: var(--wj-border-size, 1px);\n  --wj-divider-spacing: 0;\n}\n\n:host(:not([vertical])) {\n  display: block;\n  border-top: solid var(--wj-divider-border-width) var(--wj-divider-border-color);\n  margin: var(--wj-divider-spacing) 0;\n}\n\n:host([vertical]) {\n  display: inline-block;\n  height: 100%;\n  border-left: solid var(--wj-divider-border-width) var(--wj-divider-border-color);\n  margin: 0 var(--wj-divider-spacing);\n}";
+class Divider extends WJElement {
   constructor() {
     super();
-    o(this, "className", "Divider");
+    __publicField(this, "className", "Divider");
   }
   static get cssStyleSheet() {
-    return c;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,12 +21,16 @@ class v extends l {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, w, m) {
-    let i = document.createDocumentFragment(), d = document.createElement("div"), s = document.createElement("slot");
-    return d.appendChild(s), i.appendChild(d), i;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    let slot = document.createElement("slot");
+    native.appendChild(slot);
+    fragment.appendChild(native);
+    return fragment;
   }
 }
-customElements.get("wj-divider") || window.customElements.define("wj-divider", v);
+customElements.get("wj-divider") || window.customElements.define("wj-divider", Divider);
 export {
-  v as Divider
+  Divider
 };

package/dist/wj-dropdown.js

@@ -1,15 +1,18 @@
-var a = Object.defineProperty;
-var c = (r, t, e) => t in r ? a(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var o = (r, t, e) => (c(r, typeof t != "symbol" ? t + "" : t, e), e);
-import l 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";
-class p extends l {
+class Dropdown extends WJElement {
   constructor() {
     super();
-    o(this, "className", "Dropdown");
+    __publicField(this, "className", "Dropdown");
   }
-  set trigger(e) {
-    this.setAttribute("trigger", e);
+  set trigger(value) {
+    this.setAttribute("trigger", value);
   }
   get trigger() {
     return this.getAttribute("trigger") || "click";
@@ -23,17 +26,26 @@ class p extends l {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, d, u) {
-    let n = document.createDocumentFragment();
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
     this.classList.add("wj-placement", "wj-" + this.placement || "wj-start");
-    let i = document.createElement("div");
-    i.setAttribute("part", "native"), i.classList.add("native-dropdown");
-    let s = document.createElement("wj-popup");
-    return s.setAttribute("placement", this.placement), s.setAttribute("offset", this.offset), s.setAttribute("manual", ""), s.innerHTML = `<slot name="trigger" slot="anchor"></slot>
-            <slot></slot>`, this.trigger === "click" && s.setAttribute("manual", ""), i.appendChild(s), n.appendChild(i), n;
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-dropdown");
+    let popup = document.createElement("wj-popup");
+    popup.setAttribute("placement", this.placement);
+    popup.setAttribute("offset", this.offset);
+    popup.setAttribute("manual", "");
+    popup.innerHTML = `<slot name="trigger" slot="anchor"></slot>
+            <slot></slot>`;
+    if (this.trigger === "click")
+      popup.setAttribute("manual", "");
+    native.appendChild(popup);
+    fragment.appendChild(native);
+    return fragment;
   }
 }
-customElements.get("wj-dropdown") || window.customElements.define("wj-dropdown", p);
+customElements.get("wj-dropdown") || window.customElements.define("wj-dropdown", Dropdown);
 export {
-  p as Dropdown
+  Dropdown
 };