kemet-ui 1.3.1 → 2.0.0

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

@@ -0,0 +1,101 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @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.
+ *
+ */
+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;
+    slides: any[];
+    links: any[];
+    toolbarSlotElement: HTMLElement | null;
+    informationElement: HTMLElement | null;
+    swipeMove: (event: any) => void;
+    handleSlideShow: any;
+    startX: number;
+    slideWidth: number;
+    informationSlot: HTMLElement;
+    containerElement: HTMLElement;
+    slidesElement: HTMLElement;
+    sliderElement: HTMLElement;
+    toolbarElement: HTMLElement;
+    constructor();
+    firstUpdated(): void;
+    updated(prevProps: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+    swipeStart(event: any): void;
+    swipeEnd(event: any): void;
+    swipeUpdate(event: any): 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: any): void;
+    updateInformation(): void;
+    goToSlide(index: any): void;
+    handleTransitionEnd(): void;
+    handleLink(event: any): void;
+    getOption(option: any): any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel': KemetCarousel;
+    }
+}