@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 8.33 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as t,c,h as r,a as o,g as b}from"./p-8d4a80f0.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(r){t(this,r);this.toggleSubnavItem=c(this,"toggleSubnavItem",7);this.subnavItemClick=c(this,"subnavItemClick",7);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(){this.open=!this.open;this.toggleSubnavItem.emit({host:this.host,open:this.open})}handleSubnavClick(){this.current=true;this.subnavItemClick.emit({host:this.host})}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))}render(){return r(o,{key:"c9275df1c61cce9e57f59690d37191c954cb2089"},r("div",{key:"569a349085420aee7633fe34b9590fb46b949bd4"},r("cbp-button",{key:"6ab8cf05bf2be0d069813d1c398476553cff06b3",id:this.uid,tag:"a",fill:"outline",color:"primary",href:this.href,"aria-current":this.current?"page":"false",context:this.context,onClick:()=>this.handleSubnavClick()},!this.host.querySelector("[slot=cbp-subnav-item-label]")&&this.label,r("slot",{key:"f2e93736c09d0bc53fbd7ccc89a6548b06577982",name:"cbp-subnav-item-label"})),this.parent&&r("cbp-button",{key:"0c5ec2dbca318e0a6120e960fe0c5ae83fd85663",fill:"outline",color:"primary",expanded:`${this.open}`,"aria-labelledby":this.uid,context:this.context,onClick:()=>this.handleToggleSubnavItem()},r("cbp-icon",{key:"7b53fd6e5cce29edd27f8819bafea17a3a8a82ec",name:this.icon}))),this.parent&&r("section",{key:"9e579ec51a35c6c96864a0fa05762c3a654eb820"},r("slot",{key:"f2bcb356f3ef741653ea504265cb181a57a7683e"})))}get host(){return b(this)}};s.style=n;export{s as cbp_subnav_item};
//# sourceMappingURL=p-deba8b9a.entry.js.map