@cbpds/web-components
Version:
Web components for the CBP Design System.
134 lines (133 loc) • 5.38 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;
}
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();
}
}
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() {
this.children.forEach((item, index) => {
if (index > 0) {
item.setAttribute('hidden', '');
}
});
this.drawerButton.parentElement.classList.add('cbp-app-header-responsive');
this.drawerButton ? this.drawerButton.removeAttribute('hidden') : '';
}
doFullSize() {
this.children.forEach((item, index) => {
if (index > 0) {
item.removeAttribute('hidden');
}
});
this.drawerButton.parentElement.classList.remove('cbp-app-header-responsive');
this.drawerButton ? this.drawerButton.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: '69e88dd7b2a379d3cfec0043f4819302a49a647f' }, h("cbp-resize-observer", { key: '84d23e848dd441a45b364cd73c63841281f4b03f', onResized: debounce((e) => {
this.handleResize(e.detail.width);
}, 10) }, h("nav", { key: '8f6c9c58458bdc1b3141990f111e82037596984c', "aria-label": "Primary Navigation", ref: el => this.nav = el }, h("slot", { key: 'af0d5f964e716d4fe8bfdff5a177b772f043a74f', name: "cbp-home" }), h("slot", { key: '8fb6a545ef56d6b1bdb4891e8344a28659035d61' }), (this.navItems.length > 1) &&
h("cbp-button", { key: 'b21e597f626b61f3744fceec95470083831c213e', hidden: true, ref: el => this.drawerButton = el, fill: "outline", color: "secondary", "target-prop": "open", controls: this.subnavDrawerId, accessibilityText: "Navigation Menu" }, h("cbp-icon", { key: '6fc91d82cc1acbc3176a492299fe6824409eebda', name: "bars" }))))));
}
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
}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "drawerClose",
"method": "handleNavDrawerClose",
"target": "body",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-app-header.js.map