wj-elements 0.0.11 → 0.0.13

package/dist/wj-card.js

@@ -1,27 +1,33 @@
-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";
+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 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 s extends d {
+const styles = "/*\n[ WJ Card ]\n*/\n:host {\n  --wj-card-margin-top: 0;\n  --wj-card-margin-bottom: 1rem;\n  --wj-card-margin-inline: 0;\n  --wj-card-border-color: transparent;\n}\n\n:host(.wj-color-primary) {\n  --wj-card-background: var(--wj-color-primary);\n}\n\n:host(.wj-color-complete) {\n  --wj-card-background: var(--wj-color-complete);\n}\n\n:host(.wj-color-success) {\n  --wj-card-background: var(--wj-color-success);\n}\n\n:host(.wj-color-warning) {\n  --wj-card-background: var(--wj-color-warning);\n}\n\n:host(.wj-color-danger) {\n  --wj-card-background: var(--wj-color-danger);\n}\n\n:host(.wj-color-info) {\n  --wj-card-background: var(--wj-color-info);\n}\n\n:host(.wj-color-menu) {\n  --wj-card-background: var(--wj-color-menu);\n}\n\n:host(.wj-color-primary) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-complete) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-success) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-warning) {\n  --wj-card-color: var(--wj-color);\n}\n\n:host(.wj-color-danger) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-info) {\n  --wj-card-color: var(--wj-color-white);\n}\n\n:host(.wj-color-menu) {\n  --wj-card-color: var(--wj-color-white) !important;\n}\n\n:host {\n  background-color: var(--wj-card-background);\n  color: var(--wj-card-color) !important;\n  margin-top: var(--wj-card-margin-top);\n  margin-bottom: var(--wj-card-margin-bottom);\n  margin-inline: var(--wj-card-margin-inline);\n  box-shadow: var(--wj-box-shadow-large);\n  border-color: var(--wj-border-color);\n  border-style: var(--wj-border-style);\n  border-width: var(--wj-border-size);\n  border-radius: var(--wj-border-radius-medium);\n  font-family: var(--wj-font-family);\n  font-size: var(--wj-font-size);\n  line-height: var(--wj-line-height);\n  position: relative;\n  width: 100%;\n  word-wrap: normal;\n  display: flex;\n  flex-direction: column;\n  contain: content;\n  overflow: hidden;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n:host(.wj-color) {\n  background-color: var(--wj-card-background, #fff);\n  color: var(--wj-card-color);\n}";
+class Card extends WJElement {
   constructor() {
     super();
-    e(this, "className", "Card");
+    __publicField(this, "className", "Card");
   }
   static get cssStyleSheet() {
-    return i;
+    return styles;
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    if (params.color)
+      this.classList.add("wj-color-" + params.color, "wj-color");
+    fragment.appendChild(element);
+    return fragment;
   }
 }
-customElements.get("wj-card") || window.customElements.define("wj-card", s);
+customElements.get("wj-card") || window.customElements.define("wj-card", Card);
 export {
-  s as Card
+  Card
 };

package/dist/wj-carousel-item.js

@@ -1,17 +1,19 @@
-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";
+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 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 {
+const styles = "/*\n[ WJ Carousel Item ]\n*/\n:host {\n  --aspect-ratio: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: var(--wj-carousel-size, 100%);\n  max-height: 100%;\n  aspect-ratio: var(--aspect-ratio);\n  scroll-snap-align: center;\n  scroll-snap-stop: always;\n}\n\n.native-carousel-item {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n::slotted(wj-img) {\n  width: 100% !important;\n  height: 100% !important;\n  object-fit: contain;\n  display: flex;\n}";
+class CarouselItem extends WJElement {
   constructor() {
     super();
-    r(this, "className", "CarouselItem");
+    __publicField(this, "className", "CarouselItem");
   }
   static get cssStyleSheet() {
-    return m;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,14 +21,18 @@ class d extends c {
   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;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-carousel-item");
+    native.setAttribute("part", "native");
+    let slot = document.createElement("slot");
+    native.appendChild(slot);
+    fragment.appendChild(native);
+    return fragment;
   }
 }
-customElements.get("wj-carousel-item") || window.customElements.define("wj-carousel-item", d);
+customElements.get("wj-carousel-item") || window.customElements.define("wj-carousel-item", CarouselItem);
 export {
-  d as CarouselItem
+  CarouselItem
 };

package/dist/wj-carousel.js

@@ -1,20 +1,21 @@
-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";
+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 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 {
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Carousel ]\n*/\n:host {\n  --wj-scroll-hint: 0px;\n  --wj-carousel-width: 100%;\n  --wj-carousel-height: auto;\n}\n.native-carousel {\n  position: relative;\n  width: var(--wj-carousel-width, 100%);\n  height: var(--wj-carousel-height, 300px);\n  scroll-behavior: smooth;\n}\n.carousel-slides {\n  display: flex;\n  transition: transform 0.5s ease;\n  align-items: center;\n  justify-items: center;\n  overflow: auto;\n  overscroll-behavior-x: contain;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  aspect-ratio: var(--wj-aspect-ratio, 4/3);\n  scroll-snap-type: x mandatory;\n  scroll-padding-inline: 0;\n  overflow-y: hidden;\n  padding-inline: var(--wj-spacing-inline, 0);\n  gap: 0.5rem;\n}\n.carousel-slides::-webkit-scrollbar {\n  display: none;\n}\n::slotted(wj-carousel-item) {\n  flex: 0 0 var(--wj-carousel-size, 100%);\n  height: 100%;\n}\nwj-button {\n  position: absolute;\n  top: 50%;\n  border: none;\n  cursor: pointer;\n  z-index: 2;\n}\n.prev {\n  left: -1rem;\n  transform: translate(-100%, -50%);\n}\n.next {\n  right: -0.5rem;\n  transform: translate(100%, -50%);\n}\n.pagination {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 50%;\n  transform: translate(-50%, 100%);\n  display: flex;\n  z-index: 2;\n}\n.pagination-item {\n  cursor: pointer;\n  height: 15px;\n  width: 15px;\n  margin: 0 2px;\n  background-color: var(--wj-color-contrast-4);\n  display: inline-block;\n  border-radius: 50%;\n}\n.pagination-item.active {\n  background-color: var(--wj-color);\n}\n.thumbnails {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: auto;\n  gap: 0.5rem;\n  padding: 0 0.5rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n  box-sizing: border-box;\n  overflow-y: hidden;\n}\n.thumbnails wj-thumbnail {\n  --wj-thumbnail-width: 48px;\n  --wj-thumbnail-height: 48px;\n  --wj-thumbnail-border-radius: 0;\n  cursor: pointer;\n  border: 1px solid transparent;\n}\n.thumbnails .active {\n  border: 1px solid var(--wj-color-primary-11);\n}";
+class Carousel extends WJElement {
   constructor() {
     super();
-    u(this, "className", "Carousel");
-    this.activeSlide = 0, this.slidePerPage = 1;
+    __publicField(this, "className", "Carousel");
+    this.activeSlide = 0;
+    this.slidePerPage = 1;
   }
-  set activeSlide(e) {
-    this.setAttribute("active-slide", e);
+  set activeSlide(value) {
+    this.setAttribute("active-slide", value);
   }
   get activeSlide() {
     return +this.getAttribute("active-slide") || 0;
@@ -32,126 +33,202 @@ class f extends v {
     return this.hasAttribute("loop");
   }
   static get cssStyleSheet() {
-    return b;
+    return styles;
   }
   static get observedAttributes() {
     return ["active-slide"];
   }
-  attributeChangedCallback(e, i, n) {
-    e === "active-slide" && (this.pagination && this.changePagination(), this.thumbnails && this.changeThumbnails());
+  attributeChangedCallback(name, old, newName) {
+    if (name === "active-slide") {
+      if (this.pagination)
+        this.changePagination();
+      if (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;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-carousel");
+    let slides = document.createElement("div");
+    slides.classList.add("carousel-slides");
+    let slot = document.createElement("slot");
+    slides.appendChild(slot);
+    native.appendChild(slides);
+    if (this.navigation) {
+      native.appendChild(this.createPreviousButton());
+      native.appendChild(this.createNextButton());
+    }
+    if (this.pagination)
+      native.appendChild(this.createPagination());
+    if (this.thumbnails)
+      native.appendChild(this.createThumbnails());
+    fragment.appendChild(native);
+    this.slides = slides;
+    this.cloneFirstAndLastItems();
+    return fragment;
   }
   setIntersectionObserver() {
-    this.intersectionObserver = new IntersectionObserver((e) => {
-      e.forEach((i) => {
-        this.entriesMap.set(i.target, i);
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        this.entriesMap.set(entry.target, entry);
       });
     }, {
       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);
+    });
+    this.entriesMap = /* @__PURE__ */ new Map();
+    this.records = this.intersectionObserver.takeRecords();
+    this.records.forEach((entry) => {
+      this.entriesMap.set(entry.target, entry);
     });
   }
   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;
+    this.setIntersectionObserver();
+    this.getSlidesWithClones().forEach((slide, i) => {
+      this.intersectionObserver.observe(slide);
+    });
+    this.slidePerPage = this.getAttribute("slide-per-page") || 1;
+    let carouselSize = 100 / +this.slidePerPage;
+    this.style.setProperty("--wj-carousel-size", carouselSize + "%");
+    this.goToSlide(this.activeSlide, "auto");
+    this.slides.addEventListener("scrollend", (e) => {
+      const slides = this.getSlides();
+      const entries = [...this.entriesMap.values()];
+      const visibleEntries = entries.find((entry) => entry.isIntersecting);
+      if (visibleEntries == null ? void 0 : visibleEntries.target.classList.contains("clone")) {
+        const cloneIndex = visibleEntries.target.getAttribute("clone-index");
+        this.activeSlide = cloneIndex;
+        this.goToSlide(+cloneIndex, "auto");
+      } else if (visibleEntries) {
+        let slideIndex = slides.indexOf(visibleEntries.target);
+        this.activeSlide = slideIndex;
       }
     });
   }
-  goToSlide(e, i = "smooth", n = !0) {
-    const r = this.getSlides(), t = this.getSlidesWithClones();
-    t.forEach((m, S) => {
-      m.classList.remove("active");
+  goToSlide(index, behavior = "smooth", next = true) {
+    const slides = this.getSlides();
+    const slideWithClones = this.getSlidesWithClones();
+    slideWithClones.forEach((slide, i) => {
+      slide.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();
+    let newActiveSlide = this.loop ? (index + slides.length) % slides.length : Math.min(Math.max(index, 0), slides.length - 1);
+    this.activeSlide = newActiveSlide;
+    const nextSlideIndex = Math.min(Math.max(index + (this.loop ? this.slidePerPage : 0), 0), slideWithClones.length - 1);
+    const nextSlideEl = this.getSlidesWithClones()[nextSlideIndex];
+    nextSlideEl.classList.add("active");
+    let nextSlideRect = nextSlideEl.getBoundingClientRect();
+    let slidesContainerRect = 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"
+      left: nextSlideRect.left - slidesContainerRect.left + this.slides.scrollLeft,
+      top: nextSlideRect.top - slidesContainerRect.top + this.slides.scrollTop,
+      behavior: behavior === "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);
+    const items = this.getSlides();
+    if (items.length && this.loop) {
+      const firstItemClone = items[0].cloneNode(true);
+      firstItemClone.classList.add("clone");
+      firstItemClone.setAttribute("clone-index", 0);
+      this.appendChild(firstItemClone);
+      const lastItemClone = items[items.length - 1].cloneNode(true);
+      lastItemClone.classList.add("clone");
+      lastItemClone.setAttribute("clone-index", items.length - 1);
+      this.insertBefore(lastItemClone, 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");
+    this.getSlidesWithClones().forEach((slide, i) => {
+      slide.classList.remove("active");
     });
+    if (this.pagination) {
+      this.context.querySelectorAll(".pagination-item").forEach((item) => {
+        item.classList.remove("active");
+      });
+    }
+    if (this.thumbnails) {
+      this.context.querySelectorAll("wj-thumbnail").forEach((item) => {
+        item.classList.remove("active");
+      });
+    }
   }
   changePagination() {
-    this.pagination && (this.removeActiveSlide(), this.context.querySelectorAll(".pagination-item").forEach((e, i) => {
-      i === this.activeSlide && e.classList.add("active");
-    }));
+    if (this.pagination) {
+      this.removeActiveSlide();
+      this.context.querySelectorAll(".pagination-item").forEach((item, i) => {
+        if (i === this.activeSlide) {
+          item.classList.add("active");
+        }
+      });
+    }
   }
   changeThumbnails() {
-    this.thumbnails && (this.removeActiveSlide(), this.context.querySelectorAll("wj-thumbnail").forEach((e, i) => {
-      i === this.activeSlide && e.classList.add("active");
-    }));
+    if (this.thumbnails) {
+      this.removeActiveSlide();
+      this.context.querySelectorAll("wj-thumbnail").forEach((item, i) => {
+        if (i === this.activeSlide) {
+          item.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) => {
+    const nextButton = document.createElement("wj-button");
+    nextButton.classList.add("next");
+    nextButton.innerHTML = '<wj-icon name="chevron-right" size="large"></wj-icon';
+    nextButton.setAttribute("circle", "");
+    nextButton.setAttribute("fill", "link");
+    nextButton.addEventListener("click", (e) => {
       this.nextSlide();
-    }), e;
+    });
+    return nextButton;
   }
   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) => {
+    const previousButton = document.createElement("wj-button");
+    previousButton.classList.add("prev");
+    previousButton.innerHTML = '<wj-icon name="chevron-left" size="large"></wj-icon';
+    previousButton.setAttribute("circle", "");
+    previousButton.setAttribute("fill", "link");
+    previousButton.addEventListener("click", (e) => {
       this.previousSlide();
-    }), e;
+    });
+    return previousButton;
   }
   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;
+    const pagination = document.createElement("div");
+    pagination.classList.add("pagination");
+    const slides = this.getSlides();
+    slides.forEach((slide, i) => {
+      const paginationItem = document.createElement("div");
+      paginationItem.classList.add("pagination-item");
+      paginationItem.addEventListener("click", (e) => {
+        this.removeActiveSlide();
+        e.target.classList.add("active");
+        this.goToSlide(i);
+      });
+      pagination.appendChild(paginationItem);
+    });
+    return pagination;
   }
   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;
+    const thumbnails = document.createElement("div");
+    thumbnails.classList.add("thumbnails");
+    const slides = this.getSlides();
+    slides.forEach((slide, i) => {
+      const thumbnail = document.createElement("wj-thumbnail");
+      thumbnail.innerHTML = `<img src="${slide.querySelector("wj-img").getAttribute("src")}"></img>`;
+      thumbnail.addEventListener("click", (e) => {
+        this.removeActiveSlide();
+        e.target.closest("wj-thumbnail").classList.add("active");
+        this.goToSlide(i);
+      });
+      thumbnails.appendChild(thumbnail);
+    });
+    return thumbnails;
   }
   nextSlide() {
     this.goToSlide(this.activeSlide + this.slidePerPage);
@@ -172,7 +249,7 @@ class f extends v {
     return this.querySelector(".native-carousel").scrollLeft > 0;
   }
 }
-customElements.get("wj-carousel") || window.customElements.define("wj-carousel", f);
+customElements.get("wj-carousel") || window.customElements.define("wj-carousel", Carousel);
 export {
-  f as Carousel
+  Carousel
 };

package/dist/wj-checkbox.js

@@ -1,29 +1,33 @@
-var l = Object.defineProperty;
-var b = (c, t, e) => t in c ? l(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var i = (c, t, e) => (b(c, typeof t != "symbol" ? t + "" : t, e), e);
-import h, { event as 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, { event } from "./wj-element.js";
 import "./wj-store.js";
-const s = `/*!
-* direction.scss
-*/:host{--wj-grey-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wj-white-check-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==) left center;--wj-checkbox-margin-top: 0;--wj-checkbox-margin-bottom: .5rem;--wj-checkbox-margin-inline: 0;--wj-checkbox-width: 16px;--wj-checkbox-height: 16px;display:block;margin-top:var(--wj-checkbox-margin-top);margin-bottom:var(--wj-checkbox-margin-bottom);margin-inline:var(--wj-checkbox-margin-inline);line-height:100%;padding-left:0}:host label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;min-width:var(--wj-checkbox-width);min-height:var(--wj-checkbox-height);margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;-webkit-box-sizing:inherit;box-sizing:border-box;background-color:var(--wj-color-contrast-lowest);border:1px solid var(--wj-border-color)}.native-checkbox label{transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox label:hover{color:var(--wj-color-contrast-higher)}.native-checkbox label:before{border-radius:3px;transition:border .14s linear 0s,color .14s linear 0s,background-color .14s linear 0s}.native-checkbox input[type=checkbox]{position:absolute;margin:0;z-index:-1;width:16px;height:16px;opacity:0;display:none}.native-checkbox input[type=checkbox]+label:after{content:"";position:absolute;left:0;border-right:0 solid transparent;border-bottom:0 solid transparent;width:16px;height:16px;overflow:hidden}.native-checkbox.checkbox-circle label:after{border-radius:99px}.native-checkbox.checkbox-circle label:before{border-radius:99px}.native-checkbox input[type=checkbox]:checked+label:after{content:"";background:var(--wj-grey-check-icon);background-size:160px 16px;background-repeat:no-repeat;animation-name:checkbox-check;animation-duration:.32s;animation-timing-function:steps(9);animation-fill-mode:forwards;animation-iteration-count:1}.native-checkbox input[type=checkbox]:hover:active:not(:checked)+label:before{background-color:#00000014}.native-checkbox input[type=checkbox]:focus+label{color:var(--wj-color-contrast-higher)}.native-checkbox input[type=checkbox]:focus+label:before{outline:none!important;box-shadow:0 0 #78c8fe}.native-checkbox input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wj-color-contrast-high);opacity:.58}.native-checkbox input[type=checkbox][disabled]+label:before{cursor:not-allowed!important;background:#ececec}.native-checkbox input[type=checkbox]:indeterminate+label:after{background:none;background-color:var(--wj-color-contrast-high);width:10px;height:2px;top:6px;margin:3px;border-radius:2px}.native-checkbox.right label{padding-left:0;padding-right:26px}.native-checkbox.right label:before{right:0;left:auto}.native-checkbox.right input[type=checkbox]:checked+label{position:relative}.native-checkbox.right input[type=checkbox]:checked+label:after{position:absolute;right:0;left:auto}.success input[type=checkbox]:checked+label:before,.success input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-success);background-color:var(--wj-color-success)}.primary input[type=checkbox]:checked+label:before,.primary input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-primary);background-color:var(--wj-color-primary)}.complete input[type=checkbox]:checked+label:before,.complete input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-complete);background-color:var(--wj-color-complete)}.warning input[type=checkbox]:checked+label:before,.warning input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-warning);background-color:var(--wj-color-warning)}.danger input[type=checkbox]:checked+label:before,.danger input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-danger);background-color:var(--wj-color-danger)}.info input[type=checkbox]:checked+label:before,.info input[type=checkbox]:indeterminate+label:before{border-color:var(--wj-color-info);background-color:var(--wj-color-info)}.info input[type=checkbox]:checked+label:after,.danger input[type=checkbox]:checked+label:after,.complete input[type=checkbox]:checked+label:after,.primary input[type=checkbox]:checked+label:after,.success input[type=checkbox]:checked+label:after{background:var(--wj-white-check-icon)}.info input[type=checkbox]:indeterminate+label:after,.danger input[type=checkbox]:indeterminate+label:after,.complete input[type=checkbox]:indeterminate+label:after,.primary input[type=checkbox]:indeterminate+label:after,.success input[type=checkbox]:indeterminate+label:after{background-color:var(--wj-color-contrast-lowest)}@keyframes shrink-bounce{0%{transform:scale(1)}33%{transform:scale(.85)}to{transform:scale(1)}}@keyframes checkbox-check{0%{background-position:0}to{background-position:-144px}}.js-focus-visible .native-checkbox input[type=checkbox]:focus:not(.focus-visible)+label:before{box-shadow:none}input[type=checkbox]{accent-color:var(--wj-color-primary)!important;font-size:50px}
-`;
-class d extends h {
+const styles = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Checkbox ]\n*/\n:host {\n  --wj-grey-check-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTHBwcG9vb3BwcBFjhIYAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==") left center;\n  --wj-white-check-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQAgMAAADsa5zLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURUdwTP///////////waf0AoAAAAEdFJOUwBG9tQE3MceAAAAVUlEQVQoz2NgGLKA0QGIDwDxBSCeAMEYgAWI2YCK2CagYgwgDcRSDhgYbAkKzsSKGdgakCyY6ADES7BiiCkgJ4PYyybgxAhQAsRZDrgxCpDEg4cAAAAp2ibhZRGLHgAAAABJRU5ErkJggg==") left center;\n  --wj-checkbox-margin-top: 0;\n  --wj-checkbox-margin-bottom: .5rem;\n  --wj-checkbox-margin-inline: 0;\n  --wj-checkbox-width: 16px;\n  --wj-checkbox-height: 16px;\n  display: block;\n  margin-top: var(--wj-checkbox-margin-top);\n  margin-bottom: var(--wj-checkbox-margin-bottom);\n  margin-inline: var(--wj-checkbox-margin-inline);\n  line-height: 100%;\n  padding-left: 0px;\n}\n:host label {\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n  padding-left: 25px;\n  min-width: var(--wj-checkbox-width);\n  min-height: var(--wj-checkbox-height);\n  margin-bottom: 0;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\n  -khtml-user-select: none; /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */\n  -ms-user-select: none; /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */\n}\n:host label:before {\n  content: "";\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 0;\n  -webkit-box-sizing: inherit;\n  box-sizing: border-box;\n  background-color: var(--wj-color-contrast-lowest);\n  border: 1px solid var(--wj-border-color);\n}\n.native-checkbox label {\n  transition: border 140ms linear 0s, color 140ms linear 0s, background-color 140ms linear 0s;\n}\n.native-checkbox label:hover {\n  color: var(--wj-color-contrast-higher);\n}\n.native-checkbox label:before {\n  border-radius: 3px;\n  transition: border 140ms linear 0s, color 140ms linear 0s, background-color 140ms linear 0s;\n}\n.native-checkbox input[type=checkbox] {\n  position: absolute;\n  margin: 0;\n  z-index: -1;\n  width: 16px;\n  height: 16px;\n  opacity: 0;\n  display: none;\n}\n.native-checkbox input[type=checkbox] + label::after {\n  content: "";\n  position: absolute;\n  left: 0;\n  border-right: 0 solid transparent;\n  border-bottom: 0 solid transparent;\n  width: 16px;\n  height: 16px;\n  overflow: hidden;\n}\n.native-checkbox.checkbox-circle label:after {\n  border-radius: 99px;\n}\n.native-checkbox.checkbox-circle label:before {\n  border-radius: 99px;\n}\n.native-checkbox input[type=checkbox]:checked + label::after {\n  content: "";\n  background: var(--wj-grey-check-icon);\n  background-size: 160px 16px;\n  background-repeat: no-repeat;\n  animation-name: checkbox-check;\n  animation-duration: 320ms;\n  animation-timing-function: steps(9);\n  animation-fill-mode: forwards;\n  animation-iteration-count: 1;\n}\n.native-checkbox input[type=checkbox]:hover:active:not(:checked) + label:before {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.native-checkbox input[type=checkbox]:focus + label {\n  color: var(--wj-color-contrast-higher);\n}\n.native-checkbox input[type=checkbox]:focus + label:before {\n  outline: none !important;\n  box-shadow: 0 0 0 0px #78c8fe;\n}\n.native-checkbox input[type=checkbox][disabled] + label {\n  cursor: not-allowed !important;\n  color: var(--wj-color-contrast-high);\n  opacity: 0.58;\n}\n.native-checkbox input[type=checkbox][disabled] + label:before {\n  cursor: not-allowed !important;\n  background: #ececec;\n}\n.native-checkbox input[type=checkbox]:indeterminate + label:after {\n  background: none;\n  background-color: var(--wj-color-contrast-high);\n  width: 10px;\n  height: 2px;\n  top: 6px;\n  margin: 3px;\n  border-radius: 2px;\n}\n.native-checkbox.right label {\n  padding-left: 0;\n  padding-right: 26px;\n}\n.native-checkbox.right label:before {\n  right: 0;\n  left: auto;\n}\n.native-checkbox.right input[type=checkbox]:checked + label {\n  position: relative;\n}\n.native-checkbox.right input[type=checkbox]:checked + label::after {\n  position: absolute;\n  right: 0px;\n  left: auto;\n}\n.success input[type=checkbox]:checked + label:before, .success input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-success);\n  background-color: var(--wj-color-success);\n}\n.primary input[type=checkbox]:checked + label:before, .primary input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-primary);\n  background-color: var(--wj-color-primary);\n}\n.complete input[type=checkbox]:checked + label:before, .complete input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-complete);\n  background-color: var(--wj-color-complete);\n}\n.warning input[type=checkbox]:checked + label:before, .warning input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-warning);\n  background-color: var(--wj-color-warning);\n}\n.danger input[type=checkbox]:checked + label:before, .danger input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-danger);\n  background-color: var(--wj-color-danger);\n}\n.info input[type=checkbox]:checked + label:before, .info input[type=checkbox]:indeterminate + label:before {\n  border-color: var(--wj-color-info);\n  background-color: var(--wj-color-info);\n}\n.info input[type=checkbox]:checked + label::after, .danger input[type=checkbox]:checked + label::after, .complete input[type=checkbox]:checked + label::after, .primary input[type=checkbox]:checked + label::after, .success input[type=checkbox]:checked + label::after {\n  background: var(--wj-white-check-icon);\n}\n.info input[type=checkbox]:indeterminate + label::after, .danger input[type=checkbox]:indeterminate + label::after, .complete input[type=checkbox]:indeterminate + label::after, .primary input[type=checkbox]:indeterminate + label::after, .success input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--wj-color-contrast-lowest);\n}\n@keyframes shrink-bounce {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes checkbox-check {\n  0% {\n    background-position: 0;\n  }\n  100% {\n    background-position: -144px;\n  }\n}\n/* hide focus style if not from keyboard navigation */\n.js-focus-visible .native-checkbox input[type=checkbox]:focus:not(.focus-visible) + label:before {\n  box-shadow: none;\n}\ninput[type=checkbox] {\n  accent-color: var(--wj-color-primary) !important;\n  font-size: 50px;\n}';
+class Checkbox extends WJElement {
   constructor() {
     super();
-    i(this, "className", "Checkbox");
-    i(this, "inputEvent", (e) => {
+    __publicField(this, "className", "Checkbox");
+    __publicField(this, "inputEvent", (e) => {
       this.checked = e.target.checked;
     });
-    this._checked = !1;
+    this._checked = false;
   }
-  set checked(e) {
-    this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  set checked(value) {
+    this._checked = value;
+    if (value)
+      this.setAttribute("checked", "");
+    else
+      this.removeAttribute("checked");
   }
   get checked() {
     return this._checked;
   }
   static get cssStyleSheet() {
-    return s;
+    return styles;
   }
   static get observedAttributes() {
     return ["checked"];
@@ -31,20 +35,38 @@ class d extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, p, k) {
-    let a = document.createDocumentFragment(), o = document.createElement("div");
-    o.classList.add("native-checkbox"), this.variant === "circle" && o.classList.add("checkbox-circle"), this.color && o.classList.add(this.color), this.input = document.createElement("input"), this.input.type = "checkbox", this.input.id = "checkbox", this.input.name = this.name = "checkbox", this.input.checked = this.hasAttribute("checked"), this.input.disabled = this.hasAttribute("disabled"), this.input.indeterminate = this.hasAttribute("indeterminate");
-    let r = document.createElement("label");
-    return r.htmlFor = "checkbox", r.innerHTML = "<slot></slot>", o.appendChild(this.input), o.appendChild(r), a.appendChild(o), a;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-checkbox");
+    if (this.variant === "circle")
+      native.classList.add("checkbox-circle");
+    if (this.color)
+      native.classList.add(this.color);
+    this.input = document.createElement("input");
+    this.input.type = "checkbox";
+    this.input.id = "checkbox";
+    this.input.name = this.name = "checkbox";
+    this.input.checked = this.hasAttribute("checked");
+    this.input.disabled = this.hasAttribute("disabled");
+    this.input.indeterminate = this.hasAttribute("indeterminate");
+    let label = document.createElement("label");
+    label.htmlFor = "checkbox";
+    label.innerHTML = "<slot></slot>";
+    native.appendChild(this.input);
+    native.appendChild(label);
+    fragment.appendChild(native);
+    return fragment;
   }
   afterDraw() {
-    n.addListener(this, "click", "wj:checkbox:change"), n.addListener(this, "click", "wj:checkbox:input");
+    event.addListener(this, "click", "wj:checkbox:change");
+    event.addListener(this, "click", "wj:checkbox:input");
   }
   disconnectedCallback() {
-    n.removeElement(this);
+    event.removeElement(this);
   }
 }
-customElements.get("wj-checkbox") || window.customElements.define("wj-checkbox", d);
+customElements.get("wj-checkbox") || window.customElements.define("wj-checkbox", Checkbox);
 export {
-  d as Checkbox
+  Checkbox
 };