@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-c5a784ab.js";import{c as e,s as a}from"./p-9c1b2f31.js";import{d as n}from"./p-7abe098c.js";import{d as i}from"./p-62fdbefd.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",7);this.subnavItemClick=o(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(b,{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 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