├── .eslintignore ├── .gitignore ├── src ├── index.js ├── store │ └── index.js ├── test-data.js ├── helpers │ ├── domhelpers.js │ └── clickHandlers.js ├── tree.spec.js └── Tree.svelte ├── .travis.yml ├── babel.config.js ├── jest.config.js ├── rollup.config.js ├── .eslintrc.js ├── LICENSE ├── package.json ├── README.md └── dist ├── index.mjs └── index.js /.eslintignore: -------------------------------------------------------------------------------- 1 | *.config.js 2 | dist/ 3 | *.yml -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as TreeViewer } from './Tree.svelte' 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 12 4 | - 10 5 | script: 6 | - npm run test -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store' 2 | export const activeElement = writable(null) 3 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | targets: { 7 | node: "current" 8 | } 9 | } 10 | ] 11 | ] 12 | }; -------------------------------------------------------------------------------- /src/test-data.js: -------------------------------------------------------------------------------- 1 | export const tree = [{ 2 | desc: 'parent', 3 | child: [{ 4 | key: 'child', 5 | desc: 'child' 6 | }] 7 | }, { 8 | desc: 'parent 2 it is', 9 | child: [{ 10 | desc: 'child 2 it is', 11 | child: [{ 12 | desc: 'child 2-1 it is', 13 | key: 'child-2-1' 14 | }] 15 | }] 16 | }] -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transform: { 3 | "^.+\\.svelte$": "jest-transform-svelte", 4 | "^.+\\.js$": "babel-jest" 5 | }, 6 | moduleFileExtensions: ["js", "svelte"], 7 | testEnvironment: "jsdom", 8 | testPathIgnorePatterns: ["node_modules"], 9 | bail: false, 10 | verbose: true, 11 | transformIgnorePatterns: [], 12 | setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"] 13 | }; -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import pkg from './package.json'; 4 | import {terser} from 'rollup-plugin-terser' 5 | const name = pkg.name 6 | .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3') 7 | .replace(/^\w/, m => m.toUpperCase()) 8 | .replace(/-\w/g, m => m[1].toUpperCase()); 9 | 10 | export default { 11 | input: 'src/index.js', 12 | output: [ 13 | { file: pkg.module, 'format': 'es' }, 14 | { file: pkg.main, 'format': 'umd', name } 15 | ], 16 | plugins: [ 17 | svelte(), 18 | resolve(), 19 | terser() 20 | ] 21 | }; 22 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true 5 | }, 6 | extends: ['eslint:recommended'], 7 | parser: '@babel/eslint-parser', 8 | parserOptions: { 9 | ecmaVersion: 2019, 10 | sourceType: 'module', 11 | requireConfigFile: false 12 | }, 13 | plugins: ['svelte3'], 14 | overrides: [ 15 | { 16 | files: ['**/*.svelte'], 17 | processor: 'svelte3/svelte3', 18 | rules: { 19 | 'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 2, maxEOF: 0 }], 20 | 'import/first': 'off', 21 | 'import/no-duplicates': 'off', 22 | 'import/no-mutable-exports': 'off' 23 | } 24 | }, 25 | { 26 | files: ['src/**/*.spec.js'], 27 | env: { 28 | jest: true 29 | } 30 | } 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /src/helpers/domhelpers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Expand/Shrink child nodes 3 | * @param {HTMLElement} node 4 | * @param {HTMLElement} child 5 | * @param {HTMLElement} reverse reverse denotes shrink 6 | */ 7 | export function fixClickedElementCSS (node, child, reverse) { 8 | if (!reverse) { 9 | child.style.transform = 'scale(1,1)' 10 | child.style.height = 'auto' 11 | } else { 12 | child.style.transform = 'scale(1,0)' 13 | child.style.height = '0px' 14 | } 15 | fixArrowPositioning(node, reverse) 16 | } 17 | 18 | /** 19 | * rotates chevronon the basis on a flag named reverse 20 | * @param {HTMLElement} node 21 | * @param {HTMLElement} reverse reverse denotes shrink 22 | */ 23 | export function fixArrowPositioning (node, reverse) { 24 | if (!reverse) { 25 | node.style.transform = 'rotate(90deg)' 26 | } else { 27 | node.style.transform = '' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/helpers/clickHandlers.js: -------------------------------------------------------------------------------- 1 | import { fixClickedElementCSS } from './domhelpers' 2 | /** 3 | * fetches the currenty clicked node 4 | * looks for the very first child node 5 | * applies CSS to rotate the chevron and expand the child node 6 | * @param {DOM Click} event 7 | */ 8 | export function clickHandler (event) { 9 | const node = event.currentTarget 10 | // nodeParent will give us the complete node so that we can query for 11 | // the child nodes 12 | const nodeParent = node.parentNode 13 | const treeChild = nodeParent.querySelector('.tree-child') 14 | const nodeDesc = nodeParent.querySelector('.node-desc .chev-right') 15 | // CTO -> boolean 16 | // True -> child node is in expanded state 17 | // False -> child node is in shrinked state 18 | if (node.CTO) { 19 | node.CTO = !node.CTO 20 | treeChild && fixClickedElementCSS(nodeDesc, treeChild, true) 21 | return 22 | } 23 | node.CTO = true 24 | treeChild && fixClickedElementCSS(nodeDesc, treeChild) 25 | } 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 pulkit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-tree-viewer", 3 | "svelte": "src/index.js", 4 | "module": "dist/index.mjs", 5 | "main": "dist/index.js", 6 | "license": "MIT", 7 | "version": "1.0.1", 8 | "scripts": { 9 | "build": "rollup -c", 10 | "test": "jest src", 11 | "eslint": "eslint src", 12 | "test:watch": "npm run test -- --watch", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.15.5", 17 | "@babel/eslint-parser": "^7.15.7", 18 | "@babel/preset-env": "^7.15.6", 19 | "@rollup/plugin-node-resolve": "^9.0.0", 20 | "@testing-library/jest-dom": "^5.14.1", 21 | "@testing-library/svelte": "^3.0.3", 22 | "babel-jest": "^27.2.4", 23 | "eslint": "^7.32.0", 24 | "eslint-config-standard": "16.0.3", 25 | "eslint-plugin-import": "2.24.2", 26 | "eslint-plugin-node": "11.1.0", 27 | "eslint-plugin-promise": "5.1.0", 28 | "eslint-plugin-svelte3": "^3.2.1", 29 | "jest": "^27.2.4", 30 | "jest-transform-svelte": "^2.1.1", 31 | "rollup": "^2.0.0", 32 | "rollup-plugin-svelte": "^6.0.0", 33 | "rollup-plugin-terser": "^7.0.2", 34 | "svelte": "^3.0.0" 35 | }, 36 | "keywords": [ 37 | "svelte", 38 | "tree-view", 39 | "component-library" 40 | ], 41 | "files": [ 42 | "src", 43 | "dist" 44 | ], 45 | "dependencies": { 46 | "@fortawesome/free-solid-svg-icons": "^5.15.4", 47 | "svelte-fa": "^2.3.3" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/tree.spec.js: -------------------------------------------------------------------------------- 1 | import { render, cleanup, fireEvent } from '@testing-library/svelte' 2 | import Tree from './Tree.svelte' 3 | import { tree } from './test-data' 4 | 5 | describe('Tree component', () => { 6 | afterEach(() => { 7 | cleanup() 8 | }) 9 | 10 | test('should render the description for parent and child nodes', () => { 11 | const { getByText } = render(Tree, { 12 | props: { 13 | tree 14 | } 15 | }) 16 | 17 | expect(getByText('parent 2 it is')).toBeInTheDocument() 18 | expect(getByText('child 2-1 it is')).toBeInTheDocument() 19 | }) 20 | 21 | test('should render correct no. of children', () => { 22 | const { container } = render(Tree, { 23 | props: { 24 | tree 25 | } 26 | }) 27 | 28 | const firstElementDiv = container.querySelector('.complete-tree-node') 29 | expect(firstElementDiv.querySelectorAll('.tree-child').length).toEqual(1) 30 | expect(container.querySelectorAll('.tree-child').length).toEqual(3) 31 | }) 32 | 33 | test('should assign a class called leaf-node to the nodes with no child', () => { 34 | const { container } = render(Tree, { 35 | props: { 36 | tree 37 | } 38 | }) 39 | 40 | expect(container.querySelectorAll('.leaf-node').length).toEqual(2) 41 | }) 42 | 43 | test("should add CTO flag to the clicked node's parent and should set it to false when clicked again", async () => { 44 | const { container } = render(Tree, { 45 | props: { 46 | tree 47 | } 48 | }) 49 | 50 | const chevron = container.querySelector('.chev-right') 51 | await fireEvent(chevron, new MouseEvent('click', { 52 | bubbles: true 53 | })) 54 | 55 | // the parent of this chevron will have CTO set to true 56 | expect(container.querySelector('.node-desc').CTO).toBeTruthy() 57 | await fireEvent(chevron, new MouseEvent('click', { 58 | bubbles: true 59 | })) 60 | expect(container.querySelector('.node-desc').CTO).toBeFalsy() 61 | }) 62 | 63 | test('should call the provided callback when leaf node is clicked', async () => { 64 | const { getByText } = render(Tree, { 65 | props: { 66 | tree, 67 | onSelectCallback: function (key) { 68 | expect(key).toEqual('child-2-1') 69 | } 70 | } 71 | }) 72 | const chevron = getByText('child 2-1 it is') 73 | await fireEvent(chevron, new MouseEvent('click', { 74 | bubbles: true 75 | })) 76 | }) 77 | 78 | test('should ignore the triggering the callback when node is clicked and callback is not provided', async () => { 79 | const { getByText } = render(Tree, { 80 | props: { 81 | tree 82 | } 83 | }) 84 | const chevron = getByText('child 2-1 it is') 85 | await fireEvent(chevron, new MouseEvent('click', { 86 | bubbles: true 87 | })) 88 | expect(chevron.CTO).toBeFalsy() 89 | }) 90 | }) 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-tree-viewer 2 | 3 | [![Build Status](https://app.travis-ci.com/kpulkit29/svelte-tree-viewer.svg?branch=main)](https://app.travis-ci.com/kpulkit29/svelte-tree-viewer) 4 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 5 | [![Bundle Size](https://img.badgesize.io/kpulkit29/svelte-tree-viewer/main/dist/index.mjs.svg?&label=size)](https://github.com/ngryman/badge-size) 6 | 7 | 8 | Easy and compact svelte component library to generate tree view. 9 | 10 | [See Demo](https://codesandbox.io/s/svelte-tree-demo-f2ti4?file=/src/App.svelte) 11 | 12 | https://user-images.githubusercontent.com/20151526/136652408-ad3a4a1b-4c89-43f0-9a9d-95e88f73fff3.mov 13 | ## Installation 14 | ``` 15 | npm i svelte-tree-viewer 16 | ``` 17 | 18 | ## Usage 19 | ## Creating a Tree structure that svelte-tree-viewer can interpret 20 | 21 | ``` 22 | type Node = { 23 | desc: string; 24 | key?: string; 25 | child?: Array; 26 | } 27 | ``` 28 | 29 | ``` 30 | const Tree: Array = [{ 31 | desc: 'parent', 32 | child: [{ 33 | key: 'child', 34 | desc: 'child' 35 | }] 36 | }, { 37 | desc: 'parent 2 it is', 38 | child: [{ 39 | desc: 'child 2 it is', 40 | child: [{ 41 | desc: 'child 2-1 it is', 42 | key: 'child-2-1' 43 | }] 44 | }] 45 | }] 46 | ``` 47 | Should be an array of objects where each object denotes a tree node and can have the following properties 48 | - key -> a unique key name that would be forwarded as the onSelectCallback parameter. Not required on a non-leaf node. 49 | - desc -> text to be shown on UI 50 | - child -> denotes children of the current node. Don't pass it on if a node does have any children. 51 | 52 | ## import it in your svelte component 53 | ``` 54 | import { TreeViewer } from "svelte-tree-viewer"; 55 | ``` 56 | then use it in you component 57 | ``` 58 | 59 | ``` 60 | 61 | This component will expect the following props 62 | - *tree* -> Tree 63 | - *onSelectCallback(optional)*: (key) => {....your implementation} -> a callback function that will be called when any leaf node is clicked 64 | - *secondaryIcon(optional)*: Fa icon or image src 65 | - *faIcon*: boolean -> 66 | - true: if the secondary icon is a font awesome icon 67 | - false: if it is an image url 68 | 69 | **Note: onSelectCallback will be called only when a click event is registered on the leaf nodes** 70 | 71 | ## Using secondary icons 72 | svelte-tree-viewer supports font awesome icons and uses [svelte-fa](https://cweili.github.io/svelte-fa/) to render those. if you want the secondary icon to be visible on the screen, then there are two possible ways to pass it on to svelte-tree-viewer 73 | 74 | 1. Using font awesome 75 | ``` 76 | import { faBookDead } from '@fortawesome/free-solid-svg-icons'; 77 | 78 | // Note: faIcon is true here since faBookDead is a font awesome icon 79 | 80 | ``` 81 | 82 | 2. Using custom image url 83 | ``` 84 | // Note: faIcon is false here 85 | 86 | ``` 87 | -------------------------------------------------------------------------------- /src/Tree.svelte: -------------------------------------------------------------------------------- 1 | 36 | 82 | 83 | {#each tree as item,i} 84 | {#if !item.child} 85 |
86 |
clickHandler(e)}> 87 |
88 | 89 |
90 | {#if secondaryIcon} 91 | {#if faIcon} 92 |
93 | 94 |
95 | {:else} 96 |
97 | secondaryIcon 98 |
99 | {/if} 100 | {/if} 101 |
leafNodeClickHandler(e, item.key, onSelectCallback, activeElement)}> 102 | {item.desc} 103 |
104 |
105 |
106 | {:else} 107 |
108 |
clickHandler(e)}> 109 |
110 | 111 |
112 | {#if secondaryIcon} 113 | {#if faIcon} 114 |
115 | 116 |
117 | {:else} 118 |
119 | secondaryIcon 120 |
121 | {/if} 122 | {/if} 123 |
e.stopPropagation()}> 124 | {item.desc} 125 |
126 |
127 |
128 | 129 |
130 |
131 | {/if} 132 | {/each} -------------------------------------------------------------------------------- /dist/index.mjs: -------------------------------------------------------------------------------- 1 | function t(){}function e(t){return t()}function n(){return Object.create(null)}function r(t){t.forEach(e)}function o(t){return"function"==typeof t}function c(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let l,i;function s(t,e){return l||(l=document.createElement("a")),l.href=e,t===l.href}function a(e,n,r){e.$$.on_destroy.push(function(e,...n){if(null==e)return t;const r=e.subscribe(...n);return r.unsubscribe?()=>r.unsubscribe():r}(n,r))}function u(t){return null==t?"":t}function f(t,e){t.appendChild(e)}function d(t,e,n){const r=function(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;if(e&&e.host)return e;return t.ownerDocument}(t);if(!r.getElementById(e)){const t=$("style");t.id=e,t.textContent=n,function(t,e){f(t.head||t,e)}(r,t)}}function p(t,e,n){t.insertBefore(e,n||null)}function m(t){t.parentNode.removeChild(t)}function $(t){return document.createElement(t)}function g(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function h(t){return document.createTextNode(t)}function y(){return h(" ")}function v(){return h("")}function j(t,e,n,r){return t.addEventListener(e,n,r),()=>t.removeEventListener(e,n,r)}function x(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function b(t,e){e=""+e,t.wholeText!==e&&(t.data=e)}function w(t){i=t}const C=[],k=[],_=[],O=[],I=Promise.resolve();let N=!1;function S(t){_.push(t)}let E=!1;const z=new Set;function T(){if(!E){E=!0;do{for(let t=0;t{A.delete(t),r&&(n&&t.d(1),r())})),t.o(e)}}function D(t){t&&t.c()}function M(t,n,c,l){const{fragment:i,on_mount:s,on_destroy:a,after_update:u}=t.$$;i&&i.m(n,c),l||S((()=>{const n=s.map(e).filter(o);a?a.push(...n):r(n),t.$$.on_mount=[]})),u.forEach(S)}function R(t,e){const n=t.$$;null!==n.fragment&&(r(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function F(t,e){-1===t.$$.dirty[0]&&(C.push(t),N||(N=!0,I.then(T)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<{const o=r.length?r[0]:n;return p.ctx&&s(p.ctx[t],p.ctx[t]=o)&&(!p.skip_bound&&p.bound[t]&&p.bound[t](o),$&&F(e,t)),n})):[],p.update(),$=!0,r(p.before_update),p.fragment=!!l&&l(p.ctx),o.target){if(o.hydrate){const t=function(t){return Array.from(t.childNodes)}(o.target);p.fragment&&p.fragment.l(t),t.forEach(m)}else p.fragment&&p.fragment.c();o.intro&&q(e.$$.fragment),M(e,o.target,o.anchor,o.customElement),T()}w(d)}class G{$destroy(){R(this,1),this.$destroy=t}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const H=[];const J=function(e,n=t){let r;const o=new Set;function l(t){if(c(e,t)&&(e=t,r)){const t=!H.length;for(const t of o)t[1](),H.push(t,e);if(t){for(let t=0;t{o.delete(s),0===o.size&&(r(),r=null)}}}}(null),K=parseFloat;function Q(t,e=";"){let n;if(Array.isArray(t))n=t.filter((t=>t));else{n=[];for(const e in t)t[e]&&n.push(`${e}:${t[e]}`)}return n.join(e)}function U(t){d(t,"svelte-1cj2gr0",".spin.svelte-1cj2gr0{animation:svelte-1cj2gr0-spin 2s 0s infinite linear}.pulse.svelte-1cj2gr0{animation:svelte-1cj2gr0-spin 1s infinite steps(8)}@keyframes svelte-1cj2gr0-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}")}function W(t){let e,n,r,o,c,l,i;function s(t,e){return"string"==typeof t[7][4]?tt:Z}let a=s(t),d=a(t);return{c(){e=g("svg"),n=g("g"),r=g("g"),d.c(),x(r,"transform",t[10]),x(n,"transform",o=`translate(${t[7][0]/2} ${t[7][1]/2})`),x(n,"transform-origin",c=t[7][0]/4+" 0"),x(e,"id",t[0]),x(e,"class",l=u(t[8])+" svelte-1cj2gr0"),x(e,"style",t[9]),x(e,"viewBox",i=`0 0 ${t[7][0]} ${t[7][1]}`),x(e,"aria-hidden","true"),x(e,"role","img"),x(e,"xmlns","http://www.w3.org/2000/svg")},m(t,o){p(t,e,o),f(e,n),f(n,r),d.m(r,null)},p(t,f){a===(a=s(t))&&d?d.p(t,f):(d.d(1),d=a(t),d&&(d.c(),d.m(r,null))),1024&f&&x(r,"transform",t[10]),128&f&&o!==(o=`translate(${t[7][0]/2} ${t[7][1]/2})`)&&x(n,"transform",o),128&f&&c!==(c=t[7][0]/4+" 0")&&x(n,"transform-origin",c),1&f&&x(e,"id",t[0]),256&f&&l!==(l=u(t[8])+" svelte-1cj2gr0")&&x(e,"class",l),512&f&&x(e,"style",t[9]),128&f&&i!==(i=`0 0 ${t[7][0]} ${t[7][1]}`)&&x(e,"viewBox",i)},d(t){t&&m(e),d.d()}}}function Z(t){let e,n,r,o,c,l,i,s,a,u;return{c(){e=g("path"),l=g("path"),x(e,"d",n=t[7][4][0]),x(e,"fill",r=t[3]||t[1]||"currentColor"),x(e,"fill-opacity",o=0!=t[6]?t[4]:t[5]),x(e,"transform",c=`translate(${t[7][0]/-2} ${t[7][1]/-2})`),x(l,"d",i=t[7][4][1]),x(l,"fill",s=t[2]||t[1]||"currentColor"),x(l,"fill-opacity",a=0!=t[6]?t[5]:t[4]),x(l,"transform",u=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)},m(t,n){p(t,e,n),p(t,l,n)},p(t,f){128&f&&n!==(n=t[7][4][0])&&x(e,"d",n),10&f&&r!==(r=t[3]||t[1]||"currentColor")&&x(e,"fill",r),112&f&&o!==(o=0!=t[6]?t[4]:t[5])&&x(e,"fill-opacity",o),128&f&&c!==(c=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)&&x(e,"transform",c),128&f&&i!==(i=t[7][4][1])&&x(l,"d",i),6&f&&s!==(s=t[2]||t[1]||"currentColor")&&x(l,"fill",s),112&f&&a!==(a=0!=t[6]?t[5]:t[4])&&x(l,"fill-opacity",a),128&f&&u!==(u=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)&&x(l,"transform",u)},d(t){t&&m(e),t&&m(l)}}}function tt(t){let e,n,r,o;return{c(){e=g("path"),x(e,"d",n=t[7][4]),x(e,"fill",r=t[1]||t[2]||"currentColor"),x(e,"transform",o=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)},m(t,n){p(t,e,n)},p(t,c){128&c&&n!==(n=t[7][4])&&x(e,"d",n),6&c&&r!==(r=t[1]||t[2]||"currentColor")&&x(e,"fill",r),128&c&&o!==(o=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)&&x(e,"transform",o)},d(t){t&&m(e)}}}function et(e){let n,r=e[7][4]&&W(e);return{c(){r&&r.c(),n=v()},m(t,e){r&&r.m(t,e),p(t,n,e)},p(t,[e]){t[7][4]?r?r.p(t,e):(r=W(t),r.c(),r.m(n.parentNode,n)):r&&(r.d(1),r=null)},i:t,o:t,d(t){r&&r.d(t),t&&m(n)}}}function nt(t,e,n){let r,o,c,l,{class:i=""}=e,{id:s=""}=e,{style:a=""}=e,{icon:u}=e,{size:f=""}=e,{color:d=""}=e,{fw:p=!1}=e,{pull:m=""}=e,{scale:$=1}=e,{translateX:g=0}=e,{translateY:h=0}=e,{rotate:y=""}=e,{flip:v=!1}=e,{spin:j=!1}=e,{pulse:x=!1}=e,{primaryColor:b=""}=e,{secondaryColor:w=""}=e,{primaryOpacity:C=1}=e,{secondaryOpacity:k=.4}=e,{swapOpacity:_=!1}=e;return t.$$set=t=>{"class"in t&&n(11,i=t.class),"id"in t&&n(0,s=t.id),"style"in t&&n(12,a=t.style),"icon"in t&&n(13,u=t.icon),"size"in t&&n(14,f=t.size),"color"in t&&n(1,d=t.color),"fw"in t&&n(15,p=t.fw),"pull"in t&&n(16,m=t.pull),"scale"in t&&n(17,$=t.scale),"translateX"in t&&n(18,g=t.translateX),"translateY"in t&&n(19,h=t.translateY),"rotate"in t&&n(20,y=t.rotate),"flip"in t&&n(21,v=t.flip),"spin"in t&&n(22,j=t.spin),"pulse"in t&&n(23,x=t.pulse),"primaryColor"in t&&n(2,b=t.primaryColor),"secondaryColor"in t&&n(3,w=t.secondaryColor),"primaryOpacity"in t&&n(4,C=t.primaryOpacity),"secondaryOpacity"in t&&n(5,k=t.secondaryOpacity),"swapOpacity"in t&&n(6,_=t.swapOpacity)},t.$$.update=()=>{8192&t.$$.dirty&&n(7,r=u&&u.icon||[0,0,"",[],""]),12584960&t.$$.dirty&&n(8,o=Q([i,"fa",j&&"spin",x&&"pulse"]," ")),118784&t.$$.dirty&&n(9,c=function(t,e,n,r){let o,c,l,i,s,a="-.125em";return r&&(s="center",c="1.25em"),n&&(o=n),e&&("lg"==e?(i="1.33333em",l=".75em",a="-.225em"):i="xs"==e?".75em":"sm"==e?".875em":e.replace("x","em")),Q([Q({float:o,width:c,height:"1em","line-height":l,"font-size":i,"text-align":s,"vertical-align":a,"transform-origin":"center",overflow:"visible"}),t])}(a,f,m,p)),4063232&t.$$.dirty&&n(10,l=function(t,e,n,r,o,c=1,l="",i=""){let s=1,a=1;return o&&("horizontal"==o?s=-1:"vertical"==o?a=-1:s=a=-1),Q([`translate(${K(e)*c}${l},${K(n)*c}${l})`,`scale(${s*K(t)},${a*K(t)})`,r&&`rotate(${r}${i})`]," ")}($,g,h,y,v,512))},[s,d,b,w,C,k,_,r,o,c,l,i,a,u,f,p,m,$,g,h,y,v,j,x]}class rt extends G{constructor(t){super(),V(this,t,nt,et,c,{class:11,id:0,style:12,icon:13,size:14,color:1,fw:15,pull:16,scale:17,translateX:18,translateY:19,rotate:20,flip:21,spin:22,pulse:23,primaryColor:2,secondaryColor:3,primaryOpacity:4,secondaryOpacity:5,swapOpacity:6},U)}}function ot(t,e,n){n?(e.style.transform="scale(1,0)",e.style.height="0px"):(e.style.transform="scale(1,1)",e.style.height="auto"),function(t,e){t.style.transform=e?"":"rotate(90deg)"}(t,n)}function ct(t){const e=t.currentTarget,n=e.parentNode,r=n.querySelector(".tree-child"),o=n.querySelector(".node-desc .chev-right");if(e.CTO)return e.CTO=!e.CTO,void(r&&ot(o,r,!0));e.CTO=!0,r&&ot(o,r)} 2 | /*! 3 | * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com 4 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 5 | */var lt={prefix:"fas",iconName:"chevron-right",icon:[320,512,[],"f054","M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"]};function it(t){d(t,"svelte-jtjca8",".tree-child.svelte-jtjca8.svelte-jtjca8{margin-left:8px;margin-top:4px;transform:scale(1,0);transition:0.2s;height:0px}.complete-tree-node.svelte-jtjca8.svelte-jtjca8{margin-bottom:6px;padding:2px}.node-desc.svelte-jtjca8 .chev-right.svelte-jtjca8,.node-desc.svelte-jtjca8 .secondary-icon.svelte-jtjca8{transition:0.4s ease-in-out;transform-origin:center;width:20px;margin:1px 6px 2px 2px;height:20px}.secondary-icon.svelte-jtjca8 img.svelte-jtjca8{width:20px;height:20px}.node-desc.svelte-jtjca8.svelte-jtjca8{padding:4px;display:flex;max-width:60%}.tree-node-active{background:aliceblue}.chevron-no-child.svelte-jtjca8.svelte-jtjca8{opacity:0.2}.leaf-node.svelte-jtjca8.svelte-jtjca8{cursor:pointer}")}function st(t,e,n){const r=t.slice();return r[9]=e[n],r[11]=n,r}function at(t){let e,n,o,c,l,i,s,a,u,d,g,v,w,C,k,_=t[9].desc+"";c=new rt({props:{icon:lt}});let O=t[1]&&ft(t);return g=new xt({props:{tree:t[9].child,faIcon:t[3],secondaryIcon:t[1],onSelectCallback:t[2]}}),{c(){e=$("div"),n=$("div"),o=$("div"),D(c.$$.fragment),l=y(),O&&O.c(),i=y(),s=$("div"),a=h(_),u=y(),d=$("div"),D(g.$$.fragment),v=y(),x(o,"class","chev-right svelte-jtjca8"),x(s,"class","desc"),x(n,"class","node-desc svelte-jtjca8"),x(d,"class","tree-child svelte-jtjca8"),x(e,"class","complete-tree-node svelte-jtjca8")},m(r,m){p(r,e,m),f(e,n),f(n,o),M(c,o,null),f(n,l),O&&O.m(n,null),f(n,i),f(n,s),f(s,a),f(e,u),f(e,d),M(g,d,null),f(e,v),w=!0,C||(k=[j(s,"click",vt),j(n,"click",t[7])],C=!0)},p(t,e){t[1]?O?(O.p(t,e),2&e&&q(O,1)):(O=ft(t),O.c(),q(O,1),O.m(n,i)):O&&(X(),P(O,1,1,(()=>{O=null})),Y()),(!w||1&e)&&_!==(_=t[9].desc+"")&&b(a,_);const r={};1&e&&(r.tree=t[9].child),8&e&&(r.faIcon=t[3]),2&e&&(r.secondaryIcon=t[1]),4&e&&(r.onSelectCallback=t[2]),g.$set(r)},i(t){w||(q(c.$$.fragment,t),q(O),q(g.$$.fragment,t),w=!0)},o(t){P(c.$$.fragment,t),P(O),P(g.$$.fragment,t),w=!1},d(t){t&&m(e),R(c),O&&O.d(),R(g),C=!1,r(k)}}}function ut(t){let e,n,o,c,l,i,s,a,u,d,g,v,w=t[9].desc+"";c=new rt({props:{icon:lt}});let C=t[1]&&mt(t);function k(...e){return t[5](t[9],...e)}return{c(){e=$("div"),n=$("div"),o=$("div"),D(c.$$.fragment),l=y(),C&&C.c(),i=y(),s=$("div"),a=h(w),u=y(),x(o,"class","chev-right chevron-no-child svelte-jtjca8"),x(s,"class","desc"),x(n,"class","node-desc leaf-node svelte-jtjca8"),x(e,"class","complete-tree-node svelte-jtjca8")},m(r,m){p(r,e,m),f(e,n),f(n,o),M(c,o,null),f(n,l),C&&C.m(n,null),f(n,i),f(n,s),f(s,a),f(e,u),d=!0,g||(v=[j(s,"click",k),j(n,"click",t[6])],g=!0)},p(e,r){(t=e)[1]?C?(C.p(t,r),2&r&&q(C,1)):(C=mt(t),C.c(),q(C,1),C.m(n,i)):C&&(X(),P(C,1,1,(()=>{C=null})),Y()),(!d||1&r)&&w!==(w=t[9].desc+"")&&b(a,w)},i(t){d||(q(c.$$.fragment,t),q(C),d=!0)},o(t){P(c.$$.fragment,t),P(C),d=!1},d(t){t&&m(e),R(c),C&&C.d(),g=!1,r(v)}}}function ft(t){let e,n,r,o;const c=[pt,dt],l=[];function i(t,e){return t[3]?0:1}return e=i(t),n=l[e]=c[e](t),{c(){n.c(),r=v()},m(t,n){l[e].m(t,n),p(t,r,n),o=!0},p(t,o){let s=e;e=i(t),e===s?l[e].p(t,o):(X(),P(l[s],1,1,(()=>{l[s]=null})),Y(),n=l[e],n?n.p(t,o):(n=l[e]=c[e](t),n.c()),q(n,1),n.m(r.parentNode,r))},i(t){o||(q(n),o=!0)},o(t){P(n),o=!1},d(t){l[e].d(t),t&&m(r)}}}function dt(e){let n,r,o;return{c(){n=$("div"),r=$("img"),s(r.src,o=e[1])||x(r,"src",o),x(r,"alt","secondaryIcon"),x(r,"class","svelte-jtjca8"),x(n,"class","secondary-icon svelte-jtjca8")},m(t,e){p(t,n,e),f(n,r)},p(t,e){2&e&&!s(r.src,o=t[1])&&x(r,"src",o)},i:t,o:t,d(t){t&&m(n)}}}function pt(t){let e,n,r;return n=new rt({props:{icon:t[1]}}),{c(){e=$("div"),D(n.$$.fragment),x(e,"class","secondary-icon svelte-jtjca8")},m(t,o){p(t,e,o),M(n,e,null),r=!0},p(t,e){const r={};2&e&&(r.icon=t[1]),n.$set(r)},i(t){r||(q(n.$$.fragment,t),r=!0)},o(t){P(n.$$.fragment,t),r=!1},d(t){t&&m(e),R(n)}}}function mt(t){let e,n,r,o;const c=[gt,$t],l=[];function i(t,e){return t[3]?0:1}return e=i(t),n=l[e]=c[e](t),{c(){n.c(),r=v()},m(t,n){l[e].m(t,n),p(t,r,n),o=!0},p(t,o){let s=e;e=i(t),e===s?l[e].p(t,o):(X(),P(l[s],1,1,(()=>{l[s]=null})),Y(),n=l[e],n?n.p(t,o):(n=l[e]=c[e](t),n.c()),q(n,1),n.m(r.parentNode,r))},i(t){o||(q(n),o=!0)},o(t){P(n),o=!1},d(t){l[e].d(t),t&&m(r)}}}function $t(e){let n,r,o;return{c(){n=$("div"),r=$("img"),s(r.src,o=e[1])||x(r,"src",o),x(r,"alt","secondaryIcon"),x(r,"class","svelte-jtjca8"),x(n,"class","secondary-icon svelte-jtjca8")},m(t,e){p(t,n,e),f(n,r)},p(t,e){2&e&&!s(r.src,o=t[1])&&x(r,"src",o)},i:t,o:t,d(t){t&&m(n)}}}function gt(t){let e,n,r;return n=new rt({props:{icon:t[1]}}),{c(){e=$("div"),D(n.$$.fragment),x(e,"class","secondary-icon svelte-jtjca8")},m(t,o){p(t,e,o),M(n,e,null),r=!0},p(t,e){const r={};2&e&&(r.icon=t[1]),n.$set(r)},i(t){r||(q(n.$$.fragment,t),r=!0)},o(t){P(n.$$.fragment,t),r=!1},d(t){t&&m(e),R(n)}}}function ht(t){let e,n,r,o;const c=[ut,at],l=[];function i(t,e){return t[9].child?1:0}return e=i(t),n=l[e]=c[e](t),{c(){n.c(),r=v()},m(t,n){l[e].m(t,n),p(t,r,n),o=!0},p(t,o){let s=e;e=i(t),e===s?l[e].p(t,o):(X(),P(l[s],1,1,(()=>{l[s]=null})),Y(),n=l[e],n?n.p(t,o):(n=l[e]=c[e](t),n.c()),q(n,1),n.m(r.parentNode,r))},i(t){o||(q(n),o=!0)},o(t){P(n),o=!1},d(t){l[e].d(t),t&&m(r)}}}function yt(t){let e,n,r=t[0],o=[];for(let e=0;eP(o[t],1,1,(()=>{o[t]=null}));return{c(){for(let t=0;tt.stopPropagation();function jt(t,e,n){let r;a(t,J,(t=>n(8,r=t)));let{tree:o}=e,{secondaryIcon:c}=e,{onSelectCallback:l}=e,{faIcon:i}=e;function s(t,e){t.stopPropagation(),l&&l(e),r&&r.classList.remove("tree-node-active");let n=t.target;n.parentNode.classList.add("tree-node-active"),J.set(n.parentNode)}return t.$$set=t=>{"tree"in t&&n(0,o=t.tree),"secondaryIcon"in t&&n(1,c=t.secondaryIcon),"onSelectCallback"in t&&n(2,l=t.onSelectCallback),"faIcon"in t&&n(3,i=t.faIcon)},[o,c,l,i,s,(t,e)=>s(e,t.key),t=>ct(t),t=>ct(t)]}class xt extends G{constructor(t){super(),V(this,t,jt,yt,c,{tree:0,secondaryIcon:1,onSelectCallback:2,faIcon:3},it)}}export{xt as TreeViewer}; 6 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).TreeViewer={})}(this,(function(t){"use strict";function e(){}function n(t){return t()}function r(){return Object.create(null)}function o(t){t.forEach(n)}function c(t){return"function"==typeof t}function l(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let i,s;function a(t,e){return i||(i=document.createElement("a")),i.href=e,t===i.href}function u(t,n,r){t.$$.on_destroy.push(function(t,...n){if(null==t)return e;const r=t.subscribe(...n);return r.unsubscribe?()=>r.unsubscribe():r}(n,r))}function f(t){return null==t?"":t}function d(t,e){t.appendChild(e)}function p(t,e,n){const r=function(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;if(e&&e.host)return e;return t.ownerDocument}(t);if(!r.getElementById(e)){const t=g("style");t.id=e,t.textContent=n,function(t,e){d(t.head||t,e)}(r,t)}}function m(t,e,n){t.insertBefore(e,n||null)}function $(t){t.parentNode.removeChild(t)}function g(t){return document.createElement(t)}function h(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function y(t){return document.createTextNode(t)}function v(){return y(" ")}function j(){return y("")}function x(t,e,n,r){return t.addEventListener(e,n,r),()=>t.removeEventListener(e,n,r)}function b(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function w(t,e){e=""+e,t.wholeText!==e&&(t.data=e)}function C(t){s=t}const _=[],k=[],O=[],I=[],N=Promise.resolve();let S=!1;function E(t){O.push(t)}let T=!1;const z=new Set;function L(){if(!T){T=!0;do{for(let t=0;t<_.length;t+=1){const e=_[t];C(e),A(e.$$)}for(C(null),_.length=0;k.length;)k.pop()();for(let t=0;t{B.delete(t),r&&(n&&t.d(1),r())})),t.o(e)}}function D(t){t&&t.c()}function R(t,e,r,l){const{fragment:i,on_mount:s,on_destroy:a,after_update:u}=t.$$;i&&i.m(e,r),l||E((()=>{const e=s.map(n).filter(c);a?a.push(...e):o(e),t.$$.on_mount=[]})),u.forEach(E)}function V(t,e){const n=t.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function F(t,e){-1===t.$$.dirty[0]&&(_.push(t),S||(S=!0,N.then(L)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<{const o=r.length?r[0]:n;return p.ctx&&i(p.ctx[e],p.ctx[e]=o)&&(!p.skip_bound&&p.bound[e]&&p.bound[e](o),m&&F(t,e)),n})):[],p.update(),m=!0,o(p.before_update),p.fragment=!!l&&l(p.ctx),n.target){if(n.hydrate){const t=function(t){return Array.from(t.childNodes)}(n.target);p.fragment&&p.fragment.l(t),t.forEach($)}else p.fragment&&p.fragment.c();n.intro&&q(t.$$.fragment),R(t,n.target,n.anchor,n.customElement),L()}C(d)}class H{$destroy(){V(this,1),this.$destroy=e}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const J=[];const K=function(t,n=e){let r;const o=new Set;function c(e){if(l(t,e)&&(t=e,r)){const e=!J.length;for(const e of o)e[1](),J.push(e,t);if(e){for(let t=0;t{o.delete(s),0===o.size&&(r(),r=null)}}}}(null),Q=parseFloat;function U(t,e=";"){let n;if(Array.isArray(t))n=t.filter((t=>t));else{n=[];for(const e in t)t[e]&&n.push(`${e}:${t[e]}`)}return n.join(e)}function W(t){p(t,"svelte-1cj2gr0",".spin.svelte-1cj2gr0{animation:svelte-1cj2gr0-spin 2s 0s infinite linear}.pulse.svelte-1cj2gr0{animation:svelte-1cj2gr0-spin 1s infinite steps(8)}@keyframes svelte-1cj2gr0-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}")}function Z(t){let e,n,r,o,c,l,i;function s(t,e){return"string"==typeof t[7][4]?et:tt}let a=s(t),u=a(t);return{c(){e=h("svg"),n=h("g"),r=h("g"),u.c(),b(r,"transform",t[10]),b(n,"transform",o=`translate(${t[7][0]/2} ${t[7][1]/2})`),b(n,"transform-origin",c=t[7][0]/4+" 0"),b(e,"id",t[0]),b(e,"class",l=f(t[8])+" svelte-1cj2gr0"),b(e,"style",t[9]),b(e,"viewBox",i=`0 0 ${t[7][0]} ${t[7][1]}`),b(e,"aria-hidden","true"),b(e,"role","img"),b(e,"xmlns","http://www.w3.org/2000/svg")},m(t,o){m(t,e,o),d(e,n),d(n,r),u.m(r,null)},p(t,d){a===(a=s(t))&&u?u.p(t,d):(u.d(1),u=a(t),u&&(u.c(),u.m(r,null))),1024&d&&b(r,"transform",t[10]),128&d&&o!==(o=`translate(${t[7][0]/2} ${t[7][1]/2})`)&&b(n,"transform",o),128&d&&c!==(c=t[7][0]/4+" 0")&&b(n,"transform-origin",c),1&d&&b(e,"id",t[0]),256&d&&l!==(l=f(t[8])+" svelte-1cj2gr0")&&b(e,"class",l),512&d&&b(e,"style",t[9]),128&d&&i!==(i=`0 0 ${t[7][0]} ${t[7][1]}`)&&b(e,"viewBox",i)},d(t){t&&$(e),u.d()}}}function tt(t){let e,n,r,o,c,l,i,s,a,u;return{c(){e=h("path"),l=h("path"),b(e,"d",n=t[7][4][0]),b(e,"fill",r=t[3]||t[1]||"currentColor"),b(e,"fill-opacity",o=0!=t[6]?t[4]:t[5]),b(e,"transform",c=`translate(${t[7][0]/-2} ${t[7][1]/-2})`),b(l,"d",i=t[7][4][1]),b(l,"fill",s=t[2]||t[1]||"currentColor"),b(l,"fill-opacity",a=0!=t[6]?t[5]:t[4]),b(l,"transform",u=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)},m(t,n){m(t,e,n),m(t,l,n)},p(t,f){128&f&&n!==(n=t[7][4][0])&&b(e,"d",n),10&f&&r!==(r=t[3]||t[1]||"currentColor")&&b(e,"fill",r),112&f&&o!==(o=0!=t[6]?t[4]:t[5])&&b(e,"fill-opacity",o),128&f&&c!==(c=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)&&b(e,"transform",c),128&f&&i!==(i=t[7][4][1])&&b(l,"d",i),6&f&&s!==(s=t[2]||t[1]||"currentColor")&&b(l,"fill",s),112&f&&a!==(a=0!=t[6]?t[5]:t[4])&&b(l,"fill-opacity",a),128&f&&u!==(u=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)&&b(l,"transform",u)},d(t){t&&$(e),t&&$(l)}}}function et(t){let e,n,r,o;return{c(){e=h("path"),b(e,"d",n=t[7][4]),b(e,"fill",r=t[1]||t[2]||"currentColor"),b(e,"transform",o=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)},m(t,n){m(t,e,n)},p(t,c){128&c&&n!==(n=t[7][4])&&b(e,"d",n),6&c&&r!==(r=t[1]||t[2]||"currentColor")&&b(e,"fill",r),128&c&&o!==(o=`translate(${t[7][0]/-2} ${t[7][1]/-2})`)&&b(e,"transform",o)},d(t){t&&$(e)}}}function nt(t){let n,r=t[7][4]&&Z(t);return{c(){r&&r.c(),n=j()},m(t,e){r&&r.m(t,e),m(t,n,e)},p(t,[e]){t[7][4]?r?r.p(t,e):(r=Z(t),r.c(),r.m(n.parentNode,n)):r&&(r.d(1),r=null)},i:e,o:e,d(t){r&&r.d(t),t&&$(n)}}}function rt(t,e,n){let r,o,c,l,{class:i=""}=e,{id:s=""}=e,{style:a=""}=e,{icon:u}=e,{size:f=""}=e,{color:d=""}=e,{fw:p=!1}=e,{pull:m=""}=e,{scale:$=1}=e,{translateX:g=0}=e,{translateY:h=0}=e,{rotate:y=""}=e,{flip:v=!1}=e,{spin:j=!1}=e,{pulse:x=!1}=e,{primaryColor:b=""}=e,{secondaryColor:w=""}=e,{primaryOpacity:C=1}=e,{secondaryOpacity:_=.4}=e,{swapOpacity:k=!1}=e;return t.$$set=t=>{"class"in t&&n(11,i=t.class),"id"in t&&n(0,s=t.id),"style"in t&&n(12,a=t.style),"icon"in t&&n(13,u=t.icon),"size"in t&&n(14,f=t.size),"color"in t&&n(1,d=t.color),"fw"in t&&n(15,p=t.fw),"pull"in t&&n(16,m=t.pull),"scale"in t&&n(17,$=t.scale),"translateX"in t&&n(18,g=t.translateX),"translateY"in t&&n(19,h=t.translateY),"rotate"in t&&n(20,y=t.rotate),"flip"in t&&n(21,v=t.flip),"spin"in t&&n(22,j=t.spin),"pulse"in t&&n(23,x=t.pulse),"primaryColor"in t&&n(2,b=t.primaryColor),"secondaryColor"in t&&n(3,w=t.secondaryColor),"primaryOpacity"in t&&n(4,C=t.primaryOpacity),"secondaryOpacity"in t&&n(5,_=t.secondaryOpacity),"swapOpacity"in t&&n(6,k=t.swapOpacity)},t.$$.update=()=>{8192&t.$$.dirty&&n(7,r=u&&u.icon||[0,0,"",[],""]),12584960&t.$$.dirty&&n(8,o=U([i,"fa",j&&"spin",x&&"pulse"]," ")),118784&t.$$.dirty&&n(9,c=function(t,e,n,r){let o,c,l,i,s,a="-.125em";return r&&(s="center",c="1.25em"),n&&(o=n),e&&("lg"==e?(i="1.33333em",l=".75em",a="-.225em"):i="xs"==e?".75em":"sm"==e?".875em":e.replace("x","em")),U([U({float:o,width:c,height:"1em","line-height":l,"font-size":i,"text-align":s,"vertical-align":a,"transform-origin":"center",overflow:"visible"}),t])}(a,f,m,p)),4063232&t.$$.dirty&&n(10,l=function(t,e,n,r,o,c=1,l="",i=""){let s=1,a=1;return o&&("horizontal"==o?s=-1:"vertical"==o?a=-1:s=a=-1),U([`translate(${Q(e)*c}${l},${Q(n)*c}${l})`,`scale(${s*Q(t)},${a*Q(t)})`,r&&`rotate(${r}${i})`]," ")}($,g,h,y,v,512))},[s,d,b,w,C,_,k,r,o,c,l,i,a,u,f,p,m,$,g,h,y,v,j,x]}class ot extends H{constructor(t){super(),G(this,t,rt,nt,l,{class:11,id:0,style:12,icon:13,size:14,color:1,fw:15,pull:16,scale:17,translateX:18,translateY:19,rotate:20,flip:21,spin:22,pulse:23,primaryColor:2,secondaryColor:3,primaryOpacity:4,secondaryOpacity:5,swapOpacity:6},W)}}function ct(t,e,n){n?(e.style.transform="scale(1,0)",e.style.height="0px"):(e.style.transform="scale(1,1)",e.style.height="auto"),function(t,e){t.style.transform=e?"":"rotate(90deg)"}(t,n)}function lt(t){const e=t.currentTarget,n=e.parentNode,r=n.querySelector(".tree-child"),o=n.querySelector(".node-desc .chev-right");if(e.CTO)return e.CTO=!e.CTO,void(r&&ct(o,r,!0));e.CTO=!0,r&&ct(o,r)} 2 | /*! 3 | * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com 4 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 5 | */var it={prefix:"fas",iconName:"chevron-right",icon:[320,512,[],"f054","M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"]};function st(t){p(t,"svelte-jtjca8",".tree-child.svelte-jtjca8.svelte-jtjca8{margin-left:8px;margin-top:4px;transform:scale(1,0);transition:0.2s;height:0px}.complete-tree-node.svelte-jtjca8.svelte-jtjca8{margin-bottom:6px;padding:2px}.node-desc.svelte-jtjca8 .chev-right.svelte-jtjca8,.node-desc.svelte-jtjca8 .secondary-icon.svelte-jtjca8{transition:0.4s ease-in-out;transform-origin:center;width:20px;margin:1px 6px 2px 2px;height:20px}.secondary-icon.svelte-jtjca8 img.svelte-jtjca8{width:20px;height:20px}.node-desc.svelte-jtjca8.svelte-jtjca8{padding:4px;display:flex;max-width:60%}.tree-node-active{background:aliceblue}.chevron-no-child.svelte-jtjca8.svelte-jtjca8{opacity:0.2}.leaf-node.svelte-jtjca8.svelte-jtjca8{cursor:pointer}")}function at(t,e,n){const r=t.slice();return r[9]=e[n],r[11]=n,r}function ut(t){let e,n,r,c,l,i,s,a,u,f,p,h,j,C,_,k=t[9].desc+"";c=new ot({props:{icon:it}});let O=t[1]&&dt(t);return p=new bt({props:{tree:t[9].child,faIcon:t[3],secondaryIcon:t[1],onSelectCallback:t[2]}}),{c(){e=g("div"),n=g("div"),r=g("div"),D(c.$$.fragment),l=v(),O&&O.c(),i=v(),s=g("div"),a=y(k),u=v(),f=g("div"),D(p.$$.fragment),h=v(),b(r,"class","chev-right svelte-jtjca8"),b(s,"class","desc"),b(n,"class","node-desc svelte-jtjca8"),b(f,"class","tree-child svelte-jtjca8"),b(e,"class","complete-tree-node svelte-jtjca8")},m(o,$){m(o,e,$),d(e,n),d(n,r),R(c,r,null),d(n,l),O&&O.m(n,null),d(n,i),d(n,s),d(s,a),d(e,u),d(e,f),R(p,f,null),d(e,h),j=!0,C||(_=[x(s,"click",jt),x(n,"click",t[7])],C=!0)},p(t,e){t[1]?O?(O.p(t,e),2&e&&q(O,1)):(O=dt(t),O.c(),q(O,1),O.m(n,i)):O&&(X(),M(O,1,1,(()=>{O=null})),Y()),(!j||1&e)&&k!==(k=t[9].desc+"")&&w(a,k);const r={};1&e&&(r.tree=t[9].child),8&e&&(r.faIcon=t[3]),2&e&&(r.secondaryIcon=t[1]),4&e&&(r.onSelectCallback=t[2]),p.$set(r)},i(t){j||(q(c.$$.fragment,t),q(O),q(p.$$.fragment,t),j=!0)},o(t){M(c.$$.fragment,t),M(O),M(p.$$.fragment,t),j=!1},d(t){t&&$(e),V(c),O&&O.d(),V(p),C=!1,o(_)}}}function ft(t){let e,n,r,c,l,i,s,a,u,f,p,h,j=t[9].desc+"";c=new ot({props:{icon:it}});let C=t[1]&&$t(t);function _(...e){return t[5](t[9],...e)}return{c(){e=g("div"),n=g("div"),r=g("div"),D(c.$$.fragment),l=v(),C&&C.c(),i=v(),s=g("div"),a=y(j),u=v(),b(r,"class","chev-right chevron-no-child svelte-jtjca8"),b(s,"class","desc"),b(n,"class","node-desc leaf-node svelte-jtjca8"),b(e,"class","complete-tree-node svelte-jtjca8")},m(o,$){m(o,e,$),d(e,n),d(n,r),R(c,r,null),d(n,l),C&&C.m(n,null),d(n,i),d(n,s),d(s,a),d(e,u),f=!0,p||(h=[x(s,"click",_),x(n,"click",t[6])],p=!0)},p(e,r){(t=e)[1]?C?(C.p(t,r),2&r&&q(C,1)):(C=$t(t),C.c(),q(C,1),C.m(n,i)):C&&(X(),M(C,1,1,(()=>{C=null})),Y()),(!f||1&r)&&j!==(j=t[9].desc+"")&&w(a,j)},i(t){f||(q(c.$$.fragment,t),q(C),f=!0)},o(t){M(c.$$.fragment,t),M(C),f=!1},d(t){t&&$(e),V(c),C&&C.d(),p=!1,o(h)}}}function dt(t){let e,n,r,o;const c=[mt,pt],l=[];function i(t,e){return t[3]?0:1}return e=i(t),n=l[e]=c[e](t),{c(){n.c(),r=j()},m(t,n){l[e].m(t,n),m(t,r,n),o=!0},p(t,o){let s=e;e=i(t),e===s?l[e].p(t,o):(X(),M(l[s],1,1,(()=>{l[s]=null})),Y(),n=l[e],n?n.p(t,o):(n=l[e]=c[e](t),n.c()),q(n,1),n.m(r.parentNode,r))},i(t){o||(q(n),o=!0)},o(t){M(n),o=!1},d(t){l[e].d(t),t&&$(r)}}}function pt(t){let n,r,o;return{c(){n=g("div"),r=g("img"),a(r.src,o=t[1])||b(r,"src",o),b(r,"alt","secondaryIcon"),b(r,"class","svelte-jtjca8"),b(n,"class","secondary-icon svelte-jtjca8")},m(t,e){m(t,n,e),d(n,r)},p(t,e){2&e&&!a(r.src,o=t[1])&&b(r,"src",o)},i:e,o:e,d(t){t&&$(n)}}}function mt(t){let e,n,r;return n=new ot({props:{icon:t[1]}}),{c(){e=g("div"),D(n.$$.fragment),b(e,"class","secondary-icon svelte-jtjca8")},m(t,o){m(t,e,o),R(n,e,null),r=!0},p(t,e){const r={};2&e&&(r.icon=t[1]),n.$set(r)},i(t){r||(q(n.$$.fragment,t),r=!0)},o(t){M(n.$$.fragment,t),r=!1},d(t){t&&$(e),V(n)}}}function $t(t){let e,n,r,o;const c=[ht,gt],l=[];function i(t,e){return t[3]?0:1}return e=i(t),n=l[e]=c[e](t),{c(){n.c(),r=j()},m(t,n){l[e].m(t,n),m(t,r,n),o=!0},p(t,o){let s=e;e=i(t),e===s?l[e].p(t,o):(X(),M(l[s],1,1,(()=>{l[s]=null})),Y(),n=l[e],n?n.p(t,o):(n=l[e]=c[e](t),n.c()),q(n,1),n.m(r.parentNode,r))},i(t){o||(q(n),o=!0)},o(t){M(n),o=!1},d(t){l[e].d(t),t&&$(r)}}}function gt(t){let n,r,o;return{c(){n=g("div"),r=g("img"),a(r.src,o=t[1])||b(r,"src",o),b(r,"alt","secondaryIcon"),b(r,"class","svelte-jtjca8"),b(n,"class","secondary-icon svelte-jtjca8")},m(t,e){m(t,n,e),d(n,r)},p(t,e){2&e&&!a(r.src,o=t[1])&&b(r,"src",o)},i:e,o:e,d(t){t&&$(n)}}}function ht(t){let e,n,r;return n=new ot({props:{icon:t[1]}}),{c(){e=g("div"),D(n.$$.fragment),b(e,"class","secondary-icon svelte-jtjca8")},m(t,o){m(t,e,o),R(n,e,null),r=!0},p(t,e){const r={};2&e&&(r.icon=t[1]),n.$set(r)},i(t){r||(q(n.$$.fragment,t),r=!0)},o(t){M(n.$$.fragment,t),r=!1},d(t){t&&$(e),V(n)}}}function yt(t){let e,n,r,o;const c=[ft,ut],l=[];function i(t,e){return t[9].child?1:0}return e=i(t),n=l[e]=c[e](t),{c(){n.c(),r=j()},m(t,n){l[e].m(t,n),m(t,r,n),o=!0},p(t,o){let s=e;e=i(t),e===s?l[e].p(t,o):(X(),M(l[s],1,1,(()=>{l[s]=null})),Y(),n=l[e],n?n.p(t,o):(n=l[e]=c[e](t),n.c()),q(n,1),n.m(r.parentNode,r))},i(t){o||(q(n),o=!0)},o(t){M(n),o=!1},d(t){l[e].d(t),t&&$(r)}}}function vt(t){let e,n,r=t[0],o=[];for(let e=0;eM(o[t],1,1,(()=>{o[t]=null}));return{c(){for(let t=0;tt.stopPropagation();function xt(t,e,n){let r;u(t,K,(t=>n(8,r=t)));let{tree:o}=e,{secondaryIcon:c}=e,{onSelectCallback:l}=e,{faIcon:i}=e;function s(t,e){t.stopPropagation(),l&&l(e),r&&r.classList.remove("tree-node-active");let n=t.target;n.parentNode.classList.add("tree-node-active"),K.set(n.parentNode)}return t.$$set=t=>{"tree"in t&&n(0,o=t.tree),"secondaryIcon"in t&&n(1,c=t.secondaryIcon),"onSelectCallback"in t&&n(2,l=t.onSelectCallback),"faIcon"in t&&n(3,i=t.faIcon)},[o,c,l,i,s,(t,e)=>s(e,t.key),t=>lt(t),t=>lt(t)]}class bt extends H{constructor(t){super(),G(this,t,xt,vt,l,{tree:0,secondaryIcon:1,onSelectCallback:2,faIcon:3},st)}}t.TreeViewer=bt,Object.defineProperty(t,"__esModule",{value:!0})})); 6 | --------------------------------------------------------------------------------