@pictogrammers/components 0.4.1 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/pg/app/app.css

@@ -62,8 +62,6 @@
 }
 
 slot[name=main] {
-  display: flex;
-  flex-direction: column;
   grid-column: 3;
   grid-row: 2;
 }

package/pg/treeItem/treeItem.css

@@ -18,6 +18,7 @@
   font-family: var(--pg-font-family);
   font-size: var(--pg-tree-item-font-size, 1rem);
 }
+
 [part=labelButton] {
   display: flex;
   background: transparent;
@@ -29,7 +30,13 @@
   font-family: var(--pg-font-family);
   font-size: var(--pg-tree-item-font-size, 1rem);
   margin: -0.25rem -0.25rem -0.25rem -0.25rem;
-  padding: 0 0.75rem 0 0.25rem;
+  padding: 0 0.25rem 0 0.25rem;
+}
+
+[part=label] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 [part=input] {
@@ -58,7 +65,7 @@
 }
 
 [part=item] {
-  grid-template-columns: min-content min-content auto min-content;
+  grid-template-columns: min-content min-content minmax(0, 1fr) min-content;
   grid-template-rows: auto;
 }
 [part=item] [part=selected] {

package/pgApp.js

@@ -1 +1 @@
-(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);o&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},601:e=>{e.exports=function(e){return e[1]}},801:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(601),r=n.n(o),i=n(314),a=n.n(i)()(r());a.push([e.id,":host {\n  display: contents;\n}\n\n[part=grid] {\n  display: grid;\n  grid-template-columns: auto 0.5rem 1fr;\n  grid-template-rows: auto 1fr;\n  height: 100%;\n}\n\n[part=header] {\n  display: flex;\n  grid-column: 1 / 4;\n  grid-row: 1;\n  border-bottom: 2px solid #453C4F;\n}\n\n[part=header] > button {\n  display: flex;\n  border: 0;\n  padding: 0.5rem;\n  background-color: transparent;\n  border-right: 1px solid rgba(69, 60, 79, 0.5);\n  outline: none;\n}\n\n[part=header] > button:hover {\n  background-color: rgba(69, 60, 79, 0.10);\n}\n\n[part=header] > button:focus-visible {\n  position: relative;\n}\n\n[part=header] > button:focus-visible::before {\n  pointer-events: none;\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));\n}\n\n[part=header] > button.selected {\n  --pg-icon-color: rgb(79, 143, 249);\n}\n\n[part=header] > button.selected:hover {\n  background-color: #fff;\n}\n\n[part=side] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1;\n  grid-row: 2;\n  min-width: 10rem;\n  max-width: 20rem;\n}\n\nslot[name=main] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 3;\n  grid-row: 2;\n}\n\n[part=resize] {\n  display: flex;\n  grid-column: 2;\n  grid-row: 2;\n  border: 0;\n  padding: 0;\n  cursor: ew-resize;\n  border-left: 1px solid #453C4F;\n  border-right: 1px solid #453C4F;\n  background-color: transparent;\n}\n\n[part=resize].dragging {\n  background-color: var(--pg-focus-color, rgb(79, 143, 249, 0.5))\n}\n\n[part=home] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1 / 4;\n  grid-row: 2;\n  background-color: #fff;\n  position: relative;\n}\n\n[part=home]::before {\n  content: ' ';\n  position: absolute;\n  top: -2px;\n  width: 2.5rem;\n  height: 2px;\n  background-color: #fff;\n}\n\n[part=home].selected {\n  background-color: #fff;\n}\n\n.hide {\n  display: none;\n}",""]);var s=new CSSStyleSheet;s.replaceSync(a.toString());const l=s}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={id:o,exports:{}};return e[o](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("isProxy"),Symbol("getTarget");const o=new Map;window.observers=o;Error;Symbol("index");const r=Symbol("init"),i=Symbol("template"),a=Symbol("style"),s=Symbol("parent");function l(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var o,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[s]||t.prototype[s][t.prototype[s].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[s]=[t.prototype],t.prototype[a]=e.style?[e.style]:[],t.prototype[i]=e.template||""):(t.prototype[s].push(t.prototype),t.prototype[a].push(e.style),t.prototype[i]=(o=t.prototype[i],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,o):`${o}${c||""}`));const d=t.prototype.connectedCallback||(()=>{}),p=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[i]||"";const n=document.importNode(e.content,!0),o=this.attachShadow({mode:"open"});o.adoptedStyleSheets=t.prototype[a].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),o.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const o=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[s].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[l(t)]=!0,e)),{}):{})}))};0===o.length?(this[r]=!0,d.call(this),c()):Promise.all(o).then((()=>{this[r]=!0,d.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){p.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[l(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function d(){return function(e,t){const n=t.name,o=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${o}]`))}})}))}}Symbol("hasProxy");Symbol("meta");var p=n(801),u=function(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?o.static?e:e.prototype:null,p=t||(d?Object.getOwnPropertyDescriptor(d,o.name):{}),u=!1,h=n.length-1;h>=0;h--){var m={};for(var f in o)m[f]="access"===f?{}:o[f];for(var f in o.access)m.access[f]=o.access[f];m.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var g=(0,n[h])("accessor"===l?{get:p.get,set:p.set}:p[c],m);if("accessor"===l){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(s=a(g.get))&&(p.get=s),(s=a(g.set))&&(p.set=s),(s=a(g.init))&&r.unshift(s)}else(s=a(g))&&("field"===l?r.unshift(s):p[c]=s)}d&&Object.defineProperty(d,o.name,p),u=!0},h=function(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0};(()=>{let e,t,n,o,r,i,a=[c({selector:"pg-app",style:p.A,template:'<div part="grid"> <header part="header"> <button part="logo"> <slot name="icon"></slot> </button> <slot name="top"></slot> </header> <div part="side"> <slot name="side"></slot> </div> <button part="resize"></button> <slot name="main"></slot> <div part="home" class="hide"> <slot name="home"></slot> </div> </div>'})],s=[],l=HTMLElement,m=[],f=[],g=[],b=[],y=[],v=[],w=[],S=[];(class extends l{static{t=this}static{const c="function"==typeof Symbol&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;n=[d()],o=[d()],r=[d()],i=[d()],u(null,null,n,{kind:"field",name:"$logo",static:!1,private:!1,access:{has:e=>"$logo"in e,get:e=>e.$logo,set:(e,t)=>{e.$logo=t}},metadata:c},m,f),u(null,null,o,{kind:"field",name:"$home",static:!1,private:!1,access:{has:e=>"$home"in e,get:e=>e.$home,set:(e,t)=>{e.$home=t}},metadata:c},g,b),u(null,null,r,{kind:"field",name:"$side",static:!1,private:!1,access:{has:e=>"$side"in e,get:e=>e.$side,set:(e,t)=>{e.$side=t}},metadata:c},y,v),u(null,null,i,{kind:"field",name:"$resize",static:!1,private:!1,access:{has:e=>"$resize"in e,get:e=>e.$resize,set:(e,t)=>{e.$resize=t}},metadata:c},w,S),u(null,e={value:t},a,{kind:"class",name:t.name,metadata:c},null,s),t=e.value,c&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),h(t,s)}$logo=h(this,m,void 0);$home=(h(this,f),h(this,g,void 0));$side=(h(this,b),h(this,y,void 0));$resize=(h(this,v),h(this,w,void 0));connectedCallback(){this.$logo.addEventListener("click",this.#e.bind(this)),this.$resize.addEventListener("pointerdown",this.#t.bind(this))}#e(){this.$logo.classList.toggle("selected"),this.$home.classList.toggle("hide")}#t(e){const{clientX:t}=e;this.$resize.classList.add("dragging");const n=this.$side.getBoundingClientRect().width;let o=t;const r=e=>{const t=o-e.clientX,r=n-t;this.$side.style.width=`${r}px`},i=()=>{this.$resize.classList.remove("dragging"),document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",i)};document.addEventListener("pointermove",r),document.addEventListener("pointerup",i)}constructor(){super(...arguments),h(this,S)}})})()})();
+(()=>{"use strict";var e={314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);o&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},601:e=>{e.exports=function(e){return e[1]}},801:(e,t,n)=>{n.d(t,{A:()=>l});var o=n(601),r=n.n(o),i=n(314),a=n.n(i)()(r());a.push([e.id,":host {\n  display: contents;\n}\n\n[part=grid] {\n  display: grid;\n  grid-template-columns: auto 0.5rem 1fr;\n  grid-template-rows: auto 1fr;\n  height: 100%;\n}\n\n[part=header] {\n  display: flex;\n  grid-column: 1 / 4;\n  grid-row: 1;\n  border-bottom: 2px solid #453C4F;\n}\n\n[part=header] > button {\n  display: flex;\n  border: 0;\n  padding: 0.5rem;\n  background-color: transparent;\n  border-right: 1px solid rgba(69, 60, 79, 0.5);\n  outline: none;\n}\n\n[part=header] > button:hover {\n  background-color: rgba(69, 60, 79, 0.10);\n}\n\n[part=header] > button:focus-visible {\n  position: relative;\n}\n\n[part=header] > button:focus-visible::before {\n  pointer-events: none;\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));\n}\n\n[part=header] > button.selected {\n  --pg-icon-color: rgb(79, 143, 249);\n}\n\n[part=header] > button.selected:hover {\n  background-color: #fff;\n}\n\n[part=side] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1;\n  grid-row: 2;\n  min-width: 10rem;\n  max-width: 20rem;\n}\n\nslot[name=main] {\n  grid-column: 3;\n  grid-row: 2;\n}\n\n[part=resize] {\n  display: flex;\n  grid-column: 2;\n  grid-row: 2;\n  border: 0;\n  padding: 0;\n  cursor: ew-resize;\n  border-left: 1px solid #453C4F;\n  border-right: 1px solid #453C4F;\n  background-color: transparent;\n}\n\n[part=resize].dragging {\n  background-color: var(--pg-focus-color, rgb(79, 143, 249, 0.5))\n}\n\n[part=home] {\n  display: flex;\n  flex-direction: column;\n  grid-column: 1 / 4;\n  grid-row: 2;\n  background-color: #fff;\n  position: relative;\n}\n\n[part=home]::before {\n  content: ' ';\n  position: absolute;\n  top: -2px;\n  width: 2.5rem;\n  height: 2px;\n  background-color: #fff;\n}\n\n[part=home].selected {\n  background-color: #fff;\n}\n\n.hide {\n  display: none;\n}",""]);var s=new CSSStyleSheet;s.replaceSync(a.toString());const l=s}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={id:o,exports:{}};return e[o](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Symbol("addObserver"),Symbol("removeObserver"),Symbol("getObservers"),Symbol("isProxy"),Symbol("getTarget");const o=new Map;window.observers=o;Error;Symbol("index");const r=Symbol("init"),i=Symbol("template"),a=Symbol("style"),s=Symbol("parent");function l(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function c(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var o,c;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[s]||t.prototype[s][t.prototype[s].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[s]=[t.prototype],t.prototype[a]=e.style?[e.style]:[],t.prototype[i]=e.template||""):(t.prototype[s].push(t.prototype),t.prototype[a].push(e.style),t.prototype[i]=(o=t.prototype[i],(c=e.template||null)&&c.match(/<parent\/>/)?c.replace(/<parent\/>/,o):`${o}${c||""}`));const d=t.prototype.connectedCallback||(()=>{}),p=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[r]||void 0!==e.template||void 0!==e.style)if(this[r]){if(this[r]&&e.style);else if(this[r]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[i]||"";const n=document.importNode(e.content,!0),o=this.attachShadow({mode:"open"});o.adoptedStyleSheets=t.prototype[a].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),o.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const o=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),c=()=>{this[s].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[l(t)]=!0,e)),{}):{})}))};0===o.length?(this[r]=!0,d.call(this),c()):Promise.all(o).then((()=>{this[r]=!0,d.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));c()}))},t.prototype.disconnectedCallback=function(){p.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[l(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function d(){return function(e,t){const n=t.name,o=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${o}]`))}})}))}}Symbol("hasProxy");Symbol("meta");var p=n(801),u=function(e,t,n,o,r,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?o.static?e:e.prototype:null,p=t||(d?Object.getOwnPropertyDescriptor(d,o.name):{}),u=!1,h=n.length-1;h>=0;h--){var m={};for(var f in o)m[f]="access"===f?{}:o[f];for(var f in o.access)m.access[f]=o.access[f];m.addInitializer=function(e){if(u)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var g=(0,n[h])("accessor"===l?{get:p.get,set:p.set}:p[c],m);if("accessor"===l){if(void 0===g)continue;if(null===g||"object"!=typeof g)throw new TypeError("Object expected");(s=a(g.get))&&(p.get=s),(s=a(g.set))&&(p.set=s),(s=a(g.init))&&r.unshift(s)}else(s=a(g))&&("field"===l?r.unshift(s):p[c]=s)}d&&Object.defineProperty(d,o.name,p),u=!0},h=function(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0};(()=>{let e,t,n,o,r,i,a=[c({selector:"pg-app",style:p.A,template:'<div part="grid"> <header part="header"> <button part="logo"> <slot name="icon"></slot> </button> <slot name="top"></slot> </header> <div part="side"> <slot name="side"></slot> </div> <button part="resize"></button> <slot name="main"></slot> <div part="home" class="hide"> <slot name="home"></slot> </div> </div>'})],s=[],l=HTMLElement,m=[],f=[],g=[],b=[],y=[],v=[],w=[],S=[];(class extends l{static{t=this}static{const c="function"==typeof Symbol&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;n=[d()],o=[d()],r=[d()],i=[d()],u(null,null,n,{kind:"field",name:"$logo",static:!1,private:!1,access:{has:e=>"$logo"in e,get:e=>e.$logo,set:(e,t)=>{e.$logo=t}},metadata:c},m,f),u(null,null,o,{kind:"field",name:"$home",static:!1,private:!1,access:{has:e=>"$home"in e,get:e=>e.$home,set:(e,t)=>{e.$home=t}},metadata:c},g,b),u(null,null,r,{kind:"field",name:"$side",static:!1,private:!1,access:{has:e=>"$side"in e,get:e=>e.$side,set:(e,t)=>{e.$side=t}},metadata:c},y,v),u(null,null,i,{kind:"field",name:"$resize",static:!1,private:!1,access:{has:e=>"$resize"in e,get:e=>e.$resize,set:(e,t)=>{e.$resize=t}},metadata:c},w,S),u(null,e={value:t},a,{kind:"class",name:t.name,metadata:c},null,s),t=e.value,c&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),h(t,s)}$logo=h(this,m,void 0);$home=(h(this,f),h(this,g,void 0));$side=(h(this,b),h(this,y,void 0));$resize=(h(this,v),h(this,w,void 0));connectedCallback(){this.$logo.addEventListener("click",this.#e.bind(this)),this.$resize.addEventListener("pointerdown",this.#t.bind(this))}#e(){this.$logo.classList.toggle("selected"),this.$home.classList.toggle("hide")}#t(e){const{clientX:t}=e;this.$resize.classList.add("dragging");const n=this.$side.getBoundingClientRect().width;let o=t;const r=e=>{const t=o-e.clientX,r=n-t;this.$side.style.width=`${r}px`},i=()=>{this.$resize.classList.remove("dragging"),document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",i)};document.addEventListener("pointermove",r),document.addEventListener("pointerup",i)}constructor(){super(...arguments),h(this,S)}})})()})();

package/pgTree.js

@@ -1 +1 @@
-(()=>{"use strict";var e={84:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11%27 fill=%27rgb%2869 60 79%29%27 /></svg>"},122:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11%27 fill=%27white%27 /></svg>"},273:(e,t,n)=>{n.d(t,{A:()=>y});var i=n(601),s=n.n(i),a=n(314),r=n.n(a),o=n(417),d=n.n(o),l=new URL(n(630),n.b),c=new URL(n(122),n.b),h=new URL(n(432),n.b),p=new URL(n(84),n.b),m=r()(s()),g=d()(l),u=d()(c),b=d()(h),v=d()(p);m.push([e.id,`:host {\n  display: contents;\n  --y: calc(var(--x) + 1);\n}\n\n.hide {\n  display: none !important;\n}\n\n[part=iconButton] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  color: var(--pg-tree-item-color, #453C4F);\n  padding: 0;\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n  align-items: center;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n}\n[part=labelButton] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  color: var(--pg-tree-item-color, #453C4F);\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n  flex: 1;\n  align-items: center;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n  margin: -0.25rem -0.25rem -0.25rem -0.25rem;\n  padding: 0 0.75rem 0 0.25rem;\n}\n\n[part=input] {\n  display: flex;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n  border-radius: 0.125rem;\n  flex: 1;\n  outline: 0;\n  padding: 0 0.25rem;\n  margin: -0.125rem -0.625rem -0.125rem -0.25rem;\n  border-width: var(--pg-tree-item-border-width, 0);\n  border-style: solid;\n  border-color: var(--pg-tree-item-border-color, #453C4F);\n}\n\n[part=item] {\n  display: grid;\n  background: var(--pg-tree-item-background, transparent);\n  border-radius: 0.25rem;\n  padding: 0.25rem;\n  gap: 0 0.5rem;\n  user-select: none;\n  padding-left: calc((var(--x) * 0.5rem) + 0.25rem);\n  transition: background-color 0.1s ease-out;\n}\n\n[part=item] {\n  grid-template-columns: min-content min-content auto min-content;\n  grid-template-rows: auto;\n}\n[part=item] [part=selected] {\n  grid-row: 1;\n  grid-column: 1;\n}\n[part=item] [part=toggle] {\n  grid-row: 1;\n  grid-column: 1;\n}\n[part=item] [part=iconButton] {\n  grid-row: 1;\n  grid-column: 2;\n}\n[part=item] [part=labelButton] {\n  grid-row: 1;\n  grid-column: 3;\n}\n[part=item] [part=actions] {\n  grid-row: 1;\n  grid-column: 4;\n}\n[part=item] [part=dropabove] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  align-self: flex-start;\n  transform: translateY(-0.875rem);\n  height: 1rem;\n  margin: 0 -0.25rem 0 -0.25rem;\n  z-index: 1;\n}\n[part=item] [part=dropon] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  margin: 0.125rem -0.25rem;\n  z-index: 1;\n}\n[part=item]:not(.items) [part=dropon] {\n  display: none;\n}\n[part=item].items.expanded [part=dropbelow] {\n  display: none;\n}\n[part=item] [part=dropbelow] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  align-self: flex-end;\n  transform: translateY(0.875rem);\n  height: 1rem;\n  margin: 0 -0.25rem 0 -0.25rem;\n  z-index: 1;\n}\n\n[part=item]:not(.selected):not(.dragging):hover {\n  background: var(--pg-tree-selected-secondary, rgb(69, 60, 79, 0.1));\n}\n[part=item].selected:not(.dragging):hover {\n  background: var(--pg-tree-selected-secondary-hover, rgb(69, 60, 79, 0.1));\n}\n[part=item].selected,\n[part=item].items.selected {\n  background-color: var(--pg-tree-selected-secondary);\n}\n[part=item].items.selected:not(.expanded):not(.dragging) [part=toggle] {\n  border-radius: 0.125rem;\n  background-color: var(--pg-tree-selected-primary);\n  background-image: url(${g}) !important;\n}\n\n[part=item].items.selected.expanded:not(.dragging) [part=toggle] {\n  border-radius: 0.125rem;\n  background-color: var(--pg-tree-selected-primary);\n  background-image: url(${u}) !important;\n}\n\n[part=item].items [part=selected] {\n  display: none;\n}\n\n[part=item]:not(.items) [part=selected] {\n  visibility: hidden;\n  display: flex;\n  width: 1rem;\n  margin-left: -0.125rem;\n  margin-right: -0.375rem;\n  margin-top: -0.125rem;\n  margin-bottom: -0.125rem;\n  border-radius: 0.125rem;\n  background: var(--pg-tree-selected-primary);\n}\n\n[part=item]:not(.dragging):not(.items).selected [part=selected] {\n  visibility: visible;\n}\n\n[part=actions] {\n  display: flex;\n  gap: 0.25rem;\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n}\n\n[part=items] {\n  display: none;\n  flex-direction: column;\n  --x: calc(var(--y) + 1);\n  gap: 0.25rem;\n}\n[part=items].expanded {\n  display: flex;\n}\n\n[part=toggle] {\n  display: none;\n  margin-left: -0.125rem;\n  margin-right: -0.375rem;\n  margin-top: -0.125rem;\n  margin-bottom: -0.125rem;\n  padding: 0 0 0 1rem;\n  width: 1rem;\n  border: 0;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: transparent;\n}\n\n[part=toggle]:hover {\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 0.125rem;\n}\n\n[part=item].items:not(.expanded) [part=toggle] {\n  display: flex;\n  background-image: url(${b});\n}\n\n[part=item].items.expanded [part=toggle] {\n  display: flex;\n  background-image: url(${v});\n}\n\n[part=dropabove].drop::before,\n[part=dropbelow].drop::before {\n  content: ' ';\n  height: 0.25rem;\n  background-color: rgb(79, 143, 249);\n  border-radius: 0.125rem;\n  display: flex;\n  margin-top: 0.375rem;\n}\n\n[part=dropon].drop {\n  margin: -0.25rem !important;\n  border: 4px solid rgb(79, 143, 249);\n  border-radius: 0.25rem;\n}\n\n[part=item].dragging::after {\n  content: ' ';\n  display: flex;\n  grid-column: 1 / 5;\n  grid-row: 1;\n  border-radius: 0.25rem;\n  background: rgba(255, 255, 255, 0.5);\n  user-select: none;\n  margin: -0.25rem;\n  border: 2px dashed rgb(79, 143, 249);\n}\n[part=items].dragging {\n  --pg-_is-index-dragging: true;\n}\n[part=item].dragging [part=dropabove],\n[part=item].dragging [part=dropon],\n[part=item].dragging [part=dropbelow] {\n  display: none;\n}\n\n@container style(--pg-_is-dragging: false) {\n  [part=dropabove],\n  [part=dropon],\n  [part=dropbelow] {\n    display: none;\n  }\n}\n\n@container style(--pg-_is-index-dragging: true) {\n  [part=item]::after {\n    content: ' ';\n    display: flex;\n    grid-column: 1 / 5;\n    grid-row: 1;\n    border-radius: 0.25rem;\n    background: rgba(255, 255, 255, 0.5);\n    user-select: none;\n    margin: -0.25rem;\n  }\n  [part=dropabove],\n  [part=dropon],\n  [part=dropbelow] {\n    display: none;\n  }\n}\n`,""]);var f=new CSSStyleSheet;f.replaceSync(m.toString());const y=f},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,i,s,a){"string"==typeof e&&(e=[[null,e,void 0]]);var r={};if(i)for(var o=0;o<this.length;o++){var d=this[o][0];null!=d&&(r[d]=!0)}for(var l=0;l<e.length;l++){var c=[].concat(e[l]);i&&r[c[0]]||(void 0!==a&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=a),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),s&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=s):c[4]="".concat(s)),t.push(c))}},t}},417:e=>{e.exports=function(e,t){return t||(t={}),e?(e=String(e.__esModule?e.default:e),/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),t.hash&&(e+=t.hash),/["'() \t\n]|(%20)/.test(e)||t.needQuotes?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e):e}},432:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill=%27rgb%2869 60 79%29%27 /></svg>"},513:(e,t,n)=>{n.d(t,{A:()=>d});var i=n(601),s=n.n(i),a=n(314),r=n.n(a)()(s());r.push([e.id,':host {\n  display: contents;\n}\n\n[part="button"] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  padding: 0.125rem;\n  margin: -0.125rem;\n  border-radius: 0.125rem;\n}\n\n[part="button"]:hover {\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 0.125rem;\n}',""]);var o=new CSSStyleSheet;o.replaceSync(r.toString());const d=o},543:(e,t,n)=>{n.d(t,{A:()=>d});var i=n(601),s=n.n(i),a=n(314),r=n.n(a)()(s());r.push([e.id,":host {\n  display: contents;\n  --pg-tree-selected-primary: #453C4F;\n  --pg-tree-selected-secondary: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.1));\n  --pg-tree-selected-secondary-hover: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.2));\n}\n/*\n--pg-tree-item-background-selected\n*/\n:host(:focus-within) {\n  --pg-tree-selected-primary: rgb(79, 143, 249);\n  --pg-tree-selected-secondary: rgba(79, 143, 249, 0.15);\n  --pg-tree-selected-secondary-hover: rgba(79, 143, 249, 0.25);\n}\n\n[part=items] {\n  display: flex;\n  flex-direction: column;\n  background: var(--pg-tree-background, transparent);\n  padding: 0.25rem;\n  gap: 0.25rem;\n  --x: 0;\n  --pg-_is-dragging: false;\n}\n\n[part=items].dragging {\n  --pg-_is-dragging: true;\n}",""]);var o=new CSSStyleSheet;o.replaceSync(r.toString());const d=o},601:e=>{e.exports=function(e){return e[1]}},630:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill=%27white%27 /></svg>"}},t={};function n(i){var s=t[i];if(void 0!==s)return s.exports;var a=t[i]={id:i,exports:{}};return e[i](a,a.exports,n),a.exports}n.m=e,n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.b="undefined"!=typeof document&&document.baseURI||self.location.href;const i=Symbol("addObserver"),s=Symbol("removeObserver"),a=Symbol("getObservers"),r=Symbol("isProxy"),o=Symbol("getTarget"),d=["fill","pop","push","reverse","shift","sort","splice","unshift"],l=new Map;function c(e){return new Proxy(e,{get(t,n){if("symbol"==typeof n){switch(n){case r:return!0;case o:return t;case a:return l.has(e);case i:return(t,n)=>{l.has(e)?l.get(e).has(t)?l.get(e).get(t).push(n):l.get(e).set(t,[n]):l.set(e,new Map([[t,[n]]]))};case s:return t=>{l.has(e)&&(l.get(e).delete(t),0===l.get(e).size&&l.delete(e))};case Symbol.toPrimitive:case Symbol.toStringTag:return Reflect.get(t,n)}throw new Error("Unsupported symbol")}if(n in t){if(!Number.isNaN(Number(n)))return"object"==typeof t[n]?c(t[n]):t[n];if("copyWithin"===n)throw new Error("Unsupported array method copyWithin");if(d.includes(n))return l.has(t)?function(){const e=Array.prototype[n].apply(t,arguments);return l.get(t).forEach(((e,i)=>{e.forEach((e=>{e(t,n,arguments)}))})),e}:Reflect.get(t,n);if(t[n]instanceof Array)return c(t[n])}return Reflect.get(t,n)},set(e,t,n){if("symbol"==typeof t)throw new Error("Setting symbols not allowed.");if(Array.isArray(e))return Reflect.set(e,t,n);if(l.has(e)){l.get(e).forEach(((e,i)=>{e.forEach((e=>{e(t,n)}))}))}return Reflect.set(e,t,n)}})}window.observers=l;const h="fill",p="pop",m="push",g="reverse",u="shift",b="sort",v="splice",f="unshift";class PropError extends Error{constructor(e,t){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,t)}}Symbol("index");const y=Symbol("init"),x=Symbol("template"),w=Symbol("style"),$=Symbol("parent");function E(e){return e[r]&&e[o]}function L(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function k(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function S(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var i,s;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[$]||t.prototype[$][t.prototype[$].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[$]=[t.prototype],t.prototype[w]=e.style?[e.style]:[],t.prototype[x]=e.template||""):(t.prototype[$].push(t.prototype),t.prototype[w].push(e.style),t.prototype[x]=(i=t.prototype[x],(s=e.template||null)&&s.match(/<parent\/>/)?s.replace(/<parent\/>/,i):`${i}${s||""}`));const a=t.prototype.connectedCallback||(()=>{}),r=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[y]||void 0!==e.template||void 0!==e.style)if(this[y]){if(this[y]&&e.style);else if(this[y]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[x]||"";const n=document.importNode(e.content,!0),i=this.attachShadow({mode:"open"});i.adoptedStyleSheets=t.prototype[w].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),i.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const i=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),s=()=>{this[$].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[k(t)]=!0,e)),{}):{})}))};0===i.length?(this[y]=!0,a.call(this),s()):Promise.all(i).then((()=>{this[y]=!0,a.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));s()}))},t.prototype.disconnectedCallback=function(){r.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[k(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function C(e){return!!e&&e.constructor===Array}function D(e,t){e[y]&&e[$].map((n=>{n.render&&n.render.call(e,{[t]:!0})}))}function I(e){return null===e?"null":C(e)?"array":typeof e}function O(e){return function(t,n){const i=n.name,s=Symbol(i),o=Symbol(`${i}:type`),d=Symbol(`${i}:meta`);return n.addInitializer((function(){Reflect.defineProperty(this,i,{get:()=>"object"===this[o]||"array"===this[o]?this[s][r]?this[s]:c(this[s]):this[s],set:t=>{const n=I(e?e(t):t);if("index"!==i&&this[o]!==n&&"null"!==this[o]&&"null"!==n)throw new Error(`@Prop() ${i} with type '${this[o]}' cannot be set to ${n}.`);if("array"===this[o]){if(!C(t))throw new PropError(`Array "${i}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,i)?.set);if(this[s]===t)throw new Error("Setting an array to itself is not allowed.");const e=c(this[s]);if(e[a]){const n=t[r]?E(t):t;e.splice(0,this[s].length,...n)}else this[s]=t}else this[s]=e?e(t):t,D(this,i)}})})),function(t){if(void 0===t&&"index"!==i)throw new Error(`@Prop() ${i} must have an initial value defined.`);if(void 0!==t&&"index"===i)throw new Error("@Prop() index must not have an initial value defined.");if(!0===t)throw new Error(`@Prop() ${i} boolean must initialize to false.`);if(!n.private){const{constructor:e}=this;e.observedAttributes??=[],e.symbols||(e.symbols={});const{symbols:t}=e,n=L(i);t[i]||(e.observedAttributes.push(n),t[i]=s)}return this[o]=I(t),"array"===this[o]?(this[s]=t,new Proxy(t,{get:(e,t)=>t===P?this[d]:(console.log("errr???"),Reflect.get(this[s],t)),set:(e,t,n)=>{if(t===P)return this[d]=n,!0;const a=Reflect.set(e,t,n);return"length"===t&&this[s].length===n||D(this,i),this[s]=n,a}})):(this[s]=e?e(this.getAttribute(i)??t):this.getAttribute(i)??t,this[s])}}}function B(){return function(e,t){const n=t.name,i=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${i}]`))}})}))}}Symbol("hasProxy");const P=Symbol("meta");function A({container:e,items:t,type:n,create:s,connect:a,disconnect:r,update:o}){function d(e,a){const r=n(e),o=document.createElement(L(r.name),r),d=r.observedAttributes??[],l=function(e,t){const n=new Set(e);return t.filter((e=>n.has(e)))}(Object.keys(e),d);return d.includes("index")&&(o.index=a),-1!==l.indexOf("index")&&l.splice(l.indexOf("index"),1),l.forEach((t=>{o[t]=e[t]})),s&&s(o,c(e)),t[a][i](o,((e,t)=>{o[e]=t})),o}t.forEach(((t,n)=>{const i=d(t,n);e.appendChild(i),a&&a(i,c(t))})),t[i](e,((n,i,s)=>{switch(i){case h:const[n,i,o]=s;for(let s=i||0;s<(o||t.length);s++)Object.keys(n).forEach((t=>{e.children[s][t]=n[t]}));break;case p:const l=e.children.length;l>0&&e.children[l-1].remove();break;case m:const y=e.children.length;[...s].forEach(((t,n)=>{const i=d(t,y+n);e.appendChild(i),a&&a(i,c(t))}));break;case g:for(var r=1;r<e.children.length;r++)e.insertBefore(e.children[r],e.children[0]);break;case u:e.children.length&&e.children[0].remove();for(let t=0;t<e.children.length;t++)e.children[t].index=t;break;case b:throw new Error("ToDo... write sort.");case v:const[x,w,...$]=s;if(w>0)for(let t=x;t<w+x;t++)e.children[t].remove();let E=$.length||0;if(E>0){const t=$.map(((e,t)=>d(e,x+t)));0===x?e.prepend(...t):e.children[x-1].after(...t);for(let t=x-w+E;t<e.children.length;t++)e.children[t].index=t;t.forEach((e=>{a&&a(e,$[r])}))}else for(let t=x;t<e.children.length;t++)e.children[t].index=t;break;case f:const L=e.children.length&&e.children[0],k=[...s].length;[...s].forEach(((t,n)=>{L?L.before(d(t,n)):e.appendChild(d(t,n))}));for(let t=k;t<e.children.length;t++)e.children[t].index=t}}))}var T=n(513),j=function(e,t,n,i,s,a){function r(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(r(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=r(b.get))&&(h.get=o),(o=r(b.set))&&(h.set=o),(o=r(b.init))&&s.unshift(o)}else(o=r(b))&&("field"===d?s.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},z=function(e,t,n){for(var i=arguments.length>2,s=0;s<t.length;s++)n=i?t[s].call(e,n):t[s].call(e);return i?n:void 0};const R=(()=>{let e,t,n,i,s,a,r=[S({selector:"pg-tree-button-icon",style:T.A,template:'<button part="button"> <pg-icon part="icon"></pg-icon> </button>'})],o=[],d=HTMLElement,l=[],c=[],h=[],p=[],m=[],g=[],u=[],b=[];(class extends d{static{t=this}static{const v="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[O()],i=[O()],s=[B()],a=[B()],j(null,null,n,{kind:"field",name:"index",static:!1,private:!1,access:{has:e=>"index"in e,get:e=>e.index,set:(e,t)=>{e.index=t}},metadata:v},l,c),j(null,null,i,{kind:"field",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:v},h,p),j(null,null,s,{kind:"field",name:"$button",static:!1,private:!1,access:{has:e=>"$button"in e,get:e=>e.$button,set:(e,t)=>{e.$button=t}},metadata:v},m,g),j(null,null,a,{kind:"field",name:"$icon",static:!1,private:!1,access:{has:e=>"$icon"in e,get:e=>e.$icon,set:(e,t)=>{e.$icon=t}},metadata:v},u,b),j(null,e={value:t},r,{kind:"class",name:t.name,metadata:v},null,o),t=e.value,v&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:v}),z(t,o)}index=z(this,l,void 0);icon=(z(this,c),z(this,h,"M0 0h24v24H0V0zm2 2v20h20V2H2z"));$button=(z(this,p),z(this,m,void 0));$icon=(z(this,g),z(this,u,void 0));connectedCallback(){this.$button.addEventListener("click",this.#e.bind(this))}#e(e){this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0,detail:{index:this.index}}))}render(e){e.icon&&(this.$icon.path=this.icon)}constructor(){super(...arguments),z(this,b)}});return t})();var K=n(273),M=function(e,t,n,i,s,a){function r(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(r(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=r(b.get))&&(h.get=o),(o=r(b.set))&&(h.set=o),(o=r(b.init))&&s.unshift(o)}else(o=r(b))&&("field"===d?s.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},F=function(e,t,n){for(var i=arguments.length>2,s=0;s<t.length;s++)n=i?t[s].call(e,n):t[s].call(e);return i?n:void 0};const U=(()=>{let e,t,n,i,s,a,r,o,d,l,c,h,p,m,g,u,b,v,f,y,x,w=[S({selector:"pg-tree-item",style:K.A,template:'<div part="item" draggable="true"> <div part="selected"></div> <button part="toggle"></button> <button part="iconButton"> <pg-icon part="icon"></pg-icon> </button> <input part="input" type="text" class="hide"/> <button part="labelButton"> <span part="label"></span> </button> <div part="actions"></div> <div part="dropabove"></div> <div part="dropon"></div> <div part="dropbelow"></div> </div> <div part="items"></div>'})],$=[],E=HTMLElement,L=[],k=[],C=[],D=[],I=[],P=[],T=[],j=[],z=[],U=[],N=[],H=[],_=[],V=[],q=[],W=[],Y=[],Z=[],Q=[],G=[],J=[],X=[],ee=[],te=[],ne=[],ie=[],se=[],ae=[],re=[],oe=[],de=[],le=[],ce=[],he=[],pe=[],me=[],ge=[],ue=[];var be=class extends E{static{t=this}static{const S="function"==typeof Symbol&&Symbol.metadata?Object.create(E[Symbol.metadata]??null):void 0;n=[O()],i=[O()],s=[O()],a=[O()],r=[O()],o=[O()],d=[O()],l=[B()],c=[B()],h=[B()],p=[B()],m=[B()],g=[B()],u=[B()],b=[B()],v=[B()],f=[B()],y=[B()],x=[B()],M(null,null,n,{kind:"field",name:"index",static:!1,private:!1,access:{has:e=>"index"in e,get:e=>e.index,set:(e,t)=>{e.index=t}},metadata:S},L,k),M(null,null,i,{kind:"field",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:S},C,D),M(null,null,s,{kind:"field",name:"selected",static:!1,private:!1,access:{has:e=>"selected"in e,get:e=>e.selected,set:(e,t)=>{e.selected=t}},metadata:S},I,P),M(null,null,a,{kind:"field",name:"expanded",static:!1,private:!1,access:{has:e=>"expanded"in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:S},T,j),M(null,null,r,{kind:"field",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:S},z,U),M(null,null,o,{kind:"field",name:"actions",static:!1,private:!1,access:{has:e=>"actions"in e,get:e=>e.actions,set:(e,t)=>{e.actions=t}},metadata:S},N,H),M(null,null,d,{kind:"field",name:"items",static:!1,private:!1,access:{has:e=>"items"in e,get:e=>e.items,set:(e,t)=>{e.items=t}},metadata:S},_,V),M(null,null,l,{kind:"field",name:"$toggle",static:!1,private:!1,access:{has:e=>"$toggle"in e,get:e=>e.$toggle,set:(e,t)=>{e.$toggle=t}},metadata:S},q,W),M(null,null,c,{kind:"field",name:"$item",static:!1,private:!1,access:{has:e=>"$item"in e,get:e=>e.$item,set:(e,t)=>{e.$item=t}},metadata:S},Y,Z),M(null,null,h,{kind:"field",name:"$input",static:!1,private:!1,access:{has:e=>"$input"in e,get:e=>e.$input,set:(e,t)=>{e.$input=t}},metadata:S},Q,G),M(null,null,p,{kind:"field",name:"$iconButton",static:!1,private:!1,access:{has:e=>"$iconButton"in e,get:e=>e.$iconButton,set:(e,t)=>{e.$iconButton=t}},metadata:S},J,X),M(null,null,m,{kind:"field",name:"$icon",static:!1,private:!1,access:{has:e=>"$icon"in e,get:e=>e.$icon,set:(e,t)=>{e.$icon=t}},metadata:S},ee,te),M(null,null,g,{kind:"field",name:"$label",static:!1,private:!1,access:{has:e=>"$label"in e,get:e=>e.$label,set:(e,t)=>{e.$label=t}},metadata:S},ne,ie),M(null,null,u,{kind:"field",name:"$labelButton",static:!1,private:!1,access:{has:e=>"$labelButton"in e,get:e=>e.$labelButton,set:(e,t)=>{e.$labelButton=t}},metadata:S},se,ae),M(null,null,b,{kind:"field",name:"$actions",static:!1,private:!1,access:{has:e=>"$actions"in e,get:e=>e.$actions,set:(e,t)=>{e.$actions=t}},metadata:S},re,oe),M(null,null,v,{kind:"field",name:"$items",static:!1,private:!1,access:{has:e=>"$items"in e,get:e=>e.$items,set:(e,t)=>{e.$items=t}},metadata:S},de,le),M(null,null,f,{kind:"field",name:"$dropabove",static:!1,private:!1,access:{has:e=>"$dropabove"in e,get:e=>e.$dropabove,set:(e,t)=>{e.$dropabove=t}},metadata:S},ce,he),M(null,null,y,{kind:"field",name:"$dropon",static:!1,private:!1,access:{has:e=>"$dropon"in e,get:e=>e.$dropon,set:(e,t)=>{e.$dropon=t}},metadata:S},pe,me),M(null,null,x,{kind:"field",name:"$dropbelow",static:!1,private:!1,access:{has:e=>"$dropbelow"in e,get:e=>e.$dropbelow,set:(e,t)=>{e.$dropbelow=t}},metadata:S},ge,ue),M(null,e={value:t},w,{kind:"class",name:t.name,metadata:S},null,$),be=t=e.value,S&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:S}),F(t,$)}index=F(this,L,void 0);label=(F(this,k),F(this,C,""));selected=(F(this,D),F(this,I,!1));expanded=(F(this,P),F(this,T,!1));icon=(F(this,j),F(this,z,{path:"M0 0h24v24H0V0zm2 2v20h20V2H2z"}));actions=(F(this,U),F(this,N,[]));items=(F(this,H),F(this,_,[]));$toggle=(F(this,V),F(this,q,void 0));$item=(F(this,W),F(this,Y,void 0));$input=(F(this,Z),F(this,Q,void 0));$iconButton=(F(this,G),F(this,J,void 0));$icon=(F(this,X),F(this,ee,void 0));$label=(F(this,te),F(this,ne,void 0));$labelButton=(F(this,ie),F(this,se,void 0));$actions=(F(this,ae),F(this,re,void 0));$items=(F(this,oe),F(this,de,void 0));$dropabove=(F(this,le),F(this,ce,void 0));$dropon=(F(this,he),F(this,pe,void 0));$dropbelow=(F(this,me),F(this,ge,void 0));connectedCallback(){this.$toggle.addEventListener("click",this.#t.bind(this)),this.$item.addEventListener("action",this.#n.bind(this)),this.$item.addEventListener("pointerenter",this.#i.bind(this)),this.$item.addEventListener("pointerleave",this.#s.bind(this)),this.$item.addEventListener("dragstart",this.#a.bind(this)),this.$item.addEventListener("dragend",this.#r.bind(this)),this.$labelButton.addEventListener("dblclick",this.#o.bind(this)),this.$labelButton.addEventListener("click",this.#e.bind(this)),this.$labelButton.addEventListener("keydown",this.#d.bind(this)),this.$iconButton.addEventListener("dblclick",this.#l.bind(this)),this.$iconButton.addEventListener("click",this.#c.bind(this)),this.$iconButton.addEventListener("keydown",this.#h.bind(this)),this.$item.addEventListener("contextmenu",this.#p.bind(this)),this.$input.addEventListener("blur",this.#m.bind(this)),this.$input.addEventListener("keydown",this.#g.bind(this)),this.$items.addEventListener("action",this.#u.bind(this)),this.$items.addEventListener("move",this.#b.bind(this)),this.$items.addEventListener("toggle",this.#v.bind(this)),this.$items.addEventListener("select",this.#f.bind(this)),this.$items.addEventListener("rename",this.#y.bind(this)),this.$items.addEventListener("up",this.#x.bind(this)),this.$items.addEventListener("down",this.#w.bind(this)),this.$items.addEventListener("itemdragstart",this.#$.bind(this)),this.$items.addEventListener("itemdragend",this.#E.bind(this)),this.$items.addEventListener("itemdropenter",this.#L.bind(this)),this.$dropabove.addEventListener("dragenter",this.#k.bind(this)),this.$dropabove.addEventListener("dragleave",this.#S.bind(this)),this.$dropabove.addEventListener("dragover",this.#C.bind(this)),this.$dropabove.addEventListener("drop",this.#D.bind(this)),this.$dropon.addEventListener("dragenter",this.#I.bind(this)),this.$dropon.addEventListener("dragleave",this.#O.bind(this)),this.$dropon.addEventListener("dragover",this.#C.bind(this)),this.$dropon.addEventListener("drop",this.#B.bind(this)),this.$dropbelow.addEventListener("dragenter",this.#P.bind(this)),this.$dropbelow.addEventListener("dragleave",this.#A.bind(this)),this.$dropbelow.addEventListener("dragover",this.#C.bind(this)),this.$dropbelow.addEventListener("drop",this.#T.bind(this)),A({container:this.$actions,items:this.actions,type:e=>R}),this.expanded&&this.#j()}disconnectedCallback(){console.log("disconnect",this.index)}#z=(F(this,ue),!0);#j(){this.#z&&(A({container:this.$items,items:this.items,type:e=>be}),this.#z=!1)}render(e){e.label&&(this.$label.textContent=this.label),e.icon&&this.icon&&(this.$icon.path=this.icon.path),e.selected&&this.$item.classList.toggle("selected",this.selected),e.items&&this.$item.classList.toggle("items",0!==this.items.length),e.expanded&&(this.expanded&&this.#j(),this.$item.classList.toggle("expanded",this.expanded),this.$items.classList.toggle("expanded",this.expanded))}#t(){this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#l(e){const{ctrlKey:t,shiftKey:n}=e;t||n||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"icondoubleclick",indexes:[this.index]}}))}#c(){this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"icon",indexes:[this.index]}}))}#e(e){if(this.#R)return void(this.#R=!1);const{ctrlKey:t,shiftKey:n}=e;this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"label",indexes:[this.index],ctrlKey:t,shiftKey:n}}))}#d(e){"Enter"===e.key&&(this.#K(),e.preventDefault())}#i(){this.dispatchEvent(new CustomEvent("enter",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#s(){this.dispatchEvent(new CustomEvent("leave",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#n(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0,detail:{indexes:[this.index],actionIndex:e.detail.index}}))}#u(e){e.detail.indexes.unshift(this.index)}#b(e){e.detail.indexes.unshift(this.index)}#v(e){e.detail.indexes.unshift(this.index)}#y(e){e.detail.indexes.unshift(this.index)}#x(e){e.detail.indexes.unshift(this.index)}#w(e){e.detail.indexes.unshift(this.index)}#f(e){e.detail.indexes.unshift(this.index)}#L(e){e.detail.indexes.unshift(this.index)}#p(e){e.preventDefault()}#K(){this.$labelButton.classList.add("hide"),this.$actions.classList.add("hide"),this.$input.classList.remove("hide"),this.$input.value=this.label,this.$input.select(),this.#R=!0,this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"rename",indexes:[this.index]}}))}#R=!1;#o(e){const{ctrlKey:t,shiftKey:n}=e;t||n||(this.#K(),e.preventDefault())}#m(){this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),this.$labelButton.click(),this.dispatchEvent(new CustomEvent("rename",{bubbles:!0,composed:!0,detail:{indexes:[this.index],label:this.$input.value}}))}#h(e){switch(e.key){case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),e.preventDefault();break;case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),e.preventDefault()}}#g(e){switch(e.key){case"Enter":this.#m();break;case"Escape":this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),this.$input.value=this.label,this.$labelButton.click();break;case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),e.preventDefault();break;case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),e.preventDefault()}}#M;#a(e){let t=0;this.dispatchEvent(new CustomEvent("itemdragstart",{bubbles:!0,composed:!0,detail:{ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,indexes:[this.index],callback:e=>{t=e}}})),this.$item.classList.toggle("dragging",!0),this.$items.classList.toggle("dragging",!0);const n=window.devicePixelRatio,i=document.createElement("canvas");document.body.append(i),i.width=100*n,i.height=40*n,i.style.width=i.width/n+"px";var s=i.getContext("2d");if(s){const e=`${t}`;s.font=`bold ${16*n}px Segoe UI`;const i=s.measureText(e);s.fillStyle="#453C4F",s.beginPath(),s.roundRect(20*n,0,(i.width+12)*n,28*n,8+2*n),s.fill(),s.fillStyle="#FFF",s.beginPath(),s.roundRect(22*n,2*n,(i.width+12-4)*n,24*n,8),s.fill(),s.fillStyle="#453C4F",s.fillText(e,30*n,20*n)}e.dataTransfer.setDragImage(i,0,0),this.#M=i}#r(e){this.dispatchEvent(new CustomEvent("itemdragend",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$item.classList.toggle("dragging",!1),this.$items.classList.toggle("dragging",!1),this.#M.remove()}#$(e){e.detail.indexes.unshift(this.index)}#E(e){e.detail.indexes.unshift(this.index)}#k(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0),e.dataTransfer.setData("text","test"),e.dataTransfer.effectAllowed="move"}#S(e){console.log("darg leave"),e.target.classList.toggle("drop",!1)}#F;#I(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0),this.#F=setTimeout((()=>{this.#t()}),1500)}#O(e){clearTimeout(this.#F),console.log("darg leave"),e.target.classList.toggle("drop",!1)}#P(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0)}#A(e){console.log("darg leave"),e.target.classList.toggle("drop",!1)}#C(e){e.preventDefault(),e.dataTransfer.dropEffect="move"}#D(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"before"}}))}#B(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"on"}}))}#T(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"after"}}))}};return be=t})();var N=n(543),H=function(e,t,n,i,s,a){function r(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(r(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=r(b.get))&&(h.get=o),(o=r(b.set))&&(h.set=o),(o=r(b.init))&&s.unshift(o)}else(o=r(b))&&("field"===d?s.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},_=function(e,t,n){for(var i=arguments.length>2,s=0;s<t.length;s++)n=i?t[s].call(e,n):t[s].call(e);return i?n:void 0};(()=>{let e,t,n,i,s=[S({selector:"pg-tree",style:N.A,template:'<div part="items"></div>'})],a=[],r=HTMLElement,o=[],d=[],l=[],c=[];(class extends r{static{t=this}static{const h="function"==typeof Symbol&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[O()],i=[B()],H(null,null,n,{kind:"field",name:"items",static:!1,private:!1,access:{has:e=>"items"in e,get:e=>e.items,set:(e,t)=>{e.items=t}},metadata:h},o,d),H(null,null,i,{kind:"field",name:"$items",static:!1,private:!1,access:{has:e=>"$items"in e,get:e=>e.$items,set:(e,t)=>{e.$items=t}},metadata:h},l,c),H(null,e={value:t},s,{kind:"class",name:t.name,metadata:h},null,a),t=e.value,h&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:h}),_(t,a)}items=_(this,o,[]);$items=(_(this,d),_(this,l,void 0));#U=(_(this,c),new Map);connectedCallback(){A({container:this.$items,items:this.items,type:e=>U}),this.$items.addEventListener("action",(e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("action",{detail:{actionIndex:e.detail.actionIndex,item:this.#N(e.detail.indexes)}}))})),this.$items.addEventListener("move",(e=>{const{indexes:t,position:n}=e.detail;e.stopPropagation(),this.dispatchEvent(new CustomEvent("move",{detail:{item:this.#N(e.detail.indexes),position:n}}))})),this.$items.addEventListener("toggle",(e=>{const{indexes:t}=e.detail;let n=this.#H(t);n.expanded=!n.expanded})),this.$items.addEventListener("select",(e=>{e.stopPropagation();const{indexes:t,type:n,ctrlKey:i,shiftKey:s}=e.detail,a=this.#H(t),r=this.#U.size,o=E(a);i||!r||this.#U.has(o)||(this.#U.forEach((e=>this.#H(e).selected=!1)),this.#U.clear()),a.selected="rename"===n||!a.selected,a.selected?this.#U.set(o,t):this.#U.delete(o),this.dispatchEvent(new CustomEvent("select",{detail:{items:[...this.#U.values()].map((e=>this.#N(e)))}}))})),this.$items.addEventListener("keydown",(e=>{"Delete"===e.key&&(this.#U.forEach((e=>{this.#_(e)})),this.#U.clear())})),this.$items.addEventListener("itemdragstart",(e=>{const{indexes:t,callback:n,ctrlKey:i,shiftKey:s}=e.detail;console.log("drag valid",t);const a=this.#H(t),r=E(a);!i&&this.#U.size&&(this.#U.forEach((e=>this.#H(e).selected=!1)),this.#U.clear()),a.selected=!0,this.#U.set(r,t);let o=0;this.#U.forEach((e=>{const t=this.#H(e);o=this.#V(t,o)})),n(o),this.$items.classList.toggle("dragging",!0)})),this.$items.addEventListener("itemdragend",(e=>{this.$items.classList.toggle("dragging",!1)})),this.$items.addEventListener("itemdropenter",this.#q.bind(this))}#V(e,t){return t+=1,e.items&&e.items.length>0&&e.items.forEach((e=>{t=this.#V(e,t)})),t}#q(e){const{indexes:t,callback:n}=e.detail,i=this.#W();console.log("valid???",t,i);const s=t.join(",");n(!i.some((e=>s.startsWith(e))),(t=>{e.dataTransfer.effectAllowed=t}))}#_(e){const t=e[e.length-1],n=e.slice(0,e.length-1).reduce(((e,t)=>e.items[t]),this);n.items.splice(t,1)}#H(e){return e.reduce(((e,t)=>e.items[t]),this)}#N(e){return{indexes:e,remove:()=>{this.#_(e),this.#U.clear()},getData:()=>this.#H(e),getParentData:()=>{const t=e.slice(0,e.length-1);return 0===t.length?this:this.#H(t)},move:(t,n)=>{console.log(t,n);const i=t.indexes[t.indexes.length-1],s=t.indexes.slice(0,t.indexes.length-1),a=this.#H(e);this.#_(e),"on"===n?(this.#H(t.indexes).items.push(a),this.#H(t.indexes).expanded=!0):0===s.length?this.items.splice("after"===n?i+1:i,0,a):this.#H(s).items.splice("after"===n?i+1:i,0,a),this.#U.clear(),this.$items.classList.toggle("dragging",!1)}}}render(e){e.items&&console.log("yay",this.items.map((e=>e)))}unselect(e){}#W(){const e=[];return this.#U.forEach((t=>{e.push(t.join(","))})),e}})})()})();
+(()=>{"use strict";var e={84:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11%27 fill=%27rgb%2869 60 79%29%27 /></svg>"},122:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11%27 fill=%27white%27 /></svg>"},273:(e,t,n)=>{n.d(t,{A:()=>y});var i=n(601),s=n.n(i),a=n(314),r=n.n(a),o=n(417),d=n.n(o),l=new URL(n(630),n.b),c=new URL(n(122),n.b),h=new URL(n(432),n.b),p=new URL(n(84),n.b),m=r()(s()),g=d()(l),u=d()(c),b=d()(h),v=d()(p);m.push([e.id,`:host {\n  display: contents;\n  --y: calc(var(--x) + 1);\n}\n\n.hide {\n  display: none !important;\n}\n\n[part=iconButton] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  color: var(--pg-tree-item-color, #453C4F);\n  padding: 0;\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n  align-items: center;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n}\n\n[part=labelButton] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  color: var(--pg-tree-item-color, #453C4F);\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n  flex: 1;\n  align-items: center;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n  margin: -0.25rem -0.25rem -0.25rem -0.25rem;\n  padding: 0 0.25rem 0 0.25rem;\n}\n\n[part=label] {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n[part=input] {\n  display: flex;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n  border-radius: 0.125rem;\n  flex: 1;\n  outline: 0;\n  padding: 0 0.25rem;\n  margin: -0.125rem -0.625rem -0.125rem -0.25rem;\n  border-width: var(--pg-tree-item-border-width, 0);\n  border-style: solid;\n  border-color: var(--pg-tree-item-border-color, #453C4F);\n}\n\n[part=item] {\n  display: grid;\n  background: var(--pg-tree-item-background, transparent);\n  border-radius: 0.25rem;\n  padding: 0.25rem;\n  gap: 0 0.5rem;\n  user-select: none;\n  padding-left: calc((var(--x) * 0.5rem) + 0.25rem);\n  transition: background-color 0.1s ease-out;\n}\n\n[part=item] {\n  grid-template-columns: min-content min-content minmax(0, 1fr) min-content;\n  grid-template-rows: auto;\n}\n[part=item] [part=selected] {\n  grid-row: 1;\n  grid-column: 1;\n}\n[part=item] [part=toggle] {\n  grid-row: 1;\n  grid-column: 1;\n}\n[part=item] [part=iconButton] {\n  grid-row: 1;\n  grid-column: 2;\n}\n[part=item] [part=labelButton] {\n  grid-row: 1;\n  grid-column: 3;\n}\n[part=item] [part=actions] {\n  grid-row: 1;\n  grid-column: 4;\n}\n[part=item] [part=dropabove] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  align-self: flex-start;\n  transform: translateY(-0.875rem);\n  height: 1rem;\n  margin: 0 -0.25rem 0 -0.25rem;\n  z-index: 1;\n}\n[part=item] [part=dropon] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  margin: 0.125rem -0.25rem;\n  z-index: 1;\n}\n[part=item]:not(.items) [part=dropon] {\n  display: none;\n}\n[part=item].items.expanded [part=dropbelow] {\n  display: none;\n}\n[part=item] [part=dropbelow] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  align-self: flex-end;\n  transform: translateY(0.875rem);\n  height: 1rem;\n  margin: 0 -0.25rem 0 -0.25rem;\n  z-index: 1;\n}\n\n[part=item]:not(.selected):not(.dragging):hover {\n  background: var(--pg-tree-selected-secondary, rgb(69, 60, 79, 0.1));\n}\n[part=item].selected:not(.dragging):hover {\n  background: var(--pg-tree-selected-secondary-hover, rgb(69, 60, 79, 0.1));\n}\n[part=item].selected,\n[part=item].items.selected {\n  background-color: var(--pg-tree-selected-secondary);\n}\n[part=item].items.selected:not(.expanded):not(.dragging) [part=toggle] {\n  border-radius: 0.125rem;\n  background-color: var(--pg-tree-selected-primary);\n  background-image: url(${g}) !important;\n}\n\n[part=item].items.selected.expanded:not(.dragging) [part=toggle] {\n  border-radius: 0.125rem;\n  background-color: var(--pg-tree-selected-primary);\n  background-image: url(${u}) !important;\n}\n\n[part=item].items [part=selected] {\n  display: none;\n}\n\n[part=item]:not(.items) [part=selected] {\n  visibility: hidden;\n  display: flex;\n  width: 1rem;\n  margin-left: -0.125rem;\n  margin-right: -0.375rem;\n  margin-top: -0.125rem;\n  margin-bottom: -0.125rem;\n  border-radius: 0.125rem;\n  background: var(--pg-tree-selected-primary);\n}\n\n[part=item]:not(.dragging):not(.items).selected [part=selected] {\n  visibility: visible;\n}\n\n[part=actions] {\n  display: flex;\n  gap: 0.25rem;\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n}\n\n[part=items] {\n  display: none;\n  flex-direction: column;\n  --x: calc(var(--y) + 1);\n  gap: 0.25rem;\n}\n[part=items].expanded {\n  display: flex;\n}\n\n[part=toggle] {\n  display: none;\n  margin-left: -0.125rem;\n  margin-right: -0.375rem;\n  margin-top: -0.125rem;\n  margin-bottom: -0.125rem;\n  padding: 0 0 0 1rem;\n  width: 1rem;\n  border: 0;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: transparent;\n}\n\n[part=toggle]:hover {\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 0.125rem;\n}\n\n[part=item].items:not(.expanded) [part=toggle] {\n  display: flex;\n  background-image: url(${b});\n}\n\n[part=item].items.expanded [part=toggle] {\n  display: flex;\n  background-image: url(${v});\n}\n\n[part=dropabove].drop::before,\n[part=dropbelow].drop::before {\n  content: ' ';\n  height: 0.25rem;\n  background-color: rgb(79, 143, 249);\n  border-radius: 0.125rem;\n  display: flex;\n  margin-top: 0.375rem;\n}\n\n[part=dropon].drop {\n  margin: -0.25rem !important;\n  border: 4px solid rgb(79, 143, 249);\n  border-radius: 0.25rem;\n}\n\n[part=item].dragging::after {\n  content: ' ';\n  display: flex;\n  grid-column: 1 / 5;\n  grid-row: 1;\n  border-radius: 0.25rem;\n  background: rgba(255, 255, 255, 0.5);\n  user-select: none;\n  margin: -0.25rem;\n  border: 2px dashed rgb(79, 143, 249);\n}\n[part=items].dragging {\n  --pg-_is-index-dragging: true;\n}\n[part=item].dragging [part=dropabove],\n[part=item].dragging [part=dropon],\n[part=item].dragging [part=dropbelow] {\n  display: none;\n}\n\n@container style(--pg-_is-dragging: false) {\n  [part=dropabove],\n  [part=dropon],\n  [part=dropbelow] {\n    display: none;\n  }\n}\n\n@container style(--pg-_is-index-dragging: true) {\n  [part=item]::after {\n    content: ' ';\n    display: flex;\n    grid-column: 1 / 5;\n    grid-row: 1;\n    border-radius: 0.25rem;\n    background: rgba(255, 255, 255, 0.5);\n    user-select: none;\n    margin: -0.25rem;\n  }\n  [part=dropabove],\n  [part=dropon],\n  [part=dropbelow] {\n    display: none;\n  }\n}\n`,""]);var f=new CSSStyleSheet;f.replaceSync(m.toString());const y=f},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,i,s,a){"string"==typeof e&&(e=[[null,e,void 0]]);var r={};if(i)for(var o=0;o<this.length;o++){var d=this[o][0];null!=d&&(r[d]=!0)}for(var l=0;l<e.length;l++){var c=[].concat(e[l]);i&&r[c[0]]||(void 0!==a&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=a),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),s&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=s):c[4]="".concat(s)),t.push(c))}},t}},417:e=>{e.exports=function(e,t){return t||(t={}),e?(e=String(e.__esModule?e.default:e),/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),t.hash&&(e+=t.hash),/["'() \t\n]|(%20)/.test(e)||t.needQuotes?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e):e}},432:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill=%27rgb%2869 60 79%29%27 /></svg>"},513:(e,t,n)=>{n.d(t,{A:()=>d});var i=n(601),s=n.n(i),a=n(314),r=n.n(a)()(s());r.push([e.id,':host {\n  display: contents;\n}\n\n[part="button"] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  padding: 0.125rem;\n  margin: -0.125rem;\n  border-radius: 0.125rem;\n}\n\n[part="button"]:hover {\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 0.125rem;\n}',""]);var o=new CSSStyleSheet;o.replaceSync(r.toString());const d=o},543:(e,t,n)=>{n.d(t,{A:()=>d});var i=n(601),s=n.n(i),a=n(314),r=n.n(a)()(s());r.push([e.id,":host {\n  display: contents;\n  --pg-tree-selected-primary: #453C4F;\n  --pg-tree-selected-secondary: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.1));\n  --pg-tree-selected-secondary-hover: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.2));\n}\n/*\n--pg-tree-item-background-selected\n*/\n:host(:focus-within) {\n  --pg-tree-selected-primary: rgb(79, 143, 249);\n  --pg-tree-selected-secondary: rgba(79, 143, 249, 0.15);\n  --pg-tree-selected-secondary-hover: rgba(79, 143, 249, 0.25);\n}\n\n[part=items] {\n  display: flex;\n  flex-direction: column;\n  background: var(--pg-tree-background, transparent);\n  padding: 0.25rem;\n  gap: 0.25rem;\n  --x: 0;\n  --pg-_is-dragging: false;\n}\n\n[part=items].dragging {\n  --pg-_is-dragging: true;\n}",""]);var o=new CSSStyleSheet;o.replaceSync(r.toString());const d=o},601:e=>{e.exports=function(e){return e[1]}},630:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill=%27white%27 /></svg>"}},t={};function n(i){var s=t[i];if(void 0!==s)return s.exports;var a=t[i]={id:i,exports:{}};return e[i](a,a.exports,n),a.exports}n.m=e,n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.b="undefined"!=typeof document&&document.baseURI||self.location.href;const i=Symbol("addObserver"),s=Symbol("removeObserver"),a=Symbol("getObservers"),r=Symbol("isProxy"),o=Symbol("getTarget"),d=["fill","pop","push","reverse","shift","sort","splice","unshift"],l=new Map;function c(e){return new Proxy(e,{get(t,n){if("symbol"==typeof n){switch(n){case r:return!0;case o:return t;case a:return l.has(e);case i:return(t,n)=>{l.has(e)?l.get(e).has(t)?l.get(e).get(t).push(n):l.get(e).set(t,[n]):l.set(e,new Map([[t,[n]]]))};case s:return t=>{l.has(e)&&(l.get(e).delete(t),0===l.get(e).size&&l.delete(e))};case Symbol.toPrimitive:case Symbol.toStringTag:return Reflect.get(t,n)}throw new Error("Unsupported symbol")}if(n in t){if(!Number.isNaN(Number(n)))return"object"==typeof t[n]?c(t[n]):t[n];if("copyWithin"===n)throw new Error("Unsupported array method copyWithin");if(d.includes(n))return l.has(t)?function(){const e=Array.prototype[n].apply(t,arguments);return l.get(t).forEach(((e,i)=>{e.forEach((e=>{e(t,n,arguments)}))})),e}:Reflect.get(t,n);if(t[n]instanceof Array)return c(t[n])}return Reflect.get(t,n)},set(e,t,n){if("symbol"==typeof t)throw new Error("Setting symbols not allowed.");if(Array.isArray(e))return Reflect.set(e,t,n);if(l.has(e)){l.get(e).forEach(((e,i)=>{e.forEach((e=>{e(t,n)}))}))}return Reflect.set(e,t,n)}})}window.observers=l;const h="fill",p="pop",m="push",g="reverse",u="shift",b="sort",v="splice",f="unshift";class PropError extends Error{constructor(e,t){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,t)}}Symbol("index");const y=Symbol("init"),x=Symbol("template"),w=Symbol("style"),$=Symbol("parent");function E(e){return e[r]&&e[o]}function L(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function k(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function S(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var i,s;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[$]||t.prototype[$][t.prototype[$].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[$]=[t.prototype],t.prototype[w]=e.style?[e.style]:[],t.prototype[x]=e.template||""):(t.prototype[$].push(t.prototype),t.prototype[w].push(e.style),t.prototype[x]=(i=t.prototype[x],(s=e.template||null)&&s.match(/<parent\/>/)?s.replace(/<parent\/>/,i):`${i}${s||""}`));const a=t.prototype.connectedCallback||(()=>{}),r=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[y]||void 0!==e.template||void 0!==e.style)if(this[y]){if(this[y]&&e.style);else if(this[y]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[x]||"";const n=document.importNode(e.content,!0),i=this.attachShadow({mode:"open"});i.adoptedStyleSheets=t.prototype[w].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),i.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const i=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),s=()=>{this[$].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[k(t)]=!0,e)),{}):{})}))};0===i.length?(this[y]=!0,a.call(this),s()):Promise.all(i).then((()=>{this[y]=!0,a.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));s()}))},t.prototype.disconnectedCallback=function(){r.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[k(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function C(e){return!!e&&e.constructor===Array}function D(e,t){e[y]&&e[$].map((n=>{n.render&&n.render.call(e,{[t]:!0})}))}function I(e){return null===e?"null":C(e)?"array":typeof e}function O(e){return function(t,n){const i=n.name,s=Symbol(i),o=Symbol(`${i}:type`),d=Symbol(`${i}:meta`);return n.addInitializer((function(){Reflect.defineProperty(this,i,{get:()=>"object"===this[o]||"array"===this[o]?this[s][r]?this[s]:c(this[s]):this[s],set:t=>{const n=I(e?e(t):t);if("index"!==i&&this[o]!==n&&"null"!==this[o]&&"null"!==n)throw new Error(`@Prop() ${i} with type '${this[o]}' cannot be set to ${n}.`);if("array"===this[o]){if(!C(t))throw new PropError(`Array "${i}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,i)?.set);if(this[s]===t)throw new Error("Setting an array to itself is not allowed.");const e=c(this[s]);if(e[a]){const n=t[r]?E(t):t;e.splice(0,this[s].length,...n)}else this[s]=t}else this[s]=e?e(t):t,D(this,i)}})})),function(t){if(void 0===t&&"index"!==i)throw new Error(`@Prop() ${i} must have an initial value defined.`);if(void 0!==t&&"index"===i)throw new Error("@Prop() index must not have an initial value defined.");if(!0===t)throw new Error(`@Prop() ${i} boolean must initialize to false.`);if(!n.private){const{constructor:e}=this;e.observedAttributes??=[],e.symbols||(e.symbols={});const{symbols:t}=e,n=L(i);t[i]||(e.observedAttributes.push(n),t[i]=s)}return this[o]=I(t),"array"===this[o]?(this[s]=t,new Proxy(t,{get:(e,t)=>t===P?this[d]:(console.log("errr???"),Reflect.get(this[s],t)),set:(e,t,n)=>{if(t===P)return this[d]=n,!0;const a=Reflect.set(e,t,n);return"length"===t&&this[s].length===n||D(this,i),this[s]=n,a}})):(this[s]=e?e(this.getAttribute(i)??t):this.getAttribute(i)??t,this[s])}}}function B(){return function(e,t){const n=t.name,i=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${i}]`))}})}))}}Symbol("hasProxy");const P=Symbol("meta");function A({container:e,items:t,type:n,create:s,connect:a,disconnect:r,update:o}){function d(e,a){const r=n(e),o=document.createElement(L(r.name),r),d=r.observedAttributes??[],l=function(e,t){const n=new Set(e);return t.filter((e=>n.has(e)))}(Object.keys(e),d);return d.includes("index")&&(o.index=a),-1!==l.indexOf("index")&&l.splice(l.indexOf("index"),1),l.forEach((t=>{o[t]=e[t]})),s&&s(o,c(e)),t[a][i](o,((e,t)=>{o[e]=t})),o}t.forEach(((t,n)=>{const i=d(t,n);e.appendChild(i),a&&a(i,c(t))})),t[i](e,((n,i,s)=>{switch(i){case h:const[n,i,o]=s;for(let s=i||0;s<(o||t.length);s++)Object.keys(n).forEach((t=>{e.children[s][t]=n[t]}));break;case p:const l=e.children.length;l>0&&e.children[l-1].remove();break;case m:const y=e.children.length;[...s].forEach(((t,n)=>{const i=d(t,y+n);e.appendChild(i),a&&a(i,c(t))}));break;case g:for(var r=1;r<e.children.length;r++)e.insertBefore(e.children[r],e.children[0]);break;case u:e.children.length&&e.children[0].remove();for(let t=0;t<e.children.length;t++)e.children[t].index=t;break;case b:throw new Error("ToDo... write sort.");case v:const[x,w,...$]=s;if(w>0)for(let t=x;t<w+x;t++)e.children[t].remove();let E=$.length||0;if(E>0){const t=$.map(((e,t)=>d(e,x+t)));0===x?e.prepend(...t):e.children[x-1].after(...t);for(let t=x-w+E;t<e.children.length;t++)e.children[t].index=t;t.forEach((e=>{a&&a(e,$[r])}))}else for(let t=x;t<e.children.length;t++)e.children[t].index=t;break;case f:const L=e.children.length&&e.children[0],k=[...s].length;[...s].forEach(((t,n)=>{L?L.before(d(t,n)):e.appendChild(d(t,n))}));for(let t=k;t<e.children.length;t++)e.children[t].index=t}}))}var T=n(513),j=function(e,t,n,i,s,a){function r(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(r(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=r(b.get))&&(h.get=o),(o=r(b.set))&&(h.set=o),(o=r(b.init))&&s.unshift(o)}else(o=r(b))&&("field"===d?s.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},z=function(e,t,n){for(var i=arguments.length>2,s=0;s<t.length;s++)n=i?t[s].call(e,n):t[s].call(e);return i?n:void 0};const R=(()=>{let e,t,n,i,s,a,r=[S({selector:"pg-tree-button-icon",style:T.A,template:'<button part="button"> <pg-icon part="icon"></pg-icon> </button>'})],o=[],d=HTMLElement,l=[],c=[],h=[],p=[],m=[],g=[],u=[],b=[];(class extends d{static{t=this}static{const v="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[O()],i=[O()],s=[B()],a=[B()],j(null,null,n,{kind:"field",name:"index",static:!1,private:!1,access:{has:e=>"index"in e,get:e=>e.index,set:(e,t)=>{e.index=t}},metadata:v},l,c),j(null,null,i,{kind:"field",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:v},h,p),j(null,null,s,{kind:"field",name:"$button",static:!1,private:!1,access:{has:e=>"$button"in e,get:e=>e.$button,set:(e,t)=>{e.$button=t}},metadata:v},m,g),j(null,null,a,{kind:"field",name:"$icon",static:!1,private:!1,access:{has:e=>"$icon"in e,get:e=>e.$icon,set:(e,t)=>{e.$icon=t}},metadata:v},u,b),j(null,e={value:t},r,{kind:"class",name:t.name,metadata:v},null,o),t=e.value,v&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:v}),z(t,o)}index=z(this,l,void 0);icon=(z(this,c),z(this,h,"M0 0h24v24H0V0zm2 2v20h20V2H2z"));$button=(z(this,p),z(this,m,void 0));$icon=(z(this,g),z(this,u,void 0));connectedCallback(){this.$button.addEventListener("click",this.#e.bind(this))}#e(e){this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0,detail:{index:this.index}}))}render(e){e.icon&&(this.$icon.path=this.icon)}constructor(){super(...arguments),z(this,b)}});return t})();var K=n(273),M=function(e,t,n,i,s,a){function r(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(r(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=r(b.get))&&(h.get=o),(o=r(b.set))&&(h.set=o),(o=r(b.init))&&s.unshift(o)}else(o=r(b))&&("field"===d?s.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},F=function(e,t,n){for(var i=arguments.length>2,s=0;s<t.length;s++)n=i?t[s].call(e,n):t[s].call(e);return i?n:void 0};const U=(()=>{let e,t,n,i,s,a,r,o,d,l,c,h,p,m,g,u,b,v,f,y,x,w=[S({selector:"pg-tree-item",style:K.A,template:'<div part="item" draggable="true"> <div part="selected"></div> <button part="toggle"></button> <button part="iconButton"> <pg-icon part="icon"></pg-icon> </button> <input part="input" type="text" class="hide"/> <button part="labelButton"> <span part="label"></span> </button> <div part="actions"></div> <div part="dropabove"></div> <div part="dropon"></div> <div part="dropbelow"></div> </div> <div part="items"></div>'})],$=[],E=HTMLElement,L=[],k=[],C=[],D=[],I=[],P=[],T=[],j=[],z=[],U=[],N=[],H=[],_=[],V=[],q=[],W=[],Y=[],Z=[],Q=[],G=[],J=[],X=[],ee=[],te=[],ne=[],ie=[],se=[],ae=[],re=[],oe=[],de=[],le=[],ce=[],he=[],pe=[],me=[],ge=[],ue=[];var be=class extends E{static{t=this}static{const S="function"==typeof Symbol&&Symbol.metadata?Object.create(E[Symbol.metadata]??null):void 0;n=[O()],i=[O()],s=[O()],a=[O()],r=[O()],o=[O()],d=[O()],l=[B()],c=[B()],h=[B()],p=[B()],m=[B()],g=[B()],u=[B()],b=[B()],v=[B()],f=[B()],y=[B()],x=[B()],M(null,null,n,{kind:"field",name:"index",static:!1,private:!1,access:{has:e=>"index"in e,get:e=>e.index,set:(e,t)=>{e.index=t}},metadata:S},L,k),M(null,null,i,{kind:"field",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:S},C,D),M(null,null,s,{kind:"field",name:"selected",static:!1,private:!1,access:{has:e=>"selected"in e,get:e=>e.selected,set:(e,t)=>{e.selected=t}},metadata:S},I,P),M(null,null,a,{kind:"field",name:"expanded",static:!1,private:!1,access:{has:e=>"expanded"in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:S},T,j),M(null,null,r,{kind:"field",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:S},z,U),M(null,null,o,{kind:"field",name:"actions",static:!1,private:!1,access:{has:e=>"actions"in e,get:e=>e.actions,set:(e,t)=>{e.actions=t}},metadata:S},N,H),M(null,null,d,{kind:"field",name:"items",static:!1,private:!1,access:{has:e=>"items"in e,get:e=>e.items,set:(e,t)=>{e.items=t}},metadata:S},_,V),M(null,null,l,{kind:"field",name:"$toggle",static:!1,private:!1,access:{has:e=>"$toggle"in e,get:e=>e.$toggle,set:(e,t)=>{e.$toggle=t}},metadata:S},q,W),M(null,null,c,{kind:"field",name:"$item",static:!1,private:!1,access:{has:e=>"$item"in e,get:e=>e.$item,set:(e,t)=>{e.$item=t}},metadata:S},Y,Z),M(null,null,h,{kind:"field",name:"$input",static:!1,private:!1,access:{has:e=>"$input"in e,get:e=>e.$input,set:(e,t)=>{e.$input=t}},metadata:S},Q,G),M(null,null,p,{kind:"field",name:"$iconButton",static:!1,private:!1,access:{has:e=>"$iconButton"in e,get:e=>e.$iconButton,set:(e,t)=>{e.$iconButton=t}},metadata:S},J,X),M(null,null,m,{kind:"field",name:"$icon",static:!1,private:!1,access:{has:e=>"$icon"in e,get:e=>e.$icon,set:(e,t)=>{e.$icon=t}},metadata:S},ee,te),M(null,null,g,{kind:"field",name:"$label",static:!1,private:!1,access:{has:e=>"$label"in e,get:e=>e.$label,set:(e,t)=>{e.$label=t}},metadata:S},ne,ie),M(null,null,u,{kind:"field",name:"$labelButton",static:!1,private:!1,access:{has:e=>"$labelButton"in e,get:e=>e.$labelButton,set:(e,t)=>{e.$labelButton=t}},metadata:S},se,ae),M(null,null,b,{kind:"field",name:"$actions",static:!1,private:!1,access:{has:e=>"$actions"in e,get:e=>e.$actions,set:(e,t)=>{e.$actions=t}},metadata:S},re,oe),M(null,null,v,{kind:"field",name:"$items",static:!1,private:!1,access:{has:e=>"$items"in e,get:e=>e.$items,set:(e,t)=>{e.$items=t}},metadata:S},de,le),M(null,null,f,{kind:"field",name:"$dropabove",static:!1,private:!1,access:{has:e=>"$dropabove"in e,get:e=>e.$dropabove,set:(e,t)=>{e.$dropabove=t}},metadata:S},ce,he),M(null,null,y,{kind:"field",name:"$dropon",static:!1,private:!1,access:{has:e=>"$dropon"in e,get:e=>e.$dropon,set:(e,t)=>{e.$dropon=t}},metadata:S},pe,me),M(null,null,x,{kind:"field",name:"$dropbelow",static:!1,private:!1,access:{has:e=>"$dropbelow"in e,get:e=>e.$dropbelow,set:(e,t)=>{e.$dropbelow=t}},metadata:S},ge,ue),M(null,e={value:t},w,{kind:"class",name:t.name,metadata:S},null,$),be=t=e.value,S&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:S}),F(t,$)}index=F(this,L,void 0);label=(F(this,k),F(this,C,""));selected=(F(this,D),F(this,I,!1));expanded=(F(this,P),F(this,T,!1));icon=(F(this,j),F(this,z,{path:"M0 0h24v24H0V0zm2 2v20h20V2H2z"}));actions=(F(this,U),F(this,N,[]));items=(F(this,H),F(this,_,[]));$toggle=(F(this,V),F(this,q,void 0));$item=(F(this,W),F(this,Y,void 0));$input=(F(this,Z),F(this,Q,void 0));$iconButton=(F(this,G),F(this,J,void 0));$icon=(F(this,X),F(this,ee,void 0));$label=(F(this,te),F(this,ne,void 0));$labelButton=(F(this,ie),F(this,se,void 0));$actions=(F(this,ae),F(this,re,void 0));$items=(F(this,oe),F(this,de,void 0));$dropabove=(F(this,le),F(this,ce,void 0));$dropon=(F(this,he),F(this,pe,void 0));$dropbelow=(F(this,me),F(this,ge,void 0));connectedCallback(){this.$toggle.addEventListener("click",this.#t.bind(this)),this.$item.addEventListener("action",this.#n.bind(this)),this.$item.addEventListener("pointerenter",this.#i.bind(this)),this.$item.addEventListener("pointerleave",this.#s.bind(this)),this.$item.addEventListener("dragstart",this.#a.bind(this)),this.$item.addEventListener("dragend",this.#r.bind(this)),this.$labelButton.addEventListener("dblclick",this.#o.bind(this)),this.$labelButton.addEventListener("click",this.#e.bind(this)),this.$labelButton.addEventListener("keydown",this.#d.bind(this)),this.$iconButton.addEventListener("dblclick",this.#l.bind(this)),this.$iconButton.addEventListener("click",this.#c.bind(this)),this.$iconButton.addEventListener("keydown",this.#h.bind(this)),this.$item.addEventListener("contextmenu",this.#p.bind(this)),this.$input.addEventListener("blur",this.#m.bind(this)),this.$input.addEventListener("keydown",this.#g.bind(this)),this.$items.addEventListener("action",this.#u.bind(this)),this.$items.addEventListener("move",this.#b.bind(this)),this.$items.addEventListener("toggle",this.#v.bind(this)),this.$items.addEventListener("select",this.#f.bind(this)),this.$items.addEventListener("rename",this.#y.bind(this)),this.$items.addEventListener("up",this.#x.bind(this)),this.$items.addEventListener("down",this.#w.bind(this)),this.$items.addEventListener("itemdragstart",this.#$.bind(this)),this.$items.addEventListener("itemdragend",this.#E.bind(this)),this.$items.addEventListener("itemdropenter",this.#L.bind(this)),this.$dropabove.addEventListener("dragenter",this.#k.bind(this)),this.$dropabove.addEventListener("dragleave",this.#S.bind(this)),this.$dropabove.addEventListener("dragover",this.#C.bind(this)),this.$dropabove.addEventListener("drop",this.#D.bind(this)),this.$dropon.addEventListener("dragenter",this.#I.bind(this)),this.$dropon.addEventListener("dragleave",this.#O.bind(this)),this.$dropon.addEventListener("dragover",this.#C.bind(this)),this.$dropon.addEventListener("drop",this.#B.bind(this)),this.$dropbelow.addEventListener("dragenter",this.#P.bind(this)),this.$dropbelow.addEventListener("dragleave",this.#A.bind(this)),this.$dropbelow.addEventListener("dragover",this.#C.bind(this)),this.$dropbelow.addEventListener("drop",this.#T.bind(this)),A({container:this.$actions,items:this.actions,type:e=>R}),this.expanded&&this.#j()}disconnectedCallback(){console.log("disconnect",this.index)}#z=(F(this,ue),!0);#j(){this.#z&&(A({container:this.$items,items:this.items,type:e=>be}),this.#z=!1)}render(e){e.label&&(this.$label.textContent=this.label),e.icon&&this.icon&&(this.$icon.path=this.icon.path),e.selected&&this.$item.classList.toggle("selected",this.selected),e.items&&this.$item.classList.toggle("items",0!==this.items.length),e.expanded&&(this.expanded&&this.#j(),this.$item.classList.toggle("expanded",this.expanded),this.$items.classList.toggle("expanded",this.expanded))}#t(){this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#l(e){const{ctrlKey:t,shiftKey:n}=e;t||n||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"icondoubleclick",indexes:[this.index]}}))}#c(){this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"icon",indexes:[this.index]}}))}#e(e){if(this.#R)return void(this.#R=!1);const{ctrlKey:t,shiftKey:n}=e;this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"label",indexes:[this.index],ctrlKey:t,shiftKey:n}}))}#d(e){"Enter"===e.key&&(this.#K(),e.preventDefault())}#i(){this.dispatchEvent(new CustomEvent("enter",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#s(){this.dispatchEvent(new CustomEvent("leave",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#n(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0,detail:{indexes:[this.index],actionIndex:e.detail.index}}))}#u(e){e.detail.indexes.unshift(this.index)}#b(e){e.detail.indexes.unshift(this.index)}#v(e){e.detail.indexes.unshift(this.index)}#y(e){e.detail.indexes.unshift(this.index)}#x(e){e.detail.indexes.unshift(this.index)}#w(e){e.detail.indexes.unshift(this.index)}#f(e){e.detail.indexes.unshift(this.index)}#L(e){e.detail.indexes.unshift(this.index)}#p(e){e.preventDefault()}#K(){this.$labelButton.classList.add("hide"),this.$actions.classList.add("hide"),this.$input.classList.remove("hide"),this.$input.value=this.label,this.$input.select(),this.#R=!0,this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"rename",indexes:[this.index]}}))}#R=!1;#o(e){const{ctrlKey:t,shiftKey:n}=e;t||n||(this.#K(),e.preventDefault())}#m(){this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),this.$labelButton.click(),this.dispatchEvent(new CustomEvent("rename",{bubbles:!0,composed:!0,detail:{indexes:[this.index],label:this.$input.value}}))}#h(e){switch(e.key){case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),e.preventDefault();break;case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),e.preventDefault()}}#g(e){switch(e.key){case"Enter":this.#m();break;case"Escape":this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),this.$input.value=this.label,this.$labelButton.click();break;case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),e.preventDefault();break;case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),e.preventDefault()}}#M;#a(e){let t=0;this.dispatchEvent(new CustomEvent("itemdragstart",{bubbles:!0,composed:!0,detail:{ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,indexes:[this.index],callback:e=>{t=e}}})),this.$item.classList.toggle("dragging",!0),this.$items.classList.toggle("dragging",!0);const n=window.devicePixelRatio,i=document.createElement("canvas");document.body.append(i),i.width=100*n,i.height=40*n,i.style.width=i.width/n+"px";var s=i.getContext("2d");if(s){const e=`${t}`;s.font=`bold ${16*n}px Segoe UI`;const i=s.measureText(e);s.fillStyle="#453C4F",s.beginPath(),s.roundRect(20*n,0,(i.width+12)*n,28*n,8+2*n),s.fill(),s.fillStyle="#FFF",s.beginPath(),s.roundRect(22*n,2*n,(i.width+12-4)*n,24*n,8),s.fill(),s.fillStyle="#453C4F",s.fillText(e,30*n,20*n)}e.dataTransfer.setDragImage(i,0,0),this.#M=i}#r(e){this.dispatchEvent(new CustomEvent("itemdragend",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$item.classList.toggle("dragging",!1),this.$items.classList.toggle("dragging",!1),this.#M.remove()}#$(e){e.detail.indexes.unshift(this.index)}#E(e){e.detail.indexes.unshift(this.index)}#k(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0),e.dataTransfer.setData("text","test"),e.dataTransfer.effectAllowed="move"}#S(e){console.log("darg leave"),e.target.classList.toggle("drop",!1)}#F;#I(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0),this.#F=setTimeout((()=>{this.#t()}),1500)}#O(e){clearTimeout(this.#F),console.log("darg leave"),e.target.classList.toggle("drop",!1)}#P(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0)}#A(e){console.log("darg leave"),e.target.classList.toggle("drop",!1)}#C(e){e.preventDefault(),e.dataTransfer.dropEffect="move"}#D(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"before"}}))}#B(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"on"}}))}#T(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"after"}}))}};return be=t})();var N=n(543),H=function(e,t,n,i,s,a){function r(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(r(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=r(b.get))&&(h.get=o),(o=r(b.set))&&(h.set=o),(o=r(b.init))&&s.unshift(o)}else(o=r(b))&&("field"===d?s.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},_=function(e,t,n){for(var i=arguments.length>2,s=0;s<t.length;s++)n=i?t[s].call(e,n):t[s].call(e);return i?n:void 0};(()=>{let e,t,n,i,s=[S({selector:"pg-tree",style:N.A,template:'<div part="items"></div>'})],a=[],r=HTMLElement,o=[],d=[],l=[],c=[];(class extends r{static{t=this}static{const h="function"==typeof Symbol&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;n=[O()],i=[B()],H(null,null,n,{kind:"field",name:"items",static:!1,private:!1,access:{has:e=>"items"in e,get:e=>e.items,set:(e,t)=>{e.items=t}},metadata:h},o,d),H(null,null,i,{kind:"field",name:"$items",static:!1,private:!1,access:{has:e=>"$items"in e,get:e=>e.$items,set:(e,t)=>{e.$items=t}},metadata:h},l,c),H(null,e={value:t},s,{kind:"class",name:t.name,metadata:h},null,a),t=e.value,h&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:h}),_(t,a)}items=_(this,o,[]);$items=(_(this,d),_(this,l,void 0));#U=(_(this,c),new Map);connectedCallback(){A({container:this.$items,items:this.items,type:e=>U}),this.$items.addEventListener("action",(e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("action",{detail:{actionIndex:e.detail.actionIndex,item:this.#N(e.detail.indexes)}}))})),this.$items.addEventListener("move",(e=>{const{indexes:t,position:n}=e.detail;e.stopPropagation(),this.dispatchEvent(new CustomEvent("move",{detail:{item:this.#N(e.detail.indexes),position:n}}))})),this.$items.addEventListener("toggle",(e=>{const{indexes:t}=e.detail;let n=this.#H(t);n.expanded=!n.expanded})),this.$items.addEventListener("select",(e=>{e.stopPropagation();const{indexes:t,type:n,ctrlKey:i,shiftKey:s}=e.detail,a=this.#H(t),r=this.#U.size,o=E(a);i||!r||this.#U.has(o)||(this.#U.forEach((e=>this.#H(e).selected=!1)),this.#U.clear()),a.selected="rename"===n||!a.selected,a.selected?this.#U.set(o,t):this.#U.delete(o),this.dispatchEvent(new CustomEvent("select",{detail:{items:[...this.#U.values()].map((e=>this.#N(e)))}}))})),this.$items.addEventListener("keydown",(e=>{"Delete"===e.key&&(this.#U.forEach((e=>{this.#_(e)})),this.#U.clear())})),this.$items.addEventListener("itemdragstart",(e=>{const{indexes:t,callback:n,ctrlKey:i,shiftKey:s}=e.detail;console.log("drag valid",t);const a=this.#H(t),r=E(a);!i&&this.#U.size&&(this.#U.forEach((e=>this.#H(e).selected=!1)),this.#U.clear()),a.selected=!0,this.#U.set(r,t);let o=0;this.#U.forEach((e=>{const t=this.#H(e);o=this.#V(t,o)})),n(o),this.$items.classList.toggle("dragging",!0)})),this.$items.addEventListener("itemdragend",(e=>{this.$items.classList.toggle("dragging",!1)})),this.$items.addEventListener("itemdropenter",this.#q.bind(this))}#V(e,t){return t+=1,e.items&&e.items.length>0&&e.items.forEach((e=>{t=this.#V(e,t)})),t}#q(e){const{indexes:t,callback:n}=e.detail,i=this.#W();console.log("valid???",t,i);const s=t.join(",");n(!i.some((e=>s.startsWith(e))),(t=>{e.dataTransfer.effectAllowed=t}))}#_(e){const t=e[e.length-1],n=e.slice(0,e.length-1).reduce(((e,t)=>e.items[t]),this);n.items.splice(t,1)}#H(e){return e.reduce(((e,t)=>e.items[t]),this)}#N(e){return{indexes:e,remove:()=>{this.#_(e),this.#U.clear()},getData:()=>this.#H(e),getParentData:()=>{const t=e.slice(0,e.length-1);return 0===t.length?this:this.#H(t)},move:(t,n)=>{console.log(t,n);const i=t.indexes[t.indexes.length-1],s=t.indexes.slice(0,t.indexes.length-1),a=this.#H(e);this.#_(e),"on"===n?(this.#H(t.indexes).items.push(a),this.#H(t.indexes).expanded=!0):0===s.length?this.items.splice("after"===n?i+1:i,0,a):this.#H(s).items.splice("after"===n?i+1:i,0,a),this.#U.clear(),this.$items.classList.toggle("dragging",!1)}}}render(e){e.items&&console.log("yay",this.items.map((e=>e)))}unselect(e){}#W(){const e=[];return this.#U.forEach((t=>{e.push(t.join(","))})),e}})})()})();

package/pgTreeItem.js

@@ -1 +1 @@
-(()=>{"use strict";var e={84:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11%27 fill=%27rgb%2869 60 79%29%27 /></svg>"},122:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11%27 fill=%27white%27 /></svg>"},273:(e,t,n)=>{n.d(t,{A:()=>y});var i=n(601),a=n.n(i),r=n(314),s=n.n(r),o=n(417),d=n.n(o),l=new URL(n(630),n.b),c=new URL(n(122),n.b),h=new URL(n(432),n.b),p=new URL(n(84),n.b),m=s()(a()),g=d()(l),u=d()(c),b=d()(h),v=d()(p);m.push([e.id,`:host {\n  display: contents;\n  --y: calc(var(--x) + 1);\n}\n\n.hide {\n  display: none !important;\n}\n\n[part=iconButton] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  color: var(--pg-tree-item-color, #453C4F);\n  padding: 0;\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n  align-items: center;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n}\n[part=labelButton] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  color: var(--pg-tree-item-color, #453C4F);\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n  flex: 1;\n  align-items: center;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n  margin: -0.25rem -0.25rem -0.25rem -0.25rem;\n  padding: 0 0.75rem 0 0.25rem;\n}\n\n[part=input] {\n  display: flex;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n  border-radius: 0.125rem;\n  flex: 1;\n  outline: 0;\n  padding: 0 0.25rem;\n  margin: -0.125rem -0.625rem -0.125rem -0.25rem;\n  border-width: var(--pg-tree-item-border-width, 0);\n  border-style: solid;\n  border-color: var(--pg-tree-item-border-color, #453C4F);\n}\n\n[part=item] {\n  display: grid;\n  background: var(--pg-tree-item-background, transparent);\n  border-radius: 0.25rem;\n  padding: 0.25rem;\n  gap: 0 0.5rem;\n  user-select: none;\n  padding-left: calc((var(--x) * 0.5rem) + 0.25rem);\n  transition: background-color 0.1s ease-out;\n}\n\n[part=item] {\n  grid-template-columns: min-content min-content auto min-content;\n  grid-template-rows: auto;\n}\n[part=item] [part=selected] {\n  grid-row: 1;\n  grid-column: 1;\n}\n[part=item] [part=toggle] {\n  grid-row: 1;\n  grid-column: 1;\n}\n[part=item] [part=iconButton] {\n  grid-row: 1;\n  grid-column: 2;\n}\n[part=item] [part=labelButton] {\n  grid-row: 1;\n  grid-column: 3;\n}\n[part=item] [part=actions] {\n  grid-row: 1;\n  grid-column: 4;\n}\n[part=item] [part=dropabove] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  align-self: flex-start;\n  transform: translateY(-0.875rem);\n  height: 1rem;\n  margin: 0 -0.25rem 0 -0.25rem;\n  z-index: 1;\n}\n[part=item] [part=dropon] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  margin: 0.125rem -0.25rem;\n  z-index: 1;\n}\n[part=item]:not(.items) [part=dropon] {\n  display: none;\n}\n[part=item].items.expanded [part=dropbelow] {\n  display: none;\n}\n[part=item] [part=dropbelow] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  align-self: flex-end;\n  transform: translateY(0.875rem);\n  height: 1rem;\n  margin: 0 -0.25rem 0 -0.25rem;\n  z-index: 1;\n}\n\n[part=item]:not(.selected):not(.dragging):hover {\n  background: var(--pg-tree-selected-secondary, rgb(69, 60, 79, 0.1));\n}\n[part=item].selected:not(.dragging):hover {\n  background: var(--pg-tree-selected-secondary-hover, rgb(69, 60, 79, 0.1));\n}\n[part=item].selected,\n[part=item].items.selected {\n  background-color: var(--pg-tree-selected-secondary);\n}\n[part=item].items.selected:not(.expanded):not(.dragging) [part=toggle] {\n  border-radius: 0.125rem;\n  background-color: var(--pg-tree-selected-primary);\n  background-image: url(${g}) !important;\n}\n\n[part=item].items.selected.expanded:not(.dragging) [part=toggle] {\n  border-radius: 0.125rem;\n  background-color: var(--pg-tree-selected-primary);\n  background-image: url(${u}) !important;\n}\n\n[part=item].items [part=selected] {\n  display: none;\n}\n\n[part=item]:not(.items) [part=selected] {\n  visibility: hidden;\n  display: flex;\n  width: 1rem;\n  margin-left: -0.125rem;\n  margin-right: -0.375rem;\n  margin-top: -0.125rem;\n  margin-bottom: -0.125rem;\n  border-radius: 0.125rem;\n  background: var(--pg-tree-selected-primary);\n}\n\n[part=item]:not(.dragging):not(.items).selected [part=selected] {\n  visibility: visible;\n}\n\n[part=actions] {\n  display: flex;\n  gap: 0.25rem;\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n}\n\n[part=items] {\n  display: none;\n  flex-direction: column;\n  --x: calc(var(--y) + 1);\n  gap: 0.25rem;\n}\n[part=items].expanded {\n  display: flex;\n}\n\n[part=toggle] {\n  display: none;\n  margin-left: -0.125rem;\n  margin-right: -0.375rem;\n  margin-top: -0.125rem;\n  margin-bottom: -0.125rem;\n  padding: 0 0 0 1rem;\n  width: 1rem;\n  border: 0;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: transparent;\n}\n\n[part=toggle]:hover {\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 0.125rem;\n}\n\n[part=item].items:not(.expanded) [part=toggle] {\n  display: flex;\n  background-image: url(${b});\n}\n\n[part=item].items.expanded [part=toggle] {\n  display: flex;\n  background-image: url(${v});\n}\n\n[part=dropabove].drop::before,\n[part=dropbelow].drop::before {\n  content: ' ';\n  height: 0.25rem;\n  background-color: rgb(79, 143, 249);\n  border-radius: 0.125rem;\n  display: flex;\n  margin-top: 0.375rem;\n}\n\n[part=dropon].drop {\n  margin: -0.25rem !important;\n  border: 4px solid rgb(79, 143, 249);\n  border-radius: 0.25rem;\n}\n\n[part=item].dragging::after {\n  content: ' ';\n  display: flex;\n  grid-column: 1 / 5;\n  grid-row: 1;\n  border-radius: 0.25rem;\n  background: rgba(255, 255, 255, 0.5);\n  user-select: none;\n  margin: -0.25rem;\n  border: 2px dashed rgb(79, 143, 249);\n}\n[part=items].dragging {\n  --pg-_is-index-dragging: true;\n}\n[part=item].dragging [part=dropabove],\n[part=item].dragging [part=dropon],\n[part=item].dragging [part=dropbelow] {\n  display: none;\n}\n\n@container style(--pg-_is-dragging: false) {\n  [part=dropabove],\n  [part=dropon],\n  [part=dropbelow] {\n    display: none;\n  }\n}\n\n@container style(--pg-_is-index-dragging: true) {\n  [part=item]::after {\n    content: ' ';\n    display: flex;\n    grid-column: 1 / 5;\n    grid-row: 1;\n    border-radius: 0.25rem;\n    background: rgba(255, 255, 255, 0.5);\n    user-select: none;\n    margin: -0.25rem;\n  }\n  [part=dropabove],\n  [part=dropon],\n  [part=dropbelow] {\n    display: none;\n  }\n}\n`,""]);var f=new CSSStyleSheet;f.replaceSync(m.toString());const y=f},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,i,a,r){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(i)for(var o=0;o<this.length;o++){var d=this[o][0];null!=d&&(s[d]=!0)}for(var l=0;l<e.length;l++){var c=[].concat(e[l]);i&&s[c[0]]||(void 0!==r&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=r),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),a&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=a):c[4]="".concat(a)),t.push(c))}},t}},417:e=>{e.exports=function(e,t){return t||(t={}),e?(e=String(e.__esModule?e.default:e),/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),t.hash&&(e+=t.hash),/["'() \t\n]|(%20)/.test(e)||t.needQuotes?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e):e}},432:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill=%27rgb%2869 60 79%29%27 /></svg>"},513:(e,t,n)=>{n.d(t,{A:()=>d});var i=n(601),a=n.n(i),r=n(314),s=n.n(r)()(a());s.push([e.id,':host {\n  display: contents;\n}\n\n[part="button"] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  padding: 0.125rem;\n  margin: -0.125rem;\n  border-radius: 0.125rem;\n}\n\n[part="button"]:hover {\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 0.125rem;\n}',""]);var o=new CSSStyleSheet;o.replaceSync(s.toString());const d=o},601:e=>{e.exports=function(e){return e[1]}},630:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill=%27white%27 /></svg>"}},t={};function n(i){var a=t[i];if(void 0!==a)return a.exports;var r=t[i]={id:i,exports:{}};return e[i](r,r.exports,n),r.exports}n.m=e,n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.b="undefined"!=typeof document&&document.baseURI||self.location.href;const i=Symbol("addObserver"),a=Symbol("removeObserver"),r=Symbol("getObservers"),s=Symbol("isProxy"),o=Symbol("getTarget"),d=["fill","pop","push","reverse","shift","sort","splice","unshift"],l=new Map;function c(e){return new Proxy(e,{get(t,n){if("symbol"==typeof n){switch(n){case s:return!0;case o:return t;case r:return l.has(e);case i:return(t,n)=>{l.has(e)?l.get(e).has(t)?l.get(e).get(t).push(n):l.get(e).set(t,[n]):l.set(e,new Map([[t,[n]]]))};case a:return t=>{l.has(e)&&(l.get(e).delete(t),0===l.get(e).size&&l.delete(e))};case Symbol.toPrimitive:case Symbol.toStringTag:return Reflect.get(t,n)}throw new Error("Unsupported symbol")}if(n in t){if(!Number.isNaN(Number(n)))return"object"==typeof t[n]?c(t[n]):t[n];if("copyWithin"===n)throw new Error("Unsupported array method copyWithin");if(d.includes(n))return l.has(t)?function(){const e=Array.prototype[n].apply(t,arguments);return l.get(t).forEach(((e,i)=>{e.forEach((e=>{e(t,n,arguments)}))})),e}:Reflect.get(t,n);if(t[n]instanceof Array)return c(t[n])}return Reflect.get(t,n)},set(e,t,n){if("symbol"==typeof t)throw new Error("Setting symbols not allowed.");if(Array.isArray(e))return Reflect.set(e,t,n);if(l.has(e)){l.get(e).forEach(((e,i)=>{e.forEach((e=>{e(t,n)}))}))}return Reflect.set(e,t,n)}})}window.observers=l;const h="fill",p="pop",m="push",g="reverse",u="shift",b="sort",v="splice",f="unshift";class PropError extends Error{constructor(e,t){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,t)}}Symbol("index");const y=Symbol("init"),w=Symbol("template"),x=Symbol("style"),$=Symbol("parent");function E(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function L(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function k(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var i,a;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[$]||t.prototype[$][t.prototype[$].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[$]=[t.prototype],t.prototype[x]=e.style?[e.style]:[],t.prototype[w]=e.template||""):(t.prototype[$].push(t.prototype),t.prototype[x].push(e.style),t.prototype[w]=(i=t.prototype[w],(a=e.template||null)&&a.match(/<parent\/>/)?a.replace(/<parent\/>/,i):`${i}${a||""}`));const r=t.prototype.connectedCallback||(()=>{}),s=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[y]||void 0!==e.template||void 0!==e.style)if(this[y]){if(this[y]&&e.style);else if(this[y]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[w]||"";const n=document.importNode(e.content,!0),i=this.attachShadow({mode:"open"});i.adoptedStyleSheets=t.prototype[x].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),i.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const i=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),a=()=>{this[$].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[L(t)]=!0,e)),{}):{})}))};0===i.length?(this[y]=!0,r.call(this),a()):Promise.all(i).then((()=>{this[y]=!0,r.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));a()}))},t.prototype.disconnectedCallback=function(){s.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[L(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function S(e){return!!e&&e.constructor===Array}function C(e,t){e[y]&&e[$].map((n=>{n.render&&n.render.call(e,{[t]:!0})}))}function D(e){return null===e?"null":S(e)?"array":typeof e}function B(e){return function(t,n){const i=n.name,a=Symbol(i),d=Symbol(`${i}:type`),l=Symbol(`${i}:meta`);return n.addInitializer((function(){Reflect.defineProperty(this,i,{get:()=>"object"===this[d]||"array"===this[d]?this[a][s]?this[a]:c(this[a]):this[a],set:t=>{const n=D(e?e(t):t);if("index"!==i&&this[d]!==n&&"null"!==this[d]&&"null"!==n)throw new Error(`@Prop() ${i} with type '${this[d]}' cannot be set to ${n}.`);if("array"===this[d]){if(!S(t))throw new PropError(`Array "${i}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,i)?.set);if(this[a]===t)throw new Error("Setting an array to itself is not allowed.");const e=c(this[a]);if(e[r]){const n=t[s]?(l=t)[s]&&l[o]:t;e.splice(0,this[a].length,...n)}else this[a]=t}else this[a]=e?e(t):t,C(this,i);var l}})})),function(t){if(void 0===t&&"index"!==i)throw new Error(`@Prop() ${i} must have an initial value defined.`);if(void 0!==t&&"index"===i)throw new Error("@Prop() index must not have an initial value defined.");if(!0===t)throw new Error(`@Prop() ${i} boolean must initialize to false.`);if(!n.private){const{constructor:e}=this;e.observedAttributes??=[],e.symbols||(e.symbols={});const{symbols:t}=e,n=E(i);t[i]||(e.observedAttributes.push(n),t[i]=a)}return this[d]=D(t),"array"===this[d]?(this[a]=t,new Proxy(t,{get:(e,t)=>t===A?this[l]:(console.log("errr???"),Reflect.get(this[a],t)),set:(e,t,n)=>{if(t===A)return this[l]=n,!0;const r=Reflect.set(e,t,n);return"length"===t&&this[a].length===n||C(this,i),this[a]=n,r}})):(this[a]=e?e(this.getAttribute(i)??t):this.getAttribute(i)??t,this[a])}}}function O(){return function(e,t){const n=t.name,i=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${i}]`))}})}))}}Symbol("hasProxy");const A=Symbol("meta");function P({container:e,items:t,type:n,create:a,connect:r,disconnect:s,update:o}){function d(e,r){const s=n(e),o=document.createElement(E(s.name),s),d=s.observedAttributes??[],l=function(e,t){const n=new Set(e);return t.filter((e=>n.has(e)))}(Object.keys(e),d);return d.includes("index")&&(o.index=r),-1!==l.indexOf("index")&&l.splice(l.indexOf("index"),1),l.forEach((t=>{o[t]=e[t]})),a&&a(o,c(e)),t[r][i](o,((e,t)=>{o[e]=t})),o}t.forEach(((t,n)=>{const i=d(t,n);e.appendChild(i),r&&r(i,c(t))})),t[i](e,((n,i,a)=>{switch(i){case h:const[n,i,o]=a;for(let a=i||0;a<(o||t.length);a++)Object.keys(n).forEach((t=>{e.children[a][t]=n[t]}));break;case p:const l=e.children.length;l>0&&e.children[l-1].remove();break;case m:const y=e.children.length;[...a].forEach(((t,n)=>{const i=d(t,y+n);e.appendChild(i),r&&r(i,c(t))}));break;case g:for(var s=1;s<e.children.length;s++)e.insertBefore(e.children[s],e.children[0]);break;case u:e.children.length&&e.children[0].remove();for(let t=0;t<e.children.length;t++)e.children[t].index=t;break;case b:throw new Error("ToDo... write sort.");case v:const[w,x,...$]=a;if(x>0)for(let t=w;t<x+w;t++)e.children[t].remove();let E=$.length||0;if(E>0){const t=$.map(((e,t)=>d(e,w+t)));0===w?e.prepend(...t):e.children[w-1].after(...t);for(let t=w-x+E;t<e.children.length;t++)e.children[t].index=t;t.forEach((e=>{r&&r(e,$[s])}))}else for(let t=w;t<e.children.length;t++)e.children[t].index=t;break;case f:const L=e.children.length&&e.children[0],k=[...a].length;[...a].forEach(((t,n)=>{L?L.before(d(t,n)):e.appendChild(d(t,n))}));for(let t=k;t<e.children.length;t++)e.children[t].index=t}}))}var T=n(513),I=function(e,t,n,i,a,r){function s(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");r.push(s(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=s(b.get))&&(h.get=o),(o=s(b.set))&&(h.set=o),(o=s(b.init))&&a.unshift(o)}else(o=s(b))&&("field"===d?a.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},R=function(e,t,n){for(var i=arguments.length>2,a=0;a<t.length;a++)n=i?t[a].call(e,n):t[a].call(e);return i?n:void 0};const z=(()=>{let e,t,n,i,a,r,s=[k({selector:"pg-tree-button-icon",style:T.A,template:'<button part="button"> <pg-icon part="icon"></pg-icon> </button>'})],o=[],d=HTMLElement,l=[],c=[],h=[],p=[],m=[],g=[],u=[],b=[];(class extends d{static{t=this}static{const v="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[B()],i=[B()],a=[O()],r=[O()],I(null,null,n,{kind:"field",name:"index",static:!1,private:!1,access:{has:e=>"index"in e,get:e=>e.index,set:(e,t)=>{e.index=t}},metadata:v},l,c),I(null,null,i,{kind:"field",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:v},h,p),I(null,null,a,{kind:"field",name:"$button",static:!1,private:!1,access:{has:e=>"$button"in e,get:e=>e.$button,set:(e,t)=>{e.$button=t}},metadata:v},m,g),I(null,null,r,{kind:"field",name:"$icon",static:!1,private:!1,access:{has:e=>"$icon"in e,get:e=>e.$icon,set:(e,t)=>{e.$icon=t}},metadata:v},u,b),I(null,e={value:t},s,{kind:"class",name:t.name,metadata:v},null,o),t=e.value,v&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:v}),R(t,o)}index=R(this,l,void 0);icon=(R(this,c),R(this,h,"M0 0h24v24H0V0zm2 2v20h20V2H2z"));$button=(R(this,p),R(this,m,void 0));$icon=(R(this,g),R(this,u,void 0));connectedCallback(){this.$button.addEventListener("click",this.#e.bind(this))}#e(e){this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0,detail:{index:this.index}}))}render(e){e.icon&&(this.$icon.path=this.icon)}constructor(){super(...arguments),R(this,b)}});return t})();var j=n(273),K=function(e,t,n,i,a,r){function s(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");r.push(s(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=s(b.get))&&(h.get=o),(o=s(b.set))&&(h.set=o),(o=s(b.init))&&a.unshift(o)}else(o=s(b))&&("field"===d?a.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},M=function(e,t,n){for(var i=arguments.length>2,a=0;a<t.length;a++)n=i?t[a].call(e,n):t[a].call(e);return i?n:void 0};(()=>{let e,t,n,i,a,r,s,o,d,l,c,h,p,m,g,u,b,v,f,y,w,x=[k({selector:"pg-tree-item",style:j.A,template:'<div part="item" draggable="true"> <div part="selected"></div> <button part="toggle"></button> <button part="iconButton"> <pg-icon part="icon"></pg-icon> </button> <input part="input" type="text" class="hide"/> <button part="labelButton"> <span part="label"></span> </button> <div part="actions"></div> <div part="dropabove"></div> <div part="dropon"></div> <div part="dropbelow"></div> </div> <div part="items"></div>'})],$=[],E=HTMLElement,L=[],S=[],C=[],D=[],A=[],T=[],I=[],R=[],F=[],U=[],N=[],H=[],_=[],V=[],q=[],Y=[],W=[],Z=[],Q=[],G=[],J=[],X=[],ee=[],te=[],ne=[],ie=[],ae=[],re=[],se=[],oe=[],de=[],le=[],ce=[],he=[],pe=[],me=[],ge=[],ue=[];var be=class extends E{static{t=this}static{const k="function"==typeof Symbol&&Symbol.metadata?Object.create(E[Symbol.metadata]??null):void 0;n=[B()],i=[B()],a=[B()],r=[B()],s=[B()],o=[B()],d=[B()],l=[O()],c=[O()],h=[O()],p=[O()],m=[O()],g=[O()],u=[O()],b=[O()],v=[O()],f=[O()],y=[O()],w=[O()],K(null,null,n,{kind:"field",name:"index",static:!1,private:!1,access:{has:e=>"index"in e,get:e=>e.index,set:(e,t)=>{e.index=t}},metadata:k},L,S),K(null,null,i,{kind:"field",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:k},C,D),K(null,null,a,{kind:"field",name:"selected",static:!1,private:!1,access:{has:e=>"selected"in e,get:e=>e.selected,set:(e,t)=>{e.selected=t}},metadata:k},A,T),K(null,null,r,{kind:"field",name:"expanded",static:!1,private:!1,access:{has:e=>"expanded"in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:k},I,R),K(null,null,s,{kind:"field",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:k},F,U),K(null,null,o,{kind:"field",name:"actions",static:!1,private:!1,access:{has:e=>"actions"in e,get:e=>e.actions,set:(e,t)=>{e.actions=t}},metadata:k},N,H),K(null,null,d,{kind:"field",name:"items",static:!1,private:!1,access:{has:e=>"items"in e,get:e=>e.items,set:(e,t)=>{e.items=t}},metadata:k},_,V),K(null,null,l,{kind:"field",name:"$toggle",static:!1,private:!1,access:{has:e=>"$toggle"in e,get:e=>e.$toggle,set:(e,t)=>{e.$toggle=t}},metadata:k},q,Y),K(null,null,c,{kind:"field",name:"$item",static:!1,private:!1,access:{has:e=>"$item"in e,get:e=>e.$item,set:(e,t)=>{e.$item=t}},metadata:k},W,Z),K(null,null,h,{kind:"field",name:"$input",static:!1,private:!1,access:{has:e=>"$input"in e,get:e=>e.$input,set:(e,t)=>{e.$input=t}},metadata:k},Q,G),K(null,null,p,{kind:"field",name:"$iconButton",static:!1,private:!1,access:{has:e=>"$iconButton"in e,get:e=>e.$iconButton,set:(e,t)=>{e.$iconButton=t}},metadata:k},J,X),K(null,null,m,{kind:"field",name:"$icon",static:!1,private:!1,access:{has:e=>"$icon"in e,get:e=>e.$icon,set:(e,t)=>{e.$icon=t}},metadata:k},ee,te),K(null,null,g,{kind:"field",name:"$label",static:!1,private:!1,access:{has:e=>"$label"in e,get:e=>e.$label,set:(e,t)=>{e.$label=t}},metadata:k},ne,ie),K(null,null,u,{kind:"field",name:"$labelButton",static:!1,private:!1,access:{has:e=>"$labelButton"in e,get:e=>e.$labelButton,set:(e,t)=>{e.$labelButton=t}},metadata:k},ae,re),K(null,null,b,{kind:"field",name:"$actions",static:!1,private:!1,access:{has:e=>"$actions"in e,get:e=>e.$actions,set:(e,t)=>{e.$actions=t}},metadata:k},se,oe),K(null,null,v,{kind:"field",name:"$items",static:!1,private:!1,access:{has:e=>"$items"in e,get:e=>e.$items,set:(e,t)=>{e.$items=t}},metadata:k},de,le),K(null,null,f,{kind:"field",name:"$dropabove",static:!1,private:!1,access:{has:e=>"$dropabove"in e,get:e=>e.$dropabove,set:(e,t)=>{e.$dropabove=t}},metadata:k},ce,he),K(null,null,y,{kind:"field",name:"$dropon",static:!1,private:!1,access:{has:e=>"$dropon"in e,get:e=>e.$dropon,set:(e,t)=>{e.$dropon=t}},metadata:k},pe,me),K(null,null,w,{kind:"field",name:"$dropbelow",static:!1,private:!1,access:{has:e=>"$dropbelow"in e,get:e=>e.$dropbelow,set:(e,t)=>{e.$dropbelow=t}},metadata:k},ge,ue),K(null,e={value:t},x,{kind:"class",name:t.name,metadata:k},null,$),be=t=e.value,k&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:k}),M(t,$)}index=M(this,L,void 0);label=(M(this,S),M(this,C,""));selected=(M(this,D),M(this,A,!1));expanded=(M(this,T),M(this,I,!1));icon=(M(this,R),M(this,F,{path:"M0 0h24v24H0V0zm2 2v20h20V2H2z"}));actions=(M(this,U),M(this,N,[]));items=(M(this,H),M(this,_,[]));$toggle=(M(this,V),M(this,q,void 0));$item=(M(this,Y),M(this,W,void 0));$input=(M(this,Z),M(this,Q,void 0));$iconButton=(M(this,G),M(this,J,void 0));$icon=(M(this,X),M(this,ee,void 0));$label=(M(this,te),M(this,ne,void 0));$labelButton=(M(this,ie),M(this,ae,void 0));$actions=(M(this,re),M(this,se,void 0));$items=(M(this,oe),M(this,de,void 0));$dropabove=(M(this,le),M(this,ce,void 0));$dropon=(M(this,he),M(this,pe,void 0));$dropbelow=(M(this,me),M(this,ge,void 0));connectedCallback(){this.$toggle.addEventListener("click",this.#t.bind(this)),this.$item.addEventListener("action",this.#n.bind(this)),this.$item.addEventListener("pointerenter",this.#i.bind(this)),this.$item.addEventListener("pointerleave",this.#a.bind(this)),this.$item.addEventListener("dragstart",this.#r.bind(this)),this.$item.addEventListener("dragend",this.#s.bind(this)),this.$labelButton.addEventListener("dblclick",this.#o.bind(this)),this.$labelButton.addEventListener("click",this.#e.bind(this)),this.$labelButton.addEventListener("keydown",this.#d.bind(this)),this.$iconButton.addEventListener("dblclick",this.#l.bind(this)),this.$iconButton.addEventListener("click",this.#c.bind(this)),this.$iconButton.addEventListener("keydown",this.#h.bind(this)),this.$item.addEventListener("contextmenu",this.#p.bind(this)),this.$input.addEventListener("blur",this.#m.bind(this)),this.$input.addEventListener("keydown",this.#g.bind(this)),this.$items.addEventListener("action",this.#u.bind(this)),this.$items.addEventListener("move",this.#b.bind(this)),this.$items.addEventListener("toggle",this.#v.bind(this)),this.$items.addEventListener("select",this.#f.bind(this)),this.$items.addEventListener("rename",this.#y.bind(this)),this.$items.addEventListener("up",this.#w.bind(this)),this.$items.addEventListener("down",this.#x.bind(this)),this.$items.addEventListener("itemdragstart",this.#$.bind(this)),this.$items.addEventListener("itemdragend",this.#E.bind(this)),this.$items.addEventListener("itemdropenter",this.#L.bind(this)),this.$dropabove.addEventListener("dragenter",this.#k.bind(this)),this.$dropabove.addEventListener("dragleave",this.#S.bind(this)),this.$dropabove.addEventListener("dragover",this.#C.bind(this)),this.$dropabove.addEventListener("drop",this.#D.bind(this)),this.$dropon.addEventListener("dragenter",this.#B.bind(this)),this.$dropon.addEventListener("dragleave",this.#O.bind(this)),this.$dropon.addEventListener("dragover",this.#C.bind(this)),this.$dropon.addEventListener("drop",this.#A.bind(this)),this.$dropbelow.addEventListener("dragenter",this.#P.bind(this)),this.$dropbelow.addEventListener("dragleave",this.#T.bind(this)),this.$dropbelow.addEventListener("dragover",this.#C.bind(this)),this.$dropbelow.addEventListener("drop",this.#I.bind(this)),P({container:this.$actions,items:this.actions,type:e=>z}),this.expanded&&this.#R()}disconnectedCallback(){console.log("disconnect",this.index)}#z=(M(this,ue),!0);#R(){this.#z&&(P({container:this.$items,items:this.items,type:e=>be}),this.#z=!1)}render(e){e.label&&(this.$label.textContent=this.label),e.icon&&this.icon&&(this.$icon.path=this.icon.path),e.selected&&this.$item.classList.toggle("selected",this.selected),e.items&&this.$item.classList.toggle("items",0!==this.items.length),e.expanded&&(this.expanded&&this.#R(),this.$item.classList.toggle("expanded",this.expanded),this.$items.classList.toggle("expanded",this.expanded))}#t(){this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#l(e){const{ctrlKey:t,shiftKey:n}=e;t||n||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"icondoubleclick",indexes:[this.index]}}))}#c(){this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"icon",indexes:[this.index]}}))}#e(e){if(this.#j)return void(this.#j=!1);const{ctrlKey:t,shiftKey:n}=e;this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"label",indexes:[this.index],ctrlKey:t,shiftKey:n}}))}#d(e){"Enter"===e.key&&(this.#K(),e.preventDefault())}#i(){this.dispatchEvent(new CustomEvent("enter",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#a(){this.dispatchEvent(new CustomEvent("leave",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#n(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0,detail:{indexes:[this.index],actionIndex:e.detail.index}}))}#u(e){e.detail.indexes.unshift(this.index)}#b(e){e.detail.indexes.unshift(this.index)}#v(e){e.detail.indexes.unshift(this.index)}#y(e){e.detail.indexes.unshift(this.index)}#w(e){e.detail.indexes.unshift(this.index)}#x(e){e.detail.indexes.unshift(this.index)}#f(e){e.detail.indexes.unshift(this.index)}#L(e){e.detail.indexes.unshift(this.index)}#p(e){e.preventDefault()}#K(){this.$labelButton.classList.add("hide"),this.$actions.classList.add("hide"),this.$input.classList.remove("hide"),this.$input.value=this.label,this.$input.select(),this.#j=!0,this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"rename",indexes:[this.index]}}))}#j=!1;#o(e){const{ctrlKey:t,shiftKey:n}=e;t||n||(this.#K(),e.preventDefault())}#m(){this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),this.$labelButton.click(),this.dispatchEvent(new CustomEvent("rename",{bubbles:!0,composed:!0,detail:{indexes:[this.index],label:this.$input.value}}))}#h(e){switch(e.key){case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),e.preventDefault();break;case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),e.preventDefault()}}#g(e){switch(e.key){case"Enter":this.#m();break;case"Escape":this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),this.$input.value=this.label,this.$labelButton.click();break;case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),e.preventDefault();break;case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),e.preventDefault()}}#M;#r(e){let t=0;this.dispatchEvent(new CustomEvent("itemdragstart",{bubbles:!0,composed:!0,detail:{ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,indexes:[this.index],callback:e=>{t=e}}})),this.$item.classList.toggle("dragging",!0),this.$items.classList.toggle("dragging",!0);const n=window.devicePixelRatio,i=document.createElement("canvas");document.body.append(i),i.width=100*n,i.height=40*n,i.style.width=i.width/n+"px";var a=i.getContext("2d");if(a){const e=`${t}`;a.font=`bold ${16*n}px Segoe UI`;const i=a.measureText(e);a.fillStyle="#453C4F",a.beginPath(),a.roundRect(20*n,0,(i.width+12)*n,28*n,8+2*n),a.fill(),a.fillStyle="#FFF",a.beginPath(),a.roundRect(22*n,2*n,(i.width+12-4)*n,24*n,8),a.fill(),a.fillStyle="#453C4F",a.fillText(e,30*n,20*n)}e.dataTransfer.setDragImage(i,0,0),this.#M=i}#s(e){this.dispatchEvent(new CustomEvent("itemdragend",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$item.classList.toggle("dragging",!1),this.$items.classList.toggle("dragging",!1),this.#M.remove()}#$(e){e.detail.indexes.unshift(this.index)}#E(e){e.detail.indexes.unshift(this.index)}#k(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0),e.dataTransfer.setData("text","test"),e.dataTransfer.effectAllowed="move"}#S(e){console.log("darg leave"),e.target.classList.toggle("drop",!1)}#F;#B(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0),this.#F=setTimeout((()=>{this.#t()}),1500)}#O(e){clearTimeout(this.#F),console.log("darg leave"),e.target.classList.toggle("drop",!1)}#P(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0)}#T(e){console.log("darg leave"),e.target.classList.toggle("drop",!1)}#C(e){e.preventDefault(),e.dataTransfer.dropEffect="move"}#D(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"before"}}))}#A(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"on"}}))}#I(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"after"}}))}};be=t})()})();
+(()=>{"use strict";var e={84:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11%27 fill=%27rgb%2869 60 79%29%27 /></svg>"},122:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 11,17L 13,17L 19,11L 17,9L 12,14L 7,9L 5,11%27 fill=%27white%27 /></svg>"},273:(e,t,n)=>{n.d(t,{A:()=>y});var i=n(601),a=n.n(i),r=n(314),s=n.n(r),o=n(417),d=n.n(o),l=new URL(n(630),n.b),c=new URL(n(122),n.b),h=new URL(n(432),n.b),p=new URL(n(84),n.b),m=s()(a()),g=d()(l),u=d()(c),b=d()(h),v=d()(p);m.push([e.id,`:host {\n  display: contents;\n  --y: calc(var(--x) + 1);\n}\n\n.hide {\n  display: none !important;\n}\n\n[part=iconButton] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  color: var(--pg-tree-item-color, #453C4F);\n  padding: 0;\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n  align-items: center;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n}\n\n[part=labelButton] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  color: var(--pg-tree-item-color, #453C4F);\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n  flex: 1;\n  align-items: center;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n  margin: -0.25rem -0.25rem -0.25rem -0.25rem;\n  padding: 0 0.25rem 0 0.25rem;\n}\n\n[part=label] {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n[part=input] {\n  display: flex;\n  font-family: var(--pg-font-family);\n  font-size: var(--pg-tree-item-font-size, 1rem);\n  border-radius: 0.125rem;\n  flex: 1;\n  outline: 0;\n  padding: 0 0.25rem;\n  margin: -0.125rem -0.625rem -0.125rem -0.25rem;\n  border-width: var(--pg-tree-item-border-width, 0);\n  border-style: solid;\n  border-color: var(--pg-tree-item-border-color, #453C4F);\n}\n\n[part=item] {\n  display: grid;\n  background: var(--pg-tree-item-background, transparent);\n  border-radius: 0.25rem;\n  padding: 0.25rem;\n  gap: 0 0.5rem;\n  user-select: none;\n  padding-left: calc((var(--x) * 0.5rem) + 0.25rem);\n  transition: background-color 0.1s ease-out;\n}\n\n[part=item] {\n  grid-template-columns: min-content min-content minmax(0, 1fr) min-content;\n  grid-template-rows: auto;\n}\n[part=item] [part=selected] {\n  grid-row: 1;\n  grid-column: 1;\n}\n[part=item] [part=toggle] {\n  grid-row: 1;\n  grid-column: 1;\n}\n[part=item] [part=iconButton] {\n  grid-row: 1;\n  grid-column: 2;\n}\n[part=item] [part=labelButton] {\n  grid-row: 1;\n  grid-column: 3;\n}\n[part=item] [part=actions] {\n  grid-row: 1;\n  grid-column: 4;\n}\n[part=item] [part=dropabove] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  align-self: flex-start;\n  transform: translateY(-0.875rem);\n  height: 1rem;\n  margin: 0 -0.25rem 0 -0.25rem;\n  z-index: 1;\n}\n[part=item] [part=dropon] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  margin: 0.125rem -0.25rem;\n  z-index: 1;\n}\n[part=item]:not(.items) [part=dropon] {\n  display: none;\n}\n[part=item].items.expanded [part=dropbelow] {\n  display: none;\n}\n[part=item] [part=dropbelow] {\n  grid-row: 1;\n  grid-column: 1 / 5;\n  align-self: flex-end;\n  transform: translateY(0.875rem);\n  height: 1rem;\n  margin: 0 -0.25rem 0 -0.25rem;\n  z-index: 1;\n}\n\n[part=item]:not(.selected):not(.dragging):hover {\n  background: var(--pg-tree-selected-secondary, rgb(69, 60, 79, 0.1));\n}\n[part=item].selected:not(.dragging):hover {\n  background: var(--pg-tree-selected-secondary-hover, rgb(69, 60, 79, 0.1));\n}\n[part=item].selected,\n[part=item].items.selected {\n  background-color: var(--pg-tree-selected-secondary);\n}\n[part=item].items.selected:not(.expanded):not(.dragging) [part=toggle] {\n  border-radius: 0.125rem;\n  background-color: var(--pg-tree-selected-primary);\n  background-image: url(${g}) !important;\n}\n\n[part=item].items.selected.expanded:not(.dragging) [part=toggle] {\n  border-radius: 0.125rem;\n  background-color: var(--pg-tree-selected-primary);\n  background-image: url(${u}) !important;\n}\n\n[part=item].items [part=selected] {\n  display: none;\n}\n\n[part=item]:not(.items) [part=selected] {\n  visibility: hidden;\n  display: flex;\n  width: 1rem;\n  margin-left: -0.125rem;\n  margin-right: -0.375rem;\n  margin-top: -0.125rem;\n  margin-bottom: -0.125rem;\n  border-radius: 0.125rem;\n  background: var(--pg-tree-selected-primary);\n}\n\n[part=item]:not(.dragging):not(.items).selected [part=selected] {\n  visibility: visible;\n}\n\n[part=actions] {\n  display: flex;\n  gap: 0.25rem;\n  --pg-icon-color: var(--pg-tree-item-color, #453C4F);\n}\n\n[part=items] {\n  display: none;\n  flex-direction: column;\n  --x: calc(var(--y) + 1);\n  gap: 0.25rem;\n}\n[part=items].expanded {\n  display: flex;\n}\n\n[part=toggle] {\n  display: none;\n  margin-left: -0.125rem;\n  margin-right: -0.375rem;\n  margin-top: -0.125rem;\n  margin-bottom: -0.125rem;\n  padding: 0 0 0 1rem;\n  width: 1rem;\n  border: 0;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: transparent;\n}\n\n[part=toggle]:hover {\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 0.125rem;\n}\n\n[part=item].items:not(.expanded) [part=toggle] {\n  display: flex;\n  background-image: url(${b});\n}\n\n[part=item].items.expanded [part=toggle] {\n  display: flex;\n  background-image: url(${v});\n}\n\n[part=dropabove].drop::before,\n[part=dropbelow].drop::before {\n  content: ' ';\n  height: 0.25rem;\n  background-color: rgb(79, 143, 249);\n  border-radius: 0.125rem;\n  display: flex;\n  margin-top: 0.375rem;\n}\n\n[part=dropon].drop {\n  margin: -0.25rem !important;\n  border: 4px solid rgb(79, 143, 249);\n  border-radius: 0.25rem;\n}\n\n[part=item].dragging::after {\n  content: ' ';\n  display: flex;\n  grid-column: 1 / 5;\n  grid-row: 1;\n  border-radius: 0.25rem;\n  background: rgba(255, 255, 255, 0.5);\n  user-select: none;\n  margin: -0.25rem;\n  border: 2px dashed rgb(79, 143, 249);\n}\n[part=items].dragging {\n  --pg-_is-index-dragging: true;\n}\n[part=item].dragging [part=dropabove],\n[part=item].dragging [part=dropon],\n[part=item].dragging [part=dropbelow] {\n  display: none;\n}\n\n@container style(--pg-_is-dragging: false) {\n  [part=dropabove],\n  [part=dropon],\n  [part=dropbelow] {\n    display: none;\n  }\n}\n\n@container style(--pg-_is-index-dragging: true) {\n  [part=item]::after {\n    content: ' ';\n    display: flex;\n    grid-column: 1 / 5;\n    grid-row: 1;\n    border-radius: 0.25rem;\n    background: rgba(255, 255, 255, 0.5);\n    user-select: none;\n    margin: -0.25rem;\n  }\n  [part=dropabove],\n  [part=dropon],\n  [part=dropbelow] {\n    display: none;\n  }\n}\n`,""]);var f=new CSSStyleSheet;f.replaceSync(m.toString());const y=f},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,i,a,r){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(i)for(var o=0;o<this.length;o++){var d=this[o][0];null!=d&&(s[d]=!0)}for(var l=0;l<e.length;l++){var c=[].concat(e[l]);i&&s[c[0]]||(void 0!==r&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=r),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),a&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=a):c[4]="".concat(a)),t.push(c))}},t}},417:e=>{e.exports=function(e,t){return t||(t={}),e?(e=String(e.__esModule?e.default:e),/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),t.hash&&(e+=t.hash),/["'() \t\n]|(%20)/.test(e)||t.needQuotes?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e):e}},432:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill=%27rgb%2869 60 79%29%27 /></svg>"},513:(e,t,n)=>{n.d(t,{A:()=>d});var i=n(601),a=n.n(i),r=n(314),s=n.n(r)()(a());s.push([e.id,':host {\n  display: contents;\n}\n\n[part="button"] {\n  display: flex;\n  background: transparent;\n  border: 0;\n  padding: 0.125rem;\n  margin: -0.125rem;\n  border-radius: 0.125rem;\n}\n\n[part="button"]:hover {\n  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 0.125rem;\n}',""]);var o=new CSSStyleSheet;o.replaceSync(s.toString());const d=o},601:e=>{e.exports=function(e){return e[1]}},630:e=>{e.exports="data:image/svg+xml; utf8, <svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M 17,13L 17,11L 11,5L 9,7L 14,12L 9,17L 11,19%27 fill=%27white%27 /></svg>"}},t={};function n(i){var a=t[i];if(void 0!==a)return a.exports;var r=t[i]={id:i,exports:{}};return e[i](r,r.exports,n),r.exports}n.m=e,n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.b="undefined"!=typeof document&&document.baseURI||self.location.href;const i=Symbol("addObserver"),a=Symbol("removeObserver"),r=Symbol("getObservers"),s=Symbol("isProxy"),o=Symbol("getTarget"),d=["fill","pop","push","reverse","shift","sort","splice","unshift"],l=new Map;function c(e){return new Proxy(e,{get(t,n){if("symbol"==typeof n){switch(n){case s:return!0;case o:return t;case r:return l.has(e);case i:return(t,n)=>{l.has(e)?l.get(e).has(t)?l.get(e).get(t).push(n):l.get(e).set(t,[n]):l.set(e,new Map([[t,[n]]]))};case a:return t=>{l.has(e)&&(l.get(e).delete(t),0===l.get(e).size&&l.delete(e))};case Symbol.toPrimitive:case Symbol.toStringTag:return Reflect.get(t,n)}throw new Error("Unsupported symbol")}if(n in t){if(!Number.isNaN(Number(n)))return"object"==typeof t[n]?c(t[n]):t[n];if("copyWithin"===n)throw new Error("Unsupported array method copyWithin");if(d.includes(n))return l.has(t)?function(){const e=Array.prototype[n].apply(t,arguments);return l.get(t).forEach(((e,i)=>{e.forEach((e=>{e(t,n,arguments)}))})),e}:Reflect.get(t,n);if(t[n]instanceof Array)return c(t[n])}return Reflect.get(t,n)},set(e,t,n){if("symbol"==typeof t)throw new Error("Setting symbols not allowed.");if(Array.isArray(e))return Reflect.set(e,t,n);if(l.has(e)){l.get(e).forEach(((e,i)=>{e.forEach((e=>{e(t,n)}))}))}return Reflect.set(e,t,n)}})}window.observers=l;const h="fill",p="pop",m="push",g="reverse",u="shift",b="sort",v="splice",f="unshift";class PropError extends Error{constructor(e,t){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,t)}}Symbol("index");const y=Symbol("init"),w=Symbol("template"),x=Symbol("style"),$=Symbol("parent");function E(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function L(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function k(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var i,a;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[$]||t.prototype[$][t.prototype[$].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[$]=[t.prototype],t.prototype[x]=e.style?[e.style]:[],t.prototype[w]=e.template||""):(t.prototype[$].push(t.prototype),t.prototype[x].push(e.style),t.prototype[w]=(i=t.prototype[w],(a=e.template||null)&&a.match(/<parent\/>/)?a.replace(/<parent\/>/,i):`${i}${a||""}`));const r=t.prototype.connectedCallback||(()=>{}),s=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[y]||void 0!==e.template||void 0!==e.style)if(this[y]){if(this[y]&&e.style);else if(this[y]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=t.prototype[w]||"";const n=document.importNode(e.content,!0),i=this.attachShadow({mode:"open"});i.adoptedStyleSheets=t.prototype[x].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),i.appendChild(n)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const n=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&n.add(e.localName);const i=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),a=()=>{this[$].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[L(t)]=!0,e)),{}):{})}))};0===i.length?(this[y]=!0,r.call(this),a()):Promise.all(i).then((()=>{this[y]=!0,r.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));a()}))},t.prototype.disconnectedCallback=function(){s.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[L(e)]=n},n.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${n.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,t)}}))}}Symbol("transmute");function S(e){return!!e&&e.constructor===Array}function C(e,t){e[y]&&e[$].map((n=>{n.render&&n.render.call(e,{[t]:!0})}))}function D(e){return null===e?"null":S(e)?"array":typeof e}function B(e){return function(t,n){const i=n.name,a=Symbol(i),d=Symbol(`${i}:type`),l=Symbol(`${i}:meta`);return n.addInitializer((function(){Reflect.defineProperty(this,i,{get:()=>"object"===this[d]||"array"===this[d]?this[a][s]?this[a]:c(this[a]):this[a],set:t=>{const n=D(e?e(t):t);if("index"!==i&&this[d]!==n&&"null"!==this[d]&&"null"!==n)throw new Error(`@Prop() ${i} with type '${this[d]}' cannot be set to ${n}.`);if("array"===this[d]){if(!S(t))throw new PropError(`Array "${i}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,i)?.set);if(this[a]===t)throw new Error("Setting an array to itself is not allowed.");const e=c(this[a]);if(e[r]){const n=t[s]?(l=t)[s]&&l[o]:t;e.splice(0,this[a].length,...n)}else this[a]=t}else this[a]=e?e(t):t,C(this,i);var l}})})),function(t){if(void 0===t&&"index"!==i)throw new Error(`@Prop() ${i} must have an initial value defined.`);if(void 0!==t&&"index"===i)throw new Error("@Prop() index must not have an initial value defined.");if(!0===t)throw new Error(`@Prop() ${i} boolean must initialize to false.`);if(!n.private){const{constructor:e}=this;e.observedAttributes??=[],e.symbols||(e.symbols={});const{symbols:t}=e,n=E(i);t[i]||(e.observedAttributes.push(n),t[i]=a)}return this[d]=D(t),"array"===this[d]?(this[a]=t,new Proxy(t,{get:(e,t)=>t===A?this[l]:(console.log("errr???"),Reflect.get(this[a],t)),set:(e,t,n)=>{if(t===A)return this[l]=n,!0;const r=Reflect.set(e,t,n);return"length"===t&&this[a].length===n||C(this,i),this[a]=n,r}})):(this[a]=e?e(this.getAttribute(i)??t):this.getAttribute(i)??t,this[a])}}}function O(){return function(e,t){const n=t.name,i=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${i}]`))}})}))}}Symbol("hasProxy");const A=Symbol("meta");function P({container:e,items:t,type:n,create:a,connect:r,disconnect:s,update:o}){function d(e,r){const s=n(e),o=document.createElement(E(s.name),s),d=s.observedAttributes??[],l=function(e,t){const n=new Set(e);return t.filter((e=>n.has(e)))}(Object.keys(e),d);return d.includes("index")&&(o.index=r),-1!==l.indexOf("index")&&l.splice(l.indexOf("index"),1),l.forEach((t=>{o[t]=e[t]})),a&&a(o,c(e)),t[r][i](o,((e,t)=>{o[e]=t})),o}t.forEach(((t,n)=>{const i=d(t,n);e.appendChild(i),r&&r(i,c(t))})),t[i](e,((n,i,a)=>{switch(i){case h:const[n,i,o]=a;for(let a=i||0;a<(o||t.length);a++)Object.keys(n).forEach((t=>{e.children[a][t]=n[t]}));break;case p:const l=e.children.length;l>0&&e.children[l-1].remove();break;case m:const y=e.children.length;[...a].forEach(((t,n)=>{const i=d(t,y+n);e.appendChild(i),r&&r(i,c(t))}));break;case g:for(var s=1;s<e.children.length;s++)e.insertBefore(e.children[s],e.children[0]);break;case u:e.children.length&&e.children[0].remove();for(let t=0;t<e.children.length;t++)e.children[t].index=t;break;case b:throw new Error("ToDo... write sort.");case v:const[w,x,...$]=a;if(x>0)for(let t=w;t<x+w;t++)e.children[t].remove();let E=$.length||0;if(E>0){const t=$.map(((e,t)=>d(e,w+t)));0===w?e.prepend(...t):e.children[w-1].after(...t);for(let t=w-x+E;t<e.children.length;t++)e.children[t].index=t;t.forEach((e=>{r&&r(e,$[s])}))}else for(let t=w;t<e.children.length;t++)e.children[t].index=t;break;case f:const L=e.children.length&&e.children[0],k=[...a].length;[...a].forEach(((t,n)=>{L?L.before(d(t,n)):e.appendChild(d(t,n))}));for(let t=k;t<e.children.length;t++)e.children[t].index=t}}))}var T=n(513),I=function(e,t,n,i,a,r){function s(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");r.push(s(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=s(b.get))&&(h.get=o),(o=s(b.set))&&(h.set=o),(o=s(b.init))&&a.unshift(o)}else(o=s(b))&&("field"===d?a.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},R=function(e,t,n){for(var i=arguments.length>2,a=0;a<t.length;a++)n=i?t[a].call(e,n):t[a].call(e);return i?n:void 0};const z=(()=>{let e,t,n,i,a,r,s=[k({selector:"pg-tree-button-icon",style:T.A,template:'<button part="button"> <pg-icon part="icon"></pg-icon> </button>'})],o=[],d=HTMLElement,l=[],c=[],h=[],p=[],m=[],g=[],u=[],b=[];(class extends d{static{t=this}static{const v="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[B()],i=[B()],a=[O()],r=[O()],I(null,null,n,{kind:"field",name:"index",static:!1,private:!1,access:{has:e=>"index"in e,get:e=>e.index,set:(e,t)=>{e.index=t}},metadata:v},l,c),I(null,null,i,{kind:"field",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:v},h,p),I(null,null,a,{kind:"field",name:"$button",static:!1,private:!1,access:{has:e=>"$button"in e,get:e=>e.$button,set:(e,t)=>{e.$button=t}},metadata:v},m,g),I(null,null,r,{kind:"field",name:"$icon",static:!1,private:!1,access:{has:e=>"$icon"in e,get:e=>e.$icon,set:(e,t)=>{e.$icon=t}},metadata:v},u,b),I(null,e={value:t},s,{kind:"class",name:t.name,metadata:v},null,o),t=e.value,v&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:v}),R(t,o)}index=R(this,l,void 0);icon=(R(this,c),R(this,h,"M0 0h24v24H0V0zm2 2v20h20V2H2z"));$button=(R(this,p),R(this,m,void 0));$icon=(R(this,g),R(this,u,void 0));connectedCallback(){this.$button.addEventListener("click",this.#e.bind(this))}#e(e){this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0,detail:{index:this.index}}))}render(e){e.icon&&(this.$icon.path=this.icon)}constructor(){super(...arguments),R(this,b)}});return t})();var j=n(273),K=function(e,t,n,i,a,r){function s(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var o,d=i.kind,l="getter"===d?"get":"setter"===d?"set":"value",c=!t&&e?i.static?e:e.prototype:null,h=t||(c?Object.getOwnPropertyDescriptor(c,i.name):{}),p=!1,m=n.length-1;m>=0;m--){var g={};for(var u in i)g[u]="access"===u?{}:i[u];for(var u in i.access)g.access[u]=i.access[u];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");r.push(s(e||null))};var b=(0,n[m])("accessor"===d?{get:h.get,set:h.set}:h[l],g);if("accessor"===d){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(o=s(b.get))&&(h.get=o),(o=s(b.set))&&(h.set=o),(o=s(b.init))&&a.unshift(o)}else(o=s(b))&&("field"===d?a.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},M=function(e,t,n){for(var i=arguments.length>2,a=0;a<t.length;a++)n=i?t[a].call(e,n):t[a].call(e);return i?n:void 0};(()=>{let e,t,n,i,a,r,s,o,d,l,c,h,p,m,g,u,b,v,f,y,w,x=[k({selector:"pg-tree-item",style:j.A,template:'<div part="item" draggable="true"> <div part="selected"></div> <button part="toggle"></button> <button part="iconButton"> <pg-icon part="icon"></pg-icon> </button> <input part="input" type="text" class="hide"/> <button part="labelButton"> <span part="label"></span> </button> <div part="actions"></div> <div part="dropabove"></div> <div part="dropon"></div> <div part="dropbelow"></div> </div> <div part="items"></div>'})],$=[],E=HTMLElement,L=[],S=[],C=[],D=[],A=[],T=[],I=[],R=[],F=[],U=[],N=[],H=[],_=[],V=[],q=[],Y=[],W=[],Z=[],Q=[],G=[],J=[],X=[],ee=[],te=[],ne=[],ie=[],ae=[],re=[],se=[],oe=[],de=[],le=[],ce=[],he=[],pe=[],me=[],ge=[],ue=[];var be=class extends E{static{t=this}static{const k="function"==typeof Symbol&&Symbol.metadata?Object.create(E[Symbol.metadata]??null):void 0;n=[B()],i=[B()],a=[B()],r=[B()],s=[B()],o=[B()],d=[B()],l=[O()],c=[O()],h=[O()],p=[O()],m=[O()],g=[O()],u=[O()],b=[O()],v=[O()],f=[O()],y=[O()],w=[O()],K(null,null,n,{kind:"field",name:"index",static:!1,private:!1,access:{has:e=>"index"in e,get:e=>e.index,set:(e,t)=>{e.index=t}},metadata:k},L,S),K(null,null,i,{kind:"field",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:k},C,D),K(null,null,a,{kind:"field",name:"selected",static:!1,private:!1,access:{has:e=>"selected"in e,get:e=>e.selected,set:(e,t)=>{e.selected=t}},metadata:k},A,T),K(null,null,r,{kind:"field",name:"expanded",static:!1,private:!1,access:{has:e=>"expanded"in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:k},I,R),K(null,null,s,{kind:"field",name:"icon",static:!1,private:!1,access:{has:e=>"icon"in e,get:e=>e.icon,set:(e,t)=>{e.icon=t}},metadata:k},F,U),K(null,null,o,{kind:"field",name:"actions",static:!1,private:!1,access:{has:e=>"actions"in e,get:e=>e.actions,set:(e,t)=>{e.actions=t}},metadata:k},N,H),K(null,null,d,{kind:"field",name:"items",static:!1,private:!1,access:{has:e=>"items"in e,get:e=>e.items,set:(e,t)=>{e.items=t}},metadata:k},_,V),K(null,null,l,{kind:"field",name:"$toggle",static:!1,private:!1,access:{has:e=>"$toggle"in e,get:e=>e.$toggle,set:(e,t)=>{e.$toggle=t}},metadata:k},q,Y),K(null,null,c,{kind:"field",name:"$item",static:!1,private:!1,access:{has:e=>"$item"in e,get:e=>e.$item,set:(e,t)=>{e.$item=t}},metadata:k},W,Z),K(null,null,h,{kind:"field",name:"$input",static:!1,private:!1,access:{has:e=>"$input"in e,get:e=>e.$input,set:(e,t)=>{e.$input=t}},metadata:k},Q,G),K(null,null,p,{kind:"field",name:"$iconButton",static:!1,private:!1,access:{has:e=>"$iconButton"in e,get:e=>e.$iconButton,set:(e,t)=>{e.$iconButton=t}},metadata:k},J,X),K(null,null,m,{kind:"field",name:"$icon",static:!1,private:!1,access:{has:e=>"$icon"in e,get:e=>e.$icon,set:(e,t)=>{e.$icon=t}},metadata:k},ee,te),K(null,null,g,{kind:"field",name:"$label",static:!1,private:!1,access:{has:e=>"$label"in e,get:e=>e.$label,set:(e,t)=>{e.$label=t}},metadata:k},ne,ie),K(null,null,u,{kind:"field",name:"$labelButton",static:!1,private:!1,access:{has:e=>"$labelButton"in e,get:e=>e.$labelButton,set:(e,t)=>{e.$labelButton=t}},metadata:k},ae,re),K(null,null,b,{kind:"field",name:"$actions",static:!1,private:!1,access:{has:e=>"$actions"in e,get:e=>e.$actions,set:(e,t)=>{e.$actions=t}},metadata:k},se,oe),K(null,null,v,{kind:"field",name:"$items",static:!1,private:!1,access:{has:e=>"$items"in e,get:e=>e.$items,set:(e,t)=>{e.$items=t}},metadata:k},de,le),K(null,null,f,{kind:"field",name:"$dropabove",static:!1,private:!1,access:{has:e=>"$dropabove"in e,get:e=>e.$dropabove,set:(e,t)=>{e.$dropabove=t}},metadata:k},ce,he),K(null,null,y,{kind:"field",name:"$dropon",static:!1,private:!1,access:{has:e=>"$dropon"in e,get:e=>e.$dropon,set:(e,t)=>{e.$dropon=t}},metadata:k},pe,me),K(null,null,w,{kind:"field",name:"$dropbelow",static:!1,private:!1,access:{has:e=>"$dropbelow"in e,get:e=>e.$dropbelow,set:(e,t)=>{e.$dropbelow=t}},metadata:k},ge,ue),K(null,e={value:t},x,{kind:"class",name:t.name,metadata:k},null,$),be=t=e.value,k&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:k}),M(t,$)}index=M(this,L,void 0);label=(M(this,S),M(this,C,""));selected=(M(this,D),M(this,A,!1));expanded=(M(this,T),M(this,I,!1));icon=(M(this,R),M(this,F,{path:"M0 0h24v24H0V0zm2 2v20h20V2H2z"}));actions=(M(this,U),M(this,N,[]));items=(M(this,H),M(this,_,[]));$toggle=(M(this,V),M(this,q,void 0));$item=(M(this,Y),M(this,W,void 0));$input=(M(this,Z),M(this,Q,void 0));$iconButton=(M(this,G),M(this,J,void 0));$icon=(M(this,X),M(this,ee,void 0));$label=(M(this,te),M(this,ne,void 0));$labelButton=(M(this,ie),M(this,ae,void 0));$actions=(M(this,re),M(this,se,void 0));$items=(M(this,oe),M(this,de,void 0));$dropabove=(M(this,le),M(this,ce,void 0));$dropon=(M(this,he),M(this,pe,void 0));$dropbelow=(M(this,me),M(this,ge,void 0));connectedCallback(){this.$toggle.addEventListener("click",this.#t.bind(this)),this.$item.addEventListener("action",this.#n.bind(this)),this.$item.addEventListener("pointerenter",this.#i.bind(this)),this.$item.addEventListener("pointerleave",this.#a.bind(this)),this.$item.addEventListener("dragstart",this.#r.bind(this)),this.$item.addEventListener("dragend",this.#s.bind(this)),this.$labelButton.addEventListener("dblclick",this.#o.bind(this)),this.$labelButton.addEventListener("click",this.#e.bind(this)),this.$labelButton.addEventListener("keydown",this.#d.bind(this)),this.$iconButton.addEventListener("dblclick",this.#l.bind(this)),this.$iconButton.addEventListener("click",this.#c.bind(this)),this.$iconButton.addEventListener("keydown",this.#h.bind(this)),this.$item.addEventListener("contextmenu",this.#p.bind(this)),this.$input.addEventListener("blur",this.#m.bind(this)),this.$input.addEventListener("keydown",this.#g.bind(this)),this.$items.addEventListener("action",this.#u.bind(this)),this.$items.addEventListener("move",this.#b.bind(this)),this.$items.addEventListener("toggle",this.#v.bind(this)),this.$items.addEventListener("select",this.#f.bind(this)),this.$items.addEventListener("rename",this.#y.bind(this)),this.$items.addEventListener("up",this.#w.bind(this)),this.$items.addEventListener("down",this.#x.bind(this)),this.$items.addEventListener("itemdragstart",this.#$.bind(this)),this.$items.addEventListener("itemdragend",this.#E.bind(this)),this.$items.addEventListener("itemdropenter",this.#L.bind(this)),this.$dropabove.addEventListener("dragenter",this.#k.bind(this)),this.$dropabove.addEventListener("dragleave",this.#S.bind(this)),this.$dropabove.addEventListener("dragover",this.#C.bind(this)),this.$dropabove.addEventListener("drop",this.#D.bind(this)),this.$dropon.addEventListener("dragenter",this.#B.bind(this)),this.$dropon.addEventListener("dragleave",this.#O.bind(this)),this.$dropon.addEventListener("dragover",this.#C.bind(this)),this.$dropon.addEventListener("drop",this.#A.bind(this)),this.$dropbelow.addEventListener("dragenter",this.#P.bind(this)),this.$dropbelow.addEventListener("dragleave",this.#T.bind(this)),this.$dropbelow.addEventListener("dragover",this.#C.bind(this)),this.$dropbelow.addEventListener("drop",this.#I.bind(this)),P({container:this.$actions,items:this.actions,type:e=>z}),this.expanded&&this.#R()}disconnectedCallback(){console.log("disconnect",this.index)}#z=(M(this,ue),!0);#R(){this.#z&&(P({container:this.$items,items:this.items,type:e=>be}),this.#z=!1)}render(e){e.label&&(this.$label.textContent=this.label),e.icon&&this.icon&&(this.$icon.path=this.icon.path),e.selected&&this.$item.classList.toggle("selected",this.selected),e.items&&this.$item.classList.toggle("items",0!==this.items.length),e.expanded&&(this.expanded&&this.#R(),this.$item.classList.toggle("expanded",this.expanded),this.$items.classList.toggle("expanded",this.expanded))}#t(){this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#l(e){const{ctrlKey:t,shiftKey:n}=e;t||n||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"icondoubleclick",indexes:[this.index]}}))}#c(){this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"icon",indexes:[this.index]}}))}#e(e){if(this.#j)return void(this.#j=!1);const{ctrlKey:t,shiftKey:n}=e;this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"label",indexes:[this.index],ctrlKey:t,shiftKey:n}}))}#d(e){"Enter"===e.key&&(this.#K(),e.preventDefault())}#i(){this.dispatchEvent(new CustomEvent("enter",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#a(){this.dispatchEvent(new CustomEvent("leave",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}}))}#n(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0,detail:{indexes:[this.index],actionIndex:e.detail.index}}))}#u(e){e.detail.indexes.unshift(this.index)}#b(e){e.detail.indexes.unshift(this.index)}#v(e){e.detail.indexes.unshift(this.index)}#y(e){e.detail.indexes.unshift(this.index)}#w(e){e.detail.indexes.unshift(this.index)}#x(e){e.detail.indexes.unshift(this.index)}#f(e){e.detail.indexes.unshift(this.index)}#L(e){e.detail.indexes.unshift(this.index)}#p(e){e.preventDefault()}#K(){this.$labelButton.classList.add("hide"),this.$actions.classList.add("hide"),this.$input.classList.remove("hide"),this.$input.value=this.label,this.$input.select(),this.#j=!0,this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{type:"rename",indexes:[this.index]}}))}#j=!1;#o(e){const{ctrlKey:t,shiftKey:n}=e;t||n||(this.#K(),e.preventDefault())}#m(){this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),this.$labelButton.click(),this.dispatchEvent(new CustomEvent("rename",{bubbles:!0,composed:!0,detail:{indexes:[this.index],label:this.$input.value}}))}#h(e){switch(e.key){case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),e.preventDefault();break;case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),e.preventDefault()}}#g(e){switch(e.key){case"Enter":this.#m();break;case"Escape":this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),this.$input.value=this.label,this.$labelButton.click();break;case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),e.preventDefault();break;case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$labelButton.classList.remove("hide"),this.$actions.classList.remove("hide"),this.$input.classList.add("hide"),e.preventDefault()}}#M;#r(e){let t=0;this.dispatchEvent(new CustomEvent("itemdragstart",{bubbles:!0,composed:!0,detail:{ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,indexes:[this.index],callback:e=>{t=e}}})),this.$item.classList.toggle("dragging",!0),this.$items.classList.toggle("dragging",!0);const n=window.devicePixelRatio,i=document.createElement("canvas");document.body.append(i),i.width=100*n,i.height=40*n,i.style.width=i.width/n+"px";var a=i.getContext("2d");if(a){const e=`${t}`;a.font=`bold ${16*n}px Segoe UI`;const i=a.measureText(e);a.fillStyle="#453C4F",a.beginPath(),a.roundRect(20*n,0,(i.width+12)*n,28*n,8+2*n),a.fill(),a.fillStyle="#FFF",a.beginPath(),a.roundRect(22*n,2*n,(i.width+12-4)*n,24*n,8),a.fill(),a.fillStyle="#453C4F",a.fillText(e,30*n,20*n)}e.dataTransfer.setDragImage(i,0,0),this.#M=i}#s(e){this.dispatchEvent(new CustomEvent("itemdragend",{bubbles:!0,composed:!0,detail:{indexes:[this.index]}})),this.$item.classList.toggle("dragging",!1),this.$items.classList.toggle("dragging",!1),this.#M.remove()}#$(e){e.detail.indexes.unshift(this.index)}#E(e){e.detail.indexes.unshift(this.index)}#k(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0),e.dataTransfer.setData("text","test"),e.dataTransfer.effectAllowed="move"}#S(e){console.log("darg leave"),e.target.classList.toggle("drop",!1)}#F;#B(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0),this.#F=setTimeout((()=>{this.#t()}),1500)}#O(e){clearTimeout(this.#F),console.log("darg leave"),e.target.classList.toggle("drop",!1)}#P(e){this.dispatchEvent(new CustomEvent("itemdropenter",{bubbles:!0,composed:!0,detail:{indexes:[this.index],callback:t=>{t&&(e.dataTransfer.dropEffect="move")}}})),e.target.classList.toggle("drop",!0)}#T(e){console.log("darg leave"),e.target.classList.toggle("drop",!1)}#C(e){e.preventDefault(),e.dataTransfer.dropEffect="move"}#D(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"before"}}))}#A(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"on"}}))}#I(e){e.target.classList.toggle("drop",!1),this.dispatchEvent(new CustomEvent("move",{bubbles:!0,composed:!0,detail:{indexes:[this.index],position:"after"}}))}};be=t})()})();