wj-elements 0.7.6 → 0.8.0

package/dist/wje-carousel.js

@@ -1,614 +1,259 @@
 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);
-import WJElement from "./wje-element.js";
-const styles = '/*\n[ Carousel ]\n*/\n\n:host {\n    display: block;\n    width: var(--wje-carousel-width, 100%);\n    max-width: 100%;\n    box-sizing: border-box;\n}\n\n.native-carousel {\n    position: relative;\n    width: 100%;\n    height: var(--wje-carousel-height, 300px);\n    scroll-behavior: smooth;\n    box-sizing: border-box;\n}\n\n.slides-wrapper {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n    height: var(--wje-carousel-height, 300px);\n    box-sizing: border-box;\n}\n\n.carousel-slides {\n    display: flex;\n    flex: 1 1 auto;\n    transition: transform 0.5s ease;\n    align-items: stretch;\n    overflow: auto;\n    overscroll-behavior-x: contain;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    aspect-ratio: var(--wje-aspect-ratio, 4 / 3);\n    scroll-snap-type: x mandatory;\n    scroll-padding-inline: var(--wje-spacing-inline, 0);\n    overflow-y: hidden;\n    padding-inline: var(--wje-spacing-inline, 0);\n    gap: var(--wje-carousel-gap, 0.5rem);\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    box-sizing: border-box;\n}\n\n.carousel-slides::-webkit-scrollbar {\n    display: none;\n}\n\n::slotted(wje-carousel-item) {\n    flex: 0 0 var(--wje-carousel-item-basis, var(--wje-carousel-size));\n    width: var(--wje-carousel-item-basis, var(--wje-carousel-size));\n    min-width: 0;\n    max-width: 100%;\n    align-self: stretch;\n    height: 100%;\n    box-sizing: border-box;\n}\n\n/*NAVIGATION*/\n\n[name="prev"], [name="next"] {\n    display: block;\n    position: absolute;\n    top: 50%;\n    border: none;\n    cursor: pointer;\n    z-index: 2;\n}\n\n[name="prev"] {\n    left: -1rem;\n    transform: translate(-100%, -50%);\n}\n\n[name="next"] {\n    right: -1rem;\n    transform: translate(100%, -50%);\n}\n\n/*PAGINATION*/\n\n.pagination {\n    position: relative;\n    left: 50%;\n    transform: translate(-50%, 0);\n    display: flex;\n    z-index: 2;\n    justify-content: center;\n    padding-block: 1rem;\n}\n.pagination-item {\n    cursor: pointer;\n    height: 15px;\n    width: 15px;\n    margin: 0 2px;\n    background-color: var(--wje-color-contrast-4);\n    display: inline-block;\n    border-radius: 50%;\n}\n.pagination-item.active {\n    background-color: var(--wje-color);\n}\n\n/*THUMBNAILS*/\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    wje-thumbnail {\n        --wje-thumbnail-width: 48px;\n        --wje-thumbnail-height: 48px;\n        --wje-thumbnail-border-radius: 0;\n        cursor: pointer;\n        border: 1px solid transparent;\n    }\n    .active {\n        border: 1px solid var(--wje-color-primary-11);\n    }\n}\n';
-class Carousel extends WJElement {
-  /**
-   * Carousel constructor method.
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
-    /**
-     * Class name for the Carousel.
-     * @type {string}
-     */
     __publicField(this, "className", "Carousel");
     this.slidePerPage = 1;
   }
-  /**
-   * Active slide attribute.
-   * @param value
-   */
-  set activeSlide(value) {
-    this.setAttribute("active-slide", value);
-  }
-  /**
-   * Active slide attribute.
-   * @returns {number|number}
-   */
+  set activeSlide(t2) {
+    this.setAttribute("active-slide", t2);
+  }
   get activeSlide() {
     return +this.getAttribute("active-slide") || 0;
   }
-  /**
-   * Pagination attribute.
-   * @returns {boolean}
-   */
   get pagination() {
     return this.hasAttribute("pagination");
   }
-  /**
-   * Navigation attribute.
-   * @returns {boolean}
-   */
   get navigation() {
     return this.hasAttribute("navigation");
   }
-  /**
-   * Thumbnails attribute.
-   * @returns {boolean}
-   */
   get thumbnails() {
     return this.hasAttribute("thumbnails");
   }
-  /**
-   * Loop attribute.
-   * @returns {boolean}
-   */
   get loop() {
     return this.hasAttribute("loop");
   }
-  /**
-   * Continuous loop attribute.
-   * @returns {boolean}
-   */
   get continuousLoop() {
     return this.hasAttribute("continuous-loop");
   }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {*}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:block;width:var(--wje-carousel-width, 100%);max-width:100%;box-sizing:border-box}.native-carousel{position:relative;width:100%;height:var(--wje-carousel-height, 300px);scroll-behavior:smooth;box-sizing:border-box}.slides-wrapper{position:relative;display:flex;align-items:stretch;width:100%;height:var(--wje-carousel-height, 300px);box-sizing:border-box}.carousel-slides{display:flex;flex:1 1 auto;transition:transform .5s ease;align-items:stretch;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;aspect-ratio:var(--wje-aspect-ratio, 4 / 3);scroll-snap-type:x mandatory;scroll-padding-inline:var(--wje-spacing-inline, 0);overflow-y:hidden;padding-inline:var(--wje-spacing-inline, 0);gap:var(--wje-carousel-gap, .5rem);width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}.carousel-slides::-webkit-scrollbar{display:none}::slotted(wje-carousel-item){flex:0 0 var(--wje-carousel-item-basis, var(--wje-carousel-size));width:var(--wje-carousel-item-basis, var(--wje-carousel-size));min-width:0;max-width:100%;align-self:stretch;height:100%;box-sizing:border-box}[name=prev],[name=next]{display:block;position:absolute;top:50%;border:none;cursor:pointer;z-index:2}[name=prev]{left:-1rem;transform:translate(-100%,-50%)}[name=next]{right:-1rem;transform:translate(100%,-50%)}.pagination{position:relative;left:50%;transform:translate(-50%);display:flex;z-index:2;justify-content:center;padding-block:1rem}.pagination-item{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:var(--wje-color-contrast-4);display:inline-block;border-radius:50%}.pagination-item.active{background-color:var(--wje-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 wje-thumbnail{--wje-thumbnail-width: 48px;--wje-thumbnail-height: 48px;--wje-thumbnail-border-radius: 0;cursor:pointer;border:1px solid transparent}.thumbnails .active{border:1px solid var(--wje-color-primary-11)}";
   }
-  /**
-   * Getter for the observed attributes.
-   * @returns {string[]}
-   */
   static get observedAttributes() {
     return ["active-slide", "slide-per-page", "continuous-loop"];
   }
-  /**
-   * Sets up the attributes for the Carousel.
-   * @param name
-   * @param old
-   * @param newName
-   */
-  attributeChangedCallback(name, old, newName) {
-    if (name === "active-slide") {
-      if (this.pagination) this.changePagination();
-      if (this.thumbnails) this.changeThumbnails();
-    }
-    if (["slide-per-page", "continuous-loop"].includes(name) && old !== newName && this.slides) {
-      this.syncSlideMetrics();
-      if (this.loop) {
-        this.refresh();
-        return;
-      }
+  attributeChangedCallback(t2, e2, i) {
+    if ("active-slide" === t2 && (this.pagination && this.changePagination(), this.thumbnails && this.changeThumbnails()), ["slide-per-page", "continuous-loop"].includes(t2) && e2 !== i && this.slides) {
+      if (this.syncSlideMetrics(), this.loop) return void this.refresh();
       this.goToSlide(this.activeSlide, "auto");
     }
   }
-  /**
-   * Sets up the attributes for the Carousel.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Before draw method for the Carousel.
-   */
   beforeDraw() {
-    this.syncSlideMetrics();
-    this.removeLoopClones();
-    this.cloneFirstAndLastItems();
-  }
-  /**
-   * Draw method for the Carousel.
-   * @returns {DocumentFragment}
-   */
+    this.syncSlideMetrics(), this.removeLoopClones(), this.cloneFirstAndLastItems();
+  }
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-carousel");
-    let wrapper = document.createElement("div");
-    wrapper.classList.add("slides-wrapper");
-    let slides = document.createElement("div");
-    slides.classList.add("carousel-slides");
-    let slot = document.createElement("slot");
-    let slotPrev = document.createElement("slot");
-    slotPrev.setAttribute("name", "prev");
-    let slotNext = document.createElement("slot");
-    slotNext.setAttribute("name", "next");
-    slides.append(slot);
-    native.append(wrapper);
-    if (this.navigation) {
-      let existingPrev = this.querySelector('[slot="prev"]');
-      let existingNext = this.querySelector('[slot="next"]');
-      this.prevButton = existingPrev || this.createPreviousButton();
-      this.nextButton = existingNext || this.createNextButton();
-      if (this.prevButton && !this.prevButton.dataset.wjeCarouselNavBound) {
-        this.prevButton.addEventListener("click", () => this.previousSlide());
-        this.prevButton.dataset.wjeCarouselNavBound = "true";
-      }
-      if (this.nextButton && !this.nextButton.dataset.wjeCarouselNavBound) {
-        this.nextButton.addEventListener("click", () => this.nextSlide());
-        this.nextButton.dataset.wjeCarouselNavBound = "true";
-      }
-      if (!existingPrev) this.append(this.prevButton);
-      if (!existingNext) this.append(this.nextButton);
-      wrapper.append(slotPrev);
-      wrapper.append(slotNext);
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.classList.add("native-carousel");
+    let i = document.createElement("div");
+    i.classList.add("slides-wrapper");
+    let s = document.createElement("div");
+    s.classList.add("carousel-slides");
+    let o = document.createElement("slot"), r = document.createElement("slot");
+    r.setAttribute("name", "prev");
+    let n = document.createElement("slot");
+    if (n.setAttribute("name", "next"), s.append(o), e2.append(i), this.navigation) {
+      let t3 = this.querySelector('[slot="prev"]'), e3 = this.querySelector('[slot="next"]');
+      this.prevButton = t3 || this.createPreviousButton(), this.nextButton = e3 || this.createNextButton(), this.prevButton && !this.prevButton.dataset.wjeCarouselNavBound && (this.prevButton.addEventListener("click", () => this.previousSlide()), this.prevButton.dataset.wjeCarouselNavBound = "true"), this.nextButton && !this.nextButton.dataset.wjeCarouselNavBound && (this.nextButton.addEventListener("click", () => this.nextSlide()), this.nextButton.dataset.wjeCarouselNavBound = "true"), t3 || this.append(this.prevButton), e3 || this.append(this.nextButton), i.append(r), i.append(n);
     }
-    wrapper.append(slides);
-    if (this.pagination) native.append(this.createPagination());
-    if (this.thumbnails) native.append(this.createThumbnails());
-    fragment.append(native);
-    this.slides = slides;
-    return fragment;
-  }
-  /**
-   * After draw method for the Carousel.
-   */
+    return i.append(s), this.pagination && e2.append(this.createPagination()), this.thumbnails && e2.append(this.createThumbnails()), t2.append(e2), this.slides = s, t2;
+  }
   afterDraw() {
-    this.setIntersectionObserver();
-    this.getSlidesWithClones().forEach((slide, i) => {
-      this.intersectionObserver.observe(slide);
-    });
-    this.syncSlideMetrics();
-    this.goToSlide(this.activeSlide, "auto");
-    requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToSnapStart()));
-    this.slides.addEventListener("scrollend", (e) => {
+    this.setIntersectionObserver(), this.getSlidesWithClones().forEach((t2, e2) => {
+      this.intersectionObserver.observe(t2);
+    }), this.syncSlideMetrics(), this.goToSlide(this.activeSlide, "auto"), requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToSnapStart())), this.slides.addEventListener("scrollend", (t2) => {
       this.syncActiveToSnapStart();
-    });
-    this.syncAria();
+    }), this.syncAria();
   }
-  /**
-   * Sync `activeSlide` to the slide whose leading edge is closest to the snap start.
-   */
   syncActiveToSnapStart() {
     this.getSlides();
-    const withClones = this.getSlidesWithClones();
-    if (!withClones.length) return;
-    const containerRect = this.slides.getBoundingClientRect();
-    const snapStartX = containerRect.left + this.getScrollPaddingInlineStart();
-    let best = null;
-    let bestDist = Infinity;
-    withClones.forEach((el) => {
-      const r = el.getBoundingClientRect();
-      const dist = Math.abs(r.left - snapStartX);
-      if (dist < bestDist) {
-        bestDist = dist;
-        best = el;
-      }
-    });
-    if (!best) return;
-    const vIndex = withClones.indexOf(best);
-    if (vIndex === -1) return;
-    const logicalIndex = this.getLogicalIndexForVisual(vIndex);
-    this.activeSlide = logicalIndex;
-    this.setActiveVisualSlide(vIndex);
-    const canonicalVisualIndex = this.getVisualIndexForLogical(logicalIndex);
-    if (canonicalVisualIndex !== vIndex) {
-      this.goToSlide(logicalIndex, "auto");
-    }
+    const t2 = this.getSlidesWithClones();
+    if (!t2.length) return;
+    const e2 = this.slides.getBoundingClientRect().left + this.getScrollPaddingInlineStart();
+    let i = null, s = 1 / 0;
+    if (t2.forEach((t3) => {
+      const o2 = t3.getBoundingClientRect(), r2 = Math.abs(o2.left - e2);
+      r2 < s && (s = r2, i = t3);
+    }), !i) return;
+    const o = t2.indexOf(i);
+    if (-1 === o) return;
+    const r = this.getLogicalIndexForVisual(o);
+    this.activeSlide = r, this.setActiveVisualSlide(o);
+    this.getVisualIndexForLogical(r) !== o && this.goToSlide(r, "auto");
   }
-  /**
-   * Syncs computed CSS variables derived from `slide-per-page`.
-   */
   syncSlideMetrics() {
     this.slidePerPage = Math.max(parseInt(this.getAttribute("slide-per-page"), 10) || 1, 1);
-    const visibleGapCount = Math.max(this.slidePerPage - 1, 0);
-    const computedItemSize = `calc((100% - (${visibleGapCount} * var(--wje-carousel-gap, 0.5rem))) / ${this.slidePerPage})`;
-    this.style.setProperty("--wje-carousel-slides-per-page", `${this.slidePerPage}`);
-    this.style.setProperty("--wje-carousel-visible-gap-count", `${visibleGapCount}`);
-    this.style.setProperty("--wje-carousel-size", computedItemSize);
-    this.style.setProperty("--wje-carousel-item-basis", "var(--wje-carousel-size)");
-  }
-  /**
-   * Returns the inline scroll padding used by the snap area.
-   * @returns {number}
-   */
+    const t2 = Math.max(this.slidePerPage - 1, 0), e2 = `calc((100% - (${t2} * var(--wje-carousel-gap, 0.5rem))) / ${this.slidePerPage})`;
+    this.style.setProperty("--wje-carousel-slides-per-page", `${this.slidePerPage}`), this.style.setProperty("--wje-carousel-visible-gap-count", `${t2}`), this.style.setProperty("--wje-carousel-size", e2), this.style.setProperty("--wje-carousel-item-basis", "var(--wje-carousel-size)");
+  }
   getScrollPaddingInlineStart() {
     if (!this.slides) return 0;
-    const slideStyles = getComputedStyle(this.slides);
-    return parseFloat(slideStyles.scrollPaddingInlineStart || slideStyles.scrollPaddingLeft || "0") || 0;
-  }
-  /**
-   * Returns the interaction scroll behavior for UI controls.
-   * Continuous multi-slide loops use instant snapping to avoid blank edge states
-   * while the browser is still animating a previous smooth scroll.
-   * @returns {string}
-   */
+    const t2 = getComputedStyle(this.slides);
+    return parseFloat(t2.scrollPaddingInlineStart || t2.scrollPaddingLeft || "0") || 0;
+  }
   getControlBehavior() {
     return this.continuousLoop && this.slidePerPage > 1 ? "auto" : "smooth";
   }
-  /**
-   * Sets up the IntersectionObserver for the Carousel.
-   */
   setIntersectionObserver() {
-    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((entry) => {
-      this.entriesMap.set(entry.target, entry);
+    this.intersectionObserver = new IntersectionObserver((t2) => {
+      t2.forEach((t3) => {
+        this.entriesMap.set(t3.target, t3);
+      });
+    }, { root: this.context.querySelector(".carousel-slides"), threshold: 0.5 }), this.entriesMap = /* @__PURE__ */ new Map(), this.records = this.intersectionObserver.takeRecords(), this.records.forEach((t2) => {
+      this.entriesMap.set(t2.target, t2);
     });
   }
-  /**
-   * Goes to the slide.
-   * @param index
-   * @param behavior
-   * @param next
-   */
-  goToSlide(index, behavior = "smooth", next = true) {
-    const slides = this.getSlides();
-    const withClones = this.getSlidesWithClones();
-    const maxIndex = this.getMaxVisibleStartIndex(slides.length);
-    let logical;
-    if (this.loop && slides.length > 0) {
-      logical = this.normalizeLoopIndex(index, slides.length);
-    } else {
-      logical = Math.min(Math.max(index, 0), maxIndex);
-    }
-    this.activeSlide = logical;
-    const vIndex = this.getVisualIndexForLogical(logical);
-    const targetEl = withClones[vIndex];
-    if (!targetEl) return;
-    this.setActiveVisualSlide(vIndex);
-    this.scrollToVisualIndex(vIndex, behavior);
-    if (this.navigation && !this.loop) {
-      this.nextButton.removeAttribute("disabled");
-      this.prevButton.removeAttribute("disabled");
-      if (this.activeSlide === maxIndex) this.nextButton.setAttribute("disabled", "");
-      if (this.activeSlide === 0) this.prevButton.setAttribute("disabled", "");
-    }
-    this.syncAria();
-  }
-  /**
-   * Sets the active class on the currently targeted visual slide and removes it elsewhere.
-   * @param {number} vIndex
-   */
-  setActiveVisualSlide(vIndex) {
-    this.getSlidesWithClones().forEach((slide, index) => {
-      slide.classList.toggle("active", index === vIndex);
+  goToSlide(t2, e2 = "smooth", i = true) {
+    const s = this.getSlides(), o = this.getSlidesWithClones(), r = this.getMaxVisibleStartIndex(s.length);
+    let n;
+    n = this.loop && s.length > 0 ? this.normalizeLoopIndex(t2, s.length) : Math.min(Math.max(t2, 0), r), this.activeSlide = n;
+    const a = this.getVisualIndexForLogical(n);
+    o[a] && (this.setActiveVisualSlide(a), this.scrollToVisualIndex(a, e2), this.navigation && !this.loop && (this.nextButton.removeAttribute("disabled"), this.prevButton.removeAttribute("disabled"), this.activeSlide === r && this.nextButton.setAttribute("disabled", ""), 0 === this.activeSlide && this.prevButton.setAttribute("disabled", "")), this.syncAria());
+  }
+  setActiveVisualSlide(t2) {
+    this.getSlidesWithClones().forEach((e2, i) => {
+      e2.classList.toggle("active", i === t2);
     });
   }
-  /**
-   * Syncs ARIA attributes on the carousel and slides.
-   */
   syncAria() {
-    this.setAriaState({
-      role: "region",
-      roledescription: "carousel"
+    this.setAriaState({ role: "region", roledescription: "carousel" });
+    const t2 = this.getSlides(), e2 = t2.length;
+    t2.forEach((t3, i) => {
+      t3.setAttribute("role", "group"), t3.setAttribute("aria-roledescription", "slide"), t3.setAttribute("aria-label", `Slide ${i + 1} of ${e2}`), t3.setAttribute("aria-hidden", t3.classList.contains("active") ? "false" : "true");
     });
-    const slides = this.getSlides();
-    const total = slides.length;
-    slides.forEach((slide, index) => {
-      slide.setAttribute("role", "group");
-      slide.setAttribute("aria-roledescription", "slide");
-      slide.setAttribute("aria-label", `Slide ${index + 1} of ${total}`);
-      slide.setAttribute("aria-hidden", slide.classList.contains("active") ? "false" : "true");
-    });
-    const clones = this.querySelectorAll(".clone");
-    clones.forEach((slide) => {
-      slide.setAttribute("aria-hidden", "true");
+    this.querySelectorAll(".clone").forEach((t3) => {
+      t3.setAttribute("aria-hidden", "true");
     });
   }
-  /**
-   * Clones the first and last items.
-   */
   cloneFirstAndLastItems() {
-    const items = this.getSlides();
-    if (items.length && this.loop) {
-      const cloneCount = this.getLoopCloneCount(items.length);
-      const firstOriginal = items[0];
-      items.slice(items.length - cloneCount).forEach((item) => {
-        const clone = this.createLoopClone(item);
-        this.insertBefore(clone, firstOriginal);
-      });
-      items.slice(0, cloneCount).forEach((item) => {
-        const clone = this.createLoopClone(item);
-        this.append(clone);
+    const t2 = this.getSlides();
+    if (t2.length && this.loop) {
+      const e2 = this.getLoopCloneCount(t2.length), i = t2[0];
+      t2.slice(t2.length - e2).forEach((t3) => {
+        const e3 = this.createLoopClone(t3);
+        this.insertBefore(e3, i);
+      }), t2.slice(0, e2).forEach((t3) => {
+        const e3 = this.createLoopClone(t3);
+        this.append(e3);
       });
     }
   }
-  /**
-   * Creates a sanitized loop clone that does not inherit transient render state
-   * such as inline `visibility: hidden` from the source slide.
-   * @param {HTMLElement} item
-   * @returns {HTMLElement}
-   */
-  createLoopClone(item) {
+  createLoopClone(t2) {
     var _a;
-    const clone = item.cloneNode(true);
-    clone.classList.add("clone");
-    clone.classList.remove("active");
-    clone.style.removeProperty("visibility");
-    if (!((_a = clone.getAttribute("style")) == null ? void 0 : _a.trim())) {
-      clone.removeAttribute("style");
-    }
-    return clone;
+    const e2 = t2.cloneNode(true);
+    return e2.classList.add("clone"), e2.classList.remove("active"), e2.style.removeProperty("visibility"), ((_a = e2.getAttribute("style")) == null ? void 0 : _a.trim()) || e2.removeAttribute("style"), e2;
   }
-  /**
-   * Removes loop clones so they can be rebuilt for the current configuration.
-   */
   removeLoopClones() {
-    this.querySelectorAll("wje-carousel-item.clone").forEach((clone) => clone.remove());
-  }
-  /**
-   * Returns how many slides should be cloned on each side when loop is enabled.
-   * @param {number} totalSlides
-   * @returns {number}
-   */
-  getLoopCloneCount(totalSlides = this.getSlides().length) {
-    if (!this.loop || !totalSlides) return 0;
-    return this.continuousLoop ? Math.min(this.slidePerPage, totalSlides) : 1;
-  }
-  /**
-   * Scrolls the carousel to a visual slide index.
-   * @param {number} vIndex
-   * @param {string} behavior
-   */
-  scrollToVisualIndex(vIndex, behavior = "smooth") {
-    const withClones = this.getSlidesWithClones();
-    const firstEl = withClones[0];
-    const targetEl = withClones[vIndex];
-    if (!firstEl || !targetEl || !this.slides) return;
-    const firstRect = firstEl.getBoundingClientRect();
-    const targetRect = targetEl.getBoundingClientRect();
-    const contentOffsetLeft = targetRect.left - firstRect.left;
-    const nextLeft = contentOffsetLeft - this.getScrollPaddingInlineStart();
-    const targetLeft = Math.max(nextLeft, 0);
-    if (behavior === "smooth") {
-      this.slides.scrollTo({
-        left: targetLeft,
-        top: this.slides.scrollTop,
-        behavior: "smooth"
-      });
-      return;
-    }
-    if (this.snapRestoreFrame) {
-      cancelAnimationFrame(this.snapRestoreFrame);
-    }
-    const inlineSnapType = this.slides.style.scrollSnapType;
-    this.slides.style.scrollSnapType = "none";
-    this.slides.scrollTo({
-      left: targetLeft,
-      top: this.slides.scrollTop,
-      behavior: "auto"
-    });
-    this.snapRestoreFrame = requestAnimationFrame(() => {
-      this.slides.style.scrollSnapType = inlineSnapType;
-      this.snapRestoreFrame = null;
+    this.querySelectorAll("wje-carousel-item.clone").forEach((t2) => t2.remove());
+  }
+  getLoopCloneCount(t2 = this.getSlides().length) {
+    return this.loop && t2 ? this.continuousLoop ? Math.min(this.slidePerPage, t2) : 1 : 0;
+  }
+  scrollToVisualIndex(t2, e2 = "smooth") {
+    const i = this.getSlidesWithClones(), s = i[0], o = i[t2];
+    if (!s || !o || !this.slides) return;
+    const r = s.getBoundingClientRect(), n = o.getBoundingClientRect().left - r.left - this.getScrollPaddingInlineStart(), a = Math.max(n, 0);
+    if ("smooth" === e2) return void this.slides.scrollTo({ left: a, top: this.slides.scrollTop, behavior: "smooth" });
+    this.snapRestoreFrame && cancelAnimationFrame(this.snapRestoreFrame);
+    const l = this.slides.style.scrollSnapType;
+    this.slides.style.scrollSnapType = "none", this.slides.scrollTo({ left: a, top: this.slides.scrollTop, behavior: "auto" }), this.snapRestoreFrame = requestAnimationFrame(() => {
+      this.slides.style.scrollSnapType = l, this.snapRestoreFrame = null;
     });
   }
-  /**
-   * Goes to the next slide.
-   */
   removeActiveSlide() {
-    this.getSlidesWithClones().forEach((slide, i) => {
-      slide.classList.remove("active");
+    this.getSlidesWithClones().forEach((t2, e2) => {
+      t2.classList.remove("active");
+    }), this.pagination && this.context.querySelectorAll(".pagination-item").forEach((t2) => {
+      t2.classList.remove("active");
+    }), this.thumbnails && this.context.querySelectorAll("wje-thumbnail").forEach((t2) => {
+      t2.classList.remove("active");
     });
-    if (this.pagination) {
-      this.context.querySelectorAll(".pagination-item").forEach((item) => {
-        item.classList.remove("active");
-      });
-    }
-    if (this.thumbnails) {
-      this.context.querySelectorAll("wje-thumbnail").forEach((item) => {
-        item.classList.remove("active");
-      });
-    }
   }
-  /**
-   * Goes to the next slide.
-   */
   changePagination() {
-    if (this.pagination) {
-      this.context.querySelectorAll(".pagination-item").forEach((item, i) => {
-        item.classList.toggle("active", i === this.activeSlide);
-      });
-    }
+    this.pagination && this.context.querySelectorAll(".pagination-item").forEach((t2, e2) => {
+      t2.classList.toggle("active", e2 === this.activeSlide);
+    });
   }
-  /**
-   * Goes to the next slide.
-   */
   changeThumbnails() {
-    if (this.thumbnails) {
-      this.context.querySelectorAll("wje-thumbnail").forEach((item, i) => {
-        item.classList.toggle("active", i === this.activeSlide);
-      });
-    }
+    this.thumbnails && this.context.querySelectorAll("wje-thumbnail").forEach((t2, e2) => {
+      t2.classList.toggle("active", e2 === this.activeSlide);
+    });
   }
-  /**
-   * Goes to the next slide.
-   * @returns {Element}
-   */
   createNextButton() {
-    const nextButton = document.createElement("wje-button");
-    nextButton.setAttribute("part", "next-button");
-    nextButton.setAttribute("circle", "");
-    nextButton.setAttribute("fill", "link");
-    nextButton.setAttribute("slot", "next");
-    nextButton.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>';
-    nextButton.classList.add("next");
-    return nextButton;
-  }
-  /**
-   * Goes to the next slide.
-   * @returns {Element}
-   */
+    const t2 = document.createElement("wje-button");
+    return t2.setAttribute("part", "next-button"), t2.setAttribute("circle", ""), t2.setAttribute("fill", "link"), t2.setAttribute("slot", "next"), t2.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>', t2.classList.add("next"), t2;
+  }
   createPreviousButton() {
-    const previousButton = document.createElement("wje-button");
-    previousButton.setAttribute("part", "previous-button");
-    previousButton.setAttribute("circle", "");
-    previousButton.setAttribute("fill", "link");
-    previousButton.setAttribute("slot", "prev");
-    previousButton.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>';
-    previousButton.classList.add("prev");
-    return previousButton;
-  }
-  /**
-   * Goes to the next slide.
-   * @returns {Element}
-   */
+    const t2 = document.createElement("wje-button");
+    return t2.setAttribute("part", "previous-button"), t2.setAttribute("circle", ""), t2.setAttribute("fill", "link"), t2.setAttribute("slot", "prev"), t2.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>', t2.classList.add("prev"), t2;
+  }
   createPagination() {
-    const pagination = document.createElement("div");
-    pagination.setAttribute("part", "pagination");
-    pagination.classList.add("pagination");
-    this.getPaginationIndexes().forEach((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, this.getControlBehavior());
-      });
-      pagination.append(paginationItem);
-    });
-    return pagination;
+    const t2 = document.createElement("div");
+    return t2.setAttribute("part", "pagination"), t2.classList.add("pagination"), this.getPaginationIndexes().forEach((e2) => {
+      const i = document.createElement("div");
+      i.classList.add("pagination-item"), i.addEventListener("click", (t3) => {
+        this.removeActiveSlide(), t3.target.classList.add("active"), this.goToSlide(e2, this.getControlBehavior());
+      }), t2.append(i);
+    }), t2;
   }
-  /**
-   * Goes to the next slide.
-   * @returns {Element}
-   */
   createThumbnails() {
-    const thumbnails = document.createElement("div");
-    thumbnails.classList.add("thumbnails");
-    const slides = this.getSlides();
-    slides.forEach((slide, i) => {
-      const thumbnail = document.createElement("wje-thumbnail");
-      thumbnail.innerHTML = `<img src="${slide.querySelector("wje-img").getAttribute("src")}"></img>`;
-      thumbnail.addEventListener("click", (e) => {
-        this.removeActiveSlide();
-        e.target.closest("wje-thumbnail").classList.add("active");
-        this.goToSlide(i, this.getControlBehavior());
-      });
-      thumbnails.append(thumbnail);
-    });
-    return thumbnails;
+    const t2 = document.createElement("div");
+    t2.classList.add("thumbnails");
+    return this.getSlides().forEach((e2, i) => {
+      const s = document.createElement("wje-thumbnail");
+      s.innerHTML = `<img src="${e2.querySelector("wje-img").getAttribute("src")}"></img>`, s.addEventListener("click", (t3) => {
+        this.removeActiveSlide(), t3.target.closest("wje-thumbnail").classList.add("active"), this.goToSlide(i, this.getControlBehavior());
+      }), t2.append(s);
+    }), t2;
   }
-  /**
-   * Goes to the next slide.
-   */
   nextSlide() {
     this.goToSlide(this.activeSlide + 1, this.getControlBehavior());
   }
-  /**
-   * Goes to the previous slide.
-   */
   previousSlide() {
     this.goToSlide(this.activeSlide - 1, this.getControlBehavior());
   }
-  /**
-   * Goes to the slide.
-   * @returns {Array}
-   */
   getSlides() {
     return Array.from(this.querySelectorAll("wje-carousel-item:not(.clone)"));
   }
-  /**
-   * Goes to the slide.
-   * @returns {Array}
-   */
   getSlidesWithClones() {
     return Array.from(this.querySelectorAll("wje-carousel-item"));
   }
-  /** Maps logical index to visual index, including leading clones when loop is enabled. */
-  getVisualIndexForLogical(index) {
-    return this.loop ? index + this.getLoopCloneCount() : index;
-  }
-  /** Maps visual index to logical index, including edge clones when loop is enabled. */
-  getLogicalIndexForVisual(vIndex) {
-    const slides = this.getSlides();
-    const maxIndex = this.getMaxVisibleStartIndex(slides.length);
-    const cloneCount = this.getLoopCloneCount(slides.length);
-    if (!this.loop) return Math.min(Math.max(vIndex, 0), maxIndex);
-    if (this.continuousLoop) {
-      if (vIndex < cloneCount) return slides.length - cloneCount + vIndex;
-      if (vIndex >= cloneCount + slides.length) return vIndex - (cloneCount + slides.length);
-      return vIndex - cloneCount;
-    }
-    if (vIndex < cloneCount) return maxIndex;
-    if (vIndex >= cloneCount + slides.length) return 0;
-    return Math.min(Math.max(vIndex - cloneCount, 0), maxIndex);
-  }
-  /**
-   * Returns the maximum logical slide index that can still render a full viewport.
-   * @param {number} totalSlides
-   * @returns {number}
-   */
-  getMaxVisibleStartIndex(totalSlides = this.getSlides().length) {
-    const visibleSlides = Math.min(this.slidePerPage, totalSlides);
-    return Math.max(totalSlides - visibleSlides, 0);
-  }
-  /**
-   * Normalizes a logical index for the active loop mode.
-   * @param {number} index
-   * @param {number} totalSlides
-   * @returns {number}
-   */
-  normalizeLoopIndex(index, totalSlides = this.getSlides().length) {
-    const logicalCount = this.getLoopLogicalCount(totalSlides);
-    if (!logicalCount) return 0;
-    return (index % logicalCount + logicalCount) % logicalCount;
-  }
-  /**
-   * Returns how many logical positions are reachable for the current loop mode.
-   * @param {number} totalSlides
-   * @returns {number}
-   */
-  getLoopLogicalCount(totalSlides = this.getSlides().length) {
-    if (!totalSlides) return 0;
-    return this.continuousLoop ? totalSlides : this.getMaxVisibleStartIndex(totalSlides) + 1;
-  }
-  /**
-   * Returns the pagination indexes for the current carousel mode.
-   * @returns {number[]}
-   */
+  getVisualIndexForLogical(t2) {
+    return this.loop ? t2 + this.getLoopCloneCount() : t2;
+  }
+  getLogicalIndexForVisual(t2) {
+    const e2 = this.getSlides(), i = this.getMaxVisibleStartIndex(e2.length), s = this.getLoopCloneCount(e2.length);
+    return this.loop ? this.continuousLoop ? t2 < s ? e2.length - s + t2 : t2 >= s + e2.length ? t2 - (s + e2.length) : t2 - s : t2 < s ? i : t2 >= s + e2.length ? 0 : Math.min(Math.max(t2 - s, 0), i) : Math.min(Math.max(t2, 0), i);
+  }
+  getMaxVisibleStartIndex(t2 = this.getSlides().length) {
+    const e2 = Math.min(this.slidePerPage, t2);
+    return Math.max(t2 - e2, 0);
+  }
+  normalizeLoopIndex(t2, e2 = this.getSlides().length) {
+    const i = this.getLoopLogicalCount(e2);
+    return i ? (t2 % i + i) % i : 0;
+  }
+  getLoopLogicalCount(t2 = this.getSlides().length) {
+    return t2 ? this.continuousLoop ? t2 : this.getMaxVisibleStartIndex(t2) + 1 : 0;
+  }
   getPaginationIndexes() {
-    return Array.from({ length: this.getLoopLogicalCount() }, (_, index) => index);
+    return Array.from({ length: this.getLoopLogicalCount() }, (t2, e2) => e2);
   }
-  /**
-   * Goes to the slide.
-   * @returns {boolean}
-   */
   canGoNext() {
-    const el = this.context.querySelector(".carousel-slides");
-    return el.scrollLeft < el.scrollWidth - el.clientWidth;
+    const t2 = this.context.querySelector(".carousel-slides");
+    return t2.scrollLeft < t2.scrollWidth - t2.clientWidth;
   }
-  /**
-   * Goes to the slide.
-   * @returns {boolean}
-   */
   canGoPrevious() {
-    const el = this.context.querySelector(".carousel-slides");
-    return el.scrollLeft > 0;
+    return this.context.querySelector(".carousel-slides").scrollLeft > 0;
   }
 }
-WJElement.define("wje-carousel", Carousel);
+t.define("wje-carousel", e);
 export {
-  Carousel as default
+  e as default
 };
 //# sourceMappingURL=wje-carousel.js.map