@cbpds/web-components
Version:
Web components for the CBP Design System.
321 lines (320 loc) • 13.9 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { debounce } from "../../utils/utils";
import state from "../cbp-app-header/store";
export class CbpAppHeader {
constructor() {
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)" }))))))));
}
static get is() { return "cbp-app-header"; }
static get originalStyleUrls() {
return {
"$": ["cbp-app-header.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-app-header.css"]
};
}
static get properties() {
return {
"subnavDrawerId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the id of the drawer to be launched"
},
"attribute": "subnav-drawer-id",
"reflect": false
},
"search": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies if there will be a slotted input for global search"
},
"attribute": "search",
"reflect": false
},
"searchMethod": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the method attribute for the search form"
},
"attribute": "search-method",
"reflect": false
},
"searchAction": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the action attribute for the search form"
},
"attribute": "search-action",
"reflect": false
}
};
}
static get events() {
return [{
"method": "searchInput",
"name": "searchInput",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted in accordance with the native input's onInput event."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "searchSubmit",
"name": "searchSubmit",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted in accordance with the native search form's submit event."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"openSearch": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "A public method to show the search form in the application header.",
"tags": []
}
},
"closeSearch": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "A public method to close/hide the search form in the application header.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "drawerClose",
"method": "handleNavDrawerClose",
"target": "body",
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "click",
"method": "handleClick",
"target": "body",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-app-header.js.map