wj-elements 0.1.11 → 0.1.13

package/dist/wje-infinite-scroll.js

@@ -1,193 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,240 +0,0 @@
-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
-};