kemet-ui 1.3.1 → 2.0.0

package/dist/components/kemet-carousel/kemet-carousel.js

@@ -1,226 +1,136 @@
-import { html, css, LitElement } from 'lit';
-
-export default class KemetCarousel extends LitElement {
-  static get styles() {
-    return css`
-      :host,
-      *,
-      *::before,
-      *::after {
-        box-sizing: border-box;
-      }
-
-      :host {
-        position: relative;
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        align-items: center;
-        width: var(--kemet-carousel-width, 100%);
-        height: var(--kemet-carousel-height, auto);
-        overflow: visible;
-      }
-
-      :host([arrows]) {
-        grid-template-columns: auto minmax(0, 1fr) auto;
-      }
-
-      .toolbar {
-        display: flex;
-        gap: var(--kemet-carousel-toolbar-gap, 1rem);
-        align-items: center;
-        justify-content: var(--kemet-carousel-toolbar-justify-content, center);
-        line-height: 1;
-        padding: var(--kemet-carousel-toolbar-padding, 1rem);
-      }
-
-      :host([inner]) .toolbar {
-        width: var(--kemet-carousel-toolbar-inner-width, 100%);
-        position: absolute;
-        bottom: var(--kemet-carousel-toolbar-inner-bottom, 0);
-        top: var(--kemet-carousel-toolbar-inner-top, auto);
-        color: var(--kemet-carousel-toolbar-inner-color, var(--kemet-color-white));
-        background-color: var(--kemet-carousel-toolbar-inner-background-color, rgba(0, 0, 0, 0.4));
-      }
-
-      .slides {
-        overflow: hidden;
-        position: relative;
-        padding: 1rem 0;
-        border: var(--kemet-carousel-slides-border, 1px solid var(--kemet-color-gray1));
-      }
-
-      .slider {
-        display: flex;
-        flex-wrap: nowrap;
-        transition: transform var(--kemet-carousel-transition-speed, 300ms) ease;
-      }
-
-      ::slotted([slot='next']),
-      ::slotted([slot='prev']) {
-        opacity: var(--kemet-carousel-arrows-opacity, 0.25);
-        transition: opacity var(--kemet-carousel-arrows-transition-speed, 300ms) ease-in-out;
-      }
-
-      :host(:hover) ::slotted([slot='next']),
-      :host(:hover) ::slotted([slot='prev']) {
-        opacity: var(--kemet-carousel-arrows-opacity-hover, 1);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * The current slide index.
-       */
-      index: {
-        type: Number,
-        reflect: true,
-      },
-      /**
-       * The total amount of slides
-       */
-      total: {
-        type: Number,
-      },
-      /**
-       * The width of the slider
-       */
-      sliderWidth: {
-        type: String,
-      },
-      /**
-       * The X position of the slider
-       */
-      sliderTranslateX: {
-        type: String,
-      },
-      /**
-       * Displays the toolbar inside the carousel container
-       */
-      inner: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Determines whether or not to display arrows
-       */
-      arrows: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Default options for the carousel
-       */
-      options: {
-        type: Object,
-      },
-      /**
-       * Options are different breakpoints for the carousel. Is mobile first.
-       */
-      breakpoints: {
-        type: Object,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.index = 0;
-    this.total = 0;
-    this.sliderWidth = 'auto';
-    this.sliderTranslateX = '0';
-    this.inner = false;
-    this.arrows = false;
-    this.options = {
-      perView: 1,
-      perMove: 1,
-      gap: 12,
-      slideshow: 0,
-      rewind: true,
-      center: false,
-    };
-    this.breakpoints = {
-      768: {
-        perView: 2,
-        gap: 24,
-        rewind: false,
-      },
-      1280: {
-        perView: 2.5,
-        center: true,
-      },
-    };
-
-    // bindings
-    this.addEventListener('kemet-carousel-first', this.handleFirst.bind(this));
-    this.addEventListener('kemet-carousel-last', this.handleLast.bind(this));
-    this.addEventListener('kemet-carousel-next', this.handleNext.bind(this));
-    this.addEventListener('kemet-carousel-prev', this.handlePrev.bind(this));
-    this.addEventListener('kemet-carousel-link', this.handleLink.bind(this));
-  }
-
-  firstUpdated() {
-    // standard properties
-    this.slides = [];
-    this.links = [];
-
-    // elements
-    this.containerElement = this.shadowRoot.querySelector('[part="container"]');
-    this.slidesElement = this.shadowRoot.querySelector('[part="slides"]');
-    this.sliderElement = this.shadowRoot.querySelector('[part="slider"]');
-    this.toolbarElement = this.shadowRoot.querySelector('[part="toolbar"]');
-    this.toolbarSlotElement = this.querySelector('[slot="toolbar"]');
-    this.informationElement = this.querySelector('kemet-carousel-information');
-
-    // events
-    window.addEventListener('resize', () => {
-      this.setSlideSize();
-      this.setToolbarSize();
-      this.updateIndex(this.index);
-    });
-
-    this.sliderElement.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
-
-    // methods
-    this.swipeMove = (event) => {
-      event.preventDefault();
-
-      const pageX = event.touches ? event.touches[0].pageX : event.pageX;
-      const currentSlide = this.slides[this.index];
-
-      this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
-    };
-
-    this.handleSlideShow = () => {
-      if (this.getOption('slideshow') > 0) {
-        this.updateIndex(this.index + 1);
-        clearTimeout(this.handleSlideShow);
-      }
-    };
-
-    // setup
-    this.setSlideSize();
-    this.goToSlide(this.index);
-  }
-
-  updated(prevProps) {
-    this.setSlideSize();
-    this.setToolbarSize();
-
-    if (prevProps.has('index')) {
-      this.updateIndex(this.index);
-      setTimeout(this.handleSlideShow, this.getOption('slideshow') * 1000);
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesCarousel } from './styles';
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel
+ * @summary The Carousel allows you to click or swipe through content.
+ *
+ * @prop {number} index - The current slide index.
+ * @prop {number} total - The total amount of slides.
+ * @prop {string} sliderWidth - The width of the slider.
+ * @prop {string} sliderTranslateX - The X position of the slider.
+ * @prop {boolean} inner - Displays the toolbar inside the carousel container.
+ * @prop {boolean} arrows - Determines whether or not to display arrows.
+ * @prop {object} options - Default options for the carousel.
+ * @prop {object} breakpoints - Options at different breakpoints for the carousel. Is mobile first.
+ *
+ * @event kemet-carousel-change-start - Fires with the a slide has begun to change.
+ * @event kemet-carousel-change-finished - Fires when a slide has changed and finished animating
+ *
+ * @slot slides - Place the slide elements here.
+ * @slot toolbar - Allows you to construct a toolbar within the carousel. Place things like pagination here.
+ * @slot prev - A slot for the previous arrow.
+ * @slot next - A slot for the next arrow.
+ * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.
+ *
+ * @cssproperty --kemet-carousel-width - The width of the carousel. Default: 100%.
+ * @cssproperty --kemet-carousel-height - The height of the carousel. Default: auto.
+ * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar. Default: 1rem.
+ * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar. Default: center.
+ * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar. Default: 1rem.
+ * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width. Default: 100%.
+ * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar. Default: 0.
+ * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar. Default: auto.
+ * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color. Default: rgba(0, 0, 0, 0.4).
+ * @cssproperty --kemet-carousel-slides-border - The border around the slides. Default: 1px solid var(--kemet-color-gray1).
+ * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides. Default: 300ms.
+ * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity. Default: 0.25.
+ * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity. Default: 1.
+ * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed. Default: 300ms.
+ *
+ * @csspart container - Contains the slides and toolbar.
+ * @csspart slides - Wrapper for the slider.
+ * @csspart slider - Contains the slides.
+ * @csspart toolbar - Contains the toolbar.
+ *
+ */
+let KemetCarousel = class KemetCarousel extends LitElement {
+    constructor() {
+        super();
+        this.index = 0;
+        this.total = 0;
+        this.sliderWidth = 'auto';
+        this.sliderTranslateX = '0';
+        this.inner = false;
+        this.arrows = false;
+        this.options = {
+            perView: 1,
+            perMove: 1,
+            gap: 12,
+            slideshow: 0,
+            rewind: true,
+            center: false,
+        };
+        this.breakpoints = {
+            768: {
+                perView: 2,
+                gap: 24,
+                rewind: false,
+            },
+            1280: {
+                perView: 2.5,
+                center: true,
+            },
+        };
+        this.slides = [];
+        this.links = [];
+        // bindings
+        this.addEventListener('kemet-carousel-first', this.handleFirst.bind(this));
+        this.addEventListener('kemet-carousel-last', this.handleLast.bind(this));
+        this.addEventListener('kemet-carousel-next', this.handleNext.bind(this));
+        this.addEventListener('kemet-carousel-prev', this.handlePrev.bind(this));
+        this.addEventListener('kemet-carousel-link', this.handleLink.bind(this));
+    }
+    firstUpdated() {
+        var _a;
+        // elements
+        this.toolbarSlotElement = this.querySelector('[slot="toolbar"]');
+        this.informationElement = this.querySelector('kemet-carousel-information');
+        // events
+        window.addEventListener('resize', () => {
+            this.setSlideSize();
+            this.setToolbarSize();
+            this.updateIndex(this.index);
+        });
+        (_a = this.sliderElement) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
+        // methods
+        this.swipeMove = (event) => {
+            event.preventDefault();
+            const pageX = event.touches ? event.touches[0].pageX : event.pageX;
+            const currentSlide = this.slides[this.index];
+            this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
+        };
+        this.handleSlideShow = () => {
+            if (this.getOption('slideshow') > 0) {
+                this.updateIndex(this.index + 1);
+                clearTimeout(this.handleSlideShow);
+            }
+        };
+        // setup
+        this.setSlideSize();
+        this.goToSlide(this.index);
+    }
+    updated(prevProps) {
+        this.setSlideSize();
+        this.setToolbarSize();
+        if (prevProps.has('index')) {
+            this.updateIndex(this.index);
+            setTimeout(this.handleSlideShow, this.getOption('slideshow') * 1000);
+        }
     }
-  }
-
-  render() {
-    return html`
+    render() {
+        return html `
       <slot name="prev" @slotchange=${this.handleArrows}></slot>
-      <div class="container" part="container">
+      <div id="container" class="container" part="container">
         <section
+          id="slides"
           class="slides"
           part="slides"
           @mousedown=${this.swipeStart}
@@ -229,7 +139,7 @@ export default class KemetCarousel extends LitElement {
           @touchend=${this.swipeEnd}
           @mouseleave=${this.swipeLeave}
         >
-          <div class="slider" part="slider" style="width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});">
+          <div id="slider" class="slider" part="slider" style="width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});">
             <slot name="slides" @slotchange="${this.handleSlotChange}"></slot>
           </div>
         </section>
@@ -237,256 +147,262 @@ export default class KemetCarousel extends LitElement {
       </div>
       <slot name="next" @slotchange=${this.handleArrows}></slot>
     `;
-  }
-
-  swipeStart(event) {
-    this.startX = event.touches ? event.touches[0].pageX : event.pageX;
-
-    this.addEventListener('mousemove', this.swipeMove);
-    this.addEventListener('touchmove', this.swipeMove);
-  }
-
-  swipeEnd(event) {
-    this.updateIndex(this.swipeUpdate(event));
-    this.removeEventListener('mousemove', this.swipeMove, false);
-    this.removeEventListener('touchmove', this.swipeMove, false);
-  }
-
-  swipeUpdate(event) {
-    const pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;
-    const direction = this.startX > pageX ? 'right' : 'left';
-    const threshold = this.slidesElement.offsetWidth / 3;
-    const diff = this.startX - pageX;
-    const shouldUpdate = Math.abs(diff) > threshold;
-
-    let { index } = this;
-
-    if (shouldUpdate && direction === 'right') {
-      index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;
     }
-
-    if (shouldUpdate && direction === 'left') {
-      index = this.index < 1 ? 0 : this.index - 1;
+    swipeStart(event) {
+        this.startX = event.touches ? event.touches[0].pageX : event.pageX;
+        this.addEventListener('mousemove', this.swipeMove);
+        this.addEventListener('touchmove', this.swipeMove);
+    }
+    swipeEnd(event) {
+        this.updateIndex(this.swipeUpdate(event));
+        this.removeEventListener('mousemove', this.swipeMove, false);
+        this.removeEventListener('touchmove', this.swipeMove, false);
+    }
+    swipeUpdate(event) {
+        const pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;
+        const direction = this.startX > pageX ? 'right' : 'left';
+        const threshold = this.slidesElement.offsetWidth / 3;
+        const diff = this.startX - pageX;
+        const shouldUpdate = Math.abs(diff) > threshold;
+        let { index } = this;
+        if (shouldUpdate && direction === 'right') {
+            index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;
+        }
+        if (shouldUpdate && direction === 'left') {
+            index = this.index < 1 ? 0 : this.index - 1;
+        }
+        return index;
+    }
+    swipeLeave() {
+        this.updateIndex(this.index);
+        this.removeEventListener('mousemove', this.swipeMove, false);
+        this.removeEventListener('touchmove', this.swipeMove, false);
     }
-
-    return index;
-  }
-
-  swipeLeave() {
-    this.updateIndex(this.index);
-    this.removeEventListener('mousemove', this.swipeMove, false);
-    this.removeEventListener('touchmove', this.swipeMove, false);
-  }
-
-  setSlideSize() {
-    this.slideWidth = this.containerElement.offsetWidth / this.getOption('perView');
-
-    this.slides.forEach((slide) => {
-      slide.style.marginLeft = `${this.getOption('gap') / 2}px`;
-      slide.style.marginRight = `${this.getOption('gap') / 2}px`;
-      slide.style.width = `${this.slideWidth - this.getOption('gap')}px`;
-    });
-
-    this.sliderWidth = `${this.slideWidth * this.slides.length}px`;
-  }
-
-  setToolbarSize() {
-    if (this.inner && this.toolbarElement) {
-      const width = this.slidesElement.offsetWidth;
-      this.toolbarElement.style.width = `${width}px`;
+    setSlideSize() {
+        var _a;
+        this.slideWidth = ((_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) / this.getOption('perView');
+        this.slides.forEach((slide) => {
+            slide.style.marginLeft = `${this.getOption('gap') / 2}px`;
+            slide.style.marginRight = `${this.getOption('gap') / 2}px`;
+            slide.style.width = `${this.slideWidth - this.getOption('gap')}px`;
+        });
+        this.sliderWidth = `${this.slideWidth * this.slides.length}px`;
     }
-  }
-
-  makeToolbar() {
-    if (this.toolbarSlotElement) {
-      return html`
-        <section class="toolbar" part="toolbar">
+    setToolbarSize() {
+        if (this.inner && this.toolbarElement) {
+            const width = this.slidesElement.offsetWidth;
+            this.toolbarElement.style.width = `${width}px`;
+        }
+    }
+    makeToolbar() {
+        if (this.toolbarSlotElement) {
+            return html `
+        <section id="toolbar" class="toolbar" part="toolbar">
           <slot name="toolbar"></slot>
         </section>
       `;
+        }
+        return null;
     }
-
-    return null;
-  }
-
-  handleSlotChange() {
-    const slides = this.querySelectorAll('kemet-carousel-slide');
-    const links = this.querySelectorAll('kemet-carousel-link');
-
-    // handle slides
-    slides.forEach((slide) => {
-      this.slides.push(slide);
-    });
-
-    this.updateInformation();
-    this.total = slides.length;
-    slides[this.index].selected = true;
-
-    // handle links
-    links.forEach((link) => {
-      this.links.push(link);
-    });
-  }
-
-  handleArrows() {
-    this.arrows = true;
-  }
-
-  handleFirst() {
-    this.updateIndex(0);
-  }
-
-  handleLast() {
-    this.updateIndex(this.slides.length - 1);
-  }
-
-  handleNext() {
-    let newIndex = this.index + this.getOption('perMove');
-
-    if (newIndex >= this.slides.length) {
-      if (this.getOption('rewind')) {
-        newIndex = 0;
-      } else {
-        newIndex = this.index;
-      }
+    handleSlotChange() {
+        const slides = this.querySelectorAll('kemet-carousel-slide');
+        const links = this.querySelectorAll('kemet-carousel-link');
+        // handle slides
+        slides.forEach((slide) => {
+            this.slides.push(slide);
+        });
+        this.updateInformation();
+        this.total = slides.length;
+        slides[this.index].selected = true;
+        // handle links
+        links.forEach((link) => {
+            this.links.push(link);
+        });
     }
-
-    this.updateIndex(newIndex);
-  }
-
-  handlePrev() {
-    let newIndex = this.index - this.getOption('perMove');
-
-    // send them to the last slide
-    if (newIndex < 0) {
-      if (this.getOption('rewind')) {
-        newIndex = this.slides.length - 1;
-      } else {
-        newIndex = this.index;
-      }
+    handleArrows() {
+        this.arrows = true;
     }
-
-    this.updateIndex(newIndex);
-  }
-
-  updateIndex(newIndex) {
-    let currentSlide = this.slides[this.index];
-    let currentLink = this.links[newIndex];
-
-    // remove selected from all links
-    this.links.forEach((link) => {
-      link.selected = false;
-    });
-
-    // if current link is invalid assume it's the first link
-    if (!currentLink) {
-      [currentLink] = this.links;
+    handleFirst() {
+        this.updateIndex(0);
     }
-
-    // add selected to current link
-    if (currentLink) {
-      currentLink.selected = true;
+    handleLast() {
+        this.updateIndex(this.slides.length - 1);
     }
-
-    if (currentSlide) {
-      currentSlide.setAttribute('aria-hidden', 'true');
-
-      // correct for invalid indexes
-      if (newIndex > -1 && newIndex < this.slides.length) {
-        this.index = newIndex;
-      } else {
-        // eslint-disable-next-line no-console
-        console.warn('An invalid index number was entered. The kemet-carousel has been reset to the first slide.');
-        this.index = 0;
-      }
-
-      // move
-      this.goToSlide(this.index);
-
-      // update new slide
-      currentSlide = this.slides[this.index];
-      currentSlide.setAttribute('aria-hidden', 'false');
-
-      this.slides.forEach((slide) => {
-        slide.selected = false;
-      });
-
-      currentSlide.selected = true;
-
-      // notify consumers of slide change
-
-      /**
-       * Fires with the a slide has begun to change
-       */
-      this.dispatchEvent(new CustomEvent('kemet-carousel-change-start', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
-
-      // update information element
-      this.updateInformation();
+    handleNext() {
+        let newIndex = this.index + this.getOption('perMove');
+        if (newIndex >= this.slides.length) {
+            if (this.getOption('rewind')) {
+                newIndex = 0;
+            }
+            else {
+                newIndex = this.index;
+            }
+        }
+        this.updateIndex(newIndex);
+    }
+    handlePrev() {
+        let newIndex = this.index - this.getOption('perMove');
+        // send them to the last slide
+        if (newIndex < 0) {
+            if (this.getOption('rewind')) {
+                newIndex = this.slides.length - 1;
+            }
+            else {
+                newIndex = this.index;
+            }
+        }
+        this.updateIndex(newIndex);
+    }
+    updateIndex(newIndex) {
+        let currentSlide = this.slides[this.index];
+        let currentLink = this.links[newIndex];
+        // remove selected from all links
+        this.links.forEach((link) => {
+            link.selected = false;
+        });
+        // if current link is invalid assume it's the first link
+        if (!currentLink) {
+            [currentLink] = this.links;
+        }
+        // add selected to current link
+        if (currentLink) {
+            currentLink.selected = true;
+        }
+        if (currentSlide) {
+            currentSlide.setAttribute('aria-hidden', 'true');
+            // correct for invalid indexes
+            if (newIndex > -1 && newIndex < this.slides.length) {
+                this.index = newIndex;
+            }
+            else {
+                // eslint-disable-next-line no-console
+                console.warn('An invalid index number was entered. The kemet-carousel has been reset to the first slide.');
+                this.index = 0;
+            }
+            // move
+            this.goToSlide(this.index);
+            // update new slide
+            currentSlide = this.slides[this.index];
+            currentSlide.setAttribute('aria-hidden', 'false');
+            this.slides.forEach((slide) => {
+                slide.selected = false;
+            });
+            currentSlide.selected = true;
+            // notify consumers of slide change
+            emitEvent(this, 'kemet-carousel-change-start', this);
+            // update information element
+            this.updateInformation();
+        }
+    }
+    updateInformation() {
+        this.informationSlot = this.slides[this.index].querySelector('[slot="information"]');
+        if (this.informationElement) {
+            if (this.informationSlot) {
+                this.informationElement.innerHTML = this.informationSlot.outerHTML;
+            }
+            else {
+                this.informationElement.innerHTML = '';
+            }
+        }
+    }
+    goToSlide(index) {
+        if (this.getOption('center') === true) {
+            const slidesCenter = this.slidesElement.offsetWidth / 2;
+            const slideX = this.slideWidth * index;
+            this.sliderTranslateX = `${slideX - (slideX - slidesCenter) - this.slideWidth / 2 - slideX}px`;
+        }
+        else {
+            this.sliderTranslateX = `${(this.slideWidth * index) * -1}px`;
+        }
     }
-  }
-
-  updateInformation() {
-    this.informationSlot = this.slides[this.index].querySelector('[slot="information"]');
-
-    if (this.informationElement) {
-      if (this.informationSlot) {
-        this.informationElement.innerHTML = this.informationSlot.outerHTML;
-      } else {
-        this.informationElement.innerHTML = '';
-      }
+    handleTransitionEnd() {
+        const currentElement = this.querySelector('kemet-carousel-current');
+        if (currentElement) {
+            currentElement.current = this.index + 1;
+        }
+        emitEvent(this, 'kemet-carousel-change-finished', this);
     }
-  }
-
-  goToSlide(index) {
-    if (this.getOption('center') === true) {
-      const slidesCenter = this.slidesElement.offsetWidth / 2;
-      const slideX = this.slideWidth * index;
-      this.sliderTranslateX = `${slideX - (slideX - slidesCenter) - this.slideWidth / 2 - slideX}px`;
-    } else {
-      this.sliderTranslateX = `${(this.slideWidth * index) * -1}px`;
+    handleLink(event) {
+        this.updateIndex(event.detail.slide);
     }
-  }
-
-  handleTransitionEnd() {
-    const currentElement = this.querySelector('kemet-carousel-current');
-
-    if (currentElement) {
-      currentElement.current = this.index + 1;
+    getOption(option) {
+        const breakpoints = Object.keys(this.breakpoints);
+        let value = this.options[option];
+        breakpoints.forEach((breakpoint) => {
+            if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== undefined) {
+                value = this.breakpoints[breakpoint][option];
+            }
+            return value;
+        });
+        return value;
     }
-
-    /**
-     * Fires when a slide has changed and finished animating
-     */
-    this.dispatchEvent(new CustomEvent('kemet-carousel-change-finished', {
-      bubbles: true,
-      composed: true,
-      detail: this,
-    }));
-  }
-
-  handleLink(event) {
-    this.updateIndex(event.detail.slide);
-  }
-
-  getOption(option) {
-    const breakpoints = Object.keys(this.breakpoints);
-    let value = this.options[option];
-
-    breakpoints.forEach((breakpoint) => {
-      if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== undefined) {
-        value = this.breakpoints[breakpoint][option];
-      }
-
-      return value;
-    });
-
-    return value;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel') || customElements.define('kemet-carousel', KemetCarousel);
+};
+KemetCarousel.styles = [stylesCarousel];
+__decorate([
+    property({ type: Number, reflect: true })
+], KemetCarousel.prototype, "index", void 0);
+__decorate([
+    property({ type: Number })
+], KemetCarousel.prototype, "total", void 0);
+__decorate([
+    property({ type: String })
+], KemetCarousel.prototype, "sliderWidth", void 0);
+__decorate([
+    property({ type: String })
+], KemetCarousel.prototype, "sliderTranslateX", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetCarousel.prototype, "inner", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetCarousel.prototype, "arrows", void 0);
+__decorate([
+    property({ type: Object })
+], KemetCarousel.prototype, "options", void 0);
+__decorate([
+    property({ type: Object })
+], KemetCarousel.prototype, "breakpoints", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "slides", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "links", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "toolbarSlotElement", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "informationElement", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "swipeMove", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "handleSlideShow", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "startX", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "slideWidth", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "informationSlot", void 0);
+__decorate([
+    query('#container')
+], KemetCarousel.prototype, "containerElement", void 0);
+__decorate([
+    query('#slides')
+], KemetCarousel.prototype, "slidesElement", void 0);
+__decorate([
+    query('#slider')
+], KemetCarousel.prototype, "sliderElement", void 0);
+__decorate([
+    query('#toolbar')
+], KemetCarousel.prototype, "toolbarElement", void 0);
+KemetCarousel = __decorate([
+    customElement('kemet-carousel')
+], KemetCarousel);
+export default KemetCarousel;
+//# sourceMappingURL=kemet-carousel.js.map