wj-elements 0.0.2 → 0.0.4

package/dist/wj-button.js

@@ -1,69 +1,65 @@
-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 = (o, n, t) => n in o ? d(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
+var u = (o, n, t) => (c(o, typeof n != "symbol" ? n + "" : n, t), t);
+import w, { event as a } from "./wj-element.js";
 import "./wj-store.js";
-const bool = (v) => {
-  return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
-};
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Button ]\n*/\n:host(.wj-button-solid.wj-color-primary) {\n  --wj-button-background-color: #7252D3;\n  --wj-button-color: #fff;\n}\n:host(.wj-button-outline.wj-color-primary) {\n  --wj-button-border-color: #7252d3;\n  --wj-button-color: #7252D3;\n}\n:host(.wj-button-solid.wj-color-complete) {\n  --wj-button-background-color: #0072EC;\n  --wj-button-color: #fff;\n}\n:host(.wj-button-outline.wj-color-complete) {\n  --wj-button-border-color: #0072ec;\n  --wj-button-color: #0072EC;\n}\n:host(.wj-button-solid.wj-color-success) {\n  --wj-button-background-color: #19AD79;\n  --wj-button-color: #fff;\n}\n:host(.wj-button-outline.wj-color-success) {\n  --wj-button-border-color: #19ad79;\n  --wj-button-color: #19AD79;\n}\n:host(.wj-button-solid.wj-color-warning) {\n  --wj-button-background-color: #FFd945;\n  --wj-button-color: #4b4b4b;\n}\n:host(.wj-button-outline.wj-color-warning) {\n  --wj-button-border-color: #ffd945;\n  --wj-button-color: #FFd945;\n}\n:host(.wj-button-solid.wj-color-danger) {\n  --wj-button-background-color: #D83C31;\n  --wj-button-color: #fff;\n}\n:host(.wj-button-outline.wj-color-danger) {\n  --wj-button-border-color: #d83c31;\n  --wj-button-color: #D83C31;\n}\n:host(.wj-button-solid.wj-color-neutral) {\n  --wj-button-background-color: #212121;\n  --wj-button-color: #fff;\n}\n:host(.wj-button-outline.wj-color-neutral) {\n  --wj-button-border-color: #212121;\n  --wj-button-color: #212121;\n}\n:host(.wj-button-solid.wj-color-default) {\n  --wj-button-background-color: #fff;\n  --wj-button-color: #4b4b4b;\n}\n:host(.wj-button-outline.wj-color-default) {\n  --wj-button-border-color: rgba(33, 33, 33, 0.17);\n  --wj-button-background-color: #fff;\n  --wj-button-color: #4b4b4b;\n}\n:host {\n  --wj-button-border-radius: 4px;\n  --wj-button-border-width: 1px;\n  --wj-button-border-style: solid;\n  --wj-button-border-color: rgba(33, 33, 33, 0.17);\n  --wj-button-margin-inline: 0;\n  --wj-padding-top: .4rem;\n  --wj-padding-start: .5rem;\n  --wj-padding-end: .5rem;\n  --wj-padding-bottom: .4rem;\n  display: inline-flex;\n  position: relative;\n  width: auto;\n  cursor: pointer;\n  margin-inline: var(--wj-button-margin-inline);\n}\n:host(.wj-button-group-button) {\n  display: block;\n}\n.button-native {\n  font-family: var(--wj-font-family);\n  font-size: var(--wj-font-size);\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: inherit;\n  overflow: hidden;\n  border-width: var(--wj-button-border-width);\n  border-style: var(--wj-button-border-style);\n  border-color: var(--wj-button-border-color);\n  outline: none;\n  background-color: var(--wj-button-background-color);\n  color: var(--wj-button-color);\n  line-height: 1;\n  contain: layout style;\n  cursor: pointer;\n  z-index: 0;\n  box-sizing: border-box;\n  appearance: none;\n  margin: 0;\n  border-radius: var(--wj-button-border-radius);\n  padding-top: var(--wj-padding-top);\n  padding-bottom: var(--wj-padding-bottom);\n  padding-left: var(--wj-padding-start);\n  padding-right: var(--wj-padding-end);\n}\n@media (any-hover: hover) {\n  :host(.wj-button-solid:hover) {\n    --wj-button-background-color: #845ae0;\n    --wj-button-border-color: #7252D3;\n    --wj-button-color: #fff;\n  }\n  :host(.wj-button-outline:hover) {\n    --wj-button-background-color: rgba(114, 82, 211, 0.1);\n    --wj-button-border-color: #7252D3;\n    --wj-button-color: #7252D3;\n  }\n  :host(.wj-button-solid.wj-color-complete:hover) {\n    --wj-button-background-color: #0f8ff9;\n    --wj-button-border-color: #0072EC;\n    --wj-button-color: #fff;\n  }\n  :host(.wj-button-outline.wj-color-complete:hover) {\n    --wj-button-background-color: rgba(0, 114, 236, 0.1);\n    --wj-button-border-color: #0072EC;\n    --wj-button-color: #0072EC;\n  }\n  :host(.wj-button-solid.wj-color-success:hover) {\n    --wj-button-background-color: #26bf93;\n    --wj-button-border-color: #19AD79;\n    --wj-button-color: #fff;\n  }\n  :host(.wj-button-outline.wj-color-success:hover) {\n    --wj-button-background-color: rgba(25, 173, 121, 0.1);\n    --wj-button-border-color: #19AD79;\n    --wj-button-color: #19AD79;\n  }\n  :host(.wj-button-solid.wj-color-warning:hover) {\n    --wj-button-background-color: #ffe858;\n    --wj-button-border-color: #FFd945;\n    --wj-button-color: #4b4b4b;\n  }\n  :host(.wj-button-outline.wj-color-warning:hover) {\n    --wj-button-background-color: rgba(255, 217, 69, 0.1);\n    --wj-button-border-color: #FFd945;\n    --wj-button-color: #FFd945;\n  }\n  :host(.wj-button-solid.wj-color-danger:hover) {\n    --wj-button-background-color: #e6533c;\n    --wj-button-border-color: #D83C31;\n    --wj-button-color: #fff;\n  }\n  :host(.wj-button-outline.wj-color-danger:hover) {\n    --wj-button-background-color: rgba(216, 60, 49, 0.1);\n    --wj-button-border-color: #D83C31;\n    --wj-button-color: #D83C31;\n  }\n  :host(.wj-button-solid.wj-color-neutral:hover) {\n    --wj-button-background-color: #373737;\n    --wj-button-border-color: #212121;\n    --wj-button-color: #fff;\n  }\n  :host(.wj-button-outline.wj-color-neutral:hover) {\n    --wj-button-background-color: rgba(33, 33, 33, 0.1);\n    --wj-button-border-color: #212121;\n    --wj-button-color: #212121;\n  }\n  :host(.wj-button-solid.wj-color-default:hover) {\n    --wj-button-background-color: rgba(245, 245, 245, 0.19);\n    --wj-button-border-color: #e0e0e0;\n    --wj-button-color: #4b4b4b;\n  }\n  :host(.wj-button-outline.wj-color-default:hover) {\n    --wj-button-background-color: rgba(224, 224, 224, 0.1);\n    --wj-button-border-color: #e0e0e0;\n    --wj-button-color: #4b4b4b;\n  }\n  :host(.wj-button-link:hover) {\n    --wj-button-background-color: rgba(128, 128, 128, 0.2) !important;\n    --wj-button-border-color: transparent !important;\n    color: #4b4b4b !important;\n  }\n}\n.button-inner {\n  display: flex;\n  position: relative;\n  flex-flow: row nowrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n:host(.button-solid.wj-color) {\n  background-color: var(--wj-button-background-color);\n  color: var(--wj-button-color);\n}\n:host(.wj-button-disabled) {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n/*\n[ Default = Solid ]\n*/\n:host(.wj-button-solid) {\n  --wj-button-background-color: #7252D3;\n  --wj-button-color: #fff;\n}\n/*\n[ Outline ]\n*/\n:host(.wj-button-outline) {\n  --wj-button-border-color: #7252d3;\n  --wj-button-background-color: transparent;\n  --wj-button-color: #7252D3;\n}\n/*\n[ Link ]\n*/\n:host(.wj-button-link) {\n  --wj-button-border-width: 1px;\n  --wj-button-border-color: transparent;\n  --wj-button-background-color: transparent !important;\n}\n/*\n[ Disabled ]\n*/\n:host(.wj-button-disabled) {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n/*\n[ Round ]\n*/\n:host(.wj-button-round) {\n  --wj-button-border-radius: 100px;\n}\n:host(.wj-button-large) {\n  --wj-padding-top: .6rem;\n  --wj-padding-start: .7rem;\n  --wj-padding-end: .7rem;\n  --wj-padding-bottom: .6rem;\n}\n:host(.wj-button-small) {\n  --wj-padding-top: .25rem;\n  --wj-padding-start: .25rem;\n  --wj-padding-end: .25rem;\n  --wj-padding-bottom: .25rem;\n}\n::slotted(wj-icon[slot=start]) {\n  margin: 0 0.3rem 0 -0.3rem;\n}\n::slotted(wj-icon[slot=end]) {\n  margin: 0 -0.2rem 0 0.3rem;\n}\n::slotted(wj-icon[slot=caret]) {\n  margin: 0 0 0 0.3rem;\n}\nslot[name=caret] {\n  display: block;\n}\n:host(.wj-button-group-first:not(.wj-button-group-last)) .button-native {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n:host(.wj-button-group-inner) .button-native {\n  border-radius: 0;\n}\n:host(.wj-button-group-last:not(.wj-button-group-first)) .button-native {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n:host(.wj-button-group-button:not(.wj-button-group-first)) {\n  margin-inline-start: calc(-1 * var(--wj-button-border-width)) !important;\n}";
-class Button extends WJElement {
+const b = (o) => o === "false" || o === "null" || o === "NaN" || o === "undefined" || o === "0" ? !1 : !!o, j = `/*!
+* direction.scss
+*/:host(.wj-button-solid.wj-color-primary){--wj-button-background-color: #7252D3;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-primary){--wj-button-border-color: #7252d3;--wj-button-color: #7252D3}:host(.wj-button-solid.wj-color-complete){--wj-button-background-color: #0072EC;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-complete){--wj-button-border-color: #0072ec;--wj-button-color: #0072EC}:host(.wj-button-solid.wj-color-success){--wj-button-background-color: #19AD79;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-success){--wj-button-border-color: #19ad79;--wj-button-color: #19AD79}:host(.wj-button-solid.wj-color-warning){--wj-button-background-color: #FFd945;--wj-button-color: #4b4b4b}:host(.wj-button-outline.wj-color-warning){--wj-button-border-color: #ffd945;--wj-button-color: #FFd945}:host(.wj-button-solid.wj-color-danger){--wj-button-background-color: #D83C31;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-danger){--wj-button-border-color: #d83c31;--wj-button-color: #D83C31}:host(.wj-button-solid.wj-color-neutral){--wj-button-background-color: #212121;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-neutral){--wj-button-border-color: #212121;--wj-button-color: #212121}:host(.wj-button-solid.wj-color-default){--wj-button-background-color: #fff;--wj-button-color: #4b4b4b}:host(.wj-button-outline.wj-color-default){--wj-button-border-color: rgba(33, 33, 33, .17);--wj-button-background-color: #fff;--wj-button-color: #4b4b4b}:host{--wj-button-border-radius: 4px;--wj-button-border-width: 1px;--wj-button-border-style: solid;--wj-button-border-color: rgba(33, 33, 33, .17);--wj-button-margin-inline: 0;--wj-padding-top: .4rem;--wj-padding-start: .5rem;--wj-padding-end: .5rem;--wj-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wj-button-margin-inline)}:host(.wj-button-group-button){display:block}.button-native{font-family:var(--wj-font-family);font-size:var(--wj-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;overflow:hidden;border-width:var(--wj-button-border-width);border-style:var(--wj-button-border-style);border-color:var(--wj-button-border-color);outline:none;background-color:var(--wj-button-background-color);color:var(--wj-button-color);line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wj-button-border-radius);padding-top:var(--wj-padding-top);padding-bottom:var(--wj-padding-bottom);padding-left:var(--wj-padding-start);padding-right:var(--wj-padding-end)}@media (any-hover: hover){:host(.wj-button-solid:hover){--wj-button-background-color: #845ae0;--wj-button-border-color: #7252D3;--wj-button-color: #fff}:host(.wj-button-outline:hover){--wj-button-background-color: rgba(114, 82, 211, .1);--wj-button-border-color: #7252D3;--wj-button-color: #7252D3}:host(.wj-button-solid.wj-color-complete:hover){--wj-button-background-color: #0f8ff9;--wj-button-border-color: #0072EC;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-complete:hover){--wj-button-background-color: rgba(0, 114, 236, .1);--wj-button-border-color: #0072EC;--wj-button-color: #0072EC}:host(.wj-button-solid.wj-color-success:hover){--wj-button-background-color: #26bf93;--wj-button-border-color: #19AD79;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-success:hover){--wj-button-background-color: rgba(25, 173, 121, .1);--wj-button-border-color: #19AD79;--wj-button-color: #19AD79}:host(.wj-button-solid.wj-color-warning:hover){--wj-button-background-color: #ffe858;--wj-button-border-color: #FFd945;--wj-button-color: #4b4b4b}:host(.wj-button-outline.wj-color-warning:hover){--wj-button-background-color: rgba(255, 217, 69, .1);--wj-button-border-color: #FFd945;--wj-button-color: #FFd945}:host(.wj-button-solid.wj-color-danger:hover){--wj-button-background-color: #e6533c;--wj-button-border-color: #D83C31;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-danger:hover){--wj-button-background-color: rgba(216, 60, 49, .1);--wj-button-border-color: #D83C31;--wj-button-color: #D83C31}:host(.wj-button-solid.wj-color-neutral:hover){--wj-button-background-color: #373737;--wj-button-border-color: #212121;--wj-button-color: #fff}:host(.wj-button-outline.wj-color-neutral:hover){--wj-button-background-color: rgba(33, 33, 33, .1);--wj-button-border-color: #212121;--wj-button-color: #212121}:host(.wj-button-solid.wj-color-default:hover){--wj-button-background-color: rgba(245, 245, 245, .19);--wj-button-border-color: #e0e0e0;--wj-button-color: #4b4b4b}:host(.wj-button-outline.wj-color-default:hover){--wj-button-background-color: rgba(224, 224, 224, .1);--wj-button-border-color: #e0e0e0;--wj-button-color: #4b4b4b}:host(.wj-button-link:hover){--wj-button-background-color: rgba(128, 128, 128, .2) !important;--wj-button-border-color: transparent !important;color:#4b4b4b!important}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.button-solid.wj-color){background-color:var(--wj-button-background-color);color:var(--wj-button-color)}:host(.wj-button-solid){--wj-button-background-color: #7252D3;--wj-button-color: #fff}:host(.wj-button-outline){--wj-button-border-color: #7252d3;--wj-button-background-color: transparent;--wj-button-color: #7252D3}:host(.wj-button-link){--wj-button-border-width: 1px;--wj-button-border-color: transparent;--wj-button-background-color: transparent !important}:host(.wj-button-disabled){cursor:default;opacity:.5;pointer-events:none}:host(.wj-button-round){--wj-button-border-radius: 100px}:host(.wj-button-large){--wj-padding-top: .6rem;--wj-padding-start: .7rem;--wj-padding-end: .7rem;--wj-padding-bottom: .6rem}:host(.wj-button-small){--wj-padding-top: .25rem;--wj-padding-start: .25rem;--wj-padding-end: .25rem;--wj-padding-bottom: .25rem}::slotted(wj-icon[slot=start]){margin:0 .3rem 0 -.3rem}::slotted(wj-icon[slot=end]){margin:0 -.2rem 0 .3rem}::slotted(wj-icon[slot=caret]){margin:0 0 0 .3rem}slot[name=caret]{display:block}:host(.wj-button-group-first:not(.wj-button-group-last)) .button-native{border-start-end-radius:0;border-end-end-radius:0}:host(.wj-button-group-inner) .button-native{border-radius:0}:host(.wj-button-group-last:not(.wj-button-group-first)) .button-native{border-start-start-radius:0;border-end-start-radius:0}:host(.wj-button-group-button:not(.wj-button-group-first)){margin-inline-start:calc(-1 * var(--wj-button-border-width))!important}
+`;
+class h extends w {
   constructor() {
     super();
-    __publicField(this, "className", "Button");
-    __publicField(this, "eventDialogOpen", (e) => {
+    u(this, "className", "Button");
+    u(this, "eventDialogOpen", (t) => {
       document.dispatchEvent(
         new CustomEvent(
           this.dialog,
           {
-            bubbles: true
+            bubbles: !0
           }
         )
       );
     });
   }
-  set active(value) {
+  set active(t) {
     this.setAttribute("active", "");
   }
   get active() {
     return this.hasAttribute("active");
   }
-  set disabled(value) {
+  set disabled(t) {
     this.setAttribute("disabled", "");
   }
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set fill(value) {
-    this.setAttribute("fill", value);
+  set fill(t) {
+    this.setAttribute("fill", t);
   }
   get fill() {
     return this.getAttribute("fill") || "solid";
   }
-  set outline(value) {
+  set outline(t) {
     this.setAttribute("outline", "");
   }
   get outline() {
     return this.hasAttribute("outline");
   }
-  set round(value) {
+  set round(t) {
     this.setAttribute("round", "");
   }
   get round() {
     return this.hasAttribute("round");
   }
-  set stopPropagation(value) {
-    this.setAttribute("stop-propagation", bool(value));
+  set stopPropagation(t) {
+    this.setAttribute("stop-propagation", b(t));
   }
   get stopPropagation() {
-    console.log("SP:", bool(this.getAttribute("stop-propagation")), this.innerHTML, this.getAttribute("stop-propagation"));
-    return bool(this.getAttribute("stop-propagation"));
+    return console.log("SP:", b(this.getAttribute("stop-propagation")), this.innerHTML, this.getAttribute("stop-propagation")), b(this.getAttribute("stop-propagation"));
   }
   static get cssStyleSheet() {
-    return styles;
+    return j;
   }
   static get observedAttributes() {
     return [];
@@ -71,72 +67,33 @@ class Button extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    if (this.disabled)
-      this.classList.add("wj-button-disabled");
-    if (this.variant)
-      this.classList.add("wj-button-" + this.variant);
-    if (this.round)
-      this.classList.add("wj-button-round");
-    if (this.outline)
-      this.classList.add("wj-outline");
-    if (this.fill)
-      this.classList.add("wj-button-" + this.fill);
-    if (this.size)
-      this.classList.add("wj-button-" + this.size);
-    if (this.hasAttribute("color"))
-      this.classList.add("wj-color-" + this.color, "wj-color");
-    else
-      this.classList.add("wj-color-default", "wj-color");
-    if (this.hasAttribute("caret")) {
+  draw(t, p, g) {
+    let s = document.createDocumentFragment();
+    if (this.disabled && this.classList.add("wj-button-disabled"), this.variant && this.classList.add("wj-button-" + this.variant), this.round && this.classList.add("wj-button-round"), this.outline && this.classList.add("wj-outline"), this.fill && this.classList.add("wj-button-" + this.fill), this.size && this.classList.add("wj-button-" + this.size), this.hasAttribute("color") ? this.classList.add("wj-color-" + this.color, "wj-color") : this.classList.add("wj-color-default", "wj-color"), this.hasAttribute("caret")) {
       let i = document.createElement("wj-icon");
-      i.style.setProperty("--wj-icon-size", "14px");
-      i.setAttribute("slot", "caret");
-      i.setAttribute("name", "chevron-down");
-      this.appendChild(i);
+      i.style.setProperty("--wj-icon-size", "14px"), i.setAttribute("slot", "caret"), i.setAttribute("name", "chevron-down"), this.appendChild(i);
     }
     if (this.active) {
       this.classList.add("wj-active");
       let i = document.createElement("wj-icon");
-      i.setAttribute("name", "check");
-      this.appendChild(i);
+      i.setAttribute("name", "check"), this.appendChild(i);
     }
-    if (this.disabled)
-      this.classList.add("wj-disabled");
-    let element = document.createElement(this.hasAttribute("href") ? "a" : "button");
-    element.classList.add("button-native");
-    element.setAttribute("part", "native");
-    let span = document.createElement("span");
-    span.classList.add("button-inner");
-    let slot = document.createElement("slot");
-    slot.setAttribute("name", "icon-only");
-    span.appendChild(slot);
-    slot = document.createElement("slot");
-    slot.setAttribute("name", "start");
-    span.appendChild(slot);
-    slot = document.createElement("slot");
-    span.appendChild(slot);
-    slot = document.createElement("slot");
-    slot.setAttribute("name", "end");
-    span.appendChild(slot);
-    slot = document.createElement("slot");
-    slot.setAttribute("name", "caret");
-    span.appendChild(slot);
-    element.appendChild(span);
-    fragment.appendChild(element);
-    return fragment;
+    this.disabled && this.classList.add("wj-disabled");
+    let l = document.createElement(this.hasAttribute("href") ? "a" : "button");
+    l.classList.add("button-native"), l.setAttribute("part", "native");
+    let e = document.createElement("span");
+    e.classList.add("button-inner");
+    let r = document.createElement("slot");
+    return r.setAttribute("name", "icon-only"), e.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "start"), e.appendChild(r), r = document.createElement("slot"), e.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "end"), e.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "caret"), e.appendChild(r), l.appendChild(e), s.appendChild(l), s;
   }
   afterDraw() {
-    console.log("Stop propagation: ", this.stopPropagation);
-    event.addListener(this, "click", "wj:button-click", null, { stopPropagation: this.stopPropagation });
-    event.addListener(this, "click", null, this.eventDialogOpen);
+    console.log("Stop propagation: ", this.stopPropagation), a.addListener(this, "click", "wj:button-click", null, { stopPropagation: this.stopPropagation }), a.addListener(this, "click", null, this.eventDialogOpen);
   }
   beforeDisconnect() {
     this.removeEventListener("click", this.eventDialogOpen);
   }
 }
-customElements.get("wj-button") || window.customElements.define("wj-button", Button);
+customElements.get("wj-button") || window.customElements.define("wj-button", h);
 export {
-  Button
+  h as Button
 };

package/dist/wj-card-content.js

@@ -1,31 +1,29 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var a = Object.defineProperty;
+var d = (e, t, n) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var s = (e, t, n) => (d(e, typeof t != "symbol" ? t + "" : t, n), n);
+import i from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Card - Content ]\n*/\n:host {\n  --wj-card-padding: 0 1rem 1rem;\n  display: block;\n  padding: var(--wj-card-padding);\n}\n:host.no-padding .row {\n  margin-left: 0;\n  margin-right: 0;\n}\n:host.no-bottom-padding {\n  padding-bottom: 0;\n}\n:host.no-top-padding {\n  padding-top: 0;\n}\n:host .title {\n  margin-top: 0;\n}\n:host.scrollable {\n  margin-bottom: 20px;\n}\n:host h3 {\n  line-height: 34px;\n  font-size: 26px;\n}";
-class CardContent extends WJElement {
+const m = `/*!
+* direction.scss
+*/:host{--wj-card-padding: 0 1rem 1rem;display:block;padding:var(--wj-card-padding)}:host.no-padding .row{margin-left:0;margin-right:0}:host.no-bottom-padding{padding-bottom:0}:host.no-top-padding{padding-top:0}:host .title{margin-top:0}:host.scrollable{margin-bottom:20px}:host h3{line-height:34px;font-size:26px}
+`;
+class c extends i {
   constructor() {
     super();
-    __publicField(this, "className", "CardContent");
+    s(this, "className", "CardContent");
   }
   static get cssStyleSheet() {
-    return styles;
+    return m;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(n, p, l) {
+    let o = document.createDocumentFragment(), r = document.createElement("slot");
+    return o.appendChild(r), o;
   }
 }
-customElements.get("wj-card-content") || window.customElements.define("wj-card-content", CardContent);
+customElements.get("wj-card-content") || window.customElements.define("wj-card-content", c);
 export {
-  CardContent
+  c as CardContent
 };

package/dist/wj-card-controls.js

@@ -1,31 +1,29 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var a = Object.defineProperty;
+var i = (e, t, o) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var n = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
+import l from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host {\n  --wj-color: #212529;\n  --wj-card-subtitle-font-size: 28px;\n  --wj-card-subtitle-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n  font-family: var(--wj-card-subtitle-font-family);\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-size: 10.5px;\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n  -webkit-transition: opacity 0.3s ease;\n  transition: opacity 0.3s ease;\n  position: absolute;\n  right: 1rem;\n  top: 0.5rem;\n}";
-class CardControls extends WJElement {
+const c = `/*!
+* direction.scss
+*/:host{--wj-color: #212529;--wj-card-subtitle-font-size: 28px;--wj-card-subtitle-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;font-family:var(--wj-card-subtitle-font-family);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-size:10.5px;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40);-webkit-transition:opacity .3s ease;transition:opacity .3s ease;position:absolute;right:1rem;top:.5rem}
+`;
+class m extends l {
   constructor() {
     super();
-    __publicField(this, "className", "CardControls");
+    n(this, "className", "CardControls");
   }
   static get cssStyleSheet() {
-    return styles;
+    return c;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(o, p, d) {
+    let s = document.createDocumentFragment(), r = document.createElement("slot");
+    return s.appendChild(r), s;
   }
 }
-customElements.get("wj-card-controls") || window.customElements.define("wj-card-controls", CardControls);
+customElements.get("wj-card-controls") || window.customElements.define("wj-card-controls", m);
 export {
-  CardControls
+  m as CardControls
 };

package/dist/wj-card-header.js

@@ -1,33 +1,29 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var n = Object.defineProperty;
+var d = (t, e, r) => e in t ? n(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var o = (t, e, r) => (d(t, typeof e != "symbol" ? e + "" : e, r), r);
+import c from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Card - Header ]\n*/\n:host {\n  background: transparent;\n  border-radius: 0;\n  border-bottom: 0;\n  padding: 1rem 1rem 0.5rem;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  color: var(--wj-color-contrast);\n}\n:host(.wj-separator):after {\n  content: "";\n  height: 1px;\n  background: rgba(0, 0, 0, 0.08);\n  margin-top: 0.5rem;\n}';
-class CardHeader extends WJElement {
+const i = `/*!
+* direction.scss
+*/:host{background:transparent;border-radius:0;border-bottom:0;padding:1rem 1rem .5rem;position:relative;display:flex;flex-direction:column;color:var(--wj-color-contrast)}:host(.wj-separator):after{content:"";height:1px;background:rgba(0,0,0,.08);margin-top:.5rem}
+`;
+class m extends c {
   constructor() {
     super();
-    __publicField(this, "className", "CardHeader");
+    o(this, "className", "CardHeader");
   }
   static get cssStyleSheet() {
-    return styles;
+    return i;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    if (this.hasAttribute("separator"))
-      this.classList.add("wj-separator");
-    fragment.appendChild(element);
-    return fragment;
+  draw(r, l, p) {
+    let a = document.createDocumentFragment(), s = document.createElement("slot");
+    return this.hasAttribute("separator") && this.classList.add("wj-separator"), a.appendChild(s), a;
   }
 }
-customElements.get("wj-card-header") || window.customElements.define("wj-card-header", CardHeader);
+customElements.get("wj-card-header") || window.customElements.define("wj-card-header", m);
 export {
-  CardHeader
+  m as CardHeader
 };

package/dist/wj-card-subtitle.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 l = Object.defineProperty;
+var c = (s, t, e) => t in s ? l(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var n = (s, t, e) => (c(s, typeof t != "symbol" ? t + "" : t, e), e);
+import m from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host {\n  --wj-card-subtitle-font-size: 10.5px;\n  --wj-card-subtitle-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n:host {\n  -webkit-transition: opacity 0.3s ease;\n  transition: opacity 0.3s ease;\n  font-family: var(--wj-card-subtitle-font-family);\n  font-size: var(--wj-card-subtitle-font-size);\n  text-transform: uppercase;\n  display: inline-block;\n  letter-spacing: 0.06em;\n  font-weight: 500;\n  margin: 0;\n  padding: 0;\n  line-height: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  filter: alpha(opacity=40);\n}";
-class CardSubtitle extends WJElement {
+const d = `/*!
+* direction.scss
+*/:host{--wj-card-subtitle-font-size: 10.5px;--wj-card-subtitle-font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif}:host{-webkit-transition:opacity .3s ease;transition:opacity .3s ease;font-family:var(--wj-card-subtitle-font-family);font-size:var(--wj-card-subtitle-font-size);text-transform:uppercase;display:inline-block;letter-spacing:.06em;font-weight:500;margin:0;padding:0;line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}
+`;
+class u extends m {
   constructor() {
     super();
-    __publicField(this, "className", "CardTitle");
+    n(this, "className", "CardTitle");
   }
   static get cssStyleSheet() {
-    return styles;
+    return d;
   }
   static get observedAttributes() {
     return [];
@@ -21,16 +21,14 @@ class CardSubtitle extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(context, store, params) {
+  beforeDraw(e, r, i) {
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(e, r, i) {
+    let a = document.createDocumentFragment(), o = document.createElement("slot");
+    return a.appendChild(o), a;
   }
 }
-customElements.get("wj-card-subtitle") || window.customElements.define("wj-card-subtitle", CardSubtitle);
+customElements.get("wj-card-subtitle") || window.customElements.define("wj-card-subtitle", u);
 export {
-  CardSubtitle
+  u as CardSubtitle
 };

package/dist/wj-card-title.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 s = Object.defineProperty;
+var l = (e, t, i) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var a = (e, t, i) => (l(e, typeof t != "symbol" ? t + "" : t, i), i);
+import o from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host {\n  --wj-card-title-font-size: 24px;\n  --wj-card-title-font-weight: 500;\n  --wj-card-title-margin: 0;\n  --wj-card-title-padding: 0;\n  --wj-card-title-line-height: 1.2;\n}\n:host {\n  font-size: var(--wj-card-title-font-size);\n  font-weight: var(--wj-card-title-font-weight);\n  margin: var(--wj-card-title-margin);\n  padding: var(--wj-card-title-padding);\n  line-height: var(--wj-card-title-line-height);\n  display: block;\n  position: relative;\n}";
-class CardTitle extends WJElement {
+const d = `/*!
+* direction.scss
+*/:host{--wj-card-title-font-size: 24px;--wj-card-title-font-weight: 500;--wj-card-title-margin: 0;--wj-card-title-padding: 0;--wj-card-title-line-height: 1.2}:host{font-size:var(--wj-card-title-font-size);font-weight:var(--wj-card-title-font-weight);margin:var(--wj-card-title-margin);padding:var(--wj-card-title-padding);line-height:var(--wj-card-title-line-height);display:block;position:relative}
+`;
+class c extends o {
   constructor() {
     super();
-    __publicField(this, "className", "CardTitle");
+    a(this, "className", "CardTitle");
   }
   static get cssStyleSheet() {
-    return styles;
+    return d;
   }
   static get observedAttributes() {
     return [];
@@ -21,14 +21,12 @@ class CardTitle extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(i, m, w) {
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return r.appendChild(n), r;
   }
 }
-customElements.get("wj-card-title") || window.customElements.define("wj-card-title", CardTitle);
+customElements.get("wj-card-title") || window.customElements.define("wj-card-title", c);
 export {
-  CardTitle
+  c as CardTitle
 };

package/dist/wj-card.js

@@ -1,33 +1,29 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var c = Object.defineProperty;
+var d = (r, o, t) => o in r ? c(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var n = (r, o, t) => (d(r, typeof o != "symbol" ? o + "" : o, t), t);
+import i from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Card ]\n*/\n:host {\n  --wj-card-margin-top: 0;\n  --wj-card-margin-bottom: 1rem;\n  --wj-card-margin-inline: 0;\n  --wj-card-border-color: transparent;\n  --wj-color-base: #fff;\n  --wj-color-contrast: #4b4b4b;\n}\n:host(.wj-color-primary) {\n  --wj-color-base: #7252D3 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-complete) {\n  --wj-color-base: #0072EC !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-success) {\n  --wj-color-base: #19AD79 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-warning) {\n  --wj-color-base: #FFd945 !important;\n  --wj-color-contrast: #4b4b4b !important;\n}\n:host(.wj-color-danger) {\n  --wj-color-base: #D83C31 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-info) {\n  --wj-color-base: #3B4752 !important;\n  --wj-color-contrast: #fff !important;\n}\n:host(.wj-color-menu) {\n  --wj-color-base: #2b303b !important;\n  --wj-color-contrast: #fff !important;\n}\n:host {\n  background-color: var(--wj-color-base, red);\n  color: var(--wj-color-contrast);\n  -webkit-transition: all 0.2s ease;\n  transition: all 0.2s ease;\n  margin-top: var(--wj-card-margin-top);\n  margin-bottom: var(--wj-card-margin-bottom);\n  margin-inline: var(--wj-card-margin-inline);\n  box-shadow: rgba(0, 0, 0, 0.12) 0 4px 16px;\n  border-color: var(--wj-border-color);\n  border-style: var(--wj-border-style);\n  border-width: var(--wj-border-size);\n  border-radius: var(--wj-border-radius);\n  font-family: var(--wj-font-family);\n  font-size: var(--wj-font-size);\n  line-height: var(--wj-line-height);\n  position: relative;\n  width: 100%;\n  word-wrap: normal;\n  display: flex;\n  flex-direction: column;\n  contain: content;\n  overflow: hidden;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n:host.card-collapsed .card-header .card-controls .card-icon-collapse:before {\n  content: "\\e986";\n}\n:host.card-maximized .card-header .card-controls .card-icon-maximize:before {\n  content: "\\e98d";\n}\n:host.card-bordered {\n  border: 1px solid rgba(224, 224, 224, 0.7);\n}\n:host.card-borderless {\n  border: none;\n  box-shadow: none;\n}\n:host.card-condensed .card-header {\n  padding: 9px 13px 0 13px;\n  min-height: 32px;\n}\n:host.card-condensed .card-header .card-title {\n  opacity: 0.4;\n}\n:host.card-condensed .card-body {\n  padding: 13px;\n}\n:host.card-hover .card-header .card-title {\n  opacity: 0.4;\n}\n:host.card-hover:hover .card-header .card-title {\n  opacity: 1;\n}\n:host.card-transparent {\n  background: transparent;\n  border: none;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n:host.card-transparent .card-body {\n  background: transparent;\n}\n:host.full-height {\n  height: 100%;\n}\n:host.full-height .card-body {\n  height: auto;\n  width: 100%;\n  height: 100%;\n}\n:host.card-featured {\n  -webkit-box-shadow: -1px 1px 3px 0px rgba(121, 129, 135, 0.14);\n  box-shadow: -1px 1px 3px 0px rgba(121, 129, 135, 0.14);\n  width: calc(100% - 50px);\n  float: right;\n}\n:host.card-featured .card-title h4 {\n  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  font-size: 16px;\n  text-transform: uppercase;\n  color: inherit;\n}\n:host.card-featured .card-body h3 {\n  line-height: 34px;\n  font-size: 26px;\n}\n:host.card-featured .footer .username {\n  line-height: 8px;\n  padding-top: 10px;\n  font-size: 16px;\n}\n:host.card-featured .footer .buttons li {\n  display: inline;\n  list-style: none;\n  font-weight: bold;\n  margin-left: 20px;\n}\n:host.card-featured .footer .buttons li:first-child {\n  margin-left: 0;\n}\n:host.card-featured .footer .buttons .heart {\n  color: #D83C31;\n}\n:host.card-featured .footer .buttons .comment {\n  color: #4b4b4b;\n}\n:host.card-featured .ribbon {\n  width: 38px;\n  height: 38px;\n  margin-left: -39px;\n  float: left;\n  -webkit-box-shadow: inset -3px 0px 3px 0px rgba(0, 0, 0, 0.14);\n  box-shadow: inset -3px 0px 3px 0px rgba(0, 0, 0, 0.14);\n}\n:host.card-featured .ribbon.green {\n  background: #0072EC;\n}\n:host.card-featured .ribbon.blue {\n  background: #19AD79;\n}\n:host.hover-fill:hover {\n  background: #f4f4f4;\n}\n:host.hover-stroke:hover {\n  border: 1px solid #e0e0e0;\n}\n:host(.wj-color) {\n  background-color: var(--wj-color-base, red);\n  color: var(--wj-color-contrast);\n}';
-class Card extends WJElement {
+const l = `/*!
+* direction.scss
+*/:host{--wj-card-margin-top: 0;--wj-card-margin-bottom: 1rem;--wj-card-margin-inline: 0;--wj-card-border-color: transparent;--wj-color-base: #fff;--wj-color-contrast: #4b4b4b}:host(.wj-color-primary){--wj-color-base: #7252D3 !important;--wj-color-contrast: #fff !important}:host(.wj-color-complete){--wj-color-base: #0072EC !important;--wj-color-contrast: #fff !important}:host(.wj-color-success){--wj-color-base: #19AD79 !important;--wj-color-contrast: #fff !important}:host(.wj-color-warning){--wj-color-base: #FFd945 !important;--wj-color-contrast: #4b4b4b !important}:host(.wj-color-danger){--wj-color-base: #D83C31 !important;--wj-color-contrast: #fff !important}:host(.wj-color-info){--wj-color-base: #3B4752 !important;--wj-color-contrast: #fff !important}:host(.wj-color-menu){--wj-color-base: #2b303b !important;--wj-color-contrast: #fff !important}:host{background-color:var(--wj-color-base, red);color:var(--wj-color-contrast);-webkit-transition:all .2s ease;transition:all .2s ease;margin-top:var(--wj-card-margin-top);margin-bottom:var(--wj-card-margin-bottom);margin-inline:var(--wj-card-margin-inline);box-shadow:#0000001f 0 4px 16px;border-color:var(--wj-border-color);border-style:var(--wj-border-style);border-width:var(--wj-border-size);border-radius:var(--wj-border-radius);font-family:var(--wj-font-family);font-size:var(--wj-font-size);line-height:var(--wj-line-height);position:relative;width:100%;word-wrap:normal;display:flex;flex-direction:column;contain:content;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host.card-collapsed .card-header .card-controls .card-icon-collapse:before{content:""}:host.card-maximized .card-header .card-controls .card-icon-maximize:before{content:""}:host.card-bordered{border:1px solid rgba(224,224,224,.7)}:host.card-borderless{border:none;box-shadow:none}:host.card-condensed .card-header{padding:9px 13px 0;min-height:32px}:host.card-condensed .card-header .card-title{opacity:.4}:host.card-condensed .card-body{padding:13px}:host.card-hover .card-header .card-title{opacity:.4}:host.card-hover:hover .card-header .card-title{opacity:1}:host.card-transparent{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}:host.card-transparent .card-body{background:transparent}:host.full-height{height:100%}:host.full-height .card-body{height:auto;width:100%;height:100%}:host.card-featured{-webkit-box-shadow:-1px 1px 3px 0px rgba(121,129,135,.14);box-shadow:-1px 1px 3px #79818724;width:calc(100% - 50px);float:right}:host.card-featured .card-title h4{font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;text-transform:uppercase;color:inherit}:host.card-featured .card-body h3{line-height:34px;font-size:26px}:host.card-featured .footer .username{line-height:8px;padding-top:10px;font-size:16px}:host.card-featured .footer .buttons li{display:inline;list-style:none;font-weight:700;margin-left:20px}:host.card-featured .footer .buttons li:first-child{margin-left:0}:host.card-featured .footer .buttons .heart{color:#d83c31}:host.card-featured .footer .buttons .comment{color:#4b4b4b}:host.card-featured .ribbon{width:38px;height:38px;margin-left:-39px;float:left;-webkit-box-shadow:inset -3px 0px 3px 0px rgba(0,0,0,.14);box-shadow:inset -3px 0 3px #00000024}:host.card-featured .ribbon.green{background:#0072EC}:host.card-featured .ribbon.blue{background:#19AD79}:host.hover-fill:hover{background:#f4f4f4}:host.hover-stroke:hover{border:1px solid #e0e0e0}:host(.wj-color){background-color:var(--wj-color-base, red);color:var(--wj-color-contrast)}
+`;
+class h extends i {
   constructor() {
     super();
-    __publicField(this, "className", "Card");
+    n(this, "className", "Card");
   }
   static get cssStyleSheet() {
-    return styles;
+    return l;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    if (params.color)
-      this.classList.add("wj-color-" + params.color, "wj-color");
-    fragment.appendChild(element);
-    return fragment;
+  draw(t, b, e) {
+    let a = document.createDocumentFragment(), s = document.createElement("slot");
+    return e.color && this.classList.add("wj-color-" + e.color, "wj-color"), a.appendChild(s), a;
   }
 }
-customElements.get("wj-card") || window.customElements.define("wj-card", Card);
+customElements.get("wj-card") || window.customElements.define("wj-card", h);
 export {
-  Card
+  h as Card
 };