@deviceinsight/ng-ui-components 6.18.0-SNAPSHOT

package/lib/esm/components/treeview/TreeView.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Tree, NodeId, DataSetConfig, SelectionItem } from './types';
+export declare type Props = {
+    /** Configuration of keys for id, name, children, node/leaf images and lazy loading */
+    dataSetConfig: DataSetConfig;
+    /** Function executed when selecting nodes or folders */
+    onSelect: (arg0: Array<SelectionItem>) => void;
+    /** Function executed when deselecting nodes or folders */
+    onDeselect: (arg0: Array<SelectionItem>) => void;
+    /** Arbitrary hierarchical initial data set to render */
+    treeData: Array<any>;
+    /** Array of initially selected nodes in the tree */
+    selectedNodes?: Array<NodeId>;
+    /** Function to execute on a lazy loadable node */
+    lazyLoadingFunction?: (nodeData: any) => Promise<any>;
+};
+declare type State = {
+    tree: Tree;
+    treeData: Array<any>;
+    selectedNodes: Array<NodeId>;
+    treeSize: number;
+};
+/**
+ * TreeView adds the functionality to display "folders" and their content.
+ * This can come in handy for several data structures.
+ */
+export default class TreeView extends React.Component<Props, State> {
+    state: State;
+    convert: (hierarchicalData: Array<any>, nodePath?: string) => Array<Tree>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    initTree(treeData: Array<any>): {
+        children?: Array<Tree>;
+        closedImage?: string;
+        expandedImage?: string;
+        id: string;
+        image?: string;
+        lazyLoadable?: boolean;
+        name: string;
+        originalNode: any;
+        path: string;
+    };
+    selectNodes: (nodes: Array<Tree>) => void;
+    deselectNodes: (nodes: Array<Tree>) => void;
+    addTreeData: (dataSet: Array<any>, underNode: Tree) => void;
+    lazyLoadingFunction: (node: Tree) => Promise<void>;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=TreeView.d.ts.map

package/lib/esm/components/treeview/TreeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../../src/components/treeview/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAInE,oBAAY,KAAK,GAAG;IACnB,sFAAsF;IACtF,aAAa,EAAE,aAAa,CAAC;IAE7B,wDAAwD;IACxD,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAE/C,0DAA0D;IAC1D,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAEjD,wDAAwD;IACxD,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB,oDAAoD;IACpD,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE9B,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CACtD,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACrB,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAClE,KAAK,EAAE,KAAK,CAWV;IAEF,OAAO,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,IAAI,CAAC,CAA2C;IAEpH,iBAAiB;IAUjB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IAWnC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG;QAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,GAAG,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;KACb;IAUD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAUvC;IAEF,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAUzC;IAEF,WAAW,YAAa,MAAM,GAAG,CAAC,aAAa,IAAI,UAoBjD;IAEF,mBAAmB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAUhD;IAEF,MAAM;CAmBN"}

package/lib/esm/components/treeview/TreeView.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Node from './components/Node';
+import { convertToTree, mergeNodeIdArrays, removeNodeIds, getTreeSize, findNodeAndApplyPatch } from './treeutils';
+/**
+ * TreeView adds the functionality to display "folders" and their content.
+ * This can come in handy for several data structures.
+ */
+export default class TreeView extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            treeData: this.props.treeData,
+            tree: {
+                id: 'virtualRootNode',
+                name: '',
+                children: [],
+                path: '/',
+                originalNode: {}
+            },
+            treeSize: 0,
+            selectedNodes: this.props.selectedNodes || []
+        };
+        this.convert = convertToTree(this.props.dataSetConfig);
+        this.selectNodes = (nodes) => {
+            const { onSelect } = this.props;
+            const { selectedNodes } = this.state;
+            this.setState({
+                selectedNodes: mergeNodeIdArrays(selectedNodes, nodes.map(({ id }) => id))
+            });
+            onSelect(nodes.map(({ originalNode, path }) => ({ ...originalNode, $$path: path })));
+        };
+        this.deselectNodes = (nodes) => {
+            const { onDeselect } = this.props;
+            const { selectedNodes } = this.state;
+            this.setState({
+                selectedNodes: removeNodeIds(selectedNodes, nodes.map(({ id }) => id))
+            });
+            onDeselect(nodes.map(({ originalNode, path }) => ({ ...originalNode, $$path: path })));
+        };
+        this.addTreeData = (dataSet, underNode) => {
+            const { tree } = this.state;
+            const subTree = this.convert(dataSet, underNode.path);
+            const newTree = {
+                id: 'virtualRootNode',
+                name: '',
+                children: (tree.children || []).map((rootNode) => findNodeAndApplyPatch(rootNode, underNode.id, {
+                    lazyLoadable: false,
+                    children: subTree
+                })),
+                path: '/',
+                originalNode: {}
+            };
+            const newTreeSize = getTreeSize(newTree);
+            this.setState({
+                tree: newTree,
+                treeSize: newTreeSize
+            });
+        };
+        this.lazyLoadingFunction = (node) => {
+            const { lazyLoadingFunction } = this.props;
+            if (!lazyLoadingFunction)
+                return Promise.resolve();
+            return lazyLoadingFunction(node.originalNode)
+                .then((dataSet) => {
+                this.addTreeData(dataSet, node);
+            })
+                .catch(() => {
+                return Promise.resolve();
+            });
+        };
+    }
+    componentDidMount() {
+        const { treeData } = this.props;
+        const tree = this.initTree(treeData);
+        const treeSize = getTreeSize(tree);
+        this.setState({
+            tree,
+            treeSize
+        });
+    }
+    componentDidUpdate(prevProps) {
+        const { selectedNodes: prevNodes } = prevProps;
+        const { selectedNodes } = this.props;
+        if (selectedNodes && prevNodes && prevNodes.length !== selectedNodes.length) {
+            this.setState({
+                selectedNodes
+            });
+        }
+    }
+    initTree(treeData) {
+        return {
+            id: 'virtualRootNode',
+            name: '',
+            children: this.convert(treeData),
+            path: '/',
+            originalNode: {}
+        };
+    }
+    render() {
+        const { tree, selectedNodes, treeSize } = this.state;
+        return (React.createElement("div", { className: "treeview" }, tree.children &&
+            tree.children.map((item, i) => (React.createElement(Node, { key: i, node: item, selectedNodes: selectedNodes, selectNodes: this.selectNodes, deselectNodes: this.deselectNodes, treeSize: treeSize, lazyLoadingFunction: this.lazyLoadingFunction })))));
+    }
+}

package/lib/esm/components/treeview/components/Node.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { SelectionState } from '../constants';
+import { NodeId, Tree } from '../types';
+declare type Props = {
+    selectedNodes: Array<NodeId>;
+    node: Tree;
+    isLastChild?: boolean;
+    treeSize: number;
+    selectNodes: (ids: Array<Tree>) => void;
+    deselectNodes: (ids: Array<Tree>) => void;
+    lazyLoadingFunction: (node: Tree) => Promise<any>;
+};
+declare type State = {
+    expanded: boolean;
+    selectionState: SelectionState;
+    isLoading: boolean;
+};
+export default class Node extends React.Component<Props, State> {
+    state: State;
+    /**
+     * Update folder nodes only if the selection changed, or expanded changed
+     * Update leaf nodes only if the previously selected nodes include this leaf and the currently
+     * selected nodes do not include this leaf, and vice versa.
+     * @param {Props} prevProps
+     * @param {State} prevState
+     */
+    shouldComponentUpdate(prevProps: Props, prevState: State): boolean;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    isLeaf(): boolean;
+    getSelectionState(): SelectionState;
+    toggleExpand: () => void;
+    onSelect: (toggled: boolean) => void;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Node.d.ts.map

package/lib/esm/components/treeview/components/Node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../../src/components/treeview/components/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,UAAU,CAAC;AAEtC,aAAK,KAAK,GAAG;IACZ,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,mBAAmB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAClD,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,cAAc,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC9D,KAAK,EAAE,KAAK,CAIV;IAEF;;;;;;OAMG;IACH,qBAAqB,CAAC,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,GAAG,OAAO;IAsBlE,iBAAiB;IAMjB,kBAAkB;IAMlB,MAAM,IAAI,OAAO;IAKjB,iBAAiB;IAoBjB,YAAY,EAAE,MAAM,IAAI,CAsBtB;IACF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAUlC;IAEF,MAAM;CA6BN"}

package/lib/esm/components/treeview/components/Node.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import NodeInfo from './NodeInfo';
+import { SelectionState } from '../constants';
+import { getAllLeafIds, getAllLeaves, intersectArrays } from '../treeutils';
+export default class Node extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            expanded: false,
+            selectionState: this.getSelectionState(),
+            isLoading: false
+        };
+        // handle this the same way as selection?
+        this.toggleExpand = () => {
+            const { node, lazyLoadingFunction } = this.props;
+            if (node.lazyLoadable) {
+                this.setState({
+                    isLoading: true
+                }, () => {
+                    lazyLoadingFunction(node).then(() => this.setState({
+                        expanded: true,
+                        isLoading: false
+                    }));
+                });
+            }
+            else {
+                this.setState({
+                    expanded: !this.state.expanded
+                });
+            }
+        };
+        this.onSelect = (toggled) => {
+            const { node, selectNodes, deselectNodes, selectedNodes } = this.props;
+            if (toggled) {
+                const childNodes = getAllLeaves(node).filter((node) => !selectedNodes.includes(node.id));
+                selectNodes(childNodes);
+            }
+            else {
+                const childNodes = getAllLeaves(node).filter((node) => selectedNodes.includes(node.id));
+                deselectNodes(childNodes);
+            }
+        };
+    }
+    /**
+     * Update folder nodes only if the selection changed, or expanded changed
+     * Update leaf nodes only if the previously selected nodes include this leaf and the currently
+     * selected nodes do not include this leaf, and vice versa.
+     * @param {Props} prevProps
+     * @param {State} prevState
+     */
+    shouldComponentUpdate(prevProps, prevState) {
+        const { selectedNodes: prevSelectedNodes, treeSize: prevTreeSize } = prevProps;
+        const { expanded: prevExpanded, selectionState: prevSelectionState, isLoading: prevIsLoading } = prevState;
+        const { selectedNodes, node, treeSize } = this.props;
+        const { expanded, selectionState, isLoading } = this.state;
+        if (prevIsLoading !== isLoading)
+            return true;
+        if (prevTreeSize !== treeSize)
+            return true;
+        if (this.isLeaf()) {
+            const selectionChangedForLeaf = (prevSelectedNodes.includes(node.id) && !selectedNodes.includes(node.id)) ||
+                (!prevSelectedNodes.includes(node.id) && selectedNodes.includes(node.id));
+            return selectionChangedForLeaf || prevSelectionState !== selectionState;
+        }
+        else {
+            return (prevSelectedNodes.length !== selectedNodes.length ||
+                prevExpanded !== expanded ||
+                prevSelectionState !== selectionState);
+        }
+    }
+    componentDidMount() {
+        this.setState({
+            selectionState: this.getSelectionState()
+        });
+    }
+    componentDidUpdate() {
+        this.setState({
+            selectionState: this.getSelectionState()
+        });
+    }
+    isLeaf() {
+        const { node } = this.props;
+        return node.children === undefined;
+    }
+    getSelectionState() {
+        const { node, selectedNodes } = this.props;
+        if (this.isLeaf()) {
+            return selectedNodes.includes(node.id) ? SelectionState.ALL : SelectionState.NONE;
+        }
+        else {
+            const leafIds = getAllLeafIds(node);
+            const intersection = intersectArrays(leafIds, selectedNodes);
+            if (intersection.length === leafIds.length && leafIds.length !== 0) {
+                return SelectionState.ALL;
+            }
+            else if (intersection.length === 0) {
+                return SelectionState.NONE;
+            }
+            return SelectionState.SOME;
+        }
+    }
+    render() {
+        const { node, isLastChild, ...commonNodeProps } = this.props;
+        const { expanded, selectionState, isLoading } = this.state;
+        return (React.createElement("div", { className: "node" },
+            React.createElement(NodeInfo, { node: node, displayName: node.name, leafNode: this.isLeaf(), expanded: expanded, isLastChild: isLastChild, onExpand: this.toggleExpand, onSelect: this.onSelect, isLoading: isLoading, selectionState: selectionState }),
+            expanded &&
+                node.children &&
+                node.children.map((childNode, i) => (React.createElement(Node, { ...commonNodeProps, key: i, node: childNode, isLastChild: i === (node.children || []).length - 1 })))));
+    }
+}

package/lib/esm/components/treeview/components/NodeInfo.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { SelectionState } from '../constants';
+import { Tree } from '../types';
+declare type NodeInfoProps = {
+    node: Tree;
+    displayName: string;
+    leafNode: boolean;
+    expanded: boolean;
+    isLastChild?: boolean;
+    selectionState: SelectionState;
+    isLoading: boolean;
+    onExpand: () => void;
+    onSelect: (toggled: boolean) => void;
+};
+export default class NodeInfo extends React.PureComponent<NodeInfoProps> {
+    inputRef: HTMLInputElement | null | undefined;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    updateSelectionState(): void;
+    onSelect: (event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onLabelClick: () => void;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=NodeInfo.d.ts.map

package/lib/esm/components/treeview/components/NodeInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeInfo.d.ts","sourceRoot":"","sources":["../../../../../src/components/treeview/components/NodeInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAU9B,aAAK,aAAa,GAAG;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,cAAc,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AAoCF,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IACvE,QAAQ,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAE9C,iBAAiB;IAIjB,kBAAkB;IAIlB,oBAAoB;IAQpB,QAAQ,UAAW,MAAM,cAAc,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAG9D;IAEF,YAAY,QAAO,IAAI,CAGrB;IAEF,MAAM;CAkCN"}

package/lib/esm/components/treeview/components/NodeInfo.js

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import defaultIconFolderOpen from '../../../assets/img/icon_folder_open.png';
+import defaultIconFolderClosed from '../../../assets/img/icon_folder_closed.png';
+import defaultIconFolderLoading from '../../../assets/svg/icon_folder_loading.svg';
+import defaultIconLeafNode from '../../../assets/img/icon_variablenode.png';
+import { SelectionState } from '../constants';
+const Skeleton = ({ lastChild }) => (React.createElement("div", { className: "skeleton" },
+    React.createElement("div", { className: "skeleton-cell top" }),
+    React.createElement("div", { className: "skeleton-cell bottom", style: {
+            visibility: lastChild ? 'hidden' : 'initial'
+        } })));
+const NodeImage = ({ node, leafNode, expanded, isLoading, onExpand }) => {
+    let imageSrc;
+    if (leafNode) {
+        imageSrc = node.image || defaultIconLeafNode;
+    }
+    else {
+        if (isLoading) {
+            imageSrc = defaultIconFolderLoading;
+        }
+        else if (expanded) {
+            imageSrc = node.expandedImage || defaultIconFolderOpen;
+        }
+        else {
+            imageSrc = node.closedImage || defaultIconFolderClosed;
+        }
+    }
+    return (React.createElement("div", { className: "icon-container" },
+        React.createElement("img", { src: imageSrc, alt: "node", onClick: onExpand })));
+};
+export default class NodeInfo extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.onSelect = (event) => {
+            const { onSelect, selectionState } = this.props;
+            onSelect(selectionState === SelectionState.SOME ? false : event.currentTarget.checked);
+        };
+        this.onLabelClick = () => {
+            const { onSelect, selectionState } = this.props;
+            onSelect(selectionState === SelectionState.SOME ? false : this.inputRef ? !this.inputRef.checked : false);
+        };
+    }
+    componentDidMount() {
+        this.updateSelectionState();
+    }
+    componentDidUpdate() {
+        this.updateSelectionState();
+    }
+    updateSelectionState() {
+        const { selectionState } = this.props;
+        if (this.inputRef) {
+            this.inputRef.indeterminate = selectionState === SelectionState.SOME;
+        }
+    }
+    render() {
+        const { node, node: { name }, leafNode, expanded, isLastChild, onExpand, selectionState, isLoading } = this.props;
+        const selected = selectionState === SelectionState.ALL;
+        return (React.createElement("div", { className: `node-info ${selected ? 'selected' : ''}` },
+            isLastChild !== undefined && React.createElement(Skeleton, { lastChild: isLastChild }),
+            React.createElement(NodeImage, { node: node, leafNode: leafNode, expanded: expanded, isLoading: isLoading, onExpand: onExpand }),
+            React.createElement("input", { ref: (ref) => (this.inputRef = ref), type: "checkbox", checked: selectionState === SelectionState.ALL, onChange: this.onSelect }),
+            React.createElement("div", { className: "name", onClick: this.onLabelClick }, name)));
+    }
+}

package/lib/esm/components/treeview/constants.d.ts

@@ -0,0 +1,6 @@
+export declare enum SelectionState {
+    ALL = "all",
+    SOME = "some",
+    NONE = "none"
+}
+//# sourceMappingURL=constants.d.ts.map

package/lib/esm/components/treeview/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/treeview/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,cAAc;IACzB,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;CACb"}

package/lib/esm/components/treeview/constants.js

@@ -0,0 +1,6 @@
+export var SelectionState;
+(function (SelectionState) {
+    SelectionState["ALL"] = "all";
+    SelectionState["SOME"] = "some";
+    SelectionState["NONE"] = "none";
+})(SelectionState || (SelectionState = {}));

package/lib/esm/components/treeview/treeutils.d.ts

@@ -0,0 +1,59 @@
+import { Tree, NodeId, DataSetConfig } from './types';
+export declare function removeDuplicatesFromArray<T>(arr: Array<T>): Array<T>;
+export declare function removeNodeIds(nodeIds: Array<NodeId>, nodeIdsToRemove: Array<NodeId>): Array<NodeId>;
+/**
+ * Returns the union of two arrays. Examples
+ * [1,2,3] u [2,3,4,5] -> [1,2,3,4,5]
+ * @param {Array<NodeId>} nodeIds1 An array of string or integers defining the nodeid
+ * @param {Array<NodeId>} nodeIds2 An array of string or integers defining the nodeid
+ */
+export declare function mergeNodeIdArrays(nodeIds1: Array<NodeId>, nodeIds2: Array<NodeId>): Array<NodeId>;
+/**
+ * Returns the intersection of two arrays. Example
+ * [1,2,3] n [2,3,4,5] -> [2,3]
+ * @param {Array} array1
+ * @param {Array} array2
+ */
+export declare function intersectArrays<T>(array1: Array<T>, array2: Array<T>): Array<T>;
+/**
+ * Returns the count of all leaves in the tree @node
+ * @param {Tree} node tree to calculate the treesize for
+ */
+export declare function getTreeSize(node: Tree): number;
+/**
+ * Returns the leaves of the tree given by @node
+ * @param {Tree} node The root node of the tree that should be processed
+ */
+export declare function getAllLeaves(node: Tree): Array<Tree>;
+/**
+ * Returns the ids of all leaves of the tree given by @node
+ * @param {Tree} node The root node of the tree that should be processed
+ */
+export declare function getAllLeafIds(node: Tree): Array<NodeId>;
+/**
+ * Returns a function that converts an arbitrary hierarchical tree data structure into a treestructure
+ * that is processable by the * @Node component. The properties defined in @childNodeKey , @idKey ,
+ * @displayNameKey , @typeKey are injected into the returned function @convert . The @convert function
+ * returns a new tree of the same structure of smaller size with different parameters.
+ *
+ * @param {string} childNodeKey The name of the property that holds child nodes
+ * @param {string} idKey The name of the property of the node identifier
+ * @param {string} displayNameKey The name of the property of the node's name
+ * @param {string} typeKey The name of the property to decide if it is a leaf or a "folder" node
+ * @param {string} lazyLoadableKey
+ * @param {ExpandableNode} nodeMetaData An object containing the value for the node's property @typeKey as well as image paths
+ * @param {Leaf} leafMetaData An object containing the value for the node's property @typeKey as well as image paths
+ */
+export declare function convertToTree<T>({ childNodeKey, idKey, displayNameKey, typeKey, lazyLoadableKey, nodeMetaData, leafMetaData }: DataSetConfig): (hierarchicalData: Array<any>, nodePath?: string) => Array<Tree>;
+/**
+ * Find the node with @nodeId in the tree @node and replace properties defined in the provided @patch .
+ * If the node with id @nodeId is not found the tree is returned with the same structure.
+ * In any case (@nodeId is found or not found) a new object is created and returned, containing the resulting tree.
+ *
+ * @param {Tree} node The initial tree to add children on
+ * @param {NodeId} nodeId The specific node id of the node to add the children
+ * @param {Array<Tree>} patch An object containing Tree properties to change on the node with id @nodeId
+ */
+export declare function findNodeAndApplyPatch(node: Tree, nodeId: NodeId, patch: Partial<Tree>): Tree;
+export declare function getTreeNodePathById(currentNode: any, idToFind: string, idKey: string, childNodeKey: string, displayNameKey: string): null | string;
+//# sourceMappingURL=treeutils.d.ts.map

package/lib/esm/components/treeview/treeutils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeutils.d.ts","sourceRoot":"","sources":["../../../../src/components/treeview/treeutils.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAEpD,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAEpE;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAEnG;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAEjG;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAE/E;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAO9C;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAMpD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAEvD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAChC,YAAY,EACZ,KAAK,EACL,cAAc,EACd,OAAO,EACP,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,EAAE,aAAa,GAAG,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,IAAI,CAAC,CAsClF;AAqBD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAU5F;AA+BD,wBAAgB,mBAAmB,CAClC,WAAW,EAAE,GAAG,EAChB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,GACpB,IAAI,GAAG,MAAM,CAGf"}

package/lib/esm/components/treeview/treeutils.js

@@ -0,0 +1,158 @@
+export function removeDuplicatesFromArray(arr) {
+    return arr.filter((id, index, arr) => arr.indexOf(id) === index);
+}
+export function removeNodeIds(nodeIds, nodeIdsToRemove) {
+    return nodeIds.filter((id) => !nodeIdsToRemove.includes(id));
+}
+/**
+ * Returns the union of two arrays. Examples
+ * [1,2,3] u [2,3,4,5] -> [1,2,3,4,5]
+ * @param {Array<NodeId>} nodeIds1 An array of string or integers defining the nodeid
+ * @param {Array<NodeId>} nodeIds2 An array of string or integers defining the nodeid
+ */
+export function mergeNodeIdArrays(nodeIds1, nodeIds2) {
+    return removeDuplicatesFromArray([...nodeIds1, ...nodeIds2]);
+}
+/**
+ * Returns the intersection of two arrays. Example
+ * [1,2,3] n [2,3,4,5] -> [2,3]
+ * @param {Array} array1
+ * @param {Array} array2
+ */
+export function intersectArrays(array1, array2) {
+    return array1.filter((value) => array2.includes(value));
+}
+/**
+ * Returns the count of all leaves in the tree @node
+ * @param {Tree} node tree to calculate the treesize for
+ */
+export function getTreeSize(node) {
+    if (node.children) {
+        const numberOfChildren = node.children.length;
+        return numberOfChildren + node.children.reduce((l, child) => l + getTreeSize(child), 0);
+    }
+    return 0;
+}
+/**
+ * Returns the leaves of the tree given by @node
+ * @param {Tree} node The root node of the tree that should be processed
+ */
+export function getAllLeaves(node) {
+    if (node.children) {
+        return node.children.reduce((childNodes, child) => [...childNodes, ...getAllLeaves(child)], []);
+    }
+    return [node];
+}
+/**
+ * Returns the ids of all leaves of the tree given by @node
+ * @param {Tree} node The root node of the tree that should be processed
+ */
+export function getAllLeafIds(node) {
+    return getAllLeaves(node).map((node) => node.id);
+}
+/**
+ * Returns a function that converts an arbitrary hierarchical tree data structure into a treestructure
+ * that is processable by the * @Node component. The properties defined in @childNodeKey , @idKey ,
+ * @displayNameKey , @typeKey are injected into the returned function @convert . The @convert function
+ * returns a new tree of the same structure of smaller size with different parameters.
+ *
+ * @param {string} childNodeKey The name of the property that holds child nodes
+ * @param {string} idKey The name of the property of the node identifier
+ * @param {string} displayNameKey The name of the property of the node's name
+ * @param {string} typeKey The name of the property to decide if it is a leaf or a "folder" node
+ * @param {string} lazyLoadableKey
+ * @param {ExpandableNode} nodeMetaData An object containing the value for the node's property @typeKey as well as image paths
+ * @param {Leaf} leafMetaData An object containing the value for the node's property @typeKey as well as image paths
+ */
+export function convertToTree({ childNodeKey, idKey, displayNameKey, typeKey, lazyLoadableKey, nodeMetaData, leafMetaData }) {
+    const { typeValue: leafTypeValue, image, resolver: leafResolver } = leafMetaData;
+    const { typeValue: nodeTypeValue, expandedImage, closedImage, resolver: nodeResolver } = nodeMetaData;
+    return function convert(hierarchicalData, nodePath = '') {
+        return hierarchicalData.map((rootNode) => {
+            const id = rootNode[idKey];
+            const name = rootNode[displayNameKey];
+            const children = rootNode[childNodeKey];
+            const lazyLoadable = rootNode[lazyLoadableKey];
+            const isNode = nodeResolver ? nodeResolver(rootNode) : rootNode[typeKey] === nodeTypeValue;
+            const isLeaf = leafResolver ? leafResolver(rootNode) : rootNode[typeKey] === leafTypeValue;
+            const path = `${nodePath}/${name}`;
+            const originalNode = rootNode;
+            if (isNode) {
+                return {
+                    id,
+                    name,
+                    children: convert(children || [], path),
+                    lazyLoadable,
+                    expandedImage,
+                    closedImage,
+                    path,
+                    originalNode
+                };
+            }
+            else if (isLeaf) {
+                return {
+                    id,
+                    name,
+                    image,
+                    path,
+                    originalNode
+                };
+            }
+            throw new Error('unknown node or leaf type provided');
+        });
+    };
+}
+/**
+ * Merges the properties of @node with the properties of @patch .
+ * @param {Tree} node The single node to apply the patch against
+ * @param {Tree} patch An object holding new properties and additional children for the node
+ */
+function patchNode(node, patch) {
+    let patchedChildren;
+    if (patch.children !== undefined) {
+        if (node.children !== undefined) {
+            patchedChildren = [...node.children, ...patch.children];
+        }
+        else {
+            patchedChildren = [...patch.children];
+        }
+    }
+    return { ...node, ...patch, children: patchedChildren || undefined };
+}
+/**
+ * Find the node with @nodeId in the tree @node and replace properties defined in the provided @patch .
+ * If the node with id @nodeId is not found the tree is returned with the same structure.
+ * In any case (@nodeId is found or not found) a new object is created and returned, containing the resulting tree.
+ *
+ * @param {Tree} node The initial tree to add children on
+ * @param {NodeId} nodeId The specific node id of the node to add the children
+ * @param {Array<Tree>} patch An object containing Tree properties to change on the node with id @nodeId
+ */
+export function findNodeAndApplyPatch(node, nodeId, patch) {
+    if (node.children === undefined) {
+        return node;
+    }
+    if (node.id === nodeId) {
+        return patchNode(node, patch);
+    }
+    return { ...node, children: node.children.map((childNode) => findNodeAndApplyPatch(childNode, nodeId, patch)) };
+}
+function getTreeNodePathByIdArray(currentNode, idToFind, idKey, childNodeKey, displayNameKey) {
+    if (currentNode[idKey] === idToFind) {
+        return [currentNode[displayNameKey]];
+    }
+    else if (currentNode[childNodeKey]) {
+        for (let i = 0; i < currentNode[childNodeKey].length; i++) {
+            const path = getTreeNodePathByIdArray(currentNode[childNodeKey][i], idToFind, idKey, childNodeKey, displayNameKey);
+            if (path) {
+                path.unshift(currentNode[displayNameKey]);
+                return path;
+            }
+        }
+    }
+    return null;
+}
+export function getTreeNodePathById(currentNode, idToFind, idKey, childNodeKey, displayNameKey) {
+    const nodePathArray = getTreeNodePathByIdArray(currentNode, idToFind, idKey, childNodeKey, displayNameKey);
+    return nodePathArray ? nodePathArray.join('.') : null;
+}