@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-9caf8482.js";import{s as r,d as o}from"./p-9c1b2f31.js";import{d as i}from"./p-36a224bc.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:"ea8f60e825193cc3657b2ff7907e21324d05bd3f",role:"region","aria-roledescription":"carousel"},s("cbp-resize-observer",{key:"ba2d8fc37bdb5b89a1c7d1b57e56c95622d79620",onResized:o((()=>{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 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