@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 3.71 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as e,h as a,a as t,g as i}from"./p-8d4a80f0.js";import{d as s}from"./p-93ade441.js";import{s as o}from"./p-5563068d.js";const r=":root{--cbp-app-header-color-background:var(--cbp-color-white);--cbp-app-header-color-background-dark:var(--cbp-color-base-neutral-dark)}[data-cbp-theme=dark] cbp-app-header{--cbp-app-header-color-background:var(--cbp-app-header-color-background-dark)}cbp-app-header{min-height:var(--cbp-space-14x);padding:0 var(--cbp-responsive-spacing-outer);background-color:var(--cbp-app-header-color-background);box-shadow:var(--cbp-shadow-level-3-down);z-index:var(--cbp-z-index-level-1);position:sticky;top:calc(-1 * var(--cbp-space-half-x));display:block}cbp-app-header nav{display:flex;align-items:center;align-content:stretch;width:max-content}cbp-app-header .cbp-app-header-responsive{align-items:center;justify-content:space-between;width:100%}";const c=r;const d=class{constructor(a){e(this,a);this.navItems=[];this.children=[];this.subnavDrawerId=undefined}handleNavDrawerClose(e){const a=e.target.querySelector("cbp-subnav");if((a===null||a===void 0?void 0:a.store)==true){let e=this.host.querySelector(`[name="${o.activeItemName}"] cbp-button > button `);e===null||e===void 0?void 0:e.focus()}}updateCurrentItem(e){const a=this.host.querySelector(`cbp-nav-item[name="${e}"]`);this.setCurrentNav(a)}setCurrentNav(e){this.currentItem=e;this.navItems.forEach((a=>{if(e==a)a.current=true;else a.current=false}))}updateActiveItem(e){const a=this.host.querySelector(`cbp-nav-item[name="${e}"] button`);setTimeout((()=>{a===null||a===void 0?void 0:a.focus()}),101)}handleResize(e){if(this.navWidth==undefined){this.navWidth=this.nav.getBoundingClientRect().width}if(e<=this.navWidth){this.doResponsive()}else{this.doFullSize()}}doResponsive(){this.children.forEach(((e,a)=>{if(a>0){e.setAttribute("hidden","")}}));this.drawerButton.parentElement.classList.add("cbp-app-header-responsive");this.drawerButton?this.drawerButton.removeAttribute("hidden"):""}doFullSize(){this.children.forEach(((e,a)=>{if(a>0){e.removeAttribute("hidden")}}));this.drawerButton.parentElement.classList.remove("cbp-app-header-responsive");this.drawerButton?this.drawerButton.setAttribute("hidden",""):""}componentWillLoad(){var e;this.navItems=Array.from(this.host.querySelectorAll("cbp-nav-item"));this.currentItem=this.host.querySelector("cbp-nav-item[current]");o.currentPage=o.currentParent=(e=this.currentItem)===null||e===void 0?void 0:e.name;this.navItems.forEach((e=>{e.addEventListener("navItemClick",(e=>this.setCurrentNav(e.detail.host)))}))}componentDidLoad(){this.children=Array.from(this.nav.querySelectorAll(":scope > *"))}render(){var e;if(((e=this.currentItem)===null||e===void 0?void 0:e.name)!=o.currentParent){this.updateCurrentItem(o.currentParent)}return a(t,{key:"69e88dd7b2a379d3cfec0043f4819302a49a647f"},a("cbp-resize-observer",{key:"84d23e848dd441a45b364cd73c63841281f4b03f",onResized:s((e=>{this.handleResize(e.detail.width)}),10)},a("nav",{key:"8f6c9c58458bdc1b3141990f111e82037596984c","aria-label":"Primary Navigation",ref:e=>this.nav=e},a("slot",{key:"af0d5f964e716d4fe8bfdff5a177b772f043a74f",name:"cbp-home"}),a("slot",{key:"8fb6a545ef56d6b1bdb4891e8344a28659035d61"}),this.navItems.length>1&&a("cbp-button",{key:"b21e597f626b61f3744fceec95470083831c213e",hidden:true,ref:e=>this.drawerButton=e,fill:"outline",color:"secondary","target-prop":"open",controls:this.subnavDrawerId,accessibilityText:"Navigation Menu"},a("cbp-icon",{key:"6fc91d82cc1acbc3176a492299fe6824409eebda",name:"bars"})))))}get host(){return i(this)}};d.style=c;export{d as cbp_app_header};
//# sourceMappingURL=p-1ffe38cb.entry.js.map