wj-elements 0.0.2 → 0.0.4

package/dist/wj-aside.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 d = Object.defineProperty;
+var a = (e, t, s) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var o = (e, t, s) => (a(e, typeof t != "symbol" ? t + "" : t, s), s);
+import n from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Aside ]\n*/\n:host {\n  --wj-aside-width: "100px";\n  --wj-aside-top: 0;\n  --wj-aside-border-color: var(--wj-border-color);\n  --wj-aside-border-width: 0 1px 0 0;\n  --wj-aside-border-style: solid;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: auto;\n  border-color: var(--wj-aside-border-color);\n  border-width: var(--wj-aside-border-width);\n  border-style: var(--wj-aside-border-style);\n}\n:host(.open) {\n  display: block !important;\n}\n@media (min-width: 768px) {\n  :host([fixed]) {\n    position: fixed;\n    width: var(--wj-aside-width);\n    top: var(--wj-aside-top);\n    height: calc(100% - var(--wj-aside-top));\n  }\n}\n@media (max-width: 768px) {\n  :host {\n    display: none;\n  }\n  :host([variant=top-start]) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 80%;\n    height: 100%;\n    z-index: 9999;\n    background-color: #fff;\n  }\n}';
-class Aside extends WJElement {
+const h = `/*!
+* direction.scss
+*/:host{--wj-aside-width: "100px";--wj-aside-top: 0;--wj-aside-border-color: var(--wj-border-color);--wj-aside-border-width: 0 1px 0 0;--wj-aside-border-style: solid;box-sizing:border-box;flex-shrink:0;overflow:auto;border-color:var(--wj-aside-border-color);border-width:var(--wj-aside-border-width);border-style:var(--wj-aside-border-style)}:host(.open){display:block!important}@media (min-width: 768px){:host([fixed]){position:fixed;width:var(--wj-aside-width);top:var(--wj-aside-top);height:calc(100% - var(--wj-aside-top))}}@media (max-width: 768px){:host{display:none}:host([variant=top-start]){position:fixed;top:0;left:0;width:80%;height:100%;z-index:9999;background-color:#fff}}
+`;
+class w extends n {
   constructor() {
     super();
-    __publicField(this, "className", "Aside");
+    o(this, "className", "Aside");
   }
   static get cssStyleSheet() {
-    return styles;
+    return h;
   }
   static get observedAttributes() {
     return [];
@@ -21,18 +21,14 @@ class Aside extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    if (this.width)
-      this.style.setProperty("--wj-aside-width", this.width);
-    if (this.top && this.hasAttribute("fixed"))
-      this.style.setProperty("--wj-aside-top", this.top);
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(s, l, p) {
+    let i = document.createDocumentFragment();
+    this.width && this.style.setProperty("--wj-aside-width", this.width), this.top && this.hasAttribute("fixed") && this.style.setProperty("--wj-aside-top", this.top);
+    let r = document.createElement("slot");
+    return i.appendChild(r), i;
   }
 }
-customElements.get("wj-aside") || window.customElements.define("wj-aside", Aside);
+customElements.get("wj-aside") || window.customElements.define("wj-aside", w);
 export {
-  Aside
+  w as Aside
 };

package/dist/wj-avatar.js

@@ -1,69 +1,52 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement from "./wj-element.js";
+var d = Object.defineProperty;
+var h = (r, a, t) => a in r ? d(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
+var l = (r, a, t) => (h(r, typeof a != "symbol" ? a + "" : a, t), t);
+import v from "./wj-element.js";
 import "./wj-store.js";
-function getHsl(text, s = 30, l = 80) {
-  let str = text, hash = 0;
-  for (let i = 0; i < (str == null ? void 0 : str.length); i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  let h = hash % 360;
-  let hexColor = "hsl(" + h + ", " + s + "%, " + l + "%)";
-  return hexColor;
+function w(r, a = 30, t = 80) {
+  let i = r, s = 0;
+  for (let e = 0; e < (i == null ? void 0 : i.length); e++)
+    s = i.charCodeAt(e) + ((s << 5) - s);
+  return "hsl(" + s % 360 + ", " + a + "%, " + t + "%)";
 }
-function getInitials(string, length = 2) {
-  let names = string.split(" ");
-  let initials = names[0].substring(0, 1).toUpperCase();
-  if (names.length > 1 && length > 1) {
-    initials += names[names.length - 1].substring(0, 1).toUpperCase();
-  }
-  return initials;
+function c(r, a = 2) {
+  let t = r.split(" "), i = t[0].substring(0, 1).toUpperCase();
+  return t.length > 1 && a > 1 && (i += t[t.length - 1].substring(0, 1).toUpperCase()), i;
 }
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n:host {\n  --wj-avatar-width: 32px;\n  --wj-avatar-height: 32px;\n  --wj-avatar-font-size: .75rem;\n  --wj-avatar-font-weight: 400;\n  --wj-avatar-color: inherit;\n  --wj-avatar-background-color: rgba(33, 33, 33, 0.17);\n  --wj-avatar-border-radius: 50%;\n  --wj-avatar-border-color: transparent;\n  --wj-avatar-border-width: 1px;\n  --wj-avatar-border-style: solid;\n  display: inline-block;\n  width: var(--wj-avatar-width);\n  height: var(--wj-avatar-height);\n  font-size: var(--wj-avatar-font-size);\n  font-weight: var(--wj-avatar-font-weight);\n  color: var(--wj-avatar-color);\n}\n:host .native-avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--wj-avatar-border-radius);\n  background-color: var(--wj-avatar-background-color);\n}\n::slotted(wj-img),\n::slotted(img) {\n  border-radius: var(--wj-avatar-border-radius);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  overflow: hidden;\n}\n:host(.wj-avatar-border) {\n  border-color: var(--wj-avatar-border-color);\n  border-width: var(--wj-avatar-border-width);\n  border-style: var(--wj-avatar-border-style);\n}\n:host(.wj-avatar-small) {\n  --wj-avatar-width: 24px;\n  --wj-avatar-height: 24px;\n}\n:host(.wj-avatar-large) {\n  --wj-avatar-width: 48px;\n  --wj-avatar-height: 48px;\n}";
-class Avatar extends WJElement {
+const g = `/*!
+* direction.scss
+*/:host{--wj-avatar-width: 32px;--wj-avatar-height: 32px;--wj-avatar-font-size: .75rem;--wj-avatar-font-weight: 400;--wj-avatar-color: inherit;--wj-avatar-background-color: rgba(33, 33, 33, .17);--wj-avatar-border-radius: 50%;--wj-avatar-border-color: transparent;--wj-avatar-border-width: 1px;--wj-avatar-border-style: solid;display:inline-block;width:var(--wj-avatar-width);height:var(--wj-avatar-height);font-size:var(--wj-avatar-font-size);font-weight:var(--wj-avatar-font-weight);color:var(--wj-avatar-color)}:host .native-avatar{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--wj-avatar-border-radius);background-color:var(--wj-avatar-background-color)}::slotted(wj-img),::slotted(img){border-radius:var(--wj-avatar-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host(.wj-avatar-border){border-color:var(--wj-avatar-border-color);border-width:var(--wj-avatar-border-width);border-style:var(--wj-avatar-border-style)}:host(.wj-avatar-small){--wj-avatar-width: 24px;--wj-avatar-height: 24px}:host(.wj-avatar-large){--wj-avatar-width: 48px;--wj-avatar-height: 48px}
+`;
+class j extends v {
   constructor() {
     super();
-    __publicField(this, "className", "Avatar");
+    l(this, "className", "Avatar");
   }
   static get cssStyleSheet() {
-    return styles;
+    return g;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.setAttribute("part", "native");
-    element.classList.add("native-avatar");
-    if (this.size)
-      this.classList.add("wj-avatar-" + this.size);
-    if (this.isImage()) {
-      let slot = document.createElement("slot");
-      element.appendChild(slot);
+  draw(t, i, s) {
+    let n = document.createDocumentFragment(), o = document.createElement("div");
+    if (o.setAttribute("part", "native"), o.classList.add("native-avatar"), this.size && this.classList.add("wj-avatar-" + this.size), this.isImage()) {
+      let e = document.createElement("slot");
+      o.appendChild(e);
+    } else if (this.hasAttribute("initials")) {
+      let e = c(this.label);
+      this.setAttribute("style", `--wj-avatar-background-color: ${w(e)}`), o.innerText = e;
     } else {
-      if (this.hasAttribute("initials")) {
-        let initials = getInitials(this.label);
-        this.setAttribute("style", `--wj-avatar-background-color: ${getHsl(initials)}`);
-        element.innerText = initials;
-      } else {
-        let slotIcon = document.createElement("slot");
-        slotIcon.setAttribute("name", "icon");
-        element.appendChild(slotIcon);
-      }
+      let e = document.createElement("slot");
+      e.setAttribute("name", "icon"), o.appendChild(e);
     }
-    fragment.appendChild(element);
-    return fragment;
+    return n.appendChild(o), n;
   }
   isImage() {
     return this.getElementsByTagName("wj-img").length > 0;
   }
 }
-customElements.get("wj-avatar") || window.customElements.define("wj-avatar", Avatar);
+customElements.get("wj-avatar") || window.customElements.define("wj-avatar", j);
 export {
-  Avatar
+  j as Avatar
 };

package/dist/wj-badge.js

@@ -1,35 +1,31 @@
-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 c = (t, o, r) => o in t ? n(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r;
+var s = (t, o, r) => (c(t, typeof o != "symbol" ? o + "" : o, r), r);
+import l from "./wj-element.js";
 import "./wj-store.js";
-const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Badge ]\n*/\n:host(.wj-color-primary) {\n  --wj-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: #f4f4f4 !important;\n  --wj-color-contrast: #4b4b4b !important;\n}\n:host {\n  --wj-chip-border-radius: 100px;\n  text-shadow: none;\n  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  font-weight: 600;\n  background-color: #e0e0e0;\n  font-size: 11px;\n  padding-left: 6px;\n  padding-right: 6px;\n  color: #4b4b4b;\n  border-radius: 10px;\n}\n:host(.wj-color) {\n  background-color: var(--wj-color-base, red);\n  color: var(--wj-color-contrast);\n}';
-class Badge extends WJElement {
+const i = `/*!
+* direction.scss
+*/: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: #f4f4f4 !important;--wj-color-contrast: #4b4b4b !important}:host{--wj-chip-border-radius: 100px;text-shadow:none;font-family:Inter UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:600;background-color:#e0e0e0;font-size:11px;padding-left:6px;padding-right:6px;color:#4b4b4b;border-radius:10px}:host(.wj-color){background-color:var(--wj-color-base, red);color:var(--wj-color-contrast)}
+`;
+class m extends l {
   constructor() {
     super();
-    __publicField(this, "className", "Badge");
+    s(this, "className", "Badge");
   }
   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.color)
-      this.classList.add("wj-color-" + this.color, "wj-color");
-    fragment.appendChild(element);
-    return fragment;
+  draw(r, w, p) {
+    let e = document.createDocumentFragment(), a = document.createElement("slot");
+    return this.color && this.classList.add("wj-color-" + this.color, "wj-color"), e.appendChild(a), e;
   }
 }
-let __esModule = "true";
-customElements.get("wj-badge") || window.customElements.define("wj-badge", Badge);
+let b = "true";
+customElements.get("wj-badge") || window.customElements.define("wj-badge", m);
 export {
-  Badge,
-  __esModule
+  m as Badge,
+  b as __esModule
 };

package/dist/wj-breadcrumb.js

@@ -1,142 +1,92 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import WJElement, { WjElementUtils, event } from "./wj-element.js";
+var h = Object.defineProperty;
+var b = (o, a, e) => a in o ? h(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
+var p = (o, a, e) => (b(o, typeof a != "symbol" ? a + "" : a, e), e);
+import w, { WjElementUtils as l, event as g } from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Breadcrumbs ]\n*/\n:host {\n  --wj-breadcrumb-a: rgba(33, 33, 33, 0.81);\n  --wj-breadcrumb-a-hover: rgba(33, 33, 33, 0.62);\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  line-height: 1.5;\n}\n:host(.collapsed) {\n  display: none;\n}\n.native-breadcrumb {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  outline: none;\n  background: inherit;\n  padding: 0.25rem 0.75rem;\n  color: var(--wj-breadcrumb-a);\n  text-decoration: none;\n}\n.native-breadcrumb.hidden {\n  display: none;\n}\n.native-breadcrumb.active {\n  font-weight: bold;\n}\n.native-breadcrumb:hover {\n  color: var(--wj-breadcrumb-a-hover);\n}\nbutton {\n  margin-inline: 0.75rem;\n  border: 0 solid transparent;\n  border-radius: 3px;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.separator {\n  display: inline-flex;\n  align-items: center;\n}\n::slotted([slot=start]) {\n  margin-inline: 0 0.5rem;\n}\n::slotted([slot=end]) {\n  margin-inline: 0.5rem 0;\n}";
-class Breadcrumb extends WJElement {
+const j = `/*!
+* direction.scss
+*/:host{--wj-breadcrumb-a: rgba(33, 33, 33, .81);--wj-breadcrumb-a-hover: rgba(33, 33, 33, .62);display:flex;flex:0 0 auto;align-items:center;line-height:1.5}:host(.collapsed){display:none}.native-breadcrumb{display:flex;align-items:center;width:100%;outline:none;background:inherit;padding:.25rem .75rem;color:var(--wj-breadcrumb-a);text-decoration:none}.native-breadcrumb.hidden{display:none}.native-breadcrumb.active{font-weight:700}.native-breadcrumb:hover{color:var(--wj-breadcrumb-a-hover)}button{margin-inline:.75rem;border:0 solid transparent;border-radius:3px;background-color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.separator{display:inline-flex;align-items:center}::slotted([slot=start]){margin-inline:0 .5rem}::slotted([slot=end]){margin-inline:.5rem 0}
+`;
+class v extends w {
   constructor() {
-    var _a;
+    var e;
     super();
-    __publicField(this, "className", "Breadcrumb");
-    this._showSeparator = true;
-    this._collapsedVariant = ((_a = this.parentElement) == null ? void 0 : _a.collapsedVariant) || "BUTTON";
+    p(this, "className", "Breadcrumb");
+    this._showSeparator = !0, this._collapsedVariant = ((e = this.parentElement) == null ? void 0 : e.collapsedVariant) || "BUTTON";
   }
   get showSeparator() {
     return this._showSeparator;
   }
-  set showSeparator(value) {
-    this._showSeparator = value;
+  set showSeparator(e) {
+    this._showSeparator = e;
   }
   get collapsedVariant() {
     return this._collapsedVariant.toUpperCase();
   }
-  set collapsedVariant(value) {
-    this._collapsedVariant = value || this.parentElement.collapsedVariant;
+  set collapsedVariant(e) {
+    this._collapsedVariant = e || this.parentElement.collapsedVariant;
   }
   static get cssStyleSheet() {
-    return styles;
+    return j;
   }
   static get observedAttributes() {
     return ["show-collapsed-indicator", "collapsed", "last"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "collapsed") {
-      if (WjElementUtils.stringToBoolean(newValue))
-        this.classList.add("collapsed");
-    } else if (name === "show-collapsed-indicator") {
-      if (WjElementUtils.stringToBoolean(newValue))
-        this.showCollapsedIndicator = true;
-    } else if (name === "last") {
-      this.active = WjElementUtils.stringToBoolean(newValue);
-      this.showSeparator = !WjElementUtils.stringToBoolean(newValue);
-    }
-    return false;
+  attributeChangedCallback(e, r, t) {
+    return e === "collapsed" ? l.stringToBoolean(t) && this.classList.add("collapsed") : e === "show-collapsed-indicator" ? l.stringToBoolean(t) && (this.showCollapsedIndicator = !0) : e === "last" && (this.active = l.stringToBoolean(t), this.showSeparator = !l.stringToBoolean(t)), !1;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("a");
-    native.classList.add("native-breadcrumb");
-    if (this.active)
-      native.classList.add("active");
-    let slot = document.createElement("slot");
-    let start = document.createElement("slot");
-    start.setAttribute("name", "start");
-    let end = document.createElement("slot");
-    end.setAttribute("name", "end");
-    native.appendChild(start);
-    native.appendChild(slot);
-    native.appendChild(end);
-    fragment.appendChild(native);
-    if (this.showCollapsedIndicator) {
-      fragment.appendChild(this.drawCollapsedIndicator());
-      this.classList.remove("collapsed");
-      native.classList.add("hidden");
+  draw(e, r, t) {
+    let s = document.createDocumentFragment(), n = document.createElement("a");
+    n.classList.add("native-breadcrumb"), this.active && n.classList.add("active");
+    let u = document.createElement("slot"), d = document.createElement("slot");
+    d.setAttribute("name", "start");
+    let c = document.createElement("slot");
+    if (c.setAttribute("name", "end"), n.appendChild(d), n.appendChild(u), n.appendChild(c), s.appendChild(n), this.showCollapsedIndicator && (s.appendChild(this.drawCollapsedIndicator()), this.classList.remove("collapsed"), n.classList.add("hidden")), this.showSeparator) {
+      let i = document.createElement("span");
+      if (i.classList.add("separator"), i.setAttribute("part", "separator"), l.hasSlot(this, "separator")) {
+        let m = document.createElement("slot");
+        m.setAttribute("name", "separator"), i.appendChild(m);
+      } else
+        i.innerHTML = `<wj-icon name=${this.separator || "chevron-right"}></wj-icon>`;
+      s.appendChild(i);
     }
-    if (this.showSeparator) {
-      let separator = document.createElement("span");
-      separator.classList.add("separator");
-      separator.setAttribute("part", "separator");
-      if (WjElementUtils.hasSlot(this, "separator")) {
-        let slotSeparator = document.createElement("slot");
-        slotSeparator.setAttribute("name", "separator");
-        separator.appendChild(slotSeparator);
-      } else {
-        separator.innerHTML = `<wj-icon name=${this.separator || "chevron-right"}></wj-icon>`;
-      }
-      fragment.appendChild(separator);
-    }
-    this.native = native;
-    return fragment;
+    return this.native = n, s;
   }
   drawCollapsedIndicator() {
-    let collapsedIndicator = null;
-    if (this.collapsedVariant === "DROPDOWN") {
-      collapsedIndicator = this.collapseDropdown();
-    } else {
-      collapsedIndicator = this.collapseButton();
-    }
-    return collapsedIndicator;
+    let e = null;
+    return this.collapsedVariant === "DROPDOWN" ? e = this.collapseDropdown() : e = this.collapseButton(), e;
   }
   collapseDropdown() {
     console.log("DROPDOWN");
-    let dropdown = document.createElement("wj-dropdown");
-    dropdown.setAttribute("placement", "bottom");
-    dropdown.setAttribute("offset", "10");
-    let button = document.createElement("wj-button");
-    button.setAttribute("slot", "trigger");
-    button.setAttribute("variant", "link");
-    button.innerHTML = `<wj-icon name="dots"></wj-icon>`;
-    let menu = document.createElement("wj-menu");
-    menu.setAttribute("variant", "context");
-    dropdown.appendChild(button);
-    dropdown.appendChild(menu);
-    dropdown.innerHTML = `<wj-button slot="trigger" variant="link">
+    let e = document.createElement("wj-dropdown");
+    e.setAttribute("placement", "bottom"), e.setAttribute("offset", "10");
+    let r = document.createElement("wj-button");
+    r.setAttribute("slot", "trigger"), r.setAttribute("variant", "link"), r.innerHTML = '<wj-icon name="dots"></wj-icon>';
+    let t = document.createElement("wj-menu");
+    return t.setAttribute("variant", "context"), e.appendChild(r), e.appendChild(t), e.innerHTML = `<wj-button slot="trigger" variant="link">
             <wj-icon name="dots"></wj-icon>
         </wj-button>
         <wj-menu variant="context">
             <wj-menu-item>Tralala</wj-menu-item>
             <wj-menu-item>Test 1</wj-menu-item>
             <wj-menu-item>Test 2</wj-menu-item>
-        </wj-menu>`;
-    this.parentElement.querySelectorAll("wj-breadcrumb").forEach((el) => {
-      console.log(el);
-    });
-    return dropdown;
+        </wj-menu>`, this.parentElement.querySelectorAll("wj-breadcrumb").forEach((s) => {
+      console.log(s);
+    }), e;
   }
   collapseButton() {
-    let button = document.createElement("button");
-    button.setAttribute("aria-label", "Show more breadcrumbs");
-    button.setAttribute("part", "collapsed-indicator");
-    button.innerHTML = `<wj-icon name="dots"></wj-icon>`;
-    event.addListener(button, "click", null, (e) => {
-      this.native.classList.remove("hidden");
-      button.remove();
-      this.parentElement.querySelectorAll("wj-breadcrumb").forEach((e2) => {
-        e2.classList.remove("collapsed");
-      });
-      e.stopPropagation();
-    });
-    return button;
+    let e = document.createElement("button");
+    return e.setAttribute("aria-label", "Show more breadcrumbs"), e.setAttribute("part", "collapsed-indicator"), e.innerHTML = '<wj-icon name="dots"></wj-icon>', g.addListener(e, "click", null, (r) => {
+      this.native.classList.remove("hidden"), e.remove(), this.parentElement.querySelectorAll("wj-breadcrumb").forEach((t) => {
+        t.classList.remove("collapsed");
+      }), r.stopPropagation();
+    }), e;
   }
 }
-customElements.get("wj-breadcrumb") || window.customElements.define("wj-breadcrumb", Breadcrumb);
+customElements.get("wj-breadcrumb") || window.customElements.define("wj-breadcrumb", v);
 export {
-  Breadcrumb
+  v as Breadcrumb
 };

package/dist/wj-breadcrumbs.js

@@ -1,54 +1,39 @@
-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 u = (r, t, e) => t in r ? n(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var i = (r, t, e) => (u(r, typeof t != "symbol" ? t + "" : t, e), e);
+import d from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Breadcrumbs ]\n*/\n:host {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}";
-class Breadcrumbs extends WJElement {
+const p = `/*!
+* direction.scss
+*/:host{display:flex;flex-wrap:wrap;align-items:center}
+`;
+class b extends d {
   constructor() {
     super();
-    __publicField(this, "className", "Breadcrumbs");
-    this.last = false;
+    i(this, "className", "Breadcrumbs");
+    this.last = !1;
   }
   static get cssStyleSheet() {
-    return styles;
+    return p;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+  draw(e, l, o) {
+    let s = document.createDocumentFragment(), c = document.createElement("slot");
+    return s.appendChild(c), s;
   }
   afterDraw() {
-    let maxItems = +this.maxItems || 0;
-    let itemsBeforeCollapse = +this.itemsBeforeCollapse || 1;
-    let itemsAfterCollapse = +this.itemsAfterCollapse || 1;
-    let breadcrumbs = this.getBreadcrumbs();
-    let breadcrumb = breadcrumbs.findLast((e) => e);
-    breadcrumb.setAttribute("last", true);
-    const shouldCollapse = maxItems !== void 0 && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
-    if (shouldCollapse) {
-      breadcrumbs.forEach((breadcrumb2, index) => {
-        if (index === itemsBeforeCollapse) {
-          breadcrumb2.setAttribute("show-collapsed-indicator", true);
-        }
-        if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
-          breadcrumb2.setAttribute("collapsed", true);
-        }
-      });
-    }
+    let e = +this.maxItems || 0, l = +this.itemsBeforeCollapse || 1, o = +this.itemsAfterCollapse || 1, s = this.getBreadcrumbs();
+    s.findLast((a) => a).setAttribute("last", !0), e !== void 0 && s.length > e && l + o <= e && s.forEach((a, m) => {
+      m === l && a.setAttribute("show-collapsed-indicator", !0), m >= l && m < s.length - o && a.setAttribute("collapsed", !0);
+    });
   }
   getBreadcrumbs() {
     return Array.from(this.querySelectorAll("wj-breadcrumb"));
   }
 }
-customElements.get("wj-breadcrumbs") || window.customElements.define("wj-breadcrumbs", Breadcrumbs);
+customElements.get("wj-breadcrumbs") || window.customElements.define("wj-breadcrumbs", b);
 export {
-  Breadcrumbs
+  b as Breadcrumbs
 };

package/dist/wj-button-group.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 c = Object.defineProperty;
+var d = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var u = (o, e, t) => (d(o, typeof e != "symbol" ? e + "" : e, t), t);
+import p from "./wj-element.js";
 import "./wj-store.js";
-const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Button Group ]\n*/\n:host {\n  display: inline-block;\n}\n:host .native-button-group {\n  display: flex;\n  flex-wrap: nowrap;\n  line-height: 1;\n}\n:host slot {\n  display: contents;\n}\n::slotted(wj-button) {\n  margin: 0;\n}";
-class ButtonGroup extends WJElement {
+const m = `/*!
+* direction.scss
+*/:host{display:inline-block}:host .native-button-group{display:flex;flex-wrap:nowrap;line-height:1}:host slot{display:contents}::slotted(wj-button){margin:0}
+`;
+class g extends p {
   constructor() {
     super();
-    __publicField(this, "className", "ButtonGroup");
+    u(this, "className", "ButtonGroup");
   }
   static get cssStyleSheet() {
-    return styles;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -21,35 +21,23 @@ class ButtonGroup extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.classList.add("native-button-group");
-    element.setAttribute("part", "native");
-    this.slotElement = document.createElement("slot");
-    element.appendChild(this.slotElement);
-    fragment.appendChild(element);
-    return fragment;
+  draw(t, l, a) {
+    let s = document.createDocumentFragment(), n = document.createElement("div");
+    return n.classList.add("native-button-group"), n.setAttribute("part", "native"), this.slotElement = document.createElement("slot"), n.appendChild(this.slotElement), s.appendChild(n), s;
   }
-  afterDraw(context, store, params) {
-    const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];
-    slottedElements.forEach((el) => {
-      let index = slottedElements.indexOf(el);
-      let button = this.findButton(el);
-      if (button) {
-        button.classList.add("wj-button-group-button");
-        button.classList.toggle("wj-button-group-first", index === 0);
-        button.classList.toggle("wj-button-group-inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("wj-button-group-last", index === slottedElements.length - 1);
-      }
+  afterDraw(t, l, a) {
+    const s = [...this.slotElement.assignedElements({ flatten: !0 })];
+    s.forEach((n) => {
+      let i = s.indexOf(n), r = this.findButton(n);
+      r && (r.classList.add("wj-button-group-button"), r.classList.toggle("wj-button-group-first", i === 0), r.classList.toggle("wj-button-group-inner", i > 0 && i < s.length - 1), r.classList.toggle("wj-button-group-last", i === s.length - 1));
     });
   }
-  findButton(el) {
-    const selector = "wj-button";
-    return el.closest(selector) ?? el.querySelector(selector);
+  findButton(t) {
+    const l = "wj-button";
+    return t.closest(l) ?? t.querySelector(l);
   }
 }
-customElements.get("wj-button-group") || window.customElements.define("wj-button-group", ButtonGroup);
+customElements.get("wj-button-group") || window.customElements.define("wj-button-group", g);
 export {
-  ButtonGroup
+  g as ButtonGroup
 };