wj-elements 0.1.16 → 0.1.17

package/dist/wje-infinite-scroll.js

@@ -0,0 +1,193 @@
+var g = Object.defineProperty;
+var p = (o, r, t) => r in o ? g(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{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 u extends f {
+  /**
+   * Creates an instance of InfiniteScroll.
+   *
+   * @constructor
+   * @param {Object} options - The options for the InfiniteScroll.
+   */
+  constructor(t = {}) {
+    super();
+    h(this, "className", "InfiniteScroll");
+    /**
+     * Adds the scroll event listener.
+     */
+    h(this, "scrollEvent", () => {
+      this.addEventListener("scroll", this.onScroll);
+    });
+    /**
+     * Removes the scroll event listener.
+     */
+    h(this, "unScrollEvent", () => {
+      this.removeEventListener("scroll", this.onScroll);
+    });
+    /**
+     * Handles the scroll event.
+     *
+     * @param {Event} e - The event.
+     */
+    h(this, "onScroll", (t) => {
+      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 = [], 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("}}", ""), l = "";
+          c.split(".").forEach((a) => {
+            l = l == "" ? e[a] : l[a];
+          }), i = i.replace(n, l);
+        }
+      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.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return y;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Prepares the component before drawing.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   */
+  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.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  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"), l = document.createElement("slot");
+    if (l.setAttribute("name", "ending"), w.hasSlot(this, "loader")) {
+      let a = document.createElement("div");
+      a.classList.add("loading");
+      let m = document.createElement("slot");
+      m.setAttribute("name", "loader"), a.appendChild(m), this.loadingEl = a, s.appendChild(a);
+    }
+    return n.appendChild(c), n.appendChild(l), s.appendChild(n), this.endingEl = l, s;
+  }
+  /**
+   * Called after the component has been drawn.
+   */
+  async afterDraw() {
+    this.queryParams = this.queryParams || "", this.size = +this.size || 10, this.currentPage = 0, this.scrollEvent(), await this.loadPages(this.currentPage);
+  }
+  /**
+   * Fetches the pages from the server.
+   *
+   * @param {number} page - The page number.
+   * @returns {Promise<Object>} The response from the server.
+   */
+  async getPages(t) {
+    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() {
+    var t;
+    (t = this == null ? void 0 : this.loadingEl) == null || t.classList.remove("show");
+  }
+  /**
+   * Shows the loader.
+   */
+  showLoader() {
+    var t;
+    (t = this == null ? void 0 : this.loadingEl) == null || t.classList.add("show");
+  }
+  /**
+   * Checks if there are more pages to load.
+   *
+   * @param {number} page - The page number.
+   * @returns {boolean} Whether there are more pages to load.
+   */
+  hasMorePages(t) {
+    return this.totalPages === 0 || t < this.totalPages;
+  }
+  /**
+   * Loads the pages.
+   *
+   * @param {number} page - The page number.
+   */
+  async loadPages(t) {
+    this.showLoader();
+    try {
+      if (this.hasMorePages(t) || typeof this.setCustomData == "function") {
+        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 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), a = i.parseFromString(c, "text/html").activeElement.firstElementChild;
+          d.addListener(a, "click", "wje-infinite-scroll:click-item", null), s.insertAdjacentElement("beforeend", a);
+        }), this.isLoading.push(t);
+      } 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);
+export {
+  u as default
+};

package/dist/wje-inline-edit.js

@@ -0,0 +1,120 @@
+var h = Object.defineProperty;
+var r = (s, n, t) => n in s ? h(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
+var a = (s, n, t) => (r(s, typeof n != "symbol" ? n + "" : n, t), t);
+import l from "./wje-element.js";
+const u = ":host{cursor:pointer;overflow:hidden;@keyframes wjFade{0%{display:flex}to{display:none}}}:host .heading{z-index:1;display:flex;align-items:center;position:relative;min-height:34px}:host .heading .edit{margin-left:.5rem;opacity:0}:host .heading:hover .edit{opacity:1}:host .heading h5{margin:0;width:calc(100% - 50px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host form{align-items:center;border-radius:3px!important;margin:0 1rem 0 0;display:flex}:host form.open{z-index:9}:host form .buttons{display:flex;margin:0 0 0 .5rem}:host .fade-out{display:none}:host .fade-in{display:flex}";
+class o extends l {
+  constructor() {
+    super();
+    a(this, "className", "InfiniteScroll");
+  }
+  get title() {
+    return this.getAttribute("title");
+  }
+  set title(t) {
+    return this.setAttribute("title", t);
+  }
+  get notEditable() {
+    return this.hasAttribute("not-editable");
+  }
+  set notEditable(t) {
+    return this.setAttribute("not-editable", "");
+  }
+  get endpoint() {
+    return this.getAttribute("endpoint");
+  }
+  set endpoint(t) {
+    return this.setAttribute("endpoint", t);
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return u;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(t, e, d) {
+    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 || (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) => {
+      this.form.classList.add("open", "fade-in"), this.heading.classList.remove("fade-in"), this.heading.classList.add("fade-out");
+    }), this.buttonClose.addEventListener("click", (i) => {
+      i.preventDefault(), i.stopImmediatePropagation(), i.stopPropagation(), this.form.classList.remove("open", "fade-in"), this.heading.classList.remove("fade-out"), this.heading.classList.add("fade-in");
+    }), this.buttonSave.addEventListener("click", (i) => {
+      this.endpoint === null ? this.dispatchEdit(this.input.value) : this.save(this.input.value);
+    }));
+  }
+  inputElement() {
+    let t = document.createElement("input");
+    return t.type = "text", t.placeholder = this.title, t.value = this.title, t.classList.add("form-control", "input-sm"), t;
+  }
+  save(t) {
+    return fetch(this.endpoint, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: t
+    }).then((e) => e.ok ? e.json() : e.text).then((e) => {
+      this.title = e.data, this.refresh(), intranet.notification(e), this.dispatchResponse(e.data);
+    }).catch((e) => {
+      intranet.notification(e), this.dispatchError(e);
+    });
+  }
+  dispatchEdit(t) {
+    document.dispatchEvent(
+      new CustomEvent("wje-inline-edit-save", {
+        bubbles: !0,
+        detail: {
+          value: t,
+          element: this
+        }
+      })
+    );
+  }
+  dispatchResponse(t) {
+    document.dispatchEvent(
+      new CustomEvent("wje-inline-edit-response", {
+        bubbles: !0,
+        detail: {
+          value: t,
+          element: this
+        }
+      })
+    );
+  }
+  dispatchError(t) {
+    document.dispatchEvent(
+      new CustomEvent("wje-inline-edit-error", {
+        bubbles: !0,
+        detail: {
+          value: t,
+          element: this
+        }
+      })
+    );
+  }
+}
+o.define("wje-inline-edit", o);
+export {
+  o as default
+};

package/dist/wje-input-file.js

@@ -0,0 +1,85 @@
+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, { 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 c extends m {
+  /**
+   * @constructor
+   * @summary InputFile constructor
+   * @param {Object} options - The options
+   */
+  constructor(t = {}) {
+    super();
+    /**
+     * @summary Class name
+     * @type {string}
+     */
+    u(this, "className", "Input");
+    this._value = "";
+  }
+  set value(t) {
+    this._value = t;
+  }
+  get value() {
+    return this._value;
+  }
+  /**
+   * @summary Get CSS stylesheet
+   * @static
+   * @returns {Object} styles
+   */
+  static get cssStyleSheet() {
+    return w;
+  }
+  /**
+   * @summary Get observed attributes
+   * @static
+   * @returns {Array} An empty array
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * @summary Setup attributes
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * @summary Draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   * @returns {Object} Document fragment
+   */
+  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 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
+   */
+  afterDraw() {
+    this.input.addEventListener("click", () => {
+      this.fileInput.click();
+    }), this.fileInput.addEventListener("change", (t) => {
+      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 });
+    });
+  }
+}
+c.define("wje-input-file", c);
+export {
+  c as default
+};

package/dist/wje-input.js

@@ -0,0 +1,240 @@
+var j = Object.defineProperty;
+var y = (n, a, t) => a in n ? j(n, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[a] = t;
+var b = (n, a, t) => (y(n, typeof a != "symbol" ? a + "" : a, t), t);
+import x, { event as w } from "./wje-element.js";
+const A = ':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(--wjinput-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 m extends x {
+  /**
+   * Constructor for the Input class.
+   * @param {Object} options - The options for the Input class.
+   */
+  constructor(t = {}) {
+    super();
+    /**
+     * The class name of the input.
+     * @type {string}
+     */
+    b(this, "className", "Input");
+    this.invalid = !1, this.pristine = !0, this.internals = this.attachInternals();
+  }
+  /**
+   * Setter for the value attribute.
+   * @param {string} value - The value to set.
+   */
+  set value(t) {
+    this.setAttribute("value", t);
+  }
+  /**
+   * Getter for the value attribute.
+   * @returns {string} The value of the attribute.
+   */
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  /**
+   * Getter for the customErrorDisplay attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get customErrorDisplay() {
+    return this.hasAttribute("custom-error-display");
+  }
+  /**
+   * Getter for the validateOnChange attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get validateOnChange() {
+    return this.hasAttribute("validate-on-change");
+  }
+  /**
+   * Getter for the invalid attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get invalid() {
+    return this.hasAttribute("invalid");
+  }
+  /**
+   * Setter for the invalid attribute.
+   * @param {boolean} isInvalid - Whether the input is invalid.
+   */
+  set invalid(t) {
+    t && this.customErrorDisplay ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
+  }
+  /**
+   * Getter for the form attribute.
+   * @returns {HTMLFormElement} The form the input is associated with.
+   */
+  get form() {
+    return this.internals.form;
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string} The name of the input.
+   */
+  get name() {
+    return this.getAttribute("name");
+  }
+  /**
+   * Getter for the type attribute.
+   * @returns {string} The type of the input.
+   */
+  get type() {
+    return this.localName;
+  }
+  /**
+   * Getter for the validity attribute.
+   * @returns {ValidityState} The validity state of the input.
+   */
+  get validity() {
+    return this.internals.validity;
+  }
+  /**
+   * Getter for the validationMessage attribute.
+   * @returns {string} The validation message of the input.
+   */
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  /**
+   * Getter for the willValidate attribute.
+   * @returns {boolean} Whether the input will be validated.
+   */
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  /**
+   * Checks the validity of the input.
+   * @returns {boolean} Whether the input is valid.
+   */
+  checkValidity() {
+    return this.internals.checkValidity();
+  }
+  /**
+   * Reports the validity of the input.
+   * @returns {boolean} Whether the input is valid.
+   */
+  reportValidity() {
+    return this.internals.reportValidity();
+  }
+  /**
+   * Getter for the cssStyleSheet attribute.
+   * @returns {CSSStyleSheet} The CSS style sheet of the input.
+   */
+  static get cssStyleSheet() {
+    return A;
+  }
+  /**
+   * Getter for the observedAttributes attribute.
+   * @returns {Array} The attributes to observe for changes.
+   */
+  static get observedAttributes() {
+    return ["value"];
+  }
+  /**
+   * Sets up the attributes for the input.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the input.
+   * @param {CanvasRenderingContext2D} context - The context to draw on.
+   * @param {Object} store - The store to use.
+   * @param {Object} params - The parameters to use.
+   * @returns {DocumentFragment} The drawn input.
+   */
+  draw(t, e, s) {
+    let o = this.hasSlot(this, "start"), v = this.hasSlot(this, "end"), f = document.createDocumentFragment(), r = document.createElement("div");
+    r.setAttribute("part", "native"), r.classList.add("native-input", this.variant || "default"), this.hasAttribute("invalid") && r.classList.add("has-error");
+    let l = document.createElement("div");
+    l.classList.add("wrapper");
+    let d = document.createElement("div");
+    d.classList.add("input-wrapper");
+    let u = document.createElement("label");
+    u.innerText = this.label, this.value && !this.hasAttribute("error") && u.classList.add("fade");
+    let i = document.createElement("input");
+    i.setAttribute("type", "text"), i.setAttribute("part", "input"), i.setAttribute("value", this.value || ""), i.classList.add("form-control"), this.hasAttribute("placeholder") && i.setAttribute("placeholder", this.placeholder), this.hasAttribute("multiple") && i.setAttribute("multiple", this.multiple), this.hasAttribute("disabled") && i.setAttribute("disabled", ""), this.hasAttribute("readonly") && i.setAttribute("readonly", ""), this.hasAttribute("maxlength") && i.setAttribute("maxlength", this.maxlength), this.hasAttribute("max") && i.setAttribute("max", this.max), this.hasAttribute("min") && i.setAttribute("min", this.min);
+    let p = document.createElement("div");
+    p.classList.add("error-message");
+    let h = null;
+    o && (h = document.createElement("slot"), h.setAttribute("name", "start"));
+    let c = null;
+    if (v && (c = document.createElement("slot"), c.setAttribute("name", "end")), o && (l.appendChild(h), r.classList.add("has-start")), this.variant === "standard" ? this.label && r.appendChild(u) : d.appendChild(u), d.appendChild(i), l.appendChild(d), r.appendChild(l), this.hasAttribute("clearable")) {
+      this.clear = document.createElement("wje-button"), this.clear.classList.add("clear"), this.clear.setAttribute("fill", "link"), this.clear.setAttribute("part", "clear");
+      let g = document.createElement("wje-icon");
+      g.setAttribute("name", "x"), this.clear.appendChild(g), d.appendChild(this.clear);
+    }
+    return v && (l.appendChild(c), r.classList.add("has-end")), r.appendChild(p), f.appendChild(r), this.native = r, this.labelElement = u, this.input = i, this.errorMessage = p, f;
+  }
+  /**
+   * Runs after the input is drawn.
+   */
+  afterDraw() {
+    [
+      "type",
+      "value",
+      "placeholder",
+      "required",
+      "min",
+      "max",
+      "minLength",
+      "maxLength",
+      "pattern"
+    ].forEach((t) => {
+      const e = t === "required" ? this.hasAttribute(t) : this.getAttribute(t);
+      e != null && (this.input[t] = e);
+    }), this.input.addEventListener("focus", (t) => {
+      this.labelElement.classList.add("fade"), this.native.classList.add("focused");
+    }), this.input.addEventListener("blur", (t) => {
+      this.native.classList.remove("focused"), t.target.value || this.labelElement.classList.remove("fade");
+    }), this.input.addEventListener("input", (t) => {
+      this.validateOnChange && (this.pristine = !1), this.input.classList.remove("pristine"), this.labelElement.classList.add("fade");
+      const e = new t.constructor(t.type, t);
+      this.dispatchEvent(e), this.validateInput(), w.dispatchCustomEvent(this, "wje-input:input", {
+        value: this.input.value
+      });
+    }), 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.input.value = "", w.dispatchCustomEvent(this.clear, "wje-input:clear");
+    });
+  }
+  /**
+   * Validates the input.
+   */
+  validateInput() {
+    const t = this.input.validity;
+    if (this.invalid = !1, t.valid)
+      this.internals.setValidity({}), this.pristine = !1, this.errorMessage.textContent = this.input.validationMessage;
+    else
+      for (let e in t) {
+        const s = `message-${e.toString()}`;
+        if (t[e]) {
+          this.validationError = e.toString(), this.invalid = !this.pristine && !t.valid;
+          let o = this.message;
+          this.hasAttribute("message") || (o = this.hasAttribute(s) ? this.getAttribute(s) : this.input.validationMessage), this.internals.setValidity(
+            { [this.validationError]: !0 },
+            o
+          ), this.invalid && this.customErrorDisplay && this.dispatchEvent(new Event("invalid"));
+        }
+      }
+  }
+  /**
+   * Checks whether the input has a slot.
+   * @param {HTMLElement} el - The element to check.
+   * @param {string} slotName - The name of the slot to check for.
+   * @returns {boolean} Whether the input has the slot.
+   */
+  hasSlot(t, e = null) {
+    let s = e ? `[slot="${e}"]` : "[slot]";
+    return t.querySelectorAll(s).length > 0;
+  }
+}
+/**
+ * Whether the input is associated with a form.
+ * @type {boolean}
+ */
+b(m, "formAssociated", !0);
+m.define("wje-input", m);
+export {
+  m as default
+};