wj-elements 0.1.0 → 0.1.1

package/dist/wje-element.js

@@ -1,16 +1,16 @@
-var S = Object.defineProperty;
-var E = (o, e, t) => e in o ? S(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var a = (o, e, t) => (E(o, typeof e != "symbol" ? e + "" : e, t), t), v = (o, e, t) => {
-  if (!e.has(o))
+var v = Object.defineProperty;
+var A = (h, e, t) => e in h ? v(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
+var a = (h, e, t) => (A(h, typeof e != "symbol" ? e + "" : e, t), t), P = (h, e, t) => {
+  if (!e.has(h))
     throw TypeError("Cannot " + t);
 };
-var b = (o, e, t) => {
-  if (e.has(o))
+var w = (h, e, t) => {
+  if (e.has(h))
     throw TypeError("Cannot add the same private member more than once");
-  e instanceof WeakSet ? e.add(o) : e.set(o, t);
+  e instanceof WeakSet ? e.add(h) : e.set(h, t);
 };
-var f = (o, e, t) => (v(o, e, "access private method"), t);
-import { store as y, defaultStoreActions as P } from "./wje-store.js";
+var p = (h, e, t) => (P(h, e, "access private method"), t);
+import { store as b, defaultStoreActions as C } from "./wje-store.js";
 class j {
   constructor(e = {}) {
     a(this, "findByKey", (e, t, s) => {
@@ -40,10 +40,10 @@ class j {
       },
       async: !0,
       referrerPolicy: "same-origin"
-    }).then((r, h) => {
-      var g;
-      let p = (g = r.headers.get("permissions")) == null ? void 0 : g.split(",");
-      if (n(p), r.ok)
+    }).then((r, o) => {
+      var y;
+      let m = (y = r.headers.get("permissions")) == null ? void 0 : y.split(",");
+      if (n(m), r.ok)
         return r.json();
       throw r.json();
     }).then((r) => (this._store.dispatch(t(r)), r)));
@@ -71,7 +71,7 @@ class j {
         "Content-Type": "application/json"
       },
       referrerPolicy: "same-origin"
-    }).then((h) => (h.ok, h.json()));
+    }).then((o) => (o.ok, o.json()));
     return this.dispatch(r, i, s);
   }
   _get(e, t, s) {
@@ -85,8 +85,8 @@ class j {
     }).then(async (n) => {
       let r;
       try {
-        let h = await n.text();
-        return JSON.parse(h);
+        let o = await n.text();
+        return JSON.parse(o);
       } catch {
         return r;
       }
@@ -111,7 +111,7 @@ class j {
     }) : e;
   }
 }
-class T {
+class c {
   constructor() {
   }
   static get permissions() {
@@ -121,7 +121,7 @@ class T {
     ];
   }
   static includesKey(e) {
-    return WjePermissionsApi.permissions.includes(e);
+    return c.permissions.includes(e);
   }
   static getKeys() {
     let e = [];
@@ -131,10 +131,10 @@ class T {
     return this.hasAttribute("show") && JSON.parse(this.getAttribute("show"));
   }
   static isPermissionFulfilled() {
-    return WjePermissionsApi.getKeys.bind(this)().some((e) => WjePermissionsApi.permissions.includes(e)) || WjePermissionsApi.shouldShow.bind(this)();
+    return c.getKeys.bind(this)().some((e) => c.permissions.includes(e)) || c.shouldShow.bind(this)();
   }
 }
-class c {
+class u {
   constructor() {
   }
   /**
@@ -168,16 +168,19 @@ class c {
     return !["false", "0", 0].includes(e);
   }
 }
-var l, u, m;
-class C {
+var l, d, g;
+class T {
   constructor() {
-    b(this, u);
+    w(this, d);
     this.customEventStorage = [], l = this;
   }
   dispatchCustomEvent(e, t, s) {
     e.dispatchEvent(
       new CustomEvent(t, {
-        detail: s,
+        detail: s || {
+          context: e,
+          event: l
+        },
         bubbles: !0,
         composed: !0
       })
@@ -192,19 +195,22 @@ class C {
     return !1;
   }
   addListener(e, t, s, i, n) {
-    if (!e)
-      return;
+    e && (Array.isArray(e) || (e = [e]), e.forEach((r) => {
+      this.writeRecord(r, t, s, i, n);
+    }));
+  }
+  writeRecord(e, t, s, i, n) {
     let r = this.findRecordByElement(e);
     r ? r.listeners[t] = r.listeners[t] || [] : (r = {
       element: e,
       listeners: {}
-    }, r.listeners[t] = [], this.customEventStorage.push(r)), i = i || f(this, u, m);
-    let h = {
+    }, r.listeners[t] = [], this.customEventStorage.push(r)), i = i || p(this, d, g);
+    let o = {
       listener: i,
       options: n,
       event: s
     };
-    this.listenerExists(e, t, h) || (r.listeners[t].push(h), e.addEventListener(t, i));
+    this.listenerExists(e, t, o) || (r.listeners[t].push(o), e.addEventListener(t, i));
   }
   listenerExists(e, t, s) {
     return this.findRecordByElement(e).listeners[t].some((n) => JSON.stringify(n) === JSON.stringify(s));
@@ -212,10 +218,10 @@ class C {
   removeListener(e, t, s, i, n) {
     let r = this.findRecordByElement(e);
     if (r && t in r.listeners) {
-      var h = r.listeners[t].indexOf(i);
-      ~h && r.listeners[t].splice(h, 1), r.listeners[t].length || delete r.listeners[t];
+      var o = r.listeners[t].indexOf(i);
+      ~o && r.listeners[t].splice(o, 1), r.listeners[t].length || delete r.listeners[t];
     }
-    i = i || f(this, u, m), e.removeEventListener(t, i, n);
+    i = i || p(this, d, g), e.removeEventListener(t, i, n);
   }
   removeElement(e) {
     this.customEventStorage = this.customEventStorage.filter((t) => {
@@ -223,8 +229,17 @@ class C {
         return t;
     });
   }
+  // TODO
+  createPromiseFromEvent(e, t) {
+    return new Promise((s) => {
+      let i = () => {
+        e.removeEventListener(t, i), s();
+      };
+      e.addEventListener(t, i);
+    });
+  }
 }
-u = new WeakSet(), m = function(e) {
+d = new WeakSet(), g = function(e) {
   let t = this;
   l.findRecordByElement(t).listeners[e.type].forEach((n, r) => {
     l.dispatchCustomEvent(t, n.event, {
@@ -234,10 +249,10 @@ u = new WeakSet(), m = function(e) {
     }), n.options && n.options.stopPropagation === !0 && e.stopPropagation();
   });
 };
-let k = new C();
-const w = document.createElement("template");
-w.innerHTML = "";
-const d = class d extends HTMLElement {
+let _ = new T();
+const E = document.createElement("template");
+E.innerHTML = "";
+const f = class f extends HTMLElement {
   constructor(t) {
     super();
     a(this, "initWjElement", async (t = !1) => {
@@ -248,8 +263,8 @@ const d = class d extends HTMLElement {
       const i = new CSSStyleSheet();
       i.replaceSync(this.constructor.cssStyleSheet), this.context.adoptedStyleSheets = [i];
     });
-    this.template = t || w, this.isAttached = !1, this.service = new j({
-      store: y
+    this.template = t || E, this.isAttached = !1, this.service = new j({
+      store: b
     }), this.defineDepandencies(), this.rendering = !1, this.runtimeTimeout = null, this.count = 0, this.functionStack = [], this.scheludedRefresh = !1, this._depandencies = {};
   }
   get permission() {
@@ -277,7 +292,7 @@ const d = class d extends HTMLElement {
     return this.isShadowRoot ? this.shadowRoot : this;
   }
   get store() {
-    return y;
+    return b;
   }
   // addAction,
   // deleteAction,
@@ -301,7 +316,7 @@ const d = class d extends HTMLElement {
    * @return {ArrayActions, ObjectActions}
    */
   get defaultStoreActions() {
-    return P;
+    return C;
   }
   get removeClassAfterConnect() {
     var t;
@@ -320,18 +335,12 @@ const d = class d extends HTMLElement {
     }
   }
   defineDepandencies() {
-    this.depandencies && Object.entries(depandencies).forEach((t, s) => d.define(t, s));
+    this.depandencies && Object.entries(depandencies).forEach((t, s) => f.define(t, s));
   }
   beforeDraw() {
   }
   afterDraw() {
   }
-  makeRuntimeTimeout(t = () => {
-  }) {
-    return setTimeout(() => {
-      t();
-    }, 0);
-  }
   refreshUpdatePromise() {
     this.updateComplete = new Promise((t, s) => {
       this.finisPromise = t, this.rejectPromise = s;
@@ -345,10 +354,10 @@ const d = class d extends HTMLElement {
     }, this.refreshUpdatePromise(), await this.initWjElement(!0);
   }
   setupAttributes() {
-    c.getEvents(this).forEach((s, i) => {
+    u.getEvents(this).forEach((s, i) => {
       this.addEventListener(i, (n) => {
-        var r, h;
-        (h = (r = this.getRootNode().host)[s]) == null || h.call(r);
+        var r, o;
+        (o = (r = this.getRootNode().host)[s]) == null || o.call(r);
       });
     });
   }
@@ -356,11 +365,11 @@ const d = class d extends HTMLElement {
   }
   disconnectedCallback() {
     var t, s;
-    (t = this.beforeDisconnect) == null || t.call(this), this.isAttached && (this.context.innerHTML = ""), this.isAttached = !1, (s = this.afterDisconnect) == null || s.call(this);
+    (t = this.beforeDisconnect) == null || t.call(this), this.isAttached && (this.context.innerHTML = ""), this.drawingStatus = "DISCONNECTED", this.isAttached = !1, (s = this.afterDisconnect) == null || s.call(this);
   }
   /**
-      * Lifecycle method, called whenever an observed property changes
-      */
+   * Lifecycle method, called whenever an observed property changes
+   */
   attributeChangedCallback(t, s, i) {
     if (!this.isAttached && s !== i) {
       this.scheludedRefresh = !0;
@@ -373,38 +382,38 @@ const d = class d extends HTMLElement {
     this.refreshUpdatePromise(), this.drawingStatus != "AFTER" ? ((t = this.afterDisconnect) == null || t.call(this), await this.initWjElement(!0)) : ((s = this.unregister) == null || s.call(this), await this.initWjElement(!0));
   }
   /**
-      * To be implemented by the child class
-      */
+   * To be implemented by the child class
+   */
   draw(t, s, i) {
     return null;
   }
   display(t = !1, s) {
-    this.isProcessingFlow(s) || (t && this.isShadowRoot && ([...this.context.children].forEach(this.context.removeChild.bind(this.context)), this.isAttached = !1), this.isAttached, this.context.append(this.template.content.cloneNode(!0)), this.isPermissionCheck || this.isShow ? T.isPermissionFulfilled.bind(this)(this.permission) ? this._resolveRender(s) : this.remove() : this._resolveRender(s));
-  }
-  render(t) {
-    if (this.drawingStatus = "DRAWING", this.isProcessingFlow(t))
-      return;
-    let s = this.draw(this.context, this.store, c.getAttributes(this)) || "", i;
-    if (s instanceof HTMLElement || s instanceof DocumentFragment)
-      i = s;
-    else {
-      let r = document.createElement("template");
-      r.innerHTML = s, i = r.content.cloneNode(!0);
-    }
-    let n = i;
-    this.isProcessingFlow(t) || this.context.appendChild(n);
+    this.isProcessingFlow(s) || (t && ([...this.context.childNodes].forEach(this.context.removeChild.bind(this.context)), this.isAttached = !1), this.context.append(this.template.content.cloneNode(!0)), this.isPermissionCheck || this.isShow ? c.isPermissionFulfilled.bind(this)(this.permission) ? this._resolveRender(s) : this.remove() : this._resolveRender(s));
+  }
+  async render(t) {
+    this.drawingStatus = "DRAWING", !this.isProcessingFlow(t) && await Promise.resolve(this.draw(this.context, this.store, u.getAttributes(this))).then((s) => {
+      let i = s || "", n;
+      if (i instanceof HTMLElement || i instanceof DocumentFragment)
+        n = i;
+      else {
+        let o = document.createElement("template");
+        o.innerHTML = i, n = o.content.cloneNode(!0);
+      }
+      let r = n;
+      this.isProcessingFlow(t) || this.context.appendChild(r);
+    });
   }
   /**
-      * Turns a string split with "-" into camel case notation
-      */
+   * Turns a string split with "-" into camel case notation
+   */
   sanitizeName(t) {
     let s = t.split("-");
     return [s.shift(), ...s.map((i) => i[0].toUpperCase() + i.slice(1))].join("");
   }
   /**
-      * Creates one property on this class for every
-      * HTML property defined on the element
-      */
+   * Creates one property on this class for every
+   * HTML property defined on the element
+   */
   setUpAccessors() {
     this.getAttributeNames().forEach((s) => {
       const i = this.sanitizeName(s);
@@ -418,25 +427,27 @@ const d = class d extends HTMLElement {
     return !this.functionStack.find((s) => s == t);
   }
   _resolveRender(t) {
-    this.isProcessingFlow(t) || (this.params = c.getAttributes(this), Promise.resolve(this.beforeDraw(this.context, this.store, c.getAttributes(this))).then((s) => {
-      var i;
-      this.drawingStatus = "BEFORE", this.render(t), !this.isProcessingFlow(t) && Promise.resolve((i = this.afterDraw) == null ? void 0 : i.call(this, this.context, this.store, c.getAttributes(this))).then(
-        (n, r, h) => {
-          this.drawingStatus = "AFTER", this.finisPromise(), this.rendering = !1, this.isAttached = !0, this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect), this.scheludedRefresh && (this.refresh(), this.scheludedRefresh = !1);
-        }
-      );
+    this.isProcessingFlow(t) || (this.params = u.getAttributes(this), Promise.resolve(this.beforeDraw(this.context, this.store, u.getAttributes(this))).then((s) => {
+      this.drawingStatus = "BEFORE", Promise.resolve(this.render(t)).then((i) => {
+        var n;
+        this.isProcessingFlow(t) || Promise.resolve((n = this.afterDraw) == null ? void 0 : n.call(this, this.context, this.store, u.getAttributes(this))).then(
+          (r, o, m) => {
+            this.drawingStatus = "AFTER", this.finisPromise(), this.rendering = !1, this.isAttached = !0, this.removeClassAfterConnect && this.classList.remove(...this.removeClassAfterConnect), this.scheludedRefresh && (this.refresh(), this.scheludedRefresh = !1);
+          }
+        );
+      });
     }));
   }
 };
-a(d, "processTemplates", (t, s) => {
+a(f, "processTemplates", (t, s) => {
   const i = document.createElement("template");
   return i.innerHTML = [s.innerHTML, (t == null ? void 0 : t.innerHTML) || ""].join(""), i;
 });
-let A = d, x = "true";
+let S = f, k = "true";
 export {
-  c as WjElementUtils,
-  T as WjPermissionsApi,
-  x as __esModule,
-  A as default,
-  k as event
+  u as WjElementUtils,
+  c as WjePermissionsApi,
+  k as __esModule,
+  S as default,
+  _ as event
 };

package/dist/wje-file-upload-item.js

@@ -6,8 +6,7 @@ import { L as x } from "./localize-7fxVJArK.js";
 import E from "./wje-format-digital.js";
 import z from "./wje-button.js";
 import A from "./wje-slider.js";
-import "./wje-icon.js";
-import { I as C } from "./icon.element-DOiXP3pi.js";
+import C from "./wje-icon.js";
 const L = ':host{width:100%}.native-file-upload-item{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 .5rem;grid-template-areas:"image name actions" "image size actions" "progress progress progress";padding:.5rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}.image{grid-area:image;align-items:center;display:flex}::slotted([slot="img"]){--wje-img-border-radius: var(--wje-border-radius-medium) !important}.name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.size{grid-area:size;display:flex}.actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end}.file-progress{grid-area:progress}wje-icon{margin-right:.25rem}wje-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wje-slider{flex-basis:100%;margin-top:.5rem}:is()::-webkit-slider-thumb{visibility:hidden}:is()::-moz-range-thumb{visibility:hidden}:is()::-ms-thumb{visibility:hidden}wje-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}';
 class g extends v {
   /**
@@ -107,7 +106,7 @@ class g extends v {
    * Called after the component has been drawn.
    */
   afterDraw() {
-    this.button.addEventListener("wje:button-click", this.onDelete);
+    this.button.addEventListener("wje-button:click", this.onDelete);
   }
 }
 g.define("wje-file-upload-item", g);

package/dist/wje-file-upload.js

@@ -1,10 +1,10 @@
 var v = Object.defineProperty;
-var w = (r, s, e) => s in r ? v(r, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[s] = e;
-var h = (r, s, e) => (w(r, typeof s != "symbol" ? s + "" : s, e), e);
+var w = (s, r, e) => r in s ? v(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var h = (s, r, e) => (w(s, typeof r != "symbol" ? r + "" : r, e), e);
 import x from "./wje-element.js";
-import { L as A } from "./localize-7fxVJArK.js";
-import E from "./wje-button.js";
-function z() {
+import { L as z } from "./localize-7fxVJArK.js";
+import A from "./wje-button.js";
+function L() {
   return [
     {
       type: ["jpg", "jpeg", "png", "gif", "bpm", "tiff", "svg"],
@@ -52,42 +52,39 @@ function z() {
     }
   ];
 }
-function L(r) {
-  let s;
-  return r.toLowerCase() !== "folder" ? z().forEach((e) => {
-    e.type.includes(r.toLowerCase()) && (s = e.name);
-  }) : s = "folder", s;
+function E(s) {
+  let r;
+  return s.toLowerCase() !== "folder" ? L().forEach((e) => {
+    e.type.includes(s.toLowerCase()) && (r = e.name);
+  }) : r = "folder", r;
 }
-function F(r, s) {
-  console.log("FILE", r, s);
-  const e = r.type.split("/")[0];
-  console.log("BASE MIME TYPE", e);
-  let t = Array.isArray(s) ? s : s.split(",");
-  if (console.log("ACCEPTED TYPES", t), t.length === 0)
+function j(s, r) {
+  const e = s.type.split("/")[0];
+  let t = Array.isArray(r) ? r : r.split(",");
+  if (t.length === 0)
     throw new Error("acceptedFileTypes is empty");
   for (let i of t)
-    if (i.includes(e + "/*") || i.includes(r.type) || i.includes(r.type.split("/")[1]))
+    if (i.includes(e + "/*") || i.includes(s.type) || i.includes(s.type.split("/")[1]))
       return !0;
   return !1;
 }
-function j(r, s, e) {
-  console.log("UPLOAD FILE:", r, s, e);
+function F(s, r, e) {
   let t = 0;
-  const i = new Array(Math.ceil(r.size / s)).fill(0), l = (a, p) => {
-    const n = new FileReader(), u = a / s, o = r.slice(a, p);
-    n.onload = (c) => {
-      const d = new XMLHttpRequest();
-      d.open("POST", "/upload", !0), d.setRequestHeader("Content-Range", `${a}-${p}/${r.size}`), d.upload.onprogress = (m) => {
+  const i = new Array(Math.ceil(s.size / r)).fill(0), n = (a, p) => {
+    const l = new FileReader(), u = a / r, d = s.slice(a, p);
+    l.onload = (c) => {
+      const o = new XMLHttpRequest();
+      o.open("POST", "/upload", !0), o.setRequestHeader("Content-Range", `${a}-${p}/${s.size}`), o.upload.onprogress = (m) => {
         if (m.lengthComputable) {
           const g = m.loaded / m.total * 100;
           i[u] = g, i.reduce((b, y) => b + y, 0) / i.length;
         }
-      }, d.onload = () => {
-        d.status == 200 || d.status == 201 ? (i[u] = 100, a += s, a < r.size ? (e.setAttribute("uploaded", a), l(a, Math.min(a + s, r.size))) : (e.setAttribute("uploaded", a), console.log("Upload complete"))) : console.error("Error during upload: ", d.statusText);
-      }, d.send(c.target.result);
-    }, n.readAsArrayBuffer(o);
+      }, o.onload = () => {
+        o.status == 200 || o.status == 201 ? (i[u] = 100, a += r, a < s.size ? (e.setAttribute("uploaded", a), n(a, Math.min(a + r, s.size))) : e.setAttribute("uploaded", a)) : console.error("Error during upload: ", o.statusText);
+      }, o.send(c.target.result);
+    }, l.readAsArrayBuffer(d);
   };
-  l(t, Math.min(t + s, r.size));
+  n(t, Math.min(t + r, s.size));
 }
 const C = ':host{width:100%}.native-file-upload{width:100%}.file-label{background:var(--wje-color-contrast-0);border:1px dashed var(--wje-border-color);border-radius:var(--wje-border-radius-medium);align-items:center;justify-content:center;display:flex;padding:1rem;margin-bottom:.5rem;flex-direction:column}.file-preview{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:0 0;grid-template-areas:"image name name" "image size size" "progress progress progress"}.file-image{grid-area:image;align-items:center;display:flex}.file-name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{grid-area:size;display:flex}.file-progress{grid-area:progress}wje-icon{margin-right:.25rem}wje-img{margin-right:.25rem}.file-info>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}wje-slider{flex-basis:100%;margin-top:.5rem}:is()::-webkit-slider-thumb{visibility:hidden}:is()::-moz-range-thumb{visibility:hidden}:is()::-ms-thumb{visibility:hidden}wje-img{width:50px;height:50px;display:flex;align-items:center;padding:.25rem;border:1px solid var(--wje-border-color);border-radius:var(--wje-border-radius-medium)}';
 class f extends x {
@@ -102,7 +99,7 @@ class f extends x {
      * @type {Object}
      */
     h(this, "depandencies", {
-      "wje-button": E
+      "wje-button": A
     });
     h(this, "className", "FileUpload");
     /**
@@ -125,7 +122,7 @@ class f extends x {
         return;
       }
     });
-    this.localizer = new A(this);
+    this.localizer = new z(this);
   }
   /**
    * Setter for acceptedTypes attribute.
@@ -200,16 +197,16 @@ class f extends x {
    * @returns {DocumentFragment} The fragment containing the component.
    */
   draw(e, t, i) {
-    let l = document.createDocumentFragment(), a = document.createElement("div");
+    let n = document.createDocumentFragment(), a = document.createElement("div");
     a.classList.add("native-file-upload"), a.setAttribute("part", "native");
     let p = document.createElement("div");
     p.classList.add("file-label");
-    let n = document.createElement("wje-button");
-    n.innerText = this.label || this.localizer.translate("wj.file.upload.button");
-    let u = document.createElement("slot"), o = document.createElement("input");
-    o.setAttribute("type", "file"), o.setAttribute("multiple", ""), o.setAttribute("style", "display:none;"), n.appendChild(u), n.appendChild(o), this.fileInput = o;
+    let l = document.createElement("wje-button");
+    l.innerText = this.label || this.localizer.translate("wj.file.upload.button");
+    let u = document.createElement("slot"), d = document.createElement("input");
+    d.setAttribute("type", "file"), d.setAttribute("multiple", ""), d.setAttribute("style", "display:none;"), l.appendChild(u), l.appendChild(d), this.fileInput = d;
     let c = document.createElement("div");
-    return c.classList.add("file-list"), p.appendChild(u), p.appendChild(n), a.appendChild(o), a.appendChild(p), a.appendChild(c), l.appendChild(a), this.native = a, this.fileList = c, this.button = n, l;
+    return c.classList.add("file-list"), p.appendChild(u), p.appendChild(l), a.appendChild(d), a.appendChild(p), a.appendChild(c), n.appendChild(a), this.native = a, this.fileList = c, this.button = l, n;
   }
   /**
    * Method to perform actions after the component is drawn.
@@ -243,10 +240,10 @@ class f extends x {
   uploadFiles(e) {
     e.length !== 0 && Array.from(e).forEach((t) => {
       this.assertFilesValid(t);
-      let i, l = new FileReader();
-      l.onload = (a) => {
-        i = this.createPreview(t, l), this.fileList.appendChild(i), j(t, this.chunkSize, i);
-      }, l.readAsDataURL(t);
+      let i, n = new FileReader();
+      n.onload = (a) => {
+        i = this.createPreview(t, n), this.fileList.appendChild(i), F(t, this.chunkSize, i);
+      }, n.readAsDataURL(t);
     });
   }
   /**
@@ -257,7 +254,7 @@ class f extends x {
    */
   createPreview(e, t) {
     let i = document.createElement("wje-file-upload-item");
-    return i.setAttribute("name", e.name), i.setAttribute("size", e.size), i.setAttribute("uploaded", "0"), i.setAttribute("progress", "0"), i.innerHTML = `<wje-icon slot="img" name="${L(e.type.split("/")[1])}" size="large"></wje-icon>`, i;
+    return i.setAttribute("name", e.name), i.setAttribute("size", e.size), i.setAttribute("uploaded", "0"), i.setAttribute("progress", "0"), i.innerHTML = `<wje-icon slot="img" name="${E(e.type.split("/")[1])}" size="large"></wje-icon>`, i;
   }
   /**
    * Method to create a thumbnail for the file.
@@ -276,7 +273,7 @@ class f extends x {
    */
   assertFilesValid(e) {
     const { name: t, size: i } = e;
-    if (!F(e, this.acceptedTypes))
+    if (!j(e, this.acceptedTypes))
       throw new Error(`❌ FILE: "${t}" Valid file types are: "${this.acceptedTypes}"`);
     if (i > this.maxFileSize)
       throw new Error(`❌ File "${t}" could not be uploaded. Only images up to ${this.maxFileSize} MB are allowed. Nie je to ${i}`);

package/dist/wje-icon-picker.js

@@ -6,7 +6,7 @@ import u from "./wje-infinite-scroll.js";
 import v from "./wje-input.js";
 import f from "./wje-tooltip.js";
 import "./wje-popup.js";
-import { P as k } from "./popup.element-BXak-Fgc.js";
+import { P as k } from "./popup.element-Dj9j__Dh.js";
 const x = ":host{--wje-icon-picker-radius: var(--wje-border-radius-small);--wje-icon-picker-icon-size: 1.5rem;--wje-icon-picker-border-width: 1px;--wje-icon-picker-border-style: solid;--wje-icon-picker-border-color: var(--wje-border-color);--wje-icon-picker-padding: .25rem;padding:0 1rem}.anchor{width:var(--wje-icon-picker-icon-size);height:var(--wje-icon-picker-icon-size);padding:var(--wje-icon-picker-padding);border-width:var(--wje-icon-picker-border-width);border-style:var(--wje-icon-picker-border-style);border-color:var(--wje-icon-picker-border-color);box-sizing:border-box;border-radius:var(--wje-icon-picker-radius)}.picker{width:320px;height:271px;box-shadow:0 0 5px #0000000d,0 5px 20px #0000001a;border-radius:var(--wje-icon-picker-radius);border-width:var(--wje-icon-picker-border-width);border-style:var(--wje-icon-picker-border-style);border-color:var(--wje-icon-picker-border-color);overflow:auto;padding:1rem;background:var(--wje-background)}.icon-items{--icon-min-width: 2rem;display:grid;grid-gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(var(--icon-min-width),1fr))}.icon-item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;color:inherit;padding:.25rem;min-height:var(--wje-icon-picker-icon-size);min-width:var(--wje-icon-picker-icon-size);text-decoration:none}.icon-item:hover{border-radius:.25rem;background:var(--wje-border-color)}.wje-size{--wje-icon-size: 24px !important}icon-item svg{width:var(--wje-icon-picker-icon-size);height:var(--wje-icon-picker-icon-size)}wje-input{--wje-input-border-radius: 4px;--wje-input-margin-bottom: 0}wje-infinite-scroll{margin-top:1rem}wje-select{--wje-select-border-width: 0 0 1px 0 !important;--wje-select-border-radius: 0 !important;margin-bottom:1rem}.anchor wje-icon{--wje-icon-size: 100% !important}";
 class m extends b {
   /**