@cbpds/web-components
Version:
Web components for the CBP Design System.
242 lines (241 loc) • 9.3 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, createNamespaceKey } from "../../utils/utils";
export class CbpSubnavItem {
constructor() {
this.label = undefined;
this.href = undefined;
this.uid = createNamespaceKey('cbp-subnav-item');
this.name = undefined;
this.current = false;
this.open = false;
this.context = undefined;
this.sx = {};
}
handleToggleSubnavItem(e) {
var _a;
this.open = !this.open;
this.toggleSubnavItem.emit({
host: this.host,
open: this.open,
nativeElement: (_a = this.expandButton) === null || _a === void 0 ? void 0 : _a.querySelector('button'),
nativeEvent: e
});
}
handleSubnavClick(e) {
this.current = true;
this.subnavItemClick.emit({
host: this.host,
nativeElement: this.link,
nativeEvent: e
});
}
componentWillLoad() {
this.icon = this.host.closest('cbp-subnav-item cbp-subnav-item cbp-subnav-item') ? 'caret-down' : 'chevron-right';
this.parent = !!this.host.querySelector('cbp-subnav-item');
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.link = this.host.querySelector('a');
}
render() {
return (h(Host, { key: 'be917e35b9126e8abf2607f6885a0ef70cd7854e' }, h("div", { key: '852f3c9aa1d4a2b009bda30d6f5c19f36e86b092' }, h("cbp-button", { key: '1273026d45a6b6bc0d34a8b9ede201f7de370068', id: this.uid, tag: "a", fill: "outline", color: "primary", href: this.href, "aria-current": this.current ? "page" : "false", context: this.context, onClick: e => this.handleSubnavClick(e) }, !this.host.querySelector('[slot=cbp-subnav-item-label]') && this.label, h("slot", { key: 'cfea6c9eee59c04ff5cf742ba7e425d5596d72de', name: "cbp-subnav-item-label" })), this.parent &&
h("cbp-button", { key: '7f7b8d1c7457487c599bbcb93889ec0c7dbce114', fill: "outline", color: "primary", expanded: `${this.open}`, "aria-labelledby": this.uid, context: this.context, ref: el => this.expandButton = el, onClick: e => this.handleToggleSubnavItem(e) }, h("cbp-icon", { key: 'ee34ee791d92e14c6907626f40ca531b5246f038', name: this.icon }))), this.parent &&
h("section", { key: '08ca2037e17179a13ad2c41829136d0105596c61' }, h("slot", { key: '67bb4f84caca8091b1b0c7ff2cde6c2f0d833621' }))));
}
static get is() { return "cbp-subnav-item"; }
static get originalStyleUrls() {
return {
"$": ["cbp-subnav-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-subnav-item.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the text label for the subnav item."
},
"attribute": "label",
"reflect": false
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the href for the Subnav Item anchor."
},
"attribute": "href",
"reflect": false
},
"uid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specifies a unique `ID` for the menu, used to wire up the controls and accessibility features."
},
"attribute": "uid",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-subnav-item')"
},
"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
},
"current": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the current item within the collection of Subnav Items."
},
"attribute": "current",
"reflect": true,
"defaultValue": "false"
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether a Subnav Item with nested children is expanded or collapsed. \nPrimarily used internally for user interactions."
},
"attribute": "open",
"reflect": true,
"defaultValue": "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 events() {
return [{
"method": "toggleSubnavItem",
"name": "toggleSubnavItem",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "subnavItemClick",
"name": "subnavItemClick",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-subnav-item.js.map