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