@cbpds/web-components
Version:
Web components for the CBP Design System.
62 lines (58 loc) • 6.89 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 { s as setCSSProps } from './utils-475ba472.js';
import { s as state } from './store-6cad20b5.js';
const cbpNavItemCss = ":root{--cbp-nav-item-color:var(--cbp-color-interactive-secondary-darker);--cbp-nav-item-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-nav-item-color-bg:transparent;--cbp-nav-item-color-border:transparent;--cbp-nav-item-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-nav-item-color-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-nav-item-color-bg-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-nav-item-color-bg-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-nav-item-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-nav-item-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-nav-item-color-focus:var(--cbp-color-text-lightest);--cbp-nav-item-color-focus-dark:var(--cbp-color-text-darkest);--cbp-nav-item-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-nav-item-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-nav-item-color-outline-focus:var(--cbp-color-white);--cbp-nav-item-color-outline-focus-dark:var(--cbp-color-black);--cbp-nav-item-color-active:var(--cbp-color-text-lightest);--cbp-nav-item-color-active-dark:var(--cbp-color-text-darkest);--cbp-nav-item-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-nav-item-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-nav-item-color-current:var(--cbp-color-interactive-active-dark);--cbp-nav-item-color-current-dark:var(--cbp-color-interactive-active-light);--cbp-nav-item-color-bg-current:transparent;--cbp-nav-item-color-border-current:var(--cbp-color-interactive-active-dark);--cbp-nav-item-color-border-current-dark:var(--cbp-color-interactive-active-light)}[data-cbp-theme=dark] cbp-nav-item:not(#fakeId){--cbp-nav-item-color:var(--cbp-nav-item-color-dark);--cbp-nav-item-color-hover:var(--cbp-nav-item-color-hover-dark);--cbp-nav-item-color-bg-hover:var(--cbp-nav-item-color-bg-hover-dark);--cbp-nav-item-color-border-hover:var(--cbp-nav-item-color-border-hover-dark);--cbp-nav-item-color-focus:var(--cbp-nav-item-color-focus-dark);--cbp-nav-item-color-bg-focus:var(--cbp-nav-item-color-bg-focus-dark);--cbp-nav-item-color-outline-focus:var(--cbp-nav-item-color-outline-focus-dark);--cbp-nav-item-color-active:var(--cbp-nav-item-color-active-dark);--cbp-nav-item-color-bg-active:var(--cbp-nav-item-color-bg-active-dark);--cbp-nav-item-color-current:var(--cbp-nav-item-color-current-dark);--cbp-nav-item-color-border-current:var(---cbp-nav-item-color-border-current-dark)}cbp-nav-item:not(#fakeId){display:inline-block}cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]){--cbp-nav-item-color:var(--cbp-nav-item-color-current);--cbp-nav-item-color-bg:var(--cbp-nav-item-color-bg-current);--cbp-nav-item-color-border:var(--cbp-nav-item-color-border-current)}cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]) button,cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]) a{font-style:italic}cbp-nav-item:not(#fakeId) button,cbp-nav-item:not(#fakeId) a{display:inline-flex;gap:var(--cbp-space-2x);align-items:center;justify-content:center;min-height:3.5rem;text-transform:unset;letter-spacing:normal;text-decoration:none;color:var(--cbp-nav-item-color);background-color:var(--cbp-nav-item-color-bg);font-size:var(--cbp-font-size-heading-xs);font-weight:var(--cbp-font-weight-medium);padding-block:calc(var(--cbp-space-5x) / 2) calc(var(--cbp-space-3x) / 2);padding-inline:var(--cbp-space-3x);border-width:0 0 var(--cbp-border-size-xl) 0;border-style:solid;border-color:var(--cbp-nav-item-color-border);border-radius:0;outline-color:var(--cbp-nav-item-color-outline-focus);outline-style:solid;outline-width:0;outline-offset:calc(-1 * var(--cbp-space-1x))}cbp-nav-item:not(#fakeId) button:hover,cbp-nav-item:not(#fakeId) a:hover{--cbp-nav-item-color:var(--cbp-nav-item-color-hover);--cbp-nav-item-color-bg:var(--cbp-nav-item-color-bg-hover);--cbp-nav-item-color-border:var(--cbp-nac-item-color-border-hover)}cbp-nav-item:not(#fakeId) button:focus,cbp-nav-item:not(#fakeId) a:focus{--cbp-nav-item-color:var(--cbp-nav-item-color-focus);--cbp-nav-item-color-bg:var(--cbp-nav-item-color-bg-focus);--cbp-nav-item-color-border:transparent;outline-width:var(--cbp-border-size-md)}cbp-nav-item:not(#fakeId) button:active,cbp-nav-item:not(#fakeId) a:active{--cbp-nav-item-color:var(--cbp-nav-item-color-active);--cbp-nav-item-color-bg:var(--cbp-nav-item-color-bg-active)}cbp-nav-item:not(#fakeId)[slot=cbp-home] a{color:var(--cbp-nav-item-color);font-size:var(--cbp-font-size-heading-md);font-weight:var(--cbp-font-weight-bold);padding-inline:var(--cbp-space-5x);margin-inline-start:calc(-1 * var(--cbp-space-5x));font-style:normal}@media (max-width: 37.5em){cbp-nav-item:not(#fakeId) [slot=cbp-home] a{font-size:var(--cbp-font-size-heading-sm)}}";
const CbpNavItemStyle0 = cbpNavItemCss;
const CbpNavItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.navItemClick = createEvent(this, "navItemClick", 7);
this.current = undefined;
this.name = undefined;
this.sx = {};
}
handleNavItemClick(e) {
state.activeItemName = this.name;
if (this.host.querySelector('a')) {
this.current = true;
state.currentPage = this.name;
state.currentParent = this.name;
this.navItemClick.emit({
host: this.host,
nativeElement: this.control,
nativeEvent: e
});
}
}
doSelected(newValue) {
if (newValue)
this.control.setAttribute('aria-current', 'page');
else
this.control.removeAttribute('aria-current');
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
var _a;
this.control = this.host.querySelector('a,button');
if (this.current)
(_a = this.control) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-current', 'page');
}
render() {
return (h(Host, { key: '49eb9396a1901b90da7c9b812a56c4a4bc866f72', onClick: e => this.handleNavItemClick(e) }, h("slot", { key: '39b43253d9ad5c2a0b931053452c3592884dabf8' })));
}
get host() { return getElement(this); }
static get watchers() { return {
"selected": ["doSelected"]
}; }
};
CbpNavItem.style = CbpNavItemStyle0;
export { CbpNavItem as cbp_nav_item };
//# sourceMappingURL=cbp-nav-item.entry.js.map