@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 b,c as r}from"./p-e7f1ba21.js";import{c as e,s as a}from"./p-9c1b2f31.js";import{d as n}from"./p-37542b2c.js";import{d as i}from"./p-2abdcb69.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 b(r,{key:"c4e7c9c3defb2fe90c43ae9b6d1e72b042dc86b0"},b("div",{key:"47e7b59d704ef1d2e0106698e5578509918e0649"},b("cbp-button",{key:"81253f5b496393ab444189cb41289fe2bf79cae9",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,b("slot",{key:"4d60b1beac036509660195518a1433dd3c15ac18",name:"cbp-subnav-item-label"})),this.parent&&b("cbp-button",{key:"5f782f6ba80a05157c277b1d642043d83828245a",fill:"outline",color:"primary",expanded:`${this.open}`,"aria-labelledby":this.uid,context:this.context,ref:t=>this.expandButton=t,onClick:t=>this.handleToggleSubnavItem(t)},b("cbp-icon",{key:"6cf8b185d57b15da9bed3e0f888e1f9d90932ad9",name:this.icon}))),this.parent&&b("section",{key:"30cfd1410d300b1b7cc645c4b2f67eaa891a95bb"},b("slot",{key:"3a61efd2a18d87d85819e03d71e55bad614103ed"})))}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