@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.43 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as e,H as t,h as a,c as s}from"./p-c5a784ab.js";import{d as i}from"./p-9c1b2f31.js";import{s as r}from"./p-5709fe11.js";import{d as c}from"./p-7abe098c.js";import{d as o}from"./p-62fdbefd.js";import{d as n}from"./p-4f2249d2.js";const p=":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 d=p;const b=e(class e extends t{constructor(){super();this.__registerHost();this.navItems=[];this.children=[];this.subnavDrawerId=undefined}handleNavDrawerClose(e){const t=e.target.querySelector("cbp-subnav");if((t===null||t===void 0?void 0:t.store)==true){let e=this.host.querySelector(`[name="${r.activeItemName}"] cbp-button > button `);e===null||e===void 0?void 0:e.focus()}}updateCurrentItem(e){const t=this.host.querySelector(`cbp-nav-item[name="${e}"]`);this.setCurrentNav(t)}setCurrentNav(e){this.currentItem=e;this.navItems.forEach((t=>{if(e==t)t.current=true;else t.current=false}))}updateActiveItem(e){const t=this.host.querySelector(`cbp-nav-item[name="${e}"] button`);setTimeout((()=>{t===null||t===void 0?void 0:t.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,t)=>{if(t>0){e.setAttribute("hidden","")}}));this.drawerButton.parentElement.classList.add("cbp-app-header-responsive");this.drawerButton?this.drawerButton.removeAttribute("hidden"):""}doFullSize(){this.children.forEach(((e,t)=>{if(t>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]");r.currentPage=r.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)!=r.currentParent){this.updateCurrentItem(r.currentParent)}return a(s,{key:"69e88dd7b2a379d3cfec0043f4819302a49a647f"},a("cbp-resize-observer",{key:"84d23e848dd441a45b364cd73c63841281f4b03f",onResized:i((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 this}static get style(){return d}},[4,"cbp-app-header",{subnavDrawerId:[1,"subnav-drawer-id"]},[[16,"drawerClose","handleNavDrawerClose"]]]);function h(){if(typeof customElements==="undefined"){return}const e=["cbp-app-header","cbp-button","cbp-icon","cbp-resize-observer"];e.forEach((e=>{switch(e){case"cbp-app-header":if(!customElements.get(e)){customElements.define(e,b)}break;case"cbp-button":if(!customElements.get(e)){c()}break;case"cbp-icon":if(!customElements.get(e)){o()}break;case"cbp-resize-observer":if(!customElements.get(e)){n()}break}}))}const l=b;const f=h;export{l as CbpAppHeader,f as defineCustomElement};
//# sourceMappingURL=cbp-app-header.js.map