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

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as e,H as c,d as r,h as o,c as t}from"./p-9caf8482.js";import{s as a}from"./p-9c1b2f31.js";import{s as i}from"./p-c10c2190.js";const n=":root{--cbp-nav-item-color:var(--cbp-color-interactive-secondary-darker);--cbp-nav-item-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-nav-item-color-bg:transparent;--cbp-nav-item-color-border:transparent;--cbp-nav-item-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-nav-item-color-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-nav-item-color-bg-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-nav-item-color-bg-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-nav-item-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-nav-item-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-nav-item-color-focus:var(--cbp-color-text-lightest);--cbp-nav-item-color-focus-dark:var(--cbp-color-text-darkest);--cbp-nav-item-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-nav-item-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-nav-item-color-outline-focus:var(--cbp-color-white);--cbp-nav-item-color-outline-focus-dark:var(--cbp-color-black);--cbp-nav-item-color-active:var(--cbp-color-text-lightest);--cbp-nav-item-color-active-dark:var(--cbp-color-text-darkest);--cbp-nav-item-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-nav-item-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-nav-item-color-current:var(--cbp-color-interactive-active-dark);--cbp-nav-item-color-current-dark:var(--cbp-color-interactive-active-light);--cbp-nav-item-color-bg-current:transparent;--cbp-nav-item-color-border-current:var(--cbp-color-interactive-active-dark);--cbp-nav-item-color-border-current-dark:var(--cbp-color-interactive-active-light)}[data-cbp-theme=dark] cbp-nav-item:not(#fakeId){--cbp-nav-item-color:var(--cbp-nav-item-color-dark);--cbp-nav-item-color-hover:var(--cbp-nav-item-color-hover-dark);--cbp-nav-item-color-bg-hover:var(--cbp-nav-item-color-bg-hover-dark);--cbp-nav-item-color-border-hover:var(--cbp-nav-item-color-border-hover-dark);--cbp-nav-item-color-focus:var(--cbp-nav-item-color-focus-dark);--cbp-nav-item-color-bg-focus:var(--cbp-nav-item-color-bg-focus-dark);--cbp-nav-item-color-outline-focus:var(--cbp-nav-item-color-outline-focus-dark);--cbp-nav-item-color-active:var(--cbp-nav-item-color-active-dark);--cbp-nav-item-color-bg-active:var(--cbp-nav-item-color-bg-active-dark);--cbp-nav-item-color-current:var(--cbp-nav-item-color-current-dark);--cbp-nav-item-color-border-current:var(---cbp-nav-item-color-border-current-dark)}cbp-nav-item:not(#fakeId){display:inline-block}cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]){--cbp-nav-item-color:var(--cbp-nav-item-color-current);--cbp-nav-item-color-bg:var(--cbp-nav-item-color-bg-current);--cbp-nav-item-color-border:var(--cbp-nav-item-color-border-current)}cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]) button,cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]) a{font-style:italic}cbp-nav-item:not(#fakeId) button,cbp-nav-item:not(#fakeId) a{display:inline-flex;gap:var(--cbp-space-2x);align-items:center;justify-content:center;min-height:3.5rem;text-transform:unset;letter-spacing:normal;text-decoration:none;color:var(--cbp-nav-item-color);background-color:var(--cbp-nav-item-color-bg);font-size:var(--cbp-font-size-heading-xs);font-weight:var(--cbp-font-weight-medium);padding-block:calc(var(--cbp-space-5x) / 2) calc(var(--cbp-space-3x) / 2);padding-inline:var(--cbp-space-3x);border-width:0 0 var(--cbp-border-size-xl) 0;border-style:solid;border-color:var(--cbp-nav-item-color-border);border-radius:0;outline-color:var(--cbp-nav-item-color-outline-focus);outline-style:solid;outline-width:0;outline-offset:calc(-1 * var(--cbp-space-1x))}cbp-nav-item:not(#fakeId) button:hover,cbp-nav-item:not(#fakeId) a:hover{--cbp-nav-item-color:var(--cbp-nav-item-color-hover);--cbp-nav-item-color-bg:var(--cbp-nav-item-color-bg-hover);--cbp-nav-item-color-border:var(--cbp-nac-item-color-border-hover)}cbp-nav-item:not(#fakeId) button:focus,cbp-nav-item:not(#fakeId) a:focus{--cbp-nav-item-color:var(--cbp-nav-item-color-focus);--cbp-nav-item-color-bg:var(--cbp-nav-item-color-bg-focus);--cbp-nav-item-color-border:transparent;outline-width:var(--cbp-border-size-md)}cbp-nav-item:not(#fakeId) button:active,cbp-nav-item:not(#fakeId) a:active{--cbp-nav-item-color:var(--cbp-nav-item-color-active);--cbp-nav-item-color-bg:var(--cbp-nav-item-color-bg-active)}cbp-nav-item:not(#fakeId)[slot=cbp-home] a{color:var(--cbp-nav-item-color);font-size:var(--cbp-font-size-heading-md);font-weight:var(--cbp-font-weight-bold);padding-inline:var(--cbp-space-5x);margin-inline-start:calc(-1 * var(--cbp-space-5x));font-style:normal}@media (max-width: 37.5em){cbp-nav-item:not(#fakeId) [slot=cbp-home] a{font-size:var(--cbp-font-size-heading-sm)}}";const v=n;const b=e(class e extends c{constructor(){super();this.__registerHost();this.navItemClick=r(this,"navItemClick",7);this.current=undefined;this.name=undefined;this.sx={}}handleNavItemClick(e){i.activeItemName=this.name;if(this.host.querySelector("a")){this.current=true;i.currentPage=this.name;i.currentParent=this.name;this.navItemClick.emit({host:this.host,nativeElement:this.control,nativeEvent:e})}}doSelected(e){if(e)this.control.setAttribute("aria-current","page");else this.control.removeAttribute("aria-current")}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}a(this.host,Object.assign({},this.sx))}componentDidLoad(){var e;this.control=this.host.querySelector("a,button");if(this.current)(e=this.control)===null||e===void 0?void 0:e.setAttribute("aria-current","page")}render(){return o(t,{key:"49eb9396a1901b90da7c9b812a56c4a4bc866f72",onClick:e=>this.handleNavItemClick(e)},o("slot",{key:"39b43253d9ad5c2a0b931053452c3592884dabf8"}))}get host(){return this}static get watchers(){return{selected:["doSelected"]}}static get style(){return v}},[4,"cbp-nav-item",{current:[516],name:[513],sx:[8]},undefined,{selected:["doSelected"]}]);function l(){if(typeof customElements==="undefined"){return}const e=["cbp-nav-item"];e.forEach((e=>{switch(e){case"cbp-nav-item":if(!customElements.get(e)){customElements.define(e,b)}break}}))}const p=b;const s=l;export{p as CbpNavItem,s as defineCustomElement};
//# sourceMappingURL=cbp-nav-item.js.map