@cbpds/web-components/dist/esm/cbp-carousel.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import { r as registerInstance, h, a as Host, g as getElement } from './index-31e2d0a8.js';
import { s as setCSSProps, d as debounce } from './utils-475ba472.js';

const cbpCarouselCss = ":root{--cbp-carousel-height:100%;--cbp-carousel-width:100%;--cbp-carousel-offset:0;--cbp-carousel-offset-start:0;--cbp-carousel-viewer-padding-bottom:var(--cbp-space-3x)}cbp-carousel{display:block}cbp-carousel .cbp-carousel-viewer{height:var(--cbp-carousel-height);width:var(--cbp-carousel-width);overflow:hidden;padding-bottom:var(--cbp-carousel-viewer-padding-bottom)}cbp-carousel .cbp-carousel-viewer .cbp-carousel-container{height:100%;display:flex;transform:translateX(var(--cbp-carousel-offset));transition:all 0.5s ease-out}";
const CbpCarouselStyle0 = cbpCarouselCss;

const CbpCarousel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.items = [];
        this.height = '100%';
        this.width = '100%';
        this.current = 0;
        this.sx = {};
        this.context = undefined;
    }
    watchCurrent() {
        if (this.control)
            this.control.current = this.current;
        this.scrollToItem();
    }
    navigateCollection(e) {
        this.updateCurrent(e.detail.index);
    }
    handleResize() {
        this.scrollToItem();
    }
    scrollToItem() {
        let carouselOffset = 0;
        for (let x = 0; x < this.current; x++) {
            carouselOffset -= this.items[x].offsetWidth;
        }
        setCSSProps(this.host, {
            "--cbp-carousel-offset": `${carouselOffset}px`,
        });
    }
    updateCurrent(index) {
        let max = this.items.length - 1;
        if (index < 0) {
            this.current = 0;
        }
        else if (index > max) {
            this.current = max;
        }
        else
            this.current = index;
        this.scrollToItem();
    }
    componentWillLoad() {
        if (typeof this.sx == 'string') {
            this.sx = JSON.parse(this.sx) || {};
        }
        setCSSProps(this.host, Object.assign({ "--cbp-carousel-height": `${this.height}`, "--cbp-carousel-width": `${this.width}` }, this.sx));
        this.control = this.host.querySelector('[slot="cbp-carousel-controls"]');
        this.items = Array.from(this.host.querySelectorAll('cbp-carousel-item'));
    }
    render() {
        return (h(Host, { key: '1f8508419e7e90700a1de2ab935221ac3f6047e4', role: "region", "aria-roledescription": "carousel" }, h("cbp-resize-observer", { key: 'a5c8deeb8b0cf6557d42957bad64980357cb97d5', onResized: debounce(() => {
                this.handleResize();
            }, 10) }, h("div", { key: '5167a3076f8d0a66375bf555659590fc2f8740ce', class: "cbp-carousel-viewer", role: "group", "aria-description": "slides" }, h("div", { key: 'c07ae019f72ee7ba5a38825ac8ee3053f5a718c3', class: "cbp-carousel-container" }, h("slot", { key: '44cd1ed22ac20ac1fb4b8ae3516da9e40c9ff8f9' })))), h("slot", { key: '784c460711991c4b6b893a3533e8b43482c17ffd', name: "cbp-carousel-controls" })));
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "current": ["watchCurrent"]
    }; }
};
CbpCarousel.style = CbpCarouselStyle0;

export { CbpCarousel as cbp_carousel };

//# sourceMappingURL=cbp-carousel.entry.js.map