mwcpl
Version:
Master's Web Component Pattern Library
83 lines (82 loc) • 2.75 kB
JavaScript
import { Component, h, Host, Prop, Element, State } from '@stencil/core';
export class MwcplTreeViewItem {
constructor() {
/**
* Helper variable which indicates if this tree view item
* has any children
*/
this.hasChildren = false;
}
componentDidLoad() {
this.hasChildren = this.element.shadowRoot.querySelector('slot').assignedNodes().length > 0;
if (this.open && !this.hasChildren) {
this.open = false;
}
}
render() {
return (h(Host, null,
h("li", null,
h("div", { onClick: () => this.toggle() },
this.hasChildren ?
(h("svg", { class: this.open ? '' : 'collapsed', focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" },
h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))
:
h("svg", { viewBox: "0 0 24 24" }),
h("span", null, this.label)),
h("ul", null,
h("slot", null)))));
}
toggle() {
if (this.hasChildren) {
this.open = !this.open;
}
}
static get is() { return "mwcpl-tree-view-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["mwcpl-tree-view-item.scss"]
}; }
static get styleUrls() { return {
"$": ["mwcpl-tree-view-item.css"]
}; }
static get properties() { return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label of the tree view item."
},
"attribute": "label",
"reflect": false
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Shows children tree view item(s)."
},
"attribute": "open",
"reflect": true
}
}; }
static get states() { return {
"hasChildren": {}
}; }
static get elementRef() { return "element"; }
}