UNPKG

node-red-contrib-uibuilder

Version:

Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

3 lines (2 loc) 35.7 kB
(()=>{var de=Object.defineProperty;var Z=s=>{throw TypeError(s)};var ue=(s,d,e)=>d in s?de(s,d,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[d]=e;var k=(s,d,e)=>ue(s,typeof d!="symbol"?d+"":d,e),ee=(s,d,e)=>d.has(s)||Z("Cannot "+e);var p=(s,d,e)=>(ee(s,d,"read from private field"),e?e.call(s):d.get(s)),N=(s,d,e)=>d.has(s)?Z("Cannot add the same private member more than once"):d instanceof WeakSet?d.add(s):d.set(s,e),h=(s,d,e,t)=>(ee(s,d,"write to private field"),t?t.call(s,e):d.set(s,e),e);var he=typeof HTMLElement<"u"?HTMLElement:class{},M=class M extends he{constructor(){super();k(this,"uib",!!window.uibuilder);k(this,"uibuilder",window.uibuilder);k(this,"$");k(this,"$$");k(this,"connected",!1);k(this,"name");k(this,"opts",{})}static get version(){return"".concat(this.componentVersion," (Base: ").concat(this.baseVersion,")")}config(e){return e&&(this.opts=M.deepAssign(this.opts,e)),this.opts}createShadowSelectors(){var e,t;this.$=(e=this.shadowRoot)==null?void 0:e.querySelector.bind(this.shadowRoot),this.$$=(t=this.shadowRoot)==null?void 0:t.querySelectorAll.bind(this.shadowRoot)}static deepAssign(e,...t){for(let n of t)for(let r in n){let i=n[r],a=e[r];if(Object(i)==i&&Object(a)===a){e[r]=M.deepAssign(a,i);continue}e[r]=n[r]}return e}async doInheritStyles(){if(!this.shadowRoot||!this.hasAttribute("inherit-style"))return;let e=this.getAttribute("inherit-style");e||(e="./index.css");let t=document.createElement("link");t.setAttribute("type","text/css"),t.setAttribute("rel","stylesheet"),t.setAttribute("href",e),this.shadowRoot.appendChild(t),console.info("[".concat(this.localName,'] Inherit-style requested. Loading: "').concat(e,'"'))}ensureId(){this.uib=!!window.uibuilder,this.id||(this.id="".concat(this.localName,"-").concat(++this.constructor._iCount))}hasSlotContent(){return this.shadowRoot.querySelector("slot").assignedNodes().some(n=>n.nodeType===Node.ELEMENT_NODE?!0:n.nodeType===Node.TEXT_NODE?n.textContent.trim().length>0:!1)}prependStylesheet(e,t=0){if(!e)throw new Error("[".concat(this.localName,"] cssText must be provided"));let n=this._findExistingStylesheet();if(n)return n;let r=document.createElement("style");return r.textContent=e,r.setAttribute("data-component",this.localName),r.setAttribute("data-order",t.toString()),this._prependToDocumentHead(r,t),r}uibSend(e,t){this.uib&&(this.uibuilder.ioConnected?this.uibuilder.send({topic:"".concat(this.localName,":").concat(e),payload:t,id:this.id,name:this.name}):console.warn("[".concat(this.localName,"] uibuilder not connected to server, cannot send:"),e,t))}_connect(){this.ensureId(),this.doInheritStyles(),this.uib&&this.uibuilder.onTopic("".concat(this.localName,"::").concat(this.id),this._uibMsgHandler.bind(this))}_construct(e,t){e&&(t||(t={mode:"open",delegatesFocus:!0}),this.attachShadow(t).append(e),this.createShadowSelectors())}_disconnect(){document.removeEventListener("uibuilder:msg:_ui:update:".concat(this.id),this._uibMsgHandler),this._event("disconnected")}_event(e,t){this.dispatchEvent(new CustomEvent("".concat(this.localName,":").concat(e),{bubbles:!0,composed:!0,detail:{id:this.id,name:this.name,data:t}}))}_ready(){this.connected=!0,this._event("connected"),this._event("ready")}_uibMsgHandler(e){if(typeof e.payload!="object"){console.warn("[".concat(this.localName,"] Ignoring msg, payload is not an object:"),e);return}Object.keys(e.payload).forEach(t=>{if(t.startsWith("_"))return;let n=t.toLowerCase();switch(n.startsWith("data-")&&(n="data"),n){case"value":{this.setAttribute("value",e.payload[t]);break}case"class":{this.className=e.payload[t];break}case"style":{this.style.cssText=e.payload[t];break}case"data":{this.dataset[t.replace("data-","")]=e.payload[t];break}default:{this[t]=e.payload[t];break}}})}_findExistingStylesheet(){return document.head.querySelector('style[data-component="'.concat(this.localName,'"]'))}_prependToDocumentHead(e,t){var a;let n=document.head,r=Array.from(n.querySelectorAll("style[data-component]"));if(r.length===0){let l=n.firstChild;l?n.insertBefore(e,l):n.appendChild(e);return}let i=null;for(let l of r){let o=parseInt((a=l.getAttribute("data-order"))!=null?a:"0",10);if(t<o){i=l;break}}if(i)n.insertBefore(e,i);else{let o=r[r.length-1].nextSibling;o?n.insertBefore(e,o):n.appendChild(e)}}};k(M,"baseVersion","2025-09-20"),k(M,"_iCount",0);var X=M,te=X;var Q=1e3,pe=5e4,fe="2026-05-09",re="\njson-viewer {\n display: block;\n font-family: var(--jv-font-family, 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace);\n font-size: var(--jv-font-size, 0.875rem);\n line-height: 1.5;\n background: var(--jv-bg, transparent);\n color: var(--jv-color, inherit);\n overflow: auto;\n}\n.jv-tree-wrap {\n display: flow-root;\n}\n.jv-controls {\n float: right;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.2rem 0 0.2rem 0.4rem;\n}\n.jv-search-row {\n padding: 0.25rem 0.5rem;\n border-bottom: 1px solid hsl(0 0% 50% / 0.2);\n}\n.jv-search {\n display: block;\n width: 100%;\n box-sizing: border-box;\n padding: 0.2rem 0.4rem;\n border: 1px solid hsl(0 0% 60%);\n border-radius: 3px;\n font-family: inherit;\n font-size: inherit;\n background: var(--jv-bg, transparent);\n color: var(--jv-color, inherit);\n}\n.jv-btn {\n padding: 0.15rem 0.5rem;\n border: 1px solid hsl(0 0% 60%);\n border-radius: 3px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n font-size: 0.8em;\n white-space: nowrap;\n}\n.jv-btn:hover, .jv-btn:focus-visible {\n background: hsl(0 0% 50% / 0.15);\n outline: 2px solid hsl(200 100% 50%);\n outline-offset: 1px;\n}\n.jv-tree { padding: 0.25rem 0.5rem; }\n.jv-node {\n padding-left: var(--jv-indent, 1.25rem);\n outline: none;\n}\n.jv-node.jv-leaf:focus-visible,\ndetails.jv-node > summary:focus-visible {\n outline: 2px solid hsl(200 100% 50%);\n outline-offset: 1px;\n border-radius: 2px;\n}\n/* <details>/<summary> expand/collapse \u2014 no JavaScript required */\ndetails.jv-node > summary {\n list-style: none;\n margin-left: calc(-1 * var(--jv-indent, 1.25rem));\n cursor: pointer;\n display: block;\n}\ndetails.jv-node > summary::-webkit-details-marker { display: none; }\ndetails.jv-node > summary::marker { content: ''; }\ndetails.jv-node > summary::before {\n content: '\u25BC';\n display: inline-block;\n width: var(--jv-indent, 1.25rem);\n text-align: center;\n font-size: 0.65em;\n color: var(--jv-toggle-color, hsl(0 0% 55%));\n user-select: none;\n}\ndetails.jv-node:not([open]) > summary::before { content: '\u25B6'; }\ndetails.jv-node[open] > summary .jv-hint { display: none; }\ndetails.jv-node:not([open]) > summary .jv-hint { display: inline; }\n.jv-key { color: var(--jv-key-color, hsl(230 60% 45%)); cursor: pointer; }\n.jv-key:hover { text-decoration: underline; }\n.jv-key[contenteditable='true'] {\n border-bottom: 1px dashed hsl(0 0% 60%);\n cursor: text;\n outline: none;\n min-width: 2ch;\n text-decoration: none !important;\n}\n.jv-key[contenteditable='true']:focus { border-bottom-color: hsl(200 100% 50%); }\n.jv-sep { color: hsl(0 0% 50%); margin: 0 0.1em; }\n.jv-string { color: var(--jv-string-color, hsl(10 80% 40%)); }\n.jv-val.jv-string::before,\n.jv-val.jv-string::after { content: '\"'; }\n.jv-number { color: var(--jv-number-color, hsl(260 70% 50%)); }\n.jv-val.jv-bigint { color: var(--jv-number-color, hsl(260 70% 50%)); }\n.jv-val.jv-bigint::after { content: 'n'; }\n.jv-boolean { color: var(--jv-boolean-color, hsl(200 80% 40%)); font-weight: bold; }\n.jv-null,\n.jv-undefined { color: var(--jv-null-color, hsl(0 0% 55%)); font-style: italic; }\n.jv-special,\n.jv-circular { color: var(--jv-special-color, hsl(30 80% 40%)); font-style: italic; }\n.jv-regexp { color: var(--jv-regexp-color, hsl(330 70% 45%)); }\n.jv-bracket,\n.jv-bracket-close { color: hsl(0 0% 45%); }\n.jv-hint { color: hsl(0 0% 60%); font-size: 0.85em; margin-left: 0.3em; }\n.jv-copy {\n appearance: none;\n -webkit-appearance: none;\n opacity: 0;\n border: none;\n box-shadow: none;\n background: transparent;\n cursor: pointer;\n font-size: 0.8em;\n padding: 0 0.15rem;\n margin: 0;\n color: hsl(0 0% 60%);\n display: inline-flex;\n align-items: center;\n line-height: 1;\n transition: opacity 0.15s;\n border-radius: 2px;\n}\n.jv-node:hover > .jv-copy,\n.jv-node.jv-leaf:focus-visible > .jv-copy,\ndetails.jv-node:focus-within > .jv-copy { opacity: 1; }\n.jv-copy:hover,\n.jv-copy:focus-visible { color: hsl(200 100% 40%); opacity: 1; outline: 1px solid hsl(200 100% 50%); }\n.jv-add {\n appearance: none;\n -webkit-appearance: none;\n opacity: 0;\n border: none;\n box-shadow: none;\n background: transparent;\n cursor: pointer;\n font-size: 0.85em;\n font-weight: bold;\n padding: 0 0.2rem;\n margin: 0 0.1rem;\n color: hsl(120 50% 40%);\n display: inline-flex;\n align-items: center;\n line-height: 1;\n transition: opacity 0.15s;\n border-radius: 2px;\n vertical-align: middle;\n}\ndetails.jv-node:not([open]) > summary .jv-add { display: none !important; }\ndetails.jv-node[open] > summary:hover .jv-add,\ndetails.jv-node[open] > summary:focus-visible .jv-add { opacity: 1; }\n.jv-add:hover,\n.jv-add:focus-visible { color: hsl(120 70% 30%); opacity: 1; outline: 1px solid hsl(120 70% 50%); }\n.jv-delete {\n appearance: none;\n -webkit-appearance: none;\n opacity: 0;\n border: none;\n box-shadow: none;\n background: transparent;\n cursor: pointer;\n font-size: 0.8em;\n padding: 0 0.15rem;\n margin: 0;\n color: hsl(0 60% 55%);\n display: inline-flex;\n align-items: center;\n line-height: 1;\n transition: opacity 0.15s;\n border-radius: 2px;\n}\n/* Leaf nodes: delete is a direct child of the node div */\n.jv-node.jv-leaf:hover > .jv-delete,\n.jv-node.jv-leaf:focus-visible > .jv-delete { opacity: 1; }\n/* Expandable nodes: delete is inside <summary> */\ndetails.jv-node > summary:hover .jv-delete,\ndetails.jv-node > summary:focus-visible .jv-delete { opacity: 1; }\n.jv-delete:hover,\n.jv-delete:focus-visible { color: hsl(0 80% 45%); opacity: 1; outline: 1px solid hsl(0 80% 50%); }\n.jv-children { padding-left: 0; }\n.jv-hl { background: var(--jv-hl-bg, hsl(50 100% 70% / 0.6)); border-radius: 2px; }\n.jv-hidden { display: none !important; }\n.jv-truncated {\n color: var(--jv-truncated-color, hsl(0 0% 55%));\n font-style: italic;\n font-size: 0.85em;\n cursor: default;\n user-select: none;\n}\n.jv-val[contenteditable='true'] {\n border-bottom: 1px dashed hsl(0 0% 60%);\n cursor: text;\n outline: none;\n min-width: 2ch;\n}\n.jv-val[contenteditable='true']:focus { border-bottom-color: hsl(200 100% 50%); }\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n .jv-key { color: var(--jv-key-color, hsl(220 80% 75%)); }\n .jv-string { color: var(--jv-string-color, hsl(30 90% 65%)); }\n .jv-number { color: var(--jv-number-color, hsl(270 80% 75%)); }\n .jv-val.jv-bigint { color: var(--jv-number-color, hsl(270 80% 75%)); }\n .jv-boolean { color: var(--jv-boolean-color, hsl(200 80% 70%)); }\n .jv-null,\n .jv-undefined { color: var(--jv-null-color, hsl(0 0% 60%)); }\n .jv-special,\n .jv-circular { color: var(--jv-special-color, hsl(40 80% 65%)); }\n .jv-regexp { color: var(--jv-regexp-color, hsl(330 80% 70%)); }\n .jv-truncated { color: var(--jv-truncated-color, hsl(0 0% 60%)); }\n .jv-bracket,\n .jv-bracket-close { color: hsl(0 0% 65%); }\n details.jv-node > summary::before { color: var(--jv-toggle-color, hsl(0 0% 70%)); }\n}\n\n/* Print styles: expand everything and hide controls */\n@media print {\n .jv-controls { display: none; }\n .jv-search-row { display: none; }\n details.jv-node > :not(summary) { display: block !important; }\n details.jv-node > summary .jv-hint { display: none !important; }\n .jv-copy { display: none; }\n .jv-add { display: none; }\n .jv-delete { display: none; }\n}\n";function j(s){return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function se(s){return s===null?"null":s===void 0?"undefined":typeof s=="string"||s instanceof String?"string":typeof s=="boolean"?"boolean":typeof s=="symbol"?"symbol":typeof s=="bigint"?"bigint":typeof s=="function"?"function":Number.isFinite(s)?"number":Number.isNaN(s)?"nan":Array.isArray(s)?"array":s instanceof Date?"date":s instanceof RegExp?"regexp":s instanceof Promise?"promise":s instanceof Error?"error":s instanceof Map?"map":s instanceof Set?"set":s instanceof WeakMap?"weakmap":s instanceof WeakSet?"weakset":s instanceof ArrayBuffer?"arraybuffer":ArrayBuffer.isView(s)?"typedarray":s instanceof URL||s instanceof URLSearchParams?"urllike":!Number.isFinite(s)&&typeof s=="number"?"infinity":typeof s}function ve(s,d,e=!1){var t;if(e&&(d==="string"||d==="number"||d==="boolean"||d==="bigint"||d==="null"||d==="undefined"))return d==="null"?"null":d==="undefined"?"undefined":j(String(s));switch(d){case"string":return j(s);case"number":return j(String(s));case"bigint":return j(String(s));case"boolean":return String(s);case"null":return"null";case"undefined":return"undefined";case"date":return j("[Date: ".concat(s.toISOString(),"]"));case"nan":return"[NaN]";case"regexp":return j(String(s));case"function":{let n=s.name||"anonymous",i=(t={AsyncFunction:"async",GeneratorFunction:"generator",AsyncGeneratorFunction:"async-generator"}[s.constructor.name])!=null?t:"",a=s.toString().trimStart().slice(0,20),l=!a.startsWith("function")&&!a.startsWith("async function")?"arrow ":"",o=i||l?"{".concat("".concat(l).concat(i).trim(),"}"):"";return j("[f ".concat(n," ").concat(o," ]"))}case"error":return j("[".concat(s.name,": ").concat(s.message,"]"));case"urllike":return j("[URL: ".concat(s.toString(),"]"));case"symbol":{let n=s.description!==void 0?j(s.description):"";return"Symbol(".concat(n,")")}case"weakmap":return"[WeakMap]";case"weakset":return"[WeakSet]";case"arraybuffer":return j(JSON.stringify(Array.from(new Uint8Array(s))));case"typedarray":return j(JSON.stringify(Array.from(s)));default:return"[".concat(j(d),"]")}}function ye(s,d){let e=d==="map"||d==="set"?s.size:d==="array"?s.length:Object.keys(s).length,t=d==="array"||d==="set"?e===1?"item":"items":d==="map"?e===1?"entry":"entries":e===1?"prop":"props";return"".concat(e," ").concat(t)}function ae(s,d,e){return s===""?String(d):e==="array"?"".concat(s,"[").concat(d,"]"):/[^a-zA-Z0-9_$]/.test(String(d))?"".concat(s,'["').concat(String(d).replace(/\\/g,"\\\\").replace(/"/g,'\\"'),'"]'):"".concat(s,".").concat(d)}function U(s){if(typeof s=="string")try{return JSON.parse(s)}catch{}return s}function be(s){return s===null?"null":s===void 0?"undefined":typeof s=="string"?s:typeof s=="number"||typeof s=="boolean"||typeof s=="bigint"||s instanceof RegExp?String(s):"(".concat(se(s),")")}function ie(s,d){let{maxDepth:e,collapsed:t,editable:n,interactive:r,key:i,path:a,depth:l,seen:o,parentType:y,maxChildren:f,budget:b}=d,c=se(s),x=c==="object"||c==="array"||c==="map"||c==="set",g=i!=null?String(i):null,u=j(a!==""?a:"(root)"),v=g!==null?j(g):null,P=i!=null&&typeof i!="number"&&y==="object",w=n&&r&&P;if(b.remaining<=0)return'<div class="jv-node jv-leaf jv-truncated" role="treeitem" tabindex="-1" data-jv-path="'.concat(u,'" data-jv-type="truncated">\u2026 node limit reached</div>');b.remaining--;let K=v!==null?w?'<span class="jv-key" contenteditable="true" spellcheck="false" data-jv-key-editable="true" data-jv-path="'.concat(u,'" aria-label="Edit key name">').concat(v,'</span><span class="jv-sep">:</span> '):r?'<span class="jv-key" data-jv-copy="path" title="Copy path: '.concat(u,'">').concat(v,'</span><span class="jv-sep">:</span> '):'<span class="jv-key">'.concat(v,'</span><span class="jv-sep">:</span> '):"",z=v!==null?w?'<span class="jv-key" contenteditable="true" spellcheck="false" data-jv-key-editable="true" data-jv-path="'.concat(u,'" aria-label="Edit key name">').concat(v,'</span><span class="jv-sep">:</span> '):'<span class="jv-key">'.concat(v,'</span><span class="jv-sep">:</span> '):"";if(x){if(o.has(s))return'<div class="jv-node jv-leaf jv-circular" role="treeitem" tabindex="0" data-jv-path="'.concat(u,'" data-jv-type="').concat(c,'">')+"".concat(K,'<span class="jv-circular" title="Circular reference">[Circular \u21BA]</span>')+(r?'<button class="jv-copy" data-jv-copy="path" aria-label="Copy path to clipboard" title="Copy path to clipboard" tabindex="-1">\u2398</button>':"")+"</div>";o.add(s)}if(!x){let A=n&&(c==="string"||c==="number"||c==="boolean"||c==="bigint"||c==="null"||c==="undefined"),D=ve(s,c,A),G=A?' contenteditable="true" spellcheck="false" data-jv-editable="true" data-jv-type="'.concat(c,'" aria-label="Edit ').concat(c,' value"'):"",ce='<span class="jv-val jv-'.concat(c,'"').concat(G,">").concat(D,"</span>");return'<div class="jv-node jv-leaf jv-'.concat(c,'" role="treeitem" tabindex="0" data-jv-path="').concat(u,'" data-jv-type="').concat(c,'">')+"".concat(K).concat(ce)+(r?'<button class="jv-copy" data-jv-copy="value" aria-label="Copy value to clipboard" title="Copy value to clipboard" tabindex="-1">\u2398</button>':"")+(r&&n?'<button class="jv-delete" aria-label="Delete entry" title="Delete entry" tabindex="-1">\xD7</button>':"")+"</div>"}let S=!t&&l<e?" open":"",_=c==="array"||c==="set"?"[":"{",H=c==="array"||c==="set"?"]":"}",F=c==="map"?"Map":c==="set"?"Set":"",J=ye(s,c),W=c==="map"?Array.from(s.keys()):null,B=c==="array"||c==="set"?Array.from(s,(A,D)=>[D,A]):c==="map"?Array.from(s.values()).map((A,D)=>[D,A]):Object.entries(s),R=f>0&&B.length>f?B.length-f:0,oe=R>0?B.slice(0,f):B,Y="";if(R>0){let A=c==="array"||c==="set"?R===1?"item":"items":R===1?"prop":"props";Y='<div class="jv-node jv-leaf jv-truncated" role="treeitem" tabindex="-1">\u2026 '.concat(R," more ").concat(A," not shown (max-children=").concat(f,")</div>")}let le=oe.map(([A,D])=>{let G=c==="map"?be(W[A]):A;return ie(D,{...d,key:G,path:ae(a,A,c==="map"||c==="set"?"array":c),depth:l+1,parentType:c})}).join("")+Y;return o.delete(s),'<details class="jv-node jv-'.concat(c,'"').concat(S,' data-jv-path="').concat(u,'" data-jv-type="').concat(c,'">')+"<summary>".concat(z,'<span class="jv-bracket">').concat(F).concat(_,"</span>").concat(r&&n&&(c==="object"||c==="array")?'<button class="jv-add" aria-label="Add entry to '.concat(j(c),'" title="Add entry" tabindex="-1">+</button>'):"").concat(r&&n&&l>0?'<button class="jv-delete" aria-label="Delete entry" title="Delete entry" tabindex="-1">\xD7</button>':"",'<span class="jv-hint"> ').concat(H," ").concat(J,"</span></summary>")+'<div class="jv-children" role="group">'.concat(le,"</div>")+'<span class="jv-bracket-close">'.concat(H,"</span>")+(r?'<button class="jv-copy" data-jv-copy="value" aria-label="Copy value as JSON to clipboard" title="Copy value as JSON to clipboard" tabindex="-1">\u2398</button>':"")+"</details>"}function ne(s,d={}){let e=typeof d.maxDepth=="number"?Math.max(0,d.maxDepth):2,t=!!d.collapsed,n=!!d.editable,r=d.interactive===!0,i=d.includeStyles!==!1,a=typeof d.maxChildren=="number"?Math.max(0,d.maxChildren):Q,l={remaining:a>0?a*500:pe},o=U(s),y=r?'<div class="jv-search-row jv-hidden" role="search"><input type="search" class="jv-search" placeholder="Search keys or values\u2026" aria-label="Search JSON keys and values"></div>':"",f=r?'<div class="jv-controls" role="toolbar" aria-label="JSON viewer controls"><button class="jv-btn jv-collapse-all" aria-label="Collapse all nodes" title="Collapse all">\u229F</button><button class="jv-btn jv-expand-all" aria-label="Expand all nodes" title="Expand all">\u229E</button><button class="jv-btn jv-search-toggle" aria-label="Toggle search" title="Search" aria-expanded="false">\u{1F50D}</button></div>':"",b=ie(o,{maxDepth:e,collapsed:t,editable:n,interactive:r,key:null,path:"",depth:0,seen:new WeakSet,parentType:null,maxChildren:a,budget:l}),c=i?"<style>".concat(re,"</style>"):"";return"".concat(c).concat(y,'<div class="jv-tree-wrap">').concat(f,'<div class="jv-tree" role="tree" aria-label="JSON data tree">').concat(b,"</div></div>")}var $,V,L,E,T,I,C,q,O=class extends te{constructor(){super();N(this,$);N(this,V,2);N(this,L,!1);N(this,E,null);N(this,T,!1);N(this,I,Q);N(this,C,"");N(this,q,null)}static get observedAttributes(){return["data","max-depth","max-children","collapsed","filter-type","editable","name"]}get data(){return p(this,$)}set data(e){h(this,$,U(e)),h(this,C,""),this.connected&&this._render()}get maxDepth(){return p(this,V)}set maxDepth(e){let t=parseInt(e,10);h(this,V,isNaN(t)?2:Math.max(0,t)),this.connected&&this._render()}get collapsed(){return p(this,L)}set collapsed(e){h(this,L,e===!0||e===""||e==="true"||e==="collapsed"),this.connected&&this._render()}get filterType(){return p(this,E)}set filterType(e){h(this,E,e&&e!=="all"?e:null),this.connected&&this._applyTypeFilter()}get editable(){return p(this,T)}set editable(e){h(this,T,e===!0||e===""||e==="true"||e==="editable"),this.connected&&this._render()}get maxChildren(){return p(this,I)}set maxChildren(e){let t=parseInt(e,10);h(this,I,isNaN(t)?Q:Math.max(0,t)),this.connected&&this._render()}connectedCallback(){this._connect(),this.prependStylesheet(re),this.hasAttribute("data")&&h(this,$,U(this.getAttribute("data"))),this.hasAttribute("max-depth")&&(this.maxDepth=this.getAttribute("max-depth")),this.hasAttribute("collapsed")&&h(this,L,!0),this.hasAttribute("filter-type")&&h(this,E,this.getAttribute("filter-type")||null),this.hasAttribute("editable")&&h(this,T,!0),this.hasAttribute("max-children")&&(this.maxChildren=this.getAttribute("max-children")),this._render(),h(this,q,new AbortController);let{signal:e}=p(this,q);this.addEventListener("click",this._onClickCapture.bind(this),{signal:e,capture:!0}),this.addEventListener("click",this._onClick.bind(this),{signal:e}),this.addEventListener("keydown",this._onKeydown.bind(this),{signal:e}),this.addEventListener("input",this._onSearchInput.bind(this),{signal:e}),this.addEventListener("focusout",this._onValueCommit.bind(this),{signal:e}),this.addEventListener("toggle",this._onToggle.bind(this),{signal:e,capture:!0}),this._ready()}disconnectedCallback(){var e;(e=p(this,q))==null||e.abort(),h(this,q,null),this._disconnect()}attributeChangedCallback(e,t,n){if(t!==n){switch(e){case"data":h(this,$,U(n)),h(this,C,""),this.connected&&this._render();break;case"max-depth":this.maxDepth=n;break;case"collapsed":h(this,L,n!==null),this.connected&&this._render();break;case"filter-type":h(this,E,n&&n!=="all"?n:null),this.connected&&this._applyTypeFilter();break;case"editable":h(this,T,n!==null),this.connected&&this._render();break;case"max-children":this.maxChildren=n;break;default:break}this._event("attribChanged",{attribute:e,newVal:n,oldVal:t})}}collapseAll(){this.querySelectorAll("details.jv-node").forEach(e=>e.removeAttribute("open")),this._event("toggle",{path:"*",expanded:!1})}expandAll(){this.querySelectorAll("details.jv-node").forEach(e=>e.setAttribute("open","")),this._event("toggle",{path:"*",expanded:!0})}search(e){let t=e.trim();h(this,C,t);let n=this.querySelector(".jv-search-row"),r=this.querySelector(".jv-search-toggle"),i=this.querySelector(".jv-search");i&&(i.value=t),t?(n&&n.classList.remove("jv-hidden"),r&&r.setAttribute("aria-expanded","true")):(n&&n.classList.add("jv-hidden"),r&&r.setAttribute("aria-expanded","false")),this._applySearch(t)}_render(){if(this.innerHTML=ne(p(this,$),{maxDepth:p(this,V),collapsed:p(this,L),editable:p(this,T),interactive:!0,maxChildren:p(this,I)}),p(this,C)){let e=this.querySelector(".jv-search-row"),t=this.querySelector(".jv-search-toggle"),n=this.querySelector(".jv-search");e&&e.classList.remove("jv-hidden"),t&&t.setAttribute("aria-expanded","true"),n&&(n.value=p(this,C)),this._applySearch(p(this,C))}p(this,E)&&this._applyTypeFilter()}_applySearch(e){let t=this.querySelector(".jv-tree");if(!t)return;let n=t.querySelectorAll(".jv-node");if(!e){n.forEach(a=>a.classList.remove("jv-hidden"));return}let r=e.toLowerCase();n.forEach(a=>a.classList.add("jv-hidden")),n.forEach(a=>{var b,c,x,g,u,v,P;let l=(b=a.querySelector(":scope > .jv-key"))!=null?b:a.querySelector(":scope > summary > .jv-key"),o=(c=a.querySelector(":scope > .jv-val"))!=null?c:a.querySelector(":scope > summary > .jv-val"),y=((x=l==null?void 0:l.textContent)!=null?x:"").toLowerCase(),f=((g=o==null?void 0:o.textContent)!=null?g:"").toLowerCase();if(y.includes(r)||f.includes(r)){a.classList.remove("jv-hidden");let w=(u=a.parentElement)==null?void 0:u.closest(".jv-node");for(;w;)w.classList.remove("jv-hidden"),((v=w.tagName)==null?void 0:v.toLowerCase())==="details"&&w.setAttribute("open",""),w=(P=w.parentElement)==null?void 0:P.closest(".jv-node")}});let i=this.querySelectorAll(".jv-node.jv-leaf:not(.jv-hidden)").length;this._event("search",{query:e,matches:i})}_applyTypeFilter(){let e=this.querySelector(".jv-tree");if(!e)return;let t=e.querySelectorAll(".jv-node");if(!p(this,E)){t.forEach(r=>r.classList.remove("jv-hidden"));return}let n=p(this,E);t.forEach(r=>r.classList.add("jv-hidden")),t.forEach(r=>{var i,a,l;if(r.dataset.jvType===n){r.classList.remove("jv-hidden");let o=(i=r.parentElement)==null?void 0:i.closest(".jv-node");for(;o;)o.classList.remove("jv-hidden"),((a=o.tagName)==null?void 0:a.toLowerCase())==="details"&&o.setAttribute("open",""),o=(l=o.parentElement)==null?void 0:l.closest(".jv-node")}})}_onClickCapture(e){let t=e.target;if(!t.classList.contains("jv-add")&&!t.classList.contains("jv-delete"))return;e.stopPropagation(),e.preventDefault();let n=t.closest(".jv-node");n&&(t.classList.contains("jv-add")?this._handleAdd(n):this._handleDelete(n))}_onClick(e){let t=e.target;if(t.classList.contains("jv-copy")){e.preventDefault(),e.stopPropagation(),this._handleCopy(t);return}if(t.classList.contains("jv-key")&&t.dataset.jvCopy==="path"){e.preventDefault();let n=t.closest(".jv-node");n&&this._copyPath(n);return}if(t.classList.contains("jv-collapse-all")){this.collapseAll();return}if(t.classList.contains("jv-expand-all")){this.expandAll();return}if(t.classList.contains("jv-search-toggle")){let n=this.querySelector(".jv-search-row");if(n&&!n.classList.contains("jv-hidden")){let i=this.querySelector(".jv-search");i&&(i.value=""),h(this,C,""),this._applySearch(""),n&&n.classList.add("jv-hidden"),t.setAttribute("aria-expanded","false")}else{n&&n.classList.remove("jv-hidden"),t.setAttribute("aria-expanded","true");let i=this.querySelector(".jv-search");i&&(i.focus(),i.select())}return}}_onKeydown(e){var b,c,x,g,u,v,P,w,K,z;let t=e.target;if((b=t.dataset)!=null&&b.jvKeyEditable||(c=t.dataset)!=null&&c.jvEditable||t.closest("[contenteditable]")){if(e.key==="Enter")e.preventDefault(),t.blur();else if(e.key==="Tab"&&((x=t.dataset)!=null&&x.jvKeyEditable)){e.preventDefault();let m=t;this._onKeyCommit(m);let S=(g=m.dataset.jvPath)!=null?g:"",_=this._splitLastSegment(S),H=(v=(u=m.textContent)==null?void 0:u.trim())!=null?v:_?String(_.key):"",F=(P=_==null?void 0:_.parentPath)!=null?P:"",J=F?"".concat(F,".").concat(H):H,W=(w=this.querySelector('[data-jv-path="'.concat(J,'"] > .jv-val[contenteditable]')))!=null?w:this.querySelector('[data-jv-path="'.concat(J,'"] > .jv-val'));W&&W.focus()}return}let n=t.classList.contains("jv-node")?t:t.closest(".jv-node");if(!n)return;let r=this.querySelector(".jv-tree");if(!r)return;let a=Array.from(r.querySelectorAll(".jv-node:not(.jv-hidden)")).filter(m=>{var _;let S=m.parentElement;for(;S&&S!==r;){if(((_=S.tagName)==null?void 0:_.toLowerCase())==="details"&&!S.hasAttribute("open")&&S.classList.contains("jv-node"))return!1;S=S.parentElement}return!0}),l=a.indexOf(n),o=m=>{var S,_;m&&(((S=m.tagName)==null?void 0:S.toLowerCase())==="details"?(_=m.querySelector(":scope > summary"))==null||_.focus():m.focus())},y=((K=n.tagName)==null?void 0:K.toLowerCase())==="details",f=y&&n.hasAttribute("open");switch(e.key){case"ArrowDown":{e.preventDefault(),l<a.length-1&&o(a[l+1]);break}case"ArrowUp":{e.preventDefault(),l>0&&o(a[l-1]);break}case"ArrowRight":{if(e.preventDefault(),y&&!f)n.setAttribute("open","");else if(y&&f){let m=n.querySelector(".jv-children > .jv-node");o(m)}break}case"ArrowLeft":{if(e.preventDefault(),y&&f)n.removeAttribute("open");else{let m=(z=n.parentElement)==null?void 0:z.closest(".jv-node");o(m)}break}case"Home":{e.preventDefault(),a.length>0&&o(a[0]);break}case"End":{e.preventDefault(),a.length>0&&o(a[a.length-1]);break}case"c":{(e.ctrlKey||e.metaKey)&&(e.preventDefault(),e.shiftKey?this._copyValue(n):this._copyPath(n));break}default:break}}_onToggle(e){var i,a,l;let t=e.target;if(!((i=t==null?void 0:t.classList)!=null&&i.contains("jv-node")))return;let n=t.hasAttribute("open"),r=(l=(a=t.dataset)==null?void 0:a.jvPath)!=null?l:"";this._event("toggle",{path:r,expanded:n})}_onSearchInput(e){let t=e.target;t.classList.contains("jv-search")&&(h(this,C,t.value.trim()),this._applySearch(p(this,C)))}_onValueCommit(e){var y,f,b,c,x,g;let t=e.target;if((y=t.dataset)!=null&&y.jvKeyEditable){this._onKeyCommit(t);return}if(!((f=t.dataset)!=null&&f.jvEditable))return;let n=t.closest(".jv-node");if(!n)return;let r=(b=n.dataset.jvPath)!=null?b:"",i=(c=t.dataset.jvType)!=null?c:"string",a=(g=(x=t.textContent)==null?void 0:x.trim())!=null?g:"",l=this._getValueAtPath(r),o;{let u=a.trim();if(u.length>1&&(u[0]==="{"&&u[u.length-1]==="}"||u[0]==="["&&u[u.length-1]==="]"))try{let v=JSON.parse(u);typeof v=="object"&&v!==null&&(o=v)}catch{}}if(o===void 0)if(a==="null")o=null;else if(a==="undefined")o=void 0;else if(a==="true")o=!0;else if(a==="false")o=!1;else if(a==="NaN")o=NaN;else if(a.length>=2&&a[0]==='"'&&a[a.length-1]==='"')o=a.slice(1,-1);else if(/^-?\d+n$/.test(a))try{o=BigInt(a.slice(0,-1))}catch{o=a}else a!==""&&!isNaN(Number(a))?o=Number(a):o=a;if(!Object.is(o,l)){if(this._event("change",{path:r,oldValue:l,newValue:o,changeType:"valueEdited"}),this.uib){let u=typeof o=="bigint"?"".concat(String(o),"n"):o,v=typeof l=="bigint"?"".concat(String(l),"n"):l;this.uibSend("change",{path:r,oldValue:v,newValue:u,changeType:"valueEdited"})}this._setValueAtPath(r,o),this._render()}}_toggleNode(e){var t;((t=e==null?void 0:e.tagName)==null?void 0:t.toLowerCase())==="details"&&(e.hasAttribute("open")?e.removeAttribute("open"):e.setAttribute("open",""))}_copyPath(e){var n;let t=(n=e.dataset.jvPath)!=null?n:"";this._writeClipboard(t,"path",t)}_getValueAtPath(e){if(!e||e==="(root)")return p(this,$);let n=e.replace(/\[(\d+)\]/g,".$1").replace(/\[["'](.+?)["']\]/g,".$1").split(".").filter(Boolean),r=p(this,$);for(let i of n){if(r==null||typeof r!="object")return;r instanceof Map?r=Array.from(r.values())[parseInt(i,10)]:r instanceof Set?r=Array.from(r)[parseInt(i,10)]:r=r[i]}return r}_setValueAtPath(e,t){if(!e||e==="(root)"){h(this,$,t);return}let n=this._splitLastSegment(e);if(!n){h(this,$,t);return}let r=this._getValueAtPath(n.parentPath||"");if(!(r==null||typeof r!="object"))if(r instanceof Map){let i=Array.from(r.keys())[parseInt(String(n.key),10)];i!==void 0&&r.set(i,t)}else if(r instanceof Set){let i=Array.from(r);i[parseInt(String(n.key),10)]=t,r.clear(),i.forEach(a=>r.add(a))}else r[n.key]=t}_onKeyCommit(e){var a,l,o;let t=(a=e.dataset.jvPath)!=null?a:"",n=(o=(l=e.textContent)==null?void 0:l.trim())!=null?o:"",r=this._splitLastSegment(t),i=r?String(r.key):"";if(!n||n===i){e.textContent=i;return}r&&this._renameKey(r.parentPath,i,n)}_renameKey(e,t,n){let r=this._getValueAtPath(e);if(r==null||typeof r!="object"||Array.isArray(r)||Object.prototype.hasOwnProperty.call(r,n))return;let i=Object.entries(r);for(let a of Object.keys(r))delete r[a];for(let[a,l]of i)r[a===t?n:a]=l;this._render(),this._event("rename",{parentPath:e,oldKey:t,newKey:n}),this.uib&&this.uibSend("rename",{parentPath:e,oldKey:t,newKey:n})}_handleAdd(e){var i,a;let t=(i=e.dataset.jvPath)!=null?i:"",n=(a=e.dataset.jvType)!=null?a:"object",r=this._getValueAtPath(t);if(n==="array"&&Array.isArray(r)){r.push(null);let l=t==="(root)"||t===""?String(r.length-1):"".concat(t,"[").concat(r.length-1,"]"),o=r.slice(0,-1);this._render(),this._event("add",{path:t,type:n,newValue:null,newPath:l}),this._event("change",{path:t,oldValue:o,newValue:[...r],changeType:"addedProperty"}),this.uib&&this.uibSend("add",{path:t,type:n,newValue:null,newPath:l,changeType:"addedProperty"})}else if(n==="object"&&r!==null&&typeof r=="object"&&!Array.isArray(r)){let l="new_key",o=1;for(;Object.prototype.hasOwnProperty.call(r,l);)l="new_key_".concat(o++);r[l]=null;let y={...r};delete y[l],this._render(),this._event("add",{path:t,type:n,newKey:l,newValue:null}),this._event("change",{path:t,oldValue:y,newValue:{...r},changeType:"addedProperty"}),this.uib&&this.uibSend("add",{path:t,type:n,newKey:l,newValue:null,changeType:"addedProperty"});let b=ae(t==="(root)"?"":t,l,"object"),c=this.querySelector('[data-jv-key-editable][data-jv-path="'.concat(b,'"]'));if(c){c.focus();let x=document.createRange();x.selectNodeContents(c);let g=window.getSelection();g&&(g.removeAllRanges(),g.addRange(x))}}}_handleDelete(e){var f,b;let t=(f=e.dataset.jvPath)!=null?f:"",n=(b=e.dataset.jvType)!=null?b:"string",r=this._getValueAtPath(t),i=this._splitLastSegment(t);if(!i)return;let a=this._getValueAtPath(i.parentPath);if(a==null||typeof a!="object")return;let l;if(Array.isArray(a)?l=[...a]:a instanceof Map?l=new Map(a):a instanceof Set?l=new Set(a):l={...a},Array.isArray(a))a.splice(Number(i.key),1);else if(a instanceof Map){let c=Array.from(a.keys())[Number(i.key)];c!==void 0&&a.delete(c)}else if(a instanceof Set){let c=Array.from(a)[Number(i.key)];a.delete(c)}else delete a[i.key];let o;Array.isArray(a)?o=[...a]:a instanceof Map?o=new Map(a):a instanceof Set?o=new Set(a):o={...a},this._render(),this._event("delete",{path:t,type:n,oldValue:r});let y=i.parentPath||"(root)";this._event("change",{path:y,oldValue:l,newValue:o,changeType:"removedProperty"}),this.uib&&this.uibSend("delete",{path:t,type:n,parentPath:y,newValue:o,changeType:"removedProperty"})}_splitLastSegment(e){if(!e||e==="(root)")return null;let t=/^(.*?)\[(\d+)\]$/.exec(e);if(t)return{parentPath:t[1],key:parseInt(t[2],10)};let n=/^(.*?)\[["'](.+?)["']\]$/.exec(e);if(n)return{parentPath:n[1],key:n[2].replace(/\\"/g,'"').replace(/\\\\/g,"\\")};let r=e.lastIndexOf(".");return r!==-1?{parentPath:e.slice(0,r),key:e.slice(r+1)}:{parentPath:"",key:e}}_copyValue(e){var i,a;let t=(i=e.dataset.jvPath)!=null?i:"",n=e.classList.contains("jv-object")||e.classList.contains("jv-array"),r;if(n){let l=this._getValueAtPath(t);try{r=JSON.stringify(l,null,2)}catch{r=String(l)}}else{let l=e.querySelector(":scope > .jv-val"),o=(a=l==null?void 0:l.textContent)!=null?a:"";r=e.dataset.jvType==="string"?'"'.concat(o,'"'):o}this._writeClipboard(r!=null?r:"","value",t)}_handleCopy(e){var r;let t=e.closest(".jv-node");if(!t)return;((r=e.dataset.jvCopy)!=null?r:"path")==="value"?this._copyValue(t):this._copyPath(t)}async _writeClipboard(e,t,n){try{await navigator.clipboard.writeText(e)}catch{let i=document.createElement("textarea");i.value=e,i.style.cssText="position:fixed;opacity:0;pointer-events:none",document.body.appendChild(i),i.select(),document.execCommand("copy"),document.body.removeChild(i)}this._event("copy",{path:n,text:e,kind:t})}};$=new WeakMap,V=new WeakMap,L=new WeakMap,E=new WeakMap,T=new WeakMap,I=new WeakMap,C=new WeakMap,q=new WeakMap,k(O,"componentVersion",fe),k(O,"renderToHTML",ne);typeof customElements<"u"&&(customElements.define("json-viewer",O),window.JsonViewer=O);var _e=O;})(); //# sourceMappingURL=json-viewer.iife.min.js.map