@cbpds/web-components
Version:
Web components for the CBP Design System.
105 lines (99 loc) • 5.33 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-507f2a89.js');
const utils = require('./utils-99c9e716.js');
const store = require('./store-6b47a1b9.js');
const cbpAppHeaderCss = ":root{--cbp-app-header-color-background:var(--cbp-color-white);--cbp-app-header-color-background-dark:var(--cbp-color-base-neutral-dark)}[data-cbp-theme=dark] cbp-app-header{--cbp-app-header-color-background:var(--cbp-app-header-color-background-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:block}cbp-app-header nav{display:flex;align-items:center;align-content:stretch;width:max-content}cbp-app-header .cbp-app-header-responsive{align-items:center;justify-content:space-between;width:100%}";
const CbpAppHeaderStyle0 = cbpAppHeaderCss;
const CbpAppHeader = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
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="${store.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]');
store.state.currentPage = store.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) != store.state.currentParent) {
this.updateCurrentItem(store.state.currentParent);
}
return (index.h(index.Host, { key: '69e88dd7b2a379d3cfec0043f4819302a49a647f' }, index.h("cbp-resize-observer", { key: '84d23e848dd441a45b364cd73c63841281f4b03f', onResized: utils.debounce((e) => {
this.handleResize(e.detail.width);
}, 10) }, index.h("nav", { key: '8f6c9c58458bdc1b3141990f111e82037596984c', "aria-label": "Primary Navigation", ref: el => this.nav = el }, index.h("slot", { key: 'af0d5f964e716d4fe8bfdff5a177b772f043a74f', name: "cbp-home" }), index.h("slot", { key: '8fb6a545ef56d6b1bdb4891e8344a28659035d61' }), (this.navItems.length > 1) &&
index.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" }, index.h("cbp-icon", { key: '6fc91d82cc1acbc3176a492299fe6824409eebda', name: "bars" }))))));
}
get host() { return index.getElement(this); }
};
CbpAppHeader.style = CbpAppHeaderStyle0;
exports.cbp_app_header = CbpAppHeader;
//# sourceMappingURL=cbp-app-header.cjs.entry.js.map