@cbpds/web-components
Version:
Web components for the CBP Design System.
79 lines (78 loc) • 2.7 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpMenuItem {
constructor() {
this.indentLevel = 0;
this.color = undefined;
this.host.slot = "cbp-menu-items";
}
componentWillLoad() {
setCSSProps(this.host, {
"--cpb-menu-item-indent": this.indentLevel > 0 ? `var(--cbp-space-${this.indentLevel * 2}x)` : "0px"
});
}
componentDidLoad() {
var _a, _b;
this.menuItem = this.host.querySelector('a,button');
(_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'menuitem');
(_b = this.menuItem) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1');
}
render() {
return (h(Host, { key: 'c35b14f6f6203a5caaa41acbe9110d2347c0ca30', role: "presentation" }, h("slot", { key: '68b2cc5660e5e74be55203fce2aa653a84006303' })));
}
static get is() { return "cbp-menu-item"; }
static get originalStyleUrls() {
return {
"$": ["cbp-menu-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-menu-item.css"]
};
}
static get properties() {
return {
"indentLevel": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an indent level to represent hierarchical items. Defaults to zero."
},
"attribute": "indent-level",
"reflect": true,
"defaultValue": "0"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"danger\"",
"resolved": "\"danger\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a color variant for the menu item. Currently the only supported variant is \"danger\"."
},
"attribute": "color",
"reflect": true
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-menu-item.js.map