@cbpds/web-components
Version:
Web components for the CBP Design System.
190 lines (189 loc) • 7.03 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 CbpSubNav {
constructor() {
this.subnavItems = [];
this.activeItem = null;
this.accessibilityText = 'Sub-Navigation';
this.flat = undefined;
this.store = undefined;
this.context = undefined;
this.sx = {};
}
updateActiveItem(newValue) {
const ActiveItem = this.host.querySelector(`cbp-subnav-item[name="${newValue}"]`);
this.activeItem = ActiveItem;
this.subnavItems.forEach(el => {
el.open = false;
});
if (ActiveItem)
ActiveItem.open = true;
setTimeout(() => {
ActiveItem === null || ActiveItem === void 0 ? void 0 : ActiveItem.querySelector('a').focus();
}, 101);
}
updateCurrent(newValue) {
const CurrentItem = this.host.querySelector(`cbp-subnav-item[name="${newValue}"]`);
this.currentItem = CurrentItem;
this.subnavItems.forEach(item => {
if (item == CurrentItem)
item.current = true;
else
item.current = false;
});
}
handleSubnavItemClick({ detail: { host } }) {
this.subnavItems.forEach((subnavItem) => {
if (host == subnavItem) {
if (this.store) {
const TopParent = this.findParent(subnavItem);
state.currentPage = host.name;
state.currentParent = TopParent.name;
}
}
else {
subnavItem.current = false;
}
});
}
findParent(subnavItem) {
const Parent = subnavItem.parentElement.closest('cbp-subnav-item');
if (!Parent)
return subnavItem;
else
return this.findParent(Parent);
}
componentWillLoad() {
this.subnavItems = Array.from(this.host.querySelectorAll('cbp-subnav-item'));
this.currentItem = this.host.querySelector('cbp-subnav-item[current]');
this.subnavItems.forEach(subnavItem => {
subnavItem.addEventListener('subnavItemClick', (e) => {
this.handleSubnavItemClick(e);
});
});
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
render() {
var _a, _b;
if (this.store) {
if (((_a = this.currentItem) === null || _a === void 0 ? void 0 : _a.name) != state.currentPage) {
this.updateCurrent(state.currentPage);
}
if (((_b = this.activeItem) === null || _b === void 0 ? void 0 : _b.name) != state.activeItemName) {
this.updateActiveItem(state.activeItemName);
}
}
return (h(Host, { key: '11ec6b59257413cae1709687de7f24fb6ca0522c' }, h("nav", { key: 'f9d1c7ba630d8938a70b6f594f8c47f4d195525d', "aria-label": this.accessibilityText }, h("slot", { key: '2627f9f6a71a317ed18c11f73c93139d9d9b6ee1' }))));
}
static get is() { return "cbp-subnav"; }
static get originalStyleUrls() {
return {
"$": ["cbp-subnav.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-subnav.css"]
};
}
static get properties() {
return {
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the aria-label for the `nav` landmark element rendered by the subnav."
},
"attribute": "accessibility-text",
"reflect": false,
"defaultValue": "'Sub-Navigation'"
},
"flat": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a flat display, rather than the default indented layout based on tag hierarchy."
},
"attribute": "flat",
"reflect": true
},
"store": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the Subnav pushes updates to a state store to integrate with the Application Header."
},
"attribute": "store",
"reflect": false
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"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 elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-subnav.js.map