@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 2.95 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as e,H as t,h as s,c}from"./p-e7f1ba21.js";import{s as r,d as o}from"./p-9c1b2f31.js";import{d as i}from"./p-f3d971da.js";const a=":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 l=a;const n=e(class e extends t{constructor(){super();this.__registerHost();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 t=0;t<this.current;t++){e-=this.items[t].offsetWidth}r(this.host,{"--cbp-carousel-offset":`${e}px`})}updateCurrent(e){let t=this.items.length-1;if(e<0){this.current=0}else if(e>t){this.current=t}else this.current=e;this.scrollToItem()}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}r(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(c,{key:"1f8508419e7e90700a1de2ab935221ac3f6047e4",role:"region","aria-roledescription":"carousel"},s("cbp-resize-observer",{key:"a5c8deeb8b0cf6557d42957bad64980357cb97d5",onResized:o((()=>{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 this}static get watchers(){return{current:["watchCurrent"]}}static get style(){return l}},[4,"cbp-carousel",{height:[1],width:[1],current:[1026],sx:[8],context:[513]},[[0,"navigateCollection","navigateCollection"]],{current:["watchCurrent"]}]);function h(){if(typeof customElements==="undefined"){return}const e=["cbp-carousel","cbp-resize-observer"];e.forEach((e=>{switch(e){case"cbp-carousel":if(!customElements.get(e)){customElements.define(e,n)}break;case"cbp-resize-observer":if(!customElements.get(e)){i()}break}}))}const b=n;const p=h;export{b as CbpCarousel,p as defineCustomElement};
//# sourceMappingURL=cbp-carousel.js.map