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

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

@@ -1,692 +0,0 @@
-/*!
- * (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, 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 Array.from(this.el.querySelectorAll(':scope > 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: '5eaf6429d5f2b54f4acf58553add5f1a76f7b0db', class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, tabIndex: -1, onClick: this.scrollPrev }, h("ds-icon", { key: '9f41191379950c8d3ea64171140ec13844767e90', name: "caret-left", size: "sm" })));
-        const nextBtn = (h("button", { key: '2d0b6973cae66152369b4a5e23935aed1d8f72a6', class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, tabIndex: -1, onClick: this.scrollNext }, h("ds-icon", { key: 'c037e24cd31341ed69f547e3094f07f3a92b7b38', name: "caret-right", size: "sm" })));
-        const track = (h("div", { key: '924416faf8f8e46bdaa0512cab235a189b6ce589', 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: 'eb992c6f9f82c62dcbbfbcb8e967d2967fdde84c', onSlotchange: this.handleSlotChange })));
-        const atStart = this.activeIndex === 0;
-        const atEnd = this.activeIndex === this.itemCount - 1;
-        return (h(Host, { key: '63bc8c4032b7b82b1f7253c763e514f75bbe2b69', 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: '24803a8f4027b5a468a60e5997d2e64f8e1fe0ab', class: "carousel-outer" }, showLargeArrows && (isSlide ? !atStart && prevBtn : prevBtn), track, showLargeArrows && (isSlide ? !atEnd && nextBtn : nextBtn)), showPagination && (h("ds-pagination", { key: '7dbd19567181305dc6e1e0db984655d58ec14368', 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/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/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/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);