@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/cjs/ds-carousel.cjs.entry.js

@@ -0,0 +1,473 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var formControl = require('./form-control-CtMcJUuC.js');
+var carousel_interfaces = require('./carousel.interfaces-BFQpUNrw.js');
+var config_decorator = require('./config.decorator-ThGLtT-3.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var type = require('./type-hmc4CJcO.js');
+require('./config.utils-MhZvq4Qm.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+
+const i18nDsCarousel = {
+    de: {
+        scrollLeft: 'Vorheriges Element',
+        scrollRight: 'Nächstes Element',
+        goToSlide: 'Zu Folie',
+        slideOf: 'von',
+    },
+    en: {
+        scrollLeft: 'Previous item',
+        scrollRight: 'Next item',
+        goToSlide: 'Go to slide',
+        slideOf: 'of',
+    },
+    fr: {
+        scrollLeft: 'Élément précédent',
+        scrollRight: 'Élément suivant',
+        goToSlide: 'Aller à la diapositive',
+        slideOf: 'sur',
+    },
+    it: {
+        scrollLeft: 'Elemento precedente',
+        scrollRight: 'Elemento successivo',
+        goToSlide: 'Vai alla diapositiva',
+        slideOf: 'di',
+    },
+    nl: {
+        scrollLeft: 'Vorig item',
+        scrollRight: 'Volgend item',
+        goToSlide: 'Ga naar dia',
+        slideOf: 'van',
+    },
+    es: {
+        scrollLeft: 'Elemento anterior',
+        scrollRight: 'Elemento siguiente',
+        goToSlide: 'Ir a la diapositiva',
+        slideOf: 'de',
+    },
+    pl: {
+        scrollLeft: 'Poprzedni element',
+        scrollRight: 'Następny element',
+        goToSlide: 'Przejdź do slajdu',
+        slideOf: 'z',
+    },
+    pt: {
+        scrollLeft: 'Item anterior',
+        scrollRight: 'Próximo item',
+        goToSlide: 'Ir para o slide',
+        slideOf: 'de',
+    },
+    sv: {
+        scrollLeft: 'Föregående objekt',
+        scrollRight: 'Nästa objekt',
+        goToSlide: 'Gå till bild',
+        slideOf: 'av',
+    },
+    fi: {
+        scrollLeft: 'Edellinen kohde',
+        scrollRight: 'Seuraava kohde',
+        goToSlide: 'Siirry diaan',
+        slideOf: 'kohteesta',
+    },
+};
+
+const carouselHostCss = () => `:host{--_carousel-gap:var(--carousel-gap, var(--mod-carousel-gap, var(--ds-carousel-gap)));--_carousel-control-color:var(--carousel-control-color, var(--mod-carousel-control-color, var(--ds-carousel-control-color)));--_carousel-scroll-fade-bg:var(--carousel-scroll-fade-bg, var(--mod-carousel-scroll-fade-bg, var(--ds-carousel-scroll-fade-bg)));--_carousel-scroll-btn-bg-active:var(--carousel-scroll-btn-bg-active, var(--mod-carousel-scroll-btn-bg-active, var(--ds-carousel-scroll-btn-background-active, var(--ds-alias-background-color-primary))));--_carousel-scroll-btn-bg-active-hover:var(--carousel-scroll-btn-bg-active-hover, var(--mod-carousel-scroll-btn-bg-active-hover, var(--ds-carousel-scroll-btn-background-active-hover, var(--ds-alias-background-color-primary-hover))));--_carousel-scroll-btn-bg-active-pressed:var(--carousel-scroll-btn-bg-active-pressed, var(--mod-carousel-scroll-btn-bg-active-pressed, var(--ds-carousel-scroll-btn-background-active-pressed, var(--ds-alias-background-color-primary-active))));--_carousel-scroll-btn-color-active:var(--carousel-scroll-btn-color-active, var(--mod-carousel-scroll-btn-color-active, var(--ds-carousel-scroll-btn-color-active, var(--ds-alias-text-color-white))));display:block}:host .carousel-track{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;overflow-x:scroll;scrollbar-width:none;cursor:-webkit-grab;cursor:grab;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}:host .carousel-track::-webkit-scrollbar{display:none}:host .carousel-track.is-dragging{cursor:-webkit-grabbing;cursor:grabbing;scroll-behavior:auto}:host .carousel-outer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.is-slide){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem}:host(.is-slide) .carousel-track{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;gap:0}:host(.is-slide) .pagination{-ms-flex-item-align:center;align-self:center}:host(.is-slide) .carousel-outer{position:relative;display:block}:host(.is-slide) .scroll-btn{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:9999px;background-color:var(--_carousel-scroll-btn-bg-active);color:var(--_carousel-scroll-btn-color-active);--mod-icon-color:currentColor;--icon-color:var(--_carousel-scroll-btn-color-active);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;-webkit-transition:background-color 120ms ease;transition:background-color 120ms ease}@media (hover: hover)and (pointer: fine){:host(.is-slide) .scroll-btn:hover{background-color:var(--_carousel-scroll-btn-bg-active-hover)}}:host(.is-slide) .scroll-btn:active{background-color:var(--_carousel-scroll-btn-bg-active-pressed)}:host(.is-slide) .scroll-btn--prev{left:1rem}:host(.is-slide) .scroll-btn--next{right:1rem}:host(.is-tile){display:block}:host(.is-tile) .carousel-outer{position:relative}:host(.is-tile) .carousel-track{-ms-flex:1;flex:1;min-width:0;gap:var(--_carousel-gap);scroll-behavior:smooth}:host(.is-tile.has-overflow) .carousel-outer::before,:host(.is-tile.has-overflow) .carousel-outer::after{content:"";position:absolute;top:0;bottom:0;width:3rem;pointer-events:none;z-index:1;opacity:0;-webkit-transition:opacity 120ms ease;transition:opacity 120ms ease}:host(.is-tile.has-overflow) .carousel-outer::before{left:2.75rem;background:-webkit-gradient(linear, left top, right top, from(var(--_carousel-scroll-fade-bg)), to(transparent));background:linear-gradient(to right, var(--_carousel-scroll-fade-bg), transparent)}:host(.is-tile.has-overflow) .carousel-outer::after{right:2.75rem;background:-webkit-gradient(linear, right top, left top, from(var(--_carousel-scroll-fade-bg)), to(transparent));background:linear-gradient(to left, var(--_carousel-scroll-fade-bg), transparent)}:host(.is-tile.can-scroll-left) .carousel-outer::before{opacity:1}:host(.is-tile.can-scroll-right) .carousel-outer::after{opacity:1}:host(.is-tile) .scroll-btn{-ms-flex-negative:0;flex-shrink:0;width:0;height:2.5rem;min-width:0;max-width:2.5rem;max-height:2.5rem;margin:0;padding:0;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:9999px;background:none;color:var(--_carousel-control-color);--mod-icon-color:currentColor;opacity:0;pointer-events:none;cursor:default;-webkit-transition:width 120ms ease,min-width 120ms ease,margin 120ms ease,opacity 120ms ease,background-color 120ms ease,color 120ms ease;transition:width 120ms ease,min-width 120ms ease,margin 120ms ease,opacity 120ms ease,background-color 120ms ease,color 120ms ease}:host(.is-tile.has-overflow) .scroll-btn{width:2.5rem;min-width:2.5rem;opacity:.35}:host(.is-tile.has-overflow) .scroll-btn--prev{margin-right:.25rem}:host(.is-tile.has-overflow) .scroll-btn--next{margin-left:.25rem}:host(.is-tile.can-scroll-left) .scroll-btn--prev,:host(.is-tile.can-scroll-right) .scroll-btn--next{opacity:1;pointer-events:auto;cursor:pointer;background-color:var(--_carousel-scroll-btn-bg-active);color:var(--_carousel-scroll-btn-color-active);--icon-color:var(--_carousel-scroll-btn-color-active)}@media (hover: hover)and (pointer: fine){:host(.is-tile.can-scroll-left) .scroll-btn--prev:hover,:host(.is-tile.can-scroll-right) .scroll-btn--next:hover{background-color:var(--_carousel-scroll-btn-bg-active-hover)}}:host(.is-tile.can-scroll-left) .scroll-btn--prev:active,:host(.is-tile.can-scroll-right) .scroll-btn--next:active{background-color:var(--_carousel-scroll-btn-bg-active-pressed)}`;
+
+const Carousel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsChange = index.createEvent(this, "dsChange");
+        this.language = index.defaultConfig.language;
+        this.region = index.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 = [];
+        /**
+         * 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';
+        };
+        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;
+                // Commit next/prev if swipe is fast enough or covers > 25 % of slide width
+                if (velocity > 0.3 || travelDx < -(slideWidth * 0.25)) {
+                    this.scrollNext();
+                }
+                else if (velocity < -0.3 || travelDx > slideWidth * 0.25) {
+                    this.scrollPrev();
+                }
+                else {
+                    el.scrollTo({ left: this.dragStartScrollLeft, behavior: 'smooth' });
+                }
+            }
+            else {
+                this.applyMomentum(velocity);
+            }
+        };
+        this.handlePaginationChange = (ev) => {
+            formControl.stopEventBubbling(ev);
+            const items = this.getItems();
+            const item = items[ev.detail - 1];
+            if (item)
+                this.activateItem(item.name);
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    componentDidLoad() {
+        this.setup();
+        this.initScroll();
+        this.initIntersection();
+    }
+    componentDidUpdate() {
+        this.updateChildren();
+        if (this.variant === 'tile')
+            this.checkOverflow();
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_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);
+        cancelAnimationFrame(this.momentumAnimId);
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsCarouselItemSelect(ev) {
+        formControl.stopEventBubbling(ev);
+        this.activateItem(ev.detail.name);
+    }
+    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 = index.raf(step);
+        };
+        this.momentumAnimId = index.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;
+        this.value = name;
+        this.dsChange.emit({ value: name });
+        this.scrollToActive();
+    }
+    scrollToActive() {
+        const items = this.getItems();
+        const active = items.find(i => i.name === this.value);
+        if (active) {
+            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;
+            }
+            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 = (index.h("button", { key: '1b5bb6d92e8745a2950a7b307e4cdb10b5e67329', class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, tabIndex: -1, onClick: this.scrollPrev }, index.h("ds-icon", { key: '5fd82f4b5ebe7ec09d552727edbfa8a5ae539221', name: "caret-left", size: "sm" })));
+        const nextBtn = (index.h("button", { key: 'c6f4c94aac766ad33c766489044c9a9bd1b5726e', class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, tabIndex: -1, onClick: this.scrollNext }, index.h("ds-icon", { key: '8cfb442e07919ec88a46992e323c61fede8e0bb5', name: "caret-right", size: "sm" })));
+        const track = (index.h("div", { key: '0e7ddcde38d8a83793512bb0f577375753b657ba', 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;
+            } }, index.h("slot", { key: '7559f5c3a986a32703b7c7ac306ccc6c43b419f5', onSlotchange: this.handleSlotChange })));
+        const atStart = this.activeIndex === 0;
+        const atEnd = this.activeIndex === this.itemCount - 1;
+        return (index.h(index.Host, { key: 'c2e560061487baa158ae0ce8db00b331eaa16341', class: {
+                'is-slide': isSlide,
+                'is-tile': !isSlide,
+                'has-overflow': this.canScrollLeft || this.canScrollRight,
+                'can-scroll-left': this.canScrollLeft,
+                'can-scroll-right': this.canScrollRight,
+            } }, index.h("div", { key: '2f6db134dcf6a5fe7cb8859cf52dfad7db063662', class: "carousel-outer" }, showLargeArrows && (isSlide ? !atStart && prevBtn : prevBtn), track, showLargeArrows && (isSlide ? !atEnd && nextBtn : nextBtn)), showPagination && (index.h("ds-pagination", { key: '7020aad4265c4ae2463ca8174d18cfb578fde252', class: "pagination", variant: "dots", totalPages: this.itemCount, value: this.activeIndex + 1, textPrevious: i18n.scrollLeft, textNext: i18n.scrollRight, onDsChange: this.handlePaginationChange }))));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('carousel'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Carousel.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    oneOf.OneOf(carousel_interfaces.CAROUSEL_CONTROLS),
+    tslib_es6.__metadata("design:type", String)
+], Carousel.prototype, "controls", void 0);
+tslib_es6.__decorate([
+    oneOf.OneOf(carousel_interfaces.CAROUSEL_VARIANTS),
+    tslib_es6.__metadata("design:type", String)
+], Carousel.prototype, "variant", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], Carousel.prototype, "label", void 0);
+tslib_es6.__decorate([
+    type.Type('number'),
+    tslib_es6.__metadata("design:type", Number)
+], Carousel.prototype, "steps", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", Object)
+], Carousel.prototype, "value", void 0);
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Carousel.prototype, "configChanged", null);
+Carousel.style = carouselHostCss();
+
+exports.ds_carousel = Carousel;