# Tree Visualisation

This document describes the required functionality for the tree visualistion component.

## Component 
This must be a standard web component that extends HierarchicalBase.
The component must be able to show grouped and leaf items. The tree component should use a standard
ul and li pair to represent the data. Each item in the tree must be able 
to have its own template on how the content should be represented. 

## Usage
The component should be consumed in the following way:

```html
<pragma-tree>
    <ul>
        <li> 
            Assets
            <ul>
                <li>
                    <template resource="asset">
                        <div>#item.code</div>
                        <div>#item.description</div>                         
                    </template>
                </li>
            </ul> 
        </li>
        <li> 
            Cost Centres
            <ul>
                <li>
                    <template resource="costcentre">
                        <div>#item.code</div>
                        <div>#item.description</div>           
                        <div>#item.location</div>                         
                    </template>
                </li>
            </ul> 
        </li>
    </ul>
</pragma-tree>
```

## Attributes
1. __selection__ - Represents the selection mode for the tree. Can either be single or multi select
2. __selected-id__ - Represents the selected item on the tree. If single select, will contain the id otherwise the collection of all selected items
3. __id-field__: The field that respresents the id column on the model
4. __datasource__: The datasource for the component

## Features
1. Must be able to handle a flat list of data or a hierarchical data structure
2. Tree node content must be driven via a template. If not, use the default code-description template