@eox/drawtools - npm Package Compare versions

Comparing version 0.6.1 to 0.8.0

dist/eox-drawtools.js

@@ -1,12 +0,12 @@
-var bt = Object.defineProperty;
-var wt = (i, t, e) => t in i ? bt(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var g = (i, t, e) => (wt(i, typeof t != "symbol" ? t + "" : t, e), e), Q = (i, t, e) => {
-  if (!t.has(i))
+var _t = Object.defineProperty;
+var xt = (r, t, e) => t in r ? _t(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var b = (r, t, e) => (xt(r, typeof t != "symbol" ? t + "" : t, e), e), Q = (r, t, e) => {
+  if (!t.has(r))
     throw TypeError("Cannot " + e);
 };
-var m = (i, t, e) => (Q(i, t, "read from private field"), e ? e.call(i) : t.get(i)), H = (i, t, e) => {
-  if (t.has(i))
+var g = (r, t, e) => (Q(r, t, "read from private field"), e ? e.call(r) : t.get(r)), S = (r, t, e) => {
+  if (t.has(r))
     throw TypeError("Cannot add the same private member more than once");
-  t instanceof WeakSet ? t.add(i) : t.set(i, e);
-}, M = (i, t, e, s) => (Q(i, t, "write to private field"), s ? s.call(i, e) : t.set(i, e), e);
+  t instanceof WeakSet ? t.add(r) : t.set(r, e);
+}, E = (r, t, e, i) => (Q(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
 /**
@@ -17,6 +17,6 @@ * @license
  */
-const R = globalThis, J = R.ShadowRoot && (R.ShadyCSS === void 0 || R.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, dt = Symbol(), X = /* @__PURE__ */ new WeakMap();
+const D = globalThis, K = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, pt = Symbol(), X = /* @__PURE__ */ new WeakMap();
 let At = class {
-  constructor(t, e, s) {
-    if (this._$cssResult$ = !0, s !== dt)
+  constructor(t, e, i) {
+    if (this._$cssResult$ = !0, i !== pt)
       throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -28,5 +28,5 @@ this.cssText = t, this.t = e;
     const e = this.t;
-    if (J && t === void 0) {
-      const s = e !== void 0 && e.length === 1;
-      s && (t = X.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && X.set(e, t));
+    if (K && t === void 0) {
+      const i = e !== void 0 && e.length === 1;
+      i && (t = X.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && X.set(e, t));
     }
@@ -39,16 +39,16 @@ return t;
 };
-const vt = (i) => new At(typeof i == "string" ? i : i + "", void 0, dt), xt = (i, t) => {
-  if (J)
-    i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+const St = (r) => new At(typeof r == "string" ? r : r + "", void 0, pt), Et = (r, t) => {
+  if (K)
+    r.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else
     for (const e of t) {
-      const s = document.createElement("style"), r = R.litNonce;
-      r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, i.appendChild(s);
+      const i = document.createElement("style"), s = D.litNonce;
+      s !== void 0 && i.setAttribute("nonce", s), i.textContent = e.cssText, r.appendChild(i);
     }
-}, Y = J ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
+}, Y = K ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
   let e = "";
-  for (const s of t.cssRules)
-    e += s.cssText;
-  return vt(e);
-})(i) : i;
+  for (const i of t.cssRules)
+    e += i.cssText;
+  return St(e);
+})(r) : r;
 /**
@@ -59,20 +59,20 @@ * @license
  */
-const { is: St, defineProperty: Ct, getOwnPropertyDescriptor: Et, getOwnPropertyNames: Ht, getOwnPropertySymbols: Mt, getPrototypeOf: kt } = Object, f = globalThis, tt = f.trustedTypes, Ft = tt ? tt.emptyScript : "", j = f.reactiveElementPolyfillSupport, F = (i, t) => i, G = { toAttribute(i, t) {
+const { is: Ct, defineProperty: Ft, getOwnPropertyDescriptor: Ht, getOwnPropertyNames: kt, getOwnPropertySymbols: Mt, getPrototypeOf: Ut } = Object, $ = globalThis, tt = $.trustedTypes, Pt = tt ? tt.emptyScript : "", q = $.reactiveElementPolyfillSupport, M = (r, t) => r, Z = { toAttribute(r, t) {
   switch (t) {
     case Boolean:
-      i = i ? Ft : null;
+      r = r ? Pt : null;
       break;
     case Object:
     case Array:
-      i = i == null ? i : JSON.stringify(i);
+      r = r == null ? r : JSON.stringify(r);
   }
-  return i;
-}, fromAttribute(i, t) {
-  let e = i;
+  return r;
+}, fromAttribute(r, t) {
+  let e = r;
   switch (t) {
     case Boolean:
-      e = i !== null;
+      e = r !== null;
       break;
     case Number:
-      e = i === null ? null : Number(i);
+      e = r === null ? null : Number(r);
       break;
@@ -82,3 +82,3 @@ case Object:
       try {
-        e = JSON.parse(i);
+        e = JSON.parse(r);
       } catch {
@@ -89,5 +89,5 @@ e = null;
   return e;
-} }, ct = (i, t) => !St(i, t), et = { attribute: !0, type: String, converter: G, reflect: !1, hasChanged: ct };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), f.litPropertyMetadata ?? (f.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class v extends HTMLElement {
+} }, ut = (r, t) => !Ct(r, t), et = { attribute: !0, type: String, converter: Z, reflect: !1, hasChanged: ut };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), $.litPropertyMetadata ?? ($.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class C extends HTMLElement {
   static addInitializer(t) {
@@ -101,8 +101,8 @@ this._$Ei(), (this.l ?? (this.l = [])).push(t);
     if (e.state && (e.attribute = !1), this._$Ei(), this.elementProperties.set(t, e), !e.noAccessor) {
-      const s = Symbol(), r = this.getPropertyDescriptor(t, s, e);
-      r !== void 0 && Ct(this.prototype, t, r);
+      const i = Symbol(), s = this.getPropertyDescriptor(t, i, e);
+      s !== void 0 && Ft(this.prototype, t, s);
     }
   }
-  static getPropertyDescriptor(t, e, s) {
-    const { get: r, set: n } = Et(this.prototype, t) ?? { get() {
+  static getPropertyDescriptor(t, e, i) {
+    const { get: s, set: n } = Ht(this.prototype, t) ?? { get() {
       return this[e];
@@ -113,6 +113,6 @@ }, set(o) {
     return { get() {
-      return r == null ? void 0 : r.call(this);
+      return s == null ? void 0 : s.call(this);
     }, set(o) {
-      const l = r == null ? void 0 : r.call(this);
-      n.call(this, o), this.requestUpdate(t, l, s);
+      const l = s == null ? void 0 : s.call(this);
+      n.call(this, o), this.requestUpdate(t, l, i);
     }, configurable: !0, enumerable: !0 };
@@ -124,14 +124,14 @@ }
   static _$Ei() {
-    if (this.hasOwnProperty(F("elementProperties")))
+    if (this.hasOwnProperty(M("elementProperties")))
       return;
-    const t = kt(this);
+    const t = Ut(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(F("finalized")))
+    if (this.hasOwnProperty(M("finalized")))
       return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(F("properties"))) {
-      const e = this.properties, s = [...Ht(e), ...Mt(e)];
-      for (const r of s)
-        this.createProperty(r, e[r]);
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(M("properties"))) {
+      const e = this.properties, i = [...kt(e), ...Mt(e)];
+      for (const s of i)
+        this.createProperty(s, e[s]);
     }
@@ -142,9 +142,9 @@ const t = this[Symbol.metadata];
       if (e !== void 0)
-        for (const [s, r] of e)
-          this.elementProperties.set(s, r);
+        for (const [i, s] of e)
+          this.elementProperties.set(i, s);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [e, s] of this.elementProperties) {
-      const r = this._$Eu(e, s);
-      r !== void 0 && this._$Eh.set(r, e);
+    for (const [e, i] of this.elementProperties) {
+      const s = this._$Eu(e, i);
+      s !== void 0 && this._$Eh.set(s, e);
     }
@@ -156,5 +156,5 @@ this.elementStyles = this.finalizeStyles(this.styles);
     if (Array.isArray(t)) {
-      const s = new Set(t.flat(1 / 0).reverse());
-      for (const r of s)
-        e.unshift(Y(r));
+      const i = new Set(t.flat(1 / 0).reverse());
+      for (const s of i)
+        e.unshift(Y(s));
     } else
@@ -165,4 +165,4 @@ t !== void 0 && e.push(Y(t));
   static _$Eu(t, e) {
-    const s = e.attribute;
-    return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
+    const i = e.attribute;
+    return i === !1 ? void 0 : typeof i == "string" ? i : typeof t == "string" ? t.toLowerCase() : void 0;
   }
@@ -174,16 +174,16 @@ constructor() {
     var t;
-    this._$Eg = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
+    this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
   }
   addController(t) {
     var e;
-    (this._$ES ?? (this._$ES = [])).push(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
   }
   removeController(t) {
     var e;
-    (e = this._$ES) == null || e.splice(this._$ES.indexOf(t) >>> 0, 1);
+    (e = this._$EO) == null || e.delete(t);
   }
   _$E_() {
     const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
-    for (const s of e.keys())
-      this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
+    for (const i of e.keys())
+      this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
     t.size > 0 && (this._$Ep = t);
@@ -193,9 +193,9 @@ }
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return xt(t, this.constructor.elementStyles), t;
+    return Et(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
-    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$ES) == null || t.forEach((e) => {
-      var s;
-      return (s = e.hostConnected) == null ? void 0 : s.call(e);
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
+      var i;
+      return (i = e.hostConnected) == null ? void 0 : i.call(e);
     });
@@ -207,16 +207,16 @@ }
     var t;
-    (t = this._$ES) == null || t.forEach((e) => {
-      var s;
-      return (s = e.hostDisconnected) == null ? void 0 : s.call(e);
+    (t = this._$EO) == null || t.forEach((e) => {
+      var i;
+      return (i = e.hostDisconnected) == null ? void 0 : i.call(e);
     });
   }
-  attributeChangedCallback(t, e, s) {
-    this._$AK(t, s);
+  attributeChangedCallback(t, e, i) {
+    this._$AK(t, i);
   }
-  _$EO(t, e) {
+  _$EC(t, e) {
     var n;
-    const s = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, s);
-    if (r !== void 0 && s.reflect === !0) {
-      const o = (((n = s.converter) == null ? void 0 : n.toAttribute) !== void 0 ? s.converter : G).toAttribute(e, s.type);
-      this._$Em = t, o == null ? this.removeAttribute(r) : this.setAttribute(r, o), this._$Em = null;
+    const i = this.constructor.elementProperties.get(t), s = this.constructor._$Eu(t, i);
+    if (s !== void 0 && i.reflect === !0) {
+      const o = (((n = i.converter) == null ? void 0 : n.toAttribute) !== void 0 ? i.converter : Z).toAttribute(e, i.type);
+      this._$Em = t, o == null ? this.removeAttribute(s) : this.setAttribute(s, o), this._$Em = null;
     }
@@ -226,23 +226,23 @@ }
     var n;
-    const s = this.constructor, r = s._$Eh.get(t);
-    if (r !== void 0 && this._$Em !== r) {
-      const o = s.getPropertyOptions(r), l = typeof o.converter == "function" ? { fromAttribute: o.converter } : ((n = o.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? o.converter : G;
-      this._$Em = r, this[r] = l.fromAttribute(e, o.type), this._$Em = null;
+    const i = this.constructor, s = i._$Eh.get(t);
+    if (s !== void 0 && this._$Em !== s) {
+      const o = i.getPropertyOptions(s), l = typeof o.converter == "function" ? { fromAttribute: o.converter } : ((n = o.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? o.converter : Z;
+      this._$Em = s, this[s] = l.fromAttribute(e, o.type), this._$Em = null;
     }
   }
-  requestUpdate(t, e, s, r = !1, n) {
+  requestUpdate(t, e, i) {
     if (t !== void 0) {
-      if (s ?? (s = this.constructor.getPropertyOptions(t)), !(s.hasChanged ?? ct)(r ? n : this[t], e))
+      if (i ?? (i = this.constructor.getPropertyOptions(t)), !(i.hasChanged ?? ut)(this[t], e))
         return;
-      this.C(t, e, s);
+      this.P(t, e, i);
     }
-    this.isUpdatePending === !1 && (this._$Eg = this._$EP());
+    this.isUpdatePending === !1 && (this._$ES = this._$ET());
   }
-  C(t, e, s) {
-    this._$AL.has(t) || this._$AL.set(t, e), s.reflect === !0 && this._$Em !== t && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t);
+  P(t, e, i) {
+    this._$AL.has(t) || this._$AL.set(t, e), i.reflect === !0 && this._$Em !== t && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t);
   }
-  async _$EP() {
+  async _$ET() {
     this.isUpdatePending = !0;
     try {
-      await this._$Eg;
+      await this._$ES;
     } catch (e) {
@@ -258,7 +258,7 @@ Promise.reject(e);
   performUpdate() {
-    var s;
+    var i;
     if (!this.isUpdatePending)
       return;
     if (!this.hasUpdated) {
-      if (this._$Ep) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
         for (const [n, o] of this._$Ep)
@@ -268,6 +268,6 @@ this[n] = o;
       }
-      const r = this.constructor.elementProperties;
-      if (r.size > 0)
-        for (const [n, o] of r)
-          o.wrapped !== !0 || this._$AL.has(n) || this[n] === void 0 || this.C(n, this[n], o);
+      const s = this.constructor.elementProperties;
+      if (s.size > 0)
+        for (const [n, o] of s)
+          o.wrapped !== !0 || this._$AL.has(n) || this[n] === void 0 || this.P(n, this[n], o);
     }
@@ -277,8 +277,8 @@ let t = !1;
     try {
-      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (s = this._$ES) == null || s.forEach((r) => {
+      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (i = this._$EO) == null || i.forEach((s) => {
         var n;
-        return (n = r.hostUpdate) == null ? void 0 : n.call(r);
-      }), this.update(e)) : this._$ET();
-    } catch (r) {
-      throw t = !1, this._$ET(), r;
+        return (n = s.hostUpdate) == null ? void 0 : n.call(s);
+      }), this.update(e)) : this._$EU();
+    } catch (s) {
+      throw t = !1, this._$EU(), s;
     }
@@ -291,8 +291,8 @@ t && this._$AE(e);
     var e;
-    (e = this._$ES) == null || e.forEach((s) => {
-      var r;
-      return (r = s.hostUpdated) == null ? void 0 : r.call(s);
+    (e = this._$EO) == null || e.forEach((i) => {
+      var s;
+      return (s = i.hostUpdated) == null ? void 0 : s.call(i);
     }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
   }
-  _$ET() {
+  _$EU() {
     this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
@@ -304,3 +304,3 @@ }
   getUpdateComplete() {
-    return this._$Eg;
+    return this._$ES;
   }
@@ -311,3 +311,3 @@ shouldUpdate(t) {
   update(t) {
-    this._$Ej && (this._$Ej = this._$Ej.forEach((e) => this._$EO(e, this[e]))), this._$ET();
+    this._$Ej && (this._$Ej = this._$Ej.forEach((e) => this._$EC(e, this[e]))), this._$EU();
   }
@@ -319,3 +319,3 @@ updated(t) {
 }
-v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[F("elementProperties")] = /* @__PURE__ */ new Map(), v[F("finalized")] = /* @__PURE__ */ new Map(), j == null || j({ ReactiveElement: v }), (f.reactiveElementVersions ?? (f.reactiveElementVersions = [])).push("2.0.1");
+C.elementStyles = [], C.shadowRootOptions = { mode: "open" }, C[M("elementProperties")] = /* @__PURE__ */ new Map(), C[M("finalized")] = /* @__PURE__ */ new Map(), q == null || q({ ReactiveElement: C }), ($.reactiveElementVersions ?? ($.reactiveElementVersions = [])).push("2.0.4");
 /**
@@ -326,58 +326,58 @@ * @license
  */
-const U = globalThis, z = U.trustedTypes, st = z ? z.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, ut = "$lit$", y = `lit$${(Math.random() + "").slice(9)}$`, pt = "?" + y, Ut = `<${pt}>`, A = document, P = () => A.createComment(""), I = (i) => i === null || typeof i != "object" && typeof i != "function", $t = Array.isArray, Pt = (i) => $t(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", T = `[ 	
-\f\r]`, k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, it = /-->/g, rt = />/g, _ = RegExp(`>|${T}(?:([^\\s"'>=/]+)(${T}*=${T}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), nt = /'/g, ot = /"/g, yt = /^(?:script|style|textarea|title)$/i, It = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), O = It(1), C = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), b = A.createTreeWalker(A, 129);
-function ft(i, t) {
-  if (!Array.isArray(i) || !i.hasOwnProperty("raw"))
+const U = globalThis, j = U.trustedTypes, rt = j ? j.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, gt = "$lit$", f = `lit$${(Math.random() + "").slice(9)}$`, yt = "?" + f, Ot = `<${yt}>`, A = document, P = () => A.createComment(""), O = (r) => r === null || typeof r != "object" && typeof r != "function", ft = Array.isArray, Nt = (r) => ft(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", T = `[ 	
+\f\r]`, k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, it = /-->/g, st = />/g, v = RegExp(`>|${T}(?:([^\\s"'>=/]+)(${T}*=${T}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), nt = /'/g, ot = /"/g, mt = /^(?:script|style|textarea|title)$/i, It = (r) => (t, ...e) => ({ _$litType$: r, strings: t, values: e }), _ = It(1), F = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), w = A.createTreeWalker(A, 129);
+function $t(r, t) {
+  if (!Array.isArray(r) || !r.hasOwnProperty("raw"))
     throw Error("invalid template strings array");
-  return st !== void 0 ? st.createHTML(t) : t;
+  return rt !== void 0 ? rt.createHTML(t) : t;
 }
-const Ot = (i, t) => {
-  const e = i.length - 1, s = [];
-  let r, n = t === 2 ? "<svg>" : "", o = k;
+const Bt = (r, t) => {
+  const e = r.length - 1, i = [];
+  let s, n = t === 2 ? "<svg>" : "", o = k;
   for (let l = 0; l < e; l++) {
-    const a = i[l];
-    let d, u, h = -1, p = 0;
-    for (; p < a.length && (o.lastIndex = p, u = o.exec(a), u !== null); )
-      p = o.lastIndex, o === k ? u[1] === "!--" ? o = it : u[1] !== void 0 ? o = rt : u[2] !== void 0 ? (yt.test(u[2]) && (r = RegExp("</" + u[2], "g")), o = _) : u[3] !== void 0 && (o = _) : o === _ ? u[0] === ">" ? (o = r ?? k, h = -1) : u[1] === void 0 ? h = -2 : (h = o.lastIndex - u[2].length, d = u[1], o = u[3] === void 0 ? _ : u[3] === '"' ? ot : nt) : o === ot || o === nt ? o = _ : o === it || o === rt ? o = k : (o = _, r = void 0);
-    const $ = o === _ && i[l + 1].startsWith("/>") ? " " : "";
-    n += o === k ? a + Ut : h >= 0 ? (s.push(d), a.slice(0, h) + ut + a.slice(h) + y + $) : a + y + (h === -2 ? l : $);
+    const a = r[l];
+    let h, p, c = -1, u = 0;
+    for (; u < a.length && (o.lastIndex = u, p = o.exec(a), p !== null); )
+      u = o.lastIndex, o === k ? p[1] === "!--" ? o = it : p[1] !== void 0 ? o = st : p[2] !== void 0 ? (mt.test(p[2]) && (s = RegExp("</" + p[2], "g")), o = v) : p[3] !== void 0 && (o = v) : o === v ? p[0] === ">" ? (o = s ?? k, c = -1) : p[1] === void 0 ? c = -2 : (c = o.lastIndex - p[2].length, h = p[1], o = p[3] === void 0 ? v : p[3] === '"' ? ot : nt) : o === ot || o === nt ? o = v : o === it || o === st ? o = k : (o = v, s = void 0);
+    const y = o === v && r[l + 1].startsWith("/>") ? " " : "";
+    n += o === k ? a + Ot : c >= 0 ? (i.push(h), a.slice(0, c) + gt + a.slice(c) + f + y) : a + f + (c === -2 ? l : y);
   }
-  return [ft(i, n + (i[e] || "<?>") + (t === 2 ? "</svg>" : "")), s];
+  return [$t(r, n + (r[e] || "<?>") + (t === 2 ? "</svg>" : "")), i];
 };
-class L {
-  constructor({ strings: t, _$litType$: e }, s) {
-    let r;
+class N {
+  constructor({ strings: t, _$litType$: e }, i) {
+    let s;
     this.parts = [];
     let n = 0, o = 0;
-    const l = t.length - 1, a = this.parts, [d, u] = Ot(t, e);
-    if (this.el = L.createElement(d, s), b.currentNode = this.el.content, e === 2) {
-      const h = this.el.content.firstChild;
-      h.replaceWith(...h.childNodes);
+    const l = t.length - 1, a = this.parts, [h, p] = Bt(t, e);
+    if (this.el = N.createElement(h, i), w.currentNode = this.el.content, e === 2) {
+      const c = this.el.content.firstChild;
+      c.replaceWith(...c.childNodes);
     }
-    for (; (r = b.nextNode()) !== null && a.length < l; ) {
-      if (r.nodeType === 1) {
-        if (r.hasAttributes())
-          for (const h of r.getAttributeNames())
-            if (h.endsWith(ut)) {
-              const p = u[o++], $ = r.getAttribute(h).split(y), D = /([.?@])?(.*)/.exec(p);
-              a.push({ type: 1, index: n, name: D[2], strings: $, ctor: D[1] === "." ? Nt : D[1] === "?" ? Bt : D[1] === "@" ? Vt : q }), r.removeAttribute(h);
+    for (; (s = w.nextNode()) !== null && a.length < l; ) {
+      if (s.nodeType === 1) {
+        if (s.hasAttributes())
+          for (const c of s.getAttributeNames())
+            if (c.endsWith(gt)) {
+              const u = p[o++], y = s.getAttribute(c).split(f), z = /([.?@])?(.*)/.exec(u);
+              a.push({ type: 1, index: n, name: z[2], strings: y, ctor: z[1] === "." ? Rt : z[1] === "?" ? Vt : z[1] === "@" ? zt : J }), s.removeAttribute(c);
             } else
-              h.startsWith(y) && (a.push({ type: 6, index: n }), r.removeAttribute(h));
-        if (yt.test(r.tagName)) {
-          const h = r.textContent.split(y), p = h.length - 1;
-          if (p > 0) {
-            r.textContent = z ? z.emptyScript : "";
-            for (let $ = 0; $ < p; $++)
-              r.append(h[$], P()), b.nextNode(), a.push({ type: 2, index: ++n });
-            r.append(h[p], P());
+              c.startsWith(f) && (a.push({ type: 6, index: n }), s.removeAttribute(c));
+        if (mt.test(s.tagName)) {
+          const c = s.textContent.split(f), u = c.length - 1;
+          if (u > 0) {
+            s.textContent = j ? j.emptyScript : "";
+            for (let y = 0; y < u; y++)
+              s.append(c[y], P()), w.nextNode(), a.push({ type: 2, index: ++n });
+            s.append(c[u], P());
           }
         }
-      } else if (r.nodeType === 8)
-        if (r.data === pt)
+      } else if (s.nodeType === 8)
+        if (s.data === yt)
           a.push({ type: 2, index: n });
         else {
-          let h = -1;
-          for (; (h = r.data.indexOf(y, h + 1)) !== -1; )
-            a.push({ type: 7, index: n }), h += y.length - 1;
+          let c = -1;
+          for (; (c = s.data.indexOf(f, c + 1)) !== -1; )
+            a.push({ type: 7, index: n }), c += f.length - 1;
         }
@@ -388,13 +388,13 @@ n++;
   static createElement(t, e) {
-    const s = A.createElement("template");
-    return s.innerHTML = t, s;
+    const i = A.createElement("template");
+    return i.innerHTML = t, i;
   }
 }
-function E(i, t, e = i, s) {
+function H(r, t, e = r, i) {
   var o, l;
-  if (t === C)
+  if (t === F)
     return t;
-  let r = s !== void 0 ? (o = e._$Co) == null ? void 0 : o[s] : e._$Cl;
-  const n = I(t) ? void 0 : t._$litDirective$;
-  return (r == null ? void 0 : r.constructor) !== n && ((l = r == null ? void 0 : r._$AO) == null || l.call(r, !1), n === void 0 ? r = void 0 : (r = new n(i), r._$AT(i, e, s)), s !== void 0 ? (e._$Co ?? (e._$Co = []))[s] = r : e._$Cl = r), r !== void 0 && (t = E(i, r._$AS(i, t.values), r, s)), t;
+  let s = i !== void 0 ? (o = e._$Co) == null ? void 0 : o[i] : e._$Cl;
+  const n = O(t) ? void 0 : t._$litDirective$;
+  return (s == null ? void 0 : s.constructor) !== n && ((l = s == null ? void 0 : s._$AO) == null || l.call(s, !1), n === void 0 ? s = void 0 : (s = new n(r), s._$AT(r, e, i)), i !== void 0 ? (e._$Co ?? (e._$Co = []))[i] = s : e._$Cl = s), s !== void 0 && (t = H(r, s._$AS(r, t.values), s, i)), t;
 }
@@ -412,18 +412,18 @@ class Lt {
   u(t) {
-    const { el: { content: e }, parts: s } = this._$AD, r = ((t == null ? void 0 : t.creationScope) ?? A).importNode(e, !0);
-    b.currentNode = r;
-    let n = b.nextNode(), o = 0, l = 0, a = s[0];
+    const { el: { content: e }, parts: i } = this._$AD, s = ((t == null ? void 0 : t.creationScope) ?? A).importNode(e, !0);
+    w.currentNode = s;
+    let n = w.nextNode(), o = 0, l = 0, a = i[0];
     for (; a !== void 0; ) {
       if (o === a.index) {
-        let d;
-        a.type === 2 ? d = new V(n, n.nextSibling, this, t) : a.type === 1 ? d = new a.ctor(n, a.name, a.strings, this, t) : a.type === 6 && (d = new Dt(n, this, t)), this._$AV.push(d), a = s[++l];
+        let h;
+        a.type === 2 ? h = new V(n, n.nextSibling, this, t) : a.type === 1 ? h = new a.ctor(n, a.name, a.strings, this, t) : a.type === 6 && (h = new Dt(n, this, t)), this._$AV.push(h), a = i[++l];
       }
-      o !== (a == null ? void 0 : a.index) && (n = b.nextNode(), o++);
+      o !== (a == null ? void 0 : a.index) && (n = w.nextNode(), o++);
     }
-    return b.currentNode = A, r;
+    return w.currentNode = A, s;
   }
   p(t) {
     let e = 0;
-    for (const s of this._$AV)
-      s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, e), e += s.strings.length - 2) : s._$AI(t[e])), e++;
+    for (const i of this._$AV)
+      i !== void 0 && (i.strings !== void 0 ? (i._$AI(t, i, e), e += i.strings.length - 2) : i._$AI(t[e])), e++;
   }
@@ -436,4 +436,4 @@ }
   }
-  constructor(t, e, s, r) {
-    this.type = 2, this._$AH = c, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = r, this._$Cv = (r == null ? void 0 : r.isConnected) ?? !0;
+  constructor(t, e, i, s) {
+    this.type = 2, this._$AH = d, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = i, this.options = s, this._$Cv = (s == null ? void 0 : s.isConnected) ?? !0;
   }
@@ -452,21 +452,21 @@ get parentNode() {
   _$AI(t, e = this) {
-    t = E(this, t, e), I(t) ? t === c || t == null || t === "" ? (this._$AH !== c && this._$AR(), this._$AH = c) : t !== this._$AH && t !== C && this._(t) : t._$litType$ !== void 0 ? this.g(t) : t.nodeType !== void 0 ? this.$(t) : Pt(t) ? this.T(t) : this._(t);
+    t = H(this, t, e), O(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== F && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Nt(t) ? this.k(t) : this._(t);
   }
-  k(t) {
+  S(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
   }
-  $(t) {
-    this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
+  T(t) {
+    this._$AH !== t && (this._$AR(), this._$AH = this.S(t));
   }
   _(t) {
-    this._$AH !== c && I(this._$AH) ? this._$AA.nextSibling.data = t : this.$(A.createTextNode(t)), this._$AH = t;
+    this._$AH !== d && O(this._$AH) ? this._$AA.nextSibling.data = t : this.T(A.createTextNode(t)), this._$AH = t;
   }
-  g(t) {
+  $(t) {
     var n;
-    const { values: e, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = L.createElement(ft(s.h, s.h[0]), this.options)), s);
-    if (((n = this._$AH) == null ? void 0 : n._$AD) === r)
+    const { values: e, _$litType$: i } = t, s = typeof i == "number" ? this._$AC(t) : (i.el === void 0 && (i.el = N.createElement($t(i.h, i.h[0]), this.options)), i);
+    if (((n = this._$AH) == null ? void 0 : n._$AD) === s)
       this._$AH.p(e);
     else {
-      const o = new Lt(r, this), l = o.u(this.options);
-      o.p(e), this.$(l), this._$AH = o;
+      const o = new Lt(s, this), l = o.u(this.options);
+      o.p(e), this.T(l), this._$AH = o;
     }
@@ -476,17 +476,17 @@ }
     let e = at.get(t.strings);
-    return e === void 0 && at.set(t.strings, e = new L(t)), e;
+    return e === void 0 && at.set(t.strings, e = new N(t)), e;
   }
-  T(t) {
-    $t(this._$AH) || (this._$AH = [], this._$AR());
+  k(t) {
+    ft(this._$AH) || (this._$AH = [], this._$AR());
     const e = this._$AH;
-    let s, r = 0;
+    let i, s = 0;
     for (const n of t)
-      r === e.length ? e.push(s = new V(this.k(P()), this.k(P()), this, this.options)) : s = e[r], s._$AI(n), r++;
-    r < e.length && (this._$AR(s && s._$AB.nextSibling, r), e.length = r);
+      s === e.length ? e.push(i = new V(this.S(P()), this.S(P()), this, this.options)) : i = e[s], i._$AI(n), s++;
+    s < e.length && (this._$AR(i && i._$AB.nextSibling, s), e.length = s);
   }
   _$AR(t = this._$AA.nextSibling, e) {
-    var s;
-    for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, e); t && t !== this._$AB; ) {
-      const r = t.nextSibling;
-      t.remove(), t = r;
+    var i;
+    for ((i = this._$AP) == null ? void 0 : i.call(this, !1, !0, e); t && t !== this._$AB; ) {
+      const s = t.nextSibling;
+      t.remove(), t = s;
     }
@@ -499,3 +499,3 @@ }
 }
-class q {
+class J {
   get tagName() {
@@ -507,47 +507,47 @@ return this.element.tagName;
   }
-  constructor(t, e, s, r, n) {
-    this.type = 1, this._$AH = c, this._$AN = void 0, this.element = t, this.name = e, this._$AM = r, this.options = n, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = c;
+  constructor(t, e, i, s, n) {
+    this.type = 1, this._$AH = d, this._$AN = void 0, this.element = t, this.name = e, this._$AM = s, this.options = n, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = d;
   }
-  _$AI(t, e = this, s, r) {
+  _$AI(t, e = this, i, s) {
     const n = this.strings;
     let o = !1;
     if (n === void 0)
-      t = E(this, t, e, 0), o = !I(t) || t !== this._$AH && t !== C, o && (this._$AH = t);
+      t = H(this, t, e, 0), o = !O(t) || t !== this._$AH && t !== F, o && (this._$AH = t);
     else {
       const l = t;
-      let a, d;
+      let a, h;
       for (t = n[0], a = 0; a < n.length - 1; a++)
-        d = E(this, l[s + a], e, a), d === C && (d = this._$AH[a]), o || (o = !I(d) || d !== this._$AH[a]), d === c ? t = c : t !== c && (t += (d ?? "") + n[a + 1]), this._$AH[a] = d;
+        h = H(this, l[i + a], e, a), h === F && (h = this._$AH[a]), o || (o = !O(h) || h !== this._$AH[a]), h === d ? t = d : t !== d && (t += (h ?? "") + n[a + 1]), this._$AH[a] = h;
     }
-    o && !r && this.O(t);
+    o && !s && this.j(t);
   }
-  O(t) {
-    t === c ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+  j(t) {
+    t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class Nt extends q {
+class Rt extends J {
   constructor() {
     super(...arguments), this.type = 3;
   }
-  O(t) {
-    this.element[this.name] = t === c ? void 0 : t;
+  j(t) {
+    this.element[this.name] = t === d ? void 0 : t;
   }
 }
-class Bt extends q {
+class Vt extends J {
   constructor() {
     super(...arguments), this.type = 4;
   }
-  O(t) {
-    this.element.toggleAttribute(this.name, !!t && t !== c);
+  j(t) {
+    this.element.toggleAttribute(this.name, !!t && t !== d);
   }
 }
-class Vt extends q {
-  constructor(t, e, s, r, n) {
-    super(t, e, s, r, n), this.type = 5;
+class zt extends J {
+  constructor(t, e, i, s, n) {
+    super(t, e, i, s, n), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = E(this, t, e, 0) ?? c) === C)
+    if ((t = H(this, t, e, 0) ?? d) === F)
       return;
-    const s = this._$AH, r = t === c && s !== c || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, n = t !== c && (s === c || r);
-    r && this.element.removeEventListener(this.name, this, s), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
+    const i = this._$AH, s = t === d && i !== d || t.capture !== i.capture || t.once !== i.once || t.passive !== i.passive, n = t !== d && (i === d || s);
+    s && this.element.removeEventListener(this.name, this, i), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
@@ -560,4 +560,4 @@ handleEvent(t) {
 class Dt {
-  constructor(t, e, s) {
-    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = s;
+  constructor(t, e, i) {
+    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = i;
   }
@@ -568,15 +568,15 @@ get _$AU() {
   _$AI(t) {
-    E(this, t);
+    H(this, t);
   }
 }
-const W = U.litHtmlPolyfillSupport;
-W == null || W(L, V), (U.litHtmlVersions ?? (U.litHtmlVersions = [])).push("3.1.0");
-const Rt = (i, t, e) => {
-  const s = (e == null ? void 0 : e.renderBefore) ?? t;
-  let r = s._$litPart$;
-  if (r === void 0) {
+const G = U.litHtmlPolyfillSupport;
+G == null || G(N, V), (U.litHtmlVersions ?? (U.litHtmlVersions = [])).push("3.1.2");
+const jt = (r, t, e) => {
+  const i = (e == null ? void 0 : e.renderBefore) ?? t;
+  let s = i._$litPart$;
+  if (s === void 0) {
     const n = (e == null ? void 0 : e.renderBefore) ?? null;
-    s._$litPart$ = r = new V(t.insertBefore(P(), n), n, void 0, e ?? {});
+    i._$litPart$ = s = new V(t.insertBefore(P(), n), n, void 0, e ?? {});
   }
-  return r._$AI(i), r;
+  return s._$AI(r), s;
 };
@@ -588,3 +588,3 @@ /**
  */
-class w extends v {
+class x extends C {
   constructor() {
@@ -600,3 +600,3 @@ super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
     const e = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Rt(e, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = jt(e, this.renderRoot, this.renderOptions);
   }
@@ -612,10 +612,10 @@ connectedCallback() {
   render() {
-    return C;
+    return F;
   }
 }
-var ht;
-w._$litElement$ = !0, w.finalized = !0, (ht = globalThis.litElementHydrateSupport) == null || ht.call(globalThis, { LitElement: w });
-const Z = globalThis.litElementPolyfillSupport;
-Z == null || Z({ LitElement: w });
-(globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.0.1");
+var dt;
+x._$litElement$ = !0, x.finalized = !0, (dt = globalThis.litElementHydrateSupport) == null || dt.call(globalThis, { LitElement: x });
+const W = globalThis.litElementPolyfillSupport;
+W == null || W({ LitElement: x });
+(globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.0.4");
 /**
@@ -626,3 +626,3 @@ * @license
  */
-const zt = (i) => (...t) => ({ _$litDirective$: i, values: t });
+const Jt = (r) => (...t) => ({ _$litDirective$: r, values: t });
 let qt = class {
@@ -634,4 +634,4 @@ constructor(t) {
   }
-  _$AT(t, e, s) {
-    this._$Ct = t, this._$AM = e, this._$Ci = s;
+  _$AT(t, e, i) {
+    this._$Ct = t, this._$AM = e, this._$Ci = i;
   }
@@ -650,3 +650,3 @@ _$AS(t, e) {
  */
-const jt = {}, Tt = (i, t = jt) => i._$AH = t;
+const Tt = {}, Gt = (r, t = Tt) => r._$AH = t;
 /**
@@ -657,213 +657,48 @@ * @license
  */
-const Wt = zt(class extends qt {
+const Wt = Jt(class extends qt {
   constructor() {
-    super(...arguments), this.key = c;
+    super(...arguments), this.key = d;
   }
-  render(i, t) {
-    return this.key = i, t;
+  render(r, t) {
+    return this.key = r, t;
   }
-  update(i, [t, e]) {
-    return t !== this.key && (Tt(i), this.key = t), e;
+  update(r, [t, e]) {
+    return t !== this.key && (Gt(r), this.key = t), e;
   }
-}), Zt = `
-button {
-  /* TODO: why does this only work here and not from :root? */
-  --primary-color: #004170;
-  --primary-color-hover: #004170CC;
-  --error-color: #FF5252;
-
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  color: #fff;
-  border-width: 0;
-  outline: none;
-  border-radius: 4px;
-  padding: 16px;
-  height: 36px;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 1.25px;                           
-  font-weight: 500;
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  transition-property: box-shadow, transform, opacity, background;
-  transition-duration: 0.28s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-button:hover:not([disabled]):not(.icon) {
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  background: var(--primary-color-hover);
-}
-
-button, button:active {
-  background: var(--primary-color);
-}
-
-button[disabled] {
-  opacity: 0.5;
-}
-
-button.outline {
-  background: transparent;
-  box-shadow: none;
-  color: var(--primary-color);
-  outline: 1px solid var(--primary-color);
-}
-
-button.outline:hover {
-  background: transparent;
-}
-
-button.icon {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  padding: 0;
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  text-indent: -9999px;
-}
-
-button.icon-text {
-  text-indent: 26px;
-}
-
-button.icon:before, button.icon-text:before {
-  position: absolute;
-  text-indent: 0;
-  line-height: initial;
-}
-
-button.icon:before {
-  width: 24px;
-  height: 24px;
-  margin-right: 0;
-}
-
-button.icon-text:before {
-  width: 18px;
-  height: 18px;
-}
-
-button.small {
-  height: 28px;
-  padding: 12.4px;
-  font-size: .75rem;
-}
-`, K = `
-  * {
-    font-family: Roboto, sans-serif;
-  }
-
-  ${Zt}
-
-  button.discard:before {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF5252' viewBox='0 0 24 24'%3E%3Ctitle%3Etrash-can-outline%3C/title%3E%3Cpath d='M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z' /%3E%3C/svg%3E")
-  }
-
-  button.polygon:before {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004170' viewBox='0 0 24 24'%3E%3Ctitle%3Eshape-polygon-plus%3C/title%3E%3Cpath d='M17,15.7V13H19V17L10,21L3,14L7,5H11V7H8.3L5.4,13.6L10.4,18.6L17,15.7M22,5V7H19V10H17V7H14V5H17V2H19V5H22Z' /%3E%3C/svg%3E");
-  }
-  ul {
-    padding: 0;
-  }
-  ul ul {
-    padding-left: 48px;
-  }
-  li:hover {
-    background: #f0f5f9;
-  }
-  li.selected {
-    background: #f0f5f9;
-  }
-  li {
-    list-style: none;
-    padding: 4px;
-  }
-  li {
-    border-bottom: 1px solid #0041703a;
-  }
-  li:first-child {
-    border-top: 1px solid #0041703a;
-  }
-  li.sortable-chosen {
-    background: #eeea;
-  }
-  li.sortable-drag {
-    opacity: 0;
-  }
-  li.sortable-ghost {
-  }
-  button.small.icon, button.small.icon::before {
-    height: 16px;
-    width: 16px;
-    padding: 0px;
-  }
-  button.discard.icon {
-    opacity: .7;
-  }
-  button.discard.icon:hover {
-    opacity: 1;
-  }
-  eox-drawtools-list {
-    width: 100%;
-  }
-  .list {
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    font-size: small;
-    gap: 10px;
-
-  }
-  label {
-    gap: 10px;
-  }
-  label, span {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    font-size: small;
-    flex-grow: 1;
-  }
-`, Gt = (i) => {
-  i.hoverInteraction = i.eoxMap.selectInteractions.selectHover, i.clickInteraction = i.eoxMap.selectInteractions.selectClick;
+}), Zt = (r) => {
+  r.hoverInteraction = r.eoxMap.selectInteractions.selectHover, r.clickInteraction = r.eoxMap.selectInteractions.selectClick;
   const t = () => {
-    i.requestUpdate();
+    r.requestUpdate();
   };
-  i.hoverInteraction.selectStyleLayer.on(
+  r.hoverInteraction.selectStyleLayer.on(
     "change",
     t
-  ), i.clickInteraction.selectStyleLayer.on(
+  ), r.clickInteraction.selectStyleLayer.on(
     "change",
     t
   );
-}, Jt = (i, t, e) => {
-  if (i.clickId === t)
+}, Kt = (r, t, e) => {
+  if (r.clickId === t)
     return;
-  const s = e ? [] : [t];
-  i.hoverInteraction.highlightById(s);
-}, Kt = (i, t) => {
-  i.stopPropagation();
-  const e = Number(i.target.getAttribute("index")), s = t.drawnFeatures[e];
-  t.drawLayer.getSource().removeFeature(s), t.drawnFeatures.splice(e, 1), t.requestUpdate();
-}, lt = { duration: 750 }, Qt = (i, t) => {
-  const e = i.get("id"), { clickId: s, drawLayer: r, olMap: n, clickInteraction: o } = t, l = s === e, a = i.getGeometry();
+  const i = e ? [] : [t];
+  r.hoverInteraction.highlightById(i);
+}, Qt = (r, t) => {
+  r.stopPropagation();
+  const e = Number(r.target.getAttribute("index")), i = t.drawnFeatures[e];
+  t.drawLayer.getSource().removeFeature(i), t.drawnFeatures.splice(e, 1), t.requestUpdate();
+}, lt = { duration: 750 }, ct = {
+  type: "FeatureCollection",
+  features: []
+}, Xt = (r, t) => {
+  const e = r.get("id"), { clickId: i, drawLayer: s, olMap: n, clickInteraction: o } = t, l = i === e, a = r.getGeometry();
   if (l) {
-    const d = r.getSource().getExtent();
-    n.getView().fit(d, lt), o.highlightById([]);
+    const h = s.getSource().getExtent();
+    n.getView().fit(h, lt), o.highlightById([]);
   } else {
-    const d = a.getExtent();
-    o.highlightById([e]), n.getView().fit(d, lt);
+    const h = a.getExtent();
+    o.highlightById([e]), n.getView().fit(h, lt);
   }
   t.requestUpdate();
-};
-class gt extends w {
+}, Yt = "ul.list-wrap { padding: 0;}ul.list-wrap li:hover,ul.list-wrap li.selected { background: var(--secondary-bg-color-hover);}ul.list-wrap li { list-style: none; padding: 4px;}ul.list-wrap li { border-bottom: 1.2px solid var(--secondary-color);}ul.list-wrap li:first-child { border-top: 1.2px solid var(--secondary-color);}ul.list-wrap li .list { width: 100%; align-items: center; justify-content: space-between; display: flex; align-items: center; cursor: pointer; font-size: small; gap: 10px;}ul.list-wrap li .list span { display: flex; align-items: center; cursor: pointer; font-size: small; flex-grow: 1;}";
+class bt extends x {
   constructor() {
@@ -874,15 +709,15 @@ super();
      */
-    g(this, "hoverInteraction");
+    b(this, "hoverInteraction");
     /**
      * @type import("../../../map/src/select").EOxSelectInteraction
      */
-    g(this, "clickInteraction");
+    b(this, "clickInteraction");
     /**
      * @type string | number
      */
-    g(this, "hoverId");
+    b(this, "hoverId");
     /**
      * @type string | number
      */
-    g(this, "clickId");
+    b(this, "clickId");
     this.eoxMap = null, this.olMap = null, this.draw = null, this.drawLayer = null, this.drawnFeatures = [], this.modify = null, this.unstyled = !1;
@@ -896,3 +731,3 @@ }
   _handleDelete(e) {
-    Kt(e, this);
+    Qt(e, this), this.dispatchEvent(new CustomEvent("changed", { bubbles: !0 }));
   }
@@ -905,3 +740,3 @@ /**
   _handleFeatureSelectAndDeselect(e) {
-    Qt(e, this);
+    Xt(e, this);
   }
@@ -913,4 +748,4 @@ /**
    */
-  _handleHoverFeature(e, s = !1) {
-    Jt(this, e, s);
+  _handleHoverFeature(e, i = !1) {
+    Kt(this, e, i);
   }
@@ -921,18 +756,24 @@ /**
   firstUpdated() {
-    Gt(this);
+    Zt(this);
   }
+  /**
+   * Overrides createRenderRoot to handle shadow DOM.
+   */
+  createRenderRoot() {
+    return this;
+  }
   render() {
-    var e, s;
-    return this.hoverId = (e = this.hoverInteraction) == null ? void 0 : e.selectedFids[0], this.clickId = (s = this.clickInteraction) == null ? void 0 : s.selectedFids[0], O`
+    var e, i;
+    return this.hoverId = (e = this.hoverInteraction) == null ? void 0 : e.selectedFids[0], this.clickId = (i = this.clickInteraction) == null ? void 0 : i.selectedFids[0], _`
       <style>
-        ${!this.unstyled && K}
+        ${!this.unstyled && Yt}
       </style>
-      <ul>
-        ${this.drawnFeatures.map((r, n) => {
-      const o = n + 1, l = r.get("id"), a = this.hoverId === l, d = this.clickId === l;
+      <ul class="list-wrap">
+        ${this.drawnFeatures.map((s, n) => {
+      const o = n + 1, l = s.get("id"), a = this.hoverId === l, h = this.clickId === l;
       return Wt(
         o,
-        O`
+        _`
               <li
-                class="${a || d ? "selected" : c}"
+                class="${a || h ? "selected" : d}"
                 @mouseover=${() => this._handleHoverFeature(l)}
@@ -943,3 +784,3 @@ @mouseout=${() => this._handleHoverFeature(l, !0)}
                   class="list"
-                  @click="${() => this._handleFeatureSelectAndDeselect(r)}"
+                  @click="${() => this._handleFeatureSelectAndDeselect(s)}"
                 >
@@ -949,3 +790,3 @@ <span class="title">Feature #${o}</span>
                     index=${n}
-                    class="icon small discard"
+                    class="icon smallest discard"
                     @click="${this._handleDelete}"
@@ -964,3 +805,3 @@ >
 }
-g(gt, "properties", {
+b(bt, "properties", {
   eoxMap: { attribute: !1, state: !0 },
@@ -974,9 +815,26 @@ olMap: { attribute: !1, state: !0 },
 });
-customElements.define("eox-drawtools-list", gt);
-const Xt = (i) => {
-  const { multipleFeatures: t, drawnFeatures: e, currentlyDrawing: s } = i, r = !t && (e == null ? void 0 : e.length) > 0 || s, n = !(e != null && e.length) && !s;
-  return { drawDisabled: r, discardDisabled: n };
-};
-var N, B;
-class mt extends w {
+customElements.define("eox-drawtools-list", bt);
+const te = (r) => {
+  const { multipleFeatures: t, drawnFeatures: e, currentlyDrawing: i } = r, s = !t && (e == null ? void 0 : e.length) > 0 || i, n = !(e != null && e.length) && !i;
+  return { drawDisabled: s, discardDisabled: n };
+}, ee = "button,.button { display: inline-flex; position: relative; align-items: center; color: #fff; border-width: 0; outline: none; border-radius: 4px; padding: 16px; height: 36px; cursor: pointer; font-family: inherit; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1.25px; font-weight: 500; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); transition-property: box-shadow, transform, opacity, background; transition-duration: 0.28s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}button:hover:not([disabled]):not(.icon),.button:hover:not([disabled]):not(.icon) { box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); background: var(--primary-btn-color-hover);}button,button:active,.button,.button:active { background: var(--primary-color);}button[disabled],.button[disabled] { opacity: 0.5; cursor: not-allowed;}button.outline,.button.outline { background: transparent; box-shadow: none; color: var(--primary-color); outline: 1px solid var(--primary-color);}button.outline:hover,.button.outline:hover { background: transparent;}button.icon,.button.icon { background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 50%; width: 24px; height: 24px; text-indent: -9999px;}button.icon-text,.button.icon-text { text-indent: 26px;}button.icon:before,button.icon-text:before,.button.icon:before,.button.icon-text:before { position: absolute; text-indent: 0; line-height: initial;}button.icon:before,.button.icon:before { width: 24px; height: 24px; margin-right: 0;}button.icon-text:before,.button.icon-text:before { width: 18px; height: 18px;}button.small,.button.small { height: 28px; padding: 12.4px; font-size: 0.75rem;}button.smallest.icon,button.smallest.icon::before { height: 16px; width: 16px; padding: 0px;}", re = "textarea { height: 90px; resize: none; border-radius: 4px; box-sizing: border-box !important; width: 100%; padding: 5px 7px; border: 1px solid var(--secondary-color); font-size: smaller; background: var(--background-color);}";
+function ie(r) {
+  navigator.clipboard.writeText(r).then(
+    function() {
+    },
+    function(t) {
+      console.error("Could not copy text: ", t);
+    }
+  );
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function ht(r, t, e) {
+  return r ? t(r) : e == null ? void 0 : e(r);
+}
+var I, B;
+class vt extends x {
   constructor() {
@@ -987,8 +845,8 @@ super();
      */
-    H(this, N, !0);
+    S(this, I, !0);
     /**
      * @type boolean | import("lit").nothing
      */
-    H(this, B, !0);
-    this.multipleFeatures = !1, this.drawnFeatures = [], this.currentlyDrawing = !1, this.drawFunc = null, this.unstyled = !1;
+    S(this, B, !0);
+    this.multipleFeatures = !1, this.drawnFeatures = [], this.importFeatures = !1, this.showEditor = !1, this.currentlyDrawing = !1, this.drawFunc = null, this.geoJSON = "", this.unstyled = !1;
   }
@@ -999,40 +857,95 @@ /**
   updateButtonStates() {
-    const { drawDisabled: e, discardDisabled: s } = Xt(this);
-    M(this, N, e), M(this, B, s);
+    const { drawDisabled: e, discardDisabled: i } = te(this);
+    E(this, I, e), E(this, B, i);
   }
+  /**
+   * Overrides createRenderRoot to handle shadow DOM
+   */
+  createRenderRoot() {
+    return this;
+  }
   render() {
     this.updateButtonStates();
     const e = this.currentlyDrawing ? "drawing" : "draw";
-    return O`
+    return _`
       <style>
-        ${!this.unstyled && K}
+        ${!this.unstyled && ee}
+        ${!this.unstyled && re}
       </style>
-      <div>
+      <div class="wrap-btn">
         <slot></slot>
+        <div>
+          <!-- Draw Button -->
+          <button
+            data-cy="drawBtn"
+            class="polygon icon"
+            ?disabled="${g(this, I) || d}"
+            @click="${() => this.drawFunc.start()}"
+          >
+            ${e}
+          </button>
 
-        <!-- Draw Button -->
-        <button
-          data-cy="drawBtn"
-          class="polygon icon"
-          ?disabled="${m(this, N) || c}"
-          @click="${() => this.drawFunc.start()}"
-        >
-          ${e}
-        </button>
+          <!-- Discard Button -->
+          <button
+            data-cy="discardBtn"
+            class="discard icon"
+            ?disabled="${g(this, B) || d}"
+            @click="${() => this.drawFunc.discard()}"
+          >
+            discard
+          </button>
+        </div>
 
-        <!-- Discard Button -->
-        <button
-          data-cy="discardBtn"
-          class="discard icon"
-          ?disabled="${m(this, B) || c}"
-          @click="${() => this.drawFunc.discard()}"
-        >
-          discard
-        </button>
+        <!-- Import Button -->
+        ${ht(
+      this.importFeatures,
+      () => _`
+            <!-- Import Input Field : Hidden -->
+            <input
+              type="file"
+              id="import-file"
+              style="display: none;"
+              @change=${this.drawFunc.import}
+            />
+
+            <!-- Main Import Button -->
+            <button
+              data-cy="importBtn"
+              class="import icon"
+              @click=${() => this.querySelector("#import-file").click()}
+            >
+              import
+            </button>
+          `
+    )}
       </div>
+
+      <!-- Geo JSON Wrapper -->
+      ${ht(
+      this.showEditor,
+      () => _`
+          <div class="json-wrapper">
+            <!-- Geo JSON Editor -->
+            <textarea
+              @drop=${this.drawFunc.import}
+              @input=${this.drawFunc.editor}
+              .value=${this.geoJSON}
+            ></textarea>
+
+            <!-- Geo JSON Copy Button -->
+            <button
+              data-cy="copyBtn"
+              class="icon-copy"
+              @click=${() => ie(this.geoJSON)}
+            >
+              ${this.unstyled ? "copy" : d}
+            </button>
+          </div>
+        `
+    )}
     `;
   }
 }
-N = new WeakMap(), B = new WeakMap(), // Define properties with default values and types
-g(mt, "properties", {
+I = new WeakMap(), B = new WeakMap(), // Define properties with default values and types
+b(vt, "properties", {
   multipleFeatures: { attribute: !1, type: Boolean },
@@ -1042,28 +955,71 @@ drawnFeatures: { attribute: !1, state: !0, type: Array },
   drawFunc: { attribute: !1, type: Object },
+  importFeatures: { attribute: "import-features", type: Boolean },
+  showEditor: { attribute: "show-editor", type: Boolean },
+  geoJSON: { attribute: "geo-json", type: String },
   unstyled: { type: Boolean }
 });
-customElements.define("eox-drawtools-controller", mt);
-const Yt = `
-:host {
-  display: block;
-}
-`, _t = (i) => {
+customElements.define("eox-drawtools-controller", vt);
+const se = `
+  button.discard:before {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF5252' viewBox='0 0 24 24'%3E%3Ctitle%3Etrash-can-outline%3C/title%3E%3Cpath d='M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z' /%3E%3C/svg%3E")
+  }
+  button.polygon:before {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004170' viewBox='0 0 24 24'%3E%3Ctitle%3Eshape-polygon-plus%3C/title%3E%3Cpath d='M17,15.7V13H19V17L10,21L3,14L7,5H11V7H8.3L5.4,13.6L10.4,18.6L17,15.7M22,5V7H19V10H17V7H14V5H17V2H19V5H22Z' /%3E%3C/svg%3E");
+  }
+  button.import:before {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eupload%3C/title%3E%3Cpath fill='%23004170' d='M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z' /%3E%3C/svg%3E");
+  }
+  .wrap-btn {
+    display: flex;
+    justify-content: space-between;
+  }
+  eox-drawtools-list {
+    width: 100%;
+  }
+  .json-wrapper {
+    margin: 0.4rem 0rem;
+    padding: 0.75rem;
+    background: var(--secondary-color-hover);
+    position: relative;
+  }
+  .json-wrapper textarea {
+    height: 200px;
+  }
+  .icon-copy {
+    position: absolute;
+    bottom: 26px;
+    right: 26px;
+    border-radius: 4px;
+    height: 26px;
+    padding: 4px 6px;
+  }
+  .icon-copy:before {
+    width: 14px;
+    min-width: 14px;
+    height: 14px;
+    display: flex margin-right: 6px;
+    color: white;
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Econtent-copy%3C/title%3E%3Cpath d='M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z' fill='white' /%3E%3C/svg%3E")
+   }
+`, ne = (r) => {
   (() => {
-    i.emitDrawnFeatures(), i.draw.setActive(!1), i.currentlyDrawing = !1;
-  })(), i.requestUpdate();
-}, te = (i) => {
+    r.emitDrawnFeatures(), r.multipleFeatures || (r.draw.setActive(!1), r.currentlyDrawing = !1);
+  })(), r.requestUpdate();
+}, oe = (r) => {
   const t = () => {
-    i.initDrawLayer(), i.draw.setActive(!0);
+    r.drawLayer.set("isDrawingEnabled", !0), r.draw.setActive(!0);
   }, e = () => {
-    i.currentlyDrawing = !0, i.requestUpdate();
+    r.currentlyDrawing = !0, r.requestUpdate();
   };
   t(), e();
-}, ee = (i) => {
-  var r, n;
-  const e = document.querySelector(i.for), s = e.map;
-  return i.drawLayer = e.addOrUpdateLayer({
+}, ae = (r, t) => {
+  var n;
+  const i = document.querySelector(r.for), s = i.map;
+  return r.drawLayer = i.addOrUpdateLayer({
     type: "Vector",
     properties: {
       id: "drawLayer",
-      layerControlHide: !0
+      layerControlHide: !0,
+      isDrawingEnabled: !1,
+      multipleFeatures: t
     },
@@ -1079,4 +1035,4 @@ source: {
           id: "drawInteraction",
-          type: i.type,
-          modify: i.allowModify,
+          type: r.type,
+          modify: r.allowModify,
           stopClick: !0
@@ -1111,21 +1067,49 @@ }
     ]
-  }), i.draw = /** @type {import("ol/interaction").Draw} */
+  }), r.draw = /** @type {import("ol/interaction").Draw} */
   /** @type {unknown} */
-  e.interactions.drawInteraction, i.modify = /** @type {import("ol/interaction").Modify} */
+  i.interactions.drawInteraction, r.modify = /** @type {import("ol/interaction").Modify} */
   /** @type {unknown} */
-  e.interactions.drawInteractionmodify, (r = i.draw) == null || r.on("drawend", () => _t(i)), (n = i.modify) == null || n.on("modifyend", () => i.emitDrawnFeatures()), { EoxMap: e, OlMap: s };
-}, se = (i, t, e) => {
-  const s = () => {
-    i.drawnFeatures = [], i.draw.setActive(!1), i.drawLayer.getSource().clear(), t.removeInteraction("drawInteraction"), e.removeLayer(i.drawLayer);
-  }, r = () => {
-    i.emitDrawnFeatures(), i.currentlyDrawing = !1, i.requestUpdate();
+  i.interactions.drawInteractionmodify, (n = r.modify) == null || n.on("modifyend", () => r.onModifyEnd()), i.addEventListener("addfeatures", () => ne(r)), { EoxMap: i, OlMap: s };
+}, le = (r) => {
+  const t = () => {
+    r.drawnFeatures = [], r.draw.setActive(!1), r.drawLayer.getSource().clear(), r.geoJSON = null;
+  }, e = () => {
+    r.emitDrawnFeatures(), r.currentlyDrawing = !1, r.requestUpdate();
   };
-  s(), r();
-}, ie = (i, t) => {
+  t(), e();
+}, ce = (r, t) => {
   setTimeout(() => {
-    i.drawnFeatures = i.drawLayer.getSource().getFeatures(), i.requestUpdate(), t();
+    r.drawnFeatures = r.drawLayer.getSource().getFeatures(), r.updateGeoJSON(), r.requestUpdate(), t();
   }, 0);
-};
-var x, S;
-class re extends w {
+}, he = ':root,:host { --spacing: 1rem; --block-spacing-vertical: calc(var(--spacing) * 2); --block-spacing-horizontal: var(--spacing); --background-color: var(--eox-background-color, white); --color: var(--eox-color, #2c3d49); --h-color: var(--eox-h-color, var(--color)); --hover-transparency: var(--eox-hover-transparency, 20%); --bg-hover-transparency: var(--eox-bg-hover-transparency, 40%); --btn-hover-transparency: var(--eox-btn-hover-transparency, 80%); --primary-color: var(--eox-primary-color, #004170); --primary-color-hover: color-mix( in srgb, var(--primary-color) var(--hover-transparency), transparent ); --primary-bg-color-hover: color-mix( in srgb, var(--primary-color) var(--bg-hover-transparency), transparent ); --primary-btn-color-hover: color-mix( in srgb, var(--primary-color) var(--btn-hover-transparency), transparent ); --secondary-color: var(--eox-secondary-color, #c6d4df); --secondary-color-hover: color-mix( in srgb, var(--secondary-color) var(--hover-transparency), transparent ); --secondary-bg-color-hover: color-mix( in srgb, var(--secondary-color) var(--bg-hover-transparency), transparent ); --secondary-btn-color-hover: color-mix( in srgb, var(--secondary-color) var(--btn-hover-transparency), transparent ); --success: var(--eox-success, #26cc0f); --warning: var(--eox-warning, #f18e32); --error: var(--eox-error, #ff5252); --header-font-family: var(--eox-header-font-family, "Roboto", sans-serif); --body-font-family: var(--eox-body-font-family, "Roboto", sans-serif);}* { font-family: var(--body-font-family); color: var(--eox-color);}h1,h2,h3,h4,h5,h6 { font-family: var(--header-font-family);}span,p,div,main,label { font-family: var(--body-font-family);}@media (min-width: 576px) { .container { max-width: 510px; padding-right: 0; padding-left: 0; --block-spacing-vertical: calc(var(--spacing) * 2.5); }}@media (min-width: 768px) { .container { max-width: 700px; --block-spacing-vertical: calc(var(--spacing) * 3); }}@media (min-width: 992px) { .container { max-width: 920px; --block-spacing-vertical: calc(var(--spacing) * 3.5); }}@media (min-width: 1200px) { .container { max-width: 1130px; --block-spacing-vertical: calc(var(--spacing) * 4); }}.container { width: 100%; margin-right: auto; margin-left: auto; display: block; padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);}h1,h2,h3 { line-height: 120%; margin-top: 0.8rem; margin-bottom: 0.8rem;}p { font-weight: 400; line-height: 170%; margin-top: 0.8rem; margin-bottom: 1.6rem;}body { padding: 0; margin: 0;}.sb-show-main.sb-main-padded { padding: 0;}h1,h2,h3,h4,h5,h6 { --font-weight: 700;}h1 { --font-size: 3rem; --typography-spacing-vertical: 0.5rem;}h2 { --font-size: 2rem; --typography-spacing-vertical: 0.5rem;}h3 { --font-size: 1.75rem; --typography-spacing-vertical: 0.5rem;}h4 { --font-size: 1.5rem; --typography-spacing-vertical: 0.5rem;}h5 { --font-size: 1.25rem; --typography-spacing-vertical: 0.5rem;}h1,h2,h3,h4,h5,h6 { margin-top: 0; margin-bottom: var(--typography-spacing-vertical); color: var(--h-color); font-weight: var(--font-weight); font-size: var(--font-size); font-family: var(--header-font-family);}';
+function de(r, t) {
+  function e(n) {
+    n.preventDefault(), n.stopPropagation();
+  }
+  function i(n) {
+    n.srcElement.style.opacity = "0.4";
+  }
+  function s(n) {
+    n.srcElement.style.opacity = "1";
+  }
+  ["dragenter", "dragover", "dragleave", "drop"].forEach((n) => {
+    t.addEventListener(n, e, !1), ["dragenter", "dragover"].includes(n) ? t.addEventListener(n, i, !1) : t.addEventListener(n, s, !1);
+  }), t.addEventListener("drop", (n) => wt(n, r), !1);
+}
+function pe(r) {
+  r.preventDefault(), r.stopPropagation();
+}
+function wt(r, t) {
+  pe(r);
+  const e = r.dataTransfer ? r.dataTransfer.files : r.target.files;
+  Array.from(e).forEach((i) => ue(i, t));
+}
+function ue(r, t) {
+  const e = new FileReader();
+  e.readAsText(r), e.onloadend = function() {
+    typeof e.result == "string" && t.handleFeatureChange(e.result);
+  };
+}
+var m, L, R;
+class ge extends x {
   constructor() {
@@ -1136,8 +1120,12 @@ super();
      */
-    H(this, x, void 0);
+    S(this, m, void 0);
     /**
      * @type import("ol").Map
      */
-    H(this, S, void 0);
-    this.allowModify = !1, this.for = "eox-map", this.currentlyDrawing = !1, this.draw = null, this.drawLayer = null, this.drawnFeatures = [], this.modify = null, this.multipleFeatures = !1, this.showList = !1, this.type = "Polygon", this.unstyled = !1;
+    S(this, L, void 0);
+    /**
+     * @type string
+     */
+    S(this, R, void 0);
+    this.allowModify = !1, this.for = "eox-map", this.currentlyDrawing = !1, this.draw = null, this.drawLayer = null, this.drawnFeatures = [], this.modify = null, this.multipleFeatures = !1, this.importFeatures = !1, this.showEditor = !1, this.showList = !1, this.type = "Polygon", this.unstyled = !1, this.noShadow = !1;
   }
@@ -1155,3 +1143,6 @@ // Define properties with defaults and types
       multipleFeatures: { attribute: "multiple-features", type: Boolean },
+      importFeatures: { attribute: "import-features", type: Boolean },
+      showEditor: { attribute: "show-editor", type: Boolean },
       showList: { attribute: "show-list", type: Boolean },
+      noShadow: { type: Boolean },
       type: { type: String },
@@ -1162,13 +1153,6 @@ unstyled: { type: Boolean }
   /**
-   * Initializes the drawing layer before starting to draw on the map.
-   */
-  initDrawLayer() {
-    const { EoxMap: e, OlMap: s } = ee(this);
-    M(this, x, e), M(this, S, s);
-  }
-  /**
    * @onClick Event handler triggered to start drawing on the map.
    */
   handleStartDrawing() {
-    te(this);
+    oe(this);
   }
@@ -1180,11 +1164,22 @@ /**
   handleDiscardDrawing() {
-    se(this, m(this, x), m(this, S));
+    le(this);
   }
   /**
-   * @event onDrawEnd triggered when the drawing of a shape is completed.
+   * @param {string} text - The string representation of the features to be parsed.
+   * @param {boolean} replaceFeatures - A boolean flag indicating whether to replace the existing features.
    */
-  onDrawEnd() {
-    _t(this);
+  handleFeatureChange(e, i = !1) {
+    g(this, m).parseTextToFeature(
+      e || JSON.stringify(ct),
+      this.drawLayer,
+      i
+    );
   }
   /**
+   * @param {DragEvent | Event} evt - The event object from the file input interaction.
+   */
+  handleFilesChange(e) {
+    wt(e, this);
+  }
+  /**
    * @event onModifyEnd triggered when the modification of a shape is completed.
@@ -1196,6 +1191,16 @@ */
   /**
+   * Update #geoJSON with stringify feature.
+   */
+  updateGeoJSON() {
+    E(this, R, JSON.stringify(
+      g(this, m).parseFeature(this.drawnFeatures) || ct,
+      void 0,
+      2
+    ));
+  }
+  /**
    * Triggers different events when the drawing of a shape is completed.
    */
   emitDrawnFeatures() {
-    ie(this, () => {
+    ce(this, () => {
       this.dispatchEvent(
@@ -1206,9 +1211,25 @@ new CustomEvent("drawupdate", { detail: this.drawnFeatures })
   }
+  /**
+   * Overrides createRenderRoot to handle shadow DOM creation based on the noShadow property.
+   */
+  createRenderRoot() {
+    return this.noShadow ? this : super.createRenderRoot();
+  }
+  /**
+   * initializes the EOxMap and OlMap instances
+   * And stores them in the private properties #eoxMap and #olMap, respectively.
+   * It then calls requestUpdate to trigger a re-render.
+   */
+  firstUpdated() {
+    const { EoxMap: e, OlMap: i } = ae(this, this.multipleFeatures);
+    E(this, m, e), E(this, L, i), this.importFeatures && de(this, g(this, m)), this.updateGeoJSON(), this.requestUpdate();
+  }
   // Render method for UI display
   render() {
     var e;
-    return O`
+    return _`
       <style>
-        ${Yt}
-        ${!this.unstyled && K}
+        :host { display: block; }
+        ${!this.unstyled && he}
+        ${!this.unstyled && se}
       </style>
@@ -1220,3 +1241,5 @@
       start: () => this.handleStartDrawing(),
-      discard: () => this.handleDiscardDrawing()
+      discard: () => this.handleDiscardDrawing(),
+      editor: (i) => this.handleFeatureChange(i.target.value, !0),
+      import: (i) => this.handleFilesChange(i)
     }}
@@ -1227,8 +1250,11 @@ .unstyled=${this.unstyled}
         .multipleFeatures=${this.multipleFeatures}
+        .importFeatures=${this.importFeatures}
+        .showEditor=${this.showEditor}
+        .geoJSON=${g(this, R)}
       ></eox-drawtools-controller>
 
       <!-- List Component -->
-      ${this.showList && ((e = this.drawnFeatures) != null && e.length) ? O`<eox-drawtools-list
-            .eoxMap=${m(this, x)}
-            .olMap=${m(this, S)}
+      ${this.showList && ((e = this.drawnFeatures) != null && e.length) ? _`<eox-drawtools-list
+            .eoxMap=${g(this, m)}
+            .olMap=${g(this, L)}
             .draw=${this.draw}
@@ -1239,11 +1265,13 @@ .drawLayer=${this.drawLayer}
             .unstyled=${this.unstyled}
-            @changed=${() => this.requestUpdate()}
-          ></eox-drawtools-list>` : c}
+            @changed=${() => {
+      this.updateGeoJSON(), this.requestUpdate();
+    }}
+          ></eox-drawtools-list>` : d}
     `;
   }
 }
-x = new WeakMap(), S = new WeakMap();
-customElements.define("eox-drawtools", re);
+m = new WeakMap(), L = new WeakMap(), R = new WeakMap();
+customElements.define("eox-drawtools", ge);
 export {
-  re as EOxDrawTools
+  ge as EOxDrawTools
 };

package.json

 {
   "name": "@eox/drawtools",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "type": "module",
   "devDependencies": {
     "@eox/eslint-config": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "eslint-plugin-typescript": "^0.14.0",
@@ -10,0 +10,0 @@ "ol": "^8.1.0",

test/_mockMap.js

@@ -16,2 +16,3 @@ // Defining a MockMap class extending HTMLElement
             get: () => "draw",
+            set: () => "",
             getSource: () => ({
@@ -48,2 +49,4 @@ // Simulating clear method to reset features array
     this.removeInteraction = () => {};
+    // Simulate parse features
+    this.parseFeature = () => {};
   }
@@ -50,0 +53,0 @@ }

test/cases/click-discard-btn.js

@@ -10,23 +10,19 @@ import { TEST_SELECTORS } from "../../src/enums";
 const clickDiscardBtnTest = () => {
-  it("clicks the discard button and clears drawn features", () => {
-    cy.get(drawTools)
-      .shadow()
-      .within(() => {
-        cy.get(controller)
-          .shadow()
-          .within(() => {
-            // Click the draw button and verify if it is in the 'drawing' state
-            cy.get(drawBtn).click();
-            cy.get(drawBtn).contains("drawing");
+  cy.get(drawTools)
+    .shadow()
+    .within(() => {
+      cy.get(controller).within(() => {
+        // Click the draw button and verify if it is in the 'drawing' state
+        cy.get(drawBtn).click();
+        cy.get(drawBtn).contains("drawing");
 
-            // Click the discard button and verify if the 'drawing' state is removed
-            cy.get(discardBtn).click();
-            cy.get(drawBtn).should("not.contain", "drawing");
-          });
+        // Click the discard button and verify if the 'drawing' state is removed
+        cy.get(discardBtn).click();
+        cy.get(drawBtn).should("not.contain", "drawing");
       });
+    });
 
-    // Verify if drawn features array is empty after discarding
-    cy.get(drawTools).should(($el) => {
-      expect($el[0].drawnFeatures).to.have.length(0);
-    });
+  // Verify if drawn features array is empty after discarding
+  cy.get(drawTools).should(($el) => {
+    expect($el[0].drawnFeatures).to.have.length(0);
   });
@@ -33,0 +29,0 @@ };

test/cases/click-draw-btn.js

@@ -10,23 +10,19 @@ import { TEST_SELECTORS } from "../../src/enums";
 const clickDrawBtnTest = () => {
-  it("clicks the draw button", () => {
-    cy.get(drawTools)
-      .shadow()
-      .within(() => {
-        cy.get(controller)
-          .shadow()
-          .within(() => {
-            // Verify the initial state of the draw button
-            cy.get(drawBtn).contains("draw");
-            cy.get(drawBtn).should("not.contain", "drawing");
+  cy.get(drawTools)
+    .shadow()
+    .within(() => {
+      cy.get(controller).within(() => {
+        // Verify the initial state of the draw button
+        cy.get(drawBtn).contains("draw");
+        cy.get(drawBtn).should("not.contain", "drawing");
 
-            // Click the draw button and verify the 'drawing' state
-            cy.get(drawBtn).click();
-            cy.get(drawBtn).contains("drawing");
-          });
+        // Click the draw button and verify the 'drawing' state
+        cy.get(drawBtn).click();
+        cy.get(drawBtn).contains("drawing");
       });
+    });
 
-    // TODO: Simulate drawing and add drawn features (not implemented in the current test)
-  });
+  // TODO: Simulate drawing and add drawn features (not implemented in the current test)
 };
 
 export default clickDrawBtnTest;

test/cases/index.js

@@ -6,1 +6,2 @@ // Exported test methods
 export { default as loadDrawToolsTest } from "./load-drawtool"; // Test for loading the drawtools component
+export { default as copyGeoJsonEditorTest } from "./copy-geo-json-editor"; // Test to check whether a valid geo-json present in the clipboard

test/cases/load-drawtool.js

@@ -10,8 +10,6 @@ import { TEST_SELECTORS } from "../../src/enums";
 const loadDrawToolsTest = () => {
-  it("loads the drawtools", () => {
-    // Find the drawTools element and access its shadow DOM
-    cy.get(drawTools).shadow();
-  });
+  // Find the drawTools element and access its shadow DOM
+  cy.get(drawTools).shadow();
 };
 
 export default loadDrawToolsTest;

test/general.cy.js

@@ -7,2 +7,3 @@ // Importing necessary modules, test cases, and enums
   clickDrawBtnTest,
+  copyGeoJsonEditorTest,
   loadDrawToolsTest,
@@ -21,3 +22,5 @@ } from "./cases";
     cy.mount("<mock-map></mock-map>").as("mock-map");
-    cy.mount(`<eox-drawtools for="mock-map"></eox-drawtools>`).as(drawTools);
+    cy.mount(
+      `<eox-drawtools show-editor import-features for="mock-map"></eox-drawtools>`
+    ).as(drawTools);
   });
@@ -34,2 +37,6 @@
     clickDiscardBtnTest());
+
+  // Test case to check whether a valid geo-json present in the clipboard
+  it("check valid geo-json present in the clipboard.", () =>
+    copyGeoJsonEditorTest());
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90077

increased by24.42%

Number of package files

11

increased by10%

Lines of code

1717

increased by3.5%

No dependency changes