wj-elements 0.1.48 → 0.1.49

package/dist/wje-infinite-scroll.js

@@ -0,0 +1,201 @@
+var p = Object.defineProperty;
+var g = (h, a, e) => a in h ? p(h, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[a] = e;
+var o = (h, a, e) => (g(h, typeof a != "symbol" ? a + "" : a, e), e);
+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(e = {}) {
+    super();
+    o(this, "className", "InfiniteScroll");
+    /**
+     * Adds the scroll event listener.
+     */
+    o(this, "scrollEvent", () => {
+      this.addEventListener("scroll", this.onScroll);
+    });
+    /**
+     * Removes the scroll event listener.
+     */
+    o(this, "unScrollEvent", () => {
+      this.removeEventListener("scroll", this.onScroll);
+    });
+    /**
+     * Handles the scroll event.
+     *
+     * @param {Event} e - The event.
+     */
+    o(this, "onScroll", (e) => {
+      const { scrollTop: t, scrollHeight: i, clientHeight: s } = e.target;
+      t + s >= i - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage) && (this.currentPage++, this.loadPages(this.currentPage));
+    });
+    /**
+     * Sets the custom data.
+     *
+     */
+    o(this, "dataToHtml", (e) => {
+      let t = this.infiniteScrollTemplate.interpolate(e);
+      return this.parser.parseFromString(t, "text/html").activeElement.firstElementChild;
+    });
+    o(this, "customForeach", (e) => {
+      e.forEach((t) => {
+        let i = this.dataToHtml(t);
+        d.addListener(i, "click", "wje-infinite-scroll:click-item", null), this.placementObj.insertAdjacentElement("beforeend", i);
+      });
+    });
+    this.totalPages = 0, this.isLoading = [], this._response = {}, this.iterate = null, this._infiniteScrollTemplate = null, String.prototype.interpolate = function(t) {
+      let i = this, s = i.match(/\{{.*?\}}/g);
+      if (s)
+        for (let l of s) {
+          let c = l.replace("{{", "").replace("}}", ""), n = "";
+          c.split(".").forEach((r) => {
+            n = n == "" ? t[r] : n[r];
+          }), i = i.replace(l, n);
+        }
+      return i;
+    };
+  }
+  set infiniteScrollTemplate(e) {
+    this._infiniteScrollTemplate = e;
+  }
+  get infiniteScrollTemplate() {
+    return this._infiniteScrollTemplate;
+  }
+  set response(e) {
+    this._response = e;
+  }
+  get response() {
+    return this._response;
+  }
+  set objectName(e) {
+    this.setAttribute("object-name", e);
+  }
+  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(e, t, i) {
+    var s, l;
+    this.iterate = this.querySelector("[iterate]"), this.infiniteScrollTemplate = (s = this.iterate) == null ? void 0 : s.outerHTML, (l = this.iterate) == null || l.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(e, t, i) {
+    let s = document.createDocumentFragment(), l = document.createElement("div");
+    l.classList.add("native"), l.setAttribute("part", "native-infinite-scroll");
+    let c = document.createElement("slot"), n = document.createElement("slot");
+    if (n.setAttribute("name", "ending"), w.hasSlot(this, "loader")) {
+      let r = document.createElement("div");
+      r.classList.add("loading");
+      let m = document.createElement("slot");
+      m.setAttribute("name", "loader"), r.appendChild(m), this.loadingEl = r, s.appendChild(r);
+    }
+    return l.appendChild(c), l.appendChild(n), s.appendChild(l), this.endingEl = n, 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(e) {
+    let t = this.url.includes("?");
+    const i = await fetch(`${this.url}${t ? "&" : "?"}page=${e}&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 e;
+    (e = this == null ? void 0 : this.loadingEl) == null || e.classList.remove("show");
+  }
+  /**
+   * Shows the loader.
+   */
+  showLoader() {
+    var e;
+    (e = this == null ? void 0 : this.loadingEl) == null || e.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(e) {
+    return this.totalPages === 0 || e < this.totalPages;
+  }
+  /**
+   * Loads the pages.
+   *
+   * @param {number} page - The page number.
+   */
+  async loadPages(e) {
+    this.showLoader();
+    try {
+      if (this.hasMorePages(e)) {
+        let t;
+        this.parser = new DOMParser(), typeof this.setCustomData == "function" ? t = await this.setCustomData(e) : t = await this.getPages(e), this.totalPages = t.totalPages, this.currentPage = e, this.placementObj = this, this.hasAttribute("placement") && (this.placementObj = this.querySelector(this.placement)), d.dispatchCustomEvent(this, "wje-infinite-scroll:load", t), this.response = t, this.customForeach(t[this.objectName]), this.isLoading.push(e);
+      } else
+        d.dispatchCustomEvent(this, "wje-infinite-scroll:complete"), this.endingEl.classList.add("show");
+    } catch (t) {
+      console.log(t.message);
+    } finally {
+      this.hideLoader();
+    }
+  }
+}
+u.define("wje-infinite-scroll", u);
+export {
+  u as default
+};

package/dist/wje-inline-edit.js

@@ -0,0 +1,145 @@
+var u = Object.defineProperty;
+var p = (s, n, t) => n in s ? u(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
+var r = (s, n, t) => (p(s, typeof n != "symbol" ? n + "" : n, t), t);
+import c from "./wje-element.js";
+import m from "./wje-format-digital.js";
+import b from "./wje-button.js";
+import v from "./wje-input.js";
+import f from "./wje-icon.js";
+const g = ":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 .native-inline-edit{align-items:center;border-radius:3px!important;margin:0 1rem 0 0;display:flex}:host .native-inline-edit.open{z-index:9}:host .native-inline-edit .buttons{display:flex;margin:0 0 0 .5rem}:host .fade-out{display:none}:host .fade-in{display:flex}";
+class l extends c {
+  constructor() {
+    super();
+    /**
+     * Dependencies
+     * @type {Object}
+     */
+    r(this, "depandencies", {
+      "wje-format-digital": m,
+      "wje-button": b,
+      "wje-input": v,
+      "wje-icon": f
+    });
+    /**
+     * The class name.
+     */
+    r(this, "className", "InlineEdit");
+  }
+  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);
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {string} The CSS stylesheet.
+   */
+  static get cssStyleSheet() {
+    return g;
+  }
+  static get observedAttributes() {
+    return ["checked", "disabled"];
+  }
+  /**
+   * Sets up the attributes for the checkbox.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the checkbox.
+   * @param {object} context - The context.
+   * @param {object} store - The store.
+   * @param {object} params - The parameters.
+   * @returns {DocumentFragment} The created fragment.
+   */
+  draw(t, e, h) {
+    let i = document.createDocumentFragment();
+    if (this.heading = document.createElement("div"), this.heading.classList.add("heading"), this.h5 = document.createElement("h5"), this.h5.innerHTML = this.textContent || this.title || "Názov", this.heading.appendChild(this.h5), i.appendChild(this.heading), !this.notEditable) {
+      this.span = document.createElement("span"), this.span.innerHTML = '<wje-icon name="pencil"></wje-icon>';
+      let a = document.createElement("div");
+      a.setAttribute("part", "native"), a.classList.add("native-inline-edit"), this.input = this.inputElement(), this.buttons = document.createElement("div"), this.buttons.classList.add("buttons", "btn-group");
+      let d = document.createElement("wje-button");
+      d.setAttribute("fill", "outline"), d.setAttribute("color", "success"), d.innerHTML = '<wje-icon name="check"></wje-icon>';
+      let o = document.createElement("wje-button");
+      o.setAttribute("fill", "outline"), o.setAttribute("color", "danger"), o.innerHTML = '<wje-icon name="x"></wje-icon>', this.heading.appendChild(this.span), this.buttons.appendChild(d), this.buttons.appendChild(o), a.appendChild(this.input), a.appendChild(this.buttons), this.save = d, this.close = o, i.appendChild(a);
+    }
+    return i;
+  }
+  afterDraw(t, e, h) {
+    this.notEditable || (this.heading.addEventListener("click", (i) => {
+      this.heading.classList.remove("fade-in"), this.heading.classList.add("fade-out");
+    }), this.close.addEventListener("click", (i) => {
+      i.preventDefault(), i.stopImmediatePropagation(), i.stopPropagation(), native.classList.remove("open", "fade-in"), this.heading.classList.remove("fade-out"), this.heading.classList.add("fade-in");
+    }), this.save.addEventListener("click", (i) => {
+      this.endpoint === null ? this.dispatchEdit(this.input.value) : this.save(this.input.value);
+    }));
+  }
+  inputElement() {
+    let t = document.createElement("wje-input");
+    return t.setAttribute("variant", "standard"), t.setAttribute("type", "text"), t.setAttribute("placeholder", this.placelhoder), t.setAttribute("value", this.textContent), 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
+        }
+      })
+    );
+  }
+}
+l.define("wje-inline-edit", l);
+export {
+  l 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
+};