UNPKG

@cbpds/web-components

Version:
5 lines 2.4 kB
/*! * CPB Design System web components - built with Stencil */ import{r as e,h as s,a as t,g as c}from"./p-436f46fe.js";import{s as a,d as r}from"./p-93ade441.js";const i=":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 o=i;const l=class{constructor(s){e(this,s);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 e=0;for(let s=0;s<this.current;s++){e-=this.items[s].offsetWidth}a(this.host,{"--cbp-carousel-offset":`${e}px`})}updateCurrent(e){let s=this.items.length-1;if(e<0){this.current=0}else if(e>s){this.current=s}else this.current=e;this.scrollToItem()}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}a(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 s(t,{key:"1f8508419e7e90700a1de2ab935221ac3f6047e4",role:"region","aria-roledescription":"carousel"},s("cbp-resize-observer",{key:"a5c8deeb8b0cf6557d42957bad64980357cb97d5",onResized:r((()=>{this.handleResize()}),10)},s("div",{key:"5167a3076f8d0a66375bf555659590fc2f8740ce",class:"cbp-carousel-viewer",role:"group","aria-description":"slides"},s("div",{key:"c07ae019f72ee7ba5a38825ac8ee3053f5a718c3",class:"cbp-carousel-container"},s("slot",{key:"44cd1ed22ac20ac1fb4b8ae3516da9e40c9ff8f9"})))),s("slot",{key:"784c460711991c4b6b893a3533e8b43482c17ffd",name:"cbp-carousel-controls"}))}get host(){return c(this)}static get watchers(){return{current:["watchCurrent"]}}};l.style=o;export{l as cbp_carousel}; //# sourceMappingURL=p-1df777eb.entry.js.map