@pictogrammers/components 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/pg/app/app.css +2 -1
- package/pg/inputPixelEditor/inputPixelEditor.ts +41 -21
- package/pg/markdown/markdown.css +5 -1
- package/pg/tree/index.ts +5 -3
- package/pg/treeItem/treeItem.css +9 -2
- package/pgApp.js +1 -1
- package/pgInputPixelEditor.js +1 -1
- package/pgMarkdown.js +1 -1
- package/pgMenuItemIcon.js +1 -1
- package/pgTree.js +1 -1
- package/pgTreeItem.js +1 -1
package/pgMenuItemIcon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{"use strict";var e={209: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=%27M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z%27 fill=%27rgb%2869, 60, 79, 0.5%29%27 /></svg>"},217:(e,t,n)=>{n.d(t,{A:()=>l});var r=n(601),i=n.n(r),a=n(314),o=n.n(a)()(i());o.push([e.id,':host {\n display: contents;\n}\n\n[part="overlay"] {\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n overflow: visible;\n --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);\n top: calc(anchor(top) - 0.25rem);\n left: calc(anchor(right) - 0.25rem);\n min-width: 10rem;\n translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);\n position-try-fallbacks: --custom-right, --custom-left;\n}\n\n@position-try --custom-right {\n top: calc(anchor(top) - 0.25rem);\n left: calc(anchor(right) - 0.25rem);\n}\n\n@position-try --custom-left {\n top: calc(anchor(top) - 0.25rem);\n left: calc(anchor(left) - anchor-size(width) + 0.25rem);\n}\n',""]);var s=new CSSStyleSheet;s.replaceSync(o.toString());const l=s},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,i,a){"string"==typeof e&&(e=[[null,e,void 0]]);var o={};if(r)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(o[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);r&&o[d[0]]||(void 0!==a&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),i&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=i):d[4]="".concat(i)),t.push(d))}},t}},383: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.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z%27 fill=%27rgb%2869, 60, 79, 0.5%29%27 /></svg>"},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}},544: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=%27M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z%27 fill=%27rgb%2869, 60, 79%29%27 /></svg>"},570: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=%27M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z%27 fill=%27white%27 /></svg>"},601:e=>{e.exports=function(e){return e[1]}},662: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.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z%27 fill=%27rgb%2869, 60, 79%29%27 /></svg>"},708: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.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z%27 fill=%27white%27 /></svg>"},993:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(601),i=n.n(r),a=n(314),o=n.n(a),s=n(417),l=n.n(s),c=new URL(n(662),n.b),d=new URL(n(708),n.b),u=new URL(n(383),n.b),h=new URL(n(544),n.b),p=new URL(n(570),n.b),m=new URL(n(209),n.b),f=o()(i()),v=l()(c),b=l()(d),g=l()(u),y=l()(h),w=l()(p),x=l()(m);f.push([e.id,`:host {\n display: contents;\n}\n\n[part=button] {\n outline: none;\n display: flex;\n align-items: center;\n font-family: var(--pg-font-family);\n text-align: var(--pg-menu-item-text-align, left);\n background: var(--pg-menu-item-background, transparent);\n padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 0.5rem);\n border-color: transparent;\n border-width: 0;\n border-style: solid;\n border-top-left-radius: var(--pg-menu-item-border-radius-top, 0.25rem);\n border-top-right-radius: var(--pg-menu-item-border-radius-top, 0.25rem);\n border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);\n border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);\n color: var(--pg-menu-item-color, #453C4F);\n}\n\n[part=button]:not(:disabled):active,\n[part=button]:not(:disabled):hover {\n background: var(--pg-menu-item-selected-background, #453C4F);\n color: #FFFFFF;\n --pg-icon-color: #FFFFFF;\n}\n\n[part=button]:not(:disabled):active {\n background: var(--pg-menu-item-active-background, #5f516e);\n}\n\n[part=button]:disabled {\n color: var(--pg-menu-item-disabled-color, rgb(69, 60, 79, 0.75));\n --pg-icon-color: var(--pg-menu-item-disabled-color, rgb(69, 60, 79, 0.75));\n}\n\n@container style(--pg-menu-_has-check: true) {\n [part=button] {\n padding-inline-start: 1.5rem;\n }\n\n [part=button].checked::before {\n position: absolute;\n translate: -1.5rem 0;\n content: var(--pg-menu-item-check, url(${v}));\n width: 1.5rem;\n height: 1.5rem;\n }\n\n [part=button].checked:active::before,\n [part=button].checked:hover::before {\n content: var(--pg-menu-item-hover-check, url(${b}));\n }\n\n [part=button].checked:disabled::before {\n content: var(--pg-menu-item-disabled-check, url(${g}));\n }\n}\n\n[part=button]:focus-visible {\n position: relative;\n}\n\n[part=button]:focus-visible::after {\n pointer-events: none;\n content: '';\n position: absolute;\n top: -1px;\n right: -1px;\n bottom: -1px;\n left: -1px;\n border-radius: 0.25rem;\n box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));\n}\n\n[part=button]:focus-visible:not(:hover)::after {\n background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));\n}\n\n[part=icon] {\n margin-inline-end: 0.5rem;\n}\n\n[part=button].more [part=label]::after {\n content: var(--pg-menu-item-check, url(${y}));\n width: 1.5rem;\n height: 1.5rem;\n vertical-align: middle;\n translate: 0.25rem 0;\n}\n\n[part=button].more:active [part=label]::after,\n[part=button].more:hover [part=label]::after {\n content: var(--pg-menu-item-hover-check, url(${w}));\n}\n\n[part=button].more:disabled [part=label]::after {\n content: var(--pg-menu-item-disabled-check, url(${x}));\n}\n\n[part=label] {\n display: flex;\n align-items: center;\n}\n`,""]);var k=new CSSStyleSheet;k.replaceSync(f.toString());const S=k}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var a=t[r]={id:r,exports:{}};return e[r](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 r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.b="undefined"!=typeof document&&document.baseURI||self.location.href;const r=Symbol("addObserver"),i=Symbol("removeObserver"),a=Symbol("getObservers"),o=Symbol("isProxy"),s=Symbol("getTarget"),l=["fill","pop","push","reverse","shift","sort","splice","unshift"],c=new Map;function d(e){return new Proxy(e,{get(t,n){if("symbol"==typeof n){switch(n){case o:return!0;case s:return t;case a:return c.has(e);case r:return(t,n)=>{c.has(e)?c.get(e).has(t)?c.get(e).get(t).push(n):c.get(e).set(t,[n]):c.set(e,new Map([[t,[n]]]))};case i:return t=>{c.has(e)&&(c.get(e).delete(t),0===c.get(e).size&&c.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]?d(t[n]):t[n];if("copyWithin"===n)throw new Error("Unsupported array method copyWithin");if(l.includes(n))return c.has(t)?function(){const e=Array.prototype[n].apply(t,arguments);return c.get(t).forEach(((e,r)=>{e.forEach((e=>{e(t,n,arguments)}))})),e}:Reflect.get(t,n);if(t[n]instanceof Array)return d(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(c.has(e)){c.get(e).forEach(((e,r)=>{e.forEach((e=>{e(t,n)}))}))}return Reflect.set(e,t,n)}})}window.observers=c;class PropError extends Error{constructor(e,t){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,t)}}Symbol("index");const u=Symbol("init"),h=Symbol("template"),p=Symbol("style"),m=Symbol("parent");function f(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function v(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function b(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var r,i;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[m]||t.prototype[m][t.prototype[m].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[m]=[t.prototype],t.prototype[p]=e.style?[e.style]:[],t.prototype[h]=e.template||""):(t.prototype[m].push(t.prototype),t.prototype[p].push(e.style),t.prototype[h]=(r=t.prototype[h],(i=e.template||null)&&i.match(/<parent\/>/)?i.replace(/<parent\/>/,r):`${r}${i||""}`));const a=t.prototype.connectedCallback||(()=>{}),o=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[u]||void 0!==e.template||void 0!==e.style)if(this[u]){if(this[u]&&e.style);else if(this[u]&&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[h]||"";const n=document.importNode(e.content,!0),r=this.attachShadow({mode:"open"});r.adoptedStyleSheets=t.prototype[p].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),r.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 r=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),i=()=>{this[m].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[v(t)]=!0,e)),{}):{})}))};0===r.length?(this[u]=!0,a.call(this),i()):Promise.all(r).then((()=>{this[u]=!0,a.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));i()}))},t.prototype.disconnectedCallback=function(){o.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[v(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 g(e){return!!e&&e.constructor===Array}function y(e,t){e[u]&&e[m].map((n=>{n.render&&n.render.call(e,{[t]:!0})}))}function w(e){return null===e?"null":g(e)?"array":typeof e}function x(e){return function(t,n){const r=n.name,i=Symbol(r),l=Symbol(`${r}:type`),c=Symbol(`${r}:meta`);return n.addInitializer((function(){Reflect.defineProperty(this,r,{get:()=>"object"===this[l]||"array"===this[l]?this[i][o]?this[i]:d(this[i]):this[i],set:t=>{const n=w(e?e(t):t);if("index"!==r&&this[l]!==n&&"null"!==this[l]&&"null"!==n)throw new Error(`@Prop() ${r} with type '${this[l]}' cannot be set to ${n}.`);if("array"===this[l]){if(!g(t))throw new PropError(`Array "${r}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,r)?.set);if(this[i]===t)throw new Error("Setting an array to itself is not allowed.");const e=d(this[i]);if(e[a]){const n=t[o]?(c=t)[o]&&c[s]:t;e.splice(0,this[i].length,...n)}else this[i]=t}else this[i]=e?e(t):t,y(this,r);var c}})})),function(t){if(void 0===t&&"index"!==r)throw new Error(`@Prop() ${r} must have an initial value defined.`);if(void 0!==t&&"index"===r)throw new Error("@Prop() index must not have an initial value defined.");if(!0===t)throw new Error(`@Prop() ${r} boolean must initialize to false.`);if(!n.private){const{constructor:e}=this;e.observedAttributes??=[],e.symbols||(e.symbols={});const{symbols:t}=e,n=f(r);t[r]||(e.observedAttributes.push(n),t[r]=i)}return this[l]=w(t),"array"===this[l]?(this[i]=t,new Proxy(t,{get:(e,t)=>t===S?this[c]:(console.log("errr???"),Reflect.get(this[i],t)),set:(e,t,n)=>{if(t===S)return this[c]=n,!0;const a=Reflect.set(e,t,n);return"length"===t&&this[i].length===n||y(this,r),this[i]=n,a}})):(this[i]=e?e(this.getAttribute(r)??t):this.getAttribute(r)??t,this[i])}}}function k(){return function(e,t){const n=t.name,r=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${r}]`))}})}))}}Symbol("hasProxy");const S=Symbol("meta");var E=function(e,t,n,r,i,a){function o(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?r.static?e:e.prototype:null,u=t||(d?Object.getOwnPropertyDescriptor(d,r.name):{}),h=!1,p=n.length-1;p>=0;p--){var m={};for(var f in r)m[f]="access"===f?{}:r[f];for(var f in r.access)m.access[f]=r.access[f];m.addInitializer=function(e){if(h)throw new TypeError("Cannot add initializers after decoration has completed");a.push(o(e||null))};var v=(0,n[p])("accessor"===l?{get:u.get,set:u.set}:u[c],m);if("accessor"===l){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=o(v.get))&&(u.get=s),(s=o(v.set))&&(u.set=s),(s=o(v.init))&&i.unshift(s)}else(s=o(v))&&("field"===l?i.unshift(s):u[c]=s)}d&&Object.defineProperty(d,r.name,u),h=!0},$=function(e,t,n){for(var r=arguments.length>2,i=0;i<t.length;i++)n=r?t[i].call(e,n):t[i].call(e);return r?n:void 0};const L=new Set,C=new Map;const P=(()=>{let e,t,n=[b()],r=[],i=HTMLElement;(class extends i{static{t=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;E(null,e={value:t},n,{kind:"class",name:t.name,metadata:a},null,r),t=e.value,a&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),$(t,r)}static open(e={}){var t=document.createElement(this.name);return Object.assign(t,e),document.body.appendChild(t),L.add(t),new Promise((e=>{C.set(t,e)}))}close(e){this.remove(),L.delete(this);const t=C.get(this);t&&t(e),C.delete(this)}});return t})();var O=n(217),A=function(e,t,n,r,i,a){function o(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?r.static?e:e.prototype:null,u=t||(d?Object.getOwnPropertyDescriptor(d,r.name):{}),h=!1,p=n.length-1;p>=0;p--){var m={};for(var f in r)m[f]="access"===f?{}:r[f];for(var f in r.access)m.access[f]=r.access[f];m.addInitializer=function(e){if(h)throw new TypeError("Cannot add initializers after decoration has completed");a.push(o(e||null))};var v=(0,n[p])("accessor"===l?{get:u.get,set:u.set}:u[c],m);if("accessor"===l){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=o(v.get))&&(u.get=s),(s=o(v.set))&&(u.set=s),(s=o(v.init))&&i.unshift(s)}else(s=o(v))&&("field"===l?i.unshift(s):u[c]=s)}d&&Object.defineProperty(d,r.name,u),h=!0},j=function(e,t,n){for(var r=arguments.length>2,i=0;i<t.length;i++)n=r?t[i].call(e,n):t[i].call(e);return r?n:void 0};const R=[],F=[];const M=(()=>{let e,t,n,r,i,a,o,s,l,c,d=[b({selector:"pg-overlay-sub-menu",template:'<div part="overlay"> <pg-menu part="menu"></pg-menu> </div>',style:O.A})],u=[],h=P,p=[],m=[],f=[],v=[],g=[],y=[],w=[],S=[],E=[],$=[],L=[],C=[],M=[],T=[],z=[],D=[];(class extends h{static{t=this}static{const b="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;n=[k()],r=[k()],i=[x()],a=[x()],o=[x()],s=[x()],l=[x()],c=[x()],A(null,null,n,{kind:"field",name:"$overlay",static:!1,private:!1,access:{has:e=>"$overlay"in e,get:e=>e.$overlay,set:(e,t)=>{e.$overlay=t}},metadata:b},p,m),A(null,null,r,{kind:"field",name:"$menu",static:!1,private:!1,access:{has:e=>"$menu"in e,get:e=>e.$menu,set:(e,t)=>{e.$menu=t}},metadata:b},f,v),A(null,null,i,{kind:"field",name:"source",static:!1,private:!1,access:{has:e=>"source"in e,get:e=>e.source,set:(e,t)=>{e.source=t}},metadata:b},g,y),A(null,null,a,{kind:"field",name:"x",static:!1,private:!1,access:{has:e=>"x"in e,get:e=>e.x,set:(e,t)=>{e.x=t}},metadata:b},w,S),A(null,null,o,{kind:"field",name:"y",static:!1,private:!1,access:{has:e=>"y"in e,get:e=>e.y,set:(e,t)=>{e.y=t}},metadata:b},E,$),A(null,null,s,{kind:"field",name:"default",static:!1,private:!1,access:{has:e=>"default"in e,get:e=>e.default,set:(e,t)=>{e.default=t}},metadata:b},L,C),A(null,null,l,{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:b},M,T),A(null,null,c,{kind:"field",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:b},z,D),A(null,e={value:t},d,{kind:"class",name:t.name,metadata:b},null,u),t=e.value,b&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:b}),j(t,u)}$overlay=j(this,p,void 0);$menu=(j(this,m),j(this,f,void 0));source=(j(this,v),j(this,g,null));x=(j(this,y),j(this,w,0));y=(j(this,S),j(this,E,0));default=(j(this,$),j(this,L,null));items=(j(this,C),j(this,M,[]));value=(j(this,T),j(this,z,null));render(e){e.items&&(this.$menu.items=this.items)}connectedCallback(){R.pop()?.close(),R.push(this),F.push(this),this.$menu.addEventListener("select",this.#e.bind(this)),this.$menu.addEventListener("close",this.#t.bind(this)),this.$overlay.popover="auto",null!==this.source&&this.$overlay.showPopover({source:this.source}),this.$overlay.addEventListener("toggle",this.#n.bind(this));this.source?.getBoundingClientRect();this.$overlay.style.setProperty("--pg-overlay-menu-_x","0px"),this.$overlay.style.setProperty("--pg-overlay-menu-_y","0px"),this.$menu.focus(0),this.#r=this.#i.bind(this),document.addEventListener("pointerdown",this.#r)}#a=(j(this,D),!1);#r;#i(e){this.#a=e.composedPath().includes(this.source)}#n(e){"closed"===e.newState&&0===F.length&&this.#a&&(console.log(e),this.source?.focus())}disconnectedCallback(){F.pop(),document.removeEventListener("pointerdown",this.#r)}#t(e){const{depth:t}=e.detail;console.log("close",t),1===t?this.close(null):this.close()}#e(e){e.detail.item.index=e.detail.index,this.close(e.detail.item),this.source?.focus()}});return t})();var T=n(993),z=function(e,t,n,r,i,a){function o(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?r.static?e:e.prototype:null,u=t||(d?Object.getOwnPropertyDescriptor(d,r.name):{}),h=!1,p=n.length-1;p>=0;p--){var m={};for(var f in r)m[f]="access"===f?{}:r[f];for(var f in r.access)m.access[f]=r.access[f];m.addInitializer=function(e){if(h)throw new TypeError("Cannot add initializers after decoration has completed");a.push(o(e||null))};var v=(0,n[p])("accessor"===l?{get:u.get,set:u.set}:u[c],m);if("accessor"===l){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=o(v.get))&&(u.get=s),(s=o(v.set))&&(u.set=s),(s=o(v.init))&&i.unshift(s)}else(s=o(v))&&("field"===l?i.unshift(s):u[c]=s)}d&&Object.defineProperty(d,r.name,u),h=!0},D=function(e,t,n){for(var r=arguments.length>2,i=0;i<t.length;i++)n=r?t[i].call(e,n):t[i].call(e);return r?n:void 0};(()=>{let e,t,n,r,i,a,o,s,l,c,d,u=[b({selector:"pg-menu-item-icon",style:T.A,template:'<button part="button"> <pg-icon part="icon"></pg-icon> <span part="label"></span> </button>'})],h=[],p=HTMLElement,m=[],f=[],v=[],g=[],y=[],w=[],S=[],E=[],$=[],L=[],C=[],P=[],O=[],A=[],j=[],R=[],F=[],U=[];(class extends p{static{t=this}static{const b="function"==typeof Symbol&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;n=[x()],r=[x()],i=[x()],a=[x()],o=[x()],s=[x()],l=[k()],c=[k()],d=[k()],z(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:b},m,f),z(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:b},v,g),z(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:b},y,w),z(null,null,a,{kind:"field",name:"checked",static:!1,private:!1,access:{has:e=>"checked"in e,get:e=>e.checked,set:(e,t)=>{e.checked=t}},metadata:b},S,E),z(null,null,o,{kind:"field",name:"disabled",static:!1,private:!1,access:{has:e=>"disabled"in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:b},$,L),z(null,null,s,{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:b},C,P),z(null,null,l,{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:b},O,A),z(null,null,c,{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:b},j,R),z(null,null,d,{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:b},F,U),z(null,e={value:t},u,{kind:"class",name:t.name,metadata:b},null,h),t=e.value,b&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:b})}static delegatesFocus=!0;index=D(this,m,void 0);icon=(D(this,f),D(this,v,"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"));label=(D(this,g),D(this,y,""));checked=(D(this,w),D(this,S,!1));disabled=(D(this,E),D(this,$,!1));items=(D(this,L),D(this,C,[]));$icon=(D(this,P),D(this,O,void 0));$button=(D(this,A),D(this,j,void 0));$label=(D(this,R),D(this,F,void 0));render(e){e.icon&&(this.$icon.path=this.icon),e.label&&(this.$label.textContent=this.label),e.disabled&&(this.$button.disabled=this.disabled),e.checked&&this.$button.classList.toggle("checked",this.checked),e.items&&this.$button.classList.toggle("more",this.items.length>0),e.checked&&!0===this.checked&&this.dispatchEvent(new CustomEvent("hasCheck",{bubbles:!0}))}connectedCallback(){this.$button.addEventListener("click",(async()=>{if(this.items.length>0){const e=await M.open({source:this.$button,x:0,y:0,value:this.items[0],items:this.items});null===e?this.focus():e?this.dispatchEvent(new CustomEvent("select",{detail:{item:e}})):this.dispatchEvent(new CustomEvent("close",{detail:{depth:-1}}))}else this.dispatchEvent(new CustomEvent("select",{detail:{index:this.index,item:this.items[this.index]}}))})),this.$button.addEventListener("keydown",(async e=>{switch(e.key){case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{detail:{index:this.index}})),e.preventDefault();break;case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{detail:{index:this.index}})),e.preventDefault();break;case"ArrowLeft":this.dispatchEvent(new CustomEvent("close",{detail:{depth:1}})),e.preventDefault();break;case"ArrowRight":if(this.items.length>0){const e=await M.open({source:this.$button,x:0,y:0,value:this.items[0],items:this.items});null===e?this.focus():e?this.dispatchEvent(new CustomEvent("select",{detail:{item:e}})):this.dispatchEvent(new CustomEvent("close",{detail:{depth:-1}}))}e.preventDefault();break;case"Escape":this.dispatchEvent(new CustomEvent("close",{detail:{depth:-1}})),e.preventDefault()}}))}focus(){this.$button.focus()}getHeight(){return this.$label.getBoundingClientRect().height}constructor(){super(...arguments),D(this,U)}static{D(t,h)}})})()})();
|
|
1
|
+
(()=>{"use strict";var e={209: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=%27M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z%27 fill=%27rgb%2869, 60, 79, 0.5%29%27 /></svg>"},217:(e,t,n)=>{n.d(t,{A:()=>l});var r=n(601),i=n.n(r),a=n(314),o=n.n(a)()(i());o.push([e.id,':host {\n display: contents;\n}\n\n[part="overlay"] {\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n overflow: visible;\n --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);\n top: calc(anchor(top) - 0.25rem);\n left: calc(anchor(right) - 0.25rem);\n min-width: 10rem;\n translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);\n position-try-fallbacks: --custom-right, --custom-left;\n}\n\n@position-try --custom-right {\n top: calc(anchor(top) - 0.25rem);\n left: calc(anchor(right) - 0.25rem);\n}\n\n@position-try --custom-left {\n top: calc(anchor(top) - 0.25rem);\n left: calc(anchor(left) - anchor-size(width) + 0.25rem);\n}\n',""]);var s=new CSSStyleSheet;s.replaceSync(o.toString());const l=s},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,i,a){"string"==typeof e&&(e=[[null,e,void 0]]);var o={};if(r)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(o[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);r&&o[d[0]]||(void 0!==a&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),i&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=i):d[4]="".concat(i)),t.push(d))}},t}},374:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(601),i=n.n(r),a=n(314),o=n.n(a),s=n(417),l=n.n(s),c=new URL(n(662),n.b),d=new URL(n(708),n.b),u=new URL(n(383),n.b),h=new URL(n(544),n.b),p=new URL(n(570),n.b),m=new URL(n(209),n.b),f=o()(i()),v=l()(c),b=l()(d),g=l()(u),y=l()(h),w=l()(p),x=l()(m);f.push([e.id,`:host {\n display: contents;\n}\n\n[part=button] {\n outline: none;\n display: flex;\n align-items: center;\n font-family: var(--pg-font-family);\n text-align: var(--pg-menu-item-text-align, left);\n background: var(--pg-menu-item-background, transparent);\n padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 0.5rem);\n border-color: transparent;\n border-width: 0;\n border-style: solid;\n border-top-left-radius: var(--pg-menu-item-border-radius-top, 0.25rem);\n border-top-right-radius: var(--pg-menu-item-border-radius-top, 0.25rem);\n border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);\n border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);\n color: var(--pg-menu-item-color, #453C4F);\n}\n\n[part=button]:not(:disabled):active,\n[part=button]:not(:disabled):hover {\n background: var(--pg-menu-item-selected-background, #453C4F);\n color: #FFFFFF;\n --pg-icon-color: #FFFFFF;\n}\n\n[part=button]:not(:disabled):active {\n background: var(--pg-menu-item-active-background, #5f516e);\n}\n\n[part=button]:disabled {\n color: var(--pg-menu-item-disabled-color, rgb(69, 60, 79, 0.75));\n --pg-icon-color: var(--pg-menu-item-disabled-color, rgb(69, 60, 79, 0.75));\n}\n\n@container style(--pg-menu-_has-check: true) {\n [part=button] {\n padding-inline-start: 1.5rem;\n }\n\n [part=button].checked::before {\n position: absolute;\n translate: -1.5rem 0;\n content: var(--pg-menu-item-check, url(${v}));\n width: 1.5rem;\n height: 1.5rem;\n }\n\n [part=button].checked:active::before,\n [part=button].checked:hover::before {\n content: var(--pg-menu-item-hover-check, url(${b}));\n }\n\n [part=button].checked:disabled::before {\n content: var(--pg-menu-item-disabled-check, url(${g}));\n }\n}\n\n[part=button]:focus-visible {\n position: relative;\n}\n\n[part=button]:focus-visible::after {\n pointer-events: none;\n content: '';\n position: absolute;\n top: -1px;\n right: -1px;\n bottom: -1px;\n left: -1px;\n border-radius: 0.25rem;\n box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));\n}\n\n[part=button]:focus-visible:not(:hover)::after {\n background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));\n}\n\n[part=icon] {\n margin-inline-end: 0.5rem;\n}\n\n[part=button].more [part=label]::after {\n content: var(--pg-menu-item-check, url(${y}));\n width: 1.5rem;\n height: 1.5rem;\n vertical-align: middle;\n translate: 0.25rem 0;\n}\n\n[part=button].more:active [part=label]::after,\n[part=button].more:hover [part=label]::after {\n content: var(--pg-menu-item-hover-check, url(${w}));\n}\n\n[part=button].more:disabled [part=label]::after {\n content: var(--pg-menu-item-disabled-check, url(${x}));\n}\n\n[part=label] {\n display: flex;\n align-items: center;\n}\n`,""]);var k=new CSSStyleSheet;k.replaceSync(f.toString());const S=k},383: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.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z%27 fill=%27rgb%2869, 60, 79, 0.5%29%27 /></svg>"},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}},544: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=%27M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z%27 fill=%27rgb%2869, 60, 79%29%27 /></svg>"},570: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=%27M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z%27 fill=%27white%27 /></svg>"},601:e=>{e.exports=function(e){return e[1]}},662: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.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z%27 fill=%27rgb%2869, 60, 79%29%27 /></svg>"},708: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.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z%27 fill=%27white%27 /></svg>"}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var a=t[r]={id:r,exports:{}};return e[r](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 r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.b="undefined"!=typeof document&&document.baseURI||self.location.href;const r=Symbol("addObserver"),i=Symbol("removeObserver"),a=Symbol("getObservers"),o=Symbol("isProxy"),s=Symbol("getTarget"),l=["fill","pop","push","reverse","shift","sort","splice","unshift"],c=new Map;function d(e){return new Proxy(e,{get(t,n){if("symbol"==typeof n){switch(n){case o:return!0;case s:return t;case a:return c.has(e);case r:return(t,n)=>{c.has(e)?c.get(e).has(t)?c.get(e).get(t).push(n):c.get(e).set(t,[n]):c.set(e,new Map([[t,[n]]]))};case i:return t=>{c.has(e)&&(c.get(e).delete(t),0===c.get(e).size&&c.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]?d(t[n]):t[n];if("copyWithin"===n)throw new Error("Unsupported array method copyWithin");if(l.includes(n))return c.has(t)?function(){const e=Array.prototype[n].apply(t,arguments);return c.get(t).forEach(((e,r)=>{e.forEach((e=>{e(t,n,arguments)}))})),e}:Reflect.get(t,n);if(t[n]instanceof Array)return d(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(c.has(e)){c.get(e).forEach(((e,r)=>{e.forEach((e=>{e(t,n)}))}))}return Reflect.set(e,t,n)}})}window.observers=c;class PropError extends Error{constructor(e,t){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,t)}}Symbol("index");const u=Symbol("init"),h=Symbol("template"),p=Symbol("style"),m=Symbol("parent");function f(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function v(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function b(e={}){return function(t,n){if("class"!==n.kind)throw new Error("@Component() can only decorate a class");var r,i;Reflect.defineProperty(t,"name",{value:e.selector,writable:!1,configurable:!1}),!t.prototype[m]||t.prototype[m][t.prototype[m].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[m]=[t.prototype],t.prototype[p]=e.style?[e.style]:[],t.prototype[h]=e.template||""):(t.prototype[m].push(t.prototype),t.prototype[p].push(e.style),t.prototype[h]=(r=t.prototype[h],(i=e.template||null)&&i.match(/<parent\/>/)?i.replace(/<parent\/>/,r):`${r}${i||""}`));const a=t.prototype.connectedCallback||(()=>{}),o=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[u]||void 0!==e.template||void 0!==e.style)if(this[u]){if(this[u]&&e.style);else if(this[u]&&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[h]||"";const n=document.importNode(e.content,!0),r=this.attachShadow({mode:"open"});r.adoptedStyleSheets=t.prototype[p].map((e=>{if(e instanceof CSSStyleSheet)return e;var t=new CSSStyleSheet;return t.replaceSync(e.toString()),t})),r.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 r=Array.from(n.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),i=()=>{this[m].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[v(t)]=!0,e)),{}):{})}))};0===r.length?(this[u]=!0,a.call(this),i()):Promise.all(r).then((()=>{this[u]=!0,a.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));i()}))},t.prototype.disconnectedCallback=function(){o.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[v(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 g(e){return!!e&&e.constructor===Array}function y(e,t){e[u]&&e[m].map((n=>{n.render&&n.render.call(e,{[t]:!0})}))}function w(e){return null===e?"null":g(e)?"array":typeof e}function x(e){return function(t,n){const r=n.name,i=Symbol(r),l=Symbol(`${r}:type`),c=Symbol(`${r}:meta`);return n.addInitializer((function(){Reflect.defineProperty(this,r,{get:()=>"object"===this[l]||"array"===this[l]?this[i][o]?this[i]:d(this[i]):this[i],set:t=>{const n=w(e?e(t):t);if("index"!==r&&this[l]!==n&&"null"!==this[l]&&"null"!==n)throw new Error(`@Prop() ${r} with type '${this[l]}' cannot be set to ${n}.`);if("array"===this[l]){if(!g(t))throw new PropError(`Array "${r}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,r)?.set);if(this[i]===t)throw new Error("Setting an array to itself is not allowed.");const e=d(this[i]);if(e[a]){const n=t[o]?(c=t)[o]&&c[s]:t;e.splice(0,this[i].length,...n)}else this[i]=t}else this[i]=e?e(t):t,y(this,r);var c}})})),function(t){if(void 0===t&&"index"!==r)throw new Error(`@Prop() ${r} must have an initial value defined.`);if(void 0!==t&&"index"===r)throw new Error("@Prop() index must not have an initial value defined.");if(!0===t)throw new Error(`@Prop() ${r} boolean must initialize to false.`);if(!n.private){const{constructor:e}=this;e.observedAttributes??=[],e.symbols||(e.symbols={});const{symbols:t}=e,n=f(r);t[r]||(e.observedAttributes.push(n),t[r]=i)}return this[l]=w(t),"array"===this[l]?(this[i]=t,new Proxy(t,{get:(e,t)=>t===S?this[c]:(console.log("errr???"),Reflect.get(this[i],t)),set:(e,t,n)=>{if(t===S)return this[c]=n,!0;const a=Reflect.set(e,t,n);return"length"===t&&this[i].length===n||y(this,r),this[i]=n,a}})):(this[i]=e?e(this.getAttribute(r)??t):this.getAttribute(r)??t,this[i])}}}function k(){return function(e,t){const n=t.name,r=n.replace(/^\$/,"");t.addInitializer((function(){let e=null;Reflect.defineProperty(this,n,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${r}]`))}})}))}}Symbol("hasProxy");const S=Symbol("meta");var E=function(e,t,n,r,i,a){function o(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?r.static?e:e.prototype:null,u=t||(d?Object.getOwnPropertyDescriptor(d,r.name):{}),h=!1,p=n.length-1;p>=0;p--){var m={};for(var f in r)m[f]="access"===f?{}:r[f];for(var f in r.access)m.access[f]=r.access[f];m.addInitializer=function(e){if(h)throw new TypeError("Cannot add initializers after decoration has completed");a.push(o(e||null))};var v=(0,n[p])("accessor"===l?{get:u.get,set:u.set}:u[c],m);if("accessor"===l){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=o(v.get))&&(u.get=s),(s=o(v.set))&&(u.set=s),(s=o(v.init))&&i.unshift(s)}else(s=o(v))&&("field"===l?i.unshift(s):u[c]=s)}d&&Object.defineProperty(d,r.name,u),h=!0},$=function(e,t,n){for(var r=arguments.length>2,i=0;i<t.length;i++)n=r?t[i].call(e,n):t[i].call(e);return r?n:void 0};const L=new Set,C=new Map;const P=(()=>{let e,t,n=[b()],r=[],i=HTMLElement;(class extends i{static{t=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;E(null,e={value:t},n,{kind:"class",name:t.name,metadata:a},null,r),t=e.value,a&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),$(t,r)}static open(e={}){var t=document.createElement(this.name);return Object.assign(t,e),document.body.appendChild(t),L.add(t),new Promise((e=>{C.set(t,e)}))}close(e){this.remove(),L.delete(this);const t=C.get(this);t&&t(e),C.delete(this)}});return t})();var O=n(217),A=function(e,t,n,r,i,a){function o(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?r.static?e:e.prototype:null,u=t||(d?Object.getOwnPropertyDescriptor(d,r.name):{}),h=!1,p=n.length-1;p>=0;p--){var m={};for(var f in r)m[f]="access"===f?{}:r[f];for(var f in r.access)m.access[f]=r.access[f];m.addInitializer=function(e){if(h)throw new TypeError("Cannot add initializers after decoration has completed");a.push(o(e||null))};var v=(0,n[p])("accessor"===l?{get:u.get,set:u.set}:u[c],m);if("accessor"===l){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=o(v.get))&&(u.get=s),(s=o(v.set))&&(u.set=s),(s=o(v.init))&&i.unshift(s)}else(s=o(v))&&("field"===l?i.unshift(s):u[c]=s)}d&&Object.defineProperty(d,r.name,u),h=!0},j=function(e,t,n){for(var r=arguments.length>2,i=0;i<t.length;i++)n=r?t[i].call(e,n):t[i].call(e);return r?n:void 0};const R=[],F=[];const M=(()=>{let e,t,n,r,i,a,o,s,l,c,d=[b({selector:"pg-overlay-sub-menu",template:'<div part="overlay"> <pg-menu part="menu"></pg-menu> </div>',style:O.A})],u=[],h=P,p=[],m=[],f=[],v=[],g=[],y=[],w=[],S=[],E=[],$=[],L=[],C=[],M=[],T=[],z=[],D=[];(class extends h{static{t=this}static{const b="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;n=[k()],r=[k()],i=[x()],a=[x()],o=[x()],s=[x()],l=[x()],c=[x()],A(null,null,n,{kind:"field",name:"$overlay",static:!1,private:!1,access:{has:e=>"$overlay"in e,get:e=>e.$overlay,set:(e,t)=>{e.$overlay=t}},metadata:b},p,m),A(null,null,r,{kind:"field",name:"$menu",static:!1,private:!1,access:{has:e=>"$menu"in e,get:e=>e.$menu,set:(e,t)=>{e.$menu=t}},metadata:b},f,v),A(null,null,i,{kind:"field",name:"source",static:!1,private:!1,access:{has:e=>"source"in e,get:e=>e.source,set:(e,t)=>{e.source=t}},metadata:b},g,y),A(null,null,a,{kind:"field",name:"x",static:!1,private:!1,access:{has:e=>"x"in e,get:e=>e.x,set:(e,t)=>{e.x=t}},metadata:b},w,S),A(null,null,o,{kind:"field",name:"y",static:!1,private:!1,access:{has:e=>"y"in e,get:e=>e.y,set:(e,t)=>{e.y=t}},metadata:b},E,$),A(null,null,s,{kind:"field",name:"default",static:!1,private:!1,access:{has:e=>"default"in e,get:e=>e.default,set:(e,t)=>{e.default=t}},metadata:b},L,C),A(null,null,l,{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:b},M,T),A(null,null,c,{kind:"field",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:b},z,D),A(null,e={value:t},d,{kind:"class",name:t.name,metadata:b},null,u),t=e.value,b&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:b}),j(t,u)}$overlay=j(this,p,void 0);$menu=(j(this,m),j(this,f,void 0));source=(j(this,v),j(this,g,null));x=(j(this,y),j(this,w,0));y=(j(this,S),j(this,E,0));default=(j(this,$),j(this,L,null));items=(j(this,C),j(this,M,[]));value=(j(this,T),j(this,z,null));render(e){e.items&&(this.$menu.items=this.items)}connectedCallback(){R.pop()?.close(),R.push(this),F.push(this),this.$menu.addEventListener("select",this.#e.bind(this)),this.$menu.addEventListener("close",this.#t.bind(this)),this.$overlay.popover="auto",null!==this.source&&this.$overlay.showPopover({source:this.source}),this.$overlay.addEventListener("toggle",this.#n.bind(this));this.source?.getBoundingClientRect();this.$overlay.style.setProperty("--pg-overlay-menu-_x","0px"),this.$overlay.style.setProperty("--pg-overlay-menu-_y","0px"),this.$menu.focus(0),this.#r=this.#i.bind(this),document.addEventListener("pointerdown",this.#r)}#a=(j(this,D),!1);#r;#i(e){this.#a=e.composedPath().includes(this.source)}#n(e){"closed"===e.newState&&0===F.length&&this.#a&&(console.log(e),this.source?.focus())}disconnectedCallback(){F.pop(),document.removeEventListener("pointerdown",this.#r)}#t(e){const{depth:t}=e.detail;console.log("close",t),1===t?this.close(null):this.close()}#e(e){e.detail.item.index=e.detail.index,this.close(e.detail.item),this.source?.focus()}});return t})();var T=n(374),z=function(e,t,n,r,i,a){function o(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",d=!t&&e?r.static?e:e.prototype:null,u=t||(d?Object.getOwnPropertyDescriptor(d,r.name):{}),h=!1,p=n.length-1;p>=0;p--){var m={};for(var f in r)m[f]="access"===f?{}:r[f];for(var f in r.access)m.access[f]=r.access[f];m.addInitializer=function(e){if(h)throw new TypeError("Cannot add initializers after decoration has completed");a.push(o(e||null))};var v=(0,n[p])("accessor"===l?{get:u.get,set:u.set}:u[c],m);if("accessor"===l){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=o(v.get))&&(u.get=s),(s=o(v.set))&&(u.set=s),(s=o(v.init))&&i.unshift(s)}else(s=o(v))&&("field"===l?i.unshift(s):u[c]=s)}d&&Object.defineProperty(d,r.name,u),h=!0},D=function(e,t,n){for(var r=arguments.length>2,i=0;i<t.length;i++)n=r?t[i].call(e,n):t[i].call(e);return r?n:void 0};(()=>{let e,t,n,r,i,a,o,s,l,c,d,u=[b({selector:"pg-menu-item-icon",style:T.A,template:'<button part="button"> <pg-icon part="icon"></pg-icon> <span part="label"></span> </button>'})],h=[],p=HTMLElement,m=[],f=[],v=[],g=[],y=[],w=[],S=[],E=[],$=[],L=[],C=[],P=[],O=[],A=[],j=[],R=[],F=[],U=[];(class extends p{static{t=this}static{const b="function"==typeof Symbol&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;n=[x()],r=[x()],i=[x()],a=[x()],o=[x()],s=[x()],l=[k()],c=[k()],d=[k()],z(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:b},m,f),z(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:b},v,g),z(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:b},y,w),z(null,null,a,{kind:"field",name:"checked",static:!1,private:!1,access:{has:e=>"checked"in e,get:e=>e.checked,set:(e,t)=>{e.checked=t}},metadata:b},S,E),z(null,null,o,{kind:"field",name:"disabled",static:!1,private:!1,access:{has:e=>"disabled"in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:b},$,L),z(null,null,s,{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:b},C,P),z(null,null,l,{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:b},O,A),z(null,null,c,{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:b},j,R),z(null,null,d,{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:b},F,U),z(null,e={value:t},u,{kind:"class",name:t.name,metadata:b},null,h),t=e.value,b&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:b})}static delegatesFocus=!0;index=D(this,m,void 0);icon=(D(this,f),D(this,v,"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"));label=(D(this,g),D(this,y,""));checked=(D(this,w),D(this,S,!1));disabled=(D(this,E),D(this,$,!1));items=(D(this,L),D(this,C,[]));$icon=(D(this,P),D(this,O,void 0));$button=(D(this,A),D(this,j,void 0));$label=(D(this,R),D(this,F,void 0));render(e){e.icon&&(this.$icon.path=this.icon),e.label&&(this.$label.textContent=this.label),e.disabled&&(this.$button.disabled=this.disabled),e.checked&&this.$button.classList.toggle("checked",this.checked),e.items&&this.$button.classList.toggle("more",this.items.length>0),e.checked&&!0===this.checked&&this.dispatchEvent(new CustomEvent("hasCheck",{bubbles:!0}))}connectedCallback(){this.$button.addEventListener("click",(async()=>{if(this.items.length>0){const e=await M.open({source:this.$button,x:0,y:0,value:this.items[0],items:this.items});null===e?this.focus():e?this.dispatchEvent(new CustomEvent("select",{detail:{item:e}})):this.dispatchEvent(new CustomEvent("close",{detail:{depth:-1}}))}else this.dispatchEvent(new CustomEvent("select",{detail:{index:this.index,item:this.items[this.index]}}))})),this.$button.addEventListener("keydown",(async e=>{switch(e.key){case"ArrowDown":this.dispatchEvent(new CustomEvent("down",{detail:{index:this.index}})),e.preventDefault();break;case"ArrowUp":this.dispatchEvent(new CustomEvent("up",{detail:{index:this.index}})),e.preventDefault();break;case"ArrowLeft":this.dispatchEvent(new CustomEvent("close",{detail:{depth:1}})),e.preventDefault();break;case"ArrowRight":if(this.items.length>0){const e=await M.open({source:this.$button,x:0,y:0,value:this.items[0],items:this.items});null===e?this.focus():e?this.dispatchEvent(new CustomEvent("select",{detail:{item:e}})):this.dispatchEvent(new CustomEvent("close",{detail:{depth:-1}}))}e.preventDefault();break;case"Escape":this.dispatchEvent(new CustomEvent("close",{detail:{depth:-1}})),e.preventDefault()}}))}focus(){this.$button.focus()}getHeight(){return this.$label.getBoundingClientRect().height}constructor(){super(...arguments),D(this,U)}static{D(t,h)}})})()})();
|
package/pgTree.js
CHANGED
|
@@ -1 +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}})})()})();
|
|
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\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
CHANGED
|
@@ -1 +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})()})();
|
|
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\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})()})();
|