@cbpds/web-components/dist/components/cbp-app-header.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as e,H as a,d as c,h as t,c as r}from"./p-9caf8482.js";import{d as i}from"./p-9c1b2f31.js";import{s as o}from"./p-c10c2190.js";import{d as s}from"./p-c79ac5f9.js";import{d as p}from"./p-4cdb3206.js";import{d}from"./p-36a224bc.js";const n=":root{--cbp-app-header-color-background:var(--cbp-color-white);--cbp-app-header-color-background-dark:var(--cbp-color-gray-cool-60);--cbp-app-header-search-color-focus-outline:var(--cbp-color-interactive-focus-dark);--cbp-app-header-search-color-focus-outline-dark:var(--cbp-color-interactive-focus-light);--cbp-app-header-search-color-placeholder:var(--cbp-color-text-dark);--cbp-app-header-search-color-placeholder-dark:var(--cbp-color-text-light)}[data-cbp-theme=dark] cbp-app-header{--cbp-app-header-color-background:var(--cbp-app-header-color-background-dark);--cbp-app-header-search-color-focus-outline:var(--cbp-app-header-search-color-focus-outline-dark);--cbp-app-header-search-color-placeholder:var(--cbp-app-header-search-color-placeholder-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:flex;align-items:center;gap:var(--cbp-space-4x)}cbp-app-header nav{display:flex;align-items:center;align-content:stretch;width:max-content}cbp-app-header cbp-resize-observer{flex-grow:1}cbp-app-header .cbp-app-header-responsive{align-items:center;justify-content:space-between;width:100%}cbp-app-header #cbp-app-header-search{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;width:100%;height:100%;padding:0 var(--cbp-responsive-spacing-outer);background-color:var(--cbp-app-header-color-background)}cbp-app-header #cbp-app-header-search:focus-within{outline:var(--cbp-border-size-md) solid var(--cbp-app-header-search-color-focus-outline);outline-offset:calc(-2 * var(--cbp-border-size-md))}cbp-app-header #cbp-app-header-search input{flex-grow:1;border:none;background-color:var(--cbp-app-header-color-background)}cbp-app-header #cbp-app-header-search input::placeholder{font-style:italic;color:var(--cbp-app-header-search-color-placeholder)}cbp-app-header #cbp-app-header-search input:focus-visible{outline:none}cbp-app-header #cbp-app-header-search div{display:flex;flex-direction:row-reverse;gap:var(--cbp-space-4x);align-items:center}";const h=n;const l=e(class e extends a{constructor(){super();this.__registerHost();this.searchInput=c(this,"searchInput",7);this.searchSubmit=c(this,"searchSubmit",7);this.navItems=[];this.children=[];this.subnavDrawerId=undefined;this.search=undefined;this.searchMethod=undefined;this.searchAction=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()}}handleSearchInput(e){this.searchInput.emit({host:this.host,nativeInput:this.searchField,value:this.searchField.value,nativeEvent:e})}handleSearchSubmit(e){this.searchSubmit.emit({host:this.host,nativeInput:this.searchField,value:this.searchField.value,nativeEvent:e})}handleKeyDown(e){const a=document.getElementById("cbp-app-header-search").hidden==false;if(e.key==="Escape"&&this.search&&a){this.closeSearch()}}handleClick(e){var a;const c=((a=document.getElementById("cbp-app-header-search"))===null||a===void 0?void 0:a.hidden)==false;if(!this.host.contains(e.target)&&this.search&&c){this.closeSearch()}}async openSearch(){this.searchForm.hidden=false;this.searchControl.expanded="true";this.searchField.focus()}async closeSearch(){var e;this.searchForm.hidden=true;this.searchField.value="";this.searchControl.expanded="false";(e=this.searchControl.querySelector("button"))===null||e===void 0?void 0:e.focus()}handleTabFocusOut({key:e,shiftKey:a}){if(e=="Tab"&&!a)this.closeSearch()}handleShiftTabFocusOut({key:e,shiftKey:a}){if(e=="Tab"&&a)this.closeSearch()}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(){var e,a,c;this.children.forEach(((e,a)=>{if(a>0&&e.id!="global-search-toggle"){e.setAttribute("hidden","")}}));(a=(e=this.drawerButton)===null||e===void 0?void 0:e.parentElement)===null||a===void 0?void 0:a.classList.add("cbp-app-header-responsive");(c=this.drawerButton)===null||c===void 0?void 0:c.removeAttribute("hidden")}doFullSize(){var e,a,c;this.children.forEach(((e,a)=>{if(a>0){e.removeAttribute("hidden")}}));(a=(e=this.drawerButton)===null||e===void 0?void 0:e.parentElement)===null||a===void 0?void 0:a.classList.remove("cbp-app-header-responsive");(c=this.drawerButton)===null||c===void 0?void 0:c.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 t(r,{key:"a6df2597f0a48455b82a6c631c8a51027001a09c"},t("cbp-resize-observer",{key:"64f8997c35a20c25360df09113611da5dead8759",onResized:i((e=>{this.handleResize(e.detail.width)}),10)},t("nav",{key:"0d587d85298abb0d72617acd1f79ee3fedc8b274","aria-label":"Primary Navigation",ref:e=>this.nav=e},t("slot",{key:"ee7f85025a687b4656a40f3938b6fc7c2001ebe6",name:"cbp-home"}),t("slot",{key:"a1fd5f9dd967024b5ed342ec6dbb8a0185f8aaea"}),this.navItems.length>1&&t("cbp-button",{key:"11b2d7393ee63194d2dea46635f4f4782788c457",hidden:true,ref:e=>this.drawerButton=e,fill:"outline",color:"secondary","target-prop":"open",controls:this.subnavDrawerId,accessibilityText:"Navigation Menu",expanded:"false"},t("cbp-icon",{key:"97f9198c72bf5d3e99ad25249e46dc724a44d7a6",name:"bars"})))),t("slot",{key:"a4106d608a3bc40418da595cf45690889eb3209a",name:"cbp-app-header-extras"}),this.search&&t("search",{key:"5f0b85ef98db4a9955126dcc0b807c5322eb2391"},t("cbp-button",{key:"8a902ae32c5e3f10ac88e8f2c3166799da8f2411",id:"global-search-toggle",type:"button",fill:"outline",color:"secondary",variant:"square",onClick:()=>this.openSearch(),expanded:"false",accessibilityText:"Global Search",ref:e=>this.searchControl=e},t("cbp-icon",{key:"88af63b6b00808f202d2876b378dd1aa81e72bab",name:"magnifying-glass"})),t("form",{key:"379004e88c48b81e64787cee3de75634796cb7a0",hidden:true,id:"cbp-app-header-search",method:this.searchMethod,action:this.searchAction,onSubmit:e=>this.handleSearchSubmit(e),ref:e=>this.searchForm=e},t("input",{key:"020f72c78de56139a3a9f57db47f6f2dabdf0b50",type:"text",name:"globalSearch","aria-label":"Search",placeholder:"Start Typing - Press ESC to Close",onKeyDown:e=>this.handleShiftTabFocusOut(e),onInput:e=>this.handleSearchInput(e),ref:e=>this.searchField=e}),t("div",{key:"fef238f5d0fcc182b2b9123194aa5e4340877c38"},t("cbp-button",{key:"42db754d7fec3e16a72b9e5b0aebae2e71b78a2b",type:"submit",fill:"solid",color:"primary",variant:"square",accessibilityText:"Search"},t("cbp-icon",{key:"6e81ac48beab01dbabe9817d1790a5e329398742",name:"magnifying-glass"})),t("cbp-button",{key:"fe3d676f7c2178435a9ca5e4ba7da91fc93f2cec",type:"button",fill:"ghost",color:"secondary",variant:"square",accessibilityText:"Close Search",onKeyDown:e=>this.handleTabFocusOut(e),onClick:()=>this.closeSearch()},t("cbp-icon",{key:"67b70428de1ad28bce763874851096c92f09f1a9",name:"circle-xmark",size:"var(--cbp-space-5x)"}))))))}get host(){return this}static get style(){return h}},[4,"cbp-app-header",{subnavDrawerId:[1,"subnav-drawer-id"],search:[4],searchMethod:[1,"search-method"],searchAction:[1,"search-action"],openSearch:[64],closeSearch:[64]},[[16,"drawerClose","handleNavDrawerClose"],[0,"keydown","handleKeyDown"],[16,"click","handleClick"]]]);function b(){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,l)}break;case"cbp-button":if(!customElements.get(e)){s()}break;case"cbp-icon":if(!customElements.get(e)){p()}break;case"cbp-resize-observer":if(!customElements.get(e)){d()}break}}))}const u=l;const f=b;export{u as CbpAppHeader,f as defineCustomElement};
//# sourceMappingURL=cbp-app-header.js.map