@cbpds/web-components
Version:
Web components for the CBP Design System.
78 lines (72 loc) • 3.42 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-2207639d.js');
const utils = require('./utils-99c9e716.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) {
index.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;
}
utils.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) || {};
}
utils.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 (index.h(index.Host, { key: '1f8508419e7e90700a1de2ab935221ac3f6047e4', role: "region", "aria-roledescription": "carousel" }, index.h("cbp-resize-observer", { key: 'a5c8deeb8b0cf6557d42957bad64980357cb97d5', onResized: utils.debounce(() => {
this.handleResize();
}, 10) }, index.h("div", { key: '5167a3076f8d0a66375bf555659590fc2f8740ce', class: "cbp-carousel-viewer", role: "group", "aria-description": "slides" }, index.h("div", { key: 'c07ae019f72ee7ba5a38825ac8ee3053f5a718c3', class: "cbp-carousel-container" }, index.h("slot", { key: '44cd1ed22ac20ac1fb4b8ae3516da9e40c9ff8f9' })))), index.h("slot", { key: '784c460711991c4b6b893a3533e8b43482c17ffd', name: "cbp-carousel-controls" })));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"current": ["watchCurrent"]
}; }
};
CbpCarousel.style = CbpCarouselStyle0;
exports.cbp_carousel = CbpCarousel;
//# sourceMappingURL=cbp-carousel.cjs.entry.js.map