@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.91 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as t,H as o,d as c,h as i,c as r}from"./p-9caf8482.js";import{d as e}from"./p-c79ac5f9.js";import{d as a}from"./p-4cdb3206.js";const n=":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 d=n;const s=t(class t extends o{constructor(){super();this.__registerHost();this.navigateCollection=c(this,"navigateCollection",7);this.selectedIndex=0;this.focusIndex=0;this.current=0;this.itemName="Item";this.items=undefined}setIndexActive(t){if(t>=this.items){t=0}else if(t<0){t=this.items-1}this.selectedIndex=this.focusIndex=t;this.current=t;this.navigateCollection.emit({host:this.host,index:this.current})}generateIndicator(){let t=[];for(let o=0;o<this.items;o++){let c=i("button",{role:"tab","aria-label":`${this.itemName} ${o+1}`,"aria-selected":o==this.current?"true":"false",tabindex:o==this.current?"0":"-1",onClick:()=>this.setIndexActive(o)},i("span",null));t=[...t,c]}return t}keyboardNav(t){const o=this.items-1;const c={Home:0,ArrowLeft:-1<this.focusIndex+-1?this.focusIndex+-1:o,ArrowRight:o+1>this.focusIndex+1?this.focusIndex+1:0,End:o,Tab:this.focusIndex=this.selectedIndex}[t];if(c!==undefined&&t!=="Tab"){this.focusIndex=c;let t=this.host.querySelectorAll(`.dot-indicators-container button`)[this.focusIndex];t.focus()}}render(){return i(r,{key:"36f2b5f319f7eb07386042e69f906085955a3941"},i("cbp-button",{key:"a64f5926f43ad66d10a3e21f1d4ca59e85e06573",fill:"ghost",color:"secondary",variant:"square",accessibilityText:"previous "+this.itemName,onClick:()=>{this.setIndexActive(this.selectedIndex-1)}},i("cbp-icon",{key:"b99c262889bf6fc521fcb3cdddcfa7f5946df818",name:"angle-down",rotate:90})),i("div",{key:"65783cfe74d601b999710fce834da045282b3ce6",class:"dot-indicators-container",role:"tablist",onKeyDown:({key:t})=>{this.keyboardNav(t)}},this.generateIndicator()),i("cbp-button",{key:"55a5b0b0c111a4b85d4fa37d20b8bf22448a4f4b",fill:"ghost",color:"secondary",variant:"square",accessibilityText:"next "+this.itemName,onClick:()=>{this.setIndexActive(this.selectedIndex+1)}},i("cbp-icon",{key:"3e662713a13e742541f43245089b9c49b3610720",name:"angle-down",rotate:270})))}get host(){return this}static get style(){return d}},[0,"cbp-dot-indicator",{current:[2],itemName:[1,"item-name"],items:[2]}]);function b(){if(typeof customElements==="undefined"){return}const t=["cbp-dot-indicator","cbp-button","cbp-icon"];t.forEach((t=>{switch(t){case"cbp-dot-indicator":if(!customElements.get(t)){customElements.define(t,s)}break;case"cbp-button":if(!customElements.get(t)){e()}break;case"cbp-icon":if(!customElements.get(t)){a()}break}}))}const l=s;const p=b;export{l as CbpDotIndicator,p as defineCustomElement};
//# sourceMappingURL=cbp-dot-indicator.js.map