wj-elements 0.1.136 → 0.1.137

package/dist/wje-carousel.js

@@ -0,0 +1,380 @@
+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.native-carousel {\n    position: relative;\n    width: var(--wje-carousel-width, 100%);\n    height: var(--wje-carousel-height, 300px);\n    scroll-behavior: smooth;\n}\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(--wje-aspect-ratio, 4 / 3);\n    scroll-snap-type: x mandatory;\n    scroll-padding-inline: 0;\n    overflow-y: hidden;\n    padding-inline: var(--wje-spacing-inline, 0);\n    gap: 0.5rem;\n}\n\n.carousel-slides::-webkit-scrollbar {\n    display: none;\n}\n\n::slotted(wje-carousel-item) {\n    flex: 0 0 var(--wje-carousel-size);\n    height: 100%;\n}\n\n/*NAVIGATION*/\n\nwje-button {\n    position: absolute;\n    top: 50%;\n\n    border: none;\n    cursor: pointer;\n    z-index: 2;\n}\n\n.prev {\n    left: -1rem;\n    transform: translate(-100%, -50%);\n}\n\n.next {\n    right: -1rem;\n    transform: translate(100%, -50%);\n}\n\n/*PAGINATION*/\n\n.pagination {\n    position: relative;\n    bottom: -0.5rem;\n    left: 50%;\n    transform: translate(-50%, 100%);\n    display: flex;\n    z-index: 2;\n    justify-content: center;\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.
+   */
+  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}
+   */
+  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");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {*}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Getter for the observed attributes.
+   * @returns {string[]}
+   */
+  static get observedAttributes() {
+    return ["active-slide"];
+  }
+  /**
+   * 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();
+    }
+  }
+  /**
+   * Sets up the attributes for the Carousel.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Before draw method for the Carousel.
+   */
+  beforeDraw() {
+    this.cloneFirstAndLastItems();
+  }
+  /**
+   * Draw method for the Carousel.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    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) {
+      this.prevButton = this.createPreviousButton();
+      this.nextButton = this.createNextButton();
+      native.appendChild(this.prevButton);
+      native.appendChild(this.nextButton);
+    }
+    if (this.pagination) native.appendChild(this.createPagination());
+    if (this.thumbnails) native.appendChild(this.createThumbnails());
+    fragment.appendChild(native);
+    this.slides = slides;
+    return fragment;
+  }
+  /**
+   * After draw method for the Carousel.
+   */
+  afterDraw() {
+    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("--wje-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.goToSlide(cloneIndex, "auto");
+        this.activeSlide = cloneIndex;
+      } else if (visibleEntries) {
+        let slideIndex = slides.indexOf(visibleEntries.target);
+        this.activeSlide = slideIndex;
+      }
+    });
+  }
+  /**
+   * 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);
+    });
+  }
+  /**
+   * Goes to the slide.
+   * @param index
+   * @param behavior
+   * @param next
+   */
+  goToSlide(index, behavior = "smooth", next = true) {
+    const slides = this.getSlides();
+    const slideWithClones = this.getSlidesWithClones();
+    slideWithClones.forEach((slide, i) => {
+      slide.classList.remove("active");
+    });
+    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: nextSlideRect.left - slidesContainerRect.left + this.slides.scrollLeft,
+      top: nextSlideRect.top - slidesContainerRect.top + this.slides.scrollTop,
+      behavior: behavior === "smooth" ? "smooth" : "auto"
+    });
+    if (this.navigation && !this.loop) {
+      this.nextButton.removeAttribute("disabled");
+      this.prevButton.removeAttribute("disabled");
+      if (this.activeSlide === slides.length - 1) this.nextButton.setAttribute("disabled", "");
+      if (this.activeSlide === 0) this.prevButton.setAttribute("disabled", "");
+    }
+  }
+  /**
+   * Clones the first and last items.
+   */
+  cloneFirstAndLastItems() {
+    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);
+    }
+  }
+  /**
+   * Goes to the next slide.
+   */
+  removeActiveSlide() {
+    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("wje-thumbnail").forEach((item) => {
+        item.classList.remove("active");
+      });
+    }
+  }
+  /**
+   * Goes to the next slide.
+   */
+  changePagination() {
+    if (this.pagination) {
+      this.removeActiveSlide();
+      this.context.querySelectorAll(".pagination-item").forEach((item, i) => {
+        if (i === this.activeSlide) {
+          item.classList.add("active");
+        }
+      });
+    }
+  }
+  /**
+   * Goes to the next slide.
+   */
+  changeThumbnails() {
+    if (this.thumbnails) {
+      this.removeActiveSlide();
+      this.context.querySelectorAll("wje-thumbnail").forEach((item, i) => {
+        if (i === this.activeSlide) {
+          item.classList.add("active");
+        }
+      });
+    }
+  }
+  /**
+   * Goes to the next slide.
+   * @returns {Element}
+   */
+  createNextButton() {
+    const nextButton = document.createElement("wje-button");
+    nextButton.classList.add("next");
+    nextButton.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>';
+    nextButton.setAttribute("circle", "");
+    nextButton.setAttribute("fill", "link");
+    nextButton.addEventListener("click", (e) => {
+      this.nextSlide();
+    });
+    return nextButton;
+  }
+  /**
+   * Goes to the next slide.
+   * @returns {Element}
+   */
+  createPreviousButton() {
+    const previousButton = document.createElement("wje-button");
+    previousButton.classList.add("prev");
+    previousButton.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>';
+    previousButton.setAttribute("circle", "");
+    previousButton.setAttribute("fill", "link");
+    previousButton.addEventListener("click", (e) => {
+      this.previousSlide();
+    });
+    return previousButton;
+  }
+  /**
+   * Goes to the next slide.
+   * @returns {Element}
+   */
+  createPagination() {
+    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;
+  }
+  /**
+   * 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);
+      });
+      thumbnails.appendChild(thumbnail);
+    });
+    return thumbnails;
+  }
+  /**
+   * Goes to the next slide.
+   */
+  nextSlide() {
+    this.goToSlide(this.activeSlide + this.slidePerPage);
+  }
+  /**
+   * Goes to the previous slide.
+   */
+  previousSlide() {
+    this.goToSlide(this.activeSlide - this.slidePerPage);
+  }
+  /**
+   * 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"));
+  }
+  /**
+   * Goes to the slide.
+   * @returns {boolean}
+   */
+  canGoNext() {
+    return this.querySelector(".native-carousel").scrollLeft < this.querySelector(".native-carousel").scrollWidth;
+  }
+  /**
+   * Goes to the slide.
+   * @returns {boolean}
+   */
+  canGoPrevious() {
+    return this.querySelector(".native-carousel").scrollLeft > 0;
+  }
+}
+WJElement.define("wje-carousel", Carousel);
+export {
+  Carousel as default
+};
+//# sourceMappingURL=wje-carousel.js.map

package/dist/wje-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-carousel.js","sources":["../packages/wje-carousel/carousel.element.js","../packages/wje-carousel/carousel.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Carousel class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/carousel\n * @status stable\n * @augments WJElement\n * @slot - The carousel main content.\n * @cssproperty [--wje-carousel-size=100%] - Size of the carousel component;\n */\nexport default class Carousel extends WJElement {\n    /**\n     * Carousel constructor method.\n     */\n    constructor() {\n        super();\n\n        this.slidePerPage = 1;\n    }\n\n    /**\n     * Active slide attribute.\n     * @param value\n     */\n    set activeSlide(value) {\n        this.setAttribute('active-slide', value);\n    }\n\n    /**\n     * Active slide attribute.\n     * @returns {number|number}\n     */\n    get activeSlide() {\n        return +this.getAttribute('active-slide') || 0;\n    }\n\n    /**\n     * Pagination attribute.\n     * @returns {boolean}\n     */\n    get pagination() {\n        return this.hasAttribute('pagination');\n    }\n\n    /**\n     * Navigation attribute.\n     * @returns {boolean}\n     */\n    get navigation() {\n        return this.hasAttribute('navigation');\n    }\n\n    /**\n     * Thumbnails attribute.\n     * @returns {boolean}\n     */\n    get thumbnails() {\n        return this.hasAttribute('thumbnails');\n    }\n\n    /**\n     * Loop attribute.\n     * @returns {boolean}\n     */\n    get loop() {\n        return this.hasAttribute('loop');\n    }\n\n    /**\n     * Class name for the Carousel.\n     * @type {string}\n     */\n    className = 'Carousel';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active-slide'];\n    }\n\n    /**\n     * Sets up the attributes for the Carousel.\n     * @param name\n     * @param old\n     * @param newName\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (name === 'active-slide') {\n            if (this.pagination) this.changePagination();\n\n            if (this.thumbnails) this.changeThumbnails();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the Carousel.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Before draw method for the Carousel.\n     */\n    beforeDraw() {\n        this.cloneFirstAndLastItems();\n    }\n\n    /**\n     * Draw method for the Carousel.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel');\n\n        let slides = document.createElement('div');\n        slides.classList.add('carousel-slides');\n\n        let slot = document.createElement('slot');\n\n        slides.appendChild(slot);\n        native.appendChild(slides);\n\n        if (this.navigation) {\n            this.prevButton = this.createPreviousButton();\n            this.nextButton = this.createNextButton();\n\n            native.appendChild(this.prevButton);\n            native.appendChild(this.nextButton);\n        }\n\n        if (this.pagination) native.appendChild(this.createPagination());\n\n        if (this.thumbnails) native.appendChild(this.createThumbnails());\n\n        fragment.appendChild(native);\n\n        this.slides = slides;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Carousel.\n     */\n    afterDraw() {\n        this.setIntersectionObserver();\n        this.getSlidesWithClones().forEach((slide, i) => {\n            this.intersectionObserver.observe(slide);\n        });\n\n        this.slidePerPage = this.getAttribute('slide-per-page') || 1;\n        let carouselSize = 100 / +this.slidePerPage;\n        this.style.setProperty('--wje-carousel-size', carouselSize + '%');\n\n        this.goToSlide(this.activeSlide, 'auto');\n\n        this.slides.addEventListener('scrollend', (e) => {\n            const slides = this.getSlides();\n            const entries = [...this.entriesMap.values()];\n            const visibleEntries = entries.find((entry) => entry.isIntersecting);\n\n            if (visibleEntries?.target.classList.contains('clone')) {\n                const cloneIndex = +visibleEntries.target.getAttribute('clone-index');\n                this.goToSlide(cloneIndex, 'auto');\n                this.activeSlide = cloneIndex;\n            } else if (visibleEntries) {\n                let slideIndex = slides.indexOf(visibleEntries.target);\n                this.activeSlide = slideIndex;\n            }\n        });\n    }\n\n    /**\n     * Sets up the IntersectionObserver for the Carousel.\n     */\n    setIntersectionObserver() {\n        this.intersectionObserver = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    this.entriesMap.set(entry.target, entry);\n                });\n            },\n            {\n                root: this.context.querySelector('.carousel-slides'),\n                threshold: 0.5,\n            }\n        );\n\n        this.entriesMap = new Map();\n        this.records = this.intersectionObserver.takeRecords();\n        this.records.forEach((entry) => {\n            this.entriesMap.set(entry.target, entry);\n        });\n    }\n\n    /**\n     * Goes to the slide.\n     * @param index\n     * @param behavior\n     * @param next\n     */\n    goToSlide(index, behavior = 'smooth', next = true) {\n        const slides = this.getSlides();\n        const slideWithClones = this.getSlidesWithClones();\n\n        // remove active class from all slides\n        slideWithClones.forEach((slide, i) => {\n            slide.classList.remove('active');\n        });\n\n        let newActiveSlide = this.loop\n            ? (index + slides.length) % slides.length\n            : Math.min(Math.max(index, 0), slides.length - 1);\n        this.activeSlide = newActiveSlide;\n\n        const nextSlideIndex = Math.min(\n            Math.max(index + (this.loop ? this.slidePerPage : 0), 0),\n            slideWithClones.length - 1\n        );\n        const nextSlideEl = this.getSlidesWithClones()[nextSlideIndex];\n        nextSlideEl.classList.add('active');\n\n        let nextSlideRect = nextSlideEl.getBoundingClientRect();\n        let slidesContainerRect = this.slides.getBoundingClientRect();\n\n        this.slides.scrollTo({\n            left: nextSlideRect.left - slidesContainerRect.left + this.slides.scrollLeft,\n            top: nextSlideRect.top - slidesContainerRect.top + this.slides.scrollTop,\n            behavior: behavior === 'smooth' ? 'smooth' : 'auto',\n        });\n\n        if (this.navigation && !this.loop) {\n            this.nextButton.removeAttribute('disabled');\n            this.prevButton.removeAttribute('disabled');\n\n            if (this.activeSlide === slides.length - 1) this.nextButton.setAttribute('disabled', '');\n\n            if (this.activeSlide === 0) this.prevButton.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Clones the first and last items.\n     */\n    cloneFirstAndLastItems() {\n        const items = this.getSlides();\n\n        if (items.length && this.loop) {\n            // Klonovánie prveho položky a pridanie na koniec\n            const firstItemClone = items[0].cloneNode(true);\n            firstItemClone.classList.add('clone');\n            firstItemClone.setAttribute('clone-index', 0);\n\n            this.appendChild(firstItemClone);\n\n            // Klonovanie poslednej položky a pridanie na zaciatok\n            const lastItemClone = items[items.length - 1].cloneNode(true);\n            lastItemClone.classList.add('clone');\n            lastItemClone.setAttribute('clone-index', items.length - 1);\n\n            this.insertBefore(lastItemClone, this.firstChild);\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    removeActiveSlide() {\n        this.getSlidesWithClones().forEach((slide, i) => {\n            slide.classList.remove('active');\n        });\n\n        if (this.pagination) {\n            this.context.querySelectorAll('.pagination-item').forEach((item) => {\n                item.classList.remove('active');\n            });\n        }\n\n        if (this.thumbnails) {\n            this.context.querySelectorAll('wje-thumbnail').forEach((item) => {\n                item.classList.remove('active');\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    changePagination() {\n        if (this.pagination) {\n            this.removeActiveSlide();\n            this.context.querySelectorAll('.pagination-item').forEach((item, i) => {\n                if (i === this.activeSlide) {\n                    item.classList.add('active');\n                }\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    changeThumbnails() {\n        if (this.thumbnails) {\n            this.removeActiveSlide();\n            this.context.querySelectorAll('wje-thumbnail').forEach((item, i) => {\n                if (i === this.activeSlide) {\n                    item.classList.add('active');\n                }\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createNextButton() {\n        const nextButton = document.createElement('wje-button');\n        nextButton.classList.add('next');\n        nextButton.innerHTML = '<wje-icon name=\"chevron-right\" size=\"large\"></wje-icon>';\n        nextButton.setAttribute('circle', '');\n        nextButton.setAttribute('fill', 'link');\n        nextButton.addEventListener('click', (e) => {\n            this.nextSlide();\n        });\n\n        return nextButton;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createPreviousButton() {\n        const previousButton = document.createElement('wje-button');\n        previousButton.classList.add('prev');\n        previousButton.innerHTML = '<wje-icon name=\"chevron-left\" size=\"large\"></wje-icon>';\n        previousButton.setAttribute('circle', '');\n        previousButton.setAttribute('fill', 'link');\n        previousButton.addEventListener('click', (e) => {\n            this.previousSlide();\n        });\n\n        return previousButton;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createPagination() {\n        const pagination = document.createElement('div');\n        pagination.classList.add('pagination');\n\n        const slides = this.getSlides();\n        slides.forEach((slide, i) => {\n            const paginationItem = document.createElement('div');\n            paginationItem.classList.add('pagination-item');\n            paginationItem.addEventListener('click', (e) => {\n                this.removeActiveSlide();\n                e.target.classList.add('active');\n                this.goToSlide(i);\n            });\n            pagination.appendChild(paginationItem);\n        });\n\n        return pagination;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createThumbnails() {\n        const thumbnails = document.createElement('div');\n        thumbnails.classList.add('thumbnails');\n\n        const slides = this.getSlides();\n        slides.forEach((slide, i) => {\n            const thumbnail = document.createElement('wje-thumbnail');\n            thumbnail.innerHTML = `<img src=\"${slide.querySelector('wje-img').getAttribute('src')}\"></img>`;\n            thumbnail.addEventListener('click', (e) => {\n                this.removeActiveSlide();\n                e.target.closest('wje-thumbnail').classList.add('active');\n                this.goToSlide(i);\n            });\n            thumbnails.appendChild(thumbnail);\n        });\n\n        return thumbnails;\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    nextSlide() {\n        this.goToSlide(this.activeSlide + this.slidePerPage);\n    }\n\n    /**\n     * Goes to the previous slide.\n     */\n    previousSlide() {\n        this.goToSlide(this.activeSlide - this.slidePerPage);\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {Array}\n     */\n    getSlides() {\n        return Array.from(this.querySelectorAll('wje-carousel-item:not(.clone)'));\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {Array}\n     */\n    getSlidesWithClones() {\n        return Array.from(this.querySelectorAll('wje-carousel-item'));\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {boolean}\n     */\n    canGoNext() {\n        return this.querySelector('.native-carousel').scrollLeft < this.querySelector('.native-carousel').scrollWidth;\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {boolean}\n     */\n    canGoPrevious() {\n        return this.querySelector('.native-carousel').scrollLeft > 0;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Carousel from './carousel.element.js';\n\n// export * from \"./carousel.element.js\";\nexport default Carousel;\n\nWJElement.define('wje-carousel', Carousel);\n"],"names":[],"mappings":"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"}