wj-elements 0.0.11 → 0.0.13

package/dist/wj-toast.js

@@ -1,59 +1,112 @@
-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";
+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 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>
+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>
       <img alt="Silhouette of a person's head" src="/assets/img/avatar.svg" />
     </wj-avatar>
     <div>
-      ${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 {
+      ${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 {
   constructor() {
     super();
-    p(this, "className", "Toast");
+    __publicField(this, "className", "Toast");
   }
   static get cssStyleSheet() {
-    return h;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, r, n) {
-    let s = document.createDocumentFragment(), o = {
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let options = {
       message: "Záznam bol úspešne uložený.",
       // onClosed: function onClosed(),
       // onShown: function onShown(),
       position: this.position,
-      showClose: !0,
+      showClose: true,
       style: this.design || "simple",
       timeout: this.duration || 4e3,
       type: this.type || "success",
       title: this.title || "John Doe"
     };
-    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), this.notification.appendChild(this.alert), s.appendChild(this.notification), s;
+    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);
+    }
+    this.notification.appendChild(this.alert);
+    fragment.appendChild(this.notification);
+    return fragment;
   }
 }
-customElements.get("wj-toast") || window.customElements.define("wj-toast", w);
+customElements.get("wj-toast") || window.customElements.define("wj-toast", Toast);
 export {
-  w as Toast
+  Toast
 };

package/dist/wj-toggle.js

@@ -1,16 +1,16 @@
-var d = Object.defineProperty;
-var p = (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) => (p(o, typeof e != "symbol" ? e + "" : e, r), r);
-import g 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 h = `/*!
-* direction.scss
-*/:host(.wj-color-primary){--wj-toggle-color-base: var(--wj-color-primary)}:host(.wj-color-complete){--wj-toggle-color-base: var(--wj-color-complete)}:host(.wj-color-success){--wj-toggle-color-base: var(--wj-color-success) !important}:host(.wj-color-warning){--wj-toggle-color-base: var(--wj-color-warning)}:host(.wj-color-danger){--wj-toggle-color-base: var(--wj-color-danger)}:host(.wj-color-info){--wj-toggle-color-base: var(--wj-color-info)}:host{--wj-toggle-color-base: var(--wj-color-contrast-3);--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);--switch-duration: .25s;--switch-curve: cubic-bezier(.4,0,.2,1)}.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 calc(var(--switch-duration) + var(--switch-duration) * .24),box-shadow var(--switch-duration);transition-timing-function:var(--switch-curve)}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:var(--switch-duration);transition-timing-function:var(--switch-curve)}input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wj-color-contrast-9);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 b extends g {
+const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ WJ Toggle ]\n*/\n:host(.wj-color-primary) {\n  --wj-toggle-color-base: var(--wj-color-primary);\n}\n:host(.wj-color-complete) {\n  --wj-toggle-color-base: var(--wj-color-complete);\n}\n:host(.wj-color-success) {\n  --wj-toggle-color-base: var(--wj-color-success) !important;\n}\n:host(.wj-color-warning) {\n  --wj-toggle-color-base: var(--wj-color-warning);\n}\n:host(.wj-color-danger) {\n  --wj-toggle-color-base: var(--wj-color-danger);\n}\n:host(.wj-color-info) {\n  --wj-toggle-color-base: var(--wj-color-info);\n}\n:host {\n  --wj-toggle-color-base: var(--wj-color-contrast-3);\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  --switch-duration: 250ms;\n  --switch-curve: cubic-bezier(.4,0,.2,1);\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 calc(var(--switch-duration) + var(--switch-duration) * 0.24), box-shadow var(--switch-duration);\n  transition-timing-function: var(--switch-curve);\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: var(--switch-duration);\n  transition-timing-function: var(--switch-curve);\n}\ninput[type=checkbox][disabled] + label {\n  cursor: not-allowed !important;\n  color: var(--wj-color-contrast-9);\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 0 #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:host .text {\n  margin-inline: 0.5rem 0;\n}';
+class Toggle extends WJElement {
   constructor() {
     super();
-    c(this, "className", "Toggle");
+    __publicField(this, "className", "Toggle");
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -19,25 +19,43 @@ class b extends g {
     return this.hasAttribute("checked");
   }
   static get cssStyleSheet() {
-    return h;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  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;
   }
 }
-customElements.get("wj-toggle") || window.customElements.define("wj-toggle", b);
+customElements.get("wj-toggle") || window.customElements.define("wj-toggle", Toggle);
 export {
-  b as Toggle
+  Toggle
 };

package/dist/wj-toolbar-action.js

@@ -1,19 +1,19 @@
-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";
+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 u = `/*!
-* direction.scss
-*/:host .native-toolbar-action{display:flex}
-`;
-class p extends d {
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ WJ Toolbar Action ]\n*/\n:host .native-toolbar-action {\n  display: flex;\n}";
+class ToolbarAction extends WJElement {
   constructor() {
     super();
-    l(this, "className", "ToolbarAction");
+    __publicField(this, "className", "ToolbarAction");
   }
   static get cssStyleSheet() {
-    return u;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -21,15 +21,26 @@ class p extends d {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  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;
   }
   getActions() {
     return Array.from(this.querySelectorAll("wj-button"));
   }
 }
-customElements.get("wj-toolbar-action") || window.customElements.define("wj-toolbar-action", p);
+customElements.get("wj-toolbar-action") || window.customElements.define("wj-toolbar-action", ToolbarAction);
 export {
-  p as ToolbarAction
+  ToolbarAction
 };

package/dist/wj-toolbar.js

@@ -1,18 +1,20 @@
-var i = Object.defineProperty;
-var s = (o, t, e) => t in o ? i(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var d = (o, t, e) => (s(o, typeof t != "symbol" ? t + "" : t, e), e);
-import b from "./wj-element.js";
-import { w as p } from "./router-links-e0087f84.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 { w as withRouterLinks } from "./router-links-26e4a166.js";
 import "./wj-store.js";
-const m = `:host{--wj-toolbar-background: var(--wj-background);--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: var(--wj-border-color);--wj-toolbar-top: 0;width:100%;height:var(--wj-toolbar-height)}.native-toolbar{background-color:var(--wj-toolbar-background);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 c extends p(b) {
+const styles = "/*\n[ WJ Toolbar ]\n*/\n:host {\n  --wj-toolbar-background: var(--wj-background);\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: var(--wj-border-color);\n  --wj-toolbar-top: 0;\n  width: 100%;\n  height: var(--wj-toolbar-height);\n}\n\n.native-toolbar {\n  background-color: var(--wj-toolbar-background);\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\n::slotted {\n  grid-column: span 4;\n}\n\n::slotted([slot=start]) {\n  margin-right: auto;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--wj-toolbar-top);\n  z-index: 999;\n}";
+class Toolbar extends withRouterLinks(WJElement) {
   constructor() {
     super();
-    d(this, "className", "Toolbar");
+    __publicField(this, "className", "Toolbar");
   }
   static get cssStyleSheet() {
-    return m;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -20,16 +22,21 @@ class c extends p(b) {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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 l = document.createElement("slot");
-    return l.setAttribute("name", "end"), r.appendChild(n), r.appendChild(l), a.appendChild(r), a;
+  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;
   }
 }
-customElements.get("wj-toolbar") || window.customElements.define("wj-toolbar", c);
+customElements.get("wj-toolbar") || window.customElements.define("wj-toolbar", Toolbar);
 export {
-  c as Toolbar
+  Toolbar
 };

package/dist/wj-tooltip.js

@@ -1,23 +1,25 @@
-var p = Object.defineProperty;
-var c = (r, e, t) => e in r ? p(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var s = (r, e, t) => (c(r, typeof e != "symbol" ? e + "" : e, t), t);
-import m, { event as d } from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { event } from "./wj-element.js";
 import "./wj-store.js";
-const u = `:host{--wj-tooltip-arrow-color: var(--wj-color-contrast-11)}.native-tooltip{display:block;padding:.5rem;color:var(--wj-color-contrast-0);background-color:var(--wj-color-contrast-11);font-weight:400;font-size:.75rem!important;border-radius:var(--wj-border-radius-small);line-height:1;box-sizing:border-box;box-shadow:var(--wj-box-shadow-medium)}.arrow{position:absolute;width:10px;height:10px;background:var(--wj-tooltip-arrow-color);transform:rotate(45deg)}
-`;
-class h extends m {
+const styles = "/*\n[ WJ Tooltip ]\n*/\n:host {\n  --wj-tooltip-arrow-color: var(--wj-color-contrast-11);\n}\n\n.native-tooltip {\n  display: block;\n  padding: 0.5rem;\n  color: var(--wj-color-contrast-0);\n  background-color: var(--wj-color-contrast-11);\n  font-weight: normal;\n  font-size: 0.75rem !important;\n  border-radius: var(--wj-border-radius-small);\n  line-height: 1;\n  box-sizing: border-box;\n  box-shadow: var(--wj-box-shadow-medium);\n}\n\n.arrow {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: var(--wj-tooltip-arrow-color);\n  transform: rotate(45deg);\n}";
+class Tooltip extends WJElement {
   constructor() {
     super();
-    s(this, "className", "Tooltip");
-    s(this, "onShow", () => {
+    __publicField(this, "className", "Tooltip");
+    __publicField(this, "onShow", () => {
       this.popup.show();
     });
-    s(this, "onHide", () => {
+    __publicField(this, "onHide", () => {
       this.popup.hide();
     });
   }
   static get cssStyleSheet() {
-    return u;
+    return styles;
   }
   static get observedAttributes() {
     return ["active", "content"];
@@ -25,22 +27,36 @@ class h extends m {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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.mySlot = n, this.popup = o, l.appendChild(o), l;
+  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.mySlot = slot;
+    this.popup = popup;
+    fragment.appendChild(popup);
+    return fragment;
   }
   afterDraw() {
-    let t = this.mySlot.assignedElements()[0];
-    t && (d.addListener(t, "mouseenter", null, this.onShow), d.addListener(t, "mouseleave", null, this.onHide));
+    let anchorEl = this.mySlot.assignedElements()[0];
+    if (!anchorEl)
+      return;
+    event.addListener(anchorEl, "mouseenter", null, this.onShow);
+    event.addListener(anchorEl, "mouseleave", null, this.onHide);
   }
 }
-customElements.get("wj-tooltip") || window.customElements.define("wj-tooltip", h);
+customElements.get("wj-tooltip") || window.customElements.define("wj-tooltip", Tooltip);
 export {
-  h as Tooltip
+  Tooltip
 };

package/dist/wj-visually-hidden.js

@@ -1,17 +1,19 @@
-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";
+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 l = `: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 m extends p {
+const styles = "/*\n[ WJ Visually Hidden ]\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 {
   constructor() {
     super();
-    i(this, "className", "VisuallyHidden");
+    __publicField(this, "className", "VisuallyHidden");
   }
   static get cssStyleSheet() {
-    return l;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,12 +21,14 @@ class m extends p {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(n, d, c) {
-    let o = document.createDocumentFragment(), s = document.createElement("slot");
-    return o.appendChild(s), o;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let slot = document.createElement("slot");
+    fragment.appendChild(slot);
+    return fragment;
   }
 }
-customElements.get("wj-visually-hidden") || window.customElements.define("wj-visually-hidden", m);
+customElements.get("wj-visually-hidden") || window.customElements.define("wj-visually-hidden", VisuallyHidden);
 export {
-  m as VisuallyHidden
+  VisuallyHidden
 };

package/package.json

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

package/dist/localize-762a9f0f.js

@@ -1,43 +0,0 @@
-const n = /* @__PURE__ */ new Map();
-class s {
-  constructor(t) {
-    this.element = t, this.languages = n, this.lang = this.element.lang || document.documentElement.lang || "en", this.dir = this.element.dir || document.documentElement.dir || "ltr", this.setLanguage();
-  }
-  // Nastavenie aktuálneho jazyka
-  setLanguage() {
-    this.languages.has(this.lang) ? this.currentLang = this.lang : console.error(`Language "${this.lang}" not loaded.`);
-  }
-  // Vyhľadávanie prekladu podľa kľúča
-  translate(t) {
-    const e = this.languages.get(this.currentLang);
-    return e && e[t] || t;
-  }
-  // Formátovanie čísla podľa aktuálneho jazyka
-  formatNumber(t, e) {
-    return new Intl.NumberFormat(this.currentLang, e).format(t);
-  }
-  // Formátovanie dátumu podľa aktuálneho jazyka
-  formatDate(t) {
-    return new Intl.DateTimeFormat(this.currentLang).format(new Date(t));
-  }
-  relativeTime(t = 0, e, r = { numeric: "auto" }) {
-    return new Intl.RelativeTimeFormat(this.currentLang, r).format(t, e);
-  }
-}
-function i(...a) {
-  a.map((t) => {
-    const e = t.code.toLowerCase();
-    n.has(e) ? n.set(e, { ...n.get(e), ...t }) : n.set(e, t);
-  });
-}
-class o extends s {
-  constructor(t) {
-    super(t);
-  }
-  static registerTranslation(...t) {
-    i(...t);
-  }
-}
-export {
-  o as L
-};