wj-elements 0.0.2 → 0.0.4

package/dist/wj-toast.js

@@ -1,113 +1,59 @@
-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 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 p = (i, t, e) => (c(i, typeof t != "symbol" ? t + "" : t, e), e);
+import m from "./wj-element.js";
 import "./wj-store.js";
-const simple = (notification, alert, options) => {
-  notification.classList.add("pgn-simple");
-  alert.innerHTML = "<div>" + options.message + "</div>";
-  if (options.showClose) {
-    alert.appendChild(close());
-  }
-};
-const flip = (notification, alert, options) => {
-  notification.classList.add("pgn-flip");
-  alert.innerHTML = "<span>" + options.message + "</span>";
-  if (options.showClose) {
-    alert.appendChild(close());
-  }
-};
-const circle = (notification, alert, options) => {
-  notification.classList.add("pgn-circle");
-  let title = "";
-  let message = "";
-  if (options.title)
-    title = `<p><b>${options.title}</b></p>`;
-  if (options.message)
-    message = `<p>${options.message}</p>`;
-  alert.innerHTML = `<wj-avatar>
+const l = (i, t, e) => {
+  i.classList.add("pgn-simple"), t.innerHTML = "<div>" + e.message + "</div>", e.showClose && t.appendChild(a());
+}, f = (i, t, e) => {
+  i.classList.add("pgn-flip"), t.innerHTML = "<span>" + e.message + "</span>", e.showClose && t.appendChild(a());
+}, b = (i, t, e) => {
+  i.classList.add("pgn-circle");
+  let r = "", n = "";
+  e.title && (r = `<p><b>${e.title}</b></p>`), e.message && (n = `<p>${e.message}</p>`), t.innerHTML = `<wj-avatar>
       <img alt="Silhouette of a person's head" src="/assets/img/avatar.svg" />
     </wj-avatar>
     <div>
-      ${title + message}
-  </div>`;
-  if (options.showClose) {
-    alert.appendChild(close());
-  }
-};
-const bar = (notification, alert, options) => {
-  notification.classList.add("pgn-bar");
-  alert.classList.add("alert-" + options.type);
-  alert.innerHTML = "<div>" + options.message + "</div>";
-  if (options.showClose) {
-    alert.appendChild(close());
-  }
-};
-const close = () => {
-  let icon = document.createElement("wj-icon");
-  icon.setAttribute("name", "x");
-  icon.setAttribute("slot", "icon-only");
-  let close2 = document.createElement("wj-button");
-  close2.setAttribute("fill", "link");
-  close2.setAttribute("size", "small");
-  close2.classList.add("close");
-  close2.appendChild(icon);
-  return close2;
-};
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ TOAST ]\n*/\n:host {\n  position: fixed;\n  z-index: 999;\n}\n:host([data-position$=-left]) {\n  left: 0;\n}\n:host([data-position$=-right]) {\n  right: 0;\n}\n:host([data-position^=top-]) {\n  top: 0;\n}\n:host([data-position^=bottom-]) {\n  bottom: 0;\n}\n:host([data-position=top]) {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n:host([data-position=bottom]) {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.pgn {\n  position: relative;\n  margin: 10px;\n}\n.pgn .alert {\n  margin: 0;\n  margin-bottom: 4px;\n}\n/* Simple\n------------------------------------\n*/\n.pgn-simple .alert {\n  padding-top: 13px;\n  padding-bottom: 13px;\n  max-width: 500px;\n  animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  max-height: 250px;\n  overflow: hidden;\n}\n/* Bar\n------------------------------------\n*/\n.pgn-bar {\n  overflow: hidden;\n  margin: 0;\n}\n.pgn-bar .alert {\n  border-radius: 0;\n  padding-top: 13px;\n  padding-bottom: 13px;\n  max-height: 91px;\n}\n:host([data-position=top]) .pgn-bar .alert {\n  animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: slideInFromTop 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  transform-origin: top left;\n  -webkit-transform-origin: top left;\n}\n:host([data-position=bottom]) .pgn-bar .alert {\n  animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: slideInFromBottom 0.5s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  transform-origin: bottom left;\n  -webkit-transform-origin: bottom left;\n}\n.pgn-bar .alert span {\n  opacity: 0;\n  animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n  -webkit-animation: fadeIn 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;\n}\n@keyframes slideInFromTop {\n  0% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes slideInFromTop {\n  0% {\n    -webkit-transform: translateY(-100%);\n  }\n  100% {\n    -webkit-transform: translateY(0);\n  }\n}\n@keyframes slideInFromBottom {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes slideInFromBottom {\n  0% {\n    -webkit-transform: translateY(100%);\n  }\n  100% {\n    -webkit-transform: translateY(0);\n  }\n}\n/* Circle\n------------------------------------\n*/\n.pgn-circle .alert {\n  margin-bottom: 10px;\n  border-radius: 300px;\n  animation: fadeInCircle 0.3s ease forwards, resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n  -webkit-animation: fadeInCircle 0.3s ease forwards, resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;\n  height: 48px;\n  overflow: hidden;\n  padding: 6px 55px 6px 6px;\n  -webkit-transform: translateZ(0);\n  position: relative;\n  display: flex;\n}\n:host[data-position$=-right] .pgn-circle .alert {\n  float: right;\n}\n:host[data-position$=-left] .pgn-circle .alert {\n  float: left;\n}\n:host[data-position^=bottom-] .pgn-circle .alert {\n  margin-bottom: 20px;\n}\nwj-avatar:first-child {\n  margin-right: 8px;\n}\n.pgn-circle .alert .close {\n  margin-top: -12px;\n  position: absolute;\n  right: 18px;\n  top: 50%;\n  opacity: 0;\n  animation: fadeIn 0.3s 0.5s ease forwards;\n  -webkit-animation: fadeIn 0.3s 0.5s ease forwards;\n}\n.pgn-circle .alert p {\n  margin: 0;\n}\n.pgn-circle .alert > div {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.pgn-circle .alert > div > div {\n  display: table-cell;\n  vertical-align: middle;\n}\n@keyframes fadeInCircle {\n  0% {\n    opacity: 0;\n    width: 60px;\n  }\n  100% {\n    opacity: 1;\n    width: 60px;\n  }\n}\n@-webkit-keyframes fadeInCircle {\n  0% {\n    opacity: 0;\n    width: 60px;\n  }\n  100% {\n    opacity: 1;\n    width: 60px;\n  }\n}\n@keyframes resizeCircle {\n  0% {\n    width: 60px;\n  }\n  100% {\n    width: 300px;\n  }\n}\n@-webkit-keyframes resizeCircle {\n  0% {\n    width: 60px;\n  }\n  100% {\n    width: 300px;\n  }\n}\n/* Flip\n------------------------------------\n*/\n:host[data-position^=bottom-] .pgn-flip .alert {\n  -webkit-transform-origin: 50% 100%;\n  transform-origin: 50% 100%;\n}\n.pgn-flip .alert {\n  -webkit-transform-origin: 50% 0%;\n  transform-origin: 50% 0%;\n  -webkit-animation-name: flipInX;\n  animation-name: flipInX;\n  -webkit-animation-duration: 0.8s;\n  animation-duration: 0.8s;\n  border-radius: 0;\n  padding: 25px 35px;\n  max-width: 500px;\n  max-height: 250px;\n  overflow: hidden;\n}\n@-webkit-keyframes flipInX {\n  0% {\n    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n    -webkit-transition-timing-function: ease-in;\n  }\n  40% {\n    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n    -webkit-transition-timing-function: ease-out;\n  }\n  60% {\n    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n    -webkit-transition-timing-function: ease-in;\n    opacity: 1;\n  }\n  80% {\n    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n    -webkit-transition-timing-function: ease-out;\n  }\n  100% {\n    -webkit-transform: perspective(400px);\n  }\n}\n@keyframes flipInX {\n  0% {\n    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n    transform: perspective(400px) rotate3d(1, 0, 0, -90deg);\n    -webkit-transition-timing-function: ease-in;\n    transition-timing-function: ease-in;\n  }\n  40% {\n    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n    transform: perspective(400px) rotate3d(1, 0, 0, 20deg);\n    -webkit-transition-timing-function: ease-out;\n    transition-timing-function: ease-out;\n  }\n  60% {\n    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n    transform: perspective(400px) rotate3d(1, 0, 0, -10deg);\n    -webkit-transition-timing-function: ease-in;\n    transition-timing-function: ease-in;\n    opacity: 1;\n  }\n  80% {\n    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n    transform: perspective(400px) rotate3d(1, 0, 0, 5deg);\n    -webkit-transition-timing-function: ease-out;\n    transition-timing-function: ease-out;\n  }\n  100% {\n    -webkit-transform: perspective(400px);\n    transform: perspective(400px);\n  }\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-webkit-keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n/* Pages Notification customizations */\n:host([data-position=top]) {\n  top: 60px;\n  left: 0;\n}\n:host([data-position=bottom]) {\n  left: 0;\n}\n:host([data-position$=-left]) {\n  left: 0;\n  right: auto;\n}\n:host([data-position^=top-]) {\n  bottom: auto;\n}\n:host {\n  z-index: 900;\n}\n@media (max-width: 979px) {\n  body .pgn-wrapper[data-position=top] {\n    left: 0 !important;\n  }\n  body .pgn-wrapper[data-position=bottom] {\n    left: 0 !important;\n  }\n}\n@media (max-width: 767px) {\n  body .pgn-wrapper[data-position$=-left],\n  body .pgn-wrapper[data-position$=-right] {\n    left: 10px !important;\n    right: 10px !important;\n  }\n  body .pgn-wrapper[data-position$=-right] .alert,\n  body .pgn-wrapper[data-position$=-left] .alert {\n    max-width: 100%;\n    width: 100%;\n  }\n}\n.alert {\n  background-image: none;\n  box-shadow: none;\n  text-shadow: none;\n  padding: 9px 19px 9px 15px;\n  border-radius: 3px;\n  font-size: 13px;\n  border-width: 0;\n  -webkit-transition: all 0.2s linear 0s;\n  transition: all 0.2s linear 0s;\n  display: flex;\n  align-items: center;\n}\n.alert.bordered {\n  border-width: 1px;\n}\n.alert .link {\n  color: #ce8f22;\n  font-weight: bold;\n}\n.alert .alert-heading {\n  color: #ce8f22 !important;\n  margin-bottom: 5px;\n  font-weight: 600;\n}\n.alert .btn-small {\n  position: relative;\n  top: -3.5px;\n}\n.alert .button-set .btn {\n  position: relative;\n  top: 8px;\n}\n/* Alert : Color Options\n------------------------------------\n*/\n.alert-danger,\n.alert-error,\n.alert-danger.btn,\n.alert-error.btn {\n  background-color: #fde2da !important;\n  color: #900f17 !important;\n  border-color: rgba(144, 15, 23, 0.24) !important;\n}\n.alert-danger .close,\n.alert-error .close,\n.alert-danger.btn .close,\n.alert-error.btn .close {\n  background-position: -95px -10px !important;\n}\n.alert-warning {\n  background-color: #fffde1;\n  color: #aa7918;\n  border-color: rgba(170, 121, 24, 0.24);\n}\n.alert-info {\n  background-color: #d3eeff;\n  color: #00318e;\n  border-color: rgba(0, 49, 142, 0.24);\n}\n.alert-info .close {\n  background-position: -67px -10px !important;\n}\n.alert-success, .alert-success.btn {\n  background-color: #d6f7f0 !important;\n  color: #04733e !important;\n  border-color: rgba(4, 115, 62, 0.24) !important;\n}\n.alert-success .close, .alert-success.btn .close {\n  background-position: -38px -10px !important;\n}\n.alert-default {\n  background-color: #fff;\n  color: #4b4b4b;\n  border-color: #e0e0e0;\n}\n.alert-default .close {\n  background-position: -67px -10px !important;\n}";
-class Toast extends WJElement {
+      ${r + n}
+  </div>`, e.showClose && t.appendChild(a());
+}, g = (i, t, e) => {
+  i.classList.add("pgn-bar"), t.classList.add("alert-" + e.type), t.innerHTML = "<div>" + e.message + "</div>", e.showClose && t.appendChild(a());
+}, a = () => {
+  let i = document.createElement("wj-icon");
+  i.setAttribute("name", "x"), i.setAttribute("slot", "icon-only");
+  let t = document.createElement("wj-button");
+  return t.setAttribute("fill", "link"), t.setAttribute("size", "small"), t.classList.add("close"), t.appendChild(i), t;
+}, h = `/*!
+* direction.scss
+*/:host{position:fixed;z-index:999}:host([data-position$=-left]){left:0}:host([data-position$=-right]){right:0}:host([data-position^=top-]){top:0}:host([data-position^=bottom-]){bottom:0}:host([data-position=top]){top:0;left:0;right:0}:host([data-position=bottom]){bottom:0;left:0;right:0}.pgn{position:relative;margin:10px}.pgn .alert{margin:0 0 4px}.pgn-simple .alert{padding-top:13px;padding-bottom:13px;max-width:500px;animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;max-height:250px;overflow:hidden}.pgn-bar{overflow:hidden;margin:0}.pgn-bar .alert{border-radius:0;padding-top:13px;padding-bottom:13px;max-height:91px}:host([data-position=top]) .pgn-bar .alert{animation:slideInFromTop .5s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:slideInFromTop .5s cubic-bezier(.05,.74,.27,.99) forwards;transform-origin:top left;-webkit-transform-origin:top left}:host([data-position=bottom]) .pgn-bar .alert{animation:slideInFromBottom .5s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:slideInFromBottom .5s cubic-bezier(.05,.74,.27,.99) forwards;transform-origin:bottom left;-webkit-transform-origin:bottom left}.pgn-bar .alert span{opacity:0;animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards}@keyframes slideInFromTop{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@-webkit-keyframes slideInFromTop{0%{-webkit-transform:translateY(-100%)}to{-webkit-transform:translateY(0)}}@keyframes slideInFromBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideInFromBottom{0%{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}.pgn-circle .alert{margin-bottom:10px;border-radius:300px;animation:fadeInCircle .3s ease forwards,resizeCircle .3s .4s cubic-bezier(.25,.25,.4,1.6) forwards;-webkit-animation:fadeInCircle .3s ease forwards,resizeCircle .3s .4s cubic-bezier(.25,.25,.4,1.6) forwards;height:48px;overflow:hidden;padding:6px 55px 6px 6px;-webkit-transform:translateZ(0);position:relative;display:flex}:host[data-position$=-right] .pgn-circle .alert{float:right}:host[data-position$=-left] .pgn-circle .alert{float:left}:host[data-position^=bottom-] .pgn-circle .alert{margin-bottom:20px}wj-avatar:first-child{margin-right:8px}.pgn-circle .alert .close{margin-top:-12px;position:absolute;right:18px;top:50%;opacity:0;animation:fadeIn .3s .5s ease forwards;-webkit-animation:fadeIn .3s .5s ease forwards}.pgn-circle .alert p{margin:0}.pgn-circle .alert>div{display:flex;flex-direction:column;justify-content:center}.pgn-circle .alert>div>div{display:table-cell;vertical-align:middle}@keyframes fadeInCircle{0%{opacity:0;width:60px}to{opacity:1;width:60px}}@-webkit-keyframes fadeInCircle{0%{opacity:0;width:60px}to{opacity:1;width:60px}}@keyframes resizeCircle{0%{width:60px}to{width:300px}}@-webkit-keyframes resizeCircle{0%{width:60px}to{width:300px}}:host[data-position^=bottom-] .pgn-flip .alert{-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.pgn-flip .alert{-webkit-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-animation-name:flipInX;animation-name:flipInX;-webkit-animation-duration:.8s;animation-duration:.8s;border-radius:0;padding:25px 35px;max-width:500px;max-height:250px;overflow:hidden}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-90deg);-webkit-transition-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,20deg);-webkit-transition-timing-function:ease-out}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-10deg);-webkit-transition-timing-function:ease-in;opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,5deg);-webkit-transition-timing-function:ease-out}to{-webkit-transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-90deg);transform:perspective(400px) rotateX(-90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,20deg);transform:perspective(400px) rotateX(20deg);-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-10deg);transform:perspective(400px) rotateX(-10deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,5deg);transform:perspective(400px) rotateX(5deg);-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host([data-position=top]){top:60px;left:0}:host([data-position=bottom]){left:0}:host([data-position$=-left]){left:0;right:auto}:host([data-position^=top-]){bottom:auto}:host{z-index:900}@media (max-width: 979px){body .pgn-wrapper[data-position=top],body .pgn-wrapper[data-position=bottom]{left:0!important}}@media (max-width: 767px){body .pgn-wrapper[data-position$=-left],body .pgn-wrapper[data-position$=-right]{left:10px!important;right:10px!important}body .pgn-wrapper[data-position$=-right] .alert,body .pgn-wrapper[data-position$=-left] .alert{max-width:100%;width:100%}}.alert{background-image:none;box-shadow:none;text-shadow:none;padding:9px 19px 9px 15px;border-radius:3px;font-size:13px;border-width:0;-webkit-transition:all .2s linear 0s;transition:all .2s linear 0s;display:flex;align-items:center}.alert.bordered{border-width:1px}.alert .link{color:#ce8f22;font-weight:700}.alert .alert-heading{color:#ce8f22!important;margin-bottom:5px;font-weight:600}.alert .btn-small{position:relative;top:-3.5px}.alert .button-set .btn{position:relative;top:8px}.alert-danger,.alert-error,.alert-danger.btn,.alert-error.btn{background-color:#fde2da!important;color:#900f17!important;border-color:#900f173d!important}.alert-danger .close,.alert-error .close,.alert-danger.btn .close,.alert-error.btn .close{background-position:-95px -10px!important}.alert-warning{background-color:#fffde1;color:#aa7918;border-color:#aa79183d}.alert-info{background-color:#d3eeff;color:#00318e;border-color:#00318e3d}.alert-info .close{background-position:-67px -10px!important}.alert-success,.alert-success.btn{background-color:#d6f7f0!important;color:#04733e!important;border-color:#04733e3d!important}.alert-success .close,.alert-success.btn .close{background-position:-38px -10px!important}.alert-default{background-color:#fff;color:#4b4b4b;border-color:#e0e0e0}.alert-default .close{background-position:-67px -10px!important}
+`;
+class w extends m {
   constructor() {
     super();
-    __publicField(this, "className", "Toast");
+    p(this, "className", "Toast");
   }
   static get cssStyleSheet() {
-    return styles;
+    return h;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let options = {
+  draw(e, r, n) {
+    let s = document.createDocumentFragment(), o = {
       message: "Záznam bol úspešne uložený.",
       // onClosed: function onClosed(),
       // onShown: function onShown(),
       position: this.position,
-      showClose: true,
+      showClose: !0,
       style: this.design || "simple",
       timeout: this.duration || 4e3,
       type: this.type || "success",
       title: this.title || "John Doe"
     };
-    this.container = document.querySelector("body");
-    this.notification = document.createElement("div");
-    this.notification.classList.add("pgn", "push-on-sidebar-open");
-    this.classList.add("pgn-wrapper");
-    this.setAttribute("data-position", options.position);
-    this.alert = document.createElement("div");
-    this.alert.classList.add("alert");
-    this.alert.classList.add("alert-" + options.type);
-    if (options.style == "bar") {
-      bar(this.notification, this.alert, options);
-    } else if (options.style == "flip") {
-      flip(this.notification, this.alert, options);
-    } else if (options.style == "circle") {
-      circle(this.notification, this.alert, options);
-    } else if (options.style == "simple") {
-      simple(this.notification, this.alert, options);
-    } else {
-      simple(this.notification, this.alert, options);
-    }
-    console.log("alert", this.alert);
-    this.notification.appendChild(this.alert);
-    fragment.appendChild(this.notification);
-    return fragment;
+    return this.container = document.querySelector("body"), this.notification = document.createElement("div"), this.notification.classList.add("pgn", "push-on-sidebar-open"), this.classList.add("pgn-wrapper"), this.setAttribute("data-position", o.position), this.alert = document.createElement("div"), this.alert.classList.add("alert"), this.alert.classList.add("alert-" + o.type), o.style == "bar" ? g(this.notification, this.alert, o) : o.style == "flip" ? f(this.notification, this.alert, o) : o.style == "circle" ? b(this.notification, this.alert, o) : o.style == "simple" ? l(this.notification, this.alert, o) : l(this.notification, this.alert, o), console.log("alert", this.alert), this.notification.appendChild(this.alert), s.appendChild(this.notification), s;
   }
 }
-customElements.get("wj-toast") || window.customElements.define("wj-toast", Toast);
+customElements.get("wj-toast") || window.customElements.define("wj-toast", w);
 export {
-  Toast
+  w as Toast
 };

package/dist/wj-toggle.js

@@ -1,16 +1,16 @@
-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 d = Object.defineProperty;
+var g = (o, e, r) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r;
+var c = (o, e, r) => (g(o, typeof e != "symbol" ? e + "" : e, r), r);
+import b from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Badge ]\n*/\n:host(.wj-color-primary) {\n  --wj-toggle-color-base: linear-gradient(to right, #7252D3 0%, #845ae0 44%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.04) 97%);\n}\n:host(.wj-color-complete) {\n  --wj-toggle-color-base: linear-gradient(to right, #0072EC 0%, #0f8ff9 44%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.04) 97%);\n}\n:host(.wj-color-success) {\n  --wj-toggle-color-base: linear-gradient(to right, #19AD79 0%, #26bf93 44%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.04) 97%) !important;\n}\n:host(.wj-color-warning) {\n  --wj-toggle-color-base: linear-gradient(to right, #FFd945 0%, #ffe858 44%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.04) 97%);\n}\n:host(.wj-color-danger) {\n  --wj-toggle-color-base: linear-gradient(to right, #D83C31 0%, #e6533c 44%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.04) 97%);\n}\n:host(.wj-color-dark) {\n  --wj-toggle-color-base: linear-gradient(to right, #3B4752 0%, #475b6b 44%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.04) 97%);\n}\n:host {\n  --wj-toggle-color-base: $color-contrast-lowest;\n  --wj-toggle-width: 30px;\n  --wj-toggle-height: 18px;\n  --wj-toggle-border-radius: 50px;\n  --wj-toggle-handle-width: 14px;\n  --wj-toggle-handle-height: 14px;\n  --wj-toggle-handle-border-radius: 9px;\n  --wj-toggle-handle-color: #fff;\n  --wj-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2);\n  --wj-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3);\n}\n.native-toggle {\n  display: flex;\n}\nlabel {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  user-select: none;\n}\nlabel .label-wrapper {\n  width: var(--wj-toggle-width);\n  height: var(--wj-toggle-height);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\nlabel .label-wrapper:before {\n  content: "";\n  position: absolute;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n  top: auto;\n  left: 0;\n  background: var(--wj-toggle-color-base);\n  background-size: 300%;\n  background-position: right;\n  border-radius: var(--wj-toggle-border-radius);\n  border: none;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n  transition: background 310ms, box-shadow 250ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\nlabel .label-wrapper:after {\n  content: "";\n  position: absolute;\n  transform: translateX(0%);\n  background: var(--wj-toggle-handle-color);\n  width: var(--wj-toggle-handle-width);\n  height: var(--wj-toggle-handle-height);\n  border-radius: var(--wj-toggle-handle-border-radius);\n  top: auto;\n  left: 2px;\n  box-shadow: var(--wj-toggle-handle-shadow);\n  transition: transform, box-shadow;\n  transition-duration: 250ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\ninput[type=checkbox][disabled] + label {\n  cursor: not-allowed !important;\n  color: #4b4b4b;\n  opacity: 0.58;\n}\ninput[type=checkbox][disabled] + label:before {\n  cursor: not-allowed !important;\n}\ninput[type=checkbox] {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\ninput[type=checkbox]:checked + label .label-wrapper:before {\n  background-position: left;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n}\ninput[type=checkbox]:checked + label .label-wrapper:after {\n  transform: translateX(calc(var(--wj-toggle-width) - var(--wj-toggle-handle-width) - 4px));\n  box-shadow: var(--wj-toggle-handle-shadow-checked);\n}\ninput[type=checkbox]:focus + label .label-wrapper:before {\n  outline: none !important;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 0px #78c8fe;\n}\ninput[type=checkbox][disabled]:active + label .label-wrapper:after {\n  transform: scaleX(1.1);\n  transform-origin: center left;\n  transition: transform step-start;\n}\ninput[type=checkbox]:checked[disabled]:active + label .label-wrapper:after {\n  transform: translateX(calc(100% - 6px)) scaleX(1.1);\n  transform-origin: center right;\n}\ninput[type=checkbox]:hover:active + label .label-wrapper:before {\n  background-color: transparent;\n}\n/* hide focus style if not from keyboard navigation */\n:host .text {\n  margin-inline: 0.5rem 0;\n}';
-class Toggle extends WJElement {
+const p = `/*!
+* direction.scss
+*/:host(.wj-color-primary){--wj-toggle-color-base: linear-gradient(to right, #7252D3 0%, #845ae0 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host(.wj-color-complete){--wj-toggle-color-base: linear-gradient(to right, #0072EC 0%, #0f8ff9 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host(.wj-color-success){--wj-toggle-color-base: linear-gradient(to right, #19AD79 0%, #26bf93 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%) !important}:host(.wj-color-warning){--wj-toggle-color-base: linear-gradient(to right, #FFd945 0%, #ffe858 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host(.wj-color-danger){--wj-toggle-color-base: linear-gradient(to right, #D83C31 0%, #e6533c 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host(.wj-color-dark){--wj-toggle-color-base: linear-gradient(to right, #3B4752 0%, #475b6b 44%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .04) 97%)}:host{--wj-toggle-color-base: $color-contrast-lowest;--wj-toggle-width: 30px;--wj-toggle-height: 18px;--wj-toggle-border-radius: 50px;--wj-toggle-handle-width: 14px;--wj-toggle-handle-height: 14px;--wj-toggle-handle-border-radius: 9px;--wj-toggle-handle-color: #fff;--wj-toggle-handle-shadow: 1px 0 1px .5px rgba(0,0,0,.12), 2px 4px 6px rgba(0,0,0,.2);--wj-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,.08), -3px 3px 6px rgba(0,0,0,.3)}.native-toggle{display:flex}label{display:flex;cursor:pointer;align-items:center;-webkit-user-select:none;user-select:none}label .label-wrapper{width:var(--wj-toggle-width);height:var(--wj-toggle-height);position:relative;display:flex;align-items:center}label .label-wrapper:before{content:"";position:absolute;cursor:pointer;width:100%;height:100%;top:auto;left:0;background:var(--wj-toggle-color-base);background-size:300%;background-position:right;border-radius:var(--wj-toggle-border-radius);border:none;box-shadow:inset 0 0 0 1px #0000001f;transition:background .31s,box-shadow .25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}label .label-wrapper:after{content:"";position:absolute;transform:translate(0);background:var(--wj-toggle-handle-color);width:var(--wj-toggle-handle-width);height:var(--wj-toggle-handle-height);border-radius:var(--wj-toggle-handle-border-radius);top:auto;left:2px;box-shadow:var(--wj-toggle-handle-shadow);transition:transform,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:#4b4b4b;opacity:.58}input[type=checkbox][disabled]+label:before{cursor:not-allowed!important}input[type=checkbox]{position:absolute;z-index:-1;opacity:0}input[type=checkbox]:checked+label .label-wrapper:before{background-position:left;box-shadow:inset 0 0 0 1px #0000001f}input[type=checkbox]:checked+label .label-wrapper:after{transform:translate(calc(var(--wj-toggle-width) - var(--wj-toggle-handle-width) - 4px));box-shadow:var(--wj-toggle-handle-shadow-checked)}input[type=checkbox]:focus+label .label-wrapper:before{outline:none!important;box-shadow:inset 0 0 0 1px #0000001f,0 0 #78c8fe}input[type=checkbox][disabled]:active+label .label-wrapper:after{transform:scaleX(1.1);transform-origin:center left;transition:transform step-start}input[type=checkbox]:checked[disabled]:active+label .label-wrapper:after{transform:translate(calc(100% - 6px)) scaleX(1.1);transform-origin:center right}input[type=checkbox]:hover:active+label .label-wrapper:before{background-color:transparent}:host .text{margin-inline:.5rem 0}
+`;
+class h extends b {
   constructor() {
     super();
-    __publicField(this, "className", "Toggle");
+    c(this, "className", "Toggle");
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -19,43 +19,25 @@ class Toggle extends WJElement {
     return this.hasAttribute("checked");
   }
   static get cssStyleSheet() {
-    return styles;
+    return p;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.classList.add("native-toggle");
-    let input = document.createElement("input");
-    input.setAttribute("part", "input");
-    input.setAttribute("type", "checkbox");
-    input.setAttribute("name", this.name);
-    input.setAttribute("id", "input");
-    let label = document.createElement("label");
-    label.setAttribute("for", "input");
-    let labelWrapper = document.createElement("div");
-    labelWrapper.setAttribute("part", "toggle");
-    labelWrapper.classList.add("label-wrapper");
-    let text = document.createElement("div");
-    text.classList.add("text");
-    text.innerHTML = "<slot></slot>";
-    if (this.color)
-      this.classList.add("wj-color-" + this.color, "wj-color");
-    if (this.checked)
-      input.checked = this.checked;
-    if (this.disabled)
-      input.disabled = this.disabled;
-    element.appendChild(input);
-    element.appendChild(label);
-    label.appendChild(labelWrapper);
-    label.appendChild(text);
-    fragment.appendChild(element);
-    return fragment;
+  draw(r, w, u) {
+    let s = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("native-toggle");
+    let t = document.createElement("input");
+    t.setAttribute("part", "input"), t.setAttribute("type", "checkbox"), t.setAttribute("name", this.name), t.setAttribute("id", "input");
+    let l = document.createElement("label");
+    l.setAttribute("for", "input");
+    let i = document.createElement("div");
+    i.setAttribute("part", "toggle"), i.classList.add("label-wrapper");
+    let n = document.createElement("div");
+    return n.classList.add("text"), n.innerHTML = "<slot></slot>", this.color && this.classList.add("wj-color-" + this.color, "wj-color"), this.checked && (t.checked = this.checked), this.disabled && (t.disabled = this.disabled), a.appendChild(t), a.appendChild(l), l.appendChild(i), l.appendChild(n), s.appendChild(a), s;
   }
 }
-customElements.get("wj-toggle") || window.customElements.define("wj-toggle", Toggle);
+customElements.get("wj-toggle") || window.customElements.define("wj-toggle", h);
 export {
-  Toggle
+  h as Toggle
 };

package/dist/wj-toolbar-action.js

@@ -1,19 +1,19 @@
-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 i = Object.defineProperty;
+var m = (e, t, o) => t in e ? i(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var l = (e, t, o) => (m(e, typeof t != "symbol" ? t + "" : t, o), o);
+import d from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Toolbar ]\n*/\n:host .native-toolbar-action {\n  display: flex;\n}";
-class ToolbarAction extends WJElement {
+const u = `/*!
+* direction.scss
+*/:host .native-toolbar-action{display:flex}
+`;
+class p extends d {
   constructor() {
     super();
-    __publicField(this, "className", "ToolbarAction");
+    l(this, "className", "ToolbarAction");
   }
   static get cssStyleSheet() {
-    return styles;
+    return u;
   }
   static get observedAttributes() {
     return [];
@@ -21,26 +21,15 @@ class ToolbarAction extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let maxItems = +this.maxItems || 0;
-    let actions = this.getActions();
-    let slot = document.createElement("slot");
-    let element = document.createElement("div");
-    element.classList.add("native-toolbar-action");
-    const shouldCollapse = maxItems !== 0 && actions.length > maxItems;
-    if (shouldCollapse) {
-      element = document.createElement("wj-dropdown");
-    }
-    element.appendChild(slot);
-    fragment.appendChild(element);
-    return fragment;
+  draw(o, h, b) {
+    let n = document.createDocumentFragment(), r = +this.maxItems || 0, a = this.getActions(), c = document.createElement("slot"), s = document.createElement("div");
+    return s.classList.add("native-toolbar-action"), r !== 0 && a.length > r && (s = document.createElement("wj-dropdown")), s.appendChild(c), n.appendChild(s), n;
   }
   getActions() {
     return Array.from(this.querySelectorAll("wj-button"));
   }
 }
-customElements.get("wj-toolbar-action") || window.customElements.define("wj-toolbar-action", ToolbarAction);
+customElements.get("wj-toolbar-action") || window.customElements.define("wj-toolbar-action", p);
 export {
-  ToolbarAction
+  p as ToolbarAction
 };

package/dist/wj-toolbar.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 { w as withRouterLinks } from "./router-links-26e4a166.js";
+var s = Object.defineProperty;
+var d = (o, t, e) => t in o ? s(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var l = (o, t, e) => (d(o, typeof t != "symbol" ? t + "" : t, e), e);
+import p from "./wj-element.js";
+import { w as b } from "./router-links-e0087f84.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Toolbar ]\n*/\n:host {\n  --wj-toolbar-backcolor: #fff;\n  --wj-toolbar-min-height: 70px;\n  --wj-toolbar-padding-top: 1rem;\n  --wj-toolbar-padding-bottom: 1rem;\n  --wj-toolbar-padding-inline: 1.5rem;\n  --wj-toolbar-border-color: rgba(33, 33, 33, 0.14);\n  --wj-toolbar-top: 0;\n  width: 100%;\n  height: var(--wj-toolbar-height);\n}\n.native-toolbar {\n  background-color: var(--wj-toolbar-backcolor);\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  border-bottom: 1px solid var(--wj-toolbar-border-color);\n  padding-inline: var(--wj-toolbar-padding-inline);\n  padding-top: var(--wj-toolbar-padding-top);\n  padding-bottom: var(--wj-toolbar-padding-bottom);\n  box-shadow: 0 10px 30px 0 rgba(82, 63, 105, 0.05);\n}\n::slotted {\n  grid-column: span 4;\n}\n::slotted([slot=start]) {\n  margin-right: auto;\n}\n:host([sticky]) {\n  position: sticky;\n  top: var(--wj-toolbar-top);\n  z-index: 999;\n}";
-class Toolbar extends withRouterLinks(WJElement) {
+const c = `/*!
+* direction.scss
+*/:host{--wj-toolbar-backcolor: #fff;--wj-toolbar-min-height: 70px;--wj-toolbar-padding-top: 1rem;--wj-toolbar-padding-bottom: 1rem;--wj-toolbar-padding-inline: 1.5rem;--wj-toolbar-border-color: rgba(33, 33, 33, .14);--wj-toolbar-top: 0;width:100%;height:var(--wj-toolbar-height)}.native-toolbar{background-color:var(--wj-toolbar-backcolor);display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid var(--wj-toolbar-border-color);padding-inline:var(--wj-toolbar-padding-inline);padding-top:var(--wj-toolbar-padding-top);padding-bottom:var(--wj-toolbar-padding-bottom);box-shadow:0 10px 30px #523f690d}::slotted{grid-column:span 4}::slotted([slot=start]){margin-right:auto}:host([sticky]){position:sticky;top:var(--wj-toolbar-top);z-index:999}
+`;
+class m extends b(p) {
   constructor() {
     super();
-    __publicField(this, "className", "Toolbar");
+    l(this, "className", "Toolbar");
   }
   static get cssStyleSheet() {
-    return styles;
+    return c;
   }
   static get observedAttributes() {
     return [];
@@ -22,21 +22,16 @@ class Toolbar extends withRouterLinks(WJElement) {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-toolbar");
-    let start = document.createElement("slot");
-    start.setAttribute("name", "start");
-    let end = document.createElement("slot");
-    end.setAttribute("name", "end");
-    native.appendChild(start);
-    native.appendChild(end);
-    fragment.appendChild(native);
-    return fragment;
+  draw(e, w, g) {
+    let a = document.createDocumentFragment(), r = document.createElement("div");
+    r.classList.add("native-toolbar");
+    let n = document.createElement("slot");
+    n.setAttribute("name", "start");
+    let i = document.createElement("slot");
+    return i.setAttribute("name", "end"), r.appendChild(n), r.appendChild(i), a.appendChild(r), a;
   }
 }
-customElements.get("wj-toolbar") || window.customElements.define("wj-toolbar", Toolbar);
+customElements.get("wj-toolbar") || window.customElements.define("wj-toolbar", m);
 export {
-  Toolbar
+  m as Toolbar
 };

package/dist/wj-tooltip.js

@@ -1,26 +1,25 @@
-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 d = Object.defineProperty;
+var c = (s, e, t) => e in s ? d(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var r = (s, e, t) => (c(s, typeof e != "symbol" ? e + "" : e, t), t);
+import u, { event as p } from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Tooltip ]\n*/\n:host {\n  --arrow-size: 7px;\n  --arrow-color: #000000;\n}\n.native-tooltip {\n  display: block;\n  padding: 0.5rem;\n  color: #FFFFFF;\n  background-color: var(--arrow-color);\n  font-weight: normal;\n  font-size: 0.75rem !important;\n  border-radius: 4px;\n  line-height: 1;\n  box-sizing: border-box;\n  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);\n}\n.arrow {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: black;\n  transform: rotate(45deg);\n}";
-class Tooltip extends WJElement {
+const h = `/*!
+* direction.scss
+*/:host{--arrow-size: 7px;--arrow-color: #000000}.native-tooltip{display:block;padding:.5rem;color:#fff;background-color:var(--arrow-color);font-weight:400;font-size:.75rem!important;border-radius:4px;line-height:1;box-sizing:border-box;box-shadow:0 1px 8px #00000080}.arrow{position:absolute;width:10px;height:10px;background:black;transform:rotate(45deg)}
+`;
+class m extends u {
   constructor() {
     super();
-    __publicField(this, "className", "Tooltip");
-    __publicField(this, "onShow", () => {
-      console.log("show");
-      this.popup.show();
+    r(this, "className", "Tooltip");
+    r(this, "onShow", () => {
+      console.log("show"), this.popup.show();
     });
-    __publicField(this, "onHide", () => {
+    r(this, "onHide", () => {
       this.popup.hide();
     });
   }
   static get cssStyleSheet() {
-    return styles;
+    return h;
   }
   static get observedAttributes() {
     return ["active", "content"];
@@ -28,35 +27,22 @@ class Tooltip extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let popup = document.createElement("wj-popup");
-    popup.setAttribute("placement", this.placement || "top");
-    popup.setAttribute("offset", this.offset || "0");
-    let slot = document.createElement("slot");
-    slot.setAttribute("slot", "anchor");
-    let arrow = document.createElement("div");
-    arrow.classList.add("arrow");
-    arrow.setAttribute("slot", "arrow");
-    let native = document.createElement("div");
-    native.classList.add("native-tooltip");
-    native.innerHTML = this.content;
-    popup.appendChild(slot);
-    popup.appendChild(arrow);
-    popup.appendChild(native);
-    this.slot = slot;
-    this.popup = popup;
-    fragment.appendChild(popup);
-    return fragment;
+  draw(t, w, b) {
+    let l = document.createDocumentFragment(), o = document.createElement("wj-popup");
+    o.setAttribute("placement", this.placement || "top"), o.setAttribute("offset", this.offset || "0");
+    let n = document.createElement("slot");
+    n.setAttribute("slot", "anchor");
+    let i = document.createElement("div");
+    i.classList.add("arrow"), i.setAttribute("slot", "arrow");
+    let a = document.createElement("div");
+    return a.classList.add("native-tooltip"), a.innerHTML = this.content, o.appendChild(n), o.appendChild(i), o.appendChild(a), this.slot = n, this.popup = o, l.appendChild(o), l;
   }
   afterDraw() {
-    let anchorEl = this.slot.assignedElements()[0];
-    console.log(anchorEl);
-    event.addListener(anchorEl, "mouseenter", null, this.onShow);
-    event.addListener(anchorEl, "mouseleave", null, this.onHide);
+    let t = this.slot.assignedElements()[0];
+    console.log(t), p.addListener(t, "mouseenter", null, this.onShow), p.addListener(t, "mouseleave", null, this.onHide);
   }
 }
-customElements.get("wj-tooltip") || window.customElements.define("wj-tooltip", Tooltip);
+customElements.get("wj-tooltip") || window.customElements.define("wj-tooltip", m);
 export {
-  Tooltip
+  m as Tooltip
 };

package/dist/wj-visually-hidden.js

@@ -1,19 +1,19 @@
-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 a = (e, t, n) => t in e ? r(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var i = (e, t, n) => (a(e, typeof t != "symbol" ? t + "" : t, n), n);
+import p from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ VisuallyHidden ]\n*/\n:host(:not(:focus-within)) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  clip: rect(0 0 0 0) !important;\n  clip-path: inset(50%) !important;\n  border: none !important;\n  overflow: hidden !important;\n  white-space: nowrap !important;\n  padding: 0 !important;\n}";
-class VisuallyHidden extends WJElement {
+const d = `/*!
+* direction.scss
+*/:host(:not(:focus-within)){position:absolute!important;width:1px!important;height:1px!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:none!important;overflow:hidden!important;white-space:nowrap!important;padding:0!important}
+`;
+class l extends p {
   constructor() {
     super();
-    __publicField(this, "className", "VisuallyHidden");
+    i(this, "className", "VisuallyHidden");
   }
   static get cssStyleSheet() {
-    return styles;
+    return d;
   }
   static get observedAttributes() {
     return [];
@@ -21,14 +21,12 @@ class VisuallyHidden extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let slot = document.createElement("slot");
-    fragment.appendChild(slot);
-    return fragment;
+  draw(n, m, c) {
+    let o = document.createDocumentFragment(), s = document.createElement("slot");
+    return o.appendChild(s), o;
   }
 }
-customElements.get("wj-visually-hidden") || window.customElements.define("wj-visually-hidden", VisuallyHidden);
+customElements.get("wj-visually-hidden") || window.customElements.define("wj-visually-hidden", l);
 export {
-  VisuallyHidden
+  l as VisuallyHidden
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "files": [
     "./dist"