@esri/calcite-components 2.8.0-next.9 → 2.8.0

package/dist/collection/components/carousel/carousel.js

@@ -0,0 +1,788 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.8.0
+ */
+import { h, Host, } from "@stencil/core";
+import { focusElementInGroup, getElementDir, slotChangeGetAssignedElements, toAriaBoolean, } from "../../utils/dom";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { guid } from "../../utils/guid";
+import { connectInteractive, updateHostInteraction, disconnectInteractive, InteractiveContainer, } from "../../utils/interactive";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
+import { getRoundRobinIndex } from "../../utils/array";
+import { CSS, DURATION, ICONS } from "./resources";
+/**
+ * @slot - A slot for adding `calcite-carousel-item`s.
+ */
+export class Carousel {
+    constructor() {
+        this.containerId = `calcite-carousel-container-${guid()}`;
+        this.slideDurationInterval = null;
+        this.slideInterval = null;
+        this.autoplayHandler = () => {
+            this.clearIntervals();
+            this.slideDurationInterval = setInterval(this.timer, this.autoplayDuration / 100);
+        };
+        this.timer = () => {
+            let time = this.slideDurationRemaining;
+            const notSuspended = (!this.suspendedDueToFocus && !this.suspendedDueToHover) || this.userPreventsSuspend;
+            if (notSuspended) {
+                if (time <= 0.01) {
+                    time = 1;
+                    this.nextItem(false);
+                }
+                else {
+                    time = time - 0.01;
+                }
+            }
+            if (time > 0) {
+                this.slideDurationRemaining = time;
+            }
+        };
+        this.handleSlotChange = (event) => {
+            const items = slotChangeGetAssignedElements(event);
+            if (items.length < 1) {
+                return;
+            }
+            const activeItemIndex = items.findIndex((item) => item.selected);
+            const requestedSelectedIndex = activeItemIndex > -1 ? activeItemIndex : 0;
+            this.items = items;
+            this.setSelectedItem(requestedSelectedIndex, false);
+        };
+        this.setSelectedItem = (requestedIndex, emit) => {
+            const previousSelected = this.selectedIndex;
+            this.items.forEach((el, index) => {
+                const isMatch = requestedIndex === index;
+                el.selected = isMatch;
+                if (isMatch) {
+                    this.selectedItem = el;
+                    this.selectedIndex = index;
+                }
+            });
+            if (emit) {
+                this.playing = false;
+                if (previousSelected !== this.selectedIndex) {
+                    this.calciteCarouselChange.emit();
+                }
+            }
+        };
+        this.handleArrowClick = (event) => {
+            const direction = event.target.dataset.direction;
+            if (direction === "next") {
+                this.nextItem(true);
+            }
+            else if (direction === "previous") {
+                this.previousItem();
+            }
+        };
+        this.handleItemSelection = (event) => {
+            if (this.playing) {
+                this.handlePause(true);
+            }
+            const item = event.target;
+            const requestedPosition = parseInt(item.dataset.index);
+            this.direction = requestedPosition > this.selectedIndex ? "forward" : "backward";
+            this.setSelectedItem(requestedPosition, true);
+        };
+        this.toggleRotation = () => {
+            this.userPreventsSuspend = true;
+            if (this.playing) {
+                this.handlePause(true);
+            }
+            else {
+                this.handlePlay(true);
+            }
+        };
+        this.handleFocusIn = () => {
+            const isPlaying = this.playing;
+            if (isPlaying) {
+                this.suspendedDueToFocus = true;
+            }
+            if ((!this.suspendedDueToFocus || !this.suspendedDueToHover) && isPlaying) {
+                this.calciteCarouselPause.emit();
+            }
+        };
+        this.handleMouseIn = () => {
+            const isPlaying = this.playing;
+            if (isPlaying) {
+                this.suspendedDueToHover = true;
+            }
+            if ((!this.suspendedDueToFocus || !this.suspendedDueToHover) && isPlaying) {
+                this.calciteCarouselPause.emit();
+            }
+        };
+        this.handleMouseOut = (event) => {
+            const leavingComponent = !this.el.contains(event.relatedTarget);
+            const isPlaying = this.playing;
+            if (leavingComponent && isPlaying) {
+                this.suspendedDueToHover = false;
+            }
+            if (leavingComponent && isPlaying && !this.suspendedDueToFocus) {
+                this.userPreventsSuspend = false;
+                this.calciteCarouselResume.emit();
+            }
+        };
+        this.handleFocusOut = (event) => {
+            const leavingComponent = !event.composedPath().includes(event.relatedTarget);
+            const isPlaying = this.playing;
+            if (leavingComponent && isPlaying) {
+                this.suspendedDueToFocus = false;
+            }
+            if (leavingComponent && isPlaying && !this.suspendedDueToHover) {
+                this.userPreventsSuspend = false;
+                this.calciteCarouselResume.emit();
+            }
+        };
+        this.containerKeyDownHandler = (event) => {
+            if (event.target !== this.container) {
+                return;
+            }
+            switch (event.key) {
+                case " ":
+                case "Enter":
+                    event.preventDefault();
+                    this.toggleRotation();
+                    break;
+                case "ArrowRight":
+                    this.direction = "forward";
+                    this.nextItem(true);
+                    break;
+                case "ArrowLeft":
+                    this.direction = "backward";
+                    this.previousItem();
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    this.direction = "backward";
+                    this.setSelectedItem(0, true);
+                    break;
+                case "End":
+                    event.preventDefault();
+                    this.direction = "forward";
+                    this.setSelectedItem(this.items.length - 1, true);
+                    break;
+            }
+        };
+        this.tabListKeyDownHandler = (event) => {
+            const interactiveItems = Array(...this.tabList.querySelectorAll("button"));
+            const currentEl = event.target;
+            switch (event.key) {
+                case "ArrowRight":
+                    focusElementInGroup(interactiveItems, currentEl, "next");
+                    break;
+                case "ArrowLeft":
+                    focusElementInGroup(interactiveItems, currentEl, "previous");
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    focusElementInGroup(interactiveItems, currentEl, "first");
+                    break;
+                case "End":
+                    event.preventDefault();
+                    focusElementInGroup(interactiveItems, currentEl, "last");
+                    break;
+            }
+        };
+        this.storeTabListRef = (el) => {
+            this.tabList = el;
+        };
+        this.storeContainerRef = (el) => {
+            this.container = el;
+        };
+        // --------------------------------------------------------------------------
+        //
+        //  Render Methods
+        //
+        // --------------------------------------------------------------------------
+        this.renderRotationControl = () => {
+            const text = this.playing ? this.messages.pause : this.messages.play;
+            return (h("button", { "aria-label": text, class: {
+                    [CSS.paginationItem]: true,
+                    [CSS.autoplayControl]: true,
+                }, onClick: this.toggleRotation, title: text }, h("calcite-icon", { icon: this.playing ? ICONS.pause : ICONS.play, scale: "s" }), this.playing && (h("calcite-progress", { class: CSS.autoplayProgress, label: this.messages.carouselItemProgress, value: this.slideDurationRemaining }))));
+        };
+        this.renderPaginationArea = () => (h("div", { class: {
+                [CSS.pagination]: true,
+                [CSS.containerOverlaid]: this.controlOverlay,
+            }, onKeyDown: this.tabListKeyDownHandler,
+            // eslint-disable-next-line react/jsx-sort-props
+            ref: this.storeTabListRef }, (this.playing || this.autoplay === "" || this.autoplay || this.autoplay === "paused") &&
+            this.renderRotationControl(), this.arrowType === "inline" && this.renderArrow("previous"), this.renderPaginationItems(), this.arrowType === "inline" && this.renderArrow("next")));
+        this.renderPaginationItems = () => (h("div", { "aria-label": this.label, class: CSS.paginationItems, role: "tablist" }, this.items.map((item, index) => {
+            const isMatch = index === this.selectedIndex;
+            return (h("button", { "aria-controls": !isMatch ? item.id : undefined, "aria-selected": toAriaBoolean(isMatch), class: {
+                    [CSS.paginationItem]: true,
+                    [CSS.paginationItemIndividual]: true,
+                    [CSS.paginationItemSelected]: isMatch,
+                }, "data-index": index, key: item.id, onClick: this.handleItemSelection, role: "tab", title: item.label }, h("calcite-icon", { icon: isMatch ? ICONS.active : ICONS.inactive, scale: "l" })));
+        })));
+        this.renderArrow = (direction) => {
+            const isPrev = direction === "previous";
+            const dir = getElementDir(this.el);
+            const scale = this.arrowType === "edge" ? "m" : "s";
+            const css = isPrev ? CSS.pagePrevious : CSS.pageNext;
+            const title = isPrev ? this.messages.previous : this.messages.next;
+            const icon = isPrev ? ICONS.chevronLeft : ICONS.chevronRight;
+            return (h("button", { "aria-controls": this.containerId, class: { [CSS.paginationItem]: true, [css]: true }, "data-direction": direction, onClick: this.handleArrowClick, title: title }, h("calcite-icon", { flipRtl: dir === "rtl", icon: icon, scale: scale })));
+        };
+        this.autoplay = false;
+        this.arrowType = "inline";
+        this.autoplayDuration = DURATION;
+        this.controlOverlay = false;
+        this.disabled = false;
+        this.label = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.paused = undefined;
+        this.selectedItem = undefined;
+        this.selectedIndex = undefined;
+        this.items = [];
+        this.direction = undefined;
+        this.defaultMessages = undefined;
+        this.playing = false;
+        this.suspendedDueToFocus = false;
+        this.suspendedDueToHover = false;
+        this.userPreventsSuspend = false;
+        this.effectiveLocale = "";
+        this.suspendedSlideDurationRemaining = 1;
+        this.slideDurationRemaining = 1;
+    }
+    autoplayWatcher(autoplay) {
+        if (!autoplay) {
+            this.handlePause(false);
+        }
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        connectInteractive(this);
+        connectLocalized(this);
+        connectMessages(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        this.clearIntervals();
+    }
+    async componentWillLoad() {
+        /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */
+        if ((this.autoplay === "" || this.autoplay) && this.autoplay !== "paused") {
+            this.handlePlay(false);
+        }
+        else if (this.autoplay === "paused") {
+            this.paused = true;
+        }
+        setUpLoadableComponent(this);
+        await setUpMessages(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        this.container?.focus();
+    }
+    /** Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
+    async play() {
+        /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */
+        if (this.playing || (this.autoplay !== "" && !this.autoplay && this.autoplay !== "paused")) {
+            return;
+        }
+        this.handlePlay(true);
+    }
+    /** Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
+    async stop() {
+        if (!this.playing) {
+            return;
+        }
+        this.handlePause(true);
+    }
+    playingWatcher() {
+        this.paused = !this.playing;
+    }
+    suspendWatcher() {
+        if (!this.suspendedDueToFocus && !this.suspendedDueToHover) {
+            this.suspendEnd();
+        }
+        else {
+            this.suspendStart();
+        }
+    }
+    async effectiveLocaleChange() {
+        await updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    clearIntervals() {
+        clearInterval(this.slideDurationInterval);
+        clearInterval(this.slideInterval);
+    }
+    nextItem(emit) {
+        if (this.playing && emit) {
+            this.playing = false;
+        }
+        const nextIndex = getRoundRobinIndex(this.selectedIndex + 1, this.items.length);
+        this.setSelectedItem(nextIndex, emit);
+    }
+    previousItem() {
+        this.playing = false;
+        const prevIndex = getRoundRobinIndex(Math.max(this.selectedIndex - 1, -1), this.items.length);
+        this.setSelectedItem(prevIndex, true);
+    }
+    handlePlay(emit) {
+        this.playing = true;
+        this.autoplayHandler();
+        this.slideInterval = setInterval(this.autoplayHandler, this.autoplayDuration);
+        if (emit) {
+            this.calciteCarouselPlay.emit();
+        }
+    }
+    handlePause(emit) {
+        this.playing = false;
+        this.clearIntervals();
+        this.slideDurationRemaining = 1;
+        this.suspendedSlideDurationRemaining = 1;
+        if (emit) {
+            this.calciteCarouselStop.emit();
+        }
+    }
+    suspendStart() {
+        this.suspendedSlideDurationRemaining = this.slideDurationRemaining;
+    }
+    suspendEnd() {
+        this.slideDurationRemaining = this.suspendedSlideDurationRemaining;
+    }
+    render() {
+        const { direction } = this;
+        return (h(Host, { key: '692bc42380aad4126c4d14f825c8209b32edb20e' }, h(InteractiveContainer, { key: '96affe45d0c2e7594158389751b7e628039476f8', disabled: this.disabled }, h("div", { key: '1b2caef5c5ea571c342423118074198f986ecb62', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
+                [CSS.container]: true,
+                [CSS.containerOverlaid]: this.controlOverlay,
+                [CSS.containerEdged]: this.arrowType === "edge",
+            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, role: "group", tabIndex: 0,
+            // eslint-disable-next-line react/jsx-sort-props
+            ref: this.storeContainerRef }, h("section", { key: 'a5eb3108e7a3dc72038b0907e21d698dc1674280', class: {
+                [CSS.itemContainer]: true,
+                [CSS.itemContainerForward]: direction === "forward",
+                [CSS.itemContainerBackward]: direction === "backward",
+            }, id: this.containerId }, h("slot", { key: '95f76e6b958c3559095aa4e5135168619f2bc0e5', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
+    }
+    static get is() { return "calcite-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "autoplay": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutoplayType",
+                    "resolved": "\"\" | \"paused\" | boolean",
+                    "references": {
+                        "AutoplayType": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/carousel/interfaces.ts::AutoplayType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, the carousel will autoplay and controls will be displayed. When \"paused\" at time of initialization, the carousel will not autoplay, but controls will be displayed."
+                },
+                "attribute": "autoplay",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "arrowType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ArrowType",
+                    "resolved": "\"edge\" | \"inline\" | \"none\"",
+                    "references": {
+                        "ArrowType": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/carousel/interfaces.ts::ArrowType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies how and if the \"previous\" and \"next\" arrows are displayed."
+                },
+                "attribute": "arrow-type",
+                "reflect": true,
+                "defaultValue": "\"inline\""
+            },
+            "autoplayDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item."
+                },
+                "attribute": "autoplay-duration",
+                "reflect": true,
+                "defaultValue": "DURATION"
+            },
+            "controlOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items."
+                },
+                "attribute": "control-overlay",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the component."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "messages": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "CarouselMessages",
+                    "resolved": "{ previous: string; next: string; play: string; pause: string; carousel: string; carouselItemProgress: string; }",
+                    "references": {
+                        "CarouselMessages": {
+                            "location": "import",
+                            "path": "./assets/carousel/t9n",
+                            "id": "src/components/carousel/assets/carousel/t9n/index.d.ts::CarouselMessages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Made into a prop for testing purposes only"
+                }
+            },
+            "messageOverrides": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Partial<CarouselMessages>",
+                    "resolved": "{ previous?: string; next?: string; play?: string; pause?: string; carousel?: string; carouselItemProgress?: string; }",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "CarouselMessages": {
+                            "location": "import",
+                            "path": "./assets/carousel/t9n",
+                            "id": "src/components/carousel/assets/carousel/t9n/index.d.ts::CarouselMessages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to override individual strings used by the component."
+                }
+            },
+            "paused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Made into a prop for testing purposes only"
+                },
+                "attribute": "paused",
+                "reflect": false
+            },
+            "selectedItem": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "HTMLCalciteCarouselItemElement",
+                    "resolved": "HTMLCalciteCarouselItemElement",
+                    "references": {
+                        "HTMLCalciteCarouselItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLCalciteCarouselItemElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "readonly",
+                            "text": undefined
+                        }],
+                    "text": "The component's selected `calcite-carousel-item`."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedIndex": {},
+            "items": {},
+            "direction": {},
+            "defaultMessages": {},
+            "playing": {},
+            "suspendedDueToFocus": {},
+            "suspendedDueToHover": {},
+            "userPreventsSuspend": {},
+            "effectiveLocale": {},
+            "suspendedSlideDurationRemaining": {},
+            "slideDurationRemaining": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "calciteCarouselChange",
+                "name": "calciteCarouselChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the selected `calcite-carousel-item` changes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "calciteCarouselPlay",
+                "name": "calciteCarouselPlay",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the carousel autoplay is invoked by the user."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "calciteCarouselStop",
+                "name": "calciteCarouselStop",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the carousel autoplay state is stopped by a user."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "calciteCarouselPause",
+                "name": "calciteCarouselPause",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "calciteCarouselResume",
+                "name": "calciteCarouselResume",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the component.",
+                    "tags": []
+                }
+            },
+            "play": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect.",
+                    "tags": []
+                }
+            },
+            "stop": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "autoplay",
+                "methodName": "autoplayWatcher"
+            }, {
+                "propName": "messageOverrides",
+                "methodName": "onMessagesChange"
+            }, {
+                "propName": "playing",
+                "methodName": "playingWatcher"
+            }, {
+                "propName": "suspendedDueToFocus",
+                "methodName": "suspendWatcher"
+            }, {
+                "propName": "suspendedDueToHover",
+                "methodName": "suspendWatcher"
+            }, {
+                "propName": "effectiveLocale",
+                "methodName": "effectiveLocaleChange"
+            }];
+    }
+}
+//# sourceMappingURL=carousel.js.map