kemet-ui 1.4.0 → 2.0.0

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

@@ -1,7 +1,8 @@
+import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { emitEvent } from '../../utilities/misc/events.js';
-import { stylesCarousel } from './styles.js';
-
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesCarousel } from './styles';
 /**
  *
  * @since 1.1.0
@@ -50,122 +51,86 @@ import { stylesCarousel } from './styles.js';
  * @csspart toolbar - Contains the toolbar.
  *
  */
-
-export default class KemetCarousel extends LitElement {
-  static get styles() {
-    return [stylesCarousel];
-  }
-
-  static get properties() {
-    return {
-      index: { type: Number, reflect: true },
-      total: { type: Number },
-      sliderWidth: { type: String },
-      sliderTranslateX: { type: String },
-      inner: { type: Boolean, reflect: true },
-      arrows: { type: Boolean, reflect: true },
-      options: { type: Object },
-      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);
+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}
@@ -174,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>
@@ -182,241 +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
-      emitEvent(this, 'kemet-carousel-change-start', 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;
     }
-
-    emitEvent(this, 'kemet-carousel-change-finished', 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