@kelvininc/ui-components
Version:
Kelvin UI Components
258 lines (257 loc) • 9.97 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EIconName } from "../icon/icon.types";
import { ETreeItemLabelSize } from "../../types";
export class KvTreeDropdown {
constructor() {
/** (optional) Defines whether the all tree nodes is loading. */
this.loading = false;
}
getHighlightedNodes(node) {
var _a;
return ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) >= 0 ? { [node.id]: true } : {};
}
getSpotlightedNodes() {
const node = this.nodes.find(node => { var _a; return (_a = node.children) === null || _a === void 0 ? void 0 : _a.find(child => child.id === this.selectedNode); });
if (!node) {
return {};
}
return { [node.id]: true };
}
render() {
return (h(Host, { key: '9601b1526dbc08e461534b4815b944d2f664044a' }, this.nodes.map(node => (h("kv-tree", { class: { tree: true, expanded: this.expandedNodes[node.id], nochildren: !(node === null || node === void 0 ? void 0 : node.children) }, nodes: [node], loading: this.loading, selectedNode: this.selectedNode, hiddenNodes: this.hiddenNodes, expandedNodes: this.expandedNodes, spotlightedNodes: this.getSpotlightedNodes(), labelsSize: ETreeItemLabelSize.Regular, expandIcon: EIconName.Collapse, disabledNodes: this.disabledNodes, highlightedNodes: this.getHighlightedNodes(node), loadingNodes: this.loadingNodes, showTooltip: this.showTooltip, tooltipDelay: this.tooltipDelay })))));
}
static get is() { return "kv-tree-dropdown"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["tree-dropdown.scss"]
};
}
static get styleUrls() {
return {
"$": ["tree-dropdown.css"]
};
}
static get properties() {
return {
"nodes": {
"type": "unknown",
"attribute": "nodes",
"mutable": false,
"complexType": {
"original": "ITreeNodeItem[]",
"resolved": "ITreeNodeItem[]",
"references": {
"ITreeNodeItem": {
"location": "import",
"path": "../tree/tree.types",
"id": "src/components/tree/tree.types.ts::ITreeNodeItem"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "(required) The tree hierarchy items to render in this component"
},
"getter": false,
"setter": false
},
"loading": {
"type": "boolean",
"attribute": "loading",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the all tree nodes is loading."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"selectedNode": {
"type": "string",
"attribute": "selected-node",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) The currently selected node id"
},
"getter": false,
"setter": false,
"reflect": false
},
"hiddenNodes": {
"type": "unknown",
"attribute": "hidden-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is hidden."
},
"getter": false,
"setter": false
},
"expandedNodes": {
"type": "unknown",
"attribute": "expanded-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children."
},
"getter": false,
"setter": false
},
"disabledNodes": {
"type": "unknown",
"attribute": "disabled-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is disabled."
},
"getter": false,
"setter": false
},
"loadingNodes": {
"type": "unknown",
"attribute": "loading-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is loading."
},
"getter": false,
"setter": false
},
"showTooltip": {
"type": "boolean",
"attribute": "show-tooltip",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the labels should be displayed as tooltip."
},
"getter": false,
"setter": false,
"reflect": true
},
"tooltipDelay": {
"type": "number",
"attribute": "tooltip-delay",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Delay to show tooltip in milliseconds."
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
static get events() {
return [{
"method": "nodeToggleExpand",
"name": "nodeToggleExpand",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the node expand toggle is clicked"
},
"complexType": {
"original": "ITreeNodeItem",
"resolved": "ITreeNodeItem",
"references": {
"ITreeNodeItem": {
"location": "import",
"path": "../tree/tree.types",
"id": "src/components/tree/tree.types.ts::ITreeNodeItem"
}
}
}
}, {
"method": "nodeClick",
"name": "nodeClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the tree node item is clicked"
},
"complexType": {
"original": "ITreeNodeItem",
"resolved": "ITreeNodeItem",
"references": {
"ITreeNodeItem": {
"location": "import",
"path": "../tree/tree.types",
"id": "src/components/tree/tree.types.ts::ITreeNodeItem"
}
}
}
}];
}
}