wj-elements 0.0.10 → 0.0.12

package/dist/wj-animation.js

@@ -1,24 +1,27 @@
-var m = Object.defineProperty;
-var l = (n, i, t) => i in n ? m(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
-var r = (n, i, t) => (l(n, typeof i != "symbol" ? i + "" : i, t), t);
-import c from "./wj-element.js";
-import { fetchAndParseCSS as h } from "./wj-fetchAndParseCSS.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 { fetchAndParseCSS } from "./wj-fetchAndParseCSS.js";
 import "./wj-store.js";
-const d = "";
-class u extends c {
+const styles = "/*\n[ WJ Animation ]\n*/";
+class Animation extends WJElement {
   constructor() {
     super();
-    r(this, "className", "Animation");
+    __publicField(this, "className", "Animation");
     this._animations = [];
   }
-  set animations(t) {
-    this._animations = t;
+  set animations(value) {
+    this._animations = value;
   }
   get animations() {
     return this._animations;
   }
   static get cssStyleSheet() {
-    return d;
+    return styles;
   }
   static get observedAttributes() {
     return ["name"];
@@ -26,14 +29,19 @@ class u extends c {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, a, e) {
-    let s = document.createDocumentFragment(), o = document.createElement("slot");
-    return s.appendChild(o), this.slotEl = o, s;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let slot = document.createElement("slot");
+    fragment.appendChild(slot);
+    this.slotEl = slot;
+    return fragment;
   }
   async afterDraw() {
-    this.destroyAnimation(), this.animations = await this.getAnimationsArray();
-    const t = this.animations.find((e) => e.name === this.name), a = this.slotEl.assignedElements()[0];
-    this.animation = a.animate(t.keyframes, {
+    this.destroyAnimation();
+    this.animations = await this.getAnimationsArray();
+    const selected = this.animations.find((k) => k.name === this.name);
+    const element = this.slotEl.assignedElements()[0];
+    this.animation = element.animate(selected.keyframes, {
       delay: +this.delay || 0,
       // zdrzanie pred zacatim animacie
       endDelay: +this.endDelay || 0,
@@ -44,22 +52,26 @@ class u extends c {
       // doba trvania animacie v milisekundách
       iterationStart: +this.iterationStart || 0,
       // počet opakování animacie
-      iterations: this.iterations || 1 / 0,
+      iterations: this.iterations || Infinity,
       // počet opakování animacie
       direction: this.direction || "normal",
       // smer animaciee (zpat a dopredu)
       easing: this.easing || "linear"
       // typ spomalenia (rychlost zmen v čase)
-    }), this.animation.play();
+    });
+    this.animation.play();
   }
   destroyAnimation() {
-    this.animation && this.animation.cancel();
+    if (this.animation) {
+      this.animation.cancel();
+    }
   }
   async getAnimationsArray() {
-    return await h("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
+    const cssUrl = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
+    return await fetchAndParseCSS(cssUrl);
   }
 }
-customElements.get("wj-animation") || window.customElements.define("wj-animation", u);
+customElements.get("wj-animation") || window.customElements.define("wj-animation", Animation);
 export {
-  u as Animation
+  Animation
 };

package/dist/wj-aside.js

@@ -1,17 +1,19 @@
-var d = Object.defineProperty;
-var a = (e, t, o) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var s = (e, t, o) => (a(e, typeof t != "symbol" ? t + "" : t, o), o);
-import h 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 n = `: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 h {
+const styles = '/*\n[ WJ 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\n:host(.open) {\n  display: block !important;\n}\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 {
   constructor() {
     super();
-    s(this, "className", "Aside");
+    __publicField(this, "className", "Aside");
   }
   static get cssStyleSheet() {
-    return n;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,14 +21,18 @@ class w extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(o, 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;
+  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;
   }
 }
-customElements.get("wj-aside") || window.customElements.define("wj-aside", w);
+customElements.get("wj-aside") || window.customElements.define("wj-aside", Aside);
 export {
-  w as Aside
+  Aside
 };

package/dist/wj-avatar.js

@@ -1,50 +1,69 @@
-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 n = (r, a, t) => (h(r, typeof a != "symbol" ? a + "" : a, t), t);
-import v 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";
-function w(r, a = 30, t = 80) {
-  let o = r, s = 0;
-  for (let e = 0; e < (o == null ? void 0 : o.length); e++)
-    s = o.charCodeAt(e) + ((s << 5) - s);
-  return "hsl(" + s % 360 + ", " + a + "%, " + t + "%)";
+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 c(r, a = 2) {
-  let t = r.split(" "), o = t[0].substring(0, 1).toUpperCase();
-  return t.length > 1 && a > 1 && (o += t[t.length - 1].substring(0, 1).toUpperCase()), o;
+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;
 }
-const j = `: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: var(--wj-color-contrast-low);--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 g extends v {
+const styles = "/*\n[ WJ Avatar ]\n*/\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: var(--wj-color-contrast-low);\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\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\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\n:host(.wj-avatar-small) {\n  --wj-avatar-width: 24px;\n  --wj-avatar-height: 24px;\n}\n\n:host(.wj-avatar-large) {\n  --wj-avatar-width: 48px;\n  --wj-avatar-height: 48px;\n}";
+class Avatar extends WJElement {
   constructor() {
     super();
-    n(this, "className", "Avatar");
+    __publicField(this, "className", "Avatar");
   }
   static get cssStyleSheet() {
-    return j;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, o, s) {
-    let l = document.createDocumentFragment(), i = document.createElement("div");
-    if (i.setAttribute("part", "native"), i.classList.add("native-avatar"), this.size && this.classList.add("wj-avatar-" + this.size), this.isImage()) {
-      let e = document.createElement("slot");
-      i.appendChild(e);
-    } else if (this.hasAttribute("initials")) {
-      let e = c(this.label);
-      this.setAttribute("style", `--wj-avatar-background-color: ${w(e)}`), i.innerText = e;
+  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);
     } else {
-      let e = document.createElement("slot");
-      e.setAttribute("name", "icon"), i.appendChild(e);
+      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);
+      }
     }
-    return l.appendChild(i), l;
+    fragment.appendChild(element);
+    return fragment;
   }
   isImage() {
     return this.getElementsByTagName("wj-img").length > 0;
   }
 }
-customElements.get("wj-avatar") || window.customElements.define("wj-avatar", g);
+customElements.get("wj-avatar") || window.customElements.define("wj-avatar", Avatar);
 export {
-  g as Avatar
+  Avatar
 };

package/dist/wj-badge.js

@@ -1,31 +1,35 @@
-var e = Object.defineProperty;
-var l = (r, o, t) => o in r ? e(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
-var c = (r, o, t) => (l(r, typeof o != "symbol" ? o + "" : o, t), t);
-import n 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 w = `/*!
-* direction.scss
-*/:host(.wj-color-primary){--wj-color-base: var(--wj-color-primary) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-complete){--wj-color-base: var(--wj-color-complete) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-success){--wj-color-base: var(--wj-color-success) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-warning){--wj-color-base: var(--wj-color-warning) !important;--wj-color-contrast: var(--wj-color-contrast-high) !important}:host(.wj-color-danger){--wj-color-base: var(--wj-color-danger) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-info){--wj-color-base: var(--wj-color-info) !important;--wj-color-contrast: var(--wj-color-contrast-lowest) !important}:host(.wj-color-menu){--wj-color-base: var(--wj-color-contrast-lower) !important;--wj-color-contrast: var(--wj-color-contrast-high) !important}:host{--wj-chip-border-radius: 100px;text-shadow:none;font-family:var(--wj-font-family);font-weight:600;background-color:var(--wj-color-contrast-low);font-size:11px;padding-left:6px;padding-right:6px;color:var(--wj-color-contrast-high);border-radius:10px}:host(.wj-color){background-color:var(--wj-color-base, red);color:var(--wj-color-contrast)}
-`;
-class i extends n {
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ WJ Badge ]\n*/\n:host(.wj-color-primary) {\n  --wj-color-base: var(--wj-color-primary) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-complete) {\n  --wj-color-base: var(--wj-color-complete) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-success) {\n  --wj-color-base: var(--wj-color-success) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-warning) {\n  --wj-color-base: var(--wj-color-warning) !important;\n  --wj-color-contrast: var(--wj-color-contrast-high) !important;\n}\n:host(.wj-color-danger) {\n  --wj-color-base: var(--wj-color-danger) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-info) {\n  --wj-color-base: var(--wj-color-info) !important;\n  --wj-color-contrast: var(--wj-color-contrast-lowest) !important;\n}\n:host(.wj-color-menu) {\n  --wj-color-base: var(--wj-color-contrast-lower) !important;\n  --wj-color-contrast: var(--wj-color-contrast-high) !important;\n}\n:host {\n  --wj-chip-border-radius: 100px;\n  text-shadow: none;\n  font-family: var(--wj-font-family);\n  font-weight: 600;\n  background-color: var(--wj-color-contrast-low);\n  font-size: 11px;\n  padding-left: 6px;\n  padding-right: 6px;\n  color: var(--wj-color-contrast-high);\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 {
   constructor() {
     super();
-    c(this, "className", "Badge");
+    __publicField(this, "className", "Badge");
   }
   static get cssStyleSheet() {
-    return w;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(t, j, m) {
-    let a = document.createDocumentFragment(), s = document.createElement("slot");
-    return this.color && this.classList.add("wj-color-" + this.color, "wj-color"), a.appendChild(s), a;
+  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;
   }
 }
-let g = "true";
-customElements.get("wj-badge") || window.customElements.define("wj-badge", i);
+let __esModule = "true";
+customElements.get("wj-badge") || window.customElements.define("wj-badge", Badge);
 export {
-  i as Badge,
-  g as __esModule
+  Badge,
+  __esModule
 };

package/dist/wj-breadcrumb.js

@@ -1,88 +1,140 @@
-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 j } from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { WjElementUtils, event } from "./wj-element.js";
 import "./wj-store.js";
-const g = `:host{--wj-breadcrumb-a: var(--wj-color-contrast-high);--wj-breadcrumb-a-hover: var(--wj-color-contrast-medium);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 {
+const styles = "/*\n[ WJ Breadcrumbs ]\n*/\n:host {\n  --wj-breadcrumb-a: var(--wj-color-contrast-high);\n  --wj-breadcrumb-a-hover: var(--wj-color-contrast-medium);\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  line-height: 1.5;\n}\n\n:host(.collapsed) {\n  display: none;\n}\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}\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\n.separator {\n  display: inline-flex;\n  align-items: center;\n}\n\n::slotted([slot=start]) {\n  margin-inline: 0 0.5rem;\n}\n\n::slotted([slot=end]) {\n  margin-inline: 0.5rem 0;\n}";
+class Breadcrumb extends WJElement {
   constructor() {
-    var e;
+    var _a;
     super();
-    p(this, "className", "Breadcrumb");
-    this._showSeparator = !0, this._collapsedVariant = ((e = this.parentElement) == null ? void 0 : e.collapsedVariant) || "BUTTON";
+    __publicField(this, "className", "Breadcrumb");
+    this._showSeparator = true;
+    this._collapsedVariant = ((_a = this.parentElement) == null ? void 0 : _a.collapsedVariant) || "BUTTON";
   }
   get showSeparator() {
     return this._showSeparator;
   }
-  set showSeparator(e) {
-    this._showSeparator = e;
+  set showSeparator(value) {
+    this._showSeparator = value;
   }
   get collapsedVariant() {
     return this._collapsedVariant.toUpperCase();
   }
-  set collapsedVariant(e) {
-    this._collapsedVariant = e || this.parentElement.collapsedVariant;
+  set collapsedVariant(value) {
+    this._collapsedVariant = value || this.parentElement.collapsedVariant;
   }
   static get cssStyleSheet() {
-    return g;
+    return styles;
   }
   static get observedAttributes() {
     return ["show-collapsed-indicator", "collapsed", "last"];
   }
-  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;
+  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;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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);
+  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");
     }
-    return this.native = n, s;
+    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;
   }
   drawCollapsedIndicator() {
-    let e = null;
-    return this.collapsedVariant === "DROPDOWN" ? e = this.collapseDropdown() : e = this.collapseButton(), e;
+    let collapsedIndicator = null;
+    if (this.collapsedVariant === "DROPDOWN") {
+      collapsedIndicator = this.collapseDropdown();
+    } else {
+      collapsedIndicator = this.collapseButton();
+    }
+    return collapsedIndicator;
   }
   collapseDropdown() {
-    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("fill", "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" fill="link">
+    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("fill", "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" fill="link">
             <wj-icon name="dots"></wj-icon>
         </wj-button>
         <wj-menu variant="context">
             <wj-menu-item>Test 0</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((s) => {
-    }), e;
+        </wj-menu>`;
+    this.parentElement.querySelectorAll("wj-breadcrumb").forEach((el) => {
+    });
+    return dropdown;
   }
   collapseButton() {
-    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>', j.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;
+    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;
   }
 }
-customElements.get("wj-breadcrumb") || window.customElements.define("wj-breadcrumb", v);
+customElements.get("wj-breadcrumb") || window.customElements.define("wj-breadcrumb", Breadcrumb);
 export {
-  v as Breadcrumb
+  Breadcrumb
 };

package/dist/wj-breadcrumbs.js

@@ -1,37 +1,54 @@
-var i = Object.defineProperty;
-var n = (r, t, e) => t in r ? i(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var u = (r, t, e) => (n(r, typeof t != "symbol" ? t + "" : t, e), e);
-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 p = `:host{display:flex;flex-wrap:wrap;align-items:center}
-`;
-class b extends d {
+const styles = "/*\n[ WJ Breadcrumbs ]\n*/\n:host {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}";
+class Breadcrumbs extends WJElement {
   constructor() {
     super();
-    u(this, "className", "Breadcrumbs");
-    this.last = !1;
+    __publicField(this, "className", "Breadcrumbs");
+    this.last = false;
   }
   static get cssStyleSheet() {
-    return p;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, l, o) {
-    let s = document.createDocumentFragment(), c = document.createElement("slot");
-    return s.appendChild(c), s;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
   }
   afterDraw() {
-    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);
-    });
+    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);
+        }
+      });
+    }
   }
   getBreadcrumbs() {
     return Array.from(this.querySelectorAll("wj-breadcrumb"));
   }
 }
-customElements.get("wj-breadcrumbs") || window.customElements.define("wj-breadcrumbs", b);
+customElements.get("wj-breadcrumbs") || window.customElements.define("wj-breadcrumbs", Breadcrumbs);
 export {
-  b as Breadcrumbs
+  Breadcrumbs
 };