kemet-ui 3.1.0 → 4.0.1

package/dist/components/kemet-carousel/kemet-carousel-total.d.ts

@@ -1,26 +0,0 @@
-import { LitElement } from 'lit';
-import KemetCarousel from './kemet-carousel';
-/**
- *
- * @since 1.1.0
- * @status stable
- *
- * @tagname kemet-carousel-total
- * @summary Displays the total slide number.
- *
- * @prop {number} total - The total number of slides.
- *
- */
-export default class KemetCarouselTotal extends LitElement {
-    static styles: import("lit").CSSResult[];
-    total: number | undefined;
-    carousel: KemetCarousel | null;
-    firstUpdated(): void;
-    updated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-carousel-total': KemetCarouselTotal;
-    }
-}

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

@@ -1,44 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-/**
- *
- * @since 1.1.0
- * @status stable
- *
- * @tagname kemet-carousel-total
- * @summary Displays the total slide number.
- *
- * @prop {number} total - The total number of slides.
- *
- */
-let KemetCarouselTotal = class KemetCarouselTotal extends LitElement {
-    firstUpdated() {
-        this.carousel = this.closest('kemet-carousel');
-    }
-    updated() {
-        var _a;
-        this.total = (_a = this.carousel) === null || _a === void 0 ? void 0 : _a.total;
-    }
-    render() {
-        return html `${this.total}`;
-    }
-};
-KemetCarouselTotal.styles = [
-    css `
-      :host {
-        display: inline-block;
-      }
-    `,
-];
-__decorate([
-    property({ type: Number })
-], KemetCarouselTotal.prototype, "total", void 0);
-__decorate([
-    state()
-], KemetCarouselTotal.prototype, "carousel", void 0);
-KemetCarouselTotal = __decorate([
-    customElement('kemet-carousel-total')
-], KemetCarouselTotal);
-export default KemetCarouselTotal;
-//# sourceMappingURL=kemet-carousel-total.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-carousel-total.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-total.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGnE;;;;;;;;;;GAUG;AAGY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAexD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,CAAC;IAED,OAAO;;QACL,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;;AAxBM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACD;AAG1B;IADC,KAAK,EAAE;oDACuB;AAbZ,kBAAkB;IADtC,aAAa,CAAC,sBAAsB,CAAC;GACjB,kBAAkB,CA0BtC;eA1BoB,kBAAkB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport KemetCarousel from './kemet-carousel';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-total\n * @summary Displays the total slide number.\n *\n * @prop {number} total - The total number of slides.\n *\n */\n\n@customElement('kemet-carousel-total')\nexport default class KemetCarouselTotal extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  total: number | undefined;\n\n  @state()\n  carousel: KemetCarousel | null;\n\n  firstUpdated() {\n    this.carousel = this.closest('kemet-carousel');\n  }\n\n  updated() {\n    this.total = this.carousel?.total;\n  }\n\n  render() {\n    return html`${this.total}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-total': KemetCarouselTotal\n  }\n}\n"]}

package/dist/components/kemet-carousel/kemet-carousel.d.ts

@@ -1,118 +0,0 @@
-import { LitElement } from 'lit';
-import type KemetCarouselLink from './kemet-carousel-link';
-import type KemetCarouselSlide from './kemet-carousel-slide';
-/**
- *
- * @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 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 when the 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.
- * @cssproperty --kemet-carousel-height - The height of the carousel.
- * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar.
- * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar.
- * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar.
- * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width.
- * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar.
- * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar.
- * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color.
- * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color.
- * @cssproperty --kemet-carousel-slides-border - The border around the slides.
- * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides.
- * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity.
- * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity.
- * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed.
- *
- * @csspart container - Contains the slides and toolbar.
- * @csspart slides - Wrapper for the slider.
- * @csspart slider - Contains the slides.
- * @csspart toolbar - Contains the toolbar.
- *
- */
-export default class KemetCarousel extends LitElement {
-    static styles: import("lit").CSSResult[];
-    index: number;
-    total: number;
-    sliderWidth: string;
-    sliderTranslateX: string;
-    inner: boolean;
-    arrows: boolean;
-    options: object;
-    breakpoints: object;
-    /** @internal */
-    slides: KemetCarouselSlide[];
-    /** @internal */
-    links: KemetCarouselLink[];
-    /** @internal */
-    toolbarSlotElement: HTMLElement | null;
-    /** @internal */
-    informationElement: HTMLElement | null;
-    /** @internal */
-    swipeMove: (event: TouchEvent | MouseEvent) => void;
-    /** @internal */
-    handleSlideShow: () => void;
-    /** @internal */
-    slideShowID: number;
-    /** @internal */
-    startX: number;
-    /** @internal */
-    slideWidth: number;
-    /** @internal */
-    informationSlot: HTMLElement;
-    /** @internal */
-    containerElement: HTMLElement;
-    /** @internal */
-    slidesElement: HTMLElement;
-    /** @internal */
-    sliderElement: HTMLElement;
-    /** @internal */
-    toolbarElement: HTMLElement;
-    constructor();
-    firstUpdated(): void;
-    updated(prevProps: Map<string, never>): void;
-    render(): import("lit-html").TemplateResult<1>;
-    swipeStart(event: TouchEvent | MouseEvent): void;
-    swipeEnd(event: TouchEvent | MouseEvent): void;
-    swipeUpdate(event: TouchEvent | MouseEvent): number;
-    swipeLeave(): void;
-    setSlideSize(): void;
-    setToolbarSize(): void;
-    makeToolbar(): import("lit-html").TemplateResult<1>;
-    handleSlotChange(): void;
-    handleArrows(): void;
-    handleFirst(): void;
-    handleLast(): void;
-    handleNext(): void;
-    handlePrev(): void;
-    updateIndex(newIndex: number): void;
-    updateInformation(): void;
-    goToSlide(index: number): void;
-    handleTransitionEnd(): void;
-    handleLink(event: CustomEvent): void;
-    getOption(option: string): any;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-carousel': KemetCarousel;
-    }
-}

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

@@ -1,429 +0,0 @@
-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 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 when the 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.
- * @cssproperty --kemet-carousel-height - The height of the carousel.
- * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar.
- * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar.
- * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar.
- * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width.
- * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar.
- * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar.
- * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color.
- * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color.
- * @cssproperty --kemet-carousel-slides-border - The border around the slides.
- * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides.
- * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity.
- * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity.
- * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed.
- *
- * @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,
-            },
-        };
-        /** @internal */
-        this.slides = [];
-        /** @internal */
-        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();
-            let pageX;
-            if ('touches' in event) {
-                pageX = event.touches[0].pageX;
-            }
-            else {
-                pageX = event.pageX;
-            }
-            const currentSlide = this.slides[this.index];
-            this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
-        };
-        // setup
-        this.setSlideSize();
-        this.goToSlide(this.index);
-    }
-    updated(prevProps) {
-        this.setSlideSize();
-        this.setToolbarSize();
-        if (prevProps.has('index')) {
-            this.updateIndex(this.index);
-            this.slideShowID = window.setTimeout(() => {
-                if (this.getOption('slideshow') > 0) {
-                    this.updateIndex(this.index + 1);
-                    clearTimeout(this.slideShowID);
-                }
-            }, this.getOption('slideshow') * 1000);
-        }
-    }
-    render() {
-        return html `
-      <slot name="prev" @slotchange=${this.handleArrows}></slot>
-      <div id="container" class="container" part="container">
-        <section
-          id="slides"
-          class="slides"
-          part="slides"
-          @mousedown=${this.swipeStart}
-          @mouseup=${this.swipeEnd}
-          @touchstart=${this.swipeStart}
-          @touchend=${this.swipeEnd}
-          @mouseleave=${this.swipeLeave}
-        >
-          <div id="slider" class="slider" part="slider" style="width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});">
-            <slot name="slides" @slotchange="${this.handleSlotChange}"></slot>
-          </div>
-        </section>
-        ${this.makeToolbar()}
-      </div>
-      <slot name="next" @slotchange=${this.handleArrows}></slot>
-    `;
-    }
-    swipeStart(event) {
-        if ('touches' in event) {
-            this.startX = event.touches[0].pageX;
-        }
-        else {
-            this.startX = 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) {
-        let pageX;
-        if ('changedTouches' in event) {
-            pageX = event.changedTouches[0].pageX;
-        }
-        else {
-            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);
-    }
-    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`;
-    }
-    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;
-    }
-    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;
-            }
-        }
-        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`;
-        }
-    }
-    handleTransitionEnd() {
-        const currentElement = this.querySelector('kemet-carousel-current');
-        if (currentElement) {
-            currentElement.current = this.index + 1;
-        }
-        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;
-    }
-};
-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, "slideShowID", 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