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-654179c2.js";import{s as r,d as i}from"./p-93ade441.js";const o=":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 a=o;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}r(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)||{}}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(t,{key:"ea8f60e825193cc3657b2ff7907e21324d05bd3f",role:"region","aria-roledescription":"carousel"},s("cbp-resize-observer",{key:"ba2d8fc37bdb5b89a1c7d1b57e56c95622d79620",onResized:i((()=>{this.handleResize()}),10)},s("div",{key:"1ac8ec4964776bd4ce4a04c867d56041efe757dc",class:"cbp-carousel-viewer",role:"group","aria-description":"slides"},s("div",{key:"17fc6eb5c5f3c3af9021db1c8b22ec3c977027c4",class:"cbp-carousel-container"},s("slot",{key:"029d1d2c7387cc26b0e174de129c792b2f5ecffe"})))),s("slot",{key:"6c7c6a5aec151920617d79ee045d70597b4c9440",name:"cbp-carousel-controls"}))}get host(){return c(this)}static get watchers(){return{current:["watchCurrent"]}}};l.style=a;export{l as cbp_carousel}; //# sourceMappingURL=p-848e8fb8.entry.js.map