@cbpds/web-components
Version:
Web components for the CBP Design System.
66 lines (60 loc) • 6.95 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const store = require('./store-f67f3d11.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) {
index.registerInstance(this, hostRef);
this.navItemClick = index.createEvent(this, "navItemClick", 7);
this.current = undefined;
this.name = undefined;
this.sx = {};
}
handleNavItemClick(e) {
store.state.activeItemName = this.name;
if (this.host.querySelector('a')) {
this.current = true;
store.state.currentPage = this.name;
store.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) || {};
}
utils.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 (index.h(index.Host, { key: '49eb9396a1901b90da7c9b812a56c4a4bc866f72', onClick: e => this.handleNavItemClick(e) }, index.h("slot", { key: '39b43253d9ad5c2a0b931053452c3592884dabf8' })));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"selected": ["doSelected"]
}; }
};
CbpNavItem.style = CbpNavItemStyle0;
exports.cbp_nav_item = CbpNavItem;
//# sourceMappingURL=cbp-nav-item.cjs.entry.js.map