@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 8.25 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as e,c as a,h as c,a as i,g as t}from"./p-654179c2.js";import{d as r}from"./p-93ade441.js";import{s as o}from"./p-83658c86.js";const s=":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 p=s;const d=class{constructor(c){e(this,c);this.searchInput=a(this,"searchInput",7);this.searchSubmit=a(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 c(i,{key:"a6df2597f0a48455b82a6c631c8a51027001a09c"},c("cbp-resize-observer",{key:"64f8997c35a20c25360df09113611da5dead8759",onResized:r((e=>{this.handleResize(e.detail.width)}),10)},c("nav",{key:"0d587d85298abb0d72617acd1f79ee3fedc8b274","aria-label":"Primary Navigation",ref:e=>this.nav=e},c("slot",{key:"ee7f85025a687b4656a40f3938b6fc7c2001ebe6",name:"cbp-home"}),c("slot",{key:"a1fd5f9dd967024b5ed342ec6dbb8a0185f8aaea"}),this.navItems.length>1&&c("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"},c("cbp-icon",{key:"97f9198c72bf5d3e99ad25249e46dc724a44d7a6",name:"bars"})))),c("slot",{key:"a4106d608a3bc40418da595cf45690889eb3209a",name:"cbp-app-header-extras"}),this.search&&c("search",{key:"5f0b85ef98db4a9955126dcc0b807c5322eb2391"},c("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},c("cbp-icon",{key:"88af63b6b00808f202d2876b378dd1aa81e72bab",name:"magnifying-glass"})),c("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},c("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}),c("div",{key:"fef238f5d0fcc182b2b9123194aa5e4340877c38"},c("cbp-button",{key:"42db754d7fec3e16a72b9e5b0aebae2e71b78a2b",type:"submit",fill:"solid",color:"primary",variant:"square",accessibilityText:"Search"},c("cbp-icon",{key:"6e81ac48beab01dbabe9817d1790a5e329398742",name:"magnifying-glass"})),c("cbp-button",{key:"fe3d676f7c2178435a9ca5e4ba7da91fc93f2cec",type:"button",fill:"ghost",color:"secondary",variant:"square",accessibilityText:"Close Search",onKeyDown:e=>this.handleTabFocusOut(e),onClick:()=>this.closeSearch()},c("cbp-icon",{key:"67b70428de1ad28bce763874851096c92f09f1a9",name:"circle-xmark",size:"var(--cbp-space-5x)"}))))))}get host(){return t(this)}};d.style=p;export{d as cbp_app_header};
//# sourceMappingURL=p-0ffcc798.entry.js.map