@cbpds/web-components/dist/components/cbp-subnav-item.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as t,H as c,d as o,h as r,c as b}from"./p-9caf8482.js";import{c as e,s as a}from"./p-9c1b2f31.js";import{d as n}from"./p-c79ac5f9.js";import{d as i}from"./p-4cdb3206.js";const s=":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 p=s;const v=t(class t extends c{constructor(){super();this.__registerHost();this.toggleSubnavItem=o(this,"toggleSubnavItem",3);this.subnavItemClick=o(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 r(b,{key:"be917e35b9126e8abf2607f6885a0ef70cd7854e"},r("div",{key:"852f3c9aa1d4a2b009bda30d6f5c19f36e86b092"},r("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,r("slot",{key:"cfea6c9eee59c04ff5cf742ba7e425d5596d72de",name:"cbp-subnav-item-label"})),this.parent&&r("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)},r("cbp-icon",{key:"ee34ee791d92e14c6907626f40ca531b5246f038",name:this.icon}))),this.parent&&r("section",{key:"08ca2037e17179a13ad2c41829136d0105596c61"},r("slot",{key:"67bb4f84caca8091b1b0c7ff2cde6c2f0d833621"})))}get host(){return this}static get style(){return p}},[4,"cbp-subnav-item",{label:[1],href:[1],uid:[1],name:[513],current:[516],open:[516],context:[513],sx:[8]}]);function u(){if(typeof customElements==="undefined"){return}const t=["cbp-subnav-item","cbp-button","cbp-icon"];t.forEach((t=>{switch(t){case"cbp-subnav-item":if(!customElements.get(t)){customElements.define(t,v)}break;case"cbp-button":if(!customElements.get(t)){n()}break;case"cbp-icon":if(!customElements.get(t)){i()}break}}))}const l=v;const d=u;export{l as CbpSubnavItem,d as defineCustomElement};
//# sourceMappingURL=cbp-subnav-item.js.map