wj-elements 0.0.5 → 0.0.7

package/dist/wj-button.js

@@ -1,17 +1,15 @@
 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";
+var b = (t, e, o) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var c = (t, e, o) => (b(t, typeof e != "symbol" ? e + "" : e, o), o);
+import j, { WjElementUtils as h, event as i } from "./wj-element.js";
 import "./wj-store.js";
-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}
+const u = (t) => t === "false" || t === "null" || t === "NaN" || t === "undefined" || t === "0" ? !1 : !!t, g = `:host(.wj-button-solid.wj-color-primary){--wj-button-background-color: var(--wj-color-primary-10);--wj-button-border-color: var(--wj-color-primary-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-primary){--wj-button-border-color: var(--wj-color-primary-6);--wj-button-color: var(--wj-color-primary-6)}:host(.wj-button-solid.wj-color-complete){--wj-button-background-color: var(--wj-color-complete-10);--wj-button-border-color: var(--wj-color-complete-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-complete){--wj-button-border-color: var(--wj-color-complete-6);--wj-button-color: var(--wj-color-complete-6)}:host(.wj-button-solid.wj-color-success){--wj-button-background-color: var(--wj-color-success-10);--wj-button-border-color: var(--wj-color-success-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-success){--wj-button-border-color: var(--wj-color-success-6);--wj-button-color: var(--wj-color-success-6)}:host(.wj-button-solid.wj-color-warning){--wj-button-background-color: var(--wj-color-warning-10);--wj-button-border-color: var(--wj-color-warning-11);--wj-button-color: var(--wj-color-black)}:host(.wj-button-outline.wj-color-warning){--wj-button-border-color: var(--wj-color-warning-6);--wj-button-color: var(--wj-color-warning-6)}:host(.wj-button-solid.wj-color-danger){--wj-button-background-color: var(--wj-color-danger-10);--wj-button-border-color: var(--wj-color-danger-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-danger){--wj-button-border-color: var(--wj-color-danger-6);--wj-button-color: var(--wj-color-danger-6)}:host(.wj-button-solid.wj-color-neutral){--wj-button-background-color: var(--wj-color-contrast-10);--wj-button-border-color: var(--wj-color-contrast-11);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-neutral){--wj-button-border-color: var(--wj-color-contrast-6);--wj-button-color: var(--wj-color-contrast-6)}:host(.wj-button-solid.wj-color-default){--wj-button-background-color: transparent;--wj-button-border-color: var(--wj-color-contrast-4);--wj-button-color: var(--wj-color-contrast-11)}:host(.wj-button-outline.wj-color-default){--wj-button-border-color: var(--wj-color-contrast-4);--wj-button-color: var(--wj-color-contrast-11)}:host{--wj-button-border-radius: 4px;--wj-button-border-width: 1px;--wj-button-border-style: solid;--wj-button-border-color: var(--wj-color-contrast-1);--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-inline:var(--wj-padding-start) var(--wj-padding-end)}@media (any-hover: hover){:host(.wj-button-solid.wj-color-primary:hover){--wj-button-background-color: var(--wj-color-primary-9);--wj-button-border-color: var(--wj-color-primary-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-primary:hover){--wj-button-background-color: var(--wj-color-primary-1);--wj-button-border-color: var(--wj-color-primary-11);--wj-button-color: var(--wj-color-primary-11)}:host(.wj-button-solid.wj-color-complete:hover){--wj-button-background-color: var(--wj-color-complete-9);--wj-button-border-color: var(--wj-color-complete-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-complete:hover){--wj-button-background-color: var(--wj-color-complete-1);--wj-button-border-color: var(--wj-color-complete-11);--wj-button-color: var(--wj-color-complete-11)}:host(.wj-button-solid.wj-color-success:hover){--wj-button-background-color: var(--wj-color-success-9);--wj-button-border-color: var(--wj-color-success-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-success:hover){--wj-button-background-color: var(--wj-color-success-1);--wj-button-border-color: var(--wj-color-success-11);--wj-button-color: var(--wj-color-success-11)}:host(.wj-button-solid.wj-color-warning:hover){--wj-button-background-color: var(--wj-color-warning-9);--wj-button-border-color: var(--wj-color-warning-10);--wj-button-color: var(--wj-color-black)}:host(.wj-button-outline.wj-color-warning:hover){--wj-button-background-color: var(--wj-color-warning-1);--wj-button-border-color: var(--wj-color-warning-11);--wj-button-color: var(--wj-color-warning-11)}:host(.wj-button-solid.wj-color-danger:hover){--wj-button-background-color: var(--wj-color-danger-9);--wj-button-border-color: var(--wj-color-danger-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-danger:hover){--wj-button-background-color: var(--wj-color-danger-1);--wj-button-border-color: var(--wj-color-danger-11);--wj-button-color: var(--wj-color-danger-11)}:host(.wj-button-solid.wj-color-neutral:hover){--wj-button-background-color: var(--wj-color-contrast-9);--wj-button-border-color: var(--wj-color-contrast-10);--wj-button-color: var(--wj-color-contrast-0)}:host(.wj-button-outline.wj-color-neutral:hover){--wj-button-background-color: var(--wj-color-contrast-1);--wj-button-border-color: var(--wj-color-contrast-11);--wj-button-color: var(--wj-color-contrast-11)}:host(.wj-button-solid.wj-color-default:hover){--wj-button-background-color: var(--wj-color-contrast-1);--wj-button-border-color: var(--wj-color-contrast-2);--wj-button-color: var(--wj-color-contrast-9)}:host(.wj-button-outline.wj-color-default:hover){--wj-button-background-color: var(--wj-color-contrast-1);--wj-button-border-color: var(--wj-color-contrast-2);--wj-button-color: var(--wj-color-contrast-9)}:host(.wj-button-link:hover){--wj-button-background-color: var(--wj-color-contrast-1) !important;--wj-button-border-color: transparent !important;color:var(--wj-color-contrast-9)!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-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: var(--wj-border-radius-pill)}:host(.wj-button-circle){--wj-button-border-radius: var(--wj-border-radius-circle);aspect-ratio:1/1}: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}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) slot[name=caret]{padding:0;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}::slotted([slot=toggle]){display:none}::slotted([slot=toggle].show){display:block}
 `;
-class h extends w {
+class p extends j {
   constructor() {
     super();
-    u(this, "className", "Button");
-    u(this, "eventDialogOpen", (t) => {
+    c(this, "className", "Button");
+    c(this, "eventDialogOpen", (o) => {
       document.dispatchEvent(
         new CustomEvent(
           this.dialog,
@@ -21,45 +19,44 @@ class h extends w {
         )
       );
     });
+    c(this, "toggleStates", () => {
+      this.slotToggle.assignedNodes().filter((l) => l.nodeType === Node.ELEMENT_NODE).forEach((l) => {
+        l.classList.contains("show") ? l.classList.remove("show") : l.classList.add("show");
+      });
+    });
   }
-  set active(t) {
+  set active(o) {
     this.setAttribute("active", "");
   }
   get active() {
     return this.hasAttribute("active");
   }
-  set disabled(t) {
+  set disabled(o) {
     this.setAttribute("disabled", "");
   }
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set fill(t) {
-    this.setAttribute("fill", t);
+  set fill(o) {
+    this.setAttribute("fill", o);
   }
   get fill() {
     return this.getAttribute("fill") || "solid";
   }
-  set outline(t) {
+  set outline(o) {
     this.setAttribute("outline", "");
   }
   get outline() {
     return this.hasAttribute("outline");
   }
-  set round(t) {
-    this.setAttribute("round", "");
-  }
-  get round() {
-    return this.hasAttribute("round");
-  }
-  set stopPropagation(t) {
-    this.setAttribute("stop-propagation", b(t));
+  set stopPropagation(o) {
+    this.setAttribute("stop-propagation", u(o));
   }
   get stopPropagation() {
-    return console.log("SP:", b(this.getAttribute("stop-propagation")), this.innerHTML, this.getAttribute("stop-propagation")), b(this.getAttribute("stop-propagation"));
+    return u(this.getAttribute("stop-propagation"));
   }
   static get cssStyleSheet() {
-    return j;
+    return g;
   }
   static get observedAttributes() {
     return [];
@@ -67,33 +64,33 @@ class h extends w {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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);
+  draw(o, l, v) {
+    let w = document.createDocumentFragment();
+    if (this.disabled && this.classList.add("wj-button-disabled"), this.variant && this.classList.add("wj-button-" + this.variant), this.hasAttribute("round") && this.classList.add("wj-button-round"), this.hasAttribute("circle") && this.classList.add("wj-button-circle"), 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") || this.hasAttribute("only-caret")) {
+      let a = document.createElement("wj-icon");
+      a.style.setProperty("--wj-icon-size", "14px"), a.setAttribute("slot", "caret"), a.setAttribute("name", "chevron-down"), this.appendChild(a);
     }
     if (this.active) {
       this.classList.add("wj-active");
-      let i = document.createElement("wj-icon");
-      i.setAttribute("name", "check"), this.appendChild(i);
+      let a = document.createElement("wj-icon");
+      a.setAttribute("name", "check"), this.appendChild(a);
     }
     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 s = document.createElement(this.hasAttribute("href") ? "a" : "button");
+    s.classList.add("button-native"), s.setAttribute("part", "native");
+    let n = document.createElement("span");
+    n.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;
+    return r.setAttribute("name", "icon-only"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "start"), n.appendChild(r), r = document.createElement("slot"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "end"), n.appendChild(r), r = document.createElement("slot"), r.setAttribute("name", "caret"), n.appendChild(r), this.hasToggle = h.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), n.appendChild(this.slotToggle)), s.appendChild(n), w.appendChild(s), w;
   }
   afterDraw() {
-    console.log("Stop propagation: ", this.stopPropagation), a.addListener(this, "click", "wj:button-click", null, { stopPropagation: this.stopPropagation }), a.addListener(this, "click", null, this.eventDialogOpen);
+    this.hasToggle && (this.toggle === "off" ? this.slotToggle.assignedNodes()[1].classList.add("show") : this.slotToggle.assignedNodes()[0].classList.add("show")), i.addListener(this, "click", "wj:button-click", null, { stopPropagation: this.stopPropagation }), i.addListener(this, "click", null, this.eventDialogOpen), this.hasToggle && i.addListener(this, "click", "wj-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation });
   }
   beforeDisconnect() {
     this.removeEventListener("click", this.eventDialogOpen);
   }
 }
-customElements.get("wj-button") || window.customElements.define("wj-button", h);
+customElements.get("wj-button") || window.customElements.define("wj-button", p);
 export {
-  h as Button
+  p as Button
 };

package/dist/wj-card-content.js

@@ -1,16 +1,14 @@
-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);
+var s = Object.defineProperty;
+var d = (e, t, o) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var r = (e, t, o) => (d(e, typeof t != "symbol" ? t + "" : t, o), o);
 import i from "./wj-element.js";
 import "./wj-store.js";
-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}
+const m = `: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 {
+class p extends i {
   constructor() {
     super();
-    s(this, "className", "CardContent");
+    r(this, "className", "CardContent");
   }
   static get cssStyleSheet() {
     return m;
@@ -18,12 +16,12 @@ class c extends i {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(n, p, l) {
-    let o = document.createDocumentFragment(), r = document.createElement("slot");
-    return o.appendChild(r), o;
+  draw(o, c, l) {
+    let n = document.createDocumentFragment(), a = document.createElement("slot");
+    return n.appendChild(a), n;
   }
 }
-customElements.get("wj-card-content") || window.customElements.define("wj-card-content", c);
+customElements.get("wj-card-content") || window.customElements.define("wj-card-content", p);
 export {
-  c as CardContent
+  p as CardContent
 };

package/dist/wj-card-controls.js

@@ -1,16 +1,14 @@
 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);
+var s = (e, t, o) => (i(e, typeof t != "symbol" ? t + "" : t, o), o);
 import l from "./wj-element.js";
 import "./wj-store.js";
-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}
+const c = `:host{--wj-card-subtitle-font-size: 28px;--wj-card-subtitle-font-family: var(--wj-font-family-secondary);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);transition:opacity .3s ease;position:absolute;right:1rem;top:.5rem}
 `;
 class m extends l {
   constructor() {
     super();
-    n(this, "className", "CardControls");
+    s(this, "className", "CardControls");
   }
   static get cssStyleSheet() {
     return c;
@@ -18,9 +16,9 @@ class m extends l {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(o, p, d) {
-    let s = document.createDocumentFragment(), r = document.createElement("slot");
-    return s.appendChild(r), s;
+  draw(o, d, p) {
+    let r = document.createDocumentFragment(), n = document.createElement("slot");
+    return r.appendChild(n), r;
   }
 }
 customElements.get("wj-card-controls") || window.customElements.define("wj-card-controls", m);

package/dist/wj-card-header.js

@@ -1,26 +1,24 @@
-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";
+var d = Object.defineProperty;
+var n = (t, e, r) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var s = (t, e, r) => (n(t, typeof e != "symbol" ? e + "" : e, r), r);
+import i from "./wj-element.js";
 import "./wj-store.js";
-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}
+const c = `:host{--wj-card-header-padding: 1rem 1rem .5rem;background:transparent;border-radius:0;border-bottom:0;padding:var(--wj-card-header-padding);position:relative;display:flex;flex-direction:column}:host(.wj-separator):after{content:"";height:1px;background:rgba(0,0,0,.08);margin-top:.5rem}
 `;
-class m extends c {
+class m extends i {
   constructor() {
     super();
-    o(this, "className", "CardHeader");
+    s(this, "className", "CardHeader");
   }
   static get cssStyleSheet() {
-    return i;
+    return c;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  draw(r, p, l) {
+    let a = document.createDocumentFragment(), o = document.createElement("slot");
+    return this.hasAttribute("separator") && this.classList.add("wj-separator"), a.appendChild(o), a;
   }
 }
 customElements.get("wj-card-header") || window.customElements.define("wj-card-header", m);

package/dist/wj-card-subtitle.js

@@ -1,19 +1,17 @@
 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";
+var c = (r, t, e) => t in r ? l(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var s = (r, t, e) => (c(r, typeof t != "symbol" ? t + "" : t, e), e);
+import d from "./wj-element.js";
 import "./wj-store.js";
-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)}
+const m = `:host{--wj-card-subtitle-font-size: 10.5px;--wj-card-subtitle-font-family: var(--wj-font-family-secondary);--wj-card-subtitle-padding: 0;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:var(--wj-card-subtitle-padding);line-height:normal;overflow:hidden;text-overflow:ellipsis;filter:alpha(opacity=40)}
 `;
-class u extends m {
+class u extends d {
   constructor() {
     super();
-    n(this, "className", "CardTitle");
+    s(this, "className", "CardTitle");
   }
   static get cssStyleSheet() {
-    return d;
+    return m;
   }
   static get observedAttributes() {
     return [];
@@ -21,9 +19,9 @@ class u extends m {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(e, r, i) {
+  beforeDraw(e, i, n) {
   }
-  draw(e, r, i) {
+  draw(e, i, n) {
     let a = document.createDocumentFragment(), o = document.createElement("slot");
     return a.appendChild(o), a;
   }

package/dist/wj-card-title.js

@@ -1,19 +1,17 @@
-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";
+var l = Object.defineProperty;
+var s = (e, t, i) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var a = (e, t, i) => (s(e, typeof t != "symbol" ? t + "" : t, i), i);
+import d from "./wj-element.js";
 import "./wj-store.js";
-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}
+const o = `: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;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 {
+class c extends d {
   constructor() {
     super();
     a(this, "className", "CardTitle");
   }
   static get cssStyleSheet() {
-    return d;
+    return o;
   }
   static get observedAttributes() {
     return [];

package/dist/wj-card.js

@@ -1,29 +1,27 @@
-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";
+var n = Object.defineProperty;
+var l = (r, o, a) => o in r ? n(r, o, { enumerable: !0, configurable: !0, writable: !0, value: a }) : r[o] = a;
+var e = (r, o, a) => (l(r, typeof o != "symbol" ? o + "" : o, a), a);
+import d from "./wj-element.js";
 import "./wj-store.js";
-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)}
+const i = `:host{--wj-card-margin-top: 0;--wj-card-margin-bottom: 1rem;--wj-card-margin-inline: 0;--wj-card-border-color: transparent}:host(.wj-color-primary){--wj-card-background: var(--wj-color-primary)}:host(.wj-color-complete){--wj-card-background: var(--wj-color-complete)}:host(.wj-color-success){--wj-card-background: var(--wj-color-success)}:host(.wj-color-warning){--wj-card-background: var(--wj-color-warning)}:host(.wj-color-danger){--wj-card-background: var(--wj-color-danger)}:host(.wj-color-info){--wj-card-background: var(--wj-color-info)}:host(.wj-color-menu){--wj-card-background: var(--wj-color-menu)}:host(.wj-color-primary){--wj-card-color: var(--wj-color-white)}:host(.wj-color-complete){--wj-card-color: var(--wj-color-white)}:host(.wj-color-success){--wj-card-color: var(--wj-color-white)}:host(.wj-color-warning){--wj-card-color: var(--wj-color)}:host(.wj-color-danger){--wj-card-color: var(--wj-color-white)}:host(.wj-color-info){--wj-card-color: var(--wj-color-white)}:host(.wj-color-menu){--wj-card-color: var(--wj-color-white) !important}:host{background-color:var(--wj-card-background);color:var(--wj-card-color)!important;margin-top:var(--wj-card-margin-top);margin-bottom:var(--wj-card-margin-bottom);margin-inline:var(--wj-card-margin-inline);box-shadow:var(--wj-box-shadow-large);border-color:var(--wj-border-color);border-style:var(--wj-border-style);border-width:var(--wj-border-size);border-radius:var(--wj-border-radius-medium);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(.wj-color){background-color:var(--wj-card-background, #fff);color:var(--wj-card-color)}
 `;
-class h extends i {
+class s extends d {
   constructor() {
     super();
-    n(this, "className", "Card");
+    e(this, "className", "Card");
   }
   static get cssStyleSheet() {
-    return l;
+    return i;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  draw(a, j, c) {
+    let t = document.createDocumentFragment(), w = document.createElement("slot");
+    return c.color && this.classList.add("wj-color-" + c.color, "wj-color"), t.appendChild(w), t;
   }
 }
-customElements.get("wj-card") || window.customElements.define("wj-card", h);
+customElements.get("wj-card") || window.customElements.define("wj-card", s);
 export {
-  h as Card
+  s as Card
 };

package/dist/wj-carousel-item.js

@@ -0,0 +1,32 @@
+var n = Object.defineProperty;
+var l = (e, t, s) => t in e ? n(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var r = (e, t, s) => (l(e, typeof t != "symbol" ? t + "" : t, s), s);
+import c from "./wj-element.js";
+import "./wj-store.js";
+const m = `:host{--aspect-ratio: inherit;display:flex;align-items:center;justify-content:center;flex-direction:column;width:var(--wj-carousel-size, 100%);max-height:100%;aspect-ratio:var(--aspect-ratio);scroll-snap-align:center;scroll-snap-stop:always}.native-carousel-item{width:100%;height:100%;display:flex}::slotted(wj-img){width:100%!important;height:100%!important;object-fit:contain;display:flex}
+`;
+class d extends c {
+  constructor() {
+    super();
+    r(this, "className", "CarouselItem");
+  }
+  static get cssStyleSheet() {
+    return m;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(s, u, p) {
+    let i = document.createDocumentFragment(), a = document.createElement("div");
+    a.classList.add("native-carousel-item"), a.setAttribute("part", "native");
+    let o = document.createElement("slot");
+    return a.appendChild(o), i.appendChild(a), i;
+  }
+}
+customElements.get("wj-carousel-item") || window.customElements.define("wj-carousel-item", d);
+export {
+  d as CarouselItem
+};

package/dist/wj-carousel.js

@@ -0,0 +1,178 @@
+var g = Object.defineProperty;
+var p = (o, a, e) => a in o ? g(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
+var u = (o, a, e) => (p(o, typeof a != "symbol" ? a + "" : a, e), e);
+import v from "./wj-element.js";
+import "./wj-store.js";
+const b = `/*!
+* direction.scss
+*/:host{--wj-scroll-hint: 0px;--wj-carousel-width: 100%;--wj-carousel-height: auto}.native-carousel{position:relative;width:var(--wj-carousel-width, 100%);height:var(--wj-carousel-height, 300px);scroll-behavior:smooth}.carousel-slides{display:flex;transition:transform .5s ease;align-items:center;justify-items:center;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;aspect-ratio:var(--wj-aspect-ratio, 4/3);scroll-snap-type:x mandatory;scroll-padding-inline:0;overflow-y:hidden;padding-inline:var(--wj-spacing-inline, 0);gap:.5rem}.carousel-slides::-webkit-scrollbar{display:none}::slotted(wj-carousel-item){flex:0 0 var(--wj-carousel-size, 100%);height:100%}wj-button{position:absolute;top:50%;border:none;cursor:pointer;z-index:2}.prev{left:-1rem;transform:translate(-100%,-50%)}.next{right:-.5rem;transform:translate(100%,-50%)}.pagination{position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%,100%);display:flex;z-index:2}.pagination-item{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:var(--wj-color-contrast-4);display:inline-block;border-radius:50%}.pagination-item.active{background-color:var(--wj-color)}.thumbnails{display:flex;justify-content:center;align-items:center;overflow-x:auto;gap:.5rem;padding:0 .5rem;margin-top:.5rem;margin-bottom:.5rem;box-sizing:border-box;overflow-y:hidden}.thumbnails wj-thumbnail{--wj-thumbnail-width: 48px;--wj-thumbnail-height: 48px;--wj-thumbnail-border-radius: 0;cursor:pointer;border:1px solid transparent}.thumbnails .active{border:1px solid var(--wj-color-primary-11)}
+`;
+class f extends v {
+  constructor() {
+    super();
+    u(this, "className", "Carousel");
+    this.activeSlide = 0, this.slidePerPage = 1;
+  }
+  set activeSlide(e) {
+    this.setAttribute("active-slide", e);
+  }
+  get activeSlide() {
+    return +this.getAttribute("active-slide") || 0;
+  }
+  get pagination() {
+    return this.hasAttribute("pagination");
+  }
+  get navigation() {
+    return this.hasAttribute("navigation");
+  }
+  get thumbnails() {
+    return this.hasAttribute("thumbnails");
+  }
+  get loop() {
+    return this.hasAttribute("loop");
+  }
+  static get cssStyleSheet() {
+    return b;
+  }
+  static get observedAttributes() {
+    return ["active-slide"];
+  }
+  attributeChangedCallback(e, i, n) {
+    e === "active-slide" && (this.pagination && this.changePagination(), this.thumbnails && this.changeThumbnails());
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(e, i, n) {
+    let r = document.createDocumentFragment(), t = document.createElement("div");
+    t.classList.add("native-carousel");
+    let s = document.createElement("div");
+    s.classList.add("carousel-slides");
+    let l = document.createElement("slot");
+    return s.appendChild(l), t.appendChild(s), this.navigation && (t.appendChild(this.createPreviousButton()), t.appendChild(this.createNextButton())), this.pagination && t.appendChild(this.createPagination()), this.thumbnails && t.appendChild(this.createThumbnails()), r.appendChild(t), this.slides = s, this.cloneFirstAndLastItems(), r;
+  }
+  setIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver((e) => {
+      e.forEach((i) => {
+        this.entriesMap.set(i.target, i);
+      });
+    }, {
+      root: this.context.querySelector(".carousel-slides"),
+      threshold: 0.5
+    }), this.entriesMap = /* @__PURE__ */ new Map(), this.records = this.intersectionObserver.takeRecords(), this.records.forEach((e) => {
+      this.entriesMap.set(e.target, e);
+    });
+  }
+  afterDraw() {
+    this.setIntersectionObserver(), this.getSlidesWithClones().forEach((i, n) => {
+      this.intersectionObserver.observe(i);
+    }), this.slidePerPage = this.getAttribute("slide-per-page") || 1;
+    let e = 100 / +this.slidePerPage;
+    this.style.setProperty("--wj-carousel-size", e + "%"), this.goToSlide(this.activeSlide, "auto"), this.slides.addEventListener("scrollend", (i) => {
+      const n = this.getSlides(), t = [...this.entriesMap.values()].find((s) => s.isIntersecting);
+      if (t != null && t.target.classList.contains("clone")) {
+        const s = t.target.getAttribute("clone-index");
+        this.activeSlide = s, this.goToSlide(+s, "auto");
+      } else if (t) {
+        let s = n.indexOf(t.target);
+        this.activeSlide = s;
+      }
+    });
+  }
+  goToSlide(e, i = "smooth", n = !0) {
+    const r = this.getSlides(), t = this.getSlidesWithClones();
+    t.forEach((m, S) => {
+      m.classList.remove("active");
+    });
+    let s = this.loop ? (e + r.length) % r.length : Math.min(Math.max(e, 0), r.length - 1);
+    this.activeSlide = s;
+    const l = Math.min(Math.max(e + (this.loop ? this.slidePerPage : 0), 0), t.length - 1), c = this.getSlidesWithClones()[l];
+    c.classList.add("active");
+    let d = c.getBoundingClientRect(), h = this.slides.getBoundingClientRect();
+    this.slides.scrollTo({
+      left: d.left - h.left + this.slides.scrollLeft,
+      top: d.top - h.top + this.slides.scrollTop,
+      behavior: i === "smooth" ? "smooth" : "auto"
+    });
+  }
+  cloneFirstAndLastItems() {
+    const e = this.getSlides();
+    if (e.length && this.loop) {
+      const i = e[0].cloneNode(!0);
+      i.classList.add("clone"), i.setAttribute("clone-index", 0), this.appendChild(i);
+      const n = e[e.length - 1].cloneNode(!0);
+      n.classList.add("clone"), n.setAttribute("clone-index", e.length - 1), this.insertBefore(n, this.firstChild);
+    }
+  }
+  removeActiveSlide() {
+    this.getSlidesWithClones().forEach((e, i) => {
+      e.classList.remove("active");
+    }), this.pagination && this.context.querySelectorAll(".pagination-item").forEach((e) => {
+      e.classList.remove("active");
+    }), this.thumbnails && this.context.querySelectorAll("wj-thumbnail").forEach((e) => {
+      e.classList.remove("active");
+    });
+  }
+  changePagination() {
+    this.pagination && (this.removeActiveSlide(), this.context.querySelectorAll(".pagination-item").forEach((e, i) => {
+      i === this.activeSlide && e.classList.add("active");
+    }));
+  }
+  changeThumbnails() {
+    this.thumbnails && (this.removeActiveSlide(), this.context.querySelectorAll("wj-thumbnail").forEach((e, i) => {
+      i === this.activeSlide && e.classList.add("active");
+    }));
+  }
+  createNextButton() {
+    const e = document.createElement("wj-button");
+    return e.classList.add("next"), e.innerHTML = '<wj-icon name="chevron-right" size="large"></wj-icon', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
+      this.nextSlide();
+    }), e;
+  }
+  createPreviousButton() {
+    const e = document.createElement("wj-button");
+    return e.classList.add("prev"), e.innerHTML = '<wj-icon name="chevron-left" size="large"></wj-icon', e.setAttribute("circle", ""), e.setAttribute("fill", "link"), e.addEventListener("click", (i) => {
+      this.previousSlide();
+    }), e;
+  }
+  createPagination() {
+    const e = document.createElement("div");
+    return e.classList.add("pagination"), this.getSlides().forEach((n, r) => {
+      const t = document.createElement("div");
+      t.classList.add("pagination-item"), t.addEventListener("click", (s) => {
+        this.removeActiveSlide(), s.target.classList.add("active"), this.goToSlide(r);
+      }), e.appendChild(t);
+    }), e;
+  }
+  createThumbnails() {
+    const e = document.createElement("div");
+    return e.classList.add("thumbnails"), this.getSlides().forEach((n, r) => {
+      const t = document.createElement("wj-thumbnail");
+      t.innerHTML = `<img src="${n.querySelector("wj-img").getAttribute("src")}"></img>`, t.addEventListener("click", (s) => {
+        this.removeActiveSlide(), s.target.closest("wj-thumbnail").classList.add("active"), this.goToSlide(r);
+      }), e.appendChild(t);
+    }), e;
+  }
+  nextSlide() {
+    this.goToSlide(this.activeSlide + this.slidePerPage);
+  }
+  previousSlide() {
+    this.goToSlide(this.activeSlide - this.slidePerPage);
+  }
+  getSlides() {
+    return Array.from(this.querySelectorAll("wj-carousel-item:not(.clone)"));
+  }
+  getSlidesWithClones() {
+    return Array.from(this.querySelectorAll("wj-carousel-item"));
+  }
+  canGoNext() {
+    return this.querySelector(".native-carousel").scrollLeft < this.querySelector(".native-carousel").scrollWidth;
+  }
+  canGoPrevious() {
+    return this.querySelector(".native-carousel").scrollLeft > 0;
+  }
+}
+customElements.get("wj-carousel") || window.customElements.define("wj-carousel", f);
+export {
+  f as Carousel
+};