equinox-web-components/dist/equinox/p-4ebf2714.entry.js

Equinox design for the web using StencilJS

import{r as i,h as s,H as e}from"./p-cc373a46.js";import{f as l,s as n,d as t}from"./p-b72f83c8.js";const a=class{constructor(e){i(this,e),this.fields='[{"id":1,"icon":"ph-folder","name":"Cats","children":[{"id":2,"icon":"ph-file","name":"Color cats","children":[{"id":3,"name":"Yellow cats"},{"id":4,"name":"Black cats"}]}]},{"id":5,"icon":"ph-folder","name":"Dogs","children":[{"id":6,"icon":"ph-file","name":"Color dogs","children":[{"id":7,"name":"Yellow dogs"},{"id":8,"name":"Black dogs"}]}]},{"id":9,"icon":"ph-folder","name":"Fishes","children":[{"id":10,"icon":"ph-file","name":"Color Fishes","children":[{"id":11,"name":"Yellow Fishes"},{"id":12,"name":"Black Fishes"}]}]}]',this.deserializedFields=[],this.changeOpen=({id:i,isOpen:s})=>{const e=l(this.deserializedFields,"id",i);n(this.deserializedFields,[...e,"isOpen"],!s),this.deserializedFields=this.deserializedFields.map(i=>i)},this.parseFields=(i,e=1)=>i.map(i=>s("div",{style:{display:"flex",cursor:"pointer",padding:"6px 0"}},s("div",{style:{display:"flex",alignItems:"baseline"},onClick:()=>this.changeOpen(i)},1===e&&i.children&&s("e-icon",{size:"24px",style:{marginRight:"33px"},icon:i.isOpen?"ph-minus-circle":"ph-plus-circle"})),s("div",{class:"branch "+i.isOpen},s("div",{style:{display:"flex",alignItems:"center",gap:"8px"},onClick:()=>this.changeOpen(i)},s("e-icon",{size:"24px",icon:i.icon}),i.name),s("div",{style:{marginLeft:"20px",display:"flex",flexDirection:"column"}},i.isOpen&&i.children&&this.parseFields(i.children,e+1)))))}componentWillLoad(){this.deserializedFields=t(this.fields)}parseTabsProp(i){i&&(this.deserializedFields=t(this.fields))}render(){return s(e,null,this.parseFields(this.deserializedFields))}static get watchers(){return{fields:["parseTabsProp"]}}};a.style=":host{display:block}";export{a as e_fieldtree}