UNPKG

@cbpds/web-components

Version:
5 lines 6.12 kB
/*! * CPB Design System web components - built with Stencil */ import{r,c as o,h as c,a as e,g as t}from"./p-654179c2.js";import{s as a}from"./p-93ade441.js";import{s as i}from"./p-83658c86.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=class{constructor(c){r(this,c);this.navItemClick=o(this,"navItemClick",7);this.current=undefined;this.name=undefined;this.sx={}}handleNavItemClick(r){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:r})}}doSelected(r){if(r)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 r;this.control=this.host.querySelector("a,button");if(this.current)(r=this.control)===null||r===void 0?void 0:r.setAttribute("aria-current","page")}render(){return c(e,{key:"49eb9396a1901b90da7c9b812a56c4a4bc866f72",onClick:r=>this.handleNavItemClick(r)},c("slot",{key:"39b43253d9ad5c2a0b931053452c3592884dabf8"}))}get host(){return t(this)}static get watchers(){return{selected:["doSelected"]}}};b.style=v;export{b as cbp_nav_item}; //# sourceMappingURL=p-dc4b8e1a.entry.js.map