@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-6c11fa0c.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: 'ea8f60e825193cc3657b2ff7907e21324d05bd3f', role: "region", "aria-roledescription": "carousel" }, h("cbp-resize-observer", { key: 'ba2d8fc37bdb5b89a1c7d1b57e56c95622d79620', onResized: debounce(() => {
                this.handleResize();
            }, 10) }, h("div", { key: '1ac8ec4964776bd4ce4a04c867d56041efe757dc', class: "cbp-carousel-viewer", role: "group", "aria-description": "slides" }, h("div", { key: '17fc6eb5c5f3c3af9021db1c8b22ec3c977027c4', class: "cbp-carousel-container" }, h("slot", { key: '029d1d2c7387cc26b0e174de129c792b2f5ecffe' })))), h("slot", { key: '6c7c6a5aec151920617d79ee045d70597b4c9440', 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