@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 8.56 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as t,c,h as o,a as r,g as b}from"./p-654179c2.js";import{c as e,s as a}from"./p-93ade441.js";const i=":root{--cbp-subnav-item-color:var(--cbp-color-interactive-secondary-darker);--cbp-subnav-item-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-subnav-item-color-bg:transparent;--cbp-subnav-item-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-subnav-item-current-color:var(--cbp-color-interactive-active-dark);--cbp-subnav-item-current-color-dark:var(--cbp-color-interactive-active-lighter);--cbp-subnav-item-current-color-bg:var(--cbp-color-interactive-active-light);--cbp-subnav-item-current-color-bg-dark:var(--cbp-color-interactive-active-dark);--cbp-subnav-item-current-border-color:var(--cbp-color-interactive-active-dark);--cbp-subnav-item-current-border-color-dark:var(--cbp-color-interactive-active-light);--cbp-subnav-item-border-color:red;--cbp-subnav-item-hover-border-color:var(--cbp-color-interactive-secondary-darker);--cbp-subnav-item-hover-border-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-subnav-item-indent:var(--cbp-space-4x);--cbp-subnav-item-font-size:var(--cbp-font-size-heading-md)}[data-cbp-theme=light] cbp-subnav[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-subnav:not([context=dark-inverts]):not([context=light-always]){--cbp-subnav-item-color:var(--cbp-subnav-item-color-dark);--cbp-subnav-item-color-bg:var(--cbp-subnav-item-color-bg-dark);--cbp-subnav-item-current-border-color:var(--cbp-subnav-item-current-border-color-dark);--cbp-subnav-item-current-color-bg:var(--cbp-subnav-item-current-color-bg-dark);--cbp-subnav-item-hover-border-color:var(--cbp-subnav-item-hover-border-color-dark)}cbp-subnav-item{color:var(--cbp-subnav-item-color);background-color:var(--cbp-subnav-item-color-bg);--cbp-subnav-item-rotate-icon:rotate(90deg)}cbp-subnav-item section{display:none}cbp-subnav-item[current]>div,cbp-subnav-item:has(cbp-subnav-item[current])>div{--cbp-subnav-item-border-color:var(--cbp-subnav-item-current-border-color)}cbp-subnav-item[current]>div>cbp-button[fill=outline][color=primary]:first-of-type{--cbp-button-color:var(--cbp-subnav-item-current-color);--cbp-button-color-dark:var(--cbp-subnav-item-current-color-dark);--cbp-button-color-bg:var(--cbp-subnav-item-current-color-bg);--cbp-button-color-bg-dark:var(--cbp-subnav-item-current-color-bg-dark);font-style:italic}cbp-subnav-item[current]>div>cbp-button[fill=outline][color=primary]:first-of-type>a{font-weight:var(--cbp-font-weight-bold)}cbp-subnav-item>div{--cbp-subnav-item-border-color:var(--cbp-subnav-item-color-bg);display:flex;border-left:var(--cbp-border-size-xl) solid var(--cbp-subnav-item-border-color)}cbp-subnav-item:hover>div{--cbp-subnav-item-border-color:var(--cbp-subnav-item-hover-border-color)}cbp-subnav-item cbp-button[fill=outline][color=primary]{--cbp-button-min-height:3.5rem;--cbp-button-width:100%;--cbp-button-border-radius:var(--cbp-border-radius-sharp);--cbp-button-border-width:var(--cbp-border-size-sm);--cbp-button-color:var(--cbp-subnav-item-color);--cbp-button-color-dark:var(--cbp-subnav-item-color);--cbp-button-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-focus:var(--cbp-color-text-lightest);--cbp-button-color-focus-dark:var(--cbp-color-text-darkest);--cbp-button-color-active:var(--cbp-color-text-lightest);--cbp-button-color-active-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg:var(--cbp-subnav-item-color-bg);--cbp-button-color-bg-dark:var(--cbp-subnav-item-color-bg-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-button-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-button-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-button-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-button-color-border:var(--cbp-color-gray-cool-40);--cbp-button-color-border-dark:var(--cbp-color-gray-cool-40);--cbp-button-color-border-hover:var(--cbp-color-gray-cool-40);--cbp-button-color-border-hover-dark:var(--cbp-color-gray-cool-40);--cbp-button-color-border-focus:var(--cbp-color-gray-cool-40);--cbp-button-color-border-focus-dark:var(--cbp-color-gray-cool-40);--cbp-button-color-border-active:var(--cbp-color-gray-cool-40);--cbp-button-color-border-active-dark:var(--cbp-color-gray-cool-40)}cbp-subnav-item cbp-button[fill=outline][color=primary] a{letter-spacing:var(--cbp-letter-spacing-regular);text-transform:unset}cbp-subnav-item cbp-button[fill=outline][color=primary] [slot=cbp-subnav-item-label]{display:inline-flex;gap:var(--cbp-space-2x);align-items:center}cbp-subnav-item cbp-button[fill=outline][color=primary]:first-of-type button,cbp-subnav-item cbp-button[fill=outline][color=primary]:first-of-type a{justify-content:start;font-weight:var(--cbp-font-weight-medium);padding-left:calc(var(--cbp-subnav-item-indent));font-size:var(--cbp-subnav-item-font-size);border-left:none;border-right:none}cbp-subnav-item cbp-button[fill=outline][color=primary]+cbp-button{--cbp-button-width:3.5rem;--cbp-icon-size:var(--cbp-space-5x);transform:var(--cbp-subnav-item-rotate-icon)}cbp-subnav-item[open]{--cbp-subnav-item-rotate-icon:rotate(270deg)}cbp-subnav-item[open]>section{display:block}cbp-subnav:not([flat]) cbp-subnav-item cbp-subnav-item{--cbp-subnav-item-indent:var(--cbp-space-7x);--cbp-subnav-item-font-size:var(--cbp-font-size-heading-sm)}cbp-subnav:not([flat]) cbp-subnav-item cbp-subnav-item cbp-subnav-item{--cbp-subnav-item-indent:var(--cbp-space-10x);--cbp-subnav-item-font-size:var(--cbp-font-size-heading-xs);--cbp-subnav-item-rotate-icon:rotate(0deg)}cbp-subnav:not([flat]) cbp-subnav-item cbp-subnav-item cbp-subnav-item[open]{--cbp-subnav-item-rotate-icon:rotate(180deg)}cbp-subnav:not([flat]) cbp-subnav-item cbp-subnav-item cbp-subnav-item cbp-subnav-item{--cbp-subnav-item-indent:var(--cbp-space-14x);--cbp-subnav-item-font-size:var(--cbp-font-size-body)}cbp-subnav[flat] cbp-subnav-item cbp-subnav-item cbp-subnav-item cbp-button+cbp-button{--cbp-subnav-item-rotate-icon:rotate(0deg)}cbp-subnav[flat] cbp-subnav-item cbp-subnav-item cbp-subnav-item[open] cbp-button+cbp-button{--cbp-subnav-item-rotate-icon:rotate(180deg)}";const n=i;const s=class{constructor(o){t(this,o);this.toggleSubnavItem=c(this,"toggleSubnavItem",3);this.subnavItemClick=c(this,"subnavItemClick",3);this.label=undefined;this.href=undefined;this.uid=e("cbp-subnav-item");this.name=undefined;this.current=false;this.open=false;this.context=undefined;this.sx={}}handleToggleSubnavItem(t){var c;this.open=!this.open;this.toggleSubnavItem.emit({host:this.host,open:this.open,nativeElement:(c=this.expandButton)===null||c===void 0?void 0:c.querySelector("button"),nativeEvent:t})}handleSubnavClick(t){this.current=true;this.subnavItemClick.emit({host:this.host,nativeElement:this.link,nativeEvent:t})}componentWillLoad(){this.icon=this.host.closest("cbp-subnav-item cbp-subnav-item cbp-subnav-item")?"caret-down":"chevron-right";this.parent=!!this.host.querySelector("cbp-subnav-item");if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}a(this.host,Object.assign({},this.sx))}componentDidLoad(){this.link=this.host.querySelector("a")}render(){return o(r,{key:"be917e35b9126e8abf2607f6885a0ef70cd7854e"},o("div",{key:"852f3c9aa1d4a2b009bda30d6f5c19f36e86b092"},o("cbp-button",{key:"1273026d45a6b6bc0d34a8b9ede201f7de370068",id:this.uid,tag:"a",fill:"outline",color:"primary",href:this.href,"aria-current":this.current?"page":"false",context:this.context,onClick:t=>this.handleSubnavClick(t)},!this.host.querySelector("[slot=cbp-subnav-item-label]")&&this.label,o("slot",{key:"cfea6c9eee59c04ff5cf742ba7e425d5596d72de",name:"cbp-subnav-item-label"})),this.parent&&o("cbp-button",{key:"7f7b8d1c7457487c599bbcb93889ec0c7dbce114",fill:"outline",color:"primary",expanded:`${this.open}`,"aria-labelledby":this.uid,context:this.context,ref:t=>this.expandButton=t,onClick:t=>this.handleToggleSubnavItem(t)},o("cbp-icon",{key:"ee34ee791d92e14c6907626f40ca531b5246f038",name:this.icon}))),this.parent&&o("section",{key:"08ca2037e17179a13ad2c41829136d0105596c61"},o("slot",{key:"67bb4f84caca8091b1b0c7ff2cde6c2f0d833621"})))}get host(){return b(this)}};s.style=n;export{s as cbp_subnav_item};
//# sourceMappingURL=p-4664cee4.entry.js.map