@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 7.13 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as t,h as r,a as o,g as c}from"./p-654179c2.js";import{s as e}from"./p-93ade441.js";const a=":root{--cbp-tabs-color-border:var(--cbp-color-gray-cool-30);--cbp-tabs-color-border-dark:var(--cbp-color-gray-cool-60);--cbp-tab-color:var(--cbp-color-interactive-secondary-darker);--cbp-tab-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-tab-color-focus:var(--cbp-color-text-lightest);--cbp-tab-color-active:var(--cbp-color-text-lightest);--cbp-tab-color-selected:var(--cbp-color-interactive-active-dark);--cbp-tab-color-bg:transparent;--cbp-tab-color-bg-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-tab-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-tab-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-tab-color-bg-selected:transparent;--cbp-tab-color-border:transparent;--cbp-tab-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-tab-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-tab-color-border-active:var(--cbp-color-interactive-active-dark);--cbp-tab-color-border-selected:var(--cbp-color-interactive-active-dark);--cbp-tab-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-tab-color-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-tab-color-focus-dark:var(--cbp-color-text-darkest);--cbp-tab-color-active-dark:var(--cbp-color-text-darkest);--cbp-tab-color-selected-dark:var(--cbp-color-interactive-active-light);--cbp-tab-color-bg-dark:transparent;--cbp-tab-color-bg-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-tab-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-tab-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-tab-color-bg-selected-dark:transparent;--cbp-tab-color-border-dark:transparent;--cbp-tab-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-tab-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-tab-color-border-active-dark:var(--cbp-color-interactive-active-light);--cbp-tab-color-border-selected-dark:var(--cbp-color-interactive-active-light);--cbp-tab-border-radius:0;--cbp-tab-color-outline-focus:var(--cbp-color-white);--cbp-tab-color-outline-focus-dark:var(--cbp-color-black)}[data-cbp-theme=light] cbp-tabs[context*=dark],[data-cbp-theme=dark] cbp-tabs:not([context=dark-inverts]):not([context=light-always]){--cbp-tabs-color-border:var(--cbp-tabs-color-border-dark)}cbp-tabs{display:flex;max-width:100%;overflow:hidden;background:linear-gradient(to top, var(--cbp-tabs-color-border) var(--cbp-border-size-md), transparent var(--cbp-border-size-md));margin-bottom:var(--cbp-space-4x)}cbp-tabs cbp-button[fill][color]{align-self:flex-start;--cbp-button-color:var(--cbp-tab-color);--cbp-button-color-dark:var(--cbp-tab-color-dark);--cbp-button-color-bg:var(--cbp-color-background-light);--cbp-button-color-bg-dark:var(--cbp-color-background-dark);--cbp-button-color-border:var(--cbp-color-gray-cool-30);--cbp-button-color-border-dark:var(--cbp-color-gray-cool-60);--cbp-button-border-radius:0}cbp-tabs .cbp-tabs-wrapper{display:flex;align-items:flex-end;flex-grow:5;flex-shrink:5;overflow:hidden;scroll-snap-align:start}";const b=a;const i=class{constructor(r){t(this,r);this.tabs=[];this.selectedIndex=0;this.focusIndex=0;this.accessibilityText=undefined;this.context=undefined;this.sx={}}initTabset(){let t=this.tabs[0];this.tabs.forEach((r=>{if(r.selected===true)t=r}));this.setActiveTab(t)}setActiveTab(t){this.tabs.forEach(((r,o)=>{let c=r.querySelector("button");let e=r.name;let a=document.querySelector(`#${e}`);if(!a){console===null||console===void 0?void 0:console.warn(`Warning: cbp-tab does not reference valid tab panel with id ${e}`);return}if(t==r){r.selected=true;this.selectedIndex=this.focusIndex=o;a.selected=true;c===null||c===void 0?void 0:c.scrollIntoView({behavior:"smooth",inline:"start"})}else{r.selected=false;a.selected=false}}))}keyboardNav(t){const r=this.tabs.length-1;const o={Home:0,ArrowLeft:-1<this.focusIndex+-1?this.focusIndex+-1:r,ArrowRight:r+1>this.focusIndex+1?this.focusIndex+1:0,End:r,Tab:this.focusIndex=this.selectedIndex}[t];const c=t=="ArrowLeft"?"end":"start";if(o!==undefined&&t!=="Tab"){this.tabs[o].scrollIntoView({behavior:"smooth",inline:c});setTimeout((()=>{this.tabs[o].querySelector("button").focus()}),20);this.focusIndex=o}}responsiveNav(t){const r=this.tabs.length-1;if(t=="next"){this.focusIndex=r+1>this.focusIndex+1?this.focusIndex+1:0;this.tabs[this.focusIndex].scrollIntoView({behavior:"smooth",inline:"start"});setTimeout((()=>{this.tabs[this.focusIndex].querySelector("button").focus()}),20)}if(t=="previous"){this.focusIndex=-1<this.focusIndex+-1?this.focusIndex+-1:r;this.tabs[this.focusIndex].scrollIntoView({behavior:"smooth",inline:"end"});setTimeout((()=>{this.tabs[this.focusIndex].querySelector("button").focus()}),20)}}componentWillLoad(){this.tabs=Array.from(this.host.querySelectorAll("cbp-tab")).filter((t=>t.closest("cbp-tabs")==this.host));this.tabs.forEach((t=>{t.addEventListener("tabClicked",(t=>this.setActiveTab(t.detail.host)))}));if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}e(this.host,Object.assign({},this.sx))}componentDidLoad(){this.initTabset();this.observer=new ResizeObserver((([{contentRect:{width:t}}])=>{if(t+1>this.wrapper.scrollWidth){this.previousControl.setAttribute("hidden","");this.nextControl.setAttribute("hidden","")}else{this.previousControl.removeAttribute("hidden");this.nextControl.removeAttribute("hidden")}}));this.observedEl=this.host;this.observer.observe(this.observedEl)}disconnectedCallback(){if(this.observer){this.observer.unobserve(this.observedEl)}}render(){return r(o,{key:"d8c30c4f02bf6e1ffe9296bb3359a606f560517d",role:"tablist","aria-label":this.accessibilityText,onKeydown:({key:t})=>{this.keyboardNav(t)}},r("cbp-button",{key:"ad5f3675b044aa2407aab4be6c0a370d5ce73085",color:"secondary",fill:"outline",variant:"square",width:"3.5rem",height:"3.5rem",context:this.context,onClick:()=>this.responsiveNav("previous"),ref:t=>this.previousControl=t},r("button",{key:"6b76aa16588e9eda09379bff1efef0da4d3e9293",type:"button",tabindex:"-1","aria-label":"Previous Tab",slot:"cbp-button-custom"},r("cbp-icon",{key:"99b02b39e5fde5c5a31769fa876287ed100592e3",name:"chevron-right",size:"var(--cbp-space-5x)",rotate:180}))),r("div",{key:"6da16b09dc07586593eab53217563d17ccc5f0fe",class:"cbp-tabs-wrapper",ref:t=>this.wrapper=t},r("slot",{key:"cf87e757b666a58c80633562f25fc85611193d43"})),r("cbp-button",{key:"b38c7a468e354a79c0e65117012354bb86db73ee",color:"secondary",fill:"outline",variant:"square",width:"3.5rem",height:"3.5rem",context:this.context,onClick:()=>this.responsiveNav("next"),ref:t=>this.nextControl=t},r("button",{key:"9661ad148e719f21cab57f2808cd64f7718e1d70",type:"button",tabindex:"-1","aria-label":"Next Tab",slot:"cbp-button-custom"},r("cbp-icon",{key:"c927b98570d5c1d5ae3eb5c8a0aa937ba7574952",name:"chevron-right",size:"var(--cbp-space-5x)"}))))}get host(){return c(this)}};i.style=b;export{i as cbp_tabs};
//# sourceMappingURL=p-765e9fe9.entry.js.map