@pictogrammers/components 0.4.8 → 0.5.0

package/pgTreeItem.js

@@ -1 +0,0 @@
-(()=>{"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),s=n(314),r=n.n(s),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()(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,s){"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!==s&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=s),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),s=n(314),r=n.n(s)()(a());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},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 s=t[i]={id:i,exports:{}};return e[i](s,s.exports,n),s.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"),s=Symbol("getObservers"),r=Symbol("swapObserver"),o=Symbol("isProxy"),d=Symbol("getTarget"),l=["fill","pop","push","reverse","shift","sort","splice","unshift"],c=new Map;function h(e){return new Proxy(e,{get(t,n){if("symbol"==typeof n){switch(n){case o:return!0;case d:return t;case s:return c.has(e);case r:return(t,n)=>{const i=c.get(e);i.forEach(((a,s)=>{if(s.getRootNode().host===t){const t=i.get(s);c.has(n)?c.get(n).has(s)?c.get(n).get(s).push(i.get(s)):c.get(n).set(s,i.get(s)):c.set(n,new Map([[s,t]])),c.delete(e),t.forEach((e=>{e(null,p.swap,[n])}))}}))};case i: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 a: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]?h(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,i)=>{e.forEach((e=>{e(t,n,arguments)}))})),e}:Reflect.get(t,n);if(t[n]instanceof Array)return h(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,i)=>{e.forEach((e=>{e(t,n)}))}))}return Reflect.set(e,t,n)}})}window.observers=c;const p={fill:"fill",pop:"pop",push:"push",reverse:"reverse",shift:"shift",sort:"sort",splice:"splice",unshift:"unshift",swap:"swap"};class PropError extends Error{constructor(e,t){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,t)}}Symbol("index");const m=Symbol("init"),g=Symbol("template"),u=Symbol("style"),b=Symbol("parent");function v(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function f(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function y(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[b]||t.prototype[b][t.prototype[b].length-1]instanceof Object.getPrototypeOf(t)?t.prototype instanceof HTMLElement&&(t.prototype[b]=[t.prototype],t.prototype[u]=e.style?[e.style]:[],t.prototype[g]=e.template||""):(t.prototype[b].push(t.prototype),t.prototype[u].push(e.style),t.prototype[g]=(i=t.prototype[g],(a=e.template||null)&&a.match(/<parent\/>/)?a.replace(/<parent\/>/,i):`${i}${a||""}`));const s=t.prototype.connectedCallback||(()=>{}),r=t.prototype.disconnectedCallback||(()=>{});t.prototype.connectedCallback=function(){if(this[m]||void 0!==e.template||void 0!==e.style)if(this[m]){if(this[m]&&e.style);else if(this[m]&&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[g]||"";const n=document.importNode(e.content,!0),i=this.attachShadow({mode:"open"});i.adoptedStyleSheets=t.prototype[u].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[b].map((e=>{e.render&&e.render.call(this,t.observedAttributes?t.observedAttributes.reduce(((e,t)=>(e[f(t)]=!0,e)),{}):{})}))};0===i.length?(this[m]=!0,s.call(this),a()):Promise.all(i).then((()=>{this[m]=!0,s.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));a()}))},t.prototype.disconnectedCallback=function(){r.call(this)},t.prototype.attributeChangedCallback=function(e,t,n){this[f(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 w(e){return!!e&&e.constructor===Array}function x(e,t){e[m]&&e[b].map((n=>{n.render&&n.render.call(e,{[t]:!0})}))}function $(e){return null===e?"null":w(e)?"array":typeof e}function E(e){return function(t,n){const i=n.name,a=Symbol(i),l=Symbol(`${i}:type`),c=Symbol(`${i}:meta`);return n.addInitializer((function(){Reflect.defineProperty(this,i,{get:()=>"object"===this[l]||"array"===this[l]?this[a][o]?this[a]:h(this[a]):this[a],set:t=>{const n=$(e?e(t):t);if("index"!==i&&this[l]!==n&&"null"!==this[l]&&"null"!==n)throw new Error(`@Prop() ${i} with type '${this[l]}' cannot be set to ${n}.`);if("array"===this[l]){if(!w(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=h(this[a]);if(e[s]){const n=t[o]?t[d]:t;e[r](this,n),this[a]=t,console.log(">>> trigger render???",this,i)}else this[a]=t}else this[a]=e?e(t):t,x(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=v(i);t[i]||(e.observedAttributes.push(n),t[i]=a)}return this[l]=$(t),"array"===this[l]?(this[a]=t,new Proxy(t,{get:(e,t)=>t===k?this[c]:(console.log("errr???"),Reflect.get(this[a],t)),set:(e,t,n)=>{if(t===k)return this[c]=n,!0;const s=Reflect.set(e,t,n);return"length"===t&&this[a].length===n||x(this,i),this[a]=n,s}})):(this[a]=e?e(this.getAttribute(i)??t):this.getAttribute(i)??t,this[a])}}}function L(){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 k=Symbol("meta");function S({container:e,items:t,type:n,create:a,connect:s,disconnect:r,update:o}){function d(e,s){const r=n(e),o=document.createElement(v(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=s),-1!==l.indexOf("index")&&l.splice(l.indexOf("index"),1),l.forEach((t=>{o[t]=e[t]})),a&&a(o,h(e)),t[s][i](o,((e,t)=>{o[e]=t})),o}t.forEach(((t,n)=>{const i=d(t,n);e.appendChild(i),s&&s(i,h(t))})),t[i](e,((n,i,a)=>{if(i===p.swap){const e=t.length;t=h(a[0]),i=p.splice,a=[0,e,...a[0]]}switch(i){case p.fill: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.pop:const l=e.children.length;l>0&&e.children[l-1].remove();break;case p.push:const c=e.children.length;[...a].forEach(((t,n)=>{const i=d(t,c+n);e.appendChild(i),s&&s(i,h(t))}));break;case p.reverse:for(var r=1;r<e.children.length;r++)e.insertBefore(e.children[r],e.children[0]);break;case p.shift:e.children.length&&e.children[0].remove();for(let t=0;t<e.children.length;t++)e.children[t].index=t;break;case p.sort:throw new Error("ToDo... write sort.");case p.splice:const[m,g,...u]=a;if(g>0)for(let t=m;t<g+m;t++)e.children[t].remove();let b=u.length||0;if(b>0){const t=u.map(((e,t)=>d(e,m+t)));0===m?e.prepend(...t):e.children[m-1].after(...t);for(let t=m-g+b;t<e.children.length;t++)e.children[t].index=t;t.forEach((e=>{s&&s(e,u[r])}))}else for(let t=m;t<e.children.length;t++)e.children[t].index=t;break;case p.unshift:const v=e.children.length&&e.children[0],f=[...a].length;[...a].forEach(((t,n)=>{v?v.before(d(t,n)):e.appendChild(d(t,n))}));for(let t=f;t<e.children.length;t++)e.children[t].index=t}}))}var C=n(513),D=function(e,t,n,i,a,s){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");s.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))&&a.unshift(o)}else(o=r(b))&&("field"===d?a.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},O=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 B=(()=>{let e,t,n,i,a,s,r=[y({selector:"pg-tree-button-icon",style:C.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=[E()],i=[E()],a=[L()],s=[L()],D(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),D(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),D(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),D(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:v},u,b),D(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}),O(t,o)}index=O(this,l,void 0);icon=(O(this,c),O(this,h,"M0 0h24v24H0V0zm2 2v20h20V2H2z"));$button=(O(this,p),O(this,m,void 0));$icon=(O(this,g),O(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),O(this,b)}});return t})();var A=n(273),P=function(e,t,n,i,a,s){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");s.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))&&a.unshift(o)}else(o=r(b))&&("field"===d?a.unshift(o):h[l]=o)}c&&Object.defineProperty(c,i.name,h),p=!0},T=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,s,r,o,d,l,c,h,p,m,g,u,b,v,f,w,x,$=[y({selector:"pg-tree-item",style:A.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>'})],k=[],C=HTMLElement,D=[],O=[],I=[],R=[],z=[],j=[],M=[],K=[],F=[],U=[],N=[],H=[],_=[],V=[],q=[],Y=[],W=[],Z=[],Q=[],G=[],J=[],X=[],ee=[],te=[],ne=[],ie=[],ae=[],se=[],re=[],oe=[],de=[],le=[],ce=[],he=[],pe=[],me=[],ge=[],ue=[];var be=class extends C{static{t=this}static{const y="function"==typeof Symbol&&Symbol.metadata?Object.create(C[Symbol.metadata]??null):void 0;n=[E()],i=[E()],a=[E()],s=[E()],r=[E()],o=[E()],d=[E()],l=[L()],c=[L()],h=[L()],p=[L()],m=[L()],g=[L()],u=[L()],b=[L()],v=[L()],f=[L()],w=[L()],x=[L()],P(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:y},D,O),P(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:y},I,R),P(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:y},z,j),P(null,null,s,{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:y},M,K),P(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:y},F,U),P(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:y},N,H),P(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:y},_,V),P(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:y},q,Y),P(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:y},W,Z),P(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:y},Q,G),P(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:y},J,X),P(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:y},ee,te),P(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:y},ne,ie),P(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:y},ae,se),P(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:y},re,oe),P(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:y},de,le),P(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:y},ce,he),P(null,null,w,{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:y},pe,me),P(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:y},ge,ue),P(null,e={value:t},$,{kind:"class",name:t.name,metadata:y},null,k),be=t=e.value,y&&Object.defineProperty(t,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:y}),T(t,k)}index=T(this,D,void 0);label=(T(this,O),T(this,I,""));selected=(T(this,R),T(this,z,!1));expanded=(T(this,j),T(this,M,!1));icon=(T(this,K),T(this,F,{path:"M0 0h24v24H0V0zm2 2v20h20V2H2z"}));actions=(T(this,U),T(this,N,[]));items=(T(this,H),T(this,_,[]));$toggle=(T(this,V),T(this,q,void 0));$item=(T(this,Y),T(this,W,void 0));$input=(T(this,Z),T(this,Q,void 0));$iconButton=(T(this,G),T(this,J,void 0));$icon=(T(this,X),T(this,ee,void 0));$label=(T(this,te),T(this,ne,void 0));$labelButton=(T(this,ie),T(this,ae,void 0));$actions=(T(this,se),T(this,re,void 0));$items=(T(this,oe),T(this,de,void 0));$dropabove=(T(this,le),T(this,ce,void 0));$dropon=(T(this,he),T(this,pe,void 0));$dropbelow=(T(this,me),T(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.#s.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.#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.#O.bind(this)),this.$dropon.addEventListener("dragleave",this.#B.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)),S({container:this.$actions,items:this.actions,type:e=>B}),this.expanded&&this.#R()}disconnectedCallback(){console.log("disconnect",this.index)}#z=(T(this,ue),!0);#R(){this.#z&&(S({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.#M(),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()}#M(){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.#M(),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()}}#K;#s(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.#K=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.#K.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;#O(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)}#B(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})()})();