@cbpds/web-components
Version:
Web components for the CBP Design System.
141 lines (140 loc) • 4.51 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
import state from "../cbp-app-header/store";
export class CbpNavItem {
constructor() {
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' })));
}
static get is() { return "cbp-nav-item"; }
static get originalStyleUrls() {
return {
"$": ["cbp-nav-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-nav-item.css"]
};
}
static get properties() {
return {
"current": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether this is the Nav Item that represents the current page. Only one item per set should be marked as current."
},
"attribute": "current",
"reflect": true
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a name used to associated Nav Items with Subnav Items."
},
"attribute": "name",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object."
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "navItemClick",
"name": "navItemClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "selected",
"methodName": "doSelected"
}];
}
}
//# sourceMappingURL=cbp-nav-item.js.map