@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.34 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as o,c as t,h as c,a as r,g as i}from"./p-654179c2.js";const e=":root{--cbp-dot-indicator-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-dot-indicator-color-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-dot-indicator-color-focus:var(--cbp-color-interactive-focus-dark);--cbp-dot-indicator-color-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-dot-indicator-color-selected:var(--cbp-color-interactive-secondary-darker);--cbp-dot-indicator-color-selected-dark:var(--cbp-color-interactive-selected-light)}[data-cbp-theme=light] cbp-dot-indicator[context*=dark],[data-cbp-theme=dark] cbp-dot-indicator:not([context=dark-inverts]):not([context=light-always]){--cbp-dot-indicator-color-hover:var(--cbp-dot-indicator-color-hover-dark);--cbp-dot-indicator-color-focus:var(--cbp-dot-indicator-color-focus-dark);--cbp-dot-indicator-color-selected:var(--cbp-dot-indicator-color-selected-dark)}cbp-dot-indicator{display:flex;justify-content:center}cbp-dot-indicator .dot-indicators-container{display:inline-flex}cbp-dot-indicator .dot-indicators-container button{height:var(--cbp-space-9x);width:var(--cbp-space-9x);border:0;background-color:transparent;padding:none;display:inline-flex;align-items:center;justify-content:center}cbp-dot-indicator .dot-indicators-container button span{height:var(--cbp-space-4x);width:var(--cbp-space-4x);border:var(--cbp-border-size-md) solid var(--cbp-color-interactive-secondary-darker);border-radius:var(--cbp-border-radius-circle)}cbp-dot-indicator .dot-indicators-container button:hover span{background-color:var(--cbp-dot-indicator-color-hover);border-color:var(--cbp-dot-indicator-color-hover)}cbp-dot-indicator .dot-indicators-container button:focus span{background-color:var(--cbp-dot-indicator-color-focus);border-color:var(--cbp-dot-indicator-color-focus);outline:var(--cbp-space-half-x) solid var(--cbp-dot-indicator-color-focus);outline-offset:var(--cbp-space-half-x)}cbp-dot-indicator .dot-indicators-container button[aria-selected=true] span{background-color:var(--cbp-dot-indicator-color-selected);border-color:var(--cbp-dot-indicator-color-selected)}cbp-dot-indicator .dot-indicators-container:focus-visible,cbp-dot-indicator .dot-indicators-container button:focus-visible{border:none;outline:none}";const a=e;const d=class{constructor(c){o(this,c);this.navigateCollection=t(this,"navigateCollection",7);this.selectedIndex=0;this.focusIndex=0;this.current=0;this.itemName="Item";this.items=undefined}setIndexActive(o){if(o>=this.items){o=0}else if(o<0){o=this.items-1}this.selectedIndex=this.focusIndex=o;this.current=o;this.navigateCollection.emit({host:this.host,index:this.current})}generateIndicator(){let o=[];for(let t=0;t<this.items;t++){let r=c("button",{role:"tab","aria-label":`${this.itemName} ${t+1}`,"aria-selected":t==this.current?"true":"false",tabindex:t==this.current?"0":"-1",onClick:()=>this.setIndexActive(t)},c("span",null));o=[...o,r]}return o}keyboardNav(o){const t=this.items-1;const c={Home:0,ArrowLeft:-1<this.focusIndex+-1?this.focusIndex+-1:t,ArrowRight:t+1>this.focusIndex+1?this.focusIndex+1:0,End:t,Tab:this.focusIndex=this.selectedIndex}[o];if(c!==undefined&&o!=="Tab"){this.focusIndex=c;let o=this.host.querySelectorAll(`.dot-indicators-container button`)[this.focusIndex];o.focus()}}render(){return c(r,{key:"36f2b5f319f7eb07386042e69f906085955a3941"},c("cbp-button",{key:"a64f5926f43ad66d10a3e21f1d4ca59e85e06573",fill:"ghost",color:"secondary",variant:"square",accessibilityText:"previous "+this.itemName,onClick:()=>{this.setIndexActive(this.selectedIndex-1)}},c("cbp-icon",{key:"b99c262889bf6fc521fcb3cdddcfa7f5946df818",name:"angle-down",rotate:90})),c("div",{key:"65783cfe74d601b999710fce834da045282b3ce6",class:"dot-indicators-container",role:"tablist",onKeyDown:({key:o})=>{this.keyboardNav(o)}},this.generateIndicator()),c("cbp-button",{key:"55a5b0b0c111a4b85d4fa37d20b8bf22448a4f4b",fill:"ghost",color:"secondary",variant:"square",accessibilityText:"next "+this.itemName,onClick:()=>{this.setIndexActive(this.selectedIndex+1)}},c("cbp-icon",{key:"3e662713a13e742541f43245089b9c49b3610720",name:"angle-down",rotate:270})))}get host(){return i(this)}};d.style=a;export{d as cbp_dot_indicator};
//# sourceMappingURL=p-20b1e47b.entry.js.map