editroles.html

{#each perms as node}
<li class="folder {node.Granted}">
    <a on:click="event.preventDefault()"
       href="/#" 
       title={node.Description}
       id={node.RuntimeName}
       role="treeitem" 
       tabindex="0" 
       aria-selected="true" 
       aria-level="0" aria-posinset="1" aria-setsize="13" class="hide-focus">
        <svg class="icon-tree icon" focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="{node.children ? '#icon-closed-folder' : '#icon-tree-node'}"></use>
        </svg>
        <span class="tree-checkbox"></span>
        <span class="tree-text">{node.Name}</span>
    </a>
    {#if node.children}
        <ul class="folder" role="group">
            <svelte:self node='{node.children}' />
        </ul>
    {/if}
</li>
{/each}


Shape of data like this:

var data = {
            perms: [
                {
                    Id: 'Decision.Decision',
                    Name: 'Decision for Property Management',
                    RuntimeName: 'Decision.Decision',
                    Description: 'User can access decision for Property Management',
                    Granted: '',
                    children: [],
                },
                {
                    Id: 'DecisionJC.Decision',
                    Name: 'Decision for Construction Management',
                    RuntimeName: 'DecisionJC.Decision',
                    Description: 'User can access decision for Construction Management',
                    Granted: 'is-selected',
                    children: [{
                        Id: 'DecisionJC.Decision.Child',
                        Name: 'Decision Child for Construction Management',
                        RuntimeName: 'DecisionJC.Decision.Child',
                        Description: 'User can access decision child for Construction Management',
                        Granted: '',
                    },
                    ],
                },
            ]
        };