wj-elements 0.1.0 → 0.1.2

package/dist/wje-icon.js

@@ -1,5 +1,117 @@
-import { I as e } from "./icon.element-DOiXP3pi.js";
-e.define("wje-icon", e);
+var u = Object.defineProperty;
+var g = (e, t, r) => t in e ? u(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var h = (e, t, r) => (g(e, typeof t != "symbol" ? t + "" : t, r), r);
+import m from "./wje-element.js";
+const n = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
+let a;
+const j = (e) => c(e) && (e = e.trim(), v(e)) ? e : null, v = (e) => e.length > 0 && /(\/|\.)/.test(e), p = (e) => e.startsWith("data:image/svg+xml"), z = (e) => e.indexOf(";utf8,") !== -1, c = (e) => typeof e == "string", b = (e) => {
+  const t = document.createElement("div");
+  t.innerHTML = e;
+  const r = t.firstElementChild;
+  return r && r.nodeName.toLowerCase() === "svg" && (r.getAttribute("class"), f(r)) ? t.innerHTML : "";
+}, f = (e) => {
+  if (e.nodeType === 1) {
+    if (e.nodeName.toLowerCase() === "script")
+      return !1;
+    for (let t = 0; t < e.attributes.length; t++) {
+      const r = e.attributes[t].name;
+      if (c(r) && r.toLowerCase().indexOf("on") === 0)
+        return !1;
+    }
+    for (let t = 0; t < e.childNodes.length; t++)
+      if (!f(e.childNodes[t]))
+        return !1;
+  }
+  return !0;
+}, y = (e, t) => {
+  let r = d.get(e);
+  if (!r)
+    if (typeof fetch < "u" && typeof document < "u")
+      if (p(e) && z(e)) {
+        a || (a = new DOMParser());
+        const s = a.parseFromString(e, "text/html").querySelector("svg");
+        return s && n.set(e, s.outerHTML), Promise.resolve();
+      } else
+        r = fetch(e).then((o) => {
+          if (o.ok)
+            return o.text().then((s) => {
+              s && t !== !1 && (s = b(s)), n.set(e, s || "");
+            });
+          n.set(e, "");
+        }), d.set(e, r);
+    else
+      return n.set(e, ""), Promise.resolve();
+  return r;
+}, L = (e) => {
+  let t = j(e.src);
+  return t || (t = x(e.name), t ? S(t, e.hasAttribute("filled")) : null);
+}, x = (e) => !c(e) || e.trim() === "" || e.replace(/[a-z]|-|\d/gi, "") !== "" ? null : e, S = (e, t = !1) => {
+  const r = `/assets/img/icons/${t ? "filled" : "outline"}/${e}.svg`;
+  let o = new URL(import.meta.url), s = o.pathname, i = s.substring(0, s.lastIndexOf("/"));
+  return new URL(o.origin + i + r).href;
+}, C = ":host(.wje-color-primary){--wje-icon-color: var(--wje-color-primary)}:host(.wje-color-complete){--wje-icon-color: var(--wje-color-complete)}:host(.wje-color-success){--wje-icon-color: var(--wje-color-success)}:host(.wje-color-warning){--wje-icon-color: var(--wje-color-warning)}:host(.wje-color-danger){--wje-icon-color: var(--wje-color-danger)}:host(.wje-color-info){--wje-icon-color: var(--wje-color-info)}:host{--wje-icon-size: 1rem;--wje-icon-width: var(--wje-icon-size, 100%);--wje-icon-height: var(--wje-icon-size, 100%);//background: transparent !important;display:inline-block;width:var(--wje-icon-width);height:var(--wje-icon-height);contain:strict;fill:currentColor;box-sizing:content-box!important}.icon-inner,svg{display:block;width:var(--wje-icon-width);height:var(--wje-icon-height)}:host(.wje-size-small){--wje-icon-size: 18px}:host(.wje-size-large){--wje-icon-size: 32px}:host(.wje-size){font-size:var(--wje-icon-size)}:host(.wje-color){color:var(--wje-icon-color)!important}";
+class w extends m {
+  /**
+   * Creates an instance of IconElement.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    h(this, "className", "Icon");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return C;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["name"];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(r, o, s) {
+    let i = document.createDocumentFragment();
+    return this.classList.add("lazy-loaded-image", "lazy"), this.element = document.createElement("div"), this.element.classList.add("icon-inner"), this.url = L(this), this.classList.add("wje-size"), this.color && this.classList.add("wje-color-" + this.color, "wje-color"), this.size && this.classList.add("wje-size-" + this.size), i.appendChild(this.element), i;
+  }
+  /**
+   * Called after the component has been drawn.
+   */
+  afterDraw() {
+    let r = new IntersectionObserver((o, s) => {
+      o.forEach((i) => {
+        i.isIntersecting && (y(this.url).then((E) => {
+          var l;
+          this.element.innerHTML = n == null ? void 0 : n.get(this.url), (l = this.element.querySelector("svg")) == null || l.setAttribute("part", "svg");
+        }), this.classList.remove("lazy"), r.unobserve(i.target));
+      });
+    });
+    r.observe(this.element);
+  }
+}
+w.define("wje-icon", w);
 export {
-  e as default
+  w as default
 };

package/dist/wje-img-comparer.js

@@ -2,8 +2,7 @@ var u = Object.defineProperty;
 var f = (i, e, t) => e in i ? u(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var l = (i, e, t) => (f(i, typeof e != "symbol" ? e + "" : e, t), t);
 import h from "./wje-element.js";
-import "./wje-icon.js";
-import { I as g } from "./icon.element-DOiXP3pi.js";
+import g from "./wje-icon.js";
 function j(i, e) {
   function t(o) {
     const d = i.getBoundingClientRect(), r = i.ownerDocument.defaultView, n = d.left + r.pageXOffset, m = d.top + r.pageYOffset, c = o.pageX - n, p = o.pageY - m;

package/dist/wje-infinite-scroll.js

@@ -1,9 +1,9 @@
-var g = Object.defineProperty;
-var m = (l, r, t) => r in l ? g(l, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[r] = t;
-var h = (l, r, t) => (m(l, typeof r != "symbol" ? r + "" : r, t), t);
-import p, { event as f } from "./wje-element.js";
-const w = ":host{--wje-infinite-scroll-width: 100%;--wje-infinite-scroll-height: 300px;overflow-x:auto;width:var(--wje-infinite-scroll-width);height:var(--wje-infinite-scroll-height);display:block}";
-class u extends p {
+var u = Object.defineProperty;
+var p = (o, r, t) => r in o ? u(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
+var h = (o, r, t) => (p(o, typeof r != "symbol" ? r + "" : r, t), t);
+import f, { WjElementUtils as w, event as d } from "./wje-element.js";
+const y = ":host{--wje-infinite-scroll-width: 100%;--wje-infinite-scroll-height: 300px;--wje-infinite-scroll-loading-bg: rgba(0, 0, 0, 0);overflow-x:auto;width:var(--wje-infinite-scroll-width);height:var(--wje-infinite-scroll-height);display:block}.loading{position:sticky;display:none;justify-content:center;align-items:center;width:100%;height:100%;top:0;left:0;z-index:9999;background-color:var(--wje-infinite-scroll-loading-bg)}.loading.show{display:flex}[name=ending]{display:none;margin-top:1rem;text-align:center}[name=ending].show{display:block}";
+class g extends f {
   /**
    * Creates an instance of InfiniteScroll.
    *
@@ -31,21 +31,39 @@ class u extends p {
      * @param {Event} e - The event.
      */
     h(this, "onScroll", (t) => {
-      const { scrollTop: s, scrollHeight: e, clientHeight: i } = t.target;
-      s + i >= e - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage) && (this.currentPage++, this.loadPages(this.currentPage));
+      const { scrollTop: e, scrollHeight: i, clientHeight: s } = t.target;
+      e + s >= i - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage) && (this.currentPage++, this.loadPages(this.currentPage));
     });
-    this.totalPages = 0, this.isLoading = [], String.prototype.interpolate = function(s) {
-      let e = this, i = e.match(/\{{.*?\}}/g);
-      if (i)
-        for (let a of i) {
-          let o = a.replace("{{", "").replace("}}", ""), n = "";
-          o.split(".").forEach((c) => {
-            n = n == "" ? s[c] : n[c];
-          }), e = e.replace(a, n);
+    this.totalPages = 0, this.isLoading = [], this._response = {}, this.iterate = null, this._infiniteScrollTemplate = null, String.prototype.interpolate = function(e) {
+      let i = this, s = i.match(/\{{.*?\}}/g);
+      if (s)
+        for (let n of s) {
+          let c = n.replace("{{", "").replace("}}", ""), a = "";
+          c.split(".").forEach((l) => {
+            a = a == "" ? e[l] : a[l];
+          }), i = i.replace(n, a);
         }
-      return e;
+      return i;
     };
   }
+  set infiniteScrollTemplate(t) {
+    this._infiniteScrollTemplate = t;
+  }
+  get infiniteScrollTemplate() {
+    return this._infiniteScrollTemplate;
+  }
+  set response(t) {
+    this._response = t;
+  }
+  get response() {
+    return this._response;
+  }
+  set objectName(t) {
+    this.setAttribute("object-name", t);
+  }
+  get objectName() {
+    return this.getAttribute("object-name") || "data";
+  }
   /**
    * Returns the CSS styles for the component.
    *
@@ -53,7 +71,7 @@ class u extends p {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return w;
+    return y;
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -77,8 +95,9 @@ class u extends p {
    * @param {Object} store - The store for drawing.
    * @param {Object} params - The parameters for drawing.
    */
-  beforeDraw(t, s, e) {
-    this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = this.iterate.outerHTML, this.iterate.remove(), this.setAttribute("style", "height: " + this.height);
+  beforeDraw(t, e, i) {
+    var s, n;
+    this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = (s = this.iterate) == null ? void 0 : s.outerHTML, (n = this.iterate) == null || n.remove(), this.setAttribute("style", "height: " + this.height);
   }
   /**
    * Draws the component.
@@ -88,9 +107,17 @@ class u extends p {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(t, s, e) {
-    let i = document.createDocumentFragment(), a = document.createElement("slot"), o = document.createElement("div");
-    return o.classList.add("loader"), i.appendChild(o), i.appendChild(a), this.loaderEl = o, i;
+  draw(t, e, i) {
+    let s = document.createDocumentFragment(), n = document.createElement("div");
+    n.classList.add("native"), n.setAttribute("part", "native-infinite-scroll");
+    let c = document.createElement("slot"), a = document.createElement("slot");
+    if (a.setAttribute("name", "ending"), w.hasSlot(this, "loader")) {
+      let l = document.createElement("div");
+      l.classList.add("loading");
+      let m = document.createElement("slot");
+      m.setAttribute("name", "loader"), l.appendChild(m), this.loadingEl = l, s.appendChild(l);
+    }
+    return n.appendChild(c), n.appendChild(a), s.appendChild(n), this.endingEl = a, s;
   }
   /**
    * Called after the component has been drawn.
@@ -105,23 +132,25 @@ class u extends p {
    * @returns {Promise<Object>} The response from the server.
    */
   async getPages(t) {
-    let s = this.url.includes("?");
-    const e = await fetch(`${this.url}${s ? "&" : "?"}page=${t}&size=${this.size}${this == null ? void 0 : this.queryParams}`);
-    if (!e.ok)
-      throw new Error(`An error occurred: ${e.status}`);
-    return await e.json();
+    let e = this.url.includes("?");
+    const i = await fetch(`${this.url}${e ? "&" : "?"}page=${t}&size=${this.size}${this == null ? void 0 : this.queryParams}`);
+    if (!i.ok)
+      throw new Error(`An error occurred: ${i.status}`);
+    return await i.json();
   }
   /**
    * Hides the loader.
    */
   hideLoader() {
-    this.loaderEl.classList.remove("show");
+    var t;
+    (t = this == null ? void 0 : this.loadingEl) == null || t.classList.remove("show");
   }
   /**
    * Shows the loader.
    */
   showLoader() {
-    this.loaderEl.classList.add("show");
+    var t;
+    (t = this == null ? void 0 : this.loadingEl) == null || t.classList.add("show");
   }
   /**
    * Checks if there are more pages to load.
@@ -130,7 +159,7 @@ class u extends p {
    * @returns {boolean} Whether there are more pages to load.
    */
   hasMorePages(t) {
-    return this.totalPages === 0 || t <= this.totalPages;
+    return this.totalPages === 0 || t < this.totalPages;
   }
   /**
    * Loads the pages.
@@ -141,23 +170,24 @@ class u extends p {
     this.showLoader();
     try {
       if (this.hasMorePages(t) || typeof this.setCustomData == "function") {
-        let s, e;
+        let e;
         typeof this.setCustomData == "function" ? e = await this.setCustomData(t) : e = await this.getPages(t), this.totalPages = e.totalPages, this.currentPage = t;
         const i = new DOMParser();
-        let a = this;
-        this.hasAttribute("placement") && (a = this.querySelector(this.placement)), e.data.forEach((o) => {
-          const n = this.infiniteScrollTemplate.interpolate(o), d = i.parseFromString(n, "text/html").querySelector(this.iterate.tagName.toLowerCase());
-          f.addListener(d, "click", "wje-infinite-scroll:click-item", null, { stopPropagation: !0 }), a.insertAdjacentElement("beforeend", d);
+        let s = this;
+        this.hasAttribute("placement") && (s = this.querySelector(this.placement)), d.dispatchCustomEvent(this, "wje-infinite-scroll:load", e), this.response = e, e[this.objectName].forEach((n) => {
+          const c = this.infiniteScrollTemplate.interpolate(n), l = i.parseFromString(c, "text/html").activeElement.firstElementChild;
+          d.addListener(l, "click", "wje-infinite-scroll:click-item", null), s.insertAdjacentElement("beforeend", l);
         }), this.isLoading.push(t);
-      }
-    } catch (s) {
-      console.log(s.message);
+      } else
+        d.dispatchCustomEvent(this, "wje-infinite-scroll:complete"), this.endingEl.classList.add("show");
+    } catch (e) {
+      console.log(e.message);
     } finally {
       this.hideLoader();
     }
   }
 }
-u.define("wje-infinite-scroll", u);
+g.define("wje-infinite-scroll", g);
 export {
-  u as default
+  g as default
 };

package/dist/wje-inline-edit.js

@@ -51,9 +51,8 @@ class o extends l {
     this.isShadowRoot = "open";
   }
   draw(t, e, d) {
-    console.log("Draw", this.notEditable, !this.notEditable);
     let i = document.createDocumentFragment();
-    return this.heading = document.createElement("div"), this.heading.classList.add("heading"), this.h5 = document.createElement("h5"), this.h5.innerHTML = this.title, this.heading.appendChild(this.h5), i.appendChild(this.heading), this.notEditable || (console.log("VOJDEM TU"), this.span = document.createElement("span"), this.span.classList.add("edit", "text-primary"), this.span.innerHTML = "Upraviť", this.form = document.createElement("form"), this.form.classList.add("fade-out"), this.input = this.inputElement(), this.buttons = document.createElement("div"), this.buttons.classList.add("buttons", "btn-group"), this.buttonSave = document.createElement("button"), this.buttonSave.classList.add("btn", "btn-primary"), this.buttonSave.setAttribute("type", "button"), this.buttonSave.innerHTML = '<i class="fa-light fa-check"></i>', this.buttonClose = document.createElement("button"), this.buttonClose.classList.add("btn", "btn-default", "btn-close"), this.buttonClose.setAttribute("type", "button"), this.buttonClose.innerHTML = '<i class="fa-light fa-xmark"></i>', this.heading.appendChild(this.span), this.buttons.appendChild(this.buttonSave), this.buttons.appendChild(this.buttonClose), this.form.appendChild(this.input), this.form.appendChild(this.buttons), i.appendChild(this.form)), i;
+    return this.heading = document.createElement("div"), this.heading.classList.add("heading"), this.h5 = document.createElement("h5"), this.h5.innerHTML = this.title, this.heading.appendChild(this.h5), i.appendChild(this.heading), this.notEditable || (this.span = document.createElement("span"), this.span.classList.add("edit", "text-primary"), this.span.innerHTML = "Upraviť", this.form = document.createElement("form"), this.form.classList.add("fade-out"), this.input = this.inputElement(), this.buttons = document.createElement("div"), this.buttons.classList.add("buttons", "btn-group"), this.buttonSave = document.createElement("button"), this.buttonSave.classList.add("btn", "btn-primary"), this.buttonSave.setAttribute("type", "button"), this.buttonSave.innerHTML = '<i class="fa-light fa-check"></i>', this.buttonClose = document.createElement("button"), this.buttonClose.classList.add("btn", "btn-default", "btn-close"), this.buttonClose.setAttribute("type", "button"), this.buttonClose.innerHTML = '<i class="fa-light fa-xmark"></i>', this.heading.appendChild(this.span), this.buttons.appendChild(this.buttonSave), this.buttons.appendChild(this.buttonClose), this.form.appendChild(this.input), this.form.appendChild(this.buttons), i.appendChild(this.form)), i;
   }
   afterDraw(t, e, d) {
     this.notEditable || (this.heading.addEventListener("click", (i) => {

package/dist/wje-input-file.js

@@ -1,9 +1,9 @@
-var c = Object.defineProperty;
-var h = (i, e, t) => e in i ? c(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var b = Object.defineProperty;
+var h = (i, e, t) => e in i ? b(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var u = (i, e, t) => (h(i, typeof e != "symbol" ? e + "" : e, t), t);
-import m from "./wje-element.js";
+import m, { event as v } from "./wje-element.js";
 const w = ':host{--wje-input-font-family: var(--wje-font-family);--wje-input-background-color: var(--wje-background);--wje-input-color: var(--wje-color);--wje-input-color-invalid: var(--wje-color-danger);--wje-input-border-color: var(--wje-border-color);--wje-input-border-color-focus: var(--wje-color-primary);--wje-input-border-width: 1px;--wje-input-border-style: solid;--wje-input-border-radius: 4px;--wje-input-margin-bottom: .5rem;--wje-input-line-height: 20px;--wje-input-slot-padding-inline: .5rem;width:100%;margin-bottom:var(--wje-input-margin-bottom);display:block}:host .wrapper{display:flex;width:100%}:host .native-input .input-wrapper{width:100%;position:relative}:host .native-input.default{background-color:var(--wje-input-background-color);font-family:var(--wje-input-font-family);position:relative;border-radius:var(--wje-input-border-radius);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);padding-inline:0;padding-top:.25rem;padding-bottom:.25rem;transition:background-color .2s ease;cursor:text}:host .native-input.default .input-wrapper{margin-inline:.5rem}:host .native-input.default.focused{border-color:var(--wje-input-border-color-focus)!important}:host .native-input.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}:host .native-input.default input{border:none;height:25px;min-height:25px;padding:0;margin-top:-4px;background:none;box-shadow:none;width:100%}:host .native-input.default label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-input-line-height)}:host .native-input.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}:host .native-input.default ::slotted([slot="start"]){border-left:none;border-top:none;border-bottom:none}:host .native-input.default ::slotted([slot="end"]){border-right:none;border-top:none;border-bottom:none}:host .native-input.standard{background-color:var(--wje-input-background-color);font-family:var(--wje-input-font-family);position:relative;border-radius:var(--wje-input-border-radius);padding-inline:0;padding-top:0;padding-bottom:0;transition:background-color .2s ease;cursor:text}:host .native-input.standard.focused input{border-color:var(--wje-input-border-color-focus)!important}:host .native-input.standard input{display:block;min-height:32px;padding-inline:.5rem;padding-top:0;padding-bottom:0;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wje-input-border-radius);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color)}:host .native-input.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-input-line-height)}:host .native-input.standard .input-wrapper:hover .clear{visibility:visible}:host .native-input.standard ::slotted([slot="start"]){border-right:none;border-radius:var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius)}:host .native-input.standard ::slotted([slot="end"]){border-left:none;border-radius:0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0}:host .native-input.standard.has-start input{border-top-left-radius:0;border-bottom-left-radius:0}:host .native-input.standard.has-end input{border-top-right-radius:0;border-bottom-right-radius:0}:host .native-input.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-input-color-invalid);font-size:12px;line-height:normal}.clear{visibility:hidden;position:absolute;right:0;top:3px;--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}:host([required]) .input-wrapper:after{color:var(--wje-input-color-invalid);content:"*";font-family:var(--wje-force-mac-font-family);font-size:20px;position:absolute;right:10px;top:2px}:host([required]) .standard .input-wrapper:after{top:0}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wje-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}::slotted([slot="start"]),::slotted([slot="end"]){display:flex;align-items:center;border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);padding-inline:var(--wje-input-slot-padding-inline)}slot[name=start],slot[name=end]{display:flex}input{background-color:var(--wje-input-background-color);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);font-family:var(--wje-input-font-family);color:var(--wje-input-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;padding:.25rem .5rem;line-height:var(--wje-input-line-height);font-size:14px;font-weight:400;vertical-align:middle;min-height:32px}.error-message{display:none;position:absolute;width:auto;max-width:100%;min-width:auto;border-radius:50px;background:#000;padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}';
-class b extends m {
+class c extends m {
   /**
    * @constructor
    * @summary InputFile constructor
@@ -16,6 +16,13 @@ class b extends m {
      * @type {string}
      */
     u(this, "className", "Input");
+    this._value = "";
+  }
+  set value(t) {
+    this._value = t;
+  }
+  get value() {
+    return this._value;
   }
   /**
    * @summary Get CSS stylesheet
@@ -46,17 +53,17 @@ class b extends m {
    * @param {Object} params - The parameters
    * @returns {Object} Document fragment
    */
-  draw(t, d, s) {
-    let o = document.createDocumentFragment(), n = document.createElement("div");
-    n.setAttribute("part", "native"), n.classList.add("native-input-file", this.variant || "default");
-    let a = document.createElement("input");
-    a.setAttribute("type", "file"), a.setAttribute("multiple", ""), a.setAttribute("hidden", "");
+  draw(t, a, s) {
+    let n = document.createDocumentFragment(), o = document.createElement("div");
+    o.setAttribute("part", "native"), o.classList.add("native-input-file", this.variant || "default");
+    let d = document.createElement("input");
+    d.setAttribute("type", "file"), d.setAttribute("multiple", ""), d.setAttribute("hidden", "");
     let r = document.createElement("wje-input");
     r.setAttribute("variant", "standard"), r.setAttribute("type", "text"), r.setAttribute("placeholder", "Click to upload"), r.setAttribute("readonly", "");
-    let p = document.createElement("span");
-    p.setAttribute("slot", "start");
-    let l = document.createElement("wje-icon");
-    return l.setAttribute("slot", "icon-only"), l.setAttribute("name", "cloud-upload"), p.appendChild(l), r.appendChild(p), n.appendChild(r), n.appendChild(a), o.appendChild(n), this.native = n, this.input = r, this.fileInput = a, o;
+    let l = document.createElement("span");
+    l.setAttribute("slot", "start");
+    let p = document.createElement("wje-icon");
+    return p.setAttribute("slot", "icon-only"), p.setAttribute("name", "cloud-upload"), l.appendChild(p), r.appendChild(l), o.appendChild(r), o.appendChild(d), n.appendChild(o), this.native = o, this.input = r, this.fileInput = d, n;
   }
   /**
    * @summary After draw method
@@ -65,13 +72,14 @@ class b extends m {
     this.input.addEventListener("click", () => {
       this.fileInput.click();
     }), this.fileInput.addEventListener("change", (t) => {
-      for (var d = t.target.files, s = [], o = 0; o < d.length; o++)
-        s.push(d[o].name);
-      this.input.value = s.join(", ");
+      let a = t.target.files, s = [];
+      for (let n = 0; n < a.length; n++)
+        s.push(a[n].name);
+      this.input.value = s.join(", "), this.value = a, v.dispatchCustomEvent(this, "wje-input-file:change", { files: a });
     });
   }
 }
-b.define("wje-input-file", b);
+c.define("wje-input-file", c);
 export {
-  b as default
+  c as default
 };

package/dist/wje-input.js

@@ -194,7 +194,7 @@ class m extends x {
       });
     }), this.addEventListener("invalid", (t) => {
       this.invalid = !0, this.pristine = !1, this.errorMessage.textContent = this.internals.validationMessage, this.customErrorDisplay && t.preventDefault();
-    }), this.addEventListener("focus", () => this.input.focus()), this.clear && this.clear.addEventListener("wje:button-click", (t) => {
+    }), this.addEventListener("focus", () => this.input.focus()), this.clear && this.clear.addEventListener("wje-button:click", (t) => {
       this.input.value = "", w.dispatchCustomEvent(this.clear, "wje-input:clear");
     });
   }