@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

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

@@ -0,0 +1,692 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, stopEventBubbling, byTagName, directChildren, OneOf, Type, raf } from "../../../../utils/index";
+import { ListenToConfig, defaultConfig, } from "../../../../global/index";
+import { CAROUSEL_CONTROLS, CAROUSEL_VARIANTS, } from "../carousel.interfaces";
+import { i18nDsCarousel } from "./carousel.i18n";
+/**
+ * Carousel coordinates ds-carousel-item children into a scrollable, accessible slide interface. Supports an image slider and a product tile strip.
+ *
+ * @slot - ds-carousel-item children.
+ * @part track - The scrollable item track.
+ */
+export class Carousel {
+    constructor() {
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.activeIndex = 0;
+        this.itemCount = 0;
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.dragging = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * Control style. `dots` shows dot pagination with prev/next arrows (image variant). `large` shows large side arrows (product variant). `none` hides all controls.
+         */
+        this.controls = 'dots';
+        /**
+         * Visual variant. `slide` uses scroll-snap and shows one slide at a time. `tile` shows multiple items with free scrolling.
+         */
+        this.variant = 'slide';
+        /**
+         * Number of items visible at once. `auto` sizes items by content. A number divides the container width equally.
+         */
+        this.itemsPerView = 'auto';
+        /**
+         * Accessible label for the carousel region.
+         */
+        this.label = '';
+        /**
+         * Number of items to advance per arrow click.
+         */
+        this.steps = 1;
+        this.intersectionInitialized = false;
+        this.momentumAnimId = 0;
+        this.dragStartX = 0;
+        this.dragStartScrollLeft = 0;
+        this.velocityHistory = [];
+        // True while a programmatic scroll (from scrollToActive) is in flight. While the browser
+        // animates toward the target, it visually passes through intermediate slides, which would
+        // otherwise cross the IntersectionObserver's 50% threshold and briefly reassign `value` to
+        // whichever slide is mid-transit — causing the active dot to jump backward before catching up.
+        this.isProgrammaticScroll = false;
+        this.programmaticScrollTimeout = 0;
+        this.snapRestoreTimeout = 0;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleKeyDown = (ev) => {
+            var _a, _b, _c, _d;
+            const items = this.getItems();
+            const currentIndex = items.findIndex(i => i.name === this.value);
+            const isForward = ev.key === 'ArrowRight';
+            const isBackward = ev.key === 'ArrowLeft';
+            if (ev.key === 'Home') {
+                ev.preventDefault();
+                this.activateItem((_a = items[0]) === null || _a === void 0 ? void 0 : _a.name);
+            }
+            else if (ev.key === 'End') {
+                ev.preventDefault();
+                this.activateItem((_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.name);
+            }
+            else if (isForward) {
+                ev.preventDefault();
+                this.activateItem((_c = items[(currentIndex + 1) % items.length]) === null || _c === void 0 ? void 0 : _c.name);
+            }
+            else if (isBackward) {
+                ev.preventDefault();
+                this.activateItem((_d = items[(currentIndex - 1 + items.length) % items.length]) === null || _d === void 0 ? void 0 : _d.name);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.setup();
+            this.initIntersection();
+        };
+        this.scrollPrev = () => {
+            const el = this.trackEl;
+            if (!el)
+                return;
+            if (this.variant === 'slide') {
+                el.scrollBy({ left: -(el.clientWidth * this.steps), behavior: 'smooth' });
+                return;
+            }
+            const items = this.getItems();
+            const firstVisible = this.getFirstVisibleIndex(items, el);
+            const target = items[Math.max(firstVisible - this.steps, 0)];
+            if (!target)
+                return;
+            const fadeWidth = this.getFadeWidthPx();
+            const dx = target.getBoundingClientRect().left - el.getBoundingClientRect().left - fadeWidth;
+            el.scrollBy({ left: dx, behavior: 'smooth' });
+        };
+        this.scrollNext = () => {
+            const el = this.trackEl;
+            if (!el)
+                return;
+            if (this.variant === 'slide') {
+                el.scrollBy({ left: el.clientWidth * this.steps, behavior: 'smooth' });
+                return;
+            }
+            const items = this.getItems();
+            const firstVisible = this.getFirstVisibleIndex(items, el);
+            const target = items[Math.min(firstVisible + this.steps, items.length - 1)];
+            if (!target)
+                return;
+            const fadeWidth = this.getFadeWidthPx();
+            const dx = target.getBoundingClientRect().left - el.getBoundingClientRect().left - fadeWidth;
+            el.scrollBy({ left: dx, behavior: 'smooth' });
+        };
+        this.checkOverflow = () => {
+            const el = this.trackEl;
+            if (!el)
+                return;
+            this.canScrollLeft = el.scrollLeft > 0;
+            this.canScrollRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        };
+        this.handlePointerDown = (ev) => {
+            const el = this.trackEl;
+            if (!el)
+                return;
+            cancelAnimationFrame(this.momentumAnimId);
+            this.dragging = true;
+            this.dragStartX = ev.clientX;
+            this.dragStartScrollLeft = el.scrollLeft;
+            this.velocityHistory = [];
+            // Disable CSS smooth-scroll during drag so track follows pointer exactly.
+            // NOTE: setPointerCapture is intentionally deferred to the first pointermove.
+            // Setting it here causes Chromium to retarget click away from interactive
+            // children (carousel-items) when pointerdown and pointerup targets differ.
+            el.style.scrollBehavior = 'auto';
+            if (this.variant === 'slide') {
+                // Suspend mandatory scroll-snap for the full drag + settle sequence. Set as an inline
+                // style (not the .is-dragging CSS class) so it survives regardless of Stencil's render
+                // timing — restoring snap while the post-release settle animation is still in flight
+                // causes the browser to interrupt it mid-transit, leaving the track at a partial offset.
+                clearTimeout(this.snapRestoreTimeout);
+                el.removeEventListener('scrollend', this.restoreSnap);
+                el.style.scrollSnapType = 'none';
+            }
+        };
+        this.restoreSnap = () => {
+            var _a;
+            if (this.trackEl)
+                this.trackEl.style.scrollSnapType = '';
+            clearTimeout(this.snapRestoreTimeout);
+            (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('scrollend', this.restoreSnap);
+        };
+        this.handlePointerMove = (ev) => {
+            if (!this.dragging || !this.trackEl)
+                return;
+            const el = this.trackEl;
+            // Capture the pointer on first actual movement so dragging stays smooth
+            // even when the pointer leaves the track — but only after a real drag starts.
+            if (!el.hasPointerCapture(ev.pointerId)) {
+                el.setPointerCapture(ev.pointerId);
+            }
+            const dx = ev.clientX - this.dragStartX;
+            el.scrollLeft = this.dragStartScrollLeft - dx;
+            this.velocityHistory.push({ x: ev.clientX, t: performance.now() });
+            if (this.velocityHistory.length > 5)
+                this.velocityHistory.shift();
+        };
+        this.handlePointerUp = (ev) => {
+            if (!this.dragging || !this.trackEl)
+                return;
+            const el = this.trackEl;
+            this.dragging = false;
+            el.style.scrollBehavior = '';
+            el.releasePointerCapture(ev.pointerId);
+            const velocity = this.calcVelocity();
+            if (this.variant === 'slide') {
+                const slideWidth = el.clientWidth;
+                const travelDx = this.dragStartScrollLeft - el.scrollLeft;
+                // Keep scroll-snap suspended until the settle animation actually finishes; a fallback
+                // timeout covers browsers/cases where 'scrollend' never fires.
+                clearTimeout(this.snapRestoreTimeout);
+                this.snapRestoreTimeout = window.setTimeout(this.restoreSnap, 800);
+                el.addEventListener('scrollend', this.restoreSnap, { once: true });
+                // Commit next/prev if swipe is fast enough or covers > 25 % of slide width. The target is
+                // computed from dragStartScrollLeft (the aligned position the drag began from), not the
+                // current mid-drag scrollLeft — scrollNext/scrollPrev scroll by a relative clientWidth, which
+                // would overshoot past the neighboring slide since the drag already moved partway there.
+                if (velocity > 0.3 || travelDx < -(slideWidth * 0.25)) {
+                    el.scrollTo({ left: this.dragStartScrollLeft + slideWidth, behavior: 'smooth' });
+                }
+                else if (velocity < -0.3 || travelDx > slideWidth * 0.25) {
+                    el.scrollTo({ left: this.dragStartScrollLeft - slideWidth, behavior: 'smooth' });
+                }
+                else {
+                    el.scrollTo({ left: this.dragStartScrollLeft, behavior: 'smooth' });
+                }
+            }
+            else {
+                this.applyMomentum(velocity);
+            }
+        };
+        this.handlePaginationChange = (ev) => {
+            stopEventBubbling(ev);
+            const items = this.getItems();
+            const item = items[ev.detail - 1];
+            if (item)
+                this.activateItem(item.name);
+        };
+        this.handleScrollEnd = () => {
+            var _a;
+            this.isProgrammaticScroll = false;
+            clearTimeout(this.programmaticScrollTimeout);
+            (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('scrollend', this.handleScrollEnd);
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    componentDidLoad() {
+        this.setup();
+        this.initScroll();
+        this.initIntersection();
+    }
+    componentDidUpdate() {
+        this.updateChildren();
+        if (this.variant === 'tile')
+            this.checkOverflow();
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.trackEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('scroll', this.checkOverflow);
+        (_d = this.trackEl) === null || _d === void 0 ? void 0 : _d.removeEventListener('scrollend', this.handleScrollEnd);
+        (_e = this.trackEl) === null || _e === void 0 ? void 0 : _e.removeEventListener('scrollend', this.restoreSnap);
+        cancelAnimationFrame(this.momentumAnimId);
+        clearTimeout(this.programmaticScrollTimeout);
+        clearTimeout(this.snapRestoreTimeout);
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToDsCarouselItemSelect(ev) {
+        stopEventBubbling(ev);
+        this.activateItem(ev.detail.name);
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    getFirstVisibleIndex(items, trackEl) {
+        const trackLeft = trackEl.getBoundingClientRect().left;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].getBoundingClientRect().left >= trackLeft - 2)
+                return i;
+        }
+        return 0;
+    }
+    getFadeWidthPx() {
+        var _a;
+        const outer = (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!outer)
+            return 0;
+        return parseFloat(getComputedStyle(outer, '::before').width) || 0;
+    }
+    // px/ms — positive means pointer moved left → content scrolled right
+    calcVelocity() {
+        const h = this.velocityHistory;
+        if (h.length < 2)
+            return 0;
+        const dt = h[h.length - 1].t - h[0].t;
+        return dt > 0 ? (h[0].x - h[h.length - 1].x) / dt : 0;
+    }
+    applyMomentum(velocity) {
+        const el = this.trackEl;
+        if (!el)
+            return;
+        // Convert px/ms to per-frame pixels at ~60 fps (16 ms/frame)
+        let v = velocity * 16;
+        const friction = 0.94;
+        const step = () => {
+            if (Math.abs(v) < 0.5)
+                return;
+            el.scrollLeft += v;
+            v *= friction;
+            this.momentumAnimId = raf(step);
+        };
+        this.momentumAnimId = raf(step);
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    getItems() {
+        return directChildren(this.el, byTagName('DS-CAROUSEL-ITEM'));
+    }
+    setup() {
+        const items = this.getItems();
+        this.itemCount = items.length;
+        items.forEach((item, i) => {
+            item.index = i + 1;
+            item.carouselVariant = this.variant;
+            if (this.itemsPerView !== 'auto') {
+                item.style.setProperty('--carousel-item-width', `calc(100% / ${this.itemsPerView})`);
+            }
+        });
+        if (!this.value && items.length) {
+            this.value = items[0].name;
+        }
+        this.updateChildren();
+    }
+    updateChildren() {
+        const items = this.getItems();
+        items.forEach(item => {
+            item.carouselVariant = this.variant;
+            item.selected = item.name === this.value;
+        });
+        this.activeIndex = items.findIndex(i => i.name === this.value);
+    }
+    activateItem(name) {
+        if (!name || name === this.value)
+            return;
+        const items = this.getItems();
+        this.value = name;
+        // Update activeIndex synchronously alongside value so a re-render never observes
+        // a stale activeIndex — ds-pagination is fed `value={activeIndex + 1}` and a lagging
+        // activeIndex would briefly reset its disabled state, letting rapid clicks overshoot.
+        this.activeIndex = items.findIndex(i => i.name === name);
+        this.dsChange.emit({ value: name });
+        this.scrollToActive();
+    }
+    scrollToActive() {
+        const items = this.getItems();
+        const active = items.find(i => i.name === this.value);
+        if (!active)
+            return;
+        if (this.variant === 'slide' && this.trackEl) {
+            this.isProgrammaticScroll = true;
+            clearTimeout(this.programmaticScrollTimeout);
+            // Fallback in case 'scrollend' doesn't fire (e.g. scroll is a no-op, or unsupported browser).
+            this.programmaticScrollTimeout = window.setTimeout(this.handleScrollEnd, 800);
+            this.trackEl.addEventListener('scrollend', this.handleScrollEnd, { once: true });
+        }
+        active.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+    }
+    initScroll() {
+        const el = this.trackEl;
+        if (!el || this.variant !== 'tile')
+            return;
+        el.addEventListener('scroll', this.checkOverflow, { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkOverflow);
+        this.resizeObserver.observe(el);
+        this.checkOverflow();
+    }
+    initIntersection() {
+        var _a;
+        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.intersectionInitialized = false;
+        if (this.variant !== 'slide' || !this.trackEl)
+            return;
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            // Skip the initial fire (triggered by observe()) so a preset value prop
+            // is not overridden by whichever slide happens to be at scroll position 0.
+            if (!this.intersectionInitialized) {
+                this.intersectionInitialized = true;
+                return;
+            }
+            // A programmatic scroll (triggered by pagination/keyboard nav) passes visually through
+            // intermediate slides on its way to the target; ignore those transient crossings.
+            if (this.isProgrammaticScroll)
+                return;
+            const visible = entries.find(e => e.isIntersecting && e.intersectionRatio >= 0.5);
+            if (!visible)
+                return;
+            const items = this.getItems();
+            const idx = items.findIndex(i => i === visible.target);
+            if (idx !== -1) {
+                this.activeIndex = idx;
+                this.value = items[idx].name;
+            }
+        }, { root: this.trackEl, threshold: 0.5 });
+        this.getItems().forEach(item => this.intersectionObserver.observe(item));
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        const i18n = i18nDsCarousel[this.language];
+        const isSlide = this.variant === 'slide';
+        const showPagination = this.controls === 'dots';
+        const showLargeArrows = this.controls === 'large';
+        const prevBtn = (h("button", { key: 'd1d21c49f24301c539ba2046989d5ae879b8e8a0', class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, tabIndex: -1, onClick: this.scrollPrev }, h("ds-icon", { key: '08a912c49af5033505ebbd4295c10a3f4cd8e33a', name: "caret-left", size: "sm" })));
+        const nextBtn = (h("button", { key: '6798cdf3403218a6342106d521f17907fff9cf51', class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, tabIndex: -1, onClick: this.scrollNext }, h("ds-icon", { key: 'f47c79f57c8765d0897ce516be69ded5032efd50', name: "caret-right", size: "sm" })));
+        const track = (h("div", { key: 'd0234175394ffbe3c5c9a587c27d86200c533b4c', class: { 'carousel-track': true, 'is-dragging': this.dragging }, part: "track", role: "region", "aria-label": this.label || i18n.scrollLeft, tabIndex: 0, onKeyDown: this.handleKeyDown, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, ref: el => {
+                this.trackEl = el;
+            } }, h("slot", { key: 'fbefe08fe2fbb0c94e89883266a4e25105a0b91d', onSlotchange: this.handleSlotChange })));
+        const atStart = this.activeIndex === 0;
+        const atEnd = this.activeIndex === this.itemCount - 1;
+        return (h(Host, { key: 'dd21b056857b5ccf06439271ad1c61ad72216469', class: {
+                'is-slide': isSlide,
+                'is-tile': !isSlide,
+                'has-overflow': this.canScrollLeft || this.canScrollRight,
+                'can-scroll-left': this.canScrollLeft,
+                'can-scroll-right': this.canScrollRight,
+            } }, h("div", { key: '43a0ba6d15f8623248e417bf1fd81062a0b6b6cf', class: "carousel-outer" }, showLargeArrows && (isSlide ? !atStart && prevBtn : prevBtn), track, showLargeArrows && (isSlide ? !atEnd && nextBtn : nextBtn)), showPagination && (h("ds-pagination", { key: '1d2e666e89517f07e3d121417043a1f182df77b8', class: "pagination", variant: "dots", totalPages: this.itemCount, value: this.activeIndex + 1, textPrevious: i18n.scrollLeft, textNext: i18n.scrollRight, onDsChange: this.handlePaginationChange }))));
+    }
+    static get is() { return "ds-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "controls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CarouselControls",
+                    "resolved": "\"dots\" | \"large\" | \"none\"",
+                    "references": {
+                        "CarouselControls": {
+                            "location": "import",
+                            "path": "../carousel.interfaces",
+                            "id": "src/components/structure/carousel/carousel.interfaces.ts::CarouselControls",
+                            "referenceLocation": "CarouselControls"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control style. `dots` shows dot pagination with prev/next arrows (image variant). `large` shows large side arrows (product variant). `none` hides all controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "controls",
+                "defaultValue": "'dots'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CarouselVariant",
+                    "resolved": "\"slide\" | \"tile\"",
+                    "references": {
+                        "CarouselVariant": {
+                            "location": "import",
+                            "path": "../carousel.interfaces",
+                            "id": "src/components/structure/carousel/carousel.interfaces.ts::CarouselVariant",
+                            "referenceLocation": "CarouselVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant. `slide` uses scroll-snap and shows one slide at a time. `tile` shows multiple items with free scrolling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'slide'"
+            },
+            "itemsPerView": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | 'auto'",
+                    "resolved": "\"auto\" | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items visible at once. `auto` sizes items by content. A number divides the container width equally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items-per-view",
+                "defaultValue": "'auto'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the carousel region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "steps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items to advance per arrow click."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the currently selected ds-carousel-item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "region": {},
+            "activeIndex": {},
+            "itemCount": {},
+            "canScrollLeft": {},
+            "canScrollRight": {},
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected item changes."
+                },
+                "complexType": {
+                    "original": "CarouselChangeDetail",
+                    "resolved": "{ value: string; }",
+                    "references": {
+                        "CarouselChangeDetail": {
+                            "location": "import",
+                            "path": "../carousel.interfaces",
+                            "id": "src/components/structure/carousel/carousel.interfaces.ts::CarouselChangeDetail",
+                            "referenceLocation": "CarouselChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "dsCarouselItemSelect",
+                "method": "listenToDsCarouselItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    Logger('carousel'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "createLogger", null);
+__decorate([
+    OneOf(CAROUSEL_CONTROLS),
+    __metadata("design:type", String)
+], Carousel.prototype, "controls", void 0);
+__decorate([
+    OneOf(CAROUSEL_VARIANTS),
+    __metadata("design:type", String)
+], Carousel.prototype, "variant", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Carousel.prototype, "label", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Carousel.prototype, "steps", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Carousel.prototype, "value", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Carousel.prototype, "configChanged", null);