hc-tree-view/hc-tree-view.html at master · Hackception/hc-tree-view · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="hc-nested-list.html">
<link rel="import" href="hc-tree-node.html">
<link rel="import" href="hc-tree-view-behavior.html">

<!--
`hc-tree-view` an optimized tree-view based on a flat data structure.

### Styling
Custom property | Description | Default
----------------|-------------|----------

@demo demo/index.html
-->

<dom-module id="hc-tree-view">
  <template>
    <style>
      :host {
        display: block;

        @apply --hc-tree-view;
      }
      #list {
        @apply --hc-tree-view-list;
      }
      .item {
        @apply --hc-tree-view-item;
      }
    </style>

    <hc-nested-list
      id="list"
      items="[[items]]"
      parts="{{_parts}}"
      item-id-name="[[itemIdName]]"
      item-parent-id-name="[[itemParentIdName]]"
      >
      <template>
        <hc-tree-node
          class="item"
          item="[[item]]"
        ></hc-tree-node>
      </template>
    </hc-nested-list>
  </template>

  <script>
    Polymer({
      /* global hc */
      is: 'hc-tree-view',
      behaviors: [hc.TreeViewBehavior]
    });
  </script>
</dom-module>