actindo-tree.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-spinner/paper-spinner-lite.html">
<link rel="import" href="actindo-tree-node.html">
<link rel="import" href="actindo-tree-icons.html">
<link rel="import" href="actindo-tree-behavior.html">
<link rel="import" href="actindo-loadable.html">
<!--
`<paper-tree>` display a browsable tree of nodes (`<paper-tree-node>`) with expandable/collapsible capabilities and actions menu for each node.
Example:
    <paper-tree></paper-tree>
@demo
-->

<dom-module id="actindo-tree">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <actindo-loadable loading="[[_loading]]">
            <template is="dom-repeat" items="{{items}}" as="item">
               <actindo-tree-node
                   on-select="_setSelectNode"
                   id="root"
                   item="[[item]]"
                   value-field="[[valueField]]"
                   display-field="[[displayField]]"
                   show-default-icon="[[showDefaultIcon]]"
                   selected-items="[[selectedItems]]"
                   leaves-selectable-only="[[leavesSelectableOnly]]"
                   flatten-items="[[flattenItems]]"
                   selected-nodes="{{selectedNodes}}"
                   allow-deselect="[[allowDeselect]]"
                   disabled="[[disabled]]"
               >
               </actindo-tree-node>
           </template>
        </actindo-loadable>
    </template>

    <script>
        class ActindoTree extends ActindoTreeMixin(Polymer.Element) {
            static get is()
            {
                return 'actindo-tree';
            }

            static get properties()
            {
                return Object.assign({}, super.properties, {
                    /**
                     * if selectionMode=single, this property contains the selected item if one is selected
                     */
                    selectedItem: {
                        type: Object,
                        computed: '_getSelSelectedItem(selectedItems.*)',
                        notify: true
                    },
                    selectedNode: {
                        type: Node,
                        computed: '_getSelSelectedNode(selectedNodes.*)'
                    },
                    allowDeselect: {
                        type: Boolean,
                        value: false
                    },
                    /**
                     * The name of this element.
                     */
                    name: {
                        type: String
                    }
                });
            }

            static get observers()
            {
                return [
                   '_init(items)'
                ]
            }

            _getSelSelectedItem(selectedItems)
            {
                selectedItems = selectedItems.base;
                if (selectedItems && selectedItems.length)
                {
                    return selectedItems[0];
                }
                return null;
            }

            _getSelSelectedNode(selectedNodes)
            {
                selectedNodes = selectedNodes.base;
                if (selectedNodes && selectedNodes.length)
                {
                    return selectedNodes[0];
                }
                return null;
            }

            /**
             * Called when the `select` event is fired from an internal node.
             *
             * @param {object} e An event object.
             */
            _setSelectNode(e)
            {
                this._updateTreeValue(this.selectedNodes);
            }
        }
        window.customElements.define(ActindoTree.is, ActindoTree);
    </script>

</dom-module>