@cbpds/web-components
Version:
Web components for the CBP Design System.
156 lines (152 loc) • 10.7 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { d as debounce } from './utils-475ba472.js';
import { s as state } from './store-6cad20b5.js';
const cbpAppHeaderCss = ":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 CbpAppHeaderStyle0 = cbpAppHeaderCss;
const CbpAppHeader = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.searchInput = createEvent(this, "searchInput", 7);
this.searchSubmit = createEvent(this, "searchSubmit", 7);
this.navItems = [];
this.children = [];
this.subnavDrawerId = undefined;
this.search = undefined;
this.searchMethod = undefined;
this.searchAction = undefined;
}
handleNavDrawerClose(e) {
const Subnav = e.target.querySelector('cbp-subnav');
if ((Subnav === null || Subnav === void 0 ? void 0 : Subnav.store) == true) {
let active = this.host.querySelector(`[name="${state.activeItemName}"] cbp-button > button `);
active === null || active === void 0 ? void 0 : active.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(ev) {
const searchVisible = document.getElementById('cbp-app-header-search').hidden == false;
if (ev.key === 'Escape' && this.search && searchVisible) {
this.closeSearch();
}
}
handleClick(event) {
var _a;
const searchVisible = ((_a = document.getElementById('cbp-app-header-search')) === null || _a === void 0 ? void 0 : _a.hidden) == false;
if (!this.host.contains(event.target) && this.search && searchVisible) {
this.closeSearch();
}
}
async openSearch() {
this.searchForm.hidden = false;
this.searchControl.expanded = 'true';
this.searchField.focus();
}
async closeSearch() {
var _a;
this.searchForm.hidden = true;
this.searchField.value = '';
this.searchControl.expanded = 'false';
(_a = this.searchControl.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
}
handleTabFocusOut({ key, shiftKey }) {
if (key == 'Tab' && !shiftKey)
this.closeSearch();
}
handleShiftTabFocusOut({ key, shiftKey }) {
if (key == 'Tab' && shiftKey)
this.closeSearch();
}
updateCurrentItem(newValue) {
const CurrentItem = this.host.querySelector(`cbp-nav-item[name="${newValue}"]`);
this.setCurrentNav(CurrentItem);
}
setCurrentNav(activatedNav) {
this.currentItem = activatedNav;
this.navItems.forEach((navItem) => {
if (activatedNav == navItem)
navItem.current = true;
else
navItem.current = false;
});
}
updateActiveItem(newValue) {
const ActiveItem = this.host.querySelector(`cbp-nav-item[name="${newValue}"] button`);
setTimeout(() => {
ActiveItem === null || ActiveItem === void 0 ? void 0 : ActiveItem.focus();
}, 101);
}
handleResize(width) {
if (this.navWidth == undefined) {
this.navWidth = this.nav.getBoundingClientRect().width;
}
if (width <= this.navWidth) {
this.doResponsive();
}
else {
this.doFullSize();
}
}
doResponsive() {
var _a, _b, _c;
this.children.forEach((item, index) => {
if (index > 0 && item.id != 'global-search-toggle') {
item.setAttribute('hidden', '');
}
});
(_b = (_a = this.drawerButton) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.add('cbp-app-header-responsive');
(_c = this.drawerButton) === null || _c === void 0 ? void 0 : _c.removeAttribute('hidden');
}
doFullSize() {
var _a, _b, _c;
this.children.forEach((item, index) => {
if (index > 0) {
item.removeAttribute('hidden');
}
});
(_b = (_a = this.drawerButton) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.remove('cbp-app-header-responsive');
(_c = this.drawerButton) === null || _c === void 0 ? void 0 : _c.setAttribute('hidden', '');
}
componentWillLoad() {
var _a;
this.navItems = Array.from(this.host.querySelectorAll('cbp-nav-item'));
this.currentItem = this.host.querySelector('cbp-nav-item[current]');
state.currentPage = state.currentParent = (_a = this.currentItem) === null || _a === void 0 ? void 0 : _a.name;
this.navItems.forEach(navItem => {
navItem.addEventListener('navItemClick', e => this.setCurrentNav(e.detail.host));
});
}
componentDidLoad() {
this.children = Array.from(this.nav.querySelectorAll(':scope > *'));
}
render() {
var _a;
if (((_a = this.currentItem) === null || _a === void 0 ? void 0 : _a.name) != state.currentParent) {
this.updateCurrentItem(state.currentParent);
}
return (h(Host, { key: 'a6df2597f0a48455b82a6c631c8a51027001a09c' }, h("cbp-resize-observer", { key: '64f8997c35a20c25360df09113611da5dead8759', onResized: debounce(e => {
this.handleResize(e.detail.width);
}, 10) }, h("nav", { key: '0d587d85298abb0d72617acd1f79ee3fedc8b274', "aria-label": "Primary Navigation", ref: el => (this.nav = el) }, h("slot", { key: 'ee7f85025a687b4656a40f3938b6fc7c2001ebe6', name: "cbp-home" }), h("slot", { key: 'a1fd5f9dd967024b5ed342ec6dbb8a0185f8aaea' }), this.navItems.length > 1 && (h("cbp-button", { key: '11b2d7393ee63194d2dea46635f4f4782788c457', hidden: true, ref: el => (this.drawerButton = el), fill: "outline", color: "secondary", "target-prop": "open", controls: this.subnavDrawerId, accessibilityText: "Navigation Menu", expanded: "false" }, h("cbp-icon", { key: '97f9198c72bf5d3e99ad25249e46dc724a44d7a6', name: "bars" }))))), h("slot", { key: 'a4106d608a3bc40418da595cf45690889eb3209a', name: "cbp-app-header-extras" }), this.search && (h("search", { key: '5f0b85ef98db4a9955126dcc0b807c5322eb2391' }, h("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: el => (this.searchControl = el) }, h("cbp-icon", { key: '88af63b6b00808f202d2876b378dd1aa81e72bab', name: "magnifying-glass" })), h("form", { key: '379004e88c48b81e64787cee3de75634796cb7a0', hidden: true, id: "cbp-app-header-search", method: this.searchMethod, action: this.searchAction, onSubmit: (e) => this.handleSearchSubmit(e), ref: el => (this.searchForm = el) }, h("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: el => (this.searchField = el) }), h("div", { key: 'fef238f5d0fcc182b2b9123194aa5e4340877c38' }, h("cbp-button", { key: '42db754d7fec3e16a72b9e5b0aebae2e71b78a2b', type: "submit", fill: "solid", color: "primary", variant: "square", accessibilityText: "Search" }, h("cbp-icon", { key: '6e81ac48beab01dbabe9817d1790a5e329398742', name: "magnifying-glass" })), h("cbp-button", { key: 'fe3d676f7c2178435a9ca5e4ba7da91fc93f2cec', type: "button", fill: "ghost", color: "secondary", variant: "square", accessibilityText: "Close Search", onKeyDown: e => this.handleTabFocusOut(e), onClick: () => this.closeSearch() }, h("cbp-icon", { key: '67b70428de1ad28bce763874851096c92f09f1a9', name: "circle-xmark", size: "var(--cbp-space-5x)" }))))))));
}
get host() { return getElement(this); }
};
CbpAppHeader.style = CbpAppHeaderStyle0;
export { CbpAppHeader as cbp_app_header };
//# sourceMappingURL=cbp-app-header.entry.js.map